@pie-element/complex-rubric 2.6.6 → 2.6.7

package/controller/node_modules/@pie-lib/pie-toolbox/src/code/graphing/utils.js

@@ -1,226 +0,0 @@
-import head from 'lodash/head';
-import tail from 'lodash/tail';
-import { utils } from '../plot';
-import invariant from 'invariant';
-import isEqual from 'lodash/isEqual';
-import isEmpty from 'lodash/isEmpty';
-import cloneDeep from 'lodash/cloneDeep';
-
-export const tickCount = utils.tickCount;
-export const bounds = utils.bounds;
-export const point = utils.point;
-
-//TODO: This can be removed?
-export const getAngleDeg = () => 0;
-//TODO: This can be removed?
-export const arrowDimensions = () => 0;
-
-export const getTickValues = (prop) => {
-  const tickValues = [];
-  let tickVal = 0;
-
-  while (tickVal >= prop.min && tickValues.indexOf(tickVal) < 0) {
-    tickValues.push(tickVal);
-    tickVal = Math.round((tickVal - prop.step) * 10000) / 10000;
-  }
-
-  tickVal = Math.round(prop.step * 10000) / 10000;
-
-  while (tickVal <= prop.max && tickValues.indexOf(tickVal) < 0) {
-    tickValues.push(tickVal);
-    tickVal = Math.round((tickVal + prop.step) * 10000) / 10000;
-  }
-
-  // return only ticks that are inside the min-max interval
-  if (tickValues) {
-    return tickValues.filter((tV) => tV >= prop.min && tV <= prop.max);
-  }
-
-  return [];
-};
-
-export const countWords = (label) => {
-  if (label == null || isEmpty(label)) {
-    return 1;
-  }
-
-  const words = label.split(' ');
-  return words.length;
-};
-
-// findLongestWord is also used in plot
-export const findLongestWord = (label) => {
-  let longestWord = (label || '')
-    .replace(/<[^>]+>/g, '')
-    .split(' ')
-    .sort((a, b) => b.length - a.length);
-
-  return longestWord[0].length;
-};
-
-// amountToIncreaseWidth is also used in plot
-export const amountToIncreaseWidth = (longestWord) => {
-  if (!longestWord) {
-    return 0;
-  }
-
-  return longestWord * 10;
-};
-
-export const polygonToArea = (points) => {
-  const h = head(points);
-  const area = {
-    left: h.x,
-    top: h.y,
-    bottom: h.y,
-    right: h.x,
-  };
-  return tail(points).reduce((a, p) => {
-    a.left = Math.min(a.left, p.x);
-    a.top = Math.max(a.top, p.y);
-    a.bottom = Math.min(a.bottom, p.y);
-    a.right = Math.max(a.right, p.x);
-    return a;
-  }, area);
-};
-
-export const lineToArea = (from, to) => pointsToArea(from, to);
-
-export const pointsToArea = (a, b) => {
-  invariant(!!a && !!b, 'a or b is undefined');
-  const left = Math.min(a.x, b.x);
-  const top = Math.max(a.y, b.y);
-  const bottom = Math.min(a.y, b.y);
-  const right = Math.max(a.x, b.x);
-  return { left, top, bottom, right };
-};
-
-export const isDomainRangeEqual = (graphProps, nextGraphProps) => {
-  return isEqual(graphProps.domain, nextGraphProps.domain) && isEqual(graphProps.range, nextGraphProps.range);
-};
-
-export const getRightestPoints = (points) => {
-  const sortedPoints = cloneDeep(points);
-  sortedPoints.sort((a, b) => b.x - a.x);
-
-  return { a: sortedPoints[0], b: sortedPoints[1] };
-};
-
-export const getMiddleOfTwoPoints = (a, b) => ({
-  x: (a.x + b.x) / 2,
-  y: (a.y + b.y) / 2,
-});
-
-export const roundNumber = (number) => parseFloat(number.toFixed(4));
-
-export const sameAxes = (p1, p2) =>
-  p1 && p2 && (roundNumber(p1.x) === roundNumber(p2.x) || roundNumber(p1.y) === roundNumber(p2.y));
-
-export const equalPoints = (p1, p2) =>
-  p1 &&
-  p2 &&
-  isEqual(
-    {
-      x: roundNumber(p1.x),
-      y: roundNumber(p1.y),
-    },
-    {
-      x: roundNumber(p2.x),
-      y: roundNumber(p2.y),
-    },
-  );
-
-const getDistanceBetweenTicks = (axis, size) => {
-  const { min, max, step } = axis;
-  const nbOfTicks = (max - min) / step;
-
-  return size / nbOfTicks;
-};
-
-export const thinnerShapesNeeded = (graphProps) => {
-  const {
-    domain,
-    range,
-    size: { width, height },
-  } = graphProps;
-
-  // 14 is the default width of a point
-  return getDistanceBetweenTicks(domain, width) < 14 || getDistanceBetweenTicks(range, height) < 14;
-};
-
-export const getAdjustedGraphLimits = (graphProps) => {
-  const {
-    domain,
-    range,
-    size: { width, height },
-  } = graphProps;
-  const domainTicksDistance = getDistanceBetweenTicks(domain, width);
-  const rangeTicksDistance = getDistanceBetweenTicks(range, height);
-
-  // 15 is the distance required for the arrow to extend the graph
-  const domainPadding = domain.step / (domainTicksDistance / 15);
-  const rangePadding = range.step / (rangeTicksDistance / 15);
-
-  return {
-    domain: {
-      min: domain.min - domainPadding,
-      max: domain.max + domainPadding,
-    },
-    range: {
-      min: range.min - rangePadding,
-      max: range.max + rangePadding,
-    },
-  };
-};
-
-export const getDistanceBetweenTwoPoints = (a, b) => Math.sqrt((b.x - a.x) * (b.x - a.x) + (b.y - a.y) * (b.y - a.y));
-
-const sortPoints = (array) => (array || []).sort((a, b) => a.x - b.x || a.y - b.y);
-
-// check colliniarity of 3 points (source: https://www.geeksforgeeks.org/program-check-three-points-collinear/)
-const checkCollinearity = (a, b, c) => (a.x - b.x) * (c.y - b.y) === (c.x - b.x) * (a.y - b.y);
-
-// 2 lines are overlapping if all 4 points are collinear
-const isSameLine = (markA, markB) =>
-  checkCollinearity(markA.from, markB.from, markB.to) && checkCollinearity(markA.to, markB.from, markB.to);
-
-const isSameCircle = (markA, markB) =>
-  equalPoints(markA.root, markB.root) &&
-  getDistanceBetweenTwoPoints(markB.root, markB.edge) === getDistanceBetweenTwoPoints(markA.root, markA.edge);
-
-export const isDuplicatedMark = (mark, marks, oldMark) => {
-  const { type, building } = mark;
-
-  if (building) {
-    return false;
-  }
-
-  const filteredMarks = (marks || []).filter((m) => m.type === type && !m.building);
-  const index = filteredMarks.findIndex((m) => isEqual(m, oldMark));
-
-  if (index !== -1) {
-    filteredMarks.splice(index, 1);
-  }
-
-  const duplicated = filteredMarks.find((m) => {
-    if (type === 'circle' || type === 'parabola' || type === 'sine' || type === 'absolute' || type === 'exponential') {
-      const { root, edge } = mark;
-
-      return (equalPoints(root, m.root) && equalPoints(edge, m.edge)) || (type === 'circle' && isSameCircle(m, mark));
-    } else if (type === 'line' || type === 'ray' || type === 'segment' || type === 'vector') {
-      const { from, to } = mark;
-
-      return (
-        (equalPoints(from, m.from) && equalPoints(to, m.to)) ||
-        (equalPoints(from, m.to) && equalPoints(to, m.from)) ||
-        (type === 'line' && isSameLine(m, mark))
-      );
-    } else if (type === 'polygon') {
-      return isEqual(sortPoints(cloneDeep(mark.points)), sortPoints(cloneDeep(m.points)));
-    } else if (type === 'point') {
-      return equalPoints(m, mark);
-    }
-  });
-
-  return !!duplicated;
-};

