@semcore/d3-chart 1.5.6 → 1.6.0

package/lib/es6/StackBar.js

@@ -27,15 +27,15 @@ var _ref = (
 /*__reshadow_css_start__*/
 __css__(
 /*__inner_css_start__*/
-".___SBar_jj14u_gg_{fill:#50aef4;transition-property:height,width,y;transition-duration:var(--duration);transition-timing-function:ease-in-out}.___SBar_jj14u_gg_.__color_jj14u_gg_{fill:var(--color)}.___SBar_jj14u_gg_.__hide_jj14u_gg_{display:none}.___SBackground_jj14u_gg_{fill:#e4ecf1}"
+".___SBar_1q91m_gg_{fill:#50aef4;transition-property:height,width,y;transition-duration:var(--duration);transition-timing-function:ease-in-out}.___SBar_1q91m_gg_.__color_1q91m_gg_{fill:var(--color)}.___SBar_1q91m_gg_.__hide_1q91m_gg_{display:none}.___SBackground_1q91m_gg_{fill:#e4ecf1}"
 /*__inner_css_end__*/
-, "1iy4upi_gg_")
+, "1uiyv3q_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SBar": "___SBar_jj14u_gg_",
-  "_color": "__color_jj14u_gg_",
-  "_hide": "__hide_jj14u_gg_",
-  "__SBackground": "___SBackground_jj14u_gg_"
+  "__SBar": "___SBar_1q91m_gg_",
+  "_color": "__color_1q91m_gg_",
+  "_hide": "__hide_1q91m_gg_",
+  "__SBackground": "___SBackground_1q91m_gg_"
 }),
     style = _extends({}, _ref);
 

package/lib/es6/StackedArea.js

@@ -26,16 +26,16 @@ var _ref = (
 /*__reshadow_css_start__*/
 __css__(
 /*__inner_css_start__*/
-".___SArea_zz80o_gg_{fill:#50aef4;fill-opacity:.4}.___SArea_zz80o_gg_.__color_zz80o_gg_{fill:var(--color)}.___SAreaLine_zz80o_gg_{stroke:#50aef4;stroke-width:3;fill:transparent}.___SAreaLine_zz80o_gg_.__color_zz80o_gg_{stroke:var(--color)}.___SArea_zz80o_gg_,.___SAreaLine_zz80o_gg_{transition-property:d;transition-duration:var(--duration);transition-timing-function:ease-in-out}.___SNull_zz80o_gg_{fill:transparent;stroke:#bdc4c6;stroke-dasharray:4}.___SNull_zz80o_gg_.__hide_zz80o_gg_{display:none}"
+".___SArea_1pbv6_gg_{fill:#50aef4;fill-opacity:.4}.___SArea_1pbv6_gg_.__color_1pbv6_gg_{fill:var(--color)}.___SAreaLine_1pbv6_gg_{stroke:#50aef4;stroke-width:3;fill:transparent}.___SAreaLine_1pbv6_gg_.__color_1pbv6_gg_{stroke:var(--color)}.___SArea_1pbv6_gg_,.___SAreaLine_1pbv6_gg_{transition-property:d;transition-duration:var(--duration);transition-timing-function:ease-in-out}.___SNull_1pbv6_gg_{fill:transparent;stroke:#bdc4c6;stroke-dasharray:4}.___SNull_1pbv6_gg_.__hide_1pbv6_gg_{display:none}"
 /*__inner_css_end__*/
-, "1vghdzd_gg_")
+, "2qdwr1_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SArea": "___SArea_zz80o_gg_",
-  "_color": "__color_zz80o_gg_",
-  "__SAreaLine": "___SAreaLine_zz80o_gg_",
-  "__SNull": "___SNull_zz80o_gg_",
-  "_hide": "__hide_zz80o_gg_"
+  "__SArea": "___SArea_1pbv6_gg_",
+  "_color": "__color_1pbv6_gg_",
+  "__SAreaLine": "___SAreaLine_1pbv6_gg_",
+  "__SNull": "___SNull_1pbv6_gg_",
+  "_hide": "__hide_1pbv6_gg_"
 }),
     style = _extends({}, _ref);
 

