@gravity-ui/chartkit 5.17.1 → 5.18.1

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

@@ -1,145 +0,0 @@
-import React from 'react';
-import { pointer } from 'd3';
-import throttle from 'lodash/throttle';
-import { block } from '../../../../utils/cn';
-import { getD3Dispatcher } from '../d3-dispatcher';
-import { useAxisScales, useChartDimensions, useChartOptions, useSeries, useShapes } from '../hooks';
-import { getYAxisWidth } from '../hooks/useChartDimensions/utils';
-import { getPreparedXAxis } from '../hooks/useChartOptions/x-axis';
-import { getPreparedYAxis } from '../hooks/useChartOptions/y-axis';
-import { useSplit } from '../hooks/useSplit';
-import { getClosestPoints } from '../utils/get-closest-data';
-import { AxisX } from './AxisX';
-import { AxisY } from './AxisY';
-import { Legend } from './Legend';
-import { PlotTitle } from './PlotTitle';
-import { Title } from './Title';
-import { Tooltip } from './Tooltip';
-import './styles.css';
-const b = block('d3');
-const THROTTLE_DELAY = 50;
-export const Chart = (props) => {
-    var _a, _b;
-    const { width, height, data } = props;
-    const svgRef = React.useRef(null);
-    const htmlLayerRef = React.useRef(null);
-    const dispatcher = React.useMemo(() => {
-        return getD3Dispatcher();
-    }, []);
-    const { chart, title, tooltip } = useChartOptions({
-        data,
-    });
-    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,
-        height,
-    }), [data, height]);
-    const { legendItems, legendConfig, preparedSeries, preparedSeriesOptions, preparedLegend, handleLegendItemClick, } = useSeries({
-        chartWidth: width,
-        chartHeight: height,
-        chartMargin: chart.margin,
-        series: data.series,
-        legend: data.legend,
-        preparedYAxis: yAxis,
-    });
-    const { boundsWidth, boundsHeight } = useChartDimensions({
-        width,
-        height,
-        margin: chart.margin,
-        preparedLegend,
-        preparedXAxis: xAxis,
-        preparedYAxis: yAxis,
-        preparedSeries: preparedSeries,
-    });
-    const preparedSplit = useSplit({ split: data.split, boundsHeight, chartWidth: width });
-    const { xScale, yScale } = useAxisScales({
-        boundsWidth,
-        boundsHeight,
-        series: preparedSeries,
-        xAxis,
-        yAxis,
-        split: preparedSplit,
-    });
-    const { shapes, shapesData } = useShapes({
-        boundsWidth,
-        boundsHeight,
-        dispatcher,
-        series: preparedSeries,
-        seriesOptions: preparedSeriesOptions,
-        xAxis,
-        xScale,
-        yAxis,
-        yScale,
-        split: preparedSplit,
-        htmlLayout: htmlLayerRef.current,
-    });
-    const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
-    React.useEffect(() => {
-        if (clickHandler) {
-            dispatcher.on('click-chart', clickHandler);
-        }
-        return () => {
-            dispatcher.on('click-chart', null);
-        };
-    }, [dispatcher, clickHandler]);
-    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 (isOutsideBounds(x, y)) {
-            dispatcher.call('hover-shape', {}, undefined);
-            return;
-        }
-        const closest = getClosestPoints({
-            position: [x, y],
-            shapesData,
-        });
-        dispatcher.call('hover-shape', event.target, closest, [pointerX, pointerY]);
-    };
-    const throttledHandleMouseMove = throttle(handleMouseMove, THROTTLE_DELAY);
-    const handleMouseLeave = () => {
-        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, 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 });
-            })),
-            React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})` },
-                xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
-                    React.createElement(AxisY, { axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit }),
-                    React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
-                        React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit })))),
-                shapes),
-            preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick }))),
-        React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef, style: {
-                transform: `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
-            } }),
-        React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: tooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0] })));
-};

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import type { LegendConfig, LegendItem, OnLegendItemClick, PreparedLegend, PreparedSeries } from '../hooks';
-type Props = {
-    boundsWidth: number;
-    chartSeries: PreparedSeries[];
-    legend: PreparedLegend;
-    items: LegendItem[][];
-    config: LegendConfig;
-    onItemClick: OnLegendItemClick;
-};
-export declare const Legend: (props: Props) => React.JSX.Element;
-export {};

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

