@pie-element/rubric 3.6.1 → 3.6.2

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/plot/label.jsx

@@ -1,151 +0,0 @@
-import React, { useState } from 'react';
-import { color, Readable } from '../../render-ui';
-import cn from 'classnames';
-import EditableHtml from '../editable-html';
-import { withStyles } from '@material-ui/core/styles';
-import PropTypes from 'prop-types';
-
-const LabelComponent = (props) => {
-  const {
-    classes,
-    disabledLabel,
-    graphHeight,
-    graphWidth,
-    isChartBottomLabel,
-    isDefineChartBottomLabel,
-    isChartLeftLabel,
-    isDefineChartLeftLabel,
-    placeholder,
-    text,
-    side,
-    onChange,
-    mathMlOptions = {},
-  } = props;
-  const [rotatedToHorizontal, setRotatedToHorizontal] = useState(false);
-  const activePlugins = [
-    'bold',
-    'italic',
-    'underline',
-    'strikethrough',
-    'math',
-    // 'languageCharacters'
-  ];
-
-  const isChart = isChartBottomLabel || isChartLeftLabel || isDefineChartBottomLabel || isDefineChartLeftLabel;
-
-  const chartValue = side === 'left' && isDefineChartLeftLabel && graphHeight - 220;
-  const defaultStyle = {
-    width: chartValue || (side === 'left' || side === 'right' ? graphHeight - 8 : graphWidth - 8),
-    top:
-      chartValue ||
-      (isChartLeftLabel && `${graphHeight - 70}px`) ||
-      (side === 'left' && `${graphHeight - 8}px`) ||
-      (isChartBottomLabel && `${graphHeight - 30}px`) ||
-      (side === 'bottom' && `${graphHeight - 90}px`) ||
-      0,
-    left:
-      (side === 'right' && `${graphWidth - 8}px`) ||
-      ((isDefineChartLeftLabel || isDefineChartBottomLabel) && '40px') ||
-      (isChartBottomLabel && '-10px') ||
-      0,
-  };
-
-  const rotatedStyle = {
-    width: graphWidth - 8,
-    top: (side === 'right' && `${graphHeight - 22}px`) || 0,
-    left: 0,
-  };
-
-  const rotateLabel = () => !disabledLabel && (side === 'left' || side === 'right') && setRotatedToHorizontal(true);
-
-  return (
-    <Readable false>
-      <div
-        className={cn(isChart ? classes.chartLabel : classes.axisLabel, {
-          [classes.rotateLeftLabel]: side === 'left' && !rotatedToHorizontal,
-          [classes.rotateRightLabel]: side === 'right' && !rotatedToHorizontal,
-          [classes.editLabel]: rotatedToHorizontal,
-          [classes.customBottom]: isChartBottomLabel || isDefineChartBottomLabel,
-        })}
-        style={rotatedToHorizontal ? rotatedStyle : defaultStyle}
-        onClick={rotateLabel}
-      >
-        {disabledLabel ? (
-          <div className={classes.disabledLabel} dangerouslySetInnerHTML={{ __html: text || '' }} />
-        ) : (
-          <EditableHtml
-            markup={text || ''}
-            onChange={onChange}
-            placeholder={!disabledLabel && placeholder}
-            toolbarOpts={{
-              position: side === 'bottom' ? 'top' : 'bottom',
-              noBorder: true,
-            }}
-            disableScrollbar
-            activePlugins={activePlugins}
-            onDone={() => setRotatedToHorizontal(false)}
-            mathMlOptions={mathMlOptions}
-          />
-        )}
-      </div>
-    </Readable>
-  );
-};
-LabelComponent.propTypes = {
-  classes: PropTypes.object,
-  disabledLabel: PropTypes.bool,
-  graphHeight: PropTypes.number,
-  graphWidth: PropTypes.number,
-  isChartBottomLabel: PropTypes.bool,
-  isDefineChartBottomLabel: PropTypes.bool,
-  isChartLeftLabel: PropTypes.bool,
-  isDefineChartLeftLabel: PropTypes.bool,
-  placeholder: PropTypes.string,
-  text: PropTypes.string,
-  side: PropTypes.string,
-  onChange: PropTypes.func,
-};
-
-export default withStyles((theme) => ({
-  label: {
-    fill: color.secondary(),
-  },
-  axisLabel: {
-    fontSize: theme.typography.fontSize - 2,
-    textAlign: 'center',
-    margin: theme.spacing.unit / 2,
-    padding: `${theme.spacing.unit / 2}px 0`,
-  },
-  chartLabel: {
-    fontSize: theme.typography.fontSize + 2,
-    textAlign: 'center',
-    margin: theme.spacing.unit / 2,
-    padding: `${theme.spacing.unit / 2}px 0`,
-  },
-  disabledLabel: {
-    pointerEvents: 'none',
-    width: '100%',
-  },
-  editLabel: {
-    position: 'absolute',
-    backgroundColor: 'white',
-    borderRadius: '4px',
-    boxShadow: '0px 5px 8px rgba(0, 0, 0, 0.15)',
-    zIndex: 10,
-  },
-  rotateLeftLabel: {
-    '-webkit-transform': 'rotate(-90deg)',
-    transformOrigin: '0 0',
-    transformStyle: 'preserve-3d',
-    position: 'absolute',
-  },
-  rotateRightLabel: {
-    '-webkit-transform': 'rotate(90deg)',
-    transformOrigin: '0 0',
-    transformStyle: 'preserve-3d',
-    position: 'absolute',
-  },
-  customBottom: {
-    position: 'absolute',
-  },
-}))(LabelComponent);

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/plot/root.jsx

