[Question] color_thresholds paramter (Line color object)

[yu-tendo]

Hello,

I am confused as I cannot map the behavior which I observe to the actual documentation. I hope someone can help me :)

The documentation says that the color_thresholds parameter takes a list of Line color objects. The Line color object is initalized with "value" and "color". The parameter value is described as "The threshold for the color stop." If we now pass the following list to color_thresholds:

    color_thresholds:
      - value: 18
        color: "#CC3333"
      - value: 21
        color: "#6600FF"

(These are web safe hex codes).

I would now expect that everything below and including 18 is #CC3333 (as 18 is the "color stop"). Then it should turn into #6600FF until 21. (Which color is used after 21?)

In practice, I observe a total different behaviour. As you can see on the attached image, the red color is visbile above 18 (the marked dot is 19,9). Please note that I set color_thresholds_transition: hard. It is unclear to me why this is happening (as the stop threshold for red is 18).

What I would like to have is: below value X, color a; bteween X and Y, color b, and above value Y, color c. How can I do this?

Thank you!

[yu-tendo]

Closed on accident

I had a look and to my understanding the method intcolor(inState, i) in main.js does not work as expected. For instance, it seems to ignore the parameter color_thresholds_tansition. There is no check and it always interploates the colors between two thresholds.

Any comment or thoughts?

[ildar170975]

The threshold for the color stop

I am not a native English speaker. Cannot say what a "stop" is supposed to mean. In fact - it works in an opposite way:

I would now expect that everything below and including 18 is #CC3333 (as 18 is the "color stop"). Then it should turn into #6600FF until 21. (Which color is used after 21?)

i.e. in fact

>= 18 -> #CC3333
>= 21 -> #6600FF

A small example:

type: custom:mini-graph-card
entities:
  - sensor.xiaomi_cg_1_co2
points_per_hour: 60
hours_to_show: 24
line_width: 3
color_thresholds_transition: hard
color_thresholds:
  - value: 400
    color: '#ff0000'
  - value: 500
    color: '#0000FF'

---

below value X, color a; bteween X and Y, color b, and above value Y, color c. How can I do this?

Example: Sensor's value starts from 0 (minimal value). Let it be a battery_level (0..100). Then use these thresholds:

      - value: 0
        color: red
      - value: 34
        color: orange
      - value: 67
        color: green

Full code:

type: custom:mini-graph-card
entities:
  - sensor.battery_iphone_5s
points_per_hour: 60
hours_to_show: 24
lower_bound: 0
line_width: 3
color_thresholds_transition: hard
color_thresholds:
  - value: 0
    color: red
  - value: 34
    color: orange
  - value: 67
    color: green

[ildar170975]

Close the issue if resolved.

[yu-tendo]

Thank you very much for the detailed answer @ildar170975

There is one aspect which is not covered by your answer (and also not by the documentation) -and this missing details lead to my confusion in the first place: In your example, you write "Sensor's value starts from 0 (minimal value).", but what is the behaviour if there is (for whatever reason) a value smaller than 0? Which color is used? (Alternatively, looking at my original example, which color is applied for a value smaller than 18?)

[ildar170975]

a value smaller than 0

You may find out this by yourself))) But anyway - suggest to always define the 1st value as a minimal possible (guess you know possible values for every sensor).

Any other questions?

[yu-tendo]

Not a satisfying answer but I don't complain. You at least confirmed my assumptions. Thank you!

I don't have another question but a request: Please change/adapt the description of this field in the ReadMe file. I think our discussion made at least clear that there are (non obvious) assumptions.

[ildar170975]

description of this field in the ReadMe file

PR is already made.