@semcore/d3-chart 2.2.1 → 2.2.4

package/src/Dots.jsx

@@ -1,97 +0,0 @@
-import { bisector } from 'd3-array';
-import React, { useCallback, useEffect, useState } from 'react';
-import { sstyled } from '@semcore/core';
-import { eventToPoint, invert } from './utils';
-import createElement from './createElement';
-import trottle from '@semcore/utils/lib/rafTrottle';
-
-import style from './style/dot.shadow.css';
-
-const EXCLUDE_PROPS = ['data', 'scale', 'value', 'display'];
-
-function Dots(props) {
-  const {
-    Element: SDot,
-    styles,
-    data,
-    color,
-    d3,
-    x,
-    y,
-    eventEmitter,
-    display,
-    hide,
-    rootRef,
-    scale,
-    duration = 500,
-  } = props;
-  const SDots = 'g';
-  const bisect = bisector((d) => d[x]).center;
-  const [activeIndex, setActiveIndex] = useState(null);
-
-  const handlerMouseMoveRoot = useCallback(
-    trottle((e) => {
-      const [xScale] = scale;
-      const [pX] = eventToPoint(e, rootRef.current);
-      const vX = invert(xScale, pX);
-      setActiveIndex(bisect(data, vX));
-    }),
-    [scale, data],
-  );
-
-  const handlerMouseLeaveRoot = useCallback(
-    trottle(() => {
-      setActiveIndex(null);
-    }),
-    [],
-  );
-
-  useEffect(() => {
-    const unsubscribeMouseMoveRoot = eventEmitter.subscribe('onMouseMoveChart', (e) => {
-      e.persist();
-      handlerMouseMoveRoot(e);
-    });
-
-    const unsubscribeMouseLeaveRoot = eventEmitter.subscribe(
-      'onMouseLeaveChart',
-      handlerMouseLeaveRoot,
-    );
-
-    return () => {
-      unsubscribeMouseMoveRoot();
-      unsubscribeMouseLeaveRoot();
-    };
-  }, [eventEmitter, scale, data, x, y]);
-
-  const dots = data.reduce((acc, d, i) => {
-    const isPrev = d3.defined()(data[i - 1] || {});
-    const isNext = d3.defined()(data[i + 1] || {});
-    const active = i === activeIndex;
-    const visible = display || i === activeIndex || (!isPrev && !isNext);
-    if (!d3.defined()(d)) return acc;
-    if (!visible) return acc;
-    acc.push(
-      sstyled(styles)(
-        <SDot
-          key={i}
-          render="circle"
-          visible={visible}
-          __excludeProps={EXCLUDE_PROPS}
-          value={d}
-          index={i}
-          cx={d3.x()(d)}
-          cy={d3.y()(d)}
-          active={active}
-          hide={hide}
-          color={color}
-        />,
-      ),
-    );
-    return acc;
-  }, []);
-  return sstyled(styles)(<SDots use:duration={`${duration}ms`}>{dots}</SDots>);
-}
-
-Dots.style = style;
-
-export default createElement(Dots);

package/src/GroupBar.jsx

