Skip to content

Commit 427cb88

Browse files
eetueetu
authored
Merge pull request #959 from eetu/flow-mobile-text
Scale up energy flow diagram on mobile
2 parents 662b77f + e4be793 commit 427cb88

4 files changed

Lines changed: 50 additions & 58 deletions

File tree

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { memo, useEffect, useState } from "react";
2121
import { Chart } from "react-chartjs-2";
2222

2323
import { api } from "../../api";
24+
import { mq } from "../../mq";
2425
import { SolisReading } from "../../types/solis";
2526

2627
ChartJS.register(
@@ -212,6 +213,9 @@ const DailyHistory: React.FC<{ className?: string }> = ({ className }) => {
212213
boxShadow: theme.shadows.main,
213214
borderRadius: theme.border.radius,
214215
padding: "1.25em 1.5em",
216+
[mq[0]]: {
217+
padding: "1em",
218+
},
215219
}}
216220
>
217221
<div

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

Lines changed: 42 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
} from "lucide-react";
1717
import { memo } from "react";
1818
import useSWR from "swr";
19+
import { useMediaQuery } from "usehooks-ts";
1920

2021
import { api, fetcher } from "../../api";
2122
import { SolisData } from "../../types/solis";
@@ -62,6 +63,7 @@ const batteryIcon = (soc: number, charging: boolean): LucideIcon => {
6263

6364
const Flow: React.FC<{ className?: string }> = ({ className }) => {
6465
const theme = useTheme();
66+
const isMobile = useMediaQuery("(max-width: 600px)");
6567
const { data } = useSWR<SolisData>(api("/api/solis"), fetcher, {
6668
refreshInterval: 60_000,
6769
refreshWhenHidden: true,
@@ -88,7 +90,7 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
8890

8991
const flowBase = {
9092
fill: "none",
91-
strokeWidth: 3,
93+
strokeWidth: isMobile ? 5 : 3,
9294
strokeDasharray: "4 6",
9395
};
9496
const flowAnim = { animation: `${flow} 1.4s linear infinite` };
@@ -107,6 +109,11 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
107109
const batteryActive = hasFlow(batteryPower);
108110
const gridActive = hasFlow(grid);
109111

112+
const strokeWidth = isMobile ? 4 : 2;
113+
const nodeSize = isMobile ? 42 : 36;
114+
const nodeTitleFontSize = isMobile ? 24 : 18;
115+
const nodeSubTitleFontSize = isMobile ? 20 : 16;
116+
110117
return (
111118
<div
112119
className={className}
@@ -148,7 +155,10 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
148155
: "—"}
149156
</div>
150157
</div>
151-
<svg viewBox="0 0 800 470" css={{ width: "100%", height: "auto" }}>
158+
<svg
159+
viewBox={isMobile ? "80 20 640 425" : "0 0 800 470"}
160+
css={{ width: "100%", height: "auto" }}
161+
>
152162
{/* PV → Inverter */}
153163
<path
154164
d="M160,110 C260,110 300,210 400,210"
@@ -191,15 +201,15 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
191201
<circle
192202
cx="160"
193203
cy="110"
194-
r="36"
204+
r={nodeSize}
195205
fill={theme.colors.background.light}
196206
stroke={theme.colors.activity.on}
197-
strokeWidth="2"
207+
strokeWidth={strokeWidth}
198208
/>
199209
<NodeIcon
200210
cx={160}
201211
cy={110}
202-
size={32}
212+
size={nodeSize}
203213
color={theme.colors.activity.on}
204214
icon={Sun}
205215
/>
@@ -209,7 +219,7 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
209219
y="36"
210220
textAnchor="middle"
211221
fontFamily={theme.fonts.heading}
212-
fontSize="18"
222+
fontSize={nodeTitleFontSize}
213223
fill={theme.colors.text.main}
214224
>
215225
aurinko
@@ -218,7 +228,7 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
218228
x="160"
219229
y="60"
220230
textAnchor="middle"
221-
fontSize="16"
231+
fontSize={nodeSubTitleFontSize}
222232
fill={theme.colors.text.muted}
223233
>
224234
tänään {data.today_energy.toFixed(1)} {data.today_energy_unit}
@@ -239,25 +249,25 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
239249
<circle
240250
cx="400"
241251
cy="210"
242-
r="32"
252+
r={nodeSize}
243253
fill={theme.colors.background.light}
244254
stroke={theme.colors.text.main}
245-
strokeWidth="2"
255+
strokeWidth={strokeWidth}
246256
/>
247257
<NodeIcon
248258
cx={400}
249259
cy={210}
250-
size={28}
260+
size={nodeSize}
251261
color={theme.colors.text.main}
252262
icon={Activity}
253263
/>
254264
</g>
255265
<text
256266
x="400"
257-
y="262"
267+
y={262 + (isMobile ? 12 : 0)}
258268
textAnchor="middle"
259269
fontFamily={theme.fonts.heading}
260-
fontSize="16"
270+
fontSize={nodeTitleFontSize}
261271
fill={theme.colors.text.main}
262272
>
263273
invertteri
@@ -270,34 +280,34 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
270280
<circle
271281
cx="160"
272282
cy="310"
273-
r="36"
283+
r={nodeSize}
274284
fill={theme.colors.background.light}
275285
stroke={theme.colors.battery}
276-
strokeWidth="2"
286+
strokeWidth={strokeWidth}
277287
/>
278288
<NodeIcon
279289
cx={160}
280290
cy={310}
281-
size={32}
291+
size={nodeSize}
282292
color={theme.colors.battery}
283293
icon={batteryIcon(soc, charging > 0)}
284294
/>
285295
</g>
286296
<text
287297
x="160"
288-
y="373"
298+
y={373 + (isMobile ? 5 : 0)}
289299
textAnchor="middle"
290300
fontFamily={theme.fonts.heading}
291-
fontSize="18"
301+
fontSize={nodeTitleFontSize}
292302
fill={theme.colors.text.main}
293303
>
294304
akku
295305
</text>
296306
<text
297307
x="160"
298-
y="397"
308+
y={397 + (isMobile ? 5 : 0)}
299309
textAnchor="middle"
300-
fontSize="16"
310+
fontSize={nodeSubTitleFontSize}
301311
fill={theme.colors.text.muted}
302312
>
303313
{Math.round(soc)}%
@@ -309,7 +319,7 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
309319
</text>
310320
<text
311321
x="160"
312-
y="429"
322+
y={429 + (isMobile ? 5 : 0)}
313323
textAnchor="middle"
314324
fontSize="24"
315325
fill={theme.colors.text.main}
@@ -325,15 +335,15 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
325335
<circle
326336
cx="640"
327337
cy="110"
328-
r="36"
338+
r={nodeSize}
329339
fill={theme.colors.background.light}
330340
stroke={theme.colors.activity.on}
331-
strokeWidth="2"
341+
strokeWidth={strokeWidth}
332342
/>
333343
<NodeIcon
334344
cx={640}
335345
cy={110}
336-
size={30}
346+
size={nodeSize}
337347
color={theme.colors.activity.on}
338348
icon={Plug}
339349
/>
@@ -343,7 +353,7 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
343353
y="36"
344354
textAnchor="middle"
345355
fontFamily={theme.fonts.heading}
346-
fontSize="18"
356+
fontSize={nodeTitleFontSize}
347357
fill={theme.colors.text.main}
348358
>
349359
verkko
@@ -352,14 +362,14 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
352362
x="640"
353363
y="60"
354364
textAnchor="middle"
355-
fontSize="16"
365+
fontSize={nodeSubTitleFontSize}
356366
fill={theme.colors.text.muted}
357367
>
358368
{importing > 0 ? "tuonti" : exporting > 0 ? "vienti" : "lepotila"}
359369
</text>
360370
<text
361371
x="640"
362-
y="178"
372+
y={178 + (isMobile ? 5 : 0)}
363373
textAnchor="middle"
364374
fontSize="24"
365375
fill={theme.colors.text.main}
@@ -373,32 +383,32 @@ const Flow: React.FC<{ className?: string }> = ({ className }) => {
373383
<circle
374384
cx="640"
375385
cy="310"
376-
r="36"
386+
r={nodeSize}
377387
fill={theme.colors.background.light}
378388
stroke={theme.colors.home}
379-
strokeWidth="2"
389+
strokeWidth={strokeWidth}
380390
/>
381391
<NodeIcon
382392
cx={640}
383393
cy={310}
384-
size={30}
394+
size={nodeSize}
385395
color={theme.colors.home}
386396
icon={House}
387397
/>
388398
</g>
389399
<text
390400
x="640"
391-
y="373"
401+
y={373 + (isMobile ? 5 : 0)}
392402
textAnchor="middle"
393403
fontFamily={theme.fonts.heading}
394-
fontSize="18"
404+
fontSize={nodeTitleFontSize}
395405
fill={theme.colors.text.main}
396406
>
397407
koti
398408
</text>
399409
<text
400410
x="640"
401-
y="429"
411+
y={429 + (isMobile ? 5 : 0)}
402412
textAnchor="middle"
403413
fontSize="24"
404414
fill={theme.colors.text.main}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { memo, useEffect, useState } from "react";
33
import useSWR from "swr";
44

55
import { api, fetcher } from "../../api";
6+
import { mq } from "../../mq";
67
import { SolisData, SolisReading } from "../../types/solis";
78

89
type Aggregates = {
@@ -110,6 +111,9 @@ const Summary: React.FC<{ className?: string }> = ({ className }) => {
110111
boxShadow: theme.shadows.main,
111112
borderRadius: theme.border.radius,
112113
padding: "1.25em 1.5em",
114+
[mq[0]]: {
115+
padding: "1em",
116+
},
113117
}}
114118
>
115119
<div

‎frontend/src/components/LightGroups.tsx‎

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -143,32 +143,6 @@ const LightGroup: FC<LightGroupProps> = ({ group }) => {
143143
>
144144
{demo ? anonymize(group.id, "ryhmä") : group.name}
145145
</span>
146-
<span
147-
css={{
148-
display: "flex",
149-
alignItems: "center",
150-
gap: 6,
151-
fontFamily: theme.fonts.heading,
152-
fontSize: 12,
153-
fontWeight: 500,
154-
letterSpacing: "0.05em",
155-
textTransform: "uppercase",
156-
color: isOn ? accent : muted,
157-
transition: "color 0.3s ease",
158-
}}
159-
>
160-
<span
161-
css={{
162-
display: "inline-block",
163-
width: 7,
164-
height: 7,
165-
borderRadius: "50%",
166-
backgroundColor: isOn ? accent : muted,
167-
transition: "background 0.3s ease",
168-
}}
169-
/>
170-
{isOn ? "päällä" : "pois"}
171-
</span>
172146
</div>
173147
</button>
174148
);

0 commit comments

Comments
 (0)