Polar Charts

CHANGELOG.md

@@ -1,6 +1,29 @@
 VictoryCore Changelog
 =====================
 
+## 16.0.0 (2017-06-06)
+
+-[240](https://github.com/FormidableLabs/victory-core/pull/240) Polar Charts
+
+*Breaking Changes*
+  - Removes default bar width from themes
+  - Changes how default bar widths are calculated
+  - Changes render methods for `Area`, `Bar` and `Curve` primitives (Breaking change for `victory-native` and others extending primitives)
+  - Changes function sigintures for `Selection.getDomainCoordinates` and `Selection.getDataCoordinates` (Breaking change for `victory-native`)
+
+*Features*
+  - Adds a new `Arc` primitive which is used for polar axes and grid lines
+  - Adds `polar` and `origin` props to rendered components (primitives, `VictoryLabel`, `VictoryClipContainer` `VictoryContainer`)
+  - Supports radial areas for `Area` and `Curve`. These props have no effect for cartesian charts
+  - Adds an `openPath` prop for `Curve`. This prop is used to determine whether radial curves should be closed. Curves are closed by default, but when this prop is set to true they will not be. This prop has no effect for cartesian charts
+  - Supports polar bars in the `Bar` primitive. (Angular bars only, radial bars are not yet supported)
+  - Adds a `labelPlacement` prop to `VictoryLabel` and `VictoryTooltip`. Values are "parallel", "perpendicular", and "vertical". These flags help to appropriately position labels in polar charts. Polar charts will use "parallel" label placement by default. Cartesian charts will only use "'vertical" placement.
+  - Adds support for circular clipPath
+  - Adds support for polar animation transitions for continuous chart types. 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.
+  - `before` and `after` callbacks for `onLoad`, `onEnter` and `onExit` are now called with `datum`, `index`, and `data` instead of only `datum`.
+  - Adds `LabelHelpers`
+  - Adds helper methods for polar charts
+
 ## 15.2.0 (2017-05-22)
 
 -[244](https://github.com/FormidableLabs/victory-core/pull/244) Passes missing `datum` and `index` props to `Flyout`

package.json

@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "builder": "^3.2.1",
-    "builder-victory-component": "^4.0.2",
+    "builder-victory-component": "^4.0.4",
     "d3-ease": "^1.0.0",
     "d3-interpolate": "^1.1.1",
     "d3-scale": "^1.0.0",
@@ -36,7 +36,7 @@
     "lodash": "^4.17.4"
   },
   "devDependencies": {
-    "builder-victory-component-dev": "^4.0.2",
+    "builder-victory-component-dev": "^4.0.4",
     "chai": "^3.5.0",
     "enzyme": "^2.4.1",
     "mocha": "^3.0.2",

src/index.js

@@ -9,6 +9,7 @@ export { default as VictoryLegend } from "./victory-legend/victory-legend";
 export { default as VictoryTooltip } from "./victory-tooltip/victory-tooltip";
 export { default as VictoryPortal } from "./victory-portal/victory-portal";
 export { default as Portal } from "./victory-portal/portal";
+export { default as Arc } from "./victory-primitives/arc";
 export { default as Area } from "./victory-primitives/area";
 export { default as Bar } from "./victory-primitives/bar";
 export { default as Candle } from "./victory-primitives/candle";
@@ -27,6 +28,7 @@ export { default as DefaultTransitions } from "./victory-util/default-transition
 export { default as Domain } from "./victory-util/domain";
 export { default as Events } from "./victory-util/events";
 export { default as Helpers } from "./victory-util/helpers";
+export { default as LabelHelpers } from "./victory-util/label-helpers";
 export { default as Log } from "./victory-util/log";
 export { default as PropTypes } from "./victory-util/prop-types";
 export { default as Scale } from "./victory-util/scale";

src/victory-clip-container/victory-clip-container.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { defaults, isFunction } from "lodash";
+import { assign, defaults, isFunction } from "lodash";
 import ClipPath from "../victory-primitives/clip-path";
 
 export default class VictoryClipContainer extends React.Component {
@@ -20,6 +20,9 @@ export default class VictoryClipContainer extends React.Component {
     clipPathComponent: PropTypes.element,
     clipWidth: PropTypes.number,
     events: PropTypes.object,
+    origin: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }),
+    polar: PropTypes.bool,
+    radius: PropTypes.bool,
     style: PropTypes.object,
     transform: PropTypes.string,
     translateX: PropTypes.number,
@@ -71,12 +74,9 @@ export default class VictoryClipContainer extends React.Component {
 
   // Overridden in victory-core-native
   renderClipComponent(props, clipId) {
-    const {
-      clipPadding, translateX, translateY, clipHeight, clipWidth, clipPathComponent
-    } = props;
     return React.cloneElement(
-      clipPathComponent,
-      { clipPadding, clipId, translateX, translateY, clipWidth, clipHeight }
+      props.clipPathComponent,
+      assign({}, props, { clipId })
     );
   }
 

src/victory-container/victory-container.js

@@ -16,6 +16,8 @@ export default class VictoryContainer extends React.Component {
     desc: PropTypes.string,
     events: PropTypes.object,
     height: PropTypes.number,
+    origin: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }),
+    polar: PropTypes.bool,
     portalComponent: PropTypes.element,
     responsive: PropTypes.bool,
     style: PropTypes.object,

src/victory-label/victory-label.js

@@ -1,10 +1,10 @@
-/*eslint no-magic-numbers: ["error", { "ignore": [0, 0.5, 1, 2] }]*/
 import React from "react";
 import PropTypes from "prop-types";
 import VictoryPortal from "../victory-portal/victory-portal";
 import CustomPropTypes from "../victory-util/prop-types";
 import Collection from "../victory-util/collection";
 import Helpers from "../victory-util/helpers";
+import LabelHelpers from "../victory-util/label-helpers";
 import Style from "../victory-util/style";
 import Log from "../victory-util/log";
 import { assign, merge } from "lodash";
@@ -46,11 +46,14 @@ export default class VictoryLabel extends React.Component {
     ]),
     events: PropTypes.object,
     index: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    labelPlacement: PropTypes.oneOf(["parallel", "perpendicular", "vertical"]),
     lineHeight: PropTypes.oneOfType([
       PropTypes.string,
       CustomPropTypes.nonNegative,
       PropTypes.func
     ]),
+    origin: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }),
+    polar: PropTypes.bool,
     renderInPortal: PropTypes.bool,
     style: PropTypes.oneOfType([
       PropTypes.object,
@@ -197,14 +200,33 @@ export default class VictoryLabel extends React.Component {
 
   getTransform(props, style) {
     const { datum, x, y } = props;
-    const angle = style.angle || props.angle;
+    const angle = style.angle || props.angle || this.getDefaultAngle(props);
     const transform = props.transform || style.transform;
     const transformPart = transform && Helpers.evaluateProp(transform, datum);
     const rotatePart = angle && { rotate: [angle, x, y] };
     return transformPart || angle ?
       Style.toTransformString(transformPart, rotatePart) : undefined;
   }
 
+  getDefaultAngle(props) {
+    const { polar, labelPlacement, datum } = props;
+    if (!polar || !labelPlacement || labelPlacement === "vertical") {
+      return 0;
+    }
+    const degrees = LabelHelpers.getDegrees(props, datum);
+    const sign = (degrees > 90 && degrees < 180 || degrees > 270) ? 1 : -1;
+    let angle;
+    if (degrees === 0 || degrees === 180) {
+      angle = 90;
+    } else if (degrees > 0 && degrees < 180) {
+      angle = 90 - degrees;
+    } else if (degrees > 180 && degrees < 360) {
+      angle = 270 - degrees;
+    }
+    const labelRotation = labelPlacement === "perpendicular" ? 0 : 90;
+    return angle + sign * labelRotation;
+  }
+
   getFontSize(style) {
     const baseSize = style && style.fontSize;
     if (typeof baseSize === "number") {

src/victory-primitives/arc.js

@@ -0,0 +1,80 @@
+/*eslint no-magic-numbers: ["error", { "ignore": [0, 1, 2, 180] }]*/
+import React from "react";
+import PropTypes from "prop-types";
+import Helpers from "../victory-util/helpers";
+import { assign, isEqual } from "lodash";
+import CommonProps from "./common-props";
+
+export default class Arc extends React.Component {
+  static propTypes = {
+    ...CommonProps,
+    closedPath: PropTypes.bool,
+    cx: PropTypes.number,
+    cy: PropTypes.number,
+    datum: PropTypes.any,
+    endAngle: PropTypes.number,
+    r: PropTypes.number,
+    startAngle: PropTypes.number
+  };
+
+  componentWillMount() {
+    this.style = this.getStyle(this.props);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    const { cx, cy, r } = this.props;
+    const style = this.getStyle(nextProps);
+    if (cx !== nextProps.cx || cy !== nextProps.cy || r !== nextProps.r) {
+      this.style = style;
+      return true;
+    }
+    if (!isEqual(style, this.style)) {
+      this.style = style;
+      return true;
+    }
+    return false;
+  }
+
+  getStyle(props) {
+    const { style, datum, active } = props;
+    return Helpers.evaluateStyle(assign({ stroke: "black", fill: "none" }, style), datum, active);
+  }
+
+  getArcPath(props) {
+    const { cx, cy, r, startAngle, endAngle, closedPath } = props;
+    // Always draw the path as two arcs so that complete circles may be rendered.
+    const halfAngle = (Math.abs(endAngle - startAngle) / 2) + startAngle;
+    const x1 = cx + r * Math.cos(Helpers.degreesToRadians(startAngle));
+    const y1 = cy - r * Math.sin(Helpers.degreesToRadians(startAngle));
+    const x2 = cx + r * Math.cos(Helpers.degreesToRadians(halfAngle));
+    const y2 = cy - r * Math.sin(Helpers.degreesToRadians(halfAngle));
+    const x3 = cx + r * Math.cos(Helpers.degreesToRadians(endAngle));
+    const y3 = cy - r * Math.sin(Helpers.degreesToRadians(endAngle));
+    const largerArcFlag1 = halfAngle - startAngle <= 180 ? 0 : 1;
+    const largerArcFlag2 = endAngle - halfAngle <= 180 ? 0 : 1;
+    const arcStart = closedPath ? ` M ${cx}, ${cy} L ${x1}, ${y1}` : `M ${x1}, ${y1}`;
+    const arc1 = `A ${r}, ${r}, 0, ${largerArcFlag1}, 0, ${x2}, ${y2}`;
+    const arc2 = `A ${r}, ${r}, 0, ${largerArcFlag2}, 0, ${x3}, ${y3}`;
+    const arcEnd = closedPath ? "Z" : "";
+    return `${arcStart} ${arc1} ${arc2} ${arcEnd}`;
+  }
+
+  // Overridden in victory-core-native
+  renderAxisLine(props, style, events) {
+    const { role, shapeRendering, className } = props;
+    const path = this.getArcPath(props);
+    return (
+      <path className={className}
+        d={path}
+        style={style}
+        role={role || "presentation"}
+        shapeRendering={shapeRendering || "auto"}
+        {...events}
+      />
+    );
+  }
+
+  render() {
+    return this.renderAxisLine(this.props, this.style, this.props.events);
+  }
+}