From c382d5d3a215bbc398b376825467e87c57f6f467 Mon Sep 17 00:00:00 2001
From: Pithon Kabiro <pithon.kabiro@hft-stuttgart.de>
Date: Fri, 22 Oct 2021 19:23:18 +0200
Subject: [PATCH] New function: get y-axis measurement unit symbol
Function provides a 'hack' that ensures that the correct phenomenon
symbols are displayed by a scatter plot's tooltip
---
public/js/src_modules/chartScatterPlot.mjs | 39 +++++++++++++++++++---
1 file changed, 34 insertions(+), 5 deletions(-)
diff --git a/public/js/src_modules/chartScatterPlot.mjs b/public/js/src_modules/chartScatterPlot.mjs
index 1919537..0c3cf1e 100644
--- a/public/js/src_modules/chartScatterPlot.mjs
+++ b/public/js/src_modules/chartScatterPlot.mjs
@@ -177,6 +177,36 @@ const createSeriesOptionsForScatterPlot = function (
}
};
+/**
+ * Match a scatter plot's y-axis phenomenon name to its corresponding symbol
+ *
+ * @param {String} seriesName A string representing a scatter plot's series name. It is made up of two phenomenon names separated by a comma
+ * @returns {String} The phenomenon's symbol
+ */
+const getYAxisUnitOfMeasurementSymbol = function (seriesName) {
+ const phenomenonNameToSymbolMapping = {
+ temperature: "\u00B0C",
+ flow: "m\u00B3/h",
+ power: "kW",
+ energy: "MWh",
+ };
+
+ // The `series.name` property for the scatter plot is made up of
+ // two phenomenon names delimited by a comma
+ // We are interested in the first string
+ const phenomenonNameYAxis = seriesName.split(",")[0].toLowerCase();
+
+ if (phenomenonNameYAxis.includes("temperature")) {
+ return phenomenonNameToSymbolMapping.temperature;
+ } else if (phenomenonNameYAxis.includes("flow")) {
+ return phenomenonNameToSymbolMapping.flow;
+ } else if (phenomenonNameYAxis.includes("power")) {
+ return phenomenonNameToSymbolMapping.power;
+ } else if (phenomenonNameYAxis.includes("energy")) {
+ return phenomenonNameToSymbolMapping.energy;
+ }
+};
+
/**
* Draw a scatter plot using Highcharts library
* @param {Array} formattedObsArrayForSeriesOnePlusSeriesTwo Response from SensorThings API formatted for use in a scatter plot
@@ -217,8 +247,7 @@ const drawScatterPlotHighcharts = function (
);
// The unit of measurement symbols for the x-axis is the first element of the array
- // Assume that we will be comparing similar phenomena, so we can reuse this symbol
- const UNIT_OF_MEASUREMENT_SYMBOL = unitOfMeasurementSymbolsArr[0];
+ const unitOfMeasurementXAxisSymbol = unitOfMeasurementSymbolsArr[0];
const MARKER_RADIUS = 2;
@@ -302,9 +331,9 @@ const drawScatterPlotHighcharts = function (
const pointString = `<b>${this.point.y.toFixed(
2
- )} ${UNIT_OF_MEASUREMENT_SYMBOL}, ${this.point.x.toFixed(
- 2
- )} ${UNIT_OF_MEASUREMENT_SYMBOL}</b>`;
+ )} ${getYAxisUnitOfMeasurementSymbol(
+ this.series.name
+ )}, ${this.point.x.toFixed(2)} ${unitOfMeasurementXAxisSymbol}</b>`;
return headerString + pointString;
},
--
GitLab