fix(compare-per-dollar): clearer axis labels and curve-extension distinction in PNG

[Oseltamivir]

Summary

Two readability problems in the indexed performance-per-dollar.png shipped in #392:

1. Y-axis labels were inconsistent ($0.000 / $9.01 / $18.0 / $27.0) because the formatter picked precision from each tick's magnitude. Now uses a 1/2/5-step "nice axis" with a single precision picked from the step size and applied uniformly.

2. Curve continued past the rightmost labeled dot with no visual cue, so it wasn't clear whether the trailing values were real or extrapolation. The curve is now split at the matched-interactivity bounds:

   • Solid between the labeled dots (the matched comparison band)
   • Dashed + semi-translucent past the last dot (extending toward each SKU's operating envelope edge, where cost rises steeply)
   • Faint italic endpoint labels mark the actual x-range
   • One-line caption under the axis explains the convention

The asymptote story (cost rises sharply approaching each SKU's pareto edge) is preserved, but now the reader can tell at a glance which portion of the curve is the matched comparison and which is the envelope-edge extension.

Implementation

computeCompareImageRows gains an optional includeTargets: number[] argument. The route passes the three plotted-dot targets so they land as exact samples in the curve — the renderer can then partition target >= matchedMin && target <= matchedMax cleanly without per-segment boundary interpolation. includeTargets outside the interactivity range are dropped, and duplicates of the even grid are deduped.

Validation

• pnpm typecheck, pnpm lint, pnpm fmt all pass (pre-commit hook ran them too)
• New unit test file compare-ssr.test.ts covers the includeTargets contract: even-grid count preserved, includes are inserted, out-of-range dropped, dedupe works, degenerate range returns empty
• Fetched the rendered PNG locally with E2E_FIXTURES=1 pnpm dev for three representative pairs (DeepSeek V4 Pro B200 vs MI355X, DeepSeek R1 B200 vs H200, DeepSeek V4 Pro GB200 vs MI355X) — y-axis ticks are clean round numbers, dashed extensions are unambiguous, caption renders within the panel

Before / after on the reported case

Before (#392, DeepSeek V4 Pro B200 vs MI355X): $0.000 / $9.01 / $18.0 / $27.0, curve continues past 42 with no x-tick or styling change.
After: round $0 / $5 / $10 / $15 / $20 / $25 ticks, solid curve between the dots, dashed continuation past the last dot, italic endpoint labels at the curve's actual x-range.

---

Note

Low Risk
Changes are limited to static OG image rendering, structured data, and sampling helpers—no auth, payments, or core API behavior.

Overview
Improves the performance-per-dollar OG PNG and tightens compare SEO in the same pass.

The PNG route now renders at native 2× resolution (no CSS scale blur), uses d3-style “nice” Y-axis ticks with uniform dollar formatting, and draws cost curves as solid in the matched-interactivity band and dashed toward each SKU’s envelope edges, with faint endpoint labels and a short caption. computeCompareImageRows accepts optional includeTargets so table dot targets are exact samples for clean segment boundaries; vitest covers merge, clamp, and dedupe behavior.

Both /compare and /compare-per-dollar slug pages emit extra BreadcrumbList JSON-LD, pass benchmark datePublished/dateModified into the main graph, and enrich the shared buildJsonLd output (license, keywords, JSON DataDownload link, Thing list items, per-row Dataset parts).

^{Reviewed by Cursor Bugbot for commit f501dbb. Bugbot is set up for automated code reviews on this repo. Configure here.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
inferencemax-app	Ready	Preview, Comment	May 27, 2026 3:54am