@pie-lib/plot 2.24.6-esmbeta.0 → 2.25.0-mui-update.0

package/lib/root.js

@@ -1,77 +1,131 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Root = void 0;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _styles = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _d3Selection = require("d3-selection");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _renderUi = require("@pie-lib/render-ui");
-
 var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
-
 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; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var Root = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Root, _React$Component);
-
-  var _super = _createSuper(Root);
-
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var StyledRoot = (0, _styles.styled)('div')(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    border: "solid 1px ".concat(_renderUi.color.primaryLight()),
+    color: _renderUi.color.defaults.TEXT,
+    backgroundColor: theme.palette.common.white,
+    touchAction: 'none',
+    position: 'relative',
+    boxSizing: 'unset' // to override the default border-box in IBX that breaks the component width layout
+  };
+});
+var Wrapper = (0, _styles.styled)('div')({
+  display: 'flex',
+  position: 'relative'
+});
+var DefineChartSvg = (0, _styles.styled)('svg')({
+  paddingLeft: '50px',
+  overflow: 'visible'
+});
+var ChartSvg = (0, _styles.styled)('svg')({
+  overflow: 'visible'
+});
+var GraphBox = (0, _styles.styled)('g')({
+  cursor: 'pointer',
+  userSelect: 'none'
+});
+var GraphTitle = (0, _styles.styled)('div')(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    color: _renderUi.color.defaults.TEXT,
+    fontSize: theme.typography.fontSize + 2,
+    padding: "".concat(theme.spacing(1.5), " ").concat(theme.spacing(0.5), " 0"),
+    textAlign: 'center',
+    '&.disabled': {
+      pointerEvents: 'none'
+    },
+    '&.rightMargin': {
+      marginRight: '74px'
+    }
+  };
+});
+var ChartTitle = (0, _styles.styled)('div')(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    color: _renderUi.color.defaults.TEXT,
+    fontSize: theme.typography.fontSize + 4,
+    padding: "".concat(theme.spacing(1.5), " ").concat(theme.spacing(0.5), " 0"),
+    textAlign: 'center',
+    '&.disabled': {
+      pointerEvents: 'none'
+    },
+    '&.rightMargin': {
+      marginRight: '74px'
+    }
+  };
+});
+var TopPixelGuides = (0, _styles.styled)('div')({
+  display: 'flex',
+  paddingTop: '6px'
+});
+var TopPixelIndicator = (0, _styles.styled)('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  width: '100px',
+  pointerEvents: 'none',
+  userSelect: 'none'
+});
+var SidePixelGuides = (0, _styles.styled)('div')({
+  width: '70px',
+  display: 'flex',
+  flexDirection: 'column',
+  marginRight: '6px'
+});
+var SidePixelIndicator = (0, _styles.styled)('div')({
+  textAlign: 'right',
+  height: '20px',
+  pointerEvents: 'none',
+  userSelect: 'none',
+  '&:not(:last-child)': {
+    marginBottom: '80px'
+  }
+});
+var Root = exports.Root = /*#__PURE__*/function (_React$Component) {
   function Root(props) {
     var _this;
-
     (0, _classCallCheck2["default"])(this, Root);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "mouseMove", function (g) {
+    _this = _callSuper(this, Root, [props]);
+    (0, _defineProperty2["default"])(_this, "mouseMove", function (g) {
       var _this$props = _this.props,
-          graphProps = _this$props.graphProps,
-          onMouseMove = _this$props.onMouseMove;
-
+        graphProps = _this$props.graphProps,
+        onMouseMove = _this$props.onMouseMove;
       if (!onMouseMove) {
         return;
       }
-
       var scale = graphProps.scale,
-          snap = graphProps.snap;
+        snap = graphProps.snap;
       var coords = (0, _d3Selection.mouse)(g._groups[0][0]);
       var x = scale.x.invert(coords[0]);
       var y = scale.y.invert(coords[1]);
@@ -81,61 +135,98 @@ var Root = /*#__PURE__*/function (_React$Component) {
       };
       onMouseMove(snapped);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChangeLabel", function (newValue, side) {
+    (0, _defineProperty2["default"])(_this, "onChangeLabel", function (newValue, side) {
       var _this$props2 = _this.props,
-          labels = _this$props2.labels,
-          onChangeLabels = _this$props2.onChangeLabels,
-          isChart = _this$props2.isChart;
-
+        labels = _this$props2.labels,
+        onChangeLabels = _this$props2.onChangeLabels,
+        isChart = _this$props2.isChart;
       if (!onChangeLabels) {
         return;
       }
-
       if (isChart) {
         if (side === 'left') {
           onChangeLabels('range', newValue);
         } else {
           onChangeLabels('domain', newValue);
         }
-
         return;
       }
-
       onChangeLabels(_objectSpread(_objectSpread({}, labels), {}, (0, _defineProperty2["default"])({}, side, newValue)));
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "measureTitleHeight", function () {
+    (0, _defineProperty2["default"])(_this, "measureTitleHeight", function () {
       var titleElement = _this.titleRef;
-
       if (titleElement) {
         var titleHeight = titleElement.clientHeight;
-
         _this.setState({
           titleHeight: titleHeight,
           prevTitle: _this.props.title
         });
+        if (!_this.resizeObserver && typeof ResizeObserver !== 'undefined') {
+          _this.setupVisibilityObserver();
+        }
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "handleKeyDown", function () {
+      setTimeout(function () {
+        _this.measureTitleHeight();
+      }, 0);
+    });
+    // handle edge case where chart is hidden with display:none and then shown with display:block
+    (0, _defineProperty2["default"])(_this, "setupVisibilityObserver", function () {
+      if (typeof ResizeObserver !== 'undefined' && _this.titleRef) {
+        _this.resizeObserver = new ResizeObserver(function (entries) {
+          var _iterator = _createForOfIteratorHelper(entries),
+            _step;
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              var entry = _step.value;
+              var _entry$contentRect = entry.contentRect,
+                width = _entry$contentRect.width,
+                height = _entry$contentRect.height;
+              // trigger if element becomes visible and we haven't measured this height yet
+              if (width > 0 && height > 0) {
+                setTimeout(function () {
+                  _this.measureTitleHeight();
+                }, 10);
+                break;
+              }
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+        });
+        _this.resizeObserver.observe(_this.titleRef);
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleKeyDown", function () {
-      setTimeout(_this.measureTitleHeight, 0);
+    (0, _defineProperty2["default"])(_this, "cleanupVisibilityObserver", function () {
+      if (_this.resizeObserver) {
+        _this.resizeObserver.disconnect();
+        _this.resizeObserver = null;
+      }
     });
     _this.state = {
       titleHeight: 0
     };
+    _this.resizeObserver = null;
     return _this;
   }
-
-  (0, _createClass2["default"])(Root, [{
+  (0, _inherits2["default"])(Root, _React$Component);
+  return (0, _createClass2["default"])(Root, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var g = (0, _d3Selection.select)(this.g);
       g.on('mousemove', this.mouseMove.bind(this, g));
       this.measureTitleHeight();
+      this.setupVisibilityObserver();
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       var g = (0, _d3Selection.select)(this.g);
       g.on('mousemove', null);
+      this.cleanupVisibilityObserver();
     }
   }, {
     key: "componentDidUpdate",
@@ -148,50 +239,46 @@ var Root = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props3 = this.props,
-          disabledTitle = _this$props3.disabledTitle,
-          disabledLabels = _this$props3.disabledLabels,
-          labels = _this$props3.labels,
-          labelsPlaceholders = _this$props3.labelsPlaceholders,
-          titlePlaceholder = _this$props3.titlePlaceholder,
-          graphProps = _this$props3.graphProps,
-          children = _this$props3.children,
-          classes = _this$props3.classes,
-          defineChart = _this$props3.defineChart,
-          onChangeTitle = _this$props3.onChangeTitle,
-          isChart = _this$props3.isChart,
-          showLabels = _this$props3.showLabels,
-          showPixelGuides = _this$props3.showPixelGuides,
-          showTitle = _this$props3.showTitle,
-          title = _this$props3.title,
-          rootRef = _this$props3.rootRef,
-          _this$props3$mathMlOp = _this$props3.mathMlOptions,
-          mathMlOptions = _this$props3$mathMlOp === void 0 ? {} : _this$props3$mathMlOp,
-          labelsCharactersLimit = _this$props3.labelsCharactersLimit;
+        disabledTitle = _this$props3.disabledTitle,
+        disabledLabels = _this$props3.disabledLabels,
+        labels = _this$props3.labels,
+        labelsPlaceholders = _this$props3.labelsPlaceholders,
+        titlePlaceholder = _this$props3.titlePlaceholder,
+        graphProps = _this$props3.graphProps,
+        children = _this$props3.children,
+        defineChart = _this$props3.defineChart,
+        onChangeTitle = _this$props3.onChangeTitle,
+        isChart = _this$props3.isChart,
+        showLabels = _this$props3.showLabels,
+        showPixelGuides = _this$props3.showPixelGuides,
+        showTitle = _this$props3.showTitle,
+        title = _this$props3.title,
+        rootRef = _this$props3.rootRef,
+        _this$props3$mathMlOp = _this$props3.mathMlOptions,
+        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,
-          _graphProps$size$heig = _graphProps$size.height,
-          height = _graphProps$size$heig === void 0 ? 500 : _graphProps$size$heig,
-          domain = graphProps.domain,
-          range = graphProps.range;
+        _graphProps$size$widt = _graphProps$size.width,
+        width = _graphProps$size$widt === void 0 ? 500 : _graphProps$size$widt,
+        _graphProps$size$heig = _graphProps$size.height,
+        height = _graphProps$size$heig === void 0 ? 500 : _graphProps$size$heig,
+        domain = graphProps.domain,
+        range = graphProps.range;
       var topPadding = 40;
       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', 'superscript', 'subscript', '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,
+      return /*#__PURE__*/_react["default"].createElement(StyledRoot, null, showPixelGuides && /*#__PURE__*/_react["default"].createElement(TopPixelGuides, {
         style: {
           marginLeft: isChart ? 80 : showLabels ? 30 : 10
         }
@@ -199,9 +286,7 @@ var Root = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
           "false": true,
           key: "top-guide-".concat(value)
-        }, /*#__PURE__*/_react["default"].createElement("div", {
-          className: classes.topPixelIndicator
-        }, /*#__PURE__*/_react["default"].createElement("div", null, value * 100, "px"), /*#__PURE__*/_react["default"].createElement("div", null, "|")));
+        }, /*#__PURE__*/_react["default"].createElement(TopPixelIndicator, null, /*#__PURE__*/_react["default"].createElement("div", null, value * 100, "px"), /*#__PURE__*/_react["default"].createElement("div", null, "|")));
       })), showTitle && (disabledTitle ? /*#__PURE__*/_react["default"].createElement("div", {
         ref: function ref(r) {
           return _this2.titleRef = r;
@@ -210,20 +295,29 @@ var Root = /*#__PURE__*/function (_React$Component) {
           width: finalWidth
         }), (0, _utils.isEmptyString)((0, _utils.extractTextFromHTML)(title)) && {
           display: 'none'
-        }),
-        className: (0, _classnames["default"])(isChart ? classes.chartTitle : classes.graphTitle, classes.disabledTitle),
+        })
+      }, isChart ? /*#__PURE__*/_react["default"].createElement(ChartTitle, {
+        className: "disabled",
         dangerouslySetInnerHTML: {
           __html: title || ''
         }
-      }) : /*#__PURE__*/_react["default"].createElement("div", {
+      }) : /*#__PURE__*/_react["default"].createElement(GraphTitle, {
+        className: "disabled",
+        dangerouslySetInnerHTML: {
+          __html: title || ''
+        }
+      })) : /*#__PURE__*/_react["default"].createElement("div", {
         ref: function ref(r) {
           return _this2.titleRef = r;
         }
+      }, isChart ? /*#__PURE__*/_react["default"].createElement(ChartTitle, {
+        className: (0, _classnames["default"])({
+          rightMargin: showPixelGuides
+        })
       }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
         style: isChart && {
           width: finalWidth
         },
-        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',
@@ -234,7 +328,25 @@ var Root = /*#__PURE__*/function (_React$Component) {
         activePlugins: activeTitlePlugins,
         disableScrollbar: true,
         onKeyDown: this.handleKeyDown
-      }))), showLabels && !isChart && /*#__PURE__*/_react["default"].createElement(_label["default"], {
+      })) : /*#__PURE__*/_react["default"].createElement(GraphTitle, {
+        className: (0, _classnames["default"])({
+          rightMargin: showPixelGuides
+        })
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
+        style: isChart && {
+          width: finalWidth
+        },
+        markup: title || '',
+        onChange: onChangeTitle,
+        placeholder: defineChart && titlePlaceholder || !disabledTitle && 'Click here to add a title for this graph',
+        toolbarOpts: {
+          noPadding: true,
+          noBorder: true
+        },
+        activePlugins: activeTitlePlugins,
+        disableScrollbar: true,
+        onKeyDown: this.handleKeyDown
+      })))), showLabels && !isChart && /*#__PURE__*/_react["default"].createElement(_label["default"], {
         side: "top",
         text: labels.top,
         disabledLabel: disabledLabels,
@@ -246,9 +358,7 @@ var Root = /*#__PURE__*/function (_React$Component) {
         },
         mathMlOptions: mathMlOptions,
         charactersLimit: labelsCharactersLimit
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.wrapper
-      }, showLabels && /*#__PURE__*/_react["default"].createElement(_label["default"], {
+      }), /*#__PURE__*/_react["default"].createElement(Wrapper, null, showLabels && /*#__PURE__*/_react["default"].createElement(_label["default"], {
         side: "left",
         text: labels.left,
         disabledLabel: disabledLabels,
@@ -262,19 +372,27 @@ var Root = /*#__PURE__*/function (_React$Component) {
         },
         mathMlOptions: mathMlOptions,
         charactersLimit: labelsCharactersLimit
-      }), /*#__PURE__*/_react["default"].createElement("svg", {
+      }), defineChart ? /*#__PURE__*/_react["default"].createElement(DefineChartSvg, {
         width: finalWidth,
-        height: finalHeight,
-        className: defineChart ? classes.defineChart : classes.chart
-      }, /*#__PURE__*/_react["default"].createElement("g", {
+        height: finalHeight
+      }, /*#__PURE__*/_react["default"].createElement(GraphBox, {
+        ref: function ref(r) {
+          _this2.g = r;
+          if (rootRef) {
+            rootRef(r);
+          }
+        },
+        transform: "translate(".concat(leftPadding + (domain.padding || 0), ", ").concat(topPadding + (range.padding || 0), ")")
+      }, children)) : /*#__PURE__*/_react["default"].createElement(ChartSvg, {
+        width: finalWidth,
+        height: finalHeight
+      }, /*#__PURE__*/_react["default"].createElement(GraphBox, {
         ref: function ref(r) {
           _this2.g = r;
-
           if (rootRef) {
             rootRef(r);
           }
         },
-        className: classes.graphBox,
         transform: "translate(".concat(leftPadding + (domain.padding || 0), ", ").concat(topPadding + (range.padding || 0), ")")
       }, children)), showLabels && !isChart && /*#__PURE__*/_react["default"].createElement(_label["default"], {
         side: "right",
@@ -288,8 +406,7 @@ var Root = /*#__PURE__*/function (_React$Component) {
         },
         mathMlOptions: mathMlOptions,
         charactersLimit: labelsCharactersLimit
-      }), showPixelGuides && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.sidePixelGuides,
+      }), showPixelGuides && /*#__PURE__*/_react["default"].createElement(SidePixelGuides, {
         style: {
           paddingTop: sideGridlinesPadding,
           marginTop: 31
@@ -298,9 +415,7 @@ var Root = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
           "false": true,
           key: "top-guide-".concat(value)
-        }, /*#__PURE__*/_react["default"].createElement("div", {
-          className: classes.sidePixelIndicator
-        }, "\u2501 ", value * 100, "px"));
+        }, /*#__PURE__*/_react["default"].createElement(SidePixelIndicator, null, "\u2501 ", value * 100, "px"));
       }))), showLabels && /*#__PURE__*/_react["default"].createElement(_label["default"], {
         side: "bottom",
         text: labels.bottom,
@@ -319,11 +434,7 @@ var Root = /*#__PURE__*/function (_React$Component) {
       }));
     }
   }]);
