bumbeishvili / org-chart

Highly customizable org chart. Integrations available for Angular, React, Vue
https://stackblitz.com/edit/web-platform-o5t1ha
MIT License
915 stars 326 forks source link

Node.js - Not able to import org cart #78

Open SukeshP1995 opened 3 years ago

SukeshP1995 commented 3 years ago

package.json: ` { "name": "orgchart", "version": "1.0.0", "description": "", "main": "server.js", "dependencies": { "d3": "^7.0.1", "d3-org-chart": "^2.3.3", "jsdom": "^17.0.0" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node server.js" }, "author": "", "license": "ISC", "type": "module" }

import as d3 from "d3"; import as http from 'http'; import as fs from "fs"; import { JSDOM } from "jsdom"; import as OrgChart from 'd3-org-chart';

var data = fs.readFileSync("data.csv", "utf8")

data = d3.csvParse(data);

data.columns = ["parentId", "id", "name"] console.log(data)

const window = (new JSDOM(<!DOCTYPE html><body><p id="main">My First JSDOM!</p></body>)).window; global.document = window.document;

http.createServer(function (req, res) { // Chrome automatically sends a requests for favicons // Looks like https://code.google.com/p/chromium/issues/detail?id=39402 isn't // fixed or this is a regression. if(req.url.indexOf('favicon.ico') != -1) { res.statusCode = 404 return }

var pad = { t: 10, r: 10, b: 50, l: 40 }, width = 800 - pad.l - pad.r, height = 500 - pad.t - pad.b

var vis = d3.select(window.document).select('body').html('').append('svg') .attr('xmlns', 'http://www.w3.org/2000/svg') .attr('xmlns:xlink', 'http://www.w3.org/1999/xlink') .attr('width', width + pad.l + pad.r) .attr('height', height + pad.t + pad.b) .append('g') .attr('transform', 'translate(' + pad.l + ',' + pad.t + ')')

var chart = new OrgChart() .container(vis.select("svg")) .data(data) .render();

res.writeHead(200, {'Content-Type': 'image/svg+xml'}) res.end(chart.innerHTML) }).listen(1337, '127.0.0.1')

console.log('Server running at http://127.0.0.1:1337/'); `

error: ` import { OrgChart } from 'd3-org-chart'; ^^^^^^^^ SyntaxError: Named export 'OrgChart' not found. The requested module 'd3-org-chart' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using:

import pkg from 'd3-org-chart'; const { OrgChart } = pkg;

at ModuleJob._instantiate (internal/modules/esm/module_job.js:104:21)
at async ModuleJob.run (internal/modules/esm/module_job.js:149:5)
at async Loader.import (internal/modules/esm/loader.js:166:24)
at async Object.loadESM (internal/process/esm_loader.js:68:5)

`

I am not able to import in nodejs please help. nodejs versionL v14.15.3 d3-org-chart version: 2.3.3 OS: windows

please help

bumbeishvili commented 3 years ago

Did you try the suggestion mentioned in the error message?

import pkg from 'd3-org-chart';
const { OrgChart } = pkg;
bumbeishvili commented 3 years ago

Ok, I've confirmed, above won't work as well.

I will keep this open until I will figure out how to fix it.

Just out of interest, can you let me know how are you planning to use it in node.js?

SukeshP1995 commented 3 years ago

I just need to return the graph using nodejs. I dont want to use UI framework for this small task. I am trying to use similar code mentioned above. But I dont know whether it works or not. If possible, please provide working example.

bumbeishvili commented 3 years ago

I've tried and it does not work, will check it once I will find a time

SukeshP1995 commented 3 years ago

If you just fix that import issue, that will be fine for me On Sat, 21 Aug 2021 at 4:48 PM, David Bumbeishvili @.***> wrote:

I've tried and it does not work, will check it once I will find a time

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/bumbeishvili/org-chart/issues/78#issuecomment-903101419, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHKKQZB622ELOEEMQMBUW43T56DRPANCNFSM5CRPPMQQ .

-- Sukesh Pabolu Roll No: 20176027

SukeshP1995 commented 3 years ago

hi @bumbeishvili , any progress

bumbeishvili commented 3 years ago

I don't expect to have progress in this matter for months

SukeshP1995 commented 3 years ago

Could not find a declaration file for module 'd3-org-chart'. 'd:/code/org-chart-sample/node_modules/d3-org-chart/build/d3-org-chart.min.js' implicitly has an 'any' type. Try npm i --save-dev @types/d3-org-chart if it exists or add a new declaration (.d.ts) file containing declare module 'd3-org-chart';

SukeshP1995 commented 3 years ago

error while importing

bumbeishvili commented 3 years ago

Check this, it may be relevant

https://github.com/bumbeishvili/org-chart/issues/77

SukeshP1995 commented 3 years ago

Thanks, I will check it out.

On Tue, 24 Aug 2021 at 7:39 PM, David Bumbeishvili @.***> wrote:

Check this, it may be relevant

77 https://github.com/bumbeishvili/org-chart/issues/77

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/bumbeishvili/org-chart/issues/78#issuecomment-904676301, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHKKQZBCC4FV2SADKCXB7Q3T6ORYJANCNFSM5CRPPMQQ .

-- Sukesh Pabolu Roll No: 20176027

bumbeishvili commented 2 years ago

@SukeshP1995 let me know if a new (2.5.2) version fixes this issue

bsplosion commented 2 years ago

It doesn't appear to be fixed with the latest version (2.5.2), just hit the same thing. As a note, @ts-ignore does squelch successfully and doesn't appear to cause any issues with compilation, so that's my workaround for the moment.

Edit: turns out there are still compilation errors that come up even with types added.

Standin-Alone commented 1 year ago

any updates