From 8877cbe61ecde66609f385b35d3d0b2117bade44 Mon Sep 17 00:00:00 2001
From: Daiki <nojiri1098@gmail.com>
Date: Sat, 18 Apr 2020 23:19:11 +0900
Subject: [PATCH 1/4] Add line chart
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

一時的に「陽性患者数」の累計と置き換え
---
 components/LineChart.vue                      | 416 ++++++++++++++++++
 components/cards/ConfirmedCasesNumberCard.vue |   6 +-
 plugins/vue-chart.ts                          |  19 +-
 3 files changed, 437 insertions(+), 4 deletions(-)
 create mode 100644 components/LineChart.vue

diff --git a/components/LineChart.vue b/components/LineChart.vue
new file mode 100644
index 0000000000000..768ee5955c76e
--- /dev/null
+++ b/components/LineChart.vue
@@ -0,0 +1,416 @@
+<template>
+  <data-view :title="title" :title-id="titleId" :date="date">
+    <template v-slot:description>
+      <slot name="description" />
+    </template>
+    <template v-slot:button>
+      <data-selector
+        v-model="dataKind"
+        :target-id="chartId"
+        :style="{ display: canvas ? 'inline-block' : 'none' }"
+      />
+    </template>
+    <line-chart
+      :ref="'lineChart'"
+      :style="{ display: canvas ? 'block' : 'none' }"
+      :chart-id="chartId"
+      :chart-data="displayData"
+      :options="displayOption"
+      :height="240"
+    />
+    <v-data-table
+      :style="{ top: '-9999px', position: canvas ? 'fixed' : 'static' }"
+      :headers="tableHeaders"
+      :items="tableData"
+      :items-per-page="-1"
+      :hide-default-footer="true"
+      :height="240"
+      :fixed-header="true"
+      :disable-sort="true"
+      :mobile-breakpoint="0"
+      class="cardTable"
+      item-key="name"
+    />
+    <template v-slot:infoPanel>
+      <data-view-basic-info-panel
+        :l-text="displayInfo.lText"
+        :s-text="displayInfo.sText"
+        :unit="displayInfo.unit"
+      />
+    </template>
+    <template v-slot:footer>
+      <open-data-link v-show="url" :url="url" />
+    </template>
+  </data-view>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { TranslateResult } from 'vue-i18n'
+import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
+import { GraphDataType } from '@/utils/formatGraph'
+import DataView from '@/components/DataView.vue'
+import DataSelector from '@/components/DataSelector.vue'
+import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
+import OpenDataLink from '@/components/OpenDataLink.vue'
+
+import { getGraphSeriesStyle } from '@/utils/colors'
+
+type Data = {
+  dataKind: 'transition' | 'cumulative'
+  canvas: boolean
+}
+type Methods = {
+  formatDayBeforeRatio: (dayBeforeRatio: number) => string
+  isNotLoaded: () => boolean
+}
+type Computed = {
+  displayCumulativeRatio: string
+  displayTransitionRatio: string
+  displayInfo: {
+    lText: string
+    sText: string
+    unit: string
+  }
+  displayData: {
+    labels: string[]
+    datasets: {
+      label: 'transition' | 'cumulative'
+      data: number[]
+      backgroundColor: string
+      borderColor: string
+      borderWidth: number
+    }[]
+  }
+  displayOption: {
+    tooltips: {
+      displayColors: boolean
+      callbacks: {
+        label(tooltipItem: any): string
+        title(tooltipItem: any[], data: any): string | undefined
+      }
+    }
+    responsive: boolean
+    maintainAspectRatio: boolean
+    legend: {
+      display: boolean
+    }
+    scales: object
+  }
+  scaledTicksYAxisMax: number
+  tableHeaders: {
+    text: TranslateResult
+    value: string
+  }[]
+  tableData: {
+    [key: number]: number
+  }[]
+}
+type Props = {
+  title: string
+  titleId: string
+  chartId: string
+  chartData: GraphDataType[]
+  date: string
+  unit: string
+  url: string
+}
+
+const options: ThisTypedComponentOptionsWithRecordProps<
+  Vue,
+  Data,
+  Methods,
+  Computed,
+  Props
+> = {
+  created() {
+    this.canvas = process.browser
+    this.dataKind =
+      this.$route.query.embed && this.$route.query.dataKind === 'cumulative'
+        ? 'transition'
+        : 'cumulative'
+  },
+  components: { DataView, DataSelector, DataViewBasicInfoPanel, OpenDataLink },
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    titleId: {
+      type: String,
+      default: ''
+    },
+    chartId: {
+      type: String,
+      default: 'line-chart'
+    },
+    chartData: {
+      type: Array,
+      default: () => []
+    },
+    date: {
+      type: String,
+      required: true
+    },
+    unit: {
+      type: String,
+      default: ''
+    },
+    url: {
+      type: String,
+      default: ''
+    }
+  },
+  data: () => ({
+    dataKind: 'cumulative',
+    canvas: true
+  }),
+  computed: {
+    displayCumulativeRatio() {
+      if (this.isNotLoaded()) {
+        return ''
+      }
+
+      const lastDay = this.chartData.slice(-1)[0].cumulative
+      const lastDayBefore = this.chartData.slice(-2)[0].cumulative
+      return this.formatDayBeforeRatio(lastDay - lastDayBefore)
+    },
+    displayTransitionRatio() {
+      if (this.isNotLoaded()) {
+        return ''
+      }
+
+      const lastDay = this.chartData.slice(-1)[0].transition
+      const lastDayBefore = this.chartData.slice(-2)[0].transition
+      return this.formatDayBeforeRatio(lastDay - lastDayBefore)
+    },
+    displayInfo() {
+      if (this.isNotLoaded()) {
+        return {
+          lText: '',
+          sText: '',
+          unit: ''
+        }
+      }
+
+      if (this.dataKind === 'transition') {
+        return {
+          lText: `${this.chartData.slice(-1)[0].transition.toLocaleString()}`,
+          sText: `${this.chartData.slice(-1)[0].label} ${this.$t(
+            '実績値'
+          )}（${this.$t('前日比')}: ${this.displayTransitionRatio} ${
+            this.unit
+          }）`,
+          unit: this.unit
+        }
+      }
+      return {
+        lText: this.chartData[
+          this.chartData.length - 1
+        ].cumulative.toLocaleString(),
+        sText: `${this.chartData.slice(-1)[0].label} ${this.$t(
+          '累計値'
+        )}（${this.$t('前日比')}: ${this.displayCumulativeRatio} ${
+          this.unit
+        }）`,
+        unit: this.unit
+      }
+    },
+    displayData() {
+      if (this.isNotLoaded()) {
+        return {
+          labels: [],
+          datasets: [
+            {
+              label: 'transition',
+              data: [],
+              backgroundColor: '',
+              borderColor: '',
+              borderWidth: 0
+            }
+          ]
+        }
+      }
+
+      const style = getGraphSeriesStyle(1)[0]
+      if (this.dataKind === 'transition') {
+        return {
+          labels: this.chartData.map(d => {
+            return d.label
+          }),
+          datasets: [
+            {
+              label: this.dataKind,
+              data: this.chartData.map(d => {
+                return d.transition
+              }),
+              backgroundColor: style.fillColor,
+              borderColor: style.strokeColor,
+              borderWidth: 1
+            }
+          ]
+        }
+      }
+      return {
+        labels: this.chartData.map(d => d.label),
+        datasets: [
+          {
+            label: this.dataKind,
+            data: this.chartData.map(d => {
+              return d.cumulative
+            }),
+            backgroundColor: '#edfff3',
+            borderColor: style.strokeColor,
+            borderWidth: 2
+          }
+        ]
+      }
+    },
+    displayOption() {
+      const unit = this.unit
+      const scaledTicksYAxisMax = this.scaledTicksYAxisMax
+      const options = {
+        tooltips: {
+          displayColors: false,
+          callbacks: {
+            label(tooltipItem: any) {
+              const labelText = `${parseInt(
+                tooltipItem.value
+              ).toLocaleString()} ${unit}`
+              return labelText
+            },
+            title(tooltipItem: any, data: any) {
+              return data.labels[tooltipItem[0].index]
+            }
+          }
+        },
+        responsive: true,
+        maintainAspectRatio: false,
+        legend: {
+          display: false
+        },
+        scales: {
+          xAxes: [
+            {
+              id: 'day',
+              stacked: true,
+              gridLines: {
+                display: false
+              },
+              ticks: {
+                fontSize: 9,
+                maxTicksLimit: 20,
+                fontColor: '#808080',
+                maxRotation: 0,
+                callback: (label: string) => {
+                  return label.split('/')[1]
+                }
+              }
+              // #2384: If you set "type" to "time", make sure that the bars at both ends are not hidden.
+              // #2384: typeをtimeに設定する時はグラフの両端が見切れないか確認してください
+            },
+            {
+              id: 'month',
+              stacked: true,
+              gridLines: {
+                drawOnChartArea: false,
+                drawTicks: true,
+                drawBorder: false,
+                tickMarkLength: 10
+              },
+              ticks: {
+                fontSize: 11,
+                fontColor: '#808080',
+                padding: 3,
+                fontStyle: 'bold',
+                gridLines: {
+                  display: true
+                }
+              },
+              type: 'time',
+              time: {
+                unit: 'month',
+                parser: 'M/D',
+                displayFormats: {
+                  month: 'MMM'
+                }
+              }
+            }
+          ],
+          yAxes: [
+            {
+              location: 'bottom',
+              stacked: true,
+              gridLines: {
+                display: true,
+                color: '#E5E5E5'
+              },
+              ticks: {
+                suggestedMin: 0,
+                maxTicksLimit: 8,
+                fontColor: '#808080',
+                suggestedMax: scaledTicksYAxisMax
+              }
+            }
+          ]
+        }
+      }
+      if (this.$route.query.ogp === 'true') {
+        Object.assign(options, { animation: { duration: 0 } })
+      }
+      return options
+    },
+    scaledTicksYAxisMax() {
+      const yAxisMax = 1.2
+      const dataKind =
+        this.dataKind === 'transition' ? 'transition' : 'cumulative'
+      const values = this.chartData.map(d => d[dataKind])
+      return Math.max(...values) * yAxisMax
+    },
+    tableHeaders() {
+      return [
+        { text: this.$t('日付'), value: 'text' },
+        { text: this.title, value: '0' }
+      ]
+    },
+    tableData() {
+      return this.displayData.datasets[0].data.map((_, i) => {
+        return Object.assign(
+          { text: this.displayData.labels[i] },
+          { '0': this.displayData.datasets[0].data[i] }
+        )
+      })
+    }
+  },
+  methods: {
+    formatDayBeforeRatio(dayBeforeRatio: number): string {
+      const dayBeforeRatioLocaleString = dayBeforeRatio.toLocaleString()
+      switch (Math.sign(dayBeforeRatio)) {
+        case 1:
+          return `+${dayBeforeRatioLocaleString}`
+        case -1:
+          return `${dayBeforeRatioLocaleString}`
+        default:
+          return `${dayBeforeRatioLocaleString}`
+      }
+    },
+    isNotLoaded() {
+      return this.chartData.length === 0
+    }
+  },
+  mounted() {
+    const lineChart = this.$refs.lineChart as Vue
+    console.log(lineChart)
+    const lineElement = lineChart.$el
+    const canvas = lineElement.querySelector('canvas')
+    const labelledbyId = `${this.titleId}-graph`
+
+    if (canvas) {
+      canvas.setAttribute('role', 'img')
+      canvas.setAttribute('aria-labelledby', labelledbyId)
+    }
+  }
+}
+
+export default Vue.extend(options)
+</script>
diff --git a/components/cards/ConfirmedCasesNumberCard.vue b/components/cards/ConfirmedCasesNumberCard.vue
index 8c8cd6f380ffa..0986760b0bcc5 100644
--- a/components/cards/ConfirmedCasesNumberCard.vue
+++ b/components/cards/ConfirmedCasesNumberCard.vue
@@ -1,6 +1,6 @@
 <template>
   <v-col cols="12" md="6" class="DataCard">
