@pie-lib/charting 5.15.6 → 5.15.7-next.1618

package/src/__tests__/__snapshots__/mark-label.test.jsx.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MarkLabel snapshot renders 1`] = `
+<div>
+  <AutosizeInput
+    injectStyles={true}
+    inputClassName=""
+    inputRef={[Function]}
+    inputStyle={
+      Object {
+        "background": "transparent",
+        "boxSizing": "border-box",
+        "minWidth": undefined,
+        "paddingLeft": 0,
+        "paddingRight": 0,
+        "textAlign": "center",
+      }
+    }
+    minWidth={1}
+    onBlur={[Function]}
+    onChange={[Function]}
+    style={
+      Object {
+        "left": 0,
+        "marginTop": "0",
+        "minWidth": undefined,
+        "pointerEvents": "auto",
+        "position": "fixed",
+        "top": 0,
+        "transform": "rotate(undefineddeg)",
+        "transformOrigin": "left",
+        "visibility": "unset",
+      }
+    }
+  />
+</div>
+`;
+
+exports[`MarkLabel snapshot renders 2`] = `
+<div>
+  <AutosizeInput
+    injectStyles={true}
+    inputClassName=""
+    inputRef={[Function]}
+    inputStyle={
+      Object {
+        "background": "transparent",
+        "boxSizing": "border-box",
+        "minWidth": undefined,
+        "paddingLeft": 0,
+        "paddingRight": 0,
+        "textAlign": "center",
+      }
+    }
+    minWidth={1}
+    onBlur={[Function]}
+    onChange={[Function]}
+    style={
+      Object {
+        "left": 0,
+        "marginTop": "0",
+        "minWidth": undefined,
+        "pointerEvents": "auto",
+        "position": "fixed",
+        "top": 0,
+        "transform": "rotate(undefineddeg)",
+        "transformOrigin": "left",
+        "visibility": "unset",
+      }
+    }
+  />
+</div>
+`;

package/src/__tests__/axes.test.jsx

@@ -0,0 +1,141 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import ChartAxes, { TickComponent, RawChartAxes } from '../axes';
+import { graphProps } from './utils';
+
+describe('ChartAxes', () => {
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+      xBand: {
+        bandwidth: () => {},
+      },
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<ChartAxes {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => expect(wrapper()).toMatchSnapshot());
+  });
+});
+
+describe('RawChartAxes', () => {
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+      xBand: {
+        bandwidth: () => {},
+        rangeRound: () => {},
+      },
+      categories: [],
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<RawChartAxes {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => expect(wrapper()).toMatchSnapshot());
+
+    it('renders if graphProps is not defined', () => expect(wrapper({ graphProps: undefined })).toMatchSnapshot());
+
+    it('renders if categories are not defined', () => expect(wrapper({ categories: undefined })).toMatchSnapshot());
+  });
+});
+
+describe('splitText method', () => {
+  const wrapper = (extras) => {
+    const xBand = jest.fn();
+    xBand.bandwidth = jest.fn();
+
+    const defaults = {
+      graphProps: graphProps(),
+      xBand,
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<TickComponent {...props} />);
+  };
+
+  it('splits a string into chunks of up to the specified length', () => {
+    const w = wrapper();
+    const input = 'This is a test string for splitText function';
+    const output = w.instance().splitText(input, 20);
+    expect(output).toEqual(['This is a test', 'string for splitText', 'function']);
+  });
+
+  it('returns an array with a single string when the input is less than the specified length', () => {
+    const w = wrapper();
+    const input = 'Short text';
+    const output = w.instance().splitText(input, 20);
+    expect(output).toEqual(['Short text']);
+  });
+
+  it('splits a string into chunks of exact length when no spaces are present', () => {
+    const w = wrapper();
+    const input = 'ThisisateststringforsplitTextfunction';
+    const output = w.instance().splitText(input, 10);
+    expect(output).toEqual(['Thisisates', 'tstringfor', 'splitTextf', 'unction']);
+  });
+
+  it('returns an empty array when the input is an empty string', () => {
+    const w = wrapper();
+    const input = '';
+    const output = w.instance().splitText(input, 20);
+    expect(output).toEqual([]);
+  });
+
+  it('returns an empty array when the input is null', () => {
+    const w = wrapper();
+    const input = null;
+    const output = w.instance().splitText(input, 20);
+    expect(output).toEqual([]);
+  });
+});
+
+describe('TickComponent', () => {
+  const wrapper = (extras) => {
+    const xBand = jest.fn();
+    xBand.bandwidth = jest.fn();
+
+    const defaults = {
+      graphProps: graphProps(),
+      xBand,
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<TickComponent {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => expect(wrapper()).toMatchSnapshot());
+  });
+
+  describe('snapshot1', () => {
+    it('renders', () =>
+      expect(
+        wrapper({
+          formattedValue: '0-test',
+          categories: [{ value: 1, label: 'test' }],
+        }),
+      ).toMatchSnapshot());
+  });
+
+  describe('logic', () => {
+    const onChange = jest.fn();
+    const onChangeCategory = jest.fn();
+    const w = wrapper({
+      formattedValue: '0-test',
+      categories: [{ value: 1, label: 'test' }],
+      onChange,
+      onChangeCategory,
+    });
+
+    it('calls onChangeCategory', () => {
+      w.instance().changeCategory(0, 'new label');
+      expect(onChangeCategory).toHaveBeenCalledWith(0, { value: 1, label: 'new label' });
+    });
+  });
+});

package/src/__tests__/chart-setup.test.jsx

@@ -0,0 +1,47 @@
+import { resetValues } from '../chart-setup';
+
+describe('resetValues', () => {
+  let data;
+  let range;
+  let model;
+  let onChange;
+
+  beforeEach(() => {
+    range = { min: 0, max: 10, step: 1 };
+    data = [
+      { value: 2 },
+      { value: 11 },
+      { value: 5.5 },
+      { value: 2.0000000001 }, // A float close to an integer
+      { value: 2.9999999999 }, // Another float close to an integer
+    ];
+    model = { someField: 'someValue', data };
+    onChange = jest.fn();
+  });
+
+  it('should reset values greater than range.max to zero', () => {
+    resetValues(data, true, range, onChange, model);
+    expect(data[1].value).toBe(0);
+  });
+
+  it('should reset values that are not multiples of range.step to zero', () => {
+    resetValues(data, true, range, onChange, model);
+    expect(data[2].value).toBe(0);
+  });
+
+  it('should not reset values that are within range and multiples of range.step', () => {
+    resetValues(data, true, range, onChange, model);
+    expect(data[0].value).toBe(2);
+  });
+
+  it('should not reset floating point values that are close to multiples of range.step', () => {
+    resetValues(data, true, range, onChange, model);
+    expect(data[3].value).toBe(2.0000000001); // remains unchanged
+    expect(data[4].value).toBe(2.9999999999); // remains unchanged
+  });
+
+  it('should not call onChange when updateModel is false', () => {
+    resetValues(data, false, range, onChange, model);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/chart-type.test.jsx

@@ -0,0 +1,29 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import ChartType from '../chart-type';
+
+describe('ChartType', () => {
+  let wrapper;
+  let props;
+  const onChange = jest.fn();
+
+  beforeEach(() => {
+    props = {
+      classes: {},
+      value: 'bar',
+      onChange,
+    };
+
+    wrapper = (newProps) => {
+      const configureProps = { ...props, newProps };
+
+      return shallow(<ChartType {...configureProps} />);
+    };
+  });
+
+  describe('renders', () => {
+    it('snapshot', () => {
+      expect(wrapper()).toMatchSnapshot();
+    });
+  });
+});

package/src/__tests__/chart.test.jsx

@@ -0,0 +1,95 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Chart } from '../chart';
+import { graphProps } from './utils';
+
+describe('ChartAxes', () => {
+  let onDataChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      onDataChange,
+      className: 'className',
+      graphProps: graphProps(),
+      xBand: () => {
+        return {
+          bandwidth: () => {},
+        };
+      },
+      charts: [
+        {
+          type: 'bar',
+          Component: () => <div />,
+        },
+      ],
+      chartType: 'bar',
+      domain: {},
+      range: {
+        min: 0,
+        max: 10,
+      },
+      size: {
+        width: 100,
+        height: 100,
+      },
+      data: [],
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<Chart {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      jest.spyOn(Chart.prototype, 'generateMaskId').mockReturnValue('chart-2645');
+      let w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders if size is not defined', () => {
+      jest.spyOn(Chart.prototype, 'generateMaskId').mockReturnValue('chart-1553');
+      let w = wrapper({ size: undefined });
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders without chartType property', () => {
+      jest.spyOn(Chart.prototype, 'generateMaskId').mockReturnValue('chart-4286');
+      let w = wrapper({ chartType: null });
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders without chartType and charts properties', () =>
+      expect(wrapper({ chartType: null, charts: null })).toMatchSnapshot());
+
+    it('renders without chartType property and empty charts property', () =>
+      expect(wrapper({ chartType: null, charts: [] })).toMatchSnapshot());
+
+    it('renders with chartType property and empty charts property', () =>
+      expect(wrapper({ charts: [] })).toMatchSnapshot());
+  });
+
+  describe('logic', () => {
+    it('changeData', () => {
+      let w = wrapper();
+
+      w.instance().changeData();
+
+      expect(onDataChange).toHaveBeenCalled();
+    });
+
+    it('getChart', () => {
+      const w = wrapper();
+
+      const chart = w.instance().getChart();
+
+      expect(chart.type).toEqual('bar');
+    });
+
+    it('deleteCategory', () => {
+      const w = wrapper();
+
+      w.instance().deleteCategory(0);
+
+      expect(onDataChange).toHaveBeenCalled();
+    });
+  });
+});

package/src/__tests__/grid.test.jsx

@@ -0,0 +1,25 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Grid } from '../grid';
+import { graphProps } from './utils';
+
+describe('Grid', () => {
+  let w;
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+      xBand: {
+        bandwidth: () => {},
+      },
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<Grid {...props} />);
+  };
+  describe('snapshot', () => {
+    it('renders', () => expect(wrapper()).toMatchSnapshot());
+
+    it('renders if graphProps is not defined', () => expect(wrapper({ graphProps: undefined })).toMatchSnapshot());
+  });
+});

package/src/__tests__/mark-label.test.jsx

@@ -0,0 +1,31 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { MarkLabel } from '../mark-label';
+import { graphProps as getGraphProps } from './utils';
+
+describe('MarkLabel', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      defineChart: false,
+      className: 'className',
+      onChange,
+      mark: { x: 1, y: 1 },
+      graphProps: getGraphProps(0, 10, 0, 10),
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<MarkLabel {...props} />);
+  };
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+    it('renders', () => {
+      w = wrapper({ mark: { x: 10, y: 10 } });
+      expect(w).toMatchSnapshot();
+    });
+  });
+});

package/src/__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/__tests__/utils.test.js

@@ -0,0 +1,100 @@
+import * as utils from '../utils';
+
+const xy = (x, y) => ({ x, y });
+
+describe('utils', () => {
+  describe('getTickValues', () => {
+    const assertGetTickValues = (range, points) => {
+      it(`converts ${range} -> ${points}`, () => {
+        const result = utils.getTickValues(range);
+        expect(result).toEqual(points);
+      });
+    };
+
+    assertGetTickValues({ min: 0, max: 5, step: 1 }, [0, 1, 2, 3, 4, 5]);
+    assertGetTickValues({ min: 0, max: 5, step: 0.5 }, [0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5]);
+    assertGetTickValues({ min: 0.4, max: 2, step: 0.3 }, [0.4, 0.7, 1, 1.3, 1.6, 1.9]);
+  });
+
+  describe('getDomainAndRangeByChartType', () => {
+    const assertGetDomainAndRangeByChartType = (domain, range, chartType, correctValues) => {
+      it('returns correct values for domain and range', () => {
+        const result = utils.getDomainAndRangeByChartType(domain, range, chartType);
+        expect(result).toEqual(correctValues);
+      });
+    };
+
+    assertGetDomainAndRangeByChartType({ min: -1, max: 4 }, { min: 1, max: 2, step: 1 }, 'line', {
+      domain: { min: 0, max: 1, step: 1, labelStep: 1 },
+      range: { min: 1, max: 2, step: 1, labelStep: 1 },
+    });
+    assertGetDomainAndRangeByChartType({ min: -1, max: 4 }, { min: 0.1, max: 2, labelStep: 0.1 }, 'line', {
+      domain: { min: 0, max: 1, step: 1, labelStep: 1 },
+      range: { min: 0.1, max: 2, step: 0.1, labelStep: 0.1 },
+    });
+    assertGetDomainAndRangeByChartType({ min: -1, max: 4 }, { min: 0.2, max: 2.4, step: 0.1 }, 'dotPlot', {
+      domain: { min: 0, max: 1, step: 1, labelStep: 1 },
+      range: { min: 0, max: 2, step: 1, labelStep: 0.1 },
+    });
+  });
+
+  describe('getGridLinesAndAxisByChartType', () => {
+    const assertGetGridLinesAndAxisByChartType = (range, chartType, gridLines) => {
+      it('returns proper grid values', () => {
+        const result = utils.getGridLinesAndAxisByChartType(range, chartType);
+        expect(result).toEqual(gridLines);
+      });
+    };
+
+    assertGetGridLinesAndAxisByChartType({ min: 0, max: 1, step: 1 }, 'lineDot', {
+      verticalLines: undefined,
+      horizontalLines: [0, 1],
+      leftAxis: true,
+    });
+
+    assertGetGridLinesAndAxisByChartType({ min: 0, max: 1, step: 1 }, 'lineCross', {
+      verticalLines: undefined,
+      horizontalLines: [0, 1],
+      leftAxis: true,
+    });
+
+    assertGetGridLinesAndAxisByChartType({ min: 0, max: 1, step: 1 }, 'bar', {
+      verticalLines: [],
+      horizontalLines: [0, 1],
+      leftAxis: true,
+    });
+
+    assertGetGridLinesAndAxisByChartType({ min: 0, max: 1, step: 1 }, 'dotPlot', {
+      verticalLines: [],
+      horizontalLines: [],
+      leftAxis: false,
+    });
+  });
+
+  describe('getTopPadding', () => {
+    const assertGetTopPadding = (barWidth, topPadding) => {
+      it('returns proper top padding', () => {
+        const result = utils.getTopPadding(barWidth);
+        expect(result).toEqual(topPadding);
+      });
+    };
+
+    assertGetTopPadding(20, 50);
+    assertGetTopPadding(35, 30);
+    assertGetTopPadding(55, 15);
+    assertGetTopPadding(65, 0);
+  });
+
+  describe('getRotateAngle', () => {
+    const assertGetRotateAngle = ({ fontSize, height }, rotateAngle) => {
+      it('returns proper rotate angle', () => {
+        const result = utils.getRotateAngle(fontSize, height);
+        expect(result).toEqual(rotateAngle);
+      });
+    };
+
+    assertGetRotateAngle({ fontSize: 14, height: 14 }, 0);
+    assertGetRotateAngle({ fontSize: 14, height: 28 }, 25);
+    assertGetRotateAngle({ fontSize: 14, height: 42 }, 25);
+  });
+});

package/src/actions-button.jsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Popover from '@material-ui/core/Popover';
+import Paper from '@material-ui/core/Paper';
+
+import { color } from '@pie-lib/render-ui';
+import Translator from '@pie-lib/translator';
+
+const { translator } = Translator;
+
+export class ActionsButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      actionsAnchorEl: null,
+    };
+  }
+
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    addCategory: PropTypes.func.isRequired,
+    deleteCategory: PropTypes.func.isRequired,
+    language: PropTypes.string,
+    categories: PropTypes.array,
+  };
+
+  handleActionsClick = (event) => {
+    this.setState({ actionsAnchorEl: event.currentTarget });
+  };
+
+  handleActionsClose = () => {
+    this.setState({ actionsAnchorEl: null });
+  };
+
+  handleAddCategory = () => {
+    const { addCategory } = this.props;
+    addCategory();
+    this.handleActionsClose();
+  };
+
+  handleDeleteCategory = (index) => {
+    const { deleteCategory } = this.props;
+    deleteCategory(index);
+    this.handleActionsClose();
+  };
+
+  render() {
+    const { classes, categories, language } = this.props;
+
+    return (
+      <div className={classes.actions}>
+        <div role="button" tabIndex={0} className={classes.trigger} onClick={this.handleActionsClick}>
+          Actions
+        </div>
+        <Popover
+          open={Boolean(this.state.actionsAnchorEl)}
+          anchorEl={this.state.actionsAnchorEl}
+          onClose={this.handleActionsClose}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+          transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+        >
+          <Paper className={classes.actionsPaper}>
+            <Button onClick={() => this.handleAddCategory()}>
+              + {translator.t('charting.add', { lng: language })}
+            </Button>
+            {categories.length > 0 &&
+              categories.map(
+                (category, index) =>
+                  category.deletable &&
+                  !category.correctness && (
+                    <Button key={index} onClick={() => this.handleDeleteCategory(index)}>
+                      {`${translator.t('charting.delete', { lng: language })} <${category.label ||
+                        translator.t('charting.newLabel', { lng: language })}>`}
+                    </Button>
+                  ),
+              )}
+          </Paper>
+        </Popover>
+      </div>
+    );
+  }
+}
+
+const styles = (theme) => ({
+  actions: {
+    alignSelf: 'flex-end',
+  },
+  trigger: {
+    cursor: 'pointer',
+    fontSize: theme.typography.fontSize,
+    color: color.tertiary(),
+    padding: theme.spacing.unit,
+  },
+  actionsPaper: {
+    padding: theme.spacing.unit,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing.unit,
+    '& button': {
+      textTransform: 'none',
+      fontSize: theme.typography.fontSize,
+      color: color.text(),
+      justifyContent: 'flex-start',
+    },
+  },
+});
+
+export default withStyles(styles)(ActionsButton);