Example #1
0
async def show_blue_dashboard(q: Q):
    q.page['meta'] = ui.meta_card(
        box='',
        layouts=[
            ui.layout(breakpoint='xl',
                      width='1200px',
                      zones=[
                          ui.zone('header', size='80px'),
                          ui.zone('title', size='0'),
                          ui.zone('top',
                                  direction=ui.ZoneDirection.ROW,
                                  size='200px'),
                          ui.zone('middle',
                                  direction=ui.ZoneDirection.ROW,
                                  size='385px'),
                          ui.zone('bottom',
                                  direction=ui.ZoneDirection.ROW,
                                  size='385px'),
                          ui.zone('footer', size='50px'),
                      ])
        ])

    q.page['header'] = ui.header_card(box='header',
                                      title='H2O Wave Demo',
                                      subtitle='Blue Dashboard',
                                      nav=global_nav)

    q.page['title'] = ui.section_card(
        box='title',
        title=next(sample_title),
        subtitle=next(sample_caption),
        items=[
            ui.toggle(name='search', label=next(sample_term), value=True),
            ui.dropdown(name='distribution',
                        label='',
                        value='option0',
                        choices=[
                            ui.choice(name=f'option{i}',
                                      label=next(sample_term))
                            for i in range(5)
                        ]),
            ui.date_picker(name='target_date', label='', value='2020-12-25'),
        ],
    )

    sales_dates = generate_time_series(1000)
    sales_values = generate_random_walk()

    q.page['total_quantity'] = ui.tall_series_stat_card(
        box=ui.box('top', order=1),
        title=next(sample_term),
        value=next(sample_dollars),
        aux_value=next(sample_title),
        plot_type='area',
        plot_color='$blue',
        plot_category='date',
        plot_value='quantity',
        plot_zero_value=0,
        plot_data=data(
            fields=['date', 'quantity'],
            rows=[(next(sales_dates), next(sales_values)) for i in range(30)],
            pack=True,
        ),
    )
    q.page['total_cost'] = ui.tall_series_stat_card(
        box=ui.box('top', order=2),
        title=next(sample_term),
        value=next(sample_amount),
        aux_value=next(sample_percent),
        plot_type='area',
        plot_color='$blue',
        plot_category='date',
        plot_value='cost',
        plot_zero_value=0,
        plot_data=data(
            fields=['date', 'cost'],
            rows=[(next(sales_dates), next(sales_values)) for i in range(30)],
            pack=True,
        ),
    )
    q.page['total_revenue'] = ui.tall_series_stat_card(
        box=ui.box('top', order=3),
        title=next(sample_term),
        value=next(sample_dollars),
        aux_value=next(sample_title),
        plot_type='area',
        plot_color='$blue',
        plot_category='date',
        plot_value='revenue',
        plot_zero_value=0,
        plot_data=data(
            fields=['date', 'revenue'],
            rows=[(next(sales_dates), next(sales_values)) for i in range(30)],
            pack=True,
        ),
    )
    q.page['total_profit'] = ui.tall_series_stat_card(
        box=ui.box('top', order=4),
        title=next(sample_term),
        value=next(sample_amount),
        aux_value=next(sample_title),
        plot_type='area',
        plot_color='$blue',
        plot_category='date',
        plot_value='profit',
        plot_zero_value=0,
        plot_data=data(
            fields=['date', 'profit'],
            rows=[(next(sales_dates), next(sales_values)) for i in range(30)],
            pack=True,
        ),
    )

    ytd_revenue = generate_random_walk(0, 10000, 0.5)

    q.page['revenue_by_customer'] = ui.plot_card(
        box='middle',
        title=next(sample_title),
        data=data(
            fields=['channel', 'sessions'],
            rows=[(next(sample_term), next(ytd_revenue)) for i in range(10)],
            pack=True,
        ),
        plot=ui.plot([
            ui.mark(type='interval',
                    x='=sessions',
                    y='=channel',
                    y_min=0,
                    color='$blue')
        ]))

    months = generate_sequence(['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'])

    q.page['ytd_revenue'] = ui.plot_card(
        box=ui.box(zone='middle', width='66%', order=2),
        title=next(sample_title),
        data=data(fields=['month', 'channel', 'revenue'],
                  rows=[(next(months), 'Online', next(ytd_revenue))
                        for i in range(6)] +
                  [(next(months), 'In-store', next(ytd_revenue))
                   for i in range(6)],
                  pack=True),
        plot=ui.plot([
            ui.mark(type='interval',
                    x='=month',
                    y='=revenue',
                    color='=channel',
                    dodge='auto',
                    y_min=0,
                    color_range='$cyan $blue')
        ]))

    q.page['top_products'] = ui.stat_list_card(
        box='bottom',
        title=next(sample_title),
        subtitle=next(sample_caption),
        items=[
            ui.stat_list_item(label=next(sample_term),
                              caption=next(sample_title),
                              value=next(sample_dollars),
                              icon=next(sample_icon),
                              icon_color=next(sample_color)) for i in range(5)
        ],
    )

    q.page['recent_earnings'] = ui.stat_table_card(
        box=ui.box(zone='bottom', width='66%', order=2),
        title=next(sample_title),
        subtitle=next(sample_caption),
        columns=['Date', 'Sales', 'Earnings', 'Taxes'],
        items=[
            ui.stat_table_item(label=next(sample_title),
                               values=[
                                   next(sample_dollars),
                                   next(sample_percent),
                                   next(sample_amount)
                               ]) for i in range(8)
        ])

    q.page['footer'] = ui.footer_card(
        box='footer', caption='(c) 2021 H2O.ai. All rights reserved.')

    await q.page.save()
