From bf5f38ba1eefdc2941636885b7118573e2bd2247 Mon Sep 17 00:00:00 2001
From: andreas-unleash <andreas@getunleash.ai>
Date: Mon, 11 Mar 2024 10:31:24 +0200
Subject: [PATCH] fix: chart xAxis and null values (#6472)

Changes the xAxis from 'week' to 'date' (timeline fix)

Replace null values with 0

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
---
 .../MetricsChartTooltip.tsx                   | 20 +++++++++++++------
 .../MetricsSummaryChart.tsx                   |  2 +-
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend/src/component/executiveDashboard/componentsChart/MetricsSummaryChart/MetricsChartTooltip/MetricsChartTooltip.tsx b/frontend/src/component/executiveDashboard/componentsChart/MetricsSummaryChart/MetricsChartTooltip/MetricsChartTooltip.tsx
index eeaf108500..974f3b2dc6 100644
--- a/frontend/src/component/executiveDashboard/componentsChart/MetricsSummaryChart/MetricsChartTooltip/MetricsChartTooltip.tsx
+++ b/frontend/src/component/executiveDashboard/componentsChart/MetricsSummaryChart/MetricsChartTooltip/MetricsChartTooltip.tsx
@@ -109,17 +109,19 @@ export const MetricsSummaryTooltip: VFC<{ tooltip: TooltipState | null }> = ({
                     />
                     <InfoLine
                         iconChar={'▣ '}
-                        title={`Total requests: ${point.value.totalRequests}`}
+                        title={`Total requests: ${
+                            point.value.totalRequests ?? 0
+                        }`}
                         color={'info'}
                     />
                     <InfoLine
                         iconChar={'▲ '}
-                        title={`Exposed: ${point.value.totalYes}`}
+                        title={`Exposed: ${point.value.totalYes ?? 0}`}
                         color={'success'}
                     />
                     <InfoLine
                         iconChar={'▼ '}
-                        title={`Not exposed: ${point.value.totalNo}`}
+                        title={`Not exposed: ${point.value.totalNo ?? 0}`}
                         color={'error'}
                     />
                     <Divider
@@ -127,12 +129,18 @@ export const MetricsSummaryTooltip: VFC<{ tooltip: TooltipState | null }> = ({
                     />
                     <InfoSummary
                         data={[
-                            { key: 'Flags', value: point.value.totalFlags },
+                            {
+                                key: 'Flags',
+                                value: point.value.totalFlags ?? 0,
+                            },
                             {
                                 key: 'Environments',
-                                value: point.value.totalEnvironments,
+                                value: point.value.totalEnvironments ?? 0,
+                            },
+                            {
+                                key: 'Apps',
+                                value: point.value.totalApps ?? 0,
                             },
-                            { key: 'Apps', value: point.value.totalApps },
                         ]}
                     />
                 </StyledTooltipItemContainer>
diff --git a/frontend/src/component/executiveDashboard/componentsChart/MetricsSummaryChart/MetricsSummaryChart.tsx b/frontend/src/component/executiveDashboard/componentsChart/MetricsSummaryChart/MetricsSummaryChart.tsx
index d98c76ed17..5eec326864 100644
--- a/frontend/src/component/executiveDashboard/componentsChart/MetricsSummaryChart/MetricsSummaryChart.tsx
+++ b/frontend/src/component/executiveDashboard/componentsChart/MetricsSummaryChart/MetricsSummaryChart.tsx
@@ -26,7 +26,7 @@ export const MetricsSummaryChart: VFC<IMetricsSummaryChartProps> = ({
             isLocalTooltip
             TooltipComponent={MetricsSummaryTooltip}
             overrideOptions={{
-                parsing: { yAxisKey: 'totalRequests', xAxisKey: 'week' },
+                parsing: { yAxisKey: 'totalRequests', xAxisKey: 'date' },
             }}
             cover={notEnoughData ? <NotEnoughData /> : false}
         />