@pie-lib/charting 5.7.3-next.17 → 5.8.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.8.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.7.2...@pie-lib/charting@5.8.0) (2023-05-01)
+
+
+### Bug Fixes
+
+* **charting:** reset invalid values from chart model ([892b90d](https://github.com/pie-framework/pie-lib/commit/892b90d049e0fd8e0ab623ebc17a2e4e1ca63a2e))
+* **charting:** update chart data in player ([657399d](https://github.com/pie-framework/pie-lib/commit/657399d1b2fe285695196df4b9641aa632394a84))
+
+
+### Features
+
+* **charting:** add classes and rerender math at correct answer: PD-491 ([79f4398](https://github.com/pie-framework/pie-lib/commit/79f4398adae30f4a5a7ad4a9da577665ece145ba))
+* **charting:** refactor regenx for mixed fractions and solve reviews and eslint-PD-491 ([49d18f4](https://github.com/pie-framework/pie-lib/commit/49d18f4a65f25fbfa010898d8486608819eece06))
+* **charting:** render fractions using mathjax-PD-491 ([336319f](https://github.com/pie-framework/pie-lib/commit/336319fa238fed333c2bddc0888a031805452a13))
+
+
+
+
+
 ## [5.7.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.7.1...@pie-lib/charting@5.7.2) (2023-04-19)
 
 

package/lib/mark-label.js

@@ -29,6 +29,8 @@ var _styles2 = require("./common/styles");
 
 var _renderUi = require("@pie-lib/render-ui");
 
+var _mathRendering = require("@pie-lib/math-rendering");
+
 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; }
@@ -53,11 +55,60 @@ var styles = function styles(theme) {
       '&.disabled': _objectSpread(_objectSpread({}, (0, _styles2.disabled)('color')), {}, {
         backgroundColor: 'transparent !important'
       })
-    }
+    },
+    mathInput: {
+      pointerEvents: 'auto',
+      textAlign: 'center',
+      fontSize: theme.typography.fontSize,
+      fontFamily: theme.typography.fontFamily,
+      color: _renderUi.color.primaryDark()
+    },
+    disabled: _objectSpread(_objectSpread({}, (0, _styles2.disabled)('color')), {}, {
+      backgroundColor: 'transparent !important'
+    }),
+    error: {
+      border: "2px solid ".concat(theme.palette.error.main)
+    },
+    correct: _objectSpread({}, (0, _styles2.correct)('color')),
+    incorrect: _objectSpread({}, (0, _styles2.incorrect)('color'))
   };
 };
 
+function isFractionFormat(label) {
+  var trimmedLabel = (label === null || label === void 0 ? void 0 : label.trim()) || '';
+  var fracRegex = new RegExp(/^[1-9]*[0-9]*\s?[1-9][0-9]*\/[1-9][0-9]*$/);
+  return fracRegex.test(trimmedLabel);
+}
+
+function getLabelMathFormat(label) {
+  var trimmedLabel = (label === null || label === void 0 ? void 0 : label.trim()) || '';
+  var fraction;
+  var mixedNr = '';
+  var improperFraction = trimmedLabel.split(' ');
+
+  if (improperFraction[1] && improperFraction[1].includes('/')) {
+    fraction = improperFraction[1].split('/') || '';
+  } else {
+    fraction = (trimmedLabel === null || trimmedLabel === void 0 ? void 0 : trimmedLabel.split('/')) || '';
+  }
+
+  var formattedLLabel;
+
+  if (isFractionFormat(label)) {
+    if (improperFraction[0] && improperFraction[1]) {
+      mixedNr = improperFraction[0];
+    }
+
+    formattedLLabel = "\\(".concat(mixedNr, "\\frac{").concat(fraction[0], "}{").concat(fraction[1], "}\\)");
+    return formattedLLabel;
+  }
+
+  return undefined;
+}
+
 var MarkLabel = function MarkLabel(props) {
+  var _classNames;
+
   // eslint-disable-next-line no-unused-vars
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -83,12 +134,30 @@ var MarkLabel = function MarkLabel(props) {
       label = _useState4[0],
       setLabel = _useState4[1];
 
+  var _useState5 = (0, _react.useState)(getLabelMathFormat(mark.label)),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      mathLabel = _useState6[0],
+      setMathLabel = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      isEditing = _useState8[0],
+      setIsEditing = _useState8[1];
+
+  var root = (0, _react.useRef)(null);
+
   var onChange = function onChange(e) {
-    return setLabel(e.target.value);
+    setLabel(e.target.value);
+  };
+
+  var isMathRendering = function isMathRendering() {
+    return isEditing === false && mathLabel !== undefined;
   };
 
   var onChangeProp = function onChangeProp(e) {
-    return props.onChange(e.target.value);
+    setMathLabel(getLabelMathFormat(mark.label));
+    setIsEditing(false);
+    props.onChange(e.target.value);
   };
 
   var extraStyle = {};
@@ -104,13 +173,30 @@ var MarkLabel = function MarkLabel(props) {
   (0, _react.useEffect)(function () {
     setLabel(mark.label);
   }, [mark.label]);
-  return /*#__PURE__*/_react["default"].createElement(_reactInputAutosize["default"], {
-    autoFocus: autoFocus,
+  (0, _react.useEffect)(function () {
+    (0, _mathRendering.renderMath)(root);
+  }, []);
+  return isMathRendering() ? /*#__PURE__*/_react["default"].createElement("div", {
+    ref: function ref(r) {
+      return root = r;
+    },
+    dangerouslySetInnerHTML: {
+      __html: getLabelMathFormat(label)
+    },
+    className: (0, _classnames["default"])(classes.mathInput, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.disabled, disabled), (0, _defineProperty2["default"])(_classNames, classes.error, error), (0, _defineProperty2["default"])(_classNames, classes.correct, correctness && correctness.label === 'correct'), (0, _defineProperty2["default"])(_classNames, classes.incorrect, correctness && correctness.label === 'incorrect'), _classNames)),
+    onClick: function onClick() {
+      return setIsEditing(true);
+    },
+    style: {
+      minWidth: barWidth
+    }
+  }) : /*#__PURE__*/_react["default"].createElement(_reactInputAutosize["default"], {
     inputRef: function inputRef(r) {
       _ref(r);
 
       externalInputRef(r);
     },
+    autoFocus: isEditing || autoFocus,
     disabled: disabled,
     inputClassName: (0, _classnames["default"])(classes.input, correctness && correctness.label, disabled && 'disabled', error && 'error'),
     inputStyle: _objectSpread({

package/lib/mark-label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/mark-label.jsx"],"names":["styles","theme","input","fontFamily","typography","fontSize","border","color","primaryDark","palette","error","main","backgroundColor","MarkLabel","props","setInput","_ref","node","mark","classes","disabled","externalInputRef","inputRef","barWidth","rotate","correctness","autoFocus","label","setLabel","onChange","e","target","value","onChangeProp","extraStyle","width","textAlign","r","minWidth","background","boxSizing","paddingLeft","paddingRight","position","pointerEvents","top","left","transformOrigin","transform","propTypes","PropTypes","bool","any","func","graphProps","types","GraphPropsType","object","number","shape","string"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBC,IAAAA,KAAK,EAAE;AACL,eAAO,OADF;AAELC,MAAAA,UAAU,EAAEF,KAAK,CAACG,UAAN,CAAiBD,UAFxB;AAGLE,MAAAA,QAAQ,EAAEJ,KAAK,CAACG,UAAN,CAAiBC,QAHtB;AAILC,MAAAA,MAAM,EAAE,MAJH;AAKLC,MAAAA,KAAK,EAAEA,gBAAMC,WAAN,EALF;AAML,iBAAW;AAAEF,QAAAA,MAAM,sBAAeL,KAAK,CAACQ,OAAN,CAAcC,KAAd,CAAoBC,IAAnC;AAAR,OANN;AAOL,mBAAa,sBAAQ,OAAR,CAPR;AAQL,qBAAe,wBAAU,OAAV,CARV;AASL,oDACK,uBAAS,OAAT,CADL;AAEEC,QAAAA,eAAe,EAAE;AAFnB;AATK;AADkB,GAAZ;AAAA,CAAf;;AAiBO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,KAAD,EAAW;AAClC;AACA,kBAA0B,qBAAS,IAAT,CAA1B;AAAA;AAAA,MAAOZ,KAAP;AAAA,MAAca,QAAd;;AACA,MAAMC,IAAI,GAAG,wBAAY,UAACC,IAAD;AAAA,WAAUF,QAAQ,CAACE,IAAD,CAAlB;AAAA,GAAZ,EAAsC,IAAtC,CAAb;;AAEA,MACEC,IADF,GAUIJ,KAVJ,CACEI,IADF;AAAA,MAEEC,OAFF,GAUIL,KAVJ,CAEEK,OAFF;AAAA,MAGEC,QAHF,GAUIN,KAVJ,CAGEM,QAHF;AAAA,MAIYC,gBAJZ,GAUIP,KAVJ,CAIEQ,QAJF;AAAA,MAKEC,QALF,GAUIT,KAVJ,CAKES,QALF;AAAA,MAMEC,MANF,GAUIV,KAVJ,CAMEU,MANF;AAAA,MAOEC,WAPF,GAUIX,KAVJ,CAOEW,WAPF;AAAA,MAQEC,SARF,GAUIZ,KAVJ,CAQEY,SARF;AAAA,MASEhB,KATF,GAUII,KAVJ,CASEJ,KATF;;AAWA,mBAA0B,qBAASQ,IAAI,CAACS,KAAd,CAA1B;AAAA;AAAA,MAAOA,KAAP;AAAA,MAAcC,QAAd;;AACA,MAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,CAAD;AAAA,WAAOF,QAAQ,CAACE,CAAC,CAACC,MAAF,CAASC,KAAV,CAAf;AAAA,GAAjB;;AACA,MAAMC,YAAY,GAAG,SAAfA,YAAe,CAACH,CAAD;AAAA,WAAOhB,KAAK,CAACe,QAAN,CAAeC,CAAC,CAACC,MAAF,CAASC,KAAxB,CAAP;AAAA,GAArB;;AACA,MAAIE,UAAU,GAAG,EAAjB;;AAEA,MAAIV,MAAJ,EAAY;AACVU,IAAAA,UAAU,GAAG;AACXC,MAAAA,KAAK,EAAE,OADI;AAEXC,MAAAA,SAAS,EAAE;AAFA,KAAb;AAID,GA1BiC,CA4BlC;;;AACA,wBAAU,YAAM;AACdR,IAAAA,QAAQ,CAACV,IAAI,CAACS,KAAN,CAAR;AACD,GAFD,EAEG,CAACT,IAAI,CAACS,KAAN,CAFH;AAIA,sBACE,gCAAC,8BAAD;AACE,IAAA,SAAS,EAAED,SADb;AAEE,IAAA,QAAQ,EAAE,kBAACW,CAAD,EAAO;AACfrB,MAAAA,IAAI,CAACqB,CAAD,CAAJ;;AACAhB,MAAAA,gBAAgB,CAACgB,CAAD,CAAhB;AACD,KALH;AAME,IAAA,QAAQ,EAAEjB,QANZ;AAOE,IAAA,cAAc,EAAE,4BAAGD,OAAO,CAACjB,KAAX,EAAkBuB,WAAW,IAAIA,WAAW,CAACE,KAA7C,EAAoDP,QAAQ,IAAI,UAAhE,EAA4EV,KAAK,IAAI,OAArF,CAPlB;AAQE,IAAA,UAAU;AACR4B,MAAAA,QAAQ,EAAEf,QADF;AAERa,MAAAA,SAAS,EAAE,QAFH;AAGRG,MAAAA,UAAU,EAAE,aAHJ;AAIRC,MAAAA,SAAS,EAAE,YAJH;AAKRC,MAAAA,WAAW,EAAE,CALL;AAMRC,MAAAA,YAAY,EAAE;AANN,OAOLR,UAPK,CARZ;AAiBE,IAAA,KAAK,EAAEP,KAjBT;AAkBE,IAAA,KAAK,EAAE;AACLgB,MAAAA,QAAQ,EAAE,OADL;AAELC,MAAAA,aAAa,EAAE,MAFV;AAGLC,MAAAA,GAAG,EAAE,CAHA;AAILC,MAAAA,IAAI,EAAE,CAJD;AAKLR,MAAAA,QAAQ,EAAEf,QALL;AAMLwB,MAAAA,eAAe,EAAE,MANZ;AAOLC,MAAAA,SAAS,mBAAYxB,MAAZ;AAPJ,KAlBT;AA2BE,IAAA,QAAQ,EAAEK,QA3BZ;AA4BE,IAAA,MAAM,EAAEI;AA5BV,IADF;AAgCD,CAjEM;;;AAmEPpB,SAAS,CAACoC,SAAV,GAAsB;AACpBvB,EAAAA,SAAS,EAAEwB,sBAAUC,IADD;AAEpB/B,EAAAA,QAAQ,EAAE8B,sBAAUC,IAFA;AAGpBzC,EAAAA,KAAK,EAAEwC,sBAAUE,GAHG;AAIpBvB,EAAAA,QAAQ,EAAEqB,sBAAUG,IAJA;AAKpBC,EAAAA,UAAU,EAAEC,YAAMC,cALE;AAMpBrC,EAAAA,OAAO,EAAE+B,sBAAUO,MANC;AAOpBnC,EAAAA,QAAQ,EAAE4B,sBAAUG,IAPA;AAQpBnC,EAAAA,IAAI,EAAEgC,sBAAUO,MARI;AASpBlC,EAAAA,QAAQ,EAAE2B,sBAAUQ,MATA;AAUpBlC,EAAAA,MAAM,EAAE0B,sBAAUQ,MAVE;AAWpBjC,EAAAA,WAAW,EAAEyB,sBAAUS,KAAV,CAAgB;AAC3B3B,IAAAA,KAAK,EAAEkB,sBAAUU,MADU;AAE3BjC,IAAAA,KAAK,EAAEuB,sBAAUU;AAFU,GAAhB;AAXO,CAAtB;;eAiBe,wBAAW5D,MAAX,EAAmBa,SAAnB,C","sourcesContent":["import React, { useState, useCallback, useEffect } from 'react';\nimport cn from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport AutosizeInput from 'react-input-autosize';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { correct, incorrect, disabled } from './common/styles';\nimport { color } from '@pie-lib/render-ui';\n\nconst styles = (theme) => ({\n  input: {\n    float: 'right',\n    fontFamily: theme.typography.fontFamily,\n    fontSize: theme.typography.fontSize,\n    border: 'none',\n    color: color.primaryDark(),\n    '&.error': { border: `2px solid ${theme.palette.error.main}` },\n    '&.correct': correct('color'),\n    '&.incorrect': incorrect('color'),\n    '&.disabled': {\n      ...disabled('color'),\n      backgroundColor: 'transparent !important',\n    },\n  },\n});\n\nexport const MarkLabel = (props) => {\n  // eslint-disable-next-line no-unused-vars\n  const [input, setInput] = useState(null);\n  const _ref = useCallback((node) => setInput(node), null);\n\n  const {\n    mark,\n    classes,\n    disabled,\n    inputRef: externalInputRef,\n    barWidth,\n    rotate,\n    correctness,\n    autoFocus,\n    error,\n  } = props;\n  const [label, setLabel] = useState(mark.label);\n  const onChange = (e) => setLabel(e.target.value);\n  const onChangeProp = (e) => props.onChange(e.target.value);\n  let extraStyle = {};\n\n  if (rotate) {\n    extraStyle = {\n      width: 'unset',\n      textAlign: 'left',\n    };\n  }\n\n  // useState only sets the value once, to synch props to state need useEffect\n  useEffect(() => {\n    setLabel(mark.label);\n  }, [mark.label]);\n\n  return (\n    <AutosizeInput\n      autoFocus={autoFocus}\n      inputRef={(r) => {\n        _ref(r);\n        externalInputRef(r);\n      }}\n      disabled={disabled}\n      inputClassName={cn(classes.input, correctness && correctness.label, disabled && 'disabled', error && 'error')}\n      inputStyle={{\n        minWidth: barWidth,\n        textAlign: 'center',\n        background: 'transparent',\n        boxSizing: 'border-box',\n        paddingLeft: 0,\n        paddingRight: 0,\n        ...extraStyle,\n      }}\n      value={label}\n      style={{\n        position: 'fixed',\n        pointerEvents: 'auto',\n        top: 0,\n        left: 0,\n        minWidth: barWidth,\n        transformOrigin: 'left',\n        transform: `rotate(${rotate}deg)`,\n      }}\n      onChange={onChange}\n      onBlur={onChangeProp}\n    />\n  );\n};\n\nMarkLabel.propTypes = {\n  autoFocus: PropTypes.bool,\n  disabled: PropTypes.bool,\n  error: PropTypes.any,\n  onChange: PropTypes.func,\n  graphProps: types.GraphPropsType,\n  classes: PropTypes.object,\n  inputRef: PropTypes.func,\n  mark: PropTypes.object,\n  barWidth: PropTypes.number,\n  rotate: PropTypes.number,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string,\n  }),\n};\n\nexport default withStyles(styles)(MarkLabel);\n"],"file":"mark-label.js"}
+{"version":3,"sources":["../src/mark-label.jsx"],"names":["styles","theme","input","fontFamily","typography","fontSize","border","color","primaryDark","palette","error","main","backgroundColor","mathInput","pointerEvents","textAlign","disabled","correct","incorrect","isFractionFormat","label","trimmedLabel","trim","fracRegex","RegExp","test","getLabelMathFormat","fraction","mixedNr","improperFraction","split","includes","formattedLLabel","undefined","MarkLabel","props","setInput","_ref","node","mark","classes","externalInputRef","inputRef","barWidth","rotate","correctness","autoFocus","setLabel","mathLabel","setMathLabel","isEditing","setIsEditing","root","onChange","e","target","value","isMathRendering","onChangeProp","extraStyle","width","r","__html","minWidth","background","boxSizing","paddingLeft","paddingRight","position","top","left","transformOrigin","transform","propTypes","PropTypes","bool","any","func","graphProps","types","GraphPropsType","object","number","shape","string"],"mappings":"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","sourcesContent":["import React, { useState, useCallback, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport AutosizeInput from 'react-input-autosize';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { correct, incorrect, disabled } from './common/styles';\nimport { color } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nconst styles = (theme) => ({\n  input: {\n    float: 'right',\n    fontFamily: theme.typography.fontFamily,\n    fontSize: theme.typography.fontSize,\n    border: 'none',\n    color: color.primaryDark(),\n    '&.error': { border: `2px solid ${theme.palette.error.main}` },\n    '&.correct': correct('color'),\n    '&.incorrect': incorrect('color'),\n    '&.disabled': {\n      ...disabled('color'),\n      backgroundColor: 'transparent !important',\n    },\n  },\n  mathInput: {\n    pointerEvents: 'auto',\n    textAlign: 'center',\n    fontSize: theme.typography.fontSize,\n    fontFamily: theme.typography.fontFamily,\n    color: color.primaryDark(),\n  },\n  disabled: {\n    ...disabled('color'),\n    backgroundColor: 'transparent !important',\n  },\n  error: {\n    border: `2px solid ${theme.palette.error.main}`,\n  },\n  correct: {\n    ...correct('color'),\n  },\n  incorrect: {\n    ...incorrect('color'),\n  },\n});\n\nfunction isFractionFormat(label) {\n  const trimmedLabel = label?.trim() || '';\n  const fracRegex = new RegExp(/^[1-9]*[0-9]*\\s?[1-9][0-9]*\\/[1-9][0-9]*$/);\n  return fracRegex.test(trimmedLabel);\n}\n\nfunction getLabelMathFormat(label) {\n  const trimmedLabel = label?.trim() || '';\n  let fraction;\n  let mixedNr = '';\n  let improperFraction = trimmedLabel.split(' ');\n  if (improperFraction[1] && improperFraction[1].includes('/')) {\n    fraction = improperFraction[1].split('/') || '';\n  } else {\n    fraction = trimmedLabel?.split('/') || '';\n  }\n\n  let formattedLLabel;\n  if (isFractionFormat(label)) {\n    if (improperFraction[0] && improperFraction[1]) {\n      mixedNr = improperFraction[0];\n    }\n    formattedLLabel = `\\\\(${mixedNr}\\\\frac{${fraction[0]}}{${fraction[1]}}\\\\)`;\n    return formattedLLabel;\n  }\n  return undefined;\n}\n\nexport const MarkLabel = (props) => {\n  // eslint-disable-next-line no-unused-vars\n  const [input, setInput] = useState(null);\n  const _ref = useCallback((node) => setInput(node), null);\n\n  const {\n    mark,\n    classes,\n    disabled,\n    inputRef: externalInputRef,\n    barWidth,\n    rotate,\n    correctness,\n    autoFocus,\n    error,\n  } = props;\n\n  const [label, setLabel] = useState(mark.label);\n  const [mathLabel, setMathLabel] = useState(getLabelMathFormat(mark.label));\n  const [isEditing, setIsEditing] = useState(false);\n  let root = useRef(null);\n\n  const onChange = (e) => {\n    setLabel(e.target.value);\n  };\n\n  const isMathRendering = () => {\n    return isEditing === false && mathLabel !== undefined;\n  };\n\n  const onChangeProp = (e) => {\n    setMathLabel(getLabelMathFormat(mark.label));\n    setIsEditing(false);\n    props.onChange(e.target.value);\n  };\n  let extraStyle = {};\n\n  if (rotate) {\n    extraStyle = {\n      width: 'unset',\n      textAlign: 'left',\n    };\n  }\n\n  // useState only sets the value once, to synch props to state need useEffect\n  useEffect(() => {\n    setLabel(mark.label);\n  }, [mark.label]);\n\n  useEffect(() => {\n    renderMath(root);\n  }, []);\n\n  return isMathRendering() ? (\n    <div\n      ref={(r) => (root = r)}\n      dangerouslySetInnerHTML={{ __html: getLabelMathFormat(label) }}\n      className={classNames(classes.mathInput, {\n        [classes.disabled]: disabled,\n        [classes.error]: error,\n        [classes.correct]: correctness && correctness.label === 'correct',\n        [classes.incorrect]: correctness && correctness.label === 'incorrect',\n      })}\n      onClick={() => setIsEditing(true)}\n      style={{ minWidth: barWidth }}\n    ></div>\n  ) : (\n    <AutosizeInput\n      inputRef={(r) => {\n        _ref(r);\n        externalInputRef(r);\n      }}\n      autoFocus={isEditing || autoFocus}\n      disabled={disabled}\n      inputClassName={classNames(\n        classes.input,\n        correctness && correctness.label,\n        disabled && 'disabled',\n        error && 'error',\n      )}\n      inputStyle={{\n        minWidth: barWidth,\n        textAlign: 'center',\n        background: 'transparent',\n        boxSizing: 'border-box',\n        paddingLeft: 0,\n        paddingRight: 0,\n        ...extraStyle,\n      }}\n      value={label}\n      style={{\n        position: 'fixed',\n        pointerEvents: 'auto',\n        top: 0,\n        left: 0,\n        minWidth: barWidth,\n        transformOrigin: 'left',\n        transform: `rotate(${rotate}deg)`,\n      }}\n      onChange={onChange}\n      onBlur={onChangeProp}\n    />\n  );\n};\n\nMarkLabel.propTypes = {\n  autoFocus: PropTypes.bool,\n  disabled: PropTypes.bool,\n  error: PropTypes.any,\n  onChange: PropTypes.func,\n  graphProps: types.GraphPropsType,\n  classes: PropTypes.object,\n  inputRef: PropTypes.func,\n  mark: PropTypes.object,\n  barWidth: PropTypes.number,\n  rotate: PropTypes.number,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string,\n  }),\n};\n\nexport default withStyles(styles)(MarkLabel);\n"],"file":"mark-label.js"}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "5.7.3-next.17+6704cda1",
+  "version": "5.8.0",
   "description": "charting",
   "keywords": [
     "react",
@@ -43,5 +43,5 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "6704cda1fabe2c1348a875a2dc08e2b28d77ccf3"
+  "gitHead": "a00b9625c0f269a7a7bf8ff14f3f771402d45c5e"
 }

package/src/mark-label.jsx

@@ -1,11 +1,12 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import cn from 'classnames';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 import AutosizeInput from 'react-input-autosize';
 import PropTypes from 'prop-types';
 import { types } from '@pie-lib/plot';
 import { correct, incorrect, disabled } from './common/styles';
 import { color } from '@pie-lib/render-ui';
+import { renderMath } from '@pie-lib/math-rendering';
 
 const styles = (theme) => ({
   input: {
@@ -22,8 +23,56 @@ const styles = (theme) => ({
       backgroundColor: 'transparent !important',
     },
   },
+  mathInput: {
+    pointerEvents: 'auto',
+    textAlign: 'center',
+    fontSize: theme.typography.fontSize,
+    fontFamily: theme.typography.fontFamily,
+    color: color.primaryDark(),
+  },
+  disabled: {
+    ...disabled('color'),
+    backgroundColor: 'transparent !important',
+  },
+  error: {
+    border: `2px solid ${theme.palette.error.main}`,
+  },
+  correct: {
+    ...correct('color'),
+  },
+  incorrect: {
+    ...incorrect('color'),
+  },
 });
 
+function isFractionFormat(label) {
+  const trimmedLabel = label?.trim() || '';
+  const fracRegex = new RegExp(/^[1-9]*[0-9]*\s?[1-9][0-9]*\/[1-9][0-9]*$/);
+  return fracRegex.test(trimmedLabel);
+}
+
+function getLabelMathFormat(label) {
+  const trimmedLabel = label?.trim() || '';
+  let fraction;
+  let mixedNr = '';
+  let improperFraction = trimmedLabel.split(' ');
+  if (improperFraction[1] && improperFraction[1].includes('/')) {
+    fraction = improperFraction[1].split('/') || '';
+  } else {
+    fraction = trimmedLabel?.split('/') || '';
+  }
+
+  let formattedLLabel;
+  if (isFractionFormat(label)) {
+    if (improperFraction[0] && improperFraction[1]) {
+      mixedNr = improperFraction[0];
+    }
+    formattedLLabel = `\\(${mixedNr}\\frac{${fraction[0]}}{${fraction[1]}}\\)`;
+    return formattedLLabel;
+  }
+  return undefined;
+}
+
 export const MarkLabel = (props) => {
   // eslint-disable-next-line no-unused-vars
   const [input, setInput] = useState(null);
@@ -40,9 +89,25 @@ export const MarkLabel = (props) => {
     autoFocus,
     error,
   } = props;
+
   const [label, setLabel] = useState(mark.label);
-  const onChange = (e) => setLabel(e.target.value);
-  const onChangeProp = (e) => props.onChange(e.target.value);
+  const [mathLabel, setMathLabel] = useState(getLabelMathFormat(mark.label));
+  const [isEditing, setIsEditing] = useState(false);
+  let root = useRef(null);
+
+  const onChange = (e) => {
+    setLabel(e.target.value);
+  };
+
+  const isMathRendering = () => {
+    return isEditing === false && mathLabel !== undefined;
+  };
+
+  const onChangeProp = (e) => {
+    setMathLabel(getLabelMathFormat(mark.label));
+    setIsEditing(false);
+    props.onChange(e.target.value);
+  };
   let extraStyle = {};
 
   if (rotate) {
@@ -57,15 +122,37 @@ export const MarkLabel = (props) => {
     setLabel(mark.label);
   }, [mark.label]);
 
-  return (
+  useEffect(() => {
+    renderMath(root);
+  }, []);
+
+  return isMathRendering() ? (
+    <div
+      ref={(r) => (root = r)}
+      dangerouslySetInnerHTML={{ __html: getLabelMathFormat(label) }}
+      className={classNames(classes.mathInput, {
+        [classes.disabled]: disabled,
+        [classes.error]: error,
+        [classes.correct]: correctness && correctness.label === 'correct',
+        [classes.incorrect]: correctness && correctness.label === 'incorrect',
+      })}
+      onClick={() => setIsEditing(true)}
+      style={{ minWidth: barWidth }}
+    ></div>
+  ) : (
     <AutosizeInput
-      autoFocus={autoFocus}
       inputRef={(r) => {
         _ref(r);
         externalInputRef(r);
       }}
+      autoFocus={isEditing || autoFocus}
       disabled={disabled}
-      inputClassName={cn(classes.input, correctness && correctness.label, disabled && 'disabled', error && 'error')}
+      inputClassName={classNames(
+        classes.input,
+        correctness && correctness.label,
+        disabled && 'disabled',
+        error && 'error',
+      )}
       inputStyle={{
         minWidth: barWidth,
         textAlign: 'center',