@pie-lib/charting 5.15.6 → 5.15.7-next.1618

package/lib/chart.js

@@ -33,25 +33,23 @@ var _styles = require("@material-ui/core/styles");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _plot = require("@pie-lib/plot");
+var _debug = _interopRequireDefault(require("debug"));
 
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
-var _grid = _interopRequireDefault(require("./grid"));
+var _plot = require("@pie-lib/plot");
 
-var _axes = _interopRequireDefault(require("./axes"));
+var _configUi = require("@pie-lib/config-ui");
 
-var _debug = _interopRequireDefault(require("debug"));
+var _grid = _interopRequireDefault(require("./grid"));
 
-var _renderUi = require("@pie-lib/render-ui");
+var _axes = _interopRequireDefault(require("./axes"));
 
 var _utils = require("./utils");
 
-var _toolMenu = _interopRequireDefault(require("./tool-menu"));
-
 var _chartTypes = _interopRequireDefault(require("./chart-types"));
 
-var _configUi = require("@pie-lib/config-ui");
+var _actionsButton = _interopRequireDefault(require("./actions-button"));
 
 var _translator = _interopRequireDefault(require("@pie-lib/translator"));
 
@@ -77,7 +75,8 @@ var Chart = /*#__PURE__*/function (_React$Component) {
     (0, _classCallCheck2["default"])(this, Chart);
     _this = _super.call(this, props);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
-      charts: [_chartTypes["default"].Bar(), _chartTypes["default"].Histogram(), _chartTypes["default"].LineDot(), _chartTypes["default"].LineCross(), _chartTypes["default"].DotPlot(), _chartTypes["default"].LinePlot()]
+      charts: [_chartTypes["default"].Bar(), _chartTypes["default"].Histogram(), _chartTypes["default"].LineDot(), _chartTypes["default"].LineCross(), _chartTypes["default"].DotPlot(), _chartTypes["default"].LinePlot()],
+      autoFocus: false
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleAlertDialog", function (open, callback) {
       return _this.setState({
@@ -149,9 +148,12 @@ var Chart = /*#__PURE__*/function (_React$Component) {
           }
         });
       } else {
+        _this.setState({
+          autoFocus: true
+        });
+
         onDataChange([].concat((0, _toConsumableArray2["default"])(data), [{
           inDefineChart: defineChart,
-          autoFocus: true,
           label: categoryDefaultLabel || translator.t('charting.newLabel', {
             lng: language
           }),
@@ -162,20 +164,41 @@ var Chart = /*#__PURE__*/function (_React$Component) {
         }]));
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getFilteredCategories", function () {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "deleteCategory", function (index) {
       var _this$props3 = _this.props,
           data = _this$props3.data,
-          defineChart = _this$props3.defineChart;
+          onDataChange = _this$props3.onDataChange;
+
+      if (typeof index !== 'number' || index < 0) {
+        return;
+      }
+
+      if (data && data.length > 0) {
+        onDataChange(data.filter(function (_, i) {
+          return i !== index;
+        }));
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getFilteredCategories", function () {
+      var _this$props4 = _this.props,
+          data = _this$props4.data,
+          defineChart = _this$props4.defineChart;
       return data ? data.map(function (d) {
         return _objectSpread(_objectSpread({}, d), {}, {
           deletable: defineChart || d.deletable
         });
       }) : [];
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "resetAutoFocus", function () {
+      _this.setState({
+        autoFocus: false
+      });
+    });
     _this.state = {
       dialog: {
         open: false
-      }
+      },
+      actionsAnchorEl: null
     };
     _this.maskUid = _this.generateMaskId();
     return _this;
@@ -191,28 +214,30 @@ var Chart = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      var _this$props4 = this.props,
-          classes = _this$props4.classes,
-          className = _this$props4.className,
-          _this$props4$domain = _this$props4.domain,
-          domain = _this$props4$domain === void 0 ? {} : _this$props4$domain,
-          _this$props4$range = _this$props4.range,
-          range = _this$props4$range === void 0 ? {} : _this$props4$range,
-          chartingOptions = _this$props4.chartingOptions,
-          size = _this$props4.size,
-          title = _this$props4.title,
-          onChangeTitle = _this$props4.onChangeTitle,
-          onChangeLabels = _this$props4.onChangeLabels,
-          labelsPlaceholders = _this$props4.labelsPlaceholders,
-          titlePlaceholder = _this$props4.titlePlaceholder,
-          addCategoryEnabled = _this$props4.addCategoryEnabled,
-          changeInteractiveEnabled = _this$props4.changeInteractiveEnabled,
-          changeEditableEnabled = _this$props4.changeEditableEnabled,
-          showPixelGuides = _this$props4.showPixelGuides,
-          error = _this$props4.error,
-          _this$props4$mathMlOp = _this$props4.mathMlOptions,
-          mathMlOptions = _this$props4$mathMlOp === void 0 ? {} : _this$props4$mathMlOp,
-          language = _this$props4.language;
+      var _this$props5 = this.props,
+          classes = _this$props5.classes,
+          className = _this$props5.className,
+          _this$props5$domain = _this$props5.domain,
+          domain = _this$props5$domain === void 0 ? {} : _this$props5$domain,
+          _this$props5$range = _this$props5.range,
+          range = _this$props5$range === void 0 ? {} : _this$props5$range,
+          chartingOptions = _this$props5.chartingOptions,
+          size = _this$props5.size,
+          title = _this$props5.title,
+          onChangeTitle = _this$props5.onChangeTitle,
+          onChangeLabels = _this$props5.onChangeLabels,
+          labelsPlaceholders = _this$props5.labelsPlaceholders,
+          titlePlaceholder = _this$props5.titlePlaceholder,
+          addCategoryEnabled = _this$props5.addCategoryEnabled,
+          changeInteractiveEnabled = _this$props5.changeInteractiveEnabled,
+          changeEditableEnabled = _this$props5.changeEditableEnabled,
+          showPixelGuides = _this$props5.showPixelGuides,
+          error = _this$props5.error,
+          _this$props5$mathMlOp = _this$props5.mathMlOptions,
+          mathMlOptions = _this$props5$mathMlOp === void 0 ? {} : _this$props5$mathMlOp,
+          language = _this$props5.language,
+          labelsCharactersLimit = _this$props5.labelsCharactersLimit,
+          correctData = _this$props5.correctData;
       var chartType = this.props.chartType;
       var dialog = this.state.dialog;
       var defineChart = this.props.defineChart || false;
@@ -247,7 +272,7 @@ var Chart = /*#__PURE__*/function (_React$Component) {
         x: -10,
         y: -75,
         width: width + 20,
-        height: height + 80
+        height: height + 130
       };
       var scale = common.graphProps.scale;
       var xBand = (0, _utils.dataToXBand)(scale.x, categories, width, chartType);
@@ -267,16 +292,7 @@ var Chart = /*#__PURE__*/function (_React$Component) {
       rootCommon.graphProps.size.height += top + increaseHeight;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _classnames["default"])(classes.chart, classes.chartBox, className)
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.controls
-      }, /*#__PURE__*/_react["default"].createElement(_toolMenu["default"], {
-        className: classes.toolMenu,
-        disabled: !addCategoryEnabled,
-        addCategory: function addCategory() {
-          return _this2.addCategory();
-        },
-        language: language
-      })), /*#__PURE__*/_react["default"].createElement(_plot.Root, (0, _extends2["default"])({
+      }, /*#__PURE__*/_react["default"].createElement(_plot.Root, (0, _extends2["default"])({
         title: title,
         onChangeTitle: onChangeTitle,
         disabledTitle: !defineChart,
@@ -293,12 +309,16 @@ var Chart = /*#__PURE__*/function (_React$Component) {
         rootRef: function rootRef(r) {
           return _this2.rootNode = r;
         },
-        mathMlOptions: mathMlOptions
+        mathMlOptions: mathMlOptions,
+        labelsCharactersLimit: labelsCharactersLimit
       }, rootCommon), /*#__PURE__*/_react["default"].createElement(_grid["default"], (0, _extends2["default"])({}, common, {
         xBand: xBand,
         rowTickValues: horizontalLines,
         columnTickValues: verticalLines
-      })), /*#__PURE__*/_react["default"].createElement(_axes["default"], (0, _extends2["default"])({}, common, {
+      })), /*#__PURE__*/_react["default"].createElement(_axes["default"], (0, _extends2["default"])({
+        autoFocus: this.state.autoFocus,
+        onAutoFocusUsed: this.resetAutoFocus
+      }, common, {
         defineChart: defineChart,
         categories: categories,
         xBand: xBand,
@@ -309,8 +329,25 @@ var Chart = /*#__PURE__*/function (_React$Component) {
         changeInteractiveEnabled: changeInteractiveEnabled,
         changeEditableEnabled: changeEditableEnabled,
         top: top,
-        error: error
-      })), /*#__PURE__*/_react["default"].createElement("mask", {
+        error: error,
+        showCorrectness: chartType === 'linePlot' || chartType === 'dotPlot'
+      })), addCategoryEnabled ? /*#__PURE__*/_react["default"].createElement("foreignObject", {
+        x: width,
+        y: height - 16,
+        width: width,
+        height: height
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        xmlns: "http://www.w3.org/1999/xhtml",
+        style: {
+          display: 'flex',
+          justifyContent: 'flex-start'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_actionsButton["default"], {
+        categories: categories,
+        addCategory: this.addCategory,
+        deleteCategory: this.deleteCategory,
+        language: language
+      }))) : null, /*#__PURE__*/_react["default"].createElement("mask", {
         id: "".concat(this.maskUid)
       }, /*#__PURE__*/_react["default"].createElement("rect", (0, _extends2["default"])({}, maskSize, {
         fill: "white"
@@ -322,7 +359,8 @@ var Chart = /*#__PURE__*/function (_React$Component) {
         height: rootCommon.graphProps.size.height,
         defineChart: defineChart,
         onChange: this.changeData,
-        onChangeCategory: this.changeCategory
+        onChangeCategory: this.changeCategory,
+        correctData: correctData
       })))), /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
         open: dialog.open,
         title: dialog.title,
@@ -379,7 +417,13 @@ exports.Chart = Chart;
   chartingOptions: _propTypes["default"].object,
   changeInteractiveEnabled: _propTypes["default"].bool,
   changeEditableEnabled: _propTypes["default"].bool,
-  language: _propTypes["default"].string
+  language: _propTypes["default"].string,
+  mathMlOptions: _propTypes["default"].object,
+  labelsCharactersLimit: _propTypes["default"].number,
+  correctData: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    label: _propTypes["default"].string,
+    value: _propTypes["default"].number
+  }))
 });
 (0, _defineProperty2["default"])(Chart, "defaultProps", {
   size: {
@@ -393,22 +437,9 @@ var styles = function styles(theme) {
     graphBox: {
       transform: 'translate(60px, 35px)'
     },
-    controls: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      padding: theme.spacing.unit,
-      backgroundColor: _renderUi.color.primaryLight(),
-      borderTop: "solid 1px ".concat(_renderUi.color.primaryDark()),
-      borderBottom: "solid 0px ".concat(_renderUi.color.primaryDark()),
-      borderLeft: "solid 1px ".concat(_renderUi.color.primaryDark()),
-      borderRight: "solid 1px ".concat(_renderUi.color.primaryDark())
-    },
     svg: {
       overflow: 'visible'
     },
-    toolMenu: {
-      minHeight: '36px'
-    },
     chartBox: {
       width: 'min-content'
     }

package/lib/chart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/chart.jsx"],"names":["translator","Translator","log","Chart","props","charts","chartTypes","Bar","Histogram","LineDot","LineCross","DotPlot","LinePlot","open","callback","setState","dialog","state","chartType","ChartComponent","chart","find","type","Component","data","onDataChange","index","newCategory","integerIndex","parseInt","categoryDefaultLabel","defineChart","categoryDefaults","language","length","title","t","lng","text","count","onConfirm","handleAlertDialog","inDefineChart","autoFocus","label","value","deletable","editable","interactive","map","d","maskUid","generateMaskId","Math","random","toFixed","classes","className","domain","range","chartingOptions","size","onChangeTitle","onChangeLabels","labelsPlaceholders","titlePlaceholder","addCategoryEnabled","changeInteractiveEnabled","changeEditableEnabled","showPixelGuides","error","mathMlOptions","width","height","labels","left","bottom","getChart","categories","getFilteredCategories","correctValues","verticalLines","horizontalLines","leftAxis","common","graphProps","rootNode","maskSize","x","y","scale","xBand","bandWidth","bandwidth","barWidth","max","increaseHeight","top","rootCommon","chartBox","controls","toolMenu","addCategory","r","changeData","changeCategory","onClose","React","PropTypes","object","isRequired","string","shape","number","min","axisLabel","arrayOf","step","labelStep","array","func","any","bool","theme","styles","graphBox","transform","display","justifyContent","padding","spacing","unit","backgroundColor","color","primaryLight","borderTop","primaryDark","borderBottom","borderLeft","borderRight","svg","overflow","minHeight","withTheme"],"mappings":"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","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 { dataToXBand, getDomainAndRangeByChartType, getGridLinesAndAxisByChartType, getTopPadding } from './utils';\nimport ToolMenu from './tool-menu';\nimport chartTypes from './chart-types';\nimport { AlertDialog } from '@pie-lib/config-ui';\nimport Translator from '@pie-lib/translator';\n\nconst { translator } = Translator;\n\nconst log = debug('pie-lib:charts:chart');\n\nexport class Chart extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      dialog: {\n        open: false,\n      },\n    };\n    this.maskUid = this.generateMaskId();\n  }\n\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    labelsPlaceholders: PropTypes.object,\n    title: PropTypes.string,\n    titlePlaceholder: PropTypes.string,\n    onDataChange: PropTypes.func,\n    onChangeLabels: PropTypes.func,\n    onChangeTitle: PropTypes.func,\n    error: PropTypes.any,\n    addCategoryEnabled: PropTypes.bool,\n    showPixelGuides: PropTypes.bool,\n    categoryDefaultLabel: PropTypes.string,\n    categoryDefaults: PropTypes.object,\n    defineChart: PropTypes.bool,\n    theme: PropTypes.object,\n    chartingOptions: PropTypes.object,\n    changeInteractiveEnabled: PropTypes.bool,\n    changeEditableEnabled: PropTypes.bool,\n    language: PropTypes.string,\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  generateMaskId() {\n    return 'chart-' + (Math.random() * 10000).toFixed();\n  }\n\n  handleAlertDialog = (open, callback) =>\n    this.setState(\n      {\n        dialog: { open },\n      },\n      callback,\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 = () => {\n    const { onDataChange, data, categoryDefaultLabel, defineChart, categoryDefaults, language } = this.props;\n\n    if ((data || []).length > 19) {\n      this.setState({\n        dialog: {\n          open: true,\n          title: translator.t('common:warning', { lng: language }),\n          text: translator.t('charting.reachedLimit_other', { count: 20, lng: language }),\n          onConfirm: () => this.handleAlertDialog(false),\n        },\n      });\n    } else {\n      onDataChange([\n        ...data,\n        {\n          inDefineChart: defineChart,\n          autoFocus: true,\n          label: categoryDefaultLabel || translator.t('charting.newLabel', { lng: language }),\n          value: 0,\n          deletable: true,\n          editable: categoryDefaults ? categoryDefaults?.editable : true,\n          interactive: categoryDefaults ? categoryDefaults?.interactive : true,\n        },\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      chartingOptions,\n      size,\n      title,\n      onChangeTitle,\n      onChangeLabels,\n      labelsPlaceholders,\n      titlePlaceholder,\n      addCategoryEnabled,\n      changeInteractiveEnabled,\n      changeEditableEnabled,\n      showPixelGuides,\n      error,\n      mathMlOptions = {},\n      language,\n    } = this.props;\n    let { chartType } = this.props;\n\n    const { dialog } = this.state;\n    const defineChart = this.props.defineChart || false;\n\n    const { width, height } = size || {};\n    const labels = { left: range?.label || '', bottom: domain?.label || '' };\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(correctValues.range, chartType);\n    const common = {\n      graphProps: createGraphProps(correctValues.domain, correctValues.range, size, () => this.rootNode),\n    };\n\n    log('[render] common:', common);\n\n    const maskSize = { x: -10, y: -75, 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 ? 160 : 60;\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, classes.chartBox, className)}>\n        <div className={classes.controls}>\n          <ToolMenu\n            className={classes.toolMenu}\n            disabled={!addCategoryEnabled}\n            addCategory={() => this.addCategory()}\n            language={language}\n          />\n        </div>\n\n        <Root\n          title={title}\n          onChangeTitle={onChangeTitle}\n          disabledTitle={!defineChart}\n          showTitle={true}\n          showLabels={true}\n          labels={labels}\n          onChangeLabels={onChangeLabels}\n          labelsPlaceholders={labelsPlaceholders}\n          titlePlaceholder={titlePlaceholder}\n          defineChart={defineChart}\n          disabledLabels={!defineChart}\n          isChart={true}\n          showPixelGuides={showPixelGuides}\n          rootRef={(r) => (this.rootNode = r)}\n          mathMlOptions={mathMlOptions}\n          {...rootCommon}\n        >\n          <ChartGrid {...common} xBand={xBand} rowTickValues={horizontalLines} columnTickValues={verticalLines} />\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            chartingOptions={chartingOptions}\n            changeInteractiveEnabled={changeInteractiveEnabled}\n            changeEditableEnabled={changeEditableEnabled}\n            top={top}\n            error={error}\n          />\n          <mask id={`${this.maskUid}`}>\n            <rect {...maskSize} fill=\"white\" />\n          </mask>\n          <g id=\"marks\" mask={`url('#${this.maskUid}')`}>\n            <ChartComponent\n              {...common}\n              data={categories}\n              height={rootCommon.graphProps.size.height}\n              defineChart={defineChart}\n              onChange={this.changeData}\n              onChangeCategory={this.changeCategory}\n            />\n          </g>\n        </Root>\n        <AlertDialog\n          open={dialog.open}\n          title={dialog.title}\n          text={dialog.text}\n          onClose={dialog.onClose}\n          onConfirm={dialog.onConfirm}\n        />\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  graphBox: {\n    transform: 'translate(60px, 35px)',\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  svg: {\n    overflow: 'visible',\n  },\n  toolMenu: {\n    minHeight: '36px',\n  },\n  chartBox: {\n    width: 'min-content',\n  },\n});\n\nexport default withStyles(styles, { withTheme: true })(Chart);\n"],"file":"chart.js"}
+{"version":3,"sources":["../src/chart.jsx"],"names":["translator","Translator","log","Chart","props","charts","chartTypes","Bar","Histogram","LineDot","LineCross","DotPlot","LinePlot","autoFocus","open","callback","setState","dialog","state","chartType","ChartComponent","chart","find","type","Component","data","onDataChange","index","newCategory","integerIndex","parseInt","categoryDefaultLabel","defineChart","categoryDefaults","language","length","title","t","lng","text","count","onConfirm","handleAlertDialog","inDefineChart","label","value","deletable","editable","interactive","filter","_","i","map","d","actionsAnchorEl","maskUid","generateMaskId","Math","random","toFixed","classes","className","domain","range","chartingOptions","size","onChangeTitle","onChangeLabels","labelsPlaceholders","titlePlaceholder","addCategoryEnabled","changeInteractiveEnabled","changeEditableEnabled","showPixelGuides","error","mathMlOptions","labelsCharactersLimit","correctData","width","height","labels","left","bottom","getChart","categories","getFilteredCategories","correctValues","verticalLines","horizontalLines","leftAxis","common","graphProps","rootNode","maskSize","x","y","scale","xBand","bandWidth","bandwidth","barWidth","max","increaseHeight","top","rootCommon","chartBox","r","resetAutoFocus","changeData","changeCategory","display","justifyContent","addCategory","deleteCategory","onClose","React","PropTypes","object","isRequired","string","shape","number","min","axisLabel","arrayOf","step","labelStep","array","func","any","bool","theme","styles","graphBox","transform","svg","overflow","withTheme"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport debug from 'debug';\nimport cloneDeep from 'lodash/cloneDeep';\n\nimport { Root, createGraphProps } from '@pie-lib/plot';\nimport { AlertDialog } from '@pie-lib/config-ui';\nimport ChartGrid from './grid';\nimport ChartAxes from './axes';\nimport { dataToXBand, getDomainAndRangeByChartType, getGridLinesAndAxisByChartType, getTopPadding } from './utils';\nimport chartTypes from './chart-types';\nimport ActionsButton from './actions-button';\nimport Translator from '@pie-lib/translator';\n\nconst { translator } = Translator;\n\nconst log = debug('pie-lib:charts:chart');\n\nexport class Chart extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      dialog: {\n        open: false,\n      },\n      actionsAnchorEl: null,\n    };\n    this.maskUid = this.generateMaskId();\n  }\n\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    labelsPlaceholders: PropTypes.object,\n    title: PropTypes.string,\n    titlePlaceholder: PropTypes.string,\n    onDataChange: PropTypes.func,\n    onChangeLabels: PropTypes.func,\n    onChangeTitle: PropTypes.func,\n    error: PropTypes.any,\n    addCategoryEnabled: PropTypes.bool,\n    showPixelGuides: PropTypes.bool,\n    categoryDefaultLabel: PropTypes.string,\n    categoryDefaults: PropTypes.object,\n    defineChart: PropTypes.bool,\n    theme: PropTypes.object,\n    chartingOptions: PropTypes.object,\n    changeInteractiveEnabled: PropTypes.bool,\n    changeEditableEnabled: PropTypes.bool,\n    language: PropTypes.string,\n    mathMlOptions: PropTypes.object,\n    labelsCharactersLimit: PropTypes.number,\n    correctData: PropTypes.arrayOf(\n      PropTypes.shape({\n        label: PropTypes.string,\n        value: PropTypes.number,\n      }),\n    ),\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    autoFocus: false,\n  };\n\n  generateMaskId() {\n    return 'chart-' + (Math.random() * 10000).toFixed();\n  }\n\n  handleAlertDialog = (open, callback) =>\n    this.setState(\n      {\n        dialog: { open },\n      },\n      callback,\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 = () => {\n    const { onDataChange, data, categoryDefaultLabel, defineChart, categoryDefaults, language } = this.props;\n\n    if ((data || []).length > 19) {\n      this.setState({\n        dialog: {\n          open: true,\n          title: translator.t('common:warning', { lng: language }),\n          text: translator.t('charting.reachedLimit_other', { count: 20, lng: language }),\n          onConfirm: () => this.handleAlertDialog(false),\n        },\n      });\n    } else {\n      this.setState({ autoFocus: true });\n      onDataChange([\n        ...data,\n        {\n          inDefineChart: defineChart,\n          label: categoryDefaultLabel || translator.t('charting.newLabel', { lng: language }),\n          value: 0,\n          deletable: true,\n          editable: categoryDefaults ? categoryDefaults?.editable : true,\n          interactive: categoryDefaults ? categoryDefaults?.interactive : true,\n        },\n      ]);\n    }\n  };\n\n  deleteCategory = (index) => {\n    const { data, onDataChange } = this.props;\n\n    if (typeof index !== 'number' || index < 0) {\n      return;\n    }\n\n    if (data && data.length > 0) {\n      onDataChange(data.filter((_, i) => i !== index));\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  resetAutoFocus = () => {\n    this.setState({ autoFocus: false });\n  };\n\n  render() {\n    const {\n      classes,\n      className,\n      domain = {},\n      range = {},\n      chartingOptions,\n      size,\n      title,\n      onChangeTitle,\n      onChangeLabels,\n      labelsPlaceholders,\n      titlePlaceholder,\n      addCategoryEnabled,\n      changeInteractiveEnabled,\n      changeEditableEnabled,\n      showPixelGuides,\n      error,\n      mathMlOptions = {},\n      language,\n      labelsCharactersLimit,\n      correctData,\n    } = this.props;\n    let { chartType } = this.props;\n\n    const { dialog } = this.state;\n    const defineChart = this.props.defineChart || false;\n\n    const { width, height } = size || {};\n    const labels = { left: range?.label || '', bottom: domain?.label || '' };\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(correctValues.range, chartType);\n    const common = {\n      graphProps: createGraphProps(correctValues.domain, correctValues.range, size, () => this.rootNode),\n    };\n\n    log('[render] common:', common);\n\n    const maskSize = { x: -10, y: -75, width: width + 20, height: height + 130 };\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 ? 160 : 60;\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, classes.chartBox, className)}>\n        <Root\n          title={title}\n          onChangeTitle={onChangeTitle}\n          disabledTitle={!defineChart}\n          showTitle={true}\n          showLabels={true}\n          labels={labels}\n          onChangeLabels={onChangeLabels}\n          labelsPlaceholders={labelsPlaceholders}\n          titlePlaceholder={titlePlaceholder}\n          defineChart={defineChart}\n          disabledLabels={!defineChart}\n          isChart={true}\n          showPixelGuides={showPixelGuides}\n          rootRef={(r) => (this.rootNode = r)}\n          mathMlOptions={mathMlOptions}\n          labelsCharactersLimit={labelsCharactersLimit}\n          {...rootCommon}\n        >\n          <ChartGrid {...common} xBand={xBand} rowTickValues={horizontalLines} columnTickValues={verticalLines} />\n          <ChartAxes\n            autoFocus={this.state.autoFocus}\n            onAutoFocusUsed={this.resetAutoFocus}\n            {...common}\n            defineChart={defineChart}\n            categories={categories}\n            xBand={xBand}\n            leftAxis={leftAxis}\n            onChange={this.changeData}\n            onChangeCategory={this.changeCategory}\n            chartingOptions={chartingOptions}\n            changeInteractiveEnabled={changeInteractiveEnabled}\n            changeEditableEnabled={changeEditableEnabled}\n            top={top}\n            error={error}\n            showCorrectness={chartType === 'linePlot' || chartType === 'dotPlot'}\n          />\n          {addCategoryEnabled ? (\n            <foreignObject x={width} y={height - 16} width={width} height={height}>\n              <div xmlns=\"http://www.w3.org/1999/xhtml\" style={{ display: 'flex', justifyContent: 'flex-start' }}>\n                <ActionsButton\n                  categories={categories}\n                  addCategory={this.addCategory}\n                  deleteCategory={this.deleteCategory}\n                  language={language}\n                />\n              </div>\n            </foreignObject>\n          ) : null}\n          <mask id={`${this.maskUid}`}>\n            <rect {...maskSize} fill=\"white\" />\n          </mask>\n          <g id=\"marks\" mask={`url('#${this.maskUid}')`}>\n            <ChartComponent\n              {...common}\n              data={categories}\n              height={rootCommon.graphProps.size.height}\n              defineChart={defineChart}\n              onChange={this.changeData}\n              onChangeCategory={this.changeCategory}\n              correctData={correctData}\n            />\n          </g>\n        </Root>\n        <AlertDialog\n          open={dialog.open}\n          title={dialog.title}\n          text={dialog.text}\n          onClose={dialog.onClose}\n          onConfirm={dialog.onConfirm}\n        />\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  graphBox: {\n    transform: 'translate(60px, 35px)',\n  },\n  svg: {\n    overflow: 'visible',\n  },\n\n  chartBox: {\n    width: 'min-content',\n  },\n});\n\nexport default withStyles(styles, { withTheme: true })(Chart);\n"],"file":"chart.js"}

package/lib/common/correctness-indicators.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TickCorrectnessIndicator = exports.SmallCorrectPointIndicator = exports.CorrectnessIndicator = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
+var CorrectnessIndicator = function CorrectnessIndicator(_ref) {
+  var scale = _ref.scale,
+      x = _ref.x,
+      y = _ref.y,
+      classes = _ref.classes,
+      r = _ref.r,
+      correctness = _ref.correctness,
+      interactive = _ref.interactive;
+  if (!correctness || !interactive) return null;
+  var cx = scale ? scale.x(x) : x;
+  var cy = scale ? scale.y(y) : y;
+  var isCorrect = correctness.value === 'correct';
+  var iconClass = isCorrect ? classes.correctIcon : classes.incorrectIcon; // the icon is 16px + 2px padding + 1px border, so total size is 22px
+
+  return /*#__PURE__*/_react["default"].createElement("foreignObject", {
+    x: cx - 11,
+    y: cy - 11,
+    width: 22,
+    height: 22
+  }, isCorrect ? /*#__PURE__*/_react["default"].createElement(_Check["default"], {
+    className: (0, _classnames["default"])(classes.correctnessIcon, iconClass),
+    title: correctness.label
+  }) : /*#__PURE__*/_react["default"].createElement(_Close["default"], {
+    className: (0, _classnames["default"])(classes.correctnessIcon, iconClass),
+    title: correctness.label
+  }));
+};
+
+exports.CorrectnessIndicator = CorrectnessIndicator;
+
+var SmallCorrectPointIndicator = function SmallCorrectPointIndicator(_ref2) {
+  var scale = _ref2.scale,
+      x = _ref2.x,
+      r = _ref2.r,
+      correctness = _ref2.correctness,
+      classes = _ref2.classes,
+      correctData = _ref2.correctData,
+      label = _ref2.label;
+
+  if (correctness && correctness.value === 'incorrect') {
+    var _correctData$find;
+
+    var correctVal = parseFloat((_correctData$find = correctData.find(function (d) {
+      return d.label === label;
+    })) === null || _correctData$find === void 0 ? void 0 : _correctData$find.value);
+    if (isNaN(correctVal)) return null;
+    var correctPxY = scale.y(correctVal);
+    var yToRender = correctPxY - 7.5;
+    var xToRender = scale.x(x) - 7.5; // small circle has 10px font + 2px padding + 1px border, so total size is 15px
+
+    return /*#__PURE__*/_react["default"].createElement("foreignObject", {
+      x: xToRender,
+      y: yToRender,
+      width: 15,
+      height: 15
+    }, /*#__PURE__*/_react["default"].createElement(_Check["default"], {
+      className: (0, _classnames["default"])(classes.correctnessIcon, classes.correctIcon, classes.smallIcon),
+      title: correctness.label
+    }));
+  }
+
+  return null;
+};
+
+exports.SmallCorrectPointIndicator = SmallCorrectPointIndicator;
+
+var TickCorrectnessIndicator = function TickCorrectnessIndicator(_ref3) {
+  var classes = _ref3.classes,
+      correctness = _ref3.correctness,
+      interactive = _ref3.interactive;
+  if (!correctness || !interactive) return null;
+  return correctness.value === 'correct' ? /*#__PURE__*/_react["default"].createElement(_Check["default"], {
+    className: (0, _classnames["default"])(classes.correctnessIcon, classes.correctIcon),
+    title: correctness.label
+  }) : /*#__PURE__*/_react["default"].createElement(_Close["default"], {
+    className: (0, _classnames["default"])(classes.correctnessIcon, classes.incorrectIcon),
+    title: correctness.label
+  });
+};
+
+exports.TickCorrectnessIndicator = TickCorrectnessIndicator;
+//# sourceMappingURL=correctness-indicators.js.map

package/lib/common/correctness-indicators.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/correctness-indicators.jsx"],"names":["CorrectnessIndicator","scale","x","y","classes","r","correctness","interactive","cx","cy","isCorrect","value","iconClass","correctIcon","incorrectIcon","correctnessIcon","label","SmallCorrectPointIndicator","correctData","correctVal","parseFloat","find","d","isNaN","correctPxY","yToRender","xToRender","smallIcon","TickCorrectnessIndicator"],"mappings":"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","sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport Check from '@material-ui/icons/Check';\nimport Close from '@material-ui/icons/Close';\n\nexport const CorrectnessIndicator = ({ scale, x, y, classes, r, correctness, interactive }) => {\n  if (!correctness || !interactive) return null;\n  const cx = scale ? scale.x(x) : x;\n  const cy = scale ? scale.y(y) : y;\n  const isCorrect = correctness.value === 'correct';\n  const iconClass = isCorrect ? classes.correctIcon : classes.incorrectIcon;\n\n  // the icon is 16px + 2px padding + 1px border, so total size is 22px\n  return (\n    <foreignObject x={cx - 11} y={cy - 11} width={22} height={22}>\n      {isCorrect ? (\n        <Check className={classNames(classes.correctnessIcon, iconClass)} title={correctness.label} />\n      ) : (\n        <Close className={classNames(classes.correctnessIcon, iconClass)} title={correctness.label} />\n      )}\n    </foreignObject>\n  );\n};\n\nexport const SmallCorrectPointIndicator = ({ scale, x, r, correctness, classes, correctData, label }) => {\n  if (correctness && correctness.value === 'incorrect') {\n    const correctVal = parseFloat(correctData.find((d) => d.label === label)?.value);\n    if (isNaN(correctVal)) return null;\n    const correctPxY = scale.y(correctVal);\n    const yToRender = correctPxY - 7.5;\n    const xToRender = scale.x(x) - 7.5;\n\n    // small circle has 10px font + 2px padding + 1px border, so total size is 15px\n    return (\n      <foreignObject x={xToRender} y={yToRender} width={15} height={15}>\n        <Check\n          className={classNames(classes.correctnessIcon, classes.correctIcon, classes.smallIcon)}\n          title={correctness.label}\n        />\n      </foreignObject>\n    );\n  }\n\n  return null;\n};\n\nexport const TickCorrectnessIndicator = ({ classes, correctness, interactive }) => {\n  if (!correctness || !interactive) return null;\n\n  return correctness.value === 'correct' ? (\n    <Check className={classNames(classes.correctnessIcon, classes.correctIcon)} title={correctness.label} />\n  ) : (\n    <Close className={classNames(classes.correctnessIcon, classes.incorrectIcon)} title={correctness.label} />\n  );\n};\n"],"file":"correctness-indicators.js"}

package/lib/common/drag-handle.js

@@ -19,6 +19,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _styles = require("@material-ui/core/styles");
 
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
 var _plot = require("@pie-lib/plot");
 
 var _renderUi = require("@pie-lib/render-ui");
@@ -29,7 +33,7 @@ var _utils = require("../utils");
 
 var _dragIcon = _interopRequireDefault(require("./drag-icon"));
 
-var _excluded = ["x", "y", "width", "graphProps", "classes", "className", "interactive", "defineChart", "isHovered", "correctness", "color"];
+var _excluded = ["x", "y", "width", "graphProps", "classes", "className", "interactive", "defineChart", "isHovered", "correctness", "color", "isPlot"];
 
 var RawDragHandle = function RawDragHandle(_ref) {
   var _getScale;
@@ -45,6 +49,7 @@ var RawDragHandle = function RawDragHandle(_ref) {
       isHovered = _ref.isHovered,
       correctness = _ref.correctness,
       color = _ref.color,
+      isPlot = _ref.isPlot,
       rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var scale = graphProps.scale;
   var scaleValue = (_getScale = (0, _utils.getScale)(width)) === null || _getScale === void 0 ? void 0 : _getScale.scale;
@@ -52,15 +57,19 @@ var RawDragHandle = function RawDragHandle(_ref) {
     x: x,
     y: scale.y(y) - 10,
     width: width,
-    overflow: "visible"
+    overflow: "visible",
+    className: classes.svgOverflowVisible
   }, isHovered && !correctness && interactive && /*#__PURE__*/_react["default"].createElement(_dragIcon["default"], {
     width: width,
     scaleValue: scaleValue,
-    color: color
-  }), /*#__PURE__*/_react["default"].createElement("circle", (0, _extends2["default"])({
+    color: _renderUi.color.defaults.BORDER_GRAY,
+    classes: classes
+  }), interactive && !correctness && /*#__PURE__*/_react["default"].createElement("ellipse", (0, _extends2["default"])({
     cx: width / 2,
     cy: 10,
-    r: width / 2,
+    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: (0, _classnames["default"])(classes.transparentHandle, className)
   }, rest)), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("filter", {
     id: "bottomShadow",
@@ -82,12 +91,18 @@ var RawDragHandle = function RawDragHandle(_ref) {
     operator: "in"
   }), /*#__PURE__*/_react["default"].createElement("feMerge", null, /*#__PURE__*/_react["default"].createElement("feMergeNode", null), /*#__PURE__*/_react["default"].createElement("feMergeNode", {
     "in": "SourceGraphic"
-  })))), correctness && /*#__PURE__*/_react["default"].createElement("rect", (0, _extends2["default"])({
-    y: 10,
-    width: width,
-    filter: "url(#bottomShadow)",
-    className: (0, _classnames["default"])(classes.handle, 'handle', className, !interactive && 'non-interactive', interactive && correctness && correctness.value)
-  }, rest)));
+  })))), correctness && interactive && !isPlot && /*#__PURE__*/_react["default"].createElement("foreignObject", {
+    x: width / 2 - 14,
+    y: 0,
+    width: 40,
+    height: 40
+  }, correctness.value === 'correct' ? /*#__PURE__*/_react["default"].createElement(_Check["default"], {
+    className: (0, _classnames["default"])(classes.correctnessIcon, classes.correctIcon),
+    title: correctness.label
+  }) : /*#__PURE__*/_react["default"].createElement(_Close["default"], {
+    className: (0, _classnames["default"])(classes.correctnessIcon, classes.incorrectIcon),
+    title: correctness.label
+  })));
 };
 
 RawDragHandle.propTypes = {
@@ -105,7 +120,7 @@ RawDragHandle.propTypes = {
   }),
   color: _propTypes["default"].string
 };
