Skip to content

Commit

Permalink
Merge pull request #21 from unhcr-americas/11-as-dev-i-would-like-to-…
Browse files Browse the repository at this point in the history 
…wireframe-the-ui-in-order-to-give-preview-and-create-engagement

[doc] Finalise the very initial wireframe...https://github.com/unhcr-…
  • Loading branch information
@Edouard-Legoupil
Edouard-Legoupil authored Apr 26, 2023
2 parents c2bbf72 + cbeaf30 commit cf9edf5
Show file tree
Hide file tree
Showing 8 changed files with 331 additions and 16 deletions.
4 changes: 3 additions & 1 deletion DESCRIPTION
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ License: MIT + file LICENSE
Imports:
config (>= 0.3.1),
dplyr,
dashboardthemes,
shinydashboard,
golem (>= 0.4.0),
magrittr,
purrr,
Expand All @@ -28,4 +30,4 @@ Config/testthat/edition: 3
Encoding: UTF-8
Language: en-US
LazyData: true
RoxygenNote: 7.2.3
RoxygenNote: 7.2.3.9000
2 changes: 2 additions & 0 deletions NAMESPACE
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ export("%>%")
export(Referential)
export(run_app)
import(shiny)
import(shinydashboard)
importFrom(R6,R6Class)
importFrom(dashboardthemes,shinyDashboardThemeDIY)
importFrom(dplyr,contains)
importFrom(dplyr,filter)
importFrom(dplyr,select)
Expand Down
214 changes: 207 additions & 7 deletions R/app_ui.R
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,207 @@
#' @param request Internal parameter for `{shiny}`.
#' DO NOT REMOVE.
#' @import shiny
#' @import shinydashboard
#'
#' @return Front end of app
#'
#' @noRd
app_ui <- function(request) {


tagList(
# Leave this function for adding external resources
golem_add_external_resources(),
# Your application UI logic
fluidPage(
h1("Survey Designer")
)
)
theme_dashboard(),
# List the first level UI elements here
dashboardPage(
dashboardHeader(title = "Survey Designer (wireframe)"),
dashboardSidebar(
sidebarMenu(
menuItem(" Define Context", tabName = "Context", icon = icon("location-dot")),
menuItem(" Configure Content", tabName = "Content", icon = icon("arrows-to-circle")),
menuItem(" Set up Collection", tabName = "Collection", icon = icon("list-check")),
menuItem(" Export Forms", tabName = "Forms", icon = icon("share-from-square"))
)
),

dashboardBody(
tabItems(
# Context #####
tabItem(tabName = "Context",
p("A context reflects the implementation of the referential within a specific country or operation."),
fluidRow(
tags$div(title="Interview",
selectInput("library", label = "Methodology" ,
choices = list("Household Survey (Representative Stock)" = "household_survey",
"Flow Monitoring (People not aiming to establish residence)" = "flow_monitoring",
"Key Informant (Persons with knowledge)" = "key_informant",
"Beneficiary Monitoring (Participant to an assistance program)" = "beneficiary_monitoring"),
selected = "household_survey" ) ),

tags$div(title="Select your country - this will pull up automatically the Case Load that should be covered based on your annual statistical report and implement the languages translation and geographic breakdown required for the country",
selectInput("context",
label = "Country, defining then required languages & geographic Pcodes",
choices = list("Panama" = "Panama",
"Colombia" = "Colombia",
"Ecuador" = "Ecuador" ),
selected = "Panama") ),

tags$div(title="Population Group to cover",
checkboxGroupInput("population",
label = "Target Population",
choices = list("Refugees (REF) & Asylum seekers (ASY)"="RAS",
"Internally displaced persons (IDP)"="IDP",
"Other people in need of international protection (OIP)"="OIP",
"Stateless Persons (STA)"="STA",
"Others of concern to UNHCR (OOC)"="OOC",
"Returnee (RET)"="RET",
"Host community (HCT)"="HCT" ),
selected = "Panama") ),
tags$div(title="Required Disaggregation for Crosstabulation",
checkboxGroupInput("Disaggregation",
label = "Disaggregation",
choices = list("Age"="Gender",
"Gender"="Gender",
"Disability"="Disability",
"Site"="Site" ),
selected = "Age") )
),

br(),
p(" Next let's configure the content!")
),

# Content #####
tabItem(tabName = "Content",

checkboxGroupInput("topic",
label = "Select the Topics and/or indicators to prioritise",
choiceNames = list(
list(
icon("gavel") ,
"Rights"
),
list(
icon("home"),
"Trajectory"
),
list(
icon("thermometer-full"),
"Intention"
),
list(
icon("check-circle"),
"Basic Needs"
),
list(
icon("certificate"),
"Coping Capacity"
),
list(
icon("users"),
"Well-Being"
),
list(
icon("blind"),
"Victimisation"
),
list(
icon("usd"),
"Livelihood"
),
list(
icon("book"),
"Education"
),
list(
icon("medkit"),
"Health-Nutrition"
),
list(
icon("eye"),
"Accountability"
),
list(
icon("info-circle"),
"Information"
)),
choiceValues = list("Rights" ,
"Trajectory" ,
"Intention" ,
"Basic Needs" ,
"Coping Capacity" ,
"Well-Being" ,
"Victimisation" ,
"Livelihood" ,
"Education" ,
"Health-Nutrition" ,
"Accountability",
"Information" )),


br(),
p("As a result of this stage, below is a documentation of your survey-based indicators annual plan") ,


),

# Collection ####
tabItem(tabName = "Collection" ,

tags$div(title="Using multiple data collection mode in parallel can help minimizing
non-reponse and increase coverage.",
checkboxGroupInput("mode",
label = "What Data Collection Modes can be used for this annual cycle?" ,
# choiceNames = list("Face-to-face CAPI" ,
# "Phone-Interview CATI" ,
# "Self-administered CAWI" ),

choiceNames = list(
list(
icon("clipboard-question"),
"Face-to-face CAPI"="CAPI"
),
list(
icon("phone-square") ,
"Phone-Interview CATI"="CATI"
),
list(
icon("wifi"),
"Self-administered CAWI"= "CAWI"
)),

choiceValues = list("Face-to-face" ,
"Phone-Interview" ,
"Self-administered" ))),
tags$div(title="Define how many data collection waves you can manage within the year.
The more data collection wave the more indicators can be collected. ",
selectInput("wave",
label = "How many data collection waves for this annual cycle?",
choices = list("One Wave" = "One-wave",
"Two Waves" = "Two-waves",
"Three Waves" = "Three-waves",
"Four Waves" = "Four-waves" ),
selected = "Two-waves") ),

br(),
p("As a result of this stage, below is an estimation of Interview lenght per questionnaire")
),

# Forms ####
tabItem(tabName = "Forms",

p("Add the script to introduce the survey ") ,
p("Eventually change module sequences ") ,
br(),
p("The resulting XlsForms can either be adjusted manually or
pushed directly to UNHCR Kobo server.
You can download the files for each data collection wave ")
)
) #end items
) # end body
) # end page
) # end tag
}

