@pie-element/ebsr 9.12.2-next.28 → 9.12.2

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/charting/line/common/line.jsx

@@ -1,163 +0,0 @@
-import React from 'react';
-import { Group } from '@vx/group';
-import { LinePath } from '@vx/shape';
-import PropTypes from 'prop-types';
-import { types } from '../../../plot';
-import DraggableHandle, { DragHandle } from './drag-handle';
-import { withStyles } from '@material-ui/core/styles/index';
-import isEqual from 'lodash/isEqual';
-import { color } from '../../../render-ui';
-
-const getData = (data, domain) => {
-  const { max } = domain || {};
-  const length = data.length;
-
-  if (!max || !length) {
-    return [];
-  }
-
-  return data.map((el, i) => ({
-    ...el,
-    x: length > 1 ? i * (max / (length - 1)) : 0.5,
-    y: el.value,
-  }));
-};
-
-export class RawLine extends React.Component {
-  static propTypes = {
-    onChange: PropTypes.func,
-    value: PropTypes.number,
-    classes: PropTypes.object,
-    label: PropTypes.string,
-    xBand: PropTypes.func,
-    index: PropTypes.number.isRequired,
-    graphProps: types.GraphPropsType.isRequired,
-    defineChart: PropTypes.bool,
-    data: PropTypes.arrayOf(
-      PropTypes.shape({
-        label: PropTypes.string,
-        value: PropTypes.number,
-      }),
-    ),
-    CustomDraggableComponent: PropTypes.func,
-  };
-
-  static defaultProps = {
-    index: 0,
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      dragValue: undefined,
-      line: getData(props.data, props.graphProps.domain),
-    };
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!isEqual(this.props.data, nextProps.data)) {
-      this.setState({
-        line: getData(nextProps.data, nextProps.graphProps.domain),
-      });
-    }
-  }
-
-  setDragValue = (line) => this.setState({ line });
-
-  dragStop = (index) => {
-    const { onChange } = this.props;
-    this.setState({ dragging: false }, () => {
-      onChange(index, this.state.line[index]);
-    });
-  };
-
-  dragValue = (index, existing, next) => {
-    const newLine = [...this.state.line];
-    newLine[index].dragValue = next;
-    this.setDragValue(newLine);
-  };
-
-  render() {
-    const { graphProps, data, classes, CustomDraggableComponent, defineChart } = this.props;
-    const { line: lineState, dragging } = this.state;
-    const { scale } = graphProps;
-    const lineToUse = dragging ? lineState : getData(data, graphProps.domain);
-
-    return (
-      <React.Fragment>
-        <LinePath
-          data={lineToUse}
-          x={(d) => scale.x(d.x)}
-          y={(d) => scale.y(d.dragValue !== undefined ? d.dragValue : d.y)}
-          className={classes.line}
-        />
-        {lineToUse &&
-          lineToUse.map((point, i) => {
-            const r = 6;
-            const enableDraggable = defineChart || point.interactive;
-            const Component = enableDraggable ? DraggableHandle : DragHandle;
-
-            return (
-              <Component
-                key={`point-${point.x}-${i}`}
-                x={point.x}
-                y={point.dragValue !== undefined ? point.dragValue : point.y}
-                interactive={enableDraggable}
-                r={r}
-                onDragStart={() => this.setState({ dragging: true })}
-                onDrag={(v) => this.dragValue(i, point.dragValue !== undefined ? point.dragValue : point.y, v)}
-                onDragStop={() => this.dragStop(i)}
-                graphProps={graphProps}
-                CustomDraggableComponent={CustomDraggableComponent}
-                correctness={point.correctness}
-              />
-            );
-          })}
-      </React.Fragment>
-    );
-  }
-}
-
-const StyledLine = withStyles(() => ({
-  line: {
-    fill: 'transparent',
-    stroke: color.primaryLight(),
-    strokeWidth: 3,
-    transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',
-    '&:hover': {
-      strokeWidth: 6,
-      stroke: color.primaryDark(),
-    },
-  },
-}))(RawLine);
-
-export class Line extends React.Component {
-  static propTypes = {
-    data: PropTypes.array,
-    onChange: PropTypes.func,
-    xBand: PropTypes.func,
-    graphProps: types.GraphPropsType.isRequired,
-  };
-
-  changeLine = (index, category) => {
-    const { onChange } = this.props;
-    const newLine = [...this.props.data];
-    const { dragValue, value } = category;
-
-    newLine[index].value = dragValue >= 0 ? dragValue : value;
-
-    onChange(newLine);
-  };
-
-  render() {
-    const props = this.props;
-
-    return (
-      <Group>
-        <StyledLine {...props} onChange={this.changeLine} />
-      </Group>
-    );
-  }
-}
-
-export default Line;

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/charting/line/line-cross.js

