tyler.durden/pandorafms
1
0
Fork 0
mirror of https://github.com/pandorafms/pandorafms.git synced 2025-07-28 08:14:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

Convert the functionality to export data from the charts to a flot plugin library.

Browse Source
This commit is contained in:
m-lopez-f 2016-09-07 13:21:27 +02:00
parent 3f29875313
commit ef10b22920
3 changed files with 586 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

400
pandora_console/include/graphs/flot/jquery.flot.exportdata.pandora.js Normal file
View File

@ -0,0 +1,400 @@
(function ($) {
var options = {
export: {
export_data: false, // or true
labels_long: null,
homeurl: ''
}
};
function init(plot) {
plot.exportDataCSV = function (args) {
//amount = plot.getOptions().export.type,
//options = options || {};
// Options
var type = 'csv';
type = type.toLowerCase().trim();
var graphData,
dataObject,
dataObjects = plot.getData(),
result = [];
// Throw errors
var retrieveDataOject = function (dataObjects) {
var result;
if (typeof dataObjects === 'undefined')
throw new Error('Empty parameter');
// Try to retrieve the avg set (not 100% reliable, I know)
if (dataObjects.length == 1) {
result = dataObjects.shift();
}
if (dataObjects.length > 1) {
dataObjects.forEach(function (element) {
if (/^Avg.:/i.test(element.label))
result = element;
});
// If the avg set is missing, retrieve the first set
if (typeof result === 'undefined')
result = dataObjects.shift();
}
if (typeof result === 'undefined')
throw new Error('Empty result');
return result;
}
// Throw errors
var processDataObject = function (dataObject) {
var result;
if (typeof dataObject === 'undefined')
throw new Error('Empty parameter');
if (typeof dataObject.data === 'undefined'
|| !(dataObject.data instanceof Array))
throw new Error('Object malformed');
/* {
* head: [<column>,<column>,...,<column>],
* data: [
* [<data>,<data>,...,<data>],
* [<data>,<data>,...,<data>],
* ...,
* [<data>,<data>,...,<data>],
* ]
* }
*/
if (type === 'csv') {
result = {
head: ['date', 'value','label'],
data: []
};
dataObject.data.forEach(function (item, index) {
var date = '', value = item[1];
// Long labels are preferred
if (typeof plot.getOptions().export.labels_long[index] !== 'undefined')
date = plot.getOptions().export.labels_long[index];
else if (typeof labels[index] !== 'undefined')
date = labels[index];
result.data.push([date, value,dataObject.label]);
});
}
/* [
* {
* 'date': <date>,
* 'value': <value>
* }
* ],
* [
* {
* 'date': <date>,
* 'value': <value>
* }
* ],
* ...,
* [
* {
* 'date': <date>,
* 'value': <value>
* }
* ]
*/
else if (type === 'json') {
result = [];
dataObject.data.forEach(function (item, index) {
var date = '', value = item[1];
// Long labels are preferred
if (typeof labels_long[index] !== 'undefined')
date = labels_long[index];
else if (typeof labels[index] !== 'undefined')
date = labels[index];
result.push({
'date': date,
'value': value,
'label': dataObject.label
});
});
}
if (typeof result === 'undefined')
throw new Error('Empty result');
return result;
}
try {
var elements = [];
var custom_graph = $('input:hidden[name=custom_graph]').value;
if (custom_graph) {
dataObject = retrieveDataOject(dataObjects);
dataObjects.forEach(function (element) {
elements.push(processDataObject(element));
});
graphData = elements;
}
else {
dataObject = retrieveDataOject(dataObjects);
elements.push(processDataObject(dataObject));
graphData = elements;
}
// Transform the object data into a string
// cause PHP has limitations in the number
// of POST params received.
var graphDataStr = JSON.stringify(graphData);
// Build form
var $form = $('<form></form>'),
$dataInput = $('<input>'),
$typeInput = $('<input>'),
$separatorInput = $('<input>'),
$excelInput = $('<input>');
$dataInput
.prop('name', 'data')
.prop('type', 'text')
.prop('value', graphDataStr);
$typeInput
.prop('name', 'type')
.prop('type', 'text')
.prop('value', type);
$separatorInput
.prop('name', 'separator')
.prop('type', 'text')
.prop('value', ';');
$excelInput
.prop('name', 'excel_encoding')
.prop('type', 'text')
.prop('value', 0);
$form
.prop('method', 'POST')
.prop('action', plot.getOptions().export.homeurl + '/include/graphs/export_data.php')
.append($dataInput, $typeInput, $separatorInput, $excelInput)
.hide()
// Firefox made me write into the DOM for this :(
.appendTo('body')
.submit();
}
catch (e) {
alert('There was an error exporting the data');
console.log(e);
}
}
plot.exportDataJSON = function (args) {
//amount = plot.getOptions().export.type,
//options = options || {};
// Options
var type = 'json';
type = type.toLowerCase().trim();
var graphData,
dataObject,
dataObjects = plot.getData(),
result = [];
// Throw errors
var retrieveDataOject = function (dataObjects) {
var result;
if (typeof dataObjects === 'undefined')
throw new Error('Empty parameter');
// Try to retrieve the avg set (not 100% reliable, I know)
if (dataObjects.length == 1) {
result = dataObjects.shift();
}
if (dataObjects.length > 1) {
dataObjects.forEach(function (element) {
if (/^Avg.:/i.test(element.label))
result = element;
});
// If the avg set is missing, retrieve the first set
if (typeof result === 'undefined')
result = dataObjects.shift();
}
if (typeof result === 'undefined')
throw new Error('Empty result');
return result;
}
// Throw errors
var processDataObject = function (dataObject) {
var result;
if (typeof dataObject === 'undefined')
throw new Error('Empty parameter');
if (typeof dataObject.data === 'undefined'
|| !(dataObject.data instanceof Array))
throw new Error('Object malformed');
/* {
* head: [<column>,<column>,...,<column>],
* data: [
* [<data>,<data>,...,<data>],
* [<data>,<data>,...,<data>],
* ...,
* [<data>,<data>,...,<data>],
* ]
* }
*/
if (type === 'csv') {
result = {
head: ['date', 'value','label'],
data: []
};
dataObject.data.forEach(function (item, index) {
var date = '', value = item[1];
// Long labels are preferred
if (typeof plot.getOptions().export.labels_long[index] !== 'undefined')
date = plot.getOptions().export.labels_long[index];
else if (typeof labels[index] !== 'undefined')
date = labels[index];
result.data.push([date, value,dataObject.label]);
});
}
/* [
* {
* 'date': <date>,
* 'value': <value>
* }
* ],
* [
* {
* 'date': <date>,
* 'value': <value>
* }
* ],
* ...,
* [
* {
* 'date': <date>,
* 'value': <value>
* }
* ]
*/
else if (type === 'json') {
result = [];
dataObject.data.forEach(function (item, index) {
var date = '', value = item[1];
// Long labels are preferred
if (typeof labels_long[index] !== 'undefined')
date = labels_long[index];
else if (typeof labels[index] !== 'undefined')
date = labels[index];
result.push({
'date': date,
'value': value,
'label': dataObject.label
});
});
}
if (typeof result === 'undefined')
throw new Error('Empty result');
return result;
}
try {
var elements = [];
var custom_graph = $('input:hidden[name=custom_graph]').value;
if (custom_graph) {
dataObject = retrieveDataOject(dataObjects);
dataObjects.forEach(function (element) {
elements.push(processDataObject(element));
});
graphData = elements;
}
else {
dataObject = retrieveDataOject(dataObjects);
elements.push(processDataObject(dataObject));
graphData = elements;
}
// Transform the object data into a string
// cause PHP has limitations in the number
// of POST params received.
var graphDataStr = JSON.stringify(graphData);
// Build form
var $form = $('<form></form>'),
$dataInput = $('<input>'),
$typeInput = $('<input>'),
$separatorInput = $('<input>'),
$excelInput = $('<input>');
$dataInput
.prop('name', 'data')
.prop('type', 'text')
.prop('value', graphDataStr);
$typeInput
.prop('name', 'type')
.prop('type', 'text')
.prop('value', type);
$separatorInput
.prop('name', 'separator')
.prop('type', 'text')
.prop('value', ';');
$excelInput
.prop('name', 'excel_encoding')
.prop('type', 'text')
.prop('value', 0);
$form
.prop('method', 'POST')
.prop('action', plot.getOptions().export.homeurl + '/include/graphs/export_data.php')
.append($dataInput, $typeInput, $separatorInput, $excelInput)
.hide()
// Firefox made me write into the DOM for this :(
.appendTo('body')
.submit();
}
catch (e) {
alert('There was an error exporting the data');
console.log(e);
}
}
}
$.plot.plugins.push({
init: init,
options: options,
name: 'exportdata',
version: '0.1'
});
})(jQuery);

