@pie-lib/charting 7.0.4-next.3 → 7.0.4-next.31

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

@@ -1,30 +0,0 @@
-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,114 +0,0 @@
-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

@@ -1,171 +0,0 @@
-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

@@ -1,144 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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',
-});