@semcore/d3-chart 1.5.3 → 1.6.0

package/src/Bubble.js

@@ -0,0 +1,189 @@
+import React from 'react';
+import { Component, sstyled } from '@semcore/core';
+import canUseDOM from '@semcore/utils/lib/canUseDOM';
+import { CONSTANT } from './utils';
+import createElement from './createElement';
+import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
+import { transition } from 'd3-transition';
+import style from './style/bubble.shadow.css';
+import ClipPath from './ClipPath';
+import { scaleSqrt } from 'd3-scale';
+
+const memoize = (func) => {
+  const results = {};
+  return (argsKey) => {
+    if (!results[argsKey]) {
+      results[argsKey] = func(argsKey);
+    }
+    return results[argsKey];
+  };
+};
+
+const measureText = memoize((text) => {
+  let span = document.createElement('span');
+  span.append(document.createTextNode(text));
+  span.style.display = 'inline-block';
+  document.body.append(span);
+  const textLength = span.offsetWidth;
+  span.remove();
+  return textLength;
+});
+
+class BubbleRoot extends Component {
+  static displayName = 'Bubble';
+  static style = style;
+  static enhance = [uniqueIDEnhancement()];
+
+  static defaultProps = {
+    offset: [0, 0],
+    duration: 500,
+    markedCross: true,
+  };
+
+  virtualElement = canUseDOM() ? document.createElement('div') : {};
+
+  generateGetBoundingClientRect(x = 0, y = 0) {
+    return () => ({ width: 0, height: 0, top: y, right: x, bottom: y, left: x });
+  }
+
+  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);
+  };
+
+  animationCircle() {
+    const { duration, uid, data, value } = this.asProps;
+    const z = scaleSqrt()
+      .domain([0, Math.max(...data.map((el) => el[value]))])
+      .range([5.5, 50.5]);
+
+    const selectRect = transition()
+      .selection()
+      .selectAll(`[id^=${uid}${uid}]`)
+      .attr('r', 0);
+
+    const selectRectNode = selectRect.node();
+    if (duration > 0 && selectRectNode) {
+      selectRect
+        .transition()
+        .duration(duration)
+        .attr('r', function(_, ind) {
+          return z(data[ind][value]);
+        });
+    }
+  }
+
+  componentDidUpdate() {
+    this.animationCircle();
+  }
+
+  componentDidMount() {
+    this.animationCircle();
+  }
+
+  renderCircle(d, i) {
+    const {
+      color,
+      scale,
+      x,
+      y,
+      offset,
+      styles,
+      uid,
+      duration,
+      value,
+      label,
+      markedCross,
+      size,
+      data,
+    } = this.asProps;
+    const [xScale, yScale] = scale;
+
+    const SBubble = this.Element;
+    const SCenter = 'text';
+    const SLabel = 'text';
+    const z = scaleSqrt()
+      .domain([0, Math.max(...data.map((el) => el[value]))])
+      .range([5.5, 50.5]);
+
+    const margin = Math.min(xScale.range()[0], xScale.range()[1]);
+
+    const labelPosition =
+      size[0] - 2 * margin - (xScale(d[x]) + offset[0] + z(d[value])) < measureText(d[label])
+        ? 'right'
+        : 'left';
+    const labelDistance = {
+      right: xScale(d[x]) + offset[0] - z(d[value]),
+      left: xScale(d[x]) + offset[0] + z(d[value]),
+    }[labelPosition];
+
+    return sstyled(styles)(
+      <g
+        key={`circle(#${i})`}
+        onMouseMove={this.bindHandlerTooltip(true, { xIndex: i })}
+        onMouseLeave={this.bindHandlerTooltip(false, { xIndex: i })}
+      >
+        {markedCross && (
+          <SCenter
+            x={xScale(d[x]) + offset[0]}
+            y={yScale(d[y]) + offset[1]}
+            dy=".3em"
+            clipPath={`url(#${uid})`}
+            color={d[color] ?? color}
+          >
+            &#43;
+          </SCenter>
+        )}
+        <SBubble
+          id={`${uid}${uid}`}
+          render="circle"
+          clipPath={`url(#${uid})`}
+          cx={xScale(d[x]) + offset[0]}
+          cy={yScale(d[y]) + offset[1]}
+          color={d[color]}
+          r={z(d[value])}
+          use:duration={`${duration}ms`}
+        />
+        {d[label] && (
+          <SLabel
+            x={labelDistance}
+            y={yScale(d[y]) + offset[1]}
+            dy=".3em"
+            clipPath={`url(#${uid})`}
+            position={labelPosition}
+            color={d[color]}
+          >
+            {d[label]}
+          </SLabel>
+        )}
+      </g>,
+    );
+  }
+
+  render() {
+    const { data, uid, size, scale } = this.asProps;
+    const [xScale, yScale] = scale;
+    const marginX = Math.min(xScale.range()[0], xScale.range()[1]);
+    const marginY = Math.min(yScale.range()[0], yScale.range()[1]);
+
+    return (
+      <>
+        {data.map(this.renderCircle.bind(this))}
+        {data.map(this.animationCircle.bind(this))}
+        <ClipPath
+          id={uid}
+          x={marginX}
+          y={marginY}
+          width={`${size[0] - 2 * marginX}px`}
+          height={`${size[1] - 2 * marginY}px`}
+        />
+      </>
+    );
+  }
+}
+
+const Bubble = createElement(BubbleRoot);
+
+export default Bubble;

