feat: uses the time format defined in Home Assistant user profile

Fix #213

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) |

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) {

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,