@pie-lib/charting 5.36.3-next.2 → 5.36.4-next.0

package/src/line/common/line.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Group } from '@vx/group';
-import { LinePath } from '@vx/shape';
+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 { withStyles } from '@material-ui/core/styles/index';
+import { styled } from '@mui/material/styles';
 import isEqual from 'lodash/isEqual';
 import { color } from '@pie-lib/render-ui';
 
@@ -23,11 +23,17 @@ const getData = (data, domain) => {
   }));
 };
 
+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,
-    classes: PropTypes.object,
     label: PropTypes.string,
     xBand: PropTypes.func,
     index: PropTypes.number.isRequired,
@@ -40,6 +46,7 @@ export class RawLine extends React.Component {
       }),
     ),
     CustomDraggableComponent: PropTypes.func,
+    correctData: PropTypes.array,
   };
 
   static defaultProps = {
@@ -78,25 +85,25 @@ export class RawLine extends React.Component {
   };
 
   render() {
-    const { graphProps, data, classes, CustomDraggableComponent, defineChart, correctData } = this.props;
+    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>
-        <LinePath
+        <StyledLinePath
           data={lineToUse}
           x={(d) => scale.x(d.x)}
           y={(d) => scale.y(d.dragValue !== undefined ? d.dragValue : d.y)}
-          className={classes.line}
+          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}`}
@@ -120,14 +127,14 @@ export class RawLine extends React.Component {
   }
 }
 
-const StyledLine = withStyles(() => ({
-  line: {
+const StyledLine = styled(RawLine)(() => ({
+  '& .line': {
     fill: 'transparent',
     stroke: color.defaults.TERTIARY,
     strokeWidth: 3,
     transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',
   },
-}))(RawLine);
+}));
 
 export class Line extends React.Component {
   static propTypes = {
@@ -135,6 +142,9 @@ export class Line extends React.Component {
     onChange: PropTypes.func,
     xBand: PropTypes.func,
     graphProps: types.GraphPropsType.isRequired,
+    CustomDraggableComponent: PropTypes.func,
+    defineChart: PropTypes.bool,
+    correctData: PropTypes.array,
   };
 
   changeLine = (index, category) => {

package/src/line/line-cross.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { LinePath } from '@vx/shape';
-import { Group } from '@vx/group';
-import classNames from 'classnames';
+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';
@@ -10,18 +10,44 @@ 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 { classes = {}, className, scale, x, y, r, correctness, interactive, correctData, label, ...rest } = 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 (
-    <Group className={classNames(className, classes.line, correctness && !interactive && classes.disabledPoint)}>
-      <LinePath
+    <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 },
@@ -32,7 +58,7 @@ const DraggableComponent = (props) => {
         strokeWidth={5}
         style={{ pointerEvents: 'none' }}
       />
-      <LinePath
+      <StyledLinePath
         data={[
           { x: scale.x(x) - r, y: scale.y(y) - r },
           { x: scale.x(x) + r, y: scale.y(y) + r },
@@ -55,11 +81,10 @@ const DraggableComponent = (props) => {
           pointerEvents="none"
         />
       )}
-      <circle
+      <StyledTransparentHandle
         cx={cx}
         cy={cy}
         r={r * 2}
-        className={classNames(classes.transparentHandle)}
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => setHover(false)}
         {...rest}
@@ -69,7 +94,6 @@ const DraggableComponent = (props) => {
         scale={scale}
         x={x}
         y={y}
-        classes={classes}
         r={r}
         correctness={correctness}
         interactive={interactive}
@@ -80,11 +104,10 @@ const DraggableComponent = (props) => {
         x={x}
         r={r}
         correctness={correctness}
-        classes={classes}
         correctData={correctData}
         label={label}
       />
-    </Group>
+    </StyledGroup>
   );
 };
 
@@ -94,11 +117,13 @@ DraggableComponent.propTypes = {
   y: PropTypes.number,
   r: PropTypes.number,
   className: PropTypes.string,
-  classes: PropTypes.object,
   correctness: PropTypes.shape({
     value: PropTypes.string,
     label: PropTypes.string,
   }),
+  interactive: PropTypes.bool,
+  correctData: PropTypes.array,
+  label: PropTypes.string,
 };
 
 export class LineCross extends React.Component {

package/src/line/line-dot.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import { styled } from '@mui/material/styles';
 
 import { types } from '@pie-lib/plot';
 import { color } from '@pie-lib/render-ui';
@@ -8,49 +8,44 @@ import { dataToXBand } from '../utils';
 import RawLine from './common/line';
 import { CorrectnessIndicator, SmallCorrectPointIndicator } from '../common/correctness-indicators';
 
-const DraggableComponent = ({
-  scale,
-  x,
-  y,
-  className,
-  classes,
-  r,
-  correctness,
-  interactive,
-  correctData,
-  label,
-  ...rest
-}) => {
+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)}>
-      <circle
+    <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}
-        className={classNames(classes.transparentHandle, className)}
-        pointerEvents={correctness ? 'none' : ''}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
         {...rest}
       />
-      <circle
+      <StyledHandle
         cx={scale.x(x)}
         cy={scale.y(y)}
         r={r}
-        className={classNames(className, classes.handle, correctness && !interactive && classes.disabledPoint)}
-        {...rest}
-      />
-      {/* show correctness indicators */}
-      <CorrectnessIndicator
-        scale={scale}
-        x={x}
-        y={y}
-        classes={classes}
-        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
@@ -58,7 +53,6 @@ const DraggableComponent = ({
         x={x}
         r={r}
         correctness={correctness}
-        classes={classes}
         correctData={correctData}
         label={label}
       />
@@ -84,12 +78,13 @@ DraggableComponent.propTypes = {
   x: PropTypes.number,
   y: PropTypes.number,
   r: PropTypes.number,
-  className: PropTypes.string,
-  classes: PropTypes.object,
   correctness: PropTypes.shape({
     value: PropTypes.string,
     label: PropTypes.string,
   }),
+  interactive: PropTypes.bool,
+  correctData: PropTypes.array,
+  label: PropTypes.string,
 };
 
 export class LineDot extends React.Component {

package/src/mark-label.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import AutosizeInput from 'react-input-autosize';
 import PropTypes from 'prop-types';
 
@@ -9,46 +9,47 @@ import { correct, incorrect, disabled } from './common/styles';
 import { color } from '@pie-lib/render-ui';
 import { renderMath } from '@pie-lib/math-rendering';
 
-const styles = (theme) => ({
-  input: {
-    float: 'right',
-    fontFamily: theme.typography.fontFamily,
-    fontSize: theme.typography.fontSize,
-    border: 'none',
-    '&.correct': correct('color'),
-    '&.incorrect': incorrect('color'),
-    '&.disabled': {
-      backgroundColor: 'transparent !important',
-    },
-    '&.error': { border: `2px solid ${theme.palette.error.main}` },
-  },
-  mathInput: {
-    pointerEvents: 'auto',
-    textAlign: 'center',
-    fontSize: theme.typography.fontSize + 2,
-    fontFamily: theme.typography.fontFamily,
-    color: color.primaryDark(),
-    paddingTop: theme.typography.fontSize / 2,
+const StyledContainer = styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+});
+
+// eslint-disable-next-line no-unused-vars
+const StyledInput = styled('input')(({ theme }) => ({
+  float: 'right',
+  fontFamily: theme.typography.fontFamily,
+  fontSize: theme.typography.fontSize,
+  border: 'none',
+  '&.correct': correct('color'),
+  '&.incorrect': incorrect('color'),
+  '&.disabled': {
+    backgroundColor: 'transparent !important',
   },
-  disabled: {
+  '&.error': { border: `2px solid ${theme.palette.error.main}` },
+}));
+
+const StyledMathInput = styled('div')(({ theme }) => ({
+  pointerEvents: 'auto',
+  textAlign: 'center',
+  fontSize: theme.typography.fontSize + 2,
+  fontFamily: theme.typography.fontFamily,
+  color: color.primaryDark(),
+  paddingTop: theme.typography.fontSize / 2,
+  '&.disabled': {
     ...disabled('color'),
     backgroundColor: 'transparent !important',
   },
-  error: {
+  '&.error': {
     border: `2px solid ${theme.palette.error.main}`,
   },
-  correct: {
+  '&.correct': {
     ...correct('color'),
   },
-  incorrect: {
+  '&.incorrect': {
     ...incorrect('color'),
   },
-  flexContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-  },
-});
+}));
 
 function isFractionFormat(label) {
   const trimmedLabel = label?.trim() || '';
@@ -84,8 +85,7 @@ export const MarkLabel = (props) => {
   const _ref = useCallback((node) => setInput(node), null);
 
   const {
-    mark,
-    classes,
+    mark = {},
     disabled,
     inputRef: externalInputRef,
     barWidth,
@@ -139,20 +139,22 @@ export const MarkLabel = (props) => {
   }, []);
 
   return (
-    <div className={classes.flexContainer}>
+    <StyledContainer>
       {correctnessIndicator}
       {isMathRendering() ? (
-        <div
+        <StyledMathInput
           ref={(r) => {
             root = r;
-            externalInputRef(r);
+            if (typeof externalInputRef === 'function') {
+              externalInputRef(r);
+            }
           }}
           dangerouslySetInnerHTML={{ __html: getLabelMathFormat(label) }}
-          className={classNames(classes.mathInput, {
-            [classes.disabled]: disabled,
-            [classes.error]: error,
-            [classes.correct]: mark.editable && correctness?.label === 'correct',
-            [classes.incorrect]: mark.editable && correctness?.label === 'incorrect',
+          className={classNames({
+            disabled: disabled,
+            error: error,
+            correct: mark.editable && correctness?.label === 'correct',
+            incorrect: mark.editable && correctness?.label === 'incorrect',
           })}
           onClick={() => setIsEditing(true)}
           style={{
@@ -163,17 +165,19 @@ export const MarkLabel = (props) => {
             visibility: isHiddenLabel ? 'hidden' : 'unset',
             marginTop: correctnessIndicator ? '24px' : '0',
           }}
-        ></div>
+        ></StyledMathInput>
       ) : (
         <AutosizeInput
           inputRef={(r) => {
             _ref(r);
-            externalInputRef(r);
+            if (typeof externalInputRef === 'function') {
+              externalInputRef(r);
+            }
           }}
+          name='mark-label-input'
           autoFocus={isEditing || autoFocus}
           disabled={disabled}
           inputClassName={classNames(
-            classes.input,
             correctness && mark.editable ? correctness.label : null,
             disabled && 'disabled',
             error && 'error',
@@ -185,6 +189,7 @@ export const MarkLabel = (props) => {
             boxSizing: 'border-box',
             paddingLeft: 0,
             paddingRight: 0,
+            border: 'none',
             ...extraStyle,
           }}
           value={label}
@@ -203,7 +208,7 @@ export const MarkLabel = (props) => {
           onBlur={onChangeProp}
         />
       )}
-    </div>
+    </StyledContainer>
   );
 };
 
@@ -213,7 +218,6 @@ MarkLabel.propTypes = {
   error: PropTypes.any,
   onChange: PropTypes.func,
   graphProps: types.GraphPropsType,
-  classes: PropTypes.object,
   inputRef: PropTypes.func,
   mark: PropTypes.object,
   barWidth: PropTypes.number,
@@ -227,4 +231,4 @@ MarkLabel.propTypes = {
   correctnessIndicator: PropTypes.node,
 };
 
-export default withStyles(styles)(MarkLabel);
+export default MarkLabel;

package/src/plot/__tests__/dot.test.jsx

@@ -1,11 +1,10 @@
-import { shallow } from 'enzyme';
 import React from 'react';
+import { render } from '@pie-lib/test-utils';
 import Dot, { DotPlot } from '../dot';
 import { graphProps } from './utils';
-import { Bar as BarChart } from '../../bars/bar';
 
 describe('DotPlot', () => {
-  const wrapper = (extras) => {
+  const renderComponent = (extras) => {
     const defaults = {
       classes: {},
       className: 'className',
@@ -17,22 +16,30 @@ describe('DotPlot', () => {
       },
     };
     const props = { ...defaults, ...extras };
-    return shallow(<DotPlot {...props} />);
+    return render(<DotPlot {...props} />);
   };
 
-  describe('snapshot', () => {
-    it('renders', () => expect(wrapper()).toMatchSnapshot());
+  describe('rendering', () => {
+    it('renders dot plot', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
 
-    it('renders without graphProps', () => expect(wrapper({ graphProps: undefined })).toMatchSnapshot());
+    it('renders without graphProps', () => {
+      const { container } = renderComponent({ graphProps: undefined });
+      expect(container.firstChild).toBeInTheDocument();
+    });
   });
 
   describe('component', () => {
-    const chart = Dot();
+    it('returns correct chart object', () => {
+      const chart = Dot();
 
-    expect(chart).toEqual({
-      type: 'dotPlot',
-      Component: DotPlot,
-      name: 'Dot Plot',
+      expect(chart).toEqual({
+        type: 'dotPlot',
+        Component: DotPlot,
+        name: 'Dot Plot',
+      });
     });
   });
 });

package/src/plot/__tests__/line.test.jsx

@@ -1,11 +1,10 @@
-import { shallow } from 'enzyme';
 import React from 'react';
+import { render } from '@pie-lib/test-utils';
 import Line, { LinePlot } from '../line';
 import { graphProps } from './utils';
-import { Bar as BarChart } from '../../bars/bar';
 
 describe('LinePlot', () => {
-  const wrapper = (extras) => {
+  const renderComponent = (extras) => {
     const defaults = {
       classes: {},
       className: 'className',
@@ -17,22 +16,30 @@ describe('LinePlot', () => {
       },
     };
     const props = { ...defaults, ...extras };
-    return shallow(<LinePlot {...props} />);
+    return render(<LinePlot {...props} />);
   };
 
-  describe('snapshot', () => {
-    it('renders', () => expect(wrapper()).toMatchSnapshot());
+  describe('rendering', () => {
+    it('renders line plot', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
 
-    it('renders without graphProps', () => expect(wrapper({ graphProps: undefined })).toMatchSnapshot());
+    it('renders without graphProps', () => {
+      const { container } = renderComponent({ graphProps: undefined });
+      expect(container.firstChild).toBeInTheDocument();
+    });
   });
 
   describe('component', () => {
-    const chart = Line();
+    it('returns correct chart object', () => {
+      const chart = Line();
 
-    expect(chart).toEqual({
-      type: 'linePlot',
-      Component: LinePlot,
-      name: 'Line Plot',
+      expect(chart).toEqual({
+        type: 'linePlot',
+        Component: LinePlot,
+        name: 'Line Plot',
+      });
     });
   });
 });