Extract statistics panel, add statistics panel as special rendering

UI/BigComponents/StatisticsPanel.ts

@@ -0,0 +1,51 @@
+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]));
+    }
+}