@semcore/d3-chart 1.0.0-8 → 1.2.0

package/lib/types/Line.d.ts

@@ -1,22 +1,27 @@
 import { CProps, ReturnEl } from '@semcore/core';
 import IContext from './context';
 import { CurveFactory } from 'd3-shape';
+import { IFadeInOutProps } from '@semcore/animation';
 
 export interface ILineProps extends IContext {
-  /** Field from data for Axis x */
+  /** Field from data for XAxis */
   x?: string;
-  /** Field from data for Axis y */
+  /** Field from data for YAxis */
   y?: string;
-  /** Color line
+  /** Line color
    * @default '#50aef4'*/
   color?: string;
   /** Element hide property */
   hide?: boolean;
   /** Curve method */
   curve?: CurveFactory;
+  /** Animation duration in ms
+   * @default 500
+   */
+  duration?: number;
 }
 
-export interface ILineDotsProps extends IContext {
+export interface ILineDotsProps extends IContext, IFadeInOutProps {
   /** Show all Dot */
   display?: boolean;
   /** Hide property */

package/{src/types/Plot.ts → lib/types/Plot.d.ts}

@@ -3,10 +3,10 @@ import { CProps, ReturnEl } from '@semcore/core';
 import IContext from './context';
 
 export interface IPlotProps extends IContext, IBoxProps {
-  /** Width svg element
+  /** Width of the svg element
    * @default 0*/
   width?: number;
-  /** Height svg element
+  /** Height of the svg element
    * @default 0*/
   height?: number;
 }

package/lib/types/ResponsiveContainer.d.ts

@@ -4,7 +4,7 @@ import { CProps, ReturnEl } from '@semcore/core';
 export interface IResponsiveContainerProps extends IBoxProps {
   /** Relation between height and width dimensions block */
   aspect?: number;
-  /** Callback which will called after change size block */
+  /** Callback which will be called after changing the block size */
   onResize?: (size: [number, number], entries: ResizeObserverEntry[]) => void;
 }
 

package/lib/types/StackBar.d.ts

@@ -4,21 +4,13 @@ import { IBarContext, IBarProps } from './Bar';
 import { IHorizontalBarProps } from './HorizontalBar';
 
 export interface IStackBarProps extends IContext {
-  /** Data for graphic */
-  data?: any[];
-  /** Field from data for Axis x */
+  /** Field from data for XAxis */
   x?: string;
-  /** Field from data for Axis y */
+  /** Field from data for YAxis */
   y?: string;
   /** Stack generators
    * @default d3.stack() */
-  stack?: Stack<
-    any,
-    {
-      [key: string]: number;
-    },
-    string
-  >;
+  stack?: any;
 }
 
 export interface IStackBarContext {

package/lib/types/StackedArea.d.ts

@@ -1,14 +1,15 @@
 import { CProps, ReturnEl } from '@semcore/core';
 import IContext from './context';
-import { IAreaProps } from './Area';
+import Area from './Area';
 
 export interface IStackedAreaProps extends IContext {
-  /** Data for graphic */
-  data?: any[];
-  /** Field from data for Axis x */
+  /** Field from data for XAxis */
   x?: string;
-  /** Field from data for Axis y */
+  /** Field from data for YAxis */
   y?: string;
+  /** Stack generators
+   * @default d3.stack() */
+  stack?: any;
 }
 
 export interface IStackedAreaContext {
@@ -19,7 +20,7 @@ export interface IStackedAreaContext {
 declare const StackedArea: (<T>(
   props: CProps<IStackedAreaProps & T, IStackedAreaContext>,
 ) => ReturnEl) & {
-  Area: <T>(props: CProps<IAreaProps & T>) => ReturnEl;
+  Area: typeof Area;
 };
 
 export default StackedArea;

package/lib/types/Tooltip.d.ts

@@ -1,13 +1,13 @@
-import { IPopperProps, IPopperTriggerProps } from '@semcore/popper';
+import { ComponentProps } from 'react';
+import Popper, { IPopperProps, IPopperTriggerProps } from '@semcore/popper';
 import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
-import Popper from '@semcore/popper/lib/types/Popper';
 import { IBoxProps } from '@semcore/flex-box';
 import IContext from './context';
 
 export interface ITooltipProps extends IPopperProps, IPopperTriggerProps, IContext {
-  /** Field from data for Axis x */
+  /** Field from data for XAxis */
   x?: string;
-  /** Field from data for Axis y */
+  /** Field from data for YAxis */
   y?: string;
 }
 

package/lib/types/Venn.d.ts

@@ -0,0 +1,45 @@
+import { CProps, ReturnEl } from '@semcore/core';
+import IContext from './context';
+import { IFadeInOutProps } from '@semcore/animation';
+
+export interface IVennProps extends IContext, IFadeInOutProps {
+  /**
+   * Rotate sets in the chart
+   * @default Math.PI / 2
+   */
+  orientation?: number;
+  /**
+   * The function for sorting sets inside the chart
+   * @default (circle1, circle2) => circle2.radius - circle1.radius
+   */
+  orientationOrder?: (c1: number, c2: number) => number;
+}
+
+export interface ICircleProps extends IContext {
+  /**
+   * Name of the field in the data
+   * */
+  dataKey: string;
+  /** Color circle
+   @default #3AB011
+   **/
+  color?: string;
+  /** Animation duration in ms
+   * @default 500
+   */
+  duration?: number;
+}
+
+export interface IIntersectionProps extends IContext, IFadeInOutProps {
+  /**
+   * Name of the field in the data
+   * */
+  dataKey: string;
+}
+
+declare const Venn: (<T>(props: CProps<IVennProps & T>) => ReturnEl) & {
+  Circle: <T>(props: CProps<ICircleProps & T>) => ReturnEl;
+  Intersection: <T>(props: CProps<IIntersectionProps & T>) => ReturnEl;
+};
+
+export default Venn;

package/lib/types/context.d.ts

@@ -1,6 +1,6 @@
 export default interface IContext {
   /** Data for graphic */
-  data?: any[];
+  data?: any;
   /** Scale for svg element */
   scale?: any[];
 }

package/lib/types/index.d.ts

@@ -28,6 +28,12 @@ export * from './GroupBar';
 export { default as StackBar } from './StackBar';
 export * from './StackBar';
 
+export { default as Area } from './Area';
+export * from './Area';
+
+export { default as StackedArea } from './StackedArea';
+export * from './StackedArea';
+
 export { default as Donut } from './Donut';
 export * from './Donut';
 

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@semcore/d3-chart",
   "description": "SEMRush D3 Chart Component",
-  "version": "1.0.0-8",
+  "version": "1.2.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
+  "sideEffects": false,
   "author": "Roman Lysov <r.lysov@semrush.com>",
   "license": "MIT",
   "scripts": {
@@ -15,13 +16,17 @@
     "@semcore/flex-box": "^4",
     "@semcore/popper": "^4.9",
     "@semcore/utils": "^3.15",
-    "d3-array": "^2.8",
-    "d3-shape": "^2.0",
+    "@semcore/animation": "^1",
+    "@upsetjs/venn.js": "^1.4.1",
+    "d3-array": "^3",
+    "d3-shape": "^3",
     "resize-observer-polyfill": "^1.5"
   },
   "peerDependencies": {
-    "@semcore/core": "^1.10",
-    "react": "16.8 - 17"
+    "@semcore/core": "^1.11",
+    "react": "16.8 - 17",
+    "d3-interpolate": "^2.0.1",
+    "d3-transition": "^1.3.2"
   },
   "jest": {
     "preset": "jest-preset-ui"

package/src/Area.js

@@ -1,15 +1,18 @@
 import React from 'react';
 import { area, curveLinear, line } from 'd3-shape';
 import Dots from './Dots';
-import { Component, styled } from '@semcore/core';
+import { Component, sstyled } from '@semcore/core';
 import createElement from './createElement';
-import { definedData, scaleOfBandwidth, getNullData } from './utils';
+import { definedData, scaleOfBandwidth, getNullData, definedNullData } from './utils';
+import ClipPath from './ClipPath';
+import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
 
 import style from './style/area.shadow.css';
 
 class AreaRoot extends Component {
   static displayName = 'Area';
   static style = style;
+  static enhance = [uniqueIDEnhancement()];
 
   static defaultProps = ({ x, y, y0, $rootProps, curve = curveLinear }) => {
     const [xScale, yScale] = $rootProps.scale;
@@ -28,7 +31,7 @@ class AreaRoot extends Component {
         .x((p) => scaleOfBandwidth(xScale, p[x]))
         .y((p) => scaleOfBandwidth(yScale, p[y])),
       color: '#50aef4',
-      fill: '#50aef450',
+      duration: 500,
     };
   };
 
@@ -40,34 +43,60 @@ class AreaRoot extends Component {
       y,
       data,
       d3: d3Line,
-      fill: color,
+      color,
     };
   }
 
   getNullProps() {
-    const { y, color, data, d3Line } = this.asProps;
+    const { x, y, color, data, d3Line } = this.asProps;
     return {
-      d3Line,
-      data: getNullData(data, d3Line.defined(), y),
-      fill: color,
+      data: getNullData(data, definedNullData(x, y), y),
+      d3: d3Line,
+      color,
     };
   }
 
   render() {
     const SArea = this.Element;
-    const { styles, hide, d3, d3Line, data, fill, color } = this.asProps;
-    return styled(styles)(
+    const SAreaLine = 'path';
+    const { styles, hide, d3, d3Line, data, color, uid, size, duration } = this.asProps;
+    return sstyled(styles)(
       <>
-        <SArea render="path" hide={hide} fill={fill} d={d3(data)} />
-        <path stroke={color} strokeWidth="3" fill="transparent" d={d3Line(data)} />
+        <SAreaLine
+          clipPath={`url(#${uid})`}
+          d={d3Line(data)}
+          color={color}
+          use:duration={`${duration}ms`}
+        />
+        <SArea
+          clipPath={`url(#${uid})`}
+          render="path"
+          d={d3(data)}
+          hide={hide}
+          color={color}
+          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, d3Line, data, hide } = props;
-  return styled(styles)(<SNull render="path" d={d3Line(data)} hide={hide} />);
+  const { Element: SNull, styles, d3, data, hide, color } = props;
+  return sstyled(styles)(<SNull render="path" d={d3(data)} hide={hide} color={color} />);
 }
 
 export default createElement(AreaRoot, {

package/src/Axis.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Component, styled } from '@semcore/core';
+import { Component, sstyled } from '@semcore/core';
 import createElement from './createElement';
 import { scaleOfBandwidth } from './utils';
 
@@ -194,17 +194,10 @@ class AxisRoot extends Component {
 
   static style = style;
 
-  static defaultProps = {
-    ticks: [],
-  };
-
-  getTicksProps() {
-    const { ticks, position, indexScale } = this.asProps;
-    return {
-      ticks,
-      indexScale,
-      position,
-    };
+  get ticks() {
+    const { ticks, indexScale, scale } = this.asProps;
+    const scl = scale[indexScale];
+    return ticks || (scl.ticks && scl.ticks()) || (scl.domain && scl.domain()) || [];
   }
 
   getTitleProps() {
@@ -214,10 +207,19 @@ class AxisRoot extends Component {
     };
   }
 
+  getTicksProps() {
+    const { position, indexScale } = this.asProps;
+    return {
+      ticks: this.ticks,
+      indexScale,
+      position,
+    };
+  }
+
   getGridProps() {
-    const { ticks, indexScale } = this.asProps;
+    const { indexScale } = this.asProps;
     return {
-      ticks,
+      ticks: this.ticks,
       indexScale,
     };
   }
@@ -227,27 +229,27 @@ class AxisRoot extends Component {
     const { styles, position, scale, hide, indexScale } = this.asProps;
 
     const pos =
-      MAP_POSITION_AXIS[position] || MAP_POSITION_AXIS[MAP_INDEX_SCALE_SYMBOL[indexScale]];
+      MAP_POSITION_AXIS[position] ?? MAP_POSITION_AXIS[MAP_INDEX_SCALE_SYMBOL[indexScale]];
 
-    return styled(styles)(<SAxis render="line" hide={hide} {...pos(scale, position)} />);
+    return sstyled(styles)(<SAxis render="line" hide={hide} {...pos(scale, position)} />);
   }
 }
 
 function Ticks(props) {
   const { Element: STick, styles, scale, ticks, position, hide, indexScale } = props;
 
-  const pos = MAP_POSITION_TICK[position] || MAP_POSITION_TICK[MAP_INDEX_SCALE_SYMBOL[indexScale]];
+  const pos = MAP_POSITION_TICK[position] ?? MAP_POSITION_TICK[MAP_INDEX_SCALE_SYMBOL[indexScale]];
   const positionClass = MAP_POSITION_TICK[position] ? position : 'custom_' + indexScale;
 
   return ticks.map((value, i) => {
-    return styled(styles)(
+    return sstyled(styles)(
       <STick
         key={i}
+        render="text"
+        childrenPosition="inside"
         __excludeProps={['data', 'scale', 'format', 'value']}
         value={value}
         index={i}
-        childrenPosition="inside"
-        render="text"
         position={positionClass}
         hide={hide}
         {...pos(scale, value, position)}
@@ -262,7 +264,7 @@ function Grid(props) {
   const { Element: SGrid, styles, scale, ticks, indexScale } = props;
 
   return ticks.map((value, i) => {
-    return styled(styles)(
+    return sstyled(styles)(
       <SGrid key={i} render="line" {...MAP_POSITION_GRID[indexScale](scale, value)} />,
     );
   });
@@ -271,7 +273,7 @@ function Grid(props) {
 function Title(props) {
   const { Element: STitle, styles, scale, position } = props;
 
-  return styled(styles)(
+  return sstyled(styles)(
     <STitle
       render="text"
       childrenPosition="inside"

package/src/Bar.js

@@ -1,17 +1,21 @@
 import React from 'react';
-import { Component, styled } from '@semcore/core';
+import { Component, sstyled } from '@semcore/core';
 import createElement from './createElement';
+import ClipPath from './ClipPath';
+import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
+import { transition } from 'd3-transition';
 
 import style from './style/bar.shadow.css';
 
 class BarRoot extends Component {
   static displayName = 'Bar';
-
   static style = style;
+  static enhance = [uniqueIDEnhancement()];
 
   static defaultProps = {
     color: '#50aef4',
     offset: [0, 0],
+    duration: 500,
   };
 
   getBackgroundProps(props, index) {
@@ -21,31 +25,72 @@ class BarRoot extends Component {
     };
   }
 
-  render() {
+  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, data, scale, hide, offset } = this.asProps;
+    const { styles, color, x, y, y0, scale, hide, offset, duration, uid } = this.asProps;
 
     const [xScale, yScale] = scale;
 
-    return data.map((d, i) => {
-      return styled(styles)(
-        <SBar
-          key={i}
-          __excludeProps={['data', 'scale', 'value']}
-          value={d}
-          index={i}
-          render="rect"
-          childrenPosition="above"
-          hide={hide}
-          fill={color}
-          // TODO: https://github.com/airbnb/visx/blob/2fa674e7d7fdc9cffea13e8bf644d46dd6f0db5b/packages/visx-shape/src/util/getBandwidth.ts#L3
-          width={xScale.bandwidth()}
-          height={Math.abs(yScale(d[y]) - Math.min(yScale(yScale.domain()[0]), yScale(d[y0] ?? 0)))}
-          x={xScale(d[x]) + offset[0]}
-          y={yScale(Math.max(d[y0] ?? 0, d[y])) + offset[1]}
-        />,
-      );
-    });
+    return sstyled(styles)(
+      <SBar
+        key={`bar-${i}`}
+        render="rect"
+        clipPath={`url(#${uid})`}
+        __excludeProps={['data', 'scale', 'value']}
+        childrenPosition="above"
+        value={d}
+        index={i}
+        hide={hide}
+        color={color}
+        // TODO: https://github.com/airbnb/visx/blob/2fa674e7d7fdc9cffea13e8bf644d46dd6f0db5b/packages/visx-shape/src/util/getBandwidth.ts#L3
+        width={xScale.bandwidth()}
+        height={Math.abs(yScale(d[y]) - Math.min(yScale(yScale.domain()[0]), yScale(d[y0] ?? 0)))}
+        x={xScale(d[x]) + offset[0]}
+        y={yScale(Math.max(d[y0] ?? 0, d[y])) + offset[1]}
+        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`}
+          />
+        )}
+      </>
+    );
   }
 }
 
@@ -55,7 +100,7 @@ function Background(props) {
   const [xScale, yScale] = scale;
   const yRange = yScale.range();
 
-  return styled(styles)(
+  return sstyled(styles)(
     <SBackground
       render="rect"
       childrenPosition="above"

package/src/ClipPath.js

@@ -0,0 +1,36 @@
+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();
+
+  componentDidMount() {
+    const { id, tag, setAttributeTag } = this.asProps;
+    if (!document || !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();
+    });
+    setAttributeTag &&
+      Array.from(document.querySelectorAll(`#${id} ${tag}`)).forEach(setAttributeTag);
+  }
+
+  render() {
+    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);