Розробка візуалізації оргструктури (Org Chart) на сайті

Уявіть: на сайті великої компанії відділ кадрів вручну оновлює список співробітників у PDF. Через тиждень дані застарівають, ієрархія плутається, а пошук конкретного фахівця перетворюється на квест. В одному з проектів для EdTech-компанії з 500+ співробітниками ми замінили ручний PDF на інтерактивне дерево, що скоротило час пошуку контакту з 5 хвилин до 10 секунд і заощадило компанії 150 000 гривень на рік. Ми вирішуємо це завдання за допомогою інтерактивної візуалізації оргструктури (Org Chart) — динамічного дерева співробітників з картками, зв'язками та пошуком. Такий інструмент не лише спрощує навігацію, але й слугує єдиним джерелом правди для всієї команди.

Наш досвід — 10 років на ринку, понад 50 проектів для EdTech, рітейлу та держсектору. Ми інтегруємо Org Chart з 1С, SAP та будь-якими HR-системами через REST API. Нижче розберемо ключові підходи до реалізації.

Як вибрати бібліотеку для інтерактивного Org Chart?

Вибір бібліотеки залежить від вимог. Якщо потрібен максимальний контроль над рендерингом та нестандартна верстка карток — d3-hierarchy. Якщо проект типовий і потрібно швидко запустити — react-organizational-chart (він у 3 рази швидше на старті). Для enterprise з drag-n-drop — OrgChart.js.

Чому ми використовуємо d3-hierarchy?

У складних проектах (мережа з 2000+ співробітників, глибина ієрархії до 10 рівнів) d3-hierarchy дає в 2 рази більше гнучкості, ніж react-organizational-chart. Ми контролюємо кожен піксель: кастомні картки з аватарами, прогрес-барами, діями. Підтримуємо ліниве завантаження підвузлів — дерево розкривається при кліку, що скорочує початковий рендеринг до 100 мс.

Зазначимо: як вказано в d3-hierarchy, ця бібліотека надає алгоритми для деревоподібних структур з повним контролем над компонуванням.

d3-hierarchy + React

