From b8d4e957e28132ec91c6fd710cdd84f5979eb731 Mon Sep 17 00:00:00 2001 From: wittypluck Date: Sat, 18 Nov 2023 17:31:29 +0100 Subject: [PATCH] Add logarithmic scale option to Statistics and History graph cards (#18637) --- .../chart/state-history-chart-line.ts | 6 +++++- src/components/chart/state-history-charts.ts | 3 +++ src/components/chart/statistics-chart.ts | 6 +++++- .../lovelace/cards/hui-history-graph-card.ts | 1 + .../cards/hui-statistics-graph-card.ts | 1 + src/panels/lovelace/cards/types.ts | 2 ++ .../hui-history-graph-card-editor.ts | 20 +++++++++++++++++-- .../hui-statistics-graph-card-editor.ts | 7 +++++++ src/resources/chartjs.ts | 4 +++- src/translations/en.json | 6 ++++-- 10 files changed, 49 insertions(+), 7 deletions(-) diff --git a/src/components/chart/state-history-chart-line.ts b/src/components/chart/state-history-chart-line.ts index d73faaf9e747..bdde57a7ad0c 100644 --- a/src/components/chart/state-history-chart-line.ts +++ b/src/components/chart/state-history-chart-line.ts @@ -45,6 +45,8 @@ export class StateHistoryChartLine extends LitElement { @property({ type: Number }) public chartIndex?; + @property({ type: Boolean }) public logarithmicScale = false; + @state() private _chartData?: ChartData<"line">; @state() private _entityIds: string[] = []; @@ -78,7 +80,8 @@ export class StateHistoryChartLine extends LitElement { !this.hasUpdated || changedProps.has("showNames") || changedProps.has("startTime") || - changedProps.has("endTime") + changedProps.has("endTime") || + changedProps.has("logarithmicScale") ) { this._chartOptions = { parsing: false, @@ -132,6 +135,7 @@ export class StateHistoryChartLine extends LitElement { } }, position: computeRTL(this.hass) ? "right" : "left", + type: this.logarithmicScale ? "logarithmic" : "linear", }, }, plugins: { diff --git a/src/components/chart/state-history-charts.ts b/src/components/chart/state-history-charts.ts index 61d02699ea6f..854c893d89ab 100644 --- a/src/components/chart/state-history-charts.ts +++ b/src/components/chart/state-history-charts.ts @@ -73,6 +73,8 @@ export class StateHistoryCharts extends LitElement { @property({ type: Boolean }) public isLoadingData = false; + @property({ type: Boolean }) public logarithmicScale = false; + private _computedStartTime!: Date; private _computedEndTime!: Date; @@ -159,6 +161,7 @@ export class StateHistoryCharts extends LitElement { .names=${this.names} .chartIndex=${index} .clickForMoreInfo=${this.clickForMoreInfo} + .logarithmicScale=${this.logarithmicScale} @y-width-changed=${this._yWidthChanged} > `; diff --git a/src/components/chart/statistics-chart.ts b/src/components/chart/statistics-chart.ts index 89c6905eac5f..164637fc4188 100644 --- a/src/components/chart/statistics-chart.ts +++ b/src/components/chart/statistics-chart.ts @@ -71,6 +71,8 @@ export class StatisticsChart extends LitElement { @property({ type: Boolean }) public hideLegend = false; + @property({ type: Boolean }) public logarithmicScale = false; + @property({ type: Boolean }) public isLoadingData = false; @property() public period?: string; @@ -98,7 +100,8 @@ export class StatisticsChart extends LitElement { !this.hasUpdated || changedProps.has("unit") || changedProps.has("period") || - changedProps.has("chartType") + changedProps.has("chartType") || + changedProps.has("logarithmicScale") ) { this._createOptions(); } @@ -198,6 +201,7 @@ export class StatisticsChart extends LitElement { display: unit || this.unit, text: unit || this.unit, }, + type: this.logarithmicScale ? "logarithmic" : "linear", }, }, plugins: { diff --git a/src/panels/lovelace/cards/hui-history-graph-card.ts b/src/panels/lovelace/cards/hui-history-graph-card.ts index 7c4ad061a763..e4576d1fccf9 100644 --- a/src/panels/lovelace/cards/hui-history-graph-card.ts +++ b/src/panels/lovelace/cards/hui-history-graph-card.ts @@ -216,6 +216,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard { .showNames=${this._config.show_names !== undefined ? this._config.show_names : true} + .logarithmicScale=${this._config.logarithmic_scale || false} > `} diff --git a/src/panels/lovelace/cards/hui-statistics-graph-card.ts b/src/panels/lovelace/cards/hui-statistics-graph-card.ts index 691123ab7d3f..a70785bfa731 100644 --- a/src/panels/lovelace/cards/hui-statistics-graph-card.ts +++ b/src/panels/lovelace/cards/hui-statistics-graph-card.ts @@ -199,6 +199,7 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard { .names=${this._names} .unit=${this._unit} .hideLegend=${this._config.hide_legend || false} + .logarithmicScale=${this._config.logarithmic_scale || false} > diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts index d878e690d80b..5cb1c45301b0 100644 --- a/src/panels/lovelace/cards/types.ts +++ b/src/panels/lovelace/cards/types.ts @@ -320,6 +320,7 @@ export interface HistoryGraphCardConfig extends LovelaceCardConfig { hours_to_show?: number; title?: string; show_names?: boolean; + logarithmic_scale?: boolean; } export interface StatisticsGraphCardConfig extends LovelaceCardConfig { @@ -331,6 +332,7 @@ export interface StatisticsGraphCardConfig extends LovelaceCardConfig { stat_types?: StatisticType | StatisticType[]; chart_type?: "line" | "bar"; hide_legend?: boolean; + logarithmic_scale?: boolean; } export interface StatisticCardConfig extends LovelaceCardConfig { 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 ed73afb0768b..adcd6a9314c7 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 @@ -31,6 +31,7 @@ const cardConfigStruct = assign( hours_to_show: optional(number()), refresh_interval: optional(number()), // deprecated show_names: optional(boolean()), + logarithmic_scale: optional(boolean()), }) ); @@ -47,6 +48,11 @@ const SCHEMA = [ }, ], }, + { + name: "logarithmic_scale", + required: false, + selector: { boolean: {} }, + }, ] as const; @customElement("hui-history-graph-card-editor") @@ -100,8 +106,18 @@ export class HuiHistoryGraphCardEditor fireEvent(this, "config-changed", { config }); } - private _computeLabelCallback = (schema: SchemaUnion) => - this.hass!.localize(`ui.panel.lovelace.editor.card.generic.${schema.name}`); + private _computeLabelCallback = (schema: SchemaUnion) => { + switch (schema.name) { + case "logarithmic_scale": + return this.hass!.localize( + `ui.panel.lovelace.editor.card.history-graph.${schema.name}` + ); + default: + return this.hass!.localize( + `ui.panel.lovelace.editor.card.generic.${schema.name}` + ); + } + }; static styles: CSSResultGroup = css` ha-form { diff --git a/src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts index 3ed3b6d8afc4..71f77a86bf7f 100644 --- a/src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts @@ -72,6 +72,7 @@ const cardConfigStruct = assign( stat_types: optional(union([array(statTypeStruct), statTypeStruct])), unit: optional(string()), hide_legend: optional(boolean()), + logarithmic_scale: optional(boolean()), }) ); @@ -211,6 +212,11 @@ export class HuiStatisticsGraphCardEditor required: false, selector: { boolean: {} }, }, + { + name: "logarithmic_scale", + required: false, + selector: { boolean: {} }, + }, ], }, ]; @@ -347,6 +353,7 @@ export class HuiStatisticsGraphCardEditor case "period": case "unit": case "hide_legend": + case "logarithmic_scale": return this.hass!.localize( `ui.panel.lovelace.editor.card.statistics-graph.${schema.name}` ); diff --git a/src/resources/chartjs.ts b/src/resources/chartjs.ts index 1a39fb4b5e59..fc5b44411c04 100644 --- a/src/resources/chartjs.ts +++ b/src/resources/chartjs.ts @@ -12,6 +12,7 @@ import { Chart, BarElement, BarController, + LogarithmicScale, } from "chart.js"; import { TextBarElement } from "../components/chart/timeline-chart/textbar-element"; import { TimelineController } from "../components/chart/timeline-chart/timeline-controller"; @@ -35,5 +36,6 @@ Chart.register( TextBarElement, TimeLineScale, TimelineController, - CategoryScale + CategoryScale, + LogarithmicScale ); diff --git a/src/translations/en.json b/src/translations/en.json index aad5c61d9d32..a9c29405ced6 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -4978,7 +4978,8 @@ }, "history-graph": { "name": "History graph", - "description": "The History graph card allows you to display a graph for each of the entities listed." + "description": "The History graph card allows you to display a graph for each of the entities listed.", + "logarithmic_scale": "Logarithmic scale" }, "statistics-graph": { "name": "Statistics graph", @@ -5004,7 +5005,8 @@ }, "pick_statistic": "Add a statistic", "picked_statistic": "Statistic", - "hide_legend": "Hide legend" + "hide_legend": "Hide legend", + "logarithmic_scale": "Logarithmic scale" }, "statistic": { "name": "Statistic",