@aqzhyi/use-react-tradingview v0.2.1

開始整合 TradingView Charting Library 到你的專案之中

DEMO

https://use-react-tradingview.vercel.app/

!WARNING

由於官方專案是私密的，您必須前往 Official Website 並向有關部門申請許可。

Due to the official project being private, you must go to the Official Website and ask the authorities for permission.

Usage

1. 在你的開發專案目錄，例如 @web/new-astro
2. 取得 charting-library 代碼庫，從 Official Website 中

3. 將 charting-library/charting-library/bundles 目錄，複制貼上到 @web/new-astro/public/charting-library 目錄中，

   ⚡ 其主要目地是要讓 bundles/** 內容檔案可以直接被 http requests 存取

   e.g.

   • @web/new-astro/public/charting-library/bundles

4. 最後安裝本庫

   pnpm i @aqzhyi/react-tradingview-charting -S

   or Monorepo:

   pnpm i @aqzhyi/react-tradingview-charting -S -F=@web/new-astro

Example

import { Datafeeds, TradingView } from '@aqzhyi/use-react-tradingview'
import { useEffect, useRef } from 'react'

const targetElementId = 'tradingview-container'

export const Page = () => {
  const targetElement = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!targetElement.current) return

    new TradingView.widget({
      fullscreen: true,
      symbol: 'AAPL',
      interval: '1D' as TradingView.ResolutionString,
      container: targetElementId,
      // BEWARE: no trailing slash is expected in feed URL
      datafeed: new Datafeeds.UDFCompatibleDatafeed('https://demo-feed-data.tradingview.com', undefined, {
        maxResponseLength: 1000,
        expectedOrder: 'latestFirst',
      }),
      library_path: 'charting-library/',
      locale: 'zh_TW',

      disabled_features: [
        'use_localstorage_for_settings',
        'left_toolbar',
        'header_widget',
        'timeframes_toolbar',
        'edit_buttons_in_legend',
        'context_menus',
        'control_bar',
        'border_around_the_chart',
      ],
      overrides: {
        'paneProperties.background': '#222222',
        'paneProperties.vertGridProperties.color': '#454545',
        'paneProperties.horzGridProperties.color': '#454545',
        'scalesProperties.textColor': '#AAA',
      },
    })
  }, [])

  return (
    <div
      ref={targetElement}
      id={targetElementId}
    >
      Tradingview Charting is loading...
    </div>
  )
}

Development

1. pnpm run dev -F @aqzhyi/use-react-tradingview
2. open http://localhost:2886/