fix(frontend): match chart fair/target reference lines + always-show price chips (post-#322)#323
Merged
Merged
Conversation
Fast-follow to PR #322 (recommended by quantrank-reviewer + phase-coordinator at the merge gate). The html, body { overflow-x: clip } added in #322 is a non-obvious site-wide invariant; document it durably so a future frontend author doesn't break it. CLAUDE.md §Gotchas + AGENTS.md §Code-style mirror record: keep clip NOT hidden (hidden creates a scroll container and breaks the sticky sidebar/header; clip does not); page-level horizontal scroll is intentionally impossible, so wide content nests its own overflow-x-auto (RankingTable pattern); the chart-remount + fixed-backdrop root cause; Safari 16+ / Chrome 90+ support (older degrades to prior behavior, not a regression). Doc-only; lockstep via the CLAUDE.md + AGENTS.md substance diff. ruff clean. https://claude.ai/code/session_0144kHrCYNaamMPH57b7xdM7
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…price chips Per user request, four coupled tweaks to PriceHistoryChart's fair-value + target reference lines and the chip row below the price headline: 1. Target line same stroke-width as the fair-value line (both strokeWidth=1.5; were both implicit default 1). 2. Fair-value line adopts the target's theme-aware color (isDark ? #e2e8f0 : #0f172a) — near-white in dark mode (the user's mode), near-black on #FAFAFA in light mode (~19:1, deliberately not literally white). The two lines stay distinguishable by dash only (fair dashed 5 3, target solid). 3. Remove the in-chart "Fair $X" / "Target $X" text labels from both ReferenceLines (dropped the label prop). 4. Always show the fair/target chips below the price headline (condition was off-y-domain-only -> now whenever the value exists; the chip is the canonical number read). Removed the now-unused fairOffChart/targetOffChart consts; legend swatches updated to match the new lines (both near-black/ white, equal weight, dark:*-slate-200 matching #e2e8f0); chip price spans gained tabular-nums. Frontend-only; no schema/compute/scoring/valuation change. Verified: frontend-design-reviewer zero-FAIL; ruff + tsc + next build (506) clean; 3 dark-mode mobile Playwright screenshots (APH/AAPL/AMD) confirm both lines render white/1.5/dash-distinguished/no-label and the chips always show. https://claude.ai/code/session_0144kHrCYNaamMPH57b7xdM7
dackclup
changed the title
…et chips Each price chip below the chart headline now shows the signed % distance from the current price after the dollar value, e.g. "Fair $125.92 (-14.7%)" / "Target $169.82 (+15.0%)". Positive = upside (reference above current price), negative = downside; the sign matches the chip's existing green/red cue. One decimal; suppressed when current price is missing or <= 0. Frontend-only; no schema/compute/scoring/valuation change. Follows 2aed22b on this branch (PR #323). https://claude.ai/code/session_0144kHrCYNaamMPH57b7xdM7
The price headline now renders the current price's as-of date (e.g. "as of May 28, 2026") as a third muted line below the +/-change row, via the existing formatTooltipLabel helper. It's the latest close's date — constant across period switches, matching the headline price and the latest-point tooltip. Frontend-only; no schema/compute/scoring/valuation change. Follows 247478e on this branch (PR #323). https://claude.ai/code/session_0144kHrCYNaamMPH57b7xdM7
…adline Bump the current-price as-of date line from text-xs/slate-500 to text-sm/slate-900 dark:slate-100 (same color as the $price headline), per user request — more prominent and visually tied to the price it dates. Frontend-only; no schema/compute/scoring/valuation change. Follows ede3653 on this branch (PR #323). https://claude.ai/code/session_0144kHrCYNaamMPH57b7xdM7
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Two post-#322 follow-ups to the per-stock price chart, bundled on this branch.
1. Chart fair/target reference-line + chip restyle (user request) —
2aed22b·247478e2·ede3653fTweaks to
PriceHistoryChart.tsx:strokeWidth={1.5}(were both implicit default 1; the mismatch the user saw was reinforced by the 1px-vs-2px legend swatches).strokeflips from the always-gray#94a3b8to the target's theme-awareisDark ? '#e2e8f0' : '#0f172a'. Near-white in dark mode (the user's mode), near-black on#FAFAFAin light mode (~19:1 contrast — deliberately not literally white, which would vanish on the light bg). Distinguishable by dash only (fair5 3dashed, target solid).label={{...}}prop from both<ReferenceLine>s (no more "Fair $X" / "Target $X" floating on the lines).fairOffChart/targetOffChart(off-y-domain only) →fairIsNumber/targetEligible(whenever the value exists); the chips are now the canonical number read. Removed the now-unused*OffChartconsts; legend swatches updated to match the new lines; chip price spans gainedtabular-nums.%delta after each chip value (247478e2) — each chip shows the%distance from the current price after the dollar value, e.g.Fair $125.92 (-14.7%)/Target $169.82 (+15.0%). + = upside / − = downside, sign matching the green/red cue; one decimal; suppressed if current price is missing/≤0.ede3653f) — the latest close's date renders as a third muted line below the change indicator (as of May 28, 2026, via the existingformatTooltipLabel). Constant across period switches — it's the current price's date, matching the headline price + the latest-point tooltip.Frontend-only; no schema / compute / scoring / valuation change.
Verified:
frontend-design-reviewerzero-FAIL (READY-FOR-SPOT-CHECK) — light-mode contrast OK (#0f172aon#FAFAFA≈ 19:1; no white-on-white), a11y floor holds (color + dash + text = three signals). DOM inspection + dark-mode mobile (414×896,isMobile) Playwright screenshots — APH (lines in-range;Fair $125.92 (-14.7%)/Target $169.82 (+15.0%)), AAPL (off-chart, chip-only;Fair $172.51 (-44.8%)/Target $342.37 (+9.6%)), AMD (well-separated) — confirm both<line>s render stroke#e2e8f0/ width1.5/ fair dashed / target solid / no label, chips show value + signed%, and the as-of date renders below the change row.ruff+tsc+next build(506 routes) clean.2. Document the
overflow-x: clipinvariant (§Gotcha) —eba33f7Fast-follow to #322 (merged
fd045277), recommended by bothquantrank-reviewer(opus) andphase-coordinatorat the #322 merge gate. Thehtml, body { overflow-x: clip }added in #322 is a non-obvious site-wide invariant; this gives it a durable home in CLAUDE.md §Gotchas (+ an AGENTS.md §Code-style mirror): keepclipNOThidden(hidden creates a scroll container → breaks the sticky sidebar/header); page-level horizontal scroll is intentionally impossible → wide content nests its ownoverflow-x-auto(theRankingTablepattern); the chart-remount + fixed-backdrop root cause; Safari 16+ / Chrome 90+ support floor. Doc-only.Lockstep
CLAUDE.md + AGENTS.md substance diff (the §Gotcha) +
PHASE_STATUS_INFLIGHT.mdentries for the chart change.https://claude.ai/code/session_0144kHrCYNaamMPH57b7xdM7
Generated by Claude Code