@tranding-custom-chart/renderer-canvas 2.0.0 → 2.1.0

package/README.md

@@ -1,41 +1,352 @@
-# @tranding-custom-chart/renderer-canvas
+# Trend Chart (`@tranding-custom-chart`)
 
-> High-performance, multi-layer Canvas 2D rendering engine with sub-pixel crispness and high-DPI retina display support.
+> Enterprise-grade, high-performance Canvas 2D financial and analytical charting ecosystem for React and Vanilla TypeScript/JavaScript.
 
-[![Version](https://img.shields.io/badge/version-2.0.0-blue.svg)](https://semver.org)
-[![Canvas 2D](https://img.shields.io/badge/engine-canvas--2d-orange.svg)](#)
+[![npm (core)](https://img.shields.io/npm/v/@tranding-custom-chart/core.svg?label=%40tranding-custom-chart%2Fcore&color=blue&style=flat-square)](https://www.npmjs.com/package/@tranding-custom-chart/core)
+[![npm (react)](https://img.shields.io/npm/v/@tranding-custom-chart/react.svg?label=%40tranding-custom-chart%2Freact&color=cyan&style=flat-square)](https://www.npmjs.com/package/@tranding-custom-chart/react)
+[![npm (renderer)](https://img.shields.io/npm/v/@tranding-custom-chart/renderer-canvas.svg?label=%40tranding-custom-chart%2Frenderer-canvas&color=orange&style=flat-square)](https://www.npmjs.com/package/@tranding-custom-chart/renderer-canvas)
+[![npm (financial)](https://img.shields.io/npm/v/@tranding-custom-chart/financial.svg?label=%40tranding-custom-chart%2Ffinancial&color=green&style=flat-square)](https://www.npmjs.com/package/@tranding-custom-chart/financial)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
+[![TypeScript: Strict](https://img.shields.io/badge/TypeScript-strict-3178C6?style=flat-square&logo=typescript&logoColor=white)](#)
+[![Accessibility: WCAG 2.2 AA](https://img.shields.io/badge/accessibility-WCAG%202.2%20AA-success?style=flat-square)](#)
 
-## Features
-- **Dual-Layer Architecture**: Dedicated data canvas and interactive overlay canvas for flicker-free 60+ FPS rendering.
-- **High-DPI Retina Scaling**: Physical backing store scaled by DPR with half-pixel alignment (`snapLine`) and sharp borders (`snapRect`).
-- **Coalesced Render Scheduler**: Batches high-frequency draw calls into single `requestAnimationFrame` passes.
-- **20+ Visual Renderers**:
-  - Financial: Candlesticks, Hollow Candles, OHLC Bars, Columns, Line, Line with Markers, Step Line, Area, HLC Area, Baseline, Heikin-Ashi, High-Low, Renko Bricks.
-  - Pro Indicators: Visible Range Volume Profile (VRVP) with POC line & Value Area, Supertrend with buy/sell reversal markers.
-  - Business: Doughnut & Pie (cutout + hover explode), Stacked Bars, Horizontal Bars, Bezier Curved Splines, Radar Risk Grids.
-  - Overlays: Crosshairs, Watermarks, Last Price Lines, Cartesian Grids.
+---
 
-## Installation
+## 🌟 Key Highlights
+
+- **⚡ Blazing 60–120 FPS Performance**: Sub-millisecond Canvas 2D dual-buffer rendering pipeline capable of streaming 5,000 to 50,000+ data points with zero frame drops using LTTB (Largest-Triangle-Three-Buckets) decimation.
+- **🌐 100% Framework-Agnostic Core**: Mathematical foundations, scales, indicators, and Canvas 2D renderers operate with strictly zero UI framework dependencies. Works seamlessly in React, Vanilla JS, Angular, Vue, and Svelte.
+- **📈 Pro Financial Suite**: 15+ financial series types, including Candlestick, Hollow Candlestick, Heikin-Ashi, Renko Bricks, Kagi, Three-Line Break, OHLC Bar, High-Low Range, HLC Area, Baseline, and Visible Range Volume Profile (VRVP).
+- **📊 General & Statistical Visualizations**: Line, Bezier Curved Spline, Step Line, Bar, Horizontal Bar, Stacked Bar, Area, Pie, Doughnut, Polar Area, Radar, Scatter Plot, Bubble Chart, Box Plot, and Heatmap.
+- **🎯 Built-In Technical Indicators**: Supertrend (ATR 10 × 3 with reversal arrows), Volume Profile with POC and Value Area, ATR, MACD (12/26/9), RSI (14), Bollinger Bands, SMA, EMA, WMA, and session-anchored VWAP.
+- **🖊️ Interactive Technical Drawings**: 9 interactive drawing tools including Trendlines, Channels, Rays, Fibonacci Retracements, Horizontal/Vertical lines, Rectangles, Arrows, and Measurements with built-in undo/redo stack.
+- **🎨 Dynamic Customization & Theming**: Runtime theme switching (`pro-dark`, `clean-light`, or custom), dynamic options via `applyOptions()`, and scale reconfiguration without chart recreation.
+- **♿ WCAG 2.2 AA Accessible**: Keyboard navigation (arrow stepping, Home/End, PageUp/Down), polite ARIA live region announcements, and screen-reader HTML companion table (`AccessibleChartTable`).
+- **🔒 Zero Telemetry & Privacy First**: 100% in-house math and rendering, zero tracking, zero external network calls.
+
+---
+
+## 📦 Monorepo Package Ecosystem
+
+The library is published on npm under the **`@tranding-custom-chart`** scope:
+
+| Package | Role | Description |
+| :--- | :--- | :--- |
+| **[`@tranding-custom-chart/core`](https://www.npmjs.com/package/@tranding-custom-chart/core)** | Foundation | Scales (Linear, Log, IndexTime, ContinuousTime), LTTB downsampling, O(log N) bisection, formatters, domain contracts, event emitter, drawing geometry, and plugin manager. |
+| **[`@tranding-custom-chart/renderer-canvas`](https://www.npmjs.com/package/@tranding-custom-chart/renderer-canvas)** | Render Engine | Multi-layer Canvas 2D engine, RAF render scheduler, sub-pixel alignment (`snapLine`, `snapRect`), high-DPI retina display backing, and 20+ chart renderers. |
+| **[`@tranding-custom-chart/financial`](https://www.npmjs.com/package/@tranding-custom-chart/financial)** | Indicators & Layout | Technical indicators (SMA, EMA, RSI, MACD, Bollinger, Supertrend, VRVP), Renko/Heikin-Ashi generators, and proportional multi-pane vertical layout engine. |
+| **[`@tranding-custom-chart/react`](https://www.npmjs.com/package/@tranding-custom-chart/react)** | React Adapter | Declarative JSX components (`ChartContainer`, `UniversalSeries`, `CrosshairOverlay`, `GridAxes`, `InteractiveLegend`), `useChart` hook, and multi-pane sync. |
+
+---
+
+## 🚀 Installation
+
+### Option 1: React Application (Full Suite)
 ```bash
-npm install @tranding-custom-chart/renderer-canvas @tranding-custom-chart/core
+npm install @tranding-custom-chart/react @tranding-custom-chart/core @tranding-custom-chart/renderer-canvas @tranding-custom-chart/financial
+```
+
+### Option 2: Vanilla JavaScript / TypeScript
+```bash
+npm install @tranding-custom-chart/core @tranding-custom-chart/renderer-canvas @tranding-custom-chart/financial
+```
+
+---
+
+## 💡 Quick Start Examples
+
+### 1. React Trading Chart
+
+```tsx
+import React from 'react';
+import {
+  ChartContainer,
+  CandlestickSeries,
+  VolumeSeries,
+  SupertrendSeries,
+  VolumeProfileSeries,
+  GridAxes,
+  CrosshairOverlay,
+  InteractiveLegend,
+} from '@tranding-custom-chart/react';
+import {
+  createIndexTimeScale,
+  createLinearScale,
+  calculateOHLCDomain,
+  type OHLCVBar,
+} from '@tranding-custom-chart/core';
+import { computeSupertrend, computeVolumeProfile } from '@tranding-custom-chart/financial';
+
+interface Props {
+  candles: OHLCVBar[];
+}
+
+export function TradingChart({ candles }: Props) {
+  const xScale = createIndexTimeScale(candles.length, [40, 760]);
+  const yDomain = calculateOHLCDomain(candles);
+  const yScale = createLinearScale(yDomain, [380, 20]);
+
+  // Compute indicators
+  const supertrend = computeSupertrend(candles, { period: 10, multiplier: 3.0 });
+  const volumeProfile = computeVolumeProfile(candles, { binCount: 24, valueAreaRatio: 0.7 });
+
+  return (
+    <ChartContainer
+      width={800}
+      height={420}
+      xScale={xScale}
+      yScale={yScale}
+      ariaLabel="BTC/USD Trading Chart"
+      options={{
+        theme: 'pro-dark',
+        crosshair: { enabled: true },
+      }}
+    >
+      <GridAxes />
+      <CandlestickSeries bars={candles} />
+      <SupertrendSeries bars={candles} />
+      <VolumeSeries bars={candles} />
+      <VolumeProfileSeries bars={candles} />
+      <CrosshairOverlay />
+      <InteractiveLegend />
+    </ChartContainer>
+  );
+}
 ```
 
-## Quick Start
+---
+
+### 2. Vanilla JavaScript / TypeScript Canvas 2D
+
 ```ts
-import { CanvasChartEngine } from '@tranding-custom-chart/renderer-canvas';
+import {
+  createIndexTimeScale,
+  createLinearScale,
+  calculateOHLCDomain,
+} from '@tranding-custom-chart/core';
+import {
+  CanvasChartEngine,
+  renderCandlesticks,
+  renderGrid,
+  renderCrosshair,
+} from '@tranding-custom-chart/renderer-canvas';
 
+const container = document.getElementById('chart-container')!;
+
+// Initialize high-DPI dual-layer Canvas engine
 const engine = new CanvasChartEngine({
-  container: document.getElementById('chart')!,
+  container,
   width: 800,
   height: 450,
 });
 
+const xScale = createIndexTimeScale(candles.length, [50, 750]);
+const yScale = createLinearScale(calculateOHLCDomain(candles), [400, 20]);
+
+// Register data rendering layer
 engine.registerDataLayer('main', (ctx) => {
-  // draw series
+  renderGrid(ctx, xScale, yScale, { width: 800, height: 450 });
+  renderCandlesticks(ctx, candles, xScale, yScale, {
+    upColor: '#26a69a',
+    downColor: '#ef5350',
+    barWidth: 0.8,
+  });
+});
+
+// Register interactive overlay layer
+engine.registerOverlayLayer('crosshair', (ctx, state) => {
+  if (state.mouseX && state.mouseY) {
+    renderCrosshair(ctx, state.mouseX, state.mouseY, 800, 450);
+  }
 });
 
+// Request coalesced RAF render
 engine.requestRender();
 ```
 
-## License
-UNLICENSED (Internal / In-House Use)
+---
+
+### 3. Angular Component
+
+```typescript
+import { Component, ElementRef, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
+import { CanvasChartEngine, renderCandlesticks, renderGrid } from '@tranding-custom-chart/renderer-canvas';
+import { createIndexTimeScale, createLinearScale, calculateOHLCDomain, type OHLCVBar } from '@tranding-custom-chart/core';
+
+@Component({
+  selector: 'app-trading-chart',
+  template: `<div #chartContainer style="width: 100%; height: 450px;"></div>`,
+})
+export class TradingChartComponent implements AfterViewInit, OnDestroy {
+  @ViewChild('chartContainer') chartRef!: ElementRef<HTMLDivElement>;
+  private engine?: CanvasChartEngine;
+
+  ngAfterViewInit() {
+    this.engine = new CanvasChartEngine({
+      container: this.chartRef.nativeElement,
+      width: 800,
+      height: 450,
+    });
+  }
+
+  ngOnDestroy() {
+    this.engine?.destroy();
+  }
+}
+```
+
+---
+
+## 📊 Comprehensive Visualizations
+
+### Financial Series Types
+| Series Type | Description | Key Features |
+| :--- | :--- | :--- |
+| **Candlestick** | Classic OHLC Japanese candlesticks | Configurable up/down colors, wick styling, sub-pixel centering |
+| **Hollow Candlestick** | Solid down candles, hollow up candles | Traditional Wall Street visual style |
+| **OHLC Bar** | Western tick-mark price bars | Open tick left, close tick right |
+| **Heikin-Ashi** | Synthetic smoothed price action | Filters out intraday noise, calculates trend direction |
+| **Renko** | Price-movement bricks | Time-independent, bricks form only on specified price movement |
+| **Kagi** | Supply/demand vertical lines | Reversal threshold tracking (inflection points) |
+| **Line Break** | Three-line break reversal bars | Identifies trend changes based on previous N-bar extremes |
+| **High-Low Range** | Daily high/low price spread | Bar spread without open/close clutter |
+| **Baseline / Percentage** | Area filled above/below baseline | Highlights performance relative to a benchmark price ($P_0$) |
+| **HLC Area** | High-Low-Close shaded area | Visual volatility boundary |
+
+### General & Business Visualizations
+| Series Type | Description | Key Features |
+| :--- | :--- | :--- |
+| **Line** | Solid, dashed, or dotted lines | Smooth stroke, configurable tension |
+| **Line with Markers** | Line chart with data point shapes | Circle, square, diamond, triangle markers |
+| **Step Line** | Step-after / step-before line | Discontinuous state changes |
+| **Bezier Spline** | Catmull-Rom $C^1$ cubic spline | Smooth curve interpolation with tension control |
+| **Bar / Column** | Vertical category / volume bars | Grouped, auto-spacing, color-mapped |
+| **Horizontal Bar** | Horizontal rank bars | Ideal for categorical leaderboard distributions |
+| **Stacked Bar** | Multi-segment stacked bars | Part-to-whole categorical breakdown |
+| **Pie & Doughnut** | Radial slice allocation | Configurable cutout ratio, hover explode effect, legend filter |
+| **Polar Area** | Radial equidistant segments | Angle-equal, radius-scaled categorical data |
+| **Radar (Spider)** | Multi-axis risk / performance grid | Concentric polygonal grid lines, multi-strategy overlays |
+| **Scatter & Bubble** | 2D/3D XY data points | Variable radius, color encoding |
+| **Box Plot** | Five-number statistical summary | Minimum, Q1, Median, Q3, Maximum, and outlier dots |
+| **Heatmap** | 2D color-gradient matrix | Density and intensity matrix visualization |
+
+---
+
+## 📈 Technical Indicators (`@tranding-custom-chart/financial`)
+
+All indicators are pure TypeScript functions with zero external dependencies:
+
+```ts
+import {
+  computeSMA,
+  computeEMA,
+  computeWMA,
+  computeVWAP,
+  computeRSI,
+  computeMACD,
+  computeBollingerBands,
+  computeATR,
+  computeSupertrend,
+  computeVolumeProfile,
+} from '@tranding-custom-chart/financial';
+
+// 1. Moving Averages
+const sma20 = computeSMA(bars, { period: 20, source: 'close' });
+const ema50 = computeEMA(bars, { period: 50, source: 'close' });
+const wma14 = computeWMA(bars, { period: 14, source: 'close' });
+const vwap = computeVWAP(bars);
+
+// 2. Momentum & Oscillators
+const rsi = computeRSI(bars, { period: 14 }); // Wilder's smoothed (0-100)
+const macd = computeMACD(bars, { fastPeriod: 12, slowPeriod: 26, signalPeriod: 9 });
+// macd -> [{ macdLine, signalLine, histogram }]
+
+// 3. Volatility
+const bb = computeBollingerBands(bars, { period: 20, stdDev: 2.0 });
+// bb -> [{ upper, middle, lower }]
+const atr = computeATR(bars, { period: 14 });
+
+// 4. Trend Following
+const st = computeSupertrend(bars, { period: 10, multiplier: 3.0 });
+// st -> [{ value, direction, reversal: boolean }]
+
+// 5. Volume Analysis (Visible Range Volume Profile - VRVP)
+const vp = computeVolumeProfile(bars, { binCount: 24, valueAreaRatio: 0.7 });
+console.log('POC Price:', vp.pocPrice);
+console.log('Value Area High:', vp.valueAreaHigh);
+console.log('Value Area Low:', vp.valueAreaLow);
+```
+
+---
+
+## 🖊️ Interactive Technical Drawing Tools
+
+The library includes an interactive drawing engine with coordinate invariance and an undo/redo stack:
+
+| Tool | Type ID | Usage |
+| :--- | :--- | :--- |
+| **Trendline** | `trendline` | Linear regression / manual trendline with extension |
+| **Horizontal Line** | `horizontal_line` | Key support/resistance price level |
+| **Vertical Line** | `vertical_line` | Specific time marker / session boundary |
+| **Channel** | `channel` | Parallel upper/lower trend corridor |
+| **Ray** | `ray` | Semi-infinite line starting from point $P_1$ through $P_2$ |
+| **Rectangle** | `rectangle` | Consolidation zones and price/time ranges |
+| **Arrow** | `arrow` | Directional breakout markers |
+| **Measure Tool** | `measure` | Pixel / price distance and percentage change calculator |
+| **Fibonacci Retracement** | `fibonacci` | Golden ratio retracement levels (0.236, 0.382, 0.5, 0.618, 0.786) |
+
+```tsx
+import { DrawingOverlay } from '@tranding-custom-chart/react';
+
+// Mount the drawing overlay inside ChartContainer
+<DrawingOverlay
+  activeTool="trendline"
+  onDrawingComplete={(drawing) => console.log('Created:', drawing)}
+/>
+```
+
+---
+
+## 🎨 Theming & Customization
+
+Switch themes dynamically at runtime without recreating the chart instance:
+
+```tsx
+import { ChartContainer, type DeepPartial, type ChartOptions } from '@tranding-custom-chart/react';
+
+const customTheme: DeepPartial<ChartOptions> = {
+  theme: 'pro-dark',
+  layout: {
+    backgroundColor: '#0f172a',
+    textColor: '#94a3b8',
+    fontSize: 12,
+  },
+  grid: {
+    vertLines: { color: 'rgba(255, 255, 255, 0.05)' },
+    horzLines: { color: 'rgba(255, 255, 255, 0.05)' },
+  },
+  crosshair: {
+    mode: 'both',
+    vertLine: { color: '#38bdf8', width: 1, style: 'dashed' },
+    horzLine: { color: '#38bdf8', width: 1, style: 'dashed' },
+  },
+};
+
+<ChartContainer options={customTheme} ... />
+```
+
+---
+
+## ♿ Accessibility (WCAG 2.2 AA)
+
+Accessible data visualization out of the box:
+
+- **Keyboard Stepping**: Use `ArrowLeft` / `ArrowRight` to step through candle data points; `Home` / `End` to jump to bounds; `PageUp` / `PageDown` for 10-bar strides.
+- **Polite ARIA Speech**: Active coordinates, dates, and prices announced through ARIA live regions for screen-reader users.
+- **Accessible HTML Fallback Table**: `<AccessibleChartTable>` renders a semantic HTML companion table hidden visually but readable by assistive tech.
+
+---
+
+## 📄 License
+
+Licensed under the [MIT License](https://opensource.org/licenses/MIT). Copyright © 2024–2026 The Creator Studio.

package/package.json

@@ -1,9 +1,50 @@
 {
   "name": "@tranding-custom-chart/renderer-canvas",
-  "version": "2.0.0",
-  "description": "High-performance Canvas 2D rendering engine and 20+ chart renderers for Trend Chart",
+  "version": "2.1.0",
+  "description": "High-performance Canvas 2D rendering engine with 20+ chart renderers — candlestick, OHLC, line, area, bar, pie, radar, heatmap, volume profile, supertrend, scatter, bubble, box plot, and more. Dual-layer architecture with high-DPI retina support and coalesced frame scheduling.",
   "type": "module",
   "license": "MIT",
+  "author": "The Creator Studio <thecreatorstudio97@gmail.com>",
+  "homepage": "https://www.npmjs.com/package/@tranding-custom-chart/renderer-canvas",
+  "keywords": [
+    "chart",
+    "charts",
+    "canvas",
+    "canvas-2d",
+    "html5-canvas",
+    "rendering-engine",
+    "renderer",
+    "candlestick",
+    "candlestick-chart",
+    "ohlc",
+    "line-chart",
+    "area-chart",
+    "bar-chart",
+    "pie-chart",
+    "doughnut-chart",
+    "radar-chart",
+    "heatmap",
+    "scatter-plot",
+    "bubble-chart",
+    "box-plot",
+    "volume-profile",
+    "supertrend",
+    "crosshair",
+    "watermark",
+    "high-dpi",
+    "retina",
+    "financial",
+    "trading",
+    "stock",
+    "crypto",
+    "forex",
+    "visualization",
+    "data-visualization",
+    "dataviz",
+    "typescript",
+    "60fps",
+    "performant"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/thecreatorstudio97/trend-chart.git",
@@ -18,7 +59,7 @@
     }
   },
   "dependencies": {
-    "@tranding-custom-chart/core": "^2.0.0"
+    "@tranding-custom-chart/core": "^2.1.0"
   },
   "files": [
     "dist",