improve tooltips

CUAHSI · May 16, 2024 · ef13411 · ef13411
1 parent 499ad88
commit ef13411
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 1 deletion.
diff --git a/frontend/src/_helpers/charts/plugins.js b/frontend/src/_helpers/charts/plugins.js
@@ -10,4 +10,8 @@ const customCanvasBackgroundColor = {
   }
 }
 
-export { customCanvasBackgroundColor }
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+export { customCanvasBackgroundColor, capitalizeFirstLetter }
diff --git a/frontend/src/components/LineChart.vue b/frontend/src/components/LineChart.vue
@@ -56,6 +56,7 @@ import { mdiDownloadBox, mdiFileDelimited, mdiCodeJson, mdiMagnifyMinusOutline }
 import { downloadCsv, downloadFeatureJson } from '../_helpers/hydroCron';
 import { useDisplay } from 'vuetify'
 import zoomPlugin from 'chartjs-plugin-zoom';
+import { capitalizeFirstLetter } from '@/_helpers/charts/plugins'
 
 const { lgAndUp } = useDisplay()
 
@@ -120,6 +121,26 @@ const options = {
         mode: 'xy',
       }
     },
+    tooltip: {
+      // https://www.chartjs.org/docs/latest/configuration/tooltip.html
+      callbacks: {
+        label: function (context) {
+          // var label = context.dataset.label || '';
+          let selectedVariable = props.chosenVariable
+          let label = `${capitalizeFirstLetter(selectedVariable.abbreviation)}`
+          if (label) {
+            label += ': ';
+          }
+          if (context.parsed.y !== null) {
+            // label += new Intl.NumberFormat('en-US', { style: 'decimal', maximumFractionDigits: 5 }).format(context.parsed.y);
+            label += context.parsed.y
+          }
+          label += ` ${selectedVariable.unit}`
+          return label;
+        }
+      },
+      displayColors: false,
+    }
   },
   scales: {
     x: {

diff --git a/frontend/src/components/NodeChart.vue b/frontend/src/components/NodeChart.vue
@@ -50,6 +50,7 @@ import { mdiDownloadBox, mdiFileDelimited, mdiCodeJson, mdiMagnifyMinusOutline }
 import { downloadMultiNodesCsv, downloadMultiNodesJson } from '../_helpers/hydroCron';
 import { useDisplay } from 'vuetify'
 import zoomPlugin from 'chartjs-plugin-zoom';
+import { capitalizeFirstLetter } from '@/_helpers/charts/plugins'
 
 const { lgAndUp } = useDisplay()
 
@@ -110,6 +111,29 @@ const options = {
         mode: 'xy',
       }
     },
+    tooltip: {
+      // https://www.chartjs.org/docs/latest/configuration/tooltip.html
+      callbacks: {
+        label: function (context) {
+          // var label = context.dataset.label || '';
+          let selectedVariable = props.chosenVariable
+          let label = `${capitalizeFirstLetter(selectedVariable.abbreviation)}`
+          if (label) {
+            label += ': ';
+          }
+          if (context.parsed.y !== null) {
+            // label += new Intl.NumberFormat('en-US', { style: 'decimal', maximumFractionDigits: 5 }).format(context.parsed.y);
+            label += context.parsed.y
+          }
+          label += ` ${selectedVariable.unit}`
+          return label;
+        },
+        title: function (context) {
+          return `Distance: ${context[0].parsed.x} m`
+        },
+      },
+      displayColors: false,
+    },
   },
   scales: {
     x: {