Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-19 17:52:45 +02:00
Code Issues Projects Releases Wiki Activity

Delete legacy insights charts components and remove unused colors (#10522)

Browse Source 
Deletes the legacy insights charts component (which should have been
removed with the flag earlier this week), and also removes the colors
associated with charts that we no longer have.
This commit is contained in:
Thomas Heartman 2025-08-22 12:46:56 +02:00 committed by GitHub
parent b321bfba99
commit 9d18b0022b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 0 additions and 662 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

307
frontend/src/component/insights/InsightsCharts.tsx
View File

@ -1,307 +0,0 @@
import type { FC } from 'react';
import { Box, Paper, styled } from '@mui/material';
import { UserStats } from './componentsStat/UserStats/UserStats.tsx';
import { UsersChart } from './componentsChart/UsersChart/UsersChart.tsx';
import { UsersPerProjectChart } from './componentsChart/UsersPerProjectChart/UsersPerProjectChart.tsx';
import { FlagStats } from './componentsStat/FlagStats/FlagStats.tsx';
import { FlagsChart } from './componentsChart/FlagsChart/FlagsChart.tsx';
import { FlagsProjectChart } from './componentsChart/FlagsProjectChart/FlagsProjectChart.tsx';
import { HealthStats } from './componentsStat/HealthStats/HealthStats.tsx';
import { ProjectHealthChart } from './componentsChart/ProjectHealthChart/ProjectHealthChart.tsx';
import { TimeToProduction } from './componentsStat/TimeToProduction/TimeToProduction.tsx';
import { TimeToProductionChart } from './componentsChart/TimeToProductionChart/TimeToProductionChart.tsx';
import { MetricsSummaryChart } from './componentsChart/MetricsSummaryChart/MetricsSummaryChart.tsx';
import { UpdatesPerEnvironmentTypeChart } from './componentsChart/UpdatesPerEnvironmentTypeChart/UpdatesPerEnvironmentTypeChart.tsx';
import type { InstanceInsightsSchema } from 'openapi';
import type { GroupedDataByProject } from './hooks/useGroupedProjectTrends.ts';
import { allOption } from 'component/common/ProjectSelect/ProjectSelect';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { WidgetTitle } from './components/WidgetTitle/WidgetTitle.tsx';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
export interface IChartsProps {
flagTrends: InstanceInsightsSchema['flagTrends'];
projectsData: InstanceInsightsSchema['projectFlagTrends'];
groupedProjectsData: GroupedDataByProject<
InstanceInsightsSchema['projectFlagTrends']
>;
metricsData: InstanceInsightsSchema['metricsSummaryTrends'];
groupedMetricsData: GroupedDataByProject<
InstanceInsightsSchema['metricsSummaryTrends']
>;
userTrends: InstanceInsightsSchema['userTrends'];
environmentTypeTrends: InstanceInsightsSchema['environmentTypeTrends'];
lifecycleTrends: InstanceInsightsSchema['lifecycleTrends'];
summary: {
total: number;
active: number;
stale: number;
potentiallyStale: number;
averageUsers: number;
averageHealth?: string;
technicalDebt?: string;
flagsPerUser?: string;
medianTimeToProduction?: number;
};
loading: boolean;
projects: string[];
allMetricsDatapoints: string[];
}
const StyledContainer = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
}));
const StyledWidget = styled(Paper)(({ theme }) => ({
borderRadius: `${theme.shape.borderRadiusLarge}px`,
boxShadow: 'none',
display: 'flex',
flexWrap: 'wrap',
[theme.breakpoints.up('md')]: {
flexDirection: 'row',
flexWrap: 'nowrap',
},
}));
const StyledWidgetContent = styled(Box)(({ theme }) => ({
padding: theme.spacing(3),
width: '100%',
}));
const StyledWidgetStats = styled(Box)<{ width?: number; padding?: number }>(
({ theme, width = 300, padding = 3 }) => ({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
padding: theme.spacing(padding),
minWidth: '100%',
[theme.breakpoints.up('md')]: {
minWidth: `${width}px`,
borderRight: `1px solid ${theme.palette.background.application}`,
},
}),
);
const StyledChartContainer = styled(Box)(({ theme }) => ({
position: 'relative',
minWidth: 0, // bugfix, see: https://github.com/chartjs/Chart.js/issues/4156#issuecomment-295180128
flexGrow: 1,
margin: 'auto 0',
padding: theme.spacing(3),
}));
export const InsightsCharts: FC<IChartsProps> = ({
projects,
summary,
userTrends,
groupedProjectsData,
flagTrends,
groupedMetricsData,
environmentTypeTrends,
allMetricsDatapoints,
loading,
}) => {
const showAllProjects = projects[0] === allOption.id;
const isOneProjectSelected = projects.length === 1;
const { isEnterprise } = useUiConfig();
const lastUserTrend = userTrends[userTrends.length - 1];
const lastFlagTrend = flagTrends[flagTrends.length - 1];
const usersTotal = lastUserTrend?.total ?? 0;
const usersActive = lastUserTrend?.active ?? 0;
const usersInactive = lastUserTrend?.inactive ?? 0;
const flagsTotal = lastFlagTrend?.total ?? 0;
function getFlagsPerUser(flagsTotal: number, usersTotal: number) {
const flagsPerUserCalculation = flagsTotal / usersTotal;
return Number.isNaN(flagsPerUserCalculation)
? 'N/A'
: flagsPerUserCalculation.toFixed(2);
}
return (
<StyledContainer>
<ConditionallyRender
condition={showAllProjects}
show={
<StyledWidget>
<StyledWidgetStats>
<WidgetTitle title='Total users' />
<UserStats
count={usersTotal}
active={usersActive}
inactive={usersInactive}
isLoading={loading}
/>
</StyledWidgetStats>
<StyledChartContainer>
<UsersChart
userTrends={userTrends}
isLoading={loading}
/>
</StyledChartContainer>
</StyledWidget>
}
elseShow={
<StyledWidget>
<StyledWidgetStats>
<WidgetTitle
title={
isOneProjectSelected
? 'Users in project'
: 'Users per project on average'
}
tooltip={
isOneProjectSelected
? 'Number of users in selected projects.'
: 'Average number of users for selected projects.'
}
/>
<UserStats
count={summary.averageUsers}
isLoading={loading}
/>
</StyledWidgetStats>
<StyledChartContainer>
<UsersPerProjectChart
projectFlagTrends={groupedProjectsData}
isLoading={loading}
/>
</StyledChartContainer>
</StyledWidget>
}
/>
<ConditionallyRender
condition={isEnterprise()}
show={
<>
<StyledWidget>
<StyledWidgetStats width={350} padding={0}>
<HealthStats
value={summary.averageHealth}
technicalDebt={summary.technicalDebt}
healthy={summary.active}
stale={summary.stale}
potentiallyStale={summary.potentiallyStale}
title={
<WidgetTitle
title={'Technical debt'}
tooltip={
'Percentage of stale and potentially stale flags.'
}
/>
}
/>
</StyledWidgetStats>
<StyledChartContainer>
<ProjectHealthChart
projectFlagTrends={groupedProjectsData}
isAggregate={showAllProjects}
isLoading={loading}
/>
</StyledChartContainer>
</StyledWidget>
<StyledWidget>
<StyledWidgetStats>
<WidgetTitle
title='Median time to production'
tooltip={`How long does it currently take on average from when a feature flag was created until it was enabled in a "production" type environment. This is calculated only from feature flags of the type "release" and is the median across the selected projects.`}
/>
<TimeToProduction
daysToProduction={
summary.medianTimeToProduction
}
/>
</StyledWidgetStats>
<StyledChartContainer>
<TimeToProductionChart
projectFlagTrends={groupedProjectsData}
isAggregate={showAllProjects}
isLoading={loading}
/>
</StyledChartContainer>
</StyledWidget>
</>
}
/>
<ConditionallyRender
condition={showAllProjects}
show={
<StyledWidget>
<StyledWidgetStats width={275}>
<WidgetTitle title='Flags' />
<FlagStats count={flagsTotal} isLoading={loading} />
</StyledWidgetStats>
<StyledChartContainer>
<FlagsChart
flagTrends={flagTrends}
isLoading={loading}
/>
</StyledChartContainer>
</StyledWidget>
}
elseShow={
<StyledWidget>
<StyledWidgetStats width={275}>
<WidgetTitle title='Flags' />
<FlagStats
count={summary.total}
isLoading={loading}
/>
</StyledWidgetStats>
<StyledChartContainer>
<FlagsProjectChart
projectFlagTrends={groupedProjectsData}
isLoading={loading}
/>
</StyledChartContainer>
</StyledWidget>
}
/>
<ConditionallyRender
condition={isEnterprise()}
show={
<>
<StyledWidget>
<StyledWidgetContent>
<WidgetTitle
title='Flag evaluation metrics'
tooltip='Summary of all flag evaluations reported by SDKs.'
/>
<StyledChartContainer>
<MetricsSummaryChart
metricsSummaryTrends={
groupedMetricsData
}
allDatapointsSorted={
allMetricsDatapoints
}
isAggregate={showAllProjects}
isLoading={loading}
/>
</StyledChartContainer>
</StyledWidgetContent>
</StyledWidget>
<StyledWidget>
<StyledWidgetContent>
<WidgetTitle
title='Updates per environment type'
tooltip='Summary of all configuration updates per environment type.'
/>
<UpdatesPerEnvironmentTypeChart
environmentTypeTrends={
environmentTypeTrends
}
isLoading={loading}
/>
</StyledWidgetContent>
</StyledWidget>
</>
}
/>
</StyledContainer>
);
};

