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

package/bubble/bubble-chart.js

@@ -5,6 +5,9 @@ import { 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 { View } from 'react-native';
+import { axisTooltipShowContentFlag } from '../cartesian/tooltip';
+import { createScatterTooltipPreset, useScatterItemTooltip } from '../scatter/tooltip';
 echarts.use([
     TooltipComponent,
     GridComponent,
@@ -18,12 +21,31 @@ function scaleSize(value, dataMin, dataMax, outMin, outMax) {
     const t = (value - dataMin) / (dataMax - dataMin);
     return outMin + t * (outMax - outMin);
 }
-const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sizeRange = [8, 50], showXAxis = true, showXAxisTicks = true, showYAxis = true, showYAxisTicks = true, showXAxisSplitLines = true, showYAxisSplitLines = true, boundaryGap = false, grid, showLegend = false, showHighlighter = true, xAxisTickLabelFormatter, yAxisTickLabelFormatter, xAxisLabel, yAxisLabel, onSelect, ...props }) => {
+const DEFAULT_SIZE_RANGE = [8, 50];
+const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sizeRange = DEFAULT_SIZE_RANGE, showXAxis = true, showXAxisTicks = true, showYAxis = true, showYAxisTicks = true, showXAxisSplitLines = true, showYAxisSplitLines = true, boundaryGap = false, grid, showLegend = false, showHighlighter = true, tooltip = 'card', xAxisTickLabelFormatter, yAxisTickLabelFormatter, 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 [];
@@ -52,39 +74,29 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', si
         return [];
     }, [data]);
     const hasNamedSeries = useMemo(() => normalizedSeries.some((s) => 'name' in s && s.name), [normalizedSeries]);
-    selectContextRef.current = { normalizedSeries };
+    selectContextRef.current = {
+        normalizedSeries: normalizedSeries,
+    };
     const option = useMemo(() => {
-        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,
+                        },
                     },
-                },
-                formatter: (params) => {
-                    const p = Array.isArray(params) ? params[0] : params;
-                    const d = p?.data;
-                    if (!d || !Array.isArray(d))
-                        return '';
-                    const name = p.seriesName ? `${p.seriesName}<br/>` : '';
-                    return `${name}x: ${d[0]}, y: ${d[1]}${d[2] != null ? `, size: ${d[2]}` : ''}`;
-                },
+                }),
             }
-            : {
-                trigger: 'item',
-                formatter: (params) => {
-                    const p = Array.isArray(params) ? params[0] : params;
-                    const d = p?.data;
-                    if (!d || !Array.isArray(d))
-                        return '';
-                    const name = p.seriesName ? `${p.seriesName}<br/>` : '';
-                    return `${name}x: ${d[0]}, y: ${d[1]}${d[2] != null ? `, size: ${d[2]}` : ''}`;
-                },
-            };
+            : { show: false };
         const xAxisConfig = {
             type: 'value',
             boundaryGap,
@@ -193,7 +205,7 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', si
                 itemStyle: { color: seriesColor },
                 emphasis: showHighlighter
                     ? {
-                        focus: 'self',
+                        focus: 'none',
                         scale: true,
                         itemStyle: {
                             color: seriesColor,
@@ -234,6 +246,7 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', si
         showLegend,
         hasNamedSeries,
         showHighlighter,
+        tooltipOverlayActive,
         xAxisTickLabelFormatter,
         yAxisTickLabelFormatter,
         xAxisLabel,
@@ -241,10 +254,12 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', si
     ]);
     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')
@@ -287,6 +302,7 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', si
             }
         }
         return () => {
+            detachScatterTooltip();
             if (chart) {
                 try {
                     chart.dispose();
@@ -296,8 +312,11 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', si
                 }
             }
         };
