Display statistics for grouped devices

application-manager-new
charithag 10 years ago
parent e86d6e43ab
commit b631810d79

@ -25,102 +25,170 @@ var log = new Log("api/stats-api.jag");
var constants = require("/modules/constants.js"); var constants = require("/modules/constants.js");
var dcProps = require('/config/dc-props.js').config(); var dcProps = require('/config/dc-props.js').config();
var utility = require("/modules/utility.js").utility; var utility = require("/modules/utility.js").utility;
var deviceModule = require("/modules/device.js").deviceModule;
var result; var from = request.getParameter("from");
var statsClient = new Packages.org.wso2.carbon.device.mgt.iot.common.analytics.statistics.IoTUsageStatisticsClient; var to = request.getParameter("to");
var user = session.get(constants.USER_SESSION_KEY);
if (!user) {
response.sendRedirect(dcProps.appContext + "login?#login-required");
exit();
}
var carbon = require('carbon');
var carbonHttpsServletTransport = carbon.server.address('https');
var deviceCloudService = carbonHttpsServletTransport + "/devicecloud/group_manager";
var statsClient = new Packages.org.wso2.carbon.device.mgt.iot.common.analytics.statistics.IoTUsageStatisticsClient;
var stats = {};
var deviceId;
var deviceType;
if (uriMatcher.match("/{context}/api/stats")) { if (uriMatcher.match("/{context}/api/stats")) {
deviceId = request.getParameter("deviceId"); deviceId = request.getParameter("deviceId");
deviceType = request.getParameter("deviceType"); deviceType = request.getParameter("deviceType");
from = request.getParameter("from");
to = request.getParameter("to");
user = session.get(constants.USER_SESSION_KEY);
if (!user) {
response.sendRedirect(dcProps.appContext + "login?#login-required");
exit();
}
log.info("deviceId : " + deviceId + " from : " + from + " to : " + to); log.info("deviceId : " + deviceId + " from : " + from + " to : " + to);
getDeviceData(deviceType, deviceId);
switch (deviceType) {
case "firealarm": }else if (uriMatcher.match("/{context}/api/stats/group")){
result = getFireAlarmData(user.username, deviceId, from, to); var groupId = request.getParameter("groupId");
break;
case "sensebot": //URL: GET https://localhost:9443/devicecloud/group_manager/group/id/{groupId}/device/all
result = getSensebotData(user.username, deviceId, from, to); var endPoint = deviceCloudService + "/group/id/" + groupId + "/device/all";
break; var data = {"username": user.username};
case "arduino": log.info("ep: " + endPoint);
result = getArduinoData(user.username, deviceId, from, to); var devices = get(endPoint, data, "json");
break;
case "digital_display": for (var device in devices.data){
result = getDigitalDisplayData(user.username, deviceId, from, to); deviceId = devices.data[device].deviceIdentifier;
break; deviceType = devices.data[device].type;
case "android_sense": getDeviceData(deviceType, deviceId);
result = getAndroidSenseData(user.username, deviceId, from, to); }
break;
case "raspberrypi":
result = getDigitalDisplayData(user.username, deviceId, from, to);
break;
default:
result = new Object();
}
} }
// returning the result. // returning the result.
if (result) { if (stats) {
print(result); print(stats);
}
function getDeviceData(deviceType, deviceId){
var device = deviceModule.getDevice(deviceType, deviceId);
if (!device){
return;
}
switch (deviceType) {
case "firealarm":
getFireAlarmData(user.username, device, from, to);
break;
case "sensebot":
getSensebotData(user.username, device, from, to);
break;
case "arduino":
getArduinoData(user.username, device, from, to);
break;
case "digital_display":
getDigitalDisplayData(user.username, device, from, to);
break;
case "android_sense":
getAndroidSenseData(user.username, device, from, to);
break;
case "raspberrypi":
getDigitalDisplayData(user.username, device, from, to);
break;
}
} }
function getFireAlarmData(user, deviceId, from, to) { function getFireAlarmData(user, device, from, to) {
result = new Object(); if (stats['cpuTemperatureData'] == null){
result['cpuTemperatureData'] = getSensorData("DEVICE_CPU_TEMPERATURE_SUMMARY", "TEMPERATURE", user, deviceId, from, to); stats['cpuTemperatureData'] = [];
result['temperatureData'] = getSensorData("DEVICE_TEMPERATURE_SUMMARY", "TEMPERATURE", user, deviceId, from, to); }
result['fanData'] = getSensorData("DEVICE_FAN_USAGE_SUMMARY", "status", user, deviceId, from, to); if (stats['temperatureData'] == null){
result['bulbData'] = getSensorData("DEVICE_BULB_USAGE_SUMMARY", "status", user, deviceId, from, to); stats['temperatureData'] = [];
result['sonarData'] = getSensorData("SONAR_SENSOR_SUMMARY", "sonar", user, deviceId, from, to); }
return result; if (stats['fanData'] == null){
stats['fanData'] = [];
}
if (stats['bulbData'] == null){
stats['bulbData'] = [];
}
if (stats['sonarData'] == null){
stats['sonarData'] = [];
}
stats['cpuTemperatureData'].push({"device": device.name, "stats" : getSensorData("DEVICE_CPU_TEMPERATURE_SUMMARY", "TEMPERATURE", user, device.deviceIdentifier, from, to)});
stats['temperatureData'].push({"device": device.name, "stats" : getSensorData("DEVICE_TEMPERATURE_SUMMARY", "TEMPERATURE", user, device.deviceIdentifier, from, to)});
stats['fanData'].push({"device": device.name, "stats" : getSensorData("DEVICE_FAN_USAGE_SUMMARY", "status", user, device.deviceIdentifier, from, to)});
stats['bulbData'].push({"device": device.name, "stats" : getSensorData("DEVICE_BULB_USAGE_SUMMARY", "status", user, device.deviceIdentifier, from, to)});
stats['sonarData'].push({"device": device.name, "stats" : getSensorData("SONAR_SENSOR_SUMMARY", "sonar", user, device.deviceIdentifier, from, to)});
} }
function getSensebotData(user, deviceId, from, to) { function getSensebotData(user, device, from, to) {
result = new Object(); if (stats['sonarData'] == null){
result['sonarData'] = getSensorData("SONAR_SENSOR_SUMMARY", "sonar", user, deviceId, from, to); stats['sonarData'] = [];
result['motionData'] = getSensorData("PIR_MOTION_SENSOR_SUMMARY", "motion", user, deviceId, from, to); }
result['lightData'] = getSensorData("LDR_LIGHT_SENSOR_SUMMARY", "light", user, deviceId, from, to); if (stats['motionData'] == null){
result['temperatureData'] = getSensorData("DEVICE_TEMPERATURE_SUMMARY", "TEMPERATURE", user, deviceId, from, to); stats['motionData'] = [];
return result; }
if (stats['lightData'] == null){
stats['lightData'] = [];
}
if (stats['temperatureData'] == null){
stats['temperatureData'] = [];
}
stats['sonarData'].push({"device": device.name, "stats" : getSensorData("SONAR_SENSOR_SUMMARY", "sonar", user, device.deviceIdentifier, from, to)});
stats['motionData'].push({"device": device.name, "stats" : getSensorData("PIR_MOTION_SENSOR_SUMMARY", "motion", user, device.deviceIdentifier, from, to)});
stats['lightData'].push({"device": device.name, "stats" : getSensorData("LDR_LIGHT_SENSOR_SUMMARY", "light", user, device.deviceIdentifier, from, to)});
stats['temperatureData'].push({"device": device.name, "stats" : getSensorData("DEVICE_TEMPERATURE_SUMMARY", "TEMPERATURE", user, device.deviceIdentifier, from, to)});
} }
function getArduinoData(user, deviceId, from, to) { function getArduinoData(user, device, from, to) {
result = new Object(); if (stats['temperatureData'] == null){
result['temperatureData'] = getSensorData("DEVICE_TEMPERATURE_SUMMARY", "TEMPERATURE", user, deviceId, from, to); stats['temperatureData'] = [];
return result; }
stats['temperatureData'].push({"device": device.name, "stats" : getSensorData("DEVICE_TEMPERATURE_SUMMARY", "TEMPERATURE", user, device.deviceIdentifier, from, to)});
} }
function getAndroidSenseData(user, deviceId, from, to) { function getAndroidSenseData(user, device, from, to) {
result = new Object(); if (stats['ramData'] == null){
result['ramData'] = getSensorData("RAM_USAGE_SUMMARY", "motion", user, deviceId, from, to); stats['ramData'] = [];
result['cpuData'] = getSensorData("CPU_LOAD_SUMMARY", "light", user, deviceId, from, to); }
result['temperatureData'] = getSensorData("DEVICE_TEMPERATURE_SUMMARY", "TEMPERATURE", user, deviceId, from, to); if (stats['cpuData'] == null){
result['motionData'] = getSensorData("PIR_MOTION_SENSOR_SUMMARY", "motion", user, deviceId, from, to); stats['cpuData'] = [];
return result; }
if (stats['temperatureData'] == null){
stats['temperatureData'] = [];
}
if (stats['motionData'] == null){
stats['motionData'] = [];
}
stats['ramData'].push({"device": device.name, "stats" : getSensorData("RAM_USAGE_SUMMARY", "motion", user, device.deviceIdentifier, from, to)});
stats['cpuData'].push({"device": device.name, "stats" : getSensorData("CPU_LOAD_SUMMARY", "light", user, device.deviceIdentifier, from, to)});
stats['temperatureData'].push({"device": device.name, "stats" : getSensorData("DEVICE_TEMPERATURE_SUMMARY", "TEMPERATURE", user, device.deviceIdentifier, from, to)});
stats['motionData'].push({"device": device.name, "stats" : getSensorData("PIR_MOTION_SENSOR_SUMMARY", "motion", user, device.deviceIdentifier, from, to)});
} }
function getDigitalDisplayData(user, deviceId, from, to) { function getDigitalDisplayData(user, device, from, to) {
result = new Object(); if (stats['ramData'] == null){
result['ramData'] = getSensorData("RAM_USAGE_SUMMARY", "motion", user, deviceId, from, to); stats['ramData'] = [];
result['cpuData'] = getSensorData("CPU_LOAD_SUMMARY", "light", user, deviceId, from, to); }
result['cpuTemperatureData'] = getSensorData("DEVICE_CPU_TEMPERATURE_SUMMARY", "TEMPERATURE", user, deviceId, from, to); if (stats['cpuData'] == null){
return result; stats['cpuData'] = [];
}
if (stats['cpuTemperatureData'] == null){
stats['cpuTemperatureData'] = [];
}
stats['ramData'].push({"device": device.name, "stats" : getSensorData("RAM_USAGE_SUMMARY", "motion", user, device.deviceIdentifier, from, to)});
stats['cpuData'].push({"device": device.name, "stats" : getSensorData("CPU_LOAD_SUMMARY", "light", user, device.deviceIdentifier, from, to)});
stats['cpuTemperatureData'].push({"device": device.name, "stats" : getSensorData("DEVICE_CPU_TEMPERATURE_SUMMARY", "TEMPERATURE", user, device.deviceIdentifier, from, to)});
} }
function getSensorData(table, column, user, deviceId, from, to) { function getSensorData(table, column, user, deviceIdentifier, from, to) {
var fetchedData = null; var fetchedData = null;
try { try {
fetchedData = statsClient.getDeviceStats(table, column, user, deviceId, from, to); fetchedData = statsClient.getDeviceStats(table, column, user, deviceIdentifier, from, to);
} catch (error) { } catch (error) {
log.error(error); log.error(error);
} }

@ -232,7 +232,7 @@ deviceModule = function () {
deviceManagementService.addOperation(operationInstance, deviceList); deviceManagementService.addOperation(operationInstance, deviceList);
}; };
privateMethods.getDevice = function (type, deviceId) { publicMethods.getDevice = function (type, deviceId) {
var deviceIdentifier = new DeviceIdentifier(); var deviceIdentifier = new DeviceIdentifier();
deviceIdentifier.setType(type); deviceIdentifier.setType(type);
deviceIdentifier.setId(deviceId); deviceIdentifier.setId(deviceId);
@ -240,7 +240,7 @@ deviceModule = function () {
}; };
publicMethods.viewDevice = function (type, deviceId) { publicMethods.viewDevice = function (type, deviceId) {
var device = privateMethods.getDevice(type, deviceId); var device = publicMethods.getDevice(type, deviceId);
if (device) { if (device) {
var propertiesList = DeviceManagerUtil.convertDevicePropertiesToMap(device.getProperties()); var propertiesList = DeviceManagerUtil.convertDevicePropertiesToMap(device.getProperties());
var entries = propertiesList.entrySet(); var entries = propertiesList.entrySet();

@ -4,6 +4,6 @@
WSO2 DC | Analytics WSO2 DC | Analytics
{{/zone}} {{/zone}}
{{#zone "body"}} {{#zone "body"}}
{{unit "appbar" link="analytics" title="Group Analytics"}} {{unit "appbar" link="analytics" title="Analytics"}}
{{unit "analytics"}} {{unit "analytics"}}
{{/zone}} {{/zone}}

@ -1,9 +0,0 @@
{{authorized}}
{{layout "fluid"}}
{{#zone "title"}}
WSO2 DC | FireAlarm
{{/zone}}
{{#zone "body"}}
{{unit "appbar" link="analytics" title="Device Analytics"}}
{{unit "analytics"}}
{{/zone}}

@ -3,4 +3,6 @@
<link href="{{self.publicURL}}/css/daterangepicker.css" rel="stylesheet"/> <link href="{{self.publicURL}}/css/daterangepicker.css" rel="stylesheet"/>
<link href="{{self.publicURL}}/css/graph.css" rel="stylesheet"/> <link href="{{self.publicURL}}/css/graph.css" rel="stylesheet"/>
<link href="{{self.publicURL}}/css/lines.css" rel="stylesheet"/> <link href="{{self.publicURL}}/css/lines.css" rel="stylesheet"/>
<link href="{{self.publicURL}}/css/legend.css" rel="stylesheet"/>
<link href="{{self.publicURL}}/css/detail.css" rel="stylesheet"/>
{{/zone}} {{/zone}}

@ -1,3 +1,3 @@
{ {
"predicate": "urlMatch('/devices/analytics')" "predicate": "urlMatch('/analytics')"
} }

@ -0,0 +1,105 @@
.rickshaw_graph .detail {
pointer-events: none;
position: absolute;
top: 0;
z-index: 2;
background: rgba(0, 0, 0, 0.1);
bottom: 0;
width: 1px;
transition: opacity 0.25s linear;
-moz-transition: opacity 0.25s linear;
-o-transition: opacity 0.25s linear;
-webkit-transition: opacity 0.25s linear;
}
.rickshaw_graph .detail.inactive {
opacity: 0;
}
.rickshaw_graph .detail .item.active {
opacity: 1;
}
.rickshaw_graph .detail .x_label {
font-family: Arial, sans-serif;
border-radius: 3px;
padding: 6px;
opacity: 0.5;
border: 1px solid #e0e0e0;
font-size: 12px;
position: absolute;
background: white;
white-space: nowrap;
}
.rickshaw_graph .detail .x_label.left {
left: 0;
}
.rickshaw_graph .detail .x_label.right {
right: 0;
}
.rickshaw_graph .detail .item {
position: absolute;
z-index: 2;
border-radius: 3px;
padding: 0.25em;
font-size: 12px;
font-family: Arial, sans-serif;
opacity: 0;
background: rgba(0, 0, 0, 0.4);
color: white;
border: 1px solid rgba(0, 0, 0, 0.4);
margin-left: 1em;
margin-right: 1em;
margin-top: -1em;
white-space: nowrap;
}
.rickshaw_graph .detail .item.left {
left: 0;
}
.rickshaw_graph .detail .item.right {
right: 0;
}
.rickshaw_graph .detail .item.active {
opacity: 1;
background: rgba(0, 0, 0, 0.8);
}
.rickshaw_graph .detail .item:after {
position: absolute;
display: block;
width: 0;
height: 0;
content: "";
border: 5px solid transparent;
}
.rickshaw_graph .detail .item.left:after {
top: 1em;
left: -5px;
margin-top: -5px;
border-right-color: rgba(0, 0, 0, 0.8);
border-left-width: 0;
}
.rickshaw_graph .detail .item.right:after {
top: 1em;
right: -5px;
margin-top: -5px;
border-left-color: rgba(0, 0, 0, 0.8);
border-right-width: 0;
}
.rickshaw_graph .detail .dot {
width: 4px;
height: 4px;
margin-left: -3px;
margin-top: -3.5px;
border-radius: 5px;
position: absolute;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
box-sizing: content-box;
-moz-box-sizing: content-box;
background: white;
border-width: 2px;
border-style: solid;
display: none;
background-clip: padding-box;
}
.rickshaw_graph .detail .dot.active {
display: block;
}

@ -4,7 +4,7 @@
position: relative; position: relative;
} }
.rickshaw_graph svg { .rickshaw_graph svg {
display: block; display: block;
overflow: hidden; overflow: hidden;
} }
@ -151,7 +151,7 @@
.rickshaw_graph .y_ticks.glow text { .rickshaw_graph .y_ticks.glow text {
fill: black; fill: black;
color: black; color: black;
text-shadow: text-shadow:
-1px 1px 0 rgba(255, 255, 255, 0.1), -1px 1px 0 rgba(255, 255, 255, 0.1),
1px -1px 0 rgba(255, 255, 255, 0.1), 1px -1px 0 rgba(255, 255, 255, 0.1),
1px 1px 0 rgba(255, 255, 255, 0.1), 1px 1px 0 rgba(255, 255, 255, 0.1),
@ -165,7 +165,7 @@
.rickshaw_graph .y_ticks.inverse text { .rickshaw_graph .y_ticks.inverse text {
fill: white; fill: white;
color: white; color: white;
text-shadow: text-shadow:
-1px 1px 0 rgba(0, 0, 0, 0.8), -1px 1px 0 rgba(0, 0, 0, 0.8),
1px -1px 0 rgba(0, 0, 0, 0.8), 1px -1px 0 rgba(0, 0, 0, 0.8),
1px 1px 0 rgba(0, 0, 0, 0.8), 1px 1px 0 rgba(0, 0, 0, 0.8),

@ -0,0 +1,73 @@
.rickshaw_legend {
font-family: Arial;
font-size: 12px;
color: white;
background: #404040;
display: inline-block;
padding: 12px 5px;
border-radius: 2px;
position: relative;
}
.rickshaw_legend:hover {
z-index: 10;
}
.rickshaw_legend .swatch {
width: 10px;
height: 10px;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.rickshaw_legend .line {
clear: both;
line-height: 140%;
padding-right: 15px;
}
.rickshaw_legend .line .swatch {
display: inline-block;
margin-right: 3px;
border-radius: 2px;
}
.rickshaw_legend .label {
margin: 0;
white-space: nowrap;
display: inline;
font-size: inherit;
background-color: transparent;
color: inherit;
font-weight: normal;
line-height: normal;
padding: 0px;
text-shadow: none;
}
.rickshaw_legend .action:hover {
opacity: 0.6;
}
.rickshaw_legend .action {
margin-right: 0.2em;
font-size: 10px;
opacity: 0.2;
cursor: pointer;
font-size: 14px;
}
.rickshaw_legend .line.disabled {
opacity: 0.4;
}
.rickshaw_legend ul {
list-style-type: none;
margin: 0;
padding: 0;
margin: 2px;
cursor: pointer;
}
.rickshaw_legend li {
padding: 0 0 0 2px;
min-width: 80px;
white-space: nowrap;
}
.rickshaw_legend li:hover {
background: rgba(255, 255, 255, 0.08);
border-radius: 3px;
}
.rickshaw_legend li:active {
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
}

@ -1,3 +1,6 @@
div, span, p, td {
font-family: Arial, sans-serif;
}
#chart { #chart {
display: inline-block; display: inline-block;
} }
@ -15,4 +18,4 @@
#chart_container { #chart_container {
float: left; float: left;
position: relative; position: relative;
} }

@ -1,5 +1,5 @@
{{#zone "main"}} {{#zone "main"}}
<span id="request-group-id" data-groupId="{{groupId}}"></span> <span id="request-group-id" data-groupid="{{groupId}}"></span>
<div class="container container-bg white-bg"> <div class="container container-bg white-bg">
<div class=" margin-top-double"> <div class=" margin-top-double">
<div class="row row padding-top-double padding-bottom-double margin-bottom-double "> <div class="row row padding-top-double padding-bottom-double margin-bottom-double ">
@ -64,14 +64,4 @@
<script src="{{self.publicURL}}/js/moment.min.js"></script> <script src="{{self.publicURL}}/js/moment.min.js"></script>
<script src="{{self.publicURL}}/js/jquery.daterangepicker.js"></script> <script src="{{self.publicURL}}/js/jquery.daterangepicker.js"></script>
<script src="{{self.publicURL}}/js/graph_util.js"></script> <script src="{{self.publicURL}}/js/graph_util.js"></script>
<script src="{{self.publicURL}}/js/bulb.js"></script>
<script src="{{self.publicURL}}/js/graphs/fan_graph.js"></script>
<script src="{{self.publicURL}}/js/graphs/bulb_graph.js"></script>
<script src="{{self.publicURL}}/js/graphs/temperature_graph.js"></script>
<script src="{{self.publicURL}}/js/graphs/light_graph.js"></script>
<script src="{{self.publicURL}}/js/graphs/motion_graph.js"></script>
<script src="{{self.publicURL}}/js/graphs/sonar_graph.js"></script>
<script src="{{self.publicURL}}/js/graphs/cpu_graph.js"></script>
<script src="{{self.publicURL}}/js/graphs/ram_graph.js"></script>
<script src="{{self.publicURL}}/js/graphs/cpu_temperature_graph.js"></script>
{{/zone}} {{/zone}}

File diff suppressed because one or more lines are too long

@ -1,10 +0,0 @@
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulb-on")) {
image.src = "/iot/public/mydevice/images/bulb-off.png";
} else {
image.src = "/iot/public/mydevice/images/bulb-on.png";
}
}

@ -5,17 +5,60 @@ var currentDay = new Date();
var startDate = new Date(currentDay.getTime() - (60 * 60 * 24 * 100)); var startDate = new Date(currentDay.getTime() - (60 * 60 * 24 * 100));
var endDate = new Date(currentDay.getTime()); var endDate = new Date(currentDay.getTime());
// create a custom bar renderer that has no gaps var groupId;
Rickshaw.Graph.Renderer.BarNoGap = Rickshaw.Class.create(Rickshaw.Graph.Renderer.Bar, {
name: 'bar_no_gap', var color = ['#c05020','#30c020', '#6060c0', '#170B3B','#5E610B', '#2F0B3A', '#FF4000', '#2F0B3A', 'steelblue'];
barWidth: function (series) {
var frequentInterval = this._frequentInterval(series.stack); // create a custom bar renderer that shift bars
var barWidth = this.graph.x(series.stack[0].x + frequentInterval.magnitude * 1); Rickshaw.Graph.Renderer.BinaryBar = Rickshaw.Class.create(Rickshaw.Graph.Renderer.Bar, {
return barWidth; name: 'binary_bar',
render: function(args) {
args = args || {};
var graph = this.graph;
var series = args.series || graph.series;
var vis = args.vis || graph.vis;
vis.selectAll('*').remove();
var barWidth = this.barWidth(series.active()[0]);
var barXOffset = 0;
var activeSeriesCount = series.filter( function(s) { return !s.disabled; } ).length;
var seriesBarWidth = this.unstack ? barWidth / activeSeriesCount : barWidth;
var transform = function(d) {
// add a matrix transform for negative values
var matrix = [ 1, 0, 0, (d.y < 0 ? -1 : 1), 0, (d.y < 0 ? graph.y.magnitude(Math.abs(d.y)) * 2 : 0) ];
return "matrix(" + matrix.join(',') + ")";
};
var index = 0;
series.forEach( function(series) {
if (series.disabled) return;
var nodes = vis.selectAll("path")
.data(series.stack.filter( function(d) { return d.y !== null } ))
.enter().append("svg:rect")
.attr("x", function(d) { return graph.x(d.x) + barXOffset })
.attr("y", function(d) { return ((graph.y(index + Math.abs(d.y))) * (d.y < 0 ? -1 : 1 )) })
.attr("width", seriesBarWidth)
.attr("height", function(d) { return graph.y.magnitude(Math.abs(d.y)) })
.attr("transform", transform);
index++;
Array.prototype.forEach.call(nodes[0], function(n) {
n.setAttribute('fill', series.color);
} );
if (this.unstack) barXOffset += seriesBarWidth;
}, this );
} }
}); });
function initDate(){ function initDate() {
currentDay = new Date(); currentDay = new Date();
startDate = new Date(currentDay.getTime() - (60 * 60 * 24 * 100)); startDate = new Date(currentDay.getTime() - (60 * 60 * 24 * 100));
endDate = new Date(currentDay.getTime()); endDate = new Date(currentDay.getTime());
@ -44,6 +87,9 @@ var DateRange = convertDate(startDate) + " " + configObject.separator + " " + co
$(document).ready(function () { $(document).ready(function () {
initDate(); initDate();
groupId = $("#request-group-id").data("groupid");
$('#date-range').html(DateRange);
$('#date-range').dateRangePicker(configObject) $('#date-range').dateRangePicker(configObject)
.bind('datepicker-apply', function (event, dateRange) { .bind('datepicker-apply', function (event, dateRange) {
$(this).addClass('active'); $(this).addClass('active');
@ -53,16 +99,13 @@ $(document).ready(function () {
getStats(fromDate, toDate); getStats(fromDate, toDate);
} }
); );
getDateTime(startDate.getTime(), endDate.getTime());
}); });
$(document).ready(function () { //hour picker
$('#date-range').html(DateRange); $('#hour-btn').on('click', function () {
$('#date-range').trigger('datepicker-apply', initDate();
{ getDateTime(currentDay.getTime() - 3600000, currentDay.getTime());
'value': DateRange,
'date1': startDate,
'date2': endDate
});
}); });
//day picker //day picker
@ -71,12 +114,6 @@ $('#today-btn').on('click', function () {
getDateTime(currentDay.getTime() - 86400000, currentDay.getTime()); getDateTime(currentDay.getTime() - 86400000, currentDay.getTime());
}); });
//hour picker
$('#hour-btn').on('click', function () {
initDate();
getDateTime(currentDay.getTime() - 3600000, currentDay.getTime());
});
//week picker //week picker
$('#week-btn').on('click', function () { $('#week-btn').on('click', function () {
initDate(); initDate();
@ -100,39 +137,38 @@ function getDateTime(from, to) {
DateRange = convertDate(startDate) + " " + configObject.separator + " " + convertDate(endDate); DateRange = convertDate(startDate) + " " + configObject.separator + " " + convertDate(endDate);
console.log(DateRange); console.log(DateRange);
$('#date-range').html(DateRange); $('#date-range').html(DateRange);
$('#date-range').trigger('datepicker-apply',
{
'value': DateRange,
'date1': startDate,
'date2': endDate
}
);
getStats(from / 1000, to / 1000); getStats(from / 1000, to / 1000);
} }
function getStats(from, to) { function getStats(from, to) {
var deviceId = getUrlParameter('deviceId');
var deviceType = getUrlParameter('deviceType');
var requestData = new Object(); var requestData = new Object();
var getStatsRequest;
requestData['deviceId'] = deviceId;
requestData['deviceType'] = deviceType;
if (from) { if (from) {
requestData['from'] = from; requestData['from'] = from;
} }
if (to) { if (to) {
requestData['to'] = to; requestData['to'] = to;
} }
if (groupId && groupId != "0") {
requestData['groupId'] = groupId;
getStatsRequest = $.ajax({
url: "api/stats/group",
method: "GET",
data: requestData
});
} else {
var deviceId = getUrlParameter('deviceId');
var deviceType = getUrlParameter('deviceType');
var getStatsRequest = $.ajax({ requestData['deviceId'] = deviceId;
url: "../api/stats", requestData['deviceType'] = deviceType;
method: "GET",
data: requestData
});
getStatsRequest = $.ajax({
url: "api/stats",
method: "GET",
data: requestData
});
}
getStatsRequest.done(function (stats) { getStatsRequest.done(function (stats) {
updateGraphs(JSON.parse(stats)); updateGraphs(JSON.parse(stats));
}); });
@ -140,7 +176,6 @@ function getStats(from, to) {
getStatsRequest.fail(function (jqXHR, textStatus) { getStatsRequest.fail(function (jqXHR, textStatus) {
alert("Request failed: " + textStatus); alert("Request failed: " + textStatus);
}); });
} }
function getUrlParameter(paramName) { function getUrlParameter(paramName) {
@ -160,7 +195,7 @@ function updateGraphs(stats) {
var temperatureData = stats['temperatureData']; var temperatureData = stats['temperatureData'];
if (typeof temperatureData != 'undefined') { if (typeof temperatureData != 'undefined') {
$('#div-temperatureData').html("").html("<div class='row margin-double'><div><h2 class='grey'>Temperature</h2><hr><div id='canvas-wrapper1'></div></div><hr></div>"); $('#div-temperatureData').html("").html("<div class='row margin-double'><div><h2 class='grey'>Temperature</h2><hr><div id='canvas-wrapper1'></div></div><hr></div>");
updateTemperatureGraph(convertStatsToGraphData(temperatureData)); drawLineGraph(1, temperatureData);
} else { } else {
$('#div-temperatureData').html(""); $('#div-temperatureData').html("");
} }
@ -168,7 +203,7 @@ function updateGraphs(stats) {
var lightData = stats['lightData']; var lightData = stats['lightData'];
if (typeof lightData != 'undefined') { if (typeof lightData != 'undefined') {
$('#div-lightData').html("").html("<div class='row margin-double'><div><h2 class='grey'>Light</h2><hr><div id='canvas-wrapper2'></div></div><hr></div>"); $('#div-lightData').html("").html("<div class='row margin-double'><div><h2 class='grey'>Light</h2><hr><div id='canvas-wrapper2'></div></div><hr></div>");
updateLightGraph(convertStatsToGraphData(lightData)); drawBarGraph(2, lightData);
} else { } else {
$('#div-lightData').html(""); $('#div-lightData').html("");
} }
@ -176,7 +211,7 @@ function updateGraphs(stats) {
var motionData = stats['motionData']; var motionData = stats['motionData'];
if (typeof motionData != 'undefined') { if (typeof motionData != 'undefined') {
$('#div-motionData').html("").html("<div class='row margin-double'><div><h2 class='grey'>Motion</h2><hr><div id='canvas-wrapper3'></div></div><hr></div>"); $('#div-motionData').html("").html("<div class='row margin-double'><div><h2 class='grey'>Motion</h2><hr><div id='canvas-wrapper3'></div></div><hr></div>");
updateMotionGraph(convertStatsToGraphData(motionData)); drawBarGraph(3, motionData);
} else { } else {
$('#div-motionData').html(""); $('#div-motionData').html("");
} }
@ -184,7 +219,7 @@ function updateGraphs(stats) {
var sonarData = stats['sonarData']; var sonarData = stats['sonarData'];
if (typeof sonarData != 'undefined') { if (typeof sonarData != 'undefined') {
$('#div-sonarData').html("").html("<div class='row margin-double'><div><h2 class='grey'>Sonar</h2><hr><div id='canvas-wrapper4'></div></div><hr></div>"); $('#div-sonarData').html("").html("<div class='row margin-double'><div><h2 class='grey'>Sonar</h2><hr><div id='canvas-wrapper4'></div></div><hr></div>");
updateSonarGraph(convertStatsToGraphData(sonarData)); drawLineGraph(4, sonarData);
} else { } else {
$('#div-sonarData').html(""); $('#div-sonarData').html("");
} }
@ -192,7 +227,7 @@ function updateGraphs(stats) {
var fanData = stats['fanData']; var fanData = stats['fanData'];
if (typeof fanData != 'undefined') { if (typeof fanData != 'undefined') {
$('#div-fanData').html("").html("<div class='row margin-double'><div><h2 class='grey'>Fan Status</h2><hr><div id='canvas-wrapper5'></div></div><hr></div>"); $('#div-fanData').html("").html("<div class='row margin-double'><div><h2 class='grey'>Fan Status</h2><hr><div id='canvas-wrapper5'></div></div><hr></div>");
updateFanGraph(convertStateStatsToGraphData(fanData)); drawBarGraph(5, fanData);
} else { } else {
$('#div-fanData').html(""); $('#div-fanData').html("");
} }
@ -200,7 +235,7 @@ function updateGraphs(stats) {
var bulbData = stats['bulbData']; var bulbData = stats['bulbData'];
if (typeof bulbData != 'undefined') { if (typeof bulbData != 'undefined') {
$('#div-bulbData').html("").html("<div class='row margin-double'><div><h2 class='grey'>Bulb Status</h2><hr><div id='canvas-wrapper6'></div></div><hr></div>"); $('#div-bulbData').html("").html("<div class='row margin-double'><div><h2 class='grey'>Bulb Status</h2><hr><div id='canvas-wrapper6'></div></div><hr></div>");
updateBulbGraph(convertStateStatsToGraphData(bulbData)); drawBarGraph(6, bulbData);
} else { } else {
$('#div-bulbData').html(""); $('#div-bulbData').html("");
} }
@ -208,7 +243,7 @@ function updateGraphs(stats) {
var cpuData = stats['cpuData']; var cpuData = stats['cpuData'];
if (typeof cpuData != 'undefined') { if (typeof cpuData != 'undefined') {
$('#div-CPUData').html("").html("<div class='row margin-double'><div><h2 class='grey'>CPU Load</h2><hr><div id='canvas-wrapper7'></div></div><hr></div>"); $('#div-CPUData').html("").html("<div class='row margin-double'><div><h2 class='grey'>CPU Load</h2><hr><div id='canvas-wrapper7'></div></div><hr></div>");
updateCPUGraph(convertStateStatsToGraphData(cpuData)); drawLineGraph(7, cpuData);
} else { } else {
$('#div-CPUData').html(""); $('#div-CPUData').html("");
} }
@ -216,7 +251,7 @@ function updateGraphs(stats) {
var ramData = stats['ramData']; var ramData = stats['ramData'];
if (typeof ramData != 'undefined') { if (typeof ramData != 'undefined') {
$('#div-RAMData').html("").html("<div class='row margin-double'><div><h2 class='grey'>RAM Usage</h2><hr><div id='canvas-wrapper8'></div></div><hr></div>"); $('#div-RAMData').html("").html("<div class='row margin-double'><div><h2 class='grey'>RAM Usage</h2><hr><div id='canvas-wrapper8'></div></div><hr></div>");
updateRAMGraph(convertStateStatsToGraphData(ramData)); drawLineGraph(8, ramData);
} else { } else {
$('#div-RAMData').html(""); $('#div-RAMData').html("");
} }
@ -224,7 +259,7 @@ function updateGraphs(stats) {
var cpuTemperatureData = stats['cpuTemperatureData']; var cpuTemperatureData = stats['cpuTemperatureData'];
if (typeof cpuTemperatureData != 'undefined') { if (typeof cpuTemperatureData != 'undefined') {
$('#div-cpuTemperatureData').html("").html("<div class='row margin-double'><div><h2 class='grey'>CPU Temperature</h2><hr><div id='canvas-wrapper9'></div></div><hr></div>"); $('#div-cpuTemperatureData').html("").html("<div class='row margin-double'><div><h2 class='grey'>CPU Temperature</h2><hr><div id='canvas-wrapper9'></div></div><hr></div>");
updateCPUTemperatureGraph(convertStatsToGraphData(cpuTemperatureData)); drawLineGraph(9, cpuTemperatureData);
} else { } else {
$('#div-cpuTemperatureData').html(""); $('#div-cpuTemperatureData').html("");
} }
@ -232,20 +267,187 @@ function updateGraphs(stats) {
scaleGraphs(); scaleGraphs();
} }
function drawLineGraph(graphId, chartDataRaw){
var chartWrapperElmId = "#canvas-wrapper" + graphId;
var graphWidth = $(chartWrapperElmId).width() - 50;
if (chartDataRaw.length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
}
var chartDiv = "chart" + graphId;
var sliderDiv = "slider" + graphId;
var x_axis = "x_axis" + graphId;
var y_axis = "y_axis" + graphId;
$(chartWrapperElmId).html("").html('<div id="' + y_axis
+ '" class="custom_y_axis"></div><div id="' + chartDiv
+ '" class="custom_rickshaw_graph"></div><div id="' + x_axis
+ '" class="custom_x_axis"></div><div id="' + sliderDiv
+ '" class="custom_slider"></div>');
var graphConfig = {
element: document.getElementById(chartDiv),
width: graphWidth,
height: 400,
strokeWidth: 1,
renderer: 'line',
unstack: true,
stack: false,
xScale: d3.time.scale(),
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0},
series:[]
};
var k = 0;
for (var i = 0; i < chartDataRaw.length; i++){
var chartData = [];
if (chartDataRaw[i].stats.length > 0){
for (var j = 0; j < chartDataRaw[i].stats.length; j++){
chartData.push({x:parseInt(chartDataRaw[i].stats[j].x), y:parseInt(chartDataRaw[i].stats[j].y)});
}
graphConfig['series'].push({ 'color': color[k], 'data': chartData, 'name': chartDataRaw[i].device });
}
if (++k == color.length){
k = 0;
}
}
if (graphConfig['series'].length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
}
var graph = new Rickshaw.Graph(graphConfig);
graph.render();
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
graph: graph
} );
var xAxis = new Rickshaw.Graph.Axis.X({
graph: graph,
orientation: 'bottom',
element: document.getElementById(x_axis),
tickFormat: graph.x.tickFormat()
});
xAxis.render();
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
orientation: 'left',
element: document.getElementById(y_axis),
width: 40,
height: 410
});
yAxis.render();
var slider = new Rickshaw.Graph.RangeSlider.Preview({
graph: graph,
element: document.getElementById(sliderDiv)
});
}
function drawBarGraph(graphId, chartDataRaw){
var chartWrapperElmId = "#canvas-wrapper" + graphId;
var graphWidth = $(chartWrapperElmId).width() - 50;
if (chartDataRaw.length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
}
var chartDiv = "chart" + graphId;
var sliderDiv = "slider" + graphId;
var x_axis = "x_axis" + graphId;
var y_axis = "y_axis" + graphId;
$(chartWrapperElmId).html("").html('<div id="' + y_axis
+ '" class="custom_y_axis"></div><div id="' + chartDiv
+ '" class="custom_rickshaw_graph"></div><div id="' + x_axis
+ '" class="custom_x_axis"></div><div id="' + sliderDiv
+ '" class="custom_slider"></div>');
var graphConfig = {
element: document.getElementById(chartDiv),
width: graphWidth,
height: 150,
strokeWidth: 0.5,
renderer: 'binary_bar',
offset: 'zero',
xScale: d3.time.scale(),
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0},
series:[]
};
var k = 0;
for (var i = 0; i < chartDataRaw.length; i++){
var chartData = [];
if (chartDataRaw[i].stats.length > 0){
for (var j = 0; j < chartDataRaw[i].stats.length; j++){
chartData.push({x:parseInt(chartDataRaw[i].stats[j].x), y:parseInt(chartDataRaw[i].stats[j].y)});
}
graphConfig['series'].push({ 'color': color[k], 'data': chartData, 'name': chartDataRaw[i].device });
}
if (++k == color.length){
k = 0;
}
}
if (graphConfig['series'].length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
}
var graph = new Rickshaw.Graph(graphConfig);
graph.registerRenderer(new Rickshaw.Graph.Renderer.BinaryBar({graph: graph}));
graph.render();
var xAxis = new Rickshaw.Graph.Axis.X({
graph: graph,
orientation: 'bottom',
element: document.getElementById(x_axis),
tickFormat: graph.x.tickFormat()
});
xAxis.render();
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
orientation: 'left',
element: document.getElementById(y_axis),
width: 40,
height: 160,
tickFormat: function (y) {
return '';
}
});
yAxis.render();
var slider = new Rickshaw.Graph.RangeSlider.Preview({
graph: graph,
element: document.getElementById(sliderDiv)
});
}
function scaleGraphs() { function scaleGraphs() {
var sliders = $('.right_handle'); var sliders = $('.right_handle');
if (sliders.length == 0) { if (sliders.length == 0) {
return; return;
} }
var graphWidth = 0; var graphWidth = 0;
for (var i = 1; i < 10; i++){ for (var i = 1; i < 10; i++) {
if ($('#canvas-wrapper' + i).length){ if ($('#canvas-wrapper' + i).length) {
graphWidth = $('#canvas-wrapper' + i).width() - 50; graphWidth = $('#canvas-wrapper' + i).width() - 50;
break; break;
} }
} }
if (graphWidth <= 0){ if (graphWidth <= 0) {
return; return;
} }
@ -272,42 +474,6 @@ function scaleGraphs() {
} }
} }
function convertStatsToGraphData(stats) {
var graphData = new Array();
if (!stats) {
return graphData;
}
for (var i = 0; i < stats.length; i++) {
graphData.push({x: parseInt(stats[i]['time']) * 1000, y: stats[i]['value']})
}
return graphData;
}
function convertStateStatsToGraphData(stats) {
var graphData = new Array();
if (!stats) {
return graphData;
}
var yValue;
for (var i = 0; i < stats.length; i++) {
yValue = -1;
if (stats[i]['value'].toUpperCase() == 'ON') {
yValue = 1;
} else if (stats[i]['value'].toUpperCase() == 'OFF') {
yValue = 0;
}
graphData.push({x: parseInt(stats[i]['time']) * 1000, y: yValue})
}
return graphData;
}
function convertDate(date) { function convertDate(date) {
var month = date.getMonth() + 1; var month = date.getMonth() + 1;
var day = date.getDate(); var day = date.getDate();

@ -1,85 +0,0 @@
function updateBulbGraph(bulbData) {
renderBulbChart(bulbData);
}
function renderBulbChart(chartDataRaw){
var chartWrapperElmId = "#canvas-wrapper6";
var graphWidth = $(chartWrapperElmId).width() - 50;
if (chartDataRaw.length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
}
var chartData = [[], []];
for (var i = 0; i < chartDataRaw.length; i++){
chartData[0].push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
chartData[1].push({x:parseInt(chartDataRaw[i].x), y:Math.abs(parseInt(chartDataRaw[i].y) - 1)});
}
//var i = parseInt(fromDate);
//while (i < parseInt(toDate)) {
// var rnd = Math.round(Math.random());
// chartData[0].push({x: i * 1000, y: rnd});
// chartData[1].push({x: i * 1000, y: Math.abs(rnd - 1)});
// i += 60 * 5;
//}
var chartDiv = "chart6";
var sliderDiv = "slider6";
var x_axis = "x_axis6";
var y_axis = "y_axis6";
$(chartWrapperElmId).html("").html('<div id="' + y_axis + '" class="custom_y_axis"></div><div id="' + chartDiv + '" class="custom_rickshaw_graph"></div><div id="' + x_axis + '" class="custom_x_axis"></div><div id="' + sliderDiv + '" class="custom_slider"></div>');
var graph = new Rickshaw.Graph({
element: document.getElementById(chartDiv),
width: graphWidth,
height: 150,
strokeWidth: 0.5,
renderer: 'bar_no_gap',
xScale: d3.time.scale(),
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0},
series: [
{color: '#5E610B', data: chartData[0]},
{color: 'white', data: chartData[1]}
]
});
graph.registerRenderer(new Rickshaw.Graph.Renderer.BarNoGap({graph: graph}));
graph.render();
var xAxis = new Rickshaw.Graph.Axis.X({
graph: graph,
orientation: 'bottom',
element: document.getElementById(x_axis),
tickFormat: graph.x.tickFormat()
});
xAxis.render();
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
orientation: 'left',
element: document.getElementById(y_axis),
width: 40,
height: 160,
tickFormat: function (y) {
switch (y) {
case 1:
return 'ON';
case 0:
return 'OFF';
default :
return '';
}
}
});
yAxis.render();
var slider = new Rickshaw.Graph.RangeSlider.Preview({
graph: graph,
element: document.getElementById(sliderDiv)
});
}

@ -1,69 +0,0 @@
function updateCPUGraph(CPUData) {
renderCPUChart(CPUData);
}
function renderCPUChart(chartDataRaw){
var chartWrapperElmId = "#canvas-wrapper7";
var graphWidth = $(chartWrapperElmId).width() - 50;
if (chartDataRaw.length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
}
var chartData = [];
for (var i = 0; i < chartDataRaw.length; i++){
chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
}
//var i = parseInt(fromDate);
//while (i < parseInt(toDate)){
// var rnd = Math.random() * (30 - 20) + 20;
// chartData.push({x:i * 1000, y:rnd});
// i += 60 * 5;
//}
var chartDiv = "chart7";
var sliderDiv = "slider7";
var x_axis = "x_axis7";
var y_axis = "y_axis7";
$(chartWrapperElmId).html("").html('<div id="' + y_axis + '" class="custom_y_axis"></div><div id="' + chartDiv + '" class="custom_rickshaw_graph"></div><div id="' + x_axis + '" class="custom_x_axis"></div><div id="' + sliderDiv + '" class="custom_slider"></div>');
var graph = new Rickshaw.Graph({
element: document.getElementById(chartDiv),
width: graphWidth,
height: 400,
strokeWidth: 1,
renderer: 'line',
xScale: d3.time.scale(),
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0},
series:[
{ color: '#2F0B3A', data: chartData }
]
});
graph.render();
var xAxis = new Rickshaw.Graph.Axis.X({
graph: graph,
orientation: 'bottom',
element: document.getElementById(x_axis),
tickFormat: graph.x.tickFormat()
});
xAxis.render();
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
orientation: 'left',
element: document.getElementById(y_axis),
width: 40,
height: 410
});
yAxis.render();
var slider = new Rickshaw.Graph.RangeSlider.Preview({
graph: graph,
element: document.getElementById(sliderDiv)
});
}

@ -1,70 +0,0 @@
function updateCPUTemperatureGraph(temperatureData) {
console.log("cpuTemperatureData");
renderCPUTemperatureChart(temperatureData);
}
function renderCPUTemperatureChart(chartDataRaw) {
var chartWrapperElmId = "#canvas-wrapper9";
var graphWidth = $(chartWrapperElmId).width() - 50;
if (chartDataRaw.length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
}
var chartData = [];
for (var i = 0; i < chartDataRaw.length; i++) {
chartData.push({x: parseInt(chartDataRaw[i].x), y: parseInt(chartDataRaw[i].y)});
}
//var i = parseInt(fromDate);
//while (i < parseInt(toDate)){
// var rnd = Math.random() * (30 - 20) + 20;
// chartData.push({x:i * 1000, y:rnd});
// i += 60 * 5;
//}
var chartDiv = "chart9";
var sliderDiv = "slider9";
var x_axis = "x_axis9";
var y_axis = "y_axis9";
$(chartWrapperElmId).html("").html('<div id="' + y_axis + '" class="custom_y_axis"></div><div id="' + chartDiv + '" class="custom_rickshaw_graph"></div><div id="' + x_axis + '" class="custom_x_axis"></div><div id="' + sliderDiv + '" class="custom_slider"></div>');
var graph = new Rickshaw.Graph({
element: document.getElementById(chartDiv),
width: graphWidth,
height: 400,
strokeWidth: 1,
renderer: 'line',
xScale: d3.time.scale(),
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0},
series: [
{color: '#FF4000', data: chartData}
]
});
graph.render();
var xAxis = new Rickshaw.Graph.Axis.X({
graph: graph,
orientation: 'bottom',
element: document.getElementById(x_axis),
tickFormat: graph.x.tickFormat()
});
xAxis.render();
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
orientation: 'left',
element: document.getElementById(y_axis),
width: 40,
height: 410
});
yAxis.render();
var slider = new Rickshaw.Graph.RangeSlider.Preview({
graph: graph,
element: document.getElementById(sliderDiv)
});
}

@ -1,84 +0,0 @@
function updateFanGraph(fanData) {
renderFanChart(fanData);
}
function renderFanChart(chartDataRaw) {
var chartWrapperElmId = "#canvas-wrapper5";
var graphWidth = $(chartWrapperElmId).width() - 50;
if (chartDataRaw.length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
}
var chartData = [[], []];
for (var i = 0; i < chartDataRaw.length; i++){
chartData[0].push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
chartData[1].push({x:parseInt(chartDataRaw[i].x), y:Math.abs(parseInt(chartDataRaw[i].y) - 1)});
}
//var i = parseInt(fromDate);
//while (i < parseInt(toDate)) {
// var rnd = Math.round(Math.random());
// chartData[0].push({x: i * 1000, y: rnd});
// chartData[1].push({x: i * 1000, y: Math.abs(rnd - 1)});
// i += 60 * 5;
//}
var chartDiv = "chart5";
var sliderDiv = "slider5";
var x_axis = "x_axis5";
var y_axis = "y_axis5";
$(chartWrapperElmId).html("").html('<div id="' + y_axis + '" class="custom_y_axis"></div><div id="' + chartDiv + '" class="custom_rickshaw_graph"></div><div id="' + x_axis + '" class="custom_x_axis"></div><div id="' + sliderDiv + '" class="custom_slider"></div>');
var graph = new Rickshaw.Graph({
element: document.getElementById(chartDiv),
width: graphWidth,
height: 150,
strokeWidth: 0.5,
renderer: 'bar_no_gap',
xScale: d3.time.scale(),
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0},
series: [
{color: '#2F0B3A', data: chartData[0]},
{color: 'white', data: chartData[1]}
]
});
graph.registerRenderer(new Rickshaw.Graph.Renderer.BarNoGap({graph: graph}));
graph.render();
var xAxis = new Rickshaw.Graph.Axis.X({
graph: graph,
orientation: 'bottom',
element: document.getElementById(x_axis),
tickFormat: graph.x.tickFormat()
});
xAxis.render();
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
orientation: 'left',
element: document.getElementById(y_axis),
width: 40,
height: 160,
tickFormat: function (y) {
switch (y) {
case 1:
return 'ON';
case 0:
return 'OFF';
default :
return '';
}
}
});
yAxis.render();
var slider = new Rickshaw.Graph.RangeSlider.Preview({
graph: graph,
element: document.getElementById(sliderDiv)
});
}

@ -1,85 +0,0 @@
function updateLightGraph(lightData) {
renderLightChart(lightData);
}
function renderLightChart(chartDataRaw){
var chartWrapperElmId = "#canvas-wrapper2";
var graphWidth = $(chartWrapperElmId).width() - 50;
if (chartDataRaw.length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
}
var chartData = [[], []];
for (var i = 0; i < chartDataRaw.length; i++){
chartData[0].push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
chartData[1].push({x:parseInt(chartDataRaw[i].x), y:Math.abs(parseInt(chartDataRaw[i].y) - 1)});
}
//var i = parseInt(fromDate);
//while (i < parseInt(toDate)) {
// var rnd = Math.round(Math.random());
// chartData[0].push({x: i * 1000, y: rnd});
// chartData[1].push({x: i * 1000, y: Math.abs(rnd - 1)});
// i += 60 * 5;
//}
var chartDiv = "chart2";
var sliderDiv = "slider2";
var x_axis = "x_axis2";
var y_axis = "y_axis2";
$(chartWrapperElmId).html("").html('<div id="' + y_axis + '" class="custom_y_axis"></div><div id="' + chartDiv + '" class="custom_rickshaw_graph"></div><div id="' + x_axis + '" class="custom_x_axis"></div><div id="' + sliderDiv + '" class="custom_slider"></div>');
var graph = new Rickshaw.Graph({
element: document.getElementById(chartDiv),
width: graphWidth,
height: 150,
strokeWidth: 0.5,
renderer: 'bar_no_gap',
xScale: d3.time.scale(),
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0},
series: [
{color: 'steelblue', data: chartData[0]},
{color: 'white', data: chartData[1]}
]
});
graph.registerRenderer(new Rickshaw.Graph.Renderer.BarNoGap({graph: graph}));
graph.render();
var xAxis = new Rickshaw.Graph.Axis.X({
graph: graph,
orientation: 'bottom',
element: document.getElementById(x_axis),
tickFormat: graph.x.tickFormat()
});
xAxis.render();
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
orientation: 'left',
element: document.getElementById(y_axis),
width: 40,
height: 160,
tickFormat: function (y) {
switch (y) {
case 1:
return 'ON';
case 0:
return 'OFF';
default :
return '';
}
}
});
yAxis.render();
var slider = new Rickshaw.Graph.RangeSlider.Preview({
graph: graph,
element: document.getElementById(sliderDiv)
});
}

@ -1,70 +0,0 @@
function updateMotionGraph(motionData) {
renderMotionChart(motionData);
}
function renderMotionChart(chartDataRaw){
var chartWrapperElmId = "#canvas-wrapper3";
var graphWidth = $(chartWrapperElmId).width() - 50;
if (chartDataRaw.length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
}
var chartData = [];
for (var i = 0; i < chartDataRaw.length; i++){
chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
}
//var i = parseInt(fromDate);
//while (i < parseInt(toDate)){
// var rnd = Math.random() * (30 - 20) + 20;
// chartData.push({x:i * 1000, y:rnd});
// i += 60 * 5;
//}
var chartDiv = "chart3";
var sliderDiv = "slider3";
var x_axis = "x_axis3";
var y_axis = "y_axis3";
$(chartWrapperElmId).html("").html('<div id="' + y_axis + '" class="custom_y_axis"></div><div id="' + chartDiv + '" class="custom_rickshaw_graph"></div><div id="' + x_axis + '" class="custom_x_axis"></div><div id="' + sliderDiv + '" class="custom_slider"></div>');
var graph = new Rickshaw.Graph({
element: document.getElementById(chartDiv),
width: graphWidth,
height: 400,
strokeWidth: 0.5,
renderer: 'line',
xScale: d3.time.scale(),
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0},
series:[
{ color: '#2F0B3A', data: chartData }
]
});
graph.render();
var xAxis = new Rickshaw.Graph.Axis.X({
graph: graph,
orientation: 'bottom',
element: document.getElementById(x_axis),
tickFormat: graph.x.tickFormat()
});
xAxis.render();
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
orientation: 'left',
element: document.getElementById(y_axis),
width: 40,
height: 410
});
yAxis.render();
var slider = new Rickshaw.Graph.RangeSlider.Preview({
graph: graph,
element: document.getElementById(sliderDiv)
});
}

@ -1,69 +0,0 @@
function updateRAMGraph(RAMData) {
renderRAMChart(RAMData);
}
function renderRAMChart(chartDataRaw){
var chartWrapperElmId = "#canvas-wrapper8";
var graphWidth = $(chartWrapperElmId).width() - 50;
if (chartDataRaw.length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
}
var chartData = [];
for (var i = 0; i < chartDataRaw.length; i++){
chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
}
//var i = parseInt(fromDate);
//while (i < parseInt(toDate)){
// var rnd = Math.random() * (30 - 20) + 20;
// chartData.push({x:i * 1000, y:rnd});
// i += 60 * 5;
//}
var chartDiv = "chart8";
var sliderDiv = "slider8";
var x_axis = "x_axis8";
var y_axis = "y_axis8";
$(chartWrapperElmId).html("").html('<div id="' + y_axis + '" class="custom_y_axis"></div><div id="' + chartDiv + '" class="custom_rickshaw_graph"></div><div id="' + x_axis + '" class="custom_x_axis"></div><div id="' + sliderDiv + '" class="custom_slider"></div>');
var graph = new Rickshaw.Graph({
element: document.getElementById(chartDiv),
width: graphWidth,
height: 400,
strokeWidth: 1,
renderer: 'line',
xScale: d3.time.scale(),
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0},
series:[
{ color: '#170B3B', data: chartData }
]
});
graph.render();
var xAxis = new Rickshaw.Graph.Axis.X({
graph: graph,
orientation: 'bottom',
element: document.getElementById(x_axis),
tickFormat: graph.x.tickFormat()
});
xAxis.render();
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
orientation: 'left',
element: document.getElementById(y_axis),
width: 40,
height: 410
});
yAxis.render();
var slider = new Rickshaw.Graph.RangeSlider.Preview({
graph: graph,
element: document.getElementById(sliderDiv)
});
}

