Hugging Face's logo

Spaces:
Specthor
/
dataviz-powerpie-dashboard
Running

App Files Community
dataviz-powerpie-dashboard / script.js
Specthor's picture
Specthor
create a demographics dashboard that shows people served across all programs, also show individual programs count, pie chart comparison and county breakdown
db3055f verified
Raw History Blame Contribute Delete
6.39 kB
document.addEventListener('DOMContentLoaded', function() {
// Initialize tooltips
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
// Date display
const dateDisplay = document.getElementById('current-date');
if (dateDisplay) {
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
dateDisplay.textContent = new Date().toLocaleDateString('en-US', options);
}
// Load Chart.js
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
script.onload = initializeCharts;
document.head.appendChild(script);
function initializeCharts() {
// Check if we're on the demographics page
if (document.getElementById('programDistributionChart')) {
// Program Distribution Chart
const programDistCtx = document.getElementById('programDistributionChart').getContext('2d');
new Chart(programDistCtx, {
type: 'pie',
data: {
labels: ['CCS Program', 'SPS Program'],
datasets: [{
data: [782, 466],
backgroundColor: ['#4f46e5', '#7c3aed'],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
},
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 Chart
const countyCtx = document.getElementById('countyBreakdownChart').getContext('2d');
new Chart(countyCtx, {
type: 'bar',
data: {
labels: ['Baltimore City', 'Montgomery', 'Prince George\'s', 'Baltimore County', 'Other Counties'],
datasets: [
{
label: 'CCS',
data: [245, 187, 156, 98, 96],
backgroundColor: '#4f46e5',
},
{
label: 'SPS',
data: [132, 98, 112, 64, 60],
backgroundColor: '#7c3aed',
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
stacked: true,
},
y: {
stacked: true,
beginAtZero: true
}
}
}
});
}
// Program Comparison Chart (for index page)
const programCtx = document.getElementById('programComparisonChart').getContext('2d');
new Chart(programCtx, {
type: 'pie',
data: {
labels: ['CCS Program', 'SPS Program'],
datasets: [{
data: [782, 466],
backgroundColor: ['#4f46e5', '#7c3aed'],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
},
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}%)`;
}
}
}
}
}
});
// LTSS Eligibility Comparison Chart
const ltssCtx = document.getElementById('ltssComparisonChart').getContext('2d');
new Chart(ltssCtx, {
type: 'pie',
data: {
labels: ['Our Programs', 'Other LTSS-Eligible in MD'],
datasets: [{
data: [1248, 3200],
backgroundColor: ['#10b981', '#6b7280'],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
},
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}%)`;
}
}
}
}
}
});
}
});