@pie-lib/charting 5.24.0 → 5.25.0

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");
 
@@ -95,12 +95,10 @@ 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: {
       transition: 'fill 200ms linear, height 200ms linear',
-      '&.correct': (0, _styles.correct)('fill'),
-      '&.incorrect': (0, _styles.incorrect)('fill'),
       '&.non-interactive': (0, _styles.disabled)('fill')
     },
     transparentHandle: {
@@ -111,9 +109,34 @@ var DragHandle = (0, _index.withStyles)(function () {
     line: {
       stroke: _renderUi.color.defaults.TEXT,
       transition: 'fill 200ms linear, height 200ms linear',
-      '&.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","transition","transparentHandle","height","fill","stroke","line","color","defaults","TEXT","DraggableHandle","axis","fromDelta","delta","newPoint","utils","point","add","bounds","domain","range","area","left","top","bottom","right","anchorPoint"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;IAEMA,a;;;;;;;;;;;;WAgBJ,kBAAS;AACP,wBAUI,KAAKC,KAVT;AAAA,UACEC,CADF,eACEA,CADF;AAAA,UAEEC,CAFF,eAEEA,CAFF;AAAA,UAGEC,UAHF,eAGEA,UAHF;AAAA,UAIEC,OAJF,eAIEA,OAJF;AAAA,UAKEC,SALF,eAKEA,SALF;AAAA,UAMEC,WANF,eAMEA,WANF;AAAA,UAOEC,wBAPF,eAOEA,wBAPF;AAAA,UAQEC,WARF,eAQEA,WARF;AAAA,UASKC,IATL;AAWA,UAAQC,KAAR,GAAkBP,UAAlB,CAAQO,KAAR;AAEA,0BACE,gCAAC,wBAAD;AACE,QAAA,KAAK,EAAEA,KADT;AAEE,QAAA,CAAC,EAAET,CAFL;AAGE,QAAA,CAAC,EAAEC,CAHL;AAIE,QAAA,OAAO,EAAEE,OAJX;AAKE,QAAA,SAAS,EAAE,4BAAWC,SAAX,EAAsB,CAACC,WAAD,IAAgB,iBAAtC,CALb;AAME,QAAA,WAAW,EAAEE,WANf;AAOE,QAAA,WAAW,EAAEF;AAPf,SAQMG,IARN,EADF;AAYD;;;EA1CyBE,kBAAMC,S;;iCAA5Bb,a,eACe;AACjBE,EAAAA,CAAC,EAAEY,sBAAUC,MAAV,CAAiBC,UADH;AAEjBb,EAAAA,CAAC,EAAEW,sBAAUC,MAAV,CAAiBC,UAFH;AAGjBC,EAAAA,KAAK,EAAEH,sBAAUC,MAHA;AAIjBX,EAAAA,UAAU,EAAEc,YAAMC,cAAN,CAAqBH,UAJhB;AAKjBX,EAAAA,OAAO,EAAES,sBAAUM,MAAV,CAAiBJ,UALT;AAMjBV,EAAAA,SAAS,EAAEQ,sBAAUO,MANJ;AAOjBd,EAAAA,WAAW,EAAEO,sBAAUQ,IAPN;AAQjBd,EAAAA,wBAAwB,EAAEM,sBAAUS,IARnB;AASjBd,EAAAA,WAAW,EAAEK,sBAAUU,KAAV,CAAgB;AAC3BC,IAAAA,KAAK,EAAEX,sBAAUO,MADU;AAE3BK,IAAAA,KAAK,EAAEZ,sBAAUO;AAFU,GAAhB;AATI,C;AA4Cd,IAAMM,UAAU,GAAG,uBAAW;AAAA,SAAO;AAC1CC,IAAAA,MAAM,EAAE;AACNC,MAAAA,UAAU,EAAE,wCADN;AAEN,mBAAa,qBAAQ,MAAR,CAFP;AAGN,qBAAe,uBAAU,MAAV,CAHT;AAIN,2BAAqB,sBAAS,MAAT;AAJf,KADkC;AAO1CC,IAAAA,iBAAiB,EAAE;AACjBC,MAAAA,MAAM,EAAE,MADS;AAEjBC,MAAAA,IAAI,EAAE,aAFW;AAGjBC,MAAAA,MAAM,EAAE;AAHS,KAPuB;AAY1CC,IAAAA,IAAI,EAAE;AACJD,MAAAA,MAAM,EAAEE,gBAAMC,QAAN,CAAeC,IADnB;AAEJR,MAAAA,UAAU,EAAE,wCAFR;AAGJ,2BAAqB,sBAAS,QAAT,CAHjB;AAIJ,mBAAa,qBAAQ,QAAR,CAJT;AAKJ,qBAAe,uBAAU,QAAV;AALX;AAZoC,GAAP;AAAA,CAAX,EAmBtB7B,aAnBsB,CAAnB;;AAqBP,IAAMsC,eAAe,GAAG,yBAAc;AACpCC,EAAAA,IAAI,EAAE,GAD8B;AAEpCC,EAAAA,SAAS,EAAE,mBAACvC,KAAD,EAAQwC,KAAR,EAAkB;AAC3B;AACAA,IAAAA,KAAK,CAACvC,CAAN,GAAU,CAAV;;AACA,QAAMwC,QAAQ,GAAGC,YAAMC,KAAN,CAAY3C,KAAZ,EAAmB4C,GAAnB,CAAuBF,YAAMC,KAAN,CAAYH,KAAZ,CAAvB,CAAjB;;AAEA,WAAOC,QAAQ,CAACvC,CAAhB;AACD,GARmC;AASpC2C,EAAAA,MAAM,EAAE,gBAAC7C,KAAD,QAA8B;AAAA,QAApB8C,MAAoB,QAApBA,MAAoB;AAAA,QAAZC,KAAY,QAAZA,KAAY;AACpC,QAAMC,IAAI,GAAG;AAAEC,MAAAA,IAAI,EAAE,CAAR;AAAWC,MAAAA,GAAG,EAAElD,KAAK,CAACE,CAAtB;AAAyBiD,MAAAA,MAAM,EAAEnD,KAAK,CAACE,CAAvC;AAA0CkD,MAAAA,KAAK,EAAE;AAAjD,KAAb;AAEA,WAAOV,YAAMG,MAAN,CAAaG,IAAb,EAAmBF,MAAnB,EAA2BC,KAA3B,CAAP;AACD,GAbmC;AAcpCM,EAAAA,WAAW,EAAE,qBAACrD,KAAD,EAAW;AACtB,WAAO;AAAEC,MAAAA,CAAC,EAAED,KAAK,CAACC,CAAX;AAAcC,MAAAA,CAAC,EAAEF,KAAK,CAACE;AAAvB,KAAP;AACD;AAhBmC,CAAd,EAiBrBwB,UAjBqB,CAAxB;eAmBeW,e","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        interactive={interactive}\n        {...rest}\n      />\n    );\n  }\n}\n\nexport const DragHandle = withStyles(() => ({\n  handle: {\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    stroke: 'transparent',\n  },\n  line: {\n    stroke: color.defaults.TEXT,\n    transition: 'fill 200ms linear, height 200ms linear',\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
         });
       }));
     }

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","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 } = 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.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"}
+{"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"}

