Py.Cafe
Custom KPI Visualization
- 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
# Vizro is an open-source toolkit for creating modular data visualization applications.
# check out https://github.com/mckinsey/vizro for more info about Vizro
# and checkout https://vizro.readthedocs.io/en/stable/ for documentation.
import vizro.models as vm
from vizro import Vizro
import pandas as pd
from typing import Optional
import dash_bootstrap_components as dbc
from vizro.models.types import capture
from dash import html
import numpy as np
df_kpi = pd.DataFrame({"Actual": [100, 200, 700], "Reference": [100, 300, 500], "Category": ["A", "B", "C"]})
@capture("figure")
def custom_kpi_card(
data_frame: pd.DataFrame,
value_column: str,
reference_column: str,
*,
value_format: str = "{value}",
reference_format: str = "{delta_relative:+.1%} vs. reference ({reference})",
agg_func: str = "sum",
title: Optional[str] = None,
icon: Optional[str] = None,
# If False, a positive delta will receive className="color-pos" and a negative delta className="color-neg"
# If True, the coloring will be reversed.
reverse_coloring: bool = False,
) -> dbc.Card:
"""Creates a custom KPI card."""
title = title or f"{agg_func} {value_column}".title()
value, reference = data_frame[[value_column, reference_column]].agg(agg_func)
delta = value - reference
delta_relative = delta / reference if reference else np.nan
if reverse_coloring:
footer_class = "color-neg" if delta > 0 else "color-pos" if delta < 0 else ""
else:
footer_class = "color-pos" if delta > 0 else "color-neg" if delta < 0 else ""
header = dbc.CardHeader(
[
html.P(icon, className="material-symbols-outlined") if icon else None,
html.H4(title, className="card-kpi-title"),
]
)
body = dbc.CardBody(
value_format.format(value=value, reference=reference, delta=delta, delta_relative=delta_relative)
)
footer = dbc.CardFooter(
[
html.Span(
"arrow_circle_up" if delta > 0 else "arrow_circle_down" if delta < 0 else "arrow_circle_right",
className="material-symbols-outlined",
),
html.Span(
reference_format.format(value=value, reference=reference, delta=delta, delta_relative=delta_relative)
),
],
className=footer_class,
)
return dbc.Card([header, body, footer], className="card-kpi")
page = vm.Page(
title="KPI card",
layout=vm.Layout(grid=[[0, 0, 1, 1]] + [[-1, -1, -1, -1]] * 2),
components=[
vm.Figure(
figure=custom_kpi_card(
data_frame=df_kpi,
value_column="Actual",
reference_column="Reference",
title="KPI reference (reverse coloring)",
reverse_coloring=True,
),
),
vm.Figure(
figure=custom_kpi_card(
data_frame=df_kpi,
value_column="Actual",
reference_column="Reference",
title="KPI reference (pos)",
),
),
],
)
dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
# Vizro is an open-source toolkit for creating modular data visualization applications.
# check out https://github.com/mckinsey/vizro for more info about Vizro
# and checkout https://vizro.readthedocs.io/en/stable/ for documentation.
import vizro.models as vm
from vizro import Vizro
import pandas as pd
from typing import Optional
import dash_bootstrap_components as dbc
from vizro.models.types import capture
from dash import html
import numpy as np
df_kpi = pd.DataFrame({"Actual": [100, 200, 700], "Reference": [100, 300, 500], "Category": ["A", "B", "C"]})
@capture("figure")
def custom_kpi_card(
data_frame: pd.DataFrame,
value_column: str,
reference_column: str,
*,
value_format: str = "{value}",
reference_format: str = "{delta_relative:+.1%} vs. reference ({reference})",
agg_func: str = "sum",
title: Optional[str] = None,
icon: Optional[str] = None,
# If False, a positive delta will receive className="color-pos" and a negative delta className="color-neg"
# If True, the coloring will be reversed.
reverse_coloring: bool = False,
) -> dbc.Card:
"""Creates a custom KPI card."""
title = title or f"{agg_func} {value_column}".title()
value, reference = data_frame[[value_column, reference_column]].agg(agg_func)
delta = value - reference
delta_relative = delta / reference if reference else np.nan
if reverse_coloring:
footer_class = "color-neg" if delta > 0 else "color-pos" if delta < 0 else ""
else:
footer_class = "color-pos" if delta > 0 else "color-neg" if delta < 0 else ""
header = dbc.CardHeader(
[
html.P(icon, className="material-symbols-outlined") if icon else None,
html.H4(title, className="card-kpi-title"),
]
)
body = dbc.CardBody(
value_format.format(value=value, reference=reference, delta=delta, delta_relative=delta_relative)
)
footer = dbc.CardFooter(
[
html.Span(
"arrow_circle_up" if delta > 0 else "arrow_circle_down" if delta < 0 else "arrow_circle_right",
className="material-symbols-outlined",
),
html.Span(
reference_format.format(value=value, reference=reference, delta=delta, delta_relative=delta_relative)
),
],
className=footer_class,
)
return dbc.Card([header, body, footer], className="card-kpi")
page = vm.Page(
title="KPI card",
layout=vm.Layout(grid=[[0, 0, 1, 1]] + [[-1, -1, -1, -1]] * 2),
components=[
vm.Figure(
figure=custom_kpi_card(
data_frame=df_kpi,
value_column="Actual",
reference_column="Reference",
title="KPI reference (reverse coloring)",
reverse_coloring=True,
),
),
vm.Figure(
figure=custom_kpi_card(
data_frame=df_kpi,
value_column="Actual",
reference_column="Reference",
title="KPI reference (pos)",
),
),
],
)
dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()