@semcore/d3-chart 2.2.0 → 2.2.3

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);