Example #2
0
async def show_cyan_dashboard(q: Q):
    q.page['meta'] = ui.meta_card(box='', layouts=[
        ui.layout(
            breakpoint='xl',
            width='1200px',
            zones=[
                ui.zone('header', size='0'),
                ui.zone('body', direction=ui.ZoneDirection.ROW, zones=[
                    ui.zone('content', size='75%', zones=[
                        ui.zone('top', size='600px'),
                        ui.zone('middle', size='300px', direction=ui.ZoneDirection.ROW, zones=[
                            ui.zone('middle_left'),
                            ui.zone('middle_right'),
                        ]),
                        ui.zone('bottom', size='500px'),
                    ]),
                    ui.zone('sidebar', size='25%'),
                ]),
                ui.zone('footer', size='0'),
            ]
        )
    ])

    q.page['header'] = ui.header_card(box='header', title='H2O Wave Demo', subtitle='Cyan Dashboard',
                                      nav=global_nav)
    q.page['section'] = ui.section_card(
        box=ui.box('top', order=1, size=0),
        title=next(sample_title),
        subtitle=next(sample_caption),
        items=[
            ui.toggle(name='when', label=next(sample_term), value=False),
            ui.toggle(name='what', label=next(sample_term), value=True),
        ]
    )

    trend_date = generate_time_series(300)
    trend_price = generate_random_walk(2000, 8000, 0.2)
    q.page['sales_overview'] = ui.form_card(
        box=ui.box('top', order=2),
        title=next(sample_title),
        items=[
            ui.stats(items=[
                ui.stat(label=next(sample_term), value=next(sample_percent), caption=next(sample_dollars)),
                ui.stat(label=next(sample_term), value=next(sample_dollars), caption=next(sample_percent)),
                ui.stat(label=next(sample_term), value=next(sample_amount), caption=next(sample_percent)),
                ui.stat(label=next(sample_term), caption=next(sample_caption)),
            ], inset=True),
            ui.visualization(
                plot=ui.plot([
                    ui.mark(type='area', x_scale='time', x='=date', y='=price', color='$cyan'),
                ]),
                data=data(
                    fields=['date', 'price'],
                    rows=[(next(trend_date), next(trend_price)) for i in range(120)],
                    pack=True
                ),
                height='350px',
            ),
        ],
    )

    q.page['ticket_sales'] = ui.form_card(
        box=ui.box('middle_left'),
        title=next(sample_title),
        items=[
            ui.visualization(
                plot=ui.plot([
                    ui.mark(type='interval', x_scale='time', x='=date', y='=price', color='$cyan'),
                ]),
                data=data(
                    fields=['date', 'price'],
                    rows=[(next(trend_date), next(trend_price)) for i in range(120)],
                    pack=True
                ),
                height='150px',
            ),
            ui.stats(items=[
                ui.stat(label=next(sample_term), value=next(sample_percent)) for i in range(4)
            ], justify='between', inset=True),
        ],
    )
    q.page['events_hosted'] = ui.wide_bar_stat_card(
        box=ui.box('middle_right', order=1),
        title=next(sample_title),
        value=next(sample_dollars),
        aux_value=next(sample_percent),
        progress=random.random(),
        plot_color='$cyan',
    )
    q.page['points_earned'] = ui.wide_bar_stat_card(
        box=ui.box('middle_right', order=2),
        title=next(sample_title),
        value=next(sample_amount),
        aux_value=next(sample_percent),
        progress=random.random(),
        plot_color='$cyan',
    )
    q.page['points_given'] = ui.wide_bar_stat_card(
        box=ui.box('middle_right', order=3),
        title=next(sample_title),
        value=next(sample_dollars),
        aux_value=next(sample_percent),
        progress=random.random(),
        plot_color='$cyan',
    )
    session_count = generate_random_walk(1000, 8000)
    q.page['event_poll'] = ui.form_card(
        box='bottom',
        title=next(sample_title),
        items=[
            ui.inline(items=[
                ui.dropdown(name='region', label=next(sample_term), value='option0', choices=[
                    ui.choice(name=f'option{i}', label=next(sample_term)) for i in range(5)
                ]),
                ui.dropdown(name='age', label=next(sample_term), value='option0', choices=[
                    ui.choice(name=f'option{i}', label=next(sample_term)) for i in range(5)
                ]),
                ui.dropdown(name='response', label=next(sample_term), value='option0', choices=[
                    ui.choice(name=f'option{i}', label=next(sample_term)) for i in range(5)
                ]),
            ]),
            ui.visualization(
                plot=ui.plot([
                    ui.mark(type='interval', x='=sessions', y='=channel', y_min=0, color='$cyan')
                ]),
                data=data(
                    fields=['channel', 'sessions'],
                    rows=[(next(sample_term), next(session_count)) for i in range(10)],
                    pack=True,
                ),
                height='350px',
            ),
        ],

    )
    q.page['sidebar_section'] = ui.section_card(
        box=ui.box('sidebar', order=1, size='0'),
        title=next(sample_title),
        subtitle=next(sample_caption),
    )
    q.page['filter'] = ui.form_card(
        box=ui.box('sidebar', height='335px', order=2),
        title=next(sample_title),
        items=[
            ui.dropdown(name='region', label=next(sample_term), value='option0', choices=[
                ui.choice(name=f'option{i}', label=next(sample_term)) for i in range(5)
            ]),
            ui.dropdown(name='age', label=next(sample_term), value='option0', choices=[
                ui.choice(name=f'option{i}', label=next(sample_term)) for i in range(5)
            ]),
            ui.dropdown(name='response', label=next(sample_term), value='option0', choices=[
                ui.choice(name=f'option{i}', label=next(sample_term)) for i in range(5)
            ]),
            ui.checkbox(name='plural', label=next(sample_title), value=True),
            ui.checkbox(name='annual', label=next(sample_title), value=True),
        ],
    )

    event_icon = generate_random_choice(['MusicInCollection', 'Video', 'TVMonitor'])

    q.page['upcoming_events'] = ui.stat_list_card(
        box=ui.box('sidebar', order=3),
        title=next(sample_title),
        subtitle=next(sample_caption),
        items=[ui.stat_list_item(label=next(sample_title), caption=next(sample_caption),
                                 aux_value=f'{random.randint(1, 59)}m',
                                 icon=next(event_icon)) for i in range(10)],
    )

    q.page['footer'] = ui.footer_card(box='footer', caption='(c) 2021 H2O.ai. All rights reserved.')

    await q.page.save()
