@pie-lib/plot 2.7.3 → 2.7.4-next.1618

package/lib/grid-draggable.js

@@ -47,7 +47,7 @@ var _invariant = _interopRequireDefault(require("invariant"));
 
 var _d3Selection = require("d3-selection");
 
-var _excluded = ["disabled", "onClick"];
+var _excluded = ["disabled"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -164,14 +164,55 @@ var gridDraggable = function gridDraggable(opts) {
           log('[getScaledBounds]: ', scaled);
           return scaled;
         });
+        (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getClientPoint", function (node, event) {
+          if (!node || !event) {
+            return null;
+          }
+
+          var svg = node.ownerSVGElement || node;
+
+          if (svg && svg.createSVGPoint) {
+            var point = svg.createSVGPoint(); // Check if it's a touch event and use the first touch point
+
+            if (event.touches && event.touches.length > 0) {
+              var touch = event.touches[0];
+              point.x = touch.clientX;
+              point.y = touch.clientY;
+            } else {
+              // Fall back to mouse event properties
+              point.x = event.clientX;
+              point.y = event.clientY;
+            }
+
+            if (node.getScreenCTM) {
+              point = point.matrixTransform(node.getScreenCTM().inverse());
+              return [point.x, point.y];
+            } else {
+              return null;
+            }
+          }
+
+          var rect = node.getBoundingClientRect();
+
+          if (rect) {
+            return [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];
+          } else {
+            return null;
+          }
+        });
         (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "skipDragOutsideOfBounds", function (dd, e, graphProps) {
-          // ignore drag movement outside of the domain and range.
+          // Ignore drag movement outside of the domain and range.
           var rootNode = graphProps.getRootNode();
 
-          var _clientPoint = (0, _d3Selection.clientPoint)(rootNode, e),
-              _clientPoint2 = (0, _slicedToArray2["default"])(_clientPoint, 2),
-              rawX = _clientPoint2[0],
-              rawY = _clientPoint2[1];
+          var clientPoint = _this.getClientPoint(rootNode, e);
+
+          if (clientPoint === null) {
+            return true; // Indicate that the drag is outside of bounds
+          }
+
+          var _clientPoint = (0, _slicedToArray2["default"])(clientPoint, 2),
+              rawX = _clientPoint[0],
+              rawY = _clientPoint[1];
 
           var scale = graphProps.scale,
               domain = graphProps.domain,
@@ -263,10 +304,10 @@ var gridDraggable = function gridDraggable(opts) {
               var scale = graphProps.scale,
                   snap = graphProps.snap;
 
-              var _clientPoint3 = (0, _d3Selection.clientPoint)(e.target, e),
-                  _clientPoint4 = (0, _slicedToArray2["default"])(_clientPoint3, 2),
-                  rawX = _clientPoint4[0],
-                  rawY = _clientPoint4[1];
+              var _clientPoint2 = (0, _d3Selection.clientPoint)(e.target, e),
+                  _clientPoint3 = (0, _slicedToArray2["default"])(_clientPoint2, 2),
+                  rawX = _clientPoint3[0],
+                  rawY = _clientPoint3[1];
 
               var x = scale.x.invert(rawX);
               var y = scale.y.invert(rawY);
@@ -294,15 +335,10 @@ var gridDraggable = function gridDraggable(opts) {
       (0, _createClass2["default"])(GridDraggable, [{
         key: "render",
         value: function render() {
-          /* eslint-disable no-unused-vars */
-          //Note: we pull onClick out so that it's not in ...rest.
           var _this$props3 = this.props,
               disabled = _this$props3.disabled,
-              onClick = _this$props3.onClick,
               rest = (0, _objectWithoutProperties2["default"])(_this$props3, _excluded);
-          /* eslint-enable no-unused-vars */
-
-          var grid = this.grid(); //prevent the text select icon from rendering.
+          var grid = this.grid(); // prevent the text select icon from rendering.
 
           var onMouseDown = function onMouseDown(e) {
             return e.nativeEvent.preventDefault();

package/lib/grid-draggable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/grid-draggable.jsx"],"names":["log","deltaFn","scale","snap","val","delta","normalized","inverted","invert","fixDecimalsArithmetic","toFixed","gridDraggable","opts","Comp","fromDelta","bounds","anchorPoint","graphProps","props","domain","range","x","step","y","e","onDragStart","document","activeElement","blur","setState","startX","clientX","startY","clientY","key","event","K","toUpperCase","end","start","state","Math","abs","out","grid","scaled","left","interval","right","top","bottom","dd","rootNode","getRootNode","rawX","rawY","xOutside","deltaX","min","max","yOutside","deltaY","onDrag","getScaledBounds","skipDragOutsideOfBounds","dragArg","applyDelta","undefined","point","pos","position","p","utils","getDelta","onDragStop","onClick","lastX","lastY","isClick","tiny","target","disabled","rest","onMouseDown","nativeEvent","preventDefault","isDragging","onStart","onStop","axis","React","Component","PropTypes","bool","func","onMove","GraphPropsType","isRequired"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { GraphPropsType } from './types';\nimport { DraggableCore } from './draggable';\nimport debug from 'debug';\nimport * as utils from './utils';\nimport isFunction from 'lodash/isFunction';\nimport invariant from 'invariant';\nimport { clientPoint } from 'd3-selection';\n\nconst log = debug('pie-lib:plot:grid-draggable');\n\nexport const deltaFn = (scale, snap, val) => (delta) => {\n  const normalized = delta + scale(0);\n  const inverted = scale.invert(normalized);\n\n  const fixDecimalsArithmetic = (snap(val + inverted).toFixed(4) * 1000) / 1000;\n\n  return fixDecimalsArithmetic;\n};\n\n/**\n * Creates a Component that is draggable, within a bounded grid.\n * @param {*} opts\n */\nexport const gridDraggable = (opts) => (Comp) => {\n  invariant(\n    !!opts && isFunction(opts.fromDelta) && isFunction(opts.bounds) && isFunction(opts.anchorPoint),\n    'You must supply an object with: { anchorPoint: Function, fromDelta: Function, bounds: Function }',\n  );\n  return class GridDraggable extends React.Component {\n    static propTypes = {\n      disabled: PropTypes.bool,\n      onDragStart: PropTypes.func,\n      onDrag: PropTypes.func,\n      onDragStop: PropTypes.func,\n      onClick: PropTypes.func,\n      onMove: PropTypes.func,\n      graphProps: GraphPropsType.isRequired,\n    };\n    grid = () => {\n      const { graphProps } = this.props;\n      const { scale, domain, range } = graphProps;\n      return {\n        x: scale.x(domain.step) - scale.x(0),\n        y: scale.y(range.step) - scale.y(0),\n      };\n    };\n    onStart = (e) => {\n      const { onDragStart } = this.props;\n      if (document.activeElement) {\n        document.activeElement.blur();\n      }\n      this.setState({ startX: e.clientX, startY: e.clientY });\n      if (onDragStart) {\n        onDragStart();\n      }\n    };\n    position = () => {\n      const { x, y } = opts.anchorPoint(this.props);\n      const { graphProps } = this.props;\n      const { scale, snap } = graphProps;\n\n      return {\n        anchorPoint: {\n          x,\n          y,\n        },\n        x: deltaFn(scale.x, snap.x, x),\n        y: deltaFn(scale.y, snap.y, y),\n      };\n    };\n\n    tiny = (key, event) => {\n      const K = key.toUpperCase();\n      const end = event[`client${K}`];\n      const start = this.state[`start${K}`];\n      const delta = Math.abs(end - start);\n      const out = delta < Math.abs(this.grid()[key]) / 10;\n      log('[tiny] key: ', key, 'delta: ', delta, 'out: ', out);\n      return out;\n    };\n\n    getScaledBounds = () => {\n      const bounds = opts.bounds(this.props, this.props.graphProps);\n      log('bounds: ', bounds);\n      const grid = this.grid();\n\n      const scaled = {\n        left: (bounds.left / grid.interval) * grid.x,\n        right: (bounds.right / grid.interval) * grid.x,\n        top: (bounds.top / grid.interval) * grid.y,\n        bottom: (bounds.bottom / grid.interval) * grid.y,\n      };\n      log('[getScaledBounds]: ', scaled);\n      return scaled;\n    };\n\n    skipDragOutsideOfBounds = (dd, e, graphProps) => {\n      // ignore drag movement outside of the domain and range.\n      const rootNode = graphProps.getRootNode();\n      const [rawX, rawY] = clientPoint(rootNode, e);\n      const { scale, domain, range } = graphProps;\n      let x = scale.x.invert(rawX);\n      let y = scale.y.invert(rawY);\n\n      const xOutside = (dd.deltaX > 0 && x < domain.min) || (dd.deltaX < 0 && x > domain.max);\n      const yOutside = (dd.deltaY > 0 && y > range.max) || (dd.deltaY < 0 && y < range.min);\n      return xOutside || yOutside;\n    };\n\n    onDrag = (e, dd) => {\n      const { onDrag, graphProps } = this.props;\n\n      if (!onDrag) {\n        return;\n      }\n\n      const bounds = this.getScaledBounds();\n\n      if (dd.deltaX < 0 && dd.deltaX < bounds.left) {\n        return;\n      }\n\n      if (dd.deltaX > 0 && dd.deltaX > bounds.right) {\n        return;\n      }\n\n      if (dd.deltaY < 0 && dd.deltaY < bounds.top) {\n        return;\n      }\n\n      if (dd.deltaY > 0 && dd.deltaY > bounds.bottom) {\n        return;\n      }\n\n      if (this.skipDragOutsideOfBounds(dd, e, graphProps)) {\n        return;\n      }\n\n      const dragArg = this.applyDelta({ x: dd.deltaX, y: dd.deltaY });\n\n      if (dragArg !== undefined || dragArg !== null) {\n        onDrag(dragArg);\n      }\n    };\n\n    getDelta = (point) => {\n      const pos = this.position();\n\n      const p = {\n        x: pos.x(point.x),\n        y: pos.y(point.y),\n      };\n\n      return utils.getDelta(pos.anchorPoint, p);\n    };\n\n    applyDelta = (point) => {\n      const delta = this.getDelta(point);\n      log('[applyDelta] delta:', delta);\n      return opts.fromDelta(this.props, delta);\n    };\n\n    onStop = (e, dd) => {\n      log('[onStop] dd:', dd);\n      const { onDragStop, onClick } = this.props;\n\n      if (onDragStop) {\n        onDragStop();\n      }\n\n      log('[onStop] lastX/Y: ', dd.lastX, dd.lastY);\n      const isClick = this.tiny('x', e) && this.tiny('y', e);\n\n      if (isClick) {\n        if (onClick) {\n          log('call onClick');\n          this.setState({ startX: null });\n          const { graphProps } = this.props;\n          const { scale, snap } = graphProps;\n          const [rawX, rawY] = clientPoint(e.target, e);\n          let x = scale.x.invert(rawX);\n          let y = scale.y.invert(rawY);\n          x = snap.x(x);\n          y = snap.y(y);\n          onClick({ x, y });\n          return false;\n        }\n      }\n\n      this.setState({ startX: null, startY: null });\n      // return false to prevent state updates in the underlying draggable - a move will have triggered an update already.\n      return false;\n    };\n\n    render() {\n      /* eslint-disable no-unused-vars */\n      //Note: we pull onClick out so that it's not in ...rest.\n      const { disabled, onClick, ...rest } = this.props;\n      /* eslint-enable no-unused-vars */\n\n      const grid = this.grid();\n      //prevent the text select icon from rendering.\n      const onMouseDown = (e) => e.nativeEvent.preventDefault();\n\n      /**\n       * TODO: This shouldnt be necessary, we should be able to use the r-d classnames.\n       * But they aren't being unset. If we continue with this lib, we'll have to fix this.\n       */\n      const isDragging = this.state ? !!this.state.startX : false;\n\n      return (\n        <DraggableCore\n          disabled={disabled}\n          onMouseDown={onMouseDown}\n          onStart={this.onStart}\n          onDrag={this.onDrag}\n          onStop={this.onStop}\n          axis={opts.axis || 'both'}\n          grid={[grid.x, grid.y]}\n        >\n          <Comp {...rest} disabled={disabled} isDragging={isDragging} />\n        </DraggableCore>\n      );\n    }\n  };\n};\n"],"file":"grid-draggable.js"}
+{"version":3,"sources":["../src/grid-draggable.jsx"],"names":["log","deltaFn","scale","snap","val","delta","normalized","inverted","invert","fixDecimalsArithmetic","toFixed","gridDraggable","opts","Comp","fromDelta","bounds","anchorPoint","graphProps","props","domain","range","x","step","y","e","onDragStart","document","activeElement","blur","setState","startX","clientX","startY","clientY","key","event","K","toUpperCase","end","start","state","Math","abs","out","grid","scaled","left","interval","right","top","bottom","node","svg","ownerSVGElement","createSVGPoint","point","touches","length","touch","getScreenCTM","matrixTransform","inverse","rect","getBoundingClientRect","clientLeft","clientTop","dd","rootNode","getRootNode","clientPoint","getClientPoint","rawX","rawY","xOutside","deltaX","min","max","yOutside","deltaY","onDrag","getScaledBounds","skipDragOutsideOfBounds","dragArg","applyDelta","undefined","pos","position","p","utils","getDelta","onDragStop","onClick","lastX","lastY","isClick","tiny","target","disabled","rest","onMouseDown","nativeEvent","preventDefault","isDragging","onStart","onStop","axis","React","Component","PropTypes","bool","func","onMove","GraphPropsType","isRequired"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { GraphPropsType } from './types';\nimport { DraggableCore } from './draggable';\nimport debug from 'debug';\nimport * as utils from './utils';\nimport isFunction from 'lodash/isFunction';\nimport invariant from 'invariant';\nimport { clientPoint } from 'd3-selection';\n\nconst log = debug('pie-lib:plot:grid-draggable');\n\nexport const deltaFn = (scale, snap, val) => (delta) => {\n  const normalized = delta + scale(0);\n  const inverted = scale.invert(normalized);\n\n  const fixDecimalsArithmetic = (snap(val + inverted).toFixed(4) * 1000) / 1000;\n\n  return fixDecimalsArithmetic;\n};\n\n/**\n * Creates a Component that is draggable, within a bounded grid.\n * @param {*} opts\n */\nexport const gridDraggable = (opts) => (Comp) => {\n  invariant(\n    !!opts && isFunction(opts.fromDelta) && isFunction(opts.bounds) && isFunction(opts.anchorPoint),\n    'You must supply an object with: { anchorPoint: Function, fromDelta: Function, bounds: Function }',\n  );\n  return class GridDraggable extends React.Component {\n    static propTypes = {\n      disabled: PropTypes.bool,\n      onDragStart: PropTypes.func,\n      onDrag: PropTypes.func,\n      onDragStop: PropTypes.func,\n      onClick: PropTypes.func,\n      onMove: PropTypes.func,\n      graphProps: GraphPropsType.isRequired,\n    };\n    grid = () => {\n      const { graphProps } = this.props;\n      const { scale, domain, range } = graphProps;\n      return {\n        x: scale.x(domain.step) - scale.x(0),\n        y: scale.y(range.step) - scale.y(0),\n      };\n    };\n    onStart = (e) => {\n      const { onDragStart } = this.props;\n      if (document.activeElement) {\n        document.activeElement.blur();\n      }\n      this.setState({ startX: e.clientX, startY: e.clientY });\n      if (onDragStart) {\n        onDragStart();\n      }\n    };\n    position = () => {\n      const { x, y } = opts.anchorPoint(this.props);\n      const { graphProps } = this.props;\n      const { scale, snap } = graphProps;\n\n      return {\n        anchorPoint: {\n          x,\n          y,\n        },\n        x: deltaFn(scale.x, snap.x, x),\n        y: deltaFn(scale.y, snap.y, y),\n      };\n    };\n\n    tiny = (key, event) => {\n      const K = key.toUpperCase();\n      const end = event[`client${K}`];\n      const start = this.state[`start${K}`];\n      const delta = Math.abs(end - start);\n      const out = delta < Math.abs(this.grid()[key]) / 10;\n      log('[tiny] key: ', key, 'delta: ', delta, 'out: ', out);\n      return out;\n    };\n\n    getScaledBounds = () => {\n      const bounds = opts.bounds(this.props, this.props.graphProps);\n      log('bounds: ', bounds);\n      const grid = this.grid();\n\n      const scaled = {\n        left: (bounds.left / grid.interval) * grid.x,\n        right: (bounds.right / grid.interval) * grid.x,\n        top: (bounds.top / grid.interval) * grid.y,\n        bottom: (bounds.bottom / grid.interval) * grid.y,\n      };\n      log('[getScaledBounds]: ', scaled);\n      return scaled;\n    };\n\n    /**\n     * Retrieves the coordinates of a mouse or touch event relative to an SVG element.\n     * This method has been overwritten from the d3-selection library's clientPoint to handle touch events and improve clarity.\n     * @param {Element} node - The SVG element.\n     * @param {Event} event - The mouse or touch event.\n     * @returns {Array} - An array containing the coordinates [x, y] relative to the SVG element.\n     */\n    getClientPoint = (node, event) => {\n      if (!node || !event) {\n        return null;\n      }\n      const svg = node.ownerSVGElement || node;\n\n      if (svg && svg.createSVGPoint) {\n        let point = svg.createSVGPoint();\n        // Check if it's a touch event and use the first touch point\n        if (event.touches && event.touches.length > 0) {\n          const touch = event.touches[0];\n          point.x = touch.clientX;\n          point.y = touch.clientY;\n        } else {\n          // Fall back to mouse event properties\n          point.x = event.clientX;\n          point.y = event.clientY;\n        }\n        if (node.getScreenCTM) {\n          point = point.matrixTransform(node.getScreenCTM().inverse());\n          return [point.x, point.y];\n        } else {\n          return null;\n        }\n      }\n\n      const rect = node.getBoundingClientRect();\n      if (rect) {\n        return [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];\n      } else {\n        return null;\n      }\n    };\n\n    skipDragOutsideOfBounds = (dd, e, graphProps) => {\n      // Ignore drag movement outside of the domain and range.\n      const rootNode = graphProps.getRootNode();\n      const clientPoint = this.getClientPoint(rootNode, e);\n\n      if (clientPoint === null) {\n        return true; // Indicate that the drag is outside of bounds\n      }\n\n      const [rawX, rawY] = clientPoint;\n      const { scale, domain, range } = graphProps;\n      let x = scale.x.invert(rawX);\n      let y = scale.y.invert(rawY);\n\n      const xOutside = (dd.deltaX > 0 && x < domain.min) || (dd.deltaX < 0 && x > domain.max);\n      const yOutside = (dd.deltaY > 0 && y > range.max) || (dd.deltaY < 0 && y < range.min);\n      return xOutside || yOutside;\n    };\n\n    onDrag = (e, dd) => {\n      const { onDrag, graphProps } = this.props;\n\n      if (!onDrag) {\n        return;\n      }\n\n      const bounds = this.getScaledBounds();\n\n      if (dd.deltaX < 0 && dd.deltaX < bounds.left) {\n        return;\n      }\n\n      if (dd.deltaX > 0 && dd.deltaX > bounds.right) {\n        return;\n      }\n\n      if (dd.deltaY < 0 && dd.deltaY < bounds.top) {\n        return;\n      }\n\n      if (dd.deltaY > 0 && dd.deltaY > bounds.bottom) {\n        return;\n      }\n\n      if (this.skipDragOutsideOfBounds(dd, e, graphProps)) {\n        return;\n      }\n\n      const dragArg = this.applyDelta({ x: dd.deltaX, y: dd.deltaY });\n\n      if (dragArg !== undefined || dragArg !== null) {\n        onDrag(dragArg);\n      }\n    };\n\n    getDelta = (point) => {\n      const pos = this.position();\n\n      const p = {\n        x: pos.x(point.x),\n        y: pos.y(point.y),\n      };\n\n      return utils.getDelta(pos.anchorPoint, p);\n    };\n\n    applyDelta = (point) => {\n      const delta = this.getDelta(point);\n      log('[applyDelta] delta:', delta);\n      return opts.fromDelta(this.props, delta);\n    };\n\n    onStop = (e, dd) => {\n      log('[onStop] dd:', dd);\n      const { onDragStop, onClick } = this.props;\n\n      if (onDragStop) {\n        onDragStop();\n      }\n\n      log('[onStop] lastX/Y: ', dd.lastX, dd.lastY);\n      const isClick = this.tiny('x', e) && this.tiny('y', e);\n\n      if (isClick) {\n        if (onClick) {\n          log('call onClick');\n          this.setState({ startX: null });\n          const { graphProps } = this.props;\n          const { scale, snap } = graphProps;\n          const [rawX, rawY] = clientPoint(e.target, e);\n          let x = scale.x.invert(rawX);\n          let y = scale.y.invert(rawY);\n          x = snap.x(x);\n          y = snap.y(y);\n          onClick({ x, y });\n          return false;\n        }\n      }\n\n      this.setState({ startX: null, startY: null });\n      // return false to prevent state updates in the underlying draggable - a move will have triggered an update already.\n      return false;\n    };\n\n    render() {\n      const { disabled, ...rest } = this.props;\n      const grid = this.grid();\n\n      // prevent the text select icon from rendering.\n      const onMouseDown = (e) => e.nativeEvent.preventDefault();\n\n      /**\n       * TODO: This shouldnt be necessary, we should be able to use the r-d classnames.\n       * But they aren't being unset. If we continue with this lib, we'll have to fix this.\n       */\n      const isDragging = this.state ? !!this.state.startX : false;\n\n      return (\n        <DraggableCore\n          disabled={disabled}\n          onMouseDown={onMouseDown}\n          onStart={this.onStart}\n          onDrag={this.onDrag}\n          onStop={this.onStop}\n          axis={opts.axis || 'both'}\n          grid={[grid.x, grid.y]}\n        >\n          <Comp {...rest} disabled={disabled} isDragging={isDragging} />\n        </DraggableCore>\n      );\n    }\n  };\n};\n"],"file":"grid-draggable.js"}

package/lib/label.js

@@ -25,6 +25,8 @@ var _styles = require("@material-ui/core/styles");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _utils = require("./utils");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -45,7 +47,9 @@ var LabelComponent = function LabelComponent(props) {
       side = props.side,
       onChange = props.onChange,
       _props$mathMlOptions = props.mathMlOptions,
-      mathMlOptions = _props$mathMlOptions === void 0 ? {} : _props$mathMlOptions;
+      mathMlOptions = _props$mathMlOptions === void 0 ? {} : _props$mathMlOptions,
+      charactersLimit = props.charactersLimit,
+      titleHeight = props.titleHeight;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -58,7 +62,7 @@ var LabelComponent = function LabelComponent(props) {
   var chartValue = side === 'left' && isDefineChartLeftLabel && graphHeight - 220;
   var defaultStyle = {
     width: chartValue || (side === 'left' || side === 'right' ? graphHeight - 8 : graphWidth - 8),
-    top: chartValue || isChartLeftLabel && "".concat(graphHeight - 70, "px") || side === 'left' && "".concat(graphHeight - 8, "px") || isChartBottomLabel && "".concat(graphHeight - 30, "px") || side === 'bottom' && "".concat(graphHeight - 90, "px") || 0,
+    top: chartValue || isChartLeftLabel && "".concat(graphHeight - 70, "px") || side === 'left' && "".concat(graphHeight - 8, "px") || isChartBottomLabel && "".concat(graphHeight - 60 + titleHeight, "px") || side === 'bottom' && "".concat(graphHeight - 120 + titleHeight, "px") || 0,
     left: side === 'right' && "".concat(graphWidth - 8, "px") || (isDefineChartLeftLabel || isDefineChartBottomLabel) && '40px' || isChartBottomLabel && '-10px' || 0
   };
   var rotatedStyle = {
@@ -74,7 +78,7 @@ var LabelComponent = function LabelComponent(props) {
   return /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
     "false": true
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    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)),
+    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), (0, _defineProperty2["default"])(_cn, classes.displayNone, disabledLabel && !isChart && (0, _utils.isEmptyString)((0, _utils.extractTextFromHTML)(text))), _cn)),
     style: rotatedToHorizontal ? rotatedStyle : defaultStyle,
     onClick: rotateLabel
   }, disabledLabel ? /*#__PURE__*/_react["default"].createElement("div", {
@@ -88,6 +92,7 @@ var LabelComponent = function LabelComponent(props) {
     placeholder: !disabledLabel && placeholder,
     toolbarOpts: {
       position: side === 'bottom' ? 'top' : 'bottom',
+      noPadding: true,
       noBorder: true
     },
     disableScrollbar: true,
@@ -95,7 +100,8 @@ var LabelComponent = function LabelComponent(props) {
     onDone: function onDone() {
       return setRotatedToHorizontal(false);
     },
-    mathMlOptions: mathMlOptions
+    mathMlOptions: mathMlOptions,
+    charactersLimit: charactersLimit
   })));
 };
 
@@ -111,7 +117,10 @@ LabelComponent.propTypes = {
   placeholder: _propTypes["default"].string,
   text: _propTypes["default"].string,
   side: _propTypes["default"].string,
-  onChange: _propTypes["default"].func
+  onChange: _propTypes["default"].func,
+  mathMlOptions: _propTypes["default"].object,
+  charactersLimit: _propTypes["default"].number,
+  titleHeight: _propTypes["default"].number
 };
 
 var _default = (0, _styles.withStyles)(function (theme) {
@@ -156,6 +165,9 @@ var _default = (0, _styles.withStyles)(function (theme) {
     },
     customBottom: {
       position: 'absolute'
+    },
+    displayNone: {
+      display: 'none'
     }
   };
 })(LabelComponent);

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","mathMlOptions","rotatedToHorizontal","setRotatedToHorizontal","activePlugins","isChart","chartValue","defaultStyle","width","top","left","rotatedStyle","rotateLabel","chartLabel","axisLabel","rotateLeftLabel","rotateRightLabel","editLabel","customBottom","__html","position","noBorder","propTypes","PropTypes","object","bool","number","string","func","theme","label","fill","color","secondary","fontSize","typography","textAlign","margin","spacing","unit","padding","pointerEvents","backgroundColor","borderRadius","boxShadow","zIndex","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';\nimport PropTypes from 'prop-types';\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    mathMlOptions = {},\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 = 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 - 30}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 = () => !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            mathMlOptions={mathMlOptions}\n          />\n        )}\n      </div>\n    </Readable>\n  );\n};\nLabelComponent.propTypes = {\n  classes: PropTypes.object,\n  disabledLabel: PropTypes.bool,\n  graphHeight: PropTypes.number,\n  graphWidth: PropTypes.number,\n  isChartBottomLabel: PropTypes.bool,\n  isDefineChartBottomLabel: PropTypes.bool,\n  isChartLeftLabel: PropTypes.bool,\n  isDefineChartLeftLabel: PropTypes.bool,\n  placeholder: PropTypes.string,\n  text: PropTypes.string,\n  side: PropTypes.string,\n  onChange: PropTypes.func,\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: theme.spacing.unit / 2,\n    padding: `${theme.spacing.unit / 2}px 0`,\n  },\n  chartLabel: {\n    fontSize: theme.typography.fontSize + 2,\n    textAlign: 'center',\n    margin: theme.spacing.unit / 2,\n    padding: `${theme.spacing.unit / 2}px 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    '-webkit-transform': 'rotate(-90deg)',\n    transformOrigin: '0 0',\n    transformStyle: 'preserve-3d',\n    position: 'absolute',\n  },\n  rotateRightLabel: {\n    '-webkit-transform': '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","mathMlOptions","charactersLimit","titleHeight","rotatedToHorizontal","setRotatedToHorizontal","activePlugins","isChart","chartValue","defaultStyle","width","top","left","rotatedStyle","rotateLabel","chartLabel","axisLabel","rotateLeftLabel","rotateRightLabel","editLabel","customBottom","displayNone","__html","position","noPadding","noBorder","propTypes","PropTypes","object","bool","number","string","func","theme","label","fill","color","secondary","fontSize","typography","textAlign","margin","spacing","unit","padding","pointerEvents","backgroundColor","borderRadius","boxShadow","zIndex","transformOrigin","transformStyle","display"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AACA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAAW;AAAA;;AAChC,MACEC,OADF,GAgBID,KAhBJ,CACEC,OADF;AAAA,MAEEC,aAFF,GAgBIF,KAhBJ,CAEEE,aAFF;AAAA,MAGEC,WAHF,GAgBIH,KAhBJ,CAGEG,WAHF;AAAA,MAIEC,UAJF,GAgBIJ,KAhBJ,CAIEI,UAJF;AAAA,MAKEC,kBALF,GAgBIL,KAhBJ,CAKEK,kBALF;AAAA,MAMEC,wBANF,GAgBIN,KAhBJ,CAMEM,wBANF;AAAA,MAOEC,gBAPF,GAgBIP,KAhBJ,CAOEO,gBAPF;AAAA,MAQEC,sBARF,GAgBIR,KAhBJ,CAQEQ,sBARF;AAAA,MASEC,WATF,GAgBIT,KAhBJ,CASES,WATF;AAAA,MAUEC,IAVF,GAgBIV,KAhBJ,CAUEU,IAVF;AAAA,MAWEC,IAXF,GAgBIX,KAhBJ,CAWEW,IAXF;AAAA,MAYEC,QAZF,GAgBIZ,KAhBJ,CAYEY,QAZF;AAAA,6BAgBIZ,KAhBJ,CAaEa,aAbF;AAAA,MAaEA,aAbF,qCAakB,EAblB;AAAA,MAcEC,eAdF,GAgBId,KAhBJ,CAcEc,eAdF;AAAA,MAeEC,WAfF,GAgBIf,KAhBJ,CAeEe,WAfF;;AAiBA,kBAAsD,qBAAS,KAAT,CAAtD;AAAA;AAAA,MAAOC,mBAAP;AAAA,MAA4BC,sBAA5B;;AACA,MAAMC,aAAa,GAAG,CACpB,MADoB,EAEpB,QAFoB,EAGpB,WAHoB,EAIpB,eAJoB,EAKpB,MALoB,CAMpB;AANoB,GAAtB;AASA,MAAMC,OAAO,GAAGd,kBAAkB,IAAIE,gBAAtB,IAA0CD,wBAA1C,IAAsEE,sBAAtF;AAEA,MAAMY,UAAU,GAAGT,IAAI,KAAK,MAAT,IAAmBH,sBAAnB,IAA6CL,WAAW,GAAG,GAA9E;AACA,MAAMkB,YAAY,GAAG;AACnBC,IAAAA,KAAK,EAAEF,UAAU,KAAKT,IAAI,KAAK,MAAT,IAAmBA,IAAI,KAAK,OAA5B,GAAsCR,WAAW,GAAG,CAApD,GAAwDC,UAAU,GAAG,CAA1E,CADE;AAEnBmB,IAAAA,GAAG,EACDH,UAAU,IACTb,gBAAgB,cAAOJ,WAAW,GAAG,EAArB,OADjB,IAECQ,IAAI,KAAK,MAAT,cAAsBR,WAAW,GAAG,CAApC,OAFD,IAGCE,kBAAkB,cAAOF,WAAW,GAAG,EAAd,GAAmBY,WAA1B,OAHnB,IAICJ,IAAI,KAAK,QAAT,cAAwBR,WAAW,GAAG,GAAd,GAAoBY,WAA5C,OAJD,IAKA,CARiB;AASnBS,IAAAA,IAAI,EACDb,IAAI,KAAK,OAAT,cAAuBP,UAAU,GAAG,CAApC,OAAD,IACC,CAACI,sBAAsB,IAAIF,wBAA3B,KAAwD,MADzD,IAECD,kBAAkB,IAAI,OAFvB,IAGA;AAbiB,GAArB;AAgBA,MAAMoB,YAAY,GAAG;AACnBH,IAAAA,KAAK,EAAElB,UAAU,GAAG,CADD;AAEnBmB,IAAAA,GAAG,EAAGZ,IAAI,KAAK,OAAT,cAAuBR,WAAW,GAAG,EAArC,OAAD,IAAiD,CAFnC;AAGnBqB,IAAAA,IAAI,EAAE;AAHa,GAArB;;AAMA,MAAME,WAAW,GAAG,SAAdA,WAAc;AAAA,WAAM,CAACxB,aAAD,KAAmBS,IAAI,KAAK,MAAT,IAAmBA,IAAI,KAAK,OAA/C,KAA2DM,sBAAsB,CAAC,IAAD,CAAvF;AAAA,GAApB;;AAEA,sBACE,gCAAC,kBAAD;AAAU;AAAV,kBACE;AACE,IAAA,SAAS,EAAE,4BAAGE,OAAO,GAAGlB,OAAO,CAAC0B,UAAX,GAAwB1B,OAAO,CAAC2B,SAA1C,mDACR3B,OAAO,CAAC4B,eADA,EACkBlB,IAAI,KAAK,MAAT,IAAmB,CAACK,mBADtC,yCAERf,OAAO,CAAC6B,gBAFA,EAEmBnB,IAAI,KAAK,OAAT,IAAoB,CAACK,mBAFxC,yCAGRf,OAAO,CAAC8B,SAHA,EAGYf,mBAHZ,yCAIRf,OAAO,CAAC+B,YAJA,EAIe3B,kBAAkB,IAAIC,wBAJrC,yCAKRL,OAAO,CAACgC,WALA,EAKc/B,aAAa,IAAI,CAACiB,OAAlB,IAA6B,0BAAc,gCAAoBT,IAApB,CAAd,CAL3C,QADb;AAQE,IAAA,KAAK,EAAEM,mBAAmB,GAAGS,YAAH,GAAkBJ,YAR9C;AASE,IAAA,OAAO,EAAEK;AATX,KAWGxB,aAAa,gBACZ;AAAK,IAAA,SAAS,EAAED,OAAO,CAACC,aAAxB;AAAuC,IAAA,uBAAuB,EAAE;AAAEgC,MAAAA,MAAM,EAAExB,IAAI,IAAI;AAAlB;AAAhE,IADY,gBAGZ,gCAAC,wBAAD;AACE,IAAA,MAAM,EAAEA,IAAI,IAAI,EADlB;AAEE,IAAA,QAAQ,EAAEE,QAFZ;AAGE,IAAA,WAAW,EAAE,CAACV,aAAD,IAAkBO,WAHjC;AAIE,IAAA,WAAW,EAAE;AACX0B,MAAAA,QAAQ,EAAExB,IAAI,KAAK,QAAT,GAAoB,KAApB,GAA4B,QAD3B;AAEXyB,MAAAA,SAAS,EAAE,IAFA;AAGXC,MAAAA,QAAQ,EAAE;AAHC,KAJf;AASE,IAAA,gBAAgB,MATlB;AAUE,IAAA,aAAa,EAAEnB,aAVjB;AAWE,IAAA,MAAM,EAAE;AAAA,aAAMD,sBAAsB,CAAC,KAAD,CAA5B;AAAA,KAXV;AAYE,IAAA,aAAa,EAAEJ,aAZjB;AAaE,IAAA,eAAe,EAAEC;AAbnB,IAdJ,CADF,CADF;AAmCD,CA1FD;;AA2FAf,cAAc,CAACuC,SAAf,GAA2B;AACzBrC,EAAAA,OAAO,EAAEsC,sBAAUC,MADM;AAEzBtC,EAAAA,aAAa,EAAEqC,sBAAUE,IAFA;AAGzBtC,EAAAA,WAAW,EAAEoC,sBAAUG,MAHE;AAIzBtC,EAAAA,UAAU,EAAEmC,sBAAUG,MAJG;AAKzBrC,EAAAA,kBAAkB,EAAEkC,sBAAUE,IALL;AAMzBnC,EAAAA,wBAAwB,EAAEiC,sBAAUE,IANX;AAOzBlC,EAAAA,gBAAgB,EAAEgC,sBAAUE,IAPH;AAQzBjC,EAAAA,sBAAsB,EAAE+B,sBAAUE,IART;AASzBhC,EAAAA,WAAW,EAAE8B,sBAAUI,MATE;AAUzBjC,EAAAA,IAAI,EAAE6B,sBAAUI,MAVS;AAWzBhC,EAAAA,IAAI,EAAE4B,sBAAUI,MAXS;AAYzB/B,EAAAA,QAAQ,EAAE2B,sBAAUK,IAZK;AAazB/B,EAAAA,aAAa,EAAE0B,sBAAUC,MAbA;AAczB1B,EAAAA,eAAe,EAAEyB,sBAAUG,MAdF;AAezB3B,EAAAA,WAAW,EAAEwB,sBAAUG;AAfE,CAA3B;;eAkBe,wBAAW,UAACG,KAAD;AAAA,SAAY;AACpCC,IAAAA,KAAK,EAAE;AACLC,MAAAA,IAAI,EAAEC,gBAAMC,SAAN;AADD,KAD6B;AAIpCrB,IAAAA,SAAS,EAAE;AACTsB,MAAAA,QAAQ,EAAEL,KAAK,CAACM,UAAN,CAAiBD,QAAjB,GAA4B,CAD7B;AAETE,MAAAA,SAAS,EAAE,QAFF;AAGTC,MAAAA,MAAM,EAAER,KAAK,CAACS,OAAN,CAAcC,IAAd,GAAqB,CAHpB;AAITC,MAAAA,OAAO,YAAKX,KAAK,CAACS,OAAN,CAAcC,IAAd,GAAqB,CAA1B;AAJE,KAJyB;AAUpC5B,IAAAA,UAAU,EAAE;AACVuB,MAAAA,QAAQ,EAAEL,KAAK,CAACM,UAAN,CAAiBD,QAAjB,GAA4B,CAD5B;AAEVE,MAAAA,SAAS,EAAE,QAFD;AAGVC,MAAAA,MAAM,EAAER,KAAK,CAACS,OAAN,CAAcC,IAAd,GAAqB,CAHnB;AAIVC,MAAAA,OAAO,YAAKX,KAAK,CAACS,OAAN,CAAcC,IAAd,GAAqB,CAA1B;AAJG,KAVwB;AAgBpCrD,IAAAA,aAAa,EAAE;AACbuD,MAAAA,aAAa,EAAE,MADF;AAEbnC,MAAAA,KAAK,EAAE;AAFM,KAhBqB;AAoBpCS,IAAAA,SAAS,EAAE;AACTI,MAAAA,QAAQ,EAAE,UADD;AAETuB,MAAAA,eAAe,EAAE,OAFR;AAGTC,MAAAA,YAAY,EAAE,KAHL;AAITC,MAAAA,SAAS,EAAE,iCAJF;AAKTC,MAAAA,MAAM,EAAE;AALC,KApByB;AA2BpChC,IAAAA,eAAe,EAAE;AACf,2BAAqB,gBADN;AAEfiC,MAAAA,eAAe,EAAE,KAFF;AAGfC,MAAAA,cAAc,EAAE,aAHD;AAIf5B,MAAAA,QAAQ,EAAE;AAJK,KA3BmB;AAiCpCL,IAAAA,gBAAgB,EAAE;AAChB,2BAAqB,eADL;AAEhBgC,MAAAA,eAAe,EAAE,KAFD;AAGhBC,MAAAA,cAAc,EAAE,aAHA;AAIhB5B,MAAAA,QAAQ,EAAE;AAJM,KAjCkB;AAuCpCH,IAAAA,YAAY,EAAE;AACZG,MAAAA,QAAQ,EAAE;AADE,KAvCsB;AA0CpCF,IAAAA,WAAW,EAAE;AACX+B,MAAAA,OAAO,EAAE;AADE;AA1CuB,GAAZ;AAAA,CAAX,EA6CXjE,cA7CW,C","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';\nimport PropTypes from 'prop-types';\nimport { extractTextFromHTML, isEmptyString } from './utils';\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    mathMlOptions = {},\n    charactersLimit,\n    titleHeight,\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 = 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 - 60 + titleHeight}px`) ||\n      (side === 'bottom' && `${graphHeight - 120 + titleHeight}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 = () => !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          [classes.displayNone]: disabledLabel && !isChart && isEmptyString(extractTextFromHTML(text)),\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              noPadding: true,\n              noBorder: true,\n            }}\n            disableScrollbar\n            activePlugins={activePlugins}\n            onDone={() => setRotatedToHorizontal(false)}\n            mathMlOptions={mathMlOptions}\n            charactersLimit={charactersLimit}\n          />\n        )}\n      </div>\n    </Readable>\n  );\n};\nLabelComponent.propTypes = {\n  classes: PropTypes.object,\n  disabledLabel: PropTypes.bool,\n  graphHeight: PropTypes.number,\n  graphWidth: PropTypes.number,\n  isChartBottomLabel: PropTypes.bool,\n  isDefineChartBottomLabel: PropTypes.bool,\n  isChartLeftLabel: PropTypes.bool,\n  isDefineChartLeftLabel: PropTypes.bool,\n  placeholder: PropTypes.string,\n  text: PropTypes.string,\n  side: PropTypes.string,\n  onChange: PropTypes.func,\n  mathMlOptions: PropTypes.object,\n  charactersLimit: PropTypes.number,\n  titleHeight: PropTypes.number,\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: theme.spacing.unit / 2,\n    padding: `${theme.spacing.unit / 2}px 0`,\n  },\n  chartLabel: {\n    fontSize: theme.typography.fontSize + 2,\n    textAlign: 'center',\n    margin: theme.spacing.unit / 2,\n    padding: `${theme.spacing.unit / 2}px 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    '-webkit-transform': 'rotate(-90deg)',\n    transformOrigin: '0 0',\n    transformStyle: 'preserve-3d',\n    position: 'absolute',\n  },\n  rotateRightLabel: {\n    '-webkit-transform': 'rotate(90deg)',\n    transformOrigin: '0 0',\n    transformStyle: 'preserve-3d',\n    position: 'absolute',\n  },\n  customBottom: {\n    position: 'absolute',\n  },\n  displayNone: {\n    display: 'none',\n  },\n}))(LabelComponent);\n"],"file":"label.js"}

package/lib/root.js

@@ -25,22 +25,24 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _types = require("./types");
-
 var _styles = require("@material-ui/core/styles");
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _d3Selection = require("d3-selection");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
 
 var _renderUi = require("@pie-lib/render-ui");
 
 var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _types = require("./types");
 
 var _label = _interopRequireDefault(require("./label"));
 
+var _utils = require("./utils");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -54,16 +56,11 @@ var Root = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(Root);
 
-  function Root() {
+  function Root(props) {
     var _this;
 
     (0, _classCallCheck2["default"])(this, Root);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "mouseMove", function (g) {
       var _this$props = _this.props,
           graphProps = _this$props.graphProps,
@@ -90,6 +87,10 @@ var Root = /*#__PURE__*/function (_React$Component) {
           onChangeLabels = _this$props2.onChangeLabels,
           isChart = _this$props2.isChart;
 
+      if (!onChangeLabels) {
+        return;
+      }
+
       if (isChart) {
         if (side === 'left') {
           onChangeLabels('range', newValue);
@@ -102,6 +103,24 @@ var Root = /*#__PURE__*/function (_React$Component) {
 
       onChangeLabels(_objectSpread(_objectSpread({}, labels), {}, (0, _defineProperty2["default"])({}, side, newValue)));
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "measureTitleHeight", function () {
+      var titleElement = _this.titleRef;
+
+      if (titleElement) {
+        var titleHeight = titleElement.clientHeight;
+
+        _this.setState({
+          titleHeight: titleHeight,
+          prevTitle: _this.props.title
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleKeyDown", function () {
+      setTimeout(_this.measureTitleHeight, 0);
+    });
+    _this.state = {
+      titleHeight: 0
+    };
     return _this;
   }
 
@@ -110,6 +129,7 @@ var Root = /*#__PURE__*/function (_React$Component) {
     value: function componentDidMount() {
       var g = (0, _d3Selection.select)(this.g);
       g.on('mousemove', this.mouseMove.bind(this, g));
+      this.measureTitleHeight();
     }
   }, {
     key: "componentWillUnmount",
@@ -117,6 +137,13 @@ var Root = /*#__PURE__*/function (_React$Component) {
       var g = (0, _d3Selection.select)(this.g);
       g.on('mousemove', null);
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.title !== this.props.title) {
+        this.measureTitleHeight();
+      }
+    }
   }, {
     key: "render",
     value: function render() {
@@ -140,7 +167,8 @@ var Root = /*#__PURE__*/function (_React$Component) {
           title = _this$props3.title,
           rootRef = _this$props3.rootRef,
           _this$props3$mathMlOp = _this$props3.mathMlOptions,
-          mathMlOptions = _this$props3$mathMlOp === void 0 ? {} : _this$props3$mathMlOp;
+          mathMlOptions = _this$props3$mathMlOp === void 0 ? {} : _this$props3$mathMlOp,
+          labelsCharactersLimit = _this$props3.labelsCharactersLimit;
       var _graphProps$size = graphProps.size,
           _graphProps$size$widt = _graphProps$size.width,
           width = _graphProps$size$widt === void 0 ? 500 : _graphProps$size$widt,
@@ -149,21 +177,23 @@ var Root = /*#__PURE__*/function (_React$Component) {
           domain = graphProps.domain,
           range = graphProps.range;
       var topPadding = 40;
-      var leftPadding = showLabels ? 80 : 60;
-      var finalWidth = width + leftPadding * 2 + (domain.padding || 0) * 2;
+      var leftPadding = (0, _utils.isEmptyString)((0, _utils.extractTextFromHTML)(labels === null || labels === void 0 ? void 0 : labels.left)) && (0, _utils.isEmptyObject)(labelsPlaceholders) ? 48 : 70;
+      var rightPadding = (0, _utils.isEmptyString)((0, _utils.extractTextFromHTML)(labels === null || labels === void 0 ? void 0 : labels.right)) && (0, _utils.isEmptyObject)(labelsPlaceholders) ? 48 : 70;
+      var finalWidth = width + leftPadding + rightPadding + (domain.padding || 0) * 2;
       var finalHeight = height + topPadding * 2 + (range.padding || 0) * 2;
-      var activeTitlePlugins = ['bold', 'italic', 'underline', 'strikethrough', 'math' // 'languageCharacters'
+      var activeTitlePlugins = ['bold', 'italic', 'underline', 'superscript', 'subscript', 'strikethrough', 'math' // 'languageCharacters'
       ];
       var actualHeight = defineChart && showPixelGuides ? height - 160 : height;
       var nbOfVerticalLines = parseInt(width / 100);
       var nbOfHorizontalLines = parseInt(actualHeight / 100);
       var sideGridlinesPadding = parseInt(actualHeight % 100);
+      var titleHeight = this.state.titleHeight;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.root
       }, showPixelGuides && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.topPixelGuides,
         style: {
-          marginLeft: isChart ? 60 : showLabels ? 30 : 10
+          marginLeft: isChart ? 80 : showLabels ? 30 : 10
         }
       }, (0, _toConsumableArray2["default"])(Array(nbOfVerticalLines + 1).keys()).map(function (value) {
         return /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
@@ -173,14 +203,23 @@ var Root = /*#__PURE__*/function (_React$Component) {
           className: classes.topPixelIndicator
         }, /*#__PURE__*/_react["default"].createElement("div", null, value * 100, "px"), /*#__PURE__*/_react["default"].createElement("div", null, "|")));
       })), showTitle && (disabledTitle ? /*#__PURE__*/_react["default"].createElement("div", {
-        style: isChart && {
-          width: finalWidth
+        ref: function ref(r) {
+          return _this2.titleRef = r;
         },
+        style: _objectSpread(_objectSpread({}, isChart && {
+          width: finalWidth
+        }), (0, _utils.isEmptyString)((0, _utils.extractTextFromHTML)(title)) && {
+          display: 'none'
+        }),
         className: (0, _classnames["default"])(isChart ? classes.chartTitle : classes.graphTitle, classes.disabledTitle),
         dangerouslySetInnerHTML: {
           __html: title || ''
         }
-      }) : /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+      }) : /*#__PURE__*/_react["default"].createElement("div", {
+        ref: function ref(r) {
+          return _this2.titleRef = r;
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
         style: isChart && {
           width: finalWidth
         },
@@ -189,11 +228,13 @@ var Root = /*#__PURE__*/function (_React$Component) {
         onChange: onChangeTitle,
         placeholder: defineChart && titlePlaceholder || !disabledTitle && 'Click here to add a title for this graph',
         toolbarOpts: {
+          noPadding: true,
           noBorder: true
         },
         activePlugins: activeTitlePlugins,
-        disableScrollbar: true
-      })), showLabels && !isChart && /*#__PURE__*/_react["default"].createElement(_label["default"], {
+        disableScrollbar: true,
+        onKeyDown: this.handleKeyDown
+      }))), showLabels && !isChart && /*#__PURE__*/_react["default"].createElement(_label["default"], {
         side: "top",
         text: labels.top,
         disabledLabel: disabledLabels,
@@ -203,7 +244,8 @@ var Root = /*#__PURE__*/function (_React$Component) {
         onChange: function onChange(value) {
           return _this2.onChangeLabel(value, 'top');
         },
-        mathMlOptions: mathMlOptions
+        mathMlOptions: mathMlOptions,
+        charactersLimit: labelsCharactersLimit
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.wrapper
       }, showLabels && /*#__PURE__*/_react["default"].createElement(_label["default"], {
@@ -218,7 +260,8 @@ var Root = /*#__PURE__*/function (_React$Component) {
         onChange: function onChange(value) {
           return _this2.onChangeLabel(value, 'left');
         },
-        mathMlOptions: mathMlOptions
+        mathMlOptions: mathMlOptions,
+        charactersLimit: labelsCharactersLimit
       }), /*#__PURE__*/_react["default"].createElement("svg", {
         width: finalWidth,
         height: finalHeight,
@@ -232,7 +275,7 @@ var Root = /*#__PURE__*/function (_React$Component) {
           }
         },
         className: classes.graphBox,
-        transform: "translate(".concat(leftPadding, ", ").concat(topPadding, ")")
+        transform: "translate(".concat(leftPadding + (domain.padding || 0), ", ").concat(topPadding + (range.padding || 0), ")")
       }, children)), showLabels && !isChart && /*#__PURE__*/_react["default"].createElement(_label["default"], {
         side: "right",
         text: labels.right,
@@ -243,12 +286,13 @@ var Root = /*#__PURE__*/function (_React$Component) {
         onChange: function onChange(value) {
           return _this2.onChangeLabel(value, 'right');
         },
-        mathMlOptions: mathMlOptions
+        mathMlOptions: mathMlOptions,
+        charactersLimit: labelsCharactersLimit
       }), showPixelGuides && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.sidePixelGuides,
         style: {
           paddingTop: sideGridlinesPadding,
-          marginTop: defineChart ? 25 : 31
+          marginTop: 31
         }
       }, (0, _toConsumableArray2["default"])(Array(nbOfHorizontalLines + 1).keys()).reverse().map(function (value) {
         return /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
@@ -264,17 +308,20 @@ var Root = /*#__PURE__*/function (_React$Component) {
         placeholder: labelsPlaceholders === null || labelsPlaceholders === void 0 ? void 0 : labelsPlaceholders.bottom,
         graphHeight: finalHeight,
         graphWidth: finalWidth,
+        titleHeight: titleHeight,
         isChartBottomLabel: isChart && !defineChart,
         isDefineChartBottomLabel: isChart && defineChart,
         onChange: function onChange(value) {
           return _this2.onChangeLabel(value, 'bottom');
         },
-        mathMlOptions: mathMlOptions
+        mathMlOptions: mathMlOptions,
+        charactersLimit: labelsCharactersLimit
       }));
     }
   }]);
   return Root;
-}(_react["default"].Component);
+}(_react["default"].Component); // use default color theme style to avoid color contrast issues
+
 
 exports.Root = Root;
 (0, _defineProperty2["default"])(Root, "propTypes", {
@@ -295,17 +342,21 @@ exports.Root = Root;
   showPixelGuides: _propTypes["default"].bool,
   rootRef: _propTypes["default"].func,
   onChangeLabels: _propTypes["default"].func,
-  titlePlaceholder: _propTypes["default"].string
+  titlePlaceholder: _propTypes["default"].string,
+  mathMlOptions: _propTypes["default"].object,
+  labelsCharactersLimit: _propTypes["default"].number
 });
 
 var styles = function styles(theme) {
   return {
     root: {
       border: "solid 1px ".concat(_renderUi.color.primaryLight()),
-      color: _renderUi.color.text(),
-      backgroundColor: _renderUi.color.background(),
+      color: _renderUi.color.defaults.TEXT,
+      backgroundColor: theme.palette.common.white,
       touchAction: 'none',
-      position: 'relative'
+      position: 'relative',
+      boxSizing: 'unset' // to override the default border-box in IBX that breaks the component width layout
+
     },
     wrapper: {
       display: 'flex',
@@ -324,13 +375,13 @@ var styles = function styles(theme) {
       userSelect: 'none'
     },
     graphTitle: {
-      color: _renderUi.color.text(),
+      color: _renderUi.color.defaults.TEXT,
       fontSize: theme.typography.fontSize + 2,
       padding: "".concat(theme.spacing.unit * 1.5, "px ").concat(theme.spacing.unit / 2, "px 0"),
       textAlign: 'center'
     },
     chartTitle: {
-      color: _renderUi.color.text(),
+      color: _renderUi.color.defaults.TEXT,
       fontSize: theme.typography.fontSize + 4,
       padding: "".concat(theme.spacing.unit * 1.5, "px ").concat(theme.spacing.unit / 2, "px 0"),
       textAlign: 'center'
@@ -346,7 +397,6 @@ var styles = function styles(theme) {
       paddingTop: '6px'
     },
     topPixelIndicator: {
-      color: _renderUi.color.primaryLight(),
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',
@@ -361,7 +411,6 @@ var styles = function styles(theme) {
       marginRight: '6px'
     },
     sidePixelIndicator: {
-      color: _renderUi.color.primaryLight(),
       textAlign: 'right',
       height: '20px',
       pointerEvents: 'none',