download-csv-js
This is an old revision of the document!
Example of graph data download with JS for dashbaord
const DATA = { TIME: {START: 7, END: 8}, DOWNLOAD_BTN: 9, GRAPH_ID: 1, GRAPH_SELECTION_REG: 11 }; const MAX_SLICES = 2999; const TIMEOUT = 5e3; const START_GRAPH_ID = 1; const END_GRAPH_ID = 2; let _i; let preventMultiply = false; let dataToSend = {}; let promises = []; App.on('register:newValue', triggerUponRegChange); function triggerUponRegChange(newValuesArray) { let ifButtonPressed = newValuesArray.filter(readVal => parseInt(readVal.regId) === DATA.DOWNLOAD_BTN && parseInt(readVal.value) > 0).length > 0; if (ifButtonPressed && !preventMultiply) { let selectedGraph = new Register(DATA.GRAPH_SELECTION_REG).getValue(); selectedGraph = parseInt(selectedGraph.replace(/^.*\((\d)\).*$/, (match, p1) => p1)); DATA.GRAPH_ID = (selectedGraph >= START_GRAPH_ID && selectedGraph <= END_GRAPH_ID) ? selectedGraph : 1; Promise.all(makeApiCall()).then(exportDataAsCSVToBrowser).catch(e => console.log(e)); } } function getSlicesFromTS() { let paramsSet = []; calcSlices(parseInt(new Register(DATA.TIME.START).getValue()), parseInt(new Register(DATA.TIME.END).getValue())); function calcSlices(s, e) { if (s > e) { console.log('startTS >= endTS') ; return ; } if (e - s <= MAX_SLICES) paramsSet.push({start:s, end: e, slices: e - s + 1}); else { let newEnd = s + MAX_SLICES - 1; paramsSet.push({start: s, end: newEnd, slices: MAX_SLICES}); calcSlices(newEnd + 1, e); } } return paramsSet; } function makeApiCall() { let slicesParams = getSlicesFromTS(); dataToSend = {}; promises = []; preventMultiply = true; setTimeout(function(){clearTimeout(_i); preventMultiply = false;}, TIMEOUT); slicesParams.forEach(function(paramsSet, i) { let promise = new Promise(function(resolve, reject) { $.ajax({ url: "/api/graph-data/" + DATA.GRAPH_ID, method: "GET", headers: { "X-WH-START": paramsSet.start, "X-WH-END": paramsSet.end, "X-WH-SLICES": paramsSet.slices, "X-WH-REGISTERS": DATA.GRAPH_ID }, dataType: 'json', context: this, success: function (response) { dataToSend[i] = response; resolve(); }, error: function (result, text, error) { reject(text); } }); }); promises.push(promise); }); return promises; } function exportDataAsCSVToBrowser() { let response = []; Object.values(dataToSend).forEach(dataSet => {response = response.concat(dataSet)}); if (response.length > 0) { let rep = []; let header = ['Time']; let regs = WebHMI.graphs[DATA.GRAPH_ID].regs; regs.forEach(function(reg) { let vv = reg.title.replace("\"", "\"\""); header.push('"' + vv + " - Min" + '"'); header.push('"' + vv + " - Avg" + '"'); header.push('"' + vv + " - Max" + '"'); }); rep.push(header); response.forEach(function(dataSet) { let row = [moment(dataSet.x).format("YYYY-MM-DD HH:mm:ss")]; regs.forEach(reg => dataSet[reg.id].split(';').forEach(value => {row.push(value)})); rep.push(row); }); if (window.navigator.msSaveBlob) { // IE let blobObject = new Blob([rep.join("\r\n")]); window.navigator.msSaveBlob(blobObject, WebHMI.graphs[DATA.GRAPH_ID].title + '.csv'); } else { let a = document.createElement('a'); a.href = 'data:attachment/csv,' + encodeURIComponent(rep.join("\r\n")); a.target = '_blank'; a.download = WebHMI.graphs[DATA.GRAPH_ID].title + '.csv'; a.style.visibility = "hidden"; document.body.appendChild(a); a.click(); } } }
download-csv-js.1652182515.txt.gz ยท Last modified: 2022/05/10 11:35 by emozolyak