@gravity-ui/chartkit 4.20.0 → 4.20.1

package/build/plugins/d3/renderer/components/Tooltip/index.js

@@ -1,40 +1,16 @@
 import React from 'react';
 import isNil from 'lodash/isNil';
+import { Popup, useVirtualElementRef } from '@gravity-ui/uikit';
 import { block } from '../../../../../utils/cn';
 import { DefaultContent } from './DefaultContent';
 export * from './TooltipTriggerArea';
 const b = block('d3-tooltip');
-const POINTER_OFFSET_X = 20;
 export const Tooltip = (props) => {
-    const { tooltip, svgContainer, xAxis, yAxis, hovered, pointerPosition } = props;
-    const ref = React.useRef(null);
-    const size = React.useMemo(() => {
-        if (ref.current && hovered) {
-            const { width, height } = ref.current.getBoundingClientRect();
-            return { width, height };
-        }
-        return undefined;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [hovered, pointerPosition]);
-    const position = React.useMemo(() => {
-        if (hovered && pointerPosition && size) {
-            const { clientWidth } = document.documentElement;
-            const { width, height } = size;
-            const rect = (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) || { left: 0, top: 0 };
-            const [pointerLeft, pointetTop] = pointerPosition;
-            const outOfRightBoudary = pointerLeft + width + rect.left + POINTER_OFFSET_X >= clientWidth;
-            const outOfTopBoundary = pointetTop - height / 2 <= 0;
-            const left = outOfRightBoudary
-                ? pointerLeft - width - POINTER_OFFSET_X
-                : pointerLeft + POINTER_OFFSET_X;
-            const top = outOfTopBoundary ? 0 : pointetTop - height / 2;
-            return { left, top };
-        }
-        else if (hovered && pointerPosition) {
-            return { left: -1000, top: -1000 };
-        }
-        return undefined;
-    }, [hovered, pointerPosition, size, svgContainer]);
+    const { tooltip, xAxis, yAxis, hovered, svgContainer, pointerPosition } = props;
+    const containerRect = (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) || { left: 0, top: 0 };
+    const left = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[0]) || 0) + containerRect.left;
+    const top = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[1]) || 0) + containerRect.top;
+    const anchorRef = useVirtualElementRef({ rect: { top, left } });
     const content = React.useMemo(() => {
         var _a;
         if (!hovered) {
@@ -43,14 +19,9 @@ export const Tooltip = (props) => {
         const customTooltip = (_a = tooltip.renderer) === null || _a === void 0 ? void 0 : _a.call(tooltip, { hovered });
         return isNil(customTooltip) ? (React.createElement(DefaultContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis })) : (customTooltip);
     }, [hovered, tooltip, xAxis, yAxis]);
-    if (!position || !hovered) {
-        return null;
-    }
-    const { left, top } = position;
-    const style = {
-        position: 'absolute',
-        top,
-        left: left,
-    };
-    return (React.createElement("div", { ref: ref, className: b(), style: style }, content));
+    React.useEffect(() => {
+        window.dispatchEvent(new CustomEvent('scroll'));
+    }, [left, top]);
+    return hovered ? (React.createElement(Popup, { className: b(), open: true, anchorRef: anchorRef, offset: [0, 20], placement: ['right', 'left', 'top', 'bottom'], modifiers: [{ name: 'preventOverflow', options: { padding: 10, altAxis: true } }] },
+        React.createElement("div", { className: b('content') }, content))) : null;
 };

package/build/plugins/d3/renderer/components/styles.css

@@ -75,13 +75,22 @@
   fill: var(--g-color-text-primary);
 }
 
-.chartkit-d3-tooltip {
-  position: absolute;
+.chartkit-d3-tooltip[class] {
+  --yc-popup-border-width: 0;
+  pointer-events: none;
+}
+
+.chartkit-d3-tooltip[class] > div {
+  animation-duration: unset;
+  animation-timing-function: unset;
+  animation-fill-mode: unset;
+}
+
+.chartkit-d3-tooltip__content {
   padding: 10px 14px;
   background-color: var(--g-color-infographics-tooltip-bg);
   border: 1px solid var(--g-color-line-generic);
   border-radius: 3px;
   box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
-  z-index: 100001;
   text-wrap: nowrap;
 }

package/build/plugins/d3/renderer/hooks/useSeries/prepare-pie.js

@@ -10,7 +10,7 @@ export function preparePieSeries(args) {
     const colorScale = scaleOrdinal(dataNames, DEFAULT_PALETTE);
     const stackId = getRandomCKId();
     const seriesHoverState = get(seriesOptions, 'pie.states.hover');
-    const preparedSeries = series.data.map((dataItem) => {
+    const preparedSeries = series.data.map((dataItem, i) => {
         var _a, _b, _c;
         const result = {
             type: 'pie',
@@ -29,7 +29,7 @@ export function preparePieSeries(args) {
             value: dataItem.value,
             visible: typeof dataItem.visible === 'boolean' ? dataItem.visible : true,
             name: dataItem.name,
-            id: '',
+            id: `Series ${i}`,
             color: dataItem.color || colorScale(dataItem.name),
             legend: {
                 enabled: get(series, 'legend.enabled', legend.enabled),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "4.20.0",
+  "version": "4.20.1",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",