package/lib/line/line-cross.js

@@ -31,8 +31,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _plot = require("@pie-lib/plot");
-
 var _shape = require("@vx/shape");
 
 var _group = require("@vx/group");
@@ -43,9 +41,13 @@ var _renderUi = require("@pie-lib/render-ui");
 
 var _utils = require("../utils");
 
+var _plot = require("@pie-lib/plot");
+
 var _line = _interopRequireDefault(require("./common/line"));
 
-var _excluded = ["classes", "className", "scale", "x", "y", "r", "correctness"];
+var _correctnessIndicators = require("../common/correctness-indicators");
+
+var _excluded = ["classes", "className", "scale", "x", "y", "r", "correctness", "interactive", "correctData", "label"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -64,6 +66,9 @@ var DraggableComponent = function DraggableComponent(props) {
       y = props.y,
       r = props.r,
       correctness = props.correctness,
+      interactive = props.interactive,
+      correctData = props.correctData,
+      label = props.label,
       rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -76,7 +81,7 @@ var DraggableComponent = function DraggableComponent(props) {
   var cx = scale.x(x);
   var cy = scale.y(y);
   return /*#__PURE__*/_react["default"].createElement(_group.Group, {
-    className: (0, _classnames["default"])(className, classes.line, correctness && correctness.value)
+    className: (0, _classnames["default"])(className, classes.line, correctness && !interactive && classes.disabledPoint)
   }, /*#__PURE__*/_react["default"].createElement(_shape.LinePath, {
     data: [{
       x: scale.x(x) - r,
@@ -135,7 +140,23 @@ var DraggableComponent = function DraggableComponent(props) {
     onMouseLeave: function onMouseLeave() {
       return setHover(false);
     }
-  }, rest)));
+  }, rest)), /*#__PURE__*/_react["default"].createElement(_correctnessIndicators.CorrectnessIndicator, {
+    scale: scale,
+    x: x,
+    y: y,
+    classes: classes,
+    r: r,
+    correctness: correctness,
+    interactive: interactive
+  }), /*#__PURE__*/_react["default"].createElement(_correctnessIndicators.SmallCorrectPointIndicator, {
+    scale: scale,
+    x: x,
+    r: r,
+    correctness: correctness,
+    classes: classes,
+    correctData: correctData,
+    label: label
+  }));
 };
 
 DraggableComponent.propTypes = {

package/lib/line/line-cross.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/line/line-cross.js"],"names":["DraggableComponent","props","classes","className","scale","x","y","r","correctness","rest","hover","setHover","squareSize","squareHalf","cx","cy","line","value","d","pointerEvents","color","defaults","BORDER_GRAY","transparentHandle","propTypes","PropTypes","object","number","string","shape","label","LineCross","data","graphProps","size","xBand","width","React","Component","array","onChange","func","types","GraphPropsType","isRequired","type","name"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { LinePath } from '@vx/shape';\nimport { Group } from '@vx/group';\nimport classNames from 'classnames';\nimport { color } from '@pie-lib/render-ui';\nimport { dataToXBand } from '../utils';\nimport RawLine from './common/line';\n\nconst DraggableComponent = (props) => {\n  const { classes = {}, className, scale, x, y, r, correctness, ...rest } = props;\n  const [hover, setHover] = useState(false);\n\n  const squareSize = r * 4;\n  const squareHalf = squareSize / 2;\n  const cx = scale.x(x);\n  const cy = scale.y(y);\n\n  return (\n    <Group className={classNames(className, classes.line, correctness && correctness.value)}>\n      <LinePath\n        data={[\n          { x: scale.x(x) - r, y: scale.y(y) + r },\n          { x: scale.x(x) + r, y: scale.y(y) - r },\n        ]}\n        key={`point-${x}-${y}-1`}\n        x={(d) => d.x}\n        y={(d) => d.y}\n        strokeWidth={5}\n        style={{ pointerEvents: 'none' }}\n      />\n      <LinePath\n        data={[\n          { x: scale.x(x) - r, y: scale.y(y) - r },\n          { x: scale.x(x) + r, y: scale.y(y) + r },\n        ]}\n        key={`point-${x}-${y}-2`}\n        x={(d) => d.x}\n        y={(d) => d.y}\n        strokeWidth={5}\n        style={{ pointerEvents: 'none' }}\n      />\n      {hover && (\n        <rect\n          x={cx - squareHalf}\n          y={cy - squareHalf}\n          width={squareSize}\n          height={squareSize}\n          stroke={color.defaults.BORDER_GRAY}\n          fill=\"none\"\n          strokeWidth={2}\n          pointerEvents=\"none\"\n        />\n      )}\n      <circle\n        cx={cx}\n        cy={cy}\n        r={r * 2}\n        className={classNames(classes.transparentHandle)}\n        onMouseEnter={() => setHover(true)}\n        onMouseLeave={() => setHover(false)}\n        {...rest}\n      />\n    </Group>\n  );\n};\n\nDraggableComponent.propTypes = {\n  scale: PropTypes.object,\n  x: PropTypes.number,\n  y: PropTypes.number,\n  r: PropTypes.number,\n  className: PropTypes.string,\n  classes: PropTypes.object,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string,\n  }),\n};\n\nexport class LineCross 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, 'lineCross');\n\n    return <RawLine {...props} xBand={xBand} CustomDraggableComponent={DraggableComponent} />;\n  }\n}\n\nexport default () => ({\n  type: 'lineCross',\n  Component: LineCross,\n  name: 'Line Cross',\n});\n"],"file":"line-cross.js"}
+{"version":3,"sources":["../../src/line/line-cross.js"],"names":["DraggableComponent","props","classes","className","scale","x","y","r","correctness","interactive","correctData","label","rest","hover","setHover","squareSize","squareHalf","cx","cy","line","disabledPoint","d","pointerEvents","color","defaults","BORDER_GRAY","transparentHandle","propTypes","PropTypes","object","number","string","shape","value","LineCross","data","graphProps","size","xBand","width","React","Component","array","onChange","func","types","GraphPropsType","isRequired","type","name"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { LinePath } from '@vx/shape';\nimport { Group } from '@vx/group';\nimport classNames from 'classnames';\n\nimport { color } from '@pie-lib/render-ui';\nimport { dataToXBand } from '../utils';\nimport { types } from '@pie-lib/plot';\nimport RawLine from './common/line';\nimport { CorrectnessIndicator, SmallCorrectPointIndicator } from '../common/correctness-indicators';\n\nconst DraggableComponent = (props) => {\n  const { classes = {}, className, scale, x, y, r, correctness, interactive, correctData, label, ...rest } = props;\n  const [hover, setHover] = useState(false);\n\n  const squareSize = r * 4;\n  const squareHalf = squareSize / 2;\n  const cx = scale.x(x);\n  const cy = scale.y(y);\n\n  return (\n    <Group className={classNames(className, classes.line, correctness && !interactive && classes.disabledPoint)}>\n      <LinePath\n        data={[\n          { x: scale.x(x) - r, y: scale.y(y) + r },\n          { x: scale.x(x) + r, y: scale.y(y) - r },\n        ]}\n        key={`point-${x}-${y}-1`}\n        x={(d) => d.x}\n        y={(d) => d.y}\n        strokeWidth={5}\n        style={{ pointerEvents: 'none' }}\n      />\n      <LinePath\n        data={[\n          { x: scale.x(x) - r, y: scale.y(y) - r },\n          { x: scale.x(x) + r, y: scale.y(y) + r },\n        ]}\n        key={`point-${x}-${y}-2`}\n        x={(d) => d.x}\n        y={(d) => d.y}\n        strokeWidth={5}\n        style={{ pointerEvents: 'none' }}\n      />\n      {hover && (\n        <rect\n          x={cx - squareHalf}\n          y={cy - squareHalf}\n          width={squareSize}\n          height={squareSize}\n          stroke={color.defaults.BORDER_GRAY}\n          fill=\"none\"\n          strokeWidth={2}\n          pointerEvents=\"none\"\n        />\n      )}\n      <circle\n        cx={cx}\n        cy={cy}\n        r={r * 2}\n        className={classNames(classes.transparentHandle)}\n        onMouseEnter={() => setHover(true)}\n        onMouseLeave={() => setHover(false)}\n        {...rest}\n      />\n      {/* show correctness indicators */}\n      <CorrectnessIndicator\n        scale={scale}\n        x={x}\n        y={y}\n        classes={classes}\n        r={r}\n        correctness={correctness}\n        interactive={interactive}\n      />\n      {/* show correct point if answer was incorrect */}\n      <SmallCorrectPointIndicator\n        scale={scale}\n        x={x}\n        r={r}\n        correctness={correctness}\n        classes={classes}\n        correctData={correctData}\n        label={label}\n      />\n    </Group>\n  );\n};\n\nDraggableComponent.propTypes = {\n  scale: PropTypes.object,\n  x: PropTypes.number,\n  y: PropTypes.number,\n  r: PropTypes.number,\n  className: PropTypes.string,\n  classes: PropTypes.object,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string,\n  }),\n};\n\nexport class LineCross 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, 'lineCross');\n\n    return <RawLine {...props} xBand={xBand} CustomDraggableComponent={DraggableComponent} />;\n  }\n}\n\nexport default () => ({\n  type: 'lineCross',\n  Component: LineCross,\n  name: 'Line Cross',\n});\n"],"file":"line-cross.js"}

package/lib/line/line-dot.js

@@ -29,6 +29,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _plot = require("@pie-lib/plot");
 
 var _renderUi = require("@pie-lib/render-ui");
@@ -37,9 +39,9 @@ var _utils = require("../utils");
 
 var _line = _interopRequireDefault(require("./common/line"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _correctnessIndicators = require("../common/correctness-indicators");
 
-var _excluded = ["scale", "x", "y", "className", "classes", "r", "correctness", "interactive"];
+var _excluded = ["scale", "x", "y", "className", "classes", "r", "correctness", "interactive", "correctData", "label"];
 
 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); }; }
 
@@ -54,6 +56,8 @@ var DraggableComponent = function DraggableComponent(_ref) {
       r = _ref.r,
       correctness = _ref.correctness,
       interactive = _ref.interactive,
+      correctData = _ref.correctData,
+      label = _ref.label,
       rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
 
   var _React$useState = _react["default"].useState(false),
@@ -79,8 +83,24 @@ var DraggableComponent = function DraggableComponent(_ref) {
     cx: scale.x(x),
     cy: scale.y(y),
     r: r,
-    className: (0, _classnames["default"])(className, classes.handle, correctness && correctness.value)
-  }, rest)), isHovered && allowRolloverEvent && /*#__PURE__*/_react["default"].createElement("rect", {
+    className: (0, _classnames["default"])(className, classes.handle, correctness && !interactive && classes.disabledPoint)
+  }, rest)), /*#__PURE__*/_react["default"].createElement(_correctnessIndicators.CorrectnessIndicator, {
+    scale: scale,
+    x: x,
+    y: y,
+    classes: classes,
+    r: r,
+    correctness: correctness,
+    interactive: interactive
+  }), /*#__PURE__*/_react["default"].createElement(_correctnessIndicators.SmallCorrectPointIndicator, {
+    scale: scale,
+    x: x,
+    r: r,
+    correctness: correctness,
+    classes: classes,
+    correctData: correctData,
+    label: label
+  }), isHovered && allowRolloverEvent && /*#__PURE__*/_react["default"].createElement("rect", {
     x: scale.x(x) - r * 2,
     y: scale.y(y) - r * 2,
     width: r * 4,

package/lib/line/line-dot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/line/line-dot.js"],"names":["DraggableComponent","scale","x","y","className","classes","r","correctness","interactive","rest","React","useState","isHovered","setIsHovered","allowRolloverEvent","transparentHandle","handle","value","color","defaults","BORDER_GRAY","propTypes","PropTypes","object","number","string","shape","label","LineDot","props","data","graphProps","size","xBand","width","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 { color } from '@pie-lib/render-ui';\nimport { dataToXBand } from '../utils';\nimport RawLine from './common/line';\nimport classNames from 'classnames';\n\nconst DraggableComponent = ({ scale, x, y, className, classes, r, correctness, interactive, ...rest }) => {\n  const [isHovered, setIsHovered] = React.useState(false);\n  const allowRolloverEvent = !correctness && interactive;\n\n  return (\n    <g onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>\n      <circle\n        cx={scale.x(x)}\n        cy={scale.y(y)}\n        r={r * 3}\n        className={classNames(classes.transparentHandle, className)}\n        pointerEvents={correctness ? 'none' : ''}\n        {...rest}\n      />\n      <circle\n        cx={scale.x(x)}\n        cy={scale.y(y)}\n        r={r}\n        className={classNames(className, classes.handle, correctness && correctness.value)}\n        {...rest}\n      />\n      {isHovered && allowRolloverEvent && (\n        <rect\n          x={scale.x(x) - r * 2}\n          y={scale.y(y) - r * 2}\n          width={r * 4}\n          height={r * 4}\n          stroke={color.defaults.BORDER_GRAY}\n          strokeWidth=\"1\"\n          fill=\"none\"\n        />\n      )}\n    </g>\n  );\n};\n\nDraggableComponent.propTypes = {\n  scale: PropTypes.object,\n  x: PropTypes.number,\n  y: PropTypes.number,\n  r: PropTypes.number,\n  className: PropTypes.string,\n  classes: PropTypes.object,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string,\n  }),\n};\n\nexport class LineDot 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, 'lineDot');\n\n    return <RawLine {...props} xBand={xBand} CustomDraggableComponent={DraggableComponent} />;\n  }\n}\n\nexport default () => ({\n  type: 'lineDot',\n  Component: LineDot,\n  name: 'Line Dot',\n});\n"],"file":"line-dot.js"}
+{"version":3,"sources":["../../src/line/line-dot.js"],"names":["DraggableComponent","scale","x","y","className","classes","r","correctness","interactive","correctData","label","rest","React","useState","isHovered","setIsHovered","allowRolloverEvent","transparentHandle","handle","disabledPoint","color","defaults","BORDER_GRAY","propTypes","PropTypes","object","number","string","shape","value","LineDot","props","data","graphProps","size","xBand","width","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 classNames from 'classnames';\n\nimport { types } from '@pie-lib/plot';\nimport { color } from '@pie-lib/render-ui';\nimport { dataToXBand } from '../utils';\nimport RawLine from './common/line';\nimport { CorrectnessIndicator, SmallCorrectPointIndicator } from '../common/correctness-indicators';\n\nconst DraggableComponent = ({\n  scale,\n  x,\n  y,\n  className,\n  classes,\n  r,\n  correctness,\n  interactive,\n  correctData,\n  label,\n  ...rest\n}) => {\n  const [isHovered, setIsHovered] = React.useState(false);\n  const allowRolloverEvent = !correctness && interactive;\n\n  return (\n    <g onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>\n      <circle\n        cx={scale.x(x)}\n        cy={scale.y(y)}\n        r={r * 3}\n        className={classNames(classes.transparentHandle, className)}\n        pointerEvents={correctness ? 'none' : ''}\n        {...rest}\n      />\n      <circle\n        cx={scale.x(x)}\n        cy={scale.y(y)}\n        r={r}\n        className={classNames(className, classes.handle, correctness && !interactive && classes.disabledPoint)}\n        {...rest}\n      />\n      {/* show correctness indicators */}\n      <CorrectnessIndicator\n        scale={scale}\n        x={x}\n        y={y}\n        classes={classes}\n        r={r}\n        correctness={correctness}\n        interactive={interactive}\n      />\n\n      {/* show correct point if answer was incorrect */}\n      <SmallCorrectPointIndicator\n        scale={scale}\n        x={x}\n        r={r}\n        correctness={correctness}\n        classes={classes}\n        correctData={correctData}\n        label={label}\n      />\n\n      {/* show rollover rectangle */}\n      {isHovered && allowRolloverEvent && (\n        <rect\n          x={scale.x(x) - r * 2}\n          y={scale.y(y) - r * 2}\n          width={r * 4}\n          height={r * 4}\n          stroke={color.defaults.BORDER_GRAY}\n          strokeWidth=\"1\"\n          fill=\"none\"\n        />\n      )}\n    </g>\n  );\n};\n\nDraggableComponent.propTypes = {\n  scale: PropTypes.object,\n  x: PropTypes.number,\n  y: PropTypes.number,\n  r: PropTypes.number,\n  className: PropTypes.string,\n  classes: PropTypes.object,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string,\n  }),\n};\n\nexport class LineDot 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, 'lineDot');\n\n    return <RawLine {...props} xBand={xBand} CustomDraggableComponent={DraggableComponent} />;\n  }\n}\n\nexport default () => ({\n  type: 'lineDot',\n  Component: LineDot,\n  name: 'Line Dot',\n});\n"],"file":"line-dot.js"}

package/lib/mark-label.js

@@ -70,7 +70,12 @@ var styles = function styles(theme) {
       border: "2px solid ".concat(theme.palette.error.main)
     },
     correct: _objectSpread({}, (0, _styles2.correct)('color')),
-    incorrect: _objectSpread({}, (0, _styles2.incorrect)('color'))
+    incorrect: _objectSpread({}, (0, _styles2.incorrect)('color')),
+    flexContainer: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center'
+    }
   };
 };
 
@@ -129,7 +134,8 @@ var MarkLabel = function MarkLabel(props) {
       autoFocus = props.autoFocus,
       error = props.error,
       isHiddenLabel = props.isHiddenLabel,
-      limitCharacters = props.limitCharacters;
+      limitCharacters = props.limitCharacters,
+      correctnessIndicator = props.correctnessIndicator;
 
   var _useState3 = (0, _react.useState)(mark.label),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
@@ -182,7 +188,9 @@ var MarkLabel = function MarkLabel(props) {
   (0, _react.useEffect)(function () {
     (0, _mathRendering.renderMath)(root);
   }, []);
-  return isMathRendering() ? /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.flexContainer
+  }, correctnessIndicator, isMathRendering() ? /*#__PURE__*/_react["default"].createElement("div", {
     ref: function ref(r) {
       root = r;
       externalInputRef(r);
@@ -199,7 +207,8 @@ var MarkLabel = function MarkLabel(props) {
       position: 'fixed',
       transformOrigin: 'left',
       transform: "rotate(".concat(rotate, "deg)"),
-      visibility: isHiddenLabel ? 'hidden' : 'unset'
+      visibility: isHiddenLabel ? 'hidden' : 'unset',
+      marginTop: correctnessIndicator ? '24px' : '0'
     }
   }) : /*#__PURE__*/_react["default"].createElement(_reactInputAutosize["default"], {
     inputRef: function inputRef(r) {
@@ -227,11 +236,12 @@ var MarkLabel = function MarkLabel(props) {
       minWidth: barWidth,
       transformOrigin: 'left',
       transform: "rotate(".concat(rotate, "deg)"),
-      visibility: isHiddenLabel ? 'hidden' : 'unset'
+      visibility: isHiddenLabel ? 'hidden' : 'unset',
+      marginTop: correctnessIndicator ? '24px' : '0'
     },
     onChange: onChange,
     onBlur: onChangeProp
-  });
+  }));
 };
 
 exports.MarkLabel = MarkLabel;
@@ -251,7 +261,8 @@ MarkLabel.propTypes = {
     label: _propTypes["default"].string
   }),
   isHiddenLabel: _propTypes["default"].bool,
