Skip to content
GitLab
Commit 86bff050 authored by Sven Schneider's avatar Sven Schneider
Browse files

added aggregation method into appCharts.js

parent 02bd3700
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 770 additions and 614 deletions
+770 -614
index.html
+ 84
- 115
View file @ 86bff050
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="description" content="" /> <meta name="description" content="" />
<meta name="author" content="" /> <meta name="author" content="" />
<title>Dashboard - iCity Bosch</title> <title>Dashboard - iCity Bosch</title>
<link href="css/styles.css" rel="stylesheet" /> <link href="css/styles.css" rel="stylesheet" />
<link <link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet" crossorigin="anonymous" />
href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css"
rel="stylesheet"
crossorigin="anonymous"
/>
<!-- Font Awesome icons --> <!-- Font Awesome icons -->
<script <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" crossorigin="anonymous"></script>
src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js"
crossorigin="anonymous"
></script>
<!-- Axios --> <!-- Axios -->
<!-- <script src="./node_modules/axios/dist/axios.min.js"></script> --> <!-- <script src="./node_modules/axios/dist/axios.min.js"></script> -->
...@@ -46,37 +37,23 @@ ...@@ -46,37 +37,23 @@
<!-- Cesium lib --> <!-- Cesium lib -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.48/Build/Cesium/Cesium.js"></script> <script src="https://cesium.com/downloads/cesiumjs/releases/1.48/Build/Cesium/Cesium.js"></script>
<link <link href="https://cesium.com/downloads/cesiumjs/releases/1.48/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
href="https://cesium.com/downloads/cesiumjs/releases/1.48/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"
/>
<!-- Bootstrap dashboard template --> <!-- Bootstrap dashboard template -->
<script <script defer src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
defer <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
crossorigin="anonymous"
></script>
<script
defer
src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"
></script>
<script defer src="js/thirdparty/scripts.js"></script> <script defer src="js/thirdparty/scripts.js"></script>
<!-- <!--
Custom JS --> Custom JS -->
<script defer type="module" src="js/appCesium.js"></script> <script defer type="module" src="js/appCesium.js"></script>
<script defer type="module" src="js/appChart.js"></script> <script defer type="module" src="js/appChart.js"></script>
</head> </head>
<body class="sb-nav-fixed">
<body class="sb-nav-fixed">
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark"> <nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">iCity Bosch Dashboard</a> <a class="navbar-brand" href="index.html">iCity Bosch Dashboard</a>
<button <button class="btn btn-link btn-sm order-1 order-lg-0" id="sidebarToggle" href="#">
class="btn btn-link btn-sm order-1 order-lg-0"
id="sidebarToggle"
href="#"
>
<i class="fas fa-bars"></i> <i class="fas fa-bars"></i>
</button> </button>
</nav> </nav>
...@@ -108,15 +85,11 @@ ...@@ -108,15 +85,11 @@
<div class="col-xl-12"> <div class="col-xl-12">
<div class="card mb-4"> <div class="card mb-4">
<div class="card-header"> <div class="card-header">
<i class="fas fa-globe mr-1"></i> <i class="fas fa-globe mr-1"></i> 3D Visualization
3D Visualization
</div> </div>
<div class="card-body"> <div class="card-body">
<div <div id="cesiumGlobeContainer" width="100%" height="40">
id="cesiumGlobeContainer" </div>
width="100%"
height="40"
></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -125,8 +98,7 @@ ...@@ -125,8 +98,7 @@
<div class="col-xl-6"> <div class="col-xl-6">
<div class="card mb-4"> <div class="card mb-4">
<div class="card-header"> <div class="card-header">
<i class="fas fa-chart-line mr-1"></i> <i class="fas fa-chart-line mr-1"></i> Line Chart Example
Line Chart Example
</div> </div>
<div class="card-body"> <div class="card-body">
<div id="chart-line" width="100%" height="40"></div> <div id="chart-line" width="100%" height="40"></div>
...@@ -136,8 +108,7 @@ ...@@ -136,8 +108,7 @@
<div class="col-xl-6"> <div class="col-xl-6">
<div class="card mb-4"> <div class="card mb-4">
<div class="card-header"> <div class="card-header">
<i class="fas fa-chart-area mr-1"></i> <i class="fas fa-chart-area mr-1"></i> Area Chart Example
Area Chart Example
</div> </div>
<div class="card-body"> <div class="card-body">
<div id="chart-heatmap" width="100%" height="40"></div> <div id="chart-heatmap" width="100%" height="40"></div>
...@@ -149,13 +120,10 @@ ...@@ -149,13 +120,10 @@
</main> </main>
<footer class="py-4 bg-light mt-auto"> <footer class="py-4 bg-light mt-auto">
<div class="container-fluid"> <div class="container-fluid">
<div <div class="d-flex align-items-center justify-content-between small">
class="d-flex align-items-center justify-content-between small"
>
<div class="text-muted">Copyright &copy; HfT Stuttgart 2021</div> <div class="text-muted">Copyright &copy; HfT Stuttgart 2021</div>
<div> <div>
<a href="#">Privacy Policy</a> <a href="#">Privacy Policy</a> &middot;
&middot;
<a href="#">Terms &amp; Conditions</a> <a href="#">Terms &amp; Conditions</a>
</div> </div>
</div> </div>
...@@ -163,5 +131,6 @@ ...@@ -163,5 +131,6 @@
</footer> </footer>
</div> </div>
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file
public/js/appCesium.js
+ 264
- 259
View file @ 86bff050
...@@ -10,6 +10,7 @@ import { ...@@ -10,6 +10,7 @@ import {
formatSTAResponseForLineChart, formatSTAResponseForLineChart,
drawLineChartHC, drawLineChartHC,
followNextLink, followNextLink,
aggregateResponse,
} from "./appChart.js"; } from "./appChart.js";
// Constants // Constants
...@@ -40,23 +41,22 @@ const viewer = new Cesium.Viewer("cesiumGlobeContainer", { ...@@ -40,23 +41,22 @@ const viewer = new Cesium.Viewer("cesiumGlobeContainer", {
* @param {String} urlTiles URL to the 3DTiles to be loaded * @param {String} urlTiles URL to the 3DTiles to be loaded
* @returns {undefined} undefined * @returns {undefined} undefined
*/ */
const loadTiles = function (urlTiles) { const loadTiles = function(urlTiles) {
const tileset = new Cesium.Cesium3DTileset({ const tileset = new Cesium.Cesium3DTileset({
url: urlTiles, url: urlTiles,
}); });
viewer.scene.primitives.add(tileset); viewer.scene.primitives.add(tileset);
tileset.readyPromise.then(function () { tileset.readyPromise.then(function() {
viewer viewer
.zoomTo( .zoomTo(
tileset, tileset,
new Cesium.HeadingPitchRange( new Cesium.HeadingPitchRange(
0.0, 0.0, -0.5,
-0.5,
tileset.boundingSphere.radius / 0.5 tileset.boundingSphere.radius / 0.5
) )
) )
.otherwise(function (err) { .otherwise(function(err) {
throw err; throw err;
}); });
}); });
...@@ -67,7 +67,7 @@ const loadTiles = function (urlTiles) { ...@@ -67,7 +67,7 @@ const loadTiles = function (urlTiles) {
* @param{*} * @param{*}
* @returns {undefined} undefined * @returns {undefined} undefined
*/ */
const loadNonDetailed = function () { const loadNonDetailed = function() {
// Paths to data sources // Paths to data sources
const URL_3DTILES = "data_3d/3dtiles/1_full/tileset.json"; const URL_3DTILES = "data_3d/3dtiles/1_full/tileset.json";
...@@ -81,7 +81,7 @@ const loadNonDetailed = function () { ...@@ -81,7 +81,7 @@ const loadNonDetailed = function () {
* @param {String} gltfId Name of the glTF model file without the extension i.e. exclude the `.gltf` suffix * @param {String} gltfId Name of the glTF model file without the extension i.e. exclude the `.gltf` suffix
* @returns {undefined} undefined * @returns {undefined} undefined
*/ */
const gltfLoad = function (gltfUrl, gltfId) { const gltfLoad = function(gltfUrl, gltfId) {
const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame( const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(9.083385, 48.881342, 0) Cesium.Cartesian3.fromDegrees(9.083385, 48.881342, 0)
); );
...@@ -101,7 +101,7 @@ const gltfLoad = function (gltfUrl, gltfId) { ...@@ -101,7 +101,7 @@ const gltfLoad = function (gltfUrl, gltfId) {
* @param{*} * @param{*}
* @returns {undefined} undefined * @returns {undefined} undefined
*/ */
const loadDetailed = function () { const loadDetailed = function() {
// Paths to data sources // Paths to data sources
const URL_3DTILES = "data_3d/3dtiles/2_partial/tileset.json"; const URL_3DTILES = "data_3d/3dtiles/2_partial/tileset.json";
const URL_GLTF = "data_3d/gltf"; const URL_GLTF = "data_3d/gltf";
...@@ -166,7 +166,7 @@ if (!LOAD_DETAILED_BLDG225) { ...@@ -166,7 +166,7 @@ if (!LOAD_DETAILED_BLDG225) {
* @param {*} * @param {*}
* @returns {undefined} * @returns {undefined}
*/ */
const activate3DTileFeaturePicking = function () { const activate3DTileFeaturePicking = function() {
// HTML overlay for showing feature name on mouseover // HTML overlay for showing feature name on mouseover
const nameOverlay = document.createElement("div"); const nameOverlay = document.createElement("div");
viewer.container.appendChild(nameOverlay); viewer.container.appendChild(nameOverlay);
...@@ -312,6 +312,7 @@ const activate3DTileFeaturePicking = function () { ...@@ -312,6 +312,7 @@ const activate3DTileFeaturePicking = function () {
}, },
}); });
// Get "ALL" the Observations that satisfy our query // Get "ALL" the Observations that satisfy our query
followNextLink(axiosGetRequest) followNextLink(axiosGetRequest)
.then((success) => { .then((success) => {
...@@ -337,10 +338,14 @@ const activate3DTileFeaturePicking = function () { ...@@ -337,10 +338,14 @@ const activate3DTileFeaturePicking = function () {
console.log(err); console.log(err);
}) })
.then((observationArr) => { .then((observationArr) => {
var agg = aggregateResponse(observationArr, 0, 'mean');
console.log(agg);
drawHeatMapHC(formatSTAResponseForHeatMap(observationArr)); drawHeatMapHC(formatSTAResponseForHeatMap(observationArr));
drawLineChartHC(formatSTAResponseForLineChart(observationArr)); drawLineChartHC(formatSTAResponseForLineChart(observationArr));
}); });
}, Cesium.ScreenSpaceEventType.LEFT_CLICK); }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}; };
activate3DTileFeaturePicking(); activate3DTileFeaturePicking();
\ No newline at end of file
public/js/appChart.js
+ 422
- 240
View file @ 86bff050
...@@ -13,7 +13,7 @@ export const BASE_URL = "http://193.196.39.91:8080/frost-icity-tp31/v1.1"; ...@@ -13,7 +13,7 @@ export const BASE_URL = "http://193.196.39.91:8080/frost-icity-tp31/v1.1";
* @param {*} samplingRate String representing the sampling rate of the observations * @param {*} samplingRate String representing the sampling rate of the observations
* @returns {Number} Datastream corresponding to the input building * @returns {Number} Datastream corresponding to the input building
*/ */
export const getDatastreamIdFromBuildingNumber = function ( export const getDatastreamIdFromBuildingNumber = function(
buildingNumber, buildingNumber,
phenomenon, phenomenon,
samplingRate samplingRate
...@@ -86,7 +86,7 @@ export const getDatastreamIdFromBuildingNumber = function ( ...@@ -86,7 +86,7 @@ export 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
*/ */
export const getObservationsUrl = function (baseUrl, datastreamID) { export const getObservationsUrl = function(baseUrl, datastreamID) {
if (!datastreamID) return; if (!datastreamID) return;
const fullDatastreamURL = `${baseUrl}/Datastreams(${datastreamID})/Observations`; const fullDatastreamURL = `${baseUrl}/Datastreams(${datastreamID})/Observations`;
return fullDatastreamURL; return fullDatastreamURL;
...@@ -98,7 +98,7 @@ export const getObservationsUrl = function (baseUrl, datastreamID) { ...@@ -98,7 +98,7 @@ export const getObservationsUrl = function (baseUrl, 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
*/ */
export 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;
...@@ -119,12 +119,199 @@ export const PARAM_SELECT = "result,phenomenonTime"; ...@@ -119,12 +119,199 @@ export const PARAM_SELECT = "result,phenomenonTime";
// }, // },
// }); // });
/**
*
* @param {JSON} obj JSON object on which to replace a specific key.
* @param {String} oldKey is the old key in the JSON to be renamed to newKey
* @param {String} newKey is the key that should replace the oldKey
* usage: myjson.forEach((obj) => renameKey(obj, "oldkey", "newkey"));
*/
function renameKey(obj, oldKey, newKey) {
obj[newKey] = obj[oldKey];
delete obj[oldKey];
}
/**
*
* @param {Array} arr is the Array to be converted into a JSON
* @returns {JSON} stringToJsonObject
*/
function convertArray2JSON(arr) {
var arrayToString = JSON.stringify(Object.assign({}, arr)); // convert array to string
var stringToJsonObject = JSON.parse(arrayToString); // convert string to json object
return stringToJsonObject;
}
function createDateFromDateTimeString(jsonData) {
let datx = [];
let daty = [];
const MONTH = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
for (var u = 0; u < jsonData.length; u++) {
daty.push(jsonData[u].temperature);
let date = new Date(jsonData[u].datetime);
let datum = date.getDate();
let month = MONTH[date.getMonth()];
let hour = date.getHours() + ":00";
let newDateStr = datum + "/" + month + "-" + hour;
datx.push(newDateStr);
}
return [datx, daty];
}
/**
* Format the response from SensorThings API to make it suitable for heatmap
* @param {Array} obsArray Response from SensorThings API as array
* @param {Int8} hours Number of hours to aggregate over. If hours=0,
* it will be aggregated by date (e.g. all values recorded on 1st of May etc...)
* if hours to any number (also hours=24) data will be aggregated over every 24hours,
* even if the date changes (e.g. data from 1st of May from 10pm up 9pm on 2nd of May etc.)
* @param {String} method Specify how to aggregate date. Use: 'mean' = default, 'sum', 'min' or 'max'
* @returns {Array} Aggregated Response
*/
export const aggregateResponse = function(obsArray, hours, method) {
if (!obsArray) return;
if (hours < 0) return;
// check if we have a defined method or the method specified is accepted, rest is handeled in switch/case below
if (method == undefined) method = 'mean';
// convert obsArray to json
let jsonFromArr = [];
for (var i = 0; i < obsArray.length; i++) {
jsonFromArr.push(convertArray2JSON(obsArray[i]));
}
// rename the keys in the jason
jsonFromArr.forEach((obj) => renameKey(obj, "0", "datetime"));
let jsonData = jsonFromArr;
jsonData.forEach((obj) => renameKey(obj, "1", "temperature"));
let newOutput = [];
var aggDates = [];
var aggregatedVals = [];
var vals = []; // store values temporarily to use for processing
if (hours == 0) { // i.e. aggregate over one Date / Day
var currentDate;
var oldDate;
for (var d = 0; d < jsonData.length; d++) {
let tmpDate = new Date(jsonData[d].datetime);
currentDate = tmpDate.getDate(); // gets the day of the month 1...31
if (d === 0) oldDate = currentDate;
if (currentDate == oldDate) {
vals.push(jsonData[d].temperature);
} else {
aggDates.push(new Date(tmpDate - 1));
if (vals.length == 0) {
aggregatedVals.push(-1);
oldDate = currentDate;
continue;
}
switch (method) {
case 'mean':
aggregatedVals.push(vals.reduce(function(a, b) { return a + b / vals.length; }, 0));
break;
case 'sum':
aggregatedVals.push(vals.reduce(function(a, b) { return a + b; }, 0));
break;
case 'min':
aggregatedVals.push(vals.reduce(function(a, b) { return Math.min(a, b); }));
break;
case 'max':
aggregatedVals.push(vals.reduce(function(a, b) { return Math.max(a, b); }));
break;
default:
aggregatedVals.push(vals.reduce(function(a, b) { return a + b / vals.length; }, 0));
}
vals = []; // clear the daily value vector
vals.push(jsonData[d].temperature); // now push first entry of new day into my temp value vector.
}
oldDate = currentDate;
} // end of for loop
// create output to be in the same List format as the original data from obsArray.
for (let i = 0; i < aggregatedVals.length; i++) {
newOutput.push([aggDates[i].toISOString(), aggregatedVals[i]]);
}
} else { // i.e. aggregate over X hours, irrespective of the day.
let cnt = 0;
let cumHours = 0;
for (var d = 0; d < jsonData.length; d++) {
if (cnt < hours) {
vals.push(jsonData[d].temperature);
cnt++;
} else {
cumHours += cnt;
cnt = 0;
aggDates.push(cumHours);
if (vals.length == 0) {
aggregatedVals.push(-1);
continue;
}
switch (method) {
case 'mean':
aggregatedVals.push(vals.reduce(function(a, b) { return a + b / vals.length; }, 0));
break;
case 'sum':
aggregatedVals.push(vals.reduce(function(a, b) { return a + b; }, 0));
break;
case 'min':
aggregatedVals.push(vals.reduce(function(a, b) { return Math.min(a, b); }));
break;
case 'max':
aggregatedVals.push(vals.reduce(function(a, b) { return Math.max(a, b); }));
break;
default:
aggregatedVals.push(vals.reduce(function(a, b) { return a + b / vals.length; }, 0));
}
vals = []; // clear the daily value vector
vals.push(jsonData[d].temperature); // now push first entry of new day into my temp value vector.
cnt++;
}
oldDate = currentDate;
} // end of for loop
// create output to be in the same List format as the original data from obsArray.
for (let i = 0; i < aggregatedVals.length; i++) {
newOutput.push([aggDates[i], aggregatedVals[i]]);
}
} // end else
return newOutput;
}
/** /**
* 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
*/ */
export const formatSTAResponseForHeatMap = function (obsArray) { export const formatSTAResponseForHeatMap = function(obsArray) {
if (!obsArray) return; if (!obsArray) return;
const dataSTAFormatted = []; const dataSTAFormatted = [];
obsArray.forEach((obs) => { obsArray.forEach((obs) => {
...@@ -151,7 +338,7 @@ export const formatSTAResponseForHeatMap = function (obsArray) { ...@@ -151,7 +338,7 @@ export const formatSTAResponseForHeatMap = function (obsArray) {
* @param {Array} formattedObsArrayForHeatmap Response from SensorThings API formatted for use in a heatmap * @param {Array} formattedObsArrayForHeatmap Response from SensorThings API formatted for use in a heatmap
* @returns {Object} Highcharts library heatmap object * @returns {Object} Highcharts library heatmap object
*/ */
export const drawHeatMapHC = function (formattedObsArrayForHeatmap) { export const drawHeatMapHC = function(formattedObsArrayForHeatmap) {
Highcharts.chart("chart-heatmap", { Highcharts.chart("chart-heatmap", {
chart: { chart: {
type: "heatmap", type: "heatmap",
...@@ -223,8 +410,7 @@ export const drawHeatMapHC = function (formattedObsArrayForHeatmap) { ...@@ -223,8 +410,7 @@ export const drawHeatMapHC = function (formattedObsArrayForHeatmap) {
}, },
}, },
series: [ series: [{
{
data: formattedObsArrayForHeatmap, data: formattedObsArrayForHeatmap,
boostThreshold: 100, boostThreshold: 100,
borderWidth: 0, borderWidth: 0,
...@@ -232,12 +418,10 @@ export const drawHeatMapHC = function (formattedObsArrayForHeatmap) { ...@@ -232,12 +418,10 @@ export const drawHeatMapHC = function (formattedObsArrayForHeatmap) {
colsize: 24 * 36e5, // one day colsize: 24 * 36e5, // one day
tooltip: { tooltip: {
headerFormat: "Temperature<br/>", headerFormat: "Temperature<br/>",
pointFormat: pointFormat: "{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>",
"{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>",
}, },
turboThreshold: Number.MAX_VALUE, // #3404, remove after 4.0.5 release turboThreshold: Number.MAX_VALUE, // #3404, remove after 4.0.5 release
}, }, ],
],
}); });
}; };
...@@ -246,7 +430,7 @@ export const drawHeatMapHC = function (formattedObsArrayForHeatmap) { ...@@ -246,7 +430,7 @@ export const drawHeatMapHC = function (formattedObsArrayForHeatmap) {
* @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
*/ */
export const formatSTAResponseForLineChart = function (obsArray) { export const formatSTAResponseForLineChart = function(obsArray) {
if (!obsArray) return; if (!obsArray) return;
const dataSTAFormatted = []; const dataSTAFormatted = [];
obsArray.forEach((result) => { obsArray.forEach((result) => {
...@@ -262,7 +446,7 @@ export const formatSTAResponseForLineChart = function (obsArray) { ...@@ -262,7 +446,7 @@ export const formatSTAResponseForLineChart = function (obsArray) {
* @param {Array} formattedObsArrayForLineChart - Response from SensorThings API formatted for use in a line chart * @param {Array} formattedObsArrayForLineChart - Response from SensorThings API formatted for use in a line chart
* @returns {Object} Highcharts library line chart object * @returns {Object} Highcharts library line chart object
*/ */
export const drawLineChartHC = function (formattedObsArrayForLineChart) { export const drawLineChartHC = function(formattedObsArrayForLineChart) {
// Create the chart // Create the chart
Highcharts.stockChart("chart-line", { Highcharts.stockChart("chart-line", {
chart: { chart: {
...@@ -283,16 +467,14 @@ export const drawLineChartHC = function (formattedObsArrayForLineChart) { ...@@ -283,16 +467,14 @@ export const drawLineChartHC = function (formattedObsArrayForLineChart) {
align: "left", align: "left",
}, },
series: [ series: [{
{
name: "AAPL", name: "AAPL",
data: formattedObsArrayForLineChart, data: formattedObsArrayForLineChart,
tooltip: { tooltip: {
valueDecimals: 2, valueDecimals: 2,
}, },
turboThreshold: Number.MAX_VALUE, // #3404, remove after 4.0.5 release turboThreshold: Number.MAX_VALUE, // #3404, remove after 4.0.5 release
}, }, ],
],
}); });
}; };
...@@ -303,14 +485,14 @@ export const drawLineChartHC = function (formattedObsArrayForLineChart) { ...@@ -303,14 +485,14 @@ export const drawLineChartHC = function (formattedObsArrayForLineChart) {
* @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
*/ */
export const followNextLink = function (responsePromise) { export const followNextLink = function(responsePromise) {
if (!responsePromise) return; if (!responsePromise) return;
return responsePromise return responsePromise
.then(function (lastSuccess) { .then(function(lastSuccess) {
if (lastSuccess.data["@iot.nextLink"]) { if (lastSuccess.data["@iot.nextLink"]) {
return followNextLink( return followNextLink(
axios.get(lastSuccess.data["@iot.nextLink"]) axios.get(lastSuccess.data["@iot.nextLink"])
).then(function (nextLinkSuccess) { ).then(function(nextLinkSuccess) {
nextLinkSuccess.data.value = lastSuccess.data.value.concat( nextLinkSuccess.data.value = lastSuccess.data.value.concat(
nextLinkSuccess.data.value nextLinkSuccess.data.value
); );
...@@ -320,7 +502,7 @@ export const followNextLink = function (responsePromise) { ...@@ -320,7 +502,7 @@ export const followNextLink = function (responsePromise) {
return lastSuccess; return lastSuccess;
} }
}) })
.catch(function (err) { .catch(function(err) {
console.log(err); console.log(err);
}); });
}; };
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal