@pie-lib/charting 7.1.0-beta.9 → 8.0.0-next.20261002100925

package/src/line/line-dot.js

@@ -1,111 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-
-import { types } from '@pie-lib/plot';
-import { color } from '@pie-lib/render-ui';
-import { dataToXBand } from '../utils';
-import RawLine from './common/line';
-import { CorrectnessIndicator, SmallCorrectPointIndicator } from '../common/correctness-indicators';
-
-const StyledHandle = styled('circle')(() => ({}));
-
-const StyledTransparentHandle = styled('circle')(() => ({
-  height: '20px',
-  fill: 'transparent', // keep it invisible
-  stroke: 'none',
-  pointerEvents: 'auto', // allow drag events
-}));
-
-const DraggableComponent = ({ scale, x, y, r, correctness, interactive, correctData, label, ...rest }) => {
-  const [isHovered, setIsHovered] = React.useState(false);
-  const allowRolloverEvent = !correctness && interactive;
-
-  return (
-    <g
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      onTouchStart={() => setIsHovered(true)}
-      onTouchEnd={() => setIsHovered(false)}
-    >
-      <StyledTransparentHandle
-        cx={scale.x(x)}
-        cy={scale.y(y)}
-        r={r * 3}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-        {...rest}
-      />
-      <StyledHandle
-        cx={scale.x(x)}
-        cy={scale.y(y)}
-        r={r}
-        correctness={correctness}
-        interactive={interactive}
-        {...rest}
-      />
-      {/* show correctness indicators */}
-      <CorrectnessIndicator scale={scale} x={x} y={y} r={r} correctness={correctness} interactive={interactive} />
-
-      {/* show correct point if answer was incorrect */}
-      <SmallCorrectPointIndicator
-        scale={scale}
-        x={x}
-        r={r}
-        correctness={correctness}
-        correctData={correctData}
-        label={label}
-      />
-
-      {/* show rollover rectangle */}
-      {isHovered && allowRolloverEvent && (
-        <rect
-          x={scale.x(x) - r * 2}
-          y={scale.y(y) - r * 2}
-          width={r * 4}
-          height={r * 4}
-          stroke={color.defaults.BORDER_GRAY}
-          strokeWidth="1"
-          fill="none"
-        />
-      )}
-    </g>
-  );
-};
-
-DraggableComponent.propTypes = {
-  scale: PropTypes.object,
-  x: PropTypes.number,
-  y: PropTypes.number,
-  r: PropTypes.number,
-  correctness: PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string,
-  }),
-  interactive: PropTypes.bool,
-  correctData: PropTypes.array,
-  label: PropTypes.string,
-};
-
-export class LineDot 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, 'lineDot');
-
-    return <RawLine {...props} xBand={xBand} CustomDraggableComponent={DraggableComponent} />;
-  }
-}
-
-export default () => ({
-  type: 'lineDot',
-  Component: LineDot,
-  name: 'Line Dot',
-});

package/src/mark-label.jsx

