Пример #1
0
async def serve(q: Q):
    if q.args.show_inputs:
        q.page['example'].items = [
            ui.text(f'toggle_unchecked={q.args.toggle_unchecked}'),
            ui.text(f'toggle_checked={q.args.toggle_checked}'),
            ui.text(
                f'toggle_unchecked_disabled={q.args.toggle_unchecked_disabled}'
            ),
            ui.text(
                f'toggle_checked_disabled={q.args.toggle_checked_disabled}'),
            ui.button(name='show_form', label='Back', primary=True),
        ]
    else:
        q.page['example'] = ui.form_card(
            box='1 1 4 10',
            items=[
                ui.toggle(name='toggle_unchecked', label='Not checked'),
                ui.toggle(name='toggle_checked', label='Checked', value=True),
                ui.toggle(name='toggle_unchecked_disabled',
                          label='Not checked (Disabled)',
                          disabled=True),
                ui.toggle(name='toggle_checked_disabled',
                          label='Checked (Disabled)',
                          value=True,
                          disabled=True),
                ui.button(name='show_inputs', label='Submit', primary=True),
            ])
    await q.page.save()
Пример #2
0
async def serve(q: Q):
    if not q.client.initialized:
        q.page['meta'] = ui.meta_card(box='', theme='neon')
        q.page['controls'] = ui.form_card(box='1 1 2 8', items=[
            ui.text_xl('Form'),
            ui.textbox(name='textbox', label='Textbox'),
            ui.toggle(name='toggle', label='Toggle'),
            ui.choice_group(name='choice_group', label='Choice group', choices=[
                ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
            ]),
            ui.checklist(name='checklist', label='Checklist', choices=[
                ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
            ]),
            ui.dropdown(name='dropdown', label='Dropdown', choices=[
                ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
            ]),
            ui.slider(name='slider', label='Slider'),
            ui.button(name='toggle_theme', label='Toggle Theme', primary=True)
        ])
        q.client.theme = 'default'
        q.client.initialized = True

    meta = q.page['meta']

    if q.args.toggle_theme:
        meta.theme = q.client.theme = 'neon' if q.client.theme == 'default' else 'default'

    await q.page.save()
Пример #3
0
async def serve(q: Q):
    if not q.client.initialized:  # First visit
        q.client.initialized = True
        q.client.points = 25
        q.client.plotly_controls = False

        q.page['controls'] = ui.form_card(box='1 1 4 2',
                                          items=[
                                              ui.slider(name='points',
                                                        label='Points',
                                                        min=5,
                                                        max=50,
                                                        step=1,
                                                        value=q.client.points,
                                                        trigger=True),
                                              ui.toggle(
                                                  name='plotly_controls',
                                                  label='Plotly Controls',
                                                  trigger=True),
                                          ])
        q.page['plot'] = ui.frame_card(box='1 3 4 5', title='', content='')

    if q.args.points:
        q.client.points = q.args.points

    if q.args.plotly_controls is not None:
        q.client.plotly_controls = q.args.plotly_controls

    n = q.client.points

    # Create plot with plotly
    fig = go.Figure(data=go.Scatter(
        x=np.random.rand(n),
        y=np.random.rand(n),
        mode='markers',
        marker=dict(size=(8 * np.random.rand(n))**2, color=np.random.rand(n)),
        opacity=0.8,
    ))
    _ = fig.update_layout(
        margin=dict(l=10, r=10, t=10, b=10),
        paper_bgcolor='rgb(255, 255, 255)',
        plot_bgcolor='rgb(255, 255, 255)',
    )
    config = {
        'scrollZoom': q.client.plotly_controls,
        'showLink': q.client.plotly_controls,
        'displayModeBar': q.client.plotly_controls
    }
    html = pio.to_html(fig,
                       validate=False,
                       include_plotlyjs='cdn',
                       config=config)

    q.page['plot'].content = html

    # Save page
    await q.page.save()
Пример #4
0
def init(q: Q):
    q.client.primary_color = '$blue'
    q.client.secondary_color = '$cyan'
    q.client.tertiary_color = '$azure'
    q.page['meta'] = ui.meta_card(
        box='',
        title='Telco Churn Analytics',
        layouts=[
            ui.layout(breakpoint='xs',
                      zones=[
                          ui.zone('header'),
                          ui.zone('title'),
                          ui.zone('content',
                                  zones=[
                                      ui.zone('code'),
                                      ui.zone('top',
                                              direction=ui.ZoneDirection.ROW,
                                              zones=[
                                                  ui.zone('top-plot',
                                                          size='70%'),
                                                  ui.zone('top-stats')
                                              ]),
                                      ui.zone('middle',
                                              direction=ui.ZoneDirection.ROW),
                                  ])
                      ])
        ])
    q.page['header'] = ui.header_card(
        box='header',
        title='Telecom Churn Analytics',
        subtitle='EDA & Churn Modeling with AutoML & Wave',
        nav=[
            ui.nav_group('Main Menu',
                         items=[
                             ui.nav_item(name='analysis', label='Analysis'),
                             ui.nav_item(name='code',
                                         label='Application Code'),
                         ])
        ])
    q.page['title'] = ui.section_card(
        box='title',
        title='Customer profiles from model predictions',
        subtitle='Customer: No customer chosen',
        items=[
            # TODO: Replace with dropdown after https://github.com/h2oai/wave/pull/303 merged.
            ui.picker(name='customers',
                      label='Customer Phone Number',
                      choices=[
                          ui.choice(name=str(phone), label=str(phone))
                          for phone in df['Phone']
                      ],
                      max_choices=1,
                      trigger=True),
            ui.toggle(name='theme', label='Dark Theme', trigger=True)
        ])
Пример #5
0
def form_default(q: Q):
    # display when app is initialized
    return [
        ui.text(content=DATASET_TEXT),
        ui.dropdown(name='dai_instance_id', label='Select Driverless AI instance', value=q.client.dai_instance_id,
                    choices=q.client.choices_dai_instances, required=True),
        ui.text(content=STEAM_TEXT, visible=q.client.disable_training),
        ui.slider(name='dai_interpretability', label='Interpretability', min=1, max=10, step=1, value=7),
        ui.toggle(name='dai_reproducible', label='Reproducible', value=False),
        ui.buttons(items=[
            ui.button(name='train', label='Train', primary=True, disabled=q.client.disable_training),
            ui.button(name='predict', label='Predict', primary=True, disabled=True),
        ])
    ]
Пример #6
0
def form_training_completed(q: Q):
    # display when model training is completed
    return [
        ui.text(content=DATASET_TEXT),
        ui.dropdown(name='dai_instance_id', label='Select Driverless AI instance', value=q.client.dai_instance_id,
                    choices=q.client.choices_dai_instances, required=True),
        ui.slider(name='dai_interpretability', label='Interpretability', min=1, max=10, step=1,
                  value=q.client.dai_interpretability),
        ui.toggle(name='dai_reproducible', label='Reproducible', value=q.client.dai_reproducible),
        ui.buttons(items=[
            ui.button(name='train', label='Train', primary=True),
            ui.button(name='predict', label='Predict', primary=True)
        ]),
        ui.message_bar(type='success', text='Training successfully completed!'),
        ui.text(content=q.client.model_details)
    ]
Пример #7
0
def form_training_progress(q: Q):
    # display when model training is in progress
    return [
        ui.text(content=DATASET_TEXT),
        ui.dropdown(name='dai_instance_id', label='Select Driverless AI instance', value=q.client.dai_instance_id,
                    choices=q.client.choices_dai_instances, required=True),
        ui.slider(name='dai_interpretability', label='Interpretability', min=1, max=10, step=1,
                  value=q.client.dai_interpretability),
        ui.toggle(name='dai_reproducible', label='Reproducible', value=q.client.dai_reproducible),
        ui.buttons(items=[
            ui.button(name='train', label='Train', primary=True, disabled=True),
            ui.button(name='predict', label='Predict', primary=True, disabled=True)
        ]),
        ui.progress(label='Training in progress...', caption='This can take a few minutes...'),
        ui.text(content=q.client.model_details)
    ]
Пример #8
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()
Пример #9
0
async def serve(q: Q):
    q.page['example'] = ui.form_card(box='1 1 4 10', items=[
        ui.text_xl(content='Extra-large text, for headings.'),
        ui.text_l(content='Large text, for sub-headings.'),
        ui.text_m(content='Body text, for paragraphs and other content.'),
        ui.text_s(content='Small text, for small print.'),
        ui.text_xs(content='Extra-small text, for really small print.'),
        ui.separator(label='A separator sections forms'),
        ui.progress(label='A progress bar'),
        ui.progress(label='A progress bar'),
        ui.message_bar(type='success', text='Message bar'),
        ui.textbox(name='textbox', label='Textbox'),
        ui.label(label='Checkboxes'),
        ui.checkbox(name='checkbox1', label='A checkbox'),
        ui.checkbox(name='checkbox1', label='Another checkbox'),
        ui.checkbox(name='checkbox1', label='Yet another checkbox'),
        ui.toggle(name='toggle', label='Toggle'),
        ui.choice_group(name='choice_group', label='Choice group', choices=[
            ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
        ]),
        ui.checklist(name='checklist', label='Checklist', choices=[
            ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
        ]),
        ui.dropdown(name='dropdown', label='Dropdown', choices=[
            ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
        ]),
        ui.dropdown(name='dropdown', label='Multi-valued Dropdown', values=[], choices=[
            ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
        ]),
        ui.combobox(name='combobox', label='Combobox', choices=['Choice 1', 'Choice 2', 'Choice 3']),
        ui.slider(name='slider', label='Slider'),
        ui.range_slider(name='range_slider', label='Range slider', max=99),
        ui.spinbox(name='spinbox', label='Spinbox'),
        ui.date_picker(name='date_picker', label='Date picker'),
        ui.color_picker(name='color_picker', label='Color picker'),
        ui.buttons([
            ui.button(name='primary_button', label='Primary', primary=True),
            ui.button(name='standard_button', label='Standard'),
            ui.button(name='standard_disabled_button', label='Standard', disabled=True),
        ]),
        ui.file_upload(name='file_upload', label='File upload'),
        ui.table(name='table', columns=[
            ui.table_column(name='col1', label='Column 1'),
            ui.table_column(name='col2', label='Column 2'),
        ], rows=[
            ui.table_row(name='row1', cells=['Text A', 'Text B']),
            ui.table_row(name='row2', cells=['Text C', 'Text D']),
            ui.table_row(name='row3', cells=['Text E', 'Text F']),
        ]),
        ui.link(label='Link'),
        ui.tabs(name='tabs', items=[
            ui.tab(name='email', label='Mail', icon='Mail'),
            ui.tab(name='events', label='Events', icon='Calendar'),
            ui.tab(name='spam', label='Spam'),
        ]),
        ui.expander(name='expander', label='Expander'),
        ui.frame(path='https://example.com'),
        ui.markup(content=html),
        ui.template(
            content=menu,
            data=pack(dict(dishes=[
                dict(name='Spam', price='$2.00'),
                dict(name='Ham', price='$3.45'),
                dict(name='Eggs', price='$1.75'),
            ]))
        ),
        ui.picker(name='picker', label='Picker', choices=[
            ui.choice('choice1', label='Choice 1'),
            ui.choice('choice2', label='Choice 2'),
            ui.choice('choice3', label='Choice 3'),
        ]),
        ui.stepper(name='stepper', items=[
            ui.step(label='Step 1', icon='MailLowImportance'),
            ui.step(label='Step 2', icon='TaskManagerMirrored'),
            ui.step(label='Step 3', icon='Cafe'),
        ]),
        ui.visualization(
            plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),
            data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(n)]], pack=True),
        ),
        ui.vega_visualization(
            specification=spec,
            data=data(fields=["a", "b"], rows=[
                ["A", rnd()], ["B", rnd()], ["C", rnd()],
                ["D", rnd()], ["E", rnd()], ["F", rnd()],
                ["G", rnd()], ["H", rnd()], ["I", rnd()]
            ], pack=True),
        ),
        ui.button(name='show_inputs', label='Submit', primary=True),
    ])
    await q.page.save()
Пример #10
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()
Пример #11
0
async def serve(q: Q):
    if not q.client.initialized:
        q.page['meta'] = ui.meta_card(
            box='',
            layouts=[
                ui.layout(breakpoint='xs',
                          zones=[
                              ui.zone(name='title'),
                              ui.zone(name='plots',
                                      direction=ui.ZoneDirection.ROW,
                                      wrap='start',
                                      justify='center'),
                          ]),
                ui.layout(breakpoint='m',
                          zones=[
                              ui.zone(name='title'),
                              ui.zone(name='plots',
                                      direction=ui.ZoneDirection.ROW,
                                      wrap='start',
                                      justify='center'),
                          ]),
                ui.layout(breakpoint='xl',
                          zones=[
                              ui.zone(name='title'),
                              ui.zone(name='plots',
                                      direction=ui.ZoneDirection.ROW,
                                      wrap='start',
                                      justify='center'),
                          ]),
            ])

        q.client.active_theme = 'default'
        q.page['title'] = ui.section_card(
            box='title',
            title='Plot theme demo',
            subtitle='Toggle theme to see default plot colors change!',
            items=[
                ui.toggle(name='toggle_theme',
                          label='Dark theme',
                          trigger=True)
            ],
        )

        v = q.page.add(
            'point-sized',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Point, sized',
                         data=data('price performance discount', n),
                         plot=ui.plot([
                             ui.mark(type='point',
                                     x='=price',
                                     y='=performance',
                                     size='=discount')
                         ])))
        v.data = [(x, y, random.randint(1, 10))
                  for x, y in [f_scat.next() for _ in range(n)]]

        v = q.page.add(
            'point-shapes',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Point, shapes',
                         data=data('product price performance', n * 2),
                         plot=ui.plot([
                             ui.mark(type='point',
                                     x='=price',
                                     y='=performance',
                                     shape='=product',
                                     shape_range='circle square')
                         ])))
        v.data = [
            ('G1', x, y) for x, y in [f_scat.next() for _ in range(n)]
        ] + [('G2', x, y) for x, y in [f_scat.next() for _ in range(n)]]

        k1, k2 = 20, 10
        v = q.page.add(
            'poit-size',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Points, size-encoded',
                         data=data('country product profit', k1 * k2),
                         plot=ui.plot([
                             ui.mark(type='point',
                                     x='=country',
                                     y='=product',
                                     size='=profit',
                                     shape='circle')
                         ])))
        rows = []
        for i in range(k1):
            for j in range(k2):
                x = f.next()
                rows.append((f'A{i + 1}', f'B{j + 1}', x))
        v.data = rows

        v = q.page.add(
            'area',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Area',
                         data=data('date price', n),
                         plot=ui.plot([
                             ui.mark(type='area',
                                     x_scale='time',
                                     x='=date',
                                     y='=price',
                                     y_min=0)
                         ])))
        v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]

        v = q.page.add(
            'area-line',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Area + Line',
                         data=data('date price', n),
                         plot=ui.plot([
                             ui.mark(type='area',
                                     x_scale='time',
                                     x='=date',
                                     y='=price',
                                     y_min=0),
                             ui.mark(type='line', x='=date', y='=price')
                         ])))
        v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]

        v = q.page.add(
            'area-line-smooth',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Area + Line, smooth',
                         data=data('date price', n),
                         plot=ui.plot([
                             ui.mark(type='area',
                                     x_scale='time',
                                     x='=date',
                                     y='=price',
                                     curve='smooth',
                                     y_min=0),
                             ui.mark(type='line',
                                     x='=date',
                                     y='=price',
                                     curve='smooth')
                         ])))
        v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]

        v = q.page.add(
            'area-line-groups',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Area + Line, groups',
                         data=data('product date price', n * 5),
                         plot=ui.plot([
                             ui.mark(type='area',
                                     x_scale='time',
                                     x='=date',
                                     y='=price',
                                     color='=product',
                                     y_min=0),
                             ui.mark(type='line',
                                     x='=date',
                                     y='=price',
                                     color='=product')
                         ])))
        v.data = [(g, t, x) for x in [f_multi.next() for _ in range(n)]
                  for g, t, x, dx in x]

        v = q.page.add(
            'area-groups',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Area, groups',
                         data=data('product date price', n * 5),
                         plot=ui.plot([
                             ui.mark(type='area',
                                     x_scale='time',
                                     x='=date',
                                     y='=price',
                                     color='=product',
                                     y_min=0)
                         ])))
        v.data = [(g, t, x) for x in [f_multi.next() for _ in range(n)]
                  for g, t, x, dx in x]

        v = q.page.add(
            'area-stacked',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Area, stacked',
                         data=data('product date price', n * 5),
                         plot=ui.plot([
                             ui.mark(type='area',
                                     x_scale='time',
                                     x='=date',
                                     y='=price',
                                     color='=product',
                                     stack='auto',
                                     y_min=0)
                         ])))
        v.data = [(g, t, x) for x in [f_multi.next() for _ in range(n)]
                  for g, t, x, dx in x]

        f_negative = FakeTimeSeries(min=-50, max=50, start=0)
        v = q.page.add(
            'area-negative-values',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Area, negative values',
                         data=data('date price', n),
                         plot=ui.plot([
                             ui.mark(type='area',
                                     x_scale='time',
                                     x='=date',
                                     y='=price')
                         ])))
        v.data = [(t, x) for t, x, dx in [f_negative.next() for _ in range(n)]]

        v = q.page.add(
            'area-range',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Area, range',
                         data=data('date low high', n),
                         plot=ui.plot([
                             ui.mark(type='area',
                                     x_scale='time',
                                     x='=date',
                                     y0='=low',
                                     y='=high')
                         ])))
        v.data = [(t, x - random.randint(3, 8), x + random.randint(3, 8))
                  for t, x, dx in [f.next() for _ in range(n)]]

        v = q.page.add(
            'area-smooth',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Area, smooth',
                         data=data('date price', n),
                         plot=ui.plot([
                             ui.mark(type='area',
                                     x_scale='time',
                                     x='=date',
                                     y='=price',
                                     curve='smooth',
                                     y_min=0)
                         ])))
        v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]

        v = q.page.add(
            'example',
            ui.plot_card(
                box=ui.boxes(
                    ui.box('plots', width='100%'),
                    ui.box('plots', width='48%'),
                    ui.box('plots', width='32%'),
                ),
                title='Label Customization',
                data=data('product price', n),
                plot=ui.plot([
                    ui.mark(
                        type='interval',
                        x='=product',
                        y=
                        '=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',
                        y_min=0,
                        label=
                        '=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',
                        label_offset=0,
                        label_position='middle',
                        label_rotation='-90',
                        label_fill_color='#fff',
                        label_font_weight='bold')
                ])))
        v.data = [(c, x) for c, x, dx in [f_cat.next() for _ in range(n)]]

        v = q.page.add(
            'interval',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Interval',
                         data=data('product price', n),
                         plot=ui.plot([
                             ui.mark(type='interval',
                                     x='=product',
                                     y='=price',
                                     y_min=0)
                         ])))
        v.data = [(c, x) for c, x, dx in [f_cat.next() for _ in range(n)]]

        v = q.page.add(
            'interval-annotation',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Categorical-Numeric',
                         data=data('product price', n),
                         plot=ui.plot([
                             ui.mark(type='interval',
                                     x='=product',
                                     y='=price',
                                     y_min=0,
                                     y_max=100),
                             ui.mark(x='C20', y=80, label='point'),
                             ui.mark(x='C23', label='vertical line'),
                             ui.mark(y=40, label='horizontal line'),
                             ui.mark(x='C26',
                                     x0='C23',
                                     label='vertical region'),
                             ui.mark(y=70, y0=60, label='horizontal region')
                         ])))
        v.data = [(c, x) for c, x, dx in [f_cat.next() for _ in range(n)]]

        v = q.page.add(
            'histogram',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Histogram',
                         data=data('lo hi price', n),
                         plot=ui.plot([
                             ui.mark(type='interval',
                                     y='=price',
                                     x1='=lo',
                                     x2='=hi',
                                     y_min=0)
                         ])))
        v.data = [(i * 10, i * 10 + 10, x)
                  for i, (c, x,
                          dx) in enumerate([f_cat.next() for _ in range(n)])]

        v = q.page.add(
            'interval-range',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Histogram',
                         data=data('lo hi price', n),
                         plot=ui.plot([
                             ui.mark(type='interval',
                                     y='=price',
                                     x1='=lo',
                                     x2='=hi',
                                     y_min=0)
                         ])))
        v.data = [(i * 10, i * 10 + 10, x)
                  for i, (c, x,
                          dx) in enumerate([f_cat.next() for _ in range(n)])]

        v = q.page.add(
            'interval-range',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='35%'),
            ),
                         title='Interval, range',
                         data=data('product low high', 3),
                         plot=ui.plot([
                             ui.mark(type='interval',
                                     x='=product',
                                     y0='=low',
                                     y='=high')
                         ])))
        v.data = [(c, x - random.randint(3, 10), x + random.randint(3, 10))
                  for c, x, _ in [f.next() for _ in range(3)]]

        v = q.page.add(
            'interval-transpose',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='29%'),
            ),
                         title='Categorical-Numeric',
                         data=data('product price', 20),
                         plot=ui.plot([
                             ui.mark(type='interval',
                                     y='=product',
                                     x='=price',
                                     x_min=0,
                                     x_max=100),
                         ])))
        v.data = [(c, x) for c, x, dx in [f_cat.next() for _ in range(20)]]

        v = q.page.add(
            'intervals-theta-stacked',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Intervals, theta, stacked',
                         data=data('country product price', n * k),
                         plot=ui.plot([
                             ui.mark(coord='theta',
                                     type='interval',
                                     x='=product',
                                     y='=price',
                                     color='=country',
                                     stack='auto',
                                     y_min=0)
                         ])))
        v.data = [(g, t, x) for x in [f_cat_multi.next() for _ in range(n)]
                  for g, t, x, dx in x]

        v = q.page.add(
            'interval-helix',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Interval, helix',
                         data=data('product price', 60),
                         plot=ui.plot([
                             ui.mark(coord='helix',
                                     type='interval',
                                     x='=product',
                                     y='=price',
                                     y_min=0)
                         ])))
        v.data = [(c, x) for c, x, dx in [f_cat.next() for _ in range(60)]]

        v = q.page.add(
            'interval-polar',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Interval, polar',
                         data=data('product price', n),
                         plot=ui.plot([
                             ui.mark(coord='polar',
                                     type='interval',
                                     x='=product',
                                     y='=price',
                                     y_min=0)
                         ])))
        v.data = [(c, x) for c, x, dx in [f_cat.next() for _ in range(n)]]

        v = q.page.add(
            'intervals-groups',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Intervals, groups',
                         data=data('country product price', n * k),
                         plot=ui.plot([
                             ui.mark(type='interval',
                                     x='=product',
                                     y='=price',
                                     color='=country',
                                     dodge='auto',
                                     y_min=0)
                         ])))
        v.data = [(g, t, x) for x in [f_cat_multi.next() for _ in range(n)]
                  for g, t, x, dx in x]

        v = q.page.add(
            'intervals-stacked',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Intervals, stacked',
                         data=data('country product price', n * k),
                         plot=ui.plot([
                             ui.mark(type='interval',
                                     x='=product',
                                     y='=price',
                                     color='=country',
                                     stack='auto',
                                     y_min=0)
                         ])))
        v.data = [(g, t, x) for x in [f_cat_multi.next() for _ in range(n)]
                  for g, t, x, dx in x]

        v = q.page.add(
            'point-annotation',
            ui.plot_card(
                box=ui.boxes(
                    ui.box('plots', width='100%'),
                    ui.box('plots', width='48%'),
                    ui.box('plots', width='32%'),
                ),
                title='Numeric-Numeric',
                data=data('price performance', n),
                plot=ui.plot([
                    ui.mark(type='point',
                            x='=price',
                            y='=performance',
                            x_min=0,
                            x_max=100,
                            y_min=0,
                            y_max=100),  # the plot
                    ui.mark(x=50, y=50,
                            label='point'),  # A single reference point
                    ui.mark(x=40, label='vertical line'),
                    ui.mark(y=40, label='horizontal line'),
                    ui.mark(x=70, x0=60, label='vertical region'),
                    ui.mark(y=70, y0=60, label='horizontal region'),
                    ui.mark(x=30,
                            x0=20,
                            y=30,
                            y0=20,
                            label='rectangular region')
                ])))
        v.data = [f_scat.next() for _ in range(n)]

        v = q.page.add(
            'path',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Path',
                         data=data('profit sales', n),
                         plot=ui.plot(
                             [ui.mark(type='path', x='=profit', y='=sales')])))
        v.data = [(x, y) for x, y in [f_scat.next() for _ in range(n)]]

        v = q.page.add(
            'step',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Line, step',
                         data=data('date price', n),
                         plot=ui.plot([
                             ui.mark(type='line',
                                     x_scale='time',
                                     x='=date',
                                     y='=price',
                                     curve='step',
                                     y_min=0)
                         ])))
        v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]

        v = q.page.add(
            'line-annotation',
            ui.plot_card(box=ui.boxes(
                ui.box('plots', width='100%'),
                ui.box('plots', width='48%'),
                ui.box('plots', width='32%'),
            ),
                         title='Time-Numeric',
                         data=data('date price', n),
                         plot=ui.plot([
                             ui.mark(type='line',
                                     x_scale='time',
                                     x='=date',
                                     y='=price',
                                     y_min=0,
                                     y_max=100),
                             ui.mark(x=50, y=50, label='point'),
                             ui.mark(x='2010-05-15T19:59:21.000000Z',
                                     label='vertical line'),
                             ui.mark(y=40, label='horizontal line'),
                             ui.mark(x='2010-05-24T19:59:21.000000Z',
                                     x0='2010-05-20T19:59:21.000000Z',
                                     label='vertical region'),
                             ui.mark(y=70, y0=60, label='horizontal region'),
                             ui.mark(x='2010-05-10T19:59:21.000000Z',
                                     x0='2010-05-05T19:59:21.000000Z',
                                     y=30,
                                     y0=20,
                                     label='rectangular region')
                         ])))
        v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]

        q.client.initialized = True

    if q.args.toggle_theme is not None:
        q.client.active_theme = 'neon' if q.args.toggle_theme else 'default'
        q.page['meta'].theme = q.client.active_theme
        q.page['title'].items[0].toggle.value = q.client.active_theme == 'neon'
    await q.page.save()
