Tab layout for switching between different sections on a Wave dashboard

[n-srinidhi]

Hi!I am working on building a dashboard using Wave. I need to have two sections in the app which can be navigated using tabs.

1. Is it possible to get this kind of UI?
   

2. How do I create Donut charts in Wave?

[vopani]

1. https://wave.h2o.ai/docs/widgets/form/tabs
2. Wave doesn't support donut charts yet. You can open a feature request. As a workaround, you can embed a donut chart made with matplotlib or plotly or bokeh

[n-srinidhi]

1. https://wave.h2o.ai/docs/widgets/form/tabs
2. Wave doesn't support donut charts yet. You can open a feature request. As a workaround, you can embed a donut chart made with matplotlib or plotly or bokeh

How is Form/Tabs different from a tab card? I would like to organize the cards within each Tab section in a specific layout. I am unable to use zones and layout for this if I use Form/Tabs.

[vopani]

Tab card is an independent card just for tabs. Often its easier to use tabs within a form card itself. Not much difference in functionality between the two so depends on your UI preference and use case.

Can you describe what you'd like to achieve, maybe with a min code or some screenshots / drawings?
Changing components / cards on a tab switch is pretty straightforward.

[n-srinidhi]

Hi, I'm trying to implement something similar to this. A main page or a landing page with content divided into two tabs. On selecting Tab 1,There will be a few charts and tables showing summarized content. On selecting Tab 2, there will be different tables showing different information.

[vopani]

You can do something like this:

from h2o_wave import main, app, Q, ui

@app('/')
async def serve(q: Q):
    if q.args.tabs == 'tab2':
        del q.page['content_1']
        del q.page['plot_1']
        q.page['content_2'] = ui.form_card(
            box=ui.box(zone='content', order=1),
            items=[
                ui.text(content='Tab 2 table')
            ]
        )
    else:
        q.page['meta'] = ui.meta_card(
            box='',
            layouts=[
                ui.layout(
                    breakpoint='xs',
                    zones=[
                        ui.zone(name='tabs'),
                        ui.zone(name='content', direction='row')
                    ]
                )
            ]
        )

        q.page['tabs'] = ui.form_card(
            box='tabs',
            items=[
                ui.tabs(name='tabs', items=[
                    ui.tab(name='tab1', label='Tab 1'),
                    ui.tab(name='tab2', label='Tab 2')
            ])
        ])

        del q.page['content_2']
        q.page['content_1'] = ui.form_card(
            box=ui.box(zone='content', order=1),
            items=[
                ui.text(content='Tab 1 table')
            ]
        )
        q.page['plot_1'] = ui.form_card(
            box=ui.box(zone='content', order=2),
            items=[
                ui.text(content='Tab 1 plot')
            ]
        )

    await q.page.save()

[n-srinidhi]

This worked!Thank you!