@pie-lib/graphing 3.1.0-next.5 → 3.1.1-next.1

package/src/tools/polygon/__tests__/line.test.jsx

@@ -18,5 +18,18 @@ describe('Line', () => {
       const { container } = renderComponent();
       expect(container.firstChild).toBeInTheDocument();
     });
+
+    it('renders with from and to points', () => {
+      const { container } = renderComponent({
+        from: { x: 0, y: 0 },
+        to: { x: 5, y: 5 },
+      });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with className', () => {
+      const { container } = renderComponent({ className: 'custom-line' });
+      expect(container.firstChild).toBeInTheDocument();
+    });
   });
 });

package/src/tools/polygon/__tests__/polygon.test.jsx

@@ -1,6 +1,6 @@
 import { render } from '@pie-lib/test-utils';
 import React from 'react';
-import { Polygon, getPointString } from '../polygon';
+import { getPointString, Polygon } from '../polygon';
 import { graphProps } from '../../../__tests__/utils';
 
 const xy = (x, y) => ({ x, y });
@@ -22,6 +22,24 @@ describe('Polygon', () => {
       const { container } = renderComponent({ points: [{ x: 1, y: 1 }] });
       expect(container.firstChild).toBeInTheDocument();
     });
+
+    it('renders multiple points', () => {
+      const points = [xy(0, 0), xy(1, 1), xy(2, 0)];
+      const { container } = renderComponent({ points });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders closed polygon', () => {
+      const points = [xy(0, 0), xy(1, 1), xy(2, 0)];
+      const { container } = renderComponent({ points, closed: true });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders open polygon', () => {
+      const points = [xy(0, 0), xy(1, 1)];
+      const { container } = renderComponent({ points, closed: false });
+      expect(container.firstChild).toBeInTheDocument();
+    });
   });
 });
 

package/src/tools/polygon/component.jsx

@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ToolPropTypeFields } from '../shared/types';
 import { BasePoint } from '../shared/point';
-import chunk from 'lodash/chunk';
-import initial from 'lodash/initial';
+import { chunk, initial, isEmpty } from 'lodash-es';
 import debug from 'debug';
 import Line from './line';
 import DraggablePolygon, { Polygon } from './polygon';
@@ -11,8 +10,7 @@ import { types } from '@pie-lib/plot';
 import invariant from 'invariant';
 import ReactDOM from 'react-dom';
 import MarkLabel from '../../mark-label';
-import isEmpty from 'lodash/isEmpty';
-import { getMiddleOfTwoPoints, getRightestPoints, equalPoints } from '../../utils';
+import { equalPoints, getMiddleOfTwoPoints, getRightestPoints } from '../../utils';
 
 const log = debug('pie-lib:graphing:polygon');
 