Example #3
0
async def show_purple_dashboard(q: Q):
    q.page['meta'] = ui.meta_card(
        box='',
        layouts=[
            ui.layout(
                breakpoint='xs',
                zones=[
                    ui.zone('header', size='80px'),
                    ui.zone('title', size='0'),
                    ui.zone('body'),
                    ui.zone('footer', size='50px'),
                ],
            ),
            ui.layout(
                breakpoint='m',
                zones=[
                    ui.zone('header', size='80px'),
                    ui.zone('title', size='0'),
                    ui.zone('body',
                            direction=ui.ZoneDirection.ROW,
                            zones=[
                                ui.zone(
                                    'main',
                                    zones=[
                                        ui.zone('overview', size='0'),
                                        ui.zone('stats1',
                                                direction=ui.ZoneDirection.ROW,
                                                size='150px'),
                                        ui.zone('stats2',
                                                direction=ui.ZoneDirection.ROW,
                                                size='150px'),
                                        ui.zone('others'),
                                    ]),
                                ui.zone('sidebar', size='30%'),
                            ]),
                    ui.zone('footer', size='50px'),
                ],
            ),
            ui.layout(
                breakpoint='xl',
                width='1200px',
                zones=[
                    ui.zone('header', size='80px'),
                    ui.zone('title', size='0'),
                    ui.zone('body',
                            direction=ui.ZoneDirection.ROW,
                            zones=[
                                ui.zone('main',
                                        size='3',
                                        zones=[
                                            ui.zone(
                                                'overview',
                                                direction=ui.ZoneDirection.ROW,
                                                size='200px'),
                                            ui.zone(
                                                'stats',
                                                direction=ui.ZoneDirection.ROW,
                                                size='150px'),
                                            ui.zone(
                                                'details',
                                                direction=ui.ZoneDirection.ROW,
                                                size='400px'),
                                            ui.zone(
                                                'reports',
                                                direction=ui.ZoneDirection.ROW,
                                                size='400px'),
                                        ]),
                                ui.zone('sidebar', size='30%'),
                            ]),
                    ui.zone('footer', size='50px'),
                ])
        ])
    q.page['header'] = ui.header_card(box='header',
                                      title='H2O Wave Demo',
                                      subtitle='Purple Dashboard',
                                      nav=global_nav)

    q.page['title'] = ui.section_card(
        box='title',
        title=next(sample_title),
        subtitle=next(sample_caption),
        items=[
            ui.date_picker(name='target_date', label='', value='2020-12-25'),
        ],
    )

    customers_overview_dates = generate_time_series(30)
    customers_overview_counts = generate_random_walk()
    q.page['customers_overview'] = ui.tall_series_stat_card(
        box=ui.boxes(
            ui.box('body', height='200px', order=1),
            ui.box('overview', height='200px', order=1),
            ui.box('overview', order=1),
        ),
        title=next(sample_title),
        value=next(sample_dollars),
        aux_value=next(sample_title),
        plot_type='area',
        plot_color='$red',
        plot_category='date',
        plot_value='customer_count',
        plot_zero_value=0,
        plot_data=data(
            fields=['date', 'customer_count'],
            rows=[(next(customers_overview_dates),
                   next(customers_overview_counts)) for i in range(30)],
            pack=True,
        ),
    )
    conversions_overview_dates = generate_time_series(30)
    conversions_overview_counts = generate_random_walk()
    q.page['conversions_overview'] = ui.tall_series_stat_card(
        box=ui.boxes(
            ui.box('body', height='200px', order=2),
            ui.box('overview', height='200px', order=2),
            ui.box('overview', order=2),
        ),
        title=next(sample_title),
        value=next(sample_amount),
        aux_value=next(sample_dollars),
        plot_type='interval',
        plot_color='$pink',
        plot_category='date',
        plot_value='conversions',
        plot_zero_value=0,
        plot_data=data(
            fields=['date', 'conversions'],
            rows=[(next(conversions_overview_dates),
                   next(conversions_overview_counts)) for i in range(30)],
            pack=True,
        ),
    )
    revenue_overview_dates = generate_time_series(30)
    revenue_overview_counts = generate_random_walk()
    q.page['revenue_overview'] = ui.tall_series_stat_card(
        box=ui.boxes(
            ui.box('body', height='200px', order=3),
            ui.box('overview', height='200px', order=3),
            ui.box('overview', order=3),
        ),
        title=next(sample_title),
        value=next(sample_amount),
        aux_value=next(sample_dollars),
        plot_type='area',
        plot_color='$purple',
        plot_category='date',
        plot_value='revenue',
        plot_zero_value=0,
        plot_data=data(
            fields=['date', 'revenue'],
            rows=[(next(revenue_overview_dates), next(revenue_overview_counts))
                  for i in range(30)],
            pack=True,
        ),
    )

    metric_dates = generate_time_series(30)
    metric_values = generate_random_walk()
    q.page['conversion_stats'] = ui.small_series_stat_card(
        box=ui.boxes(
            ui.box('body', height='150px', order=4),
            ui.box('stats1', order=1),
            ui.box('stats', order=1),
        ),
        title=next(sample_term),
        value=next(sample_percent),
        plot_type='area',
        plot_color='$red',
        plot_category='date',
        plot_value='metric',
        plot_zero_value=0,
        plot_data=data(
            fields=['date', 'metric'],
            rows=[(next(metric_dates), next(metric_values))
                  for i in range(30)],
            pack=True,
        ),
    )
    q.page['revenue_stats'] = ui.small_series_stat_card(
        box=ui.boxes(
            ui.box('body', height='150px', order=5),
            ui.box('stats1', order=2),
            ui.box('stats', order=2),
        ),
        title=next(sample_term),
        value=next(sample_percent),
        plot_type='interval',
        plot_color='$pink',
        plot_category='date',
        plot_value='metric',
        plot_zero_value=0,
        plot_data=data(
            fields=['date', 'metric'],
            rows=[(next(metric_dates), next(metric_values))
                  for i in range(30)],
            pack=True,
        ),
    )
    q.page['purchases_stats'] = ui.small_series_stat_card(
        box=ui.boxes(
            ui.box('body', height='150px', order=6),
            ui.box('stats1', order=3),
            ui.box('stats', order=3),
        ),
        title=next(sample_term),
        value=next(sample_percent),
        plot_type='area',
        plot_color='$purple',
        plot_category='date',
        plot_value='metric',
        plot_zero_value=0,
        plot_data=data(
            fields=['date', 'metric'],
            rows=[(next(metric_dates), next(metric_values))
                  for i in range(30)],
            pack=True,
        ),
    )
    q.page['transactions_stats'] = ui.small_series_stat_card(
        box=ui.boxes(
            ui.box('body', height='150px', order=7),
            ui.box('stats2', order=1),
            ui.box('stats', order=4),
        ),
        title=next(sample_term),
        value=next(sample_percent),
        plot_type='area',
        plot_color='$red',
        plot_category='date',
        plot_value='metric',
        plot_zero_value=0,
        plot_data=data(
            fields=['date', 'metric'],
            rows=[(next(metric_dates), next(metric_values))
                  for i in range(30)],
            pack=True,
        ),
    )
    q.page['order_stats'] = ui.small_series_stat_card(
        box=ui.boxes(
            ui.box('body', height='150px', order=8),
            ui.box('stats2', order=2),
            ui.box('stats', order=5),
        ),
        title=next(sample_term),
        value=next(sample_percent),
        plot_type='interval',
        plot_color='$pink',
        plot_category='date',
        plot_value='metric',
        plot_zero_value=0,
        plot_data=data(
            fields=['date', 'metric'],
            rows=[(next(metric_dates), next(metric_values))
                  for i in range(30)],
            pack=True,
        ),
    )
    q.page['quantity_stats'] = ui.small_series_stat_card(
        box=ui.boxes(
            ui.box('body', height='150px', order=6),
            ui.box('stats2', order=3),
            ui.box('stats', order=6),
        ),
        title=next(sample_term),
        value=next(sample_percent),
        plot_type='area',
        plot_color='$purple',
        plot_category='date',
        plot_value='metric',
        plot_zero_value=0,
        plot_data=data(
            fields=['date', 'metric'],
            rows=[(next(metric_dates), next(metric_values))
                  for i in range(30)],
            pack=True,
        ),
    )

    sales_days_1 = generate_time_series(15)
    sales_days_2 = generate_time_series(15)
    sales_amounts_1 = generate_random_walk(8000, 15000)
    sales_amounts_2 = generate_random_walk(8000, 15000)
    q.page['sales_details'] = ui.form_card(
        box=ui.boxes(
            ui.box('body', height='400px', order=9),
            ui.box('others', height='400px', order=1),
            ui.box('details', order=1),
        ),
        title=next(sample_title),
        items=[
            ui.stats(items=[
                ui.stat(label=next(sample_term), value=next(sample_dollars)),
                ui.stat(label=next(sample_term), value=next(sample_dollars)),
            ]),
            ui.visualization(
                plot=ui.plot([
                    ui.mark(type='interval',
                            x_scale='time',
                            x='=date',
                            y='=sales',
                            color='=site',
                            y_min=0,
                            color_range='$purple $red')
                ]),
                data=data(
                    fields=['site', 'date', 'sales'],
                    rows=[('Online', next(sales_days_1), next(sales_amounts_1))
                          for i in range(15)] +
                    [('In-store', next(sales_days_2), next(sales_amounts_2))
                     for i in range(15)],
                    pack=True),
                height='210px',
            )
        ],
    )

    audience_days1 = generate_time_series(60)
    audience_days2 = generate_time_series(60)
    audience_hits1 = generate_random_walk(10000, 20000, 0.2)
    audience_hits2 = generate_random_walk(8000, 15000)

    q.page['visitor_details'] = ui.form_card(
        box=ui.boxes(
            ui.box('body', height='400px', order=10),
            ui.box('others', height='400px', order=2),
            ui.box('details', order=2),
        ),
        title=next(sample_title),
        items=[
            ui.stats(items=[
                ui.stat(label=next(sample_term), value=next(sample_amount)),
                ui.stat(label=next(sample_term), value=next(sample_dollars)),
                ui.stat(label=next(sample_term), value=next(sample_percent)),
                ui.stat(label=next(sample_term), value=next(sample_dollars)),
            ]),
            ui.visualization(
                plot=ui.plot([
                    ui.mark(type='area',
                            x_scale='time',
                            x='=date',
                            y='=visitors',
                            color='=site',
                            color_range='$purple $pink'),
                    ui.mark(type='line',
                            x_scale='time',
                            x='=date',
                            y='=visitors',
                            color='=site',
                            color_range='$purple $pink'),
                ]),
                data=data(
                    fields=['site', 'date', 'visitors'],
                    rows=[
                        ('Online', next(audience_days1), next(audience_hits1))
                        for i in range(60)
                    ] +
                    [('In-store', next(audience_days2), next(audience_hits2))
                     for i in range(60)],
                    pack=True),
                height='210px',
            )
        ],
    )

    q.page['earnings_reports'] = ui.stat_table_card(
        box=ui.boxes(
            ui.box('body', order=11),
            ui.box('others', order=3),
            ui.box('reports', order=1, size=3),
        ),
        title=next(sample_title),
        subtitle=next(sample_caption),
        columns=[
            next(sample_term),
            next(sample_term),
            next(sample_term),
            next(sample_term)
        ],
        items=[
            ui.stat_table_item(label=next(sample_title),
                               values=[
                                   next(sample_dollars),
                                   next(sample_percent),
                                   next(sample_percent)
                               ]) for i in range(8)
        ])
    q.page['products_reports'] = ui.stat_list_card(
        box=ui.boxes(
            ui.box('body', order=12),
            ui.box('others', order=4),
            ui.box('reports', order=2),
        ),
        title=next(sample_title),
        subtitle=next(sample_caption),
        items=[
            ui.stat_list_item(label=next(sample_term),
                              caption=next(sample_title),
                              value=next(sample_dollars),
                              icon=next(sample_icon),
                              icon_color=next(sample_color)) for i in range(5)
        ],
    )
    q.page['activity'] = ui.stat_list_card(
        box=ui.boxes(
            ui.box('body', order=13),
            ui.box('sidebar', size='0'),
            ui.box('sidebar', size='0'),
        ),
        title=next(sample_title),
        subtitle=next(sample_caption),
        items=[
            ui.stat_list_item(label=next(sample_term),
                              caption=f'Order #{random.randint(1111, 9999)}',
                              aux_value=f'{random.randint(1, 9)}hr',
                              icon=next(sample_icon)) for i in range(10)
        ],
    )

    q.page['footer'] = ui.footer_card(
        box='footer', caption='(c) 2021 H2O.ai. All rights reserved.')

    await q.page.save()
