@pie-lib/graphing-module 1.0.16 → 1.0.17

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.2.17/module/index.js";
+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.2.18/module/index.js";
 const PropTypes$C = _dll_prop_types;
 const BaseDomainRangeType = {
   min: PropTypes$C.number.isRequired,
@@ -8298,24 +8298,24 @@ const style = {
 class Arrow$2 extends React$w.Component {
   render() {
     const {x, y, classes, className, scale} = this.props;
+    const names = classNames$f(classes.root, className);
     let direction = this.props.direction || 'left';
     const xv = scale.x(x);
     const yv = scale.y(y);
     let transform = '';
     const getTransform = (x, y, rotate) => `translate(${x}, ${y}) rotate(${rotate})`;
     if (direction === 'left') {
-      transform = getTransform(xv - 7, yv, 0);
+      transform = getTransform(xv - 15, yv, 0);
     }
     if (direction === 'right') {
-      transform = getTransform(xv + 7, yv, 180);
+      transform = getTransform(xv + 15, yv, 180);
     }
     if (direction === 'up') {
-      transform = getTransform(xv, yv - 7, 90);
+      transform = getTransform(xv, yv - 15, 90);
     }
     if (direction === 'down') {
-      transform = getTransform(xv, yv + 7, 270);
+      transform = getTransform(xv, yv + 15, 270);
     }
-    const names = classNames$f(classes.root, className);
     return React$w.createElement('path', {
       d: "m 0,0 8,-5 0,10 -8,-5",
       transform: transform,
@@ -8445,6 +8445,23 @@ const thinnerShapesNeeded = graphProps => {
   const {domain, range, size: {width, height}} = graphProps;
   return getDistanceBetweenTicks(domain, width) < 14 || getDistanceBetweenTicks(range, height) < 14;
 };
+const getAdjustedGraphLimits = graphProps => {
+  const {domain, range, size: {width, height}} = graphProps;
+  const domainTicksDistance = getDistanceBetweenTicks(domain, width);
+  const rangeTicksDistance = getDistanceBetweenTicks(range, height);
+  const domainPadding = domain.step / (domainTicksDistance / 15);
+  const rangePadding = range.step / (rangeTicksDistance / 15);
+  return {
+    domain: {
+      min: domain.min - domainPadding,
+      max: domain.max + domainPadding
+    },
+    range: {
+      min: range.min - rangePadding,
+      max: range.max + rangePadding
+    }
+  };
+};
 const React$v = _dll_react;
 const PropTypes$t = _dll_prop_types;
 const {withStyles: withStyles$h} = _dll_material_ui__core;
@@ -8496,9 +8513,9 @@ const tickLabelStyles = {
   fontSize: '14px',
   cursor: 'inherit'
 };
-const sharedValues = (firstNegativeX, firstNegativeY, distantceFromOriginToFirstNegativeX, distantceFromOriginToFirstNegativeY, deltaAllowance, dy) => {
+const sharedValues = (firstNegativeX, firstNegativeY, distanceFromOriginToFirstNegativeX, distanceFromOriginToFirstNegativeY, deltaAllowance, dy) => {
   let result = [];
-  if (firstNegativeX === firstNegativeY && distantceFromOriginToFirstNegativeX - deltaAllowance < distantceFromOriginToFirstNegativeY && distantceFromOriginToFirstNegativeY < distantceFromOriginToFirstNegativeX + deltaAllowance && distantceFromOriginToFirstNegativeX - deltaAllowance < dy && dy < distantceFromOriginToFirstNegativeX + deltaAllowance) {
+  if (firstNegativeX === firstNegativeY && distanceFromOriginToFirstNegativeX - deltaAllowance < distanceFromOriginToFirstNegativeY && distanceFromOriginToFirstNegativeY < distanceFromOriginToFirstNegativeX + deltaAllowance && distanceFromOriginToFirstNegativeX - deltaAllowance < dy && dy < distanceFromOriginToFirstNegativeX + deltaAllowance) {
     result.push(firstNegativeX);
   }
   return result;
@@ -8516,14 +8533,11 @@ class RawXAxis extends React$v.Component {
     this.defaultProps = AxisDefaultProps;
   }
   render() {
-    const {includeArrows, classes, graphProps, columnTicksValues, skipValues, distantceFromOriginToFirstNegativeY, dy} = this.props;
+    const {includeArrows, classes, graphProps, columnTicksValues, skipValues, distanceFromOriginToFirstNegativeY, dy} = this.props;
     const {scale, domain, size, range} = graphProps || ({});
     const tickValues = (domain.labelStep || range.labelStep) && domain.min <= 0 ? ['0', ...columnTicksValues] : columnTicksValues;
     const labelProps = label => {
-      let y = dy;
-      if (skipValues && skipValues[0] === label) {
-        y = distantceFromOriginToFirstNegativeY + 4;
-      }
+      const y = skipValues && skipValues[0] === label ? distanceFromOriginToFirstNegativeY + 4 : dy;
       return {
         ...tickLabelStyles,
         textAnchor: 'middle',
@@ -8539,7 +8553,7 @@ class RawXAxis extends React$v.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 133
+        lineNumber: 129
       }
     }, React$v.createElement(Axis, {
       axisLineClassName: classes.line,
@@ -8547,6 +8561,7 @@ class RawXAxis extends React$v.Component {
       top: scale.y(0),
       left: 0,
       label: domain.label,
+      rangePadding: 8,
       tickClassName: classes.tick,
       tickFormat: value => value,
       tickLabelProps: labelProps,
@@ -8554,7 +8569,7 @@ class RawXAxis extends React$v.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 134
+        lineNumber: 130
       }
     }), includeArrows && includeArrows.left && React$v.createElement(Arrow$3, {
       direction: "left",
@@ -8565,7 +8580,7 @@ class RawXAxis extends React$v.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 146
+        lineNumber: 143
       }
     }), includeArrows && includeArrows.right && React$v.createElement(Arrow$3, {
       direction: "right",
@@ -8576,17 +8591,17 @@ class RawXAxis extends React$v.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 149
+        lineNumber: 146
       }
     }), domain.axisLabel && React$v.createElement('foreignObject', {
-      x: size.width + 10,
+      x: size.width + 15,
       y: scale.y(0) - 10,
       width: necessaryWidth,
       height: 20 * necessaryRows,
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 152
+        lineNumber: 149
       }
     }, React$v.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -8596,7 +8611,7 @@ class RawXAxis extends React$v.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 158
+        lineNumber: 155
       }
     })));
   }
@@ -8618,17 +8633,12 @@ class RawYAxis extends React$v.Component {
     const {classes, includeArrows, graphProps, skipValues, rowTickValues} = this.props;
     const {scale, range, size} = graphProps || ({});
     const necessaryWidth = range.axisLabel ? amountToIncreaseWidth(range.axisLabel.length) : 0;
-    const customTickFormat = value => {
-      if (skipValues && skipValues.indexOf(value) >= 0) {
-        return '';
-      }
-      return value;
-    };
+    const customTickFormat = value => skipValues && skipValues.indexOf(value) >= 0 ? '' : value;
     return React$v.createElement(React$v.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 193
+        lineNumber: 184
       }
     }, React$v.createElement(Axis, {
       axisLineClassName: classes.line,
@@ -8641,6 +8651,7 @@ class RawYAxis extends React$v.Component {
       labelProps: {
         'data-pie-readable': false
       },
+      rangePadding: 8,
       tickLength: 10,
       tickClassName: classes.tick,
       tickFormat: customTickFormat,
@@ -8659,7 +8670,7 @@ class RawYAxis extends React$v.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 194
+        lineNumber: 185
       }
     }), includeArrows && includeArrows.down && React$v.createElement(Arrow$3, {
       direction: "down",
@@ -8670,7 +8681,7 @@ class RawYAxis extends React$v.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 221
+        lineNumber: 213
       }
     }), includeArrows && includeArrows.up && React$v.createElement(Arrow$3, {
       direction: "up",
@@ -8681,24 +8692,24 @@ class RawYAxis extends React$v.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 224
+        lineNumber: 216
       }
     }), range.axisLabel && React$v.createElement('foreignObject', {
       x: scale.x(0) - necessaryWidth / 2,
-      y: -25,
+      y: -30,
       width: necessaryWidth,
       height: "20",
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 227
+        lineNumber: 219
       }
     }, React$v.createElement(Readable, {
       false: true,
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 233
+        lineNumber: 225
       }
     }, React$v.createElement('div', {
       dangerouslySetInnerHTML: {
@@ -8708,7 +8719,7 @@ class RawYAxis extends React$v.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 234
+        lineNumber: 226
       }
     }))));
   }
