Merge pull request #1107 from Greenstand/extra-card

extra card
Greenstand · Sep 8, 2023 · 812ef59 · 812ef59
2 parents f587b2f + d5542b9
commit 812ef59
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 1 deletion.
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
@@ -32,6 +32,9 @@ import ReportingCard6 from '../reportingCards/ReportingCard6';
 import ReportingCard7 from '../reportingCards/ReportingCard7';
 import ReportingCard8 from '../reportingCards/ReportingCard8';
 import ReportingCard9 from '../reportingCards/ReportingCard9';
+import ReportingCard10 from '../reportingCards/ReportingCard10';
+import ReportingCard11 from '../reportingCards/ReportingCard11';
+import ReportingCard12 from '../reportingCards/ReportingCard12';
 import MenuItem from '@material-ui/core/MenuItem';
 import MenuMui from '@material-ui/core/Menu';
 import { format, subDays, formatDistanceToNow } from 'date-fns';
@@ -195,6 +198,17 @@ function Home(props) {
                 <Grid item xs={4}>
                   <ReportingCard8 startDate={startDate} endDate={endDate} />
                 </Grid>
+                <Grid item xs={4}>
+                  <ReportingCard10 startDate={startDate} endDate={endDate} />
+                </Grid>
+                {/*
+                <Grid item xs={4}>
+                  <ReportingCard11 startDate={startDate} endDate={endDate} />
+                </Grid>
+                */}
+                <Grid item xs={4}>
+                  <ReportingCard12 startDate={startDate} endDate={endDate} />
+                </Grid>
               </Grid>
             )}
           </div>

diff --git a/src/components/reportingCards/ReportingCard.js b/src/components/reportingCards/ReportingCard.js
@@ -173,7 +173,7 @@ function ReportingCard(props) {
           </Box>
           <Box mt={6} />
           {data ? (
-            data.top.slice(0, 4).map((item, i) => (
+            data.top?.slice(0, 4).map((item, i) => (
               <Box key={i} className={classes.box4}>
                 <Typography className={classes.name}>{item.name}</Typography>
                 <Typography className={classes.number}>

diff --git a/src/components/reportingCards/ReportingCard10.js b/src/components/reportingCards/ReportingCard10.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import ReportingCard from './ReportingCard';
+import useLoadData from './ReportingCard.hook';
+import NatureIcon from '@material-ui/icons/Nature';
+
+export default function ReportingCard10(props) {
+  const { startDate, endDate, /*disableSeeMore,*/ rows } = props;
+
+  const data = useLoadData(
+    startDate,
+    endDate,
+    'surviving_trees',
+    'trees',
+    undefined,
+    rows
+  );
+
+  return (
+    <ReportingCard
+      text={{
+        title: 'Surviving Trees',
+        text1: 'Total',
+      }}
+      icon={NatureIcon}
+      color="#76bb23"
+      data={data}
+      disableSeeMore={true}
+    />
+  );
+}
diff --git a/src/components/reportingCards/ReportingCard11.js b/src/components/reportingCards/ReportingCard11.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import ReportingCard from './ReportingCard';
+import useLoadData from './ReportingCard.hook';
+import NatureIcon from '@material-ui/icons/Nature';
+
+export default function ReportingCard10(props) {
+  const { startDate, endDate, /*disableSeeMore,*/ rows } = props;
+
+  const data = useLoadData(
+    startDate,
+    endDate,
+    'surviving_species',
+    'surviving_species',
+    undefined,
+    rows
+  );
+
+  return (
+    <ReportingCard
+      text={{
+        title: 'Surviving Species',
+        text1: 'Total',
+      }}
+      icon={NatureIcon}
+      color="#76bb23"
+      data={data}
+      disableSeeMore={true}
+    />
+  );
+}
diff --git a/src/components/reportingCards/ReportingCard12.js b/src/components/reportingCards/ReportingCard12.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import ReportingCard from './ReportingCard';
+import useLoadData from './ReportingCard.hook';
+import NatureIcon from '@material-ui/icons/Nature';
+
+export default function ReportingCard10(props) {
+  const { startDate, endDate, /*disableSeeMore,*/ rows } = props;
+
+  const data = useLoadData(
+    startDate,
+    endDate,
+    'surviving_catchments',
+    'catchments',
+    (d) => d.average,
+    rows
+  );
+
+  return (
+    <ReportingCard
+      text={{
+        title: 'Surviving Catchments',
+        text1: 'Average',
+      }}
+      icon={NatureIcon}
+      color="#76bb23"
+      data={data}
+      disableSeeMore={true}
+    />
+  );
+}