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

package/lib/plot/common/plot.js

@@ -27,16 +27,20 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _plot = require("@pie-lib/plot");
+var _classnames = _interopRequireDefault(require("classnames"));
 
-var _group = require("@vx/group");
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
 
 var _index = require("@material-ui/core/styles/index");
 
-var _dragHandle = _interopRequireWildcard(require("../../common/drag-handle"));
+var _group = require("@vx/group");
 
 var _debug = _interopRequireDefault(require("debug"));
 
+var _plot = require("@pie-lib/plot");
+
+var _dragHandle = _interopRequireWildcard(require("../../common/drag-handle"));
+
 var _renderUi = require("@pie-lib/render-ui");
 
 var _utils = require("../../utils");
@@ -52,6 +56,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var log = (0, _debug["default"])('pie-lib:chart:bars');
+var ICON_SIZE = 16; // 10px icon + 2px padding on all sides + 1px border
 
 var RawPlot = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(RawPlot, _React$Component);
@@ -99,6 +104,17 @@ var RawPlot = /*#__PURE__*/function (_React$Component) {
 
       _this.setDragValue(next);
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderCorrectnessIcon", function (barX, barWidth, correctVal, correctness, classes, scale) {
+      return /*#__PURE__*/_react["default"].createElement("foreignObject", {
+        x: barX + barWidth / 2 - ICON_SIZE / 2,
+        y: scale.y(correctVal) + ICON_SIZE,
+        width: ICON_SIZE,
+        height: ICON_SIZE
+      }, /*#__PURE__*/_react["default"].createElement(_Check["default"], {
+        className: (0, _classnames["default"])(classes.correctnessIcon, classes.correctIcon, classes.smallIcon),
+        title: correctness.label
+      }));
+    });
     _this.state = {
       dragValue: undefined,
       isHovered: false
@@ -121,7 +137,8 @@ var RawPlot = /*#__PURE__*/function (_React$Component) {
           CustomBarElement = _this$props2.CustomBarElement,
           interactive = _this$props2.interactive,
           correctness = _this$props2.correctness,
-          defineChart = _this$props2.defineChart;
+          defineChart = _this$props2.defineChart,
+          correctData = _this$props2.correctData;
       var scale = graphProps.scale,
           range = graphProps.range,
           size = graphProps.size;
@@ -148,17 +165,20 @@ var RawPlot = /*#__PURE__*/function (_React$Component) {
       var pointHeight = size.height / max;
       var pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;
       var Component = interactive ? _dragHandle["default"] : _dragHandle.DragHandle;
+      var allowRolloverEvent = interactive && !correctness;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("g", {
         onMouseEnter: this.handleMouseEnter,
-        onMouseLeave: this.handleMouseLeave
-      }, isHovered && /*#__PURE__*/_react["default"].createElement("rect", {
+        onMouseLeave: this.handleMouseLeave,
+        onTouchStart: this.handleMouseEnter,
+        onTouchEnd: this.handleMouseLeave
+      }, isHovered && allowRolloverEvent && /*#__PURE__*/_react["default"].createElement("rect", {
         x: barX,
         y: scale.y(v),
         width: barWidth,
         height: values !== null && values !== void 0 && values.length ? pointHeight * values.length : 0,
-        style: {
-          fill: '#E5E8F5'
-        }
+        stroke: _renderUi.color.defaults.BORDER_GRAY,
+        strokeWidth: '4px',
+        fill: 'transparent'
       }), values.map(function (index) {
         return CustomBarElement({
           index: index,
@@ -171,7 +191,69 @@ var RawPlot = /*#__PURE__*/function (_React$Component) {
           classes: classes,
           scale: scale
         });
-      }), /*#__PURE__*/_react["default"].createElement(Component, {
+      }), correctness && correctness.value === 'incorrect' && function () {
+        var correctVal = parseFloat(correctData[index] && correctData[index].value);
+        if (isNaN(correctVal)) return null;
+        var selectedVal = v;
+
+        if (selectedVal > correctVal) {
+          // selected is higher than correct: overlay the correct last segment
+          var overlayValues = [];
+
+          for (var _i = 0; _i < correctVal; _i++) {
+            overlayValues.push(_i);
+          }
+
+          var lastIndexOfOverlay = overlayValues.length - 1;
+          var lastOverlayValue = overlayValues[lastIndexOfOverlay];
+
+          var _barX = xBand((0, _utils.bandKey)({
+            label: label
+          }, index));
+
+          var _barWidth = xBand.bandwidth();
+
+          var _pointHeight = size.height / max;
+
+          var _pointDiameter = (_pointHeight > _barWidth ? _barWidth : _pointHeight) * 0.8;
+
+          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(CustomBarElement, {
+            index: lastOverlayValue,
+            pointDiameter: _pointDiameter + 10 // increase point diameter for dotted line
+            ,
+            barX: _barX,
+            barWidth: _barWidth,
+            pointHeight: _pointHeight,
+            label: label,
+            value: value,
+            classes: classes,
+            scale: scale,
+            dottedOverline: true
+          }), _this2.renderCorrectnessIcon(_barX, _barWidth, correctVal, correctness, classes, scale));
+        } // selected is lower than correct, render missing segment below the correct bar
+
+
+        var valuesToRender = [];
+
+        for (var _i2 = selectedVal; _i2 < correctVal; _i2++) {
+          valuesToRender.push(_i2);
+        }
+
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, valuesToRender.map(function (idx) {
+          return CustomBarElement({
+            index: idx,
+            pointDiameter: pointDiameter,
+            barX: barX,
+            barWidth: barWidth,
+            pointHeight: pointHeight,
+            label: label,
+            value: value,
+            classes: classes,
+            scale: scale,
+            dottedOverline: true
+          });
+        }), _this2.renderCorrectnessIcon(barX, barWidth, correctVal, correctness, classes, scale));
+      }(), /*#__PURE__*/_react["default"].createElement(Component, {
         x: barX,
         y: v,
         interactive: interactive,
@@ -184,7 +266,8 @@ var RawPlot = /*#__PURE__*/function (_React$Component) {
         correctness: correctness,
         isHovered: isHovered,
         defineChart: defineChart,
-        color: _renderUi.color.primaryDark()
+        color: _renderUi.color.primaryDark(),
+        isPlot: true
       })));
     }
   }]);
@@ -207,17 +290,45 @@ exports.RawPlot = RawPlot;
     label: _propTypes["default"].string
   })
 });
