Parcourir les graphiques par échelles de temps

Dans les graphiques, il pourrait être intéressant de les parcourir par échelles de temps dans l’esprit de cette maquette


Des boutons gauches et droites pour se déplacer dans les données.
Cela pourrait résoudre également l’accès aux données de plus d’une année comme évoqué ici :

J’aime beaucoup cette idée. C’est le plus « logique » dans ma situation où je me sers de graphiques pour suivre ma conso électrique. Cela permettrait de passer d’un jour au précédent / suivant facilement (sur mobile notamment).

J’ai plus de vote mais je soutiens !

2 « J'aime »

Propre ! Carrément :slight_smile:

Par contre le design est à revoir ^^

J’aime bien ce que fait HelloWatt :

Par contre on n’a pas exactement le même cas d’usage donc à adapter, mais ça pourrait fonctionner comme ça

Rapide maquette :

Sachant que si l’utilisateur appuie sur la flèche de gauche, il faut changer le « Dernières 24 heures » en « 15/01 08:43 - 16/01 8:43 » je pense

5 « J'aime »

@pierre-gilles J’ai un peu de temps à partir de demain, et je voudrais explorer cette demande de fonctionnalité pour affiner le besoin. J’ai deux questions avant de ma lancer :

  • Qu’est-ce qui manque concrètement dans la « maquette rapide » que tu as proposée le 17 février ? J’ai quelques idées, mais je veux bien aussi que tu me dises, avec ton regard de développeur, ce que tu as besoin de mieux cerner avec une maquette améliorée…
  • il s’agit d’apporter des changement autour des graphiques, mais je ne maîtrise pas ce que le composant qui dessine les graphiques (j’ai oublié son nom) permet de faire ou pas. En particulier, est-ce que tout ce que je proposerai dans la maquette doit se situer en dehors de la zone dessinée pour le graphique, ou est-ce que ça peut se placer dans le graphique (par exemple, une flèche à droite et une à gauche des nombres min et max de l’axe des abscisses) ?

Génial :smiley:

Il faut réfléchir à toutes les interactions :slight_smile: Exemple: Là sur ma maquette rapide, on affiche « dernières 24 heures ». Et si je veux passer en « dernier mois », je fais comment ?

En fait il ne doit y avoir aucun doutes, la seule différence entre la maquette et le développement final c’est que le développement final est dans Gladys :smiley:

ApexCharts !

Il faut explorer la documentation d’ApexChart et ne faire que des propositions possibles :slight_smile:

1 « J'aime »

Bonjour !
Alors j’ai réfléchi à cette demande d’évolution. Je fais une proposition graphique ci-dessous pour montrer comment se placeront les nouveaux éléments permettant la navigation dans le temps. Et j’ajoute surtout dans un deuxième message une liste de règles à implémenter pour que la navigation soit la plus 'logique’ possible.

Les nouveautés ajoutées:

  • ajout d’une ligne avec deux flèches de navigation gauche et droite, et au centre le libellé de la période active (c’est la proposition de @pierre-gilles plus haut…)
  • ajout d’un élément pour revenir à « maintenant »
  • ajout d’un élément pour passer de ‹ régulier › à ‹ glissant › (j’explique juste en dessous…)
  • dans la liste de choix de période, ‹ 30 jours › devient ‹ 1 mois ›
  • dans la liste de choix de période, suppression des mots « dernier/dernière/… »

La case à cocher est une proposition, parce que je crois que la navigation, par exemple dans la période ‹ 7 jours ›, devrait apporter avoir deux fonctionnements possibles :

  • si on est par exemple jeudi 3/4 à 18h25, je peux vouloir naviguer sur des périodes de 7 jours se terminant toutes un jeudi à 18h25. C’est ce que j’appelle le mode ‹ glissant ›.
  • ou on peut préférer naviguer sur des périodes de 7 jours qui iront toutes du lundi 0h au dimanche 24h. C’est ce que j’appelle le mode ‹ régulier ›.

=> Et je propose donc l’ajout de pouvoir basculer d’un mode à l’autre.

Note 1 : Les éléments se placent tous au dessus du graphique, donc je pense que c’est indépendant de ce que Apexcharts sait faire ou non…
Note 2 : Pour revenir à maintenant et pour la bascule ‹ régulier/glissant ›, je n’ai pas fait de choix visuel : bouton, texte cliquable, icone, checkbox, liste déroulante,… Je me dis que le développeur saura faire le bon choix en fonction de la place dispo…

