@pie-lib/graphing-solution-set 4.1.0-beta.9 → 5.0.0-next.20261002094057

package/src/axis/axes.jsx

@@ -1,284 +0,0 @@
-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>
-    );
-  }
-}

package/src/axis/index.js

@@ -1,3 +0,0 @@
-import Axes, { AxisPropTypes } from './axes';
-
-export { Axes, AxisPropTypes };

package/src/bg.jsx

@@ -1,96 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { pointer, select } from 'd3-selection';
-import { types, utils } from '@pie-lib/plot';
-import { getTickValues, thinnerShapesNeeded } from './utils';
-
-export default class Bg extends React.Component {
-  static propTypes = {
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    onClick: PropTypes.func.isRequired,
-    graphProps: types.GraphPropsType.isRequired,
-  };
-
-  static defaultProps = {};
-
-  componentDidMount() {
-    const rect = select(this.rect);
-
-    rect.on('click', (event) => this.onRectClick(rect, event));
-  }
-
-  shouldComponentUpdate(nextProps) {
-    return (
-      !utils.isDomainRangeEqual(this.props.graphProps, nextProps.graphProps) ||
-      this.props.width !== nextProps.width ||
-      this.props.height !== nextProps.height
-    );
-  }
-
-  getRectPadding = () => {
-    const { graphProps } = this.props;
-
-    return thinnerShapesNeeded(graphProps) ? 6 : 10;
-  };
-
-  /**
-   * Note: we use d3 click + pointer to give us domain values directly.
-   * Saves us having to calculate them ourselves from a MouseEvent.
-   */
-  onRectClick = (rect, event) => {
-    const { onClick, graphProps } = this.props;
-    const { scale } = graphProps;
-
-    const padding = this.getRectPadding();
-    const coords = pointer(event, rect.node());
-
-    // decrease the padding from coordinates to indicate the correct point clicked
-    const x = scale.x.invert(coords[0] - padding);
-    const y = scale.y.invert(coords[1] - padding);
-
-    const rowTicks = getTickValues(graphProps.range);
-    const columnTicks = getTickValues(graphProps.domain);
-
-    const closest = (ticks, value) => {
-      return (
-        ticks.length &&
-        ticks.reduce((prev, curr) => {
-          const currentDistance = Math.abs(curr - value);
-          const previousDistance = Math.abs(prev - value);
-
-          return currentDistance <= previousDistance ? curr : prev;
-        })
-      );
-    };
-
-    let snapped = {};
-
-    if (columnTicks.indexOf(x) >= 0 && rowTicks.indexOf(y) >= 0) {
-      snapped.x = x;
-      snapped.y = y;
-    } else {
-      snapped.x = closest(columnTicks, x);
-      snapped.y = closest(rowTicks, y);
-    }
-
-    onClick(snapped);
-  };
-
-  render() {
-    const { width, height } = this.props;
-    const padding = this.getRectPadding();
-
-    // expand the size of clickable area so a small area outside the edges of the grid lines to be clickable
-    return (
-      <rect
-        ref={(rect) => (this.rect = rect)}
-        transform={`translate(-${padding}, -${padding})`}
-        fill="red"
-        fillOpacity="0.0"
-        width={width + padding * 2}
-        height={height + padding * 2}
-      />
-    );
-  }
-}

package/src/container/actions.js

@@ -1,8 +0,0 @@
-export const addMark = () => ({
-  type: 'ADD_MARK',
-});
-
-export const changeMarks = (marks) => ({
-  type: 'CHANGE_MARKS',
-  marks,
-});

package/src/container/index.jsx

