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:
parent
89f5f79836
commit
b581b2393d
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
@ -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'>
|
||||
|
Loading…
Reference in New Issue
Block a user