@gravity-ui/chartkit 3.1.2 → 3.2.0-beta.1

package/build/plugins/d3/__stories__/scatter/LinearCategories.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+export declare const LinearAndCategories: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+declare const meta: Meta;
+export default meta;

package/build/plugins/d3/__stories__/scatter/LinearCategories.stories.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import random from 'lodash/random';
+import { withKnobs, select, radios, text } from '@storybook/addon-knobs';
+import { Button } from '@gravity-ui/uikit';
+import { settings } from '../../../../libs';
+import { ChartKit } from '../../../../components/ChartKit';
+import { D3Plugin } from '../..';
+import penguins from '../penguins.json';
+const shapeScatterSeriesData = (args) => {
+    const { data, groupBy, map } = args;
+    return data.reduce((acc, d) => {
+        const seriesName = d[groupBy];
+        if (!seriesName) {
+            return acc;
+        }
+        if (!acc[seriesName]) {
+            acc[seriesName] = [];
+        }
+        acc[seriesName].push(Object.assign({ x: d[map.x], y: d[map.y], radius: random(3, 6) }, (map.category && { category: d[map.category] })));
+        return acc;
+    }, {});
+};
+const shapeScatterSeries = (data) => {
+    return Object.keys(data).reduce((acc, name) => {
+        acc.push({
+            type: 'scatter',
+            data: data[name],
+            name,
+        });
+        return acc;
+    }, []);
+};
+const shapeScatterChartData = (series, categoriesType, categories) => {
+    let xAxis = {
+        labels: {
+            enabled: false,
+        },
+        title: {
+            text: text('X axis title', ''),
+        },
+    };
+    let yAxis = {
+        title: {
+            text: text('Y axis title', ''),
+        },
+    };
+    if (categories && categoriesType === 'x') {
+        xAxis = Object.assign(Object.assign({}, xAxis), { type: 'category', categories });
+    }
+    if (categories && categoriesType === 'y') {
+        yAxis = Object.assign(Object.assign({}, yAxis), { type: 'category', categories });
+    }
+    return {
+        series: {
+            data: series,
+        },
+        xAxis,
+        yAxis: [yAxis],
+        title: {
+            text: text('title', 'Chart title'),
+        },
+    };
+};
+const Template = () => {
+    const [shown, setShown] = React.useState(false);
+    const chartkitRef = React.useRef();
+    const x = select('x', ['culmen_length_mm', 'culmen_depth_mm', 'flipper_length_mm', 'body_mass_g'], 'culmen_length_mm');
+    const y = select('y', ['culmen_length_mm', 'culmen_depth_mm', 'flipper_length_mm', 'body_mass_g'], 'culmen_depth_mm');
+    const groupBy = select('groupBy', ['species', 'island', 'sex'], 'species');
+    const categoriesType = radios('categoriesType', { none: 'none', x: 'x', y: 'y' }, 'none');
+    const category = categoriesType === 'none'
+        ? undefined
+        : select('category', ['species', 'island', 'sex'], 'island');
+    let categories;
+    if (categoriesType !== 'none' && category) {
+        categories = penguins.reduce((acc, p) => {
+            const cerrentCategory = p[category];
+            if (typeof cerrentCategory === 'string' && !acc.includes(cerrentCategory)) {
+                acc.push(cerrentCategory);
+            }
+            return acc;
+        }, []);
+    }
+    const shapedScatterSeriesData = shapeScatterSeriesData({
+        data: penguins,
+        groupBy,
+        map: { x, y, category },
+    });
+    const shapedScatterSeries = shapeScatterSeries(shapedScatterSeriesData);
+    const data = shapeScatterChartData(shapedScatterSeries, categoriesType, categories);
+    if (!shown) {
+        settings.set({ plugins: [D3Plugin] });
+        return React.createElement(Button, { onClick: () => setShown(true) }, "Show chart");
+    }
+    return (React.createElement("div", { style: { height: '80vh', width: '100%' } },
+        React.createElement(ChartKit, { ref: chartkitRef, type: "d3", data: data })));
+};
+export const LinearAndCategories = Template.bind({});
+const meta = {
+    title: 'Plugins/D3/Scatter',
+    decorators: [withKnobs],
+};
+export default meta;

package/build/plugins/d3/__stories__/scatter/Timestamp.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+export declare const Timestamp: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+declare const meta: Meta;
+export default meta;