192
frontend/src/component/insights/components/Gauge/Gauge.tsx
View File

@ -1,192 +0,0 @@
import { Fragment, type VFC } from 'react';
import { Box, useTheme } from '@mui/material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
const polarToCartesian = (
centerX: number,
centerY: number,
radius: number,
angleInRadians: number,
) => {
return {
x: centerX + radius * Math.cos(angleInRadians),
y: centerY + radius * Math.sin(angleInRadians),
};
};
const degreesToRadians = (degrees: number) => degrees * (Math.PI / 180);
const normalizeValue = (value: number, min: number, max: number) =>
(value - min) / (max - min);
const describeArc = (radius: number, startAngle: number, endAngle: number) => {
const start = polarToCartesian(0, 0, radius, endAngle);
const end = polarToCartesian(0, 0, radius, startAngle);
const largeArcFlag = endAngle - startAngle <= Math.PI ? '0' : '1';
const dSvgAttribute = [
'M',
start.x,
start.y,
'A',
radius,
radius,
0,
largeArcFlag,
0,
end.x,
end.y,
].join(' ');
return dSvgAttribute;
};
const GaugeLines = () => {
const theme = useTheme();
const startRadius = 0.875;
const endRadius = 1.14;
const lineWidth = 0.1;
const lineBorder = 0.05;
const angles = [180 + 50, 180 + 90 + 40];
return (
<>
{angles.map(degreesToRadians).map((angle) => {
const start = polarToCartesian(0, 0, startRadius, angle);
const end = polarToCartesian(0, 0, endRadius, angle);
return (
<Fragment key={angle}>
<path
d={`M ${start.x} ${start.y} L ${end.x} ${end.y}`}
fill='none'
stroke={theme.palette.background.paper}
strokeWidth={lineWidth}
strokeLinecap='round'
/>
<path
d={`M ${start.x} ${start.y} L ${end.x} ${end.y}`}
fill='none'
stroke={theme.palette.charts.gauge.sectionLine}
strokeWidth={lineWidth - lineBorder}
strokeLinecap='round'
/>
</Fragment>
);
})}
</>
);
};
const GaugeText = () => {
const fontSize = 0.175;
return (
<>
<text
x={0}
y={0}
transform='translate(-1.15 -0.5) rotate(-65)'
textAnchor='middle'
fontSize={fontSize}
fill='currentColor'
>
Slow
</text>
<text
textAnchor='middle'
transform='translate(0 -1.25)'
fontSize={fontSize}
fill='currentColor'
>
Medium
</text>
<text
transform='translate(1.15 -0.5) rotate(65)'
textAnchor='middle'
fontSize={fontSize}
fill='currentColor'
>
Fast
</text>
</>
);
};
type GaugeProps = {
value?: number;
min?: number;
max?: number;
};
export const Gauge: VFC<GaugeProps> = ({ value, min = 0, max = 100 }) => {
const theme = useTheme();
const radius = 1;
const lineWidth = 0.25;
const startAngle = -Math.PI;
const endAngle = 0;
// Calculate the filled arc proportion based on the value
const valueAngle =
startAngle +
(endAngle - startAngle) * normalizeValue(value || 0, min, max);
const backgroundArcPath = describeArc(radius, startAngle, endAngle);
const filledArcPath = describeArc(radius, startAngle, valueAngle);
return (
<Box
style={{ textAlign: 'center', fontFamily: 'system-ui, sans-serif' }}
sx={{ color: theme.palette.charts.gauge.text }}
>
<svg
width='250'
height='150'
viewBox={[-1.5, -1.5, 3, 1.5].join(' ')}
style={{ overflow: 'visible' }}
>
<title>Gauge chart for time to production</title>
<defs>
<linearGradient
id='Gauge__gradient'
gradientUnits='userSpaceOnUse'
x1='-1'
x2='1'
y1='0'
y2='0'
gradientTransform='rotate(-45)'
>
<stop
offset='0%'
stopColor={theme.palette.charts.gauge.gradientStart}
/>
<stop
offset='100%'
stopColor={theme.palette.charts.gauge.gradientEnd}
/>
</linearGradient>
</defs>
<path
d={backgroundArcPath}
fill='none'
stroke={theme.palette.charts.gauge.background}
strokeWidth={lineWidth - 0.01}
strokeLinecap='round'
/>
<ConditionallyRender
condition={value !== undefined}
show={
<path
d={filledArcPath}
fill='none'
stroke='url(#Gauge__gradient)'
strokeWidth={lineWidth}
strokeLinecap='round'
/>
}
/>
<GaugeLines />
<GaugeText />
</svg>
</Box>
);
};

