feat: Bring back hours_12 from the dead

vingerha · Feb 23, 2021 · 676bdb7 · 676bdb7
1 parent c097431
commit 676bdb7
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;