Snippets
Created by
Piotr Szrajber
last modified
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 | /**
* Creating PDF reports in your BI Smart M.Apps using the PDFMake library http://pdfmake.org
* The PDFMake library is licensed under MIT.
*
* In order to use this snippet you need to add references (EXT in the Studio Customization Step) to the following external scripts
* - "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.33/pdfmake.js",
* - "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.33/vfs_fonts.js"
*
* This script assumes that you have a Custom Widget Container created in the UI with CSS class set to "box-pdf-report".
* This will be the PDF preview box.
* Modify the PDF_WINDOW_CSS_CLASS if your class is different. Take a look at the styling in the CSS part of this snippet!
*
*
* 2017-11-10 Piotr Szrajber <piotr.szrajber@hexagongeospatial.com>
*/
const PDF_WINDOW_CSS_CLASS = ".box-pdf-report"
var $reportWindow;
init();
function init() {
$reportWindow = $(PDF_WINDOW_CSS_CLASS);
$reportWindow.hide();
$reportWindow.find(".widget-chart").html(`
<iframe id="pdfReport1" src=""></iframe>
<div class="pdf-tools">
<button class="download">Download</button>
<button class="save">Save to My Content</button>
</div>
`);
$reportWindowCloseButton = $reportWindow.find("a.hide-content");
$reportWindowCloseButton.off("click");
$reportWindowCloseButton.click(function() {
$reportWindow.hide();
});
// Generate PDF report
gsp.ui.toolbar.add({
id: "new-toolbar-item",
title: "PDF Report",
style: "background-position: 0px 0px;" /* CHANGE_ICON */
}, function(ret) {
ret.div.onclick = generateReport;
});
}
function generateReport() {
gsp.bi.stage.findStage(null, function(stage) {
// open the PDF in a new window
var timestamp = new Date();
var filename = `PDF Report ${timestamp.getHours()} ${timestamp.getMinutes()} ${timestamp.getSeconds()}.PDF`;
var dd = getPdfContent(stage);
var doc = pdfMake.createPdf(dd);
var f = document.getElementById('pdfReport1');
$reportWindow.find("button.download").click(function() {
doc.download(filename);
});
var callback = function(url) {
f.setAttribute('src', url);
}
doc.getDataUrl(callback, doc);
$reportWindow.show();
}, function() {
console.warn("Could not find stage");
});
}
// Prepare PDF content using PDFMake templates
// It's really easy to prepare complex PDFs with the PDFMake Playground http://pdfmake.org/playground.html
function getPdfContent(stage) {
//var burntAreasByLandCover = prepareAggregation(stage, "Desc_Easy", "Land Cover");
//var burntAreasByMunicipality = prepareAggregation(stage, "COMUNE", "COMUNE");
//var burntAreasByFireId = prepareAggregation(stage, "Fire_ID", "Fire ID");
return {
content: [{
text: 'Tables',
style: 'header'
},
'Official documentation is in progress, this document is just a glimpse of what is possible with pdfmake and its layout engine.',
{
text: 'A simple table (no headers, no width specified, no spans, no styling)',
style: 'subheader'
},
'The following table has nothing more than a body array',
{
style: 'tableExample',
table: {
body: [
['Column 1', 'Column 2', 'Column 3'],
['One value goes here', 'Another one here', 'OK?']
]
}
}
],
styles: {
header: {
fontSize: 18,
bold: true,
margin: [0, 0, 0, 10]
},
subheader: {
fontSize: 16,
bold: true,
margin: [0, 10, 0, 5]
},
tableExample: {
margin: [0, 5, 0, 15]
},
tableHeader: {
bold: true,
fontSize: 13,
color: 'black'
}
},
defaultStyle: {
// alignment: 'justify'
}
}
}
// sample aggregations. this is just an example as it really depends on the data model
function prepareAggregation(stage, aggregateBy, title) {
//var allRowsInCurrentSelection = stage.facts().dimension(function(d){
// return d.Object_ID;
//}).top(Infinity);
var firesByDesc = stage.facts().dimension(function(d) {
return [d[aggregateBy], d.Severity];
}); // dimension that splits data according to description and severity
var results = firesByDesc.group(function(a) {
return a;
}).reduce(function(p, v) {
return p + v.Area_ha;
}, function(p, v) {
return p - v.Area_ha;
}, function() {
return 0;
}).top(Infinity);
var resultsAsMatrix = results.reduce(function(acc, v) {
acc[v.key[0]] = acc[v.key[0]] || {};
acc[v.key[0]][v.key[1]] = v.value;
return acc;
}, {});
var tableBody = [
[{
text: title,
style: 'tableHeader'
}, {
text: 'Low Severity',
style: 'tableHeader'
}, {
text: 'Moderate Severity',
style: 'tableHeader'
}, {
text: 'High Severity',
style: 'tableHeader'
}],
];
for (var desc in resultsAsMatrix) {
var s5 = resultsAsMatrix[desc][5] || 0.0;
var s6 = resultsAsMatrix[desc][6] || 0.0;
var s7 = resultsAsMatrix[desc][7] || 0.0;
var tableRow = [{
text: desc,
style: 'tableHeader'
}, s5.toFixed(2), s6.toFixed(2), s7.toFixed(2)];
tableBody.push(tableRow);
}
return tableBody;
}
|
Comments (0)
You can clone a snippet to your computer for local editing. Learn more.