ui.R

library(shiny)
library(shinydashboard)
library(dplyr)
library(leaflet)
library(googleVis)
library(plotly)
library(wordcloud)
library(RColorBrewer)
library(shinythemes)

shinyUI(dashboardPage(
  dashboardHeader(title = "Phone & APP",
                  titleWidth = 200),
  dashboardSidebar(
    width = 200,
    sidebarUserPanel("Shuo Zhang",
                     image = "http://www.jamaica-gleaner.mobi/20100110/business/images/Layout1_1_PNNBN20100108KK.jpg"),
    sidebarMenu(
      menuItem("Data", tabName = "data", icon = icon("database")),
      menuItem("Phone Map", tabName = "phone_map", icon = icon("map")),
      menuItem("Phone Plot", tabName = "phone_plot", icon = icon("bar-chart")),
      menuItem("APP Map", tabName = "app_map", icon = icon("map")),
      menuItem("APP Plot", tabName = "app_plot", icon = icon("bar-chart")),
      menuItem("Top 10 Phone", tabName = "phone_video", icon = icon("caret-square-o-right"))
    ),
    selectizeInput("select_brand",
                    "Select Phone Brand",
                    top10, multiple=T, selected='Xiaomi'),
    selectizeInput("select_APP",
                   "Select APP Cateogry",
                   top10APP, multiple=T, selected='Industry tag'),
    selectizeInput("select_gender",
                   "Select Gender",
                   gender, multiple=T, selected='F'),
    sliderInput("select_age",
                   label="Range of age",
                   min=0, max=100, value=c(0,100))
   ),
  dashboardBody(
    tabItems(
      tabItem(tabName = "phone_map",
              fluidRow(
                box(
                  title = 'Please select phone brand, gender and age range:',
                  status = "primary", solidHeader = TRUE,
                  collapsible = TRUE,
                  leafletOutput("phonemap"), width = 12)),
              fluidRow(
                box(title = 'Top 10 Phone Brands',
                    status = "primary", solidHeader = TRUE,
                    collapsible = TRUE,
                  plotlyOutput("phoneplot1"), height=450),
                       box(title = 'Market Share of Top 4 Phone Brands in 2015',
                           status = "primary", solidHeader = TRUE,
                           collapsible = TRUE,
                         plotlyOutput("phonems"),
                         h6('source:IDC Asia/Pacific Mobile Phone Tracker'), height=450)
                         )
      ),
      tabItem(tabName = "phone_plot",
              fluidRow(box(title='Please select gender:',
                           status = "primary", solidHeader = TRUE,
                           collapsible = TRUE,
                plotlyOutput("phoneplot2")),
                       box(title='Please select gender:',
                           status = "primary", solidHeader = TRUE,
                           collapsible = TRUE,
                         plotlyOutput("phoneplot3"))),
              fluidRow(box(title='Please select age range and phone brand:',
                           status = "primary", solidHeader = TRUE,
                           collapsible = TRUE,
                plotlyOutput("phoneplot4")),
              box(title='Please select phone brand:',
                  status = "primary", solidHeader = TRUE,
                  collapsible = TRUE,
                  plotlyOutput("phoneplot5")))
              ),
      tabItem(tabName = "app_map",
              fluidRow(box(
                title='Please select APP category, phone brand, gender and age range:',
                status = "primary", solidHeader = TRUE,
                collapsible = TRUE,
                leafletOutput("appmap"), width = 12)),
              fluidRow(
                box(title = 'Top 10 APP Categories',
                    status = "primary", solidHeader = TRUE,
                    collapsible = TRUE,plotlyOutput("phoneplot6")),
                box(title = 'Top 10 APP Categories based on Phone Brand',
                    status = "primary", solidHeader = TRUE,
                    collapsible = TRUE,plotlyOutput("phoneplot66")))
      ),
      tabItem(tabName = "app_plot",
              fluidRow(box(title='Please select gender:',
                           status = "primary", solidHeader = TRUE,
                           collapsible = TRUE,
                           plotlyOutput("phoneplot7")),
                       box(title='Please select gender:',
                           status = "primary", solidHeader = TRUE,
                           collapsible = TRUE,
                           plotlyOutput("phoneplot8"))),
              fluidRow(box(title='Please select age range and APP category:',
                           status = "primary", solidHeader = TRUE,
                           collapsible = TRUE,
                            plotlyOutput("phoneplot9")),
                       box(title='Please select APP category:',
                           status = "primary", solidHeader = TRUE,
                           collapsible = TRUE,
                           plotlyOutput("phoneplot10"))),
              fluidRow(box(title='Please select phone brand, gender and age range:',
                           status = "primary", solidHeader = TRUE,
                           collapsible = TRUE,
                            plotlyOutput("phoneplot11")),
                       box(title='Active APP Distribution:',
                           status = "primary", solidHeader = TRUE,
                           collapsible = TRUE,
                         plotlyOutput("phoneplot12")))
              
              ),
      tabItem(tabName = "data",
              fluidRow(h1('What are the most popular phones and APPs in China?', align="center"
              ), width=12,
              br(),
              h4('The data set is provided by TalkingData, China’s largest third-party mobile data platform.
Please refer to the link for data description:', a('link', href='https://www.kaggle.com/c/talkingdata-mobile-user-demographics/data'),
                 '. The data is from 05/01/2016 to 05/07/2016 and iphone data is excluded. Due to the huge size of data set, I only list the top
10 phone brands and top 10 APP categories in the shiny. Please begin your exploration.', style="text-align: justify; padding-left: 20px; 
                 padding-right:20px"),
              br(),
              br()
              ),
              fluidRow(box(title='Please select gender and age range:',
                           status = "primary", solidHeader = TRUE,
                           collapsible = TRUE,
                           plotOutput('wordplot1')), 
                       box(title='Please select gender and age range:',
                           status = "primary", solidHeader = TRUE,
                           collapsible = TRUE,
                           plotOutput('wordplot2')))
              ),
      tabItem(tabName = "phone_video",
             box(width = 12,
HTML('<iframe width="100%" height="500" 
                      src="https://www.youtube.com/embed/CHYNBF_V870" frameborder="0" allowfullscreen></iframe>'))
        
      )
    )
  )
))