|
1
|
/**
|
|
2
|
* PNG\JPEG exporter for C3.js, version 0.2
|
|
3
|
* (c) 2014 Yuval Bar-On
|
|
4
|
*
|
|
5
|
* usage: path/to/phantomjs output options [WxH]
|
|
6
|
*
|
|
7
|
*/
|
|
8
|
|
|
9
|
// useful python-styled string formatting, "hello {0}! Javascript is {1}".format("world", "awesome");
|
|
10
|
if (!String.prototype.format) {
|
|
11
|
String.prototype.format = function() {
|
|
12
|
var args = arguments;
|
|
13
|
return this.replace(/{(\d+)}/g, function(match, number) {
|
|
14
|
return typeof args[number] != 'undefined'
|
|
15
|
? args[number]
|
|
16
|
: match
|
|
17
|
;
|
|
18
|
});
|
|
19
|
};
|
|
20
|
}
|
|
21
|
|
|
22
|
// defaults
|
|
23
|
var page = require('webpage').create(),
|
|
24
|
fs = require('fs'),
|
|
25
|
system = require('system'),
|
|
26
|
config = JSON.parse( fs.read('config.json') ),
|
|
27
|
output, size;
|
|
28
|
|
|
29
|
if (system.args.length < 3 ) {
|
|
30
|
console.log('Usage: phantasm.js filename html [WxH]');
|
|
31
|
phantom.exit(1);
|
|
32
|
} else {
|
|
33
|
out = system.args[1];
|
|
34
|
opts = JSON.parse( system.args[2] );
|
|
35
|
|
|
36
|
if (system.args[3]) {
|
|
37
|
var dimensions = system.args[3].split('x'),
|
|
38
|
width = dimensions[0],
|
|
39
|
height = dimensions[1];
|
|
40
|
|
|
41
|
function checkNum(check) {
|
|
42
|
check = parseInt(check);
|
|
43
|
if (!isNaN(check))
|
|
44
|
return check;
|
|
45
|
return false;
|
|
46
|
}
|
|
47
|
|
|
48
|
width = checkNum(width);
|
|
49
|
height = checkNum(height);
|
|
50
|
|
|
51
|
if (width && height) {
|
|
52
|
page.viewportSize = {
|
|
53
|
height: height,
|
|
54
|
width: width
|
|
55
|
}
|
|
56
|
}
|
|
57
|
|
|
58
|
// fit chart size to img size, if undefined
|
|
59
|
if (!opts.size) {
|
|
60
|
opts.size = {
|
|
61
|
"height": height,
|
|
62
|
"width": width
|
|
63
|
};
|
|
64
|
}
|
|
65
|
} else {
|
|
66
|
// check if size is defined in chart,
|
|
67
|
// else apply defaults
|
|
68
|
page.viewportSize = {
|
|
69
|
height: (opts.size && opts.size.height) ? opts.size.height : 320,
|
|
70
|
width: (opts.size && opts.size.width ) ? opts.size.width : 710,
|
|
71
|
}
|
|
72
|
}
|
|
73
|
}
|
|
74
|
|
|
75
|
page.onResourceRequested = function(requestData, request) {
|
|
76
|
console.log('::loading resource ', requestData['url']);
|
|
77
|
};
|
|
78
|
|
|
79
|
// helpful debug functions
|
|
80
|
page.onConsoleMessage = function(msg){
|
|
81
|
console.log(msg);
|
|
82
|
};
|
|
83
|
|
|
84
|
page.onError = function(msg, trace) {
|
|
85
|
var msgStack = ['ERROR: ' + msg];
|
|
86
|
|
|
87
|
if (trace && trace.length) {
|
|
88
|
msgStack.push('TRACE:');
|
|
89
|
trace.forEach(function(t) {
|
|
90
|
msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function +'")' : ''));
|
|
91
|
});
|
|
92
|
}
|
|
93
|
|
|
94
|
console.error(msgStack.join('\n'));
|
|
95
|
};
|
|
96
|
|
|
97
|
// render page
|
|
98
|
function injectVerify(script) {
|
|
99
|
var req = page.injectJs(script);
|
|
100
|
if (!req) {
|
|
101
|
console.log( '\nError!\n' + script + ' not found!\n' );
|
|
102
|
phantom.exit(1);
|
|
103
|
}
|
|
104
|
}
|
|
105
|
|
|
106
|
page.onLoadFinished = function() {
|
|
107
|
console.log('::rendering');
|
|
108
|
|
|
109
|
for (var j in config.js) {
|
|
110
|
injectVerify(config.js[j]);
|
|
111
|
}
|
|
112
|
|
|
113
|
page.evaluate(function(chartoptions) {
|
|
114
|
// phantomjs doesn't know how to handle .bind, so we override
|
|
115
|
Function.prototype.bind = Function.prototype.bind || function (thisp) {
|
|
116
|
var fn = this;
|
|
117
|
return function () {
|
|
118
|
return fn.apply(thisp, arguments);
|
|
119
|
};
|
|
120
|
};
|
|
121
|
|
|
122
|
// generate chart
|
|
123
|
c3.generate(chartoptions);
|
|
124
|
|
|
125
|
}, opts);
|
|
126
|
|
|
127
|
// setting transition to 0 has proven not to work thus far, but 300ms isn't much
|
|
128
|
// so this is acceptable for now
|
|
129
|
setTimeout(function() {
|
|
130
|
page.render(out);
|
|
131
|
phantom.exit();
|
|
132
|
}, 300);
|
|
133
|
}
|
|
134
|
|
|
135
|
// apply css inline because that usually renders better
|
|
136
|
var css = '';
|
|
137
|
for (var i in config.css) {
|
|
138
|
css += fs.read(config.css[i]);
|
|
139
|
}
|
|
140
|
page.content = config.template.format(css);
|
