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

package/dist/InteractiveLegend.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @file packages/chart-react/src/InteractiveLegend.tsx
+ * Interactive Legend component supporting dataset visibility toggling.
+ */
+import React from 'react';
+export interface LegendItem {
+    readonly id: string;
+    readonly label: string;
+    readonly color: string;
+    readonly type?: 'line' | 'rect' | 'circle' | undefined;
+}
+export interface InteractiveLegendProps {
+    readonly items: readonly LegendItem[];
+    readonly activeIds: ReadonlySet<string>;
+    readonly onToggle: (id: string) => void;
+    readonly className?: string | undefined;
+}
+export declare function InteractiveLegend({ items, activeIds, onToggle, className, }: InteractiveLegendProps): React.JSX.Element;
+//# sourceMappingURL=InteractiveLegend.d.ts.map

package/dist/InteractiveLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InteractiveLegend.d.ts","sourceRoot":"","sources":["../src/InteractiveLegend.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;CACxD;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IACtC,QAAQ,CAAC,SAAS,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACxC,QAAQ,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACzC;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,SAAS,EACT,QAAQ,EACR,SAAc,GACf,EAAE,sBAAsB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAuD5C"}

package/dist/InteractiveLegend.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file packages/chart-react/src/InteractiveLegend.tsx
+ * Interactive Legend component supporting dataset visibility toggling.
+ */
+import React from 'react';
+export function InteractiveLegend({ items, activeIds, onToggle, className = '', }) {
+    return (_jsx("div", { role: "toolbar", "aria-label": "Chart dataset toggles", className: `interactive-legend ${className}`, style: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: '0.75rem',
+            alignItems: 'center',
+            padding: '0.4rem 0',
+        }, children: items.map((item) => {
+            const isActive = activeIds.has(item.id);
+            return (_jsxs("button", { type: "button", role: "checkbox", "aria-checked": isActive, onClick: () => onToggle(item.id), style: {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: '0.5rem',
+                    padding: '0.25rem 0.6rem',
+                    background: isActive ? 'rgba(255, 255, 255, 0.06)' : 'transparent',
+                    border: `1px solid ${isActive ? item.color : 'rgba(255, 255, 255, 0.15)'}`,
+                    borderRadius: '9999px',
+                    color: isActive ? '#e8ebe6' : '#858e89',
+                    fontSize: '0.8rem',
+                    fontWeight: 500,
+                    cursor: 'pointer',
+                    transition: 'all 0.15s ease',
+                    textDecoration: isActive ? 'none' : 'line-through',
+                    opacity: isActive ? 1 : 0.6,
+                }, children: [_jsx("span", { style: {
+                            display: 'inline-block',
+                            width: '10px',
+                            height: '10px',
+                            borderRadius: item.type === 'line' ? '1px' : '50%',
+                            background: isActive ? item.color : '#858e89',
+                        } }), item.label] }, item.id));
+        }) }));
+}

package/dist/LastPriceLine.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @file packages/chart-react/src/LastPriceLine.tsx
+ * Declarative real-time last price line and dynamic Y-axis badge component.
+ */
+export interface LastPriceLineProps {
+    readonly price: number;
+    readonly color?: string | undefined;
+    readonly formatter?: ((price: number) => string) | undefined;
+}
+export declare function LastPriceLine({ price, color, formatter, }: LastPriceLineProps): null;
+//# sourceMappingURL=LastPriceLine.d.ts.map

package/dist/LastPriceLine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LastPriceLine.d.ts","sourceRoot":"","sources":["../src/LastPriceLine.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;CAC9D;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,kBAAkB,GAAG,IAAI,CAwB3B"}

package/dist/LastPriceLine.js

