@pie-lib/graphing 2.5.1 → 2.6.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.6.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing@2.5.1...@pie-lib/graphing@2.6.0) (2022-05-10)
+
+
+### Features
+
+* **graphing:** new design treatment for gridlines PD-1691 ([ee06081](https://github.com/pie-framework/pie-lib/commit/ee06081141cf343ed6767ef203a7629e6c873c5c))
+* **graphing, plot:** Added padding between labels and graph without changing the size of graph PD-1604 ([aa93191](https://github.com/pie-framework/pie-lib/commit/aa931910c56efddaf54d4586dc0730a9688e25e3))
+
+
+
+
+
 ## [2.5.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing@2.5.0...@pie-lib/graphing@2.5.1) (2022-05-04)
 
 

package/lib/axis/axes.js

@@ -283,10 +283,10 @@ var RawYAxis = /*#__PURE__*/function (_React$Component2) {
         tickClassName: classes.tick,
         tickFormat: customTickFormat,
         tickLabelProps: function tickLabelProps(value) {
-          var digits = value.toLocaleString().length || 1;
+          var digits = value.toLocaleString().replace(/[.-]/g, '').length || 1;
           return _objectSpread(_objectSpread({}, tickLabelStyles), {}, {
             dy: 4,
-            dx: -4 - digits * 8,
+            dx: -10 - digits * 9,
             'data-pie-readable': false
           });
         },

package/lib/axis/axes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/axis/axes.jsx"],"names":["AxisPropTypes","includeArrows","PropTypes","object","graphProps","AxisDefaultProps","left","right","up","down","axisStyles","theme","line","stroke","color","primary","strokeWidth","arrow","fill","tick","labelFontSize","fontSize","typography","axisLabelHolder","padding","margin","textAlign","tickLabelStyles","fontFamily","cursor","sharedValues","firstNegativeX","firstNegativeY","distanceFromOriginToFirstNegativeX","distanceFromOriginToFirstNegativeY","deltaAllowance","dy","result","push","firstNegativeValue","interval","find","element","RawXAxis","props","classes","columnTicksValues","skipValues","scale","domain","size","range","tickValues","labelStep","min","labelProps","label","y","textAnchor","dx","necessaryRows","axisLabel","longestWord","necessaryWidth","x","value","max","width","__html","React","Component","types","GraphPropsType","isRequired","XAxis","RawYAxis","rowTickValues","length","customTickFormat","indexOf","height","digits","toLocaleString","YAxis","Axes","ticks","step","negative","Math","abs","xValues","yValues"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Axis } from '@vx/axis';\nimport { types } from '@pie-lib/plot';\nimport PropTypes from 'prop-types';\nimport Arrow from './arrow';\nimport { withStyles } from '@material-ui/core';\nimport { countWords, findLongestWord, amountToIncreaseWidth, getTickValues } from '../utils';\nimport { color, Readable } from '@pie-lib/render-ui';\n\nexport const AxisPropTypes = {\n  includeArrows: PropTypes.object,\n  graphProps: PropTypes.object\n};\n\nconst AxisDefaultProps = {\n  includeArrows: {\n    left: true,\n    right: true,\n    up: true,\n    down: true\n  }\n};\n\nconst axisStyles = theme => ({\n  line: {\n    stroke: color.primary(),\n    strokeWidth: 5\n  },\n  arrow: {\n    fill: color.primary()\n  },\n  tick: {\n    fill: color.primary(),\n    '& > line': {\n      stroke: color.primary()\n    }\n  },\n  labelFontSize: {\n    fontSize: theme.typography.fontSize\n  },\n  axisLabelHolder: {\n    padding: 0,\n    margin: 0,\n    textAlign: 'center',\n    '* > *': {\n      margin: 0,\n      padding: 0\n    },\n    fontSize: theme.typography.fontSize\n  }\n});\n\nconst tickLabelStyles = {\n  fontFamily: 'Roboto',\n  fontSize: '14px',\n  cursor: 'inherit'\n};\n\nexport const sharedValues = (\n  firstNegativeX,\n  firstNegativeY,\n  distanceFromOriginToFirstNegativeX,\n  distanceFromOriginToFirstNegativeY,\n  deltaAllowance,\n  dy\n) => {\n  let result = [];\n\n  if (\n    firstNegativeX === firstNegativeY &&\n    distanceFromOriginToFirstNegativeX - deltaAllowance < distanceFromOriginToFirstNegativeY &&\n    distanceFromOriginToFirstNegativeY < distanceFromOriginToFirstNegativeX + deltaAllowance &&\n    distanceFromOriginToFirstNegativeX - deltaAllowance < dy &&\n    dy < distanceFromOriginToFirstNegativeX + deltaAllowance\n  ) {\n    result.push(firstNegativeX);\n  }\n\n  return result;\n};\n\nexport const firstNegativeValue = interval => (interval || []).find(element => element < 0);\n\nexport class RawXAxis extends React.Component {\n  static propTypes = {\n    ...AxisPropTypes,\n    classes: PropTypes.object,\n    graphProps: types.GraphPropsType.isRequired\n  };\n  static defaultProps = AxisDefaultProps;\n\n  render() {\n    const {\n      includeArrows,\n      classes,\n      graphProps,\n      columnTicksValues,\n      skipValues,\n      distanceFromOriginToFirstNegativeY,\n      dy\n    } = this.props;\n    const { scale, domain, size, range } = graphProps || {};\n\n    // Having 0 as a number in columnTicksValues does not make 0 to show up\n    // so we use this trick, by defining it as a string:\n    const tickValues =\n      (domain.labelStep || range.labelStep) && domain.min <= 0\n        ? ['0', ...columnTicksValues]\n        : columnTicksValues;\n    // However, the '0' has to be displayed only if other tick labels (y-axis or x-axis) are displayed\n\n    const labelProps = label => {\n      const y = skipValues && skipValues[0] === label ? distanceFromOriginToFirstNegativeY + 4 : dy;\n\n      return {\n        ...tickLabelStyles,\n        textAnchor: 'middle',\n        y: y,\n        dx: label === '0' ? -10 : 0,\n        dy: label === '0' ? -7 : 0\n      };\n    };\n\n    const necessaryRows = countWords(domain.axisLabel);\n    const longestWord = findLongestWord(domain.axisLabel);\n    const necessaryWidth = amountToIncreaseWidth(longestWord);\n\n    return (\n      <React.Fragment>\n        <Axis\n          axisLineClassName={classes.line}\n          scale={scale.x}\n          top={scale.y(0)}\n          left={0}\n          label={domain.label}\n          rangePadding={8}\n          tickClassName={classes.tick}\n          tickFormat={value => value}\n          tickLabelProps={labelProps}\n          tickValues={tickValues}\n        />\n        {includeArrows && includeArrows.left && (\n          <Arrow direction=\"left\" x={domain.min} y={0} className={classes.arrow} scale={scale} />\n        )}\n        {includeArrows && includeArrows.right && (\n          <Arrow direction=\"right\" x={domain.max} y={0} className={classes.arrow} scale={scale} />\n        )}\n        {domain.axisLabel && (\n          <foreignObject\n            x={size.width + 15}\n            y={scale.y(0) - 10}\n            width={necessaryWidth}\n            height={20 * necessaryRows}\n          >\n            <div\n              dangerouslySetInnerHTML={{ __html: domain.axisLabel }}\n              className={classes.labelFontSize}\n            />\n          </foreignObject>\n        )}\n      </React.Fragment>\n    );\n  }\n}\n\nconst XAxis = withStyles(axisStyles)(RawXAxis);\n\nexport class RawYAxis extends React.Component {\n  static propTypes = {\n    ...AxisPropTypes,\n    graphProps: types.GraphPropsType.isRequired\n  };\n  static defaultProps = AxisDefaultProps;\n\n  render() {\n    const { classes, includeArrows, graphProps, skipValues, rowTickValues } = this.props;\n    const { scale, range, size } = graphProps || {};\n\n    const necessaryWidth = range.axisLabel ? amountToIncreaseWidth(range.axisLabel.length) : 0;\n\n    const customTickFormat = value => (skipValues && skipValues.indexOf(value) >= 0 ? '' : value);\n\n    return (\n      <React.Fragment>\n        <Axis\n          axisLineClassName={classes.line}\n          orientation={'left'}\n          scale={scale.y}\n          top={0}\n          height={size.height}\n          left={scale.x(0)}\n          label={range.label}\n          labelProps={{ 'data-pie-readable': false }}\n          rangePadding={8}\n          tickLength={10}\n          tickClassName={classes.tick}\n          tickFormat={customTickFormat}\n          tickLabelProps={value => {\n            const digits = value.toLocaleString().length || 1;\n            return {\n              ...tickLabelStyles,\n              dy: 4,\n              dx: -4 - digits * 8,\n              'data-pie-readable': false\n            };\n          }}\n          hideZero={true}\n          tickTextAnchor={'bottom'}\n          tickValues={rowTickValues}\n        />\n\n        {includeArrows && includeArrows.down && (\n          <Arrow direction=\"down\" x={0} y={range.min} className={classes.arrow} scale={scale} />\n        )}\n        {includeArrows && includeArrows.up && (\n          <Arrow direction=\"up\" x={0} y={range.max} className={classes.arrow} scale={scale} />\n        )}\n        {range.axisLabel && (\n          <foreignObject\n            x={scale.x(0) - necessaryWidth / 2}\n            y={-30}\n            width={necessaryWidth}\n            height=\"20\"\n          >\n            <Readable false>\n              <div\n                dangerouslySetInnerHTML={{ __html: range.axisLabel }}\n                className={classes.axisLabelHolder}\n              />\n            </Readable>\n          </foreignObject>\n        )}\n      </React.Fragment>\n    );\n  }\n}\n\nconst YAxis = withStyles(axisStyles)(RawYAxis);\n\nexport default class Axes extends React.Component {\n  static propTypes = {\n    ...AxisPropTypes,\n    classes: PropTypes.object,\n    graphProps: types.GraphPropsType.isRequired\n  };\n  static defaultProps = AxisDefaultProps;\n\n  xValues = () => {\n    const { graphProps } = this.props;\n    const { scale, domain } = graphProps || {};\n\n    if (!domain || !scale) {\n      return;\n    }\n\n    const ticks = getTickValues({ ...domain, step: domain.labelStep });\n    const negative = firstNegativeValue(ticks);\n\n    return {\n      columnTicksValues: ticks,\n      firstNegativeX: negative,\n      distanceFromOriginToFirstNegativeX: Math.abs(scale.y(0) - scale.y(negative))\n    };\n  };\n\n  yValues = () => {\n    const { graphProps } = this.props;\n    const { scale, range } = graphProps || {};\n\n    if (!range || !scale) {\n      return;\n    }\n\n    const ticks = getTickValues({ ...range, step: range.labelStep });\n    const negative = firstNegativeValue(ticks);\n\n    return {\n      rowTickValues: ticks,\n      firstNegativeY: negative,\n      distanceFromOriginToFirstNegativeY: Math.abs(scale.x(0) - scale.x(negative))\n    };\n  };\n\n  render() {\n    const { graphProps } = this.props;\n    const { domain, range } = graphProps || {};\n    const {\n      columnTicksValues,\n      firstNegativeX,\n      distanceFromOriginToFirstNegativeX\n    } = this.xValues();\n    const { rowTickValues, firstNegativeY, distanceFromOriginToFirstNegativeY } = this.yValues();\n    const deltaAllowance = 6;\n    const dy = 25;\n\n    const skipValues = sharedValues(\n      firstNegativeX,\n      firstNegativeY,\n      distanceFromOriginToFirstNegativeX,\n      distanceFromOriginToFirstNegativeY,\n      deltaAllowance,\n      dy\n    );\n\n    // each axis has to be displayed only if the domain & range include it\n    return (\n      <React.Fragment>\n        {range.min <= 0 ? (\n          <XAxis\n            {...this.props}\n            skipValues={skipValues}\n            columnTicksValues={columnTicksValues}\n            distanceFromOriginToFirstNegativeY={distanceFromOriginToFirstNegativeY}\n            dy={dy}\n          />\n        ) : null}\n        {domain.min <= 0 ? (\n          <YAxis\n            {...this.props}\n            skipValues={skipValues}\n            rowTickValues={rowTickValues}\n            distanceFromOriginToFirstNegativeX={distanceFromOriginToFirstNegativeX}\n          />\n        ) : null}\n      </React.Fragment>\n    );\n  }\n}\n"],"file":"axes.js"}
+{"version":3,"sources":["../../src/axis/axes.jsx"],"names":["AxisPropTypes","includeArrows","PropTypes","object","graphProps","AxisDefaultProps","left","right","up","down","axisStyles","theme","line","stroke","color","primary","strokeWidth","arrow","fill","tick","labelFontSize","fontSize","typography","axisLabelHolder","padding","margin","textAlign","tickLabelStyles","fontFamily","cursor","sharedValues","firstNegativeX","firstNegativeY","distanceFromOriginToFirstNegativeX","distanceFromOriginToFirstNegativeY","deltaAllowance","dy","result","push","firstNegativeValue","interval","find","element","RawXAxis","props","classes","columnTicksValues","skipValues","scale","domain","size","range","tickValues","labelStep","min","labelProps","label","y","textAnchor","dx","necessaryRows","axisLabel","longestWord","necessaryWidth","x","value","max","width","__html","React","Component","types","GraphPropsType","isRequired","XAxis","RawYAxis","rowTickValues","length","customTickFormat","indexOf","height","digits","toLocaleString","replace","YAxis","Axes","ticks","step","negative","Math","abs","xValues","yValues"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Axis } from '@vx/axis';\nimport { types } from '@pie-lib/plot';\nimport PropTypes from 'prop-types';\nimport Arrow from './arrow';\nimport { withStyles } from '@material-ui/core';\nimport { countWords, findLongestWord, amountToIncreaseWidth, getTickValues } from '../utils';\nimport { color, Readable } from '@pie-lib/render-ui';\n\nexport const AxisPropTypes = {\n  includeArrows: PropTypes.object,\n  graphProps: PropTypes.object\n};\n\nconst AxisDefaultProps = {\n  includeArrows: {\n    left: true,\n    right: true,\n    up: true,\n    down: true\n  }\n};\n\nconst axisStyles = theme => ({\n  line: {\n    stroke: color.primary(),\n    strokeWidth: 5\n  },\n  arrow: {\n    fill: color.primary()\n  },\n  tick: {\n    fill: color.primary(),\n    '& > line': {\n      stroke: color.primary()\n    }\n  },\n  labelFontSize: {\n    fontSize: theme.typography.fontSize\n  },\n  axisLabelHolder: {\n    padding: 0,\n    margin: 0,\n    textAlign: 'center',\n    '* > *': {\n      margin: 0,\n      padding: 0\n    },\n    fontSize: theme.typography.fontSize\n  }\n});\n\nconst tickLabelStyles = {\n  fontFamily: 'Roboto',\n  fontSize: '14px',\n  cursor: 'inherit'\n};\n\nexport const sharedValues = (\n  firstNegativeX,\n  firstNegativeY,\n  distanceFromOriginToFirstNegativeX,\n  distanceFromOriginToFirstNegativeY,\n  deltaAllowance,\n  dy\n) => {\n  let result = [];\n\n  if (\n    firstNegativeX === firstNegativeY &&\n    distanceFromOriginToFirstNegativeX - deltaAllowance < distanceFromOriginToFirstNegativeY &&\n    distanceFromOriginToFirstNegativeY < distanceFromOriginToFirstNegativeX + deltaAllowance &&\n    distanceFromOriginToFirstNegativeX - deltaAllowance < dy &&\n    dy < distanceFromOriginToFirstNegativeX + deltaAllowance\n  ) {\n    result.push(firstNegativeX);\n  }\n\n  return result;\n};\n\nexport const firstNegativeValue = interval => (interval || []).find(element => element < 0);\n\nexport class RawXAxis extends React.Component {\n  static propTypes = {\n    ...AxisPropTypes,\n    classes: PropTypes.object,\n    graphProps: types.GraphPropsType.isRequired\n  };\n  static defaultProps = AxisDefaultProps;\n\n  render() {\n    const {\n      includeArrows,\n      classes,\n      graphProps,\n      columnTicksValues,\n      skipValues,\n      distanceFromOriginToFirstNegativeY,\n      dy\n    } = this.props;\n    const { scale, domain, size, range } = graphProps || {};\n\n    // Having 0 as a number in columnTicksValues does not make 0 to show up\n    // so we use this trick, by defining it as a string:\n    const tickValues =\n      (domain.labelStep || range.labelStep) && domain.min <= 0\n        ? ['0', ...columnTicksValues]\n        : columnTicksValues;\n    // However, the '0' has to be displayed only if other tick labels (y-axis or x-axis) are displayed\n\n    const labelProps = label => {\n      const y = skipValues && skipValues[0] === label ? distanceFromOriginToFirstNegativeY + 4 : dy;\n\n      return {\n        ...tickLabelStyles,\n        textAnchor: 'middle',\n        y: y,\n        dx: label === '0' ? -10 : 0,\n        dy: label === '0' ? -7 : 0\n      };\n    };\n\n    const necessaryRows = countWords(domain.axisLabel);\n    const longestWord = findLongestWord(domain.axisLabel);\n    const necessaryWidth = amountToIncreaseWidth(longestWord);\n\n    return (\n      <React.Fragment>\n        <Axis\n          axisLineClassName={classes.line}\n          scale={scale.x}\n          top={scale.y(0)}\n          left={0}\n          label={domain.label}\n          rangePadding={8}\n          tickClassName={classes.tick}\n          tickFormat={value => value}\n          tickLabelProps={labelProps}\n          tickValues={tickValues}\n        />\n        {includeArrows && includeArrows.left && (\n          <Arrow direction=\"left\" x={domain.min} y={0} className={classes.arrow} scale={scale} />\n        )}\n        {includeArrows && includeArrows.right && (\n          <Arrow direction=\"right\" x={domain.max} y={0} className={classes.arrow} scale={scale} />\n        )}\n        {domain.axisLabel && (\n          <foreignObject\n            x={size.width + 15}\n            y={scale.y(0) - 10}\n            width={necessaryWidth}\n            height={20 * necessaryRows}\n          >\n            <div\n              dangerouslySetInnerHTML={{ __html: domain.axisLabel }}\n              className={classes.labelFontSize}\n            />\n          </foreignObject>\n        )}\n      </React.Fragment>\n    );\n  }\n}\n\nconst XAxis = withStyles(axisStyles)(RawXAxis);\n\nexport class RawYAxis extends React.Component {\n  static propTypes = {\n    ...AxisPropTypes,\n    graphProps: types.GraphPropsType.isRequired\n  };\n  static defaultProps = AxisDefaultProps;\n\n  render() {\n    const { classes, includeArrows, graphProps, skipValues, rowTickValues } = this.props;\n    const { scale, range, size } = graphProps || {};\n\n    const necessaryWidth = range.axisLabel ? amountToIncreaseWidth(range.axisLabel.length) : 0;\n\n    const customTickFormat = value => (skipValues && skipValues.indexOf(value) >= 0 ? '' : value);\n\n    return (\n      <React.Fragment>\n        <Axis\n          axisLineClassName={classes.line}\n          orientation={'left'}\n          scale={scale.y}\n          top={0}\n          height={size.height}\n          left={scale.x(0)}\n          label={range.label}\n          labelProps={{ 'data-pie-readable': false }}\n          rangePadding={8}\n          tickLength={10}\n          tickClassName={classes.tick}\n          tickFormat={customTickFormat}\n          tickLabelProps={value => {\n            let digits = value.toLocaleString().replace(/[.-]/g, '').length || 1;\n\n            return {\n              ...tickLabelStyles,\n              dy: 4,\n              dx: -10 - digits * 9,\n              'data-pie-readable': false\n            };\n          }}\n          hideZero={true}\n          tickTextAnchor={'bottom'}\n          tickValues={rowTickValues}\n        />\n\n        {includeArrows && includeArrows.down && (\n          <Arrow direction=\"down\" x={0} y={range.min} className={classes.arrow} scale={scale} />\n        )}\n        {includeArrows && includeArrows.up && (\n          <Arrow direction=\"up\" x={0} y={range.max} className={classes.arrow} scale={scale} />\n        )}\n        {range.axisLabel && (\n          <foreignObject\n            x={scale.x(0) - necessaryWidth / 2}\n            y={-30}\n            width={necessaryWidth}\n            height=\"20\"\n          >\n            <Readable false>\n              <div\n                dangerouslySetInnerHTML={{ __html: range.axisLabel }}\n                className={classes.axisLabelHolder}\n              />\n            </Readable>\n          </foreignObject>\n        )}\n      </React.Fragment>\n    );\n  }\n}\n\nconst YAxis = withStyles(axisStyles)(RawYAxis);\n\nexport default class Axes extends React.Component {\n  static propTypes = {\n    ...AxisPropTypes,\n    classes: PropTypes.object,\n    graphProps: types.GraphPropsType.isRequired\n  };\n  static defaultProps = AxisDefaultProps;\n\n  xValues = () => {\n    const { graphProps } = this.props;\n    const { scale, domain } = graphProps || {};\n\n    if (!domain || !scale) {\n      return;\n    }\n\n    const ticks = getTickValues({ ...domain, step: domain.labelStep });\n    const negative = firstNegativeValue(ticks);\n\n    return {\n      columnTicksValues: ticks,\n      firstNegativeX: negative,\n      distanceFromOriginToFirstNegativeX: Math.abs(scale.y(0) - scale.y(negative))\n    };\n  };\n\n  yValues = () => {\n    const { graphProps } = this.props;\n    const { scale, range } = graphProps || {};\n\n    if (!range || !scale) {\n      return;\n    }\n\n    const ticks = getTickValues({ ...range, step: range.labelStep });\n    const negative = firstNegativeValue(ticks);\n\n    return {\n      rowTickValues: ticks,\n      firstNegativeY: negative,\n      distanceFromOriginToFirstNegativeY: Math.abs(scale.x(0) - scale.x(negative))\n    };\n  };\n\n  render() {\n    const { graphProps } = this.props;\n    const { domain, range } = graphProps || {};\n    const {\n      columnTicksValues,\n      firstNegativeX,\n      distanceFromOriginToFirstNegativeX\n    } = this.xValues();\n    const { rowTickValues, firstNegativeY, distanceFromOriginToFirstNegativeY } = this.yValues();\n    const deltaAllowance = 6;\n    const dy = 25;\n\n    const skipValues = sharedValues(\n      firstNegativeX,\n      firstNegativeY,\n      distanceFromOriginToFirstNegativeX,\n      distanceFromOriginToFirstNegativeY,\n      deltaAllowance,\n      dy\n    );\n\n    // each axis has to be displayed only if the domain & range include it\n    return (\n      <React.Fragment>\n        {range.min <= 0 ? (\n          <XAxis\n            {...this.props}\n            skipValues={skipValues}\n            columnTicksValues={columnTicksValues}\n            distanceFromOriginToFirstNegativeY={distanceFromOriginToFirstNegativeY}\n            dy={dy}\n          />\n        ) : null}\n        {domain.min <= 0 ? (\n          <YAxis\n            {...this.props}\n            skipValues={skipValues}\n            rowTickValues={rowTickValues}\n            distanceFromOriginToFirstNegativeX={distanceFromOriginToFirstNegativeX}\n          />\n        ) : null}\n      </React.Fragment>\n    );\n  }\n}\n"],"file":"axes.js"}

package/lib/graph.js

@@ -276,17 +276,17 @@ var Graph = /*#__PURE__*/function (_React$Component) {
         marks: marks || [],
         currentTool: currentTool
       });
-      return /*#__PURE__*/_react["default"].createElement(_plot.Root // left side requires an extra padding of 10, in order to fit next to tick labels like 1.5, 1.55...
-      , _extends({
-        paddingLeft: 60,
+      return /*#__PURE__*/_react["default"].createElement(_plot.Root, _extends({
         rootRef: function rootRef(r) {
           return _this2.rootNode = r;
         },
         title: title
-      }, common), /*#__PURE__*/_react["default"].createElement(_grid["default"], common), /*#__PURE__*/_react["default"].createElement(_axis.Axes, _extends({}, axesSettings, common)), /*#__PURE__*/_react["default"].createElement(_bg["default"], _extends({}, size, {
-        onClick: this.onBgClick
-      }, common)), /*#__PURE__*/_react["default"].createElement(_labels["default"], _extends({
+      }, common), /*#__PURE__*/_react["default"].createElement(_labels["default"], _extends({
         value: labels
+      }, common)), /*#__PURE__*/_react["default"].createElement("g", {
+        transform: "translate(".concat(domain.padding, ", ").concat(range.padding, ")")
+      }, /*#__PURE__*/_react["default"].createElement(_grid["default"], common), /*#__PURE__*/_react["default"].createElement(_axis.Axes, _extends({}, axesSettings, common)), /*#__PURE__*/_react["default"].createElement(_bg["default"], _extends({}, size, {
+        onClick: this.onBgClick
       }, common)), /*#__PURE__*/_react["default"].createElement("mask", {
         id: "myMask"
       }, /*#__PURE__*/_react["default"].createElement("rect", _extends({}, maskSize, {
@@ -332,7 +332,7 @@ var Graph = /*#__PURE__*/function (_React$Component) {
         style: {
           pointerEvents: 'none'
         }
-      }))));
+      })))));
     }
   }]);
 

package/lib/graph.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/graph.jsx"],"names":["log","graphPropTypes","axesSettings","PropTypes","shape","AxisPropTypes","backgroundMarks","array","className","string","domain","types","DomainType","labels","LabelType","labelModeEnabled","bool","coordinatesOnHover","marks","onChangeMarks","func","range","size","width","number","isRequired","height","title","tools","getMaskSize","x","y","removeBuildingToolIfCurrentToolDiffers","currentTool","buildingMark","filter","m","building","newMarks","type","index","findIndex","splice","Graph","setState","labelNode","oldMark","newMark","props","markData","updatedMark","complete","updateMarks","existing","update","addIfMissing","mark","tool","find","t","Component","point","addPoint","undefined","graphProps","rootNode","maskSize","common","r","onBgClick","map","getComponent","markType","disabled","isBackground","state","changeMark","completeMark","startDrag","stopDrag","pointerEvents","React","object"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport isEqual from 'lodash/isEqual';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { Root, types, createGraphProps } from '@pie-lib/plot';\nimport debug from 'debug';\n\nimport Labels from './labels';\nimport { Axes, AxisPropTypes } from './axis';\nimport Grid from './grid';\nimport { LabelType } from './labels';\nimport Bg from './bg';\nimport { isDuplicatedMark } from './utils';\n\nconst log = debug('pie-lib:graphing:graph');\n\nexport const graphPropTypes = {\n  axesSettings: PropTypes.shape(AxisPropTypes),\n  backgroundMarks: PropTypes.array,\n  className: PropTypes.string,\n  domain: types.DomainType,\n  labels: PropTypes.shape(LabelType),\n  labelModeEnabled: PropTypes.bool,\n  coordinatesOnHover: PropTypes.bool,\n  marks: PropTypes.array,\n  onChangeMarks: PropTypes.func,\n  range: types.DomainType,\n  size: PropTypes.shape({\n    width: PropTypes.number.isRequired,\n    height: PropTypes.number.isRequired\n  }),\n  title: PropTypes.string,\n  tools: PropTypes.array\n};\n\nconst getMaskSize = size => ({\n  x: -23,\n  y: -23,\n  width: size.width + 46,\n  height: size.height + 46\n});\n\nexport const removeBuildingToolIfCurrentToolDiffers = ({ marks, currentTool }) => {\n  const buildingMark = marks.filter(m => m.building)[0];\n  let newMarks = cloneDeep(marks);\n\n  if (buildingMark && currentTool && buildingMark.type !== currentTool.type) {\n    const index = newMarks.findIndex(m => isEqual(m, buildingMark));\n\n    if (index >= 0) {\n      newMarks.splice(index, 1);\n    }\n  }\n\n  return newMarks;\n};\n\nexport class Graph extends React.Component {\n  static propTypes = {\n    ...graphPropTypes,\n    currentTool: PropTypes.object\n  };\n\n  static defaultProps = {\n    onChangeMarks: () => {}\n  };\n\n  state = {};\n\n  componentDidMount = () => this.setState({ labelNode: this.labelNode });\n\n  changeMark = (oldMark, newMark) => {\n    const { onChangeMarks, marks } = this.props;\n    let newMarks = cloneDeep(marks);\n\n    const index = newMarks.findIndex(m => isEqual(m, oldMark));\n\n    if (index >= 0 && !isDuplicatedMark(newMark, marks, oldMark)) {\n      newMarks.splice(index, 1, newMark);\n\n      onChangeMarks(newMarks);\n    }\n  };\n\n  completeMark = markData => {\n    const { currentTool, marks } = this.props;\n    const buildingMark = marks.filter(m => m.building)[0];\n\n    if (!buildingMark || !currentTool) return;\n\n    const updatedMark = currentTool.complete(buildingMark, markData);\n\n    this.updateMarks(buildingMark, updatedMark);\n  };\n\n  updateMarks = (existing, update, addIfMissing = false) => {\n    const { onChangeMarks, marks } = this.props;\n    let newMarks = cloneDeep(marks);\n\n    if (!update.building && isDuplicatedMark(update, marks)) {\n      return;\n    }\n\n    const index = newMarks.findIndex(m => isEqual(m, existing));\n\n    if (index >= 0) {\n      newMarks.splice(index, 1, update);\n\n      onChangeMarks(newMarks);\n    } else if (addIfMissing) {\n      onChangeMarks([...newMarks, update]);\n    }\n  };\n\n  getComponent = mark => {\n    if (!mark) return null;\n\n    const tool = (this.props.tools || []).find(t => t.type === mark.type);\n\n    return (tool && tool.Component) || null;\n  };\n\n  onBgClick = point => {\n    const { x, y } = point;\n    const { labelModeEnabled, currentTool, marks } = this.props;\n\n    log('[onBgClick] x,y: ', x, y);\n\n    if (labelModeEnabled || !currentTool) {\n      return;\n    }\n\n    const buildingMark = marks.filter(m => m.building)[0];\n    let updatedMark;\n\n    // if the building mark has a different type, we just replace it\n    if (buildingMark && currentTool && buildingMark.type === currentTool.type) {\n      updatedMark = currentTool.addPoint({ x, y }, { ...buildingMark });\n    } else {\n      updatedMark = currentTool.addPoint({ x, y }, undefined);\n    }\n\n    this.updateMarks(buildingMark, updatedMark, true);\n  };\n\n  render() {\n    const {\n      axesSettings,\n      currentTool,\n      coordinatesOnHover,\n      size,\n      domain,\n      backgroundMarks,\n      range,\n      title,\n      labels,\n      labelModeEnabled\n    } = this.props;\n    let { marks } = this.props;\n\n    const graphProps = createGraphProps(domain, range, size, () => this.rootNode);\n    const maskSize = getMaskSize(size);\n    const common = { graphProps, labelModeEnabled };\n\n    marks = removeBuildingToolIfCurrentToolDiffers({ marks: marks || [], currentTool });\n\n    return (\n      <Root\n        // left side requires an extra padding of 10, in order to fit next to tick labels like 1.5, 1.55...\n        paddingLeft={60}\n        rootRef={r => (this.rootNode = r)}\n        title={title}\n        {...common}\n      >\n        <Grid {...common} />\n        <Axes {...axesSettings} {...common} />\n        <Bg {...size} onClick={this.onBgClick} {...common} />\n        <Labels value={labels} {...common} />\n        <mask id=\"myMask\">\n          <rect {...maskSize} fill=\"white\" /> {/* TODO hardcoded color */}\n        </mask>\n\n        <g id=\"marks\" mask=\"url('#myMask')\">\n          {(backgroundMarks || []).map((m, index) => {\n            const Component = this.getComponent(m);\n            const markType = m.type;\n\n            return (\n              <Component\n                key={`${markType}-${index}-bg`}\n                mark={{ ...m, disabled: true, isBackground: true }}\n                labelNode={this.state.labelNode}\n                {...common}\n              />\n            );\n          })}\n\n          {marks.map((m, index) => {\n            const Component = this.getComponent(m);\n            const markType = m.type;\n\n            return (\n              <Component\n                key={`${markType}-${index}`}\n                mark={m}\n                coordinatesOnHover={coordinatesOnHover}\n                onChange={this.changeMark}\n                onComplete={this.completeMark}\n                onClick={this.onBgClick}\n                onDragStart={this.startDrag}\n                onDragStop={this.stopDrag}\n                labelNode={this.state.labelNode}\n                isToolActive={currentTool && markType === currentTool.type}\n                {...common}\n              />\n            );\n          })}\n\n          <foreignObject\n            ref={labelNode => (this.labelNode = labelNode)}\n            x=\"0\"\n            y=\"0\"\n            {...size}\n            style={{ pointerEvents: 'none' }}\n          />\n        </g>\n      </Root>\n    );\n  }\n}\n\nexport default Graph;\n"],"file":"graph.js"}
+{"version":3,"sources":["../src/graph.jsx"],"names":["log","graphPropTypes","axesSettings","PropTypes","shape","AxisPropTypes","backgroundMarks","array","className","string","domain","types","DomainType","labels","LabelType","labelModeEnabled","bool","coordinatesOnHover","marks","onChangeMarks","func","range","size","width","number","isRequired","height","title","tools","getMaskSize","x","y","removeBuildingToolIfCurrentToolDiffers","currentTool","buildingMark","filter","m","building","newMarks","type","index","findIndex","splice","Graph","setState","labelNode","oldMark","newMark","props","markData","updatedMark","complete","updateMarks","existing","update","addIfMissing","mark","tool","find","t","Component","point","addPoint","undefined","graphProps","rootNode","maskSize","common","r","padding","onBgClick","map","getComponent","markType","disabled","isBackground","state","changeMark","completeMark","startDrag","stopDrag","pointerEvents","React","object"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport isEqual from 'lodash/isEqual';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { Root, types, createGraphProps } from '@pie-lib/plot';\nimport debug from 'debug';\n\nimport Labels from './labels';\nimport { Axes, AxisPropTypes } from './axis';\nimport Grid from './grid';\nimport { LabelType } from './labels';\nimport Bg from './bg';\nimport { isDuplicatedMark } from './utils';\n\nconst log = debug('pie-lib:graphing:graph');\n\nexport const graphPropTypes = {\n  axesSettings: PropTypes.shape(AxisPropTypes),\n  backgroundMarks: PropTypes.array,\n  className: PropTypes.string,\n  domain: types.DomainType,\n  labels: PropTypes.shape(LabelType),\n  labelModeEnabled: PropTypes.bool,\n  coordinatesOnHover: PropTypes.bool,\n  marks: PropTypes.array,\n  onChangeMarks: PropTypes.func,\n  range: types.DomainType,\n  size: PropTypes.shape({\n    width: PropTypes.number.isRequired,\n    height: PropTypes.number.isRequired\n  }),\n  title: PropTypes.string,\n  tools: PropTypes.array\n};\n\nconst getMaskSize = size => ({\n  x: -23,\n  y: -23,\n  width: size.width + 46,\n  height: size.height + 46\n});\n\nexport const removeBuildingToolIfCurrentToolDiffers = ({ marks, currentTool }) => {\n  const buildingMark = marks.filter(m => m.building)[0];\n  let newMarks = cloneDeep(marks);\n\n  if (buildingMark && currentTool && buildingMark.type !== currentTool.type) {\n    const index = newMarks.findIndex(m => isEqual(m, buildingMark));\n\n    if (index >= 0) {\n      newMarks.splice(index, 1);\n    }\n  }\n\n  return newMarks;\n};\n\nexport class Graph extends React.Component {\n  static propTypes = {\n    ...graphPropTypes,\n    currentTool: PropTypes.object\n  };\n\n  static defaultProps = {\n    onChangeMarks: () => {}\n  };\n\n  state = {};\n\n  componentDidMount = () => this.setState({ labelNode: this.labelNode });\n\n  changeMark = (oldMark, newMark) => {\n    const { onChangeMarks, marks } = this.props;\n    let newMarks = cloneDeep(marks);\n\n    const index = newMarks.findIndex(m => isEqual(m, oldMark));\n\n    if (index >= 0 && !isDuplicatedMark(newMark, marks, oldMark)) {\n      newMarks.splice(index, 1, newMark);\n\n      onChangeMarks(newMarks);\n    }\n  };\n\n  completeMark = markData => {\n    const { currentTool, marks } = this.props;\n    const buildingMark = marks.filter(m => m.building)[0];\n\n    if (!buildingMark || !currentTool) return;\n\n    const updatedMark = currentTool.complete(buildingMark, markData);\n\n    this.updateMarks(buildingMark, updatedMark);\n  };\n\n  updateMarks = (existing, update, addIfMissing = false) => {\n    const { onChangeMarks, marks } = this.props;\n    let newMarks = cloneDeep(marks);\n\n    if (!update.building && isDuplicatedMark(update, marks)) {\n      return;\n    }\n\n    const index = newMarks.findIndex(m => isEqual(m, existing));\n\n    if (index >= 0) {\n      newMarks.splice(index, 1, update);\n\n      onChangeMarks(newMarks);\n    } else if (addIfMissing) {\n      onChangeMarks([...newMarks, update]);\n    }\n  };\n\n  getComponent = mark => {\n    if (!mark) return null;\n\n    const tool = (this.props.tools || []).find(t => t.type === mark.type);\n\n    return (tool && tool.Component) || null;\n  };\n\n  onBgClick = point => {\n    const { x, y } = point;\n    const { labelModeEnabled, currentTool, marks } = this.props;\n\n    log('[onBgClick] x,y: ', x, y);\n\n    if (labelModeEnabled || !currentTool) {\n      return;\n    }\n\n    const buildingMark = marks.filter(m => m.building)[0];\n    let updatedMark;\n\n    // if the building mark has a different type, we just replace it\n    if (buildingMark && currentTool && buildingMark.type === currentTool.type) {\n      updatedMark = currentTool.addPoint({ x, y }, { ...buildingMark });\n    } else {\n      updatedMark = currentTool.addPoint({ x, y }, undefined);\n    }\n\n    this.updateMarks(buildingMark, updatedMark, true);\n  };\n\n  render() {\n    const {\n      axesSettings,\n      currentTool,\n      coordinatesOnHover,\n      size,\n      domain,\n      backgroundMarks,\n      range,\n      title,\n      labels,\n      labelModeEnabled\n    } = this.props;\n    let { marks } = this.props;\n\n    const graphProps = createGraphProps(domain, range, size, () => this.rootNode);\n    const maskSize = getMaskSize(size);\n    const common = { graphProps, labelModeEnabled };\n\n    marks = removeBuildingToolIfCurrentToolDiffers({ marks: marks || [], currentTool });\n\n    return (\n      <Root rootRef={r => (this.rootNode = r)} title={title} {...common}>\n        <Labels value={labels} {...common} />\n        <g transform={`translate(${domain.padding}, ${range.padding})`}>\n          <Grid {...common} />\n          <Axes {...axesSettings} {...common} />\n          <Bg {...size} onClick={this.onBgClick} {...common} />\n          <mask id=\"myMask\">\n            <rect {...maskSize} fill=\"white\" /> {/* TODO hardcoded color */}\n          </mask>\n\n          <g id=\"marks\" mask=\"url('#myMask')\">\n            {(backgroundMarks || []).map((m, index) => {\n              const Component = this.getComponent(m);\n              const markType = m.type;\n\n              return (\n                <Component\n                  key={`${markType}-${index}-bg`}\n                  mark={{ ...m, disabled: true, isBackground: true }}\n                  labelNode={this.state.labelNode}\n                  {...common}\n                />\n              );\n            })}\n\n            {marks.map((m, index) => {\n              const Component = this.getComponent(m);\n              const markType = m.type;\n\n              return (\n                <Component\n                  key={`${markType}-${index}`}\n                  mark={m}\n                  coordinatesOnHover={coordinatesOnHover}\n                  onChange={this.changeMark}\n                  onComplete={this.completeMark}\n                  onClick={this.onBgClick}\n                  onDragStart={this.startDrag}\n                  onDragStop={this.stopDrag}\n                  labelNode={this.state.labelNode}\n                  isToolActive={currentTool && markType === currentTool.type}\n                  {...common}\n                />\n              );\n            })}\n\n            <foreignObject\n              ref={labelNode => (this.labelNode = labelNode)}\n              x=\"0\"\n              y=\"0\"\n              {...size}\n              style={{ pointerEvents: 'none' }}\n            />\n          </g>\n        </g>\n      </Root>\n    );\n  }\n}\n\nexport default Graph;\n"],"file":"graph.js"}

package/lib/grid.js

@@ -15,6 +15,8 @@ var vx = _interopRequireWildcard(require("@vx/grid"));
 
 var _plot = require("@pie-lib/plot");
 
+var _renderUi = require("@pie-lib/render-ui");
+
 var _styles = require("@material-ui/core/styles");
 
 var _utils = require("./utils");
@@ -25,6 +27,22 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -53,9 +71,59 @@ var Grid = /*#__PURE__*/function (_React$Component) {
   var _super = _createSuper(Grid);
 
   function Grid() {
+    var _this;
+
     _classCallCheck(this, Grid);
 
-    return _super.apply(this, arguments);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "getAdditionalGridProps", function (rowTickValues, columnTickValues) {
+      var _this$props$graphProp = _this.props.graphProps,
+          scale = _this$props$graphProp.scale,
+          _this$props$graphProp2 = _this$props$graphProp.size,
+          width = _this$props$graphProp2.width,
+          height = _this$props$graphProp2.height,
+          domain = _this$props$graphProp.domain,
+          range = _this$props$graphProp.range;
+      var rowTickLabelValues = (0, _utils.getTickValues)(_objectSpread(_objectSpread({}, range), {}, {
+        step: range.labelStep
+      })).filter(function (value) {
+        return rowTickValues.includes(value);
+      });
+      var columnTickLabelValues = (0, _utils.getTickValues)(_objectSpread(_objectSpread({}, domain), {}, {
+        step: domain.labelStep
+      })).filter(function (value) {
+        return columnTickValues.includes(value);
+      });
+      var minValueLength = rowTickLabelValues.length && Math.min.apply(Math, _toConsumableArray(rowTickLabelValues)).toString().replace(/[.-]/g, '').length || 1;
+      var maxValueLength = rowTickLabelValues.length && Math.max.apply(Math, _toConsumableArray(rowTickLabelValues)).toString().replace(/[.-]/g, '').length || 1;
+      var rowLabelLength = Math.max(minValueLength, maxValueLength) * 9 + 22;
+      var horizontalDistanceToZero = scale.x(0);
+      var verticalDistanceToZero = scale.y(0);
+      var columnLabelLength = 28;
+      var rowStrokeDasharray = "".concat(horizontalDistanceToZero - rowLabelLength, " ").concat(rowLabelLength, " ").concat(width);
+      var columnStrokeDasharray = "".concat(verticalDistanceToZero, " ").concat(columnLabelLength, " ").concat(height);
+      var displayAdditionalGrid = domain.labelStep > 0 && range.labelStep > 0 && rowTickLabelValues && columnTickLabelValues && rowTickLabelValues.length > 1 && columnTickLabelValues.length > 1 && (rowTickLabelValues.length !== rowTickValues.length || columnTickLabelValues.length !== columnTickValues.length);
+      var filteredColumnValues = columnTickLabelValues.filter(function (value) {
+        return value >= 0 || horizontalDistanceToZero - scale.x(value) > rowLabelLength;
+      });
+      var filteredRowValues = rowTickLabelValues.filter(function (value) {
+        return value >= 0 || scale.y(value) - verticalDistanceToZero > columnLabelLength;
+      });
+      return {
+        rowTickLabelValues: filteredRowValues,
+        columnTickLabelValues: filteredColumnValues,
+        rowStrokeDasharray: rowStrokeDasharray,
+        columnStrokeDasharray: columnStrokeDasharray,
+        displayAdditionalGrid: displayAdditionalGrid
+      };
+    });
+
+    return _this;
   }
 
   _createClass(Grid, [{
@@ -68,29 +136,51 @@ var Grid = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this = this;
+      var _this2 = this;
 
       var _this$props = this.props,
           classes = _this$props.classes,
           graphProps = _this$props.graphProps;
       var scale = graphProps.scale,
-          size = graphProps.size,
+          _graphProps$size = graphProps.size,
+          height = _graphProps$size.height,
+          width = _graphProps$size.width,
           domain = graphProps.domain,
           range = graphProps.range;
       var rowTickValues = (0, _utils.getTickValues)(range);
-      var columnTicksValues = (0, _utils.getTickValues)(domain);
-      return /*#__PURE__*/_react["default"].createElement(vx.Grid, {
+      var columnTickValues = (0, _utils.getTickValues)(domain);
+
+      var _this$getAdditionalGr = this.getAdditionalGridProps(rowTickValues, columnTickValues),
+          rowTickLabelValues = _this$getAdditionalGr.rowTickLabelValues,
+          columnTickLabelValues = _this$getAdditionalGr.columnTickLabelValues,
+          rowStrokeDasharray = _this$getAdditionalGr.rowStrokeDasharray,
+          columnStrokeDasharray = _this$getAdditionalGr.columnStrokeDasharray,
+          displayAdditionalGrid = _this$getAdditionalGr.displayAdditionalGrid;
+
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(vx.Grid, {
         innerRef: function innerRef(r) {
-          return _this.grid = r;
+          return _this2.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
+      }), displayAdditionalGrid && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(vx.GridRows, {
+        scale: scale.y,
+        width: width,
+        tickValues: rowTickLabelValues,
+        stroke: _renderUi.color.primary(),
+        strokeDasharray: rowStrokeDasharray
+      }), /*#__PURE__*/_react["default"].createElement(vx.GridColumns, {
+        scale: scale.x,
+        height: height,
+        tickValues: columnTickLabelValues,
+        stroke: _renderUi.color.primary(),
+        strokeDasharray: columnStrokeDasharray
+      })));
     }
   }]);
 
@@ -101,6 +191,7 @@ exports.Grid = Grid;
 
 _defineProperty(Grid, "propTypes", {
   disabled: _propTypes["default"].bool,
+  disabledAdditionalGrid: _propTypes["default"].bool,
   classes: _propTypes["default"].object.isRequired,
   graphProps: _plot.types.GraphPropsType.isRequired
 });

package/lib/grid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/grid.jsx"],"names":["Grid","nextProps","graphProps","props","nextGraphProps","utils","isDomainRangeEqual","classes","scale","size","domain","range","rowTickValues","columnTicksValues","r","grid","x","y","width","height","React","Component","disabled","PropTypes","bool","object","isRequired","types","GraphPropsType","stroke"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEaA,I;;;;;;;;;;;;;WAOX,+BAAsBC,SAAtB,EAAiC;AAC/B,UAAQC,UAAR,GAAuB,KAAKC,KAA5B,CAAQD,UAAR;AACA,UAAoBE,cAApB,GAAuCH,SAAvC,CAAQC,UAAR;AACA,aAAO,CAACG,YAAMC,kBAAN,CAAyBJ,UAAzB,EAAqCE,cAArC,CAAR;AACD;;;WAED,kBAAS;AAAA;;AACP,wBAAgC,KAAKD,KAArC;AAAA,UAAQI,OAAR,eAAQA,OAAR;AAAA,UAAiBL,UAAjB,eAAiBA,UAAjB;AACA,UAAQM,KAAR,GAAuCN,UAAvC,CAAQM,KAAR;AAAA,UAAeC,IAAf,GAAuCP,UAAvC,CAAeO,IAAf;AAAA,UAAqBC,MAArB,GAAuCR,UAAvC,CAAqBQ,MAArB;AAAA,UAA6BC,KAA7B,GAAuCT,UAAvC,CAA6BS,KAA7B;AACA,UAAMC,aAAa,GAAG,0BAAcD,KAAd,CAAtB;AACA,UAAME,iBAAiB,GAAG,0BAAcH,MAAd,CAA1B;AAEA,0BACE,gCAAC,EAAD,CAAI,IAAJ;AACE,QAAA,QAAQ,EAAE,kBAAAI,CAAC;AAAA,iBAAK,KAAI,CAACC,IAAL,GAAYD,CAAjB;AAAA,SADb;AAEE,QAAA,MAAM,EAAEN,KAAK,CAACQ,CAFhB;AAGE,QAAA,MAAM,EAAER,KAAK,CAACS,CAHhB;AAIE,QAAA,KAAK,EAAER,IAAI,CAACS,KAJd;AAKE,QAAA,MAAM,EAAET,IAAI,CAACU,MALf;AAME,QAAA,SAAS,EAAEZ,OAAO,CAACQ,IANrB;AAOE,QAAA,aAAa,EAAEH,aAPjB;AAQE,QAAA,gBAAgB,EAAEC;AARpB,QADF;AAYD;;;;EA/BuBO,kBAAMC,S;;;;gBAAnBrB,I,eACQ;AACjBsB,EAAAA,QAAQ,EAAEC,sBAAUC,IADH;AAEjBjB,EAAAA,OAAO,EAAEgB,sBAAUE,MAAV,CAAiBC,UAFT;AAGjBxB,EAAAA,UAAU,EAAEyB,YAAMC,cAAN,CAAqBF;AAHhB,C;;eAiCN,wBAAW;AAAA,SAAO;AAC/BX,IAAAA,IAAI,EAAE;AACJc,MAAAA,MAAM,EAAE,QADJ,CACa;;AADb;AADyB,GAAP;AAAA,CAAX,EAIX7B,IAJW,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as vx from '@vx/grid';\nimport { types, utils } from '@pie-lib/plot';\nimport { withStyles } from '@material-ui/core/styles';\nimport { getTickValues } from './utils';\n\nexport class Grid extends React.Component {\n  static propTypes = {\n    disabled: PropTypes.bool,\n    classes: PropTypes.object.isRequired,\n    graphProps: types.GraphPropsType.isRequired\n  };\n\n  shouldComponentUpdate(nextProps) {\n    const { graphProps } = this.props;\n    const { graphProps: nextGraphProps } = nextProps;\n    return !utils.isDomainRangeEqual(graphProps, nextGraphProps);\n  }\n\n  render() {\n    const { classes, graphProps } = this.props;\n    const { scale, size, domain, range } = graphProps;\n    const rowTickValues = getTickValues(range);\n    const columnTicksValues = getTickValues(domain);\n\n    return (\n      <vx.Grid\n        innerRef={r => (this.grid = r)}\n        xScale={scale.x}\n        yScale={scale.y}\n        width={size.width}\n        height={size.height}\n        className={classes.grid}\n        rowTickValues={rowTickValues}\n        columnTickValues={columnTicksValues}\n      />\n    );\n  }\n}\n\nexport default withStyles(() => ({\n  grid: {\n    stroke: 'purple' // TODO hardcoded color\n  }\n}))(Grid);\n"],"file":"grid.js"}
+{"version":3,"sources":["../src/grid.jsx"],"names":["Grid","rowTickValues","columnTickValues","props","graphProps","scale","size","width","height","domain","range","rowTickLabelValues","step","labelStep","filter","value","includes","columnTickLabelValues","minValueLength","length","Math","min","toString","replace","maxValueLength","max","rowLabelLength","horizontalDistanceToZero","x","verticalDistanceToZero","y","columnLabelLength","rowStrokeDasharray","columnStrokeDasharray","displayAdditionalGrid","filteredColumnValues","filteredRowValues","nextProps","nextGraphProps","utils","isDomainRangeEqual","classes","getAdditionalGridProps","r","grid","color","primary","React","Component","disabled","PropTypes","bool","disabledAdditionalGrid","object","isRequired","types","GraphPropsType","stroke"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as vx from '@vx/grid';\nimport { types, utils } from '@pie-lib/plot';\nimport { color } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport { getTickValues } from './utils';\n\nexport class Grid extends React.Component {\n  static propTypes = {\n    disabled: PropTypes.bool,\n    disabledAdditionalGrid: PropTypes.bool,\n    classes: PropTypes.object.isRequired,\n    graphProps: types.GraphPropsType.isRequired\n  };\n\n  shouldComponentUpdate(nextProps) {\n    const { graphProps } = this.props;\n    const { graphProps: nextGraphProps } = nextProps;\n\n    return !utils.isDomainRangeEqual(graphProps, nextGraphProps);\n  }\n\n  getAdditionalGridProps = (rowTickValues, columnTickValues) => {\n    const {\n      graphProps: {\n        scale,\n        size: { width, height },\n        domain,\n        range\n      }\n    } = this.props;\n    const rowTickLabelValues = getTickValues({\n      ...range,\n      step: range.labelStep\n    }).filter(value => rowTickValues.includes(value));\n    const columnTickLabelValues = getTickValues({\n      ...domain,\n      step: domain.labelStep\n    }).filter(value => columnTickValues.includes(value));\n\n    const minValueLength =\n      (rowTickLabelValues.length &&\n        Math.min(...rowTickLabelValues)\n          .toString()\n          .replace(/[.-]/g, '').length) ||\n      1;\n    const maxValueLength =\n      (rowTickLabelValues.length &&\n        Math.max(...rowTickLabelValues)\n          .toString()\n          .replace(/[.-]/g, '').length) ||\n      1;\n\n    const rowLabelLength = Math.max(minValueLength, maxValueLength) * 9 + 22;\n    const horizontalDistanceToZero = scale.x(0);\n    const verticalDistanceToZero = scale.y(0);\n    const columnLabelLength = 28;\n    const rowStrokeDasharray = `${horizontalDistanceToZero -\n      rowLabelLength} ${rowLabelLength} ${width}`;\n    const columnStrokeDasharray = `${verticalDistanceToZero} ${columnLabelLength} ${height}`;\n\n    const displayAdditionalGrid =\n      domain.labelStep > 0 &&\n      range.labelStep > 0 &&\n      rowTickLabelValues &&\n      columnTickLabelValues &&\n      rowTickLabelValues.length > 1 &&\n      columnTickLabelValues.length > 1 &&\n      (rowTickLabelValues.length !== rowTickValues.length ||\n        columnTickLabelValues.length !== columnTickValues.length);\n\n    const filteredColumnValues = columnTickLabelValues.filter(\n      value => value >= 0 || horizontalDistanceToZero - scale.x(value) > rowLabelLength\n    );\n    const filteredRowValues = rowTickLabelValues.filter(\n      value => value >= 0 || scale.y(value) - verticalDistanceToZero > columnLabelLength\n    );\n\n    return {\n      rowTickLabelValues: filteredRowValues,\n      columnTickLabelValues: filteredColumnValues,\n      rowStrokeDasharray,\n      columnStrokeDasharray,\n      displayAdditionalGrid\n    };\n  };\n\n  render() {\n    const { classes, graphProps } = this.props;\n    const {\n      scale,\n      size: { height, width },\n      domain,\n      range\n    } = graphProps;\n    const rowTickValues = getTickValues(range);\n    const columnTickValues = getTickValues(domain);\n    const {\n      rowTickLabelValues,\n      columnTickLabelValues,\n      rowStrokeDasharray,\n      columnStrokeDasharray,\n      displayAdditionalGrid\n    } = this.getAdditionalGridProps(rowTickValues, columnTickValues);\n\n    return (\n      <>\n        <vx.Grid\n          innerRef={r => (this.grid = r)}\n          xScale={scale.x}\n          yScale={scale.y}\n          width={width}\n          height={height}\n          className={classes.grid}\n          rowTickValues={rowTickValues}\n          columnTickValues={columnTickValues}\n        />\n        {displayAdditionalGrid && (\n          <>\n            <vx.GridRows\n              scale={scale.y}\n              width={width}\n              tickValues={rowTickLabelValues}\n              stroke={color.primary()}\n              strokeDasharray={rowStrokeDasharray}\n            />\n            <vx.GridColumns\n              scale={scale.x}\n              height={height}\n              tickValues={columnTickLabelValues}\n              stroke={color.primary()}\n              strokeDasharray={columnStrokeDasharray}\n            />\n          </>\n        )}\n      </>\n    );\n  }\n}\n\nexport default withStyles(() => ({\n  grid: {\n    stroke: 'purple' // TODO hardcoded color\n  }\n}))(Grid);\n"],"file":"grid.js"}

package/lib/labels.js

@@ -107,9 +107,13 @@ var RawLabel = /*#__PURE__*/function (_React$Component) {
           side = _this$props.side,
           graphProps = _this$props.graphProps,
           classes = _this$props.classes;
-      var size = graphProps.size;
-      var transform = getTransform(side, size.width, size.height);
-      var width = side === 'left' || side === 'right' ? size.height : size.width;
+      var size = graphProps.size,
+          domain = graphProps.domain,
+          range = graphProps.range;
+      var totalHeight = (size.height || 500) + (range.padding || 0) * 2;
+      var totalWidth = (size.width || 500) + (domain.padding || 0) * 2;
+      var transform = getTransform(side, totalWidth, totalHeight);
+      var width = side === 'left' || side === 'right' ? totalHeight : totalWidth;
       var height = 36;
       var y = getY(side, height);
       return /*#__PURE__*/_react["default"].createElement("foreignObject", {

package/lib/labels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/labels.jsx"],"names":["rotations","left","top","bottom","right","getTransform","side","width","height","t","x","y","rotate","getY","RawLabel","props","text","graphProps","classes","size","transform","__html","axisLabel","React","Component","PropTypes","string","object","types","GraphPropsType","isRequired","Label","theme","label","fill","color","secondary","fontSize","typography","textAlign","LabelType","Labels","value","className","shape"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { types } from '@pie-lib/plot';\nimport { color, Readable } from '@pie-lib/render-ui';\n\nconst rotations = {\n  left: -90,\n  top: 0,\n  bottom: 0,\n  right: 90\n};\n\nexport const getTransform = (side, width, height) => {\n  const t = (x, y, rotate) => `translate(${x}, ${y}), rotate(${rotate})`;\n\n  if (side === 'left') {\n    return t(-20, height / 2, rotations[side]);\n  }\n  if (side === 'right') {\n    return t(width + 30, height / 2, rotations[side]);\n  }\n  if (side === 'top') {\n    return t(width / 2, -20, rotations[side]);\n  }\n  if (side === 'bottom') {\n    return t(width / 2, height + 30, rotations[side]);\n  }\n};\n\nconst getY = (side, height) => {\n  switch (side) {\n    case 'left':\n      return -height;\n    case 'top':\n      return -height + 10;\n    case 'right':\n      return -height + 10;\n    default:\n      return 0;\n  }\n};\n\nclass RawLabel extends React.Component {\n  static propTypes = {\n    text: PropTypes.string,\n    side: PropTypes.string,\n    classes: PropTypes.object,\n    graphProps: types.GraphPropsType.isRequired\n  };\n\n  render() {\n    const { text, side, graphProps, classes } = this.props;\n\n    const { size } = graphProps;\n\n    const transform = getTransform(side, size.width, size.height);\n    const width = side === 'left' || side === 'right' ? size.height : size.width;\n    const height = 36;\n    const y = getY(side, height);\n\n    return (\n      <foreignObject\n        x={-(width / 2)}\n        y={y}\n        width={width}\n        height={height}\n        transform={transform}\n        textAnchor=\"middle\"\n      >\n        <Readable false>\n          <div dangerouslySetInnerHTML={{ __html: text }} className={classes.axisLabel} />\n        </Readable>\n      </foreignObject>\n    );\n  }\n}\n\nconst Label = withStyles(theme => ({\n  label: {\n    fill: color.secondary()\n  },\n  axisLabel: {\n    fontSize: theme.typography.fontSize,\n    textAlign: 'center'\n  }\n}))(RawLabel);\n\nexport const LabelType = {\n  left: PropTypes.string,\n  top: PropTypes.string,\n  bottom: PropTypes.string,\n  right: PropTypes.string\n};\n\nexport class Labels extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    className: PropTypes.string,\n    value: PropTypes.shape(LabelType),\n    graphProps: PropTypes.object\n  };\n\n  static defaultProps = {};\n  render() {\n    const { value, graphProps } = this.props;\n    return (\n      <React.Fragment>\n        {value && value.left && (\n          <Label key=\"left\" side=\"left\" text={value.left} graphProps={graphProps} />\n        )}\n        {value && value.top && (\n          <Label key=\"top\" side=\"top\" text={value.top} graphProps={graphProps} />\n        )}\n        {value && value.bottom && (\n          <Label key=\"bottom\" side=\"bottom\" text={value.bottom} graphProps={graphProps} />\n        )}\n        {value && value.right && (\n          <Label key=\"right\" side=\"right\" text={value.right} graphProps={graphProps} />\n        )}\n      </React.Fragment>\n    );\n  }\n}\n\nexport default Labels;\n"],"file":"labels.js"}
+{"version":3,"sources":["../src/labels.jsx"],"names":["rotations","left","top","bottom","right","getTransform","side","width","height","t","x","y","rotate","getY","RawLabel","props","text","graphProps","classes","size","domain","range","totalHeight","padding","totalWidth","transform","__html","axisLabel","React","Component","PropTypes","string","object","types","GraphPropsType","isRequired","Label","theme","label","fill","color","secondary","fontSize","typography","textAlign","LabelType","Labels","value","className","shape"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,SAAS,GAAG;AAChBC,EAAAA,IAAI,EAAE,CAAC,EADS;AAEhBC,EAAAA,GAAG,EAAE,CAFW;AAGhBC,EAAAA,MAAM,EAAE,CAHQ;AAIhBC,EAAAA,KAAK,EAAE;AAJS,CAAlB;;AAOO,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,IAAD,EAAOC,KAAP,EAAcC,MAAd,EAAyB;AACnD,MAAMC,CAAC,GAAG,SAAJA,CAAI,CAACC,CAAD,EAAIC,CAAJ,EAAOC,MAAP;AAAA,+BAA+BF,CAA/B,eAAqCC,CAArC,uBAAmDC,MAAnD;AAAA,GAAV;;AAEA,MAAIN,IAAI,KAAK,MAAb,EAAqB;AACnB,WAAOG,CAAC,CAAC,CAAC,EAAF,EAAMD,MAAM,GAAG,CAAf,EAAkBR,SAAS,CAACM,IAAD,CAA3B,CAAR;AACD;;AACD,MAAIA,IAAI,KAAK,OAAb,EAAsB;AACpB,WAAOG,CAAC,CAACF,KAAK,GAAG,EAAT,EAAaC,MAAM,GAAG,CAAtB,EAAyBR,SAAS,CAACM,IAAD,CAAlC,CAAR;AACD;;AACD,MAAIA,IAAI,KAAK,KAAb,EAAoB;AAClB,WAAOG,CAAC,CAACF,KAAK,GAAG,CAAT,EAAY,CAAC,EAAb,EAAiBP,SAAS,CAACM,IAAD,CAA1B,CAAR;AACD;;AACD,MAAIA,IAAI,KAAK,QAAb,EAAuB;AACrB,WAAOG,CAAC,CAACF,KAAK,GAAG,CAAT,EAAYC,MAAM,GAAG,EAArB,EAAyBR,SAAS,CAACM,IAAD,CAAlC,CAAR;AACD;AACF,CAfM;;;;AAiBP,IAAMO,IAAI,GAAG,SAAPA,IAAO,CAACP,IAAD,EAAOE,MAAP,EAAkB;AAC7B,UAAQF,IAAR;AACE,SAAK,MAAL;AACE,aAAO,CAACE,MAAR;;AACF,SAAK,KAAL;AACE,aAAO,CAACA,MAAD,GAAU,EAAjB;;AACF,SAAK,OAAL;AACE,aAAO,CAACA,MAAD,GAAU,EAAjB;;AACF;AACE,aAAO,CAAP;AARJ;AAUD,CAXD;;IAaMM,Q;;;;;;;;;;;;;WAQJ,kBAAS;AACP,wBAA4C,KAAKC,KAAjD;AAAA,UAAQC,IAAR,eAAQA,IAAR;AAAA,UAAcV,IAAd,eAAcA,IAAd;AAAA,UAAoBW,UAApB,eAAoBA,UAApB;AAAA,UAAgCC,OAAhC,eAAgCA,OAAhC;AACA,UAAQC,IAAR,GAAgCF,UAAhC,CAAQE,IAAR;AAAA,UAAcC,MAAd,GAAgCH,UAAhC,CAAcG,MAAd;AAAA,UAAsBC,KAAtB,GAAgCJ,UAAhC,CAAsBI,KAAtB;AACA,UAAMC,WAAW,GAAG,CAACH,IAAI,CAACX,MAAL,IAAe,GAAhB,IAAuB,CAACa,KAAK,CAACE,OAAN,IAAiB,CAAlB,IAAuB,CAAlE;AACA,UAAMC,UAAU,GAAG,CAACL,IAAI,CAACZ,KAAL,IAAc,GAAf,IAAsB,CAACa,MAAM,CAACG,OAAP,IAAkB,CAAnB,IAAwB,CAAjE;AAEA,UAAME,SAAS,GAAGpB,YAAY,CAACC,IAAD,EAAOkB,UAAP,EAAmBF,WAAnB,CAA9B;AACA,UAAMf,KAAK,GAAGD,IAAI,KAAK,MAAT,IAAmBA,IAAI,KAAK,OAA5B,GAAsCgB,WAAtC,GAAoDE,UAAlE;AACA,UAAMhB,MAAM,GAAG,EAAf;AACA,UAAMG,CAAC,GAAGE,IAAI,CAACP,IAAD,EAAOE,MAAP,CAAd;AAEA,0BACE;AACE,QAAA,CAAC,EAAE,EAAED,KAAK,GAAG,CAAV,CADL;AAEE,QAAA,CAAC,EAAEI,CAFL;AAGE,QAAA,KAAK,EAAEJ,KAHT;AAIE,QAAA,MAAM,EAAEC,MAJV;AAKE,QAAA,SAAS,EAAEiB,SALb;AAME,QAAA,UAAU,EAAC;AANb,sBAQE,gCAAC,kBAAD;AAAU;AAAV,sBACE;AAAK,QAAA,uBAAuB,EAAE;AAAEC,UAAAA,MAAM,EAAEV;AAAV,SAA9B;AAAgD,QAAA,SAAS,EAAEE,OAAO,CAACS;AAAnE,QADF,CARF,CADF;AAcD;;;;EAjCoBC,kBAAMC,S;;gBAAvBf,Q,eACe;AACjBE,EAAAA,IAAI,EAAEc,sBAAUC,MADC;AAEjBzB,EAAAA,IAAI,EAAEwB,sBAAUC,MAFC;AAGjBb,EAAAA,OAAO,EAAEY,sBAAUE,MAHF;AAIjBf,EAAAA,UAAU,EAAEgB,YAAMC,cAAN,CAAqBC;AAJhB,C;;AAmCrB,IAAMC,KAAK,GAAG,wBAAW,UAAAC,KAAK;AAAA,SAAK;AACjCC,IAAAA,KAAK,EAAE;AACLC,MAAAA,IAAI,EAAEC,gBAAMC,SAAN;AADD,KAD0B;AAIjCd,IAAAA,SAAS,EAAE;AACTe,MAAAA,QAAQ,EAAEL,KAAK,CAACM,UAAN,CAAiBD,QADlB;AAETE,MAAAA,SAAS,EAAE;AAFF;AAJsB,GAAL;AAAA,CAAhB,EAQV9B,QARU,CAAd;AAUO,IAAM+B,SAAS,GAAG;AACvB5C,EAAAA,IAAI,EAAE6B,sBAAUC,MADO;AAEvB7B,EAAAA,GAAG,EAAE4B,sBAAUC,MAFQ;AAGvB5B,EAAAA,MAAM,EAAE2B,sBAAUC,MAHK;AAIvB3B,EAAAA,KAAK,EAAE0B,sBAAUC;AAJM,CAAlB;;;IAOMe,M;;;;;;;;;;;;;WAUX,kBAAS;AACP,yBAA8B,KAAK/B,KAAnC;AAAA,UAAQgC,KAAR,gBAAQA,KAAR;AAAA,UAAe9B,UAAf,gBAAeA,UAAf;AAEA,0BACE,gCAAC,iBAAD,CAAO,QAAP,QACG8B,KAAK,IAAIA,KAAK,CAAC9C,IAAf,iBACC,gCAAC,KAAD;AAAO,QAAA,GAAG,EAAC,MAAX;AAAkB,QAAA,IAAI,EAAC,MAAvB;AAA8B,QAAA,IAAI,EAAE8C,KAAK,CAAC9C,IAA1C;AAAgD,QAAA,UAAU,EAAEgB;AAA5D,QAFJ,EAIG8B,KAAK,IAAIA,KAAK,CAAC7C,GAAf,iBACC,gCAAC,KAAD;AAAO,QAAA,GAAG,EAAC,KAAX;AAAiB,QAAA,IAAI,EAAC,KAAtB;AAA4B,QAAA,IAAI,EAAE6C,KAAK,CAAC7C,GAAxC;AAA6C,QAAA,UAAU,EAAEe;AAAzD,QALJ,EAOG8B,KAAK,IAAIA,KAAK,CAAC5C,MAAf,iBACC,gCAAC,KAAD;AAAO,QAAA,GAAG,EAAC,QAAX;AAAoB,QAAA,IAAI,EAAC,QAAzB;AAAkC,QAAA,IAAI,EAAE4C,KAAK,CAAC5C,MAA9C;AAAsD,QAAA,UAAU,EAAEc;AAAlE,QARJ,EAUG8B,KAAK,IAAIA,KAAK,CAAC3C,KAAf,iBACC,gCAAC,KAAD;AAAO,QAAA,GAAG,EAAC,OAAX;AAAmB,QAAA,IAAI,EAAC,OAAxB;AAAgC,QAAA,IAAI,EAAE2C,KAAK,CAAC3C,KAA5C;AAAmD,QAAA,UAAU,EAAEa;AAA/D,QAXJ,CADF;AAgBD;;;;EA7ByBW,kBAAMC,S;;;;gBAArBiB,M,eACQ;AACjB5B,EAAAA,OAAO,EAAEY,sBAAUE,MADF;AAEjBgB,EAAAA,SAAS,EAAElB,sBAAUC,MAFJ;AAGjBgB,EAAAA,KAAK,EAAEjB,sBAAUmB,KAAV,CAAgBJ,SAAhB,CAHU;AAIjB5B,EAAAA,UAAU,EAAEa,sBAAUE;AAJL,C;;gBADRc,M,kBAQW,E;;eAwBTA,M","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { types } from '@pie-lib/plot';\nimport { color, Readable } from '@pie-lib/render-ui';\n\nconst rotations = {\n  left: -90,\n  top: 0,\n  bottom: 0,\n  right: 90\n};\n\nexport const getTransform = (side, width, height) => {\n  const t = (x, y, rotate) => `translate(${x}, ${y}), rotate(${rotate})`;\n\n  if (side === 'left') {\n    return t(-20, height / 2, rotations[side]);\n  }\n  if (side === 'right') {\n    return t(width + 30, height / 2, rotations[side]);\n  }\n  if (side === 'top') {\n    return t(width / 2, -20, rotations[side]);\n  }\n  if (side === 'bottom') {\n    return t(width / 2, height + 30, rotations[side]);\n  }\n};\n\nconst getY = (side, height) => {\n  switch (side) {\n    case 'left':\n      return -height;\n    case 'top':\n      return -height + 10;\n    case 'right':\n      return -height + 10;\n    default:\n      return 0;\n  }\n};\n\nclass RawLabel extends React.Component {\n  static propTypes = {\n    text: PropTypes.string,\n    side: PropTypes.string,\n    classes: PropTypes.object,\n    graphProps: types.GraphPropsType.isRequired\n  };\n\n  render() {\n    const { text, side, graphProps, classes } = this.props;\n    const { size, domain, range } = graphProps;\n    const totalHeight = (size.height || 500) + (range.padding || 0) * 2;\n    const totalWidth = (size.width || 500) + (domain.padding || 0) * 2;\n\n    const transform = getTransform(side, totalWidth, totalHeight);\n    const width = side === 'left' || side === 'right' ? totalHeight : totalWidth;\n    const height = 36;\n    const y = getY(side, height);\n\n    return (\n      <foreignObject\n        x={-(width / 2)}\n        y={y}\n        width={width}\n        height={height}\n        transform={transform}\n        textAnchor=\"middle\"\n      >\n        <Readable false>\n          <div dangerouslySetInnerHTML={{ __html: text }} className={classes.axisLabel} />\n        </Readable>\n      </foreignObject>\n    );\n  }\n}\n\nconst Label = withStyles(theme => ({\n  label: {\n    fill: color.secondary()\n  },\n  axisLabel: {\n    fontSize: theme.typography.fontSize,\n    textAlign: 'center'\n  }\n}))(RawLabel);\n\nexport const LabelType = {\n  left: PropTypes.string,\n  top: PropTypes.string,\n  bottom: PropTypes.string,\n  right: PropTypes.string\n};\n\nexport class Labels extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    className: PropTypes.string,\n    value: PropTypes.shape(LabelType),\n    graphProps: PropTypes.object\n  };\n\n  static defaultProps = {};\n\n  render() {\n    const { value, graphProps } = this.props;\n\n    return (\n      <React.Fragment>\n        {value && value.left && (\n          <Label key=\"left\" side=\"left\" text={value.left} graphProps={graphProps} />\n        )}\n        {value && value.top && (\n          <Label key=\"top\" side=\"top\" text={value.top} graphProps={graphProps} />\n        )}\n        {value && value.bottom && (\n          <Label key=\"bottom\" side=\"bottom\" text={value.bottom} graphProps={graphProps} />\n        )}\n        {value && value.right && (\n          <Label key=\"right\" side=\"right\" text={value.right} graphProps={graphProps} />\n        )}\n      </React.Fragment>\n    );\n  }\n}\n\nexport default Labels;\n"],"file":"labels.js"}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.5.1",
+  "version": "2.6.0",
   "description": "Graphing components",
   "keywords": [
     "react",
@@ -19,7 +19,7 @@
     "@mapbox/point-geometry": "^0.1.0",
     "@material-ui/core": "^3.8.3",
     "@pie-lib/graphing-utils": "^1.1.20",
-    "@pie-lib/plot": "^2.1.10",
+    "@pie-lib/plot": "^2.2.0",
     "@pie-lib/render-ui": "^4.12.6",
     "@vx/axis": "^0.0.189",
     "@vx/clip-path": "^0.0.189",
@@ -43,6 +43,6 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "0ab3beb8351feafa08845f0c0639fb9a64e10e9a",
+  "gitHead": "84fbd889875b1e3a0539451a940fb772fc46162a",
   "scripts": {}
 }

package/src/axis/axes.jsx

@@ -196,11 +196,12 @@ export class RawYAxis extends React.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
             };
           }}

package/src/graph.jsx

@@ -165,64 +165,60 @@ export class Graph extends React.Component {
     marks = removeBuildingToolIfCurrentToolDiffers({ marks: marks || [], currentTool });
 
     return (
-      <Root
-        // left side requires an extra padding of 10, in order to fit next to tick labels like 1.5, 1.55...
-        paddingLeft={60}
-        rootRef={r => (this.rootNode = r)}
-        title={title}
-        {...common}
-      >
-        <Grid {...common} />
-        <Axes {...axesSettings} {...common} />
-        <Bg {...size} onClick={this.onBgClick} {...common} />
+      <Root rootRef={r => (this.rootNode = r)} title={title} {...common}>
         <Labels value={labels} {...common} />
-        <mask id="myMask">
-          <rect {...maskSize} fill="white" /> {/* TODO hardcoded color */}
-        </mask>
-
-        <g id="marks" mask="url('#myMask')">
-          {(backgroundMarks || []).map((m, index) => {
-            const Component = this.getComponent(m);
-            const markType = m.type;
-
-            return (
-              <Component
-                key={`${markType}-${index}-bg`}
-                mark={{ ...m, disabled: true, isBackground: true }}
-                labelNode={this.state.labelNode}
-                {...common}
-              />
-            );
-          })}
-
-          {marks.map((m, index) => {
-            const Component = this.getComponent(m);
-            const markType = m.type;
-
-            return (
-              <Component
-                key={`${markType}-${index}`}
-                mark={m}
-                coordinatesOnHover={coordinatesOnHover}
-                onChange={this.changeMark}
-                onComplete={this.completeMark}
-                onClick={this.onBgClick}
-                onDragStart={this.startDrag}
-                onDragStop={this.stopDrag}
-                labelNode={this.state.labelNode}
-                isToolActive={currentTool && markType === currentTool.type}
-                {...common}
-              />
-            );
-          })}
-
-          <foreignObject
-            ref={labelNode => (this.labelNode = labelNode)}
-            x="0"
-            y="0"
-            {...size}
-            style={{ pointerEvents: 'none' }}
-          />
+        <g transform={`translate(${domain.padding}, ${range.padding})`}>
+          <Grid {...common} />
+          <Axes {...axesSettings} {...common} />
+          <Bg {...size} onClick={this.onBgClick} {...common} />
+          <mask id="myMask">
+            <rect {...maskSize} fill="white" /> {/* TODO hardcoded color */}
+          </mask>
+
+          <g id="marks" mask="url('#myMask')">
+            {(backgroundMarks || []).map((m, index) => {
+              const Component = this.getComponent(m);
+              const markType = m.type;
+
+              return (
+                <Component
+                  key={`${markType}-${index}-bg`}
+                  mark={{ ...m, disabled: true, isBackground: true }}
+                  labelNode={this.state.labelNode}
+                  {...common}
+                />
+              );
+            })}
+
+            {marks.map((m, index) => {
+              const Component = this.getComponent(m);
+              const markType = m.type;
+
+              return (
+                <Component
+                  key={`${markType}-${index}`}
+                  mark={m}
+                  coordinatesOnHover={coordinatesOnHover}
+                  onChange={this.changeMark}
+                  onComplete={this.completeMark}
+                  onClick={this.onBgClick}
+                  onDragStart={this.startDrag}
+                  onDragStop={this.stopDrag}
+                  labelNode={this.state.labelNode}
+                  isToolActive={currentTool && markType === currentTool.type}
+                  {...common}
+                />
+              );
+            })}
+
+            <foreignObject
+              ref={labelNode => (this.labelNode = labelNode)}
+              x="0"
+              y="0"
+              {...size}
+              style={{ pointerEvents: 'none' }}
+            />
+          </g>
         </g>
       </Root>
     );

package/src/grid.jsx

@@ -2,12 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as vx from '@vx/grid';
 import { types, utils } from '@pie-lib/plot';
+import { color } from '@pie-lib/render-ui';
 import { withStyles } from '@material-ui/core/styles';
 import { getTickValues } from './utils';
 
 export class Grid extends React.Component {
   static propTypes = {
     disabled: PropTypes.bool,
+    disabledAdditionalGrid: PropTypes.bool,
     classes: PropTypes.object.isRequired,
     graphProps: types.GraphPropsType.isRequired
   };
@@ -15,26 +17,124 @@ export class Grid extends React.Component {
   shouldComponentUpdate(nextProps) {
     const { graphProps } = this.props;
     const { graphProps: nextGraphProps } = nextProps;
+
     return !utils.isDomainRangeEqual(graphProps, nextGraphProps);
   }
 
+  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);
+    const columnTickValues = getTickValues(domain);
+    const {
+      rowTickLabelValues,
+      columnTickLabelValues,
+      rowStrokeDasharray,
+      columnStrokeDasharray,
+      displayAdditionalGrid
+    } = this.getAdditionalGridProps(rowTickValues, columnTickValues);
 
     return (
-      <vx.Grid
-        innerRef={r => (this.grid = r)}
-        xScale={scale.x}
-        yScale={scale.y}
-        width={size.width}
-        height={size.height}
-        className={classes.grid}
-        rowTickValues={rowTickValues}
-        columnTickValues={columnTicksValues}
-      />
+      <>
+        <vx.Grid
+          innerRef={r => (this.grid = r)}
+          xScale={scale.x}
+          yScale={scale.y}
+          width={width}
+          height={height}
+          className={classes.grid}
+          rowTickValues={rowTickValues}
+          columnTickValues={columnTickValues}
+        />
+        {displayAdditionalGrid && (
+          <>
+            <vx.GridRows
+              scale={scale.y}
+              width={width}
+              tickValues={rowTickLabelValues}
+              stroke={color.primary()}
+              strokeDasharray={rowStrokeDasharray}
+            />
+            <vx.GridColumns
+              scale={scale.x}
+              height={height}
+              tickValues={columnTickLabelValues}
+              stroke={color.primary()}
+              strokeDasharray={columnStrokeDasharray}
+            />
+          </>
+        )}
+      </>
     );
   }
 }

package/src/labels.jsx

@@ -51,11 +51,12 @@ class RawLabel extends React.Component {
 
   render() {
     const { text, side, graphProps, classes } = this.props;
+    const { size, domain, range } = graphProps;
+    const totalHeight = (size.height || 500) + (range.padding || 0) * 2;
+    const totalWidth = (size.width || 500) + (domain.padding || 0) * 2;
 
-    const { size } = graphProps;
-
-    const transform = getTransform(side, size.width, size.height);
-    const width = side === 'left' || side === 'right' ? size.height : size.width;
+    const transform = getTransform(side, totalWidth, totalHeight);
+    const width = side === 'left' || side === 'right' ? totalHeight : totalWidth;
     const height = 36;
     const y = getY(side, height);
 
@@ -102,8 +103,10 @@ export class Labels extends React.Component {
   };
 
   static defaultProps = {};
+
   render() {
     const { value, graphProps } = this.props;
+
     return (
       <React.Fragment>
         {value && value.left && (