Vue Pivot Table: custom cells

<template>
  <Pivot
    componentFolder="https://cdn.flexmonster.com/"
    height="600"
    toolbar
    v-bind:report="report"
    v-bind:customizeCell="customizeCellFunction"
    v-bind:shareReportConnection="{
      url: 'https://olap.flexmonster.com:9500',
    }"
    v-bind:beforetoolbarcreated="customizeToolbar"
  />
</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: "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">`;
        }
      }
    },
    customizeToolbar(toolbar) {
      toolbar.showShareReportTab = true;
      const tabs = toolbar.getTabs();
      toolbar.getTabs = () => {
        const exportTab = tabs.find(tab => tab.id == "fm-tab-export");
        if (!exportTab) return tabs;
        const exportToTabs = exportTab.menu?.filter(
          tab => tab.id == "fm-tab-export-html" || 
          tab.id == "fm-tab-export-csv" || 
          tab.id == "fm-tab-export-excel" || 
          tab.id == "fm-tab-export-pdf");
        if (!exportToTabs) return tabs;
        exportToTabs.map(exportToTab => exportToTab.handler = () => {
          const exportType = exportToTab.id.substring(14);
          this.$refs.pivot.flexmonster.exportTo(exportType, {
            useCustomizeCellForData: false
          });
        });
        return tabs;
      };
    },
  },
};
</script>

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

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