@pie-lib/charting 7.0.4-next.30 → 7.0.4-next.34

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

@@ -0,0 +1,114 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+
+import { gridDraggable, types, utils } from '@pie-lib/plot';
+import { color } from '@pie-lib/render-ui';
+import { disabled } from '../../common/styles';
+
+const StyledDragHandle = styled('g')(({ theme }) => ({
+  color: 'black',
+  '& .handle': {
+    transition: 'fill 200ms linear, height 200ms linear',
+    '&.non-interactive': disabled('fill'),
+  },
+  '& .transparentHandle': {
+    height: '20px',
+    fill: 'transparent',
+    stroke: 'transparent',
+  },
+  '& .line': {
+    stroke: color.defaults.TEXT,
+    transition: 'fill 200ms linear, height 200ms linear',
+    '&.non-interactive': disabled('stroke'),
+  },
+  '& .disabledPoint': {
+    fill: color.defaults.BLACK + ' !important',
+    stroke: color.defaults.BLACK + ' !important',
+  },
+  '& .correctIcon': {
+    backgroundColor: color.correct(),
+  },
+  '& .incorrectIcon': {
+    backgroundColor: color.incorrectWithIcon(),
+  },
+  '& .correctnessIcon': {
+    borderRadius: theme.spacing(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',
+  },
+}));
+
+class RawDragHandle extends React.Component {
+  static propTypes = {
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
+    width: PropTypes.number,
+    graphProps: types.GraphPropsType.isRequired,
+    className: PropTypes.string,
+    interactive: PropTypes.bool,
+    CustomDraggableComponent: PropTypes.func,
+    correctness: PropTypes.shape({
+      value: PropTypes.string,
+      label: PropTypes.string,
+    }),
+  };
+
+  render() {
+    const { x, y, graphProps, className, interactive, CustomDraggableComponent, correctness, ...rest } = this.props;
+    const { scale } = graphProps;
+
+    if (!CustomDraggableComponent) {
+      return null;
+    }
+
+    return (
+      <StyledDragHandle>
+        <CustomDraggableComponent
+          scale={scale}
+          x={x}
+          y={y}
+          className={classNames(className, !interactive && 'non-interactive')}
+          correctness={correctness}
+          interactive={interactive}
+          {...rest}
+        />
+      </StyledDragHandle>
+    );
+  }
+}
+
+export const DragHandle = RawDragHandle;
+
+const DraggableHandle = gridDraggable({
+  axis: 'y',
+  fromDelta: (props, delta) => {
+    //TODO: should be in grid-draggable, if axis is y delta.x should always be 0.
+    delta.x = 0;
+    const newPoint = utils.point(props).add(utils.point(delta));
+
+    return newPoint.y;
+  },
+  bounds: (props, { domain, range }) => {
+    const area = { left: 0, top: props.y, bottom: props.y, right: 0 };
+
+    return utils.bounds(area, domain, range);
+  },
+  anchorPoint: (props) => {
+    return { x: props.x, y: props.y };
+  },
+})(DragHandle);
+
+export default DraggableHandle;

package/src/line/common/line.jsx

@@ -0,0 +1,171 @@
+import React from 'react';
+import { Group } from '@visx/group';
+import { LinePath } from '@visx/shape';
+import PropTypes from 'prop-types';
+import { types } from '@pie-lib/plot';
+import DraggableHandle, { DragHandle } from './drag-handle';
+import { styled } from '@mui/material/styles';
+import { isEqual } from 'lodash-es';
+import { color } from '@pie-lib/render-ui';
+
+const getData = (data, domain) => {
+  const { max } = domain || {};
+  const length = data.length;
+
+  if (!max || !length) {
+    return [];
+  }
+
+  return data.map((el, i) => ({
+    ...el,
+    x: length > 1 ? i * (max / (length - 1)) : 0.5,
+    y: el.value,
+  }));
+};
+
+const StyledLinePath = styled(LinePath)(() => ({
+  fill: 'transparent',
+  stroke: color.defaults.TERTIARY,
+  strokeWidth: 3,
+  transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',
+}));
+
+export class RawLine extends React.Component {
+  static propTypes = {
+    onChange: PropTypes.func,
+    value: PropTypes.number,
+    label: PropTypes.string,
+    xBand: PropTypes.func,
+    index: PropTypes.number.isRequired,
+    graphProps: types.GraphPropsType.isRequired,
+    defineChart: PropTypes.bool,
+    data: PropTypes.arrayOf(
+      PropTypes.shape({
+        label: PropTypes.string,
+        value: PropTypes.number,
+      }),
+    ),
+    CustomDraggableComponent: PropTypes.func,
+    correctData: PropTypes.array,
+  };
+
+  static defaultProps = {
+    index: 0,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      dragValue: undefined,
+      line: getData(props.data, props.graphProps.domain),
+    };
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!isEqual(this.props.data, nextProps.data)) {
+      this.setState({
+        line: getData(nextProps.data, nextProps.graphProps.domain),
+      });
+    }
+  }
+
+  setDragValue = (line) => this.setState({ line });
+
+  dragStop = (index) => {
+    const { onChange } = this.props;
+    this.setState({ dragging: false }, () => {
+      onChange(index, this.state.line[index]);
+    });
+  };
+
+  dragValue = (index, existing, next) => {
+    const newLine = [...this.state.line];
+    newLine[index].dragValue = next;
+    this.setDragValue(newLine);
+  };
+
+  render() {
+    const { graphProps, data, CustomDraggableComponent, defineChart, correctData } = this.props;
+    const { line: lineState, dragging } = this.state;
+    const { scale } = graphProps;
+    const lineToUse = dragging ? lineState : getData(data, graphProps.domain);
+
+    return (
+      <React.Fragment>
+        <StyledLinePath
+          data={lineToUse}
+          x={(d) => scale.x(d.x)}
+          y={(d) => scale.y(d.dragValue !== undefined ? d.dragValue : d.y)}
+          className="line"
+        />
+        {lineToUse &&
+          lineToUse.map((point, i) => {
+            const r = 6;
+            const enableDraggable = defineChart || point.interactive;
+            const Component = enableDraggable ? DraggableHandle : DragHandle;
+
+            return (
+              <Component
+                key={`point-${point.x}-${i}`}
+                x={point.x}
+                y={point.dragValue !== undefined ? point.dragValue : point.y}
+                interactive={enableDraggable}
+                r={r}
+                onDragStart={() => this.setState({ dragging: true })}
+                onDrag={(v) => this.dragValue(i, point.dragValue !== undefined ? point.dragValue : point.y, v)}
+                onDragStop={() => this.dragStop(i)}
+                graphProps={graphProps}
+                CustomDraggableComponent={CustomDraggableComponent}
+                correctness={point.correctness}
+                correctData={correctData}
+                label={point.label}
+              />
+            );
+          })}
+      </React.Fragment>
+    );
+  }
+}
+
+const StyledLine = styled(RawLine)(() => ({
+  '& .line': {
+    fill: 'transparent',
+    stroke: color.defaults.TERTIARY,
+    strokeWidth: 3,
+    transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',
+  },
+}));
+
+export class Line extends React.Component {
+  static propTypes = {
+    data: PropTypes.array,
+    onChange: PropTypes.func,
+    xBand: PropTypes.func,
+    graphProps: types.GraphPropsType.isRequired,
+    CustomDraggableComponent: PropTypes.func,
+    defineChart: PropTypes.bool,
+    correctData: PropTypes.array,
+  };
+
+  changeLine = (index, category) => {
+    const { onChange } = this.props;
+    const newLine = [...this.props.data];
+    const { dragValue, value } = category;
+
+    newLine[index].value = dragValue >= 0 ? dragValue : value;
+
+    onChange(newLine);
+  };
+
+  render() {
+    const props = this.props;
+
+    return (
+      <Group>
+        <StyledLine {...props} onChange={this.changeLine} />
+      </Group>
+    );
+  }
+}
+
+export default Line;

