@pie-lib/plot 4.0.4-next.3 → 4.0.4-next.31

package/src/root.jsx

@@ -1,485 +0,0 @@
-import React from 'react';
-import { styled } from '@mui/material/styles';
-import PropTypes from 'prop-types';
-import { pointer, select } from 'd3-selection';
-
-import { color, Readable } from '@pie-lib/render-ui';
-import EditableHtml from '@pie-lib/editable-html-tip-tap';
-import { ChildrenType, GraphPropsType } from './types';
-import Label from './label';
-import { extractTextFromHTML, isEmptyObject, isEmptyString } from './utils';
-
-const centerPlaceholder = {
-  '& .ProseMirror p.is-editor-empty::before, & .ProseMirror div.is-editor-empty::before': {
-    left: 0,
-    right: 0,
-    width: '100%',
-    textAlign: 'center',
-  },
-};
-
-const StyledRoot = styled('div')(({ theme }) => ({
-  border: `solid 1px ${color.primaryLight()}`,
-  color: color.defaults.TEXT,
-  backgroundColor: theme.palette.common.white,
-  touchAction: 'none',
-  position: 'relative',
-  boxSizing: 'unset', // to override the default border-box in IBX that breaks the component width layout
-}));
-
-const Wrapper = styled('div')({
-  display: 'flex',
-  position: 'relative',
-});
-
-const DefineChartSvg = styled('svg')({
-  paddingLeft: '50px',
-  overflow: 'visible',
-  boxSizing: 'content-box',
-});
-
-const ChartSvg = styled('svg')({
-  overflow: 'visible',
-  boxSizing: 'content-box',
-});
-
-const GraphBox = styled('g')({
-  cursor: 'pointer',
-  userSelect: 'none',
-});
-
-const GraphTitle = styled('div')(({ theme }) => ({
-  color: color.defaults.TEXT,
-  fontSize: theme.typography.fontSize + 2,
-  padding: `${theme.spacing(1.5)} ${theme.spacing(0.5)} 0`,
-  textAlign: 'center',
-  '&.disabled': {
-    pointerEvents: 'none',
-  },
-  '&.rightMargin': {
-    marginRight: '74px',
-  },
-  '& p': {
-    margin: 0,
-  },
-  ...centerPlaceholder,
-}));
-
-const ChartTitle = styled('div')(({ theme }) => ({
-  color: color.defaults.TEXT,
-  fontSize: theme.typography.fontSize + 4,
-  padding: `${theme.spacing(1.5)} ${theme.spacing(0.5)} 0`,
-  textAlign: 'center',
-  '&.disabled': {
-    pointerEvents: 'none',
-  },
-  '&.rightMargin': {
-    marginRight: '74px',
-  },
-  '& p': {
-    margin: 0,
-  },
-  ...centerPlaceholder,
-}));
-
-const TopPixelGuides = styled('div')({
-  display: 'flex',
-  paddingTop: '6px',
-});
-
-const TopPixelIndicator = styled('div')({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  width: '100px',
-  pointerEvents: 'none',
-  userSelect: 'none',
-});
-
-const SidePixelGuides = styled('div')({
-  width: '70px',
-  display: 'flex',
-  flexDirection: 'column',
-  marginRight: '6px',
-});
-
-const SidePixelIndicator = styled('div')({
-  textAlign: 'right',
-  height: '20px',
-  pointerEvents: 'none',
-  userSelect: 'none',
-  '&:not(:last-child)': {
-    marginBottom: '80px',
-  },
-});
-
-export class Root extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      titleHeight: 0,
-    };
-    this.resizeObserver = null;
-  }
-
-  static propTypes = {
-    title: PropTypes.string,
-    children: ChildrenType,
-    defineChart: PropTypes.bool,
-    disabledLabels: PropTypes.bool,
-    disabledTitle: PropTypes.bool,
-    graphProps: GraphPropsType.isRequired,
-    isChart: PropTypes.bool,
-    labels: PropTypes.object,
-    labelsPlaceholders: PropTypes.object,
-    onChangeTitle: PropTypes.func,
-    onMouseMove: PropTypes.func,
-    showLabels: PropTypes.bool,
-    showTitle: PropTypes.bool,
-    showPixelGuides: PropTypes.bool,
-    rootRef: PropTypes.func,
-    onChangeLabels: PropTypes.func,
-    titlePlaceholder: PropTypes.string,
-    mathMlOptions: PropTypes.object,
-    labelsCharactersLimit: PropTypes.number,
-  };
-
-  mouseMove = (g, event) => {
-    const { graphProps, onMouseMove } = this.props;
-
-    if (!onMouseMove) {
-      return;
-    }
-
-    const { scale, snap } = graphProps;
-    const coords = pointer(event, g.node());
-    const x = scale.x.invert(coords[0]);
-    const y = scale.y.invert(coords[1]);
-
-    const snapped = {
-      x: snap.x(x),
-      y: snap.y(y),
-    };
-
-    onMouseMove(snapped);
-  };
-
-  componentDidMount() {
-    const g = select(this.g);
-    g.on('mousemove', this.mouseMove.bind(this, g));
-    this.measureTitleHeight();
-    this.setupVisibilityObserver();
-  }
-
-  componentWillUnmount() {
-    const g = select(this.g);
-    g.on('mousemove', null);
-    this.cleanupVisibilityObserver();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.title !== this.props.title) {
-      this.measureTitleHeight();
-    }
-  }
-
-  onChangeLabel = (newValue, side) => {
-    const { labels, onChangeLabels, isChart } = this.props;
-
-    if (!onChangeLabels) {
-      return;
-    }
-
-    if (isChart) {
-      if (side === 'left') {
-        onChangeLabels('range', newValue);
-      } else {
-        onChangeLabels('domain', newValue);
-      }
-
-      return;
-    }
-
-    onChangeLabels({
-      ...labels,
-      [side]: newValue,
-    });
-  };
-
-  measureTitleHeight = () => {
-    const titleElement = this.titleRef;
-    if (titleElement) {
-      const titleHeight = titleElement.clientHeight;
-      this.setState({ titleHeight, prevTitle: this.props.title });
-
-      if (!this.resizeObserver && typeof ResizeObserver !== 'undefined') {
-        this.setupVisibilityObserver();
-      }
-    }
-  };
-
-  handleKeyDown = () => {
-    setTimeout(() => {
-      this.measureTitleHeight();
-    }, 0);
-  };
-
-  // handle edge case where chart is hidden with display:none and then shown with display:block
-  setupVisibilityObserver = () => {
-    if (typeof ResizeObserver !== 'undefined' && this.titleRef) {
-      this.resizeObserver = new ResizeObserver((entries) => {
-        for (let entry of entries) {
-          const { width, height } = entry.contentRect;
-          // trigger if element becomes visible and we haven't measured this height yet
-          if (width > 0 && height > 0) {
-            setTimeout(() => {
-              this.measureTitleHeight();
-            }, 10);
-            break;
-          }
-        }
-      });
-
-      this.resizeObserver.observe(this.titleRef);
-    }
-  };
-
-  cleanupVisibilityObserver = () => {
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = null;
-    }
-  };
-
-  render() {
-    const {
-      disabledTitle,
-      disabledLabels,
-      labels,
-      labelsPlaceholders,
-      titlePlaceholder,
-      graphProps,
-      children,
-      defineChart,
-      onChangeTitle,
-      isChart,
-      showLabels,
-      showPixelGuides,
-      showTitle,
-      title,
-      rootRef,
-      mathMlOptions = {},
-      labelsCharactersLimit,
-    } = this.props;
-    const {
-      size: { width = 500, height = 500 },
-      domain,
-      range,
-    } = graphProps;
-
-    const topPadding = 40;
-    const leftPadding = isEmptyString(extractTextFromHTML(labels?.left)) && isEmptyObject(labelsPlaceholders) ? 48 : 70;
-    const rightPadding =
-      isEmptyString(extractTextFromHTML(labels?.right)) && isEmptyObject(labelsPlaceholders) ? 48 : 70;
-    const finalWidth = width + leftPadding + rightPadding + (domain.padding || 0) * 2;
-    const finalHeight = height + topPadding * 2 + (range.padding || 0) * 2;
-
-    const activeTitlePlugins = [
-      'bold',
-      'italic',
-      'underline',
-      'superscript',
-      'subscript',
-      'strikethrough',
-      'math',
-      // 'languageCharacters'
-    ];
-
-    const actualHeight = defineChart && showPixelGuides ? height - 160 : height;
-    const nbOfVerticalLines = parseInt(width / 100);
-    const nbOfHorizontalLines = parseInt(actualHeight / 100);
-    const sideGridlinesPadding = parseInt(actualHeight % 100);
-    const { titleHeight } = this.state;
-
-    return (
-      <StyledRoot>
-        {showPixelGuides && (
-          <TopPixelGuides style={{ marginLeft: isChart ? 80 : showLabels ? 30 : 10 }}>
-            {[...Array(nbOfVerticalLines + 1).keys()].map((value) => (
-              <Readable false key={`top-guide-${value}`}>
-                <TopPixelIndicator>
-                  <div>{value * 100}px</div>
-                  <div>|</div>
-                </TopPixelIndicator>
-              </Readable>
-            ))}
-          </TopPixelGuides>
-        )}
-        {showTitle &&
-          (disabledTitle ? (
-            <div
-              ref={(r) => (this.titleRef = r)}
-              style={{
-                ...(isChart && { width: finalWidth }),
-                ...(isEmptyString(extractTextFromHTML(title)) && { display: 'none' }),
-              }}
-            >
-              {isChart ? (
-                <ChartTitle className="disabled" dangerouslySetInnerHTML={{ __html: title || '' }} />
-              ) : (
-                <GraphTitle className="disabled" dangerouslySetInnerHTML={{ __html: title || '' }} />
-              )}
-            </div>
-          ) : (
-            <div ref={(r) => (this.titleRef = r)}>
-              {isChart ? (
-                <ChartTitle className={showPixelGuides ? 'rightMargin' : ''}>
-                  <EditableHtml
-                    {...(isChart && {
-                      width: finalWidth,
-                    })}
-                    markup={title || ''}
-                    onChange={onChangeTitle}
-                    placeholder={
-                      (defineChart && titlePlaceholder) ||
-                      (!disabledTitle && 'Click here to add a title for this graph')
-                    }
-                    toolbarOpts={{ noPadding: true, noBorder: true }}
-                    activePlugins={activeTitlePlugins}
-                    disableScrollbar
-                    onKeyDown={this.handleKeyDown}
-                  />
-                </ChartTitle>
-              ) : (
-                <GraphTitle className={showPixelGuides ? 'rightMargin' : ''}>
-                  <EditableHtml
-                    {...(isChart && {
-                      width: finalWidth,
-                    })}
-                    markup={title || ''}
-                    onChange={onChangeTitle}
-                    placeholder={
-                      (defineChart && titlePlaceholder) ||
-                      (!disabledTitle && 'Click here to add a title for this graph')
-                    }
-                    toolbarOpts={{ noPadding: true, noBorder: true }}
-                    activePlugins={activeTitlePlugins}
-                    disableScrollbar
-                    onKeyDown={this.handleKeyDown}
-                  />
-                </GraphTitle>
-              )}
-            </div>
-          ))}
-        {showLabels && !isChart && (
-          <Label
-            side="top"
-            text={labels.top}
-            disabledLabel={disabledLabels}
-            placeholder={labelsPlaceholders?.top}
-            graphHeight={finalHeight}
-            graphWidth={finalWidth}
-            onChange={(value) => this.onChangeLabel(value, 'top')}
-            mathMlOptions={mathMlOptions}
-            preventNewLines={true}
-            charactersLimit={labelsCharactersLimit}
-          />
-        )}
-        <Wrapper>
-          {showLabels && (
-            <Label
-              side="left"
-              text={labels.left}
-              disabledLabel={disabledLabels}
-              placeholder={labelsPlaceholders?.left}
-              graphHeight={finalHeight}
-              graphWidth={finalWidth}
-              isChartLeftLabel={isChart && !defineChart}
-              isDefineChartLeftLabel={isChart && defineChart}
-              onChange={(value) => this.onChangeLabel(value, 'left')}
-              mathMlOptions={mathMlOptions}
-              preventNewLines={true}
-              charactersLimit={labelsCharactersLimit}
-            />
-          )}
-          {defineChart ? (
-            <DefineChartSvg width={finalWidth} height={finalHeight}>
-              <GraphBox
-                ref={(r) => {
-                  this.g = r;
-                  if (rootRef) {
-                    rootRef(r);
-                  }
-                }}
-                transform={`translate(${leftPadding + (domain.padding || 0)}, ${topPadding + (range.padding || 0)})`}
-              >
-                {children}
-              </GraphBox>
-            </DefineChartSvg>
-          ) : (
-            <ChartSvg width={finalWidth} height={finalHeight}>
-              <GraphBox
-                ref={(r) => {
-                  this.g = r;
-                  if (rootRef) {
-                    rootRef(r);
-                  }
-                }}
-                transform={`translate(${leftPadding + (domain.padding || 0)}, ${topPadding + (range.padding || 0)})`}
-              >
-                {children}
-              </GraphBox>
-            </ChartSvg>
-          )}
-          {showLabels && !isChart && (
-            <Label
-              side="right"
-              text={labels.right}
-              disabledLabel={disabledLabels}
-              placeholder={labelsPlaceholders?.right}
-              graphHeight={finalHeight}
-              graphWidth={finalWidth}
-              onChange={(value) => this.onChangeLabel(value, 'right')}
-              mathMlOptions={mathMlOptions}
-              preventNewLines={true}
-              charactersLimit={labelsCharactersLimit}
-            />
-          )}
-          {showPixelGuides && (
-            <SidePixelGuides
-              style={{
-                paddingTop: sideGridlinesPadding,
-                marginTop: 31,
-              }}
-            >
-              {[...Array(nbOfHorizontalLines + 1).keys()].reverse().map((value) => (
-                <Readable false key={`top-guide-${value}`}>
-                  <SidePixelIndicator>━ {value * 100}px</SidePixelIndicator>
-                </Readable>
-              ))}
-            </SidePixelGuides>
-          )}
-        </Wrapper>
-        {showLabels && (
-          <Label
-            side="bottom"
-            text={labels.bottom}
-            disabledLabel={disabledLabels}
-            placeholder={labelsPlaceholders?.bottom}
-            graphHeight={finalHeight}
-            graphWidth={finalWidth}
-            titleHeight={titleHeight}
-            isChartBottomLabel={isChart && !defineChart}
-            isDefineChartBottomLabel={isChart && defineChart}
-            onChange={(value) => this.onChangeLabel(value, 'bottom')}
-            mathMlOptions={mathMlOptions}
-            preventNewLines={true}
-            charactersLimit={labelsCharactersLimit}
-          />
-        )}
-      </StyledRoot>
-    );
-  }
-}
-
-export default Root;