package/build/plugins/d3/__stories__/scatter/Timestamp.stories.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import random from 'lodash/random';
+import { dateTime } from '@gravity-ui/date-utils';
+import { Button } from '@gravity-ui/uikit';
+import { settings } from '../../../../libs';
+import { ChartKit } from '../../../../components/ChartKit';
+import { D3Plugin } from '../..';
+const rowData = [
+    {
+        x: 1690686000000,
+        y: 86.71905594602345,
+        custom: 'green',
+    },
+    {
+        x: 1690426800000,
+        y: 86.73089353359981,
+        custom: 'yellow',
+    },
+    {
+        x: 1690254000000,
+        y: 86.53675705168267,
+        custom: 'red',
+    },
+    {
+        x: 1690772400000,
+        y: 86.47880981408552,
+        custom: 'blue',
+    },
+    {
+        x: 1690340400000,
+        y: 86.4108836764148,
+        custom: 'gray',
+    },
+    {
+        x: 1690599600000,
+        y: 86.73440096266042,
+        custom: 'pink',
+    },
+    {
+        x: 1690513200000,
+        y: 86.64935929597681,
+        custom: 'purple',
+    },
+];
+const shapeData = (data) => {
+    const scatterData = data.map((d) => ({
+        x: d.x,
+        y: d.y,
+        radius: random(3, 6),
+        custom: d.custom,
+    }));
+    const scatterSeries = {
+        type: 'scatter',
+        data: scatterData,
+        name: 'some-name',
+    };
+    return {
+        series: {
+            data: [scatterSeries],
+        },
+        xAxis: {
+            type: 'datetime',
+            timestamps: data.map((d) => d.x),
+        },
+        tooltip: {
+            renderer: ({ hovered }) => {
+                const d = hovered.data;
+                return React.createElement("div", { style: { color: d.custom } }, dateTime({ input: d.x }).format('LL'));
+            },
+        },
+        title: {
+            text: 'Chart title',
+        },
+    };
+};
+const Template = () => {
+    const [shown, setShown] = React.useState(false);
+    const chartkitRef = React.useRef();
+    const data = shapeData(rowData);
+    if (!shown) {
+        settings.set({ plugins: [D3Plugin] });
+        return React.createElement(Button, { onClick: () => setShown(true) }, "Show chart");
+    }
+    return (React.createElement("div", { style: { height: '300px', width: '100%' } },
+        React.createElement(ChartKit, { ref: chartkitRef, type: "d3", data: data })));
+};
+export const Timestamp = Template.bind({});
+const meta = {
+    title: 'Plugins/D3/Scatter',
+};
+export default meta;

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

@@ -0,0 +1,7 @@
+import { ChartKitPlugin } from '../../types';
+/**
+ * It is an experemental plugin
+ *
+ * DO NOT USE IT IN YOUR PRODUCTION
+ * */
+export declare const D3Plugin: ChartKitPlugin;

package/build/plugins/d3/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * It is an experemental plugin
+ *
+ * DO NOT USE IT IN YOUR PRODUCTION
+ * */
+export const D3Plugin = {
+    type: 'd3',
+    renderer: React.lazy(() => import('./renderer/D3Widget')),
+};

