victory-box-plot 31.0.0 → 31.3.0

package/src/victory-box-plot.js

@@ -1,9 +1,18 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { flatten } from "lodash";
+import { flatten, isNil } from "lodash";
 import {
-    Helpers, VictoryLabel, addEvents, LineSegment, PropTypes as CustomPropTypes,
-    VictoryContainer, VictoryTheme, Box, Whisker, DefaultTransitions, CommonProps
+  Helpers,
+  VictoryLabel,
+  addEvents,
+  LineSegment,
+  PropTypes as CustomPropTypes,
+  VictoryContainer,
+  VictoryTheme,
+  Box,
+  Whisker,
+  DefaultTransitions,
+  CommonProps
 } from "victory-core";
 import { getDomain, getData, getBaseProps } from "./helper-methods";
 
@@ -18,24 +27,29 @@ const fallbackProps = {
   }
 };
 
-const options = {
-  components: [
-    { name: "min" }, { name: "minLabels" }, { name: "max" }, { name: "maxLabels" },
-    { name: "median" }, { name: "medianLabels" }, { name: "q1" }, { name: "q1Labels" },
-    { name: "q3" }, { name: "q3Labels" }, { name: "parent", index: "parent" }
-  ]
-};
-
 const defaultData = [
   { x: 1, min: 5, q1: 7, median: 12, q3: 18, max: 20 },
   { x: 2, min: 2, q1: 5, median: 8, q3: 12, max: 15 }
 ];
 
-const animationWhitelist = [
-  "data", "domain", "height", "padding", "style", "width"
-];
+const options = {
+  components: [
+    { name: "min" },
+    { name: "minLabels" },
+    { name: "max" },
+    { name: "maxLabels" },
+    { name: "median" },
+    { name: "medianLabels" },
+    { name: "q1" },
+    { name: "q1Labels" },
+    { name: "q3" },
+    { name: "q3Labels" },
+    { name: "parent", index: "parent" }
+  ]
+};
 
 class VictoryBoxPlot extends React.Component {
+  static animationWhitelist = ["data", "domain", "height", "padding", "style", "width"];
 
   static displayName = "VictoryBoxPlot";
   static role = "boxplot";
@@ -44,20 +58,40 @@ class VictoryBoxPlot extends React.Component {
     ...CommonProps.baseProps,
     ...CommonProps.dataProps,
     boxWidth: PropTypes.number,
-    events: PropTypes.arrayOf(PropTypes.shape({
-      target: PropTypes.oneOf([
-        "max", "maxLabels", "median", "medianLabels", "min", "minLabels",
-        "q1", "q1Labels", "q3", "q3Labels", "parent"
-      ]),
-      eventKey: PropTypes.oneOfType([
-        PropTypes.array,
-        CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]),
-        PropTypes.string
-      ]),
-      eventHandlers: PropTypes.object
-    })),
+    events: PropTypes.arrayOf(
+      PropTypes.shape({
+        target: PropTypes.oneOf([
+          "max",
+          "maxLabels",
+          "median",
+          "medianLabels",
+          "min",
+          "minLabels",
+          "q1",
+          "q1Labels",
+          "q3",
+          "q3Labels",
+          "parent"
+        ]),
+        eventKey: PropTypes.oneOfType([
+          PropTypes.array,
+          CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]),
+          PropTypes.string
+        ]),
+        eventHandlers: PropTypes.object
+      })
+    ),
     horizontal: PropTypes.bool,
