入院患者数と病床数の円グラフを追加 (#66)

* FIX culumns in formatTable.ts

* Update data/news.json, Add news release on 3/22

* Delete 退院には、死亡退院を含む

* Updata data.json on 3/27

* update data.json and news.json by News Relsese on 3/28

* FIX conflict data.json

* Add .vscode to .gitigore

* Add ConfirmedCasesTable to TOPPAGE using /data/main_summary.json

* update main_summary.json add NewsRelease on 1st Apr.

* Modify from 陽性者数 to 入院患者数の状況 in ConfiermedCasesCard/Table.

* Update main_summary.json last_update.

* Add CircleChart 入院患者数と残り病床数

Co-authored-by: Yasushi ISHIZUKA <[email protected]>

components/CircleChart.vue

@@ -0,0 +1,277 @@
+<template>
+  <data-view :title="title" :title-id="titleId" :date="date" :url="url">
+    <template v-slot:button>
+      <ul :class="$style.GraphDesc">
+        <i18n tag="li" path="（注）病床数は{data}の第一・二種感染症病床の合計">
+          <a
+            :class="$style.GraphLink"
+            href="https://www.mhlw.go.jp/bunya/kenkou/kekkaku-kansenshou15/02-02.html"
+            target="_blank"
+            rel="noopener"
+            place="data"
+          >
+            {{ $t('感染症指定医療機関') }}
+          </a>
+        </i18n>
+      </ul>
+    </template>
+    <pie-chart
+      :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"
+      :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 { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
+import { GraphDataType } from '@/utils/formatVariableGraph'
+import DataView from '@/components/DataView.vue'
+import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
+import { doubleGray as colors } from '@/utils/colors'
+import OpenDataLink from '@/components/OpenDataLink.vue'
+
+interface HTMLElementEvent<T extends HTMLElement> extends Event {
+  currentTarget: T
+}
+type Data = {
+  dataKind: 'transition' | 'cumulative'
+  canvas: boolean
+}
+type Methods = {}
+type Computed = {
+  displayInfo: {
+    lText: string
+    sText: string
+    unit: string
+  }
+  displayData: {
+    labels: string[]
+    datasets: {
+      label: string[]
+      data: number[]
+      backgroundColor: string[]
+    }[]
+  }
+  displayOption: {
+    tooltips: {
+      displayColors: boolean
+      callbacks: {
+        label: (tooltipItem: any) => string
+        title: (tooltipItem: any, data: any) => string
+      }
+    }
+    responsive: boolean
+    maintainAspectRatio: boolean
+    legend: {
+      display: boolean
+      onHover: (e: HTMLElementEvent<HTMLElement>) => void
+      onLeave: (e: HTMLElementEvent<HTMLElement>) => void
+    }
+  }
+  tableHeaders: {
+    text: string
+    value: string
+  }[]
+  tableData: {
+    [key: number]: number
+  }[]
+}
+
+type Props = {
+  title: string
+  titleId: string
+  chartId: string
+  chartData: GraphDataType[]
+  date: string
+  unit: string
+  info: string
+  url: string
+}
+
+const options: ThisTypedComponentOptionsWithRecordProps<
+  Vue,
+  Data,
+  Methods,
+  Computed,
+  Props
+> = {
+  created() {
+    this.canvas = process.browser
+  },
+  components: { DataView, DataViewBasicInfoPanel, OpenDataLink },
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    titleId: {
+      type: String,
+      default: ''
+    },
+    chartId: {
+      type: String,
+      default: 'pie-chart'
+    },
+    chartData: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    date: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    unit: {
+      type: String,
+      default: ''
+    },
+    info: {
+      type: String,
+      default: ''
+    },
+    url: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  data: () => ({
+    dataKind: 'transition',
+    canvas: true
+  }),
+  computed: {
+    displayInfo() {
+      return {
+        lText: this.chartData[
+          this.chartData.length - 1
+        ].cumulative.toLocaleString(),
+        sText: this.info,
+        unit: this.unit
+      }
+    },
+    displayData() {
+      return {
+        labels: this.chartData.map(d => {
+          return d.label
+        }),
+        datasets: [
+          {
+            label: this.chartData.map(d => {
+              return d.label
+            }),
+            data: this.chartData.map(d => {
+              return d.transition
+            }),
+            backgroundColor: this.chartData.map((_d, index) => {
+              return colors[index]
+            }),
+            borderWidth: 0
+          }
+        ]
+      }
+    },
+    displayOption() {
+      const unit = this.unit
+      const chartData = this.chartData
+      const options = {
+        tooltips: {
+          displayColors: false,
+          callbacks: {
+            label(tooltipItem: any) {
+              /* return (
+                parseInt(
+                  chartData[tooltipItem.index].transition
+                ).toLocaleString() + unit
+              ) */
+              return `${chartData[tooltipItem.index].transition} ${
+                tooltipItem.index === 1 ? unit : '人'
+              } (総病床数: ${chartData[0].transition +
+                chartData[1].transition}${unit})`
+            },
+            title(tooltipItem: any, data: any) {
+              return data.labels[tooltipItem[0].index]
+            }
+          }
+        },
+        responsive: true,
+        maintainAspectRatio: false,
+        legend: {
+          display: true,
+          onHover: (e: HTMLElementEvent<HTMLElement>): void => {
+            e.currentTarget.style.cursor = 'pointer'
+          },
+          onLeave: (e: HTMLElementEvent<HTMLElement>): void => {
+            e.currentTarget.style.cursor = 'default'
+          }
+        }
+      }
+      if (this.$route.query.ogp === 'true') {
+        Object.assign(options, { animation: { duration: 0 } })
+      }
+      return options
+    },
+    tableHeaders() {
+      return [
+        { text: '', value: 'text' },
+        ...this.chartData.map((d, index) => {
+          return { text: d.label, value: String(index) }
+        })
+      ]
+    },
+    tableData() {
+      return this.chartData.map((_, i) => {
+        return Object.assign(
+          { text: this.chartData[i].label },
+          { [i]: this.chartData[i].transition }
+        )
+      })
+    }
+  }
+}
+
+export default Vue.extend(options)
+</script>
+
+<style module lang="scss">
+.Graph {
+  &Desc {
+    width: 100%;
+    margin: 0;
+    margin-bottom: 0 !important;
+    padding-left: 0 !important;
+    font-size: 12px;
+    color: $gray-3;
+    list-style: none;
+  }
+  &Link {
+    text-decoration: none;
+  }
+}
+</style>

components/cards/PatientsAndSickbeds.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-col cols="12" md="6" class="DataCard">
+    <circle-chart
+      :title="$t('入院患者数と残り病床数')"
+      :title-id="'patients-and-sickbeds'"
+      :chart-data="sickbedsGraph"
+      :date="sickbedsSummary.last_update"
+      :unit="$t('床')"
+      :info="$t('総病床数')"
+      :url="'http://www.pref.nara.jp/'"
+    />
+  </v-col>
+</template>
+
+<script>
+import sickbedsSummary from '@/data/sickbeds_summary.json'
+import CircleChart from '@/components/CircleChart.vue'
+import formatVariableGraph from '@/utils/formatVariableGraph'
+
+export default {
+  components: {
+    CircleChart
+  },
+  data() {
+    // 年代別陽性患者数
+    const sickbedsGraph = formatVariableGraph(sickbedsSummary.data)
+
+    const data = {
+      sickbedsSummary,
+      sickbedsGraph
+    }
+    return data
+  }
+}
+</script>

data/data.json

@@ -405,34 +405,5 @@
 			}
 		]
 	},
-    "main_summary": {
-        "date": "2020/04/01 19:00",
-        "attr": "陽性患者数",
-        "value": 16,
-        "children": [
-            {
-                "attr": "入院／入院調整中",
-                "value":3,
-                "children": [
-                    {
-                        "attr": "無症状",
-                        "value": 0
-                    },
-                    {
-                        "attr": "患者",
-                        "value": 3
-                    }
-                ]
-            },
-            {
-                "attr": "退院",
-                "value": 13
-            },
-            {
-                "attr": "死亡",
-                "value": 0
-            }
-        ]
-    },
     "lastUpdate": "2020/04/01 19:00"
 }

data/sickbeds_summary.json

@@ -0,0 +1,7 @@
+{
+    "data": {
+        "入院患者数": 7,
+        "残り病床数": 17
+    },
+    "last_update": "2020/04/01 00:00"
+}