fix: keep outage labels in-frame + show Fast Lane line based on data
Build and Deploy / Lint, typecheck, test (push) Successful in 34s
Build and Deploy / Build & Push (push) Successful in 57s

Two refinements after the previous label change:

1. Outage labels rendered at position="top" were clipping against the
   chart's 8px top margin. Bumped to 24px so #N · Hh Mm sits above the
   band fully visible.

2. Fast Lane line was only rendered when the ride's metadata flag
   has_fast_lane was true. Some rides report Fast Lane waits without
   getting flagged, so we now also render the line whenever today's
   samples carry any non-null fastLaneMinutes — catches rides that are
   walk-on all day with a flat line at 0.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-05-30 19:36:08 -04:00
parent b401f28fef
commit d43d8eba86
+10 -3
View File
@@ -36,6 +36,12 @@ export default function WaitTimeTodayChart({ samples, hasFastLane }: Props) {
const outages = computeOutages(samples); const outages = computeOutages(samples);
const outageByTime = outageLookup(samples, outages); const outageByTime = outageLookup(samples, outages);
// Show the Fast Lane line if either the ride metadata flags it as a Fast
// Lane ride OR we have any actual Fast Lane data in today's samples. The
// metadata flag can lag (or read false even when SF is reporting waits),
// so the data-driven check rescues those rides.
const showFastLane = hasFastLane || samples.some((s) => s.fastLaneMinutes !== null);
// X-axis time is rendered in the viewer's local timezone (Intl with no // X-axis time is rendered in the viewer's local timezone (Intl with no
// tz arg) so an Eastern-time user sees ET regardless of which park. // tz arg) so an Eastern-time user sees ET regardless of which park.
// Each point also carries its outage (if any) so the custom tooltip can // Each point also carries its outage (if any) so the custom tooltip can
@@ -57,7 +63,8 @@ export default function WaitTimeTodayChart({ samples, hasFastLane }: Props) {
return ( return (
<div style={{ width: "100%", height: 280 }}> <div style={{ width: "100%", height: 280 }}>
<ResponsiveContainer> <ResponsiveContainer>
<LineChart data={data} margin={{ top: 8, right: 16, left: 0, bottom: 4 }}> {/* top margin leaves room for outage labels rendered with position="top" */}
<LineChart data={data} margin={{ top: 24, right: 16, left: 0, bottom: 4 }}>
<CartesianGrid stroke="#272727" strokeDasharray="3 3" vertical={false} /> <CartesianGrid stroke="#272727" strokeDasharray="3 3" vertical={false} />
<XAxis <XAxis
dataKey="time" dataKey="time"
@@ -97,7 +104,7 @@ export default function WaitTimeTodayChart({ samples, hasFastLane }: Props) {
}} }}
/> />
))} ))}
<Tooltip content={<RideTooltip hasFastLane={hasFastLane} />} /> <Tooltip content={<RideTooltip hasFastLane={showFastLane} />} />
<Legend wrapperStyle={{ fontSize: "0.72rem", paddingTop: 4 }} /> <Legend wrapperStyle={{ fontSize: "0.72rem", paddingTop: 4 }} />
<Line <Line
name="Wait" name="Wait"
@@ -109,7 +116,7 @@ export default function WaitTimeTodayChart({ samples, hasFastLane }: Props) {
connectNulls={false} connectNulls={false}
isAnimationActive={false} isAnimationActive={false}
/> />
{hasFastLane && ( {showFastLane && (
<Line <Line
name="Fast Lane" name="Fast Lane"
type="monotone" type="monotone"