@pie-lib/graphing-solution-set 2.16.0-beta.0

package/src/axis/axes.jsx

@@ -0,0 +1,307 @@
+import React from 'react';
+import { Axis } from '@vx/axis';
+import { types } from '@pie-lib/plot';
+import PropTypes from 'prop-types';
+import Arrow from './arrow';
+import { withStyles } from '@material-ui/core';
+import { countWords, findLongestWord, amountToIncreaseWidth, 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 axisStyles = (theme) => ({
+  line: {
+    stroke: '#8a92c0',
+    strokeWidth: 4,
+  },
+  arrow: {
+    fill: '#8a92c0',
+  },
+  tick: {
+    fill: color.defaults.BLACK,
+    '& > line': {
+      stroke: '#8a92c0',
+    },
+  },
+  labelFontSize: {
+    fontSize: theme.typography.fontSize,
+  },
+  axisLabelHolder: {
+    padding: 0,
+    margin: 0,
+    textAlign: 'center',
+    '* > *': {
+      margin: 0,
+      padding: 0,
+    },
+    fontSize: theme.typography.fontSize,
+  },
+});
+
+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,
+    classes: PropTypes.object,
+    graphProps: types.GraphPropsType.isRequired,
+  };
+  static defaultProps = AxisDefaultProps;
+
+  render() {
+    const {
+      includeArrows,
+      classes,
+      graphProps,
+      columnTicksValues,
+      skipValues,
+      distanceFromOriginToFirstNegativeY,
+      dy,
+    } = this.props;
+    const { scale, domain, size, range } = graphProps || {};
+
+    // Having 0 as a number in columnTicksValues does not make 0 to show up
+    // so we use this trick, by defining it as a string:
+    const tickValues =
+      (domain.labelStep || range.labelStep) && domain.min <= 0 ? ['0', ...columnTicksValues] : columnTicksValues;
+    // However, the '0' has to be displayed only if other tick labels (y-axis or x-axis) are displayed
+
+    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 (
+      <React.Fragment>
+        <Axis
+          axisLineClassName={classes.line}
+          scale={scale.x}
+          top={scale.y(0)}
+          left={0}
+          label={domain.label}
+          rangePadding={8}
+          tickClassName={classes.tick}
+          tickFormat={(value) => value}
+          tickLabelProps={labelProps}
+          tickValues={tickValues}
+        />
+        {includeArrows && includeArrows.left && (
+          <Arrow direction="left" x={domain.min} y={0} className={classes.arrow} scale={scale} />
+        )}
+        {includeArrows && includeArrows.right && (
+          <Arrow direction="right" x={domain.max} y={0} className={classes.arrow} scale={scale} />
+        )}
+        {domain.axisLabel && (
+          <foreignObject x={size.width + 17} y={scale.y(0) - 9} width={necessaryWidth} height={20 * necessaryRows}>
+            <div dangerouslySetInnerHTML={{ __html: domain.axisLabel }} className={classes.labelFontSize} />
+          </foreignObject>
+        )}
+      </React.Fragment>
+    );
+  }
+}
+
+const XAxis = withStyles(axisStyles)(RawXAxis);
+
+export class RawYAxis extends React.Component {
+  static propTypes = {
+    ...AxisPropTypes,
+    graphProps: types.GraphPropsType.isRequired,
+  };
+  static defaultProps = AxisDefaultProps;
+
+  render() {
+    const { classes, 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 (
+      <React.Fragment>
+        <Axis
+          axisLineClassName={classes.line}
+          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}
+          tickClassName={classes.tick}
+          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 && (
+          <Arrow direction="down" x={0} y={range.min} className={classes.arrow} scale={scale} />
+        )}
+        {includeArrows && includeArrows.up && (
+          <Arrow direction="up" x={0} y={range.max} className={classes.arrow} scale={scale} />
+        )}
+        {range.axisLabel && (
+          <foreignObject x={scale.x(0) - necessaryWidth / 2} y={-33} width={necessaryWidth} height="20">
+            <Readable false>
+              <div dangerouslySetInnerHTML={{ __html: range.axisLabel }} className={classes.axisLabelHolder} />
+            </Readable>
+          </foreignObject>
+        )}
+      </React.Fragment>
+    );
+  }
+}
+
+const YAxis = withStyles(axisStyles)(RawYAxis);
+
+export default class Axes extends React.Component {
+  static propTypes = {
+    ...AxisPropTypes,
+    classes: PropTypes.object,
+    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 (
+      <React.Fragment>
+        {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}
+      </React.Fragment>
+    );
+  }
+}

package/src/axis/index.js

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

package/src/bg.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { select, mouse } 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', this.onRectClick.bind(this, rect));
+  }
+
+  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 + mouse to give us domain values directly.
+   * Saves us having to calculate them ourselves from a MouseEvent.
+   */
+  onRectClick = (rect) => {
+    const { onClick, graphProps } = this.props;
+    const { scale } = graphProps;
+
+    const padding = this.getRectPadding();
+    const coords = mouse(rect._groups[0][0]);
+
+    // 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

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

package/src/container/index.jsx

@@ -0,0 +1,86 @@
+import { connect } from 'react-redux';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { applyMiddleware, createStore } from 'redux';
+import reducer from './reducer';
+import { changeMarks } from './actions';
+import PropTypes from 'prop-types';
+import isEqual from 'lodash/isEqual';
+import { ActionCreators } from 'redux-undo';
+import GraphWithControls from '../graph-with-controls';
+import { lastActionMiddleware, getLastAction } 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)) {
+      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

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

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

package/src/container/reducer.js

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { types } from '@pie-lib/plot';
+import { color } from '@pie-lib/render-ui';
+import { withStyles } from '@material-ui/core/styles';
+import InputBase from '@material-ui/core/InputBase';
+import { roundNumber } from './utils';
+
+const styles = (theme) => ({
+  input: {
+    fontFamily: theme.typography.fontFamily,
+    fontSize: theme.typography.fontSize,
+    borderRadius: '8px',
+    background: theme.palette.common.white,
+    color: color.defaults.BLACK,
+  },
+  inputLabel: {
+    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, classes }) => {
+  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 (
+    <InputBase
+      style={style}
+      classes={{ input: classes.inputLabel }}
+      className={classes.input}
+      value={label}
+      inputProps={{ ariaLabel: 'naked' }}
+    />
+  );
+};
+
+CoordinatesLabel.propTypes = {
+  graphProps: types.GraphPropsType,
+  classes: PropTypes.object,
+  x: PropTypes.number,
+  y: PropTypes.number,
+};
+
+export default withStyles(styles)(CoordinatesLabel);