@pie-lib/plot 2.4.1 → 2.4.2

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.4.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/plot@2.4.1...@pie-lib/plot@2.4.2) (2022-08-30)
+
+
+### Bug Fixes
+
+* **plot, charting, graphing:** adjusted side pixel guides, fixed graphing rendering issue, adjusted charting dimensions PD-1963 ([5043231](https://github.com/pie-framework/pie-lib/commit/5043231ba73a0aa475115fb5fe9af29e0e67a4b6))
+
+
+
+
+
 ## [2.4.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/plot@2.4.0...@pie-lib/plot@2.4.1) (2022-08-29)
 
 **Note:** Version bump only for package @pie-lib/plot

package/lib/root.js

@@ -117,20 +117,23 @@ 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;
       var finalHeight = height + padding * 2 + (range.padding || 0) * 2;
       var activeTitlePlugins = ['bold', 'italic', 'underline', 'strikethrough', 'math' // 'languageCharacters'
       ];
+      var actualHeight = thisIsChart && showPixelGuides ? height - 80 : height;
       var nbOfVerticalLines = parseInt(width / 100);
-      var nbOfHorizontalLines = parseInt(height / 100);
-      var sideGridlinesPadding = parseInt(height % 100);
+      var nbOfHorizontalLines = parseInt(actualHeight / 100);
+      var sideGridlinesPadding = parseInt(actualHeight % 100);
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.root
       }, showPixelGuides && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.topPixelGuides
+        className: classes.topPixelGuides,
+        style: {
+          marginLeft: thisIsChart ? 10 : 20
+        }
       }, (0, _toConsumableArray2["default"])(Array(nbOfVerticalLines + 1).keys()).map(function (value) {
         return /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
           "false": true,
@@ -167,9 +170,10 @@ var Root = /*#__PURE__*/function (_React$Component) {
       }, children)), showPixelGuides && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.sidePixelGuides,
         style: {
-          paddingTop: sideGridlinesPadding + chartPadding
+          paddingTop: sideGridlinesPadding,
+          marginTop: thisIsChart ? 25 : 60
         }
-      }, (0, _toConsumableArray2["default"])(Array(nbOfHorizontalLines + 1 - thisIsChart).keys()).reverse().map(function (value) {
+      }, (0, _toConsumableArray2["default"])(Array(nbOfHorizontalLines + 1).keys()).reverse().map(function (value) {
         return /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
           "false": true,
           key: "top-guide-".concat(value)
@@ -223,8 +227,7 @@ var styles = function styles(theme) {
     },
     topPixelGuides: {
       display: 'flex',
-      paddingTop: '6px',
-      marginLeft: '10px'
+      paddingTop: '6px'
     },
     topPixelIndicator: {
       color: _renderUi.color.primaryLight(),

package/lib/root.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/root.jsx"],"names":["Root","g","props","graphProps","onMouseMove","scale","snap","coords","_groups","x","invert","y","snapped","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","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"],"mappings":"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","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"],"file":"root.js"}
+{"version":3,"sources":["../src/root.jsx"],"names":["Root","g","props","graphProps","onMouseMove","scale","snap","coords","_groups","x","invert","y","snapped","on","mouseMove","bind","disabledTitle","children","classes","onChangeTitle","thisIsChart","showLabels","showPixelGuides","showTitle","title","rootRef","size","width","height","domain","range","padding","extraPadding","finalWidth","finalHeight","activeTitlePlugins","actualHeight","nbOfVerticalLines","parseInt","nbOfHorizontalLines","sideGridlinesPadding","root","topPixelGuides","marginLeft","Array","keys","map","value","topPixelIndicator","graphTitle","noBorder","wrapper","svg","r","graphBox","sidePixelGuides","paddingTop","marginTop","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","flexDirection","alignItems","marginRight","marginBottom"],"mappings":"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","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 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 actualHeight = thisIsChart && showPixelGuides ? height - 80 : height;\n    const nbOfVerticalLines = parseInt(width / 100);\n    const nbOfHorizontalLines = parseInt(actualHeight / 100);\n    const sideGridlinesPadding = parseInt(actualHeight % 100);\n\n    return (\n      <div className={classes.root}>\n        {showPixelGuides && (\n          <div className={classes.topPixelGuides} style={{ marginLeft: thisIsChart ? 10 : 20 }}>\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={{\n                paddingTop: sideGridlinesPadding,\n                marginTop: thisIsChart ? 25 : 60\n              }}\n            >\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  },\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    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"],"file":"root.js"}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "Some underlying components for building charts/graphs",
   "keywords": [
     "react",
@@ -38,6 +38,6 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "8d1a2fb82ba23cb20ba1cfca61d76153731b9001",
+  "gitHead": "0963c3d69d1b57497c4366de26056ca82a3a7aa2",
   "scripts": {}
 }

package/src/root.jsx

@@ -73,7 +73,6 @@ 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;
@@ -88,14 +87,15 @@ export class Root extends React.Component {
       // 'languageCharacters'
     ];
 
+    const actualHeight = thisIsChart && showPixelGuides ? height - 80 : height;
     const nbOfVerticalLines = parseInt(width / 100);
-    const nbOfHorizontalLines = parseInt(height / 100);
-    const sideGridlinesPadding = parseInt(height % 100);
+    const nbOfHorizontalLines = parseInt(actualHeight / 100);
+    const sideGridlinesPadding = parseInt(actualHeight % 100);
 
     return (
       <div className={classes.root}>
         {showPixelGuides && (
-          <div className={classes.topPixelGuides}>
+          <div className={classes.topPixelGuides} style={{ marginLeft: thisIsChart ? 10 : 20 }}>
             {[...Array(nbOfVerticalLines + 1).keys()].map(value => (
               <Readable false key={`top-guide-${value}`}>
                 <div className={classes.topPixelIndicator}>
@@ -140,9 +140,12 @@ export class Root extends React.Component {
           {showPixelGuides && (
             <div
               className={classes.sidePixelGuides}
-              style={{ paddingTop: sideGridlinesPadding + chartPadding }}
+              style={{
+                paddingTop: sideGridlinesPadding,
+                marginTop: thisIsChart ? 25 : 60
+              }}
             >
-              {[...Array(nbOfHorizontalLines + 1 - thisIsChart).keys()].reverse().map(value => (
+              {[...Array(nbOfHorizontalLines + 1).keys()].reverse().map(value => (
                 <Readable false key={`top-guide-${value}`}>
                   <div className={classes.sidePixelIndicator}>━ {value * 100}px</div>
                 </Readable>
@@ -179,8 +182,7 @@ const styles = theme => ({
   },
   topPixelGuides: {
     display: 'flex',
-    paddingTop: '6px',
-    marginLeft: '10px'
+    paddingTop: '6px'
   },
   topPixelIndicator: {
     color: color.primaryLight(),
@@ -195,7 +197,6 @@ const styles = theme => ({
     width: '70px',
     display: 'flex',
     flexDirection: 'column',
-
     marginRight: '6px'
   },
   sidePixelIndicator: {