今回の記事では3つのReactガントチャートライブラリを紹介します。
frappe-gantt-react
FrappeのガントチャートライブラリをラップしたReactコンポーネントです。
インストール方法
以下のコマンドでライブラリをインストールできます。
なおこのライブラリを使用するにはsassライブラリも必要なため、同時にインストールします。
$ npm install --save frappe-gantt-react sassサンプルコード
import React from "react";
import { FrappeGantt, Task as FrappeTask } from "frappe-gantt-react";
const Frappe: React.FC = () => {
// 本来はstateの利用を推奨
const tasks = [
{
id: "Task1",
name: "ガントチャートを表示する",
start: "2022-01-1",
end: "2022-01-10",
progress: 50,
dependencies: "",
},
{
id: "Task2",
name: "タスクを表示する",
start: "2022-01-10",
end: "2022-01-20",
progress: 30,
dependencies: "Task1",
},
{
id: "Task3",
name: "タスクを編集する",
start: "2022-01-20",
end: "2022-01-30",
progress: 10,
dependencies: "Task1, Task2",
},
] as FrappeTask[];
const handleClick = (task: FrappeTask) => {
console.log(task);
};
const handleDateChange = (
task: FrappeTask,
start: moment.Moment,
end: moment.Moment
) => {
console.log(task);
console.log(start);
console.log(end);
};
const handleProgressChange = (task: FrappeTask, progress: number) => {
console.log(task);
console.log(progress);
};
const handleTasksChange = (tasks: FrappeTask[]) => {
console.log(tasks);
};
return (
<div>
<h1>frappe-gantt-react</h1>
{tasks.length ? (
<FrappeGantt
tasks={tasks}
onClick={handleClick}
onDateChange={handleDateChange}
onProgressChange={handleProgressChange}
onTasksChange={handleTasksChange}
/>
) : (
<p>※ タスクが存在しません</p>
)}
</div>
);
};コンポーネントはtasksプロパティが必須となっています。
なおこちらのtasksプロパティですが、配列が空の場合はエラーとなってしまうため、配列の要素数が0の場合はコンポーネントを非表示にする必要があります。
FrappeGanttコンポーネントはさまざまなイベントプロパティをサポートしていて、クリック時や日付を変更することでイベントが発火します。
また、日・月・年のような表示形式を変更できるviewModeプロパティもサポートしています。
サンプルコードの実行結果
gantt-task-react
タスク表示以外に、マイルストーンやプロジェクト表示も可能なガントチャートライブラリです。
一部日本語表示にも対応しています。
インストール方法
以下のコマンドでgantt-task-reactをインストールできます。
$ npm install --save gantt-task-reactサンプルコード
import React from "react";
import { Gantt as GanttChart, Task as GanttTask } from "gantt-task-react";
import "gantt-task-react/dist/index.css";
const GanttTaskReact: React.FC = () => {
// 本来はstateでの利用を推奨
const tasks: GanttTask[] = [
{
id: "ガントチャート",
name: "ガントチャート",
type: "project",
start: new Date(2022, 0, 1),
end: new Date(2022, 0, 20),
progress: 75,
},
{
id: "ガントチャートの表示",
name: "ガントチャートの表示",
type: "task",
start: new Date(2022, 0, 1),
end: new Date(2022, 0, 10),
progress: 100,
project: "ガントチャート",
},
{
id: "ガントチャートの編集",
name: "ガントチャートの編集",
type: "task",
start: new Date(2022, 0, 10),
end: new Date(2022, 0, 20),
progress: 50,
project: "ガントチャート",
dependencies: ["ガントチャートの表示"],
},
];
const handleDoubleClick = (task: GanttTask) => {
console.log(`${task.name}をクリックしました`);
};
/**
* deleteキー押下で発火
*/
const handleDelete = async (task: GanttTask) => {
const result = window.confirm(`${task.name}を削除してもよろしいでしょうか`);
if (result) {
console.log(`${task.name}を削除しました`);
}
return result;
};
const handleDateChange = async (task: GanttTask) => {
console.log(`${task.name}の日付を変更しました`);
};
const handleProgressChange = async (task: GanttTask) => {
console.log(`${task.name}の進捗を変更しました`);
};
return (
<div>
<h1>gantt-task-react</h1>
{tasks.length ? (
<GanttChart
tasks={tasks}
onDoubleClick={handleDoubleClick}
onDelete={handleDelete}
onDateChange={handleDateChange}
onProgressChange={handleProgressChange}
locale="jap"
/>
) : (
<p>※ タスクが存在しません</p>
)}
</div>
);
};コンポーネントはtasksプロパティが必須となっています。
なおこちらのtasksプロパティですが、配列が空の場合はエラーとなってしまうため、配列の要素数が0の場合はコンポーネントを非表示にする必要があります。
その他のプロパティとして、大まかに分類するとイベント系・表示系・スタイル系のプロパティをサポートしています。
例えばイベント系プロパティのonProgressChangeを実装すると、マウス操作でタスクの進捗を変更できるようになります。
また、表示系プロパティのlocaleに「jap」という値を渡すと日付部分を日本語表記にすることが可能です。値はSO 639-2かJava Localeの形式で渡す必要があります。
サンプルコードの実行結果
react-google-charts
GoogleのGoogle ChartsをラップしたReactコンポーネントです。
react-google-charts(Google Charts)はガントチャート以外にも棒グラフや円グラフなど、数十種類のグラフを描画できます。
インストール方法
以下のコマンドでreact-google-chartsをインストールできます。
$ npm install --save react-google-chartsサンプルコード
import React from "react";
import { Chart } from "react-google-charts";
const columns = [
{
type: "string",
label: "タスクID",
},
{
type: "string",
label: "タスク名",
},
{
type: "date",
label: "開始日",
},
{
type: "date",
label: "終了日",
},
{
type: "number",
label: "間隔",
},
{
type: "number",
label: "進捗",
},
{
type: "string",
label: "依存関係",
},
];
const ReactGoogleCharts: React.FC = () => {
const rows = [
[
"ガントチャートの表示",
"ガントチャートの表示",
new Date(2022, 0, 1),
new Date(2022, 0, 3),
null,
100,
null,
],
[
"ガントチャートの追加",
"ガントチャートの追加",
new Date(2022, 0, 3),
new Date(2022, 0, 12),
null,
50,
"ガントチャートの表示",
],
[
"ガントチャートの編集",
"ガントチャートの編集",
new Date(2022, 0, 3),
new Date(2022, 0, 6),
null,
100,
"ガントチャートの表示",
],
[
"ガントチャートの削除",
"ガントチャートの削除",
new Date(2022, 0, 6),
new Date(2022, 0, 10),
null,
80,
"ガントチャートの表示, ガントチャートの編集",
],
];
const data = [columns, ...rows];
return (
<div>
<h1>react-google-charts</h1>
{rows.length ? (
<Chart
chartType="Gantt"
data={data}
loader={<div>Now Loading...</div>}
options={{
gantt: {
trackHeight: 30,
},
}}
/>
) : (
<p>※ タスクが存在しません</p>
)}
</div>
);
};コンポーネントはchartTypeプロパティが必須となっています。
dataプロパティは必須ではありませんが、空の場合やデータ形式に誤りがある場合はエラーメッセージが画面に表示されます。dataプロパティにはタスクの一覧のみではなくカラムの形式も渡す必要があることに注意してください。
このコンポーネントはheightをピクセルで指定するという性質上、あらかじめ決められたグラフを出力するプロジェクトに適しています。何も指定しなかった場合のheightは親要素の幅によって決まります。
少し取り扱いが難しいコンポーネントでしたが、ガントチャート以外にもさまざまなグラフに対応しているため、複数種類のグラフを描画したい場面に最適です。
サンプルコードの実行結果
終わりに
今回の記事では3つのReactガントチャートライブラリをまとめてみました。
それぞれ異なる部分があるため、プロジェクトごとに最適なライブラリを選択する必要がありそうです。
