Can D3 library be used with the Electron (Atom shell)? - javascript

Electron's website says that the applications made with electron can have access to node modules. Can they have access to the D3 library? If so, how can it be set up?

D3 is available as a Node.js module that can be imported into the JavaScript code you want to use to render your visualisation application.
As an example of how to integrate D3 into an Electron application, have a look at my D3 Space Filler Explorer application on GitHub. This application visualises disk space use with multiple D3 pie charts and a D3 treemap.
One pattern I found useful was to inject the SVG element into the D3 visualisation, which differs from the usual approach in D3 examples which creates the SVG element in the visualisation. See examples of this dependency injection in the /app/js/pie-chart.js and /app/js/treemap-chart.js files.

All (at least theoretically) pure JS modules are compatible with electron, since it also provides a (CommonJS) javascript runtime environment (io.js).
The only important thing is that electron doesn't automatically sets the NODE_PATH variable and doesn't look in system/global modules path for required modules. So you just have to make sure that you have the path to d3.js on your NODE_PATH:
NODE_PATH="/PATH/TO/d3.js" electron /PATH/TO/APP

We solved this in our workteam installing d3 with Npm:
npm install d3 --save
and in index.html we put this:
<script>var d3 = require("d3")</script>
We were getting this issue from nv.d3.js line 18, there is a little function requiring d3 as a node module and in our app we were using it in bower_components, so installing it with npm and requesting in your index directly from node_modules like as I said will probably solve this issue as it did with us.

Related

Cytoscape with Angular 13

I am a big fan of the cytoscape.js chart and I almost used so many types of the cytoscape.js chart without angular or react. Now I am trying to find out a working git repo that cytoscape.js chart with the angular 13 version. I also got a git repo from the official cytoscape.js website, but it's not working properly. Seems the cytoscape.js developers are not concentrated on the angular wrapper. Any one have any idea about this?
You don't need a package to use it.
npm i cytoscape
npm i -D #types/cytoscape
This will install the library and the typings for it.
You can use
import { whatever } from 'cytoscape';

How can I use a module from npm in a django-admin widget, without installing node?

Background
I have a django app that I want to create an admin widget for. The widget will display text in a particular way (like a terminal). It's so that app admins can see forwarded logs from an analytics process that is orchestrated by django (the app is django-twined).
To do that I want to use something like terminal-kit or one of the other libraries requiring npm install <whatever>
Building the app
The app is built in docker, and I don't want the entire node stack to end up in my production image.
I could use a multi-stage docker build; so install node and a lib from NPM in the first stage, then copy the library from node_modules in the second stage, but this feels unnecessarily slow.
Also, because all I'm doing then is using the raw js static assets that get bundled with the django app, I'm not sure how to go about importing the module (or if this is even possible).
The questions
Can I install an npm module without having the node stack present, and therefore avoid dealing with unwieldy multi stage builds?
How can I then import or require the contents of that module into vanilla javascript to use in a django widget?
Is this even in general possible? If it looks like moving a mountain, I'll give up and just slap a text area with monospace font on there... but it would be nice if log highlighting and colours were properly handled in a terminal-like way.
Can I install an npm module without having the node stack present, and therefore avoid dealing with unwieldy multi stage builds?
You can rollup an npm package using a dev tool like Browserify.
This can be done by rolling up the entire package using something like:
browserify --require terminal-kit
Browserify will parse the package and create a single JS file that you can try loading in the browser. There are some limitations to this so I'd recommend experimenting and exploring the Browserify docs.
How can I then import or require the contents of that module into vanilla javascript to use in a django widget?
You can do this by including a Django template file reference in the backend admin class definition. In the template you'll need to include an html JS source tag that points to the JS script you want to load. Django can include static files when building, you can use that to include the JS file during build time and then a local resource reference to point the template file to the right location.
Is this even in general possible?
Generally speaking this is definitely possible but YMMV. It boils down to the complexities of the npm package and what exactly it is trying to do in the browser.
In steps I would do the following:
Use Browserify to convert the npm package to a single JS file.
Create an html file that loads the local JS file, open this in the browser.
Open the console and see if the commands/context you're hoping to reproduce are working as expected in the browser. You could also write another vanilla JS file and load that in the html file to test.
Include the JS file reference in the Django admin template/widget.
Write custom JS code in the widget that uses/shows the globally instantiated JS script.
This strategy is based off my personal experience, I have had success following this strategy, hopefully it is helpful.

