KPIs – Codelibrary

KPI Card

Card to show off metrics and values. Has an icon, the KPI number and a small descriptive text.

<div class="row">
    <h2>
        Adaptive height
    </h2>
</div>
<div class="row">
    <div class="col-md-4">
        <!-- KPI box component -->
        <div class="kpi-card">
            <i class="kpi-icon fa fa-gitlab" aria-hidden="true"></i>
            <p class="kpi-title">
                5,983
            </p>
            <p class="kpi-description">
                Dignissim suspendisse in est ante in nibh nisl tincidunt eget
            </p>
        </div>
    </div>
    <div class="col-md-4">
        <!-- KPI box component -->
        <div class="kpi-card">
            <i class="kpi-icon fa fa-houzz" aria-hidden="true"></i>
            <p class="kpi-title">
                18.3k
            </p>
            <p class="kpi-description">
                Quam vulputate dignissim suspendisse in est ante in nibh. Faucibus nisl tincidunt eget nullam non nisi est sit amet
            </p>
        </div>
    </div>
    <div class="col-md-4">
        <!-- KPI box component -->
        <div class="kpi-card">
            <i class="kpi-icon fa fa-houzz" aria-hidden="true"></i>
            <p class="kpi-title">
                8.3k
            </p>
            <p class="kpi-description">
                Quam vulputate
            </p>
        </div>
    </div>
</div>


<div class="row">
    <h2>
        Same height
    </h2>
</div>
<div class="row row-equal-height">
    <div class="col-md-4">
        <!-- KPI box component -->
        <div class="kpi-card">
            <i class="kpi-icon fa fa-gitlab" aria-hidden="true"></i>
            <p class="kpi-title">
                5,983
            </p>
            <p class="kpi-description">
                Dignissim suspendisse in est ante in nibh nisl tincidunt eget
            </p>
        </div>
    </div>
    <div class="col-md-4">
        <!-- KPI box component -->
        <div class="kpi-card">
            <i class="kpi-icon fa fa-houzz" aria-hidden="true"></i>
            <p class="kpi-title">
                18.3k
            </p>
            <p class="kpi-description">
                Quam vulputate dignissim suspendisse in est ante in nibh. Faucibus nisl tincidunt eget nullam non nisi est sit amet
            </p>
        </div>
    </div>
    <div class="col-md-4">
        <!-- KPI box component -->
        <div class="kpi-card">
            <i class="kpi-icon fa fa-houzz" aria-hidden="true"></i>
            <p class="kpi-title">
                8.3k
            </p>
            <p class="kpi-description">
                Quam vulputate
            </p>
        </div>
    </div>
</div>

/* Variables & Shared classes
========================================================================== */
:root {
    --secondary-color: #142E7B;
}
.row-equal-height {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.row-equal-height > * {
    flex-grow: 1; /* fill the space, take all the available width */
    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%;
}

An ods-aggregation example

Count the number of record of a dataset or compute the average/sum/min/max of a numeric field. On the left, the number of US hospitals. On the right, the average humidity in France recorded these past 11 years.

For more information about how to compute metrics, see ods-aggregation resource.

Dataset in use: us-hospitals (See it on userclub domain)

Fields in use: none: count function

Dataset in use: observation-synop (See it on userclub domain)

Fields in use:

u (numeric)
100
69
87
73

<div class="row">
    <div class="col-sm-offset-2 col-sm-4">
        <ods-dataset-context context="ushospitals"
                             ushospitals-domain="userclub"
                             ushospitals-dataset="us-hospitals">
            <!-- KPI box component -->
            <div class="kpi-card">
                <i class="kpi-icon fa fa-hospital-o" aria-hidden="true"></i>
                <p class="kpi-title"
                   ods-aggregation="count"
                   ods-aggregation-context="ushospitals"
                   ods-aggregation-function="COUNT">
                    {{ count | number }}
                </p>
                <p class="kpi-description">
                    Number of hospitals
                </p>
            </div>
        </ods-dataset-context>
    </div>

    <div class="col-sm-4">
        <!-- KPI box component -->
        <ods-dataset-context context="observationsynop"
                             observationsynop-dataset="observation-synop"
                             observationsynop-domain="userclub">
            <div class="kpi-card">
                <i class="kpi-icon fa fa-tint" aria-hidden="true"></i>
                <p class="kpi-title"
                   ods-aggregation="avghumidity"
                   ods-aggregation-context="observationsynop"
                   ods-aggregation-function="AVG"
                   ods-aggregation-expression="u">
                    {{ avghumidity | number : 1}}
                </p>
                <p class="kpi-description">
                    Average humidity (%)
                </p>
            </div>
        </ods-dataset-context>
    </div>
</div>

/* Variables & Shared classes
========================================================================== */
:root {
    --secondary-color: #142E7B;
}
.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%;
}
.kpi-description-detail {
    opacity: 0.9;
    font-style: italic;
    font-size: 0.9em;
    margin-top: 0.8em;
}

