Presentazione - Configurazione dei risultati

Il designer di presentazione serve a personalizzare la visualizzazione dei risultati.

Si tratta di tre oggetti diversi da distinguere:

• Gruppo di colonne: è un insieme di colonne fisse o ripetute (loop) in base a una condizione.
• Colonna: Singola colonna che può essere ordinata.
• Cella: qui viene mostrato il contenuto effettivo.

Configurare il gruppo di colonne

Premere l'icona più per aggiungere un nuovo gruppo di colonne o modificare accanto all'intestazione della colonna.

Qui è possibile scegliere tra due tipi:

• Corretto: le colonne di questo gruppo vengono visualizzate una sola volta.
• Dinamico: tutte le colonne di questo gruppo saranno ripetute N volte. N si basa dinamicamente sui risultati disponibili. Di solito si sceglie il livello 1, che significa che per ogni giro verranno ripetute tutte le colonne di questo gruppo.

È anche possibile definire un'intestazione. Quando si usa il tipo dinamico, c'è anche una variabile i che indica l'indice del ciclo ed è utile per visualizzare il numero attuale di giri.

Configurare la colonna

Ora è possibile aggiungere o modificare una colonna. Ricordate che questa è solo la definizione della colonna e non il contenuto della cella.

È possibile impostare l'intestazione della colonna e definire in base a quale proprietà deve avvenire l'ordinamento. Si prega di dare un'occhiata ai calcoli e di prendere un identificatore da lì. È possibile definire l'allineamento complessivo del contenuto della cella e spostare la colonna a destra o a sinistra.

Configurare la cella

Ora possiamo definire il contenuto di ciascuna cella.

È possibile scegliere tra due modelli comunemente utilizzati: visualizzazione del tempo e della velocità. Entrambi calcolano la differenza rispetto al giro più veloce. Per prima cosa è necessario scegliere il calcolo che si desidera visualizzare, quindi è possibile configurare la formattazione di tempo e velocità. Se si desidera eseguire una formattazione speciale per la visualizzazione di più valori in una colonna, è possibile scegliere il tipo personalizzato.

Scrivere codice personalizzato

È necessario scrivere codice personalizzato per visualizzare i calcoli. Il modo più semplice per visualizzare un valore è racchiudere l'identificatore del calcolo desiderato tra doppie parentesi graffe. Ad esempio:

{{cell.biathlon.lap.duration}}

Quando il modello viene eseguito, questa espressione viene sostituita con il valore effettivo di questa riga. Come si può vedere, abbiamo usato l'identificatore del nostro calcolo con il prefisso "cell.". con il prefisso "cella". Scopriremo più avanti perché viene usato e come possiamo usare altri prefissi a nostro vantaggio. È anche possibile utilizzare il normale codice HTML per formattare le celle. La sintassi di questo codice è descritta in dettaglio qui: https://handlebarsjs.com/guide/#what-is-handlebars.

La sola visualizzazione di un singolo valore non è utile. Il più delle volte vogliamo confrontare il valore con qualcos'altro. È qui che entra in gioco il prefisso. Con il prefisso "column" si otterranno tutti i valori per l'identificatore dato. Naturalmente si tratterà di un array, quindi dobbiamo aggregare in qualche modo questo array. È possibile utilizzare una delle funzioni riportate di seguito. Facciamo un esempio:

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

Fornirà la velocità media massima.

Per semplificare la vita, abbiamo incluso ulteriori funzioni:

• eq arg1 arg2Pari
• ne arg1 arg2Non uguale
• lt arg1 arg2Meno di
• gt arg1 arg2Maggiore di
• lte arg1 arg2Inferiore o uguale
• gte arg1 arg2Maggiore o uguale
• e arg1 ... Logico e
• o arg1 ... Logico o
• aggiungere arg1 arg2: Matematica +
• sub arg1 arg2: Matematica -
• mul arg1 arg2: Matematica
• div arg1 arg2: Matematica /
• mod arg1 arg2Matematica %
• min arg1 ... Minimo di tutti i valori
• max arg1 ... Massimo dei valori
• avg arg1 ... Media dei valori
• somma arg1 ... Somma dei valori
• gamma num Crea un array con 0 - num elementi.
• filtro arr val optFiltra un array per un determinato valore. Opt può essere usato per definire la proprietà lik prop="test".
• filterMap arr1 arr2 val opt: come il filtro, ma la condizione viene applicata ad arr1 e viene restituito arr2.
• arrotonda num posti: Rotonda num a luoghi decimali.
• data val fmt Formatta la data data (unix timestamp) in base al formato indicato. Sono disponibili i seguenti formattatori: https://date-fns.org/v3.6.0/docs/format
• perc val1 val2 fmt Ottiene la differenza percentuale tra val1 e val2. L'impostazione predefinita sarà la modifica relativa, ma se si desidera una modifica assoluta si può impostare fmt a "assoluto".
• dataDiff val1 val2 fmt Ottiene la differenza tra due date/ore con un determinato formato. In questo modo si evitano i problemi legati al calcolo della differenza e alla successiva formattazione del valore.

Esempi di cellule

Converte i m/s in km/h e li arrotonda a un decimale:

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

Differenza di durata. Visualizza la durata e calcola la differenza rispetto alla durata più veloce. Se la differenza è zero, viene nascosta.

‍{{#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"}}

Come sopra, ma con la velocità. ‍
{{#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}}

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

‍