@pie-lib/graphing 2.5.1 → 2.6.2

package/lib/grid-setup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/grid-setup.jsx"],"names":["GridConfig","props","classes","disabled","labelValue","labelValues","gridValue","gridValues","onChange","columnView","textField","e","v","AxisConfig","label","maxValue","minValue","type","maxLength","style","textAlign","target","value","GridSetup","sizeConstraints","domain","dimensionsEnabled","includeAxes","range","size","standardGrid","gridProps","min","max","onIncludeAxes","noAxesConfig","axis","step","labelStep","updatedRange","updatedDomain","onStandardGridChanged","axisLabel","graph","height","width","onSizeChanged","key","onDomainChanged","onRangeChanged","axesConfig","rowView","text","gridlinesConfig","largeTextField","wrapper","content","dimensions","propTypes","PropTypes","object","bool","styles","theme","display","flexDirection","alignItems","justifyContent","margin","spacing","unit","fontStyle","color"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';\nimport Typography from '@material-ui/core/Typography';\nimport ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';\nimport ExpansionPanel from '@material-ui/core/ExpansionPanel';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport TextField from '@material-ui/core/TextField';\nimport { NumberTextFieldCustom, Toggle } from '@pie-lib/config-ui';\n\nconst GridConfig = props => {\n  const { classes, disabled, labelValue, labelValues, gridValue, gridValues, onChange } = props;\n\n  return (\n    <div className={classes.columnView}>\n      <NumberTextFieldCustom\n        className={classes.textField}\n        label=\"Grid Interval\"\n        value={gridValue}\n        customValues={gridValues}\n        variant=\"outlined\"\n        disabled={disabled}\n        onChange={(e, v) => onChange('step', v)}\n      />\n      <NumberTextFieldCustom\n        className={classes.textField}\n        label=\"Label Interval\"\n        value={labelValue}\n        customValues={labelValues}\n        variant=\"outlined\"\n        disabled={disabled}\n        onChange={(e, v) => onChange('labelStep', v)}\n      />\n    </div>\n  );\n};\n\nconst AxisConfig = props => {\n  const { classes, disabled, label, maxValue, minValue, onChange, type } = props;\n\n  return (\n    <div className={classes.columnView}>\n      <Typography variant=\"subtitle2\">\n        <i>{type === 'domain' ? 'x' : 'y'}</i>\n        -axis\n      </Typography>\n      <NumberTextFieldCustom\n        className={classes.textField}\n        label=\"Min Value\"\n        value={minValue}\n        variant=\"outlined\"\n        disabled={disabled}\n        onChange={(e, v) => onChange('min', v)}\n      />\n      <NumberTextFieldCustom\n        className={classes.textField}\n        label=\"Max Value\"\n        value={maxValue}\n        variant=\"outlined\"\n        disabled={disabled}\n        onChange={(e, v) => onChange('max', v)}\n      />\n      <TextField\n        label=\"Label\"\n        value={label}\n        inputProps={{\n          maxLength: 5,\n          style: { textAlign: 'center' }\n        }}\n        variant=\"outlined\"\n        className={classes.textField}\n        onChange={e => onChange('axisLabel', e.target.value)}\n      />\n    </div>\n  );\n};\n\nconst GridSetup = props => {\n  const {\n    classes,\n    sizeConstraints,\n    domain,\n    dimensionsEnabled,\n    gridValues,\n    includeAxes,\n    labelValues,\n    onChange,\n    range,\n    size,\n    standardGrid\n  } = props;\n  const gridProps = { min: 2, max: 41 };\n\n  const onIncludeAxes = includeAxes => {\n    const noAxesConfig = type => {\n      const axis = type === 'domain' ? domain : range;\n\n      return {\n        min: 1,\n        max: axis.max < gridProps.min || axis.max > gridProps.max ? 16 : axis.max,\n        step: 1,\n        labelStep: 0\n      };\n    };\n\n    const updatedRange = {\n      ...range,\n      ...(includeAxes ? { labelStep: 1 } : noAxesConfig('range'))\n    };\n    const updatedDomain = {\n      ...domain,\n      ...(includeAxes ? { labelStep: 1 } : noAxesConfig('domain'))\n    };\n\n    onChange({ includeAxes, range: updatedRange, domain: updatedDomain });\n  };\n\n  const onStandardGridChanged = value => {\n    onChange({\n      standardGrid: value,\n      range: {\n        ...domain,\n        axisLabel: range.axisLabel\n      },\n      graph: {\n        ...size,\n        height: size.width\n      }\n    });\n  };\n\n  const onSizeChanged = (key, value) => {\n    const graph = { ...size, [key]: value };\n\n    if (standardGrid) {\n      graph.height = value;\n    }\n\n    onChange({ graph });\n  };\n\n  const onDomainChanged = (key, value) => {\n    domain[key] = value;\n\n    if (standardGrid && key !== 'axisLabel') {\n      range[key] = value;\n    }\n\n    onChange({ domain, range });\n  };\n\n  const onRangeChanged = (key, value) => {\n    range[key] = value;\n\n    onChange({ range });\n  };\n\n  const axesConfig = (\n    <React.Fragment>\n      <div className={classes.rowView}>\n        <AxisConfig\n          classes={classes}\n          type=\"domain\"\n          minValue={domain.min}\n          maxValue={domain.max}\n          label={domain.axisLabel}\n          includeAxes={includeAxes}\n          onChange={onDomainChanged}\n        />\n        <AxisConfig\n          classes={classes}\n          type=\"range\"\n          minValue={range.min}\n          maxValue={range.max}\n          label={range.axisLabel}\n          disabled={standardGrid}\n          includeAxes={includeAxes}\n          onChange={onRangeChanged}\n        />\n      </div>\n      <Typography className={classes.text}>\n        If you want the axis to be visible, use a zero or negative Min Value, and a positive Max\n        Value\n      </Typography>\n      <div className={classes.rowView}>\n        <GridConfig\n          classes={classes}\n          gridValue={domain.step}\n          labelValue={domain.labelStep}\n          gridValues={gridValues}\n          labelValues={labelValues}\n          onChange={onDomainChanged}\n        />\n        <GridConfig\n          classes={classes}\n          disabled={standardGrid}\n          gridValue={range.step}\n          labelValue={range.labelStep}\n          onChange={onRangeChanged}\n        />\n      </div>\n      <Typography className={classes.text}>\n        For unnumbered gridlines, enter a label interval of 0\n      </Typography>\n    </React.Fragment>\n  );\n\n  const gridlinesConfig = (\n    <div className={classes.columnView}>\n      <NumberTextFieldCustom\n        className={classes.largeTextField}\n        label=\"Number of Horizontal Gridlines\"\n        value={domain.max}\n        min={!includeAxes && gridProps.min}\n        max={!includeAxes && gridProps.max}\n        variant=\"outlined\"\n        onChange={(e, v) => onDomainChanged('max', v)}\n      />\n      <NumberTextFieldCustom\n        className={classes.largeTextField}\n        label=\"Number of Vertical Gridlines\"\n        value={range.max}\n        min={!includeAxes && gridProps.min}\n        max={!includeAxes && gridProps.max}\n        variant=\"outlined\"\n        disabled={standardGrid}\n        onChange={(e, v) => onRangeChanged('max', v)}\n      />\n    </div>\n  );\n\n  return (\n    <div className={classes.wrapper}>\n      <ExpansionPanel>\n        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>\n          <Typography variant=\"subtitle1\">Customize Grid Setup</Typography>\n        </ExpansionPanelSummary>\n        <ExpansionPanelDetails>\n          <div className={classes.content}>\n            <Toggle label=\"Include axes and labels?\" toggle={onIncludeAxes} checked={includeAxes} />\n            <Toggle\n              label=\"Constrain to standard coordinate grid?\"\n              toggle={onStandardGridChanged}\n              checked={standardGrid}\n            />\n            {includeAxes ? axesConfig : gridlinesConfig}\n            {dimensionsEnabled && (\n              <div className={classes.dimensions}>\n                <div>\n                  <Typography>Dimensions(px)</Typography>\n                  <Typography className={classes.disabled}>Min 150, Max 700</Typography>\n                </div>\n                <NumberTextFieldCustom\n                  className={classes.textField}\n                  label=\"Width\"\n                  value={size.width}\n                  min={sizeConstraints.min}\n                  max={sizeConstraints.max}\n                  step={sizeConstraints.step}\n                  variant=\"outlined\"\n                  onChange={(e, v) => onSizeChanged('width', v)}\n                />\n                <NumberTextFieldCustom\n                  className={classes.textField}\n                  label=\"Height\"\n                  value={size.height}\n                  min={sizeConstraints.min}\n                  max={sizeConstraints.max}\n                  step={sizeConstraints.step}\n                  variant=\"outlined\"\n                  disabled={standardGrid}\n                  onChange={(e, v) => onSizeChanged('height', v)}\n                />\n              </div>\n            )}\n          </div>\n        </ExpansionPanelDetails>\n      </ExpansionPanel>\n    </div>\n  );\n};\n\nGridSetup.propTypes = {\n  classes: PropTypes.object,\n  domain: PropTypes.object,\n  dimensionsEnabled: PropTypes.object,\n  gridValues: PropTypes.object,\n  includeAxes: PropTypes.bool,\n  labelValues: PropTypes.object,\n  onChange: PropTypes.function,\n  range: PropTypes.object,\n  size: PropTypes.object,\n  sizeConstraints: PropTypes.object,\n  standardGrid: PropTypes.bool\n};\n\nconst styles = theme => ({\n  wrapper: {\n    width: '450px'\n  },\n  content: {\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%'\n  },\n  columnView: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center'\n  },\n  rowView: {\n    display: 'flex',\n    justifyContent: 'space-around',\n    alignItems: 'center'\n  },\n  textField: {\n    width: '130px',\n    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`\n  },\n  largeTextField: {\n    width: '230px',\n    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`\n  },\n  text: {\n    fontStyle: 'italic',\n    margin: `${theme.spacing.unit}px 0`\n  },\n  dimensions: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center'\n  },\n  disabled: {\n    color: color.disabled()\n  }\n});\n\nexport default withStyles(styles)(GridSetup);\n"],"file":"grid-setup.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/index.js

