実行時に、Deprecation warning(value provided is not in a recognized RFC2822 or ISO format)が発生する

masanori1102 commented 4 years ago

起こっている問題 / The Problem

実行時に、Deprecation warning(value provided is not in a recognized RFC2822 or ISO format)が発生する。

この現象は、以下の両方で発生する

公開サイト: https://stopcovid19.metro.tokyo.lg.jp/
開発時の確認: http://localhost:3000/

スクリーンショット / Screenshot

開発者ツールのコンソールに出力されたログを以下に転記した。

Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.
Arguments: 
[0] _isAMomentObject: true, _isUTC: false, _useUTC: false, _l: undefined, _i: 1/24, _f: undefined, _strict: undefined, _locale: [object Object]
Error
    at Function.createFromInputFallback (https://stopcovid19.metro.tokyo.lg.jp/_nuxt/9f95303….js:2:3380)
    at https://stopcovid19.metro.tokyo.lg.jp/_nuxt/9f95303….js:2:23520
    at https://stopcovid19.metro.tokyo.lg.jp/_nuxt/9f95303….js:2:23571
    at Ht (https://stopcovid19.metro.tokyo.lg.jp/_nuxt/9f95303….js:2:23889)
    at Pt (https://stopcovid19.metro.tokyo.lg.jp/_nuxt/9f95303….js:2:24294)
    at Ft (https://stopcovid19.metro.tokyo.lg.jp/_nuxt/9f95303….js:2:24380)
    at o (https://stopcovid19.metro.tokyo.lg.jp/_nuxt/9f95303….js:2:152)
    at sn.parse (https://stopcovid19.metro.tokyo.lg.jp/_nuxt/9f95303….js:2:510880)
    at ua (https://stopcovid19.metro.tokyo.lg.jp/_nuxt/9f95303….js:2:504023)
    at ca (https://stopcovid19.metro.tokyo.lg.jp/_nuxt/9f95303….js:2:504199)

期待する見せ方・挙動 / Expected Behavior

日付のフォーマットを正しく設定し、コンソールログにエラーが出力されない

起こっている問題の再現手段 / Steps to Reproduce

トップページに接続する。

動作環境・ブラウザ / Environment

macOS / Windows / Linux / iOS / Android
Chrome / Safari / Firefox / Edge / Internet Explorer

muro3r commented 4 years ago

ちょっと調べてみたところ，Charts.js から Moment.js に日付データを渡す際にフォーマットが指定されてないせいで適切なフォーマットとして認識されていないのが原因のようです。

画面側に反映されるところまではできてないのですが，以下で日付フォーマット (MM/DD) を設定として渡すようにするとうまく行くのではないかと思います。

https://github.com/tokyo-metropolitan-gov/covid19/blob/5832df464c356f611558d03d2ff4c4d9d9654da6/plugins/vue-chart.ts#L8

渡し方での修正方向は分かったのですが，PR を作成するに当たって具体的にどの箇所で直すべきかというのはわかっていません。解決まで持っていきたいので，よかったら教えてください!

t-tajiri commented 4 years ago

@muro3r はじめまして。結論から言うと、以下のcallbackが原因みたいです。 callbackを使わず、time.displayFormatsとtime.parserオプションを利用するとエラーが解消されるはずです。

原因の箇所

TimeBarChart.vue https://github.com/tokyo-metropolitan-gov/covid19/blob/development/components/TimeBarChart.vue#L279-L296
TimeStackedBarChart.vue https://github.com/tokyo-metropolitan-gov/covid19/blob/development/components/TimeStackedBarChart.vue#L342-L359

参考URL

time.displayFormats https://www.chartjs.org/docs/latest/axes/cartesian/time.html#display-formats
time.parser https://www.chartjs.org/docs/latest/axes/cartesian/time.html#parser

以下、余談です。。。

上記のcallback関数が描画時のライフサイクルとして追加されるとのことです。ですので、以下の通りでエラーが出力されると仮定しています。

callback関数によってx軸の値がM月に書き換わる
書き換えた値をChart.js経由でMoment.jsがparseする
(無論) M月というフォーマットは標準フォーマットとしてないため、そのまま値を返している
表示上は問題ないがエラーとして本メッセージが出力される

t-tajiri commented 4 years ago

@muro3r 別問題として、月という文字がハードコーディングされているのが気になりますね・・・:thinking:

muro3r commented 4 years ago

@t-tajiri 返信ありがとうございます。

Component 側での指定が原因だったのは見逃していました。早速パラメーターを渡す部分を編集してみたところ，warn が出なくなりました! 一応 TimeBarChart.vue の diff を貼ります。TimeStackedBarChart.vue も同様の修正でできました。

diff --git a/components/TimeBarChart.vue b/components/TimeBarChart.vue
index c0a5eb449..3eb39b23c 100644
--- a/components/TimeBarChart.vue
+++ b/components/TimeBarChart.vue
@@ -275,28 +275,14 @@ const options: ThisTypedComponentOptionsWithRecordProps<
                 fontStyle: 'bold',
                 gridLines: {
                   display: true
-                },
-                callback: (label: string) => {
-                  const monthStringArry = [
-                    'Jan',
-                    'Feb',
-                    'Mar',
-                    'Apr',
-                    'May',
-                    'Jun',
-                    'Jul',
-                    'Aug',
-                    'Sep',
-                    'Oct',
-                    'Nov',
-                    'Dec'
-                  ]
-                  const month = monthStringArry.indexOf(label.split(' ')[0]) + 1
-                  return month + '月'
                 }
               },
               type: 'time',
               time: {
+                displayFormats: {
+                  month: 'M[月]'
+                },
+                parser: 'MM/DD',
                 unit: 'month'
               }
             }

muro3r commented 4 years ago

@t-tajiri 月 がハードコーディングされてるのは多言語化する場合にもよくないですね。表示言語によって動的にフォーマットを変えられた方がいいと思いますが，どこで表示フォーマットを渡すと実現できますでしょうか？

t-tajiri commented 4 years ago

@muro3r お役に立てて何よりです 😄

気になることを2点だけ言わせてください。(既に修正されていましたらすみません)

parser: 'MM/DD'としていますが、データの形式を見るにM/Dの方が良さそうです。公式は少しわかりにくいので、こちらの資料を貼っておきますね。 https://devhints.io/moment#formatting-1
id: 'day'もmonth同様にcallbackを使用しています。コードの統一性という観点からdayの方も同様にcallbackを利用しない記述の方が良いかと思います。 (もし、分からなければ聞いてください) https://github.com/tokyo-metropolitan-gov/covid19/blob/development/components/TimeBarChart.vue#L257-L259

MaySoMusician commented 4 years ago

詳しく調べてないですが、もし moment 経由ならそのまま多言語化できる可能性があるかも...？とは思いますが、可能性は低そうなので、i18n化するなら vue-chartjs がデフォルトで返す英語式の表記（Febなど）を dayjs に通して多言語化するのも手ではないでしょうか

t-tajiri commented 4 years ago

chartjs-adapter-momentを経由していますが、localeの設定がなさそうです。 https://github.com/chartjs/chartjs-adapter-moment/blob/master/src/index.js

chartjs-adapter-momentを使用せず、dayjsとchart.jsのadapterを作成するのも一つの手段かもしれません。もしくは、type: 'time'とせず(日付ライブラリに処理を委譲させないため)、今回は多言語化のためにcallbackオプションを利用し、 @MaySoMusician の通り、dayjsを通して多言語化するのも手段かもしれませんね。

muro3r commented 4 years ago

@t-tajiri

parser のデータ形式
こちらは M/D に合わせた方が良さそうなので，そちらに修正します
id: 'day' の callback
'day' の type を time として定義することで同じような処理を書く事ができました

以上二点に対応しました。

こちらは一旦 Draft-PR を作成しちゃってよいのでしょうか？

それと，もし day.js を使用するとなると，外部モジュールを新たに使用します，とどこかに書いた方が良いのでしょうか。

t-tajiri commented 4 years ago

@muro3r 個人的にはOKだと思います👍 あとはmaintainerの方々に確認してもらいましょう。

それと，もし day.js を使用するとなると，外部モジュールを新たに使用します，とどこかに書いた方が良いのでしょうか。

day.jsは既にこのプロジェクトで使用されています。 https://github.com/tokyo-metropolitan-gov/covid19/blob/6dd60d0fe1c3ffe5fc1fecc2e047877b7b3e2680/package.json#L42

なので、外部モジュールを新たに使用する、というわけではなく、chart.jsに依存しているmoment.jsをday.jsに変更したいという内容の方が良いと思います。ちなみにここらへんの話は、新しくi18nのissueとしてあげられてるみたいです。一旦この内容でPRを提出し、こちらで対応し直した方がいいかもしれませんね。

https://github.com/tokyo-metropolitan-gov/covid19/issues/2052

masanori1102 commented 4 years ago

修正され、実行時にDeprecation warning(value provided is not in a recognized RFC2822 or ISO format)が発生しなくなったので、Closeします

Tokyo-Metro-Gov / covid19