diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts index 2323dbb..31e5da2 100644 --- 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`
${lastUpdated}
`; + return html`
${formatApexDate(this._config, this._hass, this._lastUpdated, true)}
`; } 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 index a3e63cd..070905e 100644 --- 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,