@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/plot/dot.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { types } from '../../plot';
+import { dataToXBand } from '../utils';
+import Plot from './common/plot';
+import { Circle } from '@vx/shape';
+
+const CustomBarElement = (props) => {
+  const { index, pointDiameter, barX, barWidth, pointHeight, label, value, classes, scale } = props;
+
+  const r = pointDiameter / 2;
+  const cx = barX + (barWidth - pointDiameter) / 2 + r;
+  const cy = scale.y(index) - (pointHeight - pointDiameter) / 2 - r;
+
+  return <Circle key={`point-${label}-${value}-${index}`} className={classes.dot} cx={cx} cy={cy} r={r} />;
+};
+
+CustomBarElement.propTypes = {
+  index: PropTypes.number,
+  pointDiameter: PropTypes.number,
+  barX: PropTypes.number,
+  barWidth: PropTypes.number,
+  pointHeight: PropTypes.number,
+  value: PropTypes.number,
+  label: PropTypes.string,
+  classes: PropTypes.object,
+  scale: PropTypes.object,
+};
+
+export class DotPlot 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, 'dotPlot');
+
+    return <Plot {...props} xBand={xBand} CustomBarElement={CustomBarElement} />;
+  }
+}
+
+export default () => ({
+  type: 'dotPlot',
+  Component: DotPlot,
+  name: 'Dot Plot',
+});

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { types } from '../../plot';
+import { dataToXBand } from '../utils';
+import Plot from './common/plot';
+import { LinePath } from '@vx/shape';
+import { Group } from '@vx/group';
+
+const CustomBarElement = (props) => {
+  const { index, pointDiameter, barX, barWidth, pointHeight, label, value, classes, scale } = props;
+
+  const x = barX + (barWidth - pointDiameter) / 2;
+  const y = scale.y(index) - (pointHeight - pointDiameter) / 2;
+
+  return (
+    <Group>
+      <LinePath
+        data={[
+          { x, y },
+          { x: x + pointDiameter, y: y - pointDiameter },
+        ]}
+        key={`point-${label}-${value}-${index}-1`}
+        className={classes.line}
+        x={(d) => d.x}
+        y={(d) => d.y}
+        strokeWidth={pointDiameter / 5}
+      />
+      <LinePath
+        data={[
+          { x, y: y - pointDiameter },
+          { x: x + pointDiameter, y },
+        ]}
+        key={`point-${label}-${value}-${index}-2`}
+        className={classes.line}
+        x={(d) => d.x}
+        y={(d) => d.y}
+        strokeWidth={pointDiameter / 5}
+      />
+    </Group>
+  );
+};
+
+CustomBarElement.propTypes = {
+  index: PropTypes.number,
+  pointDiameter: PropTypes.number,
+  barX: PropTypes.number,
+  barWidth: PropTypes.number,
+  pointHeight: PropTypes.number,
+  value: PropTypes.number,
+  label: PropTypes.string,
+  classes: PropTypes.object,
+  scale: PropTypes.object,
+};
+
+export class LinePlot 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, 'linePlot');
+
+    return <Plot {...props} xBand={xBand} CustomBarElement={CustomBarElement} />;
+  }
+}
+
+export default () => ({
+  type: 'linePlot',
+  Component: LinePlot,
+  name: 'Line Plot',
+});

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { color } from '../render-ui';
+
+import { withStyles } from '@material-ui/core/styles';
+import cn from 'classnames';
+import Button from '@material-ui/core/Button';
+import Translator from '../translator';
+
+const { translator } = Translator;
+
+const buttonStyles = (theme) => ({
+  root: {
+    color: color.text(),
+    border: `1px solid ${color.secondary()}`,
+    fontSize: theme.typography.fontSize,
+  },
+  selected: {
+    backgroundColor: color.background(),
+    '& span': {
+      color: color.primaryDark(),
+    },
+  },
+  notSelected: {
+    '& span': {
+      color: color.primary(),
+    },
+    backgroundColor: color.background(),
+  },
+  disabled: {
+    '& span': {
+      color: color.primary(),
+    },
+    backgroundColor: color.disabled(),
+  },
+});
+
+export const MiniButton = withStyles(buttonStyles)((props) => {
+  const { disabled, classes, className, selected, value, onClick } = props;
+  return (
+    <Button
+      size="small"
+      disabled={disabled}
+      color={selected ? 'secondary' : 'default'}
+      className={cn(classes.root, selected && classes.selected, className)}
+      classes={{ disabled: cn(disabled && classes.disabled) }}
+      value={value}
+      key={value}
+      variant="outlined"
+      onClick={onClick}
+    >
+      {value}
+    </Button>
+  );
+});
+MiniButton.propTypes = {
+  disabled: PropTypes.bool,
+  className: PropTypes.string,
+  disabledClassName: PropTypes.string,
+  selected: PropTypes.bool,
+  value: PropTypes.string,
+  onClick: PropTypes.func,
+};
+
+export class ToolMenu extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    addCategory: PropTypes.func,
+    disabled: PropTypes.bool,
+    language: PropTypes.string,
+  };
+
+  static defaultProps = {};
+
+  render() {
+    const { className, disabled, addCategory, language } = this.props;
+
+    return (
+      <div className={classNames(className)}>
+        {!disabled && (
+          <MiniButton value={translator.t('charting.addCategory', { lng: language })} onClick={addCategory} />
+        )}
+      </div>
+    );
+  }
+}
+
+export default ToolMenu;

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

