Dans les graphiques, il pourrait être intéressant de les parcourir par échelles de temps dans l’esprit de cette maquette
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 !
Propre ! Carrément 
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
@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 :
Génial 
Il faut réfléchir à toutes les interactions 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
Il faut explorer la documentation d’ApexChart et ne faire que des propositions possibles
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:
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 :
=> 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 :
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 : ======
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 :
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)
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) :
Exemples:
====== Changement de type de période : ======
Quand on change la période pour l’agrandir :
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 ›
Quand on change la période pour la réduire :
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 ›
Un petit défaut avec la navigation en ‹ zigzag › dans 2 cas au moins :
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…Salut @StephaneB 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 :
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 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
Moi je le voudrais bien 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
Pour clarifier le l’impact de la bascule régulier/glissant, ça pourrait être ça:
et 
Et pour le retour à ‹ maintenant ›, ça pourrait être une icône de ce style :
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
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…
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
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:
Donc difficile de garder leur interface simple pour proposer le fonctionnel plus riche de Gladys.
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
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.
L’objectif n’est pas de copier à l’identique ce que font Stripe, HelloWatt ou d’autres produits, mais plutôt de s’inspirer de certaines mécaniques d’UI éprouvées, qui fonctionnent bien.
Chez Stripe, par exemple, j’aime bien leur sélecteur d’intervalle : il combine des plages fixes avec des intervalles glissants:
Je trouve leur approche plus clair que ta proposition.
Mais je suis d’accord que le sélecteur Stripe n’a pas de sens pour Gladys, c’est juste un exemple.
Je peux passer du temps sur cette spec, mais du coup ça m’aide moins 
De mon côté, toute mon énergie est sur Matter en ce moment.
Complètement d’accord!
L’implémentation est un détail. Le plus dur, c’est de faire la spec.
Merci @pierre-gilles pour ces précisions
Ok, je comprends. Mais ça veut donc dire que tu es ok si je fais une maquette qui ose intégrer des fonctionnements assez différents d’actuellement ? Parce que pour l’instant je faisais plutôt des propositions pour être fonctionnelles mais sans devoir trop changer l’interface (à la fois pour limiter les devts graphiques, et pour ne pas introduire trop de ‹ rupture › dans les habitudes des utilisateurs)…
Non, ce n’était pas l’idée, je veux bien continuer à travailler là-dessus. Je demandais juste des pistes à explorer, mais pas seulement à toi Je vais explorer moi-même un peu, mais je reste preneur des idées de tous pour des sites affichant des graphiques ‹ navigables › et qui pourraient m’inspirer…
Proposes ce que tu veux
Je sais que c’est un peu contraignant, mais c’est justement là tout l’enjeu du travail de spécification 
Ce n’est pas une blague quand je dis que c’est l’étape la plus complexe !
Il faut faire de la recherche : fouiller sur Google, s’inspirer de produits du quotidien, poser des questions à l’IA si besoin, ou encore explorer des sites qui regroupent des patterns UX ou des exemples de design inspirants.
Bon ben je dois avouer, c’est un cas d’usage où l’IA fait vraiment gagner du temps : J’ai décrit ce que j’avais envie de faire, et je lui ai demandé des exemples de sites, et de composants… et ça m’a bien aidé !
J’en retiens plusieurs choses:
Donc il suffit de placer:
Et pour une navigation fluide et logique, il faut une synchro automatique entre le graphique et le sélecteur. C’est-à-dire:
J’ai fait pas mal de tests de config avec un composant qui me semble sympa, et dont l’IA me dit qu’il sera bien compatible avec Gladys : DateRangePicker. Mais la compatibilité est bien sûr à confirmer par @pierre-gilles ou d’autres développeurs
Avec ce composant DateRangePicker, j’ai choisi les options suivantes pour créer la maquette ci-dessous:
Et j’ai prédéfini les périodes glissantes qui existent actuellement dans Gladys, suivi des périodiques calendaires équivalentes
- 60 dernières minutes / cette heure
- 12 dernières heures / cette demi-journée
- 24 dernières heures / cette journée
- 3 derniers jours / (pas d’équivalent calendaire)
- 7 derniers jours / cette semaine
- 30 dernier jours / ce mois
- 90 derniers jours / ce trimestre
- 365 derniers jours / cette année
(Si besoin, je pourrai fournir le code de configuration du DateRangePicker que j’ai utilisé)