Example #4
0
async def show_red_dashboard(q: Q):
    q.page['meta'] = ui.meta_card(
        box='',
        layouts=[
            ui.layout(
                breakpoint='xl',
                width='1200px',
                zones=[
                    ui.zone('header'),
                    ui.zone('title'),
                    ui.zone('top',
                            direction=ui.ZoneDirection.ROW,
                            size='385px',
                            zones=[
                                ui.zone('top_left'),
                                ui.zone('top_right',
                                        zones=[
                                            ui.zone(
                                                'top_right_top',
                                                direction=ui.ZoneDirection.ROW,
                                                size='1'),
                                            ui.zone('top_right_bottom',
                                                    size='1'),
                                        ]),
                            ]),
                    ui.zone('middle',
                            direction=ui.ZoneDirection.ROW,
                            size='385px'),
                    ui.zone('bottom',
                            direction=ui.ZoneDirection.ROW,
                            size='385px',
                            zones=[
                                ui.zone('bottom_left'),
                                ui.zone('bottom_right', size='66%'),
                            ]),
                    ui.zone('footer'),
                ])
        ])

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

    audience_days1 = generate_time_series(60)
    audience_days2 = generate_time_series(60)
    audience_hits1 = generate_random_walk(10000, 20000, 0.2)
    audience_hits2 = generate_random_walk(8000, 15000)

    q.page['audience_metrics'] = ui.form_card(
        box='top_left',
        title=next(sample_title),
        items=[
            ui.text(next(sample_caption)),
            ui.stats(items=[
                ui.stat(label=next(sample_term), value=next(sample_dollars)),
                ui.stat(label=next(sample_term), value=next(sample_amount)),
                ui.stat(label=next(sample_term), value=next(sample_amount)),
            ]),
            ui.visualization(
                plot=ui.plot([
                    ui.mark(type='area',
                            x_scale='time',
                            x='=date',
                            y='=visitors',
                            color='=site',
                            color_range='$red $tangerine'),
                    ui.mark(type='line',
                            x_scale='time',
                            x='=date',
                            y='=visitors',
                            color='=site',
                            color_range='$red $tangerine'),
                ]),
                data=data(
                    fields=['site', 'date', 'visitors'],
                    rows=[('A', next(audience_days1), next(audience_hits1))
                          for i in range(60)] +
                    [('B', next(audience_days2), next(audience_hits2))
                     for i in range(60)],
                    pack=True),
                height='210px',
            )
        ],
    )

    bounce_days = generate_time_series(30)
    bounce_rates = generate_random_walk()
    q.page['bounce_rate'] = ui.tall_series_stat_card(
        box='top_right_top',
        title=next(sample_title),
        value=next(sample_amount),
        aux_value=next(sample_term),
        plot_type='area',
        plot_color='$red',
        plot_category='date',
        plot_value='bounce_rate',
        plot_zero_value=0,
        plot_data=data(
            fields=['date', 'bounce_rate'],
            rows=[(next(bounce_days), next(bounce_rates)) for i in range(30)],
            pack=True,
        ),
    )

    user_days = generate_time_series(30)
    user_counts = generate_random_walk()
    q.page['total_users'] = ui.tall_series_stat_card(
        box='top_right_top',
        title=next(sample_term),
        value=next(sample_dollars),
        aux_value=next(sample_term),
        plot_type='interval',
        plot_color='$tangerine',
        plot_category='date',
        plot_value='users',
        plot_zero_value=0,
        plot_data=data(
            fields=['date', 'users'],
            rows=[(next(user_days), next(user_counts)) for i in range(20)],
            pack=True,
        ),
    )

    session_days = generate_time_series(60)
    session_counts = generate_random_walk()
    q.page['all_sessions'] = ui.tall_series_stat_card(
        box='top_right_bottom',
        title=next(sample_title),
        value='18,976 Unique',
        aux_value=next(sample_caption),
        plot_type='interval',
        plot_color='$red',
        plot_category='date',
        plot_value='users',
        plot_zero_value=0,
        plot_data=data(
            fields=['date', 'users'],
            rows=[(next(session_days), next(session_counts))
                  for i in range(60)],
            pack=True,
        ),
    )

    q.page['page_views'] = ui.stat_list_card(
        box='middle',
        title=next(sample_title),
        subtitle=next(sample_caption),
        items=[
            ui.stat_list_item(label=next(sample_title),
                              caption=next(sample_caption),
                              value=next(sample_dollars),
                              aux_value=next(sample_term),
                              value_color=next(sample_color)) for i in range(5)
        ],
    )

    session_count = generate_random_walk(1000, 8000)
    session_source = generate_sequence(
        ['Search', 'Email', 'Referral', 'Social', 'Other'])

    q.page['dist_by_channel'] = ui.plot_card(
        box='middle',
        title=next(sample_title),
        data=data(
            fields=['site', 'channel', 'sessions'],
            rows=[('A', next(session_source), next(session_count))
                  for i in range(5)] +
            [('B', next(session_source), next(session_count))
             for i in range(5)],
            pack=True,
        ),
        plot=ui.plot([
            ui.mark(coord='theta',
                    type='interval',
                    x='=site',
                    y='=sessions',
                    color='=channel',
                    stack='auto',
                    y_min=0,
                    color_range='$amber $orange $tangerine $red $pink')
        ]))
    q.page['sessions_by_channel'] = ui.plot_card(
        box='middle',
        title=next(sample_title),
        data=data(
            fields=['channel', 'sessions'],
            rows=[(next(sample_term), next(session_count)) for i in range(10)],
            pack=True,
        ),
        plot=ui.plot([
            ui.mark(type='interval',
                    x='=sessions',
                    y='=channel',
                    y_min=0,
                    color='$red')
        ]))

    q.page['acquisitions'] = ui.form_card(
        box='bottom_left',
        title=next(sample_title),
        items=[
            ui.text(next(sample_caption)),
            ui.stats(items=[
                ui.stat(label=next(sample_term),
                        value=next(sample_percent),
                        icon=next(sample_icon),
                        icon_color=next(sample_color)),
                ui.stat(label=next(sample_term),
                        value=next(sample_percent),
                        icon=next(sample_icon),
                        icon_color=next(sample_color)),
            ]),
        ],
    )
    q.page['sessions'] = ui.form_card(
        box='bottom_left',
        title=next(sample_title),
        items=[
            ui.text(next(sample_caption)),
            ui.stats(items=[
                ui.stat(label=next(sample_term),
                        value=next(sample_percent),
                        icon=next(sample_icon),
                        icon_color=next(sample_color)),
                ui.stat(label=next(sample_term),
                        value=next(sample_percent),
                        icon=next(sample_icon),
                        icon_color=next(sample_color)),
            ]),
        ],
    )
    q.page['pages'] = ui.stat_table_card(
        box='bottom_right',
        title=next(sample_title),
        subtitle=next(sample_caption),
        columns=[
            next(sample_term),
            next(sample_term),
            next(sample_term),
            next(sample_term)
        ],
        items=[
            ui.stat_table_item(label=next(sample_term),
                               caption=next(sample_title),
                               values=[
                                   next(sample_dollars),
                                   next(sample_percent),
                                   next(sample_percent)
                               ],
                               icon=next(sample_icon),
                               icon_color=next(sample_color)) for i in range(5)
        ])

    q.page['footer'] = ui.footer_card(
        box='footer', caption='(c) 2021 H2O.ai. All rights reserved.')

    await q.page.save()
