Add animation to distribution (#9625)

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

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
+                    id="return"
                     class="return"
-                d="M50,0 v20 c0,40 -10,35 -65,35 h20"
+                    d="M47,0 v15 c0,40 -10,35 -30,35 h-20"
+                    vector-effect="non-scaling-stroke"
+                  ></path> `
+                : ""}
+              ${hasSolarProduction
+                ? svg`<path
+                    id="solar"
+                    class="solar"
+                    d="M${
+                      hasReturnToGrid ? 53 : 50
+                    },0 v15 c0,40 10,35 30,35 h20"
                     vector-effect="non-scaling-stroke"
                   ></path>`
                 : ""}
+              <path
+                class="grid"
+                id="grid"
+                d="M0,${hasSolarProduction ? 56 : 53} H100"
+                vector-effect="non-scaling-stroke"
+              ></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`<path
+                ? svg`
-                    class="solar"
+                <circle r="1" class="solar" vector-effect="non-scaling-stroke">
-                    d="M50,0 v20 c0,40 10,35 65,35 h20"
+                    <animateMotion
-                    vector-effect="non-scaling-stroke"
+                      dur="${
-                  ></path>`
+                        6 -
+                        ((totalSolarProduction -
+                          (productionReturnedToGrid || 0)) /
+                          (totalGridConsumption +
+                            (totalSolarProduction || 0))) *
+                          5
+                      }s"
+                      repeatCount="indefinite"
+                      rotate="auto"
+                    >
+                      <mpath xlink:href="#solar" />
+                    </animateMotion>
+                  </circle>`
                 : ""}
               ${totalGridConsumption
-                ? svg`<path
+                ? svg`<circle r="1" class="grid" vector-effect="non-scaling-stroke">
-                class="grid"
+                    <animateMotion
-                d="M0,55 H100"
+                      dur="${
-                vector-effect="non-scaling-stroke"
+                        6 -
-              ></path>`
+                        (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;

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

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