syncfusion-angular-gantt-chart

Syncfusion Angular ガントチャート

Syncfusion Angular ガントチャートコンポーネント（ejs-gantt）を実装および設定するための包括的なスキルです。初期設定から、クリティカルパス、仮想スクロール、リソースビュー、元に戻す／やり直し、状態の永続化、ローカライズ、エクスポート、タスクカレンダー、シリアル番号、高度なスケジュール単位、依存関係の制限、階層チェックボックス選択、タスクバーの描画などの高度な機能までを扱います。

このスキルを使う場面

次のような場合に、このスキルを使用してください。

• Angular ガントチャートコンポーネントをインストールして設定する
• ローカルまたはリモートのデータをガントチャートにバインドする
• タスクのスケジュールモード（自動／手動／カスタム）を設定する
• タスクの依存関係と先行タスクの関係を定義する
• タスクを追加、編集、削除する（セル、ダイアログ、タスクバーによる編集）
• リソースを割り当てて管理する
• 稼働時間、休日、例外のプロジェクトカレンダーとタスクカレンダーを設定する
• タイムライン、ズーム、階層の書式を設定する
• タスクバー、ラベル、データマーカーをカスタマイズする
• 行／セルのフィルタリング、並べ替え、検索、選択を行う
• ツールバー、コンテキストメニュー、または元に戻す／やり直しを有効にする
• Excel または PDF にエクスポートする
• 仮想スクロールまたは状態の永続化を実装する
• ローカライズ、RTL レイアウト、またはタイムゾーン設定を適用する
• 休日、イベントマーカー、クリティカルパス、またはベースラインを扱う

---

ドキュメントとナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

• ng add @syncfusion/ej2-angular-gantt を使用したインストール
• すべてのテーマ（material3、bootstrap5、fluent2、tailwind3）の CSS インポート
• imports と providers を使った Angular のスタンドアロンコンポーネントの設定
• dataSource と taskFields によるデータのバインド — 自己参照形式と階層形式
• 機能サービス（EditService、FilterService、ToolbarService など）の注入
• タイムライン、ツールバー、編集、フィルタリング、並べ替えの設定
• gridLines の値：'Both' | 'Horizontal' | 'Vertical' | 'None'
• よくある設定ミスに対する actionFailure によるエラー処理

データバインディング

📄 参照: references/data-binding.md

• デフォルトのパターン： id と parentID（idMapping と parentIdMapping）を使う自己参照形式のフラット配列 — ユーザーがネストされたデータを明示的に求めない限り、これを使用します
• child 配列を使う階層形式のローカルデータ — ユーザーがネスト構造／ツリー構造を明示的に求めた場合にのみ使用します
• 自己参照形式と階層形式の使い分けを示す判断表
• DataManager とアダプター（ODataV4、WebApiAdaptor、UrlAdaptor）によるリモートデータのバインド
• loadChildOnDemand と hasChildMapping によるオンデマンド読み込み（仮想読み込み）
• async パイプを使った Observable／RxJS データバインディング
• crudUrl、insertUrl、updateUrl、removeUrl、batchUrl によるリモート CRUD
• よくある注意点の表（isPrimaryKey の欠落、誤ったアダプター、親の日付の問題）

Observable CRUD 操作

📄 参照: references/observable-crud.md

• dataSourceChanged イベントを通じた Observable データバインディングで、追加、編集、削除操作を処理する
• 適切な Observable バインディングのため、サービスを BehaviorSubject から拡張する
• タスクデータを正しく取り出す：編集操作には (args.data as any).taskData を使用する
• CRUD 操作の完了後は、ガントチャートに通知するため必ず args.endEdit() を呼び出す
• 単一レコードと複数レコードの削除：args.data.length を確認する
• super.next()／this.next() で更新されたデータを発行し、UI を更新する
• エラーを適切に処理し、失敗した場合も endEdit() が呼び出されるようにする

タスクのスケジュール設定

📄 参照: references/task-scheduling.md

