Flexmonster - Localization

Demos

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<style>


#fm-toolbar-wrapper div.fm-popup {
    top: 50% !important;
    left: 50% !important;
    position: fixed !important;
    transform: translate(-50%, -50%);
    z-index: 1001;
    max-height: 100vh;
    overflow: auto;
}

#fm-toolbar-wrapper div.fm-modal-overlay {
    position: fixed;
    height: 100vh !important;
    z-index: 1000;
}

</style>

<button onclick="setLocalization('en')">EN</button>
<button onclick="setLocalization('fr')">FR</button>
<button onclick="setLocalization('it')">IT</button>
<button onclick="setLocalization('es')">ES</button>
<button onclick="setLocalization('pt')">PT</button>
<button onclick="setLocalization('zh')">ZH</button>
<button onclick="setLocalization('uk')">UK</button>
<div style="position: relative; width: 700px; height: 700px; overflow: hidden">
<div style="overflow: auto">
<div id="pivot-container"></div>
</div>
</div>

JavaScript

const pivot = new Flexmonster({
  container: "#pivot-container",
  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: customizeToolbar,
});

let currentLang = "en";

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",
};

function setLocalization(lang) {
  currentLang = lang;
  pivot.setReport({
    dataSource: {
      type: "csv",
      filename: "data/data-" + lang + ".csv",
    },
    localization: "loc/" + lang + ".json",
    formats: [{
      name: "",
      thousandsSeparator: ",",
      decimalSeparator: ".",
      decimalPlaces: 2,
      currencySymbol: "$",
    }]
  });
}

function customizeToolbar(toolbar) {
  toolbar.exportHandler = (type) => {
    if (type === "pdf") {
      pivot.exportTo(type, {
        fontUrl: pdfFonts[currentLang],
      });
    } else {
      pivot.exportTo(type);
    }
  };
  toolbar.showShareReportTab = true;
}