feat: dynamic time line

[Haluska77]

In my project I want to have some daily times marked for better graph readibility. Or for long term graphs it might be difficult to realize some specific values in time as the graph does not support it.

My sollution adds user specific times as list in configuration that are displayed in graph.

These time lines are tightly coupled with their values, so their position is dynamically rendered along with the graph.
The styling is fully customized by user by <card_mod> as per css class.
Time value could be disabled as well.
On midnight time (when user setup 00:00), graph displays a new date value instead of a time.

Time lines are applied for every day in the graph so long term graphs are supported

The solution requires new config variable 'time_line' with a list of expected times in format HH:MM under the 'show' option as follows:

    - 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"
                hours_to_show: 24
                line_width: 2
                show:
                  state: false
                  name: false
                  icon: false
                  legend: false
                  time_line:
                    - '00:00'
                    - '12:00'
                points_per_hour: 4
                card_mod:
                  style: |
                    ha-card svg .line-12-00 {
                      stroke-dasharray: 10,5;
                      stroke-width: 1px;
                    }
                    ha-card svg .line-00-00 {
                      stroke: red;
                      stroke-width: 2px;
                    }
                    ha-card svg .text-00-00 {
                      fill: red;
                    }

[ildar170975]

Thanks for contributing.
Please check a PR for grid lines. Perhaps your idea could be an addition.
Note that mentioned PR also will allow to address a particular vertical line and style it with card-mod.

[Haluska77]

PR for grid lines is totallly different.

1. it provides static grid hence it does not identify value in time
2. User is not able to specify very own grid

[ildar170975]

That is why I suggested you to think how to add your useful functionality to the current paradigm (related config options should be in one place, may be in a separate section; drawing of lines should be consistent to the existing code).
Yes, that PR is not merged yet. There are some open discussions about it. But anyway it should be merged first - and then all other improvements should be made.

[akloeckner]

Mentioning #1179 to link the PR as related.

[Haluska77]

Honestly, i cannot see any useful use case for static grid, even from feature author. Only description is 'Implements #837', which static grid does not cover. Unlike original request is about dynamic grid eg. day separator.

[ildar170975]

I see your point.
The card draws graphs within hours_to_show from the current time.
Assume it is 15:48 now, hours_to_show: 12 - so grid lines (as per #1179) will be drawn starting from 15:48, not from 15:00 or 15:30 or 15:45.
May be considered as not very useful.
Probably we will try to refactor that PR...

In the perfect scenario, we will have a possibility a draw a grid more "aligned" to a time scale.
And in this case a possibility to define additional vertical lines will be a good addition.

BTW, assume I defined a line for "12:00".
So, will I have several lines for "12:00" in case of several days?

[akloeckner]

May be considered as not very useful.

I think, it's two different use cases: I use to look at graphs to check when to close windows after venting. A line at "ten minutes ago" would be helpful, indeed.

On the other hand, I also hover the graph quite often, just to see the time something happened, e.g. a temperature drop.

I wonder, if both could be done with a list of times:

• Have positive hh:mm to draw lines at exact times.
• And negative -hh:mm to draw lines at timedeltas from the right.

(And then, the question will be, if we're not much more flexible with a list of times than with discrete settings. Admittedly, with a somewhat more clumsy configuration.)

[JulienDeveaux]

Honestly, i cannot see any useful use case for static grid, even from feature author. Only description is 'Implements #837', which static grid does not cover. Unlike original request is about dynamic grid eg. day separator.

I did this because I needed a way to visually tell different time measures.
For example, I have multiple table side by side but with different times spans.
With grid lines set identically on each, I can tell which are zoomed in or out relative to the other.

[ildar170975]

In my unicorn universe we should use all:
-- grid lines connected to moments like "-10, -15, -20, ..." (PR of @JulienDeveaux);
-- grid lines for moments like "16:00, 16:05, 16:10, ..." - i.e. EXACT moments (possibly enriched PR of @JulienDeveaux);
-- grid lines for user-defined moments like "12:27" (PR of @Haluska77) - i.e. only particular lines are drawn;
-- grid lines for user-defined moments like "-10" (proposal of @akloeckner) - i.e. only particular lines are drawn.

[Haluska77]

Using 2 concepts of grid lines seems to me 'over'. It would spoil nice and minimalistic character of the card (that likely be the initial idea). As the graph is essentially dynamic, static grid seems not giving significant added value (for me).
If you want to display regular grid lines representing some time frame (recognizing scaling), use concept from PR #1179, but rework it to be dynamic. Technical aspects are also matter of discussion.