Cannot input the embeded widget code to react

GraphQL Tutorials
1

Hello,

hope all is well.

I am trying to embed the widget code in react. Some help and examples would help.
I keep getting prompted with:
Line 2:16: 'dataSourceWidget' is not defined no-undef

This is the full code that I am embedding into on of my react components:


<script src="https://cdn.jsdelivr.net/npm/vega@5.19.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.0.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.15.1"></script>
 
<script src="https://cdn.jsdelivr.net/gh/bitquery/widgets-runtime@v1.0/dataSource.js"></script>
<div style="width: 500px; height: 500px; overflow-y: hidden; " id="s6vT76tTyzL"></div>
<script>
	let ds = new dataSourceWidget(`
            query ($network: BitcoinNetwork!,
                  $dateFormat: String!,

                  $from: ISO8601DateTime,
                  $till: ISO8601DateTime){
                    bitcoin(network: $network ){
                      transactions(options:{asc: "date.date"}, date: {
                        since: $from
                        till: $till}

                      ) {
                        date: date{
                          date(format: $dateFormat)
                        }
                        count: countBigInt
                        feeValue
                        avgFee: feeValue(calculate: average)
                      }
                    }
                  }`, {"limit":10,"offset":0,"network":"bitcoin","from":"2022-07-18","till":"2022-07-25T23:59:59","dateFormat":"%Y-%m-%d"}, `bitcoin.transactions`, 'BQY3gTGqa8DtHsDVO4nF3JYmcfvGtSKQ')
	async function barWidgetRenderer(ds, config, el) {
	let values = undefined
	if (!ds.values) {
		const data = await ds.fetcher()
		const json = await data.json()
		values = ds.setupData(json)
	} else {
		values = ds.values
	}
	let cfg = {
		$schema: 'https://vega.github.io/schema/vega-lite/v4.json',
		description: 'A simple bar chart with embedded data.',
		width: "container",
		height: "container",
		mark: {"type": "bar", "tooltip": true},
		selection: {
			highlight: {
				type: "single",
				empty: "none",
				on: "mouseover"
			}
		},
		...config,
		data: {
			values
		}
	}
	try {
		vegaEmbed(`#${el}`, cfg, {actions: false})
	} catch (error) {
		console.log(error)
	}
}
	const config = {"transform":[{"sample":1000}],"encoding":{"x":{"field":"date.date","type":"ordinal","sort":null},"y":{"field":"count","type":"quantitative"},"stroke":{"condition":{"selection":"highlight","value":"#000"}}}}
	barWidgetRenderer(ds, config, 's6vT76tTyzL')
</script>

Thanks

2

The way you are doing it, you are not embedding it directly in the DOM, so it is the wrong way to do it.

if what you want is to inject those script tags in the dom you could play with document.createElement("script")

here you have an example extracted from this website

const addScript = ({ src, id, onLoad }) => {
  const existing = document.getElementById(id);
  if (existing) {
    return existing;
  } else {
    const script = document.createElement("script");
    script.src = src;
    script.id = id;
    script.async = true;
    script.onload = () => {
      if (onLoad) {
        onLoad();
      }
    };
    document.body.appendChild(script);
    return script;
  }
};

addScript({
  src: `https://platform.twitter.com/widgets.js`,
  id: "twitter-script",
  onLoad: () => {
    console.log("Twitter script loaded!");
  },
});

clearly that function you will have to modify it according to your needs, I hope to see you clarified a little more the way to integrate the widget to react (there are more ways, but that is the most similar to what you are doing).