Visuellement, ça pourrait donner ça :

1 « J'aime »

Les règles (en gras ci-dessous) sont assez peu nombreuses, je crois, pour que le code à mettre en place ne soit pas une usine à gaz. Mais je donne pas mal de précisions et d’exemples, pour que chacun puisse se faire une idée et repère des comportements qui ne seraient pas pertinents. Je suis preneur de vos retours, pour affiner !

====== Navigation avec les flèches : ======

  • Quand on clique sur la flèche gauche, la période affichée est décalée d’une période dans le passé (la nouvelle date de fin est l’ancienne date de début)
  • Quand on clique sur la flèche droite, la période affichée est décalée d’une période dans le futur (la nouvelle date de début est l’ancienne date de fin)

Note : Deux actions successives flèche gauche puis flèche droite (ou l’inverse) sont ‹ symétriques › ; cela ramène l’axe des abscisses exactement sur la même période

Cas particulier : Si la date de fin est >= maintenant, la flèche de navigation droite devient inactive (pour ne pas aller explorer dans le futur qui n’a pas encore de données)

====== Changement de mode ‘régulier/glissant’ : ======

En mode régulier, les périodes sont définis de la façon suivante :

  • 1h : la période est une heure entière, par exemple de 8h à 9h
  • 12h : la période est une demi-journée entière, donc de 0h à 12h ou de 12h à 24h
  • 24h : la période est une journée entière, de 0h à 24h
  • 7 jours : la période est une semaine entière, de lundi 0h à dimanche 24h
  • 1 mois : la période est un mois entier, par exemple du 1/1 0h au 31/1 24h, ou du 1/2 0h au 28/2 24h.
  • 3 mois : la période est un trimestre calendaire entier, par exemple du 1/4 0h au 30/6 24h
  • 1 année : la période est une année entière, du 1/1 0h au 31/12 24h

Quand on passe en mode ‹ régulier › : la nouvelle période inclut la date de fin précédente (on se décale donc un peu dans le futur)

  • Ex1 pour une période ‹ 1 jour › : l’affichage de « 2/4 18h25 à 3/4 18h25 » devient « 3/4 0h à 3/4 24h »
  • Ex2 pour une période 7 jours’ : l’affichage de « 27/3 18h25 à 3/4 18h25 » devient « 31/3 0h à 6/4 24h » (= de lundi à dimanche incluant le 3/4)

Quand on passe en mode ‹ glissant › : la nouvelle période « s’aligne » sur le jour et l’heure courante (on se décale donc un peu dans le passé)
Précision : la nouvelle date de fin sera la plus récente possible, sans dépasser la date de fin précédente

note : l’alignement sur le jour et l’heure courante permet de retomber sur ‹ maintenant › quand on naviguera avec la flèche droite…

L’alignement de la fin de période est fait de la façon suivante, selon le type de période (en prenant pour exemple que la date courante est jeudi 3 avril 18h25) :

  • 1h : la fin de période sera alignée sur xh25
  • 12h : la fin de période sera alignée sur 18h25
  • 24h : la fin de période sera alignée sur 18h25
  • 7 jours : la fin de période sera alignée sur jeudi 18h25
  • 1 mois : la fin de période sera alignée sur 3/x 18h25
  • 3 mois : la fin de période sera alignée sur 3/x 18h25, mais avec x décalé d’un multiple de 3 avec le mois courant (donc janvier, avril, juillet ou sept. dans mon exemple)
  • 1 année : la fin de période sera alignée sur 3/4 18h25

Exemples:

  • Ex1 pour une période ‹ 1 jour › : l’affichage de « 3/4 0h à 3/4 24h » devient « 2/4 18h25 à 3/4 18h25 »
  • Ex2 pour une période 7 jours’ : l’affichage de « 31/3 0h à 6/4 24h » devient « 27/3 18h25 à 3/4 18h25 » (pour se finir un jeudi)
  • Ex3 pour une période 1 mois’ : l’affichage de « 1/4 0h à 30/4 24h » devient « 3/3 18h25 à 3/4 18h25 » (pour se finir un 3 du mois)

====== Changement de type de période : ======

