@wavemaker/react-native-echarts 1.0.0-dev.0

package/radial/radial-chart.js

@@ -0,0 +1,235 @@
+import { withResponsiveContainer } from '../chart-container';
+import { useChartTheme, withChartTheme } from '../chart-theme.context';
+import { SkiaChart, SkiaRenderer } from '@wuba/react-native-echarts';
+import { PieChart as EChartsPieChart } from 'echarts/charts';
+import { LegendComponent, TitleComponent, TooltipComponent } from 'echarts/components';
+import * as echarts from 'echarts/core';
+import React, { useEffect, useMemo, useRef } from 'react';
+echarts.use([TooltipComponent, TitleComponent, LegendComponent, SkiaRenderer, EChartsPieChart]);
+/** Percent of height reserved for horizontal legend (top/bottom) to avoid overlap */
+const LEGEND_RESERVE_PCT = 22;
+/** Percent of width reserved for vertical legend (left/right) to avoid overlap */
+const LEGEND_RESERVE_WIDTH_PCT = 26;
+/** Default blue gradient (outer dark → inner light) for concentric rings */
+const DEFAULT_RING_COLORS = [
+    '#1e3a8a',
+    '#1e40af',
+    '#2563eb',
+    '#3b82f6',
+    '#60a5fa',
+    '#93c5fd',
+    '#bfdbfe',
+];
+const ChartComponent = ({ data, width = 220, height = 350, innerRadius = '20%', backgroundColor = '#e8e8e899', centerText, centerSubtext, showLegend = true, legendPosition = 'bottom', startAngle = 0, clockwise = false, ringGap = '4%', onSelect, ...props }) => {
+    const { theme } = useChartTheme(props.theme, props.colors);
+    const chartRef = useRef(null);
+    const onSelectRef = useRef(onSelect);
+    onSelectRef.current = onSelect;
+    const selectContextRef = useRef([]);
+    const normalizedData = useMemo(() => {
+        if (!Array.isArray(data) || data.length === 0)
+            return [];
+        return data.map((d) => ({
+            label: d.label,
+            value: Math.min(100, Math.max(0, Number(d.value))),
+        }));
+    }, [data]);
+    selectContextRef.current = normalizedData;
+    const option = useMemo(() => {
+        if (normalizedData.length === 0)
+            return { series: [] };
+        const seriesColors = props.colors && props.colors.length > 0
+            ? props.colors
+            : theme.series.map((s) => s.color);
+        const ringColors = seriesColors.length >= normalizedData.length
+            ? seriesColors
+            : DEFAULT_RING_COLORS.slice(0, normalizedData.length);
+        const innerPct = typeof innerRadius === 'number'
+            ? innerRadius
+            : typeof innerRadius === 'string' && innerRadius.endsWith('%')
+                ? parseFloat(innerRadius)
+                : 20;
+        const gapPct = typeof ringGap === 'number'
+            ? ringGap
+            : typeof ringGap === 'string' && ringGap.endsWith('%')
+                ? parseFloat(ringGap)
+                : 0;
+        const n = normalizedData.length;
+        const totalGap = (n - 1) * gapPct;
+        const available = 100 - innerPct - totalGap;
+        const ringStep = n > 0 ? available / n : 0;
+        const legendTopBottom = showLegend && (legendPosition === 'top' || legendPosition === 'bottom');
+        const legendLeftRight = showLegend && (legendPosition === 'left' || legendPosition === 'right');
+        const radiusScaleY = legendTopBottom
+            ? (100 - LEGEND_RESERVE_PCT) / 100
+            : 1;
+        const radiusScaleX = legendLeftRight
+            ? (100 - LEGEND_RESERVE_WIDTH_PCT) / 100
+            : 1;
+        const radiusScale = Math.min(radiusScaleY, radiusScaleX);
+        const centerY = legendTopBottom
+            ? legendPosition === 'bottom'
+                ? (100 - LEGEND_RESERVE_PCT) / 2
+                : 100 - (100 - LEGEND_RESERVE_PCT) / 2
+            : 50;
+        const centerX = legendLeftRight
+            ? legendPosition === 'left'
+                ? 100 - (100 - LEGEND_RESERVE_WIDTH_PCT) / 2
+                : (100 - LEGEND_RESERVE_WIDTH_PCT) / 2
+            : 50;
+        const seriesConfigs = normalizedData.map((item, index) => {
+            const fillPct = item.value;
+            const restPct = 100 - fillPct;
+            const ringInner = innerPct + index * (ringStep + gapPct);
+            const ringOuter = ringInner + ringStep;
+            const color = ringColors[index % ringColors.length];
+            const name = item.label ?? `Ring ${index + 1}`;
+            const scaledInner = ringInner * radiusScale;
+            const scaledOuter = ringOuter * radiusScale;
+            return {
+                type: 'pie',
+                radius: [`${scaledInner}%`, `${scaledOuter}%`],
+                center: [`${centerX}%`, `${centerY}%`],
+                startAngle,
+                clockwise,
+                data: [
+                    {
+                        name: `${name} (${fillPct}%)`,
+                        value: fillPct,
+                        itemStyle: { color },
+                    },
+                    {
+                        name: '',
+                        value: restPct,
+                        itemStyle: { color: backgroundColor },
+                        label: { show: false },
+                        labelLine: { show: false },
+                    },
+                ],
+                label: { show: false },
+                labelLine: { show: false },
+                emphasis: {
+                    scale: false,
+                    itemStyle: {
+                        shadowBlur: 8,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.2)',
+                    },
+                },
+            };
+        });
+        const legendData = normalizedData.map((item, index) => `${item.label ?? `Ring ${index + 1}`} (${item.value}%)`);
+        const config = {
+            tooltip: {
+                trigger: 'item',
+                formatter: (params) => params.name ? params.name : '',
+            },
+            series: seriesConfigs,
+        };
+        if (showLegend) {
+            const isVertical = legendPosition === 'left' || legendPosition === 'right';
+            config.legend = {
+                show: true,
+                data: legendData,
+                orient: isVertical ? 'vertical' : 'horizontal',
+                ...(legendPosition === 'top' && { top: 8 }),
+                ...(legendPosition === 'bottom' && { bottom: 8 }),
+                ...(legendPosition === 'left' && { left: 8 }),
+                ...(legendPosition === 'right' && { right: 8 }),
+                textStyle: {
+                    color: theme.legend?.textColor ?? '#333333',
+                    fontSize: theme.legend?.fontSize ?? 11,
+                },
+            };
+        }
+        if (centerText != null && centerText !== '' || centerSubtext != null && centerSubtext !== '') {
+            const textColor = theme.legend?.textColor ?? '#333333';
+            config.title = {
+                text: centerText ?? '',
+                subtext: centerSubtext ?? '',
+                left: 'center',
+                top: 'middle',
+                textStyle: {
+                    fontSize: 16,
+                    color: textColor,
+                    fontWeight: 'bold',
+                },
+                subtextStyle: {
+                    fontSize: 12,
+                    color: textColor,
+                },
+                itemGap: 4,
+                z: 100,
+            };
+        }
+        return config;
+    }, [
+        normalizedData,
+        theme,
+        innerRadius,
+        backgroundColor,
+        centerText,
+        centerSubtext,
+        showLegend,
+        legendPosition,
+        startAngle,
+        clockwise,
+        ringGap,
+        props.colors,
+    ]);
+    useEffect(() => {
+        let chart;
+        if (chartRef.current) {
+            try {
+                chart = echarts.init(chartRef.current, 'light', {
+                    width,
+                    height,
+                });
+                chart.setOption(option);
+                const handlePieClick = (params) => {
+                    const cb = onSelectRef.current;
+                    if (typeof cb !== 'function')
+                        return;
+                    if (params.componentType !== 'series')
+                        return;
+                    if (params.seriesType !== 'pie')
+                        return;
+                    if (params.dataIndex !== 0)
+                        return;
+                    const ringIndex = params.seriesIndex;
+                    if (typeof ringIndex !== 'number' || ringIndex < 0)
+                        return;
+                    const row = selectContextRef.current[ringIndex];
+                    if (!row)
+                        return;
+                    const event = {
+                        seriesIndex: ringIndex,
+                        dataIndex: 0,
+                        label: row.label ?? `Ring ${ringIndex + 1}`,
+                        value: row.value,
+                    };
+                    cb(event);
+                };
+                chart.on('click', handlePieClick);
+            }
+            catch (error) {
+                console.warn('Radial chart initialization error:', error);
+            }
+        }
+        return () => {
+            if (chart) {
+                try {
+                    chart.dispose();
+                }
+                catch (error) {
+                    console.warn('Radial chart disposal error:', error);
+                }
+            }
+        };
+    }, [option, width, height]);
+    return <SkiaChart ref={chartRef} useRNGH/>;
+};
+const RadialChartComponent = withResponsiveContainer(withChartTheme(ChartComponent));
+export const RadialChart = Object.assign(RadialChartComponent, {
+    displayName: 'RadialChart',
+});

