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

package/src/chart-type.js

@@ -1,59 +0,0 @@
-import React from 'react';
-import { styled } from '@mui/material/styles';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import InputLabel from '@mui/material/InputLabel';
-import { Select } from '@mui/material';
-import PropTypes from 'prop-types';
-
-const StyledContainer = styled('div')(() => ({
-  width: '160px',
-}));
-
-const StyledFormControl = styled(FormControl)(() => ({
-  width: '160px',
-}));
-
-const StyledInputLabel = styled(InputLabel)(() => ({
-  backgroundColor: 'transparent',
-}));
-
-const ChartType = ({ onChange, value, availableChartTypes, chartTypeLabel }) => (
-  <StyledContainer>
-    <StyledFormControl variant={'outlined'}>
-      <StyledInputLabel id="type-helper-label">{chartTypeLabel}</StyledInputLabel>
-      <Select
-        labelId="type-helper-label"
-        id="type-helper-label-select"
-        name="chartType"
-        value={value}
-        onChange={onChange}
-        label={chartTypeLabel}
-        MenuProps={{ transitionDuration: { enter: 225, exit: 195 } }}
-      >
-        {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>
-    </StyledFormControl>
-  </StyledContainer>
-);
-
-ChartType.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.string.isRequired,
-  availableChartTypes: PropTypes.shape({
-    histogram: PropTypes.string,
-    bar: PropTypes.string,
-    lineDot: PropTypes.string,
-    lineCross: PropTypes.string,
-    dotPlot: PropTypes.string,
-    linePlot: PropTypes.string,
-  }),
-  chartTypeLabel: PropTypes.string,
-};
-
-export default ChartType;

package/src/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 };

package/src/chart.jsx