@@ -1,76 +0,0 @@
-import React from 'react';
-import { Component } from '@semcore/core';
-import getOriginChildren from '@semcore/utils/lib/getOriginChildren';
-import createElement from './createElement';
-import Bar from './Bar';
-import HorizontalBar from './HorizontalBar';
-
-import style from './style/bar.shadow.css';
-
-class GroupBarRoot extends Component {
-  static displayName = 'GroupBar';
-
-  static style = style;
-
-  getScaleGroup() {
-    const { Children, scale, scaleGroup, x } = this.asProps;
-    // TODO: love that hack (by lsroman)
-    const xyScale = x ? scale[0] : scale[1];
-
-    if (scaleGroup) return scaleGroup;
-
-    const domain = React.Children.toArray(getOriginChildren(Children)).reduce((acc, child) => {
-      if (React.isValidElement(child) && child.type === GroupBar.Bar && !child.props.hide) {
-        acc.push(child.props.y);
-      }
-      if (
-        React.isValidElement(child) &&
-        child.type === GroupBar.HorizontalBar &&
-        !child.props.hide
-      ) {
-        acc.push(child.props.x);
-      }
-      return acc;
-    }, []);
-
-    return xyScale
-      .copy()
-      .range([0, xyScale.bandwidth()])
-      .domain(domain)
-      .paddingInner(xyScale.paddingOuter())
-      .paddingOuter(0);
-  }
-
-  getBarProps({ y }) {
-    const { x } = this.asProps;
-
-    return {
-      offset: [this.scaleGroup(y), 0],
-      width: this.scaleGroup.bandwidth(),
-      x,
-    };
-  }
-
-  getHorizontalBarProps({ x }) {
-    const { y } = this.asProps;
-
-    return {
-      offset: [0, this.scaleGroup(x)],
-      height: this.scaleGroup.bandwidth(),
-      y,
-    };
-  }
-
-  render() {
-    const Element = this.Element;
-    this.scaleGroup = this.getScaleGroup();
-    return <Element render="g" childrenPosition="inside" scaleGroup={this.scaleGroup} />;
-  }
-}
-
-const GroupBar = createElement(GroupBarRoot, {
-  Bar,
-  HorizontalBar,
-});
-
-export default GroupBar;

package/src/HorizontalBar.jsx

@@ -1,135 +0,0 @@
-import React from 'react';
-import { Component, sstyled } from '@semcore/core';
-import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
-import createElement from './createElement';
-import ClipPath from './ClipPath';
-import { getBandwidth, roundedPath } from './utils';
-
-import style from './style/bar.shadow.css';
-
-class HorizontalBarRoot extends Component {
-  static displayName = 'HorizontalBar';
-  static enhance = [uniqueIDEnhancement()];
-  static style = style;
-
-  static defaultProps = {
-    offset: [0, 0],
-    duration: 500,
-    r: 2,
-  };
-
-  getBackgroundProps(props, index) {
-    const { data, y } = this.asProps;
-    return {
-      value: data[index][y],
-    };
-  }
-
-  renderBar(d, i) {
-    const SBar = this.Element;
-    const {
-      styles,
-      color,
-      x,
-      x0,
-      y,
-      scale,
-      hide,
-      offset,
-      uid,
-      duration,
-      r,
-      height: heightProps,
-      onMouseMove,
-      onMouseLeave,
-    } = this.asProps;
-
-    const [xScale, yScale] = scale;
-    const barY = yScale(d[y]) + offset[1];
-    const barX = xScale(Math.min(d[x0] ?? 0, d[x])) + offset[0];
-    const height = heightProps || getBandwidth(yScale);
-    const width = Math.abs(xScale(d[x]) - Math.max(xScale(xScale.domain()[0]), xScale(d[x0] ?? 0)));
-    const dSvg = getHorizontalRect({
-      x: barX,
-      y: barY,
-      width,
-      height,
-      radius: Array.isArray(r) ? r[i] : r,
-      position: d[x] > 0 ? 'right' : 'left',
-    });
-
-    return sstyled(styles)(
-      <SBar
-        key={`horizontal-bar-${i}`}
-        render="path"
-        clipPath={`url(#${uid})`}
-        __excludeProps={['data', 'scale', 'value']}
-        childrenPosition="above"
-        value={d}
-        index={i}
-        hide={hide}
-        color={color}
-        x={barX}
-        y={barY}
-        width={width}
-        height={height}
-        d={dSvg}
-        use:duration={`${duration}ms`}
-        onMouseMove={onMouseMove}
-        onMouseLeave={onMouseLeave}
-      />,
-    );
-  }
-
-  render() {
-    const { data, uid, size, duration } = this.asProps;
-
-    return (
-      <>
-        {data.map(this.renderBar.bind(this))}
-        {duration && (
-          <ClipPath
-            setAttributeTag={(rect) => {
-              rect.setAttribute('width', size[0]);
-            }}
-            id={uid}
-            x="0"
-            y="0"
-            width={0}
-            height={size[1]}
-            transition={`width ${duration}ms ease-in-out`}
-          />
-        )}
-      </>
-    );
-  }
-}
-
-function Background(props) {
-  const { Element: SBackground, styles, scale, value } = props;
-  const [xScale, yScale] = scale;
-  const xRange = xScale.range();
-
-  return sstyled(styles)(
-    <SBackground
-      render="rect"
-      childrenPosition="above"
-      width={xRange[1] - xRange[0]}
-      height={yScale.bandwidth()}
-      x={xRange[0]}
-      y={yScale(value)}
-    />,
-  );
-}
-
-function getHorizontalRect({ x, y, width, height, radius, position }) {
-  if (width <= radius) return '';
-  if (radius) {
-    if (position === 'right')
-      return roundedPath(x, y, width, height, radius, false, true, false, true);
-    return roundedPath(x, y, width, height, radius, true, false, true, false);
-  }
-  return roundedPath(x, y, width, height, radius);
-}
-
-export default createElement(HorizontalBarRoot, { Background });

