Improvement/victory container

src/victory-container/victory-container.js

@@ -18,7 +18,6 @@ export default class VictoryContainer extends React.Component {
     height: PropTypes.number,
     portalComponent: PropTypes.element,
     responsive: PropTypes.bool,
-    standalone: PropTypes.bool,
     style: PropTypes.object,
     theme: PropTypes.object,
     title: PropTypes.string,
@@ -47,13 +46,12 @@ export default class VictoryContainer extends React.Component {
   }
 
   getChildContext() {
-    return this.props.standalone !== false ?
-      {
-        portalUpdate: this.portalUpdate,
-        portalRegister: this.portalRegister,
-        portalDeregister: this.portalDeregister,
-        getTimer: this.getTimer
-      } : {};
+    return {
+      portalUpdate: this.portalUpdate,
+      portalRegister: this.portalRegister,
+      portalDeregister: this.portalDeregister,
+      getTimer: this.getTimer
+    };
   }
 
   componentWillMount() {
@@ -89,31 +87,28 @@ export default class VictoryContainer extends React.Component {
 
   // Overridden in victory-core-native
   renderContainer(props, svgProps, style) {
-    const { title, desc, portalComponent, className, standalone } = props;
+    const { title, desc, portalComponent, className } = props;
     const children = this.getChildren(props);
     const parentProps = defaults({ style, className }, svgProps);
-    const groupComponent = props.groupComponent || <g/>;
-    return standalone !== false ?
-      (
+    return (
+      <svg {...parentProps} overflow="visible">
         <svg {...parentProps}>
-          {title ? <title id="title">{title}</title> : null}
-          {desc ? <desc id="desc">{desc}</desc> : null}
           {children}
-          {React.cloneElement(portalComponent, { ref: this.savePortalRef })}
         </svg>
-      ) :
-      React.cloneElement(groupComponent, parentProps, children);
+          {title ? <title id="title">{title}</title> : null}
+          {desc ? <desc id="desc">{desc}</desc> : null}
+        {React.cloneElement(portalComponent, { ref: this.savePortalRef })}
+      </svg>
+    );
   }
 
   render() {
-    const { width, height, responsive, events, standalone } = this.props;
+    const { width, height, responsive, events } = this.props;
     const style = responsive ? this.props.style : omit(this.props.style, ["height", "width"]);
     const svgProps = assign(
       {
-        width, height,
-        "aria-labelledby": standalone !== false ? "title desc" : undefined,
-        role: standalone !== false ? "img" : "presentation",
-        viewBox: responsive && standalone !== false ? `0 0 ${width} ${height}` : undefined
+        width, height, "aria-labelledby": "title desc", role: "img",
+        viewBox: responsive ? `0 0 ${width} ${height}` : undefined
       },
       events
     );

src/victory-label/victory-label.js

@@ -1,6 +1,7 @@
 /*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 Helpers from "../victory-util/helpers";
 import Style from "../victory-util/style";
@@ -49,6 +50,7 @@ export default class VictoryLabel extends React.Component {
       CustomPropTypes.nonNegative,
       PropTypes.func
     ]),
+    renderInPortal: PropTypes.bool,
     style: PropTypes.oneOfType([
       PropTypes.object,
       PropTypes.array
@@ -246,6 +248,7 @@ export default class VictoryLabel extends React.Component {
   }
 
   render() {
-    return this.renderElements(this.props);
+    const label = this.renderElements(this.props);
+    return this.props.renderInPortal ? <VictoryPortal>{label}</VictoryPortal> : label;
   }
 }

src/victory-util/helpers.js

@@ -14,7 +14,9 @@ export default {
     };
   },
 
-  getStyles(style, defaultStyles, height, width) {  // eslint-disable-line max-params
+  getStyles(style, defaultStyles) {
+    const width = "100%";
+    const height = "100%";
     if (!style) {
       return defaults({ parent: { height, width } }, defaultStyles);
     }
@@ -24,7 +26,7 @@ export default {
     const defaultLabels = defaultStyles && defaultStyles.labels || {};
     const defaultData = defaultStyles && defaultStyles.data || {};
     return {
-      parent: defaults({ height, width }, parent, defaultParent),
+      parent: defaults({}, parent, defaultParent, { width, height }),
       labels: defaults({}, labels, defaultLabels),
       data: defaults({}, data, defaultData)
     };

test/client/spec/victory-container/victory-container.spec.js

@@ -14,7 +14,7 @@ describe("components/victory-container", () => {
     const wrapper = shallow(
       <VictoryContainer />
     );
-    const output = wrapper.find("svg");
+    const output = wrapper.find("svg").at(0);
     expect(output.prop("role")).to.contain("img");
   });
 
@@ -40,7 +40,7 @@ describe("components/victory-container", () => {
     const wrapper = shallow(
       <VictoryContainer width={width} height={height}/>
     );
-    const svg = wrapper.find("svg");
+    const svg = wrapper.find("svg").at(0);
     const viewBoxValue =
       `0 0 ${width} ${height}`;
     expect(svg.prop("viewBox")).to.equal(viewBoxValue);
@@ -51,7 +51,7 @@ describe("components/victory-container", () => {
     const wrapper = mount(
       <VictoryContainer events={{ onClick: clickHandler }}/>
     );
-    const svg = wrapper.find("svg");
+    const svg = wrapper.find("svg").at(0);
     svg.simulate("click");
     expect(clickHandler).called;
   });

test/client/spec/victory-util/helpers.spec.js

@@ -49,10 +49,8 @@ describe("helpers", () => {
     };
     it("merges styles", () => {
       const style = { data: { fill: "red" }, labels: { fontSize: 12 } };
-      const width = 500;
-      const height = 500;
-      const styles = Helpers.getStyles(style, defaultStyles, height, width);
-      expect(styles.parent).to.deep.equal({ border: "black", width: 500, height: 500 });
+      const styles = Helpers.getStyles(style, defaultStyles);
+      expect(styles.parent).to.deep.equal({ border: "black", width: "100%", height: "100%" });
       expect(styles.data).to.deep.equal({ fill: "red", stroke: "black" });
       expect(styles.labels).to.deep.equal({ fontSize: 12, fontFamily: "Helvetica" });
     });