Web Integration

window.NxtChartHost = {
  // ── Session-constant getters — read once at startup ──────────────────
  get symbolInfo() {
    return JSON.stringify({
      id: 'RELIANCE',
      name: 'Reliance Industries',
      lotSize: 1,
      precision: 2,
      tickSize: 0.05,
      exchange: 'NSE',
      expiry: '', // e.g. '2025-03-27' for a derivative; empty for this equity
      strike: '', // e.g. '23000' for an option; empty for this equity
      optType: '', // e.g. 'CE' or 'PE' for an option; empty for this equity
      weekly: '', // e.g. 'Y' marks a weekly expiry; empty for this equity
      undID: '', // e.g. 'NIFTY' for a derivative; empty for this equity
    });
  },
  get underlyingSymbolInfo() {
    return ''; // empty for equities
  },
  get optionSymbols() {
    return '[]';
  },
  get futureSymbols() {
    return '[]';
  },
  get indexSymbols() {
    return '[]';
  },
  get marketTimings() {
    // Keyed by exchange code -- add one entry per exchange any symbol
    // reachable this session might resolve to (e.g. also 'NFO' once
    // options are in play; see the marketTimings reference doc).
    return JSON.stringify({
      NSE: {
        timezone: 'Asia/Kolkata',
        sessions: [
          ['0915-1530'], // Monday
          ['0915-1530'], // Tuesday
          ['0915-1530'], // Wednesday
          ['0915-1530'], // Thursday
          ['0915-1530'], // Friday
          [], // Saturday
          [], // Sunday
        ],
        holidays: [],
        special: {},
      },
    });
  },
  get hasOCO() {
    return true;
  },
  get isMarketOrderSupported() {
    return true;
  },
  get storageKey() {
    return `user_${currentUser.id}`; // stable, user-scoped key
  },

  // Optional theming getters: see /docs/charting/theming

  // ── Request/response methods ──────────────────────────────────────────
  loadData(symbolId, from, to, intervalSeconds, requiredBars) {
    return yourApi
      .fetchOHLCV({ symbolId, from, to, interval: intervalSeconds })
      .then(JSON.stringify);
  },
  fetchOptionDetails(underlyingSymbolId) {
    return yourApi.fetchOptionChain(underlyingSymbolId);
  },
  chartTopOptions() {
    return yourApi.fetchTopOptions();
  },
  atmSymbols() {
    return Promise.resolve(
      JSON.stringify(['NIFTY24DEC24000CE', 'NIFTY24DEC24000PE']),
    );
  },
  searchSymbols(query) {
    return yourApi.searchSymbols(query);
  },
  fetchOIAnalysis(underlyingSymbolId, expiry, timeFrom, timeTo) {
    return yourApi.fetchOIAnalysis(underlyingSymbolId, expiry, timeFrom, timeTo);
  },
  fetchOIChange(underlyingSymbolId, expiries, timeFrom, timeTo) {
    return yourApi.fetchOIChange(underlyingSymbolId, expiries, timeFrom, timeTo);
  },
  fetchOI(underlyingSymbolId, expiries) {
    return yourApi.fetchOI(underlyingSymbolId, expiries);
  },
  fetchPcrIntraday() {
    return yourApi.fetchPcrIntraday();
  },
  fetchAtmStraddleIntraday() {
    return yourApi.fetchAtmStraddleIntraday();
  },
  fetchAtmIvIntraday() {
    return yourApi.fetchAtmIvIntraday();
  },
  fundsData() {
    return yourApi.fetchFunds();
  },

  // ── Parameterized replacements (xxxFor) ─────────────────────────────────
  // Scoped to an explicit id instead of "whatever's currently charted."
  // `underlyingSymbolInfoFor` is required — the SDK calls it on every chart
  // load. The other 7 aren't called yet (see the reference table below),
  // but still need a real body: `implements ChartInterface` on every
  // platform won't compile without one.
  underlyingSymbolInfoFor(symbolId) {
    return yourApi.fetchUnderlyingSymbolInfo(symbolId); // nullable
  },
  optionSymbolsFor(underlyingId) {
    return yourApi.fetchOptionSymbols(underlyingId);
  },
  futureSymbolsFor(underlyingId) {
    return yourApi.fetchFutureSymbols(underlyingId); // nullable
  },
  atmSymbolsFor(underlyingId) {
    return yourApi.fetchAtmSymbols(underlyingId); // nullable
  },
  chartTopOptionsFor(underlyingId) {
    return yourApi.fetchTopOptions(underlyingId);
  },
  fetchPcrIntradayFor(underlyingId) {
    return yourApi.fetchPcrIntraday(underlyingId);
  },
  fetchAtmStraddleIntradayFor(underlyingId) {
    return yourApi.fetchAtmStraddleIntraday(underlyingId);
  },
  fetchAtmIvIntradayFor(underlyingId) {
    return yourApi.fetchAtmIvIntraday(underlyingId);
  },

  // ── Trading actions & lifecycle — fire-and-forget ──────────────────────
  placeOrder(params) {
    yourBroker.placeOrder(JSON.parse(params));
  },
  modifyOrder(params) {
    yourBroker.modifyOrder(JSON.parse(params));
  },
  cancelOrder(orderID) {
    yourBroker.cancelOrder(orderID);
  },
  placeOCOOrder(params) {
    yourBroker.placeOCOOrder(JSON.parse(params));
  },
  modifyOCOOrder(params) {
    yourBroker.modifyOCOOrder(JSON.parse(params));
  },
  cancelOCOOrder(groupId) {
    yourBroker.cancelOCOOrder(groupId);
  },
  groupAdjustOrders(params) {
    yourBroker.groupAdjustOrders(JSON.parse(params));
  },
  createAlert(params) {
    yourBroker.createAlert(JSON.parse(params));
  },
  modifyAlert(params) {
    yourBroker.modifyAlert(JSON.parse(params));
  },
  deleteAlert(alertId) {
    yourBroker.deleteAlert(alertId);
  },
  closeRequested() {
    // Called when the chart wants to be dismissed (e.g. an in-chart close
    // action) — decide what that means for your page (unmount, navigate
    // away, etc.)
    yourApp.closeChart();
  },

  // ── Market data subscription control ────────────────────────────────────
  subscribeMarketData(symbolsJson) {
    yourTickFeed.subscribe(JSON.parse(symbolsJson));
  },
  unsubscribeMarketData() {
    yourTickFeed.unsubscribeAll();
  },
};

