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

package/dist/WatermarkOverlay.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @file packages/chart-react/src/WatermarkOverlay.tsx
+ * Declarative background watermark component.
+ */
+export interface WatermarkOverlayProps {
+    readonly text: string;
+    readonly subText?: string | undefined;
+    readonly color?: string | undefined;
+}
+export declare function WatermarkOverlay({ text, subText, color, }: WatermarkOverlayProps): null;
+//# sourceMappingURL=WatermarkOverlay.d.ts.map

package/dist/WatermarkOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WatermarkOverlay.d.ts","sourceRoot":"","sources":["../src/WatermarkOverlay.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,OAAO,EACP,KAAK,GACN,EAAE,qBAAqB,GAAG,IAAI,CAsB9B"}

package/dist/WatermarkOverlay.js

@@ -0,0 +1,27 @@
+/**
+ * @file packages/chart-react/src/WatermarkOverlay.tsx
+ * Declarative background watermark component.
+ */
+import React, { useEffect, useId } from 'react';
+import { renderWatermark } from '@tranding-custom-chart/renderer-canvas';
+import { useChartContext } from './ChartContext.js';
+export function WatermarkOverlay({ text, subText, color, }) {
+    const { registerDataLayer, bounds, padding } = useChartContext();
+    const id = useId();
+    useEffect(() => {
+        if (!text)
+            return;
+        const unregister = registerDataLayer(id, (ctx) => {
+            renderWatermark({
+                ctx,
+                bounds,
+                padding,
+                text,
+                subText,
+                color,
+            });
+        });
+        return unregister;
+    }, [registerDataLayer, id, bounds, padding, text, subText, color]);
+    return null;
+}

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @file packages/chart-react/src/index.ts
+ * Main entry point for @tranding-custom-chart/react.
+ */
+export * from './ChartContext.js';
+export * from './ChartContainer.js';
+export * from './CandlestickSeries.js';
+export * from './HollowCandlestickSeries.js';
+export * from './OhlcBarSeries.js';
+export * from './BaselineSeries.js';
+export * from './StepLineSeries.js';
+export * from './HighLowSeries.js';
+export * from './LineSeries.js';
+export * from './VolumeSeries.js';
+export * from './GridAxes.js';
+export * from './CrosshairOverlay.js';
+export * from './ColumnsSeries.js';
+export * from './LineWithMarkersSeries.js';
+export * from './HlcAreaSeries.js';
+export * from './WatermarkOverlay.js';
+export * from './LastPriceLine.js';
+export * from './DrawingOverlay.js';
+export * from './UniversalSeries.js';
+export * from './AccessibleChartTable.js';
+export * from './ChartSyncGroup.js';
+export * from './PieSeries.js';
+export * from './HorizontalBarSeries.js';
+export * from './StackedBarSeries.js';
+export * from './RadarSeries.js';
+export * from './VolumeProfileSeries.js';
+export * from './SupertrendSeries.js';
+export * from './ScatterSeries.js';
+export * from './BubbleSeries.js';
+export * from './PolarAreaSeries.js';
+export * from './BoxPlotSeries.js';
+export * from './HeatmapSeries.js';
+export * from './MixedChartSeries.js';
+export * from './PluginLayer.js';
+export * from './SeriesMarkersOverlay.js';
+export * from './InteractiveLegend.js';
+export * from './useChart.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC"}

package/dist/index.js

@@ -0,0 +1,41 @@
+/**
+ * @file packages/chart-react/src/index.ts
+ * Main entry point for @tranding-custom-chart/react.
+ */
+export * from './ChartContext.js';
+export * from './ChartContainer.js';
+export * from './CandlestickSeries.js';
+export * from './HollowCandlestickSeries.js';
+export * from './OhlcBarSeries.js';
+export * from './BaselineSeries.js';
+export * from './StepLineSeries.js';
+export * from './HighLowSeries.js';
+export * from './LineSeries.js';
+export * from './VolumeSeries.js';
+export * from './GridAxes.js';
+export * from './CrosshairOverlay.js';
+export * from './ColumnsSeries.js';
+export * from './LineWithMarkersSeries.js';
+export * from './HlcAreaSeries.js';
+export * from './WatermarkOverlay.js';
+export * from './LastPriceLine.js';
+export * from './DrawingOverlay.js';
+export * from './UniversalSeries.js';
+export * from './AccessibleChartTable.js';
+export * from './ChartSyncGroup.js';
+export * from './PieSeries.js';
+export * from './HorizontalBarSeries.js';
+export * from './StackedBarSeries.js';
+export * from './RadarSeries.js';
+export * from './VolumeProfileSeries.js';
+export * from './SupertrendSeries.js';
+export * from './ScatterSeries.js';
+export * from './BubbleSeries.js';
+export * from './PolarAreaSeries.js';
+export * from './BoxPlotSeries.js';
+export * from './HeatmapSeries.js';
+export * from './MixedChartSeries.js';
+export * from './PluginLayer.js';
+export * from './SeriesMarkersOverlay.js';
+export * from './InteractiveLegend.js';
+export * from './useChart.js';

