ayyoob
9 years ago
parent
e3f117e8fe
commit
d128804b04
@ -0,0 +1,471 @@
|
||||
/*
|
||||
* 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;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.custom_slider {
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.custom_x_axis {
|
||||
position: relative;
|
||||
left: 40px;
|
||||
height: 30px;
|
||||
width: 97%;
|
||||
top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.chartWrapper {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
/*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;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,112 @@
|
||||
/*
|
||||
* 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 ws;
|
||||
$(window).load(function () {
|
||||
var websocketUrl = $("#div-chart").data("websocketurl");
|
||||
connect(websocketUrl)
|
||||
});
|
||||
|
||||
$(window).unload(function() {
|
||||
disconnect();
|
||||
});
|
||||
|
||||
|
||||
// set up our data series with 150 random data points
|
||||
|
||||
var graph = new Rickshaw.Graph({
|
||||
element: document.getElementById("chart"),
|
||||
width: $("#chartWrapper").width() - 50,
|
||||
height: 300,
|
||||
renderer: "line",
|
||||
padding: {top: 0.2, left: 0.0, right: 0.0, bottom: 0.2},
|
||||
min :0,
|
||||
max : 80,
|
||||
series: new Rickshaw.Series.FixedDuration([{
|
||||
name: 'one', color: 'steelblue'
|
||||
}], undefined, {
|
||||
timeInterval: 1000,
|
||||
maxDataPoints: 10,
|
||||
timeBase: new Date().getTime() / 1000
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
|
||||
graph.render();
|
||||
|
||||
|
||||
var time = new Rickshaw.Fixtures.Time();
|
||||
var seconds = time.unit('second');
|
||||
|
||||
var xAxis = new Rickshaw.Graph.Axis.Time({
|
||||
graph: graph,
|
||||
timeUnit: seconds
|
||||
});
|
||||
|
||||
xAxis.render();
|
||||
|
||||
new Rickshaw.Graph.Axis.Y({
|
||||
graph: graph,
|
||||
orientation: 'left',
|
||||
height: 300,
|
||||
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
|
||||
element: document.getElementById('y_axis')
|
||||
});
|
||||
|
||||
new Rickshaw.Graph.Legend({
|
||||
graph: graph,
|
||||
element: document.getElementById('legend')
|
||||
});
|
||||
|
||||
new Rickshaw.Graph.HoverDetail({
|
||||
graph: graph,
|
||||
xFormatter: function(x) { return x + "seconds" },
|
||||
yFormatter: function(y) { return Math.floor(y) + " C" }
|
||||
});
|
||||
|
||||
|
||||
|
||||
//websocket connection
|
||||
function connect(target) {
|
||||
if ('WebSocket' in window) {
|
||||
ws = new WebSocket(target);
|
||||
} else if ('MozWebSocket' in window) {
|
||||
ws = new MozWebSocket(target);
|
||||
} else {
|
||||
console.log('WebSocket is not supported by this browser.');
|
||||
}
|
||||
if (ws) {
|
||||
ws.onmessage = function (event) {
|
||||
console.log('Received: ' + event.data);
|
||||
var dataPoint = JSON.parse(event.data);
|
||||
var data = {
|
||||
one: parseFloat(dataPoint[5])
|
||||
};
|
||||
graph.series.addData(data);
|
||||
graph.render();
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function disconnect() {
|
||||
if (ws != null) {
|
||||
ws.close();
|
||||
ws = null;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,32 @@
|
||||
|
||||
{{#zone "topCss"}}
|
||||
{{css "css/graph.css"}}
|
||||
{{/zone}}
|
||||
<span id="details" data-devicetype="{{device.type}}" data-deviceid="{{device.deviceIdentifier}}"
|
||||
data-appcontext="{{@app.context}}"></span>
|
||||
<div id="chartWrapper">
|
||||
</div>
|
||||
<div id="div-chart" data-websocketurl="{{websocketEndpoint}}">
|
||||
<div class="chartWrapper" id="chartWrapper"><div id="y_axis" class="custom_y_axis">Temperature</div>
|
||||
<div class="legend_container">
|
||||
<div id="smoother'" title="Smoothing"></div>
|
||||
<div id="legend'"></div>
|
||||
</div>
|
||||
<div id="chart" class="custom_rickshaw_graph"></div>
|
||||
<div class="custom_x_axis">Time</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="padding-left"
|
||||
href="{{@app.context}}/analytics?deviceId={{device.deviceIdentifier}}&deviceType={{device.type}}&deviceName={{device.name}}">
|
||||
<span class="fw-stack">
|
||||
<i class="fw fw-ring fw-stack-2x"></i>
|
||||
<i class="fw fw-statistics fw-stack-1x"></i>
|
||||
</span> View Device Analytics</a>
|
||||
<!-- /statistics -->
|
||||
{{#zone "bottomJs"}}
|
||||
{{js "js/d3.min.js"}}
|
||||
{{js "js/rickshaw.min.js"}}
|
||||
{{js "js/moment.min.js"}}
|
||||
{{js "js/socket.io.min.js"}}
|
||||
{{js "js/device-stats.js"}}
|
||||
{{/zone}}
|
||||
@ -0,0 +1,33 @@
|
||||
/*
|
||||
* 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 log = new Log("stats.js");
|
||||
var device = context.unit.params.device;
|
||||
var devicemgtProps = require('/app/conf/devicemgt-props.js').config();
|
||||
var constants = require("/app/modules/constants.js");
|
||||
var websocketEndpoint = devicemgtProps["httpsURL"].replace("https", "wss");
|
||||
var tokenPair = session.get(constants.ACCESS_TOKEN_PAIR_IDENTIFIER);
|
||||
var token = ""
|
||||
if (tokenPair) {
|
||||
token = tokenPair.accessToken;
|
||||
}
|
||||
websocketEndpoint = websocketEndpoint + "/secured-outputui/org.wso2.iot.devices.temperature/1.0.0?" +
|
||||
"token="+ token +"&deviceId=" + device.deviceIdentifier + "&deviceType=" + device.type;
|
||||
return {"device": device, "websocketEndpoint" : websocketEndpoint};
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"version": "1.0.0"
|
||||
}
|
||||
Loading…
Reference in new issue