Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-20 00:08:02 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Tymoteusz Czech 2024-03-05 09:38:17 +01:00 committed by GitHub
parent 6678012b03
commit 6cede446e5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/component/executiveDashboard/componentsChart/MetricsSummaryChart/MetricsSummaryChart.tsx
View File

@ -1,9 +1,10 @@
import { type VFC } from 'react'; import { useMemo, type VFC } from 'react';
import 'chartjs-adapter-date-fns'; import 'chartjs-adapter-date-fns';
import { ExecutiveSummarySchema } from 'openapi'; import { ExecutiveSummarySchema } from 'openapi';
import { LineChart } from '../../components/LineChart/LineChart'; import { LineChart, NotEnoughData } from '../../components/LineChart/LineChart';
import { MetricsSummaryTooltip } from './MetricsChartTooltip/MetricsChartTooltip'; import { MetricsSummaryTooltip } from './MetricsChartTooltip/MetricsChartTooltip';
import { useMetricsSummary } from '../../hooks/useMetricsSummary'; import { useMetricsSummary } from '../../hooks/useMetricsSummary';
import { usePlaceholderData } from 'component/executiveDashboard/hooks/usePlaceholderData';
interface IMetricsSummaryChartProps { interface IMetricsSummaryChartProps {
metricsSummaryTrends: ExecutiveSummarySchema['metricsSummaryTrends']; metricsSummaryTrends: ExecutiveSummarySchema['metricsSummaryTrends'];
@ -13,15 +14,21 @@ export const MetricsSummaryChart: VFC<IMetricsSummaryChartProps> = ({
metricsSummaryTrends, metricsSummaryTrends,
}) => { }) => {
const data = useMetricsSummary(metricsSummaryTrends); const data = useMetricsSummary(metricsSummaryTrends);
const notEnoughData = useMemo(
() => (data.datasets.some((d) => d.data.length > 1) ? false : true),
[data],
);
const placeholderData = usePlaceholderData();
return ( return (
<LineChart <LineChart
data={data} data={notEnoughData ? placeholderData : data}
isLocalTooltip isLocalTooltip
TooltipComponent={MetricsSummaryTooltip} TooltipComponent={MetricsSummaryTooltip}
overrideOptions={{ overrideOptions={{
parsing: { yAxisKey: 'totalRequests', xAxisKey: 'week' }, parsing: { yAxisKey: 'totalRequests', xAxisKey: 'week' },
}} }}
cover={notEnoughData ? <NotEnoughData /> : false}
/> />
); );
}; };

12
frontend/src/component/executiveDashboard/hooks/usePlaceholderData.ts
View File

@ -2,13 +2,15 @@ import { useTheme } from '@mui/material';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { fillGradientPrimary } from '../components/LineChart/LineChart'; import { fillGradientPrimary } from '../components/LineChart/LineChart';
export const usePlaceholderData = ({ type PlaceholderDataOptions = {
fill = false,
type = 'constant',
}: {
fill?: boolean; fill?: boolean;
type?: 'rising' | 'constant' | 'double'; type?: 'rising' | 'constant' | 'double';
}) => { };
export const usePlaceholderData = (
placeholderDataOptions?: PlaceholderDataOptions,
) => {
const { fill = false, type = 'constant' } = placeholderDataOptions || {};
const theme = useTheme(); const theme = useTheme();
return useMemo( return useMemo(