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

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

@@ -0,0 +1,96 @@
+import type { CommonChartProps } from '../props/common';
+/** Emitted when the user taps/clicks a map region. */
+export interface GeoChartSelectEvent {
+    name: string;
+    value: number;
+}
+/**
+ * GeoJSON Feature Collection (map geometry).
+ * Used with echarts.registerMap() so region names in data match feature properties.
+ */
+export interface GeoJSONMap {
+    type: 'FeatureCollection';
+    features: Array<{
+        type: string;
+        geometry: {
+            type: string;
+            coordinates: unknown;
+        };
+        properties?: Record<string, unknown>;
+    }>;
+    crs?: unknown;
+}
+/**
+ * Single region data item: region name (must match map feature name) and value for color scale.
+ */
+export interface GeoDataItem {
+    /** Region name; must match the name in the map GeoJSON (e.g. "United States", "China"). */
+    name: string;
+    /** Numeric value used for visual encoding (e.g. color scale). */
+    value: number;
+}
+/**
+ * Props for GeoChart.
+ * Extends common chart props (width, height, theme, colors).
+ */
+export interface GeoChartProps extends CommonChartProps {
+    /**
+     * Chart data: array of { name, value } for each region.
+     * Region names must match the map GeoJSON feature names.
+     */
+    data: GeoDataItem[];
+    /**
+     * GeoJSON map to display. Pass the FeatureCollection; it will be registered with mapName.
+     */
+    mapJson?: GeoJSONMap;
+    /**
+     * Name used when registering the map. Use the same value in the chart option.
+     * @default 'world'
+     */
+    mapName?: string;
+    /**
+     * Whether to show the legend for the color scale (visual map).
+     * @default true
+     */
+    showLegend?: boolean;
+    /**
+     * Whether to emphasize (highlight) the hovered region.
+     * @default true
+     */
+    showHighlighter?: boolean;
+    /**
+     * Formatter for tooltip. (params) => string. Params include name, value.
+     */
+    tooltipFormatter?: (params: {
+        name: string;
+        value: number;
+    }) => string;
+    /**
+     * Minimum value for the visual map scale. Auto-derived from data if not set.
+     */
+    visualMapMin?: number;
+    /**
+     * Maximum value for the visual map scale. Auto-derived from data if not set.
+     */
+    visualMapMax?: number;
+    /**
+     * Visual map mode: 'continuous' (gradient) or 'piecewise' (distinct bands, e.g. Democrat / Competitive / Republican).
+     * @default 'continuous'
+     */
+    visualMapMode?: 'continuous' | 'piecewise';
+    /**
+     * When visualMapMode is 'piecewise', define bands: [{ min, max, label, color }].
+     * Example: [{ min: 0, max: 45, label: 'Democrat', color: '#3b82f6' }, { min: 45, max: 55, label: 'Competitive', color: '#94a3b8' }, { min: 55, max: 100, label: 'Republican', color: '#dc2626' }].
+     */
+    piecewisePieces?: Array<{
+        min: number;
+        max: number;
+        label: string;
+        color: string;
+    }>;
+    /**
+     * Called when the user selects (taps/clicks) a region on the map.
+     */
+    onSelect?: (event: GeoChartSelectEvent) => void;
+}
+//# sourceMappingURL=geo-chart.props.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"geo-chart.props.d.ts","sourceRoot":"","sources":["../../../../components/chart/geo/geo-chart.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAExD,sDAAsD;AACtD,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,WAAW,EAAE,OAAO,CAAA;SAAE,CAAC;QACjD,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KACtC,CAAC,CAAC;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,2FAA2F;IAC3F,IAAI,EAAE,MAAM,CAAC;IACb,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACrD;;;OAGG;IACH,IAAI,EAAE,WAAW,EAAE,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;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,CAAA;KAAE,KAAK,MAAM,CAAC;IACvE;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,WAAW,CAAC;IAC3C;;;OAGG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACjD"}

package/geo/index.d.ts

@@ -0,0 +1,7 @@
+export { GeoChart, GeoMapJsonContext } from './geo-chart';
+export { USChart } from './us-chart';
+export { WorldChart } from './world-chart';
+export type { GeoChartProps, GeoChartSelectEvent, GeoDataItem, GeoJSONMap, } from './geo-chart.props';
+export type { USChartProps } from './us-chart';
+export type { WorldChartProps } from './world-chart';
+//# sourceMappingURL=index.d.ts.map