@@ -0,0 +1,29 @@
+/**
+ * @file packages/chart-react/src/LastPriceLine.tsx
+ * Declarative real-time last price line and dynamic Y-axis badge component.
+ */
+import React, { useEffect, useId } from 'react';
+import { renderLastPriceLine } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function LastPriceLine({ price, color, formatter, }) {
+    const { registerOverlayLayer, yScale, bounds, padding } = useChartContext();
+    const id = useId();
+    useEffect(() => {
+        if (!yScale || !Number.isFinite(price))
+            return;
+        const unregister = registerOverlayLayer(id, (ctx, _bounds, _padding, dpr) => {
+            renderLastPriceLine({
+                ctx,
+                lastPrice: price,
+                yScale,
+                bounds,
+                padding,
+                dpr,
+                color,
+                formatter,
+            });
+        });
+        return unregister;
+    }, [registerOverlayLayer, id, price, yScale, bounds, padding, color, formatter]);
+    return null;
+}

package/dist/LineSeries.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @file packages/chart-react/src/LineSeries.tsx
+ * Declarative Line and Area series component.
+ */
+import type { CurveInterpolation } from '@tranding-custom-chart/core';
+export interface LineSeriesProps {
+    readonly data: readonly (number | null | undefined)[];
+    readonly color?: string | undefined;
+    readonly strokeWidth?: number | undefined;
+    readonly lineDash?: readonly number[] | undefined;
+    readonly curve?: CurveInterpolation | undefined;
+    readonly tension?: number | undefined;
+    readonly areaFill?: {
+        readonly gradientTopColor: string;
+        readonly gradientBottomColor: string;
+        readonly baselineY: number;
+    } | undefined;
+}
+export declare function LineSeries({ data, color, strokeWidth, lineDash, curve, tension, areaFill, }: LineSeriesProps): null;
+//# sourceMappingURL=LineSeries.d.ts.map

package/dist/LineSeries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineSeries.d.ts","sourceRoot":"","sources":["../src/LineSeries.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,EAAE,kBAAkB,EAAS,MAAM,6BAA6B,CAAC;AAG7E,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,CAAC;IACtD,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,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IAClD,QAAQ,CAAC,KAAK,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAClB,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;QAClC,QAAQ,CAAC,mBAAmB,EAAE,MAAM,CAAC;QACrC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;KAC5B,GAAG,SAAS,CAAC;CACf;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAiB,EACjB,WAAe,EACf,QAAQ,EACR,KAAgB,EAChB,OAAa,EACb,QAAQ,GACT,EAAE,eAAe,GAAG,IAAI,CAsExB"}

package/dist/LineSeries.js

@@ -0,0 +1,74 @@
+/**
+ * @file packages/chart-react/src/LineSeries.tsx
+ * Declarative Line and Area series component.
+ */
+import React, { useEffect, useId } from 'react';
+import { renderLineSeries, renderCurvedLine } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function LineSeries({ data, color = '#155c45', strokeWidth = 2, lineDash, curve = 'linear', tension = 0.8, areaFill, }) {
+    const { registerDataLayer, registerHitTest, xScale, yScale } = 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 val = data[idx];
+                if (val !== null && val !== undefined && Number.isFinite(val)) {
+                    const px = xScale.scale(idx);
+                    const py = yScale.scale(val);
+                    if (Math.abs(x - px) <= 15 && Math.abs(y - py) <= 30) {
+                        return {
+                            elementType: 'dataPoint',
+                            seriesId: id,
+                            dataIndex: idx,
+                            pointId: idx,
+                            label: String(val),
+                        };
+                    }
+                }
+            }
+            return null;
+        });
+        return unregisterHit;
+    }, [registerHitTest, id, data, xScale, yScale]);
+    useEffect(() => {
+        if (!xScale || !yScale || data.length === 0)
+            return;
+        const unregister = registerDataLayer(id, (ctx) => {
+            if (curve === 'bezier') {
+                const validPoints = [];
+                for (let i = 0; i < data.length; i++) {
+                    const val = data[i];
+                    if (val !== null && val !== undefined && Number.isFinite(val)) {
+                        validPoints.push({
+                            x: xScale.scale(i),
+                            y: yScale.scale(val),
+                        });
+                    }
+                }
+                renderCurvedLine(ctx, validPoints, {
+                    strokeColor: color,
+                    strokeWidth,
+                    tension,
+                    areaFill,
+                });
+            }
+            else {
+                renderLineSeries({
+                    ctx,
+                    points: data,
+                    xScale,
+                    yScale,
+                    color,
+                    strokeWidth,
+                    lineDash,
+                    areaFill,
+                });
+            }
+        });
+        return unregister;
+    }, [registerDataLayer, id, data, xScale, yScale, color, strokeWidth, lineDash, curve, tension, areaFill]);
+    return null;
+}

