@pie-lib/graphing-solution-set 4.0.4-next.0 → 4.0.4-next.102

package/src/__tests__/utils.js

@@ -0,0 +1,41 @@
+export const scaleMock = () => {
+  const fn = jest.fn((n) => n);
+  fn.invert = jest.fn((n) => n);
+  fn.domain = jest.fn(() => fn);
+  fn.range = jest.fn(() => fn);
+  fn.copy = jest.fn(() => scaleMock());
+  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,
+  },
+});
+
+export const xy = (x, y, index) => {
+  const out = { x, y, index };
+  if (!Number.isFinite(index)) {
+    delete out.index;
+  }
+  return out;
+};

package/src/__tests__/utils.test.js

@@ -0,0 +1,105 @@
+import * as utils from '../utils';
+
+const xy = (x, y) => ({ x, y });
+
+const tick = (isMajor, v) => ({
+  major: isMajor,
+  value: v,
+  x: v,
+});
+
+const major = tick.bind(null, true);
+const minor = tick.bind(null, false);
+
+describe('utils', () => {
+  describe('polygonToArea', () => {
+    const assertPolygon = (points, area) => {
+      it(`converts ${points} -> ${area}`, () => {
+        const result = utils.polygonToArea(points);
+        expect(result).toEqual(area);
+      });
+    };
+    assertPolygon([xy(0, 0), xy(1, 1), xy(1, -1)], {
+      left: 0,
+      top: 1,
+      bottom: -1,
+      right: 1,
+    });
+    assertPolygon([xy(0, 0), xy(3, 0), xy(2, -1), xy(4, -3), xy(1, -4), xy(2, -2)], {
+      left: 0,
+      top: 0,
+      bottom: -4,
+      right: 4,
+    });
+  });
+
+  describe('lineToArea', () => {
+    const assertLine = (from, to, expected) => {
+      it(`${from},${to} => ${expected}`, () => {
+        const result = utils.lineToArea(from, to);
+        expect(result).toEqual(expected);
+      });
+    };
+
+    assertLine(xy(1, 1), xy(2, 2), { left: 1, top: 2, bottom: 1, right: 2 });
+    assertLine(xy(-1, 4), xy(4, -3), {
+      left: -1,
+      top: 4,
+      bottom: -3,
+      right: 4,
+    });
+  });
+
+  describe('getTickValues', () => {
+    const assertGetTickValues = (props, expected) => {
+      it(` => ${expected}`, () => {
+        const result = utils.getTickValues(props);
+        expect(result).toEqual(expected);
+      });
+    };
+
+    assertGetTickValues({ min: 0, max: 10, step: 1 }, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
+    assertGetTickValues({ min: 0, max: 3, step: 0.5 }, [0, 0.5, 1, 1.5, 2, 2.5, 3]);
+    assertGetTickValues({ min: -0.2, max: 2, step: 0.6 }, [0, 0.6, 1.2, 1.8]);
+    assertGetTickValues({ min: -3.4, max: 6.2, step: 1.2 }, [0, -1.2, -2.4, 1.2, 2.4, 3.6, 4.8, 6]);
+
+    assertGetTickValues(
+      { min: 0.6, max: 4.8, step: 0.3 },
+      [0.6, 0.9, 1.2, 1.5, 1.8, 2.1, 2.4, 2.7, 3.0, 3.3, 3.6, 3.9, 4.2, 4.5, 4.8],
+    );
+    assertGetTickValues(
+      { min: 0.5, max: 4.9, step: 0.3 },
+      [0.6, 0.9, 1.2, 1.5, 1.8, 2.1, 2.4, 2.7, 3.0, 3.3, 3.6, 3.9, 4.2, 4.5, 4.8],
+    );
+    assertGetTickValues(
+      { min: 0, max: 3, step: 0.125 },
+      [
+        0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1, 1.125, 1.25, 1.375, 1.5, 1.625, 1.75, 1.875, 2, 2.125, 2.25,
+        2.375, 2.5, 2.625, 2.75, 2.875, 3,
+      ],
+    );
+  });
+
+  describe('countWords', () => {
+    it('should return 1 if label is undefined', () => {
+      const label = undefined;
+      const result = utils.countWords(label);
+
+      expect(result).toEqual(1);
+    });
+
+    it('should return 1 if label is null', () => {
+      const label = null;
+      const result = utils.countWords(label);
+
+      expect(result).toEqual(1);
+    });
+
+    it('should return 3 if label has 3 words', () => {
+      const label = 'Number of months';
+      const result = utils.countWords(label);
+
+      expect(result).toEqual(3);
+    });
+  });
+});

package/src/axis/__tests__/arrow.test.jsx

@@ -0,0 +1,43 @@
+import { render } from '@pie-lib/test-utils';
+import React from 'react';
+import { Arrow } from '../arrow';
+
+describe('Arrow', () => {
+  let onChange = jest.fn();
+
+  const renderComponent = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      scale: {
+        x: jest.fn((n) => n),
+        y: jest.fn((n) => n),
+      },
+    };
+    const props = { ...defaults, ...extras };
+    return render(<Arrow {...props} />);
+  };
+
+  describe('rendering', () => {
+    it('renders with direction up', () => {
+      const { container } = renderComponent({ direction: 'up' });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with direction down', () => {
+      const { container } = renderComponent({ direction: 'down' });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with direction left', () => {
+      const { container } = renderComponent({ direction: 'left' });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with direction right', () => {
+      const { container } = renderComponent({ direction: 'right' });
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});

package/src/axis/__tests__/axes.test.jsx

@@ -0,0 +1,182 @@
+import { render } from '@pie-lib/test-utils';
+import React from 'react';
+import { graphProps } from '../../__tests__/utils';
+
+import { firstNegativeValue, RawXAxis, RawYAxis, sharedValues } from '../axes';
+
+describe('RawXAxis', () => {
+  let onChange = jest.fn();
+
+  const renderComponent = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: graphProps(),
+      includeArrows: {
+        left: true,
+        right: true,
+        up: true,
+        down: true,
+      },
+      columnTicksValues: [-1, 0, 1],
+      skipValues: [],
+      distanceFromOriginToFirstNegativeY: 0,
+      dy: 0,
+    };
+    const props = { ...defaults, ...extras };
+    return render(<RawXAxis {...props} />);
+  };
+
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});
+
+describe('RawYAxis', () => {
+  let onChange = jest.fn();
+
+  const renderComponent = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: graphProps(),
+      includeArrows: {
+        left: true,
+        right: true,
+        up: true,
+        down: true,
+      },
+      rowTickValues: [-1, 0, 1],
+      skipValues: [],
+    };
+    const props = { ...defaults, ...extras };
+    return render(<RawYAxis {...props} />);
+  };
+
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const { container } = renderComponent();
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});
+
+const customScaleMock = (distance) => {
+  const fn = jest.fn((n) => n * distance);
+  fn.invert = jest.fn((n) => n * distance);
+  fn.domain = jest.fn(() => fn);
+  fn.range = jest.fn(() => fn);
+  fn.copy = jest.fn(() => customScaleMock(distance));
+  return fn;
+};
+
+// Note: Instance method tests (xValues, yValues) have been removed.
+// These methods are internal implementation details and should be tested through
+// component rendering and integration tests that verify the axes render correctly.
+
+describe('firstNegativeValue', () => {
+  it('should return undefined for undefined interval', () => {
+    const interval = undefined;
+    const result = firstNegativeValue(interval);
+    expect(result).toEqual(undefined);
+  });
+
+  it('should return undefined for empty interval', () => {
+    const interval = [];
+    const result = firstNegativeValue(interval);
+    expect(result).toEqual(undefined);
+  });
+
+  it('should return undefined if there is no negative in interval array', () => {
+    const interval = [1, 5, 7, 4, 5];
+    const result = firstNegativeValue(interval);
+    expect(result).toEqual(undefined);
+  });
+
+  it('should return first negative number from interval', () => {
+    const interval = [1, 5, 7, -2, 4, 5, -1];
+    const result = firstNegativeValue(interval);
+    expect(result).toEqual(-2);
+  });
+});
+
+describe('sharedValues', () => {
+  it('should be empty array if firstNegativeValue for one of the axes is undefined', () => {
+    // x
+    const intervalX = [1, 2, 3, 4, 5, 6];
+    const firstNegativeX = firstNegativeValue(intervalX);
+    const distanceFromOriginToFirstNegativeX = -22;
+
+    // y
+    const intervalY = [-1, -2, 1, 2, 3, 4, 5, 6];
+    const firstNegativeY = firstNegativeValue(intervalY);
+    const distanceFromOriginToFirstNegativeY = -22;
+
+    const deltaAllowance = 5;
+
+    const result = sharedValues(
+      firstNegativeX,
+      firstNegativeY,
+      distanceFromOriginToFirstNegativeX,
+      distanceFromOriginToFirstNegativeY,
+      deltaAllowance,
+    );
+
+    expect(result).toEqual([]);
+  });
+
+  it('should be empty array if firstNegativeX and firstNegativeY are equal but they do not overlap', () => {
+    // x
+    const intervalX = [-1, -2, 1, 2, 3, 4, 5, 6];
+    const firstNegativeX = firstNegativeValue(intervalX);
+    const distanceFromOriginToFirstNegativeX = -7;
+
+    // y
+    const intervalY = [-1, -2, 1, 2, 3, 4, 5, 6];
+    const firstNegativeY = firstNegativeValue(intervalY);
+    const distanceFromOriginToFirstNegativeY = -22;
+
+    const deltaAllowance = 5;
+
+    const result = sharedValues(
+      firstNegativeX,
+      firstNegativeY,
+      distanceFromOriginToFirstNegativeX,
+      distanceFromOriginToFirstNegativeY,
+      deltaAllowance,
+    );
+
+    expect(result).toEqual([]);
+  });
+
+  it('should be -1 if firstNegativeX and firstNegativeY are equal and they overlap', () => {
+    // x
+    const intervalX = [-1, -2, 1, 2, 3, 4, 5, 6];
+    const firstNegativeX = firstNegativeValue(intervalX);
+    const distanceFromOriginToFirstNegativeX = -20;
+
+    // y
+    const intervalY = [-1, -2, 1, 2, 3, 4, 5, 6];
+    const firstNegativeY = firstNegativeValue(intervalY);
+    const distanceFromOriginToFirstNegativeY = -22;
+
+    const deltaAllowance = 5;
+    const dy = -20; // dy needs to be within the range for the condition to pass
+
+    const result = sharedValues(
+      firstNegativeX,
+      firstNegativeY,
+      distanceFromOriginToFirstNegativeX,
+      distanceFromOriginToFirstNegativeY,
+      deltaAllowance,
+      dy,
+    );
+
+    expect(result).toEqual([-1]);
+  });
+});

