From 2dd84ffdac637c753ae96f30029190cc99747b8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Wiedemann?= <jerome@wnetworks.org>
Date: Sat, 29 May 2021 07:18:32 +0000
Subject: [PATCH] feat: display the chart's last update time using
 `last_updated`

---
 .devcontainer/ui-lovelace.yaml |  2 ++
 src/apexcharts-card.ts         | 28 +++++++++++++++++++++++++++-
 src/styles.ts                  | 12 ++++++++++++
 src/types-config-ti.ts         |  1 +
 src/types-config.ts            |  1 +
 5 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml
index 80d9edc..3e43916 100644
--- a/.devcontainer/ui-lovelace.yaml
+++ b/.devcontainer/ui-lovelace.yaml
@@ -1023,6 +1023,8 @@ views:
             header:
               show: true
               title: Soft Bounds + fixed bound
+            show:
+              last_updated: true
             graph_span: 20min
             all_series_config:
               stroke_width: 2
diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts
index f265de1..b41b61e 100644
--- a/src/apexcharts-card.ts
+++ b/src/apexcharts-card.ts
@@ -1,5 +1,5 @@
 import 'array-flat-polyfill';
-import { LitElement, html, TemplateResult, PropertyValues, CSSResultGroup } from 'lit';
+import { LitElement, html, TemplateResult, PropertyValues, CSSResultGroup, Template } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { ClassInfo, classMap } from 'lit/directives/class-map.js';
@@ -149,6 +149,8 @@ class ChartsCard extends LitElement {
 
   private _yAxisConfig?: ChartCardYAxis[];
 
+  @property({ attribute: false }) _lastUpdated: Date = new Date();
+
   @property({ type: Boolean }) private _warning = false;
 
   public connectedCallback() {
@@ -553,6 +555,7 @@ class ChartsCard extends LitElement {
             ${this._config.series_in_brush.length ? html`<div id="brush"></div>` : ``}
           </div>
         </div>
+        ${this._renderLastUpdated()}
       </ha-card>
     `;
   }
@@ -618,6 +621,28 @@ class ChartsCard extends LitElement {
     `;
   }
 
+  private _renderLastUpdated(): TemplateResult {
+    if (this._config?.show?.last_updated) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      let hours12: any = undefined;
+      if (this._config.hours_12 !== undefined) {
+        hours12 = this._config.hours_12 ? { hour12: true } : { hourCycle: 'h23' };
+      }
+      const lastUpdated = new Intl.DateTimeFormat(this._config.locale || this._hass?.language || 'en', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        ...hours12,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } as any).format(this._lastUpdated);
+      return html` <div id="last_updated">${lastUpdated}</div> `;
+    }
+    return html``;
+  }
+
   private async _initialLoad() {
     await this.updateComplete;
 
@@ -649,6 +674,7 @@ class ChartsCard extends LitElement {
 
     const { start, end } = this._getSpanDates();
     const now = new Date();
+    this._lastUpdated = now;
     const editMode = getLovelace()?.editMode;
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const caching = editMode === true ? false : this._config!.cache;
diff --git a/src/styles.ts b/src/styles.ts
index f0ac856..a89bc51 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -93,6 +93,18 @@ export const stylesApex: CSSResultGroup = css`
     text-overflow: ellipsis;
   }
 
+  #last_updated {
+    font-size: 0.63em;
+    font-weight: 300;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    position: absolute;
+    bottom: 0px;
+    right: 4px;
+    opacity: 0.5;
+  }
+
   /* Apex Charts Default CSS */
   .apexcharts-canvas {
     position: relative;
diff --git a/src/types-config-ti.ts b/src/types-config-ti.ts
index 19edc7b..5368b90 100644
--- a/src/types-config-ti.ts
+++ b/src/types-config-ti.ts
@@ -30,6 +30,7 @@ export const ChartCardExternalConfig = t.iface([], {
   })),
   "show": t.opt(t.iface([], {
     "loading": t.opt("boolean"),
+    "last_updated": t.opt("boolean"),
   })),
   "cache": t.opt("boolean"),
   "stacked": t.opt("boolean"),
diff --git a/src/types-config.ts b/src/types-config.ts
index 0292463..e02a2e1 100644
--- a/src/types-config.ts
+++ b/src/types-config.ts
@@ -24,6 +24,7 @@ export interface ChartCardExternalConfig {
   };
   show?: {
     loading?: boolean;
+    last_updated?: boolean;
   };
   cache?: boolean;
   stacked?: boolean;