@pie-lib/charting 7.1.0-beta.9 → 8.0.0-next.36

package/src/common/drag-icon.jsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { getAdjustedX, getScale } from '../utils';
-
-const DragIcon = ({ width, scaleValue, color }) => (
-  <svg
-    x={getAdjustedX(width, scaleValue)}
-    y={getScale(width)?.deltay}
-    color={color}
-    width={width}
-    height={width}
-    overflow="visible"
-    viewBox={`0 0 ${width} ${width}`}
-    style={{ overflow: 'visible !important' }}
-  >
-    <g xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" transform={`scale(${scaleValue})`}>
-      <circle cx="28.5" cy="23.5" r="22" fill="white" stroke="currentColor" />
-      <path
-        d="M33.5 21.25H23.4609C22.7578 21.25 22.4062 20.4297 22.9141 19.9219L27.9141 14.9219C28.2266 14.6094 28.7344 14.6094 29.0469 14.9219L34.0469 19.9219C34.5547 20.4297 34.2031 21.25 33.5 21.25Z"
-        fill="currentColor"
-      />
-      <path
-        d="M23.5 25.75L33.5391 25.75C34.2422 25.75 34.5938 26.5703 34.0859 27.0781L29.0859 32.0781C28.7734 32.3906 28.2656 32.3906 27.9531 32.0781L22.9531 27.0781C22.4453 26.5703 22.7969 25.75 23.5 25.75Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
-
-DragIcon.propTypes = {
-  width: PropTypes.number.isRequired,
-  scaleValue: PropTypes.number.isRequired,
-  color: PropTypes.string,
-};
-
-export default DragIcon;

package/src/common/styles.js

@@ -1,19 +0,0 @@
-import { color } from '@pie-lib/render-ui';
-
-export const disabled = (key = 'fill') => ({
-  [key]: `var(--graph-disabled, ${color.disabled()})`,
-  pointerEvents: 'none',
-  border: 'none',
-});
-
-export const correct = (key = 'fill') => ({
-  [key]: color.correct(),
-  pointerEvents: 'none',
-  border: `solid 1px ${color.correct()}`,
-});
-
-export const incorrect = (key = 'fill') => ({
-  [key]: color.incorrect(),
-  pointerEvents: 'none',
-  border: `solid 1px ${color.incorrect()}`,
-});

package/src/grid.jsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import { GridColumns, GridRows } from '@visx/grid';
-
-import { types } from '@pie-lib/plot';
-import { color } from '@pie-lib/render-ui';
-
-const StyledGridGroup = styled('g')(() => ({
-  stroke: color.primaryLight(),
-}));
-
-export class Grid extends React.Component {
-  static propTypes = {
-    className: PropTypes.string,
-    graphProps: types.GraphPropsType.isRequired,
-    xBand: PropTypes.func,
-    columnTickValues: PropTypes.array,
-    rowTickValues: PropTypes.array,
-  };
-
-  static defaultProps = {};
-
-  render() {
-    const { graphProps, xBand, rowTickValues, columnTickValues } = this.props;
-    const { scale = {}, size = {}, range = {} } = graphProps || {};
-    const { step = 0, labelStep = 0 } = range;
-    const highlightNonLabel = step && labelStep && step < labelStep;
-
-    // Avoid floating-point precision errors in the % operator.
-    // e.g. 0.6 % 0.2 = 0.19999999999999996, but safeModulo(0.6, 0.2) = 0
-    const safeModulo = (value, step) => {
-      const valueDecimals = (value.toString().split('.')[1] || '').length;
-      const stepDecimals =(step.toString().split('.')[1] || '').length
-      const decimals = Math.max(valueDecimals, stepDecimals);
-      const factor = Math.pow(10, decimals);
-
-      return ((value * factor) % (step * factor)) / factor;
-    };
-
-    // if highlightNonLabel is true, we need to separate the unlabeled lines in order to render them in a different color
-    const { unlabeledLines, labeledLines } = (rowTickValues || []).reduce(
-      (acc, value) => {
-        if (highlightNonLabel && safeModulo(value, labelStep) !== 0) {
-          acc.unlabeledLines.push(value);
-        } else {
-          acc.labeledLines.push(value);
-        }
-        return acc;
-      },
-      { unlabeledLines: [], labeledLines: [] },
-    );
-
-    return (
-      <StyledGridGroup>
-        <GridRows
-          scale={scale.y}
-          width={size.width}
-          tickValues={unlabeledLines}
-          lineStyle={{
-            stroke: color.fadedPrimary(),
-            strokeWidth: 1,
-          }}
-        />
-        <GridRows
-          scale={scale.y}
-          width={size.width}
-          tickValues={labeledLines}
-          lineStyle={{
-            stroke: unlabeledLines.length ? color.visualElementsColors.GRIDLINES_COLOR : color.fadedPrimary(),
-            strokeWidth: 1,
-          }}
-        />
-        <GridColumns scale={xBand} height={size.height} offset={xBand.bandwidth() / 2} tickValues={columnTickValues} />
-      </StyledGridGroup>
-    );
-  }
-}
-
-export default Grid;

package/src/index.js

@@ -1,7 +0,0 @@
-import Chart from './chart';
-import chartTypes from './chart-types';
-import ConfigureChartPanel from './chart-setup';
-import ChartType from './chart-type';
-import KeyLegend from './key-legend';
-
-export { Chart, chartTypes, ChartType, ConfigureChartPanel, KeyLegend };

package/src/key-legend.jsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import Check from '@mui/icons-material/Check';
-import Close from '@mui/icons-material/Close';
-import { color } from '@pie-lib/render-ui';
-import Translator from '@pie-lib/translator';
-
-const StyledContainer = styled('div')(({ theme }) => ({
-  backgroundColor: color.defaults.WHITE,
-  padding: theme.spacing(2),
-  width: '355px',
-  boxShadow: 'inset 0px 1px 5px 0px #9297A6',
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '16px',
-}));
-
-const StyledRow = styled('div')(() => ({
-  display: 'flex',
-  alignItems: 'center',
-  gap: '12px',
-}));
-
-const StyledTitle = styled('div')(({ theme }) => ({
-  fontSize: theme.typography.h6.fontSize,
-  fontWeight: '700',
-}));
-
-const StyledSmallText = styled('div')(() => ({
-  marginLeft: '2px',
-}));
-
-const StyledCorrectIcon = styled(Check)(({ theme }) => ({
-  backgroundColor: color.correct(),
-  borderRadius: theme.spacing(2),
-  color: color.defaults.WHITE,
-}));
-
-const StyledIncorrectIcon = styled(Close)(({ theme }) => ({
-  backgroundColor: color.incorrectWithIcon(),
-  borderRadius: theme.spacing(2),
-  color: color.defaults.WHITE,
-}));
-
-const StyledLastRow = styled('div')(() => ({
-  marginLeft: '3px',
-  display: 'flex',
-  alignItems: 'center',
-  gap: '12px',
-}));
-
-const { translator } = Translator;
-
-const KeyLegend = ({ language }) => (
-  <StyledContainer>
-    <StyledTitle>Key</StyledTitle>
-    <StyledRow>
-      <StyledIncorrectIcon />
-      <div>{translator.t('charting.keyLegend.incorrectAnswer', { lng: language })}</div>
-    </StyledRow>
-    <StyledRow>
-      <StyledCorrectIcon />
-      <div>{translator.t('charting.keyLegend.correctAnswer', { lng: language })}</div>
-    </StyledRow>
-    <StyledLastRow>
-      <StyledCorrectIcon fontSize={'small'} />
-      <StyledSmallText>{translator.t('charting.keyLegend.correctKeyAnswer', { lng: language })}</StyledSmallText>
-    </StyledLastRow>
-  </StyledContainer>
-);
-
-KeyLegend.propTypes = {
-  language: PropTypes.string,
-};
-
-export default KeyLegend;

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',
-});