package/build/plugins/d3/renderer/D3Widget.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ChartKitWidgetRef } from '../../../types';
+declare const D3Widget: React.ForwardRefExoticComponent<{
+    type: "d3";
+    data: import("../../../types/widget-data").ChartKitWidgetData<any>;
+    id?: string | undefined;
+    isMobile?: boolean | undefined;
+    onLoad?: ((data?: import("../../../types").ChartKitOnLoadData<"d3"> | undefined) => void) | undefined;
+    onRender?: ((data: import("../../../types").ChartKitOnRenderData) => void) | undefined;
+    onChartLoad?: ((data: import("../../../types").ChartKitOnChartLoad<"d3">) => void) | undefined;
+    onError?: import("../../../types").ChartKitOnError | undefined;
+    renderError?: import("../../../types").RenderError | undefined;
+    renderPluginLoader?: (() => React.ReactNode) | undefined;
+} & {} & React.RefAttributes<ChartKitWidgetRef | undefined>>;
+export default D3Widget;

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { select } from 'd3';
+import debounce from 'lodash/debounce';
+import { Chart } from './components';
+const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
+    const ref = React.useRef(null);
+    const debounced = React.useRef();
+    const [dimensions, setDimensions] = React.useState();
+    const handleResize = React.useCallback(() => {
+        if (ref.current) {
+            const { width, height } = ref.current.getBoundingClientRect();
+            setDimensions({ width, height });
+        }
+    }, []);
+    const debuncedHandleResize = React.useMemo(() => {
+        var _a;
+        (_a = debounced.current) === null || _a === void 0 ? void 0 : _a.cancel();
+        debounced.current = debounce(handleResize, 200);
+        return debounced.current;
+    }, [handleResize]);
+    React.useImperativeHandle(forwardedRef, () => ({
+        reflow() {
+            handleResize();
+        },
+    }), [handleResize]);
+    React.useEffect(() => {
+        const selection = select(window);
+        selection.on('resize', debuncedHandleResize);
+        return () => {
+            // https://d3js.org/d3-selection/events#selection_on
+            selection.on('resize', null);
+        };
+    }, [debuncedHandleResize]);
+    React.useEffect(() => {
+        // dimensions initialize
+        handleResize();
+    }, [handleResize]);
+    return (React.createElement("div", { ref: ref, style: { width: '100%', height: '100%' } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (React.createElement(Chart, { width: dimensions.width, height: dimensions.height, data: props.data }))));
+});
+export default D3Widget;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ChartOptions, ChartScale } from '../hooks';
+type Props = {
+    axis: ChartOptions['xAxis'];
+    width: number;
+    height: number;
+    scale: ChartScale;
+};
+export declare const AxisX: ({ axis, width, height, scale }: Props) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import { axisBottom, select } from 'd3';
+import { formatAxisTickLabel, parseTransformStyle } from '../utils';
+const b = block('chartkit-d3-axis');
+const EMPTY_SPACE_BETWEEN_LABELS = 10;
+// Note: this method do not prepared for rotated labels
+const removeOverlappingXTicks = (axis) => {
+    var _a;
+    const a = axis.selectAll('g.tick').nodes();
+    if (a.length <= 1) {
+        return;
+    }
+    for (let i = 0, x = 0; i < a.length; i++) {
+        const node = a[i];
+        const r = node.getBoundingClientRect();
+        if (r.left < x) {
+            (_a = node === null || node === void 0 ? void 0 : node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node);
+        }
+        else {
+            x = r.right + EMPTY_SPACE_BETWEEN_LABELS;
+        }
+    }
+};
+// FIXME: add overflow ellipsis for the labels that out of boundaries
+export const AxisX = ({ axis, width, height, scale }) => {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        const xAxisGenerator = axisBottom(scale)
+            .tickSize(height * -1)
+            .tickPadding(axis.labels.padding)
+            .tickFormat((value) => {
+            return formatAxisTickLabel({
+                axisType: axis.type,
+                value,
+                dateFormat: axis.labels.dateFormat,
+                numberFormat: axis.labels.numberFormat,
+            });
+        });
+        svgElement.call(xAxisGenerator).attr('class', b());
+        svgElement.select('.domain').attr('d', `M0,0V0H${width}`);
+        svgElement.selectAll('.tick text').style('font-size', axis.labels.style.fontSize);
+        const transformStyle = svgElement.select('.tick').attr('transform');
+        const { x } = parseTransformStyle(transformStyle);
+        if (x === 0) {
+            // Remove tick that has the same x coordinate like domain
+            svgElement.select('.tick').remove();
+        }
+        if (axis.title.text) {
+            const textY = axis.title.height + parseInt(axis.labels.style.fontSize) + axis.labels.padding;
+            svgElement
+                .append('text')
+                .attr('class', b('title'))
+                .attr('text-anchor', 'middle')
+                .attr('x', width / 2)
+                .attr('y', textY)
+                .attr('font-size', axis.title.style.fontSize)
+                .text(axis.title.text);
+        }
+        removeOverlappingXTicks(svgElement);
+    }, [axis, width, height, scale]);
+    return React.createElement("g", { ref: ref });
+};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ChartOptions, ChartScale } from '../hooks';
+type Props = {
+    axises: ChartOptions['yAxis'];
+    width: number;
+    height: number;
+    scale: ChartScale;
+};
+export declare const AxisY: ({ axises, width, height, scale }: Props) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import { axisLeft, select } from 'd3';
+import { formatAxisTickLabel, parseTransformStyle } from '../utils';
+const b = block('chartkit-d3-axis');
+const EMPTY_SPACE_BETWEEN_LABELS = 10;
+// Note: this method do not prepared for rotated labels
+const removeOverlappingYTicks = (axis) => {
+    var _a;
+    const a = axis.selectAll('g.tick').nodes();
+    if (a.length <= 1) {
+        return;
+    }
+    for (let i = 0, x = 0; i < a.length; i++) {
+        const node = a[i];
+        const r = node.getBoundingClientRect();
+        if (r.bottom > x && i !== 0) {
+            (_a = node === null || node === void 0 ? void 0 : node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node);
+        }
+        else {
+            x = r.top - EMPTY_SPACE_BETWEEN_LABELS;
+        }
+    }
+};
+// FIXME: add overflow ellipsis for the labels that out of boundaries
+export const AxisY = ({ axises, width, height, scale }) => {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const axis = axises[0];
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        const yAxisGenerator = axisLeft(scale)
+            .tickSize(width * -1)
+            .tickPadding(axis.labels.padding)
+            .tickFormat((value) => {
+            return formatAxisTickLabel({
+                axisType: axis.type,
+                value,
+                dateFormat: axis.labels.dateFormat,
+                numberFormat: axis.labels.numberFormat,
+            });
+        });
+        svgElement.call(yAxisGenerator).attr('class', b());
+        svgElement.select('.domain').attr('d', `M0,${height}H0V0`);
+        svgElement
+            .selectAll('.tick text')
+            .style('font-size', axis.labels.style.fontSize)
+            .style('transform', 'translateY(-1px)');
+        const transformStyle = svgElement.select('.tick').attr('transform');
+        const { y } = parseTransformStyle(transformStyle);
+        if (y === height) {
+            // Remove stroke from tick that has the same y coordinate like domain
+            svgElement.select('.tick line').style('stroke', 'none');
+        }
+        if (axis.title.text) {
+            const textY = axis.title.height + axis.labels.padding;
+            svgElement
+                .append('text')
+                .attr('class', b('title'))
+                .attr('text-anchor', 'middle')
+                .attr('dy', -textY)
+                .attr('dx', -height / 2)
+                .attr('font-size', axis.title.style.fontSize)
+                .attr('transform', 'rotate(-90)')
+                .text(axis.title.text);
+        }
+        removeOverlappingYTicks(svgElement);
+    }, [axises, width, height, scale]);
+    return React.createElement("g", { ref: ref });
+};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ChartKitWidgetData } from '../../../../types/widget-data';
+import './styles.css';
+type Props = {
+    width: number;
+    height: number;
+    data: ChartKitWidgetData;
+};
+export declare const Chart: ({ width, height, data }: Props) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import { AxisY } from './AxisY';
+import { AxisX } from './AxisX';
+import { Legend } from './Legend';
+import { Title } from './Title';
+import { Tooltip } from './Tooltip';
+import { useChartDimensions, useChartEvents, useChartOptions, useLegend, useScales, useSeries, useShapes, useTooltip, } from '../hooks';
+import { isAxisRelatedSeries } from '../utils';
+import './styles.css';
+const b = block('chartkit-d3');
+export const Chart = ({ width, height, data }) => {
+    // FIXME: add data validation
+    const { series } = data;
+    const svgRef = React.createRef();
+    const hasAxisRelatedSeries = series.data.some(isAxisRelatedSeries);
+    const { chartHovered, handleMouseEnter, handleMouseLeave } = useChartEvents();
+    const { chart, legend, title, tooltip, xAxis, yAxis } = useChartOptions(data);
+    const { boundsWidth, boundsHeight, legendHeight } = useChartDimensions({
+        width,
+        height,
+        margin: chart.margin,
+        legend,
+        title,
+        xAxis,
+        yAxis,
+    });
+    const { activeLegendItems, handleLegendItemClick } = useLegend({ series: series.data });
+    const { chartSeries } = useSeries({ activeLegendItems, series: series.data });
+    const { xScale, yScale } = useScales({
+        boundsWidth,
+        boundsHeight,
+        series: chartSeries,
+        xAxis,
+        yAxis,
+    });
+    const { hovered, pointerPosition, handleSeriesMouseMove, handleSeriesMouseLeave } = useTooltip({
+        tooltip,
+    });
+    const { shapes } = useShapes({
+        series: chartSeries,
+        xAxis,
+        xScale,
+        yAxis,
+        yScale,
+        svgContainer: svgRef.current,
+        onSeriesMouseMove: handleSeriesMouseMove,
+        onSeriesMouseLeave: handleSeriesMouseLeave,
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("svg", { ref: svgRef, className: b({ hovered: chartHovered }), width: width, height: height, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+            title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
+            React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[
+                    chart.margin.left,
+                    chart.margin.top + ((title === null || title === void 0 ? void 0 : title.height) || 0),
+                ].join(',')})` },
+                hasAxisRelatedSeries && (React.createElement(React.Fragment, null,
+                    React.createElement(AxisY, { axises: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale }),
+                    React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
+                        React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale })))),
+                shapes),
+            legend.enabled && (React.createElement(Legend, { width: boundsWidth, offsetWidth: chart.margin.left, height: legendHeight, offsetHeight: height - legendHeight / 2, chartSeries: chartSeries, onItemClick: handleLegendItemClick }))),
+        React.createElement(Tooltip, { hovered: hovered, pointerPosition: pointerPosition, tooltip: tooltip, xAxis: xAxis, yAxis: yAxis[0] })));
+};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ChartSeries, OnLegendItemClick } from '../hooks';
+type Props = {
+    width: number;
+    height: number;
+    offsetWidth: number;
+    offsetHeight: number;
+    chartSeries: ChartSeries[];
+    onItemClick: OnLegendItemClick;
+};
+export declare const Legend: (props: Props) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import { select } from 'd3';
+const b = block('chartkit-d3-legend');
+export const Legend = (props) => {
+    const { width, offsetWidth, height, offsetHeight, chartSeries, onItemClick } = props;
+    return (React.createElement("g", { width: width, height: height, ref: (node) => {
+            if (!node) {
+                return;
+            }
+            const size = 10;
+            const textWidths = [0];
+            const svgElement = select(node);
+            svgElement.selectAll('*').remove();
+            const legendItemTemplate = svgElement
+                .selectAll('legend-history')
+                .data(chartSeries)
+                .enter()
+                .append('g')
+                .attr('class', b('item'))
+                .on('click', function (e, d) {
+                onItemClick({ name: d.name, metaKey: e.metaKey });
+            });
+            svgElement
+                .selectAll('*')
+                .data(chartSeries)
+                .append('text')
+                .text(function (d) {
+                return d.name;
+            })
+                .each(function () {
+                textWidths.push(this.getComputedTextLength());
+            })
+                .remove();
+            legendItemTemplate
+                .append('rect')
+                .attr('x', function (_d, i) {
+                return (offsetWidth +
+                    i * size +
+                    textWidths.slice(0, i + 1).reduce((acc, tw) => acc + tw, 0));
+            })
+                .attr('y', offsetHeight - size / 2)
+                .attr('width', size)
+                .attr('height', size)
+                .style('fill', function (d) {
+                return d.color;
+            });
+            legendItemTemplate
+                .append('text')
+                .attr('x', function (_d, i) {
+                return (offsetWidth +
+                    i * size +
+                    size +
+                    textWidths.slice(0, i + 1).reduce((acc, tw) => acc + tw, 0));
+            })
+                .attr('y', offsetHeight)
+                .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('alignment-baseline', 'middle');
+        } }));
+};

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

@@ -0,0 +1,7 @@
+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

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

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

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

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

@@ -0,0 +1,21 @@
+import React from 'react';
+export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
+    const { data, series } = hovered;
+    switch (series.type) {
+        case 'scatter': {
+            const scatterData = data;
+            const xRow = xAxis.type === 'category' ? scatterData.category : scatterData.x;
+            const yRow = yAxis.type === 'category' ? scatterData.category : scatterData.y;
+            return (React.createElement("div", null,
+                React.createElement("div", null,
+                    React.createElement("span", null, "X:\u00A0"),
+                    React.createElement("b", null, xRow)),
+                React.createElement("div", null,
+                    React.createElement("span", null, "Y:\u00A0"),
+                    React.createElement("b", null, yRow))));
+        }
+        default: {
+            return null;
+        }
+    }
+};