Small Series Stat

If you need more than textual content and want to display also how is your data trending, use series stat.

Series stats can be either an area with different plot_curves or an interval depending on how you want to visualize the data.

Check the full API at ui.small_series_stat_card.

With line#

small_series_stat-0

from h2o_wave import data
q.page['linear'] = ui.small_series_stat_card(    box='1 1 2 2',    title='Linear curve',    value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',    data=dict(qux='80'),    plot_type='area',    plot_value='qux',    plot_color='$cyan',    plot_data=data('foo qux', 3, rows=[[90, 0.9], [50, 0.5], [80, 0.8]]),    plot_zero_value=0,    plot_curve='linear',)

With curve#

small_series_stat-1

from h2o_wave import data
q.page['smooth'] = ui.small_series_stat_card(    box='1 1 2 2',    title='Smooth curve',    value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',    data=dict(qux='80'),    plot_type='area',    plot_value='qux',    plot_color='$azure',    plot_data=data('foo qux', 3, rows=[[90, 0.9], [50, 0.5], [80, 0.8]]),    plot_zero_value=0,    plot_curve='smooth',)

With step#

small_series_stat-2

from h2o_wave import data
q.page['step'] = ui.small_series_stat_card(    box='1 1 2 2',    title='Step curve',    value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',    data=dict(qux='80'),    plot_type='area',    plot_value='qux',    plot_color='$mint',    plot_data=data('foo qux', 3, rows=[[90, 0.9], [50, 0.5], [80, 0.8]]),    plot_zero_value=0,    plot_curve='step',)

With step-after#

small_series_stat-3

from h2o_wave import data
q.page['step-after'] = ui.small_series_stat_card(    box='1 1 2 2',    title='Step-after curve',    value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',    data=dict(qux='80'),    plot_type='area',    plot_value='qux',    plot_color='$blue',    plot_data=data('foo qux', 3, rows=[[90, 0.9], [50, 0.5], [80, 0.8]]),    plot_zero_value=0,    plot_curve='step-after',)

With step-before#

small_series_stat-4

from h2o_wave import data
q.page['step-before'] = ui.small_series_stat_card(    box='1 1 2 2',    title='Step-before curve',    value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',    data=dict(qux='80'),    plot_type='area',    plot_value='qux',    plot_color='$blue',    plot_data=data('foo qux', 3, rows=[[90, 0.9], [50, 0.5], [80, 0.8]]),    plot_zero_value=0,    plot_curve='step-before',)

With bars#

small_series_stat-5

from h2o_wave import data
q.page['example'] = ui.small_series_stat_card(    box='1 1 2 2',    title='Interval',    value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',    data=dict(qux=788.42, quux=0.65),    plot_category='foo',    plot_type='interval',    plot_value='qux',    plot_color='$cyan',    plot_data=data('foo qux', 3, rows=[[90, 0.9], [50, 0.5], [80, 0.8]]),    plot_zero_value=0,)