@@ -8747,7 +8758,7 @@ class Axes extends React$v.Component {
       return {
         columnTicksValues: ticks,
         firstNegativeX: negative,
-        distantceFromOriginToFirstNegativeX: Math.abs(scale.y(0) - scale.y(negative))
+        distanceFromOriginToFirstNegativeX: Math.abs(scale.y(0) - scale.y(negative))
       };
     };
   }
@@ -8766,45 +8777,44 @@ class Axes extends React$v.Component {
       return {
         rowTickValues: ticks,
         firstNegativeY: negative,
-        distantceFromOriginToFirstNegativeY: Math.abs(scale.x(0) - scale.x(negative))
+        distanceFromOriginToFirstNegativeY: Math.abs(scale.x(0) - scale.x(negative))
       };
     };
   }
   render() {
     const {graphProps} = this.props;
     const {domain, range} = graphProps || ({});
-    const {columnTicksValues, firstNegativeX, distantceFromOriginToFirstNegativeX} = this.xValues();
-    this.xValues();
-    const {rowTickValues, firstNegativeY, distantceFromOriginToFirstNegativeY} = this.yValues();
+    const {columnTicksValues, firstNegativeX, distanceFromOriginToFirstNegativeX} = this.xValues();
+    const {rowTickValues, firstNegativeY, distanceFromOriginToFirstNegativeY} = this.yValues();
     const deltaAllowance = 6;
     const dy = 25;
-    const skipValues = sharedValues(firstNegativeX, firstNegativeY, distantceFromOriginToFirstNegativeX, distantceFromOriginToFirstNegativeY, deltaAllowance, dy);
+    const skipValues = sharedValues(firstNegativeX, firstNegativeY, distanceFromOriginToFirstNegativeX, distanceFromOriginToFirstNegativeY, deltaAllowance, dy);
     return React$v.createElement(React$v.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 318
+        lineNumber: 307
       }
     }, range.min <= 0 ? React$v.createElement(XAxis, {
       ...this.props,
       skipValues: skipValues,
       columnTicksValues: columnTicksValues,
-      distantceFromOriginToFirstNegativeY: distantceFromOriginToFirstNegativeY,
+      distanceFromOriginToFirstNegativeY: distanceFromOriginToFirstNegativeY,
       dy: dy,
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 320
+        lineNumber: 309
       }
     }) : null, domain.min <= 0 ? React$v.createElement(YAxis, {
       ...this.props,
       skipValues: skipValues,
       rowTickValues: rowTickValues,
-      distantceFromOriginToFirstNegativeX: distantceFromOriginToFirstNegativeX,
+      distanceFromOriginToFirstNegativeX: distanceFromOriginToFirstNegativeX,
       __self: this,
       __source: {
         fileName: _jsxFileName$r,
-        lineNumber: 329
+        lineNumber: 318
       }
     }) : null);
   }
