From 2005064b4121271d38fbc6d850014d2fa5c97d0e Mon Sep 17 00:00:00 2001
From: Pithon Kabiro <pithon.kabiro@hft-stuttgart.de>
Date: Tue, 24 Aug 2021 13:32:52 +0200
Subject: [PATCH] Edit tooltip for scatter plot

---
 public/js/appChart.js | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/public/js/appChart.js b/public/js/appChart.js
index 3afec14..2cb42c7 100644
--- a/public/js/appChart.js
+++ b/public/js/appChart.js
@@ -789,12 +789,12 @@ const drawScatterPlotHC = function () {
 
   const SERIES_1_NAME = "Rücklauftemp";
   const SERIES_1_SYMBOL_COLOR = "rgba(119, 152, 191, .5)";
-  const SERIES_1_TEXT_COLOR = "rgb(119, 152, 191)"; // remove transparency from symbol color
+  const SERIES_1_TEXT_COLOR = "rgb(119, 152, 191)"; // remove transparency from symbol color for a more "intense" color
   const SERIES_1_SYMBOL = "°C";
 
   const SERIES_2_NAME = "Power";
   const SERIES_2_SYMBOL_COLOR = "rgba(223, 83, 83, .5)";
-  const SERIES_2_TEXT_COLOR = "rgb(223, 83, 83)"; // remove transparency from symbol color
+  const SERIES_2_TEXT_COLOR = "rgb(223, 83, 83)"; // remove transparency from symbol color for a more "intense" color
   const SERIES_2_SYMBOL = "kW";
 
   Highcharts.chart("chart-scatter-plot", {
@@ -886,8 +886,9 @@ const drawScatterPlotHC = function () {
           },
         },
         tooltip: {
-          headerFormat: "<b>{series.name}</b><br>",
+          headerFormat: "{point.x:%e %b, %Y %H:%M:%S}: <b>{point.y}</b>",
           pointFormat: "{point.x} cm, {point.y} kg",
+          valueDecimals: 2,
         },
       },
     },
@@ -897,12 +898,20 @@ const drawScatterPlotHC = function () {
         name: SERIES_1_NAME,
         color: SERIES_1_SYMBOL_COLOR,
         data: ruecklaufArr,
-        yAxis: 1, // need this property for the dual y-axes
+        tooltip: {
+          valueSuffix: ` ${SERIES_1_SYMBOL}`,
+        },
       },
       {
         name: SERIES_2_NAME,
         color: SERIES_2_SYMBOL_COLOR,
         data: powerArr,
+        // need this property for the dual y-axes to work
+        // defines the y-axis that this series refers to
+        yAxis: 1,
+        tooltip: {
+          valueSuffix: ` ${SERIES_2_SYMBOL}`,
+        },
       },
     ],
   });
-- 
GitLab