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

package/README.md

@@ -182,6 +182,30 @@ Preview thumbnails for the chart examples in `assets/images/charts`. Each image
   </tbody>
 </table>
 
+### Heatmap
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-heatmap--default" target="_blank">
+          <img src="assets/images/charts/heatmap/default.png" width="200" height="200" alt="Heatmap default" style="object-fit: contain;" /><br /><sub>default</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-heatmap-labels--with-cell-labels" target="_blank">
+          <img src="assets/images/charts/heatmap/with-cell-labels.png" width="200" height="200" alt="Heatmap with cell labels" style="object-fit: contain;" /><br /><sub>with-cell-labels</sub>
+        </a>
+      </td>
+      <td align="center">
+        <a href="https://wavemaker.github.io/wm-react-native-echarts/?path=/story/charts-heatmap-colors--custom-colors" target="_blank">
+          <img src="assets/images/charts/heatmap/custom-colors.png" width="200" height="200" alt="Heatmap custom colors" style="object-fit: contain;" /><br /><sub>custom-colors</sub>
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
 ### Gauge
 
 <table>

package/heatmap/heatmap-chart.d.ts

@@ -0,0 +1,13 @@
+import type { HeatmapChartProps } from './heatmap-chart.props';
+import React from 'react';
+/** common -> heatmap */
+export type { HeatmapChartProps, HeatmapDataPoint, HeatmapChartSelectEvent, } from './heatmap-chart.props';
+export declare const HeatmapChart: ((props: HeatmapChartProps & {
+    theme?: Partial<import("..").ChartTheme>;
+} & {
+    width?: number | string;
+    height?: number | string;
+}) => React.JSX.Element) & {
+    displayName: string;
+};
+//# sourceMappingURL=heatmap-chart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"heatmap-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/heatmap/heatmap-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAA2B,MAAM,uBAAuB,CAAC;AASxF,OAAO,KAAqC,MAAM,OAAO,CAAC;AAM1D,wBAAwB;AACxB,YAAY,EACV,iBAAiB,EACjB,gBAAgB,EAChB,uBAAuB,GACxB,MAAM,uBAAuB,CAAC;AAgQ/B,eAAO,MAAM,YAAY;;;;;;;CAEvB,CAAC"}

package/heatmap/heatmap-chart.js

