@semcore/d3-chart 1.7.1 → 2.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/d3-chart",
   "description": "SEMRush D3 Chart Component",
-  "version": "1.7.1",
+  "version": "2.0.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -9,21 +9,22 @@
   "author": "Roman Lysov <r.lysov@semrush.com>",
   "license": "MIT",
   "scripts": {
-    "build": "build --source=js",
+    "build": "build --source=js,ts",
     "test": "jest"
   },
   "dependencies": {
+    "@semcore/animation": "^1",
     "@semcore/flex-box": "^4",
     "@semcore/popper": "^4.9",
     "@semcore/utils": "^3.15",
-    "@semcore/animation": "^1",
-    "@upsetjs/venn.js": "^1.4.1",
-    "d3-array": "^3",
-    "d3-shape": "^3",
-    "d3-scale": "^4",
-    "d3-interpolate": "^3",
-    "d3-transition": "^3",
-    "resize-observer-polyfill": "^1.5"
+    "@upsetjs/venn.js": "1.4.1",
+    "d3-array": "3.1.6",
+    "d3-shape": "3.1.0",
+    "d3-scale": "3.3.0",
+    "d3-interpolate": "3.0.1",
+    "d3-transition": "3.0.1",
+    "resize-observer-polyfill": "1.5.1",
+    "hoist-non-react-statics": "3.3.2"
   },
   "peerDependencies": {
     "@semcore/core": "^1.11",
@@ -36,5 +37,16 @@
     "type": "git",
     "url": "https://github.com/semrush/intergalactic.git",
     "directory": "semcore/d3-chart"
+  },
+  "devDependencies": {
+    "@semcore/jest-preset-ui": "1.0.0",
+    "@types/d3-array": "^3.0.2",
+    "@types/d3-scale": "^4.0.2",
+    "@types/d3-transition": "^3.0.1",
+    "@semcore/typography": "*",
+    "@semcore/dropdown-menu": "*",
+    "@semcore/button": "*",
+    "@semcore/checkbox": "*",
+    "@semcore/icon": "*"
   }
 }

package/src/Axis.jsx

@@ -274,12 +274,22 @@ function Grid(props) {
 function Title(props) {
   const { Element: STitle, styles, scale, position } = props;
 
+  const { x, y } = MAP_POSITION_TITlE[position](scale);
+
+  const sstyles = sstyled(styles);
+  const sTitleStyles = sstyles.cn('STitle', {
+    'transform-origin': `${x.toFixed(2)}px ${y.toFixed(2)}px`,
+  });
+
   return sstyled(styles)(
     <STitle
       render="text"
       childrenPosition="inside"
       position={position}
-      {...MAP_POSITION_TITlE[position](scale)}
+      className={sTitleStyles.className}
+      style={sTitleStyles.style}
+      x={x}
+      y={y}
     />,
   );
 }

package/src/Bubble.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Component, sstyled } from '@semcore/core';
 import canUseDOM from '@semcore/utils/lib/canUseDOM';
-import { CONSTANT } from './utils';
+import { CONSTANT, measureText } from './utils';
 import createElement from './createElement';
 import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
 import { transition } from 'd3-transition';
@@ -9,26 +9,6 @@ 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) => {
-  const 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;

package/src/ClipPath.jsx

@@ -34,6 +34,7 @@ class ClipPath extends Component {
   }
 
   render() {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { id, transition, tag: Tag, style, className, ...other } = this.asProps;
     return (
       <clipPath ref={this.refClipPath} id={id}>

package/src/Donut.jsx

@@ -111,7 +111,7 @@ class DonutRoot extends Component {
   }
 
   getArcs() {
-    let { Children, data, d3Pie } = this.asProps;
+    const { Children, data, d3Pie } = this.asProps;
     let pieData = Object.entries(data);
 
     if (d3Pie[DEFAULT_INSTANCE]) {
@@ -137,14 +137,12 @@ class DonutRoot extends Component {
     return d3Pie(pieData);
   }
 
-  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);
-    };
+  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);
+  };
 
   getPieProps(props) {
     let { d3Arc, duration, innerRadius } = this.asProps;

package/src/Plot.jsx

@@ -3,9 +3,11 @@ import createComponent, { Component, Root, sstyled } from '@semcore/core';
 import { Box } from '@semcore/flex-box';
 import EventEmitter from '@semcore/utils/lib/eventEmitter';
 import { eventToPoint } from './utils';
+import style from './style/plot.shadow.css';
 
 class PlotRoot extends Component {
   static displayName = 'Plot';
+  static style = style;
 
   constructor(props) {
     super(props);