package/radial/radial-chart.props.d.ts

@@ -0,0 +1,74 @@
+import type { CommonChartProps } from '../props/common';
+/** Emitted when the user taps/clicks a ring’s filled segment. */
+export interface RadialChartSelectEvent {
+    seriesIndex: number;
+    dataIndex: number;
+    label: string;
+    value: number;
+}
+/**
+ * Single data item for radial chart: one concentric ring.
+ * value = fill percentage (0–100) for that ring; label optional (tooltip).
+ */
+export interface RadialDataItem {
+    label?: string;
+    value: number;
+}
+/**
+ * Props for RadialChart (concentric ring chart).
+ * common -> radial
+ */
+export interface RadialChartProps extends CommonChartProps {
+    /**
+     * Chart data: one item per concentric ring. value = fill percentage (0–100).
+     */
+    data: RadialDataItem[];
+    /**
+     * Inner radius of the chart (center hole), e.g. '20%' or 40.
+     * @default '20%'
+     */
+    innerRadius?: string | number;
+    /**
+     * Color for the unfilled portion of each ring.
+     * @default '#e8e8e899'
+     */
+    backgroundColor?: string;
+    /**
+     * Optional center text (e.g. main value or title).
+     */
+    centerText?: string;
+    /**
+     * Optional center subtext shown below center text (e.g. label or unit).
+     */
+    centerSubtext?: string;
+    /**
+     * Start angle of the fill (and animation), in degrees. 0 = right (3 o'clock), 90 = top (12 o'clock).
+     * @default 0
+     */
+    startAngle?: number;
+    /**
+     * Direction of the fill and animation. true = clockwise, false = counter-clockwise (anti-clockwise).
+     * @default false
+     */
+    clockwise?: boolean;
+    /**
+     * Gap between concentric rings, as percentage of chart radius (e.g. '4%') or number.
+     * @default '4%'
+     */
+    ringGap?: string | number;
+    /**
+     * Whether to show the legend (ring labels).
+     * @default true
+     */
+    showLegend?: boolean;
+    /**
+     * Position of the legend.
+     * @default 'bottom'
+     */
+    legendPosition?: 'left' | 'right' | 'top' | 'bottom';
+    /**
+     * Called when the user selects (taps/clicks) a ring’s value segment.
+     */
+    onSelect?: (event: RadialChartSelectEvent) => void;
+}
+//# sourceMappingURL=radial-chart.props.d.ts.map

