Le widget « Horloge » permet d'afficher l'heure actuelle. Un fuseau horaire peut être configuré séparément pour chaque widget. S'il est utilisé conjointement avec un widget « Historique des pannes », l'heure affichée par l'horloge suit celle de la panne.

Modification du widget horloge

Chaque widget d'horloge peut être configuré avec un fuseau horaire distinct.

Les fuseaux horaires valides doivent respecter le format défini dans la base de données tz ou utiliser les abréviations courantes telles que CET ou GMT.

Couleur des chiffres de l'horloge

Couleur des segments inactifs

Pour ce faire, ajoutez le style suivant au tableau de bord concerné (pour plus de détails, consultez : https://skoorag.atlassian.net/wiki/spaces/DOC/pages/494196/Dashboards+Guide#Edit-dashboard )

.widget.clock svg path {
  fill: #979ca1;
}

Couleur des segments actifs

Pour ce faire, ajoutez le style suivant au tableau de bord cible (pour plus de détails, consultez : Modifier un tableau de bord)

.widget.clock svg path[class*="active"] {
  fill: #ff0000;
}

En fonction du fuseau horaire actuellement utilisé

La solution compare le décalage UTC actuel avec celui défini sur le widget d’horloge. S’ils sont identiques, elle attribue la classe CSS « local » au widget. Une règle CSS dans le style du tableau de bord colore les chemins actifs locaux en conséquence.

1. Le paramètre ci-dessous attribue la classe CSS « local » à l’horloge si son fuseau horaire correspond à « europe/zurich »

 ${moment().utcOffset() == moment().tz("europe/zurich").utcOffset() ? "local" : ""}

2. L'utilisation du style ci-dessous dans les paramètres du tableau de bord permettrait uniquement d'appliquer la classe CSS « local » au widget horloge

.widget.clock.local svg path[class*="active"] {
  fill: #0a87f0;
}