diff --git a/UI/BigComponents/TagRenderingChart.ts b/UI/BigComponents/TagRenderingChart.ts index e7ef2060a..f88cce188 100644 --- a/UI/BigComponents/TagRenderingChart.ts +++ b/UI/BigComponents/TagRenderingChart.ts @@ -39,7 +39,9 @@ export default class TagRenderingChart extends Combine { */ constructor(features: OsmFeature[], tagRendering: TagRenderingConfig, options?: { chartclasses?: string, - chartstyle?: string + chartstyle?: string, + includeTitle?: boolean, + groupToOtherCutoff?: 3 | number }) { const mappings = tagRendering.mappings ?? [] @@ -79,9 +81,7 @@ export default class TagRenderingChart extends Combine { const mapping = mappings[i]; if (TagUtils.MatchesMultiAnswer( mapping.if, props)) { categoryCounts[i]++ - if(categoryCounts[i] > 3){ - foundMatchingMapping = true - } + foundMatchingMapping = true } } } @@ -89,7 +89,6 @@ export default class TagRenderingChart extends Combine { 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++ } @@ -107,13 +106,14 @@ export default class TagRenderingChart extends Combine { const otherData : number[] = [] for (const v in otherCounts) { const count = otherCounts[v] - if(count > 2){ + if(count >= (options.groupToOtherCutoff ?? 3)){ 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] @@ -136,9 +136,10 @@ export default class TagRenderingChart extends Combine { } } - if (tagRendering.id === undefined) { - console.log(tagRendering) + if(labels.length > 9){ + barchartMode = true; } + const config = { type: barchartMode ? 'bar' : 'doughnut', data: { @@ -168,7 +169,7 @@ export default class TagRenderingChart extends Combine { super([ - tagRendering.question ?? tagRendering.id, + options?.includeTitle ? (tagRendering.question.Clone() ?? tagRendering.id) : undefined, chart]) this.SetClass("block") diff --git a/UI/DashboardGui.ts b/UI/DashboardGui.ts index 600783c56..1e3eef507 100644 --- a/UI/DashboardGui.ts +++ b/UI/DashboardGui.ts @@ -29,6 +29,7 @@ import SimpleAddUI from "./BigComponents/SimpleAddUI"; import TagRenderingChart from "./BigComponents/TagRenderingChart"; import Loading from "./Base/Loading"; import BackToIndex from "./BigComponents/BackToIndex"; +import Locale from "./i18n/Locale"; export default class DashboardGui { @@ -128,7 +129,7 @@ export default class DashboardGui { continue } const activeFilters: FilterState[] = Array.from(filtered.appliedFilters.data.values()); - if (activeFilters.some(filter => !filter?.currentFilter?.matchesProperties(element.properties))) { + if (!activeFilters.every(filter => filter?.currentFilter === undefined || filter?.currentFilter?.matchesProperties(element.properties))) { continue } const center = GeoOperations.centerpointCoordinates(element); @@ -257,14 +258,33 @@ export default class DashboardGui { for (const tagRendering of layer.tagRenderings) { const chart = new TagRenderingChart(featuresForLayer, tagRendering, { chartclasses: "w-full", - chartstyle: "height: 60rem" + chartstyle: "height: 60rem", + includeTitle: true }) + const full = new Lazy(() => + new TagRenderingChart(featuresForLayer, tagRendering, { + chartstyle: "max-height: calc(100vh - 10rem)", + groupToOtherCutoff: 0 + }) + ) + chart.onClick(() => { + const current = self.currentView.data + full.onClick(() => { + self.currentView.setData(current) + }) + self.currentView.setData( + { + title: new Title(tagRendering.question.Clone() ?? tagRendering.id), + contents: full + }) + } + ) layerStats.push(chart.SetClass("w-full lg:w-1/3")) } els.push(new Combine(layerStats).SetClass("flex flex-wrap")) } return new Combine(els) - })) + }, [Locale.language])) new Combine([ diff --git a/css/index-tailwind-output.css b/css/index-tailwind-output.css index b90fea279..7cf5871e5 100644 --- a/css/index-tailwind-output.css +++ b/css/index-tailwind-output.css @@ -1110,6 +1110,10 @@ video { height: 12rem; } +.max-h-screen { + max-height: 100vh; +} + .max-h-7 { max-height: 1.75rem; }