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

package/dist/ScatterSeries.js

@@ -0,0 +1,60 @@
+/**
+ * @file packages/chart-react/src/ScatterSeries.tsx
+ * Declarative Scatter Plot series component.
+ */
+import React, { useEffect, useId } from 'react';
+import { renderScatter } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function ScatterSeries({ data, defaultRadius = 4, defaultColor = '#3b82f6', strokeColor = '#ffffff', strokeWidth = 1.5, shape = 'circle', }) {
+    const { registerDataLayer, registerHitTest, xScale, yScale } = useChartContext();
+    const id = useId();
+    useEffect(() => {
+        if (!data || data.length === 0 || !xScale || !yScale)
+            return;
+        const unregisterHit = registerHitTest(id, (x, y) => {
+            for (let i = 0; i < data.length; i++) {
+                const p = data[i];
+                const px = xScale.scale(p.x);
+                const py = yScale.scale(p.y);
+                const r = (p.radius ?? defaultRadius) + 4;
+                if (Math.hypot(px - x, py - y) <= r) {
+                    return {
+                        elementType: 'dataPoint',
+                        seriesId: id,
+                        dataIndex: i,
+                        pointId: ('id' in p ? p.id : i) ?? i,
+                        label: `(${p.x}, ${p.y})`,
+                    };
+                }
+            }
+            return null;
+        });
+        return unregisterHit;
+    }, [registerHitTest, id, data, xScale, yScale, defaultRadius]);
+    useEffect(() => {
+        if (!data || data.length === 0 || !xScale || !yScale)
+            return;
+        const unregister = registerDataLayer(id, (ctx) => {
+            renderScatter(ctx, data, xScale, yScale, {
+                defaultRadius,
+                defaultColor,
+                strokeColor,
+                strokeWidth,
+                shape,
+            });
+        });
+        return unregister;
+    }, [
+        registerDataLayer,
+        id,
+        data,
+        xScale,
+        yScale,
+        defaultRadius,
+        defaultColor,
+        strokeColor,
+        strokeWidth,
+        shape,
+    ]);
+    return null;
+}

package/dist/SeriesMarkersOverlay.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @file packages/chart-react/src/SeriesMarkersOverlay.tsx
+ * Declarative component for series marker annotations and event badges.
+ */
+import type { SeriesMarker } from '@tranding-custom-chart/core';
+export interface SeriesMarkersOverlayProps {
+    readonly markers: readonly SeriesMarker[];
+}
+export declare function SeriesMarkersOverlay({ markers }: SeriesMarkersOverlayProps): null;
+//# sourceMappingURL=SeriesMarkersOverlay.d.ts.map

package/dist/SeriesMarkersOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeriesMarkersOverlay.d.ts","sourceRoot":"","sources":["../src/SeriesMarkersOverlay.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAIhE,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,OAAO,EAAE,SAAS,YAAY,EAAE,CAAC;CAC3C;AAED,wBAAgB,oBAAoB,CAAC,EAAE,OAAO,EAAE,EAAE,yBAAyB,GAAG,IAAI,CAuBjF"}

package/dist/SeriesMarkersOverlay.js

@@ -0,0 +1,28 @@
+/**
+ * @file packages/chart-react/src/SeriesMarkersOverlay.tsx
+ * Declarative component for series marker annotations and event badges.
+ */
+import React, { useEffect, useId } from 'react';
+import { renderSeriesMarkers } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function SeriesMarkersOverlay({ markers }) {
+    const { registerOverlayLayer, xScale, yScale, bounds, padding, dpr } = useChartContext();
+    const id = useId();
+    useEffect(() => {
+        if (!xScale || !yScale)
+            return;
+        const unregister = registerOverlayLayer(id, (ctx) => {
+            renderSeriesMarkers({
+                ctx,
+                bounds,
+                padding,
+                xScale,
+                yScale,
+                markers,
+                dpr,
+            });
+        });
+        return unregister;
+    }, [registerOverlayLayer, id, xScale, yScale, bounds, padding, markers, dpr]);
+    return null;
+}

