Skip to content

Commit e1c0bca

Browse files
committed
New Example added
1 parent 4bdb7cb commit e1c0bca

File tree

3 files changed

+869
-0
lines changed

3 files changed

+869
-0
lines changed

examples/Example3.js

Lines changed: 306 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,306 @@
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

Comments
 (0)