Show the current day from midnight to midnight #220

elbertov · 2023-01-31T08:57:07Z

elbertov
Jan 31, 2023

Hi,

If you want to show the current day from midnight to midnight you will have to set hours_to_show to 24 and the time_offset to the remaining hours on the day, so this depends on what time it is when you are looking at the graph. You can calculate the remaining hours using a universal function.

type: custom:plotly-graph
title: Outside temperature
hours_to_show: 24
time_offset: |-
  $fn () =>  { 
    now = new Date(); 
    tomorrow = new Date(now);
    tomorrow.setDate(tomorrow.getDate() + 1); 
    tomorrow.setHours(0,0,0,0);                                           // midnight
    HoursLeftToday = (tomorrow.getTime() - now.getTime()) / 1000 / 3600;  // milliseconds to hours
    return HoursLeftToday.toFixed(1) + "h";                               // only 1 decimal allowed for 'hours_to_show'
  }
entities:
  - entity: sensor.buienradar_temperature
    time_offset: 1d
    name: yesterday
  - entity: sensor.buienradar_temperature
    name: today

Be aware that the time_offset with the universal funcion has to be before the entities due to order dependencies.

miljbee · 2023-01-31T12:36:47Z

miljbee
Jan 31, 2023

Hello,

Thanks for sharing, I suggest a shorter version for the time_offset and some other small improvements:

type: custom:plotly-graph
time_offset: $fn () => (86400000-(Date.now() % 86400000)).toFixed(0) + 'ms'
entities:
  - entity: sensor.tmp_dehors_temperature
    name: Hier
    time_offset: 1d
    filters:
      - force_numeric
      - resample: 5m
      - sliding_window_moving_average:
          window_size: 15
          extended: true
          centered: true
    type: line
  - entity: sensor.tmp_dehors_temperature
    name: Today
    filters:
      - force_numeric
      - store_var: today
      - resample: 5m
      - sliding_window_moving_average:
          window_size: 15
          extended: true
          centered: true
    type: line
    showlegend: false
  - entity: sensor.nothing_now
    name: now
    yaxis: y9
    showlegend: false
    line:
      width: 1.5
      dash: dot
      color: '#e68a00'
    filters:
      - force_numeric
      - fn: () => { return {xs:[Date.now(),Date.now()], ys:[0,1]} }
layout:
  showlegend: true
  yaxis9:
    rangemode: tozero
  xaxis:
    nticks: 3
  dragmode: false
config:
  scrollZoom: false
hours_to_show: 24
refresh_interval: auto
title: $fn ( { vars } ) => 'Températures Today ' + vars.today.ys.slice(-1) + '°C'

2 replies

dbuezas Jan 31, 2023
Maintainer

Really cool! You could even make the time_offset pick the constant from hours_to_show, see getFromConfig
I'm so happy to see such advanced stuff done with the universal functions so quickly after the release :)

dbuezas Jan 31, 2023
Maintainer

For the "nothing_now" trace, check out the new example in the readme. I think it is slightly less hacky

elbertov · 2023-01-31T15:10:50Z

elbertov
Jan 31, 2023
Author

Hi Miljbee,

Thx for the nice suggestions!

The short version: $fn () => (86400000-(Date.now() % 86400000)).toFixed(0) + 'ms' should do the job one would say, but the graph shifts 1 hour, so the graphs starts on 1am and ends on 1am. It's a timezone thing I think...

0 replies

miljbee · 2023-01-31T17:30:08Z

miljbee
Jan 31, 2023

Good catch, I should have think twice before posting. I will try to fix it... Le mar. 31 janv. 2023, 16:11, Martin ***@***.***> a écrit :

…

Hi Miljbee, Thx for the nice suggestions! The short version: $fn () => (86400000-(Date.now() % 86400000)).toFixed(0) + 'ms' should do the job one would say, but the graph shifts 1 hour, so the graphs starts on 1am and ends on 1am. It's a timezone thing I think... — Reply to this email directly, view it on GitHub <#220 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAE3YLPVS5ZEISFHHQMYWPLWVETQLANCNFSM6AAAAAAUME35WA> . You are receiving this because you commented.Message ID: <dbuezas/lovelace-plotly-graph-card/repo-discussions/220/comments/4831037@ github.com>

