set up an areea chart for bin levels over time if there are more than 10 changes since the bars get kinda cluttered

src/bin/BinSettings.tsx

@@ -374,7 +374,6 @@ export default function BinSettings(props: Props) {
       let options: Option[] = []
       libracartAPI.listDestinations(0,0,undefined, as)
       .then(resp=>{
-        console.log(resp)
         //set the options for the search select
         resp.data.destinations.forEach(d => {
           let newOp: Option = {
@@ -486,7 +485,6 @@ export default function BinSettings(props: Props) {
           form.inventory.inventoryControl = inventoryControl
           form.inventory.autoThreshold = autoFillThreshold
         }
-        console.log(form)
         binAPI
           .updateBin(bin.key(), form, as)
           .then(response => {

src/bin/graphs/BinLevelAreaGraph.tsx

@@ -0,0 +1,67 @@
+import { useTheme } from "@mui/material";
+import MaterialChartTooltip from "charts/MaterialChartTooltip";
+import moment from "moment";
+import { Area, AreaChart, ResponsiveContainer, Tooltip, TooltipProps, XAxis, YAxis } from "recharts";
+
+export interface LevelAreaData {
+  timestamp: number;
+  value: number;
+}
+
+interface Props {
+  data: LevelAreaData[]
+  fill: string
+  customHeight?: string | number
+}
+
+export default function BinLevelAreaGraph(props: Props) {
+  const { data, customHeight, fill } = props
+    const theme = useTheme();
+    const now = moment();
+
+
+  return (
+    <ResponsiveContainer width={"100%"} height={customHeight ?? 350}>
+      <AreaChart data={data}>
+        <XAxis
+          allowDataOverflow
+          dataKey="timestamp"
+          domain={["dataMin", "dataMax"]}
+          name="Time"
+          tickFormatter={timestamp => {
+            let t = moment(timestamp);
+            return now.isSame(t, "day") ? t.format("LT") : t.format("MMM DD");
+          }}
+          scale="time"
+          type="number"
+          tick={{ fill: theme.palette.text.primary }}
+          stroke={theme.palette.divider}
+          interval="preserveStartEnd"
+        />
+        <YAxis />
+        <Area
+          dataKey={"value"}
+          fill={fill}
+          stroke={fill}
+          strokeWidth={3}
+          type="monotone"
+        />
+        <Tooltip
+          animationEasing="ease-out"
+          cursor={{ fill: theme.palette.text.primary, opacity: "0.15" }}
+          labelFormatter={timestamp => moment(timestamp).format("lll")}
+          content={(props: TooltipProps<any, any>) => {
+            return (
+              <MaterialChartTooltip
+                {...props}
+                valueFormatter={value => {
+                  return value + " Bushels";
+                }}
+              />
+            );
+          }}
+        />
+      </AreaChart>
+    </ResponsiveContainer>
+  )
+}

src/bin/graphs/BinLevelOverTime.tsx

@@ -9,6 +9,7 @@ import {
 } from "@mui/material";
 import { blue, grey, red, yellow, orange } from "@mui/material/colors";
 import BarGraph, { BarData, RefArea } 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";
@@ -16,6 +17,7 @@ import { useBinAPI, useGlobalState } from "providers";
 import { useCallback, useEffect, useState } from "react";
 import { Legend } from "recharts";
 import { getGrainUnit } from "utils";
+import BinLevelAreaGraph from "./BinLevelAreaGraph";
 
 interface Props {
   binLoading: boolean;
@@ -27,11 +29,16 @@ interface Props {
   customHeight?: number | string;
 }
 
+interface InventoryAt {
+  timestamp: number;
+  value: number;
+}
+
 export default function BinLevelOverTime(props: Props) {
   const { bin, fertilizerBin, colour, startDate, endDate, customHeight } = props;
   const binAPI = useBinAPI();
   const [{as}] = useGlobalState();
-  const [data, setData] = useState<BarData[]>([]);
+  const [inventoryData, setInventoryData] = useState<InventoryAt[]>([]);
   const [modeAreas, setModeAreas] = useState<RefArea[]>([]);
   const [dataLoading, setDataLoading] = useState(false);
   const [capacity, setCapacity] = useState<number | undefined>();
@@ -102,7 +109,7 @@ export default function BinLevelOverTime(props: Props) {
                 fill: getFill(settings.mode)
               });
               currentMode = settings.mode;
-              let newData: BarData = {
+              let newData: InventoryAt = {
                 timestamp: moment(hist.timestamp).valueOf(),
                 value: fertilizerBin
                   ? Math.round(bushels * 35.239)
@@ -135,7 +142,7 @@ export default function BinLevelOverTime(props: Props) {
             fill: getFill(bin.settings.mode)
           });
         }
-        setData(data);
+        setInventoryData(data);
         setModeAreas(modeAreas);
       })
       .finally(() => {
@@ -191,7 +198,7 @@ export default function BinLevelOverTime(props: Props) {
             timestamp: currentTime
           });
         }
-        setData(autoBarData);
+        setInventoryData(autoBarData);
       })
       .catch(err => {})
       .finally(() => {
@@ -271,23 +278,31 @@ export default function BinLevelOverTime(props: Props) {
   };
 
   const inventoryChart = () => {
-    return (
+    if(inventoryData.length > 10){
-      <BarGraph
+      return (
+        <BinLevelAreaGraph 
+          data={inventoryData}
+          fill={colour}
+        />
+      )
+    }else{
+      return (
+        <BarGraph
         customHeight={customHeight}
-        data={data}
+        data={inventoryData}
         refAreas={modeAreas}
         barColour={colour}
         yMax={capacity}
         yMin={0}
-        graphLegend={modeAreas.length > 0 ? legend() : undefined}
         labelColour="white"
         labels
         useGradient
-      />
+        />
-    );
+      );
+    }
   };
 
-  const autoBinModeChart = () => {
+  const binModeChart = () => {
     return (
       <BarGraph 
         data={modeData}
@@ -306,10 +321,7 @@ export default function BinLevelOverTime(props: Props) {
         Grain Levels Over Time
       </Typography>
       {dataLoading ? <CircularProgress /> : inventoryChart()}
-      {/* when using auto will need to make a new chart just for the bin modes since the auto inventory comes from another place */}
+      {binModeChart()}
-      {(bin.inventoryControl() === pond.BinInventoryControl.BIN_INVENTORY_CONTROL_AUTOMATIC_LIDAR ||
-        bin.inventoryControl() === pond.BinInventoryControl.BIN_INVENTORY_CONTROL_AUTOMATIC || 
-        bin.inventoryControl() === pond.BinInventoryControl.BIN_INVENTORY_CONTROL_LIBRACART) && autoBinModeChart()}
     </Card>
   );
 }