-    }, [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 BubbleChartComponent = withResponsiveContainer(withChartTheme(ChartComponent));
 export const BubbleChart = Object.assign(BubbleChartComponent, {

package/cartesian/tooltip/axis-tooltip-presets.d.ts

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

package/cartesian/tooltip/axis-tooltip-presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"axis-tooltip-presets.d.ts","sourceRoot":"","sources":["../../../../../components/chart/cartesian/tooltip/axis-tooltip-presets.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAOxD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AA0D9D,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,kBAAkB,GACzB,CAAC,MAAM,EAAE,iBAAiB,KAAK,KAAK,CAAC,YAAY,CAYnD"}

package/cartesian/tooltip/axis-tooltip-presets.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { TooltipPresetCard, TooltipPresetCompact, TooltipPresetKpi, TooltipPresetStriped, } from '../../tooltip/chart-tooltip-preset-shells';
+function axisCardFromParams({ axisValue, series }) {
+    return (<TooltipPresetCard categoryTitle={String(axisValue)} seriesRows={series.map((s) => ({
+            key: s.seriesIndex,
+            swatchColor: s.color ?? '#94a3b8',
+            label: s.seriesName,
+            value: s.value,
+        }))}/>);
+}
+function axisCompactFromParams({ axisValue, series }) {
+    const detail = series.map((s) => `${s.seriesName} ${s.value}`).join(' · ');
+    return <TooltipPresetCompact emphasis={String(axisValue)} detail={detail} wrap/>;
+}
+function axisKpiFromParams({ axisValue, series }) {
+    const primary = series[0];
+    const rest = series.slice(1);
+    return (<TooltipPresetKpi accentColor={primary?.color ?? '#3b82f6'} minWidth={160} overline={String(axisValue)} metric={primary?.value ?? ''} caption={primary?.seriesName} footerRows={rest.length > 0
+            ? rest.map((s) => ({
+                key: s.seriesIndex,
+                left: s.seriesName,
+                right: s.value,
+            }))
+            : undefined}/>);
+}
+function axisStripedFromParams({ axisValue, series }) {
+    return (<TooltipPresetStriped headerTitle={String(axisValue)} rows={series.map((s) => ({
+            key: `s-${s.seriesIndex}`,
+            leftLabel: s.seriesName,
+            leftSwatchColor: s.color ?? '#64748b',
+            right: s.value,
+        }))}/>);
+}
+export function createAxisTooltipPreset(preset) {
+    switch (preset) {
+        case 'card':
+            return (p) => axisCardFromParams(p);
+        case 'compact':
+            return (p) => axisCompactFromParams(p);
+        case 'kpi':
+            return (p) => axisKpiFromParams(p);
+        case 'striped':
+            return (p) => axisStripedFromParams(p);
+    }
+    throw new Error(`Unknown tooltip preset: ${String(preset)}`);
+}

package/cartesian/tooltip/axis-tooltip.types.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Types for axis-triggered tooltips (category axis + one value per series).
+ * Used by area, line, column, and bar charts.
+ */
+/** One series row at the hovered category index. */
+export interface AxisTooltipSeriesItem {
+    seriesName: string;
+    value: number;
+    seriesIndex: number;
+    color?: string;
+}
+/** Axis tooltip fields without pointer position. */
+export interface AxisTooltipContentParams {
+    axisValue: string | number;
+    dataIndex: number;
+    series: AxisTooltipSeriesItem[];
+}
+/** Payload for `renderTooltip` (includes pointer in chart pixel space). */
+export interface AxisTooltipParams extends AxisTooltipContentParams {
+    pointerX: number;
+    pointerY: number;
+}
+/**
+ * Ref snapshot read when `showTip` fires. Keep `categoryAxisData` in sync with the chart’s category axis `data`.
+ */
+export interface AxisTooltipContext {
+    displaySeries: Array<{
+        name?: string;
+        data: [string | number, number][] | number[];
+    }>;
+    categoryAxisData: (string | number)[];
+    /**
+     * Set when the category axis is Y (horizontal column/bar). `showTip` lists that axis in `dataByAxis`;
+     * reading `[0]` would be the value axis and yields a stuck `dataIndex`.
+     */
+    categoryAxisIsY?: boolean;
+}
+//# sourceMappingURL=axis-tooltip.types.d.ts.map

package/cartesian/tooltip/axis-tooltip.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"axis-tooltip.types.d.ts","sourceRoot":"","sources":["../../../../../components/chart/cartesian/tooltip/axis-tooltip.types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,oDAAoD;AACpD,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,oDAAoD;AACpD,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,qBAAqB,EAAE,CAAC;CACjC;AAED,2EAA2E;AAC3E,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB;IACjE,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,aAAa,EAAE,KAAK,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,MAAM,EAAE,CAAA;KAAE,CAAC,CAAC;IACtF,gBAAgB,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACtC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B"}

package/cartesian/tooltip/axis-tooltip.types.js

@@ -0,0 +1,4 @@
+/**
+ * Types for axis-triggered tooltips (category axis + one value per series).
+ * Used by area, line, column, and bar charts.
+ */

package/cartesian/tooltip/axis-tooltip.utils.d.ts

@@ -0,0 +1,10 @@
+import type { AxisTooltipContext, AxisTooltipParams } from './axis-tooltip.types';
+/** Build axis tooltip params from an ECharts `showTip` dispatch payload. */
+export declare function axisTooltipParamsFromShowTipEvent(evt: any, ctx: AxisTooltipContext, seriesTheme: Array<{
+    color: string;
+}>): AxisTooltipParams | null;
+/** Spread onto ECharts `tooltip` when using an RN overlay (`showTip` / `hideTip` still fire). */
+export declare function axisTooltipShowContentFlag(useCustomTooltipOverlay: boolean): {
+    showContent: boolean;
+};
+//# sourceMappingURL=axis-tooltip.utils.d.ts.map

package/cartesian/tooltip/axis-tooltip.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"axis-tooltip.utils.d.ts","sourceRoot":"","sources":["../../../../../components/chart/cartesian/tooltip/axis-tooltip.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAyB,MAAM,sBAAsB,CAAC;AAsEzG,4EAA4E;AAC5E,wBAAgB,iCAAiC,CAC/C,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,kBAAkB,EACvB,WAAW,EAAE,KAAK,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,GACpC,iBAAiB,GAAG,IAAI,CAsD1B;AAED,iGAAiG;AACjG,wBAAgB,0BAA0B,CACxC,uBAAuB,EAAE,OAAO,GAC/B;IAAE,WAAW,EAAE,OAAO,CAAA;CAAE,CAE1B"}

package/cartesian/tooltip/axis-tooltip.utils.js

@@ -0,0 +1,121 @@
+function isCategoryAxisEntry(a) {
+    return String(a?.axisType ?? '').toLowerCase() === 'category';
+}
+function hasSeriesIndices(a) {
+    return Array.isArray(a?.seriesDataIndices) && a.seriesDataIndices.length > 0;
+}
+/** First numeric `dataIndex` carried on the axis tooltip batch (the authoritative index for that axis). */
+function dataIndexFromSeriesDataIndices(indices) {
+    if (!Array.isArray(indices))
+        return undefined;
+    for (const item of indices) {
+        const d = item?.dataIndex;
+        if (typeof d === 'number' && !Number.isNaN(d))
+            return d;
+    }
+    return undefined;
+}
+function seriesDataIndicesFromShowTipEvt(evt, categoryAxisIsY) {
+    const axes = evt?.dataByCoordSys?.[0]?.dataByAxis;
+    if (!Array.isArray(axes) || axes.length === 0)
+        return null;
+    const categoryAxes = axes.filter(isCategoryAxisEntry);
+    if (categoryAxes.length === 1) {
+        const axisEntry = categoryAxes[0];
+        return {
+            indices: Array.isArray(axisEntry.seriesDataIndices) ? axisEntry.seriesDataIndices : [],
+            axisEntry,
+        };
+    }
+    if (categoryAxes.length > 1 && categoryAxisIsY != null) {
+        const dim = categoryAxisIsY ? 'y' : 'x';
+        const axisEntry = categoryAxes.find((a) => a?.axisDim === dim && hasSeriesIndices(a)) ??
+            categoryAxes.find((a) => a?.axisDim === dim) ??
+            categoryAxes[0];
+        return {
+            indices: Array.isArray(axisEntry.seriesDataIndices) ? axisEntry.seriesDataIndices : [],
+            axisEntry,
+        };
+    }
+    if (categoryAxisIsY === true) {
+        const yWith = axes.find((a) => a?.axisDim === 'y' && hasSeriesIndices(a));
+        if (yWith)
+            return { indices: yWith.seriesDataIndices, axisEntry: yWith };
+        const yAxis = axes.find((a) => a?.axisDim === 'y');
+        if (yAxis)
+            return { indices: Array.isArray(yAxis.seriesDataIndices) ? yAxis.seriesDataIndices : [], axisEntry: yAxis };
+        return null;
+    }
+    if (categoryAxisIsY === false) {
+        const xWith = axes.find((a) => a?.axisDim === 'x' && hasSeriesIndices(a));
+        if (xWith)
+            return { indices: xWith.seriesDataIndices, axisEntry: xWith };
+        const xAxis = axes.find((a) => a?.axisDim === 'x');
+        if (xAxis)
+            return { indices: Array.isArray(xAxis.seriesDataIndices) ? xAxis.seriesDataIndices : [], axisEntry: xAxis };
+        return null;
+    }
+    const preferred = axes.find((a) => a?.axisDim === 'x' && hasSeriesIndices(a));
+    const fallback = axes.find((a) => hasSeriesIndices(a));
+    const axisEntry = preferred ?? fallback ?? axes[0];
+    const indices = axisEntry?.seriesDataIndices;
+    if (!Array.isArray(indices) || indices.length === 0)
+        return null;
+    return { indices, axisEntry };
+}
+/** Build axis tooltip params from an ECharts `showTip` dispatch payload. */
+export function axisTooltipParamsFromShowTipEvent(evt, ctx, seriesTheme) {
+    const pointerX = evt?.x;
+    const pointerY = evt?.y;
+    if (typeof pointerX !== 'number' || typeof pointerY !== 'number')
+        return null;
+    if (Number.isNaN(pointerX) || Number.isNaN(pointerY))
+        return null;
+    const picked = seriesDataIndicesFromShowTipEvt(evt, ctx.categoryAxisIsY);
+    if (picked == null)
+        return null;
+    const { indices, axisEntry } = picked;
+    const dataIndexRaw = dataIndexFromSeriesDataIndices(indices) ??
+        (typeof axisEntry?.dataIndex === 'number' && !Number.isNaN(axisEntry.dataIndex)
+            ? axisEntry.dataIndex
+            : undefined) ??
+        (typeof evt?.dataIndex === 'number' && !Number.isNaN(evt.dataIndex) ? evt.dataIndex : undefined) ??
+        0;
+    const { displaySeries: ds, categoryAxisData: cats } = ctx;
+    if (!ds?.length || dataIndexRaw < 0)
+        return null;
+    const indicesForSeries = Array.isArray(indices) && indices.length > 0
+        ? indices
+        : ds.map((_, seriesIndex) => ({ seriesIndex, dataIndex: dataIndexRaw }));
+    const axisValue = cats[dataIndexRaw] ?? dataIndexRaw;
+    const themeLen = Math.max(seriesTheme.length, 1);
+    const series = indicesForSeries.map((item) => {
+        const seriesIndex = typeof item.seriesIndex === 'number' ? item.seriesIndex : 0;
+        const s = ds[seriesIndex];
+        const seriesName = s?.name != null && s.name !== '' ? String(s.name) : `Series ${seriesIndex + 1}`;
+        let value = 0;
+        const pt = s?.data?.[dataIndexRaw];
+        if (typeof pt === 'number')
+            value = pt;
+        else if (Array.isArray(pt) && pt.length >= 2)
+            value = Number(pt[1]);
+        const color = seriesTheme[seriesIndex % themeLen]?.color;
+        return {
+            seriesName,
+            value,
+            seriesIndex,
+            ...(typeof color === 'string' ? { color } : {}),
+        };
+    });
+    return {
+        axisValue,
+        dataIndex: dataIndexRaw,
+        series,
+        pointerX,
+        pointerY,
+    };
+}
+/** Spread onto ECharts `tooltip` when using an RN overlay (`showTip` / `hideTip` still fire). */
+export function axisTooltipShowContentFlag(useCustomTooltipOverlay) {
+    return { showContent: !useCustomTooltipOverlay };
+}

package/cartesian/tooltip/default-axis-tooltip.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ChartTheme } from '../../chart-theme.context';
+import type { AxisTooltipParams } from './axis-tooltip.types';
+/**
+ * Themed default axis tooltip as React Native (mirrors the former ECharts tooltip styling).
+ * Pass the result of this factory to {@link useAxisTooltip} when the consumer does not pass `renderTooltip`.
+ */
+export declare function createDefaultAxisTooltip(theme: Pick<ChartTheme, 'tooltip'>): (params: AxisTooltipParams) => React.ReactElement;
+//# sourceMappingURL=default-axis-tooltip.d.ts.map

package/cartesian/tooltip/default-axis-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-axis-tooltip.d.ts","sourceRoot":"","sources":["../../../../../components/chart/cartesian/tooltip/default-axis-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D;;;GAGG;AACH,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,GACjC,CAAC,MAAM,EAAE,iBAAiB,KAAK,KAAK,CAAC,YAAY,CA8BnD"}

package/cartesian/tooltip/default-axis-tooltip.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+/**
+ * Themed default axis tooltip as React Native (mirrors the former ECharts tooltip styling).
+ * Pass the result of this factory to {@link useAxisTooltip} when the consumer does not pass `renderTooltip`.
+ */
+export function createDefaultAxisTooltip(theme) {
+    const t = theme.tooltip;
+    return function DefaultAxisTooltip(params) {
+        return (<View style={{
+                backgroundColor: t.backgroundColor,
+                borderColor: t.borderColor,
+                borderWidth: t.borderWidth,
+                borderRadius: t.borderRadius,
+                padding: t.padding,
+            }}>
+        <Text style={[styles.axisTitle, { color: t.labelColor }]}>{String(params.axisValue)}</Text>
+        {params.series.map((item) => (<View key={item.seriesIndex} style={styles.row}>
+            {item.color != null && item.color !== '' ? (<View style={[styles.swatch, { backgroundColor: item.color }]}/>) : (<View style={styles.swatchPlaceholder}/>)}
+            <Text style={[styles.valueLine, { color: t.valueColor }]}>
+              <Text style={{ color: t.labelColor }}>{item.seriesName}: </Text>
+              {String(item.value)}
+            </Text>
+          </View>))}
+      </View>);
+    };
+}
+const styles = StyleSheet.create({
+    axisTitle: {
+        fontWeight: '600',
+        marginBottom: 4,
+    },
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 2,
+    },
+    swatch: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        marginRight: 6,
+    },
+    swatchPlaceholder: {
+        width: 8,
+        height: 8,
+        marginRight: 6,
+    },
+    valueLine: {
+        fontSize: 12,
+        flex: 1,
+    },
+});

