How can i manage the idiom and notation inside wave components?

[junioraze]

Hello guys!
I have an app and i need to change the language of the data picker to pt-br, it is possible?

Another point is the 'intl column notation=compact', is there any way to control it and change to 'K' 'M' 'B' (image above in 'mil' 'mi')?

Thanks for read, and sorry my poor english.

[junioraze]

image below

[mturoci]

cc @marek-mihok

[marek-mihok]

Hi @junioraze,

i need to change the language of the data picker to pt-br, it is possible?

As discussed here, there is no option to do it for components with hardcoded strings. You can create a new feature request.

Another point is the 'intl column notation=compact', is there any way to control it and change to 'K' 'M' 'B' (image above in 'mil' 'mi')?

Could you please provide me with reproducible example? This is as close as I could get:

from h2o_wave import main, app, Q, ui, data


@app('/demo')
async def serve(q: Q):
    q.page['example'] = ui.plot_card(
    box='1 1 4 5',
    title='Interval',
    data=data('year length', 5, rows=[
        ('1991', 1/100),
        ('1995', 1/8),
        ('2002', 1/16),
        ('2003', 1/32),
        ('2010', 1/50),
    ]),
    plot=ui.plot([ui.mark(type='interval', 
                          x='=year', 
                          y_min=0, 
                        y='={{intl length style="unit" unit="mile" type="length" notation="compact" }}'
                          )])
)
    await q.page.save()

And what does 'K' 'M' 'B' mean? Is it a localization (translation) thing or are these just arbitrary units?

[junioraze]

Hello @marek-mihok first thanks for reply me and give directions for the first question. About the second one, i think i dont make me clear. When i say "K M B" its about the notation K = thousands, M = million, B=billion.. so if exists a way for me to handle the compact notation in intl.

Code:

from h2o_wave import main, app, Q, ui, data

@app("/")
async def serve(q: Q):
    # First time a browser comes to the app
    if not q.client.initialized:
        # Web app metadata.
        q.page["meta"] = ui.meta_card(
            box="",
            # Tab title.
            title="Example #2287",
            # Layout definitions.
            layouts=[
                ui.layout(
                    breakpoint="xs",
                    min_height="100vh",
                    max_width="1200px",
                    zones=[
                        ui.zone("content", size="1"),
                        ui.zone("footer"),
                    ],
                )
            ],
        )


        # Render app body.
        q.page["body"] = ui.plot_card(
            box="content",
            title="Interval",
            data=data(
                "length year",
                5,
                rows=[
                    (10000, "2020-01-01"),
                    (100000, "2021-01-01"),
                    (1000000, "2022-01-01"),
                    (10000000, "2023-01-01"),
                    (100000000, "2024-01-01"),
                ],
            ),
            plot=ui.plot(
                [
                    ui.mark(
                        type="interval",
                        x="=year",
                        y_min=0,
                        y='={{intl length notation="compact" }}',
                        y_scale='log'
                    )
                ]
            ),
        )


        q.client.initialized = True

    await q.page.save()

As you can see on y-axis the compact notation handles thousand as "mil" and million as "mi", sometimes in log scales is difficult to understand the difference. Is there any way for me to change this?

[marek-mihok]

@junioraze when I run your code, I have the output you expect:

The reason why it is showing mi/mil instead of K,M,B is the language of your browser. Our plot implementation uses navigator.language prop for localisation of number format which usually uses language of the browser.

This is what happens when I override the browser default with pt-BR locale:

Screen.Recording.2024-03-21.at.12.16.38.mov

@mturoci wouldn't make sense to prioritise the language of the website by obtaining html lang prop here? Something like this?

export const intl = createIntl({
  locale: document.documentElement.getAttribute("lang") || navigator.language,

[junioraze]

Thank y'all, i felt a little confused with the fact that my browser change it. I will try to apply the custom script way, but would be nice if we can configure this unattached to navigator.language cuz sometimes we want just to change that exactly behaviour. Thanks again!

[mturoci]

wouldn't make sense to prioritise the language of the website by obtaining html lang prop

Wouldn't that always return en since Wave comes with its own index.html?

[marek-mihok]

Wouldn't that always return en since Wave comes with its own index.html?

By default yes, but it can be configured by custom script which would help to resolve this issue:

q.page['meta'].script = ui.inline_script('document.documentElement.setAttribute("lang", "pt-BR");')

But this is not ideal solution in my opinion.

What is the meaning of using navigator.language for plot's number format in the first place? Browser language does not have to correspond to language of the app.

I think the better idea would be to make Wave index.html lang prop configurable and use the language from there.

[mturoci]

it can be configured by custom script

This assumes calling custom script before rendering the plot.

What is the meaning of using navigator.language for plot's number format in the first place? Browser language does not have to correspond to language of the app.

The reason is internationalization.