Search results

Globalization

Internationalization

Internationalization library provides support for formatting and parsing the number by using the official Unicode CLDR JSON data and also provides the loadCldr method to load the culture specific CLDR JSON data. The TreeMap comes with built-in internationalization support to adapt based on culture.

By default, all the Blazor components are specific to English culture (‘en-US’). If you need to go with a different culture, follow the below steps:

  • Install the CLDR-Data package using the following command (it installs the CLDR JSON data). To know more about CLDR data refer to the CLDR-Data.
npm install cldr-data --save

After the package has been installed, you can find the culture specific JSON data under the following location \node_modules\cldr-data. Copy the required cldr-data file into the wwwroot\cldr-data folder.

The TreeMap component supports internationalization for the following elements:

  • Data labels
  • Tooltips

In the following code example, tooltip is globalized to the Deutsch culture.

@using Microsoft.JSInterop
@using Syncfusion.EJ2.Blazor.TreeMap
@using Syncfusion.EJ2.Blazor

<EjsTreeMap WeightValuePath="GDP" TValue="GDPReport" DataSource="@growthReports" Format="c">
    <TreeMapTooltipSettings Visible=true>
    </TreeMapTooltipSettings>
</EjsTreeMap>

@code {
    public class GDPReport
    {
        public string Country;
        public double GDP;
        public double Percentage;
        public int Rank;
    };

    private List<GDPReport> growthReports = new List<GDPReport> {
            new GDPReport {Country="United States", GDP=17946, Percentage=11.08, Rank=1},
            new GDPReport {Country="China", GDP=10866, Percentage= 28.42, Rank=2},
            new GDPReport {Country="Japan", GDP=4123, Percentage=-30.78, Rank=3},
            new GDPReport {Country="Germany", GDP=3355, Percentage=-5.19, Rank=4},
            new GDPReport {Country="United Kingdom", GDP=2848, Percentage=8.28, Rank=5},
            new GDPReport {Country="France", GDP=2421, Percentage=-9.69, Rank=6},
            new GDPReport {Country="India", GDP=2073, Percentage=13.65, Rank=7},
            new GDPReport {Country="Italy", GDP=1814, Percentage=-12.45, Rank=8},
            new GDPReport {Country="Brazil", GDP=1774, Percentage=-27.88, Rank=9},
            new GDPReport {Country="Canada", GDP=1550, Percentage=-15.02, Rank=10}
    };
    [Inject]
    protected IJSRuntime JsRuntime { get; set; }
    protected override void OnAfterRender()
    {
        this.JsRuntime.Ejs().LoadCldrData(new string[] { "wwwroot/cldr-data/de/currencies.json", "wwwroot/cldr-data/de/numbers.json" }).SetCulture("de").SetCurrencyCode("EUR");
    }
}

TreeMap with internationalization

RTL support

The TreeMap component supports the right-to-left rendering for all its elements such as nodes, tooltip, data labels, and legends.

If you set the EnableRtl property to true, then the tooltip and legend icon will be rendered on the right and the legend text will be rendered on the left of the legend icon. Also set RenderDirection value to ‘TopRightBottomLeft’ and LabelPosition value to ‘TopRight’.

@using Microsoft.JSInterop
@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.TreeMap

<EjsTreeMap DataSource="@fruits"
            TValue="Fruit"
            WeightValuePath="Count"
            ColorValuePath="Color"
            EnableRtl="true"
            RenderDirection="RenderingMode.TopRightBottomLeft">
    <TreeMapLeafItemSettings LabelPath="Name" LabelPosition="LabelPosition.TopRight">
    </TreeMapLeafItemSettings>
    <TreeMapLegendSettings Visible="true"
                           ShapePadding="2"
                           Position="LegendPosition.Top">
    </TreeMapLegendSettings>
    <TreeMapTooltipSettings Visible="true"></TreeMapTooltipSettings>
</EjsTreeMap>
@code {
    public class Fruit
    {
        public string Name;
        public int Count;
        public string Color;
    };
    private List<Fruit> fruits = new List<Fruit> {
        new Fruit { Name="Apple", Count=5000, Color= "yellow" },
        new Fruit { Name="Mango", Count=3000, Color="orange" },
        new Fruit { Name="Orange", Count=2300, Color="red" },
        new Fruit { Name="Banana", Count=500, Color="green" }
            };
    [Inject]
    protected IJSRuntime JsRuntime { get; set; }

    protected override void OnAfterRender()
    {
        this.JsRuntime.Ejs().EnableRtl(true);
    }
}

TreeMap with RTL