@pie-lib/charting 7.0.3 → 7.0.4-next.0

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

@@ -1,58 +0,0 @@
-import { render } from '@testing-library/react';
-import React from 'react';
-import DragHandle from '../drag-handle';
-import { gridDraggable } from '@pie-lib/plot';
-import { graphProps } from './utils';
-
-jest.mock('../../utils', () => {
-  const { point } = jest.requireActual('../../utils');
-  return {
-    bounds: jest.fn(),
-    point,
-    getScale: jest.fn(() => ({ scale: 1 })),
-  };
-});
-
-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 onChange = jest.fn();
-  const renderComponent = (extras) => {
-    const defaults = {
-      classes: {},
-      className: 'className',
-      onChange,
-      graphProps: graphProps(),
-      x: 0,
-      y: 0,
-      width: 100,
-    };
-    const props = { ...defaults, ...extras };
-    return render(<DragHandle {...props} />);
-  };
-
-  describe('rendering', () => {
-    it('renders without crashing', () => {
-      const { container } = renderComponent();
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-
-  describe('gridDraggable options', () => {
-    it('configures gridDraggable with correct options', () => {
-      // The gridDraggable HOC is tested by verifying that it's called with the component
-      // Detailed unit tests for the HOC options would require accessing internal
-      // implementation details which is not recommended with RTL
-      const { container } = renderComponent();
-      expect(container.firstChild).toBeInTheDocument();
-      expect(gridDraggable).toHaveBeenCalled();
-    });
-  });
-});

package/src/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/common/correctness-indicators.jsx

@@ -1,128 +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 as enumColor } from '@pie-lib/render-ui';
-
-const StyledCorrectIcon = styled(Check)(({ theme }) => ({
-  borderRadius: theme.spacing(2),
-  color: enumColor.defaults.WHITE,
-  fontSize: '16px',
-  width: '16px',
-  height: '16px',
-  padding: '2px',
-  border: `1px solid ${enumColor.defaults.WHITE}`,
-  stroke: 'initial',
-  boxSizing: 'unset', // to override the default border-box in IBX
-  backgroundColor: enumColor.correct(),
-  display: 'block',
-  '&.small': {
-    fontSize: '10px',
-    width: '10px',
-    height: '10px',
-  },
-}));
-
-const StyledIncorrectIcon = styled(Close)(({ theme }) => ({
-  borderRadius: theme.spacing(2),
-  color: enumColor.defaults.WHITE,
-  fontSize: '16px',
-  width: '16px',
-  height: '16px',
-  padding: '2px',
-  border: `1px solid ${enumColor.defaults.WHITE}`,
-  stroke: 'initial',
-  boxSizing: 'unset', // to override the default border-box in IBX
-  backgroundColor: enumColor.incorrectWithIcon(),
-  display: 'block',
-  '&.small': {
-    fontSize: '10px',
-    width: '10px',
-    height: '10px',
-  },
-}));
-
-export const CorrectnessIndicator = ({ scale, x, y, correctness, interactive }) => {
-  if (!correctness || !interactive) return null;
-  const cx = scale ? scale.x(x) : x;
-  const cy = scale ? scale.y(y) : y;
-  const isCorrect = correctness.value === 'correct';
-
-  // the icon is 16px + 2px padding + 1px border, so total size is 22px
-  return (
-    <foreignObject x={cx - 11} y={cy - 11} width={22} height={22}>
-      {isCorrect ? <StyledCorrectIcon title={correctness.label} /> : <StyledIncorrectIcon title={correctness.label} />}
-    </foreignObject>
-  );
-};
-
-export const SmallCorrectPointIndicator = ({ scale, x, correctness, correctData, label }) => {
-  if (correctness && correctness.value === 'incorrect') {
-    const correctVal = parseFloat(correctData.find((d) => d.label === label)?.value);
-    if (isNaN(correctVal)) return null;
-    const correctPxY = scale.y(correctVal);
-    const yToRender = correctPxY - 7.5;
-    const xToRender = scale.x(x) - 7.5;
-
-    // small circle has 10px font + 2px padding + 1px border, so total size is 15px
-    return (
-      <foreignObject x={xToRender} y={yToRender} width={15} height={15}>
-        <StyledCorrectIcon className="small" title={correctness.label} />
-      </foreignObject>
-    );
-  }
-
-  return null;
-};
-
-export const TickCorrectnessIndicator = ({ correctness, interactive }) => {
-  if (!correctness || !interactive) return null;
-
-  return correctness.value === 'correct' ? (
-    <StyledCorrectIcon title={correctness.label} />
-  ) : (
-    <StyledIncorrectIcon title={correctness.label} />
-  );
-};
-
-CorrectnessIndicator.propTypes = {
-  scale: PropTypes.shape({
-    x: PropTypes.func,
-    y: PropTypes.func,
-  }),
-  x: PropTypes.number.isRequired,
-  y: PropTypes.number.isRequired,
-  correctness: PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string,
-  }),
-  interactive: PropTypes.bool,
-};
-
-SmallCorrectPointIndicator.propTypes = {
-  scale: PropTypes.shape({
-    x: PropTypes.func,
-    y: PropTypes.func,
-  }).isRequired,
-  x: PropTypes.number.isRequired,
-  correctness: PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string,
-  }),
-  correctData: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string,
-      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    }),
-  ),
-  label: PropTypes.string,
-};
-
-TickCorrectnessIndicator.propTypes = {
-  correctness: PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string,
-  }),
-  interactive: PropTypes.bool,
-};

