Add tooltips to charts

toddmedema · Apr 27, 2024 · a655454 · a655454
1 parent f19234e
commit a655454
Show file tree

Hide file tree

Showing 8 changed files with 166 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -43,7 +43,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "pretty": "prettier --write \"src/**/*.{css,js,jsx,tsx,json}\""
+    "pretty": "prettier --write \"src/**/*.{css,js,jsx,tsx,json}\"",
+    "deploy": "./deploy.sh"
   },
   "eslintConfig": {
     "extends": [

diff --git a/src/components/base/ChartFinances.tsx b/src/components/base/ChartFinances.tsx
@@ -7,6 +7,8 @@ import {
   VictoryLabel,
   VictoryLine,
   VictoryTheme,
+  VictoryVoronoiContainer,
+  VictoryTooltip,
 } from "victory";
 
 interface ChartData {
@@ -30,7 +32,7 @@ const ChartFinances = (props: Props): JSX.Element => {
   const rangeMin = props.timeline[0].month;
   const rangeMax = Math.max(
     rangeMin + 11,
-    props.timeline[props.timeline.length - 1].month,
+    props.timeline[props.timeline.length - 1].month
   );
   const past = [] as ChartData[];
   const projected = [] as ChartData[];
@@ -57,6 +59,20 @@ const ChartFinances = (props: Props): JSX.Element => {
         domain={{ x: [rangeMin, rangeMax], y: [domainMin, domainMax] }}
         domainPadding={{ y: [6, 6] }}
         height={props.height || 300}
+        containerComponent={
+          <VictoryVoronoiContainer
+            voronoiDimension="x"
+            labels={({ datum }) => props.format(datum.value).toString()}
+            labelComponent={
+              <VictoryTooltip
+                cornerRadius={2}
+                constrainToVisibleArea
+                flyoutStyle={{ fill: "white" }}
+                style={{ textAnchor: "end" }}
+              />
+            }
+          />
+        }
       >
         <VictoryAxis
           tickFormat={(t) => formatMonthChartAxis(t, multiyear)}

diff --git a/src/components/base/ChartForecastFuelPrices.tsx b/src/components/base/ChartForecastFuelPrices.tsx
@@ -6,12 +6,14 @@ import {
   VictoryLegend,
   VictoryLine,
   VictoryTheme,
+  VictoryVoronoiContainer,
+  VictoryTooltip,
 } from "victory";
 import {
   formatMonthChartAxis,
   getDateFromMinute,
 } from "../../helpers/DateTime";
-import { formatMoneyConcise } from "../../helpers/Format";
+import { formatMoneyConcise, formatMoneyStable } from "../../helpers/Format";
 import { TickPresentFutureType } from "../../Types";
 import { chartTheme, fuelColors } from "../../Theme";
 
@@ -40,6 +42,27 @@ export default class ChartForecastFuelPrices extends React.PureComponent<
           domain={domain}
           domainPadding={{ y: [6, 6] }}
           height={height || 300}
+          containerComponent={
+            <VictoryVoronoiContainer
+              voronoiDimension="x"
+              // Labels are rendered on EACH chart, so we only render on Coal, otherwise we get duplicate labels
+              voronoiBlacklist={["naturalGas", "oil", "uranium"]}
+              labels={({ datum }) =>
+                `Coal: ${formatMoneyStable(datum.Coal)}
+                Natural Gas: ${formatMoneyStable(datum["Natural Gas"])}
+                Oil: ${formatMoneyStable(datum.Oil)}
+                Uranium: ${formatMoneyStable(datum.Uranium)}`
+              }
+              labelComponent={
+                <VictoryTooltip
+                  cornerRadius={2}
+                  constrainToVisibleArea
+                  flyoutStyle={{ fill: "white" }}
+                  style={{ textAnchor: "end" }}
+                />
+              }
+            />
+          }
         >
           <VictoryAxis
             tickCount={6}
@@ -72,30 +95,33 @@ export default class ChartForecastFuelPrices extends React.PureComponent<
             }}
           />
           <VictoryLine
+            name="coal"
             data={timeline}
             x="minute"
-            y="Natural Gas"
+            y="Coal"
             interpolation="natural"
             style={{
               data: {
-                stroke: fuelColors["Natural Gas"],
+                stroke: fuelColors.Coal,
                 strokeWidth: 1,
               },
             }}
           />
           <VictoryLine
+            name="naturalGas"
             data={timeline}
             x="minute"
-            y="Coal"
+            y="Natural Gas"
             interpolation="natural"
             style={{
               data: {
-                stroke: fuelColors.Coal,
+                stroke: fuelColors["Natural Gas"],
                 strokeWidth: 1,
               },
             }}
           />
           <VictoryLine
+            name="oil"
             data={timeline}
             x="minute"
             y="Oil"
@@ -108,6 +134,7 @@ export default class ChartForecastFuelPrices extends React.PureComponent<
             }}
           />
           <VictoryLine
+            name="uranium"
             data={timeline}
             x="minute"
             y="Uranium"

diff --git a/src/components/base/ChartForecastStorage.tsx b/src/components/base/ChartForecastStorage.tsx
@@ -5,6 +5,8 @@ import {
   VictoryLabel,
   VictoryLine,
   VictoryTheme,
+  VictoryVoronoiContainer,
+  VictoryTooltip,
 } from "victory";
 import { TickPresentFutureType } from "../../Types";
 import {
@@ -39,6 +41,20 @@ export default class chartForecastStorage extends React.PureComponent<
           domain={domain}
           domainPadding={{ y: [6, 6] }}
           height={height || 300}
+          containerComponent={
+            <VictoryVoronoiContainer
+              voronoiDimension="x"
+              labels={({ datum }) => formatWattHours(datum.storedWh)}
+              labelComponent={
+                <VictoryTooltip
+                  cornerRadius={2}
+                  constrainToVisibleArea
+                  flyoutStyle={{ fill: "white" }}
+                  style={{ textAnchor: "end" }}
+                />
+              }
+            />
+          }
         >
           <VictoryAxis
             tickCount={6}

diff --git a/src/components/base/ChartForecastSupplyByFuel.tsx b/src/components/base/ChartForecastSupplyByFuel.tsx
@@ -6,6 +6,8 @@ import {
   VictoryLegend,
   VictoryLine,
   VictoryTheme,
+  VictoryVoronoiContainer,
+  VictoryTooltip,
 } from "victory";
 import {
   formatMonthChartAxis,
@@ -61,6 +63,26 @@ export default class ChartForecastSupplyByFuel extends React.PureComponent<
           domain={domain}
           domainPadding={{ y: [6, 6] }}
           height={height || 300}
+          containerComponent={
+            <VictoryVoronoiContainer
+              voronoiDimension="x"
+              // Labels are rendered on EACH chart, so we only render on first one, otherwise we get duplicate labels
+              voronoiBlacklist={fuels.slice(1)}
+              labels={({ datum }) =>
+                fuels
+                  .map((f: FuelNameType) => f + ": " + formatWatts(datum[f]))
+                  .join("\n")
+              }
+              labelComponent={
+                <VictoryTooltip
+                  cornerRadius={2}
+                  constrainToVisibleArea
+                  flyoutStyle={{ fill: "white" }}
+                  style={{ textAnchor: "end" }}
+                />
+              }
+            />
+          }
         >
           <VictoryAxis
             tickCount={6}
@@ -96,6 +118,7 @@ export default class ChartForecastSupplyByFuel extends React.PureComponent<
           {fuels.map((f: FuelNameType, i: number) => (
             <VictoryLine
               key={i}
+              name={f}
               data={data}
               x="minute"
               y={f}

diff --git a/src/components/base/ChartForecastSupplyDemand.tsx b/src/components/base/ChartForecastSupplyDemand.tsx
@@ -6,6 +6,8 @@ import {
   VictoryLabel,
   VictoryLine,
   VictoryTheme,
+  VictoryVoronoiContainer,
+  VictoryTooltip,
 } from "victory";
 import { TickPresentFutureType } from "../../Types";
 import {
@@ -52,6 +54,24 @@ export default class chartForecastSupplyDemand extends React.PureComponent<
           domain={domain}
           domainPadding={{ y: [6, 6] }}
           height={height || 300}
+          containerComponent={
+            <VictoryVoronoiContainer
+              voronoiDimension="x"
+              // Labels are rendered on EACH chart, so we only render on supply, otherwise we get duplicate labels
+              voronoiBlacklist={["demand", "blackouts"]}
+              labels={({ datum }) =>
+                `Supply: ${formatWatts(datum.supplyW)}\nDemand: ${formatWatts(datum.demandW)}`
+              }
+              labelComponent={
+                <VictoryTooltip
+                  cornerRadius={2}
+                  constrainToVisibleArea
+                  flyoutStyle={{ fill: "white" }}
+                  style={{ textAnchor: "end" }}
+                />
+              }
+            />
+          }
         >
           <VictoryAxis
             tickCount={6}
@@ -85,6 +105,7 @@ export default class chartForecastSupplyDemand extends React.PureComponent<
             }}
           />
           <VictoryLine
+            name="supply"
             data={timeline}
             x="minute"
             y="supplyW"
@@ -96,6 +117,7 @@ export default class chartForecastSupplyDemand extends React.PureComponent<
             }}
           />
           <VictoryLine
+            name="demand"
             data={timeline}
             x="minute"
             y="demandW"
@@ -106,6 +128,7 @@ export default class chartForecastSupplyDemand extends React.PureComponent<
             }}
           />
           <VictoryArea
+            name="blackouts"
             data={blackouts}
             x="minute"
             y="value"

diff --git a/src/components/base/ChartForecastWeather.tsx b/src/components/base/ChartForecastWeather.tsx
@@ -6,6 +6,8 @@ import {
   VictoryLegend,
   VictoryLine,
   VictoryTheme,
+  VictoryVoronoiContainer,
+  VictoryTooltip,
 } from "victory";
 import { TICK_MINUTES } from "../../Constants";
 import { TickPresentFutureType } from "../../Types";
@@ -47,6 +49,24 @@ export default class ChartForecastWeather extends React.PureComponent<
           domain={domain}
           domainPadding={{ y: [6, 6] }}
           height={height || 300}
+          containerComponent={
+            <VictoryVoronoiContainer
+              voronoiDimension="x"
+              // Labels are rendered on EACH chart, so we only render on temperature, otherwise we get duplicate labels
+              voronoiBlacklist={["wind"]}
+              labels={({ datum }) =>
+                `Temperature: ${Math.round(datum.temperatureC)}°C\nWind: ${Math.round(datum.windKph)} km/h`
+              }
+              labelComponent={
+                <VictoryTooltip
+                  cornerRadius={2}
+                  constrainToVisibleArea
+                  flyoutStyle={{ fill: "white" }}
+                  style={{ textAnchor: "end" }}
+                />
+              }
+            />
+          }
         >
           <VictoryAxis
             tickCount={6}
@@ -78,6 +98,7 @@ export default class ChartForecastWeather extends React.PureComponent<
             }}
           />
           <VictoryLine
+            name="temperature"
             data={data}
             x="minute"
             y="temperatureC"
@@ -90,6 +111,7 @@ export default class ChartForecastWeather extends React.PureComponent<
             }}
           />
           <VictoryLine
+            name="wind"
             data={data}
             x="minute"
             y="windKph"
@@ -110,7 +132,7 @@ export default class ChartForecastWeather extends React.PureComponent<
             symbolSpacer={5}
             data={[
               { name: "Heat (°C)", symbol: { fill: temperatureColor } },
-              { name: "Wind (Kph)", symbol: { fill: windColor } },
+              { name: "Wind (km/h)", symbol: { fill: windColor } },
             ]}
           />
         </VictoryChart>