@pie-lib/plot 2.1.10-next.600 → 2.1.10-next.605

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/lib/root.js +11 -8
  2. package/lib/root.js.map +1 -1
  3. package/package.json +2 -2
  4. package/src/root.jsx +10 -9
package/lib/root.js CHANGED
@@ -117,20 +117,23 @@ var Root = /*#__PURE__*/function (_React$Component) {
117
117
  height = _graphProps$size$heig === void 0 ? 500 : _graphProps$size$heig,
118
118
  domain = graphProps.domain,
119
119
  range = graphProps.range;
120
- var chartPadding = thisIsChart ? 45 : 0;
121
120
  var padding = showLabels ? 70 : 40;
122
121
  var extraPadding = showLabels ? 16 : 40;
123
122
  var finalWidth = width + padding * 2 + (domain.padding || 0) * 2 + extraPadding;
124
123
  var finalHeight = height + padding * 2 + (range.padding || 0) * 2;
125
124
  var activeTitlePlugins = ['bold', 'italic', 'underline', 'strikethrough', 'math' // 'languageCharacters'
126
125
  ];
126
+ var actualHeight = thisIsChart && showPixelGuides ? height - 80 : height;
127
127
  var nbOfVerticalLines = parseInt(width / 100);
128
- var nbOfHorizontalLines = parseInt(height / 100);
129
- var sideGridlinesPadding = parseInt(height % 100);
128
+ var nbOfHorizontalLines = parseInt(actualHeight / 100);
129
+ var sideGridlinesPadding = parseInt(actualHeight % 100);
130
130
  return /*#__PURE__*/_react["default"].createElement("div", {
131
131
  className: classes.root
132
132
  }, showPixelGuides && /*#__PURE__*/_react["default"].createElement("div", {
133
- className: classes.topPixelGuides
133
+ className: classes.topPixelGuides,
134
+ style: {
135
+ marginLeft: thisIsChart ? 10 : 20
136
+ }
134
137
  }, (0, _toConsumableArray2["default"])(Array(nbOfVerticalLines + 1).keys()).map(function (value) {
135
138
  return /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
136
139
  "false": true,
@@ -167,9 +170,10 @@ var Root = /*#__PURE__*/function (_React$Component) {
167
170
  }, children)), showPixelGuides && /*#__PURE__*/_react["default"].createElement("div", {
168
171
  className: classes.sidePixelGuides,
169
172
  style: {
170
- paddingTop: sideGridlinesPadding + chartPadding
173
+ paddingTop: sideGridlinesPadding,
174
+ marginTop: thisIsChart ? 25 : 60
171
175
  }
172
- }, (0, _toConsumableArray2["default"])(Array(nbOfHorizontalLines + 1 - thisIsChart).keys()).reverse().map(function (value) {
176
+ }, (0, _toConsumableArray2["default"])(Array(nbOfHorizontalLines + 1).keys()).reverse().map(function (value) {
173
177
  return /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
174
178
  "false": true,
175
179
  key: "top-guide-".concat(value)
@@ -223,8 +227,7 @@ var styles = function styles(theme) {
223
227
  },
224
228
  topPixelGuides: {
225
229
  display: 'flex',
226
- paddingTop: '6px',
227
- marginLeft: '10px'
230
+ paddingTop: '6px'
228
231
  },
229
232
  topPixelIndicator: {
230
233
  color: _renderUi.color.primaryLight(),
package/lib/root.js.map CHANGED
@@ -1 +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","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":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;IAEaA,I;;;;;;;;;;;;;;;kGAeC,UAAAC,CAAC,EAAI;MACf,kBAAoC,MAAKC,KAAzC;MAAA,IAAQC,UAAR,eAAQA,UAAR;MAAA,IAAoBC,WAApB,eAAoBA,WAApB;;MAEA,IAAI,CAACA,WAAL,EAAkB;QAChB;MACD;;MAED,IAAQC,KAAR,GAAwBF,UAAxB,CAAQE,KAAR;MAAA,IAAeC,IAAf,GAAwBH,UAAxB,CAAeG,IAAf;MACA,IAAMC,MAAM,GAAG,IAAAC,kBAAA,EAAMP,CAAC,CAACQ,OAAF,CAAU,CAAV,EAAa,CAAb,CAAN,CAAf;MACA,IAAMC,CAAC,GAAGL,KAAK,CAACK,CAAN,CAAQC,MAAR,CAAeJ,MAAM,CAAC,CAAD,CAArB,CAAV;MACA,IAAMK,CAAC,GAAGP,KAAK,CAACO,CAAN,CAAQD,MAAR,CAAeJ,MAAM,CAAC,CAAD,CAArB,CAAV;MAEA,IAAMM,OAAO,GAAG;QACdH,CAAC,EAAEJ,IAAI,CAACI,CAAL,CAAOA,CAAP,CADW;QAEdE,CAAC,EAAEN,IAAI,CAACM,CAAL,CAAOA,CAAP;MAFW,CAAhB;MAKAR,WAAW,CAACS,OAAD,CAAX;IACD,C;;;;;;WAED,6BAAoB;MAClB,IAAMZ,CAAC,GAAG,IAAAa,mBAAA,EAAO,KAAKb,CAAZ,CAAV;MACAA,CAAC,CAACc,EAAF,CAAK,WAAL,EAAkB,KAAKC,SAAL,CAAeC,IAAf,CAAoB,IAApB,EAA0BhB,CAA1B,CAAlB;IACD;;;WAED,gCAAuB;MACrB,IAAMA,CAAC,GAAG,IAAAa,mBAAA,EAAO,KAAKb,CAAZ,CAAV;MACAA,CAAC,CAACc,EAAF,CAAK,WAAL,EAAkB,IAAlB;IACD;;;WAED,kBAAS;MAAA;;MACP,mBAYI,KAAKb,KAZT;MAAA,IACEgB,aADF,gBACEA,aADF;MAAA,IAEEf,UAFF,gBAEEA,UAFF;MAAA,IAGEgB,QAHF,gBAGEA,QAHF;MAAA,IAIEC,OAJF,gBAIEA,OAJF;MAAA,IAKEC,aALF,gBAKEA,aALF;MAAA,IAMEC,WANF,gBAMEA,WANF;MAAA,IAOEC,UAPF,gBAOEA,UAPF;MAAA,IAQEC,eARF,gBAQEA,eARF;MAAA,IASEC,SATF,gBASEA,SATF;MAAA,IAUEC,KAVF,gBAUEA,KAVF;MAAA,IAWEC,OAXF,gBAWEA,OAXF;MAaA,uBAIIxB,UAJJ,CACEyB,IADF;MAAA,6CACUC,KADV;MAAA,IACUA,KADV,sCACkB,GADlB;MAAA,6CACuBC,MADvB;MAAA,IACuBA,MADvB,sCACgC,GADhC;MAAA,IAEEC,MAFF,GAII5B,UAJJ,CAEE4B,MAFF;MAAA,IAGEC,KAHF,GAII7B,UAJJ,CAGE6B,KAHF;MAMA,IAAMC,YAAY,GAAGX,WAAW,GAAG,EAAH,GAAQ,CAAxC;MACA,IAAMY,OAAO,GAAGX,UAAU,GAAG,EAAH,GAAQ,EAAlC;MACA,IAAMY,YAAY,GAAGZ,UAAU,GAAG,EAAH,GAAQ,EAAvC;MACA,IAAMa,UAAU,GAAGP,KAAK,GAAGK,OAAO,GAAG,CAAlB,GAAsB,CAACH,MAAM,CAACG,OAAP,IAAkB,CAAnB,IAAwB,CAA9C,GAAkDC,YAArE;MACA,IAAME,WAAW,GAAGP,MAAM,GAAGI,OAAO,GAAG,CAAnB,GAAuB,CAACF,KAAK,CAACE,OAAN,IAAiB,CAAlB,IAAuB,CAAlE;MAEA,IAAMI,kBAAkB,GAAG,CACzB,MADyB,EAEzB,QAFyB,EAGzB,WAHyB,EAIzB,eAJyB,EAKzB,MALyB,CAMzB;MANyB,CAA3B;MASA,IAAMC,iBAAiB,GAAGC,QAAQ,CAACX,KAAK,GAAG,GAAT,CAAlC;MACA,IAAMY,mBAAmB,GAAGD,QAAQ,CAACV,MAAM,GAAG,GAAV,CAApC;MACA,IAAMY,oBAAoB,GAAGF,QAAQ,CAACV,MAAM,GAAG,GAAV,CAArC;MAEA,oBACE;QAAK,SAAS,EAAEV,OAAO,CAACuB;MAAxB,GACGnB,eAAe,iBACd;QAAK,SAAS,EAAEJ,OAAO,CAACwB;MAAxB,GACG,oCAAIC,KAAK,CAACN,iBAAiB,GAAG,CAArB,CAAL,CAA6BO,IAA7B,EAAJ,EAAyCC,GAAzC,CAA6C,UAAAC,KAAK;QAAA,oBACjD,gCAAC,kBAAD;UAAU,aAAV;UAAgB,GAAG,sBAAeA,KAAf;QAAnB,gBACE;UAAK,SAAS,EAAE5B,OAAO,CAAC6B;QAAxB,gBACE,6CAAMD,KAAK,GAAG,GAAd,OADF,eAEE,iDAFF,CADF,CADiD;MAAA,CAAlD,CADH,CAFJ,EAaGvB,SAAS,iBACR,gCAAC,wBAAD;QACE,SAAS,EAAE,IAAAyB,sBAAA,uCAEN9B,OAAO,CAACF,aAFF,EAEkBA,aAFlB,GAITE,OAAO,CAAC+B,UAJC,CADb;QAOE,MAAM,EAAEzB,KAAK,IAAI,EAPnB;QAQE,KAAK,EAAEU,UART;QASE,QAAQ,EAAEf,aATZ;QAUE,WAAW,EAAE,CAACH,aAAD,IAAkB,0CAVjC;QAWE,WAAW,EAAE;UAAEkC,QAAQ,EAAE;QAAZ,CAXf;QAYE,aAAa,EAAEd;MAZjB,EAdJ,eA6BE;QAAK,SAAS,EAAElB,OAAO,CAACiC;MAAxB,gBACE;QAAK,KAAK,EAAEjB,UAAZ;QAAwB,MAAM,EAAEC,WAAhC;QAA6C,SAAS,EAAEjB,OAAO,CAACkC;MAAhE,gBACE;QACE,GAAG,EAAE,aAAAC,CAAC,EAAI;UACR,MAAI,CAACtD,CAAL,GAASsD,CAAT;;UACA,IAAI5B,OAAJ,EAAa;YACXA,OAAO,CAAC4B,CAAD,CAAP;UACD;QACF,CANH;QAOE,SAAS,EAAEnC,OAAO,CAACoC,QAPrB;QAQE,SAAS,sBAAetB,OAAf,eAA2BA,OAA3B;MARX,GAUGf,QAVH,CADF,CADF,EAeGK,eAAe,iBACd;QACE,SAAS,EAAEJ,OAAO,CAACqC,eADrB;QAEE,KAAK,EAAE;UAAEC,UAAU,EAAEhB,oBAAoB,GAAGT;QAArC;MAFT,GAIG,oCAAIY,KAAK,CAACJ,mBAAmB,GAAG,CAAtB,GAA0BnB,WAA3B,CAAL,CAA6CwB,IAA7C,EAAJ,EAAyDa,OAAzD,GAAmEZ,GAAnE,CAAuE,UAAAC,KAAK;QAAA,oBAC3E,gCAAC,kBAAD;UAAU,aAAV;UAAgB,GAAG,sBAAeA,KAAf;QAAnB,gBACE;UAAK,SAAS,EAAE5B,OAAO,CAACwC;QAAxB,cAA+CZ,KAAK,GAAG,GAAvD,OADF,CAD2E;MAAA,CAA5E,CAJH,CAhBJ,CA7BF,CADF;IA4DD;;;EAhJuBa,iBAAA,CAAMC,S;;;iCAAnB9D,I,eACQ;EACjB0B,KAAK,EAAEqC,qBAAA,CAAUC,MADA;EAEjB7C,QAAQ,EAAE8C,mBAFO;EAGjB/C,aAAa,EAAE6C,qBAAA,CAAUG,IAHR;EAIjB/D,UAAU,EAAEgE,qBAAA,CAAeC,UAJV;EAKjB/C,aAAa,EAAE0C,qBAAA,CAAUM,IALR;EAMjBjE,WAAW,EAAE2D,qBAAA,CAAUM,IANN;EAOjBjD,OAAO,EAAE2C,qBAAA,CAAUO,MAAV,CAAiBF,UAPT;EAQjB7C,UAAU,EAAEwC,qBAAA,CAAUG,IARL;EASjBzC,SAAS,EAAEsC,qBAAA,CAAUG,IATJ;EAUjB1C,eAAe,EAAEuC,qBAAA,CAAUG,IAVV;EAWjBvC,OAAO,EAAEoC,qBAAA,CAAUM;AAXF,C;;AAiJrB,IAAME,MAAM,GAAG,SAATA,MAAS,CAAAC,KAAK;EAAA,OAAK;IACvB7B,IAAI,EAAE;MACJ8B,MAAM,sBAAeC,eAAA,CAAMC,YAAN,EAAf,CADF;MAEJD,KAAK,EAAEA,eAAA,CAAME,IAAN,EAFH;MAGJC,eAAe,EAAEH,eAAA,CAAMI,UAAN;IAHb,CADiB;IAMvBzB,OAAO,EAAE;MACP0B,OAAO,EAAE;IADF,CANc;IASvBzB,GAAG,EAAE,EATkB;IAUvBE,QAAQ,EAAE;MACRwB,MAAM,EAAE,SADA;MAERC,UAAU,EAAE;IAFJ,CAVa;IAcvB9B,UAAU,EAAE;MACVuB,KAAK,EAAEA,eAAA,CAAME,IAAN,EADG;MAEVM,QAAQ,EAAEV,KAAK,CAACW,UAAN,CAAiBD,QAAjB,GAA4B,CAF5B;MAGVhD,OAAO,EAAE,YAHC;MAIVkD,SAAS,EAAE;IAJD,CAdW;IAoBvBlE,aAAa,EAAE;MACbmE,aAAa,EAAE;IADF,CApBQ;IAuBvBzC,cAAc,EAAE;MACdmC,OAAO,EAAE,MADK;MAEdrB,UAAU,EAAE,KAFE;MAGd4B,UAAU,EAAE;IAHE,CAvBO;IA4BvBrC,iBAAiB,EAAE;MACjByB,KAAK,EAAEA,eAAA,CAAMC,YAAN,EADU;MAEjBI,OAAO,EAAE,MAFQ;MAGjBQ,aAAa,EAAE,QAHE;MAIjBC,UAAU,EAAE,QAJK;MAKjB3D,KAAK,EAAE,OALU;MAMjBwD,aAAa,EAAE,MANE;MAOjBJ,UAAU,EAAE;IAPK,CA5BI;IAqCvBxB,eAAe,EAAE;MACf5B,KAAK,EAAE,MADQ;MAEfkD,OAAO,EAAE,MAFM;MAGfQ,aAAa,EAAE,QAHA;MAKfE,WAAW,EAAE;IALE,CArCM;IA4CvB7B,kBAAkB,EAAE;MAClBc,KAAK,EAAEA,eAAA,CAAMC,YAAN,EADW;MAElBS,SAAS,EAAE,OAFO;MAGlBtD,MAAM,EAAE,MAHU;MAIlBuD,aAAa,EAAE,MAJG;MAKlBJ,UAAU,EAAE,MALM;MAOlB,sBAAsB;QACpBS,YAAY,EAAE;MADM;IAPJ;EA5CG,CAAL;AAAA,CAApB;;eAyDe,IAAAC,kBAAA,EAAWpB,MAAX,EAAmBvE,IAAnB,C"}
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","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","cn","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","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 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"],"mappings":"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"}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "2.1.10-next.600+98312644",
6
+ "version": "2.1.10-next.605+e53e3c32",
7
7
  "description": "Some underlying components for building charts/graphs",
8
8
  "keywords": [
9
9
  "react",
@@ -38,6 +38,6 @@
38
38
  "peerDependencies": {
39
39
  "react": "^16.8.1"
40
40
  },
41
- "gitHead": "9831264443f6dee10be7f14ccdb712a80d2d8658",
41
+ "gitHead": "e53e3c32ecfe4eada6509f82ce533abbdeb11884",
42
42
  "scripts": {}
43
43
  }
package/src/root.jsx CHANGED
@@ -73,7 +73,6 @@ export class Root extends React.Component {
73
73
  range
74
74
  } = graphProps;
75
75
 
76
- const chartPadding = thisIsChart ? 45 : 0;
77
76
  const padding = showLabels ? 70 : 40;
78
77
  const extraPadding = showLabels ? 16 : 40;
79
78
  const finalWidth = width + padding * 2 + (domain.padding || 0) * 2 + extraPadding;
@@ -88,14 +87,15 @@ export class Root extends React.Component {
88
87
  // 'languageCharacters'
89
88
  ];
90
89
 
90
+ const actualHeight = thisIsChart && showPixelGuides ? height - 80 : height;
91
91
  const nbOfVerticalLines = parseInt(width / 100);
92
- const nbOfHorizontalLines = parseInt(height / 100);
93
- const sideGridlinesPadding = parseInt(height % 100);
92
+ const nbOfHorizontalLines = parseInt(actualHeight / 100);
93
+ const sideGridlinesPadding = parseInt(actualHeight % 100);
94
94
 
95
95
  return (
96
96
  <div className={classes.root}>
97
97
  {showPixelGuides && (
98
- <div className={classes.topPixelGuides}>
98
+ <div className={classes.topPixelGuides} style={{ marginLeft: thisIsChart ? 10 : 20 }}>
99
99
  {[...Array(nbOfVerticalLines + 1).keys()].map(value => (
100
100
  <Readable false key={`top-guide-${value}`}>
101
101
  <div className={classes.topPixelIndicator}>
@@ -140,9 +140,12 @@ export class Root extends React.Component {
140
140
  {showPixelGuides && (
141
141
  <div
142
142
  className={classes.sidePixelGuides}
143
- style={{ paddingTop: sideGridlinesPadding + chartPadding }}
143
+ style={{
144
+ paddingTop: sideGridlinesPadding,
145
+ marginTop: thisIsChart ? 25 : 60
146
+ }}
144
147
  >
145
- {[...Array(nbOfHorizontalLines + 1 - thisIsChart).keys()].reverse().map(value => (
148
+ {[...Array(nbOfHorizontalLines + 1).keys()].reverse().map(value => (
146
149
  <Readable false key={`top-guide-${value}`}>
147
150
  <div className={classes.sidePixelIndicator}>━ {value * 100}px</div>
148
151
  </Readable>
@@ -179,8 +182,7 @@ const styles = theme => ({
179
182
  },
180
183
  topPixelGuides: {
181
184
  display: 'flex',
182
- paddingTop: '6px',
183
- marginLeft: '10px'
185
+ paddingTop: '6px'
184
186
  },
185
187
  topPixelIndicator: {
186
188
  color: color.primaryLight(),
@@ -195,7 +197,6 @@ const styles = theme => ({
195
197
  width: '70px',
196
198
  display: 'flex',
197
199
  flexDirection: 'column',
198
-
199
200
  marginRight: '6px'
200
201
  },
201
202
  sidePixelIndicator: {