From 6cede446e5cd4d5dc8f034d6b9acc0daff59dbb9 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Tue, 5 Mar 2024 09:38:17 +0100
Subject: [PATCH] feat(insights): placeholder for empty metrics (#6422)

---
 .../MetricsSummaryChart/MetricsSummaryChart.tsx     | 13 ++++++++++---
 .../executiveDashboard/hooks/usePlaceholderData.ts  | 12 +++++++-----
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/frontend/src/component/executiveDashboard/componentsChart/MetricsSummaryChart/MetricsSummaryChart.tsx b/frontend/src/component/executiveDashboard/componentsChart/MetricsSummaryChart/MetricsSummaryChart.tsx
index 60a57cb0b5..d98c76ed17 100644
--- a/frontend/src/component/executiveDashboard/componentsChart/MetricsSummaryChart/MetricsSummaryChart.tsx
+++ b/frontend/src/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
index 6ba372feb0..d129cf5444 100644
--- 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(