Closed nschloe closed 4 months ago
Hi,
There seems to be a drift on the linear gradient when setting a higher upper_bound
.
If you need the color at a glance I'd recommend to either remove the upper_bound
or set show option's points: true
Observe the red and green area below the graph: They're also incorrectly computed. Perhaps the bug has something to do with that.
@nschloe
Code for the 1st card:
type: custom:mini-graph-card
name: 'lower_bound: ~400'
entities:
- sensor.xiaomi_cg_1_co2
show:
fill: true
labels: true
hours_to_show: 48
height: 500
line_width: 2
lower_bound: ~400
upper_bound: 1000
color_thresholds:
- value: 400
color: green
- value: 500
color: red
- value: 600
color: blue
color_thresholds_transition: hard
red and green area below the graph
On your screenshots this is rather subtle. Use a default light theme next time. And make it easier for yourself - increase a height, otherwise the area is too narrow to see anything.
Please report can you still see the issue.
All your transitions are quite sharp. Try it with flatter data near a color threshold.
All your transitions are quite sharp.
This is good.
Try it with flatter data near a color threshold.
What can it change?
type: vertical-stack
cards:
- type: entities
entities:
- input_number.number
- type: custom:mini-graph-card
entities:
- input_number.number
show:
fill: true
labels: true
hours_to_show: 0.083333
height: 500
cache: false
line_width: 2
lower_bound: 0
points_per_hour: 600
smoothing: false
color_thresholds:
- value: 0
color: green
- value: 10
color: red
- value: 20
color: blue
color_thresholds_transition: hard
This is good.
Well, mine aren't and that causes the problem. If the transition is shallow, colors aren't correctly assigned.
What is a “shallow” transition? There are 2 types of transition. If you mean “smooth” - then take MY example, change to “smooth” and please show what is wrong there.
Sorry, my wording was unclear. In your examples, the graphs "dive" sharply from one area to the next. In my example, the y-value hardly changes. Over the whole x-length of the graph, it creeps down:
From looking at it, it seems that everything is still in the green. That's wrong though! The transition into the "red" color area has already happened, and is revealed when hovering with the mouse pointer over the image to such that the points are highlighted:
I hope this makes things clearer.
Already suggested you to make graphs more clear - height, theme. Sorry, can barely see.
Sorry, can barely see.
Can you see that the graph is completely green in the above chart, and red on the right-hand side in the below graph?
Perhaps someone may use a loupe and help you.
I'm really at a loss tring to explain the issue. Last attempt:
Two pictures of the same data, going from green to red. Top is with mouse hover, so the little data points are visible. They are red; good. Bottom: Just the graph lines. All green; not good.
You got an issue which you want to sort out. For this you need to simplify the case - to make it clear. Twice I suggested you how we can simplify it - increase height and make colors clearly visible by using a light default theme. Let’s not spent a lot of time and posts for discussing a necessity of these suggestions; and in the end we might still not be able to solve the issue. But it may help.
Also, thresholds were set in a wrong way:
- value: 300
color: '#D0342C'
i.e. starting from "300", but actual data may be below 300 which causes inconsistency.
No feedback within 3 months, closing
I have a mini-graph-card with some color thresholds:
The dots (shown when hovering over the graph) have the correct color, but the line doesnt:
It doesn't matter if the transition is hard or smooth