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

package/index.d.ts

@@ -1,4 +1,6 @@
 export type { CartesianChartSelectEvent } from './props/cartesian';
+export * from './cartesian/tooltip';
+export * from './tooltip';
 export * from './area';
 export * from './bar';
 export * from './column';

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/chart/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/chart/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC"}

package/index.js

@@ -1,3 +1,5 @@
+export * from './cartesian/tooltip';
+export * from './tooltip';
 export * from './area';
 export * from './bar';
 export * from './column';

package/legend/echarts-legend-layout.d.ts

@@ -0,0 +1,20 @@
+import type { LegendPosition } from '../props/common';
+import type { CartesianGrid } from '../props/cartesian';
+/**
+ * Merges optional user `grid` with margins so the plot area clears the legend.
+ * Only adds a side when the user has not set that side on `grid`.
+ */
+export declare function mergeCartesianGridForLegend(userGrid: CartesianGrid | undefined, legendPosition: LegendPosition, showLegend: boolean, hasLegendContent: boolean): CartesianGrid | undefined;
+/** Shifts radar center / radius so a vertical legend does not cover the chart. */
+export declare function radarGeometryForLegend(legendPosition: LegendPosition, showLegend: boolean, hasLegend: boolean): {
+    center?: [string, string];
+    radius?: string;
+};
+/**
+ * ECharts legend fields: horizontal (top/bottom) with width so items wrap;
+ * vertical (left/right) in a single column.
+ */
+export declare function echartsLegendLayoutFragment(legendPosition: LegendPosition): Record<string, unknown>;
+/** Shifts pie center slightly when a side legend is shown so slices do not overlap the legend. */
+export declare function pieCenterForLegend(legendPosition: LegendPosition, showLegend: boolean): [string, string] | undefined;
+//# sourceMappingURL=echarts-legend-layout.d.ts.map

package/legend/echarts-legend-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"echarts-legend-layout.d.ts","sourceRoot":"","sources":["../../../../components/chart/legend/echarts-legend-layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAQxD;;;GAGG;AACH,wBAAgB,2BAA2B,CACzC,QAAQ,EAAE,aAAa,GAAG,SAAS,EACnC,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,OAAO,EACnB,gBAAgB,EAAE,OAAO,GACxB,aAAa,GAAG,SAAS,CA2B3B;AAED,kFAAkF;AAClF,wBAAgB,sBAAsB,CACpC,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,OAAO,EACnB,SAAS,EAAE,OAAO,GACjB;IAAE,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAYhD;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,cAAc,EAAE,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CA8BnG;AAED,kGAAkG;AAClG,wBAAgB,kBAAkB,CAChC,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,OAAO,GAClB,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAa9B"}

package/legend/echarts-legend-layout.js

