@semcore/d3-chart 1.5.5 → 1.6.2

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.5",
+  "version": "1.6.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -15,7 +15,7 @@
   "dependencies": {
     "@semcore/flex-box": "^4",
     "@semcore/popper": "^4.9",
-    "@semcore/utils": "^3.15",
+    "@semcore/utils": "^3.31",
     "@semcore/animation": "^1",
     "@upsetjs/venn.js": "^1.4.1",
     "d3-array": "^3",

package/src/Area.js

@@ -30,7 +30,6 @@ class AreaRoot extends Component {
         .curve(curve)
         .x((p) => scaleOfBandwidth(xScale, p[x]))
         .y((p) => scaleOfBandwidth(yScale, p[y])),
-      color: '#50aef4',
       duration: 500,
     };
   };

package/src/Bar.js

@@ -14,7 +14,6 @@ class BarRoot extends Component {
   static enhance = [uniqueIDEnhancement()];
 
   static defaultProps = {
-    color: '#50aef4',
     offset: [0, 0],
     duration: 500,
     r: 2,

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, { ...this.props, xIndex: i })}
+        onMouseLeave={this.bindHandlerTooltip(false, { ...this.props, 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/HorizontalBar.js

@@ -13,7 +13,6 @@ class HorizontalBarRoot extends Component {
   static style = style;
 
   static defaultProps = {
-    color: '#50aef4',
     offset: [0, 0],
     duration: 500,
     r: 2,

package/src/Line.js

@@ -22,7 +22,6 @@ class LineRoot extends Component {
         .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, { ...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

@@ -2,10 +2,10 @@ import React, { useCallback } from 'react';
 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 { isAdvanceMode } from '@semcore/utils/lib/findComponent';
 import { CONSTANT } from './utils';
 import createElement from './createElement';
+import resolveColor from '@semcore/utils/lib/color';
 
 import style from './style/tooltip.shadow.css';
 
@@ -63,7 +63,7 @@ class TooltipRoot extends Component {
   render() {
     const { Children, children, tag, ...other } = this.asProps;
 
-    const advanceMode = !!findComponent(Children, [
+    const advanceMode = isAdvanceMode(Children, [
       Tooltip.Trigger.displayName,
       Tooltip.Popper.displayName,
     ]);
@@ -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}
+    />,
   );
 }
 
@@ -114,7 +120,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);
 }

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

@@ -1,5 +1,20 @@
+@import '@semcore/utils/style/var.css';
+@import '@semcore/d3-chart/src/style/var.css';
+
 SPie {
   stroke: #ffffff;
+  fill: var(--blue-01);
+}
+
+SPie[color] {
+  fill: var(--color);
+}
+
+SEmptyData {
+  fill: var(--mystic);
+}
+
+SEmptyData[color] {
   fill: var(--color);
 }