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

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

@@ -0,0 +1,97 @@
+import type { CommonChartProps } from '../props/common';
+/** Emitted when the user taps/clicks a pie slice. */
+export interface PieChartSelectEvent {
+    seriesIndex: number;
+    dataIndex: number;
+    name: string;
+    value: number;
+    /** Series/ring name when applicable (concentric pies). */
+    seriesName?: string;
+    percent?: number;
+}
+/**
+ * Single slice data for pie/donut charts.
+ */
+export interface PieDataItem {
+    /** Display name for the slice */
+    name: string;
+    /** Numeric value (determines slice size) */
+    value: number;
+    /** Optional per-item color override */
+    itemStyle?: {
+        color?: string;
+    };
+}
+/**
+ * Data for one ring in a concentric (multi-ring) pie.
+ * Each ring has its own radius range and slice data.
+ */
+export interface PieRingData {
+    /** Optional name for the ring (e.g. for legend). */
+    name?: string;
+    /** Inner and outer radius as [inner, outer], e.g. ['0%', '35%'] or ['45%', '60%']. */
+    radius: (number | string)[];
+    /** Slice data for this ring. */
+    data: PieDataItem[];
+}
+/**
+ * Chart data: single pie (array of slices) or concentric (array of rings).
+ */
+export type PieChartData = PieDataItem[] | PieRingData[];
+/**
+ * Type guard: true if data is concentric (array of rings).
+ */
+export declare function isConcentricPieData(data: PieChartData): data is PieRingData[];
+/**
+ * Props for PieChart.
+ * Extends common chart props (width, height, theme, colors).
+ */
+export interface PieChartProps extends CommonChartProps {
+    /**
+     * Chart data: single pie (array of { name, value }) or concentric (array of { name?, radius, data }).
+     */
+    data: PieChartData;
+    /**
+     * Radius of the pie. Number (e.g. 100), string (e.g. '60%'), or [inner, outer] for donut.
+     * @default '75%'
+     */
+    radius?: number | string | (number | string)[];
+    /**
+     * Whether to show the legend for slices.
+     * @default false
+     */
+    showLegend?: boolean;
+    /**
+     * Whether to show slice labels (name/value on the chart).
+     * @default true
+     */
+    showLabel?: boolean;
+    /**
+     * Label position: 'outside' | 'inside' | 'center'.
+     * @default 'outside'
+     */
+    labelPosition?: 'outside' | 'inside' | 'center';
+    /**
+     * Whether to show label lines (connectors from slice to label).
+     * @default true when labelPosition is 'outside'
+     */
+    showLabelLine?: boolean;
+    /**
+     * Whether to emphasize (scale/highlight) the hovered slice.
+     * @default true
+     */
+    showHighlighter?: boolean;
+    /**
+     * Formatter for tooltip. (params) => string. Params include name, value, percent.
+     */
+    tooltipFormatter?: (params: {
+        name: string;
+        value: number;
+        percent?: number;
+    }) => string;
+    /**
+     * Called when the user selects (taps/clicks) a slice.
+     */
+    onSelect?: (event: PieChartSelectEvent) => void;
+}
+//# sourceMappingURL=pie-chart.props.d.ts.map

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

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

package/pie/pie-chart.props.js

@@ -0,0 +1,12 @@
+/**
+ * Type guard: true if data is concentric (array of rings).
+ */
+export function isConcentricPieData(data) {
+    if (!Array.isArray(data) || data.length === 0)
+        return false;
+    const first = data[0];
+    return ('data' in first &&
+        Array.isArray(first.data) &&
+        'radius' in first &&
+        Array.isArray(first.radius));
+}

package/props/cartesian.d.ts

