feat(flow): add optional rate configuration (ulic75#5)

timbrueggenthies · Apr 28, 2022 · f258f49 · f258f49
1 parent c0028a8
commit f258f49
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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) {