download-csv-js
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
download-csv-js [2022/05/10 12:09] – [Script] emozolyak | download-csv-js [2023/10/15 18:07] (current) – [Script text] emozolyak | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Example of graph data download with JS for dashbaord | + | ====== Example of graph data download with JS for dashboard |
The standard method of exporting data from graphs to XLS, HTML, CSV files has the resolution of the selected view on the respective graph, not all data - due to performance issues. | The standard method of exporting data from graphs to XLS, HTML, CSV files has the resolution of the selected view on the respective graph, not all data - due to performance issues. | ||
Line 23: | Line 23: | ||
<code javascript> | <code javascript> | ||
- | const DATA = { | + | const DATA = { |
- | | + | TIME: {START: |
- | | + | DOWNLOAD_BTN: |
- | | + | GRAPH_ID: 1, // placeholder for the graph id that |
- | | + | GRAPH_SELECTION_REG: |
}; | }; | ||
- | const MAX_SLICES = 2999; // max number of the slices in the graph data api call | + | const MAX_SLICES |
- | const TIMEOUT = 5e3; | + | TIMEOUT |
- | const START_GRAPH_ID = 1; // start number of the range for graphs ids | + | START_GRAPH_ID = 1, // start number of the range for graphs ids |
- | const END_GRAPH_ID = 2; // end number | + | END_GRAPH_ID |
+ | |||
let _i; | let _i; | ||
- | let preventMultiply = false; | + | var preventMultiply = false, |
- | let dataToSend = {}; | + | dataToSend = {}, |
- | let promises = []; | + | promises = []; |
+ | |||
App.on(' | App.on(' | ||
+ | |||
function triggerUponRegChange(newValuesArray) { | function triggerUponRegChange(newValuesArray) { | ||
- | let ifButtonPressed = newValuesArray.filter(readVal => | + | let ifButtonPressed = (newValuesArray.length > 0) |
- | | + | && |
- | && parseInt(readVal.value) > 0).length > 0; | + | |
+ | | ||
if (ifButtonPressed && !preventMultiply) { | if (ifButtonPressed && !preventMultiply) { | ||
+ | preventMultiply = true; | ||
+ | console.log(' | ||
let selectedGraph = new Register(DATA.GRAPH_SELECTION_REG).getValue(); | let selectedGraph = new Register(DATA.GRAPH_SELECTION_REG).getValue(); | ||
selectedGraph = parseInt(selectedGraph.replace(/ | selectedGraph = parseInt(selectedGraph.replace(/ | ||
DATA.GRAPH_ID = (selectedGraph >= START_GRAPH_ID && selectedGraph <= END_GRAPH_ID) ? selectedGraph : 1; | DATA.GRAPH_ID = (selectedGraph >= START_GRAPH_ID && selectedGraph <= END_GRAPH_ID) ? selectedGraph : 1; | ||
- | | + | |
- | Promise.all(makeApiCall()).then(exportDataAsCSVToBrowser).catch(e => console.log(e)); | + | Promise.all(makeApiCall()) |
+ | | ||
+ | | ||
+ | .finally(() => {preventMultiply = false ; console.log(' | ||
} | } | ||
} | } | ||
- | + | ||
- | function getSlicesFromTS() { | + | |
- | let paramsSet = []; | + | |
- | calcSlices(parseInt(new Register(DATA.TIME.START).getValue()), | + | |
- | | + | |
- | + | ||
- | function calcSlices(s, | + | |
- | if (s > e) { | + | |
- | console.log(' | + | |
- | } | + | |
- | if (e - s <= MAX_SLICES) | + | |
- | paramsSet.push({start: | + | |
- | else { | + | |
- | let newEnd = s + MAX_SLICES - 1; | + | |
- | paramsSet.push({start: | + | |
- | calcSlices(newEnd + 1, e); | + | |
- | } | + | |
- | } | + | |
- | return paramsSet; | + | |
- | } | + | |
function makeApiCall() { | function makeApiCall() { | ||
- | let slicesParams = getSlicesFromTS(); | ||
- | dataToSend = {}; | ||
- | promises = []; | ||
- | preventMultiply = true; | ||
- | setTimeout(function(){clearTimeout(_i); | ||
| | ||
+ | let slicesParams = getSlicesFromTS(); | ||
+ | dataToSend = {}; | ||
+ | promises = []; | ||
+ | |||
slicesParams.forEach(function(paramsSet, | slicesParams.forEach(function(paramsSet, | ||
let promise = new Promise(function(resolve, | let promise = new Promise(function(resolve, | ||
Line 90: | Line 75: | ||
" | " | ||
" | " | ||
- | " | ||
}, | }, | ||
dataType: ' | dataType: ' | ||
Line 105: | Line 89: | ||
promises.push(promise); | promises.push(promise); | ||
}); | }); | ||
- | | + | |
return promises; | return promises; | ||
} | } | ||
+ | |||
function exportDataAsCSVToBrowser() { | function exportDataAsCSVToBrowser() { | ||
let response = []; | let response = []; | ||
Line 128: | Line 112: | ||
rep.push(row); | rep.push(row); | ||
}); | }); | ||
- | | + | |
if (window.navigator.msSaveBlob) { // IE | if (window.navigator.msSaveBlob) { // IE | ||
let blobObject = new Blob([rep.join(" | let blobObject = new Blob([rep.join(" | ||
Line 144: | Line 128: | ||
} | } | ||
+ | function getSlicesFromTS() { | ||
+ | let paramsSet = []; | ||
+ | calcSlices(parseInt(new Register(DATA.TIME.START).getValue()), | ||
+ | | ||
+ | |||
+ | function calcSlices(s, | ||
+ | if (s > e) { | ||
+ | console.log(' | ||
+ | } | ||
+ | if (e - s <= MAX_SLICES) | ||
+ | paramsSet.push({start: | ||
+ | else { | ||
+ | let newEnd = s + MAX_SLICES - 1; | ||
+ | paramsSet.push({start: | ||
+ | calcSlices(newEnd + 1, e); | ||
+ | } | ||
+ | } | ||
+ | return paramsSet; | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | |||
+ | ==== Button release script ==== | ||
+ | |||
+ | Because the dashboard expects the register change be greater than 0, we have to reset this register after each use. | ||
+ | The following script can do that: | ||
+ | <code lua> | ||
+ | BUTTON_REG_ID = 9 | ||
+ | |||
+ | function main (userId) | ||
+ | | ||
+ | local cur_value = R(BUTTON_REG_ID) | ||
+ | | ||
+ | if (not resetDemand and cur_value > 0) then | ||
+ | resetDemand = true -- postpone reset for one scan for JS to detect change | ||
+ | return | ||
+ | end | ||
+ | | ||
+ | if (resetDemand) then | ||
+ | reset(BUTTON_REG_ID) | ||
+ | resetDemand = false | ||
+ | end | ||
+ | | ||
+ | end | ||
+ | |||
+ | function reset(reg) | ||
+ | local cur_value = R(reg) | ||
+ | if cur_value and cur_value ~= 0 then | ||
+ | W(reg, 0) | ||
+ | end | ||
+ | end | ||
</ | </ | ||
download-csv-js.1652184574.txt.gz · Last modified: 2022/05/10 12:09 by emozolyak