@pie-lib/graphing-module 1.8.6 → 1.8.8

package/module/index.js

@@ -1,7 +1,7 @@
-import {_dll_prop_types, _dll_react, _dll_material_ui__core_styles, _dll_pie_lib__render_ui, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_debug, _dll_material_ui__core, _dll_material_ui__core_styles_color_manipulator, _dll_material_ui__icons} from "../../shared-module@^1.5.15/module/index.js";
-import {_dll_pie_lib__editable_html} from "../../editable-html-module@^3.1.8/module/index.js";
-import {_dll_pie_lib__drag} from "../../drag-module@^1.0.67/module/index.js";
-import {_dll_pie_lib__config_ui} from "../../config-module@^2.1.15/module/index.js";
+import {_dll_prop_types, _dll_pie_lib__render_ui, _dll_material_ui__core_styles, _dll_react, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_debug, _dll_material_ui__core, _dll_material_ui__core_styles_color_manipulator, _dll_material_ui__icons} from "../../shared-module@^1.5.17/module/index.js";
+import {_dll_pie_lib__editable_html} from "../../editable-html-module@^3.1.10/module/index.js";
+import {_dll_pie_lib__drag} from "../../drag-module@^1.0.69/module/index.js";
+import {_dll_pie_lib__config_ui} from "../../config-module@^2.1.17/module/index.js";
 const PropTypes$D = _dll_prop_types;
 const BaseDomainRangeType = {
   min: PropTypes$D.number.isRequired,
@@ -819,6 +819,116 @@ var index$4 = Object.freeze({
   },
   customEvent: customEvent
 });
+const React$F = _dll_react;
+const {useState: useState$2} = _dll_react;
+const {color: color$j} = _dll_pie_lib__render_ui;
+const {Readable: Readable$3} = _dll_pie_lib__render_ui;
+const cn$4 = _dll_classnames;
+const {withStyles: withStyles$m} = _dll_material_ui__core_styles;
+const EditableHtml$2 = _dll_pie_lib__editable_html;
+const _jsxFileName$x = "/home/circleci/repo/packages/plot/src/label.jsx";
+const LabelComponent = props => {
+  const {classes, disabledLabel, graphHeight, graphWidth, isChartBottomLabel, isChartLeftLabel, placeholder, text, side, onChange} = props;
+  const [rotatedToHorizontal, setRotatedToHorizontal] = useState$2(false);
+  const activePlugins = ['bold', 'italic', 'underline', 'strikethrough', 'math'];
+  const chartValue = side === 'left' && isChartLeftLabel && graphHeight - 148;
+  const defaultStyle = {
+    width: chartValue || (side === 'left' || side === 'right' ? graphHeight - 8 : graphWidth - 8),
+    top: chartValue || side === 'left' && `${graphHeight - 8}px` || side === 'bottom' && `${graphHeight - 90}px` || 0,
+    left: side === 'right' && `${graphWidth - 8}px` || (isChartLeftLabel || isChartBottomLabel) && '50px' || 0
+  };
+  const rotatedStyle = {
+    width: graphWidth - 8,
+    top: side === 'right' && `${graphHeight - 22}px` || 0,
+    left: 0
+  };
+  const rotateLabel = () => !disabledLabel && (side === 'left' || side === 'right') && setRotatedToHorizontal(true);
+  return React$F.createElement(Readable$3, {
+    false: true,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$x,
+      lineNumber: 54
+    }
+  }, React$F.createElement('div', {
+    className: cn$4(classes.axisLabel, {
+      [classes.rotateLeftLabel]: side === 'left' && !rotatedToHorizontal,
+      [classes.rotateRightLabel]: side === 'right' && !rotatedToHorizontal,
+      [classes.editLabel]: rotatedToHorizontal,
+      [classes.customBottom]: isChartBottomLabel
+    }),
+    style: rotatedToHorizontal ? rotatedStyle : defaultStyle,
+    onClick: rotateLabel,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$x,
+      lineNumber: 55
+    }
+  }, disabledLabel ? React$F.createElement('div', {
+    className: classes.disabledLabel,
+    dangerouslySetInnerHTML: {
+      __html: text || ''
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$x,
+      lineNumber: 66
+    }
+  }) : React$F.createElement(EditableHtml$2, {
+    markup: text || '',
+    onChange: onChange,
+    placeholder: !disabledLabel && placeholder,
+    toolbarOpts: {
+      position: side === 'bottom' ? 'top' : 'bottom',
+      noBorder: true
+    },
+    disableScrollbar: true,
+    activePlugins: activePlugins,
+    onDone: () => setRotatedToHorizontal(false),
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$x,
+      lineNumber: 68
+    }
+  })));
+};
+var Label$1 = withStyles$m(theme => ({
+  label: {
+    fill: color$j.secondary()
+  },
+  axisLabel: {
+    fontSize: theme.typography.fontSize - 2,
+    textAlign: 'center',
+    margin: '4px',
+    padding: '4px 0'
+  },
+  disabledLabel: {
+    pointerEvents: 'none',
+    width: '100%'
+  },
+  editLabel: {
+    position: 'absolute',
+    backgroundColor: 'white',
+    borderRadius: '4px',
+    boxShadow: '0px 5px 8px rgba(0, 0, 0, 0.15)',
+    zIndex: 10
+  },
+  rotateLeftLabel: {
+    rotate: '-90deg',
+    transformOrigin: '0 0',
+    transformStyle: 'preserve-3d',
+    position: 'absolute'
+  },
+  rotateRightLabel: {
+    rotate: '90deg',
+    transformOrigin: '0 0',
+    transformStyle: 'preserve-3d',
+    position: 'absolute'
+  },
+  customBottom: {
+    position: 'absolute'
+  }
+}))(LabelComponent);
 const React$E = _dll_react;
 const {withStyles: withStyles$l} = _dll_material_ui__core_styles;
 const PropTypes$C = _dll_prop_types;
@@ -827,10 +937,32 @@ const {Readable: Readable$2} = _dll_pie_lib__render_ui;
 const cn$3 = _dll_classnames;
 const EditableHtml$1 = _dll_pie_lib__editable_html;
 const _jsxFileName$w = "/home/circleci/repo/packages/plot/src/root.jsx";
+function _optionalChain$1(ops) {
+  let lastAccessLHS = undefined;
+  let value = ops[0];
+  let i = 1;
+  while (i < ops.length) {
+    const op = ops[i];
+    const fn = ops[i + 1];
+    i += 2;
+    if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
+      return undefined;
+    }
+    if (op === 'access' || op === 'optionalAccess') {
+      lastAccessLHS = value;
+      value = fn(value);
+    } else if (op === 'call' || op === 'optionalCall') {
+      value = fn((...args) => value.call(lastAccessLHS, ...args));
+      lastAccessLHS = undefined;
+    }
+  }
+  return value;
+}
 class Root$1 extends React$E.Component {
   constructor(...args) {
     super(...args);
     Root$1.prototype.__init.call(this);
+    Root$1.prototype.__init2.call(this);
   }
   static __initStatic() {
     this.propTypes = {
@@ -872,15 +1004,32 @@ class Root$1 extends React$E.Component {
     const g = select(this.g);
     g.on('mousemove', null);
   }
+  __init2() {
+    this.onChangeLabel = (newValue, side) => {
+      const {labels, onChangeLabels, isChart} = this.props;
+      if (isChart) {
+        if (side === 'left') {
+          onChangeLabels('range', newValue);
+        } else {
+          onChangeLabels('domain', newValue);
+        }
+        return;
+      }
+      onChangeLabels({
+        ...labels,
+        [side]: newValue
+      });
+    };
+  }
   render() {
-    const {disabledTitle, graphProps, children, classes, onChangeTitle, thisIsChart, showLabels, showPixelGuides, showTitle, title, rootRef} = this.props;
+    const {disabledTitle, disabledLabels, labels, labelsPlaceholders, titlePlaceholder, graphProps, children, classes, defineChart, onChangeTitle, isChart, showLabels, showPixelGuides, showTitle, title, rootRef} = this.props;
     const {size: {width = 500, height = 500}, domain, range} = graphProps;
-    const padding = showLabels ? 70 : 40;
-    const extraPadding = showLabels ? 16 : 40;
-    const finalWidth = width + padding * 2 + (domain.padding || 0) * 2 + extraPadding;
-    const finalHeight = height + padding * 2 + (range.padding || 0) * 2;
+    const topPadding = 40;
+    const leftPadding = showLabels ? 80 : 60;
+    const finalWidth = width + leftPadding * 2 + (domain.padding || 0) * 2;
+    const finalHeight = height + topPadding * 2 + (range.padding || 0) * 2;
     const activeTitlePlugins = ['bold', 'italic', 'underline', 'strikethrough', 'math'];
-    const actualHeight = thisIsChart && showPixelGuides ? height - 80 : height;
+    const actualHeight = defineChart && showPixelGuides ? height - 150 : height;
     const nbOfVerticalLines = parseInt(width / 100);
     const nbOfHorizontalLines = parseInt(actualHeight / 100);
     const sideGridlinesPadding = parseInt(actualHeight % 100);
@@ -889,17 +1038,17 @@ class Root$1 extends React$E.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 96
+        lineNumber: 121
       }
     }, showPixelGuides && React$E.createElement('div', {
       className: classes.topPixelGuides,
       style: {
-        marginLeft: thisIsChart ? 10 : 20
+        marginLeft: isChart ? 60 : showLabels ? 30 : 10
       },
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 98
+        lineNumber: 123
       }
     }, [...Array(nbOfVerticalLines + 1).keys()].map(value => React$E.createElement(Readable$2, {
       false: true,
@@ -907,59 +1056,96 @@ class Root$1 extends React$E.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 100
+        lineNumber: 128
       }
     }, React$E.createElement('div', {
       className: classes.topPixelIndicator,
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 101
+        lineNumber: 129
       }
     }, React$E.createElement('div', {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 102
+        lineNumber: 130
       }
     }, value * 100, "px"), React$E.createElement('div', {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 103
+        lineNumber: 131
+      }
+    }, "|"))))), showTitle && (disabledTitle ? React$E.createElement('div', {
+      className: cn$3(classes.graphTitle, classes.disabledTitle),
+      dangerouslySetInnerHTML: {
+        __html: title || ''
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 139
       }
-    }, "|"))))), showTitle && React$E.createElement(EditableHtml$1, {
+    }) : React$E.createElement(EditableHtml$1, {
       className: cn$3({
-        [classes.disabledTitle]: disabledTitle
+        [classes.rightMargin]: showPixelGuides
       }, classes.graphTitle),
       markup: title || '',
-      width: finalWidth,
       onChange: onChangeTitle,
-      placeholder: !disabledTitle && 'Click here to add a title for this graph',
+      placeholder: defineChart && titlePlaceholder || !disabledTitle && 'Click here to add a title for this graph',
       toolbarOpts: {
         noBorder: true
       },
       activePlugins: activeTitlePlugins,
+      disableScrollbar: true,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 144
+      }
+    })), showLabels && !isChart && React$E.createElement(Label$1, {
+      side: "top",
+      text: labels.top,
+      disabledLabel: disabledLabels,
+      placeholder: _optionalChain$1([labelsPlaceholders, 'optionalAccess', _ => _.top]),
+      graphHeight: finalHeight,
+      graphWidth: finalWidth,
+      onChange: value => this.onChangeLabel(value, 'top'),
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 110
+        lineNumber: 158
       }
     }), React$E.createElement('div', {
       className: classes.wrapper,
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 125
+        lineNumber: 168
+      }
+    }, showLabels && React$E.createElement(Label$1, {
+      side: "left",
+      text: labels.left,
+      disabledLabel: disabledLabels,
+      placeholder: _optionalChain$1([labelsPlaceholders, 'optionalAccess', _2 => _2.left]),
+      graphHeight: finalHeight,
+      graphWidth: finalWidth,
+      isChartLeftLabel: isChart && defineChart,
+      onChange: value => this.onChangeLabel(value, 'left'),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 170
       }
-    }, React$E.createElement('svg', {
+    }), React$E.createElement('svg', {
       width: finalWidth,
       height: finalHeight,
-      className: classes.svg,
+      className: defineChart ? classes.defineChart : classes.chart,
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 126
+        lineNumber: 181
       }
     }, React$E.createElement('g', {
       ref: r => {
@@ -969,22 +1155,35 @@ class Root$1 extends React$E.Component {
         }
       },
       className: classes.graphBox,
-      transform: `translate(${padding}, ${padding})`,
+      transform: `translate(${leftPadding}, ${topPadding})`,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 186
+      }
+    }, children)), showLabels && !isChart && React$E.createElement(Label$1, {
+      side: "right",
+      text: labels.right,
+      disabledLabel: disabledLabels,
+      placeholder: _optionalChain$1([labelsPlaceholders, 'optionalAccess', _3 => _3.right]),
+      graphHeight: finalHeight,
+      graphWidth: finalWidth,
+      onChange: value => this.onChangeLabel(value, 'right'),
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 127
+        lineNumber: 200
       }
-    }, children)), showPixelGuides && React$E.createElement('div', {
+    }), showPixelGuides && React$E.createElement('div', {
       className: classes.sidePixelGuides,
       style: {
         paddingTop: sideGridlinesPadding,
-        marginTop: thisIsChart ? 25 : 60
+        marginTop: defineChart ? 25 : 31
       },
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 141
+        lineNumber: 211
       }
     }, [...Array(nbOfHorizontalLines + 1).keys()].reverse().map(value => React$E.createElement(Readable$2, {
       false: true,
@@ -992,16 +1191,30 @@ class Root$1 extends React$E.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 149
+        lineNumber: 219
       }
     }, React$E.createElement('div', {
       className: classes.sidePixelIndicator,
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 150
+        lineNumber: 220
+      }
+    }, "━ ", value * 100, "px"))))), showLabels && React$E.createElement(Label$1, {
+      side: "bottom",
+      text: labels.bottom,
+      disabledLabel: disabledLabels,
+      placeholder: _optionalChain$1([labelsPlaceholders, 'optionalAccess', _4 => _4.bottom]),
+      graphHeight: finalHeight,
+      graphWidth: finalWidth,
+      isChartBottomLabel: isChart && defineChart,
+      onChange: value => this.onChangeLabel(value, 'bottom'),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 227
       }
-    }, "━ ", value * 100, "px"))))));
+    }));
   }
 }
 Root$1.__initStatic();
