@qfo/qfchart 0.5.0

package/src/components/PluginManager.ts

@@ -0,0 +1,234 @@
+import { ChartContext, Plugin } from "../types";
+// We need to import AbstractPlugin if we check instanceof, or just treat all as Plugin interface
+
+export class PluginManager {
+  private plugins: Map<string, Plugin> = new Map();
+  private activePluginId: string | null = null;
+  private context: ChartContext;
+  private toolbarContainer: HTMLElement;
+  private tooltipElement: HTMLElement | null = null;
+  private hideTimeout: any = null;
+
+  constructor(context: ChartContext, toolbarContainer: HTMLElement) {
+    this.context = context;
+    this.toolbarContainer = toolbarContainer;
+    this.createTooltip();
+    this.renderToolbar();
+  }
+
+  private createTooltip() {
+    this.tooltipElement = document.createElement("div");
+    Object.assign(this.tooltipElement.style, {
+      position: "fixed",
+      display: "none",
+      backgroundColor: "#1e293b",
+      color: "#e2e8f0",
+      padding: "6px 10px",
+      borderRadius: "6px",
+      fontSize: "13px",
+      lineHeight: "1.4",
+      fontWeight: "500",
+      border: "1px solid #334155",
+      zIndex: "9999",
+      pointerEvents: "none",
+      whiteSpace: "nowrap",
+      boxShadow:
+        "0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.15)",
+      fontFamily: this.context.getOptions().fontFamily || "sans-serif",
+      transition: "opacity 0.15s ease-in-out, transform 0.15s ease-in-out",
+      opacity: "0",
+      transform: "translateX(-5px)",
+    });
+    document.body.appendChild(this.tooltipElement);
+  }
+
+  public destroy() {
+    if (this.tooltipElement && this.tooltipElement.parentNode) {
+      this.tooltipElement.parentNode.removeChild(this.tooltipElement);
+    }
+    this.tooltipElement = null;
+  }
+
+  private showTooltip(target: HTMLElement, text: string) {
+    if (!this.tooltipElement) return;
+
+    // Clear any pending hide to prevent race conditions
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+      this.hideTimeout = null;
+    }
+
+    const rect = target.getBoundingClientRect();
+    this.tooltipElement.textContent = text;
+    this.tooltipElement.style.display = "block";
+
+    // Position to the right of the button, centered vertically
+    const tooltipRect = this.tooltipElement.getBoundingClientRect();
+    const top = rect.top + (rect.height - tooltipRect.height) / 2;
+    const left = rect.right + 10; // 10px gap
+
+    this.tooltipElement.style.top = `${top}px`;
+    this.tooltipElement.style.left = `${left}px`;
+
+    // Trigger animation
+    requestAnimationFrame(() => {
+      if (this.tooltipElement) {
+        this.tooltipElement.style.opacity = "1";
+        this.tooltipElement.style.transform = "translateX(0)";
+      }
+    });
+  }
+
+  private hideTooltip() {
+    if (!this.tooltipElement) return;
+    this.tooltipElement.style.opacity = "0";
+    this.tooltipElement.style.transform = "translateX(-5px)";
+
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+    }
+
+    // Wait for transition to finish before hiding
+    this.hideTimeout = setTimeout(() => {
+      if (this.tooltipElement) {
+        this.tooltipElement.style.display = "none";
+      }
+      this.hideTimeout = null;
+    }, 150);
+  }
+
+  public register(plugin: Plugin): void {
+    if (this.plugins.has(plugin.id)) {
+      console.warn(`Plugin with id ${plugin.id} is already registered.`);
+      return;
+    }
+    this.plugins.set(plugin.id, plugin);
+    plugin.init(this.context);
+    this.addButton(plugin);
+  }
+
+  public unregister(pluginId: string): void {
+    const plugin = this.plugins.get(pluginId);
+    if (plugin) {
+      if (this.activePluginId === pluginId) {
+        this.deactivatePlugin();
+      }
+      plugin.destroy?.();
+      this.plugins.delete(pluginId);
+      this.removeButton(pluginId);
+    }
+  }
+
+  public activatePlugin(pluginId: string): void {
+    // If same plugin is clicked, deactivate it (toggle)
+    if (this.activePluginId === pluginId) {
+      this.deactivatePlugin();
+      return;
+    }
+
+    // Deactivate current active plugin
+    if (this.activePluginId) {
+      this.deactivatePlugin();
+    }
+
+    const plugin = this.plugins.get(pluginId);
+    if (plugin) {
+      this.activePluginId = pluginId;
+      this.setButtonActive(pluginId, true);
+      plugin.activate?.();
+    }
+  }
+
+  public deactivatePlugin(): void {
+    if (this.activePluginId) {
+      const plugin = this.plugins.get(this.activePluginId);
+      plugin?.deactivate?.();
+      this.setButtonActive(this.activePluginId, false);
+      this.activePluginId = null;
+    }
+  }
+
+  // --- UI Handling ---
+
+  private renderToolbar(): void {
+    this.toolbarContainer.innerHTML = "";
+    this.toolbarContainer.style.display = "flex";
+    this.toolbarContainer.style.flexDirection = "column";
+    this.toolbarContainer.style.width = "40px";
+    this.toolbarContainer.style.backgroundColor =
+      this.context.getOptions().backgroundColor || "#1e293b";
+    this.toolbarContainer.style.borderRight = "1px solid #334155";
+    this.toolbarContainer.style.padding = "5px";
+    this.toolbarContainer.style.boxSizing = "border-box";
+    this.toolbarContainer.style.gap = "5px";
+    this.toolbarContainer.style.flexShrink = "0";
+  }
+
+  private addButton(plugin: Plugin): void {
+    const btn = document.createElement("button");
+    btn.id = `qfchart-plugin-btn-${plugin.id}`;
+    // Removed native title to use custom tooltip
+    // btn.title = plugin.name || plugin.id;
+    btn.style.width = "30px";
+    btn.style.height = "30px";
+    btn.style.padding = "4px";
+    btn.style.border = "1px solid transparent";
+    btn.style.borderRadius = "4px";
+    btn.style.backgroundColor = "transparent";
+    btn.style.cursor = "pointer";
+    btn.style.color = this.context.getOptions().fontColor || "#cbd5e1";
+    btn.style.display = "flex";
+    btn.style.alignItems = "center";
+    btn.style.justifyContent = "center";
+
+    // Icon
+    if (plugin.icon) {
+      btn.innerHTML = plugin.icon;
+    } else {
+      btn.innerText = (plugin.name || plugin.id).substring(0, 2).toUpperCase();
+    }
+
+    // Hover effects and Tooltip
+    btn.addEventListener("mouseenter", () => {
+      if (this.activePluginId !== plugin.id) {
+        btn.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
+      }
+      this.showTooltip(btn, plugin.name || plugin.id);
+    });
+
+    btn.addEventListener("mouseleave", () => {
+      if (this.activePluginId !== plugin.id) {
+        btn.style.backgroundColor = "transparent";
+      }
+      this.hideTooltip();
+    });
+
+    btn.onclick = () => this.activatePlugin(plugin.id);
+
+    this.toolbarContainer.appendChild(btn);
+  }
+
+  private removeButton(pluginId: string): void {
+    const btn = this.toolbarContainer.querySelector(
+      `#qfchart-plugin-btn-${pluginId}`
+    );
+    if (btn) {
+      btn.remove();
+    }
+  }
+
+  private setButtonActive(pluginId: string, active: boolean): void {
+    const btn = this.toolbarContainer.querySelector(
+      `#qfchart-plugin-btn-${pluginId}`
+    ) as HTMLElement;
+    if (btn) {
+      if (active) {
+        btn.style.backgroundColor = "#2563eb"; // Blue highlight
+        btn.style.color = "#ffffff";
+      } else {
+        btn.style.backgroundColor = "transparent";
+        btn.style.color = this.context.getOptions().fontColor || "#cbd5e1";
+      }
+    }
+  }
+}

