community
/
product-iots
10
0
Fork 4
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adding real-time analytics view

Browse Source
merge-requests/1/head
GPrathap 9 years ago
parent 11c5056b99
commit e44b6ca710
2 changed files with 73 additions and 91 deletions
Show Stats Download Patch File Download Diff File

44
modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/analytics-view.hbs
Unescape View File

@ -1,35 +1,24 @@
{{! {{unit "cdmf.unit.lib.handlebars"}}
Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. {{#zone "topCss"}}
{{css "css/coffee.css"}}
WSO2 Inc. licenses this file to you under the Apache License, {{/zone}}
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.
}}
{{unit "cdmf.unit.lib.rickshaw-graph"}}
<div id="chartWrapper"> <div id="chartWrapper">
</div> </div>
<div id="div-chart" data-websocketurl="{{websocketEndpoint}}"> <div id="div-chart" data-websocketurl="{{websocketEndpoint}}">
<div id="chartWrapper-temperature" class="chartWrapper">
<div id="y_axis-temperature" class="custom_y_axis" style="margin-top: -20px;">Temperature</div> <div class="coffee-wrapper">
<div id="chart-temperature" class="custom_rickshaw_graph"></div> <div class="coffee">
<div class="custom_x_axis">Time</div> <div class="coffee_main">
<div class="coffee_inner">
<div class="water" id="water"></div>
</div>
<div class="highlight"></div>
</div>
</div>
</div> </div>
<div id="chartWrapper-humidity" class="chartWrapper"> <div>
<div id="y_axis-humidity" class="custom_y_axis" style="margin-top: -20px;">Humidity</div>
<div id="chart-humidity" class="custom_rickshaw_graph"></div>
<div class="custom_x_axis">Time</div>
</div> </div>
</div> </div>
@ -45,4 +34,5 @@
{{js "js/moment.min.js"}} {{js "js/moment.min.js"}}
{{js "js/socket.io.min.js"}} {{js "js/socket.io.min.js"}}
{{js "js/device-stats.js"}} {{js "js/device-stats.js"}}
{{js "js/coffee.js"}}
{{/zone}} {{/zone}}

116
modules/samples/watertank/component/ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.watertank.realtime.analytics-view/public/js/device-stats.js
Unescape View File

@ -24,71 +24,68 @@ var temperatureData = [];
var humidity; var humidity;
var humidityData = []; var humidityData = [];
var palette = new Rickshaw.Color.Palette({scheme: "classic9"}); //var palette = new Rickshaw.Color.Palette({scheme: "classic9"});
$(window).load(function () { $(window).load(function () {
temperature = lineGraph("temperature", temperatureData);
humidity = lineGraph("humidity", humidityData);
var websocketUrl = $("#div-chart").data("websocketurl"); var websocketUrl = $("#div-chart").data("websocketurl");
connect(websocketUrl) connect(websocketUrl);
updateCoffee(20);
}); });
$(window).unload(function () { $(window).unload(function () {
disconnect(); disconnect();
}); });
function lineGraph(type, chartData) { //function lineGraph(type, chartData) {
var tNow = new Date().getTime() / 1000; // var tNow = new Date().getTime() / 1000;
for (var i = 0; i < 30; i++) { // for (var i = 0; i < 30; i++) {
chartData.push({ // chartData.push({
x: tNow - (30 - i) * 15, // x: tNow - (30 - i) * 15,
y: parseFloat(0) // y: parseFloat(0)
}); // });
} // }
//
var graph = new Rickshaw.Graph({ // var graph = new Rickshaw.Graph({
element: document.getElementById("chart-" + type), // element: document.getElementById("chart-" + type),
width: $("#div-chart").width() - 50, // width: $("#div-chart").width() - 50,
height: 300, // height: 300,
renderer: "line", // renderer: "line",
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(),
'data': chartData, // 'data': chartData,
'name': type && type[0].toUpperCase() + type.slice(1) // 'name': type && type[0].toUpperCase() + type.slice(1)
}] // }]
}); // });
//
graph.render(); // graph.render();
//
var xAxis = new Rickshaw.Graph.Axis.Time({ // var xAxis = new Rickshaw.Graph.Axis.Time({
graph: graph // graph: graph
}); // });
//
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.HoverDetail({ // new Rickshaw.Graph.HoverDetail({
graph: graph, // graph: graph,
formatter: function (series, x, y) { // 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(x * 1000).format('Do MMM YYYY h:mm:ss a') + '</span>';
var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>'; // var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
return swatch + series.name + ": " + parseInt(y) + '<br>' + date; // return swatch + series.name + ": " + parseInt(y) + '<br>' + date;
} // }
}); // });
//
return graph; // return graph;
} //}
//websocket connection //websocket connection
function connect(target) { function connect(target) {
@ -112,12 +109,7 @@ function connect(target) {
} }
function graphUpdate(chartData, xValue, yValue, graph) { function graphUpdate(chartData, xValue, yValue, graph) {
chartData.push({ updateCoffee(xValue);
x: parseInt(xValue),
y: parseFloat(yValue)
});
chartData.shift();
graph.update();
} }
function disconnect() { function disconnect() {

Write Preview
Loading…
Cancel
Save