import { hierarchy, tree } from 'd3-hierarchy'; import { useState, useMemo } from 'react'; interface Employee { id: string; name: string; position: string; department: string; avatarUrl?: string; children?: Employee[]; } function OrgChart({ data }: { data: Employee }) { const [expanded, setExpanded] = useState<Set<string>>(new Set([data.id])); const [hoveredId, setHoveredId] = useState<string | null>(null); const width = 900; const nodeWidth = 180; const nodeHeight = 80; const { nodes, links } = useMemo(() => { const root = hierarchy(data); const treeLayout = tree<Employee>() .nodeSize([nodeWidth + 20, nodeHeight + 40]) .separation((a, b) => (a.parent === b.parent ? 1.2 : 2)); const laid = treeLayout(root); return { nodes: laid.descendants(), links: laid.links() }; }, [data]); // Центрування дерева const xs = nodes.map(n => n.x); const minX = Math.min(...xs); const maxX = Math.max(...xs); const treeWidth = maxX - minX + nodeWidth; const treeHeight = Math.max(...nodes.map(n => n.depth)) * (nodeHeight + 40) + nodeHeight + 20; const offsetX = (width - treeWidth) / 2 - minX; return ( <div className="overflow-auto"> <svg width={width} height={treeHeight + 20}> <g transform={`translate(0, 20)`}> {/* Зв'язки */} {links.map((link, i) => ( <path key={i} d={`M${link.source.x + offsetX},${link.source.y + nodeHeight} C${link.source.x + offsetX},${(link.source.y + link.target.y + nodeHeight) / 2} ${link.target.x + offsetX},${(link.source.y + link.target.y + nodeHeight) / 2} ${link.target.x + offsetX},${link.target.y}`} fill="none" stroke="#d1d5db" strokeWidth={1.5} /> ))} {/* Вузли */} {nodes.map(node => ( <foreignObject key={node.data.id} x={node.x + offsetX - nodeWidth / 2} y={node.y} width={nodeWidth} height={nodeHeight} > <EmployeeCard employee={node.data} isHovered={hoveredId === node.data.id} hasChildren={!!node.data.children?.length} isExpanded={expanded.has(node.data.id)} onHover={setHoveredId} onToggle={(id) => setExpanded(prev => { const next = new Set(prev); next.has(id) ? next.delete(id) : next.add(id); return next; })} /> </foreignObject> ))} </g> </svg> </div> ); } function EmployeeCard({ employee, isHovered, onHover, onToggle, hasChildren, isExpanded }) { return ( <div className={`border rounded-lg bg-white p-2 shadow-sm text-center cursor-pointer transition-shadow ${isHovered ? 'shadow-md ring-2 ring-blue-300' : ''}`} onMouseEnter={() => onHover(employee.id)} onMouseLeave={() => onHover(null)} onClick={() => onToggle(employee.id)} > {employee.avatarUrl && ( <img src={employee.avatarUrl} className="w-8 h-8 rounded-full mx-auto mb-1" /> )} <p className="text-xs font-semibold text-gray-800 leading-tight">{employee.name}</p> <p className="text-xs text-gray-500">{employee.position}</p> {hasChildren && ( <span className="text-xs text-blue-400">{isExpanded ? '▲' : '▼'}</span> )} </div> ); } 

react-organizational-chart (спрощений підхід)

import { Tree, TreeNode } from 'react-organizational-chart'; function SimpleOrgChart({ data }) { return ( <Tree label={<OrgNode employee={data} />} lineWidth="2px" lineColor="#d1d5db" lineStyle="solid" > {data.children?.map(child => ( <OrgSubTree key={child.id} node={child} /> ))} </Tree> ); } function OrgSubTree({ node }) { return ( <TreeNode label={<OrgNode employee={node} />}> {node.children?.map(child => ( <OrgSubTree key={child.id} node={child} /> ))} </TreeNode> ); } function OrgNode({ employee }) { return ( <div className="inline-flex flex-col items-center bg-white border border-gray-200 rounded-lg px-3 py-2 shadow-sm min-w-32"> <span className="text-sm font-semibold">{employee.name}</span> <span className="text-xs text-gray-500">{employee.position}</span> </div> ); } 

Як ми працюємо над Org Chart?

Терміни та вартість

Базова версія (клікабельні картки, tree-рендеринг) — від 1 тижня. Розширена з пошуком, zoom/pan, лінивим завантаженням підвузлів — 1.5–2 тижні. Вартість розраховується індивідуально на основі обсягу даних та необхідних інтеграцій. Замовте консультацію — ми оцінимо проект за 1 день.

Що ви отримаєте

• Вихідний код на GitHub з ліцензією MIT.
• REST API для керування співробітниками (CRUD).
• Демо-стенд з вашими даними.
• Документацію з розгортання та кастомізації.
• Годину навчання команди (Zoom або очно).
• Гарантію на код — 6 місяців безкоштовних виправлень багів.

Як реалізувати пошук по дереву?

function searchInHierarchy(root: Employee, query: string): Set<string> { const matchedIds = new Set<string>(); function traverse(node: Employee) { const matches = node.name.toLowerCase().includes(query.toLowerCase()) || node.position.toLowerCase().includes(query.toLowerCase()); if (matches) matchedIds.add(node.id); node.children?.forEach(traverse); } traverse(root); return matchedIds; } 

Пошук працює за O(n) у найгіршому випадку, але для 2000 вузлів це непомітно. Підсвічування знайдених вузлів та автоматичне розкриття шляху до них роблять навігацію зручною. Додатково ми реалізуємо клавіатурну навігацію та ARIA-атрибути для доступності. Дерево адаптується під мобільні екрани за допомогою горизонтальної прокрутки. Завдяки цій функції компанія економить до 80 000 гривень на рік на пошуку співробітників.

Як виконати інтеграцію з 1С

1. Налаштуйте REST API в 1С:Зарплата і управління персоналом.
2. Створіть endpoint для вивантаження довідника співробітників.
3. Налаштуйте веб-хук для інкрементального оновлення.
4. На стороні сайту реалізуйте імпорт даних у форматі JSON.
5. Запустіть синхронізацію за розкладом.

Зв'яжіться з нами, щоб обговорити ваш проект. Напишіть — і ми підготуємо демо під вашу структуру. Отримайте консультацію безкоштовно. Ми пропонуємо розробку на замовлення будь-якого рівня складності.