trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add color legend below grade profile chart

Browse source 
Shows grade thresholds with color swatches: <3% green, <6% yellow,
<10% orange, <15% red, 15%+ dark red. Only visible in grade mode.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-04-11 03:14:12 +02:00
parent da1a5248d6
commit 67439df0ee
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
1 changed files with 9 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

9
apps/planner/app/components/ElevationChart.tsx
View file

@ -354,6 +354,15 @@ export function ElevationChart({ yjs, onHover, days }: ElevationChartProps) {
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
/>
{colorMode === "grade" && (
<div className="mt-1 flex items-center justify-center gap-2 px-2 text-[10px] text-gray-500">
<span className="flex items-center gap-0.5"><span className="inline-block h-2 w-3 rounded-sm" style={{ background: "#22c55e" }} />{"<3%"}</span>
<span className="flex items-center gap-0.5"><span className="inline-block h-2 w-3 rounded-sm" style={{ background: "#eab308" }} />{"<6%"}</span>
<span className="flex items-center gap-0.5"><span className="inline-block h-2 w-3 rounded-sm" style={{ background: "#f97316" }} />{"<10%"}</span>
<span className="flex items-center gap-0.5"><span className="inline-block h-2 w-3 rounded-sm" style={{ background: "#ef4444" }} />{"<15%"}</span>
<span className="flex items-center gap-0.5"><span className="inline-block h-2 w-3 rounded-sm" style={{ background: "#991b1b" }} />{"15%+"}</span>
</div>
)}
</div>
);
}