@pie-lib/plot 2.1.10-next.540 → 2.1.10-next.589

package/lib/grid-draggable.js

@@ -63,7 +63,8 @@ var deltaFn = function deltaFn(scale, snap, val) {
   return function (delta) {
     var normalized = delta + scale(0);
     var inverted = scale.invert(normalized);
-    return snap(val + inverted);
+    var fixDecimalsArithmetic = snap(val + inverted).toFixed(4) * 1000 / 1000;
+    return fixDecimalsArithmetic;
   };
 };
 /**

package/lib/grid-draggable.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid-draggable.js","names":["log","debug","deltaFn","scale","snap","val","delta","normalized","inverted","invert","gridDraggable","opts","Comp","invariant","isFunction","fromDelta","bounds","anchorPoint","graphProps","props","domain","range","x","step","y","e","onDragStart","document","activeElement","blur","setState","startX","clientX","startY","clientY","key","event","K","toUpperCase","end","start","state","Math","abs","out","grid","scaled","left","interval","right","top","bottom","dd","rootNode","getRootNode","clientPoint","rawX","rawY","xOutside","deltaX","min","max","yOutside","deltaY","onDrag","getScaledBounds","skipDragOutsideOfBounds","dragArg","applyDelta","undefined","point","pos","position","p","utils","getDelta","onDragStop","onClick","lastX","lastY","isClick","tiny","target","disabled","rest","onMouseDown","nativeEvent","preventDefault","isDragging","onStart","onStop","axis","React","Component","PropTypes","bool","func","onMove","GraphPropsType","isRequired"],"sources":["../src/grid-draggable.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { GraphPropsType } from './types';\nimport { DraggableCore } from './draggable';\nimport debug from 'debug';\nimport * as utils from './utils';\nimport isFunction from 'lodash/isFunction';\nimport invariant from 'invariant';\nimport { clientPoint } from 'd3-selection';\nconst log = debug('pie-lib:plot:grid-draggable');\nexport const deltaFn = (scale, snap, val) => delta => {\n  const normalized = delta + scale(0);\n  const inverted = scale.invert(normalized);\n  return snap(val + inverted);\n};\n/**\n * Creates a Component that is draggable, within a bounded grid.\n * @param {*} opts\n */\nexport const gridDraggable = opts => Comp => {\n  invariant(\n    !!opts && isFunction(opts.fromDelta) && isFunction(opts.bounds) && isFunction(opts.anchorPoint),\n    'You must supply an object with: { anchorPoint: Function, fromDelta: Function, bounds: Function }'\n  );\n  return class GridDraggable extends React.Component {\n    static propTypes = {\n      disabled: PropTypes.bool,\n      onDragStart: PropTypes.func,\n      onDrag: PropTypes.func,\n      onDragStop: PropTypes.func,\n      onClick: PropTypes.func,\n      onMove: PropTypes.func,\n      graphProps: GraphPropsType.isRequired\n    };\n    grid = () => {\n      const { graphProps } = this.props;\n      const { scale, domain, range } = graphProps;\n      return {\n        x: scale.x(domain.step) - scale.x(0),\n        y: scale.y(range.step) - scale.y(0)\n      };\n    };\n    onStart = e => {\n      const { onDragStart } = this.props;\n      if (document.activeElement) {\n        document.activeElement.blur();\n      }\n      this.setState({ startX: e.clientX, startY: e.clientY });\n      if (onDragStart) {\n        onDragStart();\n      }\n    };\n    position = () => {\n      const { x, y } = opts.anchorPoint(this.props);\n      const { graphProps } = this.props;\n      const { scale, snap } = graphProps;\n      return {\n        anchorPoint: {\n          x,\n          y\n        },\n        x: deltaFn(scale.x, snap.x, x),\n        y: deltaFn(scale.y, snap.y, y)\n      };\n    };\n\n    tiny = (key, event) => {\n      const K = key.toUpperCase();\n      const end = event[`client${K}`];\n      const start = this.state[`start${K}`];\n      const delta = Math.abs(end - start);\n      const out = delta < Math.abs(this.grid()[key]) / 10;\n      log('[tiny] key: ', key, 'delta: ', delta, 'out: ', out);\n      return out;\n    };\n\n    getScaledBounds = () => {\n      const bounds = opts.bounds(this.props, this.props.graphProps);\n      log('bounds: ', bounds);\n      const grid = this.grid();\n\n      const scaled = {\n        left: (bounds.left / grid.interval) * grid.x,\n        right: (bounds.right / grid.interval) * grid.x,\n        top: (bounds.top / grid.interval) * grid.y,\n        bottom: (bounds.bottom / grid.interval) * grid.y\n      };\n      log('[getScaledBounds]: ', scaled);\n      return scaled;\n    };\n\n    skipDragOutsideOfBounds = (dd, e, graphProps) => {\n      // ignore drag movement outside of the domain and range.\n      const rootNode = graphProps.getRootNode();\n      const [rawX, rawY] = clientPoint(rootNode, e);\n      const { scale, domain, range } = graphProps;\n      let x = scale.x.invert(rawX);\n      let y = scale.y.invert(rawY);\n\n      const xOutside = (dd.deltaX > 0 && x < domain.min) || (dd.deltaX < 0 && x > domain.max);\n      const yOutside = (dd.deltaY > 0 && y > range.max) || (dd.deltaY < 0 && y < range.min);\n      return xOutside || yOutside;\n    };\n\n    onDrag = (e, dd) => {\n      const { onDrag, graphProps } = this.props;\n\n      if (!onDrag) {\n        return;\n      }\n\n      const bounds = this.getScaledBounds();\n\n      if (dd.deltaX < 0 && dd.deltaX < bounds.left) {\n        return;\n      }\n\n      if (dd.deltaX > 0 && dd.deltaX > bounds.right) {\n        return;\n      }\n\n      if (dd.deltaY < 0 && dd.deltaY < bounds.top) {\n        return;\n      }\n\n      if (dd.deltaY > 0 && dd.deltaY > bounds.bottom) {\n        return;\n      }\n\n      if (this.skipDragOutsideOfBounds(dd, e, graphProps)) {\n        return;\n      }\n\n      const dragArg = this.applyDelta({ x: dd.deltaX, y: dd.deltaY });\n\n      if (dragArg !== undefined || dragArg !== null) {\n        onDrag(dragArg);\n      }\n    };\n\n    getDelta = point => {\n      const pos = this.position();\n\n      const p = {\n        x: pos.x(point.x),\n        y: pos.y(point.y)\n      };\n\n      return utils.getDelta(pos.anchorPoint, p);\n    };\n\n    applyDelta = point => {\n      const delta = this.getDelta(point);\n      log('[applyDelta] delta:', delta);\n      return opts.fromDelta(this.props, delta);\n    };\n\n    onStop = (e, dd) => {\n      log('[onStop] dd:', dd);\n      const { onDragStop, onClick } = this.props;\n\n      if (onDragStop) {\n        onDragStop();\n      }\n\n      log('[onStop] lastX/Y: ', dd.lastX, dd.lastY);\n      const isClick = this.tiny('x', e) && this.tiny('y', e);\n\n      if (isClick) {\n        if (onClick) {\n          log('call onClick');\n          this.setState({ startX: null });\n          const { graphProps } = this.props;\n          const { scale, snap } = graphProps;\n          const [rawX, rawY] = clientPoint(e.target, e);\n          let x = scale.x.invert(rawX);\n          let y = scale.y.invert(rawY);\n          x = snap.x(x);\n          y = snap.y(y);\n          onClick({ x, y });\n          return false;\n        }\n      }\n\n      this.setState({ startX: null, startY: null });\n      // return false to prevent state updates in the underlying draggable - a move will have triggered an update already.\n      return false;\n    };\n\n    render() {\n      /* eslint-disable no-unused-vars */\n      //Note: we pull onClick out so that it's not in ...rest.\n      const { disabled, onClick, ...rest } = this.props;\n      /* eslint-enable no-unused-vars */\n\n      const grid = this.grid();\n      //prevent the text select icon from rendering.\n      const onMouseDown = e => e.nativeEvent.preventDefault();\n\n      /**\n       * TODO: This shouldnt be necessary, we should be able to use the r-d classnames.\n       * But they aren't being unset. If we continue with this lib, we'll have to fix this.\n       */\n      const isDragging = this.state ? !!this.state.startX : false;\n\n      return (\n        <DraggableCore\n          disabled={disabled}\n          onMouseDown={onMouseDown}\n          onStart={this.onStart}\n          onDrag={this.onDrag}\n          onStop={this.onStop}\n          axis={opts.axis || 'both'}\n          grid={[grid.x, grid.y]}\n        >\n          <Comp {...rest} disabled={disabled} isDragging={isDragging} />\n        </DraggableCore>\n      );\n    }\n  };\n};\n"],"mappings":"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"}
+{"version":3,"file":"grid-draggable.js","names":["log","debug","deltaFn","scale","snap","val","delta","normalized","inverted","invert","fixDecimalsArithmetic","toFixed","gridDraggable","opts","Comp","invariant","isFunction","fromDelta","bounds","anchorPoint","graphProps","props","domain","range","x","step","y","e","onDragStart","document","activeElement","blur","setState","startX","clientX","startY","clientY","key","event","K","toUpperCase","end","start","state","Math","abs","out","grid","scaled","left","interval","right","top","bottom","dd","rootNode","getRootNode","clientPoint","rawX","rawY","xOutside","deltaX","min","max","yOutside","deltaY","onDrag","getScaledBounds","skipDragOutsideOfBounds","dragArg","applyDelta","undefined","point","pos","position","p","utils","getDelta","onDragStop","onClick","lastX","lastY","isClick","tiny","target","disabled","rest","onMouseDown","nativeEvent","preventDefault","isDragging","onStart","onStop","axis","React","Component","PropTypes","bool","func","onMove","GraphPropsType","isRequired"],"sources":["../src/grid-draggable.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { GraphPropsType } from './types';\nimport { DraggableCore } from './draggable';\nimport debug from 'debug';\nimport * as utils from './utils';\nimport isFunction from 'lodash/isFunction';\nimport invariant from 'invariant';\nimport { clientPoint } from 'd3-selection';\n\nconst log = debug('pie-lib:plot:grid-draggable');\n\nexport const deltaFn = (scale, snap, val) => delta => {\n  const normalized = delta + scale(0);\n  const inverted = scale.invert(normalized);\n\n  const fixDecimalsArithmetic = (snap(val + inverted).toFixed(4) * 1000) / 1000;\n\n  return fixDecimalsArithmetic;\n};\n\n/**\n * Creates a Component that is draggable, within a bounded grid.\n * @param {*} opts\n */\nexport const gridDraggable = opts => Comp => {\n  invariant(\n    !!opts && isFunction(opts.fromDelta) && isFunction(opts.bounds) && isFunction(opts.anchorPoint),\n    'You must supply an object with: { anchorPoint: Function, fromDelta: Function, bounds: Function }'\n  );\n  return class GridDraggable extends React.Component {\n    static propTypes = {\n      disabled: PropTypes.bool,\n      onDragStart: PropTypes.func,\n      onDrag: PropTypes.func,\n      onDragStop: PropTypes.func,\n      onClick: PropTypes.func,\n      onMove: PropTypes.func,\n      graphProps: GraphPropsType.isRequired\n    };\n    grid = () => {\n      const { graphProps } = this.props;\n      const { scale, domain, range } = graphProps;\n      return {\n        x: scale.x(domain.step) - scale.x(0),\n        y: scale.y(range.step) - scale.y(0)\n      };\n    };\n    onStart = e => {\n      const { onDragStart } = this.props;\n      if (document.activeElement) {\n        document.activeElement.blur();\n      }\n      this.setState({ startX: e.clientX, startY: e.clientY });\n      if (onDragStart) {\n        onDragStart();\n      }\n    };\n    position = () => {\n      const { x, y } = opts.anchorPoint(this.props);\n      const { graphProps } = this.props;\n      const { scale, snap } = graphProps;\n      return {\n        anchorPoint: {\n          x,\n          y\n        },\n        x: deltaFn(scale.x, snap.x, x),\n        y: deltaFn(scale.y, snap.y, y)\n      };\n    };\n\n    tiny = (key, event) => {\n      const K = key.toUpperCase();\n      const end = event[`client${K}`];\n      const start = this.state[`start${K}`];\n      const delta = Math.abs(end - start);\n      const out = delta < Math.abs(this.grid()[key]) / 10;\n      log('[tiny] key: ', key, 'delta: ', delta, 'out: ', out);\n      return out;\n    };\n\n    getScaledBounds = () => {\n      const bounds = opts.bounds(this.props, this.props.graphProps);\n      log('bounds: ', bounds);\n      const grid = this.grid();\n\n      const scaled = {\n        left: (bounds.left / grid.interval) * grid.x,\n        right: (bounds.right / grid.interval) * grid.x,\n        top: (bounds.top / grid.interval) * grid.y,\n        bottom: (bounds.bottom / grid.interval) * grid.y\n      };\n      log('[getScaledBounds]: ', scaled);\n      return scaled;\n    };\n\n    skipDragOutsideOfBounds = (dd, e, graphProps) => {\n      // ignore drag movement outside of the domain and range.\n      const rootNode = graphProps.getRootNode();\n      const [rawX, rawY] = clientPoint(rootNode, e);\n      const { scale, domain, range } = graphProps;\n      let x = scale.x.invert(rawX);\n      let y = scale.y.invert(rawY);\n\n      const xOutside = (dd.deltaX > 0 && x < domain.min) || (dd.deltaX < 0 && x > domain.max);\n      const yOutside = (dd.deltaY > 0 && y > range.max) || (dd.deltaY < 0 && y < range.min);\n      return xOutside || yOutside;\n    };\n\n    onDrag = (e, dd) => {\n      const { onDrag, graphProps } = this.props;\n\n      if (!onDrag) {\n        return;\n      }\n\n      const bounds = this.getScaledBounds();\n\n      if (dd.deltaX < 0 && dd.deltaX < bounds.left) {\n        return;\n      }\n\n      if (dd.deltaX > 0 && dd.deltaX > bounds.right) {\n        return;\n      }\n\n      if (dd.deltaY < 0 && dd.deltaY < bounds.top) {\n        return;\n      }\n\n      if (dd.deltaY > 0 && dd.deltaY > bounds.bottom) {\n        return;\n      }\n\n      if (this.skipDragOutsideOfBounds(dd, e, graphProps)) {\n        return;\n      }\n\n      const dragArg = this.applyDelta({ x: dd.deltaX, y: dd.deltaY });\n\n      if (dragArg !== undefined || dragArg !== null) {\n        onDrag(dragArg);\n      }\n    };\n\n    getDelta = point => {\n      const pos = this.position();\n\n      const p = {\n        x: pos.x(point.x),\n        y: pos.y(point.y)\n      };\n\n      return utils.getDelta(pos.anchorPoint, p);\n    };\n\n    applyDelta = point => {\n      const delta = this.getDelta(point);\n      log('[applyDelta] delta:', delta);\n      return opts.fromDelta(this.props, delta);\n    };\n\n    onStop = (e, dd) => {\n      log('[onStop] dd:', dd);\n      const { onDragStop, onClick } = this.props;\n\n      if (onDragStop) {\n        onDragStop();\n      }\n\n      log('[onStop] lastX/Y: ', dd.lastX, dd.lastY);\n      const isClick = this.tiny('x', e) && this.tiny('y', e);\n\n      if (isClick) {\n        if (onClick) {\n          log('call onClick');\n          this.setState({ startX: null });\n          const { graphProps } = this.props;\n          const { scale, snap } = graphProps;\n          const [rawX, rawY] = clientPoint(e.target, e);\n          let x = scale.x.invert(rawX);\n          let y = scale.y.invert(rawY);\n          x = snap.x(x);\n          y = snap.y(y);\n          onClick({ x, y });\n          return false;\n        }\n      }\n\n      this.setState({ startX: null, startY: null });\n      // return false to prevent state updates in the underlying draggable - a move will have triggered an update already.\n      return false;\n    };\n\n    render() {\n      /* eslint-disable no-unused-vars */\n      //Note: we pull onClick out so that it's not in ...rest.\n      const { disabled, onClick, ...rest } = this.props;\n      /* eslint-enable no-unused-vars */\n\n      const grid = this.grid();\n      //prevent the text select icon from rendering.\n      const onMouseDown = e => e.nativeEvent.preventDefault();\n\n      /**\n       * TODO: This shouldnt be necessary, we should be able to use the r-d classnames.\n       * But they aren't being unset. If we continue with this lib, we'll have to fix this.\n       */\n      const isDragging = this.state ? !!this.state.startX : false;\n\n      return (\n        <DraggableCore\n          disabled={disabled}\n          onMouseDown={onMouseDown}\n          onStart={this.onStart}\n          onDrag={this.onDrag}\n          onStop={this.onStop}\n          axis={opts.axis || 'both'}\n          grid={[grid.x, grid.y]}\n        >\n          <Comp {...rest} disabled={disabled} isDragging={isDragging} />\n        </DraggableCore>\n      );\n    }\n  };\n};\n"],"mappings":"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"}

package/lib/root.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Root = void 0;
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -102,6 +104,9 @@ var Root = /*#__PURE__*/function (_React$Component) {
           children = _this$props2.children,
           classes = _this$props2.classes,
           onChangeTitle = _this$props2.onChangeTitle,
+          thisIsChart = _this$props2.thisIsChart,
+          showLabels = _this$props2.showLabels,
+          showPixelGuides = _this$props2.showPixelGuides,
           showTitle = _this$props2.showTitle,
           title = _this$props2.title,
           rootRef = _this$props2.rootRef;
@@ -112,16 +117,28 @@ var Root = /*#__PURE__*/function (_React$Component) {
           height = _graphProps$size$heig === void 0 ? 500 : _graphProps$size$heig,
           domain = graphProps.domain,
           range = graphProps.range;
-      var topPadding = 50;
-      var leftPadding = topPadding + 10; // left side requires an extra padding of 10
-
-      var finalWidth = width + leftPadding * 2 + (domain.padding || 0) * 2;
-      var finalHeight = height + topPadding * 2 + (range.padding || 0) * 2;
-      var activeTitlePlugins = ['bold', 'italic', 'underline', 'strikethrough' // 'languageCharacters'
+      var chartPadding = thisIsChart ? 45 : 0;
+      var padding = showLabels ? 70 : 40;
+      var extraPadding = showLabels ? 16 : 40;
+      var finalWidth = width + padding * 2 + (domain.padding || 0) * 2 + extraPadding;
+      var finalHeight = height + padding * 2 + (range.padding || 0) * 2;
+      var activeTitlePlugins = ['bold', 'italic', 'underline', 'strikethrough', 'math' // 'languageCharacters'
       ];
+      var nbOfVerticalLines = parseInt(width / 100);
+      var nbOfHorizontalLines = parseInt(height / 100);
+      var sideGridlinesPadding = parseInt(height % 100);
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.root
-      }, showTitle && /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+      }, showPixelGuides && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.topPixelGuides
+      }, (0, _toConsumableArray2["default"])(Array(nbOfVerticalLines + 1).keys()).map(function (value) {
+        return /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
+          "false": true,
+          key: "top-guide-".concat(value)
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: classes.topPixelIndicator
+        }, /*#__PURE__*/_react["default"].createElement("div", null, value * 100, "px"), /*#__PURE__*/_react["default"].createElement("div", null, "|")));
+      })), showTitle && /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
         className: (0, _classnames["default"])((0, _defineProperty2["default"])({}, classes.disabledTitle, disabledTitle), classes.graphTitle),
         markup: title || '',
         width: finalWidth,
