@pie-lib/charting 5.48.0-mui-update.0 → 5.50.0-mui-update.0

package/src/bars/common/bars.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Group } from '@vx/group';
-import { Bar as VxBar } from '@vx/shape';
+import { Group } from '@visx/group';
+import { Bar as VisxBar } from '@visx/shape';
 import { styled } from '@mui/material/styles';
 import debug from 'debug';
 
@@ -51,7 +51,7 @@ const calculateFillColor = (isHovered, barColor, index, hoverHistogramColors, al
   return barColor || null;
 };
 
-const StyledVxBar = styled(VxBar)(() => ({
+const StyledVisxBar = styled(VisxBar)(() => ({
   fill: color.defaults.TERTIARY,
 }));
 
@@ -91,17 +91,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 &&
@@ -110,13 +107,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 });
 
@@ -163,7 +155,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;
@@ -176,46 +167,43 @@ export class RawBar extends React.Component {
         onTouchStart={this.handleMouseEnter}
         onTouchEnd={this.handleMouseLeave}
       >
-        <StyledVxBar
+        <StyledVisxBar
           x={barX}
           y={scale.y(yy)}
           width={barWidth}
           height={barHeight}
           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 (
-              <>
-                <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}
-                  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}
@@ -266,8 +254,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/chart-setup.jsx

@@ -198,7 +198,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 });

package/src/chart.jsx

