feat: support for server time

Closes #709, closes #579

.devcontainer/ui-lovelace.yaml

@@ -1314,6 +1314,7 @@ views:
  const tomorrow = new Date(start.getTime() + 25 * 1000 * 60 * 60);
  const tomorrow2 = new Date(start.getTime() + 28 * 1000 * 60 * 60);
  return [
+ [start.getTime(), 5],
  [tomorrow.getTime(), 30],
  [tomorrow2.getTime(), 20]
  ];

hacs.json

@@ -1,4 +1,5 @@
 {
- "name": "apexcharts-card",
- "render_readme": true
+ "name": "apexcharts-card",
+ "homeassistant": "2023.7.0",
+ "render_readme": true
 }

package.json

@@ -40,6 +40,7 @@
  "moment": "^2.30.1",
  "moment-duration-format": "^2.3.2",
  "moment-range": "^4.0.2",
+ "moment-timezone": "^0.5.45",
  "parse-duration": "^1.1.0",
  "spark-md5": "^3.0.2",
  "tinycolor": "^0.0.1",

src/apexcharts-card.ts

@@ -38,6 +38,8 @@ import {
  validateInterval,
  validateOffset,
  getLovelace,
+ isUsingServerTimezone,
+ computeTimezoneDiffWithLocal,
 } from './utils';
 import ApexCharts from 'apexcharts';
 import { Ripple } from '@material/mwc-ripple';
