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 (#10407)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2025-07-24 11:53:25 +02:00 committed by GitHub
parent 45e5b217aa
commit 049e1ba271
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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 }) => ({
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,
}));

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

@ -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}

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

@ -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