Improve chart tooltips slightly

Closes #28 though they're still not perfect at all
Botffy · Jul 29, 2021 · 28f5d24 · 28f5d24
1 parent b45ca60
commit 28f5d24
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/src/Bikes.vue b/src/Bikes.vue
@@ -123,6 +123,17 @@ export default Vue.extend({
             text: 'Bicajok'
           }
         },
+        xAxis: {
+          title: {
+            text: 'A bicajjal megtett utak száma'
+          }
+        },
+        tooltip: {
+          headerFormat: '<span style="font-size:10px">{point.key} út</span><table>',
+          pointFormat: '<tr><td style="padding:0"><b>{point.y:.0f} bicaj</b></td></tr>',
+          footerFormat: '</table>',
+          useHTML: true
+        },
         credits: {
           enabled: false
         },
@@ -163,7 +174,16 @@ export default Vue.extend({
         xAxis: {
           categories: this.bikeByTimeCategories,
           min: 0,
-          max: this.bikeByTimeCategories.length -1
+          max: this.bikeByTimeCategories.length - 1,
+          title: {
+            text: 'A bicajjal töltött percek'
+          }
+        },
+        tooltip: {
+          headerFormat: '<span style="font-size:10px">{point.key} perc</span><table>',
+          pointFormat: '<tr><td style="padding:0"><b>{point.y:.0f} bicaj</b></td></tr>',
+          footerFormat: '</table>',
+          useHTML: true
         },
         credits: {
           enabled: false

diff --git a/src/Stations.vue b/src/Stations.vue
@@ -132,9 +132,20 @@ export default Vue.extend({
         }],
         yAxis: {
           title: {
-            text: null
+            text: 'Állomás'
           }
         },
+        xAxis: {
+          title: {
+            text: 'Látogatások száma'
+          }
+        },
+        tooltip: {
+          headerFormat: '<span style="font-size:10px">{point.key} látogatás</span><table>',
+          pointFormat: '<tr><td style="padding:0"><b>{point.y:.0f} állomás</b></td></tr>',
+          footerFormat: '</table>',
+          useHTML: true
+        },
         credits: {
           enabled: false
         },

diff --git a/src/TimePage.vue b/src/TimePage.vue
@@ -208,7 +208,7 @@ export default Vue.extend({
         },
         series: [{
           type: 'pie',
-          name: 'Utak',
+          name: 'Út',
           data: this.statsByWeekdays
         }],
         credits: {
@@ -238,13 +238,16 @@ export default Vue.extend({
         }],
         yAxis: {
           title: {
-            text: 'Utak'
+            text: 'Utak száma'
           }
         },
         xAxis: {
           categories: new Array<number>(24).fill(0).map((val, idx) => idx),
           min: 0,
-          max: 23
+          max: 23,
+          title: {
+            text: 'Óra'
+          }
         },
         tooltip: {
           headerFormat: '<span style="font-size:10px">{point.key}:00</span><table>',