fixed up the mode graph

src/bin/graphs/BinLevelOverTime.tsx

@@ -1,18 +1,13 @@
 import {
-  Box,
   Card,
   CircularProgress,
-  FormControlLabel,
-  Grid,
-  Switch,
   Typography
 } from "@mui/material";
 import { blue, grey, red, yellow, orange } from "@mui/material/colors";
-import BarGraph, { BarData, RefArea } from "charts/BarGraph";
+import BarGraph, { BarData } from "charts/BarGraph";
-import MultiLineGraph, { LineData } from "charts/measurementCharts/MultiLineGraph";
 import { Bin } from "models";
 import moment, { Moment } from "moment";
-import { pond, quack } from "protobuf-ts/pond";
+import { pond } from "protobuf-ts/pond";
 import { useBinAPI, useGlobalState } from "providers";
 import { useCallback, useEffect, useState } from "react";
 import { Legend } from "recharts";
@@ -39,7 +34,6 @@ export default function BinLevelOverTime(props: Props) {
   const binAPI = useBinAPI();
   const [{as}] = useGlobalState();
   const [inventoryData, setInventoryData] = useState<InventoryAt[]>([]);
-  const [modeAreas, setModeAreas] = useState<RefArea[]>([]);
   const [dataLoading, setDataLoading] = useState(false);
   const [capacity, setCapacity] = useState<number | undefined>();
   
@@ -83,32 +77,14 @@ export default function BinLevelOverTime(props: Props) {
       .listHistoryBetween(bin.key(), 500, startDate.toISOString(), endDate.toISOString())
       .then(resp => {
         let data: BarData[] = [];
-        let modeAreas: RefArea[] = [];
         let lastBushels = -1;
-
+        let currentMode: pond.BinMode | undefined = undefined
-        //values for ref areas
+        let modeData: BarData[] = []
-        let x1 = 0;
-        let x2 = 0;
-        let y1 = -50;
-        let y2 = -200;
-
-        let currentMode: pond.BinMode;
-
         resp.data.history.forEach(hist => {
+          //build the data for the inventory bar graph
           if (hist.settings?.inventory) {
-            let settings = pond.BinSettings.fromObject(hist.settings);
             let bushels = hist.settings.inventory.grainBushels ?? 0;
-            if (bushels !== lastBushels || currentMode !== settings.mode) {
+            if (bushels !== lastBushels) {
-              x1 = moment(hist.timestamp).valueOf();
-              x2 = moment(hist.timestamp).valueOf();
-              modeAreas.push({
-                x1: x1,
-                x2: x2,
-                y1: cap ? cap * -0.1 : y1,
-                y2: cap ? cap * -0.2 : y2,
-                fill: getFill(settings.mode)
-              });
-              currentMode = settings.mode;
               let newData: InventoryAt = {
                 timestamp: moment(hist.timestamp).valueOf(),
                 value: fertilizerBin
@@ -121,6 +97,17 @@ export default function BinLevelOverTime(props: Props) {
               lastBushels = bushels;
             }
           }
+          //build the data for the mode change bar graph
+          let histBin = Bin.create()
+          histBin.settings = hist.settings ?? pond.BinSettings.create()
+          if(hist.settings && currentMode !== hist.settings.mode){
+            currentMode = hist.settings.mode
+            modeData.push({
+              timestamp: moment(hist.timestamp).valueOf(),
+              value: 1,
+              fill: getFill(currentMode)
+            })
+          }
         });
         if (data.length === 0) {
           let bushels = bin.settings.inventory?.grainBushels ?? 0;
@@ -133,17 +120,9 @@ export default function BinLevelOverTime(props: Props) {
               : bushels,
             timestamp: currentTime
           });
-
-          modeAreas.push({
-            x1: currentTime,
-            x2: currentTime,
-            y1: cap ? cap * -0.1 : y1,
-            y2: cap ? cap * -0.2 : y2,
-            fill: getFill(bin.settings.mode)
-          });
         }
         setInventoryData(data);
-        setModeAreas(modeAreas);
+        setModeData(modeData)
       })
       .finally(() => {
         setDataLoading(false);
@@ -290,7 +269,6 @@ export default function BinLevelOverTime(props: Props) {
         <BarGraph
         customHeight={customHeight}
         data={inventoryData}
-        refAreas={modeAreas}
         barColour={colour}
         yMax={capacity}
         yMin={0}
@@ -303,6 +281,7 @@ export default function BinLevelOverTime(props: Props) {
   };
 
   const binModeChart = () => {
+    console.log(modeData)
     return (
       <BarGraph 
         data={modeData}