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

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

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

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

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

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

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

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

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

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

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