An ods-adv-analysis example

Use ods-adv-analysis widget working with ODS Explore API V2 to display advanced calculations on your pages. In the select parameter, you can enter an advanced query to make, following the ODSQL select clause.

For more information about how to compute metrics and use the other parameters of ods-adv-analysis, see ods-adv-analysis documentation.

In the exemple, on the first row, we display the percentage of positive tests of Covid-19 in Auvergne-Rhône-Alpes; and on the second row, we display simple aggregations all made in one request through ods-adv-analysis.

Dataset in use: donnees-relatives-aux-resultats-des-tests-virologiques-covid-19-france (See it on userclub domain)

Fields in use:

nb_pos (numeric)	nb_tests (numeric)	reg_name (text)
100	390	Auvergne-Rhône-Alpes
69	120	Occitanie
87	93	Normandie
73	240	Occitanie

Dataset in use: observation-synop (See it on userclub domain)

Fields in use:

u (numeric)
100
69
87
73

<div class="row">
    <div class="col-sm-offset-4 col-sm-4">
        <ods-dataset-context context="stattests"
                             stattests-domain="userclub"
                             stattests-dataset="donnees-relatives-aux-resultats-des-tests-virologiques-covid-19-france">
            <!-- KPI box component -->
            <div class="kpi-card">
                <i class="kpi-icon fa fa-hospital-o" aria-hidden="true"></i>
                <p class="kpi-title"
                   ods-adv-analysis="analysis"
                   ods-adv-analysis-context="stattests"
                   ods-adv-analysis-select="sum(nb_pos)/sum(nb_tests)*100 as percentage"
                   ods-adv-analysis-where="reg_name LIKE 'Auvergne-Rhône-Alpes'">
                    {{ analysis[0].percentage | number : 2 }}%
                </p>
                <p class="kpi-description">
                    Number of positive tests in Auvergne-Rhône-Alples
                </p>
            </div>
        </ods-dataset-context>
    </div>
</div>
<ods-dataset-context context="observationsynop"
                     observationsynop-dataset="observation-synop"
                     observationsynop-domain="userclub">
    <div class="row"
         ods-adv-analysis="analysis"
         ods-adv-analysis-context="observationsynop"
         ods-adv-analysis-select="avg(u) as humidity, max(ff) as wind">
        <div class="col-sm-offset-2 col-sm-4">
            <!-- KPI box component -->
            <div class="kpi-card">
                <i class="kpi-icon fa fa-tint" aria-hidden="true"></i>
                <p class="kpi-title">
                    {{ analysis[0].humidity | number : 1}}
                </p>
                <p class="kpi-description">
                    Average humidity (%)
                </p>
            </div>
        </div>
        <div class="col-sm-4">
            <!-- KPI box component -->
            <div class="kpi-card">
                <i class="kpi-icon fa fa-flag" aria-hidden="true"></i>
                <p class="kpi-title">
                    {{ analysis[0].wind | number : 1}}
                </p>
                <p class="kpi-description">
                    Max wind speed (m/s)
                </p>
            </div>
        </div>
    </div>
