Spaces:

Specthor
/

population-pulse-dashboard

Running

create a demographics dashboard that shows people served across all programs, also show individual programs count, pie chart comparison and county breakdown.

692dc07 verified 11 months ago

Raw History Blame Contribute Delete

5.22 kB

document.addEventListener('DOMContentLoaded', function() {
    // Theme toggle functionality
    const themeToggle = document.getElementById('theme-toggle');
    const html = document.documentElement;
    
    // Check for saved theme preference or use system preference
    const savedTheme = localStorage.getItem('theme') || 
                      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    html.classList.add(savedTheme);
    
    themeToggle.addEventListener('click', () => {
        html.classList.toggle('dark');
        const theme = html.classList.contains('dark') ? 'dark' : 'light';
        localStorage.setItem('theme', theme);
    });

    // Initialize charts
    const programChartCtx = document.getElementById('programChart').getContext('2d');
    const countyChartCtx = document.getElementById('countyChart').getContext('2d');

    // Program Distribution Pie Chart
    const programChart = new Chart(programChartCtx, {
        type: 'doughnut',
        data: {
            labels: ['Food Assistance', 'Housing Support', 'Job Training', 'Healthcare Access', 'Childcare Support', 'Other'],
            datasets: [{
                data: [3245, 2187, 1876, 2543, 1432, 1562],
                backgroundColor: [
                    'rgba(59, 130, 246, 0.8)',
                    'rgba(124, 58, 237, 0.8)',
                    'rgba(16, 185, 129, 0.8)',
                    'rgba(220, 38, 38, 0.8)',
                    'rgba(234, 179, 8, 0.8)',
                    'rgba(156, 163, 175, 0.8)'
                ],
                borderColor: [
                    'rgba(59, 130, 246, 1)',
                    'rgba(124, 58, 237, 1)',
                    'rgba(16, 185, 129, 1)',
                    'rgba(220, 38, 38, 1)',
                    'rgba(234, 179, 8, 1)',
                    'rgba(156, 163, 175, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right',
                    labels: {
                        color: getComputedStyle(document.documentElement).getPropertyValue('--text-color') || '#6b7280',
                        font: {
                            size: 12
                        }
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const label = context.label || '';
                            const value = context.raw || 0;
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = Math.round((value / total) * 100);
                            return `${label}: ${value} (${percentage}%)`;
                        }
                    }
                }
            }
        }
    });

    // County Breakdown Bar Chart
    const countyChart = new Chart(countyChartCtx, {
        type: 'bar',
        data: {
            labels: ['King', 'Pierce', 'Snohomish', 'Spokane', 'Clark', 'Thurston', 'Kitsap', 'Whatcom'],
            datasets: [{
                label: 'Participants by County',
                data: [3842, 2156, 1873, 1245, 987, 856, 723, 563],
                backgroundColor: 'rgba(59, 130, 246, 0.7)',
                borderColor: 'rgba(59, 130, 246, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        color: getComputedStyle(document.documentElement).getPropertyValue('--text-color') || '#6b7280'
                    },
                    grid: {
                        color: 'rgba(209, 213, 219, 0.2)'
                    }
                },
                x: {
                    ticks: {
                        color: getComputedStyle(document.documentElement).getPropertyValue('--text-color') || '#6b7280'
                    },
                    grid: {
                        display: false
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `${context.raw} participants`;
                        }
                    }
                }
            }
        }
    });

    // Update chart colors when theme changes
    html.addEventListener('classChange', () => {
        programChart.update();
        countyChart.update();
    });

    // Helper to dispatch class change event
    function dispatchClassChange() {
        const event = new Event('classChange');
        html.dispatchEvent(event);
    }

    // Observe class changes on html element
    const observer = new MutationObserver(dispatchClassChange);
    observer.observe(html, { attributes: true, attributeFilter: ['class'] });
});

	document.addEventListener('DOMContentLoaded', function() {
	// Theme toggle functionality
	const themeToggle = document.getElementById('theme-toggle');
	const html = document.documentElement;

	// Check for saved theme preference or use system preference
	const savedTheme = localStorage.getItem('theme') \|\|
	(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
	html.classList.add(savedTheme);

	themeToggle.addEventListener('click', () => {
	html.classList.toggle('dark');
	const theme = html.classList.contains('dark') ? 'dark' : 'light';
	localStorage.setItem('theme', theme);
	});

	// Initialize charts
	const programChartCtx = document.getElementById('programChart').getContext('2d');
	const countyChartCtx = document.getElementById('countyChart').getContext('2d');

	// Program Distribution Pie Chart
	const programChart = new Chart(programChartCtx, {
	type: 'doughnut',
	data: {
	labels: ['Food Assistance', 'Housing Support', 'Job Training', 'Healthcare Access', 'Childcare Support', 'Other'],
	datasets: [{
	data: [3245, 2187, 1876, 2543, 1432, 1562],
	backgroundColor: [
	'rgba(59, 130, 246, 0.8)',
	'rgba(124, 58, 237, 0.8)',
	'rgba(16, 185, 129, 0.8)',
	'rgba(220, 38, 38, 0.8)',
	'rgba(234, 179, 8, 0.8)',
	'rgba(156, 163, 175, 0.8)'
	],
	borderColor: [
	'rgba(59, 130, 246, 1)',
	'rgba(124, 58, 237, 1)',
	'rgba(16, 185, 129, 1)',
	'rgba(220, 38, 38, 1)',
	'rgba(234, 179, 8, 1)',
	'rgba(156, 163, 175, 1)'
	],
	borderWidth: 1
	}]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	plugins: {
	legend: {
	position: 'right',
	labels: {
	color: getComputedStyle(document.documentElement).getPropertyValue('--text-color') \|\| '#6b7280',
	font: {
	size: 12
	}
	}
	},
	tooltip: {
	callbacks: {
	label: function(context) {
	const label = context.label \|\| '';
	const value = context.raw \|\| 0;
	const total = context.dataset.data.reduce((a, b) => a + b, 0);
	const percentage = Math.round((value / total) * 100);
	return `${label}: ${value} (${percentage}%)`;
	}
	}
	}
	}
	}
	});

	// County Breakdown Bar Chart
	const countyChart = new Chart(countyChartCtx, {
	type: 'bar',
	data: {
	labels: ['King', 'Pierce', 'Snohomish', 'Spokane', 'Clark', 'Thurston', 'Kitsap', 'Whatcom'],
	datasets: [{
	label: 'Participants by County',
	data: [3842, 2156, 1873, 1245, 987, 856, 723, 563],
	backgroundColor: 'rgba(59, 130, 246, 0.7)',
	borderColor: 'rgba(59, 130, 246, 1)',
	borderWidth: 1
	}]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	scales: {
	y: {
	beginAtZero: true,
	ticks: {
	color: getComputedStyle(document.documentElement).getPropertyValue('--text-color') \|\| '#6b7280'
	},
	grid: {
	color: 'rgba(209, 213, 219, 0.2)'
	}
	},
	x: {
	ticks: {
	color: getComputedStyle(document.documentElement).getPropertyValue('--text-color') \|\| '#6b7280'
	},
	grid: {
	display: false
	}
	}
	},
	plugins: {
	legend: {
	display: false
	},
	tooltip: {
	callbacks: {
	label: function(context) {
	return `${context.raw} participants`;
	}
	}
	}
	}
	}
	});

	// Update chart colors when theme changes
	html.addEventListener('classChange', () => {
	programChart.update();
	countyChart.update();
	});

	// Helper to dispatch class change event
	function dispatchClassChange() {
	const event = new Event('classChange');
	html.dispatchEvent(event);
	}

	// Observe class changes on html element
	const observer = new MutationObserver(dispatchClassChange);
	observer.observe(html, { attributes: true, attributeFilter: ['class'] });
	});