@@ -1009,12 +1222,22 @@ const styles$9 = theme => ({
   root: {
     border: `solid 1px ${color$i.primaryLight()}`,
     color: color$i.text(),
-    backgroundColor: color$i.background()
+    backgroundColor: color$i.background(),
+    touchAction: 'none',
+    position: 'relative'
   },
   wrapper: {
-    display: 'flex'
+    display: 'flex',
+    position: 'relative'
   },
   svg: {},
+  defineChart: {
+    paddingLeft: '50px',
+    overflow: 'visible'
+  },
+  chart: {
+    overflow: 'visible'
+  },
   graphBox: {
     cursor: 'pointer',
     userSelect: 'none'
@@ -1028,6 +1251,9 @@ const styles$9 = theme => ({
   disabledTitle: {
     pointerEvents: 'none'
   },
+  rightMargin: {
+    marginRight: '74px'
+  },
   topPixelGuides: {
     display: 'flex',
     paddingTop: '6px'
@@ -5712,284 +5938,59 @@ var index$2 = Object.freeze({
   createGraphProps: create
 });
 const React$C = _dll_react;
+const cx$3 = _dll_classnames;
 const PropTypes$A = _dll_prop_types;
-const {withStyles: withStyles$k} = _dll_material_ui__core_styles;
-const {color: color$g} = _dll_pie_lib__render_ui;
-const {Readable: Readable$1} = _dll_pie_lib__render_ui;
-const cn$2 = _dll_classnames;
-const EditableHtml = _dll_pie_lib__editable_html;
-const _jsxFileName$u = "/home/circleci/repo/packages/graphing/src/labels.jsx";
-const rotations = {
-  left: -90,
-  top: 0,
-  bottom: 0,
-  right: 90
-};
-const getTransform = (side, width, height) => {
-  const t = (x, y, rotate) => `translate(${x}, ${y}), rotate(${rotate})`;
-  if (side === 'left') {
-    return t(-20, height / 2, rotations[side]);
-  }
-  if (side === 'right') {
-    return t(width + 30, height / 2, rotations[side]);
-  }
-  if (side === 'top') {
-    return t(width / 2, -20, rotations[side]);
-  }
-  if (side === 'bottom') {
-    return t(width / 2, height + 30, rotations[side]);
-  }
-};
-const getY = (side, height) => {
-  switch (side) {
-    case 'left':
-      return -height;
-    case 'top':
-      return -height;
-    case 'right':
-      return -height - 10;
-    default:
-      return -height + 10;
-  }
-};
-class RawLabel extends React$C.Component {
-  static __initStatic() {
-    this.propTypes = {
-      text: PropTypes$A.string,
-      side: PropTypes$A.string,
-      classes: PropTypes$A.object,
-      disabledLabel: PropTypes$A.bool,
-      placeholder: PropTypes$A.string,
-      graphProps: GraphPropsType.isRequired
-    };
-  }
-  static __initStatic2() {
-    this.defaultProps = {
-      onChange: () => {}
-    };
-  }
-  render() {
-    const {disabledLabel, placeholder, text, side, graphProps, classes, onChange} = this.props;
-    const {size, domain, range} = graphProps;
-    const totalHeight = (size.height || 500) + (range.padding || 0) * 2;
-    const totalWidth = (size.width || 500) + (domain.padding || 0) * 2;
-    const transform = getTransform(side, totalWidth, totalHeight);
-    const width = side === 'left' || side === 'right' ? totalHeight : totalWidth;
-    const height = 36;
-    const y = getY(side, height);
-    const finalHeight = side === 'bottom' ? height + 22 : height + 18;
-    const activePlugins = ['bold', 'italic', 'underline', 'strikethrough', 'math'];
-    return React$C.createElement('foreignObject', {
-      x: -(width / 2),
-      y: y,
-      width: width,
-      height: finalHeight,
-      transform: transform,
-      textAnchor: "middle",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$u,
-        lineNumber: 82
-      }
-    }, React$C.createElement(Readable$1, {
-      false: true,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$u,
-        lineNumber: 90
-      }
-    }, React$C.createElement(EditableHtml, {
-      className: cn$2({
-        [classes.bottomLabel]: side === 'bottom',
-        [classes.disabledAxisLabel]: disabledLabel
-      }, classes.axisLabel),
-      markup: text || '',
-      onChange: onChange,
-      placeholder: !disabledLabel && placeholder,
-      toolbarOpts: {
-        position: side === 'bottom' ? 'top' : 'bottom',
-        noBorder: true
-      },
-      activePlugins: activePlugins,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$u,
-        lineNumber: 91
+function _extends$6() {
+  _extends$6 = Object.assign || (function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
       }
-    })));
+    }
+    return target;
+  });
+  return _extends$6.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose$4(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
   }
+  return target;
 }
-RawLabel.__initStatic();
-RawLabel.__initStatic2();
-const Label = withStyles$k(theme => ({
-  label: {
-    fill: color$g.secondary()
-  },
-  axisLabel: {
-    fontSize: theme.typography.fontSize - 2,
-    textAlign: 'center',
-    padding: '0 4px'
-  },
-  disabledAxisLabel: {
-    pointerEvents: 'none'
-  },
-  bottomLabel: {
-    marginTop: '44px'
-  }
-}))(RawLabel);
-const LabelType = {
-  left: PropTypes$A.string,
-  top: PropTypes$A.string,
-  bottom: PropTypes$A.string,
-  right: PropTypes$A.string
-};
-class Labels extends React$C.Component {
-  constructor(...args) {
-    super(...args);
-    Labels.prototype.__init.call(this);
-  }
-  static __initStatic3() {
-    this.propTypes = {
-      classes: PropTypes$A.object,
-      className: PropTypes$A.string,
-      disabledLabels: PropTypes$A.bool,
-      placeholders: PropTypes$A.object,
-      value: PropTypes$A.shape(LabelType),
-      graphProps: PropTypes$A.object
-    };
-  }
-  static __initStatic4() {
-    this.defaultProps = {};
-  }
-  __init() {
-    this.onChangeLabel = (newValue, side) => {
-      const {value, onChange} = this.props;
-      const labels = {
-        ...value,
-        [side]: newValue
-      };
-      onChange(labels);
-    };
-  }
-  render() {
-    const {disabledLabels, placeholders = {}, value = {}, graphProps} = this.props;
-    return React$C.createElement(React$C.Fragment, {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$u,
-        lineNumber: 164
-      }
-    }, React$C.createElement(Label, {
-      key: "left",
-      side: "left",
-      text: value.left,
-      disabledLabel: disabledLabels,
-      placeholder: placeholders.left,
-      graphProps: graphProps,
-      onChange: value => this.onChangeLabel(value, 'left'),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$u,
-        lineNumber: 165
-      }
-    }), React$C.createElement(Label, {
-      key: "top",
-      side: "top",
-      text: value.top,
-      disabledLabel: disabledLabels,
-      placeholder: placeholders.top,
-      graphProps: graphProps,
-      onChange: value => this.onChangeLabel(value, 'top'),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$u,
-        lineNumber: 174
-      }
-    }), React$C.createElement(Label, {
-      key: "bottom",
-      side: "bottom",
-      text: value.bottom,
-      disabledLabel: disabledLabels,
-      placeholder: placeholders.bottom,
-      graphProps: graphProps,
-      onChange: value => this.onChangeLabel(value, 'bottom'),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$u,
-        lineNumber: 183
-      }
-    }), React$C.createElement(Label, {
-      key: "right",
-      side: "right",
-      text: value.right,
-      disabledLabel: disabledLabels,
-      placeholder: placeholders.right,
-      graphProps: graphProps,
-      onChange: value => this.onChangeLabel(value, 'right'),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$u,
-        lineNumber: 192
-      }
-    }));
-  }
-}
-Labels.__initStatic3();
-Labels.__initStatic4();
-const React$B = _dll_react;
-const cx$3 = _dll_classnames;
-const PropTypes$z = _dll_prop_types;
-function _extends$6() {
-  _extends$6 = Object.assign || (function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  });
-  return _extends$6.apply(this, arguments);
-}
-function _objectWithoutPropertiesLoose$4(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-function _objectWithoutProperties$4(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose$4(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
+function _objectWithoutProperties$4(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose$4(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
   }
   return target;
 }
 Group.propTypes = {
-  top: PropTypes$z.number,
-  left: PropTypes$z.number,
-  transform: PropTypes$z.string,
-  className: PropTypes$z.string,
-  children: PropTypes$z.any
+  top: PropTypes$A.number,
+  left: PropTypes$A.number,
+  transform: PropTypes$A.string,
+  className: PropTypes$A.string,
+  children: PropTypes$A.any
 };
 function Group(_ref) {
   var _ref$top = _ref.top, top = _ref$top === void 0 ? 0 : _ref$top, _ref$left = _ref.left, left = _ref$left === void 0 ? 0 : _ref$left, transform = _ref.transform, className = _ref.className, children = _ref.children, restProps = _objectWithoutProperties$4(_ref, ["top", "left", "transform", "className", "children"]);
-  return React$B.createElement("g", _extends$6({
+  return React$C.createElement("g", _extends$6({
     className: cx$3('vx-group', className),
     transform: transform || ("translate(").concat(left, ", ").concat(top, ")")
   }, restProps), children);
@@ -6252,9 +6253,9 @@ var Point$1 = (function () {
   }]);
   return Point;
 })();
-const React$A = _dll_react;
+const React$B = _dll_react;
 const cx$2 = _dll_classnames;
-const PropTypes$y = _dll_prop_types;
+const PropTypes$z = _dll_prop_types;
 function _extends$5() {
   _extends$5 = Object.assign || (function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -6297,47 +6298,47 @@ function _objectWithoutProperties$3(source, excluded) {
   return target;
 }
 ({
-  className: PropTypes$y.string,
-  data: PropTypes$y.any,
-  children: PropTypes$y.func,
-  innerRef: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.object]),
-  centroid: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  innerRadius: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  outerRadius: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  cornerRadius: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  startAngle: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  endAngle: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  padAngle: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  padRadius: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number])
+  className: PropTypes$z.string,
+  data: PropTypes$z.any,
+  children: PropTypes$z.func,
+  innerRef: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.object]),
+  centroid: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  innerRadius: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  outerRadius: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  cornerRadius: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  startAngle: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  endAngle: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  padAngle: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  padRadius: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number])
 });
 ({
-  className: PropTypes$y.string,
-  top: PropTypes$y.number,
-  left: PropTypes$y.number,
-  data: PropTypes$y.array,
-  centroid: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  innerRadius: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  outerRadius: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  cornerRadius: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  startAngle: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  endAngle: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  padAngle: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  padRadius: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  pieValue: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  pieSort: PropTypes$y.func,
-  pieSortValues: PropTypes$y.func,
-  children: PropTypes$y.func
+  className: PropTypes$z.string,
+  top: PropTypes$z.number,
+  left: PropTypes$z.number,
+  data: PropTypes$z.array,
+  centroid: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  innerRadius: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  outerRadius: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  cornerRadius: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  startAngle: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  endAngle: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  padAngle: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  padRadius: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  pieValue: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  pieSort: PropTypes$z.func,
+  pieSortValues: PropTypes$z.func,
+  children: PropTypes$z.func
 });
 Line$5.propTypes = {
-  className: PropTypes$y.string,
-  innerRef: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.object]),
-  from: PropTypes$y.shape({
-    x: PropTypes$y.number,
-    y: PropTypes$y.number
+  className: PropTypes$z.string,
+  innerRef: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.object]),
+  from: PropTypes$z.shape({
+    x: PropTypes$z.number,
+    y: PropTypes$z.number
   }),
