From f5658e7b7846317a5ff2bdb1daa3f0b5027ae567 Mon Sep 17 00:00:00 2001
From: Andrea <andrea@avris.it>
Date: Mon, 3 Jan 2022 17:45:18 +0100
Subject: [PATCH] [admin] better profilesByLocale chart

---
 components/Chart.vue | 14 ++++++++++++--
 routes/admin.vue     |  9 ++++++++-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/components/Chart.vue b/components/Chart.vue
index 8726d236..ef8c3bf3 100644
--- a/components/Chart.vue
+++ b/components/Chart.vue
@@ -11,13 +11,20 @@
             data: { required: true },
             cumulative: { type: Boolean },
             type: {'default': 'line'},
+            options: {'default': () => { return {
+                responsive: true,
+                interaction: {
+                    intersect: false,
+                    mode: 'index',
+                },
+            }; }},
         },
         async created() {
         },
         async mounted() {
             if (!process.client) { return; }
 
-            await this.$loadScript('charts', 'https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js');
+            await this.$loadScript('charts', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js');
             this.drawChart();
         },
         methods: {
@@ -35,11 +42,14 @@
                         labels: Object.keys(this.data),
                         datasets: [{
                             label: this.label,
-                            data: this.cumulative ? this.accumulate(Object.values(this.data)) : Object.values(this.data),
+                            data: this.cumulative
+                                ? this.accumulate(Object.values(this.data))
+                                : Object.values(this.data),
                             fill: false,
                             borderColor: '#C71585',
                         }],
                     },
+                    options: this.options,
                 });
             },
             accumulate(values) {
diff --git a/routes/admin.vue b/routes/admin.vue
index 9e8b97f5..4aac58b4 100644
--- a/routes/admin.vue
+++ b/routes/admin.vue
@@ -94,7 +94,14 @@
 
         <ChartSet name="users" :data="stats.users.chart" init="cumulative"/>
 
-        <Chart label="number of profiles by locale" :data="profilesByLocale" type="bar"/>
+        <Chart label="number of profiles by locale" :data="profilesByLocale" type="bar" :options="{
+            indexAxis: 'y',
+            responsive: true,
+            interaction: {
+                intersect: false,
+                mode: 'y',
+            },
+        }"/>
 
         <section>
             <Icon v="id-card"/>