@tranding-custom-chart/react 0.0.0-stage → 2.1.0

package/dist/ChartSyncGroup.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @file packages/chart-react/src/ChartSyncGroup.tsx
+ * Multi-chart synchronization context for cursor and viewport alignment.
+ */
+import React from 'react';
+export interface ChartSyncContextValue {
+    readonly syncHoverIndex: number | null;
+    readonly setSyncHoverIndex: (index: number | null) => void;
+}
+export declare function ChartSyncGroup({ children, }: {
+    readonly children: React.ReactNode;
+}): React.JSX.Element;
+export declare function useChartSync(): ChartSyncContextValue | null;
+//# sourceMappingURL=ChartSyncGroup.d.ts.map

package/dist/ChartSyncGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartSyncGroup.d.ts","sourceRoot":"","sources":["../src/ChartSyncGroup.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAoE,MAAM,OAAO,CAAC;AAEzF,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC5D;AAID,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,GACT,EAAE;IACD,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiBpB;AAED,wBAAgB,YAAY,IAAI,qBAAqB,GAAG,IAAI,CAE3D"}

package/dist/ChartSyncGroup.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @file packages/chart-react/src/ChartSyncGroup.tsx
+ * Multi-chart synchronization context for cursor and viewport alignment.
+ */
+import React, { createContext, useContext, useState, useCallback, useMemo } from 'react';
+const ChartSyncContext = createContext(null);
+export function ChartSyncGroup({ children, }) {
+    const [syncHoverIndex, setIndex] = useState(null);
+    const setSyncHoverIndex = useCallback((index) => {
+        setIndex(index);
+    }, []);
+    const value = useMemo(() => ({ syncHoverIndex, setSyncHoverIndex }), [syncHoverIndex, setSyncHoverIndex]);
+    return (_jsx(ChartSyncContext.Provider, { value: value, children: children }));
+}
+export function useChartSync() {
+    return useContext(ChartSyncContext);
+}

package/dist/ColumnsSeries.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @file packages/chart-react/src/ColumnsSeries.tsx
+ * Declarative Columns chart series for vertical column histograms.
+ */
+import type { OHLCVBar } from '@tranding-custom-chart/core';
+export interface ColumnsSeriesProps {
+    readonly data: readonly OHLCVBar[];
+    readonly upColor?: string | undefined;
+    readonly downColor?: string | undefined;
+    readonly columnWidthRatio?: number | undefined;
+}
+export declare function ColumnsSeries({ data, upColor, downColor, columnWidthRatio, }: ColumnsSeriesProps): null;
+//# sourceMappingURL=ColumnsSeries.d.ts.map

package/dist/ColumnsSeries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnsSeries.d.ts","sourceRoot":"","sources":["../src/ColumnsSeries.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAI5D,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,IAAI,EAAE,SAAS,QAAQ,EAAE,CAAC;IACnC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChD;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,SAAS,EACT,gBAAuB,GACxB,EAAE,kBAAkB,GAAG,IAAI,CAmD3B"}

package/dist/ColumnsSeries.js

@@ -0,0 +1,54 @@
+/**
+ * @file packages/chart-react/src/ColumnsSeries.tsx
+ * Declarative Columns chart series for vertical column histograms.
+ */
+import React, { useEffect, useId } from 'react';
+import { renderColumns } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function ColumnsSeries({ data, upColor, downColor, columnWidthRatio = 0.75, }) {
+    const { registerDataLayer, registerHitTest, xScale, yScale, theme } = useChartContext();
+    const id = useId();
+    useEffect(() => {
+        if (!xScale || !yScale || data.length === 0)
+            return;
+        const unregisterHit = registerHitTest(id, (x, _y) => {
+            const idx = Math.round(xScale.invert(x));
+            if (idx >= 0 && idx < data.length) {
+                const bar = data[idx];
+                const barX = xScale.scale(idx);
+                if (Math.abs(x - barX) <= 20) {
+                    return {
+                        elementType: 'bar',
+                        seriesId: id,
+                        dataIndex: idx,
+                        pointId: bar.time,
+                        label: bar.dateStr ?? String(bar.time),
+                    };
+                }
+            }
+            return null;
+        });
+        return unregisterHit;
+    }, [registerHitTest, id, data, xScale, yScale]);
+    useEffect(() => {
+        if (!xScale || !yScale || data.length === 0)
+            return;
+        const unregister = registerDataLayer(id, (ctx, bounds, padding) => {
+            renderColumns({
+                ctx,
+                bars: data,
+                xScale,
+                yScale,
+                baselineY: bounds.height - padding.bottom,
+                theme: {
+                    ...theme,
+                    upCandle: upColor ?? theme.upCandle,
+                    downCandle: downColor ?? theme.downCandle,
+                },
+                columnWidthRatio,
+            });
+        });
+        return unregister;
+    }, [registerDataLayer, id, data, xScale, yScale, theme, upColor, downColor, columnWidthRatio]);
+    return null;
+}

