@wavemaker/react-native-echarts 1.0.0-dev.4 → 1.0.0-dev.8

package/radial/tooltip/radial-item-tooltip.utils.js

@@ -0,0 +1,122 @@
+function resolveDataIndexInside(data, evt) {
+    if (typeof evt?.dataIndexInside === 'number' && !Number.isNaN(evt.dataIndexInside)) {
+        return evt.dataIndexInside;
+    }
+    if (typeof evt?.dataIndex === 'number' && !Number.isNaN(evt.dataIndex)) {
+        const mapped = typeof data?.indexOfRawIndex === 'function' ? data.indexOfRawIndex(evt.dataIndex) : evt.dataIndex;
+        if (typeof mapped === 'number' && !Number.isNaN(mapped))
+            return mapped;
+    }
+    return null;
+}
+function pieSectorCenter(data, diInside) {
+    const layout = data.getItemLayout?.(diInside);
+    if (!layout || !Number.isFinite(layout.cx) || !Number.isFinite(layout.cy))
+        return null;
+    const cx = Number(layout.cx);
+    const cy = Number(layout.cy);
+    const r = Number(layout.r);
+    const r0 = Number(layout.r0 ?? 0);
+    const startAngle = Number(layout.startAngle);
+    const endAngle = Number(layout.endAngle);
+    if (!Number.isFinite(startAngle) || !Number.isFinite(endAngle))
+        return null;
+    const mid = (startAngle + endAngle) / 2;
+    const avgR = (r0 + r) / 2;
+    return {
+        x: cx + Math.cos(mid) * avgR,
+        y: cy + Math.sin(mid) * avgR,
+    };
+}
+function pointerFromEventOrSector(chart, evt, data) {
+    const ex = evt?.x;
+    const ey = evt?.y;
+    if (typeof ex === 'number' && typeof ey === 'number' && !Number.isNaN(ex) && !Number.isNaN(ey)) {
+        return { x: ex, y: ey };
+    }
+    return pieSectorCenter(data, 0);
+}
+function sliceValueAt(data, diInside) {
+    try {
+        const dim = typeof data.mapDimension === 'function' ? data.mapDimension('value') : null;
+        if (dim != null) {
+            const v = data.get(dim, diInside);
+            const n = Number(v);
+            if (Number.isFinite(n))
+                return n;
+        }
+    }
+    catch {
+        /* ignore */
+    }
+    const v0 = data.get?.(0, diInside);
+    const n0 = Number(v0);
+    if (Number.isFinite(n0))
+        return n0;
+    try {
+        const n1 = Number(data.get?.('value', diInside));
+        if (Number.isFinite(n1))
+            return n1;
+    }
+    catch {
+        /* ignore */
+    }
+    return NaN;
+}
+/**
+ * Build radial ring tooltip params from an ECharts `showTip` payload.
+ * Only the filled arc (`dataIndex` 0) is shown; the background track is ignored.
+ */
+export function radialItemParamsFromShowTip(chart, evt, ctx, themeSeries) {
+    if (!chart || !evt)
+        return null;
+    if (Array.isArray(evt.dataByCoordSys) && evt.dataByCoordSys.length > 0)
+        return null;
+    const si = typeof evt.seriesIndex === 'number' ? evt.seriesIndex : 0;
+    if (si < 0 || si >= ctx.normalizedSeries.length)
+        return null;
+    const seriesModel = chart.getModel?.().getSeriesByIndex?.(si);
+    const seriesKind = seriesModel?.subType ?? seriesModel?.get?.('type');
+    if (!seriesModel || seriesKind !== 'pie')
+        return null;
+    const data = seriesModel.getData?.();
+    if (!data)
+        return null;
+    const diInside = resolveDataIndexInside(data, evt);
+    if (diInside == null || diInside !== 0)
+        return null;
+    const pixel = pointerFromEventOrSector(chart, evt, data);
+    if (!pixel)
+        return null;
+    const row = ctx.normalizedSeries[si];
+    if (!row)
+        return null;
+    const fromModel = sliceValueAt(data, 0);
+    const value = Number.isFinite(fromModel) ? fromModel : Number(row.value);
+    if (!Number.isFinite(value))
+        return null;
+    const ringLabel = row.label != null && row.label !== '' ? String(row.label) : `Ring ${si + 1}`;
+    let color;
+    try {
+        const style = data.getItemVisual?.(0, 'style');
+        const fill = style?.fill;
+        if (typeof fill === 'string' && fill !== '')
+            color = fill;
+    }
+    catch {
+        /* ignore */
+    }
+    if (color == null) {
+        const themeLen = Math.max(themeSeries.length, 1);
+        color = themeSeries[si % themeLen]?.color;
+    }
+    return {
+        pointerX: pixel.x,
+        pointerY: pixel.y,
+        seriesIndex: si,
+        dataIndex: 0,
+        ringLabel,
+        value,
+        ...(typeof color === 'string' ? { color } : {}),
+    };
+}

