@pie-lib/charting 7.0.3-next.3 → 7.0.4-next.0

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

@@ -1,45 +0,0 @@
-import React from 'react';
-import { render } from '@pie-lib/test-utils';
-import Bar, { Bar as BarChart } from '../bar';
-import { graphProps } from './utils';
-
-describe('BarChart', () => {
-  const renderComponent = (extras) => {
-    const defaults = {
-      classes: {},
-      className: 'className',
-      graphProps: graphProps(),
-      xBand: () => {
-        return {
-          bandwidth: () => {},
-        };
-      },
-    };
-    const props = { ...defaults, ...extras };
-    return render(<BarChart {...props} />);
-  };
-
-  describe('rendering', () => {
-    it('renders bar chart', () => {
-      const { container } = renderComponent();
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders without graphProps', () => {
-      const { container } = renderComponent({ graphProps: undefined });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-
-  describe('component', () => {
-    it('returns correct chart object', () => {
-      const chart = Bar();
-
-      expect(chart).toEqual({
-        type: 'bar',
-        Component: BarChart,
-        name: 'Bar',
-      });
-    });
-  });
-});

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

@@ -1,45 +0,0 @@
-import React from 'react';
-import { render } from '@pie-lib/test-utils';
-import Histogram, { Histogram as HistogramChart } from '../histogram';
-import { graphProps } from './utils';
-
-describe('HistogramChart', () => {
-  const renderComponent = (extras) => {
-    const defaults = {
-      classes: {},
-      className: 'className',
-      graphProps: graphProps(),
-      xBand: () => {
-        return {
-          bandwidth: () => {},
-        };
-      },
-    };
-    const props = { ...defaults, ...extras };
-    return render(<HistogramChart {...props} />);
-  };
-
-  describe('rendering', () => {
-    it('renders histogram chart', () => {
-      const { container } = renderComponent();
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders without graphProps', () => {
-      const { container } = renderComponent({ graphProps: undefined });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-
-  describe('component', () => {
-    it('returns correct chart object', () => {
-      const chart = Histogram();
-
-      expect(chart).toEqual({
-        type: 'histogram',
-        Component: HistogramChart,
-        name: 'Histogram',
-      });
-    });
-  });
-});

package/src/bars/__tests__/utils.js

@@ -1,30 +0,0 @@
-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/bar.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { types } from '@pie-lib/plot';
-import { dataToXBand } from '../utils';
-import Bars from './common/bars';
-
-export class Bar extends React.Component {
-  static propTypes = {
-    data: PropTypes.array,
-    onChange: PropTypes.func,
-    graphProps: types.GraphPropsType.isRequired,
-  };
-
-  render() {
-    const props = this.props;
-    const { data, graphProps } = props;
-    const { scale = {}, size = {} } = graphProps || {};
-    const xBand = dataToXBand(scale.x, data, size.width, 'bar');
-
-    return <Bars {...props} xBand={xBand} />;
-  }
-}
-
-export default () => ({
-  type: 'bar',
-  Component: Bar,
-  name: 'Bar',
-});

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

@@ -1,68 +0,0 @@
-import { render } from '@testing-library/react';
-import React from 'react';
-import Bars, { RawBar } from '../bars';
-import { graphProps } from './utils';
-
-describe('Bars', () => {
-  const xBand = () => {};
-  xBand.bandwidth = () => {};
-  const onChange = jest.fn();
-
-  const renderComponent = (extras) => {
-    const defaults = {
-      classes: {},
-      className: 'className',
-      graphProps: graphProps(),
-      xBand,
-      onChange,
-      data: [{ value: 0, label: '0' }],
-    };
-    const props = { ...defaults, ...extras };
-    return render(<Bars {...props} />);
-  };
-
-  describe('rendering', () => {
-    it('renders without crashing', () => {
-      const { container } = renderComponent();
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-});
-
-describe('RawBar', () => {
-  const xBand = () => {};
-  xBand.bandwidth = () => {};
-  const onChangeCategory = jest.fn();
-
-  const renderComponent = (extras) => {
-    const defaults = {
-      classes: {},
-      className: 'className',
-      graphProps: graphProps(),
-      xBand,
-      onChangeCategory,
-      data: [],
-      label: 'label',
-    };
-    const props = { ...defaults, ...extras };
-    return render(<RawBar {...props} />);
-  };
-
-  describe('rendering', () => {
-    it('renders without crashing', () => {
-      const { container } = renderComponent();
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-
-  describe('functionality', () => {
-    it('calls onChangeCategory when drag completes with a value', () => {
-      const { container } = renderComponent();
-      // Testing drag functionality requires interaction - the component should
-      // call onChangeCategory when a drag operation completes with a new value
-      // This would typically be tested through user interactions rather than
-      // directly calling instance methods
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-});

package/src/bars/common/__tests__/utils.js

@@ -1,30 +0,0 @@
-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

@@ -1,249 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Group } from '@visx/group';
-import { Bar as VisxBar } from '@visx/shape';
-import { styled } from '@mui/material/styles';
-import debug from 'debug';
-
-import { color } from '@pie-lib/render-ui';
-import { types } from '@pie-lib/plot';
-import { bandKey } from '../../utils';
-import DraggableHandle, { DragHandle } from '../../common/drag-handle';
-import { CorrectCheckIcon } from './correct-check-icon';
-
-const log = debug('pie-lib:chart:bars');
-const histogramColors = [
-  '#006699',
-  '#F59B00',
-  '#08916D',
-  '#529EE0',
-  '#52B7D8',
-  '#D9A6C2',
-  '#FFB03B',
-  '#54A77B',
-  '#E16032',
-  '#4FD2D2',
-  '#F0E442',
-  '#E287B2',
-];
-const hoverHistogramColors = [
-  '#003754',
-  '#975616',
-  '#00503B',
-  '#225982',
-  '#1F687D',
-  '#825E6F',
-  '#996428',
-  '#255E44',
-  '#8A331F',
-  '#167A7A',
-  '#91862D',
-  '#894A65',
-];
-
-const calculateFillColor = (isHovered, barColor, index, hoverHistogramColors, allowRolloverEvent) => {
-  if (isHovered && barColor && allowRolloverEvent) {
-    return hoverHistogramColors[index % hoverHistogramColors.length];
-  }
-  if (isHovered && allowRolloverEvent) {
-    return color.visualElementsColors.ROLLOVER_FILL_BAR_COLOR;
-  }
-  return barColor || null;
-};
-
-const StyledVisxBar = styled(VisxBar)(() => ({
-  fill: color.defaults.TERTIARY,
-}));
-
-export class RawBar extends React.Component {
-  static propTypes = {
-    barColor: PropTypes.string,
-    onChangeCategory: PropTypes.func,
-    value: PropTypes.number,
-    label: PropTypes.string,
-    xBand: PropTypes.func,
-    index: PropTypes.number.isRequired,
-    graphProps: types.GraphPropsType.isRequired,
-    interactive: PropTypes.bool,
-    correctness: PropTypes.shape({
-      value: PropTypes.string,
-      label: PropTypes.string,
-    }),
-    correctData: PropTypes.array,
-    defineChart: PropTypes.bool,
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      dragValue: undefined,
-      isHovered: false,
-    };
-    this.mouseX = 0;
-    this.mouseY = 0;
-  }
-
-  componentDidMount() {
-    window.addEventListener('mousemove', this.handleMouseMove);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('mousemove', this.handleMouseMove);
-  }
-
-  handleMouseMove = (e) => {
-    this.mouseX = e.clientX;
-    this.mouseY = e.clientY;
-    const isMouseInside = this.isMouseInsideSvgElement();
-    this.setState({ isHovered: isMouseInside });
-  };
-
-  isMouseInsideSvgElement = () => {
-    const gBoundingBox = this.gRef.getBoundingClientRect();
-    return (
-      this.mouseX >= gBoundingBox.left &&
-      this.mouseX <= gBoundingBox.right &&
-      this.mouseY >= gBoundingBox.top &&
-      this.mouseY <= gBoundingBox.bottom
-    );
-  };
-
-  handleMouseEnter = () => this.setState({ isHovered: true });
-  handleMouseLeave = () => this.setState({ isHovered: false });
-
-  setDragValue = (dragValue) => this.setState({ dragValue });
-
-  dragStop = () => {
-    const { label, onChangeCategory } = this.props;
-    const { dragValue } = this.state;
-    log('[dragStop]', dragValue);
-
-    if (dragValue !== undefined) {
-      onChangeCategory({ label, value: dragValue });
-    }
-
-    this.setDragValue(undefined);
-  };
-
-  dragValue = (existing, next) => {
-    log('[dragValue] next:', next);
-
-    this.setDragValue(next);
-  };
-
-  render() {
-    const { graphProps, value, label, xBand, index, interactive, correctness, barColor, defineChart, correctData } =
-      this.props;
-    const { scale, range } = graphProps;
-    const { dragValue, isHovered } = this.state;
-
-    const allowRolloverEvent = interactive && !correctness;
-    const fillColor = calculateFillColor(isHovered, barColor, index, hoverHistogramColors, allowRolloverEvent);
-    const v = Number.isFinite(dragValue) ? dragValue : value;
-    const barWidth = xBand.bandwidth();
-    const barHeight = scale.y(range.max - v);
-    const barX = xBand(bandKey({ label }, index));
-    const rawY = range.max - v;
-    const yy = range.max - rawY;
-    const correctValue = correctData ? correctData.find((d) => d.label === label) : null;
-
-    const Component = interactive ? DraggableHandle : DragHandle;
-    const isHistogram = !!barColor;
-
-    return (
-      <g
-        ref={(ref) => (this.gRef = ref)}
-        onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave}
-        onTouchStart={this.handleMouseEnter}
-        onTouchEnd={this.handleMouseLeave}
-      >
-        <StyledVisxBar x={barX} y={scale.y(yy)} width={barWidth} height={barHeight} style={{ fill: fillColor }} />
-        {correctness &&
-          correctness.value === 'incorrect' &&
-          (() => {
-            const correctVal = parseFloat(correctValue && correctValue.value);
-            if (isNaN(correctVal)) return null;
-            const correctPxHeight = scale.y(range.max - correctVal);
-            const actualPxHeight = barHeight;
-            const diffPx = Math.abs(correctPxHeight - actualPxHeight);
-            const yDiff = scale.y(correctVal);
-            const indicatorBarColor = correctPxHeight > actualPxHeight ? color.borderGray() : color.defaults.WHITE;
-            const yToRender = correctPxHeight > actualPxHeight ? yDiff : yDiff - diffPx;
-
-            return (
-              <>
-                <StyledVisxBar
-                  x={barX + 2}
-                  y={yToRender}
-                  width={barWidth - 4}
-                  height={diffPx}
-                  style={{ stroke: indicatorBarColor, strokeWidth: 2, strokeDasharray: '5,2', fill: 'none' }}
-                />
-                <foreignObject x={barX + barWidth - (isHistogram ? 24 : 14)} y={yDiff - 12} width={24} height={24}>
-                  <CorrectCheckIcon dashColor={indicatorBarColor} />
-                </foreignObject>
-              </>
-            );
-          })()}
-        <Component
-          x={barX}
-          y={v}
-          defineChart={defineChart}
-          interactive={interactive}
-          width={barWidth}
-          onDrag={(v) => this.dragValue(value, v)}
-          onDragStop={this.dragStop}
-          graphProps={graphProps}
-          correctness={correctness}
-          isHovered={isHovered}
-          color={fillColor}
-        />
-      </g>
-    );
-  }
-}
-
-const Bar = RawBar;
-
-export class Bars extends React.Component {
-  static propTypes = {
-    data: PropTypes.array,
-    correctData: PropTypes.array,
-    onChangeCategory: PropTypes.func,
-    defineChart: PropTypes.bool,
-    xBand: PropTypes.func,
-    graphProps: types.GraphPropsType.isRequired,
-    histogram: PropTypes.bool,
-  };
-
-  render() {
-    const { data, graphProps, xBand, onChangeCategory, defineChart, histogram, correctData } = this.props;
-
-    return (
-      <Group>
-        {(data || []).map((d, index) => (
-          <Bar
-            value={d.value}
-            interactive={defineChart || d.interactive}
-            defineChart={defineChart}
-            label={d.label}
-            xBand={xBand}
-            index={index}
-            key={`bar-${d.label}-${d.value}-${index}`}
-            onChangeCategory={(category) => onChangeCategory(index, category)}
-            graphProps={graphProps}
-            correctness={d.correctness}
-            correctData={correctData}
-            barColor={
-              histogram &&
-              (histogramColors[index] ? histogramColors[index] : histogramColors[index % histogramColors.length])
-            }
-          />
-        ))}
-      </Group>
-    );
-  }
-}
-
-export default Bars;

package/src/bars/common/correct-check-icon.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export const CorrectCheckIcon = ({ dashColor }) => (
-  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="12" cy="12" r="11" fill="white" stroke={dashColor || '#7E8494'} strokeWidth="2" strokeDasharray="5 5" />
-    <mask id="path-2-outside-1_3089_3799" maskUnits="userSpaceOnUse" x="2" y="3" width="19" height="18" fill="black">
-      <rect fill="white" x="2" y="3" width="19" height="18" />
-      <path d="M12 20C9.125 20 6.5 18.5 5.0625 16C3.625 13.5312 3.625 10.5 5.0625 8C6.5 5.53125 9.125 4 12 4C14.8438 4 17.4688 5.53125 18.9062 8C20.3438 10.5 20.3438 13.5312 18.9062 16C17.4688 18.5 14.8438 20 12 20ZM15.5312 10.5312H15.5C15.8125 10.25 15.8125 9.78125 15.5 9.46875C15.2188 9.1875 14.75 9.1875 14.4688 9.46875L11 12.9688L9.53125 11.5C9.21875 11.1875 8.75 11.1875 8.46875 11.5C8.15625 11.7812 8.15625 12.25 8.46875 12.5312L10.4688 14.5312C10.75 14.8438 11.2188 14.8438 11.5312 14.5312L15.5312 10.5312Z" />
-    </mask>
-    <path
-      d="M12 20C9.125 20 6.5 18.5 5.0625 16C3.625 13.5312 3.625 10.5 5.0625 8C6.5 5.53125 9.125 4 12 4C14.8438 4 17.4688 5.53125 18.9062 8C20.3438 10.5 20.3438 13.5312 18.9062 16C17.4688 18.5 14.8438 20 12 20ZM15.5312 10.5312H15.5C15.8125 10.25 15.8125 9.78125 15.5 9.46875C15.2188 9.1875 14.75 9.1875 14.4688 9.46875L11 12.9688L9.53125 11.5C9.21875 11.1875 8.75 11.1875 8.46875 11.5C8.15625 11.7812 8.15625 12.25 8.46875 12.5312L10.4688 14.5312C10.75 14.8438 11.2188 14.8438 11.5312 14.5312L15.5312 10.5312Z"
-      fill="#0EA449"
-    />
-    <path
-      d="M5.0625 16L5.92942 15.5015L5.92668 15.4968L5.0625 16ZM5.0625 8L4.19831 7.4968L4.19559 7.50153L5.0625 8ZM18.9062 8L19.7732 7.50152L19.7704 7.49681L18.9062 8ZM18.9062 16L18.0421 15.4968L18.0393 15.5015L18.9062 16ZM15.5312 10.5312L16.2384 11.2384L17.9455 9.53125H15.5312V10.5312ZM15.5 10.5312L14.831 9.78796L12.894 11.5312H15.5V10.5312ZM14.4688 9.46875L13.7616 8.76164L13.7585 8.76482L14.4688 9.46875ZM11 12.9688L10.2929 13.6759L11.0032 14.3861L11.7103 13.6727L11 12.9688ZM8.46875 11.5L9.13771 12.2433L9.17684 12.2081L9.21204 12.169L8.46875 11.5ZM8.46875 12.5312L9.17586 11.8241L9.15726 11.8055L9.13771 11.788L8.46875 12.5312ZM10.4688 14.5312L11.212 13.8623L11.1945 13.8427L11.1759 13.8241L10.4688 14.5312ZM12 20V19C9.479 19 7.18657 17.6879 5.92941 15.5015L5.0625 16L4.19559 16.4985C5.81343 19.3121 8.771 21 12 21V20ZM5.0625 16L5.92668 15.4968C4.6714 13.341 4.66824 10.6918 5.92941 8.49847L5.0625 8L4.19559 7.50153C2.58176 10.3082 2.5786 13.7215 4.19832 16.5032L5.0625 16ZM5.0625 8L5.92668 8.50319C7.18712 6.33851 9.48502 5 12 5V4V3C8.76498 3 5.81288 4.72399 4.19832 7.49681L5.0625 8ZM12 4V5C14.4816 5 16.7805 6.33661 18.0421 8.50319L18.9062 8L19.7704 7.49681C18.157 4.72589 15.2059 3 12 3V4ZM18.9062 8L18.0393 8.49847C19.3005 10.6918 19.2973 13.341 18.0421 15.4968L18.9062 16L19.7704 16.5032C21.3902 13.7215 21.387 10.3082 19.7732 7.50153L18.9062 8ZM18.9062 16L18.0393 15.5015C16.7811 17.6898 14.4876 19 12 19V20V21C15.1999 21 18.1564 19.3102 19.7732 16.4985L18.9062 16ZM15.5312 10.5312V9.53125H15.5V10.5312V11.5312H15.5312V10.5312ZM15.5 10.5312L16.169 11.2745C16.9447 10.5764 16.8883 9.44281 16.2071 8.76164L15.5 9.46875L14.7929 10.1759C14.7696 10.1525 14.7344 10.0966 14.7344 10.0117C14.7344 9.92377 14.7735 9.83972 14.831 9.78796L15.5 10.5312ZM15.5 9.46875L16.2071 8.76164C15.5353 8.08987 14.4334 8.08987 13.7616 8.76164L14.4688 9.46875L15.1759 10.1759C15.1167 10.235 15.0442 10.2578 14.9844 10.2578C14.9245 10.2578 14.8521 10.235 14.7929 10.1759L15.5 9.46875ZM14.4688 9.46875L13.7585 8.76482L10.2897 12.2648L11 12.9688L11.7103 13.6727L15.179 10.1727L14.4688 9.46875ZM11 12.9688L11.7071 12.2616L10.2384 10.7929L9.53125 11.5L8.82414 12.2071L10.2929 13.6759L11 12.9688ZM9.53125 11.5L10.2384 10.7929C9.55719 10.1117 8.42362 10.0553 7.72546 10.831L8.46875 11.5L9.21204 12.169C9.16028 12.2265 9.07623 12.2656 8.98828 12.2656C8.90344 12.2656 8.84748 12.2304 8.82414 12.2071L9.53125 11.5ZM8.46875 11.5L7.79979 10.7567C7.04591 11.4352 7.04591 12.5961 7.79979 13.2745L8.46875 12.5312L9.13771 11.788C9.19301 11.8377 9.23438 11.9208 9.23438 12.0156C9.23438 12.1105 9.19301 12.1935 9.13771 12.2433L8.46875 11.5ZM8.46875 12.5312L7.76164 13.2384L9.76164 15.2384L10.4688 14.5312L11.1759 13.8241L9.17586 11.8241L8.46875 12.5312ZM10.4688 14.5312L9.72546 15.2002C10.4236 15.976 11.5572 15.9195 12.2384 15.2384L11.5312 14.5312L10.8241 13.8241C10.8475 13.8008 10.9034 13.7656 10.9883 13.7656C11.0762 13.7656 11.1603 13.8048 11.212 13.8623L10.4688 14.5312ZM11.5312 14.5312L12.2384 15.2384L16.2384 11.2384L15.5312 10.5312L14.8241 9.82414L10.8241 13.8241L11.5312 14.5312Z"
-      fill="white"
-      mask="url(#path-2-outside-1_3089_3799)"
-    />
-  </svg>
-);
-
-CorrectCheckIcon.propTypes = {
-  dashColor: PropTypes.string,
-};

package/src/bars/histogram.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { types } from '@pie-lib/plot';
-import { dataToXBand } from '../utils';
-import Bars from './common/bars';
-
-export class Histogram extends React.Component {
-  static propTypes = {
-    data: PropTypes.array,
-    onChange: PropTypes.func,
-    graphProps: types.GraphPropsType.isRequired,
-  };
-
-  render() {
-    const props = this.props;
-    const { data, graphProps } = props;
-    const { scale = {}, size = {} } = graphProps || {};
-    const xBand = dataToXBand(scale.x, data, size.width, 'histogram');
-
-    return <Bars {...props} xBand={xBand} histogram={true} />;
-  }
-}
-
-export default () => ({
-  type: 'histogram',
-  Component: Histogram,
-  name: 'Histogram',
-});