@pie-lib/charting 4.5.11-next.589 → 4.5.11-next.605

package/lib/chart-setup.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,7 +13,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -25,6 +29,10 @@ var _chartType = _interopRequireDefault(require("./chart-type"));
 
 var _configUi = require("@pie-lib/config-ui");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -38,7 +46,29 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
       gridValues = _props$gridValues === void 0 ? {} : _props$gridValues,
       _props$labelValues = props.labelValues,
       labelValues = _props$labelValues === void 0 ? {} : _props$labelValues;
-  var range = model.range;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      alertDialog = _useState2[0],
+      setAlertDialog = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      open = _useState4[0],
+      setOpen = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(''),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      rangeKey = _useState6[0],
+      setRangeKey = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(0),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      resetValue = _useState8[0],
+      setResetValue = _useState8[1];
+
+  var range = model.range,
+      correctAnswer = model.correctAnswer;
   var size = model.graph;
 
   var _ref = chartDimensions || {},
@@ -89,6 +119,30 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
     }
   }, labelOptions)));
 
+  var handleAlertDialog = function handleAlertDialog(open, callback) {
+    setAlertDialog({
+      alertDialog: open
+    }, callback);
+    setOpen(open);
+  };
+
+  var resetValues = function resetValues(data) {
+    return data.forEach(function (d) {
+      var remainder = d.value - range.step * Math.floor(d.value / range.step);
+
+      if (d.value > range.max || remainder !== 0) {
+        d.value = 0;
+      }
+    });
+  };
+
+  var removeOutOfRangeValues = function removeOutOfRangeValues() {
+    var correctAnswer = model.correctAnswer,
+        data = model.data;
+    resetValues(data);
+    resetValues(correctAnswer.data);
+  };
+
   var rangeProps = function rangeProps(chartType) {
     return chartType.includes('Plot') ? {
       min: 3,
@@ -108,12 +162,54 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
   };
 
   var onRangeChanged = function onRangeChanged(key, value) {
+    // use reset values to restore range to initial values
+    setResetValue(range[key]);
+    setRangeKey(key);
     range[key] = value;
-    onChange(_objectSpread(_objectSpread({}, model), {}, {
-      range: range
-    }));
+
+    if (key === 'max' || key === 'step') {
+      // check if current chart values are invalid for given range step/max
+      var outOfRange = model.data.find(function (d) {
+        return d.value > range.max || d.value - range.step * Math.floor(d.value / range.step) !== 0;
+      }) || model.correctAnswer.data.find(function (d) {
+        return d.value > range.max || d.value - range.step * Math.floor(d.value / range.step) !== 0;
+      });
+
+      if (outOfRange) {
+        setOpen(true);
+      } else {
+        onChange(_objectSpread(_objectSpread({}, model), {}, {
+          range: range
+        }));
+      }
+    } else {
+      onChange(_objectSpread(_objectSpread({}, model), {}, {
+        range: range
+      }));
+    }
   };
 
+  (0, _react.useEffect)(function () {
+    if (open) {
+      setAlertDialog({
+        open: true,
+        title: 'Warning',
+        text: 'This change will remove values defined for one or more categories',
+        onConfirm: function onConfirm() {
+          removeOutOfRangeValues();
+          handleAlertDialog(false, onChange(_objectSpread(_objectSpread({}, model), {}, {
+            range: range,
+            correctAnswer: correctAnswer
+          })));
+        },
+        onClose: function onClose() {
+          range[rangeKey] = resetValue;
+          handleAlertDialog(false);
+        }
+      });
+    }
+  }, [open]);
+
   var onChartTypeChange = function onChartTypeChange(chartType) {
     if (chartType.includes('Plot')) {
       rangeProps.min = 3;
@@ -192,7 +288,13 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
     }
   }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
     className: classes.disabled
-  }, "Min 400, Max 700")))));
+  }, "Min 400, Max 700")))), /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
+    open: alertDialog.open,
+    title: alertDialog.title,
+    text: alertDialog.text,
+    onClose: alertDialog.onClose,
+    onConfirm: alertDialog.onConfirm
+  }));
 };
 
 ConfigureChartPanel.propTypes = {

package/lib/chart-setup.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-setup.js","names":["ConfigureChartPanel","props","classes","model","onChange","chartDimensions","gridValues","labelValues","range","size","graph","showInConfigPanel","width","height","widthConstraints","min","Math","max","step","heightConstraints","gridOptions","customValues","labelOptions","stepConfig","rowView","mediumTextField","e","v","onRangeChanged","labelStep","rangeProps","chartType","includes","onSizeChanged","key","value","onChartTypeChange","wrapper","content","target","dimensions","columnView","textField","disabled","propTypes","PropTypes","object","domain","chartDimension","styles","theme","display","flexDirection","marginTop","alignItems","justifyContent","margin","spacing","unit","largeTextField","text","fontStyle","color","withStyles"],"sources":["../src/chart-setup.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport ChartType from './chart-type';\nimport { NumberTextFieldCustom } from '@pie-lib/config-ui';\n\nconst ConfigureChartPanel = props => {\n  const { classes, model, onChange, chartDimensions, gridValues = {}, labelValues = {} } = props;\n  const { range } = model;\n  const size = model.graph;\n  const { showInConfigPanel, width, height } = chartDimensions || {};\n\n  const widthConstraints = {\n    min: width?.min ? Math.max(50, width.min) : 50,\n    max: width?.max ? Math.min(700, width.max) : 700,\n    step: width?.step >= 1 ? Math.min(200, width.step) : 20\n  };\n  const heightConstraints = {\n    min: height?.min ? Math.max(400, height.min) : 400,\n    max: height?.max ? Math.min(700, height.max) : 700,\n    step: height?.step >= 1 ? Math.min(200, height.step) : 20\n  };\n\n  const gridOptions =\n    gridValues && gridValues.range ? { customValues: gridValues.range } : { min: 0, max: 10000 };\n  const labelOptions =\n    labelValues && labelValues.range ? { customValues: labelValues.range } : { min: 0, max: 10000 };\n\n  const stepConfig = (\n    <div className={classes.rowView}>\n      <NumberTextFieldCustom\n        className={classes.mediumTextField}\n        label=\"Grid Interval\"\n        value={range.step}\n        variant=\"outlined\"\n        onChange={(e, v) => onRangeChanged('step', v)}\n        {...gridOptions}\n      />\n      <NumberTextFieldCustom\n        className={classes.mediumTextField}\n        label={'Label Interval'}\n        value={range.labelStep}\n        variant={'outlined'}\n        onChange={(e, v) => onRangeChanged('labelStep', v)}\n        {...labelOptions}\n      />\n    </div>\n  );\n\n  const rangeProps = chartType => {\n    return chartType.includes('Plot') ? { min: 3, max: 10 } : { min: 0.05, max: 10000 };\n  };\n\n  const onSizeChanged = (key, value) => {\n    const graph = { ...size, [key]: value };\n\n    onChange({ ...model, graph });\n  };\n\n  const onRangeChanged = (key, value) => {\n    range[key] = value;\n\n    onChange({ ...model, range });\n  };\n\n  const onChartTypeChange = chartType => {\n    if (chartType.includes('Plot')) {\n      rangeProps.min = 3;\n      rangeProps.max = 10;\n\n      if (range.max > 10 || range.max < 3) {\n        range.max = 10;\n      }\n\n      range.step = 1;\n      range.labelStep = 1;\n\n      onChange({ ...model, range, chartType });\n\n      return;\n    }\n\n    onChange({ ...model, chartType });\n  };\n\n  return (\n    <div className={classes.wrapper}>\n      <Typography variant={'subtitle1'}>Configure Chart</Typography>\n      <div className={classes.content}>\n        <div className={classes.rowView}>\n          <ChartType value={model.chartType} onChange={e => onChartTypeChange(e.target.value)} />\n          <NumberTextFieldCustom\n            className={classes.mediumTextField}\n            label=\"Max Value\"\n            value={range.max}\n            min={rangeProps(model.chartType).min}\n            max={rangeProps(model.chartType).max}\n            variant=\"outlined\"\n            onChange={(e, v) => onRangeChanged('max', v)}\n          />\n        </div>\n        {!model.chartType.includes('Plot') && stepConfig}\n        {showInConfigPanel && (\n          <div className={classes.dimensions}>\n            <div>\n              <Typography>Dimensions(px)</Typography>\n            </div>\n            <div className={classes.columnView}>\n              <NumberTextFieldCustom\n                className={classes.textField}\n                label={'Width'}\n                value={size.width}\n                min={widthConstraints.min}\n                max={widthConstraints.max}\n                step={widthConstraints.step}\n                variant={'outlined'}\n                onChange={(e, v) => onSizeChanged('width', v)}\n              />\n              <Typography className={classes.disabled}>Min 50, Max 700</Typography>\n            </div>\n            <div className={classes.columnView}>\n              <NumberTextFieldCustom\n                className={classes.textField}\n                label={'Height'}\n                value={size.height}\n                min={heightConstraints.min}\n                max={heightConstraints.max}\n                step={heightConstraints.step}\n                variant={'outlined'}\n                onChange={(e, v) => onSizeChanged('height', v)}\n              />\n              <Typography className={classes.disabled}>Min 400, Max 700</Typography>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nConfigureChartPanel.propTypes = {\n  classes: PropTypes.object,\n  domain: PropTypes.object,\n  onChange: PropTypes.function,\n  range: PropTypes.object,\n  chartDimension: PropTypes.object,\n  size: PropTypes.object\n};\n\nconst styles = theme => ({\n  wrapper: {\n    width: '450px'\n  },\n  content: {\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%',\n    marginTop: '24px'\n  },\n  columnView: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center'\n  },\n  rowView: {\n    display: 'flex',\n    justifyContent: 'space-around',\n    alignItems: 'center'\n  },\n  textField: {\n    width: '130px',\n    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`\n  },\n  mediumTextField: {\n    width: '160px',\n    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`\n  },\n  largeTextField: {\n    width: '230px',\n    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`\n  },\n  text: {\n    fontStyle: 'italic',\n    margin: `${theme.spacing.unit}px 0`\n  },\n  dimensions: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    margin: '24px 0px'\n  },\n  disabled: {\n    color: color.disabled()\n  }\n});\n\nexport default withStyles(styles)(ConfigureChartPanel);\n"],"mappings":"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"}
+{"version":3,"file":"chart-setup.js","names":["ConfigureChartPanel","props","classes","model","onChange","chartDimensions","gridValues","labelValues","useState","alertDialog","setAlertDialog","open","setOpen","rangeKey","setRangeKey","resetValue","setResetValue","range","correctAnswer","size","graph","showInConfigPanel","width","height","widthConstraints","min","Math","max","step","heightConstraints","gridOptions","customValues","labelOptions","stepConfig","rowView","mediumTextField","e","v","onRangeChanged","labelStep","handleAlertDialog","callback","resetValues","data","forEach","d","remainder","value","floor","removeOutOfRangeValues","rangeProps","chartType","includes","onSizeChanged","key","outOfRange","find","useEffect","title","text","onConfirm","onClose","onChartTypeChange","wrapper","content","target","dimensions","columnView","textField","disabled","propTypes","PropTypes","object","domain","chartDimension","styles","theme","display","flexDirection","marginTop","alignItems","justifyContent","margin","spacing","unit","largeTextField","fontStyle","color","withStyles"],"sources":["../src/chart-setup.jsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport ChartType from './chart-type';\nimport { NumberTextFieldCustom } from '@pie-lib/config-ui';\nimport { AlertDialog } from '@pie-lib/config-ui';\n\nconst ConfigureChartPanel = props => {\n  const { classes, model, onChange, chartDimensions, gridValues = {}, labelValues = {} } = props;\n  const [alertDialog, setAlertDialog] = useState(false);\n  const [open, setOpen] = useState(false);\n  const [rangeKey, setRangeKey] = useState('');\n  const [resetValue, setResetValue] = useState(0);\n\n  const { range, correctAnswer } = model;\n\n  const size = model.graph;\n  const { showInConfigPanel, width, height } = chartDimensions || {};\n\n  const widthConstraints = {\n    min: width?.min ? Math.max(50, width.min) : 50,\n    max: width?.max ? Math.min(700, width.max) : 700,\n    step: width?.step >= 1 ? Math.min(200, width.step) : 20\n  };\n  const heightConstraints = {\n    min: height?.min ? Math.max(400, height.min) : 400,\n    max: height?.max ? Math.min(700, height.max) : 700,\n    step: height?.step >= 1 ? Math.min(200, height.step) : 20\n  };\n\n  const gridOptions =\n    gridValues && gridValues.range ? { customValues: gridValues.range } : { min: 0, max: 10000 };\n  const labelOptions =\n    labelValues && labelValues.range ? { customValues: labelValues.range } : { min: 0, max: 10000 };\n\n  const stepConfig = (\n    <div className={classes.rowView}>\n      <NumberTextFieldCustom\n        className={classes.mediumTextField}\n        label=\"Grid Interval\"\n        value={range.step}\n        variant=\"outlined\"\n        onChange={(e, v) => onRangeChanged('step', v)}\n        {...gridOptions}\n      />\n      <NumberTextFieldCustom\n        className={classes.mediumTextField}\n        label={'Label Interval'}\n        value={range.labelStep}\n        variant={'outlined'}\n        onChange={(e, v) => onRangeChanged('labelStep', v)}\n        {...labelOptions}\n      />\n    </div>\n  );\n\n  const handleAlertDialog = (open, callback) => {\n    setAlertDialog(\n      {\n        alertDialog: open\n      },\n      callback\n    );\n    setOpen(open);\n  };\n\n  const resetValues = data =>\n    data.forEach(d => {\n      const remainder = d.value - range.step * Math.floor(d.value / range.step);\n\n      if (d.value > range.max || remainder !== 0) {\n        d.value = 0;\n      }\n    });\n\n  const removeOutOfRangeValues = () => {\n    const { correctAnswer, data } = model;\n\n    resetValues(data);\n    resetValues(correctAnswer.data);\n  };\n\n  const rangeProps = chartType => {\n    return chartType.includes('Plot') ? { min: 3, max: 10 } : { min: 0.05, max: 10000 };\n  };\n\n  const onSizeChanged = (key, value) => {\n    const graph = { ...size, [key]: value };\n\n    onChange({ ...model, graph });\n  };\n\n  const onRangeChanged = (key, value) => {\n    // use reset values to restore range to initial values\n    setResetValue(range[key]);\n    setRangeKey(key);\n\n    range[key] = value;\n\n    if (key === 'max' || key === 'step') {\n      // check if current chart values are invalid for given range step/max\n      const outOfRange =\n        model.data.find(\n          d => d.value > range.max || d.value - range.step * Math.floor(d.value / range.step) !== 0\n        ) ||\n        model.correctAnswer.data.find(\n          d => d.value > range.max || d.value - range.step * Math.floor(d.value / range.step) !== 0\n        );\n\n      if (outOfRange) {\n        setOpen(true);\n      } else {\n        onChange({ ...model, range });\n      }\n    } else {\n      onChange({ ...model, range });\n    }\n  };\n\n  useEffect(() => {\n    if (open) {\n      setAlertDialog({\n        open: true,\n        title: 'Warning',\n        text: 'This change will remove values defined for one or more categories',\n        onConfirm: () => {\n          removeOutOfRangeValues();\n          handleAlertDialog(false, onChange({ ...model, range, correctAnswer }));\n        },\n        onClose: () => {\n          range[rangeKey] = resetValue;\n          handleAlertDialog(false);\n        }\n      });\n    }\n  }, [open]);\n\n  const onChartTypeChange = chartType => {\n    if (chartType.includes('Plot')) {\n      rangeProps.min = 3;\n      rangeProps.max = 10;\n\n      if (range.max > 10 || range.max < 3) {\n        range.max = 10;\n      }\n\n      range.step = 1;\n      range.labelStep = 1;\n\n      onChange({ ...model, range, chartType });\n\n      return;\n    }\n\n    onChange({ ...model, chartType });\n  };\n\n  return (\n    <div className={classes.wrapper}>\n      <Typography variant={'subtitle1'}>Configure Chart</Typography>\n      <div className={classes.content}>\n        <div className={classes.rowView}>\n          <ChartType value={model.chartType} onChange={e => onChartTypeChange(e.target.value)} />\n          <NumberTextFieldCustom\n            className={classes.mediumTextField}\n            label=\"Max Value\"\n            value={range.max}\n            min={rangeProps(model.chartType).min}\n            max={rangeProps(model.chartType).max}\n            variant=\"outlined\"\n            onChange={(e, v) => onRangeChanged('max', v)}\n          />\n        </div>\n        {!model.chartType.includes('Plot') && stepConfig}\n        {showInConfigPanel && (\n          <div className={classes.dimensions}>\n            <div>\n              <Typography>Dimensions(px)</Typography>\n            </div>\n            <div className={classes.columnView}>\n              <NumberTextFieldCustom\n                className={classes.textField}\n                label={'Width'}\n                value={size.width}\n                min={widthConstraints.min}\n                max={widthConstraints.max}\n                step={widthConstraints.step}\n                variant={'outlined'}\n                onChange={(e, v) => onSizeChanged('width', v)}\n              />\n              <Typography className={classes.disabled}>Min 50, Max 700</Typography>\n            </div>\n            <div className={classes.columnView}>\n              <NumberTextFieldCustom\n                className={classes.textField}\n                label={'Height'}\n                value={size.height}\n                min={heightConstraints.min}\n                max={heightConstraints.max}\n                step={heightConstraints.step}\n                variant={'outlined'}\n                onChange={(e, v) => onSizeChanged('height', v)}\n              />\n              <Typography className={classes.disabled}>Min 400, Max 700</Typography>\n            </div>\n          </div>\n        )}\n      </div>\n      <AlertDialog\n        open={alertDialog.open}\n        title={alertDialog.title}\n        text={alertDialog.text}\n        onClose={alertDialog.onClose}\n        onConfirm={alertDialog.onConfirm}\n      />\n    </div>\n  );\n};\n\nConfigureChartPanel.propTypes = {\n  classes: PropTypes.object,\n  domain: PropTypes.object,\n  onChange: PropTypes.function,\n  range: PropTypes.object,\n  chartDimension: PropTypes.object,\n  size: PropTypes.object\n};\n\nconst styles = theme => ({\n  wrapper: {\n    width: '450px'\n  },\n  content: {\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%',\n    marginTop: '24px'\n  },\n  columnView: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center'\n  },\n  rowView: {\n    display: 'flex',\n    justifyContent: 'space-around',\n    alignItems: 'center'\n  },\n  textField: {\n    width: '130px',\n    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`\n  },\n  mediumTextField: {\n    width: '160px',\n    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`\n  },\n  largeTextField: {\n    width: '230px',\n    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`\n  },\n  text: {\n    fontStyle: 'italic',\n    margin: `${theme.spacing.unit}px 0`\n  },\n  dimensions: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    margin: '24px 0px'\n  },\n  disabled: {\n    color: color.disabled()\n  }\n});\n\nexport default withStyles(styles)(ConfigureChartPanel);\n"],"mappings":"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"}

package/lib/chart.js

@@ -206,7 +206,7 @@ var Chart = /*#__PURE__*/function (_React$Component) {
       var rootCommon = (0, _cloneDeep["default"])(common);
       rootCommon.graphProps.size.height += top + increaseHeight;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(classes["class"], className)
+        className: (0, _classnames["default"])(classes.chart, className)
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.controls
       }, /*#__PURE__*/_react["default"].createElement(_toolMenu["default"], {
@@ -301,8 +301,12 @@ var styles = function styles(theme) {
     graphBox: {
       transform: 'translate(60px, 35px)'
     },
+    chart: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: 'min-content'
+    },
     controls: {
-      width: 'inherit',
       display: 'flex',
       justifyContent: 'space-between',
       padding: theme.spacing.unit,
@@ -312,12 +316,6 @@ var styles = function styles(theme) {
       borderLeft: "solid 1px ".concat(_renderUi.color.primaryDark()),
       borderRight: "solid 1px ".concat(_renderUi.color.primaryDark())
     },
-    root: {
-      overflow: 'hidden'
-    },
-    svg: {
-      overflow: 'visible'
-    },
     toolMenu: {
       minHeight: '36px'
     }

package/lib/chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart.js","names":["log","debug","Chart","charts","chartTypes","Bar","Histogram","LineDot","LineCross","DotPlot","LinePlot","props","state","chartType","ChartComponent","chart","find","type","Component","data","onDataChange","index","newCategory","integerIndex","parseInt","range","categoryDefaultLabel","defineChart","inDefineChart","autoFocus","label","value","step","deletable","editable","interactive","map","d","classes","className","domain","size","title","addCategoryEnabled","showPixelGuides","width","height","getChart","categories","getFilteredCategories","correctValues","getDomainAndRangeByChartType","getGridLinesAndAxisByChartType","verticalLines","horizontalLines","leftAxis","common","graphProps","createGraphProps","rootNode","maskSize","x","y","scale","xBand","dataToXBand","bandWidth","bandwidth","barWidth","max","length","increaseHeight","top","getTopPadding","rootCommon","cloneDeep","classNames","controls","toolMenu","addCategory","r","changeData","changeCategory","React","PropTypes","object","isRequired","string","shape","number","min","axisLabel","arrayOf","labelStep","array","func","bool","theme","styles","graphBox","transform","display","justifyContent","padding","spacing","unit","backgroundColor","color","primaryLight","borderTop","primaryDark","borderBottom","borderLeft","borderRight","root","overflow","svg","minHeight","withStyles","withTheme"],"sources":["../src/chart.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { Root, createGraphProps } from '@pie-lib/plot';\nimport cloneDeep from 'lodash/cloneDeep';\nimport ChartGrid from './grid';\nimport ChartAxes from './axes';\nimport debug from 'debug';\nimport { color } from '@pie-lib/render-ui';\nimport {\n  dataToXBand,\n  getDomainAndRangeByChartType,\n  getGridLinesAndAxisByChartType,\n  getTopPadding\n} from './utils';\nimport ToolMenu from './tool-menu';\nimport chartTypes from './chart-types';\n\nconst log = debug('pie-lib:charts:chart');\n\nexport class Chart extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    chartType: PropTypes.string.isRequired,\n    size: PropTypes.shape({\n      width: PropTypes.number,\n      height: PropTypes.number\n    }),\n    domain: PropTypes.shape({\n      label: PropTypes.string,\n      min: PropTypes.number,\n      max: PropTypes.number,\n      axisLabel: PropTypes.string\n    }),\n    data: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.number })),\n    range: PropTypes.shape({\n      label: PropTypes.string,\n      min: PropTypes.number,\n      max: PropTypes.number,\n      step: PropTypes.number,\n      labelStep: PropTypes.number,\n      axisLabel: PropTypes.string\n    }),\n    charts: PropTypes.array,\n    title: PropTypes.string,\n    onDataChange: PropTypes.func,\n    addCategoryEnabled: PropTypes.bool,\n    showPixelGuides: PropTypes.bool,\n    categoryDefaultLabel: PropTypes.string,\n    defineChart: PropTypes.bool,\n    theme: PropTypes.object\n  };\n\n  static defaultProps = {\n    size: {\n      width: 480,\n      height: 480\n    }\n  };\n\n  state = {\n    charts: [\n      chartTypes.Bar(),\n      chartTypes.Histogram(),\n      chartTypes.LineDot(),\n      chartTypes.LineCross(),\n      chartTypes.DotPlot(),\n      chartTypes.LinePlot()\n    ]\n  };\n\n  getChart = () => {\n    const charts = this.props.charts || this.state.charts;\n    let { chartType } = this.props;\n    let ChartComponent = null;\n    let chart = null;\n\n    if (chartType) {\n      chart = charts && charts.find(chart => chart.type === chartType);\n      ChartComponent = chart && chart.Component;\n    } else {\n      chart = charts && charts[0];\n      ChartComponent = chart && chart.Component;\n      chartType = chart && chart.type;\n    }\n\n    return {\n      type: chartType,\n      ChartComponent\n    };\n  };\n\n  changeData = data => {\n    const { onDataChange } = this.props;\n\n    onDataChange(data);\n  };\n\n  changeCategory = (index, newCategory) => {\n    const integerIndex = parseInt(index, 10);\n\n    if (integerIndex >= 0) {\n      const { data, onDataChange } = this.props;\n      data[integerIndex] = {\n        ...data[integerIndex],\n        ...newCategory\n      };\n\n      onDataChange(data);\n    }\n  };\n\n  addCategory = range => {\n    const { onDataChange, data, categoryDefaultLabel, defineChart } = this.props;\n\n    onDataChange([\n      ...data,\n      {\n        inDefineChart: defineChart,\n        autoFocus: true,\n        label: categoryDefaultLabel || 'New Bar',\n        value: range.step,\n        deletable: true,\n        editable: true,\n        interactive: true\n      }\n    ]);\n  };\n\n  getFilteredCategories = () => {\n    const { data, defineChart } = this.props;\n\n    return data\n      ? data.map(d => ({\n          ...d,\n          deletable: defineChart || d.deletable\n        }))\n      : [];\n  };\n\n  render() {\n    const {\n      classes,\n      className,\n      domain,\n      range,\n      size,\n      title,\n      addCategoryEnabled,\n      showPixelGuides\n    } = this.props;\n    let { chartType } = this.props;\n\n    const defineChart = this.props.defineChart || false;\n    const { width, height } = size || {};\n\n    const { ChartComponent } = this.getChart();\n    const categories = this.getFilteredCategories();\n\n    const correctValues = getDomainAndRangeByChartType(domain, range, chartType);\n\n    const { verticalLines, horizontalLines, leftAxis } = getGridLinesAndAxisByChartType(\n      correctValues.range,\n      chartType\n    );\n    const common = {\n      graphProps: createGraphProps(\n        correctValues.domain,\n        correctValues.range,\n        size,\n        () => this.rootNode\n      )\n    };\n\n    log('[render] common:', common);\n\n    const maskSize = { x: -10, y: -10, width: width + 20, height: height + 80 };\n    const { scale } = common.graphProps;\n    const xBand = dataToXBand(scale.x, categories, width, chartType);\n\n    if (!ChartComponent) {\n      return null;\n    }\n\n    const bandWidth = xBand.bandwidth();\n    // for chartType \"line\", bandWidth will be 0, so we have to calculate it\n    const barWidth = bandWidth || scale.x(correctValues.domain.max) / categories.length;\n    const increaseHeight = defineChart ? 80 : 0;\n\n    // if there are many categories, we have to rotate their names in order to fit\n    // and we have to add extra value on top of some items\n    const top = getTopPadding(barWidth);\n    const rootCommon = cloneDeep(common);\n    rootCommon.graphProps.size.height += top + increaseHeight;\n\n    return (\n      <div className={classNames(classes.class, className)}>\n        <div className={classes.controls}>\n          <ToolMenu\n            className={classes.toolMenu}\n            disabled={!addCategoryEnabled}\n            addCategory={() => this.addCategory(correctValues.range)}\n          />\n        </div>\n        <Root\n          title={title}\n          thisIsChart={defineChart}\n          showPixelGuides={showPixelGuides}\n          classes={classes}\n          rootRef={r => (this.rootNode = r)}\n          {...rootCommon}\n        >\n          <ChartGrid\n            {...common}\n            xBand={xBand}\n            rowTickValues={horizontalLines}\n            columnTickValues={verticalLines}\n          />\n          <ChartAxes\n            {...common}\n            defineChart={defineChart}\n            categories={categories}\n            xBand={xBand}\n            leftAxis={leftAxis}\n            onChange={this.changeData}\n            onChangeCategory={this.changeCategory}\n            top={top}\n          />\n          <mask id=\"myMask\">\n            <rect {...maskSize} fill=\"white\" />\n          </mask>\n          <g id=\"marks\" mask=\"url('#myMask')\">\n            <ChartComponent\n              {...common}\n              data={categories}\n              defineChart={defineChart}\n              onChange={this.changeData}\n              onChangeCategory={this.changeCategory}\n            />\n          </g>\n        </Root>\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  graphBox: {\n    transform: 'translate(60px, 35px)'\n  },\n  controls: {\n    width: 'inherit',\n    display: 'flex',\n    justifyContent: 'space-between',\n    padding: theme.spacing.unit,\n    backgroundColor: color.primaryLight(),\n    borderTop: `solid 1px ${color.primaryDark()}`,\n    borderBottom: `solid 0px ${color.primaryDark()}`,\n    borderLeft: `solid 1px ${color.primaryDark()}`,\n    borderRight: `solid 1px ${color.primaryDark()}`\n  },\n  root: {\n    overflow: 'hidden'\n  },\n  svg: {\n    overflow: 'visible'\n  },\n  toolMenu: {\n    minHeight: '36px'\n  }\n});\n\nexport default withStyles(styles, { withTheme: true })(Chart);\n"],"mappings":"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"}
+{"version":3,"file":"chart.js","names":["log","debug","Chart","charts","chartTypes","Bar","Histogram","LineDot","LineCross","DotPlot","LinePlot","props","state","chartType","ChartComponent","chart","find","type","Component","data","onDataChange","index","newCategory","integerIndex","parseInt","range","categoryDefaultLabel","defineChart","inDefineChart","autoFocus","label","value","step","deletable","editable","interactive","map","d","classes","className","domain","size","title","addCategoryEnabled","showPixelGuides","width","height","getChart","categories","getFilteredCategories","correctValues","getDomainAndRangeByChartType","getGridLinesAndAxisByChartType","verticalLines","horizontalLines","leftAxis","common","graphProps","createGraphProps","rootNode","maskSize","x","y","scale","xBand","dataToXBand","bandWidth","bandwidth","barWidth","max","length","increaseHeight","top","getTopPadding","rootCommon","cloneDeep","classNames","controls","toolMenu","addCategory","r","changeData","changeCategory","React","PropTypes","object","isRequired","string","shape","number","min","axisLabel","arrayOf","labelStep","array","func","bool","theme","styles","graphBox","transform","display","flexDirection","justifyContent","padding","spacing","unit","backgroundColor","color","primaryLight","borderTop","primaryDark","borderBottom","borderLeft","borderRight","minHeight","withStyles","withTheme"],"sources":["../src/chart.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { Root, createGraphProps } from '@pie-lib/plot';\nimport cloneDeep from 'lodash/cloneDeep';\nimport ChartGrid from './grid';\nimport ChartAxes from './axes';\nimport debug from 'debug';\nimport { color } from '@pie-lib/render-ui';\nimport {\n  dataToXBand,\n  getDomainAndRangeByChartType,\n  getGridLinesAndAxisByChartType,\n  getTopPadding\n} from './utils';\nimport ToolMenu from './tool-menu';\nimport chartTypes from './chart-types';\n\nconst log = debug('pie-lib:charts:chart');\n\nexport class Chart extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    chartType: PropTypes.string.isRequired,\n    size: PropTypes.shape({\n      width: PropTypes.number,\n      height: PropTypes.number\n    }),\n    domain: PropTypes.shape({\n      label: PropTypes.string,\n      min: PropTypes.number,\n      max: PropTypes.number,\n      axisLabel: PropTypes.string\n    }),\n    data: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.number })),\n    range: PropTypes.shape({\n      label: PropTypes.string,\n      min: PropTypes.number,\n      max: PropTypes.number,\n      step: PropTypes.number,\n      labelStep: PropTypes.number,\n      axisLabel: PropTypes.string\n    }),\n    charts: PropTypes.array,\n    title: PropTypes.string,\n    onDataChange: PropTypes.func,\n    addCategoryEnabled: PropTypes.bool,\n    showPixelGuides: PropTypes.bool,\n    categoryDefaultLabel: PropTypes.string,\n    defineChart: PropTypes.bool,\n    theme: PropTypes.object\n  };\n\n  static defaultProps = {\n    size: {\n      width: 480,\n      height: 480\n    }\n  };\n\n  state = {\n    charts: [\n      chartTypes.Bar(),\n      chartTypes.Histogram(),\n      chartTypes.LineDot(),\n      chartTypes.LineCross(),\n      chartTypes.DotPlot(),\n      chartTypes.LinePlot()\n    ]\n  };\n\n  getChart = () => {\n    const charts = this.props.charts || this.state.charts;\n    let { chartType } = this.props;\n    let ChartComponent = null;\n    let chart = null;\n\n    if (chartType) {\n      chart = charts && charts.find(chart => chart.type === chartType);\n      ChartComponent = chart && chart.Component;\n    } else {\n      chart = charts && charts[0];\n      ChartComponent = chart && chart.Component;\n      chartType = chart && chart.type;\n    }\n\n    return {\n      type: chartType,\n      ChartComponent\n    };\n  };\n\n  changeData = data => {\n    const { onDataChange } = this.props;\n\n    onDataChange(data);\n  };\n\n  changeCategory = (index, newCategory) => {\n    const integerIndex = parseInt(index, 10);\n\n    if (integerIndex >= 0) {\n      const { data, onDataChange } = this.props;\n      data[integerIndex] = {\n        ...data[integerIndex],\n        ...newCategory\n      };\n\n      onDataChange(data);\n    }\n  };\n\n  addCategory = range => {\n    const { onDataChange, data, categoryDefaultLabel, defineChart } = this.props;\n\n    onDataChange([\n      ...data,\n      {\n        inDefineChart: defineChart,\n        autoFocus: true,\n        label: categoryDefaultLabel || 'New Bar',\n        value: range.step,\n        deletable: true,\n        editable: true,\n        interactive: true\n      }\n    ]);\n  };\n\n  getFilteredCategories = () => {\n    const { data, defineChart } = this.props;\n\n    return data\n      ? data.map(d => ({\n          ...d,\n          deletable: defineChart || d.deletable\n        }))\n      : [];\n  };\n\n  render() {\n    const {\n      classes,\n      className,\n      domain,\n      range,\n      size,\n      title,\n      addCategoryEnabled,\n      showPixelGuides\n    } = this.props;\n    let { chartType } = this.props;\n\n    const defineChart = this.props.defineChart || false;\n    const { width, height } = size || {};\n\n    const { ChartComponent } = this.getChart();\n    const categories = this.getFilteredCategories();\n\n    const correctValues = getDomainAndRangeByChartType(domain, range, chartType);\n\n    const { verticalLines, horizontalLines, leftAxis } = getGridLinesAndAxisByChartType(\n      correctValues.range,\n      chartType\n    );\n    const common = {\n      graphProps: createGraphProps(\n        correctValues.domain,\n        correctValues.range,\n        size,\n        () => this.rootNode\n      )\n    };\n\n    log('[render] common:', common);\n\n    const maskSize = { x: -10, y: -10, width: width + 20, height: height + 80 };\n    const { scale } = common.graphProps;\n    const xBand = dataToXBand(scale.x, categories, width, chartType);\n\n    if (!ChartComponent) {\n      return null;\n    }\n\n    const bandWidth = xBand.bandwidth();\n    // for chartType \"line\", bandWidth will be 0, so we have to calculate it\n    const barWidth = bandWidth || scale.x(correctValues.domain.max) / categories.length;\n    const increaseHeight = defineChart ? 80 : 0;\n\n    // if there are many categories, we have to rotate their names in order to fit\n    // and we have to add extra value on top of some items\n    const top = getTopPadding(barWidth);\n    const rootCommon = cloneDeep(common);\n    rootCommon.graphProps.size.height += top + increaseHeight;\n\n    return (\n      <div className={classNames(classes.chart, className)}>\n        <div className={classes.controls}>\n          <ToolMenu\n            className={classes.toolMenu}\n            disabled={!addCategoryEnabled}\n            addCategory={() => this.addCategory(correctValues.range)}\n          />\n        </div>\n        <Root\n          title={title}\n          thisIsChart={defineChart}\n          showPixelGuides={showPixelGuides}\n          classes={classes}\n          rootRef={r => (this.rootNode = r)}\n          {...rootCommon}\n        >\n          <ChartGrid\n            {...common}\n            xBand={xBand}\n            rowTickValues={horizontalLines}\n            columnTickValues={verticalLines}\n          />\n          <ChartAxes\n            {...common}\n            defineChart={defineChart}\n            categories={categories}\n            xBand={xBand}\n            leftAxis={leftAxis}\n            onChange={this.changeData}\n            onChangeCategory={this.changeCategory}\n            top={top}\n          />\n          <mask id=\"myMask\">\n            <rect {...maskSize} fill=\"white\" />\n          </mask>\n          <g id=\"marks\" mask=\"url('#myMask')\">\n            <ChartComponent\n              {...common}\n              data={categories}\n              defineChart={defineChart}\n              onChange={this.changeData}\n              onChangeCategory={this.changeCategory}\n            />\n          </g>\n        </Root>\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  graphBox: {\n    transform: 'translate(60px, 35px)'\n  },\n  chart: {\n    display: 'flex',\n    flexDirection: 'column',\n    width: 'min-content'\n  },\n  controls: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    padding: theme.spacing.unit,\n    backgroundColor: color.primaryLight(),\n    borderTop: `solid 1px ${color.primaryDark()}`,\n    borderBottom: `solid 0px ${color.primaryDark()}`,\n    borderLeft: `solid 1px ${color.primaryDark()}`,\n    borderRight: `solid 1px ${color.primaryDark()}`\n  },\n  toolMenu: {\n    minHeight: '36px'\n  }\n});\n\nexport default withStyles(styles, { withTheme: true })(Chart);\n"],"mappings":"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"}

package/lib/common/drag-handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"drag-handle.js","names":["RawDragHandle","props","x","y","width","graphProps","classes","className","interactive","correctness","rest","scale","classNames","handleContainer","value","transparentHandle","handle","React","Component","PropTypes","number","isRequired","types","GraphPropsType","object","string","bool","shape","label","DragHandle","withStyles","theme","height","fill","color","secondary","transition","correct","incorrect","disabled","secondaryDark","D","gridDraggable","axis","fromDelta","delta","newPoint","utils","point","add","bounds","domain","range","area","left","top","bottom","right","anchorPoint"],"sources":["../../src/common/drag-handle.jsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { gridDraggable, utils, types } from '@pie-lib/plot';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/render-ui';\nimport { correct, incorrect, disabled } from './styles';\n\nexport class RawDragHandle extends React.Component {\n  static propTypes = {\n    x: PropTypes.number.isRequired,\n    y: PropTypes.number.isRequired,\n    width: PropTypes.number,\n    graphProps: types.GraphPropsType.isRequired,\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    interactive: PropTypes.bool,\n    correctness: PropTypes.shape({\n      value: PropTypes.string,\n      label: PropTypes.string\n    })\n  };\n  render() {\n    const {\n      x,\n      y,\n      width,\n      graphProps,\n      classes,\n      className,\n      interactive,\n      correctness,\n      ...rest\n    } = this.props;\n    const { scale } = graphProps;\n    return (\n      <svg\n        x={x}\n        y={scale.y(y) - 10}\n        width={width}\n        overflow=\"visible\"\n        className={classNames(\n          classes.handleContainer,\n          className,\n          !interactive && 'non-interactive',\n          interactive && correctness && correctness.value\n        )}\n      >\n        <rect\n          y={-10}\n          width={width}\n          className={classNames(classes.transparentHandle, className)}\n          {...rest}\n        />\n        <rect\n          width={width}\n          className={classNames(\n            classes.handle,\n            'handle',\n            className,\n            !interactive && 'non-interactive',\n            interactive && correctness && correctness.value\n          )}\n          {...rest}\n        />\n        <rect\n          y={10}\n          width={width}\n          className={classNames(classes.transparentHandle, className)}\n          {...rest}\n        />\n      </svg>\n    );\n  }\n}\n\nexport const DragHandle = withStyles(theme => ({\n  handle: {\n    height: '10px',\n    fill: color.secondary(),\n    transition: 'fill 200ms linear, height 200ms linear',\n    '&.correct': correct('fill'),\n    '&.incorrect': incorrect('fill'),\n    '&.non-interactive': disabled('fill')\n  },\n  transparentHandle: {\n    height: '10px',\n    fill: 'transparent'\n  },\n  handleContainer: {\n    height: 30,\n    '&:hover': {\n      '& .handle': {\n        fill: color.secondaryDark(),\n        height: '16px'\n      }\n    },\n    '&.non-interactive': disabled('fill'),\n    '&.incorrect': incorrect('fill'),\n    '&.correct': correct('fill')\n  }\n}))(RawDragHandle);\n\nexport const D = gridDraggable({\n  axis: 'y',\n  fromDelta: (props, delta) => {\n    //TODO: should be in grid-draggable, if axis is y delta.x should always be 0.\n    delta.x = 0;\n    const newPoint = utils.point(props).add(utils.point(delta));\n    return newPoint.y;\n  },\n  bounds: (props, { domain, range }) => {\n    const area = { left: 0, top: props.y, bottom: props.y, right: 0 };\n    return utils.bounds(area, domain, range);\n  },\n  anchorPoint: props => {\n    return { x: props.x, y: props.y };\n  }\n})(DragHandle);\n\nexport default D;\n"],"mappings":"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"}
+{"version":3,"file":"drag-handle.js","names":["RawDragHandle","props","x","y","width","graphProps","classes","className","interactive","correctness","rest","scale","classNames","handleContainer","value","transparentHandle","handle","React","Component","PropTypes","number","isRequired","types","GraphPropsType","object","string","bool","shape","label","DragHandle","withStyles","theme","height","fill","color","secondary","transition","correct","incorrect","disabled","secondaryDark","D","gridDraggable","axis","fromDelta","delta","newPoint","utils","point","add","bounds","domain","range","area","left","top","bottom","right","anchorPoint"],"sources":["../../src/common/drag-handle.jsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { gridDraggable, utils, types } from '@pie-lib/plot';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/render-ui';\nimport { correct, incorrect, disabled } from './styles';\n\nexport class RawDragHandle extends React.Component {\n  static propTypes = {\n    x: PropTypes.number.isRequired,\n    y: PropTypes.number.isRequired,\n    width: PropTypes.number,\n    graphProps: types.GraphPropsType.isRequired,\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    interactive: PropTypes.bool,\n    correctness: PropTypes.shape({\n      value: PropTypes.string,\n      label: PropTypes.string\n    })\n  };\n  render() {\n    const {\n      x,\n      y,\n      width,\n      graphProps,\n      classes,\n      className,\n      interactive,\n      correctness,\n      ...rest\n    } = this.props;\n    const { scale } = graphProps;\n\n    return (\n      <svg\n        x={x}\n        y={scale.y(y) - 10}\n        width={width}\n        overflow=\"visible\"\n        className={classNames(\n          classes.handleContainer,\n          className,\n          !interactive && 'non-interactive',\n          interactive && correctness && correctness.value\n        )}\n      >\n        <rect\n          y={-10}\n          width={width}\n          className={classNames(classes.transparentHandle, className)}\n          {...rest}\n        />\n        <rect\n          width={width}\n          className={classNames(\n            classes.handle,\n            'handle',\n            className,\n            !interactive && 'non-interactive',\n            interactive && correctness && correctness.value\n          )}\n          {...rest}\n        />\n        <rect\n          y={10}\n          width={width}\n          className={classNames(classes.transparentHandle, className)}\n          {...rest}\n        />\n      </svg>\n    );\n  }\n}\n\nexport const DragHandle = withStyles(theme => ({\n  handle: {\n    height: '10px',\n    fill: color.secondary(),\n    transition: 'fill 200ms linear, height 200ms linear',\n    '&.correct': correct('fill'),\n    '&.incorrect': incorrect('fill'),\n    '&.non-interactive': disabled('fill')\n  },\n  transparentHandle: {\n    height: '10px',\n    fill: 'transparent'\n  },\n  handleContainer: {\n    height: 30,\n    '&:hover': {\n      '& .handle': {\n        fill: color.secondaryDark(),\n        height: '16px'\n      }\n    },\n    '&.non-interactive': disabled('fill'),\n    '&.incorrect': incorrect('fill'),\n    '&.correct': correct('fill')\n  }\n}))(RawDragHandle);\n\nexport const D = gridDraggable({\n  axis: 'y',\n  fromDelta: (props, delta) => {\n    //TODO: should be in grid-draggable, if axis is y delta.x should always be 0.\n    delta.x = 0;\n    const newPoint = utils.point(props).add(utils.point(delta));\n\n    return newPoint.y;\n  },\n  bounds: (props, { domain, range }) => {\n    const area = { left: 0, top: props.y, bottom: props.y, right: 0 };\n    return utils.bounds(area, domain, range);\n  },\n  anchorPoint: props => {\n    return { x: props.x, y: props.y };\n  }\n})(DragHandle);\n\nexport default D;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;IAEaA,a;;;;;;;;;;;;WAcX,kBAAS;MACP,kBAUI,KAAKC,KAVT;MAAA,IACEC,CADF,eACEA,CADF;MAAA,IAEEC,CAFF,eAEEA,CAFF;MAAA,IAGEC,KAHF,eAGEA,KAHF;MAAA,IAIEC,UAJF,eAIEA,UAJF;MAAA,IAKEC,OALF,eAKEA,OALF;MAAA,IAMEC,SANF,eAMEA,SANF;MAAA,IAOEC,WAPF,eAOEA,WAPF;MAAA,IAQEC,WARF,eAQEA,WARF;MAAA,IASKC,IATL;MAWA,IAAQC,KAAR,GAAkBN,UAAlB,CAAQM,KAAR;MAEA,oBACE;QACE,CAAC,EAAET,CADL;QAEE,CAAC,EAAES,KAAK,CAACR,CAAN,CAAQA,CAAR,IAAa,EAFlB;QAGE,KAAK,EAAEC,KAHT;QAIE,QAAQ,EAAC,SAJX;QAKE,SAAS,EAAE,IAAAQ,sBAAA,EACTN,OAAO,CAACO,eADC,EAETN,SAFS,EAGT,CAACC,WAAD,IAAgB,iBAHP,EAITA,WAAW,IAAIC,WAAf,IAA8BA,WAAW,CAACK,KAJjC;MALb,gBAYE;QACE,CAAC,EAAE,CAAC,EADN;QAEE,KAAK,EAAEV,KAFT;QAGE,SAAS,EAAE,IAAAQ,sBAAA,EAAWN,OAAO,CAACS,iBAAnB,EAAsCR,SAAtC;MAHb,GAIMG,IAJN,EAZF,eAkBE;QACE,KAAK,EAAEN,KADT;QAEE,SAAS,EAAE,IAAAQ,sBAAA,EACTN,OAAO,CAACU,MADC,EAET,QAFS,EAGTT,SAHS,EAIT,CAACC,WAAD,IAAgB,iBAJP,EAKTA,WAAW,IAAIC,WAAf,IAA8BA,WAAW,CAACK,KALjC;MAFb,GASMJ,IATN,EAlBF,eA6BE;QACE,CAAC,EAAE,EADL;QAEE,KAAK,EAAEN,KAFT;QAGE,SAAS,EAAE,IAAAQ,sBAAA,EAAWN,OAAO,CAACS,iBAAnB,EAAsCR,SAAtC;MAHb,GAIMG,IAJN,EA7BF,CADF;IAsCD;;;EAlEgCO,iBAAA,CAAMC,S;;;iCAA5BlB,a,eACQ;EACjBE,CAAC,EAAEiB,qBAAA,CAAUC,MAAV,CAAiBC,UADH;EAEjBlB,CAAC,EAAEgB,qBAAA,CAAUC,MAAV,CAAiBC,UAFH;EAGjBjB,KAAK,EAAEe,qBAAA,CAAUC,MAHA;EAIjBf,UAAU,EAAEiB,WAAA,CAAMC,cAAN,CAAqBF,UAJhB;EAKjBf,OAAO,EAAEa,qBAAA,CAAUK,MAAV,CAAiBH,UALT;EAMjBd,SAAS,EAAEY,qBAAA,CAAUM,MANJ;EAOjBjB,WAAW,EAAEW,qBAAA,CAAUO,IAPN;EAQjBjB,WAAW,EAAEU,qBAAA,CAAUQ,KAAV,CAAgB;IAC3Bb,KAAK,EAAEK,qBAAA,CAAUM,MADU;IAE3BG,KAAK,EAAET,qBAAA,CAAUM;EAFU,CAAhB;AARI,C;AAoEd,IAAMI,UAAU,GAAG,IAAAC,iBAAA,EAAW,UAAAC,KAAK;EAAA,OAAK;IAC7Cf,MAAM,EAAE;MACNgB,MAAM,EAAE,MADF;MAENC,IAAI,EAAEC,eAAA,CAAMC,SAAN,EAFA;MAGNC,UAAU,EAAE,wCAHN;MAIN,aAAa,IAAAC,eAAA,EAAQ,MAAR,CAJP;MAKN,eAAe,IAAAC,iBAAA,EAAU,MAAV,CALT;MAMN,qBAAqB,IAAAC,gBAAA,EAAS,MAAT;IANf,CADqC;IAS7CxB,iBAAiB,EAAE;MACjBiB,MAAM,EAAE,MADS;MAEjBC,IAAI,EAAE;IAFW,CAT0B;IAa7CpB,eAAe,EAAE;MACfmB,MAAM,EAAE,EADO;MAEf,WAAW;QACT,aAAa;UACXC,IAAI,EAAEC,eAAA,CAAMM,aAAN,EADK;UAEXR,MAAM,EAAE;QAFG;MADJ,CAFI;MAQf,qBAAqB,IAAAO,gBAAA,EAAS,MAAT,CARN;MASf,eAAe,IAAAD,iBAAA,EAAU,MAAV,CATA;MAUf,aAAa,IAAAD,eAAA,EAAQ,MAAR;IAVE;EAb4B,CAAL;AAAA,CAAhB,EAyBtBrC,aAzBsB,CAAnB;;AA2BA,IAAMyC,CAAC,GAAG,IAAAC,mBAAA,EAAc;EAC7BC,IAAI,EAAE,GADuB;EAE7BC,SAAS,EAAE,mBAAC3C,KAAD,EAAQ4C,KAAR,EAAkB;IAC3B;IACAA,KAAK,CAAC3C,CAAN,GAAU,CAAV;;IACA,IAAM4C,QAAQ,GAAGC,WAAA,CAAMC,KAAN,CAAY/C,KAAZ,EAAmBgD,GAAnB,CAAuBF,WAAA,CAAMC,KAAN,CAAYH,KAAZ,CAAvB,CAAjB;;IAEA,OAAOC,QAAQ,CAAC3C,CAAhB;EACD,CAR4B;EAS7B+C,MAAM,EAAE,gBAACjD,KAAD,QAA8B;IAAA,IAApBkD,MAAoB,QAApBA,MAAoB;IAAA,IAAZC,KAAY,QAAZA,KAAY;IACpC,IAAMC,IAAI,GAAG;MAAEC,IAAI,EAAE,CAAR;MAAWC,GAAG,EAAEtD,KAAK,CAACE,CAAtB;MAAyBqD,MAAM,EAAEvD,KAAK,CAACE,CAAvC;MAA0CsD,KAAK,EAAE;IAAjD,CAAb;IACA,OAAOV,WAAA,CAAMG,MAAN,CAAaG,IAAb,EAAmBF,MAAnB,EAA2BC,KAA3B,CAAP;EACD,CAZ4B;EAa7BM,WAAW,EAAE,qBAAAzD,KAAK,EAAI;IACpB,OAAO;MAAEC,CAAC,EAAED,KAAK,CAACC,CAAX;MAAcC,CAAC,EAAEF,KAAK,CAACE;IAAvB,CAAP;EACD;AAf4B,CAAd,EAgBd0B,UAhBc,CAAV;;eAkBQY,C"}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "4.5.11-next.589+71d95747",
+  "version": "4.5.11-next.605+e53e3c32",
   "description": "charting",
   "keywords": [
     "react",
@@ -19,7 +19,7 @@
   "dependencies": {
     "@mapbox/point-geometry": "^0.1.0",
     "@material-ui/core": "^3.8.3",
-    "@pie-lib/plot": "^2.1.10-next.589+71d95747",
+    "@pie-lib/plot": "^2.4.1",
     "@vx/axis": "^0.0.183",
     "@vx/event": "^0.0.182",
     "@vx/grid": "^0.0.183",
@@ -43,5 +43,5 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "71d95747be019d4b1b3c097b948a8731a49ea4f9"
+  "gitHead": "e53e3c32ecfe4eada6509f82ce533abbdeb11884"
 }

package/src/chart-setup.jsx

@@ -1,14 +1,21 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { color } from '@pie-lib/render-ui';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import ChartType from './chart-type';
 import { NumberTextFieldCustom } from '@pie-lib/config-ui';
+import { AlertDialog } from '@pie-lib/config-ui';
 
 const ConfigureChartPanel = props => {
   const { classes, model, onChange, chartDimensions, gridValues = {}, labelValues = {} } = props;
-  const { range } = model;
+  const [alertDialog, setAlertDialog] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [rangeKey, setRangeKey] = useState('');
+  const [resetValue, setResetValue] = useState(0);
+
+  const { range, correctAnswer } = model;
+
   const size = model.graph;
   const { showInConfigPanel, width, height } = chartDimensions || {};
 
@@ -49,6 +56,32 @@ const ConfigureChartPanel = props => {
     </div>
   );
 
+  const handleAlertDialog = (open, callback) => {
+    setAlertDialog(
+      {
+        alertDialog: open
+      },
+      callback
+    );
+    setOpen(open);
+  };
+
+  const resetValues = data =>
+    data.forEach(d => {
+      const remainder = d.value - range.step * Math.floor(d.value / range.step);
+
+      if (d.value > range.max || remainder !== 0) {
+        d.value = 0;
+      }
+    });
+
+  const removeOutOfRangeValues = () => {
+    const { correctAnswer, data } = model;
+
+    resetValues(data);
+    resetValues(correctAnswer.data);
+  };
+
   const rangeProps = chartType => {
     return chartType.includes('Plot') ? { min: 3, max: 10 } : { min: 0.05, max: 10000 };
   };
@@ -60,11 +93,50 @@ const ConfigureChartPanel = props => {
   };
 
   const onRangeChanged = (key, value) => {
+    // use reset values to restore range to initial values
+    setResetValue(range[key]);
+    setRangeKey(key);
+
     range[key] = value;
 
-    onChange({ ...model, range });
+    if (key === 'max' || key === 'step') {
+      // check if current chart values are invalid for given range step/max
+      const outOfRange =
+        model.data.find(
+          d => d.value > range.max || d.value - range.step * Math.floor(d.value / range.step) !== 0
+        ) ||
+        model.correctAnswer.data.find(
+          d => d.value > range.max || d.value - range.step * Math.floor(d.value / range.step) !== 0
+        );
+
+      if (outOfRange) {
+        setOpen(true);
+      } else {
+        onChange({ ...model, range });
+      }
+    } else {
+      onChange({ ...model, range });
+    }
   };
 
+  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({ ...model, range, correctAnswer }));
+        },
+        onClose: () => {
+          range[rangeKey] = resetValue;
+          handleAlertDialog(false);
+        }
+      });
+    }
+  }, [open]);
+
   const onChartTypeChange = chartType => {
     if (chartType.includes('Plot')) {
       rangeProps.min = 3;
@@ -136,6 +208,13 @@ const ConfigureChartPanel = props => {
           </div>
         )}
       </div>
+      <AlertDialog
+        open={alertDialog.open}
+        title={alertDialog.title}
+        text={alertDialog.text}
+        onClose={alertDialog.onClose}
+        onConfirm={alertDialog.onConfirm}
+      />
     </div>
   );
 };