-  to: PropTypes$y.shape({
-    x: PropTypes$y.number,
-    y: PropTypes$y.number
+  to: PropTypes$z.shape({
+    x: PropTypes$z.number,
+    y: PropTypes$z.number
   })
 };
 function Line$5(_ref) {
@@ -6348,7 +6349,7 @@ function Line$5(_ref) {
     x: 1,
     y: 1
   }) : _ref$to, _ref$fill = _ref.fill, fill = _ref$fill === void 0 ? 'transparent' : _ref$fill, _ref$className = _ref.className, className = _ref$className === void 0 ? '' : _ref$className, innerRef = _ref.innerRef, restProps = _objectWithoutProperties$3(_ref, ["from", "to", "fill", "className", "innerRef"]);
-  return React$A.createElement("line", _extends$5({
+  return React$B.createElement("line", _extends$5({
     ref: innerRef,
     className: cx$2('vx-line', className),
     x1: from.x,
@@ -6359,12 +6360,12 @@ function Line$5(_ref) {
   }, restProps));
 }
 LinePath$1.propTypes = {
-  data: PropTypes$y.array,
-  curve: PropTypes$y.func,
-  innerRef: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.object]),
-  defined: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.bool]),
-  x: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  y: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number])
+  data: PropTypes$z.array,
+  curve: PropTypes$z.func,
+  innerRef: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.object]),
+  defined: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.bool]),
+  x: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  y: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number])
 };
 function LinePath$1(_ref) {
   var children = _ref.children, data = _ref.data, x = _ref.x, y = _ref.y, _ref$fill = _ref.fill, fill = _ref$fill === void 0 ? 'transparent' : _ref$fill, className = _ref.className, curve = _ref.curve, innerRef = _ref.innerRef, _ref$defined = _ref.defined, defined = _ref$defined === void 0 ? function () {
@@ -6378,7 +6379,7 @@ function LinePath$1(_ref) {
   if (children) return children({
     path: path$$1
   });
-  return React$A.createElement("path", _extends$5({
+  return React$B.createElement("path", _extends$5({
     ref: innerRef,
     className: cx$2('vx-linepath', className),
     d: path$$1(data),
@@ -6386,275 +6387,275 @@ function LinePath$1(_ref) {
   }, restProps));
 }
 ({
-  className: PropTypes$y.string,
-  data: PropTypes$y.any,
-  curve: PropTypes$y.func,
-  angle: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  radius: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  innerRef: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.object])
+  className: PropTypes$z.string,
+  data: PropTypes$z.any,
+  curve: PropTypes$z.func,
+  angle: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  radius: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  innerRef: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.object])
 });
 ({
-  children: PropTypes$y.func,
-  className: PropTypes$y.string,
-  data: PropTypes$y.any,
-  defined: PropTypes$y.func,
-  curve: PropTypes$y.func,
-  innerRef: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.object]),
-  x: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  x0: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  x1: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  y: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  y0: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  y1: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number])
+  children: PropTypes$z.func,
+  className: PropTypes$z.string,
+  data: PropTypes$z.any,
+  defined: PropTypes$z.func,
+  curve: PropTypes$z.func,
+  innerRef: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.object]),
+  x: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  x0: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  x1: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  y: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  y0: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  y1: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number])
 });
 ({
-  children: PropTypes$y.func,
-  className: PropTypes$y.string,
-  data: PropTypes$y.any,
-  defined: PropTypes$y.func,
-  curve: PropTypes$y.func,
-  yScale: PropTypes$y.func,
-  innerRef: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.object]),
-  x: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  x0: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  x1: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  y1: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  y0: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number])
+  children: PropTypes$z.func,
+  className: PropTypes$z.string,
+  data: PropTypes$z.any,
+  defined: PropTypes$z.func,
+  curve: PropTypes$z.func,
+  yScale: PropTypes$z.func,
+  innerRef: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.object]),
+  x: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  x0: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  x1: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  y1: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  y0: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number])
 });
 ({
-  data: PropTypes$y.array.isRequired,
-  className: PropTypes$y.string,
-  top: PropTypes$y.number,
-  left: PropTypes$y.number,
-  curve: PropTypes$y.func,
-  color: PropTypes$y.func,
-  keys: PropTypes$y.array,
-  children: PropTypes$y.func,
-  x: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  x0: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  x1: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  y: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  y0: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  y1: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  value: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  defined: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.bool]),
-  order: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.array, PropTypes$y.string]),
-  offset: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.array, PropTypes$y.string])
+  data: PropTypes$z.array.isRequired,
+  className: PropTypes$z.string,
+  top: PropTypes$z.number,
+  left: PropTypes$z.number,
+  curve: PropTypes$z.func,
+  color: PropTypes$z.func,
+  keys: PropTypes$z.array,
+  children: PropTypes$z.func,
+  x: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  x0: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  x1: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  y: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  y0: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  y1: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  value: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  defined: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.bool]),
+  order: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.array, PropTypes$z.string]),
+  offset: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.array, PropTypes$z.string])
 });
 ({
-  className: PropTypes$y.string,
-  top: PropTypes$y.number,
-  left: PropTypes$y.number,
-  keys: PropTypes$y.array,
-  data: PropTypes$y.array,
-  curve: PropTypes$y.func,
-  color: PropTypes$y.func,
-  children: PropTypes$y.func,
-  x: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  x0: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  x1: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  y: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  y0: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  y1: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  value: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  defined: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.bool]),
-  order: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.array, PropTypes$y.string]),
-  offset: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.array, PropTypes$y.string])
+  className: PropTypes$z.string,
+  top: PropTypes$z.number,
+  left: PropTypes$z.number,
+  keys: PropTypes$z.array,
+  data: PropTypes$z.array,
+  curve: PropTypes$z.func,
+  color: PropTypes$z.func,
+  children: PropTypes$z.func,
+  x: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  x0: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  x1: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  y: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  y0: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  y1: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  value: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  defined: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.bool]),
+  order: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.array, PropTypes$z.string]),
+  offset: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.array, PropTypes$z.string])
 });
 ({
-  className: PropTypes$y.string,
-  innerRef: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.object])
+  className: PropTypes$z.string,
+  innerRef: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.object])
 });
 ({
-  data: PropTypes$y.array.isRequired,
-  x0: PropTypes$y.func.isRequired,
-  x0Scale: PropTypes$y.func.isRequired,
-  x1Scale: PropTypes$y.func.isRequired,
-  yScale: PropTypes$y.func.isRequired,
-  color: PropTypes$y.func.isRequired,
-  keys: PropTypes$y.array.isRequired,
-  height: PropTypes$y.number.isRequired,
-  className: PropTypes$y.string,
-  top: PropTypes$y.number,
-  left: PropTypes$y.number,
-  children: PropTypes$y.func
+  data: PropTypes$z.array.isRequired,
+  x0: PropTypes$z.func.isRequired,
+  x0Scale: PropTypes$z.func.isRequired,
+  x1Scale: PropTypes$z.func.isRequired,
+  yScale: PropTypes$z.func.isRequired,
+  color: PropTypes$z.func.isRequired,
+  keys: PropTypes$z.array.isRequired,
+  height: PropTypes$z.number.isRequired,
+  className: PropTypes$z.string,
+  top: PropTypes$z.number,
+  left: PropTypes$z.number,
+  children: PropTypes$z.func
 });
 ({
-  data: PropTypes$y.array.isRequired,
-  y0: PropTypes$y.func.isRequired,
-  y0Scale: PropTypes$y.func.isRequired,
-  y1Scale: PropTypes$y.func.isRequired,
-  xScale: PropTypes$y.func.isRequired,
-  color: PropTypes$y.func.isRequired,
-  keys: PropTypes$y.array.isRequired,
-  width: PropTypes$y.number.isRequired,
-  className: PropTypes$y.string,
-  x: PropTypes$y.func,
-  top: PropTypes$y.number,
-  left: PropTypes$y.number,
-  children: PropTypes$y.func
+  data: PropTypes$z.array.isRequired,
+  y0: PropTypes$z.func.isRequired,
+  y0Scale: PropTypes$z.func.isRequired,
+  y1Scale: PropTypes$z.func.isRequired,
+  xScale: PropTypes$z.func.isRequired,
+  color: PropTypes$z.func.isRequired,
+  keys: PropTypes$z.array.isRequired,
+  width: PropTypes$z.number.isRequired,
+  className: PropTypes$z.string,
+  x: PropTypes$z.func,
+  top: PropTypes$z.number,
+  left: PropTypes$z.number,
+  children: PropTypes$z.func
 });
 ({
-  data: PropTypes$y.array.isRequired,
-  x: PropTypes$y.func.isRequired,
-  xScale: PropTypes$y.func.isRequired,
-  yScale: PropTypes$y.func.isRequired,
-  color: PropTypes$y.func.isRequired,
-  keys: PropTypes$y.array.isRequired,
-  className: PropTypes$y.string,
-  top: PropTypes$y.number,
-  left: PropTypes$y.number,
-  children: PropTypes$y.func,
-  y0: PropTypes$y.func,
-  y1: PropTypes$y.func,
-  order: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.array, PropTypes$y.string]),
-  offset: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.array, PropTypes$y.string]),
-  value: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number])
+  data: PropTypes$z.array.isRequired,
+  x: PropTypes$z.func.isRequired,
+  xScale: PropTypes$z.func.isRequired,
+  yScale: PropTypes$z.func.isRequired,
+  color: PropTypes$z.func.isRequired,
+  keys: PropTypes$z.array.isRequired,
+  className: PropTypes$z.string,
+  top: PropTypes$z.number,
+  left: PropTypes$z.number,
+  children: PropTypes$z.func,
+  y0: PropTypes$z.func,
+  y1: PropTypes$z.func,
+  order: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.array, PropTypes$z.string]),
+  offset: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.array, PropTypes$z.string]),
+  value: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number])
 });
 ({
-  data: PropTypes$y.array.isRequired,
-  y: PropTypes$y.func.isRequired,
-  x0: PropTypes$y.func,
-  x1: PropTypes$y.func,
-  xScale: PropTypes$y.func.isRequired,
-  yScale: PropTypes$y.func.isRequired,
-  color: PropTypes$y.func.isRequired,
-  keys: PropTypes$y.array.isRequired,
-  className: PropTypes$y.string,
-  top: PropTypes$y.number,
-  left: PropTypes$y.number,
-  order: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.array, PropTypes$y.string]),
-  offset: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.array, PropTypes$y.string]),
-  value: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.number]),
-  children: PropTypes$y.func
+  data: PropTypes$z.array.isRequired,
+  y: PropTypes$z.func.isRequired,
+  x0: PropTypes$z.func,
+  x1: PropTypes$z.func,
+  xScale: PropTypes$z.func.isRequired,
+  yScale: PropTypes$z.func.isRequired,
+  color: PropTypes$z.func.isRequired,
+  keys: PropTypes$z.array.isRequired,
+  className: PropTypes$z.string,
+  top: PropTypes$z.number,
+  left: PropTypes$z.number,
+  order: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.array, PropTypes$z.string]),
+  offset: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.array, PropTypes$z.string]),
+  value: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.number]),
+  children: PropTypes$z.func
 });
 ({
-  innerRef: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.object]),
-  x: PropTypes$y.func,
-  y: PropTypes$y.func,
-  source: PropTypes$y.func,
-  target: PropTypes$y.func,
-  path: PropTypes$y.func,
-  children: PropTypes$y.func
+  innerRef: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.object]),
+  x: PropTypes$z.func,
+  y: PropTypes$z.func,
+  source: PropTypes$z.func,
+  target: PropTypes$z.func,
+  path: PropTypes$z.func,
+  children: PropTypes$z.func
 });
 ({
-  innerRef: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.object]),
-  x: PropTypes$y.func,
-  y: PropTypes$y.func,
-  source: PropTypes$y.func,
-  target: PropTypes$y.func,
-  path: PropTypes$y.func
+  innerRef: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.object]),
+  x: PropTypes$z.func,
+  y: PropTypes$z.func,
+  source: PropTypes$z.func,
+  target: PropTypes$z.func,
+  path: PropTypes$z.func
 });
 ({
-  innerRef: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.object]),
-  angle: PropTypes$y.func,
-  radius: PropTypes$y.func,
-  source: PropTypes$y.func,
-  target: PropTypes$y.func,
-  path: PropTypes$y.func,
-  children: PropTypes$y.func
+  innerRef: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.object]),
+  angle: PropTypes$z.func,
+  radius: PropTypes$z.func,
+  source: PropTypes$z.func,
+  target: PropTypes$z.func,
+  path: PropTypes$z.func,
+  children: PropTypes$z.func
 });
 ({
-  innerRef: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.object]),
-  percent: PropTypes$y.number,
-  x: PropTypes$y.func,
-  y: PropTypes$y.func,
-  source: PropTypes$y.func,
-  target: PropTypes$y.func,
-  path: PropTypes$y.func,
-  children: PropTypes$y.func
+  innerRef: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.object]),
+  percent: PropTypes$z.number,
+  x: PropTypes$z.func,
+  y: PropTypes$z.func,
+  source: PropTypes$z.func,
+  target: PropTypes$z.func,
+  path: PropTypes$z.func,
+  children: PropTypes$z.func
 });
 ({
-  innerRef: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.object]),
-  percent: PropTypes$y.number,
-  x: PropTypes$y.func,
-  y: PropTypes$y.func,
-  source: PropTypes$y.func,
-  target: PropTypes$y.func,
-  path: PropTypes$y.func,
-  children: PropTypes$y.func
+  innerRef: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.object]),
+  percent: PropTypes$z.number,
+  x: PropTypes$z.func,
+  y: PropTypes$z.func,
+  source: PropTypes$z.func,
+  target: PropTypes$z.func,
+  path: PropTypes$z.func,
+  children: PropTypes$z.func
 });
 ({
-  innerRef: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.object]),
-  percent: PropTypes$y.number,
-  x: PropTypes$y.func,
-  y: PropTypes$y.func,
-  source: PropTypes$y.func,
-  target: PropTypes$y.func,
-  path: PropTypes$y.func,
-  children: PropTypes$y.func
+  innerRef: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.object]),
+  percent: PropTypes$z.number,
+  x: PropTypes$z.func,
+  y: PropTypes$z.func,
+  source: PropTypes$z.func,
+  target: PropTypes$z.func,
+  path: PropTypes$z.func,
+  children: PropTypes$z.func
 });
 ({
-  innerRef: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.object]),
-  path: PropTypes$y.func,
-  x: PropTypes$y.func,
-  y: PropTypes$y.func,
-  source: PropTypes$y.func,
-  target: PropTypes$y.func,
-  children: PropTypes$y.func
+  innerRef: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.object]),
+  path: PropTypes$z.func,
+  x: PropTypes$z.func,
+  y: PropTypes$z.func,
+  source: PropTypes$z.func,
+  target: PropTypes$z.func,
+  children: PropTypes$z.func
 });
 ({
-  innerRef: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.object]),
-  path: PropTypes$y.func,
-  x: PropTypes$y.func,
-  y: PropTypes$y.func,
-  source: PropTypes$y.func,
-  target: PropTypes$y.func,
-  children: PropTypes$y.func
+  innerRef: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.object]),
+  path: PropTypes$z.func,
+  x: PropTypes$z.func,
+  y: PropTypes$z.func,
+  source: PropTypes$z.func,
+  target: PropTypes$z.func,
+  children: PropTypes$z.func
 });
 ({
-  innerRef: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.object]),
-  path: PropTypes$y.func,
-  x: PropTypes$y.func,
-  y: PropTypes$y.func,
-  source: PropTypes$y.func,
-  target: PropTypes$y.func,
-  children: PropTypes$y.func
+  innerRef: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.object]),
+  path: PropTypes$z.func,
+  x: PropTypes$z.func,
+  y: PropTypes$z.func,
+  source: PropTypes$z.func,
+  target: PropTypes$z.func,
+  children: PropTypes$z.func
 });
 ({
-  innerRef: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.object]),
-  percent: PropTypes$y.number,
-  x: PropTypes$y.func,
-  y: PropTypes$y.func,
-  source: PropTypes$y.func,
-  target: PropTypes$y.func,
-  path: PropTypes$y.func,
-  children: PropTypes$y.func
+  innerRef: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.object]),
+  percent: PropTypes$z.number,
+  x: PropTypes$z.func,
+  y: PropTypes$z.func,
+  source: PropTypes$z.func,
+  target: PropTypes$z.func,
+  path: PropTypes$z.func,
+  children: PropTypes$z.func
 });
 ({
-  innerRef: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.object]),
-  percent: PropTypes$y.number,
-  x: PropTypes$y.func,
-  y: PropTypes$y.func,
-  source: PropTypes$y.func,
-  target: PropTypes$y.func,
-  path: PropTypes$y.func,
-  children: PropTypes$y.func
+  innerRef: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.object]),
+  percent: PropTypes$z.number,
+  x: PropTypes$z.func,
+  y: PropTypes$z.func,
+  source: PropTypes$z.func,
+  target: PropTypes$z.func,
+  path: PropTypes$z.func,
+  children: PropTypes$z.func
 });
 ({
-  innerRef: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.object]),
-  x: PropTypes$y.func,
-  y: PropTypes$y.func,
-  source: PropTypes$y.func,
-  target: PropTypes$y.func,
-  path: PropTypes$y.func,
-  children: PropTypes$y.func
+  innerRef: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.object]),
+  x: PropTypes$z.func,
+  y: PropTypes$z.func,
+  source: PropTypes$z.func,
+  target: PropTypes$z.func,
+  path: PropTypes$z.func,
+  children: PropTypes$z.func
 });
 ({
-  sides: PropTypes$y.number.isRequired,
-  size: PropTypes$y.number.isRequired,
-  className: PropTypes$y.string,
-  rotate: PropTypes$y.number,
-  children: PropTypes$y.func,
-  innerRef: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.object]),
-  center: PropTypes$y.shape({
-    x: PropTypes$y.number,
-    y: PropTypes$y.number
+  sides: PropTypes$z.number.isRequired,
+  size: PropTypes$z.number.isRequired,
+  className: PropTypes$z.string,
+  rotate: PropTypes$z.number,
+  children: PropTypes$z.func,
+  innerRef: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.object]),
+  center: PropTypes$z.shape({
+    x: PropTypes$z.number,
+    y: PropTypes$z.number
   })
 });
 ({
-  className: PropTypes$y.string,
-  innerRef: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.object])
+  className: PropTypes$z.string,
+  innerRef: PropTypes$z.oneOfType([PropTypes$z.func, PropTypes$z.object])
 });
 var balancedMatch$1 = balanced$3;
 function balanced$3(a, b, str) {
@@ -7573,8 +7574,8 @@ function getUnitsInExpression(expression) {
   }
   return uniqueUnits;
 }
