diff --git a/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx b/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx index 3a6bdfef28..b1344ca74b 100644 --- a/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx +++ b/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx @@ -164,7 +164,7 @@ export const CreationArchiveChart: FC = ({ display: true, time: { unit: 'week' as const, - tooltipFormat: 'PPP', + tooltipFormat: 'P', }, grid: { display: false, diff --git a/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveRatioTooltip.tsx b/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveRatioTooltip.tsx index 29eb897a4e..3a33da08e7 100644 --- a/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveRatioTooltip.tsx +++ b/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveRatioTooltip.tsx @@ -6,8 +6,10 @@ import type { WeekData } from './types.ts'; import { calculateRatio } from 'component/insights/calculate-ratio/calculate-ratio.ts'; const StyledTooltipItemContainer = styled(Paper)(({ theme }) => ({ - padding: theme.spacing(2), - width: 200, + padding: theme.spacing(1.5), + display: 'flex', + flexFlow: 'column', + gap: theme.spacing(0.5), })); const DataList = styled('dl')(({ theme }) => ({ @@ -22,12 +24,13 @@ const DataRow = styled('div', { alignItems: 'center', whiteSpace: 'nowrap', fontSize: theme.typography.body2.fontSize, - '::before': { + 'dt::before': { content: '" "', display: 'inline-block', height: '.65rem', aspectRatio: '1/1', borderRadius: '50%', + marginInlineEnd: theme.spacing(0.5), backgroundColor: dataType === 'archived' @@ -40,6 +43,11 @@ interface CreationArchiveRatioTooltipProps { tooltip: TooltipState | null; } +const Timestamp = styled('span')(({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, + color: theme.palette.text.secondary, +})); + export const CreationArchiveRatioTooltip: FC< CreationArchiveRatioTooltipProps > = ({ tooltip }) => { @@ -56,12 +64,7 @@ export const CreationArchiveRatioTooltip: FC< return ( - + Ratio {ratio} @@ -75,6 +78,7 @@ export const CreationArchiveRatioTooltip: FC<
{createdCount}
+ {tooltip.title}
);