mirror of
https://github.com/Unleash/unleash.git
synced 2025-08-04 13:48:56 +02:00
feat: new flags in production explanation (#10407)
This commit is contained in:
parent
45e5b217aa
commit
049e1ba271
@ -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,
|
||||
}));
|
||||
|
@ -68,7 +68,7 @@ export const NewProductionFlagsChart: FC<IProjectHealthChartProps> = ({
|
||||
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<IProjectHealthChartProps> = ({
|
||||
yAxisKey: 'newProductionFlags',
|
||||
xAxisKey: 'date',
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: !isAggregate,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
cover={notEnoughData ? <NotEnoughData /> : isLoading}
|
||||
|
@ -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 = () => {
|
||||
<StyledWidget>
|
||||
<StyledWidgetStats width={275}>
|
||||
<WidgetTitle title='New flags in production' />
|
||||
<StatsExplanation>
|
||||
<Lightbulb color='primary' />
|
||||
How often do flags go live in production?
|
||||
</StatsExplanation>
|
||||
</StyledWidgetStats>
|
||||
<StyledChartContainer>
|
||||
<NewProductionFlagsChart
|
||||
|
Loading…
Reference in New Issue
Block a user