adds Annotations to Sleeptimes Chart

RingoRohe · May 5, 2020 · 3fbb4e7 · 3fbb4e7
1 parent 7db941b
commit 3fbb4e7
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 17 deletions.
diff --git a/src/components/diapers/widgets/dailychart/ChartDaily.js b/src/components/diapers/widgets/dailychart/ChartDaily.js
@@ -72,9 +72,7 @@ const ChartDaily = props => {
             chartArea: {
                 left: 20,
                 top: 30,
-                right: 30,
-                bottom: 10,
-                // height: "80%"
+                bottom: 10
             },
         };
 

diff --git a/src/components/naps/charts/sleeptime/ChartSleeptime.js b/src/components/naps/charts/sleeptime/ChartSleeptime.js
@@ -11,6 +11,7 @@ import { useEffect } from 'react';
 const ChartSleeptime = props => {
     let data = [];
     let timeout = null;
+    const { maxDays = 5 } = props;
 
     const sortNapsIntoDays = (naps) => {
         let sortedNaps = [];
@@ -19,7 +20,7 @@ const ChartSleeptime = props => {
         *   Walk through all naps und sort them to its belonging Day.
         *   If a Nap reaches over two Days, split it.
         */
-        
+
         naps.forEach((nap) => {
             let offset = 24 * 60 * 60 * 1000; // 1 day
             let day = null;
@@ -41,7 +42,7 @@ const ChartSleeptime = props => {
             } else {
                 // nap was overnight so split it into two days
                 // part one: start until midnight (startdate stays untouched)
-                
+
                 // change end Date to 23:59:59 of start Day
                 let endOfFirstPart = new Date(endDate);
                 endOfFirstPart.setHours(23, 59, 59, 999);
@@ -84,6 +85,7 @@ const ChartSleeptime = props => {
         sortedNaps.sort((a, b) => a.day - b.day);
 
         let dates = {};
+        sortedNaps.reverse();
         sortedNaps.forEach((napObject) => {
             const date = new Date(napObject.day);
 
@@ -94,21 +96,26 @@ const ChartSleeptime = props => {
         });
 
         for (let date in dates) {
-            let h, m;
-            h = Math.floor(dates[date] / 1000 / 60 / 60);
-            m = Math.floor((dates[date] / 1000 / 60 / 60 - h) * 60);
-
-            data.push([
-                date,
-                timeToDecimal(`${h}:${m}`)
-            ]);
+            if (data.length < (maxDays + 2)) {
+                let h, m;
+                h = Math.floor(dates[date] / 1000 / 60 / 60);
+                m = Math.floor((dates[date] / 1000 / 60 / 60 - h) * 60);
+
+                const decimalTime = timeToDecimal(`${h}:${m}`);
+                data.push([
+                    date,
+                    decimalTime,
+                    decimalTime
+                ]);
+            }
         }
     }
 
     function drawCharts() {
         // remove first and last day from data
         data.pop();
         data.shift();
+        data.reverse();
 
         if (data.length > 0) {
             const container = document.getElementById("sleeptimechart");
@@ -117,6 +124,7 @@ const ChartSleeptime = props => {
 
             dataTable.addColumn("string", "Date");
             dataTable.addColumn("number", "Hours of Sleep");
+            dataTable.addColumn({ type: "number", role: "annotation" });
             dataTable.addRows(data);
 
             const min = Math.floor(data.reduce((a, b) => a[1] < b[1] ? a : b)[1]) - 2;
@@ -126,11 +134,16 @@ const ChartSleeptime = props => {
                 vAxis: {
                     title: "Hours",
                     viewWindow: {
-                        min: min,
-                        max: max
-                    }
+                        min: min<0 ? 0 : min,
+                        max: max,
+                    },
                 },
-                colors: [styles.timelineSingleColor]
+                colors: [styles.timelineSingleColor],
+                chartArea: {
+                    left: 40,
+                    top: 30,
+                    bottom: 10,
+                }
             };
 
             chart.draw(dataTable, options);