Animated KPI
Animate your KPI with ods-timer.
The KPI is computed with ods-aggregation. For more information about how to compute metrics, see ods-aggregation resource.
Animation: You can change the speed of the animation by changing 2 variables:
nbticks: number of steps to change the KPI. High value = many steps before reaching the final KPI.
delay: delay between each tick. High delay = slow animation.
Dataset in use: uranium-production (See it on userclub domain)
Fields in use:
| tonnes_of_uranium (numeric) |
|---|
| 24575 |
| 3032 |
| 2475 |
| 3432 |
<ods-dataset-context context="uraniumproduction"
uraniumproduction-dataset="uranium-production"
uraniumproduction-domain="userclub">
<div ods-aggregation="aggregation"
ods-aggregation-context="uraniumproduction"
ods-aggregation-function="SUM"
ods-aggregation-expression="tonnes_of_uranium">
<div class="row">
<div class="col-sm-offset-4 col-sm-4">
<!-- KPI box component -->
<div class="kpi-card"
ng-if="true"
ng-init="from = 0;
nbticks = 30;
delay = 100;
tick = 0;">
<i class="kpi-icon fa fa-superpowers" aria-hidden="true"></i>
<ods-timer stop-condition="tick >= nbticks"
delay="delay"
auto-start="true"
exec="tick = tick + 1;">
</ods-timer>
<p class="kpi-title">{{ ((aggregation || 0) / nbticks) * tick | number:0 }}</p>
<p class="kpi-description">tons of uranium produced since 2017</p>
</div>
</div>
</div>
</div>
</ods-dataset-context>
/* KPI Card
========================================================================== */
.kpi-card {
background-color: var(--boxes-background);
height: 100%;
padding: 39px;
border-radius: 4px;
margin-bottom: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
max-height: 250px;
}
.kpi-icon {
color: var(--highlight);
color: var(--secondary-color);
font-size: 4rem;
margin-top: 0;
margin-bottom: 13px;
max-width: 100%;
}
.kpi-title {
font-weight: normal;
color: var(--highlight);
font-size: 3.2rem;
margin-top: 0;
margin-bottom: 13px;
max-width: 100%;
}
.kpi-description {
color: var(--text);
font-size: 1rem;
line-height: 1.5;
font-weight: normal;
margin-top: 0;
margin-bottom: 0;
max-width: 100%;
}
/* Hide the ods-timer button
========================================================================== */
.ods-button.ods-widget-timer-controller {
display: none;
}