def get_sentence_similarity_visualization(self): """ Get similarity visualization at sentence level. Returns: ui.visualization: Similarity visualization plot """ rows = [] for sent_1 in self.doc_1.sents: for sent_2 in self.doc_2.sents: rows.append((str(sent_1), str(sent_2), round(float(sent_1.similarity(sent_2)), 2))) return ui.visualization( plot=ui.plot([ui.mark( type='point', x='=sent_1', y='=sent_2', size='=similarity', shape='circle', fill_color=self.color )]), data=data( fields=['sent_1', 'sent_2', 'similarity'], rows=rows, pack=True ) )
def missing_value_plots(q: Q): plot1 = ui.visualization( ui.plot(marks=[ ui.mark(type='point', x=f'=col1', y=f'=col1', color='red', shape='circle', size=10) ]), data(fields=['col1'], rows=[[1], [2], [3]], pack=True), height='20%', width='90%', ) # This works plot2 = ui.visualization( ui.plot(marks=[ ui.mark(type='point', x=f'=col1', y=f'=col1', color='red', shape='circle', size=10) ]), data(fields=['col1'], rows=[[None], [2], [3]], pack=True), height='20%', width='90%', ) # This fails # plot3 = ui.visualization( # ui.plot(marks=[ui.mark(type='point', x=f'=col1', y=f'=col1', color='red', shape='circle', size=10)]), # data(fields=['col1'], rows=[[np.nan], [2], [3]], pack=True), # height='20%', width='90%', # ) q.page['plots'] = ui.form_card(box='1 1 5 -1', items=[plot1, plot2])
def make_ui_plot(file_path: str): """Creates a scatter plot from two random columns in the csv file""" df = pd.read_csv(file_path) col1 = df.columns.tolist()[np.random.randint(0, df.shape[1])] col2 = df.columns.tolist()[np.random.randint(0, df.shape[1])] df = df.where(pd.notnull(df), None) plot = ui.visualization( ui.plot(marks=[ui.mark(type='point', x=f'={col1}', y=f'={col2}', x_title=col1, y_title=col2)]), data(fields=df.columns.tolist(), rows=df.values.tolist(), pack=True), ) return plot
def plotting_data(q: Q): n = 100 df = pd.DataFrame({ 'length': np.random.rand(n), 'width': np.random.rand(n), 'data_type': np.random.choice(a=['Train', 'Test'], size=n, p=[0.8, 0.2]) }) plot_marks = [ ui.mark(type='point', x='=length', x_title='Length (cm)', y='=width', y_title='Width (cm)', color='=data_type', shape='circle') ] q.page['scatter_plot_card'] = ui.plot_card( box='1 1 4 4', title='Scatter Plot from Dataframe', data=data( fields=df.columns.tolist(), rows=df.values.tolist(), pack=True # Not required ), plot=ui.plot(marks=plot_marks)) q.page['scatter_viz_form_card'] = ui.form_card( box='1 5 4 4', items=[ ui.visualization( plot=ui.plot(marks=plot_marks), data=data( fields=df.columns.tolist(), rows=df.values.tolist(), pack=True # required ), ) ])
async def show_orange_dashboard(q: Q): q.page['meta'] = ui.meta_card( box='', layouts=[ ui.layout(breakpoint='xl', width='1200px', zones=[ ui.zone('header'), ui.zone('control'), ui.zone('top', direction=ui.ZoneDirection.ROW, size='385px', zones=[ ui.zone('top_left', direction=ui.ZoneDirection.ROW, size='66%'), ui.zone('top_right'), ]), ui.zone('middle', direction=ui.ZoneDirection.ROW, size='400px'), ui.zone('bottom', direction=ui.ZoneDirection.ROW, size='200px'), ui.zone('footer'), ]) ]) q.page['header'] = ui.header_card(box='header', title='H2O Wave Demo', subtitle='Orange Dashboard', nav=global_nav) q.page['section'] = ui.section_card( box='control', title=next(sample_title), subtitle=next(sample_caption), items=[ ui.checkbox(name='search', label=next(sample_title), 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.dropdown(name='source', label='', value='option0', choices=[ ui.choice(name=f'option{i}', label=next(sample_term)) for i in range(5) ]), ui.dropdown(name='range', label='', value='option0', choices=[ ui.choice(name=f'option{i}', label=next(sample_term)) for i in range(5) ]), ], ) user_days = generate_time_series(30) user_counts = generate_random_walk() q.page['unique_impressions'] = ui.tall_series_stat_card( box='top_left', title=next(sample_title), value=next(sample_amount), aux_value=next(sample_percent), plot_type='interval', plot_color='$orange', plot_category='date', plot_value='users', plot_zero_value=0, plot_data=data( fields=['date', 'users'], rows=[(next(user_days), next(user_counts)) for i in range(60)], pack=True, ), ) q.page['unique_clicks'] = ui.tall_series_stat_card( box='top_left', title=next(sample_title), value=next(sample_dollars), aux_value=next(sample_title), plot_type='interval', plot_color='$amber', plot_category='date', plot_value='users', plot_zero_value=0, plot_data=data( fields=['date', 'users'], rows=[(next(user_days), next(user_counts)) for i in range(60)], pack=True, ), ) q.page['popularity'] = ui.wide_series_stat_card( box='top_right', title=next(sample_term), value=next(sample_percent), aux_value=next(sample_amount), plot_type='area', plot_color='$tangerine', plot_category='date', plot_value='users', plot_zero_value=0, plot_data=data( fields=['date', 'users'], rows=[(next(user_days), next(user_counts)) for i in range(60)], pack=True, ), ) q.page['search_traffic'] = ui.wide_series_stat_card( box='top_right', title=next(sample_term), value=next(sample_percent), aux_value=next(sample_dollars), plot_type='interval', plot_color='$tangerine', plot_category='date', plot_value='users', plot_zero_value=0, plot_data=data( fields=['date', 'users'], rows=[(next(user_days), next(user_counts)) for i in range(60)], pack=True, ), ) q.page['social_media_traffic'] = ui.wide_series_stat_card( box='top_right', title=next(sample_title), value='68K', aux_value='Down 6%', plot_type='area', plot_color='$tangerine', plot_category='date', plot_value='users', plot_zero_value=0, plot_data=data( fields=['date', 'users'], rows=[(next(user_days), next(user_counts)) for i in range(60)], pack=True, ), ) audience_days1 = generate_time_series(60) audience_days2 = generate_time_series(60) audience_hits1 = generate_random_walk(10000, 20000, 0.2) audience_hits2 = generate_random_walk(8000, 15000) q.page['stats'] = ui.form_card( box='middle', title=next(sample_title), items=[ ui.stats(items=[ ui.stat(label=next(sample_term), value=next(sample_dollars)), ui.stat(label=next(sample_term), value=next(sample_percent)), ui.stat(label=next(sample_term), value=next(sample_amount)), ui.stat(label=next(sample_term), value=next(sample_dollars)), ui.stat(label=next(sample_term), value=next(sample_percent)), ui.stat(label=next(sample_term), value=next(sample_amount)), ui.stat(label=next(sample_term), value=next(sample_dollars)), ui.stat(label=next(sample_term), value=next(sample_percent)), ], justify=ui.StatsJustify.BETWEEN, inset=True), ui.visualization( plot=ui.plot([ ui.mark(type='area', x_scale='time', x='=date', y='=visitors', color='=site', color_range='$orange $amber', curve=ui.MarkCurve.SMOOTH), ui.mark(type='line', x_scale='time', x='=date', y='=visitors', color='=site', color_range='$orange $amber', curve=ui.MarkCurve.SMOOTH), ]), data=data( fields=['site', 'date', 'visitors'], rows=[ ('Online', next(audience_days1), next(audience_hits1)) for i in range(60) ] + [('In-store', next(audience_days2), next(audience_hits2)) for i in range(60)], pack=True), height='240px', ) ], ) q.page['click_through'] = ui.large_stat_card( box='bottom', title=next(sample_title), value=next(sample_amount), aux_value=next(sample_dollars), caption=' '.join([next(sample_caption) for i in range(3)]), ) q.page['view_through'] = ui.large_stat_card( box='bottom', title=next(sample_title), value=next(sample_amount), aux_value=next(sample_dollars), caption=' '.join([next(sample_caption) for i in range(3)]), ) q.page['total_conversions'] = ui.large_stat_card( box='bottom', title=next(sample_title), value=next(sample_amount), aux_value=next(sample_dollars), caption=' '.join([next(sample_caption) for i in range(3)]), ) q.page['footer'] = ui.footer_card( box='footer', caption='(c) 2021 H2O.ai. All rights reserved.') await q.page.save()
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()
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()
async def show_red_dashboard(q: Q): q.page['meta'] = ui.meta_card( box='', layouts=[ ui.layout( breakpoint='xl', width='1200px', zones=[ ui.zone('header'), ui.zone('title'), ui.zone('top', direction=ui.ZoneDirection.ROW, size='385px', zones=[ ui.zone('top_left'), ui.zone('top_right', zones=[ ui.zone( 'top_right_top', direction=ui.ZoneDirection.ROW, size='1'), ui.zone('top_right_bottom', size='1'), ]), ]), ui.zone('middle', direction=ui.ZoneDirection.ROW, size='385px'), ui.zone('bottom', direction=ui.ZoneDirection.ROW, size='385px', zones=[ ui.zone('bottom_left'), ui.zone('bottom_right', size='66%'), ]), ui.zone('footer'), ]) ]) q.page['header'] = ui.header_card(box='header', title='H2O Wave Demo', subtitle='Red Dashboard', nav=global_nav) q.page['title'] = ui.section_card( box='title', title=next(sample_title), subtitle=next(sample_caption), items=[ ui.label(label='Start:'), ui.date_picker(name='target_date1', label='', value='2020-12-20'), ui.label(label='End:'), ui.date_picker(name='target_date2', label='', value='2020-12-25'), ], ) audience_days1 = generate_time_series(60) audience_days2 = generate_time_series(60) audience_hits1 = generate_random_walk(10000, 20000, 0.2) audience_hits2 = generate_random_walk(8000, 15000) q.page['audience_metrics'] = ui.form_card( box='top_left', title=next(sample_title), items=[ ui.text(next(sample_caption)), ui.stats(items=[ ui.stat(label=next(sample_term), value=next(sample_dollars)), ui.stat(label=next(sample_term), value=next(sample_amount)), ui.stat(label=next(sample_term), value=next(sample_amount)), ]), ui.visualization( plot=ui.plot([ ui.mark(type='area', x_scale='time', x='=date', y='=visitors', color='=site', color_range='$red $tangerine'), ui.mark(type='line', x_scale='time', x='=date', y='=visitors', color='=site', color_range='$red $tangerine'), ]), data=data( fields=['site', 'date', 'visitors'], rows=[('A', next(audience_days1), next(audience_hits1)) for i in range(60)] + [('B', next(audience_days2), next(audience_hits2)) for i in range(60)], pack=True), height='210px', ) ], ) bounce_days = generate_time_series(30) bounce_rates = generate_random_walk() q.page['bounce_rate'] = ui.tall_series_stat_card( box='top_right_top', title=next(sample_title), value=next(sample_amount), aux_value=next(sample_term), plot_type='area', plot_color='$red', plot_category='date', plot_value='bounce_rate', plot_zero_value=0, plot_data=data( fields=['date', 'bounce_rate'], rows=[(next(bounce_days), next(bounce_rates)) for i in range(30)], pack=True, ), ) user_days = generate_time_series(30) user_counts = generate_random_walk() q.page['total_users'] = ui.tall_series_stat_card( box='top_right_top', title=next(sample_term), value=next(sample_dollars), aux_value=next(sample_term), plot_type='interval', plot_color='$tangerine', plot_category='date', plot_value='users', plot_zero_value=0, plot_data=data( fields=['date', 'users'], rows=[(next(user_days), next(user_counts)) for i in range(20)], pack=True, ), ) session_days = generate_time_series(60) session_counts = generate_random_walk() q.page['all_sessions'] = ui.tall_series_stat_card( box='top_right_bottom', title=next(sample_title), value='18,976 Unique', aux_value=next(sample_caption), plot_type='interval', plot_color='$red', plot_category='date', plot_value='users', plot_zero_value=0, plot_data=data( fields=['date', 'users'], rows=[(next(session_days), next(session_counts)) for i in range(60)], pack=True, ), ) q.page['page_views'] = ui.stat_list_card( box='middle', title=next(sample_title), subtitle=next(sample_caption), items=[ ui.stat_list_item(label=next(sample_title), caption=next(sample_caption), value=next(sample_dollars), aux_value=next(sample_term), value_color=next(sample_color)) for i in range(5) ], ) session_count = generate_random_walk(1000, 8000) session_source = generate_sequence( ['Search', 'Email', 'Referral', 'Social', 'Other']) q.page['dist_by_channel'] = ui.plot_card( box='middle', title=next(sample_title), data=data( fields=['site', 'channel', 'sessions'], rows=[('A', next(session_source), next(session_count)) for i in range(5)] + [('B', next(session_source), next(session_count)) for i in range(5)], pack=True, ), plot=ui.plot([ ui.mark(coord='theta', type='interval', x='=site', y='=sessions', color='=channel', stack='auto', y_min=0, color_range='$amber $orange $tangerine $red $pink') ])) q.page['sessions_by_channel'] = ui.plot_card( box='middle', title=next(sample_title), data=data( fields=['channel', 'sessions'], rows=[(next(sample_term), next(session_count)) for i in range(10)], pack=True, ), plot=ui.plot([ ui.mark(type='interval', x='=sessions', y='=channel', y_min=0, color='$red') ])) q.page['acquisitions'] = ui.form_card( box='bottom_left', title=next(sample_title), items=[ ui.text(next(sample_caption)), ui.stats(items=[ ui.stat(label=next(sample_term), value=next(sample_percent), icon=next(sample_icon), icon_color=next(sample_color)), ui.stat(label=next(sample_term), value=next(sample_percent), icon=next(sample_icon), icon_color=next(sample_color)), ]), ], ) q.page['sessions'] = ui.form_card( box='bottom_left', title=next(sample_title), items=[ ui.text(next(sample_caption)), ui.stats(items=[ ui.stat(label=next(sample_term), value=next(sample_percent), icon=next(sample_icon), icon_color=next(sample_color)), ui.stat(label=next(sample_term), value=next(sample_percent), icon=next(sample_icon), icon_color=next(sample_color)), ]), ], ) q.page['pages'] = ui.stat_table_card( box='bottom_right', title=next(sample_title), subtitle=next(sample_caption), columns=[ next(sample_term), next(sample_term), next(sample_term), next(sample_term) ], items=[ ui.stat_table_item(label=next(sample_term), caption=next(sample_title), values=[ next(sample_dollars), next(sample_percent), next(sample_percent) ], icon=next(sample_icon), icon_color=next(sample_color)) for i in range(5) ]) q.page['footer'] = ui.footer_card( box='footer', caption='(c) 2021 H2O.ai. All rights reserved.') await q.page.save()
async def show_purple_dashboard(q: Q): q.page['meta'] = ui.meta_card( box='', layouts=[ ui.layout( breakpoint='xs', zones=[ ui.zone('header', size='80px'), ui.zone('title', size='0'), ui.zone('body'), ui.zone('footer', size='50px'), ], ), ui.layout( breakpoint='m', zones=[ ui.zone('header', size='80px'), ui.zone('title', size='0'), ui.zone('body', direction=ui.ZoneDirection.ROW, zones=[ ui.zone( 'main', zones=[ ui.zone('overview', size='0'), ui.zone('stats1', direction=ui.ZoneDirection.ROW, size='150px'), ui.zone('stats2', direction=ui.ZoneDirection.ROW, size='150px'), ui.zone('others'), ]), ui.zone('sidebar', size='30%'), ]), ui.zone('footer', size='50px'), ], ), ui.layout( breakpoint='xl', width='1200px', zones=[ ui.zone('header', size='80px'), ui.zone('title', size='0'), ui.zone('body', direction=ui.ZoneDirection.ROW, zones=[ ui.zone('main', size='3', zones=[ ui.zone( 'overview', direction=ui.ZoneDirection.ROW, size='200px'), ui.zone( 'stats', direction=ui.ZoneDirection.ROW, size='150px'), ui.zone( 'details', direction=ui.ZoneDirection.ROW, size='400px'), ui.zone( 'reports', direction=ui.ZoneDirection.ROW, size='400px'), ]), ui.zone('sidebar', size='30%'), ]), ui.zone('footer', size='50px'), ]) ]) q.page['header'] = ui.header_card(box='header', title='H2O Wave Demo', subtitle='Purple Dashboard', nav=global_nav) q.page['title'] = ui.section_card( box='title', title=next(sample_title), subtitle=next(sample_caption), items=[ ui.date_picker(name='target_date', label='', value='2020-12-25'), ], ) customers_overview_dates = generate_time_series(30) customers_overview_counts = generate_random_walk() q.page['customers_overview'] = ui.tall_series_stat_card( box=ui.boxes( ui.box('body', height='200px', order=1), ui.box('overview', height='200px', order=1), ui.box('overview', order=1), ), title=next(sample_title), value=next(sample_dollars), aux_value=next(sample_title), plot_type='area', plot_color='$red', plot_category='date', plot_value='customer_count', plot_zero_value=0, plot_data=data( fields=['date', 'customer_count'], rows=[(next(customers_overview_dates), next(customers_overview_counts)) for i in range(30)], pack=True, ), ) conversions_overview_dates = generate_time_series(30) conversions_overview_counts = generate_random_walk() q.page['conversions_overview'] = ui.tall_series_stat_card( box=ui.boxes( ui.box('body', height='200px', order=2), ui.box('overview', height='200px', order=2), ui.box('overview', order=2), ), title=next(sample_title), value=next(sample_amount), aux_value=next(sample_dollars), plot_type='interval', plot_color='$pink', plot_category='date', plot_value='conversions', plot_zero_value=0, plot_data=data( fields=['date', 'conversions'], rows=[(next(conversions_overview_dates), next(conversions_overview_counts)) for i in range(30)], pack=True, ), ) revenue_overview_dates = generate_time_series(30) revenue_overview_counts = generate_random_walk() q.page['revenue_overview'] = ui.tall_series_stat_card( box=ui.boxes( ui.box('body', height='200px', order=3), ui.box('overview', height='200px', order=3), ui.box('overview', order=3), ), title=next(sample_title), value=next(sample_amount), aux_value=next(sample_dollars), plot_type='area', plot_color='$purple', plot_category='date', plot_value='revenue', plot_zero_value=0, plot_data=data( fields=['date', 'revenue'], rows=[(next(revenue_overview_dates), next(revenue_overview_counts)) for i in range(30)], pack=True, ), ) metric_dates = generate_time_series(30) metric_values = generate_random_walk() q.page['conversion_stats'] = ui.small_series_stat_card( box=ui.boxes( ui.box('body', height='150px', order=4), ui.box('stats1', order=1), ui.box('stats', order=1), ), title=next(sample_term), value=next(sample_percent), plot_type='area', plot_color='$red', plot_category='date', plot_value='metric', plot_zero_value=0, plot_data=data( fields=['date', 'metric'], rows=[(next(metric_dates), next(metric_values)) for i in range(30)], pack=True, ), ) q.page['revenue_stats'] = ui.small_series_stat_card( box=ui.boxes( ui.box('body', height='150px', order=5), ui.box('stats1', order=2), ui.box('stats', order=2), ), title=next(sample_term), value=next(sample_percent), plot_type='interval', plot_color='$pink', plot_category='date', plot_value='metric', plot_zero_value=0, plot_data=data( fields=['date', 'metric'], rows=[(next(metric_dates), next(metric_values)) for i in range(30)], pack=True, ), ) q.page['purchases_stats'] = ui.small_series_stat_card( box=ui.boxes( ui.box('body', height='150px', order=6), ui.box('stats1', order=3), ui.box('stats', order=3), ), title=next(sample_term), value=next(sample_percent), plot_type='area', plot_color='$purple', plot_category='date', plot_value='metric', plot_zero_value=0, plot_data=data( fields=['date', 'metric'], rows=[(next(metric_dates), next(metric_values)) for i in range(30)], pack=True, ), ) q.page['transactions_stats'] = ui.small_series_stat_card( box=ui.boxes( ui.box('body', height='150px', order=7), ui.box('stats2', order=1), ui.box('stats', order=4), ), title=next(sample_term), value=next(sample_percent), plot_type='area', plot_color='$red', plot_category='date', plot_value='metric', plot_zero_value=0, plot_data=data( fields=['date', 'metric'], rows=[(next(metric_dates), next(metric_values)) for i in range(30)], pack=True, ), ) q.page['order_stats'] = ui.small_series_stat_card( box=ui.boxes( ui.box('body', height='150px', order=8), ui.box('stats2', order=2), ui.box('stats', order=5), ), title=next(sample_term), value=next(sample_percent), plot_type='interval', plot_color='$pink', plot_category='date', plot_value='metric', plot_zero_value=0, plot_data=data( fields=['date', 'metric'], rows=[(next(metric_dates), next(metric_values)) for i in range(30)], pack=True, ), ) q.page['quantity_stats'] = ui.small_series_stat_card( box=ui.boxes( ui.box('body', height='150px', order=6), ui.box('stats2', order=3), ui.box('stats', order=6), ), title=next(sample_term), value=next(sample_percent), plot_type='area', plot_color='$purple', plot_category='date', plot_value='metric', plot_zero_value=0, plot_data=data( fields=['date', 'metric'], rows=[(next(metric_dates), next(metric_values)) for i in range(30)], pack=True, ), ) sales_days_1 = generate_time_series(15) sales_days_2 = generate_time_series(15) sales_amounts_1 = generate_random_walk(8000, 15000) sales_amounts_2 = generate_random_walk(8000, 15000) q.page['sales_details'] = ui.form_card( box=ui.boxes( ui.box('body', height='400px', order=9), ui.box('others', height='400px', order=1), ui.box('details', order=1), ), title=next(sample_title), items=[ ui.stats(items=[ ui.stat(label=next(sample_term), value=next(sample_dollars)), ui.stat(label=next(sample_term), value=next(sample_dollars)), ]), ui.visualization( plot=ui.plot([ ui.mark(type='interval', x_scale='time', x='=date', y='=sales', color='=site', y_min=0, color_range='$purple $red') ]), data=data( fields=['site', 'date', 'sales'], rows=[('Online', next(sales_days_1), next(sales_amounts_1)) for i in range(15)] + [('In-store', next(sales_days_2), next(sales_amounts_2)) for i in range(15)], pack=True), height='210px', ) ], ) audience_days1 = generate_time_series(60) audience_days2 = generate_time_series(60) audience_hits1 = generate_random_walk(10000, 20000, 0.2) audience_hits2 = generate_random_walk(8000, 15000) q.page['visitor_details'] = ui.form_card( box=ui.boxes( ui.box('body', height='400px', order=10), ui.box('others', height='400px', order=2), ui.box('details', order=2), ), title=next(sample_title), items=[ ui.stats(items=[ ui.stat(label=next(sample_term), value=next(sample_amount)), ui.stat(label=next(sample_term), value=next(sample_dollars)), ui.stat(label=next(sample_term), value=next(sample_percent)), ui.stat(label=next(sample_term), value=next(sample_dollars)), ]), ui.visualization( plot=ui.plot([ ui.mark(type='area', x_scale='time', x='=date', y='=visitors', color='=site', color_range='$purple $pink'), ui.mark(type='line', x_scale='time', x='=date', y='=visitors', color='=site', color_range='$purple $pink'), ]), data=data( fields=['site', 'date', 'visitors'], rows=[ ('Online', next(audience_days1), next(audience_hits1)) for i in range(60) ] + [('In-store', next(audience_days2), next(audience_hits2)) for i in range(60)], pack=True), height='210px', ) ], ) q.page['earnings_reports'] = ui.stat_table_card( box=ui.boxes( ui.box('body', order=11), ui.box('others', order=3), ui.box('reports', order=1, size=3), ), title=next(sample_title), subtitle=next(sample_caption), columns=[ next(sample_term), next(sample_term), next(sample_term), next(sample_term) ], items=[ ui.stat_table_item(label=next(sample_title), values=[ next(sample_dollars), next(sample_percent), next(sample_percent) ]) for i in range(8) ]) q.page['products_reports'] = ui.stat_list_card( box=ui.boxes( ui.box('body', order=12), ui.box('others', order=4), ui.box('reports', order=2), ), title=next(sample_title), subtitle=next(sample_caption), items=[ ui.stat_list_item(label=next(sample_term), caption=next(sample_title), value=next(sample_dollars), icon=next(sample_icon), icon_color=next(sample_color)) for i in range(5) ], ) q.page['activity'] = ui.stat_list_card( box=ui.boxes( ui.box('body', order=13), ui.box('sidebar', size='0'), ui.box('sidebar', size='0'), ), title=next(sample_title), subtitle=next(sample_caption), items=[ ui.stat_list_item(label=next(sample_term), caption=f'Order #{random.randint(1111, 9999)}', aux_value=f'{random.randint(1, 9)}hr', icon=next(sample_icon)) for i in range(10) ], ) q.page['footer'] = ui.footer_card( box='footer', caption='(c) 2021 H2O.ai. All rights reserved.') await q.page.save()
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()
page = site['/demo'] n = 20 f = FakeCategoricalSeries() v = page.add( 'example', ui.form_card( box='1 1 4 5', items=[ ui.text_xl('Example 1'), 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.text_xl('Example 2'), 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), ), ],
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()