@pie-lib/charting 5.36.2 → 5.36.3-next.155

package/lib/bars/histogram.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/bars/histogram.js"],"names":["Histogram","props","data","graphProps","scale","size","xBand","x","width","React","Component","PropTypes","array","onChange","func","types","GraphPropsType","isRequired","type","name"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEaA,S;;;;;;;;;;;;WAOX,kBAAS;AACP,UAAMC,KAAK,GAAG,KAAKA,KAAnB;AACA,UAAQC,IAAR,GAA6BD,KAA7B,CAAQC,IAAR;AAAA,UAAcC,UAAd,GAA6BF,KAA7B,CAAcE,UAAd;;AACA,iBAAkCA,UAAU,IAAI,EAAhD;AAAA,4BAAQC,KAAR;AAAA,UAAQA,KAAR,2BAAgB,EAAhB;AAAA,2BAAoBC,IAApB;AAAA,UAAoBA,IAApB,0BAA2B,EAA3B;;AACA,UAAMC,KAAK,GAAG,wBAAYF,KAAK,CAACG,CAAlB,EAAqBL,IAArB,EAA2BG,IAAI,CAACG,KAAhC,EAAuC,WAAvC,CAAd;AAEA,0BAAO,gCAAC,gBAAD,gCAAUP,KAAV;AAAiB,QAAA,KAAK,EAAEK,KAAxB;AAA+B,QAAA,SAAS,EAAE;AAA1C,SAAP;AACD;;;EAd4BG,kBAAMC,S;;;iCAAxBV,S,eACQ;AACjBE,EAAAA,IAAI,EAAES,sBAAUC,KADC;AAEjBC,EAAAA,QAAQ,EAAEF,sBAAUG,IAFH;AAGjBX,EAAAA,UAAU,EAAEY,YAAMC,cAAN,CAAqBC;AAHhB,C;;eAgBN;AAAA,SAAO;AACpBC,IAAAA,IAAI,EAAE,WADc;AAEpBR,IAAAA,SAAS,EAAEV,SAFS;AAGpBmB,IAAAA,IAAI,EAAE;AAHc,GAAP;AAAA,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { dataToXBand } from '../utils';\nimport Bars from './common/bars';\n\nexport class Histogram extends React.Component {\n  static propTypes = {\n    data: PropTypes.array,\n    onChange: PropTypes.func,\n    graphProps: types.GraphPropsType.isRequired,\n  };\n\n  render() {\n    const props = this.props;\n    const { data, graphProps } = props;\n    const { scale = {}, size = {} } = graphProps || {};\n    const xBand = dataToXBand(scale.x, data, size.width, 'histogram');\n\n    return <Bars {...props} xBand={xBand} histogram={true} />;\n  }\n}\n\nexport default () => ({\n  type: 'histogram',\n  Component: Histogram,\n  name: 'Histogram',\n});\n"],"file":"histogram.js"}
+{"version":3,"file":"histogram.js","names":["_react","_interopRequireDefault","require","_propTypes","_plot","_utils","_bars","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","Histogram","exports","_React$Component","_classCallCheck2","arguments","_inherits2","_createClass2","key","value","render","props","data","graphProps","_ref","_ref$scale","scale","_ref$size","size","xBand","dataToXBand","x","width","createElement","_extends2","histogram","React","Component","_defineProperty2","PropTypes","array","onChange","func","types","GraphPropsType","isRequired","_default","type","name"],"sources":["../../src/bars/histogram.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { dataToXBand } from '../utils';\nimport Bars from './common/bars';\n\nexport class Histogram extends React.Component {\n  static propTypes = {\n    data: PropTypes.array,\n    onChange: PropTypes.func,\n    graphProps: types.GraphPropsType.isRequired,\n  };\n\n  render() {\n    const props = this.props;\n    const { data, graphProps } = props;\n    const { scale = {}, size = {} } = graphProps || {};\n    const xBand = dataToXBand(scale.x, data, size.width, 'histogram');\n\n    return <Bars {...props} xBand={xBand} histogram={true} />;\n  }\n}\n\nexport default () => ({\n  type: 'histogram',\n  Component: Histogram,\n  name: 'Histogram',\n});\n"],"mappings":";;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAL,sBAAA,CAAAC,OAAA;AAAiC,SAAAK,WAAAC,CAAA,EAAAC,CAAA,EAAAC,CAAA,WAAAD,CAAA,OAAAE,gBAAA,aAAAF,CAAA,OAAAG,2BAAA,aAAAJ,CAAA,EAAAK,yBAAA,KAAAC,OAAA,CAAAC,SAAA,CAAAN,CAAA,EAAAC,CAAA,YAAAC,gBAAA,aAAAH,CAAA,EAAAQ,WAAA,IAAAP,CAAA,CAAAQ,KAAA,CAAAT,CAAA,EAAAE,CAAA;AAAA,SAAAG,0BAAA,cAAAL,CAAA,IAAAU,OAAA,CAAAC,SAAA,CAAAC,OAAA,CAAAC,IAAA,CAAAP,OAAA,CAAAC,SAAA,CAAAG,OAAA,iCAAAV,CAAA,aAAAK,yBAAA,YAAAA,0BAAA,aAAAL,CAAA;AAAA,IAEpBc,SAAS,GAAAC,OAAA,CAAAD,SAAA,0BAAAE,gBAAA;EAAA,SAAAF,UAAA;IAAA,IAAAG,gBAAA,mBAAAH,SAAA;IAAA,OAAAf,UAAA,OAAAe,SAAA,EAAAI,SAAA;EAAA;EAAA,IAAAC,UAAA,aAAAL,SAAA,EAAAE,gBAAA;EAAA,WAAAI,aAAA,aAAAN,SAAA;IAAAO,GAAA;IAAAC,KAAA,EAOpB,SAAAC,MAAMA,CAAA,EAAG;MACP,IAAMC,KAAK,GAAG,IAAI,CAACA,KAAK;MACxB,IAAQC,IAAI,GAAiBD,KAAK,CAA1BC,IAAI;QAAEC,UAAU,GAAKF,KAAK,CAApBE,UAAU;MACxB,IAAAC,IAAA,GAAkCD,UAAU,IAAI,CAAC,CAAC;QAAAE,UAAA,GAAAD,IAAA,CAA1CE,KAAK;QAALA,KAAK,GAAAD,UAAA,cAAG,CAAC,CAAC,GAAAA,UAAA;QAAAE,SAAA,GAAAH,IAAA,CAAEI,IAAI;QAAJA,IAAI,GAAAD,SAAA,cAAG,CAAC,CAAC,GAAAA,SAAA;MAC7B,IAAME,KAAK,GAAG,IAAAC,kBAAW,EAACJ,KAAK,CAACK,CAAC,EAAET,IAAI,EAAEM,IAAI,CAACI,KAAK,EAAE,WAAW,CAAC;MAEjE,oBAAO3C,MAAA,YAAA4C,aAAA,CAACtC,KAAA,WAAI,MAAAuC,SAAA,iBAAKb,KAAK;QAAEQ,KAAK,EAAEA,KAAM;QAACM,SAAS,EAAE;MAAK,EAAE,CAAC;IAC3D;EAAC;AAAA,EAd4BC,iBAAK,CAACC,SAAS;AAAA,IAAAC,gBAAA,aAAjC3B,SAAS,eACD;EACjBW,IAAI,EAAEiB,qBAAS,CAACC,KAAK;EACrBC,QAAQ,EAAEF,qBAAS,CAACG,IAAI;EACxBnB,UAAU,EAAEoB,WAAK,CAACC,cAAc,CAACC;AACnC,CAAC;AAAA,IAAAC,QAAA,GAAAlC,OAAA,cAYY,SAAAkC,SAAA;EAAA,OAAO;IACpBC,IAAI,EAAE,WAAW;IACjBV,SAAS,EAAE1B,SAAS;IACpBqC,IAAI,EAAE;EACR,CAAC;AAAA,CAAC","ignoreList":[]}