-var Bar = (0, _index.withStyles)(function () {
+var Bar = (0, _index.withStyles)(function (theme) {
   return {
     dot: {
-      fill: _renderUi.color.primaryLight(),
+      fill: _renderUi.color.visualElementsColors.PLOT_FILL_COLOR,
       '&.correct': (0, _styles.correct)('stroke'),
       '&.incorrect': (0, _styles.incorrect)('stroke')
     },
+    dotColor: {
+      fill: _renderUi.color.visualElementsColors.PLOT_FILL_COLOR,
+      '&.correct': (0, _styles.correct)('fill'),
+      '&.incorrect': (0, _styles.incorrect)('fill')
+    },
     line: {
-      stroke: _renderUi.color.primaryLight(),
+      stroke: _renderUi.color.visualElementsColors.PLOT_FILL_COLOR,
       '&.correct': (0, _styles.correct)('stroke'),
       '&.incorrect': (0, _styles.incorrect)('stroke')
+    },
+    correctIcon: {
+      backgroundColor: _renderUi.color.correct()
+    },
+    incorrectIcon: {
+      backgroundColor: _renderUi.color.incorrectWithIcon()
+    },
+    correctnessIcon: {
+      borderRadius: theme.spacing.unit * 2,
+      color: _renderUi.color.defaults.WHITE,
+      fontSize: '16px',
+      width: '16px',
+      height: '16px',
+      padding: '2px',
+      border: "1px solid ".concat(_renderUi.color.defaults.WHITE),
+      stroke: 'initial',
+      boxSizing: 'unset' // to override the default border-box in IBX
+
+    },
+    smallIcon: {
+      fontSize: '10px',
+      width: '10px',
+      height: '10px'
     }
   };
 })(RawPlot);
@@ -241,7 +352,8 @@ var Plot = /*#__PURE__*/function (_React$Component2) {
           xBand = _this$props3.xBand,
           CustomBarElement = _this$props3.CustomBarElement,
           _onChangeCategory = _this$props3.onChangeCategory,
-          defineChart = _this$props3.defineChart;
+          defineChart = _this$props3.defineChart,
+          correctData = _this$props3.correctData;
       return /*#__PURE__*/_react["default"].createElement(_group.Group, null, (data || []).map(function (d, index) {
         return /*#__PURE__*/_react["default"].createElement(Bar, {
           value: d.value,
@@ -256,7 +368,8 @@ var Plot = /*#__PURE__*/function (_React$Component2) {
           },
           graphProps: graphProps,
           CustomBarElement: CustomBarElement,
-          correctness: d.correctness
+          correctness: d.correctness,
+          correctData: correctData
         });
       }));
     }

package/lib/plot/common/plot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/plot/common/plot.jsx"],"names":["log","RawPlot","props","setState","isHovered","dragValue","label","onChangeCategory","state","undefined","value","setDragValue","existing","next","graphProps","classes","xBand","index","CustomBarElement","interactive","correctness","defineChart","scale","range","size","max","v","Number","isFinite","barWidth","bandwidth","barHeight","y","barX","values","i","push","pointHeight","height","pointDiameter","Component","DraggableHandle","DragHandle","handleMouseEnter","handleMouseLeave","length","fill","map","dragStop","color","primaryDark","React","PropTypes","func","number","object","string","isRequired","types","GraphPropsType","bool","shape","Bar","dot","primaryLight","line","stroke","Plot","data","d","category","array"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { Group } from '@vx/group';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport DraggableHandle, { DragHandle } from '../../common/drag-handle';\nimport debug from 'debug';\nimport { color } from '@pie-lib/render-ui';\nimport { bandKey } from '../../utils';\nimport { correct, incorrect } from '../../common/styles';\n\nconst log = debug('pie-lib:chart:bars');\n\nexport class RawPlot extends React.Component {\n  static propTypes = {\n    onChangeCategory: PropTypes.func,\n    value: PropTypes.number,\n    classes: PropTypes.object,\n    label: PropTypes.string,\n    xBand: PropTypes.func,\n    index: PropTypes.number.isRequired,\n    graphProps: types.GraphPropsType.isRequired,\n    CustomBarElement: PropTypes.func,\n    interactive: PropTypes.bool,\n    correctness: PropTypes.shape({\n      value: PropTypes.string,\n      label: PropTypes.string,\n    }),\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      dragValue: undefined,\n      isHovered: false,\n    };\n  }\n\n  handleMouseEnter = () => {\n    this.setState({ isHovered: true });\n  };\n\n  handleMouseLeave = () => {\n    this.setState({ isHovered: false });\n  };\n\n  setDragValue = (dragValue) => this.setState({ dragValue });\n\n  dragStop = () => {\n    const { label, onChangeCategory } = this.props;\n    const { dragValue } = this.state;\n    log('[dragStop]', dragValue);\n\n    if (dragValue !== undefined) {\n      onChangeCategory({ label, value: dragValue });\n    }\n\n    this.setDragValue(undefined);\n  };\n\n  dragValue = (existing, next) => {\n    log('[dragValue] next:', next);\n\n    this.setDragValue(next);\n  };\n\n  render() {\n    const {\n      graphProps,\n      value,\n      label,\n      classes,\n      xBand,\n      index,\n      CustomBarElement,\n      interactive,\n      correctness,\n      defineChart,\n    } = this.props;\n\n    const { scale, range, size } = graphProps;\n    const { max } = range || {};\n    const { dragValue, isHovered } = this.state;\n\n    const v = Number.isFinite(dragValue) ? dragValue : value;\n    const barWidth = xBand.bandwidth();\n    const barHeight = scale.y(range.max - v);\n    const barX = xBand(bandKey({ label }, index));\n\n    log('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);\n\n    const values = [];\n\n    for (let i = 0; i < v; i++) {\n      values.push(i);\n    }\n\n    const pointHeight = size.height / max;\n    const pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;\n    const Component = interactive ? DraggableHandle : DragHandle;\n\n    return (\n      <React.Fragment>\n        <g onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>\n          {isHovered && (\n            <rect\n              x={barX}\n              y={scale.y(v)}\n              width={barWidth}\n              height={values?.length ? pointHeight * values.length : 0}\n              style={{ fill: '#E5E8F5' }}\n            />\n          )}\n          {values.map((index) =>\n            CustomBarElement({\n              index,\n              pointDiameter,\n              barX,\n              barWidth,\n              pointHeight,\n              label,\n              value,\n              classes,\n              scale,\n            }),\n          )}\n          <Component\n            x={barX}\n            y={v}\n            interactive={interactive}\n            width={barWidth}\n            onDrag={(v) => this.dragValue(value, v)}\n            onDragStop={this.dragStop}\n            graphProps={graphProps}\n            correctness={correctness}\n            isHovered={isHovered}\n            defineChart={defineChart}\n            color={color.primaryDark()}\n          />\n        </g>\n      </React.Fragment>\n    );\n  }\n}\n\nconst Bar = withStyles(() => ({\n  dot: {\n    fill: color.primaryLight(),\n    '&.correct': correct('stroke'),\n    '&.incorrect': incorrect('stroke'),\n  },\n  line: {\n    stroke: color.primaryLight(),\n    '&.correct': correct('stroke'),\n    '&.incorrect': incorrect('stroke'),\n  },\n}))(RawPlot);\n\nexport class Plot extends React.Component {\n  static propTypes = {\n    data: PropTypes.array,\n    onChangeCategory: PropTypes.func,\n    xBand: PropTypes.func,\n    graphProps: types.GraphPropsType.isRequired,\n    defineChart: PropTypes.bool,\n    CustomBarElement: PropTypes.func,\n  };\n\n  render() {\n    const { data, graphProps, xBand, CustomBarElement, onChangeCategory, defineChart } = this.props;\n\n    return (\n      <Group>\n        {(data || []).map((d, index) => (\n          <Bar\n            value={d.value}\n            label={d.label}\n            interactive={defineChart || d.interactive}\n            defineChart={defineChart}\n            xBand={xBand}\n            index={index}\n            key={`bar-${d.label}-${d.value}-${index}`}\n            onChangeCategory={(category) => onChangeCategory(index, category)}\n            graphProps={graphProps}\n            CustomBarElement={CustomBarElement}\n            correctness={d.correctness}\n          />\n        ))}\n      </Group>\n    );\n  }\n}\n\nexport default Plot;\n"],"file":"plot.js"}
+{"version":3,"sources":["../../../src/plot/common/plot.jsx"],"names":["log","ICON_SIZE","RawPlot","props","setState","isHovered","dragValue","label","onChangeCategory","state","undefined","value","setDragValue","existing","next","barX","barWidth","correctVal","correctness","classes","scale","y","correctnessIcon","correctIcon","smallIcon","graphProps","xBand","index","CustomBarElement","interactive","defineChart","correctData","range","size","max","v","Number","isFinite","bandwidth","barHeight","values","i","push","pointHeight","height","pointDiameter","Component","DraggableHandle","DragHandle","allowRolloverEvent","handleMouseEnter","handleMouseLeave","length","color","defaults","BORDER_GRAY","map","parseFloat","isNaN","selectedVal","overlayValues","lastIndexOfOverlay","lastOverlayValue","renderCorrectnessIcon","valuesToRender","idx","dottedOverline","dragStop","primaryDark","React","PropTypes","func","number","object","string","isRequired","types","GraphPropsType","bool","shape","Bar","theme","dot","fill","visualElementsColors","PLOT_FILL_COLOR","dotColor","line","stroke","backgroundColor","correct","incorrectIcon","incorrectWithIcon","borderRadius","spacing","unit","WHITE","fontSize","width","padding","border","boxSizing","Plot","data","d","category","array"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Check from '@material-ui/icons/Check';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport { Group } from '@vx/group';\nimport debug from 'debug';\n\nimport { types } from '@pie-lib/plot';\nimport DraggableHandle, { DragHandle } from '../../common/drag-handle';\nimport { color } from '@pie-lib/render-ui';\nimport { bandKey } from '../../utils';\nimport { correct, incorrect } from '../../common/styles';\n\nconst log = debug('pie-lib:chart:bars');\nconst ICON_SIZE = 16; // 10px icon + 2px padding on all sides + 1px border\n\nexport class RawPlot extends React.Component {\n  static propTypes = {\n    onChangeCategory: PropTypes.func,\n    value: PropTypes.number,\n    classes: PropTypes.object,\n    label: PropTypes.string,\n    xBand: PropTypes.func,\n    index: PropTypes.number.isRequired,\n    graphProps: types.GraphPropsType.isRequired,\n    CustomBarElement: PropTypes.func,\n    interactive: PropTypes.bool,\n    correctness: PropTypes.shape({\n      value: PropTypes.string,\n      label: PropTypes.string,\n    }),\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      dragValue: undefined,\n      isHovered: false,\n    };\n  }\n\n  handleMouseEnter = () => {\n    this.setState({ isHovered: true });\n  };\n\n  handleMouseLeave = () => {\n    this.setState({ isHovered: false });\n  };\n\n  setDragValue = (dragValue) => this.setState({ dragValue });\n\n  dragStop = () => {\n    const { label, onChangeCategory } = this.props;\n    const { dragValue } = this.state;\n    log('[dragStop]', dragValue);\n\n    if (dragValue !== undefined) {\n      onChangeCategory({ label, value: dragValue });\n    }\n\n    this.setDragValue(undefined);\n  };\n\n  dragValue = (existing, next) => {\n    log('[dragValue] next:', next);\n\n    this.setDragValue(next);\n  };\n\n  renderCorrectnessIcon = (barX, barWidth, correctVal, correctness, classes, scale) => (\n    <foreignObject\n      x={barX + barWidth / 2 - ICON_SIZE / 2}\n      y={scale.y(correctVal) + ICON_SIZE}\n      width={ICON_SIZE}\n      height={ICON_SIZE}\n    >\n      <Check\n        className={classNames(classes.correctnessIcon, classes.correctIcon, classes.smallIcon)}\n        title={correctness.label}\n      />\n    </foreignObject>\n  );\n\n  render() {\n    const {\n      graphProps,\n      value,\n      label,\n      classes,\n      xBand,\n      index,\n      CustomBarElement,\n      interactive,\n      correctness,\n      defineChart,\n      correctData,\n    } = this.props;\n\n    const { scale, range, size } = graphProps;\n    const { max } = range || {};\n    const { dragValue, isHovered } = this.state;\n\n    const v = Number.isFinite(dragValue) ? dragValue : value;\n    const barWidth = xBand.bandwidth();\n    const barHeight = scale.y(range.max - v);\n    const barX = xBand(bandKey({ label }, index));\n\n    log('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);\n\n    const values = [];\n\n    for (let i = 0; i < v; i++) {\n      values.push(i);\n    }\n\n    const pointHeight = size.height / max;\n    const pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;\n    const Component = interactive ? DraggableHandle : DragHandle;\n    const allowRolloverEvent = interactive && !correctness;\n\n    return (\n      <React.Fragment>\n        <g\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onTouchStart={this.handleMouseEnter}\n          onTouchEnd={this.handleMouseLeave}\n        >\n          {isHovered && allowRolloverEvent && (\n            <rect\n              x={barX}\n              y={scale.y(v)}\n              width={barWidth}\n              height={values?.length ? pointHeight * values.length : 0}\n              stroke={color.defaults.BORDER_GRAY}\n              strokeWidth={'4px'}\n              fill={'transparent'}\n            />\n          )}\n          {values.map((index) =>\n            CustomBarElement({\n              index,\n              pointDiameter,\n              barX,\n              barWidth,\n              pointHeight,\n              label,\n              value,\n              classes,\n              scale,\n            }),\n          )}\n          {correctness &&\n            correctness.value === 'incorrect' &&\n            (() => {\n              const correctVal = parseFloat(correctData[index] && correctData[index].value);\n              if (isNaN(correctVal)) return null;\n              const selectedVal = v;\n              if (selectedVal > correctVal) {\n                // selected is higher than correct: overlay the correct last segment\n                const overlayValues = [];\n                for (let i = 0; i < correctVal; i++) {\n                  overlayValues.push(i);\n                }\n                const lastIndexOfOverlay = overlayValues.length - 1;\n                const lastOverlayValue = overlayValues[lastIndexOfOverlay];\n                const barX = xBand(bandKey({ label }, index));\n                const barWidth = xBand.bandwidth();\n                const pointHeight = size.height / max;\n                const pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;\n                return (\n                  <>\n                    <CustomBarElement\n                      index={lastOverlayValue}\n                      pointDiameter={pointDiameter + 10} // increase point diameter for dotted line\n                      barX={barX}\n                      barWidth={barWidth}\n                      pointHeight={pointHeight}\n                      label={label}\n                      value={value}\n                      classes={classes}\n                      scale={scale}\n                      dottedOverline={true}\n                    />\n                    {this.renderCorrectnessIcon(barX, barWidth, correctVal, correctness, classes, scale)}\n                  </>\n                );\n              }\n              // selected is lower than correct, render missing segment below the correct bar\n              const valuesToRender = [];\n              for (let i = selectedVal; i < correctVal; i++) {\n                valuesToRender.push(i);\n              }\n              return (\n                <>\n                  {valuesToRender.map((idx) =>\n                    CustomBarElement({\n                      index: idx,\n                      pointDiameter,\n                      barX,\n                      barWidth,\n                      pointHeight,\n                      label,\n                      value,\n                      classes,\n                      scale,\n                      dottedOverline: true,\n                    }),\n                  )}\n                  {this.renderCorrectnessIcon(barX, barWidth, correctVal, correctness, classes, scale)}\n                </>\n              );\n            })()}\n          <Component\n            x={barX}\n            y={v}\n            interactive={interactive}\n            width={barWidth}\n            onDrag={(v) => this.dragValue(value, v)}\n            onDragStop={this.dragStop}\n            graphProps={graphProps}\n            correctness={correctness}\n            isHovered={isHovered}\n            defineChart={defineChart}\n            color={color.primaryDark()}\n            isPlot\n          />\n        </g>\n      </React.Fragment>\n    );\n  }\n}\n\nconst Bar = withStyles((theme) => ({\n  dot: {\n    fill: color.visualElementsColors.PLOT_FILL_COLOR,\n    '&.correct': correct('stroke'),\n    '&.incorrect': incorrect('stroke'),\n  },\n  dotColor: {\n    fill: color.visualElementsColors.PLOT_FILL_COLOR,\n    '&.correct': correct('fill'),\n    '&.incorrect': incorrect('fill'),\n  },\n  line: {\n    stroke: color.visualElementsColors.PLOT_FILL_COLOR,\n    '&.correct': correct('stroke'),\n    '&.incorrect': incorrect('stroke'),\n  },\n  correctIcon: {\n    backgroundColor: color.correct(),\n  },\n  incorrectIcon: {\n    backgroundColor: color.incorrectWithIcon(),\n  },\n  correctnessIcon: {\n    borderRadius: theme.spacing.unit * 2,\n    color: color.defaults.WHITE,\n    fontSize: '16px',\n    width: '16px',\n    height: '16px',\n    padding: '2px',\n    border: `1px solid ${color.defaults.WHITE}`,\n    stroke: 'initial',\n    boxSizing: 'unset', // to override the default border-box in IBX\n  },\n  smallIcon: {\n    fontSize: '10px',\n    width: '10px',\n    height: '10px',\n  },\n}))(RawPlot);\n\nexport class Plot extends React.Component {\n  static propTypes = {\n    data: PropTypes.array,\n    onChangeCategory: PropTypes.func,\n    xBand: PropTypes.func,\n    graphProps: types.GraphPropsType.isRequired,\n    defineChart: PropTypes.bool,\n    CustomBarElement: PropTypes.func,\n  };\n\n  render() {\n    const { data, graphProps, xBand, CustomBarElement, onChangeCategory, defineChart, correctData } = this.props;\n\n    return (\n      <Group>\n        {(data || []).map((d, index) => (\n          <Bar\n            value={d.value}\n            label={d.label}\n            interactive={defineChart || d.interactive}\n            defineChart={defineChart}\n            xBand={xBand}\n            index={index}\n            key={`bar-${d.label}-${d.value}-${index}`}\n            onChangeCategory={(category) => onChangeCategory(index, category)}\n            graphProps={graphProps}\n            CustomBarElement={CustomBarElement}\n            correctness={d.correctness}\n            correctData={correctData}\n          />\n        ))}\n      </Group>\n    );\n  }\n}\n\nexport default Plot;\n"],"file":"plot.js"}

package/lib/plot/dot.js

@@ -25,13 +25,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _shape = require("@vx/shape");
+
 var _plot = require("@pie-lib/plot");
 
 var _utils = require("../utils");
 
 var _plot2 = _interopRequireDefault(require("./common/plot"));
 
-var _shape = require("@vx/shape");
+var _renderUi = require("@pie-lib/render-ui");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
@@ -46,11 +48,21 @@ var CustomBarElement = function CustomBarElement(props) {
       label = props.label,
       value = props.value,
       classes = props.classes,
-      scale = props.scale;
+      scale = props.scale,
+      dottedOverline = props.dottedOverline;
   var r = pointDiameter / 2;
   var cx = barX + (barWidth - pointDiameter) / 2 + r;
   var cy = scale.y(index) - (pointHeight - pointDiameter) / 2 - r;
-  return /*#__PURE__*/_react["default"].createElement(_shape.Circle, {
+  var EXTRA_PADDING = 2;
+  return dottedOverline ? /*#__PURE__*/_react["default"].createElement(_shape.Circle, {
+    key: "point-".concat(label, "-").concat(value, "-").concat(index),
+    cx: cx,
+    cy: cy,
+    r: r + EXTRA_PADDING,
+    strokeDasharray: "4,4",
+    stroke: _renderUi.color.defaults.BORDER_GRAY,
+    fill: "none"
+  }) : /*#__PURE__*/_react["default"].createElement(_shape.Circle, {
     key: "point-".concat(label, "-").concat(value, "-").concat(index),
     className: classes.dot,
     cx: cx,
@@ -68,7 +80,8 @@ CustomBarElement.propTypes = {
   value: _propTypes["default"].number,
   label: _propTypes["default"].string,
   classes: _propTypes["default"].object,
-  scale: _propTypes["default"].object
+  scale: _propTypes["default"].object,
+  dottedOverline: _propTypes["default"].bool
 };
 
 var DotPlot = /*#__PURE__*/function (_React$Component) {

package/lib/plot/dot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/plot/dot.js"],"names":["CustomBarElement","props","index","pointDiameter","barX","barWidth","pointHeight","label","value","classes","scale","r","cx","cy","y","dot","propTypes","PropTypes","number","string","object","DotPlot","data","graphProps","size","xBand","x","width","React","Component","array","onChange","func","types","GraphPropsType","isRequired","type","name"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { dataToXBand } from '../utils';\nimport Plot from './common/plot';\nimport { Circle } from '@vx/shape';\n\nconst CustomBarElement = (props) => {\n  const { index, pointDiameter, barX, barWidth, pointHeight, label, value, classes, scale } = props;\n\n  const r = pointDiameter / 2;\n  const cx = barX + (barWidth - pointDiameter) / 2 + r;\n  const cy = scale.y(index) - (pointHeight - pointDiameter) / 2 - r;\n\n  return <Circle key={`point-${label}-${value}-${index}`} className={classes.dot} cx={cx} cy={cy} r={r} />;\n};\n\nCustomBarElement.propTypes = {\n  index: PropTypes.number,\n  pointDiameter: PropTypes.number,\n  barX: PropTypes.number,\n  barWidth: PropTypes.number,\n  pointHeight: PropTypes.number,\n  value: PropTypes.number,\n  label: PropTypes.string,\n  classes: PropTypes.object,\n  scale: PropTypes.object,\n};\n\nexport class DotPlot 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, 'dotPlot');\n\n    return <Plot {...props} xBand={xBand} CustomBarElement={CustomBarElement} />;\n  }\n}\n\nexport default () => ({\n  type: 'dotPlot',\n  Component: DotPlot,\n  name: 'Dot Plot',\n});\n"],"file":"dot.js"}
+{"version":3,"sources":["../../src/plot/dot.js"],"names":["CustomBarElement","props","index","pointDiameter","barX","barWidth","pointHeight","label","value","classes","scale","dottedOverline","r","cx","cy","y","EXTRA_PADDING","color","defaults","BORDER_GRAY","dot","propTypes","PropTypes","number","string","object","bool","DotPlot","data","graphProps","size","xBand","x","width","React","Component","array","onChange","func","types","GraphPropsType","isRequired","type","name"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Circle } from '@vx/shape';\n\nimport { types } from '@pie-lib/plot';\nimport { dataToXBand } from '../utils';\nimport Plot from './common/plot';\nimport { color } from '@pie-lib/render-ui';\n\nconst CustomBarElement = (props) => {\n  const { index, pointDiameter, barX, barWidth, pointHeight, label, value, classes, scale, dottedOverline } = props;\n\n  const r = pointDiameter / 2;\n  const cx = barX + (barWidth - pointDiameter) / 2 + r;\n  const cy = scale.y(index) - (pointHeight - pointDiameter) / 2 - r;\n  const EXTRA_PADDING = 2;\n\n  return dottedOverline ? (\n    <Circle\n      key={`point-${label}-${value}-${index}`}\n      cx={cx}\n      cy={cy}\n      r={r + EXTRA_PADDING}\n      strokeDasharray=\"4,4\"\n      stroke={color.defaults.BORDER_GRAY}\n      fill=\"none\"\n    />\n  ) : (\n    <Circle key={`point-${label}-${value}-${index}`} className={classes.dot} cx={cx} cy={cy} r={r} />\n  );\n};\n\nCustomBarElement.propTypes = {\n  index: PropTypes.number,\n  pointDiameter: PropTypes.number,\n  barX: PropTypes.number,\n  barWidth: PropTypes.number,\n  pointHeight: PropTypes.number,\n  value: PropTypes.number,\n  label: PropTypes.string,\n  classes: PropTypes.object,\n  scale: PropTypes.object,\n  dottedOverline: PropTypes.bool,\n};\n\nexport class DotPlot 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, 'dotPlot');\n\n    return <Plot {...props} xBand={xBand} CustomBarElement={CustomBarElement} />;\n  }\n}\n\nexport default () => ({\n  type: 'dotPlot',\n  Component: DotPlot,\n  name: 'Dot Plot',\n});\n"],"file":"dot.js"}

package/lib/plot/line.js

@@ -25,15 +25,17 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _shape = require("@vx/shape");
+
+var _group = require("@vx/group");
+
 var _plot = require("@pie-lib/plot");
 
 var _utils = require("../utils");
 
-var _plot2 = _interopRequireDefault(require("./common/plot"));
+var _renderUi = require("@pie-lib/render-ui");
 
-var _shape = require("@vx/shape");
-
-var _group = require("@vx/group");
+var _plot2 = _interopRequireDefault(require("./common/plot"));
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
@@ -48,10 +50,21 @@ var CustomBarElement = function CustomBarElement(props) {
       label = props.label,
       value = props.value,
       classes = props.classes,
-      scale = props.scale;
+      scale = props.scale,
+      dottedOverline = props.dottedOverline;
   var x = barX + (barWidth - pointDiameter) / 2;
   var y = scale.y(index) - (pointHeight - pointDiameter) / 2;
-  return /*#__PURE__*/_react["default"].createElement(_group.Group, null, /*#__PURE__*/_react["default"].createElement(_shape.LinePath, {
+  var EXTRA_PADDING = 2;
+  return dottedOverline ? /*#__PURE__*/_react["default"].createElement("rect", {
+    key: "point-".concat(label, "-").concat(value, "-").concat(index),
+    x: x - EXTRA_PADDING,
+    y: y - pointDiameter - EXTRA_PADDING,
+    width: pointDiameter + EXTRA_PADDING * 2,
+    height: pointDiameter + EXTRA_PADDING * 2,
+    strokeDasharray: "4,4",
+    stroke: _renderUi.color.defaults.BORDER_GRAY,
+    fill: "none"
+  }) : /*#__PURE__*/_react["default"].createElement(_group.Group, null, /*#__PURE__*/_react["default"].createElement(_shape.LinePath, {
     data: [{
       x: x,
       y: y

package/lib/plot/line.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/plot/line.js"],"names":["CustomBarElement","props","index","pointDiameter","barX","barWidth","pointHeight","label","value","classes","scale","x","y","line","d","propTypes","PropTypes","number","string","object","LinePlot","data","graphProps","size","xBand","width","React","Component","array","onChange","func","types","GraphPropsType","isRequired","type","name"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAW;AAClC,MAAQC,KAAR,GAA4FD,KAA5F,CAAQC,KAAR;AAAA,MAAeC,aAAf,GAA4FF,KAA5F,CAAeE,aAAf;AAAA,MAA8BC,IAA9B,GAA4FH,KAA5F,CAA8BG,IAA9B;AAAA,MAAoCC,QAApC,GAA4FJ,KAA5F,CAAoCI,QAApC;AAAA,MAA8CC,WAA9C,GAA4FL,KAA5F,CAA8CK,WAA9C;AAAA,MAA2DC,KAA3D,GAA4FN,KAA5F,CAA2DM,KAA3D;AAAA,MAAkEC,KAAlE,GAA4FP,KAA5F,CAAkEO,KAAlE;AAAA,MAAyEC,OAAzE,GAA4FR,KAA5F,CAAyEQ,OAAzE;AAAA,MAAkFC,KAAlF,GAA4FT,KAA5F,CAAkFS,KAAlF;AAEA,MAAMC,CAAC,GAAGP,IAAI,GAAG,CAACC,QAAQ,GAAGF,aAAZ,IAA6B,CAA9C;AACA,MAAMS,CAAC,GAAGF,KAAK,CAACE,CAAN,CAAQV,KAAR,IAAiB,CAACI,WAAW,GAAGH,aAAf,IAAgC,CAA3D;AAEA,sBACE,gCAAC,YAAD,qBACE,gCAAC,eAAD;AACE,IAAA,IAAI,EAAE,CACJ;AAAEQ,MAAAA,CAAC,EAADA,CAAF;AAAKC,MAAAA,CAAC,EAADA;AAAL,KADI,EAEJ;AAAED,MAAAA,CAAC,EAAEA,CAAC,GAAGR,aAAT;AAAwBS,MAAAA,CAAC,EAAEA,CAAC,GAAGT;AAA/B,KAFI,CADR;AAKE,IAAA,GAAG,kBAAWI,KAAX,cAAoBC,KAApB,cAA6BN,KAA7B,OALL;AAME,IAAA,SAAS,EAAEO,OAAO,CAACI,IANrB;AAOE,IAAA,CAAC,EAAE,WAACC,CAAD;AAAA,aAAOA,CAAC,CAACH,CAAT;AAAA,KAPL;AAQE,IAAA,CAAC,EAAE,WAACG,CAAD;AAAA,aAAOA,CAAC,CAACF,CAAT;AAAA,KARL;AASE,IAAA,WAAW,EAAET,aAAa,GAAG;AAT/B,IADF,eAYE,gCAAC,eAAD;AACE,IAAA,IAAI,EAAE,CACJ;AAAEQ,MAAAA,CAAC,EAADA,CAAF;AAAKC,MAAAA,CAAC,EAAEA,CAAC,GAAGT;AAAZ,KADI,EAEJ;AAAEQ,MAAAA,CAAC,EAAEA,CAAC,GAAGR,aAAT;AAAwBS,MAAAA,CAAC,EAADA;AAAxB,KAFI,CADR;AAKE,IAAA,GAAG,kBAAWL,KAAX,cAAoBC,KAApB,cAA6BN,KAA7B,OALL;AAME,IAAA,SAAS,EAAEO,OAAO,CAACI,IANrB;AAOE,IAAA,CAAC,EAAE,WAACC,CAAD;AAAA,aAAOA,CAAC,CAACH,CAAT;AAAA,KAPL;AAQE,IAAA,CAAC,EAAE,WAACG,CAAD;AAAA,aAAOA,CAAC,CAACF,CAAT;AAAA,KARL;AASE,IAAA,WAAW,EAAET,aAAa,GAAG;AAT/B,IAZF,CADF;AA0BD,CAhCD;;AAkCAH,gBAAgB,CAACe,SAAjB,GAA6B;AAC3Bb,EAAAA,KAAK,EAAEc,sBAAUC,MADU;AAE3Bd,EAAAA,aAAa,EAAEa,sBAAUC,MAFE;AAG3Bb,EAAAA,IAAI,EAAEY,sBAAUC,MAHW;AAI3BZ,EAAAA,QAAQ,EAAEW,sBAAUC,MAJO;AAK3BX,EAAAA,WAAW,EAAEU,sBAAUC,MALI;AAM3BT,EAAAA,KAAK,EAAEQ,sBAAUC,MANU;AAO3BV,EAAAA,KAAK,EAAES,sBAAUE,MAPU;AAQ3BT,EAAAA,OAAO,EAAEO,sBAAUG,MARQ;AAS3BT,EAAAA,KAAK,EAAEM,sBAAUG;AATU,CAA7B;;IAYaC,Q;;;;;;;;;;;;WAOX,kBAAS;AACP,UAAMnB,KAAK,GAAG,KAAKA,KAAnB;AACA,UAAQoB,IAAR,GAA6BpB,KAA7B,CAAQoB,IAAR;AAAA,UAAcC,UAAd,GAA6BrB,KAA7B,CAAcqB,UAAd;;AACA,iBAAkCA,UAAU,IAAI,EAAhD;AAAA,4BAAQZ,KAAR;AAAA,UAAQA,KAAR,2BAAgB,EAAhB;AAAA,2BAAoBa,IAApB;AAAA,UAAoBA,IAApB,0BAA2B,EAA3B;;AACA,UAAMC,KAAK,GAAG,wBAAYd,KAAK,CAACC,CAAlB,EAAqBU,IAArB,EAA2BE,IAAI,CAACE,KAAhC,EAAuC,UAAvC,CAAd;AAEA,0BAAO,gCAAC,iBAAD,gCAAUxB,KAAV;AAAiB,QAAA,KAAK,EAAEuB,KAAxB;AAA+B,QAAA,gBAAgB,EAAExB;AAAjD,SAAP;AACD;;;EAd2B0B,kBAAMC,S;;;iCAAvBP,Q,eACQ;AACjBC,EAAAA,IAAI,EAAEL,sBAAUY,KADC;AAEjBC,EAAAA,QAAQ,EAAEb,sBAAUc,IAFH;AAGjBR,EAAAA,UAAU,EAAES,YAAMC,cAAN,CAAqBC;AAHhB,C;;eAgBN;AAAA,SAAO;AACpBC,IAAAA,IAAI,EAAE,UADc;AAEpBP,IAAAA,SAAS,EAAEP,QAFS;AAGpBe,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 Plot from './common/plot';\nimport { LinePath } from '@vx/shape';\nimport { Group } from '@vx/group';\n\nconst CustomBarElement = (props) => {\n  const { index, pointDiameter, barX, barWidth, pointHeight, label, value, classes, scale } = props;\n\n  const x = barX + (barWidth - pointDiameter) / 2;\n  const y = scale.y(index) - (pointHeight - pointDiameter) / 2;\n\n  return (\n    <Group>\n      <LinePath\n        data={[\n          { x, y },\n          { x: x + pointDiameter, y: y - pointDiameter },\n        ]}\n        key={`point-${label}-${value}-${index}-1`}\n        className={classes.line}\n        x={(d) => d.x}\n        y={(d) => d.y}\n        strokeWidth={pointDiameter / 5}\n      />\n      <LinePath\n        data={[\n          { x, y: y - pointDiameter },\n          { x: x + pointDiameter, y },\n        ]}\n        key={`point-${label}-${value}-${index}-2`}\n        className={classes.line}\n        x={(d) => d.x}\n        y={(d) => d.y}\n        strokeWidth={pointDiameter / 5}\n      />\n    </Group>\n  );\n};\n\nCustomBarElement.propTypes = {\n  index: PropTypes.number,\n  pointDiameter: PropTypes.number,\n  barX: PropTypes.number,\n  barWidth: PropTypes.number,\n  pointHeight: PropTypes.number,\n  value: PropTypes.number,\n  label: PropTypes.string,\n  classes: PropTypes.object,\n  scale: PropTypes.object,\n};\n\nexport class LinePlot 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, 'linePlot');\n\n    return <Plot {...props} xBand={xBand} CustomBarElement={CustomBarElement} />;\n  }\n}\n\nexport default () => ({\n  type: 'linePlot',\n  Component: LinePlot,\n  name: 'Line Plot',\n});\n"],"file":"line.js"}
+{"version":3,"sources":["../../src/plot/line.js"],"names":["CustomBarElement","props","index","pointDiameter","barX","barWidth","pointHeight","label","value","classes","scale","dottedOverline","x","y","EXTRA_PADDING","color","defaults","BORDER_GRAY","line","d","propTypes","PropTypes","number","string","object","LinePlot","data","graphProps","size","xBand","width","React","Component","array","onChange","func","types","GraphPropsType","isRequired","type","name"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { LinePath } from '@vx/shape';\nimport { Group } from '@vx/group';\n\nimport { types } from '@pie-lib/plot';\nimport { dataToXBand } from '../utils';\nimport { color } from '@pie-lib/render-ui';\nimport Plot from './common/plot';\n\nconst CustomBarElement = (props) => {\n  const { index, pointDiameter, barX, barWidth, pointHeight, label, value, classes, scale, dottedOverline } = props;\n\n  const x = barX + (barWidth - pointDiameter) / 2;\n  const y = scale.y(index) - (pointHeight - pointDiameter) / 2;\n  const EXTRA_PADDING = 2;\n\n  return dottedOverline ? (\n    <rect\n      key={`point-${label}-${value}-${index}`}\n      x={x - EXTRA_PADDING}\n      y={y - pointDiameter - EXTRA_PADDING}\n      width={pointDiameter + EXTRA_PADDING * 2}\n      height={pointDiameter + EXTRA_PADDING * 2}\n      strokeDasharray=\"4,4\"\n      stroke={color.defaults.BORDER_GRAY}\n      fill=\"none\"\n    />\n  ) : (\n    <Group>\n      <LinePath\n        data={[\n          { x, y },\n          { x: x + pointDiameter, y: y - pointDiameter },\n        ]}\n        key={`point-${label}-${value}-${index}-1`}\n        className={classes.line}\n        x={(d) => d.x}\n        y={(d) => d.y}\n        strokeWidth={pointDiameter / 5}\n      />\n      <LinePath\n        data={[\n          { x, y: y - pointDiameter },\n          { x: x + pointDiameter, y },\n        ]}\n        key={`point-${label}-${value}-${index}-2`}\n        className={classes.line}\n        x={(d) => d.x}\n        y={(d) => d.y}\n        strokeWidth={pointDiameter / 5}\n      />\n    </Group>\n  );\n};\n\nCustomBarElement.propTypes = {\n  index: PropTypes.number,\n  pointDiameter: PropTypes.number,\n  barX: PropTypes.number,\n  barWidth: PropTypes.number,\n  pointHeight: PropTypes.number,\n  value: PropTypes.number,\n  label: PropTypes.string,\n  classes: PropTypes.object,\n  scale: PropTypes.object,\n};\n\nexport class LinePlot 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, 'linePlot');\n\n    return <Plot {...props} xBand={xBand} CustomBarElement={CustomBarElement} />;\n  }\n}\n\nexport default () => ({\n  type: 'linePlot',\n  Component: LinePlot,\n  name: 'Line Plot',\n});\n"],"file":"line.js"}

package/lib/tool-menu.js

@@ -42,12 +42,8 @@ var translator = _translator["default"].translator;
 var buttonStyles = function buttonStyles(theme) {
   return {
     root: {
-      backgroundColor: _renderUi.color.background(),
       color: _renderUi.color.text(),
       border: "1px solid ".concat(_renderUi.color.secondary()),
-      '&:hover': {
-        backgroundColor: _renderUi.color.secondaryLight()
-      },
       fontSize: theme.typography.fontSize
     },
     selected: {

package/lib/tool-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tool-menu.jsx"],"names":["translator","Translator","buttonStyles","theme","root","backgroundColor","color","background","text","border","secondary","secondaryLight","fontSize","typography","selected","primaryDark","notSelected","primary","disabled","MiniButton","props","classes","className","value","onClick","propTypes","PropTypes","bool","string","disabledClassName","func","ToolMenu","addCategory","language","t","lng","React","Component"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { color } from '@pie-lib/render-ui';\n\nimport { withStyles } from '@material-ui/core/styles';\nimport cn from 'classnames';\nimport Button from '@material-ui/core/Button';\nimport Translator from '@pie-lib/translator';\n\nconst { translator } = Translator;\n\nconst buttonStyles = (theme) => ({\n  root: {\n    backgroundColor: color.background(),\n    color: color.text(),\n    border: `1px solid ${color.secondary()}`,\n    '&:hover': {\n      backgroundColor: color.secondaryLight(),\n    },\n    fontSize: theme.typography.fontSize,\n  },\n  selected: {\n    backgroundColor: color.background(),\n    '& span': {\n      color: color.primaryDark(),\n    },\n  },\n  notSelected: {\n    '& span': {\n      color: color.primary(),\n    },\n    backgroundColor: color.background(),\n  },\n  disabled: {\n    '& span': {\n      color: color.primary(),\n    },\n    backgroundColor: color.disabled(),\n  },\n});\n\nexport const MiniButton = withStyles(buttonStyles)((props) => {\n  const { disabled, classes, className, selected, value, onClick } = props;\n  return (\n    <Button\n      size=\"small\"\n      disabled={disabled}\n      color={selected ? 'secondary' : 'default'}\n      className={cn(classes.root, selected && classes.selected, className)}\n      classes={{ disabled: cn(disabled && classes.disabled) }}\n      value={value}\n      key={value}\n      variant=\"outlined\"\n      onClick={onClick}\n    >\n      {value}\n    </Button>\n  );\n});\nMiniButton.propTypes = {\n  disabled: PropTypes.bool,\n  className: PropTypes.string,\n  disabledClassName: PropTypes.string,\n  selected: PropTypes.bool,\n  value: PropTypes.string,\n  onClick: PropTypes.func,\n};\n\nexport class ToolMenu extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    addCategory: PropTypes.func,\n    disabled: PropTypes.bool,\n    language: PropTypes.string,\n  };\n\n  static defaultProps = {};\n\n  render() {\n    const { className, disabled, addCategory, language } = this.props;\n\n    return (\n      <div className={classNames(className)}>\n        {!disabled && (\n          <MiniButton value={translator.t('charting.addCategory', { lng: language })} onClick={addCategory} />\n        )}\n      </div>\n    );\n  }\n}\n\nexport default ToolMenu;\n"],"file":"tool-menu.js"}
+{"version":3,"sources":["../src/tool-menu.jsx"],"names":["translator","Translator","buttonStyles","theme","root","color","text","border","secondary","fontSize","typography","selected","backgroundColor","background","primaryDark","notSelected","primary","disabled","MiniButton","props","classes","className","value","onClick","propTypes","PropTypes","bool","string","disabledClassName","func","ToolMenu","addCategory","language","t","lng","React","Component"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { color } from '@pie-lib/render-ui';\n\nimport { withStyles } from '@material-ui/core/styles';\nimport cn from 'classnames';\nimport Button from '@material-ui/core/Button';\nimport Translator from '@pie-lib/translator';\n\nconst { translator } = Translator;\n\nconst buttonStyles = (theme) => ({\n  root: {\n    color: color.text(),\n    border: `1px solid ${color.secondary()}`,\n    fontSize: theme.typography.fontSize,\n  },\n  selected: {\n    backgroundColor: color.background(),\n    '& span': {\n      color: color.primaryDark(),\n    },\n  },\n  notSelected: {\n    '& span': {\n      color: color.primary(),\n    },\n    backgroundColor: color.background(),\n  },\n  disabled: {\n    '& span': {\n      color: color.primary(),\n    },\n    backgroundColor: color.disabled(),\n  },\n});\n\nexport const MiniButton = withStyles(buttonStyles)((props) => {\n  const { disabled, classes, className, selected, value, onClick } = props;\n  return (\n    <Button\n      size=\"small\"\n      disabled={disabled}\n      color={selected ? 'secondary' : 'default'}\n      className={cn(classes.root, selected && classes.selected, className)}\n      classes={{ disabled: cn(disabled && classes.disabled) }}\n      value={value}\n      key={value}\n      variant=\"outlined\"\n      onClick={onClick}\n    >\n      {value}\n    </Button>\n  );\n});\nMiniButton.propTypes = {\n  disabled: PropTypes.bool,\n  className: PropTypes.string,\n  disabledClassName: PropTypes.string,\n  selected: PropTypes.bool,\n  value: PropTypes.string,\n  onClick: PropTypes.func,\n};\n\nexport class ToolMenu extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    addCategory: PropTypes.func,\n    disabled: PropTypes.bool,\n    language: PropTypes.string,\n  };\n\n  static defaultProps = {};\n\n  render() {\n    const { className, disabled, addCategory, language } = this.props;\n\n    return (\n      <div className={classNames(className)}>\n        {!disabled && (\n          <MiniButton value={translator.t('charting.addCategory', { lng: language })} onClick={addCategory} />\n        )}\n      </div>\n    );\n  }\n}\n\nexport default ToolMenu;\n"],"file":"tool-menu.js"}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "5.15.6",
+  "version": "5.15.7-next.1618+4ac095ca",
   "description": "charting",
   "keywords": [
     "react",
@@ -19,8 +19,9 @@
   "dependencies": {
     "@mapbox/point-geometry": "^0.1.0",
     "@material-ui/core": "^3.8.3",
-    "@pie-lib/plot": "^2.7.3",
-    "@pie-lib/translator": "^2.3.0",
+    "@pie-lib/plot": "^2.7.4-next.1618+4ac095ca",
+    "@pie-lib/render-ui": "^4.15.10-next.1639+4ac095ca",
+    "@pie-lib/translator": "^2.3.1-next.1712+4ac095ca",
     "@vx/axis": "^0.0.183",
     "@vx/event": "^0.0.182",
     "@vx/grid": "^0.0.183",
@@ -36,13 +37,10 @@
     "lodash": "^4.17.11",
     "react": "^16.8.1",
     "react-draggable": "^3.1.1",
-    "react-input-autosize": "^2.2.1",
-    "react-redux": "^6.0.0",
-    "redux": "^4.0.1",
-    "redux-undo": "beta"
+    "react-input-autosize": "^2.2.1"
   },
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "cda593dd0aedaadb7e1fd85f12d72ca3bb03d375"
+  "gitHead": "4ac095ca931e5fe8f131f28f41dd61093bd55d98"
 }