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

Add statistic selection options with updated date range picker

Browse Source
merge-requests/1/head
charithag 10 years ago
parent 62467ac564
commit e2eafa1320
4 changed files with 1870 additions and 1969 deletions
Show Stats Download Patch File Download Diff File

22
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/mydevice.hbs
Unescape View File

@ -24,16 +24,22 @@
<hr>
</div>
</div>
<div class="row float-right margin-top">
<div class="right margin-right">
<p style="color:#000;float:left;margin-top:25px">Date Range:</p>
<input class="right margin-right" id="date-range1" size="60" value="" style="margin-top: 20px">
<button type="button" id="btn-draw-graphs" class="btn btn-primary" style="margin-top: 20px">
Draw Graphs
</button>
<div id="rangeSliderWrapper" class="pull-right" style="width: 550px;">
<div class="row-fluid">
<div class="span12">
<div id="dateRangePickerContainer">
<div class="btn-group" role="group">
<button id="hour-btn" type="button" class="btn btn-default date-range">Hour</button>
<button id="today-btn" type="button" class="btn btn-default date-range">Day</button>
<button id="week-btn" type="button" class="btn btn-default date-range">Week</button>
<button id="month-btn" type="button" class="btn btn-default date-range">Month</button>
<button id="date-range" type="button" class="btn btn-default date-range last-child" data-toggle="popup" title="Click to set custom date range"></button>
</div>
<span class="add-on-cal"><i style="margin-right:0px;" class="icon-calendar"></i></span>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="row margin-double">
<div>

563
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/css/daterangepicker.css
Unescape View File