package/radial/tooltip/use-radial-item-tooltip.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { RadialItemTooltipContext, RadialItemTooltipParams } from './radial-item-tooltip.types';
+export interface UseRadialItemTooltipOptions {
+    active: boolean;
+    renderTooltip: (params: RadialItemTooltipParams) => React.ReactNode;
+    contextRef: React.RefObject<RadialItemTooltipContext>;
+    themeSeriesRef: React.RefObject<Array<{
+        color: string;
+    }>>;
+    width: number;
+    height: number;
+}
+export interface UseRadialItemTooltipResult {
+    attachRadialItemTooltipListeners: (chart: {
+        on: (ev: string, fn: (...args: any[]) => void) => void;
+        off: (ev: string, fn: (...args: any[]) => void) => void;
+    }) => () => void;
+    renderRadialTooltipOverlay: () => React.ReactNode;
+}
+/** Radial concentric ring tooltip as React Native UI (`trigger: 'item'`). */
+export declare function useRadialItemTooltip(options: UseRadialItemTooltipOptions): UseRadialItemTooltipResult;
+//# sourceMappingURL=use-radial-item-tooltip.d.ts.map

package/radial/tooltip/use-radial-item-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-radial-item-tooltip.d.ts","sourceRoot":"","sources":["../../../../../components/chart/radial/tooltip/use-radial-item-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAGrG,MAAM,WAAW,2BAA2B;IAC1C,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,EAAE,CAAC,MAAM,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC;IACpE,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,wBAAwB,CAAC,CAAC;IACtD,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,0BAA0B;IACzC,gCAAgC,EAAE,CAAC,KAAK,EAAE;QACxC,EAAE,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,KAAK,IAAI,CAAC;QACvD,GAAG,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,KAAK,IAAI,CAAC;KACzD,KAAK,MAAM,IAAI,CAAC;IACjB,0BAA0B,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CACnD;AAED,6EAA6E;AAC7E,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,2BAA2B,GAAG,0BAA0B,CAiDrG"}

package/radial/tooltip/use-radial-item-tooltip.js

@@ -0,0 +1,43 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { ChartPointerTooltipOverlay } from '../../tooltip/chart-pointer-tooltip-overlay';
+import { radialItemParamsFromShowTip } from './radial-item-tooltip.utils';
+/** Radial concentric ring tooltip as React Native UI (`trigger: 'item'`). */
+export function useRadialItemTooltip(options) {
+    const { active, renderTooltip, contextRef, themeSeriesRef, width, height } = options;
+    const [params, setParams] = useState(null);
+    useEffect(() => {
+        if (!active)
+            setParams(null);
+    }, [active]);
+    const attachRadialItemTooltipListeners = useCallback((chart) => {
+        if (!active)
+            return () => { };
+        const onShowTip = (evt) => {
+            const ctx = contextRef.current;
+            if (!ctx?.normalizedSeries?.length) {
+                setParams(null);
+                return;
+            }
+            const next = radialItemParamsFromShowTip(chart, evt, ctx, themeSeriesRef.current ?? []);
+            setParams(next);
+        };
+        const onHideTip = () => setParams(null);
+        chart.on('showTip', onShowTip);
+        chart.on('hideTip', onHideTip);
+        return () => {
+            chart.off('showTip', onShowTip);
+            chart.off('hideTip', onHideTip);
+        };
+    }, [active, contextRef, themeSeriesRef]);
+    const renderRadialTooltipOverlay = useCallback(() => {
+        if (!active || params == null)
+            return null;
+        return (<ChartPointerTooltipOverlay width={width} height={height} pointerX={params.pointerX} pointerY={params.pointerY}>
+        {renderTooltip(params)}
+      </ChartPointerTooltipOverlay>);
+    }, [active, renderTooltip, params, width, height]);
+    return {
+        attachRadialItemTooltipListeners,
+        renderRadialTooltipOverlay,
+    };
+}

