feat(1-3267): use new api for chart

frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx

@@ -20,18 +20,12 @@ import {
 } from 'chart.js';
 
 import { Bar } from 'react-chartjs-2';
-import {
+import { useInstanceTrafficMetrics2 } from 'hooks/api/getters/useInstanceTrafficMetrics/useInstanceTrafficMetrics';
-    useInstanceTrafficMetrics,
-    useInstanceTrafficMetrics2,
-} from 'hooks/api/getters/useInstanceTrafficMetrics/useInstanceTrafficMetrics';
 import type { Theme } from '@mui/material/styles/createTheme';
 import Grid from '@mui/material/Grid';
 import { NetworkTrafficUsagePlanSummary } from './NetworkTrafficUsagePlanSummary';
 import annotationPlugin from 'chartjs-plugin-annotation';
-import {
+import { newToChartData, useTrafficDataEstimation } from 'hooks/useTrafficData';
-    type ChartDatasetType,
-    useTrafficDataEstimation,
-} from 'hooks/useTrafficData';
 import { customHighlightPlugin } from 'component/common/Chart/customHighlightPlugin';
 import { formatTickValue } from 'component/common/Chart/formatTickValue';
 import { useTrafficLimit } from './hooks/useTrafficLimit';
@@ -214,11 +208,16 @@ export const NetworkTrafficUsage: FC = () => {
         );
     }, [theme, period]);
 
-    const traffic = useInstanceTrafficMetrics(period);
+    const traffic = useInstanceTrafficMetrics2({
+        format: 'daily',
+        month: period,
+    });
 
-    const [labels, setLabels] = useState<number[]>([]);
+    const data = newToChartData(traffic.usage); // <- why don't we do this?
 
-    const [datasets, setDatasets] = useState<ChartDatasetType[]>([]);
+    // const [labels, setLabels] = useState<number[]>([]);
+
+    // const [datasets, setDatasets] = useState<ChartDatasetType[]>([]);
 
     const [usageTotal, setUsageTotal] = useState<number>(0);
 