package/dist/CrosshairOverlay.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @file packages/chart-react/src/CrosshairOverlay.tsx
+ * Declarative interactive crosshair overlay with axis badges.
+ */
+export interface CrosshairOverlayProps {
+    readonly xLabelFormatter?: ((indexOrTime: number) => string) | undefined;
+    readonly yLabelFormatter?: ((price: number) => string) | undefined;
+}
+export declare function CrosshairOverlay({ xLabelFormatter, yLabelFormatter, }: CrosshairOverlayProps): null;
+//# sourceMappingURL=CrosshairOverlay.d.ts.map

package/dist/CrosshairOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrosshairOverlay.d.ts","sourceRoot":"","sources":["../src/CrosshairOverlay.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,WAAW,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IACzE,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;CACpE;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,eAAe,EACf,eAAe,GAChB,EAAE,qBAAqB,GAAG,IAAI,CA+D9B"}

package/dist/CrosshairOverlay.js

@@ -0,0 +1,65 @@
+/**
+ * @file packages/chart-react/src/CrosshairOverlay.tsx
+ * Declarative interactive crosshair overlay with axis badges.
+ */
+import React, { useEffect, useId } from 'react';
+import { renderCrosshair } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function CrosshairOverlay({ xLabelFormatter, yLabelFormatter, }) {
+    const { registerOverlayLayer, hoverPos, hoverIndex, syncHoverIndex, xScale, yScale, theme } = useChartContext();
+    const id = useId();
+    useEffect(() => {
+        const unregister = registerOverlayLayer(id, (ctx, bounds, padding, dpr) => {
+            if (!xScale || !yScale)
+                return;
+            const effectiveIndex = hoverIndex !== null ? hoverIndex : (syncHoverIndex ?? null);
+            if (hoverPos) {
+                // Direct pointer hover: render full crosshair with horizontal line & price badge
+                const priceAtY = yScale.invert(hoverPos.y);
+                const yLabel = yLabelFormatter ? yLabelFormatter(priceAtY) : `₹${priceAtY.toFixed(2)}`;
+                let xLabel;
+                if (effectiveIndex !== null && xLabelFormatter) {
+                    xLabel = xLabelFormatter(effectiveIndex);
+                }
+                renderCrosshair({
+                    ctx,
+                    bounds,
+                    padding,
+                    x: hoverPos.x,
+                    y: hoverPos.y,
+                    theme,
+                    dpr,
+                    xLabel,
+                    yLabel,
+                    showHorizontalLine: true,
+                });
+            }
+            else if (effectiveIndex !== null) {
+                // Synchronized hover from another pane: render synchronized vertical guideline & time badge
+                const x = xScale.scale(effectiveIndex);
+                const left = padding.left;
+                const right = bounds.width - padding.right;
+                if (x < left || x > right)
+                    return;
+                let xLabel;
+                if (xLabelFormatter) {
+                    xLabel = xLabelFormatter(effectiveIndex);
+                }
+                renderCrosshair({
+                    ctx,
+                    bounds,
+                    padding,
+                    x,
+                    y: (padding.top + bounds.height - padding.bottom) / 2,
+                    theme,
+                    dpr,
+                    xLabel,
+                    yLabel: undefined,
+                    showHorizontalLine: false,
+                });
+            }
+        });
+        return unregister;
+    }, [registerOverlayLayer, id, hoverPos, hoverIndex, syncHoverIndex, xScale, yScale, theme, xLabelFormatter, yLabelFormatter]);
+    return null;
+}