package/controller/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/axis/arrow.jsx

@@ -1,62 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-import { types } from '../../plot';
-
-const style = (theme) => ({
-  root: {
-    fill: `var(--arrow-color, ${theme.palette.common.black})`,
-  },
-});
-
-export class Arrow extends React.Component {
-  render() {
-    const { x, y, classes, className, scale } = this.props;
-    const names = classNames(classes.root, className);
-    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 <path d="m 0,0 8,-5 0,10 -8,-5" transform={transform} className={names} />;
-  }
-}
-
-Arrow.propTypes = {
-  y: PropTypes.number,
-  x: PropTypes.number,
-  direction: PropTypes.oneOf(['left', 'right', 'up', 'down']),
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  scale: types.ScaleType.isRequired,
-};
-
-Arrow.defaultProps = {
-  y: 0,
-  x: 0,
-  direction: 'left',
-};
-
-export default withStyles(style)(Arrow);

package/controller/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/axis/axes.jsx

@@ -1,308 +0,0 @@
-import React from 'react';
-import { Axis } from '@vx/axis';
-import { types } from '../../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 '../../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: color.defaults.BLACK,
-    strokeWidth: 3,
-  },
-  arrow: {
-    fill: color.defaults.BLACK,
-  },
-  tick: {
-    fill: color.defaults.BLACK,
-    fontWeight: 'bold',
-    '& > line': {
-      stroke: color.defaults.BLACK,
-    },
-  },
-  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/controller/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/axis/index.js

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

package/controller/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/bg.jsx

@@ -1,96 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { select, mouse } from 'd3-selection';
-import { types, utils } from '../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/controller/node_modules/@pie-lib/pie-toolbox/src/code/graphing-solution-set/container/actions.js

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