package/src/components/SeriesBuilder.ts

@@ -0,0 +1,192 @@
+import { OHLCV, Indicator as IndicatorType, QFChartOptions, IndicatorPlot } from '../types';
+import { PaneConfiguration } from './LayoutManager';
+import { textToBase64Image } from '../Utils';
+
+export class SeriesBuilder {
+    public static buildCandlestickSeries(marketData: OHLCV[], options: QFChartOptions, totalLength?: number): any {
+        const upColor = options.upColor || '#00da3c';
+        const downColor = options.downColor || '#ec0000';
+
+        const data = marketData.map((d) => [d.open, d.close, d.low, d.high]);
+
+        // Pad with nulls if totalLength is provided and greater than current data length
+        if (totalLength && totalLength > data.length) {
+            const padding = totalLength - data.length;
+            for (let i = 0; i < padding; i++) {
+                data.push(null as any);
+            }
+        }
+
+        return {
+            type: 'candlestick',
+            name: options.title || 'Market',
+            data: data,
+            itemStyle: {
+                color: upColor,
+                color0: downColor,
+                borderColor: upColor,
+                borderColor0: downColor,
+            },
+            xAxisIndex: 0,
+            yAxisIndex: 0,
+            z: 5,
+        };
+    }
+
+    public static buildIndicatorSeries(
+        indicators: Map<string, IndicatorType>,
+        timeToIndex: Map<number, number>,
+        paneLayout: PaneConfiguration[],
+        totalDataLength: number,
+        dataIndexOffset: number = 0
+    ): any[] {
+        const series: any[] = [];
+
+        indicators.forEach((indicator, id) => {
+            if (indicator.collapsed) return; // Skip if collapsed
+
+            // Find axis index
+            let xAxisIndex = 0;
+            let yAxisIndex = 0;
+
+            if (indicator.paneIndex > 0) {
+                // paneLayout contains only separate panes.
+                // The index in xAxis/yAxis array is 1 + index_in_paneLayout
+                const confIndex = paneLayout.findIndex((p) => p.index === indicator.paneIndex);
+                if (confIndex !== -1) {
+                    xAxisIndex = confIndex + 1;
+                    yAxisIndex = confIndex + 1;
+                }
+            }
+
+            Object.keys(indicator.plots).forEach((plotName) => {
+                const plot = indicator.plots[plotName];
+                const seriesName = `${id}::${plotName}`;
+
+                const dataArray = new Array(totalDataLength).fill(null);
+                const colorArray = new Array(totalDataLength).fill(null);
+
+                plot.data.forEach((point) => {
+                    const index = timeToIndex.get(point.time);
+                    if (index !== undefined) {
+                        const offsetIndex = index + dataIndexOffset;
+                        dataArray[offsetIndex] = point.value;
+                        colorArray[offsetIndex] = point.options?.color || plot.options.color;
+                    }
+                });
+
+                switch (plot.options.style) {
+                    case 'histogram':
+                    case 'columns':
+                        series.push({
+                            name: seriesName,
+                            type: 'bar',
+                            xAxisIndex: xAxisIndex,
+                            yAxisIndex: yAxisIndex,
+                            data: dataArray.map((val, i) => ({
+                                value: val,
+                                itemStyle: colorArray[i] ? { color: colorArray[i] } : undefined,
+                            })),
+                            itemStyle: { color: plot.options.color },
+                        });
+                        break;
+
+                    case 'circles':
+                    case 'cross':
+                        // Scatter
+                        const scatterData = dataArray
+                            .map((val, i) => {
+                                if (val === null) return null;
+                                const pointColor = colorArray[i] || plot.options.color;
+                                const item: any = {
+                                    value: [i, val],
+                                    itemStyle: { color: pointColor },
+                                };
+
+                                if (plot.options.style === 'cross') {
+                                    item.symbol = `image://${textToBase64Image('+', pointColor, '24px')}`;
+                                    item.symbolSize = 16;
+                                } else {
+                                    item.symbol = 'circle';
+                                    item.symbolSize = 6;
+                                }
+                                return item;
+                            })
+                            .filter((item) => item !== null);
+
+                        series.push({
+                            name: seriesName,
+                            type: 'scatter',
+                            xAxisIndex: xAxisIndex,
+                            yAxisIndex: yAxisIndex,
+                            data: scatterData,
+                        });
+                        break;
+
+                    case 'background':
+                        series.push({
+                            name: seriesName,
+                            type: 'custom',
+                            xAxisIndex: xAxisIndex,
+                            yAxisIndex: yAxisIndex,
+                            z: -10,
+                            renderItem: (params: any, api: any) => {
+                                const xVal = api.value(0);
+                                if (isNaN(xVal)) return;
+
+                                const start = api.coord([xVal, 0]);
+                                const size = api.size([1, 0]);
+                                const width = size[0];
+                                const sys = params.coordSys;
+                                const x = start[0] - width / 2;
+                                const barColor = colorArray[params.dataIndex];
+                                const val = api.value(1);
+
+                                if (!barColor || !val) return;
+
+                                return {
+                                    type: 'rect',
+                                    shape: {
+                                        x: x,
+                                        y: sys.y,
+                                        width: width,
+                                        height: sys.height,
+                                    },
+                                    style: {
+                                        fill: barColor,
+                                        opacity: 0.3,
+                                    },
+                                    silent: true,
+                                };
+                            },
+                            data: dataArray.map((val, i) => [i, val]),
+                        });
+                        break;
+
+                    case 'line':
+                    default:
+                        series.push({
+                            name: seriesName,
+                            type: 'line',
+                            xAxisIndex: xAxisIndex,
+                            yAxisIndex: yAxisIndex,
+                            smooth: true,
+                            showSymbol: false,
+                            data: dataArray.map((val, i) => ({
+                                value: val,
+                                itemStyle: colorArray[i] ? { color: colorArray[i] } : undefined,
+                            })),
+                            itemStyle: { color: plot.options.color },
+                            lineStyle: {
+                                width: plot.options.linewidth || 1,
+                                color: plot.options.color,
+                            },
+                        });
+                        break;
+                }
+            });
+        });
+
+        return series;
+    }
+}