package/src/trig.js

@@ -1,151 +0,0 @@
-import { xy } from './utils';
-import Point from '@mapbox/point-geometry';
-import debug from 'debug';
-
-const log = debug('pie-lib:plot:trig');
-
-export const toDegrees = (radians) => radians * (180 / Math.PI);
-export const toRadians = (degrees) => degrees * (Math.PI / 180);
-/**
- * return angle in radians between 2 points using counting degrees counter clockwise
- *
- * 0,0 + 1,1 = 45 in radians
- * 1,1 + 0,0 = 45?
- * @param {Point} a
- * @param {Point} b
- */
-export const angle = (a, b) => {
-  const vd = b.y - a.y;
-  const hd = b.x - a.x;
-  log(a, b, 'vd: ', vd, 'hd: ', hd);
-  const radians = Math.atan2(vd, hd);
-  return radians < 0 ? radians + Math.PI * 2 : radians;
-};
-
-const NINETY = Math.PI / 2;
-const ONE_EIGHTY = Math.PI;
-const TWO_SEVENTY = ONE_EIGHTY + NINETY;
-
-export const acuteXAngle = (a) => {
-  log(toDegrees(a));
-
-  if (a < NINETY) {
-    return a;
-  }
-
-  if (a < ONE_EIGHTY) {
-    return Math.abs(ONE_EIGHTY - a);
-  }
-
-  if (a < TWO_SEVENTY) {
-    return Math.abs(ONE_EIGHTY - a);
-  }
-
-  return Math.abs(Math.PI * 2 - a);
-};
-
-export const acuteYAngle = (a) => NINETY - acuteXAngle(a);
-
-export const hypotenuse = (a, alpha) => {
-  const out = Math.abs(a / Math.sin(alpha));
-
-  return out;
-};
-
-/**
- * return 2 edge points for a,b within domain + range.
- * - one edge is from following a -> b to the bounds
- * - one edge is from following b -> a to the bounds
- * @param {{min: number, max: number}} domain
- * @param {{min: number, max: number}} range
- * @param {{x: number, y: number}} a
- * @param {{x: number, y: number}} b
- * @returns [{x: number, y: number}, {x: number, y: number}]
- */
-export const edges = (domain, range) => (a, b) => {
-  // const xDest =
-  const destX = a.x < b.x ? domain.max : domain.min;
-  const destY = a.y < b.y ? range.max : range.min;
-  const aToB = diffEdge(xy(destX, destY), a, b);
-
-  const dX = b.x < a.x ? domain.max : domain.min;
-  const dY = b.y < a.y ? range.max : range.min;
-  const bToA = diffEdge(xy(dX, dY), b, a);
-  return [aToB, bToA];
-};
-
-/** get length of side A of a triangle from H and angle Alpha */
-export const getOpposingSide = (hyp, angle) => {
-  log('[getOpposingSide] hyp: ', hyp, 'angle:', angle);
-  return Math.abs(hyp * Math.sin(angle));
-};
-
-const getShortestSide = (xh, yh) => {
-  if (Number.isFinite(xh) && Number.isFinite(yh)) {
-    if (xh === 0 && yh > 0) {
-      return 'y';
-    }
-    if (yh === 0 && xh > 0) {
-      return 'x';
-    }
-    return xh < yh ? 'x' : 'y';
-  }
-  if (isNaN(xh) && !isNaN(yh)) {
-    return 'y';
-  }
-  if (!isNaN(xh) && isNaN(yh)) {
-    return 'x';
-  }
-  if (xh === Infinity) {
-    return 'y';
-  }
-  if (yh === Infinity) {
-    return 'x';
-  }
-
-  // eslint-disable-next-line no-console
-  console.warn('hypotenuse - which is shorter? x:', xh, 'y:', yh);
-};
-/**
- * return the difference between bounds and a as a Point
- * @param {*} bounds
- */
-export const diffEdge = (bounds, a, b) => {
-  let l = log.enabled ? log.bind(log, `diffEdge: [${a.x},${a.y} -> ${b.x},${b.y}]`) : () => {};
-  const xRadians = angle(a, b);
-  l('x angle', toDegrees(xRadians));
-  const yRadians = Math.abs(xRadians - toRadians(90));
-  l('y angle', toDegrees(yRadians));
-  const xSide = Math.abs(a.x - bounds.x);
-
-  /**
-   * Draw 2 triangles:
-   * 1 with a horizontal line from a to the graph x edge
-   * 1 with a vertical line from a to the graph y edge
-   * Calculate the hypotenuse for both, whichever is shorter
-   * indicates that we should use that triangle to get the edge point.
-   */
-  const xH = hypotenuse(xSide, yRadians);
-
-  const ySide = Math.abs(a.y - bounds.y);
-  const yH = hypotenuse(ySide, xRadians);
-
-  l('x: side', xSide, 'h:', xH);
-  l('y: side', ySide, 'h:', yH);
-  const side = getShortestSide(xH, yH);
-
-  if (side !== 'x' && side !== 'y') {
-    throw new Error('Cant decide which hypotenuse to use');
-  }
-  const point =
-    side === 'x' ? new Point(xSide, getOpposingSide(xH, xRadians)) : new Point(getOpposingSide(yH, yRadians), ySide);
-
-  l('point:', point);
-  const multiplier = new Point(b.x < a.x ? -1 : 1, b.y < a.y ? -1 : 1);
-  l('multiplier:', multiplier);
-  const out = point.multByPoint(multiplier);
-  l('out:', out);
-  const normalized = out.add(new Point(a.x, a.y));
-  l('normalized:', normalized);
-  return normalized;
-};

package/src/types.js

@@ -1,41 +0,0 @@
-import PropTypes from 'prop-types';
-
-export const BaseDomainRangeType = {
-  min: PropTypes.number.isRequired,
-  max: PropTypes.number.isRequired,
-  step: PropTypes.number,
-};
-
-export const DomainType = PropTypes.shape(BaseDomainRangeType);
-
-export const RangeType = PropTypes.shape(BaseDomainRangeType);
-
-export const SizeType = PropTypes.shape({
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-});
-
-export const PointType = PropTypes.shape({
-  x: PropTypes.number.isRequired,
-  y: PropTypes.number.isRequired,
-});
-
-export const ChildrenType = PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired;
-
-export const ScaleType = PropTypes.shape({
-  x: PropTypes.func.isRequired,
-  y: PropTypes.func.isRequired,
-});
-
-export const SnapType = PropTypes.shape({
-  x: PropTypes.func.isRequired,
-  y: PropTypes.func.isRequired,
-});
-
-export const GraphPropsType = PropTypes.shape({
-  scale: ScaleType.isRequired,
-  snap: SnapType.isRequired,
-  domain: DomainType.isRequired,
-  range: RangeType.isRequired,
-  size: SizeType.isRequired,
-});