Better gauge segment coloring (#11570)

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) {

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 {

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)),
   })
 );