@@ -0,0 +1,232 @@
+import { withResponsiveContainer } from '../chart-container';
+import { useChartTheme, withChartTheme } from '../chart-theme.context';
+import { SkiaChart, SkiaRenderer } from '@wuba/react-native-echarts';
+import { HeatmapChart as EChartsHeatmapChart } from 'echarts/charts';
+import { GridComponent, TooltipComponent, VisualMapComponent, } from 'echarts/components';
+import * as echarts from 'echarts/core';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { View } from 'react-native';
+import { axisTooltipShowContentFlag } from '../cartesian/tooltip';
+import { createHeatmapTooltipPreset, useHeatmapItemTooltip } from './tooltip';
+echarts.use([
+    TooltipComponent,
+    GridComponent,
+    VisualMapComponent,
+    SkiaRenderer,
+    EChartsHeatmapChart,
+]);
+const SERIES_NAME = 'Heatmap';
+const ChartComponent = ({ xAxisData, yAxisData, data, width = 320, height = 300, showLabel = false, showXAxis = true, showYAxis = true, showHighlighter = true, tooltip = 'card', onSelect, renderTooltip, ...props }) => {
+    const { theme } = useChartTheme(props.theme, props.colors);
+    const chartRef = useRef(null);
+    const onSelectRef = useRef(onSelect);
+    onSelectRef.current = onSelect;
+    const selectContextRef = useRef({
+        xAxisData: [],
+        yAxisData: [],
+        data: [],
+        seriesName: SERIES_NAME,
+    });
+    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 createHeatmapTooltipPreset(tooltip);
+    }, [renderTooltip, tooltip]);
+    const { attachHeatmapItemTooltipListeners, renderHeatmapTooltipOverlay } = useHeatmapItemTooltip({
+        active: tooltipOverlayActive,
+        renderTooltip: renderTooltipFn,
+        contextRef: selectContextRef,
+        themeSeriesRef,
+        width,
+        height,
+    });
+    const normalizedData = useMemo(() => {
+        if (!Array.isArray(data))
+            return [];
+        return data.filter((row) => Array.isArray(row) &&
+            row.length >= 3 &&
+            Number.isFinite(Number(row[0])) &&
+            Number.isFinite(Number(row[1])) &&
+            Number.isFinite(Number(row[2])));
+    }, [data]);
+    selectContextRef.current = {
+        xAxisData: xAxisData ?? [],
+        yAxisData: yAxisData ?? [],
+        data: normalizedData,
+        seriesName: SERIES_NAME,
+    };
+    const valueRange = useMemo(() => {
+        if (normalizedData.length === 0)
+            return { min: 0, max: 10 };
+        const values = normalizedData.map((d) => Number(d[2]));
+        const min = Math.min(...values);
+        const max = Math.max(...values);
+        return { min: min === max ? min - 1 : min, max: min === max ? max + 1 : max };
+    }, [normalizedData]);
+    const option = useMemo(() => {
+        const seriesColor = theme.series[0]?.color ?? '#3b82f6';
+        const tooltipConfig = tooltipOverlayActive
+            ? {
+                trigger: 'item',
+                ...axisTooltipShowContentFlag(true),
+            }
+            : { show: false };
+        const xAxisConfig = {
+            type: 'category',
+            data: xAxisData,
+            splitArea: { show: true },
+            axisLabel: {
+                show: showXAxis,
+                color: theme.axis.x.tickLabelColor,
+            },
+            axisLine: showXAxis
+                ? {
+                    show: true,
+                    lineStyle: {
+                        color: theme.axis.x.lineColor,
+                        width: theme.axis.x.lineWidth,
+                    },
+                }
+                : { show: false },
+            axisTick: { show: showXAxis },
+            splitLine: { show: false },
+        };
+        const yAxisConfig = {
+            type: 'category',
+            data: yAxisData,
+            splitArea: { show: true },
+            axisLabel: {
+                show: showYAxis,
+                color: theme.axis.y.tickLabelColor,
+            },
+            axisLine: showYAxis
+                ? {
+                    show: true,
+                    lineStyle: {
+                        color: theme.axis.y.lineColor,
+                        width: theme.axis.y.lineWidth,
+                    },
+                }
+                : { show: false },
+            axisTick: { show: showYAxis },
+            splitLine: { show: false },
+        };
+        const grid = {
+            top: '8%',
+            left: '12%',
+            right: '4%',
+            bottom: '8%',
+            containLabel: true,
+        };
+        const seriesConfig = {
+            name: SERIES_NAME,
+            type: 'heatmap',
+            data: normalizedData,
+            label: {
+                show: showLabel,
+                color: theme.legend.textColor,
+            },
+            emphasis: showHighlighter
+                ? {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowColor: 'rgba(0, 0, 0, 0.35)',
+                    },
+                }
+                : { disabled: true },
+        };
+        const config = {
+            tooltip: tooltipConfig,
+            grid,
+            xAxis: xAxisConfig,
+            yAxis: yAxisConfig,
+            series: [seriesConfig],
+        };
+        config.visualMap = {
+            type: 'continuous',
+            min: valueRange.min,
+            max: valueRange.max,
+            show: false,
+            inRange: {
+                color: [theme.series[1]?.color ?? '#93c5fd', seriesColor],
+            },
+        };
+        return config;
+    }, [
+        xAxisData,
+        yAxisData,
+        normalizedData,
+        theme,
+        showLabel,
+        showXAxis,
+        showYAxis,
+        showHighlighter,
+        tooltipOverlayActive,
+        valueRange,
+    ]);
+    useEffect(() => {
+        let chart;
+        let detachHeatmapTooltip = () => { };
+        if (chartRef.current) {
+            try {
+                chart = echarts.init(chartRef.current, 'light', { width, height });
+                chart.setOption(option);
+                detachHeatmapTooltip = attachHeatmapItemTooltipListeners(chart);
+                const handleHeatmapClick = (params) => {
+                    const cb = onSelectRef.current;
+                    if (typeof cb !== 'function')
+                        return;
+                    if (params.componentType !== 'series')
+                        return;
+                    if (params.seriesType !== 'heatmap')
+                        return;
+                    const raw = (Array.isArray(params.data) ? params.data : params.data?.value) ??
+                        (Array.isArray(params.value) ? params.value : undefined);
+                    if (!raw || raw.length < 3)
+                        return;
+                    const xIndex = Number(raw[0]);
+                    const yIndex = Number(raw[1]);
+                    const value = Number(raw[2]);
+                    if (!Number.isFinite(xIndex) || !Number.isFinite(yIndex) || !Number.isFinite(value))
+                        return;
+                    const event = {
+                        xIndex,
+                        yIndex,
+                        xLabel: xAxisData[xIndex] ?? String(xIndex),
+                        yLabel: yAxisData[yIndex] ?? String(yIndex),
+                        value,
+                    };
+                    cb(event);
+                };
+                chart.on('click', handleHeatmapClick);
+            }
+            catch (error) {
+                console.warn('HeatmapChart initialization error:', error);
+            }
+        }
+        return () => {
+            detachHeatmapTooltip();
+            if (chart) {
+                try {
+                    chart.dispose();
+                }
+                catch (error) {
+                    console.warn('HeatmapChart disposal error:', error);
+                }
+            }
+        };
+    }, [option, width, height, attachHeatmapItemTooltipListeners, xAxisData, yAxisData]);
+    return (<View style={{ width, height, position: 'relative' }}>
+      <SkiaChart ref={chartRef} useRNGH/>
+      {renderHeatmapTooltipOverlay()}
+    </View>);
+};
+const HeatmapChartComponent = withResponsiveContainer(withChartTheme(ChartComponent));
+export const HeatmapChart = Object.assign(HeatmapChartComponent, {
+    displayName: 'HeatmapChart',
+});

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

