Add color support

[marcusolsson]

This adds support for settings a color for each task. The default color for all tasks is green (same as the current uniform color).

Fixes #8

[Vijay-Nirmal]

Will this support conditional coloring based on value/threshold?

Sorry for directly asking, without checking the PR

[marcusolsson]

The current PR does not implement conditional colors. Could you give an example of the use case you'd like to see?

[Vijay-Nirmal]

I am using Gantt chat to display the dependency tree of services/requests. Below is an example of this from Azure Application Insights. If we notice the below image, we can see if a request status code is error then the corresponding bar is displayed in red. It would be amazing to do the same thing with your Gantt chart tool.

Image source: Find and diagnose run-time exceptions with Azure Application Insights

Side Note: It would be nice to have a parent-child relationship support as well. I will open a separate issue regarding this.

[marcusolsson]

Gotcha. Currently, the Gantt panel only expects three dimensions: label (string), start, and end time. AFAIK configuring a color schema works best for number fields. If we introduce an "Color by" dimension, you could use it for thresholds. I'll look at it this week.

[Andi1986]

yes it should be conditional based on threshold. Thats what i imagined to be the extra Dimension for. so we can chose which of our fields shall be the provided threshold input. good job so far ! :)

[Vijay-Nirmal]

Personally I don't think setting color based on threshold is a good idea because it won't support custom logics based on string or some other calculation, etc.

Proposal 1

Getting color values directly from a column. The operation that needs to be done to determine the color will be done by the Query Language (Data Source) or using Transform feature in Grafana.

For example, consider below is the table, the column Color will be used to determine the color

Text	Start Time	End Time	ColumnA	ColumnB	Colors	Some Other Values
A	2021-01-01T00:00:00Z	2021-01-01T01:00:00Z	Error	500	#ff0000	Blah Blah Blah
B	2021-01-01T00:30:00Z	2021-01-01T01:40:00Z	Success	401	Yellow	Blah Blah Blah
C	2021-01-01T00:45:00Z	2021-01-01T01:15:00Z	Success	200	rgb (0,255,0)	Blah Blah Blah

Proposal 2

Add a ability to add list of predicates and it corresponding color. First predicate that return true will be taken and display the bar in that predicate's color. If non of the predicate are matching then the base (default) color will be applied.

For example, consider below is the table. Then I can add ColumnA == 'Error' and ColumnB > 400 to the predicates list with a corresponding color and should specific a base color. Then using this, we can determine the color.

Text	Start Time	End Time	ColumnA	ColumnB	Some Other Values
A	2021-01-01T00:00:00Z	2021-01-01T01:00:00Z	Error	500	Blah Blah Blah
B	2021-01-01T00:30:00Z	2021-01-01T01:40:00Z	Success	401	Blah Blah Blah
C	2021-01-01T00:45:00Z	2021-01-01T01:15:00Z	Success	200	Blah Blah Blah

[jamessewell]

Is it possible to colour based on another column rather than just legend items?

I'm stacking ids vertically, and ideally I'd like each block to have different colour based on a map.

[jamessewell]

Now I think about it more, colouring types of tasks would be useful even in a true gantt chart layout too

[marcusolsson]

If possible, I'd like to use Grafana's built-in color support here. The Grafana plugin API offers a display function that returns a color based a value within the field, which would means that the color logic is handled by Grafana rather than in the plugin. The downside is that it only supports using numbers to conditionally set colors.

We could add the Color by dimension, and decide on how to handle it based on the type. If Number field, use Grafana field options (supports thresholds), and if String field, use custom logic. The question then would be what strings you'd expect.

My first instinct would be that it would default to color by the text/label dimension, e.g "Task 1", "Task 2". It would then work like shown in the GIF in the description. The question then is how you set the colors when using a string field. If you selected to color by a category, would you still want to configure the colors using the legend? Also conditionally setting a color based on the text would likely require some custom controls that, frankly, should go in Grafana imo.

I don't think returning hex colors from a data source is the right way to go. While it does give a lot of customizability, it also promotes conflating data with its presentation. You'd either have to store the colors in the database, or you'd need a query language that would supports conditional logic.

[jamessewell]

From my perspective I need to be able to assign based on a value in an arbitrary column (which would be one of the labels) - I’m not quite sure if that fits in with what you are proposing though?

[marcusolsson]

After thinking this over, I decided to ditch the legend in favor of a color mapping editor like the one @Vijay-Nirmal suggested (although not as configurable).

I added a "smart" Color by field that enables the custom color mapping editor if the selected field is of type string. If the color field is of type number, the color is determined by Grafana on color scheme feature. By default, the Color by dimension is set to the same field as the text dimension.

While this doesn't cover all the cases mentioned above, I believe it covers most while being simple enough that we can expand on this in the future. This approach will also migrate smoothly if Grafana ever were to support strings in the Color scheme editor.

Merging this for now. Please test it out and submit issues on how we can improve this further.

Thanks all of you for sharing your feedback and suggestions! ❤️

[marcusolsson]

Just as I merged this: https://github.com/grafana/grafana/pull/33820 😆