@@ -131,7 +148,9 @@ var Root = /*#__PURE__*/function (_React$Component) {
           noBorder: true
         },
         activePlugins: activeTitlePlugins
-      }), /*#__PURE__*/_react["default"].createElement("svg", {
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.wrapper
+      }, /*#__PURE__*/_react["default"].createElement("svg", {
         width: finalWidth,
         height: finalHeight,
         className: classes.svg
@@ -144,8 +163,20 @@ var Root = /*#__PURE__*/function (_React$Component) {
           }
         },
         className: classes.graphBox,
-        transform: "translate(".concat(leftPadding, ", ").concat(topPadding, ")")
-      }, children)));
+        transform: "translate(".concat(padding, ", ").concat(padding, ")")
+      }, children)), showPixelGuides && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.sidePixelGuides,
+        style: {
+          paddingTop: sideGridlinesPadding + chartPadding
+        }
+      }, (0, _toConsumableArray2["default"])(Array(nbOfHorizontalLines + 1 - thisIsChart).keys()).reverse().map(function (value) {
+        return /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
+          "false": true,
+          key: "top-guide-".concat(value)
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: classes.sidePixelIndicator
+        }, "\u2501 ", value * 100, "px"));
+      }))));
     }
   }]);
   return Root;
@@ -155,10 +186,14 @@ exports.Root = Root;
 (0, _defineProperty2["default"])(Root, "propTypes", {
   title: _propTypes["default"].string,
   children: _types.ChildrenType,
+  disabledTitle: _propTypes["default"].bool,
   graphProps: _types.GraphPropsType.isRequired,
+  onChangeTitle: _propTypes["default"].func,
   onMouseMove: _propTypes["default"].func,
   classes: _propTypes["default"].object.isRequired,
+  showLabels: _propTypes["default"].bool,
   showTitle: _propTypes["default"].bool,
+  showPixelGuides: _propTypes["default"].bool,
   rootRef: _propTypes["default"].func
 });
 
