1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00

fix: improve impact metrics preview chart (#10368)

This commit is contained in:
Tymoteusz Czech 2025-07-18 09:46:32 +02:00 committed by GitHub
parent 89f5f79836
commit b581b2393d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 29 additions and 24 deletions

View File

@ -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<ImpactMetricsChartPreviewProps> = ({
selectedLabels,
beginAtZero,
aggregationMode,
}) => (
<>
<Typography variant='h6' color='text.secondary'>
Preview
</Typography>
}) => {
const theme = useTheme();
const screenBreakpoint = useMediaQuery(theme.breakpoints.down('lg'));
const key = screenBreakpoint ? 'small' : 'large';
{!selectedSeries ? (
<Typography variant='body2' color='text.secondary'>
Select a metric series to view the preview
return (
<>
<Typography variant='h6' color='text.secondary'>
Preview
</Typography>
) : null}
<StyledChartContainer>
<ImpactMetricsChart
selectedSeries={selectedSeries}
selectedRange={selectedRange}
selectedLabels={selectedLabels}
beginAtZero={beginAtZero}
aggregationMode={aggregationMode}
isPreview
/>
</StyledChartContainer>
</>
);
{!selectedSeries ? (
<Typography variant='body2' color='text.secondary'>
Select a metric series to view the preview
</Typography>
) : null}
<Box sx={(theme) => ({ padding: theme.spacing(1) })}>
<ImpactMetricsChart
key={key}
selectedSeries={selectedSeries}
selectedRange={selectedRange}
selectedLabels={selectedLabels}
beginAtZero={beginAtZero}
aggregationMode={aggregationMode}
isPreview
/>
</Box>
</>
);
};

View File

@ -36,7 +36,6 @@ export const ImpactMetricsControls: FC<ImpactMetricsControlsProps> = ({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(3),
maxWidth: 400,
})}
>
<Typography variant='body2' color='text.secondary'>