Fixed tooltip title for radar chart. Ref: chartjs/Chart.js#6890

lucka-me · May 26, 2020 · 53aea0a · 53aea0a
1 parent 3b161f0
commit 53aea0a
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@ TBA
 ### Fixed
 - Map doesn't update after saving portal details
 - Card doesn't follow filter after saving the portal details
+- Tooltips of radar chart display value as title
 ```
 
 ```markdown

diff --git a/index.html b/index.html
@@ -63,7 +63,7 @@
 
         <div class="mdc-top-app-bar--fixed-adjust"></div>
 
-        <div class="mdc-linear-progress" id="progressBar" hidden>
+        <div class="mdc-linear-progress" id="progress-bar" hidden>
             <div class="mdc-linear-progress__buffering-dots"></div>
             <div class="mdc-linear-progress__buffer"></div>
             <div class="mdc-linear-progress__bar mdc-linear"></div>

diff --git a/lib/dashboard.js b/lib/dashboard.js
@@ -3,7 +3,7 @@ const dashboard = {
         map: {
             init: () => mapKit.load(),
             update: () => mapKit.updateData(),
-            updateStyle: (dark) => { },
+            updateStyle: () => { },
             setVisible: (visible) => visible,
         },
         filter: {
@@ -214,7 +214,7 @@ const dashboard = {
                                 },
                             }],
                         },
-                        tooltips: { mode: 'index', },
+                        tooltips: { mode: 'x', },
                         maintainAspectRatio: false,
                     }
                 });
@@ -284,16 +284,13 @@ const dashboard = {
                         datasets: [{
                             data: [],
                             borderColor: style.getPropertyValue('--mdc-theme-primary'),
+                            pointHoverBorderColor: style.getPropertyValue('--mdc-theme-primary'),
                         }],
                     },
                     options: {
-                        legend: {
-                            display: false,
-                        },
+                        legend: { display: false, },
                         scales: {
-                            yAxes: [{
-                                ticks: { beginAtZero: true, },
-                            }],
+                            yAxes: [{ ticks: { beginAtZero: true, }, }],
                             xAxes: [{
                                 scaleLabel: {
                                     display: true,
@@ -349,9 +346,7 @@ const dashboard = {
                         card.textReviews.innerHTML = `${stats.review}`;
                         card.textSubtitle.innerHTML = `${stats.review < 2 ? 'Review' : 'Reviews'} for ${stats.portal} ${stats.portal < 2 ? 'Portal' : 'Portals'}`;
                     },
-                    updateStyle: () => {
-
-                    },
+                    updateStyle: () => { },
                     setVisible: (visible) => document.querySelector('#card-bs-basic').hidden = !visible,
                     onUpdate: () => process.updateBsData(),
                 },
@@ -380,9 +375,7 @@ const dashboard = {
                                 scale: {
                                     ticks: {
                                         display: false,
-                                        min: 1,
-                                        max: 5,
-                                        stepSize: 1,
+                                        min: 1, max: 5, stepSize: 1,
                                     },
                                     angleLines: {
                                         color: style.getPropertyValue('--mdc-theme-text-disabled-on-light'),
@@ -399,7 +392,7 @@ const dashboard = {
                         const data = [];
                         for (const rate of Object.keys(value.string.bs.rate)) {
                             const avg = stats.rate[rate].reduce((pre, cur) => pre + cur, 0) / stats.rate[rate].length;
-                            data.push(avg);
+                            data.push(parseFloat(avg.toFixed(2)));
                         }
                         const card = dashboard.card.bs.card.rates;
                         card.chart.data.datasets[0].data = data;
@@ -470,6 +463,12 @@ const dashboard = {
     },
     init() {
         Chart.defaults.global.legend.labels.boxWidth = 10;
+        // Fix for #6890, should remove when upgrade to 3.0
+        Chart.defaults.radar.tooltips = {
+            callbacks: {
+                title: (items, data) => data.labels[items[0].index],
+            }
+        }
         for (const card of Object.keys(dashboard.card)) {
             dashboard.card[card].init();
         }

diff --git a/lib/ui.js b/lib/ui.js
@@ -3,14 +3,12 @@ const ui = {
         enabled : false,
         onMediaQueryChanged: (mediaQueryList) => {
             ui.dark.enabled = mediaQueryList.matches;
-            const style = mediaQueryList.matches ? value.string.mapbox.style.dark : value.string.mapbox.style.default;
+            const style = value.string.mapbox.style[ui.dark.enabled ? 'dark' : 'default'];
             if (mapKit.isLoaded()) {
                 mapKit.ctrl.setStyle(style);
-                mapKit.ctrl.once('render', () => {
-                    mapKit.updateData();
-                });
+                mapKit.ctrl.once('render', () => mapKit.updateData());
             }
-            dashboard.updateStyle(mediaQueryList.matches);
+            dashboard.updateStyle();
             if (dialogKit.details.map.ctrl) dialogKit.details.map.ctrl.setStyle(style);
         },
     },
@@ -96,7 +94,7 @@ const ui = {
             ui.appBar.button.menu.root_.hidden = false;
         },
     },
-    progressBar: new mdc.linearProgress.MDCLinearProgress(document.querySelector('#progressBar')),
+    progressBar: new mdc.linearProgress.MDCLinearProgress(document.querySelector('#progress-bar')),
     cardList: document.getElementById('card-list'),
     init: () => {
         const darkMediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');