From f8dd1795bc306d684e7144e764179ef66c757e39 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 28 Jul 2021 17:39:12 +0200
Subject: [PATCH] Add animation to distribution (#9625)

---
 .../energy/hui-energy-devices-graph-card.ts   |   2 +-
 .../energy/hui-energy-distribution-card.ts    | 108 +++++++++++++++---
 .../energy/hui-energy-solar-graph-card.ts     |   2 +-
 .../energy/hui-energy-summary-graph-card.ts   |   2 +-
 4 files changed, 92 insertions(+), 22 deletions(-)

diff --git a/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts
index 66e4a75518..cfbdd4f845 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts
@@ -138,7 +138,7 @@ export class HuiEnergyDevicesGraphCard
           },
         },
       },
-      elements: { bar: { borderWidth: 1.5 } },
+      elements: { bar: { borderWidth: 1.5, borderRadius: 4 } },
       plugins: {
         tooltip: {
           mode: "nearest",
diff --git a/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts b/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
index a75ad559cf..9debef5f18 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
@@ -276,28 +276,84 @@ class HuiEnergyDistrubutionCard extends LitElement implements LovelaceCard {
             <svg
               viewBox="0 0 100 100"
               xmlns="http://www.w3.org/2000/svg"
-              preserveAspectRatio="none"
+              preserveAspectRatio="xMidYMid slice"
             >
-              ${productionReturnedToGrid && hasSolarProduction
+              ${hasReturnToGrid && hasSolarProduction
                 ? svg`<path
-                class="return"
-                d="M50,0 v20 c0,40 -10,35 -65,35 h20"
-                vector-effect="non-scaling-stroke"
-              ></path>`
+                    id="return"
+                    class="return"
+                    d="M47,0 v15 c0,40 -10,35 -30,35 h-20"
+                    vector-effect="non-scaling-stroke"
+                  ></path> `
                 : ""}
-              ${totalSolarProduction
+              ${hasSolarProduction
                 ? svg`<path
+                    id="solar"
                     class="solar"
-                    d="M50,0 v20 c0,40 10,35 65,35 h20"
+                    d="M${
+                      hasReturnToGrid ? 53 : 50
+                    },0 v15 c0,40 10,35 30,35 h20"
                     vector-effect="non-scaling-stroke"
                   ></path>`
                 : ""}
-              ${totalGridConsumption
-                ? svg`<path
+              <path
                 class="grid"
-                d="M0,55 H100"
+                id="grid"
+                d="M0,${hasSolarProduction ? 56 : 53} H100"
                 vector-effect="non-scaling-stroke"
-              ></path>`
+              ></path>
+              ${productionReturnedToGrid && hasSolarProduction
+                ? svg`<circle r="1" class="return" vector-effect="non-scaling-stroke">
+                    <animateMotion
+                      dur="${
+                        6 -
+                        (productionReturnedToGrid /
+                          (totalGridConsumption +
+                            (totalSolarProduction || 0))) *
+                          5
+                      }s"
+                      repeatCount="indefinite"
+                      rotate="auto"
+                    >
+                      <mpath xlink:href="#return" />
+                    </animateMotion>
+                  </circle>`
+                : ""}
+              ${totalSolarProduction
+                ? svg`
+                <circle r="1" class="solar" vector-effect="non-scaling-stroke">
+                    <animateMotion
+                      dur="${
+                        6 -
+                        ((totalSolarProduction -
+                          (productionReturnedToGrid || 0)) /
+                          (totalGridConsumption +
+                            (totalSolarProduction || 0))) *
+                          5
+                      }s"
+                      repeatCount="indefinite"
+                      rotate="auto"
+                    >
+                      <mpath xlink:href="#solar" />
+                    </animateMotion>
+                  </circle>`
+                : ""}
+              ${totalGridConsumption
+                ? svg`<circle r="1" class="grid" vector-effect="non-scaling-stroke">
+                    <animateMotion
+                      dur="${
+                        6 -
+                        (totalGridConsumption /
+                          (totalGridConsumption +
+                            (totalSolarProduction || 0))) *
+                          5
+                      }s"
+                      repeatCount="indefinite"
+                      rotate="auto"
+                    >
+                      <mpath xlink:href="#grid" />
+                    </animateMotion>
+                  </circle>`
                 : ""}
             </svg>
           </div>
@@ -445,9 +501,6 @@ class HuiEnergyDistrubutionCard extends LitElement implements LovelaceCard {
       width: 100%;
       height: 100%;
     }
-    .circle svg circle {
-      animation: rotate-in 0.2s ease-in;
-    }
     .low-carbon line {
       stroke: #0f9d58;
     }
@@ -460,17 +513,26 @@ class HuiEnergyDistrubutionCard extends LitElement implements LovelaceCard {
     .solar .circle {
       border-color: #ff9800;
     }
-    path.solar,
-    circle.solar {
+    circle.solar,
+    path.solar {
       stroke: #ff9800;
     }
+    circle.solar {
+      stroke-width: 4;
+      fill: #ff9800;
+    }
     circle.low-carbon {
       stroke: #0f9d58;
+      fill: #0f9d58;
     }
-    circle.return,
-    path.return {
+    path.return,
+    circle.return {
       stroke: #673ab7;
     }
+    circle.return {
+      stroke-width: 4;
+      fill: #673ab7;
+    }
     .return {
       color: #673ab7;
     }
@@ -484,12 +546,20 @@ class HuiEnergyDistrubutionCard extends LitElement implements LovelaceCard {
     path.grid {
       stroke: #126a9a;
     }
+    circle.grid {
+      stroke-width: 4;
+      fill: #126a9a;
+    }
     .home .circle {
       border: none;
     }
     .home .circle.border {
       border-color: var(--primary-color);
     }
+    .circle svg circle {
+      animation: rotate-in 0.2s ease-in;
+      fill: none;
+    }
     @keyframes rotate-in {
       from {
         stroke-dashoffset: 0;
diff --git a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
index 6e3c756e47..3cb8500e10 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
@@ -207,7 +207,7 @@ export class HuiEnergySolarGraphCard
           tension: 0.3,
           borderWidth: 1.5,
         },
-        bar: { borderWidth: 1.5 },
+        bar: { borderWidth: 1.5, borderRadius: 4 },
         point: {
           hitRadius: 5,
         },
diff --git a/src/panels/lovelace/cards/energy/hui-energy-summary-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-summary-graph-card.ts
index 7e98facdac..75b95360c1 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-summary-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-summary-graph-card.ts
@@ -223,7 +223,7 @@ export class HuiEnergySummaryGraphCard
         mode: "nearest",
       },
       elements: {
-        bar: { borderWidth: 1.5 },
+        bar: { borderWidth: 1.5, borderRadius: 4 },
         point: {
           hitRadius: 5,
         },