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

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

@@ -0,0 +1,143 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Line snapshot renders 1`] = `
+<t>
+  <WithStyles(RawLine)
+    className="className"
+    classes={Object {}}
+    data={
+      Array [
+        Object {
+          "label": "0",
+          "value": 0,
+        },
+      ]
+    }
+    graphProps={
+      Object {
+        "domain": Object {
+          "max": 1,
+          "min": 0,
+          "step": 1,
+        },
+        "range": Object {
+          "max": 1,
+          "min": 0,
+          "step": 1,
+        },
+        "scale": Object {
+          "x": [MockFunction],
+          "y": [MockFunction],
+        },
+        "size": Object {
+          "height": 400,
+          "width": 400,
+        },
+        "snap": Object {
+          "x": [MockFunction],
+          "y": [MockFunction],
+        },
+      }
+    }
+    onChange={[Function]}
+    xBand={[Function]}
+  />
+</t>
+`;
+
+exports[`RawLine snapshot renders 1`] = `
+<Fragment>
+  <u
+    data={
+      Array [
+        Object {
+          "label": "A",
+          "value": 0,
+          "x": 0,
+          "y": 0,
+        },
+        Object {
+          "label": "B",
+          "value": 1,
+          "x": 1,
+          "y": 1,
+        },
+      ]
+    }
+    x={[Function]}
+    y={[Function]}
+  />
+  <WithStyles(RawDragHandle)
+    graphProps={
+      Object {
+        "domain": Object {
+          "max": 1,
+          "min": 0,
+          "step": 1,
+        },
+        "range": Object {
+          "max": 1,
+          "min": 0,
+          "step": 1,
+        },
+        "scale": Object {
+          "x": [MockFunction],
+          "y": [MockFunction],
+        },
+        "size": Object {
+          "height": 400,
+          "width": 400,
+        },
+        "snap": Object {
+          "x": [MockFunction],
+          "y": [MockFunction],
+        },
+      }
+    }
+    key="point-0-0"
+    label="A"
+    onDrag={[Function]}
+    onDragStart={[Function]}
+    onDragStop={[Function]}
+    r={6}
+    x={0}
+    y={0}
+  />
+  <WithStyles(RawDragHandle)
+    graphProps={
+      Object {
+        "domain": Object {
+          "max": 1,
+          "min": 0,
+          "step": 1,
+        },
+        "range": Object {
+          "max": 1,
+          "min": 0,
+          "step": 1,
+        },
+        "scale": Object {
+          "x": [MockFunction],
+          "y": [MockFunction],
+        },
+        "size": Object {
+          "height": 400,
+          "width": 400,
+        },
+        "snap": Object {
+          "x": [MockFunction],
+          "y": [MockFunction],
+        },
+      }
+    }
+    key="point-1-1"
+    label="B"
+    onDrag={[Function]}
+    onDragStart={[Function]}
+    onDragStop={[Function]}
+    r={6}
+    x={1}
+    y={1}
+  />
+</Fragment>
+`;

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

@@ -0,0 +1,88 @@
+import { shallow } from 'enzyme/build';
+import React from 'react';
+import DragHandle from '../drag-handle';
+import { gridDraggable } from '@pie-lib/plot';
+import { graphProps } from './utils';
+import { bounds } from '../../../utils';
+
+jest.mock('../../../utils', () => {
+  const { point } = jest.requireActual('../../../utils');
+  return {
+    bounds: jest.fn(),
+    point,
+  };
+});
+
+jest.mock('@pie-lib/plot', () => {
+  const { types, utils } = jest.requireActual('@pie-lib/plot');
+  return {
+    gridDraggable: jest.fn((opts) => (Comp) => Comp),
+    types,
+    utils,
+  };
+});
+
+describe('BasePoint', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: graphProps(),
+      x: 0,
+      y: 0,
+      width: 100,
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<DragHandle {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+  describe('gridDraggable options', () => {
+    let opts;
+    let domain;
+    let range;
+    beforeEach(() => {
+      domain = {
+        min: 0,
+        max: 1,
+        step: 1,
+      };
+      range = {
+        min: 0,
+        max: 1,
+        step: 1,
+      };
+      const w = wrapper();
+      opts = gridDraggable.mock.calls[0][0];
+    });
+
+    describe('bounds', () => {
+      it('calls utils.bounds with area', () => {
+        const result = opts.bounds({ x: 0, y: 0 }, { domain, range });
+
+        expect(result).toEqual({ left: 0, top: 1, bottom: 0, right: 1 });
+      });
+    });
+    describe('anchorPoint', () => {
+      it('returns x/y', () => {
+        const result = opts.anchorPoint({ x: 0, y: 0 });
+        expect(result).toEqual({ x: 0, y: 0 });
+      });
+    });
+
+    describe('fromDelta', () => {
+      it('returns y coordinate of a new point from the x/y + delta', () => {
+        const result = opts.fromDelta({ x: -1, y: 0 }, { x: 1, y: 3 });
+        expect(result).toEqual(3);
+      });
+    });
+  });
+});

package/src/line/common/__tests__/line.test.jsx

@@ -0,0 +1,82 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import Line, { RawLine } from '../line';
+import { graphProps } from './utils';
+
+describe('Line', () => {
+  const xBand = () => {};
+  xBand.bandwidth = () => {};
+  const onChange = jest.fn();
+
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+      xBand,
+      onChange,
+      data: [{ value: 0, label: '0' }],
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<Line {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => expect(wrapper()).toMatchSnapshot());
+  });
+
+  describe('logic', () => {
+    it('changeLine', () => {
+      const w = wrapper();
+
+      w.instance().changeLine(0, { dragValue: 1, label: '0' });
+
+      expect(onChange).toHaveBeenCalledWith([{ value: 1, label: '0' }]);
+    });
+  });
+});
+
+describe('RawLine', () => {
+  const xBand = () => {};
+  xBand.bandwidth = () => {};
+  const onChange = jest.fn();
+
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+      xBand,
+      onChange,
+      data: [
+        { label: 'A', value: 0 },
+        { label: 'B', value: 1 },
+      ],
+      label: 'label',
+      CustomBarElement: () => <div />,
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<RawLine {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => expect(wrapper()).toMatchSnapshot());
+  });
+
+  describe('logic', () => {
+    const w = wrapper();
+
+    it('dragStop', () => {
+      w.instance().setState({
+        line: [
+          { x: 0, y: 0, dragValue: 2 },
+          { x: 1, y: 1 },
+        ],
+      });
+
+      w.instance().dragStop(0);
+
+      expect(onChange).toHaveBeenCalledWith(0, { x: 0, y: 0, dragValue: 2 });
+    });
+  });
+});

package/src/line/common/__tests__/utils.js

@@ -0,0 +1,30 @@
+export const scaleMock = () => {
+  const fn = jest.fn((n) => n);
+  fn.invert = jest.fn((n) => n);
+  return fn;
+};
+
+export const graphProps = (dmin = 0, dmax = 1, rmin = 0, rmax = 1) => ({
+  scale: {
+    x: scaleMock(),
+    y: scaleMock(),
+  },
+  snap: {
+    x: jest.fn((n) => n),
+    y: jest.fn((n) => n),
+  },
+  domain: {
+    min: dmin,
+    max: dmax,
+    step: 1,
+  },
+  range: {
+    min: rmin,
+    max: rmax,
+    step: 1,
+  },
+  size: {
+    width: 400,
+    height: 400,
+  },
+});

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 = {
@@ -44,32 +45,53 @@ class RawDragHandle extends React.Component {
         classes={classes}
         className={classNames(className, !interactive && 'non-interactive')}
         correctness={correctness}
+        interactive={interactive}
         {...rest}
       />
     );
   }
 }
 
-export const DragHandle = withStyles(() => ({
+export const DragHandle = withStyles((theme) => ({
   handle: {
-    fill: color.secondary(),
     transition: 'fill 200ms linear, height 200ms linear',
-    '&:hover': {
-      fill: color.secondaryDark(),
-    },
-    '&.correct': correct('fill'),
-    '&.incorrect': incorrect('fill'),
     '&.non-interactive': disabled('fill'),
   },
+  transparentHandle: {
+    height: '20px',
+    fill: 'transparent',
+    stroke: 'transparent',
+  },
   line: {
-    stroke: color.secondary(),
+    stroke: color.defaults.TEXT,
     transition: 'fill 200ms linear, height 200ms linear',
-    '&:hover': {
-      stroke: color.secondaryDark(),
-    },
     '&.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}
               />
             );
           })}
@@ -121,13 +123,9 @@ export class RawLine extends React.Component {
 const StyledLine = withStyles(() => ({
   line: {
     fill: 'transparent',
-    stroke: color.primaryLight(),
+    stroke: color.defaults.TERTIARY,
     strokeWidth: 3,
     transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',
-    '&:hover': {
-      strokeWidth: 6,
-      stroke: color.primaryDark(),
-    },
   },
 }))(RawLine);
 

package/src/line/line-cross.js

@@ -1,17 +1,26 @@
-import React from 'react';
+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;
+  const squareHalf = squareSize / 2;
+  const cx = scale.x(x);
+  const cy = scale.y(y);
 
   return (
-    <Group {...rest} 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 },
@@ -21,6 +30,7 @@ const DraggableComponent = (props) => {
         x={(d) => d.x}
         y={(d) => d.y}
         strokeWidth={5}
+        style={{ pointerEvents: 'none' }}
       />
       <LinePath
         data={[
@@ -31,6 +41,48 @@ const DraggableComponent = (props) => {
         x={(d) => d.x}
         y={(d) => d.y}
         strokeWidth={5}
+        style={{ pointerEvents: 'none' }}
+      />
+      {hover && (
+        <rect
+          x={cx - squareHalf}
+          y={cy - squareHalf}
+          width={squareSize}
+          height={squareSize}
+          stroke={color.defaults.BORDER_GRAY}
+          fill="none"
+          strokeWidth={2}
+          pointerEvents="none"
+        />
+      )}
+      <circle
+        cx={cx}
+        cy={cy}
+        r={r * 2}
+        className={classNames(classes.transparentHandle)}
+        onMouseEnter={() => setHover(true)}
+        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,19 +1,83 @@
 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,
+  correctData,
+  label,
+  ...rest
+}) => {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const allowRolloverEvent = !correctness && interactive;
 
-const DraggableComponent = ({ scale, x, y, className, classes, r, correctness, ...rest }) => (
-  <circle
-    cx={scale.x(x)}
-    cy={scale.y(y)}
-    r={r}
-    className={classNames(className, classes.handle, correctness && correctness.value)}
-    {...rest}
-  />
-);
+  return (
+    <g onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+      <circle
+        cx={scale.x(x)}
+        cy={scale.y(y)}
+        r={r * 3}
+        className={classNames(classes.transparentHandle, className)}
+        pointerEvents={correctness ? 'none' : ''}
+        {...rest}
+      />
+      <circle
+        cx={scale.x(x)}
+        cy={scale.y(y)}
+        r={r}
+        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}
+          y={scale.y(y) - r * 2}
+          width={r * 4}
+          height={r * 4}
+          stroke={color.defaults.BORDER_GRAY}
+          strokeWidth="1"
+          fill="none"
+        />
+      )}
+    </g>
+  );
+};
 
 DraggableComponent.propTypes = {
   scale: PropTypes.object,