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

chore: update ux styling for lifecycle charts (#10481)

Browse Source 
Some small ux tweaks to lifecycle charts.


1. Removed vertical lines
2. Styled the legend to have round dots, not square.
<img width="1891" height="656" alt="image"
src="https://github.com/user-attachments/assets/b2c09085-7a2e-4e14-92e0-b3e83edf201d"
/>
This commit is contained in:
Jaanus Sellin 2025-08-08 10:25:58 +03:00 committed by GitHub
parent 937cba4c1a
commit e43cdcf034
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx
View File

@ -193,6 +193,10 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
legend: { legend: {
position: 'bottom' as const, position: 'bottom' as const,
labels: { labels: {
color: theme.palette.text.secondary,
usePointStyle: true,
padding: 21,
boxHeight: 8,
filter: (legendItem) => { filter: (legendItem) => {
return !flagTypeNames.includes( return !flagTypeNames.includes(
legendItem.text || '', legendItem.text || '',
@ -234,6 +238,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
scales: { scales: {
x: { x: {
type: 'time', type: 'time',
display: false,
time: { time: {
unit: 'week', unit: 'week',
tooltipFormat: 'PPP', tooltipFormat: 'PPP',

6
frontend/src/component/insights/componentsStat/CreationArchiveStats/CreationArchiveStats.tsx
View File

@ -1,11 +1,12 @@
import type { FC } from 'react'; import type { FC } from 'react';
import { Box, Typography, Link, styled } from '@mui/material'; import { Box, Typography, styled } from '@mui/material';
import { HelpIcon } from 'component/common/HelpIcon/HelpIcon'; import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
import InfoOutlined from '@mui/icons-material/InfoOutlined'; import InfoOutlined from '@mui/icons-material/InfoOutlined';
import Lightbulb from '@mui/icons-material/LightbulbOutlined'; import Lightbulb from '@mui/icons-material/LightbulbOutlined';
import { StatsExplanation } from 'component/insights/InsightsCharts.styles'; import { StatsExplanation } from 'component/insights/InsightsCharts.styles';
import type { GroupedDataByProject } from 'component/insights/hooks/useGroupedProjectTrends'; import type { GroupedDataByProject } from 'component/insights/hooks/useGroupedProjectTrends';
import type { InstanceInsightsSchema } from 'openapi'; import type { InstanceInsightsSchema } from 'openapi';
import { Link } from 'react-router-dom';
function getCurrentArchiveRatio( function getCurrentArchiveRatio(
groupedCreationArchiveData: GroupedDataByProject< groupedCreationArchiveData: GroupedDataByProject<
@ -72,6 +73,7 @@ const StyledLink = styled(Link)(({ theme }) => ({
'&:hover': { '&:hover': {
textDecoration: 'underline', textDecoration: 'underline',
}, },
fontSize: theme.spacing(1.75),
})); }));
interface CreationArchiveStatsProps { interface CreationArchiveStatsProps {
@ -105,7 +107,7 @@ export const CreationArchiveStats: FC<CreationArchiveStatsProps> = ({
Do you create more flags than you archive? Or do you have good Do you create more flags than you archive? Or do you have good
process for cleaning up? process for cleaning up?
</StatsExplanation> </StatsExplanation>
<StyledLink href='/search?lifecycle=IS:completed' variant='body2'> <StyledLink to='/search?lifecycle=IS:completed'>
View flags in cleanup stage View flags in cleanup stage
</StyledLink> </StyledLink>
</> </>