Angular heat map

import { Component, OnInit } from "@angular/core";

import * as tinycolor from "tinycolor2";

const colorScheme: string[] = [
	"#DF3800",
	"#FF6D1E",
	"#FF9900",
	"#FFB600",
	"#A5CE31",
	"#6CBD05",
	"#00A45A",
];

const minValue: number = 0;
const maxValue: number = 15000;

@Component({
  selector: "pivotComponent",
  templateUrl: "./pivot.component.html",
  styleUrls: ["./pivot.component.css"],
})
export class PivotComponent implements OnInit {
  public report: Flexmonster.Report = {
    dataSource: {
      type: "csv",
      filename: "data/sales.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Month",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      columns: [
        {
          uniqueName: "Category",
          levelName: "Product Name",
          filter: {
            members: [
              "category.[condiments].[bbq sauce]",
              "category.[breakfast cereals].[corn flakes]",
              "category.[confectionery]",
              "category.[bakery].[chocolate biscuits]",
              "category.[fruit preserves].[apple jam]",
              "category.[bakery].[apple cake]",
              "category.[soups].[tomato soup]",
            ],
          },
        },
      ],
      measures: [
        {
          uniqueName: "Revenue",
          aggregation: "sum",
          format: "currency",
        },
      ],
    },
    formats: [
      {
        name: "",
        thousandsSeparator: ",",
        decimalSeparator: ".",
        decimalPlaces: 2,
      },
      {
        name: "currency",
        currencySymbol: "$",
      },
    ],
  };

  constructor() {}

  ngOnInit(): void {}

  customizeCellFunction(cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) {
    if (data?.type === "value" && !data?.isGrandTotal) {
      let backgroundColor = this.getColorFromRange(data.value as number);
      let textShadowColor = tinycolor(backgroundColor).darken(15).toString();
      let borderColor = tinycolor(backgroundColor).darken(3).toString();

      cell.style = {
        ...cell.style,
        "background-color": backgroundColor,
        "color": "white",
        "font-weight": "bold",
        "text-shadow": `0px 2px 3px ${textShadowColor}`,
        "border-bottom": `1px solid ${borderColor}`,
        "border-right": `1px solid ${borderColor}`,
      };
    }
  }

  getColorFromRange(value: number) {
    if (isNaN(value)) {
      value = minValue;
    }
    value = Math.max(minValue, Math.min(value, maxValue));
    let perc = (minValue + value) / maxValue;
    let colorIdx = Math.round((colorScheme.length - 1) * perc);
    return colorScheme[colorIdx];
  }
}

<fm-pivot
  [componentFolder]="'https://cdn.flexmonster.com/'"
  [height]="600"
  [report]="report"
  [customizeCell]="customizeCellFunction.bind(this)">
</fm-pivot>