Example #5
0
async def show_mint_dashboard(q: Q):
    q.page['meta'] = ui.meta_card(
        box='',
        layouts=[
            ui.layout(breakpoint='xl',
                      width='1200px',
                      zones=[
                          ui.zone('header'),
                          ui.zone('main_section'),
                          ui.zone('overview',
                                  direction=ui.ZoneDirection.ROW,
                                  size='425px'),
                          ui.zone('tickers',
                                  direction=ui.ZoneDirection.ROW,
                                  size='175px'),
                          ui.zone('transactions_section'),
                          ui.zone('transactions',
                                  direction=ui.ZoneDirection.ROW,
                                  size='400px'),
                          ui.zone('footer'),
                      ])
        ])
    q.page['header'] = ui.header_card(box='header',
                                      title='H2O Wave Demo',
                                      subtitle='Mint Dashboard',
                                      nav=global_nav)
    q.page['main_section'] = ui.section_card(
        box='main_section',
        title=next(sample_title),
        subtitle=next(sample_caption),
        items=[
            ui.tabs(
                name='currency',
                value='option0',
                items=[
                    ui.tab(name=f'option{i}', label=next(sample_term))
                    for i in range(4)
                ],
            )
        ],
    )
    trend_date = generate_time_series(60)
    trend_price = generate_random_walk(2000, 8000, 0.2)
    q.page['trends'] = ui.form_card(
        box=ui.box('overview', order=1, size=4),
        title=next(sample_title),
        items=[
            ui.inline(inset=True,
                      items=[
                          ui.checkbox(name='sent',
                                      label=next(sample_term),
                                      value=True),
                          ui.checkbox(name='received',
                                      label=next(sample_term)),
                          ui.dropdown(name='distribution',
                                      label='',
                                      value='option0',
                                      choices=[
                                          ui.choice(name=f'option{i}',
                                                    label=next(sample_term))
                                          for i in range(5)
                                      ]),
                      ]),
            ui.visualization(
                plot=ui.plot([
                    ui.mark(type='line',
                            x_scale='time',
                            x='=date',
                            y='=price',
                            color='$mint',
                            curve=ui.MarkCurve.STEP),
                ]),
                data=data(fields=['date', 'price'],
                          rows=[(next(trend_date), next(trend_price))
                                for i in range(60)],
                          pack=True),
                height='215px',
            ),
            ui.stats(items=[
                ui.stat(label=next(sample_term), value=next(sample_percent)),
                ui.stat(label=next(sample_term), value=next(sample_dollars)),
                ui.stat(label=next(sample_term), value=next(sample_amount)),
                ui.stat(label=next(sample_term), value=next(sample_percent)),
                ui.stat(label=next(sample_term), value=next(sample_dollars)),
            ],
                     justify='between',
                     inset=True),
        ])

    stock_dates = generate_time_series(300)
    stock_prices = generate_random_walk()

    q.page['exchange_rate'] = ui.tall_series_stat_card(
        box=ui.box('overview', order=2),
        title=next(sample_title),
        value=next(sample_dollars),
        aux_value=next(sample_amount),
        plot_type=ui.TallSeriesStatCardPlotType.AREA,
        plot_color='$mint',
        plot_category='date',
        plot_value='price',
        plot_curve=ui.TallSeriesStatCardPlotCurve.STEP,
        plot_zero_value=0,
        plot_data=data(
            fields=['date', 'price'],
            rows=[(next(stock_dates), next(stock_prices)) for i in range(30)],
            pack=True,
        ),
    )

    q.page['symbol1'] = ui.tall_series_stat_card(
        box=ui.box('tickers', order=1),
        title=next(sample_title),
        value=next(sample_amount),
        aux_value=next(sample_percent),
        plot_type=ui.TallSeriesStatCardPlotType.AREA,
        plot_color='$mint',
        plot_category='date',
        plot_value='price',
        plot_curve=ui.TallSeriesStatCardPlotCurve.STEP,
        plot_zero_value=0,
        plot_data=data(
            fields=['date', 'price'],
            rows=[(next(stock_dates), next(stock_prices)) for i in range(30)],
            pack=True,
        ),
    )

    q.page['symbol2'] = ui.tall_series_stat_card(
        box=ui.box('tickers', order=2),
        title=next(sample_title),
        value=next(sample_percent),
        aux_value=next(sample_title),
        plot_type=ui.TallSeriesStatCardPlotType.AREA,
        plot_color='$green',
        plot_category='date',
        plot_value='price',
        plot_curve=ui.TallSeriesStatCardPlotCurve.STEP,
        plot_zero_value=0,
        plot_data=data(
            fields=['date', 'price'],
            rows=[(next(stock_dates), next(stock_prices)) for i in range(30)],
            pack=True,
        ),
    )

    q.page['symbol3'] = ui.tall_series_stat_card(
        box=ui.box('tickers', order=3),
        title=next(sample_title),
        value=next(sample_dollars),
        aux_value=next(sample_percent),
        plot_type=ui.TallSeriesStatCardPlotType.AREA,
        plot_color='$mint',
        plot_category='date',
        plot_value='price',
        plot_curve=ui.TallSeriesStatCardPlotCurve.STEP,
        plot_zero_value=0,
        plot_data=data(
            fields=['date', 'price'],
            rows=[(next(stock_dates), next(stock_prices)) for i in range(30)],
            pack=True,
        ),
    )

    q.page['transactions_section'] = ui.section_card(
        box='transactions_section',
        title=next(sample_title),
        subtitle=next(sample_caption),
        items=[
            ui.tabs(
                name='time_period',
                value='option0',
                items=[
                    ui.tab(name=f'option{i}', label=next(sample_term))
                    for i in range(6)
                ],
                link=True,
            ),
        ],
    )

    q.page['transactions'] = ui.stat_table_card(
        box=ui.box('transactions', order=1, size=2),
        title=next(sample_title),
        subtitle=next(sample_caption),
        columns=[next(sample_term) for i in range(4)],
        items=[
            ui.stat_table_item(label=next(sample_title),
                               caption=f'{random.randint(1, 5)} hours ago',
                               values=[
                                   next(sample_percent),
                                   next(sample_amount),
                                   next(sample_dollars)
                               ],
                               icon=next(sample_icon),
                               icon_color='$mint') for i in range(6)
        ])

    q.page['market'] = ui.stat_list_card(
        box=ui.box('transactions', order=2),
        title=next(sample_title),
        subtitle=next(sample_caption),
        items=[
            ui.stat_list_item(label=next(sample_term),
                              caption=next(sample_title),
                              value=next(sample_dollars),
                              aux_value=next(sample_percent),
                              value_color=next(sample_color)) for i in range(5)
        ],
    )
    q.page['footer'] = ui.footer_card(
        box='footer', caption='(c) 2021 H2O.ai. All rights reserved.')

    await q.page.save()