Data Center Operations Dashboard
Overall Operations Summary
Total Records
0
Average Uptime
0%
Total Power Consumption (KWH)
0
Average PUE
0
Total Incidents
0
Total Cost of Operations ($)
$0
Uptime Distribution
Power Consumption by Area/Server (KWH)
PUE Distribution
Incidents by Type
Cost of Operations by Area/Server ($)
Detailed Operations Records
| ID | Date | Area/Server Name | Server Count | Uptime (%) | Power (KWH) | PUE | Incidents | Major Incident Type | Total Cost ($) |
|---|
No data to display.
'; return; } // Sort data by value descending for general charts, custom for specific types let sortedData = Object.entries(data); if (valueType === 'uptime_category') { const uptimeOrder = ['Excellent (99.9%+)','Good (99-99.9%)', 'Fair (95-99%)', 'Poor (<95%)']; sortedData.sort(([labelA], [labelB]) => uptimeOrder.indexOf(labelA) - uptimeOrder.indexOf(labelB)); } else if (valueType === 'pue') { // Sort PUE from lowest (best) to highest (worst) sortedData.sort(([, valA], [, valB]) => valA - valB); } else { sortedData.sort(([, valA], [, valB]) => valB - valA); } // Determine the maximum value for scaling bars const maxValue = Math.max(...Object.values(data), 1); // Avoid division by zero if all values are 0 sortedData.forEach(([label, value]) => { const barWidth = (value / maxValue) * 100; // Scale based on max value for visual representation const percentageOfTotal = totalValue > 0 ? ((value / totalValue) * 100).toFixed(1) : 0; let displayValue; let barClass = 'bg-blue-300'; // Default bar color if (valueType === 'percentage') { displayValue = `${value.toFixed(1)}%`; } else if (valueType === 'kwh') { displayValue = `${value.toLocaleString('en-US')} KWH`; } else if (valueType === 'pue') { displayValue = `${value.toFixed(2)}`; } else if (valueType === 'currency') { displayValue = `$${value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`; } else if (valueType === 'uptime_category') { displayValue = `${value} Records`; if (label.includes('Excellent')) barClass = 'uptime-excellent'; else if (label.includes('Good')) barClass = 'uptime-good'; else if (label.includes('Fair')) barClass = 'uptime-fair'; else if (label.includes('Poor')) barClass = 'uptime-poor'; } else { // 'count' displayValue = `${value} Records`; } const barWrapper = document.createElement('div'); barWrapper.classList.add('chart-bar-wrapper'); barWrapper.innerHTML = ` ${label}: `; targetElement.appendChild(barWrapper); }); } /** * Calculates and renders all distribution charts. */ function renderDistributionCharts() { const totalRecords = operationsRecords.length; // Uptime Distribution const uptimeCategories = { 'Excellent (99.9%+)': 0, 'Good (99-99.9%)': 0, 'Fair (95-99%)': 0, 'Poor (<95%)': 0 }; operationsRecords.forEach(record => { if (record.uptimePercentage >= 99.9) { uptimeCategories['Excellent (99.9%+)']++; } else if (record.uptimePercentage >= 99) { uptimeCategories['Good (99-99.9%)']++; } else if (record.uptimePercentage >= 95) { uptimeCategories['Fair (95-99%)']++; } else { uptimeCategories['Poor (<95%)']++; } }); renderBarChart(uptimeDistributionChartElem, uptimeCategories, 'uptime_category'); // Power Consumption by Area/Server const powerConsumptionByArea = operationsRecords.reduce((acc, record) => { acc[record.areaOrServerName] = (acc[record.areaOrServerName] || 0) + record.powerConsumptionKWH; return acc; }, {}); renderBarChart(powerConsumptionByAreaChartElem, powerConsumptionByArea, 'kwh'); // PUE Distribution (average PUE for each category/area) const pueByAreaSum = {}; const pueByAreaCount = {}; operationsRecords.forEach(record => { pueByAreaSum[record.areaOrServerName] = (pueByAreaSum[record.areaOrServerName] || 0) + record.coolingEfficiencyPUE; pueByAreaCount[record.areaOrServerName] = (pueByAreaCount[record.areaOrServerName] || 0) + 1; }); const avgPUEByArea = {}; for (const area in pueByAreaSum) { if (pueByAreaCount[area] > 0) { avgPUEByArea[area] = pueByAreaSum[area] / pueByAreaCount[area]; } else { avgPUEByArea[area] = 0; } } renderBarChart(pueDistributionChartElem, avgPUEByArea, 'pue'); // Incidents by Type const incidentsByType = operationsRecords .filter(record => record.incidentCount > 0 && record.majorIncidentType !== 'N/A') .reduce((acc, record) => { acc[record.majorIncidentType] = (acc[record.majorIncidentType] || 0) + record.incidentCount; return acc; }, {}); renderBarChart(incidentsByTypeChartElem, incidentsByType, 'count'); // Cost of Operations by Area/Server const costByArea = operationsRecords.reduce((acc, record) => { acc[record.areaOrServerName] = (acc[record.areaOrServerName] || 0) + record.totalCostOfOperationsUSD; return acc; }, {}); renderBarChart(costOfOperationsByAreaChartElem, costByArea, 'currency'); } /** * Generates a PDF of the dashboard content. * Excludes non-essential UI elements like buttons and input forms. */ function generatePdf() { // Create a temporary div to hold only the content for PDF const pdfContentWrapper = document.createElement('div'); pdfContentWrapper.classList.add('pdf-content-wrapper'); // Apply PDF-specific styles // Add title const title = document.createElement('h2'); title.textContent = 'Data Center Operations Dashboard Report'; title.classList.add('text-2xl', 'font-bold', 'mb-4'); pdfContentWrapper.appendChild(title); // Add summary cards const summarySection = document.createElement('div'); summarySection.classList.add('grid', 'grid-cols-4', 'gap-4', 'mb-6'); summarySection.innerHTML = `Total Records
${totalRecordsCountElem.textContent}
Average Uptime
${averageUptimeElem.textContent}
Total Power Consumption (KWH)
${totalPowerConsumptionElem.textContent}
Average PUE
${averagePUEElem.textContent}
Total Incidents
${totalIncidentsCountElem.textContent}
Total Cost of Operations ($)
${totalCostOfOperationsElem.textContent}
Uptime Distribution
Power Consumption by Area/Server (KWH)
PUE Distribution
Incidents by Type
Cost of Operations by Area/Server ($)
Detailed Operations Records
| ID | Date | Area/Server Name | Server Count | Uptime (%) | Power (KWH) | PUE | Incidents | Major Incident Type | Total Cost ($) |
|---|