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

package/column/column-chart.js

@@ -5,7 +5,9 @@ import { BarChart as EChartsBarChart } 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';
 import { getAxis } from '../axis';
+import { createAxisTooltipPreset, useAxisTooltip } from '../cartesian/tooltip';
 echarts.use([
     TooltipComponent,
     GridComponent,
@@ -13,12 +15,44 @@ echarts.use([
     SkiaRenderer,
     EChartsBarChart,
 ]);
-const ChartComponent = ({ data, width = 220, height = 350, boundaryGap = true, cornerRadius = [4, 4, 0, 0], horizontal = false, stack, stackNormalize = false, activeIndex, activeColor, barInsideLabelPosition = 'start', barInsideLabelFormatter, barOutsideLabelPosition = 'start', barOutsideLabelFormatter, itemStyle, showXAxis = true, showXAxisTicks = true, showYAxis = true, showYAxisTicks = true, showXAxisSplitLines = true, showYAxisSplitLines = true, grid, showLegend = false, showHighlighter = true, xAxisTickLabelFormatter, yAxisTickLabelFormatter, xAxisTicks, xAxisLabel, yAxisLabel, onSelect, ...props }) => {
+/** Stable identity for default `cornerRadius` (inline `[4,4,0,0]` in params is a new array every render). */
+const DEFAULT_COLUMN_CORNER_RADIUS = [4, 4, 0, 0];
+function columnCornerRadiusDep(value) {
+    if (typeof value === 'number')
+        return value;
+    if (Array.isArray(value))
+        return value.join(',');
+    return '4,4,0,0';
+}
+const ChartComponent = ({ data, width = 220, height = 350, boundaryGap = true, cornerRadius = DEFAULT_COLUMN_CORNER_RADIUS, horizontal = false, stack, stackNormalize = false, activeIndex, activeColor, barInsideLabelPosition = 'start', barInsideLabelFormatter, barOutsideLabelPosition = 'start', barOutsideLabelFormatter, itemStyle, showXAxis = true, showXAxisTicks = true, showYAxis = true, showYAxisTicks = true, showXAxisSplitLines = true, showYAxisSplitLines = true, grid, showLegend = false, showHighlighter = false, tooltip = 'card', xAxisTickLabelFormatter, yAxisTickLabelFormatter, xAxisTicks, xAxisLabel, yAxisLabel, onSelect, renderTooltip, ...props }) => {
     const { theme } = useChartTheme(props.theme, props.colors);
     const chartRef = useRef(null);
     const onSelectRef = useRef(onSelect);
     onSelectRef.current = onSelect;
-    const selectContextRef = useRef({ displaySeries: [], labelOverlayDuplicate: false });
+    const selectContextRef = useRef({
+        displaySeries: [],
+        categoryAxisData: [],
+        labelOverlayDuplicate: false,
+        categoryAxisIsY: false,
+    });
+    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 createAxisTooltipPreset(tooltip);
+    }, [renderTooltip, tooltip]);
+    const { attachAxisTooltipListeners, renderAxisTooltipOverlay } = useAxisTooltip({
+        active: tooltipOverlayActive,
+        renderTooltip: renderTooltipFn,
+        contextRef: selectContextRef,
+        themeSeriesRef,
+        width,
+        height,
+    });
     const normalizedSeries = useMemo(() => {
         let normalizedData = [];
         if (!Array.isArray(data) || data.length === 0)
@@ -86,26 +120,24 @@ const ChartComponent = ({ data, width = 220, height = 350, boundaryGap = true, c
     const showLabelOutside = barOutsideLabelFormatter != null;
     const isSingleSeries = displaySeries.length === 1;
     const labelOverlayDuplicate = showLabelInside && showLabelOutside && isSingleSeries;
-    selectContextRef.current = { displaySeries, labelOverlayDuplicate };
-    const option = useMemo(() => {
+    const categoryAxisData = useMemo(() => {
         const categories = (displaySeries[0]?.data ?? []).map((item) => String(item[0]));
         const dataPoints = displaySeries.flatMap((s) => s.data.map((d) => d[1]));
-        const xAxisData = xAxisTicks != null && xAxisTicks.length > 0
+        return xAxisTicks != null && xAxisTicks.length > 0
             ? xAxisTicks
             : categories.length > 0
                 ? categories
                 : getAxis(dataPoints).map(String);
-        const tooltipConfig = showHighlighter
-            ? {
-                trigger: 'axis',
-                axisPointer: {
-                    type: 'shadow',
-                    shadowStyle: {
-                        color: 'rgba(0,0,0,0.08)',
-                    },
-                },
-            }
-            : { trigger: 'axis' };
+    }, [displaySeries, xAxisTicks]);
+    selectContextRef.current = {
+        displaySeries,
+        categoryAxisData,
+        labelOverlayDuplicate,
+        categoryAxisIsY: horizontal,
+    };
+    const option = useMemo(() => {
+        const categories = (displaySeries[0]?.data ?? []).map((item) => String(item[0]));
+        const xAxisData = categoryAxisData;
         const categoryAxisConfig = {
             type: 'category',
             data: xAxisData,
@@ -368,10 +400,23 @@ const ChartComponent = ({ data, width = 220, height = 350, boundaryGap = true, c
             seriesConfig.push(labelOnlySeries);
         }
         const config = {
-            tooltip: tooltipConfig,
             xAxis: xAxisConfig,
             yAxis: yAxisConfig,
             series: seriesConfig,
+            axisPointer: {
+                show: true,
+                type: 'line',
+                snap: true,
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#00000000',
+                    show: false,
+                },
+                label: {
+                    show: false,
+                },
+            },
         };
         if (legendConfig)
             config.legend = legendConfig;
@@ -383,7 +428,7 @@ const ChartComponent = ({ data, width = 220, height = 350, boundaryGap = true, c
         normalizedSeries,
         displaySeries,
         boundaryGap,
-        cornerRadius,
+        columnCornerRadiusDep(cornerRadius),
         horizontal,
         stack,
         stackNormalize,
@@ -404,18 +449,22 @@ const ChartComponent = ({ data, width = 220, height = 350, boundaryGap = true, c
         showLegend,
         hasNamedSeries,
         showHighlighter,
+        tooltipOverlayActive,
         xAxisTickLabelFormatter,
         yAxisTickLabelFormatter,
         xAxisTicks,
         xAxisLabel,
         yAxisLabel,
+        categoryAxisData,
     ]);
     useEffect(() => {
         let chart;
+        let detachAxisTooltip = () => { };
         if (chartRef.current) {
             try {
                 chart = echarts.init(chartRef.current, 'light', { width, height });
                 chart.setOption(option);
+                detachAxisTooltip = attachAxisTooltipListeners(chart);
                 const handleSeriesClick = (params) => {
                     const cb = onSelectRef.current;
                     if (typeof cb !== 'function')
@@ -463,6 +512,7 @@ const ChartComponent = ({ data, width = 220, height = 350, boundaryGap = true, c
             }
         }
         return () => {
+            detachAxisTooltip();
             if (chart) {
                 try {
                     chart.dispose();
@@ -472,8 +522,11 @@ const ChartComponent = ({ data, width = 220, height = 350, boundaryGap = true, c
                 }
             }
         };
-    }, [option, width, height]);
-    return <SkiaChart ref={chartRef} useRNGH/>;
+    }, [option, width, height, attachAxisTooltipListeners]);
+    return (<View style={{ width, height, position: 'relative' }}>
+      <SkiaChart ref={chartRef} useRNGH/>
+      {renderAxisTooltipOverlay()}
+    </View>);
 };
 const ColumnChartComponent = withResponsiveContainer(withChartTheme(ChartComponent));
 export const ColumnChart = Object.assign(ColumnChartComponent, {

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

@@ -1 +1 @@
-{"version":3,"file":"geo-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/geo/geo-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAoC,MAAM,mBAAmB,CAAC;AAKzF,OAAO,KAAgE,MAAM,OAAO,CAAC;AAErF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAErG,2GAA2G;AAC3G,eAAO,MAAM,iBAAiB,kCAAyC,CAAC;AAuNxE,eAAO,MAAM,QAAQ;;;;;;;CAEnB,CAAC"}
+{"version":3,"file":"geo-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/geo/geo-chart.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAoC,MAAM,mBAAmB,CAAC;AAOzF,OAAO,KAAgE,MAAM,OAAO,CAAC;AAGrF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAErG,2GAA2G;AAC3G,eAAO,MAAM,iBAAiB,kCAAyC,CAAC;AA0PxE,eAAO,MAAM,QAAQ;;;;;;;CAEnB,CAAC"}

package/geo/geo-chart.js

@@ -1,11 +1,14 @@
 import { withResponsiveContainer } from '../chart-container';
 import { useChartTheme, withChartTheme } from '../chart-theme.context';
+import { axisTooltipShowContentFlag } from '../cartesian/tooltip';
+import { createGeoTooltipPreset, useGeoItemTooltip } from './tooltip';
 import { SkiaChart, SkiaRenderer } from '@wuba/react-native-echarts';
 import { MapChart } from 'echarts/charts';
 import { TooltipComponent, VisualMapComponent } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react';
-import worldJson from '../../../data/world.json';
+import { View } from 'react-native';
+import worldJson from './world.json';
 /** Optional context to provide mapJson without passing as prop (avoids Storybook serialization issues). */
 export const GeoMapJsonContext = createContext(null);
 echarts.use([
@@ -15,13 +18,41 @@ echarts.use([
     MapChart,
 ]);
 const DEFAULT_MAP_NAME = 'world';
-const ChartComponent = ({ data, mapJson: mapJsonProp, mapName = DEFAULT_MAP_NAME, width = 400, height = 300, showLegend = true, showHighlighter = true, tooltipFormatter, visualMapMin, visualMapMax, visualMapMode = 'continuous', piecewisePieces, onSelect, ...props }) => {
+const ChartComponent = ({ data, mapJson: mapJsonProp, mapName = DEFAULT_MAP_NAME, width = 400, height = 300, showLegend = true, showHighlighter = true, tooltip = 'card', renderTooltip, visualMapMin, visualMapMax, visualMapMode = 'continuous', piecewisePieces, onSelect, ...props }) => {
     const { theme } = useChartTheme(props.theme, props.colors);
     const chartRef = useRef(null);
     const onSelectRef = useRef(onSelect);
     onSelectRef.current = onSelect;
+    const geoContextRef = useRef({ regions: [] });
+    const themeSeriesRef = useRef(theme.series);
+    themeSeriesRef.current = theme.series;
     const contextMapJson = useContext(GeoMapJsonContext);
     const mapJson = mapJsonProp ?? contextMapJson ?? worldJson;
+    const tooltipOverlayActive = renderTooltip != null || tooltip !== 'none';
+    const renderTooltipFn = useMemo(() => {
+        if (renderTooltip != null)
+            return renderTooltip;
+        if (tooltip === 'none')
+            return () => null;
+        return createGeoTooltipPreset(tooltip);
+    }, [renderTooltip, tooltip]);
+    const { attachGeoItemTooltipListeners, renderGeoTooltipOverlay } = useGeoItemTooltip({
+        active: tooltipOverlayActive,
+        renderTooltip: renderTooltipFn,
+        contextRef: geoContextRef,
+        themeSeriesRef,
+        width,
+        height,
+    });
+    const tooltipRegions = useMemo(() => {
+        if (!Array.isArray(data) || data.length === 0)
+            return [];
+        return data.map((d) => ({
+            name: String(d.name),
+            value: Number(d.value),
+        }));
+    }, [data]);
+    geoContextRef.current = { regions: tooltipRegions };
     useEffect(() => {
         if (mapJson?.type === 'FeatureCollection' && mapJson.features?.length) {
             try {
@@ -47,20 +78,12 @@ const ChartComponent = ({ data, mapJson: mapJsonProp, mapName = DEFAULT_MAP_NAME
             return { series: [{ type: 'map', map: mapName, data: [] }] };
         }
         const seriesColor = theme.series[0]?.color ?? '#3b82f6';
-        const tooltipConfig = {
-            trigger: 'item',
-            formatter: tooltipFormatter
-                ? (params) => {
-                    const p = params?.data ?? params;
-                    return tooltipFormatter({ name: p?.name ?? '', value: p?.value ?? 0 });
-                }
-                : undefined,
-            backgroundColor: theme.tooltip.backgroundColor,
-            borderColor: theme.tooltip.borderColor,
-            borderWidth: theme.tooltip.borderWidth,
-            borderRadius: theme.tooltip.borderRadius,
-            padding: theme.tooltip.padding,
-        };
+        const tooltipConfig = tooltipOverlayActive
+            ? {
+                trigger: 'item',
+                ...axisTooltipShowContentFlag(true),
+            }
+            : { show: false };
         const visualMapConfig = showLegend
             ? visualMapMode === 'piecewise' && piecewisePieces?.length
                 ? {
@@ -112,15 +135,18 @@ const ChartComponent = ({ data, mapJson: mapJsonProp, mapName = DEFAULT_MAP_NAME
             },
             emphasis: showHighlighter
                 ? {
+                    focus: 'none',
                     itemStyle: {
-                        areaColor: seriesColor,
                         borderColor: '#333',
                         borderWidth: 1,
                     },
-                    label: {
-                        show: true,
-                        color: theme.legend.textColor,
-                    },
+                    // Avoid duplicating the region name when the RN tooltip is active.
+                    label: tooltipOverlayActive
+                        ? { show: false }
+                        : {
+                            show: true,
+                            color: theme.legend.textColor,
+                        },
                 }
                 : { disabled: true },
         };
@@ -138,12 +164,13 @@ const ChartComponent = ({ data, mapJson: mapJsonProp, mapName = DEFAULT_MAP_NAME
         valueRange,
         showLegend,
         showHighlighter,
-        tooltipFormatter,
+        tooltipOverlayActive,
         visualMapMode,
         piecewisePieces,
     ]);
     useEffect(() => {
         let chart;
+        let detachGeoTooltip = () => { };
         if (chartRef.current) {
             try {
                 chart = echarts.init(chartRef.current, 'light', {
@@ -151,6 +178,7 @@ const ChartComponent = ({ data, mapJson: mapJsonProp, mapName = DEFAULT_MAP_NAME
                     height,
                 });
                 chart.setOption(option);
+                detachGeoTooltip = attachGeoItemTooltipListeners(chart);
                 const handleMapClick = (params) => {
                     const cb = onSelectRef.current;
                     if (typeof cb !== 'function')
@@ -182,6 +210,7 @@ const ChartComponent = ({ data, mapJson: mapJsonProp, mapName = DEFAULT_MAP_NAME
             }
         }
         return () => {
+            detachGeoTooltip();
             if (chart) {
                 try {
                     chart.dispose();
@@ -191,8 +220,11 @@ const ChartComponent = ({ data, mapJson: mapJsonProp, mapName = DEFAULT_MAP_NAME
                 }
             }
         };
-    }, [option, width, height]);
-    return <SkiaChart ref={chartRef} useRNGH/>;
+    }, [option, width, height, attachGeoItemTooltipListeners]);
+    return (<View style={{ width, height, position: 'relative' }}>
+      <SkiaChart ref={chartRef} useRNGH/>
+      {renderGeoTooltipOverlay()}
+    </View>);
 };
 const GeoChartComponent = withResponsiveContainer(withChartTheme(ChartComponent));
 export const GeoChart = Object.assign(GeoChartComponent, {

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

@@ -1,4 +1,7 @@
 import type { CommonChartProps } from '../props/common';
+import type { ChartTooltipOption } from '../tooltip';
+import type { GeoItemTooltipParams } from './tooltip/geo-item-tooltip.types';
+import type { ReactNode } from 'react';
 /** Emitted when the user taps/clicks a map region. */
 export interface GeoChartSelectEvent {
     name: string;
@@ -59,12 +62,15 @@ export interface GeoChartProps extends CommonChartProps {
      */
     showHighlighter?: boolean;
     /**
-     * Formatter for tooltip. (params) => string. Params include name, value.
+     * Built-in region tooltip preset when `renderTooltip` is omitted. Use `none` to hide the overlay.
+     * @default 'card'
      */
-    tooltipFormatter?: (params: {
-        name: string;
-        value: number;
-    }) => string;
+    tooltip?: ChartTooltipOption;
+    /**
+     * Overrides the default React Native item tooltip body (see {@link GeoItemTooltipParams}).
+     * Takes precedence over {@link tooltip}.
+     */
+    renderTooltip?: (params: GeoItemTooltipParams) => ReactNode;
     /**
      * Minimum value for the visual map scale. Auto-derived from data if not set.
      */

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

@@ -1 +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"}
+{"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;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,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;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,SAAS,CAAC;IAC5D;;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

@@ -2,6 +2,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 * from './tooltip';
 export type { USChartProps } from './us-chart';
 export type { WorldChartProps } from './world-chart';
 //# sourceMappingURL=index.d.ts.map

package/geo/index.d.ts.map

@@ -1 +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"}
+{"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,cAAc,WAAW,CAAC;AAC1B,YAAY,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/C,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/geo/index.js

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ChartTheme } from '../../chart-theme.context';
+import type { GeoItemTooltipParams } from './geo-item-tooltip.types';
+/** Themed default geo / map item tooltip (React Native). */
+export declare function createDefaultGeoTooltip(theme: Pick<ChartTheme, 'tooltip'>): (params: GeoItemTooltipParams) => React.ReactElement;
+//# sourceMappingURL=default-geo-tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"default-geo-tooltip.d.ts","sourceRoot":"","sources":["../../../../../components/chart/geo/tooltip/default-geo-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,4DAA4D;AAC5D,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,GACjC,CAAC,MAAM,EAAE,oBAAoB,KAAK,KAAK,CAAC,YAAY,CA6BtD"}

package/geo/tooltip/default-geo-tooltip.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+/** Themed default geo / map item tooltip (React Native). */
+export function createDefaultGeoTooltip(theme) {
+    const t = theme.tooltip;
+    return function DefaultGeoTooltip(params) {
+        const { name, value, color } = params;
+        return (<View style={{
+                backgroundColor: t.backgroundColor,
+                borderColor: t.borderColor,
+                borderWidth: t.borderWidth,
+                borderRadius: t.borderRadius,
+                padding: t.padding,
+            }}>
+        <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>
+      </View>);
+    };
+}
+const styles = StyleSheet.create({
+    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/geo/tooltip/geo-item-tooltip-presets.d.ts

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

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

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

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { TooltipPresetCard, TooltipPresetCompact, TooltipPresetKpi, TooltipPresetStriped, } from '../../tooltip/chart-tooltip-preset-shells';
+function geoCardFromParams(p) {
+    const { name, value, color } = p;
+    return (<TooltipPresetCard minWidth={140} header={{ swatchColor: color, title: name, titleVariant: 'emphasis', marginBottom: 6 }}>
+      <Text style={{ fontSize: 20, fontWeight: '800', color: '#0f172a' }}>{String(value)}</Text>
+      <Text style={{ fontSize: 11, color: '#64748b', marginTop: 4 }}>Value</Text>
+    </TooltipPresetCard>);
+}
+function geoCompactFromParams(p) {
+    const { name, value } = p;
+    return <TooltipPresetCompact emphasis={name} detail={String(value)} wrap={false}/>;
+}
+function geoKpiFromParams(p) {
+    const { name, value, color } = p;
+    return (<TooltipPresetKpi accentColor={color ?? '#3b82f6'} minWidth={140} overline={name} metric={String(value)} caption="Region value"/>);
+}
+function geoStripedFromParams(p) {
+    const { name, value, color } = p;
+    return (<TooltipPresetStriped headerSwatch={{ color: color ?? '#64748b', title: name }} rows={[{ key: 'value', leftLabel: 'value', right: String(value) }]}/>);
+}
+export function createGeoTooltipPreset(preset) {
+    switch (preset) {
+        case 'card':
+            return (p) => geoCardFromParams(p);
+        case 'compact':
+            return (p) => geoCompactFromParams(p);
+        case 'kpi':
+            return (p) => geoKpiFromParams(p);
+        case 'striped':
+            return (p) => geoStripedFromParams(p);
+    }
+    throw new Error(`Unknown tooltip preset: ${String(preset)}`);
+}

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

@@ -0,0 +1,19 @@
+/**
+ * Item tooltip for map / geo (`trigger: 'item'`, `series.type` === `map`).
+ */
+export interface GeoItemTooltipParams {
+    pointerX: number;
+    pointerY: number;
+    /** Region name (matches map feature / data `name`). */
+    name: string;
+    value: number;
+    color?: string;
+}
+export interface GeoItemTooltipContext {
+    /** Normalized `{ name, value }` rows from chart `data` (for lookup when the event omits value). */
+    regions: Array<{
+        name: string;
+        value: number;
+    }>;
+}
+//# sourceMappingURL=geo-item-tooltip.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"geo-item-tooltip.types.d.ts","sourceRoot":"","sources":["../../../../../components/chart/geo/tooltip/geo-item-tooltip.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,qBAAqB;IACpC,mGAAmG;IACnG,OAAO,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACjD"}

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

@@ -0,0 +1,3 @@
+/**
+ * Item tooltip for map / geo (`trigger: 'item'`, `series.type` === `map`).
+ */

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

@@ -0,0 +1,14 @@
+import type { GeoItemTooltipContext, GeoItemTooltipParams } from './geo-item-tooltip.types';
+/**
+ * Build geo map item tooltip params from an ECharts `showTip` payload.
+ * Ignores axis-style payloads (`dataByCoordSys`).
+ */
+export declare function geoItemParamsFromShowTip(chart: any, evt: any, ctx: GeoItemTooltipContext, themeSeries: Array<{
+    color: string;
+}>, 
+/** Prefer over region centroid: matches the pointer that drove hover / emphasis. */
+lastZrPointer?: {
+    x: number;
+    y: number;
+} | null): GeoItemTooltipParams | null;
+//# sourceMappingURL=geo-item-tooltip.utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"geo-item-tooltip.utils.d.ts","sourceRoot":"","sources":["../../../../../components/chart/geo/tooltip/geo-item-tooltip.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AA0I5F;;;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;AACrC,oFAAoF;AACpF,aAAa,CAAC,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,GAC9C,oBAAoB,GAAG,IAAI,CAqE7B"}