Merge branch 'master' of https://github.com/wso2/product-iots into 3.0.0
ayyoob
8 years ago
commit
4ca84a9f2d
@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<artifact name="GadgetLocationData" version="1.0.0" type="dashboards/gadget" serverRole="GeoDashboard">
|
||||
<file>geo-dashboard</file>
|
||||
</artifact>
|
||||
@ -0,0 +1,69 @@
|
||||
<!--~ 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.-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="viewWithinAlert" >
|
||||
<form role="form" style="width: auto">
|
||||
<div class="form-group">
|
||||
<label class="text-info">Query name</label>
|
||||
<div id="viewQueryName" class="well well-sm"></div>
|
||||
|
||||
<label class="text-info">Area name</label>
|
||||
<div id="viewAreaName" class="well well-sm"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="btn-group btn-group-sm btn-group-justified">
|
||||
<div class="btn-group">
|
||||
<a id="exportGeoJson" download="geoJson.json" href="#" onclick="exportToGeoJSON(this,JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))" class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left" title="Export selected area as a geoJson file">Export</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a id="hideViewFence" class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left" title="Hide this fence" onclick="map.removeLayer(map._layers[$(this).attr('leaflet_id')])" >Hide</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="viewStationeryAlert" >
|
||||
<form role="form" style="width: auto">
|
||||
<div class="form-group">
|
||||
<label class="text-info">Query name</label>
|
||||
<div id="viewQueryName" class="well well-sm"></div>
|
||||
|
||||
<label class="text-info">Stationery name</label>
|
||||
<div id="viewAreaName" class="well well-sm"></div>
|
||||
|
||||
<label class="text-info">Stationery time(Seconds)</label>
|
||||
<div id="viewAreaTime" class="well well-sm"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="btn-group btn-group-sm btn-group-justified">
|
||||
<div class="btn-group">
|
||||
<a id="exportGeoJson" download="geoJson.json" href="#" onclick="exportToGeoJSON(this,JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))" class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left" title="Export selected area as a geoJson file">Export</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a id="hideViewFence" class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left" title="Hide this fence" onclick="map.removeLayer(map._layers[$(this).attr('leaflet_id')])" >Hide</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,140 @@
|
||||
/* Enter a unique ExecutionPlan */
|
||||
@Plan:name('Geo-ExecutionPlan-Proximity_alert')
|
||||
|
||||
/* Enter a unique description for ExecutionPlan */
|
||||
-- @Plan:description('ExecutionPlan')
|
||||
|
||||
/* define streams/tables and write queries here ... */
|
||||
|
||||
@Import('org.wso2.geo.StandardSpatialEvents:1.0.0')
|
||||
define stream dataIn (id string, latitude double, longitude double, timeStamp long, type string, speed float, heading float, eventId string );
|
||||
|
||||
@Export('org.wso2.geo.ProcessedSpatialEvents:1.0.0')
|
||||
define stream dataOut ( id string, latitude double, longitude double, timeStamp long, type string, speed float, heading float, eventId string, state string, information string );
|
||||
|
||||
@IndexBy('id')
|
||||
define table ProximityTable(id string, timeStamp long);
|
||||
|
||||
@IndexBy('id')
|
||||
define table AlertsTable(id string , proximityWith string, eventId string);
|
||||
|
||||
from dataIn#geodashboard:subscribe()
|
||||
select id, latitude, longitude, timeStamp, type, speed, heading, eventId
|
||||
insert into initialStream;
|
||||
|
||||
from initialStream[type == 'STOP']
|
||||
select id , latitude, longitude,timeStamp, type, speed, heading ,eventId , "" as proximityInfo ,"false" as isProximity
|
||||
insert into dataOutStream;
|
||||
|
||||
from initialStream[type != 'STOP']
|
||||
select *
|
||||
insert into objectInitialStream;
|
||||
|
||||
from objectInitialStream#geo:proximity(id,longitude,latitude, $proximityDistance)
|
||||
select id, latitude, longitude, timeStamp, type, speed, heading, eventId,inCloseProximity,proximityWith
|
||||
insert into proxymityStream;
|
||||
|
||||
from proxymityStream[AlertsTable.id == proxymityStream.id in AlertsTable]
|
||||
select id, latitude, longitude, timeStamp, type, speed, heading, eventId,inCloseProximity,proximityWith,true as inAlertTable
|
||||
insert into innerStreamOne;
|
||||
|
||||
from proxymityStream[not(AlertsTable.id == proxymityStream.id in AlertsTable)]
|
||||
select id, latitude, longitude, timeStamp, type, speed, heading, eventId,inCloseProximity,proximityWith,false as inAlertTable
|
||||
insert into innerStreamOne;
|
||||
|
||||
from proxymityStream[AlertsTable.id == proxymityStream.proximityWith in AlertsTable]
|
||||
select id, latitude, longitude, timeStamp, type, speed, heading, eventId,inCloseProximity,proximityWith,true as inAlertTable
|
||||
insert into innerStreamSeven;
|
||||
|
||||
from proxymityStream[not(AlertsTable.id == proxymityStream.proximityWith in AlertsTable)]
|
||||
select id, latitude, longitude, timeStamp, type, speed, heading, eventId,inCloseProximity,proximityWith,false as inAlertTable
|
||||
insert into innerStreamSeven;
|
||||
|
||||
from innerStreamOne[inCloseProximity == true AND not(inAlertTable)]
|
||||
select id,str:concat(",",proximityWith) as proximityWith , eventId
|
||||
insert into AlertsTable;
|
||||
|
||||
from innerStreamSeven[inCloseProximity == true AND not(inAlertTable)]
|
||||
select proximityWith as id,str:concat(",",id) as proximityWith , eventId
|
||||
insert into AlertsTable;
|
||||
|
||||
from innerStreamOne[innerStreamOne.inCloseProximity == true AND inAlertTable]#window.length(0) join AlertsTable
|
||||
on innerStreamOne.id == AlertsTable.id
|
||||
select innerStreamOne.id as id, str:concat(",", innerStreamOne.proximityWith, AlertsTable.proximityWith) as proximityWith, innerStreamOne.eventId as eventId
|
||||
insert into updateStream;
|
||||
|
||||
from innerStreamSeven[innerStreamSeven.inCloseProximity == true AND inAlertTable]#window.length(0) join AlertsTable
|
||||
on innerStreamSeven.proximityWith == AlertsTable.id
|
||||
select innerStreamSeven.proximityWith as id, str:concat(",", innerStreamSeven.id, AlertsTable.proximityWith) as proximityWith, innerStreamSeven.eventId as eventId
|
||||
insert into updateStream;
|
||||
|
||||
from innerStreamOne[innerStreamOne.inCloseProximity == false AND inAlertTable]#window.length(0) join AlertsTable
|
||||
on innerStreamOne.id == AlertsTable.id
|
||||
select innerStreamOne.id as id, str:replaceAll(AlertsTable.proximityWith, str:concat(",", innerStreamOne.proximityWith), "") as proximityWith, innerStreamOne.eventId as eventId
|
||||
insert into updateStream;
|
||||
|
||||
from innerStreamSeven[innerStreamSeven.inCloseProximity == false AND inAlertTable]#window.length(0) join AlertsTable
|
||||
on innerStreamSeven.proximityWith == AlertsTable.id
|
||||
select innerStreamSeven.proximityWith as id, str:replaceAll(AlertsTable.proximityWith, str:concat(",", innerStreamSeven.id), "") as proximityWith, innerStreamSeven.eventId as eventId
|
||||
insert into updateStream;
|
||||
|
||||
from updateStream
|
||||
select *
|
||||
update AlertsTable
|
||||
on id== AlertsTable.id;
|
||||
|
||||
from updateStream[proximityWith == ""]
|
||||
delete AlertsTable
|
||||
on id== AlertsTable.id;
|
||||
|
||||
from objectInitialStream[AlertsTable.id == objectInitialStream.id in AlertsTable]
|
||||
select id, latitude, longitude, timeStamp, type, speed, heading, eventId, true as inAlertTable
|
||||
insert into publishStream;
|
||||
|
||||
from objectInitialStream[not(AlertsTable.id == objectInitialStream.id in AlertsTable)]
|
||||
select id, latitude, longitude, timeStamp, type, speed, heading, eventId, false as inAlertTable
|
||||
insert into publishStream;
|
||||
|
||||
from publishStream[inAlertTable == true]#window.length(0) join AlertsTable
|
||||
on publishStream.id== AlertsTable.id
|
||||
select publishStream.id as id, publishStream.latitude as latitude, publishStream.longitude as longitude, publishStream.timeStamp as timeStamp, publishStream.type as type, publishStream.speed as speed, publishStream.heading as heading, publishStream.eventId as eventId, AlertsTable.proximityWith as proximityInfo
|
||||
insert into innerStreamTwo;
|
||||
|
||||
from publishStream[inAlertTable == false]
|
||||
delete ProximityTable on ProximityTable.id==id;
|
||||
|
||||
from publishStream[inAlertTable == false]
|
||||
select id , latitude, longitude,timeStamp, type, speed, heading ,eventId , "" as proximityInfo ,"false" as isProximity
|
||||
insert into dataOutStream;
|
||||
|
||||
from innerStreamTwo[ProximityTable.id == innerStreamTwo.id in ProximityTable]
|
||||
insert into innerStreamThree;
|
||||
|
||||
from innerStreamThree#window.length(0) join ProximityTable
|
||||
on innerStreamThree.id == ProximityTable.id
|
||||
select innerStreamThree.id , innerStreamThree.latitude, innerStreamThree.longitude,innerStreamThree.timeStamp, innerStreamThree.type, innerStreamThree.speed, innerStreamThree.heading ,innerStreamThree.eventId, ProximityTable.timeStamp as storedTime, innerStreamThree.proximityInfo as proximityInfo
|
||||
insert into innerStreamFour;
|
||||
|
||||
from innerStreamFour[(timeStamp - storedTime) >= $proximityTime]
|
||||
select id , latitude, longitude,timeStamp, type, speed, heading ,eventId ,proximityInfo,"true" as isProximity
|
||||
insert into dataOutStream;
|
||||
|
||||
from innerStreamFour[(timeStamp - storedTime) < $proximityTime]
|
||||
select id , latitude, longitude,timeStamp, type, speed, heading ,eventId , proximityInfo ,"false" as isProximity
|
||||
insert into dataOutStream;
|
||||
|
||||
from innerStreamTwo[not(ProximityTable.id == innerStreamTwo.id in ProximityTable)]
|
||||
select innerStreamTwo.id, innerStreamTwo.timeStamp
|
||||
insert into ProximityTable;
|
||||
|
||||
from innerStreamTwo[not(ProximityTable.id == innerStreamTwo.id in ProximityTable)]
|
||||
select id , latitude, longitude,timeStamp, type, speed, heading ,eventId , "" as proximityInfo ,"false" as isProximity
|
||||
insert into dataOutStream;
|
||||
|
||||
from dataOutStream[isProximity == 'true']
|
||||
select id, latitude, longitude, timeStamp, type, speed, heading, eventId,"WARNING" as state,str:concat("Proximity with "," ",proximityInfo) as information
|
||||
insert into dataOut;
|
||||
|
||||
from dataOutStream[isProximity == 'false']
|
||||
select id , latitude, longitude,timeStamp, type, speed, heading ,eventId ,"NORMAL" as state,"" as information
|
||||
insert into dataOut;
|
||||
@ -0,0 +1,20 @@
|
||||
/* Enter a unique ExecutionPlan */
|
||||
@Plan:name('Geo-ExecutionPlan-Speed---$deviceId_alert')
|
||||
|
||||
/* Enter a unique description for ExecutionPlan */
|
||||
-- @Plan:description('ExecutionPlan')
|
||||
|
||||
/* define streams/tables and write queries here ... */
|
||||
|
||||
@Import('org.wso2.geo.StandardSpatialEvents:1.0.0')
|
||||
define stream dataIn (id string, latitude double, longitude double, timeStamp long, type string, speed float, heading float, eventId string);
|
||||
|
||||
@Export('org.wso2.geo.ProcessedSpatialEvents:1.0.0')
|
||||
define stream dataOut (id string, latitude double, longitude double, timeStamp long, type string, speed float, heading float, eventId string, state string, information string);
|
||||
|
||||
from dataIn[speed >= $speedAlertValue and id == "$deviceId"]#geodashboard:subscribe()
|
||||
select id , latitude, longitude,timeStamp, type ,speed, heading ,eventId , "ALERTED" as state, "This device movement is not normal!!" as information
|
||||
insert into dataOut;
|
||||
from dataIn[speed < $speedAlertValue and id == "$deviceId"]
|
||||
select id , latitude, longitude,timeStamp, type ,speed, heading ,eventId , "NORMAL" as state, "This device movement is normal" as information
|
||||
insert into dataOut;
|
||||
@ -0,0 +1,89 @@
|
||||
/* Enter a unique ExecutionPlan */
|
||||
@Plan:name('$executionPlanName')
|
||||
|
||||
/* Enter a unique description for ExecutionPlan */
|
||||
-- @Plan:description('ExecutionPlan')
|
||||
|
||||
/* define streams/tables and write queries here ... */
|
||||
|
||||
@Import('org.wso2.geo.StandardSpatialEvents:1.0.0')
|
||||
define stream dataIn (id string, latitude double, longitude double, timeStamp long, type string ,speed float, heading float, eventId string);
|
||||
|
||||
|
||||
@Export('org.wso2.geo.ProcessedSpatialEvents:1.0.0')
|
||||
define stream dataOut (id string, latitude double, longitude double, timeStamp long, type string ,speed float, heading float, eventId string, state string, information string);
|
||||
|
||||
@IndexBy('id')
|
||||
define table StationeryTable(id string, timeStamp long);
|
||||
|
||||
@IndexBy('id')
|
||||
define table AlertsTable(id string, stationary bool);
|
||||
|
||||
from dataIn#geodashboard:subscribe()
|
||||
select id, latitude, longitude, timeStamp, type, speed, heading, eventId,geo:within(longitude,latitude,"$geoFenceGeoJSON") as isWithin
|
||||
insert into innerStreamOne;
|
||||
|
||||
from innerStreamOne[isWithin == false]
|
||||
delete StationeryTable on StationeryTable.id==id;
|
||||
|
||||
from innerStreamOne[isWithin == false]
|
||||
select id , latitude, longitude,timeStamp, type, speed, heading ,eventId , "false" as isStationary
|
||||
insert into dataOutStream;
|
||||
|
||||
from innerStreamOne[isWithin == true]#geo:stationary(id,longitude,latitude, $fluctuationRadius)
|
||||
select id, latitude, longitude, timeStamp, type, speed, heading, eventId,stationary
|
||||
insert into innerStreamTwo;
|
||||
|
||||
from innerStreamTwo[innerStreamTwo.stationary == true]
|
||||
select innerStreamTwo.id, innerStreamTwo.stationary
|
||||
insert into AlertsTable;
|
||||
|
||||
from innerStreamTwo[innerStreamTwo.stationary == false]
|
||||
delete AlertsTable on AlertsTable.id==id;
|
||||
|
||||
from innerStreamTwo[innerStreamTwo.stationary == false]
|
||||
delete StationeryTable on StationeryTable.id==id;
|
||||
|
||||
from innerStreamOne[isWithin == true AND not(AlertsTable.id == innerStreamOne.id in AlertsTable)]
|
||||
select id , latitude, longitude,timeStamp, type, speed, heading ,eventId , "false" as isStationary
|
||||
insert into dataOutStream;
|
||||
|
||||
from innerStreamOne[isWithin == true AND AlertsTable.id == innerStreamOne.id in AlertsTable]
|
||||
insert into innerStreamThree;
|
||||
|
||||
from innerStreamThree#window.length(0) join AlertsTable
|
||||
on innerStreamThree.id == AlertsTable.id
|
||||
select innerStreamThree.id , innerStreamThree.latitude, innerStreamThree.longitude,innerStreamThree.timeStamp, innerStreamThree.type, innerStreamThree.speed, innerStreamThree.heading ,innerStreamThree.eventId
|
||||
insert into innerStreamFour;
|
||||
|
||||
from innerStreamFour[not(StationeryTable.id == innerStreamFour.id in StationeryTable)]
|
||||
select innerStreamFour.id, innerStreamFour.timeStamp
|
||||
insert into StationeryTable;
|
||||
|
||||
from innerStreamOne[isWithin == true AND not(StationeryTable.id == innerStreamOne.id in StationeryTable)]
|
||||
select id , latitude, longitude,timeStamp, type, speed, heading ,eventId , "false" as isStationary
|
||||
insert into dataOutStream;
|
||||
|
||||
from innerStreamOne[isWithin == true AND StationeryTable.id == innerStreamOne.id in StationeryTable]
|
||||
insert into innerStreamFive;
|
||||
|
||||
from innerStreamFive#window.length(0) join StationeryTable
|
||||
on innerStreamFive.id == StationeryTable.id
|
||||
select innerStreamFive.id , innerStreamFive.latitude, innerStreamFive.longitude,innerStreamFive.timeStamp, innerStreamFive.type, innerStreamFive.speed, innerStreamFive.heading ,innerStreamFive.eventId, StationeryTable.timeStamp as storedTime
|
||||
insert into innerStreamSix;
|
||||
|
||||
from innerStreamSix[(timeStamp - storedTime) >= $stationeryTime]
|
||||
select id , latitude, longitude,timeStamp, type, speed, heading ,eventId ,"true" as isStationary
|
||||
insert into dataOutStream;
|
||||
|
||||
from innerStreamSix[(timeStamp - storedTime) < $stationeryTime]
|
||||
select id , latitude, longitude,timeStamp, type, speed, heading ,eventId ,"false" as isStationary
|
||||
insert into dataOutStream;
|
||||
|
||||
from dataOutStream[isStationary == 'true']
|
||||
select id ,latitude, longitude,timeStamp, type, speed, heading ,eventId ,"ALERTED" as state, "This device is in $stationeryName area!!!" as information
|
||||
insert into dataOut;
|
||||
|
||||
from dataOutStream[isStationary == 'false']
|
||||
select id , latitude, longitude,timeStamp, type, speed, heading ,eventId ,"NORMAL" as state,"" as information
|
||||
insert into dataOut;
|
||||
@ -0,0 +1,17 @@
|
||||
/* Enter a unique ExecutionPlan */
|
||||
@Plan:name('$executionPlanName')
|
||||
|
||||
/* Enter a unique description for ExecutionPlan */
|
||||
-- @Plan:description('ExecutionPlan')
|
||||
|
||||
/* define streams/tables and write queries here ... */
|
||||
|
||||
@Import('rawGeoStream:1.0.0')
|
||||
define stream dataIn (id string, timeStamp long, geometry string, state string, information string);
|
||||
|
||||
@Export('AlertsNotifications:1.0.0')
|
||||
define stream dataOut (id string, state string, information string, timeStamp long, latitude double, longitude double);
|
||||
|
||||
from dataIn[geo:intersects(geometry, "$geoFenceGeoJSON")==true and geodashboard:needToNotify(id, str:concat(information, state), "sendFirst") == true and id == $deviceId]
|
||||
select id, state, str:concat("Traffic alert in $areaName. State: ", state, " ", information) as information, timeStamp, 0.0 as latitude, 0.0 as longitude
|
||||
insert into dataOut
|
||||
@ -0,0 +1,20 @@
|
||||
/* Enter a unique ExecutionPlan */
|
||||
@Plan:name('$executionPlanName')
|
||||
|
||||
/* Enter a unique description for ExecutionPlan */
|
||||
-- @Plan:description('ExecutionPlan')
|
||||
|
||||
/* define streams/tables and write queries here ... */
|
||||
|
||||
@Import('org.wso2.geo.StandardSpatialEvents:1.0.0')
|
||||
define stream dataIn (id string, latitude double, longitude double, timeStamp long, type string ,speed float, heading float, eventId string);
|
||||
|
||||
@Export('org.wso2.geo.ProcessedSpatialEvents:1.0.0')
|
||||
define stream dataOut (id string, latitude double, longitude double, timeStamp long, type string ,speed float, heading float, eventId string, state string, information string);
|
||||
|
||||
from dataIn[geo:within(longitude,latitude,"$geoFenceGeoJSON")==true and id == "$deviceId"]#geodashboard:subscribe()
|
||||
select id , latitude, longitude,timeStamp, type, speed, heading ,eventId , "ALERTED" as state, "This device is in $areaName restricted area!!!" as information
|
||||
insert into dataOut;
|
||||
from dataIn[geo:within(longitude,latitude,"$geoFenceGeoJSON")!=true and id == "$deviceId"]
|
||||
select id , latitude, longitude,timeStamp, type, speed, heading ,eventId , "NORMAL" as state, "" as information
|
||||
insert into dataOut;
|
||||
@ -0,0 +1,97 @@
|
||||
body {
|
||||
font: 10px sans-serif;
|
||||
}
|
||||
.axis path,
|
||||
.axis line {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
.point {
|
||||
stroke: #000;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-top: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
.slider {
|
||||
width: 80%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
output {
|
||||
display: block;
|
||||
margin: 25px auto;
|
||||
font-size:2em;
|
||||
}
|
||||
div.tooltip {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 60px;
|
||||
height: 28px;
|
||||
padding: 2px;
|
||||
font: 12px sans-serif;
|
||||
background: lightsteelblue;
|
||||
border: 0px;
|
||||
border-radius: 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.axis path,
|
||||
.axis line {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.bar {
|
||||
fill: orange;
|
||||
}
|
||||
|
||||
.bar:hover {
|
||||
fill: orangered ;
|
||||
}
|
||||
|
||||
.x.axis path {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.d3-tip {
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
padding: 12px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* Creates a small triangle extender for the tooltip */
|
||||
.d3-tip:after {
|
||||
box-sizing: border-box;
|
||||
display: inline;
|
||||
font-size: 10px;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
content: "\25BC";
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Style northward tooltips differently */
|
||||
.d3-tip.n:after {
|
||||
margin: -1px 0 0 0;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
}
|
||||
.btn-space {
|
||||
margin-right: 30px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.element-space{
|
||||
margin-right: 30px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
{
|
||||
"id": "geo-dashboard",
|
||||
"title": "Geo Dashboard",
|
||||
"type": "widget",
|
||||
"thumbnail": "gadget/geo-dashboard/img/thumbnail.png",
|
||||
"settings": {
|
||||
"personalize": true
|
||||
},
|
||||
"data": {
|
||||
"url": "gadget/geo-dashboard/index.xml"
|
||||
},
|
||||
"styles": {
|
||||
"borders": false,
|
||||
"title": false
|
||||
},
|
||||
"notify": {
|
||||
"select": {
|
||||
"type": "address",
|
||||
"description": "This notifies selected state"
|
||||
},
|
||||
"cancel": {
|
||||
"type": "boolean",
|
||||
"description": "This notifies cancellation of state selection"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 204 KiB |
@ -0,0 +1,31 @@
|
||||
<%
|
||||
/*
|
||||
~ 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 escapeSiddhiql = function (s) {
|
||||
XML_CHAR_MAP = {
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
'&': '&',
|
||||
'"': '"',
|
||||
"'": '''
|
||||
};
|
||||
return s.replace(/[<>&"']/g, function (ch) {
|
||||
return XML_CHAR_MAP[ch];
|
||||
});
|
||||
};
|
||||
%>
|
||||
@ -0,0 +1,165 @@
|
||||
<%
|
||||
/*
|
||||
~ 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.
|
||||
*/
|
||||
|
||||
// TODO: change the name of this jaggery file even thoe it says 'store_alerts' it is actually removing the alerts from the data store as well o.O wired
|
||||
var log = new Log();
|
||||
var constants = require("../controllers/constants.jag");
|
||||
|
||||
var getRegistry = function() {
|
||||
var carbon = require("carbon");
|
||||
var server = new carbon.server.Server();
|
||||
return new carbon.registry.Registry(server, {
|
||||
system: true
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the registry path to save the alert
|
||||
* @param {String} alert_type Type of the alert
|
||||
* @param {String} id Id of the device
|
||||
* @param {String} optional /optional identity
|
||||
* @return {String} Registry Path to save teh alert
|
||||
* */
|
||||
var registryPath = function (alert_type, id, optional) {
|
||||
if (alert_type && id ) {
|
||||
if (alert_type === constants.EXECUTION_PLAN_TYPE_SPEED || alert_type === constants
|
||||
.EXECUTION_PLAN_TYPE_PROXIMITY) {
|
||||
return constants.REGISTRY_PATH_FOR_ALERTS + alert_type + "/" + id;
|
||||
} else {
|
||||
return constants.REGISTRY_PATH_FOR_ALERTS + alert_type + "/" + id + "/" + optional;
|
||||
}
|
||||
} else {
|
||||
throw "Alert type and ID are mandatory field to generate the relevant registry path";
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* To store the alerts for visualizing purposes
|
||||
* @param resourceContents Value that need to saved
|
||||
* @param executionPlan Type of the execution plan
|
||||
* @param optional Optional parameters that are only specific to particular device types
|
||||
* @param deviceId Id of the device
|
||||
*/
|
||||
function store(resourceContents, executionPlan, optional, deviceId) {
|
||||
var registry = getRegistry();
|
||||
var pathToAddAlert = "";
|
||||
if (log.isDebugEnabled()) {
|
||||
log.debug("DEBUG:*** resourceContents:" + resourceContents);
|
||||
}
|
||||
if (executionPlan === constants.EXECUTION_PLAN_TYPE_SPEED) {
|
||||
pathToAddAlert = registryPath(constants.EXECUTION_PLAN_TYPE_SPEED, deviceId);
|
||||
registry.put(pathToAddAlert, {
|
||||
content: '{"speedLimit": ' + resourceContents + '}',
|
||||
mediaType: 'application/json'
|
||||
});
|
||||
if (log.isDebugEnabled()) {
|
||||
log.debug("DEBUG:*** Current speed limit set to:" + currentLimit.content);
|
||||
}
|
||||
}
|
||||
else if (executionPlan === constants.EXECUTION_PLAN_TYPE_WITHIN) {
|
||||
pathToAddAlert = registryPath(constants.EXECUTION_PLAN_TYPE_WITHIN, deviceId, optional.queryName);
|
||||
if (log.isDebugEnabled()) {
|
||||
log.debug("DEBUG:****** resourceContents = " + String('{"geoJson": ' + resourceContents + '}'));
|
||||
}
|
||||
registry.put(pathToAddAlert, {
|
||||
content: JSON.stringify(resourceContents),
|
||||
mediaType: 'application/json',
|
||||
properties : {
|
||||
"queryName" : optional.queryName,
|
||||
"areaName" : optional.customName
|
||||
}
|
||||
});
|
||||
} else if (executionPlan === constants.EXECUTION_PLAN_TYPE_PROXIMITY) {
|
||||
pathToAddAlert = registryPath(constants.EXECUTION_PLAN_TYPE_PROXIMITY, deviceId);
|
||||
if (log.isDebugEnabled()) {
|
||||
log.debug("DEBUG:****** resourceContents = " + resourceContents);
|
||||
}
|
||||
registry.put(pathToAddAlert, {
|
||||
content: "",
|
||||
mediaType: 'application/json'
|
||||
});
|
||||
registry.addProperty(pathToAddAlert, "proximityDistance", resourceContents.proximityDistance);
|
||||
registry.addProperty(pathToAddAlert, "proximityTime", resourceContents.proximityTime);
|
||||
} else if (executionPlan === constants.EXECUTION_PLAN_TYPE_STATIONARY) {
|
||||
pathToAddAlert = registryPath(constants.EXECUTION_PLAN_TYPE_STATIONARY, deviceId, optional.queryName);
|
||||
if (log.isDebugEnabled()) {
|
||||
log.debug("DEBUG:****** resourceContents = " + resourceContents);
|
||||
}
|
||||
var registryResource = {
|
||||
content: JSON.stringify(resourceContents.geoFenceGeoJSON),
|
||||
mediaType: 'application/json',
|
||||
properties: {
|
||||
"queryName" : optional.queryName,
|
||||
"stationeryName" : optional.customName,
|
||||
"stationeryTime" : resourceContents.stationeryTime,
|
||||
"fluctuationRadius" : resourceContents.fluctuationRadius
|
||||
}
|
||||
};
|
||||
registry.put(pathToAddAlert, registryResource);
|
||||
} else if (executionPlan === constants.EXECUTION_PLAN_TYPE_TRAFFIC) {
|
||||
pathToAddAlert = registryPath(constants.EXECUTION_PLAN_TYPE_TRAFFIC, deviceId, optional.queryName);
|
||||
if (log.isDebugEnabled()) {
|
||||
log.debug("DEBUG:****** resourceContents = " + resourceContents.geoFenceGeoJSON);
|
||||
}
|
||||
var registryResource = {
|
||||
content: JSON.stringify(resourceContents),
|
||||
mediaType: 'application/json',
|
||||
properties: {
|
||||
"queryName" : optional.queryName,
|
||||
"stationeryName" : optional.customName,
|
||||
"stationeryTime" : resourceContents.stationeryTime,
|
||||
"fluctuationRadius" : resourceContents.fluctuationRadius
|
||||
}
|
||||
};
|
||||
registry.put(pathToAddAlert, {
|
||||
content: JSON.stringify(resourceContents),
|
||||
mediaType: 'application/json',
|
||||
properties: {
|
||||
"queryName" : optional.queryName,
|
||||
"areaName" : optional.customName
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* To remove the registry resource
|
||||
* @param queryName Name of the query that need to be removed
|
||||
* @param executionPlanType type of the execution plan that need to be removed
|
||||
* @param deviceId Id of the device
|
||||
*/
|
||||
function remove(queryName, executionPlanType, deviceId) {
|
||||
var path = "";
|
||||
try {
|
||||
if (executionPlanType === constants.EXECUTION_PLAN_TYPE_SPEED || executionPlanType === constants.EXECUTION_PLAN_TYPE_PROXIMITY) {
|
||||
path = registryPath(executionPlanType, deviceId);
|
||||
} else {
|
||||
path = registryPath(executionPlanType, deviceId, queryName);
|
||||
}
|
||||
getRegistry().remove(path);
|
||||
if (log.isDebugEnabled()) {
|
||||
log.debug("Resource is removed from the path" + path);
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
log.error("The requested resource " + path + " was not found on this server.");
|
||||
}
|
||||
}
|
||||
%>
|
||||
@ -0,0 +1,196 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<!--
|
||||
~ 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.
|
||||
-->
|
||||
|
||||
<Module>
|
||||
<ModulePrefs title="Location Data" description="Location Data">
|
||||
<Require feature="dynamic-height" />
|
||||
<Require feature="dynamic-width" />
|
||||
<Require feature="wso2-gadgets-identity" />
|
||||
<Require feature="wso2-gadgets-state" />
|
||||
</ModulePrefs>
|
||||
<Content type="html">
|
||||
<![CDATA[
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<head>
|
||||
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||
<script src="lib/js/jquery.js"></script>
|
||||
<body>
|
||||
<link rel="stylesheet" href="lib/css/bootstrap.css">
|
||||
<script src="lib/js/bootstrap.js"></script>
|
||||
<script src="lib/js/d3.js"></script>
|
||||
<script src="js/RestCaller.js"></script>
|
||||
<script src="js/graph.js"></script>
|
||||
<script src="js/traffic.js"></script>
|
||||
<script src="lib/js/d3tip.js"></script>
|
||||
|
||||
<script>
|
||||
var imageX=-30;
|
||||
var imageY=-5
|
||||
var margin = {top: 20, right: 20, bottom: 30, left: 40},
|
||||
width = 1400 - margin.left - margin.right,
|
||||
height = 744 - margin.top - margin.bottom;
|
||||
|
||||
var x = d3.scale.linear()
|
||||
.range([0, width]);
|
||||
|
||||
var y = d3.scale.linear()
|
||||
.range([0,height]);
|
||||
loadImage(imageX,imageY);
|
||||
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", width + margin.left + margin.right)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
loadImage(imageX,imageY);
|
||||
getDimension();
|
||||
GetInitStartTime();
|
||||
|
||||
GetEndTime();
|
||||
</script>
|
||||
<div class="well">
|
||||
<div class="container">
|
||||
<div class="col-sm-4">
|
||||
<h3 class="text-primary">Select Time</h3>
|
||||
<input class="slider form-control input-sm" type="range" id="valueSlider" value="" step="1000" min="01170000853070" max="01172715042247" oninput="outputUpdate(value)">
|
||||
<output for=value id="output" hidden="true"></output>
|
||||
<output id="calenderDate"></output>
|
||||
<div hidden="true">
|
||||
<label for="stt">Starting Time</label>
|
||||
<input id="stt" name="stt" onchange="show()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-5">
|
||||
<h3 class="text-primary">Select Duration</h3>
|
||||
<select class="form-control input-sm-4" id="gap" name="gap" onclick="changeStep()">
|
||||
<option value=1000>1s</option>
|
||||
<option value=5000>5s</option>
|
||||
<option value=15000>15s</option>
|
||||
<option value=30000>30s</option>
|
||||
<option value=60000>1min</option>
|
||||
<option value=300000>5min</option>
|
||||
<option value=600000>10min</option>
|
||||
<option value=3600000>1hour</option>
|
||||
<option value=7200000>2hour</option>
|
||||
<option value=86400000>1day</option>
|
||||
</select>
|
||||
|
||||
</br>
|
||||
|
||||
<button class="btn btn-default btn-space" onclick="show() "style="align-content: center;width: 110px;height: 40px" >Show</button>
|
||||
<button class="btn btn-default btn-space" onclick="showPrevious()"style="align-content: center;width: 110px;height: 40px">Previous</button>
|
||||
<button class="btn btn-default btn-space" onclick="showNext()"style="align-content: center;width: 110px;height: 40px">Next</button>
|
||||
<button class="btn btn-primary btn-space" onclick="play()"style="align-content: center;width: 110px;height: 40px">Play</button>
|
||||
<button class="btn btn-default btn-space" onclick="showDensity()"style="align-content: center;width: 110px;height: 40px">Show Density</button>
|
||||
<button class="btn btn-default btn-space" onclick="display()"style="align-content: center;width: 110px;height: 40px">Reset</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="well">
|
||||
<div class="container">
|
||||
<div class="col-sm-4">
|
||||
<div class="container">
|
||||
<h3 class="text-primary">Typical Scenario</h3>
|
||||
<select class="form-control input-sm-4 element-space" id="time" name="time" style="width: 200px" >
|
||||
<option value=00>0AM</option>
|
||||
<option value=01>1AM</option>
|
||||
<option value=02>2AM</option>
|
||||
<option value=03>3AM</option>
|
||||
<option value=04>4AM</option>
|
||||
<option value=05>5AM</option>
|
||||
<option value=06>6AM</option>
|
||||
<option value=07>7AM</option>
|
||||
<option value=08>8AM</option>
|
||||
<option value=09>9AM</option>
|
||||
<option value=10>10AM</option>
|
||||
<option value=11>11AM</option>
|
||||
<option value=12>12AM</option>
|
||||
<option value=13>1PM</option>
|
||||
<option value=14>2PM</option>
|
||||
<option value=15>3PM</option>
|
||||
<option value=16>4PM</option>
|
||||
<option value=17>5PM</option>
|
||||
<option value=18>6PM</option>
|
||||
<option value=19>7PM</option>
|
||||
<option value=20>8PM</option>
|
||||
<option value=21>9PM</option>
|
||||
<option value=22>10PM</option>
|
||||
<option value=23>11PM</option>
|
||||
</select>
|
||||
<select class="form-control input-sm-4 element-space" id="day" name="day" style="width: 200px" >
|
||||
<option value=mon>Monday</option>
|
||||
<option value=tue>Tuesday</option>
|
||||
<option value=wed>Wednesday</option>
|
||||
<option value=thu>Thursday</option>
|
||||
<option value=fri>Friday</option>
|
||||
<option value=sat>Saturday</option>
|
||||
<option value=sun>Sunday</option>
|
||||
</select>
|
||||
<button class="btn btn-primary element-space" onclick="showScene()"style="align-content: center;width: 110px;height: 40px" >View Scenario</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 " >
|
||||
<h3 class="text-primary">Upload Data file</h3>
|
||||
<input class="form-control input-sm-4 element-space" id="fileupload" type="file" />
|
||||
<Button class="btn btn-primary element-space" onclick="sendFile()" id="submit" style="align-content: center;width: 110px;height: 40px">Submit</Button>
|
||||
</div>
|
||||
<div class="col-sm-4 " >
|
||||
<h3 class="text-primary">Change Image</h3>
|
||||
<button class="btn btn-default btn-space" onclick="changeImage(0,1)"style="align-content: center;width: 110px;height: 40px" >Up</button>
|
||||
<button class="btn btn-default btn-space" onclick="changeImage(0,-1)"style="align-content: center;width: 110px;height: 40px">Down</button>
|
||||
<button class="btn btn-default btn-space" onclick="changeImage(1,0)"style="align-content: center;width: 110px;height: 40px">Left</button>
|
||||
<button class="btn btn-default btn-space" onclick="changeImage(-1,0)"style="align-content: center;width: 110px;height: 40px">Right</button>
|
||||
<button class="btn btn-default btn-space" onclick="showDensity()"style="align-content: center;width: 110px;height: 40px">Show Density</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<div class="modal fade row-fluid" id="frequency_view" role="dialog" >
|
||||
<div class="modal-dialog">
|
||||
|
||||
<!-- Modal content-->
|
||||
<div class="modal-content" style="width: 1000px">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h4 class="modal-title">Sensor Triggered Frequencies</h4>
|
||||
</div>
|
||||
<div id="modal_body" name="modal_body" class="modal-body">
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
]]>
|
||||
</Content>
|
||||
</Module>
|
||||
@ -0,0 +1,111 @@
|
||||
/**
|
||||
* Created by dimuth on 10/25/16.
|
||||
*/
|
||||
function setCalendarDate(start){
|
||||
var calendarTime=timeStampToCalendarDate(start);
|
||||
document.getElementById("calenderDate").innerHTML=calendarTime;
|
||||
}
|
||||
var showNext =function () {
|
||||
var currentStart = parseInt(document.getElementById('stt').value);
|
||||
var duration = parseInt(document.getElementById('gap').value);
|
||||
document.getElementById("stt").value =currentStart+duration;
|
||||
|
||||
show();
|
||||
};
|
||||
var showPrevious =function () {
|
||||
var currentStart = parseInt(document.getElementById('stt').value);
|
||||
var duration = parseInt(document.getElementById('gap').value);
|
||||
document.getElementById("stt").value =currentStart-duration;
|
||||
show();
|
||||
};
|
||||
function outputUpdate(num) {
|
||||
document.querySelector('#output').value = num;
|
||||
document.getElementById('stt').value =num;
|
||||
setCalendarDate(num);
|
||||
show();
|
||||
}
|
||||
function changeStep() {
|
||||
document.getElementById("valueSlider").step =document.getElementById("gap").value;
|
||||
}
|
||||
function timeStampToCalendarDate(time) {
|
||||
|
||||
var date = new Date(parseInt(time));
|
||||
var Months =["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
|
||||
return date.getFullYear()+" "+Months[date.getMonth()]+" "+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
|
||||
}
|
||||
function showChunk(start,chunk,tList,xList,yList) {
|
||||
var data2=[];
|
||||
var gap=document.getElementById("gap").value;
|
||||
var e=parseInt(start)+parseInt(chunk);
|
||||
for(i=0;i<tList.length;i++ ){
|
||||
if(parseInt(tList[i])<e && parseInt(tList[i])>parseInt(start)){
|
||||
data2.push({x:xList[i] ,y:yList[i], c:((e-parseInt(tList[i]))*100/parseInt(gap))});
|
||||
}
|
||||
}
|
||||
return data2;
|
||||
}
|
||||
function doScaledTimeout(j,start,tList,chunk,xList,yList,cList) {
|
||||
setTimeout(function() {
|
||||
document.getElementById('stt').value=start;
|
||||
document.getElementById('output').value=start;
|
||||
setCalendarDate(start);
|
||||
|
||||
var data2=showChunk(start,chunk,tList,xList,yList,cList);
|
||||
|
||||
draw(data2);
|
||||
}, j * 300);
|
||||
}
|
||||
colorRed = d3.scale.linear().domain([20,100])
|
||||
.interpolate(d3.interpolateHcl)
|
||||
.range([d3.rgb('#F99FA2'),d3.rgb("#F72128"),]);
|
||||
|
||||
colorBlue = d3.scale.linear().domain([10,20])
|
||||
.interpolate(d3.interpolateHcl)
|
||||
.range([d3.rgb("#00C1FF"),d3.rgb('#6670AC')]);
|
||||
|
||||
colorGreen = d3.scale.linear().domain([10,0])
|
||||
.interpolate(d3.interpolateHcl)
|
||||
.range([d3.rgb("#0A7E03"),d3.rgb('#0FF300')]);
|
||||
|
||||
var tooltip = d3.select("body").append("div")
|
||||
.attr("class", "tooltip")
|
||||
.style("opacity", 0);
|
||||
|
||||
|
||||
function tsToCal(gap,time) {
|
||||
var date = new Date(parseInt(time));
|
||||
var Months =["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
|
||||
if(gap < 60000){
|
||||
return date.getMinutes()+":"+date.getSeconds();
|
||||
|
||||
}
|
||||
else if(gap <=7200000) {
|
||||
return Months[date.getMonth()]+" "+date.getDate() + " " + date.getHours() + ":" + date.getMinutes();
|
||||
}
|
||||
else{
|
||||
return date.getFullYear()+" "+Months[date.getMonth()]+" "+date.getDate();
|
||||
}
|
||||
|
||||
}
|
||||
function display() {
|
||||
window.location.reload();
|
||||
|
||||
};
|
||||
function loadImage(x,y) {
|
||||
var image = d3.select("g").append("svg:image")
|
||||
.attr("xlink:href", "img/floor.jpg")
|
||||
.attr("width", 1500)
|
||||
.attr("height", 699)
|
||||
.attr("x",x)
|
||||
.attr("y",y);
|
||||
|
||||
}
|
||||
function changeImage(x,y) {
|
||||
imageX=imageX+x;
|
||||
imageY=imageY+y;
|
||||
loadImage(imageX,imageY);
|
||||
|
||||
}
|
||||
colorData = d3.scale.linear().domain([10,0])
|
||||
.interpolate(d3.interpolateHcl)
|
||||
.range([d3.rgb(125,0,0),d3.rgb(255,0,0)]);
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,352 @@
|
||||
/**
|
||||
* d3.tip
|
||||
* Copyright (c) 2013 Justin Palmer
|
||||
*
|
||||
* Tooltips for d3.js SVG visualizations
|
||||
*/
|
||||
// eslint-disable-next-line no-extra-semi
|
||||
;(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module with d3 as a dependency.
|
||||
define([
|
||||
'd3-collection',
|
||||
'd3-selection'
|
||||
], factory)
|
||||
} else if (typeof module === 'object' && module.exports) {
|
||||
/* eslint-disable global-require */
|
||||
// CommonJS
|
||||
var d3Collection = require('d3-collection'),
|
||||
d3Selection = require('d3-selection')
|
||||
module.exports = factory(d3Collection, d3Selection)
|
||||
/* eslint-enable global-require */
|
||||
} else {
|
||||
// Browser global.
|
||||
var d3 = root.d3
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
root.d3.tip = factory(d3, d3)
|
||||
}
|
||||
}(this, function(d3Collection, d3Selection) {
|
||||
// Public - contructs a new tooltip
|
||||
//
|
||||
// Returns a tip
|
||||
return function() {
|
||||
var direction = d3TipDirection,
|
||||
offset = d3TipOffset,
|
||||
html = d3TipHTML,
|
||||
rootElement = document.body,
|
||||
node = initNode(),
|
||||
svg = null,
|
||||
point = null,
|
||||
target = null
|
||||
|
||||
function tip(vis) {
|
||||
svg = getSVGNode(vis)
|
||||
if (!svg) return
|
||||
point = svg.createSVGPoint()
|
||||
rootElement.appendChild(node)
|
||||
}
|
||||
|
||||
// Public - show the tooltip on the screen
|
||||
//
|
||||
// Returns a tip
|
||||
tip.show = function() {
|
||||
var args = Array.prototype.slice.call(arguments)
|
||||
if (args[args.length - 1] instanceof SVGElement) target = args.pop()
|
||||
|
||||
var content = html.apply(this, args),
|
||||
poffset = offset.apply(this, args),
|
||||
dir = direction.apply(this, args),
|
||||
nodel = getNodeEl(),
|
||||
i = directions.length,
|
||||
coords,
|
||||
scrollTop = document.documentElement.scrollTop ||
|
||||
rootElement.scrollTop,
|
||||
scrollLeft = document.documentElement.scrollLeft ||
|
||||
rootElement.scrollLeft
|
||||
|
||||
nodel.html(content)
|
||||
.style('opacity', 1).style('pointer-events', 'all')
|
||||
|
||||
while (i--) nodel.classed(directions[i], false)
|
||||
coords = directionCallbacks.get(dir).apply(this)
|
||||
nodel.classed(dir, true)
|
||||
.style('top', (coords.top + poffset[0]) + scrollTop + 'px')
|
||||
.style('left', (coords.left + poffset[1]) + scrollLeft + 'px')
|
||||
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public - hide the tooltip
|
||||
//
|
||||
// Returns a tip
|
||||
tip.hide = function() {
|
||||
var nodel = getNodeEl()
|
||||
nodel.style('opacity', 0).style('pointer-events', 'none')
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public: Proxy attr calls to the d3 tip container.
|
||||
// Sets or gets attribute value.
|
||||
//
|
||||
// n - name of the attribute
|
||||
// v - value of the attribute
|
||||
//
|
||||
// Returns tip or attribute value
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
tip.attr = function(n, v) {
|
||||
if (arguments.length < 2 && typeof n === 'string') {
|
||||
return getNodeEl().attr(n)
|
||||
}
|
||||
|
||||
var args = Array.prototype.slice.call(arguments)
|
||||
d3Selection.selection.prototype.attr.apply(getNodeEl(), args)
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public: Proxy style calls to the d3 tip container.
|
||||
// Sets or gets a style value.
|
||||
//
|
||||
// n - name of the property
|
||||
// v - value of the property
|
||||
//
|
||||
// Returns tip or style property value
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
tip.style = function(n, v) {
|
||||
if (arguments.length < 2 && typeof n === 'string') {
|
||||
return getNodeEl().style(n)
|
||||
}
|
||||
|
||||
var args = Array.prototype.slice.call(arguments)
|
||||
d3Selection.selection.prototype.style.apply(getNodeEl(), args)
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public: Set or get the direction of the tooltip
|
||||
//
|
||||
// v - One of n(north), s(south), e(east), or w(west), nw(northwest),
|
||||
// sw(southwest), ne(northeast) or se(southeast)
|
||||
//
|
||||
// Returns tip or direction
|
||||
tip.direction = function(v) {
|
||||
if (!arguments.length) return direction
|
||||
direction = v == null ? v : functor(v)
|
||||
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public: Sets or gets the offset of the tip
|
||||
//
|
||||
// v - Array of [x, y] offset
|
||||
//
|
||||
// Returns offset or
|
||||
tip.offset = function(v) {
|
||||
if (!arguments.length) return offset
|
||||
offset = v == null ? v : functor(v)
|
||||
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public: sets or gets the html value of the tooltip
|
||||
//
|
||||
// v - String value of the tip
|
||||
//
|
||||
// Returns html value or tip
|
||||
tip.html = function(v) {
|
||||
if (!arguments.length) return html
|
||||
html = v == null ? v : functor(v)
|
||||
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public: sets or gets the root element anchor of the tooltip
|
||||
//
|
||||
// v - root element of the tooltip
|
||||
//
|
||||
// Returns root node of tip
|
||||
tip.rootElement = function(v) {
|
||||
if (!arguments.length) return rootElement
|
||||
rootElement = v == null ? v : functor(v)
|
||||
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public: destroys the tooltip and removes it from the DOM
|
||||
//
|
||||
// Returns a tip
|
||||
tip.destroy = function() {
|
||||
if (node) {
|
||||
getNodeEl().remove()
|
||||
node = null
|
||||
}
|
||||
return tip
|
||||
}
|
||||
|
||||
function d3TipDirection() { return 'n' }
|
||||
function d3TipOffset() { return [0, 0] }
|
||||
function d3TipHTML() { return ' ' }
|
||||
|
||||
var directionCallbacks = d3Collection.map({
|
||||
n: directionNorth,
|
||||
s: directionSouth,
|
||||
e: directionEast,
|
||||
w: directionWest,
|
||||
nw: directionNorthWest,
|
||||
ne: directionNorthEast,
|
||||
sw: directionSouthWest,
|
||||
se: directionSouthEast
|
||||
}),
|
||||
directions = directionCallbacks.keys()
|
||||
|
||||
function directionNorth() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.n.y - node.offsetHeight,
|
||||
left: bbox.n.x - node.offsetWidth / 2
|
||||
}
|
||||
}
|
||||
|
||||
function directionSouth() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.s.y,
|
||||
left: bbox.s.x - node.offsetWidth / 2
|
||||
}
|
||||
}
|
||||
|
||||
function directionEast() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.e.y - node.offsetHeight / 2,
|
||||
left: bbox.e.x
|
||||
}
|
||||
}
|
||||
|
||||
function directionWest() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.w.y - node.offsetHeight / 2,
|
||||
left: bbox.w.x - node.offsetWidth
|
||||
}
|
||||
}
|
||||
|
||||
function directionNorthWest() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.nw.y - node.offsetHeight,
|
||||
left: bbox.nw.x - node.offsetWidth
|
||||
}
|
||||
}
|
||||
|
||||
function directionNorthEast() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.ne.y - node.offsetHeight,
|
||||
left: bbox.ne.x
|
||||
}
|
||||
}
|
||||
|
||||
function directionSouthWest() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.sw.y,
|
||||
left: bbox.sw.x - node.offsetWidth
|
||||
}
|
||||
}
|
||||
|
||||
function directionSouthEast() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.se.y,
|
||||
left: bbox.se.x
|
||||
}
|
||||
}
|
||||
|
||||
function initNode() {
|
||||
var div = d3Selection.select(document.createElement('div'))
|
||||
div
|
||||
.style('position', 'absolute')
|
||||
.style('top', 0)
|
||||
.style('opacity', 0)
|
||||
.style('pointer-events', 'none')
|
||||
.style('box-sizing', 'border-box')
|
||||
|
||||
return div.node()
|
||||
}
|
||||
|
||||
function getSVGNode(element) {
|
||||
var svgNode = element.node()
|
||||
if (!svgNode) return null
|
||||
if (svgNode.tagName.toLowerCase() === 'svg') return svgNode
|
||||
return svgNode.ownerSVGElement
|
||||
}
|
||||
|
||||
function getNodeEl() {
|
||||
if (node == null) {
|
||||
node = initNode()
|
||||
// re-add node to DOM
|
||||
rootElement.appendChild(node)
|
||||
}
|
||||
return d3Selection.select(node)
|
||||
}
|
||||
|
||||
// Private - gets the screen coordinates of a shape
|
||||
//
|
||||
// Given a shape on the screen, will return an SVGPoint for the directions
|
||||
// n(north), s(south), e(east), w(west), ne(northeast), se(southeast),
|
||||
// nw(northwest), sw(southwest).
|
||||
//
|
||||
// +-+-+
|
||||
// | |
|
||||
// + +
|
||||
// | |
|
||||
// +-+-+
|
||||
//
|
||||
// Returns an Object {n, s, e, w, nw, sw, ne, se}
|
||||
function getScreenBBox() {
|
||||
var targetel = target || d3Selection.event.target
|
||||
|
||||
while (targetel.getScreenCTM == null && targetel.parentNode == null) {
|
||||
targetel = targetel.parentNode
|
||||
}
|
||||
|
||||
var bbox = {},
|
||||
matrix = targetel.getScreenCTM(),
|
||||
tbbox = targetel.getBBox(),
|
||||
width = tbbox.width,
|
||||
height = tbbox.height,
|
||||
x = tbbox.x,
|
||||
y = tbbox.y
|
||||
|
||||
point.x = x
|
||||
point.y = y
|
||||
bbox.nw = point.matrixTransform(matrix)
|
||||
point.x += width
|
||||
bbox.ne = point.matrixTransform(matrix)
|
||||
point.y += height
|
||||
bbox.se = point.matrixTransform(matrix)
|
||||
point.x -= width
|
||||
bbox.sw = point.matrixTransform(matrix)
|
||||
point.y -= height / 2
|
||||
bbox.w = point.matrixTransform(matrix)
|
||||
point.x += width
|
||||
bbox.e = point.matrixTransform(matrix)
|
||||
point.x -= width / 2
|
||||
point.y -= height / 2
|
||||
bbox.n = point.matrixTransform(matrix)
|
||||
point.y += height
|
||||
bbox.s = point.matrixTransform(matrix)
|
||||
|
||||
return bbox
|
||||
}
|
||||
|
||||
// Private - replace D3JS 3.X d3.functor() function
|
||||
function functor(v) {
|
||||
return typeof v === 'function' ? v : function() {
|
||||
return v
|
||||
}
|
||||
}
|
||||
|
||||
return tip
|
||||
}
|
||||
// eslint-disable-next-line semi
|
||||
}));
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,66 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* Licensed 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.
|
||||
*/
|
||||
.circle {
|
||||
background: none repeat scroll 0 0 #191919;
|
||||
border-radius: 50px;
|
||||
height: 50px;
|
||||
padding: 10px;
|
||||
width: 50px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.padding-top-double {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.padding-double {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.grey {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #7f7f7f;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.light-grey {
|
||||
color: #7c7c7c;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.grey-bg {
|
||||
background-color: #f6f4f4;
|
||||
}
|
||||
|
||||
.doc-link{
|
||||
background: none;
|
||||
color: #000;
|
||||
padding: 10px 0px;
|
||||
}
|
||||
.doc-link a {
|
||||
color: #006eff;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
Subproject commit ec24a6d552876d517c2070fdce5ccbff1b4c15bb
|
||||
@ -0,0 +1,19 @@
|
||||
<project name="create-data-analytics-capps" default="zip" basedir=".">
|
||||
|
||||
<property name="project-name" value="${ant.project.name}"/>
|
||||
<property name="target-dir" value="target/carbonapps"/>
|
||||
<property name="src-dir" value="src/main/resources/carbonapps"/>
|
||||
|
||||
<property name="location_dir" value="locationTraker"/>
|
||||
|
||||
<target name="clean">
|
||||
<delete dir="${target-dir}" />
|
||||
</target>
|
||||
|
||||
<target name="zip" depends="clean">
|
||||
<mkdir dir="${target-dir}"/>
|
||||
<zip destfile="${target-dir}/${location_dir}.car">
|
||||
<zipfileset dir="${src-dir}/${location_dir}"/>
|
||||
</zip>
|
||||
</target>
|
||||
</project>
|
||||
@ -0,0 +1,73 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!--
|
||||
~ 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.
|
||||
-->
|
||||
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
|
||||
|
||||
<groupId>org.wso2.sample</groupId>
|
||||
<modelVersion>4.0.0</modelVersion>
|
||||
<artifactId>org.wso2.sample.x</artifactId>
|
||||
<name>WSO2 Carbon - IoT Server Location Data Analytics Application</name>
|
||||
<packaging>pom</packaging>
|
||||
<version>1.0.0-SNAPSHOT</version>
|
||||
<build>
|
||||
<plugins>
|
||||
<plugin>
|
||||
<artifactId>maven-antrun-plugin</artifactId>
|
||||
<version>1.7</version>
|
||||
<executions>
|
||||
<execution>
|
||||
<phase>process-resources</phase>
|
||||
<configuration>
|
||||
<target>
|
||||
<ant antfile="build.xml" target="zip" />
|
||||
</target>
|
||||
</configuration>
|
||||
<goals>
|
||||
<goal>run</goal>
|
||||
</goals>
|
||||
</execution>
|
||||
</executions>
|
||||
</plugin>
|
||||
<plugin>
|
||||
<artifactId>maven-assembly-plugin</artifactId>
|
||||
<version>2.5.5</version>
|
||||
<configuration>
|
||||
<finalName>${project.artifactId}-${project.version}</finalName>
|
||||
<appendAssemblyId>false</appendAssemblyId>
|
||||
<descriptors>
|
||||
<descriptor>src/assembly/src.xml</descriptor>
|
||||
</descriptors>
|
||||
</configuration>
|
||||
<executions>
|
||||
<execution>
|
||||
<id>create-archive</id>
|
||||
<phase>package</phase>
|
||||
<goals>
|
||||
<goal>single</goal>
|
||||
</goals>
|
||||
</execution>
|
||||
</executions>
|
||||
</plugin>
|
||||
</plugins>
|
||||
</build>
|
||||
|
||||
<properties>
|
||||
<project.version>1.0.0-SNAPSHOT</project.version>
|
||||
</properties>
|
||||
|
||||
</project>
|
||||
@ -0,0 +1,37 @@
|
||||
|
||||
|
||||
<!--
|
||||
~ 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.
|
||||
-->
|
||||
<assembly
|
||||
xmlns="http://maven.apache.org/plugins/maven-assembly-plugin/assembly/1.1.0"
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xsi:schemaLocation="http://maven.apache.org/plugins/maven-assembly-plugin/assembly/1.1.0 http://maven.apache.org/xsd/assembly-1.1.0.xsd">
|
||||
<id>src</id>
|
||||
<formats>
|
||||
<format>zip</format>
|
||||
</formats>
|
||||
<includeBaseDirectory>false</includeBaseDirectory>
|
||||
<baseDirectory>${basedir}/src</baseDirectory>
|
||||
<fileSets>
|
||||
<fileSet>
|
||||
<directory>${basedir}/target/carbonapps</directory>
|
||||
<outputDirectory>/</outputDirectory>
|
||||
<useDefaultExcludes>true</useDefaultExcludes>
|
||||
</fileSet>
|
||||
</fileSets>
|
||||
</assembly>
|
||||
@ -0,0 +1,25 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
~ 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.
|
||||
-->
|
||||
|
||||
<artifacts>
|
||||
<artifact name="turn" version="1.0.0" type="carbon/application">
|
||||
<dependency artifact="location_data_visualizer_dashboard" version="1.0.0" include="true" serverRole="DataAnalyticsServer"/>
|
||||
<dependency artifact="location_data_visualizer_gadget" version="1.0.0" include="true" serverRole="DataAnalyticsServer"/>
|
||||
</artifact>
|
||||
</artifacts>
|
||||
@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
~ 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.
|
||||
-->
|
||||
|
||||
<artifact name="location_data_visualizer_dashboard" version="1.0.0" type="dashboards/dashboard" serverRole="DataAnalyticsServer">
|
||||
<file>location-data-dashboard.json</file>
|
||||
</artifact>
|
||||
@ -0,0 +1 @@
|
||||
{"id" : "location-data-dashboard", "title" : "Location Data Dashboard", "description" : "Location data viewer", "permissions" : {"viewers" : ["Internal/location-data-dashboard-viewer"], "editors" : ["Internal/location-data-dashboard-editor"], "owners" : ["Internal/location-data-dashboard-owner"]}, "pages" : [{"id" : "page1", "title" : "Page 1", "layout" : {"content" : {"loggedIn" : {"blocks" : [{"id" : "e5070bafe141065d065bcd63786ad9c9", "x" : 0, "y" : 0, "width" : 12, "height" : 11, "banner" : false}]}}, "fluidLayout" : false}, "isanon" : false, "content" : {"default" : {"a" : [], "b" : [], "e5070bafe141065d065bcd63786ad9c9" : [{"id" : "location-data-visualizer-0", "content" : {"id" : "location-data-visualizer", "title" : "Location Data Visuializer", "type" : "gadget", "thumbnail" : "fs://gadget/location-data-visualizer/index.jpg", "settings" : {"personalize" : true}, "data" : {"url" : "fs://gadget/location-data-visualizer/index.xml"}, "description" : "Allows to view and select US states", "notify" : {"state" : {"type" : "address", "description" : "This notifies selected state"}, "cancel" : {"type" : "boolean", "description" : "This notifies cancellation of state selection"}}, "styles" : {"title" : "Location Data Visuializer", "borders" : true}, "options" : {}, "locale_titles" : {}}}]}, "anon" : {}}}], "menu" : [{"id" : "page1", "isanon" : false, "ishidden" : false, "title" : "Page 1", "subordinates" : []}], "hideAllMenuItems" : false, "identityServerUrl" : "", "accessTokenUrl" : "", "apiKey" : "", "apiSecret" : "", "theme" : "Default Theme", "shareDashboard" : false, "isUserCustom" : false, "isEditorEnable" : false, "banner" : {"globalBannerExists" : false, "customBannerExists" : false}, "landing" : "page1", "isanon" : false, "defaultPriority" : "5"}
|
||||
@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
~ 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.
|
||||
-->
|
||||
|
||||
<artifact name= "location_data_visualizer_gadget" version="1.0.0" type="dashboards/gadget" serverRole="DataAnalyticsServer">
|
||||
<file>location-data-visualizer</file>
|
||||
</artifact>
|
||||
@ -0,0 +1,97 @@
|
||||
body {
|
||||
font: 10px sans-serif;
|
||||
}
|
||||
.axis path,
|
||||
.axis line {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
.point {
|
||||
stroke: #000;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-top: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
.slider {
|
||||
width: 80%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
output {
|
||||
display: block;
|
||||
margin: 25px auto;
|
||||
font-size:2em;
|
||||
}
|
||||
div.tooltip {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 60px;
|
||||
height: 28px;
|
||||
padding: 2px;
|
||||
font: 12px sans-serif;
|
||||
background: lightsteelblue;
|
||||
border: 0px;
|
||||
border-radius: 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.axis path,
|
||||
.axis line {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
.bar {
|
||||
fill: orange;
|
||||
}
|
||||
|
||||
.bar:hover {
|
||||
fill: orangered ;
|
||||
}
|
||||
|
||||
.x.axis path {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.d3-tip {
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
padding: 12px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* Creates a small triangle extender for the tooltip */
|
||||
.d3-tip:after {
|
||||
box-sizing: border-box;
|
||||
display: inline;
|
||||
font-size: 10px;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
content: "\25BC";
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Style northward tooltips differently */
|
||||
.d3-tip.n:after {
|
||||
margin: -1px 0 0 0;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
}
|
||||
.btn-space {
|
||||
margin-right: 30px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.element-space{
|
||||
margin-right: 30px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
After Width: | Height: | Size: 204 KiB |
@ -0,0 +1,23 @@
|
||||
{
|
||||
"id": "location-data-visualizer",
|
||||
"title": "Location Data Visuializer",
|
||||
"type": "gadget",
|
||||
"thumbnail": "gadget/location-data-visualizer/index.jpg",
|
||||
"settings": {
|
||||
"personalize": true
|
||||
},
|
||||
"data": {
|
||||
"url": "gadget/location-data-visualizer/index.xml"
|
||||
},
|
||||
"description": "Allows to view and select US states",
|
||||
"notify": {
|
||||
"state": {
|
||||
"type": "address",
|
||||
"description": "This notifies selected state"
|
||||
},
|
||||
"cancel": {
|
||||
"type": "boolean",
|
||||
"description": "This notifies cancellation of state selection"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 204 KiB |
|
After Width: | Height: | Size: 100 KiB |
@ -0,0 +1,209 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<Module>
|
||||
<ModulePrefs title="Location Data Visualizer" description="g1">
|
||||
<Require feature="pubsub-2"/>
|
||||
<Require feature="dynamic-height"/>
|
||||
<Require feature="wso2-gadgets-remoteClient" />
|
||||
</ModulePrefs>
|
||||
<Content type="html">
|
||||
<![CDATA[
|
||||
|
||||
<head>
|
||||
|
||||
|
||||
<!--
|
||||
-->
|
||||
<!--
|
||||
loading stylesheets
|
||||
-->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="lib/css/bootstrap.css">
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
loading javascript libraries
|
||||
-->
|
||||
|
||||
<script src="lib/js/jquery.js"></script>
|
||||
<script src="lib/js/bootstrap.js"></script>
|
||||
<script src="lib/js/d3.js"></script>
|
||||
<script src="lib/js/d3tip.js"></script>
|
||||
|
||||
|
||||
<!--
|
||||
Loading created javascript functions
|
||||
-->
|
||||
|
||||
<script src="js/RestCaller.js"></script>
|
||||
<script src="js/graph.js"></script>
|
||||
<script src="js/traffic.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script src="lib/js/d3.js"></script>
|
||||
<script src="lib/js/d3tip.js"></script>
|
||||
<script>
|
||||
|
||||
//initializing variables
|
||||
var imageX=-30;
|
||||
var imageY=-5;
|
||||
var margin = {top: 20, right: 20, bottom: 30, left: 40},
|
||||
width = 1400 - margin.left - margin.right,
|
||||
height = 744 - margin.top - margin.bottom;
|
||||
|
||||
|
||||
|
||||
//setting axises
|
||||
var x = d3.scale.linear()
|
||||
.range([0, width]);
|
||||
|
||||
var y = d3.scale.linear()
|
||||
.range([0,height]);
|
||||
loadImage(imageX,imageY);
|
||||
|
||||
|
||||
//adding a SVG element to hold the map image
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", width + margin.left + margin.right)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
loadImage(imageX,imageY);
|
||||
|
||||
|
||||
//initializing axises with database and slider with file values
|
||||
getDimension();
|
||||
GetInitStartTime();
|
||||
|
||||
GetEndTime();
|
||||
</script>
|
||||
|
||||
|
||||
<div class="well">
|
||||
<div class="container">
|
||||
<div class="col-sm-4">
|
||||
<h3 class="text-primary">Select Time</h3>
|
||||
<input class="slider form-control input-sm" type="range" id="valueSlider" value="" step="1000" min="01170000853070" max="01172715042247" oninput="outputUpdate(value)">
|
||||
<output for=value id="output" hidden="true"></output>
|
||||
<output id="calenderDate"></output>
|
||||
<div hidden="true">
|
||||
<label for="stt">Starting Time</label>
|
||||
<input id="stt" name="stt" onchange="show()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-5">
|
||||
<h3 class="text-primary">Select Duration</h3>
|
||||
<select class="form-control input-sm-4" id="gap" name="gap" onclick="changeStep()">
|
||||
<option value=1000>1s</option>
|
||||
<option value=5000>5s</option>
|
||||
<option value=15000>15s</option>
|
||||
<option value=30000>30s</option>
|
||||
<option value=60000>1min</option>
|
||||
<option value=300000>5min</option>
|
||||
<option value=600000>10min</option>
|
||||
<option value=3600000>1hour</option>
|
||||
<option value=7200000>2hour</option>
|
||||
<option value=86400000>1day</option>
|
||||
</select>
|
||||
|
||||
</br>
|
||||
|
||||
<button class="btn btn-default btn-space" onclick="show() "style="align-content: center;width: 110px;height: 40px" >Show</button>
|
||||
<button class="btn btn-default btn-space" onclick="showPrevious()"style="align-content: center;width: 110px;height: 40px">Previous</button>
|
||||
<button class="btn btn-default btn-space" onclick="showNext()"style="align-content: center;width: 110px;height: 40px">Next</button>
|
||||
<button class="btn btn-primary btn-space" onclick="play()"style="align-content: center;width: 110px;height: 40px">Play</button>
|
||||
<button class="btn btn-default btn-space" onclick="showDensity()"style="align-content: center;width: 110px;height: 40px">Show Density</button>
|
||||
<button class="btn btn-default btn-space" onclick="display()"style="align-content: center;width: 110px;height: 40px">Reset</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="well">
|
||||
<div class="container">
|
||||
<div class="col-sm-4">
|
||||
<div class="container">
|
||||
<h3 class="text-primary">Typical Scenario</h3>
|
||||
<select class="form-control input-sm-4 element-space" id="time" name="time" style="width: 200px" >
|
||||
<option value=00>0AM</option>
|
||||
<option value=01>1AM</option>
|
||||
<option value=02>2AM</option>
|
||||
<option value=03>3AM</option>
|
||||
<option value=04>4AM</option>
|
||||
<option value=05>5AM</option>
|
||||
<option value=06>6AM</option>
|
||||
<option value=07>7AM</option>
|
||||
<option value=08>8AM</option>
|
||||
<option value=09>9AM</option>
|
||||
<option value=10>10AM</option>
|
||||
<option value=11>11AM</option>
|
||||
<option value=12>12AM</option>
|
||||
<option value=13>1PM</option>
|
||||
<option value=14>2PM</option>
|
||||
<option value=15>3PM</option>
|
||||
<option value=16>4PM</option>
|
||||
<option value=17>5PM</option>
|
||||
<option value=18>6PM</option>
|
||||
<option value=19>7PM</option>
|
||||
<option value=20>8PM</option>
|
||||
<option value=21>9PM</option>
|
||||
<option value=22>10PM</option>
|
||||
<option value=23>11PM</option>
|
||||
</select>
|
||||
<select class="form-control input-sm-4 element-space" id="day" name="day" style="width: 200px" >
|
||||
<option value=mon>Monday</option>
|
||||
<option value=tue>Tuesday</option>
|
||||
<option value=wed>Wednesday</option>
|
||||
<option value=thu>Thursday</option>
|
||||
<option value=fri>Friday</option>
|
||||
<option value=sat>Saturday</option>
|
||||
<option value=sun>Sunday</option>
|
||||
</select>
|
||||
<button class="btn btn-primary element-space" onclick="showScene()"style="align-content: center;width: 110px;height: 40px" >View Scenario</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 " >
|
||||
<h3 class="text-primary">Upload Data file</h3>
|
||||
<input class="form-control input-sm-4 element-space" id="fileupload" type="file" />
|
||||
<Button class="btn btn-primary element-space" onclick="sendFile()" id="submit" style="align-content: center;width: 110px;height: 40px">Submit</Button>
|
||||
</div>
|
||||
<div class="col-sm-4 " >
|
||||
<h3 class="text-primary">Change Image</h3>
|
||||
<button class="btn btn-default btn-space" onclick="changeImage(0,1)"style="align-content: center;width: 110px;height: 40px" >Up</button>
|
||||
<button class="btn btn-default btn-space" onclick="changeImage(0,-1)"style="align-content: center;width: 110px;height: 40px">Down</button>
|
||||
<button class="btn btn-default btn-space" onclick="changeImage(1,0)"style="align-content: center;width: 110px;height: 40px">Left</button>
|
||||
<button class="btn btn-default btn-space" onclick="changeImage(-1,0)"style="align-content: center;width: 110px;height: 40px">Right</button>
|
||||
<button class="btn btn-default btn-space" onclick="showDensity()"style="align-content: center;width: 110px;height: 40px">Show Density</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Modal for showing frequencies-->
|
||||
<div class="modal fade row-fluid" id="frequency_view" role="dialog" >
|
||||
<div class="modal-dialog">
|
||||
|
||||
<!-- Modal content-->
|
||||
<div class="modal-content" style="width: 1000px">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h4 class="modal-title">Sensor Triggered Frequencies</h4>
|
||||
</div>
|
||||
<div id="modal_body" name="modal_body" class="modal-body">
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
]]>
|
||||
</Content>
|
||||
</Module>
|
||||
@ -0,0 +1,136 @@
|
||||
/*
|
||||
* Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* Licensed 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.
|
||||
*/
|
||||
|
||||
//method to set starting time to UI component calender date
|
||||
function setCalendarDate(start){
|
||||
var calendarTime=timeStampToCalendarDate(start);
|
||||
document.getElementById("calenderDate").innerHTML=calendarTime;
|
||||
}
|
||||
|
||||
//method that show triggered data in the upcoming range
|
||||
var showNext =function () {
|
||||
var currentStart = parseInt(document.getElementById('stt').value);
|
||||
var duration = parseInt(document.getElementById('gap').value);
|
||||
document.getElementById("stt").value =currentStart+duration;
|
||||
show();
|
||||
};
|
||||
//method that show triggered data in the previous range
|
||||
var showPrevious =function () {
|
||||
var currentStart = parseInt(document.getElementById('stt').value);
|
||||
var duration = parseInt(document.getElementById('gap').value);
|
||||
document.getElementById("stt").value =currentStart-duration;
|
||||
show();
|
||||
};
|
||||
//method will update output UI component
|
||||
function outputUpdate(num) {
|
||||
document.querySelector('#output').value = num;
|
||||
document.getElementById('stt').value =num;
|
||||
setCalendarDate(num);
|
||||
show();
|
||||
}
|
||||
//this will change value slider value according to current gap value
|
||||
function changeStep() {
|
||||
document.getElementById("valueSlider").step =document.getElementById("gap").value;
|
||||
}
|
||||
function timeStampToCalendarDate(time) {
|
||||
|
||||
var date = new Date(parseInt(time));
|
||||
var Months =["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
|
||||
return date.getFullYear()+" "+Months[date.getMonth()]+" "+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
|
||||
}
|
||||
//show data chunk
|
||||
function showChunk(start,chunk,tList,xList,yList) {
|
||||
var data2=[];
|
||||
var gap=document.getElementById("gap").value;
|
||||
var e=parseInt(start)+parseInt(chunk);
|
||||
for(i=0;i<tList.length;i=i+1){
|
||||
if(parseInt(tList[i])<e && parseInt(tList[i])>parseInt(start)){
|
||||
data2.push({x:xList[i] ,y:yList[i], c:((e-parseInt(tList[i]))*100/parseInt(gap))});
|
||||
}
|
||||
}
|
||||
return data2;
|
||||
}
|
||||
//show play data
|
||||
function doScaledTimeout(j,start,tList,chunk,xList,yList,cList) {
|
||||
setTimeout(function() {
|
||||
document.getElementById('stt').value=start;
|
||||
document.getElementById('output').value=start;
|
||||
setCalendarDate(start);
|
||||
|
||||
var data2=showChunk(start,chunk,tList,xList,yList,cList);
|
||||
|
||||
draw(data2);
|
||||
}, j * 300);
|
||||
}
|
||||
//colour schema for
|
||||
colorRed = d3.scale.linear().domain([20,100])
|
||||
.interpolate(d3.interpolateHcl)
|
||||
.range([d3.rgb('#F99FA2'),d3.rgb("#F72128"),]);
|
||||
|
||||
colorBlue = d3.scale.linear().domain([10,20])
|
||||
.interpolate(d3.interpolateHcl)
|
||||
.range([d3.rgb("#00C1FF"),d3.rgb('#6670AC')]);
|
||||
|
||||
colorGreen = d3.scale.linear().domain([10,0])
|
||||
.interpolate(d3.interpolateHcl)
|
||||
.range([d3.rgb("#0A7E03"),d3.rgb('#0FF300')]);
|
||||
|
||||
var tooltip = d3.select("body").append("div")
|
||||
.attr("class", "tooltip")
|
||||
.style("opacity", 0);
|
||||
|
||||
//timestamp to calendar date
|
||||
function tsToCal(gap,time) {
|
||||
var date = new Date(parseInt(time));
|
||||
var Months =["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
|
||||
if(gap < 60000){
|
||||
return date.getMinutes()+":"+date.getSeconds();
|
||||
|
||||
}
|
||||
else if(gap <=7200000) {
|
||||
return Months[date.getMonth()]+" "+date.getDate() + " " + date.getHours() + ":" + date.getMinutes();
|
||||
}
|
||||
else{
|
||||
return date.getFullYear()+" "+Months[date.getMonth()]+" "+date.getDate();
|
||||
}
|
||||
|
||||
}
|
||||
//reload UI
|
||||
function display() {
|
||||
window.location.reload();
|
||||
|
||||
};
|
||||
|
||||
//loading image to svg element
|
||||
function loadImage(x,y) {
|
||||
var image = d3.select("g").append("svg:image")
|
||||
.attr("xlink:href", "/portal/store/carbon.super/fs/gadget/location-data-visualizer/img/floor.jpg")
|
||||
.attr("width", 1500)
|
||||
.attr("height", 699)
|
||||
.attr("x",x)
|
||||
.attr("y",y);
|
||||
|
||||
}
|
||||
function changeImage(x,y) {
|
||||
imageX=imageX+x;
|
||||
imageY=imageY+y;
|
||||
loadImage(imageX,imageY);
|
||||
|
||||
}
|
||||
//colour schema
|
||||
colorData = d3.scale.linear().domain([10,0])
|
||||
.interpolate(d3.interpolateHcl)
|
||||
.range([d3.rgb(125,0,0),d3.rgb(255,0,0)]);
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,352 @@
|
||||
/**
|
||||
* d3.tip
|
||||
* Copyright (c) 2013 Justin Palmer
|
||||
*
|
||||
* Tooltips for d3.js SVG visualizations
|
||||
*/
|
||||
// eslint-disable-next-line no-extra-semi
|
||||
;(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module with d3 as a dependency.
|
||||
define([
|
||||
'd3-collection',
|
||||
'd3-selection'
|
||||
], factory)
|
||||
} else if (typeof module === 'object' && module.exports) {
|
||||
/* eslint-disable global-require */
|
||||
// CommonJS
|
||||
var d3Collection = require('d3-collection'),
|
||||
d3Selection = require('d3-selection')
|
||||
module.exports = factory(d3Collection, d3Selection)
|
||||
/* eslint-enable global-require */
|
||||
} else {
|
||||
// Browser global.
|
||||
var d3 = root.d3
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
root.d3.tip = factory(d3, d3)
|
||||
}
|
||||
}(this, function(d3Collection, d3Selection) {
|
||||
// Public - contructs a new tooltip
|
||||
//
|
||||
// Returns a tip
|
||||
return function() {
|
||||
var direction = d3TipDirection,
|
||||
offset = d3TipOffset,
|
||||
html = d3TipHTML,
|
||||
rootElement = document.body,
|
||||
node = initNode(),
|
||||
svg = null,
|
||||
point = null,
|
||||
target = null
|
||||
|
||||
function tip(vis) {
|
||||
svg = getSVGNode(vis)
|
||||
if (!svg) return
|
||||
point = svg.createSVGPoint()
|
||||
rootElement.appendChild(node)
|
||||
}
|
||||
|
||||
// Public - show the tooltip on the screen
|
||||
//
|
||||
// Returns a tip
|
||||
tip.show = function() {
|
||||
var args = Array.prototype.slice.call(arguments)
|
||||
if (args[args.length - 1] instanceof SVGElement) target = args.pop()
|
||||
|
||||
var content = html.apply(this, args),
|
||||
poffset = offset.apply(this, args),
|
||||
dir = direction.apply(this, args),
|
||||
nodel = getNodeEl(),
|
||||
i = directions.length,
|
||||
coords,
|
||||
scrollTop = document.documentElement.scrollTop ||
|
||||
rootElement.scrollTop,
|
||||
scrollLeft = document.documentElement.scrollLeft ||
|
||||
rootElement.scrollLeft
|
||||
|
||||
nodel.html(content)
|
||||
.style('opacity', 1).style('pointer-events', 'all')
|
||||
|
||||
while (i--) nodel.classed(directions[i], false)
|
||||
coords = directionCallbacks.get(dir).apply(this)
|
||||
nodel.classed(dir, true)
|
||||
.style('top', (coords.top + poffset[0]) + scrollTop + 'px')
|
||||
.style('left', (coords.left + poffset[1]) + scrollLeft + 'px')
|
||||
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public - hide the tooltip
|
||||
//
|
||||
// Returns a tip
|
||||
tip.hide = function() {
|
||||
var nodel = getNodeEl()
|
||||
nodel.style('opacity', 0).style('pointer-events', 'none')
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public: Proxy attr calls to the d3 tip container.
|
||||
// Sets or gets attribute value.
|
||||
//
|
||||
// n - name of the attribute
|
||||
// v - value of the attribute
|
||||
//
|
||||
// Returns tip or attribute value
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
tip.attr = function(n, v) {
|
||||
if (arguments.length < 2 && typeof n === 'string') {
|
||||
return getNodeEl().attr(n)
|
||||
}
|
||||
|
||||
var args = Array.prototype.slice.call(arguments)
|
||||
d3Selection.selection.prototype.attr.apply(getNodeEl(), args)
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public: Proxy style calls to the d3 tip container.
|
||||
// Sets or gets a style value.
|
||||
//
|
||||
// n - name of the property
|
||||
// v - value of the property
|
||||
//
|
||||
// Returns tip or style property value
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
tip.style = function(n, v) {
|
||||
if (arguments.length < 2 && typeof n === 'string') {
|
||||
return getNodeEl().style(n)
|
||||
}
|
||||
|
||||
var args = Array.prototype.slice.call(arguments)
|
||||
d3Selection.selection.prototype.style.apply(getNodeEl(), args)
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public: Set or get the direction of the tooltip
|
||||
//
|
||||
// v - One of n(north), s(south), e(east), or w(west), nw(northwest),
|
||||
// sw(southwest), ne(northeast) or se(southeast)
|
||||
//
|
||||
// Returns tip or direction
|
||||
tip.direction = function(v) {
|
||||
if (!arguments.length) return direction
|
||||
direction = v == null ? v : functor(v)
|
||||
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public: Sets or gets the offset of the tip
|
||||
//
|
||||
// v - Array of [x, y] offset
|
||||
//
|
||||
// Returns offset or
|
||||
tip.offset = function(v) {
|
||||
if (!arguments.length) return offset
|
||||
offset = v == null ? v : functor(v)
|
||||
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public: sets or gets the html value of the tooltip
|
||||
//
|
||||
// v - String value of the tip
|
||||
//
|
||||
// Returns html value or tip
|
||||
tip.html = function(v) {
|
||||
if (!arguments.length) return html
|
||||
html = v == null ? v : functor(v)
|
||||
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public: sets or gets the root element anchor of the tooltip
|
||||
//
|
||||
// v - root element of the tooltip
|
||||
//
|
||||
// Returns root node of tip
|
||||
tip.rootElement = function(v) {
|
||||
if (!arguments.length) return rootElement
|
||||
rootElement = v == null ? v : functor(v)
|
||||
|
||||
return tip
|
||||
}
|
||||
|
||||
// Public: destroys the tooltip and removes it from the DOM
|
||||
//
|
||||
// Returns a tip
|
||||
tip.destroy = function() {
|
||||
if (node) {
|
||||
getNodeEl().remove()
|
||||
node = null
|
||||
}
|
||||
return tip
|
||||
}
|
||||
|
||||
function d3TipDirection() { return 'n' }
|
||||
function d3TipOffset() { return [0, 0] }
|
||||
function d3TipHTML() { return ' ' }
|
||||
|
||||
var directionCallbacks = d3Collection.map({
|
||||
n: directionNorth,
|
||||
s: directionSouth,
|
||||
e: directionEast,
|
||||
w: directionWest,
|
||||
nw: directionNorthWest,
|
||||
ne: directionNorthEast,
|
||||
sw: directionSouthWest,
|
||||
se: directionSouthEast
|
||||
}),
|
||||
directions = directionCallbacks.keys()
|
||||
|
||||
function directionNorth() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.n.y - node.offsetHeight,
|
||||
left: bbox.n.x - node.offsetWidth / 2
|
||||
}
|
||||
}
|
||||
|
||||
function directionSouth() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.s.y,
|
||||
left: bbox.s.x - node.offsetWidth / 2
|
||||
}
|
||||
}
|
||||
|
||||
function directionEast() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.e.y - node.offsetHeight / 2,
|
||||
left: bbox.e.x
|
||||
}
|
||||
}
|
||||
|
||||
function directionWest() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.w.y - node.offsetHeight / 2,
|
||||
left: bbox.w.x - node.offsetWidth
|
||||
}
|
||||
}
|
||||
|
||||
function directionNorthWest() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.nw.y - node.offsetHeight,
|
||||
left: bbox.nw.x - node.offsetWidth
|
||||
}
|
||||
}
|
||||
|
||||
function directionNorthEast() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.ne.y - node.offsetHeight,
|
||||
left: bbox.ne.x
|
||||
}
|
||||
}
|
||||
|
||||
function directionSouthWest() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.sw.y,
|
||||
left: bbox.sw.x - node.offsetWidth
|
||||
}
|
||||
}
|
||||
|
||||
function directionSouthEast() {
|
||||
var bbox = getScreenBBox()
|
||||
return {
|
||||
top: bbox.se.y,
|
||||
left: bbox.se.x
|
||||
}
|
||||
}
|
||||
|
||||
function initNode() {
|
||||
var div = d3Selection.select(document.createElement('div'))
|
||||
div
|
||||
.style('position', 'absolute')
|
||||
.style('top', 0)
|
||||
.style('opacity', 0)
|
||||
.style('pointer-events', 'none')
|
||||
.style('box-sizing', 'border-box')
|
||||
|
||||
return div.node()
|
||||
}
|
||||
|
||||
function getSVGNode(element) {
|
||||
var svgNode = element.node()
|
||||
if (!svgNode) return null
|
||||
if (svgNode.tagName.toLowerCase() === 'svg') return svgNode
|
||||
return svgNode.ownerSVGElement
|
||||
}
|
||||
|
||||
function getNodeEl() {
|
||||
if (node == null) {
|
||||
node = initNode()
|
||||
// re-add node to DOM
|
||||
rootElement.appendChild(node)
|
||||
}
|
||||
return d3Selection.select(node)
|
||||
}
|
||||
|
||||
// Private - gets the screen coordinates of a shape
|
||||
//
|
||||
// Given a shape on the screen, will return an SVGPoint for the directions
|
||||
// n(north), s(south), e(east), w(west), ne(northeast), se(southeast),
|
||||
// nw(northwest), sw(southwest).
|
||||
//
|
||||
// +-+-+
|
||||
// | |
|
||||
// + +
|
||||
// | |
|
||||
// +-+-+
|
||||
//
|
||||
// Returns an Object {n, s, e, w, nw, sw, ne, se}
|
||||
function getScreenBBox() {
|
||||
var targetel = target || d3Selection.event.target
|
||||
|
||||
while (targetel.getScreenCTM == null && targetel.parentNode == null) {
|
||||
targetel = targetel.parentNode
|
||||
}
|
||||
|
||||
var bbox = {},
|
||||
matrix = targetel.getScreenCTM(),
|
||||
tbbox = targetel.getBBox(),
|
||||
width = tbbox.width,
|
||||
height = tbbox.height,
|
||||
x = tbbox.x,
|
||||
y = tbbox.y
|
||||
|
||||
point.x = x
|
||||
point.y = y
|
||||
bbox.nw = point.matrixTransform(matrix)
|
||||
point.x += width
|
||||
bbox.ne = point.matrixTransform(matrix)
|
||||
point.y += height
|
||||
bbox.se = point.matrixTransform(matrix)
|
||||
point.x -= width
|
||||
bbox.sw = point.matrixTransform(matrix)
|
||||
point.y -= height / 2
|
||||
bbox.w = point.matrixTransform(matrix)
|
||||
point.x += width
|
||||
bbox.e = point.matrixTransform(matrix)
|
||||
point.x -= width / 2
|
||||
point.y -= height / 2
|
||||
bbox.n = point.matrixTransform(matrix)
|
||||
point.y += height
|
||||
bbox.s = point.matrixTransform(matrix)
|
||||
|
||||
return bbox
|
||||
}
|
||||
|
||||
// Private - replace D3JS 3.X d3.functor() function
|
||||
function functor(v) {
|
||||
return typeof v === 'function' ? v : function() {
|
||||
return v
|
||||
}
|
||||
}
|
||||
|
||||
return tip
|
||||
}
|
||||
// eslint-disable-next-line semi
|
||||
}));
|
||||
|
After Width: | Height: | Size: 204 KiB |
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue