コード例 #1
0
async def serve(q: Q):
    if not q.client.initialized:
        q.page['example'] = ui.form_card(
            box='1 1 4 10',
            items=[
                ui.text_xl(content='First text'),
                ui.text_l(content='Second text'),
                ui.text_m(content='Third text'),
                ui.text_s(content='Fourth text'),
                ui.inline([
                    ui.button(name='left1', label='Left1'),
                    ui.button(name='left2', label='Left2'),
                    ui.button(name='left3', label='Left3'),
                ]),
                ui.buttons(justify='end',
                           items=[
                               ui.button(name='right1', label='Right1'),
                               ui.button(name='right2', label='Right2'),
                               ui.button(name='right3', label='Right3'),
                           ]),
                ui.buttons(items=[
                    ui.button(name='show', label='Show'),
                    ui.button(name='hide', label='Hide')
                ])
            ])
        q.client.initialized = True
    items = q.page['example'].items
    items_to_hide = [
        items[0].text_xl,
        items[2].text_m,
        items[4].inline.items[0].button,
        items[5].buttons.items[2].button,
    ]
    if q.args.hide:
        for i in items_to_hide:
            i.visible = False
    if q.args.show:
        for i in items_to_hide:
            i.visible = True
    await q.page.save()
コード例 #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()
コード例 #3
0
    'example',
    ui.profile_card(
        box='1 1 3 5',
        image=
        'https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',  # noqa
        persona=ui.persona(title='John Doe',
                           subtitle='Data Scientist',
                           image=image),
        items=[
            ui.inline(justify='center',
                      items=[
                          ui.mini_buttons([
                              ui.mini_button(name='upload',
                                             label='Upload',
                                             icon='Upload'),
                              ui.mini_button(name='share',
                                             label='Share',
                                             icon='Share'),
                              ui.mini_button(name='download',
                                             label='Download',
                                             icon='Download'),
                          ])
                      ]),
            ui.inline(justify='center',
                      items=[
                          ui.button(name='btn1', label='Button 1'),
                          ui.button(name='btn2', label='Button 2'),
                          ui.button(name='btn3', label='Button 3'),
                      ]),
        ]))

page.save()
コード例 #4
0
ファイル: nav.py プロジェクト: srisatish/wave
async def serve(q: Q):
    if '#' in q.args and not q.args.show_nav:
        hash_ = q.args['#']
        q.page.drop()
        q.page['redirect'] = ui.form_card(box='1 1 2 5',
                                          items=[
                                              ui.text(f'#={hash_}'),
                                              ui.button(name='show_nav',
                                                        label='Back',
                                                        primary=True),
                                          ])
    else:
        q.page['meta'] = ui.meta_card(box='', redirect='#')
        q.page['nav1'] = ui.nav_card(
            box='1 1 2 -1',
            value='#menu/spam',
            title='H2O Wave',
            subtitle='And now for something completely different!',
            image=
            'https://www.h2o.ai/wp-content/themes/h2o2018/templates/dist/images/h2o_logo.svg',
            items=[
                ui.nav_group('Menu',
                             items=[
                                 ui.nav_item(name='#menu/spam', label='Spam'),
                                 ui.nav_item(name='#menu/ham', label='Ham'),
                                 ui.nav_item(name='#menu/eggs', label='Eggs'),
                                 ui.nav_item(name='#menu/toast',
                                             label='Toast',
                                             disabled=True),
                             ]),
                ui.nav_group('Help',
                             items=[
                                 ui.nav_item(name='#about',
                                             label='About',
                                             icon='Info'),
                                 ui.nav_item(name='#support',
                                             label='Support',
                                             icon='Help'),
                             ])
            ],
            secondary_items=[
                ui.inline(items=[
                    ui.persona(title='John Doe',
                               subtitle='Software developer',
                               size='s',
                               image=persona),
                    ui.menu(items=[
                        ui.command(
                            name='profile', label='Profile', icon='Contact'),
                        ui.command(name='preferences',
                                   label='Preferences',
                                   icon='Settings'),
                        ui.command(
                            name='logout', label='Logout', icon='SignOut'),
                    ])
                ]),
            ],
        )
        q.page['nav2'] = ui.nav_card(
            box='3 1 2 -1',
            value='#menu/ham',
            persona=ui.persona(title='John Doe',
                               subtitle='Data Scientist',
                               caption='Online',
                               size='xl',
                               image=persona),
            items=[
                ui.nav_group('Menu',
                             items=[
                                 ui.nav_item(name='#menu/spam', label='Spam'),
                                 ui.nav_item(name='#menu/ham', label='Ham'),
                                 ui.nav_item(name='#menu/eggs', label='Eggs'),
                                 ui.nav_item(name='#menu/toast',
                                             label='Toast',
                                             disabled=True),
                             ]),
                ui.nav_group('Help',
                             items=[
                                 ui.nav_item(name='#about',
                                             label='About',
                                             icon='Info'),
                                 ui.nav_item(name='#support',
                                             label='Support',
                                             icon='Help'),
                             ])
            ],
            secondary_items=[
                ui.button(name='logout', label='Logout', width='100%')
            ],
            color='primary')
    await q.page.save()
コード例 #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()
コード例 #6
0
 ui.inline(justify='end',
           items=[
               ui.links(label='First Column',
                        width='200px',
                        items=[
                            ui.link(label='Sample link',
                                    path='https://www.h2o.ai/',
                                    target='_blank'),
                            ui.link(label='Sample link',
                                    path='https://www.h2o.ai/',
                                    target='_blank'),
                            ui.link(label='Sample link',
                                    path='https://www.h2o.ai/',
                                    target='_blank'),
                        ]),
               ui.links(label='Second Column',
                        width='200px',
                        items=[
                            ui.link(label='Sample link',
                                    path='https://www.h2o.ai/',
                                    target='_blank'),
                            ui.link(label='Sample link',
                                    path='https://www.h2o.ai/',
                                    target='_blank'),
                            ui.link(label='Sample link',
                                    path='https://www.h2o.ai/',
                                    target='_blank'),
                        ]),
               ui.links(label='Third Column',
                        width='200px',
                        items=[
                            ui.link(label='Sample link',
                                    path='https://www.h2o.ai/',
                                    target='_blank'),
                            ui.link(label='Sample link',
                                    path='https://www.h2o.ai/',
                                    target='_blank'),
                            ui.link(label='Sample link',
                                    path='https://www.h2o.ai/',
                                    target='_blank'),
                        ]),
           ]),
コード例 #7
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
コード例 #8
0
                                  icon='Mail'),
                       ui.command(name='calendar',
                                  label='Calendar Event',
                                  icon='Calendar'),
                   ]),
        ui.command(name='upload', label='Upload', icon='Upload'),
        ui.command(name='share', label='Share', icon='Share'),
        ui.command(name='download', label='Download', icon='Download'),
    ],
    items=[
        ui.inline(justify='end',
                  items=[
                      ui.mini_buttons([
                          ui.mini_button(name='like', label='4', icon='Heart'),
                          ui.mini_button(name='comment',
                                         label='2',
                                         icon='Comment'),
                          ui.mini_button(name='share', label='1',
                                         icon='Share'),
                      ]),
                  ]),
        ui.buttons(items=[
            ui.button(name='like', label='Like'),
            ui.button(name='comment', label='Comment'),
            ui.button(name='share', label='Share'),
        ]),
    ],
    caption='''
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia aliquam maxime quos facere
necessitatibus tempore eum odio, qui illum. Repellat modi dolor facilis odio ex possimus
''',
コード例 #9
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()