@@ -169,6 +204,9 @@ var styles = function styles(theme) {
       color: _renderUi.color.text(),
       backgroundColor: _renderUi.color.background()
     },
+    wrapper: {
+      display: 'flex'
+    },
     svg: {},
     graphBox: {
       cursor: 'pointer',
@@ -177,11 +215,41 @@ var styles = function styles(theme) {
     graphTitle: {
       color: _renderUi.color.text(),
       fontSize: theme.typography.fontSize + 2,
-      padding: '8px 50px 0',
+      padding: '12px 4px 0',
       textAlign: 'center'
     },
     disabledTitle: {
       pointerEvents: 'none'
+    },
+    topPixelGuides: {
+      display: 'flex',
+      paddingTop: '6px',
+      marginLeft: '10px'
+    },
+    topPixelIndicator: {
+      color: _renderUi.color.primaryLight(),
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      width: '100px',
+      pointerEvents: 'none',
+      userSelect: 'none'
+    },
+    sidePixelGuides: {
+      width: '70px',
+      display: 'flex',
+      flexDirection: 'column',
+      marginRight: '6px'
+    },
+    sidePixelIndicator: {
+      color: _renderUi.color.primaryLight(),
+      textAlign: 'right',
+      height: '20px',
+      pointerEvents: 'none',
+      userSelect: 'none',
+      '&:not(:last-child)': {
+        marginBottom: '80px'
+      }
     }
   };
 };

