@pie-lib/plot 2.5.1 → 2.5.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.5.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/plot@2.5.1...@pie-lib/plot@2.5.2) (2022-10-17)
+
+
+### Bug Fixes
+
+* **charting:** increase font size for axis labels and title ([50a10c4](https://github.com/pie-framework/pie-lib/commit/50a10c43a758726106cd6320191b992613389839))
+
+
+
+
+
 ## [2.5.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/plot@2.5.0...@pie-lib/plot@2.5.1) (2022-09-29)
 
 

package/lib/label.js

@@ -50,6 +50,7 @@ var LabelComponent = function LabelComponent(props) {
 
   var activePlugins = ['bold', 'italic', 'underline', 'strikethrough', 'math' // 'languageCharacters'
   ];
+  var isChart = isChartBottomLabel || isChartLeftLabel || isDefineChartBottomLabel || isDefineChartLeftLabel;
   var chartValue = side === 'left' && isDefineChartLeftLabel && graphHeight - 220;
   var defaultStyle = {
     width: chartValue || (side === 'left' || side === 'right' ? graphHeight - 8 : graphWidth - 8),
@@ -69,7 +70,7 @@ var LabelComponent = function LabelComponent(props) {
   return /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
     "false": true
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classes.axisLabel, (_cn = {}, (0, _defineProperty2["default"])(_cn, classes.rotateLeftLabel, side === 'left' && !rotatedToHorizontal), (0, _defineProperty2["default"])(_cn, classes.rotateRightLabel, side === 'right' && !rotatedToHorizontal), (0, _defineProperty2["default"])(_cn, classes.editLabel, rotatedToHorizontal), (0, _defineProperty2["default"])(_cn, classes.customBottom, isChartBottomLabel || isDefineChartBottomLabel), _cn)),
+    className: (0, _classnames["default"])(isChart ? classes.chartLabel : classes.axisLabel, (_cn = {}, (0, _defineProperty2["default"])(_cn, classes.rotateLeftLabel, side === 'left' && !rotatedToHorizontal), (0, _defineProperty2["default"])(_cn, classes.rotateRightLabel, side === 'right' && !rotatedToHorizontal), (0, _defineProperty2["default"])(_cn, classes.editLabel, rotatedToHorizontal), (0, _defineProperty2["default"])(_cn, classes.customBottom, isChartBottomLabel || isDefineChartBottomLabel), _cn)),
     style: rotatedToHorizontal ? rotatedStyle : defaultStyle,
     onClick: rotateLabel
   }, disabledLabel ? /*#__PURE__*/_react["default"].createElement("div", {
@@ -104,6 +105,12 @@ var _default = (0, _styles.withStyles)(function (theme) {
       margin: '4px',
       padding: '4px 0'
     },
+    chartLabel: {
+      fontSize: theme.typography.fontSize + 2,
+      textAlign: 'center',
+      margin: '4px',
+      padding: '4px 0'
+    },
     disabledLabel: {
       pointerEvents: 'none',
       width: '100%'

package/lib/label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/label.jsx"],"names":["LabelComponent","props","classes","disabledLabel","graphHeight","graphWidth","isChartBottomLabel","isDefineChartBottomLabel","isChartLeftLabel","isDefineChartLeftLabel","placeholder","text","side","onChange","rotatedToHorizontal","setRotatedToHorizontal","activePlugins","chartValue","defaultStyle","width","top","left","rotatedStyle","rotateLabel","axisLabel","rotateLeftLabel","rotateRightLabel","editLabel","customBottom","__html","position","noBorder","theme","label","fill","color","secondary","fontSize","typography","textAlign","margin","padding","pointerEvents","backgroundColor","borderRadius","boxShadow","zIndex","rotate","transformOrigin","transformStyle"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { color, Readable } from '@pie-lib/render-ui';\nimport cn from 'classnames';\nimport EditableHtml from '@pie-lib/editable-html';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst LabelComponent = props => {\n  const {\n    classes,\n    disabledLabel,\n    graphHeight,\n    graphWidth,\n    isChartBottomLabel,\n    isDefineChartBottomLabel,\n    isChartLeftLabel,\n    isDefineChartLeftLabel,\n    placeholder,\n    text,\n    side,\n    onChange\n  } = props;\n  const [rotatedToHorizontal, setRotatedToHorizontal] = useState(false);\n  const activePlugins = [\n    'bold',\n    'italic',\n    'underline',\n    'strikethrough',\n    'math'\n    // 'languageCharacters'\n  ];\n\n  const chartValue = side === 'left' && isDefineChartLeftLabel && graphHeight - 220;\n  const defaultStyle = {\n    width: chartValue || (side === 'left' || side === 'right' ? graphHeight - 8 : graphWidth - 8),\n    top:\n      chartValue ||\n      (isChartLeftLabel && `${graphHeight - 70}px`) ||\n      (side === 'left' && `${graphHeight - 8}px`) ||\n      (isChartBottomLabel && `${graphHeight - 40}px`) ||\n      (side === 'bottom' && `${graphHeight - 90}px`) ||\n      0,\n    left:\n      (side === 'right' && `${graphWidth - 8}px`) ||\n      ((isDefineChartLeftLabel || isDefineChartBottomLabel) && '40px') ||\n      (isChartBottomLabel && '-10px') ||\n      0\n  };\n\n  const rotatedStyle = {\n    width: graphWidth - 8,\n    top: (side === 'right' && `${graphHeight - 22}px`) || 0,\n    left: 0\n  };\n\n  const rotateLabel = () =>\n    !disabledLabel && (side === 'left' || side === 'right') && setRotatedToHorizontal(true);\n\n  return (\n    <Readable false>\n      <div\n        className={cn(classes.axisLabel, {\n          [classes.rotateLeftLabel]: side === 'left' && !rotatedToHorizontal,\n          [classes.rotateRightLabel]: side === 'right' && !rotatedToHorizontal,\n          [classes.editLabel]: rotatedToHorizontal,\n          [classes.customBottom]: isChartBottomLabel || isDefineChartBottomLabel\n        })}\n        style={rotatedToHorizontal ? rotatedStyle : defaultStyle}\n        onClick={rotateLabel}\n      >\n        {disabledLabel ? (\n          <div className={classes.disabledLabel} dangerouslySetInnerHTML={{ __html: text || '' }} />\n        ) : (\n          <EditableHtml\n            markup={text || ''}\n            onChange={onChange}\n            placeholder={!disabledLabel && placeholder}\n            toolbarOpts={{\n              position: side === 'bottom' ? 'top' : 'bottom',\n              noBorder: true\n            }}\n            disableScrollbar\n            activePlugins={activePlugins}\n            onDone={() => setRotatedToHorizontal(false)}\n          />\n        )}\n      </div>\n    </Readable>\n  );\n};\n\nexport default withStyles(theme => ({\n  label: {\n    fill: color.secondary()\n  },\n  axisLabel: {\n    fontSize: theme.typography.fontSize - 2,\n    textAlign: 'center',\n    margin: '4px',\n    padding: '4px 0'\n  },\n  disabledLabel: {\n    pointerEvents: 'none',\n    width: '100%'\n  },\n  editLabel: {\n    position: 'absolute',\n    backgroundColor: 'white',\n    borderRadius: '4px',\n    boxShadow: '0px 5px 8px rgba(0, 0, 0, 0.15)',\n    zIndex: 10\n  },\n  rotateLeftLabel: {\n    rotate: '-90deg',\n    transformOrigin: '0 0',\n    transformStyle: 'preserve-3d',\n    position: 'absolute'\n  },\n  rotateRightLabel: {\n    rotate: '90deg',\n    transformOrigin: '0 0',\n    transformStyle: 'preserve-3d',\n    position: 'absolute'\n  },\n  customBottom: {\n    position: 'absolute'\n  }\n}))(LabelComponent);\n"],"file":"label.js"}
+{"version":3,"sources":["../src/label.jsx"],"names":["LabelComponent","props","classes","disabledLabel","graphHeight","graphWidth","isChartBottomLabel","isDefineChartBottomLabel","isChartLeftLabel","isDefineChartLeftLabel","placeholder","text","side","onChange","rotatedToHorizontal","setRotatedToHorizontal","activePlugins","isChart","chartValue","defaultStyle","width","top","left","rotatedStyle","rotateLabel","chartLabel","axisLabel","rotateLeftLabel","rotateRightLabel","editLabel","customBottom","__html","position","noBorder","theme","label","fill","color","secondary","fontSize","typography","textAlign","margin","padding","pointerEvents","backgroundColor","borderRadius","boxShadow","zIndex","rotate","transformOrigin","transformStyle"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { color, Readable } from '@pie-lib/render-ui';\nimport cn from 'classnames';\nimport EditableHtml from '@pie-lib/editable-html';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst LabelComponent = props => {\n  const {\n    classes,\n    disabledLabel,\n    graphHeight,\n    graphWidth,\n    isChartBottomLabel,\n    isDefineChartBottomLabel,\n    isChartLeftLabel,\n    isDefineChartLeftLabel,\n    placeholder,\n    text,\n    side,\n    onChange\n  } = props;\n  const [rotatedToHorizontal, setRotatedToHorizontal] = useState(false);\n  const activePlugins = [\n    'bold',\n    'italic',\n    'underline',\n    'strikethrough',\n    'math'\n    // 'languageCharacters'\n  ];\n\n  const isChart =\n    isChartBottomLabel || isChartLeftLabel || isDefineChartBottomLabel || isDefineChartLeftLabel;\n\n  const chartValue = side === 'left' && isDefineChartLeftLabel && graphHeight - 220;\n  const defaultStyle = {\n    width: chartValue || (side === 'left' || side === 'right' ? graphHeight - 8 : graphWidth - 8),\n    top:\n      chartValue ||\n      (isChartLeftLabel && `${graphHeight - 70}px`) ||\n      (side === 'left' && `${graphHeight - 8}px`) ||\n      (isChartBottomLabel && `${graphHeight - 40}px`) ||\n      (side === 'bottom' && `${graphHeight - 90}px`) ||\n      0,\n    left:\n      (side === 'right' && `${graphWidth - 8}px`) ||\n      ((isDefineChartLeftLabel || isDefineChartBottomLabel) && '40px') ||\n      (isChartBottomLabel && '-10px') ||\n      0\n  };\n\n  const rotatedStyle = {\n    width: graphWidth - 8,\n    top: (side === 'right' && `${graphHeight - 22}px`) || 0,\n    left: 0\n  };\n\n  const rotateLabel = () =>\n    !disabledLabel && (side === 'left' || side === 'right') && setRotatedToHorizontal(true);\n\n  return (\n    <Readable false>\n      <div\n        className={cn(isChart ? classes.chartLabel : classes.axisLabel, {\n          [classes.rotateLeftLabel]: side === 'left' && !rotatedToHorizontal,\n          [classes.rotateRightLabel]: side === 'right' && !rotatedToHorizontal,\n          [classes.editLabel]: rotatedToHorizontal,\n          [classes.customBottom]: isChartBottomLabel || isDefineChartBottomLabel\n        })}\n        style={rotatedToHorizontal ? rotatedStyle : defaultStyle}\n        onClick={rotateLabel}\n      >\n        {disabledLabel ? (\n          <div className={classes.disabledLabel} dangerouslySetInnerHTML={{ __html: text || '' }} />\n        ) : (\n          <EditableHtml\n            markup={text || ''}\n            onChange={onChange}\n            placeholder={!disabledLabel && placeholder}\n            toolbarOpts={{\n              position: side === 'bottom' ? 'top' : 'bottom',\n              noBorder: true\n            }}\n            disableScrollbar\n            activePlugins={activePlugins}\n            onDone={() => setRotatedToHorizontal(false)}\n          />\n        )}\n      </div>\n    </Readable>\n  );\n};\n\nexport default withStyles(theme => ({\n  label: {\n    fill: color.secondary()\n  },\n  axisLabel: {\n    fontSize: theme.typography.fontSize - 2,\n    textAlign: 'center',\n    margin: '4px',\n    padding: '4px 0'\n  },\n  chartLabel: {\n    fontSize: theme.typography.fontSize + 2,\n    textAlign: 'center',\n    margin: '4px',\n    padding: '4px 0'\n  },\n  disabledLabel: {\n    pointerEvents: 'none',\n    width: '100%'\n  },\n  editLabel: {\n    position: 'absolute',\n    backgroundColor: 'white',\n    borderRadius: '4px',\n    boxShadow: '0px 5px 8px rgba(0, 0, 0, 0.15)',\n    zIndex: 10\n  },\n  rotateLeftLabel: {\n    rotate: '-90deg',\n    transformOrigin: '0 0',\n    transformStyle: 'preserve-3d',\n    position: 'absolute'\n  },\n  rotateRightLabel: {\n    rotate: '90deg',\n    transformOrigin: '0 0',\n    transformStyle: 'preserve-3d',\n    position: 'absolute'\n  },\n  customBottom: {\n    position: 'absolute'\n  }\n}))(LabelComponent);\n"],"file":"label.js"}

package/lib/root.js

@@ -174,7 +174,7 @@ var Root = /*#__PURE__*/function (_React$Component) {
         style: isChart && {
           width: finalWidth
         },
-        className: (0, _classnames["default"])(classes.graphTitle, classes.disabledTitle),
+        className: (0, _classnames["default"])(isChart ? classes.chartTitle : classes.graphTitle, classes.disabledTitle),
         dangerouslySetInnerHTML: {
           __html: title || ''
         }
@@ -182,7 +182,7 @@ var Root = /*#__PURE__*/function (_React$Component) {
         style: isChart && {
           width: finalWidth
         },
-        className: (0, _classnames["default"])((0, _defineProperty2["default"])({}, classes.rightMargin, showPixelGuides), classes.graphTitle),
+        className: (0, _classnames["default"])((0, _defineProperty2["default"])({}, classes.rightMargin, showPixelGuides), isChart ? classes.chartTitle : classes.graphTitle),
         markup: title || '',
         onChange: onChangeTitle,
         placeholder: defineChart && titlePlaceholder || !disabledTitle && 'Click here to add a title for this graph',
@@ -316,6 +316,12 @@ var styles = function styles(theme) {
       padding: '12px 4px 0',
       textAlign: 'center'
     },
+    chartTitle: {
+      color: _renderUi.color.text(),
+      fontSize: theme.typography.fontSize + 4,
+      padding: '12px 4px 0',
+      textAlign: 'center'
+    },
     disabledTitle: {
       pointerEvents: 'none'
     },

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","newValue","side","labels","onChangeLabels","isChart","on","mouseMove","bind","disabledTitle","disabledLabels","labelsPlaceholders","titlePlaceholder","children","classes","defineChart","onChangeTitle","showLabels","showPixelGuides","showTitle","title","rootRef","size","width","height","domain","range","topPadding","leftPadding","finalWidth","padding","finalHeight","activeTitlePlugins","actualHeight","nbOfVerticalLines","parseInt","nbOfHorizontalLines","sideGridlinesPadding","root","topPixelGuides","marginLeft","Array","keys","map","value","topPixelIndicator","graphTitle","__html","rightMargin","noBorder","top","onChangeLabel","wrapper","left","chart","r","graphBox","right","sidePixelGuides","paddingTop","marginTop","reverse","sidePixelIndicator","bottom","React","Component","PropTypes","string","ChildrenType","bool","GraphPropsType","isRequired","func","object","styles","theme","border","color","primaryLight","text","backgroundColor","background","touchAction","position","display","svg","paddingLeft","overflow","cursor","userSelect","fontSize","typography","textAlign","pointerEvents","marginRight","flexDirection","alignItems","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';\nimport Label from './label';\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  onChangeLabel = (newValue, side) => {\n    const { labels, onChangeLabels, isChart } = this.props;\n\n    if (isChart) {\n      if (side === 'left') {\n        onChangeLabels('range', newValue);\n      } else {\n        onChangeLabels('domain', newValue);\n      }\n\n      return;\n    }\n\n    onChangeLabels({\n      ...labels,\n      [side]: newValue\n    });\n  };\n\n  render() {\n    const {\n      disabledTitle,\n      disabledLabels,\n      labels,\n      labelsPlaceholders,\n      titlePlaceholder,\n      graphProps,\n      children,\n      classes,\n      defineChart,\n      onChangeTitle,\n      isChart,\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 topPadding = 40;\n    const leftPadding = showLabels ? 80 : 60;\n    const finalWidth = width + leftPadding * 2 + (domain.padding || 0) * 2;\n    const finalHeight = height + topPadding * 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 = defineChart && showPixelGuides ? height - 160 : 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\n            className={classes.topPixelGuides}\n            style={{ marginLeft: isChart ? 60 : showLabels ? 30 : 10 }}\n          >\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          (disabledTitle ? (\n            <div\n              style={\n                isChart && {\n                  width: finalWidth\n                }\n              }\n              className={cn(classes.graphTitle, classes.disabledTitle)}\n              dangerouslySetInnerHTML={{ __html: title || '' }}\n            />\n          ) : (\n            <EditableHtml\n              style={\n                isChart && {\n                  width: finalWidth\n                }\n              }\n              className={cn({ [classes.rightMargin]: showPixelGuides }, classes.graphTitle)}\n              markup={title || ''}\n              onChange={onChangeTitle}\n              placeholder={\n                (defineChart && titlePlaceholder) ||\n                (!disabledTitle && 'Click here to add a title for this graph')\n              }\n              toolbarOpts={{ noBorder: true }}\n              activePlugins={activeTitlePlugins}\n              disableScrollbar\n            />\n          ))}\n        {showLabels && !isChart && (\n          <Label\n            side=\"top\"\n            text={labels.top}\n            disabledLabel={disabledLabels}\n            placeholder={labelsPlaceholders?.top}\n            graphHeight={finalHeight}\n            graphWidth={finalWidth}\n            onChange={value => this.onChangeLabel(value, 'top')}\n          />\n        )}\n        <div className={classes.wrapper}>\n          {showLabels && (\n            <Label\n              side=\"left\"\n              text={labels.left}\n              disabledLabel={disabledLabels}\n              placeholder={labelsPlaceholders?.left}\n              graphHeight={finalHeight}\n              graphWidth={finalWidth}\n              isChartLeftLabel={isChart && !defineChart}\n              isDefineChartLeftLabel={isChart && defineChart}\n              onChange={value => this.onChangeLabel(value, 'left')}\n            />\n          )}\n          <svg\n            width={finalWidth}\n            height={finalHeight}\n            className={defineChart ? classes.defineChart : classes.chart}\n          >\n            <g\n              ref={r => {\n                this.g = r;\n                if (rootRef) {\n                  rootRef(r);\n                }\n              }}\n              className={classes.graphBox}\n              transform={`translate(${leftPadding}, ${topPadding})`}\n            >\n              {children}\n            </g>\n          </svg>\n          {showLabels && !isChart && (\n            <Label\n              side=\"right\"\n              text={labels.right}\n              disabledLabel={disabledLabels}\n              placeholder={labelsPlaceholders?.right}\n              graphHeight={finalHeight}\n              graphWidth={finalWidth}\n              onChange={value => this.onChangeLabel(value, 'right')}\n            />\n          )}\n          {showPixelGuides && (\n            <div\n              className={classes.sidePixelGuides}\n              style={{\n                paddingTop: sideGridlinesPadding,\n                marginTop: defineChart ? 25 : 31\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        {showLabels && (\n          <Label\n            side=\"bottom\"\n            text={labels.bottom}\n            disabledLabel={disabledLabels}\n            placeholder={labelsPlaceholders?.bottom}\n            graphHeight={finalHeight}\n            graphWidth={finalWidth}\n            isChartBottomLabel={isChart && !defineChart}\n            isDefineChartBottomLabel={isChart && defineChart}\n            onChange={value => this.onChangeLabel(value, 'bottom')}\n          />\n        )}\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  root: {\n    border: `solid 1px ${color.primaryLight()}`,\n    color: color.text(),\n    backgroundColor: color.background(),\n    touchAction: 'none',\n    position: 'relative'\n  },\n  wrapper: {\n    display: 'flex',\n    position: 'relative'\n  },\n  svg: {},\n  defineChart: {\n    paddingLeft: '50px',\n    overflow: 'visible'\n  },\n  chart: {\n    overflow: 'visible'\n  },\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  rightMargin: {\n    marginRight: '74px'\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"}
+{"version":3,"sources":["../src/root.jsx"],"names":["Root","g","props","graphProps","onMouseMove","scale","snap","coords","_groups","x","invert","y","snapped","newValue","side","labels","onChangeLabels","isChart","on","mouseMove","bind","disabledTitle","disabledLabels","labelsPlaceholders","titlePlaceholder","children","classes","defineChart","onChangeTitle","showLabels","showPixelGuides","showTitle","title","rootRef","size","width","height","domain","range","topPadding","leftPadding","finalWidth","padding","finalHeight","activeTitlePlugins","actualHeight","nbOfVerticalLines","parseInt","nbOfHorizontalLines","sideGridlinesPadding","root","topPixelGuides","marginLeft","Array","keys","map","value","topPixelIndicator","chartTitle","graphTitle","__html","rightMargin","noBorder","top","onChangeLabel","wrapper","left","chart","r","graphBox","right","sidePixelGuides","paddingTop","marginTop","reverse","sidePixelIndicator","bottom","React","Component","PropTypes","string","ChildrenType","bool","GraphPropsType","isRequired","func","object","styles","theme","border","color","primaryLight","text","backgroundColor","background","touchAction","position","display","svg","paddingLeft","overflow","cursor","userSelect","fontSize","typography","textAlign","pointerEvents","marginRight","flexDirection","alignItems","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';\nimport Label from './label';\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  onChangeLabel = (newValue, side) => {\n    const { labels, onChangeLabels, isChart } = this.props;\n\n    if (isChart) {\n      if (side === 'left') {\n        onChangeLabels('range', newValue);\n      } else {\n        onChangeLabels('domain', newValue);\n      }\n\n      return;\n    }\n\n    onChangeLabels({\n      ...labels,\n      [side]: newValue\n    });\n  };\n\n  render() {\n    const {\n      disabledTitle,\n      disabledLabels,\n      labels,\n      labelsPlaceholders,\n      titlePlaceholder,\n      graphProps,\n      children,\n      classes,\n      defineChart,\n      onChangeTitle,\n      isChart,\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 topPadding = 40;\n    const leftPadding = showLabels ? 80 : 60;\n    const finalWidth = width + leftPadding * 2 + (domain.padding || 0) * 2;\n    const finalHeight = height + topPadding * 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 = defineChart && showPixelGuides ? height - 160 : 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\n            className={classes.topPixelGuides}\n            style={{ marginLeft: isChart ? 60 : showLabels ? 30 : 10 }}\n          >\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          (disabledTitle ? (\n            <div\n              style={\n                isChart && {\n                  width: finalWidth\n                }\n              }\n              className={cn(\n                isChart ? classes.chartTitle : classes.graphTitle,\n                classes.disabledTitle\n              )}\n              dangerouslySetInnerHTML={{ __html: title || '' }}\n            />\n          ) : (\n            <EditableHtml\n              style={\n                isChart && {\n                  width: finalWidth\n                }\n              }\n              className={cn(\n                { [classes.rightMargin]: showPixelGuides },\n                isChart ? classes.chartTitle : classes.graphTitle\n              )}\n              markup={title || ''}\n              onChange={onChangeTitle}\n              placeholder={\n                (defineChart && titlePlaceholder) ||\n                (!disabledTitle && 'Click here to add a title for this graph')\n              }\n              toolbarOpts={{ noBorder: true }}\n              activePlugins={activeTitlePlugins}\n              disableScrollbar\n            />\n          ))}\n        {showLabels && !isChart && (\n          <Label\n            side=\"top\"\n            text={labels.top}\n            disabledLabel={disabledLabels}\n            placeholder={labelsPlaceholders?.top}\n            graphHeight={finalHeight}\n            graphWidth={finalWidth}\n            onChange={value => this.onChangeLabel(value, 'top')}\n          />\n        )}\n        <div className={classes.wrapper}>\n          {showLabels && (\n            <Label\n              side=\"left\"\n              text={labels.left}\n              disabledLabel={disabledLabels}\n              placeholder={labelsPlaceholders?.left}\n              graphHeight={finalHeight}\n              graphWidth={finalWidth}\n              isChartLeftLabel={isChart && !defineChart}\n              isDefineChartLeftLabel={isChart && defineChart}\n              onChange={value => this.onChangeLabel(value, 'left')}\n            />\n          )}\n          <svg\n            width={finalWidth}\n            height={finalHeight}\n            className={defineChart ? classes.defineChart : classes.chart}\n          >\n            <g\n              ref={r => {\n                this.g = r;\n                if (rootRef) {\n                  rootRef(r);\n                }\n              }}\n              className={classes.graphBox}\n              transform={`translate(${leftPadding}, ${topPadding})`}\n            >\n              {children}\n            </g>\n          </svg>\n          {showLabels && !isChart && (\n            <Label\n              side=\"right\"\n              text={labels.right}\n              disabledLabel={disabledLabels}\n              placeholder={labelsPlaceholders?.right}\n              graphHeight={finalHeight}\n              graphWidth={finalWidth}\n              onChange={value => this.onChangeLabel(value, 'right')}\n            />\n          )}\n          {showPixelGuides && (\n            <div\n              className={classes.sidePixelGuides}\n              style={{\n                paddingTop: sideGridlinesPadding,\n                marginTop: defineChart ? 25 : 31\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        {showLabels && (\n          <Label\n            side=\"bottom\"\n            text={labels.bottom}\n            disabledLabel={disabledLabels}\n            placeholder={labelsPlaceholders?.bottom}\n            graphHeight={finalHeight}\n            graphWidth={finalWidth}\n            isChartBottomLabel={isChart && !defineChart}\n            isDefineChartBottomLabel={isChart && defineChart}\n            onChange={value => this.onChangeLabel(value, 'bottom')}\n          />\n        )}\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  root: {\n    border: `solid 1px ${color.primaryLight()}`,\n    color: color.text(),\n    backgroundColor: color.background(),\n    touchAction: 'none',\n    position: 'relative'\n  },\n  wrapper: {\n    display: 'flex',\n    position: 'relative'\n  },\n  svg: {},\n  defineChart: {\n    paddingLeft: '50px',\n    overflow: 'visible'\n  },\n  chart: {\n    overflow: 'visible'\n  },\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  chartTitle: {\n    color: color.text(),\n    fontSize: theme.typography.fontSize + 4,\n    padding: '12px 4px 0',\n    textAlign: 'center'\n  },\n  disabledTitle: {\n    pointerEvents: 'none'\n  },\n  rightMargin: {\n    marginRight: '74px'\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.5.1",
+  "version": "2.5.2",
   "description": "Some underlying components for building charts/graphs",
   "keywords": [
     "react",
@@ -38,6 +38,6 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "a847c8ebb4b4d6df9b7c011d2275c38910bf4ea1",
+  "gitHead": "681bc15345a6093a16e00043f2778a6d413b0f37",
   "scripts": {}
 }

package/src/label.jsx

@@ -29,6 +29,9 @@ const LabelComponent = props => {
     // 'languageCharacters'
   ];
 
+  const isChart =
+    isChartBottomLabel || isChartLeftLabel || isDefineChartBottomLabel || isDefineChartLeftLabel;
+
   const chartValue = side === 'left' && isDefineChartLeftLabel && graphHeight - 220;
   const defaultStyle = {
     width: chartValue || (side === 'left' || side === 'right' ? graphHeight - 8 : graphWidth - 8),
@@ -58,7 +61,7 @@ const LabelComponent = props => {
   return (
     <Readable false>
       <div
-        className={cn(classes.axisLabel, {
+        className={cn(isChart ? classes.chartLabel : classes.axisLabel, {
           [classes.rotateLeftLabel]: side === 'left' && !rotatedToHorizontal,
           [classes.rotateRightLabel]: side === 'right' && !rotatedToHorizontal,
           [classes.editLabel]: rotatedToHorizontal,
@@ -98,6 +101,12 @@ export default withStyles(theme => ({
     margin: '4px',
     padding: '4px 0'
   },
+  chartLabel: {
+    fontSize: theme.typography.fontSize + 2,
+    textAlign: 'center',
+    margin: '4px',
+    padding: '4px 0'
+  },
   disabledLabel: {
     pointerEvents: 'none',
     width: '100%'

package/src/root.jsx

@@ -142,7 +142,10 @@ export class Root extends React.Component {
                   width: finalWidth
                 }
               }
-              className={cn(classes.graphTitle, classes.disabledTitle)}
+              className={cn(
+                isChart ? classes.chartTitle : classes.graphTitle,
+                classes.disabledTitle
+              )}
               dangerouslySetInnerHTML={{ __html: title || '' }}
             />
           ) : (
@@ -152,7 +155,10 @@ export class Root extends React.Component {
                   width: finalWidth
                 }
               }
-              className={cn({ [classes.rightMargin]: showPixelGuides }, classes.graphTitle)}
+              className={cn(
+                { [classes.rightMargin]: showPixelGuides },
+                isChart ? classes.chartTitle : classes.graphTitle
+              )}
               markup={title || ''}
               onChange={onChangeTitle}
               placeholder={
@@ -282,6 +288,12 @@ const styles = theme => ({
     padding: '12px 4px 0',
     textAlign: 'center'
   },
+  chartTitle: {
+    color: color.text(),
+    fontSize: theme.typography.fontSize + 4,
+    padding: '12px 4px 0',
+    textAlign: 'center'
+  },
   disabledTitle: {
     pointerEvents: 'none'
   },