package/dist/StackedBarSeries.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @file packages/chart-react/src/StackedBarSeries.tsx
+ * Declarative Stacked Bar series component.
+ */
+import type { StackedBarDatum } from '@tranding-custom-chart/core';
+export interface StackedBarSeriesProps {
+    readonly data: readonly StackedBarDatum[];
+    readonly columnWidthRatio?: number | undefined;
+    readonly defaultColors?: readonly string[] | undefined;
+    readonly borderRadius?: number | undefined;
+}
+export declare function StackedBarSeries({ data, columnWidthRatio, defaultColors, borderRadius, }: StackedBarSeriesProps): null;
+//# sourceMappingURL=StackedBarSeries.d.ts.map

package/dist/StackedBarSeries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedBarSeries.d.ts","sourceRoot":"","sources":["../src/StackedBarSeries.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAInE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,IAAI,EAAE,SAAS,eAAe,EAAE,CAAC;IAC1C,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/C,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IACvD,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5C;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,gBAAsB,EACtB,aAAa,EACb,YAAgB,GACjB,EAAE,qBAAqB,GAAG,IAAI,CAqB9B"}

package/dist/StackedBarSeries.js

@@ -0,0 +1,26 @@
+/**
+ * @file packages/chart-react/src/StackedBarSeries.tsx
+ * Declarative Stacked Bar series component.
+ */
+import React, { useEffect, useId } from 'react';
+import { renderStackedBars } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function StackedBarSeries({ data, columnWidthRatio = 0.6, defaultColors, borderRadius = 4, }) {
+    const { registerDataLayer, xScale, yScale } = useChartContext();
+    const id = useId();
+    useEffect(() => {
+        if (!xScale || !yScale || data.length === 0)
+            return;
+        const unregister = registerDataLayer(id, (ctx) => {
+            renderStackedBars(ctx, data, {
+                xScale,
+                yScale,
+                columnWidthRatio,
+                defaultColors,
+                borderRadius,
+            });
+        });
+        return unregister;
+    }, [registerDataLayer, id, data, xScale, yScale, columnWidthRatio, defaultColors, borderRadius]);
+    return null;
+}

package/dist/StepLineSeries.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @file packages/chart-react/src/StepLineSeries.tsx
+ * Declarative Step Line series component.
+ */
+export interface StepLineSeriesProps {
+    readonly data: readonly (number | null)[];
+    readonly color?: string | undefined;
+    readonly strokeWidth?: number | undefined;
+    readonly areaFill?: {
+        readonly baselineY: number;
+        readonly fillColor: string;
+    } | undefined;
+}
+export declare function StepLineSeries({ data, color, strokeWidth, areaFill, }: StepLineSeriesProps): null;
+//# sourceMappingURL=StepLineSeries.d.ts.map

package/dist/StepLineSeries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepLineSeries.d.ts","sourceRoot":"","sources":["../src/StepLineSeries.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAC1C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAClB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;QAC3B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;KAC5B,GAAG,SAAS,CAAC;CACf;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,KAAiB,EACjB,WAAe,EACf,QAAQ,GACT,EAAE,mBAAmB,GAAG,IAAI,CAuB5B"}

package/dist/StepLineSeries.js

@@ -0,0 +1,28 @@
+/**
+ * @file packages/chart-react/src/StepLineSeries.tsx
+ * Declarative Step Line series component.
+ */
+import React, { useEffect, useId } from 'react';
+import { renderStepLine } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function StepLineSeries({ data, color = '#3b82f6', strokeWidth = 2, areaFill, }) {
+    const { registerDataLayer, xScale, yScale } = useChartContext();
+    const id = useId();
+    useEffect(() => {
+        if (!xScale || !yScale || data.length === 0)
+            return;
+        const unregister = registerDataLayer(id, (ctx) => {
+            renderStepLine({
+                ctx,
+                data,
+                xScale,
+                yScale,
+                color,
+                strokeWidth,
+                areaFill,
+            });
+        });
+        return unregister;
+    }, [registerDataLayer, id, data, xScale, yScale, color, strokeWidth, areaFill]);
+    return null;
+}

