@pie-lib/charting 7.0.4-next.3 → 7.0.4-next.30

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;

package/src/plot/dot.js

@@ -1,74 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Circle } from '@visx/shape';
-
-import { types } from '@pie-lib/plot';
-import { dataToXBand } from '../utils';
-import Plot from './common/plot';
-import { color } from '@pie-lib/render-ui';
-import { styled } from '@mui/material/styles';
-import { correct, incorrect } from '../common/styles';
-
-const StyledCircle = styled(Circle)(() => ({
-  fill: color.visualElementsColors.PLOT_FILL_COLOR,
-  '&.correct': correct('stroke'),
-  '&.incorrect': incorrect('stroke'),
-}));
-
-const CustomBarElement = (props) => {
-  const { index, pointDiameter, barX, barWidth, pointHeight, label, value, scale, dottedOverline } = props;
-
-  const r = pointDiameter / 2;
-  const cx = barX + (barWidth - pointDiameter) / 2 + r;
-  const cy = scale.y(index) - (pointHeight - pointDiameter) / 2 - r;
-  const EXTRA_PADDING = 2;
-
-  return dottedOverline ? (
-    <Circle
-      key={`point-${label}-${value}-${index}`}
-      cx={cx}
-      cy={cy}
-      r={r + EXTRA_PADDING}
-      strokeDasharray="4,4"
-      stroke={color.defaults.BORDER_GRAY}
-      fill="none"
-    />
-  ) : (
-    <StyledCircle key={`point-${label}-${value}-${index}`} 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,
-  scale: PropTypes.object,
-  dottedOverline: PropTypes.bool,
-};
-
-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/src/plot/line.js

@@ -1,98 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { LinePath } from '@visx/shape';
-import { Group } from '@visx/group';
-import { styled } from '@mui/material/styles';
-
-import { types } from '@pie-lib/plot';
-import { dataToXBand } from '../utils';
-import { color } from '@pie-lib/render-ui';
-import Plot from './common/plot';
-import { correct, incorrect } from '../common/styles';
-
-const StyledLinePath = styled(LinePath)(() => ({
-  stroke: color.visualElementsColors.PLOT_FILL_COLOR,
-  '&.correct': correct('stroke'),
-  '&.incorrect': incorrect('stroke'),
-}));
-
-const CustomBarElement = (props) => {
-  const { index, pointDiameter, barX, barWidth, pointHeight, label, value, scale, dottedOverline } = props;
-
-  const x = barX + (barWidth - pointDiameter) / 2;
-  const y = scale.y(index) - (pointHeight - pointDiameter) / 2;
-  const EXTRA_PADDING = 2;
-
-  return dottedOverline ? (
-    <rect
-      key={`point-${label}-${value}-${index}`}
-      x={x - EXTRA_PADDING}
-      y={y - pointDiameter - EXTRA_PADDING}
-      width={pointDiameter + EXTRA_PADDING * 2}
-      height={pointDiameter + EXTRA_PADDING * 2}
-      strokeDasharray="4,4"
-      stroke={color.defaults.BORDER_GRAY}
-      fill="none"
-    />
-  ) : (
-    <Group>
-      <StyledLinePath
-        data={[
-          { x, y },
-          { x: x + pointDiameter, y: y - pointDiameter },
-        ]}
-        key={`point-${label}-${value}-${index}-1`}
-        className={'line'}
-        x={(d) => d.x}
-        y={(d) => d.y}
-        strokeWidth={pointDiameter / 5}
-      />
-      <StyledLinePath
-        data={[
-          { x, y: y - pointDiameter },
-          { x: x + pointDiameter, y },
-        ]}
-        key={`point-${label}-${value}-${index}-2`}
-        x={(d) => d.x}
-        y={(d) => d.y}
-        strokeWidth={pointDiameter / 5}
-        className={'line'}
-      />
-    </Group>
-  );
-};
-
-CustomBarElement.propTypes = {
-  index: PropTypes.number,
-  pointDiameter: PropTypes.number,
-  barX: PropTypes.number,
-  barWidth: PropTypes.number,
-  pointHeight: PropTypes.number,
-  value: PropTypes.number,
-  label: PropTypes.string,
-  scale: PropTypes.object,
-  dottedOverline: PropTypes.bool,
-};
-
-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/src/tool-menu.jsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { color } from '@pie-lib/render-ui';
-
-import { styled } from '@mui/material/styles';
-import Button from '@mui/material/Button';
-import Translator from '@pie-lib/translator';
-
-const { translator } = Translator;
-
-const StyledMiniButton = styled(Button)(({ theme, selected, disabled }) => ({
-  color: color.text(),
-  border: `1px solid ${color.secondary()}`,
-  fontSize: theme.typography.fontSize,
-  ...(selected && {
-    backgroundColor: color.background(),
-    '& span': {
-      color: color.primaryDark(),
-    },
-  }),
-  ...(!selected &&
-    !disabled && {
-      '& span': {
-        color: color.primary(),
-      },
-      backgroundColor: color.background(),
-    }),
-  ...(disabled && {
-    '& span': {
-      color: color.primary(),
-    },
-    backgroundColor: color.disabled(),
-  }),
-}));
-
-export const MiniButton = (props) => {
-  const { disabled, selected, value, onClick } = props;
-
-  return (
-    <StyledMiniButton
-      size="small"
-      disabled={disabled}
-      selected={selected}
-      color={selected ? 'secondary' : 'default'}
-      value={value}
-      key={value}
-      variant="outlined"
-      onClick={onClick}
-    >
-      {value}
-    </StyledMiniButton>
-  );
-};
-MiniButton.propTypes = {
-  disabled: PropTypes.bool,
-  className: 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={className}>
-        {!disabled && (
-          <MiniButton value={translator.t('charting.addCategory', { lng: language })} onClick={addCategory} />
-        )}
-      </div>
-    );
-  }
-}
-
-export default ToolMenu;