-    <time-bar-chart
+    <line-chart
       :title="$t('陽性患者数')"
       :title-id="'number-of-confirmed-cases'"
       :chart-id="'time-bar-chart-patients'"
@@ -14,11 +14,11 @@
 
 <script>
 import formatGraph from '@/utils/formatGraph'
-import TimeBarChart from '@/components/TimeBarChart.vue'
+import LineChart from '@/components/LineChart.vue'
 
 export default {
   components: {
-    TimeBarChart
+    LineChart
   },
   data() {
     return {
diff --git a/plugins/vue-chart.ts b/plugins/vue-chart.ts
index 3180737e99fea..bb3a97dd2ec27 100644
--- a/plugins/vue-chart.ts
+++ b/plugins/vue-chart.ts
@@ -1,6 +1,6 @@
 import Vue, { PropType } from 'vue'
 import { ChartData, ChartOptions } from 'chart.js'
-import { Doughnut, Pie, Bar, mixins } from 'vue-chartjs'
+import { Doughnut, Pie, Bar, Line, mixins } from 'vue-chartjs'
 import { Plugin } from '@nuxt/types'
 
 type ChartVCData = { chartData: ChartData }
@@ -63,6 +63,23 @@ const VueChartPlugin: Plugin = () => {
       }
     }
   )
+
+  Vue.component<ChartVCData, ChartVCMethod, ChartVCComputed, ChartVCProps>(
+    'line-chart',
+    {
+      extends: Line,
+      mixins: [reactiveProp],
+      props: {
+        options: {
+          type: Object,
+          default: () => {}
+        }
+      },
+      mounted(): void {
+        this.renderChart(this.chartData, this.options)
+      }
+    }
+  )
 }
 
 export default VueChartPlugin

