@gravity-ui/chartkit 4.6.0 → 4.7.0

package/build/plugins/d3/examples/pie/Basic.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const BasicPie: () => React.JSX.Element;

package/build/plugins/d3/examples/pie/Basic.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import nintendoGames from '../nintendoGames';
+import { groups } from 'd3';
+function prepareData() {
+    const gamesByPlatform = groups(nintendoGames, (item) => item.platform);
+    return gamesByPlatform.map(([platform, games]) => ({
+        name: platform,
+        value: games.length,
+    }));
+}
+export const BasicPie = () => {
+    const data = prepareData();
+    const widgetData = {
+        series: {
+            data: [
+                {
+                    type: 'pie',
+                    data: data,
+                },
+            ],
+        },
+        legend: { enabled: true },
+        title: {
+            text: 'Platforms',
+            style: { fontSize: '12px', fontWeight: 'normal' },
+        },
+    };
+    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+};

package/build/plugins/d3/examples/pie/Donut.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Donut: () => React.JSX.Element;

package/build/plugins/d3/examples/pie/Donut.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import nintendoGames from '../nintendoGames';
+import { groups } from 'd3';
+function prepareData() {
+    const gamesByPlatform = groups(nintendoGames, (d) => d.esrb_rating || 'unknown');
+    return gamesByPlatform.map(([value, games]) => ({
+        name: value,
+        value: games.length,
+    }));
+}
+export const Donut = () => {
+    const data = prepareData();
+    const widgetData = {
+        series: {
+            data: [
+                {
+                    type: 'pie',
+                    innerRadius: '50%',
+                    data: data,
+                },
+            ],
+        },
+        legend: { enabled: true },
+        title: {
+            text: 'ESRB ratings',
+            style: { fontSize: '12px', fontWeight: 'normal' },
+        },
+    };
+    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+};

package/build/plugins/d3/examples/scatter/Basic.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Basic: () => React.JSX.Element;

package/build/plugins/d3/examples/scatter/Basic.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import nintendoGames from '../nintendoGames';
+import { dateTime } from '@gravity-ui/date-utils';
+function prepareData() {
+    const dataset = nintendoGames.filter((d) => d.date && d.user_score);
+    const data = dataset.map((d) => ({
+        x: d.date || undefined,
+        y: d.user_score || undefined,
+        custom: d,
+    }));
+    return {
+        series: [
+            {
+                data,
+                name: 'Nintendo games',
+            },
+        ],
+    };
+}
+export const Basic = () => {
+    const { series } = prepareData();
+    const widgetData = {
+        series: {
+            data: series.map((s) => ({
+                type: 'scatter',
+                data: s.data.filter((d) => d.x),
+                name: s.name,
+            })),
+        },
+        yAxis: [
+            {
+                title: {
+                    text: 'User score',
+                },
+            },
+        ],
+        xAxis: {
+            type: 'datetime',
+            title: {
+                text: 'Release dates',
+            },
+        },
+        tooltip: {
+            renderer: (d) => {
+                var _a;
+                const point = (_a = d.hovered[0]) === null || _a === void 0 ? void 0 : _a.data;
+                if (!point) {
+                    return null;
+                }
+                const title = point.custom.title;
+                const score = point.custom.user_score;
+                const date = dateTime({ input: point.custom.date }).format('DD MMM YYYY');
+                return (React.createElement(React.Fragment, null,
+                    React.createElement("b", null, title),
+                    React.createElement("br", null),
+                    "Release date: ",
+                    date,
+                    React.createElement("br", null),
+                    "User score: ",
+                    score));
+            },
+        },
+    };
+    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+};

package/build/plugins/d3/renderer/D3Widget.js

@@ -4,9 +4,19 @@ import debounce from 'lodash/debounce';
 import { getRandomCKId } from '../../../utils';
 import { Chart } from './components';
 const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
+    const { data, onLoad, onRender } = props;
     const ref = React.useRef(null);
     const debounced = React.useRef();
     const [dimensions, setDimensions] = React.useState();
+    //FIXME: add chartPerfomance data to callbacks;
+    React.useLayoutEffect(() => {
+        if (onLoad) {
+            onLoad({});
+        }
+        if (onRender) {
+            onRender({});
+        }
+    }, []);
     const handleResize = React.useCallback(() => {
         var _a;
         const parentElement = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
@@ -44,6 +54,6 @@ const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
             width: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || '100%',
             height: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) || '100%',
             position: 'relative',
-        } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (React.createElement(Chart, { top: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.top) || 0, left: dimensions.left || 0, width: dimensions.width, height: dimensions.height, data: props.data }))));
+        } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (React.createElement(Chart, { top: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.top) || 0, left: dimensions.left || 0, width: dimensions.width, height: dimensions.height, data: data }))));
 });
 export default D3Widget;

