Update new analytics components and remove obsoletes.

revert-70aa11f8
charithag 9 years ago
parent 4c50d4842d
commit 1e709bc394

@ -1,42 +0,0 @@
{{unit "cdmf.unit.ui.title" pageTitle="Analytics"}}
{{unit "cdmf.unit.ui.content.title" pageHeader=title}}
{{#zone "breadcrumbs"}}
<li>
<a href="{{@app.context}}/">
<i class="icon fw fw-home"></i>
</a>
</li>
{{#if groupName}}
<li>
<a href="{{@app.context}}/groups">
Groups
</a>
</li>
<li>
<a href="{{@app.context}}/devices?groupId={{groupId}}&groupName={{groupName}}">
{{groupName}}
</a>
</li>
{{else}}
<li>
<a href="{{@app.context}}/devices">
Devices
</a>
</li>
<li>
<a href="{{@app.context}}/device/{{deviceType}}?id={{deviceId}}">
{{deviceName}}
</a>
</li>
{{/if}}
<li>
<a href="#">
Analytics
</a>
</li>
{{/zone}}
{{#zone "content"}}
{{unit "cdmf.unit.analytics"}}
{{/zone}}

@ -1,39 +0,0 @@
/*
* Copyright (c) 2016, 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.
*/
function onRequest(context) {
var groupName = request.getParameter("groupName");
var groupId = request.getParameter("groupId");
var deviceName = request.getParameter("deviceName");
var deviceId = request.getParameter("deviceId");
var deviceType = request.getParameter("deviceType");
var title = "Analytics";
if (groupName) {
title = "Group " + title;
} else {
title = "Device " + title;
}
return {
"title": title,
"groupName": groupName,
"groupId": groupId,
"deviceName": deviceName,
"deviceId": deviceId,
"deviceType": deviceType
};
}

@ -50,7 +50,7 @@
<div class=" margin-top-double">
<div class="row padding-top-double padding-bottom-double margin-bottom-double">
<div class="col-lg-3 margin-top-double">
<h1 class="grey ">{{deviceType}} Analytics</h1>
<h1 class="grey ">{{deviceName}} Analytics</h1>
</div>
<div id="rangeSliderWrapper" class="pull-right col-lg-9">
<div id="dateRangePickerContainer">

@ -17,6 +17,7 @@
*/
function onRequest(context) {
var utility = require("/app/modules/utility.js").utility;
context.handlebars.registerHelper('equal', function (lvalue, rvalue, options) {
if (arguments.length < 3)
throw new Error("Handlebars Helper equal needs 2 parameters");
@ -26,10 +27,24 @@ function onRequest(context) {
return options.fn(this);
}
});
var groupName = request.getParameter("groupName");
var groupId = request.getParameter("groupId");
var deviceName = request.getParameter("deviceName");
var deviceId = request.getParameter("deviceId");
var deviceType = context.uriParams.deviceType;
var title = "Analytics";
if (groupName) {
title = "Group " + title;
} else {
title = "Device " + title;
}
return {
"deviceAnalyticsViewUnitName": "cdmf.unit.device.type." + deviceType + ".analytics-view",
"deviceType": deviceType
"deviceAnalyticsViewUnitName": utility.getTenantedDeviceUnitName(deviceType, "analytics-view"),
"deviceType": deviceType,
"title": title,
"groupName": groupName,
"groupId": groupId,
"deviceName": deviceName,
"deviceId": deviceId
};
}

@ -1,5 +1,5 @@
{
"version": "1.0.0",
"uri": "/device/analytics/{deviceType}",
"uri": "/device/{deviceType}/analytics",
"layout": "cdmf.layout.default"
}

@ -300,7 +300,7 @@ function loadDevices(searchType, searchParam){
html = '<a href="device/' + deviceType + '?id=' + deviceIdentifier + '" data-click-event="remove-form"' +
' class="btn padding-reduce-on-grid-view"><span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i>' +
'<i class="fw fw-view fw-stack-1x"></i></span><span class="hidden-xs hidden-on-grid-view">View</span></a>';
html += '<a href="analytics?deviceId=' + deviceIdentifier + '&deviceType=' + deviceType + '&deviceName=' + row.name + '" ' +
html += '<a href="device/' + deviceType + '/analytics?deviceId=' + deviceIdentifier + '&deviceName=' + row.name + '" ' +
'data-click-event="remove-form" class="btn padding-reduce-on-grid-view"><span class="fw-stack">' +
'<i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-statistics fw-stack-1x"></i></span>' +
'<span class="hidden-xs hidden-on-grid-view">Analytics</span>';
@ -309,6 +309,11 @@ function loadDevices(searchType, searchParam){
'<span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i>' +
'<i class="fw fw-edit fw-stack-1x"></i></span>' +
'<span class="hidden-xs hidden-on-grid-view">Edit</span></a>';
html += '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view remove-device-link" ' +
'data-deviceid="' + deviceIdentifier + '" data-devicetype="' + deviceType + '" data-devicename="' + row.name + '">' +
'<span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i>' +
'<i class="fw fw-delete fw-stack-1x"></i></span>' +
'<span class="hidden-xs hidden-on-grid-view">Delete</span>';
}
return html;
}}

@ -1,48 +0,0 @@
{{#zone "topCss"}}
{{css "css/analytics.css"}}
{{css "css/daterangepicker.css"}}
{{css "css/graph.css"}}
{{/zone}}
<span id="request-group-id" data-groupid="{{groupId}}"></span>
<div class="container container-bg white-bg">
<div class=" margin-top-double">
<div class="row padding-top-double padding-bottom-double margin-bottom-double">
<div class="col-lg-3 margin-top-double">
<h1 class="grey ">{{title}}</h1>
</div>
<div id="rangeSliderWrapper" class="pull-right col-lg-9">
<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="h12-btn" type="button"
class="btn btn-default date-range">12 Hours
</button>
<button id="h24-btn" type="button"
class="btn btn-default date-range">24 Hours
</button>
<button id="h48-btn" type="button"
class="btn btn-default date-range">48 Hours
</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>
</div>
</div>
</div>
<hr>
<div class="clear"></div>
<div id="div-chart">
</div>
</div>
</div>
{{#zone "bottomJs"}}
{{js "js/d3.min.js"}}
{{js "js/rickshaw.min.js"}}
{{js "js/moment.min.js"}}
{{js "js/jquery.daterangepicker.js"}}
{{js "js/graph_util.js"}}
{{/zone}}

@ -1,35 +0,0 @@
/*
* Copyright (c) 2016, 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.
*/
function onRequest(context) {
var groupId = request.getParameter("groupId");
var title;
if (groupId) {
title = request.getParameter("groupName") + " Group";
} else {
groupId = 0;
var deviceId = request.getParameter("deviceId");
var deviceType = request.getParameter("deviceType");
var deviceName = request.getParameter("deviceName");
//title = deviceModule.getDevice(deviceType, deviceId).name;
title = deviceName;
}
return {"title": title, "groupId": groupId};
}

@ -1,63 +0,0 @@
/*
* Copyright (c) 2016, 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.
*/
#rangeSliderWrapper {
margin-top: 25px;
}
#chart {
display: inline-block;
}
#legend {
display: inline-block;
position: relative;
left: 8px;
}
#legend_container {
position: absolute;
right: 0;
bottom: 26px;
width: 0;
}
#chart_container {
float: left;
position: relative;
}
.ast-container {
padding-bottom: 30px;
}
.container {
width: auto;
}
.shrink {
margin-right: 20px;
margin-left: 20px;
}
.date-range{
border: 1px solid #ccc;
}
#dateRangePickerContainer button.active{
background-color: #e6e6e6 !important;
}

@ -1,348 +0,0 @@
/*
* Copyright (c) 2016, 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.
*/
.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;
}

@ -1,463 +0,0 @@
/*
* Copyright (c) 2016, 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.
*/
/* graph */
.rickshaw_graph {
position: relative;
}
.rickshaw_graph svg {
display: block;
overflow: hidden;
}
/* ticks */
.rickshaw_graph .x_tick {
position: absolute;
top: 0;
bottom: 0;
width: 0;
border-left: 1px dotted rgba(0, 0, 0, 0.2);
pointer-events: none;
}
.rickshaw_graph .x_tick .title {
position: absolute;
font-size: 12px;
font-family: Arial, sans-serif;
opacity: 0.5;
white-space: nowrap;
margin-left: 3px;
bottom: -20px;
height: auto;
border-bottom: none;
}
/* annotations */
.rickshaw_annotation_timeline {
height: 1px;
border-top: 1px solid #e0e0e0;
margin-top: 10px;
position: relative;
}
.rickshaw_annotation_timeline .annotation {
position: absolute;
height: 6px;
width: 6px;
margin-left: -2px;
top: -3px;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.25);
}
.rickshaw_graph .annotation_line {
position: absolute;
top: 0;
bottom: -6px;
width: 0;
border-left: 2px solid rgba(0, 0, 0, 0.3);
display: none;
}
.rickshaw_graph .annotation_line.active {
display: block;
}
.rickshaw_graph .annotation_range {
background: rgba(0, 0, 0, 0.1);
display: none;
position: absolute;
top: 0;
bottom: -6px;
}
.rickshaw_graph .annotation_range.active {
display: block;
}
.rickshaw_graph .annotation_range.active.offscreen {
display: none;
}
.rickshaw_annotation_timeline .annotation .content {
background: white;
color: black;
opacity: 0.9;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
border-radius: 3px;
position: relative;
z-index: 20;
font-size: 12px;
padding: 6px 8px 8px;
top: 18px;
left: -11px;
width: 160px;
display: none;
cursor: pointer;
}
.rickshaw_annotation_timeline .annotation .content:before {
content: "\25b2";
position: absolute;
top: -11px;
color: white;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.8);
}
.rickshaw_annotation_timeline .annotation.active,
.rickshaw_annotation_timeline .annotation:hover {
background-color: rgba(0, 0, 0, 0.8);
cursor: none;
}
.rickshaw_annotation_timeline .annotation .content:hover {
z-index: 50;
}
.rickshaw_annotation_timeline .annotation.active .content {
display: block;
}
.rickshaw_annotation_timeline .annotation:hover .content {
display: block;
z-index: 50;
}
.rickshaw_graph .y_axis,
.rickshaw_graph .x_axis_d3 {
fill: none;
}
.rickshaw_graph .y_ticks .tick line,
.rickshaw_graph .x_ticks_d3 .tick {
stroke: rgba(0, 0, 0, 0.16);
stroke-width: 2px;
shape-rendering: crisp-edges;
pointer-events: none;
}
.rickshaw_graph .y_grid .tick,
.rickshaw_graph .x_grid_d3 .tick {
z-index: -1;
stroke: rgba(0, 0, 0, 0.20);
stroke-width: 1px;
stroke-dasharray: 1 1;
}
.rickshaw_graph .y_grid .tick[data-y-value="0"] {
stroke-dasharray: 1 0;
}
.rickshaw_graph .y_grid path,
.rickshaw_graph .x_grid_d3 path {
fill: none;
stroke: none;
}
.rickshaw_graph .y_ticks path,
.rickshaw_graph .x_ticks_d3 path {
fill: none;
stroke: #808080;
}
.rickshaw_graph .y_ticks text,
.rickshaw_graph .x_ticks_d3 text {
opacity: 0.5;
font-size: 12px;
pointer-events: none;
}
.rickshaw_graph .x_tick.glow .title,
.rickshaw_graph .y_ticks.glow text {
fill: black;
color: black;
text-shadow: -1px 1px 0 rgba(255, 255, 255, 0.1),
1px -1px 0 rgba(255, 255, 255, 0.1),
1px 1px 0 rgba(255, 255, 255, 0.1),
0 1px 0 rgba(255, 255, 255, 0.1),
0 -1px 0 rgba(255, 255, 255, 0.1),
1px 0 0 rgba(255, 255, 255, 0.1),
-1px 0 0 rgba(255, 255, 255, 0.1),
-1px -1px 0 rgba(255, 255, 255, 0.1);
}
.rickshaw_graph .x_tick.inverse .title,
.rickshaw_graph .y_ticks.inverse text {
fill: white;
color: white;
text-shadow: -1px 1px 0 rgba(0, 0, 0, 0.8),
1px -1px 0 rgba(0, 0, 0, 0.8),
1px 1px 0 rgba(0, 0, 0, 0.8),
0 1px 0 rgba(0, 0, 0, 0.8),
0 -1px 0 rgba(0, 0, 0, 0.8),
1px 0 0 rgba(0, 0, 0, 0.8),
-1px 0 0 rgba(0, 0, 0, 0.8),
-1px -1px 0 rgba(0, 0, 0, 0.8);
}
.custom_rickshaw_graph {
position: relative;
left: 40px;
}
.custom_y_axis {
position: absolute;
width: 40px;
}
.custom_slider {
left: 40px;
}
.custom_x_axis {
position: relative;
left: 40px;
height: 30px;
}
/*detail*/
.rickshaw_graph .detail {
pointer-events: none;
position: absolute;
top: 0;
z-index: 2;
background: rgba(0, 0, 0, 0.1);
bottom: 0;
width: 1px;
transition: opacity 0.25s linear;
-moz-transition: opacity 0.25s linear;
-o-transition: opacity 0.25s linear;
-webkit-transition: opacity 0.25s linear;
}
.rickshaw_graph .detail.inactive {
opacity: 0;
}
.rickshaw_graph .detail .item.active {
opacity: 1;
}
.rickshaw_graph .detail .x_label {
font-family: Arial, sans-serif;
border-radius: 3px;
padding: 6px;
opacity: 0.5;
border: 1px solid #e0e0e0;
font-size: 12px;
position: absolute;
background: white;
white-space: nowrap;
}
.rickshaw_graph .detail .x_label.left {
left: 0;
}
.rickshaw_graph .detail .x_label.right {
right: 0;
}
.rickshaw_graph .detail .item {
position: absolute;
z-index: 2;
border-radius: 3px;
padding: 0.25em;
font-size: 12px;
font-family: Arial, sans-serif;
opacity: 0;
background: rgba(0, 0, 0, 0.4);
color: white;
border: 1px solid rgba(0, 0, 0, 0.4);
margin-left: 1em;
margin-right: 1em;
margin-top: -1em;
white-space: nowrap;
}
.rickshaw_graph .detail .item.left {
left: 0;
}
.rickshaw_graph .detail .item.right {
right: 0;
}
.rickshaw_graph .detail .item.active {
opacity: 1;
background: rgba(0, 0, 0, 0.8);
}
.rickshaw_graph .detail .item:after {
position: absolute;
display: block;
width: 0;
height: 0;
content: "";
border: 5px solid transparent;
}
.rickshaw_graph .detail .item.left:after {
top: 1em;
left: -5px;
margin-top: -5px;
border-right-color: rgba(0, 0, 0, 0.8);
border-left-width: 0;
}
.rickshaw_graph .detail .item.right:after {
top: 1em;
right: -5px;
margin-top: -5px;
border-left-color: rgba(0, 0, 0, 0.8);
border-right-width: 0;
}
.rickshaw_graph .detail .dot {
width: 4px;
height: 4px;
margin-left: -3px;
margin-top: -3.5px;
border-radius: 5px;
position: absolute;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
box-sizing: content-box;
-moz-box-sizing: content-box;
background: white;
border-width: 2px;
border-style: solid;
display: none;
background-clip: padding-box;
}
.rickshaw_graph .detail .dot.active {
display: block;
}
/*legend*/
.rickshaw_legend {
font-family: Arial;
font-size: 12px;
color: white;
background: #404040;
display: inline-block;
padding: 12px 5px;
border-radius: 2px;
position: relative;
float: right;
}
.rickshaw_legend:hover {
z-index: 10;
}
.rickshaw_legend .swatch {
width: 10px;
height: 10px;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.rickshaw_legend .line {
clear: both;
line-height: 140%;
padding-right: 15px;
}
.rickshaw_legend .line .swatch {
display: inline-block;
margin-right: 3px;
border-radius: 2px;
}
.rickshaw_legend .label {
margin: 0;
white-space: nowrap;
display: inline;
font-size: inherit;
background-color: transparent;
color: inherit;
font-weight: normal;
line-height: normal;
padding: 0;
text-shadow: none;
}
.rickshaw_legend .action:hover {
opacity: 0.6;
}
.rickshaw_legend .action {
margin-right: 0.2em;
opacity: 0.2;
cursor: pointer;
font-size: 14px;
}
.rickshaw_legend .line.disabled {
opacity: 0.4;
}
.rickshaw_legend ul {
list-style-type: none;
padding: 0;
margin: 2px;
cursor: pointer;
}
.rickshaw_legend li {
padding: 0 0 0 2px;
min-width: 80px;
white-space: nowrap;
}
.rickshaw_legend li:hover {
background: rgba(255, 255, 255, 0.08);
border-radius: 3px;
}
.rickshaw_legend li:active {
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
}
.legend {
display: inline-block;
position: relative;
left: 8px;
}
.legend_container {
float: right;
padding-right: 10px;
width: 0;
z-index: 1;
position: relative;
opacity: 0.7;
}
.spaced {
margin-top: 20px !important;
}

@ -1,588 +0,0 @@
/*
* Copyright (c) 2016, 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 fromDate, toDate, currentDay = new Date();
var startDate = new Date(currentDay.getTime() - (60 * 60 * 24 * 100));
var endDate = new Date(currentDay.getTime());
var palette = new Rickshaw.Color.Palette({scheme: 'classic9'});
var groupId, stats;
// create a custom bar renderer that shift bars
Rickshaw.Graph.Renderer.BinaryBar = Rickshaw.Class.create(Rickshaw.Graph.Renderer.Bar, {
name: 'binary_bar',
render: function (args) {
args = args || {};
var graph = this.graph;
var series = args.series || graph.series;
var vis = args.vis || graph.vis;
vis.selectAll('*').remove();
var barWidth = this.barWidth(series.active()[0]);
var barXOffset = 0;
var activeSeriesCount = series.filter(function (s) {
return !s.disabled;
}).length;
var seriesBarWidth = this.unstack ? barWidth / activeSeriesCount : barWidth;
var transform = function (d) {
// add a matrix transform for negative values
var matrix = [1, 0, 0, (d.y < 0 ? -1 : 1), 0, (d.y < 0 ? graph.y.magnitude(Math.abs(d.y)) * 2 : 0)];
return "matrix(" + matrix.join(',') + ")";
};
var index = 0;
series.forEach(function (series) {
if (series.disabled) {
return;
}
var nodes = vis.selectAll("path")
.data(series.stack.filter(function (d) {
return d.y !== null
}))
.enter().append("svg:rect")
.attr("x", function (d) {
return graph.x(d.x) + barXOffset
})
.attr("y", function (d) {
return ((graph.y(index + Math.abs(d.y))) * (d.y < 0 ? -1 : 1 ))
})
.attr("width", seriesBarWidth)
.attr("height", function (d) {
return graph.y.magnitude(Math.abs(d.y))
})
.attr("transform", transform);
index++;
Array.prototype.forEach.call(nodes[0], function (n) {
n.setAttribute('fill', series.color);
});
if (this.unstack) {
barXOffset += seriesBarWidth;
}
}, this);
}
});
function initDate() {
currentDay = new Date();
}
var configObject = {
startOfWeek: 'monday',
separator: ' to ',
format: 'YYYY-MM-DD HH:mm',
autoClose: false,
time: {
enabled: true
},
shortcuts: 'hide',
endDate: currentDay,
maxDays: 2,
getValue: function () {
return this.value;
},
setValue: function (s) {
this.value = s;
}
};
var DateRange = convertDate(startDate) + " " + configObject.separator + " " + convertDate(endDate);
$(document).ready(function () {
initDate();
groupId = getQueryParams().groupId;
$('#date-range').html(DateRange);
$('#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;
getStats(fromDate, toDate);
}
);
getDateTime(currentDay.getTime() - 3600000, currentDay.getTime());
$('#hour-btn').addClass('active');
});
//hour
$('#hour-btn').on('click', function () {
initDate();
getDateTime(currentDay.getTime() - 3600000, currentDay.getTime());
});
//12 hours
$('#h12-btn').on('click', function () {
initDate();
getDateTime(currentDay.getTime() - (3600000 * 12), currentDay.getTime());
});
//24 hours
$('#h24-btn').on('click', function () {
initDate();
getDateTime(currentDay.getTime() - (3600000 * 24), currentDay.getTime());
});
//48 hours
$('#h48-btn').on('click', function () {
initDate();
getDateTime(currentDay.getTime() - (3600000 * 48), currentDay.getTime());
});
$('body').on('click', '.btn-group button', function (e) {
$(this).addClass('active');
$(this).siblings().removeClass('active');
});
function getDateTime(from, to) {
fromDate = from;
toDate = to;
startDate = new Date(from);
endDate = new Date(to);
DateRange = convertDate(startDate) + " " + configObject.separator + " " + convertDate(endDate);
$('#date-range').html(DateRange);
getStats(from / 1000, to / 1000);
}
function getStats(from, to) {
var tzOffset = new Date().getTimezoneOffset() * 60 / 1000;
from += tzOffset;
to += tzOffset;
$('#div-chart').html('<div style="height:200px" data-state="loading" ' +
'data-loading-text="Loading..." data-loading-style="icon-only" ' +
'data-loading-inverse="true"></div>');
var requestData = {};
var getStatsRequest;
if (from) {
requestData['from'] = parseInt(from);
}
if (to) {
requestData['to'] = parseInt(to);
}
if (groupId && groupId != "0") {
requestData['groupId'] = groupId;
getStatsRequest = $.ajax({
url: "api/stats/group",
method: "GET",
data: requestData
});
} else {
var deviceId = getQueryParams().deviceId;
var deviceType = getQueryParams().deviceType;
requestData['deviceId'] = deviceId;
requestData['deviceType'] = deviceType;
getStatsRequest = $.ajax({
url: "api/stats",
method: "GET",
data: requestData
});
}
getStatsRequest.done(function (data) {
stats = data;
updateGraphs();
});
getStatsRequest.fail(function (jqXHR, textStatus) {
console.log("Request failed: " + jqXHR.statusText);
});
}
$(window).on('resize', function () {
if (stats) {
updateGraphs();
}
});
function updateGraphs() {
console.log(stats);
var graphId = 1;
$('#div-chart').html("");
for (var stats_data in stats) {
switch (stats[stats_data][0]["stream"]["ui_unit"]["name"]) {
case "cdmf.unit.analytics.line-chart":
$('#div-chart').append("<div class='row margin-double shrink'><div>" +
"<h2 class='grey'>" + stats[stats_data][0]["stream"]["name"] +
"</h2><hr><div id='canvas-wrapper" + graphId +
"'></div></div><hr class='spaced'></div>");
drawLineGraph(graphId++, stats[stats_data]);
break;
case "cdmf.unit.analytics.bar-chart":
$('#div-chart').append("<div class='row margin-double shrink'><div><h2 class='grey'>" +
stats[stats_data][0]["stream"]["name"] +
"</h2><hr><div id='canvas-wrapper" + graphId + "'></div></div>" +
"<hr class='spaced'></div>");
drawBarGraph(graphId++, stats[stats_data]);
break;
}
}
scaleGraphs();
}
function drawLineGraph(graphId, chartDataRaw) {
var chartWrapperElmId = "#canvas-wrapper" + graphId;
var graphWidth = $(chartWrapperElmId).width() - 50;
if (chartDataRaw.length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
}
var chartDiv = "chart" + graphId;
var sliderDiv = "slider" + graphId;
var y_axis = "y_axis" + graphId;
$(chartWrapperElmId).html("").html('<div id = "' + y_axis + '" class="custom_y_axis"></div>' +
'<div class="legend_container" id="legend_container' +
graphId + '"><div id="smoother' + graphId +
'" title="Smoothing"></div><div class="legend" id="legend' +
graphId + '"></div></div><div id="' + chartDiv +
'" class="custom_rickshaw_graph"></div>' +
'<div class="custom_x_axis"></div><div id="' + sliderDiv +
'" class="custom_slider"></div>');
var graphConfig = {
element: document.getElementById(chartDiv),
width: graphWidth,
height: 400,
strokeWidth: 2,
renderer: 'line',
interpolation: "linear",
unstack: true,
stack: false,
xScale: d3.time.scale(),
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0.2},
series: []
};
var tzOffset = new Date().getTimezoneOffset() * 60;
var min = Number.MAX_VALUE;
var max = Number.MIN_VALUE;
var range_min = 99999, range_max = 0;
for (var i = 0; i < chartDataRaw.length; i++) {
var chartData = [];
if (chartDataRaw[i].stats.length > 0) {
var max_val = parseInt(chartDataRaw[i].stats[0].value);
var min_val = max_val;
for (var j = 0; j < chartDataRaw[i].stats.length; j++) {
var y_val = parseInt(chartDataRaw[i].stats[j].value);
if (y_val > max_val) {
max_val = y_val;
} else if (y_val < min_val) {
min_val = y_val;
}
chartData.push({
x: parseInt(chartDataRaw[i].stats[j].time) - tzOffset,
y: y_val
});
}
if (range_max < max_val) {
range_max = max_val;
}
if (range_min > min_val) {
range_min = min_val;
}
graphConfig['series'].push({
'color': palette.color(),
'data': summerizeLine(chartData),
'name': chartDataRaw[i].device,
'scale': d3.scale.linear().domain(
[Math.min(min, min_val) - 5,
Math.max(max, max_val) + 5]).nice()
});
}
}
if (graphConfig['series'].length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
}
var graph = new Rickshaw.Graph(graphConfig);
graph.render();
var xAxis = new Rickshaw.Graph.Axis.Time({
graph: graph
});
xAxis.render();
var yAxis = new Rickshaw.Graph.Axis.Y.Scaled({
graph: graph,
orientation: 'left',
element: document.getElementById(y_axis),
width: 40,
height: 410,
'scale': d3.scale.linear().domain([Math.min(min, range_min), Math.max(max, range_max)]).nice()
});
yAxis.render();
var slider = new Rickshaw.Graph.RangeSlider.Preview({
graph: graph,
element: document.getElementById(sliderDiv)
});
var legend = new Rickshaw.Graph.Legend({
graph: graph,
element: document.getElementById('legend' + graphId)
});
var hoverDetail = new Rickshaw.Graph.HoverDetail({
graph: graph,
formatter: function (series, x, y) {
var date = '<span class="date">' +
moment((x + tzOffset) * 1000).format('Do MMM YYYY h:mm:ss a') + '</span>';
var swatch = '<span class="detail_swatch" style="background-color: ' +
series.color + '"></span>';
return swatch + series.name + ": " + parseInt(y) + '<br>' + date;
}
});
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
graph: graph,
legend: legend
});
var order = new Rickshaw.Graph.Behavior.Series.Order({
graph: graph,
legend: legend
});
var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight({
graph: graph,
legend: legend
});
}
function drawBarGraph(graphId, chartDataRaw) {
var chartWrapperElmId = "#canvas-wrapper" + graphId;
var graphWidth = $(chartWrapperElmId).width() - 50;
if (chartDataRaw.length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
}
var chartDiv = "chart" + graphId;
var sliderDiv = "slider" + graphId;
var y_axis = "y_axis" + graphId;
$(chartWrapperElmId).html("").html('<div id = "' + y_axis + '" class="custom_y_axis"></div>' +
'<div class="legend_container" id="legend_container' +
graphId + '"><div id="smoother' + graphId +
'" title="Smoothing"></div><div class="legend" id="legend' +
graphId + '"></div></div><div id="' + chartDiv +
'" class="custom_rickshaw_graph"></div>' +
'<div class="custom_x_axis"></div><div id="' + sliderDiv +
'" class="custom_slider"></div>');
var graphConfig = {
element: document.getElementById(chartDiv),
width: graphWidth,
height: 50 * chartDataRaw.length,
strokeWidth: 0.5,
renderer: 'binary_bar',
offset: 'zero',
xScale: d3.time.scale(),
padding: {top: 0.2, left: 0.0, right: 0.0, bottom: 0.2},
series: []
};
var tzOffset = new Date().getTimezoneOffset() * 60;
for (var i = 0; i < chartDataRaw.length; i++) {
var chartData = [];
if (chartDataRaw[i].stats.length > 0) {
for (var j = 0; j < chartDataRaw[i].stats.length; j++) {
chartData.push({
x: parseInt(chartDataRaw[i].stats[j].time) - tzOffset,
y: parseInt(chartDataRaw[i].stats[j].value > 0 ? 1 : 0)
});
}
graphConfig['series'].push({
'color': palette.color(),
'data': summerizeBar(chartData),
'name': chartDataRaw[i].device
});
}
}
if (graphConfig['series'].length == 0) {
$(chartWrapperElmId).html("No data available...");
return;
}
var graph = new Rickshaw.Graph(graphConfig);
graph.registerRenderer(new Rickshaw.Graph.Renderer.BinaryBar({graph: graph}));
graph.render();
var xAxis = new Rickshaw.Graph.Axis.Time({
graph: graph
});
xAxis.render();
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
orientation: 'left',
element: document.getElementById(y_axis),
width: 40,
height: 55 * chartDataRaw.length,
tickFormat: function (y) {
return '';
}
});
yAxis.render();
var slider = new Rickshaw.Graph.RangeSlider.Preview({
graph: graph,
element: document.getElementById(sliderDiv)
});
var legend = new Rickshaw.Graph.Legend({
graph: graph,
element: document.getElementById('legend' + graphId)
});
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
graph: graph,
legend: legend
});
var order = new Rickshaw.Graph.Behavior.Series.Order({
graph: graph,
legend: legend
});
var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight({
graph: graph,
legend: legend
});
}
function scaleGraphs() {
var sliders = $('.right_handle');
if (sliders.length == 0) {
return;
}
var graphWidth = 0;
for (var i = 1; i < 10; i++) {
if ($('#canvas-wrapper' + i).length) {
graphWidth = $('#canvas-wrapper' + i).width() - 50;
break;
}
}
if (graphWidth <= 0) {
return;
}
//Scale graphs
var sliderX = graphWidth * 60 * 60000 / (toDate - fromDate);
if (sliderX < graphWidth) {
// fake handle move
if (sliderX < 50) {
sliderX = 50;
}
var edown = document.createEvent("HTMLEvents");
edown.initEvent("mousedown", true, true);
edown.clientX = graphWidth;
var emove = document.createEvent("HTMLEvents");
emove.initEvent("mousemove", true, true);
emove.clientX = sliderX;
var eup = document.createEvent("HTMLEvents");
eup.initEvent("mouseup", true, true);
for (var slider in sliders) {
sliders[slider].dispatchEvent(edown);
document.dispatchEvent(emove);
document.dispatchEvent(eup);
}
}
}
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;
}
function summerizeLine(data) {
if (data.length > 1500) {
var nData = [];
var i = 1;
while (i < data.length) {
var t_avg = (data[i - 1].x + data[i].x) / 2;
var v_avg = (data[i - 1].y + data[i].y) / 2;
nData.push({x: t_avg, y: v_avg});
i += 2;
}
return summerizeLine(nData);
} else {
return data;
}
}
function summerizeBar(data) {
if (data.length > 1500) {
var nData = [];
var i = 1;
while (i < data.length - 1) {
var t_avg = (data[i - 1].x + data[i].x) / 2;
var v_avg = (data[i - 1].y + data[i].y + data[i + 1].y) / 3;
nData.push({x: t_avg, y: Math.round(v_avg)});
i += 2;
}
return summerizeBar(nData);
} else {
return data;
}
}
function getQueryParams() {
var qs = document.location.search.split('+').join(' ');
var params = {},
tokens,
re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs)) {
params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
}
return params;
}
Loading…
Cancel
Save