MapComplete/UI/BigComponents/StatisticsPanel.ts

import {VariableUiElement} from "../Base/VariableUIElement";
import Loading from "../Base/Loading";
import Title from "../Base/Title";
import TagRenderingChart from "./TagRenderingChart";
import Combine from "../Base/Combine";
import Locale from "../i18n/Locale";
import {UIEventSource} from "../../Logic/UIEventSource";
import {OsmFeature} from "../../Models/OsmFeature";
import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";

export default class StatisticsPanel extends VariableUiElement {
    constructor(elementsInview: UIEventSource<{ element: OsmFeature, layer: LayerConfig }[]>, state: {
        layoutToUse: LayoutConfig
    }) {
        super(elementsInview.stabilized(1000).map(features => {
            if (features === undefined) {
                return new Loading("Loading data")
            }
            if (features.length === 0) {
                return "No elements in view"
            }
            const els = []
            for (const layer of state.layoutToUse.layers) {
                if(layer.name === undefined){
                    continue
                }
                const featuresForLayer = features.filter(f => f.layer === layer).map(f => f.element)
                if(featuresForLayer.length === 0){
                    continue
                }
                els.push(new Title(layer.name.Clone(), 1).SetClass("mt-8"))

                const layerStats = []
                for (const tagRendering of (layer?.tagRenderings ?? [])) {
                    const chart = new TagRenderingChart(featuresForLayer, tagRendering, {
                        chartclasses: "w-full",
                        chartstyle: "height: 60rem",
                        includeTitle: false
                    })
                    const title = new Title(tagRendering.question?.Clone() ?? tagRendering.id, 4).SetClass("mt-8")
                    if(!chart.HasClass("hidden")){
                        layerStats.push(new Combine([title, chart]).SetClass("flex flex-col w-full lg:w-1/3"))
                    }
                }
                els.push(new Combine(layerStats).SetClass("flex flex-wrap"))
            }
            return new Combine(els)
        }, [Locale.language]));
    }
}