package/dist/LineWithMarkersSeries.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @file packages/chart-react/src/LineWithMarkersSeries.tsx
+ * Declarative Line with Markers series component.
+ */
+export interface LineWithMarkersSeriesProps {
+    readonly data: readonly number[];
+    readonly color?: string | undefined;
+    readonly strokeWidth?: number | undefined;
+    readonly markerRadius?: number | undefined;
+    readonly markerFillColor?: string | undefined;
+}
+export declare function LineWithMarkersSeries({ data, color, strokeWidth, markerRadius, markerFillColor, }: LineWithMarkersSeriesProps): null;
+//# sourceMappingURL=LineWithMarkersSeries.d.ts.map

package/dist/LineWithMarkersSeries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineWithMarkersSeries.d.ts","sourceRoot":"","sources":["../src/LineWithMarkersSeries.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;IACjC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/C;AAED,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,KAAiB,EACjB,WAAe,EACf,YAAgB,EAChB,eAA2B,GAC5B,EAAE,0BAA0B,GAAG,IAAI,CAyBnC"}

package/dist/LineWithMarkersSeries.js

@@ -0,0 +1,30 @@
+/**
+ * @file packages/chart-react/src/LineWithMarkersSeries.tsx
+ * Declarative Line with Markers series component.
+ */
+import React, { useEffect, useId } from 'react';
+import { renderLineWithMarkers } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function LineWithMarkersSeries({ data, color = '#2563eb', strokeWidth = 2, markerRadius = 3, markerFillColor = '#ffffff', }) {
+    const { registerDataLayer, xScale, yScale } = useChartContext();
+    const id = useId();
+    useEffect(() => {
+        if (!xScale || !yScale || data.length === 0)
+            return;
+        const unregister = registerDataLayer(id, (ctx) => {
+            renderLineWithMarkers({
+                ctx,
+                points: data,
+                xScale,
+                yScale,
+                color,
+                strokeWidth,
+                markerRadius,
+                markerFillColor,
+                markerStrokeColor: color,
+            });
+        });
+        return unregister;
+    }, [registerDataLayer, id, data, xScale, yScale, color, strokeWidth, markerRadius, markerFillColor]);
+    return null;
+}

package/dist/MixedChartSeries.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @file packages/chart-react/src/MixedChartSeries.tsx
+ * Declarative component for heterogeneous mixed datasets (Bar + Line + Spline + Area).
+ * Coordinated multi-dataset rendering with dual-axis scale synchronization.
+ */
+import type { MixedDataset, Scale } from '@tranding-custom-chart/core';
+export interface MixedChartSeriesProps {
+    /** Array of heterogeneous datasets (bars, lines, splines, areas, scatter) */
+    readonly datasets: readonly MixedDataset[];
+    /** Optional secondary Y-Scale for datasets assigned to yAxisPosition="right" */
+    readonly secondaryYScale?: Scale<number> | undefined;
+}
+export declare function MixedChartSeries({ datasets, secondaryYScale, }: MixedChartSeriesProps): null;
+//# sourceMappingURL=MixedChartSeries.d.ts.map

