Mini-graph-card: Feature request: relative color thresholds

[bokub]

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>

[kalkih]

Thanks, great suggestion!

[jeepotvin]

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.