@ -1,69 +0,0 @@
function updateSonarGraph(sonarData) {
renderSonarChart(sonarData);
}
function renderSonarChart(chartDataRaw){
var chartWrapperElmId = "#canvas-wrapper4";
var graphWidth = $(chartWrapperElmId).width() - 50;
if (chartDataRaw.length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
}
var chartData = [];
for (var i = 0; i < chartDataRaw.length; i++){
chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
}
//var i = parseInt(fromDate);
//while (i < parseInt(toDate)){
// var rnd = Math.random() * (30 - 20) + 20;
// chartData.push({x:i * 1000, y:rnd});
// i += 60 * 5;
//}
var chartDiv = "chart4";
var sliderDiv = "slider4";
var x_axis = "x_axis4";
var y_axis = "y_axis4";
$(chartWrapperElmId).html("").html('<div id="' + y_axis + '" class="custom_y_axis"></div><div id="' + chartDiv + '" class="custom_rickshaw_graph"></div><div id="' + x_axis + '" class="custom_x_axis"></div><div id="' + sliderDiv + '" class="custom_slider"></div>');
var graph = new Rickshaw.Graph({
element: document.getElementById(chartDiv),
width: graphWidth,
height: 400,
strokeWidth: 1,
renderer: 'line',
xScale: d3.time.scale(),
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0},
series:[
{ color: '#170B3B', data: chartData }
]
});
graph.render();
var xAxis = new Rickshaw.Graph.Axis.X({
graph: graph,
orientation: 'bottom',
element: document.getElementById(x_axis),
tickFormat: graph.x.tickFormat()
});
xAxis.render();
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
orientation: 'left',
element: document.getElementById(y_axis),
width: 40,
height: 410
});
yAxis.render();
var slider = new Rickshaw.Graph.RangeSlider.Preview({
graph: graph,
element: document.getElementById(sliderDiv)
});
}