package/lib/root.js.map

@@ -1 +1 @@
-{"version":3,"file":"root.js","names":["Root","g","props","graphProps","onMouseMove","scale","snap","coords","mouse","_groups","x","invert","y","snapped","select","on","mouseMove","bind","disabledTitle","children","classes","onChangeTitle","showTitle","title","rootRef","size","width","height","domain","range","topPadding","leftPadding","finalWidth","padding","finalHeight","activeTitlePlugins","root","cn","graphTitle","noBorder","svg","r","graphBox","React","Component","PropTypes","string","ChildrenType","GraphPropsType","isRequired","func","object","bool","styles","theme","border","color","primaryLight","text","backgroundColor","background","cursor","userSelect","fontSize","typography","textAlign","pointerEvents","withStyles"],"sources":["../src/root.jsx"],"sourcesContent":["import React from 'react';\nimport { ChildrenType } from './types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { select, mouse } from 'd3-selection';\nimport PropTypes from 'prop-types';\nimport { GraphPropsType } from './types';\nimport { color } from '@pie-lib/render-ui';\nimport EditableHtml from '@pie-lib/editable-html';\nimport cn from 'classnames';\n\nexport class Root extends React.Component {\n  static propTypes = {\n    title: PropTypes.string,\n    children: ChildrenType,\n    graphProps: GraphPropsType.isRequired,\n    onMouseMove: PropTypes.func,\n    classes: PropTypes.object.isRequired,\n    showTitle: PropTypes.bool,\n    rootRef: PropTypes.func\n  };\n\n  mouseMove = g => {\n    const { graphProps, onMouseMove } = this.props;\n\n    if (!onMouseMove) {\n      return;\n    }\n\n    const { scale, snap } = graphProps;\n    const coords = mouse(g._groups[0][0]);\n    const x = scale.x.invert(coords[0]);\n    const y = scale.y.invert(coords[1]);\n\n    const snapped = {\n      x: snap.x(x),\n      y: snap.y(y)\n    };\n\n    onMouseMove(snapped);\n  };\n\n  componentDidMount() {\n    const g = select(this.g);\n    g.on('mousemove', this.mouseMove.bind(this, g));\n  }\n\n  componentWillUnmount() {\n    const g = select(this.g);\n    g.on('mousemove', null);\n  }\n\n  render() {\n    const {\n      disabledTitle,\n      graphProps,\n      children,\n      classes,\n      onChangeTitle,\n      showTitle,\n      title,\n      rootRef\n    } = this.props;\n    const {\n      size: { width = 500, height = 500 },\n      domain,\n      range\n    } = graphProps;\n    const topPadding = 50;\n    const leftPadding = topPadding + 10; // left side requires an extra padding of 10\n    const finalWidth = width + leftPadding * 2 + (domain.padding || 0) * 2;\n    const finalHeight = height + topPadding * 2 + (range.padding || 0) * 2;\n\n    const activeTitlePlugins = [\n      'bold',\n      'italic',\n      'underline',\n      'strikethrough'\n      // 'languageCharacters'\n    ];\n\n    return (\n      <div className={classes.root}>\n        {showTitle && (\n          <EditableHtml\n            className={cn(\n              {\n                [classes.disabledTitle]: disabledTitle\n              },\n              classes.graphTitle\n            )}\n            markup={title || ''}\n            width={finalWidth}\n            onChange={onChangeTitle}\n            placeholder={!disabledTitle && 'Click here to add a title for this graph'}\n            toolbarOpts={{ noBorder: true }}\n            activePlugins={activeTitlePlugins}\n          />\n        )}\n        <svg width={finalWidth} height={finalHeight} className={classes.svg}>\n          <g\n            ref={r => {\n              this.g = r;\n              if (rootRef) {\n                rootRef(r);\n              }\n            }}\n            className={classes.graphBox}\n            transform={`translate(${leftPadding}, ${topPadding})`}\n          >\n            {children}\n          </g>\n        </svg>\n      </div>\n    );\n  }\n}\nconst styles = theme => ({\n  root: {\n    border: `solid 1px ${color.primaryLight()}`,\n    color: color.text(),\n    backgroundColor: color.background()\n  },\n  svg: {},\n  graphBox: {\n    cursor: 'pointer',\n    userSelect: 'none'\n  },\n  graphTitle: {\n    color: color.text(),\n    fontSize: theme.typography.fontSize + 2,\n    padding: '8px 50px 0',\n    textAlign: 'center'\n  },\n  disabledTitle: {\n    pointerEvents: 'none'\n  }\n});\n\nexport default withStyles(styles)(Root);\n"],"mappings":"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"}
+{"version":3,"file":"root.js","names":["Root","g","props","graphProps","onMouseMove","scale","snap","coords","mouse","_groups","x","invert","y","snapped","select","on","mouseMove","bind","disabledTitle","children","classes","onChangeTitle","thisIsChart","showLabels","showPixelGuides","showTitle","title","rootRef","size","width","height","domain","range","chartPadding","padding","extraPadding","finalWidth","finalHeight","activeTitlePlugins","nbOfVerticalLines","parseInt","nbOfHorizontalLines","sideGridlinesPadding","root","topPixelGuides","Array","keys","map","value","topPixelIndicator","cn","graphTitle","noBorder","wrapper","svg","r","graphBox","sidePixelGuides","paddingTop","reverse","sidePixelIndicator","React","Component","PropTypes","string","ChildrenType","bool","GraphPropsType","isRequired","func","object","styles","theme","border","color","primaryLight","text","backgroundColor","background","display","cursor","userSelect","fontSize","typography","textAlign","pointerEvents","marginLeft","flexDirection","alignItems","marginRight","marginBottom","withStyles"],"sources":["../src/root.jsx"],"sourcesContent":["import React from 'react';\nimport { ChildrenType } from './types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { select, mouse } from 'd3-selection';\nimport PropTypes from 'prop-types';\nimport { GraphPropsType } from './types';\nimport { color, Readable } from '@pie-lib/render-ui';\nimport EditableHtml from '@pie-lib/editable-html';\nimport cn from 'classnames';\n\nexport class Root extends React.Component {\n  static propTypes = {\n    title: PropTypes.string,\n    children: ChildrenType,\n    disabledTitle: PropTypes.bool,\n    graphProps: GraphPropsType.isRequired,\n    onChangeTitle: PropTypes.func,\n    onMouseMove: PropTypes.func,\n    classes: PropTypes.object.isRequired,\n    showLabels: PropTypes.bool,\n    showTitle: PropTypes.bool,\n    showPixelGuides: PropTypes.bool,\n    rootRef: PropTypes.func\n  };\n\n  mouseMove = g => {\n    const { graphProps, onMouseMove } = this.props;\n\n    if (!onMouseMove) {\n      return;\n    }\n\n    const { scale, snap } = graphProps;\n    const coords = mouse(g._groups[0][0]);\n    const x = scale.x.invert(coords[0]);\n    const y = scale.y.invert(coords[1]);\n\n    const snapped = {\n      x: snap.x(x),\n      y: snap.y(y)\n    };\n\n    onMouseMove(snapped);\n  };\n\n  componentDidMount() {\n    const g = select(this.g);\n    g.on('mousemove', this.mouseMove.bind(this, g));\n  }\n\n  componentWillUnmount() {\n    const g = select(this.g);\n    g.on('mousemove', null);\n  }\n\n  render() {\n    const {\n      disabledTitle,\n      graphProps,\n      children,\n      classes,\n      onChangeTitle,\n      thisIsChart,\n      showLabels,\n      showPixelGuides,\n      showTitle,\n      title,\n      rootRef\n    } = this.props;\n    const {\n      size: { width = 500, height = 500 },\n      domain,\n      range\n    } = graphProps;\n\n    const chartPadding = thisIsChart ? 45 : 0;\n    const padding = showLabels ? 70 : 40;\n    const extraPadding = showLabels ? 16 : 40;\n    const finalWidth = width + padding * 2 + (domain.padding || 0) * 2 + extraPadding;\n    const finalHeight = height + padding * 2 + (range.padding || 0) * 2;\n\n    const activeTitlePlugins = [\n      'bold',\n      'italic',\n      'underline',\n      'strikethrough',\n      'math'\n      // 'languageCharacters'\n    ];\n\n    const nbOfVerticalLines = parseInt(width / 100);\n    const nbOfHorizontalLines = parseInt(height / 100);\n    const sideGridlinesPadding = parseInt(height % 100);\n\n    return (\n      <div className={classes.root}>\n        {showPixelGuides && (\n          <div className={classes.topPixelGuides}>\n            {[...Array(nbOfVerticalLines + 1).keys()].map(value => (\n              <Readable false key={`top-guide-${value}`}>\n                <div className={classes.topPixelIndicator}>\n                  <div>{value * 100}px</div>\n                  <div>|</div>\n                </div>\n              </Readable>\n            ))}\n          </div>\n        )}\n        {showTitle && (\n          <EditableHtml\n            className={cn(\n              {\n                [classes.disabledTitle]: disabledTitle\n              },\n              classes.graphTitle\n            )}\n            markup={title || ''}\n            width={finalWidth}\n            onChange={onChangeTitle}\n            placeholder={!disabledTitle && 'Click here to add a title for this graph'}\n            toolbarOpts={{ noBorder: true }}\n            activePlugins={activeTitlePlugins}\n          />\n        )}\n        <div className={classes.wrapper}>\n          <svg width={finalWidth} height={finalHeight} className={classes.svg}>\n            <g\n              ref={r => {\n                this.g = r;\n                if (rootRef) {\n                  rootRef(r);\n                }\n              }}\n              className={classes.graphBox}\n              transform={`translate(${padding}, ${padding})`}\n            >\n              {children}\n            </g>\n          </svg>\n          {showPixelGuides && (\n            <div\n              className={classes.sidePixelGuides}\n              style={{ paddingTop: sideGridlinesPadding + chartPadding }}\n            >\n              {[...Array(nbOfHorizontalLines + 1 - thisIsChart).keys()].reverse().map(value => (\n                <Readable false key={`top-guide-${value}`}>\n                  <div className={classes.sidePixelIndicator}>━ {value * 100}px</div>\n                </Readable>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\nconst styles = theme => ({\n  root: {\n    border: `solid 1px ${color.primaryLight()}`,\n    color: color.text(),\n    backgroundColor: color.background()\n  },\n  wrapper: {\n    display: 'flex'\n  },\n  svg: {},\n  graphBox: {\n    cursor: 'pointer',\n    userSelect: 'none'\n  },\n  graphTitle: {\n    color: color.text(),\n    fontSize: theme.typography.fontSize + 2,\n    padding: '12px 4px 0',\n    textAlign: 'center'\n  },\n  disabledTitle: {\n    pointerEvents: 'none'\n  },\n  topPixelGuides: {\n    display: 'flex',\n    paddingTop: '6px',\n    marginLeft: '10px'\n  },\n  topPixelIndicator: {\n    color: color.primaryLight(),\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    width: '100px',\n    pointerEvents: 'none',\n    userSelect: 'none'\n  },\n  sidePixelGuides: {\n    width: '70px',\n    display: 'flex',\n    flexDirection: 'column',\n\n    marginRight: '6px'\n  },\n  sidePixelIndicator: {\n    color: color.primaryLight(),\n    textAlign: 'right',\n    height: '20px',\n    pointerEvents: 'none',\n    userSelect: 'none',\n\n    '&:not(:last-child)': {\n      marginBottom: '80px'\n    }\n  }\n});\n\nexport default withStyles(styles)(Root);\n"],"mappings":"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"}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.1.10-next.540+3582f0a3",
+  "version": "2.1.10-next.589+71d95747",
   "description": "Some underlying components for building charts/graphs",
   "keywords": [
     "react",
@@ -38,6 +38,6 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "3582f0a3ad0634e12ed01ff8a0653ea00cd86cbe",
+  "gitHead": "71d95747be019d4b1b3c097b948a8731a49ea4f9",
   "scripts": {}
 }

