Vue Pivot Table: Custom cells

<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";

export default {
  name: "PivotComponent",
  components: {
    Pivot,
  },
  data() {
    return {
      report: {
        dataSource: {
          type: "csv",
          filename: "https://cdn.flexmonster.com/data/data.csv",
        },
        slice: {
          rows: [
            {
              uniqueName: "Country",
            },
            {
              uniqueName: "Business Type",
            },
          ],
          columns: [
            {
              uniqueName: "Color",
            },
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Quantity",
              aggregation: "percentofcolumn",
            },
          ],
          expands: {
            expandAll: true,
          },
        },
        formats: [
          {
            decimalPlaces: 2,
          },
        ],
      },
    };
  },
  methods: {
    customizeCellFunction(cell, data) {
      if (data?.type === "value" && !data?.isDrillThrough) {
        if (data.value < 5) {
          cell.text = `<img src="https://cdn.flexmonster.com/i/empty_pie.svg" class="centered">`;
        } else if (data.value >= 5 && data.value < 10) {
          cell.text = `<img src="https://cdn.flexmonster.com/i/quarter_pie.svg" class="centered">`;
        } else if (data.value >= 10 && data.value < 25) {
          cell.text = `<img src="https://cdn.flexmonster.com/i/half_pie.svg" class="centered">`;
        } else if (data.value >= 25 && data.value < 50) {
          cell.text = `<img src="https://cdn.flexmonster.com/i/three_quarters_pie.svg" class="centered">`;
        } else if (data.value >= 50) {
          cell.text = `<img src="https://cdn.flexmonster.com/i/full_pie.svg" class="centered">`;
        }
      }
    },
  },
};
</script>

img.centered {
  display: block !important;
  margin: auto !important;
  color: transparent !important;
}

#fm-pivot-view .fm-grid-row {
  min-height: 47px;
}