Skip to content

Commit 71e5909

Browse files
mugetsumugetsu
committed
Move result data mutation to server side
1 parent c127968 commit 71e5909

File tree

2 files changed

+84
-91
lines changed

2 files changed

+84
-91
lines changed

‎components/Overview/index.vue‎

Lines changed: 8 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="overview">
33
<div class="title">
4-
{{ title }}
4+
{{ result.title }}
55
<a class="close" href="#" @click.prevent="onClose">
66
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
77
<g opacity="0.3">
@@ -14,20 +14,20 @@
1414
<div class="content">
1515
<div class="section cases">
1616
<p>Known Cases</p>
17-
<Latest :data="latest" :invert="true" />
17+
<Latest :data="result.latest" :invert="true" />
1818
</div>
1919
<div class="section chart">
2020
<p>Timeline</p>
2121
<p class="sub">Click or Drag chart to view daily cases</p>
2222
<client-only>
23-
<apexchart height="320" type="line" :options="chartOptions" :series="series"></apexchart>
23+
<apexchart height="320" type="line" :options="chartOptions" :series="result.series"></apexchart>
2424
</client-only>
2525
</div>
2626
<div class="section timeline">
2727
<p>Daily</p>
2828
<ul>
2929
<li
30-
v-for="(item, index) in timeline"
30+
v-for="(item, index) in result.timeline"
3131
:key="index">
3232
<span class="timestamp">{{ item.timestamp.month }} {{ item.timestamp.date }}, {{ item.timestamp.year }}</span>
3333
<span class="summary" v-html="item.summary" />
@@ -51,13 +51,6 @@ export default {
5151
...mapGetters([
5252
'result'
5353
]),
54-
title() {
55-
const o = this.result
56-
return o.province ? `${o.province}, ${o.country}` : o.country
57-
},
58-
latest() {
59-
return this.result.latest
60-
},
6154
chartOptions() {
6255
return {
6356
chart: {
@@ -72,14 +65,14 @@ export default {
7265
dataLabels: {
7366
enabled: false
7467
},
75-
colors: ["#ffa500", "#b20000", "#66a266"],
68+
colors: ['#ffa500', '#b20000', '#66a266'],
7669
stroke: {
7770
width: [4, 4, 4]
7871
},
7972
xaxis: {
80-
type: "datetime",
73+
type: 'datetime',
8174
labels: {
82-
format: "dd MMM"
75+
format: 'dd MMM'
8376
}
8477
},
8578
yaxis: {
@@ -91,60 +84,9 @@ export default {
9184
},
9285
legend: {
9386
show: false,
94-
horizontalAlign: "left"
87+
horizontalAlign: 'left'
9588
}
9689
}
97-
},
98-
series() {
99-
const timelineConfirmed = Object.entries(this.result.timelines.confirmed.timeline).map(o => o)
100-
const timelineDeaths = Object.entries(this.result.timelines.deaths.timeline).map(o => o)
101-
const timelineRecovered = Object.entries(this.result.timelines.recovered.timeline).map(o => o)
102-
return [
103-
{
104-
name: "Confirmed",
105-
data: timelineConfirmed
106-
},
107-
{
108-
name: "Deaths",
109-
data: timelineDeaths
110-
},
111-
{
112-
name: "Recovered",
113-
data: timelineRecovered
114-
}
115-
]
116-
},
117-
timeline() {
118-
const isPlural = (name, total, s) => {
119-
return `<span class="${name}">${total}</span> ${s}${(total > 1) ? 's' : ''}`
120-
}
121-
const isContinue = (a, b) => {
122-
return a && b ? ', ' : a && !b ? ' and ' : ''
123-
}
124-
const perDayConfirmed = this.getPerDay(Object.entries(this.result.timelines.confirmed.timeline))
125-
const perDayDeaths = this.getPerDay(Object.entries(this.result.timelines.deaths.timeline))
126-
const perDayRecovered = this.getPerDay(Object.entries(this.result.timelines.recovered.timeline))
127-
const perDayCases = Object.entries(perDayConfirmed).map((o, index) => {
128-
let summary = ''
129-
if (o[1] || perDayDeaths[o[0]] || perDayRecovered[o[0]]) {
130-
if (o[1]) {
131-
summary += `${isPlural('confirmed', o[1], 'confirmed case')}`
132-
}
133-
if (perDayDeaths[o[0]]) {
134-
summary += isContinue(o[1], perDayRecovered[o[0]])
135-
summary += `${isPlural('deaths', perDayDeaths[o[0]], 'death')}`
136-
}
137-
if (perDayRecovered[o[0]]) {
138-
summary += isContinue(o[1], perDayDeaths[o[0]])
139-
summary += `<span class="recovered">${perDayRecovered[o[0]]}</span> recovered`
140-
}
141-
}
142-
return {
143-
timestamp: this.formatDate(o[0]),
144-
summary: summary + '.'
145-
}
146-
})
147-
return perDayCases.filter(o => o.summary !== '.')
14890
}
14991
},
15092
data() {
@@ -153,29 +95,6 @@ export default {
15395
methods: {
15496
onClose() {
15597
this.$emit('close')
156-
},
157-
formatDate(val) {
158-
const d = new Date(val)
159-
const dtf = new Intl.DateTimeFormat('en', {
160-
year: 'numeric',
161-
month: 'short',
162-
day: '2-digit'
163-
})
164-
const [{ value: mo }, , { value: da }, , { value: ye }] = dtf.formatToParts(d)
165-
return {
166-
month: mo,
167-
date: da,
168-
year: ye
169-
}
170-
},
171-
getPerDay(data) {
172-
let temp = 0
173-
const trueTimeline = {}
174-
data.forEach(a => {
175-
trueTimeline[a[0]] = a[1] > temp ? a[1] - temp : 0
176-
temp = a[1]
177-
})
178-
return trueTimeline
17998
}
18099
}
181100
}
@@ -300,7 +219,6 @@ export default {
300219
padding-right: 16px;
301220
font-weight: 700;
302221
color: #585858;
303-
text-transform: uppercase;
304222
min-width: 100px;
305223
}
306224

‎store/mutations.js‎

Lines changed: 76 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,82 @@ export default {
8484
state.latest = latest
8585
},
8686
SET_RESULT: (state, result) => {
87-
state.result = result
87+
const title = result.province ? `${result.province}, ${result.country}` : result.country
88+
const series = _ => {
89+
const timelineConfirmed = Object.entries(result.timelines.confirmed.timeline).map(o => o)
90+
const timelineDeaths = Object.entries(result.timelines.deaths.timeline).map(o => o)
91+
const timelineRecovered = Object.entries(result.timelines.recovered.timeline).map(o => o)
92+
return [
93+
{
94+
name: 'Confirmed',
95+
data: timelineConfirmed
96+
},
97+
{
98+
name: 'Deaths',
99+
data: timelineDeaths
100+
},
101+
{
102+
name: 'Recovered',
103+
data: timelineRecovered
104+
}
105+
]
106+
}
107+
const timeline = () => {
108+
const isPlural = (name, total, s) => `<span class="${name}">${total}</span> ${s}${(total > 1) ? 's' : ''}`
109+
const getPerDay = data => {
110+
let temp = 0
111+
const trueTimeline = {}
112+
data.forEach(a => {
113+
trueTimeline[a[0]] = a[1] > temp ? a[1] - temp : 0
114+
temp = a[1]
115+
})
116+
return trueTimeline
117+
}
118+
const formatDate = val => {
119+
const d = new Date(val)
120+
const dtf = new Intl.DateTimeFormat('en', {
121+
year: 'numeric',
122+
month: 'short',
123+
day: '2-digit'
124+
})
125+
const [{ value: mo }, , { value: da }, , { value: ye }] = dtf.formatToParts(d)
126+
return {
127+
month: mo,
128+
date: da,
129+
year: ye
130+
}
131+
}
132+
const perDayConfirmed = getPerDay(Object.entries(result.timelines.confirmed.timeline))
133+
const perDayDeaths = getPerDay(Object.entries(result.timelines.deaths.timeline))
134+
const perDayRecovered = getPerDay(Object.entries(result.timelines.recovered.timeline))
135+
const perDayCases = Object.entries(perDayConfirmed).map(o => {
136+
let summary = ''
137+
if (o[1] || perDayDeaths[o[0]] || perDayRecovered[o[0]]) {
138+
if (o[1]) {
139+
summary += `${isPlural('confirmed', o[1], 'confirmed case')}`
140+
}
141+
if (perDayDeaths[o[0]]) {
142+
summary += o[1] && perDayRecovered[o[0]] ? ', ' : o[1] ? ' and ' : ''
143+
summary += `${isPlural('deaths', perDayDeaths[o[0]], 'death')}`
144+
}
145+
if (perDayRecovered[o[0]]) {
146+
summary += o[1] || perDayDeaths[o[0]] ? ' and ' : ''
147+
summary += `<span class="recovered">${perDayRecovered[o[0]]}</span> recovered`
148+
}
149+
}
150+
return {
151+
timestamp: formatDate(o[0]),
152+
summary: summary + '.'
153+
}
154+
})
155+
return perDayCases.filter(o => o.summary !== '.')
156+
}
157+
state.result = {
158+
title: title,
159+
latest: result.latest,
160+
series: series(),
161+
timeline: timeline()
162+
}
88163
},
89164
SET_COUNTRIES: (state, data) => {
90165
const groupProvinceByCountry = (array, key) => {

0 commit comments

Comments
 (0)