-var DragHandle = (0, _styles.withStyles)(function () {
+var DragHandle = (0, _styles.withStyles)(function (theme) {
   return {
     handle: {
       height: '10px',
@@ -116,7 +131,6 @@ var DragHandle = (0, _styles.withStyles)(function () {
       '&.non-interactive': (0, _styles2.disabled)('fill')
     },
     transparentHandle: {
-      height: '20px',
       fill: 'transparent',
       clipPath: 'polygon(50% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 0%)'
     },
@@ -131,6 +145,26 @@ var DragHandle = (0, _styles.withStyles)(function () {
       '&.non-interactive': (0, _styles2.disabled)('fill'),
       '&.incorrect': (0, _styles2.incorrect)('fill'),
       '&.correct': (0, _styles2.correct)('fill')
+    },
+    svgOverflowVisible: {
+      overflow: 'visible !important'
+    },
+    correctIcon: {
+      backgroundColor: _renderUi.color.correct()
+    },
+    incorrectIcon: {
+      backgroundColor: _renderUi.color.incorrectWithIcon()
+    },
+    correctnessIcon: {
+      borderRadius: theme.spacing.unit * 2,
+      color: _renderUi.color.defaults.WHITE,
+      fontSize: '16px',
+      padding: '2px',
+      border: "4px solid ".concat(_renderUi.color.defaults.WHITE),
+      width: '16px',
+      height: '16px',
+      boxSizing: 'unset' // to override the default border-box in IBX
+
     }
   };
 })(RawDragHandle);