feat: Display the card version on the card (useful for debugging)

Author: RomRider

.devcontainer/ui-lovelace.yaml

@@ -1364,6 +1364,8 @@ views:
         stacked: true
         cache: false
         graph_span: 5min
+        show:
+          version: true
         header:
           show: true
           show_states: true

README.md

@@ -279,6 +279,7 @@ series:
 | ---- | :--: | :-----: | :---: | ----------- |
 | `loading` | boolean | `true` | v1.0.0 | Displays a spinning icon while the data is loading/updating |
 | `last_updated` | boolean | `false` | v1.10.0 | Show the last time the chart was updated on the bottom right |
+| `version` | boolean | `false` | NEXT_VERSION | Show the card version on the bottom left (useful for debug) |
 
 ### `header` Options
 

src/apexcharts-card.ts

@@ -593,7 +593,7 @@ class ChartsCard extends LitElement {
             ${this._config.series_in_brush.length ? html`<div id="brush"></div>` : ``}
           </div>
         </div>
-        ${this._renderLastUpdated()}
+        ${this._renderLastUpdated()} ${this._renderVersion()}
       </ha-card>
     `;
   }
@@ -759,6 +759,13 @@ class ChartsCard extends LitElement {
     return html``;
   }
 
+  private _renderVersion(): TemplateResult {
+    if (this._config?.show?.version) {
+      return html` <div id="version_info">apexcharts-card v${pjson.version}</div> `;
+    }
+    return html``;
+  }
+
   private async _initialLoad() {
     await this.updateComplete;
 

src/styles.ts

@@ -121,6 +121,18 @@ export const stylesApex: CSSResultGroup = css`
     opacity: 0.5;
   }
 
+  #version_info {
+    font-size: 0.63em;
+    font-weight: 300;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    position: absolute;
+    bottom: 0px;
+    left: 4px;
+    opacity: 0.5;
+  }
+
   /* Apex Charts Default CSS */
   .apexcharts-canvas {
     position: relative;

src/types-config-ti.ts

@@ -31,6 +31,7 @@ export const ChartCardExternalConfig = t.iface([], {
   "show": t.opt(t.iface([], {
     "loading": t.opt("boolean"),
     "last_updated": t.opt("boolean"),
+    "version": t.opt("boolean"),
   })),
   "cache": t.opt("boolean"),
   "stacked": t.opt("boolean"),

src/types-config.ts

@@ -25,6 +25,7 @@ export interface ChartCardExternalConfig {
   show?: {
     loading?: boolean;
     last_updated?: boolean;
+    version?: boolean;
   };
   cache?: boolean;
   stacked?: boolean;