package/dist/DrawingOverlay.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @file packages/chart-react/src/DrawingOverlay.tsx
+ * Declarative interactive technical drawings layer (trendlines, levels, and measurement rulers).
+ */
+import type { DrawingHandleType, DrawingItem } from '@tranding-custom-chart/core';
+export interface DrawingOverlayProps {
+    readonly drawings: readonly DrawingItem[];
+    readonly selectedDrawingId?: string | null | undefined;
+    readonly activeHandle?: DrawingHandleType | null | undefined;
+    readonly onSelectDrawing?: ((id: string | null) => void) | undefined;
+    readonly onChangeDrawing?: ((drawing: DrawingItem, action?: string) => void) | undefined;
+    readonly onDeleteDrawing?: ((id: string) => void) | undefined;
+    readonly editable?: boolean | undefined;
+}
+export declare function DrawingOverlay({ drawings, selectedDrawingId, activeHandle, }: DrawingOverlayProps): null;
+//# sourceMappingURL=DrawingOverlay.d.ts.map

package/dist/DrawingOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawingOverlay.d.ts","sourceRoot":"","sources":["../src/DrawingOverlay.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAKlF,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,QAAQ,EAAE,SAAS,WAAW,EAAE,CAAC;IAC1C,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACvD,QAAQ,CAAC,YAAY,CAAC,EAAE,iBAAiB,GAAG,IAAI,GAAG,SAAS,CAAC;IAC7D,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACrE,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACzF,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC9D,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACzC;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,iBAAwB,EACxB,YAAmB,GACpB,EAAE,mBAAmB,GAAG,IAAI,CA8C5B"}

package/dist/DrawingOverlay.js

@@ -0,0 +1,50 @@
+/**
+ * @file packages/chart-react/src/DrawingOverlay.tsx
+ * Declarative interactive technical drawings layer (trendlines, levels, and measurement rulers).
+ */
+import React, { useEffect, useId } from 'react';
+import { hitTestAllDrawings } from '@tranding-custom-chart/core';
+import { renderDrawings } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function DrawingOverlay({ drawings, selectedDrawingId = null, activeHandle = null, }) {
+    const { registerOverlayLayer, registerHitTest, requestRender, xScale, yScale, bounds, padding } = useChartContext();
+    const id = useId();
+    useEffect(() => {
+        if (!xScale || !yScale || drawings.length === 0)
+            return;
+        const unregisterHit = registerHitTest(id, (x, y) => {
+            const hit = hitTestAllDrawings(drawings, x, y, xScale, yScale, 8);
+            if (hit) {
+                return {
+                    elementType: 'drawing',
+                    seriesId: id,
+                    elementId: hit.drawing.id,
+                    label: `${hit.drawing.type} (${hit.handle}): ${hit.drawing.id}`,
+                    pointId: hit.handle,
+                };
+            }
+            return null;
+        });
+        return unregisterHit;
+    }, [registerHitTest, id, drawings, xScale, yScale]);
+    useEffect(() => {
+        if (!xScale || !yScale)
+            return;
+        const unregister = registerOverlayLayer(id, (ctx, _bounds, _padding, dpr) => {
+            renderDrawings({
+                ctx,
+                drawings,
+                xScale,
+                yScale,
+                bounds,
+                padding,
+                dpr,
+                selectedDrawingId,
+                activeHandle,
+            });
+        });
+        requestRender();
+        return unregister;
+    }, [registerOverlayLayer, requestRender, id, drawings, xScale, yScale, bounds, padding, selectedDrawingId, activeHandle]);
+    return null;
+}