package/src/Hover.jsx

@@ -1,153 +0,0 @@
-import React from 'react';
-import { Component, sstyled } from '@semcore/core';
-import createElement from './createElement';
-import canUseDOM from '@semcore/utils/lib/canUseDOM';
-import { scaleOfBandwidth, getIndexFromData, eventToPoint, invert, CONSTANT } from './utils';
-import trottle from '@semcore/utils/lib/rafTrottle';
-
-import style from './style/hover.shadow.css';
-
-class Hover extends Component {
-  static style = style;
-
-  state = {
-    xIndex: null,
-    yIndex: null,
-  };
-
-  virtualElement = canUseDOM() ? document.createElement('div') : {};
-
-  generateGetBoundingClientRect(x = 0, y = 0) {
-    return () => ({ width: 0, height: 0, top: y, right: x, bottom: y, left: x });
-  }
-
-  handlerMouseMoveRoot = trottle((e) => {
-    const { eventEmitter, data, scale, x, y, rootRef } = this.asProps;
-    const { clientX, clientY } = e;
-    const [xScale, yScale] = scale;
-    const [pX, pY] = eventToPoint(e, rootRef.current);
-    const vX = invert(xScale, pX);
-    const vY = invert(yScale, pY);
-    const xIndex =
-      x === undefined || vX === undefined ? null : getIndexFromData(data, xScale, x, vX);
-    const yIndex =
-      y === undefined || vY === undefined ? null : getIndexFromData(data, yScale, y, vY);
-    const state = { xIndex, yIndex };
-    this.virtualElement.getBoundingClientRect = this.generateGetBoundingClientRect(
-      clientX,
-      clientY,
-    );
-    this.virtualElement[CONSTANT.VIRTUAL_ELEMENT] = true;
-
-    this.setState(state, () => {
-      eventEmitter.emit(
-        'onTooltipVisible',
-        xIndex !== null || yIndex !== null,
-        state,
-        this.virtualElement,
-      );
-    });
-  });
-
-  handlerMouseLeaveRoot = trottle(() => {
-    const state = {
-      xIndex: null,
-      yIndex: null,
-    };
-    this.setState(state, () => {
-      this.asProps.eventEmitter.emit('onTooltipVisible', false, state);
-    });
-  });
-
-  componentDidMount() {
-    const { eventEmitter } = this.asProps;
-    this.unsubscribeMouseMoveRoot = eventEmitter.subscribe('onMouseMoveChart', (e) => {
-      e.persist();
-      this.handlerMouseMoveRoot(e);
-    });
-    this.unsubscribeMouseLeaveRoot = eventEmitter.subscribe(
-      'onMouseLeaveChart',
-      this.handlerMouseLeaveRoot,
-    );
-  }
-
-  componentWillUnmount() {
-    if (this.unsubscribeMouseMoveRoot) {
-      this.unsubscribeMouseMoveRoot();
-    }
-    if (this.unsubscribeMouseLeaveRoot) {
-      this.unsubscribeMouseLeaveRoot();
-    }
-  }
-}
-
-class HoverLineRoot extends Hover {
-  static displayName = 'HoverLine';
-
-  render() {
-    const SHoverLine = this.Element;
-    const { styles, x, y, data, scale } = this.asProps;
-    const { xIndex, yIndex } = this.state;
-    const [xScale, yScale] = scale;
-
-    const xRange = xScale.range();
-    const yRange = yScale.range();
-    const x1 = xIndex !== null ? scaleOfBandwidth(xScale, data[xIndex][x]) : undefined;
-    const y1 = yIndex !== null ? scaleOfBandwidth(yScale, data[yIndex][y]) : undefined;
-
-    return sstyled(styles)(
-      <>
-        {xIndex !== null ? (
-          <SHoverLine render="line" index={xIndex} x1={x1} y1={yRange[0]} x2={x1} y2={yRange[1]} />
-        ) : null}
-        {yIndex !== null ? (
-          <SHoverLine render="line" index={yIndex} x1={xRange[0]} y1={y1} x2={xRange[1]} y2={y1} />
-        ) : null}
-      </>,
-    );
-  }
-}
-
-class HoverRectRoot extends Hover {
-  static displayName = 'HoverRect';
-
-  render() {
-    const SHoverRect = this.Element;
-    const { styles, x, y, data, scale } = this.asProps;
-    const { xIndex, yIndex } = this.state;
-    const [xScale, yScale] = scale;
-
-    const xRange = xScale.range();
-    const yRange = yScale.range();
-
-    return sstyled(styles)(
-      <>
-        {xIndex !== null ? (
-          <SHoverRect
-            render="rect"
-            index={xIndex}
-            width={xScale.step() - xScale.paddingInner() / 2}
-            height={yRange[0] - yRange[1]}
-            x={xScale(data[xIndex][x]) - (xScale.step() * xScale.paddingInner()) / 2}
-            y={yRange[1]}
-          />
-        ) : null}
-        {yIndex !== null ? (
-          <SHoverRect
-            render="rect"
-            index={yIndex}
-            width={xRange[1] - xRange[0]}
-            height={yScale.step() - yScale.paddingInner() / 2}
-            x={xRange[0]}
-            y={yScale(data[yIndex][y]) - (yScale.step() * yScale.paddingInner()) / 2}
-          />
-        ) : null}
-      </>,
-    );
-  }
-}
-
-const HoverLine = createElement(HoverLineRoot);
-const HoverRect = createElement(HoverRectRoot);
-
-export { HoverLine, HoverRect };

