@pie-lib/charting 5.15.7-next.0 → 5.17.0-beta.0

package/src/common/__tests__/utils.js

@@ -0,0 +1,30 @@
+export const scaleMock = () => {
+  const fn = jest.fn((n) => n);
+  fn.invert = jest.fn((n) => n);
+  return fn;
+};
+
+export const graphProps = (dmin = 0, dmax = 1, rmin = 0, rmax = 1) => ({
+  scale: {
+    x: scaleMock(),
+    y: scaleMock(),
+  },
+  snap: {
+    x: jest.fn((n) => n),
+    y: jest.fn((n) => n),
+  },
+  domain: {
+    min: dmin,
+    max: dmax,
+    step: 1,
+  },
+  range: {
+    min: rmin,
+    max: rmax,
+    step: 1,
+  },
+  size: {
+    width: 400,
+    height: 400,
+  },
+});

package/src/common/drag-handle.jsx

@@ -26,15 +26,21 @@ const RawDragHandle = ({
   const scaleValue = getScale(width)?.scale;
 
   return (
-    <svg x={x} y={scale.y(y) - 10} width={width} overflow="visible">
-      {isHovered && !correctness && interactive && <DragIcon width={width} scaleValue={scaleValue} color={color} />}
-      <circle
-        cx={width / 2}
-        cy={10}
-        r={width / 2}
-        className={classNames(classes.transparentHandle, className)}
-        {...rest}
-      />
+    <svg x={x} y={scale.y(y) - 10} width={width} overflow="visible" className={classes.svgOverflowVisible}>
+      {isHovered && !correctness && interactive && (
+        <DragIcon width={width} scaleValue={scaleValue} color={color} classes={classes} />
+      )}
+      {interactive && !correctness && (
+        <ellipse
+          cx={width / 2}
+          cy={10}
+          rx={width / 2}
+          // the drag icon has a 22px fixed r value, so the ry value is 3 times that in order to cover all the area
+          ry={66}
+          className={classNames(classes.transparentHandle, className)}
+          {...rest}
+        />
+      )}
 
       <defs>
         <filter id="bottomShadow" x="0" y="0" width="140%" height="140%">
@@ -94,7 +100,6 @@ export const DragHandle = withStyles(() => ({
     '&.non-interactive': disabled('fill'),
   },
   transparentHandle: {
-    height: '20px',
     fill: 'transparent',
     clipPath: 'polygon(50% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 0%)',
   },
@@ -110,6 +115,9 @@ export const DragHandle = withStyles(() => ({
     '&.incorrect': incorrect('fill'),
     '&.correct': correct('fill'),
   },
+  svgOverflowVisible: {
+    overflow: 'visible !important',
+  },
 }))(RawDragHandle);
 
 export const D = gridDraggable({

package/src/common/drag-icon.jsx

@@ -1,33 +1,18 @@
 import React from 'react';
 import { getAdjustedX, getScale } from '../utils';
 
-const DragIcon = ({ width, scaleValue, color }) => (
+const DragIcon = ({ width, scaleValue, color, classes }) => (
   <svg
     x={getAdjustedX(width, scaleValue)}
     y={getScale(width)?.deltay}
     color={color}
+    width={width}
+    height={width}
     overflow="visible"
-    filter="url(#svgDropShadow)"
+    viewBox={`0 0 ${width} ${width}`}
+    className={classes.svgOverflowVisible}
   >
-    <defs>
-      <filter id="svgDropShadow" x="-20%" y="-20%" width="140%" height="140%">
-        <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
-        <feOffset dx="0" dy="5" result="offsetblur" />
-        <feFlood floodColor="#00000033" />
-        <feComposite in2="offsetblur" operator="in" />
-        <feMerge>
-          <feMergeNode />
-          <feMergeNode in="SourceGraphic" />
-        </feMerge>
-      </filter>
-    </defs>
-    <g
-      xmlns="http://www.w3.org/2000/svg"
-      filter="url(#filter0_d_2312_1804)"
-      fill="currentColor"
-      stroke="currentColor"
-      transform={`scale(${scaleValue})`}
-    >
+    <g xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" transform={`scale(${scaleValue})`}>
       <circle cx="28.5" cy="23.5" r="22" fill="white" stroke="currentColor" />
       <path
         d="M33.5 21.25H23.4609C22.7578 21.25 22.4062 20.4297 22.9141 19.9219L27.9141 14.9219C28.2266 14.6094 28.7344 14.6094 29.0469 14.9219L34.0469 19.9219C34.5547 20.4297 34.2031 21.25 33.5 21.25Z"

package/src/line/__tests__/__snapshots__/line-cross.test.jsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LineChart snapshot renders 1`] = `
+<Line
+  CustomDraggableComponent={[Function]}
+  className="className"
+  classes={Object {}}
+  graphProps={
+    Object {
+      "domain": Object {
+        "max": 1,
+        "min": 0,
+        "step": 1,
+      },
+      "range": Object {
+        "max": 1,
+        "min": 0,
+        "step": 1,
+      },
+      "scale": Object {
+        "x": [MockFunction],
+        "y": [MockFunction],
+      },
+      "size": Object {
+        "height": 400,
+        "width": 400,
+      },
+      "snap": Object {
+        "x": [MockFunction],
+        "y": [MockFunction],
+      },
+    }
+  }
+  xBand={[Function]}
+/>
+`;
+
+exports[`LineChart snapshot renders without graphProps 1`] = `
+<Line
+  CustomDraggableComponent={[Function]}
+  className="className"
+  classes={Object {}}
+  xBand={[Function]}
+/>
+`;

package/src/line/__tests__/__snapshots__/line-dot.test.jsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LineChart snapshot renders 1`] = `
+<Line
+  CustomDraggableComponent={[Function]}
+  className="className"
+  classes={Object {}}
+  graphProps={
+    Object {
+      "domain": Object {
+        "max": 1,
+        "min": 0,
+        "step": 1,
+      },
+      "range": Object {
+        "max": 1,
+        "min": 0,
+        "step": 1,
+      },
+      "scale": Object {
+        "x": [MockFunction],
+        "y": [MockFunction],
+      },
+      "size": Object {
+        "height": 400,
+        "width": 400,
+      },
+      "snap": Object {
+        "x": [MockFunction],
+        "y": [MockFunction],
+      },
+    }
+  }
+  xBand={[Function]}
+/>
+`;
+
+exports[`LineChart snapshot renders without graphProps 1`] = `
+<Line
+  CustomDraggableComponent={[Function]}
+  className="className"
+  classes={Object {}}
+  xBand={[Function]}
+/>
+`;

package/src/line/__tests__/line-cross.test.jsx

@@ -0,0 +1,38 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import Line, { LineCross as LineChart } from '../line-cross';
+import { graphProps } from './utils';
+import { Bar as BarChart } from '../../bars/bar';
+
+describe('LineChart', () => {
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+      xBand: () => {
+        return {
+          bandwidth: () => {},
+        };
+      },
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<LineChart {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => expect(wrapper()).toMatchSnapshot());
+
+    it('renders without graphProps', () => expect(wrapper({ graphProps: undefined })).toMatchSnapshot());
+  });
+
+  describe('component', () => {
+    const chart = Line();
+
+    expect(chart).toEqual({
+      type: 'lineCross',
+      Component: LineChart,
+      name: 'Line Cross',
+    });
+  });
+});

package/src/line/__tests__/line-dot.test.jsx

@@ -0,0 +1,38 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import Line, { LineDot as LineChart } from '../line-dot';
+import { graphProps } from './utils';
+import { Bar as BarChart } from '../../bars/bar';
+
+describe('LineChart', () => {
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+      xBand: () => {
+        return {
+          bandwidth: () => {},
+        };
+      },
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<LineChart {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => expect(wrapper()).toMatchSnapshot());
+
+    it('renders without graphProps', () => expect(wrapper({ graphProps: undefined })).toMatchSnapshot());
+  });
+
+  describe('component', () => {
+    const chart = Line();
+
+    expect(chart).toEqual({
+      type: 'lineDot',
+      Component: LineChart,
+      name: 'Line Dot',
+    });
+  });
+});

package/src/line/__tests__/utils.js

@@ -0,0 +1,30 @@
+export const scaleMock = () => {
+  const fn = jest.fn((n) => n);
+  fn.invert = jest.fn((n) => n);
+  return fn;
+};
+
+export const graphProps = (dmin = 0, dmax = 1, rmin = 0, rmax = 1) => ({
+  scale: {
+    x: scaleMock(),
+    y: scaleMock(),
+  },
+  snap: {
+    x: jest.fn((n) => n),
+    y: jest.fn((n) => n),
+  },
+  domain: {
+    min: dmin,
+    max: dmax,
+    step: 1,
+  },
+  range: {
+    min: rmin,
+    max: rmax,
+    step: 1,
+  },
+  size: {
+    width: 400,
+    height: 400,
+  },
+});

package/src/line/common/__tests__/__snapshots__/drag-handle.test.jsx.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BasePoint snapshot renders 1`] = `
+<RawDragHandle
+  className="className"
+  classes={
+    Object {
+      "handle": "RawDragHandle-handle-1",
+      "line": "RawDragHandle-line-3",
+      "transparentHandle": "RawDragHandle-transparentHandle-2",
+    }
+  }
+  graphProps={
+    Object {
+      "domain": Object {
+        "max": 1,
+        "min": 0,
+        "step": 1,
+      },
+      "range": Object {
+        "max": 1,
+        "min": 0,
+        "step": 1,
+      },
+      "scale": Object {
+        "x": [MockFunction],
+        "y": [MockFunction],
+      },
+      "size": Object {
+        "height": 400,
+        "width": 400,
+      },
+      "snap": Object {
+        "x": [MockFunction],
+        "y": [MockFunction],
+      },
+    }
+  }
+  onChange={[MockFunction]}
+  width={100}
+  x={0}
+  y={0}
+/>
+`;

package/src/line/common/__tests__/__snapshots__/line.test.jsx.snap

@@ -0,0 +1,141 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Line snapshot renders 1`] = `
+<t>
+  <WithStyles(RawLine)
+    className="className"
+    classes={Object {}}
+    data={
+      Array [
+        Object {
+          "label": "0",
+          "value": 0,
+        },
+      ]
+    }
+    graphProps={
+      Object {
+        "domain": Object {
+          "max": 1,
+          "min": 0,
+          "step": 1,
+        },
+        "range": Object {
+          "max": 1,
+          "min": 0,
+          "step": 1,
+        },
+        "scale": Object {
+          "x": [MockFunction],
+          "y": [MockFunction],
+        },
+        "size": Object {
+          "height": 400,
+          "width": 400,
+        },
+        "snap": Object {
+          "x": [MockFunction],
+          "y": [MockFunction],
+        },
+      }
+    }
+    onChange={[Function]}
+    xBand={[Function]}
+  />
+</t>
+`;
+
+exports[`RawLine snapshot renders 1`] = `
+<Fragment>
+  <u
+    data={
+      Array [
+        Object {
+          "label": "A",
+          "value": 0,
+          "x": 0,
+          "y": 0,
+        },
+        Object {
+          "label": "B",
+          "value": 1,
+          "x": 1,
+          "y": 1,
+        },
+      ]
+    }
+    x={[Function]}
+    y={[Function]}
+  />
+  <WithStyles(RawDragHandle)
+    graphProps={
+      Object {
+        "domain": Object {
+          "max": 1,
+          "min": 0,
+          "step": 1,
+        },
+        "range": Object {
+          "max": 1,
+          "min": 0,
+          "step": 1,
+        },
+        "scale": Object {
+          "x": [MockFunction],
+          "y": [MockFunction],
+        },
+        "size": Object {
+          "height": 400,
+          "width": 400,
+        },
+        "snap": Object {
+          "x": [MockFunction],
+          "y": [MockFunction],
+        },
+      }
+    }
+    key="point-0-0"
+    onDrag={[Function]}
+    onDragStart={[Function]}
+    onDragStop={[Function]}
+    r={6}
+    x={0}
+    y={0}
+  />
+  <WithStyles(RawDragHandle)
+    graphProps={
+      Object {
+        "domain": Object {
+          "max": 1,
+          "min": 0,
+          "step": 1,
+        },
+        "range": Object {
+          "max": 1,
+          "min": 0,
+          "step": 1,
+        },
+        "scale": Object {
+          "x": [MockFunction],
+          "y": [MockFunction],
+        },
+        "size": Object {
+          "height": 400,
+          "width": 400,
+        },
+        "snap": Object {
+          "x": [MockFunction],
+          "y": [MockFunction],
+        },
+      }
+    }
+    key="point-1-1"
+    onDrag={[Function]}
+    onDragStart={[Function]}
+    onDragStop={[Function]}
+    r={6}
+    x={1}
+    y={1}
+  />
+</Fragment>
+`;

package/src/line/common/__tests__/drag-handle.test.jsx

@@ -0,0 +1,88 @@
+import { shallow } from 'enzyme/build';
+import React from 'react';
+import DragHandle from '../drag-handle';
+import { gridDraggable } from '@pie-lib/plot';
+import { graphProps } from './utils';
+import { bounds } from '../../../utils';
+
+jest.mock('../../../utils', () => {
+  const { point } = jest.requireActual('../../../utils');
+  return {
+    bounds: jest.fn(),
+    point,
+  };
+});
+
+jest.mock('@pie-lib/plot/index', () => {
+  const { types, utils } = jest.requireActual('@pie-lib/plot/index');
+  return {
+    gridDraggable: jest.fn((opts) => (Comp) => Comp),
+    types,
+    utils,
+  };
+});
+
+describe('BasePoint', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: graphProps(),
+      x: 0,
+      y: 0,
+      width: 100,
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<DragHandle {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+  describe('gridDraggable options', () => {
+    let opts;
+    let domain;
+    let range;
+    beforeEach(() => {
+      domain = {
+        min: 0,
+        max: 1,
+        step: 1,
+      };
+      range = {
+        min: 0,
+        max: 1,
+        step: 1,
+      };
+      const w = wrapper();
+      opts = gridDraggable.mock.calls[0][0];
+    });
+
+    describe('bounds', () => {
+      it('calls utils.bounds with area', () => {
+        const result = opts.bounds({ x: 0, y: 0 }, { domain, range });
+
+        expect(result).toEqual({ left: 0, top: 1, bottom: 0, right: 1 });
+      });
+    });
+    describe('anchorPoint', () => {
+      it('returns x/y', () => {
+        const result = opts.anchorPoint({ x: 0, y: 0 });
+        expect(result).toEqual({ x: 0, y: 0 });
+      });
+    });
+
+    describe('fromDelta', () => {
+      it('returns y coordinate of a new point from the x/y + delta', () => {
+        const result = opts.fromDelta({ x: -1, y: 0 }, { x: 1, y: 3 });
+        expect(result).toEqual(3);
+      });
+    });
+  });
+});

package/src/line/common/__tests__/line.test.jsx

@@ -0,0 +1,82 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import Line, { RawLine } from '../line';
+import { graphProps } from './utils';
+
+describe('Line', () => {
+  const xBand = () => {};
+  xBand.bandwidth = () => {};
+  const onChange = jest.fn();
+
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+      xBand,
+      onChange,
+      data: [{ value: 0, label: '0' }],
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<Line {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => expect(wrapper()).toMatchSnapshot());
+  });
+
+  describe('logic', () => {
+    it('changeLine', () => {
+      const w = wrapper();
+
+      w.instance().changeLine(0, { dragValue: 1, label: '0' });
+
+      expect(onChange).toHaveBeenCalledWith([{ value: 1, label: '0' }]);
+    });
+  });
+});
+
+describe('RawLine', () => {
+  const xBand = () => {};
+  xBand.bandwidth = () => {};
+  const onChange = jest.fn();
+
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+      xBand,
+      onChange,
+      data: [
+        { label: 'A', value: 0 },
+        { label: 'B', value: 1 },
+      ],
+      label: 'label',
+      CustomBarElement: () => <div />,
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<RawLine {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => expect(wrapper()).toMatchSnapshot());
+  });
+
+  describe('logic', () => {
+    const w = wrapper();
+
+    it('dragStop', () => {
+      w.instance().setState({
+        line: [
+          { x: 0, y: 0, dragValue: 2 },
+          { x: 1, y: 1 },
+        ],
+      });
+
+      w.instance().dragStop(0);
+
+      expect(onChange).toHaveBeenCalledWith(0, { x: 0, y: 0, dragValue: 2 });
+    });
+  });
+});