@pie-element/ebsr 9.0.2-next.16 → 9.0.2-next.17

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

@@ -0,0 +1,207 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { types } from '../../../plot';
+import { Group } from '@vx/group';
+import { color } from '../../../render-ui';
+import { Bar as VxBar } from '@vx/shape';
+import { withStyles } from '@material-ui/core/styles/index';
+import debug from 'debug';
+import { bandKey } from '../../utils';
+import DraggableHandle, { DragHandle } from '../../common/drag-handle';
+
+const log = debug('pie-lib:chart:bars');
+const histogramColors = [
+  '#006699',
+  '#F59B00',
+  '#08916D',
+  '#529EE0',
+  '#52B7D8',
+  '#D9A6C2',
+  '#FFB03B',
+  '#54A77B',
+  '#E16032',
+  '#4FD2D2',
+  '#F0E442',
+  '#E287B2',
+];
+const hoverHistogramColors = [
+  '#003754',
+  '#975616',
+  '#00503B',
+  '#225982',
+  '#1F687D',
+  '#825E6F',
+  '#996428',
+  '#255E44',
+  '#8A331F',
+  '#167A7A',
+  '#91862D',
+  '#894A65',
+];
+
+const calculateFillColor = (isHovered, barColor, index, hoverHistogramColors) => {
+  if (isHovered && barColor) {
+    return hoverHistogramColors[index % hoverHistogramColors.length];
+  }
+  if (isHovered) {
+    return color.primaryDark();
+  }
+  return barColor || null;
+};
+
+export class RawBar extends React.Component {
+  static propTypes = {
+    barColor: PropTypes.string,
+    onChangeCategory: PropTypes.func,
+    value: PropTypes.number,
+    classes: PropTypes.object,
+    label: PropTypes.string,
+    xBand: PropTypes.func,
+    index: PropTypes.number.isRequired,
+    graphProps: types.GraphPropsType.isRequired,
+    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,
+      interactive,
+      correctness,
+      barColor,
+      defineChart,
+    } = this.props;
+    const { scale, range } = graphProps;
+    const { dragValue, isHovered } = this.state;
+
+    const fillColor = calculateFillColor(isHovered, barColor, index, hoverHistogramColors);
+    const v = Number.isFinite(dragValue) ? dragValue : value;
+    const barWidth = xBand.bandwidth();
+    const barHeight = scale.y(range.max - v);
+    const barX = xBand(bandKey({ label }, index));
+    const rawY = range.max - v;
+    const yy = range.max - rawY;
+    log('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);
+
+    const Component = interactive ? DraggableHandle : DragHandle;
+
+    return (
+      <g onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+        <VxBar
+          x={barX}
+          y={scale.y(yy)}
+          width={barWidth}
+          height={barHeight}
+          className={classes.bar}
+          style={{ fill: fillColor }}
+        />
+        <Component
+          x={barX}
+          y={v}
+          defineChart={defineChart}
+          interactive={interactive}
+          width={barWidth}
+          onDrag={(v) => this.dragValue(value, v)}
+          onDragStop={this.dragStop}
+          graphProps={graphProps}
+          correctness={correctness}
+          isHovered={isHovered}
+          color={fillColor}
+        />
+      </g>
+    );
+  }
+}
+
+const Bar = withStyles(() => ({
+  bar: {
+    fill: color.primaryLight(),
+    '&:hover': {
+      fill: color.primaryDark(),
+    },
+  },
+}))(RawBar);
+
+export class Bars extends React.Component {
+  static propTypes = {
+    data: PropTypes.array,
+    onChangeCategory: PropTypes.func,
+    defineChart: PropTypes.bool,
+    xBand: PropTypes.func,
+    graphProps: types.GraphPropsType.isRequired,
+    histogram: PropTypes.bool,
+  };
+
+  render() {
+    const { data, graphProps, xBand, onChangeCategory, defineChart, histogram } = this.props;
+
+    return (
+      <Group>
+        {(data || []).map((d, index) => (
+          <Bar
+            value={d.value}
+            interactive={defineChart || d.interactive}
+            defineChart={defineChart}
+            label={d.label}
+            xBand={xBand}
+            index={index}
+            key={`bar-${d.label}-${d.value}-${index}`}
+            onChangeCategory={(category) => onChangeCategory(index, category)}
+            graphProps={graphProps}
+            correctness={d.correctness}
+            barColor={
+              histogram &&
+              (histogramColors[index] ? histogramColors[index] : histogramColors[index % histogramColors.length])
+            }
+          />
+        ))}
+      </Group>
+    );
+  }
+}
+
+export default Bars;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { types } from '../../plot';
+import { dataToXBand } from '../utils';
+import Bars from './common/bars';
+
+export class Histogram 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, 'histogram');
+
+    return <Bars {...props} xBand={xBand} histogram={true} />;
+  }
+}
+
+export default () => ({
+  type: 'histogram',
+  Component: Histogram,
+  name: 'Histogram',
+});

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

