From 7316d512c6600672bdc08de7a5f1c3692aefcc99 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Wed, 11 Nov 2020 19:39:57 -0800
Subject: [PATCH] Add support for multi-value tooltips

---
 web/pages/components/chart.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/pages/components/chart.tsx b/web/pages/components/chart.tsx
index 14c8f89f7..5a6968f36 100644
--- a/web/pages/components/chart.tsx
+++ b/web/pages/components/chart.tsx
@@ -5,7 +5,7 @@ import styles from '../../styles/styles.module.css';
 
 interface ToolTipProps {
   active?: boolean,
-  payload?: object,
+  payload?: {name: string, payload: {value: string, time: Date}}[],
   unit?: string
 }
 
@@ -32,12 +32,17 @@ function CustomizedTooltip(props: ToolTipProps) {
   const { active, payload, unit } = props;
   if (active && payload && payload[0]) {
     const time = payload[0].payload ? timeFormat("%I:%M")(new Date(payload[0].payload.time)) : "";
+
+    const tooltipDetails = payload.map(data => {
+      return <div className="label" key={data.name}>
+        {data.payload.value}{unit} {data.name}
+        </div>
+    });
     return (
-      <div className="custom-tooltip">
-        <p className="label">
-          <strong>{time}</strong> {payload[0].payload.value} {unit}
-        </p>
-      </div>
+      <span className="custom-tooltip">
+        <strong>{time}</strong>
+        {tooltipDetails}
+      </span>
     );
   }
   return null;