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

package/src/axes.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import { AxisLeft, AxisBottom } from '@vx/axis';
-import Checkbox from '@material-ui/core/Checkbox';
+import Checkbox from '@mui/material/Checkbox';
 
 import { types } from '@pie-lib/plot';
 import { color } from '@pie-lib/render-ui';
@@ -13,6 +13,70 @@ import { TickCorrectnessIndicator } from './common/correctness-indicators';
 import { bandKey, getTickValues, getRotateAngle } from './utils';
 import MarkLabel from './mark-label';
 
+const StyledErrorText = styled('text')(({ theme }) => ({
+  fontSize: theme.typography.fontSize - 2,
+  fill: theme.palette.error.main,
+}));
+
+const StyledCheckbox = styled(Checkbox)(() => ({
+  color: `${color.tertiary()} !important`,
+}));
+
+// TODO: check if this styling works as intended once MUI migration is done
+// Styled components for axis elements
+const StyledAxisLeft = styled(AxisLeft)(() => ({
+  stroke: color.primaryDark(),
+  strokeWidth: 2,
+  '& .vx-axis-line': {
+    stroke: color.visualElementsColors.AXIS_LINE_COLOR,
+    strokeWidth: 2,
+  },
+  '& .vx-axis-tick': {
+    '& > line': {
+      stroke: color.primaryDark(),
+      strokeWidth: 2,
+    },
+  },
+}));
+
+const StyledAxisBottom = styled(AxisBottom)(({ theme }) => ({
+  stroke: color.primaryDark(),
+  strokeWidth: 2,
+  '& .vx-axis-line': {
+    stroke: color.visualElementsColors.AXIS_LINE_COLOR,
+    strokeWidth: 2,
+  },
+  '& .vx-axis-tick': {
+    '& > line': {
+      stroke: color.primaryDark(),
+      strokeWidth: 2,
+    },
+    fontFamily: theme.typography.body1?.fontFamily,
+    fontSize: theme.typography.fontSize,
+    textAnchor: 'middle',
+  },
+}));
+
+// Styled components for correctness indicators
+const correctnessIconStyles = (theme) => ({
+  borderRadius: theme.spacing(2),
+  color: color.defaults.WHITE,
+  fontSize: '16px',
+  width: '16px',
+  height: '16px',
+  padding: '2px',
+  border: `1px solid ${color.defaults.WHITE}`,
+  boxSizing: 'unset', // to override the default border-box in IBX
+});
+
+const incorrectIconStyles = {
+  backgroundColor: color.incorrectWithIcon(),
+};
+
+const correctIconStyles = {
+  backgroundColor: color.correct(),
+};
+
 export class TickComponent extends React.Component {
   static propTypes = {
     defineChart: PropTypes.bool,
@@ -112,7 +176,6 @@ export class TickComponent extends React.Component {
 
   render() {
     const {
-      classes,
       categories,
       xBand,
       bandWidth,
@@ -137,6 +200,13 @@ export class TickComponent extends React.Component {
       return null;
     }
 
+    // Create classes object for TickCorrectnessIndicator compatibility
+    const classes = {
+      correctnessIcon: correctnessIconStyles,
+      incorrectIcon: incorrectIconStyles,
+      correctIcon: correctIconStyles,
+    };
+
     const { dialog } = this.state;
     const { changeEditable, changeInteractive } = chartingOptions || {};
     const index = parseInt(formattedValue.split('-')[0], 10);
@@ -193,9 +263,9 @@ export class TickComponent extends React.Component {
         </foreignObject>
 
         {error && index === 0 && (
-          <text className={classes.error} y={y + 23} height={6} textAnchor="start">
+          <StyledErrorText y={y + 23} height={6} textAnchor="start">
             {distinctMessages}
-          </text>
+          </StyledErrorText>
         )}
 
         {defineChart && index === 0 && (
@@ -257,8 +327,7 @@ export class TickComponent extends React.Component {
             height={4}
             style={{ pointerEvents: 'visible', overflow: 'visible' }}
           >
-            <Checkbox
-              className={classes.customColor}
+            <StyledCheckbox
               style={{ position: 'fixed' }}
               checked={interactive}
               onChange={(e) => this.changeInteractive(index, e.target.checked)}
@@ -274,8 +343,7 @@ export class TickComponent extends React.Component {
             height={4}
             style={{ pointerEvents: 'visible', overflow: 'visible' }}
           >
-            <Checkbox
-              className={classes.customColor}
+            <StyledCheckbox
               style={{ position: 'fixed' }}
               checked={editable}
               onChange={(e) => this.changeEditable(index, e.target.checked)}
@@ -316,7 +384,6 @@ TickComponent.propTypes = {
   formattedValue: PropTypes.string,
   onChangeCategory: PropTypes.func,
   onChange: PropTypes.func,
-  classes: PropTypes.object,
   error: PropTypes.object,
   defineChart: PropTypes.bool,
   chartingOptions: PropTypes.object,
@@ -330,7 +397,6 @@ TickComponent.propTypes = {
 export class RawChartAxes extends React.Component {
   static propTypes = {
     bottomScale: PropTypes.func,
-    classes: PropTypes.object.isRequired,
     categories: PropTypes.array,
     defineChart: PropTypes.bool,
     error: PropTypes.any,
@@ -386,7 +452,6 @@ export class RawChartAxes extends React.Component {
 
   render() {
     const {
-      classes,
       graphProps,
       xBand,
       leftAxis,
@@ -405,7 +470,6 @@ export class RawChartAxes extends React.Component {
       showCorrectness,
     } = this.props;
 
-    const { axis, axisLine, tick } = classes;
     const { scale = {}, range = {}, domain = {}, size = {} } = graphProps || {};
     const { height, width } = this.state;
 
@@ -432,7 +496,6 @@ export class RawChartAxes extends React.Component {
         hiddenLabelRef: (ref) => {
           this.hiddenLabelRef = ref;
         },
-        classes,
         categories,
         xBand,
         bandWidth,
@@ -461,20 +524,15 @@ export class RawChartAxes extends React.Component {
     return (
       <React.Fragment>
         {leftAxis && (
-          <AxisLeft
+          <StyledAxisLeft
             scale={scale.y}
-            className={axis}
-            axisLineClassName={axisLine}
             tickLength={10}
-            tickClassName={tick}
             tickFormat={(value) => value}
             tickValues={rowTickValues}
             tickLabelProps={getTickLabelProps}
           />
         )}
-        <AxisBottom
-          axisLineClassName={axisLine}
-          tickClassName={tick}
+        <StyledAxisBottom
           scale={bottomScale}
           labelProps={{ y: 60 + top }}
           top={scale.y && scale.y(range.min)}
@@ -489,59 +547,6 @@ export class RawChartAxes extends React.Component {
   }
 }
 
-const ChartAxes = withStyles(
-  (theme) => ({
-    axis: {
-      stroke: color.primaryDark(),
-      strokeWidth: 2,
-    },
-    axisLine: {
-      stroke: color.visualElementsColors.AXIS_LINE_COLOR,
-      strokeWidth: 2,
-    },
-    tick: {
-      '& > line': {
-        stroke: color.primaryDark(),
-        strokeWidth: 2,
-      },
-      fontFamily: theme.typography.body1.fontFamily,
-      fontSize: theme.typography.fontSize,
-      textAnchor: 'middle',
-    },
-    dottedLine: {
-      stroke: color.primaryLight(),
-      opacity: 0.2,
-    },
-    error: {
-      fontSize: theme.typography.fontSize - 2,
-      fill: theme.palette.error.main,
-    },
-    customColor: {
-      color: `${color.tertiary()} !important`,
-    },
-    correctnessIcon: {
-      borderRadius: theme.spacing.unit * 2,
-      color: color.defaults.WHITE,
-      fontSize: '16px',
-      width: '16px',
-      height: '16px',
-      padding: '2px',
-      border: `1px solid ${color.defaults.WHITE}`,
-      boxSizing: 'unset', // to override the default border-box in IBX
-    },
-    incorrectIcon: {
-      backgroundColor: color.incorrectWithIcon(),
-    },
-    correctIcon: {
-      backgroundColor: color.correct(),
-    },
-    tickContainer: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-    },
-  }),
-  { withTheme: true },
-)(RawChartAxes);
+const ChartAxes = styled(RawChartAxes)(({ theme }) => ({}));
 
 export default ChartAxes;

package/src/bars/common/bars.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Group } from '@vx/group';
 import { Bar as VxBar } from '@vx/shape';
-import { withStyles } from '@material-ui/core/styles/index';
+import { styled } from '@mui/material/styles';
 import debug from 'debug';
 
 import { color } from '@pie-lib/render-ui';
@@ -51,12 +51,15 @@ const calculateFillColor = (isHovered, barColor, index, hoverHistogramColors, al
   return barColor || null;
 };
 
+const StyledVxBar = styled(VxBar)(() => ({
+  fill: color.defaults.TERTIARY,
+}));
+
 export class RawBar extends React.Component {
   static propTypes = {
     barColor: PropTypes.string,
     onChangeCategory: PropTypes.func,
     value: PropTypes.number,
-    classes: PropTypes.object,
     label: PropTypes.string,
     xBand: PropTypes.func,
     index: PropTypes.number.isRequired,
@@ -140,7 +143,6 @@ export class RawBar extends React.Component {
       graphProps,
       value,
       label,
-      classes,
       xBand,
       index,
       interactive,
@@ -174,12 +176,11 @@ export class RawBar extends React.Component {
         onTouchStart={this.handleMouseEnter}
         onTouchEnd={this.handleMouseLeave}
       >
-        <VxBar
+        <StyledVxBar
           x={barX}
           y={scale.y(yy)}
           width={barWidth}
           height={barHeight}
-          className={classes.bar}
           style={{ fill: fillColor }}
         />
         {correctness &&
@@ -196,12 +197,11 @@ export class RawBar extends React.Component {
 
             return (
               <>
-                <VxBar
+                <StyledVxBar
                   x={barX + 2} // add 2px for the stroke (the dashed border)
                   y={yToRender}
                   width={barWidth - 4} // substract 4px for the total stroke
                   height={diffPx}
-                  className={classes.bar}
                   style={{
                     stroke: indicatorBarColor,
                     strokeWidth: 2,
@@ -234,22 +234,7 @@ export class RawBar extends React.Component {
   }
 }
 
-const Bar = withStyles((theme) => ({
-  bar: {
-    fill: color.defaults.TERTIARY,
-  },
-  correctIcon: {
-    backgroundColor: color.correct(),
-    borderRadius: theme.spacing.unit * 2,
-    color: color.defaults.WHITE,
-    fontSize: '10px',
-    width: '10px',
-    height: '10px',
-    padding: '2px',
-    border: `1px solid ${color.defaults.WHITE}`,
-    boxSizing: 'unset', // to override the default border-box in IBX
-  },
-}))(RawBar);
+const Bar = RawBar;
 
 export class Bars extends React.Component {
   static propTypes = {

package/src/chart-setup.jsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { color } from '@pie-lib/render-ui';
-import { withStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
 import ChartType from './chart-type';
 import { NumberTextFieldCustom } from '@pie-lib/config-ui';
 import { AlertDialog } from '@pie-lib/config-ui';
@@ -24,9 +24,52 @@ export const resetValues = (data, updateModel, range, onChange, model) => {
   }
 };
 
+const StyledWrapper = styled('div')(() => ({
+  width: '450px',
+}));
+
+const StyledContent = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  marginTop: theme.spacing(3),
+}));
+
+const StyledColumnView = styled('div')(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+}));
+
+const StyledRowView = styled('div')(() => ({
+  display: 'flex',
+  justifyContent: 'space-around',
+  alignItems: 'center',
+}));
+
+const StyledTextField = styled(NumberTextFieldCustom)(({ theme }) => ({
+  width: '130px',
+  margin: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
+}));
+
+const StyledMediumTextField = styled(NumberTextFieldCustom)(({ theme }) => ({
+  width: '160px',
+  margin: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
+}));
+
+const StyledDimensions = styled('div')(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  margin: `${theme.spacing(3)} 0`,
+}));
+
+const StyledDisabled = styled(Typography)(() => ({
+  color: color.disabled(),
+}));
+
 const ConfigureChartPanel = (props) => {
   const {
-    classes,
     model,
     onChange,
     chartDimensions,
@@ -67,24 +110,22 @@ const ConfigureChartPanel = (props) => {
   const labelOptions = labelValues && labelValues.range ? { customValues: labelValues.range } : { min: 0, max: 10000 };
 
   const stepConfig = (
-    <div className={classes.rowView}>
-      <NumberTextFieldCustom
-        className={classes.mediumTextField}
+    <StyledRowView>
+      <StyledMediumTextField
         label="Grid Interval"
         value={range.step}
         variant="outlined"
         onChange={(e, v) => onRangeChanged('step', v, e)}
         {...gridOptions}
       />
-      <NumberTextFieldCustom
-        className={classes.mediumTextField}
+      <StyledMediumTextField
         label={'Label Interval'}
         value={range.labelStep}
         variant={'outlined'}
         onChange={(e, v) => onRangeChanged('labelStep', v, e)}
         {...labelOptions}
       />
-    </div>
+    </StyledRowView>
   );
 
   const handleAlertDialog = (openStatus, callback) => {
@@ -236,18 +277,17 @@ const ConfigureChartPanel = (props) => {
   };
 
   return (
-    <div className={classes.wrapper}>
+    <StyledWrapper>
       <Typography variant={'subtitle1'}>Configure Chart</Typography>
-      <div className={classes.content}>
-        <div className={classes.rowView}>
+      <StyledContent>
+        <StyledRowView>
           <ChartType
             value={model.chartType}
             onChange={(e) => onChartTypeChange(e.target.value)}
             availableChartTypes={availableChartTypes}
             chartTypeLabel={chartTypeLabel}
           />
-          <NumberTextFieldCustom
-            className={classes.mediumTextField}
+          <StyledMediumTextField
             label="Max Value"
             value={range.max}
             min={rangeProps(model.chartType).min}
@@ -255,18 +295,17 @@ const ConfigureChartPanel = (props) => {
             variant="outlined"
             onChange={(e, v) => onRangeChanged('max', v, e)}
           />
-        </div>
+        </StyledRowView>
         {!model.chartType.includes('Plot') && stepConfig}
 
         {showInConfigPanel && (
-          <div className={classes.dimensions}>
+          <StyledDimensions>
             <div>
               <Typography>Dimensions(px)</Typography>
             </div>
 
-            <div className={classes.columnView}>
-              <NumberTextFieldCustom
-                className={classes.textField}
+            <StyledColumnView>
+              <StyledTextField
                 label={'Width'}
                 value={size.width}
                 min={widthConstraints.min}
@@ -275,12 +314,11 @@ const ConfigureChartPanel = (props) => {
                 variant={'outlined'}
                 onChange={(e, v) => onSizeChanged('width', v)}
               />
-              <Typography className={classes.disabled}>Min 50, Max 700</Typography>
-            </div>
+              <StyledDisabled>Min 50, Max 700</StyledDisabled>
+            </StyledColumnView>
 
-            <div className={classes.columnView}>
-              <NumberTextFieldCustom
-                className={classes.textField}
+            <StyledColumnView>
+              <StyledTextField
                 label={'Height'}
                 value={size.height}
                 min={heightConstraints.min}
@@ -289,11 +327,11 @@ const ConfigureChartPanel = (props) => {
                 variant={'outlined'}
                 onChange={(e, v) => onSizeChanged('height', v)}
               />
-              <Typography className={classes.disabled}>Min 400, Max 700</Typography>
-            </div>
-          </div>
+              <StyledDisabled>Min 400, Max 700</StyledDisabled>
+            </StyledColumnView>
+          </StyledDimensions>
         )}
-      </div>
+      </StyledContent>
 
       <AlertDialog
         open={alertDialog.open}
@@ -302,12 +340,11 @@ const ConfigureChartPanel = (props) => {
         onClose={alertDialog.onClose}
         onConfirm={alertDialog.onConfirm}
       />
-    </div>
+    </StyledWrapper>
   );
 };
 
 ConfigureChartPanel.propTypes = {
-  classes: PropTypes.object,
   chartDimensions: PropTypes.object,
   domain: PropTypes.object,
   gridValues: PropTypes.object,
@@ -322,51 +359,4 @@ ConfigureChartPanel.propTypes = {
   chartTypeLabel: PropTypes.string,
 };
 
-const styles = (theme) => ({
-  wrapper: {
-    width: '450px',
-  },
-  content: {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    marginTop: theme.spacing.unit * 3,
-  },
-  columnView: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-  },
-  rowView: {
-    display: 'flex',
-    justifyContent: 'space-around',
-    alignItems: 'center',
-  },
-  textField: {
-    width: '130px',
-    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
-  },
-  mediumTextField: {
-    width: '160px',
-    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
-  },
-  largeTextField: {
-    width: '230px',
-    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
-  },
-  text: {
-    fontStyle: 'italic',
-    margin: `${theme.spacing.unit}px 0`,
-  },
-  dimensions: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    margin: `${theme.spacing.unit * 3}px 0`,
-  },
-  disabled: {
-    color: color.disabled(),
-  },
-});
-
-export default withStyles(styles)(ConfigureChartPanel);
+export default ConfigureChartPanel;

package/src/chart-type.js

@@ -1,24 +1,29 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
-import InputLabel from '@material-ui/core/InputLabel';
-import Select from '@material-ui/core/Select';
-import OutlinedInput from '@material-ui/core/OutlinedInput';
+import { styled } from '@mui/material/styles';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import Select from '@mui/material/Select';
+import OutlinedInput from '@mui/material/OutlinedInput';
 
-const ChartType = withStyles(() => ({
-  chartType: {
-    width: '160px',
-  },
-  chartTypeLabel: {
-    backgroundColor: 'transparent',
-  },
-}))(({ onChange, value, classes, availableChartTypes, chartTypeLabel }) => (
-  <div className={classes.chartType}>
-    <FormControl variant={'outlined'} className={classes.chartType}>
-      <InputLabel id="type-helper-label" className={classes.chartTypeLabel}>
+const StyledContainer = styled('div')(() => ({
+  width: '160px',
+}));
+
+const StyledFormControl = styled(FormControl)(() => ({
+  width: '160px',
+}));
+
+const StyledInputLabel = styled(InputLabel)(() => ({
+  backgroundColor: 'transparent',
+}));
+
+const ChartType = ({ onChange, value, availableChartTypes, chartTypeLabel }) => (
+  <StyledContainer>
+    <StyledFormControl variant={'outlined'}>
+      <StyledInputLabel id="type-helper-label">
         {chartTypeLabel}
-      </InputLabel>
+      </StyledInputLabel>
       <Select
         labelId="type-helper-label"
         value={value}
@@ -32,8 +37,8 @@ const ChartType = withStyles(() => ({
         {availableChartTypes?.dotPlot && <MenuItem value={'dotPlot'}>{availableChartTypes.dotPlot}</MenuItem>}
         {availableChartTypes?.linePlot && <MenuItem value={'linePlot'}>{availableChartTypes.linePlot}</MenuItem>}
       </Select>
-    </FormControl>
-  </div>
-));
+    </StyledFormControl>
+  </StyledContainer>
+);
 
 export default ChartType;