adds Chart to Bodydata Page

src/App.js

@@ -18,18 +18,19 @@ import ProfileMenu from 'components/profile/ProfileMenuView';
 import Naps from 'pages/naps/naps/Naps';
 import EditNap from 'pages/naps/edit/EditNap';
 import Diapers from 'pages/diapers/Diapers';
+import EditDiaper from 'pages/diapers/edit/EditDiaper';
 import Bodydata from 'pages/bodydata/Bodydata';
+import EditMeasurement from 'pages/bodydata/edit/EditMeasurement';
 import Settings from 'pages/settings/Settings';
 
 // Controllers
 import NapsController from 'controllers/NapsController';
 import UserController from 'controllers/UserController';
 import DiapersController from 'controllers/DiapersController';
+import BodydataController from 'controllers/BodydataController';
 
 // Libs
 import { toast } from "react-toastify";
-import EditDiaper from 'pages/diapers/edit/EditDiaper';
-import BodydataController from 'controllers/BodydataController';
 
 function App() {
     toast.configure({
@@ -109,6 +110,7 @@ function App() {
                                 runningNap={runningNap}
                                 naps={naps}
                                 diapers={diapers}
+                                measurements={measurements}
                             />
                         )}
                     />
@@ -155,7 +157,10 @@ function App() {
                         exact
                         path="/diapers/edit/:id"
                         render={(props) => (
-                            <EditDiaper {...props} diapersController={diapersController} />
+                            <EditDiaper
+                                {...props}
+                                diapersController={diapersController}
+                            />
                         )}
                     />
                     <Route
@@ -170,6 +175,16 @@ function App() {
                             />
                         )}
                     />
+                    <Route
+                        exact
+                        path="/bodydata/edit-measurement/:id"
+                        render={(props) => (
+                            <EditMeasurement
+                                {...props}
+                                bodydataController={bodydataController}
+                            />
+                        )}
+                    />
                     <Route
                         exact
                         path="/settings"

src/components/bodydata/measurementform/MeasurementForm.js

@@ -11,14 +11,21 @@ import "./measurements.scss";
 
 const MeasurementForm = (props) => {
     const {
-        propstime = Date.now(),
-        propsweight = "",
-        propsbodysize = "",
-        propsheadcircumference = "",
         headline = 'new Measurement',
         submitText = 'save'
     } = props;
 
+    let propstime = Date.now();
+    let propsweight = "";
+    let propsbodysize = "";
+    let propsheadcircumference = "";
+    if (props.measurement) {
+        propstime = props.measurement.time || Date.now();
+        propsweight = props.measurement.weight || "";
+        propsbodysize = props.measurement.bodySize || "";
+        propsheadcircumference = props.measurement.headCircumference || "";
+    }
+
     let [time, setTime] = useState(propstime);
     let [weight, setWeight] = useState(propsweight);
     let [bodySize, setBodySize] = useState(propsbodysize);

src/components/bodydata/widgets/chart/BodydataChart.js

@@ -0,0 +1,151 @@
+// React
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useEffect } from "react";
+
+// libs
+import { GoogleCharts } from "google-charts";
+
+const BodydataChart = props => {
+    let { measurements = 0 } = props;
+    let timeout = null;
+    let data = [];
+
+    const prepareData = () => {
+        if (measurements && measurements.length > 0) {
+            measurements.forEach(measurement => {
+                let item = [];
+                // set Date
+                let date = new Date(measurement.time);
+                date.setHours(0, 0, 0, 0);
+                item.push(date);
+
+                // set Weight
+                if (measurement.hasWeight()) {
+                    item.push(parseInt(measurement.weight, 10));
+                    item.push((measurement.weight / 1000).toLocaleString() + ' kg');
+                } else {
+                    item.push(null);
+                    item.push(null);
+                }
+
+                // set Body Size
+                if (measurement.hasBodySize()) {
+                    item.push(parseFloat(measurement.bodySize, 10));
+                    item.push(measurement.bodySize + ' cm');
+                } else {
+                    item.push(null);
+                    item.push(null);
+                }
+
+                // set Head Size
+                if (measurement.hasHeadCircumference()) {
+                    item.push(parseFloat(measurement.headCircumference, 10));
+                    item.push(measurement.headCircumference + ' cm');
+                } else {
+                    item.push(null);
+                    item.push(null);
+                }
+                data.push(item);
+            });
+        }
+    }
+
+    function prepareChart() {
+        const dataTable = new GoogleCharts.api.visualization.DataTable();
+        dataTable.addColumn("date", "Date");
+        dataTable.addColumn("number", "Weight");
+        dataTable.addColumn({ type: "string", role: "annotation" });
+        dataTable.addColumn("number", "Body Size");
+        dataTable.addColumn({ type: "string", role: "annotation" });
+        dataTable.addColumn("number", "Head Size");
+        dataTable.addColumn({ type: "string", role: "annotation" });
+
+        data.reverse();
+        dataTable.addRows(data);
+
+        var options = {
+            title: "Body Data",
+            isStacked: false,
+            series: {
+                0: { targetAxisIndex: 0 },
+                1: { targetAxisIndex: 1 },
+                2: { targetAxisIndex: 1 },
+            },
+            vAxes: {
+                0: {
+                    title: "g",
+                    viewWindow: {
+                        min: 1000,
+                    },
+                },
+                1: {
+                    title: "cm",
+                    viewWindow: {
+                        min: 20,
+                    },
+                },
+            },
+            backgroundColor: "transparent",
+            interpolateNulls: true,
+        };
+
+        const elem = document.querySelector("#bodydatachart");
+        if (elem) {
+            options.height = elem.offsetWidth*0.8;
+        }
+
+        var chart = new GoogleCharts.api.visualization.ComboChart(
+            document.getElementById("bodydatachart")
+        );
+
+        chart.draw(dataTable, options);
+    }
+
+    const drawChart = () => {
+        if (measurements && measurements.length > 0) {
+            data = [];
+            prepareData();
+            GoogleCharts.load(prepareChart, {
+                packages: ["corechart", "line"],
+            });
+        }
+    };
+
+    drawChart();
+
+    const _handleWindowResize = () => {
+        window.clearTimeout(timeout);
+        timeout = window.setTimeout(() => {
+            drawChart();
+        }, 400);
+    };
+
+    const ChartContainer = () => {
+        return <div id={"bodydatachart"}></div>;
+    };
+
+    useEffect(() => {
+        window.addEventListener("resize", _handleWindowResize);
+
+        return () => {
+            window.removeEventListener("resize", _handleWindowResize);
+        };
+        // eslint-disable-next-line
+    }, [measurements]);
+
+    return (
+        <article className={props.className}>
+            <span className="card_icon fas fa-chart-line fa-3x"></span>
+            <ChartContainer>
+                <p>Still gathering Data...</p>
+            </ChartContainer>
+        </article>
+    );
+}
+
+BodydataChart.propTypes = {
+    measurements: PropTypes.array.isRequired
+}
+
+export default BodydataChart

src/components/bodydata/widgets/chart/bodydatachart.scss

@@ -0,0 +1,9 @@
+@import '../../../../assets/scss/colors';
+
+#bodydatachart {
+    height: 100%;
+}
+
+:export {
+    timelineSingleColor: $highlight;
+}

src/components/bodydata/widgets/measurementslist/MeasurementslistListItem.js

@@ -34,7 +34,7 @@ const LastMeasurementsListItem = (props) => {
     };
 
     const onEditMeasurementButtonClicked = () => {
-        history.push(`/measurements/edit/${props.measurement.id}`);
+        history.push(`/bodydata/edit-measurement/${props.measurement.id}`);
     };
 
     if (props.measurement instanceof Headline) {

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

@@ -1,12 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useEffect } from 'react';
 
 // libs
 import { GoogleCharts } from 'google-charts';
 
 // Styles
 import styles from "./chartDaily.scss";
-import { useEffect } from 'react';
 
 const ChartDaily = props => {
     let { diapers, maxDays = 7 } = props;
@@ -110,7 +110,7 @@ const ChartDaily = props => {
         window.clearTimeout(timeout);
         timeout = window.setTimeout(() => {
             drawChart();
-        }, 1000);
+        }, 400);
     }
 
     const ChartContainer = () => {

src/pages/bodydata/Bodydata.js

@@ -12,9 +12,10 @@ import MeasurementslistWidget from 'components/bodydata/widgets/measurementslist
 import './bodydata.scss';
 import MeasurementForm from 'components/bodydata/measurementform/MeasurementForm';
 import Measurement from 'models/Measurement';
+import BodydataChart from 'components/bodydata/widgets/chart/BodydataChart';
 
 const Bodydata = props => {
-    const { bodydataController } = props;
+    const { bodydataController, measurements } = props;
     const onMeasurementFormSubmitted = (measurement) => {
         if (measurement.hasWeight()) {
             const weightMeasurement = new Measurement(measurement.time, measurement.weight);
@@ -48,10 +49,11 @@ const Bodydata = props => {
             </article>
             <article className="card measurementslist">
                 <MeasurementslistWidget
-                    measurements={props.measurements}
-                    bodydataController={props.bodydataController}
+                    measurements={measurements}
+                    bodydataController={bodydataController}
                 />
             </article>
+            <BodydataChart className="card bodydatachart" measurements={measurements} />
         </section>
     );
 }

src/pages/bodydata/bodydata.scss

@@ -23,22 +23,22 @@ section.page_bodydata {
 
         @media (min-width: $breakpoints_m) {
             grid-column: 1;
-            grid-row: 1;
+            grid-row: 2;
         }
 
         @media (min-width: $breakpoints_l) {
             grid-column: 1 / span 2;
-            grid-row: 1;
+            grid-row: 2;
         }
     }
 
     .measurementslist {
         grid-column: 1;
-        grid-row: 2;
+        grid-row: 3;
 
         @media (min-width: $breakpoints_m) {
             grid-column: 2;
-            grid-row: 1;
+            grid-row: 2;
 
             ul {
                 max-height: 20rem;
@@ -48,6 +48,21 @@ section.page_bodydata {
 
         @media (min-width: $breakpoints_l) {
             grid-column: 3;
+            grid-row: 2;
+        }
+    }
+
+    .bodydatachart {
+        grid-column: 1;
+        grid-row: 2;
+
+        @media (min-width: $breakpoints_m) {
+            grid-column: 1 / span 2;
+            grid-row: 1;
+        }
+
+        @media (min-width: $breakpoints_l) {
+            grid-column: 1 / span 3;
             grid-row: 1;
         }
     }