Merge pull request #5831 from bcgov/feat/5736

junminahn · web-flow · commit 22edd64ec4c3 · 2025-06-12T17:32:19.000-07:00
diff --git a/app/app/analytics/general/page.tsx b/app/app/analytics/general/page.tsx
@@ -2,7 +2,8 @@
 
 import { useQuery } from '@tanstack/react-query';
 import { useSnapshot } from 'valtio';
-import CombinedAreaGraph from '@/components/analytics/CombinedAreaGraph';
+import LineChartCard from '@/components/analytics/LineChartCard';
+import { LineChartDataItem } from '@/components/generic/charts/LineChart';
 import FormDateRangePicker from '@/components/generic/select/FormDateRangePicker';
 import FormUserPicker from '@/components/generic/select/FormUserPicker';
 import { GlobalPermissions } from '@/constants';
@@ -19,7 +20,7 @@ const analyticsDashboard = createClientPage({
 export default analyticsDashboard(() => {
   const snap = useSnapshot(pageState);
 
-  const { data, isLoading } = useQuery({
+  const { data, isLoading } = useQuery<LineChartDataItem[]>({
     queryKey: ['logins', snap.dates, snap.userId],
     queryFn: () => getAnalyticsGeneralData({ dates: snap.dates, userId: snap.userId }),
   });
@@ -44,7 +45,7 @@ export default analyticsDashboard(() => {
         />
       </div>
       <div className="flex flex-col gap-y-12 mt-14">
-        <CombinedAreaGraph
+        <LineChartCard
           index="date"
           isLoading={isLoading}
           title="Daily User Login Events"
diff --git a/app/app/analytics/private-cloud/ActiveProducts.tsx b/app/app/analytics/private-cloud/ActiveProducts.tsx
@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import CombinedAreaGraph from '@/components/analytics/CombinedAreaGraph';
+import LineChartCard from '@/components/analytics/LineChartCard';
 import { clusters } from '@/constants';
 import { downloadPrivateCloudActiveProducts } from '@/services/backend/analytics/private-cloud';
 import { ActiveProduct } from '@/types/analytics-private';
@@ -10,8 +10,9 @@ export default function ActiveProducts({ data }: { data: ActiveProduct[] }) {
   const pageSnapshot = useSnapshot(pageState);
   const startDate = pageSnapshot.dates?.[0] ?? data?.[0]?.date;
   const endDate = pageSnapshot.dates?.[1] ?? new Date();
+
   return (
-    <CombinedAreaGraph
+    <LineChartCard
       index="date"
       title="Active Products"
       subtitle={`This chart displays the cumulative number of products created from ${formatDate(
diff --git a/app/app/analytics/private-cloud/AllRequests.tsx b/app/app/analytics/private-cloud/AllRequests.tsx
@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import CombinedAreaGraph from '@/components/analytics/CombinedAreaGraph';
+import LineChartCard from '@/components/analytics/LineChartCard';
 import { downloadPrivateCloudAllRequests } from '@/services/backend/analytics/private-cloud';
 import type { AllRequests } from '@/types/analytics-private';
 import { formatDate } from '@/utils/js/date';
@@ -10,7 +10,7 @@ export default function AllRequests({ data }: { data: AllRequests[] }) {
   const startDate = pageSnapshot.dates?.[0] ?? data?.[0]?.date;
   const endDate = pageSnapshot.dates?.[1] ?? new Date();
   return (
-    <CombinedAreaGraph
+    <LineChartCard
       index="date"
       title="Requests over time"
       subtitle={`This chart displays the number of requests created over time for each request type from ${formatDate(
diff --git a/app/app/analytics/private-cloud/ContactChangeRequests.tsx b/app/app/analytics/private-cloud/ContactChangeRequests.tsx
@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import CombinedAreaGraph from '@/components/analytics/CombinedAreaGraph';
+import LineChartCard from '@/components/analytics/LineChartCard';
 import { downloadPrivateCloudContactChangeRequests } from '@/services/backend/analytics/private-cloud';
 import { ContactsChange } from '@/types/analytics-private';
 import { formatDate } from '@/utils/js/date';
@@ -10,7 +10,7 @@ export default function ContactChangeRequests({ data }: { data: ContactsChange[]
   const startDate = pageSnapshot.dates?.[0] ?? data?.[0]?.date;
   const endDate = pageSnapshot.dates?.[1] ?? new Date();
   return (
-    <CombinedAreaGraph
+    <LineChartCard
       index="date"
       title="Contact change requests over time"
       subtitle={`This chart displays edit requests where contact changes were requested and the request decision from ${formatDate(
diff --git a/app/app/analytics/private-cloud/MinistryDistribution.tsx b/app/app/analytics/private-cloud/MinistryDistribution.tsx
@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import PieGraph from '@/components/analytics/PieGraph';
+import MultipleDoughnutChartCard from '@/components/analytics/MultipleDoughnutChartCard';
 import { clusters } from '@/constants';
 import { mapClusterData, transformMinistryData } from '@/helpers/ministry-data';
 import { downloadPrivateCloudMinistryDistribution } from '@/services/backend/analytics/private-cloud';
@@ -21,7 +21,7 @@ export default function MinistryDistribution({ data }: { data: MinistryDistribut
   };
 
   return (
-    <PieGraph
+    <MultipleDoughnutChartCard
       onExport={() => downloadPrivateCloudMinistryDistribution({ data: { ...pageSnapshot } })}
       title="Ministry per Cluster"
       subtitle={`This chart displays the cluster distributions by ministries for products created from ${formatDate(
diff --git a/app/app/analytics/private-cloud/QuotaRequests.tsx b/app/app/analytics/private-cloud/QuotaRequests.tsx
@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import CombinedAreaGraph from '@/components/analytics/CombinedAreaGraph';
+import LineChartCard from '@/components/analytics/LineChartCard';
 import { downloadPrivateCloudQuotaChangeRequests } from '@/services/backend/analytics/private-cloud';
 import { QuotaChange } from '@/types/analytics-private';
 import { formatDate } from '@/utils/js/date';
@@ -10,7 +10,7 @@ export default function QuotaRequests({ data }: { data: QuotaChange[] }) {
   const startDate = pageSnapshot.dates?.[0] ?? data?.[0]?.date;
   const endDate = pageSnapshot.dates?.[1] ?? new Date();
   return (
-    <CombinedAreaGraph
+    <LineChartCard
       index="date"
       title="Quota requests over time"
       subtitle={`This chart displays edit requests where a quota change was requested and the request decision from ${formatDate(
diff --git a/app/app/analytics/private-cloud/RequestsDecisionTime.tsx b/app/app/analytics/private-cloud/RequestsDecisionTime.tsx
@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import Histogram from '@/components/analytics/Histogram';
+import BarChartCard from '@/components/analytics/BarChartCard';
 import { downloadPrivateCloudRequestsDecisionTime } from '@/services/backend/analytics/private-cloud';
 import { RequestDecisionTime } from '@/types/analytics-private';
 import { formatDate } from '@/utils/js/date';
@@ -10,15 +10,14 @@ export default function RequestsDecisionTime({ data }: { data: RequestDecisionTi
   const startDate = pageSnapshot.dates?.[0] ?? new Date('2023-04-01T00:00:00.000Z');
   const endDate = pageSnapshot.dates?.[1] ?? new Date();
   return (
-    <Histogram
+    <BarChartCard
       index="time"
       title="Request decision time frequency (%)"
       subtitle={`This chart displays the frequency of request decision times (%) for  products created from ${formatDate(
         startDate,
       )} to ${formatDate(endDate)}.`}
       chartData={data}
       categories={['Percentage']}
-      colors={['indigo']}
       onExport={() => downloadPrivateCloudRequestsDecisionTime({ data: { ...pageSnapshot } })}
     />
   );
diff --git a/app/app/analytics/public-cloud/ActiveProducts.tsx b/app/app/analytics/public-cloud/ActiveProducts.tsx
@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import CombinedAreaGraph from '@/components/analytics/CombinedAreaGraph';
+import LineChartCard from '@/components/analytics/LineChartCard';
 import { providers } from '@/constants';
 import { downloadPublicCloudActiveProducts } from '@/services/backend/analytics/public-cloud';
 import { ActiveProduct } from '@/types/analytics-public';
@@ -11,7 +11,7 @@ export default function ActiveProducts({ data }: { data: ActiveProduct[] }) {
   const startDate = pageSnapshot.dates?.[0] ?? data?.[0]?.date;
   const endDate = pageSnapshot.dates?.[1] ?? new Date();
   return (
-    <CombinedAreaGraph
+    <LineChartCard
       index="date"
       title="Active Products"
       subtitle={`This chart displays the cumulative number of products created from ${formatDate(
diff --git a/app/app/analytics/public-cloud/AllRequests.tsx b/app/app/analytics/public-cloud/AllRequests.tsx
@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import CombinedAreaGraph from '@/components/analytics/CombinedAreaGraph';
+import LineChartCard from '@/components/analytics/LineChartCard';
 import { downloadPublicCloudAllRequests } from '@/services/backend/analytics/public-cloud';
 import type { AllRequests } from '@/types/analytics-public';
 import { formatDate } from '@/utils/js/date';
@@ -10,7 +10,7 @@ export default function AllRequests({ data }: { data: AllRequests[] }) {
   const startDate = pageSnapshot.dates?.[0] ?? data?.[0]?.date;
   const endDate = pageSnapshot.dates?.[1] ?? new Date();
   return (
-    <CombinedAreaGraph
+    <LineChartCard
       index="date"
       title="Requests over time"
       subtitle={`This chart displays the number of requests created over time for each request type from ${formatDate(
diff --git a/app/app/analytics/public-cloud/ContactChangeRequests.tsx b/app/app/analytics/public-cloud/ContactChangeRequests.tsx
@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import CombinedAreaGraph from '@/components/analytics/CombinedAreaGraph';
+import LineChartCard from '@/components/analytics/LineChartCard';
 import { downloadPublicCloudContactChangeRequests } from '@/services/backend/analytics/public-cloud';
 import { ContactsChange } from '@/types/analytics-public';
 import { formatDate } from '@/utils/js/date';
@@ -10,7 +10,7 @@ export default function ContactChangeRequests({ data }: { data: ContactsChange[]
   const startDate = pageSnapshot.dates?.[0] ?? data?.[0]?.date;
   const endDate = pageSnapshot.dates?.[1] ?? new Date();
   return (
-    <CombinedAreaGraph
+    <LineChartCard
       index="date"
       title="Contact change requests over time"
       subtitle={`This chart displays edit requests where contact changes were requested and the request decision from ${formatDate(
diff --git a/app/app/analytics/public-cloud/MinistryDistribution.tsx b/app/app/analytics/public-cloud/MinistryDistribution.tsx
@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import PieGraph from '@/components/analytics/PieGraph';
+import MultipleDoughnutChartCard from '@/components/analytics/MultipleDoughnutChartCard';
 import { providers } from '@/constants';
 import { mapProviderData, transformMinistryData } from '@/helpers/ministry-data';
 import { downloadPublicCloudMinistryDistribution } from '@/services/backend/analytics/public-cloud';
@@ -21,7 +21,7 @@ export default function MinistryDistribution({ data }: { data: MinistryDistribut
   };
 
   return (
-    <PieGraph
+    <MultipleDoughnutChartCard
       onExport={async () => downloadPublicCloudMinistryDistribution({ data: { ...pageSnapshot } })}
       title="Ministry per Provider"
       subtitle={`This chart displays the cluster distributions by ministries for products created from ${formatDate(
diff --git a/app/app/analytics/public-cloud/RequestsDecisionTime.tsx b/app/app/analytics/public-cloud/RequestsDecisionTime.tsx
@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import Histogram from '@/components/analytics/Histogram';
+import BarChartCard from '@/components/analytics/BarChartCard';
 import { downloadPublicCloudRequestsDecisionTime } from '@/services/backend/analytics/public-cloud';
 import { RequestDecisionTime } from '@/types/analytics-public';
 import { formatDate } from '@/utils/js/date';
@@ -10,15 +10,14 @@ export default function RequestsDecisionTime({ data }: { data: RequestDecisionTi
   const startDate = pageSnapshot.dates?.[0] ?? new Date('2024-01-01T00:00:00.000Z');
   const endDate = pageSnapshot.dates?.[1] ?? new Date();
   return (
-    <Histogram
+    <BarChartCard
       index="time"
       title="Request decision time frequency (%)"
       subtitle={`This chart displays the frequency of request decision times (%) for  products created from ${formatDate(
         startDate,
       )} to ${formatDate(endDate)}.`}
       chartData={data}
       categories={['Percentage']}
-      colors={['indigo']}
       onExport={async () => downloadPublicCloudRequestsDecisionTime({ data: { ...pageSnapshot } })}
     />
   );
diff --git a/app/components/analytics/BarChartCard.tsx b/app/components/analytics/BarChartCard.tsx
@@ -0,0 +1,34 @@
+import { Card, Subtitle, Title } from '@tremor/react';
+import ExportButton from '@/components/buttons/ExportButton';
+import BarChart, { BarChartDataItem } from '@/components/generic/charts/BarChart';
+
+export default function BarChartCard({
+  index,
+  onExport,
+  exportApiEndpoint,
+  chartData,
+  title,
+  subtitle,
+  categories,
+}: {
+  index: string;
+  onExport?: () => Promise<boolean>;
+  exportApiEndpoint?: string;
+  chartData: BarChartDataItem[];
+  title: string;
+  subtitle?: string;
+  categories: string[];
+}) {
+  return (
+    <div className="flex flex-col items-end">
+      <ExportButton className="mb-4" onExport={onExport} downloadUrl={exportApiEndpoint} />
+      <Card>
+        <Title>{title}</Title>
+        <Subtitle>{subtitle}</Subtitle>
+        <div className="relative">
+          <BarChart className="max-h-[28rem] mt-4" data={chartData} indexKey={index} />
+        </div>
+      </Card>
+    </div>
+  );
+}
diff --git a/app/components/analytics/LineChartCard.tsx b/app/components/analytics/LineChartCard.tsx
@@ -0,0 +1,45 @@
+import { LoadingOverlay } from '@mantine/core';
+import { Card, Title, Subtitle } from '@tremor/react';
+import ExportButton from '@/components/buttons/ExportButton';
+import LineChart, { LineChartDataItem } from '@/components/generic/charts/LineChart';
+
+export default function LineChartCard({
+  index,
+  title,
+  subtitle,
+  onExport,
+  chartData,
+  categories,
+  isLoading = false,
+  exportApiEndpoint /* temporary */,
+}: {
+  index: string;
+  title: string;
+  subtitle: string;
+  onExport?: () => Promise<boolean>;
+  chartData?: LineChartDataItem[];
+  categories: string[];
+  isLoading?: boolean;
+  exportApiEndpoint?: string /* temporary */;
+}) {
+  if (!chartData) return null;
+
+  return (
+    <div className="flex flex-col items-end">
+      <ExportButton onExport={onExport} downloadUrl={exportApiEndpoint} /* temporary */ className="m-2" />
+      <Card className="relative">
+        <Title>{title}</Title>
+        <Subtitle>{subtitle}</Subtitle>
+        <div className="relative">
+          <LoadingOverlay
+            visible={isLoading}
+            zIndex={50}
+            overlayProps={{ radius: 'sm', blur: 2 }}
+            loaderProps={{ color: 'pink', type: 'bars' }}
+          />
+          <LineChart className="max-h-[28rem] mt-4" data={chartData} indexKey={index} />
+        </div>
+      </Card>
+    </div>
+  );
+}
diff --git a/app/components/analytics/MultipleDoughnutChartCard.tsx b/app/components/analytics/MultipleDoughnutChartCard.tsx
diff --git a/app/components/generic/charts/BarChart.tsx b/app/components/generic/charts/BarChart.tsx
diff --git a/app/components/generic/charts/DoughnutChart.tsx b/app/components/generic/charts/DoughnutChart.tsx
diff --git a/app/components/generic/charts/LineChart.tsx b/app/components/generic/charts/LineChart.tsx