@@ -0,0 +1,44 @@
+import type { CommonChartProps } from '../props/common';
+import type { ChartTooltipOption } from '../tooltip';
+import type { ReactNode } from 'react';
+import type { HeatmapItemTooltipParams } from './tooltip/heatmap-item-tooltip.types';
+/** Single heatmap cell: `[xIndex, yIndex, value]` using indices into {@link HeatmapChartProps.xAxisData} / `yAxisData`. */
+export type HeatmapDataPoint = [number, number, number];
+/** Emitted when the user taps/clicks a heatmap cell. */
+export interface HeatmapChartSelectEvent {
+    xIndex: number;
+    yIndex: number;
+    xLabel: string;
+    yLabel: string;
+    value: number;
+}
+/**
+ * Props for HeatmapChart.
+ * common -> heatmap (matrix chart with category axes)
+ */
+export interface HeatmapChartProps extends CommonChartProps {
+    /** Category labels for the X axis (columns). */
+    xAxisData: string[];
+    /** Category labels for the Y axis (rows). */
+    yAxisData: string[];
+    /** Cell values as `[xIndex, yIndex, value]` tuples. */
+    data: HeatmapDataPoint[];
+    /** When true, shows the numeric value on each cell. @default false */
+    showLabel?: boolean;
+    /** Whether to emphasize the hovered cell. @default true */
+    showHighlighter?: boolean;
+    /** Whether to show the X-axis line and category labels. @default true */
+    showXAxis?: boolean;
+    /** Whether to show the Y-axis line and category labels. @default true */
+    showYAxis?: boolean;
+    /**
+     * Built-in cell tooltip preset when `renderTooltip` is omitted. Use `none` to hide the overlay.
+     * @default 'card'
+     */
+    tooltip?: ChartTooltipOption;
+    /** Overrides the default React Native item tooltip body (see {@link HeatmapItemTooltipParams}). */
+    renderTooltip?: (params: HeatmapItemTooltipParams) => ReactNode;
+    /** Called when the user selects (taps/clicks) a heatmap cell. */
+    onSelect?: (event: HeatmapChartSelectEvent) => void;
+}
+//# sourceMappingURL=heatmap-chart.props.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"heatmap-chart.props.d.ts","sourceRoot":"","sources":["../../../../components/chart/heatmap/heatmap-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,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAErF,2HAA2H;AAC3H,MAAM,MAAM,gBAAgB,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAExD,wDAAwD;AACxD,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD,gDAAgD;IAChD,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,6CAA6C;IAC7C,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,uDAAuD;IACvD,IAAI,EAAE,gBAAgB,EAAE,CAAC;IACzB,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2DAA2D;IAC3D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,yEAAyE;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yEAAyE;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,mGAAmG;IACnG,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,wBAAwB,KAAK,SAAS,CAAC;IAChE,iEAAiE;IACjE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;CACrD"}

