Merge pull request #1081 from FormidableLabs/feature/allow-empty-legends

allow legends to render title annd border when data is an empty array

Author: boygirl

packages/victory-legend/src/helper-methods.js

@@ -180,8 +180,8 @@ const getTitleProps = (props, borderProps) => {
 
 const getBorderProps = (props, contentHeight, contentWidth) => {
   const { x, y, borderPadding, style } = props;
-  const height = contentHeight + borderPadding.top + borderPadding.bottom;
-  const width = contentWidth + borderPadding.left + borderPadding.right;
+  const height = (contentHeight || 0) + borderPadding.top + borderPadding.bottom;
+  const width = (contentWidth || 0) + borderPadding.left + borderPadding.right;
   return { x, y, height, width, style: assign({ fill: "none" }, style.border) };
 };
 
@@ -225,16 +225,17 @@ const getBaseProps = (props, fallbackProps) => {
     y: rowGutter && typeof rowGutter === "object" ? rowGutter.top || 0 : 0
   };
   const { height, width } = getDimensions(props, fallbackProps);
+  const borderProps = getBorderProps(props, height, width);
+  const titleProps = getTitleProps(props, borderProps);
   const initialProps = {
     parent: {
       data, standalone, theme, padding, name,
       height: props.height,
       width: props.width,
       style: style.parent
-    }
+    },
+    all: { border: borderProps, title: titleProps }
   };
-  const borderProps = getBorderProps(props, height, width);
-  const titleProps = getTitleProps(props, borderProps);
   return groupedData.reduce((childProps, datum, i) => {
     const color = colorScale[i % colorScale.length];
     const dataStyle = defaults({}, datum.symbol, style.data, { fill: color });
@@ -259,9 +260,7 @@ const getBaseProps = (props, fallbackProps) => {
       y: dataProps.y,
       x: dataProps.x + datum.symbolSpacer + (datum.size / 2)
     };
-    childProps[eventKey] = eventKey === 0 ?
-      { data: dataProps, labels: labelProps, border: borderProps, title: titleProps } :
-      { data: dataProps, labels: labelProps };
+    childProps[eventKey] = { data: dataProps, labels: labelProps };
 
     return childProps;
   }, initialProps);

packages/victory-legend/src/victory-legend.js

@@ -156,9 +156,12 @@ class VictoryLegend extends React.Component {
   renderChildren(props) {
     const { dataComponent, labelComponent, title } = props;
     const dataComponents = this.dataKeys.map((_dataKey, index) => {
+      if (_dataKey === "all") {
+        return undefined;
+      }
       const dataProps = this.getComponentProps(dataComponent, "data", index);
       return React.cloneElement(dataComponent, dataProps);
-    });
+    }).filter(Boolean);
 
     const labelComponents = this.dataKeys.map((_dataKey, index) => {
       const labelProps = this.getComponentProps(labelComponent, "labels", index);
@@ -168,10 +171,10 @@ class VictoryLegend extends React.Component {
       return undefined;
     }).filter(Boolean);
 
-    const borderProps = this.getComponentProps(props.borderComponent, "border", 0);
+    const borderProps = this.getComponentProps(props.borderComponent, "border", "all");
     const borderComponent = React.cloneElement(props.borderComponent, borderProps);
     if (title) {
-      const titleProps = this.getComponentProps(props.title, "title", 0);
+      const titleProps = this.getComponentProps(props.title, "title", "all");
       const titleComponent = React.cloneElement(props.titleComponent, titleProps);
       return [borderComponent, ...dataComponents, titleComponent, ...labelComponents];
     }