minor improvements

src/victory-legend/victory-legend.js

@@ -1,17 +1,24 @@
-/*global document:false */
-
 import React, { PropTypes } from "react";
-import { merge, assign, isEmpty } from "lodash";
+import { merge, assign, isEmpty, defaults } from "lodash";
 import VictoryLabel from "../victory-label/victory-label";
 import VictoryContainer from "../victory-container/victory-container";
-import Point from "../point/point"; // it should be replaced
-
-const defaultFontStyle = {
-  fontSize: 14,
-  fontFamily: "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
-  color: "#252525",
-  backgroundColor: "#d9d9d9",
-  stroke: "transparent"
+import Point from "../victory-primitives/point";
+import Textsize from "../victory-util/textsize";
+
+const fallbackProps = {
+  style: {
+    symbol: {
+      fill: "black",
+      type: "circle"
+    },
+    labels: {
+      fontSize: 14,
+      fontFamily: "'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif",
+      color: "#252525",
+      backgroundColor: "#d9d9d9",
+      stroke: "transparent"
+    }
+  }
 };
 
 const defaultLegendStyle = {
@@ -21,24 +28,15 @@ const defaultLegendStyle = {
 };
 
 const defaultLegendData = [{
-  name: "Series 1",
-  symbol: {
-    type: "circle",
-    style: {
-      fill: "red"
-    }
-  }
+  name: "Series 1"
 }, {
-  name: "Series 2",
-  symbol: {
-    type: "diamond",
-    style: {
-      fill: "blue"
-    }
-  }
+  name: "Series 2"
 }];
 
 export default class VictoryLegend extends React.Component {
+  static displayName = "VictoryLegend";
+  static role = "legend";
+
   static propTypes = {
     x: PropTypes.number.isRequired,
     y: PropTypes.number.isRequired,
@@ -56,7 +54,10 @@ export default class VictoryLegend extends React.Component {
     rowItemSpacing: PropTypes.number,
     groupComponent: PropTypes.element,
     standalone: PropTypes.bool,
-    style: PropTypes.object
+    style: PropTypes.shape({
+      symbol: PropTypes.object,
+      labels: PropTypes.object
+    })
   };
 
   static defaultProps = {
@@ -67,48 +68,24 @@ export default class VictoryLegend extends React.Component {
     orientation: "vertical",
     columnItemSpacing: 10,
     rowItemSpacing: 8,
-    symbolComponent: <Point/>,
+    dataComponent: <Point/>,
     labelComponent: <VictoryLabel/>,
     containerComponent: <VictoryContainer/>,
     groupComponent: <g/>,
-    standalone: true
+    standalone: true,
+    style: {}
   };
 
-  getFontStyles(props) {
-    return merge({}, defaultFontStyle, props.label);
+  getLabelStyles(props) {
+    return merge({}, fallbackProps.style.labels, props.label);
   }
 
   getLegendStyle(props) {
     return {
-      style: merge({}, defaultLegendStyle, props.style)
+      style: defaults({}, defaultLegendStyle, props.style)
     };
   }
 
-  // it should be changed to approximateTextSize
-  getLabelBbox(text, font) {
-    const body = document.body;
-    const container = document.createElement("svg");
-    const label = document.createElement("text");
-
-    label.innerText = text;
-    label.setAttribute("style",
-      `fill: ${font.color};
-      font-size: ${font.fontSize}px;
-      font-family: ${font.fontFamily};
-      background-color: ${font.backgroundColor};
-      stroke: ${font.stroke};
-      top: -10000px;
-      position: absolute;`
-    );
-    body.appendChild(container);
-    container.appendChild(label);
-
-    const bBox = label.getBoundingClientRect();
-    body.removeChild(container);
-
-    return bBox;
-  }
-
   renderContainer(props, group) {
     return React.cloneElement(
       props.containerComponent,
@@ -125,62 +102,66 @@ export default class VictoryLegend extends React.Component {
     );
   }
 
+  getSymbolProps(series) {
+    return assign({}, fallbackProps.style.symbol, this.props.style.symbol, series.symbol);
+  }
+
   render() {
     let yPadding = 0;
     let xPadding = 0;
     const props = this.props;
     const itemXPosition = [];
-    const symbolComponents = [];
+    const dataComponents = [];
     const labelComponents = [];
-    const { symbolComponent, labelComponent } = props;
+    const { dataComponent, labelComponent } = props;
     const data = isEmpty(props.data) ? defaultLegendData : props.data;
 
-    data.forEach((series, index) => {
-      const font = this.getFontStyles(series);
+    data.forEach((series, i) => {
+      const font = this.getLabelStyles(series);
       const symbolSize = font.fontSize;
       const hPadding = symbolSize * 0.87;
-      const yPos = props.y + index * yPadding;
+      const yPos = props.y + i * yPadding;
       const labelSymbolPadding = symbolSize * 1.5 + props.columnItemSpacing;
 
       if (props.orientation === "horizontal") {
-        itemXPosition.push(xPadding);
-        xPadding += labelSymbolPadding + this.getLabelBbox(series.name, font).width;
+        itemXPosition[i] = xPadding;
+        xPadding += labelSymbolPadding + Textsize.approximateTextSize(series.name, font).width;
       } else {
         yPadding = symbolSize + props.rowItemSpacing;
       }
 
       const xLabelPos = (props.orientation !== "horizontal" ?
-        props.x : itemXPosition[index]) + hPadding;
+        props.x : itemXPosition[i]) + hPadding;
       const xSymbolPos = props.orientation !== "horizontal" ?
-        props.x : itemXPosition[index];
+        props.x : itemXPosition[i];
 
       const symbolProps = assign({
-        key: `symbol-${index}`
+        key: `symbol-${i}`
       }, {
         x: xSymbolPos,
         y: yPos,
-        size: series.symbol.size || symbolSize / 2.5,
-        symbol: series.symbol.type
-      }, series.symbol);
+        size: series.symbol ? series.symbol.size || symbolSize / 2.5 : symbolSize / 2.5,
+        symbol: this.getSymbolProps(series).type
+      }, this.getSymbolProps(series));
 
       const labelProps = assign({
-        key: `label-${index}`
+        key: `label-${i}`
       }, {
         x: xLabelPos,
         y: yPos,
         style: font,
         text: series.name
-      }, series.label);
+      }, assign({}, fallbackProps.style.labels, props.style.labels, series.label));
 
-      symbolComponents[index] = React.cloneElement(
-        symbolComponent, assign({}, symbolProps)
+      dataComponents[i] = React.cloneElement(
+        dataComponent, assign({}, symbolProps)
       );
-      labelComponents[index] = React.cloneElement(
+      labelComponents[i] = React.cloneElement(
         labelComponent, assign({}, labelProps)
       );
     });
 
-    const group = this.renderGroup([...symbolComponents, ...labelComponents]);
+    const group = this.renderGroup([...dataComponents, ...labelComponents]);
     return props.standalone ? this.renderContainer(props, group) : group;
   }
 }

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

@@ -38,7 +38,7 @@ describe("components/victory-legend", () => {
     const output = wrappedLegend.find("Point");
 
     expect(output.at(0).prop("x")).to.be.equal(0);
-    expect(output.at(1).prop("x")).to.be.equal(76);
+    expect(output.at(1).prop("x")).to.be.equal(87.68016194331983);
     expect(output.at(0).prop("y")).to.be.equal(0);
     expect(output.at(1).prop("y")).to.be.equal(0);
   });
@@ -58,7 +58,7 @@ describe("components/victory-legend", () => {
     const output = wrappedLegend.find("text");
 
     expect(output.eq(0).prop("x")).to.be.equal("12.18");
-    expect(output.eq(1).prop("x")).to.be.equal("88.18");
+    expect(output.eq(1).prop("x")).to.be.equal("99.86016194331984");
 
     expect(output.eq(0).prop("y")).to.be.equal("0");
     expect(output.eq(1).prop("y")).to.be.equal("0");
@@ -119,4 +119,43 @@ describe("components/victory-legend", () => {
       expect(output.get(1).props.symbol).to.be.equal("triangleUp");
     });
   });
+
+  describe("legend style prop", () => {
+    const legendData = [{
+      name: "Thing 1"
+    }, {
+      name: "Thing 2"
+    }];
+
+    const styleObject = {
+      symbol: {
+        type: "triangleUp",
+        fill: "green"
+      },
+      labels: {
+        fontSize: 16
+      }
+    };
+
+    wrapper = shallow(
+      <VictoryLegend data={legendData} style={styleObject} />
+    );
+    const outputPoints = wrapper.find("Point");
+    const outputLabels = wrapper.find("VictoryLabel");
+
+    it("has expected symbol type", () => {
+      expect(outputPoints.at(0).prop("type")).to.be.equal("triangleUp");
+      expect(outputPoints.at(1).prop("type")).to.be.equal("triangleUp");
+    });
+
+    it("has expected symbol colors", () => {
+      expect(outputPoints.at(0).prop("fill")).to.be.equal("green");
+      expect(outputPoints.at(1).prop("fill")).to.be.equal("green");
+    });
+
+    it("has expected symbol colors", () => {
+      expect(outputLabels.at(0).prop("color")).to.be.equal("#252525");
+      expect(outputLabels.at(1).prop("color")).to.be.equal("#252525");
+    });
+  });
 });