@semcore/d3-chart 2.0.10 → 2.2.1

package/src/Donut.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+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';
@@ -13,7 +13,7 @@ import style from './style/donut.shadow.css';
 
 const DEFAULT_INSTANCE = Symbol('DEFAULT_INSTANCE');
 
-function animationInitialPie({ halfsize, d3Arc, arcs }) {
+function animationInitialPie({ halfsize, d3Arc, d3ArcOut, arcs, activeIndexPie }) {
   return function (_, ind) {
     const d = arcs[ind];
     if (!d) return () => '';
@@ -22,7 +22,7 @@ function animationInitialPie({ halfsize, d3Arc, arcs }) {
     return function (t) {
       d.startAngle = iStart(t);
       d.endAngle = iEnd(t);
-      return d3Arc(d);
+      return ind === activeIndexPie ? d3ArcOut(d) : d3Arc(d);
     };
   };
 }
@@ -84,6 +84,11 @@ class DonutRoot extends Component {
     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);
@@ -95,6 +100,7 @@ class DonutRoot extends Component {
     return {
       d3Pie,
       d3Arc,
+      d3ArcOut,
       duration: 500,
     };
   };
@@ -105,6 +111,7 @@ class DonutRoot extends Component {
   }
 
   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 });
@@ -137,41 +144,67 @@ class DonutRoot extends Component {
     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);
-  };
+  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);
+    };
 
-  getPieProps(props) {
-    let { d3Arc, duration, innerRadius } = this.asProps;
+  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) => {
-        animationHoverPie({
-          d: data,
-          selector: `#${this.id} [d="${e.target.getAttribute('d')}"]`,
-          duration: duration === 0 ? 0 : 300,
-          innerRadius,
-          outerRadius: [outerRadius, outerRadius + increaseFactor],
-        });
+        !active &&
+          this.animationActivePie({
+            active: true,
+            data,
+            selector: `[d="${e.target.getAttribute('d')}"]`,
+          });
       },
       onMouseOut: (e) => {
-        animationHoverPie({
-          d: data,
-          selector: `#${this.id} [d="${e.target.getAttribute('d')}"]`,
-          duration: duration === 0 ? 0 : 300,
-          innerRadius,
-          outerRadius: [outerRadius + increaseFactor, outerRadius],
-        });
+        !active &&
+          this.animationActivePie({
+            active: false,
+            data,
+            selector: `[d="${e.target.getAttribute('d')}"]`,
+          });
       },
     };
   }
@@ -197,8 +230,9 @@ class DonutRoot extends Component {
   }
 
   componentDidMount() {
-    const { duration, d3Arc, halfsize } = this.asProps;
+    const { duration, d3Arc, halfsize, d3ArcOut } = this.asProps;
     const arcs = this.arcs;
+
     if (duration > 0) {
       transition()
         .selection()
@@ -208,7 +242,16 @@ class DonutRoot extends Component {
         })
         .transition()
         .duration(duration)
-        .attrTween('d', animationInitialPie({ halfsize, d3Arc, arcs }));
+        .attrTween(
+          'd',
+          animationInitialPie({
+            halfsize,
+            d3Arc,
+            d3ArcOut,
+            arcs,
+            activeIndexPie: this.activeIndexPie,
+          }),
+        );
     }
   }
 
@@ -229,8 +272,32 @@ class DonutRoot extends Component {
   }
 }
 
-function Pie({ Element: SPie, styles, d3Arc, data, color }) {
-  return sstyled(styles)(<SPie render="path" color={color} d={d3Arc(data)} />);
+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 }) {

package/src/Dots.jsx

@@ -3,11 +3,12 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { sstyled } from '@semcore/core';
 import { eventToPoint, invert } from './utils';
 import createElement from './createElement';
-import { FadeInOut } from '@semcore/animation';
 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,
@@ -24,6 +25,7 @@ function Dots(props) {
     scale,
     duration = 500,
   } = props;
+  const SDots = 'g';
   const bisect = bisector((d) => d[x]).center;
   const [activeIndex, setActiveIndex] = useState(null);
 
@@ -59,27 +61,22 @@ function Dots(props) {
       unsubscribeMouseMoveRoot();
       unsubscribeMouseLeaveRoot();
     };
-  }, [eventEmitter, data, x, y]);
-
-  const renderCircle = useCallback(
-    React.forwardRef((props, ref) => {
-      return <FadeInOut ref={ref} tag="circle" {...props} />;
-    }),
-    [props],
-  );
+  }, [eventEmitter, scale, data, x, y]);
 
