@pie-lib/plot 2.28.0-mui-update.0 → 2.29.0-mui-update.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.29.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/plot@2.28.0-mui-update.0...@pie-lib/plot@2.29.0-mui-update.0) (2025-11-17)
+
+**Note:** Version bump only for package @pie-lib/plot
+
+
+
+
+
 # [2.28.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/plot@2.27.0-mui-update.0...@pie-lib/plot@2.28.0-mui-update.0) (2025-11-05)
 
 **Note:** Version bump only for package @pie-lib/plot

package/lib/label.js

@@ -6,56 +6,58 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _renderUi = require("@pie-lib/render-ui");
 var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
-var _styles = require("@mui/material/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("./utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; }
-var StyledLabel = (0, _styles.styled)('div', {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return !['side', 'rotatedToHorizontal', 'isChart', 'isChartBottomLabel', 'isDefineChartBottomLabel', 'disabledLabel', 'isEmpty'].includes(prop);
-  }
-})(function (_ref) {
-  var theme = _ref.theme,
-    side = _ref.side,
-    rotatedToHorizontal = _ref.rotatedToHorizontal,
-    isChart = _ref.isChart,
-    isChartBottomLabel = _ref.isChartBottomLabel,
-    isDefineChartBottomLabel = _ref.isDefineChartBottomLabel,
-    disabledLabel = _ref.disabledLabel,
-    isEmpty = _ref.isEmpty;
-  return _objectSpread(_objectSpread(_objectSpread({
-    fontSize: isChart ? theme.typography.fontSize + 2 : theme.typography.fontSize - 2,
+var styles = {
+  axisLabel: {
+    fontSize: 12,
     textAlign: 'center',
-    margin: theme.spacing(0.5),
-    padding: "".concat(theme.spacing(0.5), " 0"),
-    display: disabledLabel && !isChart && isEmpty ? 'none' : 'block',
-    position: isChartBottomLabel || isDefineChartBottomLabel || side === 'left' || side === 'right' ? 'absolute' : 'relative'
-  }, side === 'left' && !rotatedToHorizontal && {
-    WebkitTransform: 'rotate(-90deg)',
-    transformOrigin: '0 0',
-    transformStyle: 'preserve-3d'
-  }), side === 'right' && !rotatedToHorizontal && {
-    WebkitTransform: 'rotate(90deg)',
-    transformOrigin: '0 0',
-    transformStyle: 'preserve-3d'
-  }), rotatedToHorizontal && {
+    margin: 4,
+    padding: '4px 0'
+  },
+  chartLabel: {
+    fontSize: 16,
+    textAlign: 'center',
+    margin: 4,
+    padding: '4px 0'
+  },
+  disabledLabel: {
+    pointerEvents: 'none',
+    width: '100%'
+  },
+  editLabel: {
+    position: 'absolute',
     backgroundColor: 'white',
-    borderRadius: '4px',
-    boxShadow: '0px 5px 8px rgba(0, 0, 0, 0.15)',
+    borderRadius: 4,
+    boxShadow: '0px 5px 8px rgba(0,0,0,0.15)',
     zIndex: 10
-  });
-});
-var DisabledLabel = (0, _styles.styled)('div')({
-  pointerEvents: 'none',
-  width: '100%'
-});
+  },
+  rotateLeftLabel: {
+    transform: 'rotate(-90deg)',
+    transformOrigin: '0 0',
+    position: 'absolute'
+  },
+  rotateRightLabel: {
+    transform: 'rotate(90deg)',
+    transformOrigin: '0 0',
+    position: 'absolute'
+  },
+  customBottom: {
+    position: 'absolute'
+  },
+  displayNone: {
+    display: 'none'
+  }
+};
 var LabelComponent = function LabelComponent(props) {
   var disabledLabel = props.disabledLabel,
     graphHeight = props.graphHeight,
@@ -76,9 +78,7 @@ var LabelComponent = function LabelComponent(props) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     rotatedToHorizontal = _useState2[0],
     setRotatedToHorizontal = _useState2[1];
-  var activePlugins = ['bold', 'italic', 'underline', 'strikethrough', 'math'
-  // 'languageCharacters'
-  ];
+  var activePlugins = ['bold', 'italic', 'underline', 'strikethrough', 'math'];
   var isChart = isChartBottomLabel || isChartLeftLabel || isDefineChartBottomLabel || isDefineChartLeftLabel;
   var chartValue = side === 'left' && isDefineChartLeftLabel && graphHeight - 220;
   var defaultStyle = {
@@ -88,25 +88,21 @@ var LabelComponent = function LabelComponent(props) {
   };
   var rotatedStyle = {
     width: graphWidth - 8,
-    top: side === 'right' && "".concat(graphHeight - 22, "px") || 0,
+    top: side === 'right' ? "".concat(graphHeight - 22, "px") : 0,
     left: 0
   };
   var rotateLabel = function rotateLabel() {
-    return !disabledLabel && (side === 'left' || side === 'right') && setRotatedToHorizontal(true);
+    if (!disabledLabel && (side === 'left' || side === 'right')) {
+      setRotatedToHorizontal(true);
+    }
   };
   return /*#__PURE__*/_react["default"].createElement(_renderUi.Readable, {
     "false": true
-  }, /*#__PURE__*/_react["default"].createElement(StyledLabel, {
-    side: side,
-    rotatedToHorizontal: rotatedToHorizontal,
-    isChart: isChart,
-    isChartBottomLabel: isChartBottomLabel,
-    isDefineChartBottomLabel: isDefineChartBottomLabel,
-    disabledLabel: disabledLabel,
-    isEmpty: (0, _utils.isEmptyString)((0, _utils.extractTextFromHTML)(text)),
-    style: rotatedToHorizontal ? rotatedStyle : defaultStyle,
-    onClick: rotateLabel
-  }, disabledLabel ? /*#__PURE__*/_react["default"].createElement(DisabledLabel, {
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    onClick: rotateLabel,
+    style: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, rotatedToHorizontal ? rotatedStyle : defaultStyle), isChart ? styles.chartLabel : styles.axisLabel), side === 'left' && !rotatedToHorizontal ? styles.rotateLeftLabel : {}), side === 'right' && !rotatedToHorizontal ? styles.rotateRightLabel : {}), rotatedToHorizontal ? styles.editLabel : {}), isChartBottomLabel || isDefineChartBottomLabel ? styles.customBottom : {}), disabledLabel && !isChart && (0, _utils.isEmptyString)((0, _utils.extractTextFromHTML)(text)) && styles.displayNone)
+  }, disabledLabel ? /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.disabledLabel,
     dangerouslySetInnerHTML: {
       __html: text || ''
     }