106
frontend/src/component/insights/componentsStat/TimeToProduction/TimeToProduction.tsx
View File

@ -1,106 +0,0 @@
import type { VFC } from 'react';
import { Typography, styled } from '@mui/material';
import { Gauge } from 'component/insights/components/Gauge/Gauge';
const StyledContainer = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: theme.spacing(1),
textAlign: 'center',
}));
const StyledText = styled('div')(({ theme }) => ({
marginTop: theme.spacing(-7),
display: 'flex',
flexDirection: 'column',
}));
type TimeToProductionProps = {
daysToProduction: number | undefined;
};
const interpolate = (
value: number,
[fromStart, fromEnd]: [number, number],
[toStart, toEnd]: [number, number],
): number => {
if (value < fromStart) {
return toStart;
}
if (value > fromEnd) {
return toEnd;
}
return (
((value - fromStart) / (fromEnd - fromStart)) * (toEnd - toStart) +
toStart
);
};
const resolveValue = (
daysToProduction: number | undefined,
): {
value: string | undefined;
gauge: number | undefined;
score: 'Fast' | 'Medium' | 'Slow' | undefined;
} => {
if (daysToProduction === undefined || daysToProduction === 0) {
return {
value: undefined,
gauge: undefined,
score: undefined,
};
}
if (daysToProduction <= 7) {
return {
value: `${daysToProduction.toFixed(1)} days`,
gauge: interpolate(daysToProduction, [1, 7], [100, 75]),
score: 'Fast',
};
}
if (daysToProduction <= 31) {
return {
value: `${(daysToProduction / 7).toFixed(1)} weeks`,
gauge: interpolate(daysToProduction, [7, 31], [67.5, 30]),
score: 'Medium',
};
}
return {
value: `${(daysToProduction / 30).toFixed(1)} months`,
gauge: interpolate(daysToProduction, [31, 365 / 4], [23, 0]),
score: 'Slow',
};
};
export const TimeToProduction: VFC<TimeToProductionProps> = ({
daysToProduction,
}) => {
const { value, gauge, score } = resolveValue(daysToProduction);
return (
<StyledContainer>
<Gauge value={gauge} />
<StyledText>
<Typography variant='h2' component='div'>
{daysToProduction !== undefined ? value : 'N/A'}
</Typography>
<Typography
variant='body2'
sx={(theme) => ({
color: score
? theme.palette.primary.main
: theme.palette.text.secondary,
})}
>
{score || 'No data'}
</Typography>
</StyledText>
</StyledContainer>
);
};

