Add Chiyoda area visitors graph

components/cards/ChiyodaVisitorsCard.vue

@@ -0,0 +1,39 @@
+<template>
+  <v-col cols="12" md="6" class="DataCard">
+    <visitors-bar-chart
+      :title="$t('千代田区エリアの来訪者推移（参考値）')"
+      :title-id="'chiyoda-visitors'"
+      :chart-id="'chiyoda-visitors'"
+      :chart-data="chartData.data"
+      :date="chartData.date"
+      :tooltip-title="tooltipTitle"
+      :standard-date="'2020-02-03'"
+      :start-date="'2020-02-10'"
+    />
+  </v-col>
+</template>
+
+<script>
+import ChiyodaData from '@/data/13101_daily_visitors.json'
+import VisitorsBarChart from '@/components/VisitorsBarChart.vue'
+
+export default {
+  components: {
+    VisitorsBarChart
+  },
+  data() {
+    // ツールチップ label 文字列
+    // this.$t を使うため visitors-bar-chart の外側へ
+    const tooltipTitle = tooltipItems => {
+      const label = tooltipItems[0].label
+      return this.$t('期間: {duration}', {
+        duration: this.$t(label)
+      })
+    }
+    return {
+      chartData: ChiyodaData,
+      tooltipTitle
+    }
+  }
+}
+</script>

nuxt.config.ts

@@ -161,7 +161,8 @@ const config: Configuration = {
         '/cards/number-of-reports-to-covid19-consultation-desk',
         '/cards/predicted-number-of-toei-subway-passengers',
         '/cards/agency',
-        '/cards/shinjuku-visitors'
+        '/cards/shinjuku-visitors',
+        '/cards/chiyoda-visitors'
       ]
 
       const routes: string[] = []

pages/cards/_card.vue

@@ -39,6 +39,9 @@
     <shinjuku-visitors-card
       v-else-if="this.$route.params.card == 'shinjuku-visitors'"
     />
+    <chiyoda-visitors-card
+      v-else-if="this.$route.params.card == 'chiyoda-visitors'"
+    />
   </div>
 </template>
 
@@ -47,6 +50,7 @@ import Data from '@/data/data.json'
 import MetroData from '@/data/metro.json'
 import agencyData from '@/data/agency.json'
 import ShinjukuData from '@/data/13104_daily_visitors.json'
+import ChiyodaData from '@/data/13101_daily_visitors.json'
 import ConfirmedCasesDetailsCard from '@/components/cards/ConfirmedCasesDetailsCard.vue'
 import TestedCasesDetailsCard from '@/components/cards/TestedCasesDetailsCard.vue'
 import ConfirmedCasesNumberCard from '@/components/cards/ConfirmedCasesNumberCard.vue'
@@ -58,6 +62,7 @@ import ConsultationDeskReportsNumberCard from '@/components/cards/ConsultationDe
 import MetroCard from '@/components/cards/MetroCard.vue'
 import AgencyCard from '@/components/cards/AgencyCard.vue'
 import ShinjukuVisitorsCard from '@/components/cards/ShinjukuVisitorsCard.vue'
+import ChiyodaVisitorsCard from '@/components/cards/ChiyodaVisitorsCard.vue'
 
 export default {
   components: {
@@ -71,7 +76,8 @@ export default {
     ConsultationDeskReportsNumberCard,
     MetroCard,
     AgencyCard,
-    ShinjukuVisitorsCard
+    ShinjukuVisitorsCard,
+    ChiyodaVisitorsCard
   },
   data() {
     let title, updatedAt
@@ -117,9 +123,13 @@ export default {
         updatedAt = agencyData.date
         break
       case 'shinjuku-visitors':
-        title = this.$t('新宿区の来訪者数の推移')
+        title = this.$t('新宿区エリアの来訪者数の推移（参考値）')
         updatedAt = ShinjukuData.date
         break
+      case 'chiyoda-visitors':
+        title = this.$t('千代田区エリアの来訪者数の推移（参考値）')
+        updatedAt = ChiyodaData.date
+        break
     }
 
     const data = {

pages/index.vue

@@ -24,6 +24,7 @@
       <metro-card />
       <agency-card />
       <shinjuku-visitors-card />
+      <chiyoda-visitors-card />
     </v-row>
   </div>
 </template>
@@ -47,6 +48,7 @@ import ConsultationDeskReportsNumberCard from '@/components/cards/ConsultationDe
 import MetroCard from '@/components/cards/MetroCard.vue'
 import AgencyCard from '@/components/cards/AgencyCard.vue'
 import ShinjukuVisitorsCard from '@/components/cards/ShinjukuVisitorsCard.vue'
+import ChiyodaVisitorsCard from '@/components/cards/ChiyodaVisitorsCard.vue'
 
 export default Vue.extend({
   components: {
@@ -63,7 +65,8 @@ export default Vue.extend({
     ConsultationDeskReportsNumberCard,
     MetroCard,
     AgencyCard,
-    ShinjukuVisitorsCard
+    ShinjukuVisitorsCard,
+    ChiyodaVisitorsCard
   },
   data() {
     const data = {