@qfo/qfchart 0.6.7 → 0.7.1

package/package.json

@@ -1,81 +1,81 @@
-{
-    "name": "@qfo/qfchart",
-    "version": "0.6.7",
-    "description": "Professional financial charting library built on Apache ECharts with candlestick charts, technical indicators, and interactive drawing tools",
-    "keywords": [
-        "chart",
-        "charting",
-        "candlestick",
-        "financial",
-        "trading",
-        "technical-analysis",
-        "indicators",
-        "echarts",
-        "ohlcv",
-        "stock-chart",
-        "crypto",
-        "forex",
-        "drawing-tools",
-        "fibonacci",
-        "typescript"
-    ],
-    "homepage": "https://github.com/QuantForgeOrg/QFChart#readme",
-    "bugs": {
-        "url": "https://github.com/QuantForgeOrg/QFChart/issues"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/QuantForgeOrg/QFChart.git"
-    },
-    "license": "Apache-2.0",
-    "author": "Alaa-eddine KADDOURI",
-    "type": "module",
-    "main": "./dist/qfchart.min.browser.js",
-    "module": "./dist/qfchart.min.es.js",
-    "types": "./dist/index.d.ts",
-    "exports": {
-        ".": {
-            "types": "./dist/index.d.ts",
-            "import": "./dist/qfchart.min.es.js",
-            "require": "./dist/qfchart.min.browser.js",
-            "default": "./dist/qfchart.min.browser.js"
-        }
-    },
-    "files": [
-        "dist",
-        "src",
-        "README.md",
-        "LICENSE"
-    ],
-    "publishConfig": {
-        "access": "public"
-    },
-    "scripts": {
-        "clean": "node -e \"const fs = require('fs'); if (fs.existsSync('dist')) fs.rmSync('dist', { recursive: true, force: true })\"",
-        "build": "npm run clean && rollup -c",
-        "build:dev": "npm run clean && cross-env BUILD=dev rollup -c",
-        "build:prod": "npm run clean && cross-env BUILD=prod rollup -c",
-        "watch": "rollup -c -w",
-        "prepublishOnly": "npm run build:prod",
-        "test": "echo \"Error: no test specified\" && exit 1"
-    },
-    "devDependencies": {
-        "@rollup/plugin-commonjs": "^25.0.0",
-        "@rollup/plugin-json": "^6.0.0",
-        "@rollup/plugin-node-resolve": "^15.0.0",
-        "@rollup/plugin-replace": "^6.0.3",
-        "cross-env": "^7.0.3",
-        "echarts": "^6.0.0",
-        "esbuild": "^0.19.0",
-        "rollup": "^3.28.0",
-        "rollup-plugin-dts": "^6.3.0",
-        "rollup-plugin-esbuild": "^5.0.0",
-        "rollup-plugin-sourcemaps": "^0.6.3",
-        "rollup-plugin-typescript-paths": "^1.4.0",
-        "tslib": "^2.6.0",
-        "typescript": "^5.1.0"
-    },
-    "peerDependencies": {
-        "echarts": "^5.0.0 || ^6.0.0"
-    }
-}
+{
+    "name": "@qfo/qfchart",
+    "version": "0.7.1",
+    "description": "Professional financial charting library built on Apache ECharts with candlestick charts, technical indicators, and interactive drawing tools",
+    "keywords": [
+        "chart",
+        "charting",
+        "candlestick",
+        "financial",
+        "trading",
+        "technical-analysis",
+        "indicators",
+        "echarts",
+        "ohlcv",
+        "stock-chart",
+        "crypto",
+        "forex",
+        "drawing-tools",
+        "fibonacci",
+        "typescript"
+    ],
+    "homepage": "https://quantforge.org/qfchart/",
+    "bugs": {
+        "url": "https://github.com/QuantForgeOrg/QFChart/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/QuantForgeOrg/QFChart.git"
+    },
+    "license": "Apache-2.0",
+    "author": "Alaa-eddine KADDOURI",
+    "type": "module",
+    "main": "./dist/qfchart.min.browser.js",
+    "module": "./dist/qfchart.min.es.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/qfchart.min.es.js",
+            "require": "./dist/qfchart.min.browser.js",
+            "default": "./dist/qfchart.min.browser.js"
+        }
+    },
+    "files": [
+        "dist",
+        "src",
+        "README.md",
+        "LICENSE"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "clean": "node -e \"const fs = require('fs'); if (fs.existsSync('dist')) fs.rmSync('dist', { recursive: true, force: true })\"",
+        "build": "npm run clean && rollup -c",
+        "build:dev": "npm run clean && cross-env BUILD=dev rollup -c",
+        "build:prod": "npm run clean && cross-env BUILD=prod rollup -c",
+        "watch": "rollup -c -w",
+        "prepublishOnly": "npm run build:prod",
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "devDependencies": {
+        "@rollup/plugin-commonjs": "^25.0.0",
+        "@rollup/plugin-json": "^6.0.0",
+        "@rollup/plugin-node-resolve": "^15.0.0",
+        "@rollup/plugin-replace": "^6.0.3",
+        "cross-env": "^7.0.3",
+        "echarts": "^6.0.0",
+        "esbuild": "^0.19.0",
+        "rollup": "^3.28.0",
+        "rollup-plugin-dts": "^6.3.0",
+        "rollup-plugin-esbuild": "^5.0.0",
+        "rollup-plugin-sourcemaps": "^0.6.3",
+        "rollup-plugin-typescript-paths": "^1.4.0",
+        "tslib": "^2.6.0",
+        "typescript": "^5.1.0"
+    },
+    "peerDependencies": {
+        "echarts": "^5.0.0 || ^6.0.0"
+    }
+}

