Розробка інтерактивних таймлайнів для сайту на React

Розробка інтерактивних таймлайнів для сайту

Уявіть: на сторінці історії компанії події завантажуються з помилкою — спочатку пізніші, потім ранні, а частина дат взагалі не відображається. У 80% випадків це відбувається через відсутність сортування на фронтенді. Клієнт бачить хаос, а не хронологію. Це поширена проблема, яку ми вирішуємо за допомогою правильно спроєктованих таймлайнів: інтерактивних, адаптивних, з чіткою прив'язкою до даних. Наші інженери працюють з React понад 8 років і перебрали десятки підходів, щоб знайти оптимальні. Ми допомагаємо компаніям візуалізувати історію проєктів, етапи розробки або стрічку новин — з гарантією коректного відображення на будь-яких пристроях. Якщо ви зіткнулися з подібною проблемою, зв'яжіться з нами для консультації.

Проблеми, які вирішуємо

Non-deterministic порядок подій

Часто дані надходять у випадковій послідовності, а фронтенд не сортує їх. Ми завжди застосовуємо DataSet з vis-timeline або сортування на рівні масиву: events.sort((a,b) => a.date - b.date). Без цієї обробки таймлайн показує нісенітницю навіть при 100 подіях.

Некоректне масштабування

Якщо у таймлайна немає обмежень zoomMin і zoomMax, користувач може піти в мікро- або макрорівень, де дані втрачають сенс. У vis-timeline задаємо ліміти: мінімум 1 день, максимум 1 рік — для проєктних таймлайнів. Це дозволяє зберегти читабельність навіть при 10 000 подій.

Відсутність адаптивності

Вертикальні таймлайни часто ламаються на мобільних. Ми використовуємо CSS Flexbox та медіа-запити, а для складних варіантів — бібліотеку react-chrono з її вбудованою мобільною підтримкою. Тестуємо на роздільній здатності від 320px до 1920px.

Як ми це робимо: стек і кейс з нашої практики

Це кейс з нашої практики: наш клієнт потребував таймлайн з drag-and-drop, групуванням по командах і прив'язкою до Jira-задач. Обрали vis-timeline — бібліотеку з перевіреною продуктивністю.За даними документації Vis.js, бібліотека оптимізована для великих обсягів даних.

npm install vis-timeline vis-data 

Створили DataSet для елементів і груп, налаштували локалізацію на українську, задали діапазон від -7 до +30 днів від сьогодні — типові спринти. Важливо: додали обробник select, щоб при кліку на подію відкривалася картка задачі.

import { useEffect, useRef } from 'react'; import { Timeline, DataSet } from 'vis-timeline/standalone'; import 'vis-timeline/styles/vis-timeline-graph2d.css'; function ProjectTimeline({ events, groups }) { const containerRef = useRef<HTMLDivElement>(null); const timelineRef = useRef<Timeline>(); useEffect(() => { if (!containerRef.current) return; const items = new DataSet(events.map(e => ({ id: e.id, group: e.groupId, content: `<div class="timeline-item">${e.title}</div>`, start: e.startDate, end: e.endDate, className: `status-${e.status}` }))); const groupsDS = new DataSet(groups.map(g => ({ id: g.id, content: g.name }))); const timeline = new Timeline(containerRef.current, items, groupsDS, { start: new Date(Date.now() - 7 * 24 * 3600000), end: new Date(Date.now() + 30 * 24 * 3600000), height: '400px', locale: 'uk', groupOrder: 'id', zoomMin: 1000 * 60 * 60 * 24, // мінімум 1 день zoomMax: 1000 * 60 * 60 * 24 * 365 // максимум 1 рік }); timeline.on('select', ({ items: selectedIds }) => { if (selectedIds.length > 0) { const item = events.find(e => e.id === selectedIds[0]); onEventSelect(item); } }); timelineRef.current = timeline; return () => timeline.destroy(); }, []); return <div ref={containerRef} />; } 

Порівняння бібліотек для таймлайнів

vis-timeline обробляє до 10 000 подій без втрати продуктивності, тоді як react-chrono починає гальмувати після 500 — різниця в 20 разів. Це означає, що vis-timeline краще react-chrono в 20 разів для великих наборів даних. Кастомне рішення на Framer Motion не має таких обмежень, але вимагає в 3 рази більше часу на розробку.

Яку бібліотеку обрати для таймлайну?

Якщо потрібен просунутий таймлайн з групуванням і масштабуванням — використовуйте vis-timeline. Якщо достатньо гарної вертикальної стрічки подій — react-chrono. Якщо унікальний дизайн і анімації — кастом на Framer Motion. Ми можемо сумістити: наприклад, vis-timeline для основного таймлайну і react-chrono для попапу з деталями.

Чому React-компоненти вигідніші за готові плагіни?

Готові плагіни (наприклад, jQuery-таймлайни) не інтегруються з сучасним стеком: немає типізації, складно перевикористовувати, важко тестувати. React-компоненти: типізовані, декларативні, легко вбудовуються в Next.js або Vite. Ми збираємо з них живий UI, який живе в одному рантаймі з рештою застосунку. Згідно з документацією React, компонентна архітектура дозволяє ізолювати логіку і спрощує підтримку.

Етапи і терміни роботи

Загальний термін: від 2 до 10 днів залежно від складності. Вартість починається від 500$ за простий компонент, складний інтерактивний таймлайн може коштувати від 1500$. Для точної оцінки зв'яжіться з нами. Ми маємо понад 8 років досвіду з React, реалізували більше 50 таймлайнів для різних проєктів і гарантуємо якість роботи.

Процес роботи

1. Аналітика — вивчаємо вимоги: тип подій, діапазон дат, чи потрібне групування, drag-and-drop.
2. Проєктування — обираємо бібліотеку, проєктуємо компоненти та пропси.
3. Реалізація — пишемо компонент на React/TypeScript, підключаємо дані, налаштовуємо стилі.
4. Тестування — перевіряємо на різних роздільних здатностях, браузерах, з різними обсягами даних (до 10 000 подій).
5. Деплой — здаємо компонент з документацією та прикладами використання.

Що входить у роботу (deliverables)

• Вихідний код компонента на React/TypeScript
• Документація по пропсах і типах даних
• Приклад інтеграції з REST API (JSON-схема)
• Стилізовані стани: завантаження, порожньо, помилка
• Гарантія виправлення багів протягом 3 місяців

Типові помилки при реалізації таймлайнів

• Відсутність debounce при масштабуванні — обробник спрацьовує десятки разів. Додайте onMove з throttling.
• Неправильні типи даних — дати повинні бути об'єктами Date або рядками ISO 8601, інакше vis-timeline видасть помилку.
• Ігнорування локалізації — якщо таймлайн українською, не забудьте параметр locale: 'uk', інакше місяці будуть англійською.

locale: 'uk', locales: { uk: { current: 'Поточний час', time: 'Час', } }