@semcore/d3-chart 1.0.0 → 1.3.1-0

package/src/Area.js

@@ -3,7 +3,7 @@ import { area, curveLinear, line } from 'd3-shape';
 import Dots from './Dots';
 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';
 
@@ -48,9 +48,9 @@ class AreaRoot extends Component {
   }
 
   getNullProps() {
-    const { y, color, data, d3Line } = this.asProps;
+    const { x, y, color, data, d3Line } = this.asProps;
     return {
-      data: getNullData(data, d3Line.defined(), y),
+      data: getNullData(data, definedNullData(x, y), y),
       d3: d3Line,
       color,
     };

package/src/Bar.js

@@ -1,9 +1,10 @@
 import React from 'react';
+import { transition } from 'd3-transition';
 import { Component, sstyled } from '@semcore/core';
+import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
 import createElement from './createElement';
 import ClipPath from './ClipPath';
-import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
-import { transition } from 'd3-transition';
+import { getBandwidth, roundedPath } from './utils';
 
 import style from './style/bar.shadow.css';
 
@@ -16,6 +17,7 @@ class BarRoot extends Component {
     color: '#50aef4',
     offset: [0, 0],
     duration: 500,
+    r: 2,
   };
 
   getBackgroundProps(props, index) {
@@ -50,28 +52,54 @@ class BarRoot extends Component {
 
   renderBar(d, i) {
     const SBar = this.Element;
-    const { styles, color, x, y, y0, scale, hide, offset, duration, uid } = this.asProps;
+    const {
+      styles,
+      color,
+      x,
+      y,
+      y0,
+      scale,
+      hide,
+      offset,
+      duration,
+      uid,
+      r,
+      $index,
+      width: widthProps,
+    } = this.asProps;
 
     const [xScale, yScale] = scale;
+    const barY = yScale(Math.max(d[y0] ?? 0, d[y])) + offset[1];
+    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 width = widthProps || getBandwidth(xScale);
+    const isRounded = r !== 0;
 
     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`}
-      />,
+      <>
+        <SBar
+          key={`bar-${i}`}
+          render="path"
+          clipPath={`url(#${uid})`}
+          __excludeProps={['data', 'scale', 'value']}
+          childrenPosition="above"
+          value={d}
+          index={i}
+          hide={hide}
+          color={color}
+          d={getRect({
+            x: barX,
+            y: isRounded ? (d[y] > 0 ? barY - r : barY) : barY,
+            width,
+            height: isRounded ? height + r : height,
+            radius: r,
+            position: d[y] > 0 ? 'top' : 'bottom',
+          })}
+          use:duration={`${duration}ms`}
+        />
+      </>,
     );
   }
   render() {
@@ -112,4 +140,14 @@ function Background(props) {
   );
 }
 
+function getRect({ x, y, width, height, radius, position }) {
+  if (height <= radius) return '';
+  if (radius) {
+    if (position === 'top')
+      return roundedPath(x, y, width, height, radius, true, true, false, false);
+    return roundedPath(x, y, width, height, radius, false, false, true, true);
+  }
+  return roundedPath(x, y, width, height, radius);
+}
+
 export default createElement(BarRoot, { Background });

package/src/ClipPath.js

@@ -14,7 +14,7 @@ class ClipPath extends Component {
 
   componentDidMount() {
     const { id, tag, setAttributeTag } = this.asProps;
-    if (!document || !document.querySelector(`#${id}`)) return;
+    if (!document || !id || !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();

package/src/Donut.js

@@ -43,6 +43,29 @@ function animationUpdatePie({ halfsize, arcs, d3Arc }) {
   };
 }
 
+function animationHoverPie({ d, selector, duration, innerRadius, outerRadius }) {
+  if (duration > 0) {
+    transition()
+      .selection()
+      .select(selector)
+      .transition()
+      .duration(duration)
+      .attrTween('d', function() {
+        if (!d) return () => '';
+        const [min, max] = outerRadius;
+        const i = interpolate(min, max);
+        return function(t) {
+          const d3ArcOut = arc()
+            .innerRadius(innerRadius)
+            .outerRadius(i(t));
+          return d3ArcOut(d);
+        };
+      });
+  }
+}
+
+const increaseFactor = 8;
+
 class DonutRoot extends Component {
   static displayName = 'Donut';
   static style = style;
@@ -52,8 +75,8 @@ class DonutRoot extends Component {
     const [width, height] = size;
     const minORmax = halfsize ? Math.max : Math.min;
     const d3Arc = arc()
-      .outerRadius(minORmax(width, height) / 2)
-      .innerRadius(innerRadius);
+      .outerRadius(minORmax(width - increaseFactor * 2, height - increaseFactor * 2) / 2)
+      .innerRadius(innerRadius > increaseFactor ? innerRadius - increaseFactor : innerRadius);
     let d3Pie = pie()
       .sort(null)
       .value(([, value]) => value);
@@ -73,6 +96,7 @@ class DonutRoot extends Component {
     const { uid, id } = this.asProps;
     return id || uid;
   }
+
   virtualElement = canUseDOM() ? document.createElement('div') : {};
 
   generateGetBoundingClientRect(x = 0, y = 0) {
@@ -94,6 +118,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);
   }
 
@@ -105,12 +138,36 @@ class DonutRoot extends Component {
   };
 
   getPieProps(props) {
-    const { d3Arc } = this.asProps;
+    let { d3Arc, halfsize, size, duration, innerRadius } = this.asProps;
+    const [width, height] = size;
+    const minORmax = halfsize ? Math.max : Math.min;
+    innerRadius = innerRadius > increaseFactor ? innerRadius - increaseFactor : innerRadius;
+    const outerRadius = minORmax(width - increaseFactor * 2, height - increaseFactor * 2) / 2;
+    const data = this.arcs.find((arc) => arc.data[0] === props.dataKey);
+
     return {
-      data: this.arcs.find((arc) => arc.data[0] === props.dataKey),
+      data,
       d3Arc,
       onMouseMove: this.bindHandlerTooltip(true, props),
       onMouseLeave: this.bindHandlerTooltip(false, props),
+      onMouseOver: (e) => {
+        animationHoverPie({
+          d: data,
+          selector: `[d="${e.target.getAttribute('d')}"]`,
+          duration: duration === 0 ? 0 : 300,
+          innerRadius,
+          outerRadius: [outerRadius, outerRadius + increaseFactor],
+        });
+      },
+      onMouseOut: (e) => {
+        animationHoverPie({
+          d: data,
+          selector: `[d="${e.target.getAttribute('d')}"]`,
+          duration: duration === 0 ? 0 : 300,
+          innerRadius,
+          outerRadius: [outerRadius + increaseFactor, outerRadius],
+        });
+      },
     };
   }
 

package/src/HorizontalBar.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Component, sstyled } from '@semcore/core';
+import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
 import createElement from './createElement';
 import ClipPath from './ClipPath';
-import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
+import { getBandwidth, roundedPath } from './utils';
 
 import style from './style/bar.shadow.css';
 
@@ -15,6 +16,7 @@ class HorizontalBarRoot extends Component {
     color: '#50aef4',
     offset: [0, 0],
     duration: 500,
+    r: 2,
   };
 
   getBackgroundProps(props, index) {
@@ -26,13 +28,34 @@ class HorizontalBarRoot extends Component {
 
   renderBar(d, i) {
     const SBar = this.Element;
-    const { styles, color, x, x0, y, scale, hide, offset, uid, duration } = this.asProps;
+    const {
+      styles,
+      color,
+      x,
+      x0,
+      y,
+      scale,
+      hide,
+      offset,
+      uid,
+      duration,
+      r,
+      $index,
+      height: heightProps,
+      onMouseMove,
+      onMouseLeave,
+    } = this.asProps;
     const [xScale, yScale] = scale;
+    const barY = yScale(d[y]) + offset[1];
+    const barX = xScale(Math.min(d[x0] ?? 0, d[x])) + offset[0];
+    const height = heightProps || getBandwidth(yScale);
+    const width = Math.abs(xScale(d[x]) - Math.max(xScale(xScale.domain()[0]), xScale(d[x0] ?? 0)));
+    const isRounded = r !== 0;
 
     return sstyled(styles)(
       <SBar
         key={`horizontal-bar-${i}`}
-        render="rect"
+        render="path"
         clipPath={`url(#${uid})`}
         __excludeProps={['data', 'scale', 'value']}
         childrenPosition="above"
@@ -40,11 +63,17 @@ class HorizontalBarRoot extends Component {
         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]}
+        d={getHorizontalRect({
+          x: isRounded ? (d[x] > 0 ? barX : barX - r) : barX,
+          y: barY,
+          width: isRounded ? width + r : width,
+          height,
+          radius: r,
+          position: d[x] > 0 ? 'right' : 'left',
+        })}
         use:duration={`${duration}ms`}
+        onMouseMove={onMouseMove}
+        onMouseLeave={onMouseLeave}
       />,
     );
   }
@@ -90,4 +119,14 @@ function Background(props) {
   );
 }
 
+function getHorizontalRect({ x, y, width, height, radius, position }) {
+  if (width <= radius) return '';
+  if (radius) {
+    if (position === 'right')
+      return roundedPath(x, y, width, height, radius, false, true, false, true);
+    return roundedPath(x, y, width, height, radius, true, false, true, false);
+  }
+  return roundedPath(x, y, width, height, radius);
+}
+
 export default createElement(HorizontalBarRoot, { Background });

package/src/Hover.js

@@ -2,7 +2,8 @@ import React from 'react';
 import { Component, sstyled } from '@semcore/core';
 import createElement from './createElement';
 import trottle from '@semcore/utils/lib/rafTrottle';
-import { scaleOfBandwidth, getIndexFromData, eventToPoint, invert } from './utils';
+import canUseDOM from '@semcore/utils/lib/canUseDOM';
+import { scaleOfBandwidth, getIndexFromData, eventToPoint, invert, CONSTANT } from './utils';
 
 import style from './style/hover.shadow.css';
 
@@ -14,10 +15,15 @@ class Hover extends Component {
     yIndex: null,
   };
 
-  hoverRef = React.createRef();
+  virtualElement = canUseDOM() ? document.createElement('div') : {};
+
+  generateGetBoundingClientRect(x = 0, y = 0) {
+    return () => ({ width: 0, height: 0, top: y, right: x, bottom: y, left: x });
+  }
 
   handlerMouseMoveRoot = trottle((e) => {
     const { eventEmitter, data, scale, x, y, rootRef } = this.asProps;
+    const { clientX, clientY } = e;
     const [xScale, yScale] = scale;
     const [pX, pY] = eventToPoint(e, rootRef.current);
     const vX = invert(xScale, pX);
@@ -27,12 +33,18 @@ class Hover extends Component {
     const yIndex =
       y === undefined || vY === undefined ? null : getIndexFromData(data, yScale, y, vY);
     const state = { xIndex, yIndex };
+    this.virtualElement.getBoundingClientRect = this.generateGetBoundingClientRect(
+      clientX,
+      clientY,
+    );
+    this.virtualElement[CONSTANT.VIRTUAL_ELEMENT] = true;
+
     this.setState(state, () => {
       eventEmitter.emit(
         'onTooltipVisible',
         xIndex !== null || yIndex !== null,
         state,
-        this.hoverRef.current,
+        this.virtualElement,
       );
     });
   });
@@ -86,26 +98,10 @@ class HoverLineRoot extends Hover {
     return sstyled(styles)(
       <>
         {xIndex !== null ? (
-          <SHoverLine
-            render="line"
-            ref={this.hoverRef}
-            index={xIndex}
-            x1={x1}
-            y1={yRange[0]}
-            x2={x1}
-            y2={yRange[1]}
-          />
+          <SHoverLine render="line" index={xIndex} x1={x1} y1={yRange[0]} x2={x1} y2={yRange[1]} />
         ) : null}
         {yIndex !== null ? (
-          <SHoverLine
-            render="line"
-            ref={this.hoverRef}
-            index={yIndex}
-            x1={xRange[0]}
-            y1={y1}
-            x2={xRange[1]}
-            y2={y1}
-          />
+          <SHoverLine render="line" index={yIndex} x1={xRange[0]} y1={y1} x2={xRange[1]} y2={y1} />
         ) : null}
       </>,
     );
@@ -129,7 +125,6 @@ class HoverRectRoot extends Hover {
         {xIndex !== null ? (
           <SHoverRect
             render="rect"
-            ref={this.hoverRef}
             index={xIndex}
             width={xScale.step() - xScale.paddingInner() / 2}
             height={yRange[0] - yRange[1]}
@@ -140,7 +135,6 @@ class HoverRectRoot extends Hover {
         {yIndex !== null ? (
           <SHoverRect
             render="rect"
-            ref={this.hoverRef}
             index={yIndex}
             width={xRange[1] - xRange[0]}
             height={yScale.step() - yScale.paddingInner() / 2}

package/src/Line.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { curveLinear, line as d3Line } from 'd3-shape';
 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';
@@ -39,11 +39,11 @@ class LineRoot extends Component {
   }
 
   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),
+      data: getNullData(data, definedNullData(x, y), y),
       color,
     };
   }

package/src/StackBar.js

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

package/src/types/Bar.d.ts

@@ -15,6 +15,10 @@ export interface IBarProps extends IContext {
    * @default 500
    */
   duration?: number;
+  /** Radius of curvature
+   * @default 2
+   */
+  r?: number;
 }
 
 export interface IBarContext {

package/src/types/HorizontalBar.d.ts

@@ -14,6 +14,10 @@ export interface IHorizontalBarProps extends IContext {
    * @default 500
    */
   duration?: number;
+  /** Radius of curvature
+   * @default 2
+   */
+  r?: number;
 }
 
 declare const HorizontalBar: (<T>(

package/src/utils.js

@@ -24,10 +24,16 @@ export function invert(scale, value) {
     .range(range[0] <= range[1] ? domain : domain.slice().reverse())(value);
 }
 
-export function definedData(x, y) {
+export function definedNullData(x, y) {
   return (p) => p[x] !== null && p[y] !== null;
 }
 
+export function definedData(x, y) {
+  return (p) => {
+    return p[x] !== null && p[x] !== undefined && (p[y] !== null && p[y] !== undefined);
+  };
+}
+
 export function scaleOfBandwidth(scale, value) {
   return scale.bandwidth ? scale(value) + scale.bandwidth() / 2 : scale(value);
 }
@@ -97,3 +103,48 @@ export function getIndexFromData(data, scale, key, value) {
     return null;
   }
 }
+
+export function roundedPath(x, y, w, h, r, tl = false, tr = false, bl = false, br = false) {
+  let retval;
+  retval = 'M' + (x + r) + ',' + y;
+  retval += 'h' + (w - 2 * r);
+  if (tr) {
+    retval += 'a' + r + ',' + r + ' 0 0 1 ' + r + ',' + r;
+  } else {
+    retval += 'h' + r;
+    retval += 'v' + r;
+  }
+  retval += 'v' + (h - 2 * r);
+  if (br) {
+    retval += 'a' + r + ',' + r + ' 0 0 1 ' + -r + ',' + r;
+  } else {
+    retval += 'v' + r;
+    retval += 'h' + -r;
+  }
+  retval += 'h' + (2 * r - w);
+  if (bl) {
+    retval += 'a' + r + ',' + r + ' 0 0 1 ' + -r + ',' + -r;
+  } else {
+    retval += 'h' + -r;
+    retval += 'v' + -r;
+  }
+  retval += 'v' + (2 * r - h);
+  if (tl) {
+    retval += 'a' + r + ',' + r + ' 0 0 1 ' + r + ',' + -r;
+  } else {
+    retval += 'v' + -r;
+    retval += 'h' + r;
+  }
+  retval += 'z';
+  return retval;
+}
+
+export function getBandwidth(scale) {
+  if ('bandwidth' in scale) {
+    return scale.bandwidth();
+  }
+
+  const range = scale.range();
+  const domain = scale.domain();
+  return Math.abs(range[range.length - 1] - range[0]) / domain.length;
+}