package/dist/useChart.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @file packages/chart-react/src/useChart.ts
+ * Convenience hooks to access chart engine, context, synchronization, and responsive dimensions.
+ */
+export { useChartContext, useChartContext as useChart } from './ChartContext.js';
+export { useChartSync } from './ChartSyncGroup.js';
+/**
+ * Hook to measure and track the container's rendered width and height responsively.
+ * Handles resize events smoothly and prevents infinite observer loops.
+ */
+export declare function useResponsiveDimensions(defaultHeight?: number, minWidth?: number): {
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+    width: number;
+    height: number;
+};
+//# sourceMappingURL=useChart.d.ts.map

package/dist/useChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChart.d.ts","sourceRoot":"","sources":["../src/useChart.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,EAAE,eAAe,EAAE,eAAe,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,aAAa,SAAM,EAAE,QAAQ,SAAM;;;;EAwB1E"}

package/dist/useChart.js

@@ -0,0 +1,34 @@
+/**
+ * @file packages/chart-react/src/useChart.ts
+ * Convenience hooks to access chart engine, context, synchronization, and responsive dimensions.
+ */
+import { useEffect, useRef, useState } from 'react';
+export { useChartContext, useChartContext as useChart } from './ChartContext.js';
+export { useChartSync } from './ChartSyncGroup.js';
+/**
+ * Hook to measure and track the container's rendered width and height responsively.
+ * Handles resize events smoothly and prevents infinite observer loops.
+ */
+export function useResponsiveDimensions(defaultHeight = 450, minWidth = 280) {
+    const containerRef = useRef(null);
+    const [dimensions, setDimensions] = useState({
+        width: 0,
+        height: defaultHeight,
+    });
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el || typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry)
+                return;
+            const w = Math.max(minWidth, Math.floor(entry.contentRect.width));
+            const h = entry.contentRect.height > 0 ? Math.floor(entry.contentRect.height) : defaultHeight;
+            setDimensions((prev) => (prev.width === w && prev.height === h ? prev : { width: w, height: h }));
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [defaultHeight, minWidth]);
+    return { containerRef, width: dimensions.width, height: dimensions.height };
+}

package/package.json

@@ -1,6 +1,95 @@
 {
   "name": "@tranding-custom-chart/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "2.1.0",
+  "description": "Declarative React components for interactive financial and analytical Canvas 2D charts — 30+ series types (candlestick, OHLC, line, area, pie, radar, heatmap, volume profile, supertrend), WCAG 2.2 AA accessibility, drawing tools, multi-chart sync, and dynamic theming.",
+  "type": "module",
+  "license": "MIT",
+  "author": "The Creator Studio <thecreatorstudio97@gmail.com>",
+  "homepage": "https://www.npmjs.com/package/@tranding-custom-chart/react",
+  "keywords": [
+    "react",
+    "react-chart",
+    "react-charts",
+    "react-component",
+    "chart",
+    "charts",
+    "charting",
+    "canvas",
+    "canvas-2d",
+    "financial",
+    "financial-chart",
+    "trading",
+    "trading-chart",
+    "stock",
+    "stock-chart",
+    "crypto",
+    "forex",
+    "candlestick",
+    "candlestick-chart",
+    "ohlc",
+    "line-chart",
+    "area-chart",
+    "bar-chart",
+    "pie-chart",
+    "doughnut",
+    "radar-chart",
+    "heatmap",
+    "scatter-plot",
+    "bubble-chart",
+    "box-plot",
+    "volume-profile",
+    "supertrend",
+    "crosshair",
+    "drawing-tools",
+    "trendline",
+    "fibonacci",
+    "visualization",
+    "data-visualization",
+    "dataviz",
+    "interactive",
+    "composable",
+    "jsx",
+    "components",
+    "accessible",
+    "wcag",
+    "a11y",
+    "accessibility",
+    "typescript",
+    "tradingview-alternative",
+    "lightweight-charts-alternative"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thecreatorstudio97/trend-chart.git",
+    "directory": "packages/chart-react"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@tranding-custom-chart/core": "^2.1.0",
+    "@tranding-custom-chart/renderer-canvas": "^2.1.0",
+    "@tranding-custom-chart/financial": "^2.1.0"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "vitest run --config vitest.config.ts"
+  }
+}