From b921b729bac8d3803877491caee3d5862fce1947 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 2 Sep 2025 15:44:35 +0200
Subject: [PATCH] show more appropriate placeholder data

---
 .../CreationArchiveChart.tsx                  | 10 ++-
 .../CreationArchiveChart/placeholderData.ts   | 63 +++++++++++++++++++
 2 files changed, 67 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/component/insights/componentsChart/CreationArchiveChart/placeholderData.ts

diff --git a/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx b/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx
index fdf9fe3f70..12838a7a09 100644
--- a/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx
+++ b/frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx
@@ -21,11 +21,11 @@ import type { TooltipState } from 'component/insights/components/LineChart/Chart
 import type { WeekData, RawWeekData } from './types.ts';
 import { createTooltip } from 'component/insights/components/LineChart/createTooltip.ts';
 import { CreationArchiveRatioTooltip } from './CreationArchiveRatioTooltip.tsx';
-import { Chart } from 'react-chartjs-2';
 import { getDateFnsLocale } from '../../getDateFnsLocale.ts';
 import { customHighlightPlugin } from 'component/common/Chart/customHighlightPlugin.ts';
 import { NotEnoughData } from 'component/insights/components/LineChart/LineChart.tsx';
-import { usePlaceholderData } from 'component/insights/hooks/usePlaceholderData.ts';
+import { placeholderData } from './placeholderData.ts';
+import { Bar } from 'react-chartjs-2';
 
 ChartJS.register(
     CategoryScale,
@@ -74,7 +74,6 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
 }) => {
     const creationVsArchivedChart = useProjectChartData(creationArchiveTrends);
     const theme = useTheme();
-    const placeholderData = usePlaceholderData();
     const { locationSettings } = useLocationSettings();
     const [tooltip, setTooltip] = useState<null | TooltipState>(null);
 
@@ -213,7 +212,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
                         display: false,
                     },
                     ticks: {
-                        source: 'data',
+                        source: 'data' as const,
                         display: !useGraphCover,
                     },
                 },
@@ -237,8 +236,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
 
     return (
         <>
-            <Chart
-                type='bar'
+            <Bar
                 data={data}
                 options={options}
                 height={100}
diff --git a/frontend/src/component/insights/componentsChart/CreationArchiveChart/placeholderData.ts b/frontend/src/component/insights/componentsChart/CreationArchiveChart/placeholderData.ts
new file mode 100644
index 0000000000..171f7ce2fe
--- /dev/null
+++ b/frontend/src/component/insights/componentsChart/CreationArchiveChart/placeholderData.ts
@@ -0,0 +1,63 @@
+import type { ChartData } from 'chart.js';
+import type { WeekData } from './types.ts';
+
+const data = [
+    {
+        archivedFlags: 3,
+        totalCreatedFlags: 4,
+        archivePercentage: 75,
+        week: '2025-30',
+        date: '2025-07-27T01:00:00.000Z',
+    },
+    {
+        archivedFlags: 7,
+        totalCreatedFlags: 3,
+        archivePercentage: 140,
+        week: '2025-31',
+        date: '2025-08-03T01:00:00.000Z',
+    },
+    {
+        archivedFlags: 2,
+        totalCreatedFlags: 3,
+        archivePercentage: 50,
+        week: '2025-32',
+        date: '2025-08-10T01:00:00.000Z',
+    },
+    {
+        archivedFlags: 2,
+        totalCreatedFlags: 6,
+        archivePercentage: 25,
+        week: '2025-33',
+        date: '2025-08-17T00:40:40.606Z',
+    },
+    {
+        archivedFlags: 4,
+        totalCreatedFlags: 9,
+        archivePercentage: 66.66666666666666,
+        week: '2025-34',
+        date: '2025-08-24T00:29:19.583Z',
+    },
+];
+
+export const placeholderData: ChartData<any, WeekData[]> = {
+    datasets: [
+        {
+            label: 'Flags archived',
+            data,
+            parsing: {
+                yAxisKey: 'archivedFlags',
+                xAxisKey: 'date',
+            },
+            order: 1,
+        },
+        {
+            label: 'Flags created',
+            data,
+            parsing: {
+                yAxisKey: 'totalCreatedFlags',
+                xAxisKey: 'date',
+            },
+            order: 2,
+        },
+    ],
+};