update chart.js to @3 (interim) no. 2

.eslintrc.js

@@ -4,6 +4,7 @@ module.exports = {
     '@nuxtjs/eslint-config-typescript',
     'prettier',
     'plugin:prettier/recommended',
+    'chartjs',
   ],
   rules: {
     'vue/max-attributes-per-line': 'off',
@@ -30,5 +31,6 @@ module.exports = {
         patterns: ['./', '../'],
       },
     ],
+    'chartjs/for-direction': 'off',
   },
 }

assets/json/cardRoutesSettings.json

@@ -0,0 +1,184 @@
+[
+  {
+    "path": "/cards/infection-medical-care-provision-status",
+    "title": "本日の感染状況・医療提供体制",
+    "category": "注目の指標",
+    "ogpWidth": 959,
+    "ogpHeight": 500
+  },
+  {
+    "path": "/cards/details-of-confirmed-cases",
+    "title": "検査陽性者の状況",
+    "category": "注目の指標",
+    "ogpWidth": 959,
+    "ogpHeight": 500
+  },
+  {
+    "path": "/cards/monitoring-comment",
+    "title": "感染状況・医療提供体制の分析",
+    "category": "注目の指標",
+    "ogpWidth": 959,
+    "ogpHeight": 500
+  },
+  {
+    "path": "/cards/vaccination",
+    "title": "ワクチン接種数（累計）",
+    "category": "注目の指標",
+    "ogpWidth": 959,
+    "ogpHeight": 730
+  },
+  {
+    "path": "/cards/number-of-confirmed-cases",
+    "title": "報告日別による陽性者数の推移",
+    "category": "注目の指標",
+    "ogpWidth": 959,
+    "ogpHeight": 500
+  },
+  {
+    "path": "/cards/number-of-tested",
+    "title": "検査実施件数",
+    "category": "注目の指標",
+    "ogpWidth": 959,
+    "ogpHeight": 540
+  },
+  {
+    "path": "/cards/number-of-reports-to-tokyo-fever-consultation-center",
+    "title": "東京都発熱相談センターにおける相談件数",
+    "category": "注目の指標",
+    "ogpWidth": 959,
+    "ogpHeight": 570
+  },
+  {
+    "path": "/cards/number-of-reports-to-covid19-telephone-advisory-center",
+    "title": "新型コロナコールセンター相談件数",
+    "category": "注目の指標",
+    "ogpWidth": 959,
+    "ogpHeight": 500
+  },
+  {
+    "path": "/cards/monitoring-items-overview",
+    "title": "モニタリング項目",
+    "category": "モニタリング項目",
+    "ogpWidth": 959,
+    "ogpHeight": 570
+  },
+  {
+    "path": "/cards/monitoring-number-of-confirmed-cases",
+    "title": "モニタリング項目(1)新規陽性者数",
+    "category": "モニタリング項目",
+    "ogpWidth": 959,
+    "ogpHeight": 500
+  },
+  {
+    "path": "/cards/number-of-reports-to-consultations-about-fever-in-7119",
+    "title": "モニタリング項目(2)#7119における発熱等相談件数",
+    "category": "モニタリング項目",
+    "ogpWidth": 959,
+    "ogpHeight": 500
+  },
+  {
+    "path": "/cards/untracked-rate",
+    "title": "モニタリング項目(3)新規陽性者における接触歴等不明者数",
+    "category": "モニタリング項目",
+    "ogpWidth": 959,
+    "ogpHeight": 500
+  },
+  {
+    "path": "/cards/positive-rate",
+    "title": "モニタリング項目(4)検査の陽性率",
+    "category": "モニタリング項目",
+    "ogpWidth": 959,
+    "ogpHeight": 730
+  },
+  {
+    "path": "/cards/number-of-tokyo-rules-applied",
+    "title": "モニタリング項目(5)救急医療の東京ルールの適用件数",
+    "category": "モニタリング項目",
+    "ogpWidth": 959,
+    "ogpHeight": 500
+  },
+  {
+    "path": "/cards/number-of-hospitalized",
+    "title": "モニタリング項目(6)入院患者数",
+    "category": "モニタリング項目",
+    "ogpWidth": 959,
+    "ogpHeight": 500
+  },
+  {
+    "path": "/cards/positive-status-severe-case",
+    "title": "モニタリング項目(7)重症患者数",
+    "category": "モニタリング項目",
+    "ogpWidth": 959,
+    "ogpHeight": 500
+  },
+  {
+    "path": "/cards/attributes-of-confirmed-cases",
+    "title": "陽性者の属性",
+    "category": "その他 参考指標",
+    "ogpWidth": 959,
+    "ogpHeight": 480
+  },
+  {
+    "path": "/cards/number-of-confirmed-cases-by-municipalities",
+    "title": "陽性者数（区市町村別）",
+    "category": "その他 参考指標",
+    "ogpWidth": 959,
+    "ogpHeight": 480
+  },
+  {
+    "path": "/cards/positive-number-over65",
+    "title": "報告日別による陽性者数（65歳以上）の推移",
+    "category": "その他 参考指標",
+    "ogpWidth": 959,
+    "ogpHeight": 570
+  },
+  {
+    "path": "/cards/positive-number-by-developed-date",
+    "title": "発症日別による陽性者数の推移",
+    "category": "その他 参考指標",
+    "ogpWidth": 959,
+    "ogpHeight": 570
+  },
+  {
+    "path": "/cards/positive-number-by-diagnosed-date",
+    "title": "確定日別による陽性者数の推移",
+    "category": "その他 参考指標",
+    "ogpWidth": 959,
+    "ogpHeight": 570
+  },
+  {
+    "path": "/cards/deaths-by-death-date",
+    "title": "死亡日別による死亡者数の推移",
+    "category": "その他 参考指標",
+    "ogpWidth": 959,
+    "ogpHeight": 570
+  },
+  {
+    "path": "/cards/variant",
+    "title": "L452R変異株スクリーニングの実施状況",
+    "category": "その他 参考指標",
+    "ogpWidth": 959,
+    "ogpHeight": 730
+  },
+  {
+    "path": "/cards/predicted-number-of-toei-subway-passengers",
+    "title": "都営地下鉄の利用者数の推移",
+    "category": "その他 参考指標",
+    "ogpWidth": 959,
+    "ogpHeight": 570
+  },
+  {
+    "path": "/cards/agency",
+    "title": "都庁来庁者数の推移",
+    "category": "その他 参考指標",
+    "ogpWidth": 959,
+    "ogpHeight": 570
+  },
+  {
+    "path": "/cards/monitoring-number-of-reports-to-covid19-consultation-desk",
+    "title": "受診相談窓口における相談件数",
+    "category": "その他 参考指標",
+    "ogpWidth": 959,
+    "ogpHeight": 500
+  }
+]

