React heat map

import React from "react";
import * as FlexmonsterReact from "react-flexmonster";

import * as tinycolor from "tinycolor2";

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

const minValue = 0;
const maxValue = 15000;

class PivotTableDemo extends React.Component {
  render() {
    return (
      <>
        <FlexmonsterReact.Pivot
          componentFolder="https://cdn.flexmonster.com/"
          height={600}
          report={{
            dataSource: {
              type: "csv",
              filename: "https://cdn.flexmonster.com/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: "$",
              },
            ],
          }}
          customizeCell={this.customizeCellFunction}
        />
      </>
    );
  }

  customizeCellFunction = (cell, data) => {
    if (data?.type === "value" && !data?.isGrandTotal) {
      let backgroundColor = this.getColorFromRange(data.value);
      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) => {
    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];
  };
}

export default PivotTableDemo;