[BUG] dash daq.gauge color scale can't take same color in multiple regions

[henrykeithturner]

Sorry to be a bother. I've noticed that dash daq.gauge 's color scales do not work if parsed the same color for more than one region. For example, if i have two "warning" regions which i want to be read. I've also notice that, as a workaround, if the colors are given slightly different hex codes, then it works fine.

I've attached examples below - where dial 1 is fine, dial 2 doesnt work due to the above issue and dial 3 works due to the workaround.

Thanks very much!

Harry

import dash
import dash_daq as daq
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

random_temperature = 18

app = dash.Dash(__name__,)

app.layout = html.Div([
    daq.Gauge(
        id='test-1',
        label="Test 1",
        value=random_temperature,
        min=0,
        max=35,
        color={"gradient":False,"ranges":{"green":[0,10],"yellow":[10,20],"red":[20,35]}},
        units="Celsius",
        showCurrentValue=True,
    ),
    daq.Gauge(
        id='test-2',
        label="Test 2",
        value=random_temperature,
        min=0,
        max=35,
        color={"gradient":False,"ranges":{"red":[0,10],"yellow":[10,20],"red":[20,35]}},
        units="Celsius",
        showCurrentValue=True,
    ),
    daq.Gauge(
        id='test-3',
        label="Test 3",
        value=random_temperature,
        min=0,
        max=35,
        color={"gradient":False,"ranges":{"#ff0001":[0,10],"yellow":[10,20],"#FF0000":[20,35]}},
        units="Celsius",
        showCurrentValue=True,
    ),
])

if __name__ == '__main__':
    app.run_server(debug=True)

[alexcjohnson]

Thanks @henrykeithturner - moved to the dash-daq repo where this would be addressed.

You're absolutely right, this is a limitation of the current API using a dict with the colors as keys - one of the values will overwrite that other.

I can see two ways to handle this:

• Allow a value of this dict to be a list of lists. Advantage is this can be backward-compatible, disadvantage is you can't keep the ranges in order, you must put all the reds together:

  "ranges": {"red": [[0, 10], [20, 35]], yellow: [10, 20]}

• turn the whole thing into an ordered structure, perhaps a list of [color, range]. This isn't as self-documenting, and has a lot of nesting that would be easy to get wrong. Also not backward-compatible unless we continue accepting both forms. But it's compact and easy to read, and inherently ordered:

  "ranges": [["red", [0, 10]], ["yellow", [10, 20]], ["red", [20, 35]]]
  # or, less nested but possibly more confusing
  "ranges": [["red", 0, 10], ["yellow", 10, 20], ["red", 20, 35]]

[Yakult182]

Colors also don't align with the range-values if min is not equal to zero