@gravity-ui/chartkit 5.3.3 → 5.5.0

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

@@ -0,0 +1,167 @@
+import { Delaunay, bisector, sort } from 'd3';
+import get from 'lodash/get';
+import groupBy from 'lodash/groupBy';
+function getClosestPointsByXValue(x, y, points) {
+    var _a, _b;
+    const sorted = sort(points, (p) => p.x);
+    const closestXIndex = bisector((p) => p.x).center(sorted, x);
+    if (closestXIndex === -1) {
+        return [];
+    }
+    const closestX = sorted[closestXIndex].x;
+    const closestPoints = sort(points.filter((p) => p.x === closestX), (p) => p.y0);
+    let closestYIndex = -1;
+    if (y < ((_a = closestPoints[0]) === null || _a === void 0 ? void 0 : _a.y0)) {
+        closestYIndex = 0;
+    }
+    else if (y > ((_b = closestPoints[closestPoints.length - 1]) === null || _b === void 0 ? void 0 : _b.y1)) {
+        closestYIndex = closestPoints.length - 1;
+    }
+    else {
+        closestYIndex = closestPoints.findIndex((p) => y > p.y0 && y < p.y1);
+    }
+    return closestPoints.map((p, i) => ({
+        data: p.data,
+        series: p.series,
+        closest: i === closestYIndex,
+    }));
+}
+function getSeriesType(shapeData) {
+    return get(shapeData, 'series.type') || get(shapeData, 'point.series.type');
+}
+export function getClosestPoints(args) {
+    const { position, shapesData } = args;
+    const [pointerX, pointerY] = position;
+    const result = [];
+    const groups = groupBy(shapesData, getSeriesType);
+    Object.entries(groups).forEach(([seriesType, list]) => {
+        var _a, _b;
+        switch (seriesType) {
+            case 'bar-x': {
+                const points = list.map((d) => ({
+                    data: d.data,
+                    series: d.series,
+                    x: d.x + d.width / 2,
+                    y0: d.y,
+                    y1: d.y + d.height,
+                }));
+                result.push(...getClosestPointsByXValue(pointerX, pointerY, points));
+                break;
+            }
+            case 'waterfall': {
+                const points = list.map((d) => ({
+                    data: d.data,
+                    series: d.series,
+                    x: d.x + d.width / 2,
+                    y0: d.y,
+                    y1: d.y + d.height,
+                }));
+                result.push(...getClosestPointsByXValue(pointerX, pointerY, points));
+                break;
+            }
+            case 'area': {
+                const points = list.reduce((acc, d) => {
+                    Array.prototype.push.apply(acc, d.points.map((p) => ({
+                        data: p.data,
+                        series: p.series,
+                        x: p.x,
+                        y0: p.y0,
+                        y1: p.y,
+                    })));
+                    return acc;
+                }, []);
+                result.push(...getClosestPointsByXValue(pointerX, pointerY, points));
+                break;
+            }
+            case 'line': {
+                const points = list.reduce((acc, d) => {
+                    acc.push(...d.points.map((p) => ({
+                        data: p.data,
+                        series: p.series,
+                        x: p.x,
+                        y0: p.y,
+                        y1: p.y,
+                    })));
+                    return acc;
+                }, []);
+                result.push(...getClosestPointsByXValue(pointerX, pointerY, points));
+                break;
+            }
+            case 'bar-y': {
+                const points = list;
+                const sorted = sort(points, (p) => p.y);
+                const closestYIndex = bisector((p) => p.y).center(sorted, pointerY);
+                let closestPoints = [];
+                let closestXIndex = -1;
+                if (closestYIndex !== -1) {
+                    const closestY = sorted[closestYIndex].y;
+                    closestPoints = sort(points.filter((p) => p.y === closestY), (p) => p.x);
+                    const lastPoint = closestPoints[closestPoints.length - 1];
+                    if (pointerX < ((_a = closestPoints[0]) === null || _a === void 0 ? void 0 : _a.x)) {
+                        closestXIndex = 0;
+                    }
+                    else if (lastPoint && pointerX > lastPoint.x + lastPoint.width) {
+                        closestXIndex = closestPoints.length - 1;
+                    }
+                    else {
+                        closestXIndex = closestPoints.findIndex((p) => pointerX > p.x && pointerX < p.x + p.width);
+                    }
+                }
+                result.push(...closestPoints.map((p, i) => ({
+                    data: p.data,
+                    series: p.series,
+                    closest: i === closestXIndex,
+                })));
+                break;
+            }
+            case 'scatter': {
+                const points = list;
+                const delaunayX = Delaunay.from(points, (d) => d.point.x, (d) => d.point.y);
+                const closestPoint = points[delaunayX.find(pointerX, pointerY)];
+                if (closestPoint) {
+                    result.push({
+                        data: closestPoint.point.data,
+                        series: closestPoint.point.series,
+                        closest: true,
+                    });
+                }
+                break;
+            }
+            case 'pie': {
+                const points = list.map((d) => d.segments).flat();
+                const closestPoint = points.find((p) => {
+                    const { center, radius } = p.data.pie;
+                    const x = pointerX - center[0];
+                    const y = pointerY - center[1];
+                    let angle = Math.atan2(y, x) + 0.5 * Math.PI;
+                    angle = angle < 0 ? Math.PI * 2 + angle : angle;
+                    const polarRadius = Math.sqrt(x * x + y * y);
+                    return angle >= p.startAngle && angle <= p.endAngle && polarRadius < radius;
+                });
+                if (closestPoint) {
+                    result.push({
+                        data: closestPoint.data.series.data,
+                        series: closestPoint.data.series,
+                        closest: true,
+                    });
+                }
+                break;
+            }
+            case 'treemap': {
+                const data = list;
+                const closestPoint = (_b = data[0]) === null || _b === void 0 ? void 0 : _b.leaves.find((l) => {
+                    return (pointerX >= l.x0 && pointerX <= l.x1 && pointerY >= l.y0 && pointerY <= l.y1);
+                });
+                if (closestPoint) {
+                    result.push({
+                        data: closestPoint.data,
+                        series: data[0].series,
+                        closest: true,
+                    });
+                }
+                break;
+            }
+        }
+    });
+    return result;
+}

