update chart.js to @3 (interim)

components/index/_shared/CardsLazyRow.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="DataBlock">
+  <div v-if="!hideCards" class="DataBlock">
     <v-lazy
       v-for="(row, i) in rows"
       :key="i"
@@ -10,22 +10,62 @@
       min-height="600"
       min-width="50%"
     >
-      <card-row v-if="actives[i]">
+      <card-row v-show="actives[i]">
         <component :is="component" v-for="(component, j) in row" :key="j" />
       </card-row>
     </v-lazy>
   </div>
+  <div v-else class="DataBlock">
+    <v-expansion-panels flat>
+      <v-expansion-panel class="expansion-panel">
+        <v-expansion-panel-header
+          :hide-actions="true"
+          :style="{ transition: 'none' }"
+        >
+          <div class="v-expansion-panel-header__icon">
+            <v-icon left size="2.4rem">{{ mdiChevronRight }}</v-icon>
+          </div>
+          <span class="expansion-panel-text">{{
+            $t('更新を終了したグラフ')
+          }}</span>
+        </v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-lazy
+            v-for="(row, i) in rows"
+            :key="i"
+            v-intersect="handler"
+            v-scroll="onScroll"
+            :value="actives[i]"
+            :options="{ threshold: 0 }"
+            min-height="600"
+            min-width="50%"
+          >
+            <card-row v-if="actives[i]">
+              <component
+                :is="component"
+                v-for="(component, j) in row"
+                :key="j"
+              />
+            </card-row>
+          </v-lazy>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-expansion-panels>
+  </div>
 </template>
-
 <script lang="ts">