package/src/Line.jsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import { curveLinear, line as d3Line } from 'd3-shape';
-import { Component, sstyled } from '@semcore/core';
-import createElement from './createElement';
-import { definedData, definedNullData, scaleOfBandwidth, getNullData } from './utils';
-import Dots from './Dots';
-import ClipPath from './ClipPath';
-import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
-
-import style from './style/line.shadow.css';
-
-class LineRoot extends Component {
-  static displayName = 'Line';
-  static style = style;
-  static enhance = [uniqueIDEnhancement()];
-
-  static defaultProps = ({ x, y, $rootProps, curve = curveLinear, scale }) => {
-    const [xScale, yScale] = scale || $rootProps.scale;
-    return {
-      d3: d3Line()
-        .defined(definedData(x, y))
-        .curve(curve)
-        .x((p) => scaleOfBandwidth(xScale, p[x]))
-        .y((p) => scaleOfBandwidth(yScale, p[y])),
-      duration: 500,
-    };
-  };
-
-  getDotsProps() {
-    const { x, y, d3, color, duration } = this.asProps;
-    return {
-      x,
-      y,
-      d3,
-      color,
-      duration,
-    };
-  }
-
-  getNullProps() {
-    const { x, y, d3, color, data } = this.asProps;
-    return {
-      d3,
-      // TODO: vertical
-      data: getNullData(data, definedNullData(x, y), y),
-      color,
-    };
-  }
-
-  render() {
-    const SLine = this.Element;
-    const { styles, hide, color, uid, size, d3, data, duration } = this.asProps;
-    return sstyled(styles)(
-      <>
-        <SLine
-          clipPath={`url(#${uid})`}
-          render="path"
-          hide={hide}
-          color={color}
-          d={d3(data)}
-          use:duration={`${duration}ms`}
-        />
-        {duration && (
-          <ClipPath
-            setAttributeTag={(rect) => {
-              rect.setAttribute('width', size[0]);
-            }}
-            id={uid}
-            x="0"
-            y="0"
-            width={0}
-            height={size[1]}
-            transition={`width ${duration}ms ease-in-out`}
-          />
-        )}
-      </>,
-    );
-  }
-}
-
-function Null(props) {
-  const { Element: SNull, styles, d3, data, hide } = props;
-  return sstyled(styles)(<SNull render="path" d={d3(data)} hide={hide} />);
-}
-
-export default createElement(LineRoot, {
-  Dots,
-  Null,
-});