package/cartesian/tooltip/index.d.ts

@@ -0,0 +1,7 @@
+export { createDefaultAxisTooltip } from './default-axis-tooltip';
+export { createAxisTooltipPreset } from './axis-tooltip-presets';
+export type { AxisTooltipContentParams, AxisTooltipContext, AxisTooltipParams, AxisTooltipSeriesItem, } from './axis-tooltip.types';
+export { axisTooltipShowContentFlag, axisTooltipParamsFromShowTipEvent } from './axis-tooltip.utils';
+export { AxisTooltipOverlay, useAxisTooltip } from './use-axis-tooltip';
+export type { AxisTooltipOverlayProps, UseAxisTooltipOptions, UseAxisTooltipResult } from './use-axis-tooltip';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/chart/cartesian/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACjE,YAAY,EACV,wBAAwB,EACxB,kBAAkB,EAClB,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,0BAA0B,EAAE,iCAAiC,EAAE,MAAM,sBAAsB,CAAC;AACrG,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACxE,YAAY,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC"}

package/cartesian/tooltip/index.js

@@ -0,0 +1,4 @@
+export { createDefaultAxisTooltip } from './default-axis-tooltip';
+export { createAxisTooltipPreset } from './axis-tooltip-presets';
+export { axisTooltipShowContentFlag, axisTooltipParamsFromShowTipEvent } from './axis-tooltip.utils';
+export { AxisTooltipOverlay, useAxisTooltip } from './use-axis-tooltip';