@@ -0,0 +1,120 @@
+import type { CommonChartProps } from './common';
+/**
+ * Emitted when the user taps/clicks a series data point on Cartesian-based charts
+ * (area, line, column, bar, scatter, bubble, candlestick, etc.).
+ */
+export interface CartesianChartSelectEvent {
+    seriesIndex: number;
+    dataIndex: number;
+    seriesName: string;
+    x: string | number;
+    y: number;
+    /** Third numeric dimension when present (e.g. bubble size). */
+    z?: number;
+    /** Set when the gesture targets a candlestick series. */
+    ohlc?: {
+        open: number;
+        close: number;
+        low: number;
+        high: number;
+    };
+}
+/**
+ * Grid positioning configuration.
+ * Values can be percentages (strings like '10%') or pixel values (numbers).
+ */
+export interface CartesianGrid {
+    left?: string | number;
+    right?: string | number;
+    top?: string | number;
+    bottom?: string | number;
+}
+/**
+ * Props shared by all Cartesian chart components (axes, grid, legend, highlighter).
+ * common -> cartesian -> area | bar | scatter
+ */
+export interface CartesianChartProps extends CommonChartProps {
+    /**
+     * Whether to leave gaps at the start and end of the axis.
+     * @default false (area/line/scatter); true (bar)
+     */
+    boundaryGap?: boolean;
+    /**
+     * Custom X-axis tick values (numbers only). When provided, used as the x-axis data; labels are
+     * generated using xAxisTickLabelFormatter. Otherwise each chart derives x-axis from data.
+     * @default undefined
+     */
+    xAxisTicks?: number[];
+    /**
+     * Custom Y-axis tick positions (for value axis).
+     * @default undefined
+     */
+    yAxisTicks?: number[];
+    /**
+     * Whether to show the X-axis line and labels.
+     * @default true
+     */
+    showXAxis?: boolean;
+    /**
+     * Whether to show X-axis tick marks.
+     * @default true
+     */
+    showXAxisTicks?: boolean;
+    /**
+     * Whether to show the Y-axis line and labels.
+     * @default true
+     */
+    showYAxis?: boolean;
+    /**
+     * Whether to show Y-axis tick marks.
+     * @default true
+     */
+    showYAxisTicks?: boolean;
+    /**
+     * Whether to show vertical grid lines (X-axis split lines).
+     * @default true
+     */
+    showXAxisSplitLines?: boolean;
+    /**
+     * Whether to show horizontal grid lines (Y-axis split lines).
+     * @default true
+     */
+    showYAxisSplitLines?: boolean;
+    /**
+     * Label text for the X-axis (displayed along the axis).
+     * @default undefined
+     */
+    xAxisLabel?: string;
+    /**
+     * Label text for the Y-axis (displayed along the axis).
+     * @default undefined
+     */
+    yAxisLabel?: string;
+    /**
+     * Grid positioning configuration.
+     */
+    grid?: CartesianGrid;
+    /**
+     * Whether to display a legend for named series.
+     * @default false
+     */
+    showLegend?: boolean;
+    /**
+     * Whether to show the highlighter (emphasis) when interacting with the chart.
+     * @default true
+     */
+    showHighlighter?: boolean;
+    /**
+     * Formatter for X-axis tick labels. (value, index?) => string
+     */
+    xAxisTickLabelFormatter?: (value: string | number, index?: number) => string;
+    /**
+     * Formatter for Y-axis tick labels. (value, index?) => string
+     */
+    yAxisTickLabelFormatter?: (value: string | number, index?: number) => string;
+    /**
+     * Called when the user selects (taps/clicks) a data point on a series (when supported).
+     */
+    onSelect?: (event: CartesianChartSelectEvent) => void;
+}
+//# sourceMappingURL=cartesian.d.ts.map

package/props/cartesian.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cartesian.d.ts","sourceRoot":"","sources":["../../../../components/chart/props/cartesian.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD;;;GAGG;AACH,MAAM,WAAW,yBAAyB;IACxC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,+DAA+D;IAC/D,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,yDAAyD;IACzD,IAAI,CAAC,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;CACH;AAED;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7E;;OAEG;IACH,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7E;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,IAAI,CAAC;CACvD"}

package/props/common.d.ts

