contrapunctus/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Refactoring: fix statistics in onwheels theme

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-03-04 22:21:24 +01:00
parent 0f897306a0
commit 3468837e0b
10 changed files with 84 additions and 256 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,8 +9,8 @@ export class ChartJsColours {
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 notApplicableColor = "#fff" // "rgba(128, 128, 128, 0.2)"
public static readonly notApplicableBorderColor = "rgb(241,132,132)"
public static readonly backgroundColors = [
"rgba(255, 99, 132, 0.2)",
@ -42,58 +42,6 @@ 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'