From 64b77217f4e2eff74d26bc59cbb7144ea76f5569 Mon Sep 17 00:00:00 2001
From: Leander Furumo <leander@furumo.eu>
Date: Thu, 22 Oct 2026 04:47:27 +0200
Subject: [PATCH] Improve chart text contrast

Use a brighter shared chart theme and a dark styled tooltip, with high-contrast pie slice labels.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 frontend/src/features/stats/OrderStats.tsx   |  2 +
 frontend/src/features/stats/ProductStats.tsx |  4 ++
 frontend/src/features/stats/Stats.tsx        | 10 +---
 frontend/src/features/stats/chartTheme.ts    | 60 ++++++++++++++++++++
 frontend/src/features/users/UserDetail.tsx   | 10 +---
 5 files changed, 72 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/features/stats/chartTheme.ts

diff --git a/frontend/src/features/stats/OrderStats.tsx b/frontend/src/features/stats/OrderStats.tsx
index fa089e3..6666a1f 100644
--- a/frontend/src/features/stats/OrderStats.tsx
+++ b/frontend/src/features/stats/OrderStats.tsx
@@ -4,6 +4,7 @@ import React from "react";
 
 import { OrderStatsDocument, SchemaOrderStatsByTime } from "../../types";
 import { StatsView } from "./StatsView";
+import { chartTheme } from "./chartTheme";
 
 const days = { 1: "Mandag", 2: "Tirsdag", 3: "Onsdag", 4: "Torsdag", 5: "Fredag", 6: "Lørdag", 7: "Søndag" };
 
@@ -25,6 +26,7 @@ const months = {
 const OrderBar = ({ data }: { data: BarDatum[] }) => (
   <Bar
     data={data}
+    theme={chartTheme}
     margin={{ left: 60, bottom: 40 }}
     width={1200}
     height={400}
diff --git a/frontend/src/features/stats/ProductStats.tsx b/frontend/src/features/stats/ProductStats.tsx
index 55a2b9b..716b6a9 100644
--- a/frontend/src/features/stats/ProductStats.tsx
+++ b/frontend/src/features/stats/ProductStats.tsx
@@ -5,6 +5,7 @@ import React from "react";
 import { AllProductStatsDocument } from "../../types";
 import styles from "./Stats.module.css";
 import { StatsView } from "./StatsView";
+import { chartTheme } from "./chartTheme";
 
 type UserCount = {
   name: string;
@@ -31,6 +32,9 @@ const ProductStats = () => {
               }))}
               width={400}
               height={300}
+              theme={chartTheme}
+              arcLabelsTextColor="#17121a"
+              arcLabelsSkipAngle={8}
             />
           </div>
         ))}
diff --git a/frontend/src/features/stats/Stats.tsx b/frontend/src/features/stats/Stats.tsx
index 33f3fac..171a2c5 100644
--- a/frontend/src/features/stats/Stats.tsx
+++ b/frontend/src/features/stats/Stats.tsx
@@ -4,6 +4,7 @@ import React from "react";
 
 import { ProductStatsDocument } from "../../types";
 import { StatsView } from "./StatsView";
+import { chartTheme, chartTooltipStyle } from "./chartTheme";
 
 const Stats = () => {
   const { data, loading } = useQuery(ProductStatsDocument);
@@ -21,6 +22,7 @@ const Stats = () => {
       <h2>Kjøp over tid</h2>
       <Line
         data={series}
+        theme={chartTheme}
         width={1000}
         height={400}
         margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
@@ -47,13 +49,7 @@ const Stats = () => {
         useMesh
         pointLabelYOffset={0}
         tooltip={({ point }) => (
-          <div
-            style={{
-              background: "white",
-              padding: "9px 12px",
-              border: "1px solid #ccc",
-            }}
-          >
+          <div style={chartTooltipStyle}>
             <div>
               <strong>{point.data.xFormatted}</strong>
             </div>
diff --git a/frontend/src/features/stats/chartTheme.ts b/frontend/src/features/stats/chartTheme.ts
new file mode 100644
index 0000000..ae6ba80
--- /dev/null
+++ b/frontend/src/features/stats/chartTheme.ts
@@ -0,0 +1,60 @@
+export const chartTheme = {
+  background: "transparent",
+  text: {
+    fill: "#f7effa",
+    fontFamily: '"IBM Plex Mono", monospace',
+    fontSize: 13,
+    textShadow: "none",
+  },
+  axis: {
+    domain: {
+      line: { stroke: "#b9a3c5", strokeWidth: 1 },
+    },
+    ticks: {
+      line: { stroke: "#b9a3c5", strokeWidth: 1 },
+      text: { fill: "#f7effa", fontSize: 12, textShadow: "none" },
+    },
+    legend: {
+      text: { fill: "#f7effa", fontSize: 13, textShadow: "none" },
+    },
+  },
+  grid: {
+    line: { stroke: "rgba(221, 81, 127, 0.24)", strokeWidth: 1 },
+  },
+  legends: {
+    text: { fill: "#f7effa", fontSize: 12, textShadow: "none" },
+    title: {
+      text: { fill: "#f7effa", fontSize: 13, textShadow: "none" },
+    },
+  },
+  labels: {
+    text: {
+      fill: "#ffffff",
+      fontSize: 13,
+      textShadow: "none",
+    },
+  },
+  tooltip: {
+    container: {
+      background: "#2b1733",
+      color: "#ffffff",
+      fontFamily: '"IBM Plex Mono", monospace',
+      fontSize: 13,
+      border: "1px solid #dd517f",
+      borderRadius: 4,
+      boxShadow: "0 4px 16px rgba(0, 0, 0, 0.45)",
+    },
+  },
+};
+
+export const chartTooltipStyle = {
+  background: "#2b1733",
+  color: "#ffffff",
+  padding: "9px 12px",
+  border: "1px solid #dd517f",
+  borderRadius: 4,
+  boxShadow: "0 4px 16px rgba(0, 0, 0, 0.45)",
+  fontFamily: '"IBM Plex Mono", monospace',
+  fontSize: 13,
+  textShadow: "none",
+};
diff --git a/frontend/src/features/users/UserDetail.tsx b/frontend/src/features/users/UserDetail.tsx
index 9bdf6db..2a86cb0 100644
--- a/frontend/src/features/users/UserDetail.tsx
+++ b/frontend/src/features/users/UserDetail.tsx
@@ -6,6 +6,7 @@ import { useParams } from "react-router-dom";
 import { GQLError } from "../../components/GQLError";
 import { SchemaUser as User, UserDetailDocument, SchemaUserProfile as UserProfile } from "../../types";
 import { formatMonth, formatTime } from "../../utils/time";
+import { chartTheme, chartTooltipStyle } from "../stats/chartTheme";
 import styles from "./UserDetail.module.css";
 
 const UserDetail = () => {
@@ -62,6 +63,7 @@ const UserDetail = () => {
         <h2>Kjøp over tid</h2>
         <Line
           data={series}
+          theme={chartTheme}
           width={1000}
           height={400}
           margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
@@ -88,13 +90,7 @@ const UserDetail = () => {
           useMesh
           pointLabelYOffset={0}
           tooltip={({ point }) => (
-            <div
-              style={{
-                background: "white",
-                padding: "9px 12px",
-                border: "1px solid #ccc",
-              }}
-            >
+            <div style={chartTooltipStyle}>
               <div>
                 <strong>{point.data.xFormatted}</strong>
               </div>