Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-31 13:47:02 +02:00
Code Issues Projects Releases Wiki Activity

fix: improve impact metrics preview chart (#10368)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/component/impact-metrics/ImpactMetricsChartPreview.tsx
View File

@ -1,6 +1,5 @@
import type { FC } from 'react'; import type { FC } from 'react';
import { Typography } from '@mui/material'; import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
import { StyledChartContainer } from 'component/insights/InsightsCharts.styles';
import { ImpactMetricsChart } from './ImpactMetricsChart.tsx'; import { ImpactMetricsChart } from './ImpactMetricsChart.tsx';
import type { AggregationMode } from './types.ts'; import type { AggregationMode } from './types.ts';
@ -18,27 +17,34 @@ export const ImpactMetricsChartPreview: FC<ImpactMetricsChartPreviewProps> = ({
selectedLabels, selectedLabels,
beginAtZero, beginAtZero,
aggregationMode, aggregationMode,
}) => ( }) => {
<> const theme = useTheme();
<Typography variant='h6' color='text.secondary'> const screenBreakpoint = useMediaQuery(theme.breakpoints.down('lg'));
Preview const key = screenBreakpoint ? 'small' : 'large';
</Typography>
{!selectedSeries ? ( return (
<Typography variant='body2' color='text.secondary'> <>
Select a metric series to view the preview <Typography variant='h6' color='text.secondary'>
Preview
</Typography> </Typography>
) : null}
<StyledChartContainer> {!selectedSeries ? (
<ImpactMetricsChart <Typography variant='body2' color='text.secondary'>
selectedSeries={selectedSeries} Select a metric series to view the preview
selectedRange={selectedRange} </Typography>
selectedLabels={selectedLabels} ) : null}
beginAtZero={beginAtZero}
aggregationMode={aggregationMode} <Box sx={(theme) => ({ padding: theme.spacing(1) })}>
isPreview <ImpactMetricsChart
/> key={key}
</StyledChartContainer> selectedSeries={selectedSeries}
</> selectedRange={selectedRange}
); selectedLabels={selectedLabels}
beginAtZero={beginAtZero}
aggregationMode={aggregationMode}
isPreview
/>
</Box>
</>
);
};

1
frontend/src/component/impact-metrics/ImpactMetricsControls/ImpactMetricsControls.tsx
View File

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