-    labelOrientation: PropTypes.oneOf(["top", "bottom", "left", "right"]),
+    labelOrientation: PropTypes.oneOfType([
+      PropTypes.oneOf(["top", "bottom", "left", "right"]),
+      PropTypes.exact({
+        q1: PropTypes.oneOf(["top", "bottom", "left", "right"]),
+        q3: PropTypes.oneOf(["top", "bottom", "left", "right"]),
+        min: PropTypes.oneOf(["top", "bottom", "left", "right"]),
+        max: PropTypes.oneOf(["top", "bottom", "left", "right"]),
+        median: PropTypes.oneOf(["top", "bottom", "left", "right"])
+      })
+    ]),
     labels: PropTypes.bool,
     max: PropTypes.oneOfType([
       PropTypes.func,
@@ -121,13 +155,13 @@ class VictoryBoxPlot extends React.Component {
       whiskers: PropTypes.object
     }),
     whiskerWidth: PropTypes.number
-  }
+  };
 
   static defaultProps = {
-    containerComponent: <VictoryContainer/>,
+    containerComponent: <VictoryContainer />,
     data: defaultData,
-    dataComponent: <Box/>,
-    groupComponent: <g role="presentation"/>,
+    dataComponent: <Box />,
+    groupComponent: <g role="presentation" />,
     maxComponent: <Whisker />,
     maxLabelComponent: <VictoryLabel />,
     medianComponent: <LineSegment />,
@@ -150,33 +184,49 @@ class VictoryBoxPlot extends React.Component {
   static getData = getData;
   static getBaseProps = (props) => getBaseProps(props, fallbackProps);
   static expectedComponents = [
-    "maxComponent", "maxLabelComponent", "medianComponent", "medianLabelComponent",
-    "minComponent", "minLabelComponent", "q1Component", "q1LabelComponent",
-    "q3Component", "q3LabelComponent", "groupComponent", "containerComponent"
+    "maxComponent",
+    "maxLabelComponent",
+    "medianComponent",
+    "medianLabelComponent",
+    "minComponent",
+    "minLabelComponent",
+    "q1Component",
+    "q1LabelComponent",
+    "q3Component",
+    "q3LabelComponent",
+    "groupComponent",
+    "containerComponent"
   ];
 
   renderBoxPlot(props) {
     const types = ["q1", "q3", "max", "min", "median"];
-    const dataComponents = flatten(types.map((type) => {
-      return this.dataKeys.map((key, index) => {
-        const baseComponent = props[`${type}Component`];
-        const componentProps = this.getComponentProps(baseComponent, type, index);
-        return React.cloneElement(baseComponent, componentProps);
-      });
-    }));
-
-    const labelComponents = flatten(types.map((type) => {
-      const components = this.dataKeys.map((key, index) => {
-        const name = `${type}Labels`;
-        const baseComponent = props[`${type}LabelComponent`];
-        const labelProps = this.getComponentProps(baseComponent, name, index);
-        if (labelProps.text !== undefined && labelProps.text !== null) {
-          return React.cloneElement(baseComponent, labelProps);
-        }
-        return undefined;
-      });
-      return components.filter(Boolean);
-    }));
+    const dataComponents = flatten(
+      types.map((type) => {
+        return this.dataKeys.reduce((validDataComponents, _key, index) => {
+          const baseComponent = props[`${type}Component`];
+          const componentProps = this.getComponentProps(baseComponent, type, index);
+          if (this.shouldRenderDatum(componentProps.datum)) {
+            validDataComponents.push(React.cloneElement(baseComponent, componentProps));
+          }
+          return validDataComponents;
+        }, []);
+      })
+    );
+
+    const labelComponents = flatten(
+      types.map((type) => {
+        const components = this.dataKeys.map((key, index) => {
+          const name = `${type}Labels`;
+          const baseComponent = props[`${type}LabelComponent`];
+          const labelProps = this.getComponentProps(baseComponent, name, index);
+          if (labelProps.text !== undefined && labelProps.text !== null) {
+            return React.cloneElement(baseComponent, labelProps);
+          }
+          return undefined;
+        });
+        return components.filter(Boolean);
+      })
+    );
     const children = [...dataComponents, ...labelComponents];
     return this.renderContainer(props.groupComponent, children);
   }
@@ -186,12 +236,27 @@ class VictoryBoxPlot extends React.Component {
     return !!this.props.animate;
   }
 
+  shouldRenderDatum(datum) {
+    const hasX = !isNil(datum._x);
+    const hasY = !isNil(datum._y);
+    const hasSummaryStatistics =
+      !isNil(datum._min) &&
+      !isNil(datum._max) &&
+      !isNil(datum._median) &&
+      !isNil(datum._q1) &&
+      !isNil(datum._q3);
+
+    return hasSummaryStatistics && (this.props.horizontal ? hasY : hasX);
+  }
+
   render() {
-    const { role } = this.constructor;
+    const { animationWhitelist, role } = VictoryBoxPlot;
     const props = Helpers.modifyProps(this.props, fallbackProps, role);
+
     if (this.shouldAnimate()) {
       return this.animateComponent(props, animationWhitelist);
     }
+
     const children = this.renderBoxPlot(props);
     return props.standalone ? this.renderContainer(props.containerComponent, children) : children;
   }