feat(experimental): Header color can now follow color_threshold (Ro…

…mRider#88)

Fixes RomRider#78

.devcontainer/ui-lovelace.yaml

@@ -100,7 +100,7 @@ views:
                 group_by:
                   duration: 1m
                   func: last
-                transform: console.log(entity);  return x/10;
+                transform: return x/10;
                 color_threshold:
                   - value: 33
                     color: '#00ff00'
@@ -550,11 +550,17 @@ views:
                 transform: "return x === 'on' ? 1 : 0;"
           - type: custom:apexcharts-card
             graph_span: 30min
+            header:
+              show: true
+              show_states: true
+              colorize_states: true
             experimental:
               color_threshold: true
             series:
               - entity: sensor.random0_100
                 transform: return x / 2 - 15;
+                show:
+                  header_color_threshold: true
                 color_threshold:
                   - value: -10
                     # color can be a color name, rgb(r, g, b), '#0000ff' or var(--color-variable)
@@ -573,12 +579,18 @@ views:
             graph_span: 30min
             experimental:
               color_threshold: true
+            header:
+              show: true
+              show_states: true
+              colorize_states: true
             series:
               - entity: sensor.random0_100
                 type: area
                 stroke_width: 0
                 opacity: 0.5
                 transform: return x / 2 - 15;
+                show:
+                  header_color_threshold: true
                 invert: true
                 color_threshold:
                   - value: -10
@@ -596,13 +608,19 @@ views:
                     color: orange
           - type: custom:apexcharts-card
             graph_span: 30min
+            header:
+              show: true
+              show_states: true
+              colorize_states: true
             experimental:
               color_threshold: true
             series:
               - entity: sensor.random0_100
                 type: column
                 # stroke_width: 0
                 transform: return x / 2 - 15;
+                show:
+                  header_color_threshold: true
                 color_threshold:
                   - value: -10
                     # color can be a color name, rgb(r, g, b), '#0000ff' or var(--color-variable)

README.md

@@ -177,6 +177,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 NEXT_VERSION), it would display the latest raw state of the entity in the header bypassing any grouping/transformation done by the card. |
+| `header_color_threshold` | boolean | `false` | NEXT_VERSION | 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 NEXT_VERSION), it will display the stacked total value (only works when `stacked: true`) |
 | `hidden_by_default` | boolean | `false` | v1.6.0 | See [experimental](#hidden_by_default-experimental-feature) |

src/apexcharts-card.ts

@@ -457,13 +457,7 @@ class ChartsCard extends LitElement {
             return html`
               <div id="states__state">
                 <div id="state__value">
-                  <span
-                    id="state"
-                    style="${this._config?.header?.colorize_states &&
-                    this._headerColors &&
-                    this._headerColors.length > 0
-                      ? `color: ${this._headerColors[index]};`
-                      : ''}"
+                  <span id="state" style="${this._computeHeaderStateColor(serie, this._headerState?.[index])}"
                     >${this._headerState?.[index] === 0
                       ? 0
                       : serie.show.as_duration
@@ -788,6 +782,46 @@ class ChartsCard extends LitElement {
     return invert ? result : result.reverse();
   }
 
+  private _computeHeaderStateColor(serie: ChartCardSeriesConfig, value: number | null): string {
+    let color = '';
+    if (this._config?.header?.colorize_states) {
+      if (
+        this._config.experimental?.color_threshold &&
+        serie.show.header_color_threshold &&
+        serie.color_threshold &&
+        serie.color_threshold.length > 0 &&
+        value !== null
+      ) {
+        const index = serie.color_threshold.findIndex((thres) => {
+          return thres.value > value;
+        });
+        if (index < 0) {
+          color = computeColor(
+            serie.color_threshold[serie.color_threshold.length - 1].color || this._headerColors[serie.index],
+          );
+        } else if (index === 0) {
+          color = computeColor(serie.color_threshold[0].color || this._headerColors[serie.index]);
+        } else {
+          const prev = serie.color_threshold[index - 1];
+          const next = serie.color_threshold[index];
+          if (serie.type === 'column') {
+            color = computeColor(prev.color || this._headerColors[serie.index], false);
+          } else {
+            const factor = (value - prev.value) / (next.value - prev.value);
+            color = interpolateColor(
+              computeColor(prev.color || this._headerColors[serie.index], false),
+              computeColor(next.color || this._headerColors[serie.index], false),
+              factor,
+            );
+          }
+        }
+      } else {
+        return this._headerColors && this._headerColors.length > 0 ? `color: ${this._headerColors[serie.index]};` : '';
+      }
+    }
+    return color ? `color: ${color};` : '';
+  }
+
   private _computeLastState(value: number | null, index: number): string | number | null {
     return truncateFloat(value, this._config?.series[index].float_precision);
   }

src/types-config-ti.ts

@@ -65,6 +65,7 @@ export const ChartCardAllSeriesExternalConfig = t.iface([], {
     "as_duration": t.opt("ChartCardPrettyTime"),
     "legend_value": t.opt("boolean"),
     "in_header": t.opt(t.union("boolean", t.lit('raw'))),
+    "header_color_threshold": t.opt("boolean"),
     "in_chart": t.opt("boolean"),
     "datalabels": t.opt(t.union("boolean", t.lit('total'))),
     "hidden_by_default": t.opt("boolean"),
@@ -101,6 +102,7 @@ export const ChartCardSeriesExternalConfig = t.iface([], {
     "as_duration": t.opt("ChartCardPrettyTime"),
     "legend_value": t.opt("boolean"),
     "in_header": t.opt(t.union("boolean", t.lit('raw'))),
+    "header_color_threshold": t.opt("boolean"),
     "in_chart": t.opt("boolean"),
     "datalabels": t.opt(t.union("boolean", t.lit('total'))),
     "hidden_by_default": t.opt("boolean"),

src/types-config.ts

@@ -62,6 +62,7 @@ export interface ChartCardAllSeriesExternalConfig {
     as_duration?: ChartCardPrettyTime;
     legend_value?: boolean;
     in_header?: boolean | 'raw';
+    header_color_threshold?: boolean;
     in_chart?: boolean;
     datalabels?: boolean | 'total';
     hidden_by_default?: boolean;
@@ -102,6 +103,7 @@ export interface ChartCardSeriesExternalConfig {
     as_duration?: ChartCardPrettyTime;
     legend_value?: boolean;
     in_header?: boolean | 'raw';
+    header_color_threshold?: boolean;
     in_chart?: boolean;
     datalabels?: boolean | 'total';
     hidden_by_default?: boolean;

src/types.ts

@@ -27,6 +27,7 @@ export interface ChartCardSeriesConfig extends ChartCardSeriesExternalConfig {
     as_duration?: ChartCardPrettyTime;
     legend_value: boolean;
     in_header: boolean | 'raw';
+    header_color_threshold?: boolean;
     in_chart: boolean;
     datalabels?: boolean | 'total';
     hidden_by_default?: boolean;