@gravity-ui/chartkit 5.17.0 → 5.18.0

package/build/plugins/d3/renderer/hooks/useShapes/marker.d.ts

@@ -1,13 +0,0 @@
-import { BaseType, Selection } from 'd3';
-import { MarkerData as AreaMarkerData } from './area/types';
-import { MarkerData as LineMarkerData } from './line/types';
-import { MarkerData as ScatterMarkerData } from './scatter/types';
-type MarkerData = LineMarkerData | AreaMarkerData | ScatterMarkerData;
-export declare function renderMarker<T extends MarkerData>(selection: Selection<BaseType | SVGGElement, T, SVGGElement, unknown>): Selection<BaseType | SVGGElement, T, SVGGElement, unknown>;
-export declare function getMarkerVisibility(d: MarkerData): "" | "hidden";
-export declare function getMarkerHaloVisibility(d: MarkerData): "" | "hidden";
-export declare function setMarker<T extends BaseType, D extends MarkerData>(selection: Selection<T, D, BaseType | null, unknown>, state: 'normal' | 'hover'): void;
-export declare function getMarkerSymbol(type: "circle" | "diamond" | "square" | "triangle" | "triangle-down" | undefined, radius: number): string | null;
-export declare function selectMarkerHalo<T>(parentSelection: Selection<BaseType, T, null, undefined>): Selection<BaseType, T, null, undefined>;
-export declare function selectMarkerSymbol<T>(parentSelection: Selection<BaseType, T, null, undefined>): Selection<BaseType, T, null, undefined>;
-export {};

package/build/plugins/d3/renderer/hooks/useShapes/marker.js

@@ -1,76 +0,0 @@
-import { symbol } from 'd3';
-import get from 'lodash/get';
-import { SymbolType } from '../../../../../constants';
-import { block } from '../../../../../utils/cn';
-import { getSymbol } from '../../utils';
-const b = block('d3-marker');
-const haloClassName = b('halo');
-const symbolClassName = b('symbol');
-export function renderMarker(selection) {
-    const markerSelection = selection
-        .attr('class', b('wrapper'))
-        .attr('visibility', getMarkerVisibility)
-        .attr('transform', (d) => {
-        return `translate(${d.point.x},${d.point.y})`;
-    });
-    markerSelection
-        .append('path')
-        .attr('class', haloClassName)
-        .attr('d', (d) => {
-        const series = d.point.series;
-        const type = series.marker.states.normal.symbol;
-        const radius = get(d.point.data, 'radius', series.marker.states.hover.radius);
-        const haloSize = series.marker.states.hover.halo.size;
-        return getMarkerSymbol(type, radius + haloSize);
-    })
-        .attr('fill', (d) => d.point.series.color)
-        .attr('opacity', (d) => d.point.series.marker.states.hover.halo.opacity)
-        .attr('z-index', -1)
-        .attr('visibility', getMarkerHaloVisibility);
-    markerSelection
-        .append('path')
-        .attr('class', symbolClassName)
-        .call(setMarker, 'normal')
-        .attr('fill', (d) => d.point.series.color);
-    return markerSelection;
-}
-export function getMarkerVisibility(d) {
-    const markerStates = d.point.series.marker.states;
-    let enabled;
-    if (d.hovered) {
-        enabled = markerStates.hover.enabled && d.hovered;
-    }
-    else {
-        enabled =
-            markerStates.normal.enabled || get(d.point.data, 'marker.states.normal.enabled', false);
-    }
-    return enabled ? '' : 'hidden';
-}
-export function getMarkerHaloVisibility(d) {
-    const markerStates = d.point.series.marker.states;
-    const enabled = markerStates.hover.halo.enabled && d.hovered;
-    return enabled ? '' : 'hidden';
-}
-export function setMarker(selection, state) {
-    selection
-        .attr('d', (d) => {
-        const series = d.point.series;
-        const type = series.marker.states.normal.symbol;
-        const radius = get(d.point.data, 'radius', series.marker.states[state].radius);
-        const size = radius + series.marker.states[state].borderWidth;
-        return getMarkerSymbol(type, size);
-    })
-        .attr('stroke-width', (d) => d.point.series.marker.states[state].borderWidth)
-        .attr('stroke', (d) => d.point.series.marker.states[state].borderColor);
-}
-export function getMarkerSymbol(type = SymbolType.Circle, radius) {
-    const symbolFn = getSymbol(type);
-    const size = Math.pow(radius, 2) * Math.PI;
-    return symbol(symbolFn, size)();
-}
-export function selectMarkerHalo(parentSelection) {
-    return parentSelection.select(`.${haloClassName}`);
-}
-export function selectMarkerSymbol(parentSelection) {
-    return parentSelection.select(`.${symbolClassName}`);
-}