@@ -0,0 +1,198 @@
+import { scaleBand, scalePoint } from '@vx/scale';
+import { utils } from '../plot';
+
+export const tickCount = utils.tickCount;
+export const bounds = utils.bounds;
+export const point = utils.point;
+
+export const bandKey = (d, index) => `${index}-${d.label || '-'}`;
+
+export const dataToXBand = (scaleX, data, width, type) => {
+  switch (type) {
+    case 'bar':
+    case 'dotPlot':
+    case 'linePlot':
+      return scaleBand({
+        rangeRound: [0, width],
+        domain: data && data.map(bandKey),
+        padding: 0.2,
+      });
+
+    case 'histogram':
+      return scaleBand({
+        rangeRound: [0, width],
+        domain: data && data.map(bandKey),
+        padding: 0,
+      });
+
+    case 'lineCross':
+    case 'lineDot':
+      return scalePoint({
+        domain: data && data.map(bandKey),
+        rangeRound: [0, width],
+      });
+
+    default:
+      return scaleBand({
+        range: [0, width],
+        domain: data && data.map(bandKey),
+        padding: 0,
+      });
+  }
+};
+
+export const getTickValues = (prop = {}) => {
+  const tickValues = [];
+  let tickVal = prop.min;
+
+  while (tickVal <= prop.max) {
+    tickValues.push(tickVal);
+    tickVal = Math.round((tickVal + prop.step) * 10000) / 10000;
+  }
+
+  return tickValues;
+};
+
+export const getDomainAndRangeByChartType = (domain, range, chartType) => {
+  let { step, labelStep, min, max } = range || {};
+
+  if (!min) {
+    min = 0;
+  }
+
+  if (!max || max < 0) {
+    max = range.min + 1;
+  }
+
+  if (!step) {
+    step = labelStep || 1;
+  }
+  if (!labelStep || (isNaN(labelStep) && step)) {
+    labelStep = step || 1;
+  }
+
+  range.max = max;
+
+  switch (chartType) {
+    // if chart is dot plot or line plot, we should ignore step and make sure that min & max are integer values
+    case 'dotPlot':
+    case 'linePlot': {
+      const intMin = Math.round(min);
+      const intMax = Math.round(max);
+
+      return {
+        domain: {
+          ...domain,
+          step: 1,
+          labelStep: 1,
+          min: 0,
+          max: 1,
+        },
+        range: {
+          ...range,
+          min: intMin,
+          max: intMin === intMax ? intMin + 1 : intMax,
+          labelStep,
+          step: 1,
+        },
+      };
+    }
+
+    default:
+      return {
+        domain: {
+          ...domain,
+          step: 1,
+          labelStep: 1,
+          min: 0,
+          max: 1,
+        },
+        range: {
+          ...range,
+          labelStep,
+          step,
+        },
+      };
+  }
+};
+
+export const getGridLinesAndAxisByChartType = (range, chartType) => {
+  switch (chartType) {
+    case 'lineDot':
+    case 'lineCross':
+      return {
+        verticalLines: undefined,
+        horizontalLines: getTickValues(range),
+        leftAxis: true,
+      };
+
+    case 'dotPlot':
+    case 'linePlot':
+      return {
+        verticalLines: [],
+        horizontalLines: [],
+        leftAxis: false,
+      };
+
+    default:
+      return {
+        verticalLines: [],
+        horizontalLines: getTickValues(range),
+        leftAxis: true,
+      };
+  }
+};
+
+export const getRotateAngle = (fontSize, height) => {
+  if (height >= fontSize * 2) {
+    return 25;
+  }
+
+  return 0;
+};
+
+export const getTopPadding = (barWidth) => {
+  if (barWidth < 30) {
+    return 50;
+  }
+
+  if (barWidth < 40) {
+    return 30;
+  }
+
+  if (barWidth < 60) {
+    return 15;
+  }
+
+  return 0;
+};
+
+// This function calculates the transformation scale for SVG and the icon's vertical distance from its category
+export const getScale = (width) => {
+  let scale, deltay;
+
+  if (width > 91) {
+    scale = 1.3;
+    deltay = -55;
+  } else if (width > 45) {
+    scale = 1.1;
+    deltay = -45;
+  } else if (width > 40) {
+    scale = 0.5 + (width - 34) * 0.02;
+    deltay = -25;
+  } else if (width > 30) {
+    scale = 0.5 + (width - 34) * 0.02;
+    deltay = -20;
+  } else {
+    scale = 0.5 * Math.pow(0.98, 34 - width); // 0.98 is the reduction factor. Adjust to control scaling.
+    deltay = -15;
+  }
+
+  return { scale, deltay };
+};
+
+export const getAdjustedX = (width, scaleValue) => {
+  const innerWidthOriginal = 57;
+  const effectiveInnerWidth = innerWidthOriginal * scaleValue;
+  return (width - effectiveInnerWidth) / 2;
+};

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/config-ui/alert-dialog.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+
+const AlertDialog = ({ text, title, onClose, onConfirm, open, onCloseText, onConfirmText, classes }) => (
+  <Dialog open={open} onClose={onClose}>
+    {title && <DialogTitle className={classes.heading}>{title}</DialogTitle>}
+    {text && (
+      <DialogContent>
+        <DialogContentText className={classes.subheading}>{text}</DialogContentText>
+      </DialogContent>
+    )}
+    <DialogActions>
+      {onClose && (
+        <Button onClick={onClose} color="primary">
+          {onCloseText}
+        </Button>
+      )}
+      {onConfirm && (
+        <Button autoFocus onClick={onConfirm} color="primary">
+          {onConfirmText}
+        </Button>
+      )}
+    </DialogActions>
+  </Dialog>
+);
+
+AlertDialog.defaultProps = {
+  onCloseText: 'CANCEL',
+  onConfirmText: 'OK',
+};
+
+AlertDialog.propTypes = {
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  title: PropTypes.string,
+  onClose: PropTypes.func,
+  onConfirm: PropTypes.func,
+  open: PropTypes.bool,
+  onConfirmText: PropTypes.string,
+  onCloseText: PropTypes.string,
+  classes: PropTypes.object,
+};
+
+const styles = () => ({
+  heading: {
+    '& h2': {
+      fontSize: 'max(1.25rem, 18px)',
+    },
+  },
+  subheading: {
+    fontSize: 'max(1rem, 14px)',
+  },
+});
+
+export default withStyles(styles)(AlertDialog);

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/config-ui/checkbox.jsx

