From a83fbc2fa6de065ee2f69f66885a1b9687c37b69 Mon Sep 17 00:00:00 2001 From: Pedro Arthur Fernandes de Vasconcelos Date: Fri, 5 Jun 2020 18:42:47 -0300 Subject: [PATCH 1/3] migrating from canvas-prebuilt which was deprecated to canvas 2.6.1; refactoring code to enhance the maintainability --- index.js | 148 +++++++++++++++++++++++++++++++++------------------ package.json | 2 +- 2 files changed, 98 insertions(+), 52 deletions(-) diff --git a/index.js b/index.js index 32a7965..30db462 100644 --- a/index.js +++ b/index.js @@ -1,8 +1,69 @@ var echarts = require("echarts"); -var Canvas = require("canvas-prebuilt"); +var { createCanvas } = require("canvas"); var fs = require('fs'); var path = require('path'); +/** + * default echart option in case the client doesn't define + */ +function getDefaultOption() { + return { + title: { + text: 'test', + }, + tooltip: {}, + legend: { + data: ['test'], + }, + xAxis: { + data: ["a", "b", "c", "d", "f", "g"], + }, + yAxis: {}, + series: [{ + name: 'test', + type: 'bar', + data: [5, 20, 36, 10, 10, 20], + }] + }; +} + +/** + * default config for the option, in case the client doesn't + * define it. + * + * @param {*} option echart option + */ +function getDefaultConfig(option) { + return { + width: 500, + height: 500, + option, + enableAutoDispose: true, + } +} + +/** + * saves the chart passed in the provided path + * @param {*} chart chart in which thedom will be retrieved and saved + * as an image + * @param {*} path directory to the image that will be saved + */ +function saveChart(chart, path) { + try { + fs.writeFileSync(path, chart.getDom().toBuffer()); + console.log("Created image:" + path) + } catch (err) { + console.error("Error: write file failed: " + err.message) + } +} + +/** + * retrieves the buffer of the chart + * @param {*} chart chart in which the buffer will be retrieved + */ +function getBuffer(chart) { + return chart.getDom().toBuffer(); +} /** * @param config = { @@ -12,72 +73,57 @@ var path = require('path'); //If the path is not set, return the Buffer of image. path: '', // Path is filepath of the image which will be created. } - * */ module.exports = function (config) { - if (config.canvas) { - Canvas = config.canvas; - } - var ctx = new Canvas(128, 128); + const createdCanvas = createCanvas(128, 128); + const ctx = createdCanvas.getContext('2d'); + if (config.font) { ctx.font = config.font; } echarts.setCanvasCreator(function () { - return ctx; + return createdCanvas; }); - var chart, option = { - title: { - text: 'test' - }, - tooltip: {}, - legend: { - data: ['test'] - }, - xAxis: { - data: ["a", "b", "c", "d", "f", "g"] - }, - yAxis: {}, - series: [{ - name: 'test', - type: 'bar', - data: [5, 20, 36, 10, 10, 20] - }] - }; - - let defaultConfig = { - width: 500, - height: 500, - option, - enableAutoDispose: true - } + const option = getDefaultOption(); + const defaultConfig = getDefaultConfig(option); - config = Object.assign({}, defaultConfig, config) + config = Object.assign({}, defaultConfig, config); config.option.animation = false; - chart = echarts.init(new Canvas(parseInt(config.width, 10), parseInt(config.height, 10))); + + const chart = echarts.init( + createCanvas( + parseInt(config.width, 10), + parseInt(config.height, 10), + ), + ); + chart.setOption(config.option); - if (config.path) { - try { - fs.writeFileSync(config.path, chart.getDom().toBuffer()); - if(config.enableAutoDispose){ - chart.dispose(); - } - console.log("Create Img:" + config.path) - } catch (err) { - console.error("Error: Write File failed" + err.message) + + try { + /** + * if specified the path, the chart will be saved into it + */ + if (config.path) { + saveChart(chart, config.path); + return; } - - } else { - var buffer = chart.getDom().toBuffer(); - try{ - if(config.enableAutoDispose){ + + /** + * if not, the buffer will be returned + */ + return getBuffer(chart); + } finally { + + /** + * finally, dispose the chart if client defined so + */ + if (config.enableAutoDispose) { chart.dispose(); - } - }catch(e){} - return buffer; + } } } \ No newline at end of file diff --git a/package.json b/package.json index d19afd0..b529475 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ }, "homepage": "https://github.com/suxiaoxin/node-echarts#readme", "dependencies": { - "canvas-prebuilt": "^1.6.5-prerelease.1", + "canvas": "^2.6.1", "echarts": "^4.0.3" }, "devDependencies": { From 8af4363424fe44a4f386e8b0f0dc470ad371441c Mon Sep 17 00:00:00 2001 From: Pedro Arthur Date: Fri, 5 Jun 2020 21:46:38 -0300 Subject: [PATCH 2/3] updating readme.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index dea46d4..9fec186 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ OS X | `brew install pkg-config cairo pango libpng jpeg giflib` Ubuntu | `sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++` Fedora | `sudo yum install cairo cairo-devel cairomm-devel libjpeg-turbo-devel pango pango-devel pangomm pangomm-devel giflib-devel` Solaris | `pkgin install cairo pango pkg-config xproto renderproto kbproto xextproto` -Windows | [Instructions on our wiki](https://github.com/Automattic/node-canvas/wiki/Installation---Windows) +Windows | npm i or npm install (canvas will be installed automatically) ``` npm install node-echarts @@ -37,4 +37,4 @@ node_echarts(config) |height|Number|500|Image height| |option|Object|{}|Echarts Options| |path|String|-|Path is filepath of the image which will be created. If the path is empty, return buffer.| -|enableAutoDispose|Boolean|true|Enable auto-dispose echarts after the image is created.| \ No newline at end of file +|enableAutoDispose|Boolean|true|Enable auto-dispose echarts after the image is created.| From d070b05df864228688b15b78366f138c061f4d4a Mon Sep 17 00:00:00 2001 From: Pedro Arthur Date: Fri, 5 Jun 2020 21:47:08 -0300 Subject: [PATCH 3/3] fixing windows install guide --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9fec186..8c79821 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ OS X | `brew install pkg-config cairo pango libpng jpeg giflib` Ubuntu | `sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++` Fedora | `sudo yum install cairo cairo-devel cairomm-devel libjpeg-turbo-devel pango pango-devel pangomm pangomm-devel giflib-devel` Solaris | `pkgin install cairo pango pkg-config xproto renderproto kbproto xextproto` -Windows | npm i or npm install (canvas will be installed automatically) +Windows | `npm i` or `npm install` (canvas will be installed automatically) ``` npm install node-echarts