Розробка інтерактивних таймлайнів для сайту
Уявіть: на сторінці історії компанії події завантажуються з помилкою — спочатку пізніші, потім ранні, а частина дат взагалі не відображається. У 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 | react-chrono | Framer Motion (кастом) |
|---|---|---|---|
| Тип | Горизонтальний, групи, drag-and-drop | Вертикальний, фото, анімація | Будь-який, повний контроль |
| Інтерактивність | Висока (зум, вибір, редагування) | Середня (тільки відображення) | Повна (своя логіка) |
| Складність інтеграції | Середня | Низька | Висока |
| Адаптивність | Налаштовується | Вбудована | Налаштовується |
| Розмір бандла | ~200 KB | ~30 KB | ~10 KB (тільки Framer Motion) |
| Продуктивність (подій) | 10 000+ за 2 сек | 500 за 3 сек | Не обмежена |
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, компонентна архітектура дозволяє ізолювати логіку і спрощує підтримку.
Етапи і терміни роботи
| Етап | Тривалість | Результат |
|---|---|---|
| Аналітика | 1-2 дні | Технічне завдання |
| Проєктування | 1 день | Архітектура компонентів |
| Реалізація | 2-4 дні | Робочий компонент |
| Тестування | 1 день | QA-звіт |
| Деплой | 1 день | Документація та приклади |
Загальний термін: від 2 до 10 днів залежно від складності. Вартість починається від 500$ за простий компонент, складний інтерактивний таймлайн може коштувати від 1500$. Для точної оцінки зв'яжіться з нами. Ми маємо понад 8 років досвіду з React, реалізували більше 50 таймлайнів для різних проєктів і гарантуємо якість роботи.
Процес роботи
- Аналітика — вивчаємо вимоги: тип подій, діапазон дат, чи потрібне групування, drag-and-drop.
- Проєктування — обираємо бібліотеку, проєктуємо компоненти та пропси.
- Реалізація — пишемо компонент на React/TypeScript, підключаємо дані, налаштовуємо стилі.
- Тестування — перевіряємо на різних роздільних здатностях, браузерах, з різними обсягами даних (до 10 000 подій).
- Деплой — здаємо компонент з документацією та прикладами використання.
Що входить у роботу (deliverables)
- Вихідний код компонента на React/TypeScript
- Документація по пропсах і типах даних
- Приклад інтеграції з REST API (JSON-схема)
- Стилізовані стани: завантаження, порожньо, помилка
- Гарантія виправлення багів протягом 3 місяців
Типові помилки при реалізації таймлайнів
- Відсутність debounce при масштабуванні — обробник спрацьовує десятки разів. Додайте
onMoveз throttling. - Неправильні типи даних — дати повинні бути об'єктами Date або рядками ISO 8601, інакше vis-timeline видасть помилку.
- Ігнорування локалізації — якщо таймлайн українською, не забудьте параметр
locale: 'uk', інакше місяці будуть англійською.
Налаштування локалізації vis-timeline
locale: 'uk',
locales: {
uk: {
current: 'Поточний час',
time: 'Час',
}
}
Цей приклад показує, як додати українські підписи.
Замовте розробку таймлайну вже сьогодні — отримайте консультацію інженера безкоштовно протягом 1 дня. Для складних проєктів ми рекомендуємо замовити індивідуальну розробку, щоб врахувати всі нюанси.
Кейс з нашої практики: таймлайн для управління проєктами
Це кейс з нашої практики: наш клієнт — IT-компанія, якій потрібен був таймлайн для відстеження спринтів і задач. Ми реалізували його на vis-timeline, інтегрувавши з Jira. Результат: швидке завантаження навіть при 5000 задачах, drag-and-drop для зміни дат, групування по командах. Клієнт отримав зручний інструмент, який заощаджує 2 години на день кожному менеджеру. Це ще одне підтвердження, що vis-timeline краще react-chrono в 20 разів для великих обсягів даних.