Merge pull request #392 from FormidableLabs/bug/transforms

make sure transform is passed through to primitives

src/victory-primitives/arc.js

@@ -48,11 +48,11 @@ export default class Arc extends React.Component {
   }
 
   render() {
-    const { role, shapeRendering, className, events, pathComponent } = this.props;
+    const { role, shapeRendering, className, events, pathComponent, transform } = this.props;
     return React.cloneElement(pathComponent, {
       d: this.getArcPath(this.props),
       style: this.getStyle(this.props),
-      className, role, shapeRendering, events
+      className, role, shapeRendering, events, transform
     });
   }
 }

src/victory-primitives/area.js

@@ -67,8 +67,8 @@ export default class Area extends React.Component {
       groupComponent
     } = this.props;
     const style = Helpers.evaluateStyle(assign({ fill: "black" }, this.props.style), data, active);
-    const transform = polar && origin ? `translate(${origin.x}, ${origin.y})` : undefined;
-
+    const defaultTransform = polar && origin ? `translate(${origin.x}, ${origin.y})` : undefined;
+    const transform = this.props.transform || defaultTransform;
     const renderLine = style.stroke && style.stroke !== "none" && style.stroke !== "transparent";
     const areaFunction = this.getAreaFunction(this.props);
     const lineFunction = renderLine && this.getLineFunction(this.props);

src/victory-primitives/axis.js

@@ -22,13 +22,14 @@ export default class Axis extends React.Component {
 
   render() {
     const {
-      x1, x2, y1, y2, events, datum, active, lineComponent, className, role, shapeRendering
+      x1, x2, y1, y2, events, datum, active, lineComponent, className, role, shapeRendering,
+      transform
     } = this.props;
     const style = Helpers.evaluateStyle(
       assign({ stroke: "black" }, this.props.style), datum, active
     );
     return React.cloneElement(lineComponent, {
-      style, className, role, shapeRendering, events, x1, x2, y1, y2
+      style, className, role, shapeRendering, events, x1, x2, y1, y2, transform
     });
   }
 }

src/victory-primitives/bar.js

