Fix/upgrade chart.js upto 3.x

components/index/_shared/MixedBarAndLineChart.vue

@@ -500,14 +500,23 @@ const options: ThisTypedComponentOptionsWithRecordProps<
     },
   },
   mounted() {
-    const barChart = this.$refs.barChart as Vue
-    const barElement = barChart.$el
-    const canvas = barElement.querySelector('canvas')
-    const labelledbyId = `${this.titleId}-graph`
-
+    const canvas = this.$refs.barChart as Element
     if (canvas) {
-      canvas.setAttribute('role', 'img')
-      canvas.setAttribute('aria-labelledby', labelledbyId)
+      try {
+        canvas.setAttribute('role', 'img')
+      } catch (e) {
+        // eslint-ignore-line no-empty
+      } finally {
+        // eslint-ignore-line no-empty
+      }
+      const labelledbyId = `${this.titleId}-graph`
+      try {
+        canvas.setAttribute('aria-labelledby', labelledbyId)
+      } catch (e) {
+        // eslint-ignore-line no-empty
+      } finally {
+        // eslint-ignore-line no-empty
+      }
     }
 
     const stickyChart = this.$refs.stickyChart as Vue

components/index/_shared/ScrollableChart.vue

@@ -2,10 +2,11 @@
   <div ref="chartContainer" class="LegendStickyChart">
     <div ref="scrollable" class="scrollable" tabindex="0">
       <div :style="{ width: `${chartWidth}px` }">
-        <slot name="chart" :chart-width="chartWidth" />
+        <slot name="chart" :chart-width="chartWidth">
+          <slot name="sticky-chart" />
+        </slot>
       </div>
     </div>
-    <slot name="sticky-chart" />
   </div>
 </template>
 

components/index/_shared/TimeBarChart.vue

@@ -502,14 +502,23 @@ const options: ThisTypedComponentOptionsWithRecordProps<
     },
   },
   mounted() {
-    const barChart = this.$refs.barChart as Vue
-    const barElement = barChart.$el
-    const canvas = barElement.querySelector('canvas')
-    const labelledbyId = `${this.titleId}-graph`
-
+    const canvas = this.$refs.barChart as Element
     if (canvas) {
-      canvas.setAttribute('role', 'img')
-      canvas.setAttribute('aria-labelledby', labelledbyId)
+      try {
+        canvas.setAttribute('role', 'img')
+      } catch (e) {
+        // eslint-ignore-line no-empty
+      } finally {
+        // eslint-ignore-line no-empty
+      }
+      const labelledbyId = `${this.titleId}-graph`
+      try {
+        canvas.setAttribute('aria-labelledby', labelledbyId)
+      } catch (e) {
+        // eslint-ignore-line no-empty
+      } finally {
+        // eslint-ignore-line no-empty
+      }
     }
 
     const stickyChart = this.$refs.stickyChart as Vue

nuxt-i18n.config.ts

@@ -1,33 +1,32 @@
-import type { NuxtConfig } from '@nuxt/types'
-import type { DateTimeFormat } from 'vue-i18n'
+import { NuxtConfig } from '@nuxt/types'
 
-const dateTimeFormatsCommon: DateTimeFormat = {
+type dateTimeFormatsCommon = {
   dateTime: {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-    hour12: false,
-  },
+    year: 'numeric'
+    month: 'short'
+    day: 'numeric'
+    hour: 'numeric'
+    minute: 'numeric'
+    hour12: false
+  }
   date: {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  },
+    year: 'numeric'
+    month: 'short'
+    day: 'numeric'
+  }
   dateWithoutYear: {
-    month: 'long',
-    day: 'numeric',
-  },
+    month: 'long'
+    day: 'numeric'
+  }
   dateWithoutDay: {
-    year: 'numeric',
-    month: 'short',
-  },
+    year: 'numeric'
+    month: 'short'
+  }
   dateWithDayOfWeek: {
-    weekday: 'short',
-    month: 'short',
-    day: 'numeric',
-  },
+    weekday: 'short'
+    month: 'short'
+    day: 'numeric'
+  }
 }
 
 const options: NuxtConfig['i18n'] = {
@@ -39,13 +38,14 @@ const options: NuxtConfig['i18n'] = {
     fallbackLocale: 'ja',
     formatFallbackMessages: true,
     dateTimeFormats: {
-      ja: dateTimeFormatsCommon,
-      en: dateTimeFormatsCommon,
-      'zh-cn': dateTimeFormatsCommon,
-      'zh-tw': dateTimeFormatsCommon,
-      ko: dateTimeFormatsCommon,
-      'ja-basic': dateTimeFormatsCommon,
-    },
+      /* eslint-disable no-empty-pattern */
+      ja: ({} = {} as dateTimeFormatsCommon),
+      en: ({} = {} as dateTimeFormatsCommon),
+      'zh-cn': ({} = {} as dateTimeFormatsCommon),
+      'zh-tw': ({} = {} as dateTimeFormatsCommon),
+      ko: ({} = {} as dateTimeFormatsCommon),
+      'ja-basic': ({} = {} as dateTimeFormatsCommon),
+    } /* eslint-enable no-empty-pattern */,
   },
   // vueI18nLoader: true,
   lazy: true,

nuxt.config.ts

@@ -87,8 +87,8 @@ const config: NuxtConfig = {
    */
   plugins: [
     {
-      src: '@/plugins/vue-chart.ts',
-      ssr: true,
+      src: '@/plugins/vue-chart',
+      mode: 'client',
     },
     {
       src: '@/plugins/axe',
@@ -99,6 +99,7 @@ const config: NuxtConfig = {
    ** Nuxt.js dev-modules
    */
   buildModules: [
+    '@nuxtjs/composition-api/module',
     '@nuxtjs/stylelint-module',
     '@nuxtjs/vuetify',
     [
@@ -159,20 +160,6 @@ const config: NuxtConfig = {
     pageTracking: true,
     enabled: true,
   },
-  /*
-   * nuxt-i18n による自動リダイレクトを停止したためコメントアウト
-   * @todo 「Cookieがあるときのみ、その言語にリダイレクトする」を実装する場合は復活させる
-   * 実装しない場合は以下の記述を完全に削除する
-   */
-  /* optionalCookies: [
-    {
-      name: 'i18n_redirected',
-      label: 'i18n Redirection Cookie',
-      description:
-        'For automatically switching UI languages in accordance with locale preferences in the web browser configuration.',
-      cookies: ['i18n_redirected']
-    }
-  ], */
   build: {
     filenames: {
       chunk: ({ isDev }) => (isDev ? '[name].js' : '[id].[contenthash].js'),

package.json

@@ -7,13 +7,27 @@
   "engines": {
     "node": ">=14.16.0"
   },
+  "runtimeArgs": [
+    "--max_old_space_size=4096M",
+    "--max_executable_size=4096M",
+    "--optimize-for-size",
+    "--fail-on-page-error"
+  ],
+  "fork-ts-checker": {
+    "typescript": {
+      "memoryLimit": 4096
+    }
+  },
+  "vue": {
+    "runtimeCompiler": true
+  },
   "scripts": {
-    "dev": "cross-env NODE_ENV=development GENERATE_ENV=development nuxt",
-    "dev-no-axe": "cross-env NODE_ENV=dev-no-axe GENERATE_ENV=development nuxt",
+    "dev": "cross-env NODE_ENV=development NODE_OPTIONS=--max_old_space_size=2048 GENERATE_ENV=development nuxt dev",
+    "dev-no-axe": "cross-env NODE_ENV=dev-no-axe NODE_OPTIONS=--max_old_space_size=2048 GENERATE_ENV=development nuxt dev",
     "build": "nuxt build",
     "start": "cross-env NODE_ENV=production nuxt start",
-    "generate:deploy": "cross-env GENERATE_ENV=production NODE_OPTIONS=--max_old_space_size=2048 nuxt generate --fail-on-page-error && yarn functions:build",
-    "generate:dev": "cross-env GENERATE_ENV=development NODE_OPTIONS=--max_old_space_size=2048 nuxt generate --fail-on-page-error && yarn functions:build",
+    "generate:deploy": "cross-env GENERATE_ENV=production nuxt generate && yarn functions:build",
+    "generate:dev": "cross-env GENERATE_ENV=development nuxt generate && yarn functions:build",
     "generate": "eslint \"./**/*.{js,ts,vue}\" && nuxt generate",
     "test": "echo 'skip tests (there is no test)'",
     "lint": "eslint \"./**/*.{js,ts,vue}\"",
@@ -34,25 +48,27 @@
     "*.{css,scss,vue}": "stylelint"
   },
   "resolutions": {
-    "@nuxtjs/vuetify/**/sass": "1.32.12"
+    "@nuxtjs/vuetify/**/sass": "1.32.13"
   },
   "dependencies": {
     "@nuxt/types": "2.15.8",
+    "@nuxtjs/composition-api": "0.29.2",
     "@nuxtjs/dotenv": "1.4.1",
     "@nuxtjs/gtm": "2.4.0",
     "@nuxtjs/i18n": "7.0.3",
     "@nuxtjs/pwa": "3.3.5",
-    "axe-core": "4.3.3",
-    "chart.js": "2.9.4",
+    "@nuxtjs/router": "1.6.1",
+    "axe-core": "3.5.6",
+    "chart.js": "3.5.1",
     "cross-env": "7.0.3",
     "dayjs": "1.10.7",
     "netlify-lambda": "2.0.14",
     "nuxt": "2.15.8",
     "vue": "2.6.14",
-    "vue-chartjs": "3.5.1",
+    "vue-chart-3": "0.5.8",
     "vue-meta": "2.4.0",
-    "vue-scrollto": "2.20.0",
-    "vue-spinner": "1.0.4"
+    "vue-spinner": "1.0.4",
+    "vuex": "3.6.2"
   },
   "devDependencies": {
     "@babel/core": "7.15.8",
@@ -64,25 +80,30 @@
     "@nuxtjs/google-analytics": "2.4.0",
     "@nuxtjs/stylelint-module": "4.0.0",
     "@nuxtjs/vuetify": "1.12.1",
-    "@types/chart.js": "2.9.34",
+    "@types/fs-extra": "9.0.13",
     "@types/lodash": "4.14.175",
     "@types/node": "14.17.21",
+    "@types/regenerator-runtime": "0.13.1",
+    "@vue/server-renderer": "3.2.19",
     "core-js": "3.18.2",
     "danger": "10.6.6",
     "eslint": "7.32.0",
-    "eslint-config-prettier": "8.1.0",
+    "eslint-config-chartjs": "0.3.0",
+    "eslint-config-prettier": "8.3.0",
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-simple-import-sort": "7.0.0",
-    "eslint-plugin-tsdoc": "0.2.11",
+    "eslint-plugin-tsdoc": "0.2.14",
+    "fs-extra": "10.0.0",
     "husky": "7.0.2",
-    "lint-staged": "11.2.0",
+    "lint-staged": "11.1.2",
     "lodash": "4.17.21",
     "nuxt-property-decorator": "2.9.1",
     "nuxt-purgecss": "1.0.0",
     "nuxt-svg-loader": "1.2.0",
     "nuxt-webfontloader": "1.1.0",
     "prettier": "2.4.1",
     "quicktype": "15.0.260",
+    "regenerator-runtime": "0.13.9",
     "stylelint": "13.13.1",
     "stylelint-config-prettier": "8.0.2",
     "stylelint-config-standard": "22.0.0",
@@ -91,6 +112,8 @@
     "ts-node": "10.2.1",
     "typescript": "4.4.3",
     "vue-axe": "2.4.4",
+    "vue-scrollto": "2.20.0",
+    "vue-server-renderer": "2.6.14",
     "vue-template-compiler": "2.6.14"
   }
 }

plugins/chartjs-adapter-dayjs.ts

@@ -7,7 +7,7 @@ import 'dayjs/locale/vi'
 import 'dayjs/locale/zh-cn'
 import 'dayjs/locale/zh-tw'
 
-import { NuxtAppOptions } from '@nuxt/types/app'
+import { NuxtAppOptions } from '@nuxt/types'
 import { _adapters } from 'chart.js'
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
@@ -35,36 +35,36 @@ export function useDayjsAdapter(nuxtI18n: NuxtAppOptions['i18n']) {
   }
 
   _adapters._date.override({
-    _id: 'dayjs', // for debug
+    // _id: 'dayjs', for debug
 
     formats() {
       return DEFAULT_FORMATS
     },
 
-    parse(time, format) {
+    parse(time: any, format: any) {
       const value = format ? dayjs(time, format) : dayjs(time)
 
       return value.isValid() ? value.valueOf() : null
     },
 
-    format(time, format) {
+    format(time: any, format: any) {
       return dayjs(time).format(format)
     },
 
-    add(time, amount, unit) {
-      return dayjs(time).add(amount, unit)
+    add(time, amount, unit): any {
+      return dayjs(time).add(amount, unit as dayjs.OpUnitType)
     },
 
-    diff(max, min, unit) {
+    diff(max: any, min: any, unit: any) {
       return dayjs(max).diff(dayjs(min), unit)
     },
 
-    startOf(time, unit, _) {
-      return dayjs(time).startOf(unit)
+    startOf(time, unit, _): any {
+      return dayjs(time).startOf(unit as dayjs.OpUnitType)
     },
 
-    endOf(time, unit) {
-      return dayjs(time).endOf(unit)
+    endOf(time, unit): any {
+      return dayjs(time).endOf(unit as dayjs.OpUnitType)
     },
   })
 }