19
frontend/src/themes/dark-theme.ts
View File

@ -220,25 +220,6 @@ const theme = {
* Dashboard and charts
*/
charts: {
gauge: {
gradientStart: '#4C4992',
gradientEnd: '#9792ED',
background: '#39384C',
sectionLine: '#8c89bf',
text: colors.grey[800],
},
health: {
mainCircleBackground: '#34325E',
orbit: '#4C4992',
circles: '#2B2A3C',
text: colors.grey[500],
title: colors.grey[50],
healthy: colors.purple[800],
stale: colors.red[800],
potentiallyStale: colors.orange[800],
gradientStale: '#8A3E45',
gradientPotentiallyStale: '#875D21',
},
series: colors.chartSeries,
},
},

19
frontend/src/themes/theme.ts
View File

@ -276,25 +276,6 @@ const theme = {
* Dashboard and charts
*/
charts: {
gauge: {
gradientStart: colors.purple[100],
gradientEnd: colors.purple[700],
background: colors.purple[50],
sectionLine: colors.purple[500],
text: colors.grey[600],
},
health: {
mainCircleBackground: colors.purple[800],
orbit: colors.grey[300],
circles: colors.grey[50],
text: colors.grey[900],
title: colors.grey[50],
healthy: colors.purple[800],
stale: colors.red[800],
potentiallyStale: colors.orange[900],
gradientStale: colors.red[300],
gradientPotentiallyStale: colors.orange[500],
},
series: colors.chartSeries,
},
},

19
frontend/src/themes/themeTypes.ts
View File

@ -138,25 +138,6 @@ declare module '@mui/material/styles' {
* Dashboard and charts
*/
charts: {
gauge: {
gradientStart: string;
gradientEnd: string;
background: string;
sectionLine: string;
text: string;
};
health: {
mainCircleBackground: string;
orbit: string;
circles: string;
text: string;
title: string;
healthy: string;
stale: string;
potentiallyStale: string;
gradientStale: string;
gradientPotentiallyStale: string;
};
series: string[];
};
}