From f258f49eaa5d2faa8d90830e04c52301a71ed60c Mon Sep 17 00:00:00 2001
From: ulic75 <ulic75@gmail.com>
Date: Thu, 28 Apr 2022 11:18:26 -0600
Subject: [PATCH] feat(flow): add optional rate configuration (#5)

---
 README.md                                     | 21 ++++++++++++++-----
 ...ealtime-energy-distribution-card-config.ts |  2 ++
 src/realtime-energy-distribution-card.ts      | 18 ++++++++++------
 3 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 844f97ce..45146e4e 100644
--- a/README.md
+++ b/README.md
@@ -50,11 +50,12 @@ We recommend looking at the [Example usage section](#example-usage) to understan
 
 #### Card options
 
-| Name                      | Type   | Default | Description                                                                                             |
-| ------------------------- | ------ | ------- | ------------------------------------------------------------------------------------------------------- |
-| type **_(required)_**     | string |         | `custom:realtime-energy-distribution-card`.                                                             |
-| entities **_(required)_** | map    |         | One or more sensor entities in a list, see [entities map](#entities-map) for additional entity options. |
-|                           |
+| Name                      | Type   | Default | Description                                                                                                                             |
+| ------------------------- | ------ | :-----: | --------------------------------------------------------------------------------------------------------------------------------------- |
+| type **_(required)_**     | string |         | `custom:realtime-energy-distribution-card`.                                                                                             |
+| entities **_(required)_** | map    |         | One or more sensor entities in a list, see [entities map](#entities-map) for additional entity options.                                 |
+| min_flow_rate             | number |   .75   | Represents the fastest amount of time in seconds for a flow dot to travel from one end to the other, see [flow formula](#flow-formula). |
+| max_flow_rate             | number |    6    | Represents the slowest amount of time in seconds for a flow dot to travel from one end to the other, see [flow formula](#flow-formula). |
 
 #### Entities map
 
@@ -76,3 +77,13 @@ entities:
   grid: sensor.powerwall_site_now
   solar: sensor.powerwall_solar_now
 ```
+
+### Flow Formula
+
+This formula is based on the offical formula used by the Energy Distribution card.
+
+```js
+max - (value / total) * (max - min);
+```
+
+I'm not 100% happy with this. I'd prefer to see the dots travel slower when flow is low, but faster when flow is high. For example if the only flow is Grid to Home, I'd like to see the dot move faster if the flow is 15kW, but slower if it's only 2kW. Right now the speed would be the same. If you have a formula you'd like to propose please submit a PR.
diff --git a/src/realtime-energy-distribution-card-config.ts b/src/realtime-energy-distribution-card-config.ts
index 153d4fb9..df44883f 100644
--- a/src/realtime-energy-distribution-card-config.ts
+++ b/src/realtime-energy-distribution-card-config.ts
@@ -8,4 +8,6 @@ export interface RealtimeEnergyDistributionCardConfig
     grid?: string;
     solar?: string;
   };
+  min_flow_rate: number;
+  max_flow_rate: number;
 }
diff --git a/src/realtime-energy-distribution-card.ts b/src/realtime-energy-distribution-card.ts
index d7b0715a..380a14c1 100644
--- a/src/realtime-energy-distribution-card.ts
+++ b/src/realtime-energy-distribution-card.ts
@@ -20,8 +20,8 @@ import { RealtimeEnergyDistributionCardConfig } from "./realtime-energy-distribu
 import { roundValue } from "./utils.js";
 
 const CIRCLE_CIRCUMFERENCE = 238.76104;
-const SLOWEST_CIRCLE_RATE = 6;
-const FASTEST_CIRCLE_RATE = 0.75;
+const MAX_FLOW_RATE = 6;
+const MIN_FLOW_RATE = 0.75;
 
 @customElement("realtime-energy-distribution-card")
 export class RealtimeEnergyDistributionCard extends LitElement {
@@ -35,7 +35,11 @@ export class RealtimeEnergyDistributionCard extends LitElement {
   @query("#solar-home-flow") solarToHomeFlow?: SVGSVGElement;
 
   setConfig(config: RealtimeEnergyDistributionCardConfig): void {
-    this._config = config;
+    this._config = {
+      ...config,
+      min_flow_rate: config.min_flow_rate ?? MIN_FLOW_RATE,
+      max_flow_rate: config.max_flow_rate ?? MAX_FLOW_RATE,
+    };
   }
 
   public getCardSize(): Promise<number> | number {
@@ -44,9 +48,11 @@ export class RealtimeEnergyDistributionCard extends LitElement {
 
   private previousDur: { [name: string]: number } = {};
 
-  private circleRate = (value: number, total: number): number =>
-    SLOWEST_CIRCLE_RATE -
-    (value / total) * (SLOWEST_CIRCLE_RATE - FASTEST_CIRCLE_RATE);
+  private circleRate = (value: number, total: number): number => {
+    const min = this._config?.min_flow_rate!;
+    const max = this._config?.max_flow_rate!;
+    return max - (value / total) * (max - min);
+  };
 
   protected render(): TemplateResult {
     if (!this._config || !this.hass) {