|
| 1 | +#!/usr/bin/env node |
| 2 | + |
| 3 | + let { canvasPdfLayer, Path } = require("./../dist/node-i2d.js"); |
| 4 | + // Importing d3 modules for charting |
| 5 | + const { stack, arc } = require("d3-shape"); |
| 6 | + const { max } = require("d3-array"); |
| 7 | + const { scaleBand, scaleRadial, scaleOrdinal } = require("d3-scale"); |
| 8 | + const fs = require('fs'); |
| 9 | + var path = require('path'); |
| 10 | + |
| 11 | + const orgdata = require("./data/example3Data.json"); |
| 12 | + orgdata.columns = [ |
| 13 | + "State", |
| 14 | + "Under 5 Years", |
| 15 | + "5 to 13 Years", |
| 16 | + "14 to 17 Years", |
| 17 | + "18 to 24 Years", |
| 18 | + "25 to 44 Years", |
| 19 | + "45 to 64 Years", |
| 20 | + "65 Years and Over" |
| 21 | + ]; |
| 22 | + |
| 23 | + renderPdf(); |
| 24 | + |
| 25 | + function renderPdf() { |
| 26 | + let height = 891; |
| 27 | + let width = 630; |
| 28 | + // Importing I2Djs PDF Canvas layer, by specifying height and width |
| 29 | + let PDFInstance = canvasPdfLayer({}, height, width); |
| 30 | + // Creating First Page by calling .addPage method |
| 31 | + let page1 = PDFInstance.addPage(); |
| 32 | + |
| 33 | + // Creating linear gradient, using in page border |
| 34 | + var borderGradiant = page1.createLinearGradient({ |
| 35 | + x1: 0, |
| 36 | + y1: 0, |
| 37 | + x2: 100, |
| 38 | + y2: 100, |
| 39 | + id: "11", |
| 40 | + colorStops: [ |
| 41 | + { color: "#FF7C80", value: 0 }, |
| 42 | + { color: "#0075F3", value: 100 } |
| 43 | + ] |
| 44 | + }); |
| 45 | + |
| 46 | + // invoking renderPageBorder method, renders page border. |
| 47 | + page1.exec(renderPageBorder); |
| 48 | + |
| 49 | + // render Logo. |
| 50 | + page1.createEl({ |
| 51 | + el: "image", |
| 52 | + attr: { |
| 53 | + x: width * 0.5 - 50, |
| 54 | + y: 50, |
| 55 | + src: process.cwd() + "/public/logo.png", |
| 56 | + onload: function () { |
| 57 | + let width = this.getAttr("width"); |
| 58 | + let height = this.getAttr("height"); |
| 59 | + this.setAttr("width", 100); |
| 60 | + this.setAttr("height", (height / width) * 100); |
| 61 | + } |
| 62 | + } |
| 63 | + }); |
| 64 | + |
| 65 | + // render Title. |
| 66 | + page1.createEl({ |
| 67 | + el: "text", |
| 68 | + attr: { |
| 69 | + x: width * 0.5, |
| 70 | + y: 150, |
| 71 | + text: "My Sample Report" |
| 72 | + }, |
| 73 | + style: { |
| 74 | + strokeStyle: borderGradiant, |
| 75 | + font: "25px Arial", |
| 76 | + textAlign: "center" |
| 77 | + } |
| 78 | + }); |
| 79 | + |
| 80 | + let content = page1.createEl({ |
| 81 | + el: "group", |
| 82 | + attr: { |
| 83 | + transform: { |
| 84 | + translate: [40, 200] |
| 85 | + } |
| 86 | + } |
| 87 | + }); |
| 88 | + |
| 89 | + // render subtitle. |
| 90 | + content.createEl({ |
| 91 | + el: "text", |
| 92 | + attr: { |
| 93 | + class: "title", |
| 94 | + x: 0, |
| 95 | + y: 5, |
| 96 | + text: "Ohtani is a baseball savant" |
| 97 | + }, |
| 98 | + style: { |
| 99 | + strokeStyle: "#59aaff", |
| 100 | + font: "italic bold 15px Verdana" |
| 101 | + } |
| 102 | + }); |
| 103 | + |
| 104 | + // render Text. |
| 105 | + content.createEl({ |
| 106 | + el: "text", |
| 107 | + attr: { |
| 108 | + x: 0, |
| 109 | + y: 30, |
| 110 | + width: 600 * 0.5, // wraps text if width specified |
| 111 | + text: |
| 112 | + "Ohtani is a baseball savant doing what has never been seen in Major League Baseball history. The last player to both pitch and hit at an elite level was Babe Ruth, a century ago. But the Bambino stopped pitching relatively early in his career to concentrate on hitting. And no one ever called Ruth fast. Ohtani, the unanimous American League MVP, stole 26 bases last year.Ohtani is a baseball savant doing what has never been seen in Major League Baseball history. The last player to both pitch and hit at an elite level was Babe Ruth, a century ago. But the Bambino stopped pitching relatively early in his career to concentrate on hitting. And no one ever called Ruth fast. Ohtani, the unanimous American League MVP, stole 26 bases last year.Ohtani is a baseball savant doing what has never been seen in Major League Baseball history." |
| 113 | + }, |
| 114 | + style: { |
| 115 | + strokeStyle: "#a3d0ff", |
| 116 | + font: "12px Verdana" |
| 117 | + } |
| 118 | + }); |
| 119 | + |
| 120 | + // render Text. |
| 121 | + content.createEl({ |
| 122 | + el: "text", |
| 123 | + attr: { |
| 124 | + x: 600 * 0.5 - 20, |
| 125 | + y: 400, |
| 126 | + width: 560 * 0.5, // wraps text if width specified |
| 127 | + text: |
| 128 | + "And no one ever called Ruth fast. Ohtani, the unanimous American League MVP, stole 26 bases last year.Ohtani is a baseball savant doing what has never been seen in Major League Baseball history. The last player to both pitch and hit at an elite level was Babe Ruth, a century ago. But the Bambino stopped pitching relatively early in his career to concentrate on hitting. And no one ever called Ruth fast. Ohtani, the unanimous American League MVP, stole 26 bases last year.Ohtani is a baseball savant doing what has never been seen in Major League Baseball history." |
| 129 | + }, |
| 130 | + style: { |
| 131 | + strokeStyle: "#a3d0ff", |
| 132 | + font: "12px Verdana" |
| 133 | + } |
| 134 | + }); |
| 135 | + |
| 136 | + // render Chart on Top right of the page |
| 137 | + let chart1 = content.createEl({ |
| 138 | + el: "group", |
| 139 | + attr: { |
| 140 | + transform: { |
| 141 | + translate: [350, 200] |
| 142 | + } |
| 143 | + } |
| 144 | + }); |
| 145 | + chart1.data({ |
| 146 | + data: orgdata, |
| 147 | + angle: Math.PI |
| 148 | + }); |
| 149 | + chart1.exec(chartContent); |
| 150 | + |
| 151 | + // render Chart on bottom left of the page |
| 152 | + let chart2 = content.createEl({ |
| 153 | + el: "group", |
| 154 | + attr: { |
| 155 | + transform: { |
| 156 | + translate: [200, 550] |
| 157 | + } |
| 158 | + } |
| 159 | + }); |
| 160 | + chart2.data({ |
| 161 | + data: orgdata |
| 162 | + .map(function (d) { |
| 163 | + return d; |
| 164 | + }) |
| 165 | + .sort(function (a, b) { |
| 166 | + return b.total - a.total; |
| 167 | + }), |
| 168 | + angle: -Math.PI |
| 169 | + }); |
| 170 | + chart2.exec(chartContent); |
| 171 | + |
| 172 | + let page2 = PDFInstance.addPage(); |
| 173 | + |
| 174 | + page2.exec(renderPageBorder); |
| 175 | + |
| 176 | + let chart3 = page2.createEl({ |
| 177 | + el: "group", |
| 178 | + attr: { |
| 179 | + transform: { |
| 180 | + translate: [width * 0.5, 300] |
| 181 | + } |
| 182 | + } |
| 183 | + }); |
| 184 | + chart3.data({ |
| 185 | + data: orgdata.map(function (d) { |
| 186 | + return d; |
| 187 | + }), |
| 188 | + angle: 2 * Math.PI |
| 189 | + }); |
| 190 | + chart3.exec(chartContent); |
| 191 | + |
| 192 | + PDFInstance.execute(); |
| 193 | + |
| 194 | + // Method to render page border |
| 195 | + function renderPageBorder() { |
| 196 | + this.createEl({ |
| 197 | + el: "rect", |
| 198 | + attr: { |
| 199 | + x: 20, |
| 200 | + y: 20, |
| 201 | + width: 630 - 40, |
| 202 | + height: 891 - 40, |
| 203 | + rx: 10, |
| 204 | + ry: 10 |
| 205 | + }, |
| 206 | + style: { |
| 207 | + strokeStyle: borderGradiant, |
| 208 | + lineWidth: 2, |
| 209 | + fillStyle: "#212121" |
| 210 | + } |
| 211 | + }); |
| 212 | + } |
| 213 | + |
| 214 | + // Method to render Chart |
| 215 | + function chartContent(data_) { |
| 216 | + let data = data_.data; |
| 217 | + let innerRadius = 50; |
| 218 | + let outerRadius = 200; |
| 219 | + let x = scaleBand() |
| 220 | + .domain( |
| 221 | + data.map(function (d) { |
| 222 | + return d.State; |
| 223 | + }) |
| 224 | + ) |
| 225 | + .range([0, data_.angle]) |
| 226 | + .align(0); |
| 227 | + let y = scaleRadial() |
| 228 | + .domain([ |
| 229 | + 0, |
| 230 | + max(data, function (d) { |
| 231 | + return d.total; |
| 232 | + }) |
| 233 | + ]) |
| 234 | + .range([innerRadius, outerRadius]); |
| 235 | + let z = scaleOrdinal() |
| 236 | + .domain(orgdata.columns.slice(1)) |
| 237 | + .range([ |
| 238 | + "#FF7C80", |
| 239 | + "#ff7cd3", |
| 240 | + "#c47cff", |
| 241 | + "#7c7eff", |
| 242 | + "#7cc4ff", |
| 243 | + "#7cffc6", |
| 244 | + "#ffd87c" |
| 245 | + ]); |
| 246 | + let arcExe = arc() |
| 247 | + .innerRadius(function (d) { |
| 248 | + return y(d[0]); |
| 249 | + }) |
| 250 | + .outerRadius(function (d) { |
| 251 | + return y(d[1]); |
| 252 | + }) |
| 253 | + .startAngle(function (d) { |
| 254 | + return x(d.data.State); |
| 255 | + }) |
| 256 | + .endAngle(function (d) { |
| 257 | + return x(d.data.State) + x.bandwidth(); |
| 258 | + }) |
| 259 | + .padAngle(0.01) |
| 260 | + .padRadius(innerRadius); |
| 261 | + this.createEls(stack().keys(orgdata.columns.slice(1))(data), { |
| 262 | + el: "group", |
| 263 | + attr: {} |
| 264 | + }).forEach(function (d) { |
| 265 | + this.createEls(d, { |
| 266 | + el: "path", |
| 267 | + attr: { |
| 268 | + d: function (d) { |
| 269 | + let pathInstance = Path(arcExe(d)); |
| 270 | + return pathInstance; |
| 271 | + } |
| 272 | + }, |
| 273 | + style: { |
| 274 | + fillStyle: function () { |
| 275 | + return z(d.key); |
| 276 | + }, |
| 277 | + strokeStyle: "none" |
| 278 | + } |
| 279 | + }); |
| 280 | + }); |
| 281 | + |
| 282 | + this.createEl({ |
| 283 | + el: "text", |
| 284 | + attr: { |
| 285 | + class: "title", |
| 286 | + x: 0, |
| 287 | + y: -12, |
| 288 | + text: "123k" |
| 289 | + }, |
| 290 | + style: { |
| 291 | + strokeStyle: "#ff7076", |
| 292 | + font: "bold 18px Verdana", |
| 293 | + textAlign: "center" |
| 294 | + } |
| 295 | + }); |
| 296 | + } |
| 297 | + |
| 298 | + fs.writeFileSync((process.cwd() + "/example3.pdf"), PDFInstance.exportPdf(), err => { |
| 299 | + if (err) { |
| 300 | + console.error(err) |
| 301 | + return |
| 302 | + } |
| 303 | + console.log("file written successfully"); |
| 304 | + }); |
| 305 | + } |
| 306 | + |
0 commit comments