diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts index 5253f95b1e..4a6d1f60d5 100644 --- a/src/panels/lovelace/cards/hui-gauge-card.ts +++ b/src/panels/lovelace/cards/hui-gauge-card.ts @@ -174,6 +174,26 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { if (this._config!.needle) { return undefined; } + + // new format + let segments = this._config!.segments; + if (segments) { + segments = [...segments].sort((a, b) => a?.from - b?.from); + + for (let i = 0; i < segments.length; i++) { + const segment = segments[i]; + if ( + segment && + numberValue >= segment.from && + (i + 1 === segments.length || numberValue < segments[i + 1]?.from) + ) { + return segment.color; + } + } + return severityMap.normal; + } + + // old format const sections = this._config!.severity; if (!sections) { @@ -206,6 +226,16 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { } private _severityLevels() { + // new format + const segments = this._config!.segments; + if (segments) { + return segments.map((segment) => ({ + level: segment?.from, + stroke: segment?.color, + })); + } + + // old format const sections = this._config!.severity; if (!sections) { diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts index 9c043e4699..b4c2a74abc 100644 --- a/src/panels/lovelace/cards/types.ts +++ b/src/panels/lovelace/cards/types.ts @@ -176,6 +176,11 @@ export interface SeverityConfig { red?: number; } +export interface GaugeSegment { + from: number; + color: string; +} + export interface GaugeCardConfig extends LovelaceCardConfig { entity: string; name?: string; @@ -185,6 +190,7 @@ export interface GaugeCardConfig extends LovelaceCardConfig { severity?: SeverityConfig; theme?: string; needle?: boolean; + segments?: GaugeSegment[]; } export interface ConfigEntity extends EntityConfig { diff --git a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts index 2469a18a5a..8ae5fcbf5e 100644 --- a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts @@ -2,6 +2,7 @@ import "../../../../components/ha-form/ha-form"; import { html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import { + array, assert, assign, boolean, @@ -18,6 +19,11 @@ import type { GaugeCardConfig } from "../../cards/types"; import type { LovelaceCardEditor } from "../../types"; import { baseLovelaceCardConfig } from "../structs/base-card-struct"; +const gaugeSegmentStruct = object({ + from: number(), + color: string(), +}); + const cardConfigStruct = assign( baseLovelaceCardConfig, object({ @@ -29,6 +35,7 @@ const cardConfigStruct = assign( severity: optional(object()), theme: optional(string()), needle: optional(boolean()), + segments: optional(array(gaugeSegmentStruct)), }) );