@wavemaker/react-native-echarts 1.0.0-dev.1 → 1.0.0-dev.11

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

@@ -1,4 +1,7 @@
-import type { CommonChartProps } from '../props/common';
+import type { CommonChartProps, LegendPosition } from '../props/common';
+import type { ChartTooltipOption } from '../tooltip';
+import type { RadarItemTooltipParams } from './tooltip/radar-item-tooltip.types';
+import type { ReactNode } from 'react';
 /** Emitted when the user taps/clicks a radar series (polygon). */
 export interface RadarChartSelectEvent {
     seriesIndex: number;
@@ -49,9 +52,14 @@ export interface RadarChartProps extends CommonChartProps {
     symbolSize?: number | number[] | ((value: unknown) => number | number[]);
     /**
      * Whether to display a legend for named series.
-     * @default false
+     * @default true
      */
     showLegend?: boolean;
+    /**
+     * Legend position. Top and bottom use a horizontal legend that wraps; left and right use a vertical legend.
+     * @default 'bottom'
+     */
+    legendPosition?: LegendPosition;
     /**
      * Whether to show emphasis (highlight) when interacting with the chart.
      * @default true
@@ -72,6 +80,16 @@ export interface RadarChartProps extends CommonChartProps {
      * @default true
      */
     showAxisLine?: boolean;
+    /**
+     * Built-in item tooltip preset when `renderTooltip` is omitted. Use `none` to hide the overlay.
+     * @default 'card'
+     */
+    tooltip?: ChartTooltipOption;
+    /**
+     * Overrides the default React Native item tooltip body (see {@link RadarItemTooltipParams}).
+     * Takes precedence over {@link tooltip}.
+     */
+    renderTooltip?: (params: RadarItemTooltipParams) => ReactNode;
     /**
      * Called when the user selects (taps/clicks) a radar series polygon.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"radar-chart.props.d.ts","sourceRoot":"","sources":["../../../../components/chart/radar/radar-chart.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAExD,kEAAkE;AAClE,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,MAAM,MAAM,eAAe,GACvB,MAAM,EAAE,GACR,KAAK,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC,CAAC;AAE9C;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD;;;OAGG;IACH,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IACtG;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IACzE;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACnD"}
+{"version":3,"file":"radar-chart.props.d.ts","sourceRoot":"","sources":["../../../../components/chart/radar/radar-chart.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AACjF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,kEAAkE;AAClE,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,MAAM,MAAM,eAAe,GACvB,MAAM,EAAE,GACR,KAAK,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC,CAAC;AAE9C;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD;;;OAGG;IACH,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IACtG;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IACzE;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,SAAS,CAAC;IAC9D;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACnD"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"default-radar-tooltip.d.ts","sourceRoot":"","sources":["../../../../../components/chart/radar/tooltip/default-radar-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAEzE,wDAAwD;AACxD,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,GACjC,CAAC,MAAM,EAAE,sBAAsB,KAAK,KAAK,CAAC,YAAY,CA+BxD"}

package/radar/tooltip/default-radar-tooltip.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+/** Themed default radar item tooltip (React Native). */
+export function createDefaultRadarTooltip(theme) {
+    const t = theme.tooltip;
+    return function DefaultRadarTooltip(params) {
+        const { seriesName, dimensionValues, 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: 6 }}>
+          {color != null && color !== '' ? (<View style={[styles.swatch, { backgroundColor: color }]}/>) : (<View style={styles.swatchPlaceholder}/>)}
+          <Text style={[styles.title, { color: t.labelColor }]}>{seriesName}</Text>
+        </View>
+        {dimensionValues.map((d) => (<Text key={d.indicatorName} style={[styles.line, { color: t.valueColor }]}>
+            <Text style={{ color: t.labelColor }}>{d.indicatorName}: </Text>
+            {Number.isFinite(d.value) ? String(d.value) : '—'}
+          </Text>))}
+      </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/radar/tooltip/index.d.ts

@@ -0,0 +1,7 @@
+export { createDefaultRadarTooltip } from './default-radar-tooltip';
+export { createRadarTooltipPreset } from './radar-item-tooltip-presets';
+export type { RadarItemTooltipContext, RadarItemTooltipDimension, RadarItemTooltipParams, } from './radar-item-tooltip.types';
+export { radarItemParamsFromShowTip } from './radar-item-tooltip.utils';
+export { useRadarItemTooltip } from './use-radar-item-tooltip';
+export type { UseRadarItemTooltipOptions, UseRadarItemTooltipResult } from './use-radar-item-tooltip';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/chart/radar/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxE,YAAY,EACV,uBAAuB,EACvB,yBAAyB,EACzB,sBAAsB,GACvB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,YAAY,EAAE,0BAA0B,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC"}

package/radar/tooltip/index.js

@@ -0,0 +1,4 @@
+export { createDefaultRadarTooltip } from './default-radar-tooltip';
+export { createRadarTooltipPreset } from './radar-item-tooltip-presets';
+export { radarItemParamsFromShowTip } from './radar-item-tooltip.utils';
+export { useRadarItemTooltip } from './use-radar-item-tooltip';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"radar-item-tooltip-presets.d.ts","sourceRoot":"","sources":["../../../../../components/chart/radar/tooltip/radar-item-tooltip-presets.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAOxD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAqEzE,wBAAgB,wBAAwB,CACtC,MAAM,EAAE,kBAAkB,GACzB,CAAC,MAAM,EAAE,sBAAsB,KAAK,KAAK,CAAC,YAAY,CAYxD"}

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { TooltipPresetCard, TooltipPresetCompact, TooltipPresetKpi, TooltipPresetStriped, } from '../../tooltip/chart-tooltip-preset-shells';
+function radarCardFromParams(p) {
+    const { seriesName, dimensionValues, color } = p;
+    return (<TooltipPresetCard header={{ swatchColor: color, title: seriesName }} keyValueRows={dimensionValues.map((d) => ({
+            key: d.indicatorName,
+            left: d.indicatorName,
+            right: String(d.value),
+        }))}/>);
+}
+function radarCompactFromParams(p) {
+    const { seriesName, dimensionValues } = p;
+    const avg = dimensionValues.length > 0
+        ? dimensionValues.reduce((s, d) => s + (Number.isFinite(d.value) ? d.value : 0), 0) / dimensionValues.length
+        : 0;
+    return (<TooltipPresetCompact emphasis={seriesName} detail={`avg ${avg.toFixed(1)} · ${dimensionValues.length} axes`} wrap/>);
+}
+function radarKpiFromParams(p) {
+    const { seriesName, dimensionValues, color } = p;
+    const primary = dimensionValues[0];
+    const rest = dimensionValues.slice(1);
+    return (<TooltipPresetKpi accentColor={color ?? '#3b82f6'} minWidth={160} overline={seriesName} metric={primary != null ? String(primary.value) : ''} caption={primary?.indicatorName} footerRows={rest.length > 0
+            ? rest.map((d) => ({
+                key: d.indicatorName,
+                left: d.indicatorName,
+                right: String(d.value),
+            }))
+            : undefined}/>);
+}
+function radarStripedFromParams(p) {
+    const { seriesName, dimensionValues, color } = p;
+    return (<TooltipPresetStriped headerSwatch={{ color: color ?? '#64748b', title: seriesName }} rows={dimensionValues.map((d) => ({
+            key: d.indicatorName,
+            leftLabel: d.indicatorName,
+            right: String(d.value),
+        }))}/>);
+}
+export function createRadarTooltipPreset(preset) {
+    switch (preset) {
+        case 'card':
+            return (p) => radarCardFromParams(p);
+        case 'compact':
+            return (p) => radarCompactFromParams(p);
+        case 'kpi':
+            return (p) => radarKpiFromParams(p);
+        case 'striped':
+            return (p) => radarStripedFromParams(p);
+    }
+    throw new Error(`Unknown tooltip preset: ${String(preset)}`);
+}

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

@@ -0,0 +1,28 @@
+/**
+ * Item tooltip for radar (`trigger: 'item'`, one ECharts radar series with multiple polygons).
+ */
+export interface RadarItemTooltipDimension {
+    indicatorName: string;
+    value: number;
+}
+export interface RadarItemTooltipParams {
+    pointerX: number;
+    pointerY: number;
+    /** ECharts series index (typically `0` for a single radar series). */
+    seriesIndex: number;
+    /** Index of the hovered polygon / named series row. */
+    dataIndex: number;
+    seriesName: string;
+    dimensionValues: RadarItemTooltipDimension[];
+    color?: string;
+}
+export interface RadarItemTooltipContext {
+    indicators: Array<{
+        name: string;
+    }>;
+    normalizedSeries: Array<{
+        name: string;
+        value: number[];
+    }>;
+}
+//# sourceMappingURL=radar-item-tooltip.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radar-item-tooltip.types.d.ts","sourceRoot":"","sources":["../../../../../components/chart/radar/tooltip/radar-item-tooltip.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,yBAAyB;IACxC,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,sEAAsE;IACtE,WAAW,EAAE,MAAM,CAAC;IACpB,uDAAuD;IACvD,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,yBAAyB,EAAE,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,uBAAuB;IACtC,UAAU,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpC,gBAAgB,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,CAAC;CAC5D"}

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

@@ -0,0 +1,3 @@
+/**
+ * Item tooltip for radar (`trigger: 'item'`, one ECharts radar series with multiple polygons).
+ */

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

@@ -0,0 +1,9 @@
+import type { RadarItemTooltipContext, RadarItemTooltipParams } from './radar-item-tooltip.types';
+/**
+ * Build radar item tooltip params from an ECharts `showTip` payload.
+ * Ignores axis-style payloads (`dataByCoordSys`).
+ */
+export declare function radarItemParamsFromShowTip(chart: any, evt: any, ctx: RadarItemTooltipContext, themeSeries: Array<{
+    color: string;
+}>): RadarItemTooltipParams | null;
+//# sourceMappingURL=radar-item-tooltip.utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radar-item-tooltip.utils.d.ts","sourceRoot":"","sources":["../../../../../components/chart/radar/tooltip/radar-item-tooltip.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAwBlG;;;GAGG;AACH,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,GAAG,EACV,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,uBAAuB,EAC5B,WAAW,EAAE,KAAK,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,GACpC,sBAAsB,GAAG,IAAI,CAoD/B"}

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

@@ -0,0 +1,77 @@
+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 pointerFromEventOrCenter(chart, evt) {
+    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 };
+    }
+    const w = typeof chart?.getWidth === 'function' ? chart.getWidth() : 0;
+    const h = typeof chart?.getHeight === 'function' ? chart.getHeight() : 0;
+    return { x: w > 0 ? w / 2 : 0, y: h > 0 ? h / 2 : 0 };
+}
+/**
+ * Build radar item tooltip params from an ECharts `showTip` payload.
+ * Ignores axis-style payloads (`dataByCoordSys`).
+ */
+export function radarItemParamsFromShowTip(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;
+    const seriesModel = chart.getModel?.().getSeriesByIndex?.(si);
+    const seriesKind = seriesModel?.subType ?? seriesModel?.get?.('type');
+    if (!seriesModel || seriesKind !== 'radar')
+        return null;
+    const data = seriesModel.getData?.();
+    if (!data)
+        return null;
+    const diInside = resolveDataIndexInside(data, evt);
+    if (diInside == null || diInside < 0)
+        return null;
+    const row = ctx.normalizedSeries[diInside];
+    if (!row?.value?.length)
+        return null;
+    const pixel = pointerFromEventOrCenter(chart, evt);
+    const seriesName = String(data.getName?.(diInside) ?? row.name ?? '') || `Series ${diInside + 1}`;
+    const dimensionValues = ctx.indicators.map((ind, i) => ({
+        indicatorName: ind.name,
+        value: Number(row.value[i]),
+    }));
+    let color;
+    try {
+        const style = data.getItemVisual?.(diInside, 'style');
+        const stroke = style?.stroke;
+        const fill = style?.fill;
+        if (typeof stroke === 'string' && stroke !== '')
+            color = stroke;
+        else if (typeof fill === 'string' && fill !== '')
+            color = fill;
+    }
+    catch {
+        /* ignore */
+    }
+    if (color == null) {
+        const themeLen = Math.max(themeSeries.length, 1);
+        color = themeSeries[diInside % themeLen]?.color;
+    }
+    return {
+        pointerX: pixel.x,
+        pointerY: pixel.y,
+        seriesIndex: si,
+        dataIndex: diInside,
+        seriesName,
+        dimensionValues,
+        ...(typeof color === 'string' ? { color } : {}),
+    };
+}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { RadarItemTooltipContext, RadarItemTooltipParams } from './radar-item-tooltip.types';
+export interface UseRadarItemTooltipOptions {
+    active: boolean;
+    renderTooltip: (params: RadarItemTooltipParams) => React.ReactNode;
+    contextRef: React.RefObject<RadarItemTooltipContext>;
+    themeSeriesRef: React.RefObject<Array<{
+        color: string;
+    }>>;
+    width: number;
+    height: number;
+}
+export interface UseRadarItemTooltipResult {
+    attachRadarItemTooltipListeners: (chart: {
+        on: (ev: string, fn: (...args: any[]) => void) => void;
+        off: (ev: string, fn: (...args: any[]) => void) => void;
+    }) => () => void;
+    renderRadarTooltipOverlay: () => React.ReactNode;
+}
+/** Radar polygon item tooltip as React Native UI (`trigger: 'item'`). */
+export declare function useRadarItemTooltip(options: UseRadarItemTooltipOptions): UseRadarItemTooltipResult;
+//# sourceMappingURL=use-radar-item-tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-radar-item-tooltip.d.ts","sourceRoot":"","sources":["../../../../../components/chart/radar/tooltip/use-radar-item-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAGlG,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC;IACnE,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAC;IACrD,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,yBAAyB;IACxC,+BAA+B,EAAE,CAAC,KAAK,EAAE;QACvC,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,yBAAyB,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CAClD;AAED,yEAAyE;AACzE,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,0BAA0B,GAAG,yBAAyB,CAiDlG"}

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

@@ -0,0 +1,43 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { ChartPointerTooltipOverlay } from '../../tooltip/chart-pointer-tooltip-overlay';
+import { radarItemParamsFromShowTip } from './radar-item-tooltip.utils';
+/** Radar polygon item tooltip as React Native UI (`trigger: 'item'`). */
+export function useRadarItemTooltip(options) {
+    const { active, renderTooltip, contextRef, themeSeriesRef, width, height } = options;
+    const [params, setParams] = useState(null);
+    useEffect(() => {
+        if (!active)
+            setParams(null);
+    }, [active]);
+    const attachRadarItemTooltipListeners = useCallback((chart) => {
+        if (!active)
+            return () => { };
+        const onShowTip = (evt) => {
+            const ctx = contextRef.current;
+            if (!ctx?.normalizedSeries?.length || !ctx.indicators?.length) {
+                setParams(null);
+                return;
+            }
+            const next = radarItemParamsFromShowTip(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 renderRadarTooltipOverlay = 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 {
+        attachRadarItemTooltipListeners,
+        renderRadarTooltipOverlay,
+    };
+}

package/radial/index.d.ts

@@ -1,3 +1,4 @@
 export { RadialChart } from './radial-chart';
 export type { RadialChartProps, RadialChartSelectEvent, RadialDataItem, } from './radial-chart.props';
+export * from './tooltip';
 //# sourceMappingURL=index.d.ts.map

package/radial/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/chart/radial/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EACV,gBAAgB,EAChB,sBAAsB,EACtB,cAAc,GACf,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/chart/radial/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EACV,gBAAgB,EAChB,sBAAsB,EACtB,cAAc,GACf,MAAM,sBAAsB,CAAC;AAC9B,cAAc,WAAW,CAAC"}

package/radial/index.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"radial-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/radial/radial-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAA0C,MAAM,sBAAsB,CAAC;AAKrG,OAAO,KAAqC,MAAM,OAAO,CAAC;AAG1D,YAAY,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AA4QrG,eAAO,MAAM,WAAW;;;;;;;CAEtB,CAAC"}
+{"version":3,"file":"radial-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/radial/radial-chart.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAA0C,MAAM,sBAAsB,CAAC;AAQrG,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,YAAY,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AA0SrG,eAAO,MAAM,WAAW;;;;;;;CAEtB,CAAC"}

package/radial/radial-chart.js

@@ -1,10 +1,14 @@
 import { withResponsiveContainer } from '../chart-container';
 import { useChartTheme, withChartTheme } from '../chart-theme.context';
+import { axisTooltipShowContentFlag } from '../cartesian/tooltip';
+import { echartsLegendLayoutFragment } from '../legend/echarts-legend-layout';
+import { createRadialTooltipPreset, useRadialItemTooltip } from './tooltip';
 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';
+import { View } from 'react-native';
 echarts.use([TooltipComponent, TitleComponent, LegendComponent, SkiaRenderer, EChartsPieChart]);
 /** Percent of height reserved for horizontal legend (top/bottom) to avoid overlap */
 const LEGEND_RESERVE_PCT = 22;
@@ -20,12 +24,30 @@ const DEFAULT_RING_COLORS = [
     '#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 ChartComponent = ({ data, width = 220, height = 350, innerRadius = '20%', backgroundColor = '#e8e8e899', centerText, centerSubtext, showLegend = true, legendPosition = 'bottom', startAngle = 0, clockwise = false, ringGap = '4%', tooltip = 'card', renderTooltip, onSelect, ...props }) => {
     const { theme } = useChartTheme(props.theme, props.colors);
     const chartRef = useRef(null);
     const onSelectRef = useRef(onSelect);
     onSelectRef.current = onSelect;
-    const selectContextRef = useRef([]);
+    const radialContextRef = 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 createRadialTooltipPreset(tooltip);
+    }, [renderTooltip, tooltip]);
+    const { attachRadialItemTooltipListeners, renderRadialTooltipOverlay } = useRadialItemTooltip({
+        active: tooltipOverlayActive,
+        renderTooltip: renderTooltipFn,
+        contextRef: radialContextRef,
+        themeSeriesRef,
+        width,
+        height,
+    });
     const normalizedData = useMemo(() => {
         if (!Array.isArray(data) || data.length === 0)
             return [];
@@ -34,7 +56,7 @@ const ChartComponent = ({ data, width = 220, height = 350, innerRadius = '20%',
             value: Math.min(100, Math.max(0, Number(d.value))),
         }));
     }, [data]);
-    selectContextRef.current = normalizedData;
+    radialContextRef.current = { normalizedSeries: normalizedData };
     const option = useMemo(() => {
         if (normalizedData.length === 0)
             return { series: [] };
@@ -109,6 +131,7 @@ const ChartComponent = ({ data, width = 220, height = 350, innerRadius = '20%',
                 label: { show: false },
                 labelLine: { show: false },
                 emphasis: {
+                    focus: 'none',
                     scale: false,
                     itemStyle: {
                         shadowBlur: 8,
@@ -119,23 +142,21 @@ const ChartComponent = ({ data, width = 220, height = 350, innerRadius = '20%',
             };
         });
         const legendData = normalizedData.map((item, index) => `${item.label ?? `Ring ${index + 1}`} (${item.value}%)`);
-        const config = {
-            tooltip: {
+        const tooltipConfig = tooltipOverlayActive
+            ? {
                 trigger: 'item',
-                formatter: (params) => params.name ? params.name : '',
-            },
+                ...axisTooltipShowContentFlag(true),
+            }
+            : { show: false };
+        const config = {
+            tooltip: tooltipConfig,
             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 }),
+                ...echartsLegendLayoutFragment(legendPosition),
                 textStyle: {
                     color: theme.legend?.textColor ?? '#333333',
                     fontSize: theme.legend?.fontSize ?? 11,
@@ -176,9 +197,11 @@ const ChartComponent = ({ data, width = 220, height = 350, innerRadius = '20%',
         clockwise,
         ringGap,
         props.colors,
+        tooltipOverlayActive,
     ]);
     useEffect(() => {
         let chart;
+        let detachRadialTooltip = () => { };
         if (chartRef.current) {
             try {
                 chart = echarts.init(chartRef.current, 'light', {
@@ -186,6 +209,7 @@ const ChartComponent = ({ data, width = 220, height = 350, innerRadius = '20%',
                     height,
                 });
                 chart.setOption(option);
+                detachRadialTooltip = attachRadialItemTooltipListeners(chart);
                 const handlePieClick = (params) => {
                     const cb = onSelectRef.current;
                     if (typeof cb !== 'function')
@@ -199,7 +223,7 @@ const ChartComponent = ({ data, width = 220, height = 350, innerRadius = '20%',
                     const ringIndex = params.seriesIndex;
                     if (typeof ringIndex !== 'number' || ringIndex < 0)
                         return;
-                    const row = selectContextRef.current[ringIndex];
+                    const row = radialContextRef.current.normalizedSeries[ringIndex];
                     if (!row)
                         return;
                     const event = {
@@ -217,6 +241,7 @@ const ChartComponent = ({ data, width = 220, height = 350, innerRadius = '20%',
             }
         }
         return () => {
+            detachRadialTooltip();
             if (chart) {
                 try {
                     chart.dispose();
@@ -226,8 +251,11 @@ const ChartComponent = ({ data, width = 220, height = 350, innerRadius = '20%',
                 }
             }
         };
-    }, [option, width, height]);
-    return <SkiaChart ref={chartRef} useRNGH/>;
+    }, [option, width, height, attachRadialItemTooltipListeners]);
+    return (<View style={{ width, height, position: 'relative' }}>
+      <SkiaChart ref={chartRef} useRNGH/>
+      {renderRadialTooltipOverlay()}
+    </View>);
 };
 const RadialChartComponent = withResponsiveContainer(withChartTheme(ChartComponent));
 export const RadialChart = Object.assign(RadialChartComponent, {

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

@@ -1,4 +1,7 @@
-import type { CommonChartProps } from '../props/common';
+import type { CommonChartProps, LegendPosition } from '../props/common';
+import type { ChartTooltipOption } from '../tooltip';
+import type { RadialItemTooltipParams } from './tooltip/radial-item-tooltip.types';
+import type { ReactNode } from 'react';
 /** Emitted when the user taps/clicks a ring’s filled segment. */
 export interface RadialChartSelectEvent {
     seriesIndex: number;
@@ -8,7 +11,7 @@ export interface RadialChartSelectEvent {
 }
 /**
  * Single data item for radial chart: one concentric ring.
- * value = fill percentage (0–100) for that ring; label optional (tooltip).
+ * value = fill percentage (0–100) for that ring; label optional (legend / tooltip).
  */
 export interface RadialDataItem {
     label?: string;
@@ -65,7 +68,17 @@ export interface RadialChartProps extends CommonChartProps {
      * Position of the legend.
      * @default 'bottom'
      */
-    legendPosition?: 'left' | 'right' | 'top' | 'bottom';
+    legendPosition?: LegendPosition;
+    /**
+     * Built-in item tooltip preset when `renderTooltip` is omitted. Use `none` to hide the overlay.
+     * @default 'card'
+     */
+    tooltip?: ChartTooltipOption;
+    /**
+     * Overrides the default React Native item tooltip body (see {@link RadialItemTooltipParams}).
+     * Takes precedence over {@link tooltip}.
+     */
+    renderTooltip?: (params: RadialItemTooltipParams) => ReactNode;
     /**
      * Called when the user selects (taps/clicks) a ring’s value segment.
      */

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

@@ -1 +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"}
+{"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,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AACnF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,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,cAAc,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,uBAAuB,KAAK,SAAS,CAAC;IAC/D;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAC;CACpD"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"default-radial-tooltip.d.ts","sourceRoot":"","sources":["../../../../../components/chart/radial/tooltip/default-radial-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAE3E,yDAAyD;AACzD,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,GACjC,CAAC,MAAM,EAAE,uBAAuB,KAAK,KAAK,CAAC,YAAY,CAkCzD"}