@@ -1,337 +0,0 @@
-import React from 'react';
-import { ChildrenType } from './types';
-import { withStyles } from '@material-ui/core/styles';
-import { select, mouse } from 'd3-selection';
-import PropTypes from 'prop-types';
-import { GraphPropsType } from './types';
-import { color, Readable } from '../render-ui';
-import EditableHtml from '../editable-html';
-import cn from 'classnames';
-import Label from './label';
-
-export class Root extends React.Component {
-  static propTypes = {
-    title: PropTypes.string,
-    children: ChildrenType,
-    defineChart: PropTypes.bool,
-    disabledLabels: PropTypes.bool,
-    disabledTitle: PropTypes.bool,
-    graphProps: GraphPropsType.isRequired,
-    isChart: PropTypes.bool,
-    labels: PropTypes.object,
-    labelsPlaceholders: PropTypes.object,
-    onChangeTitle: PropTypes.func,
-    onMouseMove: PropTypes.func,
-    classes: PropTypes.object.isRequired,
-    showLabels: PropTypes.bool,
-    showTitle: PropTypes.bool,
-    showPixelGuides: PropTypes.bool,
-    rootRef: PropTypes.func,
-    onChangeLabels: PropTypes.func,
-    titlePlaceholder: PropTypes.string,
-  };
-
-  mouseMove = (g) => {
-    const { graphProps, onMouseMove } = this.props;
-
-    if (!onMouseMove) {
-      return;
-    }
-
-    const { scale, snap } = graphProps;
-    const coords = mouse(g._groups[0][0]);
-    const x = scale.x.invert(coords[0]);
-    const y = scale.y.invert(coords[1]);
-
-    const snapped = {
-      x: snap.x(x),
-      y: snap.y(y),
-    };
-
-    onMouseMove(snapped);
-  };
-
-  componentDidMount() {
-    const g = select(this.g);
-    g.on('mousemove', this.mouseMove.bind(this, g));
-  }
-
-  componentWillUnmount() {
-    const g = select(this.g);
-    g.on('mousemove', null);
-  }
-
-  onChangeLabel = (newValue, side) => {
-    const { labels, onChangeLabels, isChart } = this.props;
-
-    if (isChart) {
-      if (side === 'left') {
-        onChangeLabels('range', newValue);
-      } else {
-        onChangeLabels('domain', newValue);
-      }
-
-      return;
-    }
-
-    onChangeLabels({
-      ...labels,
-      [side]: newValue,
-    });
-  };
-
-  render() {
-    const {
-      disabledTitle,
-      disabledLabels,
-      labels,
-      labelsPlaceholders,
-      titlePlaceholder,
-      graphProps,
-      children,
-      classes,
-      defineChart,
-      onChangeTitle,
-      isChart,
-      showLabels,
-      showPixelGuides,
-      showTitle,
-      title,
-      rootRef,
-      mathMlOptions = {},
-    } = this.props;
-    const {
-      size: { width = 500, height = 500 },
-      domain,
-      range,
-    } = graphProps;
-
-    const topPadding = 40;
-    const leftPadding = showLabels ? 80 : 60;
-    const finalWidth = width + leftPadding * 2 + (domain.padding || 0) * 2;
-    const finalHeight = height + topPadding * 2 + (range.padding || 0) * 2;
-
-    const activeTitlePlugins = [
-      'bold',
-      'italic',
-      'underline',
-      'strikethrough',
-      'math',
-      // 'languageCharacters'
-    ];
-
-    const actualHeight = defineChart && showPixelGuides ? height - 160 : height;
-    const nbOfVerticalLines = parseInt(width / 100);
-    const nbOfHorizontalLines = parseInt(actualHeight / 100);
-    const sideGridlinesPadding = parseInt(actualHeight % 100);
-
-    return (
-      <div className={classes.root}>
-        {showPixelGuides && (
-          <div className={classes.topPixelGuides} style={{ marginLeft: isChart ? 80 : showLabels ? 30 : 10 }}>
-            {[...Array(nbOfVerticalLines + 1).keys()].map((value) => (
-              <Readable false key={`top-guide-${value}`}>
-                <div className={classes.topPixelIndicator}>
-                  <div>{value * 100}px</div>
-                  <div>|</div>
-                </div>
-              </Readable>
-            ))}
-          </div>
-        )}
-        {showTitle &&
-          (disabledTitle ? (
-            <div
-              style={
-                isChart && {
-                  width: finalWidth,
-                }
-              }
-              className={cn(isChart ? classes.chartTitle : classes.graphTitle, classes.disabledTitle)}
-              dangerouslySetInnerHTML={{ __html: title || '' }}
-            />
-          ) : (
-            <EditableHtml
-              style={
-                isChart && {
-                  width: finalWidth,
-                }
-              }
-              className={cn(
-                { [classes.rightMargin]: showPixelGuides },
-                isChart ? classes.chartTitle : classes.graphTitle,
-              )}
-              markup={title || ''}
-              onChange={onChangeTitle}
-              placeholder={
-                (defineChart && titlePlaceholder) || (!disabledTitle && 'Click here to add a title for this graph')
-              }
-              toolbarOpts={{ noBorder: true }}
-              activePlugins={activeTitlePlugins}
-              disableScrollbar
-            />
-          ))}
-        {showLabels && !isChart && (
-          <Label
-            side="top"
-            text={labels.top}
-            disabledLabel={disabledLabels}
-            placeholder={labelsPlaceholders?.top}
-            graphHeight={finalHeight}
-            graphWidth={finalWidth}
-            onChange={(value) => this.onChangeLabel(value, 'top')}
-            mathMlOptions={mathMlOptions}
-          />
-        )}
-        <div className={classes.wrapper}>
-          {showLabels && (
-            <Label
-              side="left"
-              text={labels.left}
-              disabledLabel={disabledLabels}
-              placeholder={labelsPlaceholders?.left}
-              graphHeight={finalHeight}
-              graphWidth={finalWidth}
-              isChartLeftLabel={isChart && !defineChart}
-              isDefineChartLeftLabel={isChart && defineChart}
-              onChange={(value) => this.onChangeLabel(value, 'left')}
-              mathMlOptions={mathMlOptions}
-            />
-          )}
-          <svg width={finalWidth} height={finalHeight} className={defineChart ? classes.defineChart : classes.chart}>
-            <g
-              ref={(r) => {
-                this.g = r;
-                if (rootRef) {
-                  rootRef(r);
-                }
-              }}
-              className={classes.graphBox}
-              transform={`translate(${leftPadding}, ${topPadding})`}
-            >
-              {children}
-            </g>
-          </svg>
-          {showLabels && !isChart && (
-            <Label
-              side="right"
-              text={labels.right}
-              disabledLabel={disabledLabels}
-              placeholder={labelsPlaceholders?.right}
-              graphHeight={finalHeight}
-              graphWidth={finalWidth}
-              onChange={(value) => this.onChangeLabel(value, 'right')}
-              mathMlOptions={mathMlOptions}
-            />
-          )}
-          {showPixelGuides && (
-            <div
-              className={classes.sidePixelGuides}
-              style={{
-                paddingTop: sideGridlinesPadding,
-                marginTop: 31,
-              }}
-            >
-              {[...Array(nbOfHorizontalLines + 1).keys()].reverse().map((value) => (
-                <Readable false key={`top-guide-${value}`}>
-                  <div className={classes.sidePixelIndicator}>━ {value * 100}px</div>
-                </Readable>
-              ))}
-            </div>
-          )}
-        </div>
-        {showLabels && (
-          <Label
-            side="bottom"
-            text={labels.bottom}
-            disabledLabel={disabledLabels}
-            placeholder={labelsPlaceholders?.bottom}
-            graphHeight={finalHeight}
-            graphWidth={finalWidth}
-            isChartBottomLabel={isChart && !defineChart}
-            isDefineChartBottomLabel={isChart && defineChart}
-            onChange={(value) => this.onChangeLabel(value, 'bottom')}
-            mathMlOptions={mathMlOptions}
-          />
-        )}
-      </div>
-    );
-  }
-}
-
-// use default color theme style to avoid color contrast issues
-const styles = (theme) => ({
-  root: {
-    border: `solid 1px ${color.primaryLight()}`,
-    color: color.defaults.TEXT,
-    backgroundColor: theme.palette.common.white,
-    touchAction: 'none',
-    position: 'relative',
-  },
-  wrapper: {
-    display: 'flex',
-    position: 'relative',
-  },
-  svg: {},
-  defineChart: {
-    paddingLeft: '50px',
-    overflow: 'visible',
-  },
-  chart: {
-    overflow: 'visible',
-  },
-  graphBox: {
-    cursor: 'pointer',
-    userSelect: 'none',
-  },
-  graphTitle: {
-    color: color.defaults.TEXT,
-    fontSize: theme.typography.fontSize + 2,
-    padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit / 2}px 0`,
-    textAlign: 'center',
-  },
-  chartTitle: {
-    color: color.defaults.TEXT,
-    fontSize: theme.typography.fontSize + 4,
-    padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit / 2}px 0`,
-    textAlign: 'center',
-  },
-  disabledTitle: {
-    pointerEvents: 'none',
-  },
-  rightMargin: {
-    marginRight: '74px',
-  },
-  topPixelGuides: {
-    display: 'flex',
-    paddingTop: '6px',
-  },
-  topPixelIndicator: {
-    color: color.defaults.PRIMARY_LIGHT,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    width: '100px',
-    pointerEvents: 'none',
-    userSelect: 'none',
-  },
-  sidePixelGuides: {
-    width: '70px',
-    display: 'flex',
-    flexDirection: 'column',
-    marginRight: '6px',
-  },
-  sidePixelIndicator: {
-    color: color.defaults.PRIMARY_LIGHT,
-    textAlign: 'right',
-    height: '20px',
-    pointerEvents: 'none',
-    userSelect: 'none',
-
-    '&:not(:last-child)': {
-      marginBottom: '80px',
-    },
-  },
-});
-
-export default withStyles(styles)(Root);

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/plot/trig.js

