From 53ef1b947d51e512c71120496eb3826d0bad6f95 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Thu, 6 Jun 2024 03:15:12 +0200 Subject: [PATCH] Small refactoring of ChartJS-colours for easier reuse --- src/UI/Base/ChartJs.ts | 80 +++++++++++++++++++++++ src/UI/BigComponents/TagRenderingChart.ts | 48 ++++---------- 2 files changed, 92 insertions(+), 36 deletions(-) diff --git a/src/UI/Base/ChartJs.ts b/src/UI/Base/ChartJs.ts index 051335e4c5..ae74dd2af6 100644 --- a/src/UI/Base/ChartJs.ts +++ b/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, @@ -14,6 +42,58 @@ export default class ChartJs< this._config = config } + public static ConstructDoughnut(data: Record){ + 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 = { + 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' diff --git a/src/UI/BigComponents/TagRenderingChart.ts b/src/UI/BigComponents/TagRenderingChart.ts index cd02d51aee..70cc13fbf3 100644 --- a/src/UI/BigComponents/TagRenderingChart.ts +++ b/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, - TagRenderingChart.otherBorderColor, - TagRenderingChart.notApplicableBorderColor, + ChartJsColours.unknownBorderColor, + ChartJsColours.otherBorderColor, + ChartJsColours.notApplicableBorderColor, ] const backgroundColor = [ - TagRenderingChart.unkownColor, - TagRenderingChart.otherColor, - TagRenderingChart.notApplicableColor, + ChartJsColours.unknownColor, + ChartJsColours.otherColor, + ChartJsColours.notApplicableColor, ] while (borderColor.length < data.length) { - borderColor.push(...TagRenderingChart.borderColors) - backgroundColor.push(...TagRenderingChart.backgroundColors) + borderColor.push(...ChartJsColours.borderColors) + backgroundColor.push(...ChartJsColours.backgroundColors) } for (let i = data.length; i >= 0; i--) {