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

package/scatter/tooltip/default-scatter-tooltip.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+/**
+ * Themed default scatter/bubble item tooltip (React Native).
+ */
+export function createDefaultScatterTooltip(theme) {
+    const t = theme.tooltip;
+    return function DefaultScatterTooltip(params) {
+        const { seriesName, x, y, z, 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 }]}>{seriesName}</Text>
+        </View>
+        <Text style={[styles.line, { color: t.valueColor }]}>
+          <Text style={{ color: t.labelColor }}>x: </Text>
+          {String(x)}
+        </Text>
+        <Text style={[styles.line, { color: t.valueColor }]}>
+          <Text style={{ color: t.labelColor }}>y: </Text>
+          {String(y)}
+        </Text>
+        {z != null && Number.isFinite(z) ? (<Text style={[styles.line, { color: t.valueColor }]}>
+            <Text style={{ color: t.labelColor }}>size: </Text>
+            {String(z)}
+          </Text>) : null}
+      </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/scatter/tooltip/index.d.ts

@@ -0,0 +1,7 @@
+export { createDefaultScatterTooltip } from './default-scatter-tooltip';
+export { createScatterTooltipPreset } from './scatter-item-tooltip-presets';
+export type { ScatterItemTooltipContext, ScatterItemTooltipParams } from './scatter-item-tooltip.types';
+export { scatterItemParamsFromShowTip } from './scatter-item-tooltip.utils';
+export { useScatterItemTooltip } from './use-scatter-item-tooltip';
+export type { UseScatterItemTooltipOptions, UseScatterItemTooltipResult } from './use-scatter-item-tooltip';
+//# sourceMappingURL=index.d.ts.map

package/scatter/tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/chart/scatter/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAC5E,YAAY,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxG,OAAO,EAAE,4BAA4B,EAAE,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,YAAY,EAAE,4BAA4B,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAC"}

package/scatter/tooltip/index.js

@@ -0,0 +1,4 @@
+export { createDefaultScatterTooltip } from './default-scatter-tooltip';
+export { createScatterTooltipPreset } from './scatter-item-tooltip-presets';
+export { scatterItemParamsFromShowTip } from './scatter-item-tooltip.utils';
+export { useScatterItemTooltip } from './use-scatter-item-tooltip';

package/scatter/tooltip/scatter-item-tooltip-presets.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"scatter-item-tooltip-presets.d.ts","sourceRoot":"","sources":["../../../../../components/chart/scatter/tooltip/scatter-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,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AA8D7E,wBAAgB,0BAA0B,CACxC,MAAM,EAAE,kBAAkB,GACzB,CAAC,MAAM,EAAE,wBAAwB,KAAK,KAAK,CAAC,YAAY,CAY1D"}

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { TooltipPresetCard, TooltipPresetCompact, TooltipPresetKpi, TooltipPresetStriped, } from '../../tooltip/chart-tooltip-preset-shells';
+function scatterCardFromParams(p) {
+    const { seriesName, x, y, z, color } = p;
+    return (<TooltipPresetCard header={{ swatchColor: color, title: seriesName }}>
+      <Text style={{ fontSize: 14, fontWeight: '700', color: '#0f172a' }}>
+        ({String(x)}, {String(y)})
+      </Text>
+      {z != null && Number.isFinite(z) ? (<Text style={{ fontSize: 12, color: '#64748b', marginTop: 4 }}>size: {String(z)}</Text>) : null}
+    </TooltipPresetCard>);
+}
+function scatterCompactFromParams(p) {
+    const { seriesName, x, y, z } = p;
+    const zPart = z != null && Number.isFinite(z) ? ` · ${String(z)}` : '';
+    return (<TooltipPresetCompact emphasis={seriesName} detail={`(${String(x)}, ${String(y)}${zPart})`} wrap/>);
+}
+function scatterKpiFromParams(p) {
+    const { seriesName, x, y, z, color } = p;
+    return (<TooltipPresetKpi accentColor={color ?? '#3b82f6'} minWidth={140} overline={seriesName} metric={String(y)} caption={`y at x = ${String(x)}${z != null && Number.isFinite(z) ? ` · size ${String(z)}` : ''}`}/>);
+}
+function scatterStripedFromParams(p) {
+    const { seriesName, x, y, z, color } = p;
+    const rows = [
+        { key: 'x', leftLabel: 'x', right: String(x) },
+        { key: 'y', leftLabel: 'y', right: String(y) },
+        ...(z != null && Number.isFinite(z)
+            ? [{ key: 'size', leftLabel: 'size', right: String(z) }]
+            : []),
+    ];
+    return (<TooltipPresetStriped headerSwatch={{ color: color ?? '#64748b', title: seriesName }} rows={rows.map((row) => ({
+            key: row.key,
+            leftLabel: row.leftLabel,
+            right: row.right,
+        }))}/>);
+}
+export function createScatterTooltipPreset(preset) {
+    switch (preset) {
+        case 'card':
+            return (p) => scatterCardFromParams(p);
+        case 'compact':
+            return (p) => scatterCompactFromParams(p);
+        case 'kpi':
+            return (p) => scatterKpiFromParams(p);
+        case 'striped':
+            return (p) => scatterStripedFromParams(p);
+    }
+    throw new Error(`Unknown tooltip preset: ${String(preset)}`);
+}

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