@@ -1,76 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { types } from '../../plot';
-import { LinePath } from '@vx/shape';
-import { Group } from '@vx/group';
-import classNames from 'classnames';
-import { dataToXBand } from '../utils';
-import RawLine from './common/line';
-
-const DraggableComponent = (props) => {
-  const { classes = {}, className, scale, x, y, r, correctness, ...rest } = props;
-
-  return (
-    <Group className={classNames(className, classes.line, correctness && correctness.value)}>
-      <LinePath
-        data={[
-          { x: scale.x(x) - r, y: scale.y(y) + r },
-          { x: scale.x(x) + r, y: scale.y(y) - r },
-        ]}
-        key={`point-${x}-${y}-1`}
-        x={(d) => d.x}
-        y={(d) => d.y}
-        strokeWidth={5}
-        style={{ pointerEvents: 'none' }}
-      />
-      <LinePath
-        data={[
-          { x: scale.x(x) - r, y: scale.y(y) - r },
-          { x: scale.x(x) + r, y: scale.y(y) + r },
-        ]}
-        key={`point-${x}-${y}-2`}
-        x={(d) => d.x}
-        y={(d) => d.y}
-        strokeWidth={5}
-        style={{ pointerEvents: 'none' }}
-      />
-      <circle cx={scale.x(x)} cy={scale.y(y)} r={r * 2} className={classNames(classes.transparentHandle)} {...rest} />
-    </Group>
-  );
-};
-
-DraggableComponent.propTypes = {
-  scale: PropTypes.object,
-  x: PropTypes.number,
-  y: PropTypes.number,
-  r: PropTypes.number,
-  className: PropTypes.string,
-  classes: PropTypes.object,
-  correctness: PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string,
-  }),
-};
-
-export class LineCross extends React.Component {
-  static propTypes = {
-    data: PropTypes.array,
-    onChange: PropTypes.func,
-    graphProps: types.GraphPropsType.isRequired,
-  };
-
-  render() {
-    const props = this.props;
-    const { data, graphProps } = props;
-    const { scale = {}, size = {} } = graphProps || {};
-    const xBand = dataToXBand(scale.x, data, size.width, 'lineCross');
-
-    return <RawLine {...props} xBand={xBand} CustomDraggableComponent={DraggableComponent} />;
-  }
-}
-
-export default () => ({
-  type: 'lineCross',
-  Component: LineCross,
-  name: 'Line Cross',
-});

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/charting/line/line-dot.js

@@ -1,62 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { types } from '../../plot';
-import { dataToXBand } from '../utils';
-import RawLine from './common/line';
-import classNames from 'classnames';
-
-const DraggableComponent = ({ scale, x, y, className, classes, r, correctness, ...rest }) => (
-  <g>
-    <circle
-      cx={scale.x(x)}
-      cy={scale.y(y)}
-      r={r * 3}
-      className={classNames(classes.transparentHandle, className)}
-      style={{ pointerEvents: 'none' }}
-      {...rest}
-    />
-    <circle
-      cx={scale.x(x)}
-      cy={scale.y(y)}
-      r={r}
-      className={classNames(className, classes.handle, correctness && correctness.value)}
-      {...rest}
-    />
-  </g>
-);
-
-DraggableComponent.propTypes = {
-  scale: PropTypes.object,
-  x: PropTypes.number,
-  y: PropTypes.number,
-  r: PropTypes.number,
-  className: PropTypes.string,
-  classes: PropTypes.object,
-  correctness: PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string,
-  }),
-};
-
-export class LineDot extends React.Component {
-  static propTypes = {
-    data: PropTypes.array,
-    onChange: PropTypes.func,
-    graphProps: types.GraphPropsType.isRequired,
-  };
-
-  render() {
-    const props = this.props;
-    const { data, graphProps } = props;
-    const { scale = {}, size = {} } = graphProps || {};
-    const xBand = dataToXBand(scale.x, data, size.width, 'lineDot');
-
-    return <RawLine {...props} xBand={xBand} CustomDraggableComponent={DraggableComponent} />;
-  }
-}
-
-export default () => ({
-  type: 'lineDot',
-  Component: LineDot,
-  name: 'Line Dot',
-});

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/charting/mark-label.jsx

