@semcore/d3-chart 2.2.2 → 2.2.3

package/src/Bubble.jsx

@@ -1,165 +0,0 @@
-import React from 'react';
-import { Component, sstyled } from '@semcore/core';
-import canUseDOM from '@semcore/utils/lib/canUseDOM';
-import { CONSTANT, measureText } from './utils';
-import createElement from './createElement';
-import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
-import { transition } from 'd3-transition';
-import style from './style/bubble.shadow.css';
-import ClipPath from './ClipPath';
-import { scaleSqrt } from 'd3-scale';
-
-class BubbleRoot extends Component {
-  static displayName = 'Bubble';
-  static style = style;
-  static enhance = [uniqueIDEnhancement()];
-
-  static defaultProps = {
-    offset: [0, 0],
-    duration: 500,
-    markedCross: true,
-  };
-
-  virtualElement = canUseDOM() ? document.createElement('div') : {};
-
-  generateGetBoundingClientRect(x = 0, y = 0) {
-    return () => ({ width: 0, height: 0, top: y, right: x, bottom: y, left: x });
-  }
-
-  bindHandlerTooltip =
-    (visible, props) =>
-    ({ clientX: x, clientY: y }) => {
-      const { eventEmitter } = this.asProps;
-      this.virtualElement.getBoundingClientRect = this.generateGetBoundingClientRect(x, y);
-      this.virtualElement[CONSTANT.VIRTUAL_ELEMENT] = true;
-      eventEmitter.emit('onTooltipVisible', visible, props, this.virtualElement);
-    };
-
-  animationCircle() {
-    const { duration, uid, data, value } = this.asProps;
-    const z = scaleSqrt()
-      .domain([0, Math.max(...data.map((el) => el[value]))])
-      .range([5.5, 50.5]);
-
-    const selectRect = transition().selection().selectAll(`[id^=${uid}${uid}]`).attr('r', 0);
-
-    const selectRectNode = selectRect.node();
-    if (duration > 0 && selectRectNode) {
-      selectRect
-        .transition()
-        .duration(duration)
-        .attr('r', function (_, ind) {
-          return z(data[ind][value]);
-        });
-    }
-  }
-
-  componentDidUpdate() {
-    this.animationCircle();
-  }
-
-  componentDidMount() {
-    this.animationCircle();
-  }
-
-  renderCircle(d, i) {
-    const {
-      color,
-      scale,
-      x,
-      y,
-      offset,
-      styles,
-      uid,
-      duration,
-      value,
-      label,
-      markedCross,
-      size,
-      data,
-    } = this.asProps;
-    const [xScale, yScale] = scale;
-
-    const SBubble = this.Element;
-    const SCenter = 'text';
-    const SLabel = 'text';
-    const z = scaleSqrt()
-      .domain([0, Math.max(...data.map((el) => el[value]))])
-      .range([5.5, 50.5]);
-
-    const margin = Math.min(xScale.range()[0], xScale.range()[1]);
-
-    const labelPosition =
-      size[0] - 2 * margin - (xScale(d[x]) + offset[0] + z(d[value])) < measureText(d[label])
-        ? 'right'
-        : 'left';
-    const labelDistance = {
-      right: xScale(d[x]) + offset[0] - z(d[value]),
-      left: xScale(d[x]) + offset[0] + z(d[value]),
-    }[labelPosition];
-
-    return sstyled(styles)(
-      <g
-        key={`circle(#${i})`}
-        onMouseMove={this.bindHandlerTooltip(true, { ...this.props, xIndex: i })}
-        onMouseLeave={this.bindHandlerTooltip(false, { ...this.props, xIndex: i })}
-      >
-        {markedCross && (
-          <SCenter
-            x={xScale(d[x]) + offset[0]}
-            y={yScale(d[y]) + offset[1]}
-            dy=".3em"
-            clipPath={`url(#${uid})`}
-            color={d[color] ?? color}
-          >
-            &#43;
-          </SCenter>
-        )}
-        <SBubble
-          id={`${uid}${uid}`}
-          index={i}
-          render="circle"
-          clipPath={`url(#${uid})`}
-          cx={xScale(d[x]) + offset[0]}
-          cy={yScale(d[y]) + offset[1]}
-          color={d[color]}
-          r={z(d[value])}
-          use:duration={`${duration}ms`}
-        />
-        {d[label] && (
-          <SLabel
-            x={labelDistance}
-            y={yScale(d[y]) + offset[1]}
-            dy=".3em"
-            clipPath={`url(#${uid})`}
-            position={labelPosition}
-            color={d[color]}
-          >
-            {d[label]}
-          </SLabel>
-        )}
-      </g>,
-    );
-  }
-
-  render() {
-    const { data, uid, scale } = this.asProps;
-    const [xScale, yScale] = scale;
-    const xSize = Math.abs(xScale.range()[0] - xScale.range()[1]);
-    const ySize = Math.abs(yScale.range()[0] - yScale.range()[1]);
-    const xMargin = Math.min(xScale.range()[0], xScale.range()[1]);
-    const yMargin = Math.min(yScale.range()[0], yScale.range()[1]);
-
-    return (
-      <>
-        {data.map(this.renderCircle.bind(this))}
-        {data.map(this.animationCircle.bind(this))}
-        <ClipPath id={uid} x={xMargin} y={yMargin} width={`${xSize}px`} height={`${ySize}px`} />
-      </>
-    );
-  }
-}
-
-const Bubble = createElement(BubbleRoot);
-
-export default Bubble;

