From 465497e6ca8638275002555ca325b82a95f00516 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Wed, 20 Jul 2022 14:06:39 +0200 Subject: [PATCH] Finish dashboard mode --- UI/BigComponents/TagRenderingChart.ts | 70 +++++++++++++++++++-------- UI/DashboardGui.ts | 8 ++- 2 files changed, 56 insertions(+), 22 deletions(-) diff --git a/UI/BigComponents/TagRenderingChart.ts b/UI/BigComponents/TagRenderingChart.ts index 54d0d861c..f877688c3 100644 --- a/UI/BigComponents/TagRenderingChart.ts +++ b/UI/BigComponents/TagRenderingChart.ts @@ -3,6 +3,7 @@ import {OsmFeature} from "../../Models/OsmFeature"; import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig"; import {ChartConfiguration} from 'chart.js'; import Combine from "../Base/Combine"; +import {TagUtils} from "../../Logic/Tags/TagUtils"; export default class TagRenderingChart extends Combine { @@ -47,49 +48,78 @@ export default class TagRenderingChart extends Combine { return; } let unknownCount = 0; - let categoryCounts = mappings.map(_ => 0) - let otherCount = 0; + const categoryCounts = mappings.map(_ => 0) + const otherCounts: Record = {} let notApplicable = 0; + let barchartMode = tagRendering.multiAnswer; for (const feature of features) { const props = feature.properties - if(tagRendering.condition !== undefined && !tagRendering.condition.matchesProperties(props)){ + if (tagRendering.condition !== undefined && !tagRendering.condition.matchesProperties(props)) { notApplicable++; continue; } - + if (!tagRendering.IsKnown(props)) { unknownCount++; continue; } let foundMatchingMapping = false; - for (let i = 0; i < mappings.length; i++) { - const mapping = mappings[i]; - if (mapping.if.matchesProperties(props)) { - categoryCounts[i]++ - foundMatchingMapping = true - if (!tagRendering.multiAnswer) { + if (!tagRendering.multiAnswer) { + for (let i = 0; i < mappings.length; i++) { + const mapping = mappings[i]; + if (mapping.if.matchesProperties(props)) { + categoryCounts[i]++ + foundMatchingMapping = true break; } } + } else { + for (let i = 0; i < mappings.length; i++) { + const mapping = mappings[i]; + if (TagUtils.MatchesMultiAnswer( mapping.if, props)) { + categoryCounts[i]++ + if(categoryCounts[i] > 3){ + foundMatchingMapping = true + } + } + } } - if (tagRendering.freeform?.key !== undefined && props[tagRendering.freeform.key] !== undefined) { - otherCount++ - } else if (!foundMatchingMapping) { - unknownCount++ + if (!foundMatchingMapping) { + if (tagRendering.freeform?.key !== undefined && props[tagRendering.freeform.key] !== undefined) { + const otherValue = props[tagRendering.freeform.key] + otherCounts[otherValue] = (otherCounts[otherValue] ?? 0) + 1 + barchartMode = true ; + } else { + unknownCount++ + } } } if (unknownCount + notApplicable === features.length) { - console.log("Totals:", features.length+" elements","tr:", tagRendering, "other",otherCount, "unkown",unknownCount, "na", notApplicable) super(["No relevant data for ", tagRendering.id]) return } - const labels = ["Unknown", "Other", "Not applicable", ...mappings?.map(m => m.then.txt) ?? []] - const data = [unknownCount, otherCount, notApplicable,...categoryCounts] + let otherGrouped = 0; + const otherLabels: string[] = [] + const otherData : number[] = [] + for (const v in otherCounts) { + const count = otherCounts[v] + if(count > 2){ + otherLabels.push(v) + otherData.push(otherCounts[v]) + }else{ + otherGrouped++; + } + } + + const labels = ["Unknown", "Other", "Not applicable", ...mappings?.map(m => m.then.txt) ?? [], ...otherLabels] + const data = [unknownCount, otherGrouped, notApplicable, ...categoryCounts, ... otherData] const borderColor = [TagRenderingChart.unkownBorderColor, TagRenderingChart.otherBorderColor, TagRenderingChart.notApplicableBorderColor] const backgroundColor = [TagRenderingChart.unkownColor, TagRenderingChart.otherColor, TagRenderingChart.notApplicableColor] + + while (borderColor.length < data.length) { borderColor.push(...TagRenderingChart.borderColors) backgroundColor.push(...TagRenderingChart.backgroundColors) @@ -108,7 +138,7 @@ export default class TagRenderingChart extends Combine { console.log(tagRendering) } const config = { - type: tagRendering.multiAnswer ? 'bar' : 'doughnut', + type: barchartMode ? 'bar' : 'doughnut', data: { labels, datasets: [{ @@ -122,7 +152,7 @@ export default class TagRenderingChart extends Combine { options: { plugins: { legend: { - display: !tagRendering.multiAnswer + display: !barchartMode } } } @@ -133,7 +163,7 @@ export default class TagRenderingChart extends Combine { if (options.chartstyle !== undefined) { chart.SetStyle(options.chartstyle) } - + super([ tagRendering.question ?? tagRendering.id, diff --git a/UI/DashboardGui.ts b/UI/DashboardGui.ts index 1256c6fde..05dda2770 100644 --- a/UI/DashboardGui.ts +++ b/UI/DashboardGui.ts @@ -28,6 +28,7 @@ import Constants from "../Models/Constants"; import SimpleAddUI from "./BigComponents/SimpleAddUI"; import TagRenderingChart from "./BigComponents/TagRenderingChart"; import Loading from "./Base/Loading"; +import BackToIndex from "./BigComponents/BackToIndex"; export default class DashboardGui { @@ -95,6 +96,7 @@ export default class DashboardGui { private visibleElements(map: MinimapObj & BaseUIElement, layers: Record): { distance: number, center: [number, number], element: OsmFeature, layer: LayerConfig }[] { const bbox = map.bounds.data if (bbox === undefined) { + console.warn("No bbox") return undefined } const location = map.location.data; @@ -278,14 +280,16 @@ export default class DashboardGui { new VariableUiElement(elementsInview.map(elements => this.mainElementsView(elements).SetClass("block m-2"))) .SetClass("block shrink-2 overflow-x-auto h-full border-2 border-subtle rounded-lg"), this.allDocumentationButtons(), - new LanguagePicker(Object.keys(state.layoutToUse.title.translations)).SetClass("mt-2") + new LanguagePicker(Object.keys(state.layoutToUse.title.translations)).SetClass("mt-2"), + new BackToIndex() ]).SetClass("w-1/2 m-4 flex flex-col shrink-0 grow-0"), new VariableUiElement(this.currentView.map(({title, contents}) => { return new Combine([ new Title(Translations.W(title), 2).SetClass("shrink-0 border-b-4 border-subtle"), Translations.W(contents).SetClass("shrink-2 overflow-y-auto block") ]).SetClass("flex flex-col h-full") - })).SetClass("w-1/2 m-4 p-2 border-2 border-subtle rounded-xl m-4 ml-0 mr-8 shrink-0 grow-0") + })).SetClass("w-1/2 m-4 p-2 border-2 border-subtle rounded-xl m-4 ml-0 mr-8 shrink-0 grow-0"), + ]).SetClass("flex h-full") .AttachTo("leafletDiv")