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 = ({ metricsSummaryTrends, }) => { const data = useMetricsSummary(metricsSummaryTrends); + const notEnoughData = useMemo( + () => (data.datasets.some((d) => d.data.length > 1) ? false : true), + [data], + ); + const placeholderData = usePlaceholderData(); return ( : 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(