Add depth to chart

packages/website/package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "cross-env EXTEND_ESLINT=true react-scripts start",
+    "build": "cross-env EXTEND_ESLINT=true react-scripts build",
     "test": "react-scripts --expose-gc test --logHeapUsage --maxWorkers=2",
     "eject": "react-scripts eject",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx ./src --ignore-path .gitignore",
@@ -83,9 +83,9 @@
     "node": "12.x"
   },
   "devDependencies": {
-    "@types/immutable": "^3.8.7",
-    "@types/validator": "^13.1.0",
+    "@types/chart.js": "^2.9.27",
     "@types/classnames": "^2.2.10",
+    "@types/immutable": "^3.8.7",
     "@types/jest": "^24.0.0",
     "@types/lodash": "^4.14.149",
     "@types/node": "^12.0.0",
@@ -97,6 +97,8 @@
     "@types/react-slick": "^0.23.4",
     "@types/react-swipeable-views": "^0.13.0",
     "@types/redux-mock-store": "^1.0.2",
-    "canvas": "^2.6.1"
+    "@types/validator": "^13.1.0",
+    "canvas": "^2.6.1",
+    "cross-env": "^7.0.2"
   }
 }

packages/website/src/common/Chart/ChartWithTooltip.tsx

@@ -5,11 +5,12 @@ import React, {
   useState,
 } from "react";
 import { Line } from "react-chartjs-2";
-import Chart, { ChartProps } from "./index";
+import type { ChartTooltipModel } from "chart.js";
+import Chart, { ChartProps } from ".";
 import Tooltip, { TooltipData } from "./Tooltip";
 import { useProcessedChartData } from "./utils";
 
