Colors: Support unique color by value across fields

[colega]

What would you like to be added: a "Classic palette" which has colors assigned by value, like in other color schemes. Or, even better, assigning [pseudo-]unique values to each new value in the series instead of value percentage-based.

Why is this needed: in the new State timeline panel introduced in Grafana 8, choosing the palettes that assign colors by value makes more sense than selecting different colors for different series, since it allows us to visually differentiate the values.

Consider the difference between this panel representing a version history:

And this one:

The latter one is not perfect, but at least it's visually more distinguishable. It represents some issues however:

• The value in the middle gets assigned the last color, so we can't really see that there are three values there (three text labels are the only clue, I actually opened a bug report for this first, since I thought it was the same color, but it's just very similar).
• Regardless the color scheme "by value" we choose, it adds a semantic to the value (in this case value is a timestamp, but newer doesn't mean it's better or worse, it's just a different value)

As a proof of concept, I tried this (this is my first contact with TypeScript :D)

diff --git packages/grafana-data/src/field/fieldColor.ts packages/grafana-data/src/field/fieldColor.ts
index ffbdf95ac2..1c90287850 100644
--- packages/grafana-data/src/field/fieldColor.ts
+++ packages/grafana-data/src/field/fieldColor.ts
@@ -48,6 +48,15 @@ export const fieldColorModeRegistry = new Registry<FieldColorMode>(() => {
         return theme.visualization.palette;
       },
     }),
+    new FieldColorSchemeMode({
+      id: 'unique',
+      name: 'Unique',
+      isContinuous: false,
+      isByValue: true,
+      getColors: (theme: GrafanaTheme2) => {
+        return theme.visualization.palette;
+      },
+    }),
     new FieldColorSchemeMode({
       id: 'continuous-GrYlRd',
       name: 'Green-Yellow-Red',
@@ -176,6 +185,18 @@ export class FieldColorSchemeMode implements FieldColorMode {
   getCalculator(field: Field, theme: GrafanaTheme2) {
     const colors = this.getColors(theme);

+    if (this.id === 'unique') {
+      let assigned: Map<number, number> = new Map<number, number>();
+      let next = 0;
+      return (value: number, _percent?: number, _threshold?: Threshold) => {
+        if (!assigned.has(value)) {
+          assigned.set(value, next);
+          next = (next + 1) % colors.length;
+        }
+        return colors[assigned.get(value) || 0];
+      };
+    }
+
     if (this.isByValue) {
       if (this.isContinuous) {
         return (_: number, percent: number, _threshold?: Threshold) => {

And it rendered me pretty much what I was looking for:

And with more values:

(This looks like a Volkwagen Polo Harlequin)

---

So, do we want this to be added? And if yes, am I on the right path? Which side-effects have I missed (I see lots of methods related to color mode, and @torkelo mentioned possible issues when streaming data)

[torkelo]

similar to #35945

[Legion2]

@colega this is exactly what I need as described in #35945

[colega]

Yes, I didn't add the requirement to assign same color to same value in different series, however but that would be definitely an improvement too.

@torkelo do we want to merge both issues into #35945 and close this one?

[torkelo]

we can keep this one and close the other, but we can add to this one that it would be good to support unique colors across fields as well (a bit more tricky)

[pkolyvas]

We're in the process of moving Grafana feature requests to GitHub Discussions. This issue is being moved to Discussions or has been moved from our issues list, depending on where you're seeing this message.

We hope to use the discussion thread to continue building use cases, and additional evidence based on engagement/voting, in order to help us prioritize this feature request later on down the road.

As with all things Grafana, we value your input and participation in this project and appreciate your patience during this transitional period. Looking forward to the discussion!

[Legion2]

The State Timeline is my new favorite visualisation tool. Choosing good coloring is very important to make information quickly understandable by humans. Here are two good examples for State Timeline visualisations of numerical and boolean values:

However for string based values currently there is no good coloring option in grafana:
Classic palette:

Green-Yellow-Red:

As a workaround for enum like string values (fixed small set of strings) a value mapping can be defined, to assign each string a color. This only works for a small set of strings and if the strings are known beforehand.

It would be better if grafana can automatically assign each string from the query result a unique color and use it across all series. The mapping from string to color should then also be shown in the legend (currently value mappings are not shown in the legend).

[gelicia]

Hello, as you may have heard, we are transitioning away from using discussions to discuss feature requests. We are migrating this discussion to an issue and closing the discussion. The issue is #82979. Feel free to continue the discussion around this there. Thank you!