diff --git a/public/js/src_modules/chartColumn.mjs b/public/js/src_modules/chartColumn.mjs index 1608f4a0abdb41c3f1b197ebb3e9a96c513da999..d9717466d55b836e347dc4d8fc536fce9f4cdf7f 100644 --- a/public/js/src_modules/chartColumn.mjs +++ b/public/js/src_modules/chartColumn.mjs @@ -5,6 +5,7 @@ import { createFullTitleForLineOrColumnChart, createCombinedTextDelimitedByComma, createSubtitleForChart, + abbreviateTemperaturePhenomenonNames, createTooltipDateString, } from "./chartHelpers.mjs"; @@ -148,7 +149,7 @@ const drawColumnChartHighcharts = function ( const textChartSubtitle = createSubtitleForChart(datastreamNamesArr); const textYAxisTitle = createYAxisTitleTextColumnChart( - phenomenonNamesArr, + abbreviateTemperaturePhenomenonNames(phenomenonNamesArr), unitOfMeasurementSymbolsArr ); diff --git a/public/js/src_modules/chartHelpers.mjs b/public/js/src_modules/chartHelpers.mjs index 1ef57452f34c79c8ad086d2ccf4a9911cdc54f80..0c633b31e97a9681eedbafa54bb0542e9366e35a 100644 --- a/public/js/src_modules/chartHelpers.mjs +++ b/public/js/src_modules/chartHelpers.mjs @@ -352,6 +352,31 @@ const createSubtitleForHeatmap = function (datastreamNamesArr) { )}`; }; +/** + * Abbreviate temperature phenomenon names for use in chart y-axis title strings where space is limited + * + * @param {Array} phenomenonNamesArr An array of phenomenon name strings + * @returns {Array} An array that contains abbreviated temperature phenomenon strings + */ +const abbreviateTemperaturePhenomenonNames = function (phenomenonNamesArr) { + // We're interested in phenomenon names that contain the substrings + // `temperature` or `Temperature` + return phenomenonNamesArr.map((phenomenonName) => { + // Case 1: Temperature phenomenon name string variant 1 + if (phenomenonName.includes("temperature")) { + return phenomenonName.replace("temperature", "temp."); + } + // Case 2: Temperature phenomenon name string variant 2 + else if (phenomenonName.includes("Temperature")) { + return phenomenonName.replace("Temperature", "Temp."); + } + // Case 3: The other phenomenon name strings + else { + return phenomenonName; + } + }); +}; + /** * Creates a date string that is used in a shared tooltip for a line or column chart * @param {Number} pointXAxisValue The x-axis value (Unix timestamp) which is common for a set of data points @@ -389,6 +414,7 @@ export { createTitleForHeatmap, createSubtitleForChart, createSubtitleForHeatmap, + abbreviateTemperaturePhenomenonNames, createTooltipDateString, convertHexColorToRGBColor, removeTransparencyFromColor, diff --git a/public/js/src_modules/chartScatterPlot.mjs b/public/js/src_modules/chartScatterPlot.mjs index e10275b0e43ef9e35449e4497240bd4f352359cc..19195375090783b8096b3a75e159f5dfee8cf480 100644 --- a/public/js/src_modules/chartScatterPlot.mjs +++ b/public/js/src_modules/chartScatterPlot.mjs @@ -6,6 +6,7 @@ import { convertHexColorToRGBColor, createCombinedTextDelimitedByAmpersand, createCombinedTextDelimitedByComma, + abbreviateTemperaturePhenomenonNames, createSubtitleForChart, removeTransparencyFromColor, } from "./chartHelpers.mjs"; @@ -211,7 +212,7 @@ const drawScatterPlotHighcharts = function ( ); const Y_AXIS_TITLE = createYAxisTitleTextScatterPlot( - phenomenonNamesArr, + abbreviateTemperaturePhenomenonNames(phenomenonNamesArr), unitOfMeasurementSymbolsArr );