Polar Charts

[boygirl]

This PR is the beginning of a polar chart implementation. See supporting work in https://github.com/FormidableLabs/victory-core/pull/240/files

To run the demo:

1. clone this branch
2. npm install (this branch has a temporary git dependency on victory-core#experiment/polar
3. npm start
4. navigate to localhost:3000/#/polar

#Notes:

VictoryPolarAxis

VictoryPolarAxis differs pretty significantly from VictoryAxis. Here is a list of new props, and removed props. The internal calculations for laying out gridlines, ticks, and labels are also quite different from in VictoryAxis.

New Props

circularAxisComponent and circularGridComponent (component)

These props define the component that will be used for radial grid and axis components. This components default to the new primitive <Arc/> defined in victory-core which renders a path component that can render either an open or closed arc segment. I chose to render an arc path rather than a circle, so that partial polar charts could be rendered

startAngle and endAngle (number)

These props are analogous to the startAngle and endAngle props in VictoryPie. They may be used for creating partial polar charts (as seen above) or for rotating the angles of the polar chart. These props also control the angular range in the independent axis

labelPlacement ("parallel", "perpendicular" or "vertical")

This prop is a convenience prop for laying out axis labels. It controls the internal calculation of label angle, vertical anchor, and text anchor defaults based on the angle of the tick. As always, these props may be overridden via styles, or directly on the tickLabelComponent. This prop could probably use better naming (both the prop name and the options). I would be grateful for any suggestions

"perpendicular"

"parallel"

"vertical"

radius
This prop may be used to set the range in the dependent axis. When this prop is not set, it will be calculated based on width / height / padding as in other components. I am thinking of removing this prop, and just using the default calculated value for consistency.

Removed Props

label, offsetX, offsetY orientation

TODOS:

• Calculate label positioning etc. based on radians rather than degrees, or modulo the values so that things like -90 and 450 etc. still work.
• Calculate angular padding for labels

VictoryPolarChart

This component is probably temporary. I think I can get away with adding a few props to VictoryChart rather than authoring an entirely new component. I'm going to keep developing the separate component and see how much the two diverge, but my plan is to reconcile the changes if possible.

Differences from VictoryChart

• Sets polar: true on all of it's children
• Uses VictoryPolarAxis for default axes
• adds a transformation to the groupComponent of all children to shift the polar coordinates to a calculated origin
• Passes a range prop to all children rather than letting them calculate their own.

TODOS:

• fix domain reconciliation for children and axes
• reconcile changes with VictoryChart
• add startAngle and endAngle props

Components that already ~work with polar charts

• VictoryScatter
• VictoryLine
• VictoryArea

Gotchas

• VictoryClipContainer (used by VictoryArea, VictoryLine, and VictoryZoomContainer) does not work with polar charts. It will need a polar implementation.
• Labels need to be positioned

[boygirl]

Updates

VictoryBar

Angular bars are now supported for polar charts (radial bars are still in progress). Users can either specify bar widths (via styles, or on the data object, as usual). When the width is omitted, bars will meet at the average angle between adjacent bars:

TODO

• angular padding for groups of polar bars
• implement radial bars

VictoryStack

Working nicely :)

TODO

• May need a bit of work to correctly implement stacking for radial bars. tbd

General TODOS

containers

• radial clip-paths for animating VictoryLine and VictoryArea
• Helper for translating mouse-position to polar data position for containers like VictoryVoronoiContainer
• small tweaks for individual containers e.g. calculate a polar voronoi layout

labels

• generalize parallel, perpendicular, vertical label helpers so that they may be used for all polar labels (not just axis labels). This will probably be a change to VictoryLabel

miscellaneous

• clean up / reconcile VictoryChart and VictoryPolarChart
• Decide whether it makes sense to support the polar option for VictoryCandlestick (I'm guessing not)
• Decide how error bars should look for polar data.

[boygirl]

Updates

Animations:

Animations are supported for all chart types.

• Default transitions for VictoryScatter are the same as in cartesian charts (fade in).

• Default transitions for VictoryBar are the same as in cartesian charts (grow from zero). In polar charts this looks like radiating from the origin
  

• Default polar transitions for VictoryArea and VictoryLine are different from cartesian chart transitions. During onLoad, all points grow from zero. During onEnter and onExit new points are added / removed at the location of an adjacent point to keep path interpolation as smooth as possible. This implementation obviates the need for radial clip-path animations for these chart types.
  

VictoryChart

All changes required for polar charts have been added to VictoryChart. Temporary VictoryPolarChart has been removed.

TODOS: (to be released on Monday)

• Clean up labels
• Fix offset for grouped bars
• Support polar coordinates containers (voronoi, zoom, selection)

TODOS (next release)

I will try to get as many of these wrapped up over the weekend as I can, but some will be pushed to the next release (~ 2 week release cycle)

• Support for spiderweb charts (i.e. straight lines rather than arcs for axis gridlines)
• Radial Bars
• Support polar containers with special requirements (brush, cursor). These should both render arcs rather than lines and rectangular regions.
• polar VictoryErrorBar (positioning and rotation only, i.e. no arcs )
• polar VictoryCandleStick (positioning and rotation only, i.e. candles will still be rects not arc paths)