@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/chart.jsx

@@ -1,350 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
-import { Root, createGraphProps } from '../plot';
-import cloneDeep from 'lodash/cloneDeep';
-import ChartGrid from './grid';
-import ChartAxes from './axes';
-import debug from 'debug';
-import { color } from '../render-ui';
-import { dataToXBand, getDomainAndRangeByChartType, getGridLinesAndAxisByChartType, getTopPadding } from './utils';
-import ToolMenu from './tool-menu';
-import chartTypes from './chart-types';
-import { AlertDialog } from '../config-ui';
-import Translator from '../translator';
-
-const { translator } = Translator;
-
-const log = debug('pie-lib:charts:chart');
-
-export class Chart extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      dialog: {
-        open: false,
-      },
-    };
-    this.maskUid = this.generateMaskId();
-  }
-
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    className: PropTypes.string,
-    chartType: PropTypes.string.isRequired,
-    size: PropTypes.shape({
-      width: PropTypes.number,
-      height: PropTypes.number,
-    }),
-    domain: PropTypes.shape({
-      label: PropTypes.string,
-      min: PropTypes.number,
-      max: PropTypes.number,
-      axisLabel: PropTypes.string,
-    }),
-    data: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.number })),
-    range: PropTypes.shape({
-      label: PropTypes.string,
-      min: PropTypes.number,
-      max: PropTypes.number,
-      step: PropTypes.number,
-      labelStep: PropTypes.number,
-      axisLabel: PropTypes.string,
-    }),
-    charts: PropTypes.array,
-    labelsPlaceholders: PropTypes.object,
-    title: PropTypes.string,
-    titlePlaceholder: PropTypes.string,
-    onDataChange: PropTypes.func,
-    onChangeLabels: PropTypes.func,
-    onChangeTitle: PropTypes.func,
-    error: PropTypes.any,
-    addCategoryEnabled: PropTypes.bool,
-    showPixelGuides: PropTypes.bool,
-    categoryDefaultLabel: PropTypes.string,
-    categoryDefaults: PropTypes.object,
-    defineChart: PropTypes.bool,
-    theme: PropTypes.object,
-    chartingOptions: PropTypes.object,
-    changeInteractiveEnabled: PropTypes.bool,
-    changeEditableEnabled: PropTypes.bool,
-    language: PropTypes.string,
-    mathMlOptions: PropTypes.object,
-    labelsCharactersLimit: PropTypes.number,
-  };
-
-  static defaultProps = {
-    size: {
-      width: 480,
-      height: 480,
-    },
-  };
-
-  state = {
-    charts: [
-      chartTypes.Bar(),
-      chartTypes.Histogram(),
-      chartTypes.LineDot(),
-      chartTypes.LineCross(),
-      chartTypes.DotPlot(),
-      chartTypes.LinePlot(),
-    ],
-    autoFocus: false,
-  };
-
-  generateMaskId() {
-    return 'chart-' + (Math.random() * 10000).toFixed();
-  }
-
-  handleAlertDialog = (open, callback) =>
-    this.setState(
-      {
-        dialog: { open },
-      },
-      callback,
-    );
-
-  getChart = () => {
-    const charts = this.props.charts || this.state.charts;
-    let { chartType } = this.props;
-    let ChartComponent = null;
-    let chart = null;
-
-    if (chartType) {
-      chart = charts && charts.find((chart) => chart.type === chartType);
-      ChartComponent = chart && chart.Component;
-    } else {
-      chart = charts && charts[0];
-      ChartComponent = chart && chart.Component;
-      chartType = chart && chart.type;
-    }
-
-    return {
-      type: chartType,
-      ChartComponent,
-    };
-  };
-
-  changeData = (data) => {
-    const { onDataChange } = this.props;
-
-    onDataChange(data);
-  };
-
-  changeCategory = (index, newCategory) => {
-    const integerIndex = parseInt(index, 10);
-
-    if (integerIndex >= 0) {
-      const { data, onDataChange } = this.props;
-      data[integerIndex] = {
-        ...data[integerIndex],
-        ...newCategory,
-      };
-
-      onDataChange(data);
-    }
-  };
-
-  addCategory = () => {
-    const { onDataChange, data, categoryDefaultLabel, defineChart, categoryDefaults, language } = this.props;
-
-    if ((data || []).length > 19) {
-      this.setState({
-        dialog: {
-          open: true,
-          title: translator.t('common:warning', { lng: language }),
-          text: translator.t('charting.reachedLimit_other', { count: 20, lng: language }),
-          onConfirm: () => this.handleAlertDialog(false),
-        },
-      });
-    } else {
-      this.setState({ autoFocus: true });
-      onDataChange([
-        ...data,
-        {
-          inDefineChart: defineChart,
-          label: categoryDefaultLabel || translator.t('charting.newLabel', { lng: language }),
-          value: 0,
-          deletable: true,
-          editable: categoryDefaults ? categoryDefaults?.editable : true,
-          interactive: categoryDefaults ? categoryDefaults?.interactive : true,
-        },
-      ]);
-    }
-  };
-
-  getFilteredCategories = () => {
-    const { data, defineChart } = this.props;
-
-    return data
-      ? data.map((d) => ({
-          ...d,
-          deletable: defineChart || d.deletable,
-        }))
-      : [];
-  };
-
-  resetAutoFocus = () => {
-    this.setState({ autoFocus: false });
-  };
-
-  render() {
-    const {
-      classes,
-      className,
-      domain = {},
-      range = {},
-      chartingOptions,
-      size,
-      title,
-      onChangeTitle,
-      onChangeLabels,
-      labelsPlaceholders,
-      titlePlaceholder,
-      addCategoryEnabled,
-      changeInteractiveEnabled,
-      changeEditableEnabled,
-      showPixelGuides,
-      error,
-      mathMlOptions = {},
-      language,
-      labelsCharactersLimit,
-    } = this.props;
-    let { chartType } = this.props;
-
-    const { dialog } = this.state;
-    const defineChart = this.props.defineChart || false;
-
-    const { width, height } = size || {};
-    const labels = { left: range?.label || '', bottom: domain?.label || '' };
-
-    const { ChartComponent } = this.getChart();
-    const categories = this.getFilteredCategories();
-
-    const correctValues = getDomainAndRangeByChartType(domain, range, chartType);
-
-    const { verticalLines, horizontalLines, leftAxis } = getGridLinesAndAxisByChartType(correctValues.range, chartType);
-    const common = {
-      graphProps: createGraphProps(correctValues.domain, correctValues.range, size, () => this.rootNode),
-    };
-
-    log('[render] common:', common);
-
-    const maskSize = { x: -10, y: -75, width: width + 20, height: height + 80 };
-    const { scale } = common.graphProps;
-    const xBand = dataToXBand(scale.x, categories, width, chartType);
-
-    if (!ChartComponent) {
-      return null;
-    }
-
-    const bandWidth = xBand.bandwidth();
-    // for chartType "line", bandWidth will be 0, so we have to calculate it
-    const barWidth = bandWidth || scale.x(correctValues.domain.max) / categories.length;
-    const increaseHeight = defineChart ? 160 : 60;
-
-    // if there are many categories, we have to rotate their names in order to fit
-    // and we have to add extra value on top of some items
-    const top = getTopPadding(barWidth);
-    const rootCommon = cloneDeep(common);
-    rootCommon.graphProps.size.height += top + increaseHeight;
-
-    return (
-      <div className={classNames(classes.chart, classes.chartBox, className)}>
-        <div className={classes.controls}>
-          <ToolMenu
-            className={classes.toolMenu}
-            disabled={!addCategoryEnabled}
-            addCategory={() => this.addCategory()}
-            language={language}
-          />
-        </div>
-
-        <Root
-          title={title}
-          onChangeTitle={onChangeTitle}
-          disabledTitle={!defineChart}
-          showTitle={true}
-          showLabels={true}
-          labels={labels}
-          onChangeLabels={onChangeLabels}
-          labelsPlaceholders={labelsPlaceholders}
-          titlePlaceholder={titlePlaceholder}
-          defineChart={defineChart}
-          disabledLabels={!defineChart}
-          isChart={true}
-          showPixelGuides={showPixelGuides}
-          rootRef={(r) => (this.rootNode = r)}
-          mathMlOptions={mathMlOptions}
-          labelsCharactersLimit={labelsCharactersLimit}
-          {...rootCommon}
-        >
-          <ChartGrid {...common} xBand={xBand} rowTickValues={horizontalLines} columnTickValues={verticalLines} />
-          <ChartAxes
-            autoFocus={this.state.autoFocus}
-            onAutoFocusUsed={this.resetAutoFocus}
-            {...common}
-            defineChart={defineChart}
-            categories={categories}
-            xBand={xBand}
-            leftAxis={leftAxis}
-            onChange={this.changeData}
-            onChangeCategory={this.changeCategory}
-            chartingOptions={chartingOptions}
-            changeInteractiveEnabled={changeInteractiveEnabled}
-            changeEditableEnabled={changeEditableEnabled}
-            top={top}
-            error={error}
-          />
-          <mask id={`${this.maskUid}`}>
-            <rect {...maskSize} fill="white" />
-          </mask>
-          <g id="marks" mask={`url('#${this.maskUid}')`}>
-            <ChartComponent
-              {...common}
-              data={categories}
-              height={rootCommon.graphProps.size.height}
-              defineChart={defineChart}
-              onChange={this.changeData}
-              onChangeCategory={this.changeCategory}
-            />
-          </g>
-        </Root>
-        <AlertDialog
-          open={dialog.open}
-          title={dialog.title}
-          text={dialog.text}
-          onClose={dialog.onClose}
-          onConfirm={dialog.onConfirm}
-        />
-      </div>
-    );
-  }
-}
-
-const styles = (theme) => ({
-  graphBox: {
-    transform: 'translate(60px, 35px)',
-  },
-  controls: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    padding: theme.spacing.unit,
-    backgroundColor: color.primaryLight(),
-    '& button': {
-      fontSize: theme.typography.fontSize,
-    },
-  },
-  svg: {
-    overflow: 'visible',
-  },
-  toolMenu: {
-    minHeight: '36px',
-  },
-  chartBox: {
-    width: 'min-content',
-  },
-});
-
-export default withStyles(styles, { withTheme: true })(Chart);

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