package/cartesian/tooltip/use-axis-tooltip.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { AxisTooltipContext, AxisTooltipParams } from './axis-tooltip.types';
+export interface AxisTooltipOverlayProps {
+    width: number;
+    height: number;
+    params: AxisTooltipParams | null;
+    children: (params: AxisTooltipParams) => React.ReactNode;
+}
+/** Presentational overlay; use with your own state if you do not use the hook. */
+export declare function AxisTooltipOverlay({ width, height, params, children }: AxisTooltipOverlayProps): React.JSX.Element | null;
+export interface UseAxisTooltipOptions {
+    /**
+     * When true, registers `showTip` / `hideTip` listeners and drives the overlay.
+     * Typically matches whether the chart shows the RN tooltip overlay (see chart `tooltip` / `renderTooltip`).
+     */
+    active: boolean;
+    /** Resolved renderer (include {@link createDefaultAxisTooltip} when the consumer does not pass one). */
+    renderTooltip: (params: AxisTooltipParams) => React.ReactNode;
+    contextRef: React.RefObject<AxisTooltipContext>;
+    themeSeriesRef: React.RefObject<Array<{
+        color: string;
+    }>>;
+    width: number;
+    height: number;
+}
+export interface UseAxisTooltipResult {
+    attachAxisTooltipListeners: (chart: {
+        on: (ev: string, fn: (...args: any[]) => void) => void;
+        off: (ev: string, fn: (...args: any[]) => void) => void;
+    }) => () => void;
+    renderAxisTooltipOverlay: () => React.ReactNode;
+}
+/**
+ * Axis tooltip as React Native UI: listens to ECharts `showTip` / `hideTip`, maps payload with
+ * {@link axisTooltipParamsFromShowTipEvent}, and positions an overlay near the pointer.
+ */
+export declare function useAxisTooltip(options: UseAxisTooltipOptions): UseAxisTooltipResult;
+//# sourceMappingURL=use-axis-tooltip.d.ts.map