package/build/plugins/d3/renderer/hooks/useShapes/pie/index.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import type { Dispatch, PieArcDatum } from 'd3';
-import { PreparedSeriesOptions } from '../../useSeries/types';
-import { PreparedPieData, SegmentData } from './types';
-type PreparePieSeriesArgs = {
-    dispatcher: Dispatch<object>;
-    preparedData: PreparedPieData[];
-    seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
-};
-export declare function getHaloVisibility(d: PieArcDatum<SegmentData>): "" | "hidden";
-export declare function PieSeriesShapes(args: PreparePieSeriesArgs): React.JSX.Element;
-export {};

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

@@ -1,172 +0,0 @@
-import React from 'react';
-import { arc, color, select } from 'd3';
-import get from 'lodash/get';
-import { block } from '../../../../../../utils/cn';
-import { setEllipsisForOverflowTexts } from '../../../utils';
-import { HtmlLayer } from '../HtmlLayer';
-import { setActiveState } from '../utils';
-const b = block('d3-pie');
-export function getHaloVisibility(d) {
-    const enabled = d.data.pie.halo.enabled && d.data.hovered;
-    return enabled ? '' : 'hidden';
-}
-export function PieSeriesShapes(args) {
-    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
-    const ref = React.useRef(null);
-    React.useEffect(() => {
-        if (!ref.current) {
-            return () => { };
-        }
-        const svgElement = select(ref.current);
-        svgElement.selectAll('*').remove();
-        const segmentSelector = `.${b('segment')}`;
-        const connectorSelector = `.${b('connector')}`;
-        const shapesSelection = svgElement
-            .selectAll('pie')
-            .data(preparedData)
-            .join('g')
-            .attr('id', (pieData) => pieData.id)
-            .attr('class', b('item'))
-            .attr('transform', (pieData) => {
-            const [x, y] = pieData.center;
-            return `translate(${x}, ${y})`;
-        })
-            .style('stroke', (pieData) => pieData.borderColor)
-            .style('stroke-width', (pieData) => pieData.borderWidth)
-            .attr('cursor', (pieData) => pieData.series.cursor);
-        // Render halo appearing outside the hovered slice
-        shapesSelection
-            .selectAll('halo')
-            .data((pieData) => {
-            if (pieData.halo.enabled) {
-                return pieData.segments;
-            }
-            return [];
-        })
-            .join('path')
-            .attr('d', (d) => {
-            const arcGenerator = arc()
-                .innerRadius(d.data.pie.innerRadius)
-                .outerRadius(d.data.pie.radius + d.data.pie.halo.size)
-                .cornerRadius(d.data.pie.borderRadius);
-            return arcGenerator(d);
-        })
-            .attr('class', b('halo'))
-            .attr('fill', (d) => d.data.color)
-            .attr('opacity', (d) => d.data.pie.halo.opacity)
-            .attr('z-index', -1)
-            .attr('visibility', getHaloVisibility);
-        // Render segments
-        shapesSelection
-            .selectAll(segmentSelector)
-            .data((pieData) => pieData.segments)
-            .join('path')
-            .attr('d', (d) => {
-            const arcGenerator = arc()
-                .innerRadius(d.data.pie.innerRadius)
-                .outerRadius(d.data.pie.radius)
-                .cornerRadius(d.data.pie.borderRadius);
-            return arcGenerator(d);
-        })
-            .attr('class', b('segment'))
-            .attr('fill', (d) => d.data.color)
-            .attr('opacity', (d) => d.data.opacity);
-        // render Labels
-        shapesSelection
-            .selectAll('text')
-            .data((pieData) => pieData.labels)
-            .join('text')
-            .text((d) => d.text)
-            .attr('class', b('label'))
-            .attr('x', (d) => d.x)
-            .attr('y', (d) => d.y)
-            .attr('text-anchor', (d) => d.textAnchor)
-            .style('font-size', (d) => d.style.fontSize)
-            .style('font-weight', (d) => d.style.fontWeight || null)
-            .style('fill', (d) => d.style.fontColor || null)
-            .call(setEllipsisForOverflowTexts, (d) => d.size.width > d.maxWidth ? d.maxWidth : Infinity);
-        // Add the polyline between chart and labels
-        shapesSelection
-            .selectAll(connectorSelector)
-            .data((pieData) => pieData.connectors)
-            .enter()
-            .append('path')
-            .attr('class', b('connector'))
-            .attr('d', (d) => d.path)
-            .attr('stroke', (d) => d.color)
-            .attr('stroke-width', 1)
-            .attr('stroke-linejoin', 'round')
-            .attr('stroke-linecap', 'round')
-            .style('fill', 'none');
-        // Render custom shapes if defined
-        shapesSelection.each(function (d, index, nodes) {
-            var _a, _b;
-            const customShape = (_b = (_a = d.series).renderCustomShape) === null || _b === void 0 ? void 0 : _b.call(_a, {
-                series: {
-                    innerRadius: d.innerRadius,
-                },
-            });
-            if (customShape) {
-                nodes[index].append(customShape);
-            }
-        });
-        const eventName = `hover-shape.pie`;
-        const hoverOptions = get(seriesOptions, 'pie.states.hover');
-        const inactiveOptions = get(seriesOptions, 'pie.states.inactive');
-        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;
-            const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
-            const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
-            shapesSelection.datum((_d, index, list) => {
-                const pieSelection = select(list[index]);
-                const haloSelection = pieSelection.selectAll(`.${b('halo')}`);
-                pieSelection
-                    .selectAll(segmentSelector)
-                    .datum((d, i, elements) => {
-                    const hovered = Boolean(hoverEnabled && d.data.series.id === selectedSeriesId);
-                    if (d.data.hovered !== hovered) {
-                        d.data.hovered = hovered;
-                        select(elements[i]).attr('fill', () => {
-                            var _a;
-                            const initialColor = d.data.color;
-                            if (d.data.hovered) {
-                                return (((_a = color(initialColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) || initialColor);
-                            }
-                            return initialColor;
-                        });
-                        const currentSegmentHalo = haloSelection.nodes()[i];
-                        select(currentSegmentHalo).attr('visibility', getHaloVisibility);
-                    }
-                    setActiveState({
-                        element: elements[i],
-                        state: inactiveOptions,
-                        active: Boolean(!inactiveEnabled ||
-                            !selectedSeriesId ||
-                            selectedSeriesId === d.data.series.id),
-                        datum: d.data,
-                    });
-                    return d;
-                });
-                const labelSelection = pieSelection.selectAll('tspan');
-                const connectorSelection = pieSelection.selectAll(connectorSelector);
-                labelSelection.merge(connectorSelection).datum((d, i, elements) => {
-                    return setActiveState({
-                        element: elements[i],
-                        state: inactiveOptions,
-                        active: Boolean(!inactiveEnabled ||
-                            !selectedSeriesId ||
-                            selectedSeriesId === d.series.id),
-                        datum: d,
-                    });
-                });
-            });
-        });
-        return () => {
-            dispatcher.on(eventName, null);
-        };
-    }, [dispatcher, preparedData, seriesOptions]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("g", { ref: ref, className: b(), style: { zIndex: 9 } }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
-}

package/build/plugins/d3/renderer/hooks/useShapes/pie/prepare-data.d.ts

@@ -1,9 +0,0 @@
-import { PreparedPieSeries } from '../../useSeries/types';
-import { PreparedPieData } from './types';
-type Args = {
-    series: PreparedPieSeries[];
-    boundsWidth: number;
-    boundsHeight: number;
-};
-export declare function preparePieData(args: Args): PreparedPieData[];
-export {};

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

@@ -1,186 +0,0 @@
-import { arc, group, line as lineGenerator } from 'd3';
-import { calculateNumericProperty, getLabelsSize, getLeftPosition, isLabelsOverlapping, } from '../../../utils';
-import { getCurveFactory, pieGenerator } from './utils';
-const FULL_CIRCLE = Math.PI * 2;
-const getCenter = (boundsWidth, boundsHeight, center) => {
-    var _a, _b;
-    const defaultX = boundsWidth * 0.5;
-    const defaultY = boundsHeight * 0.5;
-    if (!center) {
-        return [defaultX, defaultY];
-    }
-    const [x, y] = center;
-    const resultX = (_a = calculateNumericProperty({ value: x, base: boundsWidth })) !== null && _a !== void 0 ? _a : defaultX;
-    const resultY = (_b = calculateNumericProperty({ value: y, base: boundsHeight })) !== null && _b !== void 0 ? _b : defaultY;
-    return [resultX, resultY];
-};
-export function preparePieData(args) {
-    const { series: preparedSeries, boundsWidth, boundsHeight } = args;
-    const maxRadius = Math.min(boundsWidth, boundsHeight) / 2;
-    const groupedPieSeries = group(preparedSeries, (pieSeries) => pieSeries.stackId);
-    return Array.from(groupedPieSeries).map(([stackId, items]) => {
-        var _a, _b, _c;
-        const series = items[0];
-        const { center, borderWidth, borderColor, borderRadius, radius: seriesRadius, innerRadius: seriesInnerRadius, dataLabels, } = series;
-        const radius = (_a = calculateNumericProperty({ value: seriesRadius, base: maxRadius })) !== null && _a !== void 0 ? _a : maxRadius;
-        const data = {
-            id: stackId,
-            center: getCenter(boundsWidth, boundsHeight, center),
-            innerRadius: (_b = calculateNumericProperty({ value: seriesInnerRadius, base: radius })) !== null && _b !== void 0 ? _b : 0,
-            radius,
-            segments: [],
-            labels: [],
-            connectors: [],
-            borderColor,
-            borderWidth,
-            borderRadius,
-            series: items[0],
-            connectorCurve: dataLabels.connectorCurve,
-            halo: {
-                enabled: series.states.hover.halo.enabled,
-                opacity: series.states.hover.halo.opacity,
-                size: series.states.hover.halo.size,
-            },
-            htmlElements: [],
-        };
-        const segments = items.map((item) => {
-            return {
-                value: item.value,
-                color: item.color,
-                opacity: item.opacity,
-                series: item,
-                hovered: false,
-                active: true,
-                pie: data,
-            };
-        });
-        data.segments = pieGenerator(segments);
-        let line = lineGenerator();
-        const curveFactory = getCurveFactory(data);
-        if (curveFactory) {
-            line = line.curve(curveFactory);
-        }
-        if (dataLabels.enabled) {
-            const { style, connectorPadding, distance } = dataLabels;
-            const { maxHeight: labelHeight } = getLabelsSize({ labels: ['Some Label'], style });
-            const minSegmentRadius = maxRadius - connectorPadding - distance - labelHeight;
-            if (data.radius > minSegmentRadius) {
-                data.radius = minSegmentRadius;
-                data.innerRadius =
-                    (_c = calculateNumericProperty({ value: seriesInnerRadius, base: data.radius })) !== null && _c !== void 0 ? _c : 0;
-            }
-            const connectorStartPointGenerator = arc()
-                .innerRadius(data.radius)
-                .outerRadius(data.radius);
-            const connectorMidPointRadius = data.radius + distance / 2;
-            const connectorMidPointGenerator = arc()
-                .innerRadius(connectorMidPointRadius)
-                .outerRadius(connectorMidPointRadius);
-            const connectorArcRadius = data.radius + distance;
-            const connectorEndPointGenerator = arc()
-                .innerRadius(connectorArcRadius)
-                .outerRadius(connectorArcRadius);
-            const labelArcRadius = connectorArcRadius + connectorPadding;
-            const labelArcGenerator = arc()
-                .innerRadius(labelArcRadius)
-                .outerRadius(labelArcRadius);
-            const labels = [];
-            items.forEach((d, index) => {
-                const prevLabel = labels[labels.length - 1];
-                const text = String(d.data.label || d.data.value);
-                const shouldUseHtml = dataLabels.html;
-                const labelSize = getLabelsSize({ labels: [text], style, html: shouldUseHtml });
-                const labelWidth = labelSize.maxWidth;
-                const relatedSegment = data.segments[index];
-                const getLabelPosition = (angle) => {
-                    let [x, y] = labelArcGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
-                    y = y < 0 ? y - labelHeight : y;
-                    if (shouldUseHtml) {
-                        x = x < 0 ? x - labelWidth : x;
-                    }
-                    x = Math.max(-boundsWidth / 2, x);
-                    return [x, y];
-                };
-                const getConnectorPoints = (angle) => {
-                    const connectorStartPoint = connectorStartPointGenerator.centroid(relatedSegment);
-                    const connectorEndPoint = connectorEndPointGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
-                    if (dataLabels.connectorShape === 'straight-line') {
-                        return [connectorStartPoint, connectorEndPoint];
-                    }
-                    const connectorMidPoint = connectorMidPointGenerator.centroid(relatedSegment);
-                    return [connectorStartPoint, connectorMidPoint, connectorEndPoint];
-                };
-                const midAngle = Math.max((prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.angle) || 0, relatedSegment.startAngle +
-                    (relatedSegment.endAngle - relatedSegment.startAngle) / 2);
-                const [x, y] = getLabelPosition(midAngle);
-                const label = {
-                    text,
-                    x,
-                    y,
-                    style,
-                    size: { width: labelWidth, height: labelHeight },
-                    maxWidth: labelWidth,
-                    textAnchor: midAngle < Math.PI ? 'start' : 'end',
-                    series: { id: d.id },
-                    active: true,
-                    segment: relatedSegment.data,
-                    angle: midAngle,
-                };
-                let overlap = false;
-                if (prevLabel) {
-                    overlap = isLabelsOverlapping(prevLabel, label, dataLabels.padding);
-                    if (overlap) {
-                        let shouldAdjustAngle = true;
-                        const step = Math.PI / 180;
-                        while (shouldAdjustAngle) {
-                            const newAngle = label.angle + step;
-                            if (newAngle > FULL_CIRCLE &&
-                                newAngle % FULL_CIRCLE > labels[0].angle) {
-                                shouldAdjustAngle = false;
-                            }
-                            else {
-                                label.angle = newAngle;
-                                const [newX, newY] = getLabelPosition(newAngle);
-                                label.x = newX;
-                                label.y = newY;
-                                if (!isLabelsOverlapping(prevLabel, label, dataLabels.padding)) {
-                                    shouldAdjustAngle = false;
-                                    overlap = false;
-                                }
-                            }
-                        }
-                    }
-                }
-                if (dataLabels.allowOverlap || !overlap) {
-                    const left = getLeftPosition(label);
-                    if (Math.abs(left) > boundsWidth / 2) {
-                        label.maxWidth = label.size.width - (Math.abs(left) - boundsWidth / 2);
-                    }
-                    else {
-                        const right = left + label.size.width;
-                        if (right > boundsWidth / 2) {
-                            label.maxWidth = label.size.width - (right - boundsWidth / 2);
-                        }
-                    }
-                    if (shouldUseHtml) {
-                        data.htmlElements.push({
-                            x: boundsWidth / 2 + label.x,
-                            y: boundsHeight / 2 + label.y,
-                            content: label.text,
-                        });
-                    }
-                    else {
-                        labels.push(label);
-                    }
-                    const connector = {
-                        path: line(getConnectorPoints(midAngle)),
-                        color: relatedSegment.data.color,
-                    };
-                    data.connectors.push(connector);
-                }
-            });
-            data.labels = labels;
-        }
-        return data;
-    });
-}

package/build/plugins/d3/renderer/hooks/useShapes/pie/types.d.ts

@@ -1,42 +0,0 @@
-import type { PieArcDatum } from 'd3';
-import { ConnectorCurve } from '../../../../../../types';
-import { HtmlItem, LabelData } from '../../../types';
-import { PreparedPieSeries } from '../../useSeries/types';
-export type SegmentData = {
-    value: number;
-    color: string;
-    opacity: number | null;
-    series: PreparedPieSeries;
-    hovered: boolean;
-    active: boolean;
-    pie: PreparedPieData;
-};
-export type PieLabelData = LabelData & {
-    segment: SegmentData;
-    angle: number;
-    maxWidth: number;
-};
-export type PieConnectorData = {
-    path: string | null;
-    color: string;
-};
-export type PreparedPieData = {
-    id: string;
-    segments: PieArcDatum<SegmentData>[];
-    labels: PieLabelData[];
-    connectors: PieConnectorData[];
-    center: [number, number];
-    radius: number;
-    innerRadius: number;
-    borderRadius: number;
-    borderWidth: number;
-    borderColor: string;
-    series: PreparedPieSeries;
-    connectorCurve: ConnectorCurve;
-    halo: {
-        enabled: boolean;
-        opacity: number;
-        size: number;
-    };
-    htmlElements: HtmlItem[];
-};

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

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

package/build/plugins/d3/renderer/hooks/useShapes/pie/utils.d.ts

@@ -1,4 +0,0 @@
-import type { CurveFactory } from 'd3';
-import type { PreparedPieData, SegmentData } from './types';
-export declare const pieGenerator: import("d3-shape").Pie<any, SegmentData>;
-export declare function getCurveFactory(data: PreparedPieData): CurveFactory | undefined;

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

@@ -1,15 +0,0 @@
-import { curveBasis, curveLinear, pie } from 'd3';
-export const pieGenerator = pie()
-    .value((d) => d.value)
-    .sort(null);
-export function getCurveFactory(data) {
-    switch (data.connectorCurve) {
-        case 'basic': {
-            return curveBasis;
-        }
-        case 'linear': {
-            return curveLinear;
-        }
-    }
-    return undefined;
-}

package/build/plugins/d3/renderer/hooks/useShapes/scatter/index.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import type { Dispatch } from 'd3';
-import { PreparedSeriesOptions } from '../../useSeries/types';
-import type { PreparedScatterData } from './types';
-export { prepareScatterData } from './prepare-data';
-type ScatterSeriesShapeProps = {
-    dispatcher: Dispatch<object>;
-    preparedData: PreparedScatterData[];
-    seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
-};
-export declare function ScatterSeriesShape(props: ScatterSeriesShapeProps): React.JSX.Element;

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

@@ -1,69 +0,0 @@
-import React from 'react';
-import { select } from 'd3';
-import get from 'lodash/get';
-import { block } from '../../../../../../utils/cn';
-import { HtmlLayer } from '../HtmlLayer';
-import { getMarkerHaloVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
-import { setActiveState, shapeKey } from '../utils';
-export { prepareScatterData } from './prepare-data';
-const b = block('d3-scatter');
-export function ScatterSeriesShape(props) {
-    const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
-    const ref = React.useRef(null);
-    React.useEffect(() => {
-        if (!ref.current) {
-            return () => { };
-        }
-        const svgElement = select(ref.current);
-        const hoverOptions = get(seriesOptions, 'scatter.states.hover');
-        const inactiveOptions = get(seriesOptions, 'scatter.states.inactive');
-        svgElement.selectAll('*').remove();
-        const selection = svgElement
-            .selectAll('path')
-            .data(preparedData, shapeKey)
-            .join('g')
-            .call(renderMarker)
-            .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 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) => {
-            var _a;
-            const selected = data === null || data === void 0 ? void 0 : data.find((d) => d.series.type === 'scatter');
-            const selectedDataItem = selected === null || selected === void 0 ? void 0 : selected.data;
-            const selectedSeriesId = (_a = selected === null || selected === void 0 ? void 0 : selected.series) === null || _a === void 0 ? void 0 : _a.id;
-            selection.datum((d, index, list) => {
-                const elementSelection = select(list[index]);
-                const hovered = Boolean(hoverEnabled && d.point.data === selectedDataItem);
-                if (d.hovered !== hovered) {
-                    d.hovered = hovered;
-                    elementSelection.attr('z-index', hovered ? 999 : null);
-                    selectMarkerHalo(elementSelection).attr('visibility', getMarkerHaloVisibility);
-                    selectMarkerSymbol(elementSelection).call(setMarker, hovered ? 'hover' : 'normal');
-                }
-                if (hovered) {
-                    elementSelection.raise();
-                }
-                if (d.point.series.marker.states.normal.enabled) {
-                    const isActive = Boolean(!inactiveEnabled ||
-                        !selectedSeriesId ||
-                        selectedSeriesId === d.point.series.id);
-                    setActiveState({
-                        element: list[index],
-                        state: inactiveOptions,
-                        active: isActive,
-                        datum: d,
-                    });
-                }
-                return d;
-            });
-        });
-        return () => {
-            dispatcher.on('hover-shape.scatter', null);
-        };
-    }, [dispatcher, preparedData, seriesOptions]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("g", { ref: ref, className: b() }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
-}

package/build/plugins/d3/renderer/hooks/useShapes/scatter/prepare-data.d.ts

@@ -1,11 +0,0 @@
-import type { ChartScale } from '../../useAxisScales';
-import type { PreparedAxis } from '../../useChartOptions/types';
-import { PreparedScatterSeries } from '../../useSeries/types';
-import { PreparedScatterData } from './types';
-export declare const prepareScatterData: (args: {
-    series: PreparedScatterSeries[];
-    xAxis: PreparedAxis;
-    xScale: ChartScale;
-    yAxis: PreparedAxis[];
-    yScale: ChartScale[];
-}) => PreparedScatterData[];