package/dist/MixedChartSeries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MixedChartSeries.d.ts","sourceRoot":"","sources":["../src/MixedChartSeries.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAIvE,MAAM,WAAW,qBAAqB;IACpC,6EAA6E;IAC7E,QAAQ,CAAC,QAAQ,EAAE,SAAS,YAAY,EAAE,CAAC;IAC3C,gFAAgF;IAChF,QAAQ,CAAC,eAAe,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;CACtD;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,eAAe,GAChB,EAAE,qBAAqB,GAAG,IAAI,CAwB9B"}

package/dist/MixedChartSeries.js

@@ -0,0 +1,30 @@
+/**
+ * @file packages/chart-react/src/MixedChartSeries.tsx
+ * Declarative component for heterogeneous mixed datasets (Bar + Line + Spline + Area).
+ * Coordinated multi-dataset rendering with dual-axis scale synchronization.
+ */
+import React, { useEffect, useId } from 'react';
+import { renderMixedDatasets } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function MixedChartSeries({ datasets, secondaryYScale, }) {
+    const { registerDataLayer, xScale, yScale } = useChartContext();
+    const id = useId();
+    useEffect(() => {
+        if (!xScale || !yScale)
+            return;
+        const unregister = registerDataLayer(id, (ctx, bounds, padding, dpr) => {
+            renderMixedDatasets({
+                ctx,
+                bounds,
+                padding,
+                xScale,
+                yScale,
+                secondaryYScale,
+                datasets,
+                dpr,
+            });
+        });
+        return unregister;
+    }, [registerDataLayer, id, xScale, yScale, secondaryYScale, datasets]);
+    return null;
+}

package/dist/OhlcBarSeries.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @file packages/chart-react/src/OhlcBarSeries.tsx
+ * Declarative American OHLC Bar series component.
+ */
+import type { OHLCVBar } from '@tranding-custom-chart/core';
+export interface OhlcBarSeriesProps {
+    readonly data: readonly OHLCVBar[];
+    readonly upColor?: string | undefined;
+    readonly downColor?: string | undefined;
+    readonly tickWidthRatio?: number | undefined;
+    readonly lineWidth?: number | undefined;
+}
+export declare function OhlcBarSeries({ data, upColor, downColor, tickWidthRatio, lineWidth, }: OhlcBarSeriesProps): null;
+//# sourceMappingURL=OhlcBarSeries.d.ts.map

package/dist/OhlcBarSeries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OhlcBarSeries.d.ts","sourceRoot":"","sources":["../src/OhlcBarSeries.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,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACzC;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,SAAS,EACT,cAAqB,EACrB,SAAe,GAChB,EAAE,kBAAkB,GAAG,IAAI,CA0B3B"}

package/dist/OhlcBarSeries.js

@@ -0,0 +1,31 @@
+/**
+ * @file packages/chart-react/src/OhlcBarSeries.tsx
+ * Declarative American OHLC Bar series component.
+ */
+import React, { useEffect, useId } from 'react';
+import { renderOhlcBars } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function OhlcBarSeries({ data, upColor, downColor, tickWidthRatio = 0.35, lineWidth = 1.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) => {
+            renderOhlcBars({
+                ctx,
+                bars: data,
+                xScale,
+                yScale,
+                theme,
+                dpr,
+                tickWidthRatio,
+                customUpColor: upColor,
+                customDownColor: downColor,
+                lineWidth,
+            });
+        });
+        return unregister;
+    }, [registerDataLayer, id, data, xScale, yScale, theme, upColor, downColor, tickWidthRatio, lineWidth]);
+    return null;
+}

package/dist/PieSeries.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @file packages/chart-react/src/PieSeries.tsx
+ * Declarative Pie and Doughnut series component.
+ */
+import type { PieSlice } from '@tranding-custom-chart/core';
+import { type PieCenterText } from '@tranding-custom-chart/renderer-canvas';
+export interface PieSeriesProps {
+    readonly slices: readonly PieSlice[];
+    readonly radius?: number | undefined;
+    readonly innerRadius?: number | undefined;
+    readonly hoverIndex?: number | null | undefined;
+    readonly hoverExplodeDistance?: number | undefined;
+    readonly borderColor?: string | undefined;
+    readonly borderWidth?: number | undefined;
+    readonly centerText?: PieCenterText | undefined;
+}
+export declare function PieSeries({ slices, radius, innerRadius, hoverIndex, hoverExplodeDistance, borderColor, borderWidth, centerText, }: PieSeriesProps): null;
+//# sourceMappingURL=PieSeries.d.ts.map

