adds Daily Diapers Bar Chart

src/components/diapers/widgets/dailychart/ChartDaily.js

@@ -0,0 +1,116 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+// libs
+import { GoogleCharts } from 'google-charts';
+
+// Styles
+import styles from "./chartDaily.scss";
+import { useEffect } from 'react';
+
+const ChartDaily = props => {
+    let { diapers, maxDays = 7 } = props;
+    let timeout = null;
+    let data = [];
+
+    const prepareData = () => {
+        let date = '';
+        let numPee = 0;
+        let numPoo = 0;
+        let numUndef = 0;
+
+        diapers.forEach(diaper => {
+            if (data.length < maxDays) {
+                let tempDate = new Date(diaper.time).toLocaleDateString();
+                // check if we have reached the next day
+                if (tempDate !== date) {
+                    // add last day to data array if not null
+                    if (date !== '') {
+                        data.push([date, numUndef, numPee, numPoo]);
+                    }
+                    date = tempDate;
+                    numPee = 0;
+                    numPoo = 0;
+                    numUndef = 0;
+                }
+                // increment Pee and Poo
+                numPee += diaper.pee ? 1 : 0;
+                numPoo += diaper.poo ? 1 : 0;
+                numUndef += !diaper.poo && !diaper.pee ? 1 : 0;
+            }
+        });
+        if (data.length < maxDays) {
+            data.push([date, numUndef, numPee, numPoo]);
+        }
+    }
+
+    function prepareChart() {
+        var dataTable = new GoogleCharts.api.visualization.DataTable();
+        dataTable.addColumn("string", "Date");
+        dataTable.addColumn("number", "Not set");
+        dataTable.addColumn("number", "Pee");
+        dataTable.addColumn("number", "Poo");
+
+        data.reverse();
+        dataTable.addRows(data);
+
+        var options = {
+            title: "Diapers per Day",
+            isStacked: true,
+            colors: ['grey', styles.yellow, styles.brown],
+        };
+
+        var chart = new GoogleCharts.api.visualization.ColumnChart(
+            document.getElementById("diaperschart")
+        );
+
+        chart.draw(dataTable, options);
+    }
+
+    const drawChart = () => {
+        if (diapers && diapers.length > 0) {
+            data = [];
+            prepareData();
+            GoogleCharts.load(prepareChart, { packages: ["corechart", "bar"] });
+        }
+    }
+
+    if (diapers && diapers.length > 0) {
+        prepareData();
+        GoogleCharts.load(prepareChart, { packages: ["corechart", "bar"] });
+    }
+
+    const _handleWindowResize = () => {
+        window.clearTimeout(timeout);
+        timeout = window.setTimeout(() => {
+            drawChart();
+        }, 1000);
+    }
+
+    const ChartContainer = () => {
+        return (
+            <div id={"diaperschart"}></div>
+        );
+    };
+
+    useEffect(() => {
+        window.addEventListener("resize", _handleWindowResize);
+
+        return (() => {
+            window.removeEventListener("resize", _handleWindowResize);
+        })
+    }, [diapers]);
+
+    return (
+        <article className={props.className}>
+            <span className="card_icon fas fa-chart-line fa-3x"></span>
+            <ChartContainer><p>Still gathering Data...</p></ChartContainer>
+        </article>
+    );
+}
+
+ChartDaily.propTypes = {
+
+}
+
+export default ChartDaily

src/components/diapers/widgets/dailychart/chartDaily.scss

@@ -0,0 +1,7 @@
+@import '../../../../assets/scss/colors';
+
+:export {
+    timelineSingleColor: $highlight;
+    yellow: $yellow;
+    brown: $brown;
+}

src/components/naps/charts/sleeptime/ChartSleeptime.js

@@ -156,6 +156,7 @@ const ChartSleeptime = props => {
         );
     }
 
+    // TODO: add annotations with sleeptime to datapoints
     return (
         <article className={props.className + " card"}>
             <span className="card_icon fas fa-chart-line fa-3x"></span>

src/pages/dashboard/Dashboard.js

@@ -14,6 +14,7 @@ import AgeWidget from 'components/widgets/AgeWidget';
 import BirthdayWidget from 'components/widgets/BirthdayWidget';
 import LastDiaperWidget from 'components/diapers/widgets/lastdiaper/LastDiaperWidget';
 import AddDiaperButton from 'components/diapers/widgets/adddiaper/AddDiaperButton';
+import ChartDaily from 'components/diapers/widgets/dailychart/ChartDaily';
 
 const Dashboard = (props) => {
     return (
@@ -40,6 +41,9 @@ const Dashboard = (props) => {
                 diapers={props.diapers}
                 diapersController={props.diapersController}
             />
+            <article className="card">
+                <ChartDaily diapers={props.diapers} maxDays={4} />
+            </article>
             {props.currentUser.settings.childBirthday > 0 ? (
                 <AgeWidget
                     birthday={props.currentUser.settings.childBirthday}

src/pages/diapers/Diapers.js

@@ -9,10 +9,10 @@ import { toast } from "react-toastify";
 import './diapers.scss';
 import DiapersForm from 'components/diapers/diapersform/DiapersForm';
 import DiaperslistWidget from 'components/diapers/widgets/diaperslist/DiaperslistWidget';
+import ChartDaily from 'components/diapers/widgets/dailychart/ChartDaily';
 
 const Diapers = props => {
     const onDiaperSave = (diaper) => {
-        console.log(diaper);
         props.diapersController.createDiaper(diaper, () => {
             toast.success('Diaper saved!');
         });
@@ -25,6 +25,9 @@ const Diapers = props => {
             <article className="card diaperslist">
                 <DiaperslistWidget diapers={props.diapers} diapersController={props.diapersController} />
             </article>
+            <article className="card dailychart">
+                <ChartDaily diapers={props.diapers} />
+            </article>
         </section>
     );
 }

src/pages/diapers/diapers.scss

@@ -47,4 +47,19 @@ section.page_diapers {
         }
     }
 
+    .dailychart {
+        grid-column: 1;
+        grid-row: 2;
+
+        @media (min-width: $breakpoints_m) {
+            grid-column: 1 / span 2;
+            grid-row: 2;
+        }
+
+        @media (min-width: $breakpoints_l) {
+            grid-column: 1 / span 3;
+            grid-row: 2;
+        }
+    }
+
 }