@@ -17,6 +17,12 @@ Object.defineProperty(exports, "GraphContainer", {
     return _container["default"];
   }
 });
+Object.defineProperty(exports, "GridSetup", {
+  enumerable: true,
+  get: function get() {
+    return _gridSetup["default"];
+  }
+});
 Object.defineProperty(exports, "ToolMenu", {
   enumerable: true,
   get: function get() {
@@ -29,6 +35,8 @@ var _graph = _interopRequireDefault(require("./graph"));
 
 var _container = _interopRequireDefault(require("./container"));
 
+var _gridSetup = _interopRequireDefault(require("./grid-setup"));
+
 var tools = _interopRequireWildcard(require("./tools"));
 
 exports.tools = tools;

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;AACA","sourcesContent":["import Graph from './graph';\nimport GraphContainer from './container';\nimport * as tools from './tools';\nimport ToolMenu from './tool-menu';\n\nexport { Graph, GraphContainer, ToolMenu, tools };\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AACA","sourcesContent":["import Graph from './graph';\nimport GraphContainer from './container';\nimport GridSetup from './grid-setup';\nimport * as tools from './tools';\nimport ToolMenu from './tool-menu';\n\nexport { Graph, GraphContainer, GridSetup, ToolMenu, tools };\n"],"file":"index.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":"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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    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.2",
   "description": "Graphing components",
   "keywords": [
     "react",
@@ -19,8 +19,8 @@
     "@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/render-ui": "^4.12.6",
+    "@pie-lib/plot": "^2.2.0",
+    "@pie-lib/render-ui": "^4.12.8",
     "@vx/axis": "^0.0.189",
     "@vx/clip-path": "^0.0.189",
     "@vx/event": "^0.0.189",
@@ -43,6 +43,6 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "0ab3beb8351feafa08845f0c0639fb9a64e10e9a",
+  "gitHead": "debcaf764c62d97a1401f2898b062183847ce33b",
   "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>
     );