Polar Charts

CHANGELOG.md

@@ -1,5 +1,45 @@
 # VictoryChart Changelog
 
+## 21.0.0 (2017-06-06)
+
+[466](https://github.com/FormidableLabs/victory-chart/pull/466) Polar Charts
+[475](https://github.com/FormidableLabs/victory-chart/pull/475) Brush and Zoom fixes
+[476](https://github.com/FormidableLabs/victory-chart/pull/476) Zoom Improvements
+
+*Breaking Changes*
+- Changes how default widths are calculated for `VictoryBar` and groups of bars
+- Removes default bar widths from themes
+
+*Overview*
+ - Supports polar charts by adding the `polar` prop to charts.
+ - Polar charts are supported for `VictoryArea`, `VictoryChart`, `VictoryGroup`, `VictoryLine`, `VictoryScatter` `VictoryStack` and `VictoryVoronoi`
+ - Polar charts are supported for `VictoryBar`, but horizontal (radial) bars are not yet supported
+ - Polar charts work with `VictoryVoronoiContainer`
+ - Polar charts work with `VictorySelectionContainer`, but the dimension prop is not supported for polar selections
+ - Polar charts work with `VictoryZoomContainer`, but zooming is limited to centered radial zooming. Panning has no effect.
+ - Polar-specific default animations for `VictoryLine` and `VictoryArea`
+ - **horizontal polar charts are not yet supported**
+ - **`VictoryCandlestick` and `VictoryErrorBar` do not yet work with polar charts
+ - **`VictoryCursorContainer` does not yet work with polar charts
+ - **`VictoryBrushContainer` does not work with polar charts
+ - **`VictoryZoomContainer` has limitations for polar charts
+
+*Planned additional work*
+  - Support for radial bars
+  - Support for spider charts (i.e. linear grid lines rather than arcs on polar charts)
+  - Support separate theming for polar charts (at least axes)
+  - Support for a polar version of `VictoryCursorContainer`
+  - Minimal support for polar versions of `VictoryCandleStick` and `VictoryErrorBar` (Elements will be correctly positioned and angled, but path elements will not be altered to reflect curvature, _i.e._ candles will still be `rects` rather than arc paths)
+  - Investigate hollow polar charts
+
+*Details*
+- Adds `VictoryPolarAxis` with new props: `axisAngle` `startAngle`, `endAngle`, and `labelPlacement`
+- Adds `polar`, `startAngle`, `endAngle`, and `defaultPolarAxes` props for `VictoryChart`
+- Adds `polar`, `origin`, and `range` props to all chart types.
+- Adds `defaultPolarTransitions` static methods to `VictoryLine` and `VictoryArea`
+- Uses `LabelHelpers` to simplify all `helper-methods`
+
+
 ## 20.0.0 (2017-05-24)
 
 *Breaking Changes*

demo/app.js

@@ -22,6 +22,7 @@ import CreateContainerDemo from "./components/create-container-demo";
 import BrushContainerDemo from "./components/victory-brush-container-demo";
 import AnimationDemo from "./components/animation-demo";
 import SelectionDemo from "./components/selection-demo";
+import PolarDemo from "./components/victory-polar-chart-demo";
 import DebugDemo from "./components/debug-demo";
 
 class Home extends React.Component {
@@ -70,6 +71,7 @@ class App extends React.Component {
     case "/animation": Child = AnimationDemo; break;
     case "/selection-container": Child = SelectionDemo; break;
     case "/create-container": Child = CreateContainerDemo; break;
+    case "/polar": Child = PolarDemo; break;
     case "/debug": Child = DebugDemo; break;
     default: Child = Home;
     }
@@ -101,6 +103,7 @@ class App extends React.Component {
           <li><a href="#/animation">Animation Demo</a></li>
           <li><a href="#/selection-container">Victory Selection Container Demo</a></li>
           <li><a href="#/create-container">createContainer Demo</a></li>
+          <li><a href="#/polar">Polar Demo</a></li>
         </ul>
         <Child/>
       </div>
@@ -109,3 +112,5 @@ class App extends React.Component {
 }
 
 ReactDOM.render(<App/>, document.getElementById("content"));
+
+

demo/components/group-demo.js

@@ -160,7 +160,6 @@ class App extends React.Component {
               />
             </VictoryGroup>
           </VictoryChart>
-
         </div>
       </div>
     );

demo/components/victory-bar-demo.js

@@ -263,7 +263,7 @@ export default class App extends React.Component {
           theme={VictoryTheme.material}
         >
           <VictoryGroup
-            offset={15}
+            offset={12}
             animate={{ duration: 1000 }}
             colorScale={"warm"}
           >
@@ -283,15 +283,19 @@ export default class App extends React.Component {
           })}
         </VictoryGroup>
 
-        <VictoryGroup horizontal style={{ parent: parentStyle }} offset={10}
+        <VictoryGroup horizontal style={{ parent: parentStyle }} offset={15}
           colorScale={"cool"} animate={{ duration: 2000 }} labels={["a", "b", "c"]}
         >
           {this.getBarData().map((data, index) => {
             return <VictoryBar key={index} data={data}/>;
           })}
         </VictoryGroup>
 
-        <VictoryGroup style={{ parent: parentStyle }} offset={15} animate={{ duration: 2000 }}>
+        <VictoryGroup
+          style={{ parent: parentStyle, data: { width: 20 } }}
+          offset={25}
+          animate={{ duration: 2000 }}
+        >
           <VictoryStack colorScale={"red"}>
             {this.getBarData().map((data, index) => {
               return <VictoryBar key={index} data={data}/>;

demo/components/victory-chart-demo.js

@@ -208,7 +208,7 @@ class App extends React.Component {
           <VictoryChart style={chartStyle}>
             <VictoryBar
               groupComponent={<VictoryClipContainer/>}
-              style={{ data: { fill: "tomato", width: 20 } }}
+              style={{ data: { fill: "tomato" } }}
               data={[
                 { x: 1, y: 1 },
                 { x: 2, y: 2 },
@@ -544,7 +544,7 @@ class App extends React.Component {
             }]}
           >
             <VictoryBar name="bar"
-              style={{ data: { width: 15, fill: "green" } }}
+              style={{ data: { fill: "green" } }}
               data={[
                 { x: 1, y: 1 },
                 { x: 2, y: 2 },
@@ -567,7 +567,7 @@ class App extends React.Component {
             />
           </VictoryChart>
           <VictoryChart style={chartStyle} domainPadding={{ x: 50 }} animate={{ duration: 2000 }}>
-            <VictoryGroup offset={15}>
+            <VictoryGroup offset={20} style={{ data: { width: 15 } }}>
               <VictoryStack colorScale={"red"}>
                 {this.getBarData().map((data, index) => {
                   return <VictoryBar key={index} data={data}/>;