</ods-dataset-context>

/* Variables & Shared classes
========================================================================== */
:root {
    --secondary-color: #142E7B;
}
.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%;
}
.kpi-description-detail {
    opacity: 0.9;
    font-style: italic;
    font-size: 0.9em;
    margin-top: 0.8em;
}

Flip KPI

This card flip on user interaction to reveal more details about the dataset and how it is computed. This component will stretch vertically according to content size. If your content is too large, the horizontal overflow will be hidden on the back face.

Dataset in use: us-hospitals (See it on userclub domain)

Fields in use: none: count function

<div class="row">
    <div class="col-sm-offset-4 col-sm-4">
        <ods-dataset-context context="ushospitals"
                             ushospitals-domain="userclub"
                             ushospitals-dataset="us-hospitals">
            <!-- KPI box component -->
            <div class="card-flip"

                 ng-init="isFlipped = false"
                 ng-click="isFlipped = !isFlipped"
                 ng-class="{'is-flipped': isFlipped}"

                 ods-aggregation="count"
                 ods-aggregation-context="ushospitals"
                 ods-aggregation-function="COUNT">
                <div class="kpi-card card-face card-face-front">
                    <div class="kpi-card-top"></div>
                    <div class="kpi-card-middle">
                        <i class="kpi-icon fa fa-hospital-o" aria-hidden="true"></i>
                        <p class="kpi-title">
                            {{ count | number }}
                        </p>
                        <p class="kpi-description">
                            Number of hospitals
                        </p>
                    </div>
                    <div class="kpi-card-bottom">
                        <p class="hint">"How is it computed? 👉"</p>
                    </div>
                </div>
                <div class="kpi-card card-face card-face-back">
                    <p>
                        <strong>{{ count | number }}</strong> is the count of all records found in the dataset: 
                    </p>
                    <a href="{ushospitals.domainUrl}}/explore/dataset/{ushospitals.dataset.datasetid}}/information/">
                        {{ ushospitals.dataset.metas.title }}
                    </a>
                </div>
            </div>
        </ods-dataset-context>
    </div>
</div>

/* Variables & Shared classes
========================================================================== */
:root {
    --secondary-color: #142E7B;
}

/* KPI Card
========================================================================== */
.kpi-card {
    background-color: var(--boxes-background);
    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%;
}

.kpi-description-detail {
    opacity: 0.9;
    font-style: italic;
    font-size: 0.9em;
    margin-top: 0.8em;
}

/* Flip component
========================================================================== */
.kpi-card.card-face-front {
    justify-content: space-between;
}

.card-flip {
    display: flex;
    align-items: stretch;
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    -o-transition: transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
    -webkit-perspective: 1200px;
    perspective: 1200px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    border-radius: 4px;
    margin-bottom: 20px;
}

.card-face {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 100%;
    margin-right: -100%;
    margin-bottom: 0; /* remove kpi-card margin bottom */
}

.card-face-back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12);
    overflow-x: hidden;
}

.card-flip.is-flipped {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.card-flip:hover {
    -webkit-transform: rotateY(5deg);
    transform: rotateY(5deg);
    -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12);
}