Пример #12
0
async def serve(q: Q):
    if q.args.train:
        # train WaveML Model using H2O-3 AutoML
        copy_expando(q.args, q.client)
        exclude_algos = [] if q.client.include_dl else ['DeepLearning']
        q.client.wave_model = build_model(
            train_df=q.client.train_df,
            target_column='target',
            model_type=ModelType.H2O3,
            _h2o3_max_runtime_secs=q.client.max_runtime_secs,
            _h2o3_nfolds=2,
            _h2o3_exclude_algos=exclude_algos)
        model_id = q.client.wave_model.model.model_id
        accuracy = round(
            100 - q.client.wave_model.model.mean_per_class_error() * 100, 2)

        # show training details and prediction option
        q.page['example'].items[1].spinbox.value = q.client.max_runtime_secs
        q.page['example'].items[2].toggle.value = q.client.include_dl
        q.page['example'].items[3].buttons.items[1].button.disabled = False
        q.page['example'].items[4].message_bar.type = 'success'
        q.page['example'].items[
            4].message_bar.text = 'Training successfully completed!'
        q.page['example'].items[
            5].text.content = f'''**H2O AutoML model id:** {model_id} <br />
            **Accuracy:** {accuracy}%'''
        q.page['example'].items[6].text.content = ''
    elif q.args.predict:
        # predict on test data
        preds = q.client.wave_model.predict(test_df=q.client.test_df)

        # show predictions
        q.page['example'].items[
            4].message_bar.text = 'Prediction successfully completed!'
        q.page['example'].items[
            6].text.content = f'''**Example predictions:** <br />
            {preds[0]} <br /> {preds[1]} <br /> {preds[2]}'''
    else:
        # prepare sample train and test dataframes
        data = load_wine(as_frame=True)['frame']
        q.client.train_df, q.client.test_df = train_test_split(data,
                                                               train_size=0.8)

        # display ui
        q.page['example'] = ui.form_card(
            box='1 1 -1 -1',
            items=[
                ui.text(content='''The sample dataset used is the
                    <a href="https://scikit-learn.org/stable/modules/generated/sklearn.datasets.load_wine.html" target="_blank">wine dataset</a>.'''
                        ),
                ui.spinbox(name='max_runtime_secs',
                           label='Max Runtime (Secs)',
                           min=5,
                           max=30,
                           step=1,
                           value=10),
                ui.toggle(name='include_dl',
                          label='Include Deep Learning',
                          value=False),
                ui.buttons(items=[
                    ui.button(name='train', label='Train', primary=True),
                    ui.button(name='predict',
                              label='Predict',
                              primary=True,
                              disabled=True),
                ]),
                ui.message_bar(type='warning',
                               text='Training will take a few seconds'),
                ui.text(content=''),
                ui.text(content='')
            ])

    await q.page.save()