0 replies

dbuezas · 2023-01-31T18:24:55Z

dbuezas
Jan 31, 2023
Maintainer

I think this works fine:

type: custom:plotly-graph
hours_to_show: 24
time_offset: |-
  $fn ({ getFromConfig }) => {
    const ms_to_show = getFromConfig('hours_to_show') * 60 * 60 * 1000;
    const now_utc = Date.now() - new Date().getTimezoneOffset() * 60 * 1000;
    return ms_to_show - now_utc % ms_to_show + 'ms'
  }
title: $fn({getFromConfig}) => 'Showing ' + getFromConfig('hours_to_show')+'h'
entities:
  - entity: sensor.openweathermap_temperature

But it obviously doesn't work for weeks, months or years.

0 replies

dbuezas · 2023-01-31T18:28:32Z

dbuezas
Jan 31, 2023
Maintainer

For the config support of this, I'm think of something like this to get the start of the range:

// Alternatives welcome. Javascript's Date class is so cumbersome.
year = new Date(new Date().setMonth(0,1)).setHours(0,0,0,0);
month = new Date(new Date().setDate(0)).setHours(0,0,0,0);
week = new Date(new Date().setDate(new Date().getDate() + 1 - new Date().getDay())).setHours(0,0,0,0);
day = new Date().setHours(0,0,0,0);
hour = new Date().setMinutes(0,0,0);
minute = new Date().setSeconds(0,0);

And similarly for the end dates. Then the equivalency should be:

hours_to_show = end - start;
time_offset = end - now - timezoneOffset ;

6 replies

dbuezas Jan 31, 2023
Maintainer

oh, there's that too? 🤦

dbuezas Jan 31, 2023
Maintainer

I think I got the dates math mostly right, but the code is absolutely impossible to read. I'll use date-fns instead:
https://date-fns.org/v2.29.3/docs/endOfMinute

It's supposed to be an efficient lib, and plotlyjs is huge anyway, so I rather pick their work. It's easier for me to maintain this and avoid bugs

miljbee Jan 31, 2023

Yeah that would be great if there was an easy way to define the range of the graph. But if you implement something, I think that it may be more explicit to do something like :
Specify 2 of

start (now, minute, hour, day, week, month, year)
end (now, minute, hour, day, week, month, year)
duration (xU x = number, U = unit: y,d,h,m,s,ms)

hours_to_show could be kept for compatibility reasons. It should be used only if start, end, duration are not specified.

time_offset is not always easy to figure, it seems more obvious for entities, since it's used to 'shift' the raw data, but for the main config, start end, duration seem to make more sense.

time_offset = end - now - timezoneOffset ;

why do you remove timezoneOffset, the dates in start and end aren't TZ aware ?

dbuezas Jan 31, 2023
Maintainer

Correct, date-fns handles the offsets.
The feature looks like this:

hours_to_show: current_day

And the feature is called Dynamic Relative Time. ChatGPT is amazing for brainstorming names of things

dbuezas Jan 31, 2023
Maintainer

Then the visible range is set to that, plus the global time_offset. Aaaaand i forgot about the user configured start of the week. Let's see how long until someone requests it 😁

dbuezas · 2023-01-31T20:41:33Z

dbuezas
Jan 31, 2023
Maintainer

From: https://github.com/dbuezas/lovelace-plotly-graph-card#dynamic-relative-time

Dynamic Relative Time
Shows the current day, hour, etc from beginning to end. The options are: current_minute, current_hour, current_day, current_week, current_month, current_quarter, current_year It can be combined with the global time_offset.

Released in v3.1.0

0 replies

elbertov · 2023-01-31T21:05:59Z

elbertov
Jan 31, 2023
Author

🤣 ⁣BlueMail voor Android downloaden Op 31 jan. 2023 21:25, om 21:25, David Buezas ***@***.***> schreef:

…

Correct, date-fns handles the offsets. The feature looks like this: ```yaml hours_to_show: current_day ``` And the feature is called `Dynamic Relative Time`. ChatGPT is amazing for brainstorming names of things <img width="608" alt="image" src="https://user-images.githubusercontent.com/777196/215874404-ee973085-f3f6-4a0a-93ba-436843c9c8de.png"> -- Reply to this email directly or view it on GitHub: #220 (reply in thread) You are receiving this because you authored the thread. Message ID: ***@***.***>

