From 43d07d4d12452fba36820ba6e4a53cbbf3cc1036 Mon Sep 17 00:00:00 2001 From: kwasniew Date: Thu, 24 Jul 2025 11:38:05 +0200 Subject: [PATCH] feat: new flags in production explanation --- .../src/component/insights/InsightsCharts.styles.ts | 11 ++++++++++- .../NewProductionFlagsChart.tsx | 7 +------ .../insights/sections/PerformanceInsights.tsx | 6 ++++++ 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/frontend/src/component/insights/InsightsCharts.styles.ts b/frontend/src/component/insights/InsightsCharts.styles.ts index a87db9ddf4..4d9dfa9698 100644 --- a/frontend/src/component/insights/InsightsCharts.styles.ts +++ b/frontend/src/component/insights/InsightsCharts.styles.ts @@ -1,4 +1,4 @@ -import { Box, Paper, styled } from '@mui/material'; +import { Box, Paper, styled, Typography } from '@mui/material'; export const StyledContainer = styled(Box)(({ theme }) => ({ display: 'flex', @@ -44,3 +44,12 @@ export const StyledChartContainer = styled(Box)(({ theme }) => ({ margin: 'auto 0', padding: theme.spacing(3), })); + +export const StatsExplanation = styled(Typography)(({ theme }) => ({ + display: 'flex', + justifyContent: 'center', + gap: theme.spacing(0.5), + color: theme.palette.text.secondary, + fontSize: theme.typography.body2.fontSize, + fontWeight: theme.typography.body2.fontWeight, +})); diff --git a/frontend/src/component/insights/componentsChart/NewProductionFlagsChart/NewProductionFlagsChart.tsx b/frontend/src/component/insights/componentsChart/NewProductionFlagsChart/NewProductionFlagsChart.tsx index bcb9f62c39..2a3d98879b 100644 --- a/frontend/src/component/insights/componentsChart/NewProductionFlagsChart/NewProductionFlagsChart.tsx +++ b/frontend/src/component/insights/componentsChart/NewProductionFlagsChart/NewProductionFlagsChart.tsx @@ -68,7 +68,7 @@ export const NewProductionFlagsChart: FC = ({ return { datasets: [ { - label: 'New production flags', + label: 'Number of new flags', data: weeks, borderColor: theme.palette.primary.light, backgroundColor: fillGradientPrimary, @@ -103,11 +103,6 @@ export const NewProductionFlagsChart: FC = ({ yAxisKey: 'newProductionFlags', xAxisKey: 'date', }, - plugins: { - legend: { - display: !isAggregate, - }, - }, } } cover={notEnoughData ? : isLoading} diff --git a/frontend/src/component/insights/sections/PerformanceInsights.tsx b/frontend/src/component/insights/sections/PerformanceInsights.tsx index 4b4beddca0..40f18b6110 100644 --- a/frontend/src/component/insights/sections/PerformanceInsights.tsx +++ b/frontend/src/component/insights/sections/PerformanceInsights.tsx @@ -22,9 +22,11 @@ import { StyledWidget, StyledWidgetContent, StyledWidgetStats, + StatsExplanation, } from '../InsightsCharts.styles'; import { useUiFlag } from 'hooks/useUiFlag'; import { NewProductionFlagsChart } from '../componentsChart/NewProductionFlagsChart/NewProductionFlagsChart.tsx'; +import Lightbulb from '@mui/icons-material/LightbulbOutlined'; export const PerformanceInsights: FC = () => { const statePrefix = 'performance-'; @@ -93,6 +95,10 @@ export const PerformanceInsights: FC = () => { + + + How often do flags go live in production? +