added inventory chart for bins

src/pages/Bins.tsx

@@ -17,6 +17,8 @@ import {
   // GridList,
   // GridListTile,
   IconButton,
+  ImageList,
+  ImageListItem,
   InputLabel,
   ListItemIcon,
   ListItemText,
@@ -45,8 +47,8 @@ import {
 // import BinSettings from "bin/BinSettings";
 // import BinsList from "bin/BinsList";
 // import BinYard from "bin/BinYard";
-// import BinInventoryChart, { GrainAmount } from "charts/BinInventoryChart";
-// import BinUtilizationChart from "charts/BinUtilizationChart";
+import BinInventoryChart, { GrainAmount } from "charts/BinInventoryChart";
+import BinUtilizationChart from "charts/BinUtilizationChart";
 // import QrCodeGenerator, { QrCodeKey } from "common/QrCodeGenerator";
 import GrainDescriber, { grainName } from "grain/GrainDescriber";
 // import GrainBagList from "grainBag/grainBagList";
@@ -167,7 +169,7 @@ export default function Bins(props: Props) {
   const [fertilizerBins, setFertilizerBins] = useState<Bin[]>([]);
   const [emptyBins, setEmptyBins] = useState<Bin[]>([]);
   // const [grainBags, setGrainBags] = useState<GrainBag[]>([]);
-  // const [displayedInventory, setDisplayedInventory] = useState<GrainAmount[]>([]);
+  const [displayedInventory, setDisplayedInventory] = useState<GrainAmount[]>([]);
   // const [displayedFertilizer, setDisplayedFertilizer] = useState<GrainAmount[]>([]);
   const [carouselIndex, setCarouselIndex] = useState(0);
   const [addBagOpen, setAddBagOpen] = useState(false);
@@ -338,23 +340,23 @@ export default function Bins(props: Props) {
           binsTotal: resp.data.total
         });
         let metrics = pond.BinMetrics.fromObject(resp.data.metrics ?? {});
-        // let inventory: GrainAmount[] = [];
+        let inventory: GrainAmount[] = [];
         // let fertInventory: GrainAmount[] = [];
         if (metrics) {
           metrics.grainInventory.forEach(grain => {
-            // inventory.push({
-            //   grain: grain.grainType,
-            //   bushelAmount: grain.bushelAmount,
-            //   grainName: grainName(grain.grainType)
-            // });
+            inventory.push({
+              grain: grain.grainType,
+              bushelAmount: grain.bushelAmount,
+              grainName: grainName(grain.grainType)
+            });
           });
           metrics.customInventory.forEach(invObject => {
             if (invObject.storageType === pond.BinStorage.BIN_STORAGE_UNSUPPORTED_GRAIN) {
-              // inventory.push({
-              //   grain: pond.Grain.GRAIN_CUSTOM,
-              //   bushelAmount: invObject.amount,
-              //   grainName: invObject.name
-              // });
+              inventory.push({
+                grain: pond.Grain.GRAIN_CUSTOM,
+                bushelAmount: invObject.amount,
+                grainName: invObject.name
+              });
             } else if (invObject.storageType === pond.BinStorage.BIN_STORAGE_FERTILIZER) {
               // fertInventory.push({
               //   grain: pond.Grain.GRAIN_CUSTOM,
@@ -365,7 +367,7 @@ export default function Bins(props: Props) {
           });
         }
         setBinMetrics(metrics);
-        // setDisplayedInventory(inventory);
+        setDisplayedInventory(inventory);
         // setDisplayedFertilizer(fertInventory);
         if (yards.length === 0) {
           let y: pond.BinYardSettings[] = [];
@@ -821,7 +823,7 @@ export default function Bins(props: Props) {
       <React.Fragment>
         <Grid container direction="row" alignContent="center" alignItems="center">
           <Grid style={{ height: "200px" }} item xs={6}>
-            {/* <BinInventoryChart
+            <BinInventoryChart
               customLabel="Grain"
               inventory={displayedInventory}
               onClick={(grain: pond.Grain, grainName: string) => {
@@ -835,7 +837,7 @@ export default function Bins(props: Props) {
                 loadMoreBins(filter);
               }}
               //activeGrain={grainFilter}
-            /> */}
+            />
           </Grid>
           <Grid style={{ height: "200px" }} item xs={6}>
             {/* <BinInventoryChart
@@ -902,24 +904,25 @@ export default function Bins(props: Props) {
               <Typography variant="caption" color="textSecondary">
                 Click a chart to filter bins by grain
               </Typography>
-              {/* <GridList
+              <ImageList
                 className={classes.gridList}
                 cols={
                   props.insert && !isMobile
-                    ? 3.25
+                    ? 3
                     : width === "xs"
-                    ? 3.25
+                    ? 3
                     : width === "sm"
-                    ? 5.5
+                    ? 5
                     : width === "md"
-                    ? 6.5
+                    ? 6
                     : width === "lg"
-                    ? 7.5
-                    : 8.5
-                }>
+                    ? 7
+                    : 8
+                  }
+                >
                 {binMetrics &&
                   binMetrics.grainInventory.map((inv, key) => (
-                    <GridListTile key={key}>
+                    <ImageListItem key={key}>
                       <BinUtilizationChart
                         grain={inv.grainType}
                         customUnit={useWeight ? " mT" : " bu"}
@@ -939,7 +942,7 @@ export default function Bins(props: Props) {
                         }}
                         grainActive={contentFilter === pond.Grain[inv.grainType]}
                       />
-                    </GridListTile>
+                    </ImageListItem>
                   ))}
                 {binMetrics &&
                   binMetrics.customInventory.map((inv, key) => {
@@ -959,7 +962,7 @@ export default function Bins(props: Props) {
                     }
 
                     return (
-                      <GridListTile key={key}>
+                      <ImageListItem key={key}>
                         <BinUtilizationChart
                           grain={pond.Grain.GRAIN_CUSTOM}
                           bushelAmount={amount}
@@ -973,10 +976,10 @@ export default function Bins(props: Props) {
                           customLabel={inv.name}
                           customColour={stringToMaterialColour(inv.name)}
                         />
-                      </GridListTile>
+                      </ImageListItem>
                     );
                   })}
-              </GridList> */}
+              </ImageList>
             </Box>
           ) : (
             <Typography color="textSecondary" style={{ margin: "2rem", marginTop: "0rem" }}>