[Feat] Personnaliser les couleurs des graphiques

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

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

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

Dans le cas ou on affiche 2 données dans le graphique, on peut choisir une couleur pour chaque données:

Et voilà le résultat:
image

J’ai cherché à savoir pourquoi cette option n’était pas disponible jusqu’à maintenant, mais je n’ai pas trouvé de justification, uniquement cette phrase:

Dans ce post:

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.

Salut, merci,

j’avais signalé il y a un moment que le manque de couleur était problématique :
image

Du coup, je suis pour augmenter le nombre de couleur dispo :slight_smile:

2 « J'aime »

Très bonne feature.

Salut @GziAzman !

Trop cool si tu as travaillé sur cette fonctionnalité :slight_smile:

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 ).

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 :

Il faut choisir une palette unique, et ensuite proposer une vingtaine de couleurs max par exemple :slight_smile:

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:

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.

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. :ok_hand:

Carrément d’accord, merci pour l’indication du composant à utiliser.

On est aligné là dessus :+1:

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. :sweat_smile:
Qu’en penses-tu si on démarre avec 10 ?

2 « J'aime »

Oui effectivement j’ai dis 20 mais 10 c’est déjà très bien pour commencer ^^

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 !!!

2 « J'aime »

Bonsoir,

J’ai pris en compte les retours de @pierre-gilles et voilà le résultat:

Et la PR associée:

7 « J'aime »

J’aime beucoup !

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 :slight_smile:

Merci pour la PR @GziAzman, je viens de review et c’est vraiment très cool :clap:

J’ai 2 petits feedbacks, mais rien de très grave :

Merci @GziAzman pour les correctifs, c’est bon pour moi :slight_smile:

J’ai mergé, ça partira dans la prochaine release de Gladys :rocket:

4 « J'aime »

Trop cool ça !!

1 « J'aime »

Disponible dans Gladys Assistant 4.38.3 :partying_face:

Merci @GziAzman pour ce développement !

6 « J'aime »