feat(series.show): Display the value before/after the current time in…

… the header

Fixes #86

.devcontainer/ui-lovelace.yaml

@@ -353,6 +353,7 @@ views:
                 float_precision: 5
                 show:
                   extremas: time
+                  in_header: true
                 data_generator: |
                   return [...Array(22).keys()].map((hour) => {
                     const attr = 'price_' + `${hour}`.padStart(2, '0') + 'h';
@@ -391,7 +392,7 @@ views:
                 extend_to_end: false
                 unit: °C
                 show:
-                  in_header: false
+                  in_header: after_now
                 data_generator: |
                   return entity.attributes.forecast.map((entry) => {
                     return [new Date(entry.datetime).getTime(), entry.temperature];

README.md

@@ -176,7 +176,7 @@ The card stricly validates all the options available (but not for the `apex_conf
 | ---- | :--: | :-----: | :---: | ----------- |
 | `legend_value` | boolean | `true` | v1.3.0 | Show/Hide the state in the legend. Will still display the name |
 | `as_duration` | string | | v1.3.0 | Will pretty print the states as durations. Doesn't affect the graph, only the tooltip/legend/header display. You provide the source unit of your sensor. Valid values are `millisecond`, `second`, `minute`, `hour`, `day`, `week`, `month`, `year`.<br/>Eg: if the state is `345` and `as_duration` is set to `minute` then it would display `5h 45m` |
-| `in_header` | boolean or string | `true` | v1.4.0 | If `show_states` is enabled, this would show/hide this specific serie in the header. If set to `raw` (introduced in v1.7.0), it would display the latest raw state of the entity in the header bypassing any grouping/transformation done by the card. |
+| `in_header` | boolean or string | `true` | v1.4.0 | If `show_states` is enabled, this would show/hide this specific serie in the header. If set to `raw` (introduced in v1.7.0), it would display the latest raw state of the entity in the header bypassing any grouping/transformation done by the card. If the graph spans into the future (using `data_generator`): `before_now` would display the value just before the current time and `after_now` would display the value just after the current time (Introduced in NEXT_VERSION) |
 | `header_color_threshold` | boolean | `false` | v1.7.0 | If `true` and `color_threshold` experimental mode is enabled, it will colorize the header's state based on the threshold (ignoring opacity). |
 | `in_chart` | boolean | `true` | v1.4.0 | If `false`, hides the serie from the chart |
 | `datalabels` | boolean or string | `false` | v1.5.0 | If `true` will show the value of each point for this serie directly in the chart. Don't use it if you have a lot of points displayed, it will be a mess. If you set it to `total` (introduced in v1.7.0), it will display the stacked total value (only works when `stacked: true`) |

src/apexcharts-card.ts

@@ -512,12 +512,18 @@ class ChartsCard extends LitElement {
         graphData = {
           series: this._graphs.flatMap((graph, index) => {
             if (!graph) return [];
-            if (this._config?.series[index].show.in_header !== 'raw') {
+            const inHeader = this._config?.series[index].show.in_header;
+            if (inHeader && inHeader !== 'raw') {
+              // not raw
               if (graph.history.length === 0) {
                 this._headerState[index] = null;
-              } else {
+              } else if (inHeader === true) {
+                // last
                 const lastState = graph.history[graph.history.length - 1][1];
                 this._headerState[index] = lastState;
+              } else {
+                // before_now / after_now
+                this._headerState[index] = graph.nowValue(inHeader === 'before_now');
               }
             }
             if (!this._config?.series[index].show.in_chart) {

src/graphEntry.ts

@@ -108,6 +108,18 @@ export default class GraphEntry {
     this._cache = cache;
   }
 
+  public nowValue(before: boolean): number | null {
+    if (this.history.length === 0) return null;
+    const now = new Date().getTime();
+    const index = this.history.findIndex((point, index, arr) => {
+      if (!before && point[0] > now) return true;
+      if (before && point[0] < now && arr[index + 1] && arr[index + 1][0] > now) return true;
+      return false;
+    });
+    if (index === -1) return null;
+    return this.history[index][1];
+  }
+
   get min(): number | undefined {
     if (!this._computedHistory || this._computedHistory.length === 0) return undefined;
     return Math.min(...this._computedHistory.flatMap((item) => (item[1] === null ? [] : [item[1]])));

src/types-config-ti.ts

@@ -66,7 +66,7 @@ export const ChartCardAllSeriesExternalConfig = t.iface([], {
   "show": t.opt(t.iface([], {
     "as_duration": t.opt("ChartCardPrettyTime"),
     "legend_value": t.opt("boolean"),
-    "in_header": t.opt(t.union("boolean", t.lit('raw'))),
+    "in_header": t.opt(t.union("boolean", t.lit('raw'), t.lit('before_now'), t.lit('after_now'))),
     "header_color_threshold": t.opt("boolean"),
     "in_chart": t.opt("boolean"),
     "datalabels": t.opt(t.union("boolean", t.lit('total'))),

src/types-config.ts

@@ -63,7 +63,7 @@ export interface ChartCardAllSeriesExternalConfig {
   show?: {
     as_duration?: ChartCardPrettyTime;
     legend_value?: boolean;
-    in_header?: boolean | 'raw';
+    in_header?: boolean | 'raw' | 'before_now' | 'after_now';
     header_color_threshold?: boolean;
     in_chart?: boolean;
     datalabels?: boolean | 'total';

src/types.ts

@@ -26,7 +26,7 @@ export interface ChartCardSeriesConfig extends ChartCardSeriesExternalConfig {
   show: {
     as_duration?: ChartCardPrettyTime;
     legend_value: boolean;
-    in_header: boolean | 'raw';
+    in_header: boolean | 'raw' | 'before_now' | 'after_now';
     header_color_threshold?: boolean;
     in_chart: boolean;
     datalabels?: boolean | 'total';