@pie-lib/charting 5.31.1-next.12 → 5.31.1-next.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -104,10 +104,22 @@ var RawPlot = /*#__PURE__*/function (_React$Component) {
104
104
 
105
105
  _this.setDragValue(next);
106
106
  });
107
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderCorrectnessIcon", function (barX, barWidth, correctVal, correctness, classes, scale) {
107
+ (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderCorrectnessIcon", function (barX, barWidth, correctVal, correctness, classes, scale, pointHeight, pointDiameter) {
108
+ var iconY;
109
+
110
+ if (correctVal === 0) {
111
+ // if correct value is 0, position icon on the horizontal axis
112
+ iconY = scale.y(0) - ICON_SIZE / 2;
113
+ } else {
114
+ var shapeIndex = correctVal - 1; // the index of the shape representing the correct value
115
+
116
+ var shapeCenterY = scale.y(shapeIndex) - (pointHeight - pointDiameter) / 2 - pointDiameter / 2;
117
+ iconY = shapeCenterY - ICON_SIZE / 2; // center the icon
118
+ }
119
+
108
120
  return /*#__PURE__*/_react["default"].createElement("foreignObject", {
109
121
  x: barX + barWidth / 2 - ICON_SIZE / 2,
110
- y: scale.y(correctVal) + ICON_SIZE,
122
+ y: iconY,
111
123
  width: ICON_SIZE,
112
124
  height: ICON_SIZE
113
125
  }, /*#__PURE__*/_react["default"].createElement(_Check["default"], {
@@ -194,7 +206,11 @@ var RawPlot = /*#__PURE__*/function (_React$Component) {
194
206
  }), correctness && correctness.value === 'incorrect' && function () {
195
207
  var correctVal = parseFloat(correctData[index] && correctData[index].value);
196
208
  if (isNaN(correctVal)) return null;
197
- var selectedVal = v;
209
+ var selectedVal = v; // special case: if correct value is 0, only show the icon on the axis
210
+
211
+ if (correctVal === 0) {
212
+ return _this2.renderCorrectnessIcon(barX, barWidth, correctVal, correctness, classes, scale, pointHeight, pointDiameter);
213
+ }
198
214
 
199
215
  if (selectedVal > correctVal) {
200
216
  // selected is higher than correct: overlay the correct last segment
@@ -229,7 +245,7 @@ var RawPlot = /*#__PURE__*/function (_React$Component) {
229
245
  classes: classes,
230
246
  scale: scale,
231
247
  dottedOverline: true
232
- }), _this2.renderCorrectnessIcon(_barX, _barWidth, correctVal, correctness, classes, scale));
248
+ }), _this2.renderCorrectnessIcon(_barX, _barWidth, correctVal, correctness, classes, scale, _pointHeight, _pointDiameter));
233
249
  } // selected is lower than correct, render missing segment below the correct bar
234
250
 
235
251
 
@@ -252,7 +268,7 @@ var RawPlot = /*#__PURE__*/function (_React$Component) {
252
268
  scale: scale,
253
269
  dottedOverline: true
254
270
  });
