update chart.js to @3 no. 3

Tokyo-Metro-Gov · Oct 7, 2021 · ad8765a · ad8765a
1 parent c13a8e8
commit ad8765a
Show file tree

Hide file tree

Showing 14 changed files with 1,348 additions and 464 deletions.
diff --git a/components/index/_shared/MixedBarAndLineChart.vue b/components/index/_shared/MixedBarAndLineChart.vue
@@ -497,14 +497,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
+      }
     }
   },
 }

diff --git a/components/index/_shared/ScrollableChart.vue b/components/index/_shared/ScrollableChart.vue
@@ -2,10 +2,11 @@
   <div ref="chartContainer" class="LegendStickyChart">
     <div ref="scrollable" class="scrollable">
       <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>
 

diff --git a/components/index/_shared/TimeBarChart.vue b/components/index/_shared/TimeBarChart.vue
@@ -501,14 +501,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
+      }
     }
   },
 }

diff --git a/data/staying_population.json b/data/staying_population.json
@@ -1,17 +1,17 @@
 {
-    "date": "2021\/6\/4 12:30",
+    "date": "2021\/6\/5 12:30",
     "data": {
         "place": {
             "display": {
                 "@ja": "品川",
                 "@en": "Shinagawa"
             }
         },
-        "date": "2021-06-03",
+        "date": "2021-06-04",
         "data": [
             {
                 "reference_date": "2020-01-01",
-                "increase_rate": -59
+                "increase_rate": -60
             }
         ]
     }

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -36,15 +36,15 @@
 import { Component, Vue } from 'nuxt-property-decorator'
 import ScaleLoader from 'vue-spinner/src/ScaleLoader.vue'
 
+import type { NuxtOptionsHead as MetaInfo } from '@nuxt/types/config/head'
+import type { NuxtConfig } from '@nuxt/types'
 import DevelopmentModeMark from '@/components/_shared/DevelopmentModeMark.vue'
 import NoScript from '@/components/_shared/NoScript.vue'
 import SideNavigation from '@/components/_shared/SideNavigation.vue'
 import Data from '@/data/data.json'
 import { convertDateToSimpleFormat } from '@/utils/formatDate'
 import { getLinksLanguageAlternative } from '@/utils/i18nUtils'
 
-import type { NuxtOptionsHead as MetaInfo } from '@nuxt/types/config/head'
-import type { NuxtConfig } from '@nuxt/types'
 /* eslint-enable simple-import-sort/imports */
 
 @Component({
@@ -95,7 +95,7 @@ export default class Default extends Vue implements NuxtConfig {
   }
 
   head() {
-    const { htmlAttrs, meta } = this.$nuxtI18nSeo()
+    const { htmlAttrs, meta } = {} as MetaInfo
     type LinkPropertyHref = typeof htmlAttrs
     const ogLocale =
       meta && meta.length > 0

diff --git a/nuxt-i18n.config.ts b/nuxt-i18n.config.ts
@@ -1,5 +1,5 @@
 import { NuxtConfig } from '@nuxt/types'
-import { NuxtVueI18n } from 'nuxt-i18n/types'
+import { NuxtI18nMeta } from '@nuxtjs/i18n/types/vue'
 
 const dateTimeFormatsCommon = {
   dateTime: {
@@ -106,4 +106,4 @@ const options: NuxtConfig = {
   seo: false,
 }
 
-export default options as NuxtVueI18n.Options.AllOptionsInterface
+export default options as NuxtI18nMeta
diff --git a/package.json b/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}\"",
@@ -24,69 +38,82 @@
     "functions:dev": "netlify-lambda serve functions",
     "functions:build": "netlify-lambda build functions",
     "generate-data-converters": "ts-node --compiler-options='{\"module\":\"commonjs\"}' ./tool/generateDataConverters.ts",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "danger:ci": "danger ci"
   },
   "lint-staged": {
     "*.{js,ts,css,vue}": [
       "eslint --fix"
     ],
     "*.{css,scss,vue}": "stylelint"
   },
+  "resolutions": {
+    "@nuxtjs/vuetify/**/sass": "1.32.13"
+  },
   "dependencies": {
-    "@nuxt/types": "2.15.6",
+    "@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.2.2",
-    "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.5",
-    "netlify-lambda": "2.0.8",
-    "nuxt": "2.15.6",
-    "nuxt-i18n": "6.27.0",
-    "vue": "2.6.12",
-    "vue-chartjs": "3.5.1",
+    "dayjs": "1.10.7",
+    "netlify-lambda": "2.0.14",
+    "nuxt": "2.15.8",
+    "vue": "2.6.14",
+    "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.14.3",
-    "@babel/runtime-corejs3": "7.14.0",
-    "@mdi/js": "5.9.55",
+    "@babel/core": "7.15.5",
+    "@babel/runtime-corejs3": "7.15.4",
+    "@mdi/js": "6.2.95",
     "@nuxt/typescript-build": "2.1.0",
     "@nuxtjs/eslint-config": "6.0.1",
     "@nuxtjs/eslint-config-typescript": "6.0.1",
     "@nuxtjs/google-analytics": "2.4.0",
     "@nuxtjs/stylelint-module": "4.0.0",
-    "@nuxtjs/vuetify": "1.11.3",
-    "@types/chart.js": "2.9.31",
-    "@types/lodash": "4.14.170",
-    "@types/node": "14.17.2",
-    "core-js": "3.12.1",
-    "danger": "10.6.4",
-    "eslint": "7.27.0",
-    "eslint-config-prettier": "8.1.0",
-    "eslint-plugin-prettier": "3.3.1",
+    "@nuxtjs/vuetify": "1.12.1",
+    "@types/fs-extra": "9.0.13",
+    "@types/lodash": "4.14.175",
+    "@types/node": "12.20.28",
+    "@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-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",
-    "husky": "6.0.0",
-    "lint-staged": "11.0.0",
+    "eslint-plugin-tsdoc": "0.2.14",
+    "fs-extra": "10.0.0",
+    "husky": "7.0.2",
+    "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.3.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",
-    "stylelint-scss": "3.19.0",
+    "stylelint-scss": "3.21.0",
     "ts-loader": "8.3.0",
-    "ts-node": "9.1.1",
-    "typescript": "4.2.4",
+    "ts-node": "10.2.1",
+    "typescript": "4.4.3",
     "vue-axe": "2.4.4",
-    "vue-template-compiler": "2.6.12"
+    "vue-scrollto": "2.20.0",
+    "vue-server-renderer": "2.6.14",
+    "vue-template-compiler": "2.6.14"
   }
 }
diff --git a/plugins/chartjs-adapter-dayjs.ts b/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)
     },
   })
 }