Added in radar plots to maps and scatter position plot - drafts

steps39 · May 14, 2024 · f798b65 · f798b65
1 parent c195ea3
commit f798b65
Show file tree

Hide file tree

Showing 4 changed files with 408 additions and 86 deletions.
diff --git a/SedimentDataExplorer.html b/SedimentDataExplorer.html
@@ -15,7 +15,7 @@
 
 <body>
     <div id="everything" style="display: none;">
-        <h1>Sediment Template Data Explorer - v0.20240307</h1>
+        <h1>Sediment Template Data Explorer - v0.20240514</h1>
         Excel files -
         <input type="file" id="fileInput" multiple onchange="importData()"> <!-- Allow multiple file selection -->
         <input type="text" id="urlInput" placeholder="Enter comma-separated URLs" onchange="importData()">
@@ -90,6 +90,8 @@ <h2>Select Chemicals</h2>
             <label for="samplegroup">Group by sample</label>
             <input type="checkbox" id="chemicalgroup" checked>
             <label for="chemicalgroup">Group by chemical</label>
+            <input type="checkbox" id="positionplace" checked>
+            <label for="positionplace">Plot by position</label>
             <input type="checkbox" id="gorhamtest" checked>
             <label for="gorhamtest">PAH - Gorham Test Protocol</label>
             <input type="checkbox" id="totalHC" checked>
@@ -134,7 +136,8 @@ <h2>Select Chemicals</h2>
         <input type="text" id="urlLoad" placeholder="Enter URL" onchange="loadSnapShotURL()">
     </div>
     <div id="chartContainer"></div>
-    <div id="map" style="height: 400px;"></div>
+    <div id="map" style="height: 800px;"></div>
+    Radar Popup: <div id="radarPlots"></div>
     <div id="fileDisplay"></div>
     <div id="sample-info-table-container"></div>
     <div id="chartsForMapContainer"></div>

diff --git a/SedimentDataExplorer.js b/SedimentDataExplorer.js
@@ -1,5 +1,5 @@
     let testOne = {};
-    let TEST = false;
+    let radarPlot = "None";
 //		import {parse, stringify, toJSON, fromJSON} from 'flatted';
     const autocolors = window['chartjs-plugin-autocolors'];
     Chart.register(autocolors);
@@ -20,6 +20,7 @@
     let lastInstanceNo = 0;
     let noInstances = 16;
     let chartInstance = [];
+    let popupInstance = [];
     let instanceType = [];
     let instanceSheet = [];
     let highlighted = [];
@@ -42,7 +43,7 @@
         sheetName = dataSheetNames[i];
         sheetsToDisplay[sheetName] = true;
     }
-    subChartNames = ['samplegroup','chemicalgroup','gorhamtest','totalHC','pahratios','ringfractions','eparatios','simpleratios','congenertest']
+    subChartNames = ['samplegroup','chemicalgroup','positionplace','gorhamtest','totalHC','pahratios','ringfractions','eparatios','simpleratios','congenertest']
     subsToDisplay = {};
     for (i = 0; i < subChartNames.length; i++) {
         subName = subChartNames[i];
@@ -107,6 +108,36 @@
 
     firstTime = true;
 
+    const ccontainer = document.getElementById('radarPlots');
+radarPlotTypes = dataSheetNames;
+radarPlotTypes[0] = "None";
+    radarPlotTypes.forEach((name, index) => {
+        const radio = document.createElement('input');
+        radio.type = 'radio';
+        radio.id = `radio${index}`;
+        radio.name = 'dataSheet';
+        radio.value = name;
+        if (name === "None") {
+            radio.checked = true;
+        } /*else {
+            radio.checked = false;
+        }*/
+        const label = document.createElement('label');
+        label.htmlFor = `radio${index}`;
+        label.appendChild(document.createTextNode(name));
+
+        // Attach event listener to each radio button
+        radio.addEventListener('change', function() {
+            if (this.checked) {
+                radarPlot = this.value; // Set radarPlot to the selected value
+                console.log('Selected radar plot:', radarPlot);
+            }
+        });
+
+        ccontainer.appendChild(radio);
+        ccontainer.appendChild(label);
+    });
+
     importData();
 
     function saveSnapShot() {
@@ -1202,7 +1233,11 @@ function createToggleLinLogButton(chart,instanceNo) {
     const container = document.getElementById('chartContainer');
     const button = document.createElement('button');
     button.id = 'buttono'+instanceNo
-    button.textContent = 'Y Log';
+    if (!ylinlog[instanceNo]) {
+        button.textContent = 'Y Log';
+    } else {
+        button.textContent = 'Y Lin';
+    }
     button.addEventListener('click', () => {
         if (ylinlog[instanceNo]) {
             chartInstance[instanceNo].options.scales.y.type = 'linear';
@@ -1224,7 +1259,11 @@ function createStackedButton(chart,instanceNo) {
     const container = document.getElementById('chartContainer');
     const button = document.createElement('button');
     button.id = 'buttons'+instanceNo
-    button.textContent = 'Stack';
+    if (!stacked[instanceNo]) {
+        button.textContent = 'Stack';
+    } else {
+        button.textContent = 'Unstack';
+    }
     button.addEventListener('click', () => {
         if (stacked[instanceNo]) {
             chartInstance[instanceNo].options.scales.x.stacked = false;