React heat map

import * as FlexmonsterReact from "react-flexmonster";
import "flexmonster/flexmonster.css";

import tinycolor from "tinycolor2";

function PivotTableDemo() {
  const colorScheme = [
    "#DF3800",
    "#FF6D1E",
    "#FF9900",
    "#FFB600",
    "#A5CE31",
    "#6CBD05",
    "#00A45A"
  ];

  const minValue = 0;
  const maxValue = 15000;

  const 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: "$"
      }
    ]
  };

  const customizeCellFunction = (cell, data) => {
    if (data?.type === "value" && !data?.isGrandTotal) {
      const backgroundColor = getColorFromRange(data.value);
      const textShadowColor = tinycolor(backgroundColor).darken(15).toString();
      const 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}`
      };
    }
  };

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

  return (
    <>
      <FlexmonsterReact.Pivot
        height={600}
        report={report}
        customizeCell={customizeCellFunction}
      />
    </>
  );
}

export default PivotTableDemo;