package/src/Plot.jsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import createComponent, { Component, Root, sstyled } from '@semcore/core';
-import { Box } from '@semcore/flex-box';
-import EventEmitter from '@semcore/utils/lib/eventEmitter';
-import { eventToPoint } from './utils';
-import style from './style/plot.shadow.css';
-
-class PlotRoot extends Component {
-  static displayName = 'Plot';
-  static style = style;
-
-  constructor(props) {
-    super(props);
-    this.eventEmitter = props.eventEmitter || new EventEmitter();
-  }
-
-  static defaultProps = () => ({
-    width: 0,
-    height: 0,
-  });
-
-  rootRef = React.createRef();
-
-  handlerMouseMove = (e) => {
-    const { scale } = this.asProps;
-    this.eventEmitter.emit(`onMouseMoveRoot`, e);
-
-    if (scale) {
-      const [xScale, yScale] = scale;
-      const [pX, pY] = eventToPoint(e, this.rootRef.current);
-      const [minX, maxX] = xScale.range();
-      const [maxY, minY] = yScale.range();
-
-      if (pX >= minX && pX <= maxX && pY >= minY && pY <= maxY) {
-        this.eventEmitter.emit('onMouseMoveChart', e);
-      } else {
-        this.eventEmitter.emit('onMouseLeaveChart', e);
-      }
-    }
-  };
-
-  handlerMouseLeave = (e) => {
-    this.eventEmitter.emit(`onMouseLeaveRoot`, e);
-    this.eventEmitter.emit('onMouseLeaveChart', e);
-  };
-
-  setContext() {
-    const { scale, data, width, height } = this.asProps;
-    return {
-      $rootProps: {
-        size: [width, height],
-        data: data,
-        scale: scale,
-        eventEmitter: this.eventEmitter,
-        rootRef: this.rootRef,
-      },
-    };
-  }
-
-  render() {
-    const SPlot = Root;
-    const { styles, width, height } = this.asProps;
-
-    if (!width || !height) return null;
-
-    return sstyled(styles)(
-      <SPlot
-        render={Box}
-        tag="svg"
-        __excludeProps={['data', 'scale']}
-        ref={this.rootRef}
-        onMouseMove={this.handlerMouseMove}
-        onMouseLeave={this.handlerMouseLeave}
-      />,
-    );
-  }
-}
-
-export default createComponent(PlotRoot);