@pie-element/ebsr 9.12.1 → 9.12.2-next.18

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

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

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

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

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

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

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

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