Andi/filtering

src/lib/utils.js

@@ -116,11 +116,24 @@ export function getPrevMonths(n) {
   return [...Array(n)].map(_i => m.add(1, 'months').format('MMM[\n]YYYY'));
 }
 
+export function getMonthsBetween(startDate, endDate) {
+  const dateStart = moment(startDate);
+  const dateEnd = moment(endDate);
+  const timeValues = [];
+
+  while (dateEnd > dateStart || dateStart.format('M') === dateEnd.format('M')) {
+    timeValues.push(dateStart.format('YYYY-MM'));
+    dateStart.add(1, 'month');
+  }
+  return timeValues;
+}
+
 export default {
   getAllFarmsForKS,
   getDateOptions,
   getPrevMonths,
   getTotalHarvest,
   updateFarmAndCertification,
-  getTotalHarvestData
+  getTotalHarvestData,
+  getMonthsBetween
 };

src/screens/shared/dateFilterMenu/DateFilterMenu.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import React from 'react';
 
 import { withStyles } from '@material-ui/core/styles';
@@ -37,7 +38,8 @@ class DateFilterMenu extends React.PureComponent {
       filterBy: null,
       showDropdown: false,
       startDate: '',
-      endDate: ''
+      endDate: '',
+      applied: false
     };
   }
 
@@ -61,10 +63,10 @@ class DateFilterMenu extends React.PureComponent {
     // TO-DO onChange needs to take start and end date, if those are changed
     if (startDate && endDate) {
       onChange([startDate, endDate]);
+      this.setState({ applied: true });
     } else {
       onChange(filterBy);
     }
-
     this.setState({ anchorEl: null });
   };
 
@@ -97,9 +99,17 @@ class DateFilterMenu extends React.PureComponent {
     this.setState({ endDate: event.target.value });
   };
 
