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

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { TooltipPresetCard, TooltipPresetCompact, TooltipPresetKpi, TooltipPresetStriped, } from '../../tooltip/chart-tooltip-preset-shells';
+function pieCardFromParams(p) {
+    const { name, value, percent, color, ringName } = p;
+    return (<TooltipPresetCard eyebrow={ringName != null && ringName !== '' ? ringName : undefined} header={{ swatchColor: color, title: name, marginBottom: 6 }}>
+      <Text style={{ fontSize: 14, fontWeight: '700', color: '#0f172a' }}>
+        {value} <Text style={{ fontWeight: '500', color: '#64748b' }}>({percent.toFixed(1)}%)</Text>
+      </Text>
+    </TooltipPresetCard>);
+}
+function pieCompactFromParams(p) {
+    const { name, value, percent } = p;
+    return <TooltipPresetCompact emphasis={name} detail={`${value} (${percent.toFixed(1)}%)`} wrap/>;
+}
+function pieKpiFromParams(p) {
+    const { name, value, percent, color } = p;
+    return (<TooltipPresetKpi accentColor={color ?? '#3b82f6'} minWidth={140} overline={name} metric={String(value)} caption={`${percent.toFixed(1)}% of total`}/>);
+}
+function pieStripedFromParams(p) {
+    const { name, value, percent, color } = p;
+    return (<TooltipPresetStriped headerSwatch={{ color: color ?? '#64748b', title: name }} rows={[
+            { key: 'value', leftLabel: 'value', right: String(value) },
+            { key: 'share', leftLabel: 'share', right: `${percent.toFixed(1)}%` },
+        ]}/>);
+}
+export function createPieTooltipPreset(preset) {
+    switch (preset) {
+        case 'card':
+            return (p) => pieCardFromParams(p);
+        case 'compact':
+            return (p) => pieCompactFromParams(p);
+        case 'kpi':
+            return (p) => pieKpiFromParams(p);
+        case 'striped':
+            return (p) => pieStripedFromParams(p);
+    }
+    throw new Error(`Unknown tooltip preset: ${String(preset)}`);
+}

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

@@ -0,0 +1,28 @@
+/**
+ * Item tooltip payload for pie / donut (ECharts `trigger: 'item'`, `showTip` without `dataByCoordSys`).
+ */
+export interface PieItemTooltipParams {
+    pointerX: number;
+    pointerY: number;
+    seriesIndex: number;
+    dataIndex: number;
+    /** Slice label */
+    name: string;
+    value: number;
+    /** Share of this pie ring (0–100). */
+    percent: number;
+    color?: string;
+    /** Ring / series display name when concentric or `name` is set on the series. */
+    ringName?: string;
+}
+export interface PieItemTooltipContext {
+    /** One entry per pie series (single chart has one; concentric has one per ring). */
+    normalizedSeries: Array<{
+        name?: string;
+        data: Array<{
+            name: string;
+            value: number;
+        }>;
+    }>;
+}
+//# sourceMappingURL=pie-item-tooltip.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pie-item-tooltip.types.d.ts","sourceRoot":"","sources":["../../../../../components/chart/pie/tooltip/pie-item-tooltip.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,kBAAkB;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,oFAAoF;IACpF,gBAAgB,EAAE,KAAK,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,KAAK,CAAC;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAC,CAAA;KAAE,CAAC,CAAC;CAC1F"}

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

@@ -0,0 +1,3 @@
+/**
+ * Item tooltip payload for pie / donut (ECharts `trigger: 'item'`, `showTip` without `dataByCoordSys`).
+ */

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pie-item-tooltip.utils.d.ts","sourceRoot":"","sources":["../../../../../components/chart/pie/tooltip/pie-item-tooltip.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAyE5F;;;GAGG;AACH,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,GAAG,EACV,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,qBAAqB,EAC1B,WAAW,EAAE,KAAK,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,GACpC,oBAAoB,GAAG,IAAI,CA4D7B"}

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