@@ -1,139 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-import { gridDraggable, utils, types } from '../../plot';
-import { color } from '../../render-ui';
-import { correct, incorrect, disabled } from './styles';
-import { getScale } from '../utils';
-import DragIcon from './drag-icon';
-
-const RawDragHandle = ({
-  x,
-  y,
-  width,
-  graphProps,
-  classes,
-  className,
-  interactive,
-  defineChart,
-  isHovered,
-  correctness,
-  color,
-  ...rest
-}) => {
-  const { scale } = graphProps;
-  const scaleValue = getScale(width)?.scale;
-
-  return (
-    <svg x={x} y={scale.y(y) - 10} width={width} overflow="visible" className={classes.svgOverflowVisible}>
-      {isHovered && !correctness && interactive && (
-        <DragIcon width={width} scaleValue={scaleValue} color={color} classes={classes} />
-      )}
-      <ellipse
-        cx={width / 2}
-        cy={10}
-        rx={width / 2}
-        // the drag icon has a 22px fixed r value, so the ry value is 3 times that in order to cover all the area
-        ry={66}
-        className={classNames(classes.transparentHandle, className)}
-        {...rest}
-      />
-
-      <defs>
-        <filter id="bottomShadow" x="0" y="0" width="140%" height="140%">
-          <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
-          <feOffset dx="0" dy="5" result="offsetblur" />
-          <feFlood floodColor="#00000033" />
-          <feComposite in2="offsetblur" operator="in" />
-          <feMerge>
-            <feMergeNode />
-            <feMergeNode in="SourceGraphic" />
-          </feMerge>
-        </filter>
-      </defs>
-
-      {correctness && (
-        <rect
-          y={10}
-          width={width}
-          filter="url(#bottomShadow)"
-          className={classNames(
-            classes.handle,
-            'handle',
-            className,
-            !interactive && 'non-interactive',
-            interactive && correctness && correctness.value,
-          )}
-          {...rest}
-        />
-      )}
-    </svg>
-  );
-};
-
-RawDragHandle.propTypes = {
-  x: PropTypes.number.isRequired,
-  y: PropTypes.number.isRequired,
-  width: PropTypes.number,
-  graphProps: types.GraphPropsType.isRequired,
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  interactive: PropTypes.bool,
-  isHovered: PropTypes.bool,
-  correctness: PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string,
-  }),
-  color: PropTypes.string,
-};
-
-export const DragHandle = withStyles(() => ({
-  handle: {
-    height: '10px',
-    fill: 'transparent',
-    transition: 'fill 200ms linear, height 200ms linear',
-    '&.correct': correct('fill'),
-    '&.incorrect': incorrect('fill'),
-    '&.non-interactive': disabled('fill'),
-  },
-  transparentHandle: {
-    fill: 'transparent',
-    clipPath: 'polygon(50% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 0%)',
-  },
-  handleContainer: {
-    height: 30,
-    '&:hover': {
-      '& .handle': {
-        fill: color.secondaryDark(),
-        height: '16px',
-      },
-    },
-    '&.non-interactive': disabled('fill'),
-    '&.incorrect': incorrect('fill'),
-    '&.correct': correct('fill'),
-  },
-  svgOverflowVisible: {
-    overflow: 'visible !important',
-  },
-}))(RawDragHandle);
-
-export const D = gridDraggable({
-  axis: 'y',
-  fromDelta: (props, delta) => {
-    //TODO: should be in grid-draggable, if axis is y delta.x should always be 0.
-    delta.x = 0;
-    const newPoint = utils.point(props).add(utils.point(delta));
-
-    return newPoint.y;
-  },
-  bounds: (props, { domain, range }) => {
-    const area = { left: 0, top: props.y, bottom: props.y, right: 0 };
-    return utils.bounds(area, domain, range);
-  },
-  anchorPoint: (props) => {
-    return { x: props.x, y: props.y };
-  },
-})(DragHandle);
-
-export default D;

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

