MapComplete/src/UI/Popup/HistogramViz.ts

import { Store, UIEventSource } from "../../Logic/UIEventSource"
import { 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",
            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(
        state: SpecialVisualizationState,
        tagSource: UIEventSource<Record<string, string>>,
        args: string[]
    ) {
        const values: Store<string[]> = tagSource.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 })
    }
}