Plot in sample report (XRD), no labels

js/ds.js

@@ -135,7 +135,11 @@ DataSpace.renderReport = async function (report,  archesJson, images)
         const spectra = report.resource['Analysis Spectra'][0];
         const rawData = await this.fetchFileUrl(spectra['Spectrum Raw Data']);
 
-        plot([[1, 2, 3, 4, 5], [1, 2, 4, 8, 16]], 'plot');
+        plot(
+            await fetch(rawData).then(res => res.text()),
+            spectra['Spectrum Technique'],
+            'plot'
+        );
 
      }
 }
@@ -179,13 +183,11 @@ DataSpace.renderAnalysisReport = async function (resource, type)
         if (photos[key] !== '') {
             const imgUrl = await this.fetchFileUrl(photos[key]);
             html += `
-                <div class="column col-3">
-                    <p class="text-bold text-right pl-2">${key.replace('Analysis Photos', '')}</p>
-                </div>
-                <div class="column col-4 pl-2">
+                <div class="column col-6 pl-2">
+                    <p class="text-bold pl-2">${key.replace('Analysis Photos', '')}</p>
                     <img class="img-responsive c-hand spotlight p-2" src="${imgUrl}" />
                 </div>
-                <div class="column col-5"></div>
+                <div class="column col-6"></div>
             `;
         }
     }
@@ -197,7 +199,7 @@ DataSpace.renderAnalysisReport = async function (resource, type)
     `;
 
     html += `
-        <div id="plot" class="column col-12 mt-2">
+        <div id="plot" class="column col-8 mt-2">
         </div>
     `;
 

js/plot.js

@@ -1,35 +1,59 @@
-const spectra = {
-    'XRD' : processXRD,
+'use strict';
+// ********************************
+// NOTE: expects plotly.js to be
+// included via script tag in HTML
+// ********************************
+
+const processXRD = rawData => {
+    const sep = rawData.includes('\r') ? '\r': '\n';
+    const axes = rawData.split(sep)
+        .map(r => r.replace('\n', '')
+        .split(/[\s,]+/));
+
+    let x = [], y = [];
+
+    for (const value of axes) {
+        x.push(value[0]);
+        y.push(value[1]);
+    }
+
+    return [x, y];
+};
+
+const processXRF = rawData => {
+    // Do stuff...
+};
+
+const techniques = {
+    'XRD' : {
+        process : processXRD,
+        plot_type : 'XRD Diffractometer',
+        x_title : '2Theta (°)',
+        y_title : 'Intensity (Counts)',
+    },
     'XRF' : processXRF,
 };
 /**
  * @todo process rawData and check spectrum type?
  * @param {string} rawData
- * @param {HTMLDivElement} container
+ * @param {string} technique XRD, XRF
+ * @param {string} containerId
  *
  * @returns {void}
  */
-export function plot(rawData, containerId)
+export function plot(rawData, technique, containerId)
 {
     let container = document.querySelector(`#${containerId}`);
-
-    console.log(rawData[1]);
+    const spectrumType = techniques[technique];
+    const processed = spectrumType.process(rawData);
 
     Plotly.newPlot(container, 
         [{
-            x: rawData[0],
-            y: rawData[1],
+            x: processed[0],
+            y: processed[1],
         }],
         {
             margin: {t: 0}
         }
     );
 }
-
-const processXRD = rawData => {
-    // Do stuff...
-};
-
-const processXRF = rawData => {
-    // Do stuff...
-};