package/dist/SupertrendSeries.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @file packages/chart-react/src/SupertrendSeries.tsx
+ * Declarative Supertrend series component for React.
+ */
+import type { OHLCVBar } from '@tranding-custom-chart/core';
+export interface SupertrendSeriesProps {
+    readonly bars: readonly OHLCVBar[];
+    readonly period?: number | undefined;
+    readonly multiplier?: number | undefined;
+    readonly upColor?: string | undefined;
+    readonly downColor?: string | undefined;
+    readonly strokeWidth?: number | undefined;
+    readonly showReversalMarkers?: boolean | undefined;
+}
+export declare function SupertrendSeries({ bars, period, multiplier, upColor, downColor, strokeWidth, showReversalMarkers, }: SupertrendSeriesProps): null;
+//# sourceMappingURL=SupertrendSeries.d.ts.map

package/dist/SupertrendSeries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupertrendSeries.d.ts","sourceRoot":"","sources":["../src/SupertrendSeries.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,QAAQ,EAAoB,MAAM,6BAA6B,CAAC;AAK9E,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,IAAI,EAAE,SAAS,QAAQ,EAAE,CAAC;IACnC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACpD;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,MAAW,EACX,UAAgB,EAChB,OAAmB,EACnB,SAAqB,EACrB,WAAe,EACf,mBAA0B,GAC3B,EAAE,qBAAqB,GAAG,IAAI,CAqC9B"}

package/dist/SupertrendSeries.js

@@ -0,0 +1,40 @@
+/**
+ * @file packages/chart-react/src/SupertrendSeries.tsx
+ * Declarative Supertrend series component for React.
+ */
+import React, { useEffect, useId, useMemo } from 'react';
+import { computeSupertrend } from '@tranding-custom-chart/financial';
+import { renderSupertrend } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function SupertrendSeries({ bars, period = 10, multiplier = 3.0, upColor = '#16a34a', downColor = '#dc2626', strokeWidth = 2, showReversalMarkers = true, }) {
+    const { registerDataLayer, xScale, yScale } = useChartContext();
+    const id = useId();
+    const supertrend = useMemo(() => computeSupertrend(bars, { period, multiplier }), [bars, period, multiplier]);
+    useEffect(() => {
+        if (!xScale || !yScale || supertrend.points.length === 0)
+            return;
+        return registerDataLayer(id, (ctx) => {
+            renderSupertrend({
+                ctx,
+                supertrend,
+                xScale,
+                yScale,
+                upColor,
+                downColor,
+                strokeWidth,
+                showReversalMarkers,
+            });
+        });
+    }, [
+        registerDataLayer,
+        id,
+        supertrend,
+        xScale,
+        yScale,
+        upColor,
+        downColor,
+        strokeWidth,
+        showReversalMarkers,
+    ]);
+    return null;
+}

package/dist/UniversalSeries.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @file packages/chart-react/src/UniversalSeries.tsx
+ * Universal series component dynamically rendering any of the supported chart types
+ * with complete styling, color, and behavior customization.
+ */
+import React from 'react';
+import type { ChartType, OHLCVBar } from '@tranding-custom-chart/core';
+export interface UniversalSeriesProps {
+    readonly chartType: ChartType;
+    readonly bars: readonly OHLCVBar[];
+    readonly upColor?: string | undefined;
+    readonly downColor?: string | undefined;
+    readonly lineColor?: string | undefined;
+    readonly lineWidth?: number | undefined;
+    readonly baselineValue?: number | undefined;
+    readonly baselineAboveColor?: string | undefined;
+    readonly baselineBelowColor?: string | undefined;
+    readonly candleWidthRatio?: number | undefined;
+}
+export declare function UniversalSeries({ chartType, bars, upColor, downColor, lineColor, lineWidth, baselineValue, baselineAboveColor, baselineBelowColor, candleWidthRatio, }: UniversalSeriesProps): React.JSX.Element | null;
+//# sourceMappingURL=UniversalSeries.d.ts.map