package/src/components/TooltipFormatter.ts

@@ -0,0 +1,97 @@
+import { QFChartOptions } from "../types";
+
+export class TooltipFormatter {
+  public static format(params: any[], options: QFChartOptions): string {
+    if (!params || params.length === 0) return "";
+
+    const marketName = options.title || "Market";
+    const upColor = options.upColor || "#00da3c";
+    const downColor = options.downColor || "#ec0000";
+    const fontFamily = options.fontFamily || "sans-serif";
+
+    // 1. Header: Date/Time (from the first param)
+    const date = params[0].axisValue;
+    let html = `<div style="font-weight: bold; margin-bottom: 5px; color: #cbd5e1; font-family: ${fontFamily};">${date}</div>`;
+
+    // 2. Separate Market Data (Candlestick) from Indicators
+    const marketSeries = params.find(
+      (p: any) => p.seriesType === "candlestick"
+    );
+    const indicatorParams = params.filter(
+      (p: any) => p.seriesType !== "candlestick"
+    );
+
+    // 3. Market Data Section
+    if (marketSeries) {
+      const [_, open, close, low, high] = marketSeries.value;
+      const color = close >= open ? upColor : downColor;
+
+      html += `
+            <div style="margin-bottom: 8px; font-family: ${fontFamily};">
+                <div style="display:flex; justify-content:space-between; color:${color}; font-weight:bold;">
+                    <span>${marketName}</span>
+                </div>
+                <div style="display: grid; grid-template-columns: auto auto; gap: 2px 15px; font-size: 0.9em; color: #cbd5e1;">
+                    <span>Open:</span> <span style="text-align: right; color: ${
+                      close >= open ? upColor : downColor
+                    }">${open}</span>
+                    <span>High:</span> <span style="text-align: right; color: ${upColor}">${high}</span>
+                    <span>Low:</span> <span style="text-align: right; color: ${downColor}">${low}</span>
+                    <span>Close:</span> <span style="text-align: right; color: ${
+                      close >= open ? upColor : downColor
+                    }">${close}</span>
+                </div>
+            </div>
+            `;
+    }
+
+    // 4. Indicators Section
+    if (indicatorParams.length > 0) {
+      html += `<div style="border-top: 1px solid #334155; margin: 5px 0; padding-top: 5px;"></div>`;
+
+      // Group by Indicator ID (extracted from seriesName "ID::PlotName")
+      const indicators: { [key: string]: any[] } = {};
+
+      indicatorParams.forEach((p: any) => {
+        const parts = p.seriesName.split("::");
+        const indId = parts.length > 1 ? parts[0] : "Unknown";
+        const plotName = parts.length > 1 ? parts[1] : p.seriesName;
+
+        if (!indicators[indId]) indicators[indId] = [];
+        indicators[indId].push({ ...p, displayName: plotName });
+      });
+
+      // Render groups
+      Object.keys(indicators).forEach((indId) => {
+        html += `
+            <div style="margin-top: 8px; font-family: ${fontFamily};">
+                <div style="font-weight:bold; color: #fff; margin-bottom: 2px;">${indId}</div>
+            `;
+
+        indicators[indId].forEach((p) => {
+          let val = p.value;
+          if (Array.isArray(val)) {
+            val = val[1]; // Assuming [index, value]
+          }
+
+          if (val === null || val === undefined) return;
+
+          const valStr =
+            typeof val === "number"
+              ? val.toLocaleString(undefined, { maximumFractionDigits: 4 })
+              : val;
+
+          html += `
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; padding-left: 8px;">
+                    <div>${p.marker} <span style="color: #cbd5e1;">${p.displayName}</span></div>
+                    <div style="font-size: 10px; color: #fff;padding-left:10px;">${valStr}</div>
+                </div>`;
+        });
+
+        html += `</div>`;
+      });
+    }
+
+    return html;
+  }
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from "./types";
+export * from "./QFChart";
+export * from "./plugins/MeasureTool";
+export * from "./plugins/LineTool";
+export * from "./plugins/FibonacciTool";
+export * from "./components/AbstractPlugin";