Support new time zone (local/server time) feature released in 2023.7

[jrb80]

HA have just released an awesome new feature in 2023.7 which provides the option to select how you display time on the UI, either using the local time (default) or the server time (new). This is incredibly useful if the HA instance is in another country/time zone or if you are travelling abroad.

However, my initial testing suggests this feature isn't supported by this custom card. I show an example below showing the Apex Chart and HA History card using the server time option. The HA History (bottom) card is correctly displaying the server time, whereas the Apex Chart is still using the local client time.

[jpettitt]

This particularly annoying if you have charts that use end of day / week / month as it currently uses the browser local time and yields confusing results.

[GitHubGoody]

+1

[Lenbok]

I am guessing that

apexcharts-card/src/apexcharts-card.ts

Lines 1444 to 1463 in 1b63c0f

	private _getSpanDates(): { start: Date; end: Date } {
	let end = new Date();
	let start = new Date(end.getTime() - this._graphSpan + 1);
	// Span
	if (this._config?.span?.start) {
	// Just Span
	const startM = moment().startOf(this._config.span.start);
	start = startM.toDate();
	end = new Date(start.getTime() + this._graphSpan);
	} else if (this._config?.span?.end) {
	const endM = moment().endOf(this._config.span.end);
	end = new Date(endM.toDate().getTime() + 1);
	start = new Date(end.getTime() - this._graphSpan + 1);
	}
	if (this._offset) {
	end.setTime(end.getTime() + this._offset);
	start.setTime(start.getTime() + this._offset);
	}
	return { start, end };
	}

needs to be updated, either with an explicit property like the clock weather card guys do in https://github.com/pkissling/clock-weather-card/blob/2e536aecefabf6096a4bc048b5d61736a55c348d/src/clock-weather-card.ts#L511 or by checking the 2023.7 hass preference. I don't know any typescript/javascript so am not up for it myself.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[Lenbok]

bump to keep alive

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[Lenbok]

Still an issue.

[martin3000]

Discovered this today while I am in Asia and my home is in Europe.

[markcocker]

Under my HA user profile I have Time Zone set to Use server time zone (Europe/London).
When I am travelling my machine + browser changes to another time zone, eg. GMT-5. The following keeps the ApexChart card xaxis showing GMT. For details see datetimeUTC - https://apexcharts.com/docs/options/xaxis/
I set this using config_templates so all my charts take on this config.

apex_config:
  xaxis:
    labels:
      datetimeUTC: true

[martin3000]

Since I do not live in the UTC (GMT+0) time zone, this does not make sense for me.

[budisek]

I've set Server time zone and add datetimeUTC: true but i need to set UTC+8 because my iOS HA app shows wrong values on apexchart. I can only change time zone on my iPhone but it is not a solution.

[DamienGdn]

+1

[jrb80]

Here is an example of the problem using the Sun2 integration. This apexchart is viewed locally, in the same timezone as the Home Assistant server. The sunrise is shown correctly

Here is the same apexchart, viewed at the same time but from a different timezone from the Home Assistant server. You will not the sunrise is not shown correctly as the client time is used, rather than the server time

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[Lenbok]

+1 still an issue.

[NikolajChristensen]

+1 still an issue.

[RomRider]

Working on it, but it's quite painful as the apexcharts library only supports displaying in browser's localtime or UTC. But I'll get there eventually.

[github-actions]

🎉 This issue has been resolved in version 2.1.0-dev.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[RomRider]

Please test this extensively with your setup as I might have missed edge cases !

[github-actions]

🎉 This issue has been resolved in version 2.1.0-dev.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[Lenbok]

This is working well for me so far, thanks!

[NikolajChristensen]

Works well here too. Much much better experience. Thanks!

[jrb80]

@RomRider it works great, I've been waiting so long for this update, many thanks! Here is the same graph comparison from the original issue report, the Apex chart correctly displays the server time, brilliant!

[Sammy990]

Not sure if this is my "homemade" issue, or a general one. I have a apex card for Tibber prices forecast. Since the update it now correctly uses the server time in the card, but the chart is placed wrong. It should starting the graph from midnight, but it does start much later...

type: custom:apexcharts-card
experimental:
  color_threshold: true
all_series_config:
  unit: Cent/kWh
apex_config:
  grid:
    show: true
    borderColor: '#E0E0E0'
  chart:
    height: 250px
  tooltip:
    enabled: true
    followCursor: false
    x:
      show: false
    fixed:
      enabled: true
header:
  show: true
  title: Strompreis
  show_states: true
  colorize_states: true
  standard_format: false
graph_span: 48h
now:
  show: true
  color: 9E9E9E
span:
  start: day
series:
  - entity: sensor.tibber_prices
    show:
      in_header: before_now
      name_in_header: false
    color_threshold:
      - value: 0
        color: 4DD0E1
      - value: 10
        color: 26A69A
      - value: 15
        color: 4CAF50
      - value: 20
        color: 7CB342
      - value: 25
        color: FBC02D
      - value: 30
        color: EF6C00
      - value: 40
        color: B71C1C
    type: line
    curve: stepline
    extend_to: false
    stroke_width: 4
    float_precision: 2
    data_generator: |
      const noon = new Date()
      noon.setHours(0, 0, 0, 0)
      const prices = entity.attributes.today.concat(entity.attributes.tomorrow);
      const data = [];
      for(let i = 0; i < prices.length; i++) {
        data.push([noon.getTime() + i * 1000 * 3600, prices[i].total * 100])
      }
      return data;

[RomRider]

Because new Date() followed by setHours uses your local time and not the server time.
Use moment.js with moment.tz instead of the date object.
Or maybe you can even use start instead.

data.push([start.getTime() + i * 1000 * 3600, prices[i].total * 100])