package/dist/PieSeries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieSeries.d.ts","sourceRoot":"","sources":["../src/PieSeries.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAa,KAAK,aAAa,EAAE,MAAM,wCAAwC,CAAC;AAGvF,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,MAAM,EAAE,SAAS,QAAQ,EAAE,CAAC;IACrC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnD,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,UAAU,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;CACjD;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,MAAM,EACN,WAAe,EACf,UAAiB,EACjB,oBAAwB,EACxB,WAAW,EACX,WAAe,EACf,UAAU,GACX,EAAE,cAAc,GAAG,IAAI,CAqFvB"}

package/dist/PieSeries.js

@@ -0,0 +1,85 @@
+/**
+ * @file packages/chart-react/src/PieSeries.tsx
+ * Declarative Pie and Doughnut series component.
+ */
+import React, { useEffect, useId } from 'react';
+import { renderPie } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function PieSeries({ slices, radius, innerRadius = 0, hoverIndex = null, hoverExplodeDistance = 6, borderColor, borderWidth = 2, centerText, }) {
+    const { registerDataLayer, registerHitTest, bounds } = useChartContext();
+    const id = useId();
+    useEffect(() => {
+        if (slices.length === 0)
+            return;
+        const unregisterHit = registerHitTest(id, (x, y) => {
+            const cx = bounds.width / 2;
+            const cy = bounds.height / 2;
+            const maxRadius = Math.min(cx, cy) - 20;
+            const actualRadius = radius ?? Math.max(10, maxRadius);
+            const dx = x - cx;
+            const dy = y - cy;
+            const dist = Math.hypot(dx, dy);
+            if (dist >= innerRadius && dist <= actualRadius) {
+                let angle = Math.atan2(dy, dx);
+                if (angle < 0)
+                    angle += 2 * Math.PI;
+                const total = slices.reduce((acc, s) => acc + s.value, 0);
+                if (total <= 0)
+                    return null;
+                let currentAngle = 0;
+                for (let i = 0; i < slices.length; i++) {
+                    const slice = slices[i];
+                    const sliceAngle = (slice.value / total) * 2 * Math.PI;
+                    if (angle >= currentAngle && angle <= currentAngle + sliceAngle) {
+                        return {
+                            elementType: 'slice',
+                            seriesId: id,
+                            elementId: slice.id,
+                            dataIndex: i,
+                            label: slice.label,
+                        };
+                    }
+                    currentAngle += sliceAngle;
+                }
+            }
+            return null;
+        });
+        return unregisterHit;
+    }, [registerHitTest, id, slices, bounds, radius, innerRadius]);
+    useEffect(() => {
+        if (slices.length === 0)
+            return;
+        const unregister = registerDataLayer(id, (ctx) => {
+            const cx = bounds.width / 2;
+            const cy = bounds.height / 2;
+            const maxRadius = Math.min(cx, cy) - 20;
+            const actualRadius = radius ?? Math.max(10, maxRadius);
+            renderPie(ctx, slices, {
+                cx,
+                cy,
+                radius: actualRadius,
+                innerRadius,
+                hoverIndex,
+                hoverExplodeDistance,
+                borderColor: borderColor ?? ctx.canvas?.style?.backgroundColor ?? '#181b19',
+                borderWidth,
+                centerText,
+            });
+        });
+        return unregister;
+    }, [
+        registerDataLayer,
+        id,
+        slices,
+        bounds.width,
+        bounds.height,
+        radius,
+        innerRadius,
+        hoverIndex,
+        hoverExplodeDistance,
+        borderColor,
+        borderWidth,
+        centerText,
+    ]);
+    return null;
+}

