New function: format datastream metadata

Formats datastream metadata for use in both linechart and heatmap

public/js/appCesium.js

@@ -5,9 +5,10 @@ import {
   getDatastreamIdFromBuildingNumber,
   getDatastreamUrl,
   getObservationsUrl,
-  formatSTAResponseForHeatMap,
   axiosGetRequest,
   getDatastreamMetadata,
+  formatDatastreamMetadataForChart,
+  formatSTAResponseForHeatMap,
   drawHeatMapHC,
   formatSTAResponseForLineChart,
   drawLineChartHC,
@@ -330,12 +331,12 @@ const activate3DTileFeaturePicking = function () {
 
         drawLineChartHC(
           formatSTAResponseForLineChart(combinedObs),
-          datastreamMetadata
+          formatDatastreamMetadataForChart(datastreamMetadata)
         );
 
         drawHeatMapHC(
           formatSTAResponseForHeatMap(combinedObs),
-          datastreamMetadata
+          formatDatastreamMetadataForChart(datastreamMetadata)
         );
       })
       .catch((err) => {

public/js/appChart.js

@@ -163,6 +163,42 @@ export const getDatastreamMetadata = async function (urlDatastream) {
   }
 };
 
+/**
+ * Format the response containing a Datastream's metadata from Sensorthings API
+ * @param {Object} datastreamMetadata An object containing a Datastream's metadata
+ * @returns {Object} An object containing the formatted metadata that is suitable for use in a line chart or heatmap
+ */
+export const formatDatastreamMetadataForChart = function (datastreamMetadata) {
+  const {
+    description: datastreamDescription,
+    name: datastreamName,
+    unitOfMeasurement,
+  } = datastreamMetadata;
+
+  // Extract phenomenon name from Datastream name
+  const regex = /\/ (.*) DS/;
+  const phenomenonName = datastreamName.match(regex)[1]; // use second element in array
+
+  // Match the unitOfMeasurement's string representation of a symbol
+  // to an actual symbol, where necessary
+  const unitOfMeasurementSymbol = (() => {
+    if (unitOfMeasurement.symbol === "degC") {
+      return "℃";
+    } else if (unitOfMeasurement.symbol === "m3/h") {
+      return "m<sup>3</sup>/h";
+    } else {
+      return unitOfMeasurement.symbol;
+    }
+  })();
+
+  return {
+    datastreamDescription,
+    datastreamName,
+    phenomenonName,
+    unitOfMeasurementSymbol,
+  };
+};
+
 /**
  * Format the response from SensorThings API to make it suitable for heatmap
  * @param {Array} obsArray Response from SensorThings API as array
@@ -194,13 +230,20 @@ export const formatSTAResponseForHeatMap = function (obsArray) {
 /**
  * Draw a heatmap using Highcharts library
  * @param {Array} formattedObsArrayForHeatmap Response from SensorThings API formatted for use in a heatmap
- * @param {Object} datastreamMetadata Object containing Datastream metadata
+ * @param {Object} formattedDatastreamMetadata Object containing Datastream metadata
  * @returns {undefined} undefined
  */
 export const drawHeatMapHC = function (
   formattedObsArrayForHeatmap,
-  datastreamMetadata
+  formattedDatastreamMetadata
 ) {
+  const {
+    datastreamDescription: DATASTREAM_DESCRIPTION,
+    datastreamName: DATASTREAM_NAME,
+    phenomenonName: PHENOMENON_NAME,
+    unitOfMeasurementSymbol: PHENOMENON_SYMBOL,
+  } = formattedDatastreamMetadata;
+
   Highcharts.chart("chart-heatmap", {
     chart: {
       type: "heatmap",
@@ -212,15 +255,13 @@ export const drawHeatMapHC = function (
     },
 
     title: {
-      // text: "Inlet flow (Vorlauf)",
-      text: `${datastreamMetadata.description}`,
+      text: DATASTREAM_DESCRIPTION,
       align: "left",
       x: 40,
     },
 
     subtitle: {
-      // text: "Temperature variation by day and hour in 2020",
-      text: `${datastreamMetadata.name}`,
+      text: DATASTREAM_NAME,
       align: "left",
       x: 40,
     },
@@ -270,7 +311,8 @@ export const drawHeatMapHC = function (
       startOnTick: false,
       endOnTick: false,
       labels: {
-        format: "{value}℃",
+        // format: "{value}℃",
+        format: `{value}${PHENOMENON_SYMBOL}`,
       },
     },
 
@@ -282,9 +324,11 @@ export const drawHeatMapHC = function (
         nullColor: "#525252",
         colsize: 24 * 36e5, // one day
         tooltip: {
-          headerFormat: "Temperature<br/>",
+          headerFormat: `${PHENOMENON_NAME}<br/>`,
+          valueDecimals: 2,
           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>",
+            `{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ${PHENOMENON_SYMBOL}</b>`,
         },
         turboThreshold: Number.MAX_VALUE, // #3404, remove after 4.0.5 release
       },
@@ -312,13 +356,20 @@ export const formatSTAResponseForLineChart = function (obsArray) {
 /**
  * Draw a line chart using Highcharts library
  * @param {Array} formattedObsArrayForLineChart Response from SensorThings API formatted for use in a line chart
- * @param {Object} datastreamMetadata Object containing Datastream metadata
+ * @param {Object} formattedDatastreamMetadata Object containing Datastream metadata
  * @returns {undefined} undefined
  */
 export const drawLineChartHC = function (
   formattedObsArrayForLineChart,
-  datastreamMetadata
+  formattedDatastreamMetadata
 ) {
+  const {
+    datastreamDescription: DATASTREAM_DESCRIPTION,
+    datastreamName: DATASTREAM_NAME,
+    phenomenonName: PHENOMENON_NAME,
+    unitOfMeasurementSymbol: PHENOMENON_SYMBOL,
+  } = formattedDatastreamMetadata;
+
   Highcharts.stockChart("chart-line", {
     chart: {
       zoomType: "x",
@@ -329,20 +380,18 @@ export const drawLineChartHC = function (
     },
 
     title: {
-      // text: "Inlet flow (Vorlauf)",
-      text: `${datastreamMetadata.description}`,
+      text: DATASTREAM_DESCRIPTION,
       "align": "left",
     },
 
     subtitle: {
-      // text: "Temperature variation by hour in 2020",
-      text: `${datastreamMetadata.name}`,
+      text: DATASTREAM_NAME,
       align: "left",
     },
 
     series: [
       {
-        name: "Vorlauf",
+        name: `${PHENOMENON_NAME} (${PHENOMENON_SYMBOL})`,
         data: formattedObsArrayForLineChart,
         tooltip: {
           valueDecimals: 2,