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

package/src/bars/__tests__/__snapshots__/bar.test.jsx.snap

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

package/src/bars/__tests__/__snapshots__/histogram.test.jsx.snap

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

package/src/bars/__tests__/bar.test.jsx

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

package/src/bars/__tests__/histogram.test.jsx

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

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

@@ -0,0 +1,110 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Bars snapshot renders 1`] = `
+<t>
+  <WithStyles(RawBar)
+    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[`RawBar snapshot renders 1`] = `
+<g
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+>
+  <P
+    height={NaN}
+    style={
+      Object {
+        "fill": null,
+      }
+    }
+    y={NaN}
+  />
+  <WithStyles(RawDragHandle)
+    color={null}
+    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,
+              ],
+              Array [
+                NaN,
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": NaN,
+              },
+              Object {
+                "type": "return",
+                "value": NaN,
+              },
+            ],
+          },
+        },
+        "size": Object {
+          "height": 400,
+          "width": 400,
+        },
+        "snap": Object {
+          "x": [MockFunction],
+          "y": [MockFunction],
+        },
+      }
+    }
+    isHovered={false}
+    onDrag={[Function]}
+    onDragStop={[Function]}
+  />
+</g>
+`;

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

@@ -0,0 +1,69 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import Bars, { RawBar } from '../bars';
+import { graphProps } from './utils';
+
+describe('Bars', () => {
+  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(<Bars {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => expect(wrapper()).toMatchSnapshot());
+  });
+});
+
+describe('RawBar', () => {
+  const xBand = () => {};
+  xBand.bandwidth = () => {};
+  const onChangeCategory = jest.fn();
+
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+      xBand,
+      onChangeCategory,
+      data: [],
+      label: 'label',
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<RawBar {...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(0);
+
+      expect(onChangeCategory).toHaveBeenCalledWith({ label: 'label', value: 2 });
+    });
+  });
+});

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

@@ -72,8 +72,38 @@ export class RawBar extends React.Component {
       dragValue: undefined,
       isHovered: false,
     };
+    this.mouseX = 0;
+    this.mouseY = 0;
   }
 
+  componentDidMount() {
+    window.addEventListener('mousemove', this.handleMouseMove);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('mousemove', this.handleMouseMove);
+  }
+
+  handleMouseMove = (e) => {
+    // Update mouse position
+    this.mouseX = e.clientX;
+    this.mouseY = e.clientY;
+    // Check if the mouse is inside the <g> element
+    const isMouseInside = this.isMouseInsideSvgElement();
+    this.setState({ isHovered: isMouseInside });
+  };
+
+  isMouseInsideSvgElement = () => {
+    const gBoundingBox = this.gRef.getBoundingClientRect();
+    // Check if the mouse position is within the bounding box
+    return (
+      this.mouseX >= gBoundingBox.left &&
+      this.mouseX <= gBoundingBox.right &&
+      this.mouseY >= gBoundingBox.top &&
+      this.mouseY <= gBoundingBox.bottom
+    );
+  };
+
   handleMouseEnter = () => {
     this.setState({ isHovered: true });
   };
