Vue Pivot Table localization

<template>
  <button v-on:click="setLocalization('en')">EN</button>
  <button v-on:click="setLocalization('fr')">FR</button>
  <button v-on:click="setLocalization('it')">IT</button>
  <button v-on:click="setLocalization('es')">ES</button>
  <button v-on:click="setLocalization('pt')">PT</button>
  <button v-on:click="setLocalization('zh')">ZH</button>
  <button v-on:click="setLocalization('uk')">UK</button>
  <Pivot
    ref="pivot"
    componentFolder="https://cdn.flexmonster.com/"
    height="430"
    toolbar
    v-bind:report="report"
    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";

const pdfFonts = {
  en: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
  fr: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
  it: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
  es: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
  pt: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
  zh: "https://cdn.flexmonster.com/fonts/NotoSansCJKsc-Regular.ttf",
  uk: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
};

export default {
  name: "PivotComponent",
  components: {
    Pivot,
  },
  data() {
    return {
      report: {
        dataSource: {
          type: "csv",
          filename: "data/data-en.csv",
        },
        slice: {
          rows: [
            {
              uniqueName: "Category",
            },
          ],
          columns: [
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Price",
              aggregation: "sum",
              format: "currency",
            },
          ],
        },
        formats: [
          {
            name: "",
            thousandsSeparator: ",",
            decimalSeparator: ".",
            decimalPlaces: 2,
          },
          {
            name: "currency",
            currencySymbol: "$",
          },
        ],
      },
      currentLang: "en",
    };
  },
  methods: {
    setLocalization(lang) {
      this.currentLang = lang;
      this.$refs.pivot.flexmonster.setReport({
        dataSource: {
          type: "csv",
          filename: "data/data-" + lang + ".csv",
        },
        localization: "loc/" + lang + ".json",
        formats: [{
          name: "",
          thousandsSeparator: ",",
          decimalSeparator: ".",
          decimalPlaces: 2,
          currencySymbol: "$",
        }]
      });
    },
    customizeToolbar(toolbar) {
      toolbar.exportHandler = (type) => {
        if (type == "pdf") {
          this.$refs.pivot.flexmonster.exportTo(type, {
            fontUrl: pdfFonts[this.currentLang],
          });
        } else {
          this.$refs.pivot.flexmonster.exportTo(type);
        }
      };
      toolbar.showShareReportTab = true;
    },
  },
};
</script>