{"_id":"@dormammuuuuu/nextjs-orgchart","_rev":"1-fbe2c0dc9602e6e4e1155171d4ddd0d6","name":"@dormammuuuuu/nextjs-orgchart","dist-tags":{"latest":"1.0.1-a"},"versions":{"1.0.0":{"name":"@dormammuuuuu/nextjs-orgchart","version":"1.0.0","keywords":["nextjs","orgchart","organization chart","org chart","tree","hierarchy","team structure","react component","nextjs component","data visualization","employee chart","organizational structure"],"author":{"name":"dormammuuuuu"},"license":"MIT","_id":"@dormammuuuuu/nextjs-orgchart@1.0.0","maintainers":[{"name":"dormammuuuuu","email":"jericovic64@gmail.com"}],"homepage":"https://github.com/dormammuuuuu/nextjs-orgchart#readme","bugs":{"url":"https://github.com/dormammuuuuu/nextjs-orgchart/issues"},"dist":{"shasum":"714be65396fab521fe04e74f6776487d1e3ca6fc","tarball":"https://registry.npmjs.org/@dormammuuuuu/nextjs-orgchart/-/nextjs-orgchart-1.0.0.tgz","fileCount":12,"integrity":"sha512-xuK3PbnpDJ5vE+3S+nGQKvp1rg8BSLvlsLt+f0e4486mcf1HcKkXpKbKOAprw7Jl47llTcpwMcffQt00HtAUEw==","signatures":[{"sig":"MEQCIDJ51U3uV/3SIGxRwj5UShg8G1HwoCDkqKzzbWU2mxBjAiAcu9tuTIf9TiMzKS7I3jjlWfDmBi/PfZuL8507g5zlaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1826463},"main":"./dist/nextjs-orgchart.umd.js","types":"./dist/types/index.d.ts","module":"./dist/nextjs-orgchart.es.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/nextjs-orgchart.es.js","require":"./dist/nextjs-orgchart.umd.js"},"./ChartNode.css":{"default":"./dist/ChartNode.css"},"./ChartContainer.css":{"default":"./dist/ChartContainer.css"}},"gitHead":"9b0f1fb0f4e557172a99beac0fba841f1e23abd9","private":false,"scripts":{"build":"vite build && cp src/*.css dist/","clean":"rm -rf dist","start":"vite","preview":"vite preview","postbuild":"mkdirp dist/types && cp src/types/index.d.ts dist/types/","publish:npm":"vite build && cp -r src/components dist"},"_npmUser":{"name":"dormammuuuuu","email":"jericovic64@gmail.com"},"repository":{"url":"git+https://github.com/dormammuuuuu/nextjs-orgchart.git","type":"git"},"_npmVersion":"10.5.0","description":"A React component for rendering organization charts in Next.js applications.","directories":{},"_nodeVersion":"20.12.2","dependencies":{"rxjs":"^7.8.1","jspdf":"^2.5.1","react":">=18.0.0","react-dom":">=18.0.0","html2canvas":"^1.4.1","@dormammuuuuu/json-helper":"^3.0.0"},"_hasShrinkwrap":false,"devDependencies":{"uuid":"^7.0.2","vite":"^5.4.10","mkdirp":"^3.0.1","typescript":"^5.6.3","@types/react":"^18.3.12","@vitejs/plugin-react":"^4.3.3"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/nextjs-orgchart_1.0.0_1730230308057_0.4904058602813828","host":"s3://npm-registry-packages"}},"1.0.1-a":{"name":"@dormammuuuuu/nextjs-orgchart","version":"1.0.1-a","description":"A React component for rendering organization charts in Next.js applications.","main":"./dist/nextjs-orgchart.umd.js","module":"./dist/nextjs-orgchart.es.js","types":"./dist/types/index.d.ts","private":false,"exports":{".":{"import":"./dist/nextjs-orgchart.es.js","require":"./dist/nextjs-orgchart.umd.js","types":"./dist/types/index.d.ts"},"./ChartContainer.css":{"default":"./dist/ChartContainer.css"},"./ChartNode.css":{"default":"./dist/ChartNode.css"}},"repository":{"type":"git","url":"git+https://github.com/dormammuuuuu/nextjs-orgchart.git"},"scripts":{"start":"vite","clean":"rm -rf dist","build":"vite build && cp src/*.css dist/","postbuild":"mkdirp dist/types && cp src/types/index.d.ts dist/types/","preview":"vite preview","publish:npm":"vite build && cp -r src/components dist"},"keywords":["nextjs","orgchart","organization chart","org chart","tree","hierarchy","team structure","react component","nextjs component","data visualization","employee chart","organizational structure"],"author":{"name":"dormammuuuuu"},"license":"MIT","bugs":{"url":"https://github.com/dormammuuuuu/nextjs-orgchart/issues"},"homepage":"https://github.com/dormammuuuuu/nextjs-orgchart#readme","dependencies":{"@dormammuuuuu/json-helper":"^3.0.0","html-to-image":"^1.11.11","react":">=18.0.0","react-dom":">=18.0.0","rxjs":"^7.8.1"},"devDependencies":{"@types/react":"^18.3.12","@vitejs/plugin-react":"^4.3.3","mkdirp":"^3.0.1","typescript":"^5.6.3","uuid":"^7.0.2","vite":"^5.4.10"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_id":"@dormammuuuuu/nextjs-orgchart@1.0.1-a","gitHead":"fbb747ea548d430c960703849cad1c73415eaa8b","_nodeVersion":"20.12.2","_npmVersion":"10.5.0","dist":{"integrity":"sha512-ctdVan9Z2twU8BnsppjRkuaa47QDaaODNUh/OUu7yld7N7EodXh9XQpGolzlf3vJKnK3VIkhjA24hErncwWNRQ==","shasum":"a42ddd7570ac429e3b1d3bab395813b5e6d71683","tarball":"https://registry.npmjs.org/@dormammuuuuu/nextjs-orgchart/-/nextjs-orgchart-1.0.1-a.tgz","fileCount":8,"unpackedSize":138337,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAZDUcKhgCbJjzZqYXtht1oin4hzM13uTyG5mv4E/2v4AiEAxtMkkpbW7x2DgWZSpknnDiSL1kS/NgEqGKnVNSOdu9g="}]},"_npmUser":{"name":"dormammuuuuu","email":"jericovic64@gmail.com"},"directories":{},"maintainers":[{"name":"dormammuuuuu","email":"jericovic64@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/nextjs-orgchart_1.0.1-a_1730410637317_0.9859904815371952"},"_hasShrinkwrap":false}},"time":{"created":"2024-10-29T19:31:47.953Z","modified":"2024-10-31T21:37:17.709Z","1.0.0":"2024-10-29T19:31:48.439Z","1.0.1-a":"2024-10-31T21:37:17.496Z"},"bugs":{"url":"https://github.com/dormammuuuuu/nextjs-orgchart/issues"},"author":{"name":"dormammuuuuu"},"license":"MIT","homepage":"https://github.com/dormammuuuuu/nextjs-orgchart#readme","keywords":["nextjs","orgchart","organization chart","org chart","tree","hierarchy","team structure","react component","nextjs component","data visualization","employee chart","organizational structure"],"repository":{"type":"git","url":"git+https://github.com/dormammuuuuu/nextjs-orgchart.git"},"description":"A React component for rendering organization charts in Next.js applications.","maintainers":[{"name":"dormammuuuuu","email":"jericovic64@gmail.com"}],"readme":"# nextjs-orgchart\r\n\r\n`nextjs-orgchart` is a flexible and interactive organizational chart component for React and Next.js applications. It allows for dynamic, hierarchical data visualization with support for customizable nodes, drag-and-drop reordering, zooming, and exporting to PNG or PDF formats. This component is ideal for representing complex team structures, project hierarchies, and organizational trees. This is the modernization of [dabeng](https://github.com/dabeng/react-orgchart) and [mahyarmadad](https://github.com/mahyarmadad/nextjs-orgchart) orgchart.\r\n\r\n## Features\r\n\r\n- **Hierarchy Representation**: Visualize nested relationships with expandable/collapsible child nodes.\r\n- **Drag-and-Drop Reordering**: Rearrange nodes within the chart with drag-and-drop support.\r\n- **Node Selection**: Click nodes to highlight and manage selected nodes.\r\n- **Zooming and Panning**: Easily navigate complex hierarchies with zoom and pan functionality.\r\n- **Customizable Node Templates**: Define custom templates for nodes using the `NodeTemplate` prop.\r\n- **Export Options**: Export the entire chart as PNG or PDF.\r\n- **Multiselect Support**: Enable multiple node selection.\r\n- **Configurable**: Customize behavior for pan, zoom limits, collapsibility, and more.\r\n\r\n## Installation\r\n\r\nInstall via npm or yarn:\r\n\r\n```bash\r\nnpm install @dormammuuuuu/nextjs-orgchart\r\n```\r\n\r\nor\r\n\r\n```bash\r\nyarn add @dormammuuuuu/nextjs-orgchart\r\n```\r\n\r\n## CSS Styling\r\n\r\nInclude the provided CSS files in your project:\r\n```javascript\r\nimport '@dormammuuuuu/nextjs-orgchart/ChartContainer.css';\r\nimport '@dormammuuuuu/nextjs-orgchart/ChartNode.css';\r\n```\r\n\r\nAdd custom styles to the chart or nodes using the provided class names:\r\n- **Container**: `.orgchart-container`\r\n- **Chart**: `.orgchart`\r\n- **Node**: `.oc-node`\r\n- **Edges**: `.oc-edge` for top, bottom, left, and right edges\r\n\r\n## Usage\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ChartContainer from '@dormammuuuuu/nextjs-orgchart';\r\nimport '@dormammuuuuu/nextjs-orgchart/ChartContainer.css';\r\nimport '@dormammuuuuu/nextjs-orgchart/ChartNode.css';\r\n\r\nconst data = {\r\n  id: \"1\",\r\n  name: \"CEO\",\r\n  relationship: \"00\",\r\n  children: [\r\n    {\r\n      id: \"2\",\r\n      name: \"CTO\",\r\n      children: [{ id: \"3\", name: \"Dev Lead\" }]\r\n    }\r\n  ]\r\n};\r\n\r\nconst MyNodeTemplate = ({ nodeData }) => (\r\n  <div>\r\n    <h4>{nodeData.name}</h4>\r\n  </div>\r\n);\r\n\r\nfunction App() {\r\n  return (\r\n    <ChartContainer\r\n      datasource={data}\r\n      pan={true}\r\n      zoom={true}\r\n      NodeTemplate={MyNodeTemplate}\r\n      draggable={true}\r\n      collapsible={true}\r\n      onClickNode={(node) => console.log(\"Node clicked:\", node)}\r\n    />\r\n  );\r\n}\r\n\r\nexport default App;\r\n```\r\n\r\n## Props\r\n\r\n### `ChartContainer`\r\n\r\n| Prop              | Type                                     | Default          | Description |\r\n|-------------------|------------------------------------------|------------------|-------------|\r\n| `datasource`      | `Datasource`                             | -                | Hierarchical data for the chart, including `id`, `name`, and optional `relationship` and `children`. |\r\n| `pan`             | `boolean`                                | `false`          | Enables or disables panning (drag-to-move chart). |\r\n| `zoom`            | `boolean`                                | `false`          | Enables or disables zooming. |\r\n| `zoomoutLimit`    | `number`                                 | `0.5`            | Minimum zoom scale. |\r\n| `zoominLimit`     | `number`                                 | `7`              | Maximum zoom scale. |\r\n| `containerClass`  | `string`                                 | `\"\"`             | Custom class for the container. |\r\n| `chartClass`      | `string`                                 | `\"\"`             | Custom class for the chart. |\r\n| `NodeTemplate`    | `React.ComponentType<{ nodeData: Datasource }>` | `-`      | Custom template component for nodes. |\r\n| `draggable`       | `boolean`                                | `false`          | Enables or disables node dragging for reordering. |\r\n| `collapsible`     | `boolean`                                | `true`           | Enables or disables collapsibility of nodes. |\r\n| `multipleSelect`  | `boolean`                                | `false`          | Enables selection of multiple nodes. |\r\n| `onClickNode`     | `(datasource: Datasource) => void`       | `-`      | Callback when a node is clicked. |\r\n| `onClickChart`    | `() => void`                             | `-`      | Callback when the chart area is clicked (outside any node). |\r\n\r\n### `ChartNode` (Used Internally)\r\n\r\n| Prop             | Type                                          | Description |\r\n|------------------|-----------------------------------------------|-------------|\r\n| `datasource`     | `Datasource`                                  | Data for an individual node. |\r\n| `NodeTemplate`   | `React.ComponentType<NodeTemplateProps>`      | Custom template component for the node. |\r\n| `draggable`      | `boolean`                                     | Enables or disables drag-and-drop for the node. |\r\n| `collapsible`    | `boolean`                                     | Enables or disables collapsibility for the node. |\r\n| `multipleSelect` | `boolean`                                     | Enables multiselect mode. |\r\n| `changeHierarchy`| `(draggedNode: Datasource, targetId: string) => void` | Handles reordering of nodes in the hierarchy. |\r\n| `onClickNode`    | `(datasource: Datasource) => void`            | Callback for node click events. |\r\n\r\n## Services\r\n\r\n### `dragNodeService`\r\n\r\n- **Purpose**: Handles drag events for nodes, including the node being dragged and clearing drag info.\r\n- **Methods**:\r\n  - `sendDragInfo(id: string | number)`: Starts a drag operation for the node with the specified ID.\r\n  - `clearDragInfo()`: Clears any current drag information.\r\n  - `getDragInfo()`: Returns an observable with current drag info.\r\n\r\n### `selectNodeService`\r\n\r\n- **Purpose**: Manages selection events for nodes.\r\n- **Methods**:\r\n  - `sendSelectedNodeInfo(id: string | number)`: Sets the node with the specified ID as selected.\r\n  - `clearSelectedNodeInfo()`: Clears any current selection info.\r\n  - `getSelectedNodeInfo()`: Returns an observable with current selection info.\r\n\r\n## Exporting the Chart\r\n\r\nUse `useImperativeHandle` ref in `ChartContainer` to access the `exportTo` function and export the chart to PNG or PDF:\r\n\r\n```javascript\r\nimport React, { useRef } from 'react';\r\nimport ChartContainer from '@dormammuuuuu/nextjs-orgchart';\r\n\r\nconst App = () => {\r\n  const chartRef = useRef();\r\n\r\n  const exportChart = () => {\r\n    chartRef.current.exportTo(\"MyOrgChart\", \"pdf\");\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <button onClick={exportChart}>Export Chart</button>\r\n      <ChartContainer ref={chartRef} datasource={data} />\r\n    </>\r\n  );\r\n};\r\n\r\nexport default App;\r\n```\r\n\r\n- `exportTo(filename: string, format: string)`: Exports the chart as `PNG` or `PDF` with the specified filename.\r\n\r\n## Example Datasource Structure\r\n\r\nThe `datasource` prop should be a hierarchical structure, as shown below:\r\n\r\n```json\r\n{\r\n  \"id\": \"1\",\r\n  \"name\": \"CEO\",\r\n  \"relationship\": \"00\",\r\n  \"children\": [\r\n    {\r\n      \"id\": \"2\",\r\n      \"name\": \"CTO\",\r\n      \"children\": [\r\n        { \"id\": \"3\", \"name\": \"Dev Lead\" }\r\n      ]\r\n    }\r\n  ]\r\n}\r\n```\r\n\r\n## Customizing Nodes\r\n\r\nDefine a custom component and pass it to the `NodeTemplate` prop to render custom node templates:\r\n\r\n```javascript\r\nconst MyNodeTemplate = ({ nodeData }) => (\r\n  <div>\r\n    <h4>{nodeData.name}</h4>\r\n    <p>{nodeData.title}</p>\r\n  </div>\r\n);\r\n```\r\n\r\nThen pass it to `ChartContainer`:\r\n\r\n```javascript\r\n<ChartContainer datasource={data} NodeTemplate={MyNodeTemplate} />\r\n```\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\r\n\r\n---\r\n","readmeFilename":"README.md"}