package/heatmap/index.d.ts

@@ -0,0 +1,4 @@
+export { HeatmapChart } from './heatmap-chart';
+export type { HeatmapChartProps, HeatmapDataPoint, HeatmapChartSelectEvent, } from './heatmap-chart.props';
+export * from './tooltip';
+//# sourceMappingURL=index.d.ts.map

package/heatmap/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/chart/heatmap/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,YAAY,EACV,iBAAiB,EACjB,gBAAgB,EAChB,uBAAuB,GACxB,MAAM,uBAAuB,CAAC;AAC/B,cAAc,WAAW,CAAC"}

package/heatmap/index.js

@@ -0,0 +1,2 @@
+export { HeatmapChart } from './heatmap-chart';
+export * from './tooltip';

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

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

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

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

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { TooltipPresetCard, TooltipPresetCompact, TooltipPresetKpi, TooltipPresetStriped, } from '../../tooltip/chart-tooltip-preset-shells';
+function heatmapCardFromParams(p) {
+    const { seriesName, xLabel, yLabel, value, color } = p;
+    return (<TooltipPresetCard header={{ swatchColor: color, title: seriesName }}>
+      <Text style={{ fontSize: 12, color: '#64748b' }}>
+        {yLabel} · {xLabel}
+      </Text>
+      <Text style={{ fontSize: 14, fontWeight: '700', color: '#0f172a', marginTop: 4 }}>{String(value)}</Text>
+    </TooltipPresetCard>);
+}
+function heatmapCompactFromParams(p) {
+    const { seriesName, xLabel, yLabel, value } = p;
+    return (<TooltipPresetCompact emphasis={seriesName} detail={`${yLabel} · ${xLabel}: ${String(value)}`} wrap/>);
+}
+function heatmapKpiFromParams(p) {
+    const { seriesName, xLabel, yLabel, value, color } = p;
+    return (<TooltipPresetKpi accentColor={color ?? '#3b82f6'} minWidth={140} overline={seriesName} metric={String(value)} caption={`${yLabel} at ${xLabel}`}/>);
+}
+function heatmapStripedFromParams(p) {
+    const { seriesName, xLabel, yLabel, value, color } = p;
+    return (<TooltipPresetStriped headerSwatch={{ color: color ?? '#64748b', title: seriesName }} rows={[
+            { key: 'row', leftLabel: 'row', right: yLabel },
+            { key: 'col', leftLabel: 'col', right: xLabel },
+            { key: 'value', leftLabel: 'value', right: String(value) },
+        ]}/>);
+}
+export function createHeatmapTooltipPreset(preset) {
+    switch (preset) {
+        case 'card':
+            return (p) => heatmapCardFromParams(p);
+        case 'compact':
+            return (p) => heatmapCompactFromParams(p);
+        case 'kpi':
+            return (p) => heatmapKpiFromParams(p);
+        case 'striped':
+            return (p) => heatmapStripedFromParams(p);
+    }
+    throw new Error(`Unknown tooltip preset: ${String(preset)}`);
+}

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