package/src/grid-draggable.jsx

@@ -7,12 +7,18 @@ import * as utils from './utils';
 import isFunction from 'lodash/isFunction';
 import invariant from 'invariant';
 import { clientPoint } from 'd3-selection';
+
 const log = debug('pie-lib:plot:grid-draggable');
+
 export const deltaFn = (scale, snap, val) => delta => {
   const normalized = delta + scale(0);
   const inverted = scale.invert(normalized);
-  return snap(val + inverted);
+
+  const fixDecimalsArithmetic = (snap(val + inverted).toFixed(4) * 1000) / 1000;
+
+  return fixDecimalsArithmetic;
 };
+
 /**
  * Creates a Component that is draggable, within a bounded grid.
  * @param {*} opts

package/src/root.jsx

@@ -4,7 +4,7 @@ import { withStyles } from '@material-ui/core/styles';
 import { select, mouse } from 'd3-selection';
 import PropTypes from 'prop-types';
 import { GraphPropsType } from './types';
-import { color } from '@pie-lib/render-ui';
+import { color, Readable } from '@pie-lib/render-ui';
 import EditableHtml from '@pie-lib/editable-html';
 import cn from 'classnames';
 
@@ -12,10 +12,14 @@ export class Root extends React.Component {
   static propTypes = {
     title: PropTypes.string,
     children: ChildrenType,
+    disabledTitle: PropTypes.bool,
     graphProps: GraphPropsType.isRequired,
+    onChangeTitle: PropTypes.func,
     onMouseMove: PropTypes.func,
     classes: PropTypes.object.isRequired,
+    showLabels: PropTypes.bool,
     showTitle: PropTypes.bool,
+    showPixelGuides: PropTypes.bool,
     rootRef: PropTypes.func
   };
 
@@ -56,6 +60,9 @@ export class Root extends React.Component {
       children,
       classes,
       onChangeTitle,
+      thisIsChart,
+      showLabels,
+      showPixelGuides,
       showTitle,
       title,
       rootRef
@@ -65,21 +72,40 @@ export class Root extends React.Component {
       domain,
       range
     } = graphProps;
-    const topPadding = 50;
-    const leftPadding = topPadding + 10; // left side requires an extra padding of 10
-    const finalWidth = width + leftPadding * 2 + (domain.padding || 0) * 2;
-    const finalHeight = height + topPadding * 2 + (range.padding || 0) * 2;
+
+    const chartPadding = thisIsChart ? 45 : 0;
+    const padding = showLabels ? 70 : 40;
+    const extraPadding = showLabels ? 16 : 40;
+    const finalWidth = width + padding * 2 + (domain.padding || 0) * 2 + extraPadding;
+    const finalHeight = height + padding * 2 + (range.padding || 0) * 2;
 
     const activeTitlePlugins = [
       'bold',
       'italic',
       'underline',
-      'strikethrough'
+      'strikethrough',
+      'math'
       // 'languageCharacters'
     ];
 
+    const nbOfVerticalLines = parseInt(width / 100);
+    const nbOfHorizontalLines = parseInt(height / 100);
+    const sideGridlinesPadding = parseInt(height % 100);
+
     return (
       <div className={classes.root}>
+        {showPixelGuides && (
+          <div className={classes.topPixelGuides}>
+            {[...Array(nbOfVerticalLines + 1).keys()].map(value => (
+              <Readable false key={`top-guide-${value}`}>
+                <div className={classes.topPixelIndicator}>
+                  <div>{value * 100}px</div>
+                  <div>|</div>
+                </div>
+              </Readable>
+            ))}
+          </div>
+        )}
         {showTitle && (
           <EditableHtml
             className={cn(
@@ -96,20 +122,34 @@ export class Root extends React.Component {
             activePlugins={activeTitlePlugins}
           />
         )}
-        <svg width={finalWidth} height={finalHeight} className={classes.svg}>
-          <g
-            ref={r => {
-              this.g = r;
-              if (rootRef) {
-                rootRef(r);
-              }
-            }}
-            className={classes.graphBox}
-            transform={`translate(${leftPadding}, ${topPadding})`}
-          >
-            {children}
-          </g>
-        </svg>
+        <div className={classes.wrapper}>
+          <svg width={finalWidth} height={finalHeight} className={classes.svg}>
+            <g
+              ref={r => {
+                this.g = r;
+                if (rootRef) {
+                  rootRef(r);
+                }
+              }}
+              className={classes.graphBox}
+              transform={`translate(${padding}, ${padding})`}
+            >
+              {children}
+            </g>
+          </svg>
+          {showPixelGuides && (
+            <div
+              className={classes.sidePixelGuides}
+              style={{ paddingTop: sideGridlinesPadding + chartPadding }}
+            >
+              {[...Array(nbOfHorizontalLines + 1 - thisIsChart).keys()].reverse().map(value => (
+                <Readable false key={`top-guide-${value}`}>
+                  <div className={classes.sidePixelIndicator}>━ {value * 100}px</div>
+                </Readable>
+              ))}
+            </div>
+          )}
+        </div>
       </div>
     );
   }
@@ -120,6 +160,9 @@ const styles = theme => ({
     color: color.text(),
     backgroundColor: color.background()
   },
+  wrapper: {
+    display: 'flex'
+  },
   svg: {},
   graphBox: {
     cursor: 'pointer',
@@ -128,11 +171,43 @@ const styles = theme => ({
   graphTitle: {
     color: color.text(),
     fontSize: theme.typography.fontSize + 2,
-    padding: '8px 50px 0',
+    padding: '12px 4px 0',
     textAlign: 'center'
   },
   disabledTitle: {
     pointerEvents: 'none'
+  },
+  topPixelGuides: {
+    display: 'flex',
+    paddingTop: '6px',
+    marginLeft: '10px'
+  },
+  topPixelIndicator: {
+    color: color.primaryLight(),
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: '100px',
+    pointerEvents: 'none',
+    userSelect: 'none'
+  },
+  sidePixelGuides: {
+    width: '70px',
+    display: 'flex',
+    flexDirection: 'column',
+
+    marginRight: '6px'
+  },
+  sidePixelIndicator: {
+    color: color.primaryLight(),
+    textAlign: 'right',
+    height: '20px',
+    pointerEvents: 'none',
+    userSelect: 'none',
+
+    '&:not(:last-child)': {
+      marginBottom: '80px'
+    }
   }
 });