@semcore/d3-chart 2.1.0 → 2.2.0

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;

package/src/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';