Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
iCity
EnergyDashboard
Commits
716ef393
Commit
716ef393
authored
Jun 24, 2021
by
Pithon Kabiro
Browse files
Export chart drawing functions for use in Cesium app
parent
268a2bbc
Changes
2
Hide whitespace changes
Inline
Side-by-side
public/js/appCesium.js
View file @
716ef393
"
use strict
"
;
"
use strict
"
;
// Functions
import
{
getDatastreamIdFromBuildingNumber
,
getObservationsUrl
,
createTemporalFilterString
,
formatSTAResponseForHeatMap
,
drawHeatMapHC
,
formatSTAResponseForLineChart
,
drawLineChartHC
,
followNextLink
,
}
from
"
./appChart.js
"
;
// Constants
import
{
BASE_URL
,
PARAM_RESULT_FORMAT
,
PARAM_ORDER_BY
,
PARAM_SELECT
,
}
from
"
./appChart.js
"
;
Cesium
.
Ion
.
defaultAccessToken
=
Cesium
.
Ion
.
defaultAccessToken
=
"
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyODgxYzJlNi1kNDZiLTQ3ZmQtYmUxYy0yMWI0OGM3NDA5MzAiLCJpZCI6NDczOSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MTUyMzU0MX0.shj2hM3pvsvcmE_wMb2aBDuk_cKWmFmbolltInGImwU
"
;
"
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyODgxYzJlNi1kNDZiLTQ3ZmQtYmUxYy0yMWI0OGM3NDA5MzAiLCJpZCI6NDczOSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MTUyMzU0MX0.shj2hM3pvsvcmE_wMb2aBDuk_cKWmFmbolltInGImwU
"
;
...
@@ -269,6 +289,57 @@ const activate3DTileFeaturePicking = function () {
...
@@ -269,6 +289,57 @@ const activate3DTileFeaturePicking = function () {
</tbody>
</tbody>
</table>
</table>
`
;
`
;
const
clickedBuilding
=
pickedFeature
.
getProperty
(
"
_gebaeude
"
);
const
clickedBuildingDatastreamId
=
getDatastreamIdFromBuildingNumber
(
clickedBuilding
,
"
vl
"
,
"
60min
"
);
const
BASE_URL_OBSERVATIONS
=
getObservationsUrl
(
BASE_URL
,
clickedBuildingDatastreamId
);
const
PARAM_FILTER
=
createTemporalFilterString
(
"
2020-01-01
"
,
"
2021-01-01
"
);
const
axiosGetRequest
=
axios
.
get
(
BASE_URL_OBSERVATIONS
,
{
params
:
{
"
$resultFormat
"
:
PARAM_RESULT_FORMAT
,
"
$orderBy
"
:
PARAM_ORDER_BY
,
"
$filter
"
:
PARAM_FILTER
,
"
$select
"
:
PARAM_SELECT
,
},
});
// Get "ALL" the Observations that satisfy our query
followNextLink
(
axiosGetRequest
)
.
then
((
success
)
=>
{
const
successValue
=
success
.
data
.
value
;
// Array that will hold the combined observations
const
combinedObservations
=
[];
successValue
.
forEach
((
dataObj
)
=>
{
// Each page of results will have a dataArray that holds the observations
const
dataArrays
=
dataObj
.
dataArray
;
combinedObservations
.
push
(...
dataArrays
);
});
// DEBUG: Check total number of observations
console
.
log
(
combinedObservations
.
length
);
// DEBUG: Print the array of observations
console
.
log
(
combinedObservations
);
return
combinedObservations
;
})
.
catch
((
err
)
=>
{
console
.
log
(
err
);
})
.
then
((
observationArr
)
=>
{
drawHeatMapHC
(
formatSTAResponseForHeatMap
(
observationArr
));
drawLineChartHC
(
formatSTAResponseForLineChart
(
observationArr
));
});
},
Cesium
.
ScreenSpaceEventType
.
LEFT_CLICK
);
},
Cesium
.
ScreenSpaceEventType
.
LEFT_CLICK
);
};
};
...
...
public/js/appChart.js
View file @
716ef393
...
@@ -4,9 +4,9 @@
...
@@ -4,9 +4,9 @@
// Observations WITHOUT data gap - Bau 225 / Datastream ID = 80
// Observations WITHOUT data gap - Bau 225 / Datastream ID = 80
// Observations WITH data gap - Bau 112 / Datastream ID = 78
// Observations WITH data gap - Bau 112 / Datastream ID = 78
const
BASE_URL
=
"
http://193.196.39.91:8080/frost-icity-tp31/v1.1
"
;
export
const
BASE_URL
=
"
http://193.196.39.91:8080/frost-icity-tp31/v1.1
"
;
const
getDatastreamIdFromBuildingNumber
=
function
(
export
const
getDatastreamIdFromBuildingNumber
=
function
(
buildingNumber
,
buildingNumber
,
phenomenon
,
phenomenon
,
samplingRate
samplingRate
...
@@ -77,9 +77,9 @@ const getDatastreamIdFromBuildingNumber = function (
...
@@ -77,9 +77,9 @@ const getDatastreamIdFromBuildingNumber = function (
* @param {Number} datastreamID - Integer representing the Datastream ID
* @param {Number} datastreamID - Integer representing the Datastream ID
* @returns {String} URL string for fetching the Observations corresponding to a Datastream
* @returns {String} URL string for fetching the Observations corresponding to a Datastream
*/
*/
const
getObservationsUrl
=
function
(
datastreamID
)
{
export
const
getObservationsUrl
=
function
(
baseUrl
,
datastreamID
)
{
if
(
!
datastreamID
)
return
;
if
(
!
datastreamID
)
return
;
const
fullDatastreamURL
=
`
${
BASE_URL
}
/Datastreams(
${
datastreamID
}
)/Observations`
;
const
fullDatastreamURL
=
`
${
baseUrl
}
/Datastreams(
${
datastreamID
}
)/Observations`
;
return
fullDatastreamURL
;
return
fullDatastreamURL
;
};
};
...
@@ -89,33 +89,33 @@ const getObservationsUrl = function (datastreamID) {
...
@@ -89,33 +89,33 @@ const getObservationsUrl = function (datastreamID) {
* @param {String} dateStop Stop date in YYYY-MM-DD format
* @param {String} dateStop Stop date in YYYY-MM-DD format
* @returns {String} Temporal filter string
* @returns {String} Temporal filter string
*/
*/
const
createTemporalFilterString
=
function
(
dateStart
,
dateStop
)
{
export
const
createTemporalFilterString
=
function
(
dateStart
,
dateStop
)
{
if
(
!
dateStart
||
!
dateStop
)
return
;
if
(
!
dateStart
||
!
dateStop
)
return
;
const
filterString
=
`resultTime ge
${
dateStart
}
T00:00:00.000Z and resultTime le
${
dateStop
}
T00:00:00.000Z`
;
const
filterString
=
`resultTime ge
${
dateStart
}
T00:00:00.000Z and resultTime le
${
dateStop
}
T00:00:00.000Z`
;
return
filterString
;
return
filterString
;
};
};
const
BASE_URL_OBSERVATIONS
=
getObservationsUrl
(
80
);
//
const BASE_URL_OBSERVATIONS = getObservationsUrl(80);
const
PARAM_RESULT_FORMAT
=
"
dataArray
"
;
export
const
PARAM_RESULT_FORMAT
=
"
dataArray
"
;
const
PARAM_ORDER_BY
=
"
phenomenonTime asc
"
;
export
const
PARAM_ORDER_BY
=
"
phenomenonTime asc
"
;
const
PARAM_FILTER
=
createTemporalFilterString
(
"
2020-01-01
"
,
"
2021-01-01
"
);
//
const PARAM_FILTER = createTemporalFilterString("2020-01-01", "2021-01-01");
const
PARAM_SELECT
=
"
result,phenomenonTime
"
;
export
const
PARAM_SELECT
=
"
result,phenomenonTime
"
;
const
axiosGetRequest
=
axios
.
get
(
BASE_URL_OBSERVATIONS
,
{
//
const axiosGetRequest = axios.get(BASE_URL_OBSERVATIONS, {
params
:
{
//
params: {
"
$resultFormat
"
:
PARAM_RESULT_FORMAT
,
//
"$resultFormat": PARAM_RESULT_FORMAT,
"
$orderBy
"
:
PARAM_ORDER_BY
,
//
"$orderBy": PARAM_ORDER_BY,
"
$filter
"
:
PARAM_FILTER
,
//
"$filter": PARAM_FILTER,
"
$select
"
:
PARAM_SELECT
,
//
"$select": PARAM_SELECT,
},
//
},
});
//
});
/**
/**
* Format the response from SensorThings API to make it suitable for heatmap
* Format the response from SensorThings API to make it suitable for heatmap
* @param {Array} obsArray Response from SensorThings API as array
* @param {Array} obsArray Response from SensorThings API as array
* @returns {Array} Array of formatted observations suitable for use in a heatmap
* @returns {Array} Array of formatted observations suitable for use in a heatmap
*/
*/
const
formatSTAResponseForHeatMap
=
function
(
obsArray
)
{
export
const
formatSTAResponseForHeatMap
=
function
(
obsArray
)
{
const
dataSTAFormatted
=
[];
const
dataSTAFormatted
=
[];
obsArray
.
forEach
((
obs
)
=>
{
obsArray
.
forEach
((
obs
)
=>
{
// Get the date/time string; first element in input array; remove trailing "Z"
// Get the date/time string; first element in input array; remove trailing "Z"
...
@@ -141,7 +141,7 @@ const formatSTAResponseForHeatMap = function (obsArray) {
...
@@ -141,7 +141,7 @@ const formatSTAResponseForHeatMap = function (obsArray) {
* @param {Array} obsArray Response from SensorThings API
* @param {Array} obsArray Response from SensorThings API
* @returns {Object} Highcharts library heatmap object
* @returns {Object} Highcharts library heatmap object
*/
*/
const
drawHeatMapHC
=
function
(
obsArray
)
{
export
const
drawHeatMapHC
=
function
(
formattedObsArrayForHeatmap
)
{
Highcharts
.
chart
(
"
chart-heatmap
"
,
{
Highcharts
.
chart
(
"
chart-heatmap
"
,
{
chart
:
{
chart
:
{
type
:
"
heatmap
"
,
type
:
"
heatmap
"
,
...
@@ -215,7 +215,7 @@ const drawHeatMapHC = function (obsArray) {
...
@@ -215,7 +215,7 @@ const drawHeatMapHC = function (obsArray) {
series
:
[
series
:
[
{
{
data
:
format
STAResponse
ForHeat
M
ap
(
obsArray
)
,
data
:
format
tedObsArray
ForHeat
m
ap
,
boostThreshold
:
100
,
boostThreshold
:
100
,
borderWidth
:
0
,
borderWidth
:
0
,
nullColor
:
"
#525252
"
,
nullColor
:
"
#525252
"
,
...
@@ -236,7 +236,7 @@ const drawHeatMapHC = function (obsArray) {
...
@@ -236,7 +236,7 @@ const drawHeatMapHC = function (obsArray) {
* @param {Array} obsArray Response from SensorThings API as array
* @param {Array} obsArray Response from SensorThings API as array
* @returns {Array} Array of formatted observations suitable for use in a line chart
* @returns {Array} Array of formatted observations suitable for use in a line chart
*/
*/
const
formatSTAResponseForLineChart
=
function
(
obsArray
)
{
export
const
formatSTAResponseForLineChart
=
function
(
obsArray
)
{
const
dataSTAFormatted
=
[];
const
dataSTAFormatted
=
[];
obsArray
.
forEach
((
result
)
=>
{
obsArray
.
forEach
((
result
)
=>
{
const
timestampObs
=
new
Date
(
result
[
0
].
slice
(
0
,
-
1
)).
getTime
();
// slice() removes trailing "Z" character in timestamp
const
timestampObs
=
new
Date
(
result
[
0
].
slice
(
0
,
-
1
)).
getTime
();
// slice() removes trailing "Z" character in timestamp
...
@@ -251,7 +251,7 @@ const formatSTAResponseForLineChart = function (obsArray) {
...
@@ -251,7 +251,7 @@ const formatSTAResponseForLineChart = function (obsArray) {
* @param {Array} obsArray - Response from SensorThings API
* @param {Array} obsArray - Response from SensorThings API
* @returns {Object} Highcharts library line chart object
* @returns {Object} Highcharts library line chart object
*/
*/
const
drawLineChartHC
=
function
(
obsArray
)
{
export
const
drawLineChartHC
=
function
(
formattedObsArrayForLineChart
)
{
// Create the chart
// Create the chart
Highcharts
.
stockChart
(
"
chart-line
"
,
{
Highcharts
.
stockChart
(
"
chart-line
"
,
{
chart
:
{
chart
:
{
...
@@ -269,7 +269,7 @@ const drawLineChartHC = function (obsArray) {
...
@@ -269,7 +269,7 @@ const drawLineChartHC = function (obsArray) {
series
:
[
series
:
[
{
{
name
:
"
AAPL
"
,
name
:
"
AAPL
"
,
data
:
format
STAResponse
ForLineChart
(
obsArray
)
,
data
:
format
tedObsArray
ForLineChart
,
tooltip
:
{
tooltip
:
{
valueDecimals
:
2
,
valueDecimals
:
2
,
},
},
...
@@ -286,7 +286,7 @@ const drawLineChartHC = function (obsArray) {
...
@@ -286,7 +286,7 @@ const drawLineChartHC = function (obsArray) {
* @param {Object} responsePromise Promise object
* @param {Object} responsePromise Promise object
* @returns {Object} - Object containing results from all the "@iot.nextLink" links
* @returns {Object} - Object containing results from all the "@iot.nextLink" links
*/
*/
const
followNextLink
=
function
(
responsePromise
)
{
export
const
followNextLink
=
function
(
responsePromise
)
{
return
responsePromise
return
responsePromise
.
then
(
function
(
lastSuccess
)
{
.
then
(
function
(
lastSuccess
)
{
if
(
lastSuccess
.
data
[
"
@iot.nextLink
"
])
{
if
(
lastSuccess
.
data
[
"
@iot.nextLink
"
])
{
...
@@ -308,30 +308,30 @@ const followNextLink = function (responsePromise) {
...
@@ -308,30 +308,30 @@ const followNextLink = function (responsePromise) {
};
};
// Get "ALL" the Observations that satisfy our query
// Get "ALL" the Observations that satisfy our query
followNextLink
(
axiosGetRequest
)
//
followNextLink(axiosGetRequest)
.
then
((
success
)
=>
{
//
.then((success) => {
const
successValue
=
success
.
data
.
value
;
//
const successValue = success.data.value;
// Array that will hold the combined observations
//
// Array that will hold the combined observations
const
combinedObservations
=
[];
//
const combinedObservations = [];
successValue
.
forEach
((
dataObj
)
=>
{
//
successValue.forEach((dataObj) => {
// Each page of results will have a dataArray that holds the observations
//
// Each page of results will have a dataArray that holds the observations
const
dataArrays
=
dataObj
.
dataArray
;
//
const dataArrays = dataObj.dataArray;
combinedObservations
.
push
(...
dataArrays
);
//
combinedObservations.push(...dataArrays);
});
//
});
// DEBUG: Check total number of observations
//
// DEBUG: Check total number of observations
console
.
log
(
combinedObservations
.
length
);
//
console.log(combinedObservations.length);
// DEBUG: Print the array of observations
//
// DEBUG: Print the array of observations
console
.
log
(
combinedObservations
);
//
console.log(combinedObservations);
return
combinedObservations
;
//
return combinedObservations;
})
//
})
.
catch
((
err
)
=>
{
//
.catch((err) => {
console
.
log
(
err
);
//
console.log(err);
})
//
})
.
then
((
observationArr
)
=>
{
//
.then((observationArr) => {
drawHeatMapHC
(
observationArr
);
//
drawHeatMapHC(observationArr);
drawLineChartHC
(
observationArr
);
//
drawLineChartHC(observationArr);
});
//
});
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment