Іспользуйце 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 або актуалізацыі локальнага стану, каб зафіксаваць змены. Калбэк являе сабою мост ад дзеянняў на дыяграме да вашага шару дадзеных; точны пункт прызначэння залежыць ад архітектуры прыкладнага програма.

Адэнт у Gantt API калі трэба

Дзеянне дзеяносцей часама выклікае патрэбу больш за простыя настройкі: прасуванне часовай лініі ў кодзе, чытанне даных задачы або дадзенне спецыяльных настроек.

У дэмане экземпляр 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.