Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+ const tabs = document.querySelectorAll('.tab');
+ const charts = document.querySelectorAll('canvas');
+
+ tabs.forEach(tab => {
+ tab.addEventListener('click', function() {
+ tabs.forEach(t => t.classList.remove('active'));
+ this.classList.add('active');
+
+ charts.forEach(chart => chart.classList.remove('active'));
+ const chartId = this.dataset.tab + 'Chart';
+ document.getElementById(chartId).classList.add('active');
+ });
+ });
+
+ const dailyData = {
+ labels: ['Alice', 'Bob', 'Charlie', 'Diana'],
+ datasets: [{
+ label: 'Daily Points',
+ data: [5, 3, 7, 2],
+ backgroundColor: '#4CAF50'
+ }]
+ };
+
+ const weeklyData = {
+ labels: ['Alice', 'Bob', 'Charlie', 'Diana'],
+ datasets: [{
+ label: 'Weekly Points',
+ data: [25, 18, 30, 15],
+ backgroundColor: '#4CAF50'
+ }]
+ };
+
+ const monthlyData = {
+ labels: ['Alice', 'Bob', 'Charlie', 'Diana'],
+ datasets: [{
+ label: 'Monthly Points',
+ data: [80, 65, 95, 70],
+ backgroundColor: '#4CAF50'
+ }]
+ };
+
+ const totalData = {
+ labels: ['Alice', 'Bob', 'Charlie', 'Diana'],
+ datasets: [{
+ label: 'Total Points',
+ data: [200, 150, 250, 180],
+ backgroundColor: '#4CAF50'
+ }]
+ };
+
+ const dailyChart = new Chart(document.getElementById('dailyChart'), {
+ type: 'bar',
+ data: dailyData,
+ options: {
+ responsive: true,
+ maintainAspectRatio: false
+ }
+ });
+
+ const weeklyChart = new Chart(document.getElementById('weeklyChart'), {
+ type: 'bar',
+ data: weeklyData,
+ options: {
+ responsive: true,
+ maintainAspectRatio: false
+ }
+ });
+
+ const monthlyChart = new Chart(document.getElementById('monthlyChart'), {
+ type: 'bar',
+ data: monthlyData,
+ options: {
+ responsive: true,
+ maintainAspectRatio: false
+ }
+ });
+
+ const totalChart = new Chart(document.getElementById('totalChart'), {
+ type: 'bar',
+ data: totalData,
+ options: {
+ responsive: true,
+ maintainAspectRatio: false
+ }
+ });
+
+ document.getElementById('loginForm').addEventListener('submit', function(e) {
+ e.preventDefault();
+ alert('Login functionality coming soon!');
+ });
+ });