@pie-lib/charting 7.0.4-next.30 → 7.0.4-next.34

package/lib/axes.js

@@ -0,0 +1,643 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.TickComponent = exports.RawChartAxes = 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 _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 _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _axis = require("@visx/axis");
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _plot = require("@pie-lib/plot");
+var _renderUi = require("@pie-lib/render-ui");
+var _configUi = require("@pie-lib/config-ui");
+var _mathRendering = require("@pie-lib/math-rendering");
+var _correctnessIndicators = require("./common/correctness-indicators");
+var _utils = require("./utils");
+var _markLabel = _interopRequireDefault(require("./mark-label"));
+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; })(); }
+// one document-level MutationObserver shared across all
+// RawChartAxes instances so that no chart misses a MathJax render batch
+var _mathCallbacks = new Set();
+var _docObserver = null;
+function registerMathCallback(cb) {
+  _mathCallbacks.add(cb);
+  if (!_docObserver && typeof document !== 'undefined') {
+    _docObserver = new MutationObserver(function () {
+      _mathCallbacks.forEach(function (fn) {
+        return fn();
+      });
+    });
+    _docObserver.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+  }
+}
+function unregisterMathCallback(cb) {
+  _mathCallbacks["delete"](cb);
+  if (_mathCallbacks.size === 0 && _docObserver) {
+    _docObserver.disconnect();
+    _docObserver = null;
+  }
+}
+var StyledErrorText = (0, _styles.styled)('text')(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontSize: theme.typography.fontSize - 2,
+    fill: theme.palette.error.main
+  };
+});
+var StyledCheckbox = (0, _styles.styled)(_Checkbox["default"])(function () {
+  return {
+    color: "".concat(_renderUi.color.tertiary(), " !important")
+  };
+});
+var StyledAxesGroup = (0, _styles.styled)('g')(function (_ref2) {
+  var _theme$typography$bod;
+  var theme = _ref2.theme;
+  return {
+    '& .vx-axis-line': {
+      stroke: _renderUi.color.visualElementsColors.AXIS_LINE_COLOR,
+      strokeWidth: 2
+    },
+    '& .vx-axis-tick': {
+      fill: _renderUi.color.visualElementsColors.AXIS_TICK_COLOR,
+      '& line': {
+        stroke: _renderUi.color.visualElementsColors.AXIS_TICK_COLOR,
+        strokeWidth: 2
+      },
+      fontFamily: (_theme$typography$bod = theme.typography.body1) === null || _theme$typography$bod === void 0 ? void 0 : _theme$typography$bod.fontFamily,
+      fontSize: theme.typography.fontSize,
+      textAnchor: 'middle'
+    }
+  };
+});
+var correctnessIconStyles = function correctnessIconStyles(theme) {
+  return {
+    borderRadius: theme.spacing(2),
+    color: _renderUi.color.defaults.WHITE,
+    fontSize: '16px',
+    width: '16px',
+    height: '16px',
+    padding: '2px',
+    border: "1px solid ".concat(_renderUi.color.defaults.WHITE),
+    boxSizing: 'unset' // to override the default border-box in IBX
+  };
+};
+var incorrectIconStyles = {
+  backgroundColor: _renderUi.color.incorrectWithIcon()
+};
+var correctIconStyles = {
+  backgroundColor: _renderUi.color.correct()
+};
+var TickComponent = exports.TickComponent = /*#__PURE__*/function (_React$Component) {
+  function TickComponent(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, TickComponent);
+    _this = _callSuper(this, TickComponent, [props]);
+    (0, _defineProperty2["default"])(_this, "handleAlertDialog", function (open, callback) {
+      return _this.setState({
+        dialog: {
+          open: open
+        }
+      }, callback);
+    });
+    (0, _defineProperty2["default"])(_this, "changeCategory", function (index, newLabel) {
+      var _this$props = _this.props,
+        categories = _this$props.categories,
+        onChangeCategory = _this$props.onChangeCategory;
+      var category = categories[index];
+      onChangeCategory(index, _objectSpread(_objectSpread({}, category), {}, {
+        label: newLabel
+      }));
+    });
+    (0, _defineProperty2["default"])(_this, "changeInteractive", function (index, value) {
+      var _this$props2 = _this.props,
+        categories = _this$props2.categories,
+        onChangeCategory = _this$props2.onChangeCategory;
+      var category = categories[index];
+      if (!value) {
+        _this.setState({
+          dialog: {
+            open: true,
+            title: 'Warning',
+            text: 'This will remove the correct answer value that has been defined for this category.',
+            onConfirm: function onConfirm() {
+              return _this.handleAlertDialog(false, onChangeCategory(index, _objectSpread(_objectSpread({}, category), {}, {
+                interactive: !category.interactive
+              })));
+            },
+            onClose: function onClose() {
+              return _this.handleAlertDialog(false);
+            }
+          }
+        });
+      } else {
+        onChangeCategory(index, _objectSpread(_objectSpread({}, category), {}, {
+          interactive: !category.interactive
+        }));
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "changeEditable", function (index, value) {
+      var _this$props3 = _this.props,
+        categories = _this$props3.categories,
+        onChangeCategory = _this$props3.onChangeCategory;
+      var category = categories[index];
+      if (!value) {
+        _this.setState({
+          dialog: {
+            open: true,
+            title: 'Warning',
+            text: 'This will remove the correct answer category name that has been defined for this category.',
+            onConfirm: function onConfirm() {
+              return _this.handleAlertDialog(false, onChangeCategory(index, _objectSpread(_objectSpread({}, category), {}, {
+                editable: !category.editable || false
+              })));
+            },
+            onClose: function onClose() {
+              return _this.handleAlertDialog(false);
+            }
+          }
+        });
+      } else {
+        onChangeCategory(index, _objectSpread(_objectSpread({}, category), {}, {
+          editable: !category.editable || false
+        }));
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "splitText", function (text, maxChar) {
+      var chunks = [];
+      while ((text || '').length > 0) {
+        var indexToSplit = void 0;
+        if (text.length > maxChar) {
+          indexToSplit = text.lastIndexOf(' ', maxChar);
+          if (indexToSplit === -1) {
+            indexToSplit = maxChar;
+          }
+        } else {
+          indexToSplit = text.length;
+        }
+        chunks.push(text.substring(0, indexToSplit));
+        text = text.substring(indexToSplit).trim();
+      }
+      return chunks;
+    });
+    _this.state = {
+      dialog: {
+        open: false
+      }
+    };
+    return _this;
+  }
+  (0, _inherits2["default"])(TickComponent, _React$Component);
+  return (0, _createClass2["default"])(TickComponent, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.autoFocus && !prevProps.autoFocus) {
+        this.props.onAutoFocusUsed();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props4 = this.props,
+        categories = _this$props4.categories,
+        xBand = _this$props4.xBand,
+        bandWidth = _this$props4.bandWidth,
+        barWidth = _this$props4.barWidth,
+        rotate = _this$props4.rotate,
+        top = _this$props4.top,
+        graphProps = _this$props4.graphProps,
+        defineChart = _this$props4.defineChart,
+        chartingOptions = _this$props4.chartingOptions,
+        x = _this$props4.x,
+        y = _this$props4.y,
+        formattedValue = _this$props4.formattedValue,
+        changeInteractiveEnabled = _this$props4.changeInteractiveEnabled,
+        changeEditableEnabled = _this$props4.changeEditableEnabled,
+        error = _this$props4.error,
+        autoFocus = _this$props4.autoFocus,
+        hiddenLabelRef = _this$props4.hiddenLabelRef,
+        showCorrectness = _this$props4.showCorrectness;
+      if (!formattedValue) {
+        return null;
+      }
+
+      // Create classes object for TickCorrectnessIndicator compatibility
+      var classes = {
+        correctnessIcon: correctnessIconStyles,
+        incorrectIcon: incorrectIconStyles,
+        correctIcon: correctIconStyles
+      };
+      var dialog = this.state.dialog;
+      var _ref3 = chartingOptions || {},
+        changeEditable = _ref3.changeEditable,
+        changeInteractive = _ref3.changeInteractive;
+      var index = parseInt(formattedValue.split('-')[0], 10);
+      var category = categories[index];
+      var _ref4 = category || {},
+        editable = _ref4.editable,
+        interactive = _ref4.interactive,
+        label = _ref4.label,
+        correctness = _ref4.correctness;
+      var barX = xBand((0, _utils.bandKey)({
+        label: label
+      }, index));
+      var longestCategory = (categories || []).reduce(function (a, b) {
+        var lengthA = a && a.label ? a.label.length : 0;
+        var lengthB = b && b.label ? b.label.length : 0;
+        return lengthA > lengthB ? a : b;
+      }, {
+        label: ''
+      });
+      var distinctMessages = error ? (0, _toConsumableArray2["default"])(new Set(Object.values(error))).join(' ') : '';
+      return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("foreignObject", {
+        x: bandWidth ? barX : x - barWidth / 2,
+        y: 18,
+        width: barWidth,
+        height: 4,
+        style: {
+          pointerEvents: 'none',
+          overflow: 'visible'
+        }
+      }, index === 0 && /*#__PURE__*/_react["default"].createElement(_markLabel["default"], {
+        isHiddenLabel: true,
+        inputRef: hiddenLabelRef,
+        disabled: true,
+        mark: longestCategory,
+        graphProps: graphProps,
+        barWidth: barWidth
+      }), /*#__PURE__*/_react["default"].createElement(_markLabel["default"], {
+        autoFocus: defineChart && autoFocus,
+        inputRef: function inputRef(r) {
+          return _this2.input = r;
+        },
+        disabled: !defineChart && !editable,
+        mark: category,
+        graphProps: graphProps,
+        onChange: function onChange(newLabel) {
+          return _this2.changeCategory(index, newLabel);
+        },
+        barWidth: barWidth,
+        rotate: rotate,
+        correctness: correctness,
+        error: error && error[index],
+        limitCharacters: true,
+        correctnessIndicator: showCorrectness && correctness && /*#__PURE__*/_react["default"].createElement(_correctnessIndicators.TickCorrectnessIndicator, {
+          correctness: correctness,
+          interactive: interactive,
+          classes: classes
+        })
+      })), error && index === 0 && /*#__PURE__*/_react["default"].createElement(StyledErrorText, {
+        y: y + 23,
+        height: 6,
+        textAnchor: "start"
+      }, distinctMessages), defineChart && index === 0 && /*#__PURE__*/_react["default"].createElement("svg", {
+        x: -55,
+        style: {
+          overflow: 'visible'
+        }
+      }, changeInteractiveEnabled && /*#__PURE__*/_react["default"].createElement("text", {
+        y: y + 90 + top,
+        width: barWidth,
+        height: 4,
+        style: {
+          position: 'absolute',
+          pointerEvents: 'none',
+          wordBreak: 'break-word',
+          maxWidth: barWidth,
+          display: 'inline-block'
+        }
+      }, this.splitText(changeInteractive === null || changeInteractive === void 0 ? void 0 : changeInteractive.authoringLabel, 20).map(function (word, index) {
+        return /*#__PURE__*/_react["default"].createElement("tspan", {
+          key: index,
+          x: "0",
+          dy: "".concat(index > 0 ? '1.2em' : '.6em')
+        }, word);
+      })), changeEditableEnabled && /*#__PURE__*/_react["default"].createElement("text", {
+        y: y + 145 + top,
+        width: barWidth,
+        height: 4,
+        style: {
+          position: 'absolute',
+          pointerEvents: 'none',
+          wordBreak: 'break-word',
+          maxWidth: barWidth,
+          display: 'inline-block'
+        }
+      }, this.splitText(changeEditable === null || changeEditable === void 0 ? void 0 : changeEditable.authoringLabel, 20).map(function (word, index) {
+        return /*#__PURE__*/_react["default"].createElement("tspan", {
+          key: index,
+          x: "0",
+          dy: "".concat(index > 0 ? '1.2em' : '.6em')
+        }, word);
+      }))), defineChart && changeInteractiveEnabled && /*#__PURE__*/_react["default"].createElement("foreignObject", {
+        x: x - 24,
+        y: y + 80 + top,
+        width: barWidth,
+        height: 4,
+        style: {
+          pointerEvents: 'visible',
+          overflow: 'visible'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(StyledCheckbox, {
+        style: {
+          position: 'fixed'
+        },
+        checked: interactive,
+        onChange: function onChange(e) {
+          return _this2.changeInteractive(index, e.target.checked);
+        }
+      })), defineChart && changeEditableEnabled && /*#__PURE__*/_react["default"].createElement("foreignObject", {
+        x: x - 24,
+        y: y + 130 + top,
+        width: barWidth,
+        height: 4,
+        style: {
+          pointerEvents: 'visible',
+          overflow: 'visible'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(StyledCheckbox, {
+        style: {
+          position: 'fixed'
+        },
+        checked: editable,
+        onChange: function onChange(e) {
+          return _this2.changeEditable(index, e.target.checked);
+        }
+      })), /*#__PURE__*/_react["default"].createElement("foreignObject", {
+        x: x - 24,
+        y: y + 100 + top,
+        width: barWidth,
+        height: 4,
+        style: {
+          pointerEvents: 'visible',
+          overflow: 'visible'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
+        open: dialog.open,
+        title: dialog.title,
+        text: dialog.text,
+        onClose: dialog.onClose,
+        onConfirm: dialog.onConfirm
+      })));
+    }
+  }]);
+}(_react["default"].Component);
+(0, _defineProperty2["default"])(TickComponent, "propTypes", {
+  defineChart: _propTypes["default"].bool,
+  error: _propTypes["default"].any
+});
+TickComponent.propTypes = {
+  categories: _propTypes["default"].array,
+  xBand: _propTypes["default"].func,
+  bandWidth: _propTypes["default"].number,
+  barWidth: _propTypes["default"].number,
+  rotate: _propTypes["default"].number,
+  top: _propTypes["default"].number,
+  x: _propTypes["default"].number,
+  y: _propTypes["default"].number,
+  graphProps: _propTypes["default"].object,
+  formattedValue: _propTypes["default"].string,
+  onChangeCategory: _propTypes["default"].func,
+  onChange: _propTypes["default"].func,
+  error: _propTypes["default"].object,
+  defineChart: _propTypes["default"].bool,
+  chartingOptions: _propTypes["default"].object,
+  changeInteractiveEnabled: _propTypes["default"].bool,
+  changeEditableEnabled: _propTypes["default"].bool,
+  autoFocus: _propTypes["default"].bool,
+  onAutoFocusUsed: _propTypes["default"].func,
+  showCorrectness: _propTypes["default"].bool,
+  hiddenLabelRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].shape({
+    current: _propTypes["default"].instanceOf(Element)
+  })])
+};
+var RawChartAxes = exports.RawChartAxes = /*#__PURE__*/function (_React$Component2) {
+  function RawChartAxes() {
+    var _this3;
+    (0, _classCallCheck2["default"])(this, RawChartAxes);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this3 = _callSuper(this, RawChartAxes, [].concat(args));
+    (0, _defineProperty2["default"])(_this3, "state", {
+      height: 0,
+      width: 0
+    });
+    (0, _defineProperty2["default"])(_this3, "measureHiddenLabel", function () {
+      if (!_this3.hiddenLabelRef) return;
+      var mjx = _this3.hiddenLabelRef.querySelector('mjx-container');
+      var input = _this3.hiddenLabelRef.querySelector('input');
+      var target = mjx || input || _this3.hiddenLabelRef;
+      var rect = target.getBoundingClientRect();
+      var height = Math.floor(rect.height);
+      var width = Math.floor(rect.width);
+      if (height !== _this3.state.height || width !== _this3.state.width) {
+        _this3.setState({
+          height: height,
+          width: width
+        });
+      }
+    });
+    // called by the document-level observer on every DOM mutation.
+    // only re-measures once mjx-container is present in our hidden label.
+    (0, _defineProperty2["default"])(_this3, "_onDocMutation", function () {
+      if (!_this3.hiddenLabelRef) return;
+      if (_this3.hiddenLabelRef.querySelector('mjx-container')) {
+        _this3.measureHiddenLabel();
+      }
+    });
+    (0, _defineProperty2["default"])(_this3, "observeHiddenLabel", function (el) {
+      if (!el) return;
+      var containsLatex = el.querySelector('[data-latex], [data-raw]');
+      if (containsLatex) {
+        (0, _mathRendering.renderMath)(el);
+      }
+      if (el.querySelector('mjx-container') || !containsLatex) {
+        _this3.measureHiddenLabel();
+      }
+      // always register: if mjx-container isn't there yet, the doc observer will
+      // call _onDocMutation when MathJax finishes rendering any element on the page.
+      registerMathCallback(_this3._onDocMutation);
+    });
+    (0, _defineProperty2["default"])(_this3, "setHiddenLabelRef", function (ref) {
+      if (ref && ref !== _this3.hiddenLabelRef) {
+        _this3.hiddenLabelRef = ref;
+        _this3.observeHiddenLabel(ref);
+      }
+    });
+    return _this3;
+  }
+  (0, _inherits2["default"])(RawChartAxes, _React$Component2);
+  return (0, _createClass2["default"])(RawChartAxes, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.hiddenLabelRef) {
+        this.observeHiddenLabel(this.hiddenLabelRef);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      unregisterMathCallback(this._onDocMutation);
+      if (this._updateTimer) {
+        clearTimeout(this._updateTimer);
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this4 = this;
+      if (prevProps.categories !== this.props.categories) {
+        if (this._updateTimer) clearTimeout(this._updateTimer);
+        this._updateTimer = setTimeout(function () {
+          return _this4.measureHiddenLabel();
+        }, 50);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this5 = this;
+      var _this$props5 = this.props,
+        graphProps = _this$props5.graphProps,
+        xBand = _this$props5.xBand,
+        leftAxis = _this$props5.leftAxis,
+        onChange = _this$props5.onChange,
+        onChangeCategory = _this$props5.onChangeCategory,
+        _this$props5$categori = _this$props5.categories,
+        categories = _this$props5$categori === void 0 ? [] : _this$props5$categori,
+        top = _this$props5.top,
+        defineChart = _this$props5.defineChart,
+        chartingOptions = _this$props5.chartingOptions,
+        changeInteractiveEnabled = _this$props5.changeInteractiveEnabled,
+        changeEditableEnabled = _this$props5.changeEditableEnabled,
+        theme = _this$props5.theme,
+        autoFocus = _this$props5.autoFocus,
+        onAutoFocusUsed = _this$props5.onAutoFocusUsed,
+        error = _this$props5.error,
+        showCorrectness = _this$props5.showCorrectness;
+      var _ref5 = graphProps || {},
+        _ref5$scale = _ref5.scale,
+        scale = _ref5$scale === void 0 ? {} : _ref5$scale,
+        _ref5$range = _ref5.range,
+        range = _ref5$range === void 0 ? {} : _ref5$range,
+        _ref5$domain = _ref5.domain,
+        domain = _ref5$domain === void 0 ? {} : _ref5$domain,
+        _ref5$size = _ref5.size,
+        size = _ref5$size === void 0 ? {} : _ref5$size;
+      var _this$state = this.state,
+        height = _this$state.height,
+        width = _this$state.width;
+      var bottomScale = xBand && typeof xBand.rangeRound === 'function' && xBand.rangeRound([0, size.width]);
+      var bandWidth = xBand && typeof xBand.bandwidth === 'function' && xBand.bandwidth();
+      // for chartType "line", bandWidth will be 0, so we have to calculate it
+      var barWidth = bandWidth || scale.x && scale.x(domain.max) / categories.length;
+      var rowTickValues = (0, _utils.getTickValues)(_objectSpread(_objectSpread({}, range), {}, {
+        step: range.labelStep
+      }));
+      var fontSize = theme && theme.typography ? theme.typography.fontSize : 14;
+      // this mostly applies for labels that are not editable
+      var rotateBecauseOfHeight = (0, _utils.getRotateAngle)(fontSize, height);
+      // this applies for labels that are editable
+      var rotateBecauseOfWidth = width > barWidth ? 25 : 0;
+      var getTickLabelProps = function getTickLabelProps(value) {
+        return {
+          dy: 4,
+          dx: -10 - (value.toLocaleString().length || 1) * 5
+        };
+      };
+      var getTickComponent = function getTickComponent(props) {
+        var properties = {
+          hiddenLabelRef: _this5.setHiddenLabelRef,
+          categories: categories,
+          xBand: xBand,
+          bandWidth: bandWidth,
+          barWidth: barWidth,
+          rotate: rotateBecauseOfHeight || rotateBecauseOfWidth,
+          top: top,
+          defineChart: defineChart,
+          chartingOptions: chartingOptions,
+          autoFocus: autoFocus,
+          onAutoFocusUsed: onAutoFocusUsed,
+          error: error,
+          onChangeCategory: onChangeCategory,
+          changeInteractiveEnabled: changeInteractiveEnabled,
+          changeEditableEnabled: changeEditableEnabled,
+          onChange: onChange,
+          graphProps: graphProps,
+          x: props.x,
+          y: props.y,
+          formattedValue: props.formattedValue,
+          showCorrectness: showCorrectness
+        };
+        return /*#__PURE__*/_react["default"].createElement(TickComponent, properties);
+      };
+      return /*#__PURE__*/_react["default"].createElement(StyledAxesGroup, null, leftAxis && /*#__PURE__*/_react["default"].createElement(_axis.AxisLeft, {
+        scale: scale.y,
+        tickLength: 10,
+        tickFormat: function tickFormat(value) {
+          return value;
+        },
+        tickValues: rowTickValues,
+        tickLabelProps: getTickLabelProps
+      }), /*#__PURE__*/_react["default"].createElement(_axis.AxisBottom, {
+        scale: bottomScale,
+        labelProps: {
+          y: 60 + top
+        },
+        top: scale.y && scale.y(range.min),
+        textLabelProps: function textLabelProps() {
+          return {
+            textAnchor: 'middle'
+          };
+        },
+        tickFormat: function tickFormat(count) {
+          return count;
+        },
+        tickComponent: getTickComponent,
+        autoFocus: autoFocus,
+        onAutoFocusUsed: onAutoFocusUsed
+      }));
+    }
+  }]);
+}(_react["default"].Component);
+(0, _defineProperty2["default"])(RawChartAxes, "propTypes", {
+  bottomScale: _propTypes["default"].func,
+  categories: _propTypes["default"].array,
+  defineChart: _propTypes["default"].bool,
+  error: _propTypes["default"].any,
+  graphProps: _plot.types.GraphPropsType.isRequired,
+  xBand: _propTypes["default"].func,
+  leftAxis: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func,
+  onChangeCategory: _propTypes["default"].func,
+  top: _propTypes["default"].number,
+  theme: _propTypes["default"].object,
+  chartingOptions: _propTypes["default"].object,
+  changeInteractiveEnabled: _propTypes["default"].bool,
+  changeEditableEnabled: _propTypes["default"].bool,
+  autoFocus: _propTypes["default"].bool,
+  onAutoFocusUsed: _propTypes["default"].func,
+  showCorrectness: _propTypes["default"].bool,
+  hiddenLabelRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].shape({
+    current: _propTypes["default"].instanceOf(Element)
+  })])
+});
+var _default = exports["default"] = RawChartAxes;
+//# sourceMappingURL=axes.js.map