@@ -1,357 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import debug from 'debug';
-import { cloneDeep } from 'lodash-es';
-
-import { createGraphProps, Root } from '@pie-lib/plot';
-import { AlertDialog } from '@pie-lib/config-ui';
-import ChartGrid from './grid';
-import ChartAxes from './axes';
-import { dataToXBand, getDomainAndRangeByChartType, getGridLinesAndAxisByChartType, getTopPadding } from './utils';
-import chartTypes from './chart-types';
-import ActionsButton from './actions-button';
-import Translator from '@pie-lib/translator';
-
-const { translator } = Translator;
-
-const log = debug('pie-lib:charts:chart');
-
-const StyledChartContainer = styled('div')(() => ({
-  width: 'min-content',
-}));
-
-export class Chart extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      dialog: {
-        open: false,
-      },
-      actionsAnchorEl: null,
-    };
-    this.maskUid = this.generateMaskId();
-  }
-
-  static propTypes = {
-    className: PropTypes.string,
-    chartType: PropTypes.string.isRequired,
-    size: PropTypes.shape({
-      width: PropTypes.number,
-      height: PropTypes.number,
-    }),
-    domain: PropTypes.shape({
-      label: PropTypes.string,
-      min: PropTypes.number,
-      max: PropTypes.number,
-      axisLabel: PropTypes.string,
-    }),
-    data: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.number })),
-    range: PropTypes.shape({
-      label: PropTypes.string,
-      min: PropTypes.number,
-      max: PropTypes.number,
-      step: PropTypes.number,
-      labelStep: PropTypes.number,
-      axisLabel: PropTypes.string,
-    }),
-    charts: PropTypes.array,
-    labelsPlaceholders: PropTypes.object,
-    title: PropTypes.string,
-    titlePlaceholder: PropTypes.string,
-    onDataChange: PropTypes.func,
-    onChangeLabels: PropTypes.func,
-    onChangeTitle: PropTypes.func,
-    error: PropTypes.any,
-    addCategoryEnabled: PropTypes.bool,
-    showPixelGuides: PropTypes.bool,
-    categoryDefaultLabel: PropTypes.string,
-    categoryDefaults: PropTypes.object,
-    defineChart: PropTypes.bool,
-    theme: PropTypes.object,
-    chartingOptions: PropTypes.object,
-    changeInteractiveEnabled: PropTypes.bool,
-    changeEditableEnabled: PropTypes.bool,
-    language: PropTypes.string,
-    mathMlOptions: PropTypes.object,
-    labelsCharactersLimit: PropTypes.number,
-    correctData: PropTypes.arrayOf(
-      PropTypes.shape({
-        label: PropTypes.string,
-        value: PropTypes.number,
-      }),
-    ),
-  };
-
-  static defaultProps = {
-    size: {
-      width: 480,
-      height: 480,
-    },
-  };
-
-  state = {
-    charts: [
-      chartTypes.Bar(),
-      chartTypes.Histogram(),
-      chartTypes.LineDot(),
-      chartTypes.LineCross(),
-      chartTypes.DotPlot(),
-      chartTypes.LinePlot(),
-    ],
-    autoFocus: false,
-  };
-
-  generateMaskId() {
-    return 'chart-' + (Math.random() * 10000).toFixed();
-  }
-
-  handleAlertDialog = (open, callback) =>
-    this.setState(
-      {
-        dialog: { open },
-      },
-      callback,
-    );
-
-  getChart = () => {
-    const charts = this.props.charts || this.state.charts;
-    let { chartType } = this.props;
-    let ChartComponent = null;
-    let chart = null;
-
-    if (chartType) {
-      chart = charts && charts.find((chart) => chart.type === chartType);
-      ChartComponent = chart && chart.Component;
-    } else {
-      chart = charts && charts[0];
-      ChartComponent = chart && chart.Component;
-      chartType = chart && chart.type;
-    }
-
-    return {
-      type: chartType,
-      ChartComponent,
-    };
-  };
-
-  changeData = (data) => {
-    const { onDataChange } = this.props;
-
-    onDataChange(data);
-  };
-
-  changeCategory = (index, newCategory) => {
-    const integerIndex = parseInt(index, 10);
-
-    if (integerIndex >= 0) {
-      const { data, onDataChange } = this.props;
-      data[integerIndex] = {
-        ...data[integerIndex],
-        ...newCategory,
-      };
-
-      onDataChange(data);
-    }
-  };
-
-  addCategory = () => {
-    const { onDataChange, data, categoryDefaultLabel, defineChart, categoryDefaults, language } = this.props;
-
-    if ((data || []).length > 19) {
-      this.setState({
-        dialog: {
-          open: true,
-          title: translator.t('common:warning', { lng: language }),
-          text: translator.t('charting.reachedLimit_other', { count: 20, lng: language }),
-          onConfirm: () => this.handleAlertDialog(false),
-        },
-      });
-    } else {
-      this.setState({ autoFocus: true });
-      onDataChange([
-        ...data,
-        {
-          inDefineChart: defineChart,
-          label: categoryDefaultLabel || translator.t('charting.newLabel', { lng: language }),
-          value: 0,
-          deletable: true,
-          editable: categoryDefaults ? categoryDefaults?.editable : true,
-          interactive: categoryDefaults ? categoryDefaults?.interactive : true,
-        },
-      ]);
-    }
-  };
-
-  deleteCategory = (index) => {
-    const { data, onDataChange } = this.props;
-
-    if (typeof index !== 'number' || index < 0) {
-      return;
-    }
-
-    if (data && data.length > 0) {
-      onDataChange(data.filter((_, i) => i !== index));
-    }
-  };
-
-  getFilteredCategories = () => {
-    const { data, defineChart } = this.props;
-
-    return data
-      ? data.map((d) => ({
-          ...d,
-          deletable: defineChart || d.deletable,
-        }))
-      : [];
-  };
-
-  resetAutoFocus = () => {
-    this.setState({ autoFocus: false });
-  };
-
-  render() {
-    const {
-      domain = {},
-      range = {},
-      chartingOptions,
-      size,
-      title,
-      onChangeTitle,
-      onChangeLabels,
-      labelsPlaceholders,
-      titlePlaceholder,
-      addCategoryEnabled,
-      changeInteractiveEnabled,
-      changeEditableEnabled,
-      showPixelGuides,
-      error,
-      mathMlOptions = {},
-      language,
-      labelsCharactersLimit,
-      correctData,
-    } = this.props;
-    let { chartType } = this.props;
-
-    const { dialog } = this.state;
-    const defineChart = this.props.defineChart || false;
-
-    const { width, height } = size || {};
-    const labels = { left: range?.label || '', bottom: domain?.label || '' };
-
-    const { ChartComponent } = this.getChart();
-    const categories = this.getFilteredCategories();
-
-    const correctValues = getDomainAndRangeByChartType(domain, range, chartType);
-
-    const { verticalLines, horizontalLines, leftAxis } = getGridLinesAndAxisByChartType(correctValues.range, chartType);
-    const common = {
-      graphProps: createGraphProps(correctValues.domain, correctValues.range, size, () => this.rootNode),
-    };
-
-    log('[render] common:', common);
-
-    const maskSize = { x: -10, y: -75, width: width + 20, height: height + 130 };
-    const { scale } = common.graphProps;
-    const xBand = dataToXBand(scale.x, categories, width, chartType);
-
-    const bandWidth = xBand.bandwidth();
-    // for chartType "line", bandWidth will be 0, so we have to calculate it
-    const barWidth = bandWidth || scale.x(correctValues.domain.max) / categories.length;
-    const increaseHeight = defineChart ? 160 : 60;
-
-    // if there are many categories, we have to rotate their names in order to fit
-    // and we have to add extra value on top of some items
-    const top = getTopPadding(barWidth);
-    const rootCommon = cloneDeep(common);
-    rootCommon.graphProps.size.height += top + increaseHeight;
-
-    // for plot evaluations we need extra space because we render correctness icon below x axis
-    const isPlotEvaluation = (chartType === 'dotPlot' || chartType === 'linePlot') && correctData?.length;
-    const needsExtraHeight = isPlotEvaluation && labels.bottom;
-
-    if (needsExtraHeight) {
-      rootCommon.graphProps.size.height += 25;
-    }
-
-    return (
-      <StyledChartContainer>
-        <Root
-          title={title}
-          onChangeTitle={onChangeTitle}
-          disabledTitle={!defineChart}
-          showTitle={true}
-          showLabels={true}
-          labels={labels}
-          onChangeLabels={onChangeLabels}
-          labelsPlaceholders={labelsPlaceholders}
-          titlePlaceholder={titlePlaceholder}
-          defineChart={defineChart}
-          disabledLabels={!defineChart}
-          isChart={true}
-          showPixelGuides={showPixelGuides}
-          rootRef={(r) => (this.rootNode = r)}
-          mathMlOptions={mathMlOptions}
-          labelsCharactersLimit={labelsCharactersLimit}
-          {...rootCommon}
-        >
-          <ChartGrid {...common} xBand={xBand} rowTickValues={horizontalLines} columnTickValues={verticalLines} />
-          <ChartAxes
-            autoFocus={this.state.autoFocus}
-            onAutoFocusUsed={this.resetAutoFocus}
-            {...common}
-            defineChart={defineChart}
-            categories={categories}
-            xBand={xBand}
-            leftAxis={leftAxis}
-            onChange={this.changeData}
-            onChangeCategory={this.changeCategory}
-            chartingOptions={chartingOptions}
-            changeInteractiveEnabled={changeInteractiveEnabled}
-            changeEditableEnabled={changeEditableEnabled}
-            top={top}
-            error={error}
-            showCorrectness={chartType === 'linePlot' || chartType === 'dotPlot'}
-          />
-          {addCategoryEnabled ? (
-            <foreignObject x={width} y={height - 16} width={width} height={height}>
-              <div xmlns="http://www.w3.org/1999/xhtml" style={{ display: 'flex', justifyContent: 'flex-start' }}>
-                <ActionsButton
-                  categories={categories}
-                  addCategory={this.addCategory}
-                  deleteCategory={this.deleteCategory}
-                  language={language}
-                />
-              </div>
-            </foreignObject>
-          ) : null}
-          <mask id={`${this.maskUid}`}>
-            <rect {...maskSize} fill="white" />
-          </mask>
-          <g id="marks" mask={`url('#${this.maskUid}')`}>
-            {ChartComponent && (
-              <ChartComponent
-                {...common}
-                data={categories}
-                height={rootCommon.graphProps.size.height}
-                defineChart={defineChart}
-                onChange={this.changeData}
-                onChangeCategory={this.changeCategory}
-                correctData={correctData}
-              />
-            )}
-          </g>
-        </Root>
-        <AlertDialog
-          open={dialog.open}
-          title={dialog.title}
-          text={dialog.text}
-          onClose={dialog.onClose}
-          onConfirm={dialog.onConfirm}
-        />
-      </StyledChartContainer>
-    );
-  }
-}
-
-export default Chart;

