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

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

@@ -1,4 +1,7 @@
 import type { CartesianChartProps, CartesianChartSelectEvent } from '../props/cartesian';
+import type { ChartTooltipOption } from '../tooltip';
+/** @deprecated Use {@link ChartTooltipOption} from `../tooltip`. */
+export type AreaChartTooltip = ChartTooltipOption;
 /**
  * Area/line/bar series data shape:
  * - Single series: number[]
@@ -14,6 +17,7 @@ export type SeriesData = number[] | [string | number, number][] | Array<{
 }>;
 /** @deprecated Use {@link CartesianChartSelectEvent} from `../props/cartesian`. */
 export type AreaChartSelectEvent = CartesianChartSelectEvent;
+export type { AxisTooltipParams as AreaChartAxisTooltipParams, AxisTooltipSeriesItem as AreaChartTooltipSeriesItem, } from '../cartesian/tooltip/axis-tooltip.types';
 /**
  * Props for AreaChart.
  * common -> cartesian -> area

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

@@ -1 +1 @@
-{"version":3,"file":"area-chart.props.d.ts","sourceRoot":"","sources":["../../../../components/chart/area/area-chart.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAEzF;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAClB,MAAM,EAAE,GACR,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,EAAE,GAC3B,KAAK,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC,GACxC,KAAK,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,EAAE,CAAA;CAAE,CAAC,CAAC;AAEhE,mFAAmF;AACnF,MAAM,MAAM,oBAAoB,GAAG,yBAAyB,CAAC;AAE7D;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD;;OAEG;IACH,IAAI,EAAE,UAAU,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;IAC1C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IACtG;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IACzE;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,aAAa,GAAG,OAAO,CAAC;CACjD"}
+{"version":3,"file":"area-chart.props.d.ts","sourceRoot":"","sources":["../../../../components/chart/area/area-chart.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AACzF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAErD,oEAAoE;AACpE,MAAM,MAAM,gBAAgB,GAAG,kBAAkB,CAAC;AAElD;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAClB,MAAM,EAAE,GACR,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,EAAE,GAC3B,KAAK,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC,GACxC,KAAK,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,EAAE,CAAA;CAAE,CAAC,CAAC;AAEhE,mFAAmF;AACnF,MAAM,MAAM,oBAAoB,GAAG,yBAAyB,CAAC;AAE7D,YAAY,EACV,iBAAiB,IAAI,0BAA0B,EAC/C,qBAAqB,IAAI,0BAA0B,GACpD,MAAM,yCAAyC,CAAC;AAEjD;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD;;OAEG;IACH,IAAI,EAAE,UAAU,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;IAC1C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IACtG;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IACzE;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,aAAa,GAAG,OAAO,CAAC;CACjD"}

package/area/index.d.ts

@@ -1,3 +1,3 @@
 export { AreaChart } from './area-chart';
-export type { AreaChartProps, AreaChartSelectEvent, SeriesData, } from './area-chart.props';
+export type { AreaChartProps, AreaChartSelectEvent, AreaChartAxisTooltipParams, AreaChartTooltip, AreaChartTooltipSeriesItem, SeriesData, } from './area-chart.props';
 //# sourceMappingURL=index.d.ts.map

package/area/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/chart/area/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,YAAY,EACV,cAAc,EACd,oBAAoB,EACpB,UAAU,GACX,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/chart/area/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,YAAY,EACV,cAAc,EACd,oBAAoB,EACpB,0BAA0B,EAC1B,gBAAgB,EAChB,0BAA0B,EAC1B,UAAU,GACX,MAAM,oBAAoB,CAAC"}

package/axis.d.ts

@@ -1,3 +1,29 @@
 export declare const getAxisByMinMax: (min?: number, max?: number, interval?: number) => number[];
 export declare const getAxis: (data: number[]) => number[];
+/**
+ * Maps explicit Cartesian Y (value) axis props to axis `min` / `max` / `interval`.
+ * When all three are omitted, returns `undefined` so the chart library chooses the scale.
+ */
+export declare function valueAxisBoundsFromProps(params: {
+    minY?: number;
+    maxY?: number;
+    intervalY?: number;
+}): {
+    min?: number;
+    max?: number;
+    interval?: number;
+} | undefined;
+/**
+ * Maps explicit Cartesian X-axis props to axis `min` / `max` / `interval`.
+ * When all three are omitted, returns `undefined` so the chart library chooses the scale.
+ */
+export declare function xAxisBoundsFromProps(params: {
+    minX?: number;
+    maxX?: number;
+    intervalX?: number;
+}): {
+    min?: number;
+    max?: number;
+    interval?: number;
+} | undefined;
 //# sourceMappingURL=axis.d.ts.map