@@ -1,93 +0,0 @@
-import { connect, Provider } from 'react-redux';
-import React from 'react';
-import { applyMiddleware, createStore } from 'redux';
-import reducer from './reducer';
-import { changeMarks } from './actions';
-import PropTypes from 'prop-types';
-import { isEqual } from 'lodash-es';
-import { ActionCreators } from 'redux-undo';
-import GraphWithControls from '../graph-with-controls';
-import { getLastAction, lastActionMiddleware } from './middleware';
-
-const mapStateToProps = (s) => ({
-  marks: s.marks.present,
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  onChangeMarks: (m) => dispatch(changeMarks(m)),
-  onUndo: () => dispatch(ActionCreators.undo()),
-  onRedo: () => dispatch(ActionCreators.redo()),
-  onReset: () => dispatch(changeMarks([])),
-});
-
-export const GraphContainer = connect(mapStateToProps, mapDispatchToProps)(GraphWithControls);
-
-/**
- * The graph component entry point with undo/redo
- * Redux is an implementation detail, hide it in the react component.
- */
-class Root extends React.Component {
-  static propTypes = {
-    onChangeMarks: PropTypes.func,
-    marks: PropTypes.array,
-  };
-
-  constructor(props) {
-    super(props);
-
-    const r = reducer();
-    this.store = createStore(r, { marks: props.marks }, applyMiddleware(lastActionMiddleware));
-
-    this.store.subscribe(this.onStoreChange);
-  }
-
-  componentDidUpdate(prevProps) {
-    const { marks } = this.props;
-    const storeState = this.store.getState();
-
-    if (isEqual(storeState.marks.present, marks)) {
-      return;
-    }
-
-    if (!isEqual(prevProps.marks, marks)) {
-      // Don't dispatch marks that have correctness (evaluate mode marks) into the undo history.
-      // These marks are already handled in render() via the correctnessSet path and bypass the
-      // Redux store entirely. Dispatching them would pollute the undo history and cause the graph
-      // to show the correct answer when the user presses undo after returning to gather mode.
-      const hasCorrectness = marks && marks.find((m) => m.correctness);
-
-      if (!hasCorrectness) {
-        this.store.dispatch(changeMarks(marks));
-      }
-    }
-  }
-
-  onStoreChange = () => {
-    const { marks, onChangeMarks } = this.props;
-    const storeState = this.store.getState();
-    const lastAction = getLastAction();
-    const isUndoOperation = lastAction.type.includes('UNDO') || lastAction.type.includes('REDO');
-
-    if (!isEqual(storeState.marks.present, marks)) {
-      onChangeMarks(storeState.marks.present, isUndoOperation);
-    }
-  };
-
-  render() {
-    // eslint-disable-next-line no-unused-vars
-    const { onChangeMarks, marks, ...rest } = this.props;
-    const correctnessSet = marks && marks.find((m) => m.correctness);
-
-    if (correctnessSet) {
-      return <GraphWithControls {...rest} marks={marks} disabled={correctnessSet} />;
-    }
-
-    return (
-      <Provider store={this.store}>
-        <GraphContainer {...rest} />
-      </Provider>
-    );
-  }
-}
-
-export default Root;

package/src/container/marks.js

@@ -1,14 +0,0 @@
-const marks = (state = [], action) => {
-  switch (action.type) {
-    case 'CHANGE_MARKS':
-      if (Array.isArray(action.marks)) {
-        return action.marks;
-      } else {
-        throw new Error('marks must be an array');
-      }
-    default:
-      return state;
-  }
-};
-
-export default marks;

package/src/container/middleware.js

@@ -1,7 +0,0 @@
-let lastAction = null;
-export const getLastAction = () => lastAction;
-
-export const lastActionMiddleware = () => (next) => (action) => {
-  lastAction = action;
-  return next(action);
-};

package/src/container/reducer.js

@@ -1,5 +0,0 @@
-import { combineReducers } from 'redux';
-import marks from './marks';
-import undoable from 'redux-undo';
-
-export default () => combineReducers({ marks: undoable(marks, { debug: false }) });

package/src/coordinates-label.jsx

@@ -1,62 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { types } from '@pie-lib/plot';
-import { color } from '@pie-lib/render-ui';
-import { styled } from '@mui/material/styles';
-import InputBase from '@mui/material/InputBase';
-import { roundNumber } from './utils';
-
-const StyledInputBase = styled(InputBase)(({ theme }) => ({
-  fontFamily: theme.typography.fontFamily,
-  fontSize: theme.typography.fontSize,
-  borderRadius: '8px',
-  background: theme.palette.common.white,
-  color: color.defaults.BLACK,
-  '& .MuiInputBase-input': {
-    padding: 0,
-  },
-}));
-
-export const getLabelPosition = (graphProps, x, y, labelLength) => {
-  const { scale, domain, range } = graphProps;
-  // treat corner cases for maximum and minimum
-  const topShift = y === range.min ? 16 : y === range.max ? 0 : 8;
-  const leftShift = 10;
-  const rightEdge = scale.x(x) + labelLength + leftShift;
-
-  if (rightEdge >= scale.x(domain.max)) {
-    return {
-      left: scale.x(x) - leftShift - labelLength,
-      top: scale.y(y) - topShift,
-    };
-  }
-
-  return {
-    left: scale.x(x) + leftShift,
-    top: scale.y(y) - topShift,
-  };
-};
-
-export const CoordinatesLabel = ({ x, y, graphProps }) => {
-  const label = `(${roundNumber(x)}, ${roundNumber(y)})`;
-  const labelLength = (label.length || 0) * 6;
-  const labelPosition = getLabelPosition(graphProps, x, y, labelLength);
-
-  const style = {
-    position: 'absolute',
-    pointerEvents: 'auto',
-    width: labelLength,
-    padding: 0,
-    ...labelPosition,
-  };
-
-  return <StyledInputBase style={style} value={label} inputProps={{ ariaLabel: 'naked' }} />;
-};
-
-CoordinatesLabel.propTypes = {
-  graphProps: types.GraphPropsType,
-  x: PropTypes.number,
-  y: PropTypes.number,
-};
-
-export default CoordinatesLabel;