package/build/plugins/d3/renderer/utils/index.d.ts

@@ -7,10 +7,8 @@ export * from './time';
 export * from './axis';
 export * from './labels';
 export * from './symbol';
+export * from './series';
 export type AxisDirection = 'x' | 'y';
-export type NodeWithD3Data<T = unknown> = Element & {
-    __data__: T;
-};
 type UnknownSeries = {
     type: ChartKitWidgetSeries['type'];
     data: unknown;
@@ -73,5 +71,3 @@ export declare const getDataCategoryValue: (args: {
     data: ChartKitWidgetSeriesData;
 }) => string;
 export declare function getClosestPointsRange(axis: PreparedAxis, points: AxisDomain[]): number | undefined;
-export declare const isNodeContainsD3Data: (node?: Element | null) => node is NodeWithD3Data<unknown>;
-export declare const extractD3DataFromNode: <T extends unknown>(node: NodeWithD3Data<T>) => T;

package/build/plugins/d3/renderer/utils/index.js

@@ -13,6 +13,7 @@ export * from './time';
 export * from './axis';
 export * from './labels';
 export * from './symbol';
+export * from './series';
 const CHARTS_WITHOUT_AXIS = ['pie', 'treemap'];
 /**
  * Checks whether the series should be drawn with axes.
@@ -70,6 +71,16 @@ export const getDomainDataYBySeries = (series) => {
                 });
                 break;
             }
+            case 'waterfall': {
+                let yValue = 0;
+                seriesList.forEach((s) => {
+                    s.data.forEach((d) => {
+                        yValue += Number(d.y) || 0;
+                        acc.push(yValue);
+                    });
+                });
+                break;
+            }
             default: {
                 seriesList.filter(isSeriesWithNumericalYValues).forEach((s) => {
                     acc.push(...s.data.map((d) => d.y));
@@ -170,10 +181,3 @@ export function getClosestPointsRange(axis, points) {
     }
     return points[1] - points[0];
 }
-// https://d3js.org/d3-selection/joining#selection_data
-export const isNodeContainsD3Data = (node) => {
-    return Boolean(node && '__data__' in node);
-};
-export const extractD3DataFromNode = (node) => {
-    return node.__data__;
-};

package/build/plugins/d3/renderer/utils/series/index.d.ts

@@ -0,0 +1 @@
+export * from './waterfall';

package/build/plugins/d3/renderer/utils/series/index.js

@@ -0,0 +1 @@
+export * from './waterfall';

package/build/plugins/d3/renderer/utils/series/waterfall.d.ts

@@ -0,0 +1,4 @@
+import { WaterfallSeriesData } from '../../../../../types';
+import { PreparedWaterfallSeries } from '../../hooks';
+export declare function getWaterfallPointColor(point: WaterfallSeriesData, series: PreparedWaterfallSeries): string;
+export declare function getWaterfallPointSubtotal(point: WaterfallSeriesData, series: PreparedWaterfallSeries): number | null;

package/build/plugins/d3/renderer/utils/series/waterfall.js

@@ -0,0 +1,25 @@
+export function getWaterfallPointColor(point, series) {
+    if (point.color) {
+        return point.color;
+    }
+    if (point.total) {
+        return series.color;
+    }
+    if (Number(point.y) > 0) {
+        return series.positiveColor;
+    }
+    return series.negativeColor;
+}
+export function getWaterfallPointSubtotal(point, series) {
+    const pointIndex = series.data.indexOf(point);
+    if (pointIndex === -1) {
+        return null;
+    }
+    return series.data.reduce((sum, d, index) => {
+        if (index <= pointIndex) {
+            const value = d.total ? 0 : Number(d.y);
+            return sum + value;
+        }
+        return sum;
+    }, 0);
+}

package/build/plugins/highcharts/renderer/components/HighchartsComponent.d.ts

@@ -365,7 +365,7 @@ export declare class HighchartsComponent extends React.PureComponent<Props, Stat
                     };
                     point: {
                         events: {
-                            click: (event: any) => boolean;
+                            click: () => false;
                         };
                     };
                     marker: {

package/build/plugins/highcharts/renderer/helpers/config/config.d.ts

@@ -528,7 +528,7 @@ export function prepareConfig(data: any, options: any, isMobile: any, holidays:
             };
             point: {
                 events: {
-                    click: (event: any) => boolean;
+                    click: () => false;
                 };
             };
             marker: {

package/build/plugins/highcharts/renderer/helpers/config/config.js

@@ -1266,12 +1266,8 @@ export function prepareConfig(data, options, isMobile, holidays) {
                 },
                 point: {
                     events: {
-                        click: function (event) {
-                            if (event.shiftKey) {
-                                this.series.chart.tooltip.hide();
-                                this.series.data[this.index].remove();
-                                return true;
-                            }
+                        click: function () {
+                            // Prevent slicing of pie segment after clicking it
                             return false;
                         },
                     },

package/build/plugins/highcharts/renderer/helpers/graph.d.ts

@@ -359,7 +359,7 @@ declare function getGraph({ options, data, comments, isMobile, holidays }: GetGr
                 };
                 point: {
                     events: {
-                        click: (event: any) => boolean;
+                        click: () => false;
                     };
                 };
                 marker: {

package/build/types/widget-data/index.d.ts

@@ -19,6 +19,7 @@ export * from './title';
 export * from './tooltip';
 export * from './halo';
 export * from './treemap';
+export * from './waterfall';
 export type ChartKitWidgetData<T = any> = {
     chart?: ChartKitWidgetChart;
     legend?: ChartKitWidgetLegend;

package/build/types/widget-data/index.js

@@ -13,3 +13,4 @@ export * from './title';
 export * from './tooltip';
 export * from './halo';
 export * from './treemap';
+export * from './waterfall';

package/build/types/widget-data/series.d.ts

@@ -9,8 +9,9 @@ import type { PointMarkerOptions } from './marker';
 import type { PieSeries, PieSeriesData } from './pie';
 import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { TreemapSeries, TreemapSeriesData } from './treemap';
-export type ChartKitWidgetSeries<T = any> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T>;
-export type ChartKitWidgetSeriesData<T = any> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T>;
+import type { WaterfallSeries, WaterfallSeriesData } from './waterfall';
+export type ChartKitWidgetSeries<T = any> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T> | WaterfallSeries<T>;
+export type ChartKitWidgetSeriesData<T = any> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T> | WaterfallSeriesData<T>;
 export type DataLabelRendererData<T = any> = {
     data: ChartKitWidgetSeriesData<T>;
 };
@@ -202,5 +203,23 @@ export type ChartKitWidgetSeriesOptions = {
             inactive?: BasicInactiveState;
         };
     };
+    waterfall?: {
+        /** The maximum allowed pixel width for a column.
+         * This prevents the columns from becoming too wide when there is a small number of points in the chart.
+         *
+         * @default 50
+         */
+        barMaxWidth?: number;
+        /** Padding between each column or bar, in x axis units.
+         *
+         * @default 0.1
+         * */
+        barPadding?: number;
+        /** Options for the series states that provide additional styling information to the series. */
+        states?: {
+            hover?: BasicHoverState;
+            inactive?: BasicInactiveState;
+        };
+    };
 };
 export {};