@@ -0,0 +1,28 @@
+import type { ChartTheme } from '../chart-theme.context';
+/**
+ * Props shared by all chart components (common base).
+ * common -> cartesian -> area | bar | scatter -> line (extends area) | bubble (extends scatter)
+ */
+export interface CommonChartProps {
+    /**
+     * Width of the chart in pixels.
+     * @default 220
+     */
+    width?: number;
+    /**
+     * Height of the chart in pixels.
+     * @default 350
+     */
+    height?: number;
+    /**
+     * Partial theme override for customizing chart appearance.
+     * Merged with the default theme from ChartThemeContext.
+     */
+    theme?: Partial<ChartTheme>;
+    /**
+     * Colors for the chart series. Overrides theme colors.
+     * When provided, these colors will be used for the series in order.
+     */
+    colors?: string[];
+}
+//# sourceMappingURL=common.d.ts.map

package/props/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../components/chart/props/common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEzD;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB"}

package/radar/index.d.ts

@@ -0,0 +1,3 @@
+export { RadarChart } from './radar-chart';
+export type { RadarChartProps, RadarChartSelectEvent, RadarIndicator, RadarSeriesData, } from './radar-chart.props';
+//# sourceMappingURL=index.d.ts.map

package/radar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/chart/radar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EACV,eAAe,EACf,qBAAqB,EACrB,cAAc,EACd,eAAe,GAChB,MAAM,qBAAqB,CAAC"}

package/radar/index.js

@@ -0,0 +1 @@
+export { RadarChart } from './radar-chart';

package/radar/radar-chart.d.ts

@@ -0,0 +1,12 @@
+import type { RadarChartProps } from './radar-chart.props';
+import React from 'react';
+export type { RadarChartProps, RadarChartSelectEvent, RadarIndicator, RadarSeriesData, } from './radar-chart.props';
+export declare const RadarChart: ((props: RadarChartProps & {
+    theme?: Partial<import("..").ChartTheme>;
+} & {
+    width?: number | string;
+    height?: number | string;
+}) => React.JSX.Element) & {
+    displayName: string;
+};
+//# sourceMappingURL=radar-chart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radar-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/radar/radar-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,eAAe,EAIhB,MAAM,qBAAqB,CAAC;AAS7B,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,YAAY,EACV,eAAe,EACf,qBAAqB,EACrB,cAAc,EACd,eAAe,GAChB,MAAM,qBAAqB,CAAC;AAkN7B,eAAO,MAAM,UAAU;;;;;;;CAErB,CAAC"}

package/radar/radar-chart.js

