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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/common/drag-handle.jsx"],"names":["RawDragHandle","x","y","width","graphProps","classes","className","interactive","defineChart","isHovered","correctness","color","rest","scale","scaleValue","transparentHandle","handle","value","propTypes","PropTypes","number","isRequired","types","GraphPropsType","object","string","bool","shape","label","DragHandle","height","fill","transition","clipPath","handleContainer","secondaryDark","D","axis","fromDelta","props","delta","newPoint","utils","point","add","bounds","domain","range","area","left","top","bottom","right","anchorPoint"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { gridDraggable, utils, types } from '@pie-lib/plot';\nimport { color } from '@pie-lib/render-ui';\nimport { correct, incorrect, disabled } from './styles';\nimport { getScale } from '../utils';\nimport DragIcon from './drag-icon';\n\nconst RawDragHandle = ({\n  x,\n  y,\n  width,\n  graphProps,\n  classes,\n  className,\n  interactive,\n  defineChart,\n  isHovered,\n  correctness,\n  color,\n  ...rest\n}) => {\n  const { scale } = graphProps;\n  const scaleValue = getScale(width)?.scale;\n\n  return (\n    <svg x={x} y={scale.y(y) - 10} width={width} overflow=\"visible\">\n      {isHovered && !correctness && interactive && <DragIcon width={width} scaleValue={scaleValue} color={color} />}\n      <circle\n        cx={width / 2}\n        cy={10}\n        r={width / 2}\n        className={classNames(classes.transparentHandle, className)}\n        {...rest}\n      />\n\n      <defs>\n        <filter id=\"bottomShadow\" x=\"0\" y=\"0\" width=\"140%\" height=\"140%\">\n          <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"3\" />\n          <feOffset dx=\"0\" dy=\"5\" result=\"offsetblur\" />\n          <feFlood floodColor=\"#00000033\" />\n          <feComposite in2=\"offsetblur\" operator=\"in\" />\n          <feMerge>\n            <feMergeNode />\n            <feMergeNode in=\"SourceGraphic\" />\n          </feMerge>\n        </filter>\n      </defs>\n\n      {correctness && (\n        <rect\n          y={10}\n          width={width}\n          filter=\"url(#bottomShadow)\"\n          className={classNames(\n            classes.handle,\n            'handle',\n            className,\n            !interactive && 'non-interactive',\n            interactive && correctness && correctness.value,\n          )}\n          {...rest}\n        />\n      )}\n    </svg>\n  );\n};\n\nRawDragHandle.propTypes = {\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  width: PropTypes.number,\n  graphProps: types.GraphPropsType.isRequired,\n  classes: PropTypes.object.isRequired,\n  className: PropTypes.string,\n  interactive: PropTypes.bool,\n  isHovered: PropTypes.bool,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string,\n  }),\n  color: PropTypes.string,\n};\n\nexport const DragHandle = withStyles(() => ({\n  handle: {\n    height: '10px',\n    fill: 'transparent',\n    transition: 'fill 200ms linear, height 200ms linear',\n    '&.correct': correct('fill'),\n    '&.incorrect': incorrect('fill'),\n    '&.non-interactive': disabled('fill'),\n  },\n  transparentHandle: {\n    height: '20px',\n    fill: 'transparent',\n    clipPath: 'polygon(50% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 0%)',\n  },\n  handleContainer: {\n    height: 30,\n    '&:hover': {\n      '& .handle': {\n        fill: color.secondaryDark(),\n        height: '16px',\n      },\n    },\n    '&.non-interactive': disabled('fill'),\n    '&.incorrect': incorrect('fill'),\n    '&.correct': correct('fill'),\n  },\n}))(RawDragHandle);\n\nexport const D = gridDraggable({\n  axis: 'y',\n  fromDelta: (props, delta) => {\n    //TODO: should be in grid-draggable, if axis is y delta.x should always be 0.\n    delta.x = 0;\n    const newPoint = utils.point(props).add(utils.point(delta));\n\n    return newPoint.y;\n  },\n  bounds: (props, { domain, range }) => {\n    const area = { left: 0, top: props.y, bottom: props.y, right: 0 };\n    return utils.bounds(area, domain, range);\n  },\n  anchorPoint: (props) => {\n    return { x: props.x, y: props.y };\n  },\n})(DragHandle);\n\nexport default D;\n"],"file":"drag-handle.js"}
+{"version":3,"sources":["../../src/common/drag-handle.jsx"],"names":["RawDragHandle","x","y","width","graphProps","classes","className","interactive","defineChart","isHovered","correctness","color","isPlot","rest","scale","scaleValue","svgOverflowVisible","enumColor","defaults","BORDER_GRAY","transparentHandle","value","correctnessIcon","correctIcon","label","incorrectIcon","propTypes","PropTypes","number","isRequired","types","GraphPropsType","object","string","bool","shape","DragHandle","theme","handle","height","fill","transition","clipPath","handleContainer","secondaryDark","overflow","backgroundColor","correct","incorrectWithIcon","borderRadius","spacing","unit","WHITE","fontSize","padding","border","boxSizing","D","axis","fromDelta","props","delta","newPoint","utils","point","add","bounds","domain","range","area","left","top","bottom","right","anchorPoint"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport Check from '@material-ui/icons/Check';\nimport Close from '@material-ui/icons/Close';\n\nimport { gridDraggable, utils, types } from '@pie-lib/plot';\nimport { color as enumColor } from '@pie-lib/render-ui';\nimport { correct, incorrect, disabled } from './styles';\nimport { getScale } from '../utils';\nimport DragIcon from './drag-icon';\n\nconst RawDragHandle = ({\n  x,\n  y,\n  width,\n  graphProps,\n  classes,\n  className,\n  interactive,\n  defineChart,\n  isHovered,\n  correctness,\n  color,\n  isPlot,\n  ...rest\n}) => {\n  const { scale } = graphProps;\n  const scaleValue = getScale(width)?.scale;\n\n  return (\n    <svg x={x} y={scale.y(y) - 10} width={width} overflow=\"visible\" className={classes.svgOverflowVisible}>\n      {isHovered && !correctness && interactive && (\n        <DragIcon width={width} scaleValue={scaleValue} color={enumColor.defaults.BORDER_GRAY} classes={classes} />\n      )}\n      {interactive && !correctness && (\n        <ellipse\n          cx={width / 2}\n          cy={10}\n          rx={width / 2}\n          // the drag icon has a 22px fixed r value, so the ry value is 3 times that in order to cover all the area\n          ry={66}\n          className={classNames(classes.transparentHandle, className)}\n          {...rest}\n        />\n      )}\n\n      <defs>\n        <filter id=\"bottomShadow\" x=\"0\" y=\"0\" width=\"140%\" height=\"140%\">\n          <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"3\" />\n          <feOffset dx=\"0\" dy=\"5\" result=\"offsetblur\" />\n          <feFlood floodColor=\"#00000033\" />\n          <feComposite in2=\"offsetblur\" operator=\"in\" />\n          <feMerge>\n            <feMergeNode />\n            <feMergeNode in=\"SourceGraphic\" />\n          </feMerge>\n        </filter>\n      </defs>\n\n      {correctness && interactive && !isPlot && (\n        <foreignObject x={width / 2 - 14} y={0} width={40} height={40}>\n          {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        </foreignObject>\n      )}\n    </svg>\n  );\n};\n\nRawDragHandle.propTypes = {\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  width: PropTypes.number,\n  graphProps: types.GraphPropsType.isRequired,\n  classes: PropTypes.object.isRequired,\n  className: PropTypes.string,\n  interactive: PropTypes.bool,\n  isHovered: PropTypes.bool,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string,\n  }),\n  color: PropTypes.string,\n};\n\nexport const DragHandle = withStyles((theme) => ({\n  handle: {\n    height: '10px',\n    fill: 'transparent',\n    transition: 'fill 200ms linear, height 200ms linear',\n    '&.correct': correct('fill'),\n    '&.incorrect': incorrect('fill'),\n    '&.non-interactive': disabled('fill'),\n  },\n  transparentHandle: {\n    fill: 'transparent',\n    clipPath: 'polygon(50% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 0%)',\n  },\n  handleContainer: {\n    height: 30,\n    '&:hover': {\n      '& .handle': {\n        fill: enumColor.secondaryDark(),\n        height: '16px',\n      },\n    },\n    '&.non-interactive': disabled('fill'),\n    '&.incorrect': incorrect('fill'),\n    '&.correct': correct('fill'),\n  },\n  svgOverflowVisible: {\n    overflow: 'visible !important',\n  },\n  correctIcon: {\n    backgroundColor: enumColor.correct(),\n  },\n  incorrectIcon: {\n    backgroundColor: enumColor.incorrectWithIcon(),\n  },\n  correctnessIcon: {\n    borderRadius: theme.spacing.unit * 2,\n    color: enumColor.defaults.WHITE,\n    fontSize: '16px',\n    padding: '2px',\n    border: `4px solid ${enumColor.defaults.WHITE}`,\n    width: '16px',\n    height: '16px',\n    boxSizing: 'unset', // to override the default border-box in IBX\n  },\n}))(RawDragHandle);\n\nexport const D = gridDraggable({\n  axis: 'y',\n  fromDelta: (props, delta) => {\n    //TODO: should be in grid-draggable, if axis is y delta.x should always be 0.\n    delta.x = 0;\n    const newPoint = utils.point(props).add(utils.point(delta));\n\n    return newPoint.y;\n  },\n  bounds: (props, { domain, range }) => {\n    const area = { left: 0, top: props.y, bottom: props.y, right: 0 };\n    return utils.bounds(area, domain, range);\n  },\n  anchorPoint: (props) => {\n    return { x: props.x, y: props.y };\n  },\n})(DragHandle);\n\nexport default D;\n"],"file":"drag-handle.js"}

package/lib/common/drag-icon.js

@@ -16,36 +16,19 @@ var DragIcon = function DragIcon(_ref) {
 
   var width = _ref.width,
       scaleValue = _ref.scaleValue,
-      color = _ref.color;
+      color = _ref.color,
+      classes = _ref.classes;
   return /*#__PURE__*/_react["default"].createElement("svg", {
     x: (0, _utils.getAdjustedX)(width, scaleValue),
     y: (_getScale = (0, _utils.getScale)(width)) === null || _getScale === void 0 ? void 0 : _getScale.deltay,
     color: color,
+    width: width,
+    height: width,
     overflow: "visible",
-    filter: "url(#svgDropShadow)"
-  }, /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("filter", {
-    id: "svgDropShadow",
-    x: "-20%",
-    y: "-20%",
-    width: "140%",
-    height: "140%"
-  }, /*#__PURE__*/_react["default"].createElement("feGaussianBlur", {
-    "in": "SourceAlpha",
-    stdDeviation: "3"
-  }), /*#__PURE__*/_react["default"].createElement("feOffset", {
-    dx: "0",
-    dy: "5",
-    result: "offsetblur"
-  }), /*#__PURE__*/_react["default"].createElement("feFlood", {
-    floodColor: "#00000033"
-  }), /*#__PURE__*/_react["default"].createElement("feComposite", {
-    in2: "offsetblur",
-    operator: "in"
-  }), /*#__PURE__*/_react["default"].createElement("feMerge", null, /*#__PURE__*/_react["default"].createElement("feMergeNode", null), /*#__PURE__*/_react["default"].createElement("feMergeNode", {
-    "in": "SourceGraphic"
-  })))), /*#__PURE__*/_react["default"].createElement("g", {
+    viewBox: "0 0 ".concat(width, " ").concat(width),
+    className: classes.svgOverflowVisible
+  }, /*#__PURE__*/_react["default"].createElement("g", {
     xmlns: "http://www.w3.org/2000/svg",
-    filter: "url(#filter0_d_2312_1804)",
     fill: "currentColor",
     stroke: "currentColor",
     transform: "scale(".concat(scaleValue, ")")

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/common/drag-icon.jsx"],"names":["DragIcon","width","scaleValue","color","deltay"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA,IAAMA,QAAQ,GAAG,SAAXA,QAAW;AAAA;;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,MAAUC,UAAV,QAAUA,UAAV;AAAA,MAAsBC,KAAtB,QAAsBA,KAAtB;AAAA,sBACf;AACE,IAAA,CAAC,EAAE,yBAAaF,KAAb,EAAoBC,UAApB,CADL;AAEE,IAAA,CAAC,eAAE,qBAASD,KAAT,CAAF,8CAAE,UAAiBG,MAFtB;AAGE,IAAA,KAAK,EAAED,KAHT;AAIE,IAAA,QAAQ,EAAC,SAJX;AAKE,IAAA,MAAM,EAAC;AALT,kBAOE,2DACE;AAAQ,IAAA,EAAE,EAAC,eAAX;AAA2B,IAAA,CAAC,EAAC,MAA7B;AAAoC,IAAA,CAAC,EAAC,MAAtC;AAA6C,IAAA,KAAK,EAAC,MAAnD;AAA0D,IAAA,MAAM,EAAC;AAAjE,kBACE;AAAgB,UAAG,aAAnB;AAAiC,IAAA,YAAY,EAAC;AAA9C,IADF,eAEE;AAAU,IAAA,EAAE,EAAC,GAAb;AAAiB,IAAA,EAAE,EAAC,GAApB;AAAwB,IAAA,MAAM,EAAC;AAA/B,IAFF,eAGE;AAAS,IAAA,UAAU,EAAC;AAApB,IAHF,eAIE;AAAa,IAAA,GAAG,EAAC,YAAjB;AAA8B,IAAA,QAAQ,EAAC;AAAvC,IAJF,eAKE,8DACE,oDADF,eAEE;AAAa,UAAG;AAAhB,IAFF,CALF,CADF,CAPF,eAmBE;AACE,IAAA,KAAK,EAAC,4BADR;AAEE,IAAA,MAAM,EAAC,2BAFT;AAGE,IAAA,IAAI,EAAC,cAHP;AAIE,IAAA,MAAM,EAAC,cAJT;AAKE,IAAA,SAAS,kBAAWD,UAAX;AALX,kBAOE;AAAQ,IAAA,EAAE,EAAC,MAAX;AAAkB,IAAA,EAAE,EAAC,MAArB;AAA4B,IAAA,CAAC,EAAC,IAA9B;AAAmC,IAAA,IAAI,EAAC,OAAxC;AAAgD,IAAA,MAAM,EAAC;AAAvD,IAPF,eAQE;AACE,IAAA,CAAC,EAAC,6LADJ;AAEE,IAAA,IAAI,EAAC;AAFP,IARF,eAYE;AACE,IAAA,CAAC,EAAC,mMADJ;AAEE,IAAA,IAAI,EAAC;AAFP,IAZF,CAnBF,CADe;AAAA,CAAjB;;eAwCeF,Q","sourcesContent":["import React from 'react';\nimport { getAdjustedX, getScale } from '../utils';\n\nconst DragIcon = ({ width, scaleValue, color }) => (\n  <svg\n    x={getAdjustedX(width, scaleValue)}\n    y={getScale(width)?.deltay}\n    color={color}\n    overflow=\"visible\"\n    filter=\"url(#svgDropShadow)\"\n  >\n    <defs>\n      <filter id=\"svgDropShadow\" x=\"-20%\" y=\"-20%\" width=\"140%\" height=\"140%\">\n        <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"3\" />\n        <feOffset dx=\"0\" dy=\"5\" result=\"offsetblur\" />\n        <feFlood floodColor=\"#00000033\" />\n        <feComposite in2=\"offsetblur\" operator=\"in\" />\n        <feMerge>\n          <feMergeNode />\n          <feMergeNode in=\"SourceGraphic\" />\n        </feMerge>\n      </filter>\n    </defs>\n    <g\n      xmlns=\"http://www.w3.org/2000/svg\"\n      filter=\"url(#filter0_d_2312_1804)\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n      transform={`scale(${scaleValue})`}\n    >\n      <circle cx=\"28.5\" cy=\"23.5\" r=\"22\" fill=\"white\" stroke=\"currentColor\" />\n      <path\n        d=\"M33.5 21.25H23.4609C22.7578 21.25 22.4062 20.4297 22.9141 19.9219L27.9141 14.9219C28.2266 14.6094 28.7344 14.6094 29.0469 14.9219L34.0469 19.9219C34.5547 20.4297 34.2031 21.25 33.5 21.25Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M23.5 25.75L33.5391 25.75C34.2422 25.75 34.5938 26.5703 34.0859 27.0781L29.0859 32.0781C28.7734 32.3906 28.2656 32.3906 27.9531 32.0781L22.9531 27.0781C22.4453 26.5703 22.7969 25.75 23.5 25.75Z\"\n        fill=\"currentColor\"\n      />\n    </g>\n  </svg>\n);\n\nexport default DragIcon;\n"],"file":"drag-icon.js"}
+{"version":3,"sources":["../../src/common/drag-icon.jsx"],"names":["DragIcon","width","scaleValue","color","classes","deltay","svgOverflowVisible"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA,IAAMA,QAAQ,GAAG,SAAXA,QAAW;AAAA;;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,MAAUC,UAAV,QAAUA,UAAV;AAAA,MAAsBC,KAAtB,QAAsBA,KAAtB;AAAA,MAA6BC,OAA7B,QAA6BA,OAA7B;AAAA,sBACf;AACE,IAAA,CAAC,EAAE,yBAAaH,KAAb,EAAoBC,UAApB,CADL;AAEE,IAAA,CAAC,eAAE,qBAASD,KAAT,CAAF,8CAAE,UAAiBI,MAFtB;AAGE,IAAA,KAAK,EAAEF,KAHT;AAIE,IAAA,KAAK,EAAEF,KAJT;AAKE,IAAA,MAAM,EAAEA,KALV;AAME,IAAA,QAAQ,EAAC,SANX;AAOE,IAAA,OAAO,gBAASA,KAAT,cAAkBA,KAAlB,CAPT;AAQE,IAAA,SAAS,EAAEG,OAAO,CAACE;AARrB,kBAUE;AAAG,IAAA,KAAK,EAAC,4BAAT;AAAsC,IAAA,IAAI,EAAC,cAA3C;AAA0D,IAAA,MAAM,EAAC,cAAjE;AAAgF,IAAA,SAAS,kBAAWJ,UAAX;AAAzF,kBACE;AAAQ,IAAA,EAAE,EAAC,MAAX;AAAkB,IAAA,EAAE,EAAC,MAArB;AAA4B,IAAA,CAAC,EAAC,IAA9B;AAAmC,IAAA,IAAI,EAAC,OAAxC;AAAgD,IAAA,MAAM,EAAC;AAAvD,IADF,eAEE;AACE,IAAA,CAAC,EAAC,6LADJ;AAEE,IAAA,IAAI,EAAC;AAFP,IAFF,eAME;AACE,IAAA,CAAC,EAAC,mMADJ;AAEE,IAAA,IAAI,EAAC;AAFP,IANF,CAVF,CADe;AAAA,CAAjB;;eAyBeF,Q","sourcesContent":["import React from 'react';\nimport { getAdjustedX, getScale } from '../utils';\n\nconst DragIcon = ({ width, scaleValue, color, classes }) => (\n  <svg\n    x={getAdjustedX(width, scaleValue)}\n    y={getScale(width)?.deltay}\n    color={color}\n    width={width}\n    height={width}\n    overflow=\"visible\"\n    viewBox={`0 0 ${width} ${width}`}\n    className={classes.svgOverflowVisible}\n  >\n    <g xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" stroke=\"currentColor\" transform={`scale(${scaleValue})`}>\n      <circle cx=\"28.5\" cy=\"23.5\" r=\"22\" fill=\"white\" stroke=\"currentColor\" />\n      <path\n        d=\"M33.5 21.25H23.4609C22.7578 21.25 22.4062 20.4297 22.9141 19.9219L27.9141 14.9219C28.2266 14.6094 28.7344 14.6094 29.0469 14.9219L34.0469 19.9219C34.5547 20.4297 34.2031 21.25 33.5 21.25Z\"\n        fill=\"currentColor\"\n      />\n      <path\n        d=\"M23.5 25.75L33.5391 25.75C34.2422 25.75 34.5938 26.5703 34.0859 27.0781L29.0859 32.0781C28.7734 32.3906 28.2656 32.3906 27.9531 32.0781L22.9531 27.0781C22.4453 26.5703 22.7969 25.75 23.5 25.75Z\"\n        fill=\"currentColor\"\n      />\n    </g>\n  </svg>\n);\n\nexport default DragIcon;\n"],"file":"drag-icon.js"}

package/lib/grid.js

@@ -62,18 +62,55 @@ var Grid = /*#__PURE__*/function (_React$Component) {
           _ref$scale = _ref.scale,
           scale = _ref$scale === void 0 ? {} : _ref$scale,
           _ref$size = _ref.size,
-          size = _ref$size === void 0 ? {} : _ref$size;
-
-      return /*#__PURE__*/_react["default"].createElement(_grid.Grid, {
-        xScale: xBand,
-        yScale: scale.y,
-        className: (0, _classnames["default"])(classes.grid, className),
+          size = _ref$size === void 0 ? {} : _ref$size,
+          _ref$range = _ref.range,
+          range = _ref$range === void 0 ? {} : _ref$range;
+
+      var _range$step = range.step,
+          step = _range$step === void 0 ? 0 : _range$step,
+          _range$labelStep = range.labelStep,
+          labelStep = _range$labelStep === void 0 ? 0 : _range$labelStep;
+      var highlightNonLabel = step && labelStep && step < labelStep; // if highlightNonLabel is true, we need to separate the unlabled lines in order to render them in a different color
+
+      var _reduce = (rowTickValues || []).reduce(function (acc, value) {
+        if (highlightNonLabel && value % labelStep !== 0) {
+          acc.unlabeledLines.push(value);
+        } else {
+          acc.labeledLines.push(value);
+        }
+
+        return acc;
+      }, {
+        unlabeledLines: [],
+        labeledLines: []
+      }),
+          unlabeledLines = _reduce.unlabeledLines,
+          labeledLines = _reduce.labeledLines;
+
+      return /*#__PURE__*/_react["default"].createElement("g", {
+        className: (0, _classnames["default"])(classes.grid, className)
+      }, /*#__PURE__*/_react["default"].createElement(_grid.GridRows, {
+        scale: scale.y,
+        width: size.width,
+        tickValues: unlabeledLines,
+        lineStyle: {
+          stroke: _renderUi.color.fadedPrimary(),
+          strokeWidth: 1
+        }
+      }), /*#__PURE__*/_react["default"].createElement(_grid.GridRows, {
+        scale: scale.y,
         width: size.width,
+        tickValues: labeledLines,
+        lineStyle: {
+          stroke: _renderUi.color.visualElementsColors.GRIDLINES_COLOR,
+          strokeWidth: 1
+        }
+      }), /*#__PURE__*/_react["default"].createElement(_grid.GridColumns, {
+        scale: xBand,
         height: size.height,
-        xOffset: xBand.bandwidth() / 2,
-        rowTickValues: rowTickValues,
-        columnTickValues: columnTickValues
-      });
+        offset: xBand.bandwidth() / 2,
+        tickValues: columnTickValues
+      }));
     }
   }]);
   return Grid;

package/lib/grid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/grid.jsx"],"names":["Grid","props","classes","className","graphProps","xBand","rowTickValues","columnTickValues","scale","size","y","grid","width","height","bandwidth","React","Component","PropTypes","object","isRequired","string","types","GraphPropsType","func","array","styles","stroke","color","primaryLight"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;IAEaA,I;;;;;;;;;;;;WAYX,kBAAS;AACP,wBAAmF,KAAKC,KAAxF;AAAA,UAAQC,OAAR,eAAQA,OAAR;AAAA,UAAiBC,SAAjB,eAAiBA,SAAjB;AAAA,UAA4BC,UAA5B,eAA4BA,UAA5B;AAAA,UAAwCC,KAAxC,eAAwCA,KAAxC;AAAA,UAA+CC,aAA/C,eAA+CA,aAA/C;AAAA,UAA8DC,gBAA9D,eAA8DA,gBAA9D;;AACA,iBAAkCH,UAAU,IAAI,EAAhD;AAAA,4BAAQI,KAAR;AAAA,UAAQA,KAAR,2BAAgB,EAAhB;AAAA,2BAAoBC,IAApB;AAAA,UAAoBA,IAApB,0BAA2B,EAA3B;;AAEA,0BACE,gCAAC,UAAD;AACE,QAAA,MAAM,EAAEJ,KADV;AAEE,QAAA,MAAM,EAAEG,KAAK,CAACE,CAFhB;AAGE,QAAA,SAAS,EAAE,4BAAWR,OAAO,CAACS,IAAnB,EAAyBR,SAAzB,CAHb;AAIE,QAAA,KAAK,EAAEM,IAAI,CAACG,KAJd;AAKE,QAAA,MAAM,EAAEH,IAAI,CAACI,MALf;AAME,QAAA,OAAO,EAAER,KAAK,CAACS,SAAN,KAAoB,CAN/B;AAOE,QAAA,aAAa,EAAER,aAPjB;AAQE,QAAA,gBAAgB,EAAEC;AARpB,QADF;AAYD;;;EA5BuBQ,kBAAMC,S;;;iCAAnBhB,I,eACQ;AACjBE,EAAAA,OAAO,EAAEe,sBAAUC,MAAV,CAAiBC,UADT;AAEjBhB,EAAAA,SAAS,EAAEc,sBAAUG,MAFJ;AAGjBhB,EAAAA,UAAU,EAAEiB,YAAMC,cAAN,CAAqBH,UAHhB;AAIjBd,EAAAA,KAAK,EAAEY,sBAAUM,IAJA;AAKjBhB,EAAAA,gBAAgB,EAAEU,sBAAUO,KALX;AAMjBlB,EAAAA,aAAa,EAAEW,sBAAUO;AANR,C;iCADRxB,I,kBAUW,E;;AAqBxB,IAAMyB,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBd,IAAAA,IAAI,EAAE;AACJe,MAAAA,MAAM,EAAEC,gBAAMC,YAAN;AADJ;AADc,GAAP;AAAA,CAAf;;eAMe,wBAAWH,MAAX,EAAmBzB,IAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\n\nimport { Grid as VxGrid } from '@vx/grid';\nimport { types } from '@pie-lib/plot';\nimport { color } from '@pie-lib/render-ui';\n\nexport class Grid extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    graphProps: types.GraphPropsType.isRequired,\n    xBand: PropTypes.func,\n    columnTickValues: PropTypes.array,\n    rowTickValues: PropTypes.array,\n  };\n\n  static defaultProps = {};\n\n  render() {\n    const { classes, className, graphProps, xBand, rowTickValues, columnTickValues } = this.props;\n    const { scale = {}, size = {} } = graphProps || {};\n\n    return (\n      <VxGrid\n        xScale={xBand}\n        yScale={scale.y}\n        className={classNames(classes.grid, className)}\n        width={size.width}\n        height={size.height}\n        xOffset={xBand.bandwidth() / 2}\n        rowTickValues={rowTickValues}\n        columnTickValues={columnTickValues}\n      />\n    );\n  }\n}\n\nconst styles = () => ({\n  grid: {\n    stroke: color.primaryLight(),\n  },\n});\n\nexport default withStyles(styles)(Grid);\n"],"file":"grid.js"}
+{"version":3,"sources":["../src/grid.jsx"],"names":["Grid","props","classes","className","graphProps","xBand","rowTickValues","columnTickValues","scale","size","range","step","labelStep","highlightNonLabel","reduce","acc","value","unlabeledLines","push","labeledLines","grid","y","width","stroke","color","fadedPrimary","strokeWidth","visualElementsColors","GRIDLINES_COLOR","height","bandwidth","React","Component","PropTypes","object","isRequired","string","types","GraphPropsType","func","array","styles","primaryLight"],"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 { GridRows, GridColumns } from '@vx/grid';\n\nimport { types } from '@pie-lib/plot';\nimport { color } from '@pie-lib/render-ui';\n\nexport class Grid extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    graphProps: types.GraphPropsType.isRequired,\n    xBand: PropTypes.func,\n    columnTickValues: PropTypes.array,\n    rowTickValues: PropTypes.array,\n  };\n\n  static defaultProps = {};\n\n  render() {\n    const { classes, className, graphProps, xBand, rowTickValues, columnTickValues } = this.props;\n    const { scale = {}, size = {}, range = {} } = graphProps || {};\n    const { step = 0, labelStep = 0 } = range;\n    const highlightNonLabel = step && labelStep && step < labelStep;\n    // if highlightNonLabel is true, we need to separate the unlabled lines in order to render them in a different color\n    const { unlabeledLines, labeledLines } = (rowTickValues || []).reduce(\n      (acc, value) => {\n        if (highlightNonLabel && value % labelStep !== 0) {\n          acc.unlabeledLines.push(value);\n        } else {\n          acc.labeledLines.push(value);\n        }\n        return acc;\n      },\n      { unlabeledLines: [], labeledLines: [] },\n    );\n\n    return (\n      <g className={classNames(classes.grid, className)}>\n        <GridRows\n          scale={scale.y}\n          width={size.width}\n          tickValues={unlabeledLines}\n          lineStyle={{\n            stroke: color.fadedPrimary(),\n            strokeWidth: 1,\n          }}\n        />\n        <GridRows\n          scale={scale.y}\n          width={size.width}\n          tickValues={labeledLines}\n          lineStyle={{\n            stroke: color.visualElementsColors.GRIDLINES_COLOR,\n            strokeWidth: 1,\n          }}\n        />\n        <GridColumns scale={xBand} height={size.height} offset={xBand.bandwidth() / 2} tickValues={columnTickValues} />\n      </g>\n    );\n  }\n}\n\nconst styles = () => ({\n  grid: {\n    stroke: color.primaryLight(),\n  },\n});\n\nexport default withStyles(styles)(Grid);\n"],"file":"grid.js"}

