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

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;

package/src/utils.js

@@ -1,201 +0,0 @@
-import { scaleBand, scalePoint } from '@visx/scale';
-import { utils } from '@pie-lib/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) => {
-  const chartWidth = width || 400; // fallback
-  const domain = data && data.length ? data.map(bandKey) : ['default'];
-
-  switch (type) {
-    case 'bar':
-    case 'dotPlot':
-    case 'linePlot':
-      return scaleBand({
-        range: [0, chartWidth],
-        domain,
-        padding: 0.2,
-      });
-
-    case 'histogram':
-      return scaleBand({
-        range: [0, chartWidth],
-        domain,
-        padding: 0,
-      });
-
-    case 'lineCross':
-    case 'lineDot':
-      return scalePoint({
-        domain,
-        range: [0, chartWidth],
-      });
-
-    default:
-      return scaleBand({
-        range: [0, chartWidth],
-        domain,
-        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;
-};