package/src/QFChart.ts

@@ -9,6 +9,7 @@ import { PluginManager } from './components/PluginManager';
 import { DrawingEditor } from './components/DrawingEditor';
 import { EventBus } from './utils/EventBus';
 import { AxisUtils } from './utils/AxisUtils';
+import { TableOverlayRenderer } from './components/TableOverlayRenderer';
 
 export class QFChart implements ChartContext {
     private chart: echarts.ECharts;
@@ -86,6 +87,8 @@ export class QFChart implements ChartContext {
     private leftSidebar: HTMLElement;
     private rightSidebar: HTMLElement;
     private chartContainer: HTMLElement;
+    private overlayContainer: HTMLElement;
+    private _lastTables: any[] = [];
 
     constructor(container: HTMLElement, options: QFChartOptions = {}) {
         this.rootContainer = container;
@@ -176,6 +179,13 @@ export class QFChart implements ChartContext {
         this.layoutContainer.appendChild(this.rightSidebar);
 
         this.chart = echarts.init(this.chartContainer);
+
+        // Overlay container for table rendering (positioned above ECharts canvas)
+        this.chartContainer.style.position = 'relative';
+        this.overlayContainer = document.createElement('div');
+        this.overlayContainer.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100;overflow:hidden;';
+        this.chartContainer.appendChild(this.overlayContainer);
+
         this.pluginManager = new PluginManager(this, this.toolbarContainer);
         this.drawingEditor = new DrawingEditor(this);
 
@@ -727,6 +737,23 @@ export class QFChart implements ChartContext {
         // Merge the update (don't replace entire config)
         this.chart.setOption(updateOption, { notMerge: false });
 
+        // Re-render table overlays (indicators may have updated table data)
+        const allTables: any[] = [];
+        this.indicators.forEach((indicator) => {
+            Object.values(indicator.plots).forEach((plot: any) => {
+                if (plot.options?.style === 'table') {
+                    plot.data?.forEach((entry: any) => {
+                        const tables = Array.isArray(entry.value) ? entry.value : [entry.value];
+                        tables.forEach((t: any) => {
+                            if (t && !t._deleted) allTables.push(t);
+                        });
+                    });
+                }
+            });
+        });
+        this._lastTables = allTables;
+        this._renderTableOverlays();
+
         // Update countdown if needed
         this.startCountdown();
     }
@@ -926,6 +953,12 @@ export class QFChart implements ChartContext {
 
     public resize(): void {
         this.chart.resize();
+        this._renderTableOverlays();
+    }
+
+    private _renderTableOverlays(): void {
+        const gridRect = (this.chart.getModel() as any).getComponent('grid', 0)?.coordinateSystem?.getRect();
+        TableOverlayRenderer.render(this.overlayContainer, this._lastTables, gridRect);
     }
 
     public destroy(): void {
@@ -1358,6 +1391,7 @@ export class QFChart implements ChartContext {
                     }
                 },
                 data: drawings.map((d) => [d.points[0].timeIndex, d.points[0].value, d.points[1].timeIndex, d.points[1].value]),
+                encode: { x: [0, 2], y: [1, 3] },
                 z: 100,
                 silent: false,
             });
@@ -1385,6 +1419,20 @@ export class QFChart implements ChartContext {
             return `<div style="min-width: 200px;">${html}</div>`;
         };
 
+        // 6. Extract and render table overlays from indicator plots
+        const allTables: any[] = [];
+        this.indicators.forEach((indicator) => {
+            Object.values(indicator.plots).forEach((plot: any) => {
+                if (plot.options?.style === 'table') {
+                    plot.data?.forEach((entry: any) => {
+                        const tables = Array.isArray(entry.value) ? entry.value : [entry.value];
+                        tables.forEach((t: any) => {
+                            if (t && !t._deleted) allTables.push(t);
+                        });
+                    });
+                }
+            });
+        });
         const option: any = {
             backgroundColor: this.options.backgroundColor,
             animation: false,
@@ -1430,5 +1478,9 @@ export class QFChart implements ChartContext {
         };
 
         this.chart.setOption(option, true); // true = not merge, replace.
+
+        // Render table overlays AFTER setOption so we can query the computed grid rect
+        this._lastTables = allTables;
+        this._renderTableOverlays();
     }
 }