-import Vue from 'vue'
+import { mdiChevronRight } from '@mdi/js'
+import { Component, Prop, Vue } from 'nuxt-property-decorator'
 
 import CardRow from '@/components/index/_shared/CardRow.vue'
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 type Data = {
   actives: boolean[]
   scroll: boolean
+  mdiChevronRight: string
 }
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 type Methods = {
   handler: (
     entries: IntersectionObserverEntry[],
@@ -34,39 +74,49 @@ type Methods = {
   ) => void
   onScroll: () => void
 }
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 type Computed = {}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 type Props = {
   rows: Vue[][]
+  hideCards: boolean
 }
-export default Vue.extend<Data, Methods, Computed, Props>({
+
+@Component({
   components: {
     CardRow,
+    mdiChevronRight,
   },
-  props: {
-    rows: {
-      type: Array,
-      required: true,
+})
+export default class CardsLazyRow
+  extends Vue
+  implements NuxtConfig, NuxtAppOptions
+{
+  @Prop({ type: Array as T, required: true }) rows: ArrayLike<T>
+
+  @Prop({
+    default() {
+      const CardRow = () => this.CardRow
+      return Array(CardRow as Vue[]).flatMap((row) =>
+        row.length > 0 ? [true] : [false]
+      )
     },
-  },
-  data() {
-    return {
-      actives: Array.from({ length: this.rows.length }, () => false),
-      scroll: false,
-    }
-  },
-  methods: {
-    handler(_entries, _observer, isIntersecting) {
-      if (!isIntersecting) return
+  })
+  actives: Array
+
+  @Prop({ default: false }) hideCards: Boolean
+
+  handler(_entries, _observer, isIntersecting) {
+    if (isIntersecting) {
       this.$set(this.actives, this.actives.indexOf(false), true)
-    },
-    onScroll() {
-      if (this.scroll) return
-      this.scroll = true
-      this.$set(this.actives, 0, true)
-      this.$set(this.actives, 1, true)
-    },
-  },
-})
+    }
+  }
+
+  onScroll() {
+    this.$set(this.actives, 0, true)
+    this.$set(this.actives, 1, true)
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -77,4 +127,25 @@ export default Vue.extend<Data, Methods, Computed, Props>({
     margin: 8px 0;
   }
 }
+
+.expansion-panel {
+  background-color: transparent !important;
+}
+
+.v-expansion-panel-header__icon {
+  margin-left: -5px !important;
+
+  & .v-icon--left {
+    margin-right: 5px;
+  }
+
+  .v-expansion-panel--active & .v-icon {
+    transform: rotate(90deg) !important;
+  }
+}
+
+.expansion-panel-text {
+  color: $gray-1;
+  @include font-size(16);
+}
 </style>

nuxt.config.ts

@@ -1,3 +1,6 @@
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
+
 import { NuxtConfig } from '@nuxt/types'
 
 // eslint-disable-next-line no-restricted-imports
@@ -78,8 +81,8 @@ const config: NuxtConfig = {
    */
   plugins: [
     {
-      src: '@/plugins/vue-chart.ts',
-      ssr: true,
+      src: '@/plugins/vue-chart',
+      mode: 'client',
     },
     {
       src: '@/plugins/axe',
@@ -90,6 +93,7 @@ const config: NuxtConfig = {
    ** Nuxt.js dev-modules
    */
   buildModules: [
+    '@nuxtjs/composition-api/module',
     '@nuxtjs/stylelint-module',
     '@nuxtjs/vuetify',
     [
@@ -106,7 +110,6 @@ const config: NuxtConfig = {
     ],
     '@nuxtjs/google-analytics',
     '@nuxtjs/gtm',
-    'nuxt-purgecss',
   ],
   /*
    ** Nuxt.js modules
@@ -115,7 +118,7 @@ const config: NuxtConfig = {
     '@nuxtjs/pwa',
     // Doc: https://github.com/nuxt-community/dotenv-module
     ['@nuxtjs/dotenv', { filename: `.env.${environment}` }],
-    ['nuxt-i18n', i18n],
+    ['@nuxtjs/i18n', i18n],
     'nuxt-svg-loader',
     ['vue-scrollto/nuxt', { duration: 1000, offset: -72 }],
     'nuxt-webfontloader',
@@ -126,7 +129,7 @@ const config: NuxtConfig = {
    */
   vuetify: {
     customVariables: ['@/assets/variables.scss'],
-    optionsPath: './plugins/vuetify.options.ts',
+    optionsPath: '@/plugins/vuetify.options',
     treeShake: true,
     defaultAssets: false,
   },
@@ -150,28 +153,22 @@ 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: {
+    loaders: {
+      file: {
+        regExp: /\.js$/,
+        name: ({ isDev }: any) =>
+          isDev ? '[name].js' : '[id].[contenthash].js',
+      },
+    },
     babel: {
       presets() {
         return [
           [
             '@nuxt/babel-preset-app',
             {
-              corejs: { version: '3.11' },
+              corejs: { version: '3.18' },
+              useBuiltIns: 'usage',
             },
           ],
         ]
@@ -188,15 +185,19 @@ const config: NuxtConfig = {
     extend(config) {
       // default externals option is undefined
       config.externals = [{ moment: 'moment' }]
+      /*
+      config = {
+        resolve: {
+          alias: {
+            '@vue': '@vue/compiler-core/dist/compiler-core.esm-bundler.js',
+          },
+        },
+      }
+      */
     },
-    // https://ja.nuxtjs.org/api/configuration-build/#hardsource
-    // hardSource: process.env.NODE_ENV === 'development'
   },
   purgeCSS: {
-    paths: [
-      './node_modules/vuetify/dist/vuetify.js',
-      './node_modules/vue-spinner/src/ScaleLoader.vue',
-    ],
+    paths: ['vuetify/dist/vuetify.js', 'vue-spinner/src/ScaleLoader.vue'],
     whitelist: ['DataCard', 'GraphLegend'],
     whitelistPatterns: [/(col|row|v-window)/],
   },
@@ -214,6 +215,8 @@ const config: NuxtConfig = {
     routes() {
       const locales = ['en', 'zh-cn', 'zh-tw', 'ko', 'ja-basic']
       const pages = [
+        '/cards/infection-medical-care-provision-status',
+        '/cards/monitoring-comment',
         '/cards/details-of-confirmed-cases',
         '/cards/number-of-confirmed-cases',
         '/cards/number-of-confirmed-cases-by-municipalities',
@@ -238,6 +241,7 @@ const config: NuxtConfig = {
         '/cards/deaths-by-death-date',
         '/cards/variant',
         '/cards/vaccination',
+        '/cards/positive-number-over65',
       ]
       const localizedPages = locales
         .map((locale) => pages.map((page) => `/${locale}${page}`))
@@ -262,6 +266,19 @@ const config: NuxtConfig = {
       poll: true,
     },
   },
+  router: {
+    extendRoutes(routes) {
+      routes.forEach((route) => {
+        if (
+          route.name === 'index' ||
+          route.name === 'monitoring' ||
+          route.name === 'reference'
+        ) {
+          route.meta = { tabs: true }
+        }
+      })
+    },
+  },
 }
 
 export default config