package/dist/GridAxes.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @file packages/chart-react/src/GridAxes.tsx
+ * Declarative background grid and axes layer.
+ */
+import type { LineStyle, Scale } from '@tranding-custom-chart/core';
+export interface GridAxesProps {
+    readonly xTickFormatter?: ((val: number) => string) | undefined;
+    readonly yTickFormatter?: ((val: number) => string) | undefined;
+    readonly showXGrid?: boolean | undefined;
+    readonly showYGrid?: boolean | undefined;
+    readonly gridStyle?: LineStyle | undefined;
+    /** Primary Y-Axis position: 'left', 'right' (default), or 'both' */
+    readonly yAxisPosition?: 'left' | 'right' | 'both' | undefined;
+    /** Secondary Y-Scale for dual-axis mixed charts */
+    readonly secondaryYScale?: Scale<number> | undefined;
+    readonly secondaryYTickFormatter?: ((val: number) => string) | undefined;
+}
+export declare function GridAxes({ xTickFormatter, yTickFormatter, showXGrid, showYGrid, gridStyle, yAxisPosition, secondaryYScale, secondaryYTickFormatter, }: GridAxesProps): null;
+//# sourceMappingURL=GridAxes.d.ts.map

package/dist/GridAxes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridAxes.d.ts","sourceRoot":"","sources":["../src/GridAxes.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAIpE,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IAChE,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IAChE,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC3C,oEAAoE;IACpE,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAC/D,mDAAmD;IACnD,QAAQ,CAAC,eAAe,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACrD,QAAQ,CAAC,uBAAuB,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;CAC1E;AAED,wBAAgB,QAAQ,CAAC,EACvB,cAAc,EACd,cAAc,EACd,SAAgB,EAChB,SAAgB,EAChB,SAAoB,EACpB,aAAuB,EACvB,eAAe,EACf,uBAAuB,GACxB,EAAE,aAAa,GAAG,IAAI,CA6CtB"}

package/dist/GridAxes.js

@@ -0,0 +1,50 @@
+/**
+ * @file packages/chart-react/src/GridAxes.tsx
+ * Declarative background grid and axes layer.
+ */
+import React, { useEffect, useId } from 'react';
+import { renderGridAndAxes } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function GridAxes({ xTickFormatter, yTickFormatter, showXGrid = true, showYGrid = true, gridStyle = 'dashed', yAxisPosition = 'right', secondaryYScale, secondaryYTickFormatter, }) {
+    const { registerDataLayer, xScale, yScale, theme } = useChartContext();
+    const id = useId();
+    useEffect(() => {
+        if (!xScale || !yScale)
+            return;
+        const unregister = registerDataLayer(id, (ctx, bounds, padding, dpr) => {
+            renderGridAndAxes({
+                ctx,
+                bounds,
+                padding,
+                xScale,
+                yScale,
+                theme,
+                dpr,
+                xTickFormatter,
+                yTickFormatter,
+                showXGrid,
+                showYGrid,
+                gridStyle,
+                yAxisPosition,
+                secondaryYScale,
+                secondaryYTickFormatter,
+            });
+        });
+        return unregister;
+    }, [
+        registerDataLayer,
+        id,
+        xScale,
+        yScale,
+        theme,
+        xTickFormatter,
+        yTickFormatter,
+        showXGrid,
+        showYGrid,
+        gridStyle,
+        yAxisPosition,
+        secondaryYScale,
+        secondaryYTickFormatter,
+    ]);
+    return null;
+}

package/dist/HeatmapSeries.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @file packages/chart-react/src/HeatmapSeries.tsx
+ * Declarative 2D Matrix Heatmap series component.
+ */
+import type { HeatmapDatum } from '@tranding-custom-chart/core';
+import { type HeatmapRenderOptions } from '@tranding-custom-chart/renderer-canvas';
+export interface HeatmapSeriesProps extends HeatmapRenderOptions {
+    readonly data: readonly HeatmapDatum[];
+}
+export declare function HeatmapSeries({ data, cellGap, cellRadius, colorLow, colorHigh, showLabels, labelColor, fontSize, }: HeatmapSeriesProps): null;
+//# sourceMappingURL=HeatmapSeries.d.ts.map

package/dist/HeatmapSeries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeatmapSeries.d.ts","sourceRoot":"","sources":["../src/HeatmapSeries.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAiB,KAAK,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAGlG,MAAM,WAAW,kBAAmB,SAAQ,oBAAoB;IAC9D,QAAQ,CAAC,IAAI,EAAE,SAAS,YAAY,EAAE,CAAC;CACxC;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,OAAW,EACX,UAAc,EACd,QAAkC,EAClC,SAAqC,EACrC,UAAkB,EAClB,UAAsB,EACtB,QAAa,GACd,EAAE,kBAAkB,GAAG,IAAI,CAyE3B"}

