29 lines
778 B
JavaScript
29 lines
778 B
JavaScript
|
// Overview component
|
||
|
|
class Overview {
|
||
|
|
constructor() {
|
||
|
|
this.element = document.createElement('div');
|
||
|
|
this.element.className = 'overview-chart';
|
||
|
|
this.render();
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
this.element.innerHTML = `
|
||
|
|
<div class="chart-container">
|
||
|
|
<div class="flex justify-between items-end h-40">
|
||
|
|
${[100, 80, 60, 40, 20].map((h, i) => `
|
||
|
|
<div class="chart-bar"
|
||
|
|
style="height:${h}px;background-color:hsl(var(--chart-${(i%5)+1}))">
|
||
|
|
</div>
|
||
|
|
`).join('')}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Initialize and mount the component
|
||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
const overview = new Overview();
|
||
|
|
document.querySelector('.overview-chart').replaceWith(overview.element);
|
||
|
|
});
|