feat(1-3267): make the chart mostly work

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

@@ -33,6 +33,7 @@ import { BILLING_TRAFFIC_BUNDLE_PRICE } from 'component/admin/billing/BillingDas
 import { useLocationSettings } from 'hooks/useLocationSettings';
 import { PeriodSelector } from './PeriodSelector';
 import { useUiFlag } from 'hooks/useUiFlag';
+import { format } from 'date-fns';
 
 const StyledBox = styled(Box)(({ theme }) => ({
     display: 'grid',
@@ -189,29 +190,36 @@ export const NetworkTrafficUsage: FC = () => {
         return createBarChartOptions(
             theme,
             (tooltipItems: any) => {
-                const periodItem = record[period];
+                if (period.format === 'daily') {
-                const tooltipDate = new Date(
+                    const periodItem = record[period.month];
-                    periodItem.year,
+                    const tooltipDate = new Date(
-                    periodItem.month,
+                        periodItem.year,
-                    Number.parseInt(tooltipItems[0].label),
+                        periodItem.month,
-                );
+                        Number.parseInt(tooltipItems[0].label),
-                return tooltipDate.toLocaleDateString(
+                    );
-                    locationSettings?.locale ?? 'en-US',
+                    return tooltipDate.toLocaleDateString(
-                    {
+                        locationSettings?.locale ?? 'en-US',
-                        month: 'long',
+                        {
-                        day: 'numeric',
+                            month: 'long',
-                        year: 'numeric',
+                            day: 'numeric',
-                    },
+                            year: 'numeric',
-                );
+                        },
+                    );
+                } else {
+                    return new Date(tooltipItems[0].label).toLocaleDateString(
+                        locationSettings?.locale ?? 'en-US',
+                        {
+                            month: 'long',
+                            year: 'numeric',
+                        },
+                    );
+                }
             },
             includedTraffic,
         );
     }, [theme, period]);
 
-    const traffic = useInstanceTrafficMetrics2({
+    const traffic = useInstanceTrafficMetrics2(period);
-        format: 'daily',
-        month: period,
-    });
 
     const data = newToChartData(traffic.usage); // <- why don't we do this?
 
@@ -244,7 +252,13 @@ export const NetworkTrafficUsage: FC = () => {
     useEffect(() => {
         if (data) {
             // if daily, there is a sum. if monthly, use the count from the current month
-            const usage = toTrafficUsageSum(data.datasets);
+            let usage: number;
+            if (period.format === 'monthly') {
+                usage = data.datasets.length; // this is wrong
+            } else {
+                usage = toTrafficUsageSum(data.datasets);
+            }
+
             setUsageTotal(usage);
             if (includedTraffic > 0) {
                 const calculatedOverageCost = calculateOverageCost(
@@ -256,7 +270,9 @@ export const NetworkTrafficUsage: FC = () => {
 
                 setEstimatedMonthlyCost(
                     calculateEstimatedMonthlyCost(
-                        period,
+                        period.format === 'daily'
+                            ? period.month
+                            : format(new Date(), 'yyyy-MM'),
                         data.datasets,
                         includedTraffic,
                         new Date(),

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

@@ -1,4 +1,5 @@
 import { styled } from '@mui/material';
+import type { ChartDataSelection } from 'hooks/api/getters/useInstanceTrafficMetrics/useInstanceTrafficMetrics';
 import { type FC, useState } from 'react';
 
 export type Period = {
@@ -147,8 +148,8 @@ type Selection =
       };
 
 type Props = {
-    selectedPeriod: string;
+    selectedPeriod: ChartDataSelection;
-    setPeriod: (period: string) => void;
+    setPeriod: (period: ChartDataSelection) => void;
 };
 
 export const PeriodSelector: FC<Props> = ({ selectedPeriod, setPeriod }) => {
@@ -157,14 +158,14 @@ export const PeriodSelector: FC<Props> = ({ selectedPeriod, setPeriod }) => {
     // this is for dev purposes; only to show how the design will work when you select a range.
     const [tempOverride, setTempOverride] = useState<Selection | null>();
 
-    const select = (value: Selection) => {
+    // const select = (value: Selection) => {
-        if (value.type === 'month') {
+    //     if (value.type === 'month') {
-            setTempOverride(null);
+    //         setTempOverride(null);
-            setPeriod(value.value);
+    //         setPeriod(value.value);
-        } else {
+    //     } else {
-            setTempOverride(value);
+    //         setTempOverride(value);
-        }
+    //     }
-    };
+    // };
 
     const rangeOptions = [3, 6, 12].map((monthsBack) => ({
         value: monthsBack,
@@ -183,17 +184,17 @@ export const PeriodSelector: FC<Props> = ({ selectedPeriod, setPeriod }) => {
                         <li key={period.label}>
                             <button
                                 className={
-                                    !tempOverride &&
+                                    selectedPeriod.format === 'daily' &&
-                                    period.key === selectedPeriod
+                                    period.key === selectedPeriod.month
                                         ? 'selected'
                                         : ''
                                 }
                                 type='button'
                                 disabled={!period.selectable}
                                 onClick={() => {
-                                    select({
+                                    setPeriod({
-                                        type: 'month',
+                                        format: 'daily',
-                                        value: period.key,
+                                        month: period.key,
                                     });
                                 }}
                             >
@@ -211,16 +212,15 @@ export const PeriodSelector: FC<Props> = ({ selectedPeriod, setPeriod }) => {
                         <li key={option.label}>
                             <button
                                 className={
-                                    tempOverride &&
+                                    selectedPeriod.format === 'monthly' &&
-                                    tempOverride.type === 'range' &&
+                                    option.value === selectedPeriod.monthsBack
-                                    option.value === tempOverride.monthsBack
                                         ? 'selected'
                                         : ''
                                 }
                                 type='button'
                                 onClick={() => {
-                                    select({
+                                    setPeriod({
-                                        type: 'range',
+                                        format: 'monthly',
                                         monthsBack: option.value,
                                     });
                                 }}

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

@@ -34,7 +34,7 @@ export const useInstanceTrafficMetrics = (
     );
 };
 
-type Selection =
+export type ChartDataSelection =
     | {
           format: 'daily';
           month: string;
@@ -44,7 +44,7 @@ type Selection =
           monthsBack: number;
       };
 
-const fromSelection = (selection: Selection) => {
+const fromSelection = (selection: ChartDataSelection) => {
     const fmt = (date: Date) => format(date, 'yyyy-MM-dd');
     if (selection.format === 'daily') {
         const month = new Date(selection.month);
@@ -92,10 +92,10 @@ export type InstanceTrafficMetricsResponse2 = {
 };
 
 export const useInstanceTrafficMetrics2 = (
-    selection: Selection,
+    selection: ChartDataSelection,
 ): InstanceTrafficMetricsResponse2 => {
-    const { from, to } = fromSelection(selection);
+    // const { from, to } = fromSelection(selection);
-    console.log('would use these from and to dates', from, to);
+    // console.log('would use these from and to dates', from, to);
 
     const apiPath =
         selection.format === 'daily'

frontend/src/hooks/useTrafficData.ts

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import type {
+    ChartDataSelection,
     IInstanceTrafficMetricsResponse,
     SegmentedSchema,
     SegmentedSchemaApiData,
@@ -377,7 +378,10 @@ export const useTrafficDataEstimation = () => {
     //         "label": "December 2024"
     //     }
     // }
-    const [period, setPeriod] = useState<string>(selectablePeriods[0].key);
+    const [period, setPeriod] = useState<ChartDataSelection>({
+        format: 'daily',
+        month: selectablePeriods[0].key,
+    });
 
     return {
         calculateTrafficDataCost,