@@ -0,0 +1,139 @@
+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 pieSectorCenter(data, diInside) {
+    const layout = data.getItemLayout?.(diInside);
+    if (!layout || !Number.isFinite(layout.cx) || !Number.isFinite(layout.cy))
+        return null;
+    const cx = Number(layout.cx);
+    const cy = Number(layout.cy);
+    const r = Number(layout.r);
+    const r0 = Number(layout.r0 ?? 0);
+    const startAngle = Number(layout.startAngle);
+    const endAngle = Number(layout.endAngle);
+    if (!Number.isFinite(startAngle) || !Number.isFinite(endAngle))
+        return null;
+    const mid = (startAngle + endAngle) / 2;
+    const avgR = (r0 + r) / 2;
+    return {
+        x: cx + Math.cos(mid) * avgR,
+        y: cy + Math.sin(mid) * avgR,
+    };
+}
+function pointerFromEventOrSector(chart, evt, seriesModel, data, diInside) {
+    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 };
+    }
+    return pieSectorCenter(data, diInside);
+}
+function sliceValueAt(data, diInside) {
+    try {
+        const dim = typeof data.mapDimension === 'function' ? data.mapDimension('value') : null;
+        if (dim != null) {
+            const v = data.get(dim, diInside);
+            const n = Number(v);
+            if (Number.isFinite(n))
+                return n;
+        }
+    }
+    catch {
+        /* ignore */
+    }
+    const v0 = data.get?.(0, diInside);
+    const n0 = Number(v0);
+    if (Number.isFinite(n0))
+        return n0;
+    try {
+        const n1 = Number(data.get?.('value', diInside));
+        if (Number.isFinite(n1))
+            return n1;
+    }
+    catch {
+        /* ignore */
+    }
+    return NaN;
+}
+function seriesValueTotal(data) {
+    const n = typeof data.count === 'function' ? data.count() : 0;
+    let total = 0;
+    for (let i = 0; i < n; i++) {
+        const v = sliceValueAt(data, i);
+        if (Number.isFinite(v))
+            total += v;
+    }
+    return total;
+}
+/**
+ * Build pie item tooltip params from an ECharts `showTip` payload and chart instance.
+ * Ignores axis-style payloads (`dataByCoordSys`).
+ */
+export function pieItemParamsFromShowTip(chart, evt, ctx, themeSeries) {
+    if (!chart || !evt)
+        return null;
+    if (Array.isArray(evt.dataByCoordSys) && evt.dataByCoordSys.length > 0)
+        return null;
+    const si = evt.seriesIndex;
+    if (typeof si !== 'number' || si < 0)
+        return null;
+    const seriesModel = chart.getModel?.().getSeriesByIndex?.(si);
+    const seriesKind = seriesModel?.subType ?? seriesModel?.get?.('type');
+    if (!seriesModel || seriesKind !== 'pie')
+        return null;
+    const data = seriesModel.getData?.();
+    if (!data)
+        return null;
+    const diInside = resolveDataIndexInside(data, evt);
+    if (diInside == null || diInside < 0)
+        return null;
+    const pixel = pointerFromEventOrSector(chart, evt, seriesModel, data, diInside);
+    if (!pixel)
+        return null;
+    const ring = ctx.normalizedSeries[si];
+    const row = ring?.data?.[diInside];
+    if (!row)
+        return null;
+    const name = String(data.getName?.(diInside) ?? row.name ?? '');
+    const fromModel = sliceValueAt(data, diInside);
+    const value = Number.isFinite(fromModel) ? fromModel : Number(row.value);
+    const total = seriesValueTotal(data);
+    const percent = total > 0 ? (value / total) * 100 : 0;
+    let color;
+    try {
+        const style = data.getItemVisual?.(diInside, 'style');
+        const fill = style?.fill;
+        if (typeof fill === 'string' && fill !== '')
+            color = fill;
+    }
+    catch {
+        /* ignore */
+    }
+    if (color == null) {
+        const themeLen = Math.max(themeSeries.length, 1);
+        color = themeSeries[diInside % themeLen]?.color;
+    }
+    const ringNameRaw = seriesModel.get?.('name');
+    const ringName = typeof ringNameRaw === 'string' && ringNameRaw !== '' ? ringNameRaw : ring?.name != null && ring.name !== ''
+        ? String(ring.name)
+        : undefined;
+    return {
+        pointerX: pixel.x,
+        pointerY: pixel.y,
+        seriesIndex: si,
+        dataIndex: diInside,
+        name,
+        value,
+        percent,
+        ...(typeof color === 'string' ? { color } : {}),
+        ...(ringName != null ? { ringName } : {}),
+    };
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { PieItemTooltipContext, PieItemTooltipParams } from './pie-item-tooltip.types';
+export interface UsePieItemTooltipOptions {
+    active: boolean;
+    renderTooltip: (params: PieItemTooltipParams) => React.ReactNode;
+    contextRef: React.RefObject<PieItemTooltipContext>;
+    themeSeriesRef: React.RefObject<Array<{
+        color: string;
+    }>>;
+    width: number;
+    height: number;
+}
+export interface UsePieItemTooltipResult {
+    attachPieItemTooltipListeners: (chart: {
+        on: (ev: string, fn: (...args: any[]) => void) => void;
+        off: (ev: string, fn: (...args: any[]) => void) => void;
+    }) => () => void;
+    renderPieTooltipOverlay: () => React.ReactNode;
+}
+/**
+ * Pie / donut item tooltip as React Native UI (`trigger: 'item'`).
+ */
+export declare function usePieItemTooltip(options: UsePieItemTooltipOptions): UsePieItemTooltipResult;
+//# sourceMappingURL=use-pie-item-tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-pie-item-tooltip.d.ts","sourceRoot":"","sources":["../../../../../components/chart/pie/tooltip/use-pie-item-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAG5F,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,KAAK,CAAC,SAAS,CAAC;IACjE,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAC;IACnD,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,uBAAuB;IACtC,6BAA6B,EAAE,CAAC,KAAK,EAAE;QACrC,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,uBAAuB,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CAChD;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,wBAAwB,GAAG,uBAAuB,CAiD5F"}

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

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

package/props/cartesian.d.ts

@@ -1,4 +1,7 @@
-import type { CommonChartProps } from './common';
+import type { ReactNode } from 'react';
+import type { AxisTooltipParams } from '../cartesian/tooltip/axis-tooltip.types';
+import type { ChartTooltipOption } from '../tooltip';
+import type { CommonChartProps, LegendPosition } from './common';
 /**
  * Emitted when the user taps/clicks a series data point on Cartesian-based charts
  * (area, line, column, bar, scatter, bubble, candlestick, etc.).
@@ -40,23 +43,39 @@ export interface CartesianChartProps extends CommonChartProps {
      */
     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
+     * X-axis minimum when set. Applies to the chart’s **X** axis (category or value, depending on the chart).
+     * For horizontal column/bar, the **value** (bar length) scale is on **X** — use `minX` / `maxX` / `intervalX` for that scale.
+     * When omitted, the minimum is derived from the data or chosen automatically.
      */
-    xAxisTicks?: number[];
+    minX?: number;
     /**
-     * Custom Y-axis tick positions (for value axis).
-     * @default undefined
+     * X-axis maximum when set. See {@link minX} for layout notes. When omitted, the maximum is derived from the data or chosen automatically.
+     */
+    maxX?: number;
+    /**
+     * X-axis tick interval when set. See {@link minX} for layout notes. When omitted, the tick step is chosen automatically.
+     */
+    intervalX?: number;
+    /**
+     * Y-axis (value scale) minimum when set. Applies to the chart’s **Y** axis.
+     * When omitted, the minimum is derived from the data or chosen automatically.
+     */
+    minY?: number;
+    /**
+     * Y-axis (value scale) maximum when set. When omitted, the maximum is derived from the data or chosen automatically.
+     */
+    maxY?: number;
+    /**
+     * Y-axis (value scale) tick interval when set. When omitted, the tick step is chosen automatically.
      */
-    yAxisTicks?: number[];
+    intervalY?: number;
     /**
      * Whether to show the X-axis line and labels.
      * @default true
      */
     showXAxis?: boolean;
     /**
-     * Whether to show X-axis tick marks.
+     * Whether to show X-axis tick marks. Only applies when {@link showXAxis} is true.
      * @default true
      */
     showXAxisTicks?: boolean;
@@ -66,7 +85,7 @@ export interface CartesianChartProps extends CommonChartProps {
      */
     showYAxis?: boolean;
     /**
-     * Whether to show Y-axis tick marks.
+     * Whether to show Y-axis tick marks. Only applies when {@link showYAxis} is true.
      * @default true
      */
     showYAxisTicks?: boolean;
@@ -96,14 +115,26 @@ export interface CartesianChartProps extends CommonChartProps {
     grid?: CartesianGrid;
     /**
      * Whether to display a legend for named series.
-     * @default false
+     * @default true
      */
     showLegend?: boolean;
     /**
-     * Whether to show the highlighter (emphasis) when interacting with the chart.
-     * @default true
+     * Legend position. Top and bottom use a horizontal legend that wraps; left and right use a vertical legend.
+     * @default 'bottom'
+     */
+    legendPosition?: LegendPosition;
+    /**
+     * Whether **emphasis** (hover highlight) is applied while the axis pointer / tooltip is near the series.
+     * Column and bar charts default this to `false`; area defaults to `true`.
      */
     showHighlighter?: boolean;
+    /**
+     * Built-in axis tooltip preset when `renderTooltip` is omitted (area, line, column, bar). Use `none` to hide the overlay.
+     * When `renderTooltip` is set, it replaces the preset body. The overlay is hidden only when `tooltip` is `none` and `renderTooltip` is omitted.
+     * Scatter and bubble use the same prop for **item** tooltips.
+     * @default 'card'
+     */
+    tooltip?: ChartTooltipOption;
     /**
      * Formatter for X-axis tick labels. (value, index?) => string
      */
@@ -116,5 +147,11 @@ export interface CartesianChartProps extends CommonChartProps {
      * Called when the user selects (taps/clicks) a data point on a series (when supported).
      */
     onSelect?: (event: CartesianChartSelectEvent) => void;
+    /**
+     * Overrides the default React Native axis tooltip body for charts that use the axis tooltip overlay (area, line, column, bar).
+     * Scatter and bubble charts use item tooltip `renderTooltip` on their own props instead.
+     * Takes precedence over {@link tooltip}.
+     */
+    renderTooltip?: (params: AxisTooltipParams) => ReactNode;
 }
 //# sourceMappingURL=cartesian.d.ts.map

package/props/cartesian.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"cartesian.d.ts","sourceRoot":"","sources":["../../../../components/chart/props/cartesian.ts"],"names":[],"mappings":"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"}

package/props/common.d.ts

@@ -1,4 +1,6 @@
 import type { ChartTheme } from '../chart-theme.context';
+/** Placement of the chart legend (or geo visual map). */
+export type LegendPosition = 'top' | 'bottom' | 'left' | 'right';
 /**
  * Props shared by all chart components (common base).
  * common -> cartesian -> area | bar | scatter -> line (extends area) | bubble (extends scatter)

package/props/common.d.ts.map

@@ -1 +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"}
+{"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,yDAAyD;AACzD,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEjE;;;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

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

package/radar/index.d.ts.map

@@ -1 +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"}
+{"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;AAC7B,cAAc,WAAW,CAAC"}

package/radar/index.js

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

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

@@ -1 +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"}
+{"version":3,"file":"radar-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/radar/radar-chart.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,eAAe,EAIhB,MAAM,qBAAqB,CAAC;AAe7B,OAAO,KAAqC,MAAM,OAAO,CAAC;AAG1D,YAAY,EACV,eAAe,EACf,qBAAqB,EACrB,cAAc,EACd,eAAe,GAChB,MAAM,qBAAqB,CAAC;AAsQ7B,eAAO,MAAM,UAAU;;;;;;;CAErB,CAAC"}

package/radar/radar-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, radarGeometryForLegend, } from '../legend/echarts-legend-layout';
+import { createRadarTooltipPreset, useRadarItemTooltip } from './tooltip';
 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';
+import { View } from 'react-native';
 echarts.use([
     TooltipComponent,
     GridComponent,
@@ -27,17 +31,41 @@ function normalizeRadarSeries(data, indicatorCount) {
         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 ChartComponent = ({ indicators, data, width = 220, height = 350, symbol = 'none', symbolSize, showLegend = true, legendPosition = 'bottom', showHighlighter = true, showIndicatorLabels = true, showSplitLine = true, showAxisLine = 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 selectContextRef = useRef([]);
+    const radarContextRef = useRef({
+        indicators: [],
+        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 createRadarTooltipPreset(tooltip);
+    }, [renderTooltip, tooltip]);
+    const { attachRadarItemTooltipListeners, renderRadarTooltipOverlay } = useRadarItemTooltip({
+        active: tooltipOverlayActive,
+        renderTooltip: renderTooltipFn,
+        contextRef: radarContextRef,
+        themeSeriesRef,
+        width,
+        height,
+    });
     const normalizedSeries = useMemo(() => {
         const count = indicators?.length ?? 0;
         return normalizeRadarSeries(data, count);
     }, [data, indicators?.length]);
-    selectContextRef.current = normalizedSeries;
+    radarContextRef.current = {
+        indicators: (indicators ?? []).map((ind) => ({ name: ind.name })),
+        normalizedSeries,
+    };
     const indicatorMax = useMemo(() => {
         if (!indicators?.length)
             return [];
@@ -58,7 +86,9 @@ const ChartComponent = ({ indicators, data, width = 220, height = 350, symbol =
             return { series: [] };
         const radarAxis = theme.axis.r;
         const gridStyle = theme.grid.r;
+        const hasRadarLegend = showLegend && normalizedSeries.some((s) => s.name);
         const radarConfig = {
+            ...radarGeometryForLegend(legendPosition, showLegend, hasRadarLegend),
             indicator: indicators.map((ind, i) => ({
                 name: ind.name,
                 max: indicatorMax[i] ?? ind.max ?? 100,
@@ -103,14 +133,19 @@ const ChartComponent = ({ indicators, data, width = 220, height = 350, symbol =
                     lineStyle: { color: seriesColor, width: seriesLineWidth },
                     areaStyle: { color: areaColor },
                     emphasis: showHighlighter
-                        ? { focus: 'self', lineStyle: { width: seriesLineWidth + 1 }, areaStyle: { opacity: 0.8 } }
+                        ? {
+                            focus: 'none',
+                            lineStyle: { width: seriesLineWidth + 1 },
+                            areaStyle: { opacity: 0.8 },
+                        }
                         : { focus: 'none' },
                 };
             }),
         };
-        const legendConfig = showLegend && normalizedSeries.some(s => s.name)
+        const legendConfig = showLegend && normalizedSeries.some((s) => s.name)
             ? {
-                data: normalizedSeries.map(s => s.name),
+                data: normalizedSeries.map((s) => s.name),
+                ...echartsLegendLayoutFragment(legendPosition),
                 textStyle: {
                     color: theme.legend.textColor,
                     fontSize: theme.legend.fontSize,
@@ -118,12 +153,16 @@ const ChartComponent = ({ indicators, data, width = 220, height = 350, symbol =
                 backgroundColor: theme.legend.backgroundColor,
             }
             : undefined;
+        const tooltipConfig = tooltipOverlayActive
+            ? {
+                trigger: 'item',
+                ...axisTooltipShowContentFlag(true),
+            }
+            : { show: false };
         const config = {
             radar: radarConfig,
             series: [seriesConfig],
-            tooltip: {
-                trigger: 'item',
-            },
+            tooltip: tooltipConfig,
         };
         if (legendConfig)
             config.legend = legendConfig;
@@ -136,13 +175,16 @@ const ChartComponent = ({ indicators, data, width = 220, height = 350, symbol =
         symbol,
         symbolSize,
         showLegend,
+        legendPosition,
         showHighlighter,
         showIndicatorLabels,
         showSplitLine,
         showAxisLine,
+        tooltipOverlayActive,
     ]);
     useEffect(() => {
         let chart;
+        let detachRadarTooltip = () => { };
         if (chartRef.current) {
             try {
                 chart = echarts.init(chartRef.current, 'light', {
@@ -150,6 +192,7 @@ const ChartComponent = ({ indicators, data, width = 220, height = 350, symbol =
                     height,
                 });
                 chart.setOption(option);
+                detachRadarTooltip = attachRadarItemTooltipListeners(chart);
                 const handleRadarClick = (params) => {
                     const cb = onSelectRef.current;
                     if (typeof cb !== 'function')
@@ -161,7 +204,7 @@ const ChartComponent = ({ indicators, data, width = 220, height = 350, symbol =
                     const dataIndex = params.dataIndex;
                     if (typeof dataIndex !== 'number' || dataIndex < 0)
                         return;
-                    const row = selectContextRef.current[dataIndex];
+                    const row = radarContextRef.current.normalizedSeries[dataIndex];
                     if (!row)
                         return;
                     const event = {
@@ -179,6 +222,7 @@ const ChartComponent = ({ indicators, data, width = 220, height = 350, symbol =
             }
         }
         return () => {
+            detachRadarTooltip();
             if (chart) {
                 try {
                     chart.dispose();
@@ -188,8 +232,11 @@ const ChartComponent = ({ indicators, data, width = 220, height = 350, symbol =
                 }
             }
         };
-    }, [option, width, height]);
-    return <SkiaChart ref={chartRef} useRNGH/>;
+    }, [option, width, height, attachRadarItemTooltipListeners]);
+    return (<View style={{ width, height, position: 'relative' }}>
+      <SkiaChart ref={chartRef} useRNGH/>
+      {renderRadarTooltipOverlay()}
+    </View>);
 };
 const RadarChartComponent = withResponsiveContainer(withChartTheme(ChartComponent));
 export const RadarChart = Object.assign(RadarChartComponent, {