Merge pull request #339 from MayGo/add-minus-option-to-point

Add minus option to point
FormidableLabs · Feb 8, 2018 · abf3fe9 · abf3fe9
2 parents b99a03f + 2e85583
commit abf3fe9
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 6 deletions.
diff --git a/demo/victory-legend-demo.js b/demo/victory-legend-demo.js
@@ -44,6 +44,12 @@ const data = [{
     size: symbolSize,
     type: "plus"
   }
+}, {
+  name: "Series 4: minus",
+  symbol: {
+    size: symbolSize,
+    type: "minus"
+  }
 }, {
   name: "Series 5",
   symbol: {
@@ -81,7 +87,7 @@ const LegendDemo = () => (
         data={data}
         symbolSpacer={symbolSpacer}
         style={legendStyle}
-        titleComponent={<VictoryLabel style={[{ fontSize: 20 }, { fontSize: 10 }]}/>}
+        titleComponent={<VictoryLabel style={[{ fontSize: 20 }, { fontSize: 10 }]} />}
         events={[{
           target: "data",
           eventHandlers: {
@@ -147,7 +153,7 @@ const LegendDemo = () => (
       />
     </svg>
     <VictoryLegend
-      borderComponent={<Border width={430} height={110}/>}
+      borderComponent={<Border width={430} height={110} />}
       centerTitle
       title={["TITLE"]}
       gutter={30}

diff --git a/src/victory-primitives/path-helpers.js b/src/victory-primitives/path-helpers.js
@@ -76,6 +76,20 @@ export default {
       z`;
   },
 
+  minus(x, y, size) {
+
+    const baseSize = 1.1 * size; // eslint-disable-line no-magic-numbers
+    const lineHeight = baseSize - baseSize * 0.3;// eslint-disable-line no-magic-numbers
+    const x0 = x - baseSize;
+    const y1 = y + lineHeight / 2;
+    const distance = x + baseSize - x0;
+    return `M ${x0}, ${y1}
+      h${distance}
+      v-${lineHeight}
+      h-${distance}
+      z`;
+  },
+
   star(x, y, size) {
     const baseSize = 1.35 * size; // eslint-disable-line no-magic-numbers
     const angle = Math.PI / 5; // eslint-disable-line no-magic-numbers

diff --git a/src/victory-primitives/point.js b/src/victory-primitives/point.js
@@ -18,7 +18,7 @@ export default class Point extends React.Component {
     ]),
     symbol: PropTypes.oneOfType([
       PropTypes.oneOf([
-        "circle", "diamond", "plus", "square", "star", "triangleDown", "triangleUp"
+        "circle", "diamond", "plus", "minus", "square", "star", "triangleDown", "triangleUp"
       ]),
       PropTypes.func
     ]),
@@ -27,7 +27,7 @@ export default class Point extends React.Component {
   };
 
   static defaultProps = {
-    pathComponent: <Path/>
+    pathComponent: <Path />
   };
 
   getPath(props) {
@@ -43,6 +43,7 @@ export default class Point extends React.Component {
       triangleDown: pathHelpers.triangleDown,
       triangleUp: pathHelpers.triangleUp,
       plus: pathHelpers.plus,
+      minus: pathHelpers.minus,
       star: pathHelpers.star
     };
     const symbol = Helpers.evaluateProp(props.symbol, datum, active);

diff --git a/test/client/spec/victory-primitives/path-helper.spec.js b/test/client/spec/victory-primitives/path-helper.spec.js
@@ -54,12 +54,23 @@ describe("path-helpers", () => {
     });
   });
 
+  describe("minus", () => {
+    it("draws a path for a minus at the correct location", () => {
+      const pathResult = PathHelpers.minus(0, 0, 1);
+      const baseSize = 1.1 * size;
+      const lineHeight = baseSize - baseSize * 0.3;
+      expect(pathResult).to.contain(
+        `M ${(x - (baseSize))}, ${(y + lineHeight / 2)}`
+      );
+    });
+  });
+
   describe("star", () => {
     it("draws a path for a star at the correct location", () => {
       const pathResult = PathHelpers.star(0, 0, 1);
       const angle = Math.PI / 5;
       const baseSize = 1.35 * size;
-      expect(pathResult).to.contain(`M ${(baseSize) * Math.sin(angle) + x },
+      expect(pathResult).to.contain(`M ${(baseSize) * Math.sin(angle) + x},
         ${(baseSize) * Math.cos(angle) + y}`);
     });
   });

diff --git a/test/client/spec/victory-primitives/point.spec.js b/test/client/spec/victory-primitives/point.spec.js
@@ -31,11 +31,12 @@ describe("victory-primitives/point", () => {
       "triangleDown",
       "triangleUp",
       "plus",
+      "minus",
       "star"
     ].forEach((symbol) => {
       const stub = sandbox.stub(pathHelpers, symbol).returns(`${symbol} symbol`);
       const props = Object.assign({}, baseProps, { symbol });
-      const wrapper = shallow(<Point {...props}/>);
+      const wrapper = shallow(<Point {...props} />);
       const directions = wrapper.find(Path).prop("d");
 
       expect(stub.callCount).to.eql(1);