feat(creator-economy): hover values on trend lines#1075
Conversation
Hovering a line chart now reveals the exact values for the quarter under the cursor: a per-point hit band shows a hairline, ringed dots on each series and a fixed readout (quarter plus formatted values) at the chart's top left. Implementation is CSS-only visibility on server-rendered SVG - no client JS, and no svg title tooltips (the document title streams late on this page, so a first-title parser would read a tooltip as the page title; same reasoning as the aria-hidden marks). Touch/keyboard users keep the full-precision tables, which remain the accessible view of every chart. Adds a LineChart spec (hover band per point, readout contents, multi-series naming, no-title invariant).
|
Warning Review limit reached
Next review available in: 2 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 289a9c8b94
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| {series.map((s) => | ||
| series.length > 1 | ||
| ? ` · ${s.name} ${valueFormatter(s.values[i] ?? 0)}` | ||
| : ` · ${valueFormatter(s.values[i] ?? 0)}` |
There was a problem hiding this comment.
When the new hover labels render the current creator-economy trend charts, they reuse the same compact formatter as the sparse line labels (and the USD chart passes a compact formatter too). For any non-round value at or above 1,000, such as 119,762 posts or 1,051,139 comments in the bundled quarterly data, the hover readout shows rounded text like 120K/1.05M instead of the exact quarter value the feature advertises, so users still have to leave the chart for the table to see the precise value. Use a separate full-value hover formatter or bypass formatCompact for this readout.
Useful? React with 👍 / 👎.
Greptile SummaryThis PR adds a pure-CSS hover interaction to the
Confidence Score: 5/5Safe to merge — changes are limited to static SVG rendering with pure-CSS hover logic and no runtime data mutations. All changes are additive SVG/CSS with zero client-side JS. The hover mechanism relies on a well-understood CSS :hover + opacity pattern on server-rendered markup. The new spec suite validates the key invariants. The only finding is a stale JSDoc string that no longer matches the no-title design documented throughout the rest of the file. The file-level JSDoc in charts.tsx still references SVG title tooltips and should be updated to match the rest of the file's documented intent. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
SSR["Server renders SVG\n(LineChart)"]
SSR --> BANDS["N x ce-hband groups\n(one per label)"]
BANDS --> RECT["transparent rect\nfill='transparent'\n captures pointer events"]
BANDS --> HLBL["ce-hlbl group\nopacity:0, pointer-events:none\n invisible, non-interactive"]
HLBL --> HAIRLINE["vertical hairline\nat px(i)"]
HLBL --> DOTS["series dots\ncircle r=4 per series"]
HLBL --> READOUT["readout text\nquarter + readoutFormatter(value)"]
HOVER["cursor enters rect"]
HOVER --> CSSHOVER[".ce-hband:hover"]
CSSHOVER --> SHOW["ce-hlbl: opacity 1\n(transition 0.1s)"]
SHOW --> VISIBLE["hairline + dots + readout visible"]
LEAVE["cursor leaves rect"]
LEAVE --> HIDE["ce-hlbl: opacity 0"]
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
SSR["Server renders SVG\n(LineChart)"]
SSR --> BANDS["N x ce-hband groups\n(one per label)"]
BANDS --> RECT["transparent rect\nfill='transparent'\n captures pointer events"]
BANDS --> HLBL["ce-hlbl group\nopacity:0, pointer-events:none\n invisible, non-interactive"]
HLBL --> HAIRLINE["vertical hairline\nat px(i)"]
HLBL --> DOTS["series dots\ncircle r=4 per series"]
HLBL --> READOUT["readout text\nquarter + readoutFormatter(value)"]
HOVER["cursor enters rect"]
HOVER --> CSSHOVER[".ce-hband:hover"]
CSSHOVER --> SHOW["ce-hlbl: opacity 1\n(transition 0.1s)"]
SHOW --> VISIBLE["hairline + dots + readout visible"]
LEAVE["cursor leaves rect"]
LEAVE --> HIDE["ce-hlbl: opacity 0"]
Reviews (2): Last reviewed commit: "docs: chart header no longer claims titl..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
- Readouts now show full-precision values (readoutFormatter, default formatFull; USD keeps its dollar prefix) - the compact formatter defeated the point of the feature (Codex). - Hover dot r=4 matches the permanent end dot, removing the layered-radius mismatch on the last point (Greptile). - Readout drops to y=20 and wears a surface-color halo (paint-order stroke) so it stays legible even when a long readout crosses the peak label (Greptile). - ColumnChart accepts-and-ignores readoutFormatter for Trend prop parity.
1 participant
Hovering a trend line on /creator-economy now reveals the exact values for the quarter under the cursor: a hairline, ringed dots on each series, and a fixed readout (quarter plus formatted values) at the chart's top left.
Pure-CSS visibility on the server-rendered SVG - no client JS added, and deliberately no svg title tooltips (this page's document title streams late, so naive first-title parsers would read a tooltip as the page title). Touch and keyboard users keep the full-precision tables as the accessible view.
Includes a LineChart spec covering the hover bands, readout contents, multi-series naming, and the no-title invariant. Suite green (1973).