@@ -1,29 +0,0 @@
-import React from 'react';
-import { getAdjustedX, getScale } from '../utils';
-
-const DragIcon = ({ width, scaleValue, color, classes }) => (
-  <svg
-    x={getAdjustedX(width, scaleValue)}
-    y={getScale(width)?.deltay}
-    color={color}
-    width={width}
-    height={width}
-    overflow="visible"
-    viewBox={`0 0 ${width} ${width}`}
-    className={classes.svgOverflowVisible}
-  >
-    <g xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" transform={`scale(${scaleValue})`}>
-      <circle cx="28.5" cy="23.5" r="22" fill="white" stroke="currentColor" />
-      <path
-        d="M33.5 21.25H23.4609C22.7578 21.25 22.4062 20.4297 22.9141 19.9219L27.9141 14.9219C28.2266 14.6094 28.7344 14.6094 29.0469 14.9219L34.0469 19.9219C34.5547 20.4297 34.2031 21.25 33.5 21.25Z"
-        fill="currentColor"
-      />
-      <path
-        d="M23.5 25.75L33.5391 25.75C34.2422 25.75 34.5938 26.5703 34.0859 27.0781L29.0859 32.0781C28.7734 32.3906 28.2656 32.3906 27.9531 32.0781L22.9531 27.0781C22.4453 26.5703 22.7969 25.75 23.5 25.75Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
-
-export default DragIcon;

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

@@ -1,19 +0,0 @@
-import { color } from '../../render-ui';
-
-export const disabled = (key = 'fill') => ({
-  [key]: `var(--graph-disabled, ${color.disabled()})`,
-  pointerEvents: 'none',
-  border: 'none',
-});
-
-export const correct = (key = 'fill') => ({
-  [key]: color.correct(),
-  pointerEvents: 'none',
-  border: `solid 1px ${color.correct()}`,
-});
-
-export const incorrect = (key = 'fill') => ({
-  [key]: color.incorrect(),
-  pointerEvents: 'none',
-  border: `solid 1px ${color.incorrect()}`,
-});

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

@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
-
-import { Grid as VxGrid } from '@vx/grid';
-import { types } from '../plot';
-import { color } from '../render-ui';
-
-export class Grid extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    className: PropTypes.string,
-    graphProps: types.GraphPropsType.isRequired,
-    xBand: PropTypes.func,
-    columnTickValues: PropTypes.array,
-    rowTickValues: PropTypes.array,
-  };
-
-  static defaultProps = {};
-
-  render() {
-    const { classes, className, graphProps, xBand, rowTickValues, columnTickValues } = this.props;
-    const { scale = {}, size = {} } = graphProps || {};
-
-    return (
-      <VxGrid
-        xScale={xBand}
-        yScale={scale.y}
-        className={classNames(classes.grid, className)}
-        width={size.width}
-        height={size.height}
-        xOffset={xBand.bandwidth() / 2}
-        rowTickValues={rowTickValues}
-        columnTickValues={columnTickValues}
-      />
-    );
-  }
-}
-
-const styles = () => ({
-  grid: {
-    stroke: color.primaryLight(),
-  },
-});
-
-export default withStyles(styles)(Grid);

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

