reorganize plots, reduce tabs,

web/frontend/src/generic/plots/Pie.svelte

@@ -14,55 +14,57 @@
 -->
 
 <script module>
-  // https://www.learnui.design/tools/data-color-picker.html#divergent: 11, Shallow Green-Red
-  export const colors = [
-    "#00876c",
-    "#449c6e",
-    "#70af6f",
-    "#9bc271",
-    "#c8d377",
-    "#f7e382",
-    "#f6c468",
-    "#f3a457",
-    "#ed834e",
-    "#e3614d",
-    "#d43d51",
-  ];
-  // https://www.learnui.design/tools/data-color-picker.html#palette: 12, Colorwheel-Like
-  export const altColors = [
-    "#0022bb",
-    "#ba0098",
-    "#fa0066",
-    "#ff6234",
-    "#ffae00",
-    "#b1af00",
-    "#67a630",
-    "#009753",
-    "#00836c",
-    "#006d77",
-    "#005671",
-    "#003f5c",
-  ]
-  // http://tsitsul.in/blog/coloropt/ : 12 colors normal
-  export const cbColors = [
-    'rgb(235,172,35)',
-    'rgb(184,0,88)',
-    'rgb(0,140,249)',
-    'rgb(0,110,0)',
-    'rgb(0,187,173)',
-    'rgb(209,99,230)',
-    'rgb(178,69,2)',
-    'rgb(255,146,135)',
-    'rgb(89,84,214)',
-    'rgb(0,198,248)',
-    'rgb(135,133,0)',
-    'rgb(0,167,108)',
-    'rgb(189,189,189)'
-  ];
+  export const colors = {
+    // https://www.learnui.design/tools/data-color-picker.html#divergent: 11, Shallow Green-Red
+    default: [
+      "#00876c",
+      "#449c6e",
+      "#70af6f",
+      "#9bc271",
+      "#c8d377",
+      "#f7e382",
+      "#f6c468",
+      "#f3a457",
+      "#ed834e",
+      "#e3614d",
+      "#d43d51",
+    ],
+    // https://www.learnui.design/tools/data-color-picker.html#palette: 12, Colorwheel-Like
+    alternative: [
+      "#0022bb",
+      "#ba0098",
+      "#fa0066",
+      "#ff6234",
+      "#ffae00",
+      "#b1af00",
+      "#67a630",
+      "#009753",
+      "#00836c",
+      "#006d77",
+      "#005671",
+      "#003f5c",
+    ],
+    // http://tsitsul.in/blog/coloropt/ : 12 colors normal
+    colorblind: [
+      'rgb(235,172,35)',
+      'rgb(184,0,88)',
+      'rgb(0,140,249)',
+      'rgb(0,110,0)',
+      'rgb(0,187,173)',
+      'rgb(209,99,230)',
+      'rgb(178,69,2)',
+      'rgb(255,146,135)',
+      'rgb(89,84,214)',
+      'rgb(0,198,248)',
+      'rgb(135,133,0)',
+      'rgb(0,167,108)',
+      'rgb(189,189,189)',
+    ]
+  }
 </script>
 
 <script>
-  /* Ignore Double Script Section Error in IDE */
+  // Ignore VSC IDE "One Instance Level Script" Error
   import { onMount, getContext } from "svelte";
   import Chart from 'chart.js/auto';
 
@@ -74,10 +76,11 @@
     quantities,
     entities,
     displayLegend = false,
+    useAltColors = false,
   } = $props();
 
   /* Const Init */
-  const ccconfig = getContext("cc-config");
+  const useCbColors = getContext("cc-config")?.plot_general_colorblindMode || false
   const options = { 
     maintainAspectRatio: false,
     animation: false,
@@ -88,10 +91,19 @@
     }
   };
 
-  /* State Init */
-  let cbmode = $state(ccconfig?.plot_general_colorblindMode || false)
-
   /* Derived */
+  const colorPalette = $derived.by(() => {
+    let c;
+    if (useCbColors) {
+      c = [...colors['colorblind']];
+    } else if (useAltColors) {
+      c = [...colors['alternative']];
+    } else {
+      c = [...colors['default']];
+    }
+    return c.slice(0, quantities.length);
+  })
+
   const data = $derived({
     labels: entities,
     datasets: [
@@ -99,7 +111,7 @@
         label: sliceLabel,
         data: quantities,
         fill: 1,
-        backgroundColor: cbmode ? cbColors.slice(0, quantities.length) : colors.slice(0, quantities.length)
+        backgroundColor: colorPalette,
       }
     ]
   });
@@ -118,7 +130,7 @@
 </script>
 
 <!-- <div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/> -->
-<div class="chart-container" style="--container-width: {size}; --container-height: {size}">
+<div class="chart-container" style="--container-width: {size}px; --container-height: {size}px">
   <canvas id={canvasId}></canvas>
 </div>