@ -1,70 +0,0 @@
function updateTemperatureGraph(temperatureData) {
console.log("temperatureData");
renderTemperatureChart(temperatureData);
}
function renderTemperatureChart(chartDataRaw){
var chartWrapperElmId = "#canvas-wrapper1";
var graphWidth = $(chartWrapperElmId).width() - 50;
if (chartDataRaw.length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
}
var chartData = [];
for (var i = 0; i < chartDataRaw.length; i++){
chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
}
//var i = parseInt(fromDate);
//while (i < parseInt(toDate)){
// var rnd = Math.random() * (30 - 20) + 20;
// chartData.push({x:i * 1000, y:rnd});
// i += 60 * 5;
//}
var chartDiv = "chart1";
var sliderDiv = "slider1";
var x_axis = "x_axis1";
var y_axis = "y_axis1";
$(chartWrapperElmId).html("").html('<div id="' + y_axis + '" class="custom_y_axis"></div><div id="' + chartDiv + '" class="custom_rickshaw_graph"></div><div id="' + x_axis + '" class="custom_x_axis"></div><div id="' + sliderDiv + '" class="custom_slider"></div>');
var graph = new Rickshaw.Graph({
element: document.getElementById(chartDiv),
width: graphWidth,
height: 400,
strokeWidth: 1,
renderer: 'line',
xScale: d3.time.scale(),
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0},
series:[
{ color: '#FF4000', data: chartData }
]
});
graph.render();
var xAxis = new Rickshaw.Graph.Axis.X({
graph: graph,
orientation: 'bottom',
element: document.getElementById(x_axis),
tickFormat: graph.x.tickFormat()
});
xAxis.render();
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
orientation: 'left',
element: document.getElementById(y_axis),
width: 40,
height: 410
});
yAxis.render();
var slider = new Rickshaw.Graph.RangeSlider.Preview({
graph: graph,
element: document.getElementById(sliderDiv)
});
}

