開発環境

Nuxt.js ver3
ランタイム： Bun

下準備

バージョン付きのリリースが更新されていないので、
githubのmasterブランチから、最新commitを取得します。

これで、
node_modules/frappe-gantt こちらにファイルが展開されます

#最新のcommit idを、githubの該当ブランチから確認して取得
bun add frappe/gantt#b7deffd53954ebae5c6dd77bdab54551ca1d17e8

importでロードするファイルを確認すると、src/index.jsとなっている。

{
  "name": "frappe-gantt",
  "version": "0.6.1",
  "description": "A simple, modern, interactive gantt library for the web",
  "main": "src/index.js",

...

jsエラーが出た時に
直接src/index.jsを編集（console.logなどを追加）してデバッグしながら、作業を進めていけるよう
frappe-ganttのコードをnuxtのsrc以下にcloneし、importします。

cd src
git clone https://github.com/frappe/gantt.git

yuna

ファイル記述

githubのREADMEを見ながら最も簡単なサンプルを記述。

gantt.vue

<script setup>
//デバッグ用に、node_modulesからコピーしてきたファイルを参照させる(キャッシュさせないため)
//import Gantt from 'frappe-gantt';
//import 'frappe-gantt/dist/frappe-gantt.min.css';
import Gantt from '~/gantt/src/index.js';
import '~/gantt/dist/frappe-gantt.min.css';

const gantt = ref(null);
var tasks = [
  {
    id: 'Task 1',
    name: 'Redesign website',
    start: '2016-12-28',
    end: '2016-12-31',
    progress: 20,
    dependencies: 'Task 2, Task 3'
  },
];

onMounted(async () => {
  await projectTree.value.reset();
  gantt.value = new Gantt("#gantt", tasks, {});
});
</script>

<template>
  <div style="max-height: 100%; width: 100vw;">
  <svg id="gantt"></svg>
  </div>
</template>
<style scoped>
</style>

表示はできました。が、いくつかの問題が発生。

consoleにエラーが表示
タスクの日付や期日の変更が動かない（dragする場所が表示されない）

yuna

consoleエラーの対応

エラー場所を調べたところ、
以下のコードのこの部分で、$todayにnullが入ってしまい、その後の処理でエラーが発生していました。

let $today = document.getElementById(date_utils_default.format(date).replaceAll(" ", "_"));

frappe-gantt/src/index.js

make_grid_highlights() {
    if (this.options.highlight_weekend) this.highlightWeekends();
    if (this.view_is(VIEW_MODE.DAY) || this.view_is(VIEW_MODE.WEEK) || this.view_is(VIEW_MODE.MONTH) || this.view_is(VIEW_MODE.YEAR)) {
      const { x: left, date } = this.computeGridHighlightDimensions(this.options.view_mode);
      const top = this.options.header_height + this.options.padding / 2;
      const height = (this.options.bar_height + this.options.padding) * this.tasks.length;
      this.$current_highlight = this.create_el({ top, left, height, classes: "current-highlight", append_to: this.$container });
      let $today = document.getElementById(date_utils_default.format(date).replaceAll(" ", "_"));
      $today.classList.add("current-date-highlight");
      $today.style.top = +$today.style.top.slice(0, -2) - 4 + "px";
      $today.style.left = +$today.style.left.slice(0, -2) - 8 + "px";
    }
  }

この前のコードにconsole.logを埋め込んで調査。

結論としては、現在日の部分をハイライトする処理で、
現在日が存在しない状況になっていました。
サンプルで１つだけ登録したタスクの日付が2年前以上だったため、画面に現在日が存在しないためです。

issueをチェックしたところ、すでに提出済みで、PullRequestまで出ている状況。
他にもいくつかハマりそうなissueがあったので、直近で重要そうなPullRequestをローカルでマージして使うことにします。
▼やり方はこちら

yuna

エラー発生。

デバッグし、該当するissueを発見。

これ修正済みとのことだが、8/19時点のmasterでまだ発生するのでメモ。後でissueに登録する

修正メモ

bar.js

	update_bar_position({ x = null, width = null }) {
		const bar = this.$bar;
		if (x) {
			// get all x values of parent task
			const xs = this.task.dependencies
				.filter((dep) => this.gantt.get_bar(dep)) //ここを追加
				.map((dep) => {
					return this.gantt.get_bar(dep).$bar.getX();
				});```