package/dist/HeatmapSeries.js

@@ -0,0 +1,74 @@
+/**
+ * @file packages/chart-react/src/HeatmapSeries.tsx
+ * Declarative 2D Matrix Heatmap series component.
+ */
+import React, { useEffect, useId } from 'react';
+import { renderHeatmap } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function HeatmapSeries({ data, cellGap = 2, cellRadius = 2, colorLow = 'rgba(30, 41, 59, 0.6)', colorHigh = 'rgba(16, 185, 129, 0.9)', showLabels = false, labelColor = '#ffffff', fontSize = 10, }) {
+    const { registerDataLayer, registerHitTest, bounds, padding } = useChartContext();
+    const id = useId();
+    useEffect(() => {
+        if (!data || data.length === 0)
+            return;
+        const unregisterHit = registerHitTest(id, (x, y) => {
+            const cols = Array.from(new Set(data.map((d) => String(d.x))));
+            const rows = Array.from(new Set(data.map((d) => String(d.y))));
+            if (cols.length === 0 || rows.length === 0)
+                return null;
+            const plotWidth = bounds.width - padding.left - padding.right;
+            const plotHeight = bounds.height - padding.top - padding.bottom;
+            const colWidth = (plotWidth - (cols.length - 1) * cellGap) / cols.length;
+            const rowHeight = (plotHeight - (rows.length - 1) * cellGap) / rows.length;
+            for (let i = 0; i < data.length; i++) {
+                const datum = data[i];
+                const colIdx = cols.indexOf(String(datum.x));
+                const rowIdx = rows.indexOf(String(datum.y));
+                if (colIdx === -1 || rowIdx === -1)
+                    continue;
+                const cellX = padding.left + colIdx * (colWidth + cellGap);
+                const cellY = padding.top + rowIdx * (rowHeight + cellGap);
+                if (x >= cellX && x <= cellX + colWidth && y >= cellY && y <= cellY + rowHeight) {
+                    return {
+                        elementType: 'cell',
+                        seriesId: id,
+                        dataIndex: i,
+                        label: `${datum.x} × ${datum.y}: ${datum.value}`,
+                    };
+                }
+            }
+            return null;
+        });
+        return unregisterHit;
+    }, [registerHitTest, id, data, bounds, padding, cellGap]);
+    useEffect(() => {
+        if (!data || data.length === 0)
+            return;
+        const unregister = registerDataLayer(id, (ctx) => {
+            renderHeatmap(ctx, data, bounds, padding, {
+                cellGap,
+                cellRadius,
+                colorLow,
+                colorHigh,
+                showLabels,
+                labelColor,
+                fontSize,
+            });
+        });
+        return unregister;
+    }, [
+        registerDataLayer,
+        id,
+        data,
+        bounds,
+        padding,
+        cellGap,
+        cellRadius,
+        colorLow,
+        colorHigh,
+        showLabels,
+        labelColor,
+        fontSize,
+    ]);
+    return null;
+}

package/dist/HighLowSeries.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @file packages/chart-react/src/HighLowSeries.tsx
+ * Declarative High-Low range bars series component.
+ */
+import type { OHLCVBar } from '@tranding-custom-chart/core';
+export interface HighLowSeriesProps {
+    readonly data: readonly OHLCVBar[];
+    readonly color?: string | undefined;
+    readonly lineWidth?: number | undefined;
+}
+export declare function HighLowSeries({ data, color, lineWidth, }: HighLowSeriesProps): null;
+//# sourceMappingURL=HighLowSeries.d.ts.map

package/dist/HighLowSeries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HighLowSeries.d.ts","sourceRoot":"","sources":["../src/HighLowSeries.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAI5D,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,IAAI,EAAE,SAAS,QAAQ,EAAE,CAAC;IACnC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACzC;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,SAAa,GACd,EAAE,kBAAkB,GAAG,IAAI,CAwB3B"}

