Merge pull request #237 from charithag/master

Enable group analytics
revert-70aa11f8
Ruwan 9 years ago
commit 93b1d618b6

@ -1,13 +1,12 @@
{{#zone "topCss"}} {{#zone "topCss"}}
{{css "css/analytics.css"}} {{css "css/analytics.css"}}
{{css "css/daterangepicker.css"}}
{{css "css/graph.css"}}
{{/zone}} {{/zone}}
{{unit "cdmf.unit.ui.title" pageTitle="Analytics"}} {{unit "cdmf.unit.ui.title" pageTitle="Analytics"}}
{{unit "cdmf.unit.ui.content.title" pageHeader=title}} {{unit "cdmf.unit.ui.content.title" pageHeader=title}}
{{unit "cdmf.unit.lib.service-invoker-utility"}} {{unit "cdmf.unit.lib.service-invoker-utility"}}
{{unit "cdmf.unit.lib.handlebars"}} {{unit "cdmf.unit.lib.handlebars"}}
{{unit "cdmf.unit.lib.rickshaw-graph"}}
{{#zone "breadcrumbs"}} {{#zone "breadcrumbs"}}
<li> <li>
@ -15,29 +14,16 @@
<i class="icon fw fw-home"></i> <i class="icon fw fw-home"></i>
</a> </a>
</li> </li>
{{#if groupName}} <li>
<li> <a href="{{@app.context}}/devices">
<a href="{{@app.context}}/groups"> Devices
Groups </a>
</a> </li>
</li> <li>
<li> <a href="{{@app.context}}/device/{{deviceType}}?id={{deviceId}}">
<a href="{{@app.context}}/devices?groupId={{groupId}}&groupName={{groupName}}"> {{deviceName}}
{{groupName}} </a>
</a> </li>
</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> <li>
<a href="#"> <a href="#">
Analytics Analytics
@ -52,28 +38,7 @@
<div class="col-lg-3 margin-top-double"> <div class="col-lg-3 margin-top-double">
<h1 class="grey ">{{deviceName}} Analytics</h1> <h1 class="grey ">{{deviceName}} Analytics</h1>
</div> </div>
<div id="rangeSliderWrapper" class="pull-right col-lg-9"> {{unit "cdmf.unit.analytics.date-range-picker"}}
<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> </div>
<hr> <hr>
<div class="clear"></div> <div class="clear"></div>
@ -83,7 +48,3 @@
</div> </div>
</div> </div>
{{/zone}} {{/zone}}
{{#zone "bottomJs"}}
{{js "js/jquery.daterangepicker.js"}}
{{js "js/graph_util.js"}}
{{/zone}}

@ -18,33 +18,12 @@
function onRequest(context) { function onRequest(context) {
var utility = require("/app/modules/utility.js").utility; var utility = require("/app/modules/utility.js").utility;
context.handlebars.registerHelper('equal', function (lvalue, rvalue, options) { var deviceType = context.uriParams.deviceType;
if (arguments.length < 3) {
throw new Error("Handlebars Helper equal needs 2 parameters");
}
if (lvalue != rvalue) {
return options.inverse(this);
} else {
return options.fn(this);
}
});
var groupName = request.getParameter("groupName");
var groupId = request.getParameter("groupId");
var deviceName = request.getParameter("deviceName"); var deviceName = request.getParameter("deviceName");
var deviceId = request.getParameter("deviceId"); var deviceId = request.getParameter("deviceId");
var deviceType = context.uriParams.deviceType;
var title = "Analytics";
if (groupName) {
title = "Group " + title;
} else {
title = "Device " + title;
}
return { return {
"deviceAnalyticsViewUnitName": utility.getTenantedDeviceUnitName(deviceType, "analytics-view"), "deviceAnalyticsViewUnitName": utility.getTenantedDeviceUnitName(deviceType, "analytics-view"),
"deviceType": deviceType, "deviceType": deviceType,
"title": title,
"groupName": groupName,
"groupId": groupId,
"deviceName": deviceName, "deviceName": deviceName,
"deviceId": deviceId "deviceId": deviceId
}; };

@ -54,10 +54,3 @@
margin-right: 20px; margin-right: 20px;
margin-left: 20px; margin-left: 20px;
} }
.date-range{
border: 1px solid #ccc;
}
#dateRangePickerContainer button.active{
background-color: #e6e6e6 !important;
}

@ -0,0 +1,52 @@
{{#zone "topCss"}}
{{css "css/analytics.css"}}
{{/zone}}
{{unit "cdmf.unit.ui.title" pageTitle="Analytics"}}
{{unit "cdmf.unit.ui.content.title" pageHeader=title}}
{{unit "cdmf.unit.lib.service-invoker-utility"}}
{{unit "cdmf.unit.lib.handlebars"}}
{{unit "cdmf.unit.lib.rickshaw-graph"}}
{{#zone "breadcrumbs"}}
<li>
<a href="{{@app.context}}/">
<i class="icon fw fw-home"></i>
</a>
</li>
<li>
<a href="{{@app.context}}/groups">
Groups
</a>
</li>
<li>
<a href="{{@app.context}}/devices?groupOwner={{groupOwner}}&groupName={{groupName}}">
{{groupName}}
</a>
</li>
<li>
<a href="#">
Analytics
</a>
</li>
{{/zone}}
{{#zone "content"}}
<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 ">{{groupName}} Analytics</h1>
</div>
{{unit "cdmf.unit.analytics.date-range-picker" deviceTypes=deviceTypes}}
</div>
<hr>
<div class="clear"></div>
<div id="div-chart">
{{#each deviceTypes}}
{{unit deviceAnalyticsViewUnitName devices=devices}}
{{/each}}
</div>
</div>
</div>
{{/zone}}

@ -0,0 +1,51 @@
/*
* 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 utility = require("/app/modules/utility.js").utility;
var groupModule = require("/app/modules/group.js").groupModule;
var groupName = context.uriParams.name;
var groupOwner = context.uriParams.owner;
var deviceTypes = [];
var devices = groupModule.getGroupDevices(groupName, groupOwner).data;
for (var i = 0; i < devices.length; i++) {
var hasDeviceType = false;
for (var j = 0; j < deviceTypes.length; j++) {
if (deviceTypes[j].type === devices[i].type) {
deviceTypes[j].devices.push(devices[i]);
hasDeviceType = true;
break;
}
}
if (!hasDeviceType) {
var deviceType = {};
deviceType.type = devices[i].type;
deviceType.devices = [];
deviceType.devices.push(devices[i]);
deviceType.deviceAnalyticsViewUnitName = utility.getTenantedDeviceUnitName(deviceType.type, "analytics-view");
deviceTypes.push(deviceType);
}
}
return {
"groupName": groupName,
"groupOwner": groupOwner,
"deviceTypes": deviceTypes
};
}

@ -0,0 +1,5 @@
{
"version": "1.0.0",
"uri": "/group/{owner}/{name}/analytics",
"layout": "cdmf.layout.default"
}

@ -0,0 +1,63 @@
/*
* 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;
}

@ -142,7 +142,7 @@ function loadGroups() {
'<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="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 Devices</span></a>'; '<span class="hidden-xs hidden-on-grid-view">View Devices</span></a>';
html += '<a href="analytics?groupName=' + row.name + '&groupOwner=' + row.owner + '" data-click-event="remove-form" class="btn padding-reduce-on-grid-view">' + html += '<a href="group/' + row.owner + '/' + row.name + '/analytics" 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="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></a>'; '<span class="hidden-xs hidden-on-grid-view">Analytics</span></a>';

@ -1,62 +0,0 @@
{{#each groups}}
<tr data-type="selectable" data-group-name="{{name}}" data-group-owner="{{owner}}">
<td class="remove-padding icon-only content-fill">
<div class="thumbnail icon">
<img class="square-element text fw "
src="public/cdmf.page.groups/images/group-icon.png"/>
</div>
</td>
<td class="fade-edge">
<h4>{{name}}</h4>
</td>
<td class="fade-edge remove-padding-top" data-search="{{owner}}"
data-display="{{owner}}"
data-grid-label="Owner">{{owner}}</td>
<td class="text-right content-fill text-left-on-grid-view no-wrap">
<a href="devices?groupName={{name}}&groupOwner={{owner}}"
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 Devices</span>
</a>
<a href="analytics?groupName={{name}}&groupOwner={{owner}}"
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>
</a>
<a href="#" data-click-event="remove-form"
class="btn padding-reduce-on-grid-view share-group-link"
data-group-name="{{name}}" data-group-owner="{{owner}}">
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-share fw-stack-1x"></i>
</span>
<span class="hidden-xs hidden-on-grid-view">Share</span>
</a>
<a href="#" data-click-event="remove-form"
class="btn padding-reduce-on-grid-view edit-group-link"
data-group-name="{{name}}" data-group-owner="{{owner}}"
data-group-description="{{description}}">
<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>
<a href="#" data-click-event="remove-form"
class="btn padding-reduce-on-grid-view remove-group-link"
data-group-name="{{name}}" data-group-owner="{{owner}}">
<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>
</a>
</td>
</tr>
{{/each}}

@ -0,0 +1,31 @@
{{#zone "topCss"}}
{{css "css/daterangepicker.css"}}
{{/zone}}
<span id="device-type-details" data-devicetypes="{{deviceTypes}}"></span>
<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>
{{#zone "bottomJs"}}
{{js "js/moment.js"}}
{{js "js/jquery.daterangepicker.js"}}
{{js "js/date-picker.js"}}
{{/zone}}

@ -0,0 +1,32 @@
/*
* 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 deviceTypes = context.unit.params.deviceTypes;
var deviceType = context.uriParams.deviceType;
var deviceTypesList = [];
if (deviceTypes) {
for (var i = 0; i < deviceTypes.length; i++) {
deviceTypesList.push(deviceTypes[i].type);
}
} else if (deviceType) {
deviceTypesList.push(deviceType);
}
return {"deviceTypes": stringify(deviceTypesList)};
}

@ -345,4 +345,17 @@ input.hour-range, input.minute-range {
#dateRangePickerContainer { #dateRangePickerContainer {
float: right; float: right;
} }
.date-range {
border: 1px solid #ccc;
}
#dateRangePickerContainer button.active {
background-color: #e6e6e6 !important;
}
#dateRangePickerContainer .btn-default:hover {
background-color: #b2b2b2;
border-color: #000000;
}

@ -28,9 +28,26 @@ var DateRange = convertDate(startDate) + " to " + convertDate(endDate);
$(document).ready(function () { $(document).ready(function () {
initDate(); initDate();
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;
}
};
$('#date-range').html(DateRange); $('#date-range').html(DateRange);
$('#date-range').dateRangePicker() $('#date-range').dateRangePicker(configObject)
.bind('datepicker-apply', function (event, dateRange) { .bind('datepicker-apply', function (event, dateRange) {
$(this).addClass('active'); $(this).addClass('active');
$(this).siblings().removeClass('active'); $(this).siblings().removeClass('active');
@ -83,8 +100,11 @@ function setDateTime(from, to) {
from += tzOffset; from += tzOffset;
to += tzOffset; to += tzOffset;
// the relevant import units needs to implement this. // Implement drawGraph_<device type name> method in your UI unit for analytics.
drawGraph(parseInt(from / 1000), parseInt(to / 1000)); var deviceTypes = $("#device-type-details").data("devicetypes");
for (var i = 0; i < deviceTypes.length; i++){
window["drawGraph_" + deviceTypes](parseInt(from / 1000), parseInt(to / 1000));
}
} }
function convertDate(date) { function convertDate(date) {

@ -1,20 +1,3 @@
/*
* 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 ($) { (function ($) {
/* /*

@ -1,21 +1,3 @@
/*
* 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.
*/
// daterangepicker.js // daterangepicker.js
// version : 0.0.5 // version : 0.0.5
// author : Chunlong Liu // author : Chunlong Liu

@ -232,6 +232,13 @@
position: relative; position: relative;
left: 40px; left: 40px;
height: 30px; height: 30px;
width: 97%;
top: 20px;
text-align: right;
}
.chartWrapper {
padding-top: 50px;
} }
/*detail*/ /*detail*/

@ -0,0 +1,8 @@
{{#zone "topCss"}}
{{css "css/graph.css"}}
{{/zone}}
{{#zone "bottomJs"}}
{{js "js/d3.min.js"}}
{{js "js/rickshaw.min.js"}}
{{/zone}}
Loading…
Cancel
Save