Add Y-Axis limits functionality from history graphs card to statistics graph card (#22771)

Author: DominikBitzer

src/components/chart/statistics-chart.ts

@@ -72,6 +72,12 @@ export class StatisticsChart extends LitElement {
 
   @property() public chartType: ChartType = "line";
 
+  @property({ type: Number }) public minYAxis?: number;
+
+  @property({ type: Number }) public maxYAxis?: number;
+
+  @property({ type: Boolean }) public fitYData = false;
+
   @property({ type: Boolean }) public hideLegend = false;
 
   @property({ type: Boolean }) public logarithmicScale = false;
@@ -113,6 +119,9 @@ export class StatisticsChart extends LitElement {
       changedProps.has("unit") ||
       changedProps.has("period") ||
       changedProps.has("chartType") ||
+      changedProps.has("minYAxis") ||
+      changedProps.has("maxYAxis") ||
+      changedProps.has("fitYData") ||
       changedProps.has("logarithmicScale") ||
       changedProps.has("hideLegend")
     ) {
@@ -232,6 +241,8 @@ export class StatisticsChart extends LitElement {
             text: unit || this.unit,
           },
           type: this.logarithmicScale ? "logarithmic" : "linear",
+          min: this.fitYData ? null : this.minYAxis,
+          max: this.fitYData ? null : this.maxYAxis,
         },
       },
       plugins: {

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

@@ -195,6 +195,9 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
             .statTypes=${this._statTypes!}
             .names=${this._names}
             .unit=${this._unit}
+            .minYAxis=${this._config.min_y_axis}
+            .maxYAxis=${this._config.max_y_axis}
+            .fitYData=${this._config.fit_y_data || false}
             .hideLegend=${this._config.hide_legend || false}
             .logarithmicScale=${this._config.logarithmic_scale || false}
           ></statistics-chart>

src/panels/lovelace/cards/types.ts

@@ -356,6 +356,9 @@ export interface StatisticsGraphCardConfig extends LovelaceCardConfig {
   period?: "5minute" | "hour" | "day" | "month";
   stat_types?: StatisticType | StatisticType[];
   chart_type?: "line" | "bar";
+  min_y_axis?: number;
+  max_y_axis?: number;
+  fit_y_data?: boolean;
   hide_legend?: boolean;
   logarithmic_scale?: boolean;
 }

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

@@ -69,6 +69,9 @@ const cardConfigStruct = assign(
     unit: optional(string()),
     hide_legend: optional(boolean()),
     logarithmic_scale: optional(boolean()),
+    min_y_axis: optional(number()),
+    max_y_axis: optional(number()),
+    fit_y_data: optional(boolean()),
   })
 );
 
@@ -126,7 +129,8 @@ export class HuiStatisticsGraphCardEditor
     (
       localize: LocalizeFunc,
       statisticIds: string[] | undefined,
-      metaDatas: StatisticsMetaData[] | undefined
+      metaDatas: StatisticsMetaData[] | undefined,
+      showFitOption: boolean
     ) => {
       const units = new Set<string>();
       metaDatas?.forEach((metaData) => {
@@ -213,6 +217,33 @@ export class HuiStatisticsGraphCardEditor
                 ],
               ],
             },
+            {
+              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: {} },
+                  },
+                ]
+              : []),
+
             {
               name: "hide_legend",
               required: false,
@@ -254,7 +285,9 @@ export class HuiStatisticsGraphCardEditor
     const schema = this._schema(
       this.hass.localize,
       this._configEntities,
-      this._metaDatas
+      this._metaDatas,
+      this._config!.min_y_axis !== undefined ||
+        this._config!.max_y_axis !== undefined
     );
     const configured_stat_types = this._config!.stat_types
       ? ensureArray(this._config.stat_types)
@@ -359,6 +392,9 @@ export class HuiStatisticsGraphCardEditor
       case "unit":
       case "hide_legend":
       case "logarithmic_scale":
+      case "min_y_axis":
+      case "max_y_axis":
+      case "fit_y_data":
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.statistics-graph.${schema.name}`
         );

src/translations/en.json

@@ -6162,7 +6162,10 @@
               "pick_statistic": "Add a statistic",
               "picked_statistic": "Statistic",
               "hide_legend": "Hide legend",
-              "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"
             },
             "statistic": {
               "name": "Statistic",