82 lines
2.7 KiB
HTML
82 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Chart.js ESM Tests</title>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"@web/chart": "../src/index.js"
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.chart-container {
|
|
width: 400px;
|
|
height: 400px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="results">Running tests...</div>
|
|
<div class="chart-container">
|
|
<canvas id="testChart"></canvas>
|
|
</div>
|
|
<script type="module">
|
|
import { DataChart } from '@web/chart';
|
|
|
|
async function runTests() {
|
|
const results = document.getElementById('results');
|
|
try {
|
|
const t0 = performance.now();
|
|
const canvas = document.getElementById('testChart');
|
|
const dc = new DataChart(canvas, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['Jan', 'Feb', 'Mar'],
|
|
datasets: [{
|
|
label: 'Test Data',
|
|
data: [10, 20, 30]
|
|
}]
|
|
}
|
|
});
|
|
|
|
if (!dc.chart) throw new Error('Chart instance not created');
|
|
|
|
// Test mapping feature
|
|
const mappedCanvas = document.createElement('canvas');
|
|
document.body.appendChild(mappedCanvas);
|
|
const dcMapped = new DataChart(mappedCanvas, {
|
|
type: 'bar',
|
|
map: { labels: 'name', values: 'score', label: 'Scores' },
|
|
data: [
|
|
{ name: 'Alice', score: 85 },
|
|
{ name: 'Bob', score: 92 }
|
|
]
|
|
});
|
|
|
|
if (dcMapped.chart.data.labels[0] !== 'Alice') throw new Error('Mapping failed: labels');
|
|
if (dcMapped.chart.data.datasets[0].data[1] !== 92) throw new Error('Mapping failed: values');
|
|
window.renderTime = performance.now() - t0;
|
|
|
|
// Test update
|
|
dc.update({
|
|
labels: ['Jan', 'Feb', 'Mar'],
|
|
datasets: [{
|
|
label: 'Test Data',
|
|
data: [15, 25, 35]
|
|
}]
|
|
});
|
|
|
|
results.innerHTML = '<h1 style="color: green">All Tests Passed 🎉</h1>';
|
|
window.testStatus = 'passed';
|
|
} catch (e) {
|
|
console.error(e);
|
|
results.innerHTML = '<h1 style="color: red">Tests Failed: ' + e.message + '</h1>';
|
|
window.testStatus = 'failed';
|
|
}
|
|
}
|
|
runTests();
|
|
</script>
|
|
</body>
|
|
</html>
|