Color Scale in Angular

An Excel-like color range with midpoint color included

by Omar

HTML

<html ng-app="colourScale">
  <div ng-controller="MainCtrl as ctrl">
    <table>
      <tr>
        <td ng-repeat='value in ctrl.value_array' width="25px" style="background-color:rgb({{ctrl.getColour(value, ctrl.min_value, ctrl.max_value)}})">{{value}}</td>
      </tr>
    </table>
  </div>

</html>

CSS

table td {
  padding: 15px;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
  font-size: 1.5em;
}

JavaScript

var app = angular.module('colourScale', []);

app.controller('MainCtrl', function($scope) {
  let ctrl = this;

  ctrl.value_array = [
    600, 123, 39, 300, 180, 80, 545, 233, 6, 321, 444
  ]
  ctrl.value_array.sort(function(elem1, elem2) {
    return elem1 - elem2;
  })
  ctrl.min_value = Math.min(...ctrl.value_array);
  ctrl.max_value = Math.max(...ctrl.value_array);

  ctrl.getColour = function(value, min_value, max_value) {
    let [highMaxR, highMaxG, highMaxB] = [99, 190, 123];
    let [lowMaxR, lowMaxG, lowMaxB] = [248, 105, 107];
    let [midMaxR, midMaxG, midMaxB] = [255, 235, 132];

    if (Math.round(max_value - min_value) === 0) return `${highMaxR}, ${highMaxG}, ${highMaxB}`;

    let mid_point = (max_value + min_value) / 2;
    if (value > mid_point) {
      [lowMaxR, lowMaxG, lowMaxB] = [midMaxR, midMaxG, midMaxB];
      min_value = mid_point;
    } else {
      [highMaxR, highMaxG, highMaxB] = [midMaxR, midMaxG, midMaxB];
      max_value = mid_point;
    }

    let percentage = Math.abs((value - min_value) / (max_value - min_value));

    let redVal = Math.round(lowMaxR + ((highMaxR - lowMaxR) * percentage));
    let greenVal = Math.round(lowMaxG + ((highMaxG - lowMaxG) * percentage));
    let blueVal = Math.round(lowMaxB + ((highMaxB - lowMaxB) * percentage));

    return `${redVal}, ${greenVal}, ${blueVal}`;
  };
});