3 replies

dbuezas Jan 31, 2023
Maintainer

I told you, it can't be shorter. Somebody should use a Universal Function to set the Dynamic Relative Time, also known as "simply setting the time range"

elbertov Jan 31, 2023
Author

Don't forget to drink a beer before going to sleep, I sent you some 🥇

dbuezas Jan 31, 2023
Maintainer

Haha, thanks! Glad to see it in action so quickly!

elbertov · 2023-02-04T18:05:50Z

elbertov
Feb 4, 2023
Author

Hi David,

When I use this:

type: custom:plotly-graph
hours_to_show: current_week
entities:
  - entity: sensor.gas_consumed
    type: bar
    statistic: state
    period: day
    filters:
      - delta

I expect to see my gas_consumption per day for every day in the current_week. But initially the first day is not shown, you have to scroll a little:

(In the gif I show this as a bar as well as a line: same effect)

Is this easy to fix for you in the filter? The same for month etc.

current_year has the following effect:

type: custom:plotly-graph
hours_to_show: current_year
entities:
  - entity: sensor.gas_consumed
    type: bar
    statistic: state
    period: month
    filters:
      - delta
layout:
  yaxis:
    range:
      - 0
      - 250

It would be nice if the first bar is shown completely, e.g:

regards Martin

6 replies

dbuezas Feb 4, 2023
Maintainer

Oh, I meant to say that it needs 2 datapoints for the first result (because delta means the difference between two consecutive datapoints).
The global time_offset just shifts the whole visible range (not the data), so the cache asks home assistant for the data inside an interval that has been shifted a tad.
BTW, you can do time_offset: 1s if you want, it just needs to be an instant before the start of the first day.

dbuezas Feb 4, 2023
Maintainer

Aaand I just realized which Martin you are
Hi Martin 👋

elbertov Feb 4, 2023
Author

Hi David 👋 (you will talk to a lot of Martins lol, so no problem :-)),

I understand you, and it works if the previous available data is within that time_offset. When the data comes from the statistics table the minimum time_offset has to be -1h. So time_offset: -1h in my previous example gives me the following (bar not completely in sight, but ok):

type: custom:plotly-graph
hours_to_show: current_year
time_offset: '-1h'
entities:
  - entity: sensor.gas_consumed
    name: 2023
    type: bar
    statistic: state
    period: month
    filters:
      - delta
layout:
  height: 400

What is happening, I think, is that the calculated delta value is shifted 1 hour too, so strictly speaking the values are not correct, but for 1 hour in this example it's not really a problem.

Then the next case, where it goes too much wrong: I want to compare two or more years with type:bar. But to create enough space for the bars, I have to increase the time_offset a lot..., I'll show you:

type: custom:plotly-graph
hours_to_show: current_year
time_offset: '-0d'
entities:
  - entity: sensor.gas_consumed
    name: 2022
    time_offset: 1y
    type: bar
    statistic: state
    period: month
    filters:
      - delta
  - entity: sensor.gas_consumed
    name: 2023
    type: bar
    statistic: state
    period: month
    filters:
      - delta
layout:
  height: 400

(effectively no time_offset, January not visible, december showing the correct value 291.66)

The work-around time_offset: -1h, does the following:

One "January-bar" becomes visible, but one is missing (the blue one, left of the orange) and you already see the value of December isn't correct anymore.

If I want to show the entire blue bar, I'll have to use time_offset: -14d , but that spoils the calculation of the delta's significantly...
Also the orange January value: from 220 to more then 300...

So the time_offset: -1h fetches enough data (if available in database), but the type: bar has not enough room to show all of the bars...

type: line is fine with time_offset: -1h, but I don't like that :-(

So the question is: can you give the bars more room, so the time_offset: -1h work-around works better for bars?

I want to make a better graph with plotly-graph then the default energy chart lol:

dbuezas Feb 5, 2023
Maintainer

When the data comes from the statistics table the minimum time_offset has to be -1h

For me it works even with -1ms. It just has to "touch" the previous period. What HA does is take the last known value BEFORE the start of the queried period and it returns that value, with the "fake" timestamp equal to the start of the queried period too. I have logic to remove those fake datapoints when the user scrolls into the past.

