mini-graph-card
mini-graph-card copied to clipboard
Feature request: relative color thresholds
Hello, I have an idea to improve the Dynamic line color feature.
Instead of setting absolute values in the color_thresholds
option, it would be great to use relative values.
For example:
color_thresholds:
- value: 0%
color: "#1feaea" # Blue
- value: 50%
color: "#ffd200" # Yellow
- value: 100%
color: "#f72047" # Red
Or even easier, omitting values
color_thresholds:
- color: "#1feaea" # Blue
- color: "#ffd200" # Yellow
- color: "#f72047" # Red
The goal is that the bottom of the graph is always blue and the top is always red, no matter what the values are.
Technically, this is easy to do in SVG:
<defs>
<linearGradient id="my-gradient-id" x1="0" y1="1" x2="0" y2="0">
<stop offset="0" stop-color="#1feaea"></stop>
<stop offset="0.5" stop-color="#ffd200"></stop>
<stop offset="1" stop-color="#f72047"></stop>
</linearGradient>
</defs>
<rect class="line--rect" fill="url(#my-gradient-id)"></rect>
Thanks, great suggestion!
Great suggestion. Would it be possible to use dynamic values based on other sensors as threshold? For instance, if I have a sensor that is used as a maximum value, I could use (sensor.my_sensor_max_value - 5) to change line color.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. If this is still an active issue, please let us know!
Still an active issue, got it! Removing stale label.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. If this is still an active issue, please let us know!