From 6f37234523c4be694a500f0b00c10d12475b8d09 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 29 Aug 2025 13:00:53 +0200
Subject: [PATCH] chore: Add date to archive vs creation tooltip

Makes it easier to see what you're looking at.
---
 .../CreationArchiveChart.tsx                  |  2 +-
 .../CreationArchiveRatioTooltip.tsx           | 22 +++++++++++--------
 2 files changed, 14 insertions(+), 10 deletions(-)

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<ICreationArchiveChartProps> = ({
                     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 721ea7385a..d0cec6f585 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 (
         <ChartTooltipContainer tooltip={tooltip}>
             <StyledTooltipItemContainer elevation={3}>
-                <Typography
-                    variant='body2'
-                    component='div'
-                    fontWeight='bold'
-                    sx={{ marginBottom: 1 }}
-                >
+                <Typography variant='body2' component='span' fontWeight='bold'>
                     Ratio {ratio}%
                 </Typography>
 
@@ -75,6 +78,7 @@ export const CreationArchiveRatioTooltip: FC<
                         <dd>{createdCount}</dd>
                     </DataRow>
                 </DataList>
+                <Timestamp>{tooltip.title}</Timestamp>
             </StyledTooltipItemContainer>
         </ChartTooltipContainer>
     );