@@ -1,238 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
-import { styled } from '@mui/material/styles';
-import AutosizeInput from 'react-input-autosize';
-import PropTypes from 'prop-types';
-
-import { types } from '@pie-lib/plot';
-import { correct, disabled, incorrect } from './common/styles';
-import { color } from '@pie-lib/render-ui';
-import { renderMath } from '@pie-lib/math-rendering';
-
-const StyledContainer = styled('div')({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-});
-
-// eslint-disable-next-line no-unused-vars
-const StyledInput = styled('input')(({ theme }) => ({
-  float: 'right',
-  fontFamily: theme.typography.fontFamily,
-  fontSize: theme.typography.fontSize,
-  border: 'none',
-  '&.correct': correct('color'),
-  '&.incorrect': incorrect('color'),
-  '&.disabledMarkLabel': {
-    backgroundColor: 'transparent !important',
-  },
-  '&.error': { border: `2px solid ${theme.palette.error.main}` },
-}));
-
-const StyledMathInput = styled('div')(({ theme }) => ({
-  pointerEvents: 'auto',
-  textAlign: 'center',
-  fontSize: theme.typography.fontSize + 2,
-  fontFamily: theme.typography.fontFamily,
-  color: color.primaryDark(),
-  paddingTop: theme.typography.fontSize / 2,
-  '&.disabledMarkLabel': {
-    ...disabled('color'),
-    backgroundColor: 'transparent !important',
-  },
-  '&.error': {
-    border: `2px solid ${theme.palette.error.main}`,
-  },
-  '&.correct': {
-    ...correct('color'),
-  },
-  '&.incorrect': {
-    ...incorrect('color'),
-  },
-}));
-
-function isFractionFormat(label) {
-  const trimmedLabel = label?.trim() || '';
-  const fracRegex = new RegExp(/^[1-9]*[0-9]*\s?[1-9][0-9]*\/[1-9][0-9]*$/);
-  return fracRegex.test(trimmedLabel);
-}
-
-function getLabelMathFormat(label) {
-  const trimmedLabel = label?.trim() || '';
-  let fraction;
-  let mixedNr = '';
-  let improperFraction = trimmedLabel.split(' ');
-  if (improperFraction[1] && improperFraction[1].includes('/')) {
-    fraction = improperFraction[1].split('/') || '';
-  } else {
-    fraction = trimmedLabel?.split('/') || '';
-  }
-
-  let formattedLLabel;
-  if (isFractionFormat(label)) {
-    if (improperFraction[0] && improperFraction[1]) {
-      mixedNr = improperFraction[0];
-    }
-    formattedLLabel = `\\(${mixedNr}\\frac{${fraction[0]}}{${fraction[1]}}\\)`;
-    return formattedLLabel;
-  }
-  return undefined;
-}
-
-export const MarkLabel = (props) => {
-  // eslint-disable-next-line no-unused-vars
-  const [input, setInput] = useState(null);
-  const _ref = useCallback((node) => setInput(node), null);
-
-  const {
-    mark = {},
-    disabled,
-    inputRef: externalInputRef,
-    barWidth,
-    rotate,
-    correctness,
-    autoFocus,
-    error,
-    isHiddenLabel,
-    limitCharacters,
-    correctnessIndicator,
-  } = props;
-
-  const [label, setLabel] = useState(mark.label);
-  const [mathLabel, setMathLabel] = useState(getLabelMathFormat(mark.label));
-  const [isEditing, setIsEditing] = useState(false);
-  const rootRef = useRef(null);
-
-  const onChange = (e) => {
-    if (limitCharacters && e.target.value && e.target.value.length > 20) {
-      return;
-    }
-
-    setLabel(e.target.value);
-  };
-
-  const isMathRendering = () => {
-    return isEditing === false && mathLabel !== undefined;
-  };
-
-  const onChangeProp = (e) => {
-    setMathLabel(getLabelMathFormat(mark.label));
-    setIsEditing(false);
-    props.onChange(e.target.value);
-  };
-  let extraStyle = {};
-
-  if (rotate) {
-    extraStyle = {
-      width: 'unset',
-      textAlign: 'left',
-    };
-  }
-
-  // useState only sets the value once, to synch props to state need useEffect
-  useEffect(() => {
-    setLabel(mark.label);
-  }, [mark.label]);
-
-  useEffect(() => {
-    const el = rootRef.current;
-
-    if (el && mathLabel) {
-      el.innerHTML = mathLabel;
-      renderMath(el);
-    }
-  }, [label, mathLabel]);
-
-  return (
-    <StyledContainer>
-      {correctnessIndicator}
-      {isMathRendering() ? (
-        <StyledMathInput
-          ref={(r) => {
-            rootRef.current = r;
-            if (typeof externalInputRef === 'function') {
-              externalInputRef(r);
-            }
-          }}
-          className={classNames({
-            disabledMarkLabel: disabled,
-            error: error,
-            correct: mark.editable && correctness?.label === 'correct',
-            incorrect: mark.editable && correctness?.label === 'incorrect',
-          })}
-          onClick={() => setIsEditing(true)}
-          style={{
-            minWidth: barWidth,
-            position: 'fixed',
-            transformOrigin: 'left',
-            transform: `rotate(${rotate}deg)`,
-            visibility: isHiddenLabel ? 'hidden' : 'unset',
-            marginTop: correctnessIndicator ? '24px' : '0',
-          }}
-        ></StyledMathInput>
-      ) : (
-        <AutosizeInput
-          inputRef={(r) => {
-            _ref(r);
-            if (typeof externalInputRef === 'function') {
-              externalInputRef(r);
-            }
-          }}
-          name="mark-label-input"
-          autoFocus={isEditing || autoFocus}
-          disabled={disabled}
-          inputClassName={classNames(
-            correctness && mark.editable ? correctness.label : null,
-            disabled && 'disabledMarkLabel',
-            error && 'error',
-          )}
-          inputStyle={{
-            minWidth: barWidth,
-            textAlign: 'center',
-            background: 'transparent',
-            boxSizing: 'border-box',
-            paddingLeft: 0,
-            paddingRight: 0,
-            border: 'none',
-            ...extraStyle,
-          }}
-          value={label}
-          style={{
-            position: 'fixed',
-            pointerEvents: 'auto',
-            top: 0,
-            left: 0,
-            minWidth: barWidth,
-            transformOrigin: 'left',
-            transform: `rotate(${rotate}deg)`,
-            visibility: isHiddenLabel ? 'hidden' : 'unset',
-            marginTop: correctnessIndicator ? '24px' : '0',
-          }}
-          onChange={onChange}
-          onBlur={onChangeProp}
-        />
-      )}
-    </StyledContainer>
-  );
-};
-
-MarkLabel.propTypes = {
-  autoFocus: PropTypes.bool,
-  disabled: PropTypes.bool,
-  error: PropTypes.any,
-  onChange: PropTypes.func,
-  graphProps: types.GraphPropsType,
-  inputRef: PropTypes.func,
-  mark: PropTypes.object,
-  barWidth: PropTypes.number,
-  rotate: PropTypes.number,
-  correctness: PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string,
-  }),
-  isHiddenLabel: PropTypes.bool,
-  limitCharacters: PropTypes.bool,
-  correctnessIndicator: PropTypes.node,
-};
-
-export default MarkLabel;

