@pie-element/complex-rubric 2.1.2-next.69 → 2.1.2-next.72

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

@@ -1,207 +0,0 @@
-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-lib/pie-toolbox/src/code/charting/bars/histogram.js

@@ -1,28 +0,0 @@
-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-lib/pie-toolbox/src/code/charting/chart-setup.jsx

@@ -1,372 +0,0 @@
-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-lib/pie-toolbox/src/code/charting/chart-type.js

@@ -1,35 +0,0 @@
-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-lib/pie-toolbox/src/code/charting/chart-types.js

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