package/axis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axis.d.ts","sourceRoot":"","sources":["../../../components/chart/axis.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,GAAI,YAAO,EAAE,YAAS,EAAE,WAAW,MAAM,aAUpE,CAAA;AAED,eAAO,MAAM,OAAO,GAAI,MAAM,MAAM,EAAE,aAIrC,CAAA"}
+{"version":3,"file":"axis.d.ts","sourceRoot":"","sources":["../../../components/chart/axis.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,GAAI,YAAO,EAAE,YAAS,EAAE,WAAW,MAAM,aAUpE,CAAA;AAED,eAAO,MAAM,OAAO,GAAI,MAAM,MAAM,EAAE,aAIrC,CAAA;AAiBD;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,EAAE;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CAMhE;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CAMhE"}

package/axis.js

@@ -14,3 +14,38 @@ export const getAxis = (data) => {
     const max = Math.max(...data);
     return getAxisByMinMax(min, max);
 };
+function axisMinMaxIntervalFromFields(params) {
+    const out = {};
+    if (params.min !== undefined)
+        out.min = params.min;
+    if (params.max !== undefined)
+        out.max = params.max;
+    if (params.interval !== undefined)
+        out.interval = params.interval;
+    if (out.min === undefined && out.max === undefined && out.interval === undefined) {
+        return undefined;
+    }
+    return out;
+}
+/**
+ * Maps explicit Cartesian Y (value) axis props to axis `min` / `max` / `interval`.
+ * When all three are omitted, returns `undefined` so the chart library chooses the scale.
+ */
+export function valueAxisBoundsFromProps(params) {
+    return axisMinMaxIntervalFromFields({
+        min: params.minY,
+        max: params.maxY,
+        interval: params.intervalY,
+    });
+}
+/**
+ * Maps explicit Cartesian X-axis props to axis `min` / `max` / `interval`.
+ * When all three are omitted, returns `undefined` so the chart library chooses the scale.
+ */
+export function xAxisBoundsFromProps(params) {
+    return axisMinMaxIntervalFromFields({
+        min: params.minX,
+        max: params.maxX,
+        interval: params.intervalX,
+    });
+}

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

@@ -1 +1 @@
-{"version":3,"file":"bubble-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/bubble/bubble-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAS7D,OAAO,KAAqC,MAAM,OAAO,CAAC;AAG1D,+CAA+C;AAC/C,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAkV/E,eAAO,MAAM,WAAW;;;;;;;CAEtB,CAAC"}
+{"version":3,"file":"bubble-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/bubble/bubble-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAS7D,OAAO,KAAqC,MAAM,OAAO,CAAC;AAY1D,+CAA+C;AAC/C,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAwY/E,eAAO,MAAM,WAAW;;;;;;;CAEtB,CAAC"}

package/bubble/bubble-chart.js

@@ -5,6 +5,11 @@ import { ScatterChart as EChartsScatterChart } 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 { valueAxisBoundsFromProps, xAxisBoundsFromProps } from '../axis';
+import { echartsLegendLayoutFragment, mergeCartesianGridForLegend, } from '../legend/echarts-legend-layout';
+import { axisTooltipShowContentFlag } from '../cartesian/tooltip';
+import { createScatterTooltipPreset, useScatterItemTooltip } from '../scatter/tooltip';
 echarts.use([
     TooltipComponent,
     GridComponent,
@@ -18,12 +23,31 @@ function scaleSize(value, dataMin, dataMax, outMin, outMax) {
     const t = (value - dataMin) / (dataMax - dataMin);
     return outMin + t * (outMax - outMin);
 }
-const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sizeRange = [8, 50], showXAxis = true, showXAxisTicks = true, showYAxis = true, showYAxisTicks = true, showXAxisSplitLines = true, showYAxisSplitLines = true, boundaryGap = false, grid, showLegend = false, showHighlighter = true, xAxisTickLabelFormatter, yAxisTickLabelFormatter, xAxisLabel, yAxisLabel, onSelect, ...props }) => {
+const DEFAULT_SIZE_RANGE = [8, 50];
+const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', sizeRange = DEFAULT_SIZE_RANGE, showXAxis = true, showXAxisTicks = true, showYAxis = true, showYAxisTicks = true, showXAxisSplitLines = true, showYAxisSplitLines = true, boundaryGap = false, grid, showLegend = true, legendPosition = 'bottom', showHighlighter = true, tooltip = 'card', xAxisTickLabelFormatter, yAxisTickLabelFormatter, xAxisLabel, yAxisLabel, minX, maxX, intervalX, minY, maxY, intervalY, onSelect, renderTooltip, ...props }) => {
     const { theme } = useChartTheme(props.theme, props.colors);
     const chartRef = useRef(null);
     const onSelectRef = useRef(onSelect);
     onSelectRef.current = onSelect;
     const selectContextRef = useRef({ normalizedSeries: [] });
+    const themeSeriesRef = useRef(theme.series);
+    themeSeriesRef.current = theme.series;
+    const tooltipOverlayActive = renderTooltip != null || tooltip !== 'none';
+    const renderTooltipFn = useMemo(() => {
+        if (renderTooltip != null)
+            return renderTooltip;
+        if (tooltip === 'none')
+            return () => null;
+        return createScatterTooltipPreset(tooltip);
+    }, [renderTooltip, tooltip]);
+    const { attachScatterItemTooltipListeners, renderScatterTooltipOverlay } = useScatterItemTooltip({
+        active: tooltipOverlayActive,
+        renderTooltip: renderTooltipFn,
+        contextRef: selectContextRef,
+        themeSeriesRef,
+        width,
+        height,
+    });
     const normalizedSeries = useMemo(() => {
         if (!Array.isArray(data) || data.length === 0)
             return [];
@@ -52,42 +76,35 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', si
         return [];
     }, [data]);
     const hasNamedSeries = useMemo(() => normalizedSeries.some((s) => 'name' in s && s.name), [normalizedSeries]);
-    selectContextRef.current = { normalizedSeries };
+    selectContextRef.current = {
+        normalizedSeries: normalizedSeries,
+    };
+    const valueAxisBounds = useMemo(() => valueAxisBoundsFromProps({ minY, maxY, intervalY }), [minY, maxY, intervalY]);
+    const xAxisBounds = useMemo(() => xAxisBoundsFromProps({ minX, maxX, intervalX }), [minX, maxX, intervalX]);
     const option = useMemo(() => {
-        const tooltipConfig = showHighlighter
+        const tooltipConfig = tooltipOverlayActive
             ? {
                 trigger: 'item',
-                axisPointer: {
-                    type: 'cross',
-                    lineStyle: {
+                ...axisTooltipShowContentFlag(true),
+                ...(showHighlighter && {
+                    axisPointer: {
                         type: 'line',
-                        width: 1,
-                        color: theme.series[0]?.color ?? '#999',
+                        lineStyle: {
+                            type: 'line',
+                            width: 1,
+                            color: '#00000000',
+                        },
+                        label: {
+                            show: false,
+                        },
                     },
-                },
-                formatter: (params) => {
-                    const p = Array.isArray(params) ? params[0] : params;
-                    const d = p?.data;
-                    if (!d || !Array.isArray(d))
-                        return '';
-                    const name = p.seriesName ? `${p.seriesName}<br/>` : '';
-                    return `${name}x: ${d[0]}, y: ${d[1]}${d[2] != null ? `, size: ${d[2]}` : ''}`;
-                },
+                }),
             }
-            : {
-                trigger: 'item',
-                formatter: (params) => {
-                    const p = Array.isArray(params) ? params[0] : params;
-                    const d = p?.data;
-                    if (!d || !Array.isArray(d))
-                        return '';
-                    const name = p.seriesName ? `${p.seriesName}<br/>` : '';
-                    return `${name}x: ${d[0]}, y: ${d[1]}${d[2] != null ? `, size: ${d[2]}` : ''}`;
-                },
-            };
+            : { show: false };
         const xAxisConfig = {
             type: 'value',
             boundaryGap,
+            ...(xAxisBounds ?? {}),
             ...(xAxisLabel != null && xAxisLabel !== '' && {
                 name: xAxisLabel,
                 nameLocation: 'middle',
@@ -109,7 +126,7 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', si
                 }
                 : { show: false },
             axisTick: {
-                show: showXAxisTicks,
+                show: showXAxis && showXAxisTicks,
                 lineStyle: {
                     color: theme.axis.x.tickColor,
                     width: theme.axis.x.tickWidth,
@@ -125,6 +142,7 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', si
         };
         const yAxisConfig = {
             type: 'value',
+            ...(valueAxisBounds ?? {}),
             ...(yAxisLabel != null && yAxisLabel !== '' && {
                 name: yAxisLabel,
                 nameLocation: 'middle',
@@ -146,7 +164,7 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', si
                 }
                 : { show: false },
             axisTick: {
-                show: showYAxisTicks,
+                show: showYAxis && showYAxisTicks,
                 lineStyle: {
                     color: theme.axis.y.tickColor,
                     width: theme.axis.y.tickWidth,
@@ -165,6 +183,7 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', si
                 data: normalizedSeries
                     .filter((s) => 'name' in s && s.name)
                     .map((s) => s.name),
+                ...echartsLegendLayoutFragment(legendPosition),
                 textStyle: {
                     color: theme.legend.textColor,
                     fontSize: theme.legend.fontSize,
@@ -193,7 +212,7 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', si
                 itemStyle: { color: seriesColor },
                 emphasis: showHighlighter
                     ? {
-                        focus: 'self',
+                        focus: 'none',
                         scale: true,
                         itemStyle: {
                             color: seriesColor,
@@ -215,8 +234,10 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', si
         };
         if (legendConfig)
             config.legend = legendConfig;
-        if (grid)
-            config.grid = grid;
+        const mergedGrid = mergeCartesianGridForLegend(grid, legendPosition, showLegend, hasNamedSeries);
+        if (mergedGrid !== undefined && Object.keys(mergedGrid).length > 0) {
+            config.grid = mergedGrid;
+        }
         return config;
     }, [
         theme,
@@ -232,19 +253,25 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', si
         boundaryGap,
         grid,
         showLegend,
+        legendPosition,
         hasNamedSeries,
         showHighlighter,
+        tooltipOverlayActive,
         xAxisTickLabelFormatter,
         yAxisTickLabelFormatter,
         xAxisLabel,
         yAxisLabel,
+        valueAxisBounds,
+        xAxisBounds,
     ]);
     useEffect(() => {
         let chart;
+        let detachScatterTooltip = () => { };
         if (chartRef.current) {
             try {
                 chart = echarts.init(chartRef.current, 'light', { width, height });
                 chart.setOption(option);
+                detachScatterTooltip = attachScatterItemTooltipListeners(chart);
                 const handleSeriesClick = (params) => {
                     const cb = onSelectRef.current;
                     if (typeof cb !== 'function')
@@ -287,6 +314,7 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', si
             }
         }
         return () => {
+            detachScatterTooltip();
             if (chart) {
                 try {
                     chart.dispose();
@@ -296,8 +324,11 @@ const ChartComponent = ({ data, width = 220, height = 350, symbol = 'circle', si
                 }
             }
         };
-    }, [option, width, height]);
-    return <SkiaChart ref={chartRef} useRNGH/>;
+    }, [option, width, height, attachScatterItemTooltipListeners]);
+    return (<View style={{ width, height, position: 'relative' }}>
+      <SkiaChart ref={chartRef} useRNGH/>
+      {renderScatterTooltipOverlay()}
+    </View>);
 };
 const BubbleChartComponent = withResponsiveContainer(withChartTheme(ChartComponent));
 export const BubbleChart = Object.assign(BubbleChartComponent, {

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

@@ -1 +1 @@
-{"version":3,"file":"candlestick-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/candlestick/candlestick-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAmB,MAAM,2BAA2B,CAAC;AASxF,OAAO,KAAqC,MAAM,OAAO,CAAC;AAG1D,YAAY,EAAE,qBAAqB,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAyUzG,eAAO,MAAM,gBAAgB;;;;;;;CAE3B,CAAC"}
+{"version":3,"file":"candlestick-chart.d.ts","sourceRoot":"","sources":["../../../../components/chart/candlestick/candlestick-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAmB,MAAM,2BAA2B,CAAC;AASxF,OAAO,KAAqC,MAAM,OAAO,CAAC;AAK1D,YAAY,EAAE,qBAAqB,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAwWzG,eAAO,MAAM,gBAAgB;;;;;;;CAE3B,CAAC"}

package/candlestick/candlestick-chart.js

@@ -5,6 +5,8 @@ import { BarChart, CandlestickChart as EChartsCandlestickChart, LineChart } from
 import { GridComponent, LegendComponent, TooltipComponent, } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import React, { useEffect, useMemo, useRef } from 'react';
+import { valueAxisBoundsFromProps, xAxisBoundsFromProps } from '../axis';
+import { echartsLegendLayoutFragment } from '../legend/echarts-legend-layout';
 echarts.use([
     TooltipComponent,
     GridComponent,
@@ -14,25 +16,25 @@ echarts.use([
     BarChart,
     LineChart,
 ]);
-const ChartComponent = ({ data, xAxisData, volumeData, ma5, ma10, ma20, width = 220, height = 350, boundaryGap = true, showXAxis = true, showXAxisTicks = true, showYAxis = true, showYAxisTicks = true, showXAxisSplitLines = true, showYAxisSplitLines = true, grid, showLegend = false, showHighlighter = true, positiveColor = '#008000', negativeColor = '#FF2C2C', xAxisTickLabelFormatter, yAxisTickLabelFormatter, xAxisTicks, xAxisLabel, yAxisLabel, onSelect, ...props }) => {
+const ChartComponent = ({ data, xAxisData, volumeData, ma5, ma10, ma20, width = 220, height = 350, boundaryGap = true, showXAxis = true, showXAxisTicks = true, showYAxis = true, showYAxisTicks = true, showXAxisSplitLines = true, showYAxisSplitLines = true, grid, showLegend = true, legendPosition = 'bottom', showHighlighter = true, positiveColor = '#008000', negativeColor = '#FF2C2C', xAxisTickLabelFormatter, yAxisTickLabelFormatter, xAxisLabel, yAxisLabel, minX, maxX, intervalX, minY, maxY, intervalY, onSelect, ...props }) => {
     const { theme } = useChartTheme(props.theme, undefined);
     const chartRef = useRef(null);
     const onSelectRef = useRef(onSelect);
     onSelectRef.current = onSelect;
     const selectContextRef = useRef({ categories: [], ohlcData: [] });
     const categories = useMemo(() => {
-        if (xAxisTicks != null && xAxisTicks.length > 0)
-            return xAxisTicks;
         if (xAxisData?.length)
             return xAxisData.map(String);
         return data.map((_, i) => String(i));
-    }, [xAxisTicks, xAxisData, data]);
+    }, [xAxisData, data]);
     const hasVolume = volumeData != null && volumeData.length > 0;
     const hasMA = (ma5?.length ?? 0) > 0 || (ma10?.length ?? 0) > 0 || (ma20?.length ?? 0) > 0;
     selectContextRef.current = { categories, ohlcData: data };
     const option = useMemo(() => {
         if (!data?.length)
             return { series: [] };
+        const valueAxisBounds = valueAxisBoundsFromProps({ minY, maxY, intervalY });
+        const xAxisBounds = xAxisBoundsFromProps({ minX, maxX, intervalX });
         const tooltipConfig = showHighlighter
             ? {
                 trigger: 'axis',
@@ -47,6 +49,24 @@ const ChartComponent = ({ data, xAxisData, volumeData, ma5, ma10, ma20, width =
         const volumeGrid = hasVolume
             ? { left: '10%', right: '8%', top: '72%', height: '18%' }
             : undefined;
+        if (showLegend && hasMA) {
+            if (legendPosition === 'left') {
+                mainGrid.left = '30%';
+                if (volumeGrid)
+                    volumeGrid.left = '30%';
+            }
+            else if (legendPosition === 'right') {
+                mainGrid.right = '30%';
+                if (volumeGrid)
+                    volumeGrid.right = '30%';
+            }
+            else if (legendPosition === 'top') {
+                mainGrid.top = hasVolume ? '18%' : '14%';
+            }
+            else if (legendPosition === 'bottom' && !hasVolume) {
+                mainGrid.bottom = '24%';
+            }
+        }
         const xAxisMain = {
             type: 'category',
             data: categories,
@@ -66,13 +86,14 @@ const ChartComponent = ({ data, xAxisData, volumeData, ma5, ma10, ma20, width =
                 ? { show: true, lineStyle: { color: theme.axis.x.lineColor, width: theme.axis.x.lineWidth } }
                 : { show: false },
             axisTick: {
-                show: showXAxisTicks,
+                show: showXAxis && showXAxisTicks,
                 lineStyle: { color: theme.axis.x.tickColor, width: theme.axis.x.tickWidth },
             },
             splitLine: {
                 show: showXAxisSplitLines,
                 lineStyle: { color: theme.axis.x.splitLineColor, width: theme.axis.x.splitLineWidth },
             },
+            ...(xAxisBounds ?? {}),
         };
         if (hasVolume) {
             xAxisMain.gridIndex = 0;
@@ -80,7 +101,7 @@ const ChartComponent = ({ data, xAxisData, volumeData, ma5, ma10, ma20, width =
         }
         const yAxisMain = {
             type: 'value',
-            scale: true,
+            ...(valueAxisBounds ?? { scale: true }),
             ...(yAxisLabel != null && yAxisLabel !== '' && {
                 name: yAxisLabel,
                 nameLocation: 'middle',
@@ -96,7 +117,7 @@ const ChartComponent = ({ data, xAxisData, volumeData, ma5, ma10, ma20, width =
                 ? { show: true, lineStyle: { color: theme.axis.y.lineColor, width: theme.axis.y.lineWidth } }
                 : { show: false },
             axisTick: {
-                show: showYAxisTicks,
+                show: showYAxis && showYAxisTicks,
                 lineStyle: { color: theme.axis.y.tickColor, width: theme.axis.y.tickWidth },
             },
             splitLine: {
@@ -201,6 +222,7 @@ const ChartComponent = ({ data, xAxisData, volumeData, ma5, ma10, ma20, width =
                         return ma10?.length;
                     return ma20?.length;
                 }),
+                ...echartsLegendLayoutFragment(legendPosition),
                 textStyle: { color: theme.legend.textColor, fontSize: theme.legend.fontSize },
                 backgroundColor: theme.legend.backgroundColor,
             };
@@ -225,14 +247,21 @@ const ChartComponent = ({ data, xAxisData, volumeData, ma5, ma10, ma20, width =
         showYAxisSplitLines,
         grid,
         showLegend,
+        legendPosition,
+        hasMA,
         showHighlighter,
         positiveColor,
         negativeColor,
         xAxisTickLabelFormatter,
         yAxisTickLabelFormatter,
-        xAxisTicks,
         xAxisLabel,
         yAxisLabel,
+        minX,
+        maxX,
+        intervalX,
+        minY,
+        maxY,
+        intervalY,
     ]);
     useEffect(() => {
         let chart;

package/cartesian/tooltip/axis-tooltip-presets.d.ts

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

package/cartesian/tooltip/axis-tooltip-presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"axis-tooltip-presets.d.ts","sourceRoot":"","sources":["../../../../../components/chart/cartesian/tooltip/axis-tooltip-presets.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAOxD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AA0D9D,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,kBAAkB,GACzB,CAAC,MAAM,EAAE,iBAAiB,KAAK,KAAK,CAAC,YAAY,CAYnD"}

package/cartesian/tooltip/axis-tooltip-presets.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { TooltipPresetCard, TooltipPresetCompact, TooltipPresetKpi, TooltipPresetStriped, } from '../../tooltip/chart-tooltip-preset-shells';
+function axisCardFromParams({ axisValue, series }) {
+    return (<TooltipPresetCard categoryTitle={String(axisValue)} seriesRows={series.map((s) => ({
+            key: s.seriesIndex,
+            swatchColor: s.color ?? '#94a3b8',
+            label: s.seriesName,
+            value: s.value,
+        }))}/>);
+}
+function axisCompactFromParams({ axisValue, series }) {
+    const detail = series.map((s) => `${s.seriesName} ${s.value}`).join(' · ');
+    return <TooltipPresetCompact emphasis={String(axisValue)} detail={detail} wrap/>;
+}
+function axisKpiFromParams({ axisValue, series }) {
+    const primary = series[0];
+    const rest = series.slice(1);
+    return (<TooltipPresetKpi accentColor={primary?.color ?? '#3b82f6'} minWidth={160} overline={String(axisValue)} metric={primary?.value ?? ''} caption={primary?.seriesName} footerRows={rest.length > 0
+            ? rest.map((s) => ({
+                key: s.seriesIndex,
+                left: s.seriesName,
+                right: s.value,
+            }))
+            : undefined}/>);
+}
+function axisStripedFromParams({ axisValue, series }) {
+    return (<TooltipPresetStriped headerTitle={String(axisValue)} rows={series.map((s) => ({
+            key: `s-${s.seriesIndex}`,
+            leftLabel: s.seriesName,
+            leftSwatchColor: s.color ?? '#64748b',
+            right: s.value,
+        }))}/>);
+}
+export function createAxisTooltipPreset(preset) {
+    switch (preset) {
+        case 'card':
+            return (p) => axisCardFromParams(p);
+        case 'compact':
+            return (p) => axisCompactFromParams(p);
+        case 'kpi':
+            return (p) => axisKpiFromParams(p);
+        case 'striped':
+            return (p) => axisStripedFromParams(p);
+    }
+    throw new Error(`Unknown tooltip preset: ${String(preset)}`);
+}

package/cartesian/tooltip/axis-tooltip.types.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Types for axis-triggered tooltips (category axis + one value per series).
+ * Used by area, line, column, and bar charts.
+ */
+/** One series row at the hovered category index. */
+export interface AxisTooltipSeriesItem {
+    seriesName: string;
+    value: number;
+    seriesIndex: number;
+    color?: string;
+}
+/** Axis tooltip fields without pointer position. */
+export interface AxisTooltipContentParams {
+    axisValue: string | number;
+    dataIndex: number;
+    series: AxisTooltipSeriesItem[];
+}
+/** Payload for `renderTooltip` (includes pointer in chart pixel space). */
+export interface AxisTooltipParams extends AxisTooltipContentParams {
+    pointerX: number;
+    pointerY: number;
+}
+/**
+ * Ref snapshot read when `showTip` fires. Keep `categoryAxisData` in sync with the chart’s category axis `data`.
+ */
+export interface AxisTooltipContext {
+    displaySeries: Array<{
+        name?: string;
+        data: [string | number, number][] | number[];
+    }>;
+    categoryAxisData: (string | number)[];
+    /**
+     * Set when the category axis is Y (horizontal column/bar). `showTip` lists that axis in `dataByAxis`;
+     * reading `[0]` would be the value axis and yields a stuck `dataIndex`.
+     */
+    categoryAxisIsY?: boolean;
+}
+//# sourceMappingURL=axis-tooltip.types.d.ts.map

package/cartesian/tooltip/axis-tooltip.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"axis-tooltip.types.d.ts","sourceRoot":"","sources":["../../../../../components/chart/cartesian/tooltip/axis-tooltip.types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,oDAAoD;AACpD,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,oDAAoD;AACpD,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,qBAAqB,EAAE,CAAC;CACjC;AAED,2EAA2E;AAC3E,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB;IACjE,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,aAAa,EAAE,KAAK,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,MAAM,EAAE,CAAA;KAAE,CAAC,CAAC;IACtF,gBAAgB,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACtC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B"}

package/cartesian/tooltip/axis-tooltip.types.js

@@ -0,0 +1,4 @@
+/**
+ * Types for axis-triggered tooltips (category axis + one value per series).
+ * Used by area, line, column, and bar charts.
+ */

package/cartesian/tooltip/axis-tooltip.utils.d.ts

@@ -0,0 +1,10 @@
+import type { AxisTooltipContext, AxisTooltipParams } from './axis-tooltip.types';
+/** Build axis tooltip params from an ECharts `showTip` dispatch payload. */
+export declare function axisTooltipParamsFromShowTipEvent(evt: any, ctx: AxisTooltipContext, seriesTheme: Array<{
+    color: string;
+}>): AxisTooltipParams | null;
+/** Spread onto ECharts `tooltip` when using an RN overlay (`showTip` / `hideTip` still fire). */
+export declare function axisTooltipShowContentFlag(useCustomTooltipOverlay: boolean): {
+    showContent: boolean;
+};
+//# sourceMappingURL=axis-tooltip.utils.d.ts.map

package/cartesian/tooltip/axis-tooltip.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"axis-tooltip.utils.d.ts","sourceRoot":"","sources":["../../../../../components/chart/cartesian/tooltip/axis-tooltip.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAyB,MAAM,sBAAsB,CAAC;AAsEzG,4EAA4E;AAC5E,wBAAgB,iCAAiC,CAC/C,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,kBAAkB,EACvB,WAAW,EAAE,KAAK,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,GACpC,iBAAiB,GAAG,IAAI,CAsD1B;AAED,iGAAiG;AACjG,wBAAgB,0BAA0B,CACxC,uBAAuB,EAAE,OAAO,GAC/B;IAAE,WAAW,EAAE,OAAO,CAAA;CAAE,CAE1B"}