package/src/axis/arrow.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { styled } from '@mui/material/styles';
+import { types } from '@pie-lib/plot';
+
+const StyledPath = styled('path')(({ theme }) => ({
+  fill: `var(--arrow-color, ${theme.palette.common.black})`,
+}));
+
+export class Arrow extends React.Component {
+  render() {
+    const { x, y, className, scale } = this.props;
+    let direction = this.props.direction || 'left';
+
+    const xv = scale.x(x);
+    const yv = scale.y(y);
+
+    let transform = '';
+
+    const getTransform = (x, y, rotate) => `translate(${x}, ${y}) rotate(${rotate})`;
+
+    if (direction === 'left') {
+      transform = getTransform(xv - 15, yv, 0);
+    }
+
+    if (direction === 'right') {
+      transform = getTransform(xv + 15, yv, 180);
+    }
+
+    if (direction === 'up') {
+      transform = getTransform(xv, yv - 15, 90);
+    }
+
+    if (direction === 'down') {
+      transform = getTransform(xv, yv + 15, 270);
+    }
+
+    return <StyledPath d="m 0,0 8,-5 0,10 -8,-5" transform={transform} className={className} />;
+  }
+}
+
+Arrow.propTypes = {
+  y: PropTypes.number,
+  x: PropTypes.number,
+  direction: PropTypes.oneOf(['left', 'right', 'up', 'down']),
+  className: PropTypes.string,
+  scale: types.ScaleType.isRequired,
+};
+
+Arrow.defaultProps = {
+  y: 0,
+  x: 0,
+  direction: 'left',
+};
+
+export default Arrow;