@@ -0,0 +1,22 @@
+/**
+ * Item tooltip payload for scatter / bubble (ECharts `trigger: 'item'`, `showTip` without `dataByCoordSys`).
+ */
+export interface ScatterItemTooltipParams {
+    pointerX: number;
+    pointerY: number;
+    seriesIndex: number;
+    dataIndex: number;
+    seriesName: string;
+    x: number;
+    y: number;
+    /** Third dimension (bubble size) when present. */
+    z?: number;
+    color?: string;
+}
+export interface ScatterItemTooltipContext {
+    normalizedSeries: Array<{
+        name?: string;
+        data: number[][];
+    }>;
+}
+//# sourceMappingURL=scatter-item-tooltip.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scatter-item-tooltip.types.d.ts","sourceRoot":"","sources":["../../../../../components/chart/scatter/tooltip/scatter-item-tooltip.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,kDAAkD;IAClD,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,yBAAyB;IACxC,gBAAgB,EAAE,KAAK,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAA;KAAE,CAAC,CAAC;CAC9D"}

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

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

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

@@ -0,0 +1,9 @@
+import type { ScatterItemTooltipContext, ScatterItemTooltipParams } from './scatter-item-tooltip.types';
+/**
+ * Build scatter/bubble tooltip params from an ECharts `showTip` action and chart instance.
+ * Ignores axis-style payloads (`dataByCoordSys`). Skips non-scatter series (e.g. regression line).
+ */
+export declare function scatterItemParamsFromShowTip(chart: any, evt: any, ctx: ScatterItemTooltipContext, themeSeries: Array<{
+    color: string;
+}>): ScatterItemTooltipParams | null;
+//# sourceMappingURL=scatter-item-tooltip.utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scatter-item-tooltip.utils.d.ts","sourceRoot":"","sources":["../../../../../components/chart/scatter/tooltip/scatter-item-tooltip.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAoCxG;;;GAGG;AACH,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,GAAG,EACV,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,yBAAyB,EAC9B,WAAW,EAAE,KAAK,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,GACpC,wBAAwB,GAAG,IAAI,CA6CjC"}

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

