Merge pull request #330 from FormidableLabs/feature/886-wickStrokeWidth

Support for a wickStrokeWidth style prop

src/victory-primitives/candle.js

@@ -3,24 +3,26 @@ import React from "react";
 import PropTypes from "prop-types";
 import Helpers from "../victory-util/helpers";
 import Collection from "../victory-util/collection";
-import { assign } from "lodash";
+import { assign, defaults } from "lodash";
 import CommonProps from "./common-props";
 
 export default class Candle extends React.Component {
   static propTypes = {
     ...CommonProps,
     candleHeight: PropTypes.number,
+    close: PropTypes.number,
     datum: PropTypes.object,
     groupComponent: PropTypes.element,
+    high: PropTypes.number,
+    low: PropTypes.number,
+    open: PropTypes.number,
     padding: PropTypes.oneOfType([
       PropTypes.number,
       PropTypes.object
     ]),
+    wickStrokeWidth: PropTypes.number,
     width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.number,
-    y1: PropTypes.number,
-    y2: PropTypes.number
+    x: PropTypes.number
   }
 
   static defaultProps = {
@@ -34,16 +36,17 @@ export default class Candle extends React.Component {
   }
 
   shouldComponentUpdate(nextProps) {
-    const { className, candleHeight, datum, x, y, y1, y2 } = this.props;
+    const { className, candleHeight, datum, x, high, low, open, close } = this.props;
     const { style, candleWidth } = this.calculateAttributes(nextProps);
 
     if (!Collection.allSetsEqual([
       [className, nextProps.className],
       [candleHeight, nextProps.candleHeight],
       [x, nextProps.x],
-      [y, nextProps.y],
-      [y1, nextProps.y1],
-      [y2, nextProps.y2],
+      [high, nextProps.high],
+      [low, nextProps.low],
+      [open, nextProps.open],
+      [close, nextProps.close],
       [candleWidth, this.candleWidth],
       [style, this.style],
       [datum, nextProps.datum]
@@ -74,30 +77,50 @@ export default class Candle extends React.Component {
   }
 
   getCandleProps(props) {
-    const { candleHeight, x, y, events, role, className } = props;
+    const { candleHeight, x, open, close, events, role, className } = props;
     const shapeRendering = props.shapeRendering || "auto";
     const candleX = x - this.candleWidth / 2;
     return assign({
-      x: candleX, y, style: this.style, role, width: this.candleWidth, height: candleHeight,
-      shapeRendering, className
+      x: candleX,
+      y: Math.min(open, close),
+      style: this.style,
+      role,
+      width: this.candleWidth,
+      height: candleHeight,
+      shapeRendering,
+      className
     }, events);
   }
 
-  getWickProps(props) {
-    const { x, y1, y2, events, className } = props;
+  getWickProps(props, wickType) {
+    const { x, high, low, open, close, wickStrokeWidth, events, className } = props;
     const shapeRendering = props.shapeRendering || "auto";
     const role = props.role || "presentation";
-    return assign(
-      { x1: x, x2: x, y1, y2, style: this.style, role, shapeRendering, className },
-      events
-    );
+    const lowWick = Math.min(close, open);
+    const highWick = Math.max(close, open);
+    const wickStyle = defaults({ strokeWidth: wickStrokeWidth }, this.style);
+    return assign({
+      x1: x,
+      x2: x,
+      y1: wickType === "low" ? lowWick : highWick,
+      y2: wickType === "high" ? low : high,
+      style: wickStyle,
+      role,
+      shapeRendering,
+      className
+    }, events);
   }
 
   render() {
     const candleProps = this.getCandleProps(this.props);
-    const wickProps = this.getWickProps(this.props);
+    const highWickProps = this.getWickProps(this.props, "high");
+    const lowWickProps = this.getWickProps(this.props, "low");
     return React.cloneElement(
-      this.props.groupComponent, {}, this.renderWick(wickProps), this.renderCandle(candleProps)
+      this.props.groupComponent,
+      {},
+      this.renderWick(highWickProps),
+      this.renderWick(lowWickProps),
+      this.renderCandle(candleProps)
     );
   }
 }

test/client/spec/victory-primitives/candle.spec.js

@@ -11,22 +11,37 @@ describe("victory-primitives/candle", () => {
     ],
     datum: { x: 1, open: 10, close: 30, high: 50, low: 5, eventKey: 0 },
     x: 5,
-    y: 30,
-    y1: 50,
-    y2: 5,
+    high: 50,
+    low: 5,
+    close: 30,
+    open: 10,
     candleHeight: 20,
     width: 10,
     padding: 1
   };
 
   it("should render a wick line", () => {
     const wrapper = shallow(<Candle {...baseProps}/>);
-    const wick = wrapper.find("line");
+    const wicks = wrapper.find("line");
+    const values = [
+      {
+        x1: 5,
+        x2: 5,
+        y1: 30,
+        y2: 5
+      }, {
+        x1: 5,
+        x2: 5,
+        y1: 10,
+        y2: 50
+      }];
 
-    expect(wick.prop("x1")).to.eql(5);
-    expect(wick.prop("x2")).to.eql(5);
-    expect(wick.prop("y1")).to.eql(50);
-    expect(wick.prop("y2")).to.eql(5);
+    wicks.forEach((wick, i) => {
+      expect(wick.prop("x1")).to.eql(values[i].x1);
+      expect(wick.prop("x2")).to.eql(values[i].x2);
+      expect(wick.prop("y1")).to.eql(values[i].y1);
+      expect(wick.prop("y2")).to.eql(values[i].y2);
+    });
   });
 
   it("should render a candle rectangle", () => {
@@ -39,7 +54,7 @@ describe("victory-primitives/candle", () => {
     expect(rect.prop("height")).to.eql(20);
     // x = x - width / 2
     expect(rect.prop("x")).to.eql(4);
-    expect(rect.prop("y")).to.eql(30);
+    expect(rect.prop("y")).to.eql(10);
   });
 
   it("should allow style to override width", () => {
@@ -56,6 +71,6 @@ describe("victory-primitives/candle", () => {
     expect(rect.prop("height")).to.eql(20);
     // x = x - width / 2
     expect(rect.prop("x")).to.eql(2.5);
-    expect(rect.prop("y")).to.eql(30);
+    expect(rect.prop("y")).to.eql(10);
   });
 });