diff --git a/public/js/src_modules/chartScatterPlot.mjs b/public/js/src_modules/chartScatterPlot.mjs index 19195375090783b8096b3a75e159f5dfee8cf480..0c3cf1eee0d6b137163d966a90b5d2374afdd3d7 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; },