Show a full-screen graph on click

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,17 +81,14 @@ export default class TagRenderingChart extends Combine {
                     const mapping = mappings[i];
                     if (TagUtils.MatchesMultiAnswer( mapping.if, props)) {
                         categoryCounts[i]++
-                        if(categoryCounts[i] > 3){
                         foundMatchingMapping = true
                     }
                 }
             }
-            }
             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++
                 }
@@ -107,7 +106,7 @@ 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{
@@ -115,6 +114,7 @@ export default class TagRenderingChart extends Combine {
             }
         }
         
+
         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]
@@ -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 = <ChartConfiguration>{
             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")

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([

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;
 }