@semcore/d3-chart 2.2.1 → 2.2.4

package/src/ReferenceLine.jsx

@@ -1,146 +0,0 @@
-import React from 'react';
-import { Component, sstyled } from '@semcore/core';
-import createElement from './createElement';
-import { scaleOfBandwidth } from './utils';
-
-import style from './style/reference-line.shadow.css';
-
-const MAP_ORIENTATION = {
-  left: 'vertical',
-  right: 'vertical',
-  top: 'horizontal',
-  bottom: 'horizontal',
-};
-
-const MAP_POSITION_LINE = {
-  vertical: ([xScale, yScale], value) => {
-    const yRange = yScale.range();
-    const x = scaleOfBandwidth(xScale, value);
-    return {
-      x: x,
-      y: yRange[1],
-      width: 0.1,
-      height: yRange[0] - yRange[1],
-    };
-  },
-  horizontal: ([xScale, yScale], value) => {
-    const xRange = xScale.range();
-    const y = scaleOfBandwidth(yScale, value);
-    return {
-      x: xRange[0],
-      y: y,
-      width: xRange[1] - xRange[0],
-      height: 0.1,
-    };
-  },
-};
-
-const OFFSET_TITLE = 10;
-const MAP_POSITION_TITlE = {
-  left: ([xScale, yScale], value) => {
-    const yRange = yScale.range();
-    const x = scaleOfBandwidth(xScale, value);
-    return {
-      x: x - OFFSET_TITLE,
-      y: (yRange[0] + yRange[1]) / 2,
-    };
-  },
-  right: ([xScale, yScale], value) => {
-    const yRange = yScale.range();
-    const x = scaleOfBandwidth(xScale, value);
-    return {
-      x: x + OFFSET_TITLE,
-      y: (yRange[0] + yRange[1]) / 2,
-    };
-  },
-  top: ([xScale, yScale], value) => {
-    const xRange = xScale.range();
-    const y = scaleOfBandwidth(yScale, value);
-    return {
-      x: (xRange[1] + xRange[0]) / 2,
-      y: y - OFFSET_TITLE,
-    };
-  },
-  bottom: ([xScale, yScale], value) => {
-    const xRange = xScale.range();
-    const y = scaleOfBandwidth(yScale, value);
-    return {
-      x: (xRange[1] + xRange[0]) / 2,
-      y: y + OFFSET_TITLE,
-    };
-  },
-};
-
-class ReferenceLineRoot extends Component {
-  static displayName = 'ReferenceLine';
-  static style = style;
-  static defaultProps = {
-    position: 'left',
-  };
-
-  getTitleProps() {
-    const { position, value } = this.asProps;
-    return { position, value };
-  }
-
-  getBackgroundProps() {
-    const { position, value } = this.asProps;
-    return { position, value };
-  }
-
-  render() {
-    const SReferenceLine = this.Element;
-    const { title, scale, position, value, color, styles } = this.asProps;
-    const pos = MAP_POSITION_LINE[MAP_ORIENTATION[position]];
-
-    return sstyled(styles)(
-      <>
-        <SReferenceLine
-          render="rect"
-          __excludeProps={['data', 'scale', 'format', 'value', 'color']}
-          stroke={color}
-          {...pos(scale, value)}
-        />
-        {title && <ReferenceLine.Title>{title}</ReferenceLine.Title>}
-      </>,
-    );
-  }
-}
-
-function Title(props) {
-  const { Element: STitle, styles, scale, position, value } = props;
-  const { x, y } = MAP_POSITION_TITlE[position](scale, value);
-
-  const sstyles = sstyled(styles);
-  const sTitleStyles = sstyles.cn('STitle', {
-    'transform-origin': `${x.toFixed(2)}px ${y.toFixed(2)}px`,
-  });
-
-  return sstyled(styles)(
-    <STitle
-      render="text"
-      childrenPosition="inside"
-      className={sTitleStyles.className}
-      style={sTitleStyles.style}
-      position={position}
-      x={x}
-      y={y}
-    />,
-  );
-}
-
-function Background(props) {
-  const { Element: SBackground, styles, scale, position, value } = props;
-  const pos = MAP_POSITION_LINE[MAP_ORIENTATION[position]];
-
-  return sstyled(styles)(
-    <SBackground render="rect" childrenPosition="inside" {...pos(scale, value)} />,
-  );
-}
-
-const ReferenceLine = createElement(ReferenceLineRoot, {
-  Title,
-  Background,
-});
-
-export default ReferenceLine;

package/src/ResponsiveContainer.jsx

