@pie-lib/charting 7.1.0-beta.8 → 8.0.0-next.35

package/src/mark-label.jsx

@@ -1,238 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
-import { styled } from '@mui/material/styles';
-import AutosizeInput from 'react-input-autosize';
-import PropTypes from 'prop-types';
-
-import { types } from '@pie-lib/plot';
-import { correct, disabled, incorrect } from './common/styles';
-import { color } from '@pie-lib/render-ui';
-import { renderMath } from '@pie-lib/math-rendering';
-
-const StyledContainer = styled('div')({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-});
-
-// eslint-disable-next-line no-unused-vars
-const StyledInput = styled('input')(({ theme }) => ({
-  float: 'right',
-  fontFamily: theme.typography.fontFamily,
-  fontSize: theme.typography.fontSize,
-  border: 'none',
-  '&.correct': correct('color'),
-  '&.incorrect': incorrect('color'),
-  '&.disabledMarkLabel': {
-    backgroundColor: 'transparent !important',
-  },
-  '&.error': { border: `2px solid ${theme.palette.error.main}` },
-}));
-
-const StyledMathInput = styled('div')(({ theme }) => ({
-  pointerEvents: 'auto',
-  textAlign: 'center',
-  fontSize: theme.typography.fontSize + 2,
-  fontFamily: theme.typography.fontFamily,
-  color: color.primaryDark(),
-  paddingTop: theme.typography.fontSize / 2,
-  '&.disabledMarkLabel': {
-    ...disabled('color'),
-    backgroundColor: 'transparent !important',
-  },
-  '&.error': {
-    border: `2px solid ${theme.palette.error.main}`,
-  },
-  '&.correct': {
-    ...correct('color'),
-  },
-  '&.incorrect': {
-    ...incorrect('color'),
-  },
-}));
-
-function isFractionFormat(label) {
-  const trimmedLabel = label?.trim() || '';
-  const fracRegex = new RegExp(/^[1-9]*[0-9]*\s?[1-9][0-9]*\/[1-9][0-9]*$/);
-  return fracRegex.test(trimmedLabel);
-}
-
-function getLabelMathFormat(label) {
-  const trimmedLabel = label?.trim() || '';
-  let fraction;
-  let mixedNr = '';
-  let improperFraction = trimmedLabel.split(' ');
-  if (improperFraction[1] && improperFraction[1].includes('/')) {
-    fraction = improperFraction[1].split('/') || '';
-  } else {
-    fraction = trimmedLabel?.split('/') || '';
-  }
-
-  let formattedLLabel;
-  if (isFractionFormat(label)) {
-    if (improperFraction[0] && improperFraction[1]) {
-      mixedNr = improperFraction[0];
-    }
-    formattedLLabel = `\\(${mixedNr}\\frac{${fraction[0]}}{${fraction[1]}}\\)`;
-    return formattedLLabel;
-  }
-  return undefined;
-}
-
-export const MarkLabel = (props) => {
-  // eslint-disable-next-line no-unused-vars
-  const [input, setInput] = useState(null);
-  const _ref = useCallback((node) => setInput(node), null);
-
-  const {
-    mark = {},
-    disabled,
-    inputRef: externalInputRef,
-    barWidth,
-    rotate,
-    correctness,
-    autoFocus,
-    error,
-    isHiddenLabel,
-    limitCharacters,
-    correctnessIndicator,
-  } = props;
-
-  const [label, setLabel] = useState(mark.label);
-  const [mathLabel, setMathLabel] = useState(getLabelMathFormat(mark.label));
-  const [isEditing, setIsEditing] = useState(false);
-  const rootRef = useRef(null);
-
-  const onChange = (e) => {
-    if (limitCharacters && e.target.value && e.target.value.length > 20) {
-      return;
-    }
-
-    setLabel(e.target.value);
-  };
-
-  const isMathRendering = () => {
-    return isEditing === false && mathLabel !== undefined;
-  };
-
-  const onChangeProp = (e) => {
-    setMathLabel(getLabelMathFormat(mark.label));
-    setIsEditing(false);
-    props.onChange(e.target.value);
-  };
-  let extraStyle = {};
-
-  if (rotate) {
-    extraStyle = {
-      width: 'unset',
-      textAlign: 'left',
-    };
-  }
-
-  // useState only sets the value once, to synch props to state need useEffect
-  useEffect(() => {
-    setLabel(mark.label);
-  }, [mark.label]);
-
-  useEffect(() => {
-    const el = rootRef.current;
-
-    if (el && mathLabel) {
-      el.innerHTML = mathLabel;
-      renderMath(el);
-    }
-  }, [label, mathLabel]);
-
-  return (
-    <StyledContainer>
-      {correctnessIndicator}
-      {isMathRendering() ? (
-        <StyledMathInput
-          ref={(r) => {
-            rootRef.current = r;
-            if (typeof externalInputRef === 'function') {
-              externalInputRef(r);
-            }
-          }}
-          className={classNames({
-            disabledMarkLabel: disabled,
-            error: error,
-            correct: mark.editable && correctness?.label === 'correct',
-            incorrect: mark.editable && correctness?.label === 'incorrect',
-          })}
-          onClick={() => setIsEditing(true)}
-          style={{
-            minWidth: barWidth,
-            position: 'fixed',
-            transformOrigin: 'left',
-            transform: `rotate(${rotate}deg)`,
-            visibility: isHiddenLabel ? 'hidden' : 'unset',
-            marginTop: correctnessIndicator ? '24px' : '0',
-          }}
-        ></StyledMathInput>
-      ) : (
-        <AutosizeInput
-          inputRef={(r) => {
-            _ref(r);
-            if (typeof externalInputRef === 'function') {
-              externalInputRef(r);
-            }
-          }}
-          name="mark-label-input"
-          autoFocus={isEditing || autoFocus}
-          disabled={disabled}
-          inputClassName={classNames(
-            correctness && mark.editable ? correctness.label : null,
-            disabled && 'disabledMarkLabel',
-            error && 'error',
-          )}
-          inputStyle={{
-            minWidth: barWidth,
-            textAlign: 'center',
-            background: 'transparent',
-            boxSizing: 'border-box',
-            paddingLeft: 0,
-            paddingRight: 0,
-            border: 'none',
-            ...extraStyle,
-          }}
-          value={label}
-          style={{
-            position: 'fixed',
-            pointerEvents: 'auto',
-            top: 0,
-            left: 0,
-            minWidth: barWidth,
-            transformOrigin: 'left',
-            transform: `rotate(${rotate}deg)`,
-            visibility: isHiddenLabel ? 'hidden' : 'unset',
-            marginTop: correctnessIndicator ? '24px' : '0',
-          }}
-          onChange={onChange}
-          onBlur={onChangeProp}
-        />
-      )}
-    </StyledContainer>
-  );
-};
-
-MarkLabel.propTypes = {
-  autoFocus: PropTypes.bool,
-  disabled: PropTypes.bool,
-  error: PropTypes.any,
-  onChange: PropTypes.func,
-  graphProps: types.GraphPropsType,
-  inputRef: PropTypes.func,
-  mark: PropTypes.object,
-  barWidth: PropTypes.number,
-  rotate: PropTypes.number,
-  correctness: PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string,
-  }),
-  isHiddenLabel: PropTypes.bool,
-  limitCharacters: PropTypes.bool,
-  correctnessIndicator: PropTypes.node,
-};
-
-export default MarkLabel;