@@ -0,0 +1,23 @@
+/**
+ * Item tooltip payload for heatmap cells (ECharts `trigger: 'item'`, `seriesType: 'heatmap'`).
+ */
+export interface HeatmapItemTooltipParams {
+    pointerX: number;
+    pointerY: number;
+    seriesIndex: number;
+    dataIndex: number;
+    seriesName: string;
+    xIndex: number;
+    yIndex: number;
+    xLabel: string;
+    yLabel: string;
+    value: number;
+    color?: string;
+}
+export interface HeatmapItemTooltipContext {
+    xAxisData: string[];
+    yAxisData: string[];
+    data: Array<[number, number, number]>;
+    seriesName?: string;
+}
+//# sourceMappingURL=heatmap-item-tooltip.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"heatmap-item-tooltip.types.d.ts","sourceRoot":"","sources":["../../../../../components/chart/heatmap/tooltip/heatmap-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,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,IAAI,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

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

@@ -0,0 +1,3 @@
+/**
+ * Item tooltip payload for heatmap cells (ECharts `trigger: 'item'`, `seriesType: 'heatmap'`).
+ */

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

@@ -0,0 +1,8 @@
+import type { HeatmapItemTooltipContext, HeatmapItemTooltipParams } from './heatmap-item-tooltip.types';
+/**
+ * Build heatmap tooltip params from an ECharts `showTip` action and chart instance.
+ */
+export declare function heatmapItemParamsFromShowTip(chart: any, evt: any, ctx: HeatmapItemTooltipContext, themeSeries: Array<{
+    color: string;
+}>): HeatmapItemTooltipParams | null;
+//# sourceMappingURL=heatmap-item-tooltip.utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"heatmap-item-tooltip.utils.d.ts","sourceRoot":"","sources":["../../../../../components/chart/heatmap/tooltip/heatmap-item-tooltip.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAoCxG;;GAEG;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,CAkDjC"}

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