+  filterLabel = (startDate, endDate) => {
+    const { applied } = this.state;
+    if (startDate !== '' && endDate !== '' && applied === true) {
+      return startDate.concat(' to ').concat(endDate);
+    }
+    return 'Date Filters';
+  };
+
   render() {
     const { classes } = this.props;
-    const { anchorEl, filterBy, showDropdown } = this.state;
+    const { anchorEl, filterBy, showDropdown, startDate, endDate } = this.state;
 
     return (
       <div>
@@ -111,7 +121,9 @@ class DateFilterMenu extends React.PureComponent {
           startIcon={<CalendarToday />}
           endIcon={<KeyboardArrowDown />}
         >
-          <h3 className={classes.label}>Date Filters</h3>
+          <h3 className={classes.label}>
+            {this.filterLabel(startDate, endDate)}
+          </h3>
         </Button>
         <Popper
           className={classes.popper}
@@ -127,7 +139,7 @@ class DateFilterMenu extends React.PureComponent {
             handleStart={this.handleStartDate}
             handleEnd={this.handleEndDate}
           />
-          <ListItem button onClick={this.handleExpand}>
+          {/* <ListItem button onClick={this.handleExpand}>
             <h3 className={classes.options}>Advanced Options</h3>
             {showDropdown ? <ExpandLess /> : <ExpandMore />}
           </ListItem>
@@ -136,7 +148,7 @@ class DateFilterMenu extends React.PureComponent {
               value={filterBy}
               handleClick={this.handleRadioClick}
             />
-          </Collapse>
+          </Collapse> */}
         </Popper>
       </div>
     );

src/screens/shared/graphs/Graph.js

@@ -45,7 +45,7 @@ class Graph extends React.Component {
     };
   }
 
-  getGraphProps = (type, farm) => {
+  getGraphProps = (type, farm, filterBy) => {
     switch (type) {
       case 'certification':
         return {
@@ -55,17 +55,17 @@ class Graph extends React.Component {
       case 'production':
         return {
           label: 'Farm Production History',
-          graph: <ProductionGraph />
+          graph: <ProductionGraph filterBy={filterBy} />
         };
       case 'recentHarvests':
         return {
           label: 'Recent Harvests',
-          graph: <RecentHarvestsGraph farm={farm} />
+          graph: <RecentHarvestsGraph farm={farm} filterBy={filterBy} />
         };
       case 'topItems':
         return {
           label: 'Top 5 Items',
-          graph: <TopItemsGraph farm={farm} />
+          graph: <TopItemsGraph farm={farm} filterBy={filterBy} />
         };
       case 'harvestLogs':
         return {
@@ -83,7 +83,8 @@ class Graph extends React.Component {
 
   render() {
     const { classes, type, farm } = this.props;
-    const { label, graph } = this.getGraphProps(type, farm);
+    const { filterBy } = this.state;
+    const { label, graph } = this.getGraphProps(type, farm, filterBy);
 
     return (
       <div className={classes.root}>

src/screens/shared/graphs/ProductionGraph.js

@@ -13,7 +13,8 @@ import {
 import {
   getPrevMonths,
   getMonthsofYear,
-  getTotalHarvestData
+  getTotalHarvestData,
+  getMonthsBetween
 } from '@lib/utils';
 
 const fontProps = {
@@ -62,12 +63,9 @@ class ProductionGraph extends React.PureComponent {
   }
 
   async componentDidMount() {
-    // Fetch all the "total harvest" records for the specified farm.
+    // Fetch all the "total harvest" records in the database.
     const totalHarvest = await getTotalHarvestData();
-    console.log(totalHarvest);
-    const dateList = [];
-    const cropsList = [];
-    const quantitiesList = [];
+    const dateList = []; const cropsList = []; const quantitiesList = [];
     for (let h = 0; h < totalHarvest.length; h += 1) {
       const { created, crops, quantities } = totalHarvest[h];
       dateList[h] = created.slice(0, 7); // takes YYYY-MM format
@@ -77,7 +75,7 @@ class ProductionGraph extends React.PureComponent {
     this.setState({ dateList, cropsList, quantitiesList });
   }
 
-  filterByDate = (dateList, cropsList, quantitiesList) => {
+  filterByDate = (dateList, cropsList, quantitiesList, filterBy) => {
     const dict = [];
     const months = getMonthsofYear();
     for (let i = 0; i < dateList.length; i += 1) {
@@ -90,9 +88,28 @@ class ProductionGraph extends React.PureComponent {
     }
 
     // Take the recent 9 months and match them up to the data in `dict`, filling in months without production with 0.
-    const recentDates = getPrevMonths(9);
-    const recentCrops = ['', '', '', '', '', '', '', '', ''];
-    const recentQuantities = ['', '', '', '', '', '', '', '', ''];
+    let recentDates = [];
+    let recentCrops = [];
+    let recentQuantities = [];
+    if (filterBy !== null) {
+      recentDates = getMonthsBetween(filterBy[0], filterBy[1]);
+      // Reformatting the dates (2021-03 to Mar\n2021)
+      for (let i = 0; i < recentDates.length; i += 1) {
+        const year = recentDates[i].slice(0, 4);
+        // eslint-disable-next-line radix
+        const month = months[parseInt(recentDates[i].slice(5, 7)) - 1];
+        const dateFormatted = `${String(month)}\n${year}`;
+        recentDates[i] = dateFormatted;
+      }
+      recentCrops = new Array(recentDates.length).fill('');
+      recentQuantities = new Array(recentDates.length).fill('');
+      // DEFAULT: Take the recent 9 months and match them up to the data in `dict`, filling in months without production with 0.
+    } else {
+      recentDates = getPrevMonths(9);
+      recentCrops = ['', '', '', '', '', '', '', '', ''];
+      recentQuantities = ['', '', '', '', '', '', '', '', ''];
+    }
+
     for (let i = 0; i < dict.length; i += 1) {
       for (let j = 0; j < recentDates.length; j += 1) {
         if (recentDates[j] === dict[i][0]) {
@@ -181,11 +198,6 @@ class ProductionGraph extends React.PureComponent {
   };
 
   getTopFourItems = dict => {
-    // Index 0: Oct\n2020 ; Index 1: Nov\n2020
-    // 4th: ["N/A", "N/A"]
-    // 3rd: ["N/A", "N/A"]
-    // 2nd Highest: ["Pineapple", "Tomato Cherry"]
-    // Highest: ["Corn", "Tomato Roma"]
     const level5other = [];
     const level4 = [];
     const level3 = [];
@@ -202,9 +214,24 @@ class ProductionGraph extends React.PureComponent {
     return [level1, level2, level3, level4, level5other];
   };
 
-  getData = dict => {
+  getData = (dict, filterBy) => {
+    let labels = []
+    if (filterBy !== null) {
+      const months = getMonthsofYear();
+      labels = getMonthsBetween(filterBy[0], filterBy[1]);
+      // Reformatting the dates (2021-03 to Mar\n2021)
+      for (let i = 0; i < labels.length; i += 1) {
+        const year = labels[i].slice(0, 4);
+        // eslint-disable-next-line radix
+        const month = months[parseInt(labels[i].slice(5, 7)) - 1];
+        const dateFormatted = `${String(month)}\n${year}`;
+        labels[i] = dateFormatted;
+      }
+    }
+    else {
+      labels = getPrevMonths(9);
+    }
     // produces data object for each segmenet of stacked bar graph
-    const labels = getPrevMonths(9);
     const level5other = [];
     const level4 = [];
     const level3 = [];
@@ -235,9 +262,14 @@ class ProductionGraph extends React.PureComponent {
 
   render() {
     const { dateList, cropsList, quantitiesList } = this.state;
-    console.log(dateList, cropsList, quantitiesList);
-    const lists = this.filterByDate(dateList, cropsList, quantitiesList);
-    console.log(lists);
+    const { filterBy } = this.props;
+    const lists = this.filterByDate(
+      dateList,
+      cropsList,
+      quantitiesList,
+      filterBy
+    );
+
     const productionDict = [];
     for (let i = 0; i < lists.dateStringList.length; i += 1) {
       productionDict[i] = [
@@ -248,15 +280,13 @@ class ProductionGraph extends React.PureComponent {
         )
       ];
     }
-    console.log(productionDict);
 
     for (let i = 0; i < productionDict.length; i += 1) {
       productionDict[i][1] = this.sortData(
         productionDict[i][1].cropsToQuantity
       );
     }
-    console.log(productionDict);
-    const data = this.getData(productionDict);
+    const data = this.getData(productionDict, filterBy);
 
     return (
       <VictoryChart padding={48} height={250} width={600}>

src/screens/shared/graphs/RecentHarvestsGraph.js

@@ -1,5 +1,10 @@
 import React from 'react';
-import { getPrevMonths, getTotalHarvest, getMonthsofYear } from '@lib/utils';
+import {
+  getPrevMonths,
+  getTotalHarvest,
+  getMonthsofYear,
+  getMonthsBetween
+} from '@lib/utils';
 import FarmProfileGraph from './FarmProfileGraph';
 
 class RecentHarvestsGraph extends React.PureComponent {
@@ -13,7 +18,6 @@ class RecentHarvestsGraph extends React.PureComponent {
 
   async componentDidMount() {
     const { farm } = this.props;
-
     // Fetch all the "total harvest" records for the specified farm.
     const totalHarvest =
       farm.totalHarvestIds === undefined // If there are no harvest logs under the farm ID, then return an empty list.
@@ -31,7 +35,7 @@ class RecentHarvestsGraph extends React.PureComponent {
     this.setState({ dateList, totalList });
   }
 
-  getData = (dateList, totalList) => {
+  getData = (dateList, totalList, filterBy) => {
     // Reformatting the dates (2021-03 to Mar\n2021)
     const dict = [];
     const months = getMonthsofYear();
@@ -41,13 +45,31 @@ class RecentHarvestsGraph extends React.PureComponent {
       const month = months[parseInt(dateList[i].slice(5, 7)) - 1];
       const dateFormatted = `${String(month)}\n${year}`;
       // Creating a dictionary mapping dates to its corresponding total production quantity.
+      // Note: Each farm only has 1 "total harvest" record per month, so aggregation of total production pounds is not needed.
       dict[i] = [dateFormatted, totalList[i]];
     }
 
-    // Take the recent 9 months and match them up to the data in `dict`, filling in months without production with 0.
-    // Note: Each farm only has 1 "total harvest" record per month, so aggregation of total production pounds is not needed.
-    const recentDates = getPrevMonths(9);
-    const recentValues = [0, 0, 0, 0, 0, 0, 0, 0, 0];
+    // DURING FILTERING: Parse the selected months
+    let recentDates = [];
+    let recentValues = [];
+    if (filterBy !== null) {
+      recentDates = getMonthsBetween(filterBy[0], filterBy[1]);
+      // Reformatting the dates (2021-03 to Mar\n2021)
+      for (let i = 0; i < recentDates.length; i += 1) {
+        const year = recentDates[i].slice(0, 4);
+        // eslint-disable-next-line radix
+        const month = months[parseInt(recentDates[i].slice(5, 7)) - 1];
+        const dateFormatted = `${String(month)}\n${year}`;
+        recentDates[i] = dateFormatted;
+      }
+      recentValues = new Array(recentDates.length).fill(0);
+      // DEFAULT: Take the recent 9 months and match them up to the data in `dict`, filling in months without production with 0.
+    } else {
+      recentDates = getPrevMonths(9);
+      recentValues = [0, 0, 0, 0, 0, 0, 0, 0, 0];
+    }
+
+    // Fills in the empty 0 values with values from the dictionary
     for (let i = 0; i < dict.length; i += 1) {
       for (let j = 0; j < recentDates.length; j += 1) {
         if (recentDates[j] === dict[i][0]) {
@@ -64,8 +86,9 @@ class RecentHarvestsGraph extends React.PureComponent {
   };
 
   render() {
+    const { filterBy } = this.props;
     const { dateList, totalList } = this.state;
-    const { labels, values } = this.getData(dateList, totalList);
+    const { labels, values } = this.getData(dateList, totalList, filterBy);
 
     return (
       <FarmProfileGraph