@@ -1,278 +0,0 @@
-import React from 'react';
-import { line as lineGenerator, scaleLinear, select, symbol } from 'd3';
-import { block } from '../../../../utils/cn';
-import { CONTINUOUS_LEGEND_SIZE } from '../constants';
-import { getLineDashArray } from '../hooks/useShapes/utils';
-import { createGradientRect, getContinuesColorFn, getLabelsSize, getSymbol } from '../utils';
-import { axisBottom } from '../utils/axis-generators';
-const b = block('d3-legend');
-const getLegendPosition = (args) => {
-    const { align, offsetWidth, width, contentWidth } = args;
-    const top = 0;
-    if (align === 'left') {
-        return { top, left: offsetWidth };
-    }
-    if (align === 'right') {
-        return { top, left: offsetWidth + width - contentWidth };
-    }
-    return { top, left: offsetWidth + width / 2 - contentWidth / 2 };
-};
-const appendPaginator = (args) => {
-    const { container, offset, maxPage, legend, transform, onArrowClick } = args;
-    const paginationLine = container.append('g').attr('class', b('pagination'));
-    let computedWidth = 0;
-    paginationLine
-        .append('text')
-        .text('▲')
-        .attr('class', function () {
-        return b('pagination-arrow', { inactive: offset === 0 });
-    })
-        .style('font-size', legend.itemStyle.fontSize)
-        .each(function () {
-        computedWidth += this.getComputedTextLength();
-    })
-        .on('click', function () {
-        if (offset - 1 >= 0) {
-            onArrowClick(offset - 1);
-        }
-    });
-    paginationLine
-        .append('text')
-        .text(`${offset + 1}/${maxPage}`)
-        .attr('class', b('pagination-counter'))
-        .attr('x', computedWidth)
-        .style('font-size', legend.itemStyle.fontSize)
-        .each(function () {
-        computedWidth += this.getComputedTextLength();
-    });
-    paginationLine
-        .append('text')
-        .text('▼')
-        .attr('class', function () {
-        return b('pagination-arrow', { inactive: offset === maxPage - 1 });
-    })
-        .attr('x', computedWidth)
-        .style('font-size', legend.itemStyle.fontSize)
-        .on('click', function () {
-        if (offset + 1 < maxPage) {
-            onArrowClick(offset + 1);
-        }
-    });
-    paginationLine.attr('transform', transform);
-};
-const legendSymbolGenerator = lineGenerator()
-    .x((d) => d.x)
-    .y((d) => d.y);
-function renderLegendSymbol(args) {
-    const { selection, legend } = args;
-    const line = selection.data();
-    const getXPosition = (i) => {
-        return line.slice(0, i).reduce((acc, legendItem) => {
-            return (acc +
-                legendItem.symbol.width +
-                legendItem.symbol.padding +
-                legendItem.textWidth +
-                legend.itemDistance);
-        }, 0);
-    };
-    selection.each(function (d, i) {
-        const element = select(this);
-        const x = getXPosition(i);
-        const className = b('item-symbol', { shape: d.symbol.shape, unselected: !d.visible });
-        const color = d.visible ? d.color : '';
-        switch (d.symbol.shape) {
-            case 'path': {
-                const y = legend.lineHeight / 2;
-                const points = [
-                    { x: x, y },
-                    { x: x + d.symbol.width, y },
-                ];
-                element
-                    .append('path')
-                    .attr('d', legendSymbolGenerator(points))
-                    .attr('fill', 'none')
-                    .attr('stroke-width', d.symbol.strokeWidth)
-                    .attr('class', className)
-                    .style('stroke', color);
-                if (d.dashStyle) {
-                    element.attr('stroke-dasharray', getLineDashArray(d.dashStyle, d.symbol.strokeWidth));
-                }
-                break;
-            }
-            case 'rect': {
-                const y = (legend.lineHeight - d.symbol.height) / 2;
-                element
-                    .append('rect')
-                    .attr('x', x)
-                    .attr('y', y)
-                    .attr('width', d.symbol.width)
-                    .attr('height', d.symbol.height)
-                    .attr('rx', d.symbol.radius)
-                    .attr('class', className)
-                    .style('fill', color);
-                break;
-            }
-            case 'symbol': {
-                const y = legend.lineHeight / 2;
-                element
-                    .append('svg:path')
-                    .attr('d', () => {
-                    const scatterSymbol = getSymbol(d.symbol.symbolType);
-                    // D3 takes size as square pixels, so we need to make square pixels size by multiplying
-                    // https://d3js.org/d3-shape/symbol#symbol
-                    return symbol(scatterSymbol, d.symbol.width * d.symbol.width)();
-                })
-                    .attr('transform', () => {
-                    return 'translate(' + x + ',' + y + ')';
-                })
-                    .attr('class', className)
-                    .style('fill', color);
-                break;
-            }
-        }
-    });
-}
-export const Legend = (props) => {
-    const { boundsWidth, chartSeries, legend, items, config, onItemClick } = props;
-    const ref = React.useRef(null);
-    const [paginationOffset, setPaginationOffset] = React.useState(0);
-    React.useEffect(() => {
-        setPaginationOffset(0);
-    }, [boundsWidth]);
-    React.useEffect(() => {
-        var _a, _b, _c, _d, _e;
-        if (!ref.current) {
-            return;
-        }
-        const svgElement = select(ref.current);
-        svgElement.selectAll('*').remove();
-        let legendWidth = 0;
-        if (legend.type === 'discrete') {
-            const limit = (_a = config.pagination) === null || _a === void 0 ? void 0 : _a.limit;
-            const pageItems = typeof limit === 'number'
-                ? items.slice(paginationOffset * limit, paginationOffset * limit + limit)
-                : items;
-            pageItems.forEach((line, lineIndex) => {
-                var _a;
-                const legendLine = svgElement.append('g').attr('class', b('line'));
-                const legendItemTemplate = legendLine
-                    .selectAll('legend-history')
-                    .data(line)
-                    .enter()
-                    .append('g')
-                    .attr('class', b('item'))
-                    .on('click', function (e, d) {
-                    onItemClick({ name: d.name, metaKey: e.metaKey });
-                });
-                const getXPosition = (i) => {
-                    return line.slice(0, i).reduce((acc, legendItem) => {
-                        return (acc +
-                            legendItem.symbol.width +
-                            legendItem.symbol.padding +
-                            legendItem.textWidth +
-                            legend.itemDistance);
-                    }, 0);
-                };
-                renderLegendSymbol({ selection: legendItemTemplate, legend });
-                legendItemTemplate
-                    .append('text')
-                    .attr('x', function (legendItem, i) {
-                    return (getXPosition(i) + legendItem.symbol.width + legendItem.symbol.padding);
-                })
-                    .attr('height', legend.lineHeight)
-                    .attr('class', function (d) {
-                    const mods = { selected: d.visible, unselected: !d.visible };
-                    return b('item-text', mods);
-                })
-                    .text(function (d) {
-                    return ('name' in d && d.name);
-                })
-                    .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,
-                    width: boundsWidth,
-                    offsetWidth: 0,
-                    contentWidth,
-                });
-                const top = legend.lineHeight * lineIndex;
-                legendLine.attr('transform', `translate(${[left, top].join(',')})`);
-            });
-            legendWidth = boundsWidth;
-            if (config.pagination) {
-                const transform = `translate(${[
-                    0,
-                    legend.lineHeight * config.pagination.limit + legend.lineHeight / 2,
-                ].join(',')})`;
-                appendPaginator({
-                    container: svgElement,
-                    offset: paginationOffset,
-                    maxPage: config.pagination.maxPage,
-                    legend,
-                    transform,
-                    onArrowClick: setPaginationOffset,
-                });
-            }
-        }
-        else {
-            // gradient rect
-            const domain = (_b = legend.colorScale.domain) !== null && _b !== void 0 ? _b : [];
-            const rectHeight = CONTINUOUS_LEGEND_SIZE.height;
-            svgElement.call(createGradientRect, {
-                y: legend.title.height + legend.title.margin,
-                height: rectHeight,
-                width: legend.width,
-                interpolator: getContinuesColorFn({
-                    values: [0, 1],
-                    colors: legend.colorScale.colors,
-                    stops: legend.colorScale.stops,
-                }),
-            });
-            // ticks
-            const xAxisGenerator = axisBottom({
-                scale: scaleLinear(domain, [0, legend.width]),
-                ticks: {
-                    items: [[0, -rectHeight]],
-                    labelsMargin: legend.ticks.labelsMargin,
-                    labelsLineHeight: legend.ticks.labelsLineHeight,
-                    maxTickCount: 4,
-                    tickColor: '#fff',
-                },
-                domain: {
-                    size: legend.width,
-                    color: 'transparent',
-                },
-            });
-            const tickTop = legend.title.height + legend.title.margin + rectHeight;
-            svgElement
-                .append('g')
-                .attr('transform', `translate(0, ${tickTop})`)
-                .call(xAxisGenerator);
-            legendWidth = legend.width;
-        }
-        if (legend.title.enable) {
-            const { maxWidth: labelWidth } = getLabelsSize({
-                labels: [legend.title.text],
-                style: legend.title.style,
-            });
-            svgElement
-                .append('g')
-                .attr('class', b('title'))
-                .append('text')
-                .attr('dx', legend.width / 2 - labelWidth / 2)
-                .attr('font-weight', (_c = legend.title.style.fontWeight) !== null && _c !== void 0 ? _c : null)
-                .attr('font-size', (_d = legend.title.style.fontSize) !== null && _d !== void 0 ? _d : null)
-                .attr('fill', (_e = legend.title.style.fontColor) !== null && _e !== void 0 ? _e : null)
-                .style('alignment-baseline', 'before-edge')
-                .text(legend.title.text);
-        }
-        const { left } = getLegendPosition({
-            align: legend.align,
-            width: boundsWidth,
-            offsetWidth: config.offset.left,
-            contentWidth: legendWidth,
-        });
-        svgElement.attr('transform', `translate(${[left, config.offset.top].join(',')})`);
-    }, [boundsWidth, chartSeries, onItemClick, legend, items, config, paginationOffset]);
-    return React.createElement("g", { className: b(), ref: ref, width: boundsWidth, height: legend.height });
-};

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

