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

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;
@@ -98,17 +117,25 @@ export class RawPlot extends React.Component {
     const pointHeight = size.height / max;
     const pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;
     const Component = interactive ? DraggableHandle : DragHandle;
+    const allowRolloverEvent = interactive && !correctness;
 
     return (
       <React.Fragment>
-        <g onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
-          {isHovered && (
+        <g
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+          onTouchStart={this.handleMouseEnter}
+          onTouchEnd={this.handleMouseLeave}
+        >
+          {isHovered && allowRolloverEvent && (
             <rect
               x={barX}
               y={scale.y(v)}
               width={barWidth}
               height={values?.length ? pointHeight * values.length : 0}
-              style={{ fill: '#E5E8F5' }}
+              stroke={color.defaults.BORDER_GRAY}
+              strokeWidth={'4px'}
+              fill={'transparent'}
             />
           )}
           {values.map((index) =>
@@ -124,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}
@@ -136,6 +224,7 @@ export class RawPlot extends React.Component {
             isHovered={isHovered}
             defineChart={defineChart}
             color={color.primaryDark()}
+            isPlot
           />
         </g>
       </React.Fragment>
@@ -143,17 +232,44 @@ export class RawPlot extends React.Component {
   }
 }
 
-const Bar = withStyles(() => ({
+const Bar = withStyles((theme) => ({
   dot: {
-    fill: color.primaryLight(),
+    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.primaryLight(),
+    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 {
@@ -167,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>
@@ -184,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={[

package/src/tool-menu.jsx

@@ -12,12 +12,8 @@ const { translator } = Translator;
 
 const buttonStyles = (theme) => ({
   root: {
-    backgroundColor: color.background(),
     color: color.text(),
     border: `1px solid ${color.secondary()}`,
-    '&:hover': {
-      backgroundColor: color.secondaryLight(),
-    },
     fontSize: theme.typography.fontSize,
   },
   selected: {