vojacekd/ems
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsivita: výšky grafů přes tailwind chart-*, viewport-fit=cover

Browse Source 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dusan Vojacek
2026-06-11 14:24:10 +02:00
parent 293f32cff1
commit ca6bd4ab2a
6 changed files with 33 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@@ -2,7 +2,7 @@
<html lang="cs" class="dark"> <html lang="cs" class="dark">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>EMS Platform</title> <title>EMS Platform</title>
</head> </head>
<body> <body>

6
frontend/src/components/PriceChart.tsx
View File

@@ -81,11 +81,13 @@ export function PriceChart({ siteId, pollMs = 120_000 }: Props) {
}, [load, pollMs]) }, [load, pollMs])
if (!ready || points.length === 0) { if (!ready || points.length === 0) {
return <div className="h-[280px] w-full animate-pulse rounded-xl border border-slate-800 bg-slate-900/40" /> return (
<div className="h-chart-sm w-full animate-pulse rounded-xl border border-slate-800 bg-slate-900/40 sm:h-chart-md lg:h-chart-xl" />
)
} }
return ( return (
<div className="h-[280px] w-full rounded-xl border border-slate-800 bg-slate-900/40 p-2 pt-4"> <div className="h-chart-sm w-full rounded-xl border border-slate-800 bg-slate-900/40 p-2 pt-4 sm:h-chart-md lg:h-chart-xl">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<LineChart data={points} margin={{ top: 8, right: 12, left: 0, bottom: 0 }}> <LineChart data={points} margin={{ top: 8, right: 12, left: 0, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#334155" opacity={0.6} /> <CartesianGrid strokeDasharray="3 3" stroke="#334155" opacity={0.6} />

9
frontend/src/components/charts/EconomicsChart.tsx
View File

@@ -107,7 +107,9 @@ export function EconomicsChart({ points, hasGreenBonus }: Props) {
})) }))
return ( return (
<ResponsiveContainer width="100%" height={380}> // Výška přes CSS breakpointy (mobil 200 px, desktop 280 px) — žádné window.innerWidth v render.
<div className="h-chart-md w-full lg:h-chart-xl">
<ResponsiveContainer width="100%" height="100%">
<ComposedChart data={data} margin={{ top: 8, right: 16, bottom: 4, left: 0 }}> <ComposedChart data={data} margin={{ top: 8, right: 16, bottom: 4, left: 0 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#334155" /> <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
<XAxis dataKey="label" tick={{ fontSize: 11, fill: '#94a3b8' }} /> <XAxis dataKey="label" tick={{ fontSize: 11, fill: '#94a3b8' }} />
@@ -215,7 +217,8 @@ export function EconomicsChart({ points, hasGreenBonus }: Props) {
strokeDasharray="5 3" strokeDasharray="5 3"
dot={false} dot={false}
/> />
</ComposedChart> </ComposedChart>
</ResponsiveContainer> </ResponsiveContainer>
</div>
) )
} }

9
frontend/src/components/charts/EnergyChart.tsx
View File

@@ -326,8 +326,13 @@ export function EnergyChart({ slots, nowIndex, hidden, onToggle, onChartArea }:
return ( return (
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div className="h-[260px] w-full"> <div className="h-chart-sm w-full sm:h-chart-md lg:h-chart-lg">
<canvas ref={canvasRef} className="max-h-[260px] w-full" role="img" aria-label="Graf výkonů a cen" /> <canvas
ref={canvasRef}
className="max-h-chart-sm w-full sm:max-h-chart-md lg:max-h-chart-lg"
role="img"
aria-label="Graf výkonů a cen"
/>
</div> </div>
<div className="flex flex-wrap gap-x-3 gap-y-1.5 px-1"> <div className="flex flex-wrap gap-x-3 gap-y-1.5 px-1">
{ENERGY_LEGEND.map((item) => { {ENERGY_LEGEND.map((item) => {

4
frontend/src/components/charts/SocTuvChart.tsx
View File

@@ -235,8 +235,8 @@ export function SocTuvChart({ slots, nowIndex, liveBatSoc = null }: Props) {
}, [labels, series, slots, slots.length]) }, [labels, series, slots, slots.length])
return ( return (
<div className="h-[100px] w-full"> <div className="h-[80px] w-full sm:h-[100px]">
<canvas ref={canvasRef} className="max-h-[100px] w-full" role="img" aria-label="SoC a TUV" /> <canvas ref={canvasRef} className="max-h-[80px] w-full sm:max-h-[100px]" role="img" aria-label="SoC a TUV" />
</div> </div>
) )
} }

14
frontend/tailwind.config.ts
View File

@@ -1,10 +1,22 @@
import type { Config } from 'tailwindcss' import type { Config } from 'tailwindcss'
/** Responsivní výšky grafů: mobil chart-sm, tablet chart-md, desktop chart-lg (ekonomika chart-xl). */
const chartHeights = {
'chart-sm': '140px',
'chart-md': '200px',
'chart-lg': '260px',
'chart-xl': '280px',
} as const
export default { export default {
darkMode: 'class', darkMode: 'class',
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: { theme: {
extend: {}, extend: {
height: chartHeights,
maxHeight: chartHeights,
minHeight: chartHeights,
},
}, },
plugins: [], plugins: [],
} satisfies Config } satisfies Config