@pie-lib/charting 7.0.4-next.31 → 7.0.4-next.36

package/src/plot/common/plot.jsx

@@ -0,0 +1,358 @@
+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

@@ -0,0 +1,74 @@
+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

@@ -0,0 +1,98 @@
+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

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