Add data summerization and reduce maximum stats range to 48 hours

modules/distribution/src/repository/jaggeryapps/iotserver/units/analiytics-graphs/public/css/legend.css

@@ -81,7 +81,7 @@
     float: right;
     padding-right: 10px;
     width: 0;
-    z-index: 999;
+    z-index: 1;
     position: relative;
     opacity: 0.7;
 }

modules/distribution/src/repository/jaggeryapps/iotserver/units/analytics/analytics.hbs

@@ -8,7 +8,7 @@
                     <hr>
                 </div>
             </div>
-            <div id="rangeSliderWrapper" class="pull-right" style="width: 550px;">
+            <div id="rangeSliderWrapper" class="pull-right" style="width: 620px;">
                 <div class="row-fluid">
                     <div class="span12">
                         <div id="dateRangePickerContainer">
@@ -16,14 +16,14 @@
                                 <button id="hour-btn" type="button"
                                         class="btn btn-default date-range">Hour
                                 </button>
-                                <button id="today-btn" type="button"
+                                <button id="h12-btn" type="button"
-                                        class="btn btn-default date-range">Day
+                                        class="btn btn-default date-range">12 Hours
                                 </button>
-                                <button id="week-btn" type="button"
+                                <button id="h24-btn" type="button"
-                                        class="btn btn-default date-range">Week
+                                        class="btn btn-default date-range">24 Hours
                                 </button>
-                                <button id="month-btn" type="button"
+                                <button id="h48-btn" type="button"
-                                        class="btn btn-default date-range">Month
+                                        class="btn btn-default date-range">48 Hours
                                 </button>
                                 <button id="date-range" type="button"
                                         class="btn btn-default date-range last-child"

modules/distribution/src/repository/jaggeryapps/iotserver/units/analytics/public/js/graph_util.js

@@ -84,7 +84,7 @@ var configObject = {
     },
     shortcuts: 'hide',
     endDate: currentDay,
-
+    maxDays: 2,
     getValue: function () {
         return this.value;
     },
@@ -112,28 +112,28 @@ $(document).ready(function () {
     getDateTime(startDate.getTime(), endDate.getTime());
 });
 
-//hour picker
+//hour
 $('#hour-btn').on('click', function () {
     initDate();
     getDateTime(currentDay.getTime() - 3600000, currentDay.getTime());
 });
 
-//day picker
+//12 hours
-$('#today-btn').on('click', function () {
+$('#h12-btn').on('click', function () {
     initDate();
-    getDateTime(currentDay.getTime() - 86400000, currentDay.getTime());
+    getDateTime(currentDay.getTime() - (3600000 * 12), currentDay.getTime());
 });
 
-//week picker
+//24 hours
-$('#week-btn').on('click', function () {
+$('#h24-btn').on('click', function () {
     initDate();
-    getDateTime(currentDay.getTime() - 604800000, currentDay.getTime());
+    getDateTime(currentDay.getTime() - (3600000 * 24), currentDay.getTime());
 });
 
-//month picker
+//48 hours
-$('#month-btn').on('click', function () {
+$('#h48-btn').on('click', function () {
     initDate();
-    getDateTime(currentDay.getTime() - (604800000 * 4), currentDay.getTime());
+    getDateTime(currentDay.getTime() - (3600000 * 48), currentDay.getTime());
 });
 
 $('body').on('click', '.btn-group button', function (e) {
@@ -315,9 +315,16 @@ function drawLineGraph(graphId, chartDataRaw) {
         var chartData = [];
         if (chartDataRaw[i].stats.length > 0) {
             for (var j = 0; j < chartDataRaw[i].stats.length; j++) {
-                chartData.push({x: parseInt(chartDataRaw[i].stats[j].time), y: parseInt(chartDataRaw[i].stats[j].value)});
+                chartData.push({
+                    x: parseInt(chartDataRaw[i].stats[j].time),
+                    y: parseInt(chartDataRaw[i].stats[j].value)
+                });
             }
-            graphConfig['series'].push({'color': color[k], 'data': chartData, 'name': chartDataRaw[i].device});
+            graphConfig['series'].push({
+                'color': color[k],
+                'data': summerize(chartData),
+                'name': chartDataRaw[i].device
+            });
         }
         if (++k == color.length) {
             k = 0;
@@ -358,11 +365,11 @@ function drawLineGraph(graphId, chartDataRaw) {
         element: document.getElementById(sliderDiv)
     });
 
-    var legend = new Rickshaw.Graph.Legend( {
+    var legend = new Rickshaw.Graph.Legend({
         graph: graph,
         element: document.getElementById('legend' + graphId)
 
-    } );
+    });
 }
 
 
@@ -401,9 +408,16 @@ function drawBarGraph(graphId, chartDataRaw) {
         var chartData = [];
         if (chartDataRaw[i].stats.length > 0) {
             for (var j = 0; j < chartDataRaw[i].stats.length; j++) {
-                chartData.push({x: parseInt(chartDataRaw[i].stats[j].time), y: parseInt(chartDataRaw[i].stats[j].value)});
+                chartData.push({
+                    x: parseInt(chartDataRaw[i].stats[j].time),
+                    y: parseInt(chartDataRaw[i].stats[j].value)
+                });
             }
-            graphConfig['series'].push({'color': color[k], 'data': chartData, 'name': chartDataRaw[i].device});
+            graphConfig['series'].push({
+                'color': color[k],
+                'data': summerize(chartData),
+                'name': chartDataRaw[i].device
+            });
         }
         if (++k == color.length) {
             k = 0;
@@ -445,11 +459,11 @@ function drawBarGraph(graphId, chartDataRaw) {
         element: document.getElementById(sliderDiv)
     });
 
-    var legend = new Rickshaw.Graph.Legend( {
+    var legend = new Rickshaw.Graph.Legend({
         graph: graph,
         element: document.getElementById('legend' + graphId)
 
-    } );
+    });
 }
 
 function scaleGraphs() {
@@ -470,11 +484,11 @@ function scaleGraphs() {
     }
 
     //Scale graphs
-    var sliderX = graphWidth * 60 * 60 / (toDate - fromDate);
+    var sliderX = graphWidth * 60 * 60000 / (toDate - fromDate);
     if (sliderX < graphWidth) {
         // fake handle move
-        if (sliderX < 100) {
+        if (sliderX < 50) {
-            sliderX = 100;
+            sliderX = 50;
         }
         var edown = document.createEvent("HTMLEvents");
         edown.initEvent("mousedown", true, true);
@@ -500,4 +514,20 @@ function convertDate(date) {
     return date.getFullYear() + '-' + (('' + month).length < 2 ? '0' : '')
         + month + '-' + (('' + day).length < 2 ? '0' : '') + day + " " + (('' + hour).length < 2 ? '0' : '')
         + hour + ":" + (('' + minute).length < 2 ? '0' : '') + minute;
+}
+
+function summerize(data) {
+    if (data.length > 1500) {
+        var nData = [];
+        var i = 1;
+        while (i < data.length) {
+            var t_avg = (data[i - 1].x + data[i].x) / 2;
+            var v_avg = (data[i - 1].y + data[i].y) / 2;
+            nData.push({x: t_avg, y: v_avg});
+            i += 2;
+        }
+        return summerize(nData);
+    } else {
+        return data;
+    }
 }