-
-
-
-
-
-
-
-
-
-
Acceleromter
-
-
-
-
-
-
-
-
-
-
-
-
-
+{{#zone "topCss"}}
+ {{css "css/custom.css"}}
+{{/zone}}
+
+
+ {{#each graphData}}
+ {{#each this}}
+
+
+
+
+
+
+ lines stack
+
+
+
+
+
+ {{/each}}
+ {{/each}}
{{#zone "bottomJs"}}
{{js "js/android_sense.js"}}
-{{/zone}}
+{{/zone}}
\ No newline at end of file
diff --git a/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.analytics-view/analytics-view.js b/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.analytics-view/analytics-view.js
index d8abcc223b..8c5dfaf80e 100644
--- a/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.analytics-view/analytics-view.js
+++ b/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.analytics-view/analytics-view.js
@@ -17,9 +17,26 @@
*/
function onRequest(context) {
+
+ var log = new Log("analytics-view.js");
var user = context.user;
+ var graphData={};
+ var graphType = request.getParameter("graphType");
+ var graph =request.getParameter("sensor");
+ graphData[graphType]=[graph];
var deviceId = request.getParameter("deviceId");
+ var deviceType = context.uriParams.deviceType;
+ var deviceModule = require("/app/modules/business-controllers/device.js")["deviceModule"];
+ var device = deviceModule.viewDevice(deviceType, deviceId);
+ if (device && device.status != "error") {
+ return {
+ "device": device.content,
+ "backendApiUrl": "/android_sense/stats/" + deviceId + "/sensors/",
+ "graphData":graphData
+ };
+ } else {
+ response.sendError(404, "Device Id " + deviceId + " of type " + deviceType + " cannot be found!");
+ exit();
+ }
- //Redirects to the portal app as we do not use the old analytics view.
- response.sendRedirect(context.app.conf["portalURL"] + "/portal/dashboards/android-iot/sensors?owner=" + user.username + "&deviceId=" + deviceId);
-}
\ No newline at end of file
+}
diff --git a/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.analytics-view/public/css/custom.css b/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.analytics-view/public/css/custom.css
new file mode 100644
index 0000000000..56ac73ceb5
--- /dev/null
+++ b/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.analytics-view/public/css/custom.css
@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.chartWrapper {
+ position: relative;
+ margin-bottom: 40px;
+}
+
+.chart-type-toggle {
+ background: #737373;
+ padding: 40px;
+ font-family: Arial;
+ font-size: 12px;
+ color: white;
+ display: inline-block;
+ padding: 5px 12px;
+ margin-top: 5px;
+ border-radius: 2px;
+ position: relative;
+ float: right;
+ white-space: nowrap;
+}
+
+.y-axis-label {
+ position: absolute;
+ top: -40px;
+ font-weight: 400;
+ text-transform: capitalize;
+}
+
+.x-axis-label {
+ position: absolute;
+ right: 0;
+ bottom: 40px;
+ font-weight: 400;
+ text-transform: capitalize;
+}
+
+#dateRangePickerContainer{
+ display: none;
+}
\ No newline at end of file
diff --git a/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.analytics-view/public/js/android_sense.js b/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.analytics-view/public/js/android_sense.js
index 3abfc35513..5978a2ff73 100644
--- a/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.analytics-view/public/js/android_sense.js
+++ b/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.analytics-view/public/js/android_sense.js
@@ -1,5 +1,5 @@
/*
- * Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
@@ -16,34 +16,40 @@
* under the License.
*/
-var palette = new Rickshaw.Color.Palette({scheme: "classic9"});
+var palette = new Rickshaw.Color.Palette({scheme: "munin"});
var graphMap = {};
function drawGraph_android_sense(from, to) {
+
+ from = new Date();
+ from.setDate(from.getDate()-1);
+ from.setHours(0,0,0,0);
+ from = parseInt(from.getTime());
+ to = parseInt(new Date().getTime());
+
var devices = $("#android_sense-details").data("devices");
var tzOffset = new Date().getTimezoneOffset() * 60;
var streamIndex = 0;
- var streams = ["battery", "light", "pressure", "proximity", "accelerometer", "magnetic", "rotation", "gyroscope", "gravity"];
+ var streams = ["battery", "light", "pressure", "proximity", "magnetic", "rotation", "gyroscope", "gravity", "accelerometer"];
+ var graphType = $(".y-axis-label").text();
populateGraph();
function populateGraph() {
- if (streamIndex < 4) {
- retrieveDataAndDrawLineGraph(streams[streamIndex], from, to);
- } else if (streamIndex < 9) {
- retrieveDataAndDrawMultiLineGraph(streams[streamIndex], from, to);
+ if (streams.indexOf(graphType) < 4) {
+ retrieveDataAndDrawGraph(graphType, from, to);
+ } else if (streams.indexOf(graphType) < 9) {
+ retrieveDataAndDrawMultiLineGraph(graphType, from, to);
}
- streamIndex++;
}
function clearContent(type) {
- $("#y_axis-" + type).html("");
+ $("#y-axis-" + type).html("");
$("#smoother-" + type).html("");
$("#legend-" + type).html("");
$("#chart-" + type).html("");
$("#x_axis-" + type).html("");
- $("#slider-" + type).html("");
}
function initGraph(type, isMultilined) {
@@ -52,17 +58,14 @@ function drawGraph_android_sense(from, to) {
}
var chartWrapperElmId = "#android_sense-div-chart";
- var graphWidth = $(chartWrapperElmId).width() - 50;
+ var graphWidth = $(chartWrapperElmId).width() - 100;
var graphConfig = {
element: document.getElementById("chart-" + type),
width: graphWidth,
height: 400,
strokeWidth: 2,
- renderer: 'line',
interpolation: "linear",
- unstack: true,
- stack: false,
xScale: d3.time.scale(),
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0.2},
series: []
@@ -89,7 +92,7 @@ function drawGraph_android_sense(from, to) {
x: parseInt(new Date().getTime() / 1000),
y: 0
}],
- 'name': "x"
+ 'name': "x " + type
},
{
'color': palette.color(),
@@ -97,7 +100,7 @@ function drawGraph_android_sense(from, to) {
x: parseInt(new Date().getTime() / 1000),
y: 0
}],
- 'name': "y"
+ 'name': "y " + type
},
{
'color': palette.color(),
@@ -105,7 +108,7 @@ function drawGraph_android_sense(from, to) {
x: parseInt(new Date().getTime() / 1000),
y: 0
}],
- 'name': "z"
+ 'name': "z " + type
}
);
} else {
@@ -116,13 +119,12 @@ function drawGraph_android_sense(from, to) {
x: parseInt(new Date().getTime() / 1000),
y: 0
}],
- 'name': $("#android_sense-details").data("devicename")
+ 'name': type
});
}
}
var graph = new Rickshaw.Graph(graphConfig);
- graph.render();
var xAxis = new Rickshaw.Graph.Axis.Time({
graph: graph
@@ -132,17 +134,15 @@ function drawGraph_android_sense(from, to) {
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
orientation: 'left',
- element: document.getElementById("y_axis-" + type),
width: 40,
- height: 410
- });
- yAxis.render();
+ height: 410,
+ tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
+ element: document.getElementById("y-axis-" + type)
- var slider = new Rickshaw.Graph.RangeSlider.Preview({
- graph: graph,
- element: document.getElementById("slider-" + type)
});
+ yAxis.render();
+
var legend = new Rickshaw.Graph.Legend({
graph: graph,
element: document.getElementById("legend-" + type)
@@ -159,34 +159,35 @@ function drawGraph_android_sense(from, to) {
}
});
- var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
+ new Rickshaw.Graph.Behavior.Series.Toggle({
graph: graph,
legend: legend
});
- var order = new Rickshaw.Graph.Behavior.Series.Order({
+ new Rickshaw.Graph.Behavior.Series.Order({
graph: graph,
legend: legend
});
- var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight({
+ new Rickshaw.Graph.Behavior.Series.Highlight({
graph: graph,
legend: legend
});
+ graph.render();
+
graphMap[type] = {};
graphMap[type].graph = graph;
graphMap[type].config = graphConfig;
return graphMap[type];
}
- function retrieveDataAndDrawLineGraph(type, from, to) {
+ function retrieveDataAndDrawGraph(type, from, to) {
clearContent(type);
var graphObj = initGraph(type, false);
var graph = graphObj.graph;
var graphConfig = graphObj.config;
-
var deviceIndex = 0;
if (devices) {
@@ -195,12 +196,10 @@ function drawGraph_android_sense(from, to) {
var backendApiUrl = $("#android_sense-div-chart").data("backend-api-url") + type + "?from=" + from + "&to=" + to;
var successCallback = function (data) {
if (data) {
- drawLineGraph(JSON.parse(data));
+ drawGraph(JSON.parse(data));
}
- populateGraph();
};
invokerUtil.get(backendApiUrl, successCallback, function (message) {
- populateGraph();
});
}
@@ -212,7 +211,7 @@ function drawGraph_android_sense(from, to) {
+ "/sensors/" + type + "?from=" + from + "&to=" + to;
var successCallback = function (data) {
if (data) {
- drawLineGraph(JSON.parse(data));
+ drawGraph(JSON.parse(data));
}
deviceIndex++;
getData();
@@ -223,21 +222,21 @@ function drawGraph_android_sense(from, to) {
});
}
- function drawLineGraph(data) {
+ function drawGraph(data) {
if (data.length === 0 || data.length === undefined) {
return;
}
var chartData = [];
+ console.log(data.length);
for (var i = 0; i < data.length; i++) {
chartData.push(
{
- x: parseInt(data[i].values.time) - tzOffset,
+ x: parseInt((data[i].values.meta_timestamp - tzOffset)/1000),
y: parseInt(getFieldData(data[i], type))
}
);
}
-
graphConfig.series[deviceIndex].data = chartData;
graph.update();
}
@@ -258,12 +257,10 @@ function drawGraph_android_sense(from, to) {
var backendApiUrl = $("#android_sense-div-chart").data("backend-api-url") + type + "?from=" + from + "&to=" + to;
var successCallback = function (data) {
if (data) {
- drawLineGraph(JSON.parse(data));
+ drawGraph(JSON.parse(data));
}
- populateGraph();
};
invokerUtil.get(backendApiUrl, successCallback, function (message) {
- populateGraph();
});
}
@@ -276,7 +273,7 @@ function drawGraph_android_sense(from, to) {
+ "/sensors/" + type + "?from=" + from + "&to=" + to;
var successCallback = function (data) {
if (data) {
- drawLineGraph(JSON.parse(data));
+ drawGraph(JSON.parse(data));
}
deviceIndex++;
getData();
@@ -287,7 +284,7 @@ function drawGraph_android_sense(from, to) {
});
}
- function drawLineGraph(data) {
+ function drawGraph(data) {
if (data.length === 0 || data.length === undefined) {
return;
}
@@ -297,31 +294,52 @@ function drawGraph_android_sense(from, to) {
for (var i = 0; i < data.length; i++) {
chartData.push(
{
- x: parseInt(data[i].values.time) - tzOffset,
- y: sqrt(pow(parseInt(data[i].values.y), 2) + pow(parseInt(data[i].values.x), 2) + pow(parseInt(data[i].values.z), 2))
+ x: parseInt(data[i].values.meta_timestamp) - tzOffset,
+ y: sqrt(pow(parseInt(data[i].values.Y), 2) + pow(parseInt(data[i].values.X), 2) + pow(parseInt(data[i].values.z), 2))
});
}
graphConfig.series[deviceIndex].data = chartData;
} else {
var chartDataX = [], chartDataY = [], chartDataZ = [];
+ console.log(data.length);
for (var i = 0; i < data.length; i++) {
- chartDataX.push(
+ if (data[i].values.axis==="X"){
+ console.log(new Date(parseInt(data[i].values.meta_timestamp)- tzOffset));
+ chartDataX.push(
{
- x: parseInt(data[i].values.time) - tzOffset,
- y: parseInt(data[i].values.y)
+ x: parseInt(((data[i].values.meta_timestamp) - tzOffset)/1000),
+ y: parseInt(data[i].values.value)
});
-
- chartDataY.push(
+ }else if(data[i].values.axis==="Y"){
+ chartDataY.push(
+ {
+ x: parseInt(((data[i].values.meta_timestamp) - tzOffset)/1000),
+ y: parseInt(data[i].values.value)
+ });
+ }else if(data[i].values.axis==="Z"){
+ chartDataZ.push(
{
- x: parseInt(data[i].values.time) - tzOffset,
+ x: parseInt(((data[i].values.meta_timestamp) - tzOffset)/1000),
+ y: parseInt(data[i].values.value)
+ });
+ }else if(data[i].values.hasOwnProperty("x") && data[i].values.hasOwnProperty("y") && data[i].values.hasOwnProperty("z")){
+ chartDataX.push(
+ {
+ x: parseInt(((data[i].values.meta_timestamp) - tzOffset)/1000),
y: parseInt(data[i].values.x)
});
-
- chartDataZ.push(
+ chartDataY.push(
{
- x: parseInt(data[i].values.time) - tzOffset,
+ x: parseInt(((data[i].values.meta_timestamp) - tzOffset)/1000),
+ y: parseInt(data[i].values.y)
+ });
+ chartDataZ.push(
+ {
+ x: parseInt(((data[i].values.meta_timestamp) - tzOffset)/1000),
y: parseInt(data[i].values.z)
});
+ }
+
}
graphConfig.series[0].data = chartDataX;
graphConfig.series[1].data = chartDataY;
@@ -352,5 +370,21 @@ function drawGraph_android_sense(from, to) {
return columnData;
}
+}
+
+$(document).ready(function() {
+ $("input:radio").click(function(e) {
+ var offsetMode = e.target.value;
+ var graphType = e.target.className;
+
+ if (offsetMode == 'lines') {
+ graphMap[graphType].graph.setRenderer('line');
+ graphMap[graphType].graph.offset = 'zero';
+ } else {
+ graphMap[graphType].graph.setRenderer('stack');
+ graphMap[graphType].graph.offset = offsetMode;
+ }
+ graphMap[graphType].graph.update();
+ });
-}
\ No newline at end of file
+});
\ No newline at end of file