Stat

Le composant stat met en valeur un nombre clé.

Classes du composant

Modificateurs de tailles

• .stat--sm : Small
• .stat--md : Medium
• .stat--lg : Large
• .stat--xl : Extra-large

Animation

Par défaut, le composant est statique. Mais il peut présenter une animation d'incrémentation à l'aide d'attributs :

1. Ajouter l'attribut [data-animation="counter"] pour déclarer l'utilisation de cette animation.
2. Ajouter l'attribut [data-animation-settings="…"] pour définir les paramètres de l'animation. La valeur de cet attribut est un objet JSON. Dans le cas de l'animation counter, les paramètres sont les suivants :
   • target : Nombre cible à atteindre à la fin de l'animation
   • triggerOn : Indique quand l'animation doit se déclencher. Deux valeurs possibles :
     • viewport-enter-once pour lancer l'animation quand l'élément entre dans le viewport pour la première fois
     • viewport-enter-each pour relancer l'animation à chaque fois que l'élément entre dans le viewport
   • decimals : Indique le nombre de décimales à afficher

<%@ tag trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="resources" uri="resources" %>

<%@ attribute name="size" required="false" type="java.lang.String" description="Taille (défaut : sm)" %>
<%@ attribute name="label" required="true" type="java.lang.String" description="Libellé de la statistique" %>
<%@ attribute name="value" required="true" type="java.lang.Double" description="Nombre affiché" %>
<%@ attribute name="unit" required="false" type="java.lang.String" description="Unité affichée" %>
<%@ attribute name="status" required="false" type="java.lang.String" description="Statut de la statistique (défaut : neutral)" %>
<%@ attribute name="animation" required="false" type="java.lang.String" description="Mode d'animation de la statistique (valeurs possibles : none (défaut), viewport-enter-each, viewport-enter-once)" %>
<%@ attribute name="decimalPlaces" required="false" type="java.lang.Integer" description="Nombre de décimales affichées après la virgule (défaut : 0)" %>

<c:set var="statusClass" value="stat--neutral" scope="page" />
<c:if test="${not empty pageScope.status}">
    <c:set var="statusClass" value="stat--${pageScope.status}" scope="page" />
</c:if>

<c:set value="stat ${pageScope.statusClass}" var="classes" />

<c:set var="attributes">
    <c:forEach items="${dynattrs}" var="a">
        <c:choose>
            <c:when test="${a.key == 'class'}">
                <c:set value="${classes} ${a.value}" var="classes"/>
            </c:when>
            <c:otherwise>${a.key}="${a.value}" </c:otherwise>
        </c:choose>
    </c:forEach>
</c:set>

<c:set var="decimals" value="${empty pageScope.decimalPlaces ? 0 : pageScope.decimalPlaces}" scope="page" />
<c:set var="formattedValue">
    <fmt:formatNumber value="${pageScope.value}" minFractionDigits="${pageScope.decimals}" maxFractionDigits="${pageScope.decimals}" groupingUsed="true" />
</c:set>

<c:if test="${not empty pageScope.animation and pageScope.animation ne 'none'}">
    <c:set var="animationAttributes" scope="page">aria-label="<c:out value="${pageScope.formattedValue}" />" data-animation="counter" data-animation-settings='{ "target": <c:out value="${pageScope.value}" />, "triggerOn": "<c:out value="${pageScope.animation}" />", "decimals": <c:out value="${pageScope.decimals}" /> }'</c:set>
</c:if>

<jsp:doBody var="comment" scope="page" />

<div class="${pageScope.classes}" ${pageScope.attributes}>
    <div class="stat__label">
        <c:out value="${pageScope.label}" />
    </div>
    <div class="stat__value">
        <span class="stat__number js-value" ${pageScope.animationAttributes}>
            <c:out value="${pageScope.formattedValue}" />
        </span>
        <c:if test="${not empty pageScope.unit}">
            <span class="stat__unit">
                <c:out value="${pageScope.unit}" />
            </span>
        </c:if>
    </div>
    <c:if test="${not empty comment}">
        <div class="stat__comment">
            <c:out value="${pageScope.comment}" escapeXml="false" />
        </div>
    </c:if>
</div>

<c:if test="${pageScope.animation eq 'viewport-enter-once' or pageScope.animation eq 'viewport-enter-each'}">
    <resources:addScript path="/static/kuik/stat/stat.js" type="module" />
</c:if>