Merge pull request #320 from FormidableLabs/feat/gutter-top-bottom-le…

…ft-right

Add support for top/bottom/left/right gutter.

demo/victory-legend-demo.js

@@ -140,8 +140,8 @@ const LegendDemo = () => (
       <VictoryLegend x={25} y={480}
         standalone={false}
         orientation="vertical"
-        gutter={20}
-        rowGutter={50}
+        gutter={{ left: 20, right: 50 }}
+        rowGutter={{ top: 5, bottom: 8 }}
         style={{ border: { stroke: "black" } }}
         data={[{ name: "One" }, { name: "Two" }, { name: "Three" }]}
       />

src/victory-legend/helper-methods.js

@@ -75,23 +75,31 @@ const groupData = (props) => {
 };
 
 const getColumnWidths = (props, data) => {
+  const gutter = props.gutter || {};
+  const gutterWidth = typeof gutter === "object" ?
+    (gutter.left || 0) + (gutter.right || 0) :
+    (gutter || 0);
   const dataByColumn = groupBy(data, "column");
   const columns = keys(dataByColumn);
   return columns.reduce((memo, curr, index) => {
     const lengths = dataByColumn[curr].map((d) => {
-      return d.textSize.width + d.size + d.symbolSpacer + (props.gutter || 0);
+      return d.textSize.width + d.size + d.symbolSpacer + gutterWidth;
     });
     memo[index] = Math.max(...lengths);
     return memo;
   }, []);
 };
 
 const getRowHeights = (props, data) => {
+  const gutter = props.rowGutter || {};
+  const gutterHeight = typeof gutter === "object" ?
+    (gutter.top || 0) + (gutter.bottom || 0) :
+    (gutter || 0);
   const dataByRow = groupBy(data, "row");
   return keys(dataByRow).reduce((memo, curr, index) => {
     const rows = dataByRow[curr];
     const lengths = rows.map((d) => {
-      return d.textSize.height + d.symbolSpacer + (props.rowGutter || 0);
+      return d.textSize.height + d.symbolSpacer + gutterHeight;
     });
     memo[index] = Math.max(...lengths);
     return memo;
@@ -179,11 +187,12 @@ const getBorderProps = (props, contentHeight, contentWidth) => {
   return { x, y, height, width, style: style.border };
 };
 
+// eslint-disable-next-line max-statements, complexity
 export default (props, fallbackProps) => {
   const modifiedProps = Helpers.modifyProps(props, fallbackProps, "legend");
   props = assign({}, modifiedProps, getCalculatedValues(modifiedProps));
   const {
-    data, standalone, theme, padding, style, colorScale,
+    data, standalone, theme, padding, style, colorScale, gutter, rowGutter,
     borderPadding, title, titleOrientation, x = 0, y = 0
   } = props;
   const groupedData = groupData(props);
@@ -195,6 +204,10 @@ export default (props, fallbackProps) => {
     x: titleOrientation === "left" ? titleDimensions.width : 0,
     y: titleOrientation === "top" ? titleDimensions.height : 0
   };
+  const gutterOffset = {
+    x: gutter && typeof gutter === "object" ? gutter.left || 0 : 0,
+    y: rowGutter && typeof rowGutter === "object" ? rowGutter.top || 0 : 0
+  };
 
   const contentHeight = titleOrientation === "left" || titleOrientation === "right" ?
     Math.max(sum(rowHeights), titleDimensions.height) : sum(rowHeights) + titleDimensions.height;
@@ -225,17 +238,17 @@ export default (props, fallbackProps) => {
       symbol: dataStyle.type || dataStyle.symbol || "circle",
       size: datum.size,
       style: dataStyle,
-      y: originY + offset.y + titleOffset.y,
-      x: originX + offset.x + titleOffset.x
+      y: originY + offset.y + titleOffset.y + gutterOffset.y,
+      x: originX + offset.x + titleOffset.x + gutterOffset.x
     };
 
     const labelProps = {
       datum, data,
       key: `legend-label-${i}`,
       text: datum.name,
       style: labelStyles[i],
-      y: originY + offset.y + titleOffset.y,
-      x: originX + offset.x + titleOffset.x + datum.symbolSpacer + (datum.size / 2)
+      y: dataProps.y,
+      x: dataProps.x + datum.symbolSpacer + (datum.size / 2)
     };
     childProps[eventKey] = eventKey === 0 ?
       { data: dataProps, labels: labelProps, border: borderProps, title: titleProps } :

src/victory-legend/victory-legend.js

@@ -71,7 +71,13 @@ class VictoryLegend extends React.Component {
       eventHandlers: PropTypes.object
     })),
     groupComponent: PropTypes.element,
-    gutter: PropTypes.nonNegative,
+    gutter: PropTypes.oneOfType([
+      CustomPropTypes.nonNegative,
+      PropTypes.shape({
+        left: CustomPropTypes.nonNegative,
+        right: CustomPropTypes.nonNegative
+      })
+    ]),
     height: CustomPropTypes.nonNegative,
     itemsPerRow: CustomPropTypes.nonNegative,
     labelComponent: PropTypes.element,
@@ -85,7 +91,13 @@ class VictoryLegend extends React.Component {
         right: PropTypes.number
       })
     ]),
-    rowGutter: PropTypes.nonNegative,
+    rowGutter: PropTypes.oneOfType([
+      CustomPropTypes.nonNegative,
+      PropTypes.shape({
+        top: CustomPropTypes.nonNegative,
+        bottom: CustomPropTypes.nonNegative
+      })
+    ]),
     sharedEvents: PropTypes.shape({
       events: PropTypes.array,
       getEventState: PropTypes.func