@pie-lib/charting 5.31.1-next.0 → 5.32.1

package/esm/index.js

@@ -0,0 +1,3714 @@
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import debug from 'debug';
+import cloneDeep from 'lodash/cloneDeep';
+import { types, utils, gridDraggable, createGraphProps, Root } from '@pie-lib/plot';
+import { AlertDialog, NumberTextFieldCustom } from '@pie-lib/config-ui';
+import { GridRows, GridColumns } from '@vx/grid';
+import { color } from '@pie-lib/render-ui';
+import { AxisLeft, AxisBottom } from '@vx/axis';
+import Checkbox from '@material-ui/core/Checkbox';
+import Check from '@material-ui/icons/Check';
+import Close from '@material-ui/icons/Close';
+import { scaleBand, scalePoint } from '@vx/scale';
+import AutosizeInput from 'react-input-autosize';
+import { renderMath } from '@pie-lib/math-rendering';
+import { Group } from '@vx/group';
+import { Bar as Bar$4, LinePath, Circle } from '@vx/shape';
+import { withStyles as withStyles$1 } from '@material-ui/core/styles/index';
+import isEqual from 'lodash/isEqual';
+import Button from '@material-ui/core/Button';
+import Popover from '@material-ui/core/Popover';
+import Paper from '@material-ui/core/Paper';
+import Translator from '@pie-lib/translator';
+import Typography from '@material-ui/core/Typography';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import InputLabel from '@material-ui/core/InputLabel';
+import Select from '@material-ui/core/Select';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+class Grid extends React.Component {
+  render() {
+    const {
+      classes,
+      className,
+      graphProps,
+      xBand,
+      rowTickValues,
+      columnTickValues
+    } = this.props;
+    const {
+      scale = {},
+      size = {},
+      range = {}
+    } = graphProps || {};
+    const {
+      step = 0,
+      labelStep = 0
+    } = range;
+    const highlightNonLabel = step && labelStep && step < labelStep; // if highlightNonLabel is true, we need to separate the unlabled lines in order to render them in a different color
+
+    const {
+      unlabeledLines,
+      labeledLines
+    } = (rowTickValues || []).reduce((acc, value) => {
+      if (highlightNonLabel && value % labelStep !== 0) {
+        acc.unlabeledLines.push(value);
+      } else {
+        acc.labeledLines.push(value);
+      }
+
+      return acc;
+    }, {
+      unlabeledLines: [],
+      labeledLines: []
+    });
+    return /*#__PURE__*/React.createElement("g", {
+      className: classNames(classes.grid, className)
+    }, /*#__PURE__*/React.createElement(GridRows, {
+      scale: scale.y,
+      width: size.width,
+      tickValues: unlabeledLines,
+      lineStyle: {
+        stroke: color.fadedPrimary(),
+        strokeWidth: 1
+      }
+    }), /*#__PURE__*/React.createElement(GridRows, {
+      scale: scale.y,
+      width: size.width,
+      tickValues: labeledLines,
+      lineStyle: {
+        stroke: color.visualElementsColors.GRIDLINES_COLOR,
+        strokeWidth: 1
+      }
+    }), /*#__PURE__*/React.createElement(GridColumns, {
+      scale: xBand,
+      height: size.height,
+      offset: xBand.bandwidth() / 2,
+      tickValues: columnTickValues
+    }));
+  }
+
+}
+Grid.propTypes = {
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  graphProps: types.GraphPropsType.isRequired,
+  xBand: PropTypes.func,
+  columnTickValues: PropTypes.array,
+  rowTickValues: PropTypes.array
+};
+Grid.defaultProps = {};
+
+const styles$5 = () => ({
+  grid: {
+    stroke: color.primaryLight()
+  }
+});
+
+var ChartGrid = withStyles(styles$5)(Grid);
+
+const CorrectnessIndicator = ({
+  scale,
+  x,
+  y,
+  classes,
+  r,
+  correctness,
+  interactive
+}) => {
+  if (!correctness || !interactive) return null;
+  const cx = scale ? scale.x(x) : x;
+  const cy = scale ? scale.y(y) : y;
+  const isCorrect = correctness.value === 'correct';
+  const iconClass = isCorrect ? classes.correctIcon : classes.incorrectIcon; // the icon is 16px + 2px padding + 1px border, so total size is 22px
+
+  return /*#__PURE__*/React.createElement("foreignObject", {
+    x: cx - 11,
+    y: cy - 11,
+    width: 22,
+    height: 22
+  }, isCorrect ? /*#__PURE__*/React.createElement(Check, {
+    className: classNames(classes.correctnessIcon, iconClass),
+    title: correctness.label
+  }) : /*#__PURE__*/React.createElement(Close, {
+    className: classNames(classes.correctnessIcon, iconClass),
+    title: correctness.label
+  }));
+};
+const SmallCorrectPointIndicator = ({
+  scale,
+  x,
+  r,
+  correctness,
+  classes,
+  correctData,
+  label
+}) => {
+  if (correctness && correctness.value === 'incorrect') {
+    var _correctData$find;
+
+    const correctVal = parseFloat((_correctData$find = correctData.find(d => d.label === label)) == null ? void 0 : _correctData$find.value);
+    if (isNaN(correctVal)) return null;
+    const correctPxY = scale.y(correctVal);
+    const yToRender = correctPxY - 7.5;
+    const xToRender = scale.x(x) - 7.5; // small circle has 10px font + 2px padding + 1px border, so total size is 15px
+
+    return /*#__PURE__*/React.createElement("foreignObject", {
+      x: xToRender,
+      y: yToRender,
+      width: 15,
+      height: 15
+    }, /*#__PURE__*/React.createElement(Check, {
+      className: classNames(classes.correctnessIcon, classes.correctIcon, classes.smallIcon),
+      title: correctness.label
+    }));
+  }
+
+  return null;
+};
+const TickCorrectnessIndicator = ({
+  classes,
+  correctness,
+  interactive
+}) => {
+  if (!correctness || !interactive) return null;
+  return correctness.value === 'correct' ? /*#__PURE__*/React.createElement(Check, {
+    className: classNames(classes.correctnessIcon, classes.correctIcon),
+    title: correctness.label
+  }) : /*#__PURE__*/React.createElement(Close, {
+    className: classNames(classes.correctnessIcon, classes.incorrectIcon),
+    title: correctness.label
+  });
+};
+
+utils.tickCount;
+utils.bounds;
+utils.point;
+const bandKey = (d, index) => `${index}-${d.label || '-'}`;
+const dataToXBand = (scaleX, data, width, type) => {
+  switch (type) {
+    case 'bar':
+    case 'dotPlot':
+    case 'linePlot':
+      return scaleBand({
+        rangeRound: [0, width],
+        domain: data && data.map(bandKey),
+        padding: 0.2
+      });
+
+    case 'histogram':
+      return scaleBand({
+        rangeRound: [0, width],
+        domain: data && data.map(bandKey),
+        padding: 0
+      });
+
+    case 'lineCross':
+    case 'lineDot':
+      return scalePoint({
+        domain: data && data.map(bandKey),
+        rangeRound: [0, width]
+      });
+
+    default:
+      return scaleBand({
+        range: [0, width],
+        domain: data && data.map(bandKey),
+        padding: 0
+      });
+  }
+};
+const getTickValues = (prop = {}) => {
+  const tickValues = [];
+  let tickVal = prop.min;
+
+  while (tickVal <= prop.max) {
+    tickValues.push(tickVal);
+    tickVal = Math.round((tickVal + prop.step) * 10000) / 10000;
+  }
+
+  return tickValues;
+};
+const getDomainAndRangeByChartType = (domain, range, chartType) => {
+  let {
+    step,
+    labelStep,
+    min,
+    max
+  } = range || {};
+
+  if (!min) {
+    min = 0;
+  }
+
+  if (!max || max < 0) {
+    max = range.min + 1;
+  }
+
+  if (!step) {
+    step = labelStep || 1;
+  }
+
+  if (!labelStep || isNaN(labelStep) && step) {
+    labelStep = step || 1;
+  }
+
+  range.max = max;
+
+  switch (chartType) {
+    // if chart is dot plot or line plot, we should ignore step and make sure that min & max are integer values
+    case 'dotPlot':
+    case 'linePlot':
+      {
+        const intMin = Math.round(min);
+        const intMax = Math.round(max);
+        return {
+          domain: _extends({}, domain, {
+            step: 1,
+            labelStep: 1,
+            min: 0,
+            max: 1
+          }),
+          range: _extends({}, range, {
+            min: intMin,
+            max: intMin === intMax ? intMin + 1 : intMax,
+            labelStep,
+            step: 1
+          })
+        };
+      }
+
+    default:
+      return {
+        domain: _extends({}, domain, {
+          step: 1,
+          labelStep: 1,
+          min: 0,
+          max: 1
+        }),
+        range: _extends({}, range, {
+          labelStep,
+          step
+        })
+      };
+  }
+};
+const getGridLinesAndAxisByChartType = (range, chartType) => {
+  switch (chartType) {
+    case 'lineDot':
+    case 'lineCross':
+      return {
+        verticalLines: undefined,
+        horizontalLines: getTickValues(range),
+        leftAxis: true
+      };
+
+    case 'dotPlot':
+    case 'linePlot':
+      return {
+        verticalLines: [],
+        horizontalLines: [],
+        leftAxis: false
+      };
+
+    default:
+      return {
+        verticalLines: [],
+        horizontalLines: getTickValues(range),
+        leftAxis: true
+      };
+  }
+};
+const getRotateAngle = (fontSize, height) => {
+  if (height >= fontSize * 2) {
+    return 25;
+  }
+
+  return 0;
+};
+const getTopPadding = barWidth => {
+  if (barWidth < 30) {
+    return 50;
+  }
+
+  if (barWidth < 40) {
+    return 30;
+  }
+
+  if (barWidth < 60) {
+    return 15;
+  }
+
+  return 0;
+}; // This function calculates the transformation scale for SVG and the icon's vertical distance from its category
+
+const getScale = width => {
+  let scale, deltay;
+
+  if (width > 91) {
+    scale = 1.3;
+    deltay = -55;
+  } else if (width > 45) {
+    scale = 1.1;
+    deltay = -45;
+  } else if (width > 40) {
+    scale = 0.5 + (width - 34) * 0.02;
+    deltay = -25;
+  } else if (width > 30) {
+    scale = 0.5 + (width - 34) * 0.02;
+    deltay = -20;
+  } else {
+    scale = 0.5 * Math.pow(0.98, 34 - width); // 0.98 is the reduction factor. Adjust to control scaling.
+
+    deltay = -15;
+  }
+
+  return {
+    scale,
+    deltay
+  };
+};
+const getAdjustedX = (width, scaleValue) => {
+  const innerWidthOriginal = 57;
+  const effectiveInnerWidth = innerWidthOriginal * scaleValue;
+  return (width - effectiveInnerWidth) / 2;
+};
+
+const disabled = (key = 'fill') => ({
+  [key]: `var(--graph-disabled, ${color.disabled()})`,
+  pointerEvents: 'none',
+  border: 'none'
+});
+const correct = (key = 'fill') => ({
+  [key]: color.correct(),
+  pointerEvents: 'none',
+  border: `solid 1px ${color.correct()}`
+});
+const incorrect = (key = 'fill') => ({
+  [key]: color.incorrect(),
+  pointerEvents: 'none',
+  border: `solid 1px ${color.incorrect()}`
+});
+
+const styles$4 = theme => ({
+  input: {
+    float: 'right',
+    fontFamily: theme.typography.fontFamily,
+    fontSize: theme.typography.fontSize,
+    border: 'none',
+    '&.correct': correct('color'),
+    '&.incorrect': incorrect('color'),
+    '&.disabled': {
+      backgroundColor: 'transparent !important'
+    },
+    '&.error': {
+      border: `2px solid ${theme.palette.error.main}`
+    }
+  },
+  mathInput: {
+    pointerEvents: 'auto',
+    textAlign: 'center',
+    fontSize: theme.typography.fontSize + 2,
+    fontFamily: theme.typography.fontFamily,
+    color: color.primaryDark(),
+    paddingTop: theme.typography.fontSize / 2
+  },
+  disabled: _extends({}, disabled('color'), {
+    backgroundColor: 'transparent !important'
+  }),
+  error: {
+    border: `2px solid ${theme.palette.error.main}`
+  },
+  correct: _extends({}, correct('color')),
+  incorrect: _extends({}, incorrect('color')),
+  flexContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+  }
+});
+
+function isFractionFormat(label) {
+  const trimmedLabel = (label == null ? void 0 : 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 == null ? void 0 : label.trim()) || '';
+  let fraction;
+  let mixedNr = '';
+  let improperFraction = trimmedLabel.split(' ');
+
+  if (improperFraction[1] && improperFraction[1].includes('/')) {
+    fraction = improperFraction[1].split('/') || '';
+  } else {
+    fraction = (trimmedLabel == null ? void 0 : 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;
+}
+
+const MarkLabel = props => {
+  // eslint-disable-next-line no-unused-vars
+  const [input, setInput] = useState(null);
+
+  const _ref = useCallback(node => setInput(node), null);
+
+  const {
+    mark,
+    classes,
+    disabled,
+    inputRef: externalInputRef,
+    barWidth,
+    rotate,
+    correctness,
+    autoFocus,
+    error,
+    isHiddenLabel,
+    limitCharacters,
+    correctnessIndicator
+  } = props;
+  const [label, setLabel] = useState(mark.label);
+  const [mathLabel, setMathLabel] = useState(getLabelMathFormat(mark.label));
+  const [isEditing, setIsEditing] = useState(false);
+  let root = useRef(null);
+
+  const onChange = e => {
+    if (limitCharacters && e.target.value && e.target.value.length > 20) {
+      return;
+    }
+
+    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) {
+    extraStyle = {
+      width: 'unset',
+      textAlign: 'left'
+    };
+  } // useState only sets the value once, to synch props to state need useEffect
+
+
+  useEffect(() => {
+    setLabel(mark.label);
+  }, [mark.label]);
+  useEffect(() => {
+    renderMath(root);
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.flexContainer
+  }, correctnessIndicator, isMathRendering() ? /*#__PURE__*/React.createElement("div", {
+    ref: r => {
+      root = r;
+      externalInputRef(r);
+    },
+    dangerouslySetInnerHTML: {
+      __html: getLabelMathFormat(label)
+    },
+    className: classNames(classes.mathInput, {
+      [classes.disabled]: disabled,
+      [classes.error]: error,
+      [classes.correct]: mark.editable && (correctness == null ? void 0 : correctness.label) === 'correct',
+      [classes.incorrect]: mark.editable && (correctness == null ? void 0 : correctness.label) === 'incorrect'
+    }),
+    onClick: () => setIsEditing(true),
+    style: {
+      minWidth: barWidth,
+      position: 'fixed',
+      transformOrigin: 'left',
+      transform: `rotate(${rotate}deg)`,
+      visibility: isHiddenLabel ? 'hidden' : 'unset',
+      marginTop: correctnessIndicator ? '24px' : '0'
+    }
+  }) : /*#__PURE__*/React.createElement(AutosizeInput, {
+    inputRef: r => {
+      _ref(r);
+
+      externalInputRef(r);
+    },
+    autoFocus: isEditing || autoFocus,
+    disabled: disabled,
+    inputClassName: classNames(classes.input, correctness && mark.editable ? correctness.label : null, disabled && 'disabled', error && 'error'),
+    inputStyle: _extends({
+      minWidth: barWidth,
+      textAlign: 'center',
+      background: 'transparent',
+      boxSizing: 'border-box',
+      paddingLeft: 0,
+      paddingRight: 0
+    }, extraStyle),
+    value: label,
+    style: {
+      position: 'fixed',
+      pointerEvents: 'auto',
+      top: 0,
+      left: 0,
+      minWidth: barWidth,
+      transformOrigin: 'left',
+      transform: `rotate(${rotate}deg)`,
+      visibility: isHiddenLabel ? 'hidden' : 'unset',
+      marginTop: correctnessIndicator ? '24px' : '0'
+    },
+    onChange: onChange,
+    onBlur: onChangeProp
+  }));
+};
+MarkLabel.propTypes = {
+  autoFocus: PropTypes.bool,
+  disabled: PropTypes.bool,
+  error: PropTypes.any,
+  onChange: PropTypes.func,
+  graphProps: types.GraphPropsType,
+  classes: PropTypes.object,
+  inputRef: PropTypes.func,
+  mark: PropTypes.object,
+  barWidth: PropTypes.number,
+  rotate: PropTypes.number,
+  correctness: PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string
+  }),
+  isHiddenLabel: PropTypes.bool,
+  limitCharacters: PropTypes.bool,
+  correctnessIndicator: PropTypes.node
+};
+var MarkLabel$1 = withStyles(styles$4)(MarkLabel);
+
+class TickComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleAlertDialog = (open, callback) => this.setState({
+      dialog: {
+        open
+      }
+    }, callback);
+
+    this.changeCategory = (index, newLabel) => {
+      const {
+        categories,
+        onChangeCategory
+      } = this.props;
+      const category = categories[index];
+      onChangeCategory(index, _extends({}, category, {
+        label: newLabel
+      }));
+    };
+
+    this.changeInteractive = (index, value) => {
+      const {
+        categories,
+        onChangeCategory
+      } = this.props;
+      const 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: () => this.handleAlertDialog(false, onChangeCategory(index, _extends({}, category, {
+              interactive: !category.interactive
+            }))),
+            onClose: () => this.handleAlertDialog(false)
+          }
+        });
+      } else {
+        onChangeCategory(index, _extends({}, category, {
+          interactive: !category.interactive
+        }));
+      }
+    };
+
+    this.changeEditable = (index, value) => {
+      const {
+        categories,
+        onChangeCategory
+      } = this.props;
+      const 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: () => this.handleAlertDialog(false, onChangeCategory(index, _extends({}, category, {
+              editable: !category.editable || false
+            }))),
+            onClose: () => this.handleAlertDialog(false)
+          }
+        });
+      } else {
+        onChangeCategory(index, _extends({}, category, {
+          editable: !category.editable || false
+        }));
+      }
+    };
+
+    this.splitText = (text, maxChar) => {
+      let chunks = [];
+
+      while ((text || '').length > 0) {
+        let indexToSplit;
+
+        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
+      }
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.autoFocus && !prevProps.autoFocus) {
+      this.props.onAutoFocusUsed();
+    }
+  }
+
+  render() {
+    const {
+      classes,
+      categories,
+      xBand,
+      bandWidth,
+      barWidth,
+      rotate,
+      top,
+      graphProps,
+      defineChart,
+      chartingOptions,
+      x,
+      y,
+      formattedValue,
+      changeInteractiveEnabled,
+      changeEditableEnabled,
+      error,
+      autoFocus,
+      hiddenLabelRef,
+      showCorrectness
+    } = this.props;
+
+    if (!formattedValue) {
+      return null;
+    }
+
+    const {
+      dialog
+    } = this.state;
+    const {
+      changeEditable,
+      changeInteractive
+    } = chartingOptions || {};
+    const index = parseInt(formattedValue.split('-')[0], 10);
+    const category = categories[index];
+    const {
+      editable,
+      interactive,
+      label,
+      correctness
+    } = category || {};
+    const barX = xBand(bandKey({
+      label
+    }, index));
+    const longestCategory = (categories || []).reduce((a, b) => {
+      const lengthA = a && a.label ? a.label.length : 0;
+      const lengthB = b && b.label ? b.label.length : 0;
+      return lengthA > lengthB ? a : b;
+    });
+    const distinctMessages = error ? [...new Set(Object.values(error))].join(' ') : '';
+    return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("foreignObject", {
+      x: bandWidth ? barX : x - barWidth / 2,
+      y: 18,
+      width: barWidth,
+      height: 4,
+      style: {
+        pointerEvents: 'none',
+        overflow: 'visible'
+      }
+    }, index === 0 && /*#__PURE__*/React.createElement(MarkLabel$1, {
+      isHiddenLabel: true,
+      inputRef: hiddenLabelRef,
+      disabled: true,
+      mark: longestCategory,
+      graphProps: graphProps,
+      barWidth: barWidth
+    }), /*#__PURE__*/React.createElement(MarkLabel$1, {
+      autoFocus: defineChart && autoFocus,
+      inputRef: r => this.input = r,
+      disabled: !defineChart && !editable,
+      mark: category,
+      graphProps: graphProps,
+      onChange: newLabel => this.changeCategory(index, newLabel),
+      barWidth: barWidth,
+      rotate: rotate,
+      correctness: correctness,
+      error: error && error[index],
+      limitCharacters: true,
+      correctnessIndicator: showCorrectness && correctness && /*#__PURE__*/React.createElement(TickCorrectnessIndicator, {
+        correctness: correctness,
+        interactive: interactive,
+        classes: classes
+      })
+    })), error && index === 0 && /*#__PURE__*/React.createElement("text", {
+      className: classes.error,
+      y: y + 23,
+      height: 6,
+      textAnchor: "start"
+    }, distinctMessages), defineChart && index === 0 && /*#__PURE__*/React.createElement("svg", {
+      x: -55,
+      style: {
+        overflow: 'visible'
+      }
+    }, changeInteractiveEnabled && /*#__PURE__*/React.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 ? void 0 : changeInteractive.authoringLabel, 20).map((word, index) => /*#__PURE__*/React.createElement("tspan", {
+      key: index,
+      x: "0",
+      dy: `${index > 0 ? '1.2em' : '.6em'}`
+    }, word))), changeEditableEnabled && /*#__PURE__*/React.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 ? void 0 : changeEditable.authoringLabel, 20).map((word, index) => /*#__PURE__*/React.createElement("tspan", {
+      key: index,
+      x: "0",
+      dy: `${index > 0 ? '1.2em' : '.6em'}`
+    }, word)))), defineChart && changeInteractiveEnabled && /*#__PURE__*/React.createElement("foreignObject", {
+      x: x - 24,
+      y: y + 80 + top,
+      width: barWidth,
+      height: 4,
+      style: {
+        pointerEvents: 'visible',
+        overflow: 'visible'
+      }
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      className: classes.customColor,
+      style: {
+        position: 'fixed'
+      },
+      checked: interactive,
+      onChange: e => this.changeInteractive(index, e.target.checked)
+    })), defineChart && changeEditableEnabled && /*#__PURE__*/React.createElement("foreignObject", {
+      x: x - 24,
+      y: y + 130 + top,
+      width: barWidth,
+      height: 4,
+      style: {
+        pointerEvents: 'visible',
+        overflow: 'visible'
+      }
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      className: classes.customColor,
+      style: {
+        position: 'fixed'
+      },
+      checked: editable,
+      onChange: e => this.changeEditable(index, e.target.checked)
+    })), /*#__PURE__*/React.createElement("foreignObject", {
+      x: x - 24,
+      y: y + 100 + top,
+      width: barWidth,
+      height: 4,
+      style: {
+        pointerEvents: 'visible',
+        overflow: 'visible'
+      }
+    }, /*#__PURE__*/React.createElement(AlertDialog, {
+      open: dialog.open,
+      title: dialog.title,
+      text: dialog.text,
+      onClose: dialog.onClose,
+      onConfirm: dialog.onConfirm
+    })));
+  }
+
+}
+TickComponent.propTypes = {
+  defineChart: PropTypes.bool,
+  error: PropTypes.any
+};
+TickComponent.propTypes = {
+  categories: PropTypes.array,
+  xBand: PropTypes.func,
+  bandWidth: PropTypes.number,
+  barWidth: PropTypes.number,
+  rotate: PropTypes.number,
+  top: PropTypes.number,
+  x: PropTypes.number,
+  y: PropTypes.number,
+  graphProps: PropTypes.object,
+  formattedValue: PropTypes.string,
+  onChangeCategory: PropTypes.func,
+  onChange: PropTypes.func,
+  classes: PropTypes.object,
+  error: PropTypes.object,
+  defineChart: PropTypes.bool,
+  chartingOptions: PropTypes.object,
+  changeInteractiveEnabled: PropTypes.bool,
+  changeEditableEnabled: PropTypes.bool,
+  autoFocus: PropTypes.bool,
+  onAutoFocusUsed: PropTypes.func,
+  showCorrectness: PropTypes.bool
+};
+class RawChartAxes extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      height: 0,
+      width: 0
+    };
+  }
+
+  componentDidMount() {
+    if (this.hiddenLabelRef) {
+      const boundingClientRect = this.hiddenLabelRef.getBoundingClientRect();
+      this.setState({
+        height: Math.floor(boundingClientRect.height),
+        width: Math.floor(boundingClientRect.width)
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (this.hiddenLabelRef) {
+      const width = Math.floor(this.hiddenLabelRef.getBoundingClientRect().width);
+
+      if (width !== this.state.width) {
+        this.setState({
+          width
+        });
+      }
+    }
+  }
+
+  render() {
+    const {
+      classes,
+      graphProps,
+      xBand,
+      leftAxis,
+      onChange,
+      onChangeCategory,
+      categories = [],
+      top,
+      defineChart,
+      chartingOptions,
+      changeInteractiveEnabled,
+      changeEditableEnabled,
+      theme,
+      autoFocus,
+      onAutoFocusUsed,
+      error,
+      showCorrectness
+    } = this.props;
+    const {
+      axis,
+      axisLine,
+      tick
+    } = classes;
+    const {
+      scale = {},
+      range = {},
+      domain = {},
+      size = {}
+    } = graphProps || {};
+    const {
+      height,
+      width
+    } = this.state;
+    const bottomScale = xBand && typeof xBand.rangeRound === 'function' && xBand.rangeRound([0, size.width]);
+    const bandWidth = xBand && typeof xBand.bandwidth === 'function' && xBand.bandwidth(); // for chartType "line", bandWidth will be 0, so we have to calculate it
+
+    const barWidth = bandWidth || scale.x && scale.x(domain.max) / categories.length;
+    const rowTickValues = getTickValues(_extends({}, range, {
+      step: range.labelStep
+    }));
+    const fontSize = theme && theme.typography ? theme.typography.fontSize : 14; // this mostly applies for labels that are not editable
+
+    const rotateBecauseOfHeight = getRotateAngle(fontSize, height); // this applies for labels that are editable
+
+    const rotateBecauseOfWidth = width > barWidth ? 25 : 0;
+
+    const getTickLabelProps = value => ({
+      dy: 4,
+      dx: -10 - (value.toLocaleString().length || 1) * 5
+    });
+
+    const getTickComponent = props => {
+      const properties = {
+        hiddenLabelRef: ref => {
+          this.hiddenLabelRef = ref;
+        },
+        classes,
+        categories,
+        xBand,
+        bandWidth,
+        barWidth,
+        rotate: rotateBecauseOfHeight || rotateBecauseOfWidth,
+        top,
+        defineChart,
+        chartingOptions,
+        autoFocus,
+        onAutoFocusUsed,
+        error,
+        onChangeCategory,
+        changeInteractiveEnabled,
+        changeEditableEnabled,
+        onChange,
+        graphProps,
+        x: props.x,
+        y: props.y,
+        formattedValue: props.formattedValue,
+        showCorrectness
+      };
+      return /*#__PURE__*/React.createElement(TickComponent, properties);
+    };
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, leftAxis && /*#__PURE__*/React.createElement(AxisLeft, {
+      scale: scale.y,
+      className: axis,
+      axisLineClassName: axisLine,
+      tickLength: 10,
+      tickClassName: tick,
+      tickFormat: value => value,
+      tickValues: rowTickValues,
+      tickLabelProps: getTickLabelProps
+    }), /*#__PURE__*/React.createElement(AxisBottom, {
+      axisLineClassName: axisLine,
+      tickClassName: tick,
+      scale: bottomScale,
+      labelProps: {
+        y: 60 + top
+      },
+      top: scale.y && scale.y(range.min),
+      textLabelProps: () => ({
+        textAnchor: 'middle'
+      }),
+      tickFormat: count => count,
+      tickComponent: getTickComponent,
+      autoFocus: autoFocus,
+      onAutoFocusUsed: onAutoFocusUsed
+    }));
+  }
+
+}
+RawChartAxes.propTypes = {
+  bottomScale: PropTypes.func,
+  classes: PropTypes.object.isRequired,
+  categories: PropTypes.array,
+  defineChart: PropTypes.bool,
+  error: PropTypes.any,
+  graphProps: types.GraphPropsType.isRequired,
+  xBand: PropTypes.func,
+  leftAxis: PropTypes.bool,
+  onChange: PropTypes.func,
+  onChangeCategory: PropTypes.func,
+  top: PropTypes.number,
+  theme: PropTypes.object,
+  chartingOptions: PropTypes.object,
+  changeInteractiveEnabled: PropTypes.bool,
+  changeEditableEnabled: PropTypes.bool,
+  autoFocus: PropTypes.bool,
+  onAutoFocusUsed: PropTypes.func,
+  showCorrectness: PropTypes.bool
+};
+const ChartAxes = withStyles(theme => ({
+  axis: {
+    stroke: color.primaryDark(),
+    strokeWidth: 2
+  },
+  axisLine: {
+    stroke: color.visualElementsColors.AXIS_LINE_COLOR,
+    strokeWidth: 2
+  },
+  tick: {
+    '& > line': {
+      stroke: color.primaryDark(),
+      strokeWidth: 2
+    },
+    fontFamily: theme.typography.body1.fontFamily,
+    fontSize: theme.typography.fontSize,
+    textAnchor: 'middle'
+  },
+  dottedLine: {
+    stroke: color.primaryLight(),
+    opacity: 0.2
+  },
+  error: {
+    fontSize: theme.typography.fontSize - 2,
+    fill: theme.palette.error.main
+  },
+  customColor: {
+    color: `${color.tertiary()} !important`
+  },
+  correctnessIcon: {
+    borderRadius: theme.spacing.unit * 2,
+    color: color.defaults.WHITE,
+    fontSize: '16px',
+    width: '16px',
+    height: '16px',
+    padding: '2px',
+    border: `1px solid ${color.defaults.WHITE}`,
+    boxSizing: 'unset' // to override the default border-box in IBX
+
+  },
+  incorrectIcon: {
+    backgroundColor: color.incorrectWithIcon()
+  },
+  correctIcon: {
+    backgroundColor: color.correct()
+  },
+  tickContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+  }
+}), {
+  withTheme: true
+})(RawChartAxes);
+
+const DragIcon = ({
+  width,
+  scaleValue,
+  color,
+  classes
+}) => {
+  var _getScale;
+
+  return /*#__PURE__*/React.createElement("svg", {
+    x: getAdjustedX(width, scaleValue),
+    y: (_getScale = getScale(width)) == null ? void 0 : _getScale.deltay,
+    color: color,
+    width: width,
+    height: width,
+    overflow: "visible",
+    viewBox: `0 0 ${width} ${width}`,
+    className: classes.svgOverflowVisible
+  }, /*#__PURE__*/React.createElement("g", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    stroke: "currentColor",
+    transform: `scale(${scaleValue})`
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "28.5",
+    cy: "23.5",
+    r: "22",
+    fill: "white",
+    stroke: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M33.5 21.25H23.4609C22.7578 21.25 22.4062 20.4297 22.9141 19.9219L27.9141 14.9219C28.2266 14.6094 28.7344 14.6094 29.0469 14.9219L34.0469 19.9219C34.5547 20.4297 34.2031 21.25 33.5 21.25Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M23.5 25.75L33.5391 25.75C34.2422 25.75 34.5938 26.5703 34.0859 27.0781L29.0859 32.0781C28.7734 32.3906 28.2656 32.3906 27.9531 32.0781L22.9531 27.0781C22.4453 26.5703 22.7969 25.75 23.5 25.75Z",
+    fill: "currentColor"
+  })));
+};
+
+const _excluded$3 = ["x", "y", "width", "graphProps", "classes", "className", "interactive", "defineChart", "isHovered", "correctness", "color", "isPlot"];
+
+const RawDragHandle$1 = _ref => {
+  var _getScale;
+
+  let {
+    x,
+    y,
+    width,
+    graphProps,
+    classes,
+    className,
+    interactive,
+    isHovered,
+    correctness,
+    isPlot
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+
+  const {
+    scale
+  } = graphProps;
+  const scaleValue = (_getScale = getScale(width)) == null ? void 0 : _getScale.scale;
+  return /*#__PURE__*/React.createElement("svg", {
+    x: x,
+    y: scale.y(y) - 10,
+    width: width,
+    overflow: "visible",
+    className: classes.svgOverflowVisible
+  }, isHovered && !correctness && interactive && /*#__PURE__*/React.createElement(DragIcon, {
+    width: width,
+    scaleValue: scaleValue,
+    color: color.defaults.BORDER_GRAY,
+    classes: classes
+  }), interactive && !correctness && /*#__PURE__*/React.createElement("ellipse", _extends({
+    cx: width / 2,
+    cy: 10,
+    rx: width / 2 // the drag icon has a 22px fixed r value, so the ry value is 3 times that in order to cover all the area
+    ,
+    ry: 66,
+    className: classNames(classes.transparentHandle, className)
+  }, rest)), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
+    id: "bottomShadow",
+    x: "0",
+    y: "0",
+    width: "140%",
+    height: "140%"
+  }, /*#__PURE__*/React.createElement("feGaussianBlur", {
+    in: "SourceAlpha",
+    stdDeviation: "3"
+  }), /*#__PURE__*/React.createElement("feOffset", {
+    dx: "0",
+    dy: "5",
+    result: "offsetblur"
+  }), /*#__PURE__*/React.createElement("feFlood", {
+    floodColor: "#00000033"
+  }), /*#__PURE__*/React.createElement("feComposite", {
+    in2: "offsetblur",
+    operator: "in"
+  }), /*#__PURE__*/React.createElement("feMerge", null, /*#__PURE__*/React.createElement("feMergeNode", null), /*#__PURE__*/React.createElement("feMergeNode", {
+    in: "SourceGraphic"
+  })))), correctness && interactive && !isPlot && /*#__PURE__*/React.createElement("foreignObject", {
+    x: width / 2 - 14,
+    y: 0,
+    width: 40,
+    height: 40
+  }, correctness.value === 'correct' ? /*#__PURE__*/React.createElement(Check, {
+    className: classNames(classes.correctnessIcon, classes.correctIcon),
+    title: correctness.label
+  }) : /*#__PURE__*/React.createElement(Close, {
+    className: classNames(classes.correctnessIcon, classes.incorrectIcon),
+    title: correctness.label
+  })));
+};
+
+RawDragHandle$1.propTypes = {
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired,
+  width: PropTypes.number,
+  graphProps: types.GraphPropsType.isRequired,
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  interactive: PropTypes.bool,
+  isHovered: PropTypes.bool,
+  correctness: PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string
+  }),
+  color: PropTypes.string
+};
+const DragHandle$1 = withStyles(theme => ({
+  handle: {
+    height: '10px',
+    fill: 'transparent',
+    transition: 'fill 200ms linear, height 200ms linear',
+    '&.correct': correct('fill'),
+    '&.incorrect': incorrect('fill'),
+    '&.non-interactive': disabled('fill')
+  },
+  transparentHandle: {
+    fill: 'transparent',
+    clipPath: 'polygon(50% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 0%)'
+  },
+  handleContainer: {
+    height: 30,
+    '&:hover': {
+      '& .handle': {
+        fill: color.secondaryDark(),
+        height: '16px'
+      }
+    },
+    '&.non-interactive': disabled('fill'),
+    '&.incorrect': incorrect('fill'),
+    '&.correct': correct('fill')
+  },
+  svgOverflowVisible: {
+    overflow: 'visible !important'
+  },
+  correctIcon: {
+    backgroundColor: color.correct()
+  },
+  incorrectIcon: {
+    backgroundColor: color.incorrectWithIcon()
+  },
+  correctnessIcon: {
+    borderRadius: theme.spacing.unit * 2,
+    color: color.defaults.WHITE,
+    fontSize: '16px',
+    padding: '2px',
+    border: `4px solid ${color.defaults.WHITE}`,
+    width: '16px',
+    height: '16px',
+    boxSizing: 'unset' // to override the default border-box in IBX
+
+  }
+}))(RawDragHandle$1);
+const D = gridDraggable({
+  axis: 'y',
+  fromDelta: (props, delta) => {
+    //TODO: should be in grid-draggable, if axis is y delta.x should always be 0.
+    delta.x = 0;
+    const newPoint = utils.point(props).add(utils.point(delta));
+    return newPoint.y;
+  },
+  bounds: (props, {
+    domain,
+    range
+  }) => {
+    const area = {
+      left: 0,
+      top: props.y,
+      bottom: props.y,
+      right: 0
+    };
+    return utils.bounds(area, domain, range);
+  },
+  anchorPoint: props => {
+    return {
+      x: props.x,
+      y: props.y
+    };
+  }
+})(DragHandle$1);
+
+const CorrectCheckIcon = ({
+  dashColor
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("circle", {
+  cx: "12",
+  cy: "12",
+  r: "11",
+  fill: "white",
+  stroke: dashColor || '#7E8494',
+  strokeWidth: "2",
+  strokeDasharray: "5 5"
+}), /*#__PURE__*/React.createElement("mask", {
+  id: "path-2-outside-1_3089_3799",
+  maskUnits: "userSpaceOnUse",
+  x: "2",
+  y: "3",
+  width: "19",
+  height: "18",
+  fill: "black"
+}, /*#__PURE__*/React.createElement("rect", {
+  fill: "white",
+  x: "2",
+  y: "3",
+  width: "19",
+  height: "18"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M12 20C9.125 20 6.5 18.5 5.0625 16C3.625 13.5312 3.625 10.5 5.0625 8C6.5 5.53125 9.125 4 12 4C14.8438 4 17.4688 5.53125 18.9062 8C20.3438 10.5 20.3438 13.5312 18.9062 16C17.4688 18.5 14.8438 20 12 20ZM15.5312 10.5312H15.5C15.8125 10.25 15.8125 9.78125 15.5 9.46875C15.2188 9.1875 14.75 9.1875 14.4688 9.46875L11 12.9688L9.53125 11.5C9.21875 11.1875 8.75 11.1875 8.46875 11.5C8.15625 11.7812 8.15625 12.25 8.46875 12.5312L10.4688 14.5312C10.75 14.8438 11.2188 14.8438 11.5312 14.5312L15.5312 10.5312Z"
+})), /*#__PURE__*/React.createElement("path", {
+  d: "M12 20C9.125 20 6.5 18.5 5.0625 16C3.625 13.5312 3.625 10.5 5.0625 8C6.5 5.53125 9.125 4 12 4C14.8438 4 17.4688 5.53125 18.9062 8C20.3438 10.5 20.3438 13.5312 18.9062 16C17.4688 18.5 14.8438 20 12 20ZM15.5312 10.5312H15.5C15.8125 10.25 15.8125 9.78125 15.5 9.46875C15.2188 9.1875 14.75 9.1875 14.4688 9.46875L11 12.9688L9.53125 11.5C9.21875 11.1875 8.75 11.1875 8.46875 11.5C8.15625 11.7812 8.15625 12.25 8.46875 12.5312L10.4688 14.5312C10.75 14.8438 11.2188 14.8438 11.5312 14.5312L15.5312 10.5312Z",
+  fill: "#0EA449"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M5.0625 16L5.92942 15.5015L5.92668 15.4968L5.0625 16ZM5.0625 8L4.19831 7.4968L4.19559 7.50153L5.0625 8ZM18.9062 8L19.7732 7.50152L19.7704 7.49681L18.9062 8ZM18.9062 16L18.0421 15.4968L18.0393 15.5015L18.9062 16ZM15.5312 10.5312L16.2384 11.2384L17.9455 9.53125H15.5312V10.5312ZM15.5 10.5312L14.831 9.78796L12.894 11.5312H15.5V10.5312ZM14.4688 9.46875L13.7616 8.76164L13.7585 8.76482L14.4688 9.46875ZM11 12.9688L10.2929 13.6759L11.0032 14.3861L11.7103 13.6727L11 12.9688ZM8.46875 11.5L9.13771 12.2433L9.17684 12.2081L9.21204 12.169L8.46875 11.5ZM8.46875 12.5312L9.17586 11.8241L9.15726 11.8055L9.13771 11.788L8.46875 12.5312ZM10.4688 14.5312L11.212 13.8623L11.1945 13.8427L11.1759 13.8241L10.4688 14.5312ZM12 20V19C9.479 19 7.18657 17.6879 5.92941 15.5015L5.0625 16L4.19559 16.4985C5.81343 19.3121 8.771 21 12 21V20ZM5.0625 16L5.92668 15.4968C4.6714 13.341 4.66824 10.6918 5.92941 8.49847L5.0625 8L4.19559 7.50153C2.58176 10.3082 2.5786 13.7215 4.19832 16.5032L5.0625 16ZM5.0625 8L5.92668 8.50319C7.18712 6.33851 9.48502 5 12 5V4V3C8.76498 3 5.81288 4.72399 4.19832 7.49681L5.0625 8ZM12 4V5C14.4816 5 16.7805 6.33661 18.0421 8.50319L18.9062 8L19.7704 7.49681C18.157 4.72589 15.2059 3 12 3V4ZM18.9062 8L18.0393 8.49847C19.3005 10.6918 19.2973 13.341 18.0421 15.4968L18.9062 16L19.7704 16.5032C21.3902 13.7215 21.387 10.3082 19.7732 7.50153L18.9062 8ZM18.9062 16L18.0393 15.5015C16.7811 17.6898 14.4876 19 12 19V20V21C15.1999 21 18.1564 19.3102 19.7732 16.4985L18.9062 16ZM15.5312 10.5312V9.53125H15.5V10.5312V11.5312H15.5312V10.5312ZM15.5 10.5312L16.169 11.2745C16.9447 10.5764 16.8883 9.44281 16.2071 8.76164L15.5 9.46875L14.7929 10.1759C14.7696 10.1525 14.7344 10.0966 14.7344 10.0117C14.7344 9.92377 14.7735 9.83972 14.831 9.78796L15.5 10.5312ZM15.5 9.46875L16.2071 8.76164C15.5353 8.08987 14.4334 8.08987 13.7616 8.76164L14.4688 9.46875L15.1759 10.1759C15.1167 10.235 15.0442 10.2578 14.9844 10.2578C14.9245 10.2578 14.8521 10.235 14.7929 10.1759L15.5 9.46875ZM14.4688 9.46875L13.7585 8.76482L10.2897 12.2648L11 12.9688L11.7103 13.6727L15.179 10.1727L14.4688 9.46875ZM11 12.9688L11.7071 12.2616L10.2384 10.7929L9.53125 11.5L8.82414 12.2071L10.2929 13.6759L11 12.9688ZM9.53125 11.5L10.2384 10.7929C9.55719 10.1117 8.42362 10.0553 7.72546 10.831L8.46875 11.5L9.21204 12.169C9.16028 12.2265 9.07623 12.2656 8.98828 12.2656C8.90344 12.2656 8.84748 12.2304 8.82414 12.2071L9.53125 11.5ZM8.46875 11.5L7.79979 10.7567C7.04591 11.4352 7.04591 12.5961 7.79979 13.2745L8.46875 12.5312L9.13771 11.788C9.19301 11.8377 9.23438 11.9208 9.23438 12.0156C9.23438 12.1105 9.19301 12.1935 9.13771 12.2433L8.46875 11.5ZM8.46875 12.5312L7.76164 13.2384L9.76164 15.2384L10.4688 14.5312L11.1759 13.8241L9.17586 11.8241L8.46875 12.5312ZM10.4688 14.5312L9.72546 15.2002C10.4236 15.976 11.5572 15.9195 12.2384 15.2384L11.5312 14.5312L10.8241 13.8241C10.8475 13.8008 10.9034 13.7656 10.9883 13.7656C11.0762 13.7656 11.1603 13.8048 11.212 13.8623L10.4688 14.5312ZM11.5312 14.5312L12.2384 15.2384L16.2384 11.2384L15.5312 10.5312L14.8241 9.82414L10.8241 13.8241L11.5312 14.5312Z",
+  fill: "white",
+  mask: "url(#path-2-outside-1_3089_3799)"
+}));
+
+const log$2 = debug('pie-lib:chart:bars');
+const histogramColors = ['#006699', '#F59B00', '#08916D', '#529EE0', '#52B7D8', '#D9A6C2', '#FFB03B', '#54A77B', '#E16032', '#4FD2D2', '#F0E442', '#E287B2'];
+const hoverHistogramColors = ['#003754', '#975616', '#00503B', '#225982', '#1F687D', '#825E6F', '#996428', '#255E44', '#8A331F', '#167A7A', '#91862D', '#894A65'];
+
+const calculateFillColor = (isHovered, barColor, index, hoverHistogramColors, allowRolloverEvent) => {
+  if (isHovered && barColor && allowRolloverEvent) {
+    return hoverHistogramColors[index % hoverHistogramColors.length];
+  }
+
+  if (isHovered && allowRolloverEvent) {
+    return color.visualElementsColors.ROLLOVER_FILL_BAR_COLOR;
+  }
+
+  return barColor || null;
+};
+
+class RawBar extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleMouseMove = e => {
+      // Update mouse position
+      this.mouseX = e.clientX;
+      this.mouseY = e.clientY; // Check if the mouse is inside the <g> element
+
+      const isMouseInside = this.isMouseInsideSvgElement();
+      this.setState({
+        isHovered: isMouseInside
+      });
+    };
+
+    this.isMouseInsideSvgElement = () => {
+      const gBoundingBox = this.gRef.getBoundingClientRect(); // Check if the mouse position is within the bounding box
+
+      return this.mouseX >= gBoundingBox.left && this.mouseX <= gBoundingBox.right && this.mouseY >= gBoundingBox.top && this.mouseY <= gBoundingBox.bottom;
+    };
+
+    this.handleMouseEnter = () => {
+      this.setState({
+        isHovered: true
+      });
+    };
+
+    this.handleMouseLeave = () => {
+      this.setState({
+        isHovered: false
+      });
+    };
+
+    this.setDragValue = dragValue => this.setState({
+      dragValue
+    });
+
+    this.dragStop = () => {
+      const {
+        label,
+        onChangeCategory
+      } = this.props;
+      const {
+        dragValue
+      } = this.state;
+      log$2('[dragStop]', dragValue);
+
+      if (dragValue !== undefined) {
+        onChangeCategory({
+          label,
+          value: dragValue
+        });
+      }
+
+      this.setDragValue(undefined);
+    };
+
+    this.dragValue = (existing, next) => {
+      log$2('[dragValue] next:', next);
+      this.setDragValue(next);
+    };
+
+    this.state = {
+      dragValue: undefined,
+      isHovered: false
+    };
+    this.mouseX = 0;
+    this.mouseY = 0;
+  }
+
+  componentDidMount() {
+    window.addEventListener('mousemove', this.handleMouseMove);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('mousemove', this.handleMouseMove);
+  }
+
+  render() {
+    const {
+      graphProps,
+      value,
+      label,
+      classes,
+      xBand,
+      index,
+      interactive,
+      correctness,
+      barColor,
+      defineChart,
+      correctData
+    } = this.props;
+    const {
+      scale,
+      range
+    } = graphProps;
+    const {
+      dragValue,
+      isHovered
+    } = this.state;
+    const allowRolloverEvent = interactive && !correctness;
+    const fillColor = calculateFillColor(isHovered, barColor, index, hoverHistogramColors, allowRolloverEvent);
+    const v = Number.isFinite(dragValue) ? dragValue : value;
+    const barWidth = xBand.bandwidth();
+    const barHeight = scale.y(range.max - v);
+    const barX = xBand(bandKey({
+      label
+    }, index));
+    const rawY = range.max - v;
+    const yy = range.max - rawY;
+    const correctValue = correctData ? correctData.find(d => d.label === label) : null;
+    log$2('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);
+    const Component = interactive ? D : DragHandle$1;
+    const isHistogram = !!barColor;
+    return /*#__PURE__*/React.createElement("g", {
+      ref: ref => this.gRef = ref,
+      onMouseEnter: this.handleMouseEnter,
+      onMouseLeave: this.handleMouseLeave,
+      onTouchStart: this.handleMouseEnter,
+      onTouchEnd: this.handleMouseLeave
+    }, /*#__PURE__*/React.createElement(Bar$4, {
+      x: barX,
+      y: scale.y(yy),
+      width: barWidth,
+      height: barHeight,
+      className: classes.bar,
+      style: {
+        fill: fillColor
+      }
+    }), correctness && correctness.value === 'incorrect' && (() => {
+      const correctVal = parseFloat(correctValue && correctValue.value);
+      if (isNaN(correctVal)) return null;
+      const correctPxHeight = scale.y(range.max - correctVal);
+      const actualPxHeight = barHeight;
+      const diffPx = Math.abs(correctPxHeight - actualPxHeight);
+      const yDiff = scale.y(correctVal);
+      const indicatorBarColor = correctPxHeight > actualPxHeight ? color.borderGray() : color.defaults.WHITE;
+      const yToRender = correctPxHeight > actualPxHeight ? yDiff : yDiff - diffPx;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Bar$4, {
+        x: barX + 2 // add 2px for the stroke (the dashed border)
+        ,
+        y: yToRender,
+        width: barWidth - 4 // substract 4px for the total stroke
+        ,
+        height: diffPx,
+        className: classes.bar,
+        style: {
+          stroke: indicatorBarColor,
+          strokeWidth: 2,
+          strokeDasharray: '5,2',
+          fill: 'none'
+        }
+      }), /*#__PURE__*/React.createElement("foreignObject", {
+        x: barX + barWidth - (isHistogram ? 24 : 14),
+        y: yDiff - 12,
+        width: 24,
+        height: 24
+      }, /*#__PURE__*/React.createElement(CorrectCheckIcon, {
+        dashColor: indicatorBarColor
+      })));
+    })(), /*#__PURE__*/React.createElement(Component, {
+      x: barX,
+      y: v,
+      defineChart: defineChart,
+      interactive: interactive,
+      width: barWidth,
+      onDrag: v => this.dragValue(value, v),
+      onDragStop: this.dragStop,
+      graphProps: graphProps,
+      correctness: correctness,
+      isHovered: isHovered,
+      color: fillColor
+    }));
+  }
+
+}
+RawBar.propTypes = {
+  barColor: PropTypes.string,
+  onChangeCategory: PropTypes.func,
+  value: PropTypes.number,
+  classes: PropTypes.object,
+  label: PropTypes.string,
+  xBand: PropTypes.func,
+  index: PropTypes.number.isRequired,
+  graphProps: types.GraphPropsType.isRequired,
+  interactive: PropTypes.bool,
+  correctness: PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string
+  }),
+  correctData: PropTypes.array
+};
+const Bar$3 = withStyles$1(theme => ({
+  bar: {
+    fill: color.defaults.TERTIARY
+  },
+  correctIcon: {
+    backgroundColor: color.correct(),
+    borderRadius: theme.spacing.unit * 2,
+    color: color.defaults.WHITE,
+    fontSize: '10px',
+    width: '10px',
+    height: '10px',
+    padding: '2px',
+    border: `1px solid ${color.defaults.WHITE}`,
+    boxSizing: 'unset' // to override the default border-box in IBX
+
+  }
+}))(RawBar);
+class Bars extends React.Component {
+  render() {
+    const {
+      data,
+      graphProps,
+      xBand,
+      onChangeCategory,
+      defineChart,
+      histogram,
+      correctData
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Group, null, (data || []).map((d, index) => /*#__PURE__*/React.createElement(Bar$3, {
+      value: d.value,
+      interactive: defineChart || d.interactive,
+      defineChart: defineChart,
+      label: d.label,
+      xBand: xBand,
+      index: index,
+      key: `bar-${d.label}-${d.value}-${index}`,
+      onChangeCategory: category => onChangeCategory(index, category),
+      graphProps: graphProps,
+      correctness: d.correctness,
+      correctData: correctData,
+      barColor: histogram && (histogramColors[index] ? histogramColors[index] : histogramColors[index % histogramColors.length])
+    })));
+  }
+
+}
+Bars.propTypes = {
+  data: PropTypes.array,
+  correctData: PropTypes.array,
+  onChangeCategory: PropTypes.func,
+  defineChart: PropTypes.bool,
+  xBand: PropTypes.func,
+  graphProps: types.GraphPropsType.isRequired,
+  histogram: PropTypes.bool
+};
+
+let Bar$1 = class Bar extends React.Component {
+  render() {
+    const props = this.props;
+    const {
+      data,
+      graphProps
+    } = props;
+    const {
+      scale = {},
+      size = {}
+    } = graphProps || {};
+    const xBand = dataToXBand(scale.x, data, size.width, 'bar');
+    return /*#__PURE__*/React.createElement(Bars, _extends({}, props, {
+      xBand: xBand
+    }));
+  }
+
+};
+Bar$1.propTypes = {
+  data: PropTypes.array,
+  onChange: PropTypes.func,
+  graphProps: types.GraphPropsType.isRequired
+};
+var Bar$2 = (() => ({
+  type: 'bar',
+  Component: Bar$1,
+  name: 'Bar'
+}));
+
+class Histogram extends React.Component {
+  render() {
+    const props = this.props;
+    const {
+      data,
+      graphProps
+    } = props;
+    const {
+      scale = {},
+      size = {}
+    } = graphProps || {};
+    const xBand = dataToXBand(scale.x, data, size.width, 'histogram');
+    return /*#__PURE__*/React.createElement(Bars, _extends({}, props, {
+      xBand: xBand,
+      histogram: true
+    }));
+  }
+
+}
+Histogram.propTypes = {
+  data: PropTypes.array,
+  onChange: PropTypes.func,
+  graphProps: types.GraphPropsType.isRequired
+};
+var Histogram$1 = (() => ({
+  type: 'histogram',
+  Component: Histogram,
+  name: 'Histogram'
+}));
+
+const _excluded$2 = ["x", "y", "graphProps", "classes", "className", "interactive", "CustomDraggableComponent", "correctness"];
+
+class RawDragHandle extends React.Component {
+  render() {
+    const _this$props = this.props,
+          {
+      x,
+      y,
+      graphProps,
+      classes,
+      className,
+      interactive,
+      CustomDraggableComponent,
+      correctness
+    } = _this$props,
+          rest = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
+
+    const {
+      scale
+    } = graphProps;
+    return /*#__PURE__*/React.createElement(CustomDraggableComponent, _extends({
+      scale: scale,
+      x: x,
+      y: y,
+      classes: classes,
+      className: classNames(className, !interactive && 'non-interactive'),
+      correctness: correctness,
+      interactive: interactive
+    }, rest));
+  }
+
+}
+
+RawDragHandle.propTypes = {
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired,
+  width: PropTypes.number,
+  graphProps: types.GraphPropsType.isRequired,
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  interactive: PropTypes.bool,
+  CustomDraggableComponent: PropTypes.func,
+  correctness: PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string
+  })
+};
+const DragHandle = withStyles$1(theme => ({
+  handle: {
+    transition: 'fill 200ms linear, height 200ms linear',
+    '&.non-interactive': disabled('fill')
+  },
+  transparentHandle: {
+    height: '20px',
+    fill: 'transparent',
+    stroke: 'transparent'
+  },
+  line: {
+    stroke: color.defaults.TEXT,
+    transition: 'fill 200ms linear, height 200ms linear',
+    '&.non-interactive': disabled('stroke')
+  },
+  disabledPoint: {
+    fill: color.defaults.BLACK + ' !important',
+    stroke: color.defaults.BLACK + ' !important'
+  },
+  correctIcon: {
+    backgroundColor: color.correct()
+  },
+  incorrectIcon: {
+    backgroundColor: color.incorrectWithIcon()
+  },
+  correctnessIcon: {
+    borderRadius: theme.spacing.unit * 2,
+    color: color.defaults.WHITE,
+    fontSize: '16px',
+    width: '16px',
+    height: '16px',
+    padding: '2px',
+    border: `1px solid ${color.defaults.WHITE}`,
+    stroke: 'initial',
+    boxSizing: 'unset' // to override the default border-box in IBX
+
+  },
+  smallIcon: {
+    fontSize: '10px',
+    width: '10px',
+    height: '10px'
+  }
+}))(RawDragHandle);
+const DraggableHandle = gridDraggable({
+  axis: 'y',
+  fromDelta: (props, delta) => {
+    //TODO: should be in grid-draggable, if axis is y delta.x should always be 0.
+    delta.x = 0;
+    const newPoint = utils.point(props).add(utils.point(delta));
+    return newPoint.y;
+  },
+  bounds: (props, {
+    domain,
+    range
+  }) => {
+    const area = {
+      left: 0,
+      top: props.y,
+      bottom: props.y,
+      right: 0
+    };
+    return utils.bounds(area, domain, range);
+  },
+  anchorPoint: props => {
+    return {
+      x: props.x,
+      y: props.y
+    };
+  }
+})(DragHandle);
+
+const getData = (data, domain) => {
+  const {
+    max
+  } = domain || {};
+  const length = data.length;
+
+  if (!max || !length) {
+    return [];
+  }
+
+  return data.map((el, i) => _extends({}, el, {
+    x: length > 1 ? i * (max / (length - 1)) : 0.5,
+    y: el.value
+  }));
+};
+
+class RawLine extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.setDragValue = line => this.setState({
+      line
+    });
+
+    this.dragStop = index => {
+      const {
+        onChange
+      } = this.props;
+      this.setState({
+        dragging: false
+      }, () => {
+        onChange(index, this.state.line[index]);
+      });
+    };
+
+    this.dragValue = (index, existing, next) => {
+      const newLine = [...this.state.line];
+      newLine[index].dragValue = next;
+      this.setDragValue(newLine);
+    };
+
+    this.state = {
+      dragValue: undefined,
+      line: getData(props.data, props.graphProps.domain)
+    };
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!isEqual(this.props.data, nextProps.data)) {
+      this.setState({
+        line: getData(nextProps.data, nextProps.graphProps.domain)
+      });
+    }
+  }
+
+  render() {
+    const {
+      graphProps,
+      data,
+      classes,
+      CustomDraggableComponent,
+      defineChart,
+      correctData
+    } = this.props;
+    const {
+      line: lineState,
+      dragging
+    } = this.state;
+    const {
+      scale
+    } = graphProps;
+    const lineToUse = dragging ? lineState : getData(data, graphProps.domain);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LinePath, {
+      data: lineToUse,
+      x: d => scale.x(d.x),
+      y: d => scale.y(d.dragValue !== undefined ? d.dragValue : d.y),
+      className: classes.line
+    }), lineToUse && lineToUse.map((point, i) => {
+      const r = 6;
+      const enableDraggable = defineChart || point.interactive;
+      const Component = enableDraggable ? DraggableHandle : DragHandle;
+      return /*#__PURE__*/React.createElement(Component, {
+        key: `point-${point.x}-${i}`,
+        x: point.x,
+        y: point.dragValue !== undefined ? point.dragValue : point.y,
+        interactive: enableDraggable,
+        r: r,
+        onDragStart: () => this.setState({
+          dragging: true
+        }),
+        onDrag: v => this.dragValue(i, point.dragValue !== undefined ? point.dragValue : point.y, v),
+        onDragStop: () => this.dragStop(i),
+        graphProps: graphProps,
+        CustomDraggableComponent: CustomDraggableComponent,
+        correctness: point.correctness,
+        correctData: correctData,
+        label: point.label
+      });
+    }));
+  }
+
+}
+RawLine.propTypes = {
+  onChange: PropTypes.func,
+  value: PropTypes.number,
+  classes: PropTypes.object,
+  label: PropTypes.string,
+  xBand: PropTypes.func,
+  index: PropTypes.number.isRequired,
+  graphProps: types.GraphPropsType.isRequired,
+  defineChart: PropTypes.bool,
+  data: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.number
+  })),
+  CustomDraggableComponent: PropTypes.func
+};
+RawLine.defaultProps = {
+  index: 0
+};
+const StyledLine = withStyles$1(() => ({
+  line: {
+    fill: 'transparent',
+    stroke: color.defaults.TERTIARY,
+    strokeWidth: 3,
+    transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in'
+  }
+}))(RawLine);
+class Line extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.changeLine = (index, category) => {
+      const {
+        onChange
+      } = this.props;
+      const newLine = [...this.props.data];
+      const {
+        dragValue,
+        value
+      } = category;
+      newLine[index].value = dragValue >= 0 ? dragValue : value;
+      onChange(newLine);
+    };
+  }
+
+  render() {
+    const props = this.props;
+    return /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(StyledLine, _extends({}, props, {
+      onChange: this.changeLine
+    })));
+  }
+
+}
+Line.propTypes = {
+  data: PropTypes.array,
+  onChange: PropTypes.func,
+  xBand: PropTypes.func,
+  graphProps: types.GraphPropsType.isRequired
+};
+
+const _excluded$1 = ["scale", "x", "y", "className", "classes", "r", "correctness", "interactive", "correctData", "label"];
+
+const DraggableComponent$1 = _ref => {
+  let {
+    scale,
+    x,
+    y,
+    className,
+    classes,
+    r,
+    correctness,
+    interactive,
+    correctData,
+    label
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+
+  const [isHovered, setIsHovered] = React.useState(false);
+  const allowRolloverEvent = !correctness && interactive;
+  return /*#__PURE__*/React.createElement("g", {
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false)
+  }, /*#__PURE__*/React.createElement("circle", _extends({
+    cx: scale.x(x),
+    cy: scale.y(y),
+    r: r * 3,
+    className: classNames(classes.transparentHandle, className),
+    pointerEvents: correctness ? 'none' : ''
+  }, rest)), /*#__PURE__*/React.createElement("circle", _extends({
+    cx: scale.x(x),
+    cy: scale.y(y),
+    r: r,
+    className: classNames(className, classes.handle, correctness && !interactive && classes.disabledPoint)
+  }, rest)), /*#__PURE__*/React.createElement(CorrectnessIndicator, {
+    scale: scale,
+    x: x,
+    y: y,
+    classes: classes,
+    r: r,
+    correctness: correctness,
+    interactive: interactive
+  }), /*#__PURE__*/React.createElement(SmallCorrectPointIndicator, {
+    scale: scale,
+    x: x,
+    r: r,
+    correctness: correctness,
+    classes: classes,
+    correctData: correctData,
+    label: label
+  }), isHovered && allowRolloverEvent && /*#__PURE__*/React.createElement("rect", {
+    x: scale.x(x) - r * 2,
+    y: scale.y(y) - r * 2,
+    width: r * 4,
+    height: r * 4,
+    stroke: color.defaults.BORDER_GRAY,
+    strokeWidth: "1",
+    fill: "none"
+  }));
+};
+
+DraggableComponent$1.propTypes = {
+  scale: PropTypes.object,
+  x: PropTypes.number,
+  y: PropTypes.number,
+  r: PropTypes.number,
+  className: PropTypes.string,
+  classes: PropTypes.object,
+  correctness: PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string
+  })
+};
+class LineDot extends React.Component {
+  render() {
+    const props = this.props;
+    const {
+      data,
+      graphProps
+    } = props;
+    const {
+      scale = {},
+      size = {}
+    } = graphProps || {};
+    const xBand = dataToXBand(scale.x, data, size.width, 'lineDot');
+    return /*#__PURE__*/React.createElement(Line, _extends({}, props, {
+      xBand: xBand,
+      CustomDraggableComponent: DraggableComponent$1
+    }));
+  }
+
+}
+LineDot.propTypes = {
+  data: PropTypes.array,
+  onChange: PropTypes.func,
+  graphProps: types.GraphPropsType.isRequired
+};
+var LineDot$1 = (() => ({
+  type: 'lineDot',
+  Component: LineDot,
+  name: 'Line Dot'
+}));
+
+const _excluded = ["classes", "className", "scale", "x", "y", "r", "correctness", "interactive", "correctData", "label"];
+
+const DraggableComponent = props => {
+  const {
+    classes = {},
+    className,
+    scale,
+    x,
+    y,
+    r,
+    correctness,
+    interactive,
+    correctData,
+    label
+  } = props,
+        rest = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const [hover, setHover] = useState(false);
+  const squareSize = r * 4;
+  const squareHalf = squareSize / 2;
+  const cx = scale.x(x);
+  const cy = scale.y(y);
+  return /*#__PURE__*/React.createElement(Group, {
+    className: classNames(className, classes.line, correctness && !interactive && classes.disabledPoint)
+  }, /*#__PURE__*/React.createElement(LinePath, {
+    data: [{
+      x: scale.x(x) - r,
+      y: scale.y(y) + r
+    }, {
+      x: scale.x(x) + r,
+      y: scale.y(y) - r
+    }],
+    key: `point-${x}-${y}-1`,
+    x: d => d.x,
+    y: d => d.y,
+    strokeWidth: 5,
+    style: {
+      pointerEvents: 'none'
+    }
+  }), /*#__PURE__*/React.createElement(LinePath, {
+    data: [{
+      x: scale.x(x) - r,
+      y: scale.y(y) - r
+    }, {
+      x: scale.x(x) + r,
+      y: scale.y(y) + r
+    }],
+    key: `point-${x}-${y}-2`,
+    x: d => d.x,
+    y: d => d.y,
+    strokeWidth: 5,
+    style: {
+      pointerEvents: 'none'
+    }
+  }), hover && /*#__PURE__*/React.createElement("rect", {
+    x: cx - squareHalf,
+    y: cy - squareHalf,
+    width: squareSize,
+    height: squareSize,
+    stroke: color.defaults.BORDER_GRAY,
+    fill: "none",
+    strokeWidth: 2,
+    pointerEvents: "none"
+  }), /*#__PURE__*/React.createElement("circle", _extends({
+    cx: cx,
+    cy: cy,
+    r: r * 2,
+    className: classNames(classes.transparentHandle),
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => setHover(false)
+  }, rest)), /*#__PURE__*/React.createElement(CorrectnessIndicator, {
+    scale: scale,
+    x: x,
+    y: y,
+    classes: classes,
+    r: r,
+    correctness: correctness,
+    interactive: interactive
+  }), /*#__PURE__*/React.createElement(SmallCorrectPointIndicator, {
+    scale: scale,
+    x: x,
+    r: r,
+    correctness: correctness,
+    classes: classes,
+    correctData: correctData,
+    label: label
+  }));
+};
+
+DraggableComponent.propTypes = {
+  scale: PropTypes.object,
+  x: PropTypes.number,
+  y: PropTypes.number,
+  r: PropTypes.number,
+  className: PropTypes.string,
+  classes: PropTypes.object,
+  correctness: PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string
+  })
+};
+class LineCross extends React.Component {
+  render() {
+    const props = this.props;
+    const {
+      data,
+      graphProps
+    } = props;
+    const {
+      scale = {},
+      size = {}
+    } = graphProps || {};
+    const xBand = dataToXBand(scale.x, data, size.width, 'lineCross');
+    return /*#__PURE__*/React.createElement(Line, _extends({}, props, {
+      xBand: xBand,
+      CustomDraggableComponent: DraggableComponent
+    }));
+  }
+
+}
+LineCross.propTypes = {
+  data: PropTypes.array,
+  onChange: PropTypes.func,
+  graphProps: types.GraphPropsType.isRequired
+};
+var LineCross$1 = (() => ({
+  type: 'lineCross',
+  Component: LineCross,
+  name: 'Line Cross'
+}));
+
+const log$1 = debug('pie-lib:chart:bars');
+const ICON_SIZE = 16; // 10px icon + 2px padding on all sides + 1px border
+
+class RawPlot extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleMouseEnter = () => {
+      this.setState({
+        isHovered: true
+      });
+    };
+
+    this.handleMouseLeave = () => {
+      this.setState({
+        isHovered: false
+      });
+    };
+
+    this.setDragValue = dragValue => this.setState({
+      dragValue
+    });
+
+    this.dragStop = () => {
+      const {
+        label,
+        onChangeCategory
+      } = this.props;
+      const {
+        dragValue
+      } = this.state;
+      log$1('[dragStop]', dragValue);
+
+      if (dragValue !== undefined) {
+        onChangeCategory({
+          label,
+          value: dragValue
+        });
+      }
+
+      this.setDragValue(undefined);
+    };
+
+    this.dragValue = (existing, next) => {
+      log$1('[dragValue] next:', next);
+      this.setDragValue(next);
+    };
+
+    this.renderCorrectnessIcon = (barX, barWidth, correctVal, correctness, classes, scale) => /*#__PURE__*/React.createElement("foreignObject", {
+      x: barX + barWidth / 2 - ICON_SIZE / 2,
+      y: scale.y(correctVal) + ICON_SIZE,
+      width: ICON_SIZE,
+      height: ICON_SIZE
+    }, /*#__PURE__*/React.createElement(Check, {
+      className: classNames(classes.correctnessIcon, classes.correctIcon, classes.smallIcon),
+      title: correctness.label
+    }));
+
+    this.state = {
+      dragValue: undefined,
+      isHovered: false
+    };
+  }
+
+  render() {
+    const {
+      graphProps,
+      value,
+      label,
+      classes,
+      xBand,
+      index,
+      CustomBarElement,
+      interactive,
+      correctness,
+      defineChart,
+      correctData
+    } = this.props;
+    const {
+      scale,
+      range,
+      size
+    } = graphProps;
+    const {
+      max
+    } = range || {};
+    const {
+      dragValue,
+      isHovered
+    } = this.state;
+    const v = Number.isFinite(dragValue) ? dragValue : value;
+    const barWidth = xBand.bandwidth();
+    const barHeight = scale.y(range.max - v);
+    const barX = xBand(bandKey({
+      label
+    }, index));
+    log$1('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);
+    const values = [];
+
+    for (let i = 0; i < v; i++) {
+      values.push(i);
+    }
+
+    const pointHeight = size.height / max;
+    const pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;
+    const Component = interactive ? D : DragHandle$1;
+    const allowRolloverEvent = interactive && !correctness;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("g", {
+      onMouseEnter: this.handleMouseEnter,
+      onMouseLeave: this.handleMouseLeave,
+      onTouchStart: this.handleMouseEnter,
+      onTouchEnd: this.handleMouseLeave
+    }, isHovered && allowRolloverEvent && /*#__PURE__*/React.createElement("rect", {
+      x: barX,
+      y: scale.y(v),
+      width: barWidth,
+      height: values != null && values.length ? pointHeight * values.length : 0,
+      stroke: color.defaults.BORDER_GRAY,
+      strokeWidth: '4px',
+      fill: 'transparent'
+    }), values.map(index => CustomBarElement({
+      index,
+      pointDiameter,
+      barX,
+      barWidth,
+      pointHeight,
+      label,
+      value,
+      classes,
+      scale
+    })), correctness && correctness.value === 'incorrect' && (() => {
+      const correctVal = parseFloat(correctData[index] && correctData[index].value);
+      if (isNaN(correctVal)) return null;
+      const selectedVal = v;
+
+      if (selectedVal > correctVal) {
+        // selected is higher than correct: overlay the correct last segment
+        const overlayValues = [];
+
+        for (let i = 0; i < correctVal; i++) {
+          overlayValues.push(i);
+        }
+
+        const lastIndexOfOverlay = overlayValues.length - 1;
+        const lastOverlayValue = overlayValues[lastIndexOfOverlay];
+        const barX = xBand(bandKey({
+          label
+        }, index));
+        const barWidth = xBand.bandwidth();
+        const pointHeight = size.height / max;
+        const pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomBarElement, {
+          index: lastOverlayValue,
+          pointDiameter: pointDiameter + 10 // increase point diameter for dotted line
+          ,
+          barX: barX,
+          barWidth: barWidth,
+          pointHeight: pointHeight,
+          label: label,
+          value: value,
+          classes: classes,
+          scale: scale,
+          dottedOverline: true
+        }), this.renderCorrectnessIcon(barX, barWidth, correctVal, correctness, classes, scale));
+      } // selected is lower than correct, render missing segment below the correct bar
+
+
+      const valuesToRender = [];
+
+      for (let i = selectedVal; i < correctVal; i++) {
+        valuesToRender.push(i);
+      }
+
+      return /*#__PURE__*/React.createElement(React.Fragment, null, valuesToRender.map(idx => CustomBarElement({
+        index: idx,
+        pointDiameter,
+        barX,
+        barWidth,
+        pointHeight,
+        label,
+        value,
+        classes,
+        scale,
+        dottedOverline: true
+      })), this.renderCorrectnessIcon(barX, barWidth, correctVal, correctness, classes, scale));
+    })(), /*#__PURE__*/React.createElement(Component, {
+      x: barX,
+      y: v,
+      interactive: interactive,
+      width: barWidth,
+      onDrag: v => this.dragValue(value, v),
+      onDragStop: this.dragStop,
+      graphProps: graphProps,
+      correctness: correctness,
+      isHovered: isHovered,
+      defineChart: defineChart,
+      color: color.primaryDark(),
+      isPlot: true
+    })));
+  }
+
+}
+RawPlot.propTypes = {
+  onChangeCategory: PropTypes.func,
+  value: PropTypes.number,
+  classes: PropTypes.object,
+  label: PropTypes.string,
+  xBand: PropTypes.func,
+  index: PropTypes.number.isRequired,
+  graphProps: types.GraphPropsType.isRequired,
+  CustomBarElement: PropTypes.func,
+  interactive: PropTypes.bool,
+  correctness: PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string
+  })
+};
+const Bar = withStyles$1(theme => ({
+  dot: {
+    fill: color.visualElementsColors.PLOT_FILL_COLOR,
+    '&.correct': correct('stroke'),
+    '&.incorrect': incorrect('stroke')
+  },
+  dotColor: {
+    fill: color.visualElementsColors.PLOT_FILL_COLOR,
+    '&.correct': correct('fill'),
+    '&.incorrect': incorrect('fill')
+  },
+  line: {
+    stroke: color.visualElementsColors.PLOT_FILL_COLOR,
+    '&.correct': correct('stroke'),
+    '&.incorrect': incorrect('stroke')
+  },
+  correctIcon: {
+    backgroundColor: color.correct()
+  },
+  incorrectIcon: {
+    backgroundColor: color.incorrectWithIcon()
+  },
+  correctnessIcon: {
+    borderRadius: theme.spacing.unit * 2,
+    color: color.defaults.WHITE,
+    fontSize: '16px',
+    width: '16px',
+    height: '16px',
+    padding: '2px',
+    border: `1px solid ${color.defaults.WHITE}`,
+    stroke: 'initial',
+    boxSizing: 'unset' // to override the default border-box in IBX
+
+  },
+  smallIcon: {
+    fontSize: '10px',
+    width: '10px',
+    height: '10px'
+  }
+}))(RawPlot);
+class Plot extends React.Component {
+  render() {
+    const {
+      data,
+      graphProps,
+      xBand,
+      CustomBarElement,
+      onChangeCategory,
+      defineChart,
+      correctData
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Group, null, (data || []).map((d, index) => /*#__PURE__*/React.createElement(Bar, {
+      value: d.value,
+      label: d.label,
+      interactive: defineChart || d.interactive,
+      defineChart: defineChart,
+      xBand: xBand,
+      index: index,
+      key: `bar-${d.label}-${d.value}-${index}`,
+      onChangeCategory: category => onChangeCategory(index, category),
+      graphProps: graphProps,
+      CustomBarElement: CustomBarElement,
+      correctness: d.correctness,
+      correctData: correctData
+    })));
+  }
+
+}
+Plot.propTypes = {
+  data: PropTypes.array,
+  onChangeCategory: PropTypes.func,
+  xBand: PropTypes.func,
+  graphProps: types.GraphPropsType.isRequired,
+  defineChart: PropTypes.bool,
+  CustomBarElement: PropTypes.func
+};
+
+const CustomBarElement$1 = props => {
+  const {
+    index,
+    pointDiameter,
+    barX,
+    barWidth,
+    pointHeight,
+    label,
+    value,
+    classes,
+    scale,
+    dottedOverline
+  } = props;
+  const r = pointDiameter / 2;
+  const cx = barX + (barWidth - pointDiameter) / 2 + r;
+  const cy = scale.y(index) - (pointHeight - pointDiameter) / 2 - r;
+  const EXTRA_PADDING = 2;
+  return dottedOverline ? /*#__PURE__*/React.createElement(Circle, {
+    key: `point-${label}-${value}-${index}`,
+    cx: cx,
+    cy: cy,
+    r: r + EXTRA_PADDING,
+    strokeDasharray: "4,4",
+    stroke: color.defaults.BORDER_GRAY,
+    fill: "none"
+  }) : /*#__PURE__*/React.createElement(Circle, {
+    key: `point-${label}-${value}-${index}`,
+    className: classes.dot,
+    cx: cx,
+    cy: cy,
+    r: r
+  });
+};
+
+CustomBarElement$1.propTypes = {
+  index: PropTypes.number,
+  pointDiameter: PropTypes.number,
+  barX: PropTypes.number,
+  barWidth: PropTypes.number,
+  pointHeight: PropTypes.number,
+  value: PropTypes.number,
+  label: PropTypes.string,
+  classes: PropTypes.object,
+  scale: PropTypes.object,
+  dottedOverline: PropTypes.bool
+};
+class DotPlot extends React.Component {
+  render() {
+    const props = this.props;
+    const {
+      data,
+      graphProps
+    } = props;
+    const {
+      scale = {},
+      size = {}
+    } = graphProps || {};
+    const xBand = dataToXBand(scale.x, data, size.width, 'dotPlot');
+    return /*#__PURE__*/React.createElement(Plot, _extends({}, props, {
+      xBand: xBand,
+      CustomBarElement: CustomBarElement$1
+    }));
+  }
+
+}
+DotPlot.propTypes = {
+  data: PropTypes.array,
+  onChange: PropTypes.func,
+  graphProps: types.GraphPropsType.isRequired
+};
+var DotPlot$1 = (() => ({
+  type: 'dotPlot',
+  Component: DotPlot,
+  name: 'Dot Plot'
+}));
+
+const CustomBarElement = props => {
+  const {
+    index,
+    pointDiameter,
+    barX,
+    barWidth,
+    pointHeight,
+    label,
+    value,
+    classes,
+    scale,
+    dottedOverline
+  } = props;
+  const x = barX + (barWidth - pointDiameter) / 2;
+  const y = scale.y(index) - (pointHeight - pointDiameter) / 2;
+  const EXTRA_PADDING = 2;
+  return dottedOverline ? /*#__PURE__*/React.createElement("rect", {
+    key: `point-${label}-${value}-${index}`,
+    x: x - EXTRA_PADDING,
+    y: y - pointDiameter - EXTRA_PADDING,
+    width: pointDiameter + EXTRA_PADDING * 2,
+    height: pointDiameter + EXTRA_PADDING * 2,
+    strokeDasharray: "4,4",
+    stroke: color.defaults.BORDER_GRAY,
+    fill: "none"
+  }) : /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(LinePath, {
+    data: [{
+      x,
+      y
+    }, {
+      x: x + pointDiameter,
+      y: y - pointDiameter
+    }],
+    key: `point-${label}-${value}-${index}-1`,
+    className: classes.line,
+    x: d => d.x,
+    y: d => d.y,
+    strokeWidth: pointDiameter / 5
+  }), /*#__PURE__*/React.createElement(LinePath, {
+    data: [{
+      x,
+      y: y - pointDiameter
+    }, {
+      x: x + pointDiameter,
+      y
+    }],
+    key: `point-${label}-${value}-${index}-2`,
+    className: classes.line,
+    x: d => d.x,
+    y: d => d.y,
+    strokeWidth: pointDiameter / 5
+  }));
+};
+
+CustomBarElement.propTypes = {
+  index: PropTypes.number,
+  pointDiameter: PropTypes.number,
+  barX: PropTypes.number,
+  barWidth: PropTypes.number,
+  pointHeight: PropTypes.number,
+  value: PropTypes.number,
+  label: PropTypes.string,
+  classes: PropTypes.object,
+  scale: PropTypes.object
+};
+class LinePlot extends React.Component {
+  render() {
+    const props = this.props;
+    const {
+      data,
+      graphProps
+    } = props;
+    const {
+      scale = {},
+      size = {}
+    } = graphProps || {};
+    const xBand = dataToXBand(scale.x, data, size.width, 'linePlot');
+    return /*#__PURE__*/React.createElement(Plot, _extends({}, props, {
+      xBand: xBand,
+      CustomBarElement: CustomBarElement
+    }));
+  }
+
+}
+LinePlot.propTypes = {
+  data: PropTypes.array,
+  onChange: PropTypes.func,
+  graphProps: types.GraphPropsType.isRequired
+};
+var LinePlot$1 = (() => ({
+  type: 'linePlot',
+  Component: LinePlot,
+  name: 'Line Plot'
+}));
+
+var chartTypes = {
+  Bar: Bar$2,
+  Histogram: Histogram$1,
+  LineDot: LineDot$1,
+  DotPlot: DotPlot$1,
+  LinePlot: LinePlot$1,
+  LineCross: LineCross$1
+};
+
+const {
+  translator: translator$2
+} = Translator;
+class ActionsButton extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleActionsClick = event => {
+      this.setState({
+        actionsAnchorEl: event.currentTarget
+      });
+    };
+
+    this.handleActionsClose = () => {
+      this.setState({
+        actionsAnchorEl: null
+      });
+    };
+
+    this.handleAddCategory = () => {
+      const {
+        addCategory
+      } = this.props;
+      addCategory();
+      this.handleActionsClose();
+    };
+
+    this.handleDeleteCategory = index => {
+      const {
+        deleteCategory
+      } = this.props;
+      deleteCategory(index);
+      this.handleActionsClose();
+    };
+
+    this.state = {
+      actionsAnchorEl: null
+    };
+  }
+
+  render() {
+    const {
+      classes,
+      categories,
+      language
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.actions
+    }, /*#__PURE__*/React.createElement("div", {
+      role: "button",
+      tabIndex: 0,
+      className: classes.trigger,
+      onClick: this.handleActionsClick
+    }, "Actions"), /*#__PURE__*/React.createElement(Popover, {
+      open: Boolean(this.state.actionsAnchorEl),
+      anchorEl: this.state.actionsAnchorEl,
+      onClose: this.handleActionsClose,
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      }
+    }, /*#__PURE__*/React.createElement(Paper, {
+      className: classes.actionsPaper
+    }, /*#__PURE__*/React.createElement(Button, {
+      onClick: () => this.handleAddCategory()
+    }, "+ ", translator$2.t('charting.add', {
+      lng: language
+    })), categories.length > 0 && categories.map((category, index) => category.deletable && !category.correctness && /*#__PURE__*/React.createElement(Button, {
+      key: index,
+      onClick: () => this.handleDeleteCategory(index)
+    }, `${translator$2.t('charting.delete', {
+      lng: language
+    })} <${category.label || translator$2.t('charting.newLabel', {
+      lng: language
+    })}>`)))));
+  }
+
+}
+ActionsButton.propTypes = {
+  classes: PropTypes.object.isRequired,
+  addCategory: PropTypes.func.isRequired,
+  deleteCategory: PropTypes.func.isRequired,
+  language: PropTypes.string,
+  categories: PropTypes.array
+};
+
+const styles$3 = theme => ({
+  actions: {
+    alignSelf: 'flex-end'
+  },
+  trigger: {
+    cursor: 'pointer',
+    fontSize: theme.typography.fontSize,
+    color: color.tertiary(),
+    padding: theme.spacing.unit
+  },
+  actionsPaper: {
+    padding: theme.spacing.unit,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing.unit,
+    '& button': {
+      textTransform: 'none',
+      fontSize: theme.typography.fontSize,
+      color: color.text(),
+      justifyContent: 'flex-start'
+    }
+  }
+});
+
+var ActionsButton$1 = withStyles(styles$3)(ActionsButton);
+
+const {
+  translator: translator$1
+} = Translator;
+const log = debug('pie-lib:charts:chart');
+class Chart extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      charts: [chartTypes.Bar(), chartTypes.Histogram(), chartTypes.LineDot(), chartTypes.LineCross(), chartTypes.DotPlot(), chartTypes.LinePlot()],
+      autoFocus: false
+    };
+
+    this.handleAlertDialog = (open, callback) => this.setState({
+      dialog: {
+        open
+      }
+    }, callback);
+
+    this.getChart = () => {
+      const charts = this.props.charts || this.state.charts;
+      let {
+        chartType
+      } = this.props;
+      let ChartComponent = null;
+      let chart = null;
+
+      if (chartType) {
+        chart = charts && charts.find(chart => chart.type === chartType);
+        ChartComponent = chart && chart.Component;
+      } else {
+        chart = charts && charts[0];
+        ChartComponent = chart && chart.Component;
+        chartType = chart && chart.type;
+      }
+
+      return {
+        type: chartType,
+        ChartComponent
+      };
+    };
+
+    this.changeData = data => {
+      const {
+        onDataChange
+      } = this.props;
+      onDataChange(data);
+    };
+
+    this.changeCategory = (index, newCategory) => {
+      const integerIndex = parseInt(index, 10);
+
+      if (integerIndex >= 0) {
+        const {
+          data,
+          onDataChange
+        } = this.props;
+        data[integerIndex] = _extends({}, data[integerIndex], newCategory);
+        onDataChange(data);
+      }
+    };
+
+    this.addCategory = () => {
+      const {
+        onDataChange,
+        data,
+        categoryDefaultLabel,
+        defineChart,
+        categoryDefaults,
+        language
+      } = this.props;
+
+      if ((data || []).length > 19) {
+        this.setState({
+          dialog: {
+            open: true,
+            title: translator$1.t('common:warning', {
+              lng: language
+            }),
+            text: translator$1.t('charting.reachedLimit_other', {
+              count: 20,
+              lng: language
+            }),
+            onConfirm: () => this.handleAlertDialog(false)
+          }
+        });
+      } else {
+        this.setState({
+          autoFocus: true
+        });
+        onDataChange([...data, {
+          inDefineChart: defineChart,
+          label: categoryDefaultLabel || translator$1.t('charting.newLabel', {
+            lng: language
+          }),
+          value: 0,
+          deletable: true,
+          editable: categoryDefaults ? categoryDefaults == null ? void 0 : categoryDefaults.editable : true,
+          interactive: categoryDefaults ? categoryDefaults == null ? void 0 : categoryDefaults.interactive : true
+        }]);
+      }
+    };
+
+    this.deleteCategory = index => {
+      const {
+        data,
+        onDataChange
+      } = this.props;
+
+      if (typeof index !== 'number' || index < 0) {
+        return;
+      }
+
+      if (data && data.length > 0) {
+        onDataChange(data.filter((_, i) => i !== index));
+      }
+    };
+
+    this.getFilteredCategories = () => {
+      const {
+        data,
+        defineChart
+      } = this.props;
+      return data ? data.map(d => _extends({}, d, {
+        deletable: defineChart || d.deletable
+      })) : [];
+    };
+
+    this.resetAutoFocus = () => {
+      this.setState({
+        autoFocus: false
+      });
+    };
+
+    this.state = {
+      dialog: {
+        open: false
+      },
+      actionsAnchorEl: null
+    };
+    this.maskUid = this.generateMaskId();
+  }
+
+  generateMaskId() {
+    return 'chart-' + (Math.random() * 10000).toFixed();
+  }
+
+  render() {
+    const {
+      classes,
+      className,
+      domain = {},
+      range = {},
+      chartingOptions,
+      size,
+      title,
+      onChangeTitle,
+      onChangeLabels,
+      labelsPlaceholders,
+      titlePlaceholder,
+      addCategoryEnabled,
+      changeInteractiveEnabled,
+      changeEditableEnabled,
+      showPixelGuides,
+      error,
+      mathMlOptions = {},
+      language,
+      labelsCharactersLimit,
+      correctData
+    } = this.props;
+    let {
+      chartType
+    } = this.props;
+    const {
+      dialog
+    } = this.state;
+    const defineChart = this.props.defineChart || false;
+    const {
+      width,
+      height
+    } = size || {};
+    const labels = {
+      left: (range == null ? void 0 : range.label) || '',
+      bottom: (domain == null ? void 0 : domain.label) || ''
+    };
+    const {
+      ChartComponent
+    } = this.getChart();
+    const categories = this.getFilteredCategories();
+    const correctValues = getDomainAndRangeByChartType(domain, range, chartType);
+    const {
+      verticalLines,
+      horizontalLines,
+      leftAxis
+    } = getGridLinesAndAxisByChartType(correctValues.range, chartType);
+    const common = {
+      graphProps: createGraphProps(correctValues.domain, correctValues.range, size, () => this.rootNode)
+    };
+    log('[render] common:', common);
+    const maskSize = {
+      x: -10,
+      y: -75,
+      width: width + 20,
+      height: height + 130
+    };
+    const {
+      scale
+    } = common.graphProps;
+    const xBand = dataToXBand(scale.x, categories, width, chartType);
+
+    if (!ChartComponent) {
+      return null;
+    }
+
+    const bandWidth = xBand.bandwidth(); // for chartType "line", bandWidth will be 0, so we have to calculate it
+
+    const barWidth = bandWidth || scale.x(correctValues.domain.max) / categories.length;
+    const increaseHeight = defineChart ? 160 : 60; // if there are many categories, we have to rotate their names in order to fit
+    // and we have to add extra value on top of some items
+
+    const top = getTopPadding(barWidth);
+    const rootCommon = cloneDeep(common);
+    rootCommon.graphProps.size.height += top + increaseHeight;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames(classes.chart, classes.chartBox, className)
+    }, /*#__PURE__*/React.createElement(Root, _extends({
+      title: title,
+      onChangeTitle: onChangeTitle,
+      disabledTitle: !defineChart,
+      showTitle: true,
+      showLabels: true,
+      labels: labels,
+      onChangeLabels: onChangeLabels,
+      labelsPlaceholders: labelsPlaceholders,
+      titlePlaceholder: titlePlaceholder,
+      defineChart: defineChart,
+      disabledLabels: !defineChart,
+      isChart: true,
+      showPixelGuides: showPixelGuides,
+      rootRef: r => this.rootNode = r,
+      mathMlOptions: mathMlOptions,
+      labelsCharactersLimit: labelsCharactersLimit
+    }, rootCommon), /*#__PURE__*/React.createElement(ChartGrid, _extends({}, common, {
+      xBand: xBand,
+      rowTickValues: horizontalLines,
+      columnTickValues: verticalLines
+    })), /*#__PURE__*/React.createElement(ChartAxes, _extends({
+      autoFocus: this.state.autoFocus,
+      onAutoFocusUsed: this.resetAutoFocus
+    }, common, {
+      defineChart: defineChart,
+      categories: categories,
+      xBand: xBand,
+      leftAxis: leftAxis,
+      onChange: this.changeData,
+      onChangeCategory: this.changeCategory,
+      chartingOptions: chartingOptions,
+      changeInteractiveEnabled: changeInteractiveEnabled,
+      changeEditableEnabled: changeEditableEnabled,
+      top: top,
+      error: error,
+      showCorrectness: chartType === 'linePlot' || chartType === 'dotPlot'
+    })), addCategoryEnabled ? /*#__PURE__*/React.createElement("foreignObject", {
+      x: width,
+      y: height - 16,
+      width: width,
+      height: height
+    }, /*#__PURE__*/React.createElement("div", {
+      xmlns: "http://www.w3.org/1999/xhtml",
+      style: {
+        display: 'flex',
+        justifyContent: 'flex-start'
+      }
+    }, /*#__PURE__*/React.createElement(ActionsButton$1, {
+      categories: categories,
+      addCategory: this.addCategory,
+      deleteCategory: this.deleteCategory,
+      language: language
+    }))) : null, /*#__PURE__*/React.createElement("mask", {
+      id: `${this.maskUid}`
+    }, /*#__PURE__*/React.createElement("rect", _extends({}, maskSize, {
+      fill: "white"
+    }))), /*#__PURE__*/React.createElement("g", {
+      id: "marks",
+      mask: `url('#${this.maskUid}')`
+    }, /*#__PURE__*/React.createElement(ChartComponent, _extends({}, common, {
+      data: categories,
+      height: rootCommon.graphProps.size.height,
+      defineChart: defineChart,
+      onChange: this.changeData,
+      onChangeCategory: this.changeCategory,
+      correctData: correctData
+    })))), /*#__PURE__*/React.createElement(AlertDialog, {
+      open: dialog.open,
+      title: dialog.title,
+      text: dialog.text,
+      onClose: dialog.onClose,
+      onConfirm: dialog.onConfirm
+    }));
+  }
+
+}
+Chart.propTypes = {
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  chartType: PropTypes.string.isRequired,
+  size: PropTypes.shape({
+    width: PropTypes.number,
+    height: PropTypes.number
+  }),
+  domain: PropTypes.shape({
+    label: PropTypes.string,
+    min: PropTypes.number,
+    max: PropTypes.number,
+    axisLabel: PropTypes.string
+  }),
+  data: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.number
+  })),
+  range: PropTypes.shape({
+    label: PropTypes.string,
+    min: PropTypes.number,
+    max: PropTypes.number,
+    step: PropTypes.number,
+    labelStep: PropTypes.number,
+    axisLabel: PropTypes.string
+  }),
+  charts: PropTypes.array,
+  labelsPlaceholders: PropTypes.object,
+  title: PropTypes.string,
+  titlePlaceholder: PropTypes.string,
+  onDataChange: PropTypes.func,
+  onChangeLabels: PropTypes.func,
+  onChangeTitle: PropTypes.func,
+  error: PropTypes.any,
+  addCategoryEnabled: PropTypes.bool,
+  showPixelGuides: PropTypes.bool,
+  categoryDefaultLabel: PropTypes.string,
+  categoryDefaults: PropTypes.object,
+  defineChart: PropTypes.bool,
+  theme: PropTypes.object,
+  chartingOptions: PropTypes.object,
+  changeInteractiveEnabled: PropTypes.bool,
+  changeEditableEnabled: PropTypes.bool,
+  language: PropTypes.string,
+  mathMlOptions: PropTypes.object,
+  labelsCharactersLimit: PropTypes.number,
+  correctData: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.number
+  }))
+};
+Chart.defaultProps = {
+  size: {
+    width: 480,
+    height: 480
+  }
+};
+
+const styles$2 = theme => ({
+  graphBox: {
+    transform: 'translate(60px, 35px)'
+  },
+  svg: {
+    overflow: 'visible'
+  },
+  chartBox: {
+    width: 'min-content'
+  }
+});
+
+var chart = withStyles(styles$2, {
+  withTheme: true
+})(Chart);
+
+const ChartType = withStyles(() => ({
+  chartType: {
+    width: '160px'
+  },
+  chartTypeLabel: {
+    backgroundColor: 'transparent'
+  }
+}))(({
+  onChange,
+  value,
+  classes,
+  availableChartTypes,
+  chartTypeLabel
+}) => /*#__PURE__*/React.createElement("div", {
+  className: classes.chartType
+}, /*#__PURE__*/React.createElement(FormControl, {
+  variant: 'outlined',
+  className: classes.chartType
+}, /*#__PURE__*/React.createElement(InputLabel, {
+  id: "type-helper-label",
+  className: classes.chartTypeLabel
+}, chartTypeLabel), /*#__PURE__*/React.createElement(Select, {
+  labelId: "type-helper-label",
+  value: value,
+  onChange: onChange,
+  input: /*#__PURE__*/React.createElement(OutlinedInput, {
+    labelWidth: 75,
+    name: "type"
+  })
+}, (availableChartTypes == null ? void 0 : availableChartTypes.histogram) && /*#__PURE__*/React.createElement(MenuItem, {
+  value: 'histogram'
+}, availableChartTypes.histogram), (availableChartTypes == null ? void 0 : availableChartTypes.bar) && /*#__PURE__*/React.createElement(MenuItem, {
+  value: 'bar'
+}, availableChartTypes.bar), (availableChartTypes == null ? void 0 : availableChartTypes.lineDot) && /*#__PURE__*/React.createElement(MenuItem, {
+  value: 'lineDot'
+}, availableChartTypes.lineDot), (availableChartTypes == null ? void 0 : availableChartTypes.lineCross) && /*#__PURE__*/React.createElement(MenuItem, {
+  value: 'lineCross'
+}, availableChartTypes.lineCross), (availableChartTypes == null ? void 0 : availableChartTypes.dotPlot) && /*#__PURE__*/React.createElement(MenuItem, {
+  value: 'dotPlot'
+}, availableChartTypes.dotPlot), (availableChartTypes == null ? void 0 : availableChartTypes.linePlot) && /*#__PURE__*/React.createElement(MenuItem, {
+  value: 'linePlot'
+}, availableChartTypes.linePlot)))));
+
+const resetValues = (data, updateModel, range, onChange, model) => {
+  (data || []).forEach(d => {
+    const d_value_scaled = Math.round(d.value * 10);
+    const range_step_scaled = Math.round(range.step * 10);
+    const remainder_scaled = d_value_scaled % range_step_scaled;
+    const remainder = remainder_scaled / 10;
+
+    if (d.value > range.max || remainder !== 0) {
+      d.value = 0;
+    }
+  });
+
+  if (updateModel) {
+    onChange(_extends({}, model, {
+      data
+    }));
+  }
+};
+
+const ConfigureChartPanel = props => {
+  const {
+    classes,
+    model,
+    onChange,
+    chartDimensions,
+    gridValues = {},
+    labelValues = {},
+    studentNewCategoryDefaultLabel = {},
+    availableChartTypes = {},
+    chartTypeLabel
+  } = props;
+  const [alertDialog, setAlertDialog] = useState({
+    open: false,
+    title: '',
+    text: '',
+    onClose: null,
+    onConfirm: null
+  });
+  const [open, setOpen] = useState(false);
+  const [rangeKey, setRangeKey] = useState('');
+  const [resetValue, setResetValue] = useState(0);
+  const {
+    range = {},
+    correctAnswer,
+    changeInteractiveEnabled,
+    changeEditableEnabled
+  } = model;
+  const size = model.graph;
+  const {
+    showInConfigPanel,
+    width,
+    height
+  } = chartDimensions || {};
+  const widthConstraints = {
+    min: width != null && width.min ? Math.max(50, width.min) : 50,
+    max: width != null && width.max ? Math.min(700, width.max) : 700,
+    step: (width == null ? void 0 : width.step) >= 1 ? Math.min(200, width.step) : 20
+  };
+  const heightConstraints = {
+    min: height != null && height.min ? Math.max(400, height.min) : 400,
+    max: height != null && height.max ? Math.min(700, height.max) : 700,
+    step: (height == null ? void 0 : height.step) >= 1 ? Math.min(200, height.step) : 20
+  };
+  const gridOptions = gridValues && gridValues.range ? {
+    customValues: gridValues.range
+  } : {
+    min: 0,
+    max: 10000
+  };
+  const labelOptions = labelValues && labelValues.range ? {
+    customValues: labelValues.range
+  } : {
+    min: 0,
+    max: 10000
+  };
+  const stepConfig = /*#__PURE__*/React.createElement("div", {
+    className: classes.rowView
+  }, /*#__PURE__*/React.createElement(NumberTextFieldCustom, _extends({
+    className: classes.mediumTextField,
+    label: "Grid Interval",
+    value: range.step,
+    variant: "outlined",
+    onChange: (e, v) => onRangeChanged('step', v, e)
+  }, gridOptions)), /*#__PURE__*/React.createElement(NumberTextFieldCustom, _extends({
+    className: classes.mediumTextField,
+    label: 'Label Interval',
+    value: range.labelStep,
+    variant: 'outlined',
+    onChange: (e, v) => onRangeChanged('labelStep', v, e)
+  }, labelOptions)));
+
+  const handleAlertDialog = (openStatus, callback) => {
+    setAlertDialog(prevState => _extends({}, prevState, {
+      open: openStatus
+    }), () => {
+      if (callback) {
+        callback();
+      }
+    });
+    setOpen(openStatus);
+  };
+
+  const setPropertiesToFalse = (data, property) => {
+    return data.map(obj => {
+      if (obj.hasOwnProperty(property)) {
+        obj[property] = property == 'interactive' ? true : false;
+      }
+
+      return obj;
+    });
+  };
+
+  const removeOutOfRangeValues = updateModel => {
+    const {
+      correctAnswer,
+      data
+    } = model;
+
+    if (changeInteractiveEnabled === false) {
+      setPropertiesToFalse(data, 'interactive');
+    }
+
+    if (changeEditableEnabled === false) {
+      setPropertiesToFalse(data, 'editable');
+    }
+
+    resetValues(data, updateModel, range, onChange, model);
+    resetValues(correctAnswer.data, false, range, onChange, model);
+  };
+
+  const setCategoryDefaultLabel = () => {
+    const studentCategoryDefaultLabel = studentNewCategoryDefaultLabel == null ? void 0 : studentNewCategoryDefaultLabel.label;
+    onChange(_extends({}, model, {
+      studentCategoryDefaultLabel
+    }));
+  };
+
+  const rangeProps = chartType => {
+    return chartType.includes('Plot') ? {
+      min: 3,
+      max: 10
+    } : {
+      min: 0.05,
+      max: 10000
+    };
+  };
+
+  const onSizeChanged = (key, value) => {
+    const graph = _extends({}, size, {
+      [key]: value
+    });
+
+    onChange(_extends({}, model, {
+      graph
+    }));
+  };
+
+  const isOutOfRange = (data, range) => (data || []).find(d => d.value > range.max || d.value - range.step * Math.floor(d.value / range.step) !== 0);
+
+  const onRangeChanged = (key, value, e) => {
+    // use reset values to restore range to initial values
+    setResetValue(range[key]);
+    setRangeKey(key);
+    range[key] = value;
+
+    if (key === 'max' || key === 'step') {
+      // check if current chart values are invalid for given range step/max
+      const outOfRange = isOutOfRange(model.data, range) || isOutOfRange(model.correctAnswer.data, range);
+
+      if (outOfRange && JSON.stringify(e) !== '{}') {
+        setOpen(true);
+      } else {
+        onChange(_extends({}, model, {
+          range
+        }));
+      }
+    } else {
+      onChange(_extends({}, model, {
+        range
+      }));
+    }
+  };
+
+  useEffect(() => {
+    removeOutOfRangeValues(true);
+    setCategoryDefaultLabel();
+  }, []);
+  useEffect(() => {
+    if (open) {
+      setAlertDialog({
+        open: true,
+        title: 'Warning',
+        text: 'This change will remove values defined for one or more categories',
+        onConfirm: () => {
+          removeOutOfRangeValues();
+          handleAlertDialog(false, onChange(_extends({}, model, {
+            range,
+            correctAnswer
+          })));
+        },
+        onClose: () => {
+          range[rangeKey] = resetValue;
+          handleAlertDialog(false);
+        }
+      });
+    }
+  }, [open]);
+  const isValidPlot = range.step === 1 && range.labelStep === 1 && 3 <= range.max && range.max <= 10;
+
+  const getPlotConfiguration = () => {
+    rangeProps.min = 3;
+    rangeProps.max = 10;
+    range.max = 10;
+    range.step = 1;
+    range.labelStep = 1;
+    onChange(_extends({}, model, {
+      range
+    }));
+  };
+
+  const onChartTypeChange = chartType => {
+    if (chartType.includes('Plot')) {
+      // The selected chart type does not support the current chart configuration
+      if (!isValidPlot) {
+        setAlertDialog({
+          open: true,
+          title: 'Warning',
+          text: 'The selected chart type does not support the current chart configuration. Reset chart configuration?',
+          onConfirm: () => {
+            getPlotConfiguration();
+            removeOutOfRangeValues();
+            handleAlertDialog(false, onChange(_extends({}, model, {
+              range,
+              chartType
+            })));
+          },
+          onClose: () => {
+            handleAlertDialog(false);
+          }
+        });
+        return;
+      }
+
+      rangeProps.min = 3;
+      rangeProps.max = 10;
+      onChange(_extends({}, model, {
+        chartType
+      }));
+      return;
+    }
+
+    onChange(_extends({}, model, {
+      chartType
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.wrapper
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: 'subtitle1'
+  }, "Configure Chart"), /*#__PURE__*/React.createElement("div", {
+    className: classes.content
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.rowView
+  }, /*#__PURE__*/React.createElement(ChartType, {
+    value: model.chartType,
+    onChange: e => onChartTypeChange(e.target.value),
+    availableChartTypes: availableChartTypes,
+    chartTypeLabel: chartTypeLabel
+  }), /*#__PURE__*/React.createElement(NumberTextFieldCustom, {
+    className: classes.mediumTextField,
+    label: "Max Value",
+    value: range.max,
+    min: rangeProps(model.chartType).min,
+    max: rangeProps(model.chartType).max,
+    variant: "outlined",
+    onChange: (e, v) => onRangeChanged('max', v, e)
+  })), !model.chartType.includes('Plot') && stepConfig, showInConfigPanel && /*#__PURE__*/React.createElement("div", {
+    className: classes.dimensions
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, null, "Dimensions(px)")), /*#__PURE__*/React.createElement("div", {
+    className: classes.columnView
+  }, /*#__PURE__*/React.createElement(NumberTextFieldCustom, {
+    className: classes.textField,
+    label: 'Width',
+    value: size.width,
+    min: widthConstraints.min,
+    max: widthConstraints.max,
+    step: widthConstraints.step,
+    variant: 'outlined',
+    onChange: (e, v) => onSizeChanged('width', v)
+  }), /*#__PURE__*/React.createElement(Typography, {
+    className: classes.disabled
+  }, "Min 50, Max 700")), /*#__PURE__*/React.createElement("div", {
+    className: classes.columnView
+  }, /*#__PURE__*/React.createElement(NumberTextFieldCustom, {
+    className: classes.textField,
+    label: 'Height',
+    value: size.height,
+    min: heightConstraints.min,
+    max: heightConstraints.max,
+    step: heightConstraints.step,
+    variant: 'outlined',
+    onChange: (e, v) => onSizeChanged('height', v)
+  }), /*#__PURE__*/React.createElement(Typography, {
+    className: classes.disabled
+  }, "Min 400, Max 700")))), /*#__PURE__*/React.createElement(AlertDialog, {
+    open: alertDialog.open,
+    title: alertDialog.title,
+    text: alertDialog.text,
+    onClose: alertDialog.onClose,
+    onConfirm: alertDialog.onConfirm
+  }));
+};
+
+ConfigureChartPanel.propTypes = {
+  classes: PropTypes.object,
+  chartDimensions: PropTypes.object,
+  domain: PropTypes.object,
+  gridValues: PropTypes.object,
+  labelValues: PropTypes.object,
+  model: PropTypes.object,
+  onChange: PropTypes.func,
+  range: PropTypes.object,
+  chartDimension: PropTypes.object,
+  size: PropTypes.object,
+  studentNewCategoryDefaultLabel: PropTypes.object,
+  availableChartTypes: PropTypes.object,
+  chartTypeLabel: PropTypes.string
+};
+
+const styles$1 = theme => ({
+  wrapper: {
+    width: '450px'
+  },
+  content: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    marginTop: theme.spacing.unit * 3
+  },
+  columnView: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+  },
+  rowView: {
+    display: 'flex',
+    justifyContent: 'space-around',
+    alignItems: 'center'
+  },
+  textField: {
+    width: '130px',
+    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`
+  },
+  mediumTextField: {
+    width: '160px',
+    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`
+  },
+  largeTextField: {
+    width: '230px',
+    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`
+  },
+  text: {
+    fontStyle: 'italic',
+    margin: `${theme.spacing.unit}px 0`
+  },
+  dimensions: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    margin: `${theme.spacing.unit * 3}px 0`
+  },
+  disabled: {
+    color: color.disabled()
+  }
+});
+
+var chartSetup = withStyles(styles$1)(ConfigureChartPanel);
+
+const styles = theme => ({
+  container: {
+    backgroundColor: color.defaults.WHITE,
+    padding: theme.spacing.unit * 2,
+    width: '355px',
+    boxShadow: 'inset 0px 1px 5px 0px #9297A6',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  },
+  row: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px'
+  },
+  title: {
+    fontSize: theme.typography.h6.fontSize,
+    fontWeight: '700'
+  },
+  smallText: {
+    marginLeft: '2px'
+  },
+  correctIcon: {
+    backgroundColor: color.correct(),
+    borderRadius: theme.spacing.unit * 2,
+    color: color.defaults.WHITE
+  },
+  incorrectIcon: {
+    backgroundColor: color.incorrectWithIcon(),
+    borderRadius: theme.spacing.unit * 2,
+    color: color.defaults.WHITE
+  },
+  lastRow: {
+    marginLeft: '3px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px'
+  }
+});
+
+const {
+  translator
+} = Translator;
+
+const KeyLegend = ({
+  classes,
+  language
+}) => /*#__PURE__*/React.createElement("div", {
+  className: classes.container
+}, /*#__PURE__*/React.createElement("div", {
+  className: classes.title
+}, "Key"), /*#__PURE__*/React.createElement("div", {
+  className: classes.row
+}, /*#__PURE__*/React.createElement(Close, {
+  className: classes.incorrectIcon
+}), /*#__PURE__*/React.createElement("div", {
+  className: classes.text
+}, translator.t('charting.keyLegend.incorrectAnswer', {
+  lng: language
+}))), /*#__PURE__*/React.createElement("div", {
+  className: classes.row
+}, /*#__PURE__*/React.createElement(Check, {
+  className: classes.correctIcon
+}), /*#__PURE__*/React.createElement("div", {
+  className: classes.text
+}, translator.t('charting.keyLegend.correctAnswer', {
+  lng: language
+}))), /*#__PURE__*/React.createElement("div", {
+  className: classes.lastRow
+}, /*#__PURE__*/React.createElement(Check, {
+  className: classes.correctIcon,
+  fontSize: 'small'
+}), /*#__PURE__*/React.createElement("div", {
+  className: classes.smallText
+}, translator.t('charting.keyLegend.correctKeyAnswer', {
+  lng: language
+}))));
+
+KeyLegend.propTypes = {
+  classes: PropTypes.object.isRequired,
+  language: PropTypes.string
+};
+var keyLegend = withStyles(styles)(KeyLegend);
+
+export { chart as Chart, ChartType, chartSetup as ConfigureChartPanel, keyLegend as KeyLegend, chartTypes };
+//# sourceMappingURL=index.js.map