Revert "Release 2020/06/01"

stop-covid19-kyoto · Jun 1, 2020 · b9cd3ca · b9cd3ca
1 parent 6e42e79
commit b9cd3ca
Show file tree

Hide file tree

Showing 25 changed files with 524 additions and 508 deletions.
diff --git a/assets/locales/zh_CN.json b/assets/locales/zh_CN.json
@@ -463,8 +463,5 @@
   "テレワーク・時差出勤などスムーズビズの取組は、新型コロナウイルス感染症の対策としても効果的です。感染症対策として、東京2020大会時の交通混雑緩和に向けた取組の前倒しをお願いします。": "远程工作、错峰上班等Smooth Biz措施，对于新冠肺炎疫情也能起到很好的控制效果。为了控制疫情扩散，望企业能提前施行2020东京奥运交通舒缓措施。",
   "（注）検査結果の判明日を基準とする": "（注）以出检查结果的日期为准。",
   "※（1）、（2）、（6）、（7）は、7日間移動平均で算出（たとえば、5月7日の移動平均値は、5月1日から5月7日までの実績値を平均したもの）。また、（1）の数字が10人以下となった場合は、（2）及び（3）は参考値とする": "※（1）、（2）、（6）、（7）是7天移动平均值（例如，5月7日的移动平均值是5月1日至5月7日数值的平均）。若（1）的数字低于10人，（2）和（3）的数值为参考值",
-  "検査実施人数（健康安全研究センターによる実施分）": "检查人数（由“健康安全研究中心”实施）",
-  "※（4）（5）の目安となる数値は、患者数に応じた病床の確保数を参考として記載している。": "※（4）（5）的关注数值是对应的病床数目。",
-  "（5）入院患者数 レベル1：1,000床 → レベル2：3,000床 → レベル3：4,000床": "（5）住院患者数 1级：1,000床 → 2级：3,000床 → 3级：4,000床",
-  "（4）重症患者数 レベル1：100床 → レベル2：300床 → レベル3：700床": "（4）重症患者数 1级：100床 → 2级：300床 → 3级：700床"
+  "検査実施人数（健康安全研究センターによる実施分）": "检查人数（由“健康安全研究中心”实施）"
 }
diff --git a/components/AgencyBarChart.vue b/components/AgencyBarChart.vue
@@ -15,7 +15,29 @@
       :height="240"
     />
     <template v-slot:dataTable>
-      <data-view-table :headers="tableHeaders" :items="tableData" />
+      <v-data-table
+        :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:body="{ items }">
+          <tbody>
+            <tr v-for="item in items" :key="item.text">
+              <th scope="row">{{ item.text }}</th>
+              <td class="text-end">{{ item[0] }}</td>
+              <td class="text-end">{{ item[1] }}</td>
+              <td class="text-end">{{ item[2] }}</td>
+            </tr>
+          </tbody>
+        </template>
+      </v-data-table>
     </template>
   </data-view>
 </template>
@@ -25,12 +47,8 @@ import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 import { ChartOptions } from 'chart.js'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
-import AgencyData from '@/data/agency.json'
+import agencyData from '@/data/agency.json'
 import DataView from '@/components/DataView.vue'
-import DataViewTable, {
-  TableHeader,
-  TableItem
-} from '@/components/DataViewTable.vue'
 import { getGraphSeriesStyle } from '@/utils/colors'
 import { DisplayData, DataSets } from '@/plugins/vue-chart'
 
@@ -46,21 +64,26 @@ interface HTMLElementEvent<T extends HTMLElement> extends MouseEvent {
 }
 type Data = {
   canvas: boolean
+  chartData: typeof agencyData
+  date: string
   agencies: VueI18n.TranslateResult[]
 }
 type Methods = {}
 type Computed = {
   displayData: AgencyDisplayData
   displayOption: ChartOptions
-  tableHeaders: TableHeader[]
-  tableData: TableItem[]
+  tableHeaders: {
+    text: VueI18n.TranslateResult
+    value: string
+  }[]
+  tableData: {
+    [key: number]: number
+  }[]
 }
 type Props = {
   title: string
   titleId: string
   chartId: string
-  chartData: typeof AgencyData
-  date: string
   unit: string
 }
 
