Copyright Yan PAN 2018
Copyright Yan PAN 2018
library(shinymaterial)
library(timevis)
VAR_COL_1 <- "cyan"
VAR_COL_2 <- "cyan"
material_page(
title = "Using Science, Data and Innovation to Make a Difference",
nav_bar_color = VAR_COL_1,
nav_bar_fixed = FALSE,
tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "style.css")),
# side nav ----------------------------------------------------------------
material_side_nav(
fixed = FALSE,
image_source = "theme.png",
material_side_nav_tabs(
side_nav_tabs = c("I am Yan" = "tab1", "Another CV" = "tab2",
"Source" = "tab4", "..."="tab3"),
icons = c("assignment_ind", "assessment", "code", "drafts")
),
tags$hr(),
tags$div(
style = "padding-left:22px;",
material_radio_button("lang", "Language Preference",
choices = c(" English" = "ENG", " Suomeksi" = "FIN"," 简体ä¸æ–‡" = "CHN")),
tags$br(),
material_checkbox("showCard", "display hidden contents", F)
),
tags$br(),
tags$p(class="center-align", tags$small("Copyright Yan PAN 2018"))
),
# 1st ---------------------------------------------------------------------
material_side_nav_tab_content(
side_nav_tab_id = "tab1",
material_row(
tags$div(
class = "col s12 m7",
material_card("Kokemukset | Expereinces"),
tags$div(class = "timeline",uiOutput("vTimeline"))
),
tags$div(
class = "col s12 m5 leftmod",
material_card(
"Yan PAN",
"M.Sc. Statistics + M.Sc. Economics",tags$br(), tags$br(),
tags$i(class = "tiny material-icons", "email"), tags$a(href = "mailto:yan@yan.fi", "yan@yan.fi "),
tags$i(class = "tiny material-icons", "phone_in_talk"), tags$a(href = "tel:+358449199857", "+358 44 919 9857 "),
tags$br(),
tags$i(class = "tiny material-icons", "dvr"), tags$a(href = "https://boring.fi", "https://boring.fi (projects/data-server) "),
tags$br(),
tags$i(class = "tiny material-icons", "phonelink"), tags$a(href = "https://yan.fi", "https://yan.fi (general)")
),
material_card(
uiOutput("strTitle"),
uiOutput("strDetail")
),
material_card("",uiOutput("strA")),
material_card("",uiOutput("strB")),
tags$p(style = "font-style: italic; text-align: center",
tags$a(href = "http://cv.yan.fi", "lisätiedot/details at http://cv.yan.fi"))
)
)
),
# 2nd ---------------------------------------------------------------------
material_side_nav_tab_content(
side_nav_tab_id = "tab2",
material_row(
material_column(width = 10, offset = 2, uiOutput("title"))
),
material_row(
material_column(width = 12, material_card("", timevisOutput("myExp")))
),
material_row(
tags$div(
class="col s12 m8",
material_card(textOutput("expt"), dataTableOutput("myExpDT"))
),
tags$div(
class = "col s12 m4",
tags$ul(
class="collection",
tags$li(class = "collection-item avatar",
tags$i(class = paste(VAR_COL_1, "circle material-icons"), "dashboard"),
uiOutput("At")),
tags$li(class = "collection-item",uiOutput("A")),
tags$li(class = "collection-item avatar",
tags$i(class = paste(VAR_COL_1, "circle material-icons"), "credit_card"),
uiOutput("Bt")),
tags$li(class = "collection-item",uiOutput("B")),
tags$li(class = "collection-item avatar",
tags$i(class = paste(VAR_COL_1, "circle material-icons"), "developer_mode"),
uiOutput("Ct")),
tags$li(class = "collection-item",uiOutput("C"))
)
)
)
),
# 3rd ---------------------------------------------------------------------
material_side_nav_tab_content(
side_nav_tab_id = "tab4",
material_row(
tags$div(class="col s12 m6",
material_card("ui.R", tags$pre(includeText("ui.R")))),
tags$div(class="col s12 m6",
material_card("server.R", tags$pre(includeText("server.R")))),
tags$div(class="col s12 m6",
material_card("global.R", tags$pre(includeText("global.R"))))
)
),
# 4th ---------------------------------------------------------------------
material_side_nav_tab_content(
side_nav_tab_id = "tab3",
tags$div(class = "col s12 m12",
material_card(
"Yan Pan",
tags$br(),
tags$i(class = "tiny material-icons", "email"), tags$a(href = "mailto:yan@yan.fi", "yan@yan.fi "),
tags$i(class = "tiny material-icons", "phone_in_talk"), tags$a(href = "tel:+358449199857", "+358 44 919 9857 "),
tags$br(),
tags$i(class = "tiny material-icons", "dvr"), tags$a(href = "https://boring.fi", "https://boring.fi (projects/data-server) "),
tags$br(),
tags$i(class = "tiny material-icons", "phonelink"), tags$a(href = "https://yan.fi", "https://yan.fi (general)")
)
)
)
)
# nav{display:none} .timeline .timeline-event .timeline-content {margin-top:-179px} .timelinetop{margin-top:189px !important;}.grey.lighten-4 {background-color: transparent !important;}
library(shinymaterial)
shinyServer(function(input, output, session) {
observeEvent({input$lang; input$showCard}, {
# main object, cache ------------------------------------------------------
main <- getField(input$lang)
# strengths ---------------------------------------------------------------
output$strTitle <- renderText(main$strMain)
output$strDetail <- renderText(main$strDetail)
output$strA <- renderUI(createCollection(main$strAtitle, main$strA))
output$strB <- renderUI(createCollection(main$strBtitle, main$strB))
# Vertical Timeline ------------------------------------------------------
summary <- paste(main$expPosition, "|",
main$expStart %>% as.Date() %>% format("%b %Y"), "-",
main$expEnd %>% as.Date() %>% format("%b %Y"))
if(input$showCard) summary <- paste(summary, "| ", main$expDescription)
timeEvents <- NULL
for (i in 1:length(main$expStart)) {
timeEvents[[i]] <- createEvent(title = main$expMain[i],
summary = summary[i],
detail = main$expDescription[i],
main_icon = main$expIcon[i],
labels = strsplit(main$expChips[i], " ")[[1]],
img_src = paste0("banner-", main$expImgsrc[i]))
}
output$vTimeline <- renderUI(
tags$div(class = "timelinetop", style = "margin-top: 106px", timeEvents)
)
# timevis -----------------------------------------------------------------
output$myExp <- renderTimevis(timevis(data = data.frame(id = 1:length(main$expStart),
start = main$expStart,
end = main$expEnd,
content = paste0('<b>', main$expMain,'</b><br />', main$expPosition),
group = main$expGroupNo),
groups = data.frame(id = unique(main$expGroupNo),
content = unique(main$expType)),
options= list(zoomKey = 'ctrlKey')))
# data table --------------------------------------------------------------
expDf <- data.frame(start = main$expStart,
company = main$expMain,
position = main$expPosition,
description = main$expDescription)
output$myExpDT <- renderDataTable(expDf,options = list(dom = 't'))
# titles in old -----------------------------------------------------------
output$title <- renderUI(h4(main$title))
output$expt <- renderText(main$expFieldTitle)
# Skill boxes -------------------------------------------------------------
output$At <- renderUI(tags$h4(main$skillAtitle))
output$A <- renderText(main$skillA)
output$Bt <- renderUI(tags$h4(main$skillBtitle))
output$B <- renderText(main$skillB)
output$Ct <- renderUI(tags$h4(main$skillCtitle))
output$C <- renderText(main$skillC)
output$info <- renderUI(tagList('This is an interactive web application',
tags$br(),
tags$p('available interactively at cv.yan.fi'),
tags$img(src = "qr.png", width = "39%"),
tags$p('Powered by Shiny | This new CV keeps updating'))
)
})
# click modal in timeVis --------------------------------------------------
observeEvent(input$myExp_selected, {
# load data for improvded performance, must be reactive
main <- getField(input$lang)
i <- as.numeric(input$myExp_selected)
material_modal(
modal_id = "curModal",
button_text = "x",
display_button = FALSE,
title = main$expMain[i],
tagList(tags$img(src = main$expImgsrc[i], height = 80),
tags$br(),
tags$p(main$expPosition[i]),
tags$p(main$expDescription[i]))
)
open_material_modal(session, "curModal")
})
})
myColors <- c("red", "pink", "purple", "deep-purple", "indigo", "blue", "light-blue",
"cyan", "teal", "green", "light-green", "lime", "yellow", "amber",
"orange", "deep-orange", "brown", "grey", "blue-grey")
myColors.rgb <- c("rgba(244, 67, 54, 0.1)", "rgba(233, 30, 99, 0.1)", "rgba(156, 39, 176, 0.1)", "rgba(103, 58, 183, 0.1)", "rgba(63, 81, 181, 0.1)", "rgba(33, 150, 243, 0.1)", "rgba(3, 169, 244, 0.1)",
"rgba(0, 188, 212, 0.1)", "rgba(0, 150, 136, 0.1)", "rgba(76, 175, 80, 0.1)", "rgba(139, 195, 74, 0.1)", "rgba(205, 220, 57, 0.1)", "rgba(255, 235, 59, 0.1)", "rgba(255, 193, 7, 0.1)",
"rgba(255, 152, 0, 0.1)", "rgba(255, 87, 34, 0.1)", "rgba(121, 85, 72, 0.1)", "rgba(158, 158, 158, 0.1)", "rgba(96, 125, 139, 0.1)")
syncGoogle <- function(){
all <- gsheet::gsheet2tbl("https://docs.google.com/spreadsheets/d/1CoMi_EfK950iXk_iuCSujY6Sq6e38VnYExXDo4sMONA/edit#gid=1164046835")
saveRDS(all, file = "all.rds")
}
getField <- function(lang = "CHN"){
fld <- readRDS("all.rds") %>% subset(language == lang | language == "ALL")
namedList <- list()
# pack the vectors
for (curKey in unique(fld$key)) {
curValue <- fld %>% subset(key == curKey)
namedList[[length(namedList) + 1]] <- curValue$value
}
# name the list
names(namedList) <- unique(fld$key)
return(namedList)
}
createCollection <- function(main = "Collection", items){
theItems <- list()
for (i in 1:length(items)) {
iCol <- sample(1:19, 1)
itemSplit <- strsplit(items[i], " - ")[[1]]
theItems[[i]] <- tags$a(
href = "#",
class = "collection-item avatar",
tags$i(class = paste("material-icons", myColors[iCol], "circle"), itemSplit[1]),
tags$span(class = "title", itemSplit[2]),
tags$p(style = "color: grey", itemSplit[3])
)
}
tagList(
tags$span(class = "card-title", main),
tags$div(class = "collection", tagList(theItems))
)
}
createEvent <- function(title = "Title", summary = "summary", detail = "detail",
main_icon = "language", labels = c("NA"), img_src = ""){
iCol <- sample(1:19, 1)
chipLabel <- lapply(labels, function(x) tags$div(class="chip", x))
cardContent <- tags$div(
class = "card-content",
tags$span(
class = "card-title activator grey-text text-darken-4",
title,
tags$i(class = "material-icons right", "more_vert")
),
tags$p(chipLabel),
tags$p(summary)
)
cardReveal <- tags$div(
class = "card-reveal",
tags$span(
class = "card-title grey-text text-darken-4",
title,
tags$i(class = "material-icons right", "close")
),
tags$p(chipLabel),
tags$p(detail)
)
cardImage <- tags$div(
class = "card-image waves-effect waves-block waves-light",
#tags$img(class = "activator", src = img_src)
tags$div(class = "activator", style = paste("background-color:", myColors.rgb[iCol], ";"), tags$img(src = img_src))
)
timeIcon <- tags$div(
class = paste("timeline-badge", myColors[iCol], "white-text"),
tags$i(class = "material-icons", main_icon)
)
tags$div(
class = "timeline-event",
tags$div(class = "card timeline-content", cardImage, cardContent, cardReveal),
timeIcon
)
}