Merge pull request #5819 from bcgov/feat/5736

feat(5736): replace area graph implementation with Chart.js

Author: junminahn

app/app/layout.tsx

@@ -9,6 +9,17 @@ import { MantineProvider } from '@mantine/core';
 import { ModalsProvider } from '@mantine/modals';
 import { Notifications } from '@mantine/notifications';
 import { useQuery } from '@tanstack/react-query';
+import {
+  Chart,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  PointElement,
+  LineElement,
+  Tooltip,
+  Legend,
+} from 'chart.js';
 import localFont from 'next/font/local';
 import { useEffect } from 'react';
 import Footer from '@/components/layouts/Footer';
@@ -19,6 +30,8 @@ import { useAppState } from '@/states/global';
 import { cn } from '@/utils/js';
 import { theme } from './mantine-theme';
 
+Chart.register(CategoryScale, LinearScale, BarElement, Title, PointElement, LineElement, Tooltip, Legend);
+
 const bcsans = localFont({
   src: [
     {

app/components/analytics/CombinedAreaGraph.tsx

@@ -1,11 +1,11 @@
 import { LoadingOverlay } from '@mantine/core';
-import { AreaChart, Card, Title, Subtitle } from '@tremor/react';
+import { Card, Title, Subtitle } from '@tremor/react';
+import { ChartTypeRegistry, TooltipItem } from 'chart.js';
+import { useMemo } from 'react';
+import { Line } from 'react-chartjs-2';
+import { valueFormatter, getColor } from '@/components/analytics/helpers';
 import ExportButton from '@/components/buttons/ExportButton';
 
-const valueFormatter = function (number: number) {
-  return new Intl.NumberFormat('us').format(number).toString();
-};
-
 export type ChartDate = {
   date: string;
 };
@@ -29,6 +29,68 @@ export default function CombinedAreaGraph({
   isLoading?: boolean;
   exportApiEndpoint?: string /* temporary */;
 }) {
+  const { data, options } = useMemo(() => {
+    if (!chartData) return { data: { labels: [], datasets: [] }, options: {} };
+
+    const labels: string[] = [];
+    const datasetMap: Record<string, number[]> = {};
+
+    for (const row of chartData) {
+      for (const [key, value] of Object.entries(row)) {
+        if (key === 'date') {
+          labels.push(String(value));
+          continue;
+        }
+
+        if (!datasetMap[key]) {
+          datasetMap[key] = [];
+        }
+
+        datasetMap[key].push(Number(value));
+      }
+    }
+
+    const _data = {
+      labels,
+      datasets: Object.entries(datasetMap).map(([label, data], index) => ({
+        label,
+        data,
+        borderColor: getColor(index),
+        backgroundColor: getColor(index, 0.2),
+        tension: 0.4,
+      })),
+    };
+
+    const _options = {
+      responsive: true,
+      maintainAspectRatio: true,
+      interaction: {
+        mode: 'index' as const,
+        intersect: false,
+      },
+      plugins: {
+        legend: {
+          position: 'top' as const,
+        },
+        title: {
+          display: false,
+          text: '',
+        },
+        tooltip: {
+          callbacks: {
+            label: function (context: TooltipItem<keyof ChartTypeRegistry>) {
+              const label = context.dataset.label || 'Unknown';
+              const value = valueFormatter(context.raw as number);
+              return `${label}: ${value}`;
+            },
+          },
+        },
+      },
+    };
+
+    return { data: _data, options: _options };
+  }, [chartData]);
+
   return (
     <div className="flex flex-col items-end">
       <ExportButton onExport={onExport} downloadUrl={exportApiEndpoint} /* temporary */ className="m-2" />
@@ -42,15 +104,7 @@ export default function CombinedAreaGraph({
             overlayProps={{ radius: 'sm', blur: 2 }}
             loaderProps={{ color: 'pink', type: 'bars' }}
           />
-          <AreaChart
-            className="h-72 mt-4"
-            data={chartData}
-            index="date"
-            yAxisWidth={65}
-            categories={categories}
-            colors={colors}
-            valueFormatter={valueFormatter}
-          />
+          <Line className="max-h-[28rem] mt-4" data={data} options={options} />
         </div>
       </Card>
     </div>

app/components/analytics/helpers.ts

@@ -0,0 +1,16 @@
+export function valueFormatter(number: number) {
+  return new Intl.NumberFormat('us').format(number).toString();
+}
+
+export function getColor(index: number, alpha = 1) {
+  const colors = [
+    [75, 192, 192],
+    [255, 99, 132],
+    [54, 162, 235],
+    [255, 206, 86],
+    [153, 102, 255],
+    [255, 159, 64],
+  ];
+  const [r, g, b] = colors[index % colors.length];
+  return `rgba(${r},${g},${b},${alpha})`;
+}

app/components/private-cloud/monthly-cost/MonthyCostChart.tsx

@@ -1,19 +1,8 @@
 import { Card, Title } from '@tremor/react';
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title as ChartTitle,
-  Tooltip,
-  Legend,
-} from 'chart.js';
 import { Bar } from 'react-chartjs-2';
 import { MonthlyCost } from '@/types/private-cloud';
 import { getMonthlyCostChartConfig } from './monthly-cost-chart-data';
 
-ChartJS.register(CategoryScale, LinearScale, BarElement, ChartTitle, Tooltip, Legend);
-
 export default function MonthlyCostChart({ data }: { data: Pick<MonthlyCost, 'days' | 'dayDetails'> }) {
   const { options, data: chartData } = getMonthlyCostChartConfig({ data });
 

app/components/private-cloud/quarterly-cost/QuarterlyCostChart.tsx

@@ -1,19 +1,8 @@
 import { Card, Title } from '@tremor/react';
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title as ChartTitle,
-  Tooltip,
-  Legend,
-} from 'chart.js';
 import { Bar } from 'react-chartjs-2';
 import { QuarterlyCost } from '@/types/private-cloud';
 import { getQuarterlyCostChartConfig } from './quarterly-cost-chart-data';
 
-ChartJS.register(CategoryScale, LinearScale, BarElement, ChartTitle, Tooltip, Legend);
-
 export default function QuarterlyCostChart({ data }: { data: Pick<QuarterlyCost, 'months' | 'monthDetails'> }) {
   const { options, data: chartData } = getQuarterlyCostChartConfig({ data });
 

app/components/private-cloud/yearly-cost/YearlyCostChart.tsx

@@ -1,19 +1,8 @@
 import { Card, Title } from '@tremor/react';
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title as ChartTitle,
-  Tooltip,
-  Legend,
-} from 'chart.js';
 import { Bar } from 'react-chartjs-2';
 import { YearlyCost } from '@/types/private-cloud';
 import { getYearlyCostChartConfig } from './yearly-cost-chart-data';
 
-ChartJS.register(CategoryScale, LinearScale, BarElement, ChartTitle, Tooltip, Legend);
-
 export default function YearlyCostChart({ data }: { data: Pick<YearlyCost, 'months' | 'monthDetails'> }) {
   const { options, data: chartData } = getYearlyCostChartConfig({ data });