From b581b2393d7fa8dabd9d0fb36098f2985a28f826 Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Fri, 18 Jul 2025 09:46:32 +0200 Subject: [PATCH] fix: improve impact metrics preview chart (#10368) --- .../ImpactMetricsChartPreview.tsx | 52 +++++++++++-------- .../ImpactMetricsControls.tsx | 1 - 2 files changed, 29 insertions(+), 24 deletions(-) diff --git a/frontend/src/component/impact-metrics/ImpactMetricsChartPreview.tsx b/frontend/src/component/impact-metrics/ImpactMetricsChartPreview.tsx index 1280ae06b8..32fd2d9755 100644 --- a/frontend/src/component/impact-metrics/ImpactMetricsChartPreview.tsx +++ b/frontend/src/component/impact-metrics/ImpactMetricsChartPreview.tsx @@ -1,6 +1,5 @@ import type { FC } from 'react'; -import { Typography } from '@mui/material'; -import { StyledChartContainer } from 'component/insights/InsightsCharts.styles'; +import { Box, Typography, useMediaQuery, useTheme } from '@mui/material'; import { ImpactMetricsChart } from './ImpactMetricsChart.tsx'; import type { AggregationMode } from './types.ts'; @@ -18,27 +17,34 @@ export const ImpactMetricsChartPreview: FC = ({ selectedLabels, beginAtZero, aggregationMode, -}) => ( - <> - - Preview - +}) => { + const theme = useTheme(); + const screenBreakpoint = useMediaQuery(theme.breakpoints.down('lg')); + const key = screenBreakpoint ? 'small' : 'large'; - {!selectedSeries ? ( - - Select a metric series to view the preview + return ( + <> + + Preview - ) : null} - - - - -); + {!selectedSeries ? ( + + Select a metric series to view the preview + + ) : null} + + ({ padding: theme.spacing(1) })}> + + + + ); +}; diff --git a/frontend/src/component/impact-metrics/ImpactMetricsControls/ImpactMetricsControls.tsx b/frontend/src/component/impact-metrics/ImpactMetricsControls/ImpactMetricsControls.tsx index 96f60ceaec..b2e3d1ce30 100644 --- a/frontend/src/component/impact-metrics/ImpactMetricsControls/ImpactMetricsControls.tsx +++ b/frontend/src/component/impact-metrics/ImpactMetricsControls/ImpactMetricsControls.tsx @@ -36,7 +36,6 @@ export const ImpactMetricsControls: FC = ({ display: 'flex', flexDirection: 'column', gap: theme.spacing(3), - maxWidth: 400, })} >