feat: display only the min or max extrema

Fix: #319

.devcontainer/ui-lovelace.yaml

@@ -1155,23 +1155,78 @@ views:
                   duration: 3min
 
   - title: Main2
+    panel: true
     cards:
-      - type: custom:apexcharts-card
-        graph_span: 1h
-        header:
-          show: true
-          show_states: true
-        series:
-          - entity: sensor.random_0_1000
-            float_precision: 0
-            show:
-              in_header: true
-            group_by:
-              duration: 15min
-              func: avg
-            header_actions:
-              tap_action:
-                action: fire-dom-event
-                browser_mod:
-                  command: toast
-                  message: Hello, world!
+      - type: grid
+        columns: 3
+        cards:
+          - type: custom:apexcharts-card
+            graph_span: 1h
+            header:
+              show: true
+              show_states: true
+            series:
+              - entity: sensor.random_0_1000
+                float_precision: 0
+                show:
+                  in_header: true
+                group_by:
+                  duration: 15min
+                  func: avg
+                header_actions:
+                  tap_action:
+                    action: fire-dom-event
+                    browser_mod:
+                      command: toast
+                      message: Hello, world!
+
+          - type: custom:apexcharts-card
+            graph_span: 1h
+            header:
+              show: true
+              title: Test Extremas
+            series:
+              - entity: sensor.random_0_1000
+                name: Min
+                float_precision: 0
+                show:
+                  extremas: min
+                group_by:
+                  duration: 2min
+                  func: avg
+              - entity: sensor.random_0_1000
+                name: Max
+                float_precision: 0
+                transform: return Number(x) + 200;
+                show:
+                  extremas: max
+                group_by:
+                  duration: 2min
+                  func: avg
+              - entity: sensor.random_0_1000
+                name: Min+Time
+                float_precision: 0
+                transform: return Number(x) + 400;
+                show:
+                  extremas: min+time
+                group_by:
+                  duration: 2min
+                  func: avg
+              - entity: sensor.random_0_1000
+                name: Max+Time
+                float_precision: 0
+                transform: return Number(x) + 600;
+                show:
+                  extremas: max+time
+                group_by:
+                  duration: 2min
+                  func: avg
+              - entity: sensor.random_0_1000
+                name: All
+                float_precision: 0
+                transform: return Number(x) + 800;
+                show:
+                  extremas: true
+                group_by:
+                  duration: 2min
+                  func: avg

README.md

@@ -194,7 +194,7 @@ The card stricly validates all the options available (but not for the `apex_conf
 | `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`). If you set it to `percent`, it will display the percentage of the serie instead of the value in the case of a `pie` or `donut` chart. |
 | `hidden_by_default` | boolean | `false` | v1.6.0 | See [experimental](#hidden_by_default-experimental-feature) |
-| `extremas` | boolean or string | `false` | v1.7.0 | If `true`, will show the min and the max of the serie in the chart. If the value is `time`, it will display also the time of the min/max value on top of the value. This feature doesn't work with `stacked: true`. |
+| `extremas` | boolean or string | `false` | v1.7.0 | If `true`, will show the min and the max of the serie in the chart.  If the value is `time`, it will display also the time of the min/max value on top of the value. From NEXT_VERSION, `min` or `max` will display the min or the max only and `min+time` or `max+time` will display the time of the min or the max. Displaying the time doesn't work with `stacked: true`. |
 | `in_brush` | boolean | `false` | v1.8.0 | See [brush](#brush-experimental-feature) |
 | `offset_in_name` | boolean | `true` | v1.8.0 | If `true`, appends the offset information to the name of the serie. If `false`, it doesn't |
 

src/apexcharts-card.ts

@@ -961,29 +961,41 @@ class ChartsCard extends LitElement {
           };
           const bgColor = computeColor(this._colors[index]);
           const txtColor = computeTextColor(bgColor);
-          if (!min[0] || !max[0]) return [];
-          return [
-            ...this._getPointAnnotationStyle(
-              min,
-              this._seriesOffset[index],
-              bgColor,
-              txtColor,
-              serie,
-              index,
-              serie.invert,
-              sameDay,
-            ),
-            ...this._getPointAnnotationStyle(
-              max,
-              this._seriesOffset[index],
-              bgColor,
-              txtColor,
-              serie,
-              index,
-              serie.invert,
-              sameDay,
-            ),
-          ];
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const extremas: any = [];
+          if (min[0] && ['min', 'min+time', true, 'time'].includes(serie.show.extremas)) {
+            const withTime = serie.show.extremas === 'time' || serie.show.extremas === 'min+time';
+            extremas.push(
+              ...this._getPointAnnotationStyle(
+                min,
+                this._seriesOffset[index],
+                bgColor,
+                txtColor,
+                serie,
+                index,
+                serie.invert,
+                sameDay,
+                withTime,
+              ),
+            );
+          }
+          if (max[0] && ['max', 'max+time', true, 'time'].includes(serie.show.extremas)) {
+            const withTime = serie.show.extremas === 'time' || serie.show.extremas === 'max+time';
+            extremas.push(
+              ...this._getPointAnnotationStyle(
+                max,
+                this._seriesOffset[index],
+                bgColor,
+                txtColor,
+                serie,
+                index,
+                serie.invert,
+                sameDay,
+                withTime,
+              ),
+            );
+          }
+          return extremas;
         } else {
           return [];
         }
@@ -1000,6 +1012,7 @@ class ChartsCard extends LitElement {
     index: number,
     invert = false,
     sameDay: boolean,
+    withTime: boolean,
   ) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const points: any = [];
@@ -1026,7 +1039,7 @@ class ChartsCard extends LitElement {
         },
       },
     });
-    if (serie.show.extremas === 'time') {
+    if (withTime) {
       let bgColorTime = tinycolor(computeColor('var(--card-background-color)'));
       bgColorTime =
         bgColorTime.isValid && bgColorTime.getLuminance() > 0.5 ? bgColorTime.darken(20) : bgColorTime.lighten(20);

src/types-config-ti.ts

@@ -108,7 +108,7 @@ export const ChartCardSeriesShowConfigExt = t.iface([], {
   "in_chart": t.opt("boolean"),
   "datalabels": t.opt(t.union("boolean", t.lit('total'), t.lit('percent'))),
   "hidden_by_default": t.opt("boolean"),
-  "extremas": t.opt(t.union("boolean", t.lit('time'))),
+  "extremas": t.opt(t.union("boolean", t.lit('time'), t.lit('min'), t.lit('max'), t.lit('min+time'), t.lit('max+time'))),
   "in_brush": t.opt("boolean"),
   "offset_in_name": t.opt("boolean"),
 });

src/types-config.ts

@@ -108,7 +108,7 @@ export interface ChartCardSeriesShowConfigExt {
   in_chart?: boolean;
   datalabels?: boolean | 'total' | 'percent';
   hidden_by_default?: boolean;
-  extremas?: boolean | 'time';
+  extremas?: boolean | 'time' | 'min' | 'max' | 'min+time' | 'max+time';
   in_brush?: boolean;
   offset_in_name?: boolean;
 }