[Feat] Grafikfarben anpassen

Bestellungen geliefert
1

Hallo zusammen,

Da die Farben der Diagramme nicht anpassbar waren, habe ich an einer Funktion gearbeitet, um sie etwas zu individualisieren. Ich erstelle diesen Beitrag, um eine Diskussion darüber zu eröffnen, bevor ich einen Pull Request öffne.

Das Erste, was mich gestört hat, war, dass alle Diagramme blau waren, und zwar zwingend. In dem unten stehenden Beispiel hätte ich gerne meine Luftfeuchtigkeit in Blau und meine Temperatur in Gelb gehabt, um die Farben mit den Daten zu korrelieren und sie so zu unterscheiden:

image
image388×342 6.55 KB

Dann habe ich festgestellt, dass nur 4 Farben verfügbar waren (von denen die letzten beiden sehr ähnlich sind). Bei mehr als 4 Daten wird eine Rotation durchgeführt:

image
image363×249 10.5 KB

Ich wollte also versuchen, die Farben der Diagramme anpassbar zu machen.
In dieser ersten Iteration geht es nur darum, selbst aus den 4 Farben auswählen zu können. (Ich habe die Gelegenheit genutzt, um das zweite „Gelb“ durch ein Grün zu ersetzen).
Diese Funktion erfüllt den Bedarf Nr. 1, ändert aber nichts an Nr. 2 für den Moment.
Aber es wäre leicht möglich, wenn wir es wünschen, mehr Farben hinzuzufügen. (Die ultimative Lösung wäre, einen Farbauswahl-Tool zu bieten, aber ich denke, das ist kontraproduktiv, eine Farbe aus einer Palette auszuwählen, kann für manche eine Frustration sein).

Hier ist eine schnelle Demonstration der Funktion:

Im Fall, dass nur ein Datensatz angezeigt wird, kann man eine Farbe wählen (oder auch nicht, und in diesem Fall werden die Standardfarben angewendet)

image
image332×486 10.4 KB

Im Fall, dass 2 Datensätze im Diagramm angezeigt werden, kann man für jeden Datensatz eine Farbe wählen:

image
image337×645 17.2 KB

Und hier ist das Ergebnis:

image
image387×335 6.25 KB

Ich habe versucht herauszufinden, warum diese Option bisher nicht verfügbar war, aber ich habe keine Begründung gefunden, nur diesen Satz:

In diesem Beitrag:

Ich hoffe also, dass diese Funktion nicht der Philosophie des Projekts schadet (ich habe verstanden, dass die Idee von Gladys ist, hyper einfach zu bleiben).
Die Diskussion ist eröffnet, ich bin gespannt, was jeder von euch dazu denkt.

Eine sehr gute Woche an euch,
Alex.

2

Hallo, danke,

ich hatte vor einiger Zeit gemeldet, dass das Fehlen von Farben problematisch ist:

image
image567×302 21.3 KB

Ich bin dafür, die Anzahl der verfügbaren Farben zu erhöhen :slight_smile:

3

Sehr gute Funktion.

4

Hallo @GziAzman!

Toll, wenn du an dieser Funktion gearbeitet hast :slight_smile:

Ich finde, was du vorschlägst, ist ganz nett, und ich habe ein paar Rückmeldungen:

  • Statt « Daten 1/Daten 2 » sollte der Name der angezeigten Funktion stehen
  • Standardmäßig sollte eine andere Farbe pro Funktion ausgewählt werden, damit der Benutzer nur ändern muss, wenn er möchte
  • Zusätzlich zum Farbnamen sollte ein kleines Quadrat mit der Farbe zur Vorschau hinzugefügt werden, ich denke, wenn du React-Select (das wir überall in Gladys verwenden) nutzt, ist das möglich (React-Select).

Nicht sehr begeistert von einem Farbauswahl-Tool, für mich sollte eine möglichst umfassende Liste von vorab ausgewählten und aufeinander abgestimmten Farben angeboten werden.

Es gibt Websites mit Farbpaletten:

Es sollte eine einzige Palette gewählt werden, und dann zum Beispiel maximal zwanzig Farben daraus angeboten werden :slight_smile:

5

Hallo zusammen, und vielen Dank für eure Antworten.

Ich freue mich, dass das Feature gefallen könnte. Ich werde daran weiterarbeiten, um es abzuschließen, und eure Anmerkungen berücksichtigen. Danach werde ich einen Pull Request öffnen.

Zu den Anmerkungen:

Ja, ehrlich gesagt hatte ich das ursprünglich so machen wollen, aber ich fand, dass das „Label“ mit manchen Geräten zu lang wurde. Aber ich stimme zu, dass das klarer wäre als die Nummerierung. Ich werde es mit dem Namen umsetzen, und wir können darüber noch einmal reden.

Ja, standardmäßig hatte ich nichts eingestellt, damit es auf die Standardfarben zurückfällt. Aber ja, deine Lösung ist vielleicht klarer und einfacher zu bearbeiten. :ok_hand:

Vollkommen einverstanden, danke für den Hinweis zur Komponente, die man verwenden kann.

Da sind wir uns einig :+1:

Ich glaube, zwanzig sind zu viele. Schon ist es schwierig, zwanzig gut unterscheidbare Farben zu finden. Außerdem bin ich mir nicht sicher, ob der Bedarf da ist. Wenn ein Diagramm zwanzig verschiedene Daten anzeigt, wird es meiner Meinung nach Lesbarkeitsprobleme geben, die über die Farbproblematik hinausgehen. :sweat_smile:
Was hältst du davon, wenn wir mit zehn anfangen?

6

Ja, tatsächlich habe ich 20 gesagt, aber 10 ist schon sehr gut zum Anfangen ^^

7

Super Fan dieser Funktion, ich, der ich oft das Diagramm meiner Temperaturen anschaue (wo es 6 oder 7 Sensoren gibt), verliere mich dort regelmäßig und klicke herum, um sie zu unterscheiden.

Danke für die Arbeit!!!

8

Hallo,

Ich habe das Feedback von @pierre-gilles berücksichtigt und hier ist das Ergebnis:

image
image257×577 10.5 KB

Und der dazugehörige Pull Request:

9

Ich mag das sehr!

10

Danke für das PR, super Arbeit, sieht gut aus!

Ich mache dir eine Review (wahrscheinlich Anfang nächster Woche) und melde mich dann bei dir :slight_smile:

11

Danke für den PR @GziAzman, ich habe ihn gerade geprüft und er ist wirklich sehr cool :clap:

Ich habe 2 kleine Rückmeldungen, aber nichts Schlimmes:

12

Danke @GziAzman für die Fixes, das passt für mich :slight_smile:

Ich habe gemerged, das geht in der nächsten Gladys-Release :rocket:

13

Das ist ja mega cool!!

14

Verfügbar in Gladys Assistant 4.38.3 :partying_face:

Danke @GziAzman für diese Entwicklung!