@gravity-ui/chartkit 5.11.0 → 5.11.2

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

@@ -84,11 +84,14 @@ export const Chart = (props) => {
     const boundsOffsetTop = chart.margin.top;
     // We only need to consider the width of the first left axis
     const boundsOffsetLeft = chart.margin.left + getYAxisWidth(yAxis[0]);
+    const isOutsideBounds = React.useCallback((x, y) => {
+        return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;
+    }, [boundsHeight, boundsWidth]);
     const handleMouseMove = (event) => {
         const [pointerX, pointerY] = pointer(event, svgRef.current);
         const x = pointerX - boundsOffsetLeft;
         const y = pointerY - boundsOffsetTop;
-        if (x < 0 || x > boundsWidth || y < 0 || y > boundsHeight) {
+        if (isOutsideBounds(x, y)) {
             dispatcher.call('hover-shape', {}, undefined);
             return;
         }
@@ -103,8 +106,25 @@ export const Chart = (props) => {
         throttledHandleMouseMove.cancel();
         dispatcher.call('hover-shape', {}, undefined);
     };
+    const handleChartClick = React.useCallback((event) => {
+        const [pointerX, pointerY] = pointer(event, svgRef.current);
+        const x = pointerX - boundsOffsetLeft;
+        const y = pointerY - boundsOffsetTop;
+        if (isOutsideBounds(x, y)) {
+            return;
+        }
+        const items = getClosestPoints({
+            position: [x, y],
+            shapesData,
+        });
+        const selected = items === null || items === void 0 ? void 0 : items.find((item) => item.closest);
+        if (!selected) {
+            return;
+        }
+        dispatcher.call('click-chart', undefined, { point: selected.data, series: selected.series }, event);
+    }, [boundsOffsetLeft, boundsOffsetTop, dispatcher, isOutsideBounds, shapesData]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("svg", { ref: svgRef, className: b(), width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave },
+        React.createElement("svg", { ref: svgRef, className: b(), width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onClick: handleChartClick },
             title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
             React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
                 return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });

package/build/plugins/d3/renderer/hooks/useShapes/pie/index.js

@@ -116,23 +116,9 @@ export function PieSeriesShapes(args) {
                 nodes[index].append(customShape);
             }
         });
-        const getSelectedSegment = (element) => {
-            const datum = select(element).datum();
-            const seriesId = get(datum, 'data.series.id', get(datum, 'series.id'));
-            return preparedData.reduce((result, pie) => {
-                var _a;
-                return result || ((_a = pie.segments.find((s) => s.data.series.id === seriesId)) === null || _a === void 0 ? void 0 : _a.data);
-            }, undefined);
-        };
         const eventName = `hover-shape.pie`;
         const hoverOptions = get(seriesOptions, 'pie.states.hover');
         const inactiveOptions = get(seriesOptions, 'pie.states.inactive');
-        svgElement.on('click', (e) => {
-            const selectedSegment = getSelectedSegment(e.target);
-            if (selectedSegment) {
-                dispatcher.call('click-chart', undefined, { point: selectedSegment.series.data, series: selectedSegment.series }, e);
-            }
-        });
         dispatcher.on(eventName, (data) => {
             var _a, _b;
             const selectedSeriesId = (_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.series) === null || _b === void 0 ? void 0 : _b.id;

package/build/plugins/d3/renderer/hooks/useShapes/scatter/index.js

@@ -25,15 +25,6 @@ export function ScatterSeriesShape(props) {
             .attr('fill', (d) => d.point.data.color || d.point.series.color || '')
             .attr('opacity', (d) => d.point.opacity)
             .attr('cursor', (d) => d.point.series.cursor);
-        const getSelectedPoint = (element) => {
-            return select(element).datum();
-        };
-        svgElement.on('click', (e) => {
-            const datum = getSelectedPoint(e.target);
-            if (datum) {
-                dispatcher.call('click-chart', undefined, { point: datum.point.data, series: datum.point.series }, e);
-            }
-        });
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
         dispatcher.on('hover-shape.scatter', (data) => {

package/build/plugins/d3/renderer/hooks/useShapes/treemap/index.js

@@ -45,17 +45,9 @@ export const TreemapSeriesShape = (props) => {
             .style('font-weight', () => { var _a; return ((_a = series.dataLabels.style) === null || _a === void 0 ? void 0 : _a.fontWeight) || null; })
             .style('fill', () => { var _a; return ((_a = series.dataLabels.style) === null || _a === void 0 ? void 0 : _a.fontColor) || null; })
             .call(setEllipsisForOverflowTexts, (d) => d.width);
-        const getSelectedPart = (node) => {
-            const hoveredRect = select(node);
-            return hoveredRect.datum();
-        };
         const eventName = `hover-shape.treemap`;
         const hoverOptions = get(seriesOptions, 'treemap.states.hover');
         const inactiveOptions = get(seriesOptions, 'treemap.states.inactive');
-        svgElement.on('click', (e) => {
-            const datum = getSelectedPart(e.target);
-            dispatcher.call('click-chart', undefined, { point: datum.data, series }, e);
-        });
         dispatcher.on(eventName, (data) => {
             var _a;
             const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;

package/build/plugins/d3/renderer/utils/get-closest-data.js

@@ -2,7 +2,7 @@ import { Delaunay, bisector, sort } from 'd3';
 import get from 'lodash/get';
 import groupBy from 'lodash/groupBy';
 function getClosestPointsByXValue(x, y, points) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const sorted = sort(points, (p) => p.x);
     const closestXIndex = bisector((p) => p.x).center(sorted, x);
     if (closestXIndex === -1) {
@@ -19,6 +19,11 @@ function getClosestPointsByXValue(x, y, points) {
     }
     else {
         closestYIndex = closestPoints.findIndex((p) => y > p.y0 && y < p.y1);
+        if (closestYIndex === -1) {
+            const sortedY = sort(closestPoints.map((p, index) => ({ index, y: p.y1 + (p.y0 - p.y1) / 2 })), (p) => p.y);
+            const sortedYIndex = bisector((p) => p.y).center(sortedY, y);
+            closestYIndex = (_d = (_c = sortedY[sortedYIndex]) === null || _c === void 0 ? void 0 : _c.index) !== null && _d !== void 0 ? _d : -1;
+        }
     }
     return closestPoints.map((p, i) => ({
         data: p.data,

package/package.json

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