diff --git a/GUI/src/components/BarGraph/index.tsx b/GUI/src/components/BarGraph/index.tsx index e4b061ee..fe253d25 100644 --- a/GUI/src/components/BarGraph/index.tsx +++ b/GUI/src/components/BarGraph/index.tsx @@ -12,7 +12,7 @@ import { } from '../../util/charts-utils'; import { GroupByPeriod } from '../MetricAndPeriodOptions/types'; import { useTranslation } from 'react-i18next'; -import { useTotalPeriodCounts } from '../../hooks/ useTotalPeriodCounts'; +import { usePeriodStatistics } from '../../hooks/usePeriodStatistics'; type Props = { data: any; @@ -24,7 +24,7 @@ type Props = { const BarGraph: React.FC = ({ startDate, endDate, data, unit, groupByPeriod }) => { const [width, setWidth] = useState(null); - const totalPeriodCounts = useTotalPeriodCounts(data.chartData, unit); + const periodStatistics = usePeriodStatistics(data.chartData, unit); const ref = useRef(null); const { t } = useTranslation(); @@ -98,7 +98,7 @@ const BarGraph: React.FC = ({ startDate, endDate, data, unit, groupByPeri /> `${value}${formatTotalPeriodCount(totalPeriodCounts, value)}`} + formatter={(value) => `${value}${formatTotalPeriodCount(periodStatistics, value)}`} /> {data?.chartData?.length > 0 && getKeys(data.chartData).map((k, i) => { diff --git a/GUI/src/components/LineGraph/index.tsx b/GUI/src/components/LineGraph/index.tsx index c4e724aa..a3de389b 100644 --- a/GUI/src/components/LineGraph/index.tsx +++ b/GUI/src/components/LineGraph/index.tsx @@ -10,7 +10,7 @@ import { getTicks, round, } from '../../util/charts-utils'; -import { useTotalPeriodCounts } from '../../hooks/ useTotalPeriodCounts'; +import { usePeriodStatistics } from '../../hooks/usePeriodStatistics'; type Props = { data: any; @@ -22,7 +22,7 @@ type Props = { const LineGraph = ({ data, startDate, endDate, unit }: Props) => { const [width, setWidth] = useState(null); const ref = useRef(null); - const totalPeriodCounts = useTotalPeriodCounts(data.chartData, unit); + const periodStatistics = usePeriodStatistics(data.chartData, unit); useEffect(() => { const handleResize = () => { @@ -86,7 +86,7 @@ const LineGraph = ({ data, startDate, endDate, unit }: Props) => { `${value}${formatTotalPeriodCount(totalPeriodCounts, value)}`} + formatter={(value) => `${value}${formatTotalPeriodCount(periodStatistics, value)}`} /> {data?.chartData?.length > 0 && diff --git a/GUI/src/components/PieGraph/PieCharLegends.tsx b/GUI/src/components/PieGraph/PieCharLegends.tsx index 976bd79c..e441ba63 100644 --- a/GUI/src/components/PieGraph/PieCharLegends.tsx +++ b/GUI/src/components/PieGraph/PieCharLegends.tsx @@ -1,8 +1,7 @@ -import React from 'react'; import { formatTotalPeriodCount, getColor } from '../../util/charts-utils'; import Track from '../Track'; import './PieGraph.scss'; -import { useTotalPeriodCounts } from '../../hooks/ useTotalPeriodCounts'; +import { usePeriodStatistics } from '../../hooks/usePeriodStatistics'; type Props = { data: any; @@ -11,7 +10,7 @@ type Props = { }; const PieCharLegends = ({ data, percentages, unit }: Props) => { - const totalPeriodCounts = useTotalPeriodCounts(data.chartData, unit); + const periodStatistics = usePeriodStatistics(data.chartData, unit); return ( { style={{ backgroundColor: color }} /> ); diff --git a/GUI/src/hooks/ useTotalPeriodCounts.ts b/GUI/src/hooks/ useTotalPeriodCounts.ts deleted file mode 100644 index 1ee1bbda..00000000 --- a/GUI/src/hooks/ useTotalPeriodCounts.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { useState, useEffect } from 'react'; -import { useTranslation } from 'react-i18next'; - -export const useTotalPeriodCounts = (chartData: Record[] | undefined, unit: string | undefined) => { - const [totalPeriodCounts, setTotalPeriodCounts] = useState>({}); - const { t } = useTranslation(); - - useEffect(() => { - if (!chartData?.length || unit !== t('units.chats')) return; - - setTotalPeriodCounts(getPeriodTotalCounts(chartData)); - }, [chartData, unit, t]); - - return totalPeriodCounts; -}; - -const getPeriodTotalCounts = (chartData: Record[]) => { - const totals: Record = {}; - - chartData.forEach((entry) => { - Object.entries(entry).forEach(([key, value]) => { - if (key !== 'dateTime') totals[key] = (totals[key] ?? 0) + value; - }); - }); - - return totals; -}; diff --git a/GUI/src/hooks/usePeriodStatistics.ts b/GUI/src/hooks/usePeriodStatistics.ts new file mode 100644 index 00000000..67509f60 --- /dev/null +++ b/GUI/src/hooks/usePeriodStatistics.ts @@ -0,0 +1,49 @@ +import { useState, useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; + +export const usePeriodStatistics = (chartData: Record[] | undefined, unit: string | undefined) => { + const [periodStatistics, setPeriodStatistics] = useState>({}); + const { t } = useTranslation(); + + useEffect(() => { + if (!chartData?.length) return; + + if (unit === t('units.chats')) setPeriodStatistics(getPeriodTotalCounts(chartData)); + if (unit === t('units.minutes') || unit === t('units.messages')) setPeriodStatistics(getPeriodAverages(chartData)); + }, [chartData, unit, t]); + + return periodStatistics; +}; + +const getPeriodTotalCounts = (chartData: Record[]) => { + const totals: Record = {}; + + chartData.forEach((entry) => { + Object.entries(entry).forEach(([key, value]) => { + if (key !== 'dateTime') totals[key] = (totals[key] ?? 0) + value; + }); + }); + + return totals; +}; + +const getPeriodAverages = (chartData: Record[]) => { + const sums: Record = {}; + const counts: Record = {}; + + chartData.forEach((entry) => { + Object.entries(entry).forEach(([key, value]) => { + if (key !== 'dateTime') { + sums[key] = (sums[key] ?? 0) + value; + counts[key] = (counts[key] ?? 0) + 1; + } + }); + }); + + const averages: Record = {}; + Object.keys(sums).forEach((key) => { + averages[key] = Number((sums[key] / counts[key]).toFixed(2)); + }); + + return averages; +};