[charts-premium] Add highlight to the RadialLineChart#22156
Open
alexfauquette wants to merge 90 commits intomui:masterfrom
Open
[charts-premium] Add highlight to the RadialLineChart#22156alexfauquette wants to merge 90 commits intomui:masterfrom
alexfauquette wants to merge 90 commits intomui:masterfrom
Conversation
Contributor
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds highlight/interaction support to the Premium RadialLineChart by introducing a dedicated highlight plot/element and enabling position-based item picking for radial line/area series. The PR also extends internal utilities to support angle-based curve evaluation and improves polar axis index handling.
Changes:
- Add
RadialLineHighlightPlot/RadialLineHighlightElementand wire them intoRadialLineChartrendering and slots. - Implement
radialLinegetItemAtPosition(curve-aware, including area picking) and expose related internals/utilities (evaluateCurveAtAngle,getPolarAxisIndex,clampAngleRad, etc.). - Update docs/API pages/demos to document and showcase highlight support.
Reviewed changes
Copilot reviewed 31 out of 31 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| scripts/x-charts-premium.exports.json | Exposes new RadialLine highlight components in the premium export surface. |
| scripts/buildApiDocs/chartsSettings/index.ts | Skips API doc annotation for the new highlight element source file. |
| packages/x-charts/src/models/seriesType/line.ts | Moves curve prop to LineSeriesType (and documents it there). |
| packages/x-charts/src/internals/plugins/featurePlugins/useChartPolarAxis/index.ts | Re-exports polar interaction selectors for consumption via the plugin index. |
| packages/x-charts/src/internals/plugins/featurePlugins/useChartPolarAxis/getAxisIndex.ts | Refactors ordinal polar axis index computation and adds full-circle handling. |
| packages/x-charts/src/internals/index.ts | Exports additional internals (getPolarAxisIndex, clampAngle, getSymbol, EPSILON, evaluateCurveAtAngle). |
| packages/x-charts/src/LineChart/seriesConfig/getSeriesWithDefaultValues.ts | Defaultizes curve for line series (monotoneX). |
| packages/x-charts/src/LineChart/seriesConfig/curveEvaluation.ts | Adds evaluateCurveAtAngle and supporting math helpers for angle-based evaluation. |
| packages/x-charts-premium/src/models/seriesType/radialLine.ts | Adds curve to radial line series type (docs say default is linear). |
| packages/x-charts-premium/src/internals/index.ts | Exposes premium internal getRadialLineItemAtPosition. |
| packages/x-charts-premium/src/RadialLineChart/seriesConfig/index.ts | Registers getItemAtPosition for radialLine series config. |
| packages/x-charts-premium/src/RadialLineChart/seriesConfig/getSeriesWithDefaultValues.ts | Defaultizes radial line curve (currently to natural). |
| packages/x-charts-premium/src/RadialLineChart/seriesConfig/getItemAtPosition.ts | Implements radial line/area hit-testing using angle-based curve evaluation. |
| packages/x-charts-premium/src/RadialLineChart/radialLineClasses.ts | Adds highlight utility class key. |
| packages/x-charts-premium/src/RadialLineChart/index.ts | Exports the new highlight plot/element from the RadialLineChart entrypoint. |
| packages/x-charts-premium/src/RadialLineChart/RadialMarkPlot.tsx | Applies highlight/fade state to marks. |
| packages/x-charts-premium/src/RadialLineChart/RadialLineHighlightPlot.tsx | New plot rendering highlighted item markers based on interaction state. |
| packages/x-charts-premium/src/RadialLineChart/RadialLineHighlightElement.tsx | New element component for rendering the highlighted mark shape. |
| packages/x-charts-premium/src/RadialLineChart/RadialLineChart.tsx | Wires RadialLineHighlightPlot into the chart and extends slots/slotProps. |
| packages/x-charts-premium/src/RadialLineChart/RadialLine.tsx | Applies highlight/fade state to line paths. |
| packages/x-charts-premium/src/RadialLineChart/RadialArea.tsx | Applies highlight/fade state to area paths. |
| docs/translations/api-docs/charts/radial-line-highlight-plot/radial-line-highlight-plot.json | Adds translation scaffold for the new API page. |
| docs/translations/api-docs/charts/radial-line-chart/radial-line-chart.json | Adds slot translation entry for radialLineHighlight. |
| docs/public/static/error-codes.json | Adds a new error code message for unsupported polar continuous axis indexing. |
| docs/pages/x/api/charts/radial-line-highlight-plot.json | Adds generated API page metadata for RadialLineHighlightPlot. |
| docs/pages/x/api/charts/radial-line-highlight-plot.js | Adds the docs page route for the new API page. |
| docs/pages/x/api/charts/radial-line-chart.json | Adds the radialLineHighlight slot in the chart API JSON. |
| docs/data/chartsApiPages.ts | Registers the new API page in the charts API pages list. |
| docs/data/charts/radial-lines/radial-lines.md | Documents highlight support and adds the new demo. |
| docs/data/charts/radial-lines/ElementHighlights.tsx | Adds a TS demo showcasing highlightScope and area toggle. |
| docs/data/charts/radial-lines/ElementHighlights.js | Adds a JS demo showcasing highlightScope and area toggle. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
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
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.
This PR is already large enough. I will add the support for continuous scales in a follow up.
Here is the result of the closest points for a rotation scale with point type with/without area
Stuff learned
D3 radial line
I thought the D3 radial lines was a smart semantic adaptation. But it's not the case. It just takes as an input (angle, radius) and transform them into x,y.
I'm hesitant to restrain the
curveoptions for the radial line to the few that make sens'lines' | 'natural' | 'catmul'Is an angle between 2 angles
A way to know if an angle$\alpha$ is between two angles $\theta_1$ , $\theta_2$ is to do
clamp($\alpha - \theta_1$ ) < clamp($\theta_2 - \theta_1$ ) with clamp a function that returns a normalized angle in $[0; 2\pi )$
Another method if you have points and not directly angles is to use vector products.
Is an angle between 2 points
For 2 vectors in 2D$u$ and $v$ the vector product $u \wedge v$ is $u_x v_y-u_y v_x$ and its sign indicates if the smallest angle going from $u$ to $v$ goes in the direct or reverse rotation.
So to know if the angle of a point$x$ is between $u$ and $v$ you can test $u \wedge x \ge 0$ and $x \wedge v \ge 0$