mcdmaster
mcdmaster
やっとこさ、`Chart.js@3` でチャートを表示するまでに至りました。ただ、座標等はめちゃくちゃです。スクショをご覧ください。 `Chart.js` のサイトには、チャートの表示様式を決めるパラメータの「お作法」に、`Ver2` と `Ver3` との間で小さくない違いがあると示されています。※下記ページ下部を参照のこと https://www.chartjs.org/docs/latest/getting-started/v3-migration.html それを吸収するのがこれからの主要な To-Do の1つとなります。 その他の To-Do は、まとまり次第、あるいは気づき次第アップしていきます。 ここまでにやったことを、大まかに書いておきます。 - `Chart.js@2` から `@3.5` へのアップグレード - `vue@2` 用ラッパー(と称される)`vue-chart-3` の導入 https://vue-chart-3.netlify.app/guide/ - 上記に必要な `@nuxtjs/composition-api` の導入 -...
さらに前進しました。スクショを貼っておきます。パッと見、それほど変わっていないように見えます。しかしながら、私にとっては大きな前進です。 特に、グラフエリアと座標エリアが重なって表示されるようになったのは前進の最たる部分と言っておかねばなりません。  残るは、座標の目盛り表示が合わせられれば、ほどなくこの PR はクローズできます。 ただ、チャートを使用するアプリの全てのおそらくなんらかの手を入れねばならないため、そこは分担が必要となります。 @kaizumaki さんら企画メンバーと、そうした展開の仕方については相談いたしたく
@kaizumaki お待たせしました。さすがに前のコミットは範囲を広げすぎたので、サンプルになりそうなモノ(チャートアプリ)を3個持ってきました。 - `components/index/_shared/MixedBarAndLineChart.vue` - `components/index/_shared/ScrollableChart.vue` - `components/index/_shared/TimeBarChart.vue` キモとなる `Chart.js` のアップグレードに伴う修正プラグイン `plugins/vue-chart.ts` に対応させるために各チャート・アプリにはどんな修正が必要か。 それでは、上記アプリのソースを見てください、では虫が良すぎるため、追ってどこかで説明の機会を 作りましょう。 チャートの数だけ手を入れるため、作業を分担するのが適切でスピーディ、なおかつアプリ・オーナー意識の醸成に役立つ、という勝手な期待をしていたりもします
@kaizumaki コメントありがとうございます。概ね異存はないです。 実は、私は `chart.js@3` への移行がどれほど大変かを示して見せたいとも思っていました。今回のような中間結果が得られたので、たとえば @kaizumaki さんがおっしゃるようにいったんは `chart.js@3` へのアップグレードを棚上げする、あるいは棚上げをするに至るエビデンスを一式揃えることで他から参照を受けたときに役立ててもらえる情報の充実を図ろうという意図もありました。 他への情報提供という視点では、国内外を問わず、あたかも `chart.js@3` への移行が簡単にできるように書かれているウェブページがあったりした場合、私の今回の活動はその種の誤解の拡散を防ぐ意味があると思っています。 ちなみに、細かいステップやフェーズに分割して進めるのは難しいと思います。ステップの前後依存関係が強く、個別のステップだけを実施するのではアップグレード・プロセス全体としての整合性、合目的性が損なわれるおそれがあります。これも、ここまでやってきたからこそ判明した教訓と思っています
今後、再チャレンジの機会がおそらくあるという前提で、どういったアプローチを取り得るか、おおまかかつ基本的な手順を書いておきます。また、併せてアプローチに必要な各ステップの依存関係もメモしておくこととします。 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 5. チャート・アプリの修正:これは、可能な限り `eslint-config-chartjs` のルールで `lint --fix` で逃げられるようにするのが賢明です。各モジュールの...
いまだにドラフトです。下手に触ると、本当に火傷しますよ!(笑) この PR は、今後その役目を終えるであろう `webpack@4 + vue@2` から同 `5 and 3` にアップグレードする際の、以下の活動を支えるのが目的です、と、勝手に定めました。 別ブランチを切った方が良いという際は、アドバイスをお願いいたします。 - アップグレードにありがちな各種制約事項、あるいはリスクの見極め - 必要な追加モジュール、あるいは逆に不必要となるモジュールの特定 - 上述の活動からの初版プロトタイプ作成、およびテスト(ユニットレベル) - テスト中に実施される関連モジュール(`Vue-i18n`, `Vuetify`, `Nuxt` etc. )のアップグレードやバグ対応のフォローアップ(デプロイ込み) - 上述関連モジュールのコミュニティへの参加を通じた情報収集と反映 - レビュー履歴管理 -...
おお!そうだったんですね。 じゃあ、`Chart.js@3` や `Nuxt.js@3` が入るといいなあと…。 ちょっと、再始動してみましょう
@kaizumaki なるほどです。 では、後で時間ができたら `@nuxtjs/gtm` で PR 立ててみますね
りょうかいです。特に異存はありません。 余談ですけれども、アップグレードと言えば `vue3` とか `webpack5` とか `chart.js3` とか `nuxt3` とか…どれも、ぜんぜん簡単ではないです(嘆
スミマセン、ちょっとだけ横入りさせてください。 現状、`nuxt.config.ts` の下記の部分で、外部モジュール `nuxt-i18n` が自ら設定した Cookie、あるいはプラウザ・ネイティブ言語設定を `nuxt-i18n` が(他意なく)捕捉・反映するため、`` コンテンツの URI に言語識別子を持っていたとしても(英語ページ URI の想定 https://stopcovid19.metro.tokyo.lg.jp/en/ )、`` コンテンツが日本語 で表示されてしまう、という問題と理解しました。 ※誤りがありましたら、お知らせください。 たとえば、日本語ページについても http://hostname/ja/ のように言語識別子を URI に含めてみるというアイディアは機能しそうでしょうか? ``` generate: { fallback: true, routes() {...