Використовуйте DHTMLX React Gantt з Remix для створення додатків з плануванням проєктів

Інтерфейси планування проектів у React зазвичай мають справу одночасно з двома вимогами: інтенсивне інтерактивне планування на клієнтській стороні та передача даних, які мають надходити без затримок для графіка. У міру збільшення кількості завдань та розгалуження робочих процесів здатність Gantt-діаграми залишатися реактивною залежить як від способу завантаження даних маршрутами, так і від самої бібліотеки графіків.

Remix знаходиться у тій частині цього компромісу, яка пов’язана з серверною обробкою. У поєднанні з DHTMLX React Gantt він надає екранам планування можливість ефективно завантажувати інформацію, зберігаючи при цьому можливість свободного пересування, редагування та поєднання завдань у часовій шкалі. Публічний стартер на GitHub під назвою DHTMLX/react-gantt-remix-starter є конкретним прикладом інтеграції: https://github.com/DHTMLX/react-gantt-remix-starter

Що додає Remix до застосунку React Gantt

У попередніх описах вже поєднуються складні інструменти планування з технологією SSR у Next.js. Remix підходить до цього інтегрування з іншим підходом: він використовує знайомі веб-API та React Router замість створення паралельної моделі отримання даних.

Цей вибір полегшує розуміння процесів маршрутизації та передачі даних у структурі коду. Для діаграм Ганта, інструментів планування та інших панелей керування з великою кількістю даних часто потрібна чітка взаємодія з сервером, тому пряма структура маршрутів та лоадерів допомагає краще, ніж нечіткі механізми фреймворку.

Стартовий проект зосереджується на тому, як відбувається відображення контенту між Remix та React Gantt. Він охоплює:

• завантаження даних з маршруту
• збереження стабільності конфігурації Ганта
• відправку змін у інтерфейс назад у діаграму
• звернення до API Ганта, коли пропсів недостатньо

Завантажувачі, дії та механізми зберігання даних навмисно не враховуються. Ці елементи змінюються залежно від архітектури кожного продукту. Завдання демонстрації — показати, що DHTMLX React Gantt може використовуватися в моделі відображення Remix без спеціальних обгорток, призначених лише для SSR, чи особливого форматування.

Починаючи з версії 9.0.12, DHTMLX React Gantt працює з фреймворками SSR, такими як Next.js та Remix, без додаткових клієнтських компонентів чи одноразової налаштування.

Деталі інтеграції: підключення Remix та DHTMLX React Gantt

Описані нижче практичні етапи є основою для того, щоб Remix у поєднанні з React Gantt функціонував у реальному маршруті.

Відображення Gantt-діаграми в маршруті Remix

Діаграма знаходиться у власному компоненті GanttChart. У Remix цей компонент імпортується до звичайного маршруту та відображається як будь-який інший елемент React-дерева — не потрібен жодний спеціальний API маршруту.

import GanttChart from '~/components/Gantt/Gantt';
import type { Route } from './+types/home';
import { tasks, links } from '~/data/demoData';

export default function Home() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <GanttChart tasks={tasks} links={links} />
    </div>
  );
}

Цей маршрут визначає структуру сторінки та потік даних. React Gantt відповідає за візуалізацію часової шкали та обробку змін. Завдання та посилання надходять у вигляді параметрів; зміни записуються через функцію-колбек save.

У прикладі використовуються статичні демонстраційні дані, щоб форма залишалась зрозумілою. Той самий шлях параметрів працює, коли загрузчики Remix надають завдання та посилання, отримані з сервера.

Одна поширена помилка: елемент Gantt потребує чітко визначеного розміру. Без встановленої висоти (наприклад width: '100vw', height: '100vh') компонент може бути завантажений, але діаграма залишатиметься порожньою.

Збереження стабільності конфігурації Gantt

GanttConfig керує масштабами, датами, шириною сітки та іншими параметрами користувацького інтерфейсу.

Об’єкти простого типу, які виділяються під час відображення, отримують нову посилання після кожного проходження обробки. Введення нового об’єкта конфігурації до Gantt може змусити до повної перезапуску. У демонстрації конфігурація заморожується за допомогою useMemo:

const config: GanttConfig = useMemo(
  () => ({
    grid_width: 500,
    scale_height: 90,
    scales: [
      { unit: 'year', step: 1, date: '%Y' },
      { unit: 'month', step: 1, date: '%M' },
      { unit: 'day', step: 1, date: '%d %M' },
    ],
  }),
  []
);

Об’єкт, який було збережено у пам’яті, створюється лише один раз та використовується протягом усього життя компонента, тому випадкові переробки батьківських елементів не призводять до перебудови діаграми.

Обробка змін користувача за допомогою data.save

Gantt — це редактор, а не просто зображення. Користувачі додають завдання, змінюють дати, переставляють залежності та видаляють рядки.

DHTMLX React Gantt відображає ці зміни через data.save:

data={{
  save: (entity: string, action: string, data: Task | Link, id: string | number) => {
    console.log(`${entity} - ${action} - ${id}`, data);
  },
}}

У зразку коду керуюча функція лише записує інформацію. У продакшені саме тут Remix-дії, HTTP-запити чи оновлення локального стану зберігають зміни. Керуюча функція є мостом від дій з діаграми до шару даних; конкретна мета залежить від архітектури додатку.

Доступ до API Gantt за потреби

Деякі сценарії вимагають більшого, ніж просто декларативні параметри: прокручування часової шкали в коді, зчитування даних завдання чи додавання власної логіки.

У демо-версії екземпляр Gantt зберігається за допомогою useRef:

const ganttRef = useRef<ReactGanttRef>(null);

const gantt = ganttRef.current?.instance;
if (!gantt) return;

// here you can call any Gantt API method
console.log('All tasks:', gantt.getTaskByTime());
gantt.showDate(new Date());

Цей реф дозволяє отримати доступ до базового API без примусового перерендерингу React. Прості діаграми можуть взагалі не потребувати цього. У міру зростання складності продукту імперативний доступ забезпечує практичність власних інтеракцій.

Коли ці механізми стають зрозумілими, початковий репозиторій та посібник з інтеграції Remix за адресою https://docs.dhtmlx.com/gantt/integrations/react/remix/ стають легшими для повного опанування.

Підсумок

Початковий проект Remix — це не повна архітектура продукту. Він демонструє, як процес рендерингу, передача даних та взаємодія з Gantt можуть існувати в проекті Remix поруч із розширеним віджетом планування.

Звідти ви можете додати функцію збереження даних на сервері, впровадити сховище чи розширити графік за допомогою власної логіки. Разом із посібником документації демо-версія є придатною основою для інтерфейсів планування проектів, сумісних із SSR.