From 332f61357c2a8624880326ed090807f1837cb43c Mon Sep 17 00:00:00 2001
From: Daiki <nojiri1098@gmail.com>
Date: Sat, 18 Apr 2020 23:26:20 +0900
Subject: [PATCH 2/4] Remove console.log

---
 components/LineChart.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/LineChart.vue b/components/LineChart.vue
index 768ee5955c76e..18b5ef0bdc881 100644
--- a/components/LineChart.vue
+++ b/components/LineChart.vue
@@ -400,7 +400,6 @@ const options: ThisTypedComponentOptionsWithRecordProps<
   },
   mounted() {
     const lineChart = this.$refs.lineChart as Vue
-    console.log(lineChart)
     const lineElement = lineChart.$el
     const canvas = lineElement.querySelector('canvas')
     const labelledbyId = `${this.titleId}-graph`

From 6a008a4c11ea35f06fcde515f0d11304072c4f27 Mon Sep 17 00:00:00 2001
From: Daiki <nojiri1098@gmail.com>
Date: Sun, 19 Apr 2020 10:25:09 +0900
Subject: [PATCH 3/4] Add line chart to TimeBarChart
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

日別と累計で棒グラフと折れ線グラフが切り替わるようになった
---
 components/LineChart.vue                      | 415 ------------------
 components/TimeBarChart.vue                   |  50 ++-
 components/cards/ConfirmedCasesNumberCard.vue |   6 +-
 3 files changed, 34 insertions(+), 437 deletions(-)
 delete mode 100644 components/LineChart.vue

diff --git a/components/LineChart.vue b/components/LineChart.vue
deleted file mode 100644
index 18b5ef0bdc881..0000000000000
--- a/components/LineChart.vue
+++ /dev/null
@@ -1,415 +0,0 @@
-<template>
-  <data-view :title="title" :title-id="titleId" :date="date">
-    <template v-slot:description>
-      <slot name="description" />
-    </template>
-    <template v-slot:button>
-      <data-selector
-        v-model="dataKind"
-        :target-id="chartId"
-        :style="{ display: canvas ? 'inline-block' : 'none' }"
-      />
-    </template>
-    <line-chart
-      :ref="'lineChart'"
-      :style="{ display: canvas ? 'block' : 'none' }"
-      :chart-id="chartId"
-      :chart-data="displayData"
-      :options="displayOption"
-      :height="240"
-    />
-    <v-data-table
-      :style="{ top: '-9999px', position: canvas ? 'fixed' : 'static' }"
-      :headers="tableHeaders"
-      :items="tableData"
-      :items-per-page="-1"
-      :hide-default-footer="true"
-      :height="240"
-      :fixed-header="true"
-      :disable-sort="true"
-      :mobile-breakpoint="0"
-      class="cardTable"
-      item-key="name"
-    />
-    <template v-slot:infoPanel>
-      <data-view-basic-info-panel
-        :l-text="displayInfo.lText"
-        :s-text="displayInfo.sText"
-        :unit="displayInfo.unit"
-      />
-    </template>
-    <template v-slot:footer>
-      <open-data-link v-show="url" :url="url" />
-    </template>
-  </data-view>
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-import { TranslateResult } from 'vue-i18n'
-import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
-import { GraphDataType } from '@/utils/formatGraph'
-import DataView from '@/components/DataView.vue'
-import DataSelector from '@/components/DataSelector.vue'
-import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
-import OpenDataLink from '@/components/OpenDataLink.vue'
-
-import { getGraphSeriesStyle } from '@/utils/colors'
-
-type Data = {
-  dataKind: 'transition' | 'cumulative'
-  canvas: boolean
-}
-type Methods = {
-  formatDayBeforeRatio: (dayBeforeRatio: number) => string
-  isNotLoaded: () => boolean
-}
-type Computed = {
-  displayCumulativeRatio: string
-  displayTransitionRatio: string
-  displayInfo: {
-    lText: string
-    sText: string
-    unit: string
-  }
-  displayData: {
-    labels: string[]
-    datasets: {
-      label: 'transition' | 'cumulative'
-      data: number[]
-      backgroundColor: string
-      borderColor: string
-      borderWidth: number
-    }[]
-  }
-  displayOption: {
-    tooltips: {
-      displayColors: boolean
-      callbacks: {
-        label(tooltipItem: any): string
-        title(tooltipItem: any[], data: any): string | undefined
-      }
-    }
-    responsive: boolean
-    maintainAspectRatio: boolean
-    legend: {
-      display: boolean
-    }
-    scales: object
-  }
-  scaledTicksYAxisMax: number
-  tableHeaders: {
-    text: TranslateResult
-    value: string
-  }[]
-  tableData: {
-    [key: number]: number
-  }[]
-}
-type Props = {
-  title: string
-  titleId: string
-  chartId: string
-  chartData: GraphDataType[]
-  date: string
-  unit: string
-  url: string
-}
-
-const options: ThisTypedComponentOptionsWithRecordProps<
-  Vue,
-  Data,
-  Methods,
-  Computed,
-  Props
-> = {
-  created() {
-    this.canvas = process.browser
-    this.dataKind =
-      this.$route.query.embed && this.$route.query.dataKind === 'cumulative'
-        ? 'transition'
-        : 'cumulative'
-  },
-  components: { DataView, DataSelector, DataViewBasicInfoPanel, OpenDataLink },
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    titleId: {
-      type: String,
-      default: ''
-    },
-    chartId: {
-      type: String,
-      default: 'line-chart'
-    },
-    chartData: {
-      type: Array,
-      default: () => []
-    },
-    date: {
-      type: String,
-      required: true
-    },
-    unit: {
-      type: String,
-      default: ''
-    },
-    url: {
-      type: String,
-      default: ''
-    }
-  },
-  data: () => ({
-    dataKind: 'cumulative',
-    canvas: true
-  }),
-  computed: {
-    displayCumulativeRatio() {
-      if (this.isNotLoaded()) {
-        return ''
-      }
-
-      const lastDay = this.chartData.slice(-1)[0].cumulative
-      const lastDayBefore = this.chartData.slice(-2)[0].cumulative
-      return this.formatDayBeforeRatio(lastDay - lastDayBefore)
-    },
-    displayTransitionRatio() {
-      if (this.isNotLoaded()) {
-        return ''
-      }
-
-      const lastDay = this.chartData.slice(-1)[0].transition
-      const lastDayBefore = this.chartData.slice(-2)[0].transition
-      return this.formatDayBeforeRatio(lastDay - lastDayBefore)
-    },
-    displayInfo() {
-      if (this.isNotLoaded()) {
-        return {
-          lText: '',
-          sText: '',
-          unit: ''
-        }
-      }
-
-      if (this.dataKind === 'transition') {
-        return {
-          lText: `${this.chartData.slice(-1)[0].transition.toLocaleString()}`,
-          sText: `${this.chartData.slice(-1)[0].label} ${this.$t(
-            '実績値'
-          )}（${this.$t('前日比')}: ${this.displayTransitionRatio} ${
-            this.unit
-          }）`,
-          unit: this.unit
-        }
-      }
-      return {
-        lText: this.chartData[
-          this.chartData.length - 1
-        ].cumulative.toLocaleString(),
-        sText: `${this.chartData.slice(-1)[0].label} ${this.$t(
-          '累計値'
-        )}（${this.$t('前日比')}: ${this.displayCumulativeRatio} ${
-          this.unit
-        }）`,
-        unit: this.unit
-      }
-    },
-    displayData() {
-      if (this.isNotLoaded()) {
-        return {
-          labels: [],
-          datasets: [
-            {
-              label: 'transition',
-              data: [],
-              backgroundColor: '',
-              borderColor: '',
-              borderWidth: 0
-            }
-          ]
-        }
-      }
-
-      const style = getGraphSeriesStyle(1)[0]
-      if (this.dataKind === 'transition') {
-        return {
-          labels: this.chartData.map(d => {
-            return d.label
-          }),
-          datasets: [
-            {
-              label: this.dataKind,
-              data: this.chartData.map(d => {
-                return d.transition
-              }),
-              backgroundColor: style.fillColor,
-              borderColor: style.strokeColor,
-              borderWidth: 1
-            }
-          ]
-        }
-      }
-      return {
-        labels: this.chartData.map(d => d.label),
-        datasets: [
-          {
-            label: this.dataKind,
-            data: this.chartData.map(d => {
-              return d.cumulative
-            }),
-            backgroundColor: '#edfff3',
-            borderColor: style.strokeColor,
-            borderWidth: 2
-          }
-        ]
-      }
-    },
-    displayOption() {
-      const unit = this.unit
-      const scaledTicksYAxisMax = this.scaledTicksYAxisMax
-      const options = {
-        tooltips: {
-          displayColors: false,
-          callbacks: {
-            label(tooltipItem: any) {
-              const labelText = `${parseInt(
-                tooltipItem.value
-              ).toLocaleString()} ${unit}`
-              return labelText
-            },
-            title(tooltipItem: any, data: any) {
-              return data.labels[tooltipItem[0].index]
-            }
-          }
-        },
-        responsive: true,
-        maintainAspectRatio: false,
-        legend: {
-          display: false
-        },
-        scales: {
-          xAxes: [
-            {
-              id: 'day',
-              stacked: true,
-              gridLines: {
-                display: false
-              },
-              ticks: {
-                fontSize: 9,
-                maxTicksLimit: 20,
-                fontColor: '#808080',
-                maxRotation: 0,
-                callback: (label: string) => {
-                  return label.split('/')[1]
-                }
-              }
-              // #2384: If you set "type" to "time", make sure that the bars at both ends are not hidden.
-              // #2384: typeをtimeに設定する時はグラフの両端が見切れないか確認してください
-            },
-            {
-              id: 'month',
-              stacked: true,
-              gridLines: {
-                drawOnChartArea: false,
-                drawTicks: true,
-                drawBorder: false,
-                tickMarkLength: 10
-              },
-              ticks: {
-                fontSize: 11,
-                fontColor: '#808080',
-                padding: 3,
-                fontStyle: 'bold',
-                gridLines: {
-                  display: true
-                }
-              },
-              type: 'time',
-              time: {
-                unit: 'month',
-                parser: 'M/D',
-                displayFormats: {
-                  month: 'MMM'
-                }
-              }
-            }
-          ],
-          yAxes: [
-            {
-              location: 'bottom',
-              stacked: true,
-              gridLines: {
-                display: true,
-                color: '#E5E5E5'
-              },
-              ticks: {
-                suggestedMin: 0,
-                maxTicksLimit: 8,
-                fontColor: '#808080',
-                suggestedMax: scaledTicksYAxisMax
-              }
-            }
-          ]
-        }
-      }
-      if (this.$route.query.ogp === 'true') {
-        Object.assign(options, { animation: { duration: 0 } })
-      }
-      return options
-    },
-    scaledTicksYAxisMax() {
-      const yAxisMax = 1.2
-      const dataKind =
-        this.dataKind === 'transition' ? 'transition' : 'cumulative'
-      const values = this.chartData.map(d => d[dataKind])
-      return Math.max(...values) * yAxisMax
-    },
-    tableHeaders() {
-      return [
-        { text: this.$t('日付'), value: 'text' },
-        { text: this.title, value: '0' }
-      ]
-    },
-    tableData() {
-      return this.displayData.datasets[0].data.map((_, i) => {
-        return Object.assign(
-          { text: this.displayData.labels[i] },
-          { '0': this.displayData.datasets[0].data[i] }
-        )
-      })
-    }
-  },
-  methods: {
-    formatDayBeforeRatio(dayBeforeRatio: number): string {
-      const dayBeforeRatioLocaleString = dayBeforeRatio.toLocaleString()
-      switch (Math.sign(dayBeforeRatio)) {
-        case 1:
-          return `+${dayBeforeRatioLocaleString}`
-        case -1:
-          return `${dayBeforeRatioLocaleString}`
-        default:
-          return `${dayBeforeRatioLocaleString}`
-      }
-    },
-    isNotLoaded() {
-      return this.chartData.length === 0
-    }
-  },
-  mounted() {
-    const lineChart = this.$refs.lineChart as Vue
-    const lineElement = lineChart.$el
-    const canvas = lineElement.querySelector('canvas')
-    const labelledbyId = `${this.titleId}-graph`
-
-    if (canvas) {
-      canvas.setAttribute('role', 'img')
-      canvas.setAttribute('aria-labelledby', labelledbyId)
-    }
-  }
-}
-
-export default Vue.extend(options)
-</script>
diff --git a/components/TimeBarChart.vue b/components/TimeBarChart.vue
index 01044219c8f16..2d71ede08f49f 100644
--- a/components/TimeBarChart.vue
+++ b/components/TimeBarChart.vue
@@ -12,7 +12,15 @@
     </template>
     <bar
       :ref="'barChart'"