components/_shared/AppLink.vue

@@ -70,13 +70,12 @@ export default Vue.extend({
           target: '_blank',
           rel: 'noopener noreferrer',
           class: 'ExternalLink',
-        }
-      } else {
-        return {
-          to: this.to,
-          class: 'Link',
-        }
+        };
       }
+      return {
+        to: this.to,
+        class: 'Link',
+      };
     },
     _showIcon(): boolean {
       // 指定がない場合、外部なら表示、内部なら表示しない

components/_shared/CustomExpansionPanel.vue

@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <button
+      type="button"
+      class="custom-expansion-panel-button"
+      :aria-expanded="`${isOpen}`"
+      :aria-controls="`${id}-content`"
+      @click="clickButton"
+    >
+      <span
+        class="custom-expansion-panel-icon"
+        :class="{ 'with-content-open': isOpen }"
+      >
+        <slot name="icon" />
+      </span>
+      <slot name="title" />
+    </button>
+    <transition
+      name="expand"
+      @enter="enter"
+      @after-enter="afterEnter"
+      @leave="leave"
+    >
+      <div
+        v-show="isOpen"
+        :id="`${id}-content`"
+        class="custom-expansion-panel-content"
+      >
+        <div class="custom-expansion-panel-content__wrap">
+          <slot name="content" />
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  props: {
+    defaultOpen: {
+      type: Boolean,
+      default: false,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isOpen: false,
+    }
+  },
+  mounted() {
+    this.isOpen = this.$props.defaultOpen
+  },
+  methods: {
+    clickButton($event) {
+      this.isOpen = !this.isOpen
+      this.$emit('click', $event)
+    },
+    enter(element: Element) {
+      element.style.width = getComputedStyle(element).width
+      element.style.position = 'absolute'
+      element.style.visibility = 'hidden'
+      element.style.height = 'auto'
+
+      const height = getComputedStyle(element).height
+
+      element.style.width = null
+      element.style.position = null
+      element.style.visibility = null
+      element.style.height = 0
+
+      requestAnimationFrame(() => {
+        element.style.height = height
+      })
+    },
+    afterEnter(element) {
+      element.style.height = 'auto'
+    },
+    leave(element) {
+      element.style.height = getComputedStyle(element).height
+
+      requestAnimationFrame(() => {
+        element.style.height = 0
+      })
+    },
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.expand-enter-active,
+.expand-leave-active {
+  transition: height 0.2s ease;
+  overflow: hidden;
+}
+.expand-enter,
+.expand-leave-to {
+  height: 0;
+}
+.custom-expansion-panel-button {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px 4px 0;
+  margin-bottom: 4px;
+}
+.custom-expansion-panel-icon {
+  display: inline-block;
+  margin-right: 4px;
+  transform: rotate(0);
+  transition: all 0.2s;
+  &.with-content-open {
+    transform: rotate(90deg);
+  }
+}
+.custom-expansion-panel-content {
+  display: flex;
+  &__wrap {
+    flex: 1 1 auto;
+    max-width: 100%;
+  }
+}
+</style>