basicprimitives / react-demo Goto Github PK

Basic Primitives Diagrams for React Demo - demonstrates organizational chart editor based on Basic Primitives Diagrams for React library.

Home Page: https://www.basicprimitives.com/

JavaScript 98.96% HTML 0.13% Shell 0.01% CSS 0.91%

organization-charts charting-library diagrams-visualization diagram-layout dependencies-diagram family-tree diagram-editor diagram-generator react directed-acyclic-graph javascript component-library pdf pdfkit pdf-generation chart hierarchy diagram dependency-diagram data-analytics

react-demo's Introduction

Basic Primitives Diagrams for React Demos

This project is created for validation of effortless integration of Basic Primitives diagramming components into React application.

Project references

http://www.basicprimitives.com project home and React Live Demos.
GitHub Github repositories.
NPM official - release packages.
Basic Primitives for React Live Demos - github live site
Basic Primitives for JavaScript and PDFkit Live Demos & Samples - github live site

Basics

Setup

git clone https://github.com/BasicPrimitives/react-demo.git
cd react-demo/server/src/static
git clone https://github.com/BasicPrimitives/javascript.git
cd javascript
yarn build
cd ..
git clone https://github.com/BasicPrimitives/react.git

Running API server

cd server
yarn start

Running client server

cd client
yarn start

License

react-demo's People

Contributors

Stargazers

Watchers

Forkers

c77777 deryayilmazbilgeadam augchan42

react-demo's Issues

Running yarn start from client directory gives Error: error:0308010C:digital envelope routines::unsupported

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (/home/hosermage/react-demo/client/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/home/hosermage/react-demo/client/node_modules/webpack/lib/NormalModule.js:417:16)
at /home/hosermage/react-demo/client/node_modules/webpack/lib/NormalModule.js:452:10
at /home/hosermage/react-demo/client/node_modules/webpack/lib/NormalModule.js:323:13
at /home/hosermage/react-demo/client/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /home/hosermage/react-demo/client/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/home/hosermage/react-demo/client/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /home/hosermage/react-demo/client/node_modules/react-scripts/node_modules/babel-loader/lib/index.js:59:103 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Here's my npm list:

Display some information on hover of tree nodes

How to export org diagram into pdf in react js

Hi,

I want to export the org diagram into pdf.I saw an example using javascript but can we implement the same using react js?

Can we display a tooltip on mouse hover of a node

I want to display a tooltip on mouse hover of each node. I see there is an onHighlightChanged event.When I hover a node I am getting the details of that node.But I am not able to set tooltip inside that event.Can you please let me know if there is a way in basicpremitive to display tooltip on mouse hover of a node?

Drag Drop is getting stuck

Hello team,

While doing drag and drop for a particular node sometimes it gets stuck and does not move the node.

How to add an onclick event on Level annotation

Hi,
I am trying to add an on click event on each level of org diagram tree but don't know the correct way to implement this.Can you please help? Below is the screenshot of the levels:

yarn build gives Cannot find module 'util/' under javascript folder

hosermage@LAPTOP-1RPE37PF:~/react-demo/server/src/static/javascript$ yarn build
yarn run v1.22.15
warning ../../../../../package.json: No license field
$ webpack
[webpack-cli] Failed to load '/home/hosermage/react-demo/server/src/static/javascript/webpack.config.js' config
[webpack-cli] Error: Cannot find module 'util/'
Require stack:

/home/hosermage/react-demo/server/src/static/javascript/webpack.config.js
/home/hosermage/node_modules/webpack-cli/lib/webpack-cli.js
/home/hosermage/node_modules/webpack-cli/lib/bootstrap.js
/home/hosermage/node_modules/webpack-cli/bin/cli.js
/home/hosermage/node_modules/webpack/bin/webpack.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
at Function.resolve (node:internal/modules/cjs/helpers:116:19)
at Object. (/home/hosermage/react-demo/server/src/static/javascript/webpack.config.js:61:18)
at Module._compile (node:internal/modules/cjs/loader:1254:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at Module.require (node:internal/modules/cjs/loader:1141:19)
at require (node:internal/modules/cjs/helpers:110:18)
at WebpackCLI.tryRequireThenImport (/home/hosermage/node_modules/webpack-cli/lib/webpack-cli.js:223:30) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/home/hosermage/react-demo/server/src/static/javascript/webpack.config.js',
'/home/hosermage/node_modules/webpack-cli/lib/webpack-cli.js',
'/home/hosermage/node_modules/webpack-cli/lib/bootstrap.js',
'/home/hosermage/node_modules/webpack-cli/bin/cli.js',
'/home/hosermage/node_modules/webpack/bin/webpack.js'
]
}
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

How to find out children and and all the grand children of a node.

I have a parent node in the tree. I want to find out all the children and grand children of that node. There could be n number of levels below that parent node. Can you please let us know if there is a way to do this in basic primitives.There is property called parent but with that I can only find the immediate children not all the grandchildren.