package/src/plot/common/plot.jsx

@@ -1,358 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Check from '@mui/icons-material/Check';
-import { styled } from '@mui/material/styles';
-import { Group } from '@visx/group';
-import debug from 'debug';
-
-import { types } from '@pie-lib/plot';
-import DraggableHandle, { DragHandle } from '../../common/drag-handle';
-import { color } from '@pie-lib/render-ui';
-import { bandKey } from '../../utils';
-import { correct, incorrect } from '../../common/styles';
-
-const log = debug('pie-lib:chart:bars');
-const ICON_SIZE = 16; // 10px icon + 2px padding on all sides + 1px border
-
-export class RawPlot extends React.Component {
-  static propTypes = {
-    onChangeCategory: PropTypes.func,
-    value: PropTypes.number,
-    label: PropTypes.string,
-    xBand: PropTypes.func,
-    index: PropTypes.number.isRequired,
-    graphProps: types.GraphPropsType.isRequired,
-    CustomBarElement: PropTypes.func,
-    interactive: PropTypes.bool,
-    correctness: PropTypes.shape({
-      value: PropTypes.string,
-      label: PropTypes.string,
-    }),
-    defineChart: PropTypes.bool,
-    correctData: PropTypes.arrayOf(
-      PropTypes.shape({
-        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        label: PropTypes.string,
-      }),
-    ),
-    className: 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);
-  };
-
-  renderCorrectnessIcon = (barX, barWidth, correctVal, correctness, scale, pointHeight, pointDiameter) => {
-    let iconY;
-
-    if (correctVal === 0) {
-      // if correct value is 0, position icon on the horizontal axis
-      iconY = scale.y(0) - ICON_SIZE / 2;
-    } else {
-      const shapeIndex = correctVal - 1; // the index of the shape representing the correct value
-      const shapeCenterY = scale.y(shapeIndex) - (pointHeight - pointDiameter) / 2 - pointDiameter / 2;
-      iconY = shapeCenterY - ICON_SIZE / 2; // center the icon
-    }
-
-    return (
-      <foreignObject x={barX + barWidth / 2 - ICON_SIZE / 2} y={iconY} width={ICON_SIZE} height={ICON_SIZE}>
-        <Check className="correctnessIcon correctIcon smallIcon" title={correctness.label} />
-      </foreignObject>
-    );
-  };
-
-  render() {
-    const {
-      graphProps,
-      value,
-      label,
-      xBand,
-      index,
-      CustomBarElement,
-      interactive,
-      correctness,
-      defineChart,
-      correctData,
-      className,
-    } = this.props;
-
-    const { scale, range, size } = graphProps;
-    const { max } = range || {};
-    const { dragValue, isHovered } = this.state;
-
-    const v = Number.isFinite(dragValue) ? dragValue : value;
-    const barWidth = xBand.bandwidth();
-    const barHeight = scale.y(range.max - v);
-    const barX = xBand(bandKey({ label }, index));
-
-    log('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);
-
-    const values = [];
-
-    for (let i = 0; i < v; i++) {
-      values.push(i);
-    }
-
-    const pointHeight = size.height / max;
-    const pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;
-    const Component = interactive ? DraggableHandle : DragHandle;
-    const allowRolloverEvent = interactive && !correctness;
-
-    return (
-      <React.Fragment>
-        <g
-          className={className}
-          onMouseEnter={this.handleMouseEnter}
-          onMouseLeave={this.handleMouseLeave}
-          onTouchStart={this.handleMouseEnter}
-          onTouchEnd={this.handleMouseLeave}
-        >
-          {isHovered && allowRolloverEvent && (
-            <rect
-              x={barX}
-              y={scale.y(v)}
-              width={barWidth}
-              height={values?.length ? pointHeight * values.length : 0}
-              stroke={color.defaults.BORDER_GRAY}
-              strokeWidth={'4px'}
-              fill={'transparent'}
-            />
-          )}
-          {values.map((index) =>
-            CustomBarElement({
-              index,
-              pointDiameter,
-              barX,
-              barWidth,
-              pointHeight,
-              label,
-              value,
-              scale,
-            }),
-          )}
-          {correctness &&
-            correctness.value === 'incorrect' &&
-            (() => {
-              const correctVal = parseFloat(correctData[index] && correctData[index].value);
-              if (isNaN(correctVal)) return null;
-              const selectedVal = v;
-
-              // special case: if correct value is 0, only show the icon on the axis
-              if (correctVal === 0) {
-                return this.renderCorrectnessIcon(
-                  barX,
-                  barWidth,
-                  correctVal,
-                  correctness,
-                  scale,
-                  pointHeight,
-                  pointDiameter,
-                );
-              }
-
-              if (selectedVal > correctVal) {
-                // selected is higher than correct: overlay the correct last segment
-                const overlayValues = [];
-                for (let i = 0; i < correctVal; i++) {
-                  overlayValues.push(i);
-                }
-                const lastIndexOfOverlay = overlayValues.length - 1;
-                const lastOverlayValue = overlayValues[lastIndexOfOverlay];
-                const barX = xBand(bandKey({ label }, index));
-                const barWidth = xBand.bandwidth();
-                const pointHeight = size.height / max;
-                const pointDiameter = (pointHeight > barWidth ? barWidth : pointHeight) * 0.8;
-                return (
-                  <>
-                    <CustomBarElement
-                      index={lastOverlayValue}
-                      pointDiameter={pointDiameter + 10} // increase point diameter for dotted line
-                      barX={barX}
-                      barWidth={barWidth}
-                      pointHeight={pointHeight}
-                      label={label}
-                      value={value}
-                      scale={scale}
-                      dottedOverline={true}
-                    />
-                    {this.renderCorrectnessIcon(
-                      barX,
-                      barWidth,
-                      correctVal,
-                      correctness,
-                      scale,
-                      pointHeight,
-                      pointDiameter,
-                    )}
-                  </>
-                );
-              }
-              // selected is lower than correct, render missing segment below the correct bar
-              const valuesToRender = [];
-              for (let i = selectedVal; i < correctVal; i++) {
-                valuesToRender.push(i);
-              }
-              return (
-                <>
-                  {valuesToRender.map((idx) =>
-                    CustomBarElement({
-                      index: idx,
-                      pointDiameter,
-                      barX,
-                      barWidth,
-                      pointHeight,
-                      label,
-                      value,
-                      scale,
-                      dottedOverline: true,
-                    }),
-                  )}
-                  {this.renderCorrectnessIcon(
-                    barX,
-                    barWidth,
-                    correctVal,
-                    correctness,
-                    scale,
-                    pointHeight,
-                    pointDiameter,
-                  )}
-                </>
-              );
-            })()}
-          <Component
-            x={barX}
-            y={v}
-            interactive={interactive}
-            width={barWidth}
-            onDrag={(v) => this.dragValue(value, v)}
-            onDragStop={this.dragStop}
-            graphProps={graphProps}
-            correctness={correctness}
-            isHovered={isHovered}
-            defineChart={defineChart}
-            color={color.primaryDark()}
-            isPlot
-          />
-        </g>
-      </React.Fragment>
-    );
-  }
-}
-
-const Bar = styled(RawPlot)(({ theme }) => ({
-  '& .dot': {
-    fill: color.visualElementsColors.PLOT_FILL_COLOR,
-    '&.correct': correct('stroke'),
-    '&.incorrect': incorrect('stroke'),
-  },
-  '& .dotColor': {
-    fill: color.visualElementsColors.PLOT_FILL_COLOR,
-    '&.correct': correct('fill'),
-    '&.incorrect': incorrect('fill'),
-  },
-  '& .line': {
-    stroke: color.visualElementsColors.PLOT_FILL_COLOR,
-    '&.correct': correct('stroke'),
-    '&.incorrect': incorrect('stroke'),
-  },
-  '& .correctIcon': {
-    backgroundColor: color.correct(),
-  },
-  '& .incorrectIcon': {
-    backgroundColor: color.incorrectWithIcon(),
-  },
-  '& .correctnessIcon': {
-    borderRadius: theme.spacing(2),
-    color: color.defaults.WHITE,
-    fontSize: '16px',
-    width: '16px',
-    height: '16px',
-    padding: '2px',
-    border: `1px solid ${color.defaults.WHITE}`,
-    stroke: 'initial',
-    boxSizing: 'unset', // to override the default border-box in IBX
-    display: 'block',
-  },
-  '& .smallIcon': {
-    fontSize: '10px',
-    width: '10px',
-    height: '10px',
-  },
-}));
-
-export class Plot extends React.Component {
-  static propTypes = {
-    data: PropTypes.array,
-    onChangeCategory: PropTypes.func,
-    xBand: PropTypes.func,
-    graphProps: types.GraphPropsType.isRequired,
-    defineChart: PropTypes.bool,
-    CustomBarElement: PropTypes.func,
-    correctData: PropTypes.arrayOf(
-      PropTypes.shape({
-        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        label: PropTypes.string,
-      }),
-    ),
-    className: PropTypes.string,
-  };
-
-  render() {
-    const { data, graphProps, xBand, CustomBarElement, onChangeCategory, defineChart, correctData } = this.props;
-
-    return (
-      <Group>
-        {(data || []).map((d, index) => (
-          <Bar
-            value={d.value}
-            label={d.label}
-            interactive={defineChart || d.interactive}
-            defineChart={defineChart}
-            xBand={xBand}
-            index={index}
-            key={`bar-${d.label}-${d.value}-${index}`}
-            onChangeCategory={(category) => onChangeCategory(index, category)}
-            graphProps={graphProps}
-            CustomBarElement={CustomBarElement}
-            correctness={d.correctness}
-            correctData={correctData}
-          />
-        ))}
-      </Group>
-    );
-  }
-}
-
-export default Plot;