349
pandora_console/include/graphs/flot/pandora.flot.js
View File

@ -1517,6 +1517,11 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend,
}, },
crosshair: { mode: 'xy' }, crosshair: { mode: 'xy' },
selection: { mode: 'x', color: '#777' }, selection: { mode: 'x', color: '#777' },
export: {
export_data: true,
labels_long: labels_long,
homeurl: homeurl
},
grid: { grid: {
hoverable: true, hoverable: true,
clickable: true, clickable: true,
@ -1855,195 +1860,195 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend,
// Used to export the graph data to a file. // Used to export the graph data to a file.
// Uses plot, labels and labels_long as scope variables. // Uses plot, labels and labels_long as scope variables.
function exportData (options) { //~ function exportData (options) {
options = options || {}; //~ options = options || {};
// Options //~ // Options
var type = options.type || 'csv'; //~ var type = options.type || 'csv';
type = type.toLowerCase().trim(); //~ type = type.toLowerCase().trim();
var graphData, //~ var graphData,
dataObject, //~ dataObject,
dataObjects = plot.getData(), //~ dataObjects = plot.getData(),
result = []; //~ result = [];
// Throw errors //~ // Throw errors
var retrieveDataOject = function (dataObjects) { //~ var retrieveDataOject = function (dataObjects) {
var result; //~ var result;
if (typeof dataObjects === 'undefined') //~ if (typeof dataObjects === 'undefined')
throw new Error('Empty parameter'); //~ throw new Error('Empty parameter');
// Try to retrieve the avg set (not 100% reliable, I know) //~ // Try to retrieve the avg set (not 100% reliable, I know)
if (dataObjects.length == 1) { //~ if (dataObjects.length == 1) {
result = dataObjects.shift(); //~ result = dataObjects.shift();
} //~ }
if (dataObjects.length > 1) { //~ if (dataObjects.length > 1) {
dataObjects.forEach(function (element) { //~ dataObjects.forEach(function (element) {
if (/^Avg.:/i.test(element.label)) //~ if (/^Avg.:/i.test(element.label))
result = element; //~ result = element;
}); //~ });
// If the avg set is missing, retrieve the first set //~ // If the avg set is missing, retrieve the first set
if (typeof result === 'undefined') //~ if (typeof result === 'undefined')
result = dataObjects.shift(); //~ result = dataObjects.shift();
} //~ }
if (typeof result === 'undefined') //~ if (typeof result === 'undefined')
throw new Error('Empty result'); //~ throw new Error('Empty result');
return result; //~ return result;
} //~ }
// Throw errors //~ // Throw errors
var processDataObject = function (dataObject) { //~ var processDataObject = function (dataObject) {
var result; //~ var result;
if (typeof dataObject === 'undefined') //~ if (typeof dataObject === 'undefined')
throw new Error('Empty parameter'); //~ throw new Error('Empty parameter');
if (typeof dataObject.data === 'undefined' //~ if (typeof dataObject.data === 'undefined'
|| !(dataObject.data instanceof Array)) //~ || !(dataObject.data instanceof Array))
throw new Error('Object malformed'); //~ throw new Error('Object malformed');
/* { //~ /* {
* head: [<column>,<column>,...,<column>], //~ * head: [<column>,<column>,...,<column>],
* data: [ //~ * data: [
* [<data>,<data>,...,<data>], //~ * [<data>,<data>,...,<data>],
* [<data>,<data>,...,<data>], //~ * [<data>,<data>,...,<data>],
* ..., //~ * ...,
* [<data>,<data>,...,<data>], //~ * [<data>,<data>,...,<data>],
* ] //~ * ]
* } //~ * }
*/ //~ */
if (type === 'csv') { //~ if (type === 'csv') {
result = { //~ result = {
head: ['date', 'value','label'], //~ head: ['date', 'value','label'],
data: [] //~ data: []
}; //~ };
dataObject.data.forEach(function (item, index) { //~ dataObject.data.forEach(function (item, index) {
var date = '', value = item[1]; //~ var date = '', value = item[1];
// Long labels are preferred //~ // Long labels are preferred
if (typeof labels_long[index] !== 'undefined') //~ if (typeof labels_long[index] !== 'undefined')
date = labels_long[index]; //~ date = labels_long[index];
else if (typeof labels[index] !== 'undefined') //~ else if (typeof labels[index] !== 'undefined')
date = labels[index]; //~ date = labels[index];
result.data.push([date, value,dataObject.label]); //~ result.data.push([date, value,dataObject.label]);
}); //~ });
} //~ }
/* [ //~ /* [
* { //~ * {
* 'date': <date>, //~ * 'date': <date>,
* 'value': <value> //~ * 'value': <value>
* } //~ * }
* ], //~ * ],
* [ //~ * [
* { //~ * {
* 'date': <date>, //~ * 'date': <date>,
* 'value': <value> //~ * 'value': <value>
* } //~ * }
* ], //~ * ],
* ..., //~ * ...,
* [ //~ * [
* { //~ * {
* 'date': <date>, //~ * 'date': <date>,
* 'value': <value> //~ * 'value': <value>
* } //~ * }
* ] //~ * ]
*/ //~ */
else if (type === 'json') { //~ else if (type === 'json') {
result = []; //~ result = [];
dataObject.data.forEach(function (item, index) { //~ dataObject.data.forEach(function (item, index) {
var date = '', value = item[1]; //~ var date = '', value = item[1];
// Long labels are preferred //~ // Long labels are preferred
if (typeof labels_long[index] !== 'undefined') //~ if (typeof labels_long[index] !== 'undefined')
date = labels_long[index]; //~ date = labels_long[index];
else if (typeof labels[index] !== 'undefined') //~ else if (typeof labels[index] !== 'undefined')
date = labels[index]; //~ date = labels[index];
result.push({ //~ result.push({
'date': date, //~ 'date': date,
'value': value, //~ 'value': value,
'label': dataObject.label //~ 'label': dataObject.label
}); //~ });
}); //~ });
} //~ }
if (typeof result === 'undefined') //~ if (typeof result === 'undefined')
throw new Error('Empty result'); //~ throw new Error('Empty result');
return result; //~ return result;
} //~ }
try { //~ try {
var elements = []; //~ var elements = [];
var custom_graph = $('input:hidden[name=custom_graph]').value; //~ var custom_graph = $('input:hidden[name=custom_graph]').value;
if (custom_graph) { //~ if (custom_graph) {
dataObject = retrieveDataOject(dataObjects); //~ dataObject = retrieveDataOject(dataObjects);
dataObjects.forEach(function (element) { //~ dataObjects.forEach(function (element) {
elements.push(processDataObject(element)); //~ elements.push(processDataObject(element));
}); //~ });
graphData = elements; //~ graphData = elements;
} //~ }
else { //~ else {
dataObject = retrieveDataOject(dataObjects); //~ dataObject = retrieveDataOject(dataObjects);
elements.push(processDataObject(dataObject)); //~ elements.push(processDataObject(dataObject));
graphData = elements; //~ graphData = elements;
} //~ }
// Transform the object data into a string //~ // Transform the object data into a string
// cause PHP has limitations in the number //~ // cause PHP has limitations in the number
// of POST params received. //~ // of POST params received.
var graphDataStr = JSON.stringify(graphData); //~ var graphDataStr = JSON.stringify(graphData);
// Build form //~ // Build form
var $form = $('<form></form>'), //~ var $form = $('<form></form>'),
$dataInput = $('<input>'), //~ $dataInput = $('<input>'),
$typeInput = $('<input>'), //~ $typeInput = $('<input>'),
$separatorInput = $('<input>'), //~ $separatorInput = $('<input>'),
$excelInput = $('<input>'); //~ $excelInput = $('<input>');
$dataInput //~ $dataInput
.prop('name', 'data') //~ .prop('name', 'data')
.prop('type', 'text') //~ .prop('type', 'text')
.prop('value', graphDataStr); //~ .prop('value', graphDataStr);
$typeInput //~ $typeInput
.prop('name', 'type') //~ .prop('name', 'type')
.prop('type', 'text') //~ .prop('type', 'text')
.prop('value', type); //~ .prop('value', type);
$separatorInput //~ $separatorInput
.prop('name', 'separator') //~ .prop('name', 'separator')
.prop('type', 'text') //~ .prop('type', 'text')
.prop('value', ';'); //~ .prop('value', ';');
$excelInput //~ $excelInput
.prop('name', 'excel_encoding') //~ .prop('name', 'excel_encoding')
.prop('type', 'text') //~ .prop('type', 'text')
.prop('value', 0); //~ .prop('value', 0);
$form //~ $form
.prop('method', 'POST') //~ .prop('method', 'POST')
.prop('action', homeurl + '/include/graphs/export_data.php') //~ .prop('action', homeurl + '/include/graphs/export_data.php')
.append($dataInput, $typeInput, $separatorInput, $excelInput) //~ .append($dataInput, $typeInput, $separatorInput, $excelInput)
.hide() //~ .hide()
// Firefox made me write into the DOM for this :( //~ // Firefox made me write into the DOM for this :(
.appendTo('body') //~ .appendTo('body')
.submit(); //~ .submit();
} //~ }
catch (e) { //~ catch (e) {
alert('There was an error exporting the data'); //~ alert('There was an error exporting the data');
console.log(e); //~ console.log(e);
} //~ }
} //~ }
// Prepared to turn series with a checkbox // Prepared to turn series with a checkbox
//~ $('.check_serie_'+graph_id).click(function() { //~ $('.check_serie_'+graph_id).click(function() {
@ -2059,13 +2064,27 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend,
$('#overview_' + graph_id).toggle(); $('#overview_' + graph_id).toggle();
}); });
$('#menu_export_csv_' + graph_id).click(function() { //~ $('#menu_export_csv_' + graph_id).click(function() {
exportData({ type: 'csv' }); //~ exportData({ type: 'csv' });
}); //~ });
$('#menu_export_json_' + graph_id).click(function() { $("#menu_export_csv_"+graph_id)
exportData({ type: 'json' }); .click(function (event) {
event.preventDefault();
plot.exportDataCSV();
}); });
//Not a correct call
//~ $('#menu_export_json_' + graph_id).click(function() {
//~ exportData({ type: 'json' });
//~ });
//This is a correct call to export data in json
//~ $("#menu_export_json_"+graph_id)
//~ .click(function (event) {
//~ event.preventDefault();
//~ plot.exportDataJSON();
//~ });
$('#menu_threshold_' + graph_id).click(function() { $('#menu_threshold_' + graph_id).click(function() {
datas = new Array(); datas = new Array();

2
pandora_console/include/graphs/functions_flot.php
View File

@ -50,6 +50,8 @@ function include_javascript_dependencies_flot_graph($return = false) {
ui_get_full_url($metaconsole_hack . '/include/graphs/flot/jquery.flot.threshold.js') .'"></script> ui_get_full_url($metaconsole_hack . '/include/graphs/flot/jquery.flot.threshold.js') .'"></script>
<script language="javascript" type="text/javascript" src="'. <script language="javascript" type="text/javascript" src="'.
ui_get_full_url($metaconsole_hack . '/include/graphs/flot/jquery.flot.symbol.min.js') .'"></script> ui_get_full_url($metaconsole_hack . '/include/graphs/flot/jquery.flot.symbol.min.js') .'"></script>
<script language="javascript" type="text/javascript" src="'.
ui_get_full_url($metaconsole_hack . '/include/graphs/flot/jquery.flot.exportdata.pandora.js') .'"></script>
<script language="javascript" type="text/javascript" src="'. <script language="javascript" type="text/javascript" src="'.
ui_get_full_url($metaconsole_hack . '/include/graphs/flot/pandora.flot.js') .'"></script>'; ui_get_full_url($metaconsole_hack . '/include/graphs/flot/pandora.flot.js') .'"></script>';
$output .= " $output .= "