package/build/plugins/d3/renderer/components/AxisX.d.ts

@@ -5,7 +5,6 @@ type Props = {
     width: number;
     height: number;
     scale: ChartScale;
-    chartWidth: number;
 };
-export declare const AxisX: React.MemoExoticComponent<({ axis, width, height, scale, chartWidth }: Props) => React.JSX.Element>;
+export declare const AxisX: React.MemoExoticComponent<({ axis, width, height, scale }: Props) => React.JSX.Element>;
 export {};

package/build/plugins/d3/renderer/components/AxisX.js

@@ -18,14 +18,12 @@ function getLabelFormatter({ axis, scale }) {
         });
     };
 }
-export const AxisX = React.memo(({ axis, width, height, scale, chartWidth }) => {
+export const AxisX = React.memo(({ axis, width, height, scale }) => {
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
             return;
         }
-        const svgElement = select(ref.current);
-        svgElement.selectAll('*').remove();
         const xAxisGenerator = axisBottom({
             scale: scale,
             ticks: {
@@ -34,40 +32,29 @@ export const AxisX = React.memo(({ axis, width, height, scale, chartWidth }) =>
                 labelsPaddings: axis.labels.padding,
                 labelsMargin: axis.labels.margin,
                 labelsStyle: axis.labels.style,
+                labelsMaxWidth: axis.labels.maxWidth,
+                labelsLineHeight: axis.labels.lineHeight,
                 count: getTicksCount({ axis, range: width }),
                 maxTickCount: getMaxTickCount({ axis, width }),
-                autoRotation: axis.labels.autoRotation,
+                rotation: axis.labels.rotation,
             },
             domain: {
                 size: width,
                 color: axis.lineColor,
             },
         });
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
         svgElement.call(xAxisGenerator).attr('class', b());
-        if (axis.labels.enabled) {
-            svgElement.style('font-size', axis.labels.style.fontSize);
-        }
-        // add an ellipsis to the labels on the right that go beyond the boundaries of the chart
-        svgElement.selectAll('.tick text').each(function () {
-            var _a;
-            const node = this;
-            const textRect = node.getBBox();
-            const matrix = ((_a = node.transform.baseVal.consolidate()) === null || _a === void 0 ? void 0 : _a.matrix) || {};
-            const right = matrix.a * textRect.right + matrix.c * textRect.bottom + matrix.e;
-            if (right > chartWidth) {
-                const maxWidth = textRect.width - (right - chartWidth) * 2;
-                select(node).call(setEllipsisForOverflowText, maxWidth);
-            }
-        });
         // add an axis header if necessary
         if (axis.title.text) {
-            const textY = axis.title.height + parseInt(axis.labels.style.fontSize) + axis.labels.padding;
+            const y = axis.title.height + axis.title.margin + axis.labels.height + axis.labels.margin;
             svgElement
                 .append('text')
                 .attr('class', b('title'))
                 .attr('text-anchor', 'middle')
                 .attr('x', width / 2)
-                .attr('y', textY)
+                .attr('y', y)
                 .attr('font-size', axis.title.style.fontSize)
                 .text(axis.title.text)
                 .call(setEllipsisForOverflowText, width);

package/build/plugins/d3/renderer/components/AxisY.js

@@ -1,9 +1,29 @@
 import React from 'react';
 import { axisLeft, select } from 'd3';
 import { block } from '../../../../utils/cn';
-import { formatAxisTickLabel, getClosestPointsRange, parseTransformStyle, setEllipsisForOverflowText, setEllipsisForOverflowTexts, getTicksCount, getScaleTicks, } from '../utils';
+import { formatAxisTickLabel, getClosestPointsRange, parseTransformStyle, setEllipsisForOverflowText, setEllipsisForOverflowTexts, getTicksCount, getScaleTicks, calculateSin, calculateCos, } from '../utils';
 const b = block('d3-axis');
-const MAX_WIDTH = 80;
+function transformLabel(node, axis) {
+    let topOffset = axis.labels.lineHeight / 2;
+    let leftOffset = -axis.labels.margin;
+    if (axis.labels.rotation) {
+        if (axis.labels.rotation > 0) {
+            leftOffset -= axis.labels.lineHeight * calculateSin(axis.labels.rotation);
+            topOffset = axis.labels.lineHeight * calculateCos(axis.labels.rotation);
+            if (axis.labels.rotation % 360 === 90) {
+                topOffset = ((node === null || node === void 0 ? void 0 : node.getBoundingClientRect().width) || 0) / 2;
+            }
+        }
+        else {
+            topOffset = 0;
+            if (axis.labels.rotation % 360 === -90) {
+                topOffset = -((node === null || node === void 0 ? void 0 : node.getBoundingClientRect().width) || 0) / 2;
+            }
+        }
+        return `translate(${leftOffset}px, ${topOffset}px) rotate(${axis.labels.rotation}deg)`;
+    }
+    return `translate(${leftOffset}px, ${topOffset}px)`;
+}
 export const AxisY = ({ axises, width, height, scale }) => {
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -40,9 +60,19 @@ export const AxisY = ({ axises, width, height, scale }) => {
         if (axis.labels.enabled) {
             const tickTexts = svgElement
                 .selectAll('.tick text')
+                // The offset must be applied before the labels are rotated.
+                // Therefore, we reset the values and make an offset in transform  attribute.
+                // FIXME: give up axisLeft(d3) and switch to our own generation method
+                .attr('x', null)
+                .attr('dy', null)
                 .style('font-size', axis.labels.style.fontSize)
-                .style('transform', 'translateY(-1px)');
-            tickTexts.call(setEllipsisForOverflowTexts, MAX_WIDTH);
+                .style('transform', function () {
+                return transformLabel(this, axis);
+            });
+            const textMaxWidth = !axis.labels.rotation || Math.abs(axis.labels.rotation) % 360 !== 90
+                ? axis.labels.maxWidth
+                : (height - axis.labels.padding * (tickTexts.size() - 1)) / tickTexts.size();
+            tickTexts.call(setEllipsisForOverflowTexts, textMaxWidth);
         }
         const transformStyle = svgElement.select('.tick').attr('transform');
         const { y } = parseTransformStyle(transformStyle);
@@ -52,21 +82,23 @@ export const AxisY = ({ axises, width, height, scale }) => {
         }
         // remove overlapping ticks
         // Note: this method do not prepared for rotated labels
-        let elementY = 0;
-        svgElement
-            .selectAll('.tick')
-            .filter(function (_d, index) {
-            const node = this;
-            const r = node.getBoundingClientRect();
-            if (r.bottom > elementY && index !== 0) {
-                return true;
-            }
-            elementY = r.top - axis.labels.padding;
-            return false;
-        })
-            .remove();
+        if (!axis.labels.rotation) {
+            let elementY = 0;
+            svgElement
+                .selectAll('.tick')
+                .filter(function (_d, index) {
+                const node = this;
+                const r = node.getBoundingClientRect();
+                if (r.bottom > elementY && index !== 0) {
+                    return true;
+                }
+                elementY = r.top - axis.labels.padding;
+                return false;
+            })
+                .remove();
+        }
         if (axis.title.text) {
-            const textY = axis.title.height + axis.labels.margin;
+            const textY = axis.title.margin + axis.labels.margin + axis.labels.width;
             svgElement
                 .append('text')
                 .attr('class', b('title'))

package/build/plugins/d3/renderer/components/Chart.js

@@ -1,22 +1,30 @@
 import React from 'react';
 import { block } from '../../../../utils/cn';
-import { useAxisScales, useChartDimensions, useChartEvents, useChartOptions, useSeries, useShapes, useTooltip, } from '../hooks';
+import { getD3Dispatcher } from '../d3-dispatcher';
+import { useAxisScales, useChartDimensions, useChartOptions, useSeries, useShapes, useTooltip, } from '../hooks';
 import { AxisY } from './AxisY';
 import { AxisX } from './AxisX';
 import { Legend } from './Legend';
 import { Title } from './Title';
-import { Tooltip } from './Tooltip';
+import { Tooltip, TooltipTriggerArea } from './Tooltip';
+import { getPreparedXAxis } from '../hooks/useChartOptions/x-axis';
+import { getWidthOccupiedByYAxis } from '../hooks/useChartDimensions/utils';
+import { getPreparedYAxis } from '../hooks/useChartOptions/y-axis';
 import './styles.css';
 const b = block('d3');
 export const Chart = (props) => {
     // FIXME: add data validation
     const { top, left, width, height, data } = props;
     const svgRef = React.createRef();
-    const { chartHovered, handleMouseEnter, handleMouseLeave } = useChartEvents();
-    const { chart, title, tooltip, xAxis, yAxis } = useChartOptions({
+    const dispatcher = React.useMemo(() => {
+        return getD3Dispatcher();
+    }, []);
+    const { chart, title, tooltip } = useChartOptions({
         data,
     });
-    const { legendItems, legendConfig, preparedSeries, preparedLegend, handleLegendItemClick } = useSeries({
+    const xAxis = React.useMemo(() => getPreparedXAxis({ xAxis: data.xAxis, width, series: data.series.data }), [data, width]);
+    const yAxis = React.useMemo(() => getPreparedYAxis({ series: data.series.data, yAxis: data.yAxis }), [data, width]);
+    const { legendItems, legendConfig, preparedSeries, preparedSeriesOptions, preparedLegend, handleLegendItemClick, } = useSeries({
         chartWidth: width,
         chartHeight: height,
         chartMargin: chart.margin,
@@ -40,33 +48,33 @@ export const Chart = (props) => {
         xAxis,
         yAxis,
     });
-    const { hovered, pointerPosition, handleSeriesMouseMove, handleSeriesMouseLeave } = useTooltip({
-        tooltip,
-    });
-    const { shapes } = useShapes({
+    const { hovered, pointerPosition } = useTooltip({ dispatcher, tooltip });
+    const { shapes, shapesData } = useShapes({
         top,
         left,
         boundsWidth,
         boundsHeight,
+        dispatcher,
         series: preparedSeries,
-        seriesOptions: data.series.options,
+        seriesOptions: preparedSeriesOptions,
         xAxis,
         xScale,
         yAxis,
         yScale,
         svgContainer: svgRef.current,
-        onSeriesMouseMove: handleSeriesMouseMove,
-        onSeriesMouseLeave: handleSeriesMouseLeave,
     });
+    const boundsOffsetTop = chart.margin.top;
+    const boundsOffsetLeft = chart.margin.left + getWidthOccupiedByYAxis({ preparedAxis: yAxis });
     return (React.createElement(React.Fragment, null,
-        React.createElement("svg", { ref: svgRef, className: b({ hovered: chartHovered }), width: width, height: height, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+        React.createElement("svg", { ref: svgRef, className: b(), width: width, height: height },
             title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
-            React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[chart.margin.left, chart.margin.top].join(',')})` },
+            React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})` },
                 xScale && yScale && (React.createElement(React.Fragment, null,
                     React.createElement(AxisY, { axises: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
-                        React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, chartWidth: width })))),
-                shapes),
+                        React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale })))),
+                shapes,
+                (tooltip === null || tooltip === void 0 ? void 0 : tooltip.enabled) && Boolean(shapesData.length) && (React.createElement(TooltipTriggerArea, { boundsWidth: boundsWidth, boundsHeight: boundsHeight, dispatcher: dispatcher, offsetLeft: left, offsetTop: top, shapesData: shapesData, svgContainer: svgRef.current }))),
             preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick }))),
-        React.createElement(Tooltip, { hovered: hovered, pointerPosition: pointerPosition, tooltip: tooltip, xAxis: xAxis, yAxis: yAxis[0] })));
+        React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: tooltip, xAxis: xAxis, yAxis: yAxis[0], hovered: hovered, pointerPosition: pointerPosition })));
 };

