Présentation - Configuration des résultats

Le concepteur de présentation est utilisé pour personnaliser la manière dont vos résultats seront affichés.

Il y a trois objets différents à distinguer :

• Groupe de colonnes : c'est un ensemble de colonnes qui sont soit fixes, soit répétées (boucle) en fonction d'une condition.
• Column : Colonne unique qui peut être triée.
• Cellule : c'est là que le contenu réel est affiché.

Configurer le groupe de colonnes

Vous pouvez soit appuyer sur l'icône plus pour ajouter un nouveau groupe de colonnes, soit éditer à côté de l'en-tête de colonne.

Ici, vous pouvez choisir entre deux types :

• Correction : Les colonnes de ce groupe ne s'afficheront qu'une seule fois.
• Dynamique : toutes les colonnes de ce groupe doivent être répétées N fois. N est basé dynamiquement sur les résultats disponibles. La plupart du temps, vous voulez choisir le niveau 1, ce qui signifie que pour chaque tour, toutes les colonnes de ce groupe seront répétées.

Vous pouvez également définir un en-tête. Lorsque vous utilisez le type dynamique, il y a également une variable i qui indique l'index de la boucle et est utile pour afficher le nombre actuel de laps.

Configurer la colonne

Vous pouvez maintenant ajouter ou éditer une colonne. N'oubliez pas qu'il s'agit uniquement de la définition de la colonne et non du contenu de la cellule.

Vous pouvez définir l'en-tête de la colonne et définir sur quelle propriété le tri doit s'effectuer. Veuillez jeter un coup d'œil à vos calculs et prendre un identifiant à partir de là. Vous pouvez définir l'alignement général du contenu de la cellule et déplacer la colonne vers la droite ou vers la gauche.

Configurer la cellule

Nous pouvons maintenant définir le contenu de chaque cellule.

Vous pouvez choisir entre deux modèles courants : l'affichage du temps et de la vitesse. Les deux calculent la différence avec le temps le plus rapide. Vous devez d'abord choisir le calcul que vous souhaitez afficher, puis vous pouvez configurer le formatage du temps et de la vitesse. Si vous souhaitez effectuer un formatage spécial pour afficher plusieurs valeurs dans une seule colonne, vous pouvez choisir le type personnalisé.

Écrire un code personnalisé

Vous devez écrire un code personnalisé pour afficher vos calculs. La manière la plus simple d'afficher une valeur est d'inclure l'identifiant de votre calcul souhaité dans des bracelets à double courbure. Par exemple :

{{cell.biathlon.lap.duration}}

Lorsque le modèle est exécuté, cette expression est remplacée par la valeur réelle de cette ligne. Comme vous pouvez le voir, nous avons utilisé l'identifiant de notre calcul avec le préfixe "cell. préfixe. Nous découvrirons plus tard pourquoi il est utilisé et comment nous pouvons utiliser d'autres préfixes à notre avantage. Vous pouvez également utiliser le code HTML normal pour mettre en forme vos cellules. La syntaxe de ce code est décrite plus en détail ici : https://handlebarsjs.com/guide/#what-is-handlebars.

Le simple fait d'afficher une valeur unique n'est pas utile. La plupart du temps, nous voulons comparer la valeur à quelque chose d'autre. C'est là que notre préfixe entre en jeu. Avec le préfixe "colonne", vous obtiendrez toutes les valeurs pour l'identifiant donné. Bien entendu, il s'agira d'un tableau, nous devons donc l'agréger d'une manière ou d'une autre. Vous pouvez utiliser l'une des fonctions ci-dessous. Faisons un exemple :

{{max column.biathlon.lap.speed.avg}}

Il sortira à la vitesse moyenne maximale.

Pour vous simplifier la vie, nous avons inclus des fonctions supplémentaires :

• eq arg1 arg2: Equal
• ne arg1 arg2: Pas égal
• lt arg1 arg2: Moins de
• gt arg1 arg2: Greater than
• lte arg1 arg2: Moins que ou égal à
• gte arg1 arg2: Plus grand que ou égal à
• et arg1 ... : Logical and
• ou arg1 ... : Logical ou
• add arg1 arg2: Mathematical +
• sub arg1 arg2: Mathematical -
• mul arg1 arg2: Mathematical *
• div arg1 arg2: Mathématiques /
• mod arg1 arg2: % mathématique
• min arg1 ... : Minimum de toutes les valeurs
• max arg1 ... : Maximum de valeurs
• avg arg1 ... : Moyenne des valeurs
• sum arg1 ... : Somme des valeurs
• range num Créer un tableau avec des éléments 0 - num.
• filter arr val opt: Filtre un tableau pour une valeur donnée. Opt peut être utilisé pour définir la propriété lik prop="test".
• filterMap arr1 arr2 val opt: Même filtre que celui où la condition est appliquée à arr1 et arr2 sera retournée.
• round number places: Round num to places décimales.
• date val fmt Formats : Formats la date donnée (timestamp unix) sur la base du format donné. Les formateurs suivants sont disponibles : https://date-fns.org/v3.6.0/docs/format
• perc val1 val2 fmt Gets the percentage difference between val1 et val2. Par défaut, il s'agira du changement relatif, mais si vous le souhaitez, vous pouvez définir une valeur absolue. fmt to "absolu".
• dateDiff val1 val2 fmt Gets the difference between to dates/times with a given format. Cela évite les problèmes liés au calcul de la différence puis à la mise en forme de la valeur.

Exemples de cellules

Convertissez m/s en km/h et arrondissez à la décimale près :

{{round (mul cell.generic.lap.speed.max 3.6) 1}} km/h

Différence de durée. Il affichera la durée et calculera la différence avec la durée la plus proche. Il masquera la différence si elle est nulle.

‍{{#if (gt (sub cell.generic.lap.duration (min column.generic.lap.duration)) 0)}}

   <span style="color:#DB3100;font-size:10px;margin-right:6px;font-weight:bold">+{{dateDiff cell.generic.lap.duration (min column.generic.lap.duration) "s.SS"}}</span>

{{/if}}

{{date cell.generic.lap.duration "s.SS"}}

Même chose que ci-dessus mais avec la vitesse. ‍
{{#if (gt (sub (max column.generic.lap.sec3.speed.max) cell.generic.lap.sec3.speed.max) 0)}}

<span style="color:#DB3100;font-size:10px;margin-right:6px;font-weight:bold">-{{round (sub (max column.generic.lap.sec3.speed.max) cell.generic.lap.sec3.speed.max) 1}}</span>

{{/if}}

{{round (mul cell.generic.lap.sec3.speed.max 3.6) 1}} km/h

‍