From 5c74c34cbfdbe4023d234d0671b5680a2e53fc87 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Mon, 1 Sep 2025 09:19:47 +0200
Subject: [PATCH] chore: Add date to archive vs creation tooltip (#10578)

Makes it easier to understand what piece of data you're looking at. The
raw date isn't available directly, but we have the formatted version for
the tooltip, so we'll display that.

This PR changes the format to be more in line with the UX sketches (just
numbers and separators instead of words). In theory, it should also be
possible to [adjust the
locale](https://www.npmjs.com/package/chartjs-adapter-date-fns#locale-support-via-scale-options)
(in this case, it should be to the user's chosen locale), but I can't
seem to make that option work. I don't want to spend more time on that
right now, unless we get feedback on it. However, _yes_ the format is
american, and _yes_, that puts months ahead of days. However, you also
have the date in longer form on the x axis, so I think you'll be able to
work it out.


Before:
<img width="279" height="139" alt="image"
src="https://github.com/user-attachments/assets/5c71e708-9d9f-412a-acbb-7d28e5071d5a"
/>


After:
<img width="246" height="154" alt="image"
src="https://github.com/user-attachments/assets/13a4f5b3-281b-4003-8aae-a248578fead8"
/>
---
 .../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 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 (
         <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>
     );