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

Refactoring: Histogram now uses chartJS, simplify code

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-07-12 15:53:51 +02:00
parent 3918e5ec04
commit 6ae258c48d
9 changed files with 92 additions and 314 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/UI/Popup/HistogramViz.ts
View file

@ -1,7 +1,8 @@
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import { SpecialVisualization, SpecialVisualizationState } from "../SpecialVisualization"
import Histogram from "../BigComponents/Histogram"
import { Feature } from "geojson"
import SvelteUIElement from "../Base/SvelteUIElement"
import Histogram from "../BigComponents/Histogram.svelte"
export class HistogramViz extends SpecialVisualization {
funcName = "histogram"
@ -15,21 +16,8 @@ export class HistogramViz extends SpecialVisualization {
name: "key",
doc: "The key to be read and to generate a histogram from",
required: true,
},
{
name: "title",
doc: "This text will be placed above the texts (in the first column of the visulasition)",
defaultValue: "",
},
{
name: "countHeader",
doc: "This text will be placed above the bars",
defaultValue: "",
},
{
name: "colors*",
doc: "(Matches all resting arguments - optional) Matches a regex onto a color value, e.g. `3[a-zA-Z+-]*:#33cc33`",
},
}
]
structuredExamples(): { feature: Feature; args: string[] }[] {
@ -53,27 +41,7 @@ export class HistogramViz extends SpecialVisualization {
tagSource: UIEventSource<Record<string, string>>,
args: string[]
) {
let assignColors = undefined
if (args.length >= 3) {
const colors = [...args]
colors.splice(0, 3)
const mapping = colors.map((c) => {
const splitted = c.split(":")
const value = splitted.pop()
const regex = splitted.join(":")
return { regex: "^" + regex + "$", color: value }
})
assignColors = (key) => {
for (const kv of mapping) {
if (key.match(kv.regex) !== null) {
return kv.color
}
}
return undefined
}
}
const listSource: Store<string[]> = tagSource.map((tags) => {
const values: Store<string[]> = tagSource.map((tags) => {
const value = tags[args[0]]
try {
if (value === "" || value === undefined) {
@ -88,8 +56,6 @@ export class HistogramViz extends SpecialVisualization {
return undefined
}
})
return new Histogram(listSource, args[1], args[2], {
assignColor: assignColors,
})
return new SvelteUIElement(Histogram, { values })
}
}