4031: Adds data to production component

Author: greensomes

package-lock.json

@@ -61,6 +61,7 @@
     "jest-image-snapshot": "^4.2.0",
     "lazy.js": "^0.5.1",
     "lodash": "^4.17.20",
+    "millify": "^6.1.0",
     "ogr2ogr": "^2.0.0",
     "pg": "^7.18.2",
     "prop-types": "^15.7.2",

package.json

@@ -1,24 +1,89 @@
 import React from 'react';
-import { Box, Typography } from '@material-ui/core';
+import { Box, Typography, Grid } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles'
+import millify from 'millify'
+import oilIconUrl from '../../../images/icons/icon-oil.svg';
+import gasIconUrl from '../../../images/icons/icon-gas.svg';
+import coalIconUrl from '../../../images/icons/icon-coal.svg';
+import PercentDifference from '../../utils/PercentDifference';
+import { getFiscalYear } from '../../utils/nrrdUtils'
 
 const useStyles = makeStyles({
   h3: {
     marginTop: '0.5rem',
     marginBottom: '1rem',
     textAlign: 'center'
-  },
+  }
 })
 
 
-export default function FYProductionSummary() {
+export default function FYProductionSummary({ currentFYData, prevFYData }) {
   const classes = useStyles()
 
+  const currentOil = currentFYData.find((i) => i.commodity === 'Oil');
+  const currentGas = currentFYData.find((i) => i.commodity === 'Gas');
+  const currentCoal = currentFYData.find((i) => i.commodity === 'Coal');
+
+  const previousOil = prevFYData.find((i) => i.commodity === 'Oil');
+  const previousGas = prevFYData.find((i) => i.commodity === 'Gas');
+  const previousCoal = prevFYData.find((i) => i.commodity === 'Coal');
+
   return (
     <Box bgcolor="primary.main" mb={2} pt={0.5} pb={2} pl={3} pr={3} borderRadius={10}>
       <Typography variant="h3" className={classes.h3}>
         Production
       </Typography>
+      <Grid container spacing={1}>
+        <Grid item>
+          <img src={oilIconUrl} alt="Logo" width={30}/>
+        </Grid>
+        <Grid item>
+          <Typography component="strong" variant='inherit'>
+            Oil: { millify(currentOil.volume, { precision: 1 }).replace('M', ' million')} { currentOil.unit_abbr }
+          </Typography>
+        </Grid>
+        <Grid item style={{ marginLeft: "auto" }}>
+          <Typography variant='inherit'>
+            <PercentDifference 
+              currentAmount={currentOil.volume} 
+              previousAmount={previousOil.volume} /> from FY{ (getFiscalYear() - 1) % 100 }
+          </Typography>
+        </Grid>
+      </Grid>
+      <Grid container spacing={1}>
+        <Grid item>
+          <img src={gasIconUrl} alt="Logo" width={30}/>
+        </Grid>
+        <Grid item>
+          <Typography component="strong" variant='inherit'>
+            Gas: { millify(currentGas.volume, { precision: 1 }).replace('B', ' billion')} { currentGas.unit_abbr }
+          </Typography>
+        </Grid>
+        <Grid item style={{ marginLeft: "auto" }}>
+          <Typography variant='inherit'>
+            <PercentDifference 
+              currentAmount={currentGas.volume} 
+              previousAmount={previousGas.volume} /> from FY{ (getFiscalYear() - 1) % 100 }
+          </Typography>
+        </Grid>
+      </Grid>
+      <Grid container spacing={1}>
+        <Grid item>
+          <img src={coalIconUrl} alt="Logo" width={30}/>
+        </Grid>
+        <Grid item>
+          <Typography component="strong" variant='inherit'>
+            Coal: { millify(currentCoal.volume, { precision: 1 }).replace('M', ' million')} { currentCoal.unit_abbr }
+          </Typography>
+        </Grid>
+        <Grid item style={{ marginLeft: "auto" }}>
+          <Typography variant='inherit'>
+            <PercentDifference 
+              currentAmount={currentCoal.volume} 
+              previousAmount={previousCoal.volume} /> from FY{ (getFiscalYear() - 1) % 100 }
+          </Typography>
+        </Grid>
+      </Grid>
     </Box>
   )
 }

src/components/sections/FYProductionSummary/FYProductionSummary.js

@@ -3,13 +3,43 @@ import FyAtAGlance from '../FYAtAGlance'
 import { FYProductionSummary } from '../FYProductionSummary';
 import { LPMonthlyFactSheet } from '../LPMonthlyFactsheet'
 import { WhatsNew } from '../WhatsNew';
+import { gql, useQuery } from '@apollo/client';
+
+const atAGlanceQuery = gql`
+  query FYDataAtAGlance {
+    productionCurrFy: curr_fy_production_summary_v {
+      commodity
+      unit_abbr
+      volume
+    }
+
+    productionPrevFy: prev_fy_production_summary_v {
+      commodity
+      unit_abbr
+      volume
+    }
+
+    max_fy_month_by_dataset_v {
+      fiscal_month
+      dataset
+    }
+  }
+`
 
 export default function LandingPageSidebar() {
+  const { loading, error, data } = useQuery(atAGlanceQuery);
+
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error: {error.message}</p>;
+
+  console.log(data)
   return(
     <>
       <FyAtAGlance />
 
-      <FYProductionSummary />
+      <FYProductionSummary 
+        currentFYData={ data.productionCurrFy }
+        prevFYData={ data.productionPrevFy }/>
 
       <LPMonthlyFactSheet />
 

src/components/sections/LandingPageSidebar/LandingPageSidebar.js

@@ -33,14 +33,15 @@ const useStyles = makeStyles(theme => ({
 const PercentDifference = ({ currentAmount, previousAmount }) => {
   const classes = useStyles()
   const percentChange = (currentAmount < previousAmount ? -1 : 1) * (Math.abs(currentAmount - previousAmount) / Math.abs(previousAmount)) * 100
+
   let icon
-  if (percentChange > 0) {
+  if (Math.round(percentChange) > 0) {
     icon = <ArrowUpwardIcon className={classes.trendIconUp} alt="Arrow pointing up indicating an increase." />
   }
-  else if (percentChange < 0) {
+  else if (Math.round(percentChange) < 0) {
     icon = <ArrowDownwardIcon className={classes.trendIconDown} alt="Arrow pointing down indicating a decrease." />
   }
-  else if (percentChange === 0) {
+  else if (Math.round(percentChange) === 0) {
     icon = <ArrowForwardIcon className={classes.trendIconDown} alt="Arrow pointing right indicating no change." />
   }
 

src/components/utils/PercentDifference/PercentDifference.js

@@ -19,7 +19,7 @@ import { Tabtastic, TabtasticTab } from '../components/layouts/Tabtastic'
       width: "100%",
       padding: "0 0 10px",
     }}>
-  <Container maxWidth="lg">
+  <Container maxWidth={false}>
     <Grid container spacing={0}>
       <Grid item xs={12} md={12}>
         <Typography variant="h2" component="h1">About natural resources revenue data</Typography>
@@ -40,7 +40,7 @@ import { Tabtastic, TabtasticTab } from '../components/layouts/Tabtastic'
     </Grid>
   </Container>
   </Box>
-  <Container maxWidth="lg">
+  <Container maxWidth={false}>
     <Box mb={2}>
       <Grid container spacing={2}>
         <Grid item xs={12} lg={8}>