From cb636d7b899f9c501d312bfedc38d2242b16a4f1 Mon Sep 17 00:00:00 2001 From: steps39 Date: Mon, 4 Mar 2024 22:27:01 +0000 Subject: [PATCH] Added in ability to sort data for chemical properties, initially only PAHs --- SedimentDataExplorer.html | 10 +++- SedimentDataExplorer.js | 101 ++++++++++++++++++++++++++++++++++++-- sdeCharts.js | 28 ++++++++++- 3 files changed, 134 insertions(+), 5 deletions(-) diff --git a/SedimentDataExplorer.html b/SedimentDataExplorer.html index 321b9f4..f43b445 100644 --- a/SedimentDataExplorer.html +++ b/SedimentDataExplorer.html @@ -101,7 +101,7 @@

Select Chemicals

- + + + + + + Status - diff --git a/SedimentDataExplorer.js b/SedimentDataExplorer.js index bf067d2..e6a96f6 100644 --- a/SedimentDataExplorer.js +++ b/SedimentDataExplorer.js @@ -56,6 +56,7 @@ let selectedSampleInfo = {}; let blankMeasurements = {}; let namedLocations = {}; + let chemInfo = {}; //All actions level mg/kg const actionLevels = {}; actionLevels['Trace metal data'] = { @@ -200,6 +201,94 @@ } } + function importChemInfo() { + urls = {}; +console.log('importChemInfo'); + if (firstTime) { + firstTime = false; + files = {}; + // Get the current URL + const currentURL = window.location.href; + + // Parse the URL to get the search parameters + const suppliedParams = new URLSearchParams(window.location.search); + + // Get the value of the 'cheminfo' parameter + const cheminfoParam = suppliedParams.get('cheminfo'); + if (!cheminfoParam) { + return; + } else { + urls = cheminfoParam.split(',').map(url => url.trim()); // Split comma-separated URLs + } + } else { + const fileInput = document.getElementById('fileChemInfo'); + const urlInput = document.getElementById('urlChemInfo'); + const files = fileInput.files; // Files is now a FileList object containing multiple files + const urls = urlInput.value.trim().split(',').map(url => url.trim()); // Split comma-separated URLs + + if (files.length === 0 && urls.length === 0) { + alert('Please select files or enter URLs.'); + return; + } + // Process files + for (let i = 0; i < files.length; i++) { + filename = files[i].name; + const reader = new FileReader(); + reader.onload = function (e) { + const data = new Uint8Array(e.target.result); + processExcelChemInfo(data,filename); + }; + reader.readAsArrayBuffer(files[i]); + } + } + // Process URLs only if URLs are supplied + if (urls.length > 0) { + urls.forEach(url => { + // Check if the URL is a valid URL before fetching + if (!/^https?:\/\//i.test(url)) { + console.error('Invalid URL:', url); + return; + } + + fetch(url) + .then(response => response.arrayBuffer()) + .then(data => { + processExcelChemInfo(new Uint8Array(data),url); + }) + .catch(error => { + console.error('Error fetching the chemInfo file:', error); + }); + }); + } + // Clear the input field after reading locations + fileInput.value = ''; + urlInput.value = ''; + } + + function processExcelChemInfo(data,url) { + // Based on simple Excel data in first sheet + // row 1 column titles + // column 1 compound name + // column 2 - n property + const workbook = XLSX.read(data, { type: 'array' }); +//console.log(workbook); + sheetData = workbook.Sheets['Sheet1']; +//console.log(sheetData); + const df = XLSX.utils.sheet_to_json(sheetData, { header: 1 }); + for (let r = 1; r < df.length; r++) { + const chemical = df[r][0]; + chemInfo[chemical] = {}; + for (let c = 1; c < df[r].length; c++) { + const property = df[0][c]; + chemInfo[chemical][property] = df[r][c]; + } +console.log(chemInfo[chemical]); + } +console.log('End of processChemInfo'); + } + + + function importLocations() { urls = {}; if (firstTime) { @@ -1086,16 +1175,18 @@ function createToggleLegendButton(chart,instanceNo) { const container = document.getElementById('chartContainer'); const button = document.createElement('button'); button.id = 'buttonl'+instanceNo - button.textContent = 'Toggle legend'; + button.textContent = 'Legend'; button.addEventListener('click', () => { if (legends[instanceNo]) { chartInstance[instanceNo].options.plugins.legend.display = false; chartInstance[instanceNo].update(); legends[instanceNo] = false; + button.innerHTML = 'Legend'; } else { chartInstance[instanceNo].options.plugins.legend.display = true; chartInstance[instanceNo].update(); legends[instanceNo] = true; + button.innerHTML = 'No Legend'; } // chart.resetZoom(); }); @@ -1107,16 +1198,18 @@ function createToggleLinLogButton(chart,instanceNo) { const container = document.getElementById('chartContainer'); const button = document.createElement('button'); button.id = 'buttono'+instanceNo - button.textContent = 'Toggle y lin/log'; + button.textContent = 'Y Log'; button.addEventListener('click', () => { if (ylinlog[instanceNo]) { chartInstance[instanceNo].options.scales.y.type = 'linear'; chartInstance[instanceNo].update(); ylinlog[instanceNo] = false; + button.innerHTML = 'Y Log'; } else { chartInstance[instanceNo].options.scales.y.type = 'logarithmic'; chartInstance[instanceNo].update(); ylinlog[instanceNo] = true; + button.innerHTML = 'Y Lin'; } }); container.appendChild(button); @@ -1127,18 +1220,20 @@ function createStackedButton(chart,instanceNo) { const container = document.getElementById('chartContainer'); const button = document.createElement('button'); button.id = 'buttons'+instanceNo - button.textContent = 'Toggle stacked'; + button.textContent = 'Stack'; button.addEventListener('click', () => { if (stacked[instanceNo]) { chartInstance[instanceNo].options.scales.x.stacked = false; chartInstance[instanceNo].options.scales.y.stacked = false; chartInstance[instanceNo].update(); stacked[instanceNo] = false; + button.innerHTML = 'Stack'; } else { chartInstance[instanceNo].options.scales.x.stacked = true; chartInstance[instanceNo].options.scales.y.stacked = true; chartInstance[instanceNo].update(); stacked[instanceNo] = true; + button.innerHTML = 'Unstack'; } // chart.resetZoom(); }); diff --git a/sdeCharts.js b/sdeCharts.js index 5174030..81ee7c8 100644 --- a/sdeCharts.js +++ b/sdeCharts.js @@ -45,7 +45,7 @@ function displayCharts(sheetName, instanceNo) { //console.log('unitTitle displayCharts ',unitTitle); selectedMeas = retData['measChart']; -//console.log('selectedMeas ', selectedMeas); +console.log('selectedMeas ', selectedMeas); if (subsToDisplay['samplegroup']) { instanceNo += 1; displaySampleChart(selectedMeas, sheetName, instanceNo, unitTitle); @@ -54,6 +54,29 @@ function displayCharts(sheetName, instanceNo) { instanceNo += 1; displayChemicalChart(selectedMeas, sheetName, instanceNo, unitTitle); } +console.log('About to sort'); + if (sheetName == 'PAH data' && Object.keys(chemInfo).length != 0) { + const chemicalNames = Object.keys(chemInfo); + const properties = Object.keys(chemInfo[chemicalNames[0]]); + for (i = 0; i<5 ; i++) { + + // Step 2: Sort the chemical names based on the property (e.g., molWeight) + chemicalNames.sort((a, b) => chemInfo[a][properties[i]] - chemInfo[b][properties[i]]); + + // Step 3-6: Iterate through the sorted chemical names and populate selectedMeas + const sortedSelectedMeas = {}; + chemicalNames.forEach((chemical) => { + if (selectedMeas[chemical]) { + sortedSelectedMeas[chemical] = selectedMeas[chemical]; + } + }); + console.log(sortedSelectedMeas); + instanceNo += 1; + displaySampleChart(sortedSelectedMeas, sheetName + ': Sorted by ' + properties[i], instanceNo, unitTitle); + instanceNo += 1; + displayChemicalChart(sortedSelectedMeas, sheetName + ': Sorted by ' + properties[i], instanceNo, unitTitle); + } + } if (sheetName === 'PAH data' && subsToDisplay['gorhamtest']) { instanceNo += 1; selectedSums = sumsForGorhamCharting(); @@ -774,6 +797,8 @@ function displayAnyChart(meas, all, datasets, instanceNo, title, yTitle) { }); }); legends[instanceNo] = false; +// ctx.style.width = '10%'; // Set a small width +// ctx.style.height = '10%'; // Set a small height } @@ -796,6 +821,7 @@ const datasets = allSamples.map((sample, index) => { }); displayAnyChart(meas, allChemicals,datasets,instanceNo,sheetName,unitTitle); chartInstance[instanceNo].options.plugins.annotation.annotations = {}; +//chartInstance[instanceNo].resize(600,600); let allal = actionLevels[sheetName];