• taskMode: 'Auto'（デフォルト）、'Manual'、'Custom'（タスクごとにブール値フィールドで設定）
• Auto モード：依存関係、稼働時間、休日に基づいて日付を計算します
• Manual モード：すべての日付をデータソース内の値どおりに固定します。リンク時にも調整するには、validateManualTasksOnLinking を使用します
• Custom モード：データソース内のマッピングされたブール値フィールドを使って、タスクごとにスケジュールを設定します
• スケジュール未設定のタスク（allowUnscheduledTasks）— 日付の一部のみを設定し、フローティングバーを表示します
• durationUnit: 'Day' | 'Hour' | 'Minute' | 'Week' | 'Month'
• 値を含む期間単位：'5 days'、'2 weeks'、'1 month'
• daysPerWeek と daysPerMonth — 週／月ベースのスケジュール設定における換算を制御します
• 稼働日： workWeek 配列（デフォルトは月～金）。includeWeekend: true にすると、7 日すべてが稼働日になります
• 稼働時間： dayWorkingTime — { from, to } 範囲の配列（デフォルトは 8～17）。時間単位の期間に影響します
• ベースラインの日付（renderBaseline、baselineStartDate、baselineEndDate、baselineDuration、baselineColor）と、ベースラインをカスタム描画するための baselineTemplate
• work フィールドと workUnit を使った作業スケジュール設定（工数主導型）

カレンダー設定

📄 参照: references/calendar-settings.md

• calendarSettings — ガントチャートの最上位カレンダー設定
• calendarSettings.projectCalendar — すべてのタスクに適用するデフォルトの稼働日、稼働時間、休日、例外
• calendarSettings.taskCalendar — シフト、チーム、地域に基づくスケジュール設定のためのタスク固有のカレンダー
• taskFields.calendarId — タスクレコードを名前付きタスクカレンダーにマッピングします- calendarSettings.taskCalendar は、該当するタスクに対してプロジェクトカレンダーを完全に上書きします
• タスクカレンダーは、稼働時間の計算、期間の計算、休日、週末、依存関係に基づくスケジュール設定に影響します- hoursPerDay — 表示と計算で、稼働期間を日単位の期間値に換算します
• カレンダーの例外を使うと、日付ごとに稼働時間と非稼働時間を上書きできます
• 割り当てられたタスクでは、タスクカレンダーがプロジェクトカレンダーを上書きします
• 休日、週末、稼働時間のルールは、タスクの期間、依存関係の解決、タスクバーの配置に影響します

タスクの依存関係

📄 参照: references/task-dependencies.md

• 依存関係の種類：FS（終了から開始）、SS、FF、SF — 形式：'2FS'、'3SS+1d'
• カンマ区切りで複数の先行タスクを指定：'2FS,3SS'
• d／h／m 単位の先行タスクのラグ／リードオフセット
• autoUpdatePredecessorOffset — 読み込み時にオフセット値を実際の位置に同期します
• allowParentDependency — 親子間および階層をまたぐ依存関係を有効にします
• allowedDependencyTypes — 依存関係の作成と編集を選択した種類に制限します
• editSettings.allowTaskbarEditing: true の場合、コネクタ線をドラッグして編集できます
• actionBegin の requestType: 'validateLinkedTask' — 依存関係の競合を処理します
• プログラムによる操作：addPredecessor()、removePredecessor()、updateRecordById()
• コネクタのスタイル設定には connectorLineWidth と connectorLineBackground を使用します

タスクの制約

📄 参照: references/task-constraints.md

• 8 種類の制約：ASAP（0）、ALAP（1）、MSO（2）、MFO（3）、SNET（4）、SNLT（5）、FNET（6）、FNLT（7）
• taskFields.constraintType（数値）と taskFields.constraintDate（Date）でマッピングします
• 制約は Auto モードでのみ適用されます。Manual モードでは保存されますが、適用されません
• 依存関係との競合は actionBegin イベントで通知されます

タスクの管理

📄 参照： references/managing-tasks.md

• editSettings：allowEditing、allowAdding、allowDeleting、allowTaskbarEditing、mode（'Auto' | 'Dialog'）
• 列ごとの editType によるセル編集：'numericedit'、'defaultedit'、'dropdownedit'、'booleanedit'、'datepickeredit'
• カスタムタブ設定によるダイアログ編集（addDialogFields、editDialogFields）
• プログラムによる操作：addRecord()、updateRecordById()、deleteRecord()、openAddDialog()、openEditDialog(id)
• 展開／折りたたみ：expandAll()、collapseAll()、expandByID(id)、collapseByID(id)；イベント：expanding、expanded、collapsing、collapsed
• actionBegin イベントによる検証（処理をブロックするには args.cancel = true を設定）
• actionComplete と requestType の確認によるサーバー側の CRUD
• ツールバーまたは indent()／outdent() メソッドによる階層のインデント／アウトデント

タスクの分割と結合

📄 参照： references/splitting-and-merging.md

• 階層データでは taskFields.segments、自己参照データでは taskFields.segmentId
• 読み込み時に分割するか、ダイアログの Segments タブまたはコンテキストメニューの SplitTask から動的に分割
• コンテキストメニューの MergeTask またはセグメントをドラッグして結合
• segmentIndex を指定した onTaskbarClick で、クリックされたセグメントを検出
• 制限事項：親タスク／マイルストーンタスクは分割できません。複数タスクバーのリソースビューとは併用できません。

リソース

📄 参照： references/resources.md

• resources（データ）＋ resourceFields（フィールドのマッピング：id、name、unit、group）
• taskFields.resourceInfo でリソースをタスクに関連付け
• リソースビューの表示モード（viewType: 'ResourceView'）では、リソースごとに行を表示
• showOverAllocationAsMultiTaskbar — リソースが過剰割り当てされた場合にタスクバーを積み重ねて表示
• allowTaskbarOverlap — リソース行のタスクバーを重ねるか積み重ねるかを制御（同一リソースの依存関係の描画にも影響）
• 作業ベースのスケジュール設定：work フィールド、taskType（'FixedWork'、'FixedDuration'、'FixedUnit'）
• 作業単位：workUnit: 'Hour' | 'Day' | 'Minute'

カレンダー設定

📄 参照： references/calendar-settings.md

• プロジェクトカレンダーは、プロジェクト全体の既定の稼働スケジュールを定義します
• タスクカレンダーを使用すると、特定のタスクに個別の稼働日、休日、例外を適用できます
• calendarId で、タスクレコードが使用するタスクカレンダーを選択します
• hoursPerDay で、日単位の期間値の解釈方法を制御します
• タスクカレンダーはプロジェクトカレンダーと統合されません。割り当てられたタスクカレンダーが、そのタスクに優先して適用されます
• 複数シフト、複数チーム、または地域固有のスケジュール要件には、タスクカレンダーを使用してください

列

📄 参照： references/columns.md

• 列の field、headerText、width、format、type、template、headerTemplate
• 列の並べ替え（allowReordering）、サイズ変更（allowResizing）
• 列の固定（freeze: 'Left' | 'Right'）— FreezeService が必要です
• queryCellInfo による列の結合
• ツリーの展開／折りたたみ列には treeColumnIndex を使用
• WBS（作業分解構成）列には columnType: 'WBS' を使用
• 通し番号列には enableSerialNumber: true と field: 'SerialNumber' を使用
• 並べ替え、フィルタリング、仮想化、行のドラッグ＆ドロップ、ページング、CRUD、階層の変更後に通し番号が再計算されます
• フィルタリング、検索、並べ替え、展開／折りたたみ、インデント、CRUD、行のドラッグ＆ドロップ、データの更新後に再計算されます
• 列メニュー（showColumnMenu）— 並べ替え、フィルター、自動調整、列の選択
• CRUD 操作では isPrimaryKey が必要です

タイムライン

📄 参照: references/timeline.md

• timelineSettings の設定
• 上位および下位ティアのカスタマイズ
• タイムラインの表示モード（日／週／月／年）
• (date, format, tier, mode) パラメーターを使用するフォーマッター関数
• タイムラインセルの幅（timelineUnitSize）
• カスタム日付形式
• projectStartDate と projectEndDate
• タイムラインの表示範囲（viewStartDate / viewEndDate）
• 週の開始曜日（weekStartDay）
• タイムスケールの自動更新（updateTimescaleView）
• タイムラインの無限スクロール（enableInfiniteTimelineScroll）
• 週末の強調表示（timelineSettings.showWeekend）
• タイムラインセルのツールチップ（showTooltip）
• timelineTemplate — ティアのヘッダーセルにカスタム HTML を表示します（<ng-template #timelineTemplate let-data> を使用し、data.date、data.value、data.tier を参照します）
• タイムラインの移動（previousTimeSpan() / nextTimeSpan()）
• ズームインとズームアウト

タスクバー

📄 参照: references/taskbar.md

• taskbarTemplate、parentTaskbarTemplate、milestoneTemplate — 完全なカスタムテンプレート
• labelSettings：leftLabel、rightLabel、taskLabel（フィールド名またはテンプレート）
• リッチコンテンツのレンダリングに使用する ng-template のラベルテンプレート
• queryTaskbarInfo — 動的スタイル設定：taskbarBgColor、progressBarBgColor、taskbarBorderColor
• 個々のタスクの indicators / データマーカー：date、iconClass、label、tooltip
• tooltipSettings.taskbar テンプレートによるツールチップのカスタマイズ
• taskbarHeight、taskbarCornerRadius、allowTaskbarDragAndDrop

タスクバーの描画

📄 参照: references/taskbar-draw.md

• editSettings.allowTaskbarDraw — タイムライン上にタスクバーを直接描画し、未スケジュールのタスクを作成またはスケジュールできます
• タスクバーの描画動作とユーザーワークフロー
• スケジュール出力：描画した範囲から StartDate、EndDate、Duration を生成します
• 完全に未スケジュール、一部がスケジュール済み、親、子、マイルストーン、手動スケジュールのタスクのシナリオ
• タスクバー編集、ダイアログ編集、セル編集、検証、作業時間、カレンダーのルールとの機能連携
• ツールバーと列の設定を含む実装例
• ベストプラクティスと制限事項

フィルタリングと検索

📄 参照: references/filtering-and-searching.md

• allowFiltering: true + FilterService — メニュー形式と Excel 形式のフィルター
• filterSettings.type：'Menu'（デフォルト） | 'Excel'
• filterSettings.hierarchyMode：'Parent' | 'Child' | 'Both' | 'None'
• filterSettings.columns 配列を使用した読み込み時の初期フィルター
• 検索：allowSearching: true + ツールバーの 'Search'
• searchSettings：fields、operator、ignoreCase
• プログラムによる操作：filterByColumn()、clearFiltering()、search()

並べ替え

📄 参照: references/sorting.md

• allowSorting: true + SortService — 列ヘッダーをクリックして並べ替えます
• 列ごとの無効化：{ field: 'TaskID', allowSorting: false }
• 複数列の並べ替え：Ctrl キーを押しながら追加のヘッダーをクリックします。Shift キーを押しながらクリックすると削除できます
• sortSettings.columns 配列を使用した読み込み時の初期並べ替え
• プログラムによる操作：sortColumn()、removeSortColumn()、clearSorting()

行

📄 参照: references/rows.md

• rowDataBound / queryCellInfo — 行／セルの動的スタイル設定
• rowHeight — 行の高さをピクセル単位で統一して設定します（taskbarHeight より大きくする必要があります）
• queryCellInfo による rowSpan — セルを縦方向に結合します
• allowRowDragAndDrop — 行をドラッグして並べ替え、または親子関係を変更します。rowDrop イベントを使用します
• indent() / outdent() — 選択した行の階層レベルを変更します
• autoFocusTasks — 行を選択したとき、一致するタスクバーにフォーカスします

選択

📄 参照: references/selection.md

• allowSelection: true と SelectionService — 選択機能には必須です
• selectionSettings.mode: 'Row'（デフォルト） | 'Cell' | 'Both'
• selectionSettings.type: 'Single'（デフォルト） | 'Multiple'（Ctrl+クリックで複数選択）
• selectionSettings.enableToggle — クリックすると、すでに選択されている行の選択を解除します
• selectionSettings.hierarchyMode / 階層チェックボックスの選択モード: 'Self' | 'Hierarchy' | 'FilteredHierarchy'
• セルの選択モード: 'Flow' | 'Box' | 'BoxWithBorder'
• プログラムからの操作: selectRow()、selectRows()、selectCell()、clearSelection()、getSelectedRecords()

スクロール

📄 参照: references/scrolling.md

• enableVirtualization: true と VirtualScrollService — 大規模データセット向けの DOM 仮想化
• enableTimelineVirtualization — タイムライン列を個別に仮想化します
• スプリッター: splitterSettings.position（パーセンテージ文字列またはピクセル値）、columnIndex、view（'Default' | 'Grid' | 'Chart'）
• プログラムからの操作: scrollToDate('04/02/2024')、scrollToTaskbar(taskId)
• 仮想スクロールの制限: 行／列テンプレート、グループ化、一部の集計機能はサポートされません

ツールバー

📄 参照: references/toolbar.md

• ToolbarService が必須です。toolbar は文字列配列または ItemModel の混在配列として設定します
• 組み込み項目: 'Add'、'Edit'、'Delete'、'Update'、'Cancel'、'ExpandAll'、'CollapseAll'、'Search'、'Indent'、'Outdent'、'ZoomIn'、'ZoomOut'、'ZoomToFit'、'ExcelExport'、'CsvExport'、'PdfExport'、'CriticalPath'、'Undo'、'Redo'、'SplitTask'、'MergeTask'、'ColumnChooser'
• ItemModel でカスタム項目を追加: text、id、prefixIcon、align、tooltipText
• 視覚的な区切りには { type: 'Separator' } を使用します
• toolbarClick イベント — クリックされた項目を識別するには args.item.id を使用します（形式: '{ganttId}_{itemId}'）
• プログラムから有効化／無効化: enableToolbarItems() / disableToolbarItems()

プログラムによるメソッド

📄 参照: references/gantt-methods.md

• 列ユーティリティ: autoFitColumns()
• 編集操作: cancelEdit()、openAddDialog()、openEditDialog()
• タスク管理: deleteRecord()、convertToMilestone()、changeTaskMode()、updateRecordByID()、updateRecordByIndex()、updateTaskId()、updateDataSource()、updateProjectDates()
• ツールバー操作: enableItems()
• 展開／折りたたみ: expandByIndex()、expandByID()、collapseByIndex()、collapseByID()
• 元に戻す／やり直しのスタック: clearUndoCollection()、clearRedoCollection()、getUndoActions()、getRedoActions()
• データ取得: getCurrentViewData()、getRecordByID()、getTaskByUniqueID()、getTaskInfo()、getTaskbarHeight()、getExpandedRecords()、getGanttColumns()、getGridColumns()
• 書式設定ヘルパー: getDurationString()、getWorkString()
• DOM アクセス: getRowByID()、getRowByIndex()
• 並べ替え: removeSortColumn()
• 選択: selectCells()
• 行の並べ替え: reorderRows()
• スクロール: scrollToTask()、updateChartScrollOffset()

イベント

📄 参照: references/events.md

• ライフサイクル: load、created、dataBound、destroyed
• 編集ライフサイクル: actionBegin（args.cancel = true でキャンセル）、actionComplete、actionFailure
• タスクバー: taskbarEditing、taskbarEdited、onTaskbarClick、queryTaskbarInfo
• 行／セル: rowDataBound、queryCellInfo、rowSelected、rowDeselected、cellSelected
• 展開／折りたたみ: expanding、expanded、collapsing、collapsed
• エクスポート: beforeExcelExport、excelExportComplete、beforePdfExport、pdfExportComplete、pdfQueryTaskbarInfo
• recordDoubleClick — ダブルクリックでカスタム編集画面を開きます

コンテキストメニュー

📄 参照： references/context-menu.md

• enableContextMenu: true + ContextMenuService — 行またはヘッダーを右クリックします
• デフォルトの項目：'AutoFitAll'、'AutoFit'、'SortAscending'、'SortDescending'、'Add'、'Edit'、'Delete'、'Save'、'Cancel'、'Indent'、'Outdent'、'TaskInformation'、'SplitTask'、'MergeTask'
• ContextMenuItemModel でカスタム項目を指定：text、id、iconCss、target（行／ヘッダー）
• contextMenuOpen — 行ごとに項目を動的に非表示／表示します
• contextMenuClick — 項目の選択を処理します

休日とイベントマーカー

📄 参照： references/holidays-and-markers.md

• 休日とイベントマーカーの両方に DayMarkersService が必要です
• holidays：{ from, to?, label, cssClass } の配列 — タスク期間を延長する非稼働日です
• eventMarkers：{ day, label, cssClass, top? } の配列 — 特定の日付に表示される全高の垂直線です
• cssClass と .e-gantt-event-marker／.e-span-label を対象とする CSS で、種類ごとにスタイルをカスタマイズできます
• top プロパティを使うと、同じ日付に重なるマーカーをずらして表示できます

クリティカルパス

📄 参照： references/critical-path.md

• enableCriticalPath: true + CriticalPathService — スラックがゼロまたは負のタスクを赤色で強調表示します
• 'CriticalPath' ツールバー項目 — ユーザーが切り替えるためのボタンです
• getCriticalTasks() — slack 値を含む IGanttData オブジェクトの配列を返します
• queryTaskbarInfo + ganttProperties.isCritical — タスクごとに条件付きで色を設定します
• CSS オーバーライド：.e-critical-path-container、.e-critical-connector-line
• ルール：完了したタスク（100%）は対象外です。親と子のクリティカル性は独立して判定されます。変更があると自動で再計算されます

エクスポート（Excel と PDF）

📄 参照： references/export.md

• Excel：allowExcelExport: true + ExcelExportService を設定し、excelExport()／csvExport() を呼び出します
• PDF：allowPdfExport: true + PdfExportService を設定し、pdfExport() を呼び出します
• ExcelExportProperties：fileName、dataSource、includeHiddenColumn、header、footer
• PdfExportProperties：fileName、pageOrientation、pageSize、fitToWidthSettings、ganttStyle、theme
• PDF のヘッダー／フッターのコンテンツタイプ：Text、Line、PageNumber、Image
• 1 ページに収めてエクスポート：fitToWidthSettings.isFitToWidth: true
• Blob エクスポート：pdfExport({}, true) → Blob は pdfExportComplete イベントで取得できます
• multipleExport を指定して pdfExport() を連続して呼び出すと、複数の Gantt を 1 つの PDF にエクスポートできます
• pdfQueryTaskbarInfo — PDF 出力のタスクバーごとに色を設定します

元に戻す／やり直す

📄 参照： references/undo-redo.md

• enableUndoRedo: true + UndoRedoService — デフォルトで最大 10 ステップです
• undoRedoActions 配列 — 履歴に記録するアクションの種類を選択します（18 種類のアクションに対応）
• undoRedoStepsCount — 履歴の深さを設定します
• キーボード操作：Ctrl+Z／Ctrl+Y。プログラムからの操作：undo()／redo()
• 履歴がなくなると、ツールバーの 'Undo'／'Redo' 項目は自動的に無効になります

状態の永続化

📄 参照： references/state-persistence.md

• enablePersistence: true — フィルター／並べ替え／列の状態を、キー '{id}gantt' を使って localStorage に保存します
• <ejs-gantt> 要素に一意の id が必要です
• リセット方法：clearStorage()、localStorage のキーを手動で削除、または新しい id を設定します
• イミュータブルモード（enableImmutableMode）— 大規模データセットのパフォーマンス向上のため、変更された行のみを再描画します
• 読み込みアニメーション：loadingIndicator.indicatorType — 'Spinner'（デフォルト） | 'Shimmer'
• 手動でスピナーを表示：showSpinner()／非表示：hideSpinner()

ローカライズ、RTL、書式設定

📄 参照： references/localization-rtl.md

• locale プロパティ + setCulture() + L10n.load() — ガントの UI 文字列をすべて翻訳します
• 'gantt' 名前空間のロケールキーの完全なリファレンス
• RTL：[enableRtl]="true" + locale="ar" — レイアウトの方向を反転します
• timezone — 地域をまたいで日付を一貫して扱うための IANA タイムゾーン文字列（例：'America/New_York'、'UTC'）
• 列の日付書式設定：format 文字列または { type: 'date', skeleton: 'yMd' }
• 列の数値書式設定：'N2'、'C2'、'P1' など

---

クイックスタートの例

import { Component } from '@angular/core';
import { GanttModule, EditService, SortService, FilterService, ToolbarService, SelectionService } from '@syncfusion/ej2-angular-gantt';

@Component({
  imports: [GanttModule],
  standalone: true,
  providers: [EditService, SortService, FilterService, ToolbarService, SelectionService],
  selector: 'app-root',
  template: `
    <ejs-gantt
      [dataSource]="data"
      [taskFields]="taskFields"
      [height]="'450px'"
      [toolbar]="toolbar"
      [allowFiltering]="true"
      [allowSorting]="true"
      [editSettings]="editSettings">
    </ejs-gantt>
  `
})
export class AppComponent {
  // Default: self-referential data (flat array with id + parentID)
  // Use hierarchical (child array) only if user explicitly requests it
  public data: object[] = [
    { TaskID: 1, TaskName: 'Project Initiation',    StartDate: new Date('04/02/2024'), Duration: 5,  Progress: 0,  ParentID: null },
    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50, ParentID: 1 },
    { TaskID: 3, TaskName: 'Perform Soil test',      StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50, ParentID: 1 },
    { TaskID: 4, TaskName: 'Soil test approval',     StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50, ParentID: 1, Predecessor: '3FS' }
  ];
  public taskFields: object = {
    id: 'TaskID',         // idMapping
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    parentID: 'ParentID'  // parentIdMapping — null = root task
  };
  public toolbar: string[] = ['Add', 'Edit', 'Delete', 'ExpandAll', 'CollapseAll', 'Search'];
  public editSettings: object = { allowEditing: true, allowAdding: true, allowDeleting: true, allowTaskbarEditing: true };
}

---

一般的なパターン

ユーザーがタスクの編集を必要としている場合

→ editSettings.allowEditing: true を設定し、EditService を注入します → セル編集には mode: 'Auto' を、ダイアログには mode: 'Dialog' を使用します

ユーザーが大規模なデータセットのパフォーマンス向上を必要としている場合

→ references/scrolling.md を参照してください — enableVirtualization: true + VirtualScrollService を有効にします

ユーザーがデータのエクスポートを必要としている場合

→ references/export.md を参照してください — ExcelExportService または PdfExportService を注入します

ユーザーがリソース管理を必要としている場合

→ references/resources.md を参照してください — resources + resourceFields を設定します

ユーザーがカレンダーに基づくタスクのスケジュール設定を必要としている場合

→ references/calendar-settings.md を参照してください — calendarSettings、calendarId、hoursPerDay を設定します

ユーザーが元に戻す／やり直しを必要としている場合

→ references/undo-redo.md を参照してください — UndoRedoService を注入し、enableUndoRedo: true を設定します

ユーザーがローカライズまたは RTL を必要としている場合

→ references/localization-rtl.md を参照してください — ブートストラップ前に L10n.load() を呼び出し、locale と enableRtl を設定します

ユーザーが状態の永続化を必要としている場合

→ references/state-persistence.md を参照してください — enablePersistence: true と一意の id を設定します

ユーザーがタスクの分割／セグメント化を必要としている場合

→ references/splitting-and-merging.md を参照してください — taskFields.segments をマッピングし、EditService を注入します

---

主要なモジュール注入

機能	注入するサービス
編集（追加／編集／削除／タスクバーのドラッグ）	EditService
フィルタリング	FilterService
並べ替え	SortService
ツールバー	ToolbarService
選択	SelectionService
日付マーカー／休日／イベントマーカー	DayMarkersService
クリティカルパス	CriticalPathService
Excel／CSV エクスポート	ExcelExportService
PDF エクスポート	PdfExportService
元に戻す／やり直し	UndoRedoService
列メニュー	ColumnMenuService
コンテキストメニュー	ContextMenuService
仮想スクロール	VirtualScrollService
行のドラッグ＆ドロップ	RowDDService
列の並べ替え	ReorderService
固定列	FreezeService
列のサイズ変更	ResizeService

---

主要なプロパティのリファレンス

プロパティ	型	デフォルト	説明
dataSource	object[] | DataManager	[]	タスクデータ — 自己参照型（フラット）または階層型
taskFields	TaskFieldsModel	—	データフィールドをガントタスクのプロパティにマッピングします
height	string | number	'auto'	コンポーネントの高さ（例：'450px'）
taskMode	string	'Auto'	スケジュールモード：'Auto' | 'Manual' | 'Custom'
editSettings	EditSettingsModel	—	追加／編集／削除／タスクバー編集と編集モードを有効にします
toolbar	string[] | ItemModel[]	—	ツールバーボタン — ToolbarService が必要です
allowFiltering	boolean	false	列のフィルターメニューを有効にします — FilterService が必要です
filterSettings	FilterSettingsModel	—	type、hierarchyMode、columns（初期フィルター）
allowSorting	boolean	false	列の並べ替えを有効にします — SortService が必要です
sortSettings	SortSettingsModel	—	読み込み時に適用する初期並べ替え用の columns 配列
allowSelection	boolean	true	行／セルの選択を有効にします — SelectionService が必要です
selectionSettings	SelectionSettingsModel	—	mode、type、enableToggle、cellSelectionMode
enableCriticalPath	boolean	false	クリティカルパスを強調表示します — CriticalPathService が必要です
enableUndoRedo	boolean	false	元に戻す／やり直しを有効にします — UndoRedoService が必要です
undoRedoActions	string[]	（すべての操作）	履歴に記録する操作の種類
undoRedoStepsCount	number	10	元に戻す／やり直しの履歴の最大数
enablePersistence	boolean	false	フィルター／並べ替え／列の状態を localStorage に保存します
enableImmutableMode	boolean	false	データ更新時に変更された行のみを再描画します
allowExcelExport	boolean	false	Excel エクスポートを有効にします — ExcelExportService が必要です
allowPdfExport	boolean	false	PDF エクスポートを有効にします — PdfExportService が必要です
enableContextMenu	boolean	false	右クリックのコンテキストメニューを有効にします — ContextMenuService が必要です
contextMenuItems	string[] | ContextMenuItemModel[]	（デフォルト）	コンテキストメニュー項目
enableVirtualization	boolean	false	大規模データセット向けに DOM 仮想化を有効にします — VirtualScrollService が必要です
enableTimelineVirtualization	boolean	false	タイムライン列を仮想化します
renderBaseline	boolean	false	現在のタスクバーと並べてベースラインバーを表示します
baselineTemplate	string | TemplateRef	—	ベースラインバーを描画するカスタムテンプレート
baselineColor	string	'red'	ベースラインバーの色
allowUnscheduledTasks	boolean	false	開始日／終了日／期間が設定されていないタスクを許可します
validateManualTasksOnLinking	boolean	false	依存関係リンクの変更時に手動タスクの日付を調整します
allowParentDependency	boolean	true	親タスクと子タスク間の依存関係を許可します
autoUpdatePredecessorOffset	boolean	false	読み込み時に先行タスクのオフセットを実際の位置に同期します
enableInfiniteTimelineScroll	boolean	false	タイムラインの無限水平スクロールを有効にします
highlightWeekends	boolean	false	タイムラインの週末列に網掛けします
gridLines	string	'Both'	グリッド線：'Both' | 'Horizontal' | 'Vertical' | 'None'
rowHeight	number	36	各行の高さ（ピクセル単位）
allowRowDragAndDrop	boolean	false	行をドラッグして並べ替えたり、親子関係を変更したりできます
showColumnMenu	boolean	false	列ヘッダーのコンテキストメニュー — ColumnMenuService が必要です
timelineSettings	TimelineSettingsModel	—	TreeGrid／チャート分割用の topTier、bottomTier、timelineUnitSize、weekStartDay
timelineViewMode	string	—	ショートカット：'Hour' | 'Day' | 'Week' | 'Month' | 'Year'
projectStartDate	Date | string	（データから取得）	タイムラインの開始境界を固定します
projectEndDate	Date | string	（データから取得）	タイムラインの終了境界を固定します
holidays	HolidayModel[]	[]	ラベル付きの非稼働日 — DayMarkersService が必要です
eventMarkers	EventMarkerModel[]	[]	縦方向のマーカー線 — DayMarkersService が必要です
resources	object[]	—	リソースデータ配列
resourceFields	ResourceFieldsModel	—	リソースの id、name、unit、group フィールドをマッピングします
locale	string	'en-US'	ローカライズ用のカルチャコード（例：'fr'、'ar'）
enableRtl	boolean	false	右から左へのレイアウト
timezone	string	（ブラウザー）	IANA タイムゾーン（例：'UTC'、'America/New_York'）
durationUnit	string	'Day'	デフォルトの期間単位：'Day' | 'Hour' | 'Minute'
workUnit	string	'Hour'	作業スケジュールの単位：'Hour' | 'Day' | 'Minute'
workWeek	string[]	月～金	稼働日：['Monday','Tuesday','Wednesday','Thursday','Friday']
includeWeekend	boolean	false	週7日すべてを稼働日として扱います
dayWorkingTime	object[]	[{from:8,to:17}]	1日あたりの稼働時間帯：[{ from: 8, to: 12 }, { from: 13, to: 17 }]
dateFormat	string	'MM/dd/yyyy'	すべての日付列に適用するグローバルな日付表示形式
splitterSettings	SplitterSettingsModel	—	TreeGrid／チャート分割用の position、columnIndex、view
loadingIndicator	LoadingIndicatorModel	—	indicatorType：'Spinner' | 'Shimmer'