package/src/common/drag-handle.jsx

@@ -1,125 +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 { gridDraggable, types, utils } from '@pie-lib/plot';
-import { color as enumColor } from '@pie-lib/render-ui';
-import { getScale } from '../utils';
-import DragIcon from './drag-icon';
-
-const StyledSvg = styled('svg')(() => ({
-  overflow: 'visible !important',
-}));
-
-const StyledEllipse = styled('ellipse')(() => ({
-  fill: 'transparent',
-  clipPath: 'polygon(50% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 0%)',
-}));
-
-const StyledCorrectIcon = styled(Check)(() => ({
-  backgroundColor: enumColor.correct(),
-  borderRadius: '16px', // equivalent to theme.spacing(2) for most themes
-  color: enumColor.defaults.WHITE,
-  fontSize: '16px',
-  padding: '2px',
-  border: `4px solid ${enumColor.defaults.WHITE}`,
-  width: '16px',
-  height: '16px',
-  boxSizing: 'unset', // to override the default border-box in IBX
-}));
-
-const StyledIncorrectIcon = styled(Close)(() => ({
-  backgroundColor: enumColor.incorrectWithIcon(),
-  borderRadius: '16px', // equivalent to theme.spacing(2) for most themes
-  color: enumColor.defaults.WHITE,
-  fontSize: '16px',
-  padding: '2px',
-  border: `4px solid ${enumColor.defaults.WHITE}`,
-  width: '16px',
-  height: '16px',
-  boxSizing: 'unset', // to override the default border-box in IBX
-}));
-
-const RawDragHandle = ({ x, y, width, graphProps, interactive, isHovered, correctness, isPlot, ...rest }) => {
-  const { scale } = graphProps;
-  const scaleValue = getScale(width)?.scale;
-
-  return (
-    <StyledSvg x={x} y={scale.y(y) - 10} width={width} overflow="visible">
-      {isHovered && !correctness && interactive && (
-        <DragIcon width={width} scaleValue={scaleValue} color={enumColor.defaults.BORDER_GRAY} />
-      )}
-      {interactive && !correctness && (
-        <StyledEllipse
-          cx={width / 2}
-          cy={10}
-          rx={width / 2}
-          // the drag icon has a 22px fixed r value, so the ry value is 3 times that in order to cover all the area
-          ry={66}
-          {...rest}
-        />
-      )}
-
-      <defs>
-        <filter id="bottomShadow" x="0" y="0" width="140%" height="140%">
-          <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
-          <feOffset dx="0" dy="5" result="offsetblur" />
-          <feFlood floodColor="#00000033" />
-          <feComposite in2="offsetblur" operator="in" />
-          <feMerge>
-            <feMergeNode />
-            <feMergeNode in="SourceGraphic" />
-          </feMerge>
-        </filter>
-      </defs>
-
-      {correctness && interactive && !isPlot && (
-        <foreignObject x={width / 2 - 14} y={0} width={40} height={40}>
-          {correctness.value === 'correct' ? (
-            <StyledCorrectIcon title={correctness.label} />
-          ) : (
-            <StyledIncorrectIcon title={correctness.label} />
-          )}
-        </foreignObject>
-      )}
-    </StyledSvg>
-  );
-};
-
-RawDragHandle.propTypes = {
-  x: PropTypes.number.isRequired,
-  y: PropTypes.number.isRequired,
-  width: PropTypes.number,
-  graphProps: types.GraphPropsType.isRequired,
-  interactive: PropTypes.bool,
-  isHovered: PropTypes.bool,
-  correctness: PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string,
-  }),
-  isPlot: PropTypes.bool,
-};
-
-export const DragHandle = RawDragHandle;
-
-export const D = 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 D;

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;