@@ -0,0 +1,83 @@
+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 scatterItemPixel(chart, seriesModel, data, diInside) {
+    const layout = data.getItemLayout?.(diInside);
+    if (layout && Number.isFinite(layout.x) && Number.isFinite(layout.y)) {
+        const w = typeof layout.width === 'number' ? layout.width : 0;
+        const h = typeof layout.height === 'number' ? layout.height : 0;
+        return { x: layout.x + w / 2, y: layout.y + h / 2 };
+    }
+    try {
+        const dims = data.dimensions ?? [];
+        if (dims.length >= 2 && typeof chart.convertToPixel === 'function') {
+            const v0 = data.get(dims[0], diInside);
+            const v1 = data.get(dims[1], diInside);
+            const pt = chart.convertToPixel({ seriesIndex: seriesModel.seriesIndex }, [v0, v1]);
+            if (Array.isArray(pt) && pt.length >= 2 && Number.isFinite(pt[0]) && Number.isFinite(pt[1])) {
+                return { x: pt[0], y: pt[1] };
+            }
+        }
+    }
+    catch {
+        /* ignore */
+    }
+    return null;
+}
+/**
+ * Build scatter/bubble tooltip params from an ECharts `showTip` action and chart instance.
+ * Ignores axis-style payloads (`dataByCoordSys`). Skips non-scatter series (e.g. regression line).
+ */
+export function scatterItemParamsFromShowTip(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 !== 'scatter')
+        return null;
+    const data = seriesModel.getData?.();
+    if (!data)
+        return null;
+    const diInside = resolveDataIndexInside(data, evt);
+    if (diInside == null || diInside < 0)
+        return null;
+    const pixel = scatterItemPixel(chart, seriesModel, data, diInside);
+    if (!pixel)
+        return null;
+    const s = ctx.normalizedSeries[si];
+    const row = s?.data?.[diInside];
+    if (!row || row.length < 2)
+        return null;
+    const x = Number(row[0]);
+    const y = Number(row[1]);
+    const z = row.length >= 3 ? Number(row[2]) : undefined;
+    if (!Number.isFinite(x) || !Number.isFinite(y))
+        return null;
+    const seriesName = s?.name != null && s.name !== '' ? String(s.name) : `Series ${si + 1}`;
+    const themeLen = Math.max(themeSeries.length, 1);
+    const color = themeSeries[si % themeLen]?.color;
+    return {
+        pointerX: pixel.x,
+        pointerY: pixel.y,
+        seriesIndex: si,
+        dataIndex: diInside,
+        seriesName,
+        x,
+        y,
+        ...(Number.isFinite(z) ? { z } : {}),
+        ...(typeof color === 'string' ? { color } : {}),
+    };
+}

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { ScatterItemTooltipContext, ScatterItemTooltipParams } from './scatter-item-tooltip.types';
+export interface UseScatterItemTooltipOptions {
+    active: boolean;
+    renderTooltip: (params: ScatterItemTooltipParams) => React.ReactNode;
+    contextRef: React.RefObject<ScatterItemTooltipContext>;
+    themeSeriesRef: React.RefObject<Array<{
+        color: string;
+    }>>;
+    width: number;
+    height: number;
+}
+export interface UseScatterItemTooltipResult {
+    attachScatterItemTooltipListeners: (chart: {
+        on: (ev: string, fn: (...args: any[]) => void) => void;
+        off: (ev: string, fn: (...args: any[]) => void) => void;
+    }) => () => void;
+    renderScatterTooltipOverlay: () => React.ReactNode;
+}
+/**
+ * Scatter/bubble item tooltip as React Native UI (`trigger: 'item'`).
+ * Listens to `showTip` / `hideTip` and maps with {@link scatterItemParamsFromShowTip}.
+ */
+export declare function useScatterItemTooltip(options: UseScatterItemTooltipOptions): UseScatterItemTooltipResult;
+//# sourceMappingURL=use-scatter-item-tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-scatter-item-tooltip.d.ts","sourceRoot":"","sources":["../../../../../components/chart/scatter/tooltip/use-scatter-item-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAGxG,MAAM,WAAW,4BAA4B;IAC3C,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,EAAE,CAAC,MAAM,EAAE,wBAAwB,KAAK,KAAK,CAAC,SAAS,CAAC;IACrE,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,yBAAyB,CAAC,CAAC;IACvD,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,2BAA2B;IAC1C,iCAAiC,EAAE,CAAC,KAAK,EAAE;QACzC,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,2BAA2B,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CACpD;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,4BAA4B,GAAG,2BAA2B,CAiDxG"}

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