package/build/plugins/d3/renderer/components/Legend.js

@@ -76,7 +76,6 @@ export const Legend = (props) => {
             : items;
         pageItems.forEach((line, lineIndex) => {
             var _a;
-            const textWidths = [];
             const legendLine = svgElement.append('g').attr('class', b('line'));
             const legendItemTemplate = legendLine
                 .selectAll('legend-history')
@@ -86,21 +85,23 @@ export const Legend = (props) => {
                 .attr('class', b('item'))
                 .on('click', function (e, d) {
                 onItemClick({ name: d.name, metaKey: e.metaKey });
-            })
-                .each(function (d) {
-                textWidths.push(d.textWidth);
             });
+            const getXPosition = (i) => {
+                return line.slice(0, i).reduce((acc, legendItem) => {
+                    return (acc +
+                        legendItem.symbol.width +
+                        legendItem.symbol.padding +
+                        legendItem.textWidth +
+                        legend.itemDistance);
+                }, 0);
+            };
             legendItemTemplate
                 .append('rect')
-                .attr('x', function (legendItem, i) {
-                return (i * legendItem.symbol.width +
-                    i * legend.itemDistance +
-                    i * legendItem.symbol.padding +
-                    textWidths.slice(0, i).reduce((acc, tw) => acc + tw, 0));
+                .attr('x', function (_d, i) {
+                return getXPosition(i);
             })
                 .attr('y', (legendItem) => {
-                const lineOffset = legend.lineHeight * lineIndex;
-                return config.offset.top + lineOffset - legendItem.symbol.height / 2;
+                return (legend.lineHeight - legendItem.symbol.height) / 2;
             })
                 .attr('width', (legendItem) => {
                 return legendItem.symbol.width;
@@ -116,14 +117,9 @@ export const Legend = (props) => {
             legendItemTemplate
                 .append('text')
                 .attr('x', function (legendItem, i) {
-                return (i * legendItem.symbol.width +
-                    i * legend.itemDistance +
-                    i * legendItem.symbol.padding +
-                    legendItem.symbol.width +
-                    legendItem.symbol.padding +
-                    textWidths.slice(0, i).reduce((acc, tw) => acc + tw, 0));
+                return getXPosition(i) + legendItem.symbol.width + legendItem.symbol.padding;
             })
-                .attr('y', config.offset.top + legend.lineHeight * lineIndex)
+                .attr('height', legend.lineHeight)
                 .attr('class', function (d) {
                 const mods = { selected: d.visible, unselected: !d.visible };
                 return b('item-text', mods);
@@ -131,8 +127,7 @@ export const Legend = (props) => {
                 .text(function (d) {
                 return ('name' in d && d.name);
             })
-                .style('font-size', legend.itemStyle.fontSize)
-                .style('alignment-baseline', 'middle');
+                .style('font-size', legend.itemStyle.fontSize);
             const contentWidth = ((_a = legendLine.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
             const { left } = getLegendPosition({
                 align: legend.align,
@@ -140,12 +135,15 @@ export const Legend = (props) => {
                 offsetWidth: config.offset.left,
                 contentWidth,
             });
-            legendLine.attr('transform', `translate(${[left, 0].join(',')})`);
+            const top = config.offset.top + legend.lineHeight * lineIndex;
+            legendLine.attr('transform', `translate(${[left, top].join(',')})`);
         });
         if (config.pagination) {
             const transform = `translate(${[
                 config.offset.left,
-                config.offset.top + legend.lineHeight * config.pagination.limit,
+                config.offset.top +
+                    legend.lineHeight * config.pagination.limit +
+                    legend.lineHeight / 2,
             ].join(',')})`;
             appendPaginator({
                 container: svgElement,

package/build/plugins/d3/renderer/components/Title.js

@@ -3,6 +3,6 @@ import { block } from '../../../../utils/cn';
 const b = block('d3-title');
 export const Title = (props) => {
     const { chartWidth, text, height, style } = props;
-    return (React.createElement("text", { className: b(), dx: chartWidth / 2, dy: height / 2, dominantBaseline: "middle", textAnchor: "middle", style: { fontSize: style === null || style === void 0 ? void 0 : style.fontSize, lineHeight: `${height}px` } },
+    return (React.createElement("text", { className: b(), dx: chartWidth / 2, dy: height / 2, dominantBaseline: "middle", textAnchor: "middle", style: Object.assign({ lineHeight: `${height}px` }, style) },
         React.createElement("tspan", null, text)));
 };

package/build/plugins/d3/renderer/components/Tooltip/DefaultContent.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { TooltipHoveredData } from '../../../../../types';
+import type { TooltipDataChunk } from '../../../../../types';
 import type { PreparedAxis } from '../../hooks';
 type Props = {
-    hovered: TooltipHoveredData;
+    hovered: TooltipDataChunk;
     xAxis: PreparedAxis;
     yAxis: PreparedAxis;
 };

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

@@ -48,6 +48,14 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                         ": ",
                         yRow))));
         }
+        case 'pie': {
+            const pieSeries = series;
+            return (React.createElement("div", null,
+                React.createElement("span", null,
+                    pieSeries.name || pieSeries.id,
+                    "\u00A0"),
+                React.createElement("span", null, pieSeries.value)));
+        }
         default: {
             return null;
         }

package/build/plugins/d3/renderer/components/Tooltip/TooltipTriggerArea.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { ShapeData } from '../../hooks';
+type Args = {
+    boundsWidth: number;
+    boundsHeight: number;
+    dispatcher: Dispatch<object>;
+    offsetTop: number;
+    offsetLeft: number;
+    shapesData: ShapeData[];
+    svgContainer: SVGSVGElement | null;
+};
+export declare const TooltipTriggerArea: (args: Args) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import throttle from 'lodash/throttle';
+import { bisector, pointer, sort } from 'd3';
+import { extractD3DataFromNode, isNodeContainsD3Data } from '../../utils';
+const THROTTLE_DELAY = 50;
+const isNodeContainsData = (node) => {
+    return isNodeContainsD3Data(node);
+};
+const getCalculationType = (shapesData) => {
+    if (shapesData.every((d) => d.series.type === 'bar-x')) {
+        return 'x-primary';
+    }
+    return 'none';
+};
+export const TooltipTriggerArea = (args) => {
+    const { boundsWidth, boundsHeight, dispatcher, offsetTop, offsetLeft, shapesData, svgContainer } = args;
+    const rectRef = React.useRef(null);
+    const calculationType = React.useMemo(() => {
+        return getCalculationType(shapesData);
+    }, [shapesData]);
+    const xData = React.useMemo(() => {
+        return calculationType === 'x-primary'
+            ? sort(new Set(shapesData.map((d) => d.x)))
+            : [];
+    }, [shapesData, calculationType]);
+    const handleXprimaryMouseMove = (e) => {
+        var _a, _b, _c;
+        const { left, top } = ((_a = rectRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || { left: 0, top: 0 };
+        const [pointerX, pointerY] = pointer(e, svgContainer);
+        const barWidthOffset = shapesData[0].width / 2;
+        const xPosition = pointerX - left - barWidthOffset - window.pageXOffset;
+        const xDataIndex = bisector((d) => d).center(xData, xPosition);
+        const xNodes = Array.from(((_c = (_b = rectRef.current) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.querySelectorAll(`[x="${xData[xDataIndex]}"]`)) || []);
+        let hoverShapeData;
+        if (xNodes.length === 1 && isNodeContainsData(xNodes[0])) {
+            hoverShapeData = [extractD3DataFromNode(xNodes[0])];
+        }
+        else if (xNodes.length > 1 && xNodes.every(isNodeContainsData)) {
+            const yPosition = pointerY - top - window.pageYOffset;
+            const xyNode = xNodes.find((node, i) => {
+                const { y, height } = extractD3DataFromNode(node);
+                if (i === xNodes.length - 1) {
+                    return yPosition <= y + height;
+                }
+                return yPosition >= y && yPosition <= y + height;
+            });
+            if (xyNode) {
+                hoverShapeData = [extractD3DataFromNode(xyNode)];
+            }
+        }
+        if (hoverShapeData) {
+            const position = [pointerX - offsetLeft, pointerY - offsetTop];
+            dispatcher.call('hover-shape', e.target, hoverShapeData, position);
+        }
+    };
+    const handleMouseMove = (e) => {
+        switch (calculationType) {
+            case 'x-primary': {
+                handleXprimaryMouseMove(e);
+                return;
+            }
+        }
+    };
+    const throttledHandleMouseMove = throttle(handleMouseMove, THROTTLE_DELAY);
+    const handleMouseLeave = () => {
+        throttledHandleMouseMove.cancel();
+        dispatcher.call('hover-shape', {}, undefined);
+    };
+    return (React.createElement("rect", { ref: rectRef, width: boundsWidth, height: boundsHeight, fill: "transparent", onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave }));
+};

package/build/plugins/d3/renderer/components/Tooltip/index.d.ts

@@ -1,12 +1,14 @@
 import React from 'react';
-import type { TooltipHoveredData } from '../../../../../types/widget-data';
+import type { Dispatch } from 'd3';
+import type { TooltipDataChunk } from '../../../../../types/widget-data';
 import type { PointerPosition, PreparedAxis, PreparedTooltip } from '../../hooks';
+export * from './TooltipTriggerArea';
 type TooltipProps = {
+    dispatcher: Dispatch<object>;
     tooltip: PreparedTooltip;
     xAxis: PreparedAxis;
     yAxis: PreparedAxis;
-    hovered?: TooltipHoveredData;
+    hovered?: TooltipDataChunk[];
     pointerPosition?: PointerPosition;
 };
 export declare const Tooltip: (props: TooltipProps) => React.JSX.Element | null;
-export {};