@@ -0,0 +1,87 @@
+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 heatmapItemPixel(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 heatmap tooltip params from an ECharts `showTip` action and chart instance.
+ */
+export function heatmapItemParamsFromShowTip(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 !== 'heatmap')
+        return null;
+    const data = seriesModel.getData?.();
+    if (!data)
+        return null;
+    const diInside = resolveDataIndexInside(data, evt);
+    if (diInside == null || diInside < 0)
+        return null;
+    const pixel = heatmapItemPixel(chart, seriesModel, data, diInside);
+    if (!pixel)
+        return null;
+    const row = ctx.data[diInside];
+    if (!row || row.length < 3)
+        return null;
+    const xIndex = Number(row[0]);
+    const yIndex = Number(row[1]);
+    const value = Number(row[2]);
+    if (!Number.isFinite(xIndex) || !Number.isFinite(yIndex) || !Number.isFinite(value))
+        return null;
+    const xLabel = ctx.xAxisData[xIndex] ?? String(xIndex);
+    const yLabel = ctx.yAxisData[yIndex] ?? String(yIndex);
+    const seriesName = ctx.seriesName != null && ctx.seriesName !== ''
+        ? String(ctx.seriesName)
+        : `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,
+        xIndex,
+        yIndex,
+        xLabel,
+        yLabel,
+        value,
+        ...(typeof color === 'string' ? { color } : {}),
+    };
+}

package/heatmap/tooltip/index.d.ts

@@ -0,0 +1,4 @@
+export { createHeatmapTooltipPreset } from './heatmap-item-tooltip-presets';
+export { useHeatmapItemTooltip } from './use-heatmap-item-tooltip';
+export type { HeatmapItemTooltipParams, HeatmapItemTooltipContext } from './heatmap-item-tooltip.types';
+//# sourceMappingURL=index.d.ts.map

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

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

package/heatmap/tooltip/index.js

@@ -0,0 +1,2 @@
+export { createHeatmapTooltipPreset } from './heatmap-item-tooltip-presets';
+export { useHeatmapItemTooltip } from './use-heatmap-item-tooltip';

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { HeatmapItemTooltipContext, HeatmapItemTooltipParams } from './heatmap-item-tooltip.types';
+export interface UseHeatmapItemTooltipOptions {
+    active: boolean;
+    renderTooltip: (params: HeatmapItemTooltipParams) => React.ReactNode;
+    contextRef: React.RefObject<HeatmapItemTooltipContext>;
+    themeSeriesRef: React.RefObject<Array<{
+        color: string;
+    }>>;
+    width: number;
+    height: number;
+}
+export interface UseHeatmapItemTooltipResult {
+    attachHeatmapItemTooltipListeners: (chart: {
+        on: (ev: string, fn: (...args: any[]) => void) => void;
+        off: (ev: string, fn: (...args: any[]) => void) => void;
+    }) => () => void;
+    renderHeatmapTooltipOverlay: () => React.ReactNode;
+}
+/** Heatmap cell tooltip as React Native UI (`trigger: 'item'`). */
+export declare function useHeatmapItemTooltip(options: UseHeatmapItemTooltipOptions): UseHeatmapItemTooltipResult;
+//# sourceMappingURL=use-heatmap-item-tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-heatmap-item-tooltip.d.ts","sourceRoot":"","sources":["../../../../../components/chart/heatmap/tooltip/use-heatmap-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,mEAAmE;AACnE,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,4BAA4B,GAAG,2BAA2B,CAiDxG"}

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

@@ -0,0 +1,43 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { ChartPointerTooltipOverlay } from '../../tooltip/chart-pointer-tooltip-overlay';
+import { heatmapItemParamsFromShowTip } from './heatmap-item-tooltip.utils';
+/** Heatmap cell tooltip as React Native UI (`trigger: 'item'`). */
+export function useHeatmapItemTooltip(options) {
+    const { active, renderTooltip, contextRef, themeSeriesRef, width, height } = options;
+    const [params, setParams] = useState(null);
+    useEffect(() => {
+        if (!active)
+            setParams(null);
+    }, [active]);
+    const attachHeatmapItemTooltipListeners = useCallback((chart) => {
+        if (!active)
+            return () => { };
+        const onShowTip = (evt) => {
+            const ctx = contextRef.current;
+            if (!ctx?.data?.length) {
+                setParams(null);
+                return;
+            }
+            const next = heatmapItemParamsFromShowTip(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 renderHeatmapTooltipOverlay = 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 {
+        attachHeatmapItemTooltipListeners,
+        renderHeatmapTooltipOverlay,
+    };
+}

package/index.d.ts

@@ -13,6 +13,7 @@ export * from './gauge';
 export * from './geo';
 export * from './bubble';
 export * from './candlestick';
+export * from './heatmap';
 export * from './axis';
 export * from './chart-theme.context';
 export * from './chart-container';

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,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"}
+{"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,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC"}

package/index.js

@@ -12,6 +12,7 @@ export * from './gauge';
 export * from './geo';
 export * from './bubble';
 export * from './candlestick';
+export * from './heatmap';
 export * from './axis';
 export * from './chart-theme.context';
 export * from './chart-container';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wavemaker/react-native-echarts",
-  "version": "1.0.0-dev.11",
+  "version": "1.0.0-dev.12",
   "description": "React Native chart components built on using e-charts library.",
   "license": "MIT",
   "repository": {