@pie-lib/graphing-module 1.1.2 → 1.2.1

package/module/index.js

@@ -1,4 +1,4 @@
-import {_dll_prop_types, _dll_lodash, _dll_react, _dll_material_ui__core_styles, _dll_material_ui__core, _dll_pie_lib__render_ui, _dll_react_dom, _dll_debug, _dll_classnames, _dll_material_ui__core_styles_color_manipulator} from "../../shared-module@^1.4.15/module/index.js";
+import {_dll_prop_types, _dll_react, _dll_material_ui__core_styles, _dll_material_ui__core, _dll_pie_lib__render_ui, _dll_react_dom, _dll_lodash, _dll_debug, _dll_classnames, _dll_material_ui__core_styles_color_manipulator} from "../../shared-module@^1.4.18/module/index.js";
 const PropTypes$C = _dll_prop_types;
 const BaseDomainRangeType = {
   min: PropTypes$C.number.isRequired,
@@ -816,328 +816,15 @@ var index$4 = Object.freeze({
   },
   customEvent: customEvent
 });
-var commonjsGlobal$1 = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-function getDefaultExportFromCjs(x) {
-  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-var invariant = function (condition, format, a, b, c, d, e, f) {
-  {
-    if (format === undefined) {
-      throw new Error('invariant requires an error message argument');
-    }
-  }
-  if (!condition) {
-    var error;
-    if (format === undefined) {
-      error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
-    } else {
-      var args = [a, b, c, d, e, f];
-      var argIndex = 0;
-      error = new Error(format.replace(/%s/g, function () {
-        return args[argIndex++];
-      }));
-      error.name = 'Invariant Violation';
-    }
-    error.framesToPop = 1;
-    throw error;
-  }
-};
-var browser = invariant;
-var pointGeometry = Point$2;
-function Point$2(x, y) {
-  this.x = x;
-  this.y = y;
-}
-Point$2.prototype = {
-  clone: function () {
-    return new Point$2(this.x, this.y);
-  },
-  add: function (p) {
-    return this.clone()._add(p);
-  },
-  sub: function (p) {
-    return this.clone()._sub(p);
-  },
-  multByPoint: function (p) {
-    return this.clone()._multByPoint(p);
-  },
-  divByPoint: function (p) {
-    return this.clone()._divByPoint(p);
-  },
-  mult: function (k) {
-    return this.clone()._mult(k);
-  },
-  div: function (k) {
-    return this.clone()._div(k);
-  },
-  rotate: function (a) {
-    return this.clone()._rotate(a);
-  },
-  rotateAround: function (a, p) {
-    return this.clone()._rotateAround(a, p);
-  },
-  matMult: function (m) {
-    return this.clone()._matMult(m);
-  },
-  unit: function () {
-    return this.clone()._unit();
-  },
-  perp: function () {
-    return this.clone()._perp();
-  },
-  round: function () {
-    return this.clone()._round();
-  },
-  mag: function () {
-    return Math.sqrt(this.x * this.x + this.y * this.y);
-  },
-  equals: function (other) {
-    return this.x === other.x && this.y === other.y;
-  },
-  dist: function (p) {
-    return Math.sqrt(this.distSqr(p));
-  },
-  distSqr: function (p) {
-    var dx = p.x - this.x, dy = p.y - this.y;
-    return dx * dx + dy * dy;
-  },
-  angle: function () {
-    return Math.atan2(this.y, this.x);
-  },
-  angleTo: function (b) {
-    return Math.atan2(this.y - b.y, this.x - b.x);
-  },
-  angleWith: function (b) {
-    return this.angleWithSep(b.x, b.y);
-  },
-  angleWithSep: function (x, y) {
-    return Math.atan2(this.x * y - this.y * x, this.x * x + this.y * y);
-  },
-  _matMult: function (m) {
-    var x = m[0] * this.x + m[1] * this.y, y = m[2] * this.x + m[3] * this.y;
-    this.x = x;
-    this.y = y;
-    return this;
-  },
-  _add: function (p) {
-    this.x += p.x;
-    this.y += p.y;
-    return this;
-  },
-  _sub: function (p) {
-    this.x -= p.x;
-    this.y -= p.y;
-    return this;
-  },
-  _mult: function (k) {
-    this.x *= k;
-    this.y *= k;
-    return this;
-  },
-  _div: function (k) {
-    this.x /= k;
-    this.y /= k;
-    return this;
-  },
-  _multByPoint: function (p) {
-    this.x *= p.x;
-    this.y *= p.y;
-    return this;
-  },
-  _divByPoint: function (p) {
-    this.x /= p.x;
-    this.y /= p.y;
-    return this;
-  },
-  _unit: function () {
-    this._div(this.mag());
-    return this;
-  },
-  _perp: function () {
-    var y = this.y;
-    this.y = this.x;
-    this.x = -y;
-    return this;
-  },
-  _rotate: function (angle) {
-    var cos = Math.cos(angle), sin = Math.sin(angle), x = cos * this.x - sin * this.y, y = sin * this.x + cos * this.y;
-    this.x = x;
-    this.y = y;
-    return this;
-  },
-  _rotateAround: function (angle, p) {
-    var cos = Math.cos(angle), sin = Math.sin(angle), x = p.x + cos * (this.x - p.x) - sin * (this.y - p.y), y = p.y + sin * (this.x - p.x) + cos * (this.y - p.y);
-    this.x = x;
-    this.y = y;
-    return this;
-  },
-  _round: function () {
-    this.x = Math.round(this.x);
-    this.y = Math.round(this.y);
-    return this;
-  }
-};
-Point$2.convert = function (a) {
-  if (a instanceof Point$2) {
-    return a;
-  }
-  if (Array.isArray(a)) {
-    return new Point$2(a[0], a[1]);
-  }
-  return a;
-};
-const {range: range$2} = _dll_lodash;
-const {head: head$1} = _dll_lodash;
-const {tail: tail$1} = _dll_lodash;
-const {isEqual: isEqual$7} = _dll_lodash;
-const xy$1 = (x, y) => ({
-  x,
-  y
-});
-const buildSizeArray$1 = (size, padding) => {
-  padding = Number.isFinite(padding) ? Math.max(padding, 0) : 0;
-  browser(padding < size, 'padding must be less than size');
-  const half = Math.round(padding * 0.5);
-  return [half, size - half];
-};
-const tickCount$1 = (min, max, step) => {
-  browser(min < max, 'min must be less than max');
-  const size = Math.abs(min - max);
-  return Math.round(size / step);
-};
-function getInterval$1(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$1 = (min, max, interval) => {
-  const raw = range$2(min, max, interval);
-  raw.splice(raw.length, 1, max);
-  return raw;
-};
-function snapTo$1(min, max, interval, value) {
-  if (value >= max) {
-    return max;
-  }
-  if (value <= min) {
-    return min;
-  }
-  let rng = mkRange$1(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$1(domain, ticks, interval, scaleFn) {
-  const rng = mkRange$1(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$2 = points => {
-  const h = head$1(points);
-  const area = {
-    left: h.x,
-    top: h.y,
-    bottom: h.y,
-    right: h.x
-  };
-  return tail$1(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$2 = (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$2 = (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$4 = o => new pointGeometry(o.x, o.y);
-const getDelta$1 = (from, to) => {
-  return point$4(to).sub(point$4(from));
-};
-const bandKey$1 = (d, index) => `${index}-${d.label || '-'}`;
-const isDomainRangeEqual$1 = (graphProps, nextGraphProps) => {
-  return isEqual$7(graphProps.domain, nextGraphProps.domain) && isEqual$7(graphProps.range, nextGraphProps.range);
-};
-const findLongestWord$2 = label => {
-  let longestWord = (label || '').replace(/<[^>]+>/g, '').split(' ').sort((a, b) => b.length - a.length);
-  return longestWord[0].length;
-};
-const amountToIncreaseWidth$2 = longestWord => {
-  if (!longestWord) {
-    return 0;
-  }
-  return longestWord * 20;
-};
-var utils$1 = Object.freeze({
-  __proto__: null,
-  xy: xy$1,
-  buildSizeArray: buildSizeArray$1,
-  tickCount: tickCount$1,
-  getInterval: getInterval$1,
-  snapTo: snapTo$1,
-  buildTickModel: buildTickModel$1,
-  polygonToArea: polygonToArea$2,
-  lineToArea: lineToArea$2,
-  bounds: bounds$2,
-  point: point$4,
-  getDelta: getDelta$1,
-  bandKey: bandKey$1,
-  isDomainRangeEqual: isDomainRangeEqual$1,
-  findLongestWord: findLongestWord$2,
-  amountToIncreaseWidth: amountToIncreaseWidth$2
-});
 const React$D = _dll_react;
 const {withStyles: withStyles$k} = _dll_material_ui__core_styles;
 const {Typography: Typography} = _dll_material_ui__core;
 const PropTypes$B = _dll_prop_types;
-const {color: color$g} = _dll_pie_lib__render_ui;
+const {color: color$h} = _dll_pie_lib__render_ui;
 const _jsxFileName$v = "/home/circleci/repo/packages/plot/src/root.jsx";
 const GraphTitle = withStyles$k(theme => ({
   title: {
-    color: color$g.text(),
+    color: color$h.text(),
     textAlign: 'center',
     paddingTop: theme.spacing.unit * 2,
     fontSize: theme.typography.fontSize + 6
@@ -1152,7 +839,7 @@ const GraphTitle = withStyles$k(theme => ({
   __self: undefined,
   __source: {
     fileName: _jsxFileName$v,
-    lineNumber: 19
+    lineNumber: 18
   }
 }));
 class Root$1 extends React$D.Component {
@@ -1167,8 +854,7 @@ class Root$1 extends React$D.Component {
       graphProps: GraphPropsType.isRequired,
       onMouseMove: PropTypes$B.func,
       classes: PropTypes$B.object.isRequired,
-      rootRef: PropTypes$B.func,
-      paddingLeft: PropTypes$B.number
+      rootRef: PropTypes$B.func
     };
   }
   __init() {
@@ -1197,13 +883,12 @@ class Root$1 extends React$D.Component {
     g.on('mousemove', null);
   }
   render() {
-    const {graphProps, children, classes, title, rootRef, paddingLeft} = this.props;
-    const {size, domain} = graphProps;
-    const padding = 50;
-    const longestWord = findLongestWord$2(domain.axisLabel);
-    const increaseWidth = amountToIncreaseWidth$2(longestWord);
-    const finalWidth = size.width + padding * 2 + increaseWidth;
-    const finalHeight = size.height + padding * 2;
+    const {graphProps, children, classes, title, rootRef} = this.props;
+    const {size: {width = 500, height = 500}, domain, range} = graphProps;
+    const topPadding = 50;
+    const leftPadding = topPadding + 10;
+    const finalWidth = width + leftPadding * 2 + (domain.padding || 0) * 2;
+    const finalHeight = height + topPadding * 2 + (range.padding || 0) * 2;
     return React$D.createElement('div', {
       className: classes.root,
       __self: this,
@@ -1235,7 +920,7 @@ class Root$1 extends React$D.Component {
         }
       },
       className: classes.graphBox,
-      transform: `translate(${paddingLeft || padding}, ${padding})`,
+      transform: `translate(${leftPadding}, ${topPadding})`,
       __self: this,
       __source: {
         fileName: _jsxFileName$v,
@@ -1247,9 +932,9 @@ class Root$1 extends React$D.Component {
 Root$1.__initStatic();
 const styles$8 = () => ({
   root: {
-    border: `solid 1px ${color$g.primaryLight()}`,
-    color: color$g.text(),
-    backgroundColor: color$g.background()
+    border: `solid 1px ${color$h.primaryLight()}`,
+    color: color$h.text(),
+    backgroundColor: color$h.background()
   },
   svg: {},
   graphBox: {
@@ -1258,6 +943,10 @@ const styles$8 = () => ({
   }
 });
 var Root$2 = withStyles$k(styles$8)(Root$1);
+var commonjsGlobal$1 = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
 var reactDraggable = {
   exports: {}
 };
@@ -2615,6 +2304,315 @@ class LocalDraggable extends Draggable {
     });
   }
 }
+var invariant = function (condition, format, a, b, c, d, e, f) {
+  {
+    if (format === undefined) {
+      throw new Error('invariant requires an error message argument');
+    }
+  }
+  if (!condition) {
+    var error;
+    if (format === undefined) {
+      error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
+    } else {
+      var args = [a, b, c, d, e, f];
+      var argIndex = 0;
+      error = new Error(format.replace(/%s/g, function () {
+        return args[argIndex++];
+      }));
+      error.name = 'Invariant Violation';
+    }
+    error.framesToPop = 1;
+    throw error;
+  }
+};
+var browser = invariant;
+var pointGeometry = Point$2;
+function Point$2(x, y) {
+  this.x = x;
+  this.y = y;
+}
+Point$2.prototype = {
+  clone: function () {
+    return new Point$2(this.x, this.y);
+  },
+  add: function (p) {
+    return this.clone()._add(p);
+  },
+  sub: function (p) {
+    return this.clone()._sub(p);
+  },
+  multByPoint: function (p) {
+    return this.clone()._multByPoint(p);
+  },
+  divByPoint: function (p) {
+    return this.clone()._divByPoint(p);
+  },
+  mult: function (k) {
+    return this.clone()._mult(k);
+  },
+  div: function (k) {
+    return this.clone()._div(k);
+  },
+  rotate: function (a) {
+    return this.clone()._rotate(a);
+  },
+  rotateAround: function (a, p) {
+    return this.clone()._rotateAround(a, p);
+  },
+  matMult: function (m) {
+    return this.clone()._matMult(m);
+  },
+  unit: function () {
+    return this.clone()._unit();
+  },
+  perp: function () {
+    return this.clone()._perp();
+  },
+  round: function () {
+    return this.clone()._round();
+  },
+  mag: function () {
+    return Math.sqrt(this.x * this.x + this.y * this.y);
+  },
+  equals: function (other) {
+    return this.x === other.x && this.y === other.y;
+  },
+  dist: function (p) {
+    return Math.sqrt(this.distSqr(p));
+  },
+  distSqr: function (p) {
+    var dx = p.x - this.x, dy = p.y - this.y;
+    return dx * dx + dy * dy;
+  },
+  angle: function () {
+    return Math.atan2(this.y, this.x);
+  },
+  angleTo: function (b) {
+    return Math.atan2(this.y - b.y, this.x - b.x);
+  },
+  angleWith: function (b) {
+    return this.angleWithSep(b.x, b.y);
+  },
+  angleWithSep: function (x, y) {
+    return Math.atan2(this.x * y - this.y * x, this.x * x + this.y * y);
+  },
+  _matMult: function (m) {
+    var x = m[0] * this.x + m[1] * this.y, y = m[2] * this.x + m[3] * this.y;
+    this.x = x;
+    this.y = y;
+    return this;
+  },
+  _add: function (p) {
+    this.x += p.x;
+    this.y += p.y;
+    return this;
+  },
+  _sub: function (p) {
+    this.x -= p.x;
+    this.y -= p.y;
+    return this;
+  },
+  _mult: function (k) {
+    this.x *= k;
+    this.y *= k;
+    return this;
+  },
+  _div: function (k) {
+    this.x /= k;
+    this.y /= k;
+    return this;
+  },
+  _multByPoint: function (p) {
+    this.x *= p.x;
+    this.y *= p.y;
+    return this;
+  },
+  _divByPoint: function (p) {
+    this.x /= p.x;
+    this.y /= p.y;
+    return this;
+  },
+  _unit: function () {
+    this._div(this.mag());
+    return this;
+  },
+  _perp: function () {
+    var y = this.y;
+    this.y = this.x;
+    this.x = -y;
+    return this;
+  },
+  _rotate: function (angle) {
+    var cos = Math.cos(angle), sin = Math.sin(angle), x = cos * this.x - sin * this.y, y = sin * this.x + cos * this.y;
+    this.x = x;
+    this.y = y;
+    return this;
+  },
+  _rotateAround: function (angle, p) {
+    var cos = Math.cos(angle), sin = Math.sin(angle), x = p.x + cos * (this.x - p.x) - sin * (this.y - p.y), y = p.y + sin * (this.x - p.x) + cos * (this.y - p.y);
+    this.x = x;
+    this.y = y;
+    return this;
+  },
+  _round: function () {
+    this.x = Math.round(this.x);
+    this.y = Math.round(this.y);
+    return this;
+  }
+};
+Point$2.convert = function (a) {
+  if (a instanceof Point$2) {
+    return a;
+  }
+  if (Array.isArray(a)) {
+    return new Point$2(a[0], a[1]);
+  }
+  return a;
+};
+const {range: range$2} = _dll_lodash;
+const {head: head$1} = _dll_lodash;
+const {tail: tail$1} = _dll_lodash;
+const {isEqual: isEqual$7} = _dll_lodash;
+const xy$1 = (x, y) => ({
+  x,
+  y
+});
+const buildSizeArray$1 = (size, padding) => {
+  padding = Number.isFinite(padding) ? Math.max(padding, 0) : 0;
+  browser(padding < size, 'padding must be less than size');
+  const half = Math.round(padding * 0.5);
+  return [half, size - half];
+};
+const tickCount$1 = (min, max, step) => {
+  browser(min < max, 'min must be less than max');
+  const size = Math.abs(min - max);
+  return Math.round(size / step);
+};
+function getInterval$1(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$1 = (min, max, interval) => {
+  const raw = range$2(min, max, interval);
+  raw.splice(raw.length, 1, max);
+  return raw;
+};
+function snapTo$1(min, max, interval, value) {
+  if (value >= max) {
+    return max;
+  }
+  if (value <= min) {
+    return min;
+  }
+  let rng = mkRange$1(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$1(domain, ticks, interval, scaleFn) {
+  const rng = mkRange$1(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$2 = points => {
+  const h = head$1(points);
+  const area = {
+    left: h.x,
+    top: h.y,
+    bottom: h.y,
+    right: h.x
+  };
+  return tail$1(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$2 = (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$2 = (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$4 = o => new pointGeometry(o.x, o.y);
+const getDelta$1 = (from, to) => {
+  return point$4(to).sub(point$4(from));
+};
+const bandKey$1 = (d, index) => `${index}-${d.label || '-'}`;
+const isDomainRangeEqual$1 = (graphProps, nextGraphProps) => {
+  return isEqual$7(graphProps.domain, nextGraphProps.domain) && isEqual$7(graphProps.range, nextGraphProps.range);
+};
+const findLongestWord$2 = label => {
+  let longestWord = (label || '').replace(/<[^>]+>/g, '').split(' ').sort((a, b) => b.length - a.length);
+  return longestWord[0].length;
+};
+const amountToIncreaseWidth$2 = longestWord => {
+  if (!longestWord) {
+    return 0;
+  }
+  return longestWord * 20;
+};
+var utils$1 = Object.freeze({
+  __proto__: null,
+  xy: xy$1,
+  buildSizeArray: buildSizeArray$1,
+  tickCount: tickCount$1,
+  getInterval: getInterval$1,
+  snapTo: snapTo$1,
+  buildTickModel: buildTickModel$1,
+  polygonToArea: polygonToArea$2,
+  lineToArea: lineToArea$2,
+  bounds: bounds$2,
+  point: point$4,
+  getDelta: getDelta$1,
+  bandKey: bandKey$1,
+  isDomainRangeEqual: isDomainRangeEqual$1,
+  findLongestWord: findLongestWord$2,
+  amountToIncreaseWidth: amountToIncreaseWidth$2
+});
 const React$C = _dll_react;
 const PropTypes$A = _dll_prop_types;
 const debug$9 = _dll_debug;
@@ -3569,7 +3567,7 @@ var named = {
   yellow: 0xffff00,
   yellowgreen: 0x9acd32
 };
-define(Color, color$f, {
+define(Color, color$g, {
   copy: function (channels) {
     return Object.assign(new this.constructor(), this, channels);
   },
@@ -3591,7 +3589,7 @@ function color_formatHsl() {
 function color_formatRgb() {
   return this.rgb().formatRgb();
 }
-function color$f(format) {
+function color$g(format) {
   var m, l;
   format = (format + "").trim().toLowerCase();
   return (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) : l === 3 ? new Rgb(m >> 8 & 0xf | m >> 4 & 0xf0, m >> 4 & 0xf | m & 0xf0, (m & 0xf) << 4 | m & 0xf, 1) : l === 8 ? rgba(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) : l === 4 ? rgba(m >> 12 & 0xf | m >> 8 & 0xf0, m >> 8 & 0xf | m >> 4 & 0xf0, m >> 4 & 0xf | m & 0xf0, ((m & 0xf) << 4 | m & 0xf) / 0xff) : null) : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) : (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) : (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) : (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) : named.hasOwnProperty(format) ? rgbn(named[format]) : format === "transparent" ? new Rgb(NaN, NaN, NaN, 0) : null;
@@ -3604,7 +3602,7 @@ function rgba(r, g, b, a) {
   return new Rgb(r, g, b, a);
 }
 function rgbConvert(o) {
-  if (!(o instanceof Color)) o = color$f(o);
+  if (!(o instanceof Color)) o = color$g(o);
   if (!o) return new Rgb();
   o = o.rgb();
   return new Rgb(o.r, o.g, o.b, o.opacity);
@@ -3656,7 +3654,7 @@ function hsla(h, s, l, a) {
 }
 function hslConvert(o) {
   if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);
-  if (!(o instanceof Color)) o = color$f(o);
+  if (!(o instanceof Color)) o = color$g(o);
   if (!o) return new Hsl();
   if (o instanceof Hsl) return o;
   o = o.rgb();
@@ -3831,7 +3829,7 @@ function string(a, b) {
 }
 function interpolateValue(a, b) {
   var t = typeof b, c;
-  return b == null || t === "boolean" ? constant$2(b) : (t === "number" ? interpolateNumber : t === "string" ? (c = color$f(b)) ? (b = c, rgb) : string : b instanceof color$f ? rgb : b instanceof Date ? date$1 : isNumberArray(b) ? numberArray : Array.isArray(b) ? genericArray : typeof b.valueOf !== "function" && typeof b.toString !== "function" || isNaN(b) ? object : interpolateNumber)(a, b);
+  return b == null || t === "boolean" ? constant$2(b) : (t === "number" ? interpolateNumber : t === "string" ? (c = color$g(b)) ? (b = c, rgb) : string : b instanceof color$g ? rgb : b instanceof Date ? date$1 : isNumberArray(b) ? numberArray : Array.isArray(b) ? genericArray : typeof b.valueOf !== "function" && typeof b.toString !== "function" || isNaN(b) ? object : interpolateNumber)(a, b);
 }
 function interpolateRound(a, b) {
   return (a = +a, b = +b, function (t) {
@@ -5559,13 +5557,11 @@ const createSnapMinAndMax = ({min, max, step}) => {
 const create = (domain, range, size, getRootNode) => {
   browser(domain.min < domain.max, 'domain: min must be less than max');
   browser(range.min < range.max, 'range: min must be less than max');
-  const widthArray = buildSizeArray$1(size.width, domain.padding);
-  const heightArray = buildSizeArray$1(size.height, range.padding);
   const domainMinMax = createSnapMinAndMax(domain);
   const rangeMinMax = createSnapMinAndMax(range);
   const scale = {
-    x: linear().domain([domain.min, domain.max]).range(widthArray),
-    y: linear().domain([range.max, range.min]).range(heightArray)
+    x: linear().domain([domain.min, domain.max]).range([0, size.width]),
+    y: linear().domain([range.max, range.min]).range([0, size.height])
   };
   const snap = {
     x: snapTo$1.bind(null, domainMinMax.min, domainMinMax.max, domainMinMax.step),
@@ -5593,7 +5589,7 @@ var index$2 = Object.freeze({
 const React$B = _dll_react;
 const PropTypes$z = _dll_prop_types;
 const {withStyles: withStyles$j} = _dll_material_ui__core_styles;
-const {color: color$e} = _dll_pie_lib__render_ui;
+const {color: color$f} = _dll_pie_lib__render_ui;
 const {Readable: Readable$1} = _dll_pie_lib__render_ui;
 const _jsxFileName$t = "/home/circleci/repo/packages/graphing/src/labels.jsx";
 const rotations = {
@@ -5640,9 +5636,11 @@ class RawLabel extends React$B.Component {
   }
   render() {
     const {text, side, graphProps, classes} = this.props;
-    const {size} = graphProps;
-    const transform = getTransform(side, size.width, size.height);
-    const width = side === 'left' || side === 'right' ? size.height : size.width;
+    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);
     return React$B.createElement('foreignObject', {
@@ -5655,14 +5653,14 @@ class RawLabel extends React$B.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$t,
-        lineNumber: 63
+        lineNumber: 64
       }
     }, React$B.createElement(Readable$1, {
       false: true,
       __self: this,
       __source: {
         fileName: _jsxFileName$t,
-        lineNumber: 71
+        lineNumber: 72
       }
     }, React$B.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -5672,7 +5670,7 @@ class RawLabel extends React$B.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$t,
-        lineNumber: 72
+        lineNumber: 73
       }
     })));
   }
@@ -5680,7 +5678,7 @@ class RawLabel extends React$B.Component {
 RawLabel.__initStatic();
 const Label = withStyles$j(theme => ({
   label: {
-    fill: color$e.secondary()
+    fill: color$f.secondary()
   },
   axisLabel: {
     fontSize: theme.typography.fontSize,
@@ -5711,7 +5709,7 @@ class Labels extends React$B.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$t,
-        lineNumber: 108
+        lineNumber: 111
       }
     }, value && value.left && React$B.createElement(Label, {
       key: "left",
@@ -5721,7 +5719,7 @@ class Labels extends React$B.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$t,
-        lineNumber: 110
+        lineNumber: 113
       }
     }), value && value.top && React$B.createElement(Label, {
       key: "top",
@@ -5731,7 +5729,7 @@ class Labels extends React$B.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$t,
-        lineNumber: 113
+        lineNumber: 116
       }
     }), value && value.bottom && React$B.createElement(Label, {
       key: "bottom",
@@ -5741,7 +5739,7 @@ class Labels extends React$B.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$t,
-        lineNumber: 116
+        lineNumber: 119
       }
     }), value && value.right && React$B.createElement(Label, {
       key: "right",
@@ -5751,7 +5749,7 @@ class Labels extends React$B.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$t,
-        lineNumber: 119
+        lineNumber: 122
       }
     }));
   }
@@ -8531,7 +8529,7 @@ const isDuplicatedMark = (mark, marks, oldMark) => {
 const React$v = _dll_react;
 const PropTypes$t = _dll_prop_types;
 const {withStyles: withStyles$h} = _dll_material_ui__core;
-const {color: color$d} = _dll_pie_lib__render_ui;
+const {color: color$e} = _dll_pie_lib__render_ui;
 const {Readable: Readable} = _dll_pie_lib__render_ui;
 const _jsxFileName$r = "/home/circleci/repo/packages/graphing/src/axis/axes.jsx";
 const AxisPropTypes = {
@@ -8548,16 +8546,16 @@ const AxisDefaultProps = {
 };
 const axisStyles = theme => ({
   line: {
-    stroke: color$d.primary(),
+    stroke: color$e.primary(),
     strokeWidth: 5
   },
   arrow: {
-    fill: color$d.primary()
+    fill: color$e.primary()
   },
   tick: {
-    fill: color$d.primary(),
+    fill: color$e.primary(),
     '& > line': {
-      stroke: color$d.primary()
+      stroke: color$e.primary()
     }
   },
   labelFontSize: {
@@ -8722,11 +8720,11 @@ class RawYAxis extends React$v.Component {
       tickClassName: classes.tick,
       tickFormat: customTickFormat,
       tickLabelProps: value => {
-        const digits = value.toLocaleString().length || 1;
+        let digits = value.toLocaleString().replace(/[.-]/g, '').length || 1;
         return {
           ...tickLabelStyles,
           dy: 4,
-          dx: -4 - digits * 8,
+          dx: -10 - digits * 9,
           'data-pie-readable': false
         };
       },
@@ -8747,7 +8745,7 @@ class RawYAxis extends React$v.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 213
+        lineNumber: 214
       }
     }), includeArrows && includeArrows.up && React$v.createElement(Arrow$3, {
       direction: "up",
@@ -8758,7 +8756,7 @@ class RawYAxis extends React$v.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 216
+        lineNumber: 217
       }
     }), range.axisLabel && React$v.createElement('foreignObject', {
       x: scale.x(0) - necessaryWidth / 2,
@@ -8768,14 +8766,14 @@ class RawYAxis extends React$v.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 219
+        lineNumber: 220
       }
     }, React$v.createElement(Readable, {
       false: true,
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 225
+        lineNumber: 226
       }
     }, React$v.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -8785,7 +8783,7 @@ class RawYAxis extends React$v.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 226
+        lineNumber: 227
       }
     }))));
   }
@@ -8859,7 +8857,7 @@ class Axes extends React$v.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 307
+        lineNumber: 308
       }
     }, range.min <= 0 ? React$v.createElement(XAxis, {
       ...this.props,
@@ -8870,7 +8868,7 @@ class Axes extends React$v.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 309
+        lineNumber: 310
       }
     }) : null, domain.min <= 0 ? React$v.createElement(YAxis, {
       ...this.props,
@@ -8880,7 +8878,7 @@ class Axes extends React$v.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 318
+        lineNumber: 319
       }
     }) : null);
   }
@@ -9069,12 +9067,18 @@ function Grid$2(_ref) {
 }
 const React$t = _dll_react;
 const PropTypes$r = _dll_prop_types;
+const {color: color$d} = _dll_pie_lib__render_ui;
 const {withStyles: withStyles$g} = _dll_material_ui__core_styles;
 const _jsxFileName$q = "/home/circleci/repo/packages/graphing/src/grid.jsx";
 class Grid extends React$t.Component {
+  constructor(...args) {
+    super(...args);
+    Grid.prototype.__init.call(this);
+  }
   static __initStatic() {
     this.propTypes = {
       disabled: PropTypes$r.bool,
+      disabledAdditionalGrid: PropTypes$r.bool,
       classes: PropTypes$r.object.isRequired,
       graphProps: GraphPropsType.isRequired
     };
@@ -9084,26 +9088,80 @@ class Grid extends React$t.Component {
     const {graphProps: nextGraphProps} = nextProps;
     return !isDomainRangeEqual$1(graphProps, nextGraphProps);
   }
+  __init() {
+    this.getAdditionalGridProps = (rowTickValues, columnTickValues) => {
+      const {graphProps: {scale, size: {width, height}, domain, range}} = this.props;
+      const rowTickLabelValues = getTickValues({
+        ...range,
+        step: range.labelStep
+      }).filter(value => rowTickValues.includes(value));
+      const columnTickLabelValues = getTickValues({
+        ...domain,
+        step: domain.labelStep
+      }).filter(value => columnTickValues.includes(value));
+      const minValueLength = rowTickLabelValues.length && Math.min(...rowTickLabelValues).toString().replace(/[.-]/g, '').length || 1;
+      const maxValueLength = rowTickLabelValues.length && Math.max(...rowTickLabelValues).toString().replace(/[.-]/g, '').length || 1;
+      const rowLabelLength = Math.max(minValueLength, maxValueLength) * 9 + 22;
+      const horizontalDistanceToZero = scale.x(0);
+      const verticalDistanceToZero = scale.y(0);
+      const columnLabelLength = 28;
+      const rowStrokeDasharray = `${horizontalDistanceToZero - rowLabelLength} ${rowLabelLength} ${width}`;
+      const columnStrokeDasharray = `${verticalDistanceToZero} ${columnLabelLength} ${height}`;
+      const displayAdditionalGrid = domain.labelStep > 0 && range.labelStep > 0 && rowTickLabelValues && columnTickLabelValues && rowTickLabelValues.length > 1 && columnTickLabelValues.length > 1 && (rowTickLabelValues.length !== rowTickValues.length || columnTickLabelValues.length !== columnTickValues.length);
+      const filteredColumnValues = columnTickLabelValues.filter(value => value >= 0 || horizontalDistanceToZero - scale.x(value) > rowLabelLength);
+      const filteredRowValues = rowTickLabelValues.filter(value => value >= 0 || scale.y(value) - verticalDistanceToZero > columnLabelLength);
+      return {
+        rowTickLabelValues: filteredRowValues,
+        columnTickLabelValues: filteredColumnValues,
+        rowStrokeDasharray,
+        columnStrokeDasharray,
+        displayAdditionalGrid
+      };
+    };
+  }
   render() {
     const {classes, graphProps} = this.props;
-    const {scale, size, domain, range} = graphProps;
+    const {scale, size: {height, width}, domain, range} = graphProps;
     const rowTickValues = getTickValues(range);
-    const columnTicksValues = getTickValues(domain);
-    return React$t.createElement(Grid$2, {
+    const columnTickValues = getTickValues(domain);
+    const {rowTickLabelValues, columnTickLabelValues, rowStrokeDasharray, columnStrokeDasharray, displayAdditionalGrid} = this.getAdditionalGridProps(rowTickValues, columnTickValues);
+    return React$t.createElement(React$t.Fragment, null, React$t.createElement(Grid$2, {
       innerRef: r => this.grid = r,
       xScale: scale.x,
       yScale: scale.y,
-      width: size.width,
-      height: size.height,
+      width: width,
+      height: height,
       className: classes.grid,
       rowTickValues: rowTickValues,
-      columnTickValues: columnTicksValues,
+      columnTickValues: columnTickValues,
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 28
+        lineNumber: 109
       }
-    });
+    }), displayAdditionalGrid && React$t.createElement(React$t.Fragment, null, React$t.createElement(Rows, {
+      scale: scale.y,
+      width: width,
+      tickValues: rowTickLabelValues,
+      stroke: color$d.primary(),
+      strokeDasharray: rowStrokeDasharray,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$q,
+        lineNumber: 121
+      }
+    }), React$t.createElement(Columns, {
+      scale: scale.x,
+      height: height,
+      tickValues: columnTickLabelValues,
+      stroke: color$d.primary(),
+      strokeDasharray: columnStrokeDasharray,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$q,
+        lineNumber: 128
+      }
+    })));
   }
 }
 Grid.__initStatic();
@@ -9338,7 +9396,6 @@ class Graph extends React$r.Component {
       currentTool
     });
     return React$r.createElement(Root$2, {
-      paddingLeft: 60,
       rootRef: r => this.rootNode = r,
       title: title,
       ...common,
@@ -9347,12 +9404,27 @@ class Graph extends React$r.Component {
         fileName: _jsxFileName$o,
         lineNumber: 168
       }
+    }, React$r.createElement(Labels, {
+      value: labels,
+      ...common,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$o,
+        lineNumber: 169
+      }
+    }), React$r.createElement('g', {
+      transform: `translate(${domain.padding}, ${range.padding})`,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$o,
+        lineNumber: 170
+      }
     }, React$r.createElement(Grid$1, {
       ...common,
       __self: this,
       __source: {
         fileName: _jsxFileName$o,
-        lineNumber: 175
+        lineNumber: 171
       }
     }), React$r.createElement(Axes, {
       ...axesSettings,
@@ -9360,7 +9432,7 @@ class Graph extends React$r.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$o,
-        lineNumber: 176
+        lineNumber: 172
       }
     }), React$r.createElement(Bg, {
       ...size,
@@ -9369,22 +9441,14 @@ class Graph extends React$r.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$o,
-        lineNumber: 177
-      }
-    }), React$r.createElement(Labels, {
-      value: labels,
-      ...common,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$o,
-        lineNumber: 178
+        lineNumber: 173
       }
     }), React$r.createElement('mask', {
       id: "myMask",
       __self: this,
       __source: {
         fileName: _jsxFileName$o,
-        lineNumber: 179
+        lineNumber: 174
       }
     }, React$r.createElement('rect', {
       ...maskSize,
@@ -9392,7 +9456,7 @@ class Graph extends React$r.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$o,
-        lineNumber: 180
+        lineNumber: 175
       }
     }), " "), React$r.createElement('g', {
       id: "marks",
@@ -9400,7 +9464,7 @@ class Graph extends React$r.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$o,
-        lineNumber: 183
+        lineNumber: 178
       }
     }, (backgroundMarks || []).map((m, index) => {
       const Component = this.getComponent(m);
@@ -9417,7 +9481,7 @@ class Graph extends React$r.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName$o,
-          lineNumber: 189
+          lineNumber: 184
         }
       });
     }), marks.map((m, index) => {
@@ -9438,7 +9502,7 @@ class Graph extends React$r.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName$o,
-          lineNumber: 203
+          lineNumber: 198
         }
       });
     }), React$r.createElement('foreignObject', {
@@ -9452,9 +9516,9 @@ class Graph extends React$r.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$o,
-        lineNumber: 219
+        lineNumber: 214
       }
-    })));
+    }))));
   }
 }
 Graph.__initStatic();

package/module/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/graphing-module",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "mappings": {
     "@pie-lib/plot": "_dll_pie_lib__plot",
     "@pie-lib/graphing": "_dll_pie_lib__graphing",
@@ -10,10 +10,10 @@
   "versionInfo": {
     "data": {
       "@pie-lib/plot": {
-        "version": "2.1.10"
+        "version": "2.2.0"
       },
       "@pie-lib/graphing": {
-        "version": "2.5.1"
+        "version": "2.6.0"
       },
       "d3-scale": {
         "version": "2.2.2"
@@ -22,12 +22,12 @@
         "version": "1.4.2"
       }
     },
-    "hash": "257c0fdefc46812abe6844a784d85894ed0f9b14"
+    "hash": "ce2eb74aa5c7e6b92e4dcff82ca7614a2ab181aa"
   },
   "modules": [
     {
       "name": "@pie-lib/shared-module",
-      "version": "^1.4.15"
+      "version": "^1.4.18"
     }
   ],
   "isLocal": true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/graphing-module",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "module": "module/index.js",
   "repository": "pie-framework/pie-lib",
   "publishConfig": {