Commit acbe3335 authored by Pithon Kabiro's avatar Pithon Kabiro
Browse files

Merge branch 'wip_chart-titles-yaxis' into 'master'

Edit creation of y-axis chart titles

Abbreviate the 'temperature' phenomenon names before rendering on 
chart y-axis

See merge request !20
parents 1a3ed99d 742f0c14
Pipeline #5165 passed with stage
in 24 seconds
......@@ -179,32 +179,24 @@ const drawChartUsingSelectedOptions = async function () {
selectedBuildingsDataPointsSamplingRateAbbrevNestedArr
);
// Create copies of the arrays of building(s) + data point(s) + sampling rate
const selectedBuildingsDataPointsSamplingRateAbbrevRawObsCopyArr = [
...selectedBuildingsDataPointsSamplingRateAbbrevNestedArr,
];
const selectedBuildingsDataPointsSamplingRateAbbrevTempDiffCopyArr = [
...selectedBuildingsDataPointsSamplingRateAbbrevNestedArr,
];
// Check if we have raw observations
// Check whether we have dT (temperature difference), if so, delete these options,
// then compute abbreviations for raw observations
const selectedBuildingsDataPointsSamplingRateAbbrevRawObsArr =
checkIfSelectedOptionsContainTemperatureDifference(
selectedBuildingsDataPointsSamplingRateAbbrevRawObsCopyArr
selectedBuildingsDataPointsSamplingRateAbbrevNestedArr
)
? deleteTemperatureDifferenceOptions(
selectedBuildingsDataPointsSamplingRateAbbrevRawObsCopyArr
selectedBuildingsDataPointsSamplingRateAbbrevNestedArr
)
: selectedBuildingsDataPointsSamplingRateAbbrevRawObsCopyArr;
: selectedBuildingsDataPointsSamplingRateAbbrevNestedArr;
// Check if we have dT (temperature difference)
const selectedBuildingsDataPointsSamplingRateAbbrevTempDiffArr =
checkIfSelectedOptionsContainTemperatureDifference(
selectedBuildingsDataPointsSamplingRateAbbrevTempDiffCopyArr
selectedBuildingsDataPointsSamplingRateAbbrevNestedArr
)
? extractTemperatureDifferenceOptions(
selectedBuildingsDataPointsSamplingRateAbbrevTempDiffCopyArr
selectedBuildingsDataPointsSamplingRateAbbrevNestedArr
)
: [];
......
......@@ -3,7 +3,9 @@
import {
chartExportOptions,
createFullTitleForLineOrColumnChart,
createCombinedTextDelimitedByComma,
createSubtitleForChart,
abbreviateTemperaturePhenomenonNames,
createTooltipDateString,
} from "./chartHelpers.mjs";
......@@ -65,6 +67,33 @@ const createSeriesOptionsForColumnChart = function (
}
};
/**
* Create string for the y-axis title of a column chart
*
* @param {Array} phenomenonNamesArr Array of phenomenon name strings
* @param {Array} unitOfMeasurementSymbolsArr Array of unit of measurement symbol strings
* @returns {String} Y-axis title string for column chart
*/
const createYAxisTitleTextColumnChart = function (
phenomenonNamesArr,
unitOfMeasurementSymbolsArr
) {
// The phenomenon names and unit of measurement arrays should have equal lengths
// Use one of the arrays for looping
if (phenomenonNamesArr.length !== unitOfMeasurementSymbolsArr.length) {
throw new Error(
"The phenomenon names array and unit of measurement symbols array have different lengths"
);
} else {
const combinedNameSymbolArr = phenomenonNamesArr.map(
(phenomenonName, i) =>
`${phenomenonName} [${unitOfMeasurementSymbolsArr[i]}]`
);
return createCombinedTextDelimitedByComma(combinedNameSymbolArr);
}
};
/**
* Draw a column chart using Highcharts library
* @param {Array} formattedAggResultArraysForColumnChart An array made up of formatted aggregated result array(s) suitable for use in a column chart
......@@ -111,12 +140,6 @@ const drawColumnChartHighcharts = function (
buildingIdsPhenomenonNamesArr
);
// Assume that we will be comparing similar phenomena, so we can use the first phenomenon name
const phenomenonName = phenomenonNamesArr[0];
// Assume that we will be comparing similar phenomena, so we can use the first phenomenon symbol
const unitOfMeasurementSymbol = unitOfMeasurementSymbolsArr[0];
const textChartTitle = createFullTitleForLineOrColumnChart(
phenomenonNamesArr,
aggregationInterval,
......@@ -125,6 +148,11 @@ const drawColumnChartHighcharts = function (
const textChartSubtitle = createSubtitleForChart(datastreamNamesArr);
const textYAxisTitle = createYAxisTitleTextColumnChart(
abbreviateTemperaturePhenomenonNames(phenomenonNamesArr),
unitOfMeasurementSymbolsArr
);
Highcharts.chart("chart-column", {
chart: {
type: "column",
......@@ -148,7 +176,7 @@ const drawColumnChartHighcharts = function (
yAxis: {
title: {
text: `${phenomenonName} [${unitOfMeasurementSymbol}]`,
text: textYAxisTitle,
},
},
......
......@@ -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,
......
......@@ -6,6 +6,7 @@ import {
convertHexColorToRGBColor,
createCombinedTextDelimitedByAmpersand,
createCombinedTextDelimitedByComma,
abbreviateTemperaturePhenomenonNames,
createSubtitleForChart,
removeTransparencyFromColor,
} from "./chartHelpers.mjs";
......@@ -106,11 +107,6 @@ const createYAxisTitleTextScatterPlot = function (
// y-axis phenomenon symbols start at array index 1
const unitOfMeasurementSymbolsYAxisArr = unitOfMeasurementSymbolsArr.slice(1);
const combinedNameSymbolArr = phenomenonNamesYAxisArr.map(
(phenomenonNameYAxis, i) =>
`${phenomenonNameYAxis} [${unitOfMeasurementSymbolsYAxisArr[i]}]`
);
// The phenomenon names and unit of measurement arrays should have equal lengths
// Use one of the arrays for looping
if (
......@@ -120,6 +116,11 @@ const createYAxisTitleTextScatterPlot = function (
"The phenomenon names array and unit of measurement symbols array have different lengths"
);
} else {
const combinedNameSymbolArr = phenomenonNamesYAxisArr.map(
(phenomenonNameYAxis, i) =>
`${phenomenonNameYAxis} [${unitOfMeasurementSymbolsYAxisArr[i]}]`
);
return createCombinedTextDelimitedByComma(combinedNameSymbolArr);
}
};
......@@ -211,7 +212,7 @@ const drawScatterPlotHighcharts = function (
);
const Y_AXIS_TITLE = createYAxisTitleTextScatterPlot(
phenomenonNamesArr,
abbreviateTemperaturePhenomenonNames(phenomenonNamesArr),
unitOfMeasurementSymbolsArr
);
......
......@@ -180,31 +180,28 @@ const getIndexesOfTemperatureDifferenceOptions = function (
const deleteTemperatureDifferenceOptions = function (
buildingDataPointSamplingRateAbbrevArr
) {
// Create a copy of the input array, will be modified in place
const buildingDataPointSamplingRateAbbrevCopyArr = [
...buildingDataPointSamplingRateAbbrevArr,
];
// Calculate the index(es) that we wish to delete
const foundIndexesArr = getIndexesOfTemperatureDifferenceOptions(
buildingDataPointSamplingRateAbbrevArr
buildingDataPointSamplingRateAbbrevCopyArr
);
// Delete the index(es) of `dT`, modifies the array in place
// Note: The resulting array is sparse
foundIndexesArr.forEach(
(foundIndex) => delete buildingDataPointSamplingRateAbbrevArr[foundIndex]
(foundIndex) =>
delete buildingDataPointSamplingRateAbbrevCopyArr[foundIndex]
);
// Array to store our final result
const buildingDataPointFinalArr = [];
// Remove the empty sub array(s) that makes entire array sparse
// Note: `empty` does not mean `undefined` or `null`
buildingDataPointSamplingRateAbbrevArr.forEach(
(bldgDataPntSmplingRateAbbrvArr) => {
if (typeof bldgDataPntSmplingRateAbbrvArr === "object") {
buildingDataPointFinalArr.push(bldgDataPntSmplingRateAbbrvArr);
}
}
return buildingDataPointSamplingRateAbbrevCopyArr.filter(
(bldgDataPntSamplingRate) => typeof bldgDataPntSamplingRate === "object"
);
return buildingDataPointFinalArr;
};
/**
......
Markdown is supported
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