Refactoring: Histogram now uses chartJS, simplify code

src/UI/Base/ChartJsUtils.ts

@@ -3,8 +3,10 @@ import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig"
 import { TagUtils } from "../../Logic/Tags/TagUtils"
 import { OsmFeature } from "../../Models/OsmFeature"
 import { Utils } from "../../Utils"
+import { labels } from "wikibase-sdk/dist/src/helpers/simplify"
+import { isInteger } from "tailwind-merge/dist/lib/validators"
 
-export class ChartJsColours {
+class ChartJsColours {
     public static readonly unknownColor = "rgba(128, 128, 128, 0.2)"
     public static readonly unknownBorderColor = "rgba(128, 128, 128, 0.2)"
 
@@ -205,7 +207,7 @@ export class ChartJsUtils {
                 hideUnknown?: boolean
                 hideNotApplicable?: boolean
             }
-    ) {
+    ): ChartConfiguration {
             const { labels, data } = ChartJsUtils.extractDataAndLabels(tr, features, {
                 sort: true,
                 groupToOtherCutoff: options?.groupToOtherCutoff,
@@ -336,7 +338,7 @@ export class ChartJsUtils {
      * @returns undefined if not enough parameters
      */
     static createConfigForTagRendering<T extends { properties: Record<string, string> }>(tagRendering: TagRenderingConfig, features: T[],
-                                       options?: TagRenderingChartOptions){
+                                       options?: TagRenderingChartOptions): ChartConfiguration{
         if (tagRendering.mappings?.length === 0 && tagRendering.freeform?.key === undefined) {
             return undefined
         }
@@ -380,7 +382,7 @@ export class ChartJsUtils {
             barchartMode = true
         }
 
-        const config = <ChartConfiguration>{
+        return <ChartConfiguration>{
             type: options?.chartType ?? (barchartMode ? "bar" : "pie"),
             data: {
                 labels,
@@ -402,7 +404,49 @@ export class ChartJsUtils {
                 },
             },
         }
-        return config
 
     }
+
+    static createHistogramConfig(keys: string[], counts: Map<string, number>){
+
+        const borderColor = [
+        ]
+        const backgroundColor = [
+        ]
+
+        while (borderColor.length < keys.length) {
+            borderColor.push(...ChartJsColours.borderColors)
+            backgroundColor.push(...ChartJsColours.backgroundColors)
+        }
+
+        return  <ChartConfiguration>{
+            type: "bar",
+            data: {
+                labels: keys,
+                datasets: [
+                    {
+                        data: keys.map((k) => counts.get(k)),
+                        backgroundColor,
+                        borderColor,
+                        borderWidth: 1,
+                        label: undefined,
+                    },
+                ],
+            },
+            options: { scales: {
+                    y: {
+                        ticks: {
+                            stepSize: 1,
+                            callback: (value) =>Number(value).toFixed(0),
+                        },
+                    },
+                },
+                plugins: {
+                    legend: {
+                        display: false,
+                    },
+                },
+            },
+        }
+    }
 }