package/dist/HighLowSeries.js

@@ -0,0 +1,29 @@
+/**
+ * @file packages/chart-react/src/HighLowSeries.tsx
+ * Declarative High-Low range bars series component.
+ */
+import React, { useEffect, useId } from 'react';
+import { renderHighLowBars } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function HighLowSeries({ data, color, lineWidth = 2, }) {
+    const { registerDataLayer, xScale, yScale, theme } = useChartContext();
+    const id = useId();
+    useEffect(() => {
+        if (!xScale || !yScale || data.length === 0)
+            return;
+        const unregister = registerDataLayer(id, (ctx, _bounds, _padding, dpr) => {
+            renderHighLowBars({
+                ctx,
+                bars: data,
+                xScale,
+                yScale,
+                theme,
+                dpr,
+                customColor: color,
+                lineWidth,
+            });
+        });
+        return unregister;
+    }, [registerDataLayer, id, data, xScale, yScale, theme, color, lineWidth]);
+    return null;
+}

package/dist/HlcAreaSeries.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @file packages/chart-react/src/HlcAreaSeries.tsx
+ * Declarative HLC Area series component (High-Low shaded spread with Close line).
+ */
+import type { OHLCVBar } from '@tranding-custom-chart/core';
+export interface HlcAreaSeriesProps {
+    readonly data: readonly OHLCVBar[];
+    readonly bandFillColor?: string | undefined;
+    readonly closeLineColor?: string | undefined;
+    readonly closeLineWidth?: number | undefined;
+}
+export declare function HlcAreaSeries({ data, bandFillColor, closeLineColor, closeLineWidth, }: HlcAreaSeriesProps): null;
+//# sourceMappingURL=HlcAreaSeries.d.ts.map

package/dist/HlcAreaSeries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HlcAreaSeries.d.ts","sourceRoot":"","sources":["../src/HlcAreaSeries.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAI5D,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,IAAI,EAAE,SAAS,QAAQ,EAAE,CAAC;IACnC,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5C,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7C,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC9C;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,aAAa,EACb,cAAc,EACd,cAAc,GACf,EAAE,kBAAkB,GAAG,IAAI,CAuB3B"}

package/dist/HlcAreaSeries.js

@@ -0,0 +1,28 @@
+/**
+ * @file packages/chart-react/src/HlcAreaSeries.tsx
+ * Declarative HLC Area series component (High-Low shaded spread with Close line).
+ */
+import React, { useEffect, useId } from 'react';
+import { renderHlcArea } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function HlcAreaSeries({ data, bandFillColor, closeLineColor, closeLineWidth, }) {
+    const { registerDataLayer, xScale, yScale } = useChartContext();
+    const id = useId();
+    useEffect(() => {
+        if (!xScale || !yScale || data.length === 0)
+            return;
+        const unregister = registerDataLayer(id, (ctx) => {
+            renderHlcArea({
+                ctx,
+                bars: data,
+                xScale,
+                yScale,
+                bandFillColor,
+                closeLineColor,
+                closeLineWidth,
+            });
+        });
+        return unregister;
+    }, [registerDataLayer, id, data, xScale, yScale, bandFillColor, closeLineColor, closeLineWidth]);
+    return null;
+}

package/dist/HollowCandlestickSeries.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @file packages/chart-react/src/HollowCandlestickSeries.tsx
+ * Declarative Hollow Candlestick series component.
+ */
+import type { OHLCVBar } from '@tranding-custom-chart/core';
+export interface HollowCandlestickSeriesProps {
+    readonly data: readonly OHLCVBar[];
+    readonly upColor?: string | undefined;
+    readonly downColor?: string | undefined;
+    readonly candleWidthRatio?: number | undefined;
+}
+export declare function HollowCandlestickSeries({ data, upColor, downColor, candleWidthRatio, }: HollowCandlestickSeriesProps): null;
+//# sourceMappingURL=HollowCandlestickSeries.d.ts.map

package/dist/HollowCandlestickSeries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HollowCandlestickSeries.d.ts","sourceRoot":"","sources":["../src/HollowCandlestickSeries.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAI5D,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,CAAC,IAAI,EAAE,SAAS,QAAQ,EAAE,CAAC;IACnC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChD;AAED,wBAAgB,uBAAuB,CAAC,EACtC,IAAI,EACJ,OAAO,EACP,SAAS,EACT,gBAAsB,GACvB,EAAE,4BAA4B,GAAG,IAAI,CAyBrC"}

package/dist/HollowCandlestickSeries.js

@@ -0,0 +1,30 @@
+/**
+ * @file packages/chart-react/src/HollowCandlestickSeries.tsx
+ * Declarative Hollow Candlestick series component.
+ */
+import React, { useEffect, useId } from 'react';
+import { renderHollowCandlesticks } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function HollowCandlestickSeries({ data, upColor, downColor, candleWidthRatio = 0.7, }) {
+    const { registerDataLayer, xScale, yScale, theme } = useChartContext();
+    const id = useId();
+    useEffect(() => {
+        if (!xScale || !yScale || data.length === 0)
+            return;
+        const unregister = registerDataLayer(id, (ctx, bounds, padding, dpr) => {
+            renderHollowCandlesticks({
+                ctx,
+                bars: data,
+                xScale,
+                yScale,
+                theme,
+                dpr,
+                candleWidthRatio,
+                customUpColor: upColor,
+                customDownColor: downColor,
+            });
+        });
+        return unregister;
+    }, [registerDataLayer, id, data, xScale, yScale, theme, upColor, downColor, candleWidthRatio]);
+    return null;
+}

package/dist/HorizontalBarSeries.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @file packages/chart-react/src/HorizontalBarSeries.tsx
+ * Declarative Horizontal Bar series component.
+ */
+import type { HorizontalBarDatum } from '@tranding-custom-chart/core';
+export interface HorizontalBarSeriesProps {
+    readonly data: readonly HorizontalBarDatum[];
+    readonly barHeightRatio?: number | undefined;
+    readonly borderRadius?: number | undefined;
+    readonly defaultColor?: string | undefined;
+    readonly showLabels?: boolean | undefined;
+    readonly labelColor?: string | undefined;
+}
+export declare function HorizontalBarSeries({ data, barHeightRatio, borderRadius, defaultColor, showLabels, labelColor, }: HorizontalBarSeriesProps): null;
+//# sourceMappingURL=HorizontalBarSeries.d.ts.map

package/dist/HorizontalBarSeries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalBarSeries.d.ts","sourceRoot":"","sources":["../src/HorizontalBarSeries.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAItE,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,IAAI,EAAE,SAAS,kBAAkB,EAAE,CAAC;IAC7C,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7C,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1C;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,cAAoB,EACpB,YAAgB,EAChB,YAAwB,EACxB,UAAiB,EACjB,UAAU,GACX,EAAE,wBAAwB,GAAG,IAAI,CAqCjC"}

package/dist/HorizontalBarSeries.js

@@ -0,0 +1,42 @@
+/**
+ * @file packages/chart-react/src/HorizontalBarSeries.tsx
+ * Declarative Horizontal Bar series component.
+ */
+import React, { useEffect, useId } from 'react';
+import { renderHorizontalBars } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function HorizontalBarSeries({ data, barHeightRatio = 0.6, borderRadius = 4, defaultColor = '#3b82f6', showLabels = true, labelColor, }) {
+    const { registerDataLayer, bounds, padding, xScale, theme } = useChartContext();
+    const id = useId();
+    useEffect(() => {
+        if (!xScale || data.length === 0)
+            return;
+        const unregister = registerDataLayer(id, (ctx) => {
+            renderHorizontalBars(ctx, data, {
+                bounds,
+                padding,
+                xScale,
+                barHeightRatio,
+                borderRadius,
+                defaultColor,
+                showLabels,
+                labelColor: labelColor ?? theme.textPrimary,
+            });
+        });
+        return unregister;
+    }, [
+        registerDataLayer,
+        id,
+        data,
+        bounds,
+        padding,
+        xScale,
+        barHeightRatio,
+        borderRadius,
+        defaultColor,
+        showLabels,
+        labelColor,
+        theme.textPrimary,
+    ]);
+    return null;
+}