Repository: h2oai/wave
File: py/demo/dashboard_grey.py (Python)

Code before:
from h2o_wave import ui, data, Q
from .common import global_nav
from .synthetic_data import *


async def show_grey_dashboard(q: Q):
    q.page['meta'] = ui.meta_card(box='', layouts=[
        ui.layout(
            breakpoint='xl',
            min_width='800px',
            zones=[
                ui.zone('header', size='0'),
                ui.zone('body', size='1000px', zones=[
                    ui.zone('title', size='0'),
                    ui.zone('top', direction=ui.ZoneDirection.ROW, size='25%'),
                    ui.zone('middle', direction=ui.ZoneDirection.ROW, size='25%'),
                    ui.zone('middle2', direction=ui.ZoneDirection.ROW, size='25%'),
                    ui.zone('bottom', direction=ui.ZoneDirection.ROW, size='20%'),
                ]),
                ui.zone('footer', size='0'),
            ]
        )
    ])

    q.page['header'] = ui.header_card(box='header', title='H2O Wave Demo', subtitle='Grey Dashboard',
                                      nav=global_nav)
    q.page['section'] = ui.section_card(
        box='title',
        title=next(sample_title),
        subtitle=next(sample_caption),
        items=[
            ui.label(label='Start:'),
            ui.date_picker(name='target_date', label='', value='2020-12-20'),
            ui.label(label='End:'),
            ui.date_picker(name='target_date', label='', value='2020-12-25'),
        ],
    )

    stock_dates = generate_time_series(10000)
    stock_prices = generate_random_walk()

    q.page['small'] = ui.small_stat_card(
        box=ui.box('top', order=1),

Review comment (suggestion):
This does not address the problem why the footer overlaps the body, regardless of the height of the body. For example, the problem persists even if you change the body size to `800px`.

Code after:
from h2o_wave import ui, data, Q
from .common import global_nav
from .synthetic_data import *


async def show_grey_dashboard(q: Q):
    q.page['meta'] = ui.meta_card(box='', layouts=[
        ui.layout(
            breakpoint='xl',
            min_width='800px',
            zones=[
                ui.zone('header', size='0'),
                ui.zone('body', size='1000px', zones=[
                    ui.zone('title', size='0'),
                    ui.zone('top', direction=ui.ZoneDirection.ROW, size='25%'),
                    ui.zone('middle', direction=ui.ZoneDirection.ROW, size='25%'),
                    ui.zone('middle2', direction=ui.ZoneDirection.ROW, size='25%'),
                    ui.zone('bottom', direction=ui.ZoneDirection.ROW, size='25%'),
                ]),
                ui.zone('footer', size='0'),
            ]
        )
    ])

    q.page['header'] = ui.header_card(box='header', title='H2O Wave Demo', subtitle='Grey Dashboard',
                                      nav=global_nav)
    q.page['section'] = ui.section_card(
        box='title',
        title=next(sample_title),
        subtitle=next(sample_caption),
        items=[
            ui.label(label='Start:'),
            ui.date_picker(name='target_date', label='', value='2020-12-20'),
            ui.label(label='End:'),
            ui.date_picker(name='target_date', label='', value='2020-12-25'),
        ],
    )

    stock_dates = generate_time_series(10000)
    stock_prices = generate_random_walk()

    q.page['small'] = ui.small_stat_card(
        box=ui.box('top', order=1),