nevera
Version:
Minimal 3kb charts as web components
68 lines (64 loc) • 2.39 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="/logo.svg">
<link rel="stylesheet" href="./src/style.css">
<style>
:root {
border: 1px solid #0f02;
--nev-fill: white;
--nev-stroke: red;
--nev-stroke-width: 5;
}
</style>
<title>Nevera</title>
</head>
<body>
<nev-barchart height="200" width="500" style="width: 200px; height: auto"></nev-barchart>
<button type="button">change</button>
<nev-piechart width="20" style="width: 400px; height: 400px" total="1000"></nev-piechart>
<script type="module" src="/src/main.ts"></script>
<script type="module">
// mock data
const mockData = [
{ key: "A", value: 250, fill: "red" },
{ key: "B", value: 250, fill: "blue" },
{ key: "C", value: 125, fill: "yellow" },
{ key: "D", value: 125, fill: "green" },
];
const mockData2 = [
{ key: "uno", value: 300, fill: 'fuchsia' },
{ key: "due", value: 200, fill: 'greenyellow' },
{ key: "tre", value: 100, fill: 'hotpink' },
];
// data setting and changing
document.querySelector('nev-barchart').data = mockData;
document.querySelector('nev-piechart').data = mockData;
document.querySelector('button').addEventListener('click', () => {
document.querySelector('nev-barchart').data = mockData2;
document.querySelector('nev-piechart').data = mockData2;
})
// event handling
document.querySelector('nev-barchart').addEventListener('mouseover', (e) => {
console.log('mouse over ', e.detail.value);
});
document.querySelector('nev-barchart').addEventListener('mouseout', (e) => {
console.log('mouse out ', e.detail.value);
});
document.querySelector('nev-barchart').addEventListener('click', (e) => {
console.log('click on ', e.detail.value);
});
document.querySelector('nev-piechart').addEventListener('mouseover', (e) => {
console.log('mouse over ', e.detail.value);
});
document.querySelector('nev-piechart').addEventListener('mouseout', (e) => {
console.log('mouse out ', e.detail.value);
});
document.querySelector('nev-piechart').addEventListener('click', (e) => {
console.log('click on ', e.detail.value);
});
</script>
</body>
</html>