@@ -0,0 +1,46 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { ChartPointerTooltipOverlay } from '../../tooltip/chart-pointer-tooltip-overlay';
+import { scatterItemParamsFromShowTip } from './scatter-item-tooltip.utils';
+/**
+ * Scatter/bubble item tooltip as React Native UI (`trigger: 'item'`).
+ * Listens to `showTip` / `hideTip` and maps with {@link scatterItemParamsFromShowTip}.
+ */
+export function useScatterItemTooltip(options) {
+    const { active, renderTooltip, contextRef, themeSeriesRef, width, height } = options;
+    const [params, setParams] = useState(null);
+    useEffect(() => {
+        if (!active)
+            setParams(null);
+    }, [active]);
+    const attachScatterItemTooltipListeners = useCallback((chart) => {
+        if (!active)
+            return () => { };
+        const onShowTip = (evt) => {
+            const ctx = contextRef.current;
+            if (!ctx?.normalizedSeries?.length) {
+                setParams(null);
+                return;
+            }
+            const next = scatterItemParamsFromShowTip(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 renderScatterTooltipOverlay = 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 {
+        attachScatterItemTooltipListeners,
+        renderScatterTooltipOverlay,
+    };
+}

package/tooltip/chart-pointer-tooltip-overlay.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface ChartPointerTooltipOverlayProps {
+    width: number;
+    height: number;
+    pointerX: number;
+    pointerY: number;
+    children: React.ReactNode;
+}
+/** Positions tooltip UI near `(pointerX, pointerY)` in chart pixel space. */
+export declare function ChartPointerTooltipOverlay({ width, height, pointerX, pointerY, children, }: ChartPointerTooltipOverlayProps): React.JSX.Element;
+//# sourceMappingURL=chart-pointer-tooltip-overlay.d.ts.map

package/tooltip/chart-pointer-tooltip-overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-pointer-tooltip-overlay.d.ts","sourceRoot":"","sources":["../../../../components/chart/tooltip/chart-pointer-tooltip-overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AA0EjE,MAAM,WAAW,+BAA+B;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,6EAA6E;AAC7E,wBAAgB,0BAA0B,CAAC,EACzC,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,+BAA+B,qBAiDjC"}

package/tooltip/chart-pointer-tooltip-overlay.js

@@ -0,0 +1,88 @@
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+const TOOLTIP_EDGE_PAD = 4;
+const TOOLTIP_GAP_H = 12;
+const TOOLTIP_GAP_V = 8;
+const TOOLTIP_FLIP_HYSTERESIS = 28;
+function tooltipPositionSticky(pointerX, pointerY, chartW, chartH, tooltipW, tooltipH, placeLeftRef, placeAboveRef) {
+    let left = pointerX + TOOLTIP_GAP_H;
+    let top = pointerY + TOOLTIP_GAP_V;
+    if (tooltipW > 0) {
+        let useLeft = placeLeftRef.current;
+        if (!useLeft && pointerX + TOOLTIP_GAP_H + tooltipW > chartW - TOOLTIP_EDGE_PAD) {
+            useLeft = true;
+            placeLeftRef.current = true;
+        }
+        if (useLeft &&
+            pointerX + TOOLTIP_GAP_H + tooltipW <= chartW - TOOLTIP_EDGE_PAD - TOOLTIP_FLIP_HYSTERESIS &&
+            pointerX - TOOLTIP_GAP_H - tooltipW >= TOOLTIP_EDGE_PAD) {
+            useLeft = false;
+            placeLeftRef.current = false;
+        }
+        if (useLeft && pointerX - TOOLTIP_GAP_H - tooltipW < TOOLTIP_EDGE_PAD) {
+            useLeft = false;
+            placeLeftRef.current = false;
+        }
+        left = useLeft ? pointerX - TOOLTIP_GAP_H - tooltipW : pointerX + TOOLTIP_GAP_H;
+        const maxL = Math.max(TOOLTIP_EDGE_PAD, chartW - tooltipW - TOOLTIP_EDGE_PAD);
+        left = Math.min(Math.max(TOOLTIP_EDGE_PAD, left), maxL);
+    }
+    else {
+        left = Math.min(Math.max(TOOLTIP_EDGE_PAD, left), chartW - TOOLTIP_EDGE_PAD - 24);
+    }
+    if (tooltipH > 0) {
+        let useAbove = placeAboveRef.current;
+        if (!useAbove && pointerY + TOOLTIP_GAP_V + tooltipH > chartH - TOOLTIP_EDGE_PAD) {
+            useAbove = true;
+            placeAboveRef.current = true;
+        }
+        if (useAbove &&
+            pointerY + TOOLTIP_GAP_V + tooltipH <= chartH - TOOLTIP_EDGE_PAD - TOOLTIP_FLIP_HYSTERESIS &&
+            pointerY - TOOLTIP_GAP_V - tooltipH >= TOOLTIP_EDGE_PAD) {
+            useAbove = false;
+            placeAboveRef.current = false;
+        }
+        if (useAbove && pointerY - TOOLTIP_GAP_V - tooltipH < TOOLTIP_EDGE_PAD) {
+            useAbove = false;
+            placeAboveRef.current = false;
+        }
+        top = useAbove ? pointerY - TOOLTIP_GAP_V - tooltipH : pointerY + TOOLTIP_GAP_V;
+        const maxT = Math.max(TOOLTIP_EDGE_PAD, chartH - tooltipH - TOOLTIP_EDGE_PAD);
+        top = Math.min(Math.max(TOOLTIP_EDGE_PAD, top), maxT);
+    }
+    else {
+        top = Math.max(TOOLTIP_EDGE_PAD, top);
+    }
+    return { left, top };
+}
+/** Positions tooltip UI near `(pointerX, pointerY)` in chart pixel space. */
+export function ChartPointerTooltipOverlay({ width, height, pointerX, pointerY, children, }) {
+    const [measured, setMeasured] = useState(null);
+    const placeLeftRef = useRef(false);
+    const placeAboveRef = useRef(false);
+    useLayoutEffect(() => {
+        setMeasured(null);
+        placeLeftRef.current = false;
+        placeAboveRef.current = false;
+    }, [width, height]);
+    const tw = measured?.w ?? 0;
+    const th = measured?.h ?? 0;
+    const { left, top } = tooltipPositionSticky(pointerX, pointerY, width, height, tw, th, placeLeftRef, placeAboveRef);
+    const maxBoxWidth = width - 2 * TOOLTIP_EDGE_PAD;
+    return (<View pointerEvents="box-none" style={[StyleSheet.absoluteFillObject, { alignItems: 'flex-start' }]}>
+      <View pointerEvents="none" onLayout={(e) => {
+            const { width: w, height: h } = e.nativeEvent.layout;
+            if (w <= 0 || h <= 0)
+                return;
+            setMeasured((prev) => (prev?.w === w && prev?.h === h ? prev : { w, h }));
+        }} style={{
+            position: 'absolute',
+            left,
+            top,
+            maxWidth: maxBoxWidth,
+            opacity: measured != null ? 1 : 0,
+        }} collapsable={false}>
+        {children}
+      </View>
+    </View>);
+}

package/tooltip/chart-tooltip-preset-shells.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+/** White card + shadow (axis category + series, or item header + body). */
+export declare function TooltipPresetCard({ minWidth, eyebrow, categoryTitle, header, seriesRows, keyValueRows, children, }: {
+    minWidth?: number;
+    eyebrow?: string;
+    categoryTitle?: string;
+    header?: {
+        swatchColor?: string;
+        title: string;
+        titleVariant?: 'muted' | 'emphasis';
+        marginBottom?: number;
+    };
+    seriesRows?: Array<{
+        key: string | number;
+        swatchColor: string;
+        label: string;
+        value: React.ReactNode;
+    }>;
+    /** Optional label/value rows on light background (e.g. radar). */
+    keyValueRows?: Array<{
+        key: string;
+        left: string;
+        right: React.ReactNode;
+    }>;
+    children?: React.ReactNode;
+}): React.JSX.Element;
+/** Pill chip on dark glass. */
+export declare function TooltipPresetCompact({ emphasis, detail, wrap, }: {
+    emphasis: string;
+    detail: string;
+    wrap?: boolean;
+}): React.JSX.Element;
+/** KPI strip with optional footer metric rows. */
+export declare function TooltipPresetKpi({ accentColor, minWidth, overline, metric, caption, footerRows, }: {
+    accentColor: string;
+    minWidth?: number;
+    overline: string;
+    metric: React.ReactNode;
+    caption?: string;
+    footerRows?: Array<{
+        key: string | number;
+        left: string;
+        right: React.ReactNode;
+    }>;
+}): React.JSX.Element;
+export type TooltipStripedRow = {
+    key: string;
+    right: string | number;
+    left?: React.ReactNode;
+    leftLabel?: string;
+    leftSwatchColor?: string;
+};
+/** Banded header + zebra rows. */
+export declare function TooltipPresetStriped({ header, headerTitle, headerSwatch, rows, }: {
+    /** Custom header content; wins over `headerTitle` / `headerSwatch`. */
+    header?: React.ReactNode;
+    /** Bold title only (e.g. axis category). */
+    headerTitle?: string;
+    /** Small swatch + bold title (item tooltips). */
+    headerSwatch?: {
+        color: string;
+        title: string;
+    };
+    rows: TooltipStripedRow[];
+}): React.JSX.Element;
+//# sourceMappingURL=chart-tooltip-preset-shells.d.ts.map

package/tooltip/chart-tooltip-preset-shells.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-tooltip-preset-shells.d.ts","sourceRoot":"","sources":["../../../../components/chart/tooltip/chart-tooltip-preset-shells.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAoNvC,2EAA2E;AAC3E,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,OAAO,EACP,aAAa,EACb,MAAM,EACN,UAAU,EACV,YAAY,EACZ,QAAQ,GACT,EAAE;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE;QACP,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,KAAK,EAAE,MAAM,CAAC;QACd,YAAY,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;QACpC,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,UAAU,CAAC,EAAE,KAAK,CAAC;QACjB,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;QACrB,WAAW,EAAE,MAAM,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;KACxB,CAAC,CAAC;IACH,kEAAkE;IAClE,YAAY,CAAC,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;IAC5E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,qBA0CA;AAED,+BAA+B;AAC/B,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,MAAM,EACN,IAAW,GACZ,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,qBAUA;AAED,kDAAkD;AAClD,wBAAgB,gBAAgB,CAAC,EAC/B,WAAW,EACX,QAAc,EACd,QAAQ,EACR,MAAM,EACN,OAAO,EACP,UAAU,GACX,EAAE;IACD,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CACpF,qBAyBA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,kCAAkC;AAClC,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,WAAW,EACX,YAAY,EACZ,IAAI,GACL,EAAE;IACD,uEAAuE;IACvE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iDAAiD;IACjD,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAChD,IAAI,EAAE,iBAAiB,EAAE,CAAC;CAC3B,qBAwDA"}