jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-04-25 05:47:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add animation to distribution (#9625)

Browse Source
This commit is contained in:
Bram Kragten 2021-07-28 17:39:12 +02:00 committed by GitHub
parent 1d7007584c
commit f8dd1795bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 92 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts
View File

@ -138,7 +138,7 @@ export class HuiEnergyDevicesGraphCard
},
},
},
elements: { bar: { borderWidth: 1.5 } },
elements: { bar: { borderWidth: 1.5, borderRadius: 4 } },
plugins: {
tooltip: {
mode: "nearest",

108
src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
View File

@ -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;

2
src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
View File

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

2
src/panels/lovelace/cards/energy/hui-energy-summary-graph-card.ts
View File

@ -223,7 +223,7 @@ export class HuiEnergySummaryGraphCard
mode: "nearest",
},
elements: {
bar: { borderWidth: 1.5 },
bar: { borderWidth: 1.5, borderRadius: 4 },
point: {
hitRadius: 5,
},