JSON/CSV-based Vue Pivot Table

<template>
  <button v-on:click="onOpenLocalCSV">Open local CSV</button>
  <button v-on:click="onLoadRemoteCSV">Load remote CSV</button>
  <button v-on:click="onOpenLocalJSON">Open local JSON</button>
  <button v-on:click="onLoadRemoteJSON">Load remote JSON</button>

  <Pivot
    ref="pivot"
    componentFolder="https://cdn.flexmonster.com/"
    v-bind:report="report"
    v-bind:customizeCell="customizeCell"
  />
</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/happiness.csv",
          mapping: {
            "Year": {
              type: "string"
            }
          }
        },
        slice: {
          rows: [
            {
              uniqueName: "Region",
            },
            {
              uniqueName: "Country or region",
            },
          ],
          columns: [
            {
              uniqueName: "[Measures]",
            },
            {
              uniqueName: "Year",
            },
          ],
          measures: [
            {
              uniqueName: "Score",
              aggregation: "median",
              grandTotalCaption: "Average Happiness",
            },
          ],
        },
        conditions: [
          {
            formula: "AND(#value > 7.3, #value < 10)",
            format: {
              backgroundColor: "#f0c63e",
              color: "#000000",
              fontFamily: "Arial",
              fontSize: "12px",
            },
          },
          {
            formula: "AND(#value > 0, #value < 4.5)",
            format: {
              backgroundColor: "#f29c8d",
              color: "#000000",
              fontFamily: "Arial",
              fontSize: "12px",
            },
          },
        ],
        formats: [
          {
            name: "",
            decimalPlaces: 2,
          },
        ],
      },
    };
  },
  methods: {
    onOpenLocalCSV() {
      this.$refs.pivot.flexmonster.connectTo({
        type: "csv",
        browseForFile: true,
      });
    },
    onLoadRemoteCSV() {
      const filename = prompt("Open remote CSV", "https://cdn.flexmonster.com/data/data.csv");
      if (filename != null) {
        this.$refs.pivot.flexmonster.connectTo({
          type: "csv",
          filename: filename,
        });
      }
    },
    onOpenLocalJSON() {
      this.$refs.pivot.flexmonster.connectTo({
        type: "json",
        browseForFile: true,
      });
    },
    onLoadRemoteJSON() {
      const filename = prompt("Open remote JSON", "https://cdn.flexmonster.com/data/data.json");
      if (filename != null) {
        this.$refs.pivot.flexmonster.connectTo({
          type: "json",
          filename: filename,
        });
      }
    },
    customizeCell(cell, data) {
      if (data.isGrandTotalColumn) {
        if (data.value < 5 && data.value >= 0) {
          cell.text = data.value.toPrecision(3) + " ☹️";
        } else if (data.value >= 5 && data.value < 7) {
          cell.text = data.value.toPrecision(3) + " 🙂";
        } else if (data.value >= 7 && data.value < 10) {
          cell.text = data.value.toPrecision(3) + " 😃";
        }
      }
    },
  },
};
</script>