Skip to content

Commit ca12967

Browse files
semyonfoxsemyonfox
authored
ci: format dashboard pages (#39)
1 parent 7f756dd commit ca12967

2 files changed

Lines changed: 110 additions & 23 deletions

File tree

‎dashboard/src/pages/Analytics.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -143,9 +143,7 @@ export default function Analytics() {
143143
<div className="mx-auto max-w-7xl space-y-5">
144144
<div className="flex flex-wrap items-end justify-between gap-3">
145145
<div>
146-
<p className="text-xs font-semibold uppercase text-[var(--rail-green)]">
147-
Live network
148-
</p>
146+
<p className="text-xs font-semibold uppercase text-[var(--rail-green)]">Live network</p>
149147
<h1 className="text-2xl font-semibold text-white">Ireland live rail operations</h1>
150148
</div>
151149
<div className="rounded-lg border border-[var(--rail-border)] bg-[var(--rail-surface)] px-4 py-3 text-sm">

‎dashboard/src/pages/History.tsx‎

Lines changed: 109 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,8 @@ export default function History() {
111111
: chartData.reduce((total, point) => total + point.onTimePct * point.eventCount, 0) /
112112
chartData.reduce((total, point) => total + point.eventCount, 0);
113113
const peak = chartData.reduce<DelayPoint | undefined>(
114-
(highest, point) => (!highest || point.p95LateMinutes > highest.p95LateMinutes ? point : highest),
114+
(highest, point) =>
115+
!highest || point.p95LateMinutes > highest.p95LateMinutes ? point : highest,
115116
undefined,
116117
);
117118

@@ -138,7 +139,9 @@ export default function History() {
138139
<div className="mx-auto max-w-7xl space-y-5">
139140
<div className="flex flex-wrap items-end justify-between gap-3">
140141
<div>
141-
<p className="text-xs font-semibold uppercase text-[var(--rail-green)]">Historical analysis</p>
142+
<p className="text-xs font-semibold uppercase text-[var(--rail-green)]">
143+
Historical analysis
144+
</p>
142145
<h1 className="text-2xl font-semibold text-white">Delay history & trends</h1>
143146
<p className="mt-1 text-sm text-[var(--rail-muted)]">
144147
Explore retained Irish Rail board observations by network or station.
@@ -151,7 +154,10 @@ export default function History() {
151154

152155
<section className="flex flex-wrap items-end gap-4 rounded-lg border border-[var(--rail-border)] bg-[var(--rail-surface)] p-4">
153156
<div>
154-
<label className="mb-2 block text-xs font-semibold uppercase text-[var(--rail-muted)]" htmlFor="history-range">
157+
<label
158+
className="mb-2 block text-xs font-semibold uppercase text-[var(--rail-muted)]"
159+
htmlFor="history-range"
160+
>
155161
Range
156162
</label>
157163
<select
@@ -160,11 +166,18 @@ export default function History() {
160166
onChange={(event) => changeRange(event.target.value as RangeId)}
161167
className="rounded border border-[var(--rail-border)] bg-[var(--rail-bg)] px-3 py-2 text-sm text-white"
162168
>
163-
{ranges.map((item) => <option key={item.id} value={item.id}>{item.label}</option>)}
169+
{ranges.map((item) => (
170+
<option key={item.id} value={item.id}>
171+
{item.label}
172+
</option>
173+
))}
164174
</select>
165175
</div>
166176
<div>
167-
<label className="mb-2 block text-xs font-semibold uppercase text-[var(--rail-muted)]" htmlFor="history-bucket">
177+
<label
178+
className="mb-2 block text-xs font-semibold uppercase text-[var(--rail-muted)]"
179+
htmlFor="history-bucket"
180+
>
168181
Detail
169182
</label>
170183
<select
@@ -179,7 +192,10 @@ export default function History() {
179192
</select>
180193
</div>
181194
<div className="min-w-56 flex-1">
182-
<label className="mb-2 block text-xs font-semibold uppercase text-[var(--rail-muted)]" htmlFor="history-station">
195+
<label
196+
className="mb-2 block text-xs font-semibold uppercase text-[var(--rail-muted)]"
197+
htmlFor="history-station"
198+
>
183199
Scope
184200
</label>
185201
<select
@@ -190,7 +206,9 @@ export default function History() {
190206
>
191207
<option value="">All-Ireland network</option>
192208
{(stationData?.stations ?? []).map((station) => (
193-
<option key={station.stationCode} value={station.stationCode}>{station.stationDesc}</option>
209+
<option key={station.stationCode} value={station.stationCode}>
210+
{station.stationDesc}
211+
</option>
194212
))}
195213
</select>
196214
</div>
@@ -199,15 +217,21 @@ export default function History() {
199217
<section className="grid gap-3 md:grid-cols-3">
200218
<div className="rounded-lg border border-[var(--rail-border)] bg-[var(--rail-surface)] p-4">
201219
<div className="text-xs uppercase text-[var(--rail-muted)]">Weighted average delay</div>
202-
<div className="mt-1 text-2xl font-semibold text-[var(--rail-yellow)]">+{avgDelay.toFixed(1)}m</div>
220+
<div className="mt-1 text-2xl font-semibold text-[var(--rail-yellow)]">
221+
+{avgDelay.toFixed(1)}m
222+
</div>
203223
</div>
204224
<div className="rounded-lg border border-[var(--rail-border)] bg-[var(--rail-surface)] p-4">
205225
<div className="text-xs uppercase text-[var(--rail-muted)]">On-time performance</div>
206-
<div className="mt-1 text-2xl font-semibold text-[var(--rail-green)]">{formatPct(onTime)}</div>
226+
<div className="mt-1 text-2xl font-semibold text-[var(--rail-green)]">
227+
{formatPct(onTime)}
228+
</div>
207229
</div>
208230
<div className="rounded-lg border border-[var(--rail-border)] bg-[var(--rail-surface)] p-4">
209231
<div className="text-xs uppercase text-[var(--rail-muted)]">Highest p95 delay</div>
210-
<div className="mt-1 text-2xl font-semibold text-[var(--rail-orange)]">{peak ? `+${peak.p95LateMinutes.toFixed(1)}m` : "-"}</div>
232+
<div className="mt-1 text-2xl font-semibold text-[var(--rail-orange)]">
233+
{peak ? `+${peak.p95LateMinutes.toFixed(1)}m` : "-"}
234+
</div>
211235
</div>
212236
</section>
213237

@@ -223,14 +247,54 @@ export default function History() {
223247
<ResponsiveContainer width="100%" height={340}>
224248
<ComposedChart data={chartData} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
225249
<CartesianGrid strokeDasharray="3 3" stroke="#334155" />
226-
<XAxis dataKey="label" stroke="#94a3b8" fontSize={11} tickLine={false} minTickGap={32} />
250+
<XAxis
251+
dataKey="label"
252+
stroke="#94a3b8"
253+
fontSize={11}
254+
tickLine={false}
255+
minTickGap={32}
256+
/>
227257
<YAxis yAxisId="delay" stroke="#94a3b8" fontSize={12} tickLine={false} unit="m" />
228-
<YAxis yAxisId="events" orientation="right" stroke="#64748b" fontSize={12} tickLine={false} />
229-
<Tooltip contentStyle={{ backgroundColor: "#1e293b", border: "1px solid #334155", borderRadius: "8px" }} />
258+
<YAxis
259+
yAxisId="events"
260+
orientation="right"
261+
stroke="#64748b"
262+
fontSize={12}
263+
tickLine={false}
264+
/>
265+
<Tooltip
266+
contentStyle={{
267+
backgroundColor: "#1e293b",
268+
border: "1px solid #334155",
269+
borderRadius: "8px",
270+
}}
271+
/>
230272
<Legend wrapperStyle={{ color: "#cbd5e1", fontSize: 12 }} />
231-
<Bar yAxisId="events" dataKey="eventCount" name="Board observations" fill="#334155" radius={[3, 3, 0, 0]} />
232-
<Line yAxisId="delay" type="monotone" dataKey="avgLateMinutes" name="Average delay" stroke="#22c55e" strokeWidth={2} dot={false} />
233-
<Line yAxisId="delay" type="monotone" dataKey="p95LateMinutes" name="p95 delay" stroke="#f97316" strokeWidth={2} dot={false} />
273+
<Bar
274+
yAxisId="events"
275+
dataKey="eventCount"
276+
name="Board observations"
277+
fill="#334155"
278+
radius={[3, 3, 0, 0]}
279+
/>
280+
<Line
281+
yAxisId="delay"
282+
type="monotone"
283+
dataKey="avgLateMinutes"
284+
name="Average delay"
285+
stroke="#22c55e"
286+
strokeWidth={2}
287+
dot={false}
288+
/>
289+
<Line
290+
yAxisId="delay"
291+
type="monotone"
292+
dataKey="p95LateMinutes"
293+
name="p95 delay"
294+
stroke="#f97316"
295+
strokeWidth={2}
296+
dot={false}
297+
/>
234298
</ComposedChart>
235299
</ResponsiveContainer>
236300
</ChartFrame>
@@ -239,10 +303,35 @@ export default function History() {
239303
<ResponsiveContainer width="100%" height={340}>
240304
<LineChart data={chartData} margin={{ top: 8, right: 20, left: 0, bottom: 0 }}>
241305
<CartesianGrid strokeDasharray="3 3" stroke="#334155" />
242-
<XAxis dataKey="label" stroke="#94a3b8" fontSize={11} tickLine={false} minTickGap={32} />
243-
<YAxis domain={[0, 100]} stroke="#94a3b8" fontSize={12} tickLine={false} unit="%" />
244-
<Tooltip contentStyle={{ backgroundColor: "#1e293b", border: "1px solid #334155", borderRadius: "8px" }} />
245-
<Line type="monotone" dataKey="onTimePct" name="Within 5 minutes" stroke="#22c55e" strokeWidth={2.5} dot={false} />
306+
<XAxis
307+
dataKey="label"
308+
stroke="#94a3b8"
309+
fontSize={11}
310+
tickLine={false}
311+
minTickGap={32}
312+
/>
313+
<YAxis
314+
domain={[0, 100]}
315+
stroke="#94a3b8"
316+
fontSize={12}
317+
tickLine={false}
318+
unit="%"
319+
/>
320+
<Tooltip
321+
contentStyle={{
322+
backgroundColor: "#1e293b",
323+
border: "1px solid #334155",
324+
borderRadius: "8px",
325+
}}
326+
/>
327+
<Line
328+
type="monotone"
329+
dataKey="onTimePct"
330+
name="Within 5 minutes"
331+
stroke="#22c55e"
332+
strokeWidth={2.5}
333+
dot={false}
334+
/>
246335
</LineChart>
247336
</ResponsiveContainer>
248337
</ChartFrame>

0 commit comments

Comments
 (0)