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

package/src/__tests__/axes.test.jsx

@@ -0,0 +1,146 @@
+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' });
+    });
+
+    it('calls onChange', () => {
+      w.instance().deleteCategory(0);
+      expect(onChange).toHaveBeenCalledWith([]);
+    });
+  });
+});

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,87 @@
+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');
+    });
+  });
+});

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/axes.jsx

@@ -24,6 +24,12 @@ export class TickComponent extends React.Component {
     };
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.autoFocus && !prevProps.autoFocus) {
+      this.props.onAutoFocusUsed();
+    }
+  }
+
   handleAlertDialog = (open, callback) =>
     this.setState(
       {
@@ -126,6 +132,8 @@ export class TickComponent extends React.Component {
       changeInteractiveEnabled,
       changeEditableEnabled,
       error,
+      autoFocus,
+      hiddenLabelRef,
     } = this.props;
 
     if (!formattedValue) {
@@ -136,7 +144,7 @@ export class TickComponent extends React.Component {
     const { changeEditable, changeInteractive } = chartingOptions || {};
     const index = parseInt(formattedValue.split('-')[0], 10);
     const category = categories[index];
-    const { deletable, editable, interactive, label, correctness, autoFocus, inDefineChart } = category || {};
+    const { deletable, editable, interactive, label, correctness } = category || {};
     const barX = xBand(bandKey({ label }, index));
     const longestCategory = (categories || []).reduce((a, b) => {
       const lengthA = a && a.label ? a.label.length : 0;
@@ -144,8 +152,6 @@ export class TickComponent extends React.Component {
 
       return lengthA > lengthB ? a : b;
     });
-
-    const longestLabel = (longestCategory && longestCategory.label) || '';
     const distinctMessages = error ? [...new Set(Object.values(error))].join(' ') : '';
 
     return (
@@ -158,23 +164,18 @@ export class TickComponent extends React.Component {
           style={{ pointerEvents: 'none', overflow: 'visible' }}
         >
           {index === 0 && (
-            <div
-              id="hiddenLabel"
-              style={{
-                position: 'absolute',
-                visibility: 'hidden',
-                wordBreak: 'break-word',
-                overflow: 'visible',
-                maxWidth: barWidth,
-                display: 'block',
-              }}
-            >
-              {longestLabel}
-            </div>
+            <MarkLabel
+              isHiddenLabel={true}
+              inputRef={hiddenLabelRef}
+              disabled={true}
+              mark={longestCategory}
+              graphProps={graphProps}
+              barWidth={barWidth}
+            />
           )}
 
           <MarkLabel
-            autoFocus={inDefineChart ? defineChart && autoFocus : autoFocus}
+            autoFocus={defineChart && autoFocus}
             inputRef={(r) => (this.input = r)}
             disabled={!defineChart && !editable}
             mark={category}
@@ -271,6 +272,7 @@ export class TickComponent extends React.Component {
             style={{ pointerEvents: 'visible', overflow: 'visible' }}
           >
             <Checkbox
+              className={classes.customColor}
               style={{ position: 'fixed' }}
               checked={interactive}
               onChange={(e) => this.changeInteractive(index, e.target.checked)}
@@ -287,6 +289,7 @@ export class TickComponent extends React.Component {
             style={{ pointerEvents: 'visible', overflow: 'visible' }}
           >
             <Checkbox
+              className={classes.customColor}
               style={{ position: 'fixed' }}
               checked={editable}
               onChange={(e) => this.changeEditable(index, e.target.checked)}
@@ -333,6 +336,8 @@ TickComponent.propTypes = {
   chartingOptions: PropTypes.object,
   changeInteractiveEnabled: PropTypes.bool,
   changeEditableEnabled: PropTypes.bool,
+  autoFocus: PropTypes.bool,
+  onAutoFocusUsed: PropTypes.func,
 };
 
 export class RawChartAxes extends React.Component {
@@ -352,14 +357,30 @@ export class RawChartAxes extends React.Component {
     chartingOptions: PropTypes.object,
     changeInteractiveEnabled: PropTypes.bool,
     changeEditableEnabled: PropTypes.bool,
+    autoFocus: PropTypes.bool,
+    onAutoFocusUsed: PropTypes.func,
   };
 
-  state = { height: 0 };
+  state = { height: 0, width: 0 };
 
   componentDidMount() {
-    const height = document.getElementById('hiddenLabel') ? document.getElementById('hiddenLabel').offsetHeight : 0;
+    if (this.hiddenLabelRef) {
+      const boundingClientRect = this.hiddenLabelRef.getBoundingClientRect();
+      this.setState({
+        height: Math.floor(boundingClientRect.height),
+        width: Math.floor(boundingClientRect.width),
+      });
+    }
+  }
 
-    this.setState({ height });
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (this.hiddenLabelRef) {
+      const width = Math.floor(this.hiddenLabelRef.getBoundingClientRect().width);
+
+      if (width !== this.state.width) {
+        this.setState({ width });
+      }
+    }
   }
 
   render() {
@@ -377,12 +398,14 @@ export class RawChartAxes extends React.Component {
       changeInteractiveEnabled,
       changeEditableEnabled,
       theme,
+      autoFocus,
+      onAutoFocusUsed,
       error,
     } = this.props;
 
     const { axis, axisLine, tick } = classes;
     const { scale = {}, range = {}, domain = {}, size = {} } = graphProps || {};
-    const { height } = this.state;
+    const { height, width } = this.state;
 
     const bottomScale = xBand && typeof xBand.rangeRound === 'function' && xBand.rangeRound([0, size.width]);
 
@@ -392,7 +415,10 @@ export class RawChartAxes extends React.Component {
 
     const rowTickValues = getTickValues({ ...range, step: range.labelStep });
     const fontSize = theme && theme.typography ? theme.typography.fontSize : 14;
-    const rotate = getRotateAngle(fontSize, height);
+    // this mostly applies for labels that are not editable
+    const rotateBecauseOfHeight = getRotateAngle(fontSize, height);
+    // this applies for labels that are editable
+    const rotateBecauseOfWidth = width > barWidth ? 25 : 0;
 
     const getTickLabelProps = (value) => ({
       dy: 4,
@@ -401,15 +427,20 @@ export class RawChartAxes extends React.Component {
 
     const getTickComponent = (props) => {
       const properties = {
+        hiddenLabelRef: (ref) => {
+          this.hiddenLabelRef = ref;
+        },
         classes,
         categories,
         xBand,
         bandWidth,
         barWidth,
-        rotate,
+        rotate: rotateBecauseOfHeight || rotateBecauseOfWidth,
         top,
         defineChart,
         chartingOptions,
+        autoFocus,
+        onAutoFocusUsed,
         error,
         onChangeCategory,
         changeInteractiveEnabled,
@@ -447,6 +478,8 @@ export class RawChartAxes extends React.Component {
           textLabelProps={() => ({ textAnchor: 'middle' })}
           tickFormat={(count) => count}
           tickComponent={getTickComponent}
+          autoFocus={autoFocus}
+          onAutoFocusUsed={onAutoFocusUsed}
         />
       </React.Fragment>
     );
@@ -481,6 +514,9 @@ const ChartAxes = withStyles(
       fontSize: theme.typography.fontSize - 2,
       fill: theme.palette.error.main,
     },
+    customColor: {
+      color: `${color.tertiary()} !important`
+    },
   }),
   { withTheme: true },
 )(RawChartAxes);