@@ -0,0 +1,197 @@
+import { withResponsiveContainer } from '../chart-container';
+import { useChartTheme, withChartTheme } from '../chart-theme.context';
+import { SkiaChart, SkiaRenderer } from '@wuba/react-native-echarts';
+import { RadarChart as EChartsRadarChart } from 'echarts/charts';
+import { GridComponent, LegendComponent, TooltipComponent, } from 'echarts/components';
+import * as echarts from 'echarts/core';
+import React, { useEffect, useMemo, useRef } from 'react';
+echarts.use([
+    TooltipComponent,
+    GridComponent,
+    LegendComponent,
+    SkiaRenderer,
+    EChartsRadarChart,
+]);
+function normalizeRadarSeries(data, indicatorCount) {
+    if (!Array.isArray(data) || data.length === 0)
+        return [];
+    const first = data[0];
+    if (typeof first === 'number') {
+        const values = data;
+        if (values.length !== indicatorCount)
+            return [];
+        return [{ name: 'Series 1', value: values }];
+    }
+    return data.map((item, index) => ({
+        name: item.name ?? `Series ${index + 1}`,
+        value: item.value,
+    }));
+}
+const ChartComponent = ({ indicators, data, width = 220, height = 350, symbol = 'none', symbolSize, showLegend = false, showHighlighter = true, showIndicatorLabels = true, showSplitLine = true, showAxisLine = true, onSelect, ...props }) => {
+    const { theme } = useChartTheme(props.theme, props.colors);
+    const chartRef = useRef(null);
+    const onSelectRef = useRef(onSelect);
+    onSelectRef.current = onSelect;
+    const selectContextRef = useRef([]);
+    const normalizedSeries = useMemo(() => {
+        const count = indicators?.length ?? 0;
+        return normalizeRadarSeries(data, count);
+    }, [data, indicators?.length]);
+    selectContextRef.current = normalizedSeries;
+    const indicatorMax = useMemo(() => {
+        if (!indicators?.length)
+            return [];
+        return indicators.map((ind, i) => {
+            if (ind.max != null)
+                return ind.max;
+            let max = 0;
+            normalizedSeries.forEach(s => {
+                const v = s.value[i];
+                if (typeof v === 'number' && v > max)
+                    max = v;
+            });
+            return max > 0 ? Math.ceil(max * 1.1) : 100;
+        });
+    }, [indicators, normalizedSeries]);
+    const option = useMemo(() => {
+        if (!indicators?.length)
+            return { series: [] };
+        const radarAxis = theme.axis.r;
+        const gridStyle = theme.grid.r;
+        const radarConfig = {
+            indicator: indicators.map((ind, i) => ({
+                name: ind.name,
+                max: indicatorMax[i] ?? ind.max ?? 100,
+            })),
+            axisName: {
+                show: showIndicatorLabels,
+                color: radarAxis.tickLabelColor,
+            },
+            axisLine: showAxisLine
+                ? {
+                    lineStyle: {
+                        color: radarAxis.lineColor,
+                        width: radarAxis.lineWidth,
+                    },
+                }
+                : { show: false },
+            splitLine: showSplitLine
+                ? {
+                    lineStyle: {
+                        color: gridStyle.lineColor,
+                        width: gridStyle.lineWidth,
+                    },
+                }
+                : { show: false },
+            splitArea: {
+                show: false,
+            },
+        };
+        const radarDataItems = normalizedSeries.map(s => ({ value: s.value, name: s.name }));
+        const seriesConfig = {
+            type: 'radar',
+            data: radarDataItems.map((item, index) => {
+                const seriesColor = theme.series[index % theme.series.length].color;
+                const seriesLineWidth = theme.series[index]?.lineWidth ?? theme.series[0].lineWidth ?? 2;
+                const areaOpacityHex = Math.round(0.25 * 255).toString(16).padStart(2, '0');
+                const areaColor = seriesColor + areaOpacityHex;
+                return {
+                    value: item.value,
+                    name: item.name,
+                    symbol: symbol === 'none' ? 'circle' : symbol,
+                    symbolSize: symbol === 'none' ? 0 : (symbolSize ?? 6),
+                    lineStyle: { color: seriesColor, width: seriesLineWidth },
+                    areaStyle: { color: areaColor },
+                    emphasis: showHighlighter
+                        ? { focus: 'self', lineStyle: { width: seriesLineWidth + 1 }, areaStyle: { opacity: 0.8 } }
+                        : { focus: 'none' },
+                };
+            }),
+        };
+        const legendConfig = showLegend && normalizedSeries.some(s => s.name)
+            ? {
+                data: normalizedSeries.map(s => s.name),
+                textStyle: {
+                    color: theme.legend.textColor,
+                    fontSize: theme.legend.fontSize,
+                },
+                backgroundColor: theme.legend.backgroundColor,
+            }
+            : undefined;
+        const config = {
+            radar: radarConfig,
+            series: [seriesConfig],
+            tooltip: {
+                trigger: 'item',
+            },
+        };
+        if (legendConfig)
+            config.legend = legendConfig;
+        return config;
+    }, [
+        theme,
+        indicators,
+        indicatorMax,
+        normalizedSeries,
+        symbol,
+        symbolSize,
+        showLegend,
+        showHighlighter,
+        showIndicatorLabels,
+        showSplitLine,
+        showAxisLine,
+    ]);
+    useEffect(() => {
+        let chart;
+        if (chartRef.current) {
+            try {
+                chart = echarts.init(chartRef.current, 'light', {
+                    width,
+                    height,
+                });
+                chart.setOption(option);
+                const handleRadarClick = (params) => {
+                    const cb = onSelectRef.current;
+                    if (typeof cb !== 'function')
+                        return;
+                    if (params.componentType !== 'series')
+                        return;
+                    if (params.seriesType !== 'radar')
+                        return;
+                    const dataIndex = params.dataIndex;
+                    if (typeof dataIndex !== 'number' || dataIndex < 0)
+                        return;
+                    const row = selectContextRef.current[dataIndex];
+                    if (!row)
+                        return;
+                    const event = {
+                        seriesIndex: params.seriesIndex ?? 0,
+                        dataIndex,
+                        seriesName: row.name,
+                        value: [...row.value],
+                    };
+                    cb(event);
+                };
+                chart.on('click', handleRadarClick);
+            }
+            catch (error) {
+                console.warn('Radar chart initialization error:', error);
+            }
+        }
+        return () => {
+            if (chart) {
+                try {
+                    chart.dispose();
+                }
+                catch (error) {
+                    console.warn('Radar chart disposal error:', error);
+                }
+            }
+        };
+    }, [option, width, height]);
+    return <SkiaChart ref={chartRef} useRNGH/>;
+};
+const RadarChartComponent = withResponsiveContainer(withChartTheme(ChartComponent));
+export const RadarChart = Object.assign(RadarChartComponent, {
+    displayName: 'RadarChart',
+});

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

