@semcore/d3-chart 2.1.0 → 2.2.0

package/lib/es6/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/lib/es6/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/lib/es6/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/lib/es6/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/lib/es6/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/lib/es6/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/lib/es6/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;

package/lib/es6/types/index.d.ts

@@ -51,3 +51,6 @@ export * from './ScatterPlot';
 
 export { default as Bubble } from './Bubble';
 export * from './Bubble';
+
+export { default as ReferenceLine } from './ReferenceLine';
+export * from './ReferenceLine';

package/lib/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/lib/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/lib/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/lib/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/lib/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;

package/lib/types/index.d.ts

@@ -51,3 +51,6 @@ export * from './ScatterPlot';
 
 export { default as Bubble } from './Bubble';
 export * from './Bubble';
+
+export { default as ReferenceLine } from './ReferenceLine';
+export * from './ReferenceLine';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/d3-chart",
   "description": "SEMRush D3 Chart Component",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -19,12 +19,12 @@
     "@semcore/utils": "^3.15",
     "@upsetjs/venn.js": "1.4.1",
     "d3-array": "3.1.6",
-    "d3-shape": "3.1.0",
-    "d3-scale": "3.3.0",
     "d3-interpolate": "3.0.1",
+    "d3-scale": "3.3.0",
+    "d3-shape": "3.1.0",
     "d3-transition": "3.0.1",
-    "resize-observer-polyfill": "1.5.1",
-    "hoist-non-react-statics": "3.3.2"
+    "hoist-non-react-statics": "3.3.2",
+    "resize-observer-polyfill": "1.5.1"
   },
   "peerDependencies": {
     "@semcore/core": "^1.11",
@@ -39,14 +39,14 @@
     "directory": "semcore/d3-chart"
   },
   "devDependencies": {
+    "@semcore/button": "*",
+    "@semcore/checkbox": "*",
+    "@semcore/dropdown-menu": "*",
+    "@semcore/icon": "*",
     "@semcore/jest-preset-ui": "1.0.0",
+    "@semcore/typography": "*",
     "@types/d3-array": "^3.0.2",
     "@types/d3-scale": "^4.0.2",
-    "@types/d3-transition": "^3.0.1",
-    "@semcore/typography": "*",
-    "@semcore/dropdown-menu": "*",
-    "@semcore/button": "*",
-    "@semcore/checkbox": "*",
-    "@semcore/icon": "*"
+    "@types/d3-transition": "^3.0.1"
   }
 }

package/src/Area.jsx

@@ -6,6 +6,7 @@ import createElement from './createElement';
 import { definedData, scaleOfBandwidth, getNullData, definedNullData } from './utils';
 import ClipPath from './ClipPath';
 import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
+import findComponent from '@semcore/utils/lib/findComponent';
 
 import style from './style/area.shadow.css';
 
@@ -55,18 +56,34 @@ class AreaRoot extends Component {
     };
   }
 
+  getLineProps() {
+    const { duration, color, data, d3Line, uid } = this.asProps;
+
+    return {
+      uid,
+      data,
+      d3: d3Line,
+      color,
+      duration,
+    };
+  }
+
   render() {
     const SArea = this.Element;
     const SAreaLine = 'path';
-    const { styles, hide, d3, d3Line, data, color, uid, size, duration } = this.asProps;
+    const { styles, hide, d3, d3Line, data, color, uid, size, duration, Children } = this.asProps;
+    const advanceMode = !!findComponent(Children, [Area.Line.displayName]);
+
     return sstyled(styles)(
       <>
-        <SAreaLine
-          clipPath={`url(#${uid})`}
-          d={d3Line(data)}
-          color={color}
-          use:duration={`${duration}ms`}
-        />
+        {!advanceMode && (
+          <SAreaLine
+            clipPath={`url(#${uid})`}
+            d={d3Line(data)}
+            color={color}
+            use:duration={`${duration}ms`}
+          />
+        )}
         <SArea
           clipPath={`url(#${uid})`}
           render="path"
@@ -93,12 +110,28 @@ class AreaRoot extends Component {
   }
 }
 
+function Line(props) {
+  const { Element: SAreaLine, styles, d3, data, color, duration, uid } = props;
+  return sstyled(styles)(
+    <SAreaLine
+      render="path"
+      clipPath={`url(#${uid})`}
+      d={d3(data)}
+      color={color}
+      use:duration={`${duration}ms`}
+    />,
+  );
+}
+
 function Null(props) {
   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, {
+const Area = createElement(AreaRoot, {
   Dots,
   Null,
+  Line,
 });
+
+export default Area;

package/src/Bar.jsx

@@ -17,6 +17,7 @@ class BarRoot extends Component {
     offset: [0, 0],
     duration: 500,
     r: 2,
+    hMin: 4,
   };
 
   getBackgroundProps(props, index) {
@@ -58,15 +59,15 @@ class BarRoot extends Component {
       duration,
       uid,
       r,
+      hMin,
       width: widthProps,
     } = this.asProps;
 
     const [xScale, yScale] = scale;
-    const barY = yScale(Math.max(d[y0] ?? 0, d[y])) + offset[1];
+    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)),
-    );
+    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,
@@ -74,7 +75,7 @@ class BarRoot extends Component {
       width,
       height,
       radius: Array.isArray(r) ? r[i] : r,
-      position: d[y] > 0 ? 'top' : 'bottom',
+      position: d[y] > 0 || Object.is(d[y], 0) ? 'top' : 'bottom',
     });
 
     return sstyled(styles)(

package/src/Bubble.jsx

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

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 }) {