Vue heat map

<template>
  <Pivot
    componentFolder="https://cdn.flexmonster.com/"
    height="600"
    v-bind:report="report"
    v-bind:customizeCell="customizeCellFunction"
  />
</template>

<script>
import Pivot from "vue-flexmonster/vue3";
import "flexmonster/flexmonster.css";

import * as tinycolor from "tinycolor2";

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

const minValue = 0;
const maxValue = 15000;

export default {
  name: "PivotComponent",
  components: {
    Pivot,
  },
  data() {
    return {
      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: "$",
          },
        ],
      },
    };
  },
  methods: {
    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];
    },
  },
};
</script>