package/src/ClipPath.jsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import createComponent, { Component } from '@semcore/core';
-import propsForElement from '@semcore/utils/lib/propsForElement';
-
-class ClipPath extends Component {
-  static defaultProps = {
-    tag: 'rect',
-    id: '',
-    transition: '',
-    setAttributeTag: null,
-  };
-
-  refClipPath = React.createRef();
-
-  setAttributeTag() {
-    const { id, tag, setAttributeTag } = this.asProps;
-    if (setAttributeTag) {
-      Array.from(document.querySelectorAll(`#${id} ${tag}`)).forEach(setAttributeTag);
-    }
-  }
-
-  componentDidMount() {
-    const { id } = this.asProps;
-    if (!document || !id || !document.querySelector(`#${id}`)) return;
-    const svg = document.querySelector(`#${id}`).closest('svg');
-    Array.from(svg.querySelectorAll(`[clip-path="url(#${id})"]`)).forEach((node) => {
-      node && node.getTotalLength && node.getTotalLength();
-    });
-    this.setAttributeTag();
-  }
-
-  componentDidUpdate() {
-    this.setAttributeTag();
-  }
-
-  render() {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { id, transition, tag: Tag, style, className, ...other } = this.asProps;
-    return (
-      <clipPath ref={this.refClipPath} id={id}>
-        <Tag style={{ ...style, transition }} {...propsForElement(other, Tag)} />
-      </clipPath>
-    );
-  }
-}
-
-export default createComponent(ClipPath);

package/src/Donut.jsx

