feat(extremas): Display the time on top of your extremas (RomRider#97)

* Support for extremas with time display

* Update doc

.devcontainer/ui-lovelace.yaml

@@ -59,7 +59,7 @@ views:
                 type: area
                 curve: straight
                 show:
-                  extremas: true
+                  extremas: time
               # - entity: sensor.random_0_1000
               #   name: Sensor 2
               #   type: area
@@ -337,6 +337,7 @@ views:
                   datalabels: true
 
           - type: custom:apexcharts-card
+            graph_span: 24h
             span:
               start: day
             y_axis_precision: 5
@@ -351,7 +352,7 @@ views:
               - entity: sensor.pvpc
                 float_precision: 5
                 show:
-                  extremas: true
+                  extremas: time
                 data_generator: |
                   return [...Array(22).keys()].map((hour) => {
                     const attr = 'price_' + `${hour}`.padStart(2, '0') + 'h';

README.md

@@ -181,7 +181,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`) |
 | `hidden_by_default` | boolean | `false` | v1.6.0 | See [experimental](#hidden_by_default-experimental-feature) |
-| `extremas` | boolean | `false` | v1.7.0 | If enabled, will show the min and the max of the serie in the chart. 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. This feature doesn't work with `stacked: true`. |
 
 
 ### Main `show` Options

src/apexcharts-card.ts

@@ -619,6 +619,10 @@ class ChartsCard extends LitElement {
   }
 
   private _computeMinMaxPointsAnnotations(start: Date, end: Date) {
+    const sameDay =
+      start.getFullYear() === end.getFullYear() &&
+      start.getMonth() === end.getMonth() &&
+      start.getDate() === end.getDate();
     return {
       points: this._config?.series_in_graph.flatMap((serie, index) => {
         if (serie.show.extremas) {
@@ -630,8 +634,8 @@ class ChartsCard extends LitElement {
           const txtColor = computeTextColor(bgColor);
           if (!min[0] || !max[0]) return [];
           return [
-            this._getPointAnnotationStyle(min, bgColor, txtColor, serie, index, serie.invert),
-            this._getPointAnnotationStyle(max, bgColor, txtColor, serie, index, serie.invert),
+            ...this._getPointAnnotationStyle(min, bgColor, txtColor, serie, index, serie.invert, sameDay),
+            ...this._getPointAnnotationStyle(max, bgColor, txtColor, serie, index, serie.invert, sameDay),
           ];
         } else {
           return [];
@@ -647,8 +651,11 @@ class ChartsCard extends LitElement {
     serie: ChartCardSeriesConfig,
     index: number,
     invert = false,
+    sameDay: boolean,
   ) {
-    return {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const points: any = [];
+    points.push({
       x: value[0],
       y: invert && value[1] ? -value[1] : value[1],
       seriesIndex: index,
@@ -665,7 +672,41 @@ class ChartsCard extends LitElement {
           color: txtColor,
         },
       },
-    };
+    });
+    if (serie.show.extremas === 'time') {
+      let bgColorTime = tinycolor(computeColor('var(--card-background-color)'));
+      bgColorTime =
+        bgColorTime.isValid && bgColorTime.getLuminance() > 0.5 ? bgColorTime.darken(20) : bgColorTime.lighten(20);
+      const txtColorTime = computeTextColor(bgColorTime.toHexString());
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const options: any = { timeStyle: 'medium' };
+      if (!sameDay) {
+        options.dateStyle = 'medium';
+      }
+      points.push({
+        x: value[0],
+        y: invert && value[1] ? -value[1] : value[1],
+        seriesIndex: index,
+        marker: {
+          size: 0,
+        },
+        label: {
+          text: `${Intl.DateTimeFormat(this._config?.locale || this._hass?.language || 'en', options).format(
+            value[0],
+          )}`,
+          borderColor: 'var(--card-background-color)',
+          offsetY: -22,
+          borderWidth: 0,
+          style: {
+            background: bgColorTime.toHexString(),
+            color: txtColorTime,
+            fontSize: '8px',
+            fontWeight: 200,
+          },
+        },
+      });
+    }
+    return points;
   }
 
   private _computeNowAnnotation() {

src/types-config-ti.ts

@@ -69,7 +69,7 @@ export const ChartCardAllSeriesExternalConfig = t.iface([], {
     "in_chart": t.opt("boolean"),
     "datalabels": t.opt(t.union("boolean", t.lit('total'))),
     "hidden_by_default": t.opt("boolean"),
-    "extremas": t.opt("boolean"),
+    "extremas": t.opt(t.union("boolean", t.lit('time'))),
   })),
   "group_by": t.opt(t.iface([], {
     "duration": t.opt("string"),
@@ -106,7 +106,7 @@ export const ChartCardSeriesExternalConfig = t.iface([], {
     "in_chart": t.opt("boolean"),
     "datalabels": t.opt(t.union("boolean", t.lit('total'))),
     "hidden_by_default": t.opt("boolean"),
-    "extremas": t.opt("boolean"),
+    "extremas": t.opt(t.union("boolean", t.lit('time'))),
   })),
   "group_by": t.opt(t.iface([], {
     "duration": t.opt("string"),

src/types-config.ts

@@ -66,7 +66,7 @@ export interface ChartCardAllSeriesExternalConfig {
     in_chart?: boolean;
     datalabels?: boolean | 'total';
     hidden_by_default?: boolean;
-    extremas?: boolean;
+    extremas?: boolean | 'time';
   };
   group_by?: {
     duration?: string;
@@ -107,7 +107,7 @@ export interface ChartCardSeriesExternalConfig {
     in_chart?: boolean;
     datalabels?: boolean | 'total';
     hidden_by_default?: boolean;
-    extremas?: boolean;
+    extremas?: boolean | 'time';
   };
   group_by?: {
     duration?: string;

src/types.ts

@@ -31,7 +31,7 @@ export interface ChartCardSeriesConfig extends ChartCardSeriesExternalConfig {
     in_chart: boolean;
     datalabels?: boolean | 'total';
     hidden_by_default?: boolean;
-    extremas?: boolean;
+    extremas?: boolean | 'time';
   };
 }