@@ -1,198 +0,0 @@
-import React, { useState, useCallback, useEffect, useRef } from 'react';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-import AutosizeInput from 'react-input-autosize';
-import PropTypes from 'prop-types';
-import { types } from '../plot';
-import { correct, incorrect, disabled } from './common/styles';
-import { color } from '../render-ui';
-import { renderMath } from '../math-rendering-accessible';
-
-const styles = (theme) => ({
-  input: {
-    float: 'right',
-    fontFamily: theme.typography.fontFamily,
-    fontSize: theme.typography.fontSize,
-    border: 'none',
-    color: color.primaryDark(),
-    '&.correct': correct('color'),
-    '&.incorrect': incorrect('color'),
-    '&.disabled': {
-      backgroundColor: 'transparent !important',
-    },
-    '&.error': { border: `2px solid ${theme.palette.error.main}` },
-  },
-  mathInput: {
-    pointerEvents: 'auto',
-    textAlign: 'center',
-    fontSize: theme.typography.fontSize + 2,
-    fontFamily: theme.typography.fontFamily,
-    color: color.primaryDark(),
-    paddingTop: theme.typography.fontSize / 2,
-  },
-  disabled: {
-    ...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,
-    classes,
-    disabled,
-    inputRef: externalInputRef,
-    barWidth,
-    rotate,
-    correctness,
-    autoFocus,
-    error,
-  } = props;
-
-  const [label, setLabel] = useState(mark.label);
-  const [mathLabel, setMathLabel] = useState(getLabelMathFormat(mark.label));
-  const [isEditing, setIsEditing] = useState(false);
-  let root = useRef(null);
-
-  const onChange = (e) => {
-    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(() => {
-    renderMath(root);
-  }, []);
-
-  return isMathRendering() ? (
-    <div
-      ref={(r) => (root = r)}
-      dangerouslySetInnerHTML={{ __html: getLabelMathFormat(label) }}
-      className={classNames(classes.mathInput, {
-        [classes.disabled]: disabled,
-        [classes.error]: error,
-        [classes.correct]: correctness && correctness.label === 'correct',
-        [classes.incorrect]: correctness && correctness.label === 'incorrect',
-      })}
-      onClick={() => setIsEditing(true)}
-      style={{ minWidth: barWidth, position: 'fixed' }}
-    ></div>
-  ) : (
-    <AutosizeInput
-      inputRef={(r) => {
-        _ref(r);
-        externalInputRef(r);
-      }}
-      autoFocus={isEditing || autoFocus}
-      disabled={disabled}
-      inputClassName={classNames(
-        classes.input,
-        correctness && correctness.label,
-        disabled && 'disabled',
-        error && 'error',
-      )}
-      inputStyle={{
-        minWidth: barWidth,
-        textAlign: 'center',
-        background: 'transparent',
-        boxSizing: 'border-box',
-        paddingLeft: 0,
-        paddingRight: 0,
-        ...extraStyle,
-      }}
-      value={label}
-      style={{
-        position: 'fixed',
-        pointerEvents: 'auto',
-        top: 0,
-        left: 0,
-        minWidth: barWidth,
-        transformOrigin: 'left',
-        transform: `rotate(${rotate}deg)`,
-      }}
-      onChange={onChange}
-      onBlur={onChangeProp}
-    />
-  );
-};
-
-MarkLabel.propTypes = {
-  autoFocus: PropTypes.bool,
-  disabled: PropTypes.bool,
-  error: PropTypes.any,
-  onChange: PropTypes.func,
-  graphProps: types.GraphPropsType,
-  classes: PropTypes.object,
-  inputRef: PropTypes.func,
-  mark: PropTypes.object,
-  barWidth: PropTypes.number,
-  rotate: PropTypes.number,
-  correctness: PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string,
-  }),
-};
-
-export default withStyles(styles)(MarkLabel);

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/charting/plot/common/plot.jsx

