midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Small refactoring of ChartJS-colours for easier reuse

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-06-06 03:15:12 +02:00
parent f8f3d1a55e
commit 53ef1b947d
2 changed files with 92 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
src/UI/Base/ChartJs.ts
View file

@ -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'

48
src/UI/BigComponents/TagRenderingChart.ts
View file

@ -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--) {