package/src/common/correctness-indicators.jsx

@@ -1,128 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import Check from '@mui/icons-material/Check';
-import Close from '@mui/icons-material/Close';
-import { color as enumColor } from '@pie-lib/render-ui';
-
-const StyledCorrectIcon = styled(Check)(({ theme }) => ({
-  borderRadius: theme.spacing(2),
-  color: enumColor.defaults.WHITE,
-  fontSize: '16px',
-  width: '16px',
-  height: '16px',
-  padding: '2px',
-  border: `1px solid ${enumColor.defaults.WHITE}`,
-  stroke: 'initial',
-  boxSizing: 'unset', // to override the default border-box in IBX
-  backgroundColor: enumColor.correct(),
-  display: 'block',
-  '&.small': {
-    fontSize: '10px',
-    width: '10px',
-    height: '10px',
-  },
-}));
-
-const StyledIncorrectIcon = styled(Close)(({ theme }) => ({
-  borderRadius: theme.spacing(2),
-  color: enumColor.defaults.WHITE,
-  fontSize: '16px',
-  width: '16px',
-  height: '16px',
-  padding: '2px',
-  border: `1px solid ${enumColor.defaults.WHITE}`,
-  stroke: 'initial',
-  boxSizing: 'unset', // to override the default border-box in IBX
-  backgroundColor: enumColor.incorrectWithIcon(),
-  display: 'block',
-  '&.small': {
-    fontSize: '10px',
-    width: '10px',
-    height: '10px',
-  },
-}));
-
-export const CorrectnessIndicator = ({ scale, x, y, correctness, interactive }) => {
-  if (!correctness || !interactive) return null;
-  const cx = scale ? scale.x(x) : x;
-  const cy = scale ? scale.y(y) : y;
-  const isCorrect = correctness.value === 'correct';
-
-  // the icon is 16px + 2px padding + 1px border, so total size is 22px
-  return (
-    <foreignObject x={cx - 11} y={cy - 11} width={22} height={22}>
-      {isCorrect ? <StyledCorrectIcon title={correctness.label} /> : <StyledIncorrectIcon title={correctness.label} />}
-    </foreignObject>
-  );
-};
-
-export const SmallCorrectPointIndicator = ({ scale, x, correctness, correctData, label }) => {
-  if (correctness && correctness.value === 'incorrect') {
-    const correctVal = parseFloat(correctData.find((d) => d.label === label)?.value);
-    if (isNaN(correctVal)) return null;
-    const correctPxY = scale.y(correctVal);
-    const yToRender = correctPxY - 7.5;
-    const xToRender = scale.x(x) - 7.5;
-
-    // small circle has 10px font + 2px padding + 1px border, so total size is 15px
-    return (
-      <foreignObject x={xToRender} y={yToRender} width={15} height={15}>
-        <StyledCorrectIcon className="small" title={correctness.label} />
-      </foreignObject>
-    );
-  }
-
-  return null;
-};
-
-export const TickCorrectnessIndicator = ({ correctness, interactive }) => {
-  if (!correctness || !interactive) return null;
-
-  return correctness.value === 'correct' ? (
-    <StyledCorrectIcon title={correctness.label} />
-  ) : (
-    <StyledIncorrectIcon title={correctness.label} />
-  );
-};
-
-CorrectnessIndicator.propTypes = {
-  scale: PropTypes.shape({
-    x: PropTypes.func,
-    y: PropTypes.func,
-  }),
-  x: PropTypes.number.isRequired,
-  y: PropTypes.number.isRequired,
-  correctness: PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string,
-  }),
-  interactive: PropTypes.bool,
-};
-
-SmallCorrectPointIndicator.propTypes = {
-  scale: PropTypes.shape({
-    x: PropTypes.func,
-    y: PropTypes.func,
-  }).isRequired,
-  x: PropTypes.number.isRequired,
-  correctness: PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string,
-  }),
-  correctData: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string,
-      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    }),
-  ),
-  label: PropTypes.string,
-};
-
-TickCorrectnessIndicator.propTypes = {
-  correctness: PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string,
-  }),
-  interactive: PropTypes.bool,
-};