@ -1,232 +1,331 @@
.date-picker
{
width:170px;
height:25px;
padding:0;
border:0;
line-height:25px;
padding-left:10px;
font-size:12px;
font-family:Arial;
font-weight:bold;
cursor:pointer;
color:#303030;
position:relative;
z-index:2;
}
.date-picker-wrapper
{
position:absolute;
z-index:1;
border:1px solid #bfbfbf;
background-color:#efefef;
width:428px;
padding: 5px 12px;
font-size:12px;
line-height:20px;
color:#aaa;
font-family:Arial;
box-shadow:3px 3px 10px rgba(0,0,0,0.5);
}
.date-picker-wrapper.single-date {
width:auto;
}
.date-picker-wrapper.no-shortcuts { padding-bottom:12px;}
.date-picker-wrapper .footer
{
font-size:11px;
padding-top: 3px;
}
.date-picker-wrapper b
{
color:#666;
font-weight:700;
}
.date-picker-wrapper a
{
color: rgb(107, 180, 214);
text-decoration:underline;
}
.date-picker-wrapper .month-name
{
text-transform: uppercase;
}
.date-picker-wrapper .month-wrapper
{
border:1px solid #bfbfbf;
border-radius:3px;
background-color:#fff;
padding:5px;
cursor:default;
position:relative;
_overflow:hidden;
}
.date-picker-wrapper .month-wrapper table
{
width:190px;
float:left;
}
.date-picker-wrapper .month-wrapper table.month2
{
width:190px;
float:right;
}
.date-picker-wrapper .month-wrapper table th,
.date-picker-wrapper .month-wrapper table td
{
vertical-align:middle;
text-align:center;
line-height:14px;
margin : 0px;
padding : 0px;
}
.date-picker-wrapper .month-wrapper table .day
{
height:19px;
line-height:19px;
font-size:12px;
margin-bottom:1px;
color:#999;
cursor:default;
}
.date-picker-wrapper .month-wrapper table div.day.lastMonth,
.date-picker-wrapper .month-wrapper table div.day.nextMonth
{
color:#999;
cursor:default;
}
.date-picker-wrapper .month-wrapper table .day.checked
{
background-color: rgba(156, 219, 247, 0.5);
}
.date-picker-wrapper .month-wrapper table .week-name
{
height:20px;
line-height:20px;
font-weight:100;
text-transform: uppercase;
}
.date-picker-wrapper .month-wrapper table .day.has-tooltip { cursor:help !important;}
.date-picker-wrapper .month-wrapper table .day.toMonth.valid
{
color:#333;
cursor:pointer;
}
.date-picker-wrapper .month-wrapper table .day.real-today { background-color: rgb(255, 230, 132); }
.date-picker-wrapper .month-wrapper table .day.real-today.checked { background-color: rgb(112, 204, 213); }
.date-picker-wrapper table .caption
{
height:40px;
}
.date-picker-wrapper table .caption .next,
.date-picker-wrapper table .caption .prev
{
padding:0 5px;
cursor:pointer;
}
.date-picker-wrapper table .caption .next:hover,
.date-picker-wrapper table .caption .prev:hover
{
background-color:#ccc;
color:white;
}
.date-picker-wrapper .gap
{
position:absolute;
display:none;
top:0px;
left:204px;
z-index: 1;
width:15px;
height: 100%;
background-color:red;
font-size:0;
line-height:0;
}
.date-picker-wrapper .gap .gap-lines { height: 100%; overflow:hidden; }
.date-picker-wrapper .gap .gap-line { height:15px;width:15px; position:relative; }
.date-picker-wrapper .gap .gap-line .gap-1 { z-index:1; height:0; border-left:8px solid white; border-top:8px solid #eee;border-bottom:8px solid #eee; }
.date-picker-wrapper .gap .gap-line .gap-2 { position:absolute; right:0; top:0px; z-index:2; height:0; border-left:8px solid transparent; border-top:8px solid white; }
.date-picker-wrapper .gap .gap-line .gap-3 { position:absolute; right:0; top:8px; z-index:2; height:0; border-left:8px solid transparent; border-bottom:8px solid white; }
.date-picker-wrapper .gap .gap-top-mask { width: 6px; height:1px; position:absolute; top: -1px; left: 1px; background-color: #eee; z-index:3; }
.date-picker-wrapper .gap .gap-bottom-mask { width: 6px; height:1px; position:absolute; bottom: -1px; left: 7px; background-color: #eee; z-index:3; }
.date-picker-wrapper .selected-days
{
display:none;
}
.date-picker-wrapper .drp_top-bar
{
line-height:40px;
height:40px;
position:relative;
}
.date-picker-wrapper .drp_top-bar .error-top { display:none; }
.date-picker-wrapper .drp_top-bar .normal-top { display:none; }
.date-picker-wrapper .drp_top-bar .default-top { display:block; }
.date-picker-wrapper .drp_top-bar.error .default-top { display:none; }
.date-picker-wrapper .drp_top-bar.error .error-top { display:block; color:red; }
.date-picker-wrapper .drp_top-bar.normal .default-top { display:none; }
.date-picker-wrapper .drp_top-bar.normal .normal-top { display:block; }
.date-picker-wrapper .drp_top-bar .apply-btn
{
position:absolute;
right: 0px;
top: 6px;
padding:3px 5px;
margin:0;
font-size:12px;
border-radius:4px;
cursor:pointer;
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
color:white;
}
.date-picker-wrapper .drp_top-bar .apply-btn.disabled
{
cursor: pointer;
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
/*time styling*/
.time {
position: relative;
}
.time input[type=range] {
vertical-align: middle;
}
.time1, .time2 {
width: 180px;
padding: 0 5px;
text-align: center;
}
.time1 {
float: left;
}
.time2 {
float: right;
}
.hour, .minute {
text-align: right;
}
.hide {
display: none;
}
.date-picker {
width: 170px;
height: 25px;
padding: 0;
border: 0;
line-height: 25px;
padding-left: 10px;
font-size: 12px;
font-family: Arial;
font-weight: bold;
cursor: pointer;
color: #303030;
position: relative;
z-index: 2;
}
.date-picker-wrapper {
position: absolute;
z-index: 1;
border: 1px solid #bfbfbf;
background-color: #efefef;
width: 448px;
padding: 5px 12px;
font-size: 12px;
line-height: 20px;
color: #aaa;
font-family: Arial;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
}
.date-picker-wrapper.single-date {
width: auto;
}
.date-picker-wrapper.no-shortcuts {
padding-bottom: 12px;
}
.date-picker-wrapper .footer {
display: none;
font-size: 11px;
padding-top: 3px;
}
.date-picker-wrapper b {
color: #666;
font-weight: 700;
}
.date-picker-wrapper a {
color: rgb(107, 180, 214);
text-decoration: underline;
}
.date-picker-wrapper .month-wrapper {
border: 1px solid #bfbfbf;
border-radius: 3px;
background-color: #fff;
padding: 5px;
cursor: default;
position: relative;
_overflow: hidden;
}
.date-picker-wrapper .month-wrapper table {
width: 190px;
float: left;
}
.date-picker-wrapper .month-wrapper table.month2 {
width: 190px;
float: right;
}
.date-picker-wrapper .month-wrapper table th,
.date-picker-wrapper .month-wrapper table td {
vertical-align: middle;
text-align: center;
line-height: 14px;
margin: 0px;
padding: 0px;
}
.date-picker-wrapper .month-wrapper table .day {
height: 19px;
line-height: 19px;
font-size: 12px;
margin-bottom: 1px;
color: #999;
cursor: default;
}
.date-picker-wrapper .month-wrapper table div.day.lastMonth,
.date-picker-wrapper .month-wrapper table div.day.nextMonth {
color: #999;
cursor: default;
}
.date-picker-wrapper .month-wrapper table .day.checked {
background-color: rgb(156, 219, 247);
}
.date-picker-wrapper .month-wrapper table .week-name {
height: 20px;
line-height: 20px;
font-weight: 100;
}
.date-picker-wrapper .month-wrapper table .day.has-tooltip {
cursor: help !important;
}
.date-picker-wrapper .month-wrapper table .day.toMonth.valid {
color: #333;
cursor: pointer;
}
.date-picker-wrapper .month-wrapper table .day.real-today {
background-color: rgb(255, 230, 132);
}
.date-picker-wrapper .month-wrapper table .day.real-today.checked {
background-color: rgb(112, 204, 213);
}
.date-picker-wrapper table .caption {
height: 40px;
}
.date-picker-wrapper table .caption .next,
.date-picker-wrapper table .caption .prev {
padding: 0 5px;
cursor: pointer;
}
.date-picker-wrapper table .caption .next:hover,
.date-picker-wrapper table .caption .prev:hover {
background-color: #ccc;
color: white;
}
.date-picker-wrapper .gap {
position: absolute;
display: none;
top: 0px;
left: 204px;
z-index: 1;
width: 15px;
height: 100%;
background-color: red;
font-size: 0;
line-height: 0;
}
.date-picker-wrapper .gap .gap-lines {
height: 100%;
overflow: hidden;
}
.date-picker-wrapper .gap .gap-line {
height: 15px;
width: 15px;
position: relative;
}
.date-picker-wrapper .gap .gap-line .gap-1 {
z-index: 1;
height: 0;
border-left: 8px solid white;
border-top: 8px solid #eee;
border-bottom: 8px solid #eee;
}
.date-picker-wrapper .gap .gap-line .gap-2 {
position: absolute;
right: 0;
top: 0px;
z-index: 2;
height: 0;
border-left: 8px solid transparent;
border-top: 8px solid white;
}
.date-picker-wrapper .gap .gap-line .gap-3 {
position: absolute;
right: 0;
top: 8px;
z-index: 2;
height: 0;
border-left: 8px solid transparent;
border-bottom: 8px solid white;
}
.date-picker-wrapper .gap .gap-top-mask {
width: 6px;
height: 1px;
position: absolute;
top: -1px;
left: 1px;
background-color: #eee;
z-index: 3;
}
.date-picker-wrapper .gap .gap-bottom-mask {
width: 6px;
height: 1px;
position: absolute;
bottom: -1px;
left: 7px;
background-color: #eee;
z-index: 3;
}
.date-picker-wrapper .selected-days {
display: none;
}
.date-picker-wrapper .drp_top-bar {
line-height: 40px;
height: 40px;
position: relative;
}
.date-picker-wrapper .drp_top-bar .error-top {
display: none;
}
.date-picker-wrapper .drp_top-bar .normal-top {
display: none;
}
.date-picker-wrapper .drp_top-bar .default-top {
display: block;
}
.date-picker-wrapper .drp_top-bar.error .default-top {
display: none;
}
.date-picker-wrapper .drp_top-bar.error .error-top {
display: block;
color: red;
}
.date-picker-wrapper .drp_top-bar.normal .default-top {
display: none;
}
.date-picker-wrapper .drp_top-bar.normal .normal-top {
display: block;
}
.date-picker-wrapper .drp_top-bar .apply-btn {
position: absolute;
right: 0px;
top: 6px;
padding: 3px 5px;
margin: 0;
font-size: 12px;
border-radius: 4px;
cursor: pointer;
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
color: white;
}
.date-picker-wrapper .drp_top-bar .apply-btn.disabled {
pointer-events: none;
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
/*time styling*/
.time {
position: relative;
}
.time input[type=range] {
vertical-align: middle;
}
.time1, .time2 {
width: 180px;
padding: 0 5px;
text-align: center;
}
.time1 {
float: left;
}
.time2 {
float: right;
}
.hour, .minute {
text-align: left;
}
.hide {
display: none;
}
input.hour-range, input.minute-range {
width: 150px;
}
#dateRangePickerContainer .date-range, #dateRangePickerContainer .input-append {
background: none !important;
}
#date-range{
padding-right:30px;
width:300px;
height:100%;
display:inline-block;
}
#dateRangePickerContainer{
float:right;
margin-top:-6px;
}

195
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graph_util.js
Unescape View File

@ -11,76 +11,96 @@ Rickshaw.Graph.Renderer.BarNoGap = Rickshaw.Class.create(Rickshaw.Graph.Renderer
}
});
var configObject = {
format: 'DD.MM.YYYY HH:mm',
var currentDay = new Date();
var startDate = new Date(currentDay.getTime() - (60 * 60 * 24 * 100));
var endDate = new Date(currentDay.getTime());
var configObject = {
startOfWeek: 'monday',
separator: ' to ',
language: 'auto',
startOfWeek: 'sunday',// or sunday
format: 'YYYY-MM-DD HH:mm',
autoClose: false,
time: {
enabled: true
},
shortcuts: 'hide',
endDate: currentDay,
getValue: function () {
return this.value;
},
setValue: function (s) {
this.value = s;
},
startDate: false,
endDate: false,
minDays: 0,
maxDays: 0,
showShortcuts: true,
time: {
enabled: true
},
shortcuts: {
//'prev-days': [1,3,5,7],
'next-days': [3, 5, 7],
//'prev' : ['week','month','year'],
'next': ['week', 'month', 'year']
},
customShortcuts: [],
inline: false,
container: 'body',
alwaysOpen: false,
singleDate: false,
batchMode: false,
stickyMonths: false
}
};
$('#date-range1').dateRangePicker(configObject)
var DateRange = convertDate(startDate) + " " + configObject.separator + " " + convertDate(endDate);
$('#date-range').dateRangePicker(configObject)
.bind('datepicker-apply', function (event, dateRange) {
$(this).addClass('active');
$(this).siblings().removeClass('active');
fromDate = dateRange.date1 != "Invalid Date" ? dateRange.date1.getTime() / 1000 : null;
toDate = dateRange.date2 != "Invalid Date" ? dateRange.date2.getTime() / 1000 : null;
});
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);
getStats(fromDate, toDate);
}
);
$( document ).ready(function() {
$('#date-range1').val(DateRange);
$('#date-range1').trigger('datepicker-apply',
$(document).ready(function () {
$('#date-range').html(DateRange);
$('#date-range').trigger('datepicker-apply',
{
'value': DateRange,
'date1' : startDate,
'date2' : endDate
'date1': startDate,
'date2': endDate
});
});
$('#btn-draw-graphs').trigger("click");
//day picker
$('#today-btn').on('click', function () {
getDateTime(currentDay.getTime() - 86400000, currentDay.getTime());
});
//26.04.2015 08:46 to 22.07.2015 08:46
//hour picker
$('#hour-btn').on('click', function () {
getDateTime(currentDay.getTime() - 3600000, currentDay.getTime());
})
$('#btn-draw-graphs').on('click', function () {
var deviceId = getUrlParameter('deviceId');
var deviceType = getUrlParameter('deviceType');
console.log("device id:"+deviceId);
getStats(deviceId, deviceType, fromDate, toDate);
//week picker
$('#week-btn').on('click', function () {
getDateTime(currentDay.getTime() - 604800000, currentDay.getTime());
})
//month picker
$('#month-btn').on('click', function () {
getDateTime(currentDay.getTime() - (604800000 * 4), currentDay.getTime());
});
function getStats(deviceId, deviceType, from, to) {
$('body').on('click', '.btn-group button', function (e) {
$(this).addClass('active');
$(this).siblings().removeClass('active');
});
function getDateTime(from, to) {
startDate = new Date(from);
endDate = new Date(to);
DateRange = convertDate(startDate) + " " + configObject.separator + " " + convertDate(endDate);
console.log(DateRange);
$('#date-range').html(DateRange);
$('#date-range').trigger('datepicker-apply',
{
'value': DateRange,
'date1': startDate,
'date2': endDate
}
);
getStats(from / 1000, to / 1000);
}
function getStats(from, to) {
var deviceId = getUrlParameter('deviceId');
var deviceType = getUrlParameter('deviceType');
var requestData = new Object();
@ -148,7 +168,7 @@ function updateGraphs(stats) {
function scaleGraphs() {
var sliders = $('.right_handle');
if (sliders.length == 0){
if (sliders.length == 0) {
return;
}
@ -179,7 +199,9 @@ function scaleGraphs() {
function convertStatsToGraphData(stats) {
var graphData = new Array();
if(!stats){return graphData;}
if (!stats) {
return graphData;
}
for (var i = 0; i < stats.length; i++) {
graphData.push({x: parseInt(stats[i]['time']) * 1000, y: stats[i]['value']})
}
@ -188,65 +210,34 @@ function convertStatsToGraphData(stats) {
}
function convertStateStatsToGraphData(stats){
function convertStateStatsToGraphData(stats) {
var graphData = new Array();
if(!stats){return graphData;}
if (!stats) {
return graphData;
}
var yValue;
for(var i = 0; i < stats.length; i++){
yValue = -1;
if(stats[i]['value'].toUpperCase() == 'ON'){
yValue = 1;
}else if(stats[i]['value'].toUpperCase() == 'OFF'){
yValue = 0;
}
graphData.push({x: parseInt(stats[i]['time']) * 1000, y: yValue})
}
return graphData;
}
for (var i = 0; i < stats.length; i++) {
yValue = -1;
function arrayMin(arr) {
var len = arr.length, min = Infinity;
while (len--) {
if (arr[len] < min) {
min = arr[len];
if (stats[i]['value'].toUpperCase() == 'ON') {
yValue = 1;
} else if (stats[i]['value'].toUpperCase() == 'OFF') {
yValue = 0;
}
}
return min;
};
function arrayMax(arr) {
var len = arr.length, max = -Infinity;
while (len--) {
if (arr[len] > max) {
max = arr[len];
}
graphData.push({x: parseInt(stats[i]['time']) * 1000, y: yValue})
}
return max;
};
return graphData;
}
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);
function convertDate(date) {
var month = date.getMonth() + 1;
var day = date.getDate();
var hour=date.getHours();
var minute=date.getMinutes();
return date.getFullYear() + '-' + (('' + month).length < 2 ? '0' : '')
+ month + '-' + (('' + day).length < 2 ? '0' : '') + day +" "+ (('' + hour).length < 2 ? '0' : '')
+ hour +":"+(('' + minute).length < 2 ? '0' : '')+ minute;
}

3059
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/jquery.daterangepicker.js
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save