-  return Root;
-}(_react["default"].Component); // use default color theme style to avoid color contrast issues
-
-
-exports.Root = Root;
+}(_react["default"].Component);
 (0, _defineProperty2["default"])(Root, "propTypes", {
   title: _propTypes["default"].string,
   children: _types.ChildrenType,
@@ -336,7 +447,6 @@ exports.Root = Root;
   labelsPlaceholders: _propTypes["default"].object,
   onChangeTitle: _propTypes["default"].func,
   onMouseMove: _propTypes["default"].func,
-  classes: _propTypes["default"].object.isRequired,
   showLabels: _propTypes["default"].bool,
   showTitle: _propTypes["default"].bool,
   showPixelGuides: _propTypes["default"].bool,
@@ -346,83 +456,5 @@ exports.Root = Root;
   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.defaults.TEXT,
-      backgroundColor: theme.palette.common.white,
-      touchAction: 'none',
-      position: 'relative',
-      boxSizing: 'unset' // to override the default border-box in IBX that breaks the component width layout
-
-    },
-    wrapper: {
-      display: 'flex',
-      position: 'relative'
-    },
-    svg: {},
-    defineChart: {
-      paddingLeft: '50px',
-      overflow: 'visible'
-    },
-    chart: {
-      overflow: 'visible'
-    },
-    graphBox: {
-      cursor: 'pointer',
-      userSelect: 'none'
-    },
-    graphTitle: {
-      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.defaults.TEXT,
-      fontSize: theme.typography.fontSize + 4,
-      padding: "".concat(theme.spacing.unit * 1.5, "px ").concat(theme.spacing.unit / 2, "px 0"),
-      textAlign: 'center'
-    },
-    disabledTitle: {
-      pointerEvents: 'none'
-    },
-    rightMargin: {
-      marginRight: '74px'
-    },
-    topPixelGuides: {
-      display: 'flex',
-      paddingTop: '6px'
-    },
-    topPixelIndicator: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      width: '100px',
-      pointerEvents: 'none',
-      userSelect: 'none'
-    },
-    sidePixelGuides: {
-      width: '70px',
-      display: 'flex',
-      flexDirection: 'column',
-      marginRight: '6px'
-    },
-    sidePixelIndicator: {
-      textAlign: 'right',
-      height: '20px',
-      pointerEvents: 'none',
-      userSelect: 'none',
-      '&:not(:last-child)': {
-        marginBottom: '80px'
-      }
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(Root);
-
-exports["default"] = _default;
+var _default = exports["default"] = Root;
 //# sourceMappingURL=root.js.map