Пример #13
0
    async def render(self, q: Q):
        """
        Render card in Wave.

        Args:
            q: Wave server
        """
        card = ui.form_card(box=self.box,
                            items=[
                                ui.toggle(name='split_sentences',
                                          label='Split Sentences',
                                          value=self.split_sentences,
                                          trigger=True),
                                ui.toggle(name='fine_grained',
                                          label='Fine Grained',
                                          value=self.fine_grained,
                                          trigger=True),
                                ui.toggle(name='add_lemma',
                                          label='Add Lemma',
                                          value=self.add_lemma,
                                          trigger=True),
                                ui.toggle(name='collapse_punct',
                                          label='Merge Punctuation',
                                          value=self.collapse_punct,
                                          trigger=True),
                                ui.toggle(name='collapse_phrases',
                                          label='Merge Phrases',
                                          value=self.collapse_phrases,
                                          trigger=True),
                                ui.toggle(name='compact',
                                          label='Make Compact',
                                          value=self.compact,
                                          trigger=True),
                                ui.inline(items=[
                                    ui.textbox(name='color',
                                               label='Visualizer Color',
                                               value=self.color,
                                               trigger=True),
                                    ui.textbox(name='bg',
                                               label='Background Color',
                                               value=self.bg,
                                               trigger=True)
                                ]),
                                ui.inline(items=[
                                    ui.textbox(name='font',
                                               label='Font',
                                               value=self.font,
                                               trigger=True),
                                    ui.textbox(name='offset_x',
                                               label='Offset-X',
                                               value=str(self.offset_x),
                                               trigger=True)
                                ]),
                                ui.inline(items=[
                                    ui.textbox(name='arrow_stroke',
                                               label='Arrow Stroke',
                                               value=str(self.arrow_stroke),
                                               suffix='px',
                                               trigger=True),
                                    ui.textbox(name='arrow_width',
                                               label='Arrow Width',
                                               value=str(self.arrow_width),
                                               suffix='px',
                                               trigger=True),
                                    ui.textbox(name='arrow_spacing',
                                               label='Arrow Spacing',
                                               value=str(self.arrow_spacing),
                                               suffix='px',
                                               trigger=True)
                                ]),
                                ui.inline(items=[
                                    ui.textbox(name='word_spacing',
                                               label='Word Spacing',
                                               value=str(self.word_spacing),
                                               suffix='px',
                                               trigger=True),
                                    ui.textbox(name='word_distance',
                                               label='Word Distance',
                                               value=str(self.word_distance),
                                               suffix='px',
                                               trigger=True)
                                ])
                            ],
                            title=self.title,
                            commands=self.commands)

        q.page[self.name] = card
