@dschz/solid-tradingview-widgets/dist/index.js

SolidJS bindings for TradingView Widgets — ready-to-use financial tools you can embed into your website to display market data.

import { template, use } from 'solid-js/web';
import { loadScript } from '@dschz/load-script';
import { tryCatch } from '@dschz/try-catch';
import { mergeProps, createEffect, onCleanup } from 'solid-js';

// src/calendars/EconomicCalendar.tsx
var _tmpl$ = /* @__PURE__ */ template(`<div class=tradingview-widget-container>`);
var CountryMap = {
  // North America
  "United States": "us",
  Canada: "ca",
  // Europe
  Austria: "at",
  Belgium: "be",
  Cyprus: "cy",
  "Czech Republic": "cz",
  Denmark: "dk",
  Estonia: "ee",
  "European Union": "eu",
  // Not standard ISO, but accepted by TradingView
  Finland: "fi",
  France: "fr",
  Germany: "de",
  Greece: "gr",
  Hungary: "hu",
  Iceland: "is",
  Ireland: "ie",
  Italy: "it",
  Latvia: "lv",
  Lithuania: "lt",
  Luxembourg: "lu",
  Netherlands: "nl",
  Norway: "no",
  Poland: "pl",
  Portugal: "pt",
  Romania: "ro",
  Russia: "ru",
  Serbia: "rs",
  Slovakia: "sk",
  Spain: "es",
  Sweden: "se",
  Switzerland: "ch",
  Ukraine: "ua",
  "United Kingdom": "gb",
  // Middle East / Africa
  Angola: "ao",
  Bahrain: "bh",
  Botswana: "bw",
  Egypt: "eg",
  Ethiopia: "et",
  Ghana: "gh",
  Israel: "il",
  Kenya: "ke",
  Kuwait: "kw",
  Malawi: "mw",
  Mauritius: "mu",
  Morocco: "ma",
  Mozambique: "mz",
  Namibia: "na",
  Nigeria: "ng",
  Oman: "om",
  Qatar: "qa",
  Rwanda: "rw",
  "Saudi Arabia": "sa",
  Seychelles: "sc",
  "South Africa": "za",
  Tanzania: "tz",
  Tunisia: "tn",
  Turkey: "tr",
  Uganda: "ug",
  "United Arab Emirates": "ae",
  Zambia: "zm",
  Zimbabwe: "zw",
  // Mexico and South America
  Argentina: "ar",
  Brazil: "br",
  Chile: "cl",
  Colombia: "co",
  Mexico: "mx",
  Peru: "pe",
  Venezuela: "ve",
  // Asia / Pacific
  Australia: "au",
  Bangladesh: "bd",
  China: "cn",
  "Hong Kong": "hk",
  India: "in",
  Indonesia: "id",
  Japan: "jp",
  "South Korea": "kr",
  "Sri Lanka": "lk",
  Malaysia: "my",
  "New Zealand": "nz",
  Pakistan: "pk",
  Philippines: "ph",
  Singapore: "sg",
  Taiwan: "tw",
  Thailand: "th",
  Vietnam: "vn"
};
var EconomicCalendar = (props) => {
  let container;
  const _props = mergeProps({
    width: "full",
    height: "full",
    locale: "en",
    colorTheme: "light",
    countries: [],
    autosize: true,
    showHighImportanceOnly: false,
    isTransparent: false
  }, props);
  const countries = () => new Array(...new Set(_props.countries));
  createEffect(() => {
    const widgetRoot = document.createElement("div");
    widgetRoot.classList.add("tradingview-widget-container__widget");
    container.appendChild(widgetRoot);
    const fullWidth = _props.autosize || _props.width === "full";
    container.style.width = fullWidth ? "100%" : `${_props.width}px`;
    widgetRoot.style.width = fullWidth ? "100%" : `${_props.width}px`;
    const fullHeight = _props.autosize || _props.height === "full";
    container.style.height = fullHeight ? "100%" : `${_props.height}px`;
    widgetRoot.style.height = fullHeight ? "100%" : `${_props.height}px`;
    const downloadScript = async () => {
      const [error] = await tryCatch(loadScript("https://s3.tradingview.com/external-embedding/embed-widget-events.js", {
        textContent: JSON.stringify({
          autosize: _props.autosize,
          width: fullWidth ? "100%" : _props.width,
          height: fullHeight ? "100%" : _props.height,
          locale: _props.locale,
          colorTheme: _props.colorTheme,
          importanceFilter: _props.showHighImportanceOnly ? "0,1" : "-1,0,1",
          isTransparent: _props.isTransparent,
          countryFilter: countries().map((country) => CountryMap[country]).join(",")
        })
      }, widgetRoot));
      if (error) _props.onError?.(error);
    };
    void downloadScript();
    onCleanup(() => {
      widgetRoot.remove();
    });
  });
  return (() => {
    var _el$ = _tmpl$();
    var _ref$ = container;
    typeof _ref$ === "function" ? use(_ref$, _el$) : container = _el$;
    return _el$;
  })();
};
var _tmpl$2 = /* @__PURE__ */ template(`<div class=tradingview-widget-container>`);
var IndicatorMap = {
  volume24h: "STD;24h%Volume",
  accumulationDistribution: "STD;Accumulation_Distribution",
  advanceDeclineLine: "STD;Advance%1Decline%1Line",
  advanceDeclineRatio: "STD;Advance%1Decline%1Ratio",
  advanceDeclineRatioBars: "STD;Advance_Decline_Ratio_Bars",
  arnaudLegouxMovingAverage: "STD;Arnaud%1Legoux%1Moving%1Average",
  aroon: "STD;Aroon",
  averageDayRange: "STD;Average%Day%Range",
  averageDirectionalIndex: "STD;Average%1Directional%1Index",
  averageTrueRange: "STD;Average_True_Range",
  awesomeOscillator: "STD;Awesome_Oscillator",
  balanceOfPower: "STD;Balance%1of%1Power",
  bbTrend: "STD;BBTrend",
  bollingerBands: "STD;Bollinger_Bands",
  bollingerBandsPercentB: "STD;Bollinger_Bands_B",
  bollingerBandwidth: "STD;Bollinger_Bands_Width",
  bollingerBars: "STD;Bollinger%1Bars",
  bullBearPower: "STD;Bull%Bear%Power",
  chaikinMoneyFlow: "STD;Chaikin_Money_Flow",
  chaikinOscillator: "STD;Chaikin_Oscillator",
  chandeKrollStop: "STD;Chande%1Kroll%1Stop",
  chandeMomentumOscillator: "STD;Chande_Momentum_Oscillator",
  chopZone: "STD;Chop%1Zone",
  choppinessIndex: "STD;Choppiness_Index",
  commodityChannelIndex: "STD;CCI",
  connorsRsi: "STD;Connors_RSI",
  coppockCurve: "STD;Coppock%1Curve",
  correlationCoefficientBasic: "CorrelationCoefficient@tv-basicstudies",
  correlationCoefficient: "STD;Correlation_Coeff",
  cumulativeVolumeDelta: "STD;Cumulative%1Volume%1Delta",
  cumulativeVolumeIndex: "STD;Cumulative%1Volume%1Index",
  detrendedPriceOscillator: "STD;DPO",
  directionalMovementIndex: "STD;DMI",
  donchianChannels: "STD;Donchian_Channels",
  doubleEma: "STD;DEMA",
  easeOfMovement: "STD;EOM",
  elderForceIndex: "STD;EFI",
  envelope: "STD;ENV",
  fisherTransform: "STD;Fisher_Transform",
  gaps: "STD;Gaps",
  historicalVolatility: "STD;Historical_Volatility",
  hullMovingAverage: "STD;Hull%1MA",
  ichimokuCloud: "STD;Ichimoku%1Cloud",
  keltnerChannels: "STD;Keltner_Channels",
  klingerOscillator: "STD;Klinger%1Oscillator",
  knowSureThing: "STD;Know_Sure_Thing",
  leastSquaresMovingAverage: "STD;Least%1Squares%1Moving%1Average",
  linearRegressionChannel: "STD;Linear_Regression",
  maCross: "STD;MA%1Cross",
  massIndex: "STD;Mass%1Index",
  mcginleyDynamic: "STD;McGinley%1Dynamic",
  median: "STD;Median",
  momentum: "STD;Momentum",
  moneyFlowIndex: "STD;Money_Flow",
  moonPhases: "MoonPhases@tv-basicstudies",
  // not the same as STD
  movingAverageConvergenceDivergence: "STD;MACD",
  movingAverageExponential: "STD;EMA",
  movingAverageRibbon: "STD;MA%Ribbon",
  movingAverageSimple: "STD;SMA",
  movingAverageWeighted: "STD;WMA",
  multiTimePeriodCharts: "STD;Multi-Time%Period%Charts",
  netVolume: "STD;Net%1Volume",
  onBalanceVolume: "STD;On_Balance_Volume",
  openInterest: "STD;Open%Interest",
  parabolicSar: "STD;PSAR",
  performance: "STD;Performance",
  pivotPointsHighLow: "STD;Pivot%1Points%1High%1Low",
  pivotPointsStandard: "STD;Pivot%1Points%1Standard",
  priceOscillator: "STD;Price_Oscillator",
  priceTarget: "STD;Price%1Target",
  priceVolumeTrendBasic: "PriceVolumeTrend@tv-basicstudies",
  priceVolumeTrend: "STD;Price_Volume_Trend",
  rankCorrelationIndex: "STD;Rank_Correlation_Index",
  rateOfChange: "STD;ROC",
  rciRibbon: "STD;RCI_Ribbon",
  relativeStrengthIndex: "STD;RSI",
  relativeVigorIndex: "STD;Relative_Vigor_Index",
  relativeVolatilityIndex: "STD;Relative_Volatility_Index",
  relativeVolumeAtTime: "STD;Relative%1Volume%1at%1Time",
  robBookerIntradayPivotPoints: "BookerIntradayPivots@tv-basicstudies",
  robBookerKnoxvilleDivergence: "BookerKnoxvilleDivergence@tv-basicstudies",
  robBookerMissedPivotPoints: "BookerMissedPivots@tv-basicstudies",
  robBookerReversal: "BookerReversal@tv-basicstudies",
  robBookerZivGhostPivots: "STD;Rob%1Booker%1Ghost%1Pivots%1v2",
  rsiDivergenceIndicator: "STD;Divergence%1Indicator",
  seasonality: "STD;Seasonality",
  smiErgodicIndicator: "STD;SMI_Ergodic_Indicator_Oscillator",
  smiErgodicOscillator: "STD;SMI_Ergodic_Oscillator",
  smoothedMovingAverage: "STD;Smoothed%1Moving%1Average",
  stochastic: "STD;Stochastic",
  stochasticMomentumIndex: "STD;SMI",
  stochasticRsi: "STD;Stochastic_RSI",
  supertrend: "STD;Supertrend",
  technicalRatings: "STD;Technical%1Ratings",
  timeWeightedAveragePrice: "STD;Time%1Weighted%1Average%1Price",
  tradingSessions: "STD;Trading%1Sessions",
  trendStrengthIndex: "STD;Trend%1Strength%1Index",
  tripleEma: "STD;TEMA",
  trix: "STD;TRIX",
  trueStrengthIndex: "STD;True%1Strength%1Indicator",
  ultimateOscillator: "STD;Ultimate_Oscillator",
  upDownVolume: "STD;UP_DOWN_Volume",
  visibleAveragePrice: "STD;Visible%1Average%1Price",
  volatilityStop: "STD;Volatility_Stop",
  volume: "Volume@tv-basicstudies",
  volumeDelta: "STD;Volume%1Delta",
  volumeOscillator: "STD;Volume%1Oscillator",
  volumeWeightedAveragePrice: "STD;VWAP",
  volumeWeightedMovingAverage: "STD;VWMA",
  vortexIndicator: "STD;Vortex%1Indicator",
  williamsAlligator: "STD;Williams_Alligator",
  williamsFractals: "STD;Whilliams_Fractals",
  williamsPercentRange: "STD;Willams_R",
  woodiesCci: "STD;Woodies%1CCI",
  zigZag: "STD;Zig_Zag"
};
var AdvancedChart = (props) => {
  let container;
  const _props = mergeProps({
    width: 400,
    height: 300,
    locale: "en",
    colorTheme: "light",
    interval: "1",
    timezone: "Etc/UTC",
    chartStyle: "candles",
    indicators: [],
    watchlist: [],
    compareSymbols: [],
    autosize: true,
    allowSymbolChange: true,
    showBottomToolbar: false,
    showDetails: false,
    showDrawingToolsBar: true,
    showHotlist: false,
    showSaveImageButton: false,
    showSymbolDescription: true,
    showTopToolbar: true,
    showVolume: true
  }, props);
  createEffect(() => {
    const widgetRoot = document.createElement("div");
    widgetRoot.classList.add("tradingview-widget-container__widget");
    container.appendChild(widgetRoot);
    container.style.width = _props.autosize ? "100%" : `${_props.width}px`;
    container.style.height = _props.autosize ? "100%" : `${_props.height}px`;
    widgetRoot.style.width = _props.autosize ? "100%" : `${_props.width}px`;
    widgetRoot.style.height = _props.autosize ? "100%" : `${_props.height}px`;
    const downloadScript = async () => {
      const [error] = await tryCatch(loadScript("https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js", {
        textContent: JSON.stringify({
          symbol: _props.symbol,
          width: _props.autosize ? "100%" : _props.width,
          height: _props.autosize ? "100%" : _props.height,
          interval: _props.interval,
          locale: _props.locale,
          theme: _props.colorTheme,
          timezone: _props.timezone,
          style: _props.chartStyle,
          backgroundColor: _props.backgroundColor,
          gridColor: _props.gridColor,
          studies: _props.indicators.map((indicator) => IndicatorMap[indicator]),
          watchlist: _props.watchlist,
          compare_symbols: _props.compareSymbols,
          allow_symbol_change: _props.allowSymbolChange,
          withdateranges: _props.showBottomToolbar,
          details: _props.showDetails,
          hide_side_toolbar: !_props.showDrawingToolsBar,
          hotlist: _props.showHotlist,
          save_image: _props.showSaveImageButton,
          hide_legend: !_props.showSymbolDescription,
          hide_top_toolbar: !_props.showTopToolbar,
          hide_volume: !_props.showVolume,
          support_host: "https://www.tradingview.com"
        })
      }, widgetRoot));
      if (error) _props.onError?.(error);
    };
    void downloadScript();
    onCleanup(() => {
      widgetRoot.remove();
    });
  });
  return (() => {
    var _el$ = _tmpl$2();
    var _ref$ = container;
    typeof _ref$ === "function" ? use(_ref$, _el$) : container = _el$;
    return _el$;
  })();
};
var _tmpl$3 = /* @__PURE__ */ template(`<div class=tradingview-widget-container>`);
var MiniChart = (props) => {
  let container;
  const _props = mergeProps({
    width: "full",
    height: "full",
    locale: "en",
    colorTheme: "light",
    dateRange: "1M",
    autosize: true,
    isTransparent: false,
    chartOnly: false,
    noTimeScale: false
  }, props);
  createEffect(() => {
    const widgetRoot = document.createElement("div");
    widgetRoot.classList.add("tradingview-widget-container__widget");
    container.appendChild(widgetRoot);
    const fullWidth = _props.autosize || _props.width === "full";
    container.style.width = fullWidth ? "100%" : `${_props.width}px`;
    widgetRoot.style.width = fullWidth ? "100%" : `${_props.width}px`;
    const fullHeight = _props.autosize || _props.height === "full";
    container.style.height = fullHeight ? "100%" : `${_props.height}px`;
    widgetRoot.style.height = fullHeight ? "100%" : `${_props.height}px`;
    const downloadScript = async () => {
      const [error] = await tryCatch(loadScript("https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js", {
        textContent: JSON.stringify({
          symbol: _props.symbol,
          autosize: _props.autosize,
          width: fullWidth ? "100%" : _props.width,
          height: fullHeight ? "100%" : _props.height,
          locale: _props.locale,
          colorTheme: _props.colorTheme,
          dateRange: _props.dateRange,
          trendLineColor: _props.trendLineColor,
          underLineColor: _props.underLineColor,
          underLineBottomColor: _props.underLineBottomColor,
          isTransparent: _props.isTransparent,
          chartOnly: _props.chartOnly,
          noTimeScale: _props.noTimeScale
        })
      }, widgetRoot));
      if (error) _props.onError?.(error);
    };
    void downloadScript();
    onCleanup(() => {
      widgetRoot.remove();
    });
  });
  return (() => {
    var _el$ = _tmpl$3();
    var _ref$ = container;
    typeof _ref$ === "function" ? use(_ref$, _el$) : container = _el$;
    return _el$;
  })();
};
var _tmpl$4 = /* @__PURE__ */ template(`<div class=tradingview-widget-container>`);
var ScaleModeMap = {
  normal: "Normal",
  percentage: "Percentage",
  logarithmic: "Logarithmic"
};
var ChartTypeMap = {
  area: "area",
  line: "line",
  bar: "bars",
  candlestick: "candlesticks"
};
var ValueTrackingModeMap = {
  floating_tooltip: "1",
  colored_tooltip: "2",
  legend: "3",
  scale_labels: "0"
};
var LineTypeMap = {
  simple: 0,
  curved: 2,
  stepLine: 1
};
var TimeFormatMap = {
  "12h": "12-hours",
  "24h": "24-hours"
};
var SymbolOverview = (props) => {
  let container;
  const _props = mergeProps({
    width: "full",
    height: "full",
    locale: "en",
    scaleMode: "normal",
    scalePosition: "right",
    colorTheme: "light",
    chartType: "line",
    valueTrackingMode: "floating_tooltip",
    lineType: "simple",
    headerFontSize: "small",
    changeMode: "price-and-percent",
    timeFormat: "12h",
    lineWidth: 2,
    showHeader: true,
    showSymbolLogo: true,
    showMarketStatus: true,
    showDateRanges: true,
    fontSize: 10,
    autosize: true,
    showTimeScale: true,
    isTransparent: false,
    chartOnly: false,
    showVolume: false,
    showMA: false,
    maLineColor: "blue",
    maLineWidth: 1,
    maLength: 9
  }, props);
  createEffect(() => {
    const widgetRoot = document.createElement("div");
    widgetRoot.classList.add("tradingview-widget-container__widget");
    container.appendChild(widgetRoot);
    const fullWidth = _props.autosize || _props.width === "full";
    container.style.width = fullWidth ? "100%" : `${_props.width}px`;
    widgetRoot.style.width = fullWidth ? "100%" : `${_props.width}px`;
    const fullHeight = _props.autosize || _props.height === "full";
    container.style.height = fullHeight ? "100%" : `${_props.height}px`;
    widgetRoot.style.height = fullHeight ? "100%" : `${_props.height}px`;
    const downloadScript = async () => {
      const [error] = await tryCatch(loadScript("https://s3.tradingview.com/external-embedding/embed-widget-symbol-overview.js", {
        textContent: JSON.stringify({
          autosize: _props.autosize,
          width: fullWidth ? "100%" : _props.width,
          height: fullHeight ? "100%" : _props.height,
          locale: _props.locale,
          noTimeScale: !_props.showTimeScale,
          colorTheme: _props.colorTheme,
          scalePosition: _props.scalePosition,
          scaleMode: ScaleModeMap[_props.scaleMode],
          lineWidth: _props.lineWidth,
          lineType: LineTypeMap[_props.lineType],
          chartType: ChartTypeMap[_props.chartType],
          valuesTracking: ValueTrackingModeMap[_props.valueTrackingMode],
          timeHoursFormat: TimeFormatMap[_props.timeFormat],
          headerFontSize: _props.headerFontSize,
          hideDateRanges: !_props.showDateRanges,
          hideMarketStatus: !_props.showMarketStatus,
          hideSymbolLogo: !_props.showSymbolLogo,
          fontSize: _props.fontSize,
          fontColor: _props.fontColor,
          showVolume: _props.showVolume,
          volumeUpColor: _props.volumeUpColor,
          volumeDownColor: _props.volumeDownColor,
          showMA: _props.showMA,
          maLineColor: _props.maLineColor,
          maLineWidth: _props.maLineWidth,
          maLength: _props.maLength,
          symbols: _props.symbols.map((symbol) => {
            const parts = symbol.split(":");
            const displayName = parts.length > 1 ? parts[1] : symbol;
            return [displayName, `${symbol}|1D`];
          }),
          chartOnly: !_props.showHeader,
          trendLineColor: _props.trendLineColor,
          underLineColor: _props.underLineColor,
          underLineBottomColor: _props.underLineBottomColor,
          isTransparent: _props.isTransparent,
          color: _props.color,
          lineColor: _props.lineColor,
          topColor: _props.topColor,
          bottomColor: _props.bottomColor,
          upColor: _props.upColor,
          downColor: _props.downColor,
          borderUpColor: _props.borderUpColor,
          borderDownColor: _props.borderDownColor,
          wickUpColor: _props.wickUpColor,
          wickDownColor: _props.wickDownColor,
          gridLineColor: _props.gridLineColor,
          widgetFontColor: _props.widgetFontColor,
          backgroundColor: _props.backgroundColor,
          changeMode: _props.changeMode,
          // TODO: Make this configurable
          dateRanges: ["1d|1", "1m|30", "3m|60", "12m|1D", "60m|1W", "all|1M"]
        })
      }, widgetRoot));
      if (error) _props.onError?.(error);
    };
    void downloadScript();
    onCleanup(() => {
      widgetRoot.remove();
    });
  });
  return (() => {
    var _el$ = _tmpl$4();
    var _ref$ = container;
    typeof _ref$ === "function" ? use(_ref$, _el$) : container = _el$;
    return _el$;
  })();
};
var _tmpl$5 = /* @__PURE__ */ template(`<div class=tradingview-widget-container>`);
var TopStories = (props) => {
  let container;
  const _props = mergeProps({
    width: "full",
    height: "full",
    locale: "en",
    colorTheme: "light",
    feedMode: "all_symbols",
    displayMode: "adaptive",
    autosize: true,
    isTransparent: false
  }, props);
  createEffect(() => {
    const widgetRoot = document.createElement("div");
    widgetRoot.classList.add("tradingview-widget-container__widget");
    container.appendChild(widgetRoot);
    const fullWidth = _props.autosize || _props.width === "full";
    container.style.width = fullWidth ? "100%" : `${_props.width}px`;
    widgetRoot.style.width = fullWidth ? "100%" : `${_props.width}px`;
    const fullHeight = _props.autosize || _props.height === "full";
    container.style.height = fullHeight ? "100%" : `${_props.height}px`;
    widgetRoot.style.height = fullHeight ? "100%" : `${_props.height}px`;
    const widgetConfig = {
      width: fullWidth ? "100%" : _props.width,
      height: fullHeight ? "100%" : _props.height,
      locale: _props.locale,
      colorTheme: _props.colorTheme,
      feedMode: _props.feedMode,
      displayMode: _props.displayMode,
      isTransparent: _props.isTransparent
    };
    if (_props.feedMode === "symbol") {
      widgetConfig.symbol = _props.symbol;
    }
    const downloadScript = async () => {
      const [error] = await tryCatch(loadScript("https://s3.tradingview.com/external-embedding/embed-widget-timeline.js", {
        textContent: JSON.stringify(widgetConfig)
      }, widgetRoot));
      if (error) _props.onError?.(error);
    };
    void downloadScript();
    onCleanup(() => {
      widgetRoot.remove();
    });
  });
  return (() => {
    var _el$ = _tmpl$5();
    var _ref$ = container;
    typeof _ref$ === "function" ? use(_ref$, _el$) : container = _el$;
    return _el$;
  })();
};
var _tmpl$6 = /* @__PURE__ */ template(`<div class=tradingview-widget-container>`);
var CryptoMarket = (props) => {
  let container;
  const _props = mergeProps({
    width: "full",
    height: "full",
    locale: "en",
    colorTheme: "light",
    displayCurrency: "USD",
    autosize: true,
    isTransparent: false
  }, props);
  createEffect(() => {
    const widgetRoot = document.createElement("div");
    widgetRoot.classList.add("tradingview-widget-container__widget");
    container.appendChild(widgetRoot);
    const fullWidth = _props.autosize || _props.width === "full";
    container.style.width = fullWidth ? "100%" : `${_props.width}px`;
    widgetRoot.style.width = fullWidth ? "100%" : `${_props.width}px`;
    const fullHeight = _props.autosize || _props.height === "full";
    container.style.height = fullHeight ? "100%" : `${_props.height}px`;
    widgetRoot.style.height = fullHeight ? "100%" : `${_props.height}px`;
    const downloadScript = async () => {
      const [error] = await tryCatch(loadScript("https://s3.tradingview.com/external-embedding/embed-widget-screener.js", {
        textContent: JSON.stringify({
          screener_type: "crypto_mkt",
          width: fullWidth ? "100%" : _props.width,
          height: fullHeight ? "100%" : _props.height,
          locale: _props.locale,
          colorTheme: _props.colorTheme,
          displayCurrency: _props.displayCurrency,
          isTransparent: _props.isTransparent
        })
      }, widgetRoot));
      if (error) _props.onError?.(error);
    };
    void downloadScript();
    onCleanup(() => {
      widgetRoot.remove();
    });
  });
  return (() => {
    var _el$ = _tmpl$6();
    var _ref$ = container;
    typeof _ref$ === "function" ? use(_ref$, _el$) : container = _el$;
    return _el$;
  })();
};
var _tmpl$7 = /* @__PURE__ */ template(`<div class=tradingview-widget-container>`);
var Screener = (props) => {
  let container;
  const _props = mergeProps({
    width: "full",
    height: "full",
    locale: "en",
    colorTheme: "light",
    exchange: "america",
    defaultColumnView: "overview",
    defaultScreenView: "most_capitalized",
    autosize: true,
    isTransparent: false,
    showTopToolbar: true
  }, props);
  createEffect(() => {
    const widgetRoot = document.createElement("div");
    widgetRoot.classList.add("tradingview-widget-container__widget");
    container.appendChild(widgetRoot);
    const fullWidth = _props.autosize || _props.width === "full";
    container.style.width = fullWidth ? "100%" : `${_props.width}px`;
    widgetRoot.style.width = fullWidth ? "100%" : `${_props.width}px`;
    const fullHeight = _props.autosize || _props.height === "full";
    container.style.height = fullHeight ? "100%" : `${_props.height}px`;
    widgetRoot.style.height = fullHeight ? "100%" : `${_props.height}px`;
    const downloadScript = async () => {
      const [error] = await tryCatch(loadScript("https://s3.tradingview.com/external-embedding/embed-widget-screener.js", {
        textContent: JSON.stringify({
          width: fullWidth ? "100%" : _props.width,
          height: fullHeight ? "100%" : _props.height,
          locale: _props.locale,
          colorTheme: _props.colorTheme,
          isTransparent: _props.isTransparent,
          showTopToolbar: _props.showTopToolbar,
          market: _props.exchange,
          defaultColumn: _props.defaultColumnView,
          defaultScreen: _props.defaultScreenView
        })
      }, widgetRoot));
      if (error) _props.onError?.(error);
    };
    void downloadScript();
    onCleanup(() => {
      widgetRoot.remove();
    });
  });
  return (() => {
    var _el$ = _tmpl$7();
    var _ref$ = container;
    typeof _ref$ === "function" ? use(_ref$, _el$) : container = _el$;
    return _el$;
  })();
};
var _tmpl$8 = /* @__PURE__ */ template(`<div class=tradingview-widget-container>`);
var CompanyProfile = (props) => {
  let container;
  const _props = mergeProps({
    width: "full",
    height: "full",
    locale: "en",
    colorTheme: "light",
    autosize: true,
    isTransparent: false
  }, props);
  createEffect(() => {
    const widgetRoot = document.createElement("div");
    widgetRoot.classList.add("tradingview-widget-container__widget");
    container.appendChild(widgetRoot);
    const fullWidth = _props.autosize || _props.width === "full";
    container.style.width = fullWidth ? "100%" : `${_props.width}px`;
    widgetRoot.style.width = fullWidth ? "100%" : `${_props.width}px`;
    const fullHeight = _props.autosize || _props.height === "full";
    container.style.height = fullHeight ? "100%" : `${_props.height}px`;
    widgetRoot.style.height = fullHeight ? "100%" : `${_props.height}px`;
    const downloadScript = async () => {
      const [error] = await tryCatch(loadScript("https://s3.tradingview.com/external-embedding/embed-widget-symbol-profile.js", {
        textContent: JSON.stringify({
          symbol: _props.symbol,
          width: fullWidth ? "100%" : _props.width,
          height: fullHeight ? "100%" : _props.height,
          locale: _props.locale,
          colorTheme: _props.colorTheme,
          isTransparent: _props.isTransparent
        })
      }, widgetRoot));
      if (error) _props.onError?.(error);
    };
    void downloadScript();
    onCleanup(() => {
      widgetRoot.remove();
    });
  });
  return (() => {
    var _el$ = _tmpl$8();
    var _ref$ = container;
    typeof _ref$ === "function" ? use(_ref$, _el$) : container = _el$;
    return _el$;
  })();
};
var _tmpl$9 = /* @__PURE__ */ template(`<div class=tradingview-widget-container>`);
var FundamentalData = (props) => {
  let container;
  const _props = mergeProps({
    width: "full",
    height: "full",
    locale: "en",
    colorTheme: "light",
    displayMode: "regular",
    autosize: true,
    isTransparent: false
  }, props);
  createEffect(() => {
    const widgetRoot = document.createElement("div");
    widgetRoot.classList.add("tradingview-widget-container__widget");
    container.appendChild(widgetRoot);
    const fullWidth = _props.autosize || _props.width === "full";
    container.style.width = fullWidth ? "100%" : `${_props.width}px`;
    widgetRoot.style.width = fullWidth ? "100%" : `${_props.width}px`;
    const fullHeight = _props.autosize || _props.height === "full";
    container.style.height = fullHeight ? "100%" : `${_props.height}px`;
    widgetRoot.style.height = fullHeight ? "100%" : `${_props.height}px`;
    const downloadScript = async () => {
      const [error] = await tryCatch(loadScript("https://s3.tradingview.com/external-embedding/embed-widget-financials.js", {
        textContent: JSON.stringify({
          symbol: _props.symbol,
          width: fullWidth ? "100%" : _props.width,
          height: fullHeight ? "100%" : _props.height,
          locale: _props.locale,
          colorTheme: _props.colorTheme,
          displayMode: _props.displayMode,
          isTransparent: _props.isTransparent
        })
      }, widgetRoot));
      if (error) _props.onError?.(error);
    };
    void downloadScript();
    onCleanup(() => {
      widgetRoot.remove();
    });
  });
  return (() => {
    var _el$ = _tmpl$9();
    var _ref$ = container;
    typeof _ref$ === "function" ? use(_ref$, _el$) : container = _el$;
    return _el$;
  })();
};
var _tmpl$10 = /* @__PURE__ */ template(`<div class=tradingview-widget-container>`);
var SymbolInfo = (props) => {
  let container;
  const _props = mergeProps({
    width: "full",
    locale: "en",
    colorTheme: "light",
    isTransparent: false
  }, props);
  createEffect(() => {
    const widgetRoot = document.createElement("div");
    widgetRoot.classList.add("tradingview-widget-container__widget");
    container.appendChild(widgetRoot);
    container.style.width = _props.width === "full" ? "100%" : `${_props.width}px`;
    widgetRoot.style.width = _props.width === "full" ? "100%" : `${_props.width}px`;
    const downloadScript = async () => {
      const [error] = await tryCatch(loadScript("https://s3.tradingview.com/external-embedding/embed-widget-symbol-info.js", {
        textContent: JSON.stringify({
          symbol: _props.symbol,
          width: _props.width === "full" ? "100%" : _props.width,
          locale: _props.locale,
          colorTheme: _props.colorTheme,
          isTransparent: _props.isTransparent
        })
      }, widgetRoot));
      if (error) _props.onError?.(error);
    };
    void downloadScript();
    onCleanup(() => {
      widgetRoot.remove();
    });
  });
  return (() => {
    var _el$ = _tmpl$10();
    var _ref$ = container;
    typeof _ref$ === "function" ? use(_ref$, _el$) : container = _el$;
    return _el$;
  })();
};
var _tmpl$11 = /* @__PURE__ */ template(`<div class=tradingview-widget-container>`);
var TechnicalAnalysis = (props) => {
  let container;
  const _props = mergeProps({
    width: "full",
    height: "full",
    displayMode: "single",
    locale: "en",
    colorTheme: "light",
    interval: "5m",
    autosize: true,
    showIntervalTabs: false,
    isTransparent: false
  }, props);
  createEffect(() => {
    const widgetRoot = document.createElement("div");
    widgetRoot.classList.add("tradingview-widget-container__widget");
    container.appendChild(widgetRoot);
    const fullWidth = _props.autosize || _props.width === "full";
    container.style.width = fullWidth ? "100%" : `${_props.width}px`;
    widgetRoot.style.width = fullWidth ? "100%" : `${_props.width}px`;
    const fullHeight = _props.autosize || _props.height === "full";
    container.style.height = fullHeight ? "100%" : `${_props.height}px`;
    widgetRoot.style.height = fullHeight ? "100%" : `${_props.height}px`;
    const downloadScript = async () => {
      const [error] = await tryCatch(loadScript("https://s3.tradingview.com/external-embedding/embed-widget-technical-analysis.js", {
        textContent: JSON.stringify({
          symbol: _props.symbol,
          width: fullWidth ? "100%" : _props.width,
          height: fullHeight ? "100%" : _props.height,
          interval: _props.interval,
          showIntervalTabs: _props.showIntervalTabs,
          displayMode: _props.displayMode,
          locale: _props.locale,
          colorTheme: _props.colorTheme,
          isTransparent: _props.isTransparent
        })
      }, widgetRoot));
      if (error) _props.onError?.(error);
    };
    void downloadScript();
    onCleanup(() => {
      widgetRoot.remove();
    });
  });
  return (() => {
    var _el$ = _tmpl$11();
    var _ref$ = container;
    typeof _ref$ === "function" ? use(_ref$, _el$) : container = _el$;
    return _el$;
  })();
};
var _tmpl$12 = /* @__PURE__ */ template(`<div class=tradingview-widget-container>`);
var SingleTicker = (props) => {
  let container;
  const _props = mergeProps({
    width: "full",
    locale: "en",
    colorTheme: "light",
    isTransparent: false
  }, props);
  createEffect(() => {
    const widgetRoot = document.createElement("div");
    widgetRoot.classList.add("tradingview-widget-container__widget");
    container.appendChild(widgetRoot);
    container.style.width = _props.width === "full" ? "100%" : `${_props.width}px`;
    widgetRoot.style.width = _props.width === "full" ? "100%" : `${_props.width}px`;
    const downloadScript = async () => {
      const [error] = await tryCatch(loadScript("https://s3.tradingview.com/external-embedding/embed-widget-single-quote.js", {
        textContent: JSON.stringify({
          symbol: _props.symbol,
          width: _props.width === "full" ? "100%" : _props.width,
          locale: _props.locale,
          colorTheme: _props.colorTheme,
          isTransparent: _props.isTransparent
        })
      }, widgetRoot));
      if (error) _props.onError?.(error);
    };
    void downloadScript();
    onCleanup(() => {
      widgetRoot.remove();
    });
  });
  return (() => {
    var _el$ = _tmpl$12();
    var _ref$ = container;
    typeof _ref$ === "function" ? use(_ref$, _el$) : container = _el$;
    return _el$;
  })();
};

export { AdvancedChart, CompanyProfile, CryptoMarket, EconomicCalendar, FundamentalData, MiniChart, Screener, SingleTicker, SymbolInfo, SymbolOverview, TechnicalAnalysis, TopStories };