package/geo/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/chart/geo/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EACV,aAAa,EACb,mBAAmB,EACnB,WAAW,EACX,UAAU,GACX,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/C,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/geo/index.js

@@ -0,0 +1,3 @@
+export { GeoChart, GeoMapJsonContext } from './geo-chart';
+export { USChart } from './us-chart';
+export { WorldChart } from './world-chart';

package/geo/us-chart.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { GeoChartProps } from './geo-chart.props';
+export type USChartProps = Omit<GeoChartProps, 'mapJson' | 'mapName'> & {
+    /** @default 'usa' */
+    mapName?: string;
+};
+/**
+ * Wrapper around GeoChart with the US states map pre-loaded.
+ * Pass data with state names matching us-states.json (e.g. "Alabama", "California").
+ */
+export declare function USChart(props: USChartProps): React.JSX.Element;
+export declare namespace USChart {
+    var displayName: string;
+}
+//# sourceMappingURL=us-chart.d.ts.map

package/geo/us-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"us-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/geo/us-chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,aAAa,EAAc,MAAM,mBAAmB,CAAC;AAKnE,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,SAAS,CAAC,GAAG;IACtE,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,qBAM1C;yBANe,OAAO"}

package/geo/us-chart.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import usStatesRaw from '../../../data/us-states.json';
+import { GeoChart, GeoMapJsonContext } from './geo-chart';
+/** US states GeoJSON — bundled once for USChart (static import avoids top-level await in Vite builds). */
+const usStatesMapJson = usStatesRaw;
+/**
+ * Wrapper around GeoChart with the US states map pre-loaded.
+ * Pass data with state names matching us-states.json (e.g. "Alabama", "California").
+ */
+export function USChart(props) {
+    return (<GeoMapJsonContext.Provider value={usStatesMapJson}>
+      <GeoChart mapName='usa' {...props}/>
+    </GeoMapJsonContext.Provider>);
+}
+USChart.displayName = 'USChart';

package/geo/world-chart.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { GeoChartProps } from './geo-chart.props';
+export type WorldChartProps = Omit<GeoChartProps, 'mapJson'> & {
+    /** @default 'world' */
+    mapName?: string;
+};
+/**
+ * Wrapper around GeoChart with the world map pre-loaded (uses default in GeoChart).
+ * Pass data with country/region names matching world.json (e.g. "United States", "China").
+ */
+export declare function WorldChart({ mapName, ...props }: WorldChartProps): React.JSX.Element;
+export declare namespace WorldChart {
+    var displayName: string;
+}
+//# sourceMappingURL=world-chart.d.ts.map

package/geo/world-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"world-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/geo/world-chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,GAAG;IAC7D,uBAAuB;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,OAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,qBAE1E;yBAFe,UAAU"}

package/geo/world-chart.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { GeoChart } from './geo-chart';
+/**
+ * Wrapper around GeoChart with the world map pre-loaded (uses default in GeoChart).
+ * Pass data with country/region names matching world.json (e.g. "United States", "China").
+ */
+export function WorldChart({ mapName = 'world', ...props }) {
+    return <GeoChart mapName={mapName} {...props}/>;
+}
+WorldChart.displayName = 'WorldChart';

package/index.d.ts

@@ -0,0 +1,17 @@
+export type { CartesianChartSelectEvent } from './props/cartesian';
+export * from './area';
+export * from './bar';
+export * from './column';
+export * from './line';
+export * from './pie';
+export * from './scatter';
+export * from './radar';
+export * from './radial';
+export * from './gauge';
+export * from './geo';
+export * from './bubble';
+export * from './candlestick';
+export * from './axis';
+export * from './chart-theme.context';
+export * from './chart-container';
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +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"}

package/index.js

@@ -0,0 +1,15 @@
+export * from './area';
+export * from './bar';
+export * from './column';
+export * from './line';
+export * from './pie';
+export * from './scatter';
+export * from './radar';
+export * from './radial';
+export * from './gauge';
+export * from './geo';
+export * from './bubble';
+export * from './candlestick';
+export * from './axis';
+export * from './chart-theme.context';
+export * from './chart-container';

package/line/index.d.ts

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

package/line/index.d.ts.map

@@ -0,0 +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"}

package/line/index.js

@@ -0,0 +1 @@
+export { LineChart } from './line-chart';