255
- }), _this2.renderCorrectnessIcon(barX, barWidth, correctVal, correctness, classes, scale));
271
+ }), _this2.renderCorrectnessIcon(barX, barWidth, correctVal, correctness, classes, scale, pointHeight, pointDiameter));
256
272
  }(), /*#__PURE__*/_react["default"].createElement(Component, {
257
273
  x: barX,
258
274
  y: v,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/plot/common/plot.jsx"],"names":["log","ICON_SIZE","RawPlot","props","setState","isHovered","dragValue","label","onChangeCategory","state","undefined","value","setDragValue","existing","next","barX","barWidth","correctVal","correctness","classes","scale","y","correctnessIcon","correctIcon","smallIcon","graphProps","xBand","index","CustomBarElement","interactive","defineChart","correctData","range","size","max","v","Number","isFinite","bandwidth","barHeight","values","i","push","pointHeight","height","pointDiameter","Component","DraggableHandle","DragHandle","allowRolloverEvent","handleMouseEnter","handleMouseLeave","length","color","defaults","BORDER_GRAY","map","parseFloat","isNaN","selectedVal","overlayValues","lastIndexOfOverlay","lastOverlayValue","renderCorrectnessIcon","valuesToRender","idx","dottedOverline","dragStop","primaryDark","React","PropTypes","func","number","object","string","isRequired","types","GraphPropsType","bool","shape","Bar","theme","dot","fill","visualElementsColors","PLOT_FILL_COLOR","dotColor","line","stroke","backgroundColor","correct","incorrectIcon","incorrectWithIcon","borderRadius","spacing","unit","WHITE","fontSize","width","padding","border","boxSizing","Plot","data","d","category","array"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Check from '@material-ui/icons/Check';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport { Group } from '@vx/group';\nimport debug from 'debug';\n\nimport { types } from '@pie-lib/plot';\nimport DraggableHandle, { DragHandle } from '../../common/drag-handle';\nimport { color } from '@pie-lib/render-ui';\nimport { bandKey } from '../../utils';\nimport { correct, incorrect } from '../../common/styles';\n\nconst log = debug('pie-lib:chart:bars');\nconst ICON_SIZE = 16; // 10px icon + 2px padding on all sides + 1px border\n\nexport class RawPlot extends React.Component {\n static propTypes = {\n onChangeCategory: PropTypes.func,\n value: PropTypes.number,\n classes: PropTypes.object,\n label: PropTypes.string,\n xBand: PropTypes.func,\n index: PropTypes.number.isRequired,\n graphProps: types.GraphPropsType.isRequired,\n CustomBarElement: PropTypes.func,\n interactive: PropTypes.bool,\n correctness: PropTypes.shape({\n value: PropTypes.string,\n label: PropTypes.string,\n }),\n };\n\n constructor(props) {\n super(props);\n this.state = {\n dragValue: undefined,\n isHovered: false,\n };\n }\n\n handleMouseEnter = () => {\n this.setState({ isHovered: true });\n };\n\n handleMouseLeave = () => {\n this.setState({ isHovered: false });\n };\n\n setDragValue = (dragValue) => this.setState({ dragValue });\n\n dragStop = () => {\n const { label, onChangeCategory } = this.props;\n const { dragValue } = this.state;\n log('[dragStop]', dragValue);\n\n if (dragValue !== undefined) {\n onChangeCategory({ label, value: dragValue });\n }\n\n this.setDragValue(undefined);\n };\n\n dragValue = (existing, next) => {\n log('[dragValue] next:', next);\n\n this.setDragValue(next);\n };\n\n renderCorrectnessIcon = (barX, barWidth, correctVal, correctness, classes, scale) => (\n <foreignObject\n x={barX + barWidth / 2 - ICON_SIZE / 2}\n y={scale.y(correctVal) + ICON_SIZE}\n width={ICON_SIZE}\n height={ICON_SIZE}\n >\n <Check\n className={classNames(classes.correctnessIcon, classes.correctIcon, classes.smallIcon)}\n title={correctness.label}\n />\n </foreignObject>\n );\n\n render() {\n const {\n graphProps,\n value,\n label,\n classes,\n xBand,\n index,\n CustomBarElement,\n interactive,\n correctness,\n defineChart,\n correctData,\n } = this.props;\n\n const { scale, range, size } = graphProps;\n const { max } = range || {};\n const { dragValue, isHovered } = this.state;\n\n const v = Number.isFinite(dragValue) ? dragValue : value;\n const barWidth = xBand.bandwidth();\n const barHeight = scale.y(range.max - v);\n const barX = xBand(bandKey({ label }, index));\n\n log('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);\n\n const values = [];\n\n for (let i = 0; i < v; i++) {\n values.push(i);\n }\n\n const pointHeight = size.height / max;\n const pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;\n const Component = interactive ? DraggableHandle : DragHandle;\n const allowRolloverEvent = interactive && !correctness;\n\n return (\n <React.Fragment>\n <g\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onTouchStart={this.handleMouseEnter}\n onTouchEnd={this.handleMouseLeave}\n >\n {isHovered && allowRolloverEvent && (\n <rect\n x={barX}\n y={scale.y(v)}\n width={barWidth}\n height={values?.length ? pointHeight * values.length : 0}\n stroke={color.defaults.BORDER_GRAY}\n strokeWidth={'4px'}\n fill={'transparent'}\n />\n )}\n {values.map((index) =>\n CustomBarElement({\n index,\n pointDiameter,\n barX,\n barWidth,\n pointHeight,\n label,\n value,\n classes,\n scale,\n }),\n )}\n {correctness &&\n correctness.value === 'incorrect' &&\n (() => {\n const correctVal = parseFloat(correctData[index] && correctData[index].value);\n if (isNaN(correctVal)) return null;\n const selectedVal = v;\n if (selectedVal > correctVal) {\n // selected is higher than correct: overlay the correct last segment\n const overlayValues = [];\n for (let i = 0; i < correctVal; i++) {\n overlayValues.push(i);\n }\n const lastIndexOfOverlay = overlayValues.length - 1;\n const lastOverlayValue = overlayValues[lastIndexOfOverlay];\n const barX = xBand(bandKey({ label }, index));\n const barWidth = xBand.bandwidth();\n const pointHeight = size.height / max;\n const pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;\n return (\n <>\n <CustomBarElement\n index={lastOverlayValue}\n pointDiameter={pointDiameter + 10} // increase point diameter for dotted line\n barX={barX}\n barWidth={barWidth}\n pointHeight={pointHeight}\n label={label}\n value={value}\n classes={classes}\n scale={scale}\n dottedOverline={true}\n />\n {this.renderCorrectnessIcon(barX, barWidth, correctVal, correctness, classes, scale)}\n </>\n );\n }\n // selected is lower than correct, render missing segment below the correct bar\n const valuesToRender = [];\n for (let i = selectedVal; i < correctVal; i++) {\n valuesToRender.push(i);\n }\n return (\n <>\n {valuesToRender.map((idx) =>\n CustomBarElement({\n index: idx,\n pointDiameter,\n barX,\n barWidth,\n pointHeight,\n label,\n value,\n classes,\n scale,\n dottedOverline: true,\n }),\n )}\n {this.renderCorrectnessIcon(barX, barWidth, correctVal, correctness, classes, scale)}\n </>\n );\n })()}\n <Component\n x={barX}\n y={v}\n interactive={interactive}\n width={barWidth}\n onDrag={(v) => this.dragValue(value, v)}\n onDragStop={this.dragStop}\n graphProps={graphProps}\n correctness={correctness}\n isHovered={isHovered}\n defineChart={defineChart}\n color={color.primaryDark()}\n isPlot\n />\n </g>\n </React.Fragment>\n );\n }\n}\n\nconst Bar = withStyles((theme) => ({\n dot: {\n fill: color.visualElementsColors.PLOT_FILL_COLOR,\n '&.correct': correct('stroke'),\n '&.incorrect': incorrect('stroke'),\n },\n dotColor: {\n fill: color.visualElementsColors.PLOT_FILL_COLOR,\n '&.correct': correct('fill'),\n '&.incorrect': incorrect('fill'),\n },\n line: {\n stroke: color.visualElementsColors.PLOT_FILL_COLOR,\n '&.correct': correct('stroke'),\n '&.incorrect': incorrect('stroke'),\n },\n correctIcon: {\n backgroundColor: color.correct(),\n },\n incorrectIcon: {\n backgroundColor: color.incorrectWithIcon(),\n },\n correctnessIcon: {\n borderRadius: theme.spacing.unit * 2,\n color: color.defaults.WHITE,\n fontSize: '16px',\n width: '16px',\n height: '16px',\n padding: '2px',\n border: `1px solid ${color.defaults.WHITE}`,\n stroke: 'initial',\n boxSizing: 'unset', // to override the default border-box in IBX\n },\n smallIcon: {\n fontSize: '10px',\n width: '10px',\n height: '10px',\n },\n}))(RawPlot);\n\nexport class Plot extends React.Component {\n static propTypes = {\n data: PropTypes.array,\n onChangeCategory: PropTypes.func,\n xBand: PropTypes.func,\n graphProps: types.GraphPropsType.isRequired,\n defineChart: PropTypes.bool,\n CustomBarElement: PropTypes.func,\n };\n\n render() {\n const { data, graphProps, xBand, CustomBarElement, onChangeCategory, defineChart, correctData } = this.props;\n\n return (\n <Group>\n {(data || []).map((d, index) => (\n <Bar\n value={d.value}\n label={d.label}\n interactive={defineChart || d.interactive}\n defineChart={defineChart}\n xBand={xBand}\n index={index}\n key={`bar-${d.label}-${d.value}-${index}`}\n onChangeCategory={(category) => onChangeCategory(index, category)}\n graphProps={graphProps}\n CustomBarElement={CustomBarElement}\n correctness={d.correctness}\n correctData={correctData}\n />\n ))}\n </Group>\n );\n }\n}\n\nexport default Plot;\n"],"file":"plot.js"}
