feat: display the chart's last update time using last_updated

georgepauna · May 29, 2021 · 2dd84ff · 2dd84ff
1 parent 33fc474
commit 2dd84ff
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -24,6 +24,7 @@ export interface ChartCardExternalConfig {
   };
   show?: {
     loading?: boolean;
+    last_updated?: boolean;
   };
   cache?: boolean;
   stacked?: boolean;