Add manual limit selection to graph header/footer (#9126)

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

src/panels/lovelace/cards/hui-sensor-card.ts

@@ -55,6 +55,7 @@ class HuiSensorCard extends HuiEntityCard {
         entity: config.entity,
         detail: detail || 1,
         hours_to_show: hours_to_show || 24,
+        limits: config.limits!,
       };
 
       entityCardConfig.footer = footerConfig;

src/panels/lovelace/cards/types.ts

@@ -286,6 +286,10 @@ export interface SensorCardConfig extends LovelaceCardConfig {
   detail?: number;
   theme?: string;
   hours_to_show?: number;
+  limits?: {
+    min?: number;
+    max?: number;
+  };
 }
 
 export interface ShoppingListCardConfig extends LovelaceCardConfig {

src/panels/lovelace/common/graph/coordinates.ts

@@ -57,15 +57,22 @@ export const coordinates = (
   history: any,
   hours: number,
   width: number,
-  detail: number
+  detail: number,
+  limits?: { min?: number; max?: number }
 ): number[][] | undefined => {
   history.forEach((item) => {
     item.state = Number(item.state);
   });
   history = history.filter((item) => !Number.isNaN(item.state));
 
-  const min = Math.min(...history.map((item) => item.state));
-  const max = Math.max(...history.map((item) => item.state));
+  const min =
+    limits?.min !== undefined
+      ? limits.min
+      : Math.min(...history.map((item) => item.state));
+  const max =
+    limits?.max !== undefined
+      ? limits.max
+      : Math.max(...history.map((item) => item.state));
   const now = new Date().getTime();
 
   const reduce = (res, item, point) => {

src/panels/lovelace/header-footer/hui-graph-header-footer.ts

@@ -190,12 +190,21 @@ export class HuiGraphHeaderFooter
       this._stateHistory!.push(...stateHistory[0]);
     }
 
+    const limits =
+      this._config!.limits === undefined &&
+      this._stateHistory?.some(
+        (entity) => entity.attributes?.unit_of_measurement === "%"
+      )
+        ? { min: 0, max: 100 }
+        : this._config!.limits;
+
     this._coordinates =
       coordinates(
         this._stateHistory,
         this._config!.hours_to_show!,
         500,
-        this._config!.detail!
+        this._config!.detail!,
+        limits
       ) || [];
 
     this._date = endTime;

src/panels/lovelace/header-footer/types.ts

@@ -15,6 +15,10 @@ export interface GraphHeaderFooterConfig extends LovelaceHeaderFooterConfig {
   entity: string;
   detail?: number;
   hours_to_show?: number;
+  limits?: {
+    min?: number;
+    max?: number;
+  };
 }
 
 export interface PictureHeaderFooterConfig extends LovelaceHeaderFooterConfig {