Translate the pivot table to the end-users' native language and provide them with the best reporting experience.
import { Component, OnInit, ViewChild } from "@angular/core";
import { FlexmonsterPivot } from "ng-flexmonster";
@Component({
selector: "pivotComponent",
templateUrl: "./pivot.component.html",
styleUrls: ["./pivot.component.css"],
})
export class PivotComponent implements OnInit {
@ViewChild("pivot") pivot!: FlexmonsterPivot;
public report: Object = {
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";
pdfFonts: any = {
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",
};
constructor() {}
ngOnInit(): void {}
setLocalization(lang: string) {
this.currentLang = lang;
this.pivot.flexmonster.setReport({
dataSource: {
type: "csv",
filename: "data/data-" + lang + ".csv",
},
localization: "loc/" + lang + ".json",
formats: [{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 2,
currencySymbol: "$",
}]
});
}
customizeToolbar(toolbar: Flexmonster.Toolbar) {
toolbar.exportHandler = (type) => {
if (type === "pdf") {
this.pivot.flexmonster.exportTo(type, {
fontUrl: this.pdfFonts[this.currentLang],
});
} else {
this.pivot.flexmonster.exportTo(type);
}
};
toolbar.showShareReportTab = true;
}
}
<button (click)="setLocalization('en')">EN</button>
<button (click)="setLocalization('fr')">FR</button>
<button (click)="setLocalization('it')">IT</button>
<button (click)="setLocalization('es')">ES</button>
<button (click)="setLocalization('pt')">PT</button>
<button (click)="setLocalization('zh')">ZH</button>
<button (click)="setLocalization('uk')">UK</button>
<fm-pivot
#pivot
[componentFolder]="'https://cdn.flexmonster.com/'"
[height]="430"
[toolbar]="true"
[report]="report"
[shareReportConnection]="{url: 'https://olap.flexmonster.com:9500'}"
(beforetoolbarcreated)="customizeToolbar($event)">
</fm-pivot>
All text elements can be renamed or translated into the language of your choice: match labels, text messages, pop-ups, and captions to the language of your Angular reporting software.
You can quickly translate the whole component into Spanish, German, Mandarin, Thai, and other languages by simply adding one link to your code. The full list of the ready-made localizations for our Angular data grid can be found in the Localizing the component guide.
If you didn’t manage to find the required localization, you can create your own. All you need is to rewrite a JSON file with key-value pairs, where a key is the component’s element and a value is the translation of its text into the respective language.
You can also translate the entire component using global settings or override localization only for specific reports of your Angular data visualization solution.