package/dist/UniversalSeries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UniversalSeries.d.ts","sourceRoot":"","sources":["../src/UniversalSeries.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAA8B,MAAM,6BAA6B,CAAC;AAwBnG,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;IAC9B,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,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5C,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjD,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjD,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChD;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,IAAI,EACJ,OAAO,EACP,SAAS,EACT,SAAqB,EACrB,SAAa,EACb,aAAa,EACb,kBAA8B,EAC9B,kBAA8B,EAC9B,gBAAsB,GACvB,EAAE,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA2VjD"}

package/dist/UniversalSeries.js

@@ -0,0 +1,222 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @file packages/chart-react/src/UniversalSeries.tsx
+ * Universal series component dynamically rendering any of the supported chart types
+ * with complete styling, color, and behavior customization.
+ */
+import React, { useMemo } from 'react';
+import { calculateBoxPlotStats } from '@tranding-custom-chart/core';
+import { computeHeikinAshi, computeRenko, computeKagi, computeLineBreak } from '@tranding-custom-chart/financial';
+import { CandlestickSeries } from './CandlestickSeries.js';
+import { HollowCandlestickSeries } from './HollowCandlestickSeries.js';
+import { OhlcBarSeries } from './OhlcBarSeries.js';
+import { LineSeries } from './LineSeries.js';
+import { StepLineSeries } from './StepLineSeries.js';
+import { BaselineSeries } from './BaselineSeries.js';
+import { HighLowSeries } from './HighLowSeries.js';
+import { ColumnsSeries } from './ColumnsSeries.js';
+import { LineWithMarkersSeries } from './LineWithMarkersSeries.js';
+import { HlcAreaSeries } from './HlcAreaSeries.js';
+import { PieSeries } from './PieSeries.js';
+import { ScatterSeries } from './ScatterSeries.js';
+import { BubbleSeries } from './BubbleSeries.js';
+import { PolarAreaSeries } from './PolarAreaSeries.js';
+import { HorizontalBarSeries } from './HorizontalBarSeries.js';
+import { StackedBarSeries } from './StackedBarSeries.js';
+import { RadarSeries } from './RadarSeries.js';
+import { BoxPlotSeries } from './BoxPlotSeries.js';
+import { HeatmapSeries } from './HeatmapSeries.js';
+import { useChartContext } from './ChartContext.js';
+export function UniversalSeries({ chartType, bars, upColor, downColor, lineColor = '#2563eb', lineWidth = 2, baselineValue, baselineAboveColor = '#16794c', baselineBelowColor = '#b42318', candleWidthRatio = 0.7, }) {
+    const { bounds, padding } = useChartContext();
+    const closePrices = useMemo(() => bars.map((b) => b.close), [bars]);
+    const haBars = useMemo(() => (chartType === 'heikin_ashi' ? computeHeikinAshi(bars) : []), [bars, chartType]);
+    const renkoBricks = useMemo(() => (chartType === 'renko' ? computeRenko(bars) : []), [bars, chartType]);
+    const kagiBars = useMemo(() => (chartType === 'kagi' ? computeKagi(bars) : []), [bars, chartType]);
+    const lineBreakBars = useMemo(() => (chartType === 'line_break' ? computeLineBreak(bars) : []), [bars, chartType]);
+    const effectiveBaseline = useMemo(() => {
+        if (baselineValue !== undefined)
+            return baselineValue;
+        if (bars.length === 0)
+            return 0;
+        // Default baseline: opening price of the series
+        return bars[0].open;
+    }, [baselineValue, bars]);
+    switch (chartType) {
+        case 'candlestick':
+            return (_jsx(CandlestickSeries, { data: bars, upColor: upColor, downColor: downColor, candleWidthRatio: candleWidthRatio }));
+        case 'hollow_candlestick':
+            return (_jsx(HollowCandlestickSeries, { data: bars, upColor: upColor, downColor: downColor, candleWidthRatio: candleWidthRatio }));
+        case 'bar':
+            return (_jsx(OhlcBarSeries, { data: bars, upColor: upColor, downColor: downColor, lineWidth: lineWidth }));
+        case 'heikin_ashi':
+            return (_jsx(CandlestickSeries, { data: haBars, upColor: upColor, downColor: downColor, candleWidthRatio: candleWidthRatio }));
+        case 'renko':
+            return (_jsx(CandlestickSeries, { data: renkoBricks, upColor: upColor, downColor: downColor, candleWidthRatio: candleWidthRatio }));
+        case 'kagi':
+            return (_jsx(CandlestickSeries, { data: kagiBars, upColor: upColor ?? '#10b981', downColor: downColor ?? '#ef4444', candleWidthRatio: 0.4 }));
+        case 'line_break':
+            return (_jsx(CandlestickSeries, { data: lineBreakBars, upColor: upColor ?? '#10b981', downColor: downColor ?? '#ef4444', candleWidthRatio: candleWidthRatio }));
+        case 'columns':
+            return (_jsx(ColumnsSeries, { data: bars, upColor: upColor, downColor: downColor, columnWidthRatio: candleWidthRatio }));
+        case 'line':
+            return (_jsx(LineSeries, { data: closePrices, color: lineColor, strokeWidth: lineWidth }));
+        case 'line_with_markers':
+            return (_jsx(LineWithMarkersSeries, { data: closePrices, color: lineColor, strokeWidth: lineWidth }));
+        case 'step_line':
+            return (_jsx(StepLineSeries, { data: closePrices, color: lineColor, strokeWidth: lineWidth }));
+        case 'area':
+            return (_jsx(LineSeries, { data: closePrices, color: lineColor, strokeWidth: lineWidth, areaFill: {
+                    gradientTopColor: 'rgba(37, 99, 235, 0.40)',
+                    gradientBottomColor: 'rgba(37, 99, 235, 0.02)',
+                    baselineY: bounds.height - padding.bottom,
+                } }));
+        case 'hlc_area':
+            return (_jsx(HlcAreaSeries, { data: bars, closeLineColor: lineColor, closeLineWidth: lineWidth }));
+        case 'baseline':
+            return (_jsx(BaselineSeries, { data: closePrices, baselineValue: effectiveBaseline, aboveColor: baselineAboveColor, belowColor: baselineBelowColor, lineWidth: lineWidth }));
+        case 'high_low':
+            return (_jsx(HighLowSeries, { data: bars, color: lineColor, lineWidth: lineWidth }));
+        case 'doughnut':
+        case 'pie': {
+            const pieSlices = bars.slice(0, 8).map((b, i) => ({
+                id: `slice-${i}`,
+                label: b.dateStr?.slice(5, 10) ?? `P${i}`,
+                value: Math.max(1, Math.round(b.close)),
+                color: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#06b6d4', '#84cc16'][i % 8],
+            }));
+            return (_jsx(PieSeries, { slices: pieSlices, innerRadius: chartType === 'doughnut' ? 45 : 0 }));
+        }
+        case 'scatter': {
+            const scatterPoints = bars.map((b, i) => ({
+                x: i,
+                y: b.close,
+                radius: 4.5,
+                color: b.close >= b.open ? upColor ?? '#16794c' : downColor ?? '#b42318',
+                shape: 'circle',
+            }));
+            return _jsx(ScatterSeries, { data: scatterPoints });
+        }
+        case 'bubble': {
+            const bubbles = bars.map((b, i) => ({
+                x: i,
+                y: b.close,
+                r: Math.max(3, Math.min(22, ((b.volume ?? 50000) / 8000))),
+                color: b.close >= b.open ? 'rgba(22, 121, 76, 0.65)' : 'rgba(180, 35, 24, 0.65)',
+            }));
+            return _jsx(BubbleSeries, { data: bubbles });
+        }
+        case 'polar_area': {
+            const paData = bars.slice(0, 8).map((b, i) => ({
+                id: `pa-${i}`,
+                label: b.dateStr?.slice(5, 10) ?? `P${i}`,
+                value: Math.max(5, Math.round(b.close)),
+                color: [
+                    'rgba(59, 130, 246, 0.75)',
+                    'rgba(16, 185, 129, 0.75)',
+                    'rgba(245, 158, 11, 0.75)',
+                    'rgba(239, 68, 68, 0.75)',
+                    'rgba(139, 92, 246, 0.75)',
+                    'rgba(236, 72, 153, 0.75)',
+                    'rgba(6, 182, 212, 0.75)',
+                    'rgba(132, 204, 22, 0.75)',
+                ][i % 8],
+            }));
+            return _jsx(PolarAreaSeries, { data: paData });
+        }
+        case 'horizontal_bar': {
+            const hbData = bars.slice(0, 10).map((b, i) => ({
+                category: b.dateStr?.slice(5, 10) ?? `P${i}`,
+                value: Math.max(1, Math.round(b.close)),
+                color: b.close >= b.open ? upColor ?? '#16794c' : downColor ?? '#b42318',
+            }));
+            return _jsx(HorizontalBarSeries, { data: hbData, defaultColor: lineColor });
+        }
+        case 'stacked_bar': {
+            const sbData = bars.slice(0, 8).map((b, i) => {
+                const body = Math.max(1, Math.abs(b.close - b.open));
+                const upper = Math.max(1, b.high - Math.max(b.close, b.open));
+                const lower = Math.max(1, Math.min(b.close, b.open) - b.low);
+                return {
+                    category: b.dateStr?.slice(5, 10) ?? `P${i}`,
+                    values: [Math.round(body), Math.round(upper), Math.round(lower)],
+                };
+            });
+            return _jsx(StackedBarSeries, { data: sbData, defaultColors: ['#3b82f6', '#10b981', '#f59e0b'] });
+        }
+        case 'radar': {
+            const highMax = Math.max(...bars.map((b) => b.high)) * 1.05 || 100;
+            const radarAxes = [
+                { key: 'open', label: 'Open', max: highMax },
+                { key: 'high', label: 'High', max: highMax },
+                { key: 'low', label: 'Low', max: highMax },
+                { key: 'close', label: 'Close', max: highMax },
+                { key: 'volume', label: 'Volume (norm)', max: 100 },
+            ];
+            const recentBar = bars[bars.length - 1] ?? { open: 50, high: 60, low: 40, close: 55, volume: 50 };
+            const avgBar = bars[Math.floor(bars.length / 2)] ?? recentBar;
+            const radarDatasets = [
+                {
+                    id: 'latest',
+                    label: 'Latest Session',
+                    data: {
+                        open: recentBar.open,
+                        high: recentBar.high,
+                        low: recentBar.low,
+                        close: recentBar.close,
+                        volume: 75,
+                    },
+                    strokeColor: upColor ?? '#10b981',
+                    fillColor: 'rgba(16, 185, 129, 0.25)',
+                },
+                {
+                    id: 'average',
+                    label: 'Midpoint Session',
+                    data: {
+                        open: avgBar.open,
+                        high: avgBar.high,
+                        low: avgBar.low,
+                        close: avgBar.close,
+                        volume: 50,
+                    },
+                    strokeColor: lineColor ?? '#3b82f6',
+                    fillColor: 'rgba(59, 130, 246, 0.2)',
+                },
+            ];
+            return _jsx(RadarSeries, { axes: radarAxes, datasets: radarDatasets });
+        }
+        case 'box_plot': {
+            const chunkSize = Math.max(5, Math.floor(bars.length / 6));
+            const boxData = [];
+            for (let i = 0; i < bars.length && boxData.length < 8; i += chunkSize) {
+                const slice = bars.slice(i, i + chunkSize);
+                const prices = slice.flatMap((b) => [b.open, b.high, b.low, b.close]);
+                const cat = slice[0]?.dateStr?.slice(5, 10) ?? `B${boxData.length + 1}`;
+                boxData.push(calculateBoxPlotStats(cat, prices, boxData.length % 2 === 0 ? upColor ?? '#10b981' : lineColor ?? '#3b82f6'));
+            }
+            return _jsx(BoxPlotSeries, { data: boxData });
+        }
+        case 'heatmap': {
+            const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
+            const sessions = ['Open', 'Midday', 'Close', 'Post'];
+            const heatmapData = [];
+            let idx = 0;
+            for (const d of days) {
+                for (const s of sessions) {
+                    const bar = bars[idx % bars.length];
+                    const ret = bar ? ((bar.close - bar.open) / (bar.open || 1)) * 100 : 0;
+                    heatmapData.push({
+                        x: d,
+                        y: s,
+                        value: Math.round(ret * 10) / 10,
+                        label: `${(ret >= 0 ? '+' : '') + ret.toFixed(1)}%`,
+                    });
+                    idx++;
+                }
+            }
+            return _jsx(HeatmapSeries, { data: heatmapData, showLabels: true });
+        }
+        default:
+            return (_jsx(CandlestickSeries, { data: bars, upColor: upColor, downColor: downColor }));
+    }
+}

