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

chore: Add date to archive vs creation tooltip

Browse Source 
Makes it easier to see what you're looking at.
This commit is contained in:
Thomas Heartman 2025-08-29 13:00:53 +02:00
parent 718a731d2f
commit 6f37234523
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
2 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -164,7 +164,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
display: true, display: true,
time: { time: {
unit: 'week' as const, unit: 'week' as const,
tooltipFormat: 'PPP', tooltipFormat: 'P',
}, },
grid: { grid: {
display: false, display: false,

22
frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveRatioTooltip.tsx
View File

@ -6,8 +6,10 @@ import type { WeekData } from './types.ts';
import { calculateRatio } from 'component/insights/calculate-ratio/calculate-ratio.ts'; import { calculateRatio } from 'component/insights/calculate-ratio/calculate-ratio.ts';
const StyledTooltipItemContainer = styled(Paper)(({ theme }) => ({ const StyledTooltipItemContainer = styled(Paper)(({ theme }) => ({
padding: theme.spacing(2), padding: theme.spacing(1.5),
width: 200, display: 'flex',
flexFlow: 'column',
gap: theme.spacing(0.5),
})); }));
const DataList = styled('dl')(({ theme }) => ({ const DataList = styled('dl')(({ theme }) => ({
@ -22,12 +24,13 @@ const DataRow = styled('div', {
alignItems: 'center', alignItems: 'center',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
fontSize: theme.typography.body2.fontSize, fontSize: theme.typography.body2.fontSize,
'::before': { 'dt::before': {
content: '" "', content: '" "',
display: 'inline-block', display: 'inline-block',
height: '.65rem', height: '.65rem',
aspectRatio: '1/1', aspectRatio: '1/1',
borderRadius: '50%', borderRadius: '50%',
marginInlineEnd: theme.spacing(0.5),
backgroundColor: backgroundColor:
dataType === 'archived' dataType === 'archived'
@ -40,6 +43,11 @@ interface CreationArchiveRatioTooltipProps {
tooltip: TooltipState | null; tooltip: TooltipState | null;
} }
const Timestamp = styled('span')(({ theme }) => ({
fontSize: theme.typography.body2.fontSize,
color: theme.palette.text.secondary,
}));
export const CreationArchiveRatioTooltip: FC< export const CreationArchiveRatioTooltip: FC<
CreationArchiveRatioTooltipProps CreationArchiveRatioTooltipProps
> = ({ tooltip }) => { > = ({ tooltip }) => {
@ -56,12 +64,7 @@ export const CreationArchiveRatioTooltip: FC<
return ( return (
<ChartTooltipContainer tooltip={tooltip}> <ChartTooltipContainer tooltip={tooltip}>
<StyledTooltipItemContainer elevation={3}> <StyledTooltipItemContainer elevation={3}>
<Typography <Typography variant='body2' component='span' fontWeight='bold'>
variant='body2'
component='div'
fontWeight='bold'
sx={{ marginBottom: 1 }}
>
Ratio {ratio}% Ratio {ratio}%
</Typography> </Typography>
@ -75,6 +78,7 @@ export const CreationArchiveRatioTooltip: FC<
<dd>{createdCount}</dd> <dd>{createdCount}</dd>
</DataRow> </DataRow>
</DataList> </DataList>
<Timestamp>{tooltip.title}</Timestamp>
</StyledTooltipItemContainer> </StyledTooltipItemContainer>
</ChartTooltipContainer> </ChartTooltipContainer>
); );