#' Add external Resources to the Application
Expand All @@ -30,12 +221,21 @@ golem_add_external_resources <- function() {
)

tags$head(
favicon(),
golem::activate_js(),
golem::favicon(),
bundle_resources(
path = app_sys("app/www"),
app_title = "surveyDesigner"
)
# Add here other external resources
# for example, you can add shinyalert::useShinyalert()
# If you have a custom.css in the inst/app/www
# Or for example, you can add shinyalert::useShinyalert() here
#tags$link(rel="stylesheet", type="text/css", href="www/custom.css")
)
}






110 changes: 110 additions & 0 deletions R/theme.R
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
#' theme_dashboard
#'
#'
#' @return nothing
#'
#' @importFrom dashboardthemes shinyDashboardThemeDIY
#'
#' @noRd
theme_dashboard <- function() {
primary <- "#0072BC"
accent <- "#18375F"
secondary <- "#FAEB00"

dashboardthemes::shinyDashboardThemeDIY(

#general
appFontFamily = "Lato"
,appFontColor = "#696969"
,primaryFontColor = "#696969"
,infoFontColor = "#696969"
,successFontColor = "#696969"
,warningFontColor = "#696969"
,dangerFontColor = "#696969"
,bodyBackColor = "#F8F8F8"

#header
,logoBackColor = primary
,headerButtonBackColor = primary
,headerButtonIconColor = "white"
,headerButtonBackColorHover = accent
,headerButtonIconColorHover = "white"
,headerBackColor = primary
,headerBoxShadowColor = "#aaaaaa"
,headerBoxShadowSize = "0px 0px 0px"

#sidebar
,sidebarBackColor = "#EDEDED"

,sidebarPadding = 0

,sidebarMenuBackColor = "transparent"
,sidebarMenuPadding = 0
,sidebarMenuBorderRadius = 0

,sidebarShadowRadius = "0px 0px 0px"
,sidebarShadowColor = "#aaaaaa"

,sidebarUserTextColor = "#696969"

,sidebarSearchBackColor = "rgb(55,72,80)"
,sidebarSearchIconColor = "rgb(153,153,153)"
,sidebarSearchBorderColor = "rgb(55,72,80)"

,sidebarTabTextColor = "#696969"
,sidebarTabTextSize = 13
,sidebarTabBorderStyle = "none none none solid"
,sidebarTabBorderColor = "transparent"
,sidebarTabBorderWidth = 5
,sidebarTabBackColorSelected = "transparent"
,sidebarTabTextColorSelected = primary
,sidebarTabRadiusSelected = "0px 0px 0px 0px"
,sidebarTabBackColorHover = "#EDEDED"
,sidebarTabTextColorHover = accent
,sidebarTabBorderStyleHover = "none none none solid"
,sidebarTabBorderColorHover = secondary
,sidebarTabBorderWidthHover = 5
,sidebarTabRadiusHover = "0px 0px 0px 0px"

### boxes
,boxBackColor = "white"
,boxBorderRadius = 5
,boxShadowSize = "0px 0px 0px"
,boxShadowColor = paste0(primary,"30")
,boxTitleSize = 16
,boxDefaultColor = "white"
,boxPrimaryColor = "white"
,boxInfoColor = "rgb(210,214,220)"
,boxSuccessColor = "rgba(0,255,213,1)"
,boxWarningColor = "rgb(244,156,104)"
,boxDangerColor = "rgb(255,88,55)"

,tabBoxTabColor = "white"
,tabBoxTabTextSize = 12
,tabBoxTabTextColor = "#696969"
,tabBoxTabTextColorSelected = primary
,tabBoxBackColor = "white"
,tabBoxHighlightColor = primary
,tabBoxBorderRadius = 0

### inputs
,buttonBackColor = "rgb(245,245,245)"
,buttonTextColor = "rgb(0,0,0)"
,buttonBorderColor = "rgb(200,200,200)"
,buttonBorderRadius = 5
,buttonBackColorHover = "rgb(235,235,235)"
,buttonTextColorHover = "rgb(100,100,100)"
,buttonBorderColorHover = "rgb(200,200,200)"
,textboxBackColor = "rgb(255,255,255)"
,textboxBorderColor = "rgb(200,200,200)"
,textboxBorderRadius = 5
,textboxBackColorSelect = "rgb(245,245,245)"
,textboxBorderColorSelect = "rgb(200,200,200)"

### tables
,tableBackColor = NA
,tableBorderColor = NA
,tableBorderTopSize = 1
,tableBorderRowSize = 1
)
} #theme
5 changes: 3 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ For the end-user, aka the Survey Coordinator at Operation level, the application

