Implment (#342)

buerokratt · Oct 28, 2024 · 1cdafd0 · 1cdafd0
1 parent a7d6258
commit 1cdafd0
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 37 deletions.
diff --git 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<Props> = ({ startDate, endDate, data, unit, groupByPeriod }) => {
   const [width, setWidth] = useState<number | null>(null);
-  const totalPeriodCounts = useTotalPeriodCounts(data.chartData, unit);
+  const periodStatistics = usePeriodStatistics(data.chartData, unit);
 
   const ref = useRef<HTMLDivElement>(null);
   const { t } = useTranslation();
@@ -98,7 +98,7 @@ const BarGraph: React.FC<Props> = ({ startDate, endDate, data, unit, groupByPeri
         />
         <Legend
           wrapperStyle={{ position: 'relative', marginTop: '20px' }}
-          formatter={(value) => `${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
@@ -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<number | null>(null);
   const ref = useRef<HTMLDivElement>(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) => {
         </YAxis>
         <Legend
           wrapperStyle={{ position: 'relative', marginTop: '20px' }}
-          formatter={(value) => `${value}${formatTotalPeriodCount(totalPeriodCounts, value)}`}
+          formatter={(value) => `${value}${formatTotalPeriodCount(periodStatistics, value)}`}
         />
         <CartesianGrid stroke="#f5f5f5" />
         {data?.chartData?.length > 0 &&

diff --git 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 (
     <Track
@@ -31,7 +30,7 @@ const PieCharLegends = ({ data, percentages, unit }: Props) => {
               style={{ backgroundColor: color }}
             />
             <label style={{ color, maxLines: 1 }}>
-              {`${e.name}: ${e.value} %${formatTotalPeriodCount(totalPeriodCounts, e.name)}`}
+              {`${e.name}: ${e.value} %${formatTotalPeriodCount(periodStatistics, e.name)}`}
             </label>
           </Track>
         );

diff --git a/GUI/src/hooks/ useTotalPeriodCounts.ts b/GUI/src/hooks/ useTotalPeriodCounts.ts
diff --git a/GUI/src/hooks/usePeriodStatistics.ts 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<string, number>[] | undefined, unit: string | undefined) => {
+  const [periodStatistics, setPeriodStatistics] = useState<Record<string, number>>({});
+  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<string, number>[]) => {
+  const totals: Record<string, number> = {};
+
+  chartData.forEach((entry) => {
+    Object.entries(entry).forEach(([key, value]) => {
+      if (key !== 'dateTime') totals[key] = (totals[key] ?? 0) + value;
+    });
+  });
+
+  return totals;
+};
+
+const getPeriodAverages = (chartData: Record<string, number>[]) => {
+  const sums: Record<string, number> = {};
+  const counts: Record<string, number> = {};
+
+  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<string, number> = {};
+  Object.keys(sums).forEach((key) => {
+    averages[key] = Number((sums[key] / counts[key]).toFixed(2));
+  });
+
+  return averages;
+};