Colors for multiple entity datasources

Question

I am creating a widget for the Thingsboard IoT-Platform and came across an issue that I cannot resolve:

When defining colors for individual entity-sensors in the widget's datasource-config only the first entity gets the correct color.

Currently, my setup is the following:

• There are multiple devices of the type MY_DEVICE_TYPE
• The dashboard has an entity alias named MY_ALIAS with an entity filter set to Devices of type 'MY_DEVICE_TYPE' and the switch for Resolve as multiple entities is activated
• My test widget's datasource has the type Entity, is set to MY_ALIAS and has a single sensor DEVICE_SENSOR selected as a data key
• The data key configuration for DEVICE_SENSOR has the assigned color rgb(255, 0, 0) and the unit set to TheUnit

My widget is a Latest values-Widget and has nothing more than the following code:

self.onInit = function() {
    self.ctx.datasources.forEach(function(ds) {
        console.log(ds.name, ds.dataKeys[0].color, ds.dataKeys[0].units);
    });
};

For the eight devices that match my alias filter I get the following output:

DEVICE_001 rgb(255, 0, 0) TheUnit
DEVICE_002 #4caf50 TheUnit
DEVICE_003 #f44336 TheUnit
DEVICE_004 #ffc107 TheUnit
DEVICE_005 #607d8b TheUnit
DEVICE_006 #9c27b0 TheUnit
DEVICE_007 #8bc34a TheUnit
DEVICE_008 #3f51b5 TheUnit

The unit is assigned correctly but the colors seem to be assigned dynamically. It only works for the first datasource. I would love to get the color that I assigned to the datakey.

Is this a bug? Is this intended behaviour? Is this due to wrong configuration?

EDIT

As a workaround I keep the colors of the first datasource in a dictionary like so:

// A workaround to keep the sensor colors consistent.
self.colorMapping  = subscription.datasources[0].dataKeys.reduce(function(acc, dataKey) {
    acc[dataKey.name] = dataKey.color;
    return acc;
}, {});

Answer 1

I'm in a similar situation. Creating a time series chart where the alias represents multiple entities. I want in one chart to see all temperatures of all entities and obviously in different colours.

I got annoyed that the colours from the second entity cannot be set manually, additionally for me the assign colours are hard to distinguish (colour blindness). So with the help of this thread I came up with the solution to take the manually assigned colour for the first entity and keep on shifting the hue of that colour for all other entities

code that I'm using in the widget:

self.onInit = function() {
    var arrayLength = self.ctx.datasources.length;
    for (var i = 1; i < arrayLength; i++) {
        var newColor = surfacecurve.color(self.ctx.datasources[i-1].dataKeys[0].color).hue("+120").hex6();
        self.ctx.datasources[i].dataKeys[0].color = newColor;
    }
    self.ctx.flot = new TbFlot(self.ctx);
}

It needs this lib: https://github.com/surfacecurve/sc-color