package/src/line/line-cross.js

@@ -0,0 +1,144 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { LinePath } from '@visx/shape';
+import { Group } from '@visx/group';
+import { styled } from '@mui/material/styles';
+
+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 StyledLinePath = styled(LinePath)(() => ({
+  stroke: color.defaults.TEXT,
+  transition: 'fill 200ms linear, height 200ms linear',
+  '&.non-interactive': {
+    stroke: color.disabled?.() || '#ccc',
+  },
+}));
+
+const StyledGroup = styled(Group)(({ correctness, interactive }) => ({
+  stroke: color.defaults.TEXT,
+  transition: 'fill 200ms linear, height 200ms linear',
+  ...(correctness &&
+    !interactive && {
+      fill: `${color.defaults.BLACK} !important`,
+      stroke: `${color.defaults.BLACK} !important`,
+    }),
+  '&.non-interactive': {
+    stroke: color.disabled?.() || '#ccc',
+  },
+}));
+
+const StyledTransparentHandle = styled('circle')(() => ({
+  height: '20px',
+  fill: 'transparent',
+  stroke: 'transparent',
+}));
+
+const DraggableComponent = (props) => {
+  const { 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 (
+    <StyledGroup className={className} correctness={correctness} interactive={interactive}>
+      <StyledLinePath
+        data={[
+          { x: scale.x(x) - r, y: scale.y(y) + r },
+          { x: scale.x(x) + r, y: scale.y(y) - r },
+        ]}
+        key={`point-${x}-${y}-1`}
+        x={(d) => d.x}
+        y={(d) => d.y}
+        strokeWidth={5}
+        style={{ pointerEvents: 'none' }}
+      />
+      <StyledLinePath
+        data={[
+          { x: scale.x(x) - r, y: scale.y(y) - r },
+          { x: scale.x(x) + r, y: scale.y(y) + r },
+        ]}
+        key={`point-${x}-${y}-2`}
+        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"
+        />
+      )}
+      <StyledTransparentHandle
+        cx={cx}
+        cy={cy}
+        r={r * 2}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+        {...rest}
+      />
+      {/* show correctness indicators */}
+      <CorrectnessIndicator scale={scale} x={x} y={y} r={r} correctness={correctness} interactive={interactive} />
+      {/* show correct point if answer was incorrect */}
+      <SmallCorrectPointIndicator
+        scale={scale}
+        x={x}
+        r={r}
+        correctness={correctness}
+        correctData={correctData}
+        label={label}
+      />
+    </StyledGroup>
+  );
+};
+
+DraggableComponent.propTypes = {
+  scale: PropTypes.object,
+  x: PropTypes.number,
+  y: PropTypes.number,
+  r: PropTypes.number,
+  className: PropTypes.string,
+  correctness: PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string,
+  }),
+  interactive: PropTypes.bool,
+  correctData: PropTypes.array,
+  label: PropTypes.string,
+};
+
+export class LineCross extends React.Component {
+  static propTypes = {
+    data: PropTypes.array,
+    onChange: PropTypes.func,
+    graphProps: types.GraphPropsType.isRequired,
+  };
+
+  render() {
+    const props = this.props;
+    const { data, graphProps } = props;
+    const { scale = {}, size = {} } = graphProps || {};
+    const xBand = dataToXBand(scale.x, data, size.width, 'lineCross');
+
+    return <RawLine {...props} xBand={xBand} CustomDraggableComponent={DraggableComponent} />;
+  }
+}
+
+export default () => ({
+  type: 'lineCross',
+  Component: LineCross,
+  name: 'Line Cross',
+});