package/lib/chart-setup.js

@@ -1,116 +1,141 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.resetValues = exports["default"] = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _renderUi = require("@pie-lib/render-ui");
-
-var _styles = require("@material-ui/core/styles");
-
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
-
+var _styles = require("@mui/material/styles");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 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; }
-
-var resetValues = function resetValues(data, updateModel, range, onChange, model) {
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var resetValues = exports.resetValues = function resetValues(data, updateModel, range, onChange, model) {
   (data || []).forEach(function (d) {
     var d_value_scaled = Math.round(d.value * 10);
     var range_step_scaled = Math.round(range.step * 10);
     var remainder_scaled = d_value_scaled % range_step_scaled;
     var remainder = remainder_scaled / 10;
-
     if (d.value > range.max || remainder !== 0) {
       d.value = 0;
     }
   });
-
   if (updateModel) {
     onChange(_objectSpread(_objectSpread({}, model), {}, {
       data: data
     }));
   }
 };
-
-exports.resetValues = resetValues;
-
+var StyledWrapper = (0, _styles.styled)('div')(function () {
+  return {
+    width: '450px'
+  };
+});
+var StyledContent = (0, _styles.styled)('div')(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    marginTop: theme.spacing(3)
+  };
+});
+var StyledColumnView = (0, _styles.styled)('div')(function () {
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+  };
+});
+var StyledRowView = (0, _styles.styled)('div')(function () {
+  return {
+    display: 'flex',
+    justifyContent: 'space-around',
+    alignItems: 'center'
+  };
+});
+var StyledTextField = (0, _styles.styled)(_configUi.NumberTextFieldCustom)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    width: '130px',
+    margin: "".concat(theme.spacing(1), " ").concat(theme.spacing(0.5))
+  };
+});
+var StyledMediumTextField = (0, _styles.styled)(_configUi.NumberTextFieldCustom)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    width: '160px',
+    margin: "".concat(theme.spacing(1), " ").concat(theme.spacing(0.5))
+  };
+});
+var StyledDimensions = (0, _styles.styled)('div')(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    margin: "".concat(theme.spacing(3), " 0")
+  };
+});
+var StyledDisabled = (0, _styles.styled)(_Typography["default"])(function () {
+  return {
+    color: _renderUi.color.disabled()
+  };
+});
 var ConfigureChartPanel = function ConfigureChartPanel(props) {
-  var classes = props.classes,
-      model = props.model,
-      onChange = props.onChange,
-      chartDimensions = props.chartDimensions,
-      _props$gridValues = props.gridValues,
-      gridValues = _props$gridValues === void 0 ? {} : _props$gridValues,
-      _props$labelValues = props.labelValues,
-      labelValues = _props$labelValues === void 0 ? {} : _props$labelValues,
-      _props$studentNewCate = props.studentNewCategoryDefaultLabel,
-      studentNewCategoryDefaultLabel = _props$studentNewCate === void 0 ? {} : _props$studentNewCate,
-      _props$availableChart = props.availableChartTypes,
-      availableChartTypes = _props$availableChart === void 0 ? {} : _props$availableChart,
-      chartTypeLabel = props.chartTypeLabel;
-
+  var model = props.model,
+    onChange = props.onChange,
+    chartDimensions = props.chartDimensions,
+    _props$gridValues = props.gridValues,
+    gridValues = _props$gridValues === void 0 ? {} : _props$gridValues,
+    _props$labelValues = props.labelValues,
+    labelValues = _props$labelValues === void 0 ? {} : _props$labelValues,
+    _props$studentNewCate = props.studentNewCategoryDefaultLabel,
+    studentNewCategoryDefaultLabel = _props$studentNewCate === void 0 ? {} : _props$studentNewCate,
+    _props$availableChart = props.availableChartTypes,
+    availableChartTypes = _props$availableChart === void 0 ? {} : _props$availableChart,
+    chartTypeLabel = props.chartTypeLabel;
   var _useState = (0, _react.useState)({
-    open: false,
-    title: '',
-    text: '',
-    onClose: null,
-    onConfirm: null
-  }),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      alertDialog = _useState2[0],
-      setAlertDialog = _useState2[1];
-
+      open: false,
+      title: '',
+      text: '',
+      onClose: null,
+      onConfirm: null
+    }),
+    _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];
-
+    _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];
-
+    _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];
-
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    resetValue = _useState8[0],
+    setResetValue = _useState8[1];
   var _model$range = model.range,
