in scripts/thumbnail.js [37:101]
async function thumbnail(seriesName) {
const seriesPath = path.join(__dirname, '..', 'custom-series', seriesName);
const testPath = path.join(seriesPath, 'test', 'index.html');
const outputPath = path.join('./screenshots', `${seriesName}.svg`);
// Install the custom series
const customSeries = require(`../custom-series/${seriesName}`);
echarts.use(customSeries);
let chart = echarts.init(null, null, {
renderer: 'svg',
ssr: true,
width: 600,
height: 400,
});
// Load the js code from the content of the last <script></script>
// in 'test/index.html'
const html = fs.readFileSync(testPath, 'utf8');
const lastScriptStartIndex = html.lastIndexOf('<script>');
const lastScriptEndIndex = html.lastIndexOf('</script>');
const jsCode = html.substring(lastScriptStartIndex + 8, lastScriptEndIndex);
// Ignore the lines containing `echarts.use`, `echarts.init` and `.setOption`
// TODO: Not considered the case where there are multiple `chart.setOption`
// calls
const lines = jsCode.split('\n');
const code = lines
.filter(
(line) =>
!line.includes('echarts.use') &&
!line.includes('echarts.init') &&
!line.includes('chart.setOption')
)
.join('\n');
// Run the code
try {
// Load d3 and d3-contour using dynamic import
const d3 = await import('d3');
const d3Contour = await import('d3-contour');
// Assign d3 and d3Contour to the global object
globalThis.d3 = d3;
globalThis.d3Contour = d3Contour;
eval(code);
// To make sure text is readable in dark mode
option.backgroundColor = '#fff';
chart.setOption(option);
} catch (error) {
console.error(chalk.red(error.stack));
console.info(chalk.blue(code));
return;
}
const svg = chart.renderToSVGString();
chart.dispose();
chart = null;
option = null;
// Save the SVG to file
fs.writeFileSync(outputPath, svg);
}