@@ -1,7 +0,0 @@
-import React from 'react';
-import type { PreparedPlotTitle } from '../hooks/useSplit/types';
-type Props = {
-    title?: PreparedPlotTitle;
-};
-export declare const PlotTitle: (props: Props) => React.JSX.Element | null;
-export {};

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import { block } from '../../../../utils/cn';
-const b = block('d3-plot-title');
-export const PlotTitle = (props) => {
-    const { title } = props;
-    if (!title) {
-        return null;
-    }
-    const { x, y, text, style, height } = title;
-    return (React.createElement("text", { className: b(), dx: x, dy: y, dominantBaseline: "middle", textAnchor: "middle", style: Object.assign({ lineHeight: `${height}px` }, style) },
-        React.createElement("tspan", null, text)));
-};

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

@@ -1,7 +0,0 @@
-import React from 'react';
-import type { PreparedTitle } from '../hooks';
-type Props = PreparedTitle & {
-    chartWidth: number;
-};
-export declare const Title: (props: Props) => React.JSX.Element;
-export {};

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

@@ -1,8 +0,0 @@
-import React from 'react';
-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: Object.assign({ lineHeight: `${height}px` }, style) },
-        React.createElement("tspan", null, text)));
-};

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

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { TooltipDataChunk } from '../../../../../types';
-import type { PreparedAxis } from '../../hooks';
-type Props = {
-    hovered: TooltipDataChunk[];
-    xAxis: PreparedAxis;
-    yAxis: PreparedAxis;
-};
-export declare const DefaultContent: ({ hovered, xAxis, yAxis }: Props) => React.JSX.Element;
-export {};

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