package/src/plot/__tests__/dot.test.jsx

@@ -1,344 +0,0 @@
-import React from 'react';
-import { render } from '@pie-lib/test-utils';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-import Dot, { DotPlot } from '../dot';
-import { graphProps } from './utils';
-
-jest.mock('@mui/icons-material/Check', () => {
-  return function Check(props) {
-    return <div data-testid="check-icon" {...props} />;
-  };
-});
-
-jest.mock('@visx/shape', () => ({
-  Circle: ({ cx, cy, r, ...rest }) => <circle cx={cx} cy={cy} r={r} {...rest} />,
-}));
-
-let theme;
-
-beforeAll(() => {
-  theme = createTheme();
-});
-
-describe('DotPlot', () => {
-  const renderComponent = (extras) => {
-    const defaults = {
-      classes: {},
-      className: 'className',
-      graphProps: graphProps(),
-      xBand: () => {
-        return {
-          bandwidth: () => {},
-        };
-      },
-    };
-    const props = { ...defaults, ...extras };
-    return render(
-      <ThemeProvider theme={theme}>
-        <svg>
-          <DotPlot {...props} />
-        </svg>
-      </ThemeProvider>,
-    );
-  };
-
-  describe('rendering', () => {
-    it('renders dot plot', () => {
-      const { container } = renderComponent();
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders without graphProps', () => {
-      const { container } = renderComponent({ graphProps: undefined });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with data array', () => {
-      const data = [
-        { value: 1, label: 'A' },
-        { value: 2, label: 'B' },
-        { value: 3, label: 'C' },
-      ];
-      const { container } = renderComponent({ data });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with empty data array', () => {
-      const { container } = renderComponent({ data: [] });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with null data', () => {
-      const { container } = renderComponent({ data: null });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with undefined data', () => {
-      const { container } = renderComponent({ data: undefined });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with custom className', () => {
-      const { container } = renderComponent({ className: 'custom-dot-plot' });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with onChange handler', () => {
-      const onChange = jest.fn();
-      const { container } = renderComponent({ onChange });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders in defineChart mode', () => {
-      const { container } = renderComponent({ defineChart: true });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with correctData', () => {
-      const data = [{ value: 2, label: 'A' }];
-      const correctData = [{ value: 3, label: 'A' }];
-      const { container } = renderComponent({ data, correctData });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-
-  describe('graphProps handling', () => {
-    it('handles graphProps with missing scale', () => {
-      const props = graphProps();
-      delete props.scale;
-      const { container } = renderComponent({ graphProps: props });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('handles graphProps with missing size', () => {
-      const props = graphProps();
-      delete props.size;
-      const { container } = renderComponent({ graphProps: props });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('handles graphProps with empty scale object', () => {
-      const props = graphProps();
-      props.scale = {};
-      const { container } = renderComponent({ graphProps: props });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('handles graphProps with empty size object', () => {
-      const props = graphProps();
-      props.size = {};
-      const { container } = renderComponent({ graphProps: props });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-
-  describe('data variations', () => {
-    it('renders with single data point', () => {
-      const data = [{ value: 1, label: 'A' }];
-      const { container } = renderComponent({ data });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with multiple data points', () => {
-      const data = [
-        { value: 1, label: 'A' },
-        { value: 2, label: 'B' },
-        { value: 3, label: 'C' },
-        { value: 4, label: 'D' },
-      ];
-      const { container } = renderComponent({ data });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with zero values', () => {
-      const data = [
-        { value: 0, label: 'A' },
-        { value: 0, label: 'B' },
-      ];
-      const { container } = renderComponent({ data });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with mixed values', () => {
-      const data = [
-        { value: 0, label: 'A' },
-        { value: 5, label: 'B' },
-        { value: 1, label: 'C' },
-      ];
-      const { container } = renderComponent({ data });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with large values', () => {
-      const data = [
-        { value: 100, label: 'A' },
-        { value: 200, label: 'B' },
-      ];
-      const { container } = renderComponent({ data });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with correctness data', () => {
-      const data = [
-        { value: 2, label: 'A', correctness: { value: 'correct', label: 'Correct' } },
-        { value: 3, label: 'B', correctness: { value: 'correct', label: 'Correct' } },
-      ];
-      const { container } = renderComponent({ data });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with incorrect correctness and correctData', () => {
-      const data = [
-        { value: 2, label: 'A', correctness: { value: 'incorrect', label: 'Incorrect' } },
-        { value: 3, label: 'B', correctness: { value: 'incorrect', label: 'Incorrect' } },
-      ];
-      const correctData = [
-        { value: 3, label: 'A' },
-        { value: 4, label: 'B' },
-      ];
-      const { container } = renderComponent({ data, correctData });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with interactive data points', () => {
-      const data = [
-        { value: 2, label: 'A', interactive: true },
-        { value: 3, label: 'B', interactive: false },
-      ];
-      const { container } = renderComponent({ data });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-
-  describe('callbacks', () => {
-    it('passes onChange handler to Plot component', () => {
-      const onChange = jest.fn();
-      const data = [{ value: 1, label: 'A' }];
-      const { container } = renderComponent({ data, onChange });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('handles onChangeCategory callback', () => {
-      const onChangeCategory = jest.fn();
-      const data = [{ value: 1, label: 'A' }];
-      const { container } = renderComponent({ data, onChangeCategory });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-
-  describe('component', () => {
-    it('returns correct chart object', () => {
-      const chart = Dot();
-
-      expect(chart).toEqual({
-        type: 'dotPlot',
-        Component: DotPlot,
-        name: 'Dot Plot',
-      });
-    });
-
-    it('returns object with Component that can be rendered', () => {
-      const chart = Dot();
-      const { Component } = chart;
-
-      const { container } = render(<Component graphProps={graphProps()} />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-});
-
-describe('CustomBarElement (Dot)', () => {
-  const mockScale = {
-    y: jest.fn((n) => n * 10),
-  };
-
-  it('renders a circle element', () => {
-    const data = [{ value: 1, label: 'A' }];
-    const { container } = render(
-      <ThemeProvider theme={theme}>
-        <svg>
-          <DotPlot data={data} graphProps={graphProps()} />
-        </svg>
-      </ThemeProvider>,
-    );
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders with dottedOverline prop', () => {
-    const data = [{ value: 2, label: 'A', correctness: { value: 'incorrect' } }];
-    const correctData = [{ value: 3, label: 'A' }];
-    const { container } = render(
-      <ThemeProvider theme={theme}>
-        <svg>
-          <DotPlot data={data} graphProps={graphProps()} correctData={correctData} />
-        </svg>
-      </ThemeProvider>,
-    );
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders without dottedOverline prop', () => {
-    const data = [{ value: 2, label: 'A' }];
-    const { container } = render(
-      <ThemeProvider theme={theme}>
-        <svg>
-          <DotPlot data={data} graphProps={graphProps()} />
-        </svg>
-      </ThemeProvider>,
-    );
-    expect(container).toBeInTheDocument();
-  });
-
-  it('calculates correct circle position', () => {
-    const data = [{ value: 3, label: 'A' }];
-    const { container } = render(
-      <ThemeProvider theme={theme}>
-        <svg>
-          <DotPlot data={data} graphProps={graphProps()} />
-        </svg>
-      </ThemeProvider>,
-    );
-    expect(container).toBeInTheDocument();
-  });
-
-  it('handles zero pointDiameter', () => {
-    const props = graphProps();
-    props.size = { width: 0, height: 0 };
-    const data = [{ value: 1, label: 'A' }];
-    const { container } = render(
-      <ThemeProvider theme={theme}>
-        <svg>
-          <DotPlot data={data} graphProps={props} />
-        </svg>
-      </ThemeProvider>,
-    );
-    expect(container).toBeInTheDocument();
-  });
-
-  it('handles large pointDiameter values', () => {
-    const props = graphProps();
-    props.size = { width: 1000, height: 1000 };
-    const data = [{ value: 1, label: 'A' }];
-    const { container } = render(
-      <ThemeProvider theme={theme}>
-        <svg>
-          <DotPlot data={data} graphProps={props} />
-        </svg>
-      </ThemeProvider>,
-    );
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders dotted circle with correct styling when dottedOverline is true', () => {
-    const data = [{ value: 2, label: 'A', correctness: { value: 'incorrect' } }];
-    const correctData = [{ value: 3, label: 'A' }];
-    const { container } = render(
-      <ThemeProvider theme={theme}>
-        <svg>
-          <DotPlot data={data} graphProps={graphProps()} correctData={correctData} />
-        </svg>
-      </ThemeProvider>,
-    );
-    expect(container).toBeInTheDocument();
-  });
-});