feat(now): Add a marker at the current time on the chart

Fixes RomRider#44

.devcontainer/ui-lovelace.yaml

@@ -261,6 +261,10 @@ views:
             span:
               start: day
             y_axis_precision: 5
+            now:
+              show: true
+              color: '#ff0000'
+              label: Now
             header:
               show: true
               show_states: true

README.md

@@ -33,6 +33,7 @@ However, some things might be broken :grin:
   - [`series.show` Options](#seriesshow-options)
   - [Main `show` Options](#main-show-options)
   - [`header` Options](#header-options)
+  - [`now` Options](#now-options)
   - [`group_by` Options](#group_by-options)
   - [`func` Options](#func-options)
   - [`chart_type` Options](#chart_type-options)
@@ -124,7 +125,8 @@ The card stricly validates all the options available (but not for the `apex_conf
 | `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) |
-| `header` | string | | v1.0.0 | See [header](#header-options) |
+| `header` | object | | v1.0.0 | See [header](#header-options) |
+| `now` | object | | NEXT_VERSION | See []
 | `y_axis_precision` | numnber | `1` | v1.2.0 | The float precision used to display numbers on the Y axis |
 | `apex_config`| object | | v1.0.0 | Apexcharts API 1:1 mapping. You call see all the options [here](https://apexcharts.com/docs/installation/) --> `Options (Reference)` in the Menu. See [Apex Charts](#apex-charts-options-example) |
 
@@ -178,6 +180,18 @@ The card stricly validates all the options available (but not for the `apex_conf
 | `show_states` | boolean | `false` | v1.1.0 | Show or hide the states in the header |
 | `colorize_states` | boolean | `false` | v1.1.0 | Colorize the states based on the color of the serie |
 
+### `now` Options
+
+The position of the marker will only update when the card updates (state change or `update_interval`).
+
+| Name | Type | Default | Since | Description |
+| ---- | :--: | :-----: | :---: | ----------- |
+| `show` | boolean | `false` | NEXT_VERSION | Shows a vertical marker for the current time on the graph. Only useful if displaying data from the future |
+| `color` | string | `var(--primary-color)` | NEXT_VERSION | Color of the marker. The color of the text is computed automatically. |
+| `label` | string | | NEXT_VERSION | Text to display on the label. No label if not defined |
+
+![now_marker](docs/now-marker.png)
+
 ### `group_by` Options
 
 | Name | Type | Default | Since | Description |

src/apexcharts-card.ts

@@ -6,8 +6,10 @@ import { getLovelace, HomeAssistant } from 'custom-card-helpers';
 import localForage from 'localforage';
 import * as pjson from '../package.json';
 import {
+  computeColor,
   computeColors,
   computeName,
+  computeTextColor,
   computeUom,
   decompress,
   getPercentFromValue,
@@ -458,7 +460,8 @@ class ChartsCard extends LitElement {
         );
       });
       await Promise.all(promise);
-      let graphData: unknown = {};
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      let graphData: any = {};
       if (TIMESERIES_TYPES.includes(this._config.chart_type)) {
         graphData = {
           series: this._graphs.flatMap((graph, index) => {
@@ -489,6 +492,27 @@ class ChartsCard extends LitElement {
           },
           colors: computeColors(this._colors),
         };
+        if (this._config.now?.show) {
+          const color = computeColor(this._config.now.color || 'var(--primary-color)');
+          const textColor = computeTextColor(color);
+          graphData.annotations = {
+            xaxis: [
+              {
+                x: new Date().getTime(),
+                strokeDashArray: 3,
+                label: {
+                  text: this._config.now.label,
+                  borderColor: color,
+                  style: {
+                    color: textColor,
+                    background: color,
+                  },
+                },
+                borderColor: color,
+              },
+            ],
+          };
+        }
       } else {
         // No timeline charts
         graphData = {

src/types-config-ti.ts

@@ -13,6 +13,11 @@ export const ChartCardExternalConfig = t.iface([], {
   "graph_span": t.opt("string"),
   "span": t.opt("ChartCardSpanExtConfig"),
   "y_axis_precision": t.opt("number"),
+  "now": t.opt(t.iface([], {
+    "show": t.opt("boolean"),
+    "color": t.opt("string"),
+    "label": t.opt("string"),
+  })),
   "show": t.opt(t.iface([], {
     "loading": t.opt("boolean"),
   })),

src/types-config.ts

@@ -7,6 +7,11 @@ export interface ChartCardExternalConfig {
   graph_span?: string;
   span?: ChartCardSpanExtConfig;
   y_axis_precision?: number;
+  now?: {
+    show?: boolean;
+    color?: string;
+    label?: string;
+  };
   show?: {
     loading?: boolean;
   };

src/utils.ts

@@ -110,6 +110,15 @@ export function computeColor(color: string): string {
   }
 }
 
+export function computeTextColor(backgroundColor: string): string {
+  const colorObj = new TinyColor(backgroundColor);
+  if (colorObj.isValid && colorObj.getLuminance() > 0.5) {
+    return '#000'; // bright colors - black font
+  } else {
+    return '#fff'; // dark colors - white font
+  }
+}
+
 export function validateInterval(interval: string, prefix: string): number {
   const parsed = parse(interval);
   if (parsed === null) {