Small refactoring of ChartJS-colours for easier reuse

src/UI/Base/ChartJs.ts

@@ -1,7 +1,35 @@
 import BaseUIElement from "../BaseUIElement"
 import { Chart, ChartConfiguration, ChartType, DefaultDataPoint, registerables } from "chart.js"
+
 Chart?.register(...(registerables ?? []))
 
+export class ChartJsColours {
+    public static readonly unknownColor = "rgba(128, 128, 128, 0.2)"
+    public static readonly unknownBorderColor = "rgba(128, 128, 128, 0.2)"
+
+    public static readonly otherColor = "rgba(128, 128, 128, 0.2)"
+    public static readonly otherBorderColor = "rgba(128, 128, 255)"
+    public static readonly notApplicableColor = "rgba(128, 128, 128, 0.2)"
+    public static readonly notApplicableBorderColor = "rgba(255, 0, 0)"
+
+    public static readonly backgroundColors = [
+        "rgba(255, 99, 132, 0.2)",
+        "rgba(54, 162, 235, 0.2)",
+        "rgba(255, 206, 86, 0.2)",
+        "rgba(75, 192, 192, 0.2)",
+        "rgba(153, 102, 255, 0.2)",
+        "rgba(255, 159, 64, 0.2)",
+    ]
+
+    public static readonly borderColors = [
+        "rgba(255, 99, 132, 1)",
+        "rgba(54, 162, 235, 1)",
+        "rgba(255, 206, 86, 1)",
+        "rgba(75, 192, 192, 1)",
+        "rgba(153, 102, 255, 1)",
+        "rgba(255, 159, 64, 1)",
+    ]
+}
 export default class ChartJs<
     TType extends ChartType = ChartType,
     TData = DefaultDataPoint<TType>,
@@ -14,6 +42,58 @@ export default class ChartJs<
         this._config = config
     }
 
+    public static ConstructDoughnut(data: Record<string, number>){
+        const borderColor = [
+           // ChartJsColours.unkownBorderColor,
+          //  ChartJsColours.otherBorderColor,
+          //  ChartJsColours.notApplicableBorderColor,
+        ]
+        const backgroundColor = [
+         //   ChartJsColours.unkownColor,
+         //   ChartJsColours.otherColor,
+         //   ChartJsColours.notApplicableColor,
+        ]
+
+        let i = 0
+        const borders = ChartJsColours.borderColors
+        const bg = ChartJsColours.backgroundColors
+
+        for (const key in data) {
+            if(key === ""){
+                borderColor.push(ChartJsColours.unknownBorderColor)
+                backgroundColor.push(ChartJsColours.unknownColor)
+            }else{
+                borderColor.push(borders[i % borders.length])
+                backgroundColor.push(bg[i % bg.length])
+                i++
+            }
+        }
+
+        const config = <ChartConfiguration>{
+            type: "doughnut",
+            data: {
+                labels: Object.keys(data),
+                datasets: [
+                    {
+                        data: Object.values(data),
+                        backgroundColor,
+                        borderColor,
+                        borderWidth: 1,
+                        label: undefined,
+                    },
+                ],
+            },
+            options: {
+                plugins: {
+                    legend: {
+                        display: false,
+                    },
+                },
+            },
+        }
+        return new ChartJs(config)
+    }
+
     protected InnerConstructElement(): HTMLElement {
         const canvas = document.createElement("canvas")
         // A bit exceptional: we apply the styles before giving them to 'chartJS'

src/UI/BigComponents/TagRenderingChart.ts

@@ -1,4 +1,4 @@
-import ChartJs from "../Base/ChartJs"
+import ChartJs, { ChartJsColours } from "../Base/ChartJs"
 import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig"
 import { ChartConfiguration } from "chart.js"
 import Combine from "../Base/Combine"
@@ -111,12 +111,12 @@ export class StackedRenderingChart extends ChartJs {
                 }
             }
             let backgroundColor =
-                TagRenderingChart.borderColors[i % TagRenderingChart.borderColors.length]
+                ChartJsColours.borderColors[i % ChartJsColours.borderColors.length]
             if (label === "Unknown") {
-                backgroundColor = TagRenderingChart.unkownBorderColor
+                backgroundColor = ChartJsColours.unknownBorderColor
             }
             if (label === "Other") {
-                backgroundColor = TagRenderingChart.otherBorderColor
+                backgroundColor = ChartJsColours.otherBorderColor
             }
             datasets.push({
                 data: countsPerDay,
@@ -185,31 +185,7 @@ export class StackedRenderingChart extends ChartJs {
 }
 
 export default class TagRenderingChart extends Combine {
-    public static readonly unkownColor = "rgba(128, 128, 128, 0.2)"
-    public static readonly unkownBorderColor = "rgba(128, 128, 128, 0.2)"
 
-    public static readonly otherColor = "rgba(128, 128, 128, 0.2)"
-    public static readonly otherBorderColor = "rgba(128, 128, 255)"
-    public static readonly notApplicableColor = "rgba(128, 128, 128, 0.2)"
-    public static readonly notApplicableBorderColor = "rgba(255, 0, 0)"
-
-    public static readonly backgroundColors = [
-        "rgba(255, 99, 132, 0.2)",
-        "rgba(54, 162, 235, 0.2)",
-        "rgba(255, 206, 86, 0.2)",
-        "rgba(75, 192, 192, 0.2)",
-        "rgba(153, 102, 255, 0.2)",
-        "rgba(255, 159, 64, 0.2)",
-    ]
-
-    public static readonly borderColors = [
-        "rgba(255, 99, 132, 1)",
-        "rgba(54, 162, 235, 1)",
-        "rgba(255, 206, 86, 1)",
-        "rgba(75, 192, 192, 1)",
-        "rgba(153, 102, 255, 1)",
-        "rgba(255, 159, 64, 1)",
-    ]
 
     /**
      * Creates a chart about this tagRendering for the given data
@@ -242,19 +218,19 @@ export default class TagRenderingChart extends Combine {
         }
 
         const borderColor = [
-            TagRenderingChart.unkownBorderColor,
+            ChartJsColours.unknownBorderColor,
-            TagRenderingChart.otherBorderColor,
+            ChartJsColours.otherBorderColor,
-            TagRenderingChart.notApplicableBorderColor,
+            ChartJsColours.notApplicableBorderColor,
         ]
         const backgroundColor = [
-            TagRenderingChart.unkownColor,
+           ChartJsColours.unknownColor,
-            TagRenderingChart.otherColor,
+           ChartJsColours.otherColor,
-            TagRenderingChart.notApplicableColor,
+           ChartJsColours.notApplicableColor,
         ]
 
         while (borderColor.length < data.length) {
-            borderColor.push(...TagRenderingChart.borderColors)
+            borderColor.push(...ChartJsColours.borderColors)
-            backgroundColor.push(...TagRenderingChart.backgroundColors)
+            backgroundColor.push(...ChartJsColours.backgroundColors)
         }
 
         for (let i = data.length; i >= 0; i--) {