Пример #14
0
async def run_app(q: Q):
    if q.args.start_game:
        if q.args.submit_game:
            q.client.game.is_public = True
            q.app.games[q.client.game.game_id] = q.client.game
        del q.page['leaderboard']
        del q.page['hello']
        await start_new_game(q)
    elif q.args.quit_game:
        del q.page['starting_game']
        await make_welcome_card(q)
    elif q.args.guess:
        message = q.client.game.guess(q.args.guess)
        if message == 'You Got It!':
            q.page['starting_game'].items = [
                ui.text_l(
                    f'­ЪЈЁ ­ЪјЅ ­Ъјѓ You Got It, The number is **{q.client.game.number}**'
                ),
                ui.text_m(
                    f'You made **{len(q.client.game.guesses)}** guesses in'),
                ui.text_m(f'{q.client.game.game_time()}.'),
                ui.toggle(
                    name='submit_game',
                    label='Submit your game to Public Scoreboard',
                    trigger=False,
                ),
                ui.text_xs('Рађ'),
                ui.buttons(
                    items=[
                        ui.button(
                            name='leaderboard',
                            label='View Scores',
                            primary=True,
                        ),
                        ui.button(
                            name='start_game',
                            label='Play Again',
                            primary=False,
                        ),
                    ],
                    justify='center',
                ),
            ]
        else:
            previous_guesses = [str(x) for x in q.client.game.guesses]
            if len(previous_guesses) > 16:
                previous_guesses = previous_guesses[-16:]
                previous_guesses[0] = '...'
            guesses_str = ", ".join(previous_guesses)
            q.page['starting_game'].items = [
                ui.text_l(message),
                ui.text_m(guesses_str),
                ui.text_xs('Рађ'),
                ui.slider(
                    name='guess',
                    label='your guess',
                    min=1,
                    max=100,
                    value=q.args.guess,
                    trigger=True,
                ),
                ui.text_xs('Рађ'),
                ui.buttons(
                    items=[
                        ui.button(name='quit_game', label='Quit', primary=True)
                    ],
                    justify='center',
                ),
            ]
    elif q.args.leaderboard:
        if q.args.submit_game:
            q.client.game.is_public = True
            q.app.games[q.client.game.game_id] = q.client.game
        del q.page['starting_game']
        await show_leaderboard(q)
    elif q.args.private_leaderboard:
        await show_private_leaderboard(q)

    await q.page.save()
