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

package/src/line/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/line/common/drag-handle.jsx

@@ -52,20 +52,25 @@ class RawDragHandle extends React.Component {
 
 export const DragHandle = withStyles(() => ({
   handle: {
-    fill: color.secondary(),
+    fill: color.defaults.SECONDARY,
     transition: 'fill 200ms linear, height 200ms linear',
     '&:hover': {
-      fill: color.secondaryDark(),
+      fill: color.defaults.SECONDARY_DARK,
     },
     '&.correct': correct('fill'),
     '&.incorrect': incorrect('fill'),
     '&.non-interactive': disabled('fill'),
   },
+  transparentHandle: {
+    height: '20px',
+    fill: 'transparent',
+    stroke: 'transparent',
+  },
   line: {
-    stroke: color.secondary(),
+    stroke: color.defaults.SECONDARY,
     transition: 'fill 200ms linear, height 200ms linear',
     '&:hover': {
-      stroke: color.secondaryDark(),
+      stroke: color.defaults.SECONDARY_DARK,
     },
     '&.non-interactive': disabled('stroke'),
     '&.correct': correct('stroke'),

package/src/line/line-cross.js

@@ -11,7 +11,7 @@ const DraggableComponent = (props) => {
   const { classes = {}, className, scale, x, y, r, correctness, ...rest } = props;
 
   return (
-    <Group {...rest} className={classNames(className, classes.line, correctness && correctness.value)}>
+    <Group className={classNames(className, classes.line, correctness && correctness.value)}>
       <LinePath
         data={[
           { x: scale.x(x) - r, y: scale.y(y) + r },
@@ -21,6 +21,7 @@ const DraggableComponent = (props) => {
         x={(d) => d.x}
         y={(d) => d.y}
         strokeWidth={5}
+        style={{ pointerEvents: 'none' }}
       />
       <LinePath
         data={[
@@ -31,7 +32,9 @@ const DraggableComponent = (props) => {
         x={(d) => d.x}
         y={(d) => d.y}
         strokeWidth={5}
+        style={{ pointerEvents: 'none' }}
       />
+      <circle cx={scale.x(x)} cy={scale.y(y)} r={r * 2} className={classNames(classes.transparentHandle)} {...rest} />
     </Group>
   );
 };

package/src/line/line-dot.js

@@ -6,13 +6,23 @@ import RawLine from './common/line';
 import classNames from 'classnames';
 
 const DraggableComponent = ({ scale, x, y, className, classes, r, correctness, ...rest }) => (
-  <circle
-    cx={scale.x(x)}
-    cy={scale.y(y)}
-    r={r}
-    className={classNames(className, classes.handle, correctness && correctness.value)}
-    {...rest}
-  />
+  <g>
+    <circle
+      cx={scale.x(x)}
+      cy={scale.y(y)}
+      r={r * 3}
+      className={classNames(classes.transparentHandle, className)}
+      style={{ pointerEvents: 'none' }}
+      {...rest}
+    />
+    <circle
+      cx={scale.x(x)}
+      cy={scale.y(y)}
+      r={r}
+      className={classNames(className, classes.handle, correctness && correctness.value)}
+      {...rest}
+    />
+  </g>
 );
 
 DraggableComponent.propTypes = {

package/src/mark-label.jsx

@@ -18,7 +18,6 @@ const styles = (theme) => ({
     '&.correct': correct('color'),
     '&.incorrect': incorrect('color'),
     '&.disabled': {
-      ...disabled('color'),
       backgroundColor: 'transparent !important',
     },
     '&.error': { border: `2px solid ${theme.palette.error.main}` },
@@ -26,9 +25,10 @@ const styles = (theme) => ({
   mathInput: {
     pointerEvents: 'auto',
     textAlign: 'center',
-    fontSize: theme.typography.fontSize,
+    fontSize: theme.typography.fontSize + 2,
     fontFamily: theme.typography.fontFamily,
     color: color.primaryDark(),
+    paddingTop: theme.typography.fontSize / 2,
   },
   disabled: {
     ...disabled('color'),
@@ -88,6 +88,7 @@ export const MarkLabel = (props) => {
     correctness,
     autoFocus,
     error,
+    isHiddenLabel,
   } = props;
 
   const [label, setLabel] = useState(mark.label);
@@ -128,16 +129,25 @@ export const MarkLabel = (props) => {
 
   return isMathRendering() ? (
     <div
-      ref={(r) => (root = r)}
+      ref={(r) => {
+        root = r;
+        externalInputRef(r);
+      }}
       dangerouslySetInnerHTML={{ __html: getLabelMathFormat(label) }}
       className={classNames(classes.mathInput, {
         [classes.disabled]: disabled,
         [classes.error]: error,
-        [classes.correct]: correctness && correctness.label === 'correct',
-        [classes.incorrect]: correctness && correctness.label === 'incorrect',
+        [classes.correct]: mark.editable && correctness?.label === 'correct',
+        [classes.incorrect]: mark.editable && correctness?.label === 'incorrect',
       })}
       onClick={() => setIsEditing(true)}
-      style={{ minWidth: barWidth }}
+      style={{
+        minWidth: barWidth,
+        position: 'fixed',
+        transformOrigin: 'left',
+        transform: `rotate(${rotate}deg)`,
+        visibility: isHiddenLabel ? 'hidden' : 'unset',
+      }}
     ></div>
   ) : (
     <AutosizeInput
@@ -149,7 +159,7 @@ export const MarkLabel = (props) => {
       disabled={disabled}
       inputClassName={classNames(
         classes.input,
-        correctness && correctness.label,
+        correctness && mark.editable ? correctness.label : null,
         disabled && 'disabled',
         error && 'error',
       )}
@@ -171,6 +181,7 @@ export const MarkLabel = (props) => {
         minWidth: barWidth,
         transformOrigin: 'left',
         transform: `rotate(${rotate}deg)`,
+        visibility: isHiddenLabel ? 'hidden' : 'unset',
       }}
       onChange={onChange}
       onBlur={onChangeProp}
@@ -193,6 +204,7 @@ MarkLabel.propTypes = {
     value: PropTypes.string,
     label: PropTypes.string,
   }),
+  isHiddenLabel: PropTypes.bool,
 };
 
 export default withStyles(styles)(MarkLabel);

package/src/plot/__tests__/__snapshots__/dot.test.jsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DotPlot snapshot renders 1`] = `
+<Plot
+  CustomBarElement={[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[`DotPlot snapshot renders without graphProps 1`] = `
+<Plot
+  CustomBarElement={[Function]}
+  className="className"
+  classes={Object {}}
+  xBand={[Function]}
+/>
+`;

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

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LinePlot snapshot renders 1`] = `
+<Plot
+  CustomBarElement={[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[`LinePlot snapshot renders without graphProps 1`] = `
+<Plot
+  CustomBarElement={[Function]}
+  className="className"
+  classes={Object {}}
+  xBand={[Function]}
+/>
+`;

package/src/plot/__tests__/dot.test.jsx

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

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

@@ -0,0 +1,38 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import Line, { LinePlot } from '../line';
+import { graphProps } from './utils';
+import { Bar as BarChart } from '../../bars/bar';
+
+describe('LinePlot', () => {
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+      xBand: () => {
+        return {
+          bandwidth: () => {},
+        };
+      },
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<LinePlot {...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: 'linePlot',
+      Component: LinePlot,
+      name: 'Line Plot',
+    });
+  });
+});

package/src/plot/__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/plot/common/__tests__/__snapshots__/plot.test.jsx.snap

@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Plot snapshot renders 1`] = `
+<t>
+  <WithStyles(RawPlot)
+    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],
+        },
+      }
+    }
+    index={0}
+    key="bar-0-0-0"
+    label="0"
+    onChangeCategory={[Function]}
+    value={0}
+    xBand={[Function]}
+  />
+</t>
+`;
+
+exports[`RawPlot snapshot renders 1`] = `
+<Fragment>
+  <g
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
+  >
+    <WithStyles(RawDragHandle)
+      color="var(--pie-primary-dark, #283593)"
+      graphProps={
+        Object {
+          "domain": Object {
+            "max": 1,
+            "min": 0,
+            "step": 1,
+          },
+          "range": Object {
+            "max": 1,
+            "min": 0,
+            "step": 1,
+          },
+          "scale": Object {
+            "x": [MockFunction],
+            "y": [MockFunction] {
+              "calls": Array [
+                Array [
+                  NaN,
+                ],
+              ],
+              "results": Array [
+                Object {
+                  "type": "return",
+                  "value": NaN,
+                },
+              ],
+            },
+          },
+          "size": Object {
+            "height": 400,
+            "width": 400,
+          },
+          "snap": Object {
+            "x": [MockFunction],
+            "y": [MockFunction],
+          },
+        }
+      }
+      isHovered={false}
+      onDrag={[Function]}
+      onDragStop={[Function]}
+    />
+  </g>
+</Fragment>
+`;

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

@@ -0,0 +1,70 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import Plot, { RawPlot } from '@pie-lib/plot';
+import { graphProps } from './utils';
+
+describe('Plot', () => {
+  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(<Plot {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => expect(wrapper()).toMatchSnapshot());
+  });
+});
+
+describe('RawPlot', () => {
+  const xBand = () => {};
+  xBand.bandwidth = () => {};
+  const onChangeCategory = jest.fn();
+
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+      xBand,
+      onChangeCategory,
+      data: [],
+      label: 'label',
+      CustomBarElement: () => <div />,
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<RawPlot {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => expect(wrapper()).toMatchSnapshot());
+  });
+
+  describe('logic', () => {
+    const w = wrapper();
+
+    it('dragStop', () => {
+      w.instance().dragStop();
+
+      expect(onChangeCategory).not.toHaveBeenCalled();
+
+      w.instance().setState({
+        dragValue: 2,
+      });
+
+      w.instance().dragStop();
+
+      expect(onChangeCategory).toHaveBeenCalledWith({ label: 'label', value: 2 });
+    });
+  });
+});

package/src/plot/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/plot/common/plot.jsx

@@ -101,7 +101,12 @@ export class RawPlot extends React.Component {
 
     return (
       <React.Fragment>
-        <g onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+        <g
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+          onTouchStart={this.handleMouseEnter}
+          onTouchEnd={this.handleMouseLeave}
+        >
           {isHovered && (
             <rect
               x={barX}

package/src/plot/dot.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { types } from '@pie-lib/plot';
 import { dataToXBand } from '../utils';
-import Plot from './common/plot';
+import Plot from './comm@pie-lib/plot';
 import { Circle } from '@vx/shape';
 
 const CustomBarElement = (props) => {

package/src/plot/line.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { types } from '@pie-lib/plot';
 import { dataToXBand } from '../utils';
-import Plot from './common/plot';
+import Plot from './comm@pie-lib/plot';
 import { LinePath } from '@vx/shape';
 import { Group } from '@vx/group';
 

package/src/tool-menu.jsx

@@ -12,12 +12,8 @@ const { translator } = Translator;
 
 const buttonStyles = (theme) => ({
   root: {
-    backgroundColor: color.background(),
     color: color.text(),
     border: `1px solid ${color.secondary()}`,
-    '&:hover': {
-      backgroundColor: color.secondaryLight(),
-    },
     fontSize: theme.typography.fontSize,
   },
   selected: {