So time_offset: -1h in my previous example gives me the following (bar not completely in sight, but ok):

The bar you see there is actually the January delta ( accumulated Jan minus accumulated Dec)

What is happening, I think, is that the calculated delta value is shifted 1 hour too.

That's luckily not the case. The global time_offset is only used to "prescroll" the visible x axis range, it doesn't affect the data.

If I want to show the entire blue bar, I'll have to use time_offset: -14d , but that spoils the calculation of the delta's significantly...

Uhm, interesting. I didn't now that the monthly statistics would give partial results if one asks for partial interval.

Also the orange January value: from 220 to more then 300...

That's also unexpected, I think these two points mean that the statistics api is not quite doing what I thought.

So the question is: can you give the bars more room, so the time_offset: -1h work-around works better for bars?

I think this touches the main issue here. In order to show the full bars, you need to show more than a year, it has to be a year plus half a bar width on the left and on the right.

I could add an extra viewport_time_padding that expands the visible area but doesn't affect what is fetched and plotted. Feel free to open a feature request issue and share your ideas on the syntax and semantics of that new configuration. I'll look into it.

In the meanwhile, you can add another filter: filter: i>0, which will discard the first datapoint. This won't work when we reach December (that bar won't be fully visible).

dbuezas Feb 5, 2023
Maintainer

You can also implement the dynamic time logic yourself and have finer control. This seems to work fine for example:

hours_to_show: $ex 24*365 - 2
time_offset: |-
  $ex {
    const ms_to_show = get('hours_to_show') * 60 * 60 * 1000;
    const now_utc = Date.now() - new Date().getTimezoneOffset() * 60 * 1000;
    return ms_to_show - now_utc % ms_to_show + 'ms'
  }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Show the current day from midnight to midnight #220

{{title}}

Replies: 8 comments 17 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Show the current day from midnight to midnight #220

elbertov Jan 31, 2023

Replies: 8 comments · 17 replies

miljbee Jan 31, 2023

dbuezas Jan 31, 2023 Maintainer

dbuezas Jan 31, 2023 Maintainer

elbertov Jan 31, 2023 Author

miljbee Jan 31, 2023

dbuezas Jan 31, 2023 Maintainer

dbuezas Jan 31, 2023 Maintainer

dbuezas Jan 31, 2023 Maintainer

dbuezas Jan 31, 2023 Maintainer

miljbee Jan 31, 2023

dbuezas Jan 31, 2023 Maintainer

dbuezas Jan 31, 2023 Maintainer

dbuezas Jan 31, 2023 Maintainer

elbertov Jan 31, 2023 Author

dbuezas Jan 31, 2023 Maintainer

elbertov Jan 31, 2023 Author

dbuezas Jan 31, 2023 Maintainer

elbertov Feb 4, 2023 Author

dbuezas Feb 4, 2023 Maintainer

dbuezas Feb 4, 2023 Maintainer

elbertov Feb 4, 2023 Author

dbuezas Feb 5, 2023 Maintainer

dbuezas Feb 5, 2023 Maintainer

elbertov
Jan 31, 2023

Replies: 8 comments 17 replies

miljbee
Jan 31, 2023

dbuezas Jan 31, 2023
Maintainer

dbuezas Jan 31, 2023
Maintainer

elbertov
Jan 31, 2023
Author

miljbee
Jan 31, 2023

dbuezas
Jan 31, 2023
Maintainer

dbuezas
Jan 31, 2023
Maintainer

dbuezas Jan 31, 2023
Maintainer

dbuezas Jan 31, 2023
Maintainer

dbuezas Jan 31, 2023
Maintainer

dbuezas Jan 31, 2023
Maintainer

dbuezas
Jan 31, 2023
Maintainer

elbertov
Jan 31, 2023
Author

dbuezas Jan 31, 2023
Maintainer

elbertov Jan 31, 2023
Author

dbuezas Jan 31, 2023
Maintainer

elbertov
Feb 4, 2023
Author

dbuezas Feb 4, 2023
Maintainer

dbuezas Feb 4, 2023
Maintainer

elbertov Feb 4, 2023
Author

dbuezas Feb 5, 2023
Maintainer

dbuezas Feb 5, 2023
Maintainer