From b474288df729f55a5aeeef804c8a21aaa03f9fed Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Thu, 7 Aug 2025 18:20:34 +0200
Subject: [PATCH] add cbmode to piecharts

- old default colorscheme is now cb colorscheme
---
 web/frontend/src/generic/plots/Pie.svelte | 72 ++++++++++++++++++-----
 web/frontend/src/status/UsageDash.svelte  |  7 ++-
 2 files changed, 62 insertions(+), 17 deletions(-)

diff --git a/web/frontend/src/generic/plots/Pie.svelte b/web/frontend/src/generic/plots/Pie.svelte
index aed6026..a0312c4 100644
--- a/web/frontend/src/generic/plots/Pie.svelte
+++ b/web/frontend/src/generic/plots/Pie.svelte
@@ -14,8 +14,47 @@
 -->
 
 <script module>
-  // http://tsitsul.in/blog/coloropt/ : 12 colors normal
   export const colors = [
+    "#0022bb",
+    "#ba0098",
+    "#fa0066",
+    "#ff6234",
+    "#ffae00",
+    "#b1af00",
+    "#67a630",
+    "#009753",
+    "#00836c",
+    "#006d77",
+    "#005671",
+    "#003f5c",
+    // Var 2
+    // "#00876c",
+    // "#449c6e",
+    // "#70af6f",
+    // "#9bc271",
+    // "#c8d377",
+    // "#f7e382",
+    // "#f6c468",
+    // "#f3a457",
+    // "#ed834e",
+    // "#e3614d",
+    // "#d43d51",
+    // Var 3
+    // "#ab0000",
+    // "#c33b00",
+    // "#d96000",
+    // "#ed8300",
+    // "#ffa600",
+    // "#ff7c43",
+    // "#f95d6a",
+    // "#d45087",
+    // "#a05195",
+    // "#665191",
+    // "#2f4b7c",
+    // "#003f5c"
+  ];
+  // http://tsitsul.in/blog/coloropt/ : 12 colors normal
+  export const cbColors = [
     'rgb(235,172,35)',
     'rgb(184,0,88)',
     'rgb(0,140,249)',
@@ -34,8 +73,8 @@
 
 <script>
   /* Ignore Double Script Section Error in IDE */
+  import { onMount, getContext } from "svelte";
   import Chart from 'chart.js/auto';
-  import { onMount } from 'svelte';
 
   /* Svelte 5 Props */
   let {
@@ -48,18 +87,7 @@
   } = $props();
 
   /* Const Init */
-  const data = {
-    labels: entities,
-    datasets: [
-      {
-        label: sliceLabel,
-        data: quantities,
-        fill: 1,
-        backgroundColor: colors.slice(0, quantities.length)
-      }
-    ]
-  };
-
+  const ccconfig = getContext("cc-config");
   const options = { 
     maintainAspectRatio: false,
     animation: false,
@@ -70,6 +98,22 @@
     }
   };
 
+  /* State Init */
+  let cbmode = $state(ccconfig?.plot_general_colorblindMode || false)
+
+  /* Derived */
+  const data = $derived({
+    labels: entities,
+    datasets: [
+      {
+        label: sliceLabel,
+        data: quantities,
+        fill: 1,
+        backgroundColor: cbmode ? cbColors.slice(0, quantities.length) : colors.slice(0, quantities.length)
+      }
+    ]
+  });
+
   /* On Mount */
   onMount(() => {
     new Chart(
diff --git a/web/frontend/src/status/UsageDash.svelte b/web/frontend/src/status/UsageDash.svelte
index 1cda6e8..e09c4cf 100644
--- a/web/frontend/src/status/UsageDash.svelte
+++ b/web/frontend/src/status/UsageDash.svelte
@@ -27,7 +27,7 @@
     scramble,
     scrambleNames,
   } from "../generic/utils.js";
-  import Pie, { colors } from "../generic/plots/Pie.svelte";
+  import Pie, { colors, cbColors } from "../generic/plots/Pie.svelte";
 
   /* Svelte 5 Props */
   let {
@@ -48,6 +48,7 @@
 
   /* State Init */
   let colWidth = $state(0);
+  let cbmode = $state(ccconfig?.plot_general_colorblindMode || false)
 
   // Pie Charts
   let topProjectSelection = $state(
@@ -234,7 +235,7 @@
             </tr>
             {#each $topUserQuery.data.topUser as tu, i}
               <tr>
-                <td><Icon name="circle-fill" style="color: {colors[i]};" /></td>
+                <td><Icon name="circle-fill" style="color: {cbmode ? cbColors[i] : colors[i]};" /></td>
                 <th scope="col" id="topName-{tu.id}"
                   ><a
                     href="/monitoring/user/{tu.id}?cluster={cluster}&state=running"
@@ -301,7 +302,7 @@
             </tr>
             {#each $topProjectQuery.data.topProjects as tp, i}
               <tr>
-                <td><Icon name="circle-fill" style="color: {colors[i]};" /></td>
+                <td><Icon name="circle-fill" style="color: {cbmode ? cbColors[i] : colors[i]};" /></td>
                 <th scope="col"
                   ><a
                     href="/monitoring/jobs/?cluster={cluster}&state=running&project={tp.id}&projectMatch=eq"