Merge pull request #1780 from FormidableLabs/bug/remove-unused-axis-line-type-prop

remove unused type prop from axis primitives

Author: boygirl

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

@@ -92,7 +92,6 @@ const getTickLabelProps = (layout, style, anchors, datum, text) => {
 const getGridProps = (layout, style, datum) => {
   const { edge, transform } = layout;
   return {
-    type: "grid",
     x1: transform.x,
     y1: transform.y,
     x2: edge.x + transform.x,
@@ -106,7 +105,6 @@ const getAxisProps = (modifiedProps, calculatedValues, globalTransform) => {
   const { style, padding, isVertical } = calculatedValues;
   const { width, height } = modifiedProps;
   return {
-    type: "axis",
     style: style.axis,
     x1: isVertical ? globalTransform.x : padding.left + globalTransform.x,
     x2: isVertical ? globalTransform.x : width - padding.right + globalTransform.x,

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

@@ -112,11 +112,11 @@ class VictoryAxis extends React.Component {
   };
 
   static defaultProps = {
-    axisComponent: <LineSegment type={"axis"} />,
+    axisComponent: <LineSegment />,
     axisLabelComponent: <VictoryLabel />,
     tickLabelComponent: <VictoryLabel />,
-    tickComponent: <LineSegment type={"tick"} />,
-    gridComponent: <LineSegment type={"grid"} />,
+    tickComponent: <LineSegment />,
+    gridComponent: <LineSegment />,
     standalone: true,
     theme: VictoryTheme.grayscale,
     containerComponent: <VictoryContainer />,

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

@@ -109,19 +109,19 @@ class VictoryPolarAxis extends React.Component {
   };
 
   static defaultProps = {
-    axisComponent: <LineSegment type={"axis"} />,
+    axisComponent: <LineSegment />,
     axisLabelComponent: <VictoryLabel />,
-    circularAxisComponent: <Arc type={"axis"} />,
-    circularGridComponent: <Arc type={"grid"} />,
+    circularAxisComponent: <Arc />,
+    circularGridComponent: <Arc />,
     containerComponent: <VictoryContainer />,
     endAngle: 360,
-    gridComponent: <LineSegment type={"grid"} />,
+    gridComponent: <LineSegment />,
     groupComponent: <g role="presentation" />,
     labelPlacement: "parallel",
     startAngle: 0,
     standalone: true,
     theme: VictoryTheme.grayscale,
-    tickComponent: <LineSegment type={"tick"} />,
+    tickComponent: <LineSegment />,
     tickLabelComponent: <VictoryLabel />
   };
 

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

@@ -10,7 +10,7 @@ import { omit } from "lodash";
 import { shallow, mount } from "enzyme";
 import SvgTestHelper from "../svg-test-helper";
 import { VictoryAxis } from "packages/victory-axis/src/index";
-import { VictoryLabel } from "packages/victory-core/src/index";
+import { VictoryLabel, LineSegment } from "packages/victory-core/src/index";
 import { TextSize } from "packages/victory-core";
 
 describe("components/victory-axis", () => {
@@ -32,15 +32,27 @@ describe("components/victory-axis", () => {
     it("renders the appropriate number of ticks", () => {
       const tickValues = [1, 2, 3];
       const style = { ticks: { stroke: "black" } };
-      const wrapper = shallow(<VictoryAxis tickValues={tickValues} style={style} />);
+      const wrapper = shallow(
+        <VictoryAxis
+          tickValues={tickValues}
+          style={style}
+          tickComponent={<LineSegment type="tick" />}
+        />
+      );
       const ticks = wrapper.find('[type="tick"]');
       expect(ticks.length).to.equal(tickValues.length);
     });
 
     it("does not render invisible ticks", () => {
       const tickValues = [1, 2, 3];
       const style = { ticks: { stroke: "none" } };
-      const wrapper = shallow(<VictoryAxis tickValues={tickValues} style={style} />);
+      const wrapper = shallow(
+        <VictoryAxis
+          tickValues={tickValues}
+          style={style}
+          tickComponent={<LineSegment type="tick" />}
+        />
+      );
       const ticks = wrapper.find('[type="tick"]');
       expect(ticks.length).to.equal(0);
     });
@@ -60,20 +72,21 @@ describe("components/victory-axis", () => {
           ]}
           tickValues={tickValues}
           style={style}
+          tickComponent={<LineSegment type="tick" />}
         />
       );
       const ticks = wrapper.find('[type="tick"]');
       expect(ticks.length).to.equal(tickValues.length);
     });
 
     it("renders ticks as lines", () => {
-      const wrapper = mount(<VictoryAxis />);
+      const wrapper = mount(<VictoryAxis axisComponent={<LineSegment type="axis" />} />);
       const ticks = wrapper.find('[type="axis"]');
       ticks.forEach(SvgTestHelper.expectIsALine);
     });
 
     it("renders a line", () => {
-      const wrapper = mount(<VictoryAxis />);
+      const wrapper = mount(<VictoryAxis axisComponent={<LineSegment type="axis" />} />);
       const line = wrapper.find('[type="axis"]');
       SvgTestHelper.expectIsALine(line);
     });
@@ -112,14 +125,16 @@ describe("components/victory-axis", () => {
   describe("dependentAxis prop", () => {
     it("renders a horizontal axis by default", () => {
       const props = { padding: 50, width: 300 };
-      const wrapper = mount(<VictoryAxis {...props} />);
+      const wrapper = mount(<VictoryAxis {...props} axisComponent={<LineSegment type="axis" />} />);
       const line = wrapper.find('[type="axis"]');
       expect(SvgTestHelper.isHorizontalAxis(line, props)).to.equal(true);
     });
 
     it("renders a vertical axis if specified", () => {
       const props = { padding: 50, height: 300 };
-      const wrapper = mount(<VictoryAxis dependentAxis {...props} />);
+      const wrapper = mount(
+        <VictoryAxis dependentAxis {...props} axisComponent={<LineSegment type="axis" />} />
+      );
       const line = wrapper.find('[type="axis"]');
       expect(SvgTestHelper.isVerticalAxis(line, props)).to.equal(true);
     });
@@ -155,6 +170,7 @@ describe("components/victory-axis", () => {
               eventHandlers: { onClick: clickHandler }
             }
           ]}
+          axisComponent={<LineSegment type="axis" />}
         />
       );
       const Data = wrapper.find('[type="axis"]');
@@ -189,6 +205,7 @@ describe("components/victory-axis", () => {
               ticks: { stroke: "black" },
               tickLabels: { padding: 0 }
             }}
+            tickComponent={<LineSegment type="tick" />}
           />
         );
         expect(wrapper.find('[type="tick"]').length).to.equal(3);
@@ -206,7 +223,12 @@ describe("components/victory-axis", () => {
       it("renders the appropriate number of ticks with default options", () => {
         const style = { ticks: { stroke: "black" } };
         const wrapper = shallow(
-          <VictoryAxis tickValues={["1", "2", "3"]} style={style} width={10} />
+          <VictoryAxis
+            tickValues={["1", "2", "3"]}
+            style={style}
+            width={10}
+            tickComponent={<LineSegment type="tick" />}
+          />
         );
         expect(wrapper.find('[type="tick"]').length).to.equal(3);
       });
@@ -220,6 +242,7 @@ describe("components/victory-axis", () => {
               ticks: { stroke: "black" },
               tickLabels: { padding: 0 }
             }}
+            tickComponent={<LineSegment type="tick" />}
           />
         );
         expect(wrapper.find('[type="tick"]').length).to.equal(2);
@@ -272,6 +295,7 @@ describe("components/victory-axis", () => {
               ticks: { stroke: "black" },
               tickLabels: { padding: 10 }
             }}
+            tickComponent={<LineSegment type="tick" />}
           />
         );
         expect(wrapper.find('[type="tick"]').length).to.equal(2);
@@ -287,6 +311,7 @@ describe("components/victory-axis", () => {
               ticks: { stroke: "black" },
               tickLabels: { padding: { top: 10 } }
             }}
+            tickComponent={<LineSegment type="tick" />}
           />
         );
         expect(wrapper.find('[type="tick"]').length).to.equal(2);