@@ -0,0 +1,66 @@
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import MuiCheckbox from '@material-ui/core/Checkbox';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import grey from '@material-ui/core/colors/grey';
+
+const Checkbox = ({ mini, checked, onChange, value, label, classes, error }) => (
+  <FormControlLabel
+    className={classNames(classes.mini)}
+    classes={{
+      label: classNames(classes.label, { [classes.miniLabel]: mini }),
+    }}
+    control={
+      <MuiCheckbox
+        checked={checked}
+        onChange={onChange}
+        value={value}
+        className={classNames({ [classes.miniCheckbox]: mini, [classes.error]: error })}
+      />
+    }
+    label={label}
+  />
+);
+
+Checkbox.propTypes = {
+  mini: PropTypes.bool,
+  classes: PropTypes.object.isRequired,
+  checked: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string,
+  label: PropTypes.string.isRequired,
+};
+
+Checkbox.defaultProps = {
+  value: '',
+  mini: false,
+};
+
+export default withStyles((theme) => ({
+  label: {
+    fontSize: theme.typography.fontSize - 1,
+    transform: 'translate(-4%, 2%)',
+    color: 'rgba(0,0,0,1.0)',
+  },
+  miniCheckbox: {
+    margin: 0,
+    padding: 0,
+    width: theme.spacing.unit * 3,
+    height: theme.spacing.unit * 3,
+  },
+  miniLabel: {
+    marginLeft: theme.spacing.unit,
+    color: grey[700],
+    fontSize: theme.typography.fontSize - 3,
+  },
+  mini: {
+    margin: 0,
+    marginLeft: 0,
+    padding: 0,
+  },
+  error: {
+    color: theme.palette.error.main,
+  },
+}))(Checkbox);

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/config-ui/choice-configuration/feedback-menu.jsx

