多个实体数据源的颜色答案

【问题标题】：Colors for multiple entity datasources多个实体数据源的颜色
【发布时间】：2019-05-02 14:52:39
【问题描述】：

我正在为 Thingsboard IoT-Platform 创建一个小部件，但遇到了一个我无法解决的问题：

在小部件的数据源配置中为单个实体传感器定义颜色时，只有第一个实体获得正确的颜色。

目前，我的设置如下：

有多个MY_DEVICE_TYPE 类型的设备
仪表板有一个名为MY_ALIAS 的实体别名，实体过滤器设置为Devices of type 'MY_DEVICE_TYPE'，Resolve as multiple entities 的开关已激活
我的测试小部件的数据源类型为 Entity，设置为 MY_ALIAS，并选择了一个传感器 DEVICE_SENSOR 作为数据键
DEVICE_SENSOR 的数据键配置具有分配的颜色rgb(255, 0, 0)，单位设置为TheUnit

我的小部件是一个Latest values-Widget，只有以下代码：

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

对于与我的别名过滤器匹配的八个设备，我得到以下输出：

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

单位分配正确，但颜色似乎是动态分配的。它仅适用于第一个数据源。我很想得到我分配给数据键的颜色。

这是一个错误吗？这是预期的行为吗？是不是配置错误？

编辑

作为一种解决方法，我将第一个数据源的颜色保存在字典中，如下所示：

// 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;
}, {});

【问题讨论】：

标签： thingsboard

【解决方案1】：

我也有类似的情况。创建一个别名代表多个实体的时间序列图表。我想在一张图表中看到所有实体的所有温度，并且显然是不同的颜色。

我对无法手动设置第二个实体的颜色感到恼火，另外对我来说，分配的颜色很难区分（色盲）。所以在这个线程的帮助下，我想出了为第一个实体手动分配颜色并继续为所有其他实体改变该颜色的色调的解决方案

我在小部件中使用的代码：

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);
}

它需要这个库：https://github.com/surfacecurve/sc-color

【讨论】：