@@ -1,6 +0,0 @@
-import Chart from './chart';
-import chartTypes from './chart-types';
-import ConfigureChartPanel from './chart-setup';
-import ChartType from './chart-type';
-
-export { Chart, chartTypes, ChartType, ConfigureChartPanel };

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

@@ -1,100 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { gridDraggable, utils, types } from '../../../plot';
-import { withStyles } from '@material-ui/core/styles/index';
-import { color } from '../../../render-ui';
-import PropTypes from 'prop-types';
-import { correct, incorrect, disabled } from '../../common/styles';
-
-class RawDragHandle extends React.Component {
-  static propTypes = {
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    width: PropTypes.number,
-    graphProps: types.GraphPropsType.isRequired,
-    classes: PropTypes.object.isRequired,
-    className: PropTypes.string,
-    interactive: PropTypes.bool,
-    CustomDraggableComponent: PropTypes.func,
-    correctness: PropTypes.shape({
-      value: PropTypes.string,
-      label: PropTypes.string,
-    }),
-  };
-
-  render() {
-    const {
-      x,
-      y,
-      graphProps,
-      classes,
-      className,
-      interactive,
-      CustomDraggableComponent,
-      correctness,
-      ...rest
-    } = this.props;
-    const { scale } = graphProps;
-
-    return (
-      <CustomDraggableComponent
-        scale={scale}
-        x={x}
-        y={y}
-        classes={classes}
-        className={classNames(className, !interactive && 'non-interactive')}
-        correctness={correctness}
-        {...rest}
-      />
-    );
-  }
-}
-
-export const DragHandle = withStyles(() => ({
-  handle: {
-    fill: color.defaults.SECONDARY,
-    transition: 'fill 200ms linear, height 200ms linear',
-    '&:hover': {
-      fill: color.defaults.SECONDARY_DARK,
-    },
-    '&.correct': correct('fill'),
-    '&.incorrect': incorrect('fill'),
-    '&.non-interactive': disabled('fill'),
-  },
-  transparentHandle: {
-    height: '20px',
-    fill: 'transparent',
-    stroke: 'transparent',
-  },
-  line: {
-    stroke: color.defaults.SECONDARY,
-    transition: 'fill 200ms linear, height 200ms linear',
-    '&:hover': {
-      stroke: color.defaults.SECONDARY_DARK,
-    },
-    '&.non-interactive': disabled('stroke'),
-    '&.correct': correct('stroke'),
-    '&.incorrect': incorrect('stroke'),
-  },
-}))(RawDragHandle);
-
-const DraggableHandle = gridDraggable({
-  axis: 'y',
-  fromDelta: (props, delta) => {
-    //TODO: should be in grid-draggable, if axis is y delta.x should always be 0.
-    delta.x = 0;
-    const newPoint = utils.point(props).add(utils.point(delta));
-
-    return newPoint.y;
-  },
-  bounds: (props, { domain, range }) => {
-    const area = { left: 0, top: props.y, bottom: props.y, right: 0 };
-
-    return utils.bounds(area, domain, range);
-  },
-  anchorPoint: (props) => {
-    return { x: props.x, y: props.y };
-  },
-})(DragHandle);
-
-export default DraggableHandle;