victory-core 30.6.1 → 31.2.0

package/src/victory-util/add-events.js

@@ -1,17 +1,22 @@
 import React from "react";
-import { defaults, assign, keys, isFunction, pick, without, isEmpty } from "lodash";
+import { defaults, assign, keys, isFunction, pick, without, isEmpty, isNil } from "lodash";
 import Events from "./events";
 import isEqual from "react-fast-compare";
 import VictoryTransition from "../victory-transition/victory-transition";
 
+const datumHasXandY = (datum) => {
+  return !isNil(datum._x) && !isNil(datum._y);
+};
+
 //  used for checking state changes. Expected components can be passed in via options
 const defaultComponents = [
-  { name: "parent", index: "parent" }, { name: "data" }, { name: "labels" }
+  { name: "parent", index: "parent" },
+  { name: "data" },
+  { name: "labels" }
 ];
 
 export default (WrappedComponent, options) => {
   return class addEvents extends WrappedComponent {
-
     constructor(props) {
       super(props);
       const getScopedEvents = Events.getScopedEvents.bind(this);
@@ -24,18 +29,63 @@ export default (WrappedComponent, options) => {
       const calculatedValues = this.getCalculatedValues(props);
       this.cacheValues(calculatedValues);
       this.externalMutations = this.getExternalMutations(props);
+      this.calculatedState = this.getStateChanges(props, calculatedValues);
     }
 
-    componentDidUpdate() {
-      const externalMutations = this.getExternalMutations(this.props);
-      if (!isEqual(this.externalMutations, externalMutations)) {
+    shouldComponentUpdate(nextProps) {
+      const calculatedValues = this.getCalculatedValues(nextProps);
+      const externalMutations = this.getExternalMutations(nextProps);
+      const animating = this.props.animating || this.props.animate;
+      const newMutation = !isEqual(externalMutations, this.externalMutations);
+      if (animating || newMutation) {
+        this.cacheValues(calculatedValues);
         this.externalMutations = externalMutations;
-        this.applyExternalMutations(this.props, externalMutations);
+        this.applyExternalMutations(nextProps, externalMutations);
+        return true;
       }
+      const calculatedState = this.getStateChanges(nextProps, calculatedValues);
+      if (!isEqual(this.calculatedState, calculatedState)) {
+        this.calculatedState = calculatedState;
+        this.cacheValues(calculatedValues);
+        return true;
+      }
+      if (!isEqual(this.props, nextProps)) {
+        this.cacheValues(calculatedValues);
+        return true;
+      }
+      return false;
     }
 
-    componentWillReceiveProps(nextProps) {
-      this.cacheValues(this.getCalculatedValues(nextProps));
+    // compile all state changes from own and parent state. Order doesn't matter, as any state
+    // state change should trigger a re-render
+    getStateChanges(props, calculatedValues) {
+      const { hasEvents, getSharedEventState } = calculatedValues;
+      if (!hasEvents) {
+        return {};
+      }
+
+      const getState = (key, type) => {
+        const result = defaults({}, this.getEventState(key, type), getSharedEventState(key, type));
+        return isEmpty(result) ? undefined : result;
+      };
+
+      options = options || {};
+      const components = options.components || defaultComponents;
+      const stateChanges = components
+        .map((component) => {
+          if (!props.standalone && component.name === "parent") {
+            // don't check for changes on parent props for non-standalone components
+            return undefined;
+          } else {
+            return component.index !== undefined
+              ? getState(component.index, component.name)
+              : calculatedValues.dataKeys
+                  .map((key) => getState(key, component.name))
+                  .filter(Boolean);
+          }
+        })
+        .filter(Boolean);
+      return stateChanges;
     }
 
     applyExternalMutations(props, externalMutations) {
@@ -44,62 +94,42 @@ export default (WrappedComponent, options) => {
           memo = isFunction(mutation.callback) ? memo.concat(mutation.callback) : memo;
           return memo;
         }, []);
-        const compiledCallbacks = callbacks.length ?
-          () => { callbacks.forEach((c) => c()); } : undefined;
+        const compiledCallbacks = callbacks.length
+          ? () => {
+              callbacks.forEach((c) => c());
+            }
+          : undefined;
         this.setState(externalMutations, compiledCallbacks);
       }
     }
 
-    // compile all state changes from own and parent state. Order doesn't matter, as any state
-    // state change should trigger a re-render
-    getStateChanges(props, calculatedValues) {
-      const { hasEvents, getSharedEventState } = calculatedValues;
-      if (!hasEvents) { return {}; }
-
-      options = options || {};
-      const components = options.components || defaultComponents;
-
-      const getState = (key, type) => {
-        const baseState = defaults(
-          {}, this.getEventState(key, type), getSharedEventState(key, type)
-        );
-        return isEmpty(baseState) ? undefined : baseState;
-      };
-
-      return components.map((component) => {
-        if (!props.standalone && component.name === "parent") {
-           // don't check for changes on parent props for non-standalone components
-          return undefined;
-        } else {
-          return component.index !== undefined ?
-            getState(component.index, component.name) :
-            calculatedValues.dataKeys.map((key) => getState(key, component.name));
-        }
-      }).filter(Boolean);
-    }
-
     getCalculatedValues(props) {
       const { sharedEvents } = props;
       const components = WrappedComponent.expectedComponents;
       const componentEvents = Events.getComponentEvents(props, components);
-      const getSharedEventState = sharedEvents && isFunction(sharedEvents.getEventState) ?
-        sharedEvents.getEventState : () => undefined;
+      const getSharedEventState =
+        sharedEvents && isFunction(sharedEvents.getEventState)
+          ? sharedEvents.getEventState
+          : () => undefined;
       const baseProps = this.getBaseProps(props, getSharedEventState);
       const dataKeys = keys(baseProps).filter((key) => key !== "parent");
       const hasEvents = props.events || props.sharedEvents || componentEvents;
       const events = this.getAllEvents(props);
       return {
-        componentEvents, getSharedEventState, baseProps, dataKeys,
-        hasEvents, events
+        componentEvents,
+        getSharedEventState,
+        baseProps,
+        dataKeys,
+        hasEvents,
+        events
       };
     }
 
     getExternalMutations(props) {
       const { sharedEvents, externalEventMutations } = props;
-      return isEmpty(externalEventMutations) || sharedEvents ? undefined :
-        Events.getExternalMutations(
-          externalEventMutations, this.baseProps, this.state
-        );
+      return isEmpty(externalEventMutations) || sharedEvents
+        ? undefined
+        : Events.getExternalMutations(externalEventMutations, this.baseProps, this.state);
     }
 
     cacheValues(obj) {
@@ -116,23 +146,25 @@ export default (WrappedComponent, options) => {
       const parentPropsList = baseParentProps.parentControlledProps;
       const parentProps = parentPropsList ? pick(baseParentProps, parentPropsList) : {};
       const modifiedProps = defaults({}, parentProps, props);
-      return isFunction(WrappedComponent.getBaseProps) ?
-        WrappedComponent.getBaseProps(modifiedProps) : {};
+      return isFunction(WrappedComponent.getBaseProps)
+        ? WrappedComponent.getBaseProps(modifiedProps)
+        : {};
     }
 
     getAllEvents(props) {
       if (Array.isArray(this.componentEvents)) {
-        return Array.isArray(props.events) ?
-          this.componentEvents.concat(...props.events) : this.componentEvents;
+        return Array.isArray(props.events)
+          ? this.componentEvents.concat(...props.events)
+          : this.componentEvents;
       }
       return props.events;
     }
 
     getComponentProps(component, type, index) {
       const name = this.props.name || WrappedComponent.role;
-      const key = this.dataKeys && this.dataKeys[index] || index;
+      const key = (this.dataKeys && this.dataKeys[index]) || index;
       const id = `${name}-${type}-${key}`;
-      const baseProps = this.baseProps[key] && this.baseProps[key][type] || this.baseProps[key];
+      const baseProps = (this.baseProps[key] && this.baseProps[key][type]) || this.baseProps[key];
       if (!baseProps && !this.hasEvents) {
         return undefined;
       }
@@ -147,18 +179,13 @@ export default (WrappedComponent, options) => {
           { id }
         );
         const events = defaults(
-          {}, Events.getPartialEvents(baseEvents, key, componentProps), componentProps.events
-        );
-        return assign(
-          {}, componentProps, { events }
+          {},
+          Events.getPartialEvents(baseEvents, key, componentProps),
+          componentProps.events
         );
+        return assign({}, componentProps, { events });
       }
-      return defaults(
-        { index, key: id },
-        component.props,
-        baseProps,
-        { id }
-      );
+      return defaults({ index, key: id }, component.props, baseProps, { id });
     }
 
     renderContainer(component, children) {
@@ -167,7 +194,12 @@ export default (WrappedComponent, options) => {
       return React.cloneElement(component, parentProps, children);
     }
 
-    animateComponent(props, animationWhitelist) {
+    animateComponent(props, defaultAnimationWhitelist) {
+      const animationWhitelist =
+        props.animate && props.animate.animationWhitelist
+          ? props.animate.animationWhitelist
+          : defaultAnimationWhitelist;
+
       return (
         <VictoryTransition animate={props.animate} animationWhitelist={animationWhitelist}>
           {React.createElement(this.constructor, props)}
@@ -191,20 +223,26 @@ export default (WrappedComponent, options) => {
       return this.renderContainer(groupComponent, children);
     }
 
-    renderData(props) {
+    renderData(props, shouldRenderDatum = datumHasXandY) {
       const { dataComponent, labelComponent, groupComponent } = props;
-      const dataComponents = this.dataKeys.map((_dataKey, index) => {
-        const dataProps = this.getComponentProps(dataComponent, "data", index);
-        return React.cloneElement(dataComponent, dataProps);
-      });
 
-      const labelComponents = this.dataKeys.map((_dataKey, index) => {
-        const labelProps = this.getComponentProps(labelComponent, "labels", index);
-        if (labelProps.text !== undefined && labelProps.text !== null) {
-          return React.cloneElement(labelComponent, labelProps);
+      const dataComponents = this.dataKeys.reduce((validDataComponents, _dataKey, index) => {
+        const dataProps = this.getComponentProps(dataComponent, "data", index);
+        if (shouldRenderDatum(dataProps.datum)) {
+          validDataComponents.push(React.cloneElement(dataComponent, dataProps));
         }
-        return undefined;
-      }).filter(Boolean);
+        return validDataComponents;
+      }, []);
+
+      const labelComponents = this.dataKeys
+        .map((_dataKey, index) => {
+          const labelProps = this.getComponentProps(labelComponent, "labels", index);
+          if (labelProps.text !== undefined && labelProps.text !== null) {
+            return React.cloneElement(labelComponent, labelProps);
+          }
+          return undefined;
+        })
+        .filter(Boolean);
 
       const children = [...dataComponents, ...labelComponents];
       return this.renderContainer(groupComponent, children);

package/src/victory-util/axis.js

@@ -1,7 +1,16 @@
 /* eslint-disable func-style */
 import React from "react";
 import {
-  identity, isFunction, invert, uniq, range, orderBy, values, includes, without
+  identity,
+  isFunction,
+  isObject,
+  invert,
+  uniq,
+  range,
+  orderBy,
+  values,
+  includes,
+  without
 } from "lodash";
 import Collection from "./collection";
 import Domain from "./domain";
@@ -100,10 +109,12 @@ function getOrigin(domain) {
   };
 
   return {
-    x: Collection.containsDates(domain.x) ?
-      new Date(Math.min(...domain.x)) : getSingleOrigin(domain.x),
-    y: Collection.containsDates(domain.y) ?
-      new Date(Math.min(...domain.y)) : getSingleOrigin(domain.y)
+    x: Collection.containsDates(domain.x)
+      ? new Date(Math.min(...domain.x))
+      : getSingleOrigin(domain.x),
+    y: Collection.containsDates(domain.y)
+      ? new Date(Math.min(...domain.y))
+      : getSingleOrigin(domain.y)
   };
 }
 
@@ -137,8 +148,9 @@ function getOrientation(component, axis, originSign) {
     return typicalOrientations[sign][axis];
   }
   const dependent = component.props.dependentAxis;
-  return (!dependent && axis === "y") || (dependent && axis === "x") ?
-    flippedOrientations[sign][axis] : typicalOrientations[sign][axis];
+  return (!dependent && axis === "y") || (dependent && axis === "x")
+    ? flippedOrientations[sign][axis]
+    : typicalOrientations[sign][axis];
 }
 
 /**
@@ -160,9 +172,11 @@ function stringTicks(props) {
 }
 
 function getDefaultTickFormat(props) {
-  const { tickValues, stringMap } = props;
-  const fallbackFormat = tickValues && !Collection.containsDates(tickValues) ?
-    (x) => x : undefined;
+  const { tickValues } = props;
+  const axis = getAxis(props);
+  const currentAxis = getCurrentAxis(axis, props.horizontal);
+  const stringMap = props.stringMap && props.stringMap[currentAxis];
+  const fallbackFormat = tickValues && !Collection.containsDates(tickValues) ? (x) => x : undefined;
   if (!stringMap) {
     return stringTicks(props) ? (x, index) => tickValues[index] : fallbackFormat;
   } else {
@@ -176,11 +190,14 @@ function getDefaultTickFormat(props) {
 }
 
 function getTickFormat(props, scale) {
-  const { tickFormat, stringMap } = props;
+  const { tickFormat } = props;
+  const axis = getAxis(props);
+  const currentAxis = getCurrentAxis(axis, props.horizontal);
+  const stringMap = props.stringMap && props.stringMap[currentAxis];
   if (!tickFormat) {
     const defaultTickFormat = getDefaultTickFormat(props);
-    const scaleTickFormat = scale.tickFormat && isFunction(scale.tickFormat) ?
-      scale.tickFormat() : (x) => x;
+    const scaleTickFormat =
+      scale.tickFormat && isFunction(scale.tickFormat) ? scale.tickFormat() : (x) => x;
     return defaultTickFormat || scaleTickFormat;
   } else if (tickFormat && Array.isArray(tickFormat)) {
     return (x, index) => tickFormat[index];
@@ -197,19 +214,27 @@ function getTickFormat(props, scale) {
 }
 
 function getStringTicks(props) {
-  const { stringMap } = props;
   const axis = getAxis(props);
-  const categories = Array.isArray(props.categories) ?
-    props.categories : props.categories && props.categories[axis];
-  const ticksFromCategories = categories && Collection.containsOnlyStrings(categories) ?
-    categories.map((tick) => stringMap[tick]) : undefined;
+  const currentAxis = getCurrentAxis(axis, props.horizontal);
+  const stringMap = props.stringMap && props.stringMap[currentAxis];
+  const categories = Array.isArray(props.categories)
+    ? props.categories
+    : props.categories && props.categories[axis];
+  const ticksFromCategories =
+    categories && Collection.containsOnlyStrings(categories)
+      ? categories.map((tick) => stringMap[tick])
+      : undefined;
   const ticksFromStringMap = stringMap && values(stringMap);
-  return ticksFromCategories && ticksFromCategories.length !== 0 ?
-    ticksFromCategories : ticksFromStringMap;
+  return ticksFromCategories && ticksFromCategories.length !== 0
+    ? ticksFromCategories
+    : ticksFromStringMap;
 }
 
 function getTickArray(props) {
-  const { tickValues, tickFormat, stringMap } = props;
+  const { tickValues, tickFormat } = props;
+  const axis = getAxis(props);
+  const currentAxis = getCurrentAxis(axis, props.horizontal);
+  const stringMap = props.stringMap && props.stringMap[currentAxis];
   const getTicksFromFormat = () => {
     if (!tickFormat || !Array.isArray(tickFormat)) {
       return undefined;
@@ -222,16 +247,14 @@ function getTickArray(props) {
     ticks = getStringTicks(props);
   }
   if (tickValues && Collection.containsStrings(tickValues)) {
-    ticks = stringMap ?
-      tickValues.map((tick) => stringMap[tick]) :
-      range(1, tickValues.length + 1);
+    ticks = stringMap ? tickValues.map((tick) => stringMap[tick]) : range(1, tickValues.length + 1);
   }
   const tickArray = ticks ? uniq(ticks) : getTicksFromFormat(props);
   const filterArray = (arr) => {
-    const axis = getAxis(props);
-    const domain = props.domain && props.domain[axis] || props.domain;
-    return Array.isArray(domain) ?
-      arr.filter((t) => t >= Math.min(...domain) && t <= Math.max(...domain)) : arr;
+    const domain = (props.domain && props.domain[axis]) || props.domain;
+    return Array.isArray(domain)
+      ? arr.filter((t) => t >= Math.min(...domain) && t <= Math.max(...domain))
+      : arr;
   };
   return Array.isArray(tickArray) && tickArray.length ? filterArray(tickArray) : undefined;
 }
@@ -253,8 +276,7 @@ function getTicks(props, scale, filterZero) {
     // eslint-disable-next-line no-magic-numbers
     const defaultTickCount = tickCount || 5;
     const scaleTicks = scale.ticks(defaultTickCount);
-    const tickArray = Array.isArray(scaleTicks) && scaleTicks.length ?
-      scaleTicks : scale.domain();
+    const tickArray = Array.isArray(scaleTicks) && scaleTicks.length ? scaleTicks : scale.domain();
     const ticks = downsampleTicks(tickArray, tickCount);
     if (filterZero) {
       const filteredTicks = includes(ticks, 0) ? without(ticks, 0) : ticks;
@@ -287,8 +309,10 @@ function getDomainFromData(props, axis) {
   const min = minDomain !== undefined ? minDomain : defaultMin;
   const max = maxDomain !== undefined ? maxDomain : defaultMax;
   const initialDomain = Domain.getDomainFromMinMax(min, max);
-  const domain = polar && axis === "x" && Math.abs(startAngle - endAngle) === 360 ?
-    Domain.getSymmetricDomain(initialDomain, ticks) : initialDomain;
+  const domain =
+    polar && axis === "x" && Math.abs(startAngle - endAngle) === 360
+      ? Domain.getSymmetricDomain(initialDomain, ticks)
+      : initialDomain;
   if (isVertical(props) && !polar) {
     domain.reverse();
   }
@@ -304,8 +328,38 @@ function getDomain(props, axis) {
   return Domain.createDomainFunction(getDomainFromData)(props, inherentAxis);
 }
 
+function getAxisValue(props, axis) {
+  if (!props.axisValue) {
+    return undefined;
+  }
+  const scaleAxis = axis === "x" ? "y" : "x";
+  const scale =
+    isObject(props.scale) && isFunction(props.scale[scaleAxis])
+      ? props.scale[scaleAxis]
+      : undefined;
+  if (!scale) {
+    return undefined;
+  }
+  const stringMapAxis = getCurrentAxis(axis, props.horizontal) === "x" ? "y" : "x";
+  const stringMap = isObject(props.stringMap) && props.stringMap[stringMapAxis];
+  const axisValue =
+    stringMap && typeof props.axisValue === "string" ? stringMap[props.axisValue] : props.axisValue;
+  return scale(axisValue);
+}
+
 export default {
-  getTicks, getTickFormat, getAxis, getAxisComponent, getAxisComponentsWithParent,
-  getOrientation, getCurrentAxis, findAxisComponents, getOrigin, getOriginSign, getDomain,
-  isVertical, stringTicks
+  getTicks,
+  getTickFormat,
+  getAxis,
+  getAxisComponent,
+  getAxisComponentsWithParent,
+  getOrientation,
+  getCurrentAxis,
+  findAxisComponents,
+  getOrigin,
+  getOriginSign,
+  getDomain,
+  isVertical,
+  stringTicks,
+  getAxisValue
 };

package/src/victory-util/collection.js

@@ -18,8 +18,7 @@ function containsNumbers(collection) {
 }
 
 function containsOnlyStrings(collection) {
-  return isNonEmptyArray(collection) &&
-    collection.every((value) => typeof value === "string");
+  return isNonEmptyArray(collection) && collection.every((value) => typeof value === "string");
 }
 
 function isArrayOfArrays(collection) {
@@ -32,16 +31,12 @@ function removeUndefined(arr) {
 
 function getMaxValue(arr, ...values) {
   const array = arr.concat(values);
-  return containsDates(array) ?
-    new Date(Math.max(...array)) :
-    Math.max(...array);
+  return containsDates(array) ? new Date(Math.max(...array)) : Math.max(...array);
 }
 
 function getMinValue(arr, ...values) {
   const array = arr.concat(values);
-  return containsDates(array) ?
-    new Date(Math.min(...array)) :
-    Math.min(...array);
+  return containsDates(array) ? new Date(Math.min(...array)) : Math.min(...array);
 }
 
 export default {

package/src/victory-util/common-props.js

@@ -5,13 +5,14 @@ const dataProps = {
   categories: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.string),
     PropTypes.shape({
-      x: PropTypes.arrayOf(PropTypes.string), y: PropTypes.arrayOf(PropTypes.string)
+      x: PropTypes.arrayOf(PropTypes.string),
+      y: PropTypes.arrayOf(PropTypes.string)
     })
   ]),
   data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   dataComponent: PropTypes.element,
   labelComponent: PropTypes.element,
-  labels: PropTypes.oneOfType([ PropTypes.func, PropTypes.array ]),
+  labels: PropTypes.oneOfType([PropTypes.func, PropTypes.array]),
   samples: CustomPropTypes.nonNegative,
   sortKey: PropTypes.oneOfType([
     PropTypes.func,
@@ -21,7 +22,9 @@ const dataProps = {
   ]),
   sortOrder: PropTypes.oneOf(["ascending", "descending"]),
   style: PropTypes.shape({
-    parent: PropTypes.object, data: PropTypes.object, labels: PropTypes.object
+    parent: PropTypes.object,
+    data: PropTypes.object,
+    labels: PropTypes.object
   }),
   x: PropTypes.oneOfType([
     PropTypes.func,
@@ -51,14 +54,16 @@ const baseProps = {
     PropTypes.shape({ x: CustomPropTypes.domain, y: CustomPropTypes.domain })
   ]),
   maxDomain: PropTypes.oneOfType([
-    PropTypes.number, PropTypes.instanceOf(Date),
+    PropTypes.number,
+    PropTypes.instanceOf(Date),
     PropTypes.shape({
       x: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Date)]),
       y: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Date)])
     })
   ]),
   minDomain: PropTypes.oneOfType([
-    PropTypes.number, PropTypes.instanceOf(Date),
+    PropTypes.number,
+    PropTypes.instanceOf(Date),
     PropTypes.shape({
       x: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Date)]),
       y: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Date)])
@@ -66,8 +71,8 @@ const baseProps = {
   ]),
   domainPadding: PropTypes.oneOfType([
     PropTypes.shape({
-      x: PropTypes.oneOfType([ PropTypes.number, PropTypes.arrayOf(PropTypes.number) ]),
-      y: PropTypes.oneOfType([ PropTypes.number, PropTypes.arrayOf(PropTypes.number) ])
+      x: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
+      y: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)])
     }),
     PropTypes.number,
     PropTypes.arrayOf(PropTypes.number)
@@ -77,32 +82,30 @@ const baseProps = {
     CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]),
     PropTypes.string
   ]),
-  events: PropTypes.arrayOf(PropTypes.shape({
-    target: PropTypes.oneOf(["data", "labels", "parent"]),
-    eventKey: PropTypes.oneOfType([
-      PropTypes.array,
-      CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]),
-      PropTypes.string
-    ]),
-    eventHandlers: PropTypes.object
-  })),
-  externalEventMutations: PropTypes.arrayOf(PropTypes.shape({
-    callback: PropTypes.function,
-    childName: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.array
-    ]),
-    eventKey: PropTypes.oneOfType([
-      PropTypes.array,
-      CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]),
-      PropTypes.string
-    ]),
-    mutation: PropTypes.function,
-    target: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.array
-    ])
-  })),
+  events: PropTypes.arrayOf(
+    PropTypes.shape({
+      target: PropTypes.oneOf(["data", "labels", "parent"]),
+      eventKey: PropTypes.oneOfType([
+        PropTypes.array,
+        CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]),
+        PropTypes.string
+      ]),
+      eventHandlers: PropTypes.object
+    })
+  ),
+  externalEventMutations: PropTypes.arrayOf(
+    PropTypes.shape({
+      callback: PropTypes.function,
+      childName: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+      eventKey: PropTypes.oneOfType([
+        PropTypes.array,
+        CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]),
+        PropTypes.string
+      ]),
+      mutation: PropTypes.function,
+      target: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
+    })
+  ),
   groupComponent: PropTypes.element,
   height: CustomPropTypes.nonNegative,
   name: PropTypes.string,
@@ -110,8 +113,10 @@ const baseProps = {
   padding: PropTypes.oneOfType([
     PropTypes.number,
     PropTypes.shape({
-      top: PropTypes.number, bottom: PropTypes.number,
-      left: PropTypes.number, right: PropTypes.number
+      top: PropTypes.number,
+      bottom: PropTypes.number,
+      left: PropTypes.number,
+      right: PropTypes.number
     })
   ]),
   polar: PropTypes.bool,
@@ -130,7 +135,8 @@ const baseProps = {
   singleQuadrantDomainPadding: PropTypes.oneOfType([
     PropTypes.bool,
     PropTypes.shape({
-      x: PropTypes.oneOfType([PropTypes.bool]), y: PropTypes.oneOfType([PropTypes.bool])
+      x: PropTypes.oneOfType([PropTypes.bool]),
+      y: PropTypes.oneOfType([PropTypes.bool])
     })
   ]),
   standalone: PropTypes.bool,