Conversation
* feat(chart): add links to data point tooltips * fix(chart): keep linked tooltips interactive * fix(chart): keep point links on their rows * fix(chart): format custom tooltip values * test(chart): cover links across tooltip types * style(chart): use camel case for tooltip helper * test(chart): remove unused serialization fixture * fix(chart): keep tooltip links accessible * docs(changelog): file the point link entry under unreleased * fix(chart): link every slice of a pie chart
d08ca20 to
3945c7b
Compare
81reap
left a comment
81reap
left a comment
There was a problem hiding this comment.
can you rebase and fix the merge conflicts? If we can resolve the visual tooltip discrepancy then this PR LGTM!
| chart_type === "rangeBar" || (chart_type === "bar" && !!data.horizontal); | ||
| const value_axis = inverted ? "x" : "y"; | ||
| const category_axis = inverted ? "y" : "x"; | ||
| const has_point_links = points.some((point) => point[5]); |
There was a problem hiding this comment.
why use magic numbers as indexes if we have all the named vars deconstructed here
SQLPage/frontend/src/apexcharts.js
Line 114 in b41e4eb
| json('[ | ||
| {"component":"chart", "title": "Project Timeline", "type": "rangeBar", "time": true, "color": ["teal", "cyan"], "labels": true, "xmin": "2021-12-28", "xmax": "2022-01-04" }, | ||
| {"series": "Phase 1", "label": "Operations", "value": ["2021-12-29", "2022-01-02"]}, | ||
| {"series": "Phase 1", "label": "Operations", "value": ["2021-12-29", "2022-01-02"], "link": "/examples/chart.sql?phase=1"}, |
There was a problem hiding this comment.
Is the intention for the tooltip to change like this when a link has been added? IMO it makes more sense not to do this and just hyperlink the title (ie :: Tom in this case)
There was a problem hiding this comment.
Agreed and addressed in e71a8a4: the linked chart now keeps ApexCharts' native tooltip and hyperlinks only the text X title ("Tom" in your example). I explained the numeric/date and no-title tradeoff and attached before/after screenshots in this PR comment.
|
Following up on the tooltip review: agreed. Linked charts now let ApexCharts render its native tooltip. When a linked point has a text X value displayed as the tooltip title, The tradeoff is deliberate: an X formatter replaces ApexCharts' own numeric/date formatting, so we only enable it for text X values. Numeric and date titles remain unlinked; pie and scatter have no native X title to link. Point-click navigation remains in place. This avoids a duplicate tooltip renderer and any observer or DOM patching. Same chart without a link, then with a link:
|
2 participants
Summary
Chart rows can include a
link. Clicking a linked data point opens its URL. When ApexCharts displays a text X value as the tooltip title, that title is also a real link; ApexCharts renders the rest of the tooltip normally. Numeric and date titles keep their native formatting without a tooltip link, and charts without an X title retain point-click navigation.The tooltip remains open while the pointer moves onto a title link, using ApexCharts 7.6.0's
tooltip.interactiveoption.Validation
npm run formatnpm testnpm run buildCloses #945.