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 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 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 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 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'):
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 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 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 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 / 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 / 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()
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()
# 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()
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()
# 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()
# 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()
