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",