Quand on change la période pour l’agrandir :

  • en mode ‹ glissant ›, la date de fin n’est pas modifiée
  • en mode ‹ régulier ›, la nouvelle période inclut la date de fin précédente

Note : en général la nouvelle période plus large inclut complètement la période précédente, sauf parfois quand on part d’une période ‹ 7 jours ›

  • Ex1 : si on affiche une période ‹ 1 jour › qui est un mercredi, la période ‹ 7 jours › ira du lundi au dimanche incluant ce mercredi
  • Ex2 : si on affiche une période ‹ 7 jours › qui va de lundi 17/2 à dimanche 23/2, le passage en période ‹ 1 mois › ira du 1/2 au 28/2 (incluant donc le dimanche 23/2)
  • Ex3 (moins intuitif) : si on affiche une période ‹ 7 jours › qui va de lundi 24/2 à dimanche 2/3, le passage en période ‹ 1 mois › ira du 1/3 au 31/3 (incluant donc le dimanche 2/3)

Quand on change la période pour la réduire :

  • en mode ‹ glissant ›, la date de fin n’est pas modifiée
  • en mode ‹ régulier ›, la nouvelle période inclut la date de fin précédente.

Cas particulier : si ce changement situe la nouvelle période entièrement dans le futur, alors la nouvelle période sera en fait celle qui inclut ‹ maintenant ›.

Note : en général la nouvelle période plus réduite est incluse complètement dans la période précédente, sauf parfois quand on va vers une période ‹ 7 jours ›

  • Ex1 : si on affiche une période ‹ 7 jours › qui va de lundi à dimanche, entièrement passée, alors le passage en période ‹ 1 jour › affichera le dimanche.
  • Ex2 : si on affiche une période ‹ 7 jours › qui va de lundi à dimanche, mais qu’aujourd’hui est le mercredi de cette semaine-là, alors le passage en période ‹ 1 jour › affichera le mercredi
  • Ex3 : si on affiche une période ‹ 1 mois › qui va de samedi 1/2 à vendredi 28/2, le passage en période ‹ 7 jours › ira de lundi 24/2 à dimanche 2/3 (incluant donc le vendredi 28/2)

Un petit défaut avec la navigation en ‹ zigzag › dans 2 cas au moins :

  • En mode ‹ régulier ›, si on part d’une date assez ancienne et qu’on enchaine les changements de période ‹ 7 jours ›-‹ 1 mois ›, on va se décaler progressivement dans le futur car les mois ne finissent pas toujours un dimanche :wink: Par exemple : 6-12/1 => 1-31/1 => 27/1-2/2 => 1-28/2 => 24/2-2/3 => 1-31/3 … Mais le cas est rare, et on va finir par ‹ buter › sur un dimanche de fin de mois ou sur ‹ maintenant ›, donc ça me semble pas trop grave…
  • Idem si on alterne ‹ 7 jours ›-‹ 1 an ›. Mais c’est encore plus rare…
2 « J'aime »

Salut @StephaneB :slight_smile: Merci de t’être penché sur ce sujet !

Il y a de bonnes idées dans ta proposition, mais je pense que l’UI/UX mérite encore un peu de travail pour être plus intuitive.

Quelques retours :

  • Le bouton “RàZ” me semble un peu encombrant visuellement. Peut-être qu’on peut trouver une alternative plus discrète ?
  • Pour le bouton “régulier”, l’intention n’est pas très claire. En l’état, sans ton explication à côté, on ne comprend pas du tout à quoi il sert. L’interface doit se suffire à elle même, hors ici sans tes paragraphes de texte, je ne sais pas ce que ça fait. A voir même si c’est vraiment quelque chose qu’on veut !

Sur ce genre d’interface, qui existe déjà dans beaucoup d’applications, je pense qu’on peut vraiment s’inspirer de ce qui se fait ailleurs. Pas besoin de réinventer la roue :slight_smile: Est-ce que tu t’es basé sur des exemples concrets existants ?

Merci de prendre ce sujet, mes remarques sont franches mais rien de personnel aha !

Pas de souci, ça me va bien :wink:

Moi je le voudrais bien :wink: Mais ça ne suffit pas à en faire un besoin de la communauté, c’est sûr. Je serais intéressé par les avis des uns et des autres, en particulier ceux qui ont voté pour ce sujet…

