@semcore/d3-chart 1.0.0-8 → 1.2.0

package/src/Donut.js

@@ -1,18 +1,52 @@
 import React from 'react';
 import { arc, pie } from 'd3-shape';
-import { Component, styled } from '@semcore/core';
+import { Component, sstyled } from '@semcore/core';
 import canUseDOM from '@semcore/utils/lib/canUseDOM';
 import getOriginChildren from '@semcore/utils/lib/getOriginChildren';
 import { CONSTANT } from './utils';
 import createElement from './createElement';
+import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
+import { interpolate } from 'd3-interpolate';
+import { transition } from 'd3-transition';
 
 import style from './style/donut.shadow.css';
 
 const DEFAULT_INSTANCE = Symbol('DEFAULT_INSTANCE');
 
+function animationInitialPie({ halfsize, d3Arc, arcs }) {
+  return function(_, ind) {
+    const d = arcs[ind];
+    if (!d) return () => '';
+    const iStart = interpolate(halfsize ? -Math.PI / 2 : 0, d.startAngle);
+    const iEnd = interpolate(halfsize ? -Math.PI / 2 : 0, d.endAngle);
+    return function(t) {
+      d.startAngle = iStart(t);
+      d.endAngle = iEnd(t);
+      return d3Arc(d);
+    };
+  };
+}
+
+function animationUpdatePie({ halfsize, arcs, d3Arc }) {
+  return function(_, ind) {
+    const d = arcs[ind];
+    if (this._current) {
+      const i = interpolate(this._current, d);
+      this._current = i(0);
+      return function(t) {
+        return d3Arc(i(t));
+      };
+    } else {
+      this._current = d;
+      return animationInitialPie({ halfsize, arcs, d3Arc })(_, ind);
+    }
+  };
+}
+
 class DonutRoot extends Component {
   static displayName = 'Donut';
   static style = style;
+  static enhance = [uniqueIDEnhancement()];
 
   static defaultProps = ({ innerRadius = 0, halfsize = false, $rootProps: { size } }) => {
     const [width, height] = size;
@@ -31,20 +65,19 @@ class DonutRoot extends Component {
     return {
       d3Pie,
       d3Arc,
+      duration: 500,
     };
   };
 
+  get id() {
+    const { uid, id } = this.asProps;
+    return id || uid;
+  }
+
   virtualElement = canUseDOM() ? document.createElement('div') : {};
 
   generateGetBoundingClientRect(x = 0, y = 0) {
-    return () => ({
-      width: 0,
-      height: 0,
-      top: y,
-      right: x,
-      bottom: y,
-      left: x,
-    });
+    return () => ({ width: 0, height: 0, top: y, right: x, bottom: y, left: x });
   }
 
   getArcs() {
@@ -62,6 +95,15 @@ class DonutRoot extends Component {
         .filter(([key]) => keys.includes(key))
         .sort(([a], [b]) => (keys.indexOf(a) > keys.indexOf(b) ? 1 : -1));
     }
+    const minValue =
+      pieData.reduce((acc, cur) => {
+        if (cur[1]) acc += cur[1];
+        return acc;
+      }, 0) / 100;
+    pieData = pieData.map((d) => {
+      if (d[1] && d[1] < minValue) d[1] = minValue;
+      return d;
+    });
     return d3Pie(pieData);
   }
 
@@ -75,7 +117,7 @@ class DonutRoot extends Component {
   getPieProps(props) {
     const { d3Arc } = this.asProps;
     return {
-      data: this.arcs.find((arc) => arc.data[0] == props.dataKey),
+      data: this.arcs.find((arc) => arc.data[0] === props.dataKey),
       d3Arc,
       onMouseMove: this.bindHandlerTooltip(true, props),
       onMouseLeave: this.bindHandlerTooltip(false, props),
@@ -94,6 +136,35 @@ class DonutRoot extends Component {
     };
   }
 
+  componentDidUpdate(prevProps) {
+    const { data, duration, d3Arc, halfsize } = this.asProps;
+    const arcs = this.arcs;
+    if (prevProps.$rootProps.data !== data && duration > 0) {
+      transition()
+        .selection()
+        .selectAll(`#${this.id} [data-ui-name="Donut.Pie"]`)
+        .transition()
+        .duration(duration)
+        .attrTween('d', animationUpdatePie({ d3Arc, arcs, halfsize }));
+    }
+  }
+
+  componentDidMount() {
+    const { duration, d3Arc, halfsize } = this.asProps;
+    const arcs = this.arcs;
+    if (duration > 0) {
+      transition()
+        .selection()
+        .selectAll(`#${this.id} [data-ui-name="Donut.Pie"]`)
+        .each(function(_, ind) {
+          this._current = arcs[ind];
+        })
+        .transition()
+        .duration(duration)
+        .attrTween('d', animationInitialPie({ halfsize, d3Arc, arcs }));
+    }
+  }
+
   render() {
     const { halfsize, size } = this.asProps;
     const [width, height] = size;
@@ -102,6 +173,7 @@ class DonutRoot extends Component {
     this.arcs = this.getArcs();
     return (
       <Element
+        id={this.id}
         render="g"
         childrenPosition="inside"
         transform={`translate(${width / 2},${height / k})`}
@@ -111,11 +183,11 @@ class DonutRoot extends Component {
 }
 
 function Pie({ Element: SPie, styles, d3Arc, data, color = '#50aef4' }) {
-  return styled(styles)(<SPie render="path" fill={color} d={d3Arc(data)} />);
+  return sstyled(styles)(<SPie render="path" color={color} d={d3Arc(data)} />);
 }
 
 function Label({ Element: SLabel, styles, Children }) {
-  return styled(styles)(
+  return sstyled(styles)(
     <SLabel render="text" x="0" y="0">
       <Children />
     </SLabel>,

package/src/Dots.js

@@ -1,14 +1,19 @@
 import { bisector } from 'd3-array';
 import React, { useCallback, useEffect, useState } from 'react';
-import { styled } from '@semcore/core';
+import { sstyled } from '@semcore/core';
 import trottle from '@semcore/utils/lib/rafTrottle';
 import { eventToPoint, invert } from './utils';
+import createElement from './createElement';
+import { FadeInOut } from '@semcore/animation';
+
+import style from './style/dot.shadow.css';
 
 function Dots(props) {
   const {
     Element: SDot,
     styles,
     data,
+    color,
     d3,
     x,
     y,
@@ -17,9 +22,10 @@ function Dots(props) {
     hide,
     rootRef,
     scale,
+    duration = 500,
   } = props;
   const bisect = bisector((d) => d[x]).center;
-  const [activeIndex, setActiveIndex] = useState(props.activeIndex || null);
+  const [activeIndex, setActiveIndex] = useState(null);
 
   const handlerMouseMoveRoot = useCallback(
     trottle((e) => {
@@ -55,30 +61,40 @@ function Dots(props) {
     };
   }, [eventEmitter, data, x, y]);
 
+  const renderCircle = useCallback(
+    React.forwardRef((props, ref) => {
+      return <FadeInOut ref={ref} tag="circle" {...props} />;
+    }),
+    [props],
+  );
+
   return data.reduce((acc, d, i) => {
     const isPrev = d3.defined()(data[i - 1] || {});
     const isNext = d3.defined()(data[i + 1] || {});
     const active = i === activeIndex;
     if (!d3.defined()(d)) return acc;
-    if (display || i === activeIndex || (!isPrev && !isNext)) {
-      acc.push(
-        styled(styles)(
-          <SDot
-            key={i}
-            __excludeProps={['data', 'scale', 'value', 'display']}
-            value={d}
-            index={i}
-            render="circle"
-            cx={d3.x()(d)}
-            cy={d3.y()(d)}
-            active={active}
-            hide={hide}
-          />,
-        ),
-      );
-    }
+    acc.push(
+      sstyled(styles)(
+        <SDot
+          key={i}
+          render={renderCircle}
+          visible={display || i === activeIndex || (!isPrev && !isNext)}
+          __excludeProps={['data', 'scale', 'value', 'display']}
+          value={d}
+          index={i}
+          cx={d3.x()(d)}
+          cy={d3.y()(d)}
+          active={active}
+          hide={hide}
+          color={color}
+          use:duration={`${duration}ms`}
+        />,
+      ),
+    );
     return acc;
   }, []);
 }
 
-export default Dots;
+Dots.style = style;
+
+export default createElement(Dots);

package/src/GroupBar.js

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

package/src/HorizontalBar.js

@@ -1,17 +1,20 @@
 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 style from './style/bar.shadow.css';
 
 class HorizontalBarRoot extends Component {
   static displayName = 'HorizontalBar';
-
+  static enhance = [uniqueIDEnhancement()];
   static style = style;
 
   static defaultProps = {
     color: '#50aef4',
     offset: [0, 0],
+    duration: 500,
   };
 
   getBackgroundProps(props, index) {
@@ -21,28 +24,52 @@ class HorizontalBarRoot extends Component {
     };
   }
 
-  render() {
+  renderBar(d, i) {
     const SBar = this.Element;
-    const { styles, color, x, x0, y, data, scale, offset } = this.asProps;
+    const { styles, color, x, x0, y, scale, hide, offset, uid, duration } = 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"
-          fill={color}
-          width={Math.abs(xScale(d[x]) - Math.max(xScale(xScale.domain()[0]), xScale(d[x0] ?? 0)))}
-          height={yScale.bandwidth()}
-          x={xScale(Math.min(d[x0] ?? 0, d[x])) + offset[0]}
-          y={yScale(d[y]) + offset[1]}
-        />,
-      );
-    });
+    return sstyled(styles)(
+      <SBar
+        key={`horizontal-bar-${i}`}
+        render="rect"
+        clipPath={`url(#${uid})`}
+        __excludeProps={['data', 'scale', 'value']}
+        childrenPosition="above"
+        value={d}
+        index={i}
+        hide={hide}
+        color={color}
+        width={Math.abs(xScale(d[x]) - Math.max(xScale(xScale.domain()[0]), xScale(d[x0] ?? 0)))}
+        height={yScale.bandwidth()}
+        x={xScale(Math.min(d[x0] ?? 0, d[x])) + offset[0]}
+        y={yScale(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
+            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`}
+          />
+        )}
+      </>
+    );
   }
 }
 
@@ -51,7 +78,7 @@ function Background(props) {
   const [xScale, yScale] = scale;
   const xRange = xScale.range();
 
-  return styled(styles)(
+  return sstyled(styles)(
     <SBackground
       render="rect"
       childrenPosition="above"

package/src/Hover.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 trottle from '@semcore/utils/lib/rafTrottle';
 import { scaleOfBandwidth, getIndexFromData, eventToPoint, invert } from './utils';
@@ -83,7 +83,7 @@ class HoverLineRoot extends Hover {
     const x1 = xIndex !== null ? scaleOfBandwidth(xScale, data[xIndex][x]) : undefined;
     const y1 = yIndex !== null ? scaleOfBandwidth(yScale, data[yIndex][y]) : undefined;
 
-    return styled(styles)(
+    return sstyled(styles)(
       <>
         {xIndex !== null ? (
           <SHoverLine
@@ -124,7 +124,7 @@ class HoverRectRoot extends Hover {
     const xRange = xScale.range();
     const yRange = yScale.range();
 
-    return styled(styles)(
+    return sstyled(styles)(
       <>
         {xIndex !== null ? (
           <SHoverRect

package/src/Line.js

@@ -1,14 +1,19 @@
 import React from 'react';
 import { curveLinear, line as d3Line } from 'd3-shape';
-import { Component, styled } from '@semcore/core';
+import { Component, sstyled } from '@semcore/core';
 import createElement from './createElement';
-import { definedData, scaleOfBandwidth, getNullData } from './utils';
+import { definedData, definedNullData, scaleOfBandwidth, getNullData } from './utils';
 import Dots from './Dots';
+import ClipPath from './ClipPath';
+import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
 
 import style from './style/line.shadow.css';
 
 class LineRoot extends Component {
   static displayName = 'Line';
+  static style = style;
+  static enhance = [uniqueIDEnhancement()];
+
   static defaultProps = ({ x, y, $rootProps, curve = curveLinear }) => {
     const [xScale, yScale] = $rootProps.scale;
     return {
@@ -18,42 +23,65 @@ class LineRoot extends Component {
         .x((p) => scaleOfBandwidth(xScale, p[x]))
         .y((p) => scaleOfBandwidth(yScale, p[y])),
       color: '#50aef4',
+      duration: 500,
     };
   };
 
-  static style = style;
-
   getDotsProps() {
-    const { x, y, d3, color } = this.asProps;
+    const { x, y, d3, color, duration } = this.asProps;
     return {
       x,
       y,
       d3,
-      fill: color,
+      color,
+      delay: duration,
     };
   }
 
   getNullProps() {
-    const { y, d3, color, data } = this.asProps;
+    const { x, y, d3, color, data } = this.asProps;
     return {
       d3,
       // TODO: vertical
-      data: getNullData(data, d3.defined(), y),
-      fill: color,
+      data: getNullData(data, definedNullData(x, y), y),
+      color,
     };
   }
 
   render() {
     const SLine = this.Element;
-    const { styles, hide, color, d3, data } = this.asProps;
-
-    return styled(styles)(<SLine render="path" hide={hide} stroke={color} d={d3(data)} />);
+    const { styles, hide, color, uid, size, d3, data, duration } = this.asProps;
+    return sstyled(styles)(
+      <>
+        <SLine
+          clipPath={`url(#${uid})`}
+          render="path"
+          hide={hide}
+          color={color}
+          d={d3(data)}
+          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, d3, data, hide } = props;
-  return styled(styles)(<SNull render="path" d={d3(data)} hide={hide} />);
+  return sstyled(styles)(<SNull render="path" d={d3(data)} hide={hide} />);
 }
 
 export default createElement(LineRoot, {

package/src/Plot.js

@@ -1,15 +1,11 @@
 import React from 'react';
-import createComponent, { Component, styled } from '@semcore/core';
+import createComponent, { Component, Root, sstyled } from '@semcore/core';
 import { Box } from '@semcore/flex-box';
 import EventEmitter from '@semcore/utils/lib/eventEmitter';
 
-import style from './style/chart.shadow.css';
-
 class PlotRoot extends Component {
   static displayName = 'Plot';
 
-  static style = style;
-
   constructor(props) {
     super(props);
     this.eventEmitter = props.eventEmitter || new EventEmitter();
@@ -44,12 +40,12 @@ class PlotRoot extends Component {
   }
 
   render() {
-    const SPlot = this.Root;
+    const SPlot = Root;
     const { styles, width, height } = this.asProps;
 
     if (!width || !height) return null;
 
-    return styled(styles)(
+    return sstyled(styles)(
       <SPlot
         render={Box}
         tag="svg"

package/src/ResponsiveContainer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 
-import createComponent, { Component, styled } from '@semcore/core';
+import createComponent, { Component, Root, sstyled } from '@semcore/core';
 import { Box } from '@semcore/flex-box';
 import trottle from '@semcore/utils/lib/rafTrottle';
 import fire from '@semcore/utils/lib/fire';
@@ -73,9 +73,9 @@ class ResponsiveContainerRoot extends Component {
   }
 
   render() {
-    const SResponsiveContainer = this.Root;
+    const SResponsiveContainer = Root;
     const { styles } = this.asProps;
-    return styled(styles)(<SResponsiveContainer render={Box} ref={this.containerRef} />);
+    return sstyled(styles)(<SResponsiveContainer render={Box} ref={this.containerRef} />);
   }
 }
 

package/src/StackBar.js

@@ -35,7 +35,7 @@ class StackBarRoot extends Component {
         }
         return acc;
       }, []);
-      stack.keys(keys);
+      stack.keys(keys.reverse());
     }
 
     return stack(data);

package/src/StackedArea.js

@@ -31,7 +31,7 @@ class StackedAreaRoot extends Component {
         }
         return acc;
       }, []);
-      stack.keys(keys);
+      stack.keys(keys.reverse());
     }
 
     return stack(data);
@@ -43,7 +43,8 @@ class StackedAreaRoot extends Component {
     return {
       data: series.map((s) => ({
         ...s.data,
-        [y]: s[1] === 0 ? null : s[1],
+        // if null is passed in the data, then we pass it, because d3 null leads to 0
+        [y]: s.data[y] === null ? null : s[1],
         [Y0]: s[0],
       })),
       y0: Y0,

package/src/Tooltip.js

@@ -1,8 +1,9 @@
 import React, { useCallback } from 'react';
-import { Component, styled } from '@semcore/core';
+import { Component, Root, sstyled } from '@semcore/core';
 import Popper from '@semcore/popper';
 import { Box } from '@semcore/flex-box';
 import findComponent from '@semcore/utils/lib/findComponent';
+import resolveColor from '@semcore/utils/lib/color';
 import { CONSTANT } from './utils';
 import createElement from './createElement';
 
@@ -38,6 +39,7 @@ class TooltipRoot extends Component {
       (visible, data, node) => {
         this.setState(
           {
+            // TODO: тут бага если одно поля нету,то оно не перезапишет стейт
             ...data,
             $visible: visible,
           },
@@ -59,7 +61,6 @@ class TooltipRoot extends Component {
   }
 
   render() {
-    const Root = this.Root;
     const { Children, children, tag, ...other } = this.asProps;
 
     const advanceMode = !!findComponent(Children, [
@@ -101,26 +102,24 @@ function PopperPopper(props) {
 
   if (!$visible) return null;
 
-  return styled(styles)(
+  return sstyled(styles)(
     <STooltip render={Popper.Popper} childrenPosition="inside" onMouseMove={handlerCancel} />,
   );
 }
 
 function Title(props) {
-  const { Root: STitle, styles } = props;
-  return styled(styles)(<STitle render={Box} __excludeProps={['data', 'scale']} />);
+  const STitle = Root;
+  const { styles } = props;
+  return sstyled(styles)(<STitle render={Box} __excludeProps={['data', 'scale']} />);
 }
 
 function Dot(props) {
-  const { Root: SDotGroup, styles, color = '#50aef4', Children } = props;
+  const { styles, color = '#50aef4', Children } = props;
+  const SDotGroup = Root;
   const SDot = Box;
-  return styled(styles)`
-    SDot {
-      background: ${color};
-    }
-  `(
+  return sstyled(styles)(
     <SDotGroup render={Box}>
-      <SDot __excludeProps={['data', 'scale']} />
+      <SDot __excludeProps={['data', 'scale']} color={resolveColor(color)} />
       <Children />
     </SDotGroup>,
   );