2. Ease the __contextualization process__ from the global referential to the actual implementation in each country (i.e translating and adjusting the labels as per the specific context) and facilitate the feedback loop so that if the same ad-hoc questions are used in multiple context, they can be considered for inclusion in the global referential

3. Support the usage of [mixed-mode (CAPI/CATI?CAWI)](https://www.youtube.com/watch?v=qRmy2OAnyWc) and multiple data collection waves to collect the final dataset within an __annual survey data collection cycle__, all of this allowing both to promote survey integration and to maximize the financial resources invested in those activities
3. Support the usage of [mixed-mode (CAPI/CATI/CAWI)](https://www.youtube.com/watch?v=qRmy2OAnyWc) and multiple data collection waves to collect the final dataset within an __annual survey data collection cycle__, all of this allowing both to promote survey integration and to maximize the financial resources invested in those activities

Overall, this will contribute over time to the creation of [standardized survey-based indicators](https://egrisstats.org/resource/data-disaggregation-of-sdg-indicators-by-forced-displacement/) for comparative data analysis across countries and contexts.

Expand All @@ -24,7 +24,8 @@ Read more on the rationale for this app in the [vignette](https://unhcr-americas

## Run the app

The app is still under development - the prototype is accessible here: https://rstudio.unhcr.org/Survey_Designer/

:warning: *surveyDesigner is currently under development...* :construction: - the prototype is accessible here: https://rstudio.unhcr.org/Survey_Designer/

To run it locally, use

Expand Down
Loading

0 comments on commit cf9edf5

Please sign in to comment.