Merge pull request #190 from covid19-oita/development

Release v2.5.1
covid19-oita · Apr 20, 2020 · 589ef66 · 589ef66
2 parents 8a94d33 + 95cbb3e
commit 589ef66
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 32 deletions.
diff --git a/components/TimeBarChart.vue → components/TimeChart.vue b/components/TimeBarChart.vue → components/TimeChart.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
@@ -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
@@ -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
@@ -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 {

diff --git 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