#' @import shiny
app_ui <- function() {
version <- paste0("v", packageVersion("coronavirus"))
tagList(
# Leave this function for adding external resources
golem_add_external_resources(),
# List the first level UI elements here
f7Page(
title = "Coronavirus",
dark_mode = TRUE,
init = f7Init(
skin = "md",
theme = "dark"
),
f7TabLayout(
navbar = f7Navbar(
title = "Coronavirus Tracker",
hairline = FALSE,
shadow = TRUE,
left_panel = TRUE,
right_panel = FALSE
),
panels = tagList(
f7Panel(
title = "About",
side = "left",
theme = "dark",
effect = "cover",
p("Tracks data on Novel Coronavirus 2019 using data from John Hopkins, Weixin (WeChat), and DingXiangYuan (DXY). The Database is refreshed every hour, the code is open-source so you can deploy it yourself, see below."),
f7Link(label = "Author", src = "https://john-coene.com", external = TRUE),
f7Link(label = "John Hopkins Data", src = "https://github.com/CSSEGISandData/2019-nCoV", external = TRUE),
f7Link(label = "Weixin Data", src = "https://github.com/GuangchuangYu/nCov2019", external = TRUE),
f7Link(label = "DXY Data", src = "https://ncov.dxy.cn/ncovh5/view/pneumonia", external = TRUE),
f7Link(label = "API", src = "http://shiny.john-coene.com:8080/__swagger__/", external = TRUE),
f7Link(label = "Code", src = "https://github.com/JohnCoene/coronavirus", external = TRUE),
f7Link(label = "Docs", src = "https://coronavirus.john-coene.com", external = TRUE),
tags$pre(tags$code(version))
)
),
f7Tabs(
animated = TRUE,
id = 'tabs',
f7Tab(
tabName = "Home",
icon = f7Icon("info_circle", old = FALSE),
active = TRUE,
swipeable = TRUE,
waiter::waiter_show_on_load(loader, color = "#000"),
h2("John Hopkins Data", class = "center"),
p(tags$small("Data on China and the rest of the World."), class = "center"),
f7Row(
f7Col(
mod_count_ui("count_ui_1", "Confirmed"),
),
f7Col(
mod_count_ui("count_ui_2", "Deaths")
)
),
h2("Weixin Data", class = "center"),
p(tags$small("Data on China."), class = "center"),
f7Row(
f7Col(
mod_count_weixin_ui("count_weixin_ui_1", "Confirmed")
),
f7Col(
mod_count_weixin_ui("count_weixin_ui_4", "Suspected")
),
f7Col(
mod_count_weixin_ui("count_weixin_ui_2", "Deaths")
),
f7Col(
mod_count_weixin_ui("count_weixin_ui_3", "Recovered")
)
),
h2("DXY Data", class = "center"),
p(tags$small("Data on China."), class = "center"),
f7Row(
f7Col(mod_count_weixin_ui("count_dxy_ui_1", "Confirmed")),
f7Col(mod_count_weixin_ui("count_dxy_ui_3", "Deaths")),
f7Col(mod_count_weixin_ui("count_dxy_ui_4", "Recovered"))
)
),
f7Tab(
tabName = "John Hopkins",
icon = f7Icon("waveform_path", old = FALSE),
active = FALSE,
swipeable = TRUE,
h2("John Hopkins Data", class = "center"),
p(tags$small("Data on China and the rest of the world."), class = "center"),
f7Row(
f7Col(
mod_count_ui("count_ui_1_jhu", "Confirmed"),
),
f7Col(
mod_count_ui("count_ui_2_jhu", "Deaths")
),
),
mod_new_cases_ui("new_cases"),
mod_time_provinces_ui("time_provinces_1"),
f7Row(
mod_china_ui("table_china", "China"),
mod_table_world_ui("table_world", "World")
),
mod_world_ui("world_ui_1"),
),
f7Tab(
tabName = "Weixin",
icon = f7Icon("waveform", old = FALSE),
swipeable = TRUE,
active = FALSE,
h2("Weixin Data", class = "center"),
p(tags$small("Data on China."), class = "center"),
f7Row(
f7Col(
mod_count_weixin_ui("count_weixin_ui_1_wx", "Confirmed")
),
f7Col(
mod_count_weixin_ui("count_weixin_ui_4_wx", "Suspected")
),
f7Col(
mod_count_weixin_ui("count_weixin_ui_2_wx", "Deaths")
),
f7Col(
mod_count_weixin_ui("count_weixin_ui_3_wx", "Recovered")
)
),
f7Row(
f7Col(mod_china_trend_ui("china_trend_ui_confirm", "Confirmed")),
f7Col(mod_china_trend_ui("china_trend_ui_suspect", "Suspected"))
),
f7Row(
f7Col(mod_china_trend_ui("china_trend_ui_dead", "Deaths")),
f7Col(mod_china_trend_ui("china_trend_ui_heal", "Recovered"))
),
f7Block(
f7BlockHeader("Data Integrity"),
p(
"There is a great discrepancy between total figures for China and",
"daily numbers reported."
)
)
),
f7Tab(
tabName = "DXY",
icon = f7Icon("graph_circle", old = FALSE),
swipeable = TRUE,
active = FALSE,
h2("DXY Data", class = "center"),
p(tags$small("Data on China."), class = "center"),
waiter::waiter_hide_on_render("count_ui_1-cnt"),
f7Row(
f7Col(mod_count_weixin_ui("count_dxy_ui_1_dxy", "Confirmed")),
f7Col(mod_count_weixin_ui("count_dxy_ui_3_dxy", "Deaths")),
f7Col(mod_count_weixin_ui("count_dxy_ui_4_dxy", "Recovered"))
),
mod_city_map_ui("city_map_1"),
mod_dxy_table_ui("dxy_table_ui_1")
),
f7Tab(
tabName = "News",
icon = f7Icon("quote_bubble", old = FALSE),
swipeable = TRUE,
active = FALSE,
mod_news_ui("news")
)
)
)
)
)
}
#' @import shiny
golem_add_external_resources <- function(){
addResourcePath(
'www', system.file('app/www', package = 'coronavirus')
)
tags$head(
golem::activate_js(),
golem::favicon(),
waiter::use_waiter(include_js = FALSE),
tags$link(rel="stylesheet", type="text/css", href="www/style.css"),
tags$script(src="www/copy.js"),
sever::use_sever(),
shinyscroll::use_shinyscroll(),
HTML(
"
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-74544116-1'></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-74544116-1');
</script>"
),
tags$meta(property="og:title", content="Coronavirus Tracker"),
tags$meta(property="og:type", content="article"),
tags$meta(property="og:url", content="https://shiny.john-coene.com/coronavirus"),
tags$meta(property="og:image", content="https://shiny.john-coene.com/coronavirus/www/coronavirus.png"),
tags$meta(property="og:description", content="A Coronavirus tracker app using John Hopkins and Weixin Data"),
tags$meta(name="twitter:card", content="summary_large_image"),
tags$meta(name="twitter:site", content="@jdatap"),
tags$meta(name="twitter:title", content="Coronavirus Tracker"),
tags$meta(name="twitter:description", content="A Coronavirus tracker app using John Hopkins and Weixin Data"),
tags$meta(name="twitter:image:src", content="https://shiny.john-coene.com/coronavirus/www/coronavirus.png"),
shiny::tags$link(rel = "apple-touch-icon", href = "www/icons/apple-touch-icon.png"),
# pwa materials (this is not a permanent fix). shinyMobile will
# handle this better soon!
tags$link(rel = "manifest", href = "www/manifest.json"),
tags$meta(name="theme-color", content="#000000")
# Launch screen for IOS
# Below is just an example in case you would like to try
# This is done by default for Android but not iOS :(
# Also you would have to handle as many devices as possible ...
# shiny::tags$link(href = "www/splashscreens/iphone5_splash.png", media = "(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)", rel = "apple-touch-startup-image")
)
}
loader <- tagList(
waiter::spin_loaders(42),
br(),
h3("Loading data")
)
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.