package/src/chart.jsx

@@ -196,7 +196,7 @@ export class Chart extends React.Component {
     rootCommon.graphProps.size.height += top + increaseHeight;
 
     return (
-      <div className={classNames(classes.class, className)}>
+      <div className={classNames(classes.chart, className)}>
         <div className={classes.controls}>
           <ToolMenu
             className={classes.toolMenu}
@@ -250,8 +250,12 @@ const styles = theme => ({
   graphBox: {
     transform: 'translate(60px, 35px)'
   },
+  chart: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: 'min-content'
+  },
   controls: {
-    width: 'inherit',
     display: 'flex',
     justifyContent: 'space-between',
     padding: theme.spacing.unit,
@@ -261,12 +265,6 @@ const styles = theme => ({
     borderLeft: `solid 1px ${color.primaryDark()}`,
     borderRight: `solid 1px ${color.primaryDark()}`
   },
-  root: {
-    overflow: 'hidden'
-  },
-  svg: {
-    overflow: 'visible'
-  },
   toolMenu: {
     minHeight: '36px'
   }

package/src/common/drag-handle.jsx

@@ -33,6 +33,7 @@ export class RawDragHandle extends React.Component {
       ...rest
     } = this.props;
     const { scale } = graphProps;
+
     return (
       <svg
         x={x}
@@ -107,6 +108,7 @@ export const D = gridDraggable({
     //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 }) => {