Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Export Data to Excel</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen flex items-center justify-center"> | |
| <div class="bg-white rounded-lg shadow-lg p-8 max-w-md w-full"> | |
| <div class="text-center mb-6"> | |
| <i data-feather="download" class="w-12 h-12 text-blue-500 mx-auto"></i> | |
| <h1 class="text-2xl font-bold text-gray-800 mt-4">Export Data to Excel</h1> | |
| <p class="text-gray-600 mt-2">Download all chart data as an Excel spreadsheet</p> | |
| </div> | |
| <div class="space-y-4"> | |
| <button id="exportAllBtn" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 px-4 rounded-lg flex items-center justify-center"> | |
| <i data-feather="download-cloud" class="mr-2"></i> | |
| Export All Data | |
| </button> | |
| <div class="border-t border-gray-200 pt-4"> | |
| <h2 class="text-lg font-medium text-gray-800 mb-3">Export Individual Charts</h2> | |
| <div class="space-y-2"> | |
| <button id="exportDiversityBtn" class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded flex items-center justify-between"> | |
| <span>Diversity Metrics</span> | |
| <i data-feather="chevron-right" class="text-gray-500"></i> | |
| </button> | |
| <button id="exportAdmixtureBtn" class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded flex items-center justify-between"> | |
| <span>Admixture Data</span> | |
| <i data-feather="chevron-right" class="text-gray-500"></i> | |
| </button> | |
| <button id="exportHeteroBtn" class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded flex items-center justify-between"> | |
| <span>Heterozygosity</span> | |
| <i data-feather="chevron-right" class="text-gray-500"></i> | |
| </button> | |
| <button id="exportSnpBtn" class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded flex items-center justify-between"> | |
| <span>SNP Distribution</span> | |
| <i data-feather="chevron-right" class="text-gray-500"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Chart data (same as in index.html) | |
| const chartData = { | |
| diversity: { | |
| labels: ['rs16985665', 'rs405509', 'rs662799', 'rs7258249', 'rs778796405', 'rs878854023', 'rs886046425', 'rs944580031'], | |
| values: [1.62, 1.85, 1.43, 1.71, 1.92, 1.38, 1.67, 1.24] | |
| }, | |
| admixture: { | |
| labels: ['Ancestry Group 1', 'Ancestry Group 2'], | |
| values: [72, 28] | |
| }, | |
| heterozygosity: { | |
| labels: ['rs16985665', 'rs405509', 'rs662799', 'rs7258249', 'rs778796405'], | |
| caseValues: [0.34, 0.42, 0.31, 0.38, 0.45], | |
| controlValues: [0.38, 0.48, 0.35, 0.42, 0.51] | |
| }, | |
| snpDistribution: { | |
| labels: ['rs16985665', 'rs405509', 'rs662799', 'rs7258249', 'rs778796405', 'rs878854023', 'rs886046425', 'rs944580031'], | |
| caseValues: [0.42, 0.38, 0.45, 0.39, 0.51, 0.18, 0.48, 0.05], | |
| controlValues: [0.38, 0.45, 0.42, 0.44, 0.55, 0.22, 0.51, 0.08] | |
| } | |
| }; | |
| // Function to export data to Excel | |
| function exportToExcel(data, sheetName, fileName) { | |
| const ws = XLSX.utils.json_to_sheet(data); | |
| const wb = XLSX.utils.book_new(); | |
| XLSX.utils.book_append_sheet(wb, ws, sheetName); | |
| XLSX.writeFile(wb, `${fileName}.xlsx`); | |
| } | |
| // Export all data | |
| document.getElementById('exportAllBtn').addEventListener('click', function() { | |
| // Create a workbook with multiple sheets | |
| const wb = XLSX.utils.book_new(); | |
| // Diversity data | |
| const diversityData = chartData.diversity.labels.map((label, i) => ({ | |
| SNP: label, | |
| 'Shannon Index': chartData.diversity.values[i] | |
| })); | |
| const ws1 = XLSX.utils.json_to_sheet(diversityData); | |
| XLSX.utils.book_append_sheet(wb, ws1, "Diversity"); | |
| // Admixture data | |
| const admixtureData = chartData.admixture.labels.map((label, i) => ({ | |
| 'Ancestry Group': label, | |
| Percentage: chartData.admixture.values[i] | |
| })); | |
| const ws2 = XLSX.utils.json_to_sheet(admixtureData); | |
| XLSX.utils.book_append_sheet(wb, ws2, "Admixture"); | |
| // Heterozygosity data | |
| const heteroData = chartData.heterozygosity.labels.map((label, i) => ({ | |
| SNP: label, | |
| 'Case Heterozygosity': chartData.heterozygosity.caseValues[i], | |
| 'Control Heterozygosity': chartData.heterozygosity.controlValues[i] | |
| })); | |
| const ws3 = XLSX.utils.json_to_sheet(heteroData); | |
| XLSX.utils.book_append_sheet(wb, ws3, "Heterozygosity"); | |
| // SNP Distribution data | |
| const snpData = chartData.snpDistribution.labels.map((label, i) => ({ | |
| SNP: label, | |
| 'Case Frequency': chartData.snpDistribution.caseValues[i], | |
| 'Control Frequency': chartData.snpDistribution.controlValues[i] | |
| })); | |
| const ws4 = XLSX.utils.json_to_sheet(snpData); | |
| XLSX.utils.book_append_sheet(wb, ws4, "SNP Distribution"); | |
| // Export the workbook | |
| XLSX.writeFile(wb, "Genetic_Data_Export.xlsx"); | |
| }); | |
| // Individual exports | |
| document.getElementById('exportDiversityBtn').addEventListener('click', function() { | |
| const data = chartData.diversity.labels.map((label, i) => ({ | |
| SNP: label, | |
| 'Shannon Index': chartData.diversity.values[i] | |
| })); | |
| exportToExcel(data, "Diversity", "Diversity_Metrics"); | |
| }); | |
| document.getElementById('exportAdmixtureBtn').addEventListener('click', function() { | |
| const data = chartData.admixture.labels.map((label, i) => ({ | |
| 'Ancestry Group': label, | |
| Percentage: chartData.admixture.values[i] | |
| })); | |
| exportToExcel(data, "Admixture", "Admixture_Data"); | |
| }); | |
| document.getElementById('exportHeteroBtn').addEventListener('click', function() { | |
| const data = chartData.heterozygosity.labels.map((label, i) => ({ | |
| SNP: label, | |
| 'Case Heterozygosity': chartData.heterozygosity.caseValues[i], | |
| 'Control Heterozygosity': chartData.heterozygosity.controlValues[i] | |
| })); | |
| exportToExcel(data, "Heterozygosity", "Heterozygosity_Data"); | |
| }); | |
| document.getElementById('exportSnpBtn').addEventListener('click', function() { | |
| const data = chartData.snpDistribution.labels.map((label, i) => ({ | |
| SNP: label, | |
| 'Case Frequency': chartData.snpDistribution.caseValues[i], | |
| 'Control Frequency': chartData.snpDistribution.controlValues[i] | |
| })); | |
| exportToExcel(data, "SNP Distribution", "SNP_Distribution"); | |
| }); | |
| </script> | |
| </body> | |
| </html> |