@semcore/d3-chart 2.0.10 → 2.2.1

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/Tooltip.d.ts

@@ -4,14 +4,14 @@ import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
 import { IBoxProps } from '@semcore/flex-box';
 import IContext from './context';
 
-export interface ITooltipProps extends IPopperProps, IPopperTriggerProps, IContext {
+export interface ITooltipChartProps extends IPopperProps, IPopperTriggerProps, IContext {
   /** Field from data for XAxis */
   x?: string;
   /** Field from data for YAxis */
   y?: string;
 }
 
-export interface ITooltipContext {
+export interface ITooltipChartContext {
   getTriggerProps: PropGetterFn;
   getPopperProps: PropGetterFn;
   /** Index active value for Axis x */
@@ -20,7 +20,9 @@ export interface ITooltipContext {
   yIndex: number | null;
 }
 
-declare const Tooltip: (<T>(props: CProps<ITooltipProps & T, ITooltipContext>) => ReturnEl) & {
+declare const Tooltip: (<T>(
+  props: CProps<ITooltipChartProps & T, ITooltipChartContext>,
+) => ReturnEl) & {
   Trigger: <T>(props: CProps<ComponentProps<typeof Popper.Trigger> & T>) => ReturnEl;
   Popper: <T>(props: CProps<ComponentProps<typeof Popper.Popper> & T>) => ReturnEl;
   Title: <T>(props: CProps<IBoxProps & T>) => ReturnEl;

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/Tooltip.d.ts

@@ -4,14 +4,14 @@ import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
 import { IBoxProps } from '@semcore/flex-box';
 import IContext from './context';
 
-export interface ITooltipProps extends IPopperProps, IPopperTriggerProps, IContext {
+export interface ITooltipChartProps extends IPopperProps, IPopperTriggerProps, IContext {
   /** Field from data for XAxis */
   x?: string;
   /** Field from data for YAxis */
   y?: string;
 }
 
-export interface ITooltipContext {
+export interface ITooltipChartContext {
   getTriggerProps: PropGetterFn;
   getPopperProps: PropGetterFn;
   /** Index active value for Axis x */
@@ -20,7 +20,9 @@ export interface ITooltipContext {
   yIndex: number | null;
 }
 
-declare const Tooltip: (<T>(props: CProps<ITooltipProps & T, ITooltipContext>) => ReturnEl) & {
+declare const Tooltip: (<T>(
+  props: CProps<ITooltipChartProps & T, ITooltipChartContext>,
+) => ReturnEl) & {
   Trigger: <T>(props: CProps<ComponentProps<typeof Popper.Trigger> & T>) => ReturnEl;
   Popper: <T>(props: CProps<ComponentProps<typeof Popper.Popper> & T>) => ReturnEl;
   Title: <T>(props: CProps<IBoxProps & T>) => ReturnEl;

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,12 +1,12 @@
 {
   "name": "@semcore/d3-chart",
   "description": "SEMRush D3 Chart Component",
-  "version": "2.0.10",
+  "version": "2.2.1",
   "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>",
+  "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "scripts": {
     "build": "build --source=js,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]}