package/src/line/line-dot.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+
+import { types } from '@pie-lib/plot';
+import { color } from '@pie-lib/render-ui';
+import { dataToXBand } from '../utils';
+import RawLine from './common/line';
+import { CorrectnessIndicator, SmallCorrectPointIndicator } from '../common/correctness-indicators';
+
+const StyledHandle = styled('circle')(() => ({}));
+
+const StyledTransparentHandle = styled('circle')(() => ({
+  height: '20px',
+  fill: 'transparent', // keep it invisible
+  stroke: 'none',
+  pointerEvents: 'auto', // allow drag events
+}));
+
+const DraggableComponent = ({ scale, x, y, r, correctness, interactive, correctData, label, ...rest }) => {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const allowRolloverEvent = !correctness && interactive;
+
+  return (
+    <g
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onTouchStart={() => setIsHovered(true)}
+      onTouchEnd={() => setIsHovered(false)}
+    >
+      <StyledTransparentHandle
+        cx={scale.x(x)}
+        cy={scale.y(y)}
+        r={r * 3}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        {...rest}
+      />
+      <StyledHandle
+        cx={scale.x(x)}
+        cy={scale.y(y)}
+        r={r}
+        correctness={correctness}
+        interactive={interactive}
+        {...rest}
+      />
+      {/* show correctness indicators */}
+      <CorrectnessIndicator scale={scale} x={x} y={y} r={r} correctness={correctness} interactive={interactive} />
+
+      {/* show correct point if answer was incorrect */}
+      <SmallCorrectPointIndicator
+        scale={scale}
+        x={x}
+        r={r}
+        correctness={correctness}
+        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,
+  x: PropTypes.number,
+  y: PropTypes.number,
+  r: PropTypes.number,
+  correctness: PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string,
+  }),
+  interactive: PropTypes.bool,
+  correctData: PropTypes.array,
+  label: PropTypes.string,
+};
+
+export class LineDot extends React.Component {
+  static propTypes = {
+    data: PropTypes.array,
+    onChange: PropTypes.func,
+    graphProps: types.GraphPropsType.isRequired,
+  };
+
+  render() {
+    const props = this.props;
+    const { data, graphProps } = props;
+    const { scale = {}, size = {} } = graphProps || {};
+    const xBand = dataToXBand(scale.x, data, size.width, 'lineDot');
+
+    return <RawLine {...props} xBand={xBand} CustomDraggableComponent={DraggableComponent} />;
+  }
+}
+
+export default () => ({
+  type: 'lineDot',
+  Component: LineDot,
+  name: 'Line Dot',
+});