@pie-lib/plot 2.23.1-next.0 → 2.24.1

package/esm/index.js

@@ -0,0 +1,1278 @@
+import React, { useState } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { mouse, select, clientPoint } from 'd3-selection';
+import cn from 'classnames';
+import { color, Readable } from '@pie-lib/render-ui';
+import EditableHtml from '@pie-lib/editable-html';
+import invariant from 'invariant';
+import range from 'lodash/range';
+import Point from '@mapbox/point-geometry';
+import head from 'lodash/head';
+import tail from 'lodash/tail';
+import isEqual from 'lodash/isEqual';
+import Draggable, { DraggableCore } from 'react-draggable';
+import debug from 'debug';
+import isFunction from 'lodash/isFunction';
+import { scaleLinear } from 'd3-scale';
+
+function _extends() {
+  _extends = 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.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(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;
+}
+
+const BaseDomainRangeType = {
+  min: PropTypes.number.isRequired,
+  max: PropTypes.number.isRequired,
+  step: PropTypes.number
+};
+const DomainType = PropTypes.shape(BaseDomainRangeType);
+const RangeType = PropTypes.shape(BaseDomainRangeType);
+const SizeType = PropTypes.shape({
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired
+});
+const PointType = PropTypes.shape({
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired
+});
+const ChildrenType = PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired;
+const ScaleType = PropTypes.shape({
+  x: PropTypes.func.isRequired,
+  y: PropTypes.func.isRequired
+});
+const SnapType = PropTypes.shape({
+  x: PropTypes.func.isRequired,
+  y: PropTypes.func.isRequired
+});
+const GraphPropsType = PropTypes.shape({
+  scale: ScaleType.isRequired,
+  snap: SnapType.isRequired,
+  domain: DomainType.isRequired,
+  range: RangeType.isRequired,
+  size: SizeType.isRequired
+});
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  BaseDomainRangeType: BaseDomainRangeType,
+  ChildrenType: ChildrenType,
+  DomainType: DomainType,
+  GraphPropsType: GraphPropsType,
+  PointType: PointType,
+  RangeType: RangeType,
+  ScaleType: ScaleType,
+  SizeType: SizeType,
+  SnapType: SnapType
+});
+
+const xy = (x, y) => ({
+  x,
+  y
+});
+const buildSizeArray = (size, padding) => {
+  padding = Number.isFinite(padding) ? Math.max(padding, 0) : 0;
+  invariant(padding < size, 'padding must be less than size');
+  const half = Math.round(padding * 0.5);
+  return [half, size - half];
+};
+const tickCount = (min, max, step) => {
+  invariant(min < max, 'min must be less than max');
+  const size = Math.abs(min - max);
+  return Math.round(size / step);
+};
+function getInterval(domain, ticks) {
+  const {
+    min,
+    max
+  } = domain;
+  const {
+    major,
+    minor
+  } = ticks;
+
+  if (min >= max) {
+    throw new Error(`min is > max: ${min} > ${max}`);
+  }
+
+  const distance = max - min;
+  const minorTicks = minor > 0 ? minor + 1 : 1;
+  const normalizedMajor = major - 1;
+
+  if (isNaN(normalizedMajor)) {
+    throw new Error('Tick Frequency must be 2 or higher');
+  }
+
+  if (normalizedMajor <= 0) {
+    throw new Error('Tick Frequency must be 2 or higher');
+  }
+
+  const divider = normalizedMajor * minorTicks;
+  const raw = distance / divider;
+  return parseFloat(Number(raw).toFixed(4));
+}
+
+const mkRange = (min, max, interval) => {
+  const raw = range(min, max, interval);
+  /* Fix the last step due to rounding errors */
+
+  raw.splice(raw.length, 1, max);
+  return raw;
+};
+
+function snapTo(min, max, interval, value) {
+  if (value >= max) {
+    return max;
+  }
+
+  if (value <= min) {
+    return min;
+  }
+
+  let rng = mkRange(min, max, interval);
+  rng = rng.filter(v => {
+    return Math.abs(value - v) <= interval;
+  });
+  return rng.length && rng.reduce((prev, curr) => {
+    const currentDistance = Math.abs(curr - value);
+    const previousDistance = Math.abs(prev - value);
+    return currentDistance <= previousDistance ? curr : prev;
+  });
+}
+function buildTickModel(domain, ticks, interval, scaleFn) {
+  const rng = mkRange(domain.min, domain.max, interval);
+  return rng.map((r, index) => {
+    const isMajor = index % (ticks.minor + 1) === 0;
+    return {
+      value: r,
+      major: isMajor,
+      x: scaleFn(r)
+    };
+  });
+}
+const polygonToArea = points => {
+  const h = head(points);
+  const area = {
+    left: h.x,
+    top: h.y,
+    bottom: h.y,
+    right: h.x
+  };
+  return tail(points).reduce((a, p) => {
+    a.left = Math.min(a.left, p.x);
+    a.top = Math.max(a.top, p.y);
+    a.bottom = Math.min(a.bottom, p.y);
+    a.right = Math.max(a.right, p.x);
+    return a;
+  }, area);
+};
+const lineToArea = (from, to) => {
+  const left = Math.min(from.x, to.x);
+  const top = Math.max(from.y, to.y);
+  const bottom = Math.min(from.y, to.y);
+  const right = Math.max(from.x, to.x);
+  return {
+    left,
+    top,
+    bottom,
+    right
+  };
+};
+const bounds = (area, domain, range) => {
+  return {
+    left: domain.min - area.left,
+    right: Math.abs(area.right - domain.max),
+    top: Math.abs(area.top - range.max),
+    bottom: range.min - area.bottom
+  };
+};
+const point = o => new Point(o.x, o.y);
+const getDelta = (from, to) => {
+  return point(to).sub(point(from));
+};
+const bandKey = (d, index) => `${index}-${d.label || '-'}`;
+const isDomainRangeEqual = (graphProps, nextGraphProps) => {
+  return isEqual(graphProps.domain, nextGraphProps.domain) && isEqual(graphProps.range, nextGraphProps.range);
+}; // findLongestWord is also used in graphing
+
+const findLongestWord = label => {
+  let longestWord = (label || '').replace(/<[^>]+>/g, '').split(' ').sort((a, b) => b.length - a.length);
+  return longestWord[0].length;
+}; // amountToIncreaseWidth is also used in graphing
+
+const amountToIncreaseWidth = longestWord => {
+  if (!longestWord) {
+    return 0;
+  }
+
+  return longestWord * 20;
+};
+const extractTextFromHTML = htmlString => {
+  var _doc$body;
+
+  const parser = new DOMParser();
+  const doc = parser == null ? void 0 : parser.parseFromString(htmlString, 'text/html');
+  return (doc == null ? void 0 : (_doc$body = doc.body) == null ? void 0 : _doc$body.textContent) || '';
+};
+const isEmptyObject = obj => {
+  return obj && Object.keys(obj).length === 0 && obj.constructor === Object;
+};
+const isEmptyString = str => {
+  return typeof str === 'string' && str.trim() === '';
+};
+
+var utils = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  amountToIncreaseWidth: amountToIncreaseWidth,
+  bandKey: bandKey,
+  bounds: bounds,
+  buildSizeArray: buildSizeArray,
+  buildTickModel: buildTickModel,
+  extractTextFromHTML: extractTextFromHTML,
+  findLongestWord: findLongestWord,
+  getDelta: getDelta,
+  getInterval: getInterval,
+  isDomainRangeEqual: isDomainRangeEqual,
+  isEmptyObject: isEmptyObject,
+  isEmptyString: isEmptyString,
+  lineToArea: lineToArea,
+  point: point,
+  polygonToArea: polygonToArea,
+  snapTo: snapTo,
+  tickCount: tickCount,
+  xy: xy
+});
+
+const LabelComponent = props => {
+  const {
+    classes,
+    disabledLabel,
+    graphHeight,
+    graphWidth,
+    isChartBottomLabel,
+    isDefineChartBottomLabel,
+    isChartLeftLabel,
+    isDefineChartLeftLabel,
+    placeholder,
+    text,
+    side,
+    onChange,
+    mathMlOptions = {},
+    charactersLimit,
+    titleHeight
+  } = props;
+  const [rotatedToHorizontal, setRotatedToHorizontal] = useState(false);
+  const activePlugins = ['bold', 'italic', 'underline', 'strikethrough', 'math' // 'languageCharacters'
+  ];
+  const isChart = isChartBottomLabel || isChartLeftLabel || isDefineChartBottomLabel || isDefineChartLeftLabel;
+  const chartValue = side === 'left' && isDefineChartLeftLabel && graphHeight - 220;
+  const defaultStyle = {
+    width: chartValue || (side === 'left' || side === 'right' ? graphHeight - 8 : graphWidth - 8),
+    top: chartValue || isChartLeftLabel && `${graphHeight - 70}px` || side === 'left' && `${graphHeight - 8}px` || isChartBottomLabel && `${graphHeight - 60 + titleHeight}px` || side === 'bottom' && `${graphHeight - 120 + titleHeight}px` || 0,
+    left: side === 'right' && `${graphWidth - 8}px` || (isDefineChartLeftLabel || isDefineChartBottomLabel) && '40px' || isChartBottomLabel && '-10px' || 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 /*#__PURE__*/React.createElement(Readable, {
+    false: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn(isChart ? classes.chartLabel : classes.axisLabel, {
+      [classes.rotateLeftLabel]: side === 'left' && !rotatedToHorizontal,
+      [classes.rotateRightLabel]: side === 'right' && !rotatedToHorizontal,
+      [classes.editLabel]: rotatedToHorizontal,
+      [classes.customBottom]: isChartBottomLabel || isDefineChartBottomLabel,
+      [classes.displayNone]: disabledLabel && !isChart && isEmptyString(extractTextFromHTML(text))
+    }),
+    style: rotatedToHorizontal ? rotatedStyle : defaultStyle,
+    onClick: rotateLabel
+  }, disabledLabel ? /*#__PURE__*/React.createElement("div", {
+    className: classes.disabledLabel,
+    dangerouslySetInnerHTML: {
+      __html: text || ''
+    }
+  }) : /*#__PURE__*/React.createElement(EditableHtml, {
+    markup: text || '',
+    onChange: onChange,
+    placeholder: !disabledLabel && placeholder,
+    toolbarOpts: {
+      position: side === 'bottom' ? 'top' : 'bottom',
+      noPadding: true,
+      noBorder: true
+    },
+    disableScrollbar: true,
+    activePlugins: activePlugins,
+    onDone: () => setRotatedToHorizontal(false),
+    mathMlOptions: mathMlOptions,
+    charactersLimit: charactersLimit
+  })));
+};
+
+LabelComponent.propTypes = {
+  classes: PropTypes.object,
+  disabledLabel: PropTypes.bool,
+  graphHeight: PropTypes.number,
+  graphWidth: PropTypes.number,
+  isChartBottomLabel: PropTypes.bool,
+  isDefineChartBottomLabel: PropTypes.bool,
+  isChartLeftLabel: PropTypes.bool,
+  isDefineChartLeftLabel: PropTypes.bool,
+  placeholder: PropTypes.string,
+  text: PropTypes.string,
+  side: PropTypes.string,
+  onChange: PropTypes.func,
+  mathMlOptions: PropTypes.object,
+  charactersLimit: PropTypes.number,
+  titleHeight: PropTypes.number
+};
+var Label = withStyles(theme => ({
+  label: {
+    fill: color.secondary()
+  },
+  axisLabel: {
+    fontSize: theme.typography.fontSize - 2,
+    textAlign: 'center',
+    margin: theme.spacing.unit / 2,
+    padding: `${theme.spacing.unit / 2}px 0`
+  },
+  chartLabel: {
+    fontSize: theme.typography.fontSize + 2,
+    textAlign: 'center',
+    margin: theme.spacing.unit / 2,
+    padding: `${theme.spacing.unit / 2}px 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: {
+    '-webkit-transform': 'rotate(-90deg)',
+    transformOrigin: '0 0',
+    transformStyle: 'preserve-3d',
+    position: 'absolute'
+  },
+  rotateRightLabel: {
+    '-webkit-transform': 'rotate(90deg)',
+    transformOrigin: '0 0',
+    transformStyle: 'preserve-3d',
+    position: 'absolute'
+  },
+  customBottom: {
+    position: 'absolute'
+  },
+  displayNone: {
+    display: 'none'
+  }
+}))(LabelComponent);
+
+class Root extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.mouseMove = g => {
+      const {
+        graphProps,
+        onMouseMove
+      } = this.props;
+
+      if (!onMouseMove) {
+        return;
+      }
+
+      const {
+        scale,
+        snap
+      } = graphProps;
+      const coords = mouse(g._groups[0][0]);
+      const x = scale.x.invert(coords[0]);
+      const y = scale.y.invert(coords[1]);
+      const snapped = {
+        x: snap.x(x),
+        y: snap.y(y)
+      };
+      onMouseMove(snapped);
+    };
+
+    this.onChangeLabel = (newValue, side) => {
+      const {
+        labels,
+        onChangeLabels,
+        isChart
+      } = this.props;
+
+      if (!onChangeLabels) {
+        return;
+      }
+
+      if (isChart) {
+        if (side === 'left') {
+          onChangeLabels('range', newValue);
+        } else {
+          onChangeLabels('domain', newValue);
+        }
+
+        return;
+      }
+
+      onChangeLabels(_extends({}, labels, {
+        [side]: newValue
+      }));
+    };
+
+    this.measureTitleHeight = () => {
+      const titleElement = this.titleRef;
+
+      if (titleElement) {
+        const titleHeight = titleElement.clientHeight;
+        this.setState({
+          titleHeight,
+          prevTitle: this.props.title
+        });
+      }
+    };
+
+    this.handleKeyDown = () => {
+      setTimeout(this.measureTitleHeight, 0);
+    };
+
+    this.state = {
+      titleHeight: 0
+    };
+  }
+
+  componentDidMount() {
+    const g = select(this.g);
+    g.on('mousemove', this.mouseMove.bind(this, g));
+    this.measureTitleHeight();
+  }
+
+  componentWillUnmount() {
+    const g = select(this.g);
+    g.on('mousemove', null);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.title !== this.props.title) {
+      this.measureTitleHeight();
+    }
+  }
+
+  render() {
+    const {
+      disabledTitle,
+      disabledLabels,
+      labels,
+      labelsPlaceholders,
+      titlePlaceholder,
+      graphProps,
+      children,
+      classes,
+      defineChart,
+      onChangeTitle,
+      isChart,
+      showLabels,
+      showPixelGuides,
+      showTitle,
+      title,
+      rootRef,
+      mathMlOptions = {},
+      labelsCharactersLimit
+    } = this.props;
+    const {
+      size: {
+        width = 500,
+        height = 500
+      },
+      domain,
+      range
+    } = graphProps;
+    const topPadding = 40;
+    const leftPadding = isEmptyString(extractTextFromHTML(labels == null ? void 0 : labels.left)) && isEmptyObject(labelsPlaceholders) ? 48 : 70;
+    const rightPadding = isEmptyString(extractTextFromHTML(labels == null ? void 0 : labels.right)) && isEmptyObject(labelsPlaceholders) ? 48 : 70;
+    const finalWidth = width + leftPadding + rightPadding + (domain.padding || 0) * 2;
+    const finalHeight = height + topPadding * 2 + (range.padding || 0) * 2;
+    const activeTitlePlugins = ['bold', 'italic', 'underline', 'superscript', 'subscript', 'strikethrough', 'math' // 'languageCharacters'
+    ];
+    const actualHeight = defineChart && showPixelGuides ? height - 160 : height;
+    const nbOfVerticalLines = parseInt(width / 100);
+    const nbOfHorizontalLines = parseInt(actualHeight / 100);
+    const sideGridlinesPadding = parseInt(actualHeight % 100);
+    const {
+      titleHeight
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.root
+    }, showPixelGuides && /*#__PURE__*/React.createElement("div", {
+      className: classes.topPixelGuides,
+      style: {
+        marginLeft: isChart ? 80 : showLabels ? 30 : 10
+      }
+    }, [...Array(nbOfVerticalLines + 1).keys()].map(value => /*#__PURE__*/React.createElement(Readable, {
+      false: true,
+      key: `top-guide-${value}`
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.topPixelIndicator
+    }, /*#__PURE__*/React.createElement("div", null, value * 100, "px"), /*#__PURE__*/React.createElement("div", null, "|"))))), showTitle && (disabledTitle ? /*#__PURE__*/React.createElement("div", {
+      ref: r => this.titleRef = r,
+      style: _extends({}, isChart && {
+        width: finalWidth
+      }, isEmptyString(extractTextFromHTML(title)) && {
+        display: 'none'
+      }),
+      className: cn(isChart ? classes.chartTitle : classes.graphTitle, classes.disabledTitle),
+      dangerouslySetInnerHTML: {
+        __html: title || ''
+      }
+    }) : /*#__PURE__*/React.createElement("div", {
+      ref: r => this.titleRef = r
+    }, /*#__PURE__*/React.createElement(EditableHtml, {
+      style: isChart && {
+        width: finalWidth
+      },
+      className: cn({
+        [classes.rightMargin]: showPixelGuides
+      }, isChart ? classes.chartTitle : classes.graphTitle),
+      markup: title || '',
+      onChange: onChangeTitle,
+      placeholder: defineChart && titlePlaceholder || !disabledTitle && 'Click here to add a title for this graph',
+      toolbarOpts: {
+        noPadding: true,
+        noBorder: true
+      },
+      activePlugins: activeTitlePlugins,
+      disableScrollbar: true,
+      onKeyDown: this.handleKeyDown
+    }))), showLabels && !isChart && /*#__PURE__*/React.createElement(Label, {
+      side: "top",
+      text: labels.top,
+      disabledLabel: disabledLabels,
+      placeholder: labelsPlaceholders == null ? void 0 : labelsPlaceholders.top,
+      graphHeight: finalHeight,
+      graphWidth: finalWidth,
+      onChange: value => this.onChangeLabel(value, 'top'),
+      mathMlOptions: mathMlOptions,
+      charactersLimit: labelsCharactersLimit
+    }), /*#__PURE__*/React.createElement("div", {
+      className: classes.wrapper
+    }, showLabels && /*#__PURE__*/React.createElement(Label, {
+      side: "left",
+      text: labels.left,
+      disabledLabel: disabledLabels,
+      placeholder: labelsPlaceholders == null ? void 0 : labelsPlaceholders.left,
+      graphHeight: finalHeight,
+      graphWidth: finalWidth,
+      isChartLeftLabel: isChart && !defineChart,
+      isDefineChartLeftLabel: isChart && defineChart,
+      onChange: value => this.onChangeLabel(value, 'left'),
+      mathMlOptions: mathMlOptions,
+      charactersLimit: labelsCharactersLimit
+    }), /*#__PURE__*/React.createElement("svg", {
+      width: finalWidth,
+      height: finalHeight,
+      className: defineChart ? classes.defineChart : classes.chart
+    }, /*#__PURE__*/React.createElement("g", {
+      ref: r => {
+        this.g = r;
+
+        if (rootRef) {
+          rootRef(r);
+        }
+      },
+      className: classes.graphBox,
+      transform: `translate(${leftPadding + (domain.padding || 0)}, ${topPadding + (range.padding || 0)})`
+    }, children)), showLabels && !isChart && /*#__PURE__*/React.createElement(Label, {
+      side: "right",
+      text: labels.right,
+      disabledLabel: disabledLabels,
+      placeholder: labelsPlaceholders == null ? void 0 : labelsPlaceholders.right,
+      graphHeight: finalHeight,
+      graphWidth: finalWidth,
+      onChange: value => this.onChangeLabel(value, 'right'),
+      mathMlOptions: mathMlOptions,
+      charactersLimit: labelsCharactersLimit
+    }), showPixelGuides && /*#__PURE__*/React.createElement("div", {
+      className: classes.sidePixelGuides,
+      style: {
+        paddingTop: sideGridlinesPadding,
+        marginTop: 31
+      }
+    }, [...Array(nbOfHorizontalLines + 1).keys()].reverse().map(value => /*#__PURE__*/React.createElement(Readable, {
+      false: true,
+      key: `top-guide-${value}`
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.sidePixelIndicator
+    }, "\u2501 ", value * 100, "px"))))), showLabels && /*#__PURE__*/React.createElement(Label, {
+      side: "bottom",
+      text: labels.bottom,
+      disabledLabel: disabledLabels,
+      placeholder: labelsPlaceholders == null ? void 0 : labelsPlaceholders.bottom,
+      graphHeight: finalHeight,
+      graphWidth: finalWidth,
+      titleHeight: titleHeight,
+      isChartBottomLabel: isChart && !defineChart,
+      isDefineChartBottomLabel: isChart && defineChart,
+      onChange: value => this.onChangeLabel(value, 'bottom'),
+      mathMlOptions: mathMlOptions,
+      charactersLimit: labelsCharactersLimit
+    }));
+  }
+
+} // use default color theme style to avoid color contrast issues
+
+Root.propTypes = {
+  title: PropTypes.string,
+  children: ChildrenType,
+  defineChart: PropTypes.bool,
+  disabledLabels: PropTypes.bool,
+  disabledTitle: PropTypes.bool,
+  graphProps: GraphPropsType.isRequired,
+  isChart: PropTypes.bool,
+  labels: PropTypes.object,
+  labelsPlaceholders: PropTypes.object,
+  onChangeTitle: PropTypes.func,
+  onMouseMove: PropTypes.func,
+  classes: PropTypes.object.isRequired,
+  showLabels: PropTypes.bool,
+  showTitle: PropTypes.bool,
+  showPixelGuides: PropTypes.bool,
+  rootRef: PropTypes.func,
+  onChangeLabels: PropTypes.func,
+  titlePlaceholder: PropTypes.string,
+  mathMlOptions: PropTypes.object,
+  labelsCharactersLimit: PropTypes.number
+};
+
+const styles = theme => ({
+  root: {
+    border: `solid 1px ${color.primaryLight()}`,
+    color: color.defaults.TEXT,
+    backgroundColor: theme.palette.common.white,
+    touchAction: 'none',
+    position: 'relative',
+    boxSizing: 'unset' // to override the default border-box in IBX that breaks the component width layout
+
+  },
+  wrapper: {
+    display: 'flex',
+    position: 'relative'
+  },
+  svg: {},
+  defineChart: {
+    paddingLeft: '50px',
+    overflow: 'visible'
+  },
+  chart: {
+    overflow: 'visible'
+  },
+  graphBox: {
+    cursor: 'pointer',
+    userSelect: 'none'
+  },
+  graphTitle: {
+    color: color.defaults.TEXT,
+    fontSize: theme.typography.fontSize + 2,
+    padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit / 2}px 0`,
+    textAlign: 'center'
+  },
+  chartTitle: {
+    color: color.defaults.TEXT,
+    fontSize: theme.typography.fontSize + 4,
+    padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit / 2}px 0`,
+    textAlign: 'center'
+  },
+  disabledTitle: {
+    pointerEvents: 'none'
+  },
+  rightMargin: {
+    marginRight: '74px'
+  },
+  topPixelGuides: {
+    display: 'flex',
+    paddingTop: '6px'
+  },
+  topPixelIndicator: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: '100px',
+    pointerEvents: 'none',
+    userSelect: 'none'
+  },
+  sidePixelGuides: {
+    width: '70px',
+    display: 'flex',
+    flexDirection: 'column',
+    marginRight: '6px'
+  },
+  sidePixelIndicator: {
+    textAlign: 'right',
+    height: '20px',
+    pointerEvents: 'none',
+    userSelect: 'none',
+    '&:not(:last-child)': {
+      marginBottom: '80px'
+    }
+  }
+});
+
+var root = withStyles(styles)(Root);
+
+class LocalDraggable extends Draggable {
+  componentWillReceiveProps(next) {
+    super.componentWillReceiveProps(next); //Remove the x/y state as these values have now been updated and will come through as props.
+
+    this.setState({
+      x: 0,
+      y: 0
+    });
+  }
+
+}
+
+const _excluded = ["disabled"];
+const log$1 = debug('pie-lib:plot:grid-draggable');
+const deltaFn = (scale, snap, val) => delta => {
+  const normalized = delta + scale(0);
+  const inverted = scale.invert(normalized);
+  const fixDecimalsArithmetic = snap(val + inverted).toFixed(4) * 1000 / 1000;
+  return fixDecimalsArithmetic;
+};
+/**
+ * Creates a Component that is draggable, within a bounded grid.
+ * @param {*} opts
+ */
+
+const gridDraggable = opts => Comp => {
+  var _class;
+
+  invariant(!!opts && isFunction(opts.fromDelta) && isFunction(opts.bounds) && isFunction(opts.anchorPoint), 'You must supply an object with: { anchorPoint: Function, fromDelta: Function, bounds: Function }');
+  return _class = class GridDraggable extends React.Component {
+    constructor(...args) {
+      super(...args);
+
+      this.grid = () => {
+        const {
+          graphProps
+        } = this.props;
+        const {
+          scale,
+          domain,
+          range
+        } = graphProps;
+        return {
+          x: scale.x(domain.step) - scale.x(0),
+          y: scale.y(range.step) - scale.y(0)
+        };
+      };
+
+      this.onStart = e => {
+        const {
+          onDragStart
+        } = this.props;
+
+        if (document.activeElement) {
+          document.activeElement.blur();
+        }
+
+        this.setState({
+          startX: e.clientX,
+          startY: e.clientY
+        });
+
+        if (onDragStart) {
+          onDragStart();
+        }
+      };
+
+      this.position = () => {
+        const {
+          x,
+          y
+        } = opts.anchorPoint(this.props);
+        const {
+          graphProps
+        } = this.props;
+        const {
+          scale,
+          snap
+        } = graphProps;
+        return {
+          anchorPoint: {
+            x,
+            y
+          },
+          x: deltaFn(scale.x, snap.x, x),
+          y: deltaFn(scale.y, snap.y, y)
+        };
+      };
+
+      this.tiny = (key, event) => {
+        const K = key.toUpperCase();
+        const end = event[`client${K}`];
+        const start = this.state[`start${K}`];
+        const delta = Math.abs(end - start);
+        const out = delta < Math.abs(this.grid()[key]) / 10;
+        log$1('[tiny] key: ', key, 'delta: ', delta, 'out: ', out);
+        return out;
+      };
+
+      this.getScaledBounds = () => {
+        const bounds = opts.bounds(this.props, this.props.graphProps);
+        log$1('bounds: ', bounds);
+        const grid = this.grid();
+        const scaled = {
+          left: bounds.left / grid.interval * grid.x,
+          right: bounds.right / grid.interval * grid.x,
+          top: bounds.top / grid.interval * grid.y,
+          bottom: bounds.bottom / grid.interval * grid.y
+        };
+        log$1('[getScaledBounds]: ', scaled);
+        return scaled;
+      };
+
+      this.getClientPoint = (node, event) => {
+        if (!node || !event) {
+          return null;
+        }
+
+        const svg = node.ownerSVGElement || node;
+
+        if (svg && svg.createSVGPoint) {
+          let point = svg.createSVGPoint(); // Check if it's a touch event and use the first touch point
+
+          if (event.touches && event.touches.length > 0) {
+            const touch = event.touches[0];
+            point.x = touch.clientX;
+            point.y = touch.clientY;
+          } else {
+            // Fall back to mouse event properties
+            point.x = event.clientX;
+            point.y = event.clientY;
+          }
+
+          if (node.getScreenCTM) {
+            point = point.matrixTransform(node.getScreenCTM().inverse());
+            return [point.x, point.y];
+          } else {
+            return null;
+          }
+        }
+
+        const rect = node.getBoundingClientRect();
+
+        if (rect) {
+          return [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];
+        } else {
+          return null;
+        }
+      };
+
+      this.skipDragOutsideOfBounds = (dd, e, graphProps) => {
+        // Ignore drag movement outside of the domain and range.
+        const rootNode = graphProps.getRootNode();
+        const clientPoint = this.getClientPoint(rootNode, e);
+
+        if (clientPoint === null) {
+          return true; // Indicate that the drag is outside of bounds
+        }
+
+        const [rawX, rawY] = clientPoint;
+        const {
+          scale,
+          domain,
+          range
+        } = graphProps;
+        let x = scale.x.invert(rawX);
+        let y = scale.y.invert(rawY);
+        const xOutside = dd.deltaX > 0 && x < domain.min || dd.deltaX < 0 && x > domain.max;
+        const yOutside = dd.deltaY > 0 && y > range.max || dd.deltaY < 0 && y < range.min;
+        return xOutside || yOutside;
+      };
+
+      this.onDrag = (e, dd) => {
+        const {
+          onDrag,
+          graphProps
+        } = this.props;
+
+        if (!onDrag) {
+          return;
+        }
+
+        const bounds = this.getScaledBounds();
+
+        if (dd.deltaX < 0 && dd.deltaX < bounds.left) {
+          return;
+        }
+
+        if (dd.deltaX > 0 && dd.deltaX > bounds.right) {
+          return;
+        }
+
+        if (dd.deltaY < 0 && dd.deltaY < bounds.top) {
+          return;
+        }
+
+        if (dd.deltaY > 0 && dd.deltaY > bounds.bottom) {
+          return;
+        }
+
+        if (this.skipDragOutsideOfBounds(dd, e, graphProps)) {
+          return;
+        }
+
+        const dragArg = this.applyDelta({
+          x: dd.deltaX,
+          y: dd.deltaY
+        });
+
+        if (dragArg !== undefined || dragArg !== null) {
+          onDrag(dragArg);
+        }
+      };
+
+      this.getDelta = point => {
+        const pos = this.position();
+        const p = {
+          x: pos.x(point.x),
+          y: pos.y(point.y)
+        };
+        return getDelta(pos.anchorPoint, p);
+      };
+
+      this.applyDelta = point => {
+        const delta = this.getDelta(point);
+        log$1('[applyDelta] delta:', delta);
+        return opts.fromDelta(this.props, delta);
+      };
+
+      this.onStop = (e, dd) => {
+        log$1('[onStop] dd:', dd);
+        const {
+          onDragStop,
+          onClick
+        } = this.props;
+
+        if (onDragStop) {
+          onDragStop();
+        }
+
+        log$1('[onStop] lastX/Y: ', dd.lastX, dd.lastY);
+        const isClick = this.tiny('x', e) && this.tiny('y', e);
+
+        if (isClick) {
+          if (onClick) {
+            log$1('call onClick');
+            this.setState({
+              startX: null
+            });
+            const {
+              graphProps
+            } = this.props;
+            const {
+              scale,
+              snap
+            } = graphProps;
+            const [rawX, rawY] = clientPoint(e.target, e);
+            let x = scale.x.invert(rawX);
+            let y = scale.y.invert(rawY);
+            x = snap.x(x);
+            y = snap.y(y);
+            onClick({
+              x,
+              y
+            });
+            return false;
+          }
+        }
+
+        this.setState({
+          startX: null,
+          startY: null
+        }); // return false to prevent state updates in the underlying draggable - a move will have triggered an update already.
+
+        return false;
+      };
+    }
+
+    render() {
+      const _this$props = this.props,
+            {
+        disabled
+      } = _this$props,
+            rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
+
+      const grid = this.grid(); // prevent the text select icon from rendering.
+
+      const onMouseDown = e => e.nativeEvent.preventDefault();
+      /**
+       * TODO: This shouldnt be necessary, we should be able to use the r-d classnames.
+       * But they aren't being unset. If we continue with this lib, we'll have to fix this.
+       */
+
+
+      const isDragging = this.state ? !!this.state.startX : false;
+      return /*#__PURE__*/React.createElement(DraggableCore, {
+        disabled: disabled,
+        onMouseDown: onMouseDown,
+        onStart: this.onStart,
+        onDrag: this.onDrag,
+        onStop: this.onStop,
+        axis: opts.axis || 'both',
+        grid: [grid.x, grid.y]
+      }, /*#__PURE__*/React.createElement(Comp, _extends({}, rest, {
+        disabled: disabled,
+        isDragging: isDragging
+      })));
+    }
+
+  }, _class.propTypes = {
+    disabled: PropTypes.bool,
+    onDragStart: PropTypes.func,
+    onDrag: PropTypes.func,
+    onDragStop: PropTypes.func,
+    onClick: PropTypes.func,
+    onMove: PropTypes.func,
+    graphProps: GraphPropsType.isRequired
+  }, _class;
+};
+
+const log = debug('pie-lib:plot:trig');
+const toDegrees = radians => radians * (180 / Math.PI);
+const toRadians = degrees => degrees * (Math.PI / 180);
+/**
+ * return angle in radians between 2 points using counting degrees counter clockwise
+ *
+ * 0,0 + 1,1 = 45 in radians
+ * 1,1 + 0,0 = 45?
+ * @param {Point} a
+ * @param {Point} b
+ */
+
+const angle = (a, b) => {
+  const vd = b.y - a.y;
+  const hd = b.x - a.x;
+  log(a, b, 'vd: ', vd, 'hd: ', hd);
+  const radians = Math.atan2(vd, hd);
+  return radians < 0 ? radians + Math.PI * 2 : radians;
+};
+const NINETY = Math.PI / 2;
+const ONE_EIGHTY = Math.PI;
+const TWO_SEVENTY = ONE_EIGHTY + NINETY;
+const acuteXAngle = a => {
+  log(toDegrees(a));
+
+  if (a < NINETY) {
+    return a;
+  }
+
+  if (a < ONE_EIGHTY) {
+    return Math.abs(ONE_EIGHTY - a);
+  }
+
+  if (a < TWO_SEVENTY) {
+    return Math.abs(ONE_EIGHTY - a);
+  }
+
+  return Math.abs(Math.PI * 2 - a);
+};
+const acuteYAngle = a => NINETY - acuteXAngle(a);
+const hypotenuse = (a, alpha) => {
+  const out = Math.abs(a / Math.sin(alpha));
+  return out;
+};
+/**
+ * return 2 edge points for a,b within domain + range.
+ * - one edge is from following a -> b to the bounds
+ * - one edge is from following b -> a to the bounds
+ * @param {{min: number, max: number}} domain
+ * @param {{min: number, max: number}} range
+ * @param {{x: number, y: number}} a
+ * @param {{x: number, y: number}} b
+ * @returns [{x: number, y: number}, {x: number, y: number}]
+ */
+
+const edges = (domain, range) => (a, b) => {
+  // const xDest =
+  const destX = a.x < b.x ? domain.max : domain.min;
+  const destY = a.y < b.y ? range.max : range.min;
+  const aToB = diffEdge(xy(destX, destY), a, b);
+  const dX = b.x < a.x ? domain.max : domain.min;
+  const dY = b.y < a.y ? range.max : range.min;
+  const bToA = diffEdge(xy(dX, dY), b, a);
+  return [aToB, bToA];
+};
+/** get length of side A of a triangle from H and angle Alpha */
+
+const getOpposingSide = (hyp, angle) => {
+  log('[getOpposingSide] hyp: ', hyp, 'angle:', angle);
+  return Math.abs(hyp * Math.sin(angle));
+};
+
+const getShortestSide = (xh, yh) => {
+  if (Number.isFinite(xh) && Number.isFinite(yh)) {
+    if (xh === 0 && yh > 0) {
+      return 'y';
+    }
+
+    if (yh === 0 && xh > 0) {
+      return 'x';
+    }
+
+    return xh < yh ? 'x' : 'y';
+  }
+
+  if (isNaN(xh) && !isNaN(yh)) {
+    return 'y';
+  }
+
+  if (!isNaN(xh) && isNaN(yh)) {
+    return 'x';
+  }
+
+  if (xh === Infinity) {
+    return 'y';
+  }
+
+  if (yh === Infinity) {
+    return 'x';
+  } // eslint-disable-next-line no-console
+
+
+  console.warn('hypotenuse - which is shorter? x:', xh, 'y:', yh);
+};
+/**
+ * return the difference between bounds and a as a Point
+ * @param {*} bounds
+ */
+
+
+const diffEdge = (bounds, a, b) => {
+  let l = log.enabled ? log.bind(log, `diffEdge: [${a.x},${a.y} -> ${b.x},${b.y}]`) : () => {};
+  const xRadians = angle(a, b);
+  l('x angle', toDegrees(xRadians));
+  const yRadians = Math.abs(xRadians - toRadians(90));
+  l('y angle', toDegrees(yRadians));
+  const xSide = Math.abs(a.x - bounds.x);
+  /**
+   * Draw 2 triangles:
+   * 1 with a horizontal line from a to the graph x edge
+   * 1 with a vertical line from a to the graph y edge
+   * Calculate the hypotenuse for both, whichever is shorter
+   * indicates that we should use that triangle to get the edge point.
+   */
+
+  const xH = hypotenuse(xSide, yRadians);
+  const ySide = Math.abs(a.y - bounds.y);
+  const yH = hypotenuse(ySide, xRadians);
+  l('x: side', xSide, 'h:', xH);
+  l('y: side', ySide, 'h:', yH);
+  const side = getShortestSide(xH, yH);
+
+  if (side !== 'x' && side !== 'y') {
+    throw new Error('Cant decide which hypotenuse to use');
+  }
+
+  const point = side === 'x' ? new Point(xSide, getOpposingSide(xH, xRadians)) : new Point(getOpposingSide(yH, yRadians), ySide);
+  l('point:', point);
+  const multiplier = new Point(b.x < a.x ? -1 : 1, b.y < a.y ? -1 : 1);
+  l('multiplier:', multiplier);
+  const out = point.multByPoint(multiplier);
+  l('out:', out);
+  const normalized = out.add(new Point(a.x, a.y));
+  l('normalized:', normalized);
+  return normalized;
+};
+
+var trig = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  acuteXAngle: acuteXAngle,
+  acuteYAngle: acuteYAngle,
+  angle: angle,
+  diffEdge: diffEdge,
+  edges: edges,
+  getOpposingSide: getOpposingSide,
+  hypotenuse: hypotenuse,
+  toDegrees: toDegrees,
+  toRadians: toRadians
+});
+
+const createSnapMinAndMax = ({
+  min,
+  max,
+  step
+}) => {
+  // for graphing, if step is a value with decimals, we have to calculate the min & max for the grid taking in consideration that 0 has to be exactly in the middle
+  // for example, if min: -5 & max: 5 & step: 0.75, in order to keep 0 in the middle we have to set min: -4.5 & max: 4.5
+  return {
+    step,
+    min: parseInt(min / step) * step,
+    max: parseInt(max / step) * step
+  };
+};
+
+const create = (domain, range, size, getRootNode) => {
+  invariant(domain.min < domain.max, 'domain: min must be less than max');
+  invariant(range.min < range.max, 'range: min must be less than max');
+  const domainMinMax = createSnapMinAndMax(domain);
+  const rangeMinMax = createSnapMinAndMax(range);
+  const scale = {
+    x: scaleLinear().domain([domain.min, domain.max]).range([0, size.width]),
+    y: scaleLinear().domain([range.max, range.min]).range([0, size.height])
+  };
+  const snap = {
+    x: snapTo.bind(null, domainMinMax.min, domainMinMax.max, domainMinMax.step),
+    y: snapTo.bind(null, rangeMinMax.min, rangeMinMax.max, rangeMinMax.step)
+  };
+  return {
+    scale,
+    snap,
+    domain,
+    range,
+    size,
+    getRootNode
+  };
+};
+
+export { LocalDraggable as Draggable, root as Root, create as createGraphProps, gridDraggable, trig, types, utils };
+//# sourceMappingURL=index.js.map