@@ -230,7 +230,8 @@ export default class Bar extends React.Component {
     const path = polar ?
       this.getPolarBarPath(this.props, cornerRadius) :
       this.getBarPath(this.props, width, cornerRadius);
-    const transform = polar && origin ? `translate(${origin.x}, ${origin.y})` : undefined;
+    const defaultTransform = polar && origin ? `translate(${origin.x}, ${origin.y})` : undefined;
+    const transform = this.props.transform || defaultTransform;
     return React.cloneElement(pathComponent, {
       d: path, transform, className, style, role, shapeRendering, events
     });

src/victory-primitives/border.js

@@ -21,11 +21,12 @@ export default class Border extends React.Component {
 
   render() {
     const {
-       x, y, width, height, events, datum, active, role, className, shapeRendering, rectComponent
+       x, y, width, height, events, datum, active, role,
+       className, shapeRendering, rectComponent, transform
       } = this.props;
     const style = Helpers.evaluateStyle(assign({ fill: "none" }, this.props.style), datum, active);
     return React.cloneElement(rectComponent, {
-      style, className, x, y, width, height, events, role, shapeRendering
+      style, className, x, y, width, height, events, role, shapeRendering, transform
     });
   }
 }

src/victory-primitives/candle.js

@@ -38,7 +38,7 @@ export default class Candle extends React.Component {
   render() {
     const {
       x, high, low, open, close, data, datum, active, width, candleHeight, events, groupComponent,
-      rectComponent, lineComponent, role, shapeRendering, className, wickStrokeWidth
+      rectComponent, lineComponent, role, shapeRendering, className, wickStrokeWidth, transform
     } = this.props;
     const style = Helpers.evaluateStyle(
       assign({ stroke: "black" }, this.props.style), datum, active
@@ -47,7 +47,7 @@ export default class Candle extends React.Component {
     const padding = this.props.padding.left || this.props.padding;
     const candleWidth = style.width || 0.5 * (width - 2 * padding) / data.length;
     const candleX = x - candleWidth / 2;
-    const sharedProps = { role, shapeRendering, className, events };
+    const sharedProps = { role, shapeRendering, className, events, transform };
 
     const candleProps = assign({
       key: "candle",

src/victory-primitives/curve.js

@@ -56,7 +56,8 @@ export default class Curve extends React.Component {
     );
     const lineFunction = this.getLineFunction(this.props);
     const path = lineFunction(data);
-    const transform = polar && origin ? `translate(${origin.x}, ${origin.y})` : undefined;
+    const defaultTransform = polar && origin ? `translate(${origin.x}, ${origin.y})` : undefined;
+    const transform = this.props.transform || defaultTransform;
     return React.cloneElement(pathComponent, {
       className, style, role, shapeRendering, transform, events, d: path
     });

src/victory-primitives/error-bar.js

@@ -40,11 +40,11 @@ export default class ErrorBar extends React.Component {
 
   renderBorder(props, error, type) {
     const {
-      x, y, borderWidth, events, style, role, shapeRendering, className, lineComponent
+      x, y, borderWidth, events, style, role, shapeRendering, className, lineComponent, transform
     } = props;
     const vertical = type === "right" || type === "left";
     const borderProps = {
-      role, shapeRendering, className, events, style,
+      role, shapeRendering, className, events, style, transform,
       key: `border-${type}`,
       x1: vertical ? error[type] : x - borderWidth,
       x2: vertical ? error[type] : x + borderWidth,
@@ -55,10 +55,12 @@ export default class ErrorBar extends React.Component {
   }
 
   renderCross(props, error, type) {
-    const { x, y, events, style, role, shapeRendering, className, lineComponent } = props;
+    const {
+      x, y, events, style, role, shapeRendering, className, lineComponent, transform
+    } = props;
     const vertical = type === "top" || type === "bottom";
     const borderProps = {
-      role, shapeRendering, className, events, style,
+      role, shapeRendering, className, events, style, transform,
       key: `cross-${type}`,
       x1: x,
       x2: vertical ? x : error[type],

src/victory-primitives/flyout.js

@@ -84,11 +84,13 @@ export default class Flyout extends React.Component {
   }
 
   render() {
-    const { datum, active, role, shapeRendering, className, events, pathComponent } = this.props;
+    const {
+      datum, active, role, shapeRendering, className, events, pathComponent, transform
+    } = this.props;
     const style = Helpers.evaluateStyle(this.props.style, datum, active);
     const path = this.getFlyoutPath(this.props);
     return React.cloneElement(
-      pathComponent, { style, className, shapeRendering, role, events, d: path }
+      pathComponent, { style, className, shapeRendering, role, events, transform, d: path }
     );
   }
 }

src/victory-primitives/point.js

@@ -53,11 +53,13 @@ export default class Point extends React.Component {
   }
 
   render() {
-    const { active, datum, role, shapeRendering, className, events, pathComponent } = this.props;
+    const {
+      active, datum, role, shapeRendering, className, events, pathComponent, transform
+    } = this.props;
     const style = Helpers.evaluateStyle(this.props.style, datum, active);
     const d = this.getPath(this.props);
     return React.cloneElement(
-      pathComponent, { style, role, shapeRendering, className, events, d }
+      pathComponent, { style, role, shapeRendering, className, events, d, transform }
     );
   }
 }

src/victory-primitives/slice.js

@@ -23,9 +23,10 @@ export default class Slice extends React.Component {
       datum, slice, active, role, shapeRendering, className,
       origin, events, pathComponent, pathFunction, style
     } = this.props;
+    const defaultTransform = origin ? `translate(${origin.x}, ${origin.y})` : undefined;
+    const transform = this.props.transform || defaultTransform;
     return React.cloneElement(pathComponent, {
-      className, role, shapeRendering, events,
-      transform: origin ? `translate(${origin.x}, ${origin.y})` : undefined,
+      className, role, shapeRendering, events, transform,
       style: Helpers.evaluateStyle(style, datum, active),
       d: isFunction(pathFunction) ? pathFunction(slice) : undefined
     });

src/victory-primitives/voronoi.js

@@ -45,7 +45,7 @@ export default class Voronoi extends React.Component {
 
   render() {
     const {
-      datum, active, role, shapeRendering, className, events, x, y,
+      datum, active, role, shapeRendering, className, events, x, y, transform,
       pathComponent, clipPathComponent, groupComponent, circleComponent
     } = this.props;
     const voronoiPath = this.getVoronoiPath(this.props);
@@ -65,7 +65,7 @@ export default class Voronoi extends React.Component {
       return React.cloneElement(groupComponent, {}, [voronoiClipPath, circle]);
     }
     return React.cloneElement(pathComponent, {
-      style, className, d: voronoiPath, role, shapeRendering, events
+      style, className, d: voronoiPath, role, shapeRendering, events, transform
     });
   }
 }

src/victory-primitives/whisker.js

@@ -32,10 +32,11 @@ export default class Whisker extends React.Component {
 
   render() {
     const {
-      groupComponent, lineComponent, events, className, majorWhisker, minorWhisker, datum, active
+      groupComponent, lineComponent, events, className, majorWhisker, minorWhisker,
+      datum, active, transform
     } = this.props;
     const style = Helpers.evaluateStyle(this.props.style, datum, active);
-    const baseProps = { style, events, className };
+    const baseProps = { style, events, className, transform };
     return React.cloneElement(groupComponent, {}, [
       React.cloneElement(lineComponent, assign({ key: "major-whisker" }, baseProps, majorWhisker)),
       React.cloneElement(lineComponent, assign({ key: "minor-whisker" }, baseProps, minorWhisker))