@@ -1,102 +0,0 @@
-import React from 'react';
-import { dateTime } from '@gravity-ui/date-utils';
-import get from 'lodash/get';
-import { block } from '../../../../../utils/cn';
-import { formatNumber } from '../../../../shared';
-import { getDataCategoryValue, getWaterfallPointSubtotal } from '../../utils';
-const b = block('d3-tooltip');
-const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
-const getRowData = (fieldName, axis, data) => {
-    switch (axis.type) {
-        case 'category': {
-            const categories = get(axis, 'categories', []);
-            return getDataCategoryValue({ axisDirection: fieldName, categories, data });
-        }
-        case 'datetime': {
-            const value = get(data, fieldName);
-            if (!value) {
-                return undefined;
-            }
-            return dateTime({ input: value }).format(DEFAULT_DATE_FORMAT);
-        }
-        case 'linear':
-        default: {
-            const value = get(data, fieldName);
-            return formatNumber(value);
-        }
-    }
-};
-const getXRowData = (xAxis, data) => getRowData('x', xAxis, data);
-const getYRowData = (yAxis, data) => getRowData('y', yAxis, data);
-const getMeasureValue = (data, xAxis, yAxis) => {
-    var _a, _b;
-    if (data.every((item) => ['pie', 'treemap', 'waterfall'].includes(item.series.type))) {
-        return null;
-    }
-    if (data.some((item) => item.series.type === 'bar-y')) {
-        return getYRowData(yAxis, (_a = data[0]) === null || _a === void 0 ? void 0 : _a.data);
-    }
-    return getXRowData(xAxis, (_b = data[0]) === null || _b === void 0 ? void 0 : _b.data);
-};
-export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
-    const measureValue = getMeasureValue(hovered, xAxis, yAxis);
-    return (React.createElement(React.Fragment, null,
-        measureValue && React.createElement("div", null, measureValue),
-        hovered.map(({ data, series, closest }, i) => {
-            const id = `${get(series, 'id')}_${i}`;
-            const color = get(series, 'color');
-            switch (series.type) {
-                case 'scatter':
-                case 'line':
-                case 'area':
-                case 'bar-x': {
-                    const value = (React.createElement(React.Fragment, null,
-                        series.name,
-                        ": ",
-                        getYRowData(yAxis, data)));
-                    return (React.createElement("div", { key: id, className: b('content-row') },
-                        React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
-                        React.createElement("div", null, closest ? React.createElement("b", null, value) : React.createElement("span", null, value))));
-                }
-                case 'waterfall': {
-                    const isTotal = get(data, 'total', false);
-                    const subTotal = getWaterfallPointSubtotal(data, series);
-                    return (React.createElement("div", { key: `${id}_${get(data, 'x')}` },
-                        !isTotal && (React.createElement(React.Fragment, null,
-                            React.createElement("div", { key: id, className: b('content-row') },
-                                React.createElement("b", null, getXRowData(xAxis, data))),
-                            React.createElement("div", { className: b('content-row') },
-                                React.createElement("span", null,
-                                    series.name,
-                                    "\u00A0"),
-                                React.createElement("span", null, getYRowData(yAxis, data))))),
-                        React.createElement("div", { key: id, className: b('content-row') },
-                            isTotal ? 'Total' : 'Subtotal',
-                            ": ",
-                            subTotal)));
-                }
-                case 'bar-y': {
-                    const value = (React.createElement(React.Fragment, null,
-                        series.name,
-                        ": ",
-                        getXRowData(xAxis, data)));
-                    return (React.createElement("div", { key: id, className: b('content-row') },
-                        React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
-                        React.createElement("div", null, closest ? React.createElement("b", null, value) : React.createElement("span", null, value))));
-                }
-                case 'pie':
-                case 'treemap': {
-                    const seriesData = data;
-                    return (React.createElement("div", { key: id, className: b('content-row') },
-                        React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
-                        React.createElement("span", null,
-                            seriesData.name || seriesData.id,
-                            "\u00A0"),
-                        React.createElement("span", null, seriesData.value)));
-                }
-                default: {
-                    return null;
-                }
-            }
-        })));
-};

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import type { Dispatch } from 'd3';
-import type { PreparedAxis, PreparedTooltip } from '../../hooks';
-type TooltipProps = {
-    dispatcher: Dispatch<object>;
-    tooltip: PreparedTooltip;
-    svgContainer: SVGSVGElement | null;
-    xAxis: PreparedAxis;
-    yAxis: PreparedAxis;
-};
-export declare const Tooltip: (props: TooltipProps) => React.JSX.Element | null;
-export {};

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

