feat: Support for 12-hour format (#55)

Fixes #48, Fixes #53

Author: RomRider

.devcontainer/ui-lovelace.yaml

@@ -365,12 +365,17 @@ views:
             # apex_config:
             #   dataLabels:
             #     enabled: true
+            hours_12: true
             header:
               show: true
               title: Light Brightness (attribute test)
             series:
               - entity: light.kitchen_lights
                 attribute: brightness
+            apex_config:
+              tooltip:
+                x:
+                  format: MMM
 
           - type: custom:apexcharts-card
             header:

README.md

@@ -122,6 +122,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` | NEXT_VERSION | Display time in 12h format instead of the default 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

@@ -52,6 +52,7 @@ export function getLayoutConfig(config: ChartCardConfig, hass: HomeAssistant | u
           // range: getMilli(config.hours_to_show),
           labels: {
             datetimeUTC: false,
+            datetimeFormatter: getDateTimeFormatter(config.hours_12),
           },
         }
       : {},
@@ -62,15 +63,7 @@ export function getLayoutConfig(config: ChartCardConfig, hass: HomeAssistant | u
         },
     tooltip: {
       x: {
-        formatter:
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          parse(config.graph_span!)! < HOUR_24 && !config.span?.offset
-            ? function (val) {
-                return moment(new Date(val)).format('HH:mm:ss');
-              }
-            : function (val) {
-                return moment(new Date(val)).format('MMM Do, HH:mm:ss');
-              },
+        formatter: getXTooltipFormatter(config),
       },
       y: {
         formatter: function (value, opts, conf = config, hass2 = hass) {
@@ -243,3 +236,41 @@ export function getLayoutConfig(config: ChartCardConfig, hass: HomeAssistant | u
 
   return config.apex_config ? mergeDeep(mergeDeep(def, conf), config.apex_config) : mergeDeep(def, conf);
 }
+
+function getDateTimeFormatter(hours12: boolean | undefined): unknown {
+  if (!hours12) {
+    return {
+      year: 'yyyy',
+      month: "MMM 'yy",
+      day: 'dd MMM',
+      hour: 'HH:mm',
+      minute: 'HH:mm:ss',
+    };
+  } else {
+    return {
+      year: 'yyyy',
+      month: "MMM 'yy",
+      day: 'dd MMM',
+      hour: 'hh:mm tt',
+      minute: 'hh:mm:ss tt',
+    };
+  }
+}
+
+function getXTooltipFormatter(config: ChartCardConfig): ((val: number) => string) | undefined {
+  if (config.apex_config?.tooltip?.x?.format) return undefined;
+  let hours = 'HH:mm:ss';
+  let days = 'MMM Do, HH:mm:ss';
+  if (config.hours_12) {
+    hours = 'hh:mm:ss a';
+    days = 'MMM Do, hh:mm:ss';
+  }
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  return parse(config.graph_span)! < HOUR_24 && !config.span?.offset
+    ? function (val) {
+        return moment(new Date(val)).format(hours);
+      }
+    : function (val) {
+        return moment(new Date(val)).format(days);
+      };
+}

src/types-config-ti.ts

@@ -11,6 +11,7 @@ export const ChartCardExternalConfig = t.iface([], {
   "update_delay": t.opt("string"),
   "series": t.array("ChartCardSeriesExternalConfig"),
   "graph_span": t.opt("string"),
+  "hours_12": t.opt("boolean"),
   "span": t.opt("ChartCardSpanExtConfig"),
   "y_axis_precision": t.opt("number"),
   "now": t.opt(t.iface([], {

src/types-config.ts

@@ -5,6 +5,7 @@ export interface ChartCardExternalConfig {
   update_delay?: string;
   series: ChartCardSeriesExternalConfig[];
   graph_span?: string;
+  hours_12?: boolean;
   span?: ChartCardSpanExtConfig;
   y_axis_precision?: number;
   now?: {