package/dist/VolumeProfileSeries.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @file packages/chart-react/src/VolumeProfileSeries.tsx
+ * Declarative Visible Range Volume Profile (VRVP) component with POC and Value Area.
+ */
+import type { OHLCVBar } from '@tranding-custom-chart/core';
+export interface VolumeProfileSeriesProps {
+    readonly bars: readonly OHLCVBar[];
+    readonly binCount?: number | undefined;
+    readonly valueAreaRatio?: number | undefined;
+    readonly maxBarWidth?: number | undefined;
+    readonly alignment?: 'right' | 'left' | undefined;
+    readonly buyColor?: string | undefined;
+    readonly sellColor?: string | undefined;
+    readonly valueAreaBuyColor?: string | undefined;
+    readonly valueAreaSellColor?: string | undefined;
+    readonly pocColor?: string | undefined;
+    readonly showPOCLine?: boolean | undefined;
+    readonly showLabels?: boolean | undefined;
+}
+export declare function VolumeProfileSeries({ bars, binCount, valueAreaRatio, maxBarWidth, alignment, buyColor, sellColor, valueAreaBuyColor, valueAreaSellColor, pocColor, showPOCLine, showLabels, }: VolumeProfileSeriesProps): null;
+//# sourceMappingURL=VolumeProfileSeries.d.ts.map

