koddiv-organizational-chart

React için organizasyon şeması bileşeni. Düz liste (id/parentId), nested veri veya JSX ile kullanım. Zoom/pan viewport, arama, expand/collapse, drawer ve çoklu kök desteği.

Gereksinimler: React 16.8+, Node 18+

Kurulum

npm install koddiv-organizational-chart

Stilleri projenize ekleyin:

import 'koddiv-organizational-chart/styles.css';

Hızlı başlangıç

Düz liste (nodes) — id ve parentId ile; kök için parentId: null:

import { OrgChart, type OrgChartDataItem } from 'koddiv-organizational-chart';
import 'koddiv-organizational-chart/styles.css';

const nodes: OrgChartDataItem[] = [
  { id: '1', parentId: null, label: <span>Genel Müdür</span>, name: 'Ayşe', surname: 'Yılmaz', title: 'GM', email: '[email protected]' },
  { id: '2', parentId: '1', label: <span>CTO</span>, name: 'Ali', surname: 'Demir', title: 'CTO', email: '[email protected]' },
  { id: '3', parentId: '1', label: <span>CHRO</span>, name: 'Fatma', surname: 'Kaya', title: 'CHRO', email: '[email protected]' },
];

<OrgChart nodes={nodes} onNodeClick={(item) => console.log(item)} />

Arama + viewport ile (tek prop ile açılıp kapanan arama):

import { OrgChart } from 'koddiv-organizational-chart';
import 'koddiv-organizational-chart/styles.css';

<OrgChart.WithSearch
  nodes={nodes}
  searchable={true}
  searchPlaceholder="İsim veya ünvan ile ara..."
  viewportHeight="100%"
  onNodeClick={setSelectedItem}
  emptyMessage="Sonuç bulunamadı."
/>
<OrgChart.Drawer item={selectedItem} onClose={() => setSelectedItem(null)} />

Çoklu kök (birden fazla parentId: null) — üstte sanal kök etiketi:

<OrgChart
  nodes={nodes}
  virtualRootLabel="Şirket Adı"
  onNodeClick={setSelectedItem}
/>

Nested veri (data):

import type { OrgChartNodeData } from 'koddiv-organizational-chart';

const data: OrgChartNodeData = {
  id: 'root',
  label: <div>Kök</div>,
  children: [
    { id: 'a', label: <div>Alt 1</div> },
    { id: 'b', label: <div>Alt 2</div>, children: [...] },
  ],
};
<OrgChart data={data} />

Declarative (JSX):

<OrgChart label={<div>Kök</div>}>
  <OrgChart.Node label={<div>Alt 1</div>} />
  <OrgChart.Node label={<div>Alt 2</div>}>
    <OrgChart.Node label={<div>Alt 2.1</div>} />
  </OrgChart.Node>
</OrgChart>

Sadece zoom/pan viewport:

<OrgChart.Viewport height="70vh" wheelZoom={true}>
  <OrgChart nodes={nodes} />
</OrgChart.Viewport>

API özeti

| Bileşen / fonksiyon | Açıklama | |---------------------|----------| | OrgChart | Ana şema. nodes | data | label+children | | OrgChart.WithSearch | Üstte arama çubuğu + viewport + şema. searchable, nodes zorunlu | | OrgChart.Viewport | Zoom, pan, fit. height, className, wheelZoom | | OrgChart.Drawer | Sağdan açılan detay. item, onClose | | OrgChart.SearchBar | Arama input. value, onChange, placeholder | | filterNodesBySearch(nodes, query) | Arama metnine göre filtreler (name, surname, title, email); Türkçe karakter uyumlu |

OrgChart props: nodes, data, label, children, onNodeClick, loading, emptyMessage, lineHeight, lineWidth, lineColor, lineStyle, lineBorderRadius, nodePadding, expandedIds, initialExpandedIds, onExpandedChange, virtualRootLabel, className.

OrgChartDataItem: id, parentId, label, name?, surname?, title?, email?, phone?, avatar? (drawer ve kartta kullanılır).

Performans: Sadece açık dallar render edilir. 2000+ düğümde varsayılan olarak yalnızca kök açık başlar; initialExpandedIds ile özelleştirilebilir.

Geliştirme

Gereksinim: Node 18+

npm install
npm run dev

Demo: http://localhost:5173 (Vite).

• npm run build — Kütüphane build (dist/); NPM yayını için.
• npm run build:demo — Demo uygulaması build (dist-demo/).
• npm run preview — Build edilmiş demoyu önizleme.

Yayında pakete yalnızca dist/ dahil edilir.