async def serve(q: Q): if not q.client.initialized: q.client.initialized = True q.page['pricing'] = ui.plot_card(box='1 1 4 5', title='Interval', data=data(fields='product price', rows=[ ['spam', 1.49], ['eggs', 2.49], ['ham', 1.99], ], pack=True), plot=ui.plot([ ui.mark(type='interval', x='=product', y='=price', y_min=0) ]), events=['select_marks']) q.page['details'] = ui.markdown_card( box='1 6 4 2', title='Selected Product', content='Nothing selected.', ) await q.page.save() else: await handle_on(q)
async def draw_weekly_sales_plot(q: Q, plot_data): v = q.page.add( 'content', ui.plot_card( box='4 2 9 9', title='Walmart Weekly Sales Forecast', data=data('Date Weekly_Sales data_type', 0), plot=ui.plot([ ui.mark( type='point', x='=Date', y='=Weekly_Sales', x_scale='time', y_min=0, x_title='Date', y_title='Weekly Sales (USD)', color='=data_type', color_range=' '.join([WaveColors.red, WaveColors.purple]), size=6, fill_opacity=0.75, shape='circle' ) ]) )) v.data = plot_data await q.page.save()
def render_positive_pdp_plot(q: Q, shap_rows: List, selected_row_index: Optional[int]): max_contrib_col = shap_rows[0][0] if selected_row_index is None else None is_cat, max_contrib_col, churn_rows = churn_predictor.get_positive_explanation( selected_row_index, max_contrib_col) plot = [ ui.mark(type='interval', x='=label', y='=size', x_title=max_contrib_col, color=q.client.secondary_color, fill_opacity=0.5), ui.mark(type='line' if is_cat else 'point', x='=label', y='=value', color=q.client.primary_color, shape='circle'), ] if selected_row_index is not None: plot.append( ui.mark(x=churn_predictor.get_python_type(df[max_contrib_col] [selected_row_index]))) q.page['top_positive_plot'] = ui.plot_card( box='middle', title='Feature Most Contributing to Churn', data=data(['label', 'value', 'size'], rows=churn_rows), plot=ui.plot(plot))
def get_objects(n_callcenters): ''' Returns a mapping from names to objects representing the cards used in the ui ''' n_categories = 3 objects = dict() objects['outcomes'] = ui.plot_card(box='1 1 12 5', title='Outcomes by Call Center', data=data('country callcenter count', n_callcenters * n_categories), plot=ui.plot([ ui.mark(type='interval', x='=callcenter', y='=count', color='=country', stack='auto', y_min=0) ])) for i in range(n_callcenters): col = (i % 12) + 1 row = (i // 12) * 2 + 6 objects[f'utilcc{i}'] = ui.tall_gauge_stat_card( box=f'{col} {row} 1 2', title=f'CC {i:02d} util.', value= '={{intl perc style="percent" minimum_fraction_digits=2 maximum_fraction_digits=2}}', aux_value='', plot_color='$green', progress=0, data=dict(perc=0)) return objects
def add_chart(box, title, plot_type='interval'): return ui.plot_card(box=box, title=title, data=data('xvalue yvalue'), plot=ui.plot([ ui.mark(type=plot_type, x='=xvalue', y='=yvalue', color='=yvalue') ]))
def render_shap_plot(q: Q, shap_rows: List, selected_row_index: Optional[int]): q.page['shap_plot'] = ui.plot_card( box=ui.box('top-plot', height='700px'), title='Shap explanation' if selected_row_index else 'Global Shap', data=data(['label', 'value'], rows=shap_rows), plot=ui.plot([ ui.mark(type='interval', x='=value', x_title='SHAP value', y='=label', color=q.client.secondary_color) ]))
def add_interval_card(box, title, value, plot_type='interval'): return ui.plot_card(box=box, title=title, data=data('counts division', 0), plot=ui.plot([ ui.mark( type=plot_type, x='=division', y='=counts', y_min=0, ), ui.mark(x=value, label='', ref_stroke_color="#86003c", ref_stroke_size=2), ]))
async def serve(q: Q): v = q.page.add('example', ui.plot_card( box='1 1 4 6', title='Intervals, stacked', data=data('country product price', n * k), plot=ui.plot([ui.mark( coord='rect', type='interval', x='=product', y='=price', y_min=0, color='=country', stack='auto', )]), )) v.data = values await q.page.save()
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 ), ) ])
def add_chart(box, title, plot_type='interval', color_gradient=True, color_n=10): if color_gradient: c2 = Color("#86003c") c1 = Color("#ff8ba0") colors = " ".join([c.hex_l for c in list(c1.range_to(c2, color_n))]) return ui.plot_card(box=box, title=title, data=data('xvalue yvalue'), plot=ui.plot([ ui.mark(type=plot_type, x='=xvalue', y='=yvalue', color='=yvalue', color_range=colors) ]))
def add_area_card(box, title, value): return ui.plot_card(box=box, title=title, data=data('counts division', 0), plot=ui.plot([ ui.mark( type="area", x='=division', y='=counts', color="#ff8ba0", y_min=0, ), ui.mark(type='line', x='=division', y='=counts', color='#e41f7b'), ui.mark(x=value, label='', ref_stroke_color="#86003c", ref_stroke_size=2), ]))
def render_charges_breakdown(q: Q, selected_row_index: Optional[int]): labels = [ 'Day Charges', 'Evening Charges', 'Night Charges', 'Intl Charges' ] rows = [] for label in labels: if selected_row_index is not None: rows.append((label, df[label][selected_row_index])) else: rows.append((label, df[label].mean(axis=0))) color_range = f'{q.client.primary_color} {q.client.secondary_color} {q.client.tertiary_color} #67dde6' q.page['bar_chart'] = ui.plot_card( box=ui.box('top-stats', height='300px'), title='Total call charges breakdown' if selected_row_index else 'Average Charges Breakdown', data=data(['label', 'value'], rows=rows), plot=ui.plot([ ui.mark(type='interval', x='=label', y='=value', color='=label', color_range=color_range) ]))
# Plot / Point / Sizes # Make a scatterplot with mark sizes mapped to a continuous variable (a "bubble plot"). # --- import random from synth import FakeScatter from h2o_wave import site, data, ui page = site['/demo'] n = 40 f = FakeScatter() v = page.add( 'example', ui.plot_card(box='1 1 4 5', 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.next() for _ in range(n)]] page.save()
# Plot / Point / Annotation # Add annotations (points, lines and regions) to a #plot. # #annotation # --- from synth import FakeScatter from h2o_wave import site, data, ui page = site['/demo'] n = 50 f = FakeScatter() v = page.add('example', ui.plot_card( box='1 1 4 5', 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.next() for _ in range(n)] page.save()
# Make an combined area + line #plot showing multiple categories. # --- from synth import FakeMultiTimeSeries from h2o_wave import site, data, ui page = site['/demo'] n = 50 f = FakeMultiTimeSeries() v = page.add( 'example', ui.plot_card(box='1 1 4 5', 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.next() for _ in range(n)] for g, t, x, dx in x] page.save()
# Plot / Interval / Range / Transpose # Make a bar plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot. # --- import random from synth import FakeCategoricalSeries from h2o_wave import site, data, ui page = site['/demo'] n = 20 f = FakeCategoricalSeries() v = page.add( 'example', ui.plot_card(box='1 1 4 5', title='Interval, range', data=data('product low high', n), plot=ui.plot([ ui.mark( type='interval', x0='=low', x='=high', y='=product', ) ]))) v.data = [(c, x - random.randint(3, 10), x + random.randint(3, 10)) for c, x, dx in [f.next() for _ in range(n)]] page.save()
# Plot / Area / Stacked # Make a stacked area plot. # --- from synth import FakeMultiTimeSeries from h2o_wave import site, data, ui page = site['/demo'] n = 50 f = FakeMultiTimeSeries() v = page.add( 'example', ui.plot_card(box='1 1 4 5', 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.next() for _ in range(n)] for g, t, x, dx in x] page.save()
n = 50 f = FakeTimeSeries() v = page.add( 'example', ui.plot_card(box='1 1 4 5', 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)]] page.save()
# Plot / Line / Step / After # Make a line #plot with a step-after curve. # --- from synth import FakeTimeSeries from h2o_wave import site, data, ui page = site['/demo'] n = 50 f = FakeTimeSeries() v = page.add( 'example', ui.plot_card(box='1 1 4 5', title='Line, step-right', data=data('date price', n), plot=ui.plot([ ui.mark(type='line', x_scale='time', x='=date', y='=price', curve='step-after', y_min=0) ]))) v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]] page.save()
# Plot / Histogram # Make a histogram. # --- from synth import FakeCategoricalSeries from h2o_wave import site, data, ui page = site['/demo'] n = 10 f = FakeCategoricalSeries() v = page.add( 'example', ui.plot_card(box='1 1 4 5', 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.next() for _ in range(n)])] page.save()
# Plot / Interval / Stacked # Make a #stacked column #plot. #interval # --- from synth import FakeMultiCategoricalSeries from h2o_wave import site, data, ui page = site['/demo'] n = 10 k = 5 f = FakeMultiCategoricalSeries(groups=k) v = page.add( 'example', ui.plot_card(box='1 1 4 5', 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.next() for _ in range(n)] for g, t, x, dx in x] page.save()
# Plot / Interval / Annotation # Add annotations to a column #plot. #annotation #interval # --- from synth import FakeCategoricalSeries from h2o_wave import site, data, ui page = site['/demo'] n = 20 f = FakeCategoricalSeries() v = page.add( 'example', ui.plot_card(box='1 1 4 5', 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='C10', y=80, label='point'), ui.mark(x='C13', label='vertical line'), ui.mark(y=40, label='horizontal line'), ui.mark(x='C6', x0='C3', label='vertical region'), ui.mark(y=70, y0=60, label='horizontal region') ]))) v.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]] page.save()
# Plot / Area / Groups # Make an area plot showing multiple categories. # --- from synth import FakeMultiTimeSeries from h2o_wave import site, data, ui page = site['/demo'] n = 50 f = FakeMultiTimeSeries() v = page.add('example', ui.plot_card( box='1 1 4 5', 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.next() for _ in range(n)] for g, t, x, dx in x] page.save()
# Plot / Area / Range # Make an area plot representing a range (band) of values. # --- import random from synth import FakeTimeSeries from h2o_wave import site, data, ui page = site['/demo'] n = 50 f = FakeTimeSeries() v = page.add('example', ui.plot_card( box='1 1 4 5', 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)]] page.save()
# Plot / Line / Labels / Occlusion # Make a line #plot with non-overlapping labels. # --- from synth import FakeTimeSeries from h2o_wave import site, data, ui page = site['/demo'] n = 50 f = FakeTimeSeries() v = page.add('example', ui.plot_card( box='1 1 4 5', title='Remove overlapping labels', data=data('date price', n), plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0, label='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}', label_overlap='hide')]) )) v.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]] page.save()
# Plot / Area / Smooth # Make an area plot with a smooth curve. # --- from synth import FakeTimeSeries from h2o_wave import site, data, ui page = site['/demo'] n = 50 f = FakeTimeSeries() v = page.add( 'example', ui.plot_card(box='1 1 4 5', 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)]] page.save()
# Plot / Path / Smooth # Make a path plot with a smooth curve. # --- from synth import FakeScatter from h2o_wave import site, data, ui page = site['/demo'] n = 50 f = FakeScatter() v = page.add( 'example', ui.plot_card(box='1 1 4 5', title='Path, smooth', data=data('profit sales', n), plot=ui.plot([ ui.mark(type='path', x='=profit', y='=sales', curve='smooth') ]))) v.data = [(x, y) for x, y in [f.next() for _ in range(n)]] page.save()
# Make a scatterplot with categories encoded as colors. # --- from synth import FakeScatter from h2o_wave import site, data, ui page = site['/demo'] def create_fake_row(g, f, n): return [(g, x, y) for x, y in [f.next() for _ in range(n)]] n = 30 f1, f2, f3 = FakeScatter(), FakeScatter(), FakeScatter() v = page.add( 'example', ui.plot_card(box='1 1 4 5', title='Point, groups', data=data('product price performance', n * 3), plot=ui.plot([ ui.mark(type='point', x='=price', y='=performance', color='=product', shape='circle') ]))) v.data = create_fake_row('G1', f1, n) + create_fake_row( 'G2', f1, n) + create_fake_row('G3', f1, n) page.save()
# Plot / Interval # Make a column #plot. #interval # --- from synth import FakeCategoricalSeries from h2o_wave import site, data, ui page = site['/demo'] n = 20 f = FakeCategoricalSeries() v = page.add( 'example', ui.plot_card(box='1 1 4 5', 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.next() for _ in range(n)]] page.save()
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()