diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml index 8379a4f..f0d631f 100644 --- a/.devcontainer/ui-lovelace.yaml +++ b/.devcontainer/ui-lovelace.yaml @@ -816,3 +816,20 @@ views: return entity.attributes.forecast.map((entry) => { return [new Date(entry.datetime).getTime(), entry.templow]; }); + - type: 'custom:apexcharts-card' + span: + end: day + hours_12: false + header: + show: true + show_states: true + colorize_states: true + all_series_config: + stroke_width: 2 + series: + - entity: sensor.pvpc + name: Daikin + type: column + group_by: + func: sum + duration: 120min diff --git a/README.md b/README.md index 9c118ee..2a44d38 100644 --- a/README.md +++ b/README.md @@ -132,7 +132,7 @@ The card stricly validates all the options available (but not for the `apex_conf | `graph_span` | string | `24h` | v1.1.0 | The span of the graph as a time interval. Valid values are any time string, eg: `1h`, `12min`, `1d`, `1h25`, `10sec`, ... | | `span` | object | | v1.2.0 | See [span](#span-options) | | `show` | object | | v1.0.0 | See [show](#main-show-options) | -| ~~`hours_12`~~ | ~~boolean~~ | ~~`false`~~ | ~~v1.5.0~~ | **Deprecated since v1.7.0** ~~Display time in 12h format instead of the default 24h format~~ | +| `hours_12` | boolean | | NEXT_VERSION | If undefined, it will follow Home-Assistant's locale. If `true`, it will force time to be displayed in 12h format. If `false` it will force the time to be displayed in 24h format. | | `cache` | boolean | `true` | v1.0.0 | Use in-browser data caching to reduce the load on Home Assistant's server | | `stacked` | boolean | `false` | v1.0.0 | Enable if you want the data to be stacked on the graph | | `layout` | string | | v1.0.0 | See [layouts](#layouts) | diff --git a/src/apex-layouts.ts b/src/apex-layouts.ts index d6e35df..5e43efe 100644 --- a/src/apex-layouts.ts +++ b/src/apex-layouts.ts @@ -190,7 +190,7 @@ function getLabels(config: ChartCardConfig, hass: HomeAssistant | undefined) { function getXAxis(config: ChartCardConfig, hass: HomeAssistant | undefined) { if (TIMESERIES_TYPES.includes(config.chart_type)) { - const hours12 = is12Hour(config.locale || hass?.language || 'en'); + const hours12 = config.hours_12 !== undefined ? config.hours_12 : is12Hour(config.locale || hass?.language || 'en'); return { type: 'datetime', // range: getMilli(config.hours_to_show), @@ -232,17 +232,38 @@ function getDateTimeFormatter(hours12: boolean | undefined): unknown { } } -function getXTooltipFormatter(config: ChartCardConfig, lang: string): ((val: number) => string) | undefined { +function getXTooltipFormatter( + config: ChartCardConfig, + lang: string, +): ((val: number, _a: any, _b: any) => string) | undefined { if (config.apex_config?.tooltip?.x?.format) return undefined; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + let hours12: any = undefined; + if (config.hours_12 !== undefined) { + hours12 = config.hours_12 ? { hour12: true } : { hourCycle: 'h23' }; + } // eslint-disable-next-line @typescript-eslint/no-non-null-assertion return parse(config.graph_span)! < HOUR_24 && !config.span?.offset - ? function (val) { + ? function (val, _a, _b, hours_12 = hours12) { // eslint-disable-next-line @typescript-eslint/no-explicit-any - return new Intl.DateTimeFormat(lang, { timeStyle: 'medium' } as any).format(val); + return new Intl.DateTimeFormat(lang, { + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + ...hours_12, + } as any).format(val); } - : function (val) { + : function (val, _a, _b, hours_12 = hours12) { // eslint-disable-next-line @typescript-eslint/no-explicit-any - return new Intl.DateTimeFormat(lang, { dateStyle: 'medium', timeStyle: 'medium' } as any).format(val); + return new Intl.DateTimeFormat(lang, { + year: 'numeric', + month: 'short', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + ...hours_12, + } as any).format(val); }; } diff --git a/src/types-config-ti.ts b/src/types-config-ti.ts index 2273108..fd7ad2a 100644 --- a/src/types-config-ti.ts +++ b/src/types-config-ti.ts @@ -14,6 +14,7 @@ export const ChartCardExternalConfig = t.iface([], { "disable_config_validation": t.opt("boolean"), "hidden_by_default": t.opt("boolean"), })), + "hours_12": t.opt("boolean"), "chart_type": t.opt(t.union(t.lit('line'), t.lit('scatter'), t.lit('pie'), t.lit('donut'), t.lit('radialBar'))), "update_interval": t.opt("string"), "update_delay": t.opt("string"), diff --git a/src/types-config.ts b/src/types-config.ts index 5904129..028e21e 100644 --- a/src/types-config.ts +++ b/src/types-config.ts @@ -8,6 +8,7 @@ export interface ChartCardExternalConfig { disable_config_validation?: boolean; hidden_by_default?: boolean; }; + hours_12?: boolean; chart_type?: 'line' | 'scatter' | 'pie' | 'donut' | 'radialBar'; update_interval?: string; update_delay?: string;