-      range = _model$range === void 0 ? {} : _model$range,
-      correctAnswer = model.correctAnswer,
-      changeInteractiveEnabled = model.changeInteractiveEnabled,
-      changeEditableEnabled = model.changeEditableEnabled;
+    range = _model$range === void 0 ? {} : _model$range,
+    correctAnswer = model.correctAnswer,
+    changeInteractiveEnabled = model.changeInteractiveEnabled,
+    changeEditableEnabled = model.changeEditableEnabled;
   var size = model.graph;
-
-  var _ref = chartDimensions || {},
-      showInConfigPanel = _ref.showInConfigPanel,
-      width = _ref.width,
-      height = _ref.height;
-
+  var _ref5 = chartDimensions || {},
+    showInConfigPanel = _ref5.showInConfigPanel,
+    width = _ref5.width,
+    height = _ref5.height;
   var widthConstraints = {
     min: width !== null && width !== void 0 && width.min ? Math.max(50, width.min) : 50,
     max: width !== null && width !== void 0 && width.max ? Math.min(700, width.max) : 700,
@@ -133,19 +158,14 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
     min: 0,
     max: 10000
   };
-
-  var stepConfig = /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.rowView
-  }, /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, (0, _extends2["default"])({
-    className: classes.mediumTextField,
+  var stepConfig = /*#__PURE__*/_react["default"].createElement(StyledRowView, null, /*#__PURE__*/_react["default"].createElement(StyledMediumTextField, (0, _extends2["default"])({
     label: "Grid Interval",
     value: range.step,
     variant: "outlined",
     onChange: function onChange(e, v) {
       return onRangeChanged('step', v, e);
     }
-  }, gridOptions)), /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, (0, _extends2["default"])({
-    className: classes.mediumTextField,
+  }, gridOptions)), /*#__PURE__*/_react["default"].createElement(StyledMediumTextField, (0, _extends2["default"])({
     label: 'Label Interval',
     value: range.labelStep,
     variant: 'outlined',
@@ -153,53 +173,40 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
       return onRangeChanged('labelStep', v, e);
     }
   }, labelOptions)));