package/src/common/drag-handle.jsx

@@ -1,125 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import Check from '@mui/icons-material/Check';
-import Close from '@mui/icons-material/Close';
-
-import { gridDraggable, types, utils } from '@pie-lib/plot';
-import { color as enumColor } from '@pie-lib/render-ui';
-import { getScale } from '../utils';
-import DragIcon from './drag-icon';
-
-const StyledSvg = styled('svg')(() => ({
-  overflow: 'visible !important',
-}));
-
-const StyledEllipse = styled('ellipse')(() => ({
-  fill: 'transparent',
-  clipPath: 'polygon(50% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 0%)',
-}));
-
-const StyledCorrectIcon = styled(Check)(() => ({
-  backgroundColor: enumColor.correct(),
-  borderRadius: '16px', // equivalent to theme.spacing(2) for most themes
-  color: enumColor.defaults.WHITE,
-  fontSize: '16px',
-  padding: '2px',
-  border: `4px solid ${enumColor.defaults.WHITE}`,
-  width: '16px',
-  height: '16px',
-  boxSizing: 'unset', // to override the default border-box in IBX
-}));
-
-const StyledIncorrectIcon = styled(Close)(() => ({
-  backgroundColor: enumColor.incorrectWithIcon(),
-  borderRadius: '16px', // equivalent to theme.spacing(2) for most themes
-  color: enumColor.defaults.WHITE,
-  fontSize: '16px',
-  padding: '2px',
-  border: `4px solid ${enumColor.defaults.WHITE}`,
-  width: '16px',
-  height: '16px',
-  boxSizing: 'unset', // to override the default border-box in IBX
-}));
-
-const RawDragHandle = ({ x, y, width, graphProps, interactive, isHovered, correctness, isPlot, ...rest }) => {
-  const { scale } = graphProps;
-  const scaleValue = getScale(width)?.scale;
-
-  return (
-    <StyledSvg x={x} y={scale.y(y) - 10} width={width} overflow="visible">
-      {isHovered && !correctness && interactive && (
-        <DragIcon width={width} scaleValue={scaleValue} color={enumColor.defaults.BORDER_GRAY} />
-      )}
-      {interactive && !correctness && (
-        <StyledEllipse
-          cx={width / 2}
-          cy={10}
-          rx={width / 2}
-          // the drag icon has a 22px fixed r value, so the ry value is 3 times that in order to cover all the area
-          ry={66}
-          {...rest}
-        />
-      )}
-
-      <defs>
-        <filter id="bottomShadow" x="0" y="0" width="140%" height="140%">
-          <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
-          <feOffset dx="0" dy="5" result="offsetblur" />
-          <feFlood floodColor="#00000033" />
-          <feComposite in2="offsetblur" operator="in" />
-          <feMerge>
-            <feMergeNode />
-            <feMergeNode in="SourceGraphic" />
-          </feMerge>
-        </filter>
-      </defs>
-
-      {correctness && interactive && !isPlot && (
-        <foreignObject x={width / 2 - 14} y={0} width={40} height={40}>
-          {correctness.value === 'correct' ? (
-            <StyledCorrectIcon title={correctness.label} />
-          ) : (
-            <StyledIncorrectIcon title={correctness.label} />
-          )}
-        </foreignObject>
-      )}
-    </StyledSvg>
-  );
-};
-
-RawDragHandle.propTypes = {
-  x: PropTypes.number.isRequired,
-  y: PropTypes.number.isRequired,
-  width: PropTypes.number,
-  graphProps: types.GraphPropsType.isRequired,
-  interactive: PropTypes.bool,
-  isHovered: PropTypes.bool,
-  correctness: PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string,
-  }),
-  isPlot: PropTypes.bool,
-};
-
-export const DragHandle = RawDragHandle;
-
-export const D = gridDraggable({
-  axis: 'y',
-  fromDelta: (props, delta) => {
-    //TODO: should be in grid-draggable, if axis is y delta.x should always be 0.
-    delta.x = 0;
-    const newPoint = utils.point(props).add(utils.point(delta));
-
-    return newPoint.y;
-  },
-  bounds: (props, { domain, range }) => {
-    const area = { left: 0, top: props.y, bottom: props.y, right: 0 };
-    return utils.bounds(area, domain, range);
-  },
-  anchorPoint: (props) => {
-    return { x: props.x, y: props.y };
-  },
-})(DragHandle);
-
-export default D;