package/lib/index.js

@@ -23,6 +23,12 @@ Object.defineProperty(exports, "ConfigureChartPanel", {
     return _chartSetup["default"];
   }
 });
+Object.defineProperty(exports, "KeyLegend", {
+  enumerable: true,
+  get: function get() {
+    return _keyLegend["default"];
+  }
+});
 Object.defineProperty(exports, "chartTypes", {
   enumerable: true,
   get: function get() {
@@ -37,4 +43,6 @@ var _chartTypes = _interopRequireDefault(require("./chart-types"));
 var _chartSetup = _interopRequireDefault(require("./chart-setup"));
 
 var _chartType = _interopRequireDefault(require("./chart-type"));
+
+var _keyLegend = _interopRequireDefault(require("./key-legend"));
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA","sourcesContent":["import Chart from './chart';\nimport chartTypes from './chart-types';\nimport ConfigureChartPanel from './chart-setup';\nimport ChartType from './chart-type';\n\nexport { Chart, chartTypes, ChartType, ConfigureChartPanel };\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import Chart from './chart';\nimport chartTypes from './chart-types';\nimport ConfigureChartPanel from './chart-setup';\nimport ChartType from './chart-type';\nimport KeyLegend from './key-legend';\n\nexport { Chart, chartTypes, ChartType, ConfigureChartPanel, KeyLegend };\n"],"file":"index.js"}

package/lib/key-legend.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
+var _renderUi = require("@pie-lib/render-ui");
+
+var _translator = _interopRequireDefault(require("@pie-lib/translator"));
+
+var styles = function styles(theme) {
+  return {
+    container: {
+      backgroundColor: _renderUi.color.defaults.WHITE,
+      padding: theme.spacing.unit * 2,
+      width: '355px',
+      boxShadow: 'inset 0px 1px 5px 0px #9297A6',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px'
+    },
+    row: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '12px'
+    },
+    title: {
+      fontSize: theme.typography.h6.fontSize,
+      fontWeight: '700'
+    },
+    smallText: {
+      marginLeft: '2px'
+    },
+    correctIcon: {
+      backgroundColor: _renderUi.color.correct(),
+      borderRadius: theme.spacing.unit * 2,
+      color: _renderUi.color.defaults.WHITE
+    },
+    incorrectIcon: {
+      backgroundColor: _renderUi.color.incorrectWithIcon(),
+      borderRadius: theme.spacing.unit * 2,
+      color: _renderUi.color.defaults.WHITE
+    },
+    lastRow: {
+      marginLeft: '3px',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '12px'
+    }
+  };
+};
+
+var translator = _translator["default"].translator;
+
+var KeyLegend = function KeyLegend(_ref) {
+  var classes = _ref.classes,
+      language = _ref.language;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.container
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.title
+  }, "Key"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.row
+  }, /*#__PURE__*/_react["default"].createElement(_Close["default"], {
+    className: classes.incorrectIcon
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.text
+  }, translator.t('charting.keyLegend.incorrectAnswer', {
+    lng: language
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.row
+  }, /*#__PURE__*/_react["default"].createElement(_Check["default"], {
+    className: classes.correctIcon
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.text
+  }, translator.t('charting.keyLegend.correctAnswer', {
+    lng: language
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.lastRow
+  }, /*#__PURE__*/_react["default"].createElement(_Check["default"], {
+    className: classes.correctIcon,
+    fontSize: 'small'
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.smallText
+  }, translator.t('charting.keyLegend.correctKeyAnswer', {
+    lng: language
+  }))));
+};
+
+KeyLegend.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  language: _propTypes["default"].string
+};
+
+var _default = (0, _styles.withStyles)(styles)(KeyLegend);
+
+exports["default"] = _default;
+//# sourceMappingURL=key-legend.js.map

package/lib/key-legend.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/key-legend.jsx"],"names":["styles","theme","container","backgroundColor","color","defaults","WHITE","padding","spacing","unit","width","boxShadow","display","flexDirection","gap","row","alignItems","title","fontSize","typography","h6","fontWeight","smallText","marginLeft","correctIcon","correct","borderRadius","incorrectIcon","incorrectWithIcon","lastRow","translator","Translator","KeyLegend","classes","language","text","t","lng","propTypes","PropTypes","object","isRequired","string"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBC,IAAAA,SAAS,EAAE;AACTC,MAAAA,eAAe,EAAEC,gBAAMC,QAAN,CAAeC,KADvB;AAETC,MAAAA,OAAO,EAAEN,KAAK,CAACO,OAAN,CAAcC,IAAd,GAAqB,CAFrB;AAGTC,MAAAA,KAAK,EAAE,OAHE;AAITC,MAAAA,SAAS,EAAE,+BAJF;AAKTC,MAAAA,OAAO,EAAE,MALA;AAMTC,MAAAA,aAAa,EAAE,QANN;AAOTC,MAAAA,GAAG,EAAE;AAPI,KADc;AAUzBC,IAAAA,GAAG,EAAE;AACHH,MAAAA,OAAO,EAAE,MADN;AAEHI,MAAAA,UAAU,EAAE,QAFT;AAGHF,MAAAA,GAAG,EAAE;AAHF,KAVoB;AAezBG,IAAAA,KAAK,EAAE;AACLC,MAAAA,QAAQ,EAAEjB,KAAK,CAACkB,UAAN,CAAiBC,EAAjB,CAAoBF,QADzB;AAELG,MAAAA,UAAU,EAAE;AAFP,KAfkB;AAmBzBC,IAAAA,SAAS,EAAE;AACTC,MAAAA,UAAU,EAAE;AADH,KAnBc;AAsBzBC,IAAAA,WAAW,EAAE;AACXrB,MAAAA,eAAe,EAAEC,gBAAMqB,OAAN,EADN;AAEXC,MAAAA,YAAY,EAAEzB,KAAK,CAACO,OAAN,CAAcC,IAAd,GAAqB,CAFxB;AAGXL,MAAAA,KAAK,EAAEA,gBAAMC,QAAN,CAAeC;AAHX,KAtBY;AA2BzBqB,IAAAA,aAAa,EAAE;AACbxB,MAAAA,eAAe,EAAEC,gBAAMwB,iBAAN,EADJ;AAEbF,MAAAA,YAAY,EAAEzB,KAAK,CAACO,OAAN,CAAcC,IAAd,GAAqB,CAFtB;AAGbL,MAAAA,KAAK,EAAEA,gBAAMC,QAAN,CAAeC;AAHT,KA3BU;AAiCzBuB,IAAAA,OAAO,EAAE;AACPN,MAAAA,UAAU,EAAE,KADL;AAEPX,MAAAA,OAAO,EAAE,MAFF;AAGPI,MAAAA,UAAU,EAAE,QAHL;AAIPF,MAAAA,GAAG,EAAE;AAJE;AAjCgB,GAAZ;AAAA,CAAf;;AAyCA,IAAQgB,UAAR,GAAuBC,sBAAvB,CAAQD,UAAR;;AAEA,IAAME,SAAS,GAAG,SAAZA,SAAY;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,QAAZ,QAAYA,QAAZ;AAAA,sBAChB;AAAK,IAAA,SAAS,EAAED,OAAO,CAAC/B;AAAxB,kBACE;AAAK,IAAA,SAAS,EAAE+B,OAAO,CAAChB;AAAxB,WADF,eAEE;AAAK,IAAA,SAAS,EAAEgB,OAAO,CAAClB;AAAxB,kBACE,gCAAC,iBAAD;AAAO,IAAA,SAAS,EAAEkB,OAAO,CAACN;AAA1B,IADF,eAEE;AAAK,IAAA,SAAS,EAAEM,OAAO,CAACE;AAAxB,KAA+BL,UAAU,CAACM,CAAX,CAAa,oCAAb,EAAmD;AAAEC,IAAAA,GAAG,EAAEH;AAAP,GAAnD,CAA/B,CAFF,CAFF,eAME;AAAK,IAAA,SAAS,EAAED,OAAO,CAAClB;AAAxB,kBACE,gCAAC,iBAAD;AAAO,IAAA,SAAS,EAAEkB,OAAO,CAACT;AAA1B,IADF,eAEE;AAAK,IAAA,SAAS,EAAES,OAAO,CAACE;AAAxB,KAA+BL,UAAU,CAACM,CAAX,CAAa,kCAAb,EAAiD;AAAEC,IAAAA,GAAG,EAAEH;AAAP,GAAjD,CAA/B,CAFF,CANF,eAUE;AAAK,IAAA,SAAS,EAAED,OAAO,CAACJ;AAAxB,kBACE,gCAAC,iBAAD;AAAO,IAAA,SAAS,EAAEI,OAAO,CAACT,WAA1B;AAAuC,IAAA,QAAQ,EAAE;AAAjD,IADF,eAEE;AAAK,IAAA,SAAS,EAAES,OAAO,CAACX;AAAxB,KAAoCQ,UAAU,CAACM,CAAX,CAAa,qCAAb,EAAoD;AAAEC,IAAAA,GAAG,EAAEH;AAAP,GAApD,CAApC,CAFF,CAVF,CADgB;AAAA,CAAlB;;AAkBAF,SAAS,CAACM,SAAV,GAAsB;AACpBL,EAAAA,OAAO,EAAEM,sBAAUC,MAAV,CAAiBC,UADN;AAEpBP,EAAAA,QAAQ,EAAEK,sBAAUG;AAFA,CAAtB;;eAKe,wBAAW1C,MAAX,EAAmBgC,SAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Check from '@material-ui/icons/Check';\nimport Close from '@material-ui/icons/Close';\nimport { color } from '@pie-lib/render-ui';\nimport Translator from '@pie-lib/translator';\n\nconst styles = (theme) => ({\n  container: {\n    backgroundColor: color.defaults.WHITE,\n    padding: theme.spacing.unit * 2,\n    width: '355px',\n    boxShadow: 'inset 0px 1px 5px 0px #9297A6',\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '16px',\n  },\n  row: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '12px',\n  },\n  title: {\n    fontSize: theme.typography.h6.fontSize,\n    fontWeight: '700',\n  },\n  smallText: {\n    marginLeft: '2px',\n  },\n  correctIcon: {\n    backgroundColor: color.correct(),\n    borderRadius: theme.spacing.unit * 2,\n    color: color.defaults.WHITE,\n  },\n  incorrectIcon: {\n    backgroundColor: color.incorrectWithIcon(),\n    borderRadius: theme.spacing.unit * 2,\n    color: color.defaults.WHITE,\n  },\n\n  lastRow: {\n    marginLeft: '3px',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '12px',\n  },\n});\n\nconst { translator } = Translator;\n\nconst KeyLegend = ({ classes, language }) => (\n  <div className={classes.container}>\n    <div className={classes.title}>Key</div>\n    <div className={classes.row}>\n      <Close className={classes.incorrectIcon} />\n      <div className={classes.text}>{translator.t('charting.keyLegend.incorrectAnswer', { lng: language })}</div>\n    </div>\n    <div className={classes.row}>\n      <Check className={classes.correctIcon} />\n      <div className={classes.text}>{translator.t('charting.keyLegend.correctAnswer', { lng: language })}</div>\n    </div>\n    <div className={classes.lastRow}>\n      <Check className={classes.correctIcon} fontSize={'small'} />\n      <div className={classes.smallText}>{translator.t('charting.keyLegend.correctKeyAnswer', { lng: language })}</div>\n    </div>\n  </div>\n);\n\nKeyLegend.propTypes = {\n  classes: PropTypes.object.isRequired,\n  language: PropTypes.string,\n};\n\nexport default withStyles(styles)(KeyLegend);\n"],"file":"key-legend.js"}

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

