dockerfile added

.Rbuildignore

@@ -6,3 +6,4 @@ dev_history.R
 $run_dev.*
 ^LICENSE\.md$
 ^appveyor\.yml$
+^Dockerfile$

DESCRIPTION

@@ -7,17 +7,20 @@ License: MIT + file LICENSE
 Encoding: UTF-8
 LazyData: true
 Imports: 
-    fopi,
-    shiny,
-    golem,
-    dplyr,
-    dqshiny,
-    fullPage,
-    magrittr,
-    echarts4r,
-    shinythemes,
-    shinyWidgets
+  emo,
+  fopi,
+  shiny,
+  golem,
+  dplyr,
+  typed,
+  tidyr,
+  fullPage,
+  magrittr,
+  echarts4r,
+  shinythemes,
+  shinyWidgets
 RoxygenNote: 7.0.2
 Remotes:
   news-r/fopi,
+  JohnCoene/typed,
   RinteRface/fullPage

R/app_server.R

@@ -1,12 +1,16 @@
 #' @import shiny
 app_server <- function(input, output, session) {
-  utils::data("fopi", package = "fopi")
 
   echarts4r::e_common(
     font_family = "Playfair Display",
     theme = "vintage"
   )
 
+  output$title <- typed::renderTyped({
+    typed::typed(c("Freedom of Fake news^1000", "Freedom of Press Index^500<br>A Visualisation"), typeSpeed = 25, smartBackspace = TRUE)
+  })
+
   callModule(mod_ts_server, "ts")
+  callModule(mod_map_server, "map")
 
 }

R/app_ui.R

