JSFiddle - React, Tailwind, and code Playground

by spn99

HTML

<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
 
<script src="https://cdn.jsdelivr.net/gh/bitquery/[email protected]/dataSource.js"></script>
<div style="width: 500px; height: 500px; overflow-y: hidden;" id="sO0pOgWQPNU"></div>

JavaScript

let ds = new dataSourceWidget(`
  query(
    $baseAddress: String
    $quoteAddress: String
    $from: ISO8601DateTime!
    $interval: Int
    $protocol: String
    $exchangeName: String
    $network: EthereumNetwork!
  ) {
    ethereum(network: $network) {
      dexTrades(
        protocol: { is: $protocol }
        baseCurrency: { is: $baseAddress }
        quoteCurrency: { is: $quoteAddress }
        date: { since:  $from }
        exchangeName: { is: $exchangeName }
        priceAsymmetry: { lt: 0.7 }
        any: [
          {tradeAmountUsd: { gt: 10 }},
          {tradeAmountUsd: { is: 0 }}
        ]
      ) {
        timeInterval {
          minute(format:"%FT%TZ", count: $interval)
        }
        buyCurrency: baseCurrency {
          symbol
          address
        }
        buyAmount: baseAmount
        sellCurrency: quoteCurrency {
          symbol
          address
        }
        volume: quoteAmount
        trades: count
        high: quotePrice(calculate: maximum)
        low: quotePrice(calculate: minimum)
        open: minimum(of: block, get: quote_price)
        close: maximum(of: block, get: quote_price)
      }
    }
  }
`, {
  "from": "2021-10-03T00:15:33+03:00",
  "interval": 30,
  "baseAddress": "0xc579d1f3cf86749e05cd06f7ade17856c2ce3126",
  "quoteAddress": "0xabf26902fd7b624e0db40d31171ea9dddf078351",
  "network": "velas"
}, `ethereum.dexTrades`, 'BQY6TU7z5qlHcPYngQKPOZ0eOmhNnnBn')
	async function tradingViewrenderer(ds, config, el) {
	const thisTV = document.getElementById(el).firstChild
	thisTV && document.getElementById(el).removeChild(thisTV)
	let values = undefined
	if (!ds.values) {
		const data = await ds.fetcher()
		const json = await data.json()
		values = ds.setupData(json)
	} else {
		values = ds.values
	}
	const chart = LightweightCharts.createChart(el, {
		timeScale: {
			timeVisible: true,
			secondsVisible: false,
		}
	})
	const candlestickSeries = chart.addCandlestickSeries()
	const data = []
	for (let i = 0; i <...