Language localization

Our pivot table can easily be translated into different languages. This article describes the process of language localization for WebDataRocks reporting component.

Available localizations

Localization files for new languages can be added by creating a new pull request on GitHub. Our team highly appreciates any help.

Create a custom localization file

Follow the steps below to create your own localization file based on our template:

Step 1. Download template JSON file. It contains all labels that are used in WebDataRocks and English values for them.

Step 2. Translate values into the language you want.

For example, you want a Spanish localization. You start from replacing the first label-value pair from the template ("flatHierarchyBox": "Select and arrange columns") with its Spanish equivalent ("flatHierarchyBox": "Seleccionar y organizar columnas") and keep on the same way with the whole file (e.g., check Spanish translated sample).

Localize a specific report

To set a specific language for a report, add a report.localization property with the necessary localization:

Set the localization as a URL to the file

report = {
  dataSource: {
    filename: "https://cdn.webdatarocks.com/data/data.csv"
  },
  // Replace this file with your own localization file
  localization: "https://cdn.webdatarocks.com/loc/es.json"
};

Set the localization as an inline JSON object

report = {
  dataSource: {
    filename: "https://cdn.webdatarocks.com/data/data.csv"
  },
  // Replace the translation below with your own labels
  localization: {
    fieldsList: {
      flatHierarchyBox: "Seleccionar y organizar columnas",
      hierarchyBox: "Seleccionar dimensiones",
      filterBox: "Filtros del Informe",
      // Other labels
    }
  }
};

Set localization for all reports

If you want to set one language for all reports, add a global object with localization when initializing WebDataRocks:

Set the localization as a URL to the file

import { Component } from "@angular/core";
import { WebdatarocksComponent } from "@webdatarocks/ngx-webdatarocks";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  report = {
    // Your report
  };
  globalReport = {
    // Replace this file with your own localization file
    localization: "https://cdn.webdatarocks.com/loc/es.json"
  };
}

<app-wbr-pivot
 [toolbar]="true"
 [report]="report"
 [global]="globalReport">
</app-wbr-pivot>

Set the localization as an inline JSON object

import { Component } from "@angular/core";
import { WebdatarocksComponent } from "@webdatarocks/ngx-webdatarocks";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  report = {
    // Your report
  };
  globalReport = {
    // Replace the translation below with your own labels
    localization: {
      fieldList: {
        flatHierarchyBox: "Seleccionar y organizar columnas",
        hierarchyBox: "Seleccionar dimensiones",
        filterBox: "Filtros del Informe",
        // Other labels
      }
    }
  };
}

<app-wbr-pivot
 [toolbar]="true"
 [report]="report"
 [global]="globalReport">
</app-wbr-pivot>

Learn more about the Global Object.