Support displaying relative change in statistics graph cards

src/components/chart/statistics-chart.ts

@@ -346,9 +346,9 @@ class StatisticsChart extends LitElement {
         const dataValues: Array<number | null> = [];
         statTypes.forEach((type) => {
           let val: number | null;
-          if (type === "sum") {
+          if (type === "sum" || type === "sum_rel") {
             if (initVal === null) {
-              initVal = val = stat.state || 0;
+              initVal = val = type === "sum_rel" ? 0 : stat.sum || 0;
               prevSum = stat.sum;
             } else {
               val = initVal + ((stat.sum || 0) - prevSum!);

src/data/recorder.ts

@@ -1,7 +1,7 @@
 import { computeStateName } from "../common/entity/compute_state_name";
 import { HomeAssistant } from "../types";
 
-export type StatisticType = "sum" | "min" | "max" | "mean";
+export type StatisticType = "sum" | "sum_rel" | "min" | "max" | "mean";
 
 export interface Statistics {
   [statisticId: string]: StatisticValue[];
@@ -201,10 +201,13 @@ export const calculateStatisticsSumGrowth = (
 export const statisticsHaveType = (
   stats: StatisticValue[],
   type: StatisticType
-) => stats.some((stat) => stat[type] !== null);
+) => {
+  type = type === "sum_rel" ? "sum" : type;
+  return stats.some((stat) => stat[type] !== null);
+};
 
 const mean_stat_types: readonly StatisticType[] = ["mean", "min", "max"];
-const sum_stat_types: readonly StatisticType[] = ["sum"];
+const sum_stat_types: readonly StatisticType[] = ["sum", "sum_rel"];
 
 export const statisticsMetaHasType = (
   metadata: StatisticsMetaData,

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

@@ -39,6 +39,7 @@ import { deepEqual } from "../../../../common/util/deep-equal";
 
 const statTypeStruct = union([
   literal("sum"),
+  literal("sum_rel"),
   literal("min"),
   literal("max"),
   literal("mean"),
@@ -64,7 +65,7 @@ const cardConfigStruct = assign(
 );
 
 const periods = ["5minute", "hour", "day", "month"] as const;
-const stat_types = ["mean", "min", "max", "sum"] as const;
+const stat_types = ["mean", "min", "max", "sum", "sum_rel"] as const;
 
 @customElement("hui-statistics-graph-card-editor")
 export class HuiStatisticsGraphCardEditor

src/translations/en.json

@@ -517,7 +517,8 @@
           "min": "min",
           "max": "max",
           "mean": "mean",
-          "sum": "sum"
+          "sum": "sum",
+          "sum_rel": "change"
         }
       },
       "service-picker": {
@@ -3969,7 +3970,8 @@
                 "mean": "Mean",
                 "min": "Min",
                 "max": "Max",
-                "sum": "Sum"
+                "sum": "Sum (absolute)",
+                "sum_rel": "Change"
               },
               "chart_type": "Chart type",
               "periods": {