@@ -9133,10 +9143,10 @@ const graphPropTypes = {
   tools: PropTypes$p.array
 };
 const getMaskSize = size => ({
-  x: -10,
-  y: -10,
-  width: size.width + 20,
-  height: size.height + 20
+  x: -23,
+  y: -23,
+  width: size.width + 46,
+  height: size.height + 46
 });
 const removeBuildingToolIfCurrentToolDiffers = ({marks, currentTool}) => {
   const buildingMark = marks.filter(m => m.building)[0];
@@ -13981,19 +13991,20 @@ const lineStyles$2 = theme => ({
 const ArrowedLine = props => {
   const {className, classes, correctness, disabled, graphProps, from, to, ...rest} = props;
   const {scale} = graphProps;
-  const [eFrom, eTo] = edges(graphProps.domain, graphProps.range)(from, to);
+  const {domain, range} = getAdjustedGraphLimits(graphProps);
+  const [eFrom, eTo] = edges(domain, range)(from, to);
   const suffix = correctness || disabled && 'disabled' || 'enabled';
   return React$8.createElement('g', {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$8,
-      lineNumber: 29
+      lineNumber: 32
     }
   }, React$8.createElement('defs', {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$8,
-      lineNumber: 30
+      lineNumber: 33
     }
   }, React$8.createElement(ArrowMarker, {
     size: thinnerShapesNeeded(graphProps) ? 4 : 5,
@@ -14002,7 +14013,7 @@ const ArrowedLine = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$8,
-      lineNumber: 31
+      lineNumber: 34
     }
   })), React$8.createElement('line', {
     x1: scale.x(eFrom.x),
@@ -14016,7 +14027,7 @@ const ArrowedLine = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$8,
-      lineNumber: 37
+      lineNumber: 40
     }
   }));
 };
@@ -14096,19 +14107,20 @@ const rayStyles = theme => ({
 const RayLine = props => {
   const {graphProps, from, to, classes, disabled, correctness, className, ...rest} = props;
   const {scale} = graphProps;
-  const [aToB] = edges(graphProps.domain, graphProps.range)(from, to);
+  const {domain, range} = getAdjustedGraphLimits(graphProps);
+  const [aToB] = edges(domain, range)(from, to);
   const suffix = correctness || disabled && 'disabled' || 'enabled';
   return React$6.createElement('g', {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$6,
-      lineNumber: 29
+      lineNumber: 31
     }
   }, React$6.createElement('defs', {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$6,
-      lineNumber: 30
+      lineNumber: 32
     }
   }, React$6.createElement(ArrowMarker, {
     size: thinnerShapesNeeded(graphProps) ? 4 : 5,
@@ -14117,7 +14129,7 @@ const RayLine = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$6,
-      lineNumber: 31
+      lineNumber: 33
     }
   })), React$6.createElement('line', {
     x1: scale.x(from.x),
@@ -14130,7 +14142,7 @@ const RayLine = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$6,
-      lineNumber: 37
+      lineNumber: 39
     }
   }));
 };

package/module/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/graphing-module",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "mappings": {
     "@pie-lib/plot": "_dll_pie_lib__plot",
     "@pie-lib/graphing": "_dll_pie_lib__graphing",
@@ -27,7 +27,7 @@
   "modules": [
     {
       "name": "@pie-lib/shared-module",
-      "version": "^1.2.17"
+      "version": "^1.2.18"
     }
   ],
   "isLocal": true

package/package.json

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