# \[Feat\] Personnaliser les couleurs des graphiques **URL:** \ **Category:** Demandes livrées\ **Tags:** feature-core\ **Created:** [Mars 17, 2024, 5:44 UTC](https://community.gladysassistant.com/t/feat-personnaliser-les-couleurs-des-graphiques/8774 "2024-03-17T17:44:09Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![GziAzman](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/gziazman/32/15671_2.png) [@GziAzman](https://community.gladysassistant.com/u/GziAzman)\ **Post date:** [Mars 17, 2024, 5:44 UTC](https://community.gladysassistant.com/t/feat-personnaliser-les-couleurs-des-graphiques/8774/1 "2024-03-17T17:44:09Z")
Bonjour à tous, Devant le constat que les couleurs des graphiques n’étaient pas personnalisables, j’ai travaillé sur une feature permettant de les customiser un peu. Je crée ce post dans le but d’ouvrir une discussion à ce sujet, avant d’ouvrir une PR. La première chose qui m’a gênée, c’est que tous les graphiques étaient bleus, de manière imposée. Or dans l’exemple ci-dessous, j’aurais aimé pouvoir avoir mon taux d’humidité en bleu, et ma température en jaune, pour « corréler » les couleurs avec les données et donc les différencier: ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/4/46c39ab3b997e86f9436f6ba932cb93d33dc67ca.png) Ensuite, j’ai remarqué que seules 4 couleurs étaient disponibles (dont les 2 dernières sont très ressemblantes). Au delà de 4 données, le roulement s’effectue: ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/b/b33cd52bbf99d37209340c5d7b918255e726a772.png) J’ai donc voulu m’essayer à rendre les couleurs des graphiques personnalisables. Dans cette première itération, le but est juste de pouvoir choisir soi-même parmi les 4 couleurs. (J’en ai profité pour remplacer le second « jaune » par un vert). Cette feature répond au besoin n°1, mais ne change rien au 2 pour le moment. Mais il serait facilement possible, si on le souhaite, de rajouter plus de couleurs. (La solution ultime serait de proposer un color-picker, mais je pense que c’est contre-productif, choisir une couleur dans une palette, peut être une frustration pour certains). Voici une démonstration rapide de la feature: Dans le cas ou on affiche qu’une seule donnée, on peut choisir une couleur (ou pas, et dans ce cas, les couleurs par défaut s’appliqueront) ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/8/8d1102d6a554620245a384f5e346baa750aed7af.png) Dans le cas ou on affiche 2 données dans le graphique, on peut choisir une couleur pour chaque données: ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/d/dd7f41eb7fc4ec452720a4e6fbe81bbdcd4c53fb.png) Et voilà le résultat: ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/f/f9cb4397b268d99da01a764976a800d8f27ccc75.png) J’ai cherché à savoir pourquoi cette option n’était pas disponible jusqu’à maintenant, mais je n’ai pas trouvé de justification, uniquement cette phrase: > [@Affichage des courbes de capteurs sur le dashboard](https://community.gladysassistant.com/t/affichage-des-courbes-de-capteurs-sur-le-dashboard/6535/61): > > Qu’en pensez-vous si je propose une liste de couleurs qui est attribué aux différents capteurs ? (Pas de possibilité de choisir) Dans ce post: > [@Affichage des courbes de capteurs sur le dashboard](https://community.gladysassistant.com/t/affichage-des-courbes-de-capteurs-sur-le-dashboard/6535/61): > > Salut à tous! C’est lundi, retour au boulot slight_smile Je suis entrain de finir toutes les modifications qu’on s’est dites ici: Correction KW → kW Affichage de la variation pour tous les types d’intervalles Affichage de plusieurs features sur une même courbe (c’est le point le plus complexe) C’est ce dernier point qui est le plus complexe! Voilà où j’en suis pour l’instant: Affichage d’une fonctionnalité Etat de base, affichage d’une seule fonctionnalité: Donc j’espère que cette feature ne nuit pas à la philosophie du projet (j’ai bien compris que l’idée de Gladys, était de rester hyper simple d’utilisation). La discussion est ouverte, je serais curieux de voir ce que chacun de vous en pense. Très bonne semaine à vous, Alex. ---
**Author:** ![Hizo](https://gladys-assistant-community.b-cdn.net/letter_avatar_proxy/v4/letter/h/51bf81/32.png) [@Hizo](https://community.gladysassistant.com/u/Hizo)\ **Post date:** [Mars 17, 2024, 7:13 UTC](https://community.gladysassistant.com/t/feat-personnaliser-les-couleurs-des-graphiques/8774/2 "2024-03-17T19:13:56Z")
Salut, merci, j’avais signalé il y a un moment que le manque de couleur était problématique : ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/f/f7fbf5c28aa1f2b0add2b6c2acf8865a5556e1cb.png) Du coup, je suis pour augmenter le nombre de couleur dispo 🙂 ---
**Author:** ![McFlyPartages](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/mcflypartages/32/15670_2.png) [@McFlyPartages](https://community.gladysassistant.com/u/McFlyPartages)\ **Post date:** [Mars 17, 2024, 7:48 UTC](https://community.gladysassistant.com/t/feat-personnaliser-les-couleurs-des-graphiques/8774/3 "2024-03-17T19:48:25Z")
Très bonne feature. ---
**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:** [Mars 18, 2024, 8:59 UTC](https://community.gladysassistant.com/t/feat-personnaliser-les-couleurs-des-graphiques/8774/4 "2024-03-18T08:59:43Z")
Salut @GziAzman ! Trop cool si tu as travaillé sur cette fonctionnalité 🙂 Pour moi c’est sympa ce que tu proposes, et j’ai quelques retours : - Plutôt que de mettre « Donnée 1/Donnée 2 », il faudrait mettre le nom de la fonctionnalité affichée - Par défaut, sélectionner une couleur différente par fonctionnalité pour que l’utilisateur n’ait à modifier que si il le souhaite - En plus de mettre le nom de la couleur, il faudrait mettre un petit carré avec la couleur en prévisualisation , je pense que si tu passe par React-Select (qu’on utilise partout dans Gladys) c’est possible ( [React-Select](https://react-select.com/home) ). Pas très chaud pour un color-picker, pour moi il faut proposer une liste assez exhaustive de couleur pré-choisie et cohérente entre elles. Il y a des sites de palettes de couleurs qui existent : > **[Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨](https://flatuicolors.com/)** > > 280 handpicked colors ready for COPY & PASTE Il faut choisir une palette unique, et ensuite proposer une vingtaine de couleurs max par exemple 🙂 ---
**Author:** ![GziAzman](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/gziazman/32/15671_2.png) [@GziAzman](https://community.gladysassistant.com/u/GziAzman)\ **Post date:** [Mars 18, 2024, 11:12 UTC](https://community.gladysassistant.com/t/feat-personnaliser-les-couleurs-des-graphiques/8774/5 "2024-03-18T11:12:18Z")
Bonjour à vous, et merci pour vos réponses. Content de voir que la feature peut plaire, je vais retravailler dessus pour la terminer, et prendre en compte les remarques, après quoi j’ouvrirais une PR. Concernant les remarques: > [@pierre-gilles](#): > > Plutôt que de mettre « Donnée 1/Donnée 2 », il faudrait mettre le nom de la fonctionnalité affichée Oui, pour être honnête j’avais commencé à vouloir faire ça, mais je trouvais que le « label » devenait trop long avec certains devices. Mais je suis d’accord que ça serait plus clair que la numérotation. Je vais l’implémenter avec le nom, et on en rediscutera. > [@pierre-gilles](#): > > Par défaut, sélectionner une couleur différente par fonctionnalité pour que l’utilisateur n’ait à modifier que si il le souhaite Yes, par défaut, je n’avais rien mis pour que ça fallback sur les couleurs par défaut. Mais en effet, ça sera peut être plus clair et plus facilement éditable avec ta solution. 👌 > [@pierre-gilles](#): > > En plus de mettre le nom de la couleur, il faudrait mettre un petit carré avec la couleur en prévisualisation Carrément d’accord, merci pour l’indication du composant à utiliser. > [@pierre-gilles](#): > > Pas très chaud pour un color-picker On est aligné là dessus 👍 > [@pierre-gilles](#): > > Il faut choisir une palette unique, et ensuite proposer une vingtaine de couleurs max par exemple Je pense qu’une vingtaine, c’est trop. Déjà, c’est difficile de trouver 20 couleurs bien distinctes. Ensuite, je suis pas sûr que le besoin soit là. Si un graph affiche 20 data différentes, il aura des problèmes de lisibilité qui dépassent la problématique de couleur à mon avis. 😅 Qu’en penses-tu si on démarre avec 10 ? ---
**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:** [Mars 18, 2024, 1:13 UTC](https://community.gladysassistant.com/t/feat-personnaliser-les-couleurs-des-graphiques/8774/6 "2024-03-18T13:13:05Z")
> [@GziAzman](#): > > Si un graph affiche 20 data différentes, il aura des problèmes de lisibilité qui dépassent la problématique de couleur à mon avis. 😅 > Qu’en penses-tu si on démarre avec 10 ? Oui effectivement j’ai dis 20 mais 10 c’est déjà très bien pour commencer ^^ ---
**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:** [Mars 18, 2024, 4:14 UTC](https://community.gladysassistant.com/t/feat-personnaliser-les-couleurs-des-graphiques/8774/7 "2024-03-18T16:14:52Z")
Super fan de cette fonctionnalité, moi qui regarde souvent le graphique de mes températures (où il y a 6 ou 7 capteurs) je m’y perds régulièrement et je joue du clic pour les différencier. Merci pour ce travail !!! ---
**Author:** ![GziAzman](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/gziazman/32/15671_2.png) [@GziAzman](https://community.gladysassistant.com/u/GziAzman)\ **Post date:** [Mars 21, 2024, 7:28 UTC](https://community.gladysassistant.com/t/feat-personnaliser-les-couleurs-des-graphiques/8774/8 "2024-03-21T19:28:04Z")
Bonsoir, J’ai pris en compte les retours de @pierre-gilles et voilà le résultat: ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/4/48c04209e4c99b6b33204c9fa62e7a4b80de7968.png) Et la PR associée: > > > \### Pull Request check-list > > To ensure your Pull Request can be accepted as fa…st as possible, make sure to review and check all of these items: > > \- \[\] If your changes affects code, did your write the tests? > \- \[x\] Are tests passing? (\`npm test\` on both front/server) > \- \[x\] Is the linter passing? (\`npm run eslint\` on both front/server) > \- \[x\] Did you run prettier? (\`npm run prettier\` on both front/server) > \- \[x\] If you are adding a new features/services, did you run integration comparator? (\`npm run compare-translations\` on front) > \- \[x\] Did you test this pull request in real life? With real devices? If this development is a big feature or a new service, we recommend that you provide a Docker image to the community (\[french forum\](https://community.gladysassistant.com/)/\[english forum\](https://en-community.gladysassistant.com/)) for testing before merging. > \- \[\] If your changes modify the API (REST or Node.js), did you modify the API documentation? (Documentation is based on comments in code) > \- \[\] If you are adding a new features/services which needs explanation, did you modify the user documentation? See \[the GitHub repo\](https://github.com/GladysAssistant/v4-website) and the \[website\](https://gladysassistant.com). > \- \[\] Did you add fake requests data for the demo mode (\`front/src/config/demo.js\`) so that the demo website is working without a backend? (if needed) See \[https://demo.gladysassistant.com\](https://demo.gladysassistant.com). > > NOTE: these things are not required to open a PR and can be done afterwards / while the PR is open. > > \### Description of change > > CF https://community.gladysassistant.com/t/feat-personnaliser-les-couleurs-des-graphiques/8774 ---
**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:** [Mars 21, 2024, 8:46 UTC](https://community.gladysassistant.com/t/feat-personnaliser-les-couleurs-des-graphiques/8774/9 "2024-03-21T20:46:47Z")
J’aime beucoup ! ---
**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:** [Mars 22, 2024, 7:04 UTC](https://community.gladysassistant.com/t/feat-personnaliser-les-couleurs-des-graphiques/8774/10 "2024-03-22T07:04:45Z")
Merci pour la PR, super boulot ça rend bien ! Je te fais une review (probablement début de semaine prochaine) et je reviens vers toi 🙂 ---
**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:** [Mars 25, 2024, 9:16 UTC](https://community.gladysassistant.com/t/feat-personnaliser-les-couleurs-des-graphiques/8774/11 "2024-03-25T09:16:39Z")
Merci pour la PR @GziAzman, je viens de review et c’est vraiment très cool 👏 J’ai 2 petits feedbacks, mais rien de très grave : > > > \### Pull Request check-list > > To ensure your Pull Request can be accepted as fa…st as possible, make sure to review and check all of these items: > > \- \[\] If your changes affects code, did your write the tests? > \- \[x\] Are tests passing? (\`npm test\` on both front/server) > \- \[x\] Is the linter passing? (\`npm run eslint\` on both front/server) > \- \[x\] Did you run prettier? (\`npm run prettier\` on both front/server) > \- \[x\] If you are adding a new features/services, did you run integration comparator? (\`npm run compare-translations\` on front) > \- \[x\] Did you test this pull request in real life? With real devices? If this development is a big feature or a new service, we recommend that you provide a Docker image to the community (\[french forum\](https://community.gladysassistant.com/)/\[english forum\](https://en-community.gladysassistant.com/)) for testing before merging. > \- \[\] If your changes modify the API (REST or Node.js), did you modify the API documentation? (Documentation is based on comments in code) > \- \[\] If you are adding a new features/services which needs explanation, did you modify the user documentation? See \[the GitHub repo\](https://github.com/GladysAssistant/v4-website) and the \[website\](https://gladysassistant.com). > \- \[\] Did you add fake requests data for the demo mode (\`front/src/config/demo.js\`) so that the demo website is working without a backend? (if needed) See \[https://demo.gladysassistant.com\](https://demo.gladysassistant.com). > > NOTE: these things are not required to open a PR and can be done afterwards / while the PR is open. > > \### Description of change > > CF https://community.gladysassistant.com/t/feat-personnaliser-les-couleurs-des-graphiques/8774 ---
**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:** [Avril 1, 2024, 8:05 UTC](https://community.gladysassistant.com/t/feat-personnaliser-les-couleurs-des-graphiques/8774/12 "2024-04-01T08:05:16Z")
Merci @GziAzman pour les correctifs, c’est bon pour moi 🙂 J’ai mergé, ça partira dans la prochaine release de Gladys 🚀 ---
**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:** [Avril 1, 2024, 9:06 UTC](https://community.gladysassistant.com/t/feat-personnaliser-les-couleurs-des-graphiques/8774/13 "2024-04-01T09:06:19Z")
Trop cool ça !! ---
**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:** [Avril 8, 2024, 2:03 UTC](https://community.gladysassistant.com/t/feat-personnaliser-les-couleurs-des-graphiques/8774/14 "2024-04-08T14:03:46Z")
Disponible dans Gladys Assistant 4.38.3 🥳 Merci @GziAzman pour ce développement ! > [@Gladys Assistant 4.38.3 : Couleurs dans les graphiques!](https://community.gladysassistant.com/t/gladys-assistant-4-38-3-couleurs-dans-les-graphiques/8823): > > Salut à tous slight_smile Nouvelle mise à jour de Gladys, avec quelques améliorations sympas slight_smile Couleurs des graphiques Vous pouvez remercier @GziAzman pour cette fonctionnalité, il est maintenant possible de choisir la couleur de chaque courbe sur un graphique : Zigbee2mqtt: Compatibilité avec les sirènes NEO La sirène NEO Zigbee est désormais compatible avec Gladys slight_smile Disponible sur Doma… ---
**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:** [Avril 8, 2024, 2:03 UTC](https://community.gladysassistant.com/t/feat-personnaliser-les-couleurs-des-graphiques/8774/15 "2024-04-08T14:03:49Z")