[charts] Explore polar charts

[alexfauquette]

An attempt to build a polar line chart. For now it renders basic grid and lines

Point to discuss

• Should we have a single line series types that can be used for polar and cartesian. Seems to work for the axes ids, because [x|y|radius|rotation]AxisId are all optional. It's just that the autocomplet will propose some proerty that make no sense. Technically in the LineChart/RadialLineChart compoennt we can remove the useless one. In the composition settings, it might be a bit harder,

• The naming

  • I went with RadialLineChart, because it's the one I've see the most, and Polar chart seems
  • Probably need to rename PolarGrid by RadialGrid and PolarDataProvider y RadialDataProvider. The Radar has it's own RadarDataProvide so the name of Polar is not yet exposed to the devs

Follow up

Components

• plot line marks
• plot areas
• rotation axis ticks labels
• radius axis ticks labels
• axis highlight
• focus highlight

Features

• detect item interaction based on the SVG event
  • implement highlight
  • implement click handler
  • implement tooltip item
• series hidden
• animate series in/oout
• adapt series curves (best example is is the step curve that make no sens with radial coordinate. Lines should be replaced by circle arcs)
• options to close of keep open the line between first and last data point

[mui-bot]

Deploy preview: https://deploy-preview-21968--material-ui-x.netlify.app/

Updated pages:

• docs/data/charts/radial-lines/radial-lines.md

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B(0.00%)	0B(0.00%)
@mui/x-data-grid-pro	0B(0.00%)	0B(0.00%)
@mui/x-data-grid-premium	0B(0.00%)	0B(0.00%)
@mui/x-charts	🔺+6.64KB(+1.77%)	🔺+1.91KB(+1.72%)
@mui/x-charts-pro	🔺+1.06KB(+0.22%)	🔺+423B(+0.29%)
@mui/x-charts-premium	🔺+1.06KB(+0.20%)	🔺+373B(+0.24%)
@mui/x-date-pickers	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers-pro	0B(0.00%)	0B(0.00%)
@mui/x-tree-view	0B(0.00%)	0B(0.00%)
@mui/x-tree-view-pro	0B(0.00%)	0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 00527fc

[codspeed-hq]

Merging this PR will degrade performance by 11.86%

❌ 2 regressed benchmarks
✅ 12 untouched benchmarks

⚠️ Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

	Mode	Benchmark	BASE	HEAD	Efficiency
❌	Simulation	SankeyChart with big data amount	128.4 ms	145.7 ms	-11.86%
❌	Simulation	ScatterChartPro with big data amount (single renderer)	434.2 ms	472.5 ms	-8.11%

---

_{Comparing alexfauquette:explore-polar-chart (00527fc) with master (9680edb)¹}

Footnotes

1. No successful run was found on master (b3b63eb) during the generation of this report, so 9680edb was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[JCQuintas]

Should we have a single line series types that can be used for polar and cartesian

Probably better to keep them separate now, we can merge later if it makes sense.

I went with RadialLineChart, because it's the one I've see the most, and Polar chart seems

The current implementation just looks like a slightly different radar chart. What would make it differentiate from a RadarChart? If we are to solve the first example here: #17305 then I believe the implementation should be different, and Polar would probably be a better name.

[alexfauquette]

The current implementation just looks like a slightly different radar chart.

To be precise, the radar is a subset of a radial line chart :)

• The rotation axis can only be band scale
• Each metric has it's own radial scale

This chart allow you to use any scale (like for the line charts). For example you could do the same charts with a data point per day, or with non evenly spaced data points

By the way I just realize D3 has a shape for it https://d3js.org/d3-shape/radial-line

If we are to solve the first example here: #17305

I think this implementation is more flexible than just the usecase

[JCQuintas]

If we are to solve the first example here: #17305

I think this implementation is more flexible than just the usecase

🤔 guess i had to replace the point scale by a linear one...

But still, values are mapped to the middle of the segments, which is weird. I think the API is not clear.

Shouldnt the rotation axis always be 0-360?
The series data should be {radius,angle}[] no?

[alexfauquette]

What confuse you is the lack of axis ticks. Here is a custom linear axis with hand made annotation.

Shouldnt the rotation axis always be 0-360?

I don't think so. It should be able to handle for example hours, week-days, months

The series data should be {radius,angle}[] no?

The current format has the advantage to let use reuse most of the codebase from the line chart

[JCQuintas]

Ok I'm thinking of polar charts differently. Rather than value > axis map.

My idea of polar is

"angle axis" 0-360

series=[{data: {radius,angle,(optional bezier anchors?)}[] }]

so we can plot something like the below, not necessarily exactly, but the "axis" is inexistent

While the implementation in the current PR is a flexibilization of the current radar chart 🤔

[alexfauquette]

the "axis" is inexistent

I don't get this part. If axis are inexistent how can you map data and position?

The idea of those charts is to build the same feature as the line chart but with x/y replaced by rotation/radius for specific type of dataset: https://observablehq.com/@observablehq/why-use-a-radial-data-visualization

Your drawing make me think about the scatter series with linked points in a polar coordinate system

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[JCQuintas]

I don't get this part. If axis are inexistent how can you map data and position?

My idea was that the "angle axis" would always be static (0-360)
Then angle+radius is both data and position.

Your drawing make me think about the scatter series with linked points in a polar coordinate system

yeah it is similar.

---

I think we can go with Radial for now and implement radial line and eventually radial bar charts, since the coordinates are not really polar.

[alexfauquette]

My idea was that the "angle axis" would always be static (0-360)

That would be an edge case. You can still do scaleType: 'linear', min: 0, max: 360 and you get the coordinate you're looking for