Use the language of your Vue app for the integrated pivot table to provide your users with the best experience.
<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: "https://cdn.flexmonster.com/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>
All available localization files can be downloaded from GitHub or our CDN. Each file contains key-value pairs, where a key is the component’s element, and a value is the translation of its text into the corresponding language.
After you download the file, just specify its path in your Vue app. You can also create your custom localization file if you need to use a different language. The best way to do it — use our default English localization file as a template.
For more details on localizing the Vue pivot table, check out our Localizing the component guide.