-
-  var handleAlertDialog = function handleAlertDialog(openStatus, callback) {
+  var handleAlertDialog = function handleAlertDialog(openStatus) {
     setAlertDialog(function (prevState) {
       return _objectSpread(_objectSpread({}, prevState), {}, {
         open: openStatus
       });
-    }, function () {
-      if (callback) {
-        callback();
-      }
     });
     setOpen(openStatus);
   };
-
   var setPropertiesToFalse = function setPropertiesToFalse(data, property) {
     return data.map(function (obj) {
-      if (obj.hasOwnProperty(property)) {
+      if (Object.prototype.hasOwnProperty.call(obj, property)) {
         obj[property] = property == 'interactive' ? true : false;
       }
-
       return obj;
     });
   };
-
   var removeOutOfRangeValues = function removeOutOfRangeValues(updateModel) {
     var correctAnswer = model.correctAnswer,
-        data = model.data;
-
+      data = model.data;
     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);
   };
-
   var setCategoryDefaultLabel = function setCategoryDefaultLabel() {
     var studentCategoryDefaultLabel = studentNewCategoryDefaultLabel === null || studentNewCategoryDefaultLabel === void 0 ? void 0 : studentNewCategoryDefaultLabel.label;
     onChange(_objectSpread(_objectSpread({}, model), {}, {
       studentCategoryDefaultLabel: studentCategoryDefaultLabel
     }));
   };
-
   var rangeProps = function rangeProps(chartType) {
     return chartType.includes('Plot') ? {
       min: 3,
@@ -209,32 +216,26 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
       max: 10000
     };
   };
-
   var onSizeChanged = function onSizeChanged(key, value) {
     var graph = _objectSpread(_objectSpread({}, size), {}, (0, _defineProperty2["default"])({}, key, value));
-
     onChange(_objectSpread(_objectSpread({}, model), {}, {
       graph: graph
     }));
   };
-
   var isOutOfRange = function isOutOfRange(data, range) {
     return (data || []).find(function (d) {
       return d.value > range.max || d.value - range.step * Math.floor(d.value / range.step) !== 0;
     });
   };
-
   var onRangeChanged = function 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
       var outOfRange = isOutOfRange(model.data, range) || isOutOfRange(model.correctAnswer.data, range);
-
-      if (outOfRange && JSON.stringify(e) !== '{}') {
+      if (outOfRange && e !== null && e !== void 0 && e.target) {
         setOpen(true);
       } else {
         onChange(_objectSpread(_objectSpread({}, model), {}, {
@@ -247,7 +248,6 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
       }));
     }
   };
-
   (0, _react.useEffect)(function () {
     removeOutOfRangeValues(true);
     setCategoryDefaultLabel();
@@ -260,10 +260,11 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
         text: 'This change will remove values defined for one or more categories',
         onConfirm: function onConfirm() {
           removeOutOfRangeValues();
-          handleAlertDialog(false, onChange(_objectSpread(_objectSpread({}, model), {}, {
+          handleAlertDialog(false);
+          onChange(_objectSpread(_objectSpread({}, model), {}, {
             range: range,
             correctAnswer: correctAnswer
-          })));
+          }));
         },
         onClose: function onClose() {
           range[rangeKey] = resetValue;
@@ -273,7 +274,6 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
     }
   }, [open]);
   var isValidPlot = range.step === 1 && range.labelStep === 1 && 3 <= range.max && range.max <= 10;
-
   var getPlotConfiguration = function getPlotConfiguration() {
     rangeProps.min = 3;
     rangeProps.max = 10;
@@ -284,7 +284,6 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
       range: range
     }));
   };
