From 835d2611d0049245811a5b72ab23ccebb8e0b9ef Mon Sep 17 00:00:00 2001
From: Yusuf Emre Boyraz <0xboyraz@proton.me>
Date: Wed, 8 Jul 2026 23:49:51 +0300
Subject: [PATCH] fix: generate pie chart colors via golden-angle hue spacing

Fixed 6-color palette repeated after 6 languages and put similar
hues (green/teal/blue) next to each other, making languages hard
to tell apart on the language pie charts. Golden-angle hue steps
scale to any number of languages with no repeats and even
perceptual spacing.

Fixes #119
---
 src/main/resources/vue/components/_charts.vue | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/main/resources/vue/components/_charts.vue b/src/main/resources/vue/components/_charts.vue
index 159af66..0e7164f 100644
--- a/src/main/resources/vue/components/_charts.vue
+++ b/src/main/resources/vue/components/_charts.vue
@@ -97,13 +97,10 @@
         });
 
         function createColorArray(length) {
-            const colors = ["#54ca76", "#f5c452", "#f2637f", "#9261f3", "#31a4e6", "#55cbcb"];
-            let array = [...Array(length).keys()].map(i => colors[i % colors.length]);
-            // avoid first and last colors being the same
-            if (length % colors.length === 1) {
-                array[length - 1] = colors[1];
-            }
-            return array;
+            // golden-angle hue steps spread colors evenly around the wheel,
+            // so no two colors land close together, no matter how many languages there are
+            const GOLDEN_ANGLE = 137.508;
+            return [...Array(length).keys()].map(i => `hsl(${(i * GOLDEN_ANGLE) % 360}, 65%, 55%)`);
         }
 
         function arrayRotate(arr, n) {