@pie-lib/plot 2.27.2 → 2.27.3-next.155

package/src/__tests__/root.test.jsx

@@ -1,8 +1,13 @@
-import { shallow } from 'enzyme';
+import { render, cleanup } from '@testing-library/react';
 import React from 'react';
 import { Root } from '../root';
 import { select, mouse } from 'd3-selection';
 
+jest.mock('d3-selection', () => ({
+  select: jest.fn(),
+  mouse: jest.fn(),
+}));
+
 const scaleMock = () => {
   const fn = jest.fn((n) => n);
   fn.invert = jest.fn((n) => n);
@@ -34,83 +39,234 @@ const graphProps = () => ({
   },
 });
 
-const wrapper = (props) => {
-  props = {
-    classes: {},
-    graphProps: graphProps(),
-    ...props,
-  };
+describe('root', () => {
+  let mockOn;
+  let defaultProps;
 
-  return shallow(<Root {...props}>hi</Root>, { disableLifecycleMethods: true });
-};
+  beforeEach(() => {
+    mockOn = jest.fn();
+    select.mockReturnValue({
+      on: mockOn,
+    });
+    mouse.mockReturnValue([0, 0]);
 
-jest.mock('d3-selection', () => ({
-  select: jest.fn(),
-  mouse: jest.fn(),
-}));
+    defaultProps = {
+      classes: {},
+      graphProps: graphProps(),
+    };
+  });
 
-describe('root', () => {
-  describe('snapshot', () => {
-    it('matches', () => {
-      const w = wrapper();
-      expect(w).toMatchSnapshot();
-    });
+  afterEach(() => {
+    cleanup();
+    jest.clearAllMocks();
+  });
+
+  it('renders with children', () => {
+    const { container, getByText } = render(
+      <Root {...defaultProps}>hi</Root>
+    );
+    expect(container.firstChild).toBeInTheDocument();
+    expect(getByText('hi')).toBeInTheDocument();
   });
 
   describe('logic', () => {
     describe('mousemove', () => {
       describe('mount/unmount', () => {
-        it('adds mousemove listener on compenentDidMount', () => {
-          const w = wrapper();
-          const g = {
-            on: jest.fn(),
-          };
-          select.mockReturnValue(g);
-          w.instance().componentDidMount();
-          expect(g.on).toHaveBeenCalledWith('mousemove', expect.any(Function));
+        it('adds mousemove listener on componentDidMount', () => {
+          render(<Root {...defaultProps}>hi</Root>);
+
+          // Verify that select was called with the g element
+          expect(select).toHaveBeenCalled();
+
+          // Verify that on() was called with 'mousemove' and a function
+          expect(mockOn).toHaveBeenCalledWith('mousemove', expect.any(Function));
         });
-        it('unsets mousemove listener on componentWillUnmount', () => {
-          const w = wrapper();
-          const g = {
-            on: jest.fn(),
-          };
-          select.mockReturnValue(g);
-          w.instance().componentWillUnmount();
-          expect(g.on).toHaveBeenCalledWith('mousemove', null);
+
+        it('removes mousemove listener on componentWillUnmount', () => {
+          const { unmount } = render(<Root {...defaultProps}>hi</Root>);
+
+          // Clear previous calls to isolate unmount behavior
+          mockOn.mockClear();
+          select.mockClear();
+
+          unmount();
+
+          // Verify that select was called during unmount
+          expect(select).toHaveBeenCalled();
+
+          // Verify that on() was called with 'mousemove' and null to remove the listener
+          expect(mockOn).toHaveBeenCalledWith('mousemove', null);
         });
       });
 
       describe('mouseMove function', () => {
-        let onMouseMove, w, gp;
-        beforeEach(() => {
-          onMouseMove = jest.fn();
-          gp = graphProps();
-          w = wrapper({
+        it('calls mouse with correct arguments', () => {
+          const onMouseMove = jest.fn();
+          const gp = graphProps();
+          const props = {
+            ...defaultProps,
             onMouseMove,
             graphProps: gp,
+          };
+
+          const mockNode = document.createElement('div');
+          const mockSelection = {
+            _groups: [[mockNode]],
+            node: () => mockNode,
+          };
+
+          // Mock select to return our mockSelection
+          select.mockReturnValue({
+            ...mockSelection,
+            on: (event, handler) => {
+              mockOn(event, handler);
+              // When 'mousemove' is registered, immediately test it
+              if (event === 'mousemove' && handler) {
+                mouse.mockReturnValue([10, 20]);
+                // Handler is bound with mockSelection as first arg, so call with no args
+                handler();
+              }
+            },
           });
-          mouse.mockReturnValue([0, 0]);
-          const g = { _groups: [[[0, 0]]] };
-          w.instance().mouseMove(g);
-        });
-        it('calls mouse', () => {
-          expect(mouse).toHaveBeenCalledWith([0, 0]);
-        });
-        it('calls, scale.x.invert', () => {
-          expect(gp.scale.x.invert).toHaveBeenCalledWith(0);
+
+          render(<Root {...props}>hi</Root>);
+
+          // Verify mouse was called with the correct node
+          expect(mouse).toHaveBeenCalledWith(mockNode);
         });
-        it('calls, scale.y.invert', () => {
-          expect(gp.scale.y.invert).toHaveBeenCalledWith(0);
+
+        it('calls scale.x.invert and scale.y.invert', () => {
+          const onMouseMove = jest.fn();
+          const gp = graphProps();
+          const props = {
+            ...defaultProps,
+            onMouseMove,
+            graphProps: gp,
+          };
+
+          const mockNode = document.createElement('div');
+          const mockSelection = {
+            _groups: [[mockNode]],
+            node: () => mockNode,
+          };
+
+          select.mockReturnValue({
+            ...mockSelection,
+            on: (event, handler) => {
+              mockOn(event, handler);
+              if (event === 'mousemove' && handler) {
+                mouse.mockReturnValue([15, 25]);
+                handler();
+              }
+            },
+          });
+
+          render(<Root {...props}>hi</Root>);
+
+          expect(gp.scale.x.invert).toHaveBeenCalledWith(15);
+          expect(gp.scale.y.invert).toHaveBeenCalledWith(25);
         });
-        it('calls, snap.x', () => {
-          expect(gp.snap.x).toHaveBeenCalledWith(0);
+
+        it('calls snap.x and snap.y with inverted coordinates', () => {
+          const onMouseMove = jest.fn();
+          const gp = graphProps();
+          gp.scale.x.invert = jest.fn().mockReturnValue(5);
+          gp.scale.y.invert = jest.fn().mockReturnValue(10);
+          const props = {
+            ...defaultProps,
+            onMouseMove,
+            graphProps: gp,
+          };
+
+          const mockNode = document.createElement('div');
+          const mockSelection = {
+            _groups: [[mockNode]],
+            node: () => mockNode,
+          };
+
+          select.mockReturnValue({
+            ...mockSelection,
+            on: (event, handler) => {
+              mockOn(event, handler);
+              if (event === 'mousemove' && handler) {
+                mouse.mockReturnValue([15, 25]);
+                handler();
+              }
+            },
+          });
+
+          render(<Root {...props}>hi</Root>);
+
+          expect(gp.snap.x).toHaveBeenCalledWith(5);
+          expect(gp.snap.y).toHaveBeenCalledWith(10);
         });
-        it('calls, snap.y', () => {
-          expect(gp.snap.y).toHaveBeenCalledWith(0);
+
+        it('calls onMouseMove handler with snapped coordinates', () => {
+          const onMouseMove = jest.fn();
+          const gp = graphProps();
+          gp.scale.x.invert = jest.fn().mockReturnValue(7);
+          gp.scale.y.invert = jest.fn().mockReturnValue(14);
+          gp.snap.x = jest.fn().mockReturnValue(10);
+          gp.snap.y = jest.fn().mockReturnValue(15);
+
+          const props = {
+            ...defaultProps,
+            onMouseMove,
+            graphProps: gp,
+          };
+
+          const mockNode = document.createElement('div');
+          const mockSelection = {
+            _groups: [[mockNode]],
+            node: () => mockNode,
+          };
+
+          select.mockReturnValue({
+            ...mockSelection,
+            on: (event, handler) => {
+              mockOn(event, handler);
+              if (event === 'mousemove' && handler) {
+                mouse.mockReturnValue([100, 200]);
+                handler();
+              }
+            },
+          });
+
+          render(<Root {...props}>hi</Root>);
+
+          expect(onMouseMove).toHaveBeenCalledWith({ x: 10, y: 15 });
         });
 
-        it('calls handler', () => {
-          expect(onMouseMove).toHaveBeenCalledWith({ x: 0, y: 0 });
+        it('does not call onMouseMove when handler is not provided', () => {
+          const gp = graphProps();
+          const props = {
+            ...defaultProps,
+            graphProps: gp,
+          };
+
+          const mockNode = document.createElement('div');
+          const mockSelection = {
+            _groups: [[mockNode]],
+            node: () => mockNode,
+          };
+
+          select.mockReturnValue({
+            ...mockSelection,
+            on: (event, handler) => {
+              mockOn(event, handler);
+              if (event === 'mousemove' && handler) {
+                mouse.mockReturnValue([100, 200]);
+                // Should not throw error when onMouseMove is not provided
+                expect(() => handler()).not.toThrow();
+              }
+            },
+          });
+
+          render(<Root {...props}>hi</Root>);
+
+          // Verify scale methods were not called (early return in mouseMove)
+          expect(gp.scale.x.invert).not.toHaveBeenCalled();
+          expect(gp.scale.y.invert).not.toHaveBeenCalled();
         });
       });
     });

package/src/grid-draggable.jsx

@@ -38,6 +38,15 @@ export const gridDraggable = (opts) => (Comp) => {
       onMove: PropTypes.func,
       graphProps: GraphPropsType.isRequired,
     };
+
+    constructor(props) {
+      super(props);
+      this.state = {
+        startX: null,
+        startY: null,
+      };
+    }
+
     grid = () => {
       const { graphProps } = this.props;
       const { scale, domain, range } = graphProps;
@@ -87,10 +96,10 @@ export const gridDraggable = (opts) => (Comp) => {
       const grid = this.grid();
 
       const scaled = {
-        left: (bounds.left / grid.interval) * grid.x,
-        right: (bounds.right / grid.interval) * grid.x,
-        top: (bounds.top / grid.interval) * grid.y,
-        bottom: (bounds.bottom / grid.interval) * grid.y,
+        left: bounds.left * grid.x,
+        right: bounds.right * grid.x,
+        top: bounds.top * grid.y,
+        bottom: bounds.bottom * grid.y,
       };
       log('[getScaledBounds]: ', scaled);
       return scaled;

package/src/label.jsx

@@ -1,13 +1,53 @@
-import React, { useState } from 'react';
-import { color, Readable } from '@pie-lib/render-ui';
-import cn from 'classnames';
+import React, { useEffect, useState } from 'react';
+import { Readable } from '@pie-lib/render-ui';
 import EditableHtml from '@pie-lib/editable-html';
-import { withStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
 import { extractTextFromHTML, isEmptyString } from './utils';
+
+const styles = {
+  axisLabel: {
+    fontSize: 12,
+    textAlign: 'center',
+    margin: 4,
+    padding: '4px 0',
+  },
+  chartLabel: {
+    fontSize: 16,
+    textAlign: 'center',
+    margin: 4,
+    padding: '4px 0',
+  },
+  disabledLabel: {
+    pointerEvents: 'none',
+    width: '100%',
+  },
+  editLabel: {
+    position: 'absolute',
+    backgroundColor: 'white',
+    borderRadius: 4,
+    boxShadow: '0px 5px 8px rgba(0,0,0,0.15)',
+    zIndex: 10,
+  },
+  rotateLeftLabel: {
+    transform: 'rotate(-90deg)',
+    transformOrigin: '0 0',
+    position: 'absolute',
+  },
+  rotateRightLabel: {
+    transform: 'rotate(90deg)',
+    transformOrigin: '0 0',
+    position: 'absolute',
+  },
+  customBottom: {
+    position: 'absolute',
+  },
+  displayNone: {
+    display: 'none',
+  },
+};
+
 const LabelComponent = (props) => {
   const {
-    classes,
     disabledLabel,
     graphHeight,
     graphWidth,
@@ -23,21 +63,32 @@ const LabelComponent = (props) => {
     charactersLimit,
     titleHeight,
   } = props;
-  const [rotatedToHorizontal, setRotatedToHorizontal] = useState(false);
+
+const [rotatedToHorizontal, setRotatedToHorizontal] = useState(false);
+
   const activePlugins = [
     'bold',
     'italic',
     'underline',
     'strikethrough',
     'math',
-    // 'languageCharacters'
   ];
 
-  const isChart = isChartBottomLabel || isChartLeftLabel || isDefineChartBottomLabel || isDefineChartLeftLabel;
+  const isChart =
+    isChartBottomLabel ||
+    isChartLeftLabel ||
+    isDefineChartBottomLabel ||
+    isDefineChartLeftLabel;
+
+  const chartValue =
+    side === 'left' && isDefineChartLeftLabel && graphHeight - 220;
 
-  const chartValue = side === 'left' && isDefineChartLeftLabel && graphHeight - 220;
   const defaultStyle = {
-    width: chartValue || (side === 'left' || side === 'right' ? graphHeight - 8 : graphWidth - 8),
+    width:
+      chartValue ||
+      (side === 'left' || side === 'right'
+        ? graphHeight - 8
+        : graphWidth - 8),
     top:
       chartValue ||
       (isChartLeftLabel && `${graphHeight - 70}px`) ||
@@ -54,27 +105,53 @@ const LabelComponent = (props) => {
 
   const rotatedStyle = {
     width: graphWidth - 8,
-    top: (side === 'right' && `${graphHeight - 22}px`) || 0,
+    top: side === 'right' ? `${graphHeight - 22}px` : 0,
     left: 0,
   };
 
-  const rotateLabel = () => !disabledLabel && (side === 'left' || side === 'right') && setRotatedToHorizontal(true);
+  const rotateLabel = () => {
+    if (!disabledLabel && (side === 'left' || side === 'right')) {
+      setRotatedToHorizontal(true);
+    }
+  };
+
+  const exitEditMode = () => {
+    setRotatedToHorizontal(false);
+
+    // blur active element because rotation is causing editing issues on exit
+    requestAnimationFrame(() => {
+      document.activeElement?.blur?.();
+    });
+  };
 
   return (
     <Readable false>
       <div
-        className={cn(isChart ? classes.chartLabel : classes.axisLabel, {
-          [classes.rotateLeftLabel]: side === 'left' && !rotatedToHorizontal,
-          [classes.rotateRightLabel]: side === 'right' && !rotatedToHorizontal,
-          [classes.editLabel]: rotatedToHorizontal,
-          [classes.customBottom]: isChartBottomLabel || isDefineChartBottomLabel,
-          [classes.displayNone]: disabledLabel && !isChart && isEmptyString(extractTextFromHTML(text)),
-        })}
-        style={rotatedToHorizontal ? rotatedStyle : defaultStyle}
         onClick={rotateLabel}
+        style={{
+          ...(rotatedToHorizontal ? rotatedStyle : defaultStyle),
+          ...(isChart ? styles.chartLabel : styles.axisLabel),
+          ...(side === 'left' && !rotatedToHorizontal
+            ? styles.rotateLeftLabel
+            : {}),
+          ...(side === 'right' && !rotatedToHorizontal
+            ? styles.rotateRightLabel
+            : {}),
+          ...(rotatedToHorizontal ? styles.editLabel : {}),
+          ...((isChartBottomLabel || isDefineChartBottomLabel)
+            ? styles.customBottom
+            : {}),
+          ...((disabledLabel &&
+            !isChart &&
+            isEmptyString(extractTextFromHTML(text))) &&
+            styles.displayNone),
+        }}
       >
         {disabledLabel ? (
-          <div className={classes.disabledLabel} dangerouslySetInnerHTML={{ __html: text || '' }} />
+          <div
+            style={styles.disabledLabel}
+            dangerouslySetInnerHTML={{ __html: text || '' }}
+          />
         ) : (
           <EditableHtml
             markup={text || ''}
@@ -87,7 +164,7 @@ const LabelComponent = (props) => {
             }}
             disableScrollbar
             activePlugins={activePlugins}
-            onDone={() => setRotatedToHorizontal(false)}
+            onDone={exitEditMode}
             mathMlOptions={mathMlOptions}
             charactersLimit={charactersLimit}
           />
@@ -96,8 +173,8 @@ const LabelComponent = (props) => {
     </Readable>
   );
 };
+
 LabelComponent.propTypes = {
-  classes: PropTypes.object,
   disabledLabel: PropTypes.bool,
   graphHeight: PropTypes.number,
   graphWidth: PropTypes.number,
@@ -114,49 +191,4 @@ LabelComponent.propTypes = {
   titleHeight: PropTypes.number,
 };
 
-export default withStyles((theme) => ({
-  label: {
-    fill: color.secondary(),
-  },
-  axisLabel: {
-    fontSize: theme.typography.fontSize - 2,
-    textAlign: 'center',
-    margin: theme.spacing.unit / 2,
-    padding: `${theme.spacing.unit / 2}px 0`,
-  },
-  chartLabel: {
-    fontSize: theme.typography.fontSize + 2,
-    textAlign: 'center',
-    margin: theme.spacing.unit / 2,
-    padding: `${theme.spacing.unit / 2}px 0`,
-  },
-  disabledLabel: {
-    pointerEvents: 'none',
-    width: '100%',
-  },
-  editLabel: {
-    position: 'absolute',
-    backgroundColor: 'white',
-    borderRadius: '4px',
-    boxShadow: '0px 5px 8px rgba(0, 0, 0, 0.15)',
-    zIndex: 10,
-  },
-  rotateLeftLabel: {
-    '-webkit-transform': 'rotate(-90deg)',
-    transformOrigin: '0 0',
-    transformStyle: 'preserve-3d',
-    position: 'absolute',
-  },
-  rotateRightLabel: {
-    '-webkit-transform': 'rotate(90deg)',
-    transformOrigin: '0 0',
-    transformStyle: 'preserve-3d',
-    position: 'absolute',
-  },
-  customBottom: {
-    position: 'absolute',
-  },
-  displayNone: {
-    display: 'none',
-  },
-}))(LabelComponent);
+export default LabelComponent;