package/dist/PluginLayer.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @file packages/chart-react/src/PluginLayer.tsx
+ * Declarative component for registering a custom ChartPlugin inside <ChartContainer>.
+ */
+import type { ChartPlugin } from '@tranding-custom-chart/core';
+export interface PluginLayerProps<O = Record<string, unknown>> {
+    readonly plugin: ChartPlugin<O>;
+    readonly options?: O | undefined;
+}
+export declare function PluginLayer<O>({ plugin, options }: PluginLayerProps<O>): null;
+//# sourceMappingURL=PluginLayer.d.ts.map

package/dist/PluginLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginLayer.d.ts","sourceRoot":"","sources":["../src/PluginLayer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAG/D,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3D,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IAChC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;CAClC;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,IAAI,CAS7E"}

package/dist/PluginLayer.js

@@ -0,0 +1,14 @@
+/**
+ * @file packages/chart-react/src/PluginLayer.tsx
+ * Declarative component for registering a custom ChartPlugin inside <ChartContainer>.
+ */
+import React, { useEffect } from 'react';
+import { useChartContext } from './ChartContext.js';
+export function PluginLayer({ plugin, options }) {
+    const { registerPlugin } = useChartContext();
+    useEffect(() => {
+        const unregister = registerPlugin(plugin, options);
+        return unregister;
+    }, [registerPlugin, plugin, options]);
+    return null;
+}

package/dist/PolarAreaSeries.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @file packages/chart-react/src/PolarAreaSeries.tsx
+ * Declarative Polar Area Chart series component.
+ */
+import type { PolarAreaDatum } from '@tranding-custom-chart/core';
+import { type PolarAreaRenderOptions } from '@tranding-custom-chart/renderer-canvas';
+export interface PolarAreaSeriesProps extends PolarAreaRenderOptions {
+    readonly data: readonly PolarAreaDatum[];
+}
+export declare function PolarAreaSeries({ data, startAngle, strokeColor, strokeWidth, showLabels, }: PolarAreaSeriesProps): null;
+//# sourceMappingURL=PolarAreaSeries.d.ts.map

package/dist/PolarAreaSeries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PolarAreaSeries.d.ts","sourceRoot":"","sources":["../src/PolarAreaSeries.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAmB,KAAK,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAGtG,MAAM,WAAW,oBAAqB,SAAQ,sBAAsB;IAClE,QAAQ,CAAC,IAAI,EAAE,SAAS,cAAc,EAAE,CAAC;CAC1C;AAED,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,UAAyB,EACzB,WAAwC,EACxC,WAAe,EACf,UAAiB,GAClB,EAAE,oBAAoB,GAAG,IAAI,CA8B7B"}

package/dist/PolarAreaSeries.js

@@ -0,0 +1,35 @@
+/**
+ * @file packages/chart-react/src/PolarAreaSeries.tsx
+ * Declarative Polar Area Chart series component.
+ */
+import React, { useEffect, useId } from 'react';
+import { renderPolarArea } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function PolarAreaSeries({ data, startAngle = -Math.PI / 2, strokeColor = 'rgba(255, 255, 255, 0.4)', strokeWidth = 1, showLabels = true, }) {
+    const { registerDataLayer, bounds, padding } = useChartContext();
+    const id = useId();
+    useEffect(() => {
+        if (!data || data.length === 0)
+            return;
+        const unregister = registerDataLayer(id, (ctx) => {
+            renderPolarArea(ctx, data, bounds, padding, {
+                startAngle,
+                strokeColor,
+                strokeWidth,
+                showLabels,
+            });
+        });
+        return unregister;
+    }, [
+        registerDataLayer,
+        id,
+        data,
+        bounds,
+        padding,
+        startAngle,
+        strokeColor,
+        strokeWidth,
+        showLabels,
+    ]);
+    return null;
+}

