feat: Polar charts #218
feat: Polar charts #218
Conversation
🟡 Heimdall Review Status
🟡
|
| Code Owner | Status | Calculation | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ui-systems-eng-team |
🟡
0/1
|
Denominator calculation
|
| export type AngularAxisConfigProps = PolarAxisConfigProps & { | ||
| /** | ||
| * Padding angle between slices in degrees. | ||
| * @default 0 |
| ); | ||
| } | ||
|
|
||
| export default ExampleNavigator; |
There was a problem hiding this comment.
We will have better polar chart examples on docs and storybook by the end of all these PRs (since we will have all the features available)
|
|
||
| // Set default min domain to 0 for area chart, but only if there are no negative values | ||
| const yAxisConfig: Partial<AxisConfigProps> = { | ||
| const yAxisConfig: Partial<CartesianAxisConfigProps> = { |
There was a problem hiding this comment.
Our initial estimates had a few props we hoped would be shared but now need to be Cartesian specific
| animate?: boolean; | ||
| }; | ||
|
|
||
| export type ArcProps = ArcBaseProps; |
There was a problem hiding this comment.
This component is quite similar to Bar.tsx
| {content} | ||
| </Group> | ||
| ); | ||
| }, |
There was a problem hiding this comment.
Would be great if we can get this working with Path.tsx however this would require us supporting custom path interpreters.
Arc animates by animating both the start and end degrees from a baseline (usually 0 degrees) to their end degree values (lets say 25 and 30). In this time, they are rotating, not a direct linear shift. This is similar to Bar's animation where it keeps track of start and end from a baseline to their end values, however that is a linear shift where the values only move in one direction.
There was a problem hiding this comment.
I think this could be a follow up but before we exit beta.
| fontFamilies: contextFontFamilies, | ||
| fontProvider, | ||
| } = useCartesianChartContext(); | ||
| } = useChartContext(); |
There was a problem hiding this comment.
This allows us to use chart text with polar charts
| }, | ||
| { | ||
| key: 'AlphaTabbedChips', | ||
| key: "AlphaSelectChip", |
There was a problem hiding this comment.
I was getting errors about duplicate story names, so I renamed SelectChip for alpha stories to AlphaSelectChip
| { | ||
| series, | ||
| children, | ||
| innerRadiusRatio = 0.5, |
There was a problem hiding this comment.
DonutChart is a wrapper of pie with a simple innerRadiusRatio.
In case this is helpful, I am placing files at the root of chart when they are by themselves, and in a folder when there are multiple with the same root name.
An alternative way to do this would be to have a polar folder and have the files all in there. But then we'd likely want to move the cartesian components as well
| ); | ||
| }, | ||
| ), | ||
| ); |
There was a problem hiding this comment.
This is equivalent to CartesianChart.
2 participants
What changed? Why?
This PR implements polar charts on web and mobile - supporting a generic PolarChart (equivalent of CartesianChart) and PieChart/DonutChart (similar to AreaChart/LineChart).
Differences between polar and cartesian
Once this PR is ready, we will be reviewing chart tooltip and legend which is built on this work.
UI changes
Web
Mobile
Testing
How has it been tested?
Testing instructions
Illustrations/Icons Checklist
Required if this PR changes files under
packages/illustrations/**orpackages/icons/**Change management
type=routine
risk=low
impact=sev5
automerge=false