@@ -1,199 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { types } from '../../../plot';
-import { Group } from '@vx/group';
-import { withStyles } from '@material-ui/core/styles/index';
-import DraggableHandle, { DragHandle } from '../../common/drag-handle';
-import debug from 'debug';
-import { color } from '../../../render-ui';
-import { bandKey } from '../../utils';
-import { correct, incorrect } from '../../common/styles';
-
-const log = debug('pie-lib:chart:bars');
-
-export class RawPlot extends React.Component {
-  static propTypes = {
-    onChangeCategory: PropTypes.func,
-    value: PropTypes.number,
-    classes: PropTypes.object,
-    label: PropTypes.string,
-    xBand: PropTypes.func,
-    index: PropTypes.number.isRequired,
-    graphProps: types.GraphPropsType.isRequired,
-    CustomBarElement: PropTypes.func,
-    interactive: PropTypes.bool,
-    correctness: PropTypes.shape({
-      value: PropTypes.string,
-      label: PropTypes.string,
-    }),
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      dragValue: undefined,
-      isHovered: false,
-    };
-  }
-
-  handleMouseEnter = () => {
-    this.setState({ isHovered: true });
-  };
-
-  handleMouseLeave = () => {
-    this.setState({ isHovered: false });
-  };
-
-  setDragValue = (dragValue) => this.setState({ dragValue });
-
-  dragStop = () => {
-    const { label, onChangeCategory } = this.props;
-    const { dragValue } = this.state;
-    log('[dragStop]', dragValue);
-
-    if (dragValue !== undefined) {
-      onChangeCategory({ label, value: dragValue });
-    }
-
-    this.setDragValue(undefined);
-  };
-
-  dragValue = (existing, next) => {
-    log('[dragValue] next:', next);
-
-    this.setDragValue(next);
-  };
-
-  render() {
-    const {
-      graphProps,
-      value,
-      label,
-      classes,
-      xBand,
-      index,
-      CustomBarElement,
-      interactive,
-      correctness,
-      defineChart,
-    } = this.props;
-
-    const { scale, range, size } = graphProps;
-    const { max } = range || {};
-    const { dragValue, isHovered } = this.state;
-
-    const v = Number.isFinite(dragValue) ? dragValue : value;
-    const barWidth = xBand.bandwidth();
-    const barHeight = scale.y(range.max - v);
-    const barX = xBand(bandKey({ label }, index));
-
-    log('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);
-
-    const values = [];
-
-    for (let i = 0; i < v; i++) {
-      values.push(i);
-    }
-
-    const pointHeight = size.height / max;
-    const pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;
-    const Component = interactive ? DraggableHandle : DragHandle;
-
-    return (
-      <React.Fragment>
-        <g
-          onMouseEnter={this.handleMouseEnter}
-          onMouseLeave={this.handleMouseLeave}
-          onTouchStart={this.handleMouseEnter}
-          onTouchEnd={this.handleMouseLeave}
-        >
-          {isHovered && (
-            <rect
-              x={barX}
-              y={scale.y(v)}
-              width={barWidth}
-              height={values?.length ? pointHeight * values.length : 0}
-              style={{ fill: '#E5E8F5' }}
-            />
-          )}
-          {values.map((index) =>
-            CustomBarElement({
-              index,
-              pointDiameter,
-              barX,
-              barWidth,
-              pointHeight,
-              label,
-              value,
-              classes,
-              scale,
-            }),
-          )}
-          <Component
-            x={barX}
-            y={v}
-            interactive={interactive}
-            width={barWidth}
-            onDrag={(v) => this.dragValue(value, v)}
-            onDragStop={this.dragStop}
-            graphProps={graphProps}
-            correctness={correctness}
-            isHovered={isHovered}
-            defineChart={defineChart}
-            color={color.primaryDark()}
-          />
-        </g>
-      </React.Fragment>
-    );
-  }
-}
-
-const Bar = withStyles(() => ({
-  dot: {
-    fill: color.primaryLight(),
-    '&.correct': correct('stroke'),
-    '&.incorrect': incorrect('stroke'),
-  },
-  line: {
-    stroke: color.primaryLight(),
-    '&.correct': correct('stroke'),
-    '&.incorrect': incorrect('stroke'),
-  },
-}))(RawPlot);
-
-export class Plot extends React.Component {
-  static propTypes = {
-    data: PropTypes.array,
-    onChangeCategory: PropTypes.func,
-    xBand: PropTypes.func,
-    graphProps: types.GraphPropsType.isRequired,
-    defineChart: PropTypes.bool,
-    CustomBarElement: PropTypes.func,
-  };
-
-  render() {
-    const { data, graphProps, xBand, CustomBarElement, onChangeCategory, defineChart } = this.props;
-
-    return (
-      <Group>
-        {(data || []).map((d, index) => (
-          <Bar
-            value={d.value}
-            label={d.label}
-            interactive={defineChart || d.interactive}
-            defineChart={defineChart}
-            xBand={xBand}
-            index={index}
-            key={`bar-${d.label}-${d.value}-${index}`}
-            onChangeCategory={(category) => onChangeCategory(index, category)}
-            graphProps={graphProps}
-            CustomBarElement={CustomBarElement}
-            correctness={d.correctness}
-          />
-        ))}
-      </Group>
-    );
-  }
-}
-
-export default Plot;