Fix analytics js and css issue

modules/distribution/src/repository/jaggeryapps/iotserver/api/stats-api.jag

@@ -47,6 +47,8 @@ if (uriMatcher.match("/{context}/api/stats")) {
 		result = getFireAlarmData(user.username, deviceId, from, to);
 	}else if(deviceType=="sensebot"){
 		result = getSensebotData(user.username, deviceId, from, to);
+	}else if(deviceType=="arduino"){
+		result = getArduinoData(user.username, deviceId, from, to);
 	}
 }
 
@@ -78,6 +80,12 @@ function getFireAlarmData(user, deviceId, from, to){
 	return result;
 }
 
+function getArduinoData(user, deviceId, from, to){
+	result = new Object();
+	result['temperatureData'] = getSensorData("DEVICE_TEMPERATURE_SUMMARY","TEMPERATURE",user, deviceId, from, to);
+	return result;
+}
+
 function getSensorData(table, column, user, deviceId, from, to) {
 
 	var fetchedData = null;

modules/distribution/src/repository/jaggeryapps/iotserver/units/analiytics-graphs/analiytics-graphs.hbs

@@ -0,0 +1,6 @@
+{{#zone "topCss"}}
+    <!--<link href="{{self.publicURL}}/css/nv.d3.css" rel="stylesheet"/>-->
+    <link href="{{self.publicURL}}/css/daterangepicker.css" rel="stylesheet"/>
+    <link href="{{self.publicURL}}/css/graph.css" rel="stylesheet"/>
+    <link href="{{self.publicURL}}/css/lines.css" rel="stylesheet"/>
+{{/zone}}

modules/distribution/src/repository/jaggeryapps/iotserver/units/analiytics-graphs/analiytics-graphs.json

@@ -0,0 +1,3 @@
+{
+  "predicate": "urlMatch('/devices/analytics')"
+}

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

@@ -0,0 +1,331 @@
+.date-picker {
+    width: 170px;
+    height: 25px;
+    padding: 0;
+    border: 0;
+    line-height: 25px;
+    padding-left: 10px;
+    font-size: 12px;
+    font-family: Arial;
+    font-weight: bold;
+    cursor: pointer;
+    color: #303030;
+    position: relative;
+    z-index: 2;
+}
+
+.date-picker-wrapper {
+    position: absolute;
+    z-index: 1;
+    border: 1px solid #bfbfbf;
+    background-color: #efefef;
+    width: 448px;
+    padding: 5px 12px;
+    font-size: 12px;
+    line-height: 20px;
+    color: #aaa;
+    font-family: Arial;
+    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
+}
+
+.date-picker-wrapper.single-date {
+    width: auto;
+}
+
+.date-picker-wrapper.no-shortcuts {
+    padding-bottom: 12px;
+}
+
+.date-picker-wrapper .footer {
+    display: none;
+    font-size: 11px;
+    padding-top: 3px;
+}
+
+.date-picker-wrapper b {
+    color: #666;
+    font-weight: 700;
+}
+
+.date-picker-wrapper a {
+    color: rgb(107, 180, 214);
+    text-decoration: underline;
+}
+
+.date-picker-wrapper .month-wrapper {
+    border: 1px solid #bfbfbf;
+    border-radius: 3px;
+    background-color: #fff;
+    padding: 5px;
+    cursor: default;
+    position: relative;
+    _overflow: hidden;
+}
+
+.date-picker-wrapper .month-wrapper table {
+    width: 190px;
+    float: left;
+}
+
+.date-picker-wrapper .month-wrapper table.month2 {
+    width: 190px;
+    float: right;
+}
+
+.date-picker-wrapper .month-wrapper table th,
+.date-picker-wrapper .month-wrapper table td {
+    vertical-align: middle;
+    text-align: center;
+    line-height: 14px;
+    margin: 0px;
+    padding: 0px;
+}
+
+.date-picker-wrapper .month-wrapper table .day {
+    height: 19px;
+    line-height: 19px;
+    font-size: 12px;
+    margin-bottom: 1px;
+    color: #999;
+    cursor: default;
+}
+
+.date-picker-wrapper .month-wrapper table div.day.lastMonth,
+.date-picker-wrapper .month-wrapper table div.day.nextMonth {
+    color: #999;
+    cursor: default;
+}
+
+.date-picker-wrapper .month-wrapper table .day.checked {
+    background-color: rgb(156, 219, 247);
+}
+
+.date-picker-wrapper .month-wrapper table .week-name {
+    height: 20px;
+    line-height: 20px;
+    font-weight: 100;
+}
+
+.date-picker-wrapper .month-wrapper table .day.has-tooltip {
+    cursor: help !important;
+}
+
+.date-picker-wrapper .month-wrapper table .day.toMonth.valid {
+    color: #333;
+    cursor: pointer;
+}
+
+.date-picker-wrapper .month-wrapper table .day.real-today {
+    background-color: rgb(255, 230, 132);
+}
+
+.date-picker-wrapper .month-wrapper table .day.real-today.checked {
+    background-color: rgb(112, 204, 213);
+}
+
+.date-picker-wrapper table .caption {
+    height: 40px;
+}
+
+.date-picker-wrapper table .caption .next,
+.date-picker-wrapper table .caption .prev {
+    padding: 0 5px;
+    cursor: pointer;
+}
+
+.date-picker-wrapper table .caption .next:hover,
+.date-picker-wrapper table .caption .prev:hover {
+    background-color: #ccc;
+    color: white;
+}
+
+.date-picker-wrapper .gap {
+    position: absolute;
+    display: none;
+    top: 0px;
+    left: 204px;
+    z-index: 1;
+    width: 15px;
+    height: 100%;
+    background-color: red;
+    font-size: 0;
+    line-height: 0;
+}
+
+.date-picker-wrapper .gap .gap-lines {
+    height: 100%;
+    overflow: hidden;
+}
+
+.date-picker-wrapper .gap .gap-line {
+    height: 15px;
+    width: 15px;
+    position: relative;
+}
+
+.date-picker-wrapper .gap .gap-line .gap-1 {
+    z-index: 1;
+    height: 0;
+    border-left: 8px solid white;
+    border-top: 8px solid #eee;
+    border-bottom: 8px solid #eee;
+}
+
+.date-picker-wrapper .gap .gap-line .gap-2 {
+    position: absolute;
+    right: 0;
+    top: 0px;
+    z-index: 2;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-top: 8px solid white;
+}
+
+.date-picker-wrapper .gap .gap-line .gap-3 {
+    position: absolute;
+    right: 0;
+    top: 8px;
+    z-index: 2;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-bottom: 8px solid white;
+}
+
+.date-picker-wrapper .gap .gap-top-mask {
+    width: 6px;
+    height: 1px;
+    position: absolute;
+    top: -1px;
+    left: 1px;
+    background-color: #eee;
+    z-index: 3;
+}
+
+.date-picker-wrapper .gap .gap-bottom-mask {
+    width: 6px;
+    height: 1px;
+    position: absolute;
+    bottom: -1px;
+    left: 7px;
+    background-color: #eee;
+    z-index: 3;
+}
+
+.date-picker-wrapper .selected-days {
+    display: none;
+}
+
+.date-picker-wrapper .drp_top-bar {
+    line-height: 40px;
+    height: 40px;
+    position: relative;
+}
+
+.date-picker-wrapper .drp_top-bar .error-top {
+    display: none;
+}
+
+.date-picker-wrapper .drp_top-bar .normal-top {
+    display: none;
+}
+
+.date-picker-wrapper .drp_top-bar .default-top {
+    display: block;
+}
+
+.date-picker-wrapper .drp_top-bar.error .default-top {
+    display: none;
+}
+
+.date-picker-wrapper .drp_top-bar.error .error-top {
+    display: block;
+    color: red;
+}
+
+.date-picker-wrapper .drp_top-bar.normal .default-top {
+    display: none;
+}
+
+.date-picker-wrapper .drp_top-bar.normal .normal-top {
+    display: block;
+}
+
+.date-picker-wrapper .drp_top-bar .apply-btn {
+    position: absolute;
+    right: 0px;
+    top: 6px;
+    padding: 3px 5px;
+    margin: 0;
+    font-size: 12px;
+    border-radius: 4px;
+    cursor: pointer;
+
+    color: #d9eef7;
+    border: solid 1px #0076a3;
+    background: #0095cd;
+    background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
+    background: -moz-linear-gradient(top, #00adee, #0078a5);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
+    color: white;
+}
+
+.date-picker-wrapper .drp_top-bar .apply-btn.disabled {
+    pointer-events: none;
+    color: #606060;
+    border: solid 1px #b7b7b7;
+    background: #fff;
+    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
+    background: -moz-linear-gradient(top, #fff, #ededed);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
+}
+
+/*time styling*/
+.time {
+    position: relative;
+}
+
+.time input[type=range] {
+    vertical-align: middle;
+}
+
+.time1, .time2 {
+    width: 180px;
+    padding: 0 5px;
+    text-align: center;
+}
+
+.time1 {
+    float: left;
+}
+
+.time2 {
+    float: right;
+}
+
+.hour, .minute {
+    text-align: left;
+}
+
+.hide {
+    display: none;
+}
+
+input.hour-range, input.minute-range {
+    width: 150px;
+}
+
+#dateRangePickerContainer .date-range, #dateRangePickerContainer .input-append {
+    background: none !important;
+}
+
+#date-range{
+    padding-right:30px;
+    width:300px;
+    height:100%;
+    display:inline-block;
+}
+
+#dateRangePickerContainer{
+    float:right;
+    margin-top:-6px;
+}

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

@@ -0,0 +1,197 @@
+/* graph */
+
+.rickshaw_graph {
+	position: relative;
+}
+.rickshaw_graph svg {
+	display: block;	
+	overflow: hidden;
+}
+
+/* ticks */
+
+.rickshaw_graph .x_tick {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	width: 0px;
+	border-left: 1px dotted rgba(0, 0, 0, 0.2);
+	pointer-events: none;
+}
+.rickshaw_graph .x_tick .title {
+	position: absolute;
+	font-size: 12px;
+	font-family: Arial, sans-serif;
+	opacity: 0.5;
+	white-space: nowrap;
+	margin-left: 3px;
+	bottom: 1px;
+}
+
+/* annotations */
+
+.rickshaw_annotation_timeline {
+	height: 1px;
+	border-top: 1px solid #e0e0e0;
+	margin-top: 10px;
+	position: relative;
+}
+.rickshaw_annotation_timeline .annotation {
+	position: absolute;
+	height: 6px;
+	width: 6px;
+	margin-left: -2px;
+	top: -3px;
+	border-radius: 5px;
+	background-color: rgba(0, 0, 0, 0.25);
+}
+.rickshaw_graph .annotation_line {
+	position: absolute;
+	top: 0;
+	bottom: -6px;
+	width: 0px;
+	border-left: 2px solid rgba(0, 0, 0, 0.3);
+	display: none;
+}
+.rickshaw_graph .annotation_line.active {
+	display: block;
+}
+
+.rickshaw_graph .annotation_range {
+        background: rgba(0, 0, 0, 0.1);
+        display: none;
+        position: absolute;
+        top: 0;
+        bottom: -6px;
+}
+.rickshaw_graph .annotation_range.active {
+        display: block;
+}
+.rickshaw_graph .annotation_range.active.offscreen {
+        display: none;
+}
+
+.rickshaw_annotation_timeline .annotation .content {
+	background: white;
+	color: black;
+	opacity: 0.9;
+	padding: 5px 5px;
+	box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
+	border-radius: 3px;
+	position: relative;
+	z-index: 20;
+	font-size: 12px;
+	padding: 6px 8px 8px;
+	top: 18px;
+	left: -11px;
+	width: 160px;
+	display: none;
+	cursor: pointer;
+}
+.rickshaw_annotation_timeline .annotation .content:before {
+	content: "\25b2";
+	position: absolute;
+	top: -11px;
+	color: white;
+	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.8);
+}
+.rickshaw_annotation_timeline .annotation.active,
+.rickshaw_annotation_timeline .annotation:hover {
+	background-color: rgba(0, 0, 0, 0.8);
+	cursor: none;
+}
+.rickshaw_annotation_timeline .annotation .content:hover {
+	z-index: 50;
+}
+.rickshaw_annotation_timeline .annotation.active .content {
+	display: block;
+}
+.rickshaw_annotation_timeline .annotation:hover .content {
+	display: block;
+	z-index: 50;
+}
+.rickshaw_graph .y_axis,
+.rickshaw_graph  .x_axis_d3 {
+	fill: none;
+}
+.rickshaw_graph .y_ticks .tick line,
+.rickshaw_graph .x_ticks_d3 .tick {
+	stroke: rgba(0, 0, 0, 0.16);
+	stroke-width: 2px;
+	shape-rendering: crisp-edges;
+	pointer-events: none;
+}
+.rickshaw_graph .y_grid .tick,
+.rickshaw_graph .x_grid_d3 .tick {
+	z-index: -1;
+	stroke: rgba(0, 0, 0, 0.20);
+	stroke-width: 1px;
+	stroke-dasharray: 1 1;
+}
+.rickshaw_graph .y_grid .tick[data-y-value="0"] {
+	stroke-dasharray: 1 0;
+}
+.rickshaw_graph .y_grid path,
+.rickshaw_graph .x_grid_d3 path  {
+	fill: none;
+	stroke: none;
+}
+.rickshaw_graph .y_ticks path,
+.rickshaw_graph .x_ticks_d3 path {
+	fill: none;
+	stroke: #808080;
+}
+.rickshaw_graph .y_ticks text,
+.rickshaw_graph .x_ticks_d3 text {
+	opacity: 0.5;
+	font-size: 12px;
+	pointer-events: none;
+}
+.rickshaw_graph .x_tick.glow .title,
+.rickshaw_graph .y_ticks.glow text {
+	fill: black;
+	color: black;
+	text-shadow: 
+		-1px 1px 0 rgba(255, 255, 255, 0.1),
+		1px -1px 0 rgba(255, 255, 255, 0.1),
+		1px 1px 0 rgba(255, 255, 255, 0.1),
+		0px 1px 0 rgba(255, 255, 255, 0.1),
+		0px -1px 0 rgba(255, 255, 255, 0.1),
+		1px 0px 0 rgba(255, 255, 255, 0.1),
+		-1px 0px 0 rgba(255, 255, 255, 0.1),
+		-1px -1px 0 rgba(255, 255, 255, 0.1);
+}
+.rickshaw_graph .x_tick.inverse .title,
+.rickshaw_graph .y_ticks.inverse text {
+	fill: white;
+	color: white;
+	text-shadow: 
+		-1px 1px 0 rgba(0, 0, 0, 0.8),
+		1px -1px 0 rgba(0, 0, 0, 0.8),
+		1px 1px 0 rgba(0, 0, 0, 0.8),
+		0px 1px 0 rgba(0, 0, 0, 0.8),
+		0px -1px 0 rgba(0, 0, 0, 0.8),
+		1px 0px 0 rgba(0, 0, 0, 0.8),
+		-1px 0px 0 rgba(0, 0, 0, 0.8),
+		-1px -1px 0 rgba(0, 0, 0, 0.8);
+}
+
+.custom_rickshaw_graph {
+	position: relative;
+	left: 40px;
+}
+
+.custom_y_axis {
+	position: absolute;
+	width: 40px;
+}
+
+.custom_slider {
+	left: 40px;
+}
+
+.custom_x_axis {
+	position: relative;
+	left: 40px;
+	height: 40px;
+}

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

@@ -0,0 +1,18 @@
+#chart {
+	display: inline-block;
+}
+#legend {
+	display: inline-block;
+	position: relative;
+	left: 8px;
+}
+#legend_container {
+	position: absolute;
+	right: 0;
+	bottom: 26px;
+	width: 0;
+}
+#chart_container {
+	float: left;
+	position: relative;
+}

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