@@ -1,319 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { arc, pie } from 'd3-shape';
-import { Component, sstyled } from '@semcore/core';
-import canUseDOM from '@semcore/utils/lib/canUseDOM';
-import getOriginChildren from '@semcore/utils/lib/getOriginChildren';
-import { CONSTANT } from './utils';
-import createElement from './createElement';
-import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
-import { interpolate } from 'd3-interpolate';
-import { transition } from 'd3-transition';
-
-import style from './style/donut.shadow.css';
-
-const DEFAULT_INSTANCE = Symbol('DEFAULT_INSTANCE');
-
-function animationInitialPie({ halfsize, d3Arc, d3ArcOut, arcs, activeIndexPie }) {
-  return function (_, ind) {
-    const d = arcs[ind];
-    if (!d) return () => '';
-    const iStart = interpolate(halfsize ? -Math.PI / 2 : 0, d.startAngle);
-    const iEnd = interpolate(halfsize ? -Math.PI / 2 : 0, d.endAngle);
-    return function (t) {
-      d.startAngle = iStart(t);
-      d.endAngle = iEnd(t);
-      return ind === activeIndexPie ? d3ArcOut(d) : d3Arc(d);
-    };
-  };
-}
-
-function animationUpdatePie({ halfsize, arcs, d3Arc }) {
-  return function (_, ind) {
-    const d = arcs[ind];
-    if (this._current) {
-      const i = interpolate(this._current, d);
-      this._current = i(0);
-      return function (t) {
-        return d3Arc(i(t));
-      };
-    } else {
-      this._current = d;
-      return animationInitialPie({ halfsize, arcs, d3Arc })(_, ind);
-    }
-  };
-}
-
-function animationHoverPie({ d, selector, duration, innerRadius, outerRadius }) {
-  if (duration > 0) {
-    transition()
-      .selection()
-      .select(selector)
-      .transition()
-      .duration(duration)
-      .attrTween('d', function () {
-        if (!d) return () => '';
-        const [min, max] = outerRadius;
-        const i = interpolate(min, max);
-        return function (t) {
-          const d3ArcOut = arc().innerRadius(innerRadius).outerRadius(i(t));
-          return d3ArcOut(d);
-        };
-      });
-  }
-}
-
-const increaseFactor = 8;
-
-function getOuterRadius({ size, halfsize, outerRadius }) {
-  const [width, height] = size;
-  const minORmax = halfsize ? Math.max : Math.min;
-  return outerRadius || minORmax(width - increaseFactor * 2, height - increaseFactor * 2) / 2;
-}
-
-class DonutRoot extends Component {
-  static displayName = 'Donut';
-  static style = style;
-  static enhance = [uniqueIDEnhancement()];
-
-  static defaultProps = ({
-    innerRadius = 0,
-    outerRadius,
-    halfsize = false,
-    $rootProps: { size },
-  }) => {
-    const d3Arc = arc()
-      .outerRadius(getOuterRadius({ size, halfsize, outerRadius }))
-      .innerRadius(innerRadius > increaseFactor ? innerRadius - increaseFactor : innerRadius);
-
-    const d3ArcOut = arc()
-      .outerRadius(getOuterRadius({ size, halfsize, outerRadius }) + increaseFactor)
-      .innerRadius(innerRadius > increaseFactor ? innerRadius - increaseFactor : innerRadius);
-
-    let d3Pie = pie()
-      .sort(null)
-      .value(([, value]) => value);
-    d3Pie[DEFAULT_INSTANCE] = true;
-
-    if (halfsize) {
-      d3Pie = d3Pie.startAngle(-Math.PI / 2).endAngle(Math.PI / 2);
-    }
-    return {
-      d3Pie,
-      d3Arc,
-      d3ArcOut,
-      duration: 500,
-    };
-  };
-
-  get id() {
-    const { uid, id } = this.asProps;
-    return id || uid;
-  }
-
-  virtualElement = canUseDOM() ? document.createElement('div') : {};
-  activeIndexPie = undefined;
-
-  generateGetBoundingClientRect(x = 0, y = 0) {
-    return () => ({ width: 0, height: 0, top: y, right: x, bottom: y, left: x });
-  }
-
-  getArcs() {
-    const { Children, data, d3Pie } = this.asProps;
-    let pieData = Object.entries(data);
-
-    if (d3Pie[DEFAULT_INSTANCE]) {
-      const keys = React.Children.toArray(getOriginChildren(Children)).reduce((acc, child) => {
-        if (React.isValidElement(child) && child.type === Donut.Pie) {
-          acc.push(child.props.dataKey);
-        }
-        return acc;
-      }, []);
-      pieData = Object.entries(data)
-        .filter(([key]) => keys.includes(key))
-        .sort(([a], [b]) => (keys.indexOf(a) > keys.indexOf(b) ? 1 : -1));
-    }
-    const minValue =
-      pieData.reduce((acc, cur) => {
-        if (cur[1]) acc += cur[1];
-        return acc;
-      }, 0) / 100;
-    pieData = pieData.map((d) => {
-      if (d[1] && d[1] < minValue) d[1] = minValue;
-      return d;
-    });
-    return d3Pie(pieData);
-  }
-
-  bindHandlerTooltip =
-    (visible, props) =>
-    ({ clientX: x, clientY: y }) => {
-      const { eventEmitter } = this.asProps;
-      this.virtualElement.getBoundingClientRect = this.generateGetBoundingClientRect(x, y);
-      this.virtualElement[CONSTANT.VIRTUAL_ELEMENT] = true;
-      eventEmitter.emit('onTooltipVisible', visible, props, this.virtualElement);
-    };
-
-  animationActivePie = (props) => {
-    let { duration, innerRadius } = this.asProps;
-    const { active, data, selector } = props;
-    innerRadius = innerRadius > increaseFactor ? innerRadius - increaseFactor : innerRadius;
-    const outerRadius = getOuterRadius(this.asProps);
-    active
-      ? animationHoverPie({
-          d: data,
-          selector: `#${this.id} ${selector}`,
-          duration: duration === 0 ? 0 : 300,
-          innerRadius,
-          outerRadius: [outerRadius, outerRadius + increaseFactor],
-        })
-      : animationHoverPie({
-          d: data,
-          selector: `#${this.id} ${selector}`,
-          duration: duration === 0 ? 0 : 300,
-          innerRadius,
-          outerRadius: [outerRadius + increaseFactor, outerRadius],
-        });
-  };
-
-  getPieProps(props, ind) {
-    const { d3Arc, d3ArcOut } = this.asProps;
-    const { active } = props;
-    const data = this.arcs.find((arc) => arc.data[0] === props.dataKey);
-    if (active) {
-      this.activeIndexPie = ind;
-    }
-
-    return {
-      data,
-      d3Arc,
-      d3ArcOut,
-      $animationActivePie: this.animationActivePie,
-      onMouseMove: this.bindHandlerTooltip(true, props),
-      onMouseLeave: this.bindHandlerTooltip(false, props),
-      onMouseOver: (e) => {
-        !active &&
-          this.animationActivePie({
-            active: true,
-            data,
-            selector: `[d="${e.target.getAttribute('d')}"]`,
-          });
-      },
-      onMouseOut: (e) => {
-        !active &&
-          this.animationActivePie({
-            active: false,
-            data,
-            selector: `[d="${e.target.getAttribute('d')}"]`,
-          });
-      },
-    };
-  }
-
-  getEmptyDataProps() {
-    const { d3Arc } = this.asProps;
-    return {
-      d3Arc,
-    };
-  }
-
-  componentDidUpdate(prevProps) {
-    const { data, duration, d3Arc, halfsize } = this.asProps;
-    const arcs = this.arcs;
-    if (prevProps.$rootProps.data !== data && duration > 0) {
-      transition()
-        .selection()
-        .selectAll(`#${this.id} [data-ui-name="Donut.Pie"]`)
-        .transition()
-        .duration(duration)
-        .attrTween('d', animationUpdatePie({ d3Arc, arcs, halfsize }));
-    }
-  }
-
-  componentDidMount() {
-    const { duration, d3Arc, halfsize, d3ArcOut } = this.asProps;
-    const arcs = this.arcs;
-
-    if (duration > 0) {
-      transition()
-        .selection()
-        .selectAll(`#${this.id} [data-ui-name="Donut.Pie"]`)
-        .each(function (_, ind) {
-          this._current = arcs[ind];
-        })
-        .transition()
-        .duration(duration)
-        .attrTween(
-          'd',
-          animationInitialPie({
-            halfsize,
-            d3Arc,
-            d3ArcOut,
-            arcs,
-            activeIndexPie: this.activeIndexPie,
-          }),
-        );
-    }
-  }
-
-  render() {
-    const { halfsize, size } = this.asProps;
-    const [width, height] = size;
-    const Element = this.Element;
-    const k = halfsize ? 1 : 2;
-    this.arcs = this.getArcs();
-    return (
-      <Element
-        id={this.id}
-        render="g"
-        childrenPosition="inside"
-        transform={`translate(${width / 2},${height / k})`}
-      />
-    );
-  }
-}
-
-function Pie({
-  Element: SPie,
-  styles,
-  d3Arc,
-  data,
-  color,
-  $animationActivePie,
-  active,
-  d3ArcOut,
-  ...other
-}) {
-  const [isMount, setIsMount] = useState(false);
-  useEffect(() => {
-    //you should't run animation for first render
-    if (!isMount) {
-      setIsMount(true);
-      return;
-    }
-    if (active !== undefined && active !== null) {
-      //name must unique on page
-      $animationActivePie({ ...other, active, data, selector: `[name="${other.name}"]` });
-    }
-  }, [active]);
-  return sstyled(styles)(
-    <SPie render="path" color={color} d={active ? d3ArcOut(data) : d3Arc(data)} />,
-  );
-}
-
-function EmptyData({ Element: SEmptyData, styles, d3Arc, color }) {
-  return sstyled(styles)(
-    <SEmptyData render="path" color={color} d={d3Arc({ endAngle: Math.PI * 2, startAngle: 0 })} />,
-  );
-}
-
-function Label({ Element: SLabel, styles, Children }) {
-  return sstyled(styles)(
-    <SLabel render="text" x="0" y="0">
-      <Children />
-    </SLabel>,
-  );
-}
-
-const Donut = createElement(DonutRoot, { Pie, Label, EmptyData });
-
-export default Donut;

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;