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,