@@ -226,30 +225,21 @@ export const NetworkTrafficUsage: FC = () => {
 
     const [estimatedMonthlyCost, setEstimatedMonthlyCost] = useState<number>(0);
 
-    const data = {
+    // const data = {
-        labels,
+    //     labels,
-        datasets,
+    //     datasets,
-    };
+    // };
 
-    useEffect(() => {
+    // useEffect(() => {
-        setDatasets(toChartData(labels, traffic, endpointsInfo));
+    //     setDatasets(toChartData(labels, traffic, endpointsInfo));
-    }, [labels, traffic]);
+    // }, [labels, traffic]);
 
-    // console.log(
+    // useEffect(() => {
-    //     'data',
+    //     if (record && period) {
-    //     data,
+    //         const periodData = record[period];
-    //     'traffic',
+    //         setLabels(getDayLabels(periodData.dayCount));
-    //     traffic,
+    //     }
-    //     'endpointsInfo',
+    // }, [period]);
-    //     endpointsInfo,
-    // );
-
-    useEffect(() => {
-        if (record && period) {
-            const periodData = record[period];
-            setLabels(getDayLabels(periodData.dayCount));
-        }
-    }, [period]);
 
     useEffect(() => {
         if (data) {

frontend/src/hooks/api/getters/useInstanceTrafficMetrics/useInstanceTrafficMetrics.ts

@@ -45,7 +45,7 @@ type Selection =
       };
 
 const fromSelection = (selection: Selection) => {
-    const fmt = (date: Date) => format(date, 'YYYY-MM-dd');
+    const fmt = (date: Date) => format(date, 'yyyy-MM-dd');
     if (selection.format === 'daily') {
         const month = new Date(selection.month);
         const from = fmt(month);

frontend/src/hooks/useTrafficData.ts

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import type {
     IInstanceTrafficMetricsResponse,
-    InstanceTrafficMetricsResponse2,
+    SegmentedSchema,
     SegmentedSchemaApiData,
 } from './api/getters/useInstanceTrafficMetrics/useInstanceTrafficMetrics';
 import type { ChartDataset } from 'chart.js';
@@ -115,29 +115,41 @@ const toPeriodsRecord = (
     );
 };
 
-const toMonthlyChartData = (
+export const newToChartData = (
-    traffic: InstanceTrafficMetricsResponse2,
+    traffic?: SegmentedSchema,
-    endpointsInfo: Record<string, EndpointInfo>,
+): { datasets: ChartDatasetType[]; labels: (string | number)[] } => {
-): { datasets: ChartDatasetType[]; labels: string[] } => {
+    if (!traffic) {
-    if (!traffic || !traffic.usage || !traffic.usage.apiData) {
         return { labels: [], datasets: [] };
     }
 
-    const from = new Date(traffic.usage.period.from);
+    if (traffic.format === 'monthly') {
-    const to = new Date(traffic.usage.period.to);
+        return toMonthlyChartData(traffic);
-    const numMonths = Math.abs(differenceInCalendarMonths(to, from));
+    } else {
-    const formatMonth = (date: Date) => format(date, 'yyyy-MM');
+        return toDailyChartData(traffic, endpointsInfo);
+    }
+};
 
-    const datasets = traffic.usage.apiData
+const prepareApiData = (apiData: SegmentedSchema['apiData']) =>
-        .filter((item) => !!endpointsInfo[item.apiPath])
+    apiData
+        .filter((item) => item.apiPath in endpointsInfo)
         .sort(
             (item1: SegmentedSchemaApiData, item2: SegmentedSchemaApiData) =>
                 endpointsInfo[item1.apiPath].order -
                 endpointsInfo[item2.apiPath].order,
-        )
+        );
-        .map((item: SegmentedSchemaApiData) => {
+
+const toMonthlyChartData = (
+    traffic: SegmentedSchema,
+): { datasets: ChartDatasetType[]; labels: string[] } => {
+    const from = new Date(traffic.period.from);
+    const to = new Date(traffic.period.to);
+    const numMonths = Math.abs(differenceInCalendarMonths(to, from)) + 1;
+    const formatMonth = (date: Date) => format(date, 'yyyy-MM');
+
+    const datasets = prepareApiData(traffic.apiData).map(
+        (item: SegmentedSchemaApiData) => {
             const monthsRec: { [month: string]: number } = {};
-            for (let i = 0; i <= numMonths; i++) {
+            for (let i = 0; i < numMonths; i++) {
                 monthsRec[formatMonth(addMonths(from, i))] = 0;
             }
 
@@ -153,7 +165,8 @@ const toMonthlyChartData = (
                 backgroundColor: epInfo.color,
                 hoverBackgroundColor: epInfo.color,
             };
-        });
+        },
+    );
 
     const labels = Array.from({ length: numMonths + 1 }).map((_, index) =>
         formatMonth(addMonths(from, index)),
@@ -219,20 +232,16 @@ const toMonthlyChartData = (
 //     };
 
 const toDailyChartData = (
-    traffic: InstanceTrafficMetricsResponse2,
+    traffic: SegmentedSchema,
     endpointsInfo: Record<string, EndpointInfo>,
 ): { datasets: ChartDatasetType[]; labels: number[] } => {
-    if (!traffic || !traffic.usage || !traffic.usage.apiData) {
+    const from = new Date(traffic.period.from);
-        return { datasets: [], labels: [] };
+    const to = new Date(traffic.period.to);
-    }
+    const numDays = Math.abs(differenceInCalendarDays(to, from)) + 1;
-
-    const from = new Date(traffic.usage.period.from);
-    const to = new Date(traffic.usage.period.to);
-    const numDays = Math.abs(differenceInCalendarDays(to, from));
     const formatDay = (date: Date) => format(date, 'yyyy-MM-dd');
 
     const daysRec: { [day: string]: number } = {};
-    for (let i = 0; i <= numDays; i++) {
+    for (let i = 0; i < numDays; i++) {
         daysRec[formatDay(addDays(from, i))] = 0;
     }
 
@@ -240,7 +249,7 @@ const toDailyChartData = (
         ...daysRec,
     });
 
-    const datasets = traffic.usage.apiData
+    const datasets = traffic.apiData
         .filter((item) => !!endpointsInfo[item.apiPath])
         .sort(
             (item1: SegmentedSchemaApiData, item2: SegmentedSchemaApiData) =>
@@ -264,9 +273,10 @@ const toDailyChartData = (
             };
         });
 
-    // simplification: assumings days run in a single month from the 1st onwards
+    // simplification: assuming days run in a single month from the 1st onwards
     const labels = Array.from({ length: numDays }).map((_, index) => index + 1);
 
+    console.log(labels, datasets);
     return { datasets, labels };
 };