@@ -1,84 +0,0 @@
-import React from 'react';
-import ResizeObserver from 'resize-observer-polyfill';
-
-import createComponent, { Component, Root, sstyled } from '@semcore/core';
-import { Box } from '@semcore/flex-box';
-import trottle from '@semcore/utils/lib/rafTrottle';
-import fire from '@semcore/utils/lib/fire';
-import getOriginChildren from '@semcore/utils/lib/getOriginChildren';
-
-class ResponsiveContainerRoot extends Component {
-  static displayName = 'ResponsiveContainer';
-
-  containerRef = React.createRef();
-  size = [0, 0];
-
-  constructor(props) {
-    super(props);
-    this.observer = new ResizeObserver(this.handleResize);
-  }
-
-  get $container() {
-    return this.containerRef.current;
-  }
-
-  handleResize = trottle((entries) => {
-    const { Children, aspect } = this.asProps;
-    let { clientWidth: width, clientHeight: height } = this.$container;
-
-    if (aspect) {
-      const style = window.getComputedStyle(this.$container);
-      const minHeight = Number.parseInt(style.getPropertyValue('min-height'));
-      const maxHeight = Number.parseInt(style.getPropertyValue('max-height'));
-      height = width * aspect;
-
-      if (height < minHeight) {
-        height = minHeight;
-      }
-      if (height > maxHeight) {
-        height = maxHeight;
-      }
-    }
-
-    if (this.size[0] === width && this.size[1] === height) return;
-
-    this.size = [width, height];
-
-    fire(this, 'onResize', this.size, entries);
-
-    if (typeof getOriginChildren(Children) === 'function') {
-      this.forceUpdate();
-    }
-  });
-
-  setContext() {
-    const [width, height] = this.size;
-    return {
-      width,
-      height,
-    };
-  }
-
-  componentDidMount() {
-    if (this.$container) {
-      // TODO: may be we can increase perfomance here? (by lsroman)
-      this.observer.observe(this.$container);
-    }
-  }
-
-  // TODO component did update ref?
-
-  componentWillUnmount() {
-    this.observer.disconnect();
-  }
-
-  render() {
-    const SResponsiveContainer = Root;
-    const { styles } = this.asProps;
-    return sstyled(styles)(<SResponsiveContainer render={Box} ref={this.containerRef} />);
-  }
-}
-
-const ResponsiveContainer = createComponent(ResponsiveContainerRoot);
-
-export default ResponsiveContainer;

package/src/ScatterPlot.jsx

@@ -1,112 +0,0 @@
-import React from 'react';
-import { Component, sstyled } from '@semcore/core';
-import canUseDOM from '@semcore/utils/lib/canUseDOM';
-import { CONSTANT } from './utils';
-import createElement from './createElement';
-import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
-import { transition } from 'd3-transition';
-import style from './style/scatterplot.shadow.css';
-import ClipPath from './ClipPath';
-
-class ScatterPlotRoot extends Component {
-  static displayName = 'ScatterPlot';
-  static style = style;
-  static enhance = [uniqueIDEnhancement()];
-
-  static defaultProps = {
-    offset: [0, 0],
-    duration: 500,
-  };
-
-  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, r, value } = this.asProps;
-    const radius = r ? r : value ? 12 : 5.5;
-    const selectRect = transition().selection().selectAll(`[id^=${uid}]`).attr('r', 0);
-    const selectRectNode = selectRect.node();
-
-    if (duration > 0 && selectRectNode) {
-      selectRect.transition().duration(duration).attr('r', radius);
-    }
-  }
-
-  componentDidUpdate() {
-    this.animationCircle();
-  }
-
-  componentDidMount() {
-    this.animationCircle();
-  }
-
-  renderCircle(d, i) {
-    const { color, scale, x, y, r, offset, styles, uid, duration, value, valueColor } =
-      this.asProps;
-    const [xScale, yScale] = scale;
-    const SScatterPlot = this.Element;
-    const SValue = 'text';
-    return sstyled(styles)(
-      <g
-        key={`circle(#${i})`}
-        onMouseMove={this.bindHandlerTooltip(true, { ...this.props, xIndex: i })}
-        onMouseLeave={this.bindHandlerTooltip(false, { ...this.props, xIndex: i })}
-      >
-        <SScatterPlot
-          id={`${uid}${i}`}
-          index={i}
-          render="circle"
-          clipPath={`url(#${uid})`}
-          cx={xScale(d[x]) + offset[0]}
-          cy={yScale(d[y]) + offset[1]}
-          color={color}
-          r={r}
-          use:duration={`${duration}ms`}
-        />
-        {d[value] && (
-          <SValue
-            x={xScale(d[x]) + offset[0]}
-            y={yScale(d[y]) + offset[1]}
-            dy=".3em"
-            clipPath={`url(#${uid})`}
-            color={valueColor}
-          >
-            {d[value]}
-          </SValue>
-        )}
-      </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))}
-        <ClipPath id={uid} x={xMargin} y={yMargin} width={`${xSize}px`} height={`${ySize}px`} />
-      </>
-    );
-  }
-}
-
-const ScatterPlot = createElement(ScatterPlotRoot);
-
-export default ScatterPlot;