@@ -8,35 +8,48 @@ app_ui <- function() {
     golem_add_external_resources(),
     # List the first level UI elements here 
     pagePiling(
-      sections.color = c('#2f2f2f', '#2f2f2f', '#f9f7f1'),
+      sections.color = c('#2f2f2f', '#2f2f2f', '#f9f7f1', '#2f2f2f'),
       opts = options,
       menu = c(
         "Home" = "home",
         "Map" = "map",
-        "Time series" = "ts"
+        "Series" = "ts",
+        "About" = "about"
       ),
       pageSectionImage(
         center = TRUE,
-        img = "www/img/crowd.jpg",
+        img = "www/img/reading.jpg",
         menu = "home",
-        h1("Freedom of Press Index", class = "header shadow-dark"),
-        h3("Visualisation", class = "header shadow-dark"),
-        h4(
-          class = "shadow-light",
-          tags$a("The code", href = "https://github.com/news-r/fopi.app", target = "_blank", class = "link"),
-          "|",
-          tags$a("The API", href = "https://github.com/news-r/fopi", target = "_blank", class = "link")
+        h1(typed::typedOutput("title"), class = "header shadow-dark"),
+        h3(
+          class = "light footer",
+          "by", tags$a("news-r", href = "https://news-r.org", class = "link"), "with", emo::ji("coffee")
         )
       ),
       pageSection(
         center = TRUE,
         menu = "map",
-        h1("Map")
+        mod_map_ui("map")
       ),
       pageSection(
         center = TRUE,
         menu = "ts",
         mod_ts_ui("ts")
+      ),
+      pageSection(
+        center = TRUE,
+        menu = "about",
+        h1("About", class = "header shadow-dark"),
+        h2(
+          class = "shadow-light",
+          tags$a("The code", href = "https://github.com/news-r/fopi.app", target = "_blank", class = "link"),
+          "|",
+          tags$a("The API", href = "https://github.com/news-r/fopi", target = "_blank", class = "link")
+        ),
+        h3(
+          class = "light footer",
+          "by", tags$a("news-r", href = "https://news-r.org", class = "link"), "with", emo::ji("coffee")
+        )
       )
     )
   )

R/mod_map.R

@@ -0,0 +1,91 @@
+#' map UI Function
+#'
+#' @description A shiny Module.
+#'
+#' @param id,input,output,session Internal parameters for {shiny}.
+#'
+#' @noRd 
+#'
+#' @importFrom shiny NS tagList 
+mod_map_ui <- function(id){
+  ns <- NS(id)
+  pageContainer(
+    class = "light",
+    h2("Scores through time"),
+    shinyWidgets::radioGroupButtons(
+      inputId = ns("value"),
+      label = "Metric",
+      choices = c("rank", "score"),
+      checkIcon = list(
+        yes = icon("ok",
+        lib = "glyphicon")
+      )
+    ),
+    echarts4r::echarts4rOutput(ns("map"), height = "50vh"),
+    uiOutput(ns("desc"))
+  )
+}
+
+#' map Server Function
+#'
+#' @noRd 
+mod_map_server <- function(input, output, session){
+  ns <- session$ns
+
+  output$desc <- renderUI({
+    msg <- paste0(tools::toTitleCase(input$value), ", the lower (the darker) the better")
+
+    tags$i(msg)
+  })
+
+  output$map <- echarts4r::renderEcharts4r({
+    fopi %>% 
+      dplyr::mutate(
+        year = gsub("^20", "", year),
+        year = paste0("'", year)
+      ) %>% 
+      tidyr::drop_na(input$value) %>% 
+      echarts4r::e_country_names(country, country, type = "country.name") %>% 
+      dplyr::group_by(year) %>% 
+      echarts4r::e_charts(country, timeline = TRUE) %>% 
+      echarts4r::e_map_(input$value, name = "Index") %>% 
+      echarts4r::e_visual_map_(
+        input$value, 
+        top = "middle",
+        textStyle = list(color = "#fff"),
+        outOfRange = list(
+          color = "#2f2f2f"
+        ),
+        inRange = list(
+          color = c("#247BA0", "#70C1B3", "#B2DBBF")
+        )
+      ) %>% 
+      echarts4r::e_color(background = "rgba(0,0,0,0)") %>%  
+      echarts4r::e_tooltip() %>% 
+      echarts4r::e_timeline_opts(
+        playInterval = 600, 
+        currentIndex = 16,
+        symbolSize = 4, 
+        label = list(
+          color = "#f9f7f1"
+        ),
+        checkpointStyle = list(
+          color = "#f9f7f1"
+        ),
+        lineStyle = list(
+          color = "#f9f7f1"
+        ),
+        controlStyle = list(
+          color = "#f9f7f1",
+          borderColor = "#f9f7f1"
+        )
+      )
+  })
+}
+
+## To be copied in the UI
+# mod_map_ui("map")
+
+## To be copied in the server
+# callModule(mod_map_server, "map")
+

R/mod_ts.R

@@ -16,7 +16,7 @@
 mod_ts_ui <- function(id){
   ns <- NS(id)
   pageContainer(
-    uiOutput(ns("country_header")),
+    h2("Countries through time"),
     br(),
     fluidRow(
       column(
@@ -36,7 +36,7 @@ mod_ts_ui <- function(id){
         )
       )
     ),
-    echarts4r::echarts4rOutput(ns("trend"))
+    echarts4r::echarts4rOutput(ns("trend"), height="50vh")
   )
 }
 
@@ -55,18 +55,15 @@ mod_ts_server <- function(input, output, session){
       dplyr::distinct(country) %>% 
       dplyr::pull(country)
 
-    dqshiny::autocomplete_input(
+    selectizeInput(
       ns("country_select"),
       "Search a country",
-      options = cns,
-      value = sample(cns, 1)
+      choices = cns,
+      selected = sample(cns, 2),
+      multiple = TRUE
     )
   })
 
-  output$country_header <- renderUI({
-    h2(input$country_select)
-  })
-
   output$trend <- echarts4r::renderEcharts4r({
     req(input$country_select)
 
@@ -75,28 +72,16 @@ mod_ts_server <- function(input, output, session){
     fopi %>% 
       dplyr::mutate(year = as.character(year)) %>% 
       dplyr::arrange(year) %>% 
-      dplyr::filter(country == input$country_select) %>% 
-      echarts4r::e_charts(year, dispose = FALSE) %>% 
+      dplyr::filter(country %in% input$country_select) %>% 
+      dplyr::group_by(country) %>% 
+      echarts4r::e_charts(year) %>% 
       echarts4r::e_line_(input$value) %>% 
-      echarts4r::e_legend(FALSE) %>% 
       echarts4r::e_tooltip(trigger = "axis") %>% 
       echarts4r::e_y_axis(inverse = TRUE) %>% 
       echarts4r::e_axis_labels("Years") %>% 
-      echarts4r::e_title(msg)
-  })
-
-  output$desc <- renderUI({
-
-    if(input$value == "rank")
-      msg <- div(
-        "Rank is inverted, the lower the rank the better the country performs",
-        "on the index: the freeier the press in said country."
-      )
-    else 
-      msg <- div(
-        "The score on the index itself, the lower the better. In 2012, the score could be negative." 
+      echarts4r::e_title(msg) %>% 
+      echarts4r::e_color(
+        c("#247BA0", "#FF1654", "#70C1B3", "#2f2f2f", "#F3FFBD", "#B2DBBF")
       )
-
-    msg
   })
 }

R/run_app.R

@@ -8,6 +8,8 @@
 #' @importFrom shiny shinyApp
 #' @importFrom golem with_golem_options
 run_fopi <- function() {
+  utils::data("fopi", package = "fopi")
+
   with_golem_options(
     app = shinyApp(ui = app_ui, server = app_server), 
     golem_opts = list()

dev/02_dev.R

@@ -7,7 +7,7 @@
 
 ## 2.1 Add modules
 ## 
-golem::add_module( name = "ts" ) # Name of the module
+golem::add_module( name = "map" ) # Name of the module
 golem::add_module( name = "timeline" ) # Name of the module
 
 ## 2.2 Add dependencies

inst/Dockerfile

@@ -0,0 +1,23 @@
+FROM rocker/r-ver:3.6.0
+RUN apt-get update && apt-get install -y  git-core libcurl4-openssl-dev libssh2-1-dev libssl-dev libxml2-dev make zlib1g-dev && rm -rf /var/lib/apt/lists/*
+RUN echo "options(repos = c(CRAN = 'https://cran.rstudio.com/'), download.file.method = 'libcurl')" >> /usr/local/lib/R/etc/Rprofile.site
+RUN R -e 'install.packages("remotes")'
+RUN R -e 'remotes::install_github("r-lib/remotes", ref = "97bbf81")'
+RUN Rscript -e 'remotes::install_version("shiny",upgrade="never", version = "1.4.0")'
+RUN Rscript -e 'install.packages("golem",upgrade="never")'
+RUN Rscript -e 'remotes::install_version("dplyr",upgrade="never", version = "0.8.5")'
+RUN Rscript -e 'remotes::install_version("tidyr",upgrade="never", version = "1.0.2")'
+RUN Rscript -e 'remotes::install_version("magrittr",upgrade="never", version = "1.5")'
+RUN Rscript -e 'remotes::install_version("shinythemes",upgrade="never", version = "1.1.2")'
+RUN Rscript -e 'remotes::install_version("shinyWidgets",upgrade="never", version = "0.5.1")'
+RUN Rscript -e 'remotes::install_github("hadley/emo@3f03b11491ce3d6fc5601e210927eff73bf8e350")'
+RUN Rscript -e 'remotes::install_github("news-r/fopi@efce5c2c1361eb74f71251b58587d0963812a086")'
+RUN Rscript -e 'remotes::install_github("JohnCoene/typed@31e6d3be6a82486c891fbb615b83811cf698aa5a")'
+RUN Rscript -e 'remotes::install_github("RinteRface/fullPage@acc62332aeceaca5422643a2355790a1f2b942fa")'
+RUN Rscript -e 'remotes::install_github("JohnCoene/echarts4r@db1a1f30c50d4837540ce529c4d07f92079311d0")'
+RUN Rscript -e 'remotes::install_github("rstudio/promises@627dfc6a9189575265c744e700efcff4de94cd19")'
+RUN Rscript -e 'remotes::install_github("r-lib/usethis@942c09710174b2abbe0b26dd335e1ebe338f7b82")'
+RUN R -e 'remotes::install_github("news-r/fopi.app")'
+
+EXPOSE 3838
+CMD  ["R", "-e", "options('shiny.port'=3838,shiny.host='0.0.0.0');fopi.app::run_fopi()"]

inst/app/www/css/style.css

@@ -20,3 +20,17 @@
 .link{
   color: #247BA0 !important;
 }
+
+.light{
+  color: #f9f7f1;
+}
+
+.footer{
+  position: fixed;
+  width: 100%;
+  bottom: 5px;
+}
+
+.dark{
+  color: #2f2f2f;
+}