package/scatter/index.d.ts

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

package/scatter/index.d.ts.map

@@ -1 +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"}
+{"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;AAClF,cAAc,WAAW,CAAC"}

package/scatter/index.js

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

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

@@ -1 +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"}
+{"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;AAQ1D,qCAAqC;AACrC,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AA4XlF,eAAO,MAAM,YAAY;;;;;;;CAEvB,CAAC"}

package/scatter/scatter-chart.js

@@ -5,7 +5,10 @@ import { LineChart as EChartsLineChart, ScatterChart as EChartsScatterChart } fr
 import { GridComponent, LegendComponent, TooltipComponent, } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import React, { useEffect, useMemo, useRef } from 'react';
+import { View } from 'react-native';
 import { getAxis } from '../axis';
+import { axisTooltipShowContentFlag } from '../cartesian/tooltip';
+import { createScatterTooltipPreset, useScatterItemTooltip } from './tooltip';
 echarts.use([
     TooltipComponent,
     GridComponent,
@@ -31,12 +34,30 @@ function linearRegression(points) {
     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 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, tooltip = 'card', showRegressionLine = false, xAxisTickLabelFormatter, yAxisTickLabelFormatter, xAxisTicks, xAxisLabel, yAxisLabel, onSelect, renderTooltip, ...props }) => {
     const { theme } = useChartTheme(props.theme, props.colors);
     const chartRef = useRef(null);
     const onSelectRef = useRef(onSelect);
     onSelectRef.current = onSelect;
     const selectContextRef = useRef({ normalizedSeries: [] });
+    const themeSeriesRef = useRef(theme.series);
+    themeSeriesRef.current = theme.series;
+    const tooltipOverlayActive = renderTooltip != null || tooltip !== 'none';
+    const renderTooltipFn = useMemo(() => {
+        if (renderTooltip != null)
+            return renderTooltip;
+        if (tooltip === 'none')
+            return () => null;
+        return createScatterTooltipPreset(tooltip);
+    }, [renderTooltip, tooltip]);
+    const { attachScatterItemTooltipListeners, renderScatterTooltipOverlay } = useScatterItemTooltip({
+        active: tooltipOverlayActive,
+        renderTooltip: renderTooltipFn,
+        contextRef: selectContextRef,
+        themeSeriesRef,
+        width,
+        height,
+    });
     const normalizedSeries = useMemo(() => {
         if (!Array.isArray(data) || data.length === 0)
             return [];
@@ -56,19 +77,25 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sy
         const xAxisData = xAxisTicks != null && xAxisTicks.length > 0
             ? xAxisTicks
             : getAxis(dataPoints).map(String);
-        const tooltipConfig = showHighlighter
+        const tooltipConfig = tooltipOverlayActive
             ? {
                 trigger: 'item',
-                axisPointer: {
-                    type: 'cross',
-                    lineStyle: {
+                ...axisTooltipShowContentFlag(true),
+                ...(showHighlighter && {
+                    axisPointer: {
                         type: 'line',
-                        width: 1,
-                        color: theme.series[0]?.color ?? '#999',
+                        lineStyle: {
+                            type: 'line',
+                            width: 1,
+                            color: '#00000000',
+                        },
+                        label: {
+                            show: false,
+                        },
                     },
-                },
+                }),
             }
-            : { trigger: 'item' };
+            : { show: false };
         // Scatter uses value axes for both x and y (data is [x, y] pairs)
         const xAxisConfig = {
             type: 'category',
@@ -171,7 +198,7 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sy
                 itemStyle: { color: seriesColor },
                 emphasis: showHighlighter
                     ? {
-                        focus: 'self',
+                        focus: 'none',
                         scale: true,
                         symbol: 'circle',
                         symbolSize: 8,
@@ -238,6 +265,7 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sy
         showLegend,
         hasNamedSeries,
         showHighlighter,
+        tooltipOverlayActive,
         showRegressionLine,
         xAxisTickLabelFormatter,
         yAxisTickLabelFormatter,
@@ -247,10 +275,12 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sy
     ]);
     useEffect(() => {
         let chart;
+        let detachScatterTooltip = () => { };
         if (chartRef.current) {
             try {
                 chart = echarts.init(chartRef.current, 'light', { width, height });
                 chart.setOption(option);
+                detachScatterTooltip = attachScatterItemTooltipListeners(chart);
                 const handleSeriesClick = (params) => {
                     const cb = onSelectRef.current;
                     if (typeof cb !== 'function')
@@ -292,6 +322,7 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sy
             }
         }
         return () => {
+            detachScatterTooltip();
             if (chart) {
                 try {
                     chart.dispose();
@@ -301,8 +332,11 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sy
                 }
             }
         };
-    }, [option, width, height]);
-    return <SkiaChart ref={chartRef} useRNGH/>;
+    }, [option, width, height, attachScatterItemTooltipListeners]);
+    return (<View style={{ width, height, position: 'relative' }}>
+      <SkiaChart ref={chartRef} useRNGH/>
+      {renderScatterTooltipOverlay()}
+    </View>);
 };
 const ScatterChartComponent = withResponsiveContainer(withChartTheme(ChartComponent));
 export const ScatterChart = Object.assign(ScatterChartComponent, {

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

@@ -1,4 +1,6 @@
 import type { CartesianChartProps } from '../props/cartesian';
+import type { ReactNode } from 'react';
+import type { ScatterItemTooltipParams } from './tooltip/scatter-item-tooltip.types';
 /**
  * Scatter data: array of [x, y] pairs per series.
  * - Single series: number[][]
@@ -12,7 +14,7 @@ export type ScatterSeriesData = number[][] | Array<{
  * Props for ScatterChart.
  * common -> cartesian -> scatter
  */
-export interface ScatterChartProps extends CartesianChartProps {
+export interface ScatterChartProps extends Omit<CartesianChartProps, 'renderTooltip'> {
     /**
      * Scatter data: array of [x, y] pairs per series.
      */
@@ -32,5 +34,9 @@ export interface ScatterChartProps extends CartesianChartProps {
      * @default false
      */
     showRegressionLine?: boolean;
+    /**
+     * Overrides the default React Native **item** tooltip body (scatter points; see {@link ScatterItemTooltipParams}).
+     */
+    renderTooltip?: (params: ScatterItemTooltipParams) => ReactNode;
 }
 //# sourceMappingURL=scatter-chart.props.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"scatter-chart.props.d.ts","sourceRoot":"","sources":["../../../../components/chart/scatter/scatter-chart.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAE9D;;;;GAIG;AACH,MAAM,MAAM,iBAAiB,GACzB,MAAM,EAAE,EAAE,GACV,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAA;CAAE,CAAC,CAAC;AAE9C;;;GAGG;AACH,MAAM,WAAW,iBAAkB,SAAQ,mBAAmB;IAC5D;;OAEG;IACH,IAAI,EAAE,iBAAiB,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IACtG;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IACzE;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B"}
+{"version":3,"file":"scatter-chart.props.d.ts","sourceRoot":"","sources":["../../../../components/chart/scatter/scatter-chart.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAErF;;;;GAIG;AACH,MAAM,MAAM,iBAAiB,GACzB,MAAM,EAAE,EAAE,GACV,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAA;CAAE,CAAC,CAAC;AAE9C;;;GAGG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,eAAe,CAAC;IACnF;;OAEG;IACH,IAAI,EAAE,iBAAiB,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IACtG;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IACzE;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,wBAAwB,KAAK,SAAS,CAAC;CACjE"}

package/scatter/tooltip/default-scatter-tooltip.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ChartTheme } from '../../chart-theme.context';
+import type { ScatterItemTooltipParams } from './scatter-item-tooltip.types';
+/**
+ * Themed default scatter/bubble item tooltip (React Native).
+ */
+export declare function createDefaultScatterTooltip(theme: Pick<ChartTheme, 'tooltip'>): (params: ScatterItemTooltipParams) => React.ReactElement;
+//# sourceMappingURL=default-scatter-tooltip.d.ts.map

package/scatter/tooltip/default-scatter-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-scatter-tooltip.d.ts","sourceRoot":"","sources":["../../../../../components/chart/scatter/tooltip/default-scatter-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAE7E;;GAEG;AACH,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,GACjC,CAAC,MAAM,EAAE,wBAAwB,KAAK,KAAK,CAAC,YAAY,CAuC1D"}

package/scatter/tooltip/default-scatter-tooltip.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+/**
+ * Themed default scatter/bubble item tooltip (React Native).
+ */
+export function createDefaultScatterTooltip(theme) {
+    const t = theme.tooltip;
+    return function DefaultScatterTooltip(params) {
+        const { seriesName, x, y, z, color } = params;
+        return (<View style={{
+                backgroundColor: t.backgroundColor,
+                borderColor: t.borderColor,
+                borderWidth: t.borderWidth,
+                borderRadius: t.borderRadius,
+                padding: t.padding,
+            }}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 4 }}>
+          {color != null && color !== '' ? (<View style={[styles.swatch, { backgroundColor: color }]}/>) : (<View style={styles.swatchPlaceholder}/>)}
+          <Text style={[styles.title, { color: t.labelColor }]}>{seriesName}</Text>
+        </View>
+        <Text style={[styles.line, { color: t.valueColor }]}>
+          <Text style={{ color: t.labelColor }}>x: </Text>
+          {String(x)}
+        </Text>
+        <Text style={[styles.line, { color: t.valueColor }]}>
+          <Text style={{ color: t.labelColor }}>y: </Text>
+          {String(y)}
+        </Text>
+        {z != null && Number.isFinite(z) ? (<Text style={[styles.line, { color: t.valueColor }]}>
+            <Text style={{ color: t.labelColor }}>size: </Text>
+            {String(z)}
+          </Text>) : null}
+      </View>);
+    };
+}
+const styles = StyleSheet.create({
+    title: {
+        fontWeight: '600',
+        fontSize: 13,
+        flex: 1,
+    },
+    line: {
+        fontSize: 12,
+        marginTop: 2,
+    },
+    swatch: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        marginRight: 6,
+    },
+    swatchPlaceholder: {
+        width: 8,
+        height: 8,
+        marginRight: 6,
+    },
+});

package/scatter/tooltip/index.d.ts

@@ -0,0 +1,7 @@
+export { createDefaultScatterTooltip } from './default-scatter-tooltip';
+export { createScatterTooltipPreset } from './scatter-item-tooltip-presets';
+export type { ScatterItemTooltipContext, ScatterItemTooltipParams } from './scatter-item-tooltip.types';
+export { scatterItemParamsFromShowTip } from './scatter-item-tooltip.utils';
+export { useScatterItemTooltip } from './use-scatter-item-tooltip';
+export type { UseScatterItemTooltipOptions, UseScatterItemTooltipResult } from './use-scatter-item-tooltip';
+//# sourceMappingURL=index.d.ts.map

package/scatter/tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/chart/scatter/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAC5E,YAAY,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxG,OAAO,EAAE,4BAA4B,EAAE,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,YAAY,EAAE,4BAA4B,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAC"}

package/scatter/tooltip/index.js

@@ -0,0 +1,4 @@
+export { createDefaultScatterTooltip } from './default-scatter-tooltip';
+export { createScatterTooltipPreset } from './scatter-item-tooltip-presets';
+export { scatterItemParamsFromShowTip } from './scatter-item-tooltip.utils';
+export { useScatterItemTooltip } from './use-scatter-item-tooltip';

package/scatter/tooltip/scatter-item-tooltip-presets.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ChartTooltipPreset } from '../../tooltip';
+import type { ScatterItemTooltipParams } from './scatter-item-tooltip.types';
+export declare function createScatterTooltipPreset(preset: ChartTooltipPreset): (params: ScatterItemTooltipParams) => React.ReactElement;
+//# sourceMappingURL=scatter-item-tooltip-presets.d.ts.map

package/scatter/tooltip/scatter-item-tooltip-presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scatter-item-tooltip-presets.d.ts","sourceRoot":"","sources":["../../../../../components/chart/scatter/tooltip/scatter-item-tooltip-presets.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAOxD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AA8D7E,wBAAgB,0BAA0B,CACxC,MAAM,EAAE,kBAAkB,GACzB,CAAC,MAAM,EAAE,wBAAwB,KAAK,KAAK,CAAC,YAAY,CAY1D"}

package/scatter/tooltip/scatter-item-tooltip-presets.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { TooltipPresetCard, TooltipPresetCompact, TooltipPresetKpi, TooltipPresetStriped, } from '../../tooltip/chart-tooltip-preset-shells';
+function scatterCardFromParams(p) {
+    const { seriesName, x, y, z, color } = p;
+    return (<TooltipPresetCard header={{ swatchColor: color, title: seriesName }}>
+      <Text style={{ fontSize: 14, fontWeight: '700', color: '#0f172a' }}>
+        ({String(x)}, {String(y)})
+      </Text>
+      {z != null && Number.isFinite(z) ? (<Text style={{ fontSize: 12, color: '#64748b', marginTop: 4 }}>size: {String(z)}</Text>) : null}
+    </TooltipPresetCard>);
+}
+function scatterCompactFromParams(p) {
+    const { seriesName, x, y, z } = p;
+    const zPart = z != null && Number.isFinite(z) ? ` · ${String(z)}` : '';
+    return (<TooltipPresetCompact emphasis={seriesName} detail={`(${String(x)}, ${String(y)}${zPart})`} wrap/>);
+}
+function scatterKpiFromParams(p) {
+    const { seriesName, x, y, z, color } = p;
+    return (<TooltipPresetKpi accentColor={color ?? '#3b82f6'} minWidth={140} overline={seriesName} metric={String(y)} caption={`y at x = ${String(x)}${z != null && Number.isFinite(z) ? ` · size ${String(z)}` : ''}`}/>);
+}
+function scatterStripedFromParams(p) {
+    const { seriesName, x, y, z, color } = p;
+    const rows = [
+        { key: 'x', leftLabel: 'x', right: String(x) },
+        { key: 'y', leftLabel: 'y', right: String(y) },
+        ...(z != null && Number.isFinite(z)
+            ? [{ key: 'size', leftLabel: 'size', right: String(z) }]
+            : []),
+    ];
+    return (<TooltipPresetStriped headerSwatch={{ color: color ?? '#64748b', title: seriesName }} rows={rows.map((row) => ({
+            key: row.key,
+            leftLabel: row.leftLabel,
+            right: row.right,
+        }))}/>);
+}
+export function createScatterTooltipPreset(preset) {
+    switch (preset) {
+        case 'card':
+            return (p) => scatterCardFromParams(p);
+        case 'compact':
+            return (p) => scatterCompactFromParams(p);
+        case 'kpi':
+            return (p) => scatterKpiFromParams(p);
+        case 'striped':
+            return (p) => scatterStripedFromParams(p);
+    }
+    throw new Error(`Unknown tooltip preset: ${String(preset)}`);
+}

package/scatter/tooltip/scatter-item-tooltip.types.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Item tooltip payload for scatter / bubble (ECharts `trigger: 'item'`, `showTip` without `dataByCoordSys`).
+ */
+export interface ScatterItemTooltipParams {
+    pointerX: number;
+    pointerY: number;
+    seriesIndex: number;
+    dataIndex: number;
+    seriesName: string;
+    x: number;
+    y: number;
+    /** Third dimension (bubble size) when present. */
+    z?: number;
+    color?: string;
+}
+export interface ScatterItemTooltipContext {
+    normalizedSeries: Array<{
+        name?: string;
+        data: number[][];
+    }>;
+}
+//# sourceMappingURL=scatter-item-tooltip.types.d.ts.map

package/scatter/tooltip/scatter-item-tooltip.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scatter-item-tooltip.types.d.ts","sourceRoot":"","sources":["../../../../../components/chart/scatter/tooltip/scatter-item-tooltip.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,kDAAkD;IAClD,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,yBAAyB;IACxC,gBAAgB,EAAE,KAAK,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAA;KAAE,CAAC,CAAC;CAC9D"}

package/scatter/tooltip/scatter-item-tooltip.types.js

@@ -0,0 +1,3 @@
+/**
+ * Item tooltip payload for scatter / bubble (ECharts `trigger: 'item'`, `showTip` without `dataByCoordSys`).
+ */

package/scatter/tooltip/scatter-item-tooltip.utils.d.ts

@@ -0,0 +1,9 @@
+import type { ScatterItemTooltipContext, ScatterItemTooltipParams } from './scatter-item-tooltip.types';
+/**
+ * Build scatter/bubble tooltip params from an ECharts `showTip` action and chart instance.
+ * Ignores axis-style payloads (`dataByCoordSys`). Skips non-scatter series (e.g. regression line).
+ */
+export declare function scatterItemParamsFromShowTip(chart: any, evt: any, ctx: ScatterItemTooltipContext, themeSeries: Array<{
+    color: string;
+}>): ScatterItemTooltipParams | null;
+//# sourceMappingURL=scatter-item-tooltip.utils.d.ts.map

package/scatter/tooltip/scatter-item-tooltip.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scatter-item-tooltip.utils.d.ts","sourceRoot":"","sources":["../../../../../components/chart/scatter/tooltip/scatter-item-tooltip.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAoCxG;;;GAGG;AACH,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,GAAG,EACV,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,yBAAyB,EAC9B,WAAW,EAAE,KAAK,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,GACpC,wBAAwB,GAAG,IAAI,CA6CjC"}