package/build/types/widget-data/tooltip.d.ts

@@ -6,6 +6,7 @@ import type { LineSeries, LineSeriesData } from './line';
 import type { PieSeries, PieSeriesData } from './pie';
 import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { TreemapSeries, TreemapSeriesData } from './treemap';
+import type { WaterfallSeries, WaterfallSeriesData } from './waterfall';
 export type TooltipDataChunkBarX<T = any> = {
     data: BarXSeriesData<T>;
     series: BarXSeries<T>;
@@ -50,7 +51,13 @@ export type TooltipDataChunkTreemap<T = any> = {
     data: TreemapSeriesData<T>;
     series: TreemapSeries<T>;
 };
-export type TooltipDataChunk<T = any> = TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T>;
+export type TooltipDataChunkWaterfall<T = any> = {
+    data: WaterfallSeriesData<T>;
+    series: WaterfallSeries<T>;
+};
+export type TooltipDataChunk<T = any> = (TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T> | TooltipDataChunkWaterfall<T>) & {
+    closest?: boolean;
+};
 export type ChartKitWidgetTooltip<T = any> = {
     enabled?: boolean;
     /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */

package/build/types/widget-data/waterfall.d.ts

@@ -0,0 +1,39 @@
+import { SeriesType } from '../../constants';
+import type { BaseSeries, BaseSeriesData } from './base';
+import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
+export type WaterfallSeriesData<T = any> = BaseSeriesData<T> & {
+    /**
+     * The `x` value. Depending on the context , it may represents:
+     * - numeric value (for `linear` x axis)
+     * - timestamp value (for `datetime` x axis)
+     * - x axis category value (for `category` x axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `xAxis.categories`
+     */
+    x?: string | number;
+    /**
+     * The `y` value. Depending on the context , it may represents:
+     * - numeric value (for `linear` y axis)
+     */
+    y?: number;
+    /** Data label value of the point. If not specified, the y value is used. */
+    label?: string | number;
+    /** Individual opacity for the point. */
+    opacity?: number;
+    /** When this property is true, the point display the total sum across the entire series. */
+    total?: boolean;
+};
+export type WaterfallSeries<T = any> = BaseSeries & {
+    type: typeof SeriesType.Waterfall;
+    data: WaterfallSeriesData<T>[];
+    /** The name of the series (used in legend, tooltip etc). */
+    name: string;
+    /** The main color of the series (hex, rgba). */
+    color?: string;
+    /** The color used for positive values. If it is not specified, the general color of the series is used. */
+    positiveColor?: string;
+    /** The color used for negative values. If it is not specified, the general color of the series is used. */
+    negativeColor?: string;
+    /** Individual series legend options. Has higher priority than legend options in widget data. */
+    legend?: ChartKitWidgetLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
+};

package/build/types/widget-data/waterfall.js

@@ -0,0 +1 @@
+export {};

package/package.json

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

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

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

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

@@ -1,153 +0,0 @@
-import React from 'react';
-import { bisector, group, pointer, sort } from 'd3';
-import get from 'lodash/get';
-import throttle from 'lodash/throttle';
-import { extractD3DataFromNode, isNodeContainsD3Data } from '../../utils';
-const THROTTLE_DELAY = 50;
-const isNodeContainsData = (node) => {
-    return isNodeContainsD3Data(node);
-};
-function getBarXShapeData(args) {
-    var _a;
-    const { shapesData, point: [pointerX, pointerY], top, left, xData, container, } = args;
-    const barWidthOffset = shapesData[0].width / 2;
-    const xPosition = pointerX - left - barWidthOffset;
-    const xDataIndex = bisector((d) => d.x).center(xData, xPosition);
-    const xNodes = Array.from((container === null || container === void 0 ? void 0 : container.querySelectorAll(`[x="${(_a = xData[xDataIndex]) === null || _a === void 0 ? void 0 : _a.x}"]`)) || []);
-    if (xNodes.length === 1 && isNodeContainsData(xNodes[0])) {
-        return [extractD3DataFromNode(xNodes[0])];
-    }
-    if (xNodes.length > 1 && xNodes.every(isNodeContainsData)) {
-        const yPosition = pointerY - top;
-        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) {
-            return [extractD3DataFromNode(xyNode)];
-        }
-    }
-    return [];
-}
-function getLineShapesData(args) {
-    const { xData, point: [pointerX], } = args;
-    const xDataIndex = bisector((d) => d.x).center(xData, pointerX);
-    const selectedLineShape = xData[xDataIndex];
-    if (selectedLineShape) {
-        return [
-            {
-                series: selectedLineShape.series,
-                data: selectedLineShape.data,
-            },
-        ];
-    }
-    return [];
-}
-function getBarYData(args) {
-    var _a;
-    const { data, point: [pointerX, pointerY], } = args;
-    const yDataIndex = bisector((d) => d.y).center(data, pointerY);
-    const shapesByY = ((_a = data[yDataIndex]) === null || _a === void 0 ? void 0 : _a.items) || [];
-    const xDataIndex = bisector((d) => d.x).left(shapesByY, pointerX);
-    const result = shapesByY[Math.min(xDataIndex, shapesByY.length - 1)];
-    return result
-        ? [
-            {
-                series: result.series,
-                data: result.data,
-            },
-        ]
-        : [];
-}
-export const TooltipTriggerArea = (args) => {
-    const { boundsWidth, boundsHeight, dispatcher, shapesData, svgContainer } = args;
-    const rectRef = React.useRef(null);
-    const xBarData = React.useMemo(() => {
-        const result = shapesData
-            .filter((sd) => get(sd, 'series.type') === 'bar-x')
-            .map((sd) => ({ x: sd.x, data: sd }));
-        return sort(result, (item) => item.x);
-    }, [shapesData]);
-    const xLineData = React.useMemo(() => {
-        const result = shapesData
-            .filter((sd) => ['line', 'area'].includes(sd.series.type))
-            .reduce((acc, sd) => {
-            return acc.concat(sd.points.map((d) => ({
-                x: d.x,
-                data: d.data,
-                series: d.series,
-            })));
-        }, []);
-        return sort(result, (item) => item.x);
-    }, [shapesData]);
-    const barYData = React.useMemo(() => {
-        const barYShapeData = shapesData.filter((sd) => get(sd, 'series.type') === 'bar-y');
-        const result = Array.from(group(barYShapeData, (sd) => sd.y)).map(([y, shapes]) => {
-            const yValue = y + shapes[0].height / 2;
-            return {
-                y: yValue,
-                items: sort(shapes.map((shape) => {
-                    const preparedData = shape;
-                    return {
-                        x: preparedData.x + preparedData.width,
-                        data: preparedData.data,
-                        series: preparedData.series,
-                    };
-                }), (item) => item.x),
-            };
-        });
-        return sort(result, (item) => item.y);
-    }, [shapesData]);
-    const getShapeData = (point) => {
-        var _a, _b;
-        const { left: ownLeft, top: ownTop } = ((_a = rectRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {
-            left: 0,
-            top: 0,
-        };
-        const { left: containerLeft, top: containerTop } = (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) || {
-            left: 0,
-            top: 0,
-        };
-        const [pointerX, pointerY] = point; //pointer(e, svgContainer);
-        const result = [];
-        result === null || result === void 0 ? void 0 : result.push(...getBarXShapeData({
-            shapesData,
-            point: [pointerX, pointerY],
-            left: ownLeft - containerLeft,
-            top: ownTop - containerTop,
-            xData: xBarData,
-            container: (_b = rectRef.current) === null || _b === void 0 ? void 0 : _b.parentElement,
-        }), ...getLineShapesData({
-            xData: xLineData,
-            point: [pointerX - (ownLeft - containerLeft), pointerY - (ownTop - containerTop)],
-        }), ...getBarYData({
-            data: barYData,
-            point: [pointerX - (ownLeft - containerLeft), pointerY - (ownTop - containerTop)],
-        }));
-        return result;
-    };
-    const handleMouseMove = (e) => {
-        const [pointerX, pointerY] = pointer(e, svgContainer);
-        const hoverShapeData = getShapeData([pointerX, pointerY]);
-        if (hoverShapeData.length) {
-            const position = [pointerX, pointerY];
-            dispatcher.call('hover-shape', e.target, hoverShapeData, position);
-        }
-    };
-    const throttledHandleMouseMove = throttle(handleMouseMove, THROTTLE_DELAY);
-    const handleMouseLeave = () => {
-        throttledHandleMouseMove.cancel();
-        dispatcher.call('hover-shape', {}, undefined);
-    };
-    const handleClick = (e) => {
-        const [pointerX, pointerY] = pointer(e, svgContainer);
-        const shapeData = getShapeData([pointerX, pointerY]);
-        if (shapeData.length) {
-            dispatcher.call('click-chart', undefined, { point: get(shapeData, '[0].data'), series: get(shapeData, '[0].series') }, e);
-        }
-    };
-    return (React.createElement("rect", { ref: rectRef, width: boundsWidth, height: boundsHeight, fill: "transparent", onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onClick: handleClick }));
-};