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

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