@pie-lib/graphing 2.11.3-next.52 → 2.11.5-next.0

package/src/grid.jsx

@@ -11,7 +11,7 @@ export class Grid extends React.Component {
     disabled: PropTypes.bool,
     disabledAdditionalGrid: PropTypes.bool,
     classes: PropTypes.object.isRequired,
-    graphProps: types.GraphPropsType.isRequired
+    graphProps: types.GraphPropsType.isRequired,
   };
 
   getAdditionalGridProps = (rowTickValues, columnTickValues) => {
@@ -20,17 +20,17 @@ export class Grid extends React.Component {
         scale,
         size: { width, height },
         domain,
-        range
-      }
+        range,
+      },
     } = this.props;
     const rowTickLabelValues = getTickValues({
       ...range,
-      step: range.labelStep
-    }).filter(value => rowTickValues.includes(value));
+      step: range.labelStep,
+    }).filter((value) => rowTickValues.includes(value));
     const columnTickLabelValues = getTickValues({
       ...domain,
-      step: domain.labelStep
-    }).filter(value => columnTickValues.includes(value));
+      step: domain.labelStep,
+    }).filter((value) => columnTickValues.includes(value));
 
     const minValueLength =
       (rowTickLabelValues.length &&
@@ -49,8 +49,7 @@ export class Grid extends React.Component {
     const horizontalDistanceToZero = scale.x(0);
     const verticalDistanceToZero = scale.y(0);
     const columnLabelLength = 28;
-    const rowStrokeDasharray = `${horizontalDistanceToZero -
-      rowLabelLength} ${rowLabelLength} ${width}`;
+    const rowStrokeDasharray = `${horizontalDistanceToZero - rowLabelLength} ${rowLabelLength} ${width}`;
     const columnStrokeDasharray = `${verticalDistanceToZero} ${columnLabelLength} ${height}`;
 
     const displayAdditionalGrid =
@@ -60,14 +59,13 @@ export class Grid extends React.Component {
       columnTickLabelValues &&
       rowTickLabelValues.length > 1 &&
       columnTickLabelValues.length > 1 &&
-      (rowTickLabelValues.length !== rowTickValues.length ||
-        columnTickLabelValues.length !== columnTickValues.length);
+      (rowTickLabelValues.length !== rowTickValues.length || columnTickLabelValues.length !== columnTickValues.length);
 
     const filteredColumnValues = columnTickLabelValues.filter(
-      value => value >= 0 || horizontalDistanceToZero - scale.x(value) > rowLabelLength
+      (value) => value >= 0 || horizontalDistanceToZero - scale.x(value) > rowLabelLength,
     );
     const filteredRowValues = rowTickLabelValues.filter(
-      value => value >= 0 || scale.y(value) - verticalDistanceToZero > columnLabelLength
+      (value) => value >= 0 || scale.y(value) - verticalDistanceToZero > columnLabelLength,
     );
 
     return {
@@ -75,7 +73,7 @@ export class Grid extends React.Component {
       columnTickLabelValues: filteredColumnValues,
       rowStrokeDasharray,
       columnStrokeDasharray,
-      displayAdditionalGrid
+      displayAdditionalGrid,
     };
   };
 
@@ -85,7 +83,7 @@ export class Grid extends React.Component {
       scale,
       size: { height, width },
       domain,
-      range
+      range,
     } = graphProps;
     const rowTickValues = getTickValues(range);
     const columnTickValues = getTickValues(domain);
@@ -94,13 +92,13 @@ export class Grid extends React.Component {
       columnTickLabelValues,
       rowStrokeDasharray,
       columnStrokeDasharray,
-      displayAdditionalGrid
+      displayAdditionalGrid,
     } = this.getAdditionalGridProps(rowTickValues, columnTickValues);
 
     return (
       <>
         <vx.Grid
-          innerRef={r => (this.grid = r)}
+          innerRef={(r) => (this.grid = r)}
           xScale={scale.x}
           yScale={scale.y}
           width={width}
@@ -134,6 +132,6 @@ export class Grid extends React.Component {
 
 export default withStyles(() => ({
   grid: {
-    stroke: 'purple' // TODO hardcoded color
-  }
+    stroke: 'purple', // TODO hardcoded color
+  },
 }))(Grid);

package/src/labels.jsx

@@ -10,7 +10,7 @@ const rotations = {
   left: -90,
   top: 0,
   bottom: 0,
-  right: 90
+  right: 90,
 };
 
 export const getTransform = (side, width, height) => {
@@ -50,11 +50,11 @@ class RawLabel extends React.Component {
     classes: PropTypes.object,
     disabledLabel: PropTypes.bool,
     placeholder: PropTypes.string,
-    graphProps: types.GraphPropsType.isRequired
+    graphProps: types.GraphPropsType.isRequired,
   };
 
   static defaultProps = {
-    onChange: () => {}
+    onChange: () => {},
   };
 
   render() {
@@ -74,7 +74,7 @@ class RawLabel extends React.Component {
       'italic',
       'underline',
       'strikethrough',
-      'math'
+      'math',
       // 'languageCharacters'
     ];
 
@@ -92,16 +92,16 @@ class RawLabel extends React.Component {
             className={cn(
               {
                 [classes.bottomLabel]: side === 'bottom',
-                [classes.disabledAxisLabel]: disabledLabel
+                [classes.disabledAxisLabel]: disabledLabel,
               },
-              classes.axisLabel
+              classes.axisLabel,
             )}
             markup={text || ''}
             onChange={onChange}
             placeholder={!disabledLabel && placeholder}
             toolbarOpts={{
               position: side === 'bottom' ? 'top' : 'bottom',
-              noBorder: true
+              noBorder: true,
             }}
             activePlugins={activePlugins}
           />
@@ -111,28 +111,28 @@ class RawLabel extends React.Component {
   }
 }
 
-const Label = withStyles(theme => ({
+const Label = withStyles((theme) => ({
   label: {
-    fill: color.secondary()
+    fill: color.secondary(),
   },
   axisLabel: {
     fontSize: theme.typography.fontSize - 2,
     textAlign: 'center',
-    padding: '0 4px'
+    padding: '0 4px',
   },
   disabledAxisLabel: {
-    pointerEvents: 'none'
+    pointerEvents: 'none',
   },
   bottomLabel: {
-    marginTop: '44px'
-  }
+    marginTop: '44px',
+  },
 }))(RawLabel);
 
 export const LabelType = {
   left: PropTypes.string,
   top: PropTypes.string,
   bottom: PropTypes.string,
-  right: PropTypes.string
+  right: PropTypes.string,
 };
 
 export class Labels extends React.Component {
@@ -142,7 +142,7 @@ export class Labels extends React.Component {
     disabledLabels: PropTypes.bool,
     placeholders: PropTypes.object,
     value: PropTypes.shape(LabelType),
-    graphProps: PropTypes.object
+    graphProps: PropTypes.object,
   };
 
   static defaultProps = {};
@@ -151,7 +151,7 @@ export class Labels extends React.Component {
     const { value, onChange } = this.props;
     const labels = {
       ...value,
-      [side]: newValue
+      [side]: newValue,
     };
 
     onChange(labels);
@@ -169,7 +169,7 @@ export class Labels extends React.Component {
           disabledLabel={disabledLabels}
           placeholder={placeholders.left}
           graphProps={graphProps}
-          onChange={value => this.onChangeLabel(value, 'left')}
+          onChange={(value) => this.onChangeLabel(value, 'left')}
         />
         <Label
           key="top"
@@ -178,7 +178,7 @@ export class Labels extends React.Component {
           disabledLabel={disabledLabels}
           placeholder={placeholders.top}
           graphProps={graphProps}
-          onChange={value => this.onChangeLabel(value, 'top')}
+          onChange={(value) => this.onChangeLabel(value, 'top')}
         />
         <Label
           key="bottom"
@@ -187,7 +187,7 @@ export class Labels extends React.Component {
           disabledLabel={disabledLabels}
           placeholder={placeholders.bottom}
           graphProps={graphProps}
-          onChange={value => this.onChangeLabel(value, 'bottom')}
+          onChange={(value) => this.onChangeLabel(value, 'bottom')}
         />
         <Label
           key="right"
@@ -196,7 +196,7 @@ export class Labels extends React.Component {
           disabledLabel={disabledLabels}
           placeholder={placeholders.right}
           graphProps={graphProps}
-          onChange={value => this.onChangeLabel(value, 'right')}
+          onChange={(value) => this.onChangeLabel(value, 'right')}
         />
       </React.Fragment>
     );

package/src/mark-label.jsx

@@ -7,7 +7,7 @@ import { types } from '@pie-lib/plot';
 import { useDebounce } from './use-debounce';
 import { color } from '@pie-lib/render-ui';
 
-const styles = theme => ({
+const styles = (theme) => ({
   input: {
     float: 'right',
     padding: theme.spacing.unit * 0.5,
@@ -15,17 +15,17 @@ const styles = theme => ({
     fontSize: theme.typography.fontSize,
     border: `solid 1px ${color.secondary()}`,
     borderRadius: '3px',
-    color: color.primaryDark()
+    color: color.primaryDark(),
   },
   disabled: {
     border: `solid 1px ${color.primaryDark()}`,
-    background: color.background()
+    background: color.background(),
   },
   disabledMark: {
     border: `solid 1px ${color.disabled()}`,
     background: color.background(),
-    color: color.disabled()
-  }
+    color: color.disabled(),
+  },
 });
 
 export const position = (graphProps, mark, rect) => {
@@ -56,26 +56,26 @@ export const coordinates = (graphProps, mark, rect, position) => {
     case 'top-left': {
       return {
         left: scale.x(mark.x) - shift - rect.width,
-        top: scale.y(mark.y) - shift - rect.height
+        top: scale.y(mark.y) - shift - rect.height,
       };
     }
     case 'top-right': {
       return {
         left: scale.x(mark.x) + shift,
-        top: scale.y(mark.y) - shift - rect.height
+        top: scale.y(mark.y) - shift - rect.height,
       };
     }
   }
 };
 
-export const MarkLabel = props => {
+export const MarkLabel = (props) => {
   const [input, setInput] = useState(null);
-  const _ref = useCallback(node => setInput(node));
+  const _ref = useCallback((node) => setInput(node));
 
   const { mark, graphProps, classes, disabled, inputRef: externalInputRef } = props;
   const [label, setLabel] = useState(mark.label);
 
-  const onChange = e => setLabel(e.target.value);
+  const onChange = (e) => setLabel(e.target.value);
 
   const debouncedLabel = useDebounce(label, 200);
 
@@ -98,14 +98,14 @@ export const MarkLabel = props => {
   const style = {
     position: 'absolute',
     pointerEvents: 'auto',
-    ...leftTop
+    ...leftTop,
   };
 
   const disabledInput = disabled || mark.disabled;
 
   return (
     <AutosizeInput
-      inputRef={r => {
+      inputRef={(r) => {
         _ref(r);
         externalInputRef(r);
       }}
@@ -124,7 +124,7 @@ MarkLabel.propTypes = {
   graphProps: types.GraphPropsType,
   classes: PropTypes.object,
   inputRef: PropTypes.func,
-  mark: PropTypes.object
+  mark: PropTypes.object,
 };
 
 export default withStyles(styles)(MarkLabel);

package/src/toggle-bar.jsx

@@ -11,28 +11,28 @@ const buttonStyles = () => ({
   root: {
     color: color.text(),
     '&:hover': {
-      backgroundColor: color.primary()
-    }
+      backgroundColor: color.primary(),
+    },
   },
   selected: {
     backgroundColor: color.background(),
-    border: `1px solid ${color.secondary()}`
+    border: `1px solid ${color.secondary()}`,
   },
   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 (
@@ -58,7 +58,7 @@ MiniButton.propTypes = {
   disabledClassName: PropTypes.string,
   selected: PropTypes.bool,
   value: PropTypes.string,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
 };
 
 export class ToggleBar extends React.Component {
@@ -70,12 +70,12 @@ export class ToggleBar extends React.Component {
     disabled: PropTypes.bool,
     draggableTools: PropTypes.bool,
     onChange: PropTypes.func,
-    onChangeToolsOrder: PropTypes.func
+    onChangeToolsOrder: PropTypes.func,
   };
 
   static defaultProps = {};
 
-  select = e => this.props.onChange(e.target.textContent);
+  select = (e) => this.props.onChange(e.target.textContent);
 
   moveTool = (dragIndex, hoverIndex) => {
     const { options, onChangeToolsOrder } = this.props;
@@ -123,30 +123,30 @@ export class ToggleBar extends React.Component {
   }
 }
 
-const styles = theme => ({
+const styles = (theme) => ({
   toolsContainer: {
     display: 'flex',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
   },
   button: {
     marginRight: theme.spacing.unit / 2,
     marginBottom: theme.spacing.unit / 2,
     color: color.text(),
-    backgroundColor: color.background()
+    backgroundColor: color.background(),
   },
   under: {
     position: 'absolute',
     top: 0,
     left: 0,
     zIndex: -1,
-    pointerEvents: 'none'
+    pointerEvents: 'none',
   },
   wrapper: {
-    position: 'relative'
+    position: 'relative',
   },
   hidden: {
-    opacity: 0
-  }
+    opacity: 0,
+  },
 });
 
 export default withDragContext(withStyles(styles)(ToggleBar));
@@ -161,7 +161,7 @@ export class Item extends React.Component {
     connectDragSource: PropTypes.func.isRequired,
     connectDragPreview: PropTypes.func.isRequired,
     connectDropTarget: PropTypes.func.isRequired,
-    isDragging: PropTypes.bool
+    isDragging: PropTypes.bool,
   };
 
   static defaultProps = {};
@@ -174,14 +174,12 @@ export class Item extends React.Component {
       connectDropTarget,
       connectDragPreview,
       isDragging,
-      toolRef
+      toolRef,
     } = this.props;
 
     return (
       <div className={classes.wrapper} ref={toolRef}>
-        {connectDragSource(
-          connectDropTarget(<div className={isDragging && classes.hidden}>{children}</div>)
-        )}
+        {connectDragSource(connectDropTarget(<div className={isDragging && classes.hidden}>{children}</div>))}
         {connectDragPreview(<div className={classes.under}>{children}</div>)}
       </div>
     );
@@ -194,9 +192,9 @@ const itemSource = {
   },
   beginDrag(props) {
     return {
-      index: props.index
+      index: props.index,
     };
-  }
+  },
 };
 
 const itemTarget = {
@@ -223,19 +221,19 @@ const itemTarget = {
 
     props.moveTool(dragIndex, hoverIndex);
     monitor.getItem().index = hoverIndex;
-  }
+  },
 };
 
-const collectTarget = connect => ({ connectDropTarget: connect.dropTarget() });
+const collectTarget = (connect) => ({ connectDropTarget: connect.dropTarget() });
 
 const collectSource = (connect, monitor) => ({
   connectDragSource: connect.dragSource(),
   connectDragPreview: connect.dragPreview(),
-  isDragging: monitor.isDragging()
+  isDragging: monitor.isDragging(),
 });
 
 const DragTool = DropTarget(
   DRAG_TYPE,
   itemTarget,
-  collectTarget
+  collectTarget,
 )(DragSource(DRAG_TYPE, itemSource, collectSource)(Item));

package/src/tool-menu.jsx

@@ -14,11 +14,11 @@ export class ToolMenu extends React.Component {
     onChange: PropTypes.func,
     onToggleLabelMode: PropTypes.func,
     onChangeTools: PropTypes.func,
-    toolbarTools: PropTypes.arrayOf(PropTypes.string)
+    toolbarTools: PropTypes.arrayOf(PropTypes.string),
   };
 
   static defaultProps = {
-    toolbarTools: []
+    toolbarTools: [],
   };
 
   updateToolsOrder = (tools, showLabel) => {
@@ -39,13 +39,13 @@ export class ToolMenu extends React.Component {
       draggableTools,
       labelModeEnabled,
       onToggleLabelMode,
-      onChange
+      onChange,
     } = this.props;
     let { toolbarTools } = this.props;
 
-    const showLabel = toolbarTools && toolbarTools.some(t => t === 'label');
+    const showLabel = toolbarTools && toolbarTools.some((t) => t === 'label');
 
-    toolbarTools = (toolbarTools || []).filter(tT => tT !== 'label');
+    toolbarTools = (toolbarTools || []).filter((tT) => tT !== 'label');
 
     return (
       <div className={classNames(className)}>
@@ -55,16 +55,11 @@ export class ToolMenu extends React.Component {
           options={toolbarTools}
           selectedToolType={currentToolType}
           onChange={onChange}
-          onChangeToolsOrder={tools => this.updateToolsOrder(tools, showLabel)}
+          onChangeToolsOrder={(tools) => this.updateToolsOrder(tools, showLabel)}
         />
 
         {showLabel && (
-          <MiniButton
-            disabled={disabled}
-            value={'Label'}
-            onClick={onToggleLabelMode}
-            selected={labelModeEnabled}
-          />
+          <MiniButton disabled={disabled} value={'Label'} onClick={onToggleLabelMode} selected={labelModeEnabled} />
         )}
       </div>
     );

package/src/tools/circle/bg-circle.jsx

@@ -22,33 +22,18 @@ class RawCircle extends React.Component {
     x: PropTypes.number.isRequired,
     y: PropTypes.number.isRequired,
     radius: PropTypes.number,
-    graphProps: types.GraphPropsType.isRequired
+    graphProps: types.GraphPropsType.isRequired,
   };
 
   render() {
-    const {
-      classes,
-      disabled,
-      className,
-      correctness,
-      x,
-      y,
-      radius,
-      graphProps,
-      ...rest
-    } = this.props;
+    const { classes, disabled, className, correctness, x, y, radius, graphProps, ...rest } = this.props;
     const { scale } = graphProps;
     const rx = Math.abs(scale.x(x + radius) - scale.x(x));
     const ry = Math.abs(scale.y(y + radius) - scale.y(y));
 
     return (
       <ellipse
-        className={classNames(
-          classes.bgCircle,
-          disabled && classes.disabled,
-          classes[correctness],
-          className
-        )}
+        className={classNames(classes.bgCircle, disabled && classes.disabled, classes[correctness], className)}
         cx={scale.x(x)}
         cy={scale.y(y)}
         rx={rx}
@@ -59,12 +44,12 @@ class RawCircle extends React.Component {
   }
 }
 
-const applyStyle = fn => ({
+const applyStyle = (fn) => ({
   ...fn('stroke'),
   '&:hover': {
     strokeWidth: 3,
-    ...fn('stroke')
-  }
+    ...fn('stroke'),
+  },
 });
 
 const styles = () => ({
@@ -75,12 +60,12 @@ const styles = () => ({
     transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',
     '&:hover': {
       strokeWidth: 6,
-      stroke: color.primaryDark()
-    }
+      stroke: color.primaryDark(),
+    },
   },
   disabled: applyStyle(disabled),
   correct: applyStyle(correct),
-  incorrect: applyStyle(incorrect)
+  incorrect: applyStyle(incorrect),
 });
 
 export const BgCircle = withStyles(styles)(RawCircle);
@@ -91,12 +76,12 @@ export default gridDraggable({
     const area = { left: x, top: y, bottom: y, right: x };
     return utils.bounds(area, domain, range);
   },
-  anchorPoint: props => {
+  anchorPoint: (props) => {
     const { x, y } = props;
     return { x, y };
   },
   fromDelta: (props, delta) => {
     const newPoint = utils.point(props).add(utils.point(delta));
     return newPoint;
-  }
+  },
 })(BgCircle);