-interface ChartWithTooltipProps extends ChartProps {
+export interface ChartWithTooltipProps extends ChartProps {
   depth: number | null;
   className?: string;
   style?: CSSProperties;
@@ -43,9 +44,11 @@ function ChartWithTooltip({
   });
   const [showTooltip, setShowTooltip] = useState<boolean>(false);
 
-  const customTooltip = (ref: React.RefObject<Line>) => (tooltipModel: any) => {
+  const customTooltip = (ref: React.RefObject<Line>) => (
+    tooltipModel: ChartTooltipModel
+  ) => {
     const chart = ref.current;
-    if (!chart) {
+    if (!chart?.chartInstance.canvas) {
       return;
     }
     const position = chart.chartInstance.canvas.getBoundingClientRect();
@@ -54,7 +57,7 @@ function ChartWithTooltip({
     const date = tooltipModel.dataPoints?.[0]?.xLabel;
     const index = date && chartLabels.findIndex((item) => item === date);
 
-    if (index > -1 && index !== 0) {
+    if (index && index > -1 && typeof date === "string") {
       setTooltipPosition({ top, left });
       setTooltipData({
         date,

packages/website/src/common/Chart/index.tsx

@@ -12,8 +12,7 @@ import "./plugins/backgroundPlugin";
 import "./plugins/fillPlugin";
 import "./plugins/slicePlugin";
 import "chartjs-plugin-annotation";
-import { createChartData } from "../../helpers/createChartData";
-import { useProcessedChartData } from "./utils";
+import { createChartData, useProcessedChartData } from "./utils";
 import { SurveyListItem } from "../../store/Survey/types";
 
 export interface ChartProps {
@@ -28,6 +27,30 @@ export interface ChartProps {
 
 const SMALL_WINDOW = 400;
 
+const makeAnnotation = (
+  name: string,
+  value: number | null,
+  borderColor: string,
+  backgroundColor = "rgb(169,169,169, 0.7)"
+) => ({
+  type: "line",
+  mode: "horizontal",
+  scaleID: "y-axis-0",
+  value,
+  borderColor,
+  borderWidth: 2,
+  borderDash: [5, 5],
+  label: {
+    enabled: true,
+    backgroundColor,
+    yPadding: 3,
+    xPadding: 3,
+    position: "left",
+    xAdjust: 10,
+    content: name,
+  },
+});
+
 function Chart({
   dailyData,
   surveys,
@@ -50,22 +73,24 @@ function Chart({
 
   const [xPeriod, setXPeriod] = useState<"week" | "month">("week");
 
-  const stepSize = 5;
+  const yStepSize = 5;
 
   const {
     xAxisMax,
     xAxisMin,
     yAxisMax,
     yAxisMin,
     surfaceTemperatureData,
+    bottomTemperatureData,
     tempWithSurvey,
     chartLabels,
   } = useProcessedChartData(dailyData, surveys, temperatureThreshold);
 
   const changeXTickShiftAndPeriod = () => {
     const { current } = chartRef;
     if (current) {
-      const xScale = current.chartInstance.scales["x-axis-0"];
+      // not sure why 'scales' doesn't have a type. Possibly from a plugin?
+      const xScale = (current.chartInstance as any).scales["x-axis-0"];
       const ticksPositions = xScale.ticks.map((_: any, index: number) =>
         xScale.getPixelForTick(index)
       );
@@ -79,9 +104,7 @@ function Chart({
     }
   };
 
-  /*
-      Catch the "window done resizing" event as suggested by https://css-tricks.com/snippets/jquery/done-resizing-event/
-    */
+  // Catch the "window done resizing" event as suggested by https://css-tricks.com/snippets/jquery/done-resizing-event/
   const onResize = useCallback(() => {
     setUpdateChart(true);
     setTimeout(() => {
@@ -130,42 +153,12 @@ function Chart({
 
       annotation: {
         annotations: [
-          {
-            type: "line",
-            mode: "horizontal",
-            scaleID: "y-axis-0",
-            value: maxMonthlyMean,
-            borderColor: "rgb(75, 192, 192)",
-            borderWidth: 2,
-            borderDash: [5, 5],
-            label: {
-              enabled: true,
-              backgroundColor: "rgb(169,169,169, 0.7)",
-              yPadding: 3,
-              xPadding: 3,
-              position: "left",
-              xAdjust: 10,
-              content: "Historical Max",
-            },
-          },
-          {
-            type: "line",
-            mode: "horizontal",
-            scaleID: "y-axis-0",
-            value: temperatureThreshold,
-            borderColor: "#ff8d00",
-            borderWidth: 2,
-            borderDash: [5, 5],
-            label: {
-              enabled: true,
-              backgroundColor: "rgb(169,169,169, 0.7)",
-              yPadding: 3,
-              xPadding: 3,
-              position: "left",
-              xAdjust: 10,
-              content: "Bleaching Threshold",
-            },
-          },
+          makeAnnotation("Historical Max", maxMonthlyMean, "rgb(75, 192, 192)"),
+          makeAnnotation(
+            "Bleaching Threshold",
+            temperatureThreshold,
+            "#ff8d00"
+          ),
         ],
       },
       scales: {
@@ -200,11 +193,11 @@ function Chart({
             display: true,
             ticks: {
               min: yAxisMin,
-              stepSize,
+              stepSize: yStepSize,
               max: yAxisMax,
               callback: (value: number) => {
-                if (![1, stepSize - 1].includes(value % stepSize)) {
-                  return `${value}\u00B0  `;
+                if (![1, yStepSize - 1].includes(value % yStepSize)) {
+                  return `${value}°  `;
                 }
                 return "";
               },
@@ -230,7 +223,8 @@ function Chart({
         chartLabels,
         tempWithSurvey,
         surfaceTemperatureData,
-        Boolean(temperatureThreshold)
+        bottomTemperatureData,
+        !!temperatureThreshold
       )}
     />
   );

packages/website/src/common/Chart/plugins/backgroundPlugin.ts

@@ -12,12 +12,14 @@ const plugin = {
     const chartWidth = chartArea.right - chartArea.left;
     const day = 1;
     ctx.save();
+    // eslint-disable-next-line fp/no-mutation
     ctx.fillStyle = options.color;
     if (options.xTicksFontWeight) {
-      // eslint-disable-next-line no-param-reassign
+      // eslint-disable-next-line no-param-reassign,fp/no-mutation
       chart.scales["x-axis-0"].options.ticks.fontSize =
         (chartWidth * options.xTicksFontWeight) / 100;
     }
+    // eslint-disable-next-line fp/no-mutation
     for (let i = 0; i < ticksPositions.length; i += 2 * day) {
       const start = ticksPositions[i];
       const end = ticksPositions[i + day];

packages/website/src/common/Chart/plugins/fillPlugin.ts

@@ -28,7 +28,7 @@ export const fillBetweenLinesPlugin = {
         !chart.data.datasets[options.datasetIndex].backgroundColor ||
         options.updateChart
       ) {
-        // eslint-disable-next-line no-param-reassign
+        // eslint-disable-next-line no-param-reassign,fp/no-mutation
         chart.data.datasets[options.datasetIndex].backgroundColor = gradient;
         chart.update();
       }

packages/website/src/common/Chart/plugins/slicePlugin.ts

@@ -1,6 +1,6 @@
 const { Chart } = require("react-chartjs-2");
 
-export const sliceDrawPLugin = {
+export const sliceDrawPlugin = {
   id: "sliceDrawPlugin",
   afterDatasetsDraw: (chart: any, _easingValue: any, options: any) => {
     const yScale = chart.scales["y-axis-0"];
@@ -13,11 +13,12 @@ export const sliceDrawPLugin = {
     if (options.sliceAtLabel) {
       ctx.beginPath();
       ctx.moveTo(xCoord, top);
+      // eslint-disable-next-line fp/no-mutation
       ctx.strokeStyle = "#777777";
       ctx.lineTo(xCoord, bottom);
       ctx.stroke();
     }
   },
 };
 
-Chart.pluginService.register(sliceDrawPLugin);
+Chart.pluginService.register(sliceDrawPlugin);

packages/website/src/common/Chart/utils.ts

@@ -1,3 +1,4 @@
+import { ChartComponentProps } from "react-chartjs-2";
 import type { ChartProps } from ".";
 import { sortByDate } from "../../helpers/sortDailyData";
 import type { DailyData } from "../../store/Reefs/types";
@@ -30,12 +31,13 @@ export const createDatasets = (
     .map((item) => {
       const date = new Date(item.date).setHours(0, 0, 0, 0);
       if (surveyDates.includes(date)) {
-        return item.satelliteTemperature;
+        return item.avgBottomTemperature || item.satelliteTemperature;
       }
       return null;
     });
 
   return {
+    // repeat first value, so chart start point isn't instantaneous.
     tempWithSurvey: [tempWithSurvey[0], ...tempWithSurvey],
     bottomTemperatureData: [bottomTemperature[0], ...bottomTemperature],
     surfaceTemperatureData: [surfaceTemperature[0], ...surfaceTemperature],
@@ -65,9 +67,15 @@ export const calculateAxisLimits = (
   // Add an extra date one day after the final daily data date
   const chartLabels = [xAxisMin, ...dates];
 
-  const { surfaceTemperatureData } = createDatasets(dailyData, surveys);
+  const { surfaceTemperatureData, bottomTemperatureData } = createDatasets(
+    dailyData,
+    surveys
+  );
 
-  const temperatureData = [...surfaceTemperatureData].filter((value) => value);
+  const temperatureData = [
+    ...surfaceTemperatureData,
+    ...bottomTemperatureData,
+  ].filter((value) => value);
 
   const yAxisMinTemp = Math.min(...temperatureData) - ySpacing;
 
@@ -111,3 +119,64 @@ export function useProcessedChartData(
   );
   return { sortedDailyData, ...axisLimits, ...datasets };
 }
+
+export const createChartData = (
+  labels: string[],
+  tempWithSurvey: (number | null)[],
+  surfaceTemps: number[],
+  bottomTemps: number[],
+  fill: boolean
+) => {
+  const data: ChartComponentProps["data"] = {
+    labels,
+    datasets: [
+      {
+        type: "scatter",
+        label: "SURVEYS",
+        data: tempWithSurvey,
+        pointRadius: 5,
+        backgroundColor: "#ffffff",
+        pointBackgroundColor: "#ffff",
+        borderWidth: 1.5,
+        borderColor: "#128cc0",
+      },
+      {
+        label: "SURFACE TEMP",
+        data: surfaceTemps,
+        backgroundColor: "rgb(107,193,225,0.2)",
+        borderColor: "#6bc1e1",
+        borderWidth: 2,
+        pointBackgroundColor: "#ffffff",
+        pointBorderWidth: 1.5,
+        pointRadius: 0,
+        cubicInterpolationMode: "monotone",
+      },
+      {
+        label: "TEMP AT DEPTH",
+        data: bottomTemps,
+        borderColor: "#46a5cf",
+        borderWidth: 2,
+        pointBackgroundColor: "#ffffff",
+        pointBorderWidth: 1.5,
+        pointRadius: 0,
+        cubicInterpolationMode: "monotone",
+      },
+    ],
+  };
+
+  if (fill) {
+    // eslint-disable-next-line fp/no-mutating-methods
+    data.datasets!.splice(1, 0, {
+      label: "BLEACHING THRESHOLD",
+      data: surfaceTemps,
+      fill,
+      borderColor: "#6bc1e1",
+      borderWidth: 2,
+      pointBackgroundColor: "#ffffff",
+      pointBorderWidth: 1.5,
+      pointRadius: 0,
+      cubicInterpolationMode: "monotone",
+    });
+  }
+  return data;
+};

packages/website/src/common/Search/index.tsx

@@ -18,6 +18,7 @@ import { getReefNameAndRegion } from "../../store/Reefs/helpers";
 const Search = ({ classes }: SearchProps) => {
   const [searchedReef, setSearchedReef] = useState<Reef | null>(null);
   const dispatch = useDispatch();
+  // eslint-disable-next-line fp/no-mutating-methods
   const reefs = useSelector(reefsListSelector)
     .filter((reef) => getReefNameAndRegion(reef).name)
     // Sort by formatted name