Je comprends… Alors je ne suis pas graphiste, mais je viens d’essayer de créer des icônes pour rendre cela plus intuitif. Si il y a des graphistes dans la communauté, hésitez pas à proposer autre chose :wink:

Pour clarifier le l’impact de la bascule régulier/glissant, ça pourrait être ça:
image et image

Et pour le retour à ‹ maintenant ›, ça pourrait être une icône de ce style :
image

Intégrés dans un graphique, ça donnerait ça:

Vous en pensez quoi ?

Comme je disais dans mon précédent message, je pense qu’il faut s’inspirer d’interfaces existantes :slight_smile:

Avant de faire de nouvelles propositions, est-ce que tu peux faire une petite étude d’autres interfaces où on retrouve ce genre de pattern ?

Exemple avec un outil que j’utilise quotidiennement, Stripe :

Ben oui, mais non… :wink:

L’exemple du Dashboard de Stripe ne me semble pas pertinent : il fonctionne avec une sorte de barre de configuration qui ouvre différentes grandes fenêtres pour définir la période observée et la période avec laquelle faire la comparaison, et ce qui est configuré s’applique ensuite à tous les graphiques de la page. Ce n’est pas du tout la logique de Gladys, et rendre 'propre’ la méthode de configuration de Stripe dans chacun des graphiques d’un dashboard de Gladys ne me parait pas pertinent du tout.
Et par ailleurs Stripe ne propose pas de façon simple de naviguer dans le passé/futur : il n’y a pas de flèche précédent/suivant pour se déplacer dans le temps, alors que c’est l’objectif de cette demande dans la maquette initiale de @Tolkyen puis dans la tienne aussi…

Pour faire court, l’interface de Stripe ne m’inspire pas du tout pour faire évoluer Gladys…

Tu as d’autres idées d’interfaces existantes ? Parce que je n’ai pas d’idées de mon côté, et pas le temps d’explorer ‹ au hasard ›… Si tu me donnes d’autres pistes, je veux bien regarder :wink:

Toutes les possibilités exposées me conviennent, merci @StephaneB pour tout le travail

Je viens aussi de regarder l’interface proposée dans HelloWatt, que tu avais déjà cité. C’est propre et intuitif, mais beaucoup simplifié par rapport à ce qu’on veut faire dans Gladys. Chez eux:

  • l’affichage est systématique en mode ‹ régulier › : une journée entière, un mois entier, ou une année entière
  • Comme il n’y a pas de type de période intermédiaire (12h, 7 jours, 3 mois), les transitions entre type de périodes sont plus basiques. C’est toujours le premier jours des la période qui est maintenu : 2024 <=> janvier 2024 <=> 1er janvier 2024.
  • pas besoin d’avoir un moyen simple de revenir à ‹ aujourd’hui ›, puisque aujourd’hui n’est jamais affiché (ça récupère au mieux les données de la veille…)

Donc difficile de garder leur interface simple pour proposer le fonctionnel plus riche de Gladys.

1 « J'aime »

Je reste dispo pour étudier d’autres interfaces existantes qui feraient ce genre de parcours dans le temps sur des graphiques, pour essayer de s’en inspirer… Qui auraient des idées ?

salut @StephaneB
pas forcément d’idées de visu pour l’instant mais est-ce qu’on ne pourrait pas déjà implémenter qq fonctions déjà présentes dans Apexcharts ?

Je ne sais pas trop te répondre, @mutmut, c’est peut-être plutôt à @pierre-gilles de réagir en fonction de ce qu’il connaît d’ApexCharts? N’étant pas développeur, je n’ai pas creusé la doc ApexCharts pour savoir ce qui était déjà possible.

Et c’est un peu volontaire aussi : je pense que pour faire un bon travail sur du logiciel, il faut détacher a priori la réflexion sur le besoin (ce que j’ai essayé de faire) et celle sur la réalisation (que je laisse aux développeurs). Et bien sûr si le besoin décrit n’est pas raisonnablement faisable techniquement, il faut échanger pour trouver le bon compromis :wink:

Mais donc sur ce sujet, je reste dispo pour explorer d’autres interfaces si vous avez des idées et m’en inspirer pour revoir le besoin que j’ai dessiné, ou pour discuter avec le/les développeurs si certains points que j’ai proposés sont trop complexes à réaliser.