package/src/axis/axes.jsx

@@ -0,0 +1,284 @@
+import React from 'react';
+import { Axis } from '@visx/axis';
+import { types } from '@pie-lib/plot';
+import PropTypes from 'prop-types';
+import Arrow from './arrow';
+import { styled } from '@mui/material/styles';
+import { amountToIncreaseWidth, countWords, findLongestWord, getTickValues } from '../utils';
+import { color, Readable } from '@pie-lib/render-ui';
+
+export const AxisPropTypes = {
+  includeArrows: PropTypes.object,
+  graphProps: PropTypes.object,
+};
+
+const AxisDefaultProps = {
+  includeArrows: {
+    left: true,
+    right: true,
+    up: true,
+    down: true,
+  },
+};
+
+const StyledAxesGroup = styled('g')(() => ({
+  '& .visx-axis-line': {
+    stroke: '#8a92c0',
+    strokeWidth: 4,
+  },
+  '& .visx-axis-tick': {
+    fill: color.defaults.BLACK,
+    '& > line': {
+      stroke: '#8a92c0',
+    },
+  },
+}));
+
+const AxisLabelHolder = styled('div')(({ theme, centered }) => ({
+  padding: 0,
+  margin: 0,
+  '* > *': {
+    margin: 0,
+    padding: 0,
+  },
+  '& p': {
+    margin: 0,
+  },
+  fontSize: theme.typography.fontSize,
+  ...(centered && { textAlign: 'center' }),
+}));
+
+const StyledArrow = styled(Arrow)({
+  fill: '#8a92c0',
+});
+
+const tickLabelStyles = {
+  fontFamily: 'Roboto',
+  fontSize: '14px',
+  cursor: 'inherit',
+};
+
+export const sharedValues = (
+  firstNegativeX,
+  firstNegativeY,
+  distanceFromOriginToFirstNegativeX,
+  distanceFromOriginToFirstNegativeY,
+  deltaAllowance,
+  dy,
+) => {
+  let result = [];
+
+  if (
+    firstNegativeX === firstNegativeY &&
+    distanceFromOriginToFirstNegativeX - deltaAllowance < distanceFromOriginToFirstNegativeY &&
+    distanceFromOriginToFirstNegativeY < distanceFromOriginToFirstNegativeX + deltaAllowance &&
+    distanceFromOriginToFirstNegativeX - deltaAllowance < dy &&
+    dy < distanceFromOriginToFirstNegativeX + deltaAllowance
+  ) {
+    result.push(firstNegativeX);
+  }
+
+  return result;
+};
+
+export const firstNegativeValue = (interval) => (interval || []).find((element) => element < 0);
+
+export class RawXAxis extends React.Component {
+  static propTypes = {
+    ...AxisPropTypes,
+    graphProps: types.GraphPropsType.isRequired,
+  };
+  static defaultProps = AxisDefaultProps;
+
+  render() {
+    const { includeArrows, graphProps, columnTicksValues, skipValues, distanceFromOriginToFirstNegativeY, dy } =
+      this.props;
+    const { scale, domain, size, range } = graphProps || {};
+
+    const labelProps = (label) => {
+      const y = skipValues && skipValues[0] === label ? distanceFromOriginToFirstNegativeY + 4 : dy;
+
+      return {
+        ...tickLabelStyles,
+        textAnchor: 'middle',
+        y: y,
+        dx: label === 0 ? -10 : 0,
+        dy: label === 0 ? -7 : 0,
+      };
+    };
+
+    const necessaryRows = countWords(domain.axisLabel);
+    const longestWord = findLongestWord(domain.axisLabel);
+    const necessaryWidth = amountToIncreaseWidth(longestWord) + 2;
+
+    return (
+      <StyledAxesGroup>
+        <Axis
+          scale={scale.x}
+          top={scale.y(0)}
+          left={0}
+          label={domain.label}
+          rangePadding={8}
+          tickFormat={(value) => value}
+          tickLabelProps={labelProps}
+          tickValues={columnTicksValues}
+          hideZero={!(domain.labelStep || range.labelStep) && domain.min <= 0}
+        />
+        {includeArrows && includeArrows.left && <StyledArrow direction="left" x={domain.min} y={0} scale={scale} />}
+        {includeArrows && includeArrows.right && <StyledArrow direction="right" x={domain.max} y={0} scale={scale} />}
+        {domain.axisLabel && (
+          <foreignObject x={size.width + 17} y={scale.y(0) - 9} width={necessaryWidth} height={20 * necessaryRows}>
+            <Readable false>
+              <AxisLabelHolder dangerouslySetInnerHTML={{ __html: domain.axisLabel }} />
+            </Readable>
+          </foreignObject>
+        )}
+      </StyledAxesGroup>
+    );
+  }
+}
+
+const XAxis = RawXAxis;
+
+export class RawYAxis extends React.Component {
+  static propTypes = {
+    ...AxisPropTypes,
+    graphProps: types.GraphPropsType.isRequired,
+  };
+  static defaultProps = AxisDefaultProps;
+
+  render() {
+    const { includeArrows, graphProps, skipValues, rowTickValues } = this.props;
+    const { scale, range, size } = graphProps || {};
+
+    const necessaryWidth = range.axisLabel ? amountToIncreaseWidth(range.axisLabel.length) : 0;
+
+    const customTickFormat = (value) => (skipValues && skipValues.indexOf(value) >= 0 ? '' : value);
+
+    return (
+      <StyledAxesGroup>
+        <Axis
+          orientation={'left'}
+          scale={scale.y}
+          top={0}
+          height={size.height}
+          left={scale.x(0)}
+          label={range.label}
+          labelProps={{ 'data-pie-readable': false }}
+          rangePadding={8}
+          tickLength={10}
+          tickFormat={customTickFormat}
+          tickLabelProps={(value) => {
+            let digits = value.toLocaleString().replace(/[.-]/g, '').length || 1;
+
+            return {
+              ...tickLabelStyles,
+              dy: 4,
+              dx: -10 - digits * 9,
+              'data-pie-readable': false,
+            };
+          }}
+          hideZero={true}
+          tickTextAnchor={'bottom'}
+          tickValues={rowTickValues}
+        />
+        {includeArrows && includeArrows.down && <StyledArrow direction="down" x={0} y={range.min} scale={scale} />}
+        {includeArrows && includeArrows.up && <StyledArrow direction="up" x={0} y={range.max} scale={scale} />}
+        {range.axisLabel && (
+          <foreignObject x={scale.x(0) - necessaryWidth / 2} y={-33} width={necessaryWidth} height="20">
+            <Readable false>
+              <AxisLabelHolder centered dangerouslySetInnerHTML={{ __html: range.axisLabel }} />
+            </Readable>
+          </foreignObject>
+        )}
+      </StyledAxesGroup>
+    );
+  }
+}
+
+const YAxis = RawYAxis;
+
+export default class Axes extends React.Component {
+  static propTypes = {
+    ...AxisPropTypes,
+    graphProps: types.GraphPropsType.isRequired,
+  };
+  static defaultProps = AxisDefaultProps;
+
+  xValues = () => {
+    const { graphProps } = this.props;
+    const { scale, domain } = graphProps || {};
+
+    if (!domain || !scale) {
+      return;
+    }
+
+    const ticks = getTickValues({ ...domain, step: domain.labelStep });
+    const negative = firstNegativeValue(ticks);
+
+    return {
+      columnTicksValues: ticks,
+      firstNegativeX: negative,
+      distanceFromOriginToFirstNegativeX: Math.abs(scale.y(0) - scale.y(negative)),
+    };
+  };
+
+  yValues = () => {
+    const { graphProps } = this.props;
+    const { scale, range } = graphProps || {};
+
+    if (!range || !scale) {
+      return;
+    }
+
+    const ticks = getTickValues({ ...range, step: range.labelStep });
+    const negative = firstNegativeValue(ticks);
+
+    return {
+      rowTickValues: ticks,
+      firstNegativeY: negative,
+      distanceFromOriginToFirstNegativeY: Math.abs(scale.x(0) - scale.x(negative)),
+    };
+  };
+
+  render() {
+    const { graphProps } = this.props;
+    const { domain, range } = graphProps || {};
+    const { columnTicksValues, firstNegativeX, distanceFromOriginToFirstNegativeX } = this.xValues();
+    const { rowTickValues, firstNegativeY, distanceFromOriginToFirstNegativeY } = this.yValues();
+    const deltaAllowance = 6;
+    const dy = 25;
+
+    const skipValues = sharedValues(
+      firstNegativeX,
+      firstNegativeY,
+      distanceFromOriginToFirstNegativeX,
+      distanceFromOriginToFirstNegativeY,
+      deltaAllowance,
+      dy,
+    );
+
+    // each axis has to be displayed only if the domain & range include it
+    return (
+      <StyledAxesGroup>
+        {range.min <= 0 ? (
+          <XAxis
+            {...this.props}
+            skipValues={skipValues}
+            columnTicksValues={columnTicksValues}
+            distanceFromOriginToFirstNegativeY={distanceFromOriginToFirstNegativeY}
+            dy={dy}
+          />
+        ) : null}
+        {domain.min <= 0 ? (
+          <YAxis
+            {...this.props}
+            skipValues={skipValues}
+            rowTickValues={rowTickValues}
+            distanceFromOriginToFirstNegativeX={distanceFromOriginToFirstNegativeX}
+          />
+        ) : null}
+      </StyledAxesGroup>
+    );
+  }
+}