package/cartesian/tooltip/use-axis-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-axis-tooltip.d.ts","sourceRoot":"","sources":["../../../../../components/chart/cartesian/tooltip/use-axis-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGlF,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC1D;AAED,kFAAkF;AAClF,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,uBAAuB,4BAY9F;AAED,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB,wGAAwG;IACxG,aAAa,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9D,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC;IAChD,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,oBAAoB;IACnC,0BAA0B,EAAE,CAAC,KAAK,EAAE;QAClC,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,wBAAwB,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CACjD;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,qBAAqB,GAAG,oBAAoB,CA4CnF"}

package/cartesian/tooltip/use-axis-tooltip.js

@@ -0,0 +1,54 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { ChartPointerTooltipOverlay } from '../../tooltip/chart-pointer-tooltip-overlay';
+import { axisTooltipParamsFromShowTipEvent } from './axis-tooltip.utils';
+/** Presentational overlay; use with your own state if you do not use the hook. */
+export function AxisTooltipOverlay({ width, height, params, children }) {
+    if (params == null)
+        return null;
+    return (<ChartPointerTooltipOverlay width={width} height={height} pointerX={params.pointerX} pointerY={params.pointerY}>
+      {children(params)}
+    </ChartPointerTooltipOverlay>);
+}
+/**
+ * Axis tooltip as React Native UI: listens to ECharts `showTip` / `hideTip`, maps payload with
+ * {@link axisTooltipParamsFromShowTipEvent}, and positions an overlay near the pointer.
+ */
+export function useAxisTooltip(options) {
+    const { active, renderTooltip, contextRef, themeSeriesRef, width, height } = options;
+    const [tooltipParams, setTooltipParams] = useState(null);
+    useEffect(() => {
+        if (!active)
+            setTooltipParams(null);
+    }, [active]);
+    const attachAxisTooltipListeners = useCallback((chart) => {
+        if (!active)
+            return () => { };
+        const onShowTip = (evt) => {
+            const ctx = contextRef.current;
+            if (!ctx?.displaySeries?.length) {
+                setTooltipParams(null);
+                return;
+            }
+            const params = axisTooltipParamsFromShowTipEvent(evt, ctx, themeSeriesRef.current ?? []);
+            setTooltipParams(params);
+        };
+        const onHideTip = () => setTooltipParams(null);
+        chart.on('showTip', onShowTip);
+        chart.on('hideTip', onHideTip);
+        return () => {
+            chart.off('showTip', onShowTip);
+            chart.off('hideTip', onHideTip);
+        };
+    }, [active, contextRef, themeSeriesRef]);
+    const renderAxisTooltipOverlay = useCallback(() => {
+        if (!active || tooltipParams == null)
+            return null;
+        return (<AxisTooltipOverlay width={width} height={height} params={tooltipParams}>
+        {renderTooltip}
+      </AxisTooltipOverlay>);
+    }, [active, renderTooltip, tooltipParams, width, height]);
+    return {
+        attachAxisTooltipListeners,
+        renderAxisTooltipOverlay,
+    };
+}

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

@@ -1 +1 @@
-{"version":3,"file":"column-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/column/column-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAS7D,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,oCAAoC;AACpC,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AA6jB7D,eAAO,MAAM,WAAW;;;;;;;CAEtB,CAAC"}
+{"version":3,"file":"column-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/column/column-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAS7D,OAAO,KAAqC,MAAM,OAAO,CAAC;AAO1D,oCAAoC;AACpC,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAqnB7D,eAAO,MAAM,WAAW;;;;;;;CAEtB,CAAC"}