Widget Tricks - Animations

Animated KPI New

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.

<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 ng-if="true"
                     ng-init="from = 0;
                              nbticks = 30;
                              delay = 100;
                              tick = 0;"
                     class="kpi-card">
                    <i class="kpi-icon fa fa-superpowers" aria-hidden="true"></i>
                    <ods-timer
                            stop-condition="from >= aggregation"
                            delay="delay"
                            auto-start="true"
                            exec="from = from + ((aggregation || 0) / nbticks);">
                    </ods-timer>
                    <h2 class="kpi-title">{{ from | number:0 }}</h2>
                    <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;
}

Animated KPI with auto-reload

Animate your KPI with ods-timer and add an auto-reload feature.

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.

You change also change the delay between 2 reloads by changing the variable reloadeverynbtick. High value = long delay betweens 2 reloads.

<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 ng-if="true"
                     ng-init="from = 0;
                              nbticks = 15;
                              delay = 100;
                              tick = 0;
                              reloadeverynbtick = 100;"
                     class="kpi-card">
                    {{ to = aggregation ; ''}}
                    <i class="kpi-icon fa fa-superpowers" aria-hidden="true"></i>
                    <ods-timer stop-condition=""
                               delay="delay"
                               auto-start="true"
                               exec="(from < to ? from = (((from + ((to || 0) / nbticks)) * 100) | math : 'round') / 100 : undefined);
                                     (tick = tick + 1);
                                     (tick % reloadeverynbtick == 0 ? from = 0 : undefined); ">
                    </ods-timer>
                    <h2 class="kpi-title">{{ from | number : 0 }}</h2>
                    <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;
}

Animated KPI with a gauge

Animate your percentage KPI with ods-gauge. The percentage is computed with 2 ods-aggregation : one for value, and one for the max. For more information about how to compute metrics, see ods-aggregation resource.

These 2 aggregations are then used in ods-gauge, in 2 parameters : value and max.

<ods-dataset-context context="uraniumproduction,uraniumproductionfrance"
                     uraniumproduction-dataset="uranium-production"
                     uraniumproduction-domain="userclub"
                     uraniumproductionfrance-dataset="uranium-production"
                     uraniumproductionfrance-domain="userclub"
                     uraniumproductionfrance-parameters="{'refine.country':'Kazakhstan'}">
    <div ods-aggregation="sum,sumkazakhstan"
         ods-aggregation-sum-context="uraniumproduction"
         ods-aggregation-sum-function="SUM"
         ods-aggregation-sum-expression="tonnes_of_uranium"
         ods-aggregation-sumkazakhstan-context="uraniumproductionfrance"
         ods-aggregation-sumkazakhstan-function="SUM"
         ods-aggregation-sumkazakhstan-expression="tonnes_of_uranium">
        <div class="row row-equal-height">
            <div class="col-sm-offset-4 col-sm-4">
                <!-- KPI box component -->
                <div class="kpi-card kpi-animated">
                    <ods-gauge display-mode="circle" value="sumkazakhstan" max="sum">
                    </ods-gauge>
                    <p class="kpi-description">% of Uranium production in Kazakhstan</p>
                </div>
            </div>
        </div>
    </div>
</ods-dataset-context>
/* Variables & Shared classes
========================================================================== */
.row-equal-height {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Fix for early content wrapping in Safari*/
.row-equal-height:before,
.row-equal-height:after {
    content: normal;
}

/* 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;
}

.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;
}

/* ODS-Gauge
========================================================================== */
.odswidget-gauge--circle .odswidget-gauge__svg {
    -webkit-transform: rotate(
            -90deg
    );
    transform: rotate(
            -90deg
    );
    height: 100%;
}

.kpi-animated .odswidget-gauge__svg-filler {
    fill: none;
    stroke-width: 8px;
    stroke: var(--highlight);
    -webkit-transition: stroke-dasharray 0.1s;
    transition: stroke-dasharray 0.1s;
}

.odswidget-gauge {
    display: flex;
    height: 100%;
    width: 100%;
}

Animated KPI with a gauge and auto-reload

Animate your percentage KPI with ods-gauge and add an auto-reload feature.

The percentage is computed with 2 ods-aggregation : one for value, and one for the max. For more information about how to compute metrics, see ods-aggregation resource.

These 2 aggregations are used in an AngularJS expression line 28 to set the value and the max of ods-gauge filled in by ods-timer.

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.

You change also change the delay between 2 reloads by changing the variable reloadeverynbtick. High value = long delay betweens 2 reloads.

<ods-dataset-context context="uraniumproduction,uraniumproductionfrance"
                     uraniumproduction-dataset="uranium-production"
                     uraniumproduction-domain="userclub"
                     uraniumproductionfrance-dataset="uranium-production"
                     uraniumproductionfrance-domain="userclub"
                     uraniumproductionfrance-parameters="{'refine.country':'Kazakhstan'}">
    <div ods-aggregation="sum,sumkazakhstan"
         ods-aggregation-sum-context="uraniumproduction"
         ods-aggregation-sum-function="SUM"
         ods-aggregation-sum-expression="tonnes_of_uranium"
         ods-aggregation-sumkazakhstan-context="uraniumproductionfrance"
         ods-aggregation-sumkazakhstan-function="SUM"
         ods-aggregation-sumkazakhstan-expression="tonnes_of_uranium">
        <div class="row row-equal-height">
            <div class="col-sm-offset-4 col-sm-4">
                <!-- KPI box component -->
                <div ng-if="true"
                     class="kpi-card kpi-animated"
                     ng-init="from = 0;
                              nbticks = 30;
                              delay = 100;
                              tick = 0;
                              reloadeverynbtick = 100;">
                    {{ to = sumkazakhstan ; ''}} {{ max = sum ; '' }}
                    <ods-timer stop-condition=""
                               delay="delay"
                               auto-start="true"
                               exec="(from < to ? from = ((((from + ((to || 0) / nbticks)) * 100) | math : 'round') / 100 | min : to) : undefined);
                                     (tick = tick + 1);
                                     (tick % reloadeverynbtick == 0 ? from = 0 : undefined); ">
                    </ods-timer>
                    <ods-gauge display-mode="circle" value="from" max="max"></ods-gauge>
                    <p class="kpi-description">
                        {{ from | number : 0 }} tons of Uranium produced in Kazakhstan (out of {{ max |
                        number }} in total)
                    </p>
                </div>
            </div>
        </div>
    </div>
</ods-dataset-context>
/* Variables & Shared classes
========================================================================== */
.row-equal-height {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Fix for early content wrapping in Safari*/
.row-equal-height:before,
.row-equal-height:after {
    content: normal;
}

/* 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;
}

.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;
}

/* ODS-Gauge
========================================================================== */
.odswidget-gauge--circle .odswidget-gauge__svg {
    -webkit-transform: rotate(
            -90deg
    );
    transform: rotate(
            -90deg
    );
    height: 100%;
}

.kpi-animated .odswidget-gauge__svg-filler {
    fill: none;
    stroke-width: 8px;
    stroke: var(--highlight);
    -webkit-transition: stroke-dasharray 0.1s;
    transition: stroke-dasharray 0.1s;
}

.odswidget-gauge {
    display: flex;
    height: 100%;
    width: 100%;
}