Giter Site home page Giter Site logo

react-orgchart's Issues

How to access click event from NodeTemplate custom node in react

Hi @dabeng
I want to achieve this kind of functionally. Can you please help me out. I'm new to react & unable to find any solution.

// parent class
const ParentClass = () => {
const showForm = (event) => {
console.log('showForm');
};

return(
   <OrganizationChart
       ref={orgchart}
       datasource={ds
       NodeTemplate={MyNode}
   </>
);

}

// NodeTemplate class
const MyNode = () => {

Show Form
// want to click a button event
}

MyNode.propTypes = propTypes;
export default MyNode;

Thanks in advance.

react typescript的环境支持

请问有对ts编写react的环境进行支持吗？ts环境下会报项目缺少类型检查，需要自己写描述文件

On demand data

Any answer for on demand data, click the node, get the data based on api result, update to the state?

Export new datasource

Hi, is there a way to export the datasource upon adding/deleting/updating the chart?
I saw on the jQuery version that there is a method called getHierarchy(), which is what I am looking for. But there is no such method in this react version. Does anyone have any suggestion?
Thanks.

Direction support for react?

Is there a way to do direction like the way you have for other versions of this library ?
for example from here

// sample of core source code let orgchart = new OrgChart({ 'data' : datascource, 'nodeContent': 'title', 'direction': 'r2l' }); document.querySelector('#chart-container').appendChild(orgchart);

Any targets for the release?

Hello.
Im using the ES6 version on a react project with succeess but the full react would be better.
Any code ready in this implementation or need help on it?

无法正常启动

直接启动，在3000端口访问页面会显示异常
重新用create-react-app创建工程再把代码拷进去是可用的
估计现有的create-react-app版本不匹配

filter feature ?

is there a filter feature for the react version ? the only way i found is to filter the data source but its just replacing org chart with another

Question: Multi-Parent Support

Is there a way to have multiple siblings be the parent for children nodes?

i.e. Three founders having the rest of the company listed under them

react Implementation for Mendix

Sorry to post this here, Xuebin Dong! Couldn't find an email to reach out to you.
Could you image to do a paid conversation of this widget for Mendix?
Mendix is a low code platform based on react/typescript.
And the datasource connection would be 'specific' to hook it into the drag and drop environment of Mendix. For an expert like you, it should be a matter of a couple of hours.
Let me know if you are interested - I really could use org charts for one of my Mendix projects.
[email protected]

From Database

My data is returned from the database.
How do I create the datasource with my data?

warning, unique key prop for chartnode

why it is warning?

Warning: Each child in a list should have a unique "key" prop.
in ChartNode (created by ChartNode)
in ChartNode (created by ForwardRef)
in ul (created by ForwardRef)
in div (created by ForwardRef)
in div (created by ForwardRef)

Check the render method of ChartNode. See https://fb.me/react-warning-keys for more information.

onClick event

Is it possible to have On click event (to click on node and then get the node information).

Thanks

Nexjs & Error importing CSS files within node_modules

Description
Error importing CSS files within node_modules and compatibility with Nextjs app.

Reproduce

  1. Have a running Nextjs app.
  2. yarn add @dabeng/react-orgchart
  3. Add Organization chart to an empty page
//

import OrganizationChart from "@dabeng/react-orgchart"
import React from "react"

const DnDChart = () => {
  const ds = {
    id: "n1",
    name: "Lao Lao",
    title: "general manager",
    children: [
      {id: "n2", name: "Bo Miao", title: "department manager"},
      {
        id: "n3",
        name: "Su Miao",
        title: "department manager",
        children: [
          {id: "n4", name: "Tie Hua", title: "senior engineer"},
          {
            id: "n5",
            name: "Hei Hei",
            title: "senior engineer",
            children: [
              {id: "n6", name: "Dan Dan", title: "engineer"},
              {id: "n7", name: "Xiang Xiang", title: "engineer"}
            ]
          },
          {id: "n8", name: "Pang Pang", title: "senior engineer"}
        ]
      },
      {id: "n9", name: "Hong Miao", title: "department manager"},
      {
        id: "n10",
        name: "Chun Miao",
        title: "department manager",
        children: [{id: "n11", name: "Yue Yue", title: "senior engineer"}]
      }
    ]
  }

  return <OrganizationChart datasource={ds} draggable={true} />
}

export default DnDChart

Error
image

Cause
With Next.js importing CSS files within node_modules cannot be supported because we cannot know the correct behavior:

  • Should the file be consumed as Global CSS or CSS Modules?
  • If Global, in what order does the file need to be injected?
  • If Modules, what are the emitted class names? As-is, camel-case, snake case?
  • Etc.

More details: https://nextjs.org/docs/messages/css-npm

Left 2 Right, Right 2 LeftL

Are you planning to implement l2r and r2l also in this version ?
If not, have you got some advice on how to performe this operation in react component ?
Thank you

Canvas Size

This is less of an issue and more of a question. How can I change the size of the canvas in the browser? It takes 100% of the width but only 744 of the height. Can I get some direction on where these settings would be for the height?

Thanks

Level / Depth When First Show

Hayy, thanks to created react version.
I have problem, how to set level or depth my org chart? I have 10 level, but i just want to show 3 level then i can expand manual.

Sorry for my bad english.
Thanks.

Uncaught TypeError: Cannot read property 'parentNode' of null

Hi @dabeng
In React Orgchart When I'm moving the graph haphazardly or doing hover on that somehow return parent node getting undefined or null. So I have added an if condition in ChartNode.js file after that the functionality is working smoothly.

I have found a solution but for that, I have to change in the node module's ChartNode.js file. So, if you can update your package & release a new version then it will be very helpful for me

Filename: node_modules@dabeng\react-orgchart\dist\ChartNode.js
in var addArrows = function.
line number 140 add the line if (!node) return false;

Thanks in advance

React orgchart verticalLevel or verticalDepth

I installed React orgchart npm install @dabeng/react-orgchart vs 1.0.0;
verticalLevel or verticalDepth feature is not working.

but later I've tried npm i orgchart vs 3.1.1;
but i think there is no 3.1.1 react version...

now i must use jquery version ? or is there any other solution ?

ReferenceError: regeneratorRuntime

Hello, I have a very basic project based off the Pan and zoom example in the codesandbox.
https://codesandbox.io/s/react-orgchart-demo-o3nf6

The page won't even load, react catches the error before the page loads.

Uncaught ReferenceError: regeneratorRuntime is not defined
 at react-dom.development.js:25012
    at react-dom.development.js:25012
    at renderWithHooks (react-dom.development.js:18331)
    at updateForwardRef (react-dom.development.js:20338)
    at beginWork (react-dom.development.js:22103)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3596)
    at Object.invokeGuardedCallbackDev (radial-gradient.ts:22)
    at invokeGuardedCallback (-prefix-radial-gradient.ts:70)
    at beginWork$1 (react-dom.development.js:25012)
    at performUnitOfWork (react-dom.development.js:25012)

react-dom.development.js:22984 The above error occurred in the <ForwardRef> component:
    in ForwardRef
    in Unknown
    in Route
    in Routes
    in Router (created by BrowserRouter)
    in BrowserRouter
    in Unknown

Here is a minimal reproduced project:
https://github.com/zacharytyhacz/react-orgchart-bug

image

Jest + react-testing-library failures

I'm trying to do a simple unit test with Jest + react-testing-library but I'm getting errors when trying to render your component.

To reproduce: Write any simple test case for initializing your component using Jest + react-testing-library

Do I need to set up any mocks in order to use this component in a jest environment?

I'm getting this error in the console
Screen Shot 2020-05-28 at 8 38 07 PM

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.