@@ -80,6 +82,7 @@ import {
 import parse from 'parse-duration';
 import tinycolor from '@ctrl/tinycolor';
 import { actionHandler } from './action-handler-directive';
+import { OverrideFrontendLocaleData } from './types-ha';
 
 /* eslint no-console: 0 */
 console.info(
@@ -163,6 +166,8 @@ class ChartsCard extends LitElement {
 
  private _yAxisConfig?: ChartCardYAxis[];
 
+ private _serverTimeOffset = 0;
+
  @property({ attribute: false }) _lastUpdated: Date = new Date();
 
  @property({ type: Boolean }) private _warning = false;
@@ -287,6 +292,7 @@ class ChartsCard extends LitElement {
  this._loaded = false;
  this._dataLoaded = false;
  this._updating = false;
+ this._serverTimeOffset = 0;
  if (this._apexBrush) {
  this._apexBrush.destroy();
  this._apexBrush = undefined;
@@ -753,6 +759,10 @@ class ChartsCard extends LitElement {
  private async _initialLoad() {
  await this.updateComplete;
 
+ if (isUsingServerTimezone(this._hass)) {
+ this._serverTimeOffset = computeTimezoneDiffWithLocal(this._hass?.config.time_zone);
+ }
+
  if (!this._apexChart && this.shadowRoot && this._config && this.shadowRoot.querySelector('#graph')) {
  this._loaded = true;
  const graph = this.shadowRoot.querySelector('#graph');
@@ -826,33 +836,41 @@ class ChartsCard extends LitElement {
  const offset = (this._seriesOffset[index] || 0) - (this._seriesTimeDelta[index] || 0);
  if (offset) {
  data = offsetData(graph.history, offset);
+ } else if (this._serverTimeOffset) {
+ data = offsetData(graph.history, this._serverTimeOffset);
  } else {
  data = [...graph.history];
  }
  if (this._config?.series[index].type !== 'column' && this._config?.series[index].extend_to) {
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  const lastPoint = data.slice(-1)[0]!;
- if (this._config?.series[index].extend_to === 'end' && lastPoint[0] < end.getTime()) {
+ if (
+ this._config?.series[index].extend_to === 'end' &&
+ lastPoint[0] < end.getTime() - this._serverTimeOffset
+ ) {
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
- data.push([end.getTime(), lastPoint[1]]);
- } else if (this._config?.series[index].extend_to === 'now' && lastPoint[0] < now.getTime()) {
+ data.push([end.getTime() - this._serverTimeOffset, lastPoint[1]]);
+ } else if (
+ this._config?.series[index].extend_to === 'now' &&
+ lastPoint[0] < now.getTime() - this._serverTimeOffset
+ ) {
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
- data.push([now.getTime(), lastPoint[1]]);
+ data.push([now.getTime() - this._serverTimeOffset, lastPoint[1]]);
  }
  }
  const result = this._config?.series[index].invert ? { data: this._invertData(data) } : { data };
  if (this._config?.series[index].show.in_chart) graphData.series.push(result);
  if (this._config?.series[index].show.in_brush) brushData.series.push(result);
  return;
  });
- graphData.annotations = this._computeAnnotations(start, end, now);
+ graphData.annotations = this._computeAnnotations(start, end, new Date(now.getTime() - this._serverTimeOffset));
  if (this._yAxisConfig) {
  graphData.yaxis = this._computeYAxisAutoMinMax(start, end);
  }
  if (!this._apexBrush) {
  graphData.xaxis = {
- min: start.getTime(),
- max: this._findEndOfChart(end, false),
+ min: start.getTime() - this._serverTimeOffset,
+ max: this._findEndOfChart(new Date(end.getTime() - this._serverTimeOffset), false),
  };
  }
  } else {
@@ -949,8 +967,8 @@ class ChartsCard extends LitElement {
  TIMESERIES_TYPES.includes(this._config.chart_type) ? false : true,
  );
  if (this._apexBrush) {
- const newMin = start.getTime();
- const newMax = this._findEndOfChart(end, false);
+ const newMin = start.getTime() - this._serverTimeOffset;
+ const newMax = this._findEndOfChart(new Date(end.getTime() - this._serverTimeOffset), false);
  brushData.xaxis = {
  min: newMin,
  max: newMax,
@@ -1008,6 +1026,7 @@ class ChartsCard extends LitElement {
  ? new Date(start.getTime() + this._seriesOffset[index]).getTime()
  : start.getTime(),
  this._seriesOffset[index] ? new Date(end.getTime() + this._seriesOffset[index]).getTime() : end.getTime(),
+ this._serverTimeOffset,
  ) || {
  min: [0, null],
  max: [0, null],
@@ -1444,14 +1463,18 @@ class ChartsCard extends LitElement {
  private _getSpanDates(): { start: Date; end: Date } {
  let end = new Date();
  let start = new Date(end.getTime() - this._graphSpan + 1);
- // Span
+ const curMoment = moment();
+ if ((this._hass?.locale as OverrideFrontendLocaleData).time_zone === 'server') {
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ curMoment.tz(this._hass!.config.time_zone);
+ }
  if (this._config?.span?.start) {
  // Just Span
- const startM = moment().startOf(this._config.span.start);
+ const startM = curMoment.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);
+ const endM = curMoment.endOf(this._config.span.end);
  end = new Date(endM.toDate().getTime() + 1);
  start = new Date(end.getTime() - this._graphSpan + 1);
  }

src/const.ts

@@ -1,4 +1,4 @@
-import Moment from 'moment';
+import Moment from 'moment-timezone';
 import { extendMoment } from 'moment-range';
 import momentDurationFormatSetup from 'moment-duration-format';
 

src/graphEntry.ts

@@ -135,11 +135,15 @@ export default class GraphEntry {
  return Math.max(...this._computedHistory.flatMap((item) => (item[1] === null ? [] : [item[1]])));
  }
 
- public minMaxWithTimestamp(start: number, end: number): { min: HistoryPoint; max: HistoryPoint } | undefined {
+ public minMaxWithTimestamp(
+ start: number,
+ end: number,
+ serverOffset = 0,
+ ): { min: HistoryPoint; max: HistoryPoint } | undefined {
  if (!this._computedHistory || this._computedHistory.length === 0) return undefined;
  if (this._computedHistory.length === 1)
  return { min: [start, this._computedHistory[0][1]], max: [end, this._computedHistory[0][1]] };
- return this._computedHistory.reduce(
+ const minMax = this._computedHistory.reduce(
  (acc: { min: HistoryPoint; max: HistoryPoint }, point) => {
  if (point[1] === null) return acc;
  if (point[0] > end || point[0] < start) return acc;
@@ -149,6 +153,11 @@ export default class GraphEntry {
  },
  { min: [0, null], max: [0, null] },
  );
+ if (serverOffset) {
+ if (minMax.min[0]) minMax.min[0] -= serverOffset;
+ if (minMax.max[0]) minMax.max[0] -= serverOffset;
+ }
+ return minMax;
  }
 
  public minMaxWithTimestampForYAxis(start: number, end: number): { min: HistoryPoint; max: HistoryPoint } | undefined {

src/types-ha.ts

@@ -0,0 +1,48 @@
+export enum NumberFormat {
+ language = 'language',
+ system = 'system',
+ comma_decimal = 'comma_decimal',
+ decimal_comma = 'decimal_comma',
+ space_comma = 'space_comma',
+ none = 'none',
+}
+
+export enum TimeFormat {
+ language = 'language',
+ system = 'system',
+ am_pm = '12',
+ twenty_four = '24',
+}
+
+export enum TimeZone {
+ local = 'local',
+ server = 'server',
+}
+
+export enum DateFormat {
+ language = 'language',
+ system = 'system',
+ DMY = 'DMY',
+ MDY = 'MDY',
+ YMD = 'YMD',
+}
+
+export enum FirstWeekday {
+ language = 'language',
+ monday = 'monday',
+ tuesday = 'tuesday',
+ wednesday = 'wednesday',
+ thursday = 'thursday',
+ friday = 'friday',
+ saturday = 'saturday',
+ sunday = 'sunday',
+}
+
+export interface OverrideFrontendLocaleData {
+ language: string;
+ number_format: NumberFormat;
+ time_format: TimeFormat;
+ date_format: DateFormat;
+ first_weekday: FirstWeekday;
+ time_zone: TimeZone;
+}

src/utils.ts

@@ -6,6 +6,7 @@ import parse from 'parse-duration';
 import { ChartCardExternalConfig, ChartCardPrettyTime, ChartCardSeriesExternalConfig } from './types-config';
 import { DEFAULT_FLOAT_PRECISION, DEFAULT_MAX, DEFAULT_MIN, moment, NO_VALUE } from './const';
 import { formatNumber, FrontendLocaleData, HomeAssistant } from 'custom-card-helpers';
+import { OverrideFrontendLocaleData } from './types-ha';
 
 export function compress(data: unknown): string {
  return lzStringCompress(JSON.stringify(data));
@@ -325,3 +326,12 @@ export function myFormatNumber(
  maximumFractionDigits: precision === undefined ? DEFAULT_FLOAT_PRECISION : precision,
  });
 }
+
+export function computeTimezoneDiffWithLocal(timezone: string | undefined): number {
+ if (!timezone) return 0;
+ return (moment().utcOffset() - moment().tz(timezone).utcOffset()) * 60 * 1000;
+}
+
+export function isUsingServerTimezone(/*config: ChartCardConfig, */ hass: HomeAssistant | undefined): boolean {
+ return (hass?.locale as OverrideFrontendLocaleData).time_zone === 'server';
+}