@@ -0,0 +1,80 @@
+import type { CommonChartProps } from '../props/common';
+/** Emitted when the user taps/clicks a radar series (polygon). */
+export interface RadarChartSelectEvent {
+    seriesIndex: number;
+    dataIndex: number;
+    seriesName: string;
+    value: number[];
+}
+/**
+ * One dimension (axis) of the radar chart.
+ */
+export interface RadarIndicator {
+    /** Display name for the axis. */
+    name: string;
+    /** Optional maximum value for the axis. When omitted, max is derived from data. */
+    max?: number;
+}
+/**
+ * Radar series data shape:
+ * - Single series: number[] (one value per indicator)
+ * - Multiple series: Array<{ name?: string; value: number[] }>
+ */
+export type RadarSeriesData = number[] | Array<{
+    name?: string;
+    value: number[];
+}>;
+/**
+ * Props for RadarChart.
+ * common -> radar (no cartesian axes)
+ */
+export interface RadarChartProps extends CommonChartProps {
+    /**
+     * Indicator definitions: dimension names and optional max per axis.
+     * Length must match the length of each series value array.
+     */
+    indicators: RadarIndicator[];
+    /**
+     * Chart data. Single series (number[]) or multiple named series.
+     */
+    data: RadarSeriesData;
+    /**
+     * Symbol type for data points. Set to 'none' to hide (default).
+     * @default 'none'
+     */
+    symbol?: 'none' | 'circle' | 'rect' | 'roundRect' | 'triangle' | 'diamond' | 'pin' | 'arrow' | string;
+    /**
+     * Size of the symbol. Used when symbol is not 'none'.
+     */
+    symbolSize?: number | number[] | ((value: unknown) => number | number[]);
+    /**
+     * Whether to display a legend for named series.
+     * @default false
+     */
+    showLegend?: boolean;
+    /**
+     * Whether to show emphasis (highlight) when interacting with the chart.
+     * @default true
+     */
+    showHighlighter?: boolean;
+    /**
+     * Whether to show indicator (axis) labels.
+     * @default true
+     */
+    showIndicatorLabels?: boolean;
+    /**
+     * Whether to show split lines (grid) for the radar.
+     * @default true
+     */
+    showSplitLine?: boolean;
+    /**
+     * Whether to show axis line for each indicator.
+     * @default true
+     */
+    showAxisLine?: boolean;
+    /**
+     * Called when the user selects (taps/clicks) a radar series polygon.
+     */
+    onSelect?: (event: RadarChartSelectEvent) => void;
+}
+//# sourceMappingURL=radar-chart.props.d.ts.map

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

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

package/radial/index.d.ts

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

package/radial/index.d.ts.map

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

package/radial/index.js

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

package/radial/radial-chart.d.ts

@@ -0,0 +1,12 @@
+import type { RadialChartProps } from './radial-chart.props';
+import React from 'react';
+export type { RadialChartProps, RadialChartSelectEvent, RadialDataItem } from './radial-chart.props';
+export declare const RadialChart: ((props: RadialChartProps & {
+    theme?: Partial<import("..").ChartTheme>;
+} & {
+    width?: number | string;
+    height?: number | string;
+}) => React.JSX.Element) & {
+    displayName: string;
+};
+//# sourceMappingURL=radial-chart.d.ts.map

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

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