@@ -1,28 +0,0 @@
-import React from 'react';
-import { Popup, useVirtualElementRef } from '@gravity-ui/uikit';
-import isNil from 'lodash/isNil';
-import { block } from '../../../../../utils/cn';
-import { useTooltip } from '../../hooks';
-import { DefaultContent } from './DefaultContent';
-const b = block('d3-tooltip');
-export const Tooltip = (props) => {
-    const { tooltip, xAxis, yAxis, svgContainer, dispatcher } = props;
-    const { hovered, pointerPosition } = useTooltip({ dispatcher, tooltip });
-    const containerRect = (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) || { left: 0, top: 0 };
-    const left = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[0]) || 0) + containerRect.left;
-    const top = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[1]) || 0) + containerRect.top;
-    const anchorRef = useVirtualElementRef({ rect: { top, left } });
-    const content = React.useMemo(() => {
-        var _a;
-        if (!hovered) {
-            return null;
-        }
-        const customTooltip = (_a = tooltip.renderer) === null || _a === void 0 ? void 0 : _a.call(tooltip, { hovered });
-        return isNil(customTooltip) ? (React.createElement(DefaultContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis })) : (customTooltip);
-    }, [hovered, tooltip, xAxis, yAxis]);
-    React.useEffect(() => {
-        window.dispatchEvent(new CustomEvent('scroll'));
-    }, [left, top]);
-    return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { className: b(), open: true, anchorRef: anchorRef, offset: [0, 20], placement: ['right', 'left', 'top', 'bottom'], modifiers: [{ name: 'preventOverflow', options: { padding: 10, altAxis: true } }] },
-        React.createElement("div", { className: b('content') }, content))) : null;
-};

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

@@ -1 +0,0 @@
-export { Chart } from './Chart';

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

@@ -1 +0,0 @@
-export { Chart } from './Chart';