@semcore/d3-chart 2.2.1 → 2.2.4

package/src/Bar.jsx

@@ -1,149 +0,0 @@
-import React from 'react';
-import { transition } from 'd3-transition';
-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 BarRoot extends Component {
-  static displayName = 'Bar';
-  static style = style;
-  static enhance = [uniqueIDEnhancement()];
-
-  static defaultProps = {
-    offset: [0, 0],
-    duration: 500,
-    r: 2,
-    hMin: 4,
-  };
-
-  getBackgroundProps(props, index) {
-    const { x, data } = this.asProps;
-    return {
-      value: data[index][x],
-    };
-  }
-
-  animationBar() {
-    const { duration, uid } = this.asProps;
-    const selectRect = transition().selection().selectAll(`#${uid} rect`);
-    const selectRectNode = selectRect.node();
-
-    if (duration > 0 && selectRectNode && selectRectNode.getAttribute('y') !== '0') {
-      selectRect.transition().duration(duration).attr('y', 0);
-    }
-  }
-
-  componentDidUpdate() {
-    this.animationBar();
-  }
-
-  componentDidMount() {
-    this.animationBar();
-  }
-
-  renderBar(d, i) {
-    const SBar = this.Element;
-    const {
-      styles,
-      color,
-      x,
-      y,
-      y0,
-      scale,
-      hide,
-      offset,
-      duration,
-      uid,
-      r,
-      hMin,
-      width: widthProps,
-    } = this.asProps;
-
-    const [xScale, yScale] = scale;
-    const barY = yScale(Math.max(d[y0] ?? 0, d[y])) + offset[1] - (Object.is(d[y], 0) ? hMin : 0);
-    const barX = xScale(d[x]) + offset[0];
-    const height =
-      Math.abs(yScale(d[y]) - Math.min(yScale(yScale.domain()[0]), yScale(d[y0] ?? 0))) || hMin;
-    const width = widthProps || getBandwidth(xScale);
-    const dSvg = getRect({
-      x: barX,
-      y: barY,
-      width,
-      height,
-      radius: Array.isArray(r) ? r[i] : r,
-      position: d[y] > 0 || Object.is(d[y], 0) ? 'top' : 'bottom',
-    });
-
-    return sstyled(styles)(
-      <SBar
-        key={`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`}
-      />,
-    );
-  }
-  render() {
-    const { data, uid, size, duration } = this.asProps;
-    return (
-      <>
-        {data.map(this.renderBar.bind(this))}
-        {duration && (
-          <ClipPath
-            key={`${uid}-animation`}
-            id={uid}
-            x="0"
-            y={size[1]}
-            width={size[0]}
-            height={`${size[1]}px`}
-          />
-        )}
-      </>
-    );
-  }
-}
-
-function Background(props) {
-  const { Element: SBackground, styles, scale, value } = props;
-
-  const [xScale, yScale] = scale;
-  const yRange = yScale.range();
-
-  return sstyled(styles)(
-    <SBackground
-      render="rect"
-      childrenPosition="above"
-      width={xScale.bandwidth()}
-      height={yRange[0] - yRange[1]}
-      x={xScale(value)}
-      y={yRange[1]}
-    />,
-  );
-}
-
-function getRect({ x, y, width, height, radius, position }) {
-  if (height <= radius) return '';
-  if (radius) {
-    if (position === 'top')
-      return roundedPath(x, y, width, height, radius, true, true, false, false);
-    return roundedPath(x, y, width, height, radius, false, false, true, true);
-  }
-  return roundedPath(x, y, width, height, radius);
-}
-
-export default createElement(BarRoot, { Background });

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;