Add graph capability to resize according to window size.

modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/mydevice.hbs

@@ -23,7 +23,7 @@
                     <h1 class="grey ">Device Statistics</h1>
                     <hr>
                 </div>
-            </div>S
+            </div>
             <div class="row float-right margin-top">
                 <div class="right margin-right">
                     <p style="color:#000;float:left;margin-top:25px">Date Range:</p>

modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graph_util.js

@@ -141,29 +141,33 @@ function updateGraphs(stats) {
     updateFanGraph(convertStateStatsToGraphData(fanData));
 
     var bulbData = stats['bulbData'];
-    console.log("bulbData...");
-    console.log(bulbData);
     updateBulbGraph(convertStateStatsToGraphData(bulbData));
+
     scaleGraphs();
 }
 
 function scaleGraphs() {
+    var sliders = $('.right_handle');
+    if (sliders.length == 0){
+        return;
+    }
+
+    var graphWidth = $('#canvas-wrapper1').width() - 50;
     //Scale graphs
-    var sliderX = 1110 * 60 * 60 / (toDate - fromDate);
+    var sliderX = graphWidth * 60 * 60 / (toDate - fromDate);
-    if (sliderX < 1110) {
+    if (sliderX < graphWidth) {
         // fake handle move
         if (sliderX < 100) {
             sliderX = 100;
         }
         var edown = document.createEvent("HTMLEvents");
         edown.initEvent("mousedown", true, true);
-        edown.clientX = 1160;
+        edown.clientX = graphWidth;
         var emove = document.createEvent("HTMLEvents");
         emove.initEvent("mousemove", true, true);
         emove.clientX = sliderX;
         var eup = document.createEvent("HTMLEvents");
         eup.initEvent("mouseup", true, true);
-        var sliders = $('.right_handle');
         for (var slider in sliders) {
             sliders[slider].dispatchEvent(edown);
             document.dispatchEvent(emove);

modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/bulb_graph.js

@@ -5,6 +5,7 @@ function updateBulbGraph(bulbData) {
 
 function renderBulbChart(chartDataRaw){
     var chartWrapperElmId = "#canvas-wrapper6";
+    var graphWidth = $(chartWrapperElmId).width() - 50;
     if (chartDataRaw.length == 0) {
         $(chartWrapperElmId).html("No data available...");
         return;
@@ -12,7 +13,8 @@ function renderBulbChart(chartDataRaw){
 
     var chartData = [[], []];
     for (var i = 0; i < chartDataRaw.length; i++){
-        chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
+        chartData[0].push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
+        chartData[1].push({x:parseInt(chartDataRaw[i].x), y:Math.abs(parseInt(chartDataRaw[i].y) - 1)});
     }
 
     //var i = parseInt(fromDate);
@@ -31,7 +33,7 @@ function renderBulbChart(chartDataRaw){
 
     var graph = new Rickshaw.Graph({
         element: document.getElementById(chartDiv),
-        width: 1100,
+        width: graphWidth,
         height: 150,
         strokeWidth: 0.5,
         renderer: 'bar_no_gap',

modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/fan_graph.js

@@ -4,7 +4,7 @@ function updateFanGraph(fanData) {
 
 function renderFanChart(chartDataRaw) {
     var chartWrapperElmId = "#canvas-wrapper5";
-
+    var graphWidth = $(chartWrapperElmId).width() - 50;
     if (chartDataRaw.length == 0) {
         $(chartWrapperElmId).html("No data available...");
         return;
@@ -12,7 +12,8 @@ function renderFanChart(chartDataRaw) {
 
     var chartData = [[], []];
     for (var i = 0; i < chartDataRaw.length; i++){
-        chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
+        chartData[0].push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
+        chartData[1].push({x:parseInt(chartDataRaw[i].x), y:Math.abs(parseInt(chartDataRaw[i].y) - 1)});
     }
 
     //var i = parseInt(fromDate);
@@ -31,7 +32,7 @@ function renderFanChart(chartDataRaw) {
 
     var graph = new Rickshaw.Graph({
         element: document.getElementById(chartDiv),
-        width: 1100,
+        width: graphWidth,
         height: 150,
         strokeWidth: 0.5,
         renderer: 'bar_no_gap',

modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/light_graph.js

@@ -5,6 +5,7 @@ function updateLightGraph(lightData) {
 
 function renderLightChart(chartDataRaw){
     var chartWrapperElmId = "#canvas-wrapper2";
+    var graphWidth = $(chartWrapperElmId).width() - 50;
     if (chartDataRaw.length == 0) {
         $(chartWrapperElmId).html("No data available...");
         return;
@@ -12,7 +13,8 @@ function renderLightChart(chartDataRaw){
 
     var chartData = [[], []];
     for (var i = 0; i < chartDataRaw.length; i++){
-        chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
+        chartData[0].push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
+        chartData[1].push({x:parseInt(chartDataRaw[i].x), y:Math.abs(parseInt(chartDataRaw[i].y) - 1)});
     }
 
     //var i = parseInt(fromDate);
@@ -31,7 +33,7 @@ function renderLightChart(chartDataRaw){
 
     var graph = new Rickshaw.Graph({
         element: document.getElementById(chartDiv),
-        width: 1100,
+        width: graphWidth,
         height: 150,
         strokeWidth: 0.5,
         renderer: 'bar_no_gap',

modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/motion_graph.js

@@ -5,7 +5,7 @@ function updateMotionGraph(motionData) {
 
 function renderMotionChart(chartDataRaw){
     var chartWrapperElmId = "#canvas-wrapper3";
-
+    var graphWidth = $(chartWrapperElmId).width() - 50;
     if (chartDataRaw.length == 0) {
         $(chartWrapperElmId).html("No data available...");
         return;
@@ -31,7 +31,7 @@ function renderMotionChart(chartDataRaw){
 
     var graph = new Rickshaw.Graph({
         element: document.getElementById(chartDiv),
-        width: 1110,
+        width: graphWidth,
         height: 400,
         strokeWidth: 0.5,
         renderer: 'line',

modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/sonar_graph.js

@@ -4,7 +4,7 @@ function updateSonarGraph(sonarData) {
 
 function renderSonarChart(chartDataRaw){
     var chartWrapperElmId = "#canvas-wrapper4";
-
+    var graphWidth = $(chartWrapperElmId).width() - 50;
     if (chartDataRaw.length == 0) {
         $(chartWrapperElmId).html("No data available...");
         return;
@@ -30,7 +30,7 @@ function renderSonarChart(chartDataRaw){
 
     var graph = new Rickshaw.Graph({
         element: document.getElementById(chartDiv),
-        width: 1110,
+        width: graphWidth,
         height: 400,
         strokeWidth: 1,
         renderer: 'line',

modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/temperature_graph.js

@@ -5,7 +5,7 @@ function updateTemperatureGraph(temperatureData) {
 
 function renderTemperatureChart(chartDataRaw){
     var chartWrapperElmId = "#canvas-wrapper1";
-
+    var graphWidth = $(chartWrapperElmId).width() - 50;
     if (chartDataRaw.length == 0) {
         $(chartWrapperElmId).html("No data available...");
         return;
@@ -31,7 +31,7 @@ function renderTemperatureChart(chartDataRaw){
 
     var graph = new Rickshaw.Graph({
         element: document.getElementById(chartDiv),
-        width: 1110,
+        width: graphWidth,
         height: 400,
         strokeWidth: 1,
         renderer: 'line',