package/src/StackBar.jsx

@@ -1,105 +0,0 @@
-import React from 'react';
-import { stack as d3Stack } from 'd3-shape';
-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';
-
-const DEFAULT_INSTANCE = Symbol('DEFAULT_INSTANCE');
-const XY0 = Symbol('XY0');
-
-class StackBarRoot extends Component {
-  static displayName = 'StackBar';
-
-  static style = style;
-
-  static defaultProps = () => {
-    const stack = d3Stack();
-    stack[DEFAULT_INSTANCE] = true;
-    return { stack, r: 2 };
-  };
-
-  getSeries() {
-    const { Children, data, stack } = this.asProps;
-
-    if (stack[DEFAULT_INSTANCE]) {
-      const keys = React.Children.toArray(getOriginChildren(Children)).reduce((acc, child) => {
-        if (React.isValidElement(child) && child.type === StackBar.Bar && !child.props.hide) {
-          acc.push(child.props.y);
-        }
-        if (
-          React.isValidElement(child) &&
-          child.type === StackBar.HorizontalBar &&
-          !child.props.hide
-        ) {
-          acc.push(child.props.x);
-        }
-        return acc;
-      }, []);
-      stack.keys(keys);
-    }
-
-    return stack(data);
-  }
-
-  getBarProps({ y }) {
-    const { x, r } = this.asProps;
-
-    const seriesIndex = this.series.findIndex((s) => s.key === y);
-    // or [] if hide bar
-    const series = this.series[seriesIndex] || [];
-
-    const rBar = series.map((s, i) =>
-      this.series.slice(seriesIndex + 1).some((bar) => bar[i][0] !== bar[i][1]) ? 0 : r,
-    );
-
-    return {
-      data: series.map((s) => ({
-        ...s.data,
-        [y]: s[1],
-        [XY0]: s[0],
-      })),
-      y0: XY0,
-      x,
-      r: rBar,
-    };
-  }
-
-  getHorizontalBarProps({ x }) {
-    const { y, r } = this.asProps;
-
-    const seriesIndex = this.series.findIndex((s) => s.key === x);
-    const series = this.series[seriesIndex];
-
-    const rBar = series.map((s, i) =>
-      this.series.slice(seriesIndex + 1).some((bar) => bar[i][0] !== bar[i][1]) ? 0 : r,
-    );
-
-    return {
-      data: series.map((s) => ({
-        ...s.data,
-        [x]: s[1],
-        [XY0]: s[0],
-      })),
-      x0: XY0,
-      y,
-      r: rBar,
-    };
-  }
-
-  render() {
-    const Element = this.Element;
-    this.series = this.getSeries();
-    return <Element render="g" series={this.series} />;
-  }
-}
-
-const StackBar = createElement(StackBarRoot, {
-  Bar,
-  HorizontalBar,
-});
-
-export default StackBar;

package/src/StackedArea.jsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { stack as d3Stack } from 'd3-shape';
-import { Component } from '@semcore/core';
-import getOriginChildren from '@semcore/utils/lib/getOriginChildren';
-import createElement from './createElement';
-import Area from './Area';
-
-import style from './style/area.shadow.css';
-
-const DEFAULT_INSTANCE = Symbol('DEFAULT_INSTANCE');
-const Y0 = Symbol('Y0');
-
-class StackedAreaRoot extends Component {
-  static displayName = 'StackedArea';
-
-  static style = style;
-
-  static defaultProps = () => {
-    const stack = d3Stack();
-    stack[DEFAULT_INSTANCE] = true;
-    return { stack };
-  };
-
-  getSeries() {
-    const { Children, data, stack } = this.asProps;
-
-    if (stack[DEFAULT_INSTANCE]) {
-      const keys = React.Children.toArray(getOriginChildren(Children)).reduce((acc, child) => {
-        if (React.isValidElement(child) && child.type === StackedArea.Area && !child.props.hide) {
-          acc.push(child.props.y);
-        }
-        return acc;
-      }, []);
-      stack.keys(keys.reverse());
-    }
-
-    return stack(data);
-  }
-
-  getAreaProps({ y }) {
-    const { x } = this.asProps;
-    // or [] if hide area
-    const series = this.series.find((s) => s.key === y) || [];
-    return {
-      data: series.map((s) => ({
-        ...s.data,
-        // if null is passed in the data, then we pass it, because d3 null leads to 0
-        [y]: s.data[y] === null ? null : s[1],
-        [Y0]: s[0],
-      })),
-      y0: Y0,
-      x,
-    };
-  }
-
-  render() {
-    const Element = this.Element;
-    this.series = this.getSeries();
-    return <Element render="g" series={this.series} />;
-  }
-}
-
-const StackedArea = createElement(StackedAreaRoot, { Area });
-
-export default StackedArea;

