mirror of
https://repository.entgra.net/community/product-iots.git
synced 2025-09-16 23:32:19 +00:00
adding organized units
This commit is contained in:
Rasika
parent
3ceed63107
commit
9cd77d88a0
@ -25,15 +25,18 @@ var log = new Log("api/device-api.jag");
|
||||
var constants = require("/modules/constants.js");
|
||||
var dcProps = require('/config/dc-props.js').config();
|
||||
|
||||
var deviceModule = require("/modules/user.js").deviceModule;
|
||||
|
||||
var carbon = require('carbon');
|
||||
var carbonHttpServletTransport = carbon.server.address('http');
|
||||
var carbonHttpsServletTransport = carbon.server.address('https');
|
||||
|
||||
var result;
|
||||
|
||||
if (uriMatcher.match("/{context}/api/device/sketch/")) {
|
||||
if (uriMatcher.match("/{context}/api/device/sketch/download")) {
|
||||
sketchType = request.getParameter("sketchType");
|
||||
deviceType = request.getParameter("deviceType");
|
||||
|
||||
if (!sketchType) {
|
||||
log.error("Sketch Type is empty");
|
||||
}
|
||||
@ -44,33 +47,35 @@ if (uriMatcher.match("/{context}/api/device/sketch/")) {
|
||||
exit();
|
||||
}
|
||||
|
||||
//URL: /iotdevices/FireAlarmManager/device/firealarm/download
|
||||
fireAlarmManagerService = carbonHttpsServletTransport + "/" + deviceType + "/manager";
|
||||
sketchDownloadEndPoint = fireAlarmManagerService + "/device/" + sketchType + "/download";
|
||||
//URL: https://localhost:9443/{deviceType}/download?owner={username}
|
||||
deviceManagerService = carbonHttpsServletTransport + "/" + deviceType + "/manager";
|
||||
sketchDownloadEndPoint = deviceManagerService + "/device/" + sketchType + "/download";
|
||||
response.sendRedirect(sketchDownloadEndPoint + "?owner=" + user.username);
|
||||
exit();
|
||||
}
|
||||
|
||||
if (uriMatcher.match("/{context}/api/devices/")) {
|
||||
|
||||
var constants = require("/modules/constants.js");
|
||||
exit();//stop execution
|
||||
|
||||
} else if (uriMatcher.match("/{context}/api/devices/all")) {
|
||||
var user = session.get(constants.USER_SESSION_KEY);
|
||||
if (!user) {
|
||||
response.sendRedirect(dcProps.appContext + "login?#login-required");
|
||||
exit();
|
||||
exit();//stop execution
|
||||
}
|
||||
|
||||
//URL: /iotdevices/DevicesManager/devices/username
|
||||
devicesManagerService = carbonHttpsServletTransport + "/devicecloud/manager";
|
||||
listAllDevicesEndPoint = devicesManagerService + "/devices/username/" + user.username;
|
||||
//URL: https://localhost:9443/devicecloud/manager/devices/username/{username}
|
||||
deviceCloudService = carbonHttpsServletTransport + "/devicecloud/manager";
|
||||
listAllDevicesEndPoint = deviceCloudService + "/devices/username/" + user.username;
|
||||
|
||||
var data = {};
|
||||
//XMLHTTPRequest's GET
|
||||
result = get(listAllDevicesEndPoint, data, "json");
|
||||
|
||||
//response.sendRedirect(listAllDevicesEndPoint + "?username="+user.username);
|
||||
//exit();
|
||||
} else if (uriMatcher.match("/{context}/api/devices/types")) {
|
||||
var user = session.get(constants.USER_SESSION_KEY);
|
||||
if (!user) {
|
||||
response.sendRedirect(dcProps.appContext + "login?#login-required");
|
||||
exit();//stop execution
|
||||
}
|
||||
|
||||
result = deviceModule.getAllDevicesTypes();
|
||||
}
|
||||
|
||||
// returning the result.
|
||||
|
||||
@ -31,14 +31,23 @@ var statsClient = new Packages.org.wso2.carbon.device.mgt.iot.common.devicecloud
|
||||
|
||||
if (uriMatcher.match("/{context}/api/stats")) {
|
||||
|
||||
var deviceId = request.getParameter("deviceId");
|
||||
var from = request.getParameter("from");
|
||||
var to = request.getParameter("to");
|
||||
deviceId = request.getParameter("deviceId");
|
||||
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);
|
||||
|
||||
result = getData(getUsername(), deviceId, from, to);
|
||||
|
||||
if(deviceType=="firealarm"){
|
||||
result = getFireAlarmData(user.username, deviceId, from, to);
|
||||
}else if(deviceType=="sensebot"){
|
||||
result = getSensebotData(user.username, deviceId, from, to);
|
||||
}
|
||||
}
|
||||
|
||||
// returning the result.
|
||||
@ -46,29 +55,23 @@ if (result) {
|
||||
print(result);
|
||||
}
|
||||
|
||||
function getUsername() {
|
||||
|
||||
var user = session.get(constants.USER_SESSION_KEY);
|
||||
|
||||
if (user) {
|
||||
log.info("username: "+ user.username);
|
||||
return user.username;
|
||||
} else {
|
||||
log.info("username is null");
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
function getData(user, deviceId, from, to) {
|
||||
|
||||
function getSensebotData(user, deviceId, from, to){
|
||||
result = new Object();
|
||||
|
||||
result['sonarData'] = getSensorData("SONAR_SENSOR_SUMMARY","sonar",user, deviceId, from, to);
|
||||
result['motionData'] = getSensorData("PIR_MOTION_SENSOR_SUMMARY","motion",user, deviceId, from, to);
|
||||
result['lightData'] = getSensorData("LDR_LIGHT_SENSOR_SUMMARY","light",user, deviceId, from, to);
|
||||
result['temperatureData'] = getSensorData("DEVICE_TEMPERATURE_SUMMARY","TEMPERATURE",user, deviceId, from, to);
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
function getFireAlarmData(user, deviceId, from, to){
|
||||
result = new Object();
|
||||
|
||||
//result['sonarData'] = getSensorData("SONAR_SENSOR_SUMMARY","sonar",user, deviceId, from, to);
|
||||
//result['motionData'] = getSensorData("PIR_MOTION_SENSOR_SUMMARY","motion",user, deviceId, from, to);
|
||||
//result['lightData'] = getSensorData("LDR_LIGHT_SENSOR_SUMMARY","light",user, deviceId, from, to);
|
||||
|
||||
result['temperatureData'] = getSensorData("DEVICE_TEMPERATURE_SUMMARY","TEMPERATURE",user, deviceId, from, to);
|
||||
result['fanData'] = getSensorData("DEVICE_FAN_USAGE_SUMMARY","status",user, deviceId, from, to);
|
||||
result['bulbData'] = getSensorData("DEVICE_BULB_USAGE_SUMMARY","status",user, deviceId, from, to);
|
||||
@ -77,7 +80,13 @@ function getData(user, deviceId, from, to) {
|
||||
|
||||
function getSensorData(table, column, user, deviceId, from, to) {
|
||||
|
||||
var fetchedData = statsClient.getDeviceStats(table, column, user, deviceId, from, to);
|
||||
var fetchedData = null;
|
||||
|
||||
try {
|
||||
fetchedData = statsClient.getDeviceStats(table, column, user, deviceId, from, to);
|
||||
}catch(error){
|
||||
log.info(error);
|
||||
}
|
||||
|
||||
var temperatureData = [];
|
||||
|
||||
@ -93,54 +102,4 @@ function getSensorData(table, column, user, deviceId, from, to) {
|
||||
return temperatureData;
|
||||
}
|
||||
|
||||
// ------------- Sample data generation -----------------
|
||||
|
||||
function getSampleData() {
|
||||
|
||||
result = new Object();
|
||||
|
||||
result['bulbStatusData'] = getBulbStatusSampleData();
|
||||
result['fanStatusData'] = getFanStatusSampleData();
|
||||
result['temperatureData'] = getTemperatureSampleData();
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
function getBulbStatusSampleData(from, to) {
|
||||
|
||||
var bulbStatusData = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
bulbStatusData.push({
|
||||
time: Date.now() + (i * 1000),
|
||||
value: Math.floor((Math.random() * 100) + 1) % 2 == 0 ? 'ON' : 'OFF'});
|
||||
}
|
||||
|
||||
return bulbStatusData;
|
||||
};
|
||||
|
||||
|
||||
function getFanStatusSampleData(from, to) {
|
||||
|
||||
var fanStatusData = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
fanStatusData.push({time: Date.now() + (i * 1000), value: Math.floor((Math.random() * 100) + 1) % 2 == 0 ? 'ON' : 'OFF'});
|
||||
}
|
||||
|
||||
return fanStatusData;
|
||||
}
|
||||
|
||||
function getTemperatureSampleData(from, to) {
|
||||
|
||||
var temperatureData = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
temperatureData.push({time: Date.now() + (i * 1000), value: Math.random() * 100});
|
||||
}
|
||||
|
||||
return temperatureData;
|
||||
}
|
||||
|
||||
|
||||
%>
|
||||
@ -30,14 +30,16 @@ var utility = require("/modules/utility.js").utility;
|
||||
var result;
|
||||
|
||||
if (uriMatcher.match("/{context}/api/user/login/")) {
|
||||
username = request.getParameter("username");
|
||||
password = request.getParameter("password");
|
||||
|
||||
var username = request.getParameter("username");
|
||||
var password = request.getParameter("password");
|
||||
|
||||
try {
|
||||
userModule.login(username, password, function (user) {
|
||||
utility.insertAppPermissions(userModule, "login");
|
||||
if (log.isDebugEnabled()) {
|
||||
log.debug("User Logged In : " + user);
|
||||
}
|
||||
utility.insertAppPermissions(userModule, "login");
|
||||
response.sendRedirect(constants.WEB_APP_CONTEXT);
|
||||
}, function () {
|
||||
response.sendRedirect(dcProps.appContext + "login?#auth-failed");
|
||||
@ -46,22 +48,27 @@ if (uriMatcher.match("/{context}/api/user/login/")) {
|
||||
log.error("Exception occurred while a user tried to login to DC", e);
|
||||
response.sendRedirect(dcProps.appContext + "login?#error");
|
||||
}
|
||||
|
||||
} else if (uriMatcher.match("/{context}/api/user/logout/")) {
|
||||
|
||||
userModule.logout(function () {
|
||||
response.sendRedirect(dcProps.appContext + "login");
|
||||
});
|
||||
} else if (uriMatcher.match("/{context}/api/users/register")) {
|
||||
addUserFormData = request.getContent();
|
||||
|
||||
} else if (uriMatcher.match("/{context}/api/users/register")) {
|
||||
|
||||
addUserFormData = request.getContent();
|
||||
username = addUserFormData.username;
|
||||
firstname = addUserFormData.firstname;
|
||||
lastname = addUserFormData.lastname;
|
||||
emailAddress = addUserFormData.emailAddress;
|
||||
password = addUserFormData.password;
|
||||
|
||||
//enable internal subscriptions for APIM
|
||||
userRoleStr = "Internal/subscriber,Internal/everyone" ;
|
||||
userRoles = String(userRoleStr).split(",");
|
||||
if (!addUserFormData.userRoles) {
|
||||
userRoles = null;
|
||||
} else {
|
||||
userRoles = String(addUserFormData.userRoles).split(",");
|
||||
}
|
||||
|
||||
try {
|
||||
result = userModule.registerUser(username, firstname, lastname, emailAddress, password,
|
||||
@ -71,10 +78,12 @@ if (uriMatcher.match("/{context}/api/user/login/")) {
|
||||
// http status code 400 refers to - Bad request.
|
||||
result = 400;
|
||||
}
|
||||
} else if (uriMatcher.match("/{context}/api/users/add")) {
|
||||
if (userModule.isAuthorized("/permission/device-mgt/admin/users/add")) {
|
||||
addUserFormData = request.getContent();
|
||||
|
||||
} else if (uriMatcher.match("/{context}/api/users/add")) {
|
||||
|
||||
if (userModule.isAuthorized("/permission/device-mgt/admin/users/add")) {
|
||||
|
||||
addUserFormData = request.getContent();
|
||||
username = addUserFormData.username;
|
||||
firstname = addUserFormData.firstname;
|
||||
lastname = addUserFormData.lastname;
|
||||
@ -97,10 +106,14 @@ if (uriMatcher.match("/{context}/api/user/login/")) {
|
||||
// http status code 403 refers to - forbidden.
|
||||
result = 403;
|
||||
}
|
||||
|
||||
} else if (uriMatcher.match("/{context}/api/users/{username}/remove")) {
|
||||
|
||||
if (userModule.isAuthorized("/permission/device-mgt/admin/users/remove")) {
|
||||
|
||||
elements = uriMatcher.elements();
|
||||
username = elements.username;
|
||||
|
||||
try {
|
||||
result = userModule.removeUser(username);
|
||||
} catch (e) {
|
||||
@ -108,10 +121,12 @@ if (uriMatcher.match("/{context}/api/user/login/")) {
|
||||
// http status code 400 refers to - Bad request.
|
||||
result = 400;
|
||||
}
|
||||
|
||||
} else {
|
||||
// http status code 403 refers to - forbidden.
|
||||
result = 403;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// returning the result.
|
||||
|
||||
@ -82,8 +82,40 @@ var route;
|
||||
};
|
||||
|
||||
var renderStatic = function (unit, path) {
|
||||
log.debug('[' + requestId + '] for unit "' + unit + '" a request received for a static file "' + path + '"');
|
||||
var staticFile = fuse.getFile(unit, 'public' + path);
|
||||
var unitModel = null;
|
||||
var unitName = "";
|
||||
var parts = (unit + path).split("/");
|
||||
|
||||
//'unitName' name can be "unitA" or "categoryA/unitA" or "categoryA/categoryAb/unitB"...etc
|
||||
//incrementally trying to resolve a unit using url path parts.
|
||||
for (var i = 0; i < parts.length; i++) {
|
||||
|
||||
if (unitName == "") {
|
||||
unitName = parts[i];
|
||||
} else {
|
||||
unitName += "/" + parts[i];
|
||||
}
|
||||
|
||||
try {
|
||||
var model = fuse.getUnitDefinition(unitName);
|
||||
if (model) {
|
||||
unitModel = {
|
||||
name: model.name,
|
||||
path: parts.splice(i + 1).join("/")
|
||||
};
|
||||
break;
|
||||
}
|
||||
} catch (err) {
|
||||
//unit not found, ignore error
|
||||
}
|
||||
}
|
||||
|
||||
if (unitModel == null) {
|
||||
throw '[' + requestId + '] unit "' + unit + path + '" does not exits';
|
||||
}
|
||||
|
||||
var staticFile = fuse.getFile(unitModel.name, 'public' + "/" + unitModel.path);
|
||||
|
||||
if (staticFile.isExists() && !staticFile.isDirectory()) {
|
||||
response.addHeader('Content-type', getMime(path));
|
||||
response.addHeader('Cache-Control', 'public,max-age=12960000');
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
//public function declarations
|
||||
var getHbsFile, getFile, toRelativePath, cleanupAncestors,
|
||||
getUnitPath, getMatchedUnitDefinitions, getZoneDefinition, getUnitDefinition,
|
||||
getUnitDefinitions, getLayoutPath;
|
||||
getUnitDefinitions, getLayoutPath, readUnitDefinitions;
|
||||
|
||||
(function () {
|
||||
//private
|
||||
@ -15,6 +15,7 @@ var getHbsFile, getFile, toRelativePath, cleanupAncestors,
|
||||
for (var i = 0; i < definitions.length; i++) {
|
||||
var definition = definitions[i];
|
||||
lookUpTable[definition.name] = i;
|
||||
//log.info("initLookUp()"+definition.name+"<-"+i);
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -45,6 +46,7 @@ var getHbsFile, getFile, toRelativePath, cleanupAncestors,
|
||||
};
|
||||
|
||||
var getAncestorModels = function (unit) {
|
||||
//log.info('[' + requestId + '] getAncestorModels()'+unit);
|
||||
var unitModel = getUnitDefinition(unit);
|
||||
var ancestors = [unitModel];
|
||||
var parentName;
|
||||
@ -148,8 +150,10 @@ var getHbsFile, getFile, toRelativePath, cleanupAncestors,
|
||||
};
|
||||
|
||||
getUnitDefinition = function (unit) {
|
||||
//log.info('[' + requestId + '] getUnitDefinition()'+unit);
|
||||
var definitions = getUnitDefinitions();
|
||||
initLookUp(definitions);
|
||||
//log.info('[' + requestId + '] lookUpTable[unit]:'+unit);
|
||||
var model = definitions[lookUpTable[unit]];
|
||||
if (!model) {
|
||||
log.warn('[' + requestId + '] unit "' + unit + '" does not exits');
|
||||
@ -187,27 +191,39 @@ var getHbsFile, getFile, toRelativePath, cleanupAncestors,
|
||||
}
|
||||
|
||||
var unitDirs = new File('/units').listFiles();
|
||||
|
||||
definitions = readUnitDefinitions("",unitDirs,definitions);
|
||||
//log.info(definitions);
|
||||
|
||||
addPageUnitDefinitions(definitions);
|
||||
|
||||
initLookUp(definitions);
|
||||
flattenAllInheritance(definitions);
|
||||
|
||||
return definitions;
|
||||
};
|
||||
|
||||
readUnitDefinitions = function(basePath, unitDirs, definitions){
|
||||
for (var i = 0; i < unitDirs.length; i++) {
|
||||
|
||||
var unitDir = unitDirs[i];
|
||||
if (unitDir.isDirectory()) {
|
||||
|
||||
var unitName = unitDir.getName();
|
||||
//log.info("reading: "+unitName + " basePath:'" + basePath + "'");
|
||||
var definitionFile = new File(fuse.getUnitPath(basePath+unitName) + '/' + unitName + '.json');
|
||||
|
||||
if(definitionFile.isExists()) {
|
||||
var unitModel = {
|
||||
name: unitName,
|
||||
path: unitDir.getPath()
|
||||
};
|
||||
if(basePath!=""){
|
||||
unitModel.name = basePath + unitName;
|
||||
}
|
||||
|
||||
// unit definition is read form is the <unit name>.json file.
|
||||
// if doesn't exits it will be an empty json.
|
||||
var definitionFile = new File(fuse.getUnitPath(unitName) + '/' + unitName + '.json');
|
||||
if (definitionFile.isExists() && !definitionFile.isDirectory()) {
|
||||
var path = definitionFile.getPath();
|
||||
log.debug('[' + requestId + '] reading file "' + path + '"');
|
||||
unitModel.definition = require(path);
|
||||
} else {
|
||||
log.warn('[' + requestId + '] for unit "' + unitName + '", unable to find a definition file');
|
||||
unitModel.definition = {};
|
||||
}
|
||||
|
||||
// add the information derived by parsing hbs file to the same model
|
||||
var hbsMetadata = getHbsMetadata(unitModel);
|
||||
@ -217,14 +233,13 @@ var getHbsFile, getFile, toRelativePath, cleanupAncestors,
|
||||
}
|
||||
|
||||
definitions.push(unitModel);
|
||||
|
||||
}else{
|
||||
var unitSubDirs = new File(fuse.getUnitPath(basePath+"/"+unitName)).listFiles();
|
||||
readUnitDefinitions(basePath+unitName+"/",unitSubDirs,definitions);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
addPageUnitDefinitions(definitions);
|
||||
|
||||
initLookUp(definitions);
|
||||
flattenAllInheritance(definitions);
|
||||
|
||||
return definitions;
|
||||
};
|
||||
|
||||
@ -288,15 +303,21 @@ var getHbsFile, getFile, toRelativePath, cleanupAncestors,
|
||||
// TODO: improve getFile to do include this logic
|
||||
if (unit.path.indexOf('.hbs', unit.path.length - 4) !== -1) {
|
||||
return new File(unit.path);
|
||||
} else {
|
||||
if(unit.name.indexOf('/') !== -1){//a subcategory unit
|
||||
var rawParts = unit.name.split("/");
|
||||
return new File(unit.path + '/' + rawParts[rawParts.length-1] + '.hbs');
|
||||
}else {
|
||||
return new File(unit.path + '/' + unit.name + '.hbs');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var getHbsMetadata = function (unit) {
|
||||
var zoneDef = {'zones': []};
|
||||
var hbsFile = getHbsFile(unit);
|
||||
if (!hbsFile.isExists()) {
|
||||
log.error("Couldn't find .hbs file at: `" + unit.path + "`");
|
||||
return zoneDef;
|
||||
}
|
||||
var output = handlebars.Handlebars.compileFile(hbsFile)({});
|
||||
@ -364,11 +385,18 @@ var getHbsFile, getFile, toRelativePath, cleanupAncestors,
|
||||
* @returns {File}
|
||||
*/
|
||||
getFile = function (unitName, path, opt_suffix) {
|
||||
//log.info("getFile() unitName:"+unitName+", path:"+path+", opt_suffix:"+opt_suffix);
|
||||
var slashPath = ((path[0] === '/') ? '' : '/') + path;
|
||||
var selfFileName = '';
|
||||
var fileName = '';
|
||||
if (opt_suffix) {
|
||||
selfFileName = unitName + opt_suffix;
|
||||
if(unitName.indexOf('/') !== -1) {//a subcategory unit
|
||||
var rawParts = unitName.split("/");
|
||||
selfFileName = rawParts[rawParts.length - 1];
|
||||
}else {
|
||||
selfFileName = unitName;
|
||||
}
|
||||
selfFileName = selfFileName + opt_suffix;
|
||||
slashPath = slashPath + ((slashPath[slashPath.length - 1] === '/') ? '' : '/');
|
||||
}
|
||||
|
||||
@ -376,8 +404,10 @@ var getHbsFile, getFile, toRelativePath, cleanupAncestors,
|
||||
var unitDef = getUnitDefinition(unitName);
|
||||
if (unitDef.path.indexOf('.hbs', unitDef.path.length - 4) !== -1) {
|
||||
if (opt_suffix.indexOf('.hbs', opt_suffix.length - 4) !== -1) {
|
||||
//log.info("1:"+unitDef.path);
|
||||
return new File(unitDef.path);
|
||||
} else {
|
||||
//log.info("2:"+unitDef.path.replace(/.hbs$/, opt_suffix));
|
||||
return new File(unitDef.path.replace(/.hbs$/, opt_suffix));
|
||||
}
|
||||
}
|
||||
@ -388,13 +418,17 @@ var getHbsFile, getFile, toRelativePath, cleanupAncestors,
|
||||
'[' + requestId + '] for unit "' + unitName + '" file resolved : "'
|
||||
+ slashPath + selfFileName + '" -> "' + selfFile.getPath() + '"'
|
||||
);
|
||||
|
||||
//log.info("3:"+getUnitPath(unitName) + slashPath + selfFileName);
|
||||
return selfFile;
|
||||
}
|
||||
|
||||
var ancestors = getAncestorModels(unitName);
|
||||
for (var i = 1; i < ancestors.length; i++) {
|
||||
var ancestorName = ancestors[i].name;
|
||||
if(ancestorName.indexOf('/') !== -1) {//a subcategory unit
|
||||
var rawParts = ancestorName.split("/");
|
||||
ancestorName = rawParts[rawParts.length - 1];
|
||||
}
|
||||
if (opt_suffix) {
|
||||
fileName = ancestorName + opt_suffix;
|
||||
}
|
||||
@ -404,6 +438,7 @@ var getHbsFile, getFile, toRelativePath, cleanupAncestors,
|
||||
'[' + requestId + '] for unit "' + unitName + '" file resolved : "'
|
||||
+ slashPath + selfFileName + '" -> "' + file.getPath() + '"'
|
||||
);
|
||||
//log.info("4:"+getUnitPath(ancestorName) + slashPath + fileName);
|
||||
return file;
|
||||
}
|
||||
}
|
||||
@ -411,6 +446,7 @@ var getHbsFile, getFile, toRelativePath, cleanupAncestors,
|
||||
'[' + requestId + '] for unit "' + unitName + '" (non-excising) file resolved : "'
|
||||
+ slashPath + selfFileName + '" -> "' + selfFile.getPath() + '"'
|
||||
);
|
||||
//log.info("5:"+getUnitPath(unitName) + slashPath + selfFileName);
|
||||
return selfFile;
|
||||
};
|
||||
|
||||
|
||||
@ -0,0 +1,43 @@
|
||||
/*
|
||||
* Copyright (c) 2015, 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.
|
||||
*/
|
||||
|
||||
var deviceModule;
|
||||
var carbon = require('carbon');
|
||||
var carbonHttpServletTransport = carbon.server.address('http');
|
||||
var carbonHttpsServletTransport = carbon.server.address('https');
|
||||
|
||||
deviceModule = function () {
|
||||
var log = new Log("modules/device.js");
|
||||
|
||||
var constants = require("/modules/constants.js");
|
||||
var utility = require("/modules/utility.js").utility;
|
||||
|
||||
var publicMethods = {};
|
||||
var privateMethods = {};
|
||||
|
||||
publicMethods.getAllDevicesTypes = function(){
|
||||
//URL: https://localhost:9443/devicecloud/manager/devices/username/{username}
|
||||
deviceCloudService = carbonHttpsServletTransport + "/devicecloud/manager";
|
||||
listAllDeviceTypesEndPoint = deviceCloudService + "/devices/types";
|
||||
|
||||
var data = {};
|
||||
//XMLHTTPRequest's GET
|
||||
return get(listAllDeviceTypesEndPoint, data, "json");
|
||||
};
|
||||
|
||||
}();
|
||||
@ -4,5 +4,5 @@
|
||||
{{/zone}}
|
||||
{{#zone "body"}}
|
||||
{{unit "appbar"}}
|
||||
{{unit "arduino"}}
|
||||
{{unit "devices/arduino"}}
|
||||
{{/zone}}
|
||||
@ -4,5 +4,5 @@
|
||||
{{/zone}}
|
||||
{{#zone "body"}}
|
||||
{{unit "appbar"}}
|
||||
{{unit "digitaldisplay"}}
|
||||
{{unit "devices/digitaldisplay"}}
|
||||
{{/zone}}
|
||||
@ -4,5 +4,5 @@
|
||||
{{/zone}}
|
||||
{{#zone "body"}}
|
||||
{{unit "appbar"}}
|
||||
{{unit "firealarm"}}
|
||||
{{unit "devices/firealarm"}}
|
||||
{{/zone}}
|
||||
@ -4,5 +4,5 @@
|
||||
{{/zone}}
|
||||
{{#zone "body"}}
|
||||
{{unit "appbar"}}
|
||||
{{unit "sensebot"}}
|
||||
{{unit "devices/sensebot"}}
|
||||
{{/zone}}
|
||||
@ -16,6 +16,7 @@
|
||||
<tr class="grey-bg">
|
||||
<th class="uppercase">Device ID</th>
|
||||
<th class="uppercase">Name</th>
|
||||
<th class="uppercase">Type</th>
|
||||
<th class="uppercase center">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -23,7 +24,7 @@
|
||||
{{! All devices will be listed here @see: alldevices_util.js}}
|
||||
<tr class="border-top">
|
||||
<th scope="row"></th>
|
||||
<td colspan="2">
|
||||
<td colspan="3">
|
||||
No Devices available.
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -2,23 +2,3 @@ function onRequest(context) {
|
||||
context.myDevicePath = "/iot/mydevice";
|
||||
return context;
|
||||
}
|
||||
|
||||
//{
|
||||
// "device": [
|
||||
// {
|
||||
// "dateOfEnrolment": 1432978481443,
|
||||
// "dateOfLastUpdate": 1432978481443,
|
||||
// "deviceIdentifier": "qhnva32dy2ck",
|
||||
// "deviceTypeId": 1,
|
||||
// "id": 1,
|
||||
// "name": "rasikas_firealarm_qhn",
|
||||
// "owner": "rasika",
|
||||
// "properties": {
|
||||
// "name": "DEVICE_NAME",
|
||||
// "value": "rasikas_firealarm_qhn"
|
||||
// },
|
||||
// "status": "ACTIVE",
|
||||
// "type": "firealarm"
|
||||
// }
|
||||
//]
|
||||
//}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
function getAllDevices() {
|
||||
var getDevicesRequest = $.ajax({
|
||||
url: "api/devices",
|
||||
url: "api/devices/all/",
|
||||
method: "GET",
|
||||
contentType: "application/json"
|
||||
});
|
||||
@ -17,15 +17,18 @@ function getAllDevices(){
|
||||
|
||||
function updateDevicesTable(data) {
|
||||
devices = data.data.device;
|
||||
if (devices) {
|
||||
$('#devicesTable tbody > tr').remove();
|
||||
if (devices.length > 0) {
|
||||
clearTable('devicesTable');
|
||||
for (var i = 0; i < devices.length; i++) {
|
||||
var deviceIdentifier = devices[i].deviceIdentifier;
|
||||
var deviceName = devices[i].name;
|
||||
var deviceType = devices[i].type;
|
||||
$('#devicesTable tbody').append(
|
||||
"<tr class='border-top'><th scope='row'>" + deviceIdentifier + "</th>" +
|
||||
"<td>" + deviceName + "</td>" +
|
||||
"<td>" + deviceType + "</td>" +
|
||||
"<td class='float-right border-top '>" +
|
||||
"<input type='hidden' name='deviceType' value='" + deviceType + "' >" +
|
||||
"<button class='btn-black-action' name='deviceId' value='" + deviceIdentifier + "'>" +
|
||||
"<i class='fw fw-view padding-right'></i>View</button>" +
|
||||
"<button class='btn-black-action' name='deviceId' value='" + deviceIdentifier + "'>" +
|
||||
@ -42,6 +45,5 @@ function clearTable(tableId){
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
console.log("getAllDevices()");
|
||||
getAllDevices();
|
||||
});
|
||||
@ -11,7 +11,7 @@
|
||||
</div>
|
||||
<div class="row margin-bottom-double">
|
||||
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top">
|
||||
<img src="{{self.publicURL}}/images/Arduino_Uno_-_R3.png" class="img-responsive">
|
||||
<img src="{{self.publicURL}}/images/arduino.png" class="img-responsive">
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 padding-top">
|
||||
<h2 class="uppercase">Ingredients</h2>
|
||||
@ -0,0 +1,4 @@
|
||||
function onRequest(context){
|
||||
context.sketchPath = "api/device/sketch/download";
|
||||
return context;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 9.6 KiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
@ -11,7 +11,7 @@
|
||||
</div>
|
||||
<div class="row margin-bottom-double">
|
||||
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 padding-top">
|
||||
<img src="{{self.publicURL}}/images/digital_display.png" class="img-responsive">
|
||||
<img src="{{self.publicURL}}/images/digitaldisplay.png" class="img-responsive">
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 padding-top">
|
||||
<h2 class="uppercase">Ingredients</h2>
|
||||
@ -0,0 +1,4 @@
|
||||
function onRequest(context){
|
||||
context.sketchPath = "api/device/sketch/download";
|
||||
return context;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 8.0 KiB After Width: | Height: | Size: 8.0 KiB |
|
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 119 KiB |
@ -0,0 +1,4 @@
|
||||
function onRequest(context){
|
||||
context.sketchPath = "api/device/sketch/download";
|
||||
return context;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 139 KiB After Width: | Height: | Size: 139 KiB |
|
Before Width: | Height: | Size: 478 KiB After Width: | Height: | Size: 478 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 90 KiB |
@ -0,0 +1,4 @@
|
||||
function onRequest(context){
|
||||
context.sketchPath = "api/device/sketch/download";
|
||||
return context;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 516 B After Width: | Height: | Size: 516 B |
|
Before Width: | Height: | Size: 451 B After Width: | Height: | Size: 451 B |
|
Before Width: | Height: | Size: 650 B After Width: | Height: | Size: 650 B |
|
Before Width: | Height: | Size: 373 B After Width: | Height: | Size: 373 B |
@ -8,7 +8,7 @@
|
||||
(function (factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['jquery', 'moment'], factory);
|
||||
define(['jquery.daterangepicker.js', 'moment.min'], factory);
|
||||
} else if (typeof exports === 'object' && typeof module !== 'undefined') {
|
||||
// CommonJS. Register as a module
|
||||
module.exports = factory(require('jquery'), require('moment'));
|
||||
@ -1,4 +0,0 @@
|
||||
function onRequest(context){
|
||||
context.sketchPath = "api/device/sketch";
|
||||
return context;
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
function onRequest(context){
|
||||
context.sketchPath = "api/device/sketch";
|
||||
return context;
|
||||
}
|
||||
@ -1,11 +1,12 @@
|
||||
{{#zone "topCss"}}
|
||||
<link href="{{self.publicURL}}/css/nv.d3.css" rel="stylesheet"/>
|
||||
<!--<link href="{{self.publicURL}}/css/nv.d3.css" rel="stylesheet"/>-->
|
||||
<link href="{{self.publicURL}}/css/daterangepicker.css" rel="stylesheet"/>
|
||||
{{/zone}}
|
||||
{{#zone "topJs"}}
|
||||
<!-- -->
|
||||
<script src="{{self.publicURL}}/js/d3.min.js"></script>
|
||||
<script src="{{self.publicURL}}/js/nv.d3.js"></script>
|
||||
<!--<script src="{{self.publicURL}}/js/d3.min.js"></script>-->
|
||||
<!--<script src="{{self.publicURL}}/js/nv.d3.js"></script>-->
|
||||
<script src="{{self.publicURL}}/js/Chart.min.js"></script>
|
||||
<script src="{{self.publicURL}}/js/stream_layers.js"></script>
|
||||
<script src="{{self.publicURL}}/js/moment.min.js"></script>
|
||||
<script src="{{self.publicURL}}/js/jquery.daterangepicker.js"></script>
|
||||
@ -30,53 +31,51 @@
|
||||
</div>
|
||||
|
||||
<div class="clear"></div>
|
||||
|
||||
<div class="row margin-double">
|
||||
<div class="chart1">
|
||||
<div>
|
||||
<h2 class="grey ">Temperature</h2>
|
||||
<hr>
|
||||
<svg></svg>
|
||||
<div id="canvas-wrapper1">No data available...</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="row margin-double padding-double "></div>
|
||||
<div class="row margin-double">
|
||||
<div class="chart2">
|
||||
<div>
|
||||
<h2 class="grey ">Light</h2>
|
||||
<hr>
|
||||
<svg></svg>
|
||||
<div id="canvas-wrapper2">No data available...</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="row margin-double">
|
||||
<div class="chart3">
|
||||
<div>
|
||||
<h2 class="grey ">Motion</h2>
|
||||
<hr>
|
||||
<svg></svg>
|
||||
<div id="canvas-wrapper3">No data available...</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="row margin-double">
|
||||
<div class="chart4">
|
||||
<div>
|
||||
<h2 class="grey ">Sonar</h2>
|
||||
<hr>
|
||||
<svg></svg>
|
||||
<div id="canvas-wrapper4">No data available...</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="row margin-double">
|
||||
<div class="chart5">
|
||||
<h2 class="grey ">Fan</h2>
|
||||
<div>
|
||||
<h2 class="grey ">Fan Status</h2>
|
||||
<hr>
|
||||
<svg></svg>
|
||||
<div id="canvas-wrapper5">No data available...</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="row margin-double">
|
||||
<div class="chart6">
|
||||
<h2 class="grey ">Bulb</h2>
|
||||
<div>
|
||||
<h2 class="grey ">Bulb Status</h2>
|
||||
<hr>
|
||||
<svg></svg>
|
||||
<div id="canvas-wrapper6">No data available...</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
@ -87,10 +86,10 @@ When they are moved the script tags get repeated for some reason :-(
|
||||
-->
|
||||
<script src="{{self.publicURL}}/js/graph_util.js"></script>
|
||||
<script src="{{self.publicURL}}/js/bulb.js"></script>
|
||||
<script src="{{self.publicURL}}/js/fan_graph.js"></script>
|
||||
<script src="{{self.publicURL}}/js/bulb_graph.js"></script>
|
||||
<script src="{{self.publicURL}}/js/temperature_graph.js"></script>
|
||||
<script src="{{self.publicURL}}/js/light_graph.js"></script>
|
||||
<script src="{{self.publicURL}}/js/motion_graph.js"></script>
|
||||
<script src="{{self.publicURL}}/js/sonar_graph.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>
|
||||
{{/zone}}
|
||||
|
||||
@ -1,216 +1,7 @@
|
||||
/********************
|
||||
* SVG CSS
|
||||
*/
|
||||
|
||||
|
||||
svg {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
/* Trying to get SVG to act like a greedy block in all browsers */
|
||||
display: block;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
/********************
|
||||
Default CSS for an svg element nvd3 used
|
||||
*/
|
||||
svg.nvd3-svg {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/********************
|
||||
Box shadow and border radius styling
|
||||
*/
|
||||
.nvtooltip.with-3d-shadow, .with-3d-shadow .nvtooltip {
|
||||
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/********************
|
||||
* TOOLTIP CSS
|
||||
*/
|
||||
|
||||
.nvtooltip {
|
||||
position: absolute;
|
||||
background-color: rgba(255,255,255,1.0);
|
||||
padding: 1px;
|
||||
border: 1px solid rgba(0,0,0,.2);
|
||||
z-index: 10000;
|
||||
|
||||
font-family: Arial;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
pointer-events: none;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/*Give tooltips that old fade in transition by
|
||||
putting a "with-transitions" class on the container div.
|
||||
*/
|
||||
.nvtooltip.with-transitions, .with-transitions .nvtooltip {
|
||||
transition: opacity 50ms linear;
|
||||
-moz-transition: opacity 50ms linear;
|
||||
-webkit-transition: opacity 50ms linear;
|
||||
|
||||
transition-delay: 200ms;
|
||||
-moz-transition-delay: 200ms;
|
||||
-webkit-transition-delay: 200ms;
|
||||
}
|
||||
|
||||
.nvtooltip.x-nvtooltip,
|
||||
.nvtooltip.y-nvtooltip {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.nvtooltip h3 {
|
||||
margin: 0;
|
||||
padding: 4px 14px;
|
||||
line-height: 18px;
|
||||
font-weight: normal;
|
||||
background-color: rgba(247,247,247,0.75);
|
||||
text-align: center;
|
||||
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
|
||||
-webkit-border-radius: 5px 5px 0 0;
|
||||
-moz-border-radius: 5px 5px 0 0;
|
||||
border-radius: 1px 5px 0 0;
|
||||
}
|
||||
|
||||
.nvtooltip p {
|
||||
margin: 0;
|
||||
padding: 5px 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nvtooltip span {
|
||||
display: inline-block;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.nvtooltip table {
|
||||
margin: 6px;
|
||||
border-spacing:0;
|
||||
}
|
||||
|
||||
|
||||
.nvtooltip table td {
|
||||
padding: 2px 9px 2px 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.nvtooltip table td.key {
|
||||
font-weight:normal;
|
||||
}
|
||||
.nvtooltip table td.value {
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nvtooltip table tr.highlight td {
|
||||
padding: 1px 9px 1px 0;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.nvtooltip table td.legend-color-guide div {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.nvtooltip .footer {
|
||||
padding: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nvtooltip-pending-removal {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nvd3 text {
|
||||
font: normal 12px Arial;
|
||||
}
|
||||
|
||||
.nvd3 .title {
|
||||
font: bold 14px Arial;
|
||||
}
|
||||
|
||||
.nvd3 .nv-background {
|
||||
fill: white;
|
||||
fill-opacity: 0;
|
||||
}
|
||||
|
||||
.nvd3.nv-noData {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Brush
|
||||
*/
|
||||
|
||||
.nv-brush .extent {
|
||||
fill-opacity: .125;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Legend
|
||||
*/
|
||||
|
||||
.nvd3 .nv-legend .nv-series {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nvd3 .nv-legend .nv-disabled circle {
|
||||
fill-opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Axes
|
||||
*/
|
||||
|
||||
.axis {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.axis.nv-disabled {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* nvd3 version 1.8.1 (https://github.com/novus/nvd3) 2015-06-17 */
|
||||
.nvd3 .nv-axis {
|
||||
pointer-events:none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.nvd3 .nv-axis path {
|
||||
@ -249,27 +40,11 @@ svg.nvd3-svg {
|
||||
text-anchor: middle
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Brush
|
||||
*/
|
||||
|
||||
.nv-brush .resize path {
|
||||
fill: #eee;
|
||||
stroke: #666;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Bars
|
||||
*/
|
||||
|
||||
.nvd3 .nv-bars .negative rect {
|
||||
zfill: brown;
|
||||
.nvd3 .nv-axis.nv-disabled {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.nvd3 .nv-bars rect {
|
||||
zfill: steelblue;
|
||||
fill-opacity: .75;
|
||||
|
||||
transition: fill-opacity 250ms linear;
|
||||
@ -293,11 +68,6 @@ svg.nvd3-svg {
|
||||
fill: rgba(0,0,0,1);
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Bars
|
||||
*/
|
||||
|
||||
.nvd3 .nv-multibar .nv-groups rect,
|
||||
.nvd3 .nv-multibarHorizontal .nv-groups rect,
|
||||
.nvd3 .nv-discretebar .nv-groups rect {
|
||||
@ -310,6 +80,7 @@ svg.nvd3-svg {
|
||||
|
||||
.nvd3 .nv-multibar .nv-groups rect:hover,
|
||||
.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
|
||||
.nvd3 .nv-candlestickBar .nv-ticks rect:hover,
|
||||
.nvd3 .nv-discretebar .nv-groups rect:hover {
|
||||
fill-opacity: 1;
|
||||
}
|
||||
@ -321,67 +92,117 @@ svg.nvd3-svg {
|
||||
stroke: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
/***********
|
||||
* Pie Chart
|
||||
*/
|
||||
|
||||
.nvd3.nv-pie path {
|
||||
stroke-opacity: 0;
|
||||
transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
|
||||
-moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
|
||||
-webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
|
||||
|
||||
/* boxplot CSS */
|
||||
.nvd3 .nv-boxplot circle {
|
||||
fill-opacity: 0.5;
|
||||
}
|
||||
|
||||
.nvd3.nv-pie .nv-pie-title {
|
||||
font-size: 24px;
|
||||
fill: rgba(19, 196, 249, 0.59);
|
||||
.nvd3 .nv-boxplot circle:hover {
|
||||
fill-opacity: 1;
|
||||
}
|
||||
|
||||
.nvd3.nv-pie .nv-slice text {
|
||||
stroke: #000;
|
||||
stroke-width: 0;
|
||||
.nvd3 .nv-boxplot rect:hover {
|
||||
fill-opacity: 1;
|
||||
}
|
||||
|
||||
.nvd3.nv-pie path {
|
||||
stroke: #fff;
|
||||
stroke-width: 1px;
|
||||
stroke-opacity: 1;
|
||||
.nvd3 line.nv-boxplot-median {
|
||||
stroke: black;
|
||||
}
|
||||
|
||||
.nvd3.nv-pie .hover path {
|
||||
.nv-boxplot-tick:hover {
|
||||
stroke-width: 2.5px;
|
||||
}
|
||||
/* bullet */
|
||||
.nvd3.nv-bullet { font: 10px sans-serif; }
|
||||
.nvd3.nv-bullet .nv-measure { fill-opacity: .8; }
|
||||
.nvd3.nv-bullet .nv-measure:hover { fill-opacity: 1; }
|
||||
.nvd3.nv-bullet .nv-marker { stroke: #000; stroke-width: 2px; }
|
||||
.nvd3.nv-bullet .nv-markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; }
|
||||
.nvd3.nv-bullet .nv-tick line { stroke: #666; stroke-width: .5px; }
|
||||
.nvd3.nv-bullet .nv-range.nv-s0 { fill: #eee; }
|
||||
.nvd3.nv-bullet .nv-range.nv-s1 { fill: #ddd; }
|
||||
.nvd3.nv-bullet .nv-range.nv-s2 { fill: #ccc; }
|
||||
.nvd3.nv-bullet .nv-title { font-size: 14px; font-weight: bold; }
|
||||
.nvd3.nv-bullet .nv-subtitle { fill: #999; }
|
||||
|
||||
|
||||
.nvd3.nv-bullet .nv-range {
|
||||
fill: #bababa;
|
||||
fill-opacity: .4;
|
||||
}
|
||||
.nvd3.nv-bullet .nv-range:hover {
|
||||
fill-opacity: .7;
|
||||
}
|
||||
.nvd3.nv-pie .nv-label {
|
||||
pointer-events: none;
|
||||
|
||||
.nvd3.nv-candlestickBar .nv-ticks .nv-tick {
|
||||
stroke-width: 1px;
|
||||
}
|
||||
.nvd3.nv-pie .nv-label rect {
|
||||
|
||||
.nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect {
|
||||
stroke: #2ca02c;
|
||||
fill: #2ca02c;
|
||||
}
|
||||
|
||||
.nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect {
|
||||
stroke: #d62728;
|
||||
fill: #d62728;
|
||||
}
|
||||
|
||||
.with-transitions .nv-candlestickBar .nv-ticks .nv-tick {
|
||||
transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
|
||||
-moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
|
||||
-webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
|
||||
|
||||
}
|
||||
|
||||
.nvd3.nv-candlestickBar .nv-ticks line {
|
||||
stroke: #333;
|
||||
}
|
||||
|
||||
|
||||
.nvd3 .nv-legend .nv-disabled rect {
|
||||
/*fill-opacity: 0;*/
|
||||
}
|
||||
|
||||
.nvd3 .nv-check-box .nv-box {
|
||||
fill-opacity:0;
|
||||
stroke-width:2;
|
||||
}
|
||||
|
||||
.nvd3 .nv-check-box .nv-check {
|
||||
fill-opacity:0;
|
||||
stroke-width:4;
|
||||
}
|
||||
|
||||
.nvd3 .nv-series.nv-disabled .nv-check-box .nv-check {
|
||||
fill-opacity:0;
|
||||
stroke-opacity:0;
|
||||
}
|
||||
|
||||
/**********
|
||||
* Lines
|
||||
*/
|
||||
.nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* line plus bar */
|
||||
.nvd3.nv-linePlusBar .nv-bar rect {
|
||||
fill-opacity: .75;
|
||||
}
|
||||
|
||||
.nvd3.nv-linePlusBar .nv-bar rect:hover {
|
||||
fill-opacity: 1;
|
||||
}
|
||||
.nvd3 .nv-groups path.nv-line {
|
||||
fill: none;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.nvd3 .nv-groups path.nv-line.nv-thin-line {
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
|
||||
.nvd3 .nv-groups path.nv-area {
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.nvd3 .nv-line.hover path {
|
||||
stroke-width: 6px;
|
||||
}
|
||||
|
||||
.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
|
||||
fill-opacity: 0;
|
||||
stroke-opacity: 0;
|
||||
@ -421,20 +242,184 @@ svg.nvd3-svg {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Distribution
|
||||
/********************
|
||||
* SVG CSS
|
||||
*/
|
||||
|
||||
.nvd3 .nv-distribution {
|
||||
pointer-events: none;
|
||||
/********************
|
||||
Default CSS for an svg element nvd3 used
|
||||
*/
|
||||
svg.nvd3-svg {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
display: block;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
/********************
|
||||
Box shadow and border radius styling
|
||||
*/
|
||||
.nvtooltip.with-3d-shadow, .with-3d-shadow .nvtooltip {
|
||||
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
.nvd3 text {
|
||||
font: normal 12px Arial;
|
||||
}
|
||||
|
||||
.nvd3 .title {
|
||||
font: bold 14px Arial;
|
||||
}
|
||||
|
||||
.nvd3 .nv-background {
|
||||
fill: white;
|
||||
fill-opacity: 0;
|
||||
}
|
||||
|
||||
.nvd3.nv-noData {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Scatter
|
||||
* Brush
|
||||
*/
|
||||
|
||||
.nv-brush .extent {
|
||||
fill-opacity: .125;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.nv-brush .resize path {
|
||||
fill: #eee;
|
||||
stroke: #666;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Legend
|
||||
*/
|
||||
|
||||
.nvd3 .nv-legend .nv-series {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nvd3 .nv-legend .nv-disabled circle {
|
||||
fill-opacity: 0;
|
||||
}
|
||||
|
||||
/* focus */
|
||||
.nvd3 .nv-brush .extent {
|
||||
fill-opacity: 0 !important;
|
||||
}
|
||||
|
||||
.nvd3 .nv-brushBackground rect {
|
||||
stroke: #000;
|
||||
stroke-width: .4;
|
||||
fill: #fff;
|
||||
fill-opacity: .7;
|
||||
}
|
||||
|
||||
|
||||
.nvd3.nv-ohlcBar .nv-ticks .nv-tick {
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
|
||||
stroke: #2ca02c;
|
||||
}
|
||||
|
||||
.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
|
||||
stroke: #d62728;
|
||||
}
|
||||
|
||||
|
||||
.nvd3 .background path {
|
||||
fill: none;
|
||||
stroke: #EEE;
|
||||
stroke-opacity: .4;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.nvd3 .foreground path {
|
||||
fill: none;
|
||||
stroke-opacity: .7;
|
||||
}
|
||||
|
||||
.nvd3 .nv-parallelCoordinates-brush .extent
|
||||
{
|
||||
fill: #fff;
|
||||
fill-opacity: .6;
|
||||
stroke: gray;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.nvd3 .nv-parallelCoordinates .hover {
|
||||
fill-opacity: 1;
|
||||
stroke-width: 3px;
|
||||
}
|
||||
|
||||
|
||||
.nvd3 .missingValuesline line {
|
||||
fill: none;
|
||||
stroke: black;
|
||||
stroke-width: 1;
|
||||
stroke-opacity: 1;
|
||||
stroke-dasharray: 5, 5;
|
||||
}
|
||||
.nvd3.nv-pie path {
|
||||
stroke-opacity: 0;
|
||||
transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
|
||||
-moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
|
||||
-webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
|
||||
|
||||
}
|
||||
|
||||
.nvd3.nv-pie .nv-pie-title {
|
||||
font-size: 24px;
|
||||
fill: rgba(19, 196, 249, 0.59);
|
||||
}
|
||||
|
||||
.nvd3.nv-pie .nv-slice text {
|
||||
stroke: #000;
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
.nvd3.nv-pie path {
|
||||
stroke: #fff;
|
||||
stroke-width: 1px;
|
||||
stroke-opacity: 1;
|
||||
}
|
||||
|
||||
.nvd3.nv-pie .hover path {
|
||||
fill-opacity: .7;
|
||||
}
|
||||
.nvd3.nv-pie .nv-label {
|
||||
pointer-events: none;
|
||||
}
|
||||
.nvd3.nv-pie .nv-label rect {
|
||||
fill-opacity: 0;
|
||||
stroke-opacity: 0;
|
||||
}
|
||||
|
||||
/* scatter */
|
||||
.nvd3 .nv-groups .nv-point.hover {
|
||||
stroke-width: 20px;
|
||||
stroke-opacity: .5;
|
||||
@ -443,74 +428,15 @@ svg.nvd3-svg {
|
||||
.nvd3 .nv-scatter .nv-point.hover {
|
||||
fill-opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Stacked Area
|
||||
*/
|
||||
|
||||
.nvd3.nv-stackedarea path.nv-area {
|
||||
fill-opacity: .7;
|
||||
stroke-opacity: 0;
|
||||
transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
|
||||
-moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
|
||||
-webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
|
||||
.nv-noninteractive {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nvd3.nv-stackedarea path.nv-area.hover {
|
||||
fill-opacity: .9;
|
||||
.nv-distx, .nv-disty {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
.nvd3.nv-stackedarea .nv-groups .nv-point {
|
||||
stroke-opacity: 0;
|
||||
fill-opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Line Plus Bar
|
||||
*/
|
||||
|
||||
.nvd3.nv-linePlusBar .nv-bar rect {
|
||||
fill-opacity: .75;
|
||||
}
|
||||
|
||||
.nvd3.nv-linePlusBar .nv-bar rect:hover {
|
||||
fill-opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Bullet
|
||||
*/
|
||||
|
||||
.nvd3.nv-bullet { font: 10px sans-serif; }
|
||||
.nvd3.nv-bullet .nv-measure { fill-opacity: .8; }
|
||||
.nvd3.nv-bullet .nv-measure:hover { fill-opacity: 1; }
|
||||
.nvd3.nv-bullet .nv-marker { stroke: #000; stroke-width: 2px; }
|
||||
.nvd3.nv-bullet .nv-markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; }
|
||||
.nvd3.nv-bullet .nv-tick line { stroke: #666; stroke-width: .5px; }
|
||||
.nvd3.nv-bullet .nv-range.nv-s0 { fill: #eee; }
|
||||
.nvd3.nv-bullet .nv-range.nv-s1 { fill: #ddd; }
|
||||
.nvd3.nv-bullet .nv-range.nv-s2 { fill: #ccc; }
|
||||
.nvd3.nv-bullet .nv-title { font-size: 14px; font-weight: bold; }
|
||||
.nvd3.nv-bullet .nv-subtitle { fill: #999; }
|
||||
|
||||
|
||||
.nvd3.nv-bullet .nv-range {
|
||||
fill: #bababa;
|
||||
fill-opacity: .4;
|
||||
}
|
||||
.nvd3.nv-bullet .nv-range:hover {
|
||||
fill-opacity: .7;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Sparkline
|
||||
*/
|
||||
|
||||
/* sparkline */
|
||||
.nvd3.nv-sparkline path {
|
||||
fill: none;
|
||||
}
|
||||
@ -559,80 +485,150 @@ svg.nvd3-svg {
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
/* stacked area */
|
||||
.nvd3.nv-stackedarea path.nv-area {
|
||||
fill-opacity: .7;
|
||||
stroke-opacity: 0;
|
||||
transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
|
||||
-moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
|
||||
-webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
|
||||
}
|
||||
|
||||
/**********
|
||||
* historical stock
|
||||
.nvd3.nv-stackedarea path.nv-area.hover {
|
||||
fill-opacity: .9;
|
||||
}
|
||||
|
||||
|
||||
.nvd3.nv-stackedarea .nv-groups .nv-point {
|
||||
stroke-opacity: 0;
|
||||
fill-opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
.nvtooltip {
|
||||
position: absolute;
|
||||
background-color: rgba(255,255,255,1.0);
|
||||
color: rgba(0,0,0,1.0);
|
||||
padding: 1px;
|
||||
border: 1px solid rgba(0,0,0,.2);
|
||||
z-index: 10000;
|
||||
display: block;
|
||||
|
||||
font-family: Arial;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
pointer-events: none;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.nvtooltip {
|
||||
background: rgba(255,255,255, 0.8);
|
||||
border: 1px solid rgba(0,0,0,0.5);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/*Give tooltips that old fade in transition by
|
||||
putting a "with-transitions" class on the container div.
|
||||
*/
|
||||
.nvtooltip.with-transitions, .with-transitions .nvtooltip {
|
||||
transition: opacity 50ms linear;
|
||||
-moz-transition: opacity 50ms linear;
|
||||
-webkit-transition: opacity 50ms linear;
|
||||
|
||||
.nvd3.nv-ohlcBar .nv-ticks .nv-tick {
|
||||
stroke-width: 1px;
|
||||
transition-delay: 200ms;
|
||||
-moz-transition-delay: 200ms;
|
||||
-webkit-transition-delay: 200ms;
|
||||
}
|
||||
|
||||
.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
|
||||
stroke-width: 2px;
|
||||
.nvtooltip.x-nvtooltip,
|
||||
.nvtooltip.y-nvtooltip {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
|
||||
stroke: #2ca02c;
|
||||
.nvtooltip h3 {
|
||||
margin: 0;
|
||||
padding: 4px 14px;
|
||||
line-height: 18px;
|
||||
font-weight: normal;
|
||||
background-color: rgba(247,247,247,0.75);
|
||||
color: rgba(0,0,0,1.0);
|
||||
text-align: center;
|
||||
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
|
||||
-webkit-border-radius: 5px 5px 0 0;
|
||||
-moz-border-radius: 5px 5px 0 0;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
|
||||
stroke: #d62728;
|
||||
.nvtooltip p {
|
||||
margin: 0;
|
||||
padding: 5px 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nvd3.nv-historicalStockChart .nv-axis .nv-axislabel {
|
||||
.nvtooltip span {
|
||||
display: inline-block;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.nvtooltip table {
|
||||
margin: 6px;
|
||||
border-spacing:0;
|
||||
}
|
||||
|
||||
|
||||
.nvtooltip table td {
|
||||
padding: 2px 9px 2px 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.nvtooltip table td.key {
|
||||
font-weight:normal;
|
||||
}
|
||||
.nvtooltip table td.value {
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nvd3.nv-historicalStockChart .nv-dragTarget {
|
||||
fill-opacity: 0;
|
||||
stroke: none;
|
||||
cursor: move;
|
||||
.nvtooltip table tr.highlight td {
|
||||
padding: 1px 9px 1px 0;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.nvd3 .nv-brush .extent {
|
||||
fill-opacity: 0 !important;
|
||||
.nvtooltip table td.legend-color-guide div {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.nvd3 .nv-brushBackground rect {
|
||||
stroke: #000;
|
||||
stroke-width: .4;
|
||||
fill: #fff;
|
||||
fill-opacity: .7;
|
||||
.nvtooltip table td.legend-color-guide div {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Parallel Coordinates
|
||||
*/
|
||||
|
||||
.nvd3 .background path {
|
||||
fill: none;
|
||||
stroke: #EEE;
|
||||
stroke-opacity: .4;
|
||||
shape-rendering: crispEdges;
|
||||
.nvtooltip .footer {
|
||||
padding: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nvd3 .foreground path {
|
||||
fill: none;
|
||||
stroke-opacity: .7;
|
||||
.nvtooltip-pending-removal {
|
||||
pointer-events: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nvd3 .brush .extent {
|
||||
fill-opacity: .3;
|
||||
stroke: #fff;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.nvd3 .axis line, .axis path {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.nvd3 .axis text {
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
}
|
||||
|
||||
/****
|
||||
Interactive Layer
|
||||
|
||||
11
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/Chart.min.js
vendored
Executable file
11
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/Chart.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
@ -1,64 +0,0 @@
|
||||
var bulbChart;
|
||||
|
||||
nv.addGraph(function () {
|
||||
|
||||
bulbChart = nv.models.lineChart()
|
||||
.interpolate("step-after")
|
||||
.options({
|
||||
transitionDuration: 300,
|
||||
useInteractiveGuideline: true
|
||||
})
|
||||
;
|
||||
|
||||
bulbChart.xScale(d3.time.scale());
|
||||
|
||||
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||
bulbChart.xAxis
|
||||
.axisLabel("Date/Time")
|
||||
.ticks(d3.time.seconds)
|
||||
.tickFormat(function (d) {
|
||||
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
||||
})
|
||||
.staggerLabels(true)
|
||||
;
|
||||
|
||||
bulbChart.yAxis
|
||||
.axisLabel('ON / OFF')
|
||||
.tickValues(1)
|
||||
.tickFormat(function(d) {
|
||||
return d == 1 ? 'ON' : 'OFF'
|
||||
})
|
||||
;
|
||||
|
||||
d3.select('.chart6 svg')
|
||||
.datum(getBulbChartData())
|
||||
.call(bulbChart);
|
||||
|
||||
nv.utils.windowResize(bulbChart.update);
|
||||
|
||||
return bulbChart;
|
||||
});
|
||||
|
||||
function getBulbChartData() {
|
||||
|
||||
return [
|
||||
{
|
||||
area: true,
|
||||
values: [],
|
||||
key: "Bulb",
|
||||
color: "#34500e"
|
||||
}
|
||||
];
|
||||
|
||||
}
|
||||
|
||||
function updateBulbGraph(fanData) {
|
||||
|
||||
var chartData = getBulbChartData();
|
||||
chartData[0]['values'] = fanData;
|
||||
|
||||
d3.select('.chart6 svg')
|
||||
.datum(chartData)
|
||||
.transition().duration(500)
|
||||
.call(bulbChart);
|
||||
}
|
||||
@ -1,64 +0,0 @@
|
||||
var bulbStatusChart;
|
||||
nv.addGraph(function () {
|
||||
|
||||
bulbStatusChart = nv.models.lineChart()
|
||||
.interpolate("step-after")
|
||||
.options({
|
||||
transitionDuration: 300,
|
||||
useInteractiveGuideline: true
|
||||
})
|
||||
;
|
||||
|
||||
bulbStatusChart.xScale(d3.time.scale());
|
||||
|
||||
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||
bulbStatusChart.xAxis
|
||||
.axisLabel("Date/Time")
|
||||
.ticks(d3.time.seconds)
|
||||
.tickFormat(function (d) {
|
||||
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
||||
})
|
||||
.staggerLabels(true)
|
||||
;
|
||||
|
||||
bulbStatusChart.yAxis
|
||||
.axisLabel('ON / OFF')
|
||||
.tickValues(1)
|
||||
.tickFormat(function (d) {
|
||||
return d == 1 ? 'ON' : 'OFF'
|
||||
})
|
||||
;
|
||||
|
||||
d3.select('.chart3 svg')
|
||||
.datum(getBulbStatusChartData)
|
||||
.call(bulbStatusChart);
|
||||
|
||||
nv.utils.windowResize(bulbStatusChart.update);
|
||||
|
||||
return bulbStatusChart;
|
||||
});
|
||||
|
||||
function getBulbStatusChartData() {
|
||||
|
||||
|
||||
return [
|
||||
{
|
||||
area: true,
|
||||
step: true,
|
||||
values: [],
|
||||
key: "Bulb Status",
|
||||
color: "#ff500e"
|
||||
}
|
||||
];
|
||||
|
||||
}
|
||||
function updateBulbStatusGraph(bulbStatusData) {
|
||||
|
||||
var chartData = getBulbStatusChartData();
|
||||
chartData[0]['values'] = bulbStatusData;
|
||||
|
||||
d3.select('.chart3 svg')
|
||||
.datum(chartData)
|
||||
.transition().duration(500)
|
||||
.call(bulbStatusChart);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -1,63 +0,0 @@
|
||||
var fanChart;
|
||||
|
||||
nv.addGraph(function () {
|
||||
|
||||
fanChart = nv.models.lineChart()
|
||||
.interpolate("step-after")
|
||||
.options({
|
||||
transitionDuration: 300,
|
||||
useInteractiveGuideline: true
|
||||
})
|
||||
;
|
||||
|
||||
fanChart.xScale(d3.time.scale());
|
||||
|
||||
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||
fanChart.xAxis
|
||||
.axisLabel("Date/Time")
|
||||
.ticks(d3.time.seconds)
|
||||
.tickFormat(function (d) {
|
||||
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
||||
})
|
||||
.staggerLabels(true)
|
||||
;
|
||||
|
||||
fanChart.yAxis
|
||||
.axisLabel('Fan (Status)')
|
||||
.tickFormat(function(d) {
|
||||
return d == 1 ? 'ON' : 'OFF'
|
||||
})
|
||||
;
|
||||
|
||||
d3.select('.chart5 svg')
|
||||
.datum(getFanChartData())
|
||||
.call(fanChart);
|
||||
|
||||
nv.utils.windowResize(fanChart.update);
|
||||
|
||||
return fanChart;
|
||||
});
|
||||
|
||||
function getFanChartData() {
|
||||
|
||||
return [
|
||||
{
|
||||
area: true,
|
||||
values: [],
|
||||
key: "Fan",
|
||||
color: "#34500e"
|
||||
}
|
||||
];
|
||||
|
||||
}
|
||||
|
||||
function updateFanGraph(fanData) {
|
||||
|
||||
var chartData = getFanChartData();
|
||||
chartData[0]['values'] = fanData;
|
||||
|
||||
d3.select('.chart5 svg')
|
||||
.datum(chartData)
|
||||
.transition().duration(500)
|
||||
.call(fanChart);
|
||||
}
|
||||
@ -1,63 +0,0 @@
|
||||
var fanStatusChart;
|
||||
nv.addGraph(function () {
|
||||
|
||||
fanStatusChart = nv.models.lineChart()
|
||||
.interpolate("step-after")
|
||||
.options({
|
||||
transitionDuration: 300,
|
||||
useInteractiveGuideline: true
|
||||
})
|
||||
;
|
||||
|
||||
fanStatusChart.xScale(d3.time.scale());
|
||||
|
||||
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||
fanStatusChart.xAxis
|
||||
.axisLabel("Date/Time")
|
||||
.ticks(d3.time.seconds)
|
||||
.tickFormat(function (d) {
|
||||
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
||||
})
|
||||
.staggerLabels(true)
|
||||
;
|
||||
|
||||
fanStatusChart.yAxis
|
||||
.axisLabel('ON / OFF')
|
||||
.tickValues(1)
|
||||
.tickFormat(function (d) {
|
||||
return d == 1 ? 'ON' : 'OFF'
|
||||
})
|
||||
;
|
||||
|
||||
d3.select('.chart2 svg')
|
||||
.datum(getFanStatusChartData)
|
||||
.call(fanStatusChart);
|
||||
|
||||
nv.utils.windowResize(fanStatusChart.update);
|
||||
|
||||
return fanStatusChart;
|
||||
});
|
||||
|
||||
function getFanStatusChartData() {
|
||||
return [
|
||||
{
|
||||
area: true,
|
||||
step: true,
|
||||
values: [],
|
||||
key: "Fan Status",
|
||||
color: "#ff7f0e"
|
||||
}
|
||||
];
|
||||
|
||||
}
|
||||
|
||||
function updateFanStatusGraph(fanStatusData) {
|
||||
|
||||
var chartData = getFanStatusChartData();
|
||||
chartData[0]['values'] = fanStatusData;
|
||||
|
||||
d3.select('.chart2 svg')
|
||||
.datum(chartData)
|
||||
.transition().duration(500)
|
||||
.call(fanStatusChart);
|
||||
}
|
||||
@ -42,17 +42,40 @@ $('#date-range1').dateRangePicker(configObject)
|
||||
toDate = dateRange.date2 != "Invalid Date" ? dateRange.date2.getTime() / 1000 : null;
|
||||
});
|
||||
|
||||
$('#btn-draw-graphs').on('click', function () {
|
||||
var deviceId = getUrlParameter('deviceId');
|
||||
console.log("device id:"+deviceId);
|
||||
getStats(deviceId, fromDate, toDate);
|
||||
var now = new Date();
|
||||
var startDate = new Date(now.getTime() - (60*60*24*100));
|
||||
var endDate = new Date(now.getTime());
|
||||
|
||||
var DateRange = customFormatDate(startDate,configObject.format) +" "+ configObject.separator +" "+ customFormatDate(endDate,configObject.format);
|
||||
console.log(DateRange);
|
||||
|
||||
$( document ).ready(function() {
|
||||
$('#date-range1').val(DateRange);
|
||||
$('#date-range1').trigger('datepicker-apply',
|
||||
{
|
||||
'value': DateRange,
|
||||
'date1' : startDate,
|
||||
'date2' : endDate
|
||||
});
|
||||
|
||||
function getStats(deviceId, from, to) {
|
||||
$('#btn-draw-graphs').trigger("click");
|
||||
});
|
||||
|
||||
//26.04.2015 08:46 to 22.07.2015 08:46
|
||||
|
||||
$('#btn-draw-graphs').on('click', function () {
|
||||
var deviceId = getUrlParameter('deviceId');
|
||||
var deviceType = getUrlParameter('deviceType');
|
||||
console.log("device id:"+deviceId);
|
||||
getStats(deviceId, deviceType, fromDate, toDate);
|
||||
});
|
||||
|
||||
function getStats(deviceId, deviceType, from, to) {
|
||||
|
||||
var requestData = new Object();
|
||||
|
||||
requestData['deviceId'] = deviceId;
|
||||
requestData['deviceType'] = deviceType;
|
||||
|
||||
if (from) {
|
||||
requestData['from'] = from;
|
||||
@ -108,6 +131,8 @@ function updateGraphs(stats) {
|
||||
updateFanGraph(convertStateStatsToGraphData(fanData));
|
||||
|
||||
var bulbData = stats['bulbData'];
|
||||
console.log("bulbData...");
|
||||
console.log(bulbData);
|
||||
updateBulbGraph(convertStateStatsToGraphData(bulbData));
|
||||
|
||||
}
|
||||
@ -115,7 +140,7 @@ function updateGraphs(stats) {
|
||||
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']})
|
||||
}
|
||||
@ -128,7 +153,7 @@ function convertStatsToGraphData(stats) {
|
||||
function convertStateStatsToGraphData(stats){
|
||||
|
||||
var graphData = new Array();
|
||||
|
||||
if(!stats){return graphData;}
|
||||
var yValue;
|
||||
for(var i = 0; i < stats.length; i++){
|
||||
yValue = -1;
|
||||
@ -144,3 +169,45 @@ function convertStateStatsToGraphData(stats){
|
||||
|
||||
return graphData;
|
||||
}
|
||||
|
||||
function arrayMin(arr) {
|
||||
var len = arr.length, min = Infinity;
|
||||
while (len--) {
|
||||
if (arr[len] < min) {
|
||||
min = arr[len];
|
||||
}
|
||||
}
|
||||
return min;
|
||||
};
|
||||
|
||||
function arrayMax(arr) {
|
||||
var len = arr.length, max = -Infinity;
|
||||
while (len--) {
|
||||
if (arr[len] > max) {
|
||||
max = arr[len];
|
||||
}
|
||||
}
|
||||
return max;
|
||||
};
|
||||
|
||||
|
||||
function customFormatDate(timeStamp, formatString){
|
||||
console.log("came"+formatString);
|
||||
var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th;
|
||||
YYYY=timeStamp.getFullYear();
|
||||
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M;
|
||||
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
|
||||
DD = (D=timeStamp.getDate())<10?('0'+D):D;
|
||||
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3);
|
||||
formatString = formatString.replace("YYYY",YYYY).replace("MM",MM).replace("DD",DD).replace("D",D);
|
||||
console.log(formatString);
|
||||
|
||||
h=(hhh=timeStamp.getHours());
|
||||
if (h==0) h=24;
|
||||
if (h>12) h-=12;
|
||||
hh = h<10?('0'+h):h;
|
||||
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
|
||||
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
|
||||
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
|
||||
return formatString.replace("hhh",hhh).replace("HH",hh).replace("h",h).replace("mm",mm).replace("m",m).replace("ss",ss).replace("s",s).replace("ampm",ampm).replace("AMPM",AMPM);
|
||||
}
|
||||
@ -0,0 +1,144 @@
|
||||
//var bulbChart;
|
||||
//
|
||||
//nv.addGraph(function () {
|
||||
//
|
||||
// bulbChart = nv.models.lineChart()
|
||||
// .interpolate("step-after")
|
||||
// .options({
|
||||
// transitionDuration: 300,
|
||||
// useInteractiveGuideline: true
|
||||
// })
|
||||
// ;
|
||||
//
|
||||
// bulbChart.xScale(d3.time.scale());
|
||||
//
|
||||
// // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||
// bulbChart.xAxis
|
||||
// .axisLabel("Date/Time")
|
||||
// .ticks(d3.time.seconds)
|
||||
// .tickFormat(function (d) {
|
||||
// return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
||||
// })
|
||||
// .staggerLabels(true)
|
||||
// ;
|
||||
//
|
||||
// bulbChart.yAxis
|
||||
// .axisLabel('ON / OFF')
|
||||
// .tickValues(1)
|
||||
// .tickFormat(function(d) {
|
||||
// return d == 1 ? 'ON' : 'OFF'
|
||||
// })
|
||||
// ;
|
||||
//
|
||||
// d3.select('.chart6 svg')
|
||||
// .datum(getBulbChartData())
|
||||
// .call(bulbChart);
|
||||
//
|
||||
// nv.utils.windowResize(bulbChart.update);
|
||||
//
|
||||
// return bulbChart;
|
||||
//});
|
||||
//
|
||||
//function getBulbChartData() {
|
||||
//
|
||||
// return [
|
||||
// {
|
||||
// area: true,
|
||||
// values: [],
|
||||
// key: "Bulb",
|
||||
// color: "#34500e"
|
||||
// }
|
||||
// ];
|
||||
//
|
||||
//}
|
||||
//
|
||||
function updateBulbGraph(bulbData) {
|
||||
|
||||
//var chartData = getBulbChartData();
|
||||
//chartData[0]['values'] = fanData;
|
||||
//
|
||||
//d3.select('.chart6 svg')
|
||||
// .datum(chartData)
|
||||
// .transition().duration(500)
|
||||
// .call(bulbChart);
|
||||
renderBulbChart(bulbData);
|
||||
}
|
||||
|
||||
|
||||
function renderBulbChart(chartData){
|
||||
var chartWrapperElmId = "#canvas-wrapper5";
|
||||
var chartCanvasId="canvas5";
|
||||
|
||||
if(chartData.length==0){
|
||||
$(chartWrapperElmId).html("No data available...");
|
||||
return;
|
||||
}
|
||||
var label=[];
|
||||
var data=[];
|
||||
var maxLabels=20;
|
||||
var showLabel=Math.floor(chartData.length/maxLabels);
|
||||
for(i=0;i<chartData.length;i++) {
|
||||
if(i%showLabel==0) {
|
||||
var timeStamp = new Date(chartData[i].x);
|
||||
label.push(customFormat(timeStamp, "#DD#/#MM#/#YYYY# #hh#:#mm#:#ss# #ampm#"));
|
||||
}else{
|
||||
label.push("");
|
||||
}
|
||||
data.push(chartData[i].y);
|
||||
}
|
||||
|
||||
console.log(data);
|
||||
console.log(label);
|
||||
|
||||
$(chartWrapperElmId).html("").html('<canvas id="'+chartCanvasId+'" height="350" width="100%"></canvas>');
|
||||
var lineChartData = {
|
||||
labels : label,
|
||||
datasets : [
|
||||
{
|
||||
fillColor : "rgba(61, 144, 215, 0.2)",
|
||||
strokeColor : "rgba(61, 144, 215, 1)",
|
||||
pointColor : "rgba(61, 144, 215, 1)",
|
||||
pointStrokeColor : "#fff",
|
||||
data : data
|
||||
}
|
||||
]
|
||||
|
||||
};
|
||||
var canvas = document.getElementById(chartCanvasId);
|
||||
var ctx = canvas.getContext("2d");
|
||||
|
||||
myLine = new Chart(ctx).Line(lineChartData, {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scaleLabel: function (valuePayload) {
|
||||
if (Number(valuePayload.value) === 0) {
|
||||
return 'OFF';
|
||||
} else if (Number(valuePayload.value) === 1) {
|
||||
return 'ON';
|
||||
}else{
|
||||
return '';
|
||||
}
|
||||
},
|
||||
scaleStartValue: 0
|
||||
});
|
||||
}
|
||||
|
||||
function customFormat(timeStamp, formatString){
|
||||
var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th;
|
||||
YY = ((YYYY=timeStamp.getFullYear())+"").slice(-2);
|
||||
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M;
|
||||
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
|
||||
DD = (D=timeStamp.getDate())<10?('0'+D):D;
|
||||
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3);
|
||||
th=(D>=10&&D<=20)?'th':((dMod=D%10)==1)?'st':(dMod==2)?'nd':(dMod==3)?'rd':'th';
|
||||
formatString = formatString.replace("#YYYY#",YYYY).replace("#YY#",YY).replace("#MMMM#",MMMM).replace("#MMM#",MMM).replace("#MM#",MM).replace("#M#",M).replace("#DDDD#",DDDD).replace("#DDD#",DDD).replace("#DD#",DD).replace("#D#",D).replace("#th#",th);
|
||||
|
||||
h=(hhh=timeStamp.getHours());
|
||||
if (h==0) h=24;
|
||||
if (h>12) h-=12;
|
||||
hh = h<10?('0'+h):h;
|
||||
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
|
||||
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
|
||||
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
|
||||
return formatString.replace("#hhh#",hhh).replace("#hh#",hh).replace("#h#",h).replace("#mm#",mm).replace("#m#",m).replace("#ss#",ss).replace("#s#",s).replace("#ampm#",ampm).replace("#AMPM#",AMPM);
|
||||
}
|
||||
@ -0,0 +1,143 @@
|
||||
//var fanChart;
|
||||
//
|
||||
//nv.addGraph(function () {
|
||||
//
|
||||
// fanChart = nv.models.lineChart()
|
||||
// .interpolate("step-after")
|
||||
// .options({
|
||||
// transitionDuration: 300,
|
||||
// useInteractiveGuideline: true
|
||||
// })
|
||||
// ;
|
||||
//
|
||||
// fanChart.xScale(d3.time.scale());
|
||||
//
|
||||
// // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||
// fanChart.xAxis
|
||||
// .axisLabel("Date/Time")
|
||||
// .ticks(d3.time.seconds)
|
||||
// .tickFormat(function (d) {
|
||||
// return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
||||
// })
|
||||
// .staggerLabels(true)
|
||||
// ;
|
||||
//
|
||||
// fanChart.yAxis
|
||||
// .axisLabel('Fan (Status)')
|
||||
// .tickFormat(function(d) {
|
||||
// return d == 1 ? 'ON' : 'OFF'
|
||||
// })
|
||||
// ;
|
||||
//
|
||||
// d3.select('.chart5 svg')
|
||||
// .datum(getFanChartData())
|
||||
// .call(fanChart);
|
||||
//
|
||||
// nv.utils.windowResize(fanChart.update);
|
||||
//
|
||||
// return fanChart;
|
||||
//});
|
||||
//
|
||||
//function getFanChartData() {
|
||||
//
|
||||
// return [
|
||||
// {
|
||||
// area: true,
|
||||
// values: [],
|
||||
// key: "Fan",
|
||||
// color: "#34500e"
|
||||
// }
|
||||
// ];
|
||||
//
|
||||
//}
|
||||
//
|
||||
function updateFanGraph(fanData) {
|
||||
|
||||
//var chartData = getFanChartData();
|
||||
//chartData[0]['values'] = fanData;
|
||||
//
|
||||
//d3.select('.chart5 svg')
|
||||
// .datum(chartData)
|
||||
// .transition().duration(500)
|
||||
// .call(fanChart);
|
||||
renderFanChart(fanData);
|
||||
}
|
||||
|
||||
|
||||
function renderFanChart(chartData){
|
||||
var chartWrapperElmId = "#canvas-wrapper6";
|
||||
var chartCanvasId="canvas6";
|
||||
|
||||
if(chartData.length==0){
|
||||
$(chartWrapperElmId).html("No data available...");
|
||||
return;
|
||||
}
|
||||
var label=[];
|
||||
var data=[];
|
||||
var maxLabels=20;
|
||||
var showLabel=Math.floor(chartData.length/maxLabels);
|
||||
for(i=0;i<chartData.length;i++) {
|
||||
if(i%showLabel==0) {
|
||||
var timeStamp = new Date(chartData[i].x);
|
||||
label.push(customFormat(timeStamp, "#DD#/#MM#/#YYYY# #hh#:#mm#:#ss# #ampm#"));
|
||||
}else{
|
||||
label.push("");
|
||||
}
|
||||
data.push(chartData[i].y);
|
||||
}
|
||||
|
||||
console.log(data);
|
||||
console.log(label);
|
||||
|
||||
$(chartWrapperElmId).html("").html('<canvas id="'+chartCanvasId+'" height="350" width="100%"></canvas>');
|
||||
var lineChartData = {
|
||||
labels : label,
|
||||
datasets : [
|
||||
{
|
||||
fillColor : "rgba(221,100,64, 0.2)",
|
||||
strokeColor : "rgba(221,100,64, 1)",
|
||||
pointColor : "rgba(221,100,64, 1)",
|
||||
pointStrokeColor : "#fff",
|
||||
data : data
|
||||
}
|
||||
]
|
||||
|
||||
};
|
||||
var canvas = document.getElementById(chartCanvasId);
|
||||
var ctx = canvas.getContext("2d");
|
||||
|
||||
myLine = new Chart(ctx).Line(lineChartData, {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scaleLabel: function (valuePayload) {
|
||||
if (Number(valuePayload.value) === 0) {
|
||||
return 'OFF';
|
||||
} else if (Number(valuePayload.value) === 1) {
|
||||
return 'ON';
|
||||
}else{
|
||||
return '';
|
||||
}
|
||||
},
|
||||
scaleStartValue: 0
|
||||
});
|
||||
}
|
||||
|
||||
function customFormat(timeStamp, formatString){
|
||||
var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th;
|
||||
YY = ((YYYY=timeStamp.getFullYear())+"").slice(-2);
|
||||
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M;
|
||||
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
|
||||
DD = (D=timeStamp.getDate())<10?('0'+D):D;
|
||||
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3);
|
||||
th=(D>=10&&D<=20)?'th':((dMod=D%10)==1)?'st':(dMod==2)?'nd':(dMod==3)?'rd':'th';
|
||||
formatString = formatString.replace("#YYYY#",YYYY).replace("#YY#",YY).replace("#MMMM#",MMMM).replace("#MMM#",MMM).replace("#MM#",MM).replace("#M#",M).replace("#DDDD#",DDDD).replace("#DDD#",DDD).replace("#DD#",DD).replace("#D#",D).replace("#th#",th);
|
||||
|
||||
h=(hhh=timeStamp.getHours());
|
||||
if (h==0) h=24;
|
||||
if (h>12) h-=12;
|
||||
hh = h<10?('0'+h):h;
|
||||
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
|
||||
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
|
||||
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
|
||||
return formatString.replace("#hhh#",hhh).replace("#hh#",hh).replace("#h#",h).replace("#mm#",mm).replace("#m#",m).replace("#ss#",ss).replace("#s#",s).replace("#ampm#",ampm).replace("#AMPM#",AMPM);
|
||||
}
|
||||
@ -0,0 +1,130 @@
|
||||
//var lightChart;
|
||||
//
|
||||
//nv.addGraph(function () {
|
||||
//
|
||||
// lightChart = nv.models.lineChart()
|
||||
// .interpolate("linear")
|
||||
// .options({
|
||||
// transitionDuration: 300,
|
||||
// useInteractiveGuideline: true
|
||||
// })
|
||||
// ;
|
||||
//
|
||||
// lightChart.xScale(d3.time.scale());
|
||||
//
|
||||
// // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||
// lightChart.xAxis
|
||||
// .axisLabel("Date/Time")
|
||||
// .ticks(d3.time.seconds)
|
||||
// .tickFormat(function (d) {
|
||||
// return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
||||
// })
|
||||
// .staggerLabels(true)
|
||||
// ;
|
||||
//
|
||||
// lightChart.yAxis
|
||||
// .axisLabel('Light')
|
||||
// ;
|
||||
//
|
||||
// d3.select('.chart2 svg')
|
||||
// .datum(getLightChartData())
|
||||
// .call(lightChart);
|
||||
//
|
||||
// nv.utils.windowResize(lightChart.update);
|
||||
//
|
||||
// return lightChart;
|
||||
//});
|
||||
//
|
||||
//function getLightChartData() {
|
||||
//
|
||||
// return [
|
||||
// {
|
||||
// area: true,
|
||||
// values: [],
|
||||
// key: "Light",
|
||||
// color: "#34500e"
|
||||
// }
|
||||
// ];
|
||||
//
|
||||
//}
|
||||
//
|
||||
function updateLightGraph(lightData) {
|
||||
|
||||
//var chartData = getLightChartData();
|
||||
//chartData[0]['values'] = lightData;
|
||||
//
|
||||
//d3.select('.chart2 svg')
|
||||
// .datum(chartData)
|
||||
// .transition().duration(500)
|
||||
// .call(lightChart);
|
||||
renderLightChart(lightData);
|
||||
}
|
||||
|
||||
|
||||
function renderLightChart(chartData){
|
||||
var chartWrapperElmId = "#canvas-wrapper2";
|
||||
var chartCanvasId="canvas2";
|
||||
|
||||
if(chartData.length==0){
|
||||
$(chartWrapperElmId).html("No data available...");
|
||||
return;
|
||||
}
|
||||
var label=[];
|
||||
var data=[];
|
||||
var maxLabels=20;
|
||||
var showLabel=Math.floor(chartData.length/maxLabels);
|
||||
for(i=0;i<chartData.length;i++) {
|
||||
if(i%showLabel==0) {
|
||||
var timeStamp = new Date(chartData[i].x);
|
||||
label.push(customFormat(timeStamp, "#DD#/#MM#/#YYYY# #hh#:#mm#:#ss# #ampm#"));
|
||||
}else{
|
||||
label.push("");
|
||||
}
|
||||
data.push(chartData[i].y);
|
||||
}
|
||||
|
||||
console.log(data);
|
||||
console.log(label);
|
||||
|
||||
$(chartWrapperElmId).html("").html('<canvas id="'+chartCanvasId+'" height="350" width="100%"></canvas>');
|
||||
var lineChartData = {
|
||||
labels : label,
|
||||
datasets : [
|
||||
{
|
||||
fillColor : "rgba(255, 174, 0, 0.2)",
|
||||
strokeColor : "rgba(255, 174, 0, 1)",
|
||||
pointColor : "rgba(255, 174, 0, 1)",
|
||||
pointStrokeColor : "#fff",
|
||||
data : data
|
||||
}
|
||||
]
|
||||
|
||||
};
|
||||
var canvas = document.getElementById(chartCanvasId);
|
||||
var ctx = canvas.getContext("2d");
|
||||
|
||||
myLine = new Chart(ctx).Line(lineChartData, {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
});
|
||||
}
|
||||
|
||||
function customFormat(timeStamp, formatString){
|
||||
var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th;
|
||||
YY = ((YYYY=timeStamp.getFullYear())+"").slice(-2);
|
||||
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M;
|
||||
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
|
||||
DD = (D=timeStamp.getDate())<10?('0'+D):D;
|
||||
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3);
|
||||
th=(D>=10&&D<=20)?'th':((dMod=D%10)==1)?'st':(dMod==2)?'nd':(dMod==3)?'rd':'th';
|
||||
formatString = formatString.replace("#YYYY#",YYYY).replace("#YY#",YY).replace("#MMMM#",MMMM).replace("#MMM#",MMM).replace("#MM#",MM).replace("#M#",M).replace("#DDDD#",DDDD).replace("#DDD#",DDD).replace("#DD#",DD).replace("#D#",D).replace("#th#",th);
|
||||
|
||||
h=(hhh=timeStamp.getHours());
|
||||
if (h==0) h=24;
|
||||
if (h>12) h-=12;
|
||||
hh = h<10?('0'+h):h;
|
||||
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
|
||||
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
|
||||
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
|
||||
return formatString.replace("#hhh#",hhh).replace("#hh#",hh).replace("#h#",h).replace("#mm#",mm).replace("#m#",m).replace("#ss#",ss).replace("#s#",s).replace("#ampm#",ampm).replace("#AMPM#",AMPM);
|
||||
}
|
||||
@ -0,0 +1,130 @@
|
||||
//var motionChart;
|
||||
//
|
||||
//nv.addGraph(function () {
|
||||
//
|
||||
// motionChart = nv.models.lineChart()
|
||||
// .interpolate("linear")
|
||||
// .options({
|
||||
// transitionDuration: 300,
|
||||
// useInteractiveGuideline: true
|
||||
// })
|
||||
// ;
|
||||
//
|
||||
// motionChart.xScale(d3.time.scale());
|
||||
//
|
||||
// // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||
// motionChart.xAxis
|
||||
// .axisLabel("Date/Time")
|
||||
// .ticks(d3.time.seconds)
|
||||
// .tickFormat(function (d) {
|
||||
// return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
||||
// })
|
||||
// .staggerLabels(true)
|
||||
// ;
|
||||
//
|
||||
// motionChart.yAxis
|
||||
// .axisLabel('Motion')
|
||||
// ;
|
||||
//
|
||||
// d3.select('.chart3 svg')
|
||||
// .datum(getMotionChartData())
|
||||
// .call(motionChart);
|
||||
//
|
||||
// nv.utils.windowResize(motionChart.update);
|
||||
//
|
||||
// return motionChart;
|
||||
//});
|
||||
//
|
||||
//function getMotionChartData() {
|
||||
//
|
||||
// return [
|
||||
// {
|
||||
// area: true,
|
||||
// values: [],
|
||||
// key: "Motion",
|
||||
// color: "#34500e"
|
||||
// }
|
||||
// ];
|
||||
//
|
||||
//}
|
||||
//
|
||||
function updateMotionGraph(motionData) {
|
||||
|
||||
//var chartData = getMotionChartData();
|
||||
//chartData[0]['values'] = motionData;
|
||||
//
|
||||
//d3.select('.chart3 svg')
|
||||
// .datum(chartData)
|
||||
// .transition().duration(500)
|
||||
// .call(motionChart);
|
||||
renderMotionChart(motionData);
|
||||
}
|
||||
|
||||
|
||||
function renderMotionChart(chartData){
|
||||
var chartWrapperElmId = "#canvas-wrapper3";
|
||||
var chartCanvasId="canvas3";
|
||||
|
||||
if(chartData.length==0){
|
||||
$(chartWrapperElmId).html("No data available...");
|
||||
return;
|
||||
}
|
||||
var label=[];
|
||||
var data=[];
|
||||
var maxLabels=20;
|
||||
var showLabel=Math.floor(chartData.length/maxLabels);
|
||||
for(i=0;i<chartData.length;i++) {
|
||||
if(i%showLabel==0) {
|
||||
var timeStamp = new Date(chartData[i].x);
|
||||
label.push(customFormat(timeStamp, "#DD#/#MM#/#YYYY# #hh#:#mm#:#ss# #ampm#"));
|
||||
}else{
|
||||
label.push("");
|
||||
}
|
||||
data.push(chartData[i].y);
|
||||
}
|
||||
|
||||
console.log(data);
|
||||
console.log(label);
|
||||
|
||||
$(chartWrapperElmId).html("").html('<canvas id="'+chartCanvasId+'" height="350" width="100%"></canvas>');
|
||||
var lineChartData = {
|
||||
labels : label,
|
||||
datasets : [
|
||||
{
|
||||
fillColor : "rgba(255, 0, 115, 0.2)",
|
||||
strokeColor : "rgba(255, 0, 115, 1)",
|
||||
pointColor : "rgba(255, 0, 115, 1)",
|
||||
pointStrokeColor : "#fff",
|
||||
data : data
|
||||
}
|
||||
]
|
||||
|
||||
};
|
||||
var canvas = document.getElementById(chartCanvasId);
|
||||
var ctx = canvas.getContext("2d");
|
||||
|
||||
myLine = new Chart(ctx).Line(lineChartData, {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
});
|
||||
}
|
||||
|
||||
function customFormat(timeStamp, formatString){
|
||||
var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th;
|
||||
YY = ((YYYY=timeStamp.getFullYear())+"").slice(-2);
|
||||
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M;
|
||||
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
|
||||
DD = (D=timeStamp.getDate())<10?('0'+D):D;
|
||||
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3);
|
||||
th=(D>=10&&D<=20)?'th':((dMod=D%10)==1)?'st':(dMod==2)?'nd':(dMod==3)?'rd':'th';
|
||||
formatString = formatString.replace("#YYYY#",YYYY).replace("#YY#",YY).replace("#MMMM#",MMMM).replace("#MMM#",MMM).replace("#MM#",MM).replace("#M#",M).replace("#DDDD#",DDDD).replace("#DDD#",DDD).replace("#DD#",DD).replace("#D#",D).replace("#th#",th);
|
||||
|
||||
h=(hhh=timeStamp.getHours());
|
||||
if (h==0) h=24;
|
||||
if (h>12) h-=12;
|
||||
hh = h<10?('0'+h):h;
|
||||
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
|
||||
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
|
||||
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
|
||||
return formatString.replace("#hhh#",hhh).replace("#hh#",hh).replace("#h#",h).replace("#mm#",mm).replace("#m#",m).replace("#ss#",ss).replace("#s#",s).replace("#ampm#",ampm).replace("#AMPM#",AMPM);
|
||||
}
|
||||
@ -0,0 +1,130 @@
|
||||
//var sonarChart;
|
||||
//
|
||||
//nv.addGraph(function () {
|
||||
//
|
||||
// sonarChart = nv.models.lineChart()
|
||||
// .interpolate("linear")
|
||||
// .options({
|
||||
// transitionDuration: 300,
|
||||
// useInteractiveGuideline: true
|
||||
// })
|
||||
// ;
|
||||
//
|
||||
// sonarChart.xScale(d3.time.scale());
|
||||
//
|
||||
// // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||
// sonarChart.xAxis
|
||||
// .axisLabel("Date/Time")
|
||||
// .ticks(d3.time.seconds)
|
||||
// .tickFormat(function (d) {
|
||||
// return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
||||
// })
|
||||
// .staggerLabels(true)
|
||||
// ;
|
||||
//
|
||||
// sonarChart.yAxis
|
||||
// .axisLabel('Sonar')
|
||||
// ;
|
||||
//
|
||||
// d3.select('.chart4 svg')
|
||||
// .datum(getSonarChartData())
|
||||
// .call(sonarChart);
|
||||
//
|
||||
// nv.utils.windowResize(sonarChart.update);
|
||||
//
|
||||
// return sonarChart;
|
||||
//});
|
||||
//
|
||||
//function getSonarChartData() {
|
||||
//
|
||||
// return [
|
||||
// {
|
||||
// area: true,
|
||||
// values: [],
|
||||
// key: "Sonar",
|
||||
// color: "#34500e"
|
||||
// }
|
||||
// ];
|
||||
//
|
||||
//}
|
||||
//
|
||||
function updateSonarGraph(sonarData) {
|
||||
//
|
||||
// var chartData = getSonarChartData();
|
||||
// chartData[0]['values'] = sonarData;
|
||||
//
|
||||
// d3.select('.chart4 svg')
|
||||
// .datum(chartData)
|
||||
// .transition().duration(500)
|
||||
// .call(sonarChart);
|
||||
renderSonarChart(sonarData);
|
||||
}
|
||||
|
||||
|
||||
function renderSonarChart(chartData){
|
||||
var chartWrapperElmId = "#canvas-wrapper4";
|
||||
var chartCanvasId="canvas4";
|
||||
|
||||
if(chartData.length==0){
|
||||
$(chartWrapperElmId).html("No data available...");
|
||||
return;
|
||||
}
|
||||
var label=[];
|
||||
var data=[];
|
||||
var maxLabels=20;
|
||||
var showLabel=Math.floor(chartData.length/maxLabels);
|
||||
for(i=0;i<chartData.length;i++) {
|
||||
if(i%showLabel==0) {
|
||||
var timeStamp = new Date(chartData[i].x);
|
||||
label.push(customFormat(timeStamp, "#DD#/#MM#/#YYYY# #hh#:#mm#:#ss# #ampm#"));
|
||||
}else{
|
||||
label.push("");
|
||||
}
|
||||
data.push(chartData[i].y);
|
||||
}
|
||||
|
||||
console.log(data);
|
||||
console.log(label);
|
||||
|
||||
$(chartWrapperElmId).html("").html('<canvas id="'+chartCanvasId+'" height="350" width="100%"></canvas>');
|
||||
var lineChartData = {
|
||||
labels : label,
|
||||
datasets : [
|
||||
{
|
||||
fillColor : "rgba(90, 130, 232, 0.2)",
|
||||
strokeColor : "rgba(90, 130, 232, 1)",
|
||||
pointColor : "rgba(90, 130, 232, 1)",
|
||||
pointStrokeColor : "#fff",
|
||||
data : data
|
||||
}
|
||||
]
|
||||
|
||||
};
|
||||
var canvas = document.getElementById(chartCanvasId);
|
||||
var ctx = canvas.getContext("2d");
|
||||
|
||||
myLine = new Chart(ctx).Line(lineChartData, {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
});
|
||||
}
|
||||
|
||||
function customFormat(timeStamp, formatString){
|
||||
var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th;
|
||||
YY = ((YYYY=timeStamp.getFullYear())+"").slice(-2);
|
||||
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M;
|
||||
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
|
||||
DD = (D=timeStamp.getDate())<10?('0'+D):D;
|
||||
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3);
|
||||
th=(D>=10&&D<=20)?'th':((dMod=D%10)==1)?'st':(dMod==2)?'nd':(dMod==3)?'rd':'th';
|
||||
formatString = formatString.replace("#YYYY#",YYYY).replace("#YY#",YY).replace("#MMMM#",MMMM).replace("#MMM#",MMM).replace("#MM#",MM).replace("#M#",M).replace("#DDDD#",DDDD).replace("#DDD#",DDD).replace("#DD#",DD).replace("#D#",D).replace("#th#",th);
|
||||
|
||||
h=(hhh=timeStamp.getHours());
|
||||
if (h==0) h=24;
|
||||
if (h>12) h-=12;
|
||||
hh = h<10?('0'+h):h;
|
||||
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
|
||||
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
|
||||
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
|
||||
return formatString.replace("#hhh#",hhh).replace("#hh#",hh).replace("#h#",h).replace("#mm#",mm).replace("#m#",m).replace("#ss#",ss).replace("#s#",s).replace("#ampm#",ampm).replace("#AMPM#",AMPM);
|
||||
}
|
||||
@ -0,0 +1,137 @@
|
||||
//var temperatureChart;
|
||||
//
|
||||
//nv.addGraph(function () {
|
||||
// var height = 350;
|
||||
// temperatureChart = nv.models.lineChart();
|
||||
//
|
||||
// temperatureChart.margin({left: 100}) ; //Adjust chart margins to give the x-axis some breathing room.
|
||||
// temperatureChart.useInteractiveGuideline(true) ; //We want nice looking tooltips and a guideline!
|
||||
// temperatureChart.showLegend(true) ; //Show the legend, allowing users to turn on/off line series.
|
||||
// temperatureChart.showYAxis(true) ; //Show the y-axis
|
||||
// temperatureChart.showXAxis(true) ; //Show the x-axis
|
||||
// temperatureChart.height(height) ; //Show the x-axis
|
||||
//
|
||||
//
|
||||
// temperatureChart.xScale(d3.time.scale());
|
||||
// temperatureChart.forceY([0,100]);
|
||||
//
|
||||
// // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||
// temperatureChart.xAxis
|
||||
// .axisLabel("Date/Time")
|
||||
// .ticks(d3.time.seconds)
|
||||
// .tickFormat(function (d) {
|
||||
// return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
||||
// })
|
||||
// .staggerLabels(true)
|
||||
// ;
|
||||
//
|
||||
// temperatureChart.yAxis
|
||||
// .axisLabel('Temperature (C)')
|
||||
// ;
|
||||
//
|
||||
// d3.select('.chart1 svg')
|
||||
// .datum(getTemperatureChartData())
|
||||
// .call(temperatureChart)
|
||||
// .transition().duration(500)
|
||||
// .style({'height': height });
|
||||
// nv.utils.windowResize(temperatureChart.update);
|
||||
//
|
||||
// return temperatureChart;
|
||||
//});
|
||||
//
|
||||
//function getTemperatureChartData() {
|
||||
//
|
||||
// return [
|
||||
// {
|
||||
// area: true,
|
||||
// values: [],
|
||||
// key: "Temperature"
|
||||
// }
|
||||
// ];
|
||||
//
|
||||
//}
|
||||
|
||||
function updateTemperatureGraph(temperatureData) {
|
||||
|
||||
//var chartData = getTemperatureChartData();
|
||||
//chartData[0]['values'] = temperatureData;
|
||||
//
|
||||
//d3.select('.chart1 svg')
|
||||
// .datum(chartData)
|
||||
// .transition().duration(500)
|
||||
// .call(temperatureChart);
|
||||
//
|
||||
//temperatureChart.forceY([0,30]);
|
||||
//
|
||||
//nv.utils.windowResize(temperatureChart.update);
|
||||
console.log("temperatureData");
|
||||
renderTemperatureChart(temperatureData);
|
||||
}
|
||||
|
||||
function renderTemperatureChart(chartData){
|
||||
var chartWrapperElmId = "#canvas-wrapper1";
|
||||
var chartCanvasId="canvas1";
|
||||
|
||||
if(chartData.length==0){
|
||||
$(chartWrapperElmId).html("No data available...");
|
||||
return;
|
||||
}
|
||||
var label=[];
|
||||
var data=[];
|
||||
var maxLabels=20;
|
||||
var showLabel=Math.floor(chartData.length/maxLabels);
|
||||
for(i=0;i<chartData.length;i++) {
|
||||
if(i%showLabel==0) {
|
||||
var timeStamp = new Date(chartData[i].x);
|
||||
label.push(customFormat(timeStamp, "#DD#/#MM#/#YYYY# #hh#:#mm#:#ss# #ampm#"));
|
||||
}else{
|
||||
label.push("");
|
||||
}
|
||||
data.push(chartData[i].y);
|
||||
}
|
||||
|
||||
console.log(data);
|
||||
console.log(label);
|
||||
|
||||
$(chartWrapperElmId).html("").html('<canvas id="'+chartCanvasId+'" height="350" width="100%"></canvas>');
|
||||
var lineChartData = {
|
||||
labels : label,
|
||||
datasets : [
|
||||
{
|
||||
fillColor : "rgba(49, 195, 166, 0.2)",
|
||||
strokeColor : "rgba(49, 195, 166, 1)",
|
||||
pointColor : "rgba(49, 195, 166, 1)",
|
||||
pointStrokeColor : "#fff",
|
||||
data : data
|
||||
}
|
||||
]
|
||||
|
||||
};
|
||||
var canvas = document.getElementById(chartCanvasId);
|
||||
var ctx = canvas.getContext("2d");
|
||||
|
||||
myLine = new Chart(ctx).Line(lineChartData, {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
});
|
||||
}
|
||||
|
||||
function customFormat(timeStamp, formatString){
|
||||
var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th;
|
||||
YY = ((YYYY=timeStamp.getFullYear())+"").slice(-2);
|
||||
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M;
|
||||
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
|
||||
DD = (D=timeStamp.getDate())<10?('0'+D):D;
|
||||
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3);
|
||||
th=(D>=10&&D<=20)?'th':((dMod=D%10)==1)?'st':(dMod==2)?'nd':(dMod==3)?'rd':'th';
|
||||
formatString = formatString.replace("#YYYY#",YYYY).replace("#YY#",YY).replace("#MMMM#",MMMM).replace("#MMM#",MMM).replace("#MM#",MM).replace("#M#",M).replace("#DDDD#",DDDD).replace("#DDD#",DDD).replace("#DD#",DD).replace("#D#",D).replace("#th#",th);
|
||||
|
||||
h=(hhh=timeStamp.getHours());
|
||||
if (h==0) h=24;
|
||||
if (h>12) h-=12;
|
||||
hh = h<10?('0'+h):h;
|
||||
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
|
||||
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
|
||||
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
|
||||
return formatString.replace("#hhh#",hhh).replace("#hh#",hh).replace("#h#",h).replace("#mm#",mm).replace("#m#",m).replace("#ss#",ss).replace("#s#",s).replace("#ampm#",ampm).replace("#AMPM#",AMPM);
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
var lightChart;
|
||||
|
||||
nv.addGraph(function () {
|
||||
|
||||
lightChart = nv.models.lineChart()
|
||||
.interpolate("linear")
|
||||
.options({
|
||||
transitionDuration: 300,
|
||||
useInteractiveGuideline: true
|
||||
})
|
||||
;
|
||||
|
||||
lightChart.xScale(d3.time.scale());
|
||||
|
||||
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||
lightChart.xAxis
|
||||
.axisLabel("Date/Time")
|
||||
.ticks(d3.time.seconds)
|
||||
.tickFormat(function (d) {
|
||||
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
||||
})
|
||||
.staggerLabels(true)
|
||||
;
|
||||
|
||||
lightChart.yAxis
|
||||
.axisLabel('Light')
|
||||
;
|
||||
|
||||
d3.select('.chart2 svg')
|
||||
.datum(getLightChartData())
|
||||
.call(lightChart);
|
||||
|
||||
nv.utils.windowResize(lightChart.update);
|
||||
|
||||
return lightChart;
|
||||
});
|
||||
|
||||
function getLightChartData() {
|
||||
|
||||
return [
|
||||
{
|
||||
area: true,
|
||||
values: [],
|
||||
key: "Light",
|
||||
color: "#34500e"
|
||||
}
|
||||
];
|
||||
|
||||
}
|
||||
|
||||
function updateLightGraph(lightData) {
|
||||
|
||||
var chartData = getLightChartData();
|
||||
chartData[0]['values'] = lightData;
|
||||
|
||||
d3.select('.chart2 svg')
|
||||
.datum(chartData)
|
||||
.transition().duration(500)
|
||||
.call(lightChart);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,4 +0,0 @@
|
||||
function onRequest(context){
|
||||
context.sketchPath = "api/device/sketch";
|
||||
return context;
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
var motionChart;
|
||||
|
||||
nv.addGraph(function () {
|
||||
|
||||
motionChart = nv.models.lineChart()
|
||||
.interpolate("linear")
|
||||
.options({
|
||||
transitionDuration: 300,
|
||||
useInteractiveGuideline: true
|
||||
})
|
||||
;
|
||||
|
||||
motionChart.xScale(d3.time.scale());
|
||||
|
||||
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||
motionChart.xAxis
|
||||
.axisLabel("Date/Time")
|
||||
.ticks(d3.time.seconds)
|
||||
.tickFormat(function (d) {
|
||||
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
||||
})
|
||||
.staggerLabels(true)
|
||||
;
|
||||
|
||||
motionChart.yAxis
|
||||
.axisLabel('Motion')
|
||||
;
|
||||
|
||||
d3.select('.chart3 svg')
|
||||
.datum(getMotionChartData())
|
||||
.call(motionChart);
|
||||
|
||||
nv.utils.windowResize(motionChart.update);
|
||||
|
||||
return motionChart;
|
||||
});
|
||||
|
||||
function getMotionChartData() {
|
||||
|
||||
return [
|
||||
{
|
||||
area: true,
|
||||
values: [],
|
||||
key: "Motion",
|
||||
color: "#34500e"
|
||||
}
|
||||
];
|
||||
|
||||
}
|
||||
|
||||
function updateMotionGraph(motionData) {
|
||||
|
||||
var chartData = getMotionChartData();
|
||||
chartData[0]['values'] = motionData;
|
||||
|
||||
d3.select('.chart3 svg')
|
||||
.datum(chartData)
|
||||
.transition().duration(500)
|
||||
.call(motionChart);
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
var sonarChart;
|
||||
|
||||
nv.addGraph(function () {
|
||||
|
||||
sonarChart = nv.models.lineChart()
|
||||
.interpolate("linear")
|
||||
.options({
|
||||
transitionDuration: 300,
|
||||
useInteractiveGuideline: true
|
||||
})
|
||||
;
|
||||
|
||||
sonarChart.xScale(d3.time.scale());
|
||||
|
||||
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||
sonarChart.xAxis
|
||||
.axisLabel("Date/Time")
|
||||
.ticks(d3.time.seconds)
|
||||
.tickFormat(function (d) {
|
||||
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
||||
})
|
||||
.staggerLabels(true)
|
||||
;
|
||||
|
||||
sonarChart.yAxis
|
||||
.axisLabel('Sonar')
|
||||
;
|
||||
|
||||
d3.select('.chart4 svg')
|
||||
.datum(getSonarChartData())
|
||||
.call(sonarChart);
|
||||
|
||||
nv.utils.windowResize(sonarChart.update);
|
||||
|
||||
return sonarChart;
|
||||
});
|
||||
|
||||
function getSonarChartData() {
|
||||
|
||||
return [
|
||||
{
|
||||
area: true,
|
||||
values: [],
|
||||
key: "Sonar",
|
||||
color: "#34500e"
|
||||
}
|
||||
];
|
||||
|
||||
}
|
||||
|
||||
function updateSonarGraph(sonarData) {
|
||||
|
||||
var chartData = getSonarChartData();
|
||||
chartData[0]['values'] = sonarData;
|
||||
|
||||
d3.select('.chart4 svg')
|
||||
.datum(chartData)
|
||||
.transition().duration(500)
|
||||
.call(sonarChart);
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
var temperatureChart;
|
||||
|
||||
nv.addGraph(function () {
|
||||
|
||||
temperatureChart = nv.models.lineChart()
|
||||
.interpolate("linear")
|
||||
.options({
|
||||
transitionDuration: 300,
|
||||
useInteractiveGuideline: true
|
||||
})
|
||||
;
|
||||
|
||||
temperatureChart.xScale(d3.time.scale());
|
||||
|
||||
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||
temperatureChart.xAxis
|
||||
.axisLabel("Date/Time")
|
||||
.ticks(d3.time.seconds)
|
||||
.tickFormat(function (d) {
|
||||
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
||||
})
|
||||
.staggerLabels(true)
|
||||
;
|
||||
|
||||
temperatureChart.yAxis
|
||||
.axisLabel('Temperature (C)')
|
||||
;
|
||||
|
||||
d3.select('.chart1 svg')
|
||||
.datum(getTemperatureChartData())
|
||||
.call(temperatureChart);
|
||||
|
||||
nv.utils.windowResize(temperatureChart.update);
|
||||
|
||||
return temperatureChart;
|
||||
});
|
||||
|
||||
function getTemperatureChartData() {
|
||||
|
||||
return [
|
||||
{
|
||||
area: true,
|
||||
values: [],
|
||||
key: "Temperature",
|
||||
color: "#34500e"
|
||||
}
|
||||
];
|
||||
|
||||
}
|
||||
|
||||
function updateTemperatureGraph(temperatureData) {
|
||||
|
||||
var chartData = getTemperatureChartData();
|
||||
chartData[0]['values'] = temperatureData;
|
||||
|
||||
d3.select('.chart1 svg')
|
||||
.datum(chartData)
|
||||
.transition().duration(500)
|
||||
.call(temperatureChart);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@ -14,7 +14,7 @@
|
||||
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 padding-top ">
|
||||
<div class="product-wrapper rounded dark-grey center">
|
||||
<div class="icon-wrapper">
|
||||
<img src="{{self.publicURL}}/images/Fire-alarm.png" >
|
||||
<img src="{{self.publicURL}}/images/firealarm-thumb.png" >
|
||||
</div>
|
||||
<h2 class="white center">Fire Alarm</h2>
|
||||
<div class="text-wrapper">
|
||||
@ -29,7 +29,7 @@
|
||||
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 padding-top ">
|
||||
<div class="product-wrapper rounded dark-grey center">
|
||||
<div class="icon-wrapper">
|
||||
<img src="{{self.publicURL}}/images/sensebot.png" >
|
||||
<img src="{{self.publicURL}}/images/sensebot-thumb.png" >
|
||||
</div>
|
||||
<h2 class="white center">SenseBot</h2>
|
||||
<div class="text-wrapper">
|
||||
@ -44,7 +44,7 @@
|
||||
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 padding-top ">
|
||||
<div class="product-wrapper rounded dark-grey center">
|
||||
<div class="icon-wrapper">
|
||||
<img src="{{self.publicURL}}/images/digitaldisplay.png" >
|
||||
<img src="{{self.publicURL}}/images/digitaldisplay-thumb.png" >
|
||||
</div>
|
||||
<h2 class="white center">Digital Display</h2>
|
||||
<div class="text-wrapper">
|
||||
@ -58,7 +58,7 @@
|
||||
<div class=" col-xs-12 col-sm-6 col-md-3 col-lg-3 padding-top ">
|
||||
<div class="product-wrapper rounded dark-grey center">
|
||||
<div class="icon-wrapper">
|
||||
<img src="{{self.publicURL}}/images/ArduinoUno.png" >
|
||||
<img src="{{self.publicURL}}/images/arduino-thumb.png" >
|
||||
</div>
|
||||
<h2 class="white center">ArduinoUno</h2>
|
||||
<div class="text-wrapper">
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
function onRequest(context){
|
||||
context.sketchPath = "api/device/sketch";
|
||||
return context;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user