@@ -0,0 +1,372 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { color } from '../render-ui';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import ChartType from './chart-type';
+import { NumberTextFieldCustom } from '../config-ui';
+import { AlertDialog } from '../config-ui';
+
+export const resetValues = (data, updateModel, range, onChange, model) => {
+  (data || []).forEach((d) => {
+    const d_value_scaled = Math.round(d.value * 10);
+    const range_step_scaled = Math.round(range.step * 10);
+    const remainder_scaled = d_value_scaled % range_step_scaled;
+    const remainder = remainder_scaled / 10;
+
+    if (d.value > range.max || remainder !== 0) {
+      d.value = 0;
+    }
+  });
+
+  if (updateModel) {
+    onChange({ ...model, data });
+  }
+};
+
+const ConfigureChartPanel = (props) => {
+  const {
+    classes,
+    model,
+    onChange,
+    chartDimensions,
+    gridValues = {},
+    labelValues = {},
+    studentNewCategoryDefaultLabel = {},
+    availableChartTypes = {},
+    chartTypeLabel,
+  } = props;
+  const [alertDialog, setAlertDialog] = useState({
+    open: false,
+    title: '',
+    text: '',
+    onClose: null,
+    onConfirm: null,
+  });
+  const [open, setOpen] = useState(false);
+  const [rangeKey, setRangeKey] = useState('');
+  const [resetValue, setResetValue] = useState(0);
+
+  const { range = {}, correctAnswer, changeInteractiveEnabled, changeEditableEnabled } = model;
+
+  const size = model.graph;
+  const { showInConfigPanel, width, height } = chartDimensions || {};
+
+  const widthConstraints = {
+    min: width?.min ? Math.max(50, width.min) : 50,
+    max: width?.max ? Math.min(700, width.max) : 700,
+    step: width?.step >= 1 ? Math.min(200, width.step) : 20,
+  };
+  const heightConstraints = {
+    min: height?.min ? Math.max(400, height.min) : 400,
+    max: height?.max ? Math.min(700, height.max) : 700,
+    step: height?.step >= 1 ? Math.min(200, height.step) : 20,
+  };
+
+  const gridOptions = gridValues && gridValues.range ? { customValues: gridValues.range } : { min: 0, max: 10000 };
+  const labelOptions = labelValues && labelValues.range ? { customValues: labelValues.range } : { min: 0, max: 10000 };
+
+  const stepConfig = (
+    <div className={classes.rowView}>
+      <NumberTextFieldCustom
+        className={classes.mediumTextField}
+        label="Grid Interval"
+        value={range.step}
+        variant="outlined"
+        onChange={(e, v) => onRangeChanged('step', v, e)}
+        {...gridOptions}
+      />
+      <NumberTextFieldCustom
+        className={classes.mediumTextField}
+        label={'Label Interval'}
+        value={range.labelStep}
+        variant={'outlined'}
+        onChange={(e, v) => onRangeChanged('labelStep', v, e)}
+        {...labelOptions}
+      />
+    </div>
+  );
+
+  const handleAlertDialog = (openStatus, callback) => {
+    setAlertDialog(
+      (prevState) => ({
+        ...prevState,
+        open: openStatus,
+      }),
+      () => {
+        if (callback) {
+          callback();
+        }
+      },
+    );
+
+    setOpen(openStatus);
+  };
+
+  const setPropertiesToFalse = (data, property) => {
+    return data.map((obj) => {
+      if (obj.hasOwnProperty(property)) {
+        obj[property] = property == 'interactive' ? true : false;
+      }
+      return obj;
+    });
+  };
+
+  const removeOutOfRangeValues = (updateModel) => {
+    const { correctAnswer, data } = model;
+
+    if (changeInteractiveEnabled === false) {
+      setPropertiesToFalse(data, 'interactive');
+    }
+
+    if (changeEditableEnabled === false) {
+      setPropertiesToFalse(data, 'editable');
+    }
+
+    resetValues(data, updateModel, range, onChange, model);
+    resetValues(correctAnswer.data, false, range, onChange, model);
+  };
+
+  const setCategoryDefaultLabel = () => {
+    const studentCategoryDefaultLabel = studentNewCategoryDefaultLabel?.label;
+
+    onChange({ ...model, studentCategoryDefaultLabel });
+  };
+
+  const rangeProps = (chartType) => {
+    return chartType.includes('Plot') ? { min: 3, max: 10 } : { min: 0.05, max: 10000 };
+  };
+
+  const onSizeChanged = (key, value) => {
+    const graph = { ...size, [key]: value };
+
+    onChange({ ...model, graph });
+  };
+
+  const isOutOfRange = (data, range) =>
+    (data || []).find((d) => d.value > range.max || d.value - range.step * Math.floor(d.value / range.step) !== 0);
+
+  const onRangeChanged = (key, value, e) => {
+    // use reset values to restore range to initial values
+    setResetValue(range[key]);
+    setRangeKey(key);
+
+    range[key] = value;
+
+    if (key === 'max' || key === 'step') {
+      // check if current chart values are invalid for given range step/max
+      const outOfRange = isOutOfRange(model.data, range) || isOutOfRange(model.correctAnswer.data, range);
+
+      if (outOfRange && JSON.stringify(e) !== '{}') {
+        setOpen(true);
+      } else {
+        onChange({ ...model, range });
+      }
+    } else {
+      onChange({ ...model, range });
+    }
+  };
+
+  useEffect(() => {
+    removeOutOfRangeValues(true);
+    setCategoryDefaultLabel();
+  }, []);
+
+  useEffect(() => {
+    if (open) {
+      setAlertDialog({
+        open: true,
+        title: 'Warning',
+        text: 'This change will remove values defined for one or more categories',
+        onConfirm: () => {
+          removeOutOfRangeValues();
+          handleAlertDialog(false, onChange({ ...model, range, correctAnswer }));
+        },
+        onClose: () => {
+          range[rangeKey] = resetValue;
+          handleAlertDialog(false);
+        },
+      });
+    }
+  }, [open]);
+
+  const isValidPlot = range.step === 1 && range.labelStep === 1 && 3 <= range.max && range.max <= 10;
+
+  const getPlotConfiguration = () => {
+    rangeProps.min = 3;
+    rangeProps.max = 10;
+
+    range.max = 10;
+    range.step = 1;
+    range.labelStep = 1;
+
+    onChange({ ...model, range });
+  };
+
+  const onChartTypeChange = (chartType) => {
+    if (chartType.includes('Plot')) {
+      // The selected chart type does not support the current chart configuration
+      if (!isValidPlot) {
+        setAlertDialog({
+          open: true,
+          title: 'Warning',
+          text: 'The selected chart type does not support the current chart configuration. Reset chart configuration?',
+          onConfirm: () => {
+            getPlotConfiguration();
+            removeOutOfRangeValues();
+            handleAlertDialog(false, onChange({ ...model, range, chartType }));
+          },
+          onClose: () => {
+            handleAlertDialog(false);
+          },
+        });
+
+        return;
+      }
+
+      rangeProps.min = 3;
+      rangeProps.max = 10;
+
+      onChange({ ...model, chartType });
+
+      return;
+    }
+
+    onChange({ ...model, chartType });
+  };
+
+  return (
+    <div className={classes.wrapper}>
+      <Typography variant={'subtitle1'}>Configure Chart</Typography>
+      <div className={classes.content}>
+        <div className={classes.rowView}>
+          <ChartType
+            value={model.chartType}
+            onChange={(e) => onChartTypeChange(e.target.value)}
+            availableChartTypes={availableChartTypes}
+            chartTypeLabel={chartTypeLabel}
+          />
+          <NumberTextFieldCustom
+            className={classes.mediumTextField}
+            label="Max Value"
+            value={range.max}
+            min={rangeProps(model.chartType).min}
+            max={rangeProps(model.chartType).max}
+            variant="outlined"
+            onChange={(e, v) => onRangeChanged('max', v, e)}
+          />
+        </div>
+        {!model.chartType.includes('Plot') && stepConfig}
+
+        {showInConfigPanel && (
+          <div className={classes.dimensions}>
+            <div>
+              <Typography>Dimensions(px)</Typography>
+            </div>
+
+            <div className={classes.columnView}>
+              <NumberTextFieldCustom
+                className={classes.textField}
+                label={'Width'}
+                value={size.width}
+                min={widthConstraints.min}
+                max={widthConstraints.max}
+                step={widthConstraints.step}
+                variant={'outlined'}
+                onChange={(e, v) => onSizeChanged('width', v)}
+              />
+              <Typography className={classes.disabled}>Min 50, Max 700</Typography>
+            </div>
+
+            <div className={classes.columnView}>
+              <NumberTextFieldCustom
+                className={classes.textField}
+                label={'Height'}
+                value={size.height}
+                min={heightConstraints.min}
+                max={heightConstraints.max}
+                step={heightConstraints.step}
+                variant={'outlined'}
+                onChange={(e, v) => onSizeChanged('height', v)}
+              />
+              <Typography className={classes.disabled}>Min 400, Max 700</Typography>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <AlertDialog
+        open={alertDialog.open}
+        title={alertDialog.title}
+        text={alertDialog.text}
+        onClose={alertDialog.onClose}
+        onConfirm={alertDialog.onConfirm}
+      />
+    </div>
+  );
+};
+
+ConfigureChartPanel.propTypes = {
+  classes: PropTypes.object,
+  chartDimensions: PropTypes.object,
+  domain: PropTypes.object,
+  gridValues: PropTypes.object,
+  labelValues: PropTypes.object,
+  model: PropTypes.object,
+  onChange: PropTypes.func,
+  range: PropTypes.object,
+  chartDimension: PropTypes.object,
+  size: PropTypes.object,
+  studentNewCategoryDefaultLabel: PropTypes.object,
+  availableChartTypes: PropTypes.object,
+  chartTypeLabel: PropTypes.string,
+};
+
+const styles = (theme) => ({
+  wrapper: {
+    width: '450px',
+  },
+  content: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    marginTop: theme.spacing.unit * 3,
+  },
+  columnView: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  rowView: {
+    display: 'flex',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
+  textField: {
+    width: '130px',
+    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
+  },
+  mediumTextField: {
+    width: '160px',
+    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
+  },
+  largeTextField: {
+    width: '230px',
+    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
+  },
+  text: {
+    fontStyle: 'italic',
+    margin: `${theme.spacing.unit}px 0`,
+  },
+  dimensions: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    margin: `${theme.spacing.unit * 3}px 0`,
+  },
+  disabled: {
+    color: color.disabled(),
+  },
+});
+
+export default withStyles(styles)(ConfigureChartPanel);

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import InputLabel from '@material-ui/core/InputLabel';
+import Select from '@material-ui/core/Select';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+
+const ChartType = withStyles(() => ({
+  chartType: {
+    width: '160px',
+  },
+  chartTypeLabel: {
+    backgroundColor: 'transparent',
+  },
+}))(({ onChange, value, classes, availableChartTypes, chartTypeLabel }) => (
+  <div className={classes.chartType}>
+    <FormControl variant={'outlined'} className={classes.chartType}>
+      <InputLabel htmlFor="type-helper" className={classes.chartTypeLabel}>
+        {chartTypeLabel}
+      </InputLabel>
+
+      <Select value={value} onChange={onChange} labelWidth={75} input={<OutlinedInput name="type" id="type-helper" />}>
+        {availableChartTypes?.histogram && <MenuItem value={'histogram'}>{availableChartTypes.histogram}</MenuItem>}
+        {availableChartTypes?.bar && <MenuItem value={'bar'}>{availableChartTypes.bar}</MenuItem>}
+        {availableChartTypes?.lineDot && <MenuItem value={'lineDot'}>{availableChartTypes.lineDot}</MenuItem>}
+        {availableChartTypes?.lineCross && <MenuItem value={'lineCross'}>{availableChartTypes.lineCross}</MenuItem>}
+        {availableChartTypes?.dotPlot && <MenuItem value={'dotPlot'}>{availableChartTypes.dotPlot}</MenuItem>}
+        {availableChartTypes?.linePlot && <MenuItem value={'linePlot'}>{availableChartTypes.linePlot}</MenuItem>}
+      </Select>
+    </FormControl>
+  </div>
+));
+
+export default ChartType;

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

@@ -0,0 +1,8 @@
+import Bar from './bars/bar';
+import Histogram from './bars/histogram';
+import LineDot from './line/line-dot';
+import LineCross from './line/line-cross';
+import DotPlot from './plot/dot';
+import LinePlot from './plot/line';
+
+export default { Bar, Histogram, LineDot, DotPlot, LinePlot, LineCross };