package/lib/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","names":["_react","_interopRequireWildcard","require","_renderUi","_editableHtml","_interopRequireDefault","_styles","_propTypes","_utils","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","StyledLabel","styled","shouldForwardProp","prop","includes","_ref","theme","side","rotatedToHorizontal","isChart","isChartBottomLabel","isDefineChartBottomLabel","disabledLabel","isEmpty","fontSize","typography","textAlign","margin","spacing","padding","concat","display","position","WebkitTransform","transformOrigin","transformStyle","backgroundColor","borderRadius","boxShadow","zIndex","DisabledLabel","pointerEvents","width","LabelComponent","props","graphHeight","graphWidth","isChartLeftLabel","isDefineChartLeftLabel","placeholder","text","onChange","_props$mathMlOptions","mathMlOptions","charactersLimit","titleHeight","_useState","useState","_useState2","_slicedToArray2","setRotatedToHorizontal","activePlugins","chartValue","defaultStyle","top","left","rotatedStyle","rotateLabel","createElement","Readable","isEmptyString","extractTextFromHTML","style","onClick","dangerouslySetInnerHTML","__html","markup","toolbarOpts","noPadding","noBorder","disableScrollbar","onDone","propTypes","PropTypes","bool","number","string","func","object","_default","exports"],"sources":["../src/label.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Readable } from '@pie-lib/render-ui';\nimport EditableHtml from '@pie-lib/editable-html';\nimport { styled } from '@mui/material/styles';\nimport PropTypes from 'prop-types';\nimport { extractTextFromHTML, isEmptyString } from './utils';\n\nconst StyledLabel = styled('div', {\n  shouldForwardProp: (prop) => !['side', 'rotatedToHorizontal', 'isChart', 'isChartBottomLabel', 'isDefineChartBottomLabel', 'disabledLabel', 'isEmpty'].includes(prop),\n})(({ theme, side, rotatedToHorizontal, isChart, isChartBottomLabel, isDefineChartBottomLabel, disabledLabel, isEmpty }) => ({\n  fontSize: isChart ? theme.typography.fontSize + 2 : theme.typography.fontSize - 2,\n  textAlign: 'center',\n  margin: theme.spacing(0.5),\n  padding: `${theme.spacing(0.5)} 0`,\n  display: disabledLabel && !isChart && isEmpty ? 'none' : 'block',\n  position: (isChartBottomLabel || isDefineChartBottomLabel || side === 'left' || side === 'right') ? 'absolute' : 'relative',\n  ...(side === 'left' && !rotatedToHorizontal && {\n    WebkitTransform: 'rotate(-90deg)',\n    transformOrigin: '0 0',\n    transformStyle: 'preserve-3d',\n  }),\n  ...(side === 'right' && !rotatedToHorizontal && {\n    WebkitTransform: 'rotate(90deg)',\n    transformOrigin: '0 0',\n    transformStyle: 'preserve-3d',\n  }),\n  ...(rotatedToHorizontal && {\n    backgroundColor: 'white',\n    borderRadius: '4px',\n    boxShadow: '0px 5px 8px rgba(0, 0, 0, 0.15)',\n    zIndex: 10,\n  }),\n}));\n\nconst DisabledLabel = styled('div')({\n  pointerEvents: 'none',\n  width: '100%',\n});\n\nconst LabelComponent = (props) => {\n  const {\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      <StyledLabel\n        side={side}\n        rotatedToHorizontal={rotatedToHorizontal}\n        isChart={isChart}\n        isChartBottomLabel={isChartBottomLabel}\n        isDefineChartBottomLabel={isDefineChartBottomLabel}\n        disabledLabel={disabledLabel}\n        isEmpty={isEmptyString(extractTextFromHTML(text))}\n        style={rotatedToHorizontal ? rotatedStyle : defaultStyle}\n        onClick={rotateLabel}\n      >\n        {disabledLabel ? (\n          <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      </StyledLabel>\n    </Readable>\n  );\n};\n\nLabelComponent.propTypes = {\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 LabelComponent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"label.js","names":["_react","_interopRequireWildcard","require","_renderUi","_editableHtml","_interopRequireDefault","_propTypes","_classnames","_utils","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","styles","axisLabel","fontSize","textAlign","margin","padding","chartLabel","disabledLabel","pointerEvents","width","editLabel","position","backgroundColor","borderRadius","boxShadow","zIndex","rotateLeftLabel","transform","transformOrigin","rotateRightLabel","customBottom","displayNone","display","LabelComponent","props","graphHeight","graphWidth","isChartBottomLabel","isDefineChartBottomLabel","isChartLeftLabel","isDefineChartLeftLabel","placeholder","text","side","onChange","_props$mathMlOptions","mathMlOptions","charactersLimit","titleHeight","_useState","useState","_useState2","_slicedToArray2","rotatedToHorizontal","setRotatedToHorizontal","activePlugins","isChart","chartValue","defaultStyle","top","concat","left","rotatedStyle","rotateLabel","createElement","Readable","onClick","style","isEmptyString","extractTextFromHTML","dangerouslySetInnerHTML","__html","markup","toolbarOpts","noPadding","noBorder","disableScrollbar","onDone","propTypes","PropTypes","bool","number","string","func","object","_default","exports"],"sources":["../src/label.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { color, Readable } from '@pie-lib/render-ui';\nimport EditableHtml from '@pie-lib/editable-html';\nimport PropTypes from 'prop-types';\nimport cn from 'classnames';\nimport { extractTextFromHTML, isEmptyString } from './utils';\n\nconst styles = {\n  axisLabel: {\n    fontSize: 12,\n    textAlign: 'center',\n    margin: 4,\n    padding: '4px 0',\n  },\n  chartLabel: {\n    fontSize: 16,\n    textAlign: 'center',\n    margin: 4,\n    padding: '4px 0',\n  },\n  disabledLabel: {\n    pointerEvents: 'none',\n    width: '100%',\n  },\n  editLabel: {\n    position: 'absolute',\n    backgroundColor: 'white',\n    borderRadius: 4,\n    boxShadow: '0px 5px 8px rgba(0,0,0,0.15)',\n    zIndex: 10,\n  },\n  rotateLeftLabel: {\n    transform: 'rotate(-90deg)',\n    transformOrigin: '0 0',\n    position: 'absolute',\n  },\n  rotateRightLabel: {\n    transform: 'rotate(90deg)',\n    transformOrigin: '0 0',\n    position: 'absolute',\n  },\n  customBottom: {\n    position: 'absolute',\n  },\n  displayNone: {\n    display: 'none',\n  },\n};\n\nconst LabelComponent = (props) => {\n  const {\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\n  const [rotatedToHorizontal, setRotatedToHorizontal] = useState(false);\n\n  const activePlugins = [\n    'bold',\n    'italic',\n    'underline',\n    'strikethrough',\n    'math',\n  ];\n\n  const isChart =\n    isChartBottomLabel ||\n    isChartLeftLabel ||\n    isDefineChartBottomLabel ||\n    isDefineChartLeftLabel;\n\n  const chartValue =\n    side === 'left' && isDefineChartLeftLabel && graphHeight - 220;\n\n  const defaultStyle = {\n    width:\n      chartValue ||\n      (side === 'left' || side === 'right'\n        ? graphHeight - 8\n        : 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 = () => {\n    if (!disabledLabel && (side === 'left' || side === 'right')) {\n      setRotatedToHorizontal(true);\n    }\n  };\n\n  return (\n    <Readable false>\n      <div\n        onClick={rotateLabel}\n        style={{\n          ...(rotatedToHorizontal ? rotatedStyle : defaultStyle),\n          ...(isChart ? styles.chartLabel : styles.axisLabel),\n          ...(side === 'left' && !rotatedToHorizontal\n            ? styles.rotateLeftLabel\n            : {}),\n          ...(side === 'right' && !rotatedToHorizontal\n            ? styles.rotateRightLabel\n            : {}),\n          ...(rotatedToHorizontal ? styles.editLabel : {}),\n          ...((isChartBottomLabel || isDefineChartBottomLabel)\n            ? styles.customBottom\n            : {}),\n          ...((disabledLabel &&\n            !isChart &&\n            isEmptyString(extractTextFromHTML(text))) &&\n            styles.displayNone),\n        }}\n      >\n        {disabledLabel ? (\n          <div\n            style={styles.disabledLabel}\n            dangerouslySetInnerHTML={{ __html: text || '' }}\n          />\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};\n\nLabelComponent.propTypes = {\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 LabelComponent;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.28.0-mui-update.0",
+  "version": "2.29.0-mui-update.0",
   "description": "Some underlying components for building charts/graphs",
   "keywords": [
     "react",
@@ -21,8 +21,8 @@
     "@mapbox/point-geometry": "^0.1.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/editable-html": "^11.22.0-mui-update.0",
-    "@pie-lib/render-ui": "^4.36.0-mui-update.0",
+    "@pie-lib/editable-html": "^11.23.0-mui-update.0",
+    "@pie-lib/render-ui": "^4.37.0-mui-update.0",
     "@vx/axis": "^0.0.183",
     "@vx/event": "^0.0.182",
     "@vx/grid": "^0.0.183",
@@ -44,6 +44,6 @@
   "peerDependencies": {
     "react": "^18.2.0"
   },
-  "gitHead": "2e0222bda045f46b504640a972d43787e68288c4",
+  "gitHead": "4d8ccede3634986a13ea7df987defd26d089f0d6",
   "scripts": {}
 }

package/src/label.jsx

@@ -1,41 +1,51 @@
 import React, { useState } from 'react';
-import { Readable } from '@pie-lib/render-ui';
+import { color, Readable } from '@pie-lib/render-ui';
 import EditableHtml from '@pie-lib/editable-html';
-import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
+import cn from 'classnames';
 import { extractTextFromHTML, isEmptyString } from './utils';
 
-const StyledLabel = styled('div', {
-  shouldForwardProp: (prop) => !['side', 'rotatedToHorizontal', 'isChart', 'isChartBottomLabel', 'isDefineChartBottomLabel', 'disabledLabel', 'isEmpty'].includes(prop),
-})(({ theme, side, rotatedToHorizontal, isChart, isChartBottomLabel, isDefineChartBottomLabel, disabledLabel, isEmpty }) => ({
-  fontSize: isChart ? theme.typography.fontSize + 2 : theme.typography.fontSize - 2,
-  textAlign: 'center',
-  margin: theme.spacing(0.5),
-  padding: `${theme.spacing(0.5)} 0`,
-  display: disabledLabel && !isChart && isEmpty ? 'none' : 'block',
-  position: (isChartBottomLabel || isDefineChartBottomLabel || side === 'left' || side === 'right') ? 'absolute' : 'relative',
-  ...(side === 'left' && !rotatedToHorizontal && {
-    WebkitTransform: 'rotate(-90deg)',
-    transformOrigin: '0 0',
-    transformStyle: 'preserve-3d',
-  }),
-  ...(side === 'right' && !rotatedToHorizontal && {
-    WebkitTransform: 'rotate(90deg)',
-    transformOrigin: '0 0',
-    transformStyle: 'preserve-3d',
-  }),
-  ...(rotatedToHorizontal && {
+const styles = {
+  axisLabel: {
+    fontSize: 12,
+    textAlign: 'center',
+    margin: 4,
+    padding: '4px 0',
+  },
+  chartLabel: {
+    fontSize: 16,
+    textAlign: 'center',
+    margin: 4,
+    padding: '4px 0',
+  },
+  disabledLabel: {
+    pointerEvents: 'none',
+    width: '100%',
+  },
+  editLabel: {
+    position: 'absolute',
     backgroundColor: 'white',
-    borderRadius: '4px',
-    boxShadow: '0px 5px 8px rgba(0, 0, 0, 0.15)',
+    borderRadius: 4,
+    boxShadow: '0px 5px 8px rgba(0,0,0,0.15)',
     zIndex: 10,
-  }),
-}));
-
-const DisabledLabel = styled('div')({
-  pointerEvents: 'none',
-  width: '100%',
-});
+  },
+  rotateLeftLabel: {
+    transform: 'rotate(-90deg)',
+    transformOrigin: '0 0',
+    position: 'absolute',
+  },
+  rotateRightLabel: {
+    transform: 'rotate(90deg)',
+    transformOrigin: '0 0',
+    position: 'absolute',
+  },
+  customBottom: {
+    position: 'absolute',
+  },
+  displayNone: {
+    display: 'none',
+  },
+};
 
 const LabelComponent = (props) => {
   const {
@@ -54,21 +64,32 @@ const LabelComponent = (props) => {
     charactersLimit,
     titleHeight,
   } = props;
+
   const [rotatedToHorizontal, setRotatedToHorizontal] = useState(false);
+
   const activePlugins = [
     'bold',
     'italic',
     'underline',
     'strikethrough',
     'math',
-    // 'languageCharacters'
   ];
 
-  const isChart = isChartBottomLabel || isChartLeftLabel || isDefineChartBottomLabel || isDefineChartLeftLabel;
+  const isChart =
+    isChartBottomLabel ||
+    isChartLeftLabel ||
+    isDefineChartBottomLabel ||
+    isDefineChartLeftLabel;
+
+  const chartValue =
+    side === 'left' && isDefineChartLeftLabel && graphHeight - 220;
 
-  const chartValue = side === 'left' && isDefineChartLeftLabel && graphHeight - 220;
   const defaultStyle = {
-    width: chartValue || (side === 'left' || side === 'right' ? graphHeight - 8 : graphWidth - 8),
+    width:
+      chartValue ||
+      (side === 'left' || side === 'right'
+        ? graphHeight - 8
+        : graphWidth - 8),
     top:
       chartValue ||
       (isChartLeftLabel && `${graphHeight - 70}px`) ||
@@ -85,27 +106,44 @@ const LabelComponent = (props) => {
 
   const rotatedStyle = {
     width: graphWidth - 8,
-    top: (side === 'right' && `${graphHeight - 22}px`) || 0,
+    top: side === 'right' ? `${graphHeight - 22}px` : 0,
     left: 0,
   };
 
-  const rotateLabel = () => !disabledLabel && (side === 'left' || side === 'right') && setRotatedToHorizontal(true);
+  const rotateLabel = () => {
+    if (!disabledLabel && (side === 'left' || side === 'right')) {
+      setRotatedToHorizontal(true);
+    }
+  };
 
   return (
     <Readable false>
-      <StyledLabel
-        side={side}
-        rotatedToHorizontal={rotatedToHorizontal}
-        isChart={isChart}
-        isChartBottomLabel={isChartBottomLabel}
-        isDefineChartBottomLabel={isDefineChartBottomLabel}
-        disabledLabel={disabledLabel}
-        isEmpty={isEmptyString(extractTextFromHTML(text))}
-        style={rotatedToHorizontal ? rotatedStyle : defaultStyle}
+      <div
         onClick={rotateLabel}
+        style={{
+          ...(rotatedToHorizontal ? rotatedStyle : defaultStyle),
+          ...(isChart ? styles.chartLabel : styles.axisLabel),
+          ...(side === 'left' && !rotatedToHorizontal
+            ? styles.rotateLeftLabel
+            : {}),
+          ...(side === 'right' && !rotatedToHorizontal
+            ? styles.rotateRightLabel
+            : {}),
+          ...(rotatedToHorizontal ? styles.editLabel : {}),
+          ...((isChartBottomLabel || isDefineChartBottomLabel)
+            ? styles.customBottom
+            : {}),
+          ...((disabledLabel &&
+            !isChart &&
+            isEmptyString(extractTextFromHTML(text))) &&
+            styles.displayNone),
+        }}
       >
         {disabledLabel ? (
-          <DisabledLabel dangerouslySetInnerHTML={{ __html: text || '' }} />
+          <div
+            style={styles.disabledLabel}
+            dangerouslySetInnerHTML={{ __html: text || '' }}
+          />
         ) : (
           <EditableHtml
             markup={text || ''}
@@ -123,7 +161,7 @@ const LabelComponent = (props) => {
             charactersLimit={charactersLimit}
           />
         )}
-      </StyledLabel>
+      </div>
     </Readable>
   );
 };