-const PropTypes$x = _dll_prop_types;
-const React$z = _dll_react;
+const PropTypes$y = _dll_prop_types;
+const React$A = _dll_react;
 const {Component: Component$a} = _dll_react;
 function _classCallCheck$1(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
@@ -8110,7 +8111,7 @@ var Text = (function (_Component) {
       if (transforms.length) {
         textProps.transform = transforms.join(' ');
       }
-      return React$z.createElement("svg", {
+      return React$A.createElement("svg", {
         ref: innerRef,
         x: dx,
         y: dy,
@@ -8118,10 +8119,10 @@ var Text = (function (_Component) {
         style: {
           overflow: 'visible'
         }
-      }, React$z.createElement("text", _extends$4({}, textProps, {
+      }, React$A.createElement("text", _extends$4({}, textProps, {
         textAnchor: textAnchor
       }), wordsByLines.map(function (line, index) {
-        return React$z.createElement("tspan", {
+        return React$A.createElement("tspan", {
           x: x,
           dy: index === 0 ? startDy : lineHeight,
           key: index
@@ -8143,21 +8144,21 @@ Text.defaultProps = {
   verticalAnchor: 'end'
 };
 Text.propTypes = {
-  scaleToFit: PropTypes$x.bool,
-  angle: PropTypes$x.number,
-  textAnchor: PropTypes$x.oneOf(['start', 'middle', 'end', 'inherit']),
-  verticalAnchor: PropTypes$x.oneOf(['start', 'middle', 'end']),
-  style: PropTypes$x.object,
-  innerRef: PropTypes$x.oneOfType([PropTypes$x.func, PropTypes$x.object]),
-  x: PropTypes$x.oneOfType([PropTypes$x.number, PropTypes$x.string]),
-  y: PropTypes$x.oneOfType([PropTypes$x.number, PropTypes$x.string]),
-  dx: PropTypes$x.oneOfType([PropTypes$x.number, PropTypes$x.string]),
-  dy: PropTypes$x.oneOfType([PropTypes$x.number, PropTypes$x.string]),
-  lineHeight: PropTypes$x.oneOfType([PropTypes$x.number, PropTypes$x.string]),
-  capHeight: PropTypes$x.oneOfType([PropTypes$x.number, PropTypes$x.string])
+  scaleToFit: PropTypes$y.bool,
+  angle: PropTypes$y.number,
+  textAnchor: PropTypes$y.oneOf(['start', 'middle', 'end', 'inherit']),
+  verticalAnchor: PropTypes$y.oneOf(['start', 'middle', 'end']),
+  style: PropTypes$y.object,
+  innerRef: PropTypes$y.oneOfType([PropTypes$y.func, PropTypes$y.object]),
+  x: PropTypes$y.oneOfType([PropTypes$y.number, PropTypes$y.string]),
+  y: PropTypes$y.oneOfType([PropTypes$y.number, PropTypes$y.string]),
+  dx: PropTypes$y.oneOfType([PropTypes$y.number, PropTypes$y.string]),
+  dy: PropTypes$y.oneOfType([PropTypes$y.number, PropTypes$y.string]),
+  lineHeight: PropTypes$y.oneOfType([PropTypes$y.number, PropTypes$y.string]),
+  capHeight: PropTypes$y.oneOfType([PropTypes$y.number, PropTypes$y.string])
 };
-const React$y = _dll_react;
-const PropTypes$w = _dll_prop_types;
+const React$z = _dll_react;
+const PropTypes$x = _dll_prop_types;
 const cx$1 = _dll_classnames;
 function _defineProperty(obj, key, value) {
   if ((key in obj)) {
@@ -8238,33 +8239,33 @@ function labelTransform(_ref) {
   };
 }
 var propTypes = {
-  axisClassName: PropTypes$w.string,
-  axisLineClassName: PropTypes$w.string,
-  hideAxisLine: PropTypes$w.bool,
-  hideTicks: PropTypes$w.bool,
-  hideZero: PropTypes$w.bool,
-  label: PropTypes$w.string,
-  labelClassName: PropTypes$w.string,
-  labelOffset: PropTypes$w.number,
-  labelProps: PropTypes$w.object,
-  left: PropTypes$w.number,
-  numTicks: PropTypes$w.number,
-  orientation: PropTypes$w.oneOf([ORIENT.top, ORIENT.right, ORIENT.bottom, ORIENT.left]),
-  rangePadding: PropTypes$w.number,
-  scale: PropTypes$w.func.isRequired,
-  stroke: PropTypes$w.string,
-  strokeWidth: PropTypes$w.number,
-  strokeDasharray: PropTypes$w.string,
-  tickClassName: PropTypes$w.string,
-  tickFormat: PropTypes$w.func,
-  tickLabelProps: PropTypes$w.func,
-  tickLength: PropTypes$w.number,
-  tickStroke: PropTypes$w.string,
-  tickTransform: PropTypes$w.string,
-  tickValues: PropTypes$w.array,
-  tickComponent: PropTypes$w.func,
-  top: PropTypes$w.number,
-  children: PropTypes$w.func
+  axisClassName: PropTypes$x.string,
+  axisLineClassName: PropTypes$x.string,
+  hideAxisLine: PropTypes$x.bool,
+  hideTicks: PropTypes$x.bool,
+  hideZero: PropTypes$x.bool,
+  label: PropTypes$x.string,
+  labelClassName: PropTypes$x.string,
+  labelOffset: PropTypes$x.number,
+  labelProps: PropTypes$x.object,
+  left: PropTypes$x.number,
+  numTicks: PropTypes$x.number,
+  orientation: PropTypes$x.oneOf([ORIENT.top, ORIENT.right, ORIENT.bottom, ORIENT.left]),
+  rangePadding: PropTypes$x.number,
+  scale: PropTypes$x.func.isRequired,
+  stroke: PropTypes$x.string,
+  strokeWidth: PropTypes$x.number,
+  strokeDasharray: PropTypes$x.string,
+  tickClassName: PropTypes$x.string,
+  tickFormat: PropTypes$x.func,
+  tickLabelProps: PropTypes$x.func,
+  tickLength: PropTypes$x.number,
+  tickStroke: PropTypes$x.string,
+  tickTransform: PropTypes$x.string,
+  tickValues: PropTypes$x.array,
+  tickComponent: PropTypes$x.func,
+  top: PropTypes$x.number,
+  children: PropTypes$x.func
 };
 function Axis(_ref) {
   var children = _ref.children, axisClassName = _ref.axisClassName, axisLineClassName = _ref.axisLineClassName, _ref$hideAxisLine = _ref.hideAxisLine, hideAxisLine = _ref$hideAxisLine === void 0 ? false : _ref$hideAxisLine, _ref$hideTicks = _ref.hideTicks, hideTicks = _ref$hideTicks === void 0 ? false : _ref$hideTicks, _ref$hideZero = _ref.hideZero, hideZero = _ref$hideZero === void 0 ? false : _ref$hideZero, _ref$label = _ref.label, label = _ref$label === void 0 ? '' : _ref$label, labelClassName = _ref.labelClassName, _ref$labelOffset = _ref.labelOffset, labelOffset = _ref$labelOffset === void 0 ? 14 : _ref$labelOffset, _ref$labelProps = _ref.labelProps, labelProps = _ref$labelProps === void 0 ? {
@@ -8302,7 +8303,7 @@ function Axis(_ref) {
   });
   var tickLabelFontSize = 10;
   if (!!children) {
-    return React$y.createElement(Group, {
+    return React$z.createElement(Group, {
       className: cx$1('vx-axis', axisClassName),
       top: top,
       left: left
@@ -8336,7 +8337,7 @@ function Axis(_ref) {
       })
     }));
   }
-  return React$y.createElement(Group, {
+  return React$z.createElement(Group, {
     className: cx$1('vx-axis', axisClassName),
     top: top,
     left: left
@@ -8352,11 +8353,11 @@ function Axis(_ref) {
     });
     var tickLabelPropsObj = tickLabelProps(val, index);
     tickLabelFontSize = Math.max(tickLabelFontSize, tickLabelPropsObj.fontSize || 0);
-    return React$y.createElement(Group, {
+    return React$z.createElement(Group, {
       key: ("vx-tick-").concat(val, "-").concat(index),
       className: cx$1('vx-axis-tick', tickClassName),
       transform: tickTransform
-    }, !hideTicks && React$y.createElement(Line$5, {
+    }, !hideTicks && React$z.createElement(Line$5, {
       from: tickFromPoint,
       to: tickToPoint,
       stroke: tickStroke
@@ -8364,18 +8365,18 @@ function Axis(_ref) {
       x: tickToPoint.x,
       y: tickToPoint.y + (horizontal && !isTop ? tickLabelFontSize : 0),
       formattedValue: format(val, index)
-    }, tickLabelPropsObj)) : React$y.createElement(Text, _extends$3({
+    }, tickLabelPropsObj)) : React$z.createElement(Text, _extends$3({
       x: tickToPoint.x,
       y: tickToPoint.y + (horizontal && !isTop ? tickLabelFontSize : 0)
     }, tickLabelPropsObj), format(val, index)));
-  }), !hideAxisLine && React$y.createElement(Line$5, {
+  }), !hideAxisLine && React$z.createElement(Line$5, {
     className: cx$1('vx-axis-line', axisLineClassName),
     from: axisFromPoint,
     to: axisToPoint,
     stroke: stroke,
     strokeWidth: strokeWidth,
     strokeDasharray: strokeDasharray
-  }), label && React$y.createElement(Text, _extends$3({
+  }), label && React$z.createElement(Text, _extends$3({
     className: cx$1('vx-axis-label', labelClassName)
   }, labelTransform({
     labelOffset: labelOffset,
@@ -8388,128 +8389,128 @@ function Axis(_ref) {
 }
 Axis.propTypes = propTypes;
 ({
-  axisClassName: PropTypes$w.string,
-  axisLineClassName: PropTypes$w.string,
-  hideAxisLine: PropTypes$w.bool,
-  hideTicks: PropTypes$w.bool,
-  hideZero: PropTypes$w.bool,
-  label: PropTypes$w.string,
-  labelClassName: PropTypes$w.string,
-  labelOffset: PropTypes$w.number,
-  labelProps: PropTypes$w.object,
-  left: PropTypes$w.number,
-  numTicks: PropTypes$w.number,
-  rangePadding: PropTypes$w.number,
-  scale: PropTypes$w.func.isRequired,
-  stroke: PropTypes$w.string,
-  strokeWidth: PropTypes$w.number,
-  strokeDasharray: PropTypes$w.string,
-  tickClassName: PropTypes$w.string,
-  tickFormat: PropTypes$w.func,
-  tickLabelProps: PropTypes$w.func,
-  tickLength: PropTypes$w.number,
-  tickStroke: PropTypes$w.string,
-  tickTransform: PropTypes$w.string,
-  tickValues: PropTypes$w.array,
-  tickComponent: PropTypes$w.func,
-  top: PropTypes$w.number,
-  children: PropTypes$w.func
+  axisClassName: PropTypes$x.string,
+  axisLineClassName: PropTypes$x.string,
+  hideAxisLine: PropTypes$x.bool,
+  hideTicks: PropTypes$x.bool,
+  hideZero: PropTypes$x.bool,
+  label: PropTypes$x.string,
+  labelClassName: PropTypes$x.string,
+  labelOffset: PropTypes$x.number,
+  labelProps: PropTypes$x.object,
+  left: PropTypes$x.number,
+  numTicks: PropTypes$x.number,
+  rangePadding: PropTypes$x.number,
+  scale: PropTypes$x.func.isRequired,
+  stroke: PropTypes$x.string,
+  strokeWidth: PropTypes$x.number,
+  strokeDasharray: PropTypes$x.string,
+  tickClassName: PropTypes$x.string,
+  tickFormat: PropTypes$x.func,
+  tickLabelProps: PropTypes$x.func,
+  tickLength: PropTypes$x.number,
+  tickStroke: PropTypes$x.string,
+  tickTransform: PropTypes$x.string,
+  tickValues: PropTypes$x.array,
+  tickComponent: PropTypes$x.func,
+  top: PropTypes$x.number,
+  children: PropTypes$x.func
 });
 ({
-  axisClassName: PropTypes$w.string,
-  axisLineClassName: PropTypes$w.string,
-  hideAxisLine: PropTypes$w.bool,
-  hideTicks: PropTypes$w.bool,
-  hideZero: PropTypes$w.bool,
-  label: PropTypes$w.string,
-  labelClassName: PropTypes$w.string,
-  labelOffset: PropTypes$w.number,
-  labelProps: PropTypes$w.object,
-  left: PropTypes$w.number,
-  numTicks: PropTypes$w.number,
-  rangePadding: PropTypes$w.number,
-  scale: PropTypes$w.func.isRequired,
-  stroke: PropTypes$w.string,
-  strokeWidth: PropTypes$w.number,
-  strokeDasharray: PropTypes$w.string,
-  tickClassName: PropTypes$w.string,
-  tickFormat: PropTypes$w.func,
-  tickLabelProps: PropTypes$w.func,
-  tickLength: PropTypes$w.number,
-  tickStroke: PropTypes$w.string,
-  tickTransform: PropTypes$w.string,
-  tickValues: PropTypes$w.array,
-  tickComponent: PropTypes$w.func,
-  top: PropTypes$w.number,
-  children: PropTypes$w.func
+  axisClassName: PropTypes$x.string,
+  axisLineClassName: PropTypes$x.string,
+  hideAxisLine: PropTypes$x.bool,
+  hideTicks: PropTypes$x.bool,
+  hideZero: PropTypes$x.bool,
+  label: PropTypes$x.string,
+  labelClassName: PropTypes$x.string,
+  labelOffset: PropTypes$x.number,
+  labelProps: PropTypes$x.object,
+  left: PropTypes$x.number,
+  numTicks: PropTypes$x.number,
+  rangePadding: PropTypes$x.number,
+  scale: PropTypes$x.func.isRequired,
+  stroke: PropTypes$x.string,
+  strokeWidth: PropTypes$x.number,
+  strokeDasharray: PropTypes$x.string,
+  tickClassName: PropTypes$x.string,
+  tickFormat: PropTypes$x.func,
+  tickLabelProps: PropTypes$x.func,
+  tickLength: PropTypes$x.number,
+  tickStroke: PropTypes$x.string,
+  tickTransform: PropTypes$x.string,
+  tickValues: PropTypes$x.array,
+  tickComponent: PropTypes$x.func,
+  top: PropTypes$x.number,
+  children: PropTypes$x.func
 });
 ({
-  axisClassName: PropTypes$w.string,
-  axisLineClassName: PropTypes$w.string,
-  hideAxisLine: PropTypes$w.bool,
-  hideTicks: PropTypes$w.bool,
-  hideZero: PropTypes$w.bool,
-  label: PropTypes$w.string,
-  labelClassName: PropTypes$w.string,
-  labelOffset: PropTypes$w.number,
-  labelProps: PropTypes$w.object,
-  left: PropTypes$w.number,
-  numTicks: PropTypes$w.number,
-  rangePadding: PropTypes$w.number,
-  scale: PropTypes$w.func.isRequired,
-  stroke: PropTypes$w.string,
-  strokeWidth: PropTypes$w.number,
-  strokeDasharray: PropTypes$w.string,
-  tickClassName: PropTypes$w.string,
-  tickFormat: PropTypes$w.func,
-  tickLabelProps: PropTypes$w.func,
-  tickLength: PropTypes$w.number,
-  tickStroke: PropTypes$w.string,
-  tickTransform: PropTypes$w.string,
-  tickValues: PropTypes$w.array,
-  tickComponent: PropTypes$w.func,
-  top: PropTypes$w.number,
-  children: PropTypes$w.func
+  axisClassName: PropTypes$x.string,
+  axisLineClassName: PropTypes$x.string,
+  hideAxisLine: PropTypes$x.bool,
+  hideTicks: PropTypes$x.bool,
+  hideZero: PropTypes$x.bool,
+  label: PropTypes$x.string,
+  labelClassName: PropTypes$x.string,
+  labelOffset: PropTypes$x.number,
+  labelProps: PropTypes$x.object,
+  left: PropTypes$x.number,
+  numTicks: PropTypes$x.number,
+  rangePadding: PropTypes$x.number,
+  scale: PropTypes$x.func.isRequired,
+  stroke: PropTypes$x.string,
+  strokeWidth: PropTypes$x.number,
+  strokeDasharray: PropTypes$x.string,
+  tickClassName: PropTypes$x.string,
+  tickFormat: PropTypes$x.func,
+  tickLabelProps: PropTypes$x.func,
+  tickLength: PropTypes$x.number,
+  tickStroke: PropTypes$x.string,
+  tickTransform: PropTypes$x.string,
+  tickValues: PropTypes$x.array,
+  tickComponent: PropTypes$x.func,
+  top: PropTypes$x.number,
+  children: PropTypes$x.func
 });
 ({
-  axisClassName: PropTypes$w.string,
-  axisLineClassName: PropTypes$w.string,
-  hideAxisLine: PropTypes$w.bool,
-  hideTicks: PropTypes$w.bool,
-  hideZero: PropTypes$w.bool,
-  label: PropTypes$w.string,
-  labelClassName: PropTypes$w.string,
-  labelOffset: PropTypes$w.number,
-  labelProps: PropTypes$w.object,
-  left: PropTypes$w.number,
-  numTicks: PropTypes$w.number,
-  rangePadding: PropTypes$w.number,
-  scale: PropTypes$w.func.isRequired,
-  stroke: PropTypes$w.string,
-  strokeWidth: PropTypes$w.number,
-  strokeDasharray: PropTypes$w.string,
-  tickClassName: PropTypes$w.string,
-  tickFormat: PropTypes$w.func,
-  tickLabelProps: PropTypes$w.func,
-  tickLength: PropTypes$w.number,
-  tickStroke: PropTypes$w.string,
-  tickTransform: PropTypes$w.string,
-  tickValues: PropTypes$w.array,
-  tickComponent: PropTypes$w.func,
-  top: PropTypes$w.number,
-  children: PropTypes$w.func
+  axisClassName: PropTypes$x.string,
+  axisLineClassName: PropTypes$x.string,
+  hideAxisLine: PropTypes$x.bool,
+  hideTicks: PropTypes$x.bool,
+  hideZero: PropTypes$x.bool,
+  label: PropTypes$x.string,
+  labelClassName: PropTypes$x.string,
+  labelOffset: PropTypes$x.number,
+  labelProps: PropTypes$x.object,
+  left: PropTypes$x.number,
+  numTicks: PropTypes$x.number,
+  rangePadding: PropTypes$x.number,
+  scale: PropTypes$x.func.isRequired,
+  stroke: PropTypes$x.string,
+  strokeWidth: PropTypes$x.number,
+  strokeDasharray: PropTypes$x.string,
+  tickClassName: PropTypes$x.string,
+  tickFormat: PropTypes$x.func,
+  tickLabelProps: PropTypes$x.func,
+  tickLength: PropTypes$x.number,
+  tickStroke: PropTypes$x.string,
+  tickTransform: PropTypes$x.string,
+  tickValues: PropTypes$x.array,
+  tickComponent: PropTypes$x.func,
+  top: PropTypes$x.number,
+  children: PropTypes$x.func
 });
-const React$x = _dll_react;
-const PropTypes$v = _dll_prop_types;
+const React$y = _dll_react;
+const PropTypes$w = _dll_prop_types;
 const classNames$f = _dll_classnames;
-const {withStyles: withStyles$j} = _dll_material_ui__core_styles;
-const _jsxFileName$t = "/home/circleci/repo/packages/graphing/src/axis/arrow.jsx";
+const {withStyles: withStyles$k} = _dll_material_ui__core_styles;
+const _jsxFileName$u = "/home/circleci/repo/packages/graphing/src/axis/arrow.jsx";
 const style = {
   root: {
     fill: 'var(--arrow-color, black)'
   }
 };
-class Arrow$2 extends React$x.Component {
+class Arrow$2 extends React$y.Component {
   render() {
     const {x, y, classes, className, scale} = this.props;
     const names = classNames$f(classes.root, className);
@@ -8530,24 +8531,24 @@ class Arrow$2 extends React$x.Component {
     if (direction === 'down') {
       transform = getTransform(xv, yv + 15, 270);
     }
-    return React$x.createElement('path', {
+    return React$y.createElement('path', {
       d: "m 0,0 8,-5 0,10 -8,-5",
       transform: transform,
       className: names,
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$u,
         lineNumber: 43
       }
     });
   }
 }
 Arrow$2.propTypes = {
-  y: PropTypes$v.number,
-  x: PropTypes$v.number,
-  direction: PropTypes$v.oneOf(['left', 'right', 'up', 'down']),
-  classes: PropTypes$v.object.isRequired,
-  className: PropTypes$v.string,
+  y: PropTypes$w.number,
+  x: PropTypes$w.number,
+  direction: PropTypes$w.oneOf(['left', 'right', 'up', 'down']),
+  classes: PropTypes$w.object.isRequired,
+  className: PropTypes$w.string,
   scale: ScaleType.isRequired
 };
 Arrow$2.defaultProps = {
@@ -8555,7 +8556,7 @@ Arrow$2.defaultProps = {
   x: 0,
   direction: 'left'
 };
-var Arrow$3 = withStyles$j(style)(Arrow$2);
+var Arrow$3 = withStyles$k(style)(Arrow$2);
 const {head: head} = _dll_lodash;
 const {tail: tail} = _dll_lodash;
 const {isEqual: isEqual$6} = _dll_lodash;
@@ -8706,15 +8707,15 @@ const isDuplicatedMark = (mark, marks, oldMark) => {
   });
   return !!duplicated;
 };
-const React$w = _dll_react;
-const PropTypes$u = _dll_prop_types;
-const {withStyles: withStyles$i} = _dll_material_ui__core;
-const {color: color$f} = _dll_pie_lib__render_ui;
-const {Readable: Readable} = _dll_pie_lib__render_ui;
-const _jsxFileName$s = "/home/circleci/repo/packages/graphing/src/axis/axes.jsx";
+const React$x = _dll_react;
+const PropTypes$v = _dll_prop_types;
+const {withStyles: withStyles$j} = _dll_material_ui__core;
+const {color: color$g} = _dll_pie_lib__render_ui;
+const {Readable: Readable$1} = _dll_pie_lib__render_ui;
+const _jsxFileName$t = "/home/circleci/repo/packages/graphing/src/axis/axes.jsx";
 const AxisPropTypes = {
-  includeArrows: PropTypes$u.object,
-  graphProps: PropTypes$u.object
+  includeArrows: PropTypes$v.object,
+  graphProps: PropTypes$v.object
 };
 const AxisDefaultProps = {
   includeArrows: {
@@ -8726,16 +8727,16 @@ const AxisDefaultProps = {
 };
 const axisStyles = theme => ({
   line: {
-    stroke: color$f.primary(),
+    stroke: color$g.primary(),
     strokeWidth: 5
   },
   arrow: {
-    fill: color$f.primary()
+    fill: color$g.primary()
   },
   tick: {
-    fill: color$f.primary(),
+    fill: color$g.primary(),
     '& > line': {
-      stroke: color$f.primary()
+      stroke: color$g.primary()
     }
   },
   labelFontSize: {
@@ -8765,11 +8766,11 @@ const sharedValues = (firstNegativeX, firstNegativeY, distanceFromOriginToFirstN
   return result;
 };
 const firstNegativeValue = interval => (interval || []).find(element => element < 0);
-class RawXAxis extends React$w.Component {
+class RawXAxis extends React$x.Component {
   static __initStatic() {
     this.propTypes = {
       ...AxisPropTypes,
-      classes: PropTypes$u.object,
+      classes: PropTypes$v.object,
       graphProps: GraphPropsType.isRequired
     };
   }
@@ -8793,13 +8794,13 @@ class RawXAxis extends React$w.Component {
     const necessaryRows = countWords(domain.axisLabel);
     const longestWord = findLongestWord(domain.axisLabel);
     const necessaryWidth = amountToIncreaseWidth(longestWord) + 2;
-    return React$w.createElement(React$w.Fragment, {
+    return React$x.createElement(React$x.Fragment, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$t,
         lineNumber: 129
       }
-    }, React$w.createElement(Axis, {
+    }, React$x.createElement(Axis, {
       axisLineClassName: classes.line,
       scale: scale.x,
       top: scale.y(0),
@@ -8812,10 +8813,10 @@ class RawXAxis extends React$w.Component {
       tickValues: tickValues,
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$t,
         lineNumber: 130
       }
-    }), includeArrows && includeArrows.left && React$w.createElement(Arrow$3, {
+    }), includeArrows && includeArrows.left && React$x.createElement(Arrow$3, {
       direction: "left",
       x: domain.min,
       y: 0,
@@ -8823,10 +8824,10 @@ class RawXAxis extends React$w.Component {
       scale: scale,
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$t,
         lineNumber: 143
       }
-    }), includeArrows && includeArrows.right && React$w.createElement(Arrow$3, {
+    }), includeArrows && includeArrows.right && React$x.createElement(Arrow$3, {
       direction: "right",
       x: domain.max,
       y: 0,
@@ -8834,27 +8835,27 @@ class RawXAxis extends React$w.Component {
       scale: scale,
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$t,
         lineNumber: 146
       }
-    }), domain.axisLabel && React$w.createElement('foreignObject', {
+    }), domain.axisLabel && React$x.createElement('foreignObject', {
       x: size.width + 17,
       y: scale.y(0) - 9,
       width: necessaryWidth,
       height: 20 * necessaryRows,
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$t,
         lineNumber: 149
       }
-    }, React$w.createElement('div', {
+    }, React$x.createElement('div', {
       dangerouslySetInnerHTML: {
         __html: domain.axisLabel
       },
       className: classes.labelFontSize,
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$t,
         lineNumber: 155
       }
     })));
@@ -8862,8 +8863,8 @@ class RawXAxis extends React$w.Component {
 }
 RawXAxis.__initStatic();
 RawXAxis.__initStatic2();
-const XAxis = withStyles$i(axisStyles)(RawXAxis);
-class RawYAxis extends React$w.Component {
+const XAxis = withStyles$j(axisStyles)(RawXAxis);
+class RawYAxis extends React$x.Component {
   static __initStatic3() {
     this.propTypes = {
       ...AxisPropTypes,
@@ -8878,13 +8879,13 @@ class RawYAxis extends React$w.Component {
     const {scale, range, size} = graphProps || ({});
     const necessaryWidth = range.axisLabel ? amountToIncreaseWidth(range.axisLabel.length) : 0;
     const customTickFormat = value => skipValues && skipValues.indexOf(value) >= 0 ? '' : value;
-    return React$w.createElement(React$w.Fragment, {
+    return React$x.createElement(React$x.Fragment, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$t,
         lineNumber: 184
       }
-    }, React$w.createElement(Axis, {
+    }, React$x.createElement(Axis, {
       axisLineClassName: classes.line,
       orientation: 'left',
       scale: scale.y,
@@ -8913,10 +8914,10 @@ class RawYAxis extends React$w.Component {
       tickValues: rowTickValues,
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$t,
         lineNumber: 185
       }
-    }), includeArrows && includeArrows.down && React$w.createElement(Arrow$3, {
+    }), includeArrows && includeArrows.down && React$x.createElement(Arrow$3, {
       direction: "down",
       x: 0,
       y: range.min,
@@ -8924,10 +8925,10 @@ class RawYAxis extends React$w.Component {
       scale: scale,
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$t,
         lineNumber: 214
       }
-    }), includeArrows && includeArrows.up && React$w.createElement(Arrow$3, {
+    }), includeArrows && includeArrows.up && React$x.createElement(Arrow$3, {
       direction: "up",
       x: 0,
       y: range.max,
@@ -8935,34 +8936,34 @@ class RawYAxis extends React$w.Component {
       scale: scale,
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$t,
         lineNumber: 217
       }
-    }), range.axisLabel && React$w.createElement('foreignObject', {
+    }), range.axisLabel && React$x.createElement('foreignObject', {
       x: scale.x(0) - necessaryWidth / 2,
       y: -33,
       width: necessaryWidth,
       height: "20",
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$t,
         lineNumber: 220
       }
-    }, React$w.createElement(Readable, {
+    }, React$x.createElement(Readable$1, {
       false: true,
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$t,
         lineNumber: 226
       }
-    }, React$w.createElement('div', {
+    }, React$x.createElement('div', {
       dangerouslySetInnerHTML: {
         __html: range.axisLabel
       },
       className: classes.axisLabelHolder,
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$t,
         lineNumber: 227
       }
     }))));
@@ -8970,8 +8971,8 @@ class RawYAxis extends React$w.Component {
 }
 RawYAxis.__initStatic3();
 RawYAxis.__initStatic4();
-const YAxis = withStyles$i(axisStyles)(RawYAxis);
-class Axes extends React$w.Component {
+const YAxis = withStyles$j(axisStyles)(RawYAxis);
+class Axes extends React$x.Component {
   constructor(...args) {
     super(...args);
     Axes.prototype.__init.call(this);
@@ -8980,7 +8981,7 @@ class Axes extends React$w.Component {
   static __initStatic5() {
     this.propTypes = {
       ...AxisPropTypes,
-      classes: PropTypes$u.object,
+      classes: PropTypes$v.object,
       graphProps: GraphPropsType.isRequired
     };
   }
@@ -9033,13 +9034,13 @@ class Axes extends React$w.Component {
     const deltaAllowance = 6;
     const dy = 25;
     const skipValues = sharedValues(firstNegativeX, firstNegativeY, distanceFromOriginToFirstNegativeX, distanceFromOriginToFirstNegativeY, deltaAllowance, dy);
-    return React$w.createElement(React$w.Fragment, {
+    return React$x.createElement(React$x.Fragment, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$t,
         lineNumber: 308
       }
-    }, range.min <= 0 ? React$w.createElement(XAxis, {
+    }, range.min <= 0 ? React$x.createElement(XAxis, {
       ...this.props,
       skipValues: skipValues,
       columnTicksValues: columnTicksValues,
@@ -9047,17 +9048,17 @@ class Axes extends React$w.Component {
       dy: dy,
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$t,
         lineNumber: 310
       }
-    }) : null, domain.min <= 0 ? React$w.createElement(YAxis, {
+    }) : null, domain.min <= 0 ? React$x.createElement(YAxis, {
       ...this.props,
       skipValues: skipValues,
       rowTickValues: rowTickValues,
       distanceFromOriginToFirstNegativeX: distanceFromOriginToFirstNegativeX,
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$t,
         lineNumber: 319
       }
     }) : null);
@@ -9065,9 +9066,9 @@ class Axes extends React$w.Component {
 }
 Axes.__initStatic5();
 Axes.__initStatic6();
-const React$v = _dll_react;
+const React$w = _dll_react;
 const cx = _dll_classnames;
-const PropTypes$t = _dll_prop_types;
+const PropTypes$u = _dll_prop_types;
 function _extends$2() {
   _extends$2 = Object.assign || (function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -9110,24 +9111,24 @@ function _objectWithoutProperties$1(source, excluded) {
   return target;
 }
 Rows.propTypes = {
-  top: PropTypes$t.number,
-  left: PropTypes$t.number,
-  className: PropTypes$t.string,
-  stroke: PropTypes$t.string,
-  strokeWidth: PropTypes$t.oneOfType([PropTypes$t.string, PropTypes$t.number]),
-  strokeDasharray: PropTypes$t.string,
-  numTicks: PropTypes$t.number,
-  lineStyle: PropTypes$t.object,
-  offset: PropTypes$t.number,
-  scale: PropTypes$t.func.isRequired,
-  width: PropTypes$t.number.isRequired,
-  tickValues: PropTypes$t.array
+  top: PropTypes$u.number,
+  left: PropTypes$u.number,
+  className: PropTypes$u.string,
+  stroke: PropTypes$u.string,
+  strokeWidth: PropTypes$u.oneOfType([PropTypes$u.string, PropTypes$u.number]),
+  strokeDasharray: PropTypes$u.string,
+  numTicks: PropTypes$u.number,
+  lineStyle: PropTypes$u.object,
+  offset: PropTypes$u.number,
+  scale: PropTypes$u.func.isRequired,
+  width: PropTypes$u.number.isRequired,
+  tickValues: PropTypes$u.array
 };
 function Rows(_ref) {
   var _ref$top = _ref.top, top = _ref$top === void 0 ? 0 : _ref$top, _ref$left = _ref.left, left = _ref$left === void 0 ? 0 : _ref$left, scale = _ref.scale, width = _ref.width, _ref$stroke = _ref.stroke, stroke = _ref$stroke === void 0 ? '#eaf0f6' : _ref$stroke, _ref$strokeWidth = _ref.strokeWidth, strokeWidth = _ref$strokeWidth === void 0 ? 1 : _ref$strokeWidth, strokeDasharray = _ref.strokeDasharray, className = _ref.className, _ref$numTicks = _ref.numTicks, numTicks = _ref$numTicks === void 0 ? 10 : _ref$numTicks, lineStyle = _ref.lineStyle, offset = _ref.offset, tickValues = _ref.tickValues, restProps = _objectWithoutProperties$1(_ref, ["top", "left", "scale", "width", "stroke", "strokeWidth", "strokeDasharray", "className", "numTicks", "lineStyle", "offset", "tickValues"]);
   var ticks = scale.ticks ? scale.ticks(numTicks) : scale.domain();
   if (tickValues) ticks = tickValues;
-  return React$v.createElement(Group, {
+  return React$w.createElement(Group, {
     className: cx('vx-rows', className),
     top: top,
     left: left
@@ -9141,7 +9142,7 @@ function Rows(_ref) {
       x: width,
       y: y
     });
-    return React$v.createElement(Line$5, _extends$2({
+    return React$w.createElement(Line$5, _extends$2({
       key: ("row-line-").concat(d, "-").concat(i),
       from: fromPoint,
       to: toPoint,
@@ -9153,24 +9154,24 @@ function Rows(_ref) {
   }));
 }
 Columns.propTypes = {
-  top: PropTypes$t.number,
-  left: PropTypes$t.number,
-  className: PropTypes$t.string,
-  stroke: PropTypes$t.string,
-  strokeWidth: PropTypes$t.oneOfType([PropTypes$t.string, PropTypes$t.number]),
-  strokeDasharray: PropTypes$t.string,
-  numTicks: PropTypes$t.number,
-  lineStyle: PropTypes$t.object,
-  offset: PropTypes$t.number,
-  scale: PropTypes$t.func.isRequired,
-  height: PropTypes$t.number.isRequired,
-  tickValues: PropTypes$t.array
+  top: PropTypes$u.number,
+  left: PropTypes$u.number,
+  className: PropTypes$u.string,
+  stroke: PropTypes$u.string,
+  strokeWidth: PropTypes$u.oneOfType([PropTypes$u.string, PropTypes$u.number]),
+  strokeDasharray: PropTypes$u.string,
+  numTicks: PropTypes$u.number,
+  lineStyle: PropTypes$u.object,
+  offset: PropTypes$u.number,
+  scale: PropTypes$u.func.isRequired,
+  height: PropTypes$u.number.isRequired,
+  tickValues: PropTypes$u.array
 };
 function Columns(_ref) {
   var _ref$top = _ref.top, top = _ref$top === void 0 ? 0 : _ref$top, _ref$left = _ref.left, left = _ref$left === void 0 ? 0 : _ref$left, scale = _ref.scale, height = _ref.height, _ref$stroke = _ref.stroke, stroke = _ref$stroke === void 0 ? '#eaf0f6' : _ref$stroke, _ref$strokeWidth = _ref.strokeWidth, strokeWidth = _ref$strokeWidth === void 0 ? 1 : _ref$strokeWidth, strokeDasharray = _ref.strokeDasharray, className = _ref.className, _ref$numTicks = _ref.numTicks, numTicks = _ref$numTicks === void 0 ? 10 : _ref$numTicks, lineStyle = _ref.lineStyle, offset = _ref.offset, tickValues = _ref.tickValues, restProps = _objectWithoutProperties$1(_ref, ["top", "left", "scale", "height", "stroke", "strokeWidth", "strokeDasharray", "className", "numTicks", "lineStyle", "offset", "tickValues"]);
   var ticks = scale.ticks ? scale.ticks(numTicks) : scale.domain();
   if (tickValues) ticks = tickValues;
-  return React$v.createElement(Group, {
+  return React$w.createElement(Group, {
     className: cx('vx-columns', className),
     top: top,
     left: left
@@ -9184,7 +9185,7 @@ function Columns(_ref) {
       x: x,
       y: height
     });
-    return React$v.createElement(Line$5, _extends$2({
+    return React$w.createElement(Line$5, _extends$2({
       key: ("column-line-").concat(d, "-").concat(i),
       from: fromPoint,
       to: toPoint,
@@ -9196,32 +9197,32 @@ function Columns(_ref) {
   }));
 }
 Grid$2.propTypes = {
-  top: PropTypes$t.number,
-  left: PropTypes$t.number,
-  className: PropTypes$t.string,
-  stroke: PropTypes$t.string,
-  strokeWidth: PropTypes$t.oneOfType([PropTypes$t.string, PropTypes$t.number]),
-  strokeDasharray: PropTypes$t.string,
-  numTicksRows: PropTypes$t.number,
-  numTicksColumns: PropTypes$t.number,
-  rowLineStyle: PropTypes$t.object,
-  columnLineStyle: PropTypes$t.object,
-  xOffset: PropTypes$t.number,
-  yOffset: PropTypes$t.number,
-  xScale: PropTypes$t.func.isRequired,
-  yScale: PropTypes$t.func.isRequired,
-  height: PropTypes$t.number.isRequired,
-  width: PropTypes$t.number.isRequired,
-  rowTickValues: PropTypes$t.array,
-  columnTickValues: PropTypes$t.array
+  top: PropTypes$u.number,
+  left: PropTypes$u.number,
+  className: PropTypes$u.string,
+  stroke: PropTypes$u.string,
+  strokeWidth: PropTypes$u.oneOfType([PropTypes$u.string, PropTypes$u.number]),
+  strokeDasharray: PropTypes$u.string,
+  numTicksRows: PropTypes$u.number,
+  numTicksColumns: PropTypes$u.number,
+  rowLineStyle: PropTypes$u.object,
+  columnLineStyle: PropTypes$u.object,
+  xOffset: PropTypes$u.number,
+  yOffset: PropTypes$u.number,
+  xScale: PropTypes$u.func.isRequired,
+  yScale: PropTypes$u.func.isRequired,
+  height: PropTypes$u.number.isRequired,
+  width: PropTypes$u.number.isRequired,
+  rowTickValues: PropTypes$u.array,
+  columnTickValues: PropTypes$u.array
 };
 function Grid$2(_ref) {
   var top = _ref.top, left = _ref.left, xScale = _ref.xScale, yScale = _ref.yScale, width = _ref.width, height = _ref.height, className = _ref.className, stroke = _ref.stroke, strokeWidth = _ref.strokeWidth, strokeDasharray = _ref.strokeDasharray, numTicksRows = _ref.numTicksRows, numTicksColumns = _ref.numTicksColumns, rowLineStyle = _ref.rowLineStyle, columnLineStyle = _ref.columnLineStyle, xOffset = _ref.xOffset, yOffset = _ref.yOffset, rowTickValues = _ref.rowTickValues, columnTickValues = _ref.columnTickValues, restProps = _objectWithoutProperties$1(_ref, ["top", "left", "xScale", "yScale", "width", "height", "className", "stroke", "strokeWidth", "strokeDasharray", "numTicksRows", "numTicksColumns", "rowLineStyle", "columnLineStyle", "xOffset", "yOffset", "rowTickValues", "columnTickValues"]);
-  return React$v.createElement(Group, {
+  return React$w.createElement(Group, {
     className: cx('vx-grid', className),
     top: top,
     left: left
-  }, React$v.createElement(Rows, _extends$2({
+  }, React$w.createElement(Rows, _extends$2({
     className: className,
     scale: yScale,
     width: width,
@@ -9232,7 +9233,7 @@ function Grid$2(_ref) {
     style: rowLineStyle,
     offset: yOffset,
     tickValues: rowTickValues
-  }, restProps)), React$v.createElement(Columns, _extends$2({
+  }, restProps)), React$w.createElement(Columns, _extends$2({
     className: className,
     scale: xScale,
     height: height,
@@ -9245,21 +9246,21 @@ function Grid$2(_ref) {
     tickValues: columnTickValues
   }, restProps)));
 }
-const React$u = _dll_react;
-const PropTypes$s = _dll_prop_types;
-const {color: color$e} = _dll_pie_lib__render_ui;
-const {withStyles: withStyles$h} = _dll_material_ui__core_styles;
-const _jsxFileName$r = "/home/circleci/repo/packages/graphing/src/grid.jsx";
-class Grid extends React$u.Component {
+const React$v = _dll_react;
+const PropTypes$t = _dll_prop_types;
+const {color: color$f} = _dll_pie_lib__render_ui;
+const {withStyles: withStyles$i} = _dll_material_ui__core_styles;
+const _jsxFileName$s = "/home/circleci/repo/packages/graphing/src/grid.jsx";
+class Grid extends React$v.Component {
   constructor(...args) {
     super(...args);
     Grid.prototype.__init.call(this);
   }
   static __initStatic() {
     this.propTypes = {
-      disabled: PropTypes$s.bool,
-      disabledAdditionalGrid: PropTypes$s.bool,
-      classes: PropTypes$s.object.isRequired,
+      disabled: PropTypes$t.bool,
+      disabledAdditionalGrid: PropTypes$t.bool,
+      classes: PropTypes$t.object.isRequired,
       graphProps: GraphPropsType.isRequired
     };
   }
@@ -9300,7 +9301,7 @@ class Grid extends React$u.Component {
     const rowTickValues = getTickValues(range);
     const columnTickValues = getTickValues(domain);
     const {rowTickLabelValues, columnTickLabelValues, rowStrokeDasharray, columnStrokeDasharray, displayAdditionalGrid} = this.getAdditionalGridProps(rowTickValues, columnTickValues);
-    return React$u.createElement(React$u.Fragment, null, React$u.createElement(Grid$2, {
+    return React$v.createElement(React$v.Fragment, null, React$v.createElement(Grid$2, {
       innerRef: r => this.grid = r,
       xScale: scale.x,
       yScale: scale.y,
@@ -9311,40 +9312,265 @@ class Grid extends React$u.Component {
       columnTickValues: columnTickValues,
       __self: this,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$s,
         lineNumber: 102
       }
-    }), displayAdditionalGrid && React$u.createElement(React$u.Fragment, null, React$u.createElement(Rows, {
+    }), displayAdditionalGrid && React$v.createElement(React$v.Fragment, null, React$v.createElement(Rows, {
       scale: scale.y,
       width: width,
       tickValues: rowTickLabelValues,
-      stroke: color$e.primary(),
+      stroke: color$f.primary(),
       strokeDasharray: rowStrokeDasharray,
       __self: this,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$s,
         lineNumber: 114
       }
-    }), React$u.createElement(Columns, {
+    }), React$v.createElement(Columns, {
       scale: scale.x,
       height: height,
       tickValues: columnTickLabelValues,
-      stroke: color$e.primary(),
+      stroke: color$f.primary(),
       strokeDasharray: columnStrokeDasharray,
       __self: this,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$s,
         lineNumber: 121
       }
     })));
   }
 }
 Grid.__initStatic();
-var Grid$1 = withStyles$h(() => ({
+var Grid$1 = withStyles$i(() => ({
   grid: {
     stroke: 'purple'
   }
 }))(Grid);
+const React$u = _dll_react;
+const PropTypes$s = _dll_prop_types;
+const {withStyles: withStyles$h} = _dll_material_ui__core_styles;
+const {color: color$e} = _dll_pie_lib__render_ui;
+const {Readable: Readable} = _dll_pie_lib__render_ui;
+const cn$2 = _dll_classnames;
+const EditableHtml = _dll_pie_lib__editable_html;
+const _jsxFileName$r = "/home/circleci/repo/packages/graphing/src/labels.jsx";
+const rotations = {
+  left: -90,
+  top: 0,
+  bottom: 0,
+  right: 90
+};
+const getTransform = (side, width, height) => {
+  const t = (x, y, rotate) => `translate(${x}, ${y}), rotate(${rotate})`;
+  if (side === 'left') {
+    return t(-20, height / 2, rotations[side]);
+  }
+  if (side === 'right') {
+    return t(width + 30, height / 2, rotations[side]);
+  }
+  if (side === 'top') {
+    return t(width / 2, -20, rotations[side]);
+  }
+  if (side === 'bottom') {
+    return t(width / 2, height + 30, rotations[side]);
+  }
+};
+const getY = (side, height) => {
+  switch (side) {
+    case 'left':
+      return -height;
+    case 'top':
+      return -height;
+    case 'right':
+      return -height - 10;
+    default:
+      return -height + 10;
+  }
+};
+class RawLabel extends React$u.Component {
+  static __initStatic() {
+    this.propTypes = {
+      text: PropTypes$s.string,
+      side: PropTypes$s.string,
+      classes: PropTypes$s.object,
+      disabledLabel: PropTypes$s.bool,
+      placeholder: PropTypes$s.string,
+      graphProps: GraphPropsType.isRequired
+    };
+  }
+  static __initStatic2() {
+    this.defaultProps = {
+      onChange: () => {}
+    };
+  }
+  render() {
+    const {disabledLabel, placeholder, text, side, graphProps, classes, onChange} = this.props;
+    const {size, domain, range} = graphProps;
+    const totalHeight = (size.height || 500) + (range.padding || 0) * 2;
+    const totalWidth = (size.width || 500) + (domain.padding || 0) * 2;
+    const transform = getTransform(side, totalWidth, totalHeight);
+    const width = side === 'left' || side === 'right' ? totalHeight : totalWidth;
+    const height = 36;
+    const y = getY(side, height);
+    const finalHeight = side === 'bottom' ? height + 22 : height + 18;
+    const activePlugins = ['bold', 'italic', 'underline', 'strikethrough', 'math'];
+    return React$u.createElement('foreignObject', {
+      x: -(width / 2),
+      y: y,
+      width: width,
+      height: finalHeight,
+      transform: transform,
+      textAnchor: "middle",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$r,
+        lineNumber: 82
+      }
+    }, React$u.createElement(Readable, {
+      false: true,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$r,
+        lineNumber: 90
+      }
+    }, React$u.createElement(EditableHtml, {
+      className: cn$2({
+        [classes.bottomLabel]: side === 'bottom',
+        [classes.disabledAxisLabel]: disabledLabel
+      }, classes.axisLabel),
+      markup: text || '',
+      onChange: onChange,
+      placeholder: !disabledLabel && placeholder,
+      toolbarOpts: {
+        position: side === 'bottom' ? 'top' : 'bottom',
+        noBorder: true
+      },
+      activePlugins: activePlugins,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$r,
+        lineNumber: 91
+      }
+    })));
+  }
+}
+RawLabel.__initStatic();
+RawLabel.__initStatic2();
+const Label = withStyles$h(theme => ({
+  label: {
+    fill: color$e.secondary()
+  },
+  axisLabel: {
+    fontSize: theme.typography.fontSize - 2,
+    textAlign: 'center',
+    padding: '0 4px'
+  },
+  disabledAxisLabel: {
+    pointerEvents: 'none'
+  },
+  bottomLabel: {
+    marginTop: '44px'
+  }
+}))(RawLabel);
+const LabelType = {
+  left: PropTypes$s.string,
+  top: PropTypes$s.string,
+  bottom: PropTypes$s.string,
+  right: PropTypes$s.string
+};
+class Labels extends React$u.Component {
+  constructor(...args) {
+    super(...args);
+    Labels.prototype.__init.call(this);
+  }
+  static __initStatic3() {
+    this.propTypes = {
+      classes: PropTypes$s.object,
+      className: PropTypes$s.string,
+      disabledLabels: PropTypes$s.bool,
+      placeholders: PropTypes$s.object,
+      value: PropTypes$s.shape(LabelType),
+      graphProps: PropTypes$s.object
+    };
+  }
+  static __initStatic4() {
+    this.defaultProps = {};
+  }
+  __init() {
+    this.onChangeLabel = (newValue, side) => {
+      const {value, onChange} = this.props;
+      const labels = {
+        ...value,
+        [side]: newValue
+      };
+      onChange(labels);
+    };
+  }
+  render() {
+    const {disabledLabels, placeholders = {}, value = {}, graphProps} = this.props;
+    return React$u.createElement(React$u.Fragment, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$r,
+        lineNumber: 164
+      }
+    }, React$u.createElement(Label, {
+      key: "left",
+      side: "left",
+      text: value.left,
+      disabledLabel: disabledLabels,
+      placeholder: placeholders.left,
+      graphProps: graphProps,
+      onChange: value => this.onChangeLabel(value, 'left'),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$r,
+        lineNumber: 165
+      }
+    }), React$u.createElement(Label, {
+      key: "top",
+      side: "top",
+      text: value.top,
+      disabledLabel: disabledLabels,
+      placeholder: placeholders.top,
+      graphProps: graphProps,
+      onChange: value => this.onChangeLabel(value, 'top'),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$r,
+        lineNumber: 174
+      }
+    }), React$u.createElement(Label, {
+      key: "bottom",
+      side: "bottom",
+      text: value.bottom,
+      disabledLabel: disabledLabels,
+      placeholder: placeholders.bottom,
+      graphProps: graphProps,
+      onChange: value => this.onChangeLabel(value, 'bottom'),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$r,
+        lineNumber: 183
+      }
+    }), React$u.createElement(Label, {
+      key: "right",
+      side: "right",
+      text: value.right,
+      disabledLabel: disabledLabels,
+      placeholder: placeholders.right,
+      graphProps: graphProps,
+      onChange: value => this.onChangeLabel(value, 'right'),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$r,
+        lineNumber: 192
+      }
+    }));
+  }
+}
+Labels.__initStatic3();
+Labels.__initStatic4();
 const React$t = _dll_react;
 const PropTypes$r = _dll_prop_types;
 const _jsxFileName$q = "/home/circleci/repo/packages/graphing/src/bg.jsx";
@@ -9584,31 +9810,35 @@ class Graph extends React$s.Component {
     return React$s.createElement(Root$2, {
       rootRef: r => this.rootNode = r,
       disabledTitle: disabledTitle,
+      disabledLabels: disabledLabels,
+      labels: labels,
+      labelsPlaceholders: labelsPlaceholders || ({}),
       showPixelGuides: showPixelGuides,
       showLabels: showLabels,
       showTitle: showTitle,
       title: title,
       titlePlaceholder: titlePlaceholder,
       onChangeTitle: onChangeTitle,
+      onChangeLabels: onChangeLabels,
       ...common,
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 188
+        lineNumber: 187
       }
     }, React$s.createElement('g', {
       transform: domain && domain.padding && domain.range ? `translate(${domain.padding}, ${range.padding})` : undefined,
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 199
+        lineNumber: 202
       }
     }, React$s.createElement(Grid$1, {
       ...common,
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 206
+        lineNumber: 209
       }
     }), React$s.createElement(Axes, {
       ...axesSettings,
@@ -9616,7 +9846,7 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 207
+        lineNumber: 210
       }
     }), React$s.createElement(Bg, {
       ...size,
@@ -9625,14 +9855,14 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 208
+        lineNumber: 211
       }
     }), React$s.createElement('mask', {
       id: "myMask",
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 209
+        lineNumber: 212
       }
     }, React$s.createElement('rect', {
       ...maskSize,
@@ -9640,7 +9870,7 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 210
+        lineNumber: 213
       }
     }), " "), React$s.createElement('g', {
       id: "marks",
@@ -9648,7 +9878,7 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 213
+        lineNumber: 216
       }
     }, (backgroundMarks || []).map((m, index) => {
       const Component = this.getComponent(m);
@@ -9665,7 +9895,7 @@ class Graph extends React$s.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName$p,
-          lineNumber: 219
+          lineNumber: 222
         }
       });
     }), marks.map((m, index) => {
@@ -9686,7 +9916,7 @@ class Graph extends React$s.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName$p,
-          lineNumber: 233
+          lineNumber: 236
         }
       });
     }), React$s.createElement('foreignObject', {
@@ -9700,20 +9930,9 @@ class Graph extends React$s.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 249
-      }
-    }))), showLabels && React$s.createElement(Labels, {
-      disabledLabels: disabledLabels,
-      placeholders: labelsPlaceholders,
-      value: labels,
-      onChange: onChangeLabels,
-      ...common,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$p,
-        lineNumber: 259
+        lineNumber: 252
       }
-    }));
+    }))));
   }
 }
 Graph.__initStatic();
@@ -15685,8 +15904,8 @@ GridSetup.propTypes = {
   gridValues: PropTypes.object,
   includeAxes: PropTypes.bool,
   labelValues: PropTypes.object,
-  onChange: PropTypes.function,
-  onChangeView: PropTypes.function,
+  onChange: PropTypes.func,
+  onChangeView: PropTypes.func,
   range: PropTypes.object,
   size: PropTypes.object,
   sizeConstraints: PropTypes.object,