@@ -212,7 +212,6 @@ export class Chart extends React.Component {
 
   render() {
     const {
-      className,
       domain = {},
       range = {},
       chartingOptions,
@@ -280,7 +279,7 @@ export class Chart extends React.Component {
     }
 
     return (
-      <StyledChartContainer className={className}>
+      <StyledChartContainer>
         <Root
           title={title}
           onChangeTitle={onChangeTitle}

package/src/common/drag-handle.jsx

@@ -47,7 +47,6 @@ const RawDragHandle = ({
   y,
   width,
   graphProps,
-  className,
   interactive,
   defineChart,
   isHovered,
@@ -71,7 +70,6 @@ const RawDragHandle = ({
           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={className}
           {...rest}
         />
       )}
@@ -107,7 +105,6 @@ RawDragHandle.propTypes = {
   y: PropTypes.number.isRequired,
   width: PropTypes.number,
   graphProps: types.GraphPropsType.isRequired,
-  className: PropTypes.string,
   interactive: PropTypes.bool,
   isHovered: PropTypes.bool,
   correctness: PropTypes.shape({

package/src/grid.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import { GridRows, GridColumns } from '@vx/grid';
+import { GridRows, GridColumns } from '@visx/grid';
 
 import { types } from '@pie-lib/plot';
 import { color } from '@pie-lib/render-ui';
@@ -22,7 +22,7 @@ export class Grid extends React.Component {
   static defaultProps = {};
 
   render() {
-    const { 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;
@@ -40,7 +40,7 @@ export class Grid extends React.Component {
     );
 
     return (
-      <StyledGridGroup className={className}>
+      <StyledGridGroup>
         <GridRows
           scale={scale.y}
           width={size.width}

package/src/line/common/line.jsx

@@ -1,6 +1,6 @@
 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';
@@ -89,7 +89,6 @@ export class RawLine extends React.Component {
     const { scale } = graphProps;
     const lineToUse = dragging ? lineState : getData(data, graphProps.domain);
 
-    console.log('defineChart', lineToUse);
     return (
       <React.Fragment>
         <StyledLinePath

package/src/line/line-cross.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { LinePath } from '@vx/shape';
-import { Group } from '@vx/group';
+import { LinePath } from '@visx/shape';
+import { Group } from '@visx/group';
 import { styled } from '@mui/material/styles';
 
 import { color } from '@pie-lib/render-ui';

package/src/line/line-dot.js

@@ -8,10 +8,7 @@ import { dataToXBand } from '../utils';
 import RawLine from './common/line';
 import { CorrectnessIndicator, SmallCorrectPointIndicator } from '../common/correctness-indicators';
 
-
-const StyledHandle = styled('circle')(({ correctness, interactive }) => ({
-}));
-
+const StyledHandle = styled('circle')(({ correctness, interactive }) => ({}));
 
 const StyledTransparentHandle = styled('circle')(() => ({
   height: '20px',
@@ -20,18 +17,7 @@ const StyledTransparentHandle = styled('circle')(() => ({
   pointerEvents: 'auto', // allow drag events
 }));
 
-const DraggableComponent = ({
-  scale,
-  x,
-  y,
-  className,
-  r,
-  correctness,
-  interactive,
-  correctData,
-  label,
-  ...rest
-}) => {
+const DraggableComponent = ({ scale, x, y, r, correctness, interactive, correctData, label, ...rest }) => {
   const [isHovered, setIsHovered] = React.useState(false);
   const allowRolloverEvent = !correctness && interactive;
 
@@ -46,7 +32,6 @@ const DraggableComponent = ({
         cx={scale.x(x)}
         cy={scale.y(y)}
         r={r * 3}
-        className={className}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         {...rest}
@@ -55,20 +40,12 @@ const DraggableComponent = ({
         cx={scale.x(x)}
         cy={scale.y(y)}
         r={r}
-        className={className}
         correctness={correctness}
         interactive={interactive}
         {...rest}
       />
       {/* show correctness indicators */}
-      <CorrectnessIndicator
-        scale={scale}
-        x={x}
-        y={y}
-        r={r}
-        correctness={correctness}
-        interactive={interactive}
-      />
+      <CorrectnessIndicator scale={scale} x={x} y={y} r={r} correctness={correctness} interactive={interactive} />
 
       {/* show correct point if answer was incorrect */}
       <SmallCorrectPointIndicator
@@ -101,7 +78,6 @@ DraggableComponent.propTypes = {
   x: PropTypes.number,
   y: PropTypes.number,
   r: PropTypes.number,
-  className: PropTypes.string,
   correctness: PropTypes.shape({
     value: PropTypes.string,
     label: PropTypes.string,

package/src/plot/common/plot.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import Check from '@mui/icons-material/Check';
 import { styled } from '@mui/material/styles';
-import { Group } from '@vx/group';
+import { Group } from '@visx/group';
 import debug from 'debug';
 
 import { types } from '@pie-lib/plot';
@@ -82,7 +81,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('correctnessIcon', 'correctIcon', 'smallIcon')}
+          className="correctnessIcon correctIcon smallIcon"
           title={correctness.label}
         />
       </foreignObject>

package/src/plot/dot.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Circle } from '@vx/shape';
+import { Circle } from '@visx/shape';
 
 import { types } from '@pie-lib/plot';
 import { dataToXBand } from '../utils';

package/src/plot/line.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { LinePath } from '@vx/shape';
-import { Group } from '@vx/group';
+import { LinePath } from '@visx/shape';
+import { Group } from '@visx/group';
 import { styled } from '@mui/material/styles';
 
 import { types } from '@pie-lib/plot';

package/src/tool-menu.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { color } from '@pie-lib/render-ui';
 
 import { styled } from '@mui/material/styles';
@@ -19,12 +18,13 @@ const StyledMiniButton = styled(Button)(({ theme, selected, disabled }) => ({
       color: color.primaryDark(),
     },
   }),
-  ...(!selected && !disabled && {
-    '& span': {
-      color: color.primary(),
-    },
-    backgroundColor: color.background(),
-  }),
+  ...(!selected &&
+    !disabled && {
+      '& span': {
+        color: color.primary(),
+      },
+      backgroundColor: color.background(),
+    }),
   ...(disabled && {
     '& span': {
       color: color.primary(),
@@ -34,14 +34,14 @@ const StyledMiniButton = styled(Button)(({ theme, selected, disabled }) => ({
 }));
 
 export const MiniButton = (props) => {
-  const { disabled, className, selected, value, onClick } = props;
+  const { disabled, selected, value, onClick } = props;
+
   return (
     <StyledMiniButton
       size="small"
       disabled={disabled}
       selected={selected}
       color={selected ? 'secondary' : 'default'}
-      className={className}
       value={value}
       key={value}
       variant="outlined"
@@ -54,7 +54,6 @@ export const MiniButton = (props) => {
 MiniButton.propTypes = {
   disabled: PropTypes.bool,
   className: PropTypes.string,
-  disabledClassName: PropTypes.string,
   selected: PropTypes.bool,
   value: PropTypes.string,
   onClick: PropTypes.func,
@@ -74,7 +73,7 @@ export class ToolMenu extends React.Component {
     const { className, disabled, addCategory, language } = this.props;
 
     return (
-      <div className={classNames(className)}>
+      <div className={className}>
         {!disabled && (
           <MiniButton value={translator.t('charting.addCategory', { lng: language })} onClick={addCategory} />
         )}

package/src/utils.js

@@ -1,4 +1,4 @@
-import { scaleBand, scalePoint } from '@vx/scale';
+import { scaleBand, scalePoint } from '@visx/scale';
 import { utils } from '@pie-lib/plot';
 
 export const tickCount = utils.tickCount;
@@ -8,39 +8,43 @@ export const point = utils.point;
 export const bandKey = (d, index) => `${index}-${d.label || '-'}`;
 
 export const dataToXBand = (scaleX, data, width, type) => {
+  const chartWidth = width || 400; // fallback
+  const domain = data && data.length ? data.map(bandKey) : ['default'];
+
   switch (type) {
     case 'bar':
     case 'dotPlot':
     case 'linePlot':
       return scaleBand({
-        rangeRound: [0, width],
-        domain: data && data.map(bandKey),
+        range: [0, chartWidth],
+        domain,
         padding: 0.2,
       });
 
     case 'histogram':
       return scaleBand({
-        rangeRound: [0, width],
-        domain: data && data.map(bandKey),
+        range: [0, chartWidth],
+        domain,
         padding: 0,
       });
 
     case 'lineCross':
     case 'lineDot':
       return scalePoint({
-        domain: data && data.map(bandKey),
-        rangeRound: [0, width],
+        domain,
+        range: [0, chartWidth],
       });
 
     default:
       return scaleBand({
-        range: [0, width],
-        domain: data && data.map(bandKey),
+        range: [0, chartWidth],
+        domain,
         padding: 0,
       });
   }
 };
 
+
 export const getTickValues = (prop = {}) => {
   const tickValues = [];
   let tickVal = prop.min;