@@ -0,0 +1,90 @@
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import ActionFeedback from '@material-ui/icons/Feedback';
+import IconButton from '@material-ui/core/IconButton';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export class IconMenu extends React.Component {
+  static propTypes = {
+    opts: PropTypes.object,
+    onClick: PropTypes.func.isRequired,
+    iconButtonElement: PropTypes.any,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      anchorEl: undefined,
+      open: false,
+    };
+  }
+
+  handleClick = (event) => {
+    this.setState({ open: true, anchorEl: event.currentTarget });
+  };
+
+  handleRequestClose = () => {
+    this.setState({ open: false });
+  };
+
+  render() {
+    const { opts, onClick } = this.props;
+    const keys = Object.keys(opts);
+
+    const handleMenuClick = (key) => () => {
+      onClick(key);
+      this.handleRequestClose();
+    };
+
+    return (
+      <div>
+        <div onClick={this.handleClick}>{this.props.iconButtonElement}</div>
+        <Menu id="simple-menu" anchorEl={this.state.anchorEl} open={this.state.open} onClose={this.handleRequestClose}>
+          {keys.map((k, index) => (
+            <MenuItem key={index} onClick={handleMenuClick(k)}>
+              {opts[k]}
+            </MenuItem>
+          ))}
+        </Menu>
+      </div>
+    );
+  }
+}
+
+export default class FeedbackMenu extends React.Component {
+  static propTypes = {
+    value: PropTypes.object,
+    onChange: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+  };
+
+  static defaultProps = {
+    classes: {},
+  };
+
+  render() {
+    const { value, onChange, classes } = this.props;
+    const t = value && value.type;
+    const iconColor = t === 'custom' || t === 'default' ? 'primary' : 'disabled';
+    const tooltip = t === 'custom' ? 'Custom Feedback' : t === 'default' ? 'Default Feedback' : 'Feedback disabled';
+
+    const icon = (
+      <IconButton className={classes.icon} aria-label={tooltip}>
+        <ActionFeedback color={iconColor} />
+      </IconButton>
+    );
+
+    return (
+      <IconMenu
+        iconButtonElement={icon}
+        onClick={(key) => onChange(key)}
+        opts={{
+          none: 'No Feedback',
+          default: 'Default',
+          custom: 'Custom',
+        }}
+      />
+    );
+  }
+}