-  return data.reduce((acc, d, i) => {
+  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={renderCircle}
-          visible={display || i === activeIndex || (!isPrev && !isNext)}
-          __excludeProps={['data', 'scale', 'value', 'display']}
+          render="circle"
+          visible={visible}
+          __excludeProps={EXCLUDE_PROPS}
           value={d}
           index={i}
           cx={d3.x()(d)}
@@ -87,12 +84,12 @@ function Dots(props) {
           active={active}
           hide={hide}
           color={color}
-          use:duration={`${duration}ms`}
         />,
       ),
     );
     return acc;
   }, []);
+  return sstyled(styles)(<SDots use:duration={`${duration}ms`}>{dots}</SDots>);
 }
 
 Dots.style = style;

package/src/GroupBar.jsx

@@ -14,7 +14,7 @@ class GroupBarRoot extends Component {
 
   getScaleGroup() {
     const { Children, scale, scaleGroup, x } = this.asProps;
-    // TODO: классный костыль =)
+    // TODO: love that hack (by lsroman)
     const xyScale = x ? scale[0] : scale[1];
 
     if (scaleGroup) return scaleGroup;

package/src/Line.jsx

@@ -27,12 +27,13 @@ class LineRoot extends Component {
   };
 
   getDotsProps() {
-    const { x, y, d3, color } = this.asProps;
+    const { x, y, d3, color, duration } = this.asProps;
     return {
       x,
       y,
       d3,
       color,
+      duration,
     };
   }
 

package/src/ReferenceLine.jsx

@@ -0,0 +1,146 @@
+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

@@ -61,7 +61,7 @@ class ResponsiveContainerRoot extends Component {
 
   componentDidMount() {
     if (this.$container) {
-      // TODO ускорить можно?
+      // TODO: may be we can increase perfomance here? (by lsroman)
       this.observer.observe(this.$container);
     }
   }

package/src/ScatterPlot.jsx

@@ -66,6 +66,7 @@ class ScatterPlotRoot extends Component {
       >
         <SScatterPlot
           id={`${uid}${i}`}
+          index={i}
           render="circle"
           clipPath={`url(#${uid})`}
           cx={xScale(d[x]) + offset[0]}

package/src/Tooltip.jsx

@@ -39,7 +39,6 @@ class TooltipRoot extends Component {
       (visible, data, node) => {
         this.setState(
           {
-            // TODO: тут бага если одно поля нету,то оно не перезапишет стейт
             ...data,
             $visible: visible,
           },
@@ -124,8 +123,8 @@ function Dot(props) {
   const SDotGroup = Root;
   const SDot = Box;
   return sstyled(styles)(
-    <SDotGroup render={Box}>
-      <SDot __excludeProps={['data', 'scale']} color={resolveColor(color)} />
+    <SDotGroup render={Box} __excludeProps={['data', 'scale']}>
+      <SDot color={resolveColor(color)} />
       <Children />
     </SDotGroup>,
   );

package/src/createElement.jsx

@@ -7,10 +7,12 @@ import propsForElement from '@semcore/utils/lib/propsForElement';
 import getOriginChildren from '@semcore/utils/lib/getOriginChildren';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 
+const EXCLUDE_PROPS = ['data', 'scale'];
+
 function createElementRender() {
   const Element = React.forwardRef(function (
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    { render, tag, childrenPosition = 'below', x: xS, y: yS, ...source },
+    { render, childrenPosition = 'below', x: xS, y: yS, ...source },
     ref,
   ) {
     const {
@@ -61,7 +63,7 @@ function createElementRender() {
       <Tag
         {...propsForElement(
           {
-            __excludeProps: ['data', 'scale'],
+            __excludeProps: EXCLUDE_PROPS,
             ...mergedProps,
           },
           Tag,

package/src/index.js

@@ -19,6 +19,7 @@ export { default as Venn } from './Venn';
 export { default as Tooltip } from './Tooltip';
 
 export { default as ResponsiveContainer } from './ResponsiveContainer';
+export { default as ReferenceLine } from './ReferenceLine';
 
 export { HoverLine, HoverRect } from './Hover';
 

package/src/style/dot.shadow.css

@@ -1,20 +1,21 @@
 @import '@semcore/utils/style/var.css';
 @import '@semcore/d3-chart/src/style/var.css';
 
+SDots {
+  & SDot {
+    transition-duration: var(--duration);
+  }
+}
+
 SDot {
   stroke-width: 2px;
   stroke: #fff;
   r: 6px;
   fill: var(--blue-03);
   transition-property: cx, cy;
-  transition-duration: var(--duration);
   transition-timing-function: ease-in-out;
 }
 
-SDot[color] {
-  fill: var(--color);
-}
-
 SDot[hide] {
   display: none;
 }
@@ -22,3 +23,7 @@ SDot[hide] {
 SDot[active] {
   r: 8px;
 }
+
+SDot[color] {
+  fill: var(--color);
+}

package/src/style/reference-line.shadow.css

@@ -0,0 +1,37 @@
+@import '@semcore/utils/style/var.css';
+
+SReferenceLine {
+  fill: none;
+  stroke: var(--gray-300);
+}
+
+STitle {
+  font-size: var(--fs-100);
+  fill: var(--gray-500);
+  transform-origin: var(--transform-origin);
+}
+
+STitle[position='top'] {
+  text-anchor: middle;
+}
+
+STitle[position='bottom'] {
+  text-anchor: middle;
+  alignment-baseline: hanging;
+}
+
+STitle[position='right'] {
+  transform: rotate(-90deg);
+  alignment-baseline: middle;
+  text-anchor: middle;
+}
+
+STitle[position='left'] {
+  transform: rotate(-90deg);
+  text-anchor: middle;
+  alignment-baseline: middle;
+}
+
+SBackground {
+  fill: color-mod(var(--gray-200) a(20%));
+}

package/src/types/Area.d.ts

@@ -42,6 +42,7 @@ export interface IAreaNullProps extends IContext {
 declare const Area: (<T>(props: CProps<IAreaProps & T>) => ReturnEl) & {
   Dots: <T>(props: CProps<IAreaDotsProps & T, IAreaDotsContext>) => ReturnEl;
   Null: <T>(props: CProps<IAreaNullProps & T>) => ReturnEl;
+  Line: <T>(props: CProps<IContext & T>) => ReturnEl;
 };
 
 export default Area;

package/src/types/Bar.d.ts

@@ -19,6 +19,10 @@ export interface IBarProps extends IContext {
    * @default 2
    */
   r?: number | number[];
+  /** Minimal height
+   * @default 4
+   */
+  hMin?: number;
 }
 
 export interface IBarContext {

package/src/types/Bubble.d.ts

@@ -22,6 +22,11 @@ export interface IBubbleProps extends IContext {
   duration?: number;
 }
 
-declare const Bubble: <T>(props: CProps<IBubbleProps & T>) => ReturnEl;
+export interface IBubbleContext {
+  /** Index element of data */
+  index: number;
+}
+
+declare const Bubble: <T>(props: CProps<IBubbleProps & T, IBubbleContext>) => ReturnEl;
 
 export default Bubble;

package/src/types/Donut.d.ts

@@ -27,6 +27,10 @@ export interface IPieProps extends IContext {
     @default #50aef4
    **/
   color?: string;
+  /**
+   * Active sector
+   * */
+  active?: boolean;
 }
 
 export interface IEmptyDataProps extends IContext {}

package/src/types/ReferenceLine.d.ts

@@ -0,0 +1,31 @@
+import { CProps, ReturnEl } from '@semcore/core';
+import IContext from './context';
+
+export interface IReferenceLineProps extends IContext {
+  /** The position of the title relative reference line
+   * @default 'left' */
+  position?: 'top' | 'right' | 'bottom' | 'left';
+  /** Value element of data */
+  value: any;
+}
+
+export interface IReferenceLineTitleProps extends IContext {
+  /** The position of the axis relative reference line */
+  position?: 'top' | 'right' | 'bottom' | 'left';
+  /** Value element of data */
+  value: any;
+}
+
+export interface IReferenceLineBackgroundProps extends IContext {
+  /** The position of the axis relative reference line */
+  position?: 'top' | 'right' | 'bottom' | 'left';
+  /** Value element of data */
+  value: any;
+}
+
+declare const ReferenceLine: (<T>(props: CProps<IReferenceLineProps & T>) => ReturnEl) & {
+  Title: <T>(props: CProps<IReferenceLineTitleProps & T>) => ReturnEl;
+  Background: <T>(props: CProps<IReferenceLineBackgroundProps & T>) => ReturnEl;
+};
+
+export default ReferenceLine;