From 78df800f32004c180fb3bebfb4d35ac82858f3c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Wiedemann?= Date: Sun, 24 Oct 2021 16:44:15 +0000 Subject: [PATCH] feat: uses the time format defined in Home Assistant user profile Fix #213 --- README.md | 2 +- src/apex-layouts.ts | 11 +++++------ src/utils.ts | 27 ++++++++++++++++++++++++--- 3 files changed, 30 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 7634e0c..63626db 100644 --- a/README.md +++ b/README.md @@ -139,7 +139,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 | | v1.8.0 | 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. | +| `hours_12` | boolean | | v1.8.0 | If undefined, it will follow Home-Assistant's user time format. 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 e505981..b224bc2 100644 --- a/src/apex-layouts.ts +++ b/src/apex-layouts.ts @@ -54,7 +54,7 @@ export function getLayoutConfig( yaxis: getYAxis(config), tooltip: { x: { - formatter: getXTooltipFormatter(config, config.locale || hass?.language || 'en'), + formatter: getXTooltipFormatter(config, hass), }, y: { formatter: getYTooltipFormatter(config, hass), @@ -208,7 +208,7 @@ function getLabels(config: ChartCardConfig, hass: HomeAssistant | undefined) { function getXAxis(config: ChartCardConfig, hass: HomeAssistant | undefined) { if (TIMESERIES_TYPES.includes(config.chart_type)) { - const hours12 = config.hours_12 !== undefined ? config.hours_12 : is12Hour(config.locale || hass?.language || 'en'); + const hours12 = is12Hour(config, hass); return { type: 'datetime', // range: getMilli(config.hours_to_show), @@ -252,15 +252,14 @@ function getDateTimeFormatter(hours12: boolean | undefined): unknown { function getXTooltipFormatter( config: ChartCardConfig, - lang: string, + hass: HomeAssistant | undefined, // eslint-disable-next-line @typescript-eslint/no-explicit-any ): ((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' }; - } + const lang = config.locale || hass?.language || 'en'; + hours12 = is12Hour(config, hass) ? { 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, _a, _b, hours_12 = hours12) { diff --git a/src/utils.ts b/src/utils.ts index 55f4148..4c87df3 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,11 +1,11 @@ import { HassEntities, HassEntity } from 'home-assistant-js-websocket'; import { compress as lzStringCompress, decompress as lzStringDecompress } from 'lz-string'; -import { EntityCachePoints } from './types'; +import { ChartCardConfig, EntityCachePoints } from './types'; import { TinyColor } from '@ctrl/tinycolor'; 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 { LovelaceConfig } from 'custom-card-helpers'; +import { HomeAssistant, LovelaceConfig } from 'custom-card-helpers'; export function compress(data: unknown): string { return lzStringCompress(JSON.stringify(data)); @@ -230,10 +230,31 @@ export function mergeDeepConfig(target: any, source: any): any { return target; } -export function is12Hour(locale: string): boolean { +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) { + return config.hours_12; + } else { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const hassLocale = (hass as any)?.locale; + if (hassLocale?.time_format) { + if (hassLocale.time_format === 'language') { + return is12HourFromLocale(hassLocale.language); + } else if (hassLocale.time_format === 'system') { + return is12HourFromLocale(navigator.language); + } else { + return hassLocale.time_format === '12'; + } + } else { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + return is12HourFromLocale(config.locale || hass?.language || 'en'); + } + } +} + export function truncateFloat( value: string | number | null | undefined, precision: number | undefined,