@@ -130,7 +160,13 @@ export class RawBar extends React.Component {
     const Component = interactive ? DraggableHandle : DragHandle;
 
     return (
-      <g onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+      <g
+        ref={(ref) => (this.gRef = ref)}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+        onTouchStart={this.handleMouseEnter}
+        onTouchEnd={this.handleMouseLeave}
+      >
         <VxBar
           x={barX}
           y={scale.y(yy)}

package/src/chart-type.js

@@ -16,11 +16,15 @@ const ChartType = withStyles(() => ({
 }))(({ onChange, value, classes, availableChartTypes, chartTypeLabel }) => (
   <div className={classes.chartType}>
     <FormControl variant={'outlined'} className={classes.chartType}>
-      <InputLabel htmlFor="type-helper" className={classes.chartTypeLabel}>
+      <InputLabel id="type-helper-label" className={classes.chartTypeLabel}>
         {chartTypeLabel}
       </InputLabel>
-
-      <Select value={value} onChange={onChange} labelWidth={75} input={<OutlinedInput name="type" id="type-helper" />}>
+      <Select
+        labelId="type-helper-label"
+        value={value}
+        onChange={onChange}
+        input={<OutlinedInput labelWidth={75} name="type" />}
+      >
         {availableChartTypes?.histogram && <MenuItem value={'histogram'}>{availableChartTypes.histogram}</MenuItem>}
         {availableChartTypes?.bar && <MenuItem value={'bar'}>{availableChartTypes.bar}</MenuItem>}
         {availableChartTypes?.lineDot && <MenuItem value={'lineDot'}>{availableChartTypes.lineDot}</MenuItem>}

package/src/chart-types.js

@@ -2,7 +2,7 @@ import Bar from './bars/bar';
 import Histogram from './bars/histogram';
 import LineDot from './line/line-dot';
 import LineCross from './line/line-cross';
-import DotPlot from './plot/dot';
-import LinePlot from './plot/line';
+import DotPlot from '@pie-lib/plot/dot';
+import LinePlot from '@pie-lib/plot/line';
 
 export default { Bar, Histogram, LineDot, DotPlot, LinePlot, LineCross };

package/src/chart.jsx

@@ -70,6 +70,8 @@ export class Chart extends React.Component {
     changeInteractiveEnabled: PropTypes.bool,
     changeEditableEnabled: PropTypes.bool,
     language: PropTypes.string,
+    mathMlOptions: PropTypes.object,
+    labelsCharactersLimit: PropTypes.number,
   };
 
   static defaultProps = {
@@ -88,6 +90,7 @@ export class Chart extends React.Component {
       chartTypes.DotPlot(),
       chartTypes.LinePlot(),
     ],
+    autoFocus: false,
   };
 
   generateMaskId() {
@@ -156,11 +159,11 @@ export class Chart extends React.Component {
         },
       });
     } else {
+      this.setState({ autoFocus: true });
       onDataChange([
         ...data,
         {
           inDefineChart: defineChart,
-          autoFocus: true,
           label: categoryDefaultLabel || translator.t('charting.newLabel', { lng: language }),
           value: 0,
           deletable: true,
@@ -182,6 +185,10 @@ export class Chart extends React.Component {
       : [];
   };
 
+  resetAutoFocus = () => {
+    this.setState({ autoFocus: false });
+  };
+
   render() {
     const {
       classes,
@@ -202,6 +209,7 @@ export class Chart extends React.Component {
       error,
       mathMlOptions = {},
       language,
+      labelsCharactersLimit,
     } = this.props;
     let { chartType } = this.props;
 
@@ -269,10 +277,13 @@ export class Chart extends React.Component {
           showPixelGuides={showPixelGuides}
           rootRef={(r) => (this.rootNode = r)}
           mathMlOptions={mathMlOptions}
+          labelsCharactersLimit={labelsCharactersLimit}
           {...rootCommon}
         >
           <ChartGrid {...common} xBand={xBand} rowTickValues={horizontalLines} columnTickValues={verticalLines} />
           <ChartAxes
+            autoFocus={this.state.autoFocus}
+            onAutoFocusUsed={this.resetAutoFocus}
             {...common}
             defineChart={defineChart}
             categories={categories}
@@ -321,10 +332,9 @@ const styles = (theme) => ({
     justifyContent: 'space-between',
     padding: theme.spacing.unit,
     backgroundColor: color.primaryLight(),
-    borderTop: `solid 1px ${color.primaryDark()}`,
-    borderBottom: `solid 0px ${color.primaryDark()}`,
-    borderLeft: `solid 1px ${color.primaryDark()}`,
-    borderRight: `solid 1px ${color.primaryDark()}`,
+    '& button': {
+      fontSize: theme.typography.fontSize,
+    },
   },
   svg: {
     overflow: 'visible',

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

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BasePoint snapshot renders 1`] = `
+<RawDragHandle
+  className="className"
+  classes={
+    Object {
+      "handle": "RawDragHandle-handle-1",
+      "handleContainer": "RawDragHandle-handleContainer-3",
+      "svgOverflowVisible": "RawDragHandle-svgOverflowVisible-4",
+      "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/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', () => {
+  const { types, utils } = jest.requireActual('@pie-lib/plot');
+  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);
+      });
+    });
+  });
+});