@@ -27,13 +27,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _plot = require("@pie-lib/plot");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _index = require("@material-ui/core/styles/index");
 
-var _renderUi = require("@pie-lib/render-ui");
+var _plot = require("@pie-lib/plot");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _renderUi = require("@pie-lib/render-ui");
 
 var _styles = require("../../common/styles");
 
@@ -73,7 +73,8 @@ var RawDragHandle = /*#__PURE__*/function (_React$Component) {
         y: y,
         classes: classes,
         className: (0, _classnames["default"])(className, !interactive && 'non-interactive'),
-        correctness: correctness
+        correctness: correctness,
+        interactive: interactive
       }, rest));
     }
   }]);
@@ -94,27 +95,48 @@ var RawDragHandle = /*#__PURE__*/function (_React$Component) {
     label: _propTypes["default"].string
   })
 });
-var DragHandle = (0, _index.withStyles)(function () {
+var DragHandle = (0, _index.withStyles)(function (theme) {
   return {
     handle: {
-      fill: _renderUi.color.secondary(),
       transition: 'fill 200ms linear, height 200ms linear',
-      '&:hover': {
-        fill: _renderUi.color.secondaryDark()
-      },
-      '&.correct': (0, _styles.correct)('fill'),
-      '&.incorrect': (0, _styles.incorrect)('fill'),
       '&.non-interactive': (0, _styles.disabled)('fill')
     },
+    transparentHandle: {
+      height: '20px',
+      fill: 'transparent',
+      stroke: 'transparent'
+    },
     line: {
-      stroke: _renderUi.color.secondary(),
+      stroke: _renderUi.color.defaults.TEXT,
       transition: 'fill 200ms linear, height 200ms linear',
-      '&:hover': {
-        stroke: _renderUi.color.secondaryDark()
-      },
-      '&.non-interactive': (0, _styles.disabled)('stroke'),
-      '&.correct': (0, _styles.correct)('stroke'),
-      '&.incorrect': (0, _styles.incorrect)('stroke')
+      '&.non-interactive': (0, _styles.disabled)('stroke')
+    },
+    disabledPoint: {
+      fill: _renderUi.color.defaults.BLACK + ' !important',
+      stroke: _renderUi.color.defaults.BLACK + ' !important'
+    },
+    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'
     }
   };
 })(RawDragHandle);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/line/common/drag-handle.jsx"],"names":["RawDragHandle","props","x","y","graphProps","classes","className","interactive","CustomDraggableComponent","correctness","rest","scale","React","Component","PropTypes","number","isRequired","width","types","GraphPropsType","object","string","bool","func","shape","value","label","DragHandle","handle","fill","color","secondary","transition","secondaryDark","line","stroke","DraggableHandle","axis","fromDelta","delta","newPoint","utils","point","add","bounds","domain","range","area","left","top","bottom","right","anchorPoint"],"mappings":"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","sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { gridDraggable, utils, types } from '@pie-lib/plot';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport { color } from '@pie-lib/render-ui';\nimport PropTypes from 'prop-types';\nimport { correct, incorrect, disabled } from '../../common/styles';\n\nclass RawDragHandle extends React.Component {\n  static propTypes = {\n    x: PropTypes.number.isRequired,\n    y: PropTypes.number.isRequired,\n    width: PropTypes.number,\n    graphProps: types.GraphPropsType.isRequired,\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    interactive: PropTypes.bool,\n    CustomDraggableComponent: PropTypes.func,\n    correctness: PropTypes.shape({\n      value: PropTypes.string,\n      label: PropTypes.string,\n    }),\n  };\n\n  render() {\n    const {\n      x,\n      y,\n      graphProps,\n      classes,\n      className,\n      interactive,\n      CustomDraggableComponent,\n      correctness,\n      ...rest\n    } = this.props;\n    const { scale } = graphProps;\n\n    return (\n      <CustomDraggableComponent\n        scale={scale}\n        x={x}\n        y={y}\n        classes={classes}\n        className={classNames(className, !interactive && 'non-interactive')}\n        correctness={correctness}\n        {...rest}\n      />\n    );\n  }\n}\n\nexport const DragHandle = withStyles(() => ({\n  handle: {\n    fill: color.secondary(),\n    transition: 'fill 200ms linear, height 200ms linear',\n    '&:hover': {\n      fill: color.secondaryDark(),\n    },\n    '&.correct': correct('fill'),\n    '&.incorrect': incorrect('fill'),\n    '&.non-interactive': disabled('fill'),\n  },\n  line: {\n    stroke: color.secondary(),\n    transition: 'fill 200ms linear, height 200ms linear',\n    '&:hover': {\n      stroke: color.secondaryDark(),\n    },\n    '&.non-interactive': disabled('stroke'),\n    '&.correct': correct('stroke'),\n    '&.incorrect': incorrect('stroke'),\n  },\n}))(RawDragHandle);\n\nconst DraggableHandle = gridDraggable({\n  axis: 'y',\n  fromDelta: (props, delta) => {\n    //TODO: should be in grid-draggable, if axis is y delta.x should always be 0.\n    delta.x = 0;\n    const newPoint = utils.point(props).add(utils.point(delta));\n\n    return newPoint.y;\n  },\n  bounds: (props, { domain, range }) => {\n    const area = { left: 0, top: props.y, bottom: props.y, right: 0 };\n\n    return utils.bounds(area, domain, range);\n  },\n  anchorPoint: (props) => {\n    return { x: props.x, y: props.y };\n  },\n})(DragHandle);\n\nexport default DraggableHandle;\n"],"file":"drag-handle.js"}
+{"version":3,"sources":["../../../src/line/common/drag-handle.jsx"],"names":["RawDragHandle","props","x","y","graphProps","classes","className","interactive","CustomDraggableComponent","correctness","rest","scale","React","Component","PropTypes","number","isRequired","width","types","GraphPropsType","object","string","bool","func","shape","value","label","DragHandle","theme","handle","transition","transparentHandle","height","fill","stroke","line","color","defaults","TEXT","disabledPoint","BLACK","correctIcon","backgroundColor","correct","incorrectIcon","incorrectWithIcon","correctnessIcon","borderRadius","spacing","unit","WHITE","fontSize","padding","border","boxSizing","smallIcon","DraggableHandle","axis","fromDelta","delta","newPoint","utils","point","add","bounds","domain","range","area","left","top","bottom","right","anchorPoint"],"mappings":"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","sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles/index';\n\nimport { gridDraggable, utils, types } from '@pie-lib/plot';\nimport { color } from '@pie-lib/render-ui';\nimport { disabled } from '../../common/styles';\n\nclass RawDragHandle extends React.Component {\n  static propTypes = {\n    x: PropTypes.number.isRequired,\n    y: PropTypes.number.isRequired,\n    width: PropTypes.number,\n    graphProps: types.GraphPropsType.isRequired,\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    interactive: PropTypes.bool,\n    CustomDraggableComponent: PropTypes.func,\n    correctness: PropTypes.shape({\n      value: PropTypes.string,\n      label: PropTypes.string,\n    }),\n  };\n\n  render() {\n    const {\n      x,\n      y,\n      graphProps,\n      classes,\n      className,\n      interactive,\n      CustomDraggableComponent,\n      correctness,\n      ...rest\n    } = this.props;\n    const { scale } = graphProps;\n\n    return (\n      <CustomDraggableComponent\n        scale={scale}\n        x={x}\n        y={y}\n        classes={classes}\n        className={classNames(className, !interactive && 'non-interactive')}\n        correctness={correctness}\n        interactive={interactive}\n        {...rest}\n      />\n    );\n  }\n}\n\nexport const DragHandle = withStyles((theme) => ({\n  handle: {\n    transition: 'fill 200ms linear, height 200ms linear',\n    '&.non-interactive': disabled('fill'),\n  },\n  transparentHandle: {\n    height: '20px',\n    fill: 'transparent',\n    stroke: 'transparent',\n  },\n  line: {\n    stroke: color.defaults.TEXT,\n    transition: 'fill 200ms linear, height 200ms linear',\n    '&.non-interactive': disabled('stroke'),\n  },\n  disabledPoint: {\n    fill: color.defaults.BLACK + ' !important',\n    stroke: color.defaults.BLACK + ' !important',\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}))(RawDragHandle);\n\nconst DraggableHandle = gridDraggable({\n  axis: 'y',\n  fromDelta: (props, delta) => {\n    //TODO: should be in grid-draggable, if axis is y delta.x should always be 0.\n    delta.x = 0;\n    const newPoint = utils.point(props).add(utils.point(delta));\n\n    return newPoint.y;\n  },\n  bounds: (props, { domain, range }) => {\n    const area = { left: 0, top: props.y, bottom: props.y, right: 0 };\n\n    return utils.bounds(area, domain, range);\n  },\n  anchorPoint: (props) => {\n    return { x: props.x, y: props.y };\n  },\n})(DragHandle);\n\nexport default DraggableHandle;\n"],"file":"drag-handle.js"}

package/lib/line/common/line.js

@@ -131,7 +131,8 @@ var RawLine = /*#__PURE__*/function (_React$Component) {
           data = _this$props.data,
           classes = _this$props.classes,
           CustomDraggableComponent = _this$props.CustomDraggableComponent,
-          defineChart = _this$props.defineChart;
+          defineChart = _this$props.defineChart,
+          correctData = _this$props.correctData;
       var _this$state = this.state,
           lineState = _this$state.line,
           dragging = _this$state.dragging;
@@ -169,7 +170,9 @@ var RawLine = /*#__PURE__*/function (_React$Component) {
           },
           graphProps: graphProps,
           CustomDraggableComponent: CustomDraggableComponent,
-          correctness: point.correctness
+          correctness: point.correctness,
+          correctData: correctData,
+          label: point.label
         });
       }));
     }
