Dashboard

Make a dashboard using a multitude of cards and update them live.

from faker import Faker
import time
from h2o_wave import site, data, ui
from synth import FakePercent, FakeCategoricalSeries

fake = Faker()

light_theme_colors = '$red $pink $purple $violet $indigo $blue $azure $cyan $teal $mint $green $amber $orange $tangerine'.split()  # noqa: E501
dark_theme_colors = '$red $pink $blue $azure $cyan $teal $mint $green $lime $yellow $amber $orange $tangerine'.split()

_color_index = -1
colors = dark_theme_colors


def next_color():
    global _color_index
    _color_index += 1
    return colors[_color_index % len(colors)]


_curve_index = -1
curves = 'linear smooth step step-after step-before'.split()


def next_curve():
    global _curve_index
    _curve_index += 1
    return curves[_curve_index % len(curves)]


def create_dashboard(update_freq=0.0):
    page = site['/demo']
    simples = []
    for i in range(1, 7):
        f = FakePercent()
        val, pc = f.next()
        c = page.add(f'a{i}', ui.small_stat_card(
            box=f'{i} 1 1 1',
            title=fake.cryptocurrency_name(),
            value=f'${val:.2f}',
        ))
        simples.append((f, c))

    simples_colored = []
    for i in range(1, 7):
        f = FakeCategoricalSeries()
        cat, val, pc = f.next()
        c = page.add(f'aa{i}', ui.small_series_stat_card(
            box=f'{6 + i} 1 1 1',
            title=fake.cryptocurrency_code(),
            value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',
            data=dict(qux=val, quux=pc / 100),
            plot_category='foo',
            plot_value='qux',
            plot_color=next_color(),
            plot_data=data('foo qux', -15),
            plot_zero_value=0,
            plot_curve=next_curve(),
        ))
        simples_colored.append((f, c))

    lines = []
    for i in range(1, 13, 2):
        f = FakeCategoricalSeries()
        cat, val, pc = f.next()
        c = page.add(f'b{i}', ui.wide_series_stat_card(
            box=f'{i} 2 2 1',
            title=fake.cryptocurrency_name(),
            value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',
            aux_value='={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}',
            data=dict(qux=val, quux=pc / 100),
            plot_category='foo',
            plot_value='qux',
            plot_color=next_color(),
            plot_data=data('foo qux', -15),
            plot_zero_value=0,
            plot_curve=next_curve(),
        ))
        lines.append((f, c))

    bars = []
    for i in range(1, 13, 2):
        f = FakeCategoricalSeries()
        cat, val, pc = f.next()
        c = page.add(f'c{i}', ui.wide_series_stat_card(
            box=f'{i} 3 2 1',
            title=fake.cryptocurrency_name(),
            value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',
            aux_value='={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}',
            data=dict(qux=val, quux=pc),
            plot_type='interval',
            plot_category='foo',
            plot_value='qux',
            plot_color=next_color(),
            plot_data=data('foo qux', -25),
            plot_zero_value=0
        ))
        bars.append((f, c))

    large_pcs = []
    for i in range(1, 13):
        f = FakePercent()
        val, pc = f.next()
        c = page.add(f'd{i}', ui.tall_gauge_stat_card(
            box=f'{i} 4 1 2',
            title=fake.cryptocurrency_name(),
            value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',
            aux_value='={{intl bar style="percent" minimum_fraction_digits=2 maximum_fraction_digits=2}}',
            plot_color=next_color(),
            progress=pc,
            data=dict(foo=val, bar=pc / 100),
        ))
        large_pcs.append((f, c))

    large_lines = []
    for i in range(1, 13):
        f = FakeCategoricalSeries()
        cat, val, pc = f.next()
        c = page.add(f'e{i}', ui.tall_series_stat_card(
            box=f'{i} 6 1 2',
            title=fake.cryptocurrency_name(),
            value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',
            aux_value='={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}',
            data=dict(qux=val, quux=pc),
            plot_type='area',
            plot_category='foo',
            plot_value='qux',
            plot_color=next_color(),
            plot_data=data('foo qux', -15),
            plot_zero_value=0,
            plot_curve=next_curve(),
        ))
        large_lines.append((f, c))

    small_pcs = []
    for i in range(1, 7, 2):
        f = FakePercent()
        val, pc = f.next()
        c = page.add(f'f{i}', ui.wide_gauge_stat_card(
            box=f'{i} 8 2 1',
            title=fake.cryptocurrency_name(),
            value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',
            aux_value='={{intl bar style="percent" minimum_fraction_digits=2 maximum_fraction_digits=2}}',
            plot_color=next_color(),
            progress=pc,
            data=dict(foo=val, bar=pc / 100),
        ))
        small_pcs.append((f, c))

    small_pbs = []
    for i in range(7, 13, 2):
        f = FakePercent()
        val, pc = f.next()
        c = page.add(f'f{i}', ui.wide_bar_stat_card(
            box=f'{i} 8 2 1',
            title=fake.cryptocurrency_name(),
            value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',
            aux_value='={{intl bar style="percent" minimum_fraction_digits=2 maximum_fraction_digits=2}}',
            plot_color=next_color(),
            progress=pc,
            data=dict(foo=val, bar=pc / 100),
        ))
        small_pbs.append((f, c))

    large_cards = []
    for i in range(1, 7, 2):
        f = FakePercent()
        val, pc = f.next()
        c = page.add(f'g{i}', ui.large_stat_card(
            box=f'{i} 9 2 2',
            title=fake.cryptocurrency_name(),
            value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',
            aux_value='={{intl quux style="percent" minimum_fraction_digits=1 maximum_fraction_digits=1}}',
            data=dict(qux=val, quux=pc / 100),
            caption=' '.join(fake.sentences()),
        ))
        large_cards.append((f, c))

    large_pbs = []
    for i in range(7, 13, 2):
        f = FakePercent()
        val, pc = f.next()
        c = page.add(f'g{i}', ui.large_bar_stat_card(
            box=f'{i} 9 2 2',
            title=fake.cryptocurrency_name(),
            value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',
            value_caption='This Month',
            aux_value='={{intl bar style="percent" minimum_fraction_digits=2 maximum_fraction_digits=2}}',
            aux_value_caption='Previous Month',
            plot_color=next_color(),
            progress=pc,
            data=dict(foo=val, bar=pc / 100),
            caption=' '.join(fake.sentences(2)),
        ))
        large_pbs.append((f, c))

    page.save()

    while update_freq > 0:
        time.sleep(update_freq)

        for f, c in simples:
            val, pc = f.next()
            c.value = f'${val:.2f}',

        for f, c in simples_colored:
            cat, val, pc = f.next()
            c.data.qux = val
            c.data.quux = pc / 100
            c.plot_data[-1] = [cat, val]

        for f, c in lines:
            cat, val, pc = f.next()
            c.data.qux = val
            c.data.quux = pc / 100
            c.plot_data[-1] = [cat, val]

        for f, c in bars:
            cat, val, pc = f.next()
            c.data.qux = val
            c.data.quux = pc / 100
            c.plot_data[-1] = [cat, val]

        for f, c in large_lines:
            cat, val, pc = f.next()
            c.data.qux = val
            c.data.quux = pc / 100
            c.plot_data[-1] = [cat, val]

        for f, c in large_pcs:
            val, pc = f.next()
            c.data.foo = val
            c.data.bar = pc
            c.progress = pc

        for f, c in small_pcs:
            val, pc = f.next()
            c.data.foo = val
            c.data.bar = pc
            c.progress = pc

        for f, c in small_pbs:
            val, pc = f.next()
            c.data.foo = val
            c.data.bar = pc
            c.progress = pc

        for f, c in large_cards:
            val, pc = f.next()
            c.data.qux = val
            c.data.quux = pc

        for f, c in large_pbs:
            val, pc = f.next()
            c.data.foo = val
            c.data.bar = pc
            c.progress = pc

        page.save()


create_dashboard(update_freq=0.25)

Tags:  dashboard