-
   var onChartTypeChange = function onChartTypeChange(chartType) {
     if (chartType.includes('Plot')) {
       // The selected chart type does not support the current chart configuration
@@ -296,10 +295,11 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
           onConfirm: function onConfirm() {
             getPlotConfiguration();
             removeOutOfRangeValues();
-            handleAlertDialog(false, onChange(_objectSpread(_objectSpread({}, model), {}, {
+            handleAlertDialog(false);
+            onChange(_objectSpread(_objectSpread({}, model), {}, {
               range: range,
               chartType: chartType
-            })));
+            }));
           },
           onClose: function onClose() {
             handleAlertDialog(false);
@@ -307,7 +307,6 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
         });
         return;
       }
-
       rangeProps.min = 3;
       rangeProps.max = 10;
       onChange(_objectSpread(_objectSpread({}, model), {}, {
@@ -315,29 +314,20 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
       }));
       return;
     }
-
     onChange(_objectSpread(_objectSpread({}, model), {}, {
       chartType: chartType
     }));
   };
-
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.wrapper
-  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+  return /*#__PURE__*/_react["default"].createElement(StyledWrapper, null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
     variant: 'subtitle1'
-  }, "Configure Chart"), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.content
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.rowView
-  }, /*#__PURE__*/_react["default"].createElement(_chartType["default"], {
+  }, "Configure Chart"), /*#__PURE__*/_react["default"].createElement(StyledContent, null, /*#__PURE__*/_react["default"].createElement(StyledRowView, null, /*#__PURE__*/_react["default"].createElement(_chartType["default"], {
     value: model.chartType,
     onChange: function onChange(e) {
       return onChartTypeChange(e.target.value);
     },
     availableChartTypes: availableChartTypes,
     chartTypeLabel: chartTypeLabel
-  }), /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
-    className: classes.mediumTextField,
+  }), /*#__PURE__*/_react["default"].createElement(StyledMediumTextField, {
     label: "Max Value",
     value: range.max,
     min: rangeProps(model.chartType).min,
@@ -346,12 +336,7 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
     onChange: function onChange(e, v) {
       return onRangeChanged('max', v, e);
     }
-  })), !model.chartType.includes('Plot') && stepConfig, showInConfigPanel && /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.dimensions
-  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "Dimensions(px)")), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.columnView
-  }, /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
-    className: classes.textField,
+  })), !model.chartType.includes('Plot') && stepConfig, showInConfigPanel && /*#__PURE__*/_react["default"].createElement(StyledDimensions, null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "Dimensions(px)")), /*#__PURE__*/_react["default"].createElement(StyledColumnView, null, /*#__PURE__*/_react["default"].createElement(StyledTextField, {
     label: 'Width',
     value: size.width,
     min: widthConstraints.min,
@@ -361,12 +346,7 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
     onChange: function onChange(e, v) {
       return onSizeChanged('width', v);
     }
-  }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-    className: classes.disabled
-  }, "Min 50, Max 700")), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.columnView
-  }, /*#__PURE__*/_react["default"].createElement(_configUi.NumberTextFieldCustom, {
-    className: classes.textField,
+  }), /*#__PURE__*/_react["default"].createElement(StyledDisabled, null, "Min 50, Max 700")), /*#__PURE__*/_react["default"].createElement(StyledColumnView, null, /*#__PURE__*/_react["default"].createElement(StyledTextField, {
     label: 'Height',
     value: size.height,
     min: heightConstraints.min,
@@ -376,9 +356,7 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
     onChange: function onChange(e, v) {
       return onSizeChanged('height', v);
     }
-  }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-    className: classes.disabled
-  }, "Min 400, Max 700")))), /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
+  }), /*#__PURE__*/_react["default"].createElement(StyledDisabled, null, "Min 400, Max 700")))), /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
     open: alertDialog.open,
     title: alertDialog.title,
     text: alertDialog.text,
