d3.js: run the same code in Angular app and on node.js

user_574686 0
Viewed 459

I need to add some infographics into Angular 5 app. I've chosen d3.js for that. I also need to be able to do export of graphs, i.e. make SVGs with Node and wrap them inside PDF.

Fortunately it's rather simple to make code that makes d3 graph in browser work on node.js. The following lines do that...

const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;

After that only minor changes to code that works in browser are required.

Obviously I don't want to have 2 copies of almost the same code, so I need a way to organize usage of the functions that create SVG (I'd prefer if that was Typescript not javascript) on both angular app side and node app side. Unfortunately I don't have to much experience in Node and don't see an easy solution for that.

Here are my questions...

  1. How can I simply organize usage of functions that create SVG using d3 by angular 5 app and node.js app?
  2. Maybe rendering d3.js with node isn't the best solution and there's another, that is simpler?

Thank you in advance!

d3.js angular typescript node.js javascript
2 Answers

I would like to suggest the following solution.

First of all, no matter which front-end framework you actually use right now. If I got your idea correctly, you need to have a picture/screenshot of the d3js chart, in order to use it in PDF in the future. Is it correct?

You need to write a utility, to be able to open the real web page with your chart component and make a screenshot (with a resolution you want ofc) It might be a combination of the protractor with chrome-browser, for example. (there are a lot of solutions, actually, we could even use PhantomJS. In my experience using Protractor simpler and easier to implement). Also, Protractor has an internal feature to make screenshots of the page and save to the particular folder.

Which benefits we have following that solution:

  • the only one place with a source code related to chart rendering
  • 100% sure that chart view the same, as on the real web-page (with other angular components)
  • we don't need to find the way render SVG on the Node.JS side and etc...

The job might look like below:

  • Launch some NPM/Gulp/Grunt (whatever) task to open the particular page of your web-app by using Protractor and Chrome browser.
  • Open the dummy page with only chart component + data layer.
  • Make a screenshot and save to the particular folder. Use screenshot of the chart inside PDF (manually or by using another tool)
user_23189800

If you want to do it on the server side, you can have an api which will generate the graphics and return the element. You can directly plug it in the UI and also use the same function for you PDF generation.

user_60195630
Related