fix: annotations with time were not following the time format configu…

…ration
lobodart · Apr 19, 2022 · 5d08853 · 5d08853
1 parent 3dd4904
commit 5d08853
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 21 deletions.
diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts
@@ -22,6 +22,8 @@ import {
   computeTextColor,
   computeUom,
   decompress,
+  formatApexDate,
+  getLang,
   getPercentFromValue,
   interpolateColor,
   is12Hour,
@@ -685,20 +687,7 @@ class ChartsCard extends LitElement {
 
   private _renderLastUpdated(): TemplateResult {
     if (this._config?.show?.last_updated) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      let hours12: any = undefined;
-      hours12 = is12Hour(this._config, this._hass) ? { hour12: true } : { hourCycle: 'h23' };
-      const lastUpdated = new Intl.DateTimeFormat(this._config.locale || this._hass?.language || 'en', {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-        hour: 'numeric',
-        minute: 'numeric',
-        second: 'numeric',
-        ...hours12,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      } as any).format(this._lastUpdated);
-      return html` <div id="last_updated">${lastUpdated}</div> `;
+      return html` <div id="last_updated">${formatApexDate(this._config, this._hass, this._lastUpdated, true)}</div> `;
     }
     return html``;
   }
@@ -1045,10 +1034,12 @@ class ChartsCard extends LitElement {
         bgColorTime.isValid && bgColorTime.getLuminance() > 0.5 ? bgColorTime.darken(20) : bgColorTime.lighten(20);
       const txtColorTime = computeTextColor(bgColorTime.toHexString());
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const options: any = { timeStyle: 'medium' };
+      let options: any = { timeStyle: 'medium' };
       if (!sameDay) {
         options.dateStyle = 'medium';
       }
+      options = { ...options, ...(is12Hour(this._config, this._hass) ? { hour12: true } : { hourCycle: 'h23' }) };
+      const lang = getLang(this._config, this._hass);
       points.push({
         x: offset ? value[0] - offset : value[0],
         y: invert && value[1] ? -value[1] : value[1],
@@ -1058,9 +1049,7 @@ class ChartsCard extends LitElement {
           size: 0,
         },
         label: {
-          text: `${Intl.DateTimeFormat(this._config?.locale || this._hass?.language || 'en', options).format(
-            value[0],
-          )}`,
+          text: `${Intl.DateTimeFormat(lang, options).format(value[0])}`,
           borderColor: 'var(--card-background-color)',
           offsetY: -22,
           borderWidth: 0,

diff --git a/src/utils.ts b/src/utils.ts
@@ -234,8 +234,8 @@ export function is12HourFromLocale(locale: string): boolean {
   return !(new Date(2021, 1, 1, 15, 0, 0, 0).toLocaleTimeString(locale).indexOf('15') > -1);
 }
 
-export function is12Hour(config: ChartCardConfig, hass: HomeAssistant | undefined): boolean {
-  if (config.hours_12 !== undefined) {
+export function is12Hour(config: ChartCardConfig | undefined, hass: HomeAssistant | undefined): boolean {
+  if (config?.hours_12 !== undefined) {
     return config.hours_12;
   } else {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -250,11 +250,46 @@ export function is12Hour(config: ChartCardConfig, hass: HomeAssistant | undefine
       }
     } else {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      return is12HourFromLocale(config.locale || hass?.language || 'en');
+      return is12HourFromLocale(getLang(config, hass));
     }
   }
 }
 
+export function formatApexDate(
+  config: ChartCardConfig,
+  hass: HomeAssistant | undefined,
+  value: Date,
+  withDate = true,
+): string {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const hours12 = is12Hour(config, hass) ? { hour12: true } : { hourCycle: 'h23' };
+  const lang = getLang(config, hass);
+  if (withDate) {
+    return new Intl.DateTimeFormat(lang, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+      second: 'numeric',
+      ...hours12,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any).format(value);
+  } else {
+    return new Intl.DateTimeFormat(lang, {
+      hour: 'numeric',
+      minute: 'numeric',
+      second: 'numeric',
+      ...hours12,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any).format(value);
+  }
+}
+
+export function getLang(config: ChartCardConfig | undefined, hass: HomeAssistant | undefined): string {
+  return config?.locale || hass?.language || 'en';
+}
+
 export function truncateFloat(
   value: string | number | null | undefined,
   precision: number | undefined,