Fix country chart

Astylodon · Feb 5, 2025 · e933a04 · e933a04
1 parent b54907f
commit e933a04
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 19 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,5 +3,6 @@ vendor/
 *.mmdb
 node_modules/
 public/shika.js
+public/shika.js.map
 public/build
 .env
diff --git a/assets/js/graphs.js b/assets/js/graphs.js
@@ -1,7 +1,8 @@
 import { Chart, BarController, PieController, BarElement, ArcElement, CategoryScale, LinearScale, Colors, Tooltip, Legend } from "chart.js"
-import { ChoroplethController, ProjectionScale, ColorScale, GeoFeature } from 'chartjs-chart-geo';
+import { ChoroplethController, ProjectionScale, ColorScale, GeoFeature, topojson } from 'chartjs-chart-geo';
 
 // Bundle optimization
+
 Chart.register(BarController, PieController, ChoroplethController, BarElement, ArcElement, CategoryScale, LinearScale, ProjectionScale, ColorScale, GeoFeature, Colors, Tooltip, Legend)
 
 // Current charts
@@ -25,15 +26,14 @@ async function displayData(site, time) {
     const devices = await fetch(`/api/sites/${site}/device-types?from=${from}`).then(x => x.json())
     const countries = await fetch(`/api/sites/${site}/countries?from=${from}`).then(x => x.json())
 
-    console.log(countries);
-
     // Display the charts
+    const region = new Intl.DisplayNames(['en'], { type: 'region' })
     charts.push(displayLineChart("pages", pages.map(x => [x.path, x.count])))
     charts.push(displayLineChart("referrers", referrers.map(x => [x.referrer, x.count])))
     charts.push(displayPieChart("browsers", browsers.map(x => [x.browser, x.count])))
     charts.push(displayPieChart("systems", systems.map(x => [x.operating_system, x.count])))
     charts.push(displayPieChart("devices", devices.map(x => [x.device_type, x.count])))
-    charts.push(displayCountryChart("countries", countries.map(x => [x.country, x.count])))
+    displayCountryChart("countries", Object.fromEntries(countries.map(x => [ region.of(x.country), x.count ])), charts)
 }
 
 function displayChartInternal(type, options, id, values) {
@@ -58,19 +58,35 @@ function displayChartInternal(type, options, id, values) {
     return chart
 }
 
-function displayCountryChart(id, values) {
-    const chart = new Chart(document.getElementById(id).getContext("2d"), {
-        type: 'choropleth',
-        data: {
-            labels: values.map(x => x[0]),
-            datasets: [{
-                label: 'Visits',
-                data: values.map(x => x[1]),
-            }]
-        },
-        options: {}
+function displayCountryChart(id, values, charts) {
+
+    fetch('https://unpkg.com/world-atlas/countries-50m.json').then((r) => r.json()).then((data) => {
+        const countries = topojson.feature(data, data.objects.countries).features;
+
+        const chart = new Chart(document.getElementById(id).getContext("2d"), {
+            type: 'choropleth',
+            data: {
+                labels: countries.map((d) => d.properties.name),
+                datasets: [{
+                label: 'Countries',
+                data: countries.map((d) => {
+                        const country = d.properties.name;
+                        return ({feature: d, value: values[country] ? values[country] : 0})
+                    }),
+                }]
+            },
+            options: {
+                scales: {
+                    projection: {
+                        axis: 'x',
+                        projection: 'equalEarth'
+                    }
+                }
+            }
+        });
+
+        charts.push(chart);
     });
-    return chart;
 }
 
 function displayLineChart(id, values) {

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "shika",
   "scripts": {
     "build": "vite build && npm run script",
-    "script": "esbuild scripts/src/shika.js --minify --format=iife --outfile=public/shika.js"
+    "script": "esbuild scripts/src/shika.js --sourcemap --minify --format=iife --outfile=public/shika.js"
   },
   "dependencies": {
     "bootstrap": "^5.3.2",

diff --git a/views/dashboard/index.html.twig b/views/dashboard/index.html.twig
@@ -66,9 +66,7 @@
                 </div>
             </div>
         </div>
-    </div>
 
-    <div class="row mt-2">
         <div class="col-lg-6 mb-2">
             <div class="card">
                 <div class="card-body">
@@ -78,7 +76,9 @@
                 </div>
             </div>
         </div>
+    </div>
 
+    <div class="row mt-2">
         <div class="col-lg-6 mb-2">
             <div class="card">
                 <div class="card-body">