# Amélioration des graphiques **URL:** \ **Category:** Développement\ **Created:** [Mai 23, 2024, 8:51 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954 "2024-05-23T20:51:31Z")\ **Posts on this page:** 20\ **Page:** 8
**Author:** ![Terdious](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/terdious/32/6316_2.png) [@Terdious](https://community.gladysassistant.com/u/Terdious)\ **Post date:** [Août 30, 2024, 9:00 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/141 "2024-08-30T09:00:44Z")
Tres étonnant ^^ apres je m’amuse a zoomer/dezoomer + avec la fenetre d’inspection l’agrandir / retrecir plus finement pour tester tous les cas. Je ne sais pas si tu fais pareil ! Ca me gene quand meme que a un moment ca puisse péter selon une dimension … En tout cas je push la modif 1280 et tu me redira. Il faut le faire pour le dashboard aussi cette modification ? Meme si il n’y a pas ce souci dessus ? ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [Août 30, 2024, 9:36 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/142 "2024-08-30T09:36:13Z")
> [@Terdious](#): > > Tres étonnant ^^ apres je m’amuse a zoomer/dezoomer + avec la fenetre d’inspection l’agrandir / retrecir plus finement pour tester tous les cas. Je ne sais pas si tu fais pareil ! Oui je fais pareil dans tous les sens et pas le souci. Il doit y avoir quelque chose avec ta data qui fait que ça pète J’aimerais bien qu’on trouve quand même, parce que si ça pète chez toi, ça pètera chez d’autres… ^^ Tu n’as pas d’autre choses à me communiquer pour que je reproduisse ? > [@Terdious](#): > > Il faut le faire pour le dashboard aussi cette modification ? Meme si il n’y a pas ce souci dessus ? Non! ---
**Author:** ![Terdious](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/terdious/32/6316_2.png) [@Terdious](https://community.gladysassistant.com/u/Terdious)\ **Post date:** [Août 30, 2024, 9:37 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/143 "2024-08-30T09:37:32Z")
> [@pierre-gilles](#): > > J’aimerais bien qu’on trouve quand même, parce que si ça pète chez toi, ça pètera chez d’autres… ^^ Totalement d’accord ^^ > [@pierre-gilles](#): > > Tu n’as pas d’autre choses à me communiquer pour que je reproduisse ? Tu veux ma DB ? ^^ Facile à envoyer du coup ^^ ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [Août 30, 2024, 9:38 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/144 "2024-08-30T09:38:01Z")
> [@Terdious](#): > > Tu veux ma DB ? ^^ Facile à envoyer du coup ^^ Yes parfait ! ---
**Author:** ![Terdious](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/terdious/32/6316_2.png) [@Terdious](https://community.gladysassistant.com/u/Terdious)\ **Post date:** [Août 30, 2024, 9:59 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/145 "2024-08-30T09:59:03Z")
Envoyée sur [hello@gladysassistant.com](mailto:hello@gladysassistant.com) Désolé pour le délai, je n’avais pas fait le nettoyage du coup 500Mo compliqué par mail ^^ Je t’ai mis le compte et le mot de passe dans le mail ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [Août 30, 2024, 10:07 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/146 "2024-08-30T10:07:29Z")
Ok merci, effectivement j’arrive à reproduire. Le problème vient des composants react-select quand il y a des titres trop long dedans Une petite recherche me donne ça: > > En ajoutant : ```auto min-width: 0px; ``` à la class column, ça résout le souci 🙂 ---
**Author:** ![Terdious](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/terdious/32/6316_2.png) [@Terdious](https://community.gladysassistant.com/u/Terdious)\ **Post date:** [Août 30, 2024, 11:35 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/147 "2024-08-30T11:35:30Z")
Alors je suis désolé !! J’avais trouvé les memes articles !! Mais à la differences de toi c’edt que je suis moins organisé… et je suis persuadé d’avoir testé, mais il y a fort a parier que j’avais d’autres modifications en cours qui cassait. Ou alors je le mettais au mauvais endroit …? ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [Août 30, 2024, 11:37 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/148 "2024-08-30T11:37:59Z")
Tkt ! 😃 l’essentiel c’est que ça marche maintenant ! ---
**Author:** ![Terdious](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/terdious/32/6316_2.png) [@Terdious](https://community.gladysassistant.com/u/Terdious)\ **Post date:** [Août 30, 2024, 11:38 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/149 "2024-08-30T11:38:21Z")
Je finis mon café et je fais la modification. ---
**Author:** ![guim31](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/guim31/32/4840_2.png) [@guim31](https://community.gladysassistant.com/u/guim31)\ **Post date:** [Août 30, 2024, 11:39 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/150 "2024-08-30T11:39:26Z")
Il me taaaarde 😃 ---
**Author:** ![Terdious](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/terdious/32/6316_2.png) [@Terdious](https://community.gladysassistant.com/u/Terdious)\ **Post date:** [Août 30, 2024, 11:42 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/151 "2024-08-30T11:42:16Z")
Attention cette PR ne contient pas la visu live des données sur zoom quand la courbe affichée est 24h ou supérieure. Je dis ca au cas ou ^^ car il me semble que tu etais tout aussi impatient que moi pour ce dev ^^ Enfin pour ma part c est l’export des datas en csv/excel qui me tarde ^^ ---
**Author:** ![guim31](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/guim31/32/4840_2.png) [@guim31](https://community.gladysassistant.com/u/guim31)\ **Post date:** [Août 30, 2024, 11:44 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/152 "2024-08-30T11:44:25Z")
Oui j’avais compris ça, mais je suis impatient quand même. En fait je trouve que la partie affichage des graphiques necessitait surtout la possibilité de les afficher en plus grand, et là c’est le top pour moi ! Entre ça et les capteurs binaires, je suis comblé par ces derniers dev !! 😉 ---
**Author:** ![Terdious](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/terdious/32/6316_2.png) [@Terdious](https://community.gladysassistant.com/u/Terdious)\ **Post date:** [Août 30, 2024, 11:59 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/153 "2024-08-30T11:59:16Z")
> [@pierre-gilles](#): > > `min-width: 0px;` C’est push !! Merci beaucoup pour ton aide. ---
**Author:** ![Terdious](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/terdious/32/6316_2.png) [@Terdious](https://community.gladysassistant.com/u/Terdious)\ **Post date:** [Août 30, 2024, 12:48 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/154 "2024-08-30T12:48:06Z")
@pierre-gilles, Je commence à reprendre celle-ci en parallèle : > [@Terdious](#): > > Normalement tu peux review également la PR [Add expand charts dashboard by Terdious · Pull Request #2096 · GladysAssistant/Gladys · GitHub](https://github.com/GladysAssistant/Gladys/pull/2096). Mais comme elle est prise sur la PR des courbes binaires, je supposes que tu préféreras attendre que l’autre soit merge. Bref pour info Je remet ici le condensé de nos échanges précédent : > [@Terdious](#): > > > [@pierre-gilles](#): > > > > Pour la PR sur « l’expand » de graphique, je suis assez sceptique sur l’utilisation d’une modal, pour l’instant on n’a jamais fait de modal dans Gladys, et si un jour on en ajoute ce sera plus pour des invite de confirmation de suppression, ce genre de chose, plus que de créer des écrans complets. > > > > Une autre option serait d’afficher une nouvelle page. > > Dommage, je trouvais ça vraiment pas mal au rendu (je ne sais pas si tu l’as testée). Je rappel quand meme au passage que tu m’avais amené sur cette piste : > > > [@pierre-gilles](#): > > > > Il faut voir quelle est l’usage final de la fonctionnalité, et si ça fait plutôt sens d’avoir ça dans le dashboard, par exemple via un bouton qui permettrait « d’étendre » la vue graphique d’un capteur, comme on fait pour les caméras par exemple (avec le bouton « ouvrir en plein écran »), ou si vraiment on veut un onglet vraiment dédié à l’analyse. > > Mais je suis plutôt maléable dans le genre, donc ok pour la nouvelle page, moins fonctionnelle je trouve, mais le principal est vraiment de réussir à exploiter ces données. > > > [@pierre-gilles](#): > > > > Après, est-ce que cette PR est toujours d’actualité suite à la PR sur le multi-colonne ? > > Je pense que oui suite à toute nos discussion. Car pour le coup cela permet de pouvoir toujours profiter des affichages 3 colonnes et dans un expand (ou nouvelle page ^^) pouvoir faire nos recherches date à date. Du coup on part sur - une nouvelle page ? - sur un nouvel onglet ? - une nouvelle route sur la même page du genre : ```auto import ChartExpandDashboard from '../routes/dashboard/chart-expand'; [...] ``` - ou sur du modal ? J’aime vraiment beaucoup moi d’autant que ça fait sens car dans mon optique c’est une vue provisoire dans ma vision. Aller je remet un petit aperçu ^^ : ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/9/3/93eb7ce7a3e8a9cf5a7dcf314be96f44fd757d65.png) ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [Août 30, 2024, 1:07 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/155 "2024-08-30T13:07:51Z")
Je mets selon moi la comparaison des 2 solutions : | Page | Modal | | --- | --- | | Respecte la navigation du navigateur ou du mobile (bouton back fonctionne) | Garde le contexte lorsqu’on quitte le graphique pour retourner sur le tableau de bord | | Peut-être mis en favoris, ou envoyé par lien | | | Plus agréable sur gros graphiques, pas de risque de quitter le graphique en cliquant en dehors de la modal | | | Plus agréable sur mobile ? (Modal peu utilisée sur mobile) | | Je suis allé voir 2 logiciels qui font ce genre de choses: Metabase et Grafana. Les deux n’ont pas l’air de faire de modal, on passe sur une nouvelle page au clic. Est-ce qu’une nouvelle page ne va pas dans le sens où on veut aller ? Cette page permettrait d’ajouter toutes les améliorations dont tu parles (export CSV, etc…) Qu’en penses-tu ? ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [Août 30, 2024, 1:15 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/156 "2024-08-30T13:15:16Z")
Un exemple sur Metabase, un produit que j’aime beaucoup ! Tu peux construire ton propre dashboard avec tes graphiques, et tu peux cliquer sur un graphique pour l’ouvrir en grand dans une page et faire des opérations plus complexe : Je trouve que ça s’approche de ce qu’ont veut dans Gladys à l’avenir. Qu’en penses-tu ? ---
**Author:** ![Terdious](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/terdious/32/6316_2.png) [@Terdious](https://community.gladysassistant.com/u/Terdious)\ **Post date:** [Août 30, 2024, 1:45 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/157 "2024-08-30T13:45:18Z")
Parfait !! Je suis convaincu ^^ Merci pour ces très bon exemple !! > [@pierre-gilles](#): > > Est-ce qu’une nouvelle page ne va pas dans le sens où on veut aller ? Cette page permettrait d’ajouter toutes les améliorations dont tu parles (export CSV, etc…) > [@pierre-gilles](#): > > Je trouve que ça s’approche de ce qu’ont veut dans Gladys à l’avenir. Tout à fait !! > [@pierre-gilles](#): > > Peut-être mis en favoris, ou envoyé par lien Vrai réflexion pour plus tard ? Ou juste point possible ? Parce que ça voudrait dire un id pour chaque box charts … ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [Août 30, 2024, 1:47 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/158 "2024-08-30T13:47:10Z")
> [@Terdious](#): > > Vrai réflexion pour plus tard ? Ou juste point possible ? Parce que ça voudrait dire un id pour chaque box charts … Ah non pour moi c’est une réflexion pour maintenant ^^ Je pense qu’on a déjà un ID pour chaque widget, ce serait « id-dashboard/column\_number/row\_number » ? ---
**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\ **Post date:** [Août 30, 2024, 1:52 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/159 "2024-08-30T13:52:36Z")
Du coup l’URL ça pourrait être: ```auto /dashboard/dashboard-selector/expand/COLUMN_NUMBER/ROW_NUMBER ``` Example: ```auto /dashboard/my-dashboard/expand/0/1 ``` ---
**Author:** ![Terdious](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/terdious/32/6316_2.png) [@Terdious](https://community.gladysassistant.com/u/Terdious)\ **Post date:** [Août 30, 2024, 2:01 UTC](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954/160 "2024-08-30T14:01:42Z")
Yes ! Que se passe-t-il si je le met en favoris, que je bouge le graphe de place et une box « Appareils » se retrouve a sa place ? Erreur 404 ? [Page précédente](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954.md?page=7) [Page suivante](https://community.gladysassistant.com/t/amelioration-des-graphiques/8954.md?page=9)