forked from MapComplete/MapComplete
62 lines
2.1 KiB
TypeScript
62 lines
2.1 KiB
TypeScript
import { Store, UIEventSource } from "../../Logic/UIEventSource"
|
|
import { SpecialVisualisationParams, SpecialVisualization, SpecialVisualizationState } from "../SpecialVisualization"
|
|
import { Feature } from "geojson"
|
|
import SvelteUIElement from "../Base/SvelteUIElement"
|
|
import Histogram from "../BigComponents/Histogram.svelte"
|
|
|
|
export class HistogramViz extends SpecialVisualization {
|
|
funcName = "histogram"
|
|
docs = "Create a histogram for a list of given values, read from the properties."
|
|
needsUrls = []
|
|
|
|
example =
|
|
'`{histogram(\'some_key\')}` with properties being `{some_key: ["a","b","a","c"]} to create a histogram'
|
|
args = [
|
|
{
|
|
name: "key",
|
|
type:"key",
|
|
doc: "The key to be read and to generate a histogram from",
|
|
required: true,
|
|
},
|
|
]
|
|
|
|
structuredExamples(): { feature: Feature; args: string[] }[] {
|
|
return [
|
|
{
|
|
feature: <Feature>{
|
|
type: "Feature",
|
|
properties: { values: `["a","b","a","b","b","b","c","c","c","d","d"]` },
|
|
geometry: {
|
|
type: "Point",
|
|
coordinates: [0, 0],
|
|
},
|
|
},
|
|
args: ["values"],
|
|
},
|
|
]
|
|
}
|
|
|
|
constr( {tags, args}: SpecialVisualisationParams): SvelteUIElement {
|
|
const values: Store<string[]> = tags.map((tags) => {
|
|
const value = tags[args[0]]
|
|
try {
|
|
if (value === "" || value === undefined) {
|
|
return undefined
|
|
}
|
|
if (Array.isArray(value)) {
|
|
return value
|
|
}
|
|
return JSON.parse(value)
|
|
} catch (e) {
|
|
console.error(
|
|
"Could not load histogram: parsing of the list failed: ",
|
|
e,
|
|
"\nthe data to parse is",
|
|
value
|
|
)
|
|
return undefined
|
|
}
|
|
})
|
|
return new SvelteUIElement(Histogram, { values })
|
|
}
|
|
}
|