@@ -1,150 +0,0 @@
-import { xy } from './utils';
-import Point from '@mapbox/point-geometry';
-import debug from 'debug';
-const log = debug('pie-lib:plot:trig');
-
-export const toDegrees = (radians) => radians * (180 / Math.PI);
-export const toRadians = (degrees) => degrees * (Math.PI / 180);
-/**
- * return angle in radians between 2 points using counting degrees counter clockwise
- *
- * 0,0 + 1,1 = 45 in radians
- * 1,1 + 0,0 = 45?
- * @param {Point} a
- * @param {Point} b
- */
-export const angle = (a, b) => {
-  const vd = b.y - a.y;
-  const hd = b.x - a.x;
-  log(a, b, 'vd: ', vd, 'hd: ', hd);
-  const radians = Math.atan2(vd, hd);
-  return radians < 0 ? radians + Math.PI * 2 : radians;
-};
-
-const NINETY = Math.PI / 2;
-const ONE_EIGHTY = Math.PI;
-const TWO_SEVENTY = ONE_EIGHTY + NINETY;
-
-export const acuteXAngle = (a) => {
-  log(toDegrees(a));
-
-  if (a < NINETY) {
-    return a;
-  }
-
-  if (a < ONE_EIGHTY) {
-    return Math.abs(ONE_EIGHTY - a);
-  }
-
-  if (a < TWO_SEVENTY) {
-    return Math.abs(ONE_EIGHTY - a);
-  }
-
-  return Math.abs(Math.PI * 2 - a);
-};
-
-export const acuteYAngle = (a) => NINETY - acuteXAngle(a);
-
-export const hypotenuse = (a, alpha) => {
-  const out = Math.abs(a / Math.sin(alpha));
-
-  return out;
-};
-
-/**
- * return 2 edge points for a,b within domain + range.
- * - one edge is from following a -> b to the bounds
- * - one edge is from following b -> a to the bounds
- * @param {{min: number, max: number}} domain
- * @param {{min: number, max: number}} range
- * @param {{x: number, y: number}} a
- * @param {{x: number, y: number}} b
- * @returns [{x: number, y: number}, {x: number, y: number}]
- */
-export const edges = (domain, range) => (a, b) => {
-  // const xDest =
-  const destX = a.x < b.x ? domain.max : domain.min;
-  const destY = a.y < b.y ? range.max : range.min;
-  const aToB = diffEdge(xy(destX, destY), a, b);
-
-  const dX = b.x < a.x ? domain.max : domain.min;
-  const dY = b.y < a.y ? range.max : range.min;
-  const bToA = diffEdge(xy(dX, dY), b, a);
-  return [aToB, bToA];
-};
-
-/** get length of side A of a triangle from H and angle Alpha */
-export const getOpposingSide = (hyp, angle) => {
-  log('[getOpposingSide] hyp: ', hyp, 'angle:', angle);
-  return Math.abs(hyp * Math.sin(angle));
-};
-
-const getShortestSide = (xh, yh) => {
-  if (Number.isFinite(xh) && Number.isFinite(yh)) {
-    if (xh === 0 && yh > 0) {
-      return 'y';
-    }
-    if (yh === 0 && xh > 0) {
-      return 'x';
-    }
-    return xh < yh ? 'x' : 'y';
-  }
-  if (isNaN(xh) && !isNaN(yh)) {
-    return 'y';
-  }
-  if (!isNaN(xh) && isNaN(yh)) {
-    return 'x';
-  }
-  if (xh === Infinity) {
-    return 'y';
-  }
-  if (yh === Infinity) {
-    return 'x';
-  }
-
-  // eslint-disable-next-line no-console
-  console.warn('hypotenuse - which is shorter? x:', xh, 'y:', yh);
-};
-/**
- * return the difference between bounds and a as a Point
- * @param {*} bounds
- */
-export const diffEdge = (bounds, a, b) => {
-  let l = log.enabled ? log.bind(log, `diffEdge: [${a.x},${a.y} -> ${b.x},${b.y}]`) : () => {};
-  const xRadians = angle(a, b);
-  l('x angle', toDegrees(xRadians));
-  const yRadians = Math.abs(xRadians - toRadians(90));
-  l('y angle', toDegrees(yRadians));
-  const xSide = Math.abs(a.x - bounds.x);
-
-  /**
-   * Draw 2 triangles:
-   * 1 with a horizontal line from a to the graph x edge
-   * 1 with a vertical line from a to the graph y edge
-   * Calculate the hypotenuse for both, whichever is shorter
-   * indicates that we should use that triangle to get the edge point.
-   */
-  const xH = hypotenuse(xSide, yRadians);
-
-  const ySide = Math.abs(a.y - bounds.y);
-  const yH = hypotenuse(ySide, xRadians);
-
-  l('x: side', xSide, 'h:', xH);
-  l('y: side', ySide, 'h:', yH);
-  const side = getShortestSide(xH, yH);
-
-  if (side !== 'x' && side !== 'y') {
-    throw new Error('Cant decide which hypotenuse to use');
-  }
-  const point =
-    side === 'x' ? new Point(xSide, getOpposingSide(xH, xRadians)) : new Point(getOpposingSide(yH, yRadians), ySide);
-
-  l('point:', point);
-  const multiplier = new Point(b.x < a.x ? -1 : 1, b.y < a.y ? -1 : 1);
-  l('multiplier:', multiplier);
-  const out = point.multByPoint(multiplier);
-  l('out:', out);
-  const normalized = out.add(new Point(a.x, a.y));
-  l('normalized:', normalized);
-  return normalized;
-};

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/plot/types.js

@@ -1,41 +0,0 @@
-import PropTypes from 'prop-types';
-
-export const BaseDomainRangeType = {
-  min: PropTypes.number.isRequired,
-  max: PropTypes.number.isRequired,
-  step: PropTypes.number,
-};
-
-export const DomainType = PropTypes.shape(BaseDomainRangeType);
-
-export const RangeType = PropTypes.shape(BaseDomainRangeType);
-
-export const SizeType = PropTypes.shape({
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-});
-
-export const PointType = PropTypes.shape({
-  x: PropTypes.number.isRequired,
-  y: PropTypes.number.isRequired,
-});
-
-export const ChildrenType = PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired;
-
-export const ScaleType = PropTypes.shape({
-  x: PropTypes.func.isRequired,
-  y: PropTypes.func.isRequired,
-});
-
-export const SnapType = PropTypes.shape({
-  x: PropTypes.func.isRequired,
-  y: PropTypes.func.isRequired,
-});
-
-export const GraphPropsType = PropTypes.shape({
-  scale: ScaleType.isRequired,
-  snap: SnapType.isRequired,
-  domain: DomainType.isRequired,
-  range: RangeType.isRequired,
-  size: SizeType.isRequired,
-});