@ -1,35 +0,0 @@
/* Inspired by Lee Byron's test data generator. */
function stream_layers(n, m, o) {
if (arguments.length < 3) o = 0;
function bump(a) {
var x = 1 / (.1 + Math.random()),
y = 2 * Math.random() - .5,
z = 10 / (.1 + Math.random());
for (var i = 0; i < m; i++) {
var w = (i / m - y) * z;
a[i] += x * Math.exp(-w * w);
}
}
return d3.range(n).map(function() {
var a = [], i;
for (i = 0; i < m; i++) a[i] = o + o * Math.random();
for (i = 0; i < 5; i++) bump(a);
return a.map(stream_index);
});
}
/* Another layer generator using gamma distributions. */
function stream_waves(n, m) {
return d3.range(n).map(function(i) {
return d3.range(m).map(function(j) {
var x = 20 * j / m - i / 3;
return 2 * x * Math.exp(-.5 * x);
}).map(stream_index);
});
}
function stream_index(d, i) {
return {x: i, y: Math.max(0, d)};
}

@ -121,7 +121,7 @@
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" <div id="collapseFour" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="headingFour"> aria-labelledby="headingFour">
<div class="panel-body"> <div class="panel-body">
<a href="../../devices/analytics?deviceId={{deviceId}}&deviceType={{deviceType}}"><i <a href="../../analytics?deviceId={{deviceId}}&deviceType={{deviceType}}"><i
class="fw fw-charts"></i> Show Statistics</a> class="fw fw-charts"></i> Show Statistics</a>
</div> </div>
</div> </div>

@ -1,6 +1,6 @@
{{#zone "main"}} {{#zone "main"}}
<span id="permission" data-permission="{{permissions}}"></span> <span id="permission" data-permission="{{permissions}}"></span>
<span id="request-group-id" data-groupId="{{groupId}}"></span> <span id="request-group-id" data-groupid="{{groupId}}"></span>
<!-- form content placeholder --> <!-- form content placeholder -->
<div id="ast-container" class="ast-container list-view"> <div id="ast-container" class="ast-container list-view">
<!-- no devices found --> <!-- no devices found -->

@ -69,7 +69,7 @@
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" <div id="collapseFour" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="headingFour"> aria-labelledby="headingFour">
<div class="panel-body"> <div class="panel-body">
<a href="/iotserver/groups/analytics?groupId={{group.id}}"><i class="fw fw-charts"></i> <a href="/iotserver/analytics?groupId={{group.id}}"><i class="fw fw-charts"></i>
Show Statistics</a> Show Statistics</a>
</div> </div>
</div> </div>

Loading…
Cancel
Save