Skip to content

Commit b011e40

Browse files
mugetsumugetsu
committed
Added reference, Last updated
1 parent 4759992 commit b011e40

File tree

5 files changed

+75
-53
lines changed

5 files changed

+75
-53
lines changed

‎components/Overview/index.vue‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<template>
22
<div class="overview">
33
<div class="title">
4-
{{ result.title }}
4+
<h2>
5+
{{ result.title }}
6+
<span class="last-update">Last update {{ result.last_updated }} ago</span>
7+
</h2>
58
<a class="close" href="#" @click.prevent="onClose">
69
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
710
<g opacity="0.3">
@@ -149,11 +152,23 @@ export default {
149152
position: sticky;
150153
top: 0;
151154
z-index: 10;
152-
border-bottom: 1px solid #ccc;
153-
margin-bottom: 12px;
154-
padding: 32px 0 8px;
155-
font-size: 32px;
156155
background: white;
156+
157+
h2 {
158+
border-bottom: 1px solid #cccccc;
159+
margin: 0 0 12px;
160+
padding: 32px 26px 8px 0;
161+
font-size: 32px;
162+
}
163+
164+
.last-update {
165+
display: block;
166+
padding-top: 4px;
167+
font-size: 12px;
168+
font-weight: 300;
169+
text-transform: uppercase;
170+
color: #666666;
171+
}
157172
}
158173
159174
.section {

‎nuxt.config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ module.exports = {
3333
{ rel: 'preconnect dns-prefetch', href: 'https://www.google-analytics.com', crossorigin: 'anonymous' },
3434
{ rel: 'preconnect dns-prefetch', href: 'https://ajax.googleapis.com', crossorigin: 'anonymous' },
3535
{ rel: 'preconnect dns-prefetch', href: 'https://fonts.gstatic.com', crossorigin: 'anonymous' },
36+
{ rel: 'preconnect dns-prefetch', href: 'https://fonts.googleapis.com', crossorigin: 'anonymous' },
37+
{ rel: 'preconnect dns-prefetch', href: 'https://cdn.jsdelivr.net', crossorigin: 'anonymous' },
3638
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
3739
]
3840
},

‎pages/index.vue‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<template>
22
<div class="page" :class="{ 'is-open': isOpen }">
33
<LazyHydrate ssr-only :trigger-hydration="!!latest">
4-
<Latest :data="latest" size="large" />
4+
<div>
5+
<Latest :data="latest" size="large" />
6+
<p class="reference">Data from <a href="https://github.com/CSSEGISandData/COVID-19">JHU CSSE</a></p>
7+
</div>
58
</LazyHydrate>
69
<LazyHydrate when-idle>
710
<Search @search="onToggle" />
@@ -91,6 +94,29 @@ export default {
9194
}
9295
}
9396
97+
.reference {
98+
position: absolute;
99+
right: 24px;
100+
top: 24px;
101+
z-index: 1;
102+
max-width: 75px;
103+
color: #ffffff;
104+
font-size: 10px;
105+
text-align: right;
106+
text-transform: uppercase;
107+
line-height: 14px;
108+
109+
a {
110+
display: block;
111+
border: 1px solid #ffffff;
112+
border-radius: 4px;
113+
margin-top: 2px;
114+
padding: 2px;
115+
color: #ffffff;
116+
text-decoration: none;
117+
}
118+
}
119+
94120
.map-wrapper {
95121
position: relative;
96122
z-index: 0;

‎store/actions.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default {
1717
async getOverviewByCountry({ commit }, id) {
1818
await this.$axios
1919
.get(
20-
process.env.NODE_ENV !== 'production' ? 'location-14.json' : `/locations/${id}`
20+
process.env.NODE_ENV !== 'production' ? 'location-16.json' : `/locations/${id}`
2121
)
2222
.then(res => {
2323
if (res.status === 200) {

‎store/mutations.js‎

Lines changed: 25 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -33,59 +33,37 @@ export default {
3333
}
3434
})
3535
state.data = dataCollection
36-
// const timeSince = (date) => {
37-
// let seconds = Math.floor((new Date() - date) / 1000)
38-
// let interval = Math.floor(seconds / 31536000)
39-
// if (interval > 1) {
40-
// return interval + ' years'
41-
// }
42-
// interval = Math.floor(seconds / 2592000)
43-
// if (interval > 1) {
44-
// return interval + ' months'
45-
// }
46-
// interval = Math.floor(seconds / 86400)
47-
// if (interval > 1) {
48-
// return interval + ' days'
49-
// }
50-
// interval = Math.floor(seconds / 3600)
51-
// if (interval > 1) {
52-
// return interval + ' hours'
53-
// }
54-
// interval = Math.floor(seconds / 60)
55-
// if (interval > 1) {
56-
// return interval + ' minutes'
57-
// }
58-
// return Math.floor(seconds) + ' seconds'
59-
// }
60-
// const lastUpdate = (history) => {
61-
// const last = new Date(
62-
// Math.max.apply(
63-
// null,
64-
// Object.keys(history).map((d) => {
65-
// return new Date(d)
66-
// })
67-
// )
68-
// )
69-
// return timeSince(last) + ' ago'
70-
// }
71-
// const sortDate = dates => {
72-
// const sorted_date = {}
73-
// Object.keys(dates)
74-
// .sort((a, b) => {
75-
// return new Date(a) - new Date(b)
76-
// })
77-
// .forEach(key => {
78-
// sorted_date[key] = dates[key]
79-
// })
80-
// return sorted_date
81-
// }
8236
},
8337
SET_LATEST: (state, latest) => {
8438
state.latest = latest
8539
},
8640
SET_RESULT: (state, result) => {
8741
const latest = result.latest
8842
const title = result.province ? `${result.province}, ${result.country}` : result.country
43+
const timeSince = (date) => {
44+
let seconds = Math.floor((new Date() - new Date(date)) / 1000)
45+
let interval = Math.floor(seconds / 31536000)
46+
if (interval > 1) {
47+
return interval + ' years'
48+
}
49+
interval = Math.floor(seconds / 2592000)
50+
if (interval > 1) {
51+
return interval + ' months'
52+
}
53+
interval = Math.floor(seconds / 86400)
54+
if (interval > 1) {
55+
return interval + ' days'
56+
}
57+
interval = Math.floor(seconds / 3600)
58+
if (interval > 1) {
59+
return interval + ' hours'
60+
}
61+
interval = Math.floor(seconds / 60)
62+
if (interval > 1) {
63+
return interval + ' minutes'
64+
}
65+
return Math.floor(seconds) + ' seconds'
66+
}
8967
const series = _ => {
9068
const timelineConfirmed = Object.entries(result.timelines.confirmed.timeline).map(o => o)
9169
const timelineDeaths = Object.entries(result.timelines.deaths.timeline).map(o => o)
@@ -161,6 +139,7 @@ export default {
161139
state.result = {
162140
title: title,
163141
latest: latest,
142+
last_updated: timeSince(result.last_updated),
164143
series: series(),
165144
timeline: timeline(),
166145
mortality_rate: mortality_rate.toFixed(2),

0 commit comments

Comments
 (0)