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

package/lib/root.js

@@ -104,6 +104,7 @@ var Root = /*#__PURE__*/function (_React$Component) {
           children = _this$props2.children,
           classes = _this$props2.classes,
           onChangeTitle = _this$props2.onChangeTitle,
+          thisIsChart = _this$props2.thisIsChart,
           showLabels = _this$props2.showLabels,
           showPixelGuides = _this$props2.showPixelGuides,
           showTitle = _this$props2.showTitle,
@@ -116,6 +117,7 @@ var Root = /*#__PURE__*/function (_React$Component) {
           height = _graphProps$size$heig === void 0 ? 500 : _graphProps$size$heig,
           domain = graphProps.domain,
           range = graphProps.range;
+      var chartPadding = thisIsChart ? 45 : 0;
       var padding = showLabels ? 70 : 40;
       var extraPadding = showLabels ? 16 : 40;
       var finalWidth = width + padding * 2 + (domain.padding || 0) * 2 + extraPadding;
@@ -165,9 +167,9 @@ var Root = /*#__PURE__*/function (_React$Component) {
       }, children)), showPixelGuides && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.sidePixelGuides,
         style: {
-          paddingTop: sideGridlinesPadding
+          paddingTop: sideGridlinesPadding + chartPadding
         }
-      }, (0, _toConsumableArray2["default"])(Array(nbOfHorizontalLines + 1).keys()).reverse().map(function (value) {
+      }, (0, _toConsumableArray2["default"])(Array(nbOfHorizontalLines + 1 - thisIsChart).keys()).reverse().map(function (value) {
         return /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
           "false": true,
           key: "top-guide-".concat(value)
@@ -237,7 +239,6 @@ var styles = function styles(theme) {
       width: '70px',
       display: 'flex',
       flexDirection: 'column',
-      marginTop: '40px',
       marginRight: '6px'
     },
     sidePixelIndicator: {

package/lib/root.js.map

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

package/package.json

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

package/src/root.jsx

@@ -60,6 +60,7 @@ export class Root extends React.Component {
       children,
       classes,
       onChangeTitle,
+      thisIsChart,
       showLabels,
       showPixelGuides,
       showTitle,
@@ -72,6 +73,7 @@ export class Root extends React.Component {
       range
     } = graphProps;
 
+    const chartPadding = thisIsChart ? 45 : 0;
     const padding = showLabels ? 70 : 40;
     const extraPadding = showLabels ? 16 : 40;
     const finalWidth = width + padding * 2 + (domain.padding || 0) * 2 + extraPadding;
@@ -136,8 +138,11 @@ export class Root extends React.Component {
             </g>
           </svg>
           {showPixelGuides && (
-            <div className={classes.sidePixelGuides} style={{ paddingTop: sideGridlinesPadding }}>
-              {[...Array(nbOfHorizontalLines + 1).keys()].reverse().map(value => (
+            <div
+              className={classes.sidePixelGuides}
+              style={{ paddingTop: sideGridlinesPadding + chartPadding }}
+            >
+              {[...Array(nbOfHorizontalLines + 1 - thisIsChart).keys()].reverse().map(value => (
                 <Readable false key={`top-guide-${value}`}>
                   <div className={classes.sidePixelIndicator}>━ {value * 100}px</div>
                 </Readable>
@@ -190,7 +195,7 @@ const styles = theme => ({
     width: '70px',
     display: 'flex',
     flexDirection: 'column',
-    marginTop: '40px',
+
     marginRight: '6px'
   },
   sidePixelIndicator: {