diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml index c10eef2..c0dc3f4 100644 --- a/.devcontainer/ui-lovelace.yaml +++ b/.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 diff --git a/README.md b/README.md index 0e92af3..c6d87a1 100644 --- a/README.md +++ b/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 | diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts index 4c23f49..9ac4b88 100644 --- a/src/apexcharts-card.ts +++ b/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); diff --git a/src/types-config-ti.ts b/src/types-config-ti.ts index d82f122..b746103 100644 --- a/src/types-config-ti.ts +++ b/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"), }); diff --git a/src/types-config.ts b/src/types-config.ts index 930366c..5910658 100644 --- a/src/types-config.ts +++ b/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; }