@@ -0,0 +1,641 @@
+/* nvd3 version 1.8.1 (https://github.com/novus/nvd3) 2015-06-17 */
+.nvd3 .nv-axis {
+  pointer-events:none;
+  opacity: 1;
+}
+
+.nvd3 .nv-axis path {
+  fill: none;
+  stroke: #000;
+  stroke-opacity: .75;
+  shape-rendering: crispEdges;
+}
+
+.nvd3 .nv-axis path.domain {
+  stroke-opacity: .75;
+}
+
+.nvd3 .nv-axis.nv-x path.domain {
+  stroke-opacity: 0;
+}
+
+.nvd3 .nv-axis line {
+  fill: none;
+  stroke: #e5e5e5;
+  shape-rendering: crispEdges;
+}
+
+.nvd3 .nv-axis .zero line,
+  /*this selector may not be necessary*/ .nvd3 .nv-axis line.zero {
+  stroke-opacity: .75;
+}
+
+.nvd3 .nv-axis .nv-axisMaxMin text {
+  font-weight: bold;
+}
+
+.nvd3 .x  .nv-axis .nv-axisMaxMin text,
+.nvd3 .x2 .nv-axis .nv-axisMaxMin text,
+.nvd3 .x3 .nv-axis .nv-axisMaxMin text {
+  text-anchor: middle
+}
+
+.nvd3 .nv-axis.nv-disabled {
+  opacity: 0;
+}
+
+.nvd3 .nv-bars rect {
+  fill-opacity: .75;
+
+  transition: fill-opacity 250ms linear;
+  -moz-transition: fill-opacity 250ms linear;
+  -webkit-transition: fill-opacity 250ms linear;
+}
+
+.nvd3 .nv-bars rect.hover {
+  fill-opacity: 1;
+}
+
+.nvd3 .nv-bars .hover rect {
+  fill: lightblue;
+}
+
+.nvd3 .nv-bars text {
+  fill: rgba(0,0,0,0);
+}
+
+.nvd3 .nv-bars .hover text {
+  fill: rgba(0,0,0,1);
+}
+
+.nvd3 .nv-multibar .nv-groups rect,
+.nvd3 .nv-multibarHorizontal .nv-groups rect,
+.nvd3 .nv-discretebar .nv-groups rect {
+  stroke-opacity: 0;
+
+  transition: fill-opacity 250ms linear;
+  -moz-transition: fill-opacity 250ms linear;
+  -webkit-transition: fill-opacity 250ms linear;
+}
+
+.nvd3 .nv-multibar .nv-groups rect:hover,
+.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
+.nvd3 .nv-candlestickBar .nv-ticks rect:hover,
+.nvd3 .nv-discretebar .nv-groups rect:hover {
+  fill-opacity: 1;
+}
+
+.nvd3 .nv-discretebar .nv-groups text,
+.nvd3 .nv-multibarHorizontal .nv-groups text {
+  font-weight: bold;
+  fill: rgba(0,0,0,1);
+  stroke: rgba(0,0,0,0);
+}
+
+/* boxplot CSS */
+.nvd3 .nv-boxplot circle {
+  fill-opacity: 0.5;
+}
+
+.nvd3 .nv-boxplot circle:hover {
+  fill-opacity: 1;
+}
+
+.nvd3 .nv-boxplot rect:hover {
+  fill-opacity: 1;
+}
+
+.nvd3 line.nv-boxplot-median {
+  stroke: black;
+}
+
+.nv-boxplot-tick:hover {
+  stroke-width: 2.5px;
+}
+/* bullet */
+.nvd3.nv-bullet { font: 10px sans-serif; }
+.nvd3.nv-bullet .nv-measure { fill-opacity: .8; }
+.nvd3.nv-bullet .nv-measure:hover { fill-opacity: 1; }
+.nvd3.nv-bullet .nv-marker { stroke: #000; stroke-width: 2px; }
+.nvd3.nv-bullet .nv-markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; }
+.nvd3.nv-bullet .nv-tick line { stroke: #666; stroke-width: .5px; }
+.nvd3.nv-bullet .nv-range.nv-s0 { fill: #eee; }
+.nvd3.nv-bullet .nv-range.nv-s1 { fill: #ddd; }
+.nvd3.nv-bullet .nv-range.nv-s2 { fill: #ccc; }
+.nvd3.nv-bullet .nv-title { font-size: 14px; font-weight: bold; }
+.nvd3.nv-bullet .nv-subtitle { fill: #999; }
+
+
+.nvd3.nv-bullet .nv-range {
+  fill: #bababa;
+  fill-opacity: .4;
+}
+.nvd3.nv-bullet .nv-range:hover {
+  fill-opacity: .7;
+}
+
+.nvd3.nv-candlestickBar .nv-ticks .nv-tick {
+  stroke-width: 1px;
+}
+
+.nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover {
+  stroke-width: 2px;
+}
+
+.nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect {
+  stroke: #2ca02c;
+  fill: #2ca02c;
+}
+
+.nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect {
+  stroke: #d62728;
+  fill: #d62728;
+}
+
+.with-transitions .nv-candlestickBar .nv-ticks .nv-tick {
+  transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+  -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+  -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+
+}
+
+.nvd3.nv-candlestickBar .nv-ticks line {
+  stroke: #333;
+}
+
+
+.nvd3 .nv-legend .nv-disabled rect {
+  /*fill-opacity: 0;*/
+}
+
+.nvd3 .nv-check-box .nv-box {
+  fill-opacity:0;
+  stroke-width:2;
+}
+
+.nvd3 .nv-check-box .nv-check {
+  fill-opacity:0;
+  stroke-width:4;
+}
+
+.nvd3 .nv-series.nv-disabled .nv-check-box .nv-check {
+  fill-opacity:0;
+  stroke-opacity:0;
+}
+
+.nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check {
+  opacity: 0;
+}
+
+/* line plus bar */
+.nvd3.nv-linePlusBar .nv-bar rect {
+  fill-opacity: .75;
+}
+
+.nvd3.nv-linePlusBar .nv-bar rect:hover {
+  fill-opacity: 1;
+}
+.nvd3 .nv-groups path.nv-line {
+  fill: none;
+}
+
+.nvd3 .nv-groups path.nv-area {
+  stroke: none;
+}
+
+.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
+  fill-opacity: 0;
+  stroke-opacity: 0;
+}
+
+.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point {
+  fill-opacity: .5 !important;
+  stroke-opacity: .5 !important;
+}
+
+
+.with-transitions .nvd3 .nv-groups .nv-point {
+  transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+  -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+  -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+
+}
+
+.nvd3.nv-scatter .nv-groups .nv-point.hover,
+.nvd3 .nv-groups .nv-point.hover {
+  stroke-width: 7px;
+  fill-opacity: .95 !important;
+  stroke-opacity: .95 !important;
+}
+
+
+.nvd3 .nv-point-paths path {
+  stroke: #aaa;
+  stroke-opacity: 0;
+  fill: #eee;
+  fill-opacity: 0;
+}
+
+
+
+.nvd3 .nv-indexLine {
+  cursor: ew-resize;
+}
+
+/********************
+ * SVG CSS
+ */
+
+/********************
+  Default CSS for an svg element nvd3 used
+*/
+svg.nvd3-svg {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  display: block;
+  width:100%;
+  height:100%;
+}
+
+/********************
+  Box shadow and border radius styling
+*/
+.nvtooltip.with-3d-shadow, .with-3d-shadow .nvtooltip {
+  -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+  box-shadow: 0 5px 10px rgba(0,0,0,.2);
+
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+
+
+.nvd3 text {
+  font: normal 12px Arial;
+}
+
+.nvd3 .title {
+  font: bold 14px Arial;
+}
+
+.nvd3 .nv-background {
+  fill: white;
+  fill-opacity: 0;
+}
+
+.nvd3.nv-noData {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+
+/**********
+*  Brush
+*/
+
+.nv-brush .extent {
+  fill-opacity: .125;
+  shape-rendering: crispEdges;
+}
+
+.nv-brush .resize path {
+  fill: #eee;
+  stroke: #666;
+}
+
+
+/**********
+*  Legend
+*/
+
+.nvd3 .nv-legend .nv-series {
+  cursor: pointer;
+}
+
+.nvd3 .nv-legend .nv-disabled circle {
+  fill-opacity: 0;
+}
+
+/* focus */
+.nvd3 .nv-brush .extent {
+  fill-opacity: 0 !important;
+}
+
+.nvd3 .nv-brushBackground rect {
+  stroke: #000;
+  stroke-width: .4;
+  fill: #fff;
+  fill-opacity: .7;
+}
+
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick {
+  stroke-width: 1px;
+}
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
+  stroke-width: 2px;
+}
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
+  stroke: #2ca02c;
+}
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
+  stroke: #d62728;
+}
+
+
+.nvd3 .background path {
+  fill: none;
+  stroke: #EEE;
+  stroke-opacity: .4;
+  shape-rendering: crispEdges;
+}
+
+.nvd3 .foreground path {
+  fill: none;
+  stroke-opacity: .7;
+}
+
+.nvd3 .nv-parallelCoordinates-brush .extent
+{
+  fill: #fff;
+  fill-opacity: .6;
+  stroke: gray;
+  shape-rendering: crispEdges;
+}
+
+.nvd3 .nv-parallelCoordinates .hover  {
+  fill-opacity: 1;
+  stroke-width: 3px;
+}
+
+
+.nvd3 .missingValuesline line {
+  fill: none;
+  stroke: black;
+  stroke-width: 1;
+  stroke-opacity: 1;
+  stroke-dasharray: 5, 5;
+}
+.nvd3.nv-pie path {
+  stroke-opacity: 0;
+  transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
+  -moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
+  -webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
+
+}
+
+.nvd3.nv-pie .nv-pie-title {
+  font-size: 24px;
+  fill: rgba(19, 196, 249, 0.59);
+}
+
+.nvd3.nv-pie .nv-slice text {
+  stroke: #000;
+  stroke-width: 0;
+}
+
+.nvd3.nv-pie path {
+  stroke: #fff;
+  stroke-width: 1px;
+  stroke-opacity: 1;
+}
+
+.nvd3.nv-pie .hover path {
+  fill-opacity: .7;
+}
+.nvd3.nv-pie .nv-label {
+  pointer-events: none;
+}
+.nvd3.nv-pie .nv-label rect {
+  fill-opacity: 0;
+  stroke-opacity: 0;
+}
+
+/* scatter */
+.nvd3 .nv-groups .nv-point.hover {
+  stroke-width: 20px;
+  stroke-opacity: .5;
+}
+
+.nvd3 .nv-scatter .nv-point.hover {
+  fill-opacity: 1;
+}
+.nv-noninteractive {
+  pointer-events: none;
+}
+
+.nv-distx, .nv-disty {
+  pointer-events: none;
+}
+
+/* sparkline */
+.nvd3.nv-sparkline path {
+  fill: none;
+}
+
+.nvd3.nv-sparklineplus g.nv-hoverValue {
+  pointer-events: none;
+}
+
+.nvd3.nv-sparklineplus .nv-hoverValue line {
+  stroke: #333;
+  stroke-width: 1.5px;
+}
+
+.nvd3.nv-sparklineplus,
+.nvd3.nv-sparklineplus g {
+  pointer-events: all;
+}
+
+.nvd3 .nv-hoverArea {
+  fill-opacity: 0;
+  stroke-opacity: 0;
+}
+
+.nvd3.nv-sparklineplus .nv-xValue,
+.nvd3.nv-sparklineplus .nv-yValue {
+  stroke-width: 0;
+  font-size: .9em;
+  font-weight: normal;
+}
+
+.nvd3.nv-sparklineplus .nv-yValue {
+  stroke: #f66;
+}
+
+.nvd3.nv-sparklineplus .nv-maxValue {
+  stroke: #2ca02c;
+  fill: #2ca02c;
+}
+
+.nvd3.nv-sparklineplus .nv-minValue {
+  stroke: #d62728;
+  fill: #d62728;
+}
+
+.nvd3.nv-sparklineplus .nv-currentValue {
+  font-weight: bold;
+  font-size: 1.1em;
+}
+/* stacked area */
+.nvd3.nv-stackedarea path.nv-area {
+  fill-opacity: .7;
+  stroke-opacity: 0;
+  transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
+  -moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
+  -webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
+}
+
+.nvd3.nv-stackedarea path.nv-area.hover {
+  fill-opacity: .9;
+}
+
+
+.nvd3.nv-stackedarea .nv-groups .nv-point {
+  stroke-opacity: 0;
+  fill-opacity: 0;
+}
+
+
+.nvtooltip {
+  position: absolute;
+  background-color: rgba(255,255,255,1.0);
+  color: rgba(0,0,0,1.0);
+  padding: 1px;
+  border: 1px solid rgba(0,0,0,.2);
+  z-index: 10000;
+  display: block;
+
+  font-family: Arial;
+  font-size: 13px;
+  text-align: left;
+  pointer-events: none;
+
+  white-space: nowrap;
+
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.nvtooltip {
+  background: rgba(255,255,255, 0.8);
+  border: 1px solid rgba(0,0,0,0.5);
+  border-radius: 4px;
+}
+
+/*Give tooltips that old fade in transition by
+    putting a "with-transitions" class on the container div.
+*/
+.nvtooltip.with-transitions, .with-transitions .nvtooltip {
+  transition: opacity 50ms linear;
+  -moz-transition: opacity 50ms linear;
+  -webkit-transition: opacity 50ms linear;
+
+  transition-delay: 200ms;
+  -moz-transition-delay: 200ms;
+  -webkit-transition-delay: 200ms;
+}
+
+.nvtooltip.x-nvtooltip,
+.nvtooltip.y-nvtooltip {
+  padding: 8px;
+}
+
+.nvtooltip h3 {
+  margin: 0;
+  padding: 4px 14px;
+  line-height: 18px;
+  font-weight: normal;
+  background-color: rgba(247,247,247,0.75);
+  color: rgba(0,0,0,1.0);
+  text-align: center;
+
+  border-bottom: 1px solid #ebebeb;
+
+  -webkit-border-radius: 5px 5px 0 0;
+  -moz-border-radius: 5px 5px 0 0;
+  border-radius: 5px 5px 0 0;
+}
+
+.nvtooltip p {
+  margin: 0;
+  padding: 5px 14px;
+  text-align: center;
+}
+
+.nvtooltip span {
+  display: inline-block;
+  margin: 2px 0;
+}
+
+.nvtooltip table {
+  margin: 6px;
+  border-spacing:0;
+}
+
+
+.nvtooltip table td {
+  padding: 2px 9px 2px 0;
+  vertical-align: middle;
+}
+
+.nvtooltip table td.key {
+  font-weight:normal;
+}
+.nvtooltip table td.value {
+  text-align: right;
+  font-weight: bold;
+}
+
+.nvtooltip table tr.highlight td {
+  padding: 1px 9px 1px 0;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-top-style: solid;
+  border-top-width: 1px;
+}
+
+.nvtooltip table td.legend-color-guide div {
+  width: 8px;
+  height: 8px;
+  vertical-align: middle;
+}
+
+.nvtooltip table td.legend-color-guide div {
+  width: 12px;
+  height: 12px;
+  border: 1px solid #999;
+}
+
+.nvtooltip .footer {
+  padding: 3px;
+  text-align: center;
+}
+
+.nvtooltip-pending-removal {
+  pointer-events: none;
+  display: none;
+}
+
+
+/****
+Interactive Layer
+*/
+.nvd3 .nv-interactiveGuideLine {
+  pointer-events:none;
+}
+.nvd3 line.nv-guideline {
+  stroke: #ccc;
+}

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

@@ -1,19 +1,3 @@
-{{#zone "topCss"}}
-    <!--<link href="{{self.publicURL}}/css/nv.d3.css" rel="stylesheet"/>-->
-    <link href="{{self.publicURL}}/css/daterangepicker.css" rel="stylesheet"/>
-    <link href="{{self.publicURL}}/css/graph.css" rel="stylesheet"/>
-    <link href="{{self.publicURL}}/css/lines.css" rel="stylesheet"/>
-
-    <!-- -->
-    <!--<script src="{{self.publicURL}}/js/d3.min.js"></script>-->
-    <!--<script src="{{self.publicURL}}/js/nv.d3.js"></script>-->
-    <script src="{{self.publicURL}}/js/Chart.min.js"></script>
-    <script src="{{self.publicURL}}/js/stream_layers.js"></script>
-    <script src="{{self.publicURL}}/js/moment.min.js"></script>
-    <script src="{{self.publicURL}}/js/jquery.daterangepicker.js"></script>
-    <script src="{{self.publicURL}}/js/d3.v3.js"></script>
-    <script src="{{self.publicURL}}/js/rickshaw.min.js"></script>
-{{/zone}}
 {{#zone "main"}}
     <div class="container container-bg  white-bg">
         <div class=" margin-top-double">
@@ -103,10 +87,12 @@
         </div>
     </div>
 {{/zone}}
-{{#zone "bottomJs"}}
+{{#zone "bottomLibJs"}}
+    <script src="{{self.publicURL}}/js/d3.v3.js"></script>
+    <script src="{{self.publicURL}}/js/rickshaw.min.js"></script>
     <script src="{{self.publicURL}}/js/moment.min.js"></script>
-    <script src="{{self.publicURL}}/js/graph_util.js"></script>
     <script src="{{self.publicURL}}/js/jquery.daterangepicker.js"></script>
+    <script src="{{self.publicURL}}/js/graph_util.js"></script>
     <script src="{{self.publicURL}}/js/bulb.js"></script>
     <script src="{{self.publicURL}}/js/graphs/fan_graph.js"></script>
     <script src="{{self.publicURL}}/js/graphs/bulb_graph.js"></script>