Integration & Embedding Guide

import { VNInvestCharts, widgetMessagesVi, widgetMessagesEn } from "vninvestcharts-widget";

// Import stylesheet hỗ trợ giao diện đầy đủ (CSS Modules)
import "vninvestcharts-widget/dist/index.css";

function ChartContainer() {
  return (
    <div style={{ width: "100%", height: "600px", position: "relative" }}>
      <VNInvestCharts
        symbol="VCB"
        timeframe="1D"
        theme="dark"
        locale="vi"
        messages={widgetMessagesVi}
        drawingUiEnabled={true}
      />
    </div>
  );
}

// Tạo phần tử chứa widget
const hostContainer = document.getElementById("chart-widget-host");
const shadowRoot = hostContainer.attachShadow({ mode: "open" });

// 1. Inject thẻ CSS trực tiếp vào bên trong Shadow Root
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = "vninvestcharts-widget/dist/index.css";
shadowRoot.appendChild(link);

// 2. Tạo điểm gắn kết React inside Shadow DOM
const mountPoint = document.createElement("div");
mountPoint.id = "vnsc-shadow-root-mount";
shadowRoot.appendChild(mountPoint);

// 3. Khai báo biến toàn cục để thông báo ranh giới Shadow Root
window.__vnscShadowRoot = shadowRoot;

// 4. Khởi tạo Widget
window.VNInvestCharts.mount(mountPoint, {
  symbol: "VCB",
  timeframe: "1D",
  theme: "dark",
  locale: "vi",
  shadowRoot: shadowRoot // Cung cấp shadowRoot trực tiếp cho event listeners
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>VNInvestCharts Iframe Node</title>
  <link rel="stylesheet" href="injected.css">
  <style>
    html, body, #root { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
  </style>
</head>
<body>
  <div id="root"></div>
  <script src="vnbrokerchart.iframe.js"></script>
</body>
</html>

import { WidgetController } from "vninvestcharts-widget/iframe";

// 1. Tạo controller trỏ tới thẻ iframe
const iframeElement = document.getElementById("my-chart-iframe") as HTMLIFrameElement;
const controller = new WidgetController({
  iframe: iframeElement,
  targetOrigin: "https://chart.domain.com", // Bảo mật: Chỉ định rõ domain nguồn của iframe
  allowAnyOrigin: false // Bắt buộc đặt false trên production để tránh tin tặc giả mạo lệnh
});

// 2. Lắng nghe các sự kiện gửi ra từ biểu đồ
controller.on("symbolChange", (data) => {
  console.log("Người dùng đổi mã trên biểu đồ sang:", data.symbol);
});

controller.on("drawingsChange", (data) => {
  console.log("Danh sách hình vẽ kỹ thuật vừa cập nhật:", data.drawings);
});

// 3. Gửi lệnh điều khiển vào biểu đồ (không cần re-render iframe)
async function updateChartState() {
  // Đổi mã
  await controller.setSymbol("FPT");
  
  // Đổi khung thời gian
  await controller.setTimeframe("15m");
  
  // Áp dụng chỉ báo
  await controller.addIndicator("StrengthRelative", { period: 14 });
}

export const mySecureAdapter: StockDataAdapter = {
  fetchBarsBefore: async (symbol, timeframe, beforeDate, limit) => {
    const bars = await api.getBars({ symbol, timeframe, before: beforeDate.getTime(), limit });
    
    // Dữ liệu trống -> khóa biên lịch sử (tương tự [] hoặc boundary-exhausted)
    // Hệ thống sẽ khóa biên trái và không bao giờ gọi lại trước mốc thời gian đó nữa.
    return bars; 
  },
  
  fetchBarsInRange: async (symbol, timeframe, fromDate, toDate) => {
    const bars = await api.getBars({ symbol, timeframe, from: fromDate.getTime(), to: toDate.getTime() });
    
    // Nạp theo mốc, nếu không có nến mới hơn, hệ thống sẽ khóa biên phải tại nến cuối cùng
    return bars;
  }
};

const authHandler = {
  getPAT: () => localStorage.getItem("vninvest_pat_token") ?? "",
  setPAT: (token: string) => localStorage.setItem("vninvest_pat_token", token)
};

// Sử dụng trong React Render
<VNInvestCharts
  adapter={vninvestDataAdapter}
  authHandler={authHandler}
  // ... các cấu hình khác
/>

<VNInvestCharts
  licenseKey="vninvest-lic-xxxx-yyyy-zzzz"
  // ...
/>