@pie-lib/charting 5.24.0 → 5.25.0

package/src/line/common/drag-handle.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import classNames from 'classnames';
-import { gridDraggable, utils, types } from '@pie-lib/plot';
+import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles/index';
+
+import { gridDraggable, utils, types } from '@pie-lib/plot';
 import { color } from '@pie-lib/render-ui';
-import PropTypes from 'prop-types';
-import { correct, incorrect, disabled } from '../../common/styles';
+import { disabled } from '../../common/styles';
 
 class RawDragHandle extends React.Component {
   static propTypes = {
@@ -51,11 +52,9 @@ class RawDragHandle extends React.Component {
   }
 }
 
-export const DragHandle = withStyles(() => ({
+export const DragHandle = withStyles((theme) => ({
   handle: {
     transition: 'fill 200ms linear, height 200ms linear',
-    '&.correct': correct('fill'),
-    '&.incorrect': incorrect('fill'),
     '&.non-interactive': disabled('fill'),
   },
   transparentHandle: {
@@ -67,8 +66,32 @@ export const DragHandle = withStyles(() => ({
     stroke: color.defaults.TEXT,
     transition: 'fill 200ms linear, height 200ms linear',
     '&.non-interactive': disabled('stroke'),
-    '&.correct': correct('stroke'),
-    '&.incorrect': incorrect('stroke'),
+  },
+  disabledPoint: {
+    fill: color.defaults.BLACK + ' !important',
+    stroke: color.defaults.BLACK + ' !important',
+  },
+  correctIcon: {
+    backgroundColor: color.correct(),
+  },
+  incorrectIcon: {
+    backgroundColor: color.incorrectWithIcon(),
+  },
+  correctnessIcon: {
+    borderRadius: theme.spacing.unit * 2,
+    color: color.defaults.WHITE,
+    fontSize: '16px',
+    width: '16px',
+    height: '16px',
+    padding: '2px',
+    border: `1px solid ${color.defaults.WHITE}`,
+    stroke: 'initial',
+    boxSizing: 'unset', // to override the default border-box in IBX
+  },
+  smallIcon: {
+    fontSize: '10px',
+    width: '10px',
+    height: '10px',
   },
 }))(RawDragHandle);
 

package/src/line/common/line.jsx

@@ -78,7 +78,7 @@ export class RawLine extends React.Component {
   };
 
   render() {
-    const { graphProps, data, classes, CustomDraggableComponent, defineChart } = this.props;
+    const { graphProps, data, classes, CustomDraggableComponent, defineChart, correctData } = this.props;
     const { line: lineState, dragging } = this.state;
     const { scale } = graphProps;
     const lineToUse = dragging ? lineState : getData(data, graphProps.domain);
@@ -110,6 +110,8 @@ export class RawLine extends React.Component {
                 graphProps={graphProps}
                 CustomDraggableComponent={CustomDraggableComponent}
                 correctness={point.correctness}
+                correctData={correctData}
+                label={point.label}
               />
             );
           })}

package/src/line/line-cross.js

@@ -1,15 +1,17 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { types } from '@pie-lib/plot';
 import { LinePath } from '@vx/shape';
 import { Group } from '@vx/group';
 import classNames from 'classnames';
+
 import { color } from '@pie-lib/render-ui';
 import { dataToXBand } from '../utils';
+import { types } from '@pie-lib/plot';
 import RawLine from './common/line';
+import { CorrectnessIndicator, SmallCorrectPointIndicator } from '../common/correctness-indicators';
 
 const DraggableComponent = (props) => {
-  const { classes = {}, className, scale, x, y, r, correctness, ...rest } = props;
+  const { classes = {}, className, scale, x, y, r, correctness, interactive, correctData, label, ...rest } = props;
   const [hover, setHover] = useState(false);
 
   const squareSize = r * 4;
@@ -18,7 +20,7 @@ const DraggableComponent = (props) => {
   const cy = scale.y(y);
 
   return (
-    <Group className={classNames(className, classes.line, correctness && correctness.value)}>
+    <Group className={classNames(className, classes.line, correctness && !interactive && classes.disabledPoint)}>
       <LinePath
         data={[
           { x: scale.x(x) - r, y: scale.y(y) + r },
@@ -62,6 +64,26 @@ const DraggableComponent = (props) => {
         onMouseLeave={() => setHover(false)}
         {...rest}
       />
+      {/* show correctness indicators */}
+      <CorrectnessIndicator
+        scale={scale}
+        x={x}
+        y={y}
+        classes={classes}
+        r={r}
+        correctness={correctness}
+        interactive={interactive}
+      />
+      {/* show correct point if answer was incorrect */}
+      <SmallCorrectPointIndicator
+        scale={scale}
+        x={x}
+        r={r}
+        correctness={correctness}
+        classes={classes}
+        correctData={correctData}
+        label={label}
+      />
     </Group>
   );
 };

package/src/line/line-dot.js

@@ -1,12 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
 import { types } from '@pie-lib/plot';
 import { color } from '@pie-lib/render-ui';
 import { dataToXBand } from '../utils';
 import RawLine from './common/line';
-import classNames from 'classnames';
+import { CorrectnessIndicator, SmallCorrectPointIndicator } from '../common/correctness-indicators';
 
-const DraggableComponent = ({ scale, x, y, className, classes, r, correctness, interactive, ...rest }) => {
+const DraggableComponent = ({
+  scale,
+  x,
+  y,
+  className,
+  classes,
+  r,
+  correctness,
+  interactive,
+  correctData,
+  label,
+  ...rest
+}) => {
   const [isHovered, setIsHovered] = React.useState(false);
   const allowRolloverEvent = !correctness && interactive;
 
@@ -24,9 +38,32 @@ const DraggableComponent = ({ scale, x, y, className, classes, r, correctness, i
         cx={scale.x(x)}
         cy={scale.y(y)}
         r={r}
-        className={classNames(className, classes.handle, correctness && correctness.value)}
+        className={classNames(className, classes.handle, correctness && !interactive && classes.disabledPoint)}
         {...rest}
       />
+      {/* show correctness indicators */}
+      <CorrectnessIndicator
+        scale={scale}
+        x={x}
+        y={y}
+        classes={classes}
+        r={r}
+        correctness={correctness}
+        interactive={interactive}
+      />
+
+      {/* show correct point if answer was incorrect */}
+      <SmallCorrectPointIndicator
+        scale={scale}
+        x={x}
+        r={r}
+        correctness={correctness}
+        classes={classes}
+        correctData={correctData}
+        label={label}
+      />
+
+      {/* show rollover rectangle */}
       {isHovered && allowRolloverEvent && (
         <rect
           x={scale.x(x) - r * 2}

package/src/mark-label.jsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 import AutosizeInput from 'react-input-autosize';
 import PropTypes from 'prop-types';
+
 import { types } from '@pie-lib/plot';
 import { correct, incorrect, disabled } from './common/styles';
 import { color } from '@pie-lib/render-ui';
@@ -42,6 +43,11 @@ const styles = (theme) => ({
   incorrect: {
     ...incorrect('color'),
   },
+  flexContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
 });
 
 function isFractionFormat(label) {
@@ -89,6 +95,7 @@ export const MarkLabel = (props) => {
     error,
     isHiddenLabel,
     limitCharacters,
+    correctnessIndicator,
   } = props;
 
   const [label, setLabel] = useState(mark.label);
@@ -131,65 +138,72 @@ export const MarkLabel = (props) => {
     renderMath(root);
   }, []);
 
-  return isMathRendering() ? (
-    <div
-      ref={(r) => {
-        root = r;
-        externalInputRef(r);
-      }}
-      dangerouslySetInnerHTML={{ __html: getLabelMathFormat(label) }}
-      className={classNames(classes.mathInput, {
-        [classes.disabled]: disabled,
-        [classes.error]: error,
-        [classes.correct]: mark.editable && correctness?.label === 'correct',
-        [classes.incorrect]: mark.editable && correctness?.label === 'incorrect',
-      })}
-      onClick={() => setIsEditing(true)}
-      style={{
-        minWidth: barWidth,
-        position: 'fixed',
-        transformOrigin: 'left',
-        transform: `rotate(${rotate}deg)`,
-        visibility: isHiddenLabel ? 'hidden' : 'unset',
-      }}
-    ></div>
-  ) : (
-    <AutosizeInput
-      inputRef={(r) => {
-        _ref(r);
-        externalInputRef(r);
-      }}
-      autoFocus={isEditing || autoFocus}
-      disabled={disabled}
-      inputClassName={classNames(
-        classes.input,
-        correctness && mark.editable ? correctness.label : null,
-        disabled && 'disabled',
-        error && 'error',
+  return (
+    <div className={classes.flexContainer}>
+      {correctnessIndicator}
+      {isMathRendering() ? (
+        <div
+          ref={(r) => {
+            root = r;
+            externalInputRef(r);
+          }}
+          dangerouslySetInnerHTML={{ __html: getLabelMathFormat(label) }}
+          className={classNames(classes.mathInput, {
+            [classes.disabled]: disabled,
+            [classes.error]: error,
+            [classes.correct]: mark.editable && correctness?.label === 'correct',
+            [classes.incorrect]: mark.editable && correctness?.label === 'incorrect',
+          })}
+          onClick={() => setIsEditing(true)}
+          style={{
+            minWidth: barWidth,
+            position: 'fixed',
+            transformOrigin: 'left',
+            transform: `rotate(${rotate}deg)`,
+            visibility: isHiddenLabel ? 'hidden' : 'unset',
+            marginTop: correctnessIndicator ? '24px' : '0',
+          }}
+        ></div>
+      ) : (
+        <AutosizeInput
+          inputRef={(r) => {
+            _ref(r);
+            externalInputRef(r);
+          }}
+          autoFocus={isEditing || autoFocus}
+          disabled={disabled}
+          inputClassName={classNames(
+            classes.input,
+            correctness && mark.editable ? correctness.label : null,
+            disabled && 'disabled',
+            error && 'error',
+          )}
+          inputStyle={{
+            minWidth: barWidth,
+            textAlign: 'center',
+            background: 'transparent',
+            boxSizing: 'border-box',
+            paddingLeft: 0,
+            paddingRight: 0,
+            ...extraStyle,
+          }}
+          value={label}
+          style={{
+            position: 'fixed',
+            pointerEvents: 'auto',
+            top: 0,
+            left: 0,
+            minWidth: barWidth,
+            transformOrigin: 'left',
+            transform: `rotate(${rotate}deg)`,
+            visibility: isHiddenLabel ? 'hidden' : 'unset',
+            marginTop: correctnessIndicator ? '24px' : '0',
+          }}
+          onChange={onChange}
+          onBlur={onChangeProp}
+        />
       )}
-      inputStyle={{
-        minWidth: barWidth,
-        textAlign: 'center',
-        background: 'transparent',
-        boxSizing: 'border-box',
-        paddingLeft: 0,
-        paddingRight: 0,
-        ...extraStyle,
-      }}
-      value={label}
-      style={{
-        position: 'fixed',
-        pointerEvents: 'auto',
-        top: 0,
-        left: 0,
-        minWidth: barWidth,
-        transformOrigin: 'left',
-        transform: `rotate(${rotate}deg)`,
-        visibility: isHiddenLabel ? 'hidden' : 'unset',
-      }}
-      onChange={onChange}
-      onBlur={onChangeProp}
-    />
+    </div>
   );
 };
 
@@ -210,6 +224,7 @@ MarkLabel.propTypes = {
   }),
   isHiddenLabel: PropTypes.bool,
   limitCharacters: PropTypes.bool,
+  correctnessIndicator: PropTypes.node,
 };
 
 export default withStyles(styles)(MarkLabel);

package/src/plot/common/__tests__/__snapshots__/plot.test.jsx.snap

@@ -88,6 +88,7 @@ exports[`RawPlot snapshot renders 1`] = `
         }
       }
       isHovered={false}
+      isPlot={true}
       onDrag={[Function]}
       onDragStop={[Function]}
     />

package/src/plot/common/plot.jsx

@@ -1,15 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { types } from '@pie-lib/plot';
-import { Group } from '@vx/group';
+import classNames from 'classnames';
+import Check from '@material-ui/icons/Check';
 import { withStyles } from '@material-ui/core/styles/index';
-import DraggableHandle, { DragHandle } from '../../common/drag-handle';
+import { Group } from '@vx/group';
 import debug from 'debug';
+
+import { types } from '@pie-lib/plot';
+import DraggableHandle, { DragHandle } from '../../common/drag-handle';
 import { color } from '@pie-lib/render-ui';
 import { bandKey } from '../../utils';
 import { correct, incorrect } from '../../common/styles';
 
 const log = debug('pie-lib:chart:bars');
+const ICON_SIZE = 16; // 10px icon + 2px padding on all sides + 1px border
 
 export class RawPlot extends React.Component {
   static propTypes = {
@@ -64,6 +68,20 @@ export class RawPlot extends React.Component {
     this.setDragValue(next);
   };
 
+  renderCorrectnessIcon = (barX, barWidth, correctVal, correctness, classes, scale) => (
+    <foreignObject
+      x={barX + barWidth / 2 - ICON_SIZE / 2}
+      y={scale.y(correctVal) + ICON_SIZE}
+      width={ICON_SIZE}
+      height={ICON_SIZE}
+    >
+      <Check
+        className={classNames(classes.correctnessIcon, classes.correctIcon, classes.smallIcon)}
+        title={correctness.label}
+      />
+    </foreignObject>
+  );
+
   render() {
     const {
       graphProps,
@@ -76,6 +94,7 @@ export class RawPlot extends React.Component {
       interactive,
       correctness,
       defineChart,
+      correctData,
     } = this.props;
 
     const { scale, range, size } = graphProps;
@@ -132,6 +151,67 @@ export class RawPlot extends React.Component {
               scale,
             }),
           )}
+          {correctness &&
+            correctness.value === 'incorrect' &&
+            (() => {
+              const correctVal = parseFloat(correctData[index] && correctData[index].value);
+              if (isNaN(correctVal)) return null;
+              const selectedVal = v;
+              if (selectedVal > correctVal) {
+                // selected is higher than correct: overlay the correct last segment
+                const overlayValues = [];
+                for (let i = 0; i < correctVal; i++) {
+                  overlayValues.push(i);
+                }
+                const lastIndexOfOverlay = overlayValues.length - 1;
+                const lastOverlayValue = overlayValues[lastIndexOfOverlay];
+                const barX = xBand(bandKey({ label }, index));
+                const barWidth = xBand.bandwidth();
+                const pointHeight = size.height / max;
+                const pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;
+                return (
+                  <>
+                    <CustomBarElement
+                      index={lastOverlayValue}
+                      pointDiameter={pointDiameter + 10} // increase point diameter for dotted line
+                      barX={barX}
+                      barWidth={barWidth}
+                      pointHeight={pointHeight}
+                      label={label}
+                      value={value}
+                      classes={classes}
+                      scale={scale}
+                      dottedOverline={true}
+                    />
+                    {this.renderCorrectnessIcon(barX, barWidth, correctVal, correctness, classes, scale)}
+                  </>
+                );
+              }
+              // selected is lower than correct, render missing segment below the correct bar
+              const valuesToRender = [];
+              for (let i = selectedVal; i < correctVal; i++) {
+                valuesToRender.push(i);
+              }
+              return (
+                <>
+                  {valuesToRender.map((idx) =>
+                    CustomBarElement({
+                      index: idx,
+                      pointDiameter,
+                      barX,
+                      barWidth,
+                      pointHeight,
+                      label,
+                      value,
+                      classes,
+                      scale,
+                      dottedOverline: true,
+                    }),
+                  )}
+                  {this.renderCorrectnessIcon(barX, barWidth, correctVal, correctness, classes, scale)}
+                </>
+              );
+            })()}
           <Component
             x={barX}
             y={v}
@@ -144,6 +224,7 @@ export class RawPlot extends React.Component {
             isHovered={isHovered}
             defineChart={defineChart}
             color={color.primaryDark()}
+            isPlot
           />
         </g>
       </React.Fragment>
@@ -151,17 +232,44 @@ export class RawPlot extends React.Component {
   }
 }
 
-const Bar = withStyles(() => ({
+const Bar = withStyles((theme) => ({
   dot: {
     fill: color.visualElementsColors.PLOT_FILL_COLOR,
     '&.correct': correct('stroke'),
     '&.incorrect': incorrect('stroke'),
   },
+  dotColor: {
+    fill: color.visualElementsColors.PLOT_FILL_COLOR,
+    '&.correct': correct('fill'),
+    '&.incorrect': incorrect('fill'),
+  },
   line: {
     stroke: color.visualElementsColors.PLOT_FILL_COLOR,
     '&.correct': correct('stroke'),
     '&.incorrect': incorrect('stroke'),
   },
+  correctIcon: {
+    backgroundColor: color.correct(),
+  },
+  incorrectIcon: {
+    backgroundColor: color.incorrectWithIcon(),
+  },
+  correctnessIcon: {
+    borderRadius: theme.spacing.unit * 2,
+    color: color.defaults.WHITE,
+    fontSize: '16px',
+    width: '16px',
+    height: '16px',
+    padding: '2px',
+    border: `1px solid ${color.defaults.WHITE}`,
+    stroke: 'initial',
+    boxSizing: 'unset', // to override the default border-box in IBX
+  },
+  smallIcon: {
+    fontSize: '10px',
+    width: '10px',
+    height: '10px',
+  },
 }))(RawPlot);
 
 export class Plot extends React.Component {
@@ -175,7 +283,7 @@ export class Plot extends React.Component {
   };
 
   render() {
-    const { data, graphProps, xBand, CustomBarElement, onChangeCategory, defineChart } = this.props;
+    const { data, graphProps, xBand, CustomBarElement, onChangeCategory, defineChart, correctData } = this.props;
 
     return (
       <Group>
@@ -192,6 +300,7 @@ export class Plot extends React.Component {
             graphProps={graphProps}
             CustomBarElement={CustomBarElement}
             correctness={d.correctness}
+            correctData={correctData}
           />
         ))}
       </Group>

package/src/plot/dot.js

@@ -1,18 +1,33 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Circle } from '@vx/shape';
+
 import { types } from '@pie-lib/plot';
 import { dataToXBand } from '../utils';
 import Plot from './common/plot';
-import { Circle } from '@vx/shape';
+import { color } from '@pie-lib/render-ui';
 
 const CustomBarElement = (props) => {
-  const { index, pointDiameter, barX, barWidth, pointHeight, label, value, classes, scale } = props;
+  const { index, pointDiameter, barX, barWidth, pointHeight, label, value, classes, scale, dottedOverline } = props;
 
   const r = pointDiameter / 2;
   const cx = barX + (barWidth - pointDiameter) / 2 + r;
   const cy = scale.y(index) - (pointHeight - pointDiameter) / 2 - r;
+  const EXTRA_PADDING = 2;
 
-  return <Circle key={`point-${label}-${value}-${index}`} className={classes.dot} cx={cx} cy={cy} r={r} />;
+  return dottedOverline ? (
+    <Circle
+      key={`point-${label}-${value}-${index}`}
+      cx={cx}
+      cy={cy}
+      r={r + EXTRA_PADDING}
+      strokeDasharray="4,4"
+      stroke={color.defaults.BORDER_GRAY}
+      fill="none"
+    />
+  ) : (
+    <Circle key={`point-${label}-${value}-${index}`} className={classes.dot} cx={cx} cy={cy} r={r} />
+  );
 };
 
 CustomBarElement.propTypes = {
@@ -25,6 +40,7 @@ CustomBarElement.propTypes = {
   label: PropTypes.string,
   classes: PropTypes.object,
   scale: PropTypes.object,
+  dottedOverline: PropTypes.bool,
 };
 
 export class DotPlot extends React.Component {

package/src/plot/line.js

@@ -1,18 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { LinePath } from '@vx/shape';
+import { Group } from '@vx/group';
+
 import { types } from '@pie-lib/plot';
 import { dataToXBand } from '../utils';
+import { color } from '@pie-lib/render-ui';
 import Plot from './common/plot';
-import { LinePath } from '@vx/shape';
-import { Group } from '@vx/group';
 
 const CustomBarElement = (props) => {
-  const { index, pointDiameter, barX, barWidth, pointHeight, label, value, classes, scale } = props;
+  const { index, pointDiameter, barX, barWidth, pointHeight, label, value, classes, scale, dottedOverline } = props;
 
   const x = barX + (barWidth - pointDiameter) / 2;
   const y = scale.y(index) - (pointHeight - pointDiameter) / 2;
+  const EXTRA_PADDING = 2;
 
-  return (
+  return dottedOverline ? (
+    <rect
+      key={`point-${label}-${value}-${index}`}
+      x={x - EXTRA_PADDING}
+      y={y - pointDiameter - EXTRA_PADDING}
+      width={pointDiameter + EXTRA_PADDING * 2}
+      height={pointDiameter + EXTRA_PADDING * 2}
+      strokeDasharray="4,4"
+      stroke={color.defaults.BORDER_GRAY}
+      fill="none"
+    />
+  ) : (
     <Group>
       <LinePath
         data={[