feat(insights): placeholder for empty metrics (#6422)

Unleash · Mar 5, 2024 · 6cede44 · 6cede44
1 parent 6678012
commit 6cede44
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/.../component/executiveDashboard/componentsChart/MetricsSummaryChart/MetricsSummaryChart.tsx b/.../component/executiveDashboard/componentsChart/MetricsSummaryChart/MetricsSummaryChart.tsx
@@ -1,9 +1,10 @@
-import { type VFC } from 'react';
+import { useMemo, type VFC } from 'react';
 import 'chartjs-adapter-date-fns';
 import { ExecutiveSummarySchema } from 'openapi';
-import { LineChart } from '../../components/LineChart/LineChart';
+import { LineChart, NotEnoughData } from '../../components/LineChart/LineChart';
 import { MetricsSummaryTooltip } from './MetricsChartTooltip/MetricsChartTooltip';
 import { useMetricsSummary } from '../../hooks/useMetricsSummary';
+import { usePlaceholderData } from 'component/executiveDashboard/hooks/usePlaceholderData';
 
 interface IMetricsSummaryChartProps {
     metricsSummaryTrends: ExecutiveSummarySchema['metricsSummaryTrends'];
@@ -13,15 +14,21 @@ export const MetricsSummaryChart: VFC<IMetricsSummaryChartProps> = ({
     metricsSummaryTrends,
 }) => {
     const data = useMetricsSummary(metricsSummaryTrends);
+    const notEnoughData = useMemo(
+        () => (data.datasets.some((d) => d.data.length > 1) ? false : true),
+        [data],
+    );
+    const placeholderData = usePlaceholderData();
 
     return (
         <LineChart
-            data={data}
+            data={notEnoughData ? placeholderData : data}
             isLocalTooltip
             TooltipComponent={MetricsSummaryTooltip}
             overrideOptions={{
                 parsing: { yAxisKey: 'totalRequests', xAxisKey: 'week' },
             }}
+            cover={notEnoughData ? <NotEnoughData /> : false}
         />
     );
 };
diff --git a/frontend/src/component/executiveDashboard/hooks/usePlaceholderData.ts b/frontend/src/component/executiveDashboard/hooks/usePlaceholderData.ts
@@ -2,13 +2,15 @@ import { useTheme } from '@mui/material';
 import { useMemo } from 'react';
 import { fillGradientPrimary } from '../components/LineChart/LineChart';
 
-export const usePlaceholderData = ({
-    fill = false,
-    type = 'constant',
-}: {
+type PlaceholderDataOptions = {
     fill?: boolean;
     type?: 'rising' | 'constant' | 'double';
-}) => {
+};
+
+export const usePlaceholderData = (
+    placeholderDataOptions?: PlaceholderDataOptions,
+) => {
+    const { fill = false, type = 'constant' } = placeholderDataOptions || {};
     const theme = useTheme();
 
     return useMemo(