dilini
/
device-mgt-plugins
forked from community/device-mgt-plugins
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixes android sense statistic graph issue

Browse Source 
fixes https://github.com/wso2/product-iots/issues/1143
revert-dabc3590
madhawap 7 years ago
parent 476f3336e5
commit c23461710f
1 changed files with 85 additions and 82 deletions
Show Stats Download Patch File Download Diff File

167
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.realtime.analytics-view/public/js/device-stats.js
Unescape View File

@ -75,6 +75,7 @@ var rotation_yData = [];
var rotation_zData = []; var rotation_zData = [];
var graphMap = {}; var graphMap = {};
var graphSettingsMap = {};
var palette = new Rickshaw.Color.Palette({scheme: "munin"}); var palette = new Rickshaw.Color.Palette({scheme: "munin"});
@ -83,21 +84,21 @@ var elemTop;
$(window).load(function () { $(window).load(function () {
graphMap["battery"]=lineGraph("battery", batteryData); graphMap["battery"]=lineGraph("battery", batteryData);
graphMap["light"]=lineGraph("light", lightData); graphMap["light"]=lineGraph("light", lightData);
graphMap["pressure"]=lineGraph("pressure", pressureData); graphMap["pressure"]=lineGraph("pressure", pressureData);
graphMap["proximity"]=lineGraph("proximity", proximityData); graphMap["proximity"]=lineGraph("proximity", proximityData);
graphMap["accelerometer"]=threeDlineGraph("accelerometer", accelerometer_xData, accelerometer_yData, accelerometer_zData); graphMap["accelerometer"]=threeDlineGraph("accelerometer", accelerometer_xData, accelerometer_yData, accelerometer_zData);
graphMap["magnetic"]=threeDlineGraph("magnetic", magnetic_xData, magnetic_yData, magnetic_zData); graphMap["magnetic"]=threeDlineGraph("magnetic", magnetic_xData, magnetic_yData, magnetic_zData);
graphMap["gyroscope"]=threeDlineGraph("gyroscope", gyroscope_xData, gyroscope_yData, gyroscope_zData); graphMap["gyroscope"]=threeDlineGraph("gyroscope", gyroscope_xData, gyroscope_yData, gyroscope_zData);
graphMap["gravity"]=threeDlineGraph("gravity", gravity_xData, gravity_yData, gravity_zData); graphMap["gravity"]=threeDlineGraph("gravity", gravity_xData, gravity_yData, gravity_zData);
graphMap["rotation"]=threeDlineGraph("rotation", rotation_xData, rotation_yData, rotation_zData); graphMap["rotation"]=threeDlineGraph("rotation", rotation_xData, rotation_yData, rotation_zData);
var websocketUrl = $("#stat-section").data("websocketurl"); var websocketUrl = $("#stat-section").data("websocketurl");
connect(websocketUrl) connect(websocketUrl)
}); });
window.onbeforeunload = function() { window.onbeforeunload = function() {
disconnect(); disconnect();
}; };
function threeDlineGraph(type, xChartData, yChartData, zChartData) { function threeDlineGraph(type, xChartData, yChartData, zChartData) {
@ -121,10 +122,10 @@ function threeDlineGraph(type, xChartData, yChartData, zChartData) {
var graph = new Rickshaw.Graph({ var graph = new Rickshaw.Graph({
element: $elem[0], element: $elem[0],
width: $elem.width() - 100, width: $elem.width() - 100,
height: 300, height: 300,
renderer: "line", renderer: "line",
interpolation: "linear", interpolation: "linear",
padding: {top: 0.2, left: 0.0, right: 0.0, bottom: 0.2}, padding: {top: 0.2, left: 0.0, right: 0.0, bottom: 0.2},
xScale: d3.time.scale(), xScale: d3.time.scale(),
series: [ series: [
@ -140,26 +141,26 @@ function threeDlineGraph(type, xChartData, yChartData, zChartData) {
xAxis.render(); xAxis.render();
new Rickshaw.Graph.Axis.Y({ new Rickshaw.Graph.Axis.Y({
graph: graph, graph: graph,
orientation: 'left', orientation: 'left',
height: 300, height: 300,
tickFormat: Rickshaw.Fixtures.Number.formatKMBT, tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
element: document.getElementById("y-axis-"+type) element: document.getElementById("y-axis-"+type)
}); });
new Rickshaw.Graph.Legend({ new Rickshaw.Graph.Legend({
graph: graph, graph: graph,
element: document.getElementById('legend-' + type) element: document.getElementById('legend-' + type)
}); });
var detail = new Rickshaw.Graph.HoverDetail({ var detail = new Rickshaw.Graph.HoverDetail({
graph: graph graph: graph
}); });
graph.render(); graph.render();
return graph; return graph;
} }
function lineGraph(type, chartData) { function lineGraph(type, chartData) {
@ -171,15 +172,15 @@ function lineGraph(type, chartData) {
}); });
} }
var $elem = $("#chart-" + type); var $elem = $("#chart-" + type);
var graph = new Rickshaw.Graph({ var graph = new Rickshaw.Graph({
element: $elem[0], element: $elem[0],
width: $elem.width() - 100, width: $elem.width() - 100,
height: 300, height: 300,
renderer: "line", renderer: "line",
interpolation: "linear", interpolation: "linear",
padding: {top: 0.2, left: 0.0, right: 0.0, bottom: 0.2}, padding: {top: 0.2, left: 0.0, right: 0.0, bottom: 0.2},
xScale: d3.time.scale(), xScale: d3.time.scale(),
series: [{ series: [{
'color': palette.color(), 'color': palette.color(),
@ -205,7 +206,7 @@ function lineGraph(type, chartData) {
new Rickshaw.Graph.Legend({ new Rickshaw.Graph.Legend({
graph: graph, graph: graph,
element: document.getElementById('legend-' + type) element: document.getElementById('legend-' + type)
}); });
new Rickshaw.Graph.HoverDetail({ new Rickshaw.Graph.HoverDetail({
graph: graph, graph: graph,
@ -216,9 +217,9 @@ function lineGraph(type, chartData) {
} }
}); });
graph.render(); graph.render();
return graph; return graph;
} }
//websocket connection //websocket connection
@ -231,7 +232,7 @@ function connect(target) {
console.log('WebSocket is not supported by this browser.'); console.log('WebSocket is not supported by this browser.');
} }
if (ws) { if (ws) {
ws.onmessage = function (event) { ws.onmessage = function (event) {
var dataPoint = JSON.parse(event.data); var dataPoint = JSON.parse(event.data);
if (dataPoint) { if (dataPoint) {
@ -242,50 +243,50 @@ function connect(target) {
break; break;
case "light": case "light":
graphUpdate(lightData, time, dataPoint[lightId], graphMap["light"]); graphUpdate(lightData, time, dataPoint[lightId], graphMap["light"]);
break; break;
case "pressure": case "pressure":
graphUpdate(pressureData, time, dataPoint[pressureId], graphMap["pressure"]); graphUpdate(pressureData, time, dataPoint[pressureId], graphMap["pressure"]);
break; break;
case "proximity": case "proximity":
graphUpdate(proximityData, time, dataPoint[proximityId], graphMap["proximity"]); graphUpdate(proximityData, time, dataPoint[proximityId], graphMap["proximity"]);
break; break;
case "accelerometer": case "accelerometer":
dataUpdate(accelerometer_xData, time, dataPoint[accelerometer_xId]); dataUpdate(accelerometer_xData, time, dataPoint[accelerometer_xId]);
dataUpdate(accelerometer_yData, time, dataPoint[accelerometer_yId]); dataUpdate(accelerometer_yData, time, dataPoint[accelerometer_yId]);
dataUpdate(accelerometer_zData, time, dataPoint[accelerometer_zId]); dataUpdate(accelerometer_zData, time, dataPoint[accelerometer_zId]);
graphMap["accelerometer"].update(); graphMap["accelerometer"].update();
break; break;
case "magnetic": case "magnetic":
dataUpdate(magnetic_xData, time, dataPoint[magnetic_xId]); dataUpdate(magnetic_xData, time, dataPoint[magnetic_xId]);
dataUpdate(magnetic_yData, time, dataPoint[magnetic_yId]); dataUpdate(magnetic_yData, time, dataPoint[magnetic_yId]);
dataUpdate(magnetic_zData, time, dataPoint[magnetic_zId]); dataUpdate(magnetic_zData, time, dataPoint[magnetic_zId]);
graphMap["magnetic"].update(); graphMap["magnetic"].update();
break; break;
case "gyroscope": case "gyroscope":
dataUpdate(gyroscope_xData, time, dataPoint[gyroscope_xId]); dataUpdate(gyroscope_xData, time, dataPoint[gyroscope_xId]);
dataUpdate(gyroscope_yData, time, dataPoint[gyroscope_yId]); dataUpdate(gyroscope_yData, time, dataPoint[gyroscope_yId]);
dataUpdate(gyroscope_zData, time, dataPoint[gyroscope_zId]); dataUpdate(gyroscope_zData, time, dataPoint[gyroscope_zId]);
graphMap["gyroscope"].update(); graphMap["gyroscope"].update();
break; break;
case "rotation": case "rotation":
dataUpdate(magnetic_xData, time, dataPoint[rotation_xId]); dataUpdate(magnetic_xData, time, dataPoint[rotation_xId]);
dataUpdate(magnetic_yData, time, dataPoint[rotation_yId]); dataUpdate(magnetic_yData, time, dataPoint[rotation_yId]);
dataUpdate(magnetic_zData, time, dataPoint[rotation_zId]); dataUpdate(magnetic_zData, time, dataPoint[rotation_zId]);
graphMap["rotation"].update(); graphMap["rotation"].update();
break; break;
case "gravity": case "gravity":
dataUpdate(gravity_xData, time, dataPoint[gravity_xId]); dataUpdate(gravity_xData, time, dataPoint[gravity_xId]);
dataUpdate(gravity_yData, time, dataPoint[gravity_yId]); dataUpdate(gravity_yData, time, dataPoint[gravity_yId]);
dataUpdate(gravity_zData, time, dataPoint[gravity_zId]); dataUpdate(gravity_zData, time, dataPoint[gravity_zId]);
graphMap["gravity"].update(); graphMap["gravity"].update();
break; break;
} }
} }
@ -318,53 +319,55 @@ function disconnect() {
} }
function maximizeGraph(graph, width,height){ function maximizeGraph(graph, width,height){
graph.configure({ graphSettingsMap[graph.element.id] = {'width': graph.width, 'height': graph.height};
width: width*2, graph.configure({
height: height*2 width: width*2,
height: height*2
}); });
graph.update(); graph.update();
} }
function minimizeGraph(graph){ function minimizeGraph(graph){
graph.configure({ var graphSettings = graphSettingsMap[graph.element.id];
width: 366, graph.configure({
height: 300 width: graphSettings.width,
}); height: graphSettings.height
graph.update(); });
graph.update();
} }
//maximize minimize functionality //maximize minimize functionality
$(".fw-expand").click(function(e) { $(".fw-expand").click(function(e) {
var innerGraph= graphMap[e.target.nextElementSibling.innerHTML]; var innerGraph= graphMap[e.target.nextElementSibling.innerHTML];
var width = $(".chartWrapper").width(); var width = $(".chartWrapper").width();
var height = $(".chartWrapper").height(); var height = $(".chartWrapper").height();
if($(this).hasClass("default-view")){ if($(this).hasClass("default-view")){
elemTop = $('#'+innerGraph.element.id).parents('.graph')[0].offsetTop; elemTop = $('#'+innerGraph.element.id).parents('.graph')[0].offsetTop;
$(this).removeClass("default-view"); $(this).removeClass("default-view");
$(this).removeClass("fw-expand"); $(this).removeClass("fw-expand");
$(this).addClass("fw-contract"); $(this).addClass("fw-contract");
maximizeGraph(innerGraph,width,height); maximizeGraph(innerGraph,width,height);
$(this).parent().parent().addClass("max"); $(this).parent().parent().addClass("max");
$(this).closest(".graph").siblings().addClass("max_hide"); $(this).closest(".graph").siblings().addClass("max_hide");
$(this).closest(".graph").parent().siblings().addClass("max_hide"); $(this).closest(".graph").parent().siblings().addClass("max_hide");
}else{ }else{
$(this).addClass("default-view"); $(this).addClass("default-view");
$(this).addClass("fw-expand"); $(this).addClass("fw-expand");
$(this).removeClass("fw-contract"); $(this).removeClass("fw-contract");
minimizeGraph(innerGraph); minimizeGraph(innerGraph);
$(this).parent().parent().removeClass("max"); $(this).parent().parent().removeClass("max");
$(this).closest(".graph").siblings().removeClass("max_hide"); $(this).closest(".graph").siblings().removeClass("max_hide");
$(this).closest(".graph").parent().siblings().removeClass("max_hide"); $(this).closest(".graph").parent().siblings().removeClass("max_hide");
focusToArea() focusToArea()
} }
}); });
//graph focusing function //graph focusing function
function focusToArea(){ function focusToArea(){
var container = $("body"); var container = $("body");
container.animate({ container.animate({
scrollTop: elemTop scrollTop: elemTop
}); });
} }

Write Preview
Loading…
Cancel
Save