Add logarithmic scale option to Statistics and History graph cards (#18637)

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: {

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}
         ></state-history-chart-line>
       </div> `;

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: {

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}
                 ></state-history-charts>
               `}
         </div>

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}
           ></statistics-chart>
         </div>
       </ha-card>

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 {

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<typeof SCHEMA>) =>
-    this.hass!.localize(`ui.panel.lovelace.editor.card.generic.${schema.name}`);
+  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+    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 {

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}`
         );

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
 );

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