Improvement/victory native stability

packages/victory-area/src/area.js

@@ -85,7 +85,7 @@ export default class Area extends React.Component {
   render() {
     const {
       role, shapeRendering, className, polar, origin, data, active, pathComponent, events,
-      groupComponent
+      groupComponent, clipPath, id
     } = this.props;
     const style = Helpers.evaluateStyle(assign({ fill: "black" }, this.props.style), data, active);
     const defaultTransform = polar && origin ? `translate(${origin.x}, ${origin.y})` : undefined;
@@ -96,13 +96,13 @@ export default class Area extends React.Component {
 
     const areaStroke = style.stroke ? "none" : style.fill;
 
-    const sharedProps = { className, role, shapeRendering, transform, events };
+    const sharedProps = { className, role, shapeRendering, transform, events, clipPath };
     const area = React.cloneElement(pathComponent, assign({
-      key: "area", style: assign({}, style, { stroke: areaStroke }), d: areaFunction(data)
+      key: `${id}-area`, style: assign({}, style, { stroke: areaStroke }), d: areaFunction(data)
     }, sharedProps));
 
     const line = renderLine ? React.cloneElement(pathComponent, assign({
-      key: "area-stroke", style: assign({}, style, { fill: "none" }), d: lineFunction(data)
+      key: `${id}-area-stroke`, style: assign({}, style, { fill: "none" }), d: lineFunction(data)
     }, sharedProps)) : null;
 
     return renderLine ? React.cloneElement(groupComponent, {}, [area, line]) : area;

packages/victory-area/src/helper-methods.js

@@ -44,12 +44,12 @@ const getBaseProps = (props, fallbackProps) => {
   props = assign({}, modifiedProps, getCalculatedValues(modifiedProps));
   const {
     data, domain, events, groupComponent, height, interpolation, origin, padding, polar,
-    scale, sharedEvents, standalone, style, theme, width, labels
+    scale, sharedEvents, standalone, style, theme, width, labels, name
   } = props;
   const initialChildProps = {
     parent: {
       style: style.parent, width, height, scale, data, domain,
-      standalone, theme, polar, origin, padding
+      standalone, theme, polar, origin, padding, name
     },
     all: {
       data: { polar, origin, scale, data, interpolation, groupComponent, style: style.data }

packages/victory-axis/src/helper-methods.js

@@ -309,7 +309,8 @@ const getBaseProps = (props, fallbackProps) => {
   props = modifyProps(props, fallbackProps, role);
   const calculatedValues = getCalculatedValues(props);
   const {
-    axis, style, orientation, isVertical, scale, ticks, tickFormat, anchors, domain, stringTicks
+    axis, style, orientation, isVertical, scale, ticks,
+    tickFormat, anchors, domain, stringTicks, name
   } = calculatedValues;
   const otherAxis = axis === "x" ? "y" : "x";
   const { width, height, standalone, theme, polar, padding } = props;
@@ -319,7 +320,7 @@ const getBaseProps = (props, fallbackProps) => {
   const axisLabelProps = getAxisLabelProps(props, calculatedValues, globalTransform);
   const initialChildProps = {
     parent: assign(
-      { style: style.parent, ticks, standalone, theme, width, height, padding, domain },
+      { style: style.parent, ticks, standalone, theme, width, height, padding, domain, name },
       sharedProps
     )
   };

packages/victory-axis/src/victory-axis.js

@@ -128,18 +128,18 @@ class VictoryAxis extends React.Component {
   }
 
   renderGridAndTicks(props) {
-    const { tickComponent, tickLabelComponent, gridComponent } = props;
-
+    const { tickComponent, tickLabelComponent, gridComponent, name } = props;
     return this.dataKeys.map((key, index) => {
       const tickProps = this.getComponentProps(tickComponent, "ticks", index);
       const TickComponent = React.cloneElement(tickComponent, tickProps);
       const gridProps = this.getComponentProps(gridComponent, "grid", index);
       const GridComponent = React.cloneElement(gridComponent, gridProps);
       const tickLabelProps = this.getComponentProps(tickLabelComponent, "tickLabels", index);
       const TickLabel = React.cloneElement(tickLabelComponent, tickLabelProps);
-
       return React.cloneElement(
-        props.groupComponent, { key: `tick-group-${key}` }, GridComponent, TickComponent, TickLabel
+        props.groupComponent,
+        { key: `${name}-tick-group-${key}` },
+        GridComponent, TickComponent, TickLabel
       );
     });
   }

packages/victory-bar/src/bar.js

@@ -218,7 +218,7 @@ export default class Bar extends React.Component {
 
   render() {
     const {
-      role, datum, active, shapeRendering, className, origin, polar, pathComponent, events
+      role, datum, active, shapeRendering, className, origin, polar, pathComponent, events, clipPath
     } = this.props;
     const stroke = this.props.style && this.props.style.fill || "black";
     const baseStyle = { fill: "black", stroke };
@@ -231,7 +231,7 @@ export default class Bar extends React.Component {
     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
+      d: path, transform, className, style, role, shapeRendering, events, clipPath
     });
   }
 }

packages/victory-bar/src/helper-methods.js

@@ -40,10 +40,10 @@ const getBaseProps = (props, fallbackProps) => {
   props = assign({}, modifiedProps, getCalculatedValues(modifiedProps));
   const {
     alignment, barRatio, cornerRadius, data, domain, events, height, horizontal, origin, padding,
-    polar, scale, sharedEvents, standalone, style, theme, width, labels
+    polar, scale, sharedEvents, standalone, style, theme, width, labels, name
   } = props;
   const initialChildProps = { parent: {
-    domain, scale, width, height, data, standalone,
+    domain, scale, width, height, data, standalone, name,
     theme, polar, origin, padding, style: style.parent
   } };
 

packages/victory-box-plot/src/helper-methods.js

@@ -294,11 +294,11 @@ const getBaseProps = (props, fallbackProps) => {
   props = assign({}, modifiedProps, getCalculatedValues(modifiedProps));
   const {
     groupComponent, width, height, padding, standalone, theme, events, sharedEvents,
-    scale, horizontal, data, style, domain
+    scale, horizontal, data, style, domain, name
   } = props;
   const initialChildProps = {
     parent: {
-      domain, scale, width, height, data, standalone,
+      domain, scale, width, height, data, standalone, name,
       theme, style: style.parent || {}, padding, groupComponent
     }
   };

packages/victory-brush-container/src/victory-brush-container.js

@@ -79,10 +79,11 @@ export const brushContainerMixin = (base) => class VictoryBrushContainer extends
 
   getSelectBox(props, coordinates) {
     const { x, y } = coordinates;
-    const { brushStyle, brushComponent } = props;
+    const { brushStyle, brushComponent, name } = props;
     const brushComponentStyle = brushComponent.props && brushComponent.props.style;
     return x[0] !== x[1] && y[0] !== y[1] ?
       React.cloneElement(brushComponent, {
+        key: `${name}-brush`,
         width: Math.abs(x[1] - x[0]) || 1,
         height: Math.abs(y[1] - y[0]) || 1,
         x: Math.min(x[0], x[1]),
@@ -93,7 +94,7 @@ export const brushContainerMixin = (base) => class VictoryBrushContainer extends
   }
 
   getHandles(props, coordinates) {
-    const { brushDimension, handleWidth, handleStyle, handleComponent } = props;
+    const { brushDimension, handleWidth, handleStyle, handleComponent, name } = props;
     const { x, y } = coordinates;
     const width = Math.abs(x[1] - x[0]) || 1;
     const height = Math.abs(y[1] - y[0]) || 1;
@@ -111,7 +112,7 @@ export const brushContainerMixin = (base) => class VictoryBrushContainer extends
       memo = handleProps[curr] ?
         memo.concat(React.cloneElement(
           handleComponent,
-          assign({ key: `handle-${curr}` }, handleProps[curr]
+          assign({ key: `${name}-handle-${curr}` }, handleProps[curr]
         ))) : memo;
       return memo;
     }, []);
@@ -125,21 +126,12 @@ export const brushContainerMixin = (base) => class VictoryBrushContainer extends
       defaults({}, currentDomain, brushDomain) : brushDomain;
     const coordinates = Selection.getDomainCoordinates(props, domain);
     const selectBox = this.getSelectBox(props, coordinates);
-    return selectBox ?
-      (
-        <g>
-          {selectBox}
-          {this.getHandles(props, coordinates)}
-        </g>
-      ) : null;
+    return selectBox ? [ selectBox, this.getHandles(props, coordinates)] : [];
   }
 
   // Overrides method in VictoryContainer
   getChildren(props) {
-    const children = React.Children.toArray(props.children);
-    return [...children, this.getRect(props)].map((component, i) => {
-      return component ? React.cloneElement(component, { key: i }) : null;
-    });
+    return [...React.Children.toArray(props.children), ...this.getRect(props)];
   }
 };
 

packages/victory-brush-line/src/victory-brush-line.js

@@ -115,6 +115,7 @@ export default class VictoryBrushLine extends React.Component {
     handleComponent: PropTypes.element,
     handleStyle: PropTypes.object,
     handleWidth: PropTypes.number,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     lineComponent: PropTypes.element,
     name: PropTypes.string,
     onBrushDomainChange: PropTypes.func,
@@ -372,7 +373,7 @@ export default class VictoryBrushLine extends React.Component {
 
   renderHandles(props) {
     const {
-      handleComponent, handleStyle, datum = {}, activeBrushes = {}, brushDomain
+      handleComponent, handleStyle, id, brushDomain, datum = {}, activeBrushes = {}
     } = props;
     if (!brushDomain) {
       return null;
@@ -382,12 +383,12 @@ export default class VictoryBrushLine extends React.Component {
     const minDatum = assign({ handleValue: Collection.getMinValue(brushDomain) }, datum);
     const maxDatum = assign({ handleValue: Collection.getMaxValue(brushDomain) }, datum);
     const minHandleProps = assign({
-      key: "min",
+      key: `${id}-min`,
       style: Helpers.evaluateStyle(style, minDatum, activeBrushes.minHandle)
     }, handleDimensions.min);
     const maxHandleProps = assign(
       {
-        key: "max",
+        key: `${id}-max`,
         style: Helpers.evaluateStyle(style, maxDatum, activeBrushes.maxHandle)
       }, handleDimensions.max);
     return [

packages/victory-candlestick/src/candle.js

@@ -34,7 +34,8 @@ 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, transform
+      rectComponent, lineComponent, role, shapeRendering, className, wickStrokeWidth, transform,
+      clipPath, id
     } = this.props;
     const style = Helpers.evaluateStyle(
       assign({ stroke: "black" }, this.props.style), datum, active
@@ -43,10 +44,10 @@ 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, transform };
+    const sharedProps = { role, shapeRendering, className, events, transform, clipPath };
 
     const candleProps = assign({
-      key: "candle",
+      key: `${id}-candle`,
       style,
       x: candleX,
       y: Math.min(open, close),
@@ -55,7 +56,7 @@ export default class Candle extends React.Component {
     }, sharedProps);
 
     const highWickProps = assign({
-      key: "highWick",
+      key: `${id}-highWick`,
       style: wickStyle,
       x1: x,
       x2: x,
@@ -64,7 +65,7 @@ export default class Candle extends React.Component {
     }, sharedProps);
 
     const lowWickProps = assign({
-      key: "lowWick",
+      key: `${id}-lowWick`,
       style: wickStyle,
       x1: x,
       x2: x,

packages/victory-candlestick/src/helper-methods.js

@@ -96,11 +96,11 @@ const getBaseProps = (props, fallbackProps) => { // eslint-disable-line max-stat
   const calculatedValues = getCalculatedValues(props);
   const { data, style, scale, domain, origin } = calculatedValues;
   const {
-    groupComponent, width, height, padding, standalone,
+    groupComponent, width, height, padding, standalone, name,
     theme, polar, wickStrokeWidth, labels, events, sharedEvents
   } = props;
   const initialChildProps = { parent: {
-    domain, scale, width, height, data, standalone, theme, polar, origin,
+    domain, scale, width, height, data, standalone, theme, polar, origin, name,
     style: style.parent, padding
   } };
 

packages/victory-chart/src/helper-methods.js

@@ -116,16 +116,19 @@ function getChildren(props, childComponents, calculatedProps) {
   const baseStyle = calculatedProps.style.parent;
   const { height, polar, theme, width } = props;
   const { origin } = calculatedProps;
+  const parentName = props.name || "chart";
   return childComponents.map((child, index) => {
+    const role = child.type && child.type.role;
     const style = Array.isArray(child.props.style) ?
       child.props.style :
       defaults({}, child.props.style, { parent: baseStyle });
     const childProps = getChildProps(child, props, calculatedProps);
+    const name = child.props.name || `${parentName}-${role}-${index}`;
     const newProps = defaults({
-      height, polar, theme, width, style,
+      height, polar, theme, width, style, name,
       origin: polar ? origin : undefined,
       padding: calculatedProps.padding,
-      key: index,
+      key: `${name}-key-${index}`,
       standalone: false
     }, childProps);
 

packages/victory-chart/src/victory-chart.js

@@ -97,11 +97,11 @@ export default class VictoryChart extends React.Component {
   }
 
   getContainerProps(props, calculatedProps) {
-    const { width, height, standalone, theme, polar } = props;
+    const { width, height, standalone, theme, polar, name } = props;
     const { domain, scale, style, origin, radius, horizontal } = calculatedProps;
     return {
       domain, scale, width, height, standalone, theme, style: style.parent, horizontal,
-      polar, radius, origin: polar ? origin : undefined
+      name, polar, radius, origin: polar ? origin : undefined
     };
   }
 

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

@@ -66,13 +66,13 @@ export default class VictoryClipContainer extends React.Component {
   renderClippedGroup(props, clipId) {
     const { style, events, transform, children, className, groupComponent } = props;
     const clipComponent = this.renderClipComponent(props, clipId);
-    const clippedGroup = React.cloneElement(
-      groupComponent, { key: "clipped-group", clipPath: `url(#${clipId})` }, children
-    );
+    const groupProps = assign({
+      className, style, transform, key: `clipped-group-${clipId}`, clipPath: `url(#${clipId})`
+    }, events);
     return React.cloneElement(
       groupComponent,
-      assign({ className, style, transform }, events),
-      [clipComponent, clippedGroup]
+      groupProps,
+      [clipComponent, ...React.Children.toArray(children)]
     );
   }
 
@@ -109,7 +109,7 @@ export default class VictoryClipContainer extends React.Component {
 
     return React.cloneElement(
       clipPathComponent,
-      assign({ key: "clip-path" }, props, { clipId }),
+      assign({ key: `clip-path-${clipId}` }, props, { clipId }),
       child
     );
   }

packages/victory-core/src/victory-container/victory-container.js

@@ -20,6 +20,7 @@ export default class VictoryContainer extends React.Component {
     desc: PropTypes.string,
     events: PropTypes.object,
     height: CustomPropTypes.nonNegative,
+    name: PropTypes.string,
     origin: PropTypes.shape({ x: CustomPropTypes.nonNegative, y: CustomPropTypes.nonNegative }),
     polar: PropTypes.bool,
     portalComponent: PropTypes.element,

packages/victory-core/src/victory-label/victory-label.js

@@ -8,7 +8,7 @@ import Style from "../victory-util/style";
 import Log from "../victory-util/log";
 import TSpan from "../victory-primitives/tspan";
 import Text from "../victory-primitives/text";
-import { assign, defaults, isEmpty } from "lodash";
+import { assign, defaults, isEmpty, uniqueId } from "lodash";
 
 const defaultStyles = {
   fill: "#252525",
@@ -46,6 +46,7 @@ export default class VictoryLabel extends React.Component {
       PropTypes.func
     ]),
     events: PropTypes.object,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     index: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     inline: PropTypes.bool,
     labelPlacement: PropTypes.oneOf(["parallel", "perpendicular", "vertical"]),
@@ -111,6 +112,12 @@ export default class VictoryLabel extends React.Component {
     lineHeight: 1
   };
 
+  constructor(props) {
+    super(props);
+    this.id = props.id === undefined ?
+      uniqueId("label-") : props.id;
+  }
+
   getPosition(props, dimension) {
     if (!props.datum) {
       return 0;
@@ -227,9 +234,8 @@ export default class VictoryLabel extends React.Component {
       const currentLineHeight = this.checkLineHeight(
         lineHeight, ((lineHeight[i] + (lineHeight[i - 1] || lineHeight[0])) / 2), 1
       );
-
       const tspanProps = {
-        key: i,
+        key: `${this.id}-key-${i}`,
         x: !inline ? props.x : undefined,
         dx,
         dy: i && !inline ? (currentLineHeight * fontSize) : undefined,
@@ -241,7 +247,7 @@ export default class VictoryLabel extends React.Component {
     });
     return React.cloneElement(
       props.textComponent,
-      { dx, dy, x, y, events, transform, className, title, desc },
+      { dx, dy, x, y, events, transform, className, title, desc, id: this.id },
       textChildren
     );
   }