@@ -200,13 +203,9 @@ var StyledLine = (0, _index.withStyles)(function () {
   return {
     line: {
       fill: 'transparent',
-      stroke: _renderUi.color.primaryLight(),
+      stroke: _renderUi.color.defaults.TERTIARY,
       strokeWidth: 3,
-      transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',
-      '&:hover': {
-        strokeWidth: 6,
-        stroke: _renderUi.color.primaryDark()
-      }
+      transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in'
     }
   };
 })(RawLine);

package/lib/line/common/line.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/line/common/line.jsx"],"names":["getData","data","domain","max","length","map","el","i","x","y","value","RawLine","props","line","setState","index","onChange","dragging","state","existing","next","newLine","dragValue","setDragValue","undefined","graphProps","nextProps","classes","CustomDraggableComponent","defineChart","lineState","scale","lineToUse","d","point","r","enableDraggable","interactive","Component","DraggableHandle","DragHandle","v","dragStop","correctness","React","PropTypes","func","number","object","label","string","xBand","isRequired","types","GraphPropsType","bool","arrayOf","shape","StyledLine","fill","stroke","color","primaryLight","strokeWidth","transition","primaryDark","Line","category","changeLine","array"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Group } from '@vx/group';\nimport { LinePath } from '@vx/shape';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport DraggableHandle, { DragHandle } from './drag-handle';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport isEqual from 'lodash/isEqual';\nimport { color } from '@pie-lib/render-ui';\n\nconst getData = (data, domain) => {\n  const { max } = domain || {};\n  const length = data.length;\n\n  if (!max || !length) {\n    return [];\n  }\n\n  return data.map((el, i) => ({\n    ...el,\n    x: length > 1 ? i * (max / (length - 1)) : 0.5,\n    y: el.value,\n  }));\n};\n\nexport class RawLine extends React.Component {\n  static propTypes = {\n    onChange: 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    defineChart: PropTypes.bool,\n    data: PropTypes.arrayOf(\n      PropTypes.shape({\n        label: PropTypes.string,\n        value: PropTypes.number,\n      }),\n    ),\n    CustomDraggableComponent: PropTypes.func,\n  };\n\n  static defaultProps = {\n    index: 0,\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      dragValue: undefined,\n      line: getData(props.data, props.graphProps.domain),\n    };\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (!isEqual(this.props.data, nextProps.data)) {\n      this.setState({\n        line: getData(nextProps.data, nextProps.graphProps.domain),\n      });\n    }\n  }\n\n  setDragValue = (line) => this.setState({ line });\n\n  dragStop = (index) => {\n    const { onChange } = this.props;\n    this.setState({ dragging: false }, () => {\n      onChange(index, this.state.line[index]);\n    });\n  };\n\n  dragValue = (index, existing, next) => {\n    const newLine = [...this.state.line];\n    newLine[index].dragValue = next;\n    this.setDragValue(newLine);\n  };\n\n  render() {\n    const { graphProps, data, classes, CustomDraggableComponent, defineChart } = this.props;\n    const { line: lineState, dragging } = this.state;\n    const { scale } = graphProps;\n    const lineToUse = dragging ? lineState : getData(data, graphProps.domain);\n\n    return (\n      <React.Fragment>\n        <LinePath\n          data={lineToUse}\n          x={(d) => scale.x(d.x)}\n          y={(d) => scale.y(d.dragValue !== undefined ? d.dragValue : d.y)}\n          className={classes.line}\n        />\n        {lineToUse &&\n          lineToUse.map((point, i) => {\n            const r = 6;\n            const enableDraggable = defineChart || point.interactive;\n            const Component = enableDraggable ? DraggableHandle : DragHandle;\n\n            return (\n              <Component\n                key={`point-${point.x}-${i}`}\n                x={point.x}\n                y={point.dragValue !== undefined ? point.dragValue : point.y}\n                interactive={enableDraggable}\n                r={r}\n                onDragStart={() => this.setState({ dragging: true })}\n                onDrag={(v) => this.dragValue(i, point.dragValue !== undefined ? point.dragValue : point.y, v)}\n                onDragStop={() => this.dragStop(i)}\n                graphProps={graphProps}\n                CustomDraggableComponent={CustomDraggableComponent}\n                correctness={point.correctness}\n              />\n            );\n          })}\n      </React.Fragment>\n    );\n  }\n}\n\nconst StyledLine = withStyles(() => ({\n  line: {\n    fill: 'transparent',\n    stroke: color.primaryLight(),\n    strokeWidth: 3,\n    transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',\n    '&:hover': {\n      strokeWidth: 6,\n      stroke: color.primaryDark(),\n    },\n  },\n}))(RawLine);\n\nexport class Line extends React.Component {\n  static propTypes = {\n    data: PropTypes.array,\n    onChange: PropTypes.func,\n    xBand: PropTypes.func,\n    graphProps: types.GraphPropsType.isRequired,\n  };\n\n  changeLine = (index, category) => {\n    const { onChange } = this.props;\n    const newLine = [...this.props.data];\n    const { dragValue, value } = category;\n\n    newLine[index].value = dragValue >= 0 ? dragValue : value;\n\n    onChange(newLine);\n  };\n\n  render() {\n    const props = this.props;\n\n    return (\n      <Group>\n        <StyledLine {...props} onChange={this.changeLine} />\n      </Group>\n    );\n  }\n}\n\nexport default Line;\n"],"file":"line.js"}
+{"version":3,"sources":["../../../src/line/common/line.jsx"],"names":["getData","data","domain","max","length","map","el","i","x","y","value","RawLine","props","line","setState","index","onChange","dragging","state","existing","next","newLine","dragValue","setDragValue","undefined","graphProps","nextProps","classes","CustomDraggableComponent","defineChart","correctData","lineState","scale","lineToUse","d","point","r","enableDraggable","interactive","Component","DraggableHandle","DragHandle","v","dragStop","correctness","label","React","PropTypes","func","number","object","string","xBand","isRequired","types","GraphPropsType","bool","arrayOf","shape","StyledLine","fill","stroke","color","defaults","TERTIARY","strokeWidth","transition","Line","category","changeLine","array"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Group } from '@vx/group';\nimport { LinePath } from '@vx/shape';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport DraggableHandle, { DragHandle } from './drag-handle';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport isEqual from 'lodash/isEqual';\nimport { color } from '@pie-lib/render-ui';\n\nconst getData = (data, domain) => {\n  const { max } = domain || {};\n  const length = data.length;\n\n  if (!max || !length) {\n    return [];\n  }\n\n  return data.map((el, i) => ({\n    ...el,\n    x: length > 1 ? i * (max / (length - 1)) : 0.5,\n    y: el.value,\n  }));\n};\n\nexport class RawLine extends React.Component {\n  static propTypes = {\n    onChange: 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    defineChart: PropTypes.bool,\n    data: PropTypes.arrayOf(\n      PropTypes.shape({\n        label: PropTypes.string,\n        value: PropTypes.number,\n      }),\n    ),\n    CustomDraggableComponent: PropTypes.func,\n  };\n\n  static defaultProps = {\n    index: 0,\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      dragValue: undefined,\n      line: getData(props.data, props.graphProps.domain),\n    };\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (!isEqual(this.props.data, nextProps.data)) {\n      this.setState({\n        line: getData(nextProps.data, nextProps.graphProps.domain),\n      });\n    }\n  }\n\n  setDragValue = (line) => this.setState({ line });\n\n  dragStop = (index) => {\n    const { onChange } = this.props;\n    this.setState({ dragging: false }, () => {\n      onChange(index, this.state.line[index]);\n    });\n  };\n\n  dragValue = (index, existing, next) => {\n    const newLine = [...this.state.line];\n    newLine[index].dragValue = next;\n    this.setDragValue(newLine);\n  };\n\n  render() {\n    const { graphProps, data, classes, CustomDraggableComponent, defineChart, correctData } = this.props;\n    const { line: lineState, dragging } = this.state;\n    const { scale } = graphProps;\n    const lineToUse = dragging ? lineState : getData(data, graphProps.domain);\n\n    return (\n      <React.Fragment>\n        <LinePath\n          data={lineToUse}\n          x={(d) => scale.x(d.x)}\n          y={(d) => scale.y(d.dragValue !== undefined ? d.dragValue : d.y)}\n          className={classes.line}\n        />\n        {lineToUse &&\n          lineToUse.map((point, i) => {\n            const r = 6;\n            const enableDraggable = defineChart || point.interactive;\n            const Component = enableDraggable ? DraggableHandle : DragHandle;\n\n            return (\n              <Component\n                key={`point-${point.x}-${i}`}\n                x={point.x}\n                y={point.dragValue !== undefined ? point.dragValue : point.y}\n                interactive={enableDraggable}\n                r={r}\n                onDragStart={() => this.setState({ dragging: true })}\n                onDrag={(v) => this.dragValue(i, point.dragValue !== undefined ? point.dragValue : point.y, v)}\n                onDragStop={() => this.dragStop(i)}\n                graphProps={graphProps}\n                CustomDraggableComponent={CustomDraggableComponent}\n                correctness={point.correctness}\n                correctData={correctData}\n                label={point.label}\n              />\n            );\n          })}\n      </React.Fragment>\n    );\n  }\n}\n\nconst StyledLine = withStyles(() => ({\n  line: {\n    fill: 'transparent',\n    stroke: color.defaults.TERTIARY,\n    strokeWidth: 3,\n    transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',\n  },\n}))(RawLine);\n\nexport class Line extends React.Component {\n  static propTypes = {\n    data: PropTypes.array,\n    onChange: PropTypes.func,\n    xBand: PropTypes.func,\n    graphProps: types.GraphPropsType.isRequired,\n  };\n\n  changeLine = (index, category) => {\n    const { onChange } = this.props;\n    const newLine = [...this.props.data];\n    const { dragValue, value } = category;\n\n    newLine[index].value = dragValue >= 0 ? dragValue : value;\n\n    onChange(newLine);\n  };\n\n  render() {\n    const props = this.props;\n\n    return (\n      <Group>\n        <StyledLine {...props} onChange={this.changeLine} />\n      </Group>\n    );\n  }\n}\n\nexport default Line;\n"],"file":"line.js"}