@pie-lib/charting 5.4.0 → 5.4.1

package/src/mark-label.jsx

@@ -7,7 +7,7 @@ import { types } from '@pie-lib/plot';
 import { correct, incorrect, disabled } from './common/styles';
 import { color } from '@pie-lib/render-ui';
 
-const styles = theme => ({
+const styles = (theme) => ({
   input: {
     float: 'right',
     fontFamily: theme.typography.fontFamily,
@@ -19,15 +19,15 @@ const styles = theme => ({
     '&.incorrect': incorrect('color'),
     '&.disabled': {
       ...disabled('color'),
-      backgroundColor: 'transparent !important'
-    }
-  }
+      backgroundColor: 'transparent !important',
+    },
+  },
 });
 
-export const MarkLabel = props => {
+export const MarkLabel = (props) => {
   // eslint-disable-next-line no-unused-vars
   const [input, setInput] = useState(null);
-  const _ref = useCallback(node => setInput(node), null);
+  const _ref = useCallback((node) => setInput(node), null);
 
   const {
     mark,
@@ -38,17 +38,17 @@ export const MarkLabel = props => {
     rotate,
     correctness,
     autoFocus,
-    error
+    error,
   } = props;
   const [label, setLabel] = useState(mark.label);
-  const onChange = e => setLabel(e.target.value);
-  const onChangeProp = e => props.onChange(e.target.value);
+  const onChange = (e) => setLabel(e.target.value);
+  const onChangeProp = (e) => props.onChange(e.target.value);
   let extraStyle = {};
 
   if (rotate) {
     extraStyle = {
       width: 'unset',
-      textAlign: 'left'
+      textAlign: 'left',
     };
   }
 
@@ -60,17 +60,12 @@ export const MarkLabel = props => {
   return (
     <AutosizeInput
       autoFocus={autoFocus}
-      inputRef={r => {
+      inputRef={(r) => {
         _ref(r);
         externalInputRef(r);
       }}
       disabled={disabled}
-      inputClassName={cn(
-        classes.input,
-        correctness && correctness.label,
-        disabled && 'disabled',
-        error && 'error'
-      )}
+      inputClassName={cn(classes.input, correctness && correctness.label, disabled && 'disabled', error && 'error')}
       inputStyle={{
         minWidth: barWidth,
         textAlign: 'center',
@@ -78,7 +73,7 @@ export const MarkLabel = props => {
         boxSizing: 'border-box',
         paddingLeft: 0,
         paddingRight: 0,
-        ...extraStyle
+        ...extraStyle,
       }}
       value={label}
       style={{
@@ -88,7 +83,7 @@ export const MarkLabel = props => {
         left: 0,
         minWidth: barWidth,
         transformOrigin: 'left',
-        transform: `rotate(${rotate}deg)`
+        transform: `rotate(${rotate}deg)`,
       }}
       onChange={onChange}
       onBlur={onChangeProp}
@@ -107,8 +102,8 @@ MarkLabel.propTypes = {
   rotate: PropTypes.number,
   correctness: PropTypes.shape({
     value: PropTypes.string,
-    label: PropTypes.string
-  })
+    label: PropTypes.string,
+  }),
 };
 
 export default withStyles(styles)(MarkLabel);

package/src/plot/common/plot.jsx

@@ -24,18 +24,18 @@ export class RawPlot extends React.Component {
     interactive: PropTypes.bool,
     correctness: PropTypes.shape({
       value: PropTypes.string,
-      label: PropTypes.string
-    })
+      label: PropTypes.string,
+    }),
   };
 
   constructor(props) {
     super(props);
     this.state = {
-      dragValue: undefined
+      dragValue: undefined,
     };
   }
 
-  setDragValue = dragValue => this.setState({ dragValue });
+  setDragValue = (dragValue) => this.setState({ dragValue });
 
   dragStop = () => {
     const { label, onChangeCategory } = this.props;
@@ -56,17 +56,7 @@ export class RawPlot extends React.Component {
   };
 
   render() {
-    const {
-      graphProps,
-      value,
-      label,
-      classes,
-      xBand,
-      index,
-      CustomBarElement,
-      interactive,
-      correctness
-    } = this.props;
+    const { graphProps, value, label, classes, xBand, index, CustomBarElement, interactive, correctness } = this.props;
 
     const { scale, range, size } = graphProps;
     const { max } = range || {};
@@ -91,7 +81,7 @@ export class RawPlot extends React.Component {
 
     return (
       <React.Fragment>
-        {values.map(index =>
+        {values.map((index) =>
           CustomBarElement({
             index,
             pointDiameter,
@@ -101,15 +91,15 @@ export class RawPlot extends React.Component {
             label,
             value,
             classes,
-            scale
-          })
+            scale,
+          }),
         )}
         <Component
           x={barX}
           y={v}
           interactive={interactive}
           width={barWidth}
-          onDrag={v => this.dragValue(value, v)}
+          onDrag={(v) => this.dragValue(value, v)}
           onDragStop={this.dragStop}
           graphProps={graphProps}
           correctness={correctness}
@@ -119,17 +109,17 @@ export class RawPlot extends React.Component {
   }
 }
 
-const Bar = withStyles(theme => ({
+const Bar = withStyles((theme) => ({
   dot: {
     fill: color.primaryLight(),
     '&.correct': correct('stroke'),
-    '&.incorrect': incorrect('stroke')
+    '&.incorrect': incorrect('stroke'),
   },
   line: {
     stroke: color.primaryLight(),
     '&.correct': correct('stroke'),
-    '&.incorrect': incorrect('stroke')
-  }
+    '&.incorrect': incorrect('stroke'),
+  },
 }))(RawPlot);
 
 export class Plot extends React.Component {
@@ -139,7 +129,7 @@ export class Plot extends React.Component {
     xBand: PropTypes.func,
     graphProps: types.GraphPropsType.isRequired,
     defineChart: PropTypes.bool,
-    CustomBarElement: PropTypes.func
+    CustomBarElement: PropTypes.func,
   };
 
   render() {
@@ -155,7 +145,7 @@ export class Plot extends React.Component {
             xBand={xBand}
             index={index}
             key={`bar-${d.label}-${d.value}-${index}`}
-            onChangeCategory={category => onChangeCategory(index, category)}
+            onChangeCategory={(category) => onChangeCategory(index, category)}
             graphProps={graphProps}
             CustomBarElement={CustomBarElement}
             correctness={d.correctness}

package/src/plot/dot.js

@@ -5,22 +5,14 @@ import { dataToXBand } from '../utils';
 import Plot from './common/plot';
 import { Circle } from '@vx/shape';
 
-const CustomBarElement = props => {
+const CustomBarElement = (props) => {
   const { index, pointDiameter, barX, barWidth, pointHeight, label, value, classes, scale } = props;
 
   const r = pointDiameter / 2;
   const cx = barX + (barWidth - pointDiameter) / 2 + r;
   const cy = scale.y(index) - (pointHeight - pointDiameter) / 2 - r;
 
-  return (
-    <Circle
-      key={`point-${label}-${value}-${index}`}
-      className={classes.dot}
-      cx={cx}
-      cy={cy}
-      r={r}
-    />
-  );
+  return <Circle key={`point-${label}-${value}-${index}`} className={classes.dot} cx={cx} cy={cy} r={r} />;
 };
 
 CustomBarElement.propTypes = {
@@ -32,14 +24,14 @@ CustomBarElement.propTypes = {
   value: PropTypes.number,
   label: PropTypes.string,
   classes: PropTypes.object,
-  scale: PropTypes.object
+  scale: PropTypes.object,
 };
 
 export class DotPlot extends React.Component {
   static propTypes = {
     data: PropTypes.array,
     onChange: PropTypes.func,
-    graphProps: types.GraphPropsType.isRequired
+    graphProps: types.GraphPropsType.isRequired,
   };
 
   render() {
@@ -55,5 +47,5 @@ export class DotPlot extends React.Component {
 export default () => ({
   type: 'dotPlot',
   Component: DotPlot,
-  name: 'Dot Plot'
+  name: 'Dot Plot',
 });

package/src/plot/line.js

@@ -6,7 +6,7 @@ import Plot from './common/plot';
 import { LinePath } from '@vx/shape';
 import { Group } from '@vx/group';
 
-const CustomBarElement = props => {
+const CustomBarElement = (props) => {
   const { index, pointDiameter, barX, barWidth, pointHeight, label, value, classes, scale } = props;
 
   const x = barX + (barWidth - pointDiameter) / 2;
@@ -15,19 +15,25 @@ const CustomBarElement = props => {
   return (
     <Group>
       <LinePath
-        data={[{ x, y }, { x: x + pointDiameter, y: y - pointDiameter }]}
+        data={[
+          { x, y },
+          { x: x + pointDiameter, y: y - pointDiameter },
+        ]}
         key={`point-${label}-${value}-${index}-1`}
         className={classes.line}
-        x={d => d.x}
-        y={d => d.y}
+        x={(d) => d.x}
+        y={(d) => d.y}
         strokeWidth={pointDiameter / 5}
       />
       <LinePath
-        data={[{ x, y: y - pointDiameter }, { x: x + pointDiameter, y }]}
+        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}
+        x={(d) => d.x}
+        y={(d) => d.y}
         strokeWidth={pointDiameter / 5}
       />
     </Group>
@@ -43,14 +49,14 @@ CustomBarElement.propTypes = {
   value: PropTypes.number,
   label: PropTypes.string,
   classes: PropTypes.object,
-  scale: PropTypes.object
+  scale: PropTypes.object,
 };
 
 export class LinePlot extends React.Component {
   static propTypes = {
     data: PropTypes.array,
     onChange: PropTypes.func,
-    graphProps: types.GraphPropsType.isRequired
+    graphProps: types.GraphPropsType.isRequired,
   };
 
   render() {
@@ -66,5 +72,5 @@ export class LinePlot extends React.Component {
 export default () => ({
   type: 'linePlot',
   Component: LinePlot,
-  name: 'Line Plot'
+  name: 'Line Plot',
 });

package/src/tool-menu.jsx

@@ -7,37 +7,37 @@ import { withStyles } from '@material-ui/core/styles';
 import cn from 'classnames';
 import Button from '@material-ui/core/Button';
 
-const buttonStyles = theme => ({
+const buttonStyles = (theme) => ({
   root: {
     backgroundColor: color.background(),
     color: color.text(),
     border: `1px solid ${color.secondary()}`,
     '&:hover': {
-      backgroundColor: color.secondaryLight()
+      backgroundColor: color.secondaryLight(),
     },
-    fontSize: theme.typography.fontSize
+    fontSize: theme.typography.fontSize,
   },
   selected: {
     backgroundColor: color.background(),
     '& span': {
-      color: color.primaryDark()
-    }
+      color: color.primaryDark(),
+    },
   },
   notSelected: {
     '& span': {
-      color: color.primary()
+      color: color.primary(),
     },
-    backgroundColor: color.background()
+    backgroundColor: color.background(),
   },
   disabled: {
     '& span': {
-      color: color.primary()
+      color: color.primary(),
     },
-    backgroundColor: color.disabled()
-  }
+    backgroundColor: color.disabled(),
+  },
 });
 
-export const MiniButton = withStyles(buttonStyles)(props => {
+export const MiniButton = withStyles(buttonStyles)((props) => {
   const { disabled, classes, className, selected, value, onClick } = props;
   return (
     <Button
@@ -61,14 +61,14 @@ MiniButton.propTypes = {
   disabledClassName: PropTypes.string,
   selected: PropTypes.bool,
   value: PropTypes.string,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
 };
 
 export class ToolMenu extends React.Component {
   static propTypes = {
     className: PropTypes.string,
     addCategory: PropTypes.func,
-    disabled: PropTypes.bool
+    disabled: PropTypes.bool,
   };
 
   static defaultProps = {};

package/src/utils.js

@@ -15,25 +15,25 @@ export const dataToXBand = (scaleX, data, width, type) => {
       return scaleBand({
         rangeRound: [0, width],
         domain: data && data.map(bandKey),
-        padding: 0.2
+        padding: 0.2,
       });
     case 'histogram':
       return scaleBand({
         rangeRound: [0, width],
         domain: data && data.map(bandKey),
-        padding: 0
+        padding: 0,
       });
     case 'lineCross':
     case 'lineDot':
       return scalePoint({
         domain: data && data.map(bandKey),
-        rangeRound: [0, width]
+        rangeRound: [0, width],
       });
     default:
       return scaleBand({
         range: [0, width],
         domain: data && data.map(bandKey),
-        padding: 0
+        padding: 0,
       });
   }
 };
@@ -83,15 +83,15 @@ export const getDomainAndRangeByChartType = (domain, range, chartType) => {
           step: 1,
           labelStep: 1,
           min: 0,
-          max: 1
+          max: 1,
         },
         range: {
           ...range,
           min: intMin,
           max: intMin === intMax ? intMin + 1 : intMax,
           labelStep,
-          step: 1
-        }
+          step: 1,
+        },
       };
     }
     default:
@@ -101,13 +101,13 @@ export const getDomainAndRangeByChartType = (domain, range, chartType) => {
           step: 1,
           labelStep: 1,
           min: 0,
-          max: 1
+          max: 1,
         },
         range: {
           ...range,
           labelStep,
-          step
-        }
+          step,
+        },
       };
   }
 };
@@ -119,20 +119,20 @@ export const getGridLinesAndAxisByChartType = (range, chartType) => {
       return {
         verticalLines: undefined,
         horizontalLines: getTickValues(range),
-        leftAxis: true
+        leftAxis: true,
       };
     case 'dotPlot':
     case 'linePlot':
       return {
         verticalLines: [],
         horizontalLines: [],
-        leftAxis: false
+        leftAxis: false,
       };
     default:
       return {
         verticalLines: [],
         horizontalLines: getTickValues(range),
-        leftAxis: true
+        leftAxis: true,
       };
   }
 };
@@ -145,7 +145,7 @@ export const getRotateAngle = (fontSize, height) => {
   return 0;
 };
 
-export const getTopPadding = barWidth => {
+export const getTopPadding = (barWidth) => {
   if (barWidth < 30) {
     return 50;
   }