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

feat: new flags in production explanation

Browse Source
This commit is contained in:
kwasniew 2025-07-24 11:38:05 +02:00
parent 45e5b217aa
commit 43d07d4d12
No known key found for this signature in database
GPG Key ID: 43A7CBC24C119560
3 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/component/insights/InsightsCharts.styles.ts
View File

@ -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 }) => ({ export const StyledContainer = styled(Box)(({ theme }) => ({
display: 'flex', display: 'flex',
@ -44,3 +44,12 @@ export const StyledChartContainer = styled(Box)(({ theme }) => ({
margin: 'auto 0', margin: 'auto 0',
padding: theme.spacing(3), 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,
}));

7
frontend/src/component/insights/componentsChart/NewProductionFlagsChart/NewProductionFlagsChart.tsx
View File

@ -68,7 +68,7 @@ export const NewProductionFlagsChart: FC<IProjectHealthChartProps> = ({
return { return {
datasets: [ datasets: [
{ {
label: 'New production flags', label: 'Number of new flags',
data: weeks, data: weeks,
borderColor: theme.palette.primary.light, borderColor: theme.palette.primary.light,
backgroundColor: fillGradientPrimary, backgroundColor: fillGradientPrimary,
@ -103,11 +103,6 @@ export const NewProductionFlagsChart: FC<IProjectHealthChartProps> = ({
yAxisKey: 'newProductionFlags', yAxisKey: 'newProductionFlags',
xAxisKey: 'date', xAxisKey: 'date',
}, },
plugins: {
legend: {
display: !isAggregate,
},
},
} }
} }
cover={notEnoughData ? <NotEnoughData /> : isLoading} cover={notEnoughData ? <NotEnoughData /> : isLoading}

6
frontend/src/component/insights/sections/PerformanceInsights.tsx
View File

@ -22,9 +22,11 @@ import {
StyledWidget, StyledWidget,
StyledWidgetContent, StyledWidgetContent,
StyledWidgetStats, StyledWidgetStats,
StatsExplanation,
} from '../InsightsCharts.styles'; } from '../InsightsCharts.styles';
import { useUiFlag } from 'hooks/useUiFlag'; import { useUiFlag } from 'hooks/useUiFlag';
import { NewProductionFlagsChart } from '../componentsChart/NewProductionFlagsChart/NewProductionFlagsChart.tsx'; import { NewProductionFlagsChart } from '../componentsChart/NewProductionFlagsChart/NewProductionFlagsChart.tsx';
import Lightbulb from '@mui/icons-material/LightbulbOutlined';
export const PerformanceInsights: FC = () => { export const PerformanceInsights: FC = () => {
const statePrefix = 'performance-'; const statePrefix = 'performance-';
@ -93,6 +95,10 @@ export const PerformanceInsights: FC = () => {
<StyledWidget> <StyledWidget>
<StyledWidgetStats width={275}> <StyledWidgetStats width={275}>
<WidgetTitle title='New flags in production' /> <WidgetTitle title='New flags in production' />
<StatsExplanation>
<Lightbulb color='primary' />
How often do flags go live in production?
</StatsExplanation>
</StyledWidgetStats> </StyledWidgetStats>
<StyledChartContainer> <StyledChartContainer>
<NewProductionFlagsChart <NewProductionFlagsChart