Refactoring: fix statistics in onwheels theme

src/Models/ThemeViewState/WithGuiState.ts

@@ -66,7 +66,6 @@ export class WithGuiState extends WithSpecialLayers {
     }
 
     public selectCurrentView() {
-        this.guistate.closeAll()
         this.selectedElement.setData(this.currentView.features?.data?.[0])
     }
 }

src/UI/Base/ChartJs.ts

@@ -9,8 +9,8 @@ export class ChartJsColours {
 
     public static readonly otherColor = "rgba(128, 128, 128, 0.2)"
     public static readonly otherBorderColor = "rgba(128, 128, 255)"
-    public static readonly notApplicableColor = "rgba(128, 128, 128, 0.2)"
-    public static readonly notApplicableBorderColor = "rgba(255, 0, 0)"
+    public static readonly notApplicableColor = "#fff" // "rgba(128, 128, 128, 0.2)"
+    public static readonly notApplicableBorderColor = "rgb(241,132,132)"
 
     public static readonly backgroundColors = [
         "rgba(255, 99, 132, 0.2)",
@@ -42,58 +42,6 @@ export default class ChartJs<
         this._config = config
     }
 
-    public static ConstructDoughnut(data: Record<string, number>) {
-        const borderColor = [
-            // ChartJsColours.unkownBorderColor,
-            //  ChartJsColours.otherBorderColor,
-            //  ChartJsColours.notApplicableBorderColor,
-        ]
-        const backgroundColor = [
-            //   ChartJsColours.unkownColor,
-            //   ChartJsColours.otherColor,
-            //   ChartJsColours.notApplicableColor,
-        ]
-
-        let i = 0
-        const borders = ChartJsColours.borderColors
-        const bg = ChartJsColours.backgroundColors
-
-        for (const key in data) {
-            if (key === "") {
-                borderColor.push(ChartJsColours.unknownBorderColor)
-                backgroundColor.push(ChartJsColours.unknownColor)
-            } else {
-                borderColor.push(borders[i % borders.length])
-                backgroundColor.push(bg[i % bg.length])
-                i++
-            }
-        }
-
-        const config = <ChartConfiguration>{
-            type: "doughnut",
-            data: {
-                labels: Object.keys(data),
-                datasets: [
-                    {
-                        data: Object.values(data),
-                        backgroundColor,
-                        borderColor,
-                        borderWidth: 1,
-                        label: undefined,
-                    },
-                ],
-            },
-            options: {
-                plugins: {
-                    legend: {
-                        display: false,
-                    },
-                },
-            },
-        }
-        return new ChartJs(config)
-    }
-
     protected InnerConstructElement(): HTMLElement {
         const canvas = document.createElement("canvas")
         // A bit exceptional: we apply the styles before giving them to 'chartJS'

src/UI/BigComponents/StatisticsPanel.ts

@@ -1,5 +1,4 @@
 import { VariableUiElement } from "../Base/VariableUIElement"
-import Loading from "../Base/Loading"
 import Title from "../Base/Title"
 import TagRenderingChart from "./TagRenderingChart"
 import Combine from "../Base/Combine"
@@ -13,14 +12,7 @@ export default class StatisticsForLayerPanel extends VariableUiElement {
         super(
             elementsInview.features.stabilized(1000).map(
                 (features) => {
-                    if (features === undefined) {
-                        return new Loading("Loading data")
-                    }
-                    if (features.length === 0) {
-                        return new Combine(["No elements in view for layer ", layer.id]).SetClass(
-                            "block"
-                        )
-                    }
+
                     const els: BaseUIElement[] = []
                     const featuresForLayer = features
                     if (featuresForLayer.length === 0) {

src/UI/BigComponents/TagRenderingChart.ts

@@ -5,6 +5,7 @@ import Combine from "../Base/Combine"
 import { TagUtils } from "../../Logic/Tags/TagUtils"
 import { Utils } from "../../Utils"
 import { OsmFeature } from "../../Models/OsmFeature"
+import Title from "../Base/Title"
 
 export interface TagRenderingChartOptions {
     groupToOtherCutoff?: 3 | number
@@ -275,8 +276,13 @@ export default class TagRenderingChart extends Combine {
         }
 
         super([
-            options?.includeTitle ? tagRendering.question.Clone() ?? tagRendering.id : undefined,
-            chart,
+            new Title(
+                options?.includeTitle ? tagRendering.question ?? tagRendering.id : undefined
+            ),
+            new Combine([
+
+                chart
+            ]).SetClass("flex flex-col justify-center h-full")
         ])
 
         this.SetClass("block")

src/UI/SpecialVisualizations.ts

@@ -1,4 +1,3 @@
-import Combine from "./Base/Combine"
 import { FixedUiElement } from "./Base/FixedUiElement"
 import BaseUIElement from "./BaseUIElement"
 import { default as FeatureTitle } from "./Popup/Title.svelte"
@@ -12,11 +11,9 @@ import { VariableUiElement } from "./Base/VariableUIElement"
 import { Translation } from "./i18n/Translation"
 import Translations from "./i18n/Translations"
 import OpeningHoursVisualization from "./OpeningHours/OpeningHoursVisualization"
-import StatisticsPanel from "./BigComponents/StatisticsPanel"
 import AutoApplyButton from "./Popup/AutoApplyButton"
 import { LanguageElement } from "./Popup/LanguageElement/LanguageElement"
 import SvelteUIElement from "./Base/SvelteUIElement"
-import { BBoxFeatureSourceForLayer } from "../Logic/FeatureSource/Sources/TouchesBboxFeatureSource"
 import { Feature, LineString } from "geojson"
 import { GeoOperations } from "../Logic/GeoOperations"
 import LayerConfig from "../Models/ThemeConfig/LayerConfig"
@@ -45,6 +42,7 @@ import {
     WebAndCommunicationSpecialVisualisations
 } from "./SpecialVisualisations/WebAndCommunicationSpecialVisualisations"
 import ClearGPSHistory from "./BigComponents/ClearGPSHistory.svelte"
+import AllFeaturesStatistics from "./Statistics/AllFeaturesStatistics.svelte"
 
 export default class SpecialVisualizations {
     public static specialVisualizations: SpecialVisualization[] = SpecialVisualizations.initList()
@@ -407,27 +405,7 @@ export default class SpecialVisualizations {
                 docs: "Show general statistics about the elements currently in view. Intended to use on the `current_view`-layer",
                 args: [],
 
-                constr: (state) => {
-                    return new Combine(
-                        state.theme.layers
-                            .filter(
-                                (l) =>
-                                    l.name !== null &&
-                                    l.title &&
-                                    state.perLayer.get(l.id) !== undefined
-                            )
-                            .map(
-                                (l) => {
-                                    const fs = state.perLayer.get(l.id)
-                                    console.log(">>>", l.id, fs)
-                                    const bbox = state.mapProperties.bounds
-                                    const fsBboxed = new BBoxFeatureSourceForLayer(fs, bbox)
-                                    return new StatisticsPanel(fsBboxed)
-                                },
-                                [state.mapProperties.bounds]
-                            )
-                    )
-                },
+                constr: (state) => new SvelteUIElement(AllFeaturesStatistics, { state })
             },
 
             {

src/UI/Statistics/AllFeaturesStatistics.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import ThemeViewState from "../../Models/ThemeViewState"
+  import { Accordion } from "flowbite-svelte"
+  import LayerStatistics from "./LayerStatistics.svelte"
+
+  /**
+   * An element showing s
+   */
+  export let state: ThemeViewState
+  let layers = state.theme.layers.filter(l => l.isNormal())
+
+</script>
+
+<Accordion>
+
+  {#each layers as layer (layer.id)}
+    <LayerStatistics {state} {layer} />
+  {/each}
+</Accordion>

src/UI/Statistics/LayerStatistics.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  /**
+   * Statistics, based on the tagRendering, for a single layer
+   */
+  import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+  import Tr from "../Base/Tr.svelte"
+  import Loading from "../Base/Loading.svelte"
+  import ToSvelte from "../Base/ToSvelte.svelte"
+  import TagRenderingChart from "../BigComponents/TagRenderingChart"
+  import type { Feature } from "geojson"
+  import { AccordionItem } from "flowbite-svelte"
+  import ThemeViewState from "../../Models/ThemeViewState"
+  import DefaultIcon from "../Map/DefaultIcon.svelte"
+
+  export let layer: LayerConfig
+  export let state: ThemeViewState
+  let bbox = state.mapProperties.bounds
+  let elements: Feature[] = state.perLayer.get(layer.id).GetFeaturesWithin($bbox)
+  $: elements = state.perLayer.get(layer.id).GetFeaturesWithin($bbox)
+
+  let trs = layer.tagRenderings.filter(tr => tr.question)
+</script>
+
+<AccordionItem paddingDefault="p-2" inactiveClass="text-black" defaultClass="w-full flex-grow justify-start">
+  <div slot="header" class="flex items-center gap-x-2">
+    <div class="w-8 h-8 inline-block">
+      <DefaultIcon {layer} />
+    </div>
+    <Tr t={layer.name} />
+    ({elements.length} elements in view)
+  </div>
+
+  {#if elements === undefined}
+    <Loading />
+  {:else if elements.length === 0}
+    No features in view
+  {:else}
+    <div class="flex flex-wrap w-full gap-y-4 gap-x-4">
+
+      {#each trs as tr}
+        <ToSvelte construct={() => new TagRenderingChart(elements, tr, {
+                            chartclasses: "w-full self-center",includeTitle: true
+                        }).SetClass(tr.multiAnswer ? "w-128": "w-96") } />
+      {/each}
+    </div>
+  {/if}
+</AccordionItem>