package/lib/es6/Tooltip.js

@@ -33,17 +33,17 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___STooltip_1rv9e_gg_{position:relative;background-color:#fff;border-radius:3px;border:1px solid #bdc4c6;box-sizing:border-box;box-shadow:0 2px 5px 0 rgba(0,0,0,.25),0 -2px 5px -2px rgba(0,0,0,.25);padding:12px}.___STitle_1rv9e_gg_{font-size:12px;line-height:1.5;color:#757575;margin-bottom:8px}.___SDotGroup_1rv9e_gg_{display:flex;align-items:center}.___SDot_1rv9e_gg_{width:8px;height:8px;border-radius:50%;margin-right:8px;background:#50aef4}.___SDot_1rv9e_gg_.__color_1rv9e_gg_{background:var(--color_1rmqsj5)}"
+".___STooltip_16ivl_gg_{font-size:12px;line-height:1.5;position:relative;background-color:#fff;border-radius:3px;border:1px solid #bdc4c6;box-sizing:border-box;box-shadow:0 2px 5px 0 rgba(0,0,0,.25),0 -2px 5px -2px rgba(0,0,0,.25);padding:12px}.___STitle_16ivl_gg_{color:#757575;margin-bottom:8px}.___SDotGroup_16ivl_gg_{display:flex;align-items:center}.___SDot_16ivl_gg_{width:8px;height:8px;border-radius:50%;margin-right:8px;background:#50aef4}.___SDot_16ivl_gg_.__color_16ivl_gg_{background:var(--color_drazch)}"
 /*__inner_css_end__*/
-, "1rmqsj5_gg_")
+, "drazch_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__STooltip": "___STooltip_1rv9e_gg_",
-  "__STitle": "___STitle_1rv9e_gg_",
-  "__SDotGroup": "___SDotGroup_1rv9e_gg_",
-  "__SDot": "___SDot_1rv9e_gg_",
-  "_color": "__color_1rv9e_gg_",
-  "--color": "--color_1rmqsj5"
+  "__STooltip": "___STooltip_16ivl_gg_",
+  "__STitle": "___STitle_16ivl_gg_",
+  "__SDotGroup": "___SDotGroup_16ivl_gg_",
+  "__SDot": "___SDot_16ivl_gg_",
+  "_color": "__color_16ivl_gg_",
+  "--color": "--color_drazch"
 });
 
 var TooltipRoot = /*#__PURE__*/function (_Component) {

package/lib/es6/Venn.js

@@ -26,16 +26,16 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SCircle_c0tdq_gg_{fill:#3ab011;stroke:#fff;stroke-width:2px;fill-opacity:.5;transition-property:cx,cy;transition-duration:var(--duration_1j56sbj);transition-timing-function:ease-in-out}.___SCircle_c0tdq_gg_:hover{fill-opacity:.7}.___SCircle_c0tdq_gg_.__color_c0tdq_gg_{fill:var(--color_1j56sbj)}.___SIntersection_c0tdq_gg_{stroke:#fff;stroke-width:2px;fill-opacity:0}.___SIntersection_c0tdq_gg_:hover{fill-opacity:.1}"
+".___SCircle_1fulb_gg_{fill:#3ab011;stroke:#fff;stroke-width:2px;fill-opacity:.5;transition-property:cx,cy;transition-duration:var(--duration_1j56sbj);transition-timing-function:ease-in-out}.___SCircle_1fulb_gg_:hover{fill-opacity:.7}.___SCircle_1fulb_gg_.__color_1fulb_gg_{fill:var(--color_1j56sbj)}.___SIntersection_1fulb_gg_{stroke:#fff;stroke-width:2px;fill-opacity:0}.___SIntersection_1fulb_gg_:hover{fill-opacity:.1}"
 /*__inner_css_end__*/
 , "1j56sbj_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SCircle": "___SCircle_c0tdq_gg_",
+  "__SCircle": "___SCircle_1fulb_gg_",
   "--duration": "--duration_1j56sbj",
-  "_color": "__color_c0tdq_gg_",
+  "_color": "__color_1fulb_gg_",
   "--color": "--color_1j56sbj",
-  "__SIntersection": "___SIntersection_c0tdq_gg_"
+  "__SIntersection": "___SIntersection_1fulb_gg_"
 });
 
 var VennRoot = /*#__PURE__*/function (_Component) {

package/lib/es6/index.js

@@ -7,6 +7,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';
 export { default as Tooltip } from './Tooltip';

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.js"],"names":["default","Plot","XAxis","YAxis","Line","Bar","HorizontalBar","GroupBar","StackBar","Area","StackedArea","Donut","Venn","Tooltip","ResponsiveContainer","HoverLine","HoverRect","minMax","colors"],"mappings":"AAAA,SAASA,OAAO,IAAIC,IAApB,QAAgC,QAAhC;AAEA,SAASC,KAAT,EAAgBC,KAAhB,QAA6B,QAA7B;AAEA,SAASH,OAAO,IAAII,IAApB,QAAgC,QAAhC;AAEA,SAASJ,OAAO,IAAIK,GAApB,QAA+B,OAA/B;AACA,SAASL,OAAO,IAAIM,aAApB,QAAyC,iBAAzC;AACA,SAASN,OAAO,IAAIO,QAApB,QAAoC,YAApC;AACA,SAASP,OAAO,IAAIQ,QAApB,QAAoC,YAApC;AACA,SAASR,OAAO,IAAIS,IAApB,QAAgC,QAAhC;AACA,SAAST,OAAO,IAAIU,WAApB,QAAuC,eAAvC;AACA,SAASV,OAAO,IAAIW,KAApB,QAAiC,SAAjC;AACA,SAASX,OAAO,IAAIY,IAApB,QAAgC,QAAhC;AAEA,SAASZ,OAAO,IAAIa,OAApB,QAAmC,WAAnC;AAEA,SAASb,OAAO,IAAIc,mBAApB,QAA+C,uBAA/C;AAEA,SAASC,SAAT,EAAoBC,SAApB,QAAqC,SAArC;AAEA,SAASC,MAAT,QAAuB,SAAvB;AACA,SAASC,MAAT,QAAuB,SAAvB","sourcesContent":["export { default as Plot } from './Plot';\n\nexport { XAxis, YAxis } from './Axis';\n\nexport { default as Line } from './Line';\n\nexport { default as Bar } from './Bar';\nexport { default as HorizontalBar } from './HorizontalBar';\nexport { default as GroupBar } from './GroupBar';\nexport { default as StackBar } from './StackBar';\nexport { default as Area } from './Area';\nexport { default as StackedArea } from './StackedArea';\nexport { default as Donut } from './Donut';\nexport { default as Venn } from './Venn';\n\nexport { default as Tooltip } from './Tooltip';\n\nexport { default as ResponsiveContainer } from './ResponsiveContainer';\n\nexport { HoverLine, HoverRect } from './Hover';\n\nexport { minMax } from './utils';\nexport { colors } from './color';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.js"],"names":["default","Plot","XAxis","YAxis","Line","Bar","HorizontalBar","GroupBar","StackBar","Area","StackedArea","ScatterPlot","Bubble","Donut","Venn","Tooltip","ResponsiveContainer","HoverLine","HoverRect","minMax","colors"],"mappings":"AAAA,SAASA,OAAO,IAAIC,IAApB,QAAgC,QAAhC;AAEA,SAASC,KAAT,EAAgBC,KAAhB,QAA6B,QAA7B;AAEA,SAASH,OAAO,IAAII,IAApB,QAAgC,QAAhC;AAEA,SAASJ,OAAO,IAAIK,GAApB,QAA+B,OAA/B;AACA,SAASL,OAAO,IAAIM,aAApB,QAAyC,iBAAzC;AACA,SAASN,OAAO,IAAIO,QAApB,QAAoC,YAApC;AACA,SAASP,OAAO,IAAIQ,QAApB,QAAoC,YAApC;AACA,SAASR,OAAO,IAAIS,IAApB,QAAgC,QAAhC;AACA,SAAST,OAAO,IAAIU,WAApB,QAAuC,eAAvC;AACA,SAASV,OAAO,IAAIW,WAApB,QAAuC,eAAvC;AACA,SAASX,OAAO,IAAIY,MAApB,QAAkC,UAAlC;AACA,SAASZ,OAAO,IAAIa,KAApB,QAAiC,SAAjC;AACA,SAASb,OAAO,IAAIc,IAApB,QAAgC,QAAhC;AAEA,SAASd,OAAO,IAAIe,OAApB,QAAmC,WAAnC;AAEA,SAASf,OAAO,IAAIgB,mBAApB,QAA+C,uBAA/C;AAEA,SAASC,SAAT,EAAoBC,SAApB,QAAqC,SAArC;AAEA,SAASC,MAAT,QAAuB,SAAvB;AACA,SAASC,MAAT,QAAuB,SAAvB","sourcesContent":["export { default as Plot } from './Plot';\n\nexport { XAxis, YAxis } from './Axis';\n\nexport { default as Line } from './Line';\n\nexport { default as Bar } from './Bar';\nexport { default as HorizontalBar } from './HorizontalBar';\nexport { default as GroupBar } from './GroupBar';\nexport { default as StackBar } from './StackBar';\nexport { default as Area } from './Area';\nexport { default as StackedArea } from './StackedArea';\nexport { default as ScatterPlot } from './ScatterPlot';\nexport { default as Bubble } from './Bubble';\nexport { default as Donut } from './Donut';\nexport { default as Venn } from './Venn';\n\nexport { default as Tooltip } from './Tooltip';\n\nexport { default as ResponsiveContainer } from './ResponsiveContainer';\n\nexport { HoverLine, HoverRect } from './Hover';\n\nexport { minMax } from './utils';\nexport { colors } from './color';\n"],"file":"index.js"}

package/lib/es6/style/bubble.shadow.css

@@ -0,0 +1,45 @@
+@import '@semcore/utils/style/var.css';
+@import '@semcore/d3-chart/src/style/var.css';
+
+SBubble {
+  fill: #2bb3ff;
+  stroke: #fff;
+  stroke-width: 2px;
+  transition-property: cx, cy;
+  transition-duration: var(--duration);
+  transition-timing-function: ease-in-out;
+  opacity: 0.5;
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+SBubble[color] {
+  fill: var(--color);
+}
+
+SCenter {
+  text-anchor: middle;
+  font-size: 11px;
+  stroke: #2bb3ff;
+}
+
+SCenter[color] {
+  stroke: var(--color);
+}
+
+SLabel {
+  fill: #2bb3ff;
+}
+
+SLabel[position='right'] {
+  text-anchor: end;
+}
+
+SLabel[position='left'] {
+  text-anchor: start;
+}
+
+SLabel[color] {
+  fill: var(--color);
+}

package/lib/es6/style/scatterplot.shadow.css

@@ -0,0 +1,27 @@
+@import '@semcore/utils/style/var.css';
+@import '@semcore/d3-chart/src/style/var.css';
+
+SScatterPlot {
+  fill: #2bb3ff;
+  transition-property: cx, cy;
+  transition-duration: var(--duration);
+  transition-timing-function: ease-in-out;
+  opacity: 0.5;
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+SScatterPlot[color] {
+  fill: var(--color);
+}
+
+SValue {
+  text-anchor: middle;
+  font-size: 10px;
+  stroke: #008ff8;
+}
+
+SValue[color] {
+  stroke: var(--color);
+}

package/lib/es6/style/tooltip.shadow.css

@@ -2,6 +2,8 @@
 @import '@semcore/d3-chart/src/style/var.css';
 
 STooltip {
+  font-size: var(--fs-100);
+  line-height: var(--lh-100);
   position: relative;
   background-color: #fff;
   border-radius: 3px;
@@ -12,8 +14,6 @@ STooltip {
 }
 
 STitle {
-  font-size: var(--fs-100);
-  line-height: var(--lh-100);
   color: var(--gray60);
   margin-bottom: 8px;
 }

package/lib/types/Bubble.d.ts

@@ -0,0 +1,27 @@
+import { CProps, ReturnEl } from '@semcore/core';
+import IContext from './context';
+
+export interface IBubbleProps extends IContext {
+  /** Field from data for XAxis */
+  x: string;
+  /** Field from data for YAxis */
+  y: string;
+  /** Field from data for circle radius */
+  value: string;
+  /** Field from data for circle label */
+  label?: string;
+  /** Circle color */
+  color?: string;
+  /** Cross in the center of the bubble
+   * @default true
+   */
+  markedCross?: boolean;
+  /** Animation duration in ms
+   * @default 500
+   */
+  duration?: number;
+}
+
+declare const Bubble: <T>(props: CProps<IBubbleProps & T>) => ReturnEl;
+
+export default Bubble;

package/lib/types/ScatterPlot.d.ts

@@ -0,0 +1,27 @@
+import { CProps, ReturnEl } from '@semcore/core';
+import IContext from './context';
+
+export interface IScatterPlotProps extends IContext {
+  /** Field from data for XAxis */
+  x: string;
+  /** Field from data for YAxis */
+  y: string;
+  /** Field from data for circle value */
+  value?: string;
+  /** Circle color */
+  color?: string;
+  /** Circle value color */
+  valueColor?: string;
+  /** Animation duration in ms
+   * @default 500
+   */
+  duration?: number;
+  /** Radius of circles
+   * @default 5.5 or 12 with value
+   */
+  r?: number;
+}
+
+declare const ScatterPlot: <T>(props: CProps<IScatterPlotProps & T>) => ReturnEl;
+
+export default ScatterPlot;

package/lib/types/index.d.ts

@@ -39,3 +39,9 @@ export * from './Donut';
 
 export { default as Tooltip } from './Tooltip';
 export * from './Tooltip';
+
+export { default as ScatterPlot } from './ScatterPlot';
+export * from './ScatterPlot';
+
+export { default as Bubble } from './Bubble';
+export * from './Bubble';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/d3-chart",
   "description": "SEMRush D3 Chart Component",
-  "version": "1.5.6",
+  "version": "1.6.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",

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/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/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/bubble.shadow.css

@@ -0,0 +1,45 @@
+@import '@semcore/utils/style/var.css';
+@import '@semcore/d3-chart/src/style/var.css';
+
+SBubble {
+  fill: #2bb3ff;
+  stroke: #fff;
+  stroke-width: 2px;
+  transition-property: cx, cy;
+  transition-duration: var(--duration);
+  transition-timing-function: ease-in-out;
+  opacity: 0.5;
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+SBubble[color] {
+  fill: var(--color);
+}
+
+SCenter {
+  text-anchor: middle;
+  font-size: 11px;
+  stroke: #2bb3ff;
+}
+
+SCenter[color] {
+  stroke: var(--color);
+}
+
+SLabel {
+  fill: #2bb3ff;
+}
+
+SLabel[position='right'] {
+  text-anchor: end;
+}
+
+SLabel[position='left'] {
+  text-anchor: start;
+}
+
+SLabel[color] {
+  fill: var(--color);
+}