From 7ab6046d312d0b74a8835c72fbedfd180039e3fd Mon Sep 17 00:00:00 2001 From: GPrathap Date: Tue, 17 May 2016 18:52:52 +0530 Subject: [PATCH] did some UI changes --- .../analytics-view.hbs | 2 +- .../analytics-view.js | 13 +- .../public/js/devicetype-graph.js | 154 +++++++++++------- .../analytics-view.hbs | 2 +- .../analytics-view.js | 2 +- .../public/js/device-stats.js | 2 +- .../private/config.json | 8 + 7 files changed, 114 insertions(+), 69 deletions(-) create mode 100644 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 diff --git a/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 b/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 index 6a28c72c..03cf0d59 100644 --- a/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 +++ b/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}}">
- Temperature + ${nameOfTheSensor}
diff --git a/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 b/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 index 55e39e6f..5336bc2c 100644 --- a/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 +++ b/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(); diff --git a/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 b/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 index 70bf616c..8babb6fb 100644 --- a/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 +++ b/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; - - var successCallback = function (data) { - if (data) { - drawLineGraph(JSON.parse(data)); - } - }; - invokerUtil.get(backendApiUrl, successCallback, function (message) { - console.log(message); - }); -} +function drawGraph_${deviceType}(from, to) { + $("#y_axis").html(""); + $("#smoother").html(""); + $("#legend").html(""); + $("#chart").html(""); + $("#x_axis").html(""); + $("#slider").html(""); + + 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("
No data available..."); - return; - } - $("#chart").empty(); + var chartWrapperElmId = "#div-chart"; + var graphWidth = $(chartWrapperElmId).width() - 50; 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; - } - graphConfig['series'].push( + '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,9 +104,9 @@ function drawLineGraph(data) { graph: graph, formatter: function (series, x, y) { var date = '' + - moment((x + tzOffset) * 1000).format('Do MMM YYYY h:mm:ss a') + ''; + moment.unix((x + tzOffset) * 1000).format('Do MMM YYYY h:mm:ss a') + ''; var swatch = ''; + series.color + '">'; return swatch + series.name + ": " + parseInt(y) + '
' + 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(); + } } diff --git a/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 b/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 index 9d2f07c7..ad79ed4b 100644 --- a/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 +++ b/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}}
-
Temperature
+
${nameOfTheSensor}
diff --git a/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 b/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 index 5b4bf524..78f6ab41 100644 --- a/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 +++ b/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}; } \ No newline at end of file diff --git a/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 b/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 index d24b1918..e3ea82f8 100644 --- a/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 +++ b/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 = '' + moment(x * 1000).format('Do MMM YYYY h:mm:ss a') + ''; + var date = '' + moment.unix(x*1000).format('Do MMM YYYY h:mm:ss a') + ''; var swatch = ''; return swatch + series.name + ": " + parseInt(y) + '
' + date; } diff --git a/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 b/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 new file mode 100644 index 00000000..97bb71cf --- /dev/null +++ b/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" + } +} \ No newline at end of file