Architecture for scaling up Electron application development with plugin-style packages

Background:
We are developing an electron application which gets bigger and bigger over time. We've separated our web-app (renderer process) and the native wrapper process (main process) into separate projects, which is a good start, but not enough-
We have different teams working on the same electron infrastructure and would like to split the code into separate repos, each managed by a different team, and all of them are being loaded into the main infrastructure project of electron.
Problem:
At first, it sounds simple - create an npm package for each electron module (one for each team) and import those packages in the main electron project, that manages all of them and builds the final electron app. The problem is that those electron packages should be familiar with 'electron' package, and should somehow use the same version of this package. Since keeping track of the package the main electron project uses and updating it manually in every module each time we want to increase it's version is bad for scaled up application, we want to be able to sync them in a better way.
(Bad) solutions I could think of:
Pass the electron instance from the main electron app to the inner packages (in an init function) and use it instead of using the installed 'electron' package. It solves the problem of syncing electron versions, but when the main app updates the electron version - the packages won't be familiar with it and might break in case of incompatibility.
It sounds like no matter what I do, I can't decouple the projects and they must communicate (manually) to work properly. Is there any architecture design method I'm missing that could help me split one electron projects into multiple ones?
We are created #our-company/our-product-common package with common dependencies and configs (electron, typescript, lint rules, global constants). If we want to update electron or typescript we update versions in *-common package.
Or you can create #our-company/our-product-electron package which just reexports electron.

react-d3-component implement in create-react-app

I'm new to react.
By my research, I figured out that React-D3-component can serve my purpose.
I'm looking for an example of a Multi-series Line chart with tooltip and zoomable function. Basic line chart would also make this trick for my first steps.
I've a create-react-app, boilerplate ready. I need to put up this graph into a create-react-app project.
Please guide me through an example, which explains step by step how to implement this kind of graph.
Here are a few steps to do in order to make your app work:
Config your create-react-app boiler plate with Webpack and make sure you can run it without React-D3-component module.
Find the homepage component (normally main.js) try to modify some basic HTML elements and see if you can see the changes on page with hot-reloading. For instance, adding a H1 red tag.
Install React-D3-component module with npm command:
npm install react-d3-components --save
Start adding React-D3-component into your homepage component you just modified by importing the module:
import ReactD3 from 'react-d3-components'
Follow the example here, and create your chart components in your homepage.
This workflow should work for any React modules for testing purposes.

How to get elasticsearch.js to work without using require?

I am trying to implement elasticsearch.js in my project and when I added:
var elasticsearch = require('elasticsearch');
It broke my project and said require is not defined. I did research and saw that I would have to use a library called require.js within my project but that is changing my whole project structure just for one script.
I wanted to see if anybody knows how to call an instance without using require:
var elasticsearch = require('elasticsearch');
var client = new elasticsearch.Client();
You seem to be following the instructions for using elasticsearch in a node project or using a bundling system that supports CJS modules (like browserify or webpack). If you want a script that's for a browser-only project, see the Browser Builds page.
Note that at this time, they have this note:
These versions of the client are currently experimental.
You're using a version that should be used in a node project or through a module loader/bundler. The require keyword is node specific, the browser has no idea what to do with it. Require.js would help, you can also install Rollup or Webpack which would bundle the CJS (require) dependencies and your code into one file.
Or to be simple just go to https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/browser-builds.html as Jacob said

Categories