Changed around line 1
+ // Theme toggling
+ const themeToggle = document.querySelector('.theme-toggle');
+ themeToggle.addEventListener('click', () => {
+ document.body.classList.toggle('dark');
+ });
+
+ // Chart initialization
+ const ctx = document.getElementById('mainChart').getContext('2d');
+ const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
+ const data = [65, 59, 80, 81, 56, 55];
+
+ function drawChart() {
+ ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+ const gradient = ctx.createLinearGradient(0, 0, 0, 400);
+ gradient.addColorStop(0, 'rgba(99, 102, 241, 0.5)');
+ gradient.addColorStop(1, 'rgba(99, 102, 241, 0)');
+
+ ctx.beginPath();
+ ctx.moveTo(0, 400);
+
+ const step = ctx.canvas.width / (labels.length - 1);
+ const scale = ctx.canvas.height / Math.max(...data);
+
+ data.forEach((value, index) => {
+ const x = index * step;
+ const y = ctx.canvas.height - (value * scale);
+
+ if (index === 0) {
+ ctx.moveTo(x, y);
+ } else {
+ ctx.lineTo(x, y);
+ }
+ });
+
+ ctx.lineTo(ctx.canvas.width, ctx.canvas.height);
+ ctx.lineTo(0, ctx.canvas.height);
+ ctx.fillStyle = gradient;
+ ctx.fill();
+
+ ctx.beginPath();
+ data.forEach((value, index) => {
+ const x = index * step;
+ const y = ctx.canvas.height - (value * scale);
+
+ if (index === 0) {
+ ctx.moveTo(x, y);
+ } else {
+ ctx.lineTo(x, y);
+ }
+ });
+
+ ctx.strokeStyle = '#6366f1';
+ ctx.lineWidth = 2;
+ ctx.stroke();
+ }
+
+ // Populate activity table
+ const activities = [
+ { user: 'John Doe', action: 'Login', date: '2024-01-20', status: 'Success' },
+ { user: 'Jane Smith', action: 'Purchase', date: '2024-01-20', status: 'Completed' },
+ { user: 'Mike Johnson', action: 'Update', date: '2024-01-19', status: 'Pending' }
+ ];
+
+ const activityTable = document.getElementById('activity-table');
+ activities.forEach(activity => {
+ const row = document.createElement('tr');
+ row.innerHTML = `
+
${activity.user} | +
${activity.action} | +
${activity.date} | +
${activity.status} | + `;
+ activityTable.appendChild(row);
+ });
+
+ // Responsive chart
+ window.addEventListener('resize', drawChart);
+ drawChart();