<div id="nxtchart-mount" style="width: 100%; height: 100%;"></div>
<script src="/build_web/flutter.js" defer></script>
<script>
  window.addEventListener('load', function () {
    _flutter.loader.loadEntrypoint({
      entrypointUrl: '/build_web/main.dart.js',
      onEntrypointLoaded: async function (engineInitializer) {
        const appRunner = await engineInitializer.initializeEngine({
          hostElement: document.querySelector('#nxtchart-mount'),
          assetBase: '/build_web/',
        });
        await appRunner.runApp();
      },
    });
  });
</script>

import { useEffect, useRef } from 'react';

// The engine can only be booted once per page, so every mount shares this promise.
let chartApp = null;

function bootChartEngine() {
  chartApp ??= new Promise((resolve) => {
    // Bracket notation sidesteps `no-underscore-dangle` -- `_flutter` is
    // Flutter's own bootstrap global (from flutter.js) and can't be renamed.
    window['_flutter'].loader.loadEntrypoint({
      entrypointUrl: '/build_web/main.dart.js',
      onEntrypointLoaded: async (engineInitializer) => {
        const appRunner = await engineInitializer.initializeEngine({
          assetBase: '/build_web/',
          multiViewEnabled: true,
        });
        resolve(await appRunner.runApp());
      },
    });
  });

  return chartApp;
}

function NeoChart() {
  const hostRef = useRef(null);

  useEffect(() => {
    // Your step 3 implementation, built for the current user's session.
    window.NxtChartHost = createNxtChartHost();

    let removeView = null;
    let unmounted = false;

    bootChartEngine().then((app) => {
      if (unmounted || !hostRef.current) return;
      const viewId = app.addView({ hostElement: hostRef.current });
      removeView = () => app.removeView(viewId);
    });

    return () => {
      unmounted = true;
      removeView?.();
    };
  }, []);

  return <div ref={hostRef} style={{ width: '100%', height: '100%' }} />;
}

window.dispatchEvent(new CustomEvent('nxtchart:orders', { detail: JSON.stringify(orders) }));