@@ -74,7 +97,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
   created() {
     this.canvas = process.browser
   },
-  components: { DataView, DataViewTable },
+  components: { DataView },
   props: {
     title: {
       type: String,
@@ -91,11 +114,6 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       required: false,
       default: 'agency-bar-chart'
     },
-    chartData: Object,
-    date: {
-      type: String,
-      default: ''
-    },
     unit: {
       type: String,
       required: false,
@@ -111,6 +129,8 @@ const options: ThisTypedComponentOptionsWithRecordProps<
 
     return {
       canvas: true,
+      chartData: agencyData,
+      date: agencyData.date,
       agencies
     }
   },

diff --git a/components/ConfirmedCasesByMunicipalitiesTable.vue b/components/ConfirmedCasesByMunicipalitiesTable.vue
@@ -13,7 +13,7 @@
       :fixed-header="true"
       :mobile-breakpoint="0"
       :disable-sort="true"
-      class="cardTable"
+      class="cardTableMunicipalities"
     />
     <template v-slot:infoPanel>
       <data-view-basic-info-panel
@@ -25,6 +25,47 @@
   </data-view>
 </template>
 
+<style lang="scss">
+.cardTableMunicipalities {
+  &.v-data-table {
+    box-shadow: 0 -20px 12px -12px #0003 inset;
+    th {
+      padding: 8px 10px;
+      height: auto;
+      border-bottom: 1px solid $gray-4;
+      color: $gray-2;
+      @include font-size(12);
+    }
+
+    tbody {
+      tr {
+        color: $gray-1;
+
+        th {
+          font-weight: normal;
+        }
+
+        td {
+          padding: 8px 10px;
+          height: auto;
+          @include font-size(12);
+        }
+
+        &:nth-child(odd) {
+          th,
+          td {
+            background: rgba($gray-4, 0.3);
+          }
+        }
+      }
+    }
+    &:focus {
+      outline: dotted $gray-3 1px;
+    }
+  }
+}
+</style>
+
 <script lang="ts">
 import Vue from 'vue'
 import DataView from '@/components/DataView.vue'

diff --git a/components/ConfirmedCasesIncreaseRatioByWeekChart.vue b/components/ConfirmedCasesIncreaseRatioByWeekChart.vue
@@ -75,7 +75,27 @@
       <slot name="additionalDescription" />
     </template>
     <template v-slot:dataTable>
-      <data-view-table :headers="tableHeaders" :items="tableData" />
+      <v-data-table
+        :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:body="{ items }">
+          <tbody>
+            <tr v-for="item in items" :key="item.text">
+              <th scope="row">{{ item.text }}</th>
+              <td class="text-end">{{ item.transition }}</td>
+            </tr>
+          </tbody>
+        </template>
+      </v-data-table>
     </template>
     <template v-slot:infoPanel>
       <data-view-basic-info-panel
@@ -98,10 +118,6 @@ import { Chart } from 'chart.js'
 import dayjs from 'dayjs'
 import { GraphDataType } from '@/utils/formatGraph'
 import DataView from '@/components/DataView.vue'
-import DataViewTable, {
-  TableHeader,
-  TableItem
-} from '@/components/DataViewTable.vue'
 import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
 import OpenDataLink from '@/components/OpenDataLink.vue'
 import { DisplayData, yAxesBgPlugin, scrollPlugin } from '@/plugins/vue-chart'
@@ -133,8 +149,14 @@ type Computed = {
   displayDataHeader: DisplayData
   displayOptionHeader: Chart.ChartOptions
   scaledTicksYAxisMax: number
-  tableHeaders: TableHeader[]
-  tableData: TableItem[]
+  tableHeaders: {
+    text: TranslateResult
+    value: string
+  }[]
+  tableData: {
+    text: string
+    transition: string
+  }[]
 }
 type Props = {
   title: string
@@ -161,12 +183,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
   created() {
     this.canvas = process.browser
   },
-  components: {
-    DataView,
-    DataViewTable,
-    DataViewBasicInfoPanel,
-    OpenDataLink
-  },
+  components: { DataView, DataViewBasicInfoPanel, OpenDataLink },
   props: {
     title: {
       type: String,

diff --git a/components/DashedRectangleTimeBarChart.vue b/components/DashedRectangleTimeBarChart.vue
@@ -35,7 +35,27 @@
       <slot name="additionalDescription" />
     </template>
     <template v-slot:dataTable>
-      <data-view-table :headers="tableHeaders" :items="tableData" />
+      <v-data-table
+        :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:body="{ items }">
+          <tbody>
+            <tr v-for="item in items" :key="item.text">
+              <th scope="row">{{ item.text }}</th>
+              <td class="text-end">{{ item.transition }}</td>
+            </tr>
+          </tbody>
+        </template>
+      </v-data-table>
     </template>
     <template v-slot:infoPanel>
       <data-view-basic-info-panel
@@ -58,10 +78,7 @@ import { Chart } from 'chart.js'
 import dayjs from 'dayjs'
 import { GraphDataType } from '@/utils/formatGraph'
 import DataView from '@/components/DataView.vue'
-import DataViewTable, {
-  TableHeader,
-  TableItem
-} from '@/components/DataViewTable.vue'
+import DataSelector from '@/components/DataSelector.vue'
 import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
 import OpenDataLink from '@/components/OpenDataLink.vue'
 import {
@@ -102,8 +119,14 @@ type Computed = {
   displayDataHeader: DisplayData
   displayOptionHeader: Chart.ChartOptions
   scaledTicksYAxisMax: number
-  tableHeaders: TableHeader[]
-  tableData: TableItem[]
+  tableHeaders: {
+    text: TranslateResult
+    value: string
+  }[]
+  tableData: {
+    text: string
+    transition: string
+  }[]
 }
 
 type Props = {
@@ -131,12 +154,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
   created() {
     this.canvas = process.browser
   },
-  components: {
-    DataView,
-    DataViewTable,
-    DataViewBasicInfoPanel,
-    OpenDataLink
-  },
+  components: { DataView, DataSelector, DataViewBasicInfoPanel, OpenDataLink },
   props: {
     title: {
       type: String,

diff --git a/components/DataView.vue b/components/DataView.vue
@@ -27,12 +27,9 @@
         <slot name="additionalDescription" />
       </div>
 
-      <data-view-expantion-panel
-        v-if="this.$slots.dataTable"
-        class="DataView-ExpantionPanel"
-      >
+      <data-view-table v-if="this.$slots.dataTable" class="DataView-Table">
         <slot name="dataTable" />
-      </data-view-expantion-panel>
+      </data-view-table>
 
       <div class="DataView-Space" />
 
@@ -42,7 +39,7 @@
           <div>
             <a class="Permalink" :href="permalink">
               <time :datetime="formattedDate">
-                {{ $t('{date} 更新', { date: formattedDateForDisplay }) }}
+                {{ $t('{date} 更新', { date }) }}
               </time>
             </a>
           </div>
@@ -63,11 +60,11 @@
 import Vue from 'vue'
 import { MetaInfo } from 'vue-meta'
 import { convertDatetimeToISO8601Format } from '@/utils/formatDate'
-import DataViewExpantionPanel from '@/components/DataViewExpantionPanel.vue'
+import DataViewTable from '@/components/DataViewTable.vue'
 import DataViewShare from '@/components/DataViewShare.vue'
 
 export default Vue.extend({
-  components: { DataViewExpantionPanel, DataViewShare },
+  components: { DataViewTable, DataViewShare },
   props: {
     title: {
       type: String,
@@ -86,9 +83,6 @@ export default Vue.extend({
     formattedDate(): string {
       return convertDatetimeToISO8601Format(this.date)
     },
-    formattedDateForDisplay(): string {
-      return this.$d(new Date(this.date), 'dateTime')
-    },
     permalink(): string {
       const permalink = '/cards/' + this.titleId
       return this.localePath(permalink)
@@ -179,28 +173,9 @@ export default Vue.extend({
     &--Additional {
       margin-bottom: 10px;
     }
-
-    ul,
-    ol {
-      list-style-type: none;
-      padding: 0;
-    }
-  }
-
-  &-Details {
-    margin: 10px 0;
-
-    .v-data-table {
-      .text-end {
-        text-align: right;
-      }
-      .text-nowrap {
-        white-space: nowrap;
-      }
-    }
   }
 
-  &-ExpantionPanel {
+  &-Table {
     margin-bottom: 10px;
   }