show bar chart instead of map on small screens

Author: pierres

src/components/country-map.scss

@@ -12,14 +12,17 @@
 
 country-map {
     display: block;
-    // Reserve space before svgmap loads to avoid layout shift
-    aspect-ratio: auto 2 / 1;
-    // 550px: comfortable max on large screens (leaves room for navbar, heading, footer on 900px viewports)
-    // 65dvh: viewport-relative cap so the map never causes vertical scrolling
-    max-height: min(550px, 65dvh);
 
-    // Propagate max-height into svgmap's padding-based layout
-    .svgMap-map-wrapper {
-        max-height: inherit;
+    @media (min-width: 769px) {
+        // Reserve space before svgmap loads to avoid layout shift
+        aspect-ratio: auto 2 / 1;
+        // 550px: comfortable max on large screens (leaves room for navbar, heading, footer on 900px viewports)
+        // 65dvh: viewport-relative cap so the map never causes vertical scrolling
+        max-height: min(550px, 65dvh);
+
+        // Propagate max-height into svgmap's padding-based layout
+        .svgMap-map-wrapper {
+            max-height: inherit;
+        }
     }
 }

src/components/country-map.ts

@@ -21,11 +21,77 @@ class CountryMap extends HTMLElement {
             return;
         }
 
-        const container = document.createElement("div");
-        container.id = `countries-map-${Math.random().toString(36).slice(2)}`;
-        this.appendChild(container);
+        const isSmallScreen = window.matchMedia("(max-width: 768px)").matches;
 
-        this.renderMap(container.id, values);
+        if (isSmallScreen) {
+            this.renderBarChart(values);
+        } else {
+            const container = document.createElement("div");
+            container.id = `countries-map-${Math.random().toString(36).slice(2)}`;
+            this.appendChild(container);
+            this.renderMap(container.id, values);
+        }
+    }
+
+    private async renderBarChart(
+        values: Record<string, { popularity: number }>,
+    ) {
+        const sorted = Object.entries(values).sort(
+            ([, a], [, b]) => b.popularity - a.popularity,
+        );
+
+        const regionNames = new Intl.DisplayNames(["en"], { type: "region" });
+        const labels = sorted.map(([code]) => regionNames.of(code) ?? code);
+        const data = sorted.map(([, v]) => v.popularity);
+
+        const { Chart, BarElement, BarController, CategoryScale, LinearScale } =
+            await import("chart.js");
+
+        Chart.register(BarElement, BarController, CategoryScale, LinearScale);
+
+        const canvas = document.createElement("canvas");
+        canvas.style.height = `${sorted.length * 25}px`;
+        this.appendChild(canvas);
+
+        const style = getComputedStyle(document.documentElement);
+        const textColor = style.getPropertyValue("--bs-body-color");
+        const gridColor = style.getPropertyValue("--bs-border-color");
+        const primaryColor = style.getPropertyValue("--bs-primary");
+
+        new Chart(canvas, {
+            type: "bar",
+            data: {
+                labels,
+                datasets: [
+                    {
+                        data,
+                        backgroundColor: primaryColor,
+                    },
+                ],
+            },
+            options: {
+                indexAxis: "y",
+                animation: false,
+                maintainAspectRatio: false,
+                events: [],
+                plugins: {
+                    legend: { display: false },
+                },
+                scales: {
+                    x: {
+                        min: 0,
+                        border: { color: gridColor },
+                        grid: { color: gridColor },
+                        ticks: { color: textColor },
+                    },
+                    y: {
+                        border: { color: gridColor },
+                        grid: { display: false },
+                        ticks: { color: textColor },
+                    },
+                },
+            },
+        });
     }
 
     private async renderMap(