@pie-lib/charting 5.34.0 → 5.36.0-mui-update.0

package/src/plot/common/plot.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Check from '@material-ui/icons/Check';
-import { withStyles } from '@material-ui/core/styles/index';
+import Check from '@mui/icons-material/Check';
+import { styled } from '@mui/material/styles';
 import { Group } from '@vx/group';
 import debug from 'debug';
 
@@ -19,7 +19,6 @@ export class RawPlot extends React.Component {
   static propTypes = {
     onChangeCategory: PropTypes.func,
     value: PropTypes.number,
-    classes: PropTypes.object,
     label: PropTypes.string,
     xBand: PropTypes.func,
     index: PropTypes.number.isRequired,
@@ -68,7 +67,7 @@ export class RawPlot extends React.Component {
     this.setDragValue(next);
   };
 
-  renderCorrectnessIcon = (barX, barWidth, correctVal, correctness, classes, scale, pointHeight, pointDiameter) => {
+  renderCorrectnessIcon = (barX, barWidth, correctVal, correctness, scale, pointHeight, pointDiameter) => {
     let iconY;
 
     if (correctVal === 0) {
@@ -83,7 +82,7 @@ export class RawPlot extends React.Component {
     return (
       <foreignObject x={barX + barWidth / 2 - ICON_SIZE / 2} y={iconY} width={ICON_SIZE} height={ICON_SIZE}>
         <Check
-          className={classNames(classes.correctnessIcon, classes.correctIcon, classes.smallIcon)}
+          className={classNames('correctnessIcon', 'correctIcon', 'smallIcon')}
           title={correctness.label}
         />
       </foreignObject>
@@ -95,7 +94,6 @@ export class RawPlot extends React.Component {
       graphProps,
       value,
       label,
-      classes,
       xBand,
       index,
       CustomBarElement,
@@ -103,6 +101,7 @@ export class RawPlot extends React.Component {
       correctness,
       defineChart,
       correctData,
+      className
     } = this.props;
 
     const { scale, range, size } = graphProps;
@@ -130,6 +129,7 @@ export class RawPlot extends React.Component {
     return (
       <React.Fragment>
         <g
+          className={className}
           onMouseEnter={this.handleMouseEnter}
           onMouseLeave={this.handleMouseLeave}
           onTouchStart={this.handleMouseEnter}
@@ -155,7 +155,6 @@ export class RawPlot extends React.Component {
               pointHeight,
               label,
               value,
-              classes,
               scale,
             }),
           )}
@@ -173,7 +172,6 @@ export class RawPlot extends React.Component {
                   barWidth,
                   correctVal,
                   correctness,
-                  classes,
                   scale,
                   pointHeight,
                   pointDiameter,
@@ -202,7 +200,6 @@ export class RawPlot extends React.Component {
                       pointHeight={pointHeight}
                       label={label}
                       value={value}
-                      classes={classes}
                       scale={scale}
                       dottedOverline={true}
                     />
@@ -211,7 +208,6 @@ export class RawPlot extends React.Component {
                       barWidth,
                       correctVal,
                       correctness,
-                      classes,
                       scale,
                       pointHeight,
                       pointDiameter,
@@ -235,7 +231,6 @@ export class RawPlot extends React.Component {
                       pointHeight,
                       label,
                       value,
-                      classes,
                       scale,
                       dottedOverline: true,
                     }),
@@ -245,7 +240,6 @@ export class RawPlot extends React.Component {
                     barWidth,
                     correctVal,
                     correctness,
-                    classes,
                     scale,
                     pointHeight,
                     pointDiameter,
@@ -273,30 +267,30 @@ export class RawPlot extends React.Component {
   }
 }
 
-const Bar = withStyles((theme) => ({
-  dot: {
+const Bar = styled(RawPlot)(({ theme }) => ({
+  '& .dot': {
     fill: color.visualElementsColors.PLOT_FILL_COLOR,
     '&.correct': correct('stroke'),
     '&.incorrect': incorrect('stroke'),
   },
-  dotColor: {
+  '& .dotColor': {
     fill: color.visualElementsColors.PLOT_FILL_COLOR,
     '&.correct': correct('fill'),
     '&.incorrect': incorrect('fill'),
   },
-  line: {
+  '& .line': {
     stroke: color.visualElementsColors.PLOT_FILL_COLOR,
     '&.correct': correct('stroke'),
     '&.incorrect': incorrect('stroke'),
   },
-  correctIcon: {
+  '& .correctIcon': {
     backgroundColor: color.correct(),
   },
-  incorrectIcon: {
+  '& .incorrectIcon': {
     backgroundColor: color.incorrectWithIcon(),
   },
-  correctnessIcon: {
-    borderRadius: theme.spacing.unit * 2,
+  '& .correctnessIcon': {
+    borderRadius: theme.spacing(2),
     color: color.defaults.WHITE,
     fontSize: '16px',
     width: '16px',
@@ -305,13 +299,14 @@ const Bar = withStyles((theme) => ({
     border: `1px solid ${color.defaults.WHITE}`,
     stroke: 'initial',
     boxSizing: 'unset', // to override the default border-box in IBX
+    display: 'block',
   },
-  smallIcon: {
+  '& .smallIcon': {
     fontSize: '10px',
     width: '10px',
     height: '10px',
   },
-}))(RawPlot);
+}));
 
 export class Plot extends React.Component {
   static propTypes = {

package/src/plot/dot.js

@@ -6,9 +6,17 @@ import { types } from '@pie-lib/plot';
 import { dataToXBand } from '../utils';
 import Plot from './common/plot';
 import { color } from '@pie-lib/render-ui';
+import { styled } from '@mui/material/styles';
+import { correct, incorrect } from '../common/styles';
+
+const StyledCircle = styled(Circle)(() => ({
+  fill: color.visualElementsColors.PLOT_FILL_COLOR,
+  '&.correct': correct('stroke'),
+  '&.incorrect': incorrect('stroke'),
+}));
 
 const CustomBarElement = (props) => {
-  const { index, pointDiameter, barX, barWidth, pointHeight, label, value, classes, scale, dottedOverline } = props;
+  const { index, pointDiameter, barX, barWidth, pointHeight, label, value, scale, dottedOverline } = props;
 
   const r = pointDiameter / 2;
   const cx = barX + (barWidth - pointDiameter) / 2 + r;
@@ -26,7 +34,7 @@ const CustomBarElement = (props) => {
       fill="none"
     />
   ) : (
-    <Circle key={`point-${label}-${value}-${index}`} className={classes.dot} cx={cx} cy={cy} r={r} />
+    <StyledCircle key={`point-${label}-${value}-${index}`} cx={cx} cy={cy} r={r} />
   );
 };
 
@@ -38,7 +46,6 @@ CustomBarElement.propTypes = {
   pointHeight: PropTypes.number,
   value: PropTypes.number,
   label: PropTypes.string,
-  classes: PropTypes.object,
   scale: PropTypes.object,
   dottedOverline: PropTypes.bool,
 };

package/src/plot/line.js

@@ -2,14 +2,22 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { LinePath } from '@vx/shape';
 import { Group } from '@vx/group';
+import { styled } from '@mui/material/styles';
 
 import { types } from '@pie-lib/plot';
 import { dataToXBand } from '../utils';
 import { color } from '@pie-lib/render-ui';
 import Plot from './common/plot';
+import { correct, incorrect } from '../common/styles';
+
+const StyledLinePath = styled(LinePath)(() => ({
+  stroke: color.visualElementsColors.PLOT_FILL_COLOR,
+  '&.correct': correct('stroke'),
+  '&.incorrect': incorrect('stroke'),
+}));
 
 const CustomBarElement = (props) => {
-  const { index, pointDiameter, barX, barWidth, pointHeight, label, value, classes, scale, dottedOverline } = props;
+  const { index, pointDiameter, barX, barWidth, pointHeight, label, value, scale, dottedOverline } = props;
 
   const x = barX + (barWidth - pointDiameter) / 2;
   const y = scale.y(index) - (pointHeight - pointDiameter) / 2;
@@ -28,27 +36,27 @@ const CustomBarElement = (props) => {
     />
   ) : (
     <Group>
-      <LinePath
+      <StyledLinePath
         data={[
           { x, y },
           { x: x + pointDiameter, y: y - pointDiameter },
         ]}
         key={`point-${label}-${value}-${index}-1`}
-        className={classes.line}
+        className={'line'}
         x={(d) => d.x}
         y={(d) => d.y}
         strokeWidth={pointDiameter / 5}
       />
-      <LinePath
+      <StyledLinePath
         data={[
           { x, y: y - pointDiameter },
           { x: x + pointDiameter, y },
         ]}
         key={`point-${label}-${value}-${index}-2`}
-        className={classes.line}
         x={(d) => d.x}
         y={(d) => d.y}
         strokeWidth={pointDiameter / 5}
+        className={'line'}
       />
     </Group>
   );
@@ -62,8 +70,8 @@ CustomBarElement.propTypes = {
   pointHeight: PropTypes.number,
   value: PropTypes.number,
   label: PropTypes.string,
-  classes: PropTypes.object,
   scale: PropTypes.object,
+  dottedOverline: PropTypes.bool,
 };
 
 export class LinePlot extends React.Component {

package/src/tool-menu.jsx

@@ -3,57 +3,54 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { color } from '@pie-lib/render-ui';
 
-import { withStyles } from '@material-ui/core/styles';
-import cn from 'classnames';
-import Button from '@material-ui/core/Button';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
 import Translator from '@pie-lib/translator';
 
 const { translator } = Translator;
 
-const buttonStyles = (theme) => ({
-  root: {
-    color: color.text(),
-    border: `1px solid ${color.secondary()}`,
-    fontSize: theme.typography.fontSize,
-  },
-  selected: {
+const StyledMiniButton = styled(Button)(({ theme, selected, disabled }) => ({
+  color: color.text(),
+  border: `1px solid ${color.secondary()}`,
+  fontSize: theme.typography.fontSize,
+  ...(selected && {
     backgroundColor: color.background(),
     '& span': {
       color: color.primaryDark(),
     },
-  },
-  notSelected: {
+  }),
+  ...(!selected && !disabled && {
     '& span': {
       color: color.primary(),
     },
     backgroundColor: color.background(),
-  },
-  disabled: {
+  }),
+  ...(disabled && {
     '& span': {
       color: color.primary(),
     },
     backgroundColor: color.disabled(),
-  },
-});
+  }),
+}));
 
-export const MiniButton = withStyles(buttonStyles)((props) => {
-  const { disabled, classes, className, selected, value, onClick } = props;
+export const MiniButton = (props) => {
+  const { disabled, className, selected, value, onClick } = props;
   return (
-    <Button
+    <StyledMiniButton
       size="small"
       disabled={disabled}
+      selected={selected}
       color={selected ? 'secondary' : 'default'}
-      className={cn(classes.root, selected && classes.selected, className)}
-      classes={{ disabled: cn(disabled && classes.disabled) }}
+      className={className}
       value={value}
       key={value}
       variant="outlined"
       onClick={onClick}
     >
       {value}
-    </Button>
+    </StyledMiniButton>
   );
-});
+};
 MiniButton.propTypes = {
   disabled: PropTypes.bool,
   className: PropTypes.string,