@semcore/d3-chart 1.5.6 → 1.6.3

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, { ...this.props, xIndex: i })}
+        onMouseLeave={this.bindHandlerTooltip(false, { ...this.props, xIndex: i })}
+      >
+        <SScatterPlot
+          id={`${uid}${i}`}
+          render="circle"
+          clipPath={`url(#${uid})`}
+          cx={xScale(d[x]) + offset[0]}
+          cy={yScale(d[y]) + offset[1]}
+          color={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={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/Tooltip.js

@@ -96,14 +96,20 @@ class TooltipRoot extends Component {
 }
 
 function PopperPopper(props) {
-  const { Element: STooltip, styles, $visible } = props;
+  const { Element: STooltip, styles, $visible, x, y } = props;
 
   const handlerCancel = useCallback(() => false, []);
 
   if (!$visible) return null;
 
   return sstyled(styles)(
-    <STooltip render={Popper.Popper} childrenPosition="inside" onMouseMove={handlerCancel} />,
+    <STooltip
+      render={Popper.Popper}
+      childrenPosition="inside"
+      onMouseMove={handlerCancel}
+      x={x}
+      y={y}
+    />,
   );
 }
 

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);
+}

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