feat: add Fill Threshold feature - making graph filling height customizable

[Haluska77]

This change makes graph filling height customizable.

Currently, each line (sensor) fills whole height of the graph from its value to the bottom of the graph like on the picture

Blue line represents negative values, purple color represents positive values. Picture graph shows solar production (yellow) and grid power (blue = from grid, purple = to grid).
The amount of consumed energy from grid (blue) is not correctly displayed as it should be filled from zero to its value.
It should look like this:

This change will fix it. It adds a new config variable 'fill_threshold' which represents user expected value that graph is going to be filled up. 'fill_threshold' is optional. If 'fill_threshold' contains string, empty string or any non number value, then it is ignored.

[akloeckner]

Thanks, @Haluska77! This looks like a useful feature. I somehow cannot really imagine, how it works. I'm looking at your screenshot and something doesn't fall in place in my head. (Although the change looks very simple.) Could you provide an example configuration, please?

[Haluska77]

hi, glad to hear you like it. This particular picture above is based on following configuration:

              - type: custom:mini-graph-card
                entities:
                  - entity: sensor.grid_power_negative
                  - entity: sensor.solar_production
                    color: "#ffee3A"
                color_thresholds_transition: hard
                color_thresholds:
                  - value: -10000
                    color: "#488fc2"
                  - value: 0
                    color: "#8353d1"
                fill_threshold: 0
                hours_to_show: 12
                line_width: 2
                show:
                  state: false
                  name: false
                  icon: false
                  legend: false
                  zero_line: true
                points_per_hour: 4

[ildar170975]

Interesting. Will test.

[ildar170975]

A quick question.
There is a new fill_threshold option.
Assume it does smth in the proposed algorithm.
Imho in the ideal scenario ALL graphs with negative values (or positive and negative values) should be filled "from a curve to Y=0" (or to min(abs(lower_bound), abs(upper_bound))). Means - none option is needed. Then why was this new fill_threshold option proposed?
Sorry if the question is silly.

[Haluska77]

I extended solution for each entity

In this case, each entity could be configurable, which heigh to be filled.

This could be reached by

                  - entity: sensor.grid_power_negative
                    fill_threshold: 0
                  - entity: sensor.solar_production
                    fill_threshold: -3000
                    color: "#ffee3A"

This could be combined with 'fill_threshold' on 'entities' level, but 'entity' level overides value on 'entities' (parent) level.

So following configuration do the same result:

                entities:
                  - entity: sensor.grid_power_negative
                  - entity: sensor.solar_production
                    fill_threshold: -3000
                    color: "#ffee3A"
                fill_threshold: 0

[Haluska77]

A quick question. There is a new fill_threshold option. Assume it does smth in the proposed algorithm. Imho in the ideal scenario ALL graphs with negative values (or positive and negative values) should be filled "from a curve to Y=0" (or to min(abs(lower_bound), abs(upper_bound))). Means - none option is needed. Then why was this new fill_threshold option proposed? Sorry if the question is silly.

'fill_threshold' is the value, it might not be only 0, but could be setup on your own.
Maybe an additional extension is answer to your question when you are able to setup threshold for specific graph (line) you want, not all.

[ildar170975]

We need to add an X-axis line ASAP for this...

[akloeckner]

We need to add an X-axis line ASAP for this...

Could it be done by card-mod-styling the line of the fill? I think, it would create a horizontal line.

[ildar170975]

Could it be done by card-mod-styling the line of the fill?

Could be, but failed to get a result in Safari.
And it works only when a "fill" starts not from a bottom, but from a 0 (example here):

    rect.fill--rect {
      outline: 1px solid var(--secondary-text-color);
    }

Outline can be used for svg, not a border. But borders can be set separately (only bottom, for example), outlines cannot be.
And showing an outline for all 4 sides is not nice...

Of course placing a "zero sensor" is the simplest way for a user.

[akloeckner]

Could be, but failed to get a result in Safari.

Yes, I was thinking too simply. The fill is not just a fill. It's a filled (white) mask, which is then applied to the gradient rect following it. So, adding a stroke to the mask simply increases the size of the fill. 🤷

Thinking aloud: If we are thinking about adding a zero line, we should probably move the logic of "where is the zero threshold" outside of the getFill. Also, the setting will then start to affect more than just the fill. So, it should become more of a reference_value, zero_offset, y_axis_cutoff or something like this.

[ildar170975]

If we are thinking about adding a zero line

I wonder if it is possible to add a zero line "simply" as an svg element like we added (incompletely) grid lines?
Also, think about a possibility to add SEVERAL static lines (there is a FR in repo) with properties like "y_value, y_axis, line_color, line_style, line_width" - then this zero line could be just some of them.
Sorry for an offtopic.

[akloeckner]

Sorry for an offtopic.

No, it's good. And I don't think it's off topic per se. But I agree, let's consider it off topic and not add the line in this PR. But maybe as part of the grid-line PR. 👍

[ildar170975]

But maybe as part of the grid-line PR. 👍

I would disagree. Vertical grid lines depend on an time span, fixed horizontal lines' position depend on bounds (which could be dynamic). So let's propose this functionality in a separate PR.
Meanwhile I am going to test THIS proposed functionality (sorry for delays, I have rather limited resources these days).