Add Y axis limits options for historical charts (#19297)

* Add Y axis limit options for historical charts

* Fir formatting according to linter

* Revert statistic graph changes

* Cleanup local tests leftover

* Show fit Y fit option only if limits are set

src/components/chart/state-history-chart-line.ts

@@ -47,6 +47,12 @@ export class StateHistoryChartLine extends LitElement {
 
   @property({ type: Boolean }) public logarithmicScale = false;
 
+  @property({ type: Number }) public minYAxis?: number;
+
+  @property({ type: Number }) public maxYAxis?: number;
+
+  @property({ type: Boolean }) public fitYData = false;
+
   @state() private _chartData?: ChartData<"line">;
 
   @state() private _entityIds: string[] = [];
@@ -84,7 +90,10 @@ export class StateHistoryChartLine extends LitElement {
       changedProps.has("startTime") ||
       changedProps.has("endTime") ||
       changedProps.has("unit") ||
-      changedProps.has("logarithmicScale")
+      changedProps.has("logarithmicScale") ||
+      changedProps.has("minYAxis") ||
+      changedProps.has("maxYAxis") ||
+      changedProps.has("fitYData")
     ) {
       this._chartOptions = {
         parsing: false,
@@ -121,6 +130,10 @@ export class StateHistoryChartLine extends LitElement {
             },
           },
           y: {
+            suggestedMin: this.fitYData ? this.minYAxis : null,
+            suggestedMax: this.fitYData ? this.maxYAxis : null,
+            min: this.fitYData ? null : this.minYAxis,
+            max: this.fitYData ? null : this.maxYAxis,
             ticks: {
               maxTicksLimit: 7,
             },

src/components/chart/state-history-charts.ts

@@ -74,6 +74,12 @@ export class StateHistoryCharts extends LitElement {
 
   @property({ type: Boolean }) public logarithmicScale = false;
 
+  @property({ type: Number }) public minYAxis?: number;
+
+  @property({ type: Number }) public maxYAxis?: number;
+
+  @property({ type: Boolean }) public fitYData = false;
+
   private _computedStartTime!: Date;
 
   private _computedEndTime!: Date;
@@ -161,6 +167,9 @@ export class StateHistoryCharts extends LitElement {
           .chartIndex=${index}
           .clickForMoreInfo=${this.clickForMoreInfo}
           .logarithmicScale=${this.logarithmicScale}
+          .minYAxis=${this.minYAxis}
+          .maxYAxis=${this.maxYAxis}
+          .fitYData=${this.fitYData}
           @y-width-changed=${this._yWidthChanged}
         ></state-history-chart-line>
       </div> `;

src/panels/lovelace/cards/hui-history-graph-card.ts

@@ -238,6 +238,9 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
                     ? this._config.show_names
                     : true}
                   .logarithmicScale=${this._config.logarithmic_scale || false}
+                  .minYAxis=${this._config.min_y_axis}
+                  .maxYAxis=${this._config.max_y_axis}
+                  .fitYData=${this._config.fit_y_data || false}
                 ></state-history-charts>
               `}
         </div>

src/panels/lovelace/cards/types.ts

@@ -324,6 +324,9 @@ export interface HistoryGraphCardConfig extends LovelaceCardConfig {
   title?: string;
   show_names?: boolean;
   logarithmic_scale?: boolean;
+  min_y_axis?: number;
+  max_y_axis?: number;
+  fit_y_data?: boolean;
   split_device_classes?: boolean;
 }
 

src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts

@@ -1,5 +1,6 @@
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import {
   array,
   assert,
@@ -32,29 +33,12 @@ const cardConfigStruct = assign(
     refresh_interval: optional(number()), // deprecated
     show_names: optional(boolean()),
     logarithmic_scale: optional(boolean()),
+    min_y_axis: optional(number()),
+    max_y_axis: optional(number()),
+    fit_y_data: optional(boolean()),
   })
 );
 
-const SCHEMA = [
-  { name: "title", selector: { text: {} } },
-  {
-    name: "",
-    type: "grid",
-    schema: [
-      {
-        name: "hours_to_show",
-        default: DEFAULT_HOURS_TO_SHOW,
-        selector: { number: { min: 1, mode: "box" } },
-      },
-    ],
-  },
-  {
-    name: "logarithmic_scale",
-    required: false,
-    selector: { boolean: {} },
-  },
-] as const;
-
 @customElement("hui-history-graph-card-editor")
 export class HuiHistoryGraphCardEditor
   extends LitElement
@@ -72,16 +56,69 @@ export class HuiHistoryGraphCardEditor
     this._configEntities = processEditorEntities(config.entities);
   }
 
+  private _schema = memoizeOne(
+    (showFitOption: boolean) =>
+      [
+        { name: "title", selector: { text: {} } },
+        {
+          name: "",
+          type: "grid",
+          schema: [
+            {
+              name: "hours_to_show",
+              default: DEFAULT_HOURS_TO_SHOW,
+              selector: { number: { min: 1, mode: "box" } },
+            },
+          ],
+        },
+        {
+          name: "logarithmic_scale",
+          required: false,
+          selector: { boolean: {} },
+        },
+        {
+          name: "",
+          type: "grid",
+          schema: [
+            {
+              name: "min_y_axis",
+              required: false,
+              selector: { number: { mode: "box", step: "any" } },
+            },
+            {
+              name: "max_y_axis",
+              required: false,
+              selector: { number: { mode: "box", step: "any" } },
+            },
+          ],
+        },
+        ...(showFitOption
+          ? [
+              {
+                name: "fit_y_data",
+                required: false,
+                selector: { boolean: {} },
+              },
+            ]
+          : []),
+      ] as const
+  );
+
   protected render() {
     if (!this.hass || !this._config) {
       return nothing;
     }
 
+    const schema = this._schema(
+      this._config!.min_y_axis !== undefined ||
+        this._config!.max_y_axis !== undefined
+    );
+
     return html`
       <ha-form
         .hass=${this.hass}
         .data=${this._config}
-        .schema=${SCHEMA}
+        .schema=${schema}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
@@ -106,9 +143,14 @@ export class HuiHistoryGraphCardEditor
     fireEvent(this, "config-changed", { config });
   }
 
-  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) => {
     switch (schema.name) {
       case "logarithmic_scale":
+      case "min_y_axis":
+      case "max_y_axis":
+      case "fit_y_data":
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.history-graph.${schema.name}`
         );

src/translations/en.json

@@ -5254,7 +5254,10 @@
             "history-graph": {
               "name": "History graph",
               "description": "The History graph card allows you to display a graph for each of the entities listed.",
-              "logarithmic_scale": "Logarithmic scale"
+              "logarithmic_scale": "Logarithmic scale",
+              "min_y_axis": "Y axis minimum",
+              "max_y_axis": "Y axis maximum",
+              "fit_y_data": "Extend Y axis limits to fit data"
             },
             "statistics-graph": {
               "name": "Statistics graph",