-  limitCharacters: _propTypes["default"].bool
+  limitCharacters: _propTypes["default"].bool,
+  correctnessIndicator: _propTypes["default"].node
 };
 
 var _default = (0, _styles.withStyles)(styles)(MarkLabel);

package/lib/mark-label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/mark-label.jsx"],"names":["styles","theme","input","fontFamily","typography","fontSize","border","backgroundColor","palette","error","main","mathInput","pointerEvents","textAlign","color","primaryDark","paddingTop","disabled","correct","incorrect","isFractionFormat","label","trimmedLabel","trim","fracRegex","RegExp","test","getLabelMathFormat","fraction","mixedNr","improperFraction","split","includes","formattedLLabel","undefined","MarkLabel","props","setInput","_ref","node","mark","classes","externalInputRef","inputRef","barWidth","rotate","correctness","autoFocus","isHiddenLabel","limitCharacters","setLabel","mathLabel","setMathLabel","isEditing","setIsEditing","root","onChange","e","target","value","length","isMathRendering","onChangeProp","extraStyle","width","r","__html","editable","minWidth","position","transformOrigin","transform","visibility","background","boxSizing","paddingLeft","paddingRight","top","left","propTypes","PropTypes","bool","any","func","graphProps","types","GraphPropsType","object","number","shape","string"],"mappings":"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","sourcesContent":["import React, { useState, useCallback, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport AutosizeInput from 'react-input-autosize';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { correct, incorrect, disabled } from './common/styles';\nimport { color } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nconst styles = (theme) => ({\n  input: {\n    float: 'right',\n    fontFamily: theme.typography.fontFamily,\n    fontSize: theme.typography.fontSize,\n    border: 'none',\n    '&.correct': correct('color'),\n    '&.incorrect': incorrect('color'),\n    '&.disabled': {\n      backgroundColor: 'transparent !important',\n    },\n    '&.error': { border: `2px solid ${theme.palette.error.main}` },\n  },\n  mathInput: {\n    pointerEvents: 'auto',\n    textAlign: 'center',\n    fontSize: theme.typography.fontSize + 2,\n    fontFamily: theme.typography.fontFamily,\n    color: color.primaryDark(),\n    paddingTop: theme.typography.fontSize / 2,\n  },\n  disabled: {\n    ...disabled('color'),\n    backgroundColor: 'transparent !important',\n  },\n  error: {\n    border: `2px solid ${theme.palette.error.main}`,\n  },\n  correct: {\n    ...correct('color'),\n  },\n  incorrect: {\n    ...incorrect('color'),\n  },\n});\n\nfunction isFractionFormat(label) {\n  const trimmedLabel = label?.trim() || '';\n  const fracRegex = new RegExp(/^[1-9]*[0-9]*\\s?[1-9][0-9]*\\/[1-9][0-9]*$/);\n  return fracRegex.test(trimmedLabel);\n}\n\nfunction getLabelMathFormat(label) {\n  const trimmedLabel = label?.trim() || '';\n  let fraction;\n  let mixedNr = '';\n  let improperFraction = trimmedLabel.split(' ');\n  if (improperFraction[1] && improperFraction[1].includes('/')) {\n    fraction = improperFraction[1].split('/') || '';\n  } else {\n    fraction = trimmedLabel?.split('/') || '';\n  }\n\n  let formattedLLabel;\n  if (isFractionFormat(label)) {\n    if (improperFraction[0] && improperFraction[1]) {\n      mixedNr = improperFraction[0];\n    }\n    formattedLLabel = `\\\\(${mixedNr}\\\\frac{${fraction[0]}}{${fraction[1]}}\\\\)`;\n    return formattedLLabel;\n  }\n  return undefined;\n}\n\nexport const MarkLabel = (props) => {\n  // eslint-disable-next-line no-unused-vars\n  const [input, setInput] = useState(null);\n  const _ref = useCallback((node) => setInput(node), null);\n\n  const {\n    mark,\n    classes,\n    disabled,\n    inputRef: externalInputRef,\n    barWidth,\n    rotate,\n    correctness,\n    autoFocus,\n    error,\n    isHiddenLabel,\n    limitCharacters,\n  } = props;\n\n  const [label, setLabel] = useState(mark.label);\n  const [mathLabel, setMathLabel] = useState(getLabelMathFormat(mark.label));\n  const [isEditing, setIsEditing] = useState(false);\n  let root = useRef(null);\n\n  const onChange = (e) => {\n    if (limitCharacters && e.target.value && e.target.value.length > 20) {\n      return;\n    }\n\n    setLabel(e.target.value);\n  };\n\n  const isMathRendering = () => {\n    return isEditing === false && mathLabel !== undefined;\n  };\n\n  const onChangeProp = (e) => {\n    setMathLabel(getLabelMathFormat(mark.label));\n    setIsEditing(false);\n    props.onChange(e.target.value);\n  };\n  let extraStyle = {};\n\n  if (rotate) {\n    extraStyle = {\n      width: 'unset',\n      textAlign: 'left',\n    };\n  }\n\n  // useState only sets the value once, to synch props to state need useEffect\n  useEffect(() => {\n    setLabel(mark.label);\n  }, [mark.label]);\n\n  useEffect(() => {\n    renderMath(root);\n  }, []);\n\n  return isMathRendering() ? (\n    <div\n      ref={(r) => {\n        root = r;\n        externalInputRef(r);\n      }}\n      dangerouslySetInnerHTML={{ __html: getLabelMathFormat(label) }}\n      className={classNames(classes.mathInput, {\n        [classes.disabled]: disabled,\n        [classes.error]: error,\n        [classes.correct]: mark.editable && correctness?.label === 'correct',\n        [classes.incorrect]: mark.editable && correctness?.label === 'incorrect',\n      })}\n      onClick={() => setIsEditing(true)}\n      style={{\n        minWidth: barWidth,\n        position: 'fixed',\n        transformOrigin: 'left',\n        transform: `rotate(${rotate}deg)`,\n        visibility: isHiddenLabel ? 'hidden' : 'unset',\n      }}\n    ></div>\n  ) : (\n    <AutosizeInput\n      inputRef={(r) => {\n        _ref(r);\n        externalInputRef(r);\n      }}\n      autoFocus={isEditing || autoFocus}\n      disabled={disabled}\n      inputClassName={classNames(\n        classes.input,\n        correctness && mark.editable ? correctness.label : null,\n        disabled && 'disabled',\n        error && 'error',\n      )}\n      inputStyle={{\n        minWidth: barWidth,\n        textAlign: 'center',\n        background: 'transparent',\n        boxSizing: 'border-box',\n        paddingLeft: 0,\n        paddingRight: 0,\n        ...extraStyle,\n      }}\n      value={label}\n      style={{\n        position: 'fixed',\n        pointerEvents: 'auto',\n        top: 0,\n        left: 0,\n        minWidth: barWidth,\n        transformOrigin: 'left',\n        transform: `rotate(${rotate}deg)`,\n        visibility: isHiddenLabel ? 'hidden' : 'unset',\n      }}\n      onChange={onChange}\n      onBlur={onChangeProp}\n    />\n  );\n};\n\nMarkLabel.propTypes = {\n  autoFocus: PropTypes.bool,\n  disabled: PropTypes.bool,\n  error: PropTypes.any,\n  onChange: PropTypes.func,\n  graphProps: types.GraphPropsType,\n  classes: PropTypes.object,\n  inputRef: PropTypes.func,\n  mark: PropTypes.object,\n  barWidth: PropTypes.number,\n  rotate: PropTypes.number,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string,\n  }),\n  isHiddenLabel: PropTypes.bool,\n  limitCharacters: PropTypes.bool,\n};\n\nexport default withStyles(styles)(MarkLabel);\n"],"file":"mark-label.js"}
+{"version":3,"sources":["../src/mark-label.jsx"],"names":["styles","theme","input","fontFamily","typography","fontSize","border","backgroundColor","palette","error","main","mathInput","pointerEvents","textAlign","color","primaryDark","paddingTop","disabled","correct","incorrect","flexContainer","display","flexDirection","alignItems","isFractionFormat","label","trimmedLabel","trim","fracRegex","RegExp","test","getLabelMathFormat","fraction","mixedNr","improperFraction","split","includes","formattedLLabel","undefined","MarkLabel","props","setInput","_ref","node","mark","classes","externalInputRef","inputRef","barWidth","rotate","correctness","autoFocus","isHiddenLabel","limitCharacters","correctnessIndicator","setLabel","mathLabel","setMathLabel","isEditing","setIsEditing","root","onChange","e","target","value","length","isMathRendering","onChangeProp","extraStyle","width","r","__html","editable","minWidth","position","transformOrigin","transform","visibility","marginTop","background","boxSizing","paddingLeft","paddingRight","top","left","propTypes","PropTypes","bool","any","func","graphProps","types","GraphPropsType","object","number","shape","string"],"mappings":"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","sourcesContent":["import React, { useState, useCallback, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport AutosizeInput from 'react-input-autosize';\nimport PropTypes from 'prop-types';\n\nimport { types } from '@pie-lib/plot';\nimport { correct, incorrect, disabled } from './common/styles';\nimport { color } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nconst styles = (theme) => ({\n  input: {\n    float: 'right',\n    fontFamily: theme.typography.fontFamily,\n    fontSize: theme.typography.fontSize,\n    border: 'none',\n    '&.correct': correct('color'),\n    '&.incorrect': incorrect('color'),\n    '&.disabled': {\n      backgroundColor: 'transparent !important',\n    },\n    '&.error': { border: `2px solid ${theme.palette.error.main}` },\n  },\n  mathInput: {\n    pointerEvents: 'auto',\n    textAlign: 'center',\n    fontSize: theme.typography.fontSize + 2,\n    fontFamily: theme.typography.fontFamily,\n    color: color.primaryDark(),\n    paddingTop: theme.typography.fontSize / 2,\n  },\n  disabled: {\n    ...disabled('color'),\n    backgroundColor: 'transparent !important',\n  },\n  error: {\n    border: `2px solid ${theme.palette.error.main}`,\n  },\n  correct: {\n    ...correct('color'),\n  },\n  incorrect: {\n    ...incorrect('color'),\n  },\n  flexContainer: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n  },\n});\n\nfunction isFractionFormat(label) {\n  const trimmedLabel = label?.trim() || '';\n  const fracRegex = new RegExp(/^[1-9]*[0-9]*\\s?[1-9][0-9]*\\/[1-9][0-9]*$/);\n  return fracRegex.test(trimmedLabel);\n}\n\nfunction getLabelMathFormat(label) {\n  const trimmedLabel = label?.trim() || '';\n  let fraction;\n  let mixedNr = '';\n  let improperFraction = trimmedLabel.split(' ');\n  if (improperFraction[1] && improperFraction[1].includes('/')) {\n    fraction = improperFraction[1].split('/') || '';\n  } else {\n    fraction = trimmedLabel?.split('/') || '';\n  }\n\n  let formattedLLabel;\n  if (isFractionFormat(label)) {\n    if (improperFraction[0] && improperFraction[1]) {\n      mixedNr = improperFraction[0];\n    }\n    formattedLLabel = `\\\\(${mixedNr}\\\\frac{${fraction[0]}}{${fraction[1]}}\\\\)`;\n    return formattedLLabel;\n  }\n  return undefined;\n}\n\nexport const MarkLabel = (props) => {\n  // eslint-disable-next-line no-unused-vars\n  const [input, setInput] = useState(null);\n  const _ref = useCallback((node) => setInput(node), null);\n\n  const {\n    mark,\n    classes,\n    disabled,\n    inputRef: externalInputRef,\n    barWidth,\n    rotate,\n    correctness,\n    autoFocus,\n    error,\n    isHiddenLabel,\n    limitCharacters,\n    correctnessIndicator,\n  } = props;\n\n  const [label, setLabel] = useState(mark.label);\n  const [mathLabel, setMathLabel] = useState(getLabelMathFormat(mark.label));\n  const [isEditing, setIsEditing] = useState(false);\n  let root = useRef(null);\n\n  const onChange = (e) => {\n    if (limitCharacters && e.target.value && e.target.value.length > 20) {\n      return;\n    }\n\n    setLabel(e.target.value);\n  };\n\n  const isMathRendering = () => {\n    return isEditing === false && mathLabel !== undefined;\n  };\n\n  const onChangeProp = (e) => {\n    setMathLabel(getLabelMathFormat(mark.label));\n    setIsEditing(false);\n    props.onChange(e.target.value);\n  };\n  let extraStyle = {};\n\n  if (rotate) {\n    extraStyle = {\n      width: 'unset',\n      textAlign: 'left',\n    };\n  }\n\n  // useState only sets the value once, to synch props to state need useEffect\n  useEffect(() => {\n    setLabel(mark.label);\n  }, [mark.label]);\n\n  useEffect(() => {\n    renderMath(root);\n  }, []);\n\n  return (\n    <div className={classes.flexContainer}>\n      {correctnessIndicator}\n      {isMathRendering() ? (\n        <div\n          ref={(r) => {\n            root = r;\n            externalInputRef(r);\n          }}\n          dangerouslySetInnerHTML={{ __html: getLabelMathFormat(label) }}\n          className={classNames(classes.mathInput, {\n            [classes.disabled]: disabled,\n            [classes.error]: error,\n            [classes.correct]: mark.editable && correctness?.label === 'correct',\n            [classes.incorrect]: mark.editable && correctness?.label === 'incorrect',\n          })}\n          onClick={() => setIsEditing(true)}\n          style={{\n            minWidth: barWidth,\n            position: 'fixed',\n            transformOrigin: 'left',\n            transform: `rotate(${rotate}deg)`,\n            visibility: isHiddenLabel ? 'hidden' : 'unset',\n            marginTop: correctnessIndicator ? '24px' : '0',\n          }}\n        ></div>\n      ) : (\n        <AutosizeInput\n          inputRef={(r) => {\n            _ref(r);\n            externalInputRef(r);\n          }}\n          autoFocus={isEditing || autoFocus}\n          disabled={disabled}\n          inputClassName={classNames(\n            classes.input,\n            correctness && mark.editable ? correctness.label : null,\n            disabled && 'disabled',\n            error && 'error',\n          )}\n          inputStyle={{\n            minWidth: barWidth,\n            textAlign: 'center',\n            background: 'transparent',\n            boxSizing: 'border-box',\n            paddingLeft: 0,\n            paddingRight: 0,\n            ...extraStyle,\n          }}\n          value={label}\n          style={{\n            position: 'fixed',\n            pointerEvents: 'auto',\n            top: 0,\n            left: 0,\n            minWidth: barWidth,\n            transformOrigin: 'left',\n            transform: `rotate(${rotate}deg)`,\n            visibility: isHiddenLabel ? 'hidden' : 'unset',\n            marginTop: correctnessIndicator ? '24px' : '0',\n          }}\n          onChange={onChange}\n          onBlur={onChangeProp}\n        />\n      )}\n    </div>\n  );\n};\n\nMarkLabel.propTypes = {\n  autoFocus: PropTypes.bool,\n  disabled: PropTypes.bool,\n  error: PropTypes.any,\n  onChange: PropTypes.func,\n  graphProps: types.GraphPropsType,\n  classes: PropTypes.object,\n  inputRef: PropTypes.func,\n  mark: PropTypes.object,\n  barWidth: PropTypes.number,\n  rotate: PropTypes.number,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string,\n  }),\n  isHiddenLabel: PropTypes.bool,\n  limitCharacters: PropTypes.bool,\n  correctnessIndicator: PropTypes.node,\n};\n\nexport default withStyles(styles)(MarkLabel);\n"],"file":"mark-label.js"}