-      :style="{ display: canvas ? 'block' : 'none' }"
+      :style="{ display: displayValue('bar') }"
+      :chart-id="chartId"
+      :chart-data="displayData"
+      :options="displayOption"
+      :height="240"
+    />
+    <line-chart
+      :ref="'lineChart'"
+      :style="{ display: displayValue('line') }"
       :chart-id="chartId"
       :chart-data="displayData"
       :options="displayOption"
@@ -63,6 +71,9 @@ type Data = {
 type Methods = {
   formatDayBeforeRatio: (dayBeforeRatio: number) => string
   isNotLoaded: () => boolean
+  displayValue: (chartType: 'bar' | 'line') => 'block' | 'none'
+  isTransition: () => boolean
+  isCumulative: () => boolean
 }
 type Computed = {
   displayCumulativeRatio: string
@@ -142,7 +153,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
     },
     chartId: {
       type: String,
-      default: 'time-bar-chart'
+      default: 'line-chart'
     },
     chartData: {
       type: Array,
@@ -162,7 +173,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
     }
   },
   data: () => ({
-    dataKind: 'transition',
+    dataKind: 'cumulative',
     canvas: true
   }),
   computed: {
@@ -193,7 +204,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
         }
       }
 
-      if (this.dataKind === 'transition') {
+      if (this.isTransition()) {
         return {
           lText: `${this.chartData.slice(-1)[0].transition.toLocaleString()}`,
           sText: `${this.chartData.slice(-1)[0].label} ${this.$t(
@@ -233,7 +244,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       }
 
       const style = getGraphSeriesStyle(1)[0]
-      if (this.dataKind === 'transition') {
+      if (this.isTransition()) {
         return {
           labels: this.chartData.map(d => {
             return d.label
@@ -259,9 +270,9 @@ const options: ThisTypedComponentOptionsWithRecordProps<
             data: this.chartData.map(d => {
               return d.cumulative
             }),
-            backgroundColor: style.fillColor,
+            backgroundColor: '#edfff3',
             borderColor: style.strokeColor,
-            borderWidth: 1
+            borderWidth: 2
           }
         ]
       }
@@ -362,8 +373,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
     },
     scaledTicksYAxisMax() {
       const yAxisMax = 1.2
-      const dataKind =
-        this.dataKind === 'transition' ? 'transition' : 'cumulative'
+      const dataKind = this.isTransition() ? 'transition' : 'cumulative'
       const values = this.chartData.map(d => d[dataKind])
       return Math.max(...values) * yAxisMax
     },
@@ -396,17 +406,19 @@ const options: ThisTypedComponentOptionsWithRecordProps<
     },
     isNotLoaded() {
       return this.chartData.length === 0
-    }
-  },
-  mounted() {
-    const barChart = this.$refs.barChart as Vue
-    const barElement = barChart.$el
-    const canvas = barElement.querySelector('canvas')
-    const labelledbyId = `${this.titleId}-graph`
+    },
+    displayValue(chartType) {
+      if (chartType === 'bar') {
+        return this.isTransition() ? 'block' : 'none'
+      }
 
-    if (canvas) {
-      canvas.setAttribute('role', 'img')
-      canvas.setAttribute('aria-labelledby', labelledbyId)
+      return this.isCumulative() ? 'block' : 'none'
+    },
+    isTransition() {
+      return this.dataKind === 'transition'
+    },
+    isCumulative() {
+      return this.dataKind === 'cumulative'
     }
   }
 }
diff --git a/components/cards/ConfirmedCasesNumberCard.vue b/components/cards/ConfirmedCasesNumberCard.vue
index 0986760b0bcc5..8c8cd6f380ffa 100644
--- a/components/cards/ConfirmedCasesNumberCard.vue
+++ b/components/cards/ConfirmedCasesNumberCard.vue
@@ -1,6 +1,6 @@
 <template>
   <v-col cols="12" md="6" class="DataCard">
-    <line-chart
+    <time-bar-chart
       :title="$t('陽性患者数')"
       :title-id="'number-of-confirmed-cases'"
       :chart-id="'time-bar-chart-patients'"
@@ -14,11 +14,11 @@
 
 <script>
 import formatGraph from '@/utils/formatGraph'
-import LineChart from '@/components/LineChart.vue'
+import TimeBarChart from '@/components/TimeBarChart.vue'
 
 export default {
   components: {
-    LineChart
+    TimeBarChart
   },
   data() {
     return {

From 7a8f8f468d0bb85a8f8f83160759d6a7cc9ba2e0 Mon Sep 17 00:00:00 2001
From: Daiki <nojiri1098@gmail.com>
Date: Sun, 19 Apr 2020 10:28:38 +0900
Subject: [PATCH 4/4] Rename "TimeBarChart" to "TimeChart"
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

棒グラフと折れ線グラフをどちらも含むコンポーネントになったので，BarChartという名前が不適切になった
時系列データという意味でTimeChartにした
---
 components/{TimeBarChart.vue => TimeChart.vue}         | 0
 components/cards/ConfirmedCasesNumberCard.vue          | 8 ++++----
 components/cards/ConsultationDeskReportsNumberCard.vue | 8 ++++----
 components/cards/TestedNumberCard.vue                  | 8 ++++----
 4 files changed, 12 insertions(+), 12 deletions(-)
 rename components/{TimeBarChart.vue => TimeChart.vue} (100%)

diff --git a/components/TimeBarChart.vue b/components/TimeChart.vue
similarity index 100%
rename from components/TimeBarChart.vue
rename to components/TimeChart.vue
diff --git a/components/cards/ConfirmedCasesNumberCard.vue b/components/cards/ConfirmedCasesNumberCard.vue
index 8c8cd6f380ffa..05b9bc6542734 100644
--- a/components/cards/ConfirmedCasesNumberCard.vue
+++ b/components/cards/ConfirmedCasesNumberCard.vue
@@ -1,9 +1,9 @@
 <template>
   <v-col cols="12" md="6" class="DataCard">
-    <time-bar-chart
+    <time-chart
       :title="$t('陽性患者数')"
       :title-id="'number-of-confirmed-cases'"
-      :chart-id="'time-bar-chart-patients'"
+      :chart-id="'time-chart-patients'"
       :chart-data="patientsGraph"
       :date="date"
       :unit="$t('人')"
@@ -14,11 +14,11 @@
 
 <script>
 import formatGraph from '@/utils/formatGraph'
-import TimeBarChart from '@/components/TimeBarChart.vue'
+import TimeChart from '@/components/TimeChart.vue'
 
 export default {
   components: {
-    TimeBarChart
+    TimeChart
   },
   data() {
     return {
diff --git a/components/cards/ConsultationDeskReportsNumberCard.vue b/components/cards/ConsultationDeskReportsNumberCard.vue
index 9e9f1da6855cd..1214a0820b8a9 100644
--- a/components/cards/ConsultationDeskReportsNumberCard.vue
+++ b/components/cards/ConsultationDeskReportsNumberCard.vue
@@ -1,9 +1,9 @@
 <template>
   <v-col cols="12" md="6" class="DataCard">
-    <time-bar-chart
+    <time-chart
       :title="$t('相談窓口相談件数')"
       :title-id="'number-of-reports-to-covid19-consultation-desk'"
-      :chart-id="'time-bar-chart-querents'"
+      :chart-id="'time-chart-querents'"
       :chart-data="querentsGraph"
       :date="date"
       :unit="$t('件.reports')"
@@ -15,11 +15,11 @@
 
 <script>
 import formatGraph from '@/utils/formatGraph'
-import TimeBarChart from '@/components/TimeBarChart.vue'
+import TimeChart from '@/components/TimeChart.vue'
 
 export default {
   components: {
-    TimeBarChart
+    TimeChart
   },
   data() {
     return {
diff --git a/components/cards/TestedNumberCard.vue b/components/cards/TestedNumberCard.vue
index c9b7be1177ca9..0e1d78eb39bb5 100644
--- a/components/cards/TestedNumberCard.vue
+++ b/components/cards/TestedNumberCard.vue
@@ -1,9 +1,9 @@
 <template>
   <v-col cols="12" md="6" class="DataCard">
-    <time-bar-chart
+    <time-chart
       :title="$t('検査実施数')"
       :title-id="'number-of-tested-cases'"
-      :chart-id="'time-bar-chart-tested'"
+      :chart-id="'time-chart-tested'"
       :chart-data="inspectionsGraph"
       :date="date"
       :unit="$t('件.tested')"
@@ -13,12 +13,12 @@
 </template>
 
 <script>
-import TimeBarChart from '@/components/TimeBarChart.vue'
+import TimeChart from '@/components/TimeChart.vue'
 import formatGraph from '@/utils/formatGraph'
 
 export default {
   components: {
-    TimeBarChart
+    TimeChart
   },
   data() {
     return {