Fix/upgrade chart.js upto 3.x

[mcdmaster]

👏 解決する issue / Resolved Issues

• close #6163

📝 関連する issue / Related Issues

• #6313

⛏ 変更内容 / Details of Changes

• revisit #6313 with scope narrowed
• seek remediation tool or practical approach that makes easier
• if found useful, release to "development" branch

📸 スクリーンショット / Screenshots

see #6313

[mcdmaster]

やっとこさ、Chart.js@3 でチャートを表示するまでに至りました。ただ、座標等はめちゃくちゃです。スクショをご覧ください。 Chart.js のサイトには、チャートの表示様式を決めるパラメータの「お作法」に、Ver2 と Ver3 との間で小さくない違いがあると示されています。※下記ページ下部を参照のこと https://www.chartjs.org/docs/latest/getting-started/v3-migration.html それを吸収するのがこれからの主要な To-Do の１つとなります。

その他の To-Do は、まとまり次第、あるいは気づき次第アップしていきます。

ここまでにやったことを、大まかに書いておきます。

• Chart.js@2 から @3.5 へのアップグレード
• vue@2 用ラッパー（と称される）vue-chart-3 の導入 https://vue-chart-3.netlify.app/guide/
• 上記に必要な @nuxtjs/composition-api の導入
• [email protected] および vue-chart-3 の導入に伴い不要となった vue-chartjs と @types/chart.js の削除
• なぜか Chart.js@3 を導入するとメモリ使用量が常にカツカツになったため、core-js3 まわりの導入環境を整備（nuxt.config.ts と package.json の修正、および追加モジュールの導入） ご参考 https://qiita.com/soarflat/items/21b8955f992bf7d38581
• なぜか Chart.js@3 は ssr: false でないと動かないようなので、そのためのコンフィグ修正 https://vue-chart-3.netlify.app/guide/configuration/#vue-2

[mcdmaster]

さらに前進しました。スクショを貼っておきます。パッと見、それほど変わっていないように見えます。しかしながら、私にとっては大きな前進です。 特に、グラフエリアと座標エリアが重なって表示されるようになったのは前進の最たる部分と言っておかねばなりません。

残るは、座標の目盛り表示が合わせられれば、ほどなくこの PR はクローズできます。 ただ、チャートを使用するアプリの全てのおそらくなんらかの手を入れねばならないため、そこは分担が必要となります。 @kaizumaki さんら企画メンバーと、そうした展開の仕方については相談いたしたく

[kaizumaki]

@mcdmaster 検証ありがとうございます！たいへんな作業をやってくださっていることはひしひしと伝わってきます...。 ひとまずコンフリクトが大量に出ているので、こちらを解消いただいてもいいでしょうか？このPRのdiffが見えづらくなっているので...。

[mcdmaster]

@kaizumaki お待たせしました。さすがに前のコミットは範囲を広げすぎたので、サンプルになりそうなモノ（チャートアプリ）を３個持ってきました。

• components/index/_shared/MixedBarAndLineChart.vue
• components/index/_shared/ScrollableChart.vue
• components/index/_shared/TimeBarChart.vue

キモとなる Chart.js のアップグレードに伴う修正プラグイン plugins/vue-chart.ts に対応させるために各チャート・アプリにはどんな修正が必要か。 それでは、上記アプリのソースを見てください、では虫が良すぎるため、追ってどこかで説明の機会を 作りましょう。 チャートの数だけ手を入れるため、作業を分担するのが適切でスピーディ、なおかつアプリ・オーナー意識の醸成に役立つ、という勝手な期待をしていたりもします

[kaizumaki]

@mcdmaster ご対応ありがとうございます。Netlifyのpreviewを見た限りですと、いろいろ期待通りの動作はしていないようなのですよね...。グラフ以外のところもいろいろ表示がおかしくなっているようです。 かなりたいへんな作業だなと思うとともに、このアップグレードはしばらく様子見したほうがいいのではないかという気になってきました。 あるいは、もうちょっと修正のステップを細かくできたりしませんかね？いまの状態だと、あまりに変わりすぎていてどこがどうなっているのだろう...？という感じです。

[mcdmaster]

@kaizumaki コメントありがとうございます。概ね異存はないです。

実は、私は chart.js@3 への移行がどれほど大変かを示して見せたいとも思っていました。今回のような中間結果が得られたので、たとえば @kaizumaki さんがおっしゃるようにいったんは chart.js@3 へのアップグレードを棚上げする、あるいは棚上げをするに至るエビデンスを一式揃えることで他から参照を受けたときに役立ててもらえる情報の充実を図ろうという意図もありました。 他への情報提供という視点では、国内外を問わず、あたかも chart.js@3 への移行が簡単にできるように書かれているウェブページがあったりした場合、私の今回の活動はその種の誤解の拡散を防ぐ意味があると思っています。

ちなみに、細かいステップやフェーズに分割して進めるのは難しいと思います。ステップの前後依存関係が強く、個別のステップだけを実施するのではアップグレード・プロセス全体としての整合性、合目的性が損なわれるおそれがあります。これも、ここまでやってきたからこそ判明した教訓と思っています

[mcdmaster]

今後、再チャレンジの機会がおそらくあるという前提で、どういったアプローチを取り得るか、おおまかかつ基本的な手順を書いておきます。また、併せてアプローチに必要な各ステップの依存関係もメモしておくこととします。

1. Chart.js のモジュール・アップグレード、および依存モジュールのインストール：Vue.js, Nuxt.js などのコアコンポーネントのバージョンへの依存性が強く、バージョン（マイナー・バージョンを含む）ごとにモジュールの差し替えが求められる場合も多々あります。
2. vue-chartjs および @types/chart.js (2.x 用) の削除：これら既存モジュールは Chart.js@3 との互換性が全くなく、削除せずに放っておくと間違いなくトラブルの元となります。
3. plugins/vue-chartjs の修正：Chart.js@3 のガイドラインに沿って粛々と実施します。ただしお作法（？）が Chart.js@2 と比べてかなり変わるところもあるため、いささか戸惑うのは不可避です。 ご参考 https://www.chartjs.org/docs/latest/getting-started/v3-migration.html
4. チャート・アプリの修正：これは、可能な限り eslint-config-chartjs のルールで lint --fix で逃げられるようにするのが賢明です。各モジュールの fit&gap を逐一チェックできれば理想的ですけど、おそらくそれほどの工数の余裕は取れないと思います。かなり手間です。

以上、ご参考となりましたら幸いです

[kaizumaki]

@mcdmaster こちらのPRもクローズといたします 🙇 chart.jsといったjsライブラリはフレームワークに組み込む際のラッパーのあたりでいろいろと不整合が起きがちですよね... なかなか一筋縄ではいかない代物でした 😓