Пример #15
0
async def serve(q: Q):
    if not q.client.initialized:
        image = 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&h=750&w=1260'
        f = FakeCategoricalSeries()
        q.client.primary = '#000000'
        q.client.page = '#e2e2e2'
        q.client.card = '#ffffff'
        q.client.text = '#000000'
        q.page['meta'] = ui.meta_card(
            box='',
            theme='custom',
            layouts=[
                ui.layout(breakpoint='xs',
                          zones=[
                              ui.zone('header'),
                              ui.zone('content',
                                      direction=ui.ZoneDirection.ROW,
                                      zones=[
                                          ui.zone('colors', size='340px'),
                                          ui.zone('preview')
                                      ]),
                              ui.zone('footer')
                          ])
            ])
        q.page['header'] = ui.header_card(box='header',
                                          title='Theme generator',
                                          subtitle='Color your app easily',
                                          icon='Color',
                                          icon_color='$card')
        q.page['form'] = ui.form_card(box='colors',
                                      items=[
                                          ui.color_picker(
                                              name='primary',
                                              label='Primary',
                                              trigger=True,
                                              alpha=False,
                                              inline=True,
                                              value=q.client.primary),
                                          ui.color_picker(name='text',
                                                          label='Text',
                                                          trigger=True,
                                                          alpha=False,
                                                          inline=True,
                                                          value=q.client.text),
                                          ui.color_picker(name='card',
                                                          label='Card',
                                                          trigger=True,
                                                          alpha=False,
                                                          inline=True,
                                                          value=q.client.card),
                                          ui.color_picker(name='page',
                                                          label='Page',
                                                          trigger=True,
                                                          alpha=False,
                                                          inline=True,
                                                          value=q.client.page),
                                          ui.text_xl('Check contrast'),
                                          get_contrast('text', 'card', q),
                                          get_contrast('card', 'primary', q),
                                          get_contrast('text', 'page', q),
                                          get_contrast('page', 'primary', q),
                                          ui.text_xl('Copy code'),
                                          ui.frame(content=get_theme_code(q),
                                                   height='180px'),
                                      ])
        q.page['sample'] = ui.form_card(
            box='preview',
            items=[
                ui.text_xl(content='Sample App to show colors'),
                ui.progress(label='A progress bar'),
                ui.inline([
                    ui.checkbox(name='checkbox1',
                                label='A checkbox',
                                value=True),
                    ui.checkbox(name='checkbox2', label='Another checkbox'),
                    ui.checkbox(name='checkbox3',
                                label='Yet another checkbox'),
                    ui.toggle(name='toggle', label='Toggle', value=True),
                ]),
                ui.inline([
                    ui.date_picker(name='date_picker', label='Date picker'),
                    ui.picker(name='picker',
                              label='Picker',
                              choices=[
                                  ui.choice('choice1', label='Choice 1'),
                                  ui.choice('choice2', label='Choice 2'),
                                  ui.choice('choice3', label='Choice 3'),
                              ]),
                    ui.combobox(name='combobox',
                                label='Combobox',
                                choices=['Choice 1', 'Choice 2', 'Choice 3']),
                    ui.persona(title='John Doe',
                               subtitle='Data Scientist',
                               size='s',
                               image=image),
                ]),
                ui.slider(name='slider', label='Slider', value=70),
                ui.link(label='Link'),
                ui.inline(justify='between',
                          items=[
                              ui.stepper(name='stepper',
                                         width='500px',
                                         items=[
                                             ui.step(label='Step 1',
                                                     icon='MailLowImportance'),
                                             ui.step(
                                                 label='Step 2',
                                                 icon='TaskManagerMirrored'),
                                             ui.step(label='Step 3',
                                                     icon='Cafe'),
                                         ]),
                              ui.tabs(name='menu',
                                      value='email',
                                      items=[
                                          ui.tab(name='email',
                                                 label='Mail',
                                                 icon='Mail'),
                                          ui.tab(name='events',
                                                 label='Events',
                                                 icon='Calendar'),
                                          ui.tab(name='spam', label='Spam'),
                                      ]),
                          ]),
                ui.inline(items=[
                    ui.table(
                        name='table',
                        width='50%',
                        columns=[
                            ui.table_column(
                                name='name', label='Name', min_width='80px'),
                            ui.table_column(name='surname',
                                            label='Surname',
                                            filterable=True),
                            ui.table_column(name='age',
                                            label='Age',
                                            sortable=True),
                            ui.table_column(
                                name='progress',
                                label='Progress',
                                cell_type=ui.progress_table_cell_type(
                                    color='$themePrimary')),
                        ],
                        rows=[
                            ui.table_row(name='row1',
                                         cells=['John', 'Doe', '25', '0.90']),
                            ui.table_row(name='row2',
                                         cells=['Ann', 'Doe', '35', '0.75']),
                            ui.table_row(
                                name='row3',
                                cells=['Casey', 'Smith', '40', '0.33']),
                        ],
                        height='330px',
                    ),
                    ui.visualization(
                        width='50%',
                        plot=ui.plot([
                            ui.mark(type='interval',
                                    x='=product',
                                    y='=price',
                                    y_min=0)
                        ]),
                        data=data(fields='product price',
                                  rows=[(c, x) for c, x, _ in
                                        [f.next() for _ in range(20)]],
                                  pack=True),
                    ),
                ]),
                ui.buttons([
                    ui.button(name='primary_button',
                              label='Primary',
                              primary=True),
                    ui.button(name='standard_button', label='Standard'),
                    ui.button(name='standard_disabled_button',
                              label='Disabled',
                              disabled=True),
                    ui.button(name='icon_button',
                              icon='Heart',
                              caption='Tooltip text'),
                ]),
            ])
        q.page['footer'] = ui.footer_card(
            box='footer', caption='(c) 2021 H2O.ai. All rights reserved.')
        q.client.themes = [
            ui.theme(name='custom',
                     text=q.client.text,
                     card=q.client.card,
                     page=q.client.page,
                     primary=q.client.primary)
        ]
        q.client.initialized = True

    if q.args.primary:
        q.client.themes[0].primary = q.args.primary
        q.client.primary = q.args.primary
    if q.args.text:
        q.client.themes[0].text = q.args.text
        q.client.text = q.args.text
    if q.args.card:
        q.client.themes[0].card = q.args.card
        q.client.card = q.args.card
    if q.args.page:
        q.client.themes[0].page = q.args.page
        q.client.page = q.args.page

    q.page['meta'].themes = q.client.themes
    q.page['form'].items[5] = get_contrast('text', 'card', q)
    q.page['form'].items[6] = get_contrast('card', 'primary', q)
    q.page['form'].items[7] = get_contrast('text', 'page', q)
    q.page['form'].items[8] = get_contrast('page', 'primary', q)
    q.page['form'].items[10].frame.content = get_theme_code(q)
    await q.page.save()