@@ -0,0 +1,103 @@
+/** Grid margin (% of width) reserved when the legend is vertical on the left or right. */
+const GRID_LEGEND_SIDE_PCT = '32%';
+/** Extra grid margin (px) when the legend is horizontal at the top or bottom. */
+const GRID_LEGEND_TOP_BOTTOM_PX = 84;
+/**
+ * Merges optional user `grid` with margins so the plot area clears the legend.
+ * Only adds a side when the user has not set that side on `grid`.
+ */
+export function mergeCartesianGridForLegend(userGrid, legendPosition, showLegend, hasLegendContent) {
+    if (!showLegend || !hasLegendContent) {
+        return userGrid;
+    }
+    const patch = {};
+    switch (legendPosition) {
+        case 'left':
+            if (userGrid?.left === undefined)
+                patch.left = GRID_LEGEND_SIDE_PCT;
+            break;
+        case 'right':
+            if (userGrid?.right === undefined)
+                patch.right = GRID_LEGEND_SIDE_PCT;
+            break;
+        case 'top':
+            if (userGrid?.top === undefined)
+                patch.top = GRID_LEGEND_TOP_BOTTOM_PX;
+            break;
+        case 'bottom':
+        default:
+            if (userGrid?.bottom === undefined)
+                patch.bottom = GRID_LEGEND_TOP_BOTTOM_PX;
+            break;
+    }
+    if (Object.keys(patch).length === 0) {
+        return userGrid;
+    }
+    return { ...(userGrid ?? {}), ...patch };
+}
+/** Shifts radar center / radius so a vertical legend does not cover the chart. */
+export function radarGeometryForLegend(legendPosition, showLegend, hasLegend) {
+    if (!showLegend || !hasLegend)
+        return {};
+    switch (legendPosition) {
+        case 'left':
+            return { center: ['60%', '50%'], radius: '54%' };
+        case 'right':
+            return { center: ['40%', '50%'], radius: '54%' };
+        case 'top':
+        case 'bottom':
+        default:
+            return {};
+    }
+}
+/**
+ * ECharts legend fields: horizontal (top/bottom) with width so items wrap;
+ * vertical (left/right) in a single column.
+ */
+export function echartsLegendLayoutFragment(legendPosition) {
+    switch (legendPosition) {
+        case 'left':
+            return {
+                orient: 'vertical',
+                top: 'middle',
+                left: 8,
+            };
+        case 'right':
+            return {
+                orient: 'vertical',
+                top: 'middle',
+                right: 8,
+            };
+        case 'top':
+            return {
+                orient: 'horizontal',
+                left: 'center',
+                width: '92%',
+                top: 8,
+            };
+        case 'bottom':
+        default:
+            return {
+                orient: 'horizontal',
+                left: 'center',
+                width: '92%',
+                bottom: 8,
+            };
+    }
+}
+/** Shifts pie center slightly when a side legend is shown so slices do not overlap the legend. */
+export function pieCenterForLegend(legendPosition, showLegend) {
+    if (!showLegend)
+        return undefined;
+    switch (legendPosition) {
+        case 'top':
+            return ['50%', '54%'];
+        case 'left':
+            return ['56%', '50%'];
+        case 'right':
+            return ['44%', '50%'];
+        case 'bottom':
+        default:
+            return undefined;
+    }
+}

package/line/index.d.ts

@@ -1,3 +1,3 @@
 export { LineChart } from './line-chart';
-export type { LineChartProps } from './line-chart.props';
+export type { LineChartProps, LineChartAxisTooltipParams, LineChartTooltipSeriesItem, } from './line-chart.props';
 //# sourceMappingURL=index.d.ts.map

package/line/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/chart/line/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/chart/line/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,YAAY,EACV,cAAc,EACd,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,oBAAoB,CAAC"}

package/line/line-chart.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { LineChartProps } from './line-chart.props';
 /** common -> cartesian -> area -> line */
