@wavemaker/react-native-echarts 1.0.0-dev.5 → 1.0.0-dev.8

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/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.5",
+  "version": "1.0.0-dev.8",
   "description": "React Native chart components built on using e-charts library.",
   "license": "MIT",
   "repository": {

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;AAW3B,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;AA2RxD,eAAO,MAAM,QAAQ;;;;;;;CAEnB,CAAC"}

package/pie/pie-chart.js

@@ -1,11 +1,14 @@
 import { withResponsiveContainer } from '../chart-container';
 import { useChartTheme, withChartTheme } from '../chart-theme.context';
+import { axisTooltipShowContentFlag } from '../cartesian/tooltip';
 import { isConcentricPieData } from './pie-chart.props';
+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 +16,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 = false, 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: [] };
@@ -52,6 +88,7 @@ const ChartComponent = ({ data, width = 220, height = 350, radius = '75%', showL
                 },
                 emphasis: showHighlighter
                     ? {
+                        focus: 'none',
                         scale: true,
                         scaleSize: 5,
                         itemStyle: {
@@ -79,22 +116,12 @@ const ChartComponent = ({ data, width = 220, height = 350, radius = '75%', showL
             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,
@@ -120,22 +147,12 @@ const ChartComponent = ({ data, width = 220, height = 350, radius = '75%', showL
                 : { 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 tooltipConfig = tooltipOverlayActive
+            ? {
+                trigger: 'item',
+                ...axisTooltipShowContentFlag(true),
+            }
+            : { show: false };
         const legendConfig = showLegend
             ? {
                 orient: 'horizontal',
@@ -162,11 +179,12 @@ const ChartComponent = ({ data, width = 220, height = 350, radius = '75%', showL
         labelPosition,
         showLabelLine,
         showHighlighter,
-        tooltipFormatter,
+        tooltipOverlayActive,
         theme,
     ]);
     useEffect(() => {
         let chart;
+        let detachPieTooltip = () => { };
         if (chartRef.current) {
             try {
                 chart = echarts.init(chartRef.current, 'light', {
@@ -174,6 +192,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 +223,7 @@ const ChartComponent = ({ data, width = 220, height = 350, radius = '75%', showL
             }
         }
         return () => {
+            detachPieTooltip();
             if (chart) {
                 try {
                     chart.dispose();
@@ -213,8 +233,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 { 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;
@@ -82,13 +85,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'
      */
-    tooltipFormatter?: (params: {
-        name: string;
-        value: number;
-        percent?: number;
-    }) => string;
+    tooltip?: ChartTooltipOption;
+    /**
+     * Overrides the default React Native **item** tooltip body for pie slices (see {@link PieItemTooltipParams}).
+     * Takes precedence over {@link tooltip}.
+     */
+    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,MAAM,iBAAiB,CAAC;AACxD,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,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"}

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"}