@pie-lib/charting 6.1.0-next.2 → 6.1.0-next.25

package/lib/mark-label.js

@@ -0,0 +1,257 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.MarkLabel = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.regexp.constructor.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.to-string.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.string.trim.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _styles = require("@mui/material/styles");
+var _reactInputAutosize = _interopRequireDefault(require("react-input-autosize"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _plot = require("@pie-lib/plot");
+var _styles2 = require("./common/styles");
+var _renderUi = require("@pie-lib/render-ui");
+var _mathRendering = require("@pie-lib/math-rendering");
+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 StyledContainer = (0, _styles.styled)('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center'
+});
+
+// eslint-disable-next-line no-unused-vars
+var StyledInput = (0, _styles.styled)('input')(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    "float": 'right',
+    fontFamily: theme.typography.fontFamily,
+    fontSize: theme.typography.fontSize,
+    border: 'none',
+    '&.correct': (0, _styles2.correct)('color'),
+    '&.incorrect': (0, _styles2.incorrect)('color'),
+    '&.disabled': {
+      backgroundColor: 'transparent !important'
+    },
+    '&.error': {
+      border: "2px solid ".concat(theme.palette.error.main)
+    }
+  };
+});
+var StyledMathInput = (0, _styles.styled)('div')(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    pointerEvents: 'auto',
+    textAlign: 'center',
+    fontSize: theme.typography.fontSize + 2,
+    fontFamily: theme.typography.fontFamily,
+    color: _renderUi.color.primaryDark(),
+    paddingTop: theme.typography.fontSize / 2,
+    '&.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 = exports.MarkLabel = function MarkLabel(props) {
+  // eslint-disable-next-line no-unused-vars
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    input = _useState2[0],
+    setInput = _useState2[1];
+  var _ref = (0, _react.useCallback)(function (node) {
+    return setInput(node);
+  }, null);
+  var _props$mark = props.mark,
+    mark = _props$mark === void 0 ? {} : _props$mark,
+    disabled = props.disabled,
+    externalInputRef = props.inputRef,
+    barWidth = props.barWidth,
+    rotate = props.rotate,
+    correctness = props.correctness,
+    autoFocus = props.autoFocus,
+    error = props.error,
+    isHiddenLabel = props.isHiddenLabel,
+    limitCharacters = props.limitCharacters,
+    correctnessIndicator = props.correctnessIndicator;
+  var _useState3 = (0, _react.useState)(mark.label),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    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) {
+    if (limitCharacters && e.target.value && e.target.value.length > 20) {
+      return;
+    }
+    setLabel(e.target.value);
+  };
+  var isMathRendering = function isMathRendering() {
+    return isEditing === false && mathLabel !== undefined;
+  };
+  var onChangeProp = function onChangeProp(e) {
+    setMathLabel(getLabelMathFormat(mark.label));
+    setIsEditing(false);
+    props.onChange(e.target.value);
+  };
+  var extraStyle = {};
+  if (rotate) {
+    extraStyle = {
+      width: 'unset',
+      textAlign: 'left'
+    };
+  }
+
+  // useState only sets the value once, to synch props to state need useEffect
+  (0, _react.useEffect)(function () {
+    setLabel(mark.label);
+  }, [mark.label]);
+  (0, _react.useEffect)(function () {
+    (0, _mathRendering.renderMath)(root);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(StyledContainer, null, correctnessIndicator, isMathRendering() ? /*#__PURE__*/_react["default"].createElement(StyledMathInput, {
+    ref: function ref(r) {
+      root = r;
+      if (typeof externalInputRef === 'function') {
+        externalInputRef(r);
+      }
+    },
+    dangerouslySetInnerHTML: {
+      __html: getLabelMathFormat(label)
+    },
+    className: (0, _classnames["default"])({
+      disabled: disabled,
+      error: error,
+      correct: mark.editable && (correctness === null || correctness === void 0 ? void 0 : correctness.label) === 'correct',
+      incorrect: mark.editable && (correctness === null || correctness === void 0 ? void 0 : correctness.label) === 'incorrect'
+    }),
+    onClick: function onClick() {
+      return setIsEditing(true);
+    },
+    style: {
+      minWidth: barWidth,
+      position: 'fixed',
+      transformOrigin: 'left',
+      transform: "rotate(".concat(rotate, "deg)"),
+      visibility: isHiddenLabel ? 'hidden' : 'unset',
+      marginTop: correctnessIndicator ? '24px' : '0'
+    }
+  }) : /*#__PURE__*/_react["default"].createElement(_reactInputAutosize["default"], {
+    inputRef: function inputRef(r) {
+      _ref(r);
+      if (typeof externalInputRef === 'function') {
+        externalInputRef(r);
+      }
+    },
+    name: "mark-label-input",
+    autoFocus: isEditing || autoFocus,
+    disabled: disabled,
+    inputClassName: (0, _classnames["default"])(correctness && mark.editable ? correctness.label : null, disabled && 'disabled', error && 'error'),
+    inputStyle: _objectSpread({
+      minWidth: barWidth,
+      textAlign: 'center',
+      background: 'transparent',
+      boxSizing: 'border-box',
+      paddingLeft: 0,
+      paddingRight: 0,
+      border: 'none'
+    }, extraStyle),
+    value: label,
+    style: {
+      position: 'fixed',
+      pointerEvents: 'auto',
+      top: 0,
+      left: 0,
+      minWidth: barWidth,
+      transformOrigin: 'left',
+      transform: "rotate(".concat(rotate, "deg)"),
+      visibility: isHiddenLabel ? 'hidden' : 'unset',
+      marginTop: correctnessIndicator ? '24px' : '0'
+    },
+    onChange: onChange,
+    onBlur: onChangeProp
+  }));
+};
+MarkLabel.propTypes = {
+  autoFocus: _propTypes["default"].bool,
+  disabled: _propTypes["default"].bool,
+  error: _propTypes["default"].any,
+  onChange: _propTypes["default"].func,
+  graphProps: _plot.types.GraphPropsType,
+  inputRef: _propTypes["default"].func,
+  mark: _propTypes["default"].object,
+  barWidth: _propTypes["default"].number,
+  rotate: _propTypes["default"].number,
+  correctness: _propTypes["default"].shape({
+    value: _propTypes["default"].string,
+    label: _propTypes["default"].string
+  }),
+  isHiddenLabel: _propTypes["default"].bool,
+  limitCharacters: _propTypes["default"].bool,
+  correctnessIndicator: _propTypes["default"].node
+};
+var _default = exports["default"] = MarkLabel;
+//# sourceMappingURL=mark-label.js.map

package/lib/mark-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mark-label.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_styles","_reactInputAutosize","_propTypes","_plot","_styles2","_renderUi","_mathRendering","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","StyledContainer","styled","display","flexDirection","alignItems","StyledInput","_ref2","theme","fontFamily","typography","fontSize","border","correct","incorrect","backgroundColor","concat","palette","error","main","StyledMathInput","_ref3","pointerEvents","textAlign","color","primaryDark","paddingTop","disabled","isFractionFormat","label","trimmedLabel","trim","fracRegex","RegExp","test","getLabelMathFormat","fraction","mixedNr","improperFraction","split","includes","formattedLLabel","undefined","MarkLabel","exports","props","_useState","useState","_useState2","_slicedToArray2","input","setInput","_ref","useCallback","node","_props$mark","mark","externalInputRef","inputRef","barWidth","rotate","correctness","autoFocus","isHiddenLabel","limitCharacters","correctnessIndicator","_useState3","_useState4","setLabel","_useState5","_useState6","mathLabel","setMathLabel","_useState7","_useState8","isEditing","setIsEditing","root","useRef","onChange","target","value","isMathRendering","onChangeProp","extraStyle","width","useEffect","renderMath","createElement","ref","dangerouslySetInnerHTML","__html","className","classNames","editable","onClick","style","minWidth","position","transformOrigin","transform","visibility","marginTop","name","inputClassName","inputStyle","background","boxSizing","paddingLeft","paddingRight","top","left","onBlur","propTypes","PropTypes","bool","any","func","graphProps","types","GraphPropsType","object","number","shape","string","_default"],"sources":["../src/mark-label.jsx"],"sourcesContent":["import React, { useState, useCallback, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport { styled } from '@mui/material/styles';\nimport AutosizeInput from 'react-input-autosize';\nimport PropTypes from 'prop-types';\n\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 StyledContainer = styled('div')({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n});\n\n// eslint-disable-next-line no-unused-vars\nconst StyledInput = styled('input')(({ theme }) => ({\n  float: 'right',\n  fontFamily: theme.typography.fontFamily,\n  fontSize: theme.typography.fontSize,\n  border: 'none',\n  '&.correct': correct('color'),\n  '&.incorrect': incorrect('color'),\n  '&.disabled': {\n    backgroundColor: 'transparent !important',\n  },\n  '&.error': { border: `2px solid ${theme.palette.error.main}` },\n}));\n\nconst StyledMathInput = styled('div')(({ theme }) => ({\n  pointerEvents: 'auto',\n  textAlign: 'center',\n  fontSize: theme.typography.fontSize + 2,\n  fontFamily: theme.typography.fontFamily,\n  color: color.primaryDark(),\n  paddingTop: theme.typography.fontSize / 2,\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    disabled,\n    inputRef: externalInputRef,\n    barWidth,\n    rotate,\n    correctness,\n    autoFocus,\n    error,\n    isHiddenLabel,\n    limitCharacters,\n    correctnessIndicator,\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    if (limitCharacters && e.target.value && e.target.value.length > 20) {\n      return;\n    }\n\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 (\n    <StyledContainer>\n      {correctnessIndicator}\n      {isMathRendering() ? (\n        <StyledMathInput\n          ref={(r) => {\n            root = r;\n            if (typeof externalInputRef === 'function') {\n              externalInputRef(r);\n            }\n          }}\n          dangerouslySetInnerHTML={{ __html: getLabelMathFormat(label) }}\n          className={classNames({\n            disabled: disabled,\n            error: error,\n            correct: mark.editable && correctness?.label === 'correct',\n            incorrect: mark.editable && correctness?.label === 'incorrect',\n          })}\n          onClick={() => setIsEditing(true)}\n          style={{\n            minWidth: barWidth,\n            position: 'fixed',\n            transformOrigin: 'left',\n            transform: `rotate(${rotate}deg)`,\n            visibility: isHiddenLabel ? 'hidden' : 'unset',\n            marginTop: correctnessIndicator ? '24px' : '0',\n          }}\n        ></StyledMathInput>\n      ) : (\n        <AutosizeInput\n          inputRef={(r) => {\n            _ref(r);\n            if (typeof externalInputRef === 'function') {\n              externalInputRef(r);\n            }\n          }}\n          name='mark-label-input'\n          autoFocus={isEditing || autoFocus}\n          disabled={disabled}\n          inputClassName={classNames(\n            correctness && mark.editable ? correctness.label : null,\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            border: 'none',\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            visibility: isHiddenLabel ? 'hidden' : 'unset',\n            marginTop: correctnessIndicator ? '24px' : '0',\n          }}\n          onChange={onChange}\n          onBlur={onChangeProp}\n        />\n      )}\n    </StyledContainer>\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  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  isHiddenLabel: PropTypes.bool,\n  limitCharacters: PropTypes.bool,\n  correctnessIndicator: PropTypes.node,\n};\n\nexport default MarkLabel;\n"],"mappings":"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","ignoreList":[]}

package/lib/plot/common/plot.js

@@ -0,0 +1,361 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.reflect.construct.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.RawPlot = exports.Plot = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.number.is-finite.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.parse-float.js");
+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 _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
+var _styles = require("@mui/material/styles");
+var _group = require("@visx/group");
+var _debug = _interopRequireDefault(require("debug"));
+var _plot = require("@pie-lib/plot");
+var _dragHandle = _interopRequireWildcard(require("../../common/drag-handle"));
+var _renderUi = require("@pie-lib/render-ui");
+var _utils = require("../../utils");
+var _styles2 = require("../../common/styles");
+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 _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 log = (0, _debug["default"])('pie-lib:chart:bars');
+var ICON_SIZE = 16; // 10px icon + 2px padding on all sides + 1px border
+var RawPlot = exports.RawPlot = /*#__PURE__*/function (_React$Component) {
+  function RawPlot(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, RawPlot);
+    _this = _callSuper(this, RawPlot, [props]);
+    (0, _defineProperty2["default"])(_this, "handleMouseEnter", function () {
+      _this.setState({
+        isHovered: true
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "handleMouseLeave", function () {
+      _this.setState({
+        isHovered: false
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "setDragValue", function (dragValue) {
+      return _this.setState({
+        dragValue: dragValue
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "dragStop", function () {
+      var _this$props = _this.props,
+        label = _this$props.label,
+        onChangeCategory = _this$props.onChangeCategory;
+      var dragValue = _this.state.dragValue;
+      log('[dragStop]', dragValue);
+      if (dragValue !== undefined) {
+        onChangeCategory({
+          label: label,
+          value: dragValue
+        });
+      }
+      _this.setDragValue(undefined);
+    });
+    (0, _defineProperty2["default"])(_this, "dragValue", function (existing, next) {
+      log('[dragValue] next:', next);
+      _this.setDragValue(next);
+    });
+    (0, _defineProperty2["default"])(_this, "renderCorrectnessIcon", function (barX, barWidth, correctVal, correctness, scale, pointHeight, pointDiameter) {
+      var iconY;
+      if (correctVal === 0) {
+        // if correct value is 0, position icon on the horizontal axis
+        iconY = scale.y(0) - ICON_SIZE / 2;
+      } else {
+        var shapeIndex = correctVal - 1; // the index of the shape representing the correct value
+        var shapeCenterY = scale.y(shapeIndex) - (pointHeight - pointDiameter) / 2 - pointDiameter / 2;
+        iconY = shapeCenterY - ICON_SIZE / 2; // center the icon
+      }
+      return /*#__PURE__*/_react["default"].createElement("foreignObject", {
+        x: barX + barWidth / 2 - ICON_SIZE / 2,
+        y: iconY,
+        width: ICON_SIZE,
+        height: ICON_SIZE
+      }, /*#__PURE__*/_react["default"].createElement(_Check["default"], {
+        className: "correctnessIcon correctIcon smallIcon",
+        title: correctness.label
+      }));
+    });
+    _this.state = {
+      dragValue: undefined,
+      isHovered: false
+    };
+    return _this;
+  }
+  (0, _inherits2["default"])(RawPlot, _React$Component);
+  return (0, _createClass2["default"])(RawPlot, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props2 = this.props,
+        graphProps = _this$props2.graphProps,
+        value = _this$props2.value,
+        label = _this$props2.label,
+        xBand = _this$props2.xBand,
+        index = _this$props2.index,
+        CustomBarElement = _this$props2.CustomBarElement,
+        interactive = _this$props2.interactive,
+        correctness = _this$props2.correctness,
+        defineChart = _this$props2.defineChart,
+        correctData = _this$props2.correctData,
+        className = _this$props2.className;
+      var scale = graphProps.scale,
+        range = graphProps.range,
+        size = graphProps.size;
+      var _ref = range || {},
+        max = _ref.max;
+      var _this$state = this.state,
+        dragValue = _this$state.dragValue,
+        isHovered = _this$state.isHovered;
+      var v = Number.isFinite(dragValue) ? dragValue : value;
+      var barWidth = xBand.bandwidth();
+      var barHeight = scale.y(range.max - v);
+      var barX = xBand((0, _utils.bandKey)({
+        label: label
+      }, index));
+      log('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);
+      var values = [];
+      for (var i = 0; i < v; i++) {
+        values.push(i);
+      }
+      var pointHeight = size.height / max;
+      var pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;
+      var Component = interactive ? _dragHandle["default"] : _dragHandle.DragHandle;
+      var allowRolloverEvent = interactive && !correctness;
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("g", {
+        className: className,
+        onMouseEnter: this.handleMouseEnter,
+        onMouseLeave: this.handleMouseLeave,
+        onTouchStart: this.handleMouseEnter,
+        onTouchEnd: this.handleMouseLeave
+      }, isHovered && allowRolloverEvent && /*#__PURE__*/_react["default"].createElement("rect", {
+        x: barX,
+        y: scale.y(v),
+        width: barWidth,
+        height: values !== null && values !== void 0 && values.length ? pointHeight * values.length : 0,
+        stroke: _renderUi.color.defaults.BORDER_GRAY,
+        strokeWidth: '4px',
+        fill: 'transparent'
+      }), values.map(function (index) {
+        return CustomBarElement({
+          index: index,
+          pointDiameter: pointDiameter,
+          barX: barX,
+          barWidth: barWidth,
+          pointHeight: pointHeight,
+          label: label,
+          value: value,
+          scale: scale
+        });
+      }), correctness && correctness.value === 'incorrect' && function () {
+        var correctVal = parseFloat(correctData[index] && correctData[index].value);
+        if (isNaN(correctVal)) return null;
+        var selectedVal = v;
+
+        // special case: if correct value is 0, only show the icon on the axis
+        if (correctVal === 0) {
+          return _this2.renderCorrectnessIcon(barX, barWidth, correctVal, correctness, scale, pointHeight, pointDiameter);
+        }
+        if (selectedVal > correctVal) {
+          // selected is higher than correct: overlay the correct last segment
+          var overlayValues = [];
+          for (var _i = 0; _i < correctVal; _i++) {
+            overlayValues.push(_i);
+          }
+          var lastIndexOfOverlay = overlayValues.length - 1;
+          var lastOverlayValue = overlayValues[lastIndexOfOverlay];
+          var _barX = xBand((0, _utils.bandKey)({
+            label: label
+          }, index));
+          var _barWidth = xBand.bandwidth();
+          var _pointHeight = size.height / max;
+          var _pointDiameter = (_pointHeight > _barWidth ? _barWidth : _pointHeight) * 0.8;
+          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(CustomBarElement, {
+            index: lastOverlayValue,
+            pointDiameter: _pointDiameter + 10 // increase point diameter for dotted line
+            ,
+            barX: _barX,
+            barWidth: _barWidth,
+            pointHeight: _pointHeight,
+            label: label,
+            value: value,
+            scale: scale,
+            dottedOverline: true
+          }), _this2.renderCorrectnessIcon(_barX, _barWidth, correctVal, correctness, scale, _pointHeight, _pointDiameter));
+        }
+        // selected is lower than correct, render missing segment below the correct bar
+        var valuesToRender = [];
+        for (var _i2 = selectedVal; _i2 < correctVal; _i2++) {
+          valuesToRender.push(_i2);
+        }
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, valuesToRender.map(function (idx) {
+          return CustomBarElement({
+            index: idx,
+            pointDiameter: pointDiameter,
+            barX: barX,
+            barWidth: barWidth,
+            pointHeight: pointHeight,
+            label: label,
+            value: value,
+            scale: scale,
+            dottedOverline: true
+          });
+        }), _this2.renderCorrectnessIcon(barX, barWidth, correctVal, correctness, scale, pointHeight, pointDiameter));
+      }(), /*#__PURE__*/_react["default"].createElement(Component, {
+        x: barX,
+        y: v,
+        interactive: interactive,
+        width: barWidth,
+        onDrag: function onDrag(v) {
+          return _this2.dragValue(value, v);
+        },
+        onDragStop: this.dragStop,
+        graphProps: graphProps,
+        correctness: correctness,
+        isHovered: isHovered,
+        defineChart: defineChart,
+        color: _renderUi.color.primaryDark(),
+        isPlot: true
+      })));
+    }
+  }]);
+}(_react["default"].Component);
+(0, _defineProperty2["default"])(RawPlot, "propTypes", {
+  onChangeCategory: _propTypes["default"].func,
+  value: _propTypes["default"].number,
+  label: _propTypes["default"].string,
+  xBand: _propTypes["default"].func,
+  index: _propTypes["default"].number.isRequired,
+  graphProps: _plot.types.GraphPropsType.isRequired,
+  CustomBarElement: _propTypes["default"].func,
+  interactive: _propTypes["default"].bool,
+  correctness: _propTypes["default"].shape({
+    value: _propTypes["default"].string,
+    label: _propTypes["default"].string
+  }),
+  defineChart: _propTypes["default"].bool,
+  correctData: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+    label: _propTypes["default"].string
+  })),
+  className: _propTypes["default"].string
+});
+var Bar = (0, _styles.styled)(RawPlot)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    '& .dot': {
+      fill: _renderUi.color.visualElementsColors.PLOT_FILL_COLOR,
+      '&.correct': (0, _styles2.correct)('stroke'),
+      '&.incorrect': (0, _styles2.incorrect)('stroke')
+    },
+    '& .dotColor': {
+      fill: _renderUi.color.visualElementsColors.PLOT_FILL_COLOR,
+      '&.correct': (0, _styles2.correct)('fill'),
+      '&.incorrect': (0, _styles2.incorrect)('fill')
+    },
+    '& .line': {
+      stroke: _renderUi.color.visualElementsColors.PLOT_FILL_COLOR,
+      '&.correct': (0, _styles2.correct)('stroke'),
+      '&.incorrect': (0, _styles2.incorrect)('stroke')
+    },
+    '& .correctIcon': {
+      backgroundColor: _renderUi.color.correct()
+    },
+    '& .incorrectIcon': {
+      backgroundColor: _renderUi.color.incorrectWithIcon()
+    },
+    '& .correctnessIcon': {
+      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),
+      stroke: 'initial',
+      boxSizing: 'unset',
+      // to override the default border-box in IBX
+      display: 'block'
+    },
+    '& .smallIcon': {
+      fontSize: '10px',
+      width: '10px',
+      height: '10px'
+    }
+  };
+});
+var Plot = exports.Plot = /*#__PURE__*/function (_React$Component2) {
+  function Plot() {
+    (0, _classCallCheck2["default"])(this, Plot);
+    return _callSuper(this, Plot, arguments);
+  }
+  (0, _inherits2["default"])(Plot, _React$Component2);
+  return (0, _createClass2["default"])(Plot, [{
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+        data = _this$props3.data,
+        graphProps = _this$props3.graphProps,
+        xBand = _this$props3.xBand,
+        CustomBarElement = _this$props3.CustomBarElement,
+        _onChangeCategory = _this$props3.onChangeCategory,
+        defineChart = _this$props3.defineChart,
+        correctData = _this$props3.correctData;
+      return /*#__PURE__*/_react["default"].createElement(_group.Group, null, (data || []).map(function (d, index) {
+        return /*#__PURE__*/_react["default"].createElement(Bar, {
+          value: d.value,
+          label: d.label,
+          interactive: defineChart || d.interactive,
+          defineChart: defineChart,
+          xBand: xBand,
+          index: index,
+          key: "bar-".concat(d.label, "-").concat(d.value, "-").concat(index),
+          onChangeCategory: function onChangeCategory(category) {
+            return _onChangeCategory(index, category);
+          },
+          graphProps: graphProps,
+          CustomBarElement: CustomBarElement,
+          correctness: d.correctness,
+          correctData: correctData
+        });
+      }));
+    }
+  }]);
+}(_react["default"].Component);
+(0, _defineProperty2["default"])(Plot, "propTypes", {
+  data: _propTypes["default"].array,
+  onChangeCategory: _propTypes["default"].func,
+  xBand: _propTypes["default"].func,
+  graphProps: _plot.types.GraphPropsType.isRequired,
+  defineChart: _propTypes["default"].bool,
+  CustomBarElement: _propTypes["default"].func,
+  correctData: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+    label: _propTypes["default"].string
+  })),
+  className: _propTypes["default"].string
+});
+var _default = exports["default"] = Plot;
+//# sourceMappingURL=plot.js.map