JSFiddle - React, Tailwind, and code Playground

by spn99

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 
<script src="https://cdn.jsdelivr.net/gh/bitquery/[email protected]/dataSource.js"></script>
<div style="width: 500px; height: 500px; overflow-y: hidden;" id="sCNvN7qjPMF"></div>

JavaScript

let ds = new dataSourceWidget(`{bitcoin{
  blocks{
    count
    date{
      year
    }
  }
}}`, {}, `bitcoin.blocks`, 'BQY6TU7z5qlHcPYngQKPOZ0eOmhNnnBn')
	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.year","type":"ordinal","sort":null},"y":{"field":"count","type":"quantitative"},"stroke":{"condition":{"selection":"highlight","value":"#000"}}}}
	barWidgetRenderer(ds, config, 'sCNvN7qjPMF')