Merge pull request #245 from FormidableLabs/bug/fix-dy-calculation

Bug/fix dy calculation

src/victory-label/victory-label.js

@@ -131,13 +131,12 @@ export default class VictoryLabel extends React.Component {
 
   calculateAttributes(props) {
     const style = this.getStyles(props);
-    const fontSize = style[0].fontSize;
     const lineHeight = this.getHeight(props, "lineHeight");
     const textAnchor = props.textAnchor ?
       Helpers.evaluateProp(props.textAnchor, props.datum) : "start";
     const content = this.getContent(props);
     const dx = props.dx ? Helpers.evaluateProp(this.props.dx, props.datum) : 0;
-    const dy = this.getDy(props, style, content, lineHeight) * fontSize;
+    const dy = this.getDy(props, style, content, lineHeight);
     const transform = this.getTransform(props, style);
     return {
       style, dx, dy, content, lineHeight, textAnchor, transform
@@ -174,6 +173,7 @@ export default class VictoryLabel extends React.Component {
   }
 
   getDy(props, style, content, lineHeight) { //eslint-disable-line max-params
+    const fontSize = style[0].fontSize;
     const datum = props.datum || props.data;
     const dy = props.dy ? Helpers.evaluateProp(props.dy, datum) : 0;
     const length = content.length;
@@ -183,11 +183,11 @@ export default class VictoryLabel extends React.Component {
       Helpers.evaluateProp(verticalAnchor, datum) : "middle";
     switch (anchor) {
     case "end":
-      return dy + capHeight / 2 + (0.5 - length) * lineHeight;
+      return dy + (capHeight / 2 + (0.5 - length) * lineHeight) * fontSize;
     case "middle":
-      return dy + capHeight / 2 + (0.5 - length / 2) * lineHeight;
+      return dy + (capHeight / 2 + (0.5 - length / 2) * lineHeight) * fontSize;
     default:
-      return dy + capHeight / 2 + lineHeight / 2;
+      return dy + (capHeight / 2 + lineHeight / 2) * fontSize;
     }
   }
 

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

@@ -16,6 +16,16 @@ describe("components/victory-label", () => {
     expect(output.html()).to.contain("such text, wow");
   });
 
+  it("sets dx and dy for text element", () => {
+    const wrapper = shallow(
+      <VictoryLabel dx={30} dy={30} text={"such text, wow"}/>
+    );
+    const output = wrapper.find("text");
+    expect(output.prop("dx")).to.eql(30);
+    // dy = props.dy + (capHeight(0.71) / 2 + (0.5 - length(1) / 2) * lineHeight(1)) * fontSize(14);
+    expect(output.prop("dy")).to.eql(34.97);
+  });
+
   it("has a transform property that rotates the text to match the labelAngle prop", () => {
     const wrapper = shallow(
       <VictoryLabel angle={46} text={"such text, wow"}/>