-export type { LineChartProps } from './line-chart.props';
+export type { LineChartProps, LineChartAxisTooltipParams, LineChartTooltipSeriesItem, } from './line-chart.props';
 declare function LineChartComponent(props: LineChartProps): React.JSX.Element;
 export declare const LineChart: typeof LineChartComponent & {
     displayName: string;

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

@@ -1 +1 @@
-{"version":3,"file":"line-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/line/line-chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,0CAA0C;AAC1C,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,iBAAS,kBAAkB,CAAC,KAAK,EAAE,cAAc,qBAEhD;AAED,eAAO,MAAM,SAAS;;CAEpB,CAAC"}
+{"version":3,"file":"line-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/line/line-chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,0CAA0C;AAC1C,YAAY,EACV,cAAc,EACd,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,oBAAoB,CAAC;AAE5B,iBAAS,kBAAkB,CAAC,KAAK,EAAE,cAAc,qBAEhD;AAED,eAAO,MAAM,SAAS;;CAEpB,CAAC"}

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

@@ -1,5 +1,6 @@
 import type { AreaChartProps } from '../area/area-chart.props';
 import type { CartesianChartSelectEvent } from '../props/cartesian';
+import type { AxisTooltipParams, AxisTooltipSeriesItem } from '../cartesian/tooltip/axis-tooltip.types';
 /**
  * Props for LineChart.
  * Line chart is AreaChart with no fill (areaOpacity=0, areaFill='transparent').
@@ -7,6 +8,10 @@ import type { CartesianChartSelectEvent } from '../props/cartesian';
  * common -> cartesian -> area -> line
  */
 export type LineChartProps = Omit<AreaChartProps, 'areaOpacity' | 'areaFill'>;
+/** Per-series row in axis tooltip params for {@link LineChartProps#renderTooltip}. */
+export type LineChartTooltipSeriesItem = AxisTooltipSeriesItem;
+/** Axis tooltip params for {@link LineChartProps#renderTooltip}. */
+export type LineChartAxisTooltipParams = AxisTooltipParams;
 /** Selection payload for {@link LineChartProps} / `onSelect` (same as {@link CartesianChartSelectEvent}). */
 export type LineChartSelectEvent = CartesianChartSelectEvent;
 //# sourceMappingURL=line-chart.props.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"line-chart.props.d.ts","sourceRoot":"","sources":["../../../../components/chart/line/line-chart.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAEpE;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,EAAE,aAAa,GAAG,UAAU,CAAC,CAAC;AAE9E,6GAA6G;AAC7G,MAAM,MAAM,oBAAoB,GAAG,yBAAyB,CAAC"}
+{"version":3,"file":"line-chart.props.d.ts","sourceRoot":"","sources":["../../../../components/chart/line/line-chart.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAExG;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,EAAE,aAAa,GAAG,UAAU,CAAC,CAAC;AAE9E,sFAAsF;AACtF,MAAM,MAAM,0BAA0B,GAAG,qBAAqB,CAAC;AAE/D,oEAAoE;AACpE,MAAM,MAAM,0BAA0B,GAAG,iBAAiB,CAAC;AAE3D,6GAA6G;AAC7G,MAAM,MAAM,oBAAoB,GAAG,yBAAyB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wavemaker/react-native-echarts",
-  "version": "1.0.0-dev.1",
+  "version": "1.0.0-dev.10",
   "description": "React Native chart components built on using e-charts library.",
   "license": "MIT",
   "repository": {
@@ -33,11 +33,14 @@
     "react": "*",
     "react-native": "*",
     "@shopify/react-native-skia": "*",
-    "@wuba/react-native-echarts": "*",
-    "echarts": "*",
+    "@wuba/react-native-echarts": "^3.0.1",
+    "echarts": "^6.0.0",
     "zrender": "*",
     "react-native-svg": "*"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@wuba/react-native-echarts": "^3.0.1",
+    "echarts": "^6.0.0"
+  },
   "private": false
 }

package/pie/index.d.ts

@@ -1,4 +1,5 @@
 export { PieChart } from './pie-chart';
 export { isConcentricPieData } from './pie-chart.props';
 export type { PieChartProps, PieChartData, PieChartSelectEvent, PieDataItem, PieRingData, } from './pie-chart.props';
+export * from './tooltip';
 //# sourceMappingURL=index.d.ts.map

package/pie/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/chart/pie/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EACV,aAAa,EACb,YAAY,EACZ,mBAAmB,EACnB,WAAW,EACX,WAAW,GACZ,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/chart/pie/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EACV,aAAa,EACb,YAAY,EACZ,mBAAmB,EACnB,WAAW,EACX,WAAW,GACZ,MAAM,mBAAmB,CAAC;AAC3B,cAAc,WAAW,CAAC"}

package/pie/index.js

@@ -1,2 +1,3 @@
 export { PieChart } from './pie-chart';
 export { isConcentricPieData } from './pie-chart.props';
+export * from './tooltip';

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

@@ -1 +1 @@
-{"version":3,"file":"pie-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/pie/pie-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,aAAa,EAId,MAAM,mBAAmB,CAAC;AAS3B,OAAO,KAAqC,MAAM,OAAO,CAAC;AAG1D,YAAY,EACV,aAAa,EACb,mBAAmB,EACnB,WAAW,EACX,WAAW,EACX,YAAY,GACb,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAmQxD,eAAO,MAAM,QAAQ;;;;;;;CAEnB,CAAC"}
+{"version":3,"file":"pie-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/pie/pie-chart.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,aAAa,EAId,MAAM,mBAAmB,CAAC;AAY3B,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,YAAY,EACV,aAAa,EACb,mBAAmB,EACnB,WAAW,EACX,WAAW,EACX,YAAY,GACb,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AA4RxD,eAAO,MAAM,QAAQ;;;;;;;CAEnB,CAAC"}

package/pie/pie-chart.js

@@ -1,11 +1,15 @@
 import { withResponsiveContainer } from '../chart-container';
 import { useChartTheme, withChartTheme } from '../chart-theme.context';
+import { axisTooltipShowContentFlag } from '../cartesian/tooltip';
 import { isConcentricPieData } from './pie-chart.props';
+import { echartsLegendLayoutFragment, pieCenterForLegend } from '../legend/echarts-legend-layout';
+import { createPieTooltipPreset, usePieItemTooltip } from './tooltip';
 import { SkiaChart, SkiaRenderer } from '@wuba/react-native-echarts';
 import { PieChart as EChartsPieChart } from 'echarts/charts';
 import { LegendComponent, TooltipComponent, } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import React, { useEffect, useMemo, useRef } from 'react';
+import { View } from 'react-native';
 export { isConcentricPieData } from './pie-chart.props';
 echarts.use([
     TooltipComponent,
@@ -13,11 +17,44 @@ echarts.use([
     SkiaRenderer,
     EChartsPieChart,
 ]);
-const ChartComponent = ({ data, width = 220, height = 350, radius = '75%', showLegend = false, showLabel = true, labelPosition = 'outside', showLabelLine = true, showHighlighter = true, tooltipFormatter, onSelect, ...props }) => {
+const ChartComponent = ({ data, width = 220, height = 350, radius = '75%', showLegend = true, legendPosition = 'bottom', showLabel = true, labelPosition = 'outside', showLabelLine = true, showHighlighter = true, tooltip = 'card', renderTooltip, onSelect, ...props }) => {
     const { theme } = useChartTheme(props.theme, props.colors);
     const chartRef = useRef(null);
     const onSelectRef = useRef(onSelect);
     onSelectRef.current = onSelect;
+    const pieContextRef = 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 createPieTooltipPreset(tooltip);
+    }, [renderTooltip, tooltip]);
+    const { attachPieItemTooltipListeners, renderPieTooltipOverlay } = usePieItemTooltip({
+        active: tooltipOverlayActive,
+        renderTooltip: renderTooltipFn,
+        contextRef: pieContextRef,
+        themeSeriesRef,
+        width,
+        height,
+    });
+    const normalizedSeries = useMemo(() => {
+        if (!Array.isArray(data) || data.length === 0)
+            return [];
+        if (isConcentricPieData(data)) {
+            const rings = data;
+            return rings.map((ring) => ({
+                name: ring.name,
+                data: ring.data.map((d) => ({ name: d.name, value: d.value })),
+            }));
+        }
+        const flat = data;
+        return [{ data: flat.map((d) => ({ name: d.name, value: d.value })) }];
+    }, [data]);
+    pieContextRef.current = { normalizedSeries };
     const option = useMemo(() => {
         if (!Array.isArray(data) || data.length === 0) {
             return { series: [] };
@@ -27,7 +64,7 @@ const ChartComponent = ({ data, width = 220, height = 350, radius = '75%', showL
             color: theme.legend.textColor,
             fontSize: theme.legend.fontSize,
         };
-        const buildSeriesConfig = (pieData, seriesRadius, ringName) => {
+        const buildSeriesConfig = (pieData, seriesRadius, ringName, seriesCenter) => {
             const total = pieData.reduce((sum, d) => sum + d.value, 0);
             const labelConfig = showLabel
                 ? {
@@ -44,6 +81,7 @@ const ChartComponent = ({ data, width = 220, height = 350, radius = '75%', showL
                 type: 'pie',
                 name: ringName,
                 radius: Array.isArray(seriesRadius) ? seriesRadius : seriesRadius,
+                ...(seriesCenter ? { center: seriesCenter } : {}),
                 data: pieData,
                 label: labelConfig,
                 labelLine: {
@@ -52,6 +90,7 @@ const ChartComponent = ({ data, width = 220, height = 350, radius = '75%', showL
                 },
                 emphasis: showHighlighter
                     ? {
+                        focus: 'none',
                         scale: true,
                         scaleSize: 5,
                         itemStyle: {
@@ -65,6 +104,7 @@ const ChartComponent = ({ data, width = 220, height = 350, radius = '75%', showL
         };
         if (isConcentricPieData(data)) {
             const rings = data;
+            const pieSeriesCenter = pieCenterForLegend(legendPosition, showLegend);
             let colorIndex = 0;
             const seriesConfigs = rings.map((ring) => {
                 const pieData = ring.data.map((item) => ({
@@ -74,37 +114,25 @@ const ChartComponent = ({ data, width = 220, height = 350, radius = '75%', showL
                         ? { color: item.itemStyle.color }
                         : { color: seriesColors[colorIndex++ % seriesColors.length] },
                 }));
-                return buildSeriesConfig(pieData, ring.radius, ring.name);
+                return buildSeriesConfig(pieData, ring.radius, ring.name, pieSeriesCenter);
             });
             const legendData = showLegend
                 ? Array.from(new Set(rings.flatMap((r) => r.data.map((d) => d.name))))
                 : undefined;
-            const tooltipConfig = {
-                trigger: 'item',
-                backgroundColor: theme.tooltip.backgroundColor,
-                borderColor: theme.tooltip.borderColor,
-                borderWidth: theme.tooltip.borderWidth,
-                borderRadius: theme.tooltip.borderRadius,
-                padding: theme.tooltip.padding,
-                textStyle: { color: theme.tooltip.valueColor },
-                formatter: tooltipFormatter
-                    ? (params) => tooltipFormatter({
-                        name: params.name,
-                        value: params.value,
-                        percent: params.percent,
-                    })
-                    : undefined,
-            };
+            const tooltipConfig = tooltipOverlayActive
+                ? {
+                    trigger: 'item',
+                    ...axisTooltipShowContentFlag(true),
+                }
+                : { show: false };
             const config = {
                 tooltip: tooltipConfig,
                 series: seriesConfigs,
             };
             if (legendData?.length) {
                 config.legend = {
-                    orient: 'horizontal',
-                    left: 'center',
-                    bottom: 0,
                     data: legendData,
+                    ...echartsLegendLayoutFragment(legendPosition),
                     textStyle: labelStyle,
                     backgroundColor: theme.legend.backgroundColor,
                 };
@@ -119,29 +147,18 @@ const ChartComponent = ({ data, width = 220, height = 350, radius = '75%', showL
                 ? { color: item.itemStyle.color }
                 : { color: seriesColors[index % seriesColors.length] },
         }));
-        const seriesConfig = buildSeriesConfig(pieData, radius);
-        const tooltipConfig = {
-            trigger: 'item',
-            backgroundColor: theme.tooltip.backgroundColor,
-            borderColor: theme.tooltip.borderColor,
-            borderWidth: theme.tooltip.borderWidth,
-            borderRadius: theme.tooltip.borderRadius,
-            padding: theme.tooltip.padding,
-            textStyle: { color: theme.tooltip.valueColor },
-            formatter: tooltipFormatter
-                ? (params) => tooltipFormatter({
-                    name: params.name,
-                    value: params.value,
-                    percent: params.percent,
-                })
-                : undefined,
-        };
+        const pieSeriesCenter = pieCenterForLegend(legendPosition, showLegend);
+        const seriesConfig = buildSeriesConfig(pieData, radius, undefined, pieSeriesCenter);
+        const tooltipConfig = tooltipOverlayActive
+            ? {
+                trigger: 'item',
+                ...axisTooltipShowContentFlag(true),
+            }
+            : { show: false };
         const legendConfig = showLegend
             ? {
-                orient: 'horizontal',
-                left: 'center',
-                bottom: 0,
                 data: pieData.map((d) => d.name),
+                ...echartsLegendLayoutFragment(legendPosition),
                 textStyle: labelStyle,
                 backgroundColor: theme.legend.backgroundColor,
             }
@@ -158,15 +175,17 @@ const ChartComponent = ({ data, width = 220, height = 350, radius = '75%', showL
         data,
         radius,
         showLegend,
+        legendPosition,
         showLabel,
         labelPosition,
         showLabelLine,
         showHighlighter,
-        tooltipFormatter,
+        tooltipOverlayActive,
         theme,
     ]);
     useEffect(() => {
         let chart;
+        let detachPieTooltip = () => { };
         if (chartRef.current) {
             try {
                 chart = echarts.init(chartRef.current, 'light', {
@@ -174,6 +193,7 @@ const ChartComponent = ({ data, width = 220, height = 350, radius = '75%', showL
                     height,
                 });
                 chart.setOption(option);
+                detachPieTooltip = attachPieItemTooltipListeners(chart);
                 const handlePieClick = (params) => {
                     const cb = onSelectRef.current;
                     if (typeof cb !== 'function')
@@ -204,6 +224,7 @@ const ChartComponent = ({ data, width = 220, height = 350, radius = '75%', showL
             }
         }
         return () => {
+            detachPieTooltip();
             if (chart) {
                 try {
                     chart.dispose();
@@ -213,8 +234,11 @@ const ChartComponent = ({ data, width = 220, height = 350, radius = '75%', showL
                 }
             }
         };
-    }, [option, width, height]);
-    return <SkiaChart ref={chartRef} useRNGH/>;
+    }, [option, width, height, attachPieItemTooltipListeners]);
+    return (<View style={{ width, height, position: 'relative' }}>
+      <SkiaChart ref={chartRef} useRNGH/>
+      {renderPieTooltipOverlay()}
+    </View>);
 };
 const PieChartComponent = withResponsiveContainer(withChartTheme(ChartComponent), 'data');
 export const PieChart = Object.assign(PieChartComponent, {

package/pie/pie-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 { PieItemTooltipParams } from './tooltip/pie-item-tooltip.types';
+import type { ReactNode } from 'react';
 /** Emitted when the user taps/clicks a pie slice. */
 export interface PieChartSelectEvent {
     seriesIndex: number;
@@ -58,9 +61,14 @@ export interface PieChartProps extends CommonChartProps {
     radius?: number | string | (number | string)[];
     /**
      * Whether to show the legend for slices.
-     * @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 slice labels (name/value on the chart).
      * @default true
@@ -82,13 +90,16 @@ export interface PieChartProps extends CommonChartProps {
      */
     showHighlighter?: boolean;
     /**
-     * Formatter for tooltip. (params) => string. Params include name, value, percent.
+     * Built-in item tooltip preset when `renderTooltip` is omitted. Use `none` to hide the overlay.
+     * When `renderTooltip` is set, it replaces the preset body. Overlay hidden only when `tooltip` is `none` and `renderTooltip` is omitted.
+     * @default 'card'
+     */
+    tooltip?: ChartTooltipOption;
+    /**
+     * Overrides the default React Native **item** tooltip body for pie slices (see {@link PieItemTooltipParams}).
+     * Takes precedence over {@link tooltip}.
      */
-    tooltipFormatter?: (params: {
-        name: string;
-        value: number;
-        percent?: number;
-    }) => string;
+    renderTooltip?: (params: PieItemTooltipParams) => ReactNode;
     /**
      * Called when the user selects (taps/clicks) a slice.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"pie-chart.props.d.ts","sourceRoot":"","sources":["../../../../components/chart/pie/pie-chart.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAExD,qDAAqD;AACrD,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,SAAS,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAChC;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sFAAsF;IACtF,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC5B,gCAAgC;IAChC,IAAI,EAAE,WAAW,EAAE,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,WAAW,EAAE,GAAG,WAAW,EAAE,CAAC;AAEzD;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,YAAY,GACjB,IAAI,IAAI,WAAW,EAAE,CASvB;AAED;;;GAGG;AACH,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACrD;;OAEG;IACH,IAAI,EAAE,YAAY,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC/C;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAChD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;IACzF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACjD"}
+{"version":3,"file":"pie-chart.props.d.ts","sourceRoot":"","sources":["../../../../components/chart/pie/pie-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,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,qDAAqD;AACrD,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,SAAS,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAChC;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sFAAsF;IACtF,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC5B,gCAAgC;IAChC,IAAI,EAAE,WAAW,EAAE,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,WAAW,EAAE,GAAG,WAAW,EAAE,CAAC;AAEzD;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,YAAY,GACjB,IAAI,IAAI,WAAW,EAAE,CASvB;AAED;;;GAGG;AACH,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACrD;;OAEG;IACH,IAAI,EAAE,YAAY,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC/C;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAChD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,SAAS,CAAC;IAC5D;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACjD"}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ChartTheme } from '../../chart-theme.context';
+import type { PieItemTooltipParams } from './pie-item-tooltip.types';
+export declare function createDefaultPieTooltip(theme: Pick<ChartTheme, 'tooltip'>): (params: PieItemTooltipParams) => React.ReactElement;
+//# sourceMappingURL=default-pie-tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"default-pie-tooltip.d.ts","sourceRoot":"","sources":["../../../../../components/chart/pie/tooltip/default-pie-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAErE,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,GACjC,CAAC,MAAM,EAAE,oBAAoB,KAAK,KAAK,CAAC,YAAY,CAoCtD"}

package/pie/tooltip/default-pie-tooltip.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+export function createDefaultPieTooltip(theme) {
+    const t = theme.tooltip;
+    return function DefaultPieTooltip(params) {
+        const { name, value, percent, color, ringName } = params;
+        return (<View style={{
+                backgroundColor: t.backgroundColor,
+                borderColor: t.borderColor,
+                borderWidth: t.borderWidth,
+                borderRadius: t.borderRadius,
+                padding: t.padding,
+            }}>
+        {ringName != null && ringName !== '' ? (<Text style={[styles.ring, { color: t.labelColor }]}>{ringName}</Text>) : null}
+        <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 }]}>{name}</Text>
+        </View>
+        <Text style={[styles.line, { color: t.valueColor }]}>
+          <Text style={{ color: t.labelColor }}>value: </Text>
+          {String(value)}
+        </Text>
+        <Text style={[styles.line, { color: t.valueColor }]}>
+          <Text style={{ color: t.labelColor }}>share: </Text>
+          {percent.toFixed(1)}%
+        </Text>
+      </View>);
+    };
+}
+const styles = StyleSheet.create({
+    ring: {
+        fontSize: 11,
+        fontWeight: '600',
+        marginBottom: 4,
+        textTransform: 'uppercase',
+    },
+    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/pie/tooltip/index.d.ts

@@ -0,0 +1,7 @@
+export { createDefaultPieTooltip } from './default-pie-tooltip';
+export { createPieTooltipPreset } from './pie-item-tooltip-presets';
+export type { PieItemTooltipContext, PieItemTooltipParams } from './pie-item-tooltip.types';
+export { pieItemParamsFromShowTip } from './pie-item-tooltip.utils';
+export { usePieItemTooltip } from './use-pie-item-tooltip';
+export type { UsePieItemTooltipOptions, UsePieItemTooltipResult } from './use-pie-item-tooltip';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/chart/pie/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,YAAY,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAC5F,OAAO,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC"}

package/pie/tooltip/index.js

@@ -0,0 +1,4 @@
+export { createDefaultPieTooltip } from './default-pie-tooltip';
+export { createPieTooltipPreset } from './pie-item-tooltip-presets';
+export { pieItemParamsFromShowTip } from './pie-item-tooltip.utils';
+export { usePieItemTooltip } from './use-pie-item-tooltip';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pie-item-tooltip-presets.d.ts","sourceRoot":"","sources":["../../../../../components/chart/pie/tooltip/pie-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,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AA+CrE,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,kBAAkB,GACzB,CAAC,MAAM,EAAE,oBAAoB,KAAK,KAAK,CAAC,YAAY,CAYtD"}