@levelcaptech/gantt-task-react-custom

v0.5.1

Published

10 days ago

Interactive Gantt Chart for React with TypeScript.

Downloads

148

0High
0Medium
0Low

levelcap

react gantt typescript chart svg gantt-chart gantt chart react-gantt task

gantt-task-react

ライセンス

MIT

元になったプロジェクト: https://github.com/MaTeMaTuK/gantt-task-react

TypeScript を用いた React 向けのインタラクティブなガントチャート。

example

ライブデモ

インストール

npm install @levelcaptech/gantt-task-react-custom

Requirements

Node.js: 20.x（推奨）
- CI 環境（GitHub Actions）は Node.js 20.x で統一されています。
- React 18 は Node.js 20 で問題なく動作します。
React: 18.x（必須）
- 本プロジェクトは react / react-dom の peerDependencies として ^18.0.0 を指定しています。
- React 18 系のみを正式サポートしています。
- React 17 / 16 は非サポートです。

DevContainer（npm publish 対応）

VS Code Dev Containers で npmjs.com への publish を行う環境を用意しています。セットアップと利用方法は docs/DEVCONTAINER.md を参照してください。

使い方

import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from '@levelcaptech/gantt-task-react-custom';
import "@levelcaptech/gantt-task-react-custom/dist/index.css";

let tasks: Task[] = [
    {
      start: new Date(2020, 1, 1),
      end: new Date(2020, 1, 2),
      name: 'Idea',
      id: 'Task 0',
      type:'task',
      progress: 45,
      isDisabled: true,
      styles: { progressColor: '#ffbb54', progressSelectedColor: '#ff9e0d' },
    },
    ...
];
<Gantt tasks={tasks} />

次のアクションを処理できます

<Gantt
  tasks={tasks}
  viewMode={view}
  onDateChange={onTaskChange}
  onTaskDelete={onTaskDelete}
  onProgressChange={onProgressChange}
  onDoubleClick={onDblClick}
  onClick={onClick}
/>

example の起動方法

cd ./example
rm -rf node_modules
npm install
npm start

注意:

このリポジトリでは npm link や手動 symlink を使用しないでください。React の二重読み込みが発生し、「Invalid hook call」を引き起こす可能性があります。
ルートの package.json やビルド設定を変更した場合は、docs/REBUILD.md に従って全体のリビルド手順を実施してください。

Gantt 設定

GanttProps

EventOption

* メソッドが false を返すかエラーの場合、チャートは操作を取り消します。パラメーター children は 1 階層分のレコードを返します。

DisplayOption

CalendarConfig

日本カレンダー標準対応およびカスタム稼働日設定を提供します。calendar プロパティに設定を渡すことで有効化されます（オプトイン式）。

使用例

import { Gantt } from '@levelcaptech/gantt-task-react-custom';
import type { CalendarConfig } from '@levelcaptech/gantt-task-react-custom';

const calendarConfig: CalendarConfig = {
  locale: "ja",
  enableJPHoliday: true,
  highlightNonWorkingDays: true,
  workOnSaturday: false,
  extraHolidays: ["2024-12-30", "2024-12-31"], // 年末特別休業
  extraWorkingDays: ["2024-01-08"], // 祝日（成人の日）だが特別稼働日
};

<Gantt
  tasks={tasks}
  calendar={calendarConfig}
  locale="ja-JP"
/>

稼働日判定の優先順位

最優先: extraWorkingDays - 指定された日付は必ず稼働日になります
次: extraHolidays - 指定された日付は非稼働日になります
標準: 週末（日曜日、workOnSaturday が false の場合は土曜日も）と日本の祝日（enableJPHoliday が true の場合）

注意事項

calendar プロパティを指定しない場合、カレンダー機能は無効化され、従来の動作を維持します（後方互換性）。
日本の祝日データは 2024-2026 年分がライブラリに静的に含まれています。
無効な ISO 日付文字列は無視され、例外は投げられません。
日付表示は Intl.DateTimeFormat を使用して MM/dd(曜) 形式で表示されます（日本語ロケール時）。

StylingOption

TooltipContent: React.FC<{ task: Task; fontSize: string; fontFamily: string; }>;
TaskListHeader: React.FC<{ headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string;}>;
TaskListTable: React.FC<{ rowHeight: number; rowWidth: string; fontFamily: string; fontSize: string; locale: string; tasks: Task[]; selectedTaskId: string; setSelectedTask: (taskId: string) => void; }>;

TaskList 列の表示制御（visibleFields）

TaskList の表示列は visibleFields で指定します。DEFAULT_VISIBLE_FIELDS に progress 列は含まれないため、進捗列は opt-in です。

import { DEFAULT_VISIBLE_FIELDS, VisibleField } from "@levelcaptech/gantt-task-react-custom";

const visibleFields: VisibleField[] = [
  "name",
  "start",
  "end",
  "progress",
  ...DEFAULT_VISIBLE_FIELDS.filter(field =>
    !["name", "start", "end"].includes(field)
  ),
];

<Gantt
  tasks={tasks}
  visibleFields={visibleFields}
  onCellCommit={onCellCommit}
/>;

progress セルの編集では、入力値は 5 の倍数に丸められ、onCellCommit には "0"〜"100" の文字列が通知されます。

Task

*必須

ライセンス

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

gantt-task-react

ライセンス

TypeScript を用いた React 向けのインタラクティブなガントチャート。

ライブデモ

インストール

関連リンク

Requirements

DevContainer（npm publish 対応）

使い方

example の起動方法

Gantt 設定

GanttProps

EventOption

DisplayOption

CalendarConfig

使用例

稼働日判定の優先順位

注意事項

StylingOption

TaskList 列の表示制御（visibleFields）

Task

ライセンス