PyCafe - Dash - Vizro KPI cards inside Dash

app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
# check out https://dash.plotly.com/ for documentation
# And check out https://py.cafe/maartenbreddels for more examples

import dash_bootstrap_components as dbc
import pandas as pd
from dash import Dash, html
from vizro.figures.library import kpi_card, kpi_card_reference

df_kpi = pd.DataFrame({"Actual": [100, 200, 700], "Reference": [100, 300, 500], "Category": ["A", "B", "C"]})

example_cards = [
    kpi_card(data_frame=df_kpi, value_column="Actual", title="KPI with value"),
    kpi_card(data_frame=df_kpi, value_column="Actual", title="KPI with aggregation", agg_func="median"),
    kpi_card(
        data_frame=df_kpi,
        value_column="Actual",
        title="KPI formatted",
        value_format="${value:.2f}",
    ),
    kpi_card(
        data_frame=df_kpi,
        value_column="Actual",
        title="KPI with icon",
        icon="shopping_cart",
    ),
]

example_reference_cards = [
    kpi_card_reference(
        data_frame=df_kpi,
        value_column="Actual",
        reference_column="Reference",
        title="KPI ref. (pos)",
    ),
    kpi_card_reference(
        data_frame=df_kpi,
        value_column="Actual",
        reference_column="Reference",
        agg_func="median",
        title="KPI ref. (neg)",
    ),
    kpi_card_reference(
        data_frame=df_kpi,
        value_column="Actual",
        reference_column="Reference",
        title="KPI ref. formatted",
        value_format="{value}€",
        reference_format="{delta}€ vs. last year ({reference}€)",
    ),
    kpi_card_reference(
        data_frame=df_kpi,
        value_column="Actual",
        reference_column="Reference",
        title="KPI ref. with icon",
        icon="shopping_cart",
    ),
]

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])


app.layout = dbc.Container(
    [
        html.H1(children="KPI Cards"),
        dbc.Stack(
            children=[
                dbc.Row([dbc.Col(kpi_card) for kpi_card in example_cards]),
                dbc.Row([dbc.Col(kpi_card) for kpi_card in example_reference_cards]),
            ],
            gap=4
        ),
    ]
)
Py.Cafe

dash-kpi-cards-usage

Vizro KPI cards inside Dash