package/src/Tooltip.jsx

@@ -1,145 +0,0 @@
-import React, { useCallback } from 'react';
-import { Component, Root, sstyled } from '@semcore/core';
-import Popper from '@semcore/popper';
-import { Box } from '@semcore/flex-box';
-import findComponent from '@semcore/utils/lib/findComponent';
-import { CONSTANT } from './utils';
-import createElement from './createElement';
-import resolveColor from '@semcore/utils/lib/color';
-
-import style from './style/tooltip.shadow.css';
-
-class TooltipRoot extends Component {
-  static displayName = 'Tooltip';
-
-  static style = style;
-
-  state = {
-    $visible: false,
-  };
-
-  handlerCancel = () => false;
-
-  getTriggerProps() {
-    // TODO: как то убрать
-    const { x, y } = this.asProps;
-    return { x, y };
-  }
-
-  getPopperProps() {
-    return {
-      ...this.state,
-    };
-  }
-
-  componentDidMount() {
-    const { eventEmitter, rootRef } = this.asProps;
-    this.unsubscribeTooltipVisible = eventEmitter.subscribe(
-      'onTooltipVisible',
-      (visible, data, node) => {
-        this.setState(
-          {
-            ...data,
-            $visible: visible,
-          },
-          () => {
-            if (node && (node[CONSTANT.VIRTUAL_ELEMENT] || rootRef.current.contains(node))) {
-              this?.setPopperTrigger(node);
-              this.popper.current?.update();
-            }
-          },
-        );
-      },
-    );
-  }
-
-  componentWillUnmount() {
-    if (this.unsubscribeTooltipVisible) {
-      this.unsubscribeTooltipVisible();
-    }
-  }
-
-  render() {
-    const { Children, children, tag, ...other } = this.asProps;
-
-    const advanceMode = !!findComponent(Children, [
-      Tooltip.Trigger.displayName,
-      Tooltip.Popper.displayName,
-    ]);
-    return (
-      <Root
-        render={Popper}
-        visible={this.state.$visible}
-        onFirstUpdate={this.handlerCancel}
-        onOutsideClick={this.handlerCancel}
-        interaction="none"
-        offset={8}
-        flip={{ allowedAutoPlacements: ['left', 'right'] }}
-      >
-        {({ popper, setTrigger }) => {
-          this.setPopperTrigger = setTrigger;
-          this.popper = popper;
-          this.popper.current?.update();
-          return advanceMode ? (
-            <Children />
-          ) : (
-            <>
-              {tag && <Tooltip.Trigger tag={tag} />}
-              <Tooltip.Popper {...other}>{children}</Tooltip.Popper>
-            </>
-          );
-        }}
-      </Root>
-    );
-  }
-}
-
-function PopperPopper(props) {
-  const { Element: STooltip, styles, $visible, x, y } = props;
-
-  const handlerCancel = useCallback(() => false, []);
-
-  if (!$visible) return null;
-
-  return sstyled(styles)(
-    <STooltip
-      render={Popper.Popper}
-      childrenPosition="inside"
-      onMouseMove={handlerCancel}
-      x={x}
-      y={y}
-    />,
-  );
-}
-
-function Title(props) {
-  const STitle = Root;
-  const { styles } = props;
-  return sstyled(styles)(<STitle render={Box} __excludeProps={['data', 'scale']} />);
-}
-
-function Dot(props) {
-  const { styles, color, Children } = props;
-  const SDotGroup = Root;
-  const SDot = Box;
-  return sstyled(styles)(
-    <SDotGroup render={Box} __excludeProps={['data', 'scale']}>
-      <SDot color={resolveColor(color)} />
-      <Children />
-    </SDotGroup>,
-  );
-}
-
-function Footer() {
-  return null;
-}
-
-const Tooltip = createElement(TooltipRoot, {
-  Trigger: Popper.Trigger,
-  Popper: PopperPopper,
-  Title,
-  Footer,
-  Dot,
-});
-
-export default Tooltip;