diff --git a/src/components/chart/state-history-chart-line.ts b/src/components/chart/state-history-chart-line.ts
index 7652fbabc7..78ec773719 100644
--- a/src/components/chart/state-history-chart-line.ts
+++ b/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,
},
diff --git a/src/components/chart/state-history-charts.ts b/src/components/chart/state-history-charts.ts
index 770fe76dc8..7f72aa5f2b 100644
--- a/src/components/chart/state-history-charts.ts
+++ b/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}
>
`;
diff --git a/src/panels/lovelace/cards/hui-history-graph-card.ts b/src/panels/lovelace/cards/hui-history-graph-card.ts
index 03c39cd2b2..1229ff7190 100644
--- a/src/panels/lovelace/cards/hui-history-graph-card.ts
+++ b/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}
>
`}
diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts
index cedd812916..d9a26be158 100644
--- a/src/panels/lovelace/cards/types.ts
+++ b/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;
}
diff --git a/src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts
index adcd6a9314..862459b277 100644
--- a/src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts
+++ b/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`
@@ -106,9 +143,14 @@ export class HuiHistoryGraphCardEditor
fireEvent(this, "config-changed", { config });
}
- private _computeLabelCallback = (schema: SchemaUnion) => {
+ private _computeLabelCallback = (
+ schema: SchemaUnion>
+ ) => {
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}`
);
diff --git a/src/translations/en.json b/src/translations/en.json
index 0a4f6378a3..7f6ad8445a 100644
--- a/src/translations/en.json
+++ b/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",