package/line/line-chart.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { LineChartProps } from './line-chart.props';
+/** common -> cartesian -> area -> line */
+export type { LineChartProps } from './line-chart.props';
+declare function LineChartComponent(props: LineChartProps): React.JSX.Element;
+export declare const LineChart: typeof LineChartComponent & {
+    displayName: string;
+};
+//# sourceMappingURL=line-chart.d.ts.map

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

@@ -0,0 +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"}

package/line/line-chart.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { AreaChart } from '../area/area-chart';
+function LineChartComponent(props) {
+    return <AreaChart {...props} areaOpacity={0} areaFill="transparent"/>;
+}
+export const LineChart = Object.assign(LineChartComponent, {
+    displayName: 'LineChart',
+});

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

@@ -0,0 +1,12 @@
+import type { AreaChartProps } from '../area/area-chart.props';
+import type { CartesianChartSelectEvent } from '../props/cartesian';
+/**
+ * Props for LineChart.
+ * Line chart is AreaChart with no fill (areaOpacity=0, areaFill='transparent').
+ * Inherits Cartesian chart props (axes, grid, legend, {@link CartesianChartProps#onSelect | onSelect}, …).
+ * common -> cartesian -> area -> line
+ */
+export type LineChartProps = Omit<AreaChartProps, 'areaOpacity' | 'areaFill'>;
+/** 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

@@ -0,0 +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"}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@wavemaker/react-native-echarts",
+  "version": "1.0.0-dev.0",
+  "description": "React Native chart components built on using e-charts library.",
+  "license": "MIT",
+  "repository": {},
+  "keywords": [
+    "react-native",
+    "echarts",
+    "widgets",
+    "charting",
+    "charts",
+    "charts",
+    "gauges",
+    "geo",
+    "maps",
+    "visualization",
+    "data-visualization",
+    "data-analysis",
+    "data-visualization",
+    "data-analysis"
+  ],
+  "main": "index.js",
+  "types": "index.d.ts",
+  "files": [
+    "*"
+  ],
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "@shopify/react-native-skia": "*",
+    "@wuba/react-native-echarts": "*",
+    "echarts": "*",
+    "zrender": "*",
+    "react-native-svg": "*"
+  },
+  "dependencies": {},
+  "private": false
+}

package/pie/index.d.ts

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

package/pie/index.d.ts.map

@@ -0,0 +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"}

package/pie/index.js

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

package/pie/pie-chart.d.ts

@@ -0,0 +1,13 @@
+import type { PieChartProps } from './pie-chart.props';
+import React from 'react';
+export type { PieChartProps, PieChartSelectEvent, PieDataItem, PieRingData, PieChartData, } from './pie-chart.props';
+export { isConcentricPieData } from './pie-chart.props';
+export declare const PieChart: ((props: PieChartProps & {
+    theme?: Partial<import("..").ChartTheme>;
+} & {
+    width?: number | string;
+    height?: number | string;
+}) => React.JSX.Element) & {
+    displayName: string;
+};
+//# sourceMappingURL=pie-chart.d.ts.map

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

@@ -0,0 +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"}

package/pie/pie-chart.js

@@ -0,0 +1,222 @@
+import { withResponsiveContainer } from '../chart-container';
+import { useChartTheme, withChartTheme } from '../chart-theme.context';
+import { isConcentricPieData } from './pie-chart.props';
+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';
+export { isConcentricPieData } from './pie-chart.props';
+echarts.use([
+    TooltipComponent,
+    LegendComponent,
+    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 { theme } = useChartTheme(props.theme, props.colors);
+    const chartRef = useRef(null);
+    const onSelectRef = useRef(onSelect);
+    onSelectRef.current = onSelect;
+    const option = useMemo(() => {
+        if (!Array.isArray(data) || data.length === 0) {
+            return { series: [] };
+        }
+        const seriesColors = theme.series.map(s => s.color);
+        const labelStyle = {
+            color: theme.legend.textColor,
+            fontSize: theme.legend.fontSize,
+        };
+        const buildSeriesConfig = (pieData, seriesRadius, ringName) => {
+            const total = pieData.reduce((sum, d) => sum + d.value, 0);
+            const labelConfig = showLabel
+                ? {
+                    show: true,
+                    position: labelPosition,
+                    formatter: (params) => {
+                        const pct = total > 0 ? ((params.value / total) * 100).toFixed(1) : '0';
+                        return `${params.name}\n${pct}%`;
+                    },
+                    ...labelStyle,
+                }
+                : { show: false };
+            return {
+                type: 'pie',
+                name: ringName,
+                radius: Array.isArray(seriesRadius) ? seriesRadius : seriesRadius,
+                data: pieData,
+                label: labelConfig,
+                labelLine: {
+                    show: showLabel && (labelPosition === 'outside' ? showLabelLine : false),
+                    lineStyle: { color: theme.legend.textColor },
+                },
+                emphasis: showHighlighter
+                    ? {
+                        scale: true,
+                        scaleSize: 5,
+                        itemStyle: {
+                            shadowBlur: 10,
+                            shadowOffsetX: 0,
+                            shadowColor: 'rgba(0, 0, 0, 0.2)',
+                        },
+                    }
+                    : { disabled: true },
+            };
+        };
+        if (isConcentricPieData(data)) {
+            const rings = data;
+            let colorIndex = 0;
+            const seriesConfigs = rings.map((ring) => {
+                const pieData = ring.data.map((item) => ({
+                    name: item.name,
+                    value: item.value,
+                    itemStyle: item.itemStyle?.color
+                        ? { color: item.itemStyle.color }
+                        : { color: seriesColors[colorIndex++ % seriesColors.length] },
+                }));
+                return buildSeriesConfig(pieData, ring.radius, ring.name);
+            });
+            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 config = {
+                tooltip: tooltipConfig,
+                series: seriesConfigs,
+            };
+            if (legendData?.length) {
+                config.legend = {
+                    orient: 'horizontal',
+                    left: 'center',
+                    bottom: 0,
+                    data: legendData,
+                    textStyle: labelStyle,
+                    backgroundColor: theme.legend.backgroundColor,
+                };
+            }
+            return config;
+        }
+        const flatData = data;
+        const pieData = flatData.map((item, index) => ({
+            name: item.name,
+            value: item.value,
+            itemStyle: item.itemStyle?.color
+                ? { 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 legendConfig = showLegend
+            ? {
+                orient: 'horizontal',
+                left: 'center',
+                bottom: 0,
+                data: pieData.map((d) => d.name),
+                textStyle: labelStyle,
+                backgroundColor: theme.legend.backgroundColor,
+            }
+            : undefined;
+        const config = {
+            tooltip: tooltipConfig,
+            series: [seriesConfig],
+        };
+        if (legendConfig) {
+            config.legend = legendConfig;
+        }
+        return config;
+    }, [
+        data,
+        radius,
+        showLegend,
+        showLabel,
+        labelPosition,
+        showLabelLine,
+        showHighlighter,
+        tooltipFormatter,
+        theme,
+    ]);
+    useEffect(() => {
+        let chart;
+        if (chartRef.current) {
+            try {
+                chart = echarts.init(chartRef.current, 'light', {
+                    width,
+                    height,
+                });
+                chart.setOption(option);
+                const handlePieClick = (params) => {
+                    const cb = onSelectRef.current;
+                    if (typeof cb !== 'function')
+                        return;
+                    if (params.componentType !== 'series')
+                        return;
+                    if (params.seriesType !== 'pie')
+                        return;
+                    if (typeof params.dataIndex !== 'number' ||
+                        params.dataIndex < 0 ||
+                        params.name == null) {
+                        return;
+                    }
+                    const event = {
+                        seriesIndex: params.seriesIndex ?? 0,
+                        dataIndex: params.dataIndex,
+                        name: String(params.name),
+                        value: Number(params.value ?? 0),
+                        seriesName: params.seriesName,
+                        percent: params.percent,
+                    };
+                    cb(event);
+                };
+                chart.on('click', handlePieClick);
+            }
+            catch (error) {
+                console.warn('Pie chart initialization error:', error);
+            }
+        }
+        return () => {
+            if (chart) {
+                try {
+                    chart.dispose();
+                }
+                catch (error) {
+                    console.warn('Pie chart disposal error:', error);
+                }
+            }
+        };
+    }, [option, width, height]);
+    return <SkiaChart ref={chartRef} useRNGH/>;
+};
+const PieChartComponent = withResponsiveContainer(withChartTheme(ChartComponent), 'data');
+export const PieChart = Object.assign(PieChartComponent, {
+    displayName: 'PieChart',
+});