package/src/Donut.js

@@ -181,12 +181,7 @@ class DonutRoot extends Component {
   getEmptyDataProps() {
     const { d3Arc } = this.asProps;
     return {
-      data: {
-        endAngle: Math.PI * 2,
-        startAngle: 0,
-      },
       d3Arc,
-      color: '#E4ECF1',
     };
   }
 
@@ -236,10 +231,16 @@ class DonutRoot extends Component {
   }
 }
 
-function Pie({ Element: SPie, styles, d3Arc, data, color = '#50aef4' }) {
+function Pie({ Element: SPie, styles, d3Arc, data, color }) {
   return sstyled(styles)(<SPie render="path" color={color} d={d3Arc(data)} />);
 }
 
+function EmptyData({ Element: SEmptyData, styles, d3Arc, color }) {
+  return sstyled(styles)(
+    <SEmptyData render="path" color={color} d={d3Arc({ endAngle: Math.PI * 2, startAngle: 0 })} />,
+  );
+}
+
 function Label({ Element: SLabel, styles, Children }) {
   return sstyled(styles)(
     <SLabel render="text" x="0" y="0">
@@ -248,6 +249,6 @@ function Label({ Element: SLabel, styles, Children }) {
   );
 }
 
-const Donut = createElement(DonutRoot, { Pie, Label, EmptyData: Pie });
+const Donut = createElement(DonutRoot, { Pie, Label, EmptyData });
 
 export default Donut;

package/src/GroupBar.js

@@ -20,10 +20,14 @@ class GroupBarRoot extends Component {
     if (scaleGroup) return scaleGroup;
 
     const domain = React.Children.toArray(getOriginChildren(Children)).reduce((acc, child) => {
-      if (React.isValidElement(child) && child.type === GroupBar.Bar) {
+      if (React.isValidElement(child) && child.type === GroupBar.Bar && !child.props.hide) {
         acc.push(child.props.y);
       }
-      if (React.isValidElement(child) && child.type === GroupBar.HorizontalBar) {
+      if (
+        React.isValidElement(child) &&
+        child.type === GroupBar.HorizontalBar &&
+        !child.props.hide
+      ) {
         acc.push(child.props.x);
       }
       return acc;

package/src/HorizontalBar.js

@@ -13,7 +13,6 @@ class HorizontalBarRoot extends Component {
   static style = style;
 
   static defaultProps = {
-    color: '#50aef4',
     offset: [0, 0],
     duration: 500,
     r: 2,
@@ -44,20 +43,18 @@ class HorizontalBarRoot extends Component {
       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);
-    let width = Math.abs(xScale(d[x]) - Math.max(xScale(xScale.domain()[0]), xScale(d[x0] ?? 0)));
-    width = isRounded ? width + r : width;
-    const isRounded = r !== 0;
-    const xValue = isRounded ? (d[x] > 0 ? barX : barX - r) : barX;
+    const width = Math.abs(xScale(d[x]) - Math.max(xScale(xScale.domain()[0]), xScale(d[x0] ?? 0)));
     const dSvg = getHorizontalRect({
-      x: xValue,
+      x: barX,
       y: barY,
       width,
       height,
-      radius: r,
+      radius: Array.isArray(r) ? r[i] : r,
       position: d[x] > 0 ? 'right' : 'left',
     });
 
@@ -72,7 +69,7 @@ class HorizontalBarRoot extends Component {
         index={i}
         hide={hide}
         color={color}
-        x={xValue}
+        x={barX}
         y={barY}
         width={width}
         height={height}

package/src/Line.js

@@ -14,15 +14,14 @@ class LineRoot extends Component {
   static style = style;
   static enhance = [uniqueIDEnhancement()];
 
-  static defaultProps = ({ x, y, $rootProps, curve = curveLinear }) => {
-    const [xScale, yScale] = $rootProps.scale;
+  static defaultProps = ({ x, y, $rootProps, curve = curveLinear, scale }) => {
+    const [xScale, yScale] = scale || $rootProps.scale;
     return {
       d3: d3Line()
         .defined(definedData(x, y))
         .curve(curve)
         .x((p) => scaleOfBandwidth(xScale, p[x]))
         .y((p) => scaleOfBandwidth(yScale, p[y])),
-      color: '#50aef4',
       duration: 500,
     };
   };

package/src/ScatterPlot.js

@@ -0,0 +1,130 @@
+import React from 'react';
+import { Component, sstyled } from '@semcore/core';
+import canUseDOM from '@semcore/utils/lib/canUseDOM';
+import { CONSTANT } from './utils';
+import createElement from './createElement';
+import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
+import { transition } from 'd3-transition';
+import style from './style/scatterplot.shadow.css';
+import ClipPath from './ClipPath';
+
+class ScatterPlotRoot extends Component {
+  static displayName = 'ScatterPlot';
+  static style = style;
+  static enhance = [uniqueIDEnhancement()];
+
+  static defaultProps = {
+    offset: [0, 0],
+    duration: 500,
+  };
+
+  virtualElement = canUseDOM() ? document.createElement('div') : {};
+
+  generateGetBoundingClientRect(x = 0, y = 0) {
+    return () => ({ width: 0, height: 0, top: y, right: x, bottom: y, left: x });
+  }
+
+  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);
+  };
+
+  animationCircle() {
+    const { duration, uid, r, value } = this.asProps;
+    const radius = r ? r : value ? 12 : 5.5;
+    const selectRect = transition()
+      .selection()
+      .selectAll(`[id^=${uid}]`)
+      .attr('r', 0);
+    const selectRectNode = selectRect.node();
+
+    if (duration > 0 && selectRectNode) {
+      selectRect
+        .transition()
+        .duration(duration)
+        .attr('r', radius);
+    }
+  }
+
+  componentDidUpdate() {
+    this.animationCircle();
+  }
+
+  componentDidMount() {
+    this.animationCircle();
+  }
+
+  renderCircle(d, i) {
+    const {
+      color,
+      scale,
+      x,
+      y,
+      r,
+      offset,
+      styles,
+      uid,
+      duration,
+      value,
+      valueColor,
+    } = this.asProps;
+    const [xScale, yScale] = scale;
+    const SScatterPlot = this.Element;
+    const SValue = 'text';
+    return sstyled(styles)(
+      <g
+        key={`circle(#${i})`}
+        onMouseMove={this.bindHandlerTooltip(true, { xIndex: i })}
+        onMouseLeave={this.bindHandlerTooltip(false, { xIndex: i })}
+      >
+        <SScatterPlot
+          id={`${uid}${i}`}
+          render="circle"
+          clipPath={`url(#${uid})`}
+          cx={xScale(d[x]) + offset[0]}
+          cy={yScale(d[y]) + offset[1]}
+          color={d[color]}
+          r={r}
+          use:duration={`${duration}ms`}
+        />
+        {d[value] && (
+          <SValue
+            x={xScale(d[x]) + offset[0]}
+            y={yScale(d[y]) + offset[1]}
+            dy=".3em"
+            clipPath={`url(#${uid})`}
+            color={d[valueColor]}
+          >
+            {d[value]}
+          </SValue>
+        )}
+      </g>,
+    );
+  }
+
+  render() {
+    const { data, uid, size, scale } = this.asProps;
+    const [xScale, yScale] = scale;
+    const marginX = Math.min(xScale.range()[0], xScale.range()[1]);
+    const marginY = Math.min(yScale.range()[0], yScale.range()[1]);
+
+    return (
+      <>
+        {data.map(this.renderCircle.bind(this))}
+        <ClipPath
+          id={uid}
+          x={marginX}
+          y={marginY}
+          width={`${size[0] - 2 * marginX}px`}
+          height={`${size[1] - 2 * marginY}px`}
+        />
+      </>
+    );
+  }
+}
+
+const ScatterPlot = createElement(ScatterPlotRoot);
+
+export default ScatterPlot;

package/src/StackBar.js

@@ -19,7 +19,7 @@ class StackBarRoot extends Component {
   static defaultProps = () => {
     const stack = d3Stack();
     stack[DEFAULT_INSTANCE] = true;
-    return { stack };
+    return { stack, r: 2 };
   };
 
   getSeries() {
@@ -27,10 +27,14 @@ class StackBarRoot extends Component {
 
     if (stack[DEFAULT_INSTANCE]) {
       const keys = React.Children.toArray(getOriginChildren(Children)).reduce((acc, child) => {
-        if (React.isValidElement(child) && child.type === StackBar.Bar) {
+        if (React.isValidElement(child) && child.type === StackBar.Bar && !child.props.hide) {
           acc.push(child.props.y);
         }
-        if (React.isValidElement(child) && child.type === StackBar.HorizontalBar) {
+        if (
+          React.isValidElement(child) &&
+          child.type === StackBar.HorizontalBar &&
+          !child.props.hide
+        ) {
           acc.push(child.props.x);
         }
         return acc;
@@ -42,9 +46,15 @@ class StackBarRoot extends Component {
   }
 
   getBarProps({ y }) {
-    const { x } = this.asProps;
+    const { x, r } = this.asProps;
 
-    const series = this.series.find((s) => s.key === y);
+    const seriesIndex = this.series.findIndex((s) => s.key === y);
+    // or [] if hide bar
+    const series = this.series[seriesIndex] || [];
+
+    const rBar = series.map((s, i) =>
+      this.series.slice(seriesIndex + 1).some((bar) => bar[i][0] !== bar[i][1]) ? 0 : r,
+    );
 
     return {
       data: series.map((s) => ({
@@ -54,13 +64,19 @@ class StackBarRoot extends Component {
       })),
       y0: XY0,
       x,
+      r: rBar,
     };
   }
 
   getHorizontalBarProps({ x }) {
-    const { y } = this.asProps;
+    const { y, r } = this.asProps;
+
+    const seriesIndex = this.series.findIndex((s) => s.key === x);
+    const series = this.series[seriesIndex];
 
-    const series = this.series.find((s) => s.key === x);
+    const rBar = series.map((s, i) =>
+      this.series.slice(seriesIndex + 1).some((bar) => bar[i][0] !== bar[i][1]) ? 0 : r,
+    );
 
     return {
       data: series.map((s) => ({
@@ -70,6 +86,7 @@ class StackBarRoot extends Component {
       })),
       x0: XY0,
       y,
+      r: rBar,
     };
   }
 

package/src/StackedArea.js

@@ -26,7 +26,7 @@ class StackedAreaRoot extends Component {
 
     if (stack[DEFAULT_INSTANCE]) {
       const keys = React.Children.toArray(getOriginChildren(Children)).reduce((acc, child) => {
-        if (React.isValidElement(child) && child.type === StackedArea.Area) {
+        if (React.isValidElement(child) && child.type === StackedArea.Area && !child.props.hide) {
           acc.push(child.props.y);
         }
         return acc;
@@ -39,7 +39,8 @@ class StackedAreaRoot extends Component {
 
   getAreaProps({ y }) {
     const { x } = this.asProps;
-    const series = this.series.find((s) => s.key === y);
+    // or [] if hide area
+    const series = this.series.find((s) => s.key === y) || [];
     return {
       data: series.map((s) => ({
         ...s.data,

package/src/Tooltip.js

@@ -3,9 +3,9 @@ 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';
+import resolveColor from '@semcore/utils/lib/color';
 
 import style from './style/tooltip.shadow.css';
 
@@ -114,7 +114,7 @@ function Title(props) {
 }
 
 function Dot(props) {
-  const { styles, color = '#50aef4', Children } = props;
+  const { styles, color, Children } = props;
   const SDotGroup = Root;
   const SDot = Box;
   return sstyled(styles)(

package/src/Venn.js

@@ -81,7 +81,7 @@ class VennRoot extends Component {
   }
 }
 
-function Circle({ Element: SCircle, styles, color = '#3AB011', data, duration }) {
+function Circle({ Element: SCircle, styles, color, data, duration }) {
   return sstyled(styles)(
     <SCircle
       render="circle"

package/src/color.js

@@ -1,35 +1,8 @@
-export const colors = {
-  'blue-01': '#50aef4',
-  'blue-02': '#91c7ef',
-  'blue-03': '#0e75c2',
-  'blue-04': '#d1e8f8',
-  'blue-05': '#084c80',
-  'green-01': '#3ab011',
-  'green-02': '#91d27b',
-  'green-03': '#278707',
-  'green-04': '#d1edc8',
-  'green-05': '#1a6700',
-  'orange-01': '#ff8e29',
-  'orange-02': '#fec089',
-  'orange-03': '#da6905',
-  'orange-04': '#ffe5cd',
-  'orange-05': '#a14e03',
-  'violet-01': '#890c85',
-  'violet-02': '#c783c5',
-  'violet-03': '#6e026b',
-  'violet-04': '#e7cbe6',
-  'violet-05': '#4d024b',
-  'red-01': '#e91e25',
-  'red-02': '#f69498',
-  'red-03': '#bd0000',
-  'red-04': '#fbd2d3',
-  'red-05': '#830005',
-  'yellow-01': '#ffc83f',
-  'yellow-02': '#ffdb82',
-  'yellow-03': '#e4aa18',
-  'yellow-04': '#ffebb9',
-  'yellow-05': '#b3840c',
-};
+/*__semcore-vars__:"./style/var.css"*/
+const colors = preval`
+  const path = require('path');
+  module.exports = require('@semcore/babel-plugin-react-semcore/utils/vars')(path.resolve(__dirname, './style/var.css'));
+`;
 
 let componentRenderIndex = 0;
 const cache = {};
@@ -37,6 +10,7 @@ const colorValues = Object.keys(colors).sort((a, b) => {
   return parseInt(a.match(/[0-9]/g).join(''), 10) - parseInt(b.match(/[0-9]/g).join(''), 10);
 });
 
+export { colors };
 export default function getColor(key) {
   if (cache[key]) {
     return cache[key];

package/src/index.js

@@ -10,6 +10,8 @@ export { default as GroupBar } from './GroupBar';
 export { default as StackBar } from './StackBar';
 export { default as Area } from './Area';
 export { default as StackedArea } from './StackedArea';
+export { default as ScatterPlot } from './ScatterPlot';
+export { default as Bubble } from './Bubble';
 export { default as Donut } from './Donut';
 export { default as Venn } from './Venn';
 

package/src/style/area.shadow.css

@@ -1,14 +1,24 @@
+@import '@semcore/d3-chart/src/style/var.css';
+
 SArea {
-  fill: var(--color);
+  fill: var(--blue-01);
   fill-opacity: 0.4;
 }
 
+SArea[color] {
+  fill: var(--color);
+}
+
 SAreaLine {
-  stroke: var(--color);
+  stroke: var(--blue-01);
   stroke-width: 3;
   fill: transparent;
 }
 
+SAreaLine[color] {
+  stroke: var(--color);
+}
+
 SArea,
 SAreaLine {
   transition-property: d;

package/src/style/bar.shadow.css

@@ -1,16 +1,21 @@
 @import '@semcore/utils/style/var.css';
+@import '@semcore/d3-chart/src/style/var.css';
 
 SBar {
-  fill: var(--color);
+  fill: var(--blue-01);
   transition-property: height, width, y;
   transition-duration: var(--duration);
   transition-timing-function: ease-in-out;
 }
 
+SBar[color] {
+  fill: var(--color);
+}
+
 SBar[hide] {
   display: none;
 }
 
 SBackground {
-  fill: color-mod(var(--mystic));
+  fill: var(--mystic);
 }