@pie-lib/charting 5.36.3-next.2 → 5.36.3-next.205

package/src/common/correctness-indicators.jsx

@@ -1,28 +1,67 @@
 import React from 'react';
-import classNames from 'classnames';
-import Check from '@material-ui/icons/Check';
-import Close from '@material-ui/icons/Close';
+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';
 
-export const CorrectnessIndicator = ({ scale, x, y, classes, r, correctness, interactive }) => {
+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';
-  const iconClass = isCorrect ? classes.correctIcon : classes.incorrectIcon;
 
   // 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 ? (
-        <Check className={classNames(classes.correctnessIcon, iconClass)} title={correctness.label} />
+        <StyledCorrectIcon title={correctness.label} />
       ) : (
-        <Close className={classNames(classes.correctnessIcon, iconClass)} title={correctness.label} />
+        <StyledIncorrectIcon title={correctness.label} />
       )}
     </foreignObject>
   );
 };
 
-export const SmallCorrectPointIndicator = ({ scale, x, r, correctness, classes, correctData, label }) => {
+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;
@@ -33,8 +72,8 @@ export const SmallCorrectPointIndicator = ({ scale, x, r, correctness, classes,
     // small circle has 10px font + 2px padding + 1px border, so total size is 15px
     return (
       <foreignObject x={xToRender} y={yToRender} width={15} height={15}>
-        <Check
-          className={classNames(classes.correctnessIcon, classes.correctIcon, classes.smallIcon)}
+        <StyledCorrectIcon
+          className="small"
           title={correctness.label}
         />
       </foreignObject>
@@ -44,12 +83,51 @@ export const SmallCorrectPointIndicator = ({ scale, x, r, correctness, classes,
   return null;
 };
 
-export const TickCorrectnessIndicator = ({ classes, correctness, interactive }) => {
+export const TickCorrectnessIndicator = ({ correctness, interactive }) => {
   if (!correctness || !interactive) return null;
 
   return correctness.value === 'correct' ? (
-    <Check className={classNames(classes.correctnessIcon, classes.correctIcon)} title={correctness.label} />
+    <StyledCorrectIcon title={correctness.label} />
   ) : (
-    <Close className={classNames(classes.correctnessIcon, classes.incorrectIcon)} 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,28 +1,55 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-import Check from '@material-ui/icons/Check';
-import Close from '@material-ui/icons/Close';
+import { styled } from '@mui/material/styles';
+import Check from '@mui/icons-material/Check';
+import Close from '@mui/icons-material/Close';
 
 import { gridDraggable, utils, types } from '@pie-lib/plot';
 import { color as enumColor } from '@pie-lib/render-ui';
-import { correct, incorrect, disabled } from './styles';
 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,
-  classes,
-  className,
   interactive,
-  defineChart,
   isHovered,
   correctness,
-  color,
   isPlot,
   ...rest
 }) => {
@@ -30,18 +57,17 @@ const RawDragHandle = ({
   const scaleValue = getScale(width)?.scale;
 
   return (
-    <svg x={x} y={scale.y(y) - 10} width={width} overflow="visible" className={classes.svgOverflowVisible}>
+    <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} classes={classes} />
+        <DragIcon width={width} scaleValue={scaleValue} color={enumColor.defaults.BORDER_GRAY} />
       )}
       {interactive && !correctness && (
-        <ellipse
+        <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}
-          className={classNames(classes.transparentHandle, className)}
           {...rest}
         />
       )}
@@ -62,13 +88,13 @@ const RawDragHandle = ({
       {correctness && interactive && !isPlot && (
         <foreignObject x={width / 2 - 14} y={0} width={40} height={40}>
           {correctness.value === 'correct' ? (
-            <Check className={classNames(classes.correctnessIcon, classes.correctIcon)} title={correctness.label} />
+            <StyledCorrectIcon title={correctness.label} />
           ) : (
-            <Close className={classNames(classes.correctnessIcon, classes.incorrectIcon)} title={correctness.label} />
+            <StyledIncorrectIcon title={correctness.label} />
           )}
         </foreignObject>
       )}
-    </svg>
+    </StyledSvg>
   );
 };
 
@@ -77,62 +103,16 @@ RawDragHandle.propTypes = {
   y: PropTypes.number.isRequired,
   width: PropTypes.number,
   graphProps: types.GraphPropsType.isRequired,
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
   interactive: PropTypes.bool,
   isHovered: PropTypes.bool,
   correctness: PropTypes.shape({
     value: PropTypes.string,
     label: PropTypes.string,
   }),
-  color: PropTypes.string,
+  isPlot: PropTypes.bool,
 };
 
-export const DragHandle = withStyles((theme) => ({
-  handle: {
-    height: '10px',
-    fill: 'transparent',
-    transition: 'fill 200ms linear, height 200ms linear',
-    '&.correct': correct('fill'),
-    '&.incorrect': incorrect('fill'),
-    '&.non-interactive': disabled('fill'),
-  },
-  transparentHandle: {
-    fill: 'transparent',
-    clipPath: 'polygon(50% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 0%)',
-  },
-  handleContainer: {
-    height: 30,
-    '&:hover': {
-      '& .handle': {
-        fill: enumColor.secondaryDark(),
-        height: '16px',
-      },
-    },
-    '&.non-interactive': disabled('fill'),
-    '&.incorrect': incorrect('fill'),
-    '&.correct': correct('fill'),
-  },
-  svgOverflowVisible: {
-    overflow: 'visible !important',
-  },
-  correctIcon: {
-    backgroundColor: enumColor.correct(),
-  },
-  incorrectIcon: {
-    backgroundColor: enumColor.incorrectWithIcon(),
-  },
-  correctnessIcon: {
-    borderRadius: theme.spacing.unit * 2,
-    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
-  },
-}))(RawDragHandle);
+export const DragHandle = RawDragHandle;
 
 export const D = gridDraggable({
   axis: 'y',

package/src/common/drag-icon.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { getAdjustedX, getScale } from '../utils';
 
-const DragIcon = ({ width, scaleValue, color, classes }) => (
+const DragIcon = ({ width, scaleValue, color }) => (
   <svg
     x={getAdjustedX(width, scaleValue)}
     y={getScale(width)?.deltay}
@@ -10,7 +11,7 @@ const DragIcon = ({ width, scaleValue, color, classes }) => (
     height={width}
     overflow="visible"
     viewBox={`0 0 ${width} ${width}`}
-    className={classes.svgOverflowVisible}
+    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" />
@@ -26,4 +27,10 @@ const DragIcon = ({ width, scaleValue, color, classes }) => (
   </svg>
 );
 
+DragIcon.propTypes = {
+  width: PropTypes.number.isRequired,
+  scaleValue: PropTypes.number.isRequired,
+  color: PropTypes.string,
+};
+
 export default DragIcon;

package/src/common/styles.js

@@ -16,4 +16,4 @@ export const incorrect = (key = 'fill') => ({
   [key]: color.incorrect(),
   pointerEvents: 'none',
   border: `solid 1px ${color.incorrect()}`,
-});
+});

package/src/grid.jsx

@@ -1,15 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
-import { GridRows, GridColumns } from '@vx/grid';
+import { styled } from '@mui/material/styles';
+import { GridRows, GridColumns } 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 = {
-    classes: PropTypes.object.isRequired,
     className: PropTypes.string,
     graphProps: types.GraphPropsType.isRequired,
     xBand: PropTypes.func,
@@ -20,7 +22,7 @@ export class Grid extends React.Component {
   static defaultProps = {};
 
   render() {
-    const { classes, className, graphProps, xBand, rowTickValues, columnTickValues } = this.props;
+    const { graphProps, xBand, rowTickValues, columnTickValues } = this.props;
     const { scale = {}, size = {}, range = {} } = graphProps || {};
     const { step = 0, labelStep = 0 } = range;
     const highlightNonLabel = step && labelStep && step < labelStep;
@@ -38,7 +40,7 @@ export class Grid extends React.Component {
     );
 
     return (
-      <g className={classNames(classes.grid, className)}>
+      <StyledGridGroup>
         <GridRows
           scale={scale.y}
           width={size.width}
@@ -58,15 +60,9 @@ export class Grid extends React.Component {
           }}
         />
         <GridColumns scale={xBand} height={size.height} offset={xBand.bandwidth() / 2} tickValues={columnTickValues} />
-      </g>
+      </StyledGridGroup>
     );
   }
 }
 
-const styles = () => ({
-  grid: {
-    stroke: color.primaryLight(),
-  },
-});
-
-export default withStyles(styles)(Grid);
+export default Grid;

package/src/key-legend.jsx

@@ -1,75 +1,77 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import Check from '@material-ui/icons/Check';
-import Close from '@material-ui/icons/Close';
+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 styles = (theme) => ({
-  container: {
-    backgroundColor: color.defaults.WHITE,
-    padding: theme.spacing.unit * 2,
-    width: '355px',
-    boxShadow: 'inset 0px 1px 5px 0px #9297A6',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '16px',
-  },
-  row: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '12px',
-  },
-  title: {
-    fontSize: theme.typography.h6.fontSize,
-    fontWeight: '700',
-  },
-  smallText: {
-    marginLeft: '2px',
-  },
-  correctIcon: {
-    backgroundColor: color.correct(),
-    borderRadius: theme.spacing.unit * 2,
-    color: color.defaults.WHITE,
-  },
-  incorrectIcon: {
-    backgroundColor: color.incorrectWithIcon(),
-    borderRadius: theme.spacing.unit * 2,
-    color: color.defaults.WHITE,
-  },
+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',
+}));
 
-  lastRow: {
-    marginLeft: '3px',
-    display: 'flex',
-    alignItems: 'center',
-    gap: '12px',
-  },
-});
+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 = ({ classes, language }) => (
-  <div className={classes.container}>
-    <div className={classes.title}>Key</div>
-    <div className={classes.row}>
-      <Close className={classes.incorrectIcon} />
-      <div className={classes.text}>{translator.t('charting.keyLegend.incorrectAnswer', { lng: language })}</div>
-    </div>
-    <div className={classes.row}>
-      <Check className={classes.correctIcon} />
-      <div className={classes.text}>{translator.t('charting.keyLegend.correctAnswer', { lng: language })}</div>
-    </div>
-    <div className={classes.lastRow}>
-      <Check className={classes.correctIcon} fontSize={'small'} />
-      <div className={classes.smallText}>{translator.t('charting.keyLegend.correctKeyAnswer', { lng: language })}</div>
-    </div>
-  </div>
+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 = {
-  classes: PropTypes.object.isRequired,
   language: PropTypes.string,
 };
 
-export default withStyles(styles)(KeyLegend);
+export default KeyLegend;

package/src/line/__tests__/line-cross.test.jsx

@@ -1,15 +1,15 @@
-import { shallow } from 'enzyme';
 import React from 'react';
+import { render } from '@pie-lib/test-utils';
 import Line, { LineCross as LineChart } from '../line-cross';
 import { graphProps } from './utils';
-import { Bar as BarChart } from '../../bars/bar';
 
 describe('LineChart', () => {
-  const wrapper = (extras) => {
+  const renderComponent = (extras) => {
     const defaults = {
       classes: {},
       className: 'className',
       graphProps: graphProps(),
+      data: [],
       xBand: () => {
         return {
           bandwidth: () => {},
@@ -17,22 +17,25 @@ describe('LineChart', () => {
       },
     };
     const props = { ...defaults, ...extras };
-    return shallow(<LineChart {...props} />);
+    return render(<LineChart {...props} />);
   };
 
-  describe('snapshot', () => {
-    it('renders', () => expect(wrapper()).toMatchSnapshot());
-
-    it('renders without graphProps', () => expect(wrapper({ graphProps: undefined })).toMatchSnapshot());
+  describe('rendering', () => {
+    it('renders line cross chart', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
   });
 
   describe('component', () => {
-    const chart = Line();
+    it('returns correct chart object', () => {
+      const chart = Line();
 
-    expect(chart).toEqual({
-      type: 'lineCross',
-      Component: LineChart,
-      name: 'Line Cross',
+      expect(chart).toEqual({
+        type: 'lineCross',
+        Component: LineChart,
+        name: 'Line Cross',
+      });
     });
   });
 });

package/src/line/__tests__/line-dot.test.jsx

@@ -1,15 +1,15 @@
-import { shallow } from 'enzyme';
 import React from 'react';
+import { render } from '@pie-lib/test-utils';
 import Line, { LineDot as LineChart } from '../line-dot';
 import { graphProps } from './utils';
-import { Bar as BarChart } from '../../bars/bar';
 
 describe('LineChart', () => {
-  const wrapper = (extras) => {
+  const renderComponent = (extras) => {
     const defaults = {
       classes: {},
       className: 'className',
       graphProps: graphProps(),
+      data: [],
       xBand: () => {
         return {
           bandwidth: () => {},
@@ -17,22 +17,25 @@ describe('LineChart', () => {
       },
     };
     const props = { ...defaults, ...extras };
-    return shallow(<LineChart {...props} />);
+    return render(<LineChart {...props} />);
   };
 
-  describe('snapshot', () => {
-    it('renders', () => expect(wrapper()).toMatchSnapshot());
-
-    it('renders without graphProps', () => expect(wrapper({ graphProps: undefined })).toMatchSnapshot());
+  describe('rendering', () => {
+    it('renders line dot chart', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
   });
 
   describe('component', () => {
-    const chart = Line();
+    it('returns correct chart object', () => {
+      const chart = Line();
 
-    expect(chart).toEqual({
-      type: 'lineDot',
-      Component: LineChart,
-      name: 'Line Dot',
+      expect(chart).toEqual({
+        type: 'lineDot',
+        Component: LineChart,
+        name: 'Line Dot',
+      });
     });
   });
 });

package/src/line/__tests__/utils.js

@@ -1,13 +1,19 @@
+import { scaleLinear, scaleBand } from 'd3-scale';
+
 export const scaleMock = () => {
   const fn = jest.fn((n) => n);
   fn.invert = jest.fn((n) => n);
   return fn;
 };
 
+export const createBandScale = (domain = [], range = [0, 400]) => {
+  return scaleBand().domain(domain).range(range).padding(0.1);
+};
+
 export const graphProps = (dmin = 0, dmax = 1, rmin = 0, rmax = 1) => ({
   scale: {
-    x: scaleMock(),
-    y: scaleMock(),
+    x: scaleLinear().domain([dmin, dmax]).range([0, 400]),
+    y: scaleLinear().domain([rmin, rmax]).range([400, 0]),
   },
   snap: {
     x: jest.fn((n) => n),