.card-flip.is-flipped:hover {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.kpi-card-bottom {
    align-self: flex-end;
    margin: 16px -27px -27px 0;
}

p.hint {
    color: darkgrey;
}

KPI sync flip

By default flip kpi will be independant. If you want multiple KPIs to all to flip when one is clicked, you have lift the state variable to a containing element.

Dataset in use: us-hospitals (See it on userclub domain)

Fields in use: none: count function

<div class="row" ng-init="variables = {}">
    <div class="col-sm-offset-2 col-sm-4">
        <ods-dataset-context context="ushospitals"
                             ushospitals-domain="userclub"
                             ushospitals-dataset="us-hospitals">
            <!-- KPI box component -->
            <div class="card-flip"

                 ng-click="variables.isFlipped = !variables.isFlipped"
                 ng-class="{'is-flipped': variables.isFlipped}"

                 ods-aggregation="count"
                 ods-aggregation-context="ushospitals"
                 ods-aggregation-function="COUNT">
                <div class="kpi-card card-face card-face-front">
                    <div class="kpi-card-top"></div>
                    <div class="kpi-card-middle">
                        <i class="kpi-icon fa fa-hospital-o" aria-hidden="true"></i>
                        <p class="kpi-title">
                            {{ count | number }}
                        </p>
                        <p class="kpi-description">
                            Number of hospitals
                        </p>
                    </div>
                    <div class="kpi-card-bottom">
                        <p class="hint">"How is it computed? 👉"</p>
                    </div>
                </div>
                <div class="kpi-card card-face card-face-back">
                    <p>
                        <strong>{{ count | number }}</strong> is the count of all records found in the dataset:
                    </p>
                    <a href="{ushospitals.domainUrl}}/explore/dataset/{ushospitals.dataset.datasetid}}/information/">
                        {{ ushospitals.dataset.metas.title }}
                    </a>
                </div>
            </div>
        </ods-dataset-context>
    </div>

    <div class="col-sm-4">
        <ods-dataset-context context="ushospitals"
                             ushospitals-domain="userclub"
                             ushospitals-dataset="us-hospitals">
            <!-- KPI box component -->
            <div class="card-flip"

                 ng-click="variables.isFlipped = !variables.isFlipped"
                 ng-class="{'is-flipped': variables.isFlipped}"

                 ods-aggregation="count"
                 ods-aggregation-context="ushospitals"
                 ods-aggregation-function="COUNT">
                <div class="kpi-card card-face card-face-front">
                    <div class="kpi-card-top"></div>
                    <div class="kpi-card-middle">
                        <i class="kpi-icon fa fa-hospital-o" aria-hidden="true"></i>
                        <p class="kpi-title">
                            {{ count | number }}
                        </p>
                        <p class="kpi-description">
                            Number of hospitals
                        </p>
                    </div>
                    <div class="kpi-card-bottom">
                        <p class="hint">"How is it computed? 👉"</p>
                    </div>
                </div>
                <div class="kpi-card card-face card-face-back">
                    <p>
                        <strong>{{ count | number }}</strong> is the count of all records found in the dataset:
                    </p>
                    <a href="{ushospitals.domainUrl}}/explore/dataset/{ushospitals.dataset.datasetid}}/information/">
                        {{ ushospitals.dataset.metas.title }}
                    </a>
                </div>
            </div>
        </ods-dataset-context>
    </div>
</div>

/* Variables & Shared classes
========================================================================== */
:root {
    --secondary-color: #142E7B;
}

/* KPI Card
========================================================================== */
.kpi-card {
    background-color: var(--boxes-background);
    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%;
}

.kpi-description-detail {
    opacity: 0.9;
    font-style: italic;
    font-size: 0.9em;
    margin-top: 0.8em;
}

/* Flip component
========================================================================== */
.kpi-card.card-face-front {
    justify-content: space-between;
}

.card-flip {
    display: flex;
    align-items: stretch;
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    -o-transition: transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
    -webkit-perspective: 1200px;
    perspective: 1200px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    border-radius: 4px;
    margin-bottom: 20px;
}

.card-face {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 100%;
    margin-right: -100%;
    margin-bottom: 0; /* remove kpi-card margin bottom */
}

.card-face-back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12);
    overflow-x: hidden;
}

.card-flip.is-flipped {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.card-flip:hover {
    -webkit-transform: rotateY(5deg);
    transform: rotateY(5deg);
    -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12);
}

.card-flip.is-flipped:hover {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.kpi-card-bottom {
    align-self: flex-end;
    margin: 16px -27px -27px 0;
}

p.hint {
    color: darkgrey;
}

Components - KPIs

KPI Card

An ods-aggregation example

An ods-adv-analysis example

Flip KPI

KPI sync flip