@@ -366,16 +364,8 @@ export default class Component extends React.Component {
   };
 
   render() {
-    const {
-      coordinatesOnHover,
-      mark,
-      graphProps,
-      onClick,
-      isToolActive,
-      labelNode,
-      labelModeEnabled,
-      limitLabeling,
-    } = this.props;
+    const { coordinatesOnHover, mark, graphProps, onClick, isToolActive, labelNode, labelModeEnabled, limitLabeling } =
+      this.props;
     const { mark: stateMark } = this.state;
 
     return (

package/src/tools/polygon/line.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import { types, gridDraggable } from '@pie-lib/plot';
+import { gridDraggable, types } from '@pie-lib/plot';
 import { color } from '@pie-lib/render-ui';
 import * as utils from '../../utils';
 import { correct, disabled, incorrect, missing } from '../shared/styles';

package/src/tools/polygon/polygon.jsx

@@ -64,7 +64,7 @@ export class RawPolygon extends React.Component {
     const { scale } = graphProps;
 
     const pointString = getPointString(points, scale);
-    
+
     if (closed) {
       return (
         <StyledPolygon

package/src/tools/ray/__tests__/component.test.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { RayLine } from '../component';
 import { graphProps as getGraphProps } from '../../../__tests__/utils';
 import { utils } from '@pie-lib/plot';
+
 describe('RayLine', () => {
   let onChange = jest.fn();
   const renderComponent = (extras) => {

package/src/tools/ray/component.jsx

@@ -1,10 +1,10 @@
-import { lineToolComponent, lineBase, styles } from '../shared/line';
+import { lineBase, lineToolComponent, styles } from '../shared/line';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ArrowMarker, genUid } from '../shared/arrow-head';
 import { trig, types } from '@pie-lib/plot';
 import classNames from 'classnames';
-import { thinnerShapesNeeded, getAdjustedGraphLimits } from '../../utils';
+import { getAdjustedGraphLimits, thinnerShapesNeeded } from '../../utils';
 import { styled } from '@mui/material/styles';
 
 const StyledRayRoot = styled('g')(({ theme, disabled, correctness }) => ({
@@ -48,9 +48,7 @@ export const RayLine = (props) => {
           size={thinnerShapesNeeded(graphProps) ? 4 : 5}
           id={`${finalMarkerId}-${suffix}`}
           className={classNames(
-            suffix === 'enabled' ? 'enabledArrow' :
-            suffix === 'disabled' ? 'disabledArrow' :
-            `${suffix}Arrow`
+            suffix === 'enabled' ? 'enabledArrow' : suffix === 'disabled' ? 'disabledArrow' : `${suffix}Arrow`,
           )}
         />
       </defs>

package/src/tools/segment/__tests__/component.test.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Line } from '../component';
 import { graphProps as getGraphProps } from '../../../__tests__/utils';
 import { utils } from '@pie-lib/plot';
+
 const { xy } = utils;
 describe('Line', () => {
   let onChange = jest.fn();

package/src/tools/segment/component.jsx

@@ -1,4 +1,4 @@
-import { lineToolComponent, lineBase, styles } from '../shared/line';
+import { lineBase, lineToolComponent, styles } from '../shared/line';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { types } from '@pie-lib/plot';

package/src/tools/shared/arrow-head.jsx

@@ -38,8 +38,8 @@ const StyledMarker = styled('marker')(({ disabled, correctness }) => ({
 }));
 
 export const ArrowHead = ({ size, transform, points, disabled, correctness }) => (
-  <StyledArrowHead 
-    points={points || `0,0 ${size},${size / 2} 0,${size}`} 
+  <StyledArrowHead
+    points={points || `0,0 ${size},${size / 2} 0,${size}`}
     transform={transform}
     disabled={disabled}
     correctness={correctness}
@@ -64,10 +64,15 @@ export const genUid = () => {
 export const ArrowMarker = ({ id, size, className, disabled, correctness }) => {
   // Parse styling info from className if provided (for backward compatibility)
   const isDisabled = disabled || className?.includes('disabled');
-  const parsedCorrectness = correctness || 
-    (className?.includes('incorrect') ? 'incorrect' : 
-     className?.includes('correct') ? 'correct' : 
-     className?.includes('missing') ? 'missing' : null);
+  const parsedCorrectness =
+    correctness ||
+    (className?.includes('incorrect')
+      ? 'incorrect'
+      : className?.includes('correct')
+        ? 'correct'
+        : className?.includes('missing')
+          ? 'missing'
+          : null);
 
   return (
     <StyledMarker

package/src/tools/shared/line/__tests__/index.test.jsx

@@ -1,4 +1,4 @@
-import { lineTool, lineToolComponent, lineBase } from '../index';
+import { lineBase, lineTool, lineToolComponent } from '../index';
 import { utils } from '@pie-lib/plot';
 import { render } from '@pie-lib/test-utils';
 import React from 'react';

package/src/tools/shared/line/__tests__/line-path.test.jsx

@@ -1,11 +1,11 @@
 import { render } from '@pie-lib/test-utils';
 import React from 'react';
 import { graphProps as getGraphProps } from '../../../../__tests__/utils';
-import { gridDraggable, utils } from '@pie-lib/plot';
-const { xy } = utils;
-
+import { utils } from '@pie-lib/plot';
 import * as lineUtils from '../../../../utils';
 
+const { xy } = utils;
+
 const { bounds, pointsToArea } = lineUtils;
 jest.mock('../../../../utils', () => {
   const a = jest.requireActual('../../../../utils');

package/src/tools/shared/line/__tests__/with-root-edge.test.jsx

@@ -1,9 +1,9 @@
 import { render } from '@pie-lib/test-utils';
 import React from 'react';
-import { rootEdgeComponent, withRootEdge, rootEdgeToFromToWrapper } from '../with-root-edge';
+import { rootEdgeComponent, rootEdgeToFromToWrapper } from '../with-root-edge';
 import { graphProps as getGraphProps } from '../../../../__tests__/utils';
 import { utils } from '@pie-lib/plot';
-import { lineToolComponent, LineToolMockComponent } from '../index';
+
 const { xy } = utils;
 jest.mock('../index', () => {
   const out = {

package/src/tools/shared/line/index.jsx

@@ -1,15 +1,13 @@
 import React from 'react';
-import isEqual from 'lodash/isEqual';
-import cloneDeep from 'lodash/cloneDeep';
+import { cloneDeep, isEmpty, isEqual } from 'lodash-es';
 import { BasePoint } from '../point';
-import { types, utils, gridDraggable, trig } from '@pie-lib/plot';
+import { gridDraggable, trig, types, utils } from '@pie-lib/plot';
 import PropTypes from 'prop-types';
-import { disabled, disabledSecondary, correct, incorrect, missing } from '../styles';
+import { correct, disabled, disabledSecondary, incorrect, missing } from '../styles';
 import ReactDOM from 'react-dom';
 import MarkLabel from '../../../mark-label';
-import isEmpty from 'lodash/isEmpty';
 import { color } from '@pie-lib/render-ui';
-import { getMiddleOfTwoPoints, equalPoints, sameAxes } from '../../../utils';
+import { equalPoints, getMiddleOfTwoPoints, sameAxes } from '../../../utils';
 import { styled } from '@mui/material/styles';
 
 const StyledLineGroup = styled('g')(({ disabled, correctness }) => ({

package/src/tools/shared/line/line-path.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { types } from '@pie-lib/plot';
-import { disabled, correct, incorrect, missing, disabledSecondary } from '../styles';
+import { correct, disabled, disabledSecondary, incorrect, missing } from '../styles';
 import * as vx from '@visx/shape';
 import { color } from '@pie-lib/render-ui';
 
@@ -72,13 +72,7 @@ export class RawLinePath extends React.Component {
 
     return (
       <React.Fragment>
-        <StyledDrawLine
-          data={data}
-          className={className}
-          disabled={disabled}
-          correctness={correctness}
-          {...rest}
-        />
+        <StyledDrawLine data={data} className={className} disabled={disabled} correctness={correctness} {...rest} />
         <StyledLine
           data={data}
           className={className}

package/src/tools/shared/point/arrow-point.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { types } from '@pie-lib/plot';
-import { getAngleDeg, arrowDimensions } from '../../../utils';
+import { arrowDimensions, getAngleDeg } from '../../../utils';
 
 export class RawArrow extends React.Component {
   static propTypes = {
@@ -39,10 +39,7 @@ export class RawArrow extends React.Component {
 
     return (
       <g className={className} {...rest}>
-        <polygon
-          points={points}
-          transform={`translate(${scale.x(x)}, ${scale.y(y)}) rotate(${angle} 0 0)`}
-        />
+        <polygon points={points} transform={`translate(${scale.x(x)}, ${scale.y(y)}) rotate(${angle} 0 0)`} />
       </g>
     );
   }

package/src/tools/sine/component.jsx

@@ -1,6 +1,6 @@
 import debug from 'debug';
-import { sinY, buildDataPoints, getAmplitudeAndFreq, FREQ_DIVIDER } from '@pie-lib/graphing-utils';
-import { withRootEdge, rootEdgeComponent } from '../shared/line/with-root-edge';
+import { buildDataPoints, FREQ_DIVIDER, getAmplitudeAndFreq, sinY } from '@pie-lib/graphing-utils';
+import { rootEdgeComponent, withRootEdge } from '../shared/line/with-root-edge';
 
 const log = debug('pie-lib:graphing:sine');
 

package/src/tools/vector/component.jsx

@@ -1,4 +1,4 @@
-import { lineToolComponent, lineBase, styles } from '../shared/line';
+import { lineBase, lineToolComponent, styles } from '../shared/line';
 import { Arrow } from '../shared/point';
 import React from 'react';
 import PropTypes from 'prop-types';

package/src/undo-redo.jsx

@@ -31,15 +31,9 @@ export class UndoRedo extends React.Component {
     const { className, onUndo, onRedo, onReset, language } = this.props;
     return (
       <div className={classNames(className)}>
-        <StyledButton onClick={() => onUndo(true)}>
-          {translator.t('common:undo', { lng: language })}
-        </StyledButton>
-        <StyledButton onClick={() => onRedo(true)}>
-          {translator.t('graphing.redo', { lng: language })}
-        </StyledButton>
-        <StyledButton onClick={() => onReset()}>
-          {translator.t('graphing.reset', { lng: language })}
-        </StyledButton>
+        <StyledButton onClick={() => onUndo(true)}>{translator.t('common:undo', { lng: language })}</StyledButton>
+        <StyledButton onClick={() => onRedo(true)}>{translator.t('graphing.redo', { lng: language })}</StyledButton>
+        <StyledButton onClick={() => onReset()}>{translator.t('graphing.reset', { lng: language })}</StyledButton>
       </div>
     );
   }

package/src/use-debounce.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 export const useDebounce = (value, delay) => {
   const [debouncedValue, setDebouncedValue] = useState(value);

package/src/utils.js

@@ -1,10 +1,6 @@
-import head from 'lodash/head';
-import tail from 'lodash/tail';
 import { utils } from '@pie-lib/plot';
 import invariant from 'invariant';
-import isEqual from 'lodash/isEqual';
-import isEmpty from 'lodash/isEmpty';
-import cloneDeep from 'lodash/cloneDeep';
+import { cloneDeep, head, isEmpty, isEqual, tail } from 'lodash-es';
 
 export const tickCount = utils.tickCount;
 export const bounds = utils.bounds;