Spaces:

BrendonP
/

snp-tracker

Running

App Files Files Community

BrendonP commited on Sep 15

Commit

044d7a0

verified ·

1 Parent(s): 8f20b3f

Export these data charts into excel - Follow Up Deployment

Browse files

Files changed (2) hide show

export.html +161 -0
prompts.txt +2 -1

export.html ADDED Viewed

	@@ -0,0 +1,161 @@

+<!DOCTYPE html>
+<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>

prompts.txt CHANGED Viewed

@@ -73,4 +73,5 @@ C39	Control	2	2	2	4	1	1	1	2	3	3	0	0	2	2	0	0
 C40	Control	1	1	2	4	1	1	1	2	3	3	0	0	2	2	0	0
 Please revise this to reflect the Shannon Index, heterogeneity, and admixture
 Please revise this to reflect the Shannon Index, heterogeneity, and admixture
-The SNP distribution chart is missing data

 C40	Control	1	1	2	4	1	1	1	2	3	3	0	0	2	2	0	0
 Please revise this to reflect the Shannon Index, heterogeneity, and admixture
 Please revise this to reflect the Shannon Index, heterogeneity, and admixture
+The SNP distribution chart is missing data
+Export these data charts into excel