@pie-lib/charting 5.36.2 → 5.36.3-next.155

package/src/tool-menu.jsx

@@ -1,63 +1,59 @@
 import React from 'react';
 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: {
-    '& span': {
-      color: color.primary(),
-    },
-    backgroundColor: color.background(),
-  },
-  disabled: {
+  }),
+  ...(!selected &&
+    !disabled && {
+      '& span': {
+        color: color.primary(),
+      },
+      backgroundColor: color.background(),
+    }),
+  ...(disabled && {
     '& span': {
       color: color.primary(),
     },
     backgroundColor: color.disabled(),
-  },
-});
+  }),
+}));
+
+export const MiniButton = (props) => {
+  const { disabled, selected, value, onClick } = props;
 
-export const MiniButton = withStyles(buttonStyles)((props) => {
-  const { disabled, classes, 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) }}
       value={value}
       key={value}
       variant="outlined"
       onClick={onClick}
     >
       {value}
-    </Button>
+    </StyledMiniButton>
   );
-});
+};
 MiniButton.propTypes = {
   disabled: PropTypes.bool,
   className: PropTypes.string,
-  disabledClassName: PropTypes.string,
   selected: PropTypes.bool,
   value: PropTypes.string,
   onClick: PropTypes.func,
@@ -77,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;