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

package/src/bars/common/bars.jsx

@@ -1,8 +1,8 @@
 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 { Group } from '@visx/group';
+import { Bar as VisxBar } from '@visx/shape';
+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 StyledVisxBar = styled(VisxBar)(() => ({
+  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,
@@ -67,6 +70,7 @@ export class RawBar extends React.Component {
       label: PropTypes.string,
     }),
     correctData: PropTypes.array,
+    defineChart: PropTypes.bool,
   };
 
   constructor(props) {
@@ -88,17 +92,14 @@ export class RawBar extends React.Component {
   }
 
   handleMouseMove = (e) => {
-    // Update mouse position
     this.mouseX = e.clientX;
     this.mouseY = e.clientY;
-    // Check if the mouse is inside the <g> element
     const isMouseInside = this.isMouseInsideSvgElement();
     this.setState({ isHovered: isMouseInside });
   };
 
   isMouseInsideSvgElement = () => {
     const gBoundingBox = this.gRef.getBoundingClientRect();
-    // Check if the mouse position is within the bounding box
     return (
       this.mouseX >= gBoundingBox.left &&
       this.mouseX <= gBoundingBox.right &&
@@ -107,13 +108,8 @@ export class RawBar extends React.Component {
     );
   };
 
-  handleMouseEnter = () => {
-    this.setState({ isHovered: true });
-  };
-
-  handleMouseLeave = () => {
-    this.setState({ isHovered: false });
-  };
+  handleMouseEnter = () => this.setState({ isHovered: true });
+  handleMouseLeave = () => this.setState({ isHovered: false });
 
   setDragValue = (dragValue) => this.setState({ dragValue });
 
@@ -140,7 +136,6 @@ export class RawBar extends React.Component {
       graphProps,
       value,
       label,
-      classes,
       xBand,
       index,
       interactive,
@@ -161,7 +156,6 @@ export class RawBar extends React.Component {
     const rawY = range.max - v;
     const yy = range.max - rawY;
     const correctValue = correctData ? correctData.find((d) => d.label === label) : null;
-    log('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);
 
     const Component = interactive ? DraggableHandle : DragHandle;
     const isHistogram = !!barColor;
@@ -174,48 +168,43 @@ export class RawBar extends React.Component {
         onTouchStart={this.handleMouseEnter}
         onTouchEnd={this.handleMouseLeave}
       >
-        <VxBar
+        <StyledVisxBar
           x={barX}
           y={scale.y(yy)}
           width={barWidth}
           height={barHeight}
-          className={classes.bar}
           style={{ fill: fillColor }}
         />
-        {correctness &&
-          correctness.value === 'incorrect' &&
-          (() => {
-            const correctVal = parseFloat(correctValue && correctValue.value);
-            if (isNaN(correctVal)) return null;
-            const correctPxHeight = scale.y(range.max - correctVal);
-            const actualPxHeight = barHeight;
-            const diffPx = Math.abs(correctPxHeight - actualPxHeight);
-            const yDiff = scale.y(correctVal);
-            const indicatorBarColor = correctPxHeight > actualPxHeight ? color.borderGray() : color.defaults.WHITE;
-            const yToRender = correctPxHeight > actualPxHeight ? yDiff : yDiff - diffPx;
+        {correctness && correctness.value === 'incorrect' && (() => {
+          const correctVal = parseFloat(correctValue && correctValue.value);
+          if (isNaN(correctVal)) return null;
+          const correctPxHeight = scale.y(range.max - correctVal);
+          const actualPxHeight = barHeight;
+          const diffPx = Math.abs(correctPxHeight - actualPxHeight);
+          const yDiff = scale.y(correctVal);
+          const indicatorBarColor = correctPxHeight > actualPxHeight ? color.borderGray() : color.defaults.WHITE;
+          const yToRender = correctPxHeight > actualPxHeight ? yDiff : yDiff - diffPx;
 
-            return (
-              <>
-                <VxBar
-                  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,
-                    strokeDasharray: '5,2',
-                    fill: 'none',
-                  }}
-                />
-                {/* adjust the position based on whether it's a histogram or not, because the histogram does not have space for the icon on the side */}
-                <foreignObject x={barX + barWidth - (isHistogram ? 24 : 14)} y={yDiff - 12} width={24} height={24}>
-                  <CorrectCheckIcon dashColor={indicatorBarColor} />
-                </foreignObject>
-              </>
-            );
-          })()}
+          return (
+            <>
+              <StyledVisxBar
+                x={barX + 2}
+                y={yToRender}
+                width={barWidth - 4}
+                height={diffPx}
+                style={{ stroke: indicatorBarColor, strokeWidth: 2, strokeDasharray: '5,2', fill: 'none' }}
+              />
+              <foreignObject
+                x={barX + barWidth - (isHistogram ? 24 : 14)}
+                y={yDiff - 12}
+                width={24}
+                height={24}
+              >
+                <CorrectCheckIcon dashColor={indicatorBarColor} />
+              </foreignObject>
+            </>
+          );
+        })()}
         <Component
           x={barX}
           y={v}
@@ -234,22 +223,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 = {
@@ -281,8 +255,7 @@ export class Bars extends React.Component {
             correctness={d.correctness}
             correctData={correctData}
             barColor={
-              histogram &&
-              (histogramColors[index] ? histogramColors[index] : histogramColors[index % histogramColors.length])
+              histogram && (histogramColors[index] ? histogramColors[index] : histogramColors[index % histogramColors.length])
             }
           />
         ))}

package/src/bars/common/correct-check-icon.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 export const CorrectCheckIcon = ({ dashColor }) => (
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -18,3 +19,7 @@ export const CorrectCheckIcon = ({ dashColor }) => (
     />
   </svg>
 );
+
+CorrectCheckIcon.propTypes = {
+  dashColor: PropTypes.string,
+};

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,37 +110,30 @@ 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) => {
+  const handleAlertDialog = (openStatus) => {
     setAlertDialog(
       (prevState) => ({
         ...prevState,
         open: openStatus,
       }),
-      () => {
-        if (callback) {
-          callback();
-        }
-      },
     );
 
     setOpen(openStatus);
@@ -105,7 +141,7 @@ const ConfigureChartPanel = (props) => {
 
   const setPropertiesToFalse = (data, property) => {
     return data.map((obj) => {
-      if (obj.hasOwnProperty(property)) {
+      if (Object.prototype.hasOwnProperty.call(obj, property)) {
         obj[property] = property == 'interactive' ? true : false;
       }
       return obj;
@@ -157,7 +193,7 @@ const ConfigureChartPanel = (props) => {
       // check if current chart values are invalid for given range step/max
       const outOfRange = isOutOfRange(model.data, range) || isOutOfRange(model.correctAnswer.data, range);
 
-      if (outOfRange && JSON.stringify(e) !== '{}') {
+      if (outOfRange && e?.target) {
         setOpen(true);
       } else {
         onChange({ ...model, range });
@@ -180,7 +216,8 @@ const ConfigureChartPanel = (props) => {
         text: 'This change will remove values defined for one or more categories',
         onConfirm: () => {
           removeOutOfRangeValues();
-          handleAlertDialog(false, onChange({ ...model, range, correctAnswer }));
+          handleAlertDialog(false);
+          onChange({ ...model, range, correctAnswer });
         },
         onClose: () => {
           range[rangeKey] = resetValue;
@@ -214,7 +251,8 @@ const ConfigureChartPanel = (props) => {
           onConfirm: () => {
             getPlotConfiguration();
             removeOutOfRangeValues();
-            handleAlertDialog(false, onChange({ ...model, range, chartType }));
+            handleAlertDialog(false);
+            onChange({ ...model, range, chartType });
           },
           onClose: () => {
             handleAlertDialog(false);
@@ -236,18 +274,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 +292,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 +311,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 +324,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 +337,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 +356,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,29 +1,38 @@
 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';
 
-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',
+}));
+
+import PropTypes from 'prop-types';
+
+const ChartType = ({ onChange, value, availableChartTypes, chartTypeLabel }) => (
+  <StyledContainer>
+    <StyledFormControl variant={'outlined'}>
+      <StyledInputLabel id="type-helper-label">
         {chartTypeLabel}
-      </InputLabel>
+      </StyledInputLabel>
       <Select
         labelId="type-helper-label"
+        id="type-helper-label-select"
+        name="chartType"
         value={value}
         onChange={onChange}
-        input={<OutlinedInput labelWidth={75} name="type" />}
+        label={chartTypeLabel}
+        MenuProps={{transitionDuration: { enter: 225, exit: 195 }}}
       >
         {availableChartTypes?.histogram && <MenuItem value={'histogram'}>{availableChartTypes.histogram}</MenuItem>}
         {availableChartTypes?.bar && <MenuItem value={'bar'}>{availableChartTypes.bar}</MenuItem>}
@@ -32,8 +41,22 @@ const ChartType = withStyles(() => ({
         {availableChartTypes?.dotPlot && <MenuItem value={'dotPlot'}>{availableChartTypes.dotPlot}</MenuItem>}
         {availableChartTypes?.linePlot && <MenuItem value={'linePlot'}>{availableChartTypes.linePlot}</MenuItem>}
       </Select>
-    </FormControl>
-  </div>
-));
+    </StyledFormControl>
+  </StyledContainer>
+);
+
+ChartType.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string.isRequired,
+  availableChartTypes: PropTypes.shape({
+    histogram: PropTypes.string,
+    bar: PropTypes.string,
+    lineDot: PropTypes.string,
+    lineCross: PropTypes.string,
+    dotPlot: PropTypes.string,
+    linePlot: PropTypes.string,
+  }),
+  chartTypeLabel: PropTypes.string,
+};
 
 export default ChartType;