package/dist/RadarSeries.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @file packages/chart-react/src/RadarSeries.tsx
+ * Declarative Radar / Spider series component.
+ */
+import type { RadarAxis, RadarDataset } from '@tranding-custom-chart/core';
+export interface RadarSeriesProps {
+    readonly axes: readonly RadarAxis[];
+    readonly datasets: readonly RadarDataset[];
+    readonly radius?: number | undefined;
+    readonly rings?: number | undefined;
+    readonly gridColor?: string | undefined;
+    readonly axisColor?: string | undefined;
+    readonly labelColor?: string | undefined;
+}
+export declare function RadarSeries({ axes, datasets, radius, rings, gridColor, axisColor, labelColor, }: RadarSeriesProps): null;
+//# sourceMappingURL=RadarSeries.d.ts.map

package/dist/RadarSeries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadarSeries.d.ts","sourceRoot":"","sources":["../src/RadarSeries.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAI3E,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,IAAI,EAAE,SAAS,SAAS,EAAE,CAAC;IACpC,QAAQ,CAAC,QAAQ,EAAE,SAAS,YAAY,EAAE,CAAC;IAC3C,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1C;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,KAAS,EACT,SAAS,EACT,SAAS,EACT,UAAU,GACX,EAAE,gBAAgB,GAAG,IAAI,CA2CzB"}

package/dist/RadarSeries.js

@@ -0,0 +1,47 @@
+/**
+ * @file packages/chart-react/src/RadarSeries.tsx
+ * Declarative Radar / Spider series component.
+ */
+import React, { useEffect, useId } from 'react';
+import { renderRadar } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function RadarSeries({ axes, datasets, radius, rings = 4, gridColor, axisColor, labelColor, }) {
+    const { registerDataLayer, bounds, theme } = useChartContext();
+    const id = useId();
+    useEffect(() => {
+        if (axes.length < 3)
+            return;
+        const unregister = registerDataLayer(id, (ctx) => {
+            const cx = bounds.width / 2;
+            const cy = bounds.height / 2;
+            const maxRadius = Math.min(cx, cy) - 40;
+            const actualRadius = radius ?? Math.max(20, maxRadius);
+            renderRadar(ctx, axes, datasets, {
+                cx,
+                cy,
+                radius: actualRadius,
+                rings,
+                gridColor: gridColor ?? theme.gridLine,
+                axisColor: axisColor ?? theme.axisLine,
+                labelColor: labelColor ?? theme.textSecondary,
+            });
+        });
+        return unregister;
+    }, [
+        registerDataLayer,
+        id,
+        axes,
+        datasets,
+        bounds.width,
+        bounds.height,
+        radius,
+        rings,
+        gridColor,
+        axisColor,
+        labelColor,
+        theme.gridLine,
+        theme.axisLine,
+        theme.textSecondary,
+    ]);
+    return null;
+}

package/dist/ScatterSeries.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @file packages/chart-react/src/ScatterSeries.tsx
+ * Declarative Scatter Plot series component.
+ */
+import type { ScatterDatum } from '@tranding-custom-chart/core';
+import { type ScatterRenderOptions } from '@tranding-custom-chart/renderer-canvas';
+export interface ScatterSeriesProps extends ScatterRenderOptions {
+    readonly data: readonly ScatterDatum[];
+}
+export declare function ScatterSeries({ data, defaultRadius, defaultColor, strokeColor, strokeWidth, shape, }: ScatterSeriesProps): null;
+//# sourceMappingURL=ScatterSeries.d.ts.map

package/dist/ScatterSeries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterSeries.d.ts","sourceRoot":"","sources":["../src/ScatterSeries.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,aAAiB,EACjB,YAAwB,EACxB,WAAuB,EACvB,WAAiB,EACjB,KAAgB,GACjB,EAAE,kBAAkB,GAAG,IAAI,CAyD3B"}