Colour (Color) Gradient Hues on table row to mimic Excel Heatmap style

calculateColorFromRange.js

/**
 * Calculates a colour based on the current value, relative to a given range (minValue to maxValue).
 * The hue is calculated in HSL format, transitioning from Green (at high values) to Red (at low values).
 *
 * @param {number} currentValue - The current value for which the colour is calculated.
 * @param {number} minValue - The minimum value of the range.
 * @param {number} maxValue - The maximum value of the range.
 * @returns {string} - The calculated HSL colour as a string (e.g., "hsl(120, 100%, 80%)").
 */
function calculateColor(currentValue, minValue, maxValue) {
  // Ensure minValue is not greater than maxValue
  if (minValue >= maxValue) {
    return "hsl(0, 0%, 100%)"; // Default to white if range is invalid
  }

  // Normalise the current value to a 0-1 scale
  let range = maxValue - minValue;
  let normalisedValue = (currentValue - minValue) / range;

  // Reverse the hue calculation to go from Green to Red
  // Green (120 hue) at high values, Red (0 hue) at low values
  let hue = normalisedValue * 120; // Normalized hue now goes from green (120) to red (0)

  // Saturation and lightness can be adjusted for desired effect
  let saturation = 100; // Full saturation for vibrant colours
  let lightness = 80;   // Mid-lightness for balanced colours

  // Return the HSL colour in CSS format
  return "hsl(" + hue + "," + saturation + "%," + lightness + "%)";
}