1
+ {"version":3,"sources":["../../../src/plot/common/plot.jsx"],"names":["log","ICON_SIZE","RawPlot","props","setState","isHovered","dragValue","label","onChangeCategory","state","undefined","value","setDragValue","existing","next","barX","barWidth","correctVal","correctness","classes","scale","pointHeight","pointDiameter","iconY","y","shapeIndex","shapeCenterY","correctnessIcon","correctIcon","smallIcon","graphProps","xBand","index","CustomBarElement","interactive","defineChart","correctData","range","size","max","v","Number","isFinite","bandwidth","barHeight","values","i","push","height","Component","DraggableHandle","DragHandle","allowRolloverEvent","handleMouseEnter","handleMouseLeave","length","color","defaults","BORDER_GRAY","map","parseFloat","isNaN","selectedVal","renderCorrectnessIcon","overlayValues","lastIndexOfOverlay","lastOverlayValue","valuesToRender","idx","dottedOverline","dragStop","primaryDark","React","PropTypes","func","number","object","string","isRequired","types","GraphPropsType","bool","shape","Bar","theme","dot","fill","visualElementsColors","PLOT_FILL_COLOR","dotColor","line","stroke","backgroundColor","correct","incorrectIcon","incorrectWithIcon","borderRadius","spacing","unit","WHITE","fontSize","width","padding","border","boxSizing","Plot","data","d","category","array"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,oBAAN,CAAZ;AACA,IAAMC,SAAS,GAAG,EAAlB,C,CAAsB;;IAETC,O;;;;;AAiBX,mBAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,yGAQA,YAAM;AACvB,YAAKC,QAAL,CAAc;AAAEC,QAAAA,SAAS,EAAE;AAAb,OAAd;AACD,KAVkB;AAAA,yGAYA,YAAM;AACvB,YAAKD,QAAL,CAAc;AAAEC,QAAAA,SAAS,EAAE;AAAb,OAAd;AACD,KAdkB;AAAA,qGAgBJ,UAACC,SAAD;AAAA,aAAe,MAAKF,QAAL,CAAc;AAAEE,QAAAA,SAAS,EAATA;AAAF,OAAd,CAAf;AAAA,KAhBI;AAAA,iGAkBR,YAAM;AACf,wBAAoC,MAAKH,KAAzC;AAAA,UAAQI,KAAR,eAAQA,KAAR;AAAA,UAAeC,gBAAf,eAAeA,gBAAf;AACA,UAAQF,SAAR,GAAsB,MAAKG,KAA3B,CAAQH,SAAR;AACAN,MAAAA,GAAG,CAAC,YAAD,EAAeM,SAAf,CAAH;;AAEA,UAAIA,SAAS,KAAKI,SAAlB,EAA6B;AAC3BF,QAAAA,gBAAgB,CAAC;AAAED,UAAAA,KAAK,EAALA,KAAF;AAASI,UAAAA,KAAK,EAAEL;AAAhB,SAAD,CAAhB;AACD;;AAED,YAAKM,YAAL,CAAkBF,SAAlB;AACD,KA5BkB;AAAA,kGA8BP,UAACG,QAAD,EAAWC,IAAX,EAAoB;AAC9Bd,MAAAA,GAAG,CAAC,mBAAD,EAAsBc,IAAtB,CAAH;;AAEA,YAAKF,YAAL,CAAkBE,IAAlB;AACD,KAlCkB;AAAA,8GAoCK,UAACC,IAAD,EAAOC,QAAP,EAAiBC,UAAjB,EAA6BC,WAA7B,EAA0CC,OAA1C,EAAmDC,KAAnD,EAA0DC,WAA1D,EAAuEC,aAAvE,EAAyF;AAC/G,UAAIC,KAAJ;;AAEA,UAAIN,UAAU,KAAK,CAAnB,EAAsB;AACpB;AACAM,QAAAA,KAAK,GAAGH,KAAK,CAACI,CAAN,CAAQ,CAAR,IAAavB,SAAS,GAAG,CAAjC;AACD,OAHD,MAGO;AACL,YAAMwB,UAAU,GAAGR,UAAU,GAAG,CAAhC,CADK,CAC8B;;AACnC,YAAMS,YAAY,GAAGN,KAAK,CAACI,CAAN,CAAQC,UAAR,IAAsB,CAACJ,WAAW,GAAGC,aAAf,IAAgC,CAAtD,GAA0DA,aAAa,GAAG,CAA/F;AACAC,QAAAA,KAAK,GAAGG,YAAY,GAAGzB,SAAS,GAAG,CAAnC,CAHK,CAGiC;AACvC;;AAED,0BACE;AAAe,QAAA,CAAC,EAAEc,IAAI,GAAGC,QAAQ,GAAG,CAAlB,GAAsBf,SAAS,GAAG,CAApD;AAAuD,QAAA,CAAC,EAAEsB,KAA1D;AAAiE,QAAA,KAAK,EAAEtB,SAAxE;AAAmF,QAAA,MAAM,EAAEA;AAA3F,sBACE,gCAAC,iBAAD;AACE,QAAA,SAAS,EAAE,4BAAWkB,OAAO,CAACQ,eAAnB,EAAoCR,OAAO,CAACS,WAA5C,EAAyDT,OAAO,CAACU,SAAjE,CADb;AAEE,QAAA,KAAK,EAAEX,WAAW,CAACX;AAFrB,QADF,CADF;AAQD,KAxDkB;AAEjB,UAAKE,KAAL,GAAa;AACXH,MAAAA,SAAS,EAAEI,SADA;AAEXL,MAAAA,SAAS,EAAE;AAFA,KAAb;AAFiB;AAMlB;;;;WAoDD,kBAAS;AAAA;;AACP,yBAYI,KAAKF,KAZT;AAAA,UACE2B,UADF,gBACEA,UADF;AAAA,UAEEnB,KAFF,gBAEEA,KAFF;AAAA,UAGEJ,KAHF,gBAGEA,KAHF;AAAA,UAIEY,OAJF,gBAIEA,OAJF;AAAA,UAKEY,KALF,gBAKEA,KALF;AAAA,UAMEC,KANF,gBAMEA,KANF;AAAA,UAOEC,gBAPF,gBAOEA,gBAPF;AAAA,UAQEC,WARF,gBAQEA,WARF;AAAA,UASEhB,WATF,gBASEA,WATF;AAAA,UAUEiB,WAVF,gBAUEA,WAVF;AAAA,UAWEC,WAXF,gBAWEA,WAXF;AAcA,UAAQhB,KAAR,GAA+BU,UAA/B,CAAQV,KAAR;AAAA,UAAeiB,KAAf,GAA+BP,UAA/B,CAAeO,KAAf;AAAA,UAAsBC,IAAtB,GAA+BR,UAA/B,CAAsBQ,IAAtB;;AACA,iBAAgBD,KAAK,IAAI,EAAzB;AAAA,UAAQE,GAAR,QAAQA,GAAR;;AACA,wBAAiC,KAAK9B,KAAtC;AAAA,UAAQH,SAAR,eAAQA,SAAR;AAAA,UAAmBD,SAAnB,eAAmBA,SAAnB;AAEA,UAAMmC,CAAC,GAAGC,MAAM,CAACC,QAAP,CAAgBpC,SAAhB,IAA6BA,SAA7B,GAAyCK,KAAnD;AACA,UAAMK,QAAQ,GAAGe,KAAK,CAACY,SAAN,EAAjB;AACA,UAAMC,SAAS,GAAGxB,KAAK,CAACI,CAAN,CAAQa,KAAK,CAACE,GAAN,GAAYC,CAApB,CAAlB;AACA,UAAMzB,IAAI,GAAGgB,KAAK,CAAC,oBAAQ;AAAExB,QAAAA,KAAK,EAALA;AAAF,OAAR,EAAmByB,KAAnB,CAAD,CAAlB;AAEAhC,MAAAA,GAAG,CAAC,QAAD,EAAWO,KAAX,EAAkB,OAAlB,EAA2BQ,IAA3B,EAAiC,KAAjC,EAAwCyB,CAAxC,EAA2C,YAA3C,EAAyDI,SAAzD,EAAoE,YAApE,EAAkF5B,QAAlF,CAAH;AAEA,UAAM6B,MAAM,GAAG,EAAf;;AAEA,WAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGN,CAApB,EAAuBM,CAAC,EAAxB,EAA4B;AAC1BD,QAAAA,MAAM,CAACE,IAAP,CAAYD,CAAZ;AACD;;AAED,UAAMzB,WAAW,GAAGiB,IAAI,CAACU,MAAL,GAAcT,GAAlC;AACA,UAAMjB,aAAa,GAAG,CAACD,WAAW,GAAGL,QAAd,GAAyBA,QAAzB,GAAoCK,WAArC,IAAoD,GAA1E;AACA,UAAM4B,SAAS,GAAGf,WAAW,GAAGgB,sBAAH,GAAqBC,sBAAlD;AACA,UAAMC,kBAAkB,GAAGlB,WAAW,IAAI,CAAChB,WAA3C;AAEA,0BACE,gCAAC,iBAAD,CAAO,QAAP,qBACE;AACE,QAAA,YAAY,EAAE,KAAKmC,gBADrB;AAEE,QAAA,YAAY,EAAE,KAAKC,gBAFrB;AAGE,QAAA,YAAY,EAAE,KAAKD,gBAHrB;AAIE,QAAA,UAAU,EAAE,KAAKC;AAJnB,SAMGjD,SAAS,IAAI+C,kBAAb,iBACC;AACE,QAAA,CAAC,EAAErC,IADL;AAEE,QAAA,CAAC,EAAEK,KAAK,CAACI,CAAN,CAAQgB,CAAR,CAFL;AAGE,QAAA,KAAK,EAAExB,QAHT;AAIE,QAAA,MAAM,EAAE6B,MAAM,SAAN,IAAAA,MAAM,WAAN,IAAAA,MAAM,CAAEU,MAAR,GAAiBlC,WAAW,GAAGwB,MAAM,CAACU,MAAtC,GAA+C,CAJzD;AAKE,QAAA,MAAM,EAAEC,gBAAMC,QAAN,CAAeC,WALzB;AAME,QAAA,WAAW,EAAE,KANf;AAOE,QAAA,IAAI,EAAE;AAPR,QAPJ,EAiBGb,MAAM,CAACc,GAAP,CAAW,UAAC3B,KAAD;AAAA,eACVC,gBAAgB,CAAC;AACfD,UAAAA,KAAK,EAALA,KADe;AAEfV,UAAAA,aAAa,EAAbA,aAFe;AAGfP,UAAAA,IAAI,EAAJA,IAHe;AAIfC,UAAAA,QAAQ,EAARA,QAJe;AAKfK,UAAAA,WAAW,EAAXA,WALe;AAMfd,UAAAA,KAAK,EAALA,KANe;AAOfI,UAAAA,KAAK,EAALA,KAPe;AAQfQ,UAAAA,OAAO,EAAPA,OARe;AASfC,UAAAA,KAAK,EAALA;AATe,SAAD,CADN;AAAA,OAAX,CAjBH,EA8BGF,WAAW,IACVA,WAAW,CAACP,KAAZ,KAAsB,WADvB,IAEE,YAAM;AACL,YAAMM,UAAU,GAAG2C,UAAU,CAACxB,WAAW,CAACJ,KAAD,CAAX,IAAsBI,WAAW,CAACJ,KAAD,CAAX,CAAmBrB,KAA1C,CAA7B;AACA,YAAIkD,KAAK,CAAC5C,UAAD,CAAT,EAAuB,OAAO,IAAP;AACvB,YAAM6C,WAAW,GAAGtB,CAApB,CAHK,CAKL;;AACA,YAAIvB,UAAU,KAAK,CAAnB,EAAsB;AACpB,iBAAO,MAAI,CAAC8C,qBAAL,CACLhD,IADK,EAELC,QAFK,EAGLC,UAHK,EAILC,WAJK,EAKLC,OALK,EAMLC,KANK,EAOLC,WAPK,EAQLC,aARK,CAAP;AAUD;;AAED,YAAIwC,WAAW,GAAG7C,UAAlB,EAA8B;AAC5B;AACA,cAAM+C,aAAa,GAAG,EAAtB;;AACA,eAAK,IAAIlB,EAAC,GAAG,CAAb,EAAgBA,EAAC,GAAG7B,UAApB,EAAgC6B,EAAC,EAAjC,EAAqC;AACnCkB,YAAAA,aAAa,CAACjB,IAAd,CAAmBD,EAAnB;AACD;;AACD,cAAMmB,kBAAkB,GAAGD,aAAa,CAACT,MAAd,GAAuB,CAAlD;AACA,cAAMW,gBAAgB,GAAGF,aAAa,CAACC,kBAAD,CAAtC;;AACA,cAAMlD,KAAI,GAAGgB,KAAK,CAAC,oBAAQ;AAAExB,YAAAA,KAAK,EAALA;AAAF,WAAR,EAAmByB,KAAnB,CAAD,CAAlB;;AACA,cAAMhB,SAAQ,GAAGe,KAAK,CAACY,SAAN,EAAjB;;AACA,cAAMtB,YAAW,GAAGiB,IAAI,CAACU,MAAL,GAAcT,GAAlC;;AACA,cAAMjB,cAAa,GAAG,CAACD,YAAW,GAAGL,SAAd,GAAyBA,SAAzB,GAAoCK,YAArC,IAAoD,GAA1E;;AACA,8BACE,+EACE,gCAAC,gBAAD;AACE,YAAA,KAAK,EAAE6C,gBADT;AAEE,YAAA,aAAa,EAAE5C,cAAa,GAAG,EAFjC,CAEqC;AAFrC;AAGE,YAAA,IAAI,EAAEP,KAHR;AAIE,YAAA,QAAQ,EAAEC,SAJZ;AAKE,YAAA,WAAW,EAAEK,YALf;AAME,YAAA,KAAK,EAAEd,KANT;AAOE,YAAA,KAAK,EAAEI,KAPT;AAQE,YAAA,OAAO,EAAEQ,OARX;AASE,YAAA,KAAK,EAAEC,KATT;AAUE,YAAA,cAAc,EAAE;AAVlB,YADF,EAaG,MAAI,CAAC2C,qBAAL,CACChD,KADD,EAECC,SAFD,EAGCC,UAHD,EAICC,WAJD,EAKCC,OALD,EAMCC,KAND,EAOCC,YAPD,EAQCC,cARD,CAbH,CADF;AA0BD,SAzDI,CA0DL;;;AACA,YAAM6C,cAAc,GAAG,EAAvB;;AACA,aAAK,IAAIrB,GAAC,GAAGgB,WAAb,EAA0BhB,GAAC,GAAG7B,UAA9B,EAA0C6B,GAAC,EAA3C,EAA+C;AAC7CqB,UAAAA,cAAc,CAACpB,IAAf,CAAoBD,GAApB;AACD;;AACD,4BACE,kEACGqB,cAAc,CAACR,GAAf,CAAmB,UAACS,GAAD;AAAA,iBAClBnC,gBAAgB,CAAC;AACfD,YAAAA,KAAK,EAAEoC,GADQ;AAEf9C,YAAAA,aAAa,EAAbA,aAFe;AAGfP,YAAAA,IAAI,EAAJA,IAHe;AAIfC,YAAAA,QAAQ,EAARA,QAJe;AAKfK,YAAAA,WAAW,EAAXA,WALe;AAMfd,YAAAA,KAAK,EAALA,KANe;AAOfI,YAAAA,KAAK,EAALA,KAPe;AAQfQ,YAAAA,OAAO,EAAPA,OARe;AASfC,YAAAA,KAAK,EAALA,KATe;AAUfiD,YAAAA,cAAc,EAAE;AAVD,WAAD,CADE;AAAA,SAAnB,CADH,EAeG,MAAI,CAACN,qBAAL,CACChD,IADD,EAECC,QAFD,EAGCC,UAHD,EAICC,WAJD,EAKCC,OALD,EAMCC,KAND,EAOCC,WAPD,EAQCC,aARD,CAfH,CADF;AA4BD,OA3FD,EAhCJ,eA4HE,gCAAC,SAAD;AACE,QAAA,CAAC,EAAEP,IADL;AAEE,QAAA,CAAC,EAAEyB,CAFL;AAGE,QAAA,WAAW,EAAEN,WAHf;AAIE,QAAA,KAAK,EAAElB,QAJT;AAKE,QAAA,MAAM,EAAE,gBAACwB,CAAD;AAAA,iBAAO,MAAI,CAAClC,SAAL,CAAeK,KAAf,EAAsB6B,CAAtB,CAAP;AAAA,SALV;AAME,QAAA,UAAU,EAAE,KAAK8B,QANnB;AAOE,QAAA,UAAU,EAAExC,UAPd;AAQE,QAAA,WAAW,EAAEZ,WARf;AASE,QAAA,SAAS,EAAEb,SATb;AAUE,QAAA,WAAW,EAAE8B,WAVf;AAWE,QAAA,KAAK,EAAEqB,gBAAMe,WAAN,EAXT;AAYE,QAAA,MAAM;AAZR,QA5HF,CADF,CADF;AA+ID;;;EA/P0BC,kBAAMvB,S;;;iCAAtB/C,O,eACQ;AACjBM,EAAAA,gBAAgB,EAAEiE,sBAAUC,IADX;AAEjB/D,EAAAA,KAAK,EAAE8D,sBAAUE,MAFA;AAGjBxD,EAAAA,OAAO,EAAEsD,sBAAUG,MAHF;AAIjBrE,EAAAA,KAAK,EAAEkE,sBAAUI,MAJA;AAKjB9C,EAAAA,KAAK,EAAE0C,sBAAUC,IALA;AAMjB1C,EAAAA,KAAK,EAAEyC,sBAAUE,MAAV,CAAiBG,UANP;AAOjBhD,EAAAA,UAAU,EAAEiD,YAAMC,cAAN,CAAqBF,UAPhB;AAQjB7C,EAAAA,gBAAgB,EAAEwC,sBAAUC,IARX;AASjBxC,EAAAA,WAAW,EAAEuC,sBAAUQ,IATN;AAUjB/D,EAAAA,WAAW,EAAEuD,sBAAUS,KAAV,CAAgB;AAC3BvE,IAAAA,KAAK,EAAE8D,sBAAUI,MADU;AAE3BtE,IAAAA,KAAK,EAAEkE,sBAAUI;AAFU,GAAhB;AAVI,C;AAiQrB,IAAMM,GAAG,GAAG,uBAAW,UAACC,KAAD;AAAA,SAAY;AACjCC,IAAAA,GAAG,EAAE;AACHC,MAAAA,IAAI,EAAE9B,gBAAM+B,oBAAN,CAA2BC,eAD9B;AAEH,mBAAa,qBAAQ,QAAR,CAFV;AAGH,qBAAe,uBAAU,QAAV;AAHZ,KAD4B;AAMjCC,IAAAA,QAAQ,EAAE;AACRH,MAAAA,IAAI,EAAE9B,gBAAM+B,oBAAN,CAA2BC,eADzB;AAER,mBAAa,qBAAQ,MAAR,CAFL;AAGR,qBAAe,uBAAU,MAAV;AAHP,KANuB;AAWjCE,IAAAA,IAAI,EAAE;AACJC,MAAAA,MAAM,EAAEnC,gBAAM+B,oBAAN,CAA2BC,eAD/B;AAEJ,mBAAa,qBAAQ,QAAR,CAFT;AAGJ,qBAAe,uBAAU,QAAV;AAHX,KAX2B;AAgBjC5D,IAAAA,WAAW,EAAE;AACXgE,MAAAA,eAAe,EAAEpC,gBAAMqC,OAAN;AADN,KAhBoB;AAmBjCC,IAAAA,aAAa,EAAE;AACbF,MAAAA,eAAe,EAAEpC,gBAAMuC,iBAAN;AADJ,KAnBkB;AAsBjCpE,IAAAA,eAAe,EAAE;AACfqE,MAAAA,YAAY,EAAEZ,KAAK,CAACa,OAAN,CAAcC,IAAd,GAAqB,CADpB;AAEf1C,MAAAA,KAAK,EAAEA,gBAAMC,QAAN,CAAe0C,KAFP;AAGfC,MAAAA,QAAQ,EAAE,MAHK;AAIfC,MAAAA,KAAK,EAAE,MAJQ;AAKfrD,MAAAA,MAAM,EAAE,MALO;AAMfsD,MAAAA,OAAO,EAAE,KANM;AAOfC,MAAAA,MAAM,sBAAe/C,gBAAMC,QAAN,CAAe0C,KAA9B,CAPS;AAQfR,MAAAA,MAAM,EAAE,SARO;AASfa,MAAAA,SAAS,EAAE,OATI,CASK;;AATL,KAtBgB;AAiCjC3E,IAAAA,SAAS,EAAE;AACTuE,MAAAA,QAAQ,EAAE,MADD;AAETC,MAAAA,KAAK,EAAE,MAFE;AAGTrD,MAAAA,MAAM,EAAE;AAHC;AAjCsB,GAAZ;AAAA,CAAX,EAsCR9C,OAtCQ,CAAZ;;IAwCauG,I;;;;;;;;;;;;WAUX,kBAAS;AACP,yBAAkG,KAAKtG,KAAvG;AAAA,UAAQuG,IAAR,gBAAQA,IAAR;AAAA,UAAc5E,UAAd,gBAAcA,UAAd;AAAA,UAA0BC,KAA1B,gBAA0BA,KAA1B;AAAA,UAAiCE,gBAAjC,gBAAiCA,gBAAjC;AAAA,UAAmDzB,iBAAnD,gBAAmDA,gBAAnD;AAAA,UAAqE2B,WAArE,gBAAqEA,WAArE;AAAA,UAAkFC,WAAlF,gBAAkFA,WAAlF;AAEA,0BACE,gCAAC,YAAD,QACG,CAACsE,IAAI,IAAI,EAAT,EAAa/C,GAAb,CAAiB,UAACgD,CAAD,EAAI3E,KAAJ;AAAA,4BAChB,gCAAC,GAAD;AACE,UAAA,KAAK,EAAE2E,CAAC,CAAChG,KADX;AAEE,UAAA,KAAK,EAAEgG,CAAC,CAACpG,KAFX;AAGE,UAAA,WAAW,EAAE4B,WAAW,IAAIwE,CAAC,CAACzE,WAHhC;AAIE,UAAA,WAAW,EAAEC,WAJf;AAKE,UAAA,KAAK,EAAEJ,KALT;AAME,UAAA,KAAK,EAAEC,KANT;AAOE,UAAA,GAAG,gBAAS2E,CAAC,CAACpG,KAAX,cAAoBoG,CAAC,CAAChG,KAAtB,cAA+BqB,KAA/B,CAPL;AAQE,UAAA,gBAAgB,EAAE,0BAAC4E,QAAD;AAAA,mBAAcpG,iBAAgB,CAACwB,KAAD,EAAQ4E,QAAR,CAA9B;AAAA,WARpB;AASE,UAAA,UAAU,EAAE9E,UATd;AAUE,UAAA,gBAAgB,EAAEG,gBAVpB;AAWE,UAAA,WAAW,EAAE0E,CAAC,CAACzF,WAXjB;AAYE,UAAA,WAAW,EAAEkB;AAZf,UADgB;AAAA,OAAjB,CADH,CADF;AAoBD;;;EAjCuBoC,kBAAMvB,S;;;iCAAnBwD,I,eACQ;AACjBC,EAAAA,IAAI,EAAEjC,sBAAUoC,KADC;AAEjBrG,EAAAA,gBAAgB,EAAEiE,sBAAUC,IAFX;AAGjB3C,EAAAA,KAAK,EAAE0C,sBAAUC,IAHA;AAIjB5C,EAAAA,UAAU,EAAEiD,YAAMC,cAAN,CAAqBF,UAJhB;AAKjB3C,EAAAA,WAAW,EAAEsC,sBAAUQ,IALN;AAMjBhD,EAAAA,gBAAgB,EAAEwC,sBAAUC;AANX,C;eAmCN+B,I","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Check from '@material-ui/icons/Check';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport { Group } from '@vx/group';\nimport debug from 'debug';\n\nimport { types } from '@pie-lib/plot';\nimport DraggableHandle, { DragHandle } from '../../common/drag-handle';\nimport { color } from '@pie-lib/render-ui';\nimport { bandKey } from '../../utils';\nimport { correct, incorrect } from '../../common/styles';\n\nconst log = debug('pie-lib:chart:bars');\nconst ICON_SIZE = 16; // 10px icon + 2px padding on all sides + 1px border\n\nexport class RawPlot extends React.Component {\n static propTypes = {\n onChangeCategory: PropTypes.func,\n value: PropTypes.number,\n classes: PropTypes.object,\n label: PropTypes.string,\n xBand: PropTypes.func,\n index: PropTypes.number.isRequired,\n graphProps: types.GraphPropsType.isRequired,\n CustomBarElement: PropTypes.func,\n interactive: PropTypes.bool,\n correctness: PropTypes.shape({\n value: PropTypes.string,\n label: PropTypes.string,\n }),\n };\n\n constructor(props) {\n super(props);\n this.state = {\n dragValue: undefined,\n isHovered: false,\n };\n }\n\n handleMouseEnter = () => {\n this.setState({ isHovered: true });\n };\n\n handleMouseLeave = () => {\n this.setState({ isHovered: false });\n };\n\n setDragValue = (dragValue) => this.setState({ dragValue });\n\n dragStop = () => {\n const { label, onChangeCategory } = this.props;\n const { dragValue } = this.state;\n log('[dragStop]', dragValue);\n\n if (dragValue !== undefined) {\n onChangeCategory({ label, value: dragValue });\n }\n\n this.setDragValue(undefined);\n };\n\n dragValue = (existing, next) => {\n log('[dragValue] next:', next);\n\n this.setDragValue(next);\n };\n\n renderCorrectnessIcon = (barX, barWidth, correctVal, correctness, classes, scale, pointHeight, pointDiameter) => {\n let iconY;\n\n if (correctVal === 0) {\n // if correct value is 0, position icon on the horizontal axis\n iconY = scale.y(0) - ICON_SIZE / 2;\n } else {\n const shapeIndex = correctVal - 1; // the index of the shape representing the correct value\n const shapeCenterY = scale.y(shapeIndex) - (pointHeight - pointDiameter) / 2 - pointDiameter / 2;\n iconY = shapeCenterY - ICON_SIZE / 2; // center the icon\n }\n\n return (\n <foreignObject x={barX + barWidth / 2 - ICON_SIZE / 2} y={iconY} width={ICON_SIZE} height={ICON_SIZE}>\n <Check\n className={classNames(classes.correctnessIcon, classes.correctIcon, classes.smallIcon)}\n title={correctness.label}\n />\n </foreignObject>\n );\n };\n\n render() {\n const {\n graphProps,\n value,\n label,\n classes,\n xBand,\n index,\n CustomBarElement,\n interactive,\n correctness,\n defineChart,\n correctData,\n } = this.props;\n\n const { scale, range, size } = graphProps;\n const { max } = range || {};\n const { dragValue, isHovered } = this.state;\n\n const v = Number.isFinite(dragValue) ? dragValue : value;\n const barWidth = xBand.bandwidth();\n const barHeight = scale.y(range.max - v);\n const barX = xBand(bandKey({ label }, index));\n\n log('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);\n\n const values = [];\n\n for (let i = 0; i < v; i++) {\n values.push(i);\n }\n\n const pointHeight = size.height / max;\n const pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;\n const Component = interactive ? DraggableHandle : DragHandle;\n const allowRolloverEvent = interactive && !correctness;\n\n return (\n <React.Fragment>\n <g\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onTouchStart={this.handleMouseEnter}\n onTouchEnd={this.handleMouseLeave}\n >\n {isHovered && allowRolloverEvent && (\n <rect\n x={barX}\n y={scale.y(v)}\n width={barWidth}\n height={values?.length ? pointHeight * values.length : 0}\n stroke={color.defaults.BORDER_GRAY}\n strokeWidth={'4px'}\n fill={'transparent'}\n />\n )}\n {values.map((index) =>\n CustomBarElement({\n index,\n pointDiameter,\n barX,\n barWidth,\n pointHeight,\n label,\n value,\n classes,\n scale,\n }),\n )}\n {correctness &&\n correctness.value === 'incorrect' &&\n (() => {\n const correctVal = parseFloat(correctData[index] && correctData[index].value);\n if (isNaN(correctVal)) return null;\n const selectedVal = v;\n\n // special case: if correct value is 0, only show the icon on the axis\n if (correctVal === 0) {\n return this.renderCorrectnessIcon(\n barX,\n barWidth,\n correctVal,\n correctness,\n classes,\n scale,\n pointHeight,\n pointDiameter,\n );\n }\n\n if (selectedVal > correctVal) {\n // selected is higher than correct: overlay the correct last segment\n const overlayValues = [];\n for (let i = 0; i < correctVal; i++) {\n overlayValues.push(i);\n }\n const lastIndexOfOverlay = overlayValues.length - 1;\n const lastOverlayValue = overlayValues[lastIndexOfOverlay];\n const barX = xBand(bandKey({ label }, index));\n const barWidth = xBand.bandwidth();\n const pointHeight = size.height / max;\n const pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;\n return (\n <>\n <CustomBarElement\n index={lastOverlayValue}\n pointDiameter={pointDiameter + 10} // increase point diameter for dotted line\n barX={barX}\n barWidth={barWidth}\n pointHeight={pointHeight}\n label={label}\n value={value}\n classes={classes}\n scale={scale}\n dottedOverline={true}\n />\n {this.renderCorrectnessIcon(\n barX,\n barWidth,\n correctVal,\n correctness,\n classes,\n scale,\n pointHeight,\n pointDiameter,\n )}\n </>\n );\n }\n // selected is lower than correct, render missing segment below the correct bar\n const valuesToRender = [];\n for (let i = selectedVal; i < correctVal; i++) {\n valuesToRender.push(i);\n }\n return (\n <>\n {valuesToRender.map((idx) =>\n CustomBarElement({\n index: idx,\n pointDiameter,\n barX,\n barWidth,\n pointHeight,\n label,\n value,\n classes,\n scale,\n dottedOverline: true,\n }),\n )}\n {this.renderCorrectnessIcon(\n barX,\n barWidth,\n correctVal,\n correctness,\n classes,\n scale,\n pointHeight,\n pointDiameter,\n )}\n </>\n );\n })()}\n <Component\n x={barX}\n y={v}\n interactive={interactive}\n width={barWidth}\n onDrag={(v) => this.dragValue(value, v)}\n onDragStop={this.dragStop}\n graphProps={graphProps}\n correctness={correctness}\n isHovered={isHovered}\n defineChart={defineChart}\n color={color.primaryDark()}\n isPlot\n />\n </g>\n </React.Fragment>\n );\n }\n}\n\nconst Bar = withStyles((theme) => ({\n dot: {\n fill: color.visualElementsColors.PLOT_FILL_COLOR,\n '&.correct': correct('stroke'),\n '&.incorrect': incorrect('stroke'),\n },\n dotColor: {\n fill: color.visualElementsColors.PLOT_FILL_COLOR,\n '&.correct': correct('fill'),\n '&.incorrect': incorrect('fill'),\n },\n line: {\n stroke: color.visualElementsColors.PLOT_FILL_COLOR,\n '&.correct': correct('stroke'),\n '&.incorrect': incorrect('stroke'),\n },\n correctIcon: {\n backgroundColor: color.correct(),\n },\n incorrectIcon: {\n backgroundColor: color.incorrectWithIcon(),\n },\n correctnessIcon: {\n borderRadius: theme.spacing.unit * 2,\n color: color.defaults.WHITE,\n fontSize: '16px',\n width: '16px',\n height: '16px',\n padding: '2px',\n border: `1px solid ${color.defaults.WHITE}`,\n stroke: 'initial',\n boxSizing: 'unset', // to override the default border-box in IBX\n },\n smallIcon: {\n fontSize: '10px',\n width: '10px',\n height: '10px',\n },\n}))(RawPlot);\n\nexport class Plot extends React.Component {\n static propTypes = {\n data: PropTypes.array,\n onChangeCategory: PropTypes.func,\n xBand: PropTypes.func,\n graphProps: types.GraphPropsType.isRequired,\n defineChart: PropTypes.bool,\n CustomBarElement: PropTypes.func,\n };\n\n render() {\n const { data, graphProps, xBand, CustomBarElement, onChangeCategory, defineChart, correctData } = this.props;\n\n return (\n <Group>\n {(data || []).map((d, index) => (\n <Bar\n value={d.value}\n label={d.label}\n interactive={defineChart || d.interactive}\n defineChart={defineChart}\n xBand={xBand}\n index={index}\n key={`bar-${d.label}-${d.value}-${index}`}\n onChangeCategory={(category) => onChangeCategory(index, category)}\n graphProps={graphProps}\n CustomBarElement={CustomBarElement}\n correctness={d.correctness}\n correctData={correctData}\n />\n ))}\n </Group>\n );\n }\n}\n\nexport default Plot;\n"],"file":"plot.js"}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "5.31.1-next.12+d599e698",
6
+ "version": "5.31.1-next.14+be22e31c",
7
7
  "description": "charting",
8
8
  "keywords": [
9
9
  "react",
@@ -19,8 +19,8 @@
19
19
  "dependencies": {
20
20
  "@mapbox/point-geometry": "^0.1.0",
21
21
  "@material-ui/core": "^3.8.3",
22
- "@pie-lib/plot": "^2.23.1-next.12+d599e698",
23
- "@pie-lib/render-ui": "^4.31.1-next.12+d599e698",
22
+ "@pie-lib/plot": "^2.23.0",
23
+ "@pie-lib/render-ui": "^4.31.0",
24
24
  "@pie-lib/translator": "^2.19.0",
25
25
  "@vx/axis": "^0.0.183",
26
26
  "@vx/event": "^0.0.182",
@@ -42,5 +42,5 @@
42
42
  "peerDependencies": {
43
43
  "react": "^16.8.1"
44
44
  },
45
- "gitHead": "d599e6982d0b71177c2c8676255b75c8fa7f294b"
45
+ "gitHead": "be22e31c68a3addf5197c4a22afb8c4559b87a73"
46
46
  }
@@ -68,19 +68,27 @@ export class RawPlot extends React.Component {
68
68
  this.setDragValue(next);
69
69
  };
70
70
 
71
- renderCorrectnessIcon = (barX, barWidth, correctVal, correctness, classes, scale) => (
72
- <foreignObject
73
- x={barX + barWidth / 2 - ICON_SIZE / 2}
74
- y={scale.y(correctVal) + ICON_SIZE}
75
- width={ICON_SIZE}
76
- height={ICON_SIZE}
77
- >
78
- <Check
79
- className={classNames(classes.correctnessIcon, classes.correctIcon, classes.smallIcon)}
80
- title={correctness.label}
81
- />
82
- </foreignObject>
83
- );
71
+ renderCorrectnessIcon = (barX, barWidth, correctVal, correctness, classes, scale, pointHeight, pointDiameter) => {
72
+ let iconY;
73
+
74
+ if (correctVal === 0) {
75
+ // if correct value is 0, position icon on the horizontal axis
76
+ iconY = scale.y(0) - ICON_SIZE / 2;
77
+ } else {
78
+ const shapeIndex = correctVal - 1; // the index of the shape representing the correct value
79
+ const shapeCenterY = scale.y(shapeIndex) - (pointHeight - pointDiameter) / 2 - pointDiameter / 2;
80
+ iconY = shapeCenterY - ICON_SIZE / 2; // center the icon
81
+ }
82
+
83
+ return (
84
+ <foreignObject x={barX + barWidth / 2 - ICON_SIZE / 2} y={iconY} width={ICON_SIZE} height={ICON_SIZE}>
85
+ <Check
86
+ className={classNames(classes.correctnessIcon, classes.correctIcon, classes.smallIcon)}
87
+ title={correctness.label}
88
+ />
89
+ </foreignObject>
90
+ );
91
+ };
84
92
 
85
93
  render() {
86
94
  const {
@@ -157,6 +165,21 @@ export class RawPlot extends React.Component {
157
165
  const correctVal = parseFloat(correctData[index] && correctData[index].value);
158
166
  if (isNaN(correctVal)) return null;
159
167
  const selectedVal = v;
168
+
169
+ // special case: if correct value is 0, only show the icon on the axis
170
+ if (correctVal === 0) {
171
+ return this.renderCorrectnessIcon(
172
+ barX,
173
+ barWidth,
174
+ correctVal,
175
+ correctness,
176
+ classes,
177
+ scale,
178
+ pointHeight,
179
+ pointDiameter,
180
+ );
181
+ }
182
+
160
183
  if (selectedVal > correctVal) {
161
184
  // selected is higher than correct: overlay the correct last segment
162
185
  const overlayValues = [];
@@ -183,7 +206,16 @@ export class RawPlot extends React.Component {
183
206
  scale={scale}
184
207
  dottedOverline={true}
185
208
  />
186
- {this.renderCorrectnessIcon(barX, barWidth, correctVal, correctness, classes, scale)}
209
+ {this.renderCorrectnessIcon(
210
+ barX,
211
+ barWidth,
212
+ correctVal,
213
+ correctness,
214
+ classes,
215
+ scale,
216
+ pointHeight,
217
+ pointDiameter,
218
+ )}
187
219
  </>
188
220
  );
189
221
  }
@@ -208,7 +240,16 @@ export class RawPlot extends React.Component {
208
240
  dottedOverline: true,
209
241
  }),
210
242
  )}
211
- {this.renderCorrectnessIcon(barX, barWidth, correctVal, correctness, classes, scale)}
243
+ {this.renderCorrectnessIcon(
244
+ barX,
245
+ barWidth,
246
+ correctVal,
247
+ correctness,
248
+ classes,
249
+ scale,
250
+ pointHeight,
251
+ pointDiameter,
252
+ )}
212
253
  </>
213
254
  );
214
255
  })()}