Skip to content

Commit 1ff9e51

Browse files
eetueetu
authored
Merge pull request #948 from eetu/energy-summary
Add daily energy summary panel
2 parents 812077e + f9b82a3 commit 1ff9e51

5 files changed

Lines changed: 398 additions & 27 deletions

File tree

‎frontend/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { api } from "./api";
55
import CurrentTime from "./components/CurrentTime";
66
import EnergyDailyHistory from "./components/Energy/DailyHistory";
77
import EnergyFlow from "./components/Energy/Flow";
8+
import EnergySummary from "./components/Energy/Summary";
89
import FmiWeatherBox from "./components/FmiWeatherBox";
910
import History from "./components/History";
1011
import Icon from "./components/Icon";
@@ -314,6 +315,7 @@ const App = () => {
314315
}}
315316
>
316317
<EnergyFlow />
318+
<EnergySummary />
317319
<EnergyDailyHistory />
318320
</div>
319321
)}

‎frontend/src/components/Energy/DailyHistory.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,9 @@ const DailyHistory: React.FC<{ className?: string }> = ({ className }) => {
7272

7373
const colors = {
7474
pv: theme.colors.activity.on,
75-
battery: "#5fb3a3",
76-
grid: theme.colors.pv,
77-
soc: "#d65a8a",
75+
battery: theme.colors.battery,
76+
grid: theme.colors.grid,
77+
soc: theme.colors.soc,
7878
};
7979

8080
const points = readings.map((r) => ({

‎frontend/src/components/Energy/Flow.tsx‎

Lines changed: 42 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -86,12 +86,6 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
8686

8787
const hasFlow = (v: number) => Math.abs(v) > 0.05;
8888

89-
const accent = theme.colors.activity.on;
90-
const battery = "#5fb3a3";
91-
const homeColor = theme.colors.cool;
92-
const muted = theme.colors.text.muted;
93-
const idleStroke = theme.colors.text.main;
94-
9589
const flowBase = {
9690
fill: "none",
9791
strokeWidth: 3,
@@ -143,7 +137,7 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
143137
<div
144138
css={{
145139
fontSize: 12,
146-
color: muted,
140+
color: theme.colors.text.muted,
147141
whiteSpace: "nowrap",
148142
}}
149143
>
@@ -158,14 +152,14 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
158152
{/* PV → Inverter */}
159153
<path
160154
d="M160,110 C260,110 300,210 400,210"
161-
stroke={accent}
155+
stroke={theme.colors.activity.on}
162156
opacity={pvActive ? 1 : 0.3}
163157
css={[flowBase, pvActive && flowAnim]}
164158
/>
165159
{/* Battery ↔ Inverter */}
166160
<path
167161
d="M160,310 C260,310 300,210 400,210"
168-
stroke={battery}
162+
stroke={theme.colors.battery}
169163
opacity={batteryActive ? 1 : 0.3}
170164
css={[
171165
flowBase,
@@ -176,7 +170,7 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
176170
{/* Inverter ↔ Grid */}
177171
<path
178172
d="M400,210 C500,210 540,110 640,110"
179-
stroke={accent}
173+
stroke={theme.colors.activity.on}
180174
opacity={gridActive ? 1 : 0.3}
181175
css={[
182176
flowBase,
@@ -187,7 +181,7 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
187181
{/* Inverter → Home */}
188182
<path
189183
d="M400,210 C500,210 540,310 640,310"
190-
stroke={homeColor}
184+
stroke={theme.colors.home}
191185
opacity={homeActive ? 1 : 0.3}
192186
css={[flowBase, homeActive && flowAnim]}
193187
/>
@@ -199,10 +193,16 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
199193
cy="110"
200194
r="36"
201195
fill={theme.colors.background.light}
202-
stroke={accent}
196+
stroke={theme.colors.activity.on}
203197
strokeWidth="2"
204198
/>
205-
<NodeIcon cx={160} cy={110} size={32} color={accent} icon={Sun} />
199+
<NodeIcon
200+
cx={160}
201+
cy={110}
202+
size={32}
203+
color={theme.colors.activity.on}
204+
icon={Sun}
205+
/>
206206
</g>
207207
<text
208208
x="160"
@@ -214,7 +214,13 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
214214
>
215215
aurinko
216216
</text>
217-
<text x="160" y="60" textAnchor="middle" fontSize="16" fill={muted}>
217+
<text
218+
x="160"
219+
y="60"
220+
textAnchor="middle"
221+
fontSize="16"
222+
fill={theme.colors.text.muted}
223+
>
218224
tänään {data.today_energy.toFixed(1)} {data.today_energy_unit}
219225
</text>
220226
<text
@@ -235,14 +241,14 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
235241
cy="210"
236242
r="32"
237243
fill={theme.colors.background.light}
238-
stroke={idleStroke}
244+
stroke={theme.colors.text.main}
239245
strokeWidth="2"
240246
/>
241247
<NodeIcon
242248
cx={400}
243249
cy={210}
244250
size={28}
245-
color={idleStroke}
251+
color={theme.colors.text.main}
246252
icon={Activity}
247253
/>
248254
</g>
@@ -266,14 +272,14 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
266272
cy="310"
267273
r="36"
268274
fill={theme.colors.background.light}
269-
stroke={battery}
275+
stroke={theme.colors.battery}
270276
strokeWidth="2"
271277
/>
272278
<NodeIcon
273279
cx={160}
274280
cy={310}
275281
size={32}
276-
color={battery}
282+
color={theme.colors.battery}
277283
icon={batteryIcon(soc, charging > 0)}
278284
/>
279285
</g>
@@ -292,7 +298,7 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
292298
y="397"
293299
textAnchor="middle"
294300
fontSize="16"
295-
fill={muted}
301+
fill={theme.colors.text.muted}
296302
>
297303
{Math.round(soc)}%
298304
{charging > 0
@@ -321,10 +327,16 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
321327
cy="110"
322328
r="36"
323329
fill={theme.colors.background.light}
324-
stroke={accent}
330+
stroke={theme.colors.activity.on}
325331
strokeWidth="2"
326332
/>
327-
<NodeIcon cx={640} cy={110} size={30} color={accent} icon={Plug} />
333+
<NodeIcon
334+
cx={640}
335+
cy={110}
336+
size={30}
337+
color={theme.colors.activity.on}
338+
icon={Plug}
339+
/>
328340
</g>
329341
<text
330342
x="640"
@@ -336,7 +348,13 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
336348
>
337349
verkko
338350
</text>
339-
<text x="640" y="60" textAnchor="middle" fontSize="16" fill={muted}>
351+
<text
352+
x="640"
353+
y="60"
354+
textAnchor="middle"
355+
fontSize="16"
356+
fill={theme.colors.text.muted}
357+
>
340358
{importing > 0 ? "tuonti" : exporting > 0 ? "vienti" : "lepotila"}
341359
</text>
342360
<text
@@ -357,14 +375,14 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
357375
cy="310"
358376
r="36"
359377
fill={theme.colors.background.light}
360-
stroke={homeColor}
378+
stroke={theme.colors.home}
361379
strokeWidth="2"
362380
/>
363381
<NodeIcon
364382
cx={640}
365383
cy={310}
366384
size={30}
367-
color={homeColor}
385+
color={theme.colors.home}
368386
icon={House}
369387
/>
370388
</g>

0 commit comments

Comments
 (0)