did some UI changes

modules/tools/cdmf-devicetype-archetype/src/main/resources/archetype-resources/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.__deviceType__.analytics-view/analytics-view.hbs

@@ -5,7 +5,7 @@
       data-appcontext="{{@app.context}}"></span>
 <div id="div-chart">
     <div class="chartWrapper" id="chartWrapper">
-        <span id="span-title">Temperature</span>
+        <span id="span-title">${nameOfTheSensor}</span>
         <div id="y_axis" class="custom_y_axis"></div>
         <div class="legend_container">
             <div id="smoother" title="Smoothing"></div>

modules/tools/cdmf-devicetype-archetype/src/main/resources/archetype-resources/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.__deviceType__.analytics-view/analytics-view.js

@@ -17,14 +17,23 @@
  */
 
 function onRequest(context) {
+    var devices = context.unit.params.devices;
     var deviceType = context.uriParams.deviceType;
     var deviceId = request.getParameter("deviceId");
 
-    if (deviceType != null && deviceType != undefined && deviceId != null && deviceId != undefined) {
+    if (devices) {
+        return {
+            "devices": stringify(devices),
+            "backendApiUri": devicemgtProps["httpsURL"] + "/"+deviceType+"/device/stats/"
+        };
+    } else if (deviceType != null && deviceType != undefined && deviceId != null && deviceId != undefined) {
         var deviceModule = require("/app/modules/device.js").deviceModule;
         var device = deviceModule.viewDevice(deviceType, deviceId);
         if (device && device.status != "error") {
-            return {"device": device, "backendApiUri" : devicemgtProps["httpsURL"] + "/"+deviceType+"/device/stats/" + deviceId};
+            return {
+                "device": device,
+                "backendApiUri": devicemgtProps["httpsURL"] + "/"+deviceType+"/device/stats/" + deviceId
+            };
         } else {
             response.sendError(404, "Device Id " + deviceId + " of type " + deviceType + " cannot be found!");
             exit();

modules/tools/cdmf-devicetype-archetype/src/main/resources/archetype-resources/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.__deviceType__.analytics-view/public/js/devicetype-graph.js

@@ -18,27 +18,20 @@
 
 var palette = new Rickshaw.Color.Palette({scheme: "classic9"});
 
-function drawGraph(from, to) {
-	var backendApiUrl = $("#chart").data("backend-api-url") + "?from=" + from + "&to=" + to;
+function drawGraph_${deviceType}(from, to) {
+    $("#y_axis").html("");
+    $("#smoother").html("");
+    $("#legend").html("");
+    $("#chart").html("");
+    $("#x_axis").html("");
+    $("#slider").html("");
 
-	var successCallback = function (data) {
-		if (data) {
-			drawLineGraph(JSON.parse(data));
-		}
-	};
-	invokerUtil.get(backendApiUrl, successCallback, function (message) {
-		console.log(message);
-	});
-}
+    var devices = $("#details").data("devices");
+
+    var tzOffset = new Date().getTimezoneOffset() * 60;
 
-function drawLineGraph(data) {
     var chartWrapperElmId = "#div-chart";
     var graphWidth = $(chartWrapperElmId).width() - 50;
-	if (data.length == 0 || data.length == undefined) {
-		$("#chart").html("<br/>No data available...");
-		return;
-	}
-    $("#chart").empty();
     var graphConfig = {
         element: document.getElementById("chart"),
         width: graphWidth,
@@ -53,47 +46,28 @@ function drawLineGraph(data) {
         series: []
     };
 
-    var tzOffset = new Date().getTimezoneOffset() * 60;
-
-    var min = Number.MAX_VALUE;
-    var max = Number.MIN_VALUE;
-    var range_min = 99999, range_max = 0;
-    var max_val = parseInt(data[0].values.temperature);
-    var min_val = max_val;
-    var chartData = [];
-    for (var i = 0; i < data.length; i++) {
-        var y_val = parseInt(data[i].values.temperature);
-        if (y_val > max_val) {
-            max_val = y_val;
-        } else if (y_val < min_val) {
-            min_val = y_val;
-        }
-        chartData.push(
+    if (devices) {
+        for (var i = 0; i < devices.length; i++) {
+            graphConfig['series'].push(
                 {
-                    x: parseInt(data[i].values.time) - tzOffset,
-                    y: y_val
-                }
-        );
-    }
-    if (range_max < max_val) {
-        range_max = max_val;
-    }
-    if (range_min > min_val) {
-        range_min = min_val;
+                    'color': palette.color(),
+                    'data': [{
+                        x: parseInt(new Date().getTime() / 1000),
+                        y: 0
+                    }],
+                    'name': devices[i].name
+                });
         }
+    } else {
         graphConfig['series'].push(
             {
                 'color': palette.color(),
-                'data': chartData,
-                'name': $("#details").data("devicename"),
-                'scale': d3.scale.linear().domain([Math.min(min, min_val), Math.max(max, max_val)])
-                        .nice()
-            }
-    );
-
-    if (graphConfig['series'].length == 0) {
-        $(chartWrapperElmId).html("No data available...");
-        return;
+                'data': [{
+                    x: parseInt(new Date().getTime() / 1000),
+                    y: 0
+                }],
+                'name': $("#details").data("devicename")
+            });
     }
 
     var graph = new Rickshaw.Graph(graphConfig);
@@ -106,13 +80,12 @@ function drawLineGraph(data) {
 
     xAxis.render();
 
-    var yAxis = new Rickshaw.Graph.Axis.Y.Scaled({
+    var yAxis = new Rickshaw.Graph.Axis.Y({
         graph: graph,
         orientation: 'left',
         element: document.getElementById("y_axis"),
         width: 40,
-        height: 410,
-        'scale': d3.scale.linear().domain([Math.min(min, range_min), Math.max(max, range_max)]).nice()
+        height: 410
     });
 
     yAxis.render();
@@ -131,7 +104,7 @@ function drawLineGraph(data) {
         graph: graph,
         formatter: function (series, x, y) {
             var date = '<span class="date">' +
-                       moment((x + tzOffset) * 1000).format('Do MMM YYYY h:mm:ss a') + '</span>';
+                moment.unix((x + tzOffset) * 1000).format('Do MMM YYYY h:mm:ss a') + '</span>';
             var swatch = '<span class="detail_swatch" style="background-color: ' +
                 series.color + '"></span>';
             return swatch + series.name + ": " + parseInt(y) + '<br>' + date;
@@ -152,4 +125,59 @@ function drawLineGraph(data) {
         graph: graph,
         legend: legend
     });
+
+    var deviceIndex = 0;
+
+    if (devices) {
+        getData();
+    } else {
+        var backendApiUrl = $("#chart").data("backend-api-url") + "?from=" + from + "&to=" + to;
+        var successCallback = function (data) {
+            if (data) {
+                drawLineGraph(JSON.parse(data));
+            }
+        };
+        invokerUtil.get(backendApiUrl, successCallback, function (message) {
+            console.log(message);
+        });
+    }
+
+    function getData() {
+        if (deviceIndex >= devices.length) {
+            return;
+        }
+        var backendApiUrl = $("#chart").data("backend-api-url") + devices[deviceIndex].deviceIdentifier
+            + "?from=" + from + "&to=" + to;
+        var successCallback = function (data) {
+            if (data) {
+                drawLineGraph(JSON.parse(data));
+            }
+            deviceIndex++;
+            getData();
+        };
+        invokerUtil.get(backendApiUrl, successCallback, function (message) {
+            console.log(message);
+            deviceIndex++;
+            getData();
+        });
+    }
+
+    function drawLineGraph(data) {
+        if (data.length === 0 || data.length === undefined) {
+            return;
+        }
+
+        var chartData = [];
+        for (var i = 0; i < data.length; i++) {
+            chartData.push(
+                {
+                    x: parseInt(data[i].values.time) - tzOffset,
+                    y: parseInt(data[i].values.${nameOfTheSensor})
+                }
+            );
+        }
+
+        graphConfig.series[deviceIndex].data = chartData;
+        graph.update();
+    }
 }

modules/tools/cdmf-devicetype-archetype/src/main/resources/archetype-resources/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.__deviceType__.realtime.analytics-view/analytics-view.hbs

@@ -3,7 +3,7 @@
 {{/zone}}
 <div id="div-chart" data-websocketurl="{{websocketEndpoint}}">
     <div class="chartWrapper" id="chartWrapper">
-        <div id="y_axis" class="custom_y_axis">Temperature</div>
+        <div id="y_axis" class="custom_y_axis">${nameOfTheSensor}</div>
         <div class="legend_container">
             <div id="smoother" title="Smoothing"></div>
             <div id="legend"></div>

modules/tools/cdmf-devicetype-archetype/src/main/resources/archetype-resources/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.__deviceType__.realtime.analytics-view/analytics-view.js

@@ -27,7 +27,7 @@ function onRequest(context) {
     if (tokenPair) {
         token =  tokenPair.accessToken;
     }
-    websocketEndpoint = websocketEndpoint + "/secured-outputui/org.wso2.iot.devices.temperature/1.0.0?" +
+    websocketEndpoint = websocketEndpoint + "/secured-outputui/org.wso2.iot.devices.${nameOfTheSensor}/1.0.0?" +
     "token="+ token +"&deviceId=" + device.deviceIdentifier + "&deviceType=" + device.type;
     return {"device": device, "websocketEndpoint" : websocketEndpoint};
 }

modules/tools/cdmf-devicetype-archetype/src/main/resources/archetype-resources/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.__deviceType__.realtime.analytics-view/public/js/device-stats.js

@@ -63,7 +63,7 @@ $(window).load(function () {
     new Rickshaw.Graph.HoverDetail({
         graph: graph,
         formatter: function (series, x, y) {
-            var date = '<span class="date">' + moment(x * 1000).format('Do MMM YYYY h:mm:ss a') + '</span>';
+            var date = '<span class="date">' + moment.unix(x*1000).format('Do MMM YYYY h:mm:ss a') + '</span>';
             var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
             return swatch + series.name + ": " + parseInt(y) + '<br>' + date;
         }

modules/tools/cdmf-devicetype-archetype/src/main/resources/archetype-resources/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.__deviceType__.type-view/private/config.json

@@ -0,0 +1,8 @@
+
+{
+  "deviceType": {
+    "label": "${deviceType}",
+    "category": "virtual",
+    "downloadAgentUri": "${deviceType}/device/download"
+  }
+}