@@ -386,9 +364,7 @@ var ConfigureChartPanel = function ConfigureChartPanel(props) {
     onConfirm: alertDialog.onConfirm
   }));
 };
-
 ConfigureChartPanel.propTypes = {
-  classes: _propTypes["default"].object,
   chartDimensions: _propTypes["default"].object,
   domain: _propTypes["default"].object,
   gridValues: _propTypes["default"].object,
@@ -402,57 +378,5 @@ ConfigureChartPanel.propTypes = {
   availableChartTypes: _propTypes["default"].object,
   chartTypeLabel: _propTypes["default"].string
 };
-
-var styles = function styles(theme) {
-  return {
-    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: "".concat(theme.spacing.unit, "px ").concat(theme.spacing.unit / 2, "px")
-    },
-    mediumTextField: {
-      width: '160px',
-      margin: "".concat(theme.spacing.unit, "px ").concat(theme.spacing.unit / 2, "px")
-    },
-    largeTextField: {
-      width: '230px',
-      margin: "".concat(theme.spacing.unit, "px ").concat(theme.spacing.unit / 2, "px")
-    },
-    text: {
-      fontStyle: 'italic',
-      margin: "".concat(theme.spacing.unit, "px 0")
-    },
-    dimensions: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      margin: "".concat(theme.spacing.unit * 3, "px 0")
-    },
-    disabled: {
-      color: _renderUi.color.disabled()
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(ConfigureChartPanel);
-
-exports["default"] = _default;
+var _default = exports["default"] = ConfigureChartPanel;
 //# sourceMappingURL=chart-setup.js.map