package/radial/radial-chart.props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radial-chart.props.d.ts","sourceRoot":"","sources":["../../../../components/chart/radial/radial-chart.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAExD,iEAAiE;AACjE,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD;;OAEG;IACH,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACrD;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAC;CACpD"}

package/scatter/index.d.ts

@@ -0,0 +1,3 @@
+export { ScatterChart } from './scatter-chart';
+export type { ScatterChartProps, ScatterSeriesData } from './scatter-chart.props';
+//# sourceMappingURL=index.d.ts.map

package/scatter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/chart/scatter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC"}

package/scatter/index.js

@@ -0,0 +1 @@
+export { ScatterChart } from './scatter-chart';

package/scatter/scatter-chart.d.ts

@@ -0,0 +1,13 @@
+import type { ScatterChartProps } from './scatter-chart.props';
+import React from 'react';
+/** common -> cartesian -> scatter */
+export type { ScatterChartProps, ScatterSeriesData } from './scatter-chart.props';
+export declare const ScatterChart: ((props: ScatterChartProps & {
+    theme?: Partial<import("..").ChartTheme>;
+} & {
+    width?: number | string;
+    height?: number | string;
+}) => React.JSX.Element) & {
+    displayName: string;
+};
+//# sourceMappingURL=scatter-chart.d.ts.map

