React Pivot Table localization

import React from "react";
import * as FlexmonsterReact from "react-flexmonster";

class PivotTableDemo extends React.Component {
  constructor(props) {
    super(props);
    this.pivot = React.createRef();
    this.currentLang = "en";
    this.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",
    };
  }

  render() {
    return (
      <>
        <button onClick={() => this.setLocalization("en")}>EN</button>
        <button onClick={() => this.setLocalization("fr")}>FR</button>
        <button onClick={() => this.setLocalization("it")}>IT</button>
        <button onClick={() => this.setLocalization("es")}>ES</button>
        <button onClick={() => this.setLocalization("pt")}>PT</button>
        <button onClick={() => this.setLocalization("zh")}>ZH</button>
        <button onClick={() => this.setLocalization("uk")}>UK</button>
        <FlexmonsterReact.Pivot
          ref={this.pivot}
          componentFolder="https://cdn.flexmonster.com/"
          height={430}
          toolbar={true}
          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: "$",
              },
            ],
          }}
          shareReportConnection={{
            url: "https://olap.flexmonster.com:9500",
          }}
          beforetoolbarcreated={this.customizeToolbar}
        />
      </>
    );
  }

  setLocalization = (lang) => {
    this.currentLang = lang;
    this.pivot.current.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.pivot.current.flexmonster.exportTo(type, {
          fontUrl: this.pdfFonts[this.currentLang],
        });
      } else {
        this.pivot.current.flexmonster.exportTo(type);
      }
    };
    toolbar.showShareReportTab = true;
  };
}

export default PivotTableDemo;