- Published on
KPI Card with Dash Bootstrap Components
- Authors
- Name
- Nelson Tang
- @ThisIsAffine
Updated 2021-07-01 to use Dash 1.19 and fontawesome icons
Dash Bootstrap Components has a fantastic library of plug and play components that make it easy to get started.
You can find better styled examples of these all over the place if you google 'HTML/CSS dashboard examples.'
The magic of using Dash is that you can style these to your heart's content with CSS and all of the values can be generated with Python, and the whole thing can be reproducible and components can be shared across projects. And the flexbox system is just fine rather than fiddling with positioning in PowerBI.
Python Code for your app.py
file:
import dash # (version 1.19.0) pip install dash
import dash_bootstrap_components as dbc
import dash_html_components as html
fontawesome_stylesheet = "https://use.fontawesome.com/releases/v5.8.1/css/all.css"
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP, fontawesome_stylesheet])
header = html.Div([
dbc.Row(dbc.Col(html.H1("H1 Text"))),
])
card = dbc.Card([
dbc.CardBody([
html.H4("Card title", className="card-title"),
html.P(
"$10.5 M",
className="card-value",
),
html.P(
"Target: $10.0 M",
className="card-target",
),
html.Span([
html.I(className="fas fa-arrow-circle-up up"),
html.Span(" 5.5% vs Last Year",
className="up")
])
])
])
row = html.Div([
dbc.CardDeck([
card,
card,
card,
]),
], style={'padding': '25px'}
)
app.layout = html.Div([
header,
row,
row
])
if __name__ == "__main__":
app.run_server(host="0.0.0.0", port=8080, debug=True)
The 'up' arrow icon is courtesy of fontawesome, which we load with the external stylesheet. Since this is all in python it's simple to turn this into a function and create conditional (i.e. if
) statements to change the icon and color scheme for your data.
Here is the basic CSS styling that goes with this:
.card {
text-align: center;
}
.card .card-title {
text-align: left;
font-weight: lighter;
}
.card .card-value {
font-size: 2rem;
}
.card .card-target {
font-size: 1rem;
font-weight: lighter;
}
.card .down {
color: red;
}
.card .up {
color: green;
}