package/scatter/scatter-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scatter-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/scatter/scatter-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAS/D,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,qCAAqC;AACrC,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAyVlF,eAAO,MAAM,YAAY;;;;;;;CAEvB,CAAC"}

package/scatter/scatter-chart.js

@@ -0,0 +1,310 @@
+import { withResponsiveContainer } from '../chart-container';
+import { useChartTheme, withChartTheme } from '../chart-theme.context';
+import { SkiaChart, SkiaRenderer } from '@wuba/react-native-echarts';
+import { LineChart as EChartsLineChart, ScatterChart as EChartsScatterChart } from 'echarts/charts';
+import { GridComponent, LegendComponent, TooltipComponent, } from 'echarts/components';
+import * as echarts from 'echarts/core';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { getAxis } from '../axis';
+echarts.use([
+    TooltipComponent,
+    GridComponent,
+    LegendComponent,
+    SkiaRenderer,
+    EChartsScatterChart,
+    EChartsLineChart,
+]);
+/** Linear regression: returns [slope, intercept] for y = slope * x + intercept. */
+function linearRegression(points) {
+    const n = points.length;
+    if (n === 0)
+        return { slope: 0, intercept: 0 };
+    let sumX = 0, sumY = 0, sumXY = 0, sumX2 = 0;
+    for (const [x, y] of points) {
+        sumX += x;
+        sumY += y;
+        sumXY += x * y;
+        sumX2 += x * x;
+    }
+    const denom = n * sumX2 - sumX * sumX;
+    const slope = denom === 0 ? 0 : (n * sumXY - sumX * sumY) / denom;
+    const intercept = (sumY - slope * sumX) / n;
+    return { slope, intercept };
+}
+const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', symbolSize = 8, showXAxis = true, showXAxisTicks = true, showYAxis = true, showYAxisTicks = true, showXAxisSplitLines = true, showYAxisSplitLines = true, boundaryGap = false, grid, showLegend = false, showHighlighter = true, showRegressionLine = false, xAxisTickLabelFormatter, yAxisTickLabelFormatter, xAxisTicks, xAxisLabel, yAxisLabel, onSelect, ...props }) => {
+    const { theme } = useChartTheme(props.theme, props.colors);
+    const chartRef = useRef(null);
+    const onSelectRef = useRef(onSelect);
+    onSelectRef.current = onSelect;
+    const selectContextRef = useRef({ normalizedSeries: [] });
+    const normalizedSeries = useMemo(() => {
+        if (!Array.isArray(data) || data.length === 0)
+            return [];
+        const first = data[0];
+        if (Array.isArray(first) && first.length >= 2 && typeof first[0] === 'number') {
+            return [{ data: data }];
+        }
+        if (typeof first === 'object' && first !== null && 'data' in first) {
+            return data;
+        }
+        return [];
+    }, [data]);
+    const hasNamedSeries = useMemo(() => normalizedSeries.some((s) => 'name' in s && s.name), [normalizedSeries]);
+    selectContextRef.current = { normalizedSeries };
+    const option = useMemo(() => {
+        const dataPoints = normalizedSeries.map(s => s.data.map(item => item[0])).flat();
+        const xAxisData = xAxisTicks != null && xAxisTicks.length > 0
+            ? xAxisTicks
+            : getAxis(dataPoints).map(String);
+        const tooltipConfig = showHighlighter
+            ? {
+                trigger: 'item',
+                axisPointer: {
+                    type: 'cross',
+                    lineStyle: {
+                        type: 'line',
+                        width: 1,
+                        color: theme.series[0]?.color ?? '#999',
+                    },
+                },
+            }
+            : { trigger: 'item' };
+        // Scatter uses value axes for both x and y (data is [x, y] pairs)
+        const xAxisConfig = {
+            type: 'category',
+            boundaryGap,
+            data: xAxisData,
+            ...(xAxisLabel != null && xAxisLabel !== '' && {
+                name: xAxisLabel,
+                nameLocation: 'middle',
+                nameGap: 25,
+                nameTextStyle: { color: theme.axis.x.tickLabelColor },
+            }),
+            axisLabel: {
+                show: showXAxis || xAxisTickLabelFormatter != null,
+                color: theme.axis.x.tickLabelColor,
+                ...(xAxisTickLabelFormatter && { formatter: xAxisTickLabelFormatter }),
+            },
+            axisLine: showXAxis
+                ? {
+                    show: true,
+                    lineStyle: {
+                        color: theme.axis.x.lineColor,
+                        width: theme.axis.x.lineWidth,
+                    },
+                }
+                : { show: false },
+            axisTick: {
+                show: showXAxisTicks,
+                lineStyle: {
+                    color: theme.axis.x.tickColor,
+                    width: theme.axis.x.tickWidth,
+                },
+            },
+            splitLine: {
+                show: showXAxisSplitLines,
+                lineStyle: {
+                    color: theme.axis.x.splitLineColor,
+                    width: theme.axis.x.splitLineWidth,
+                },
+            },
+        };
+        const yAxisConfig = {
+            type: 'value',
+            ...(yAxisLabel != null && yAxisLabel !== '' && {
+                name: yAxisLabel,
+                nameLocation: 'middle',
+                nameGap: 40,
+                nameTextStyle: { color: theme.axis.y.tickLabelColor },
+            }),
+            axisLabel: {
+                show: showYAxis || yAxisTickLabelFormatter != null,
+                color: theme.axis.y.tickLabelColor,
+                ...(yAxisTickLabelFormatter && { formatter: yAxisTickLabelFormatter }),
+            },
+            axisLine: showYAxis
+                ? {
+                    show: true,
+                    lineStyle: {
+                        color: theme.axis.y.lineColor,
+                        width: theme.axis.y.lineWidth,
+                    },
+                }
+                : { show: false },
+            axisTick: {
+                show: showYAxisTicks,
+                lineStyle: {
+                    color: theme.axis.y.tickColor,
+                    width: theme.axis.y.tickWidth,
+                },
+            },
+            splitLine: {
+                show: showYAxisSplitLines,
+                lineStyle: {
+                    color: theme.axis.y.splitLineColor,
+                    width: theme.axis.y.splitLineWidth,
+                },
+            },
+        };
+        const legendConfig = showLegend && hasNamedSeries
+            ? {
+                data: normalizedSeries
+                    .filter((s) => 'name' in s && s.name)
+                    .map((s) => s.name),
+                textStyle: {
+                    color: theme.legend.textColor,
+                    fontSize: theme.legend.fontSize,
+                },
+                backgroundColor: theme.legend.backgroundColor,
+            }
+            : undefined;
+        const seriesConfig = [];
+        normalizedSeries.forEach((s, index) => {
+            const seriesColor = theme.series[index % theme.series.length].color;
+            const seriesData = 'data' in s ? s.data : [];
+            const seriesName = 'name' in s && s.name ? s.name : undefined;
+            const scatterSeries = {
+                type: 'scatter',
+                data: seriesData,
+                symbol: symbol === 'none' ? 'circle' : symbol,
+                symbolSize: symbol === 'none' ? 8 : symbolSize,
+                itemStyle: { color: seriesColor },
+                emphasis: showHighlighter
+                    ? {
+                        focus: 'self',
+                        scale: true,
+                        symbol: 'circle',
+                        symbolSize: 8,
+                        itemStyle: {
+                            color: seriesColor,
+                            borderColor: '#FFFFFF',
+                            borderWidth: 2,
+                        },
+                    }
+                    : { focus: 'none', scale: false, symbolSize: 0 },
+            };
+            if (seriesName)
+                scatterSeries.name = seriesName;
+            seriesConfig.push(scatterSeries);
+            if (showRegressionLine && seriesData.length >= 2) {
+                const { slope, intercept } = linearRegression(seriesData);
+                const xs = seriesData.map((p) => p[0]);
+                const xMin = Math.min(...xs);
+                const xMax = Math.max(...xs);
+                const regressionData = [
+                    [xMin, slope * xMin + intercept],
+                    [xMax, slope * xMax + intercept],
+                ];
+                const lineSeries = {
+                    type: 'line',
+                    data: regressionData,
+                    symbol: 'none',
+                    lineStyle: {
+                        color: seriesColor,
+                        width: 2,
+                        type: 'solid',
+                    },
+                    showSymbol: false,
+                };
+                if (seriesName)
+                    lineSeries.name = seriesName;
+                seriesConfig.push(lineSeries);
+            }
+        });
+        const config = {
+            tooltip: tooltipConfig,
+            xAxis: xAxisConfig,
+            yAxis: yAxisConfig,
+            series: seriesConfig,
+        };
+        if (legendConfig)
+            config.legend = legendConfig;
+        if (grid)
+            config.grid = grid;
+        return config;
+    }, [
+        theme,
+        normalizedSeries,
+        symbol,
+        symbolSize,
+        showXAxis,
+        showXAxisTicks,
+        showYAxis,
+        showYAxisTicks,
+        showXAxisSplitLines,
+        showYAxisSplitLines,
+        boundaryGap,
+        grid,
+        showLegend,
+        hasNamedSeries,
+        showHighlighter,
+        showRegressionLine,
+        xAxisTickLabelFormatter,
+        yAxisTickLabelFormatter,
+        xAxisTicks,
+        xAxisLabel,
+        yAxisLabel,
+    ]);
+    useEffect(() => {
+        let chart;
+        if (chartRef.current) {
+            try {
+                chart = echarts.init(chartRef.current, 'light', { width, height });
+                chart.setOption(option);
+                const handleSeriesClick = (params) => {
+                    const cb = onSelectRef.current;
+                    if (typeof cb !== 'function')
+                        return;
+                    if (params.componentType !== 'series')
+                        return;
+                    if (params.seriesType !== 'scatter')
+                        return;
+                    const seriesIndex = params.seriesIndex;
+                    const dataIndex = params.dataIndex;
+                    if (typeof seriesIndex !== 'number' ||
+                        typeof dataIndex !== 'number' ||
+                        dataIndex < 0) {
+                        return;
+                    }
+                    const { normalizedSeries: ns } = selectContextRef.current;
+                    const s = ns[seriesIndex];
+                    if (!s?.data || !Array.isArray(s.data))
+                        return;
+                    const point = s.data[dataIndex];
+                    if (!point || point.length < 2)
+                        return;
+                    const seriesName = s.name != null && s.name !== ''
+                        ? String(s.name)
+                        : `Series ${seriesIndex + 1}`;
+                    const event = {
+                        seriesIndex,
+                        dataIndex,
+                        seriesName,
+                        x: point[0],
+                        y: Number(point[1]),
+                    };
+                    cb(event);
+                };
+                chart.on('click', handleSeriesClick);
+            }
+            catch (error) {
+                console.warn('Chart initialization error:', error);
+            }
+        }
+        return () => {
+            if (chart) {
+                try {
+                    chart.dispose();
+                }
+                catch (error) {
+                    console.warn('Chart disposal error:', error);
+                }
+            }
+        };
+    }, [option, width, height]);
+    return <SkiaChart ref={chartRef} useRNGH/>;
+};
+const ScatterChartComponent = withResponsiveContainer(withChartTheme(ChartComponent));
+export const ScatterChart = Object.assign(ScatterChartComponent, {
+    displayName: 'ScatterChart',
+});