packages/core/index.html

<!doctype html>
<html lang="en">
	<head>
		<title>Carbon Charts Vanilla JavaScript Tests</title>
		<meta charset="UTF-8" />
		<link rel="preconnect" crossorigin="anonymous" href="https://fonts.googleapis.com" />
		<link
			href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400|IBM+Plex+Sans:400,600&display=swap"
			rel="stylesheet"
			crossorigin="anonymous" />
		<link rel="stylesheet" href="scss/index.scss" />
		<style>
			.container {
				width: 60rem;
			}

			.chart-container {
				margin-bottom: 5rem;
			}
		</style>
	</head>

	<body>
		<h1>Carbon Charts Vanilla JavaScript</h1>
		<h2>Component Test Harness</h2>
		<div id="app" class="container"></div>

		<script type="module">
			import * as ChartComponents from './src/charts/index.ts'
			import charts from '../docs/src/charts'

			const chartHolder = document.getElementById('app')

			for (const chart of charts) {
				const header = document.createElement('h3')
				header.textContent = chart.types.vanilla
				chartHolder.appendChild(header)

				for (const example of chart.examples) {
					if (example.tags && example.tags.includes('test')) {
						const chartContainer = document.createElement('div')
						chartContainer.className = 'chart-container'
						chartHolder.appendChild(chartContainer)

						const ChartConstructor = ChartComponents[chart.types.vanilla]

						new ChartConstructor(chartContainer, {
							data: example.data,
							options: example.options
						})
					}
				}
			}
		</script>
	</body>
</html>