package/dist/VolumeProfileSeries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeProfileSeries.d.ts","sourceRoot":"","sources":["../src/VolumeProfileSeries.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,QAAQ,EAAuB,MAAM,6BAA6B,CAAC;AAKjF,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,IAAI,EAAE,SAAS,QAAQ,EAAE,CAAC;IACnC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7C,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAClD,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjD,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC3C;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,QAAa,EACb,cAAoB,EACpB,WAAiB,EACjB,SAAmB,EACnB,QAAQ,EACR,SAAS,EACT,iBAAiB,EACjB,kBAAkB,EAClB,QAAQ,EACR,WAAkB,EAClB,UAAiB,GAClB,EAAE,wBAAwB,GAAG,IAAI,CAuDjC"}

package/dist/VolumeProfileSeries.js

@@ -0,0 +1,57 @@
+/**
+ * @file packages/chart-react/src/VolumeProfileSeries.tsx
+ * Declarative Visible Range Volume Profile (VRVP) component with POC and Value Area.
+ */
+import React, { useEffect, useId, useMemo } from 'react';
+import { computeVolumeProfile } from '@tranding-custom-chart/financial';
+import { renderVolumeProfile } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function VolumeProfileSeries({ bars, binCount = 24, valueAreaRatio = 0.7, maxBarWidth = 140, alignment = 'right', buyColor, sellColor, valueAreaBuyColor, valueAreaSellColor, pocColor, showPOCLine = true, showLabels = true, }) {
+    const { registerDataLayer, yScale, bounds, padding } = useChartContext();
+    const id = useId();
+    const profile = useMemo(() => computeVolumeProfile(bars, { binCount, valueAreaRatio }), [bars, binCount, valueAreaRatio]);
+    useEffect(() => {
+        if (!yScale || profile.bins.length === 0)
+            return;
+        const unregister = registerDataLayer(id, (ctx) => {
+            renderVolumeProfile({
+                ctx,
+                profile,
+                yScale,
+                chartWidth: bounds.width,
+                chartHeight: bounds.height,
+                paddingRight: padding.right,
+                paddingLeft: padding.left,
+                maxBarWidth,
+                alignment,
+                buyColor,
+                sellColor,
+                valueAreaBuyColor,
+                valueAreaSellColor,
+                pocColor,
+                showPOCLine,
+                showLabels,
+            });
+        });
+        return unregister;
+    }, [
+        registerDataLayer,
+        id,
+        profile,
+        yScale,
+        bounds.width,
+        bounds.height,
+        padding.right,
+        padding.left,
+        maxBarWidth,
+        alignment,
+        buyColor,
+        sellColor,
+        valueAreaBuyColor,
+        valueAreaSellColor,
+        pocColor,
+        showPOCLine,
+        showLabels,
+    ]);
+    return null;
+}

package/dist/VolumeSeries.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @file packages/chart-react/src/VolumeSeries.tsx
+ * Declarative Volume series component.
+ */
+import type { OHLCVBar, Scale } from '@tranding-custom-chart/core';
+export interface VolumeSeriesProps {
+    readonly data: readonly OHLCVBar[];
+    readonly volumeScale: Scale<number>;
+    readonly baselineY: number;
+    readonly upColor?: string | undefined;
+    readonly downColor?: string | undefined;
+}
+export declare function VolumeSeries({ data, volumeScale, baselineY, upColor, downColor, }: VolumeSeriesProps): null;
+//# sourceMappingURL=VolumeSeries.d.ts.map

package/dist/VolumeSeries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeSeries.d.ts","sourceRoot":"","sources":["../src/VolumeSeries.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAInE,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,IAAI,EAAE,SAAS,QAAQ,EAAE,CAAC;IACnC,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACpC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACzC;AAED,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,WAAW,EACX,SAAS,EACT,OAAO,EACP,SAAS,GACV,EAAE,iBAAiB,GAAG,IAAI,CA6B1B"}

package/dist/VolumeSeries.js

@@ -0,0 +1,33 @@
+/**
+ * @file packages/chart-react/src/VolumeSeries.tsx
+ * Declarative Volume series component.
+ */
+import React, { useEffect, useId } from 'react';
+import { renderBarSeries } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function VolumeSeries({ data, volumeScale, baselineY, upColor, downColor, }) {
+    const { registerDataLayer, xScale, theme } = useChartContext();
+    const id = useId();
+    useEffect(() => {
+        if (!xScale || data.length === 0)
+            return;
+        const items = data.map((b) => ({
+            value: b.volume ?? 0,
+            isUp: b.close >= b.open,
+        }));
+        const unregister = registerDataLayer(id, (ctx, bounds, padding, dpr) => {
+            renderBarSeries({
+                ctx,
+                items,
+                xScale,
+                yScale: volumeScale,
+                baselineY,
+                dpr,
+                upColor: upColor ?? theme.volumeUp,
+                downColor: downColor ?? theme.volumeDown,
+            });
+        });
+        return unregister;
+    }, [registerDataLayer, id, data, xScale, volumeScale, baselineY, theme, upColor, downColor]);
+    return null;
+}