First plot test
This commit is contained in:
parent
6c1dfaec9d
commit
4b89115af6
@ -73,6 +73,9 @@ table.table td,
|
||||
table.table th {
|
||||
border: none;
|
||||
}
|
||||
.table-sample {
|
||||
max-width: 65%;
|
||||
}
|
||||
#map {
|
||||
height: 500px;
|
||||
}
|
||||
|
37
js/ds.js
37
js/ds.js
@ -1,6 +1,7 @@
|
||||
'use strict';
|
||||
const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNsZmNiZGN0ZTJzbGgzdG8xYnZxOXRvd28ifQ.nvK1VYF6lwPpA094cL83KQ';
|
||||
import * as resmap from './resmap.js';
|
||||
import {plot} from './plot.js';
|
||||
/**
|
||||
* @namespace DataSpace
|
||||
*/
|
||||
@ -10,7 +11,7 @@ DataSpace.BASE_URL = 'http://dataspace.ispc.cnr.it';
|
||||
DataSpace.FE_URL = `${DataSpace.BASE_URL}/custom-fe`;
|
||||
DataSpace.RES_ENDPOINT = '/resources/';
|
||||
DataSpace.FILES_URI = `${DataSpace.BASE_URL}/files/uploadedfiles/`;
|
||||
// TODO maybe these assignments are non needed?
|
||||
// TODO maybe these assignments are not needed?
|
||||
DataSpace.RESOURCE_REPORT = {
|
||||
'Object' : resmap.OBJECT_REPORT,
|
||||
'Context' : resmap.CONTEXT_REPORT,
|
||||
@ -125,10 +126,17 @@ DataSpace.renderReport = async function (report, archesJson, images)
|
||||
this.getRelatedAnalysisId(archesJson)
|
||||
);
|
||||
|
||||
console.log(this.getRelatedAnalysisId(archesJson));
|
||||
|
||||
container.innerHTML += await this.renderAnalysisReport(
|
||||
report.resource,
|
||||
report.displayname
|
||||
);
|
||||
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');
|
||||
|
||||
}
|
||||
}
|
||||
/**
|
||||
@ -142,16 +150,17 @@ DataSpace.renderAnalysisReport = async function (resource, type)
|
||||
{
|
||||
const shape = this.createShape(resource, 'Analysis');
|
||||
let html = `
|
||||
<hr>
|
||||
<div class="column col-12">
|
||||
<h3 class="p-2 text-center">${type.replace(/(\w+\s\w+).*$/,"$1")}</h3>
|
||||
`;
|
||||
|
||||
let table = '<table class="mt-2 table table-hover" style="max-width: 65%">';
|
||||
let table = '<table class="mt-2 table table-hover table-sample">';
|
||||
|
||||
for (const key in shape.get('before-gallery')) {
|
||||
table += `<tr><td class="text-bold key">
|
||||
${key.replace('Analysis', '')}</td>
|
||||
table += `<tr>
|
||||
<td class="text-bold key">
|
||||
${key.replace('Analysis', '')}
|
||||
</td>
|
||||
<td>${resource[key]}</td>
|
||||
</tr>`;
|
||||
}
|
||||
@ -180,6 +189,24 @@ DataSpace.renderAnalysisReport = async function (resource, type)
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
html += `
|
||||
<div class="column col-12 mt-2">
|
||||
<h4 class="pl-2">Spectrum - Raw Data</h4>
|
||||
</div>
|
||||
`;
|
||||
|
||||
html += `
|
||||
<div id="plot" class="column col-12 mt-2">
|
||||
</div>
|
||||
`;
|
||||
|
||||
// TODO plots...
|
||||
const spectra = resource['Analysis Spectra'][0];
|
||||
const rawData = await this.fetchFileUrl(spectra['Spectrum Raw Data']);
|
||||
const interpreted = await this.fetchFileUrl(spectra['Spectrum Interpreted Data']);
|
||||
console.warn(rawData, interpreted);
|
||||
|
||||
return html;
|
||||
}
|
||||
/**
|
||||
|
35
js/plot.js
Normal file
35
js/plot.js
Normal file
@ -0,0 +1,35 @@
|
||||
const spectra = {
|
||||
'XRD' : processXRD,
|
||||
'XRF' : processXRF,
|
||||
};
|
||||
/**
|
||||
* @todo process rawData and check spectrum type?
|
||||
* @param {string} rawData
|
||||
* @param {HTMLDivElement} container
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
export function plot(rawData, containerId)
|
||||
{
|
||||
let container = document.querySelector(`#${containerId}`);
|
||||
|
||||
console.log(rawData[1]);
|
||||
|
||||
Plotly.newPlot(container,
|
||||
[{
|
||||
x: rawData[0],
|
||||
y: rawData[1],
|
||||
}],
|
||||
{
|
||||
margin: {t: 0}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
const processXRD = rawData => {
|
||||
// Do stuff...
|
||||
};
|
||||
|
||||
const processXRF = rawData => {
|
||||
// Do stuff...
|
||||
};
|
@ -9,6 +9,7 @@
|
||||
<link rel="shortcut icon" href="../img/favicon_dataspace.svg" />
|
||||
<script src="../vendor/spotlight.js/dist/spotlight.bundle.js"></script>
|
||||
<script src="../vendor/leaflet/dist/leaflet.js"></script>
|
||||
<script src="../vendor/plotly.js/dist/plotly.min.js"></script>
|
||||
<script src="../js/views/report.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
Loading…
Reference in New Issue
Block a user