ds-front-test/js/plot.js

99 lines
2.1 KiB
JavaScript

'use strict';
// ********************************
// NOTE: expects plotly.js to be
// included via script tag in HTML
// ********************************
const processXRD = rawData => {
const axes = rawData.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 => {
const axes = rawData.slice(19, -1);
let x = [], y = [];
axes.forEach((val, index) => {
x.push(index);
y.push(val);
});
return [x, y];
};
const processMIR = rawData => {
const axes = rawData.slice(1,);
let x = [], y = [];
for (const value of axes) {
x.push(value[0]);
y.push(value[1]);
}
return [x, y];
};
const techniques = {
'XRD' : {
process : processXRD,
plot_type : 'XRD Diffractometer',
x_title : '2Theta (°)',
y_title : 'Intensity (Counts)',
},
'XRF' : {
process: processXRF,
plot_type : 'XRF Spectrometer',
x_title : 'Energy (keV)',
y_title : 'Intensity (Counts)',
},
'MIR' : {
process: processMIR,
plot_type : 'MIR Spectrum',
x_title : 'X Axis',
y_title : 'Y Axis',
}
};
/**
* @param {string} rawData
* @param {string} technique XRD, XRF
* @param {string} containerId
*
* @returns {void}
*/
export function plot(rawData, technique, containerId)
{
let container = document.querySelector(`#${containerId}`);
const sep = rawData.includes('\r') ? '\r': '\n';
rawData = rawData.split(sep);
const spectrumType = techniques[technique];
const processed = spectrumType.process(rawData);
Plotly.newPlot(
container,
[{
x: processed[0],
y: processed[1],
}],
{
hovermode:'closest',
title: 'Hover with mouse on data points to see annotations',
xaxis: { zeroline : false, title : spectrumType.x_title },
yaxis: { zeroline : false, title : spectrumType.y_title }
},
{
margin: {t: 0}
}
);
}