ui.R 11.1 KB
Newer Older
Stephanie's avatar
Stephanie committed
1 2 3
## app.R ##
library(shiny)
library(shinydashboard)
4
#library(jsonlite)
5
library(anytime)          # convert unixtimestamps to readable date and time
6 7
#library(leaflet)

Stephanie's avatar
Stephanie committed
8
ui <- dashboardPage(
9 10
  skin="purple",
  
Stephanie's avatar
Stephanie committed
11 12 13
  dashboardHeader(title="CoCoVisR"),
  dashboardSidebar(
    sidebarMenu(
14
      id="tabs",
Stephanie's avatar
Stephanie committed
15
      menuItem("Upload", tabName = "upload", icon =icon("upload")),
16
      menuItem("Data", tabName = "data", icon =icon("list")),
Stephanie Wegscheidl's avatar
Stephanie Wegscheidl committed
17
      menuItem("Dashboard", tabName = "views", icon = icon("bar-chart-o")),
18
     # menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
Stephanie's avatar
Stephanie committed
19 20 21
      menuItem("Help", tabName = "help", icon = icon("book"))
    )
  ),
22
  
Stephanie's avatar
Stephanie committed
23
  dashboardBody(
24 25 26 27
    #tags$head(
    #  tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
    #),
    
Stephanie's avatar
Stephanie committed
28 29 30
    tabItems(
      # Upload tab content
      tabItem(tabName = "upload",
31
              h2("Upload your data here:"),
32
              fileInput("nut", "Select CoConUT Data (*.json):",
33
                        multiple = TRUE,
34 35 36 37
                        accept = c(
                          "text/json",
                          "text/comma-separated-values,text/plain",
                          ".json")),
38
              fileInput("quest", "Select CoCoQuest Data (*.json):",
39
                        multiple = TRUE,
40 41 42
                        accept = c(
                          "text/json",
                          "text/comma-separated-values,text/plain",
43
                          ".json")),
44
              actionButton("dataSite", "Go to Data")
45
              
Stephanie's avatar
Stephanie committed
46 47
      ),
      
48 49 50
      #show data tab content
      tabItem(tabName = "data",
              
51
                h2("Look into the CoConUT Data:"),
Stephanie Wegscheidl's avatar
Stephanie Wegscheidl committed
52
                h3(textOutput("lastLoadedNut")),
53
                dataTableOutput("nut"),
54
                h2("Look into the CoCoQuest Data:"),
Stephanie Wegscheidl's avatar
Stephanie Wegscheidl committed
55
                h3(textOutput("lastLoadedQuest")),
56
                dataTableOutput("quest"),
57 58 59
                div(style = "position:absolute;right:1em;", 
                  actionButton("viewSite", "go to Dashboard")
                )
60 61 62
      ),
      
      
63
      # Controls tab content
64
      tabItem(tabName = "views",
65 66 67 68 69 70
              fluidPage(
                fluidRow(
                  
                  sidebarLayout(
                    sidebarPanel(
                      h2("Set the Views here:"),      
71 72
                       textInput("title", "Name the Dashboard", " "),
                      span(textOutput("bar_info"), style="color:red"),
73 74 75
                       tabsetPanel(
                                       tabPanel("Barchart",
                                       #Barchart
76
                                       #span(textOutput("bar_info"), style="color:red"),
77 78
                                       textOutput("bar_explain"),
                                       #uiOutput("input_hist_x"),
79
                                       #uiOutput("input_hist_y"),
80
                                       actionButton("check_hist", "add Barchart")
81
                                       ),
82
                                       
83 84
                                       #TIMELINE
                                       tabPanel("Timeline",
85
                                       #span(textOutput("time_info"), style="color:red"),
86
                                       textOutput("texttimeline"),
87
                                       #uiOutput("input_time_data"),
88
                                       actionButton("check_time", "add Timeline")
89
                                       #selectInput("time_data", "data", choices=colnames(coconut.df))
90
                                       ),
91
                                       
92 93
                                       #Linechart
                                       tabPanel("Linechart",
94
                                                #span(textOutput("line_info"), style="color:red"),
95
                                                textOutput("line_explain"),
96 97
                                                # uiOutput("input_line_x"),
                                                # uiOutput("input_line_y"),
98
                                                actionButton("check_line", "add Linechart")
99
                                       ),
100
                                       
101 102
                                       #Scatterplot
                                       tabPanel("Scatterplot",
103 104
                                                # selectInput("scat_x", "x-axis", choices=colnames(coconut.df)),
                                                # selectInput("scat_y", "y-axis", choices=colnames(coconut.df)),
105
                                                #span(textOutput("scat_info"), style="color:red"),
106
                                                textOutput("scat_explain"),
107 108
                                                # uiOutput("input_scat_x"),
                                                # uiOutput("input_scat_y"),
109
                                                actionButton("check_scat", " add Scatterplot")
110
                                                ),
111
                                       
112 113
                                       #Boxplot
                                       tabPanel("Boxplot",
114
                                                # selectInput("box_x", "x-axis", choices=colnames(coconut.df)),
115
                                                #span(textOutput("box_info"), style="color:red"),
116
                                                textOutput("box_explain"),
117
                                                #uiOutput("input_box_x"),
118
                                                #uiOutput("input_box_y"),
119 120
                                                actionButton("check_box", "add Boxplot")

Stephanie Wegscheidl's avatar
boxplot  
Stephanie Wegscheidl committed
121
                                                #selectInput("box_y", "y-axis", choices=colnames(coconut.df))
122
                                       ),
123
                                       
124 125
                                       #MAP
                                       tabPanel("Map",
126
                                                # selectInput("map_data", "data", choices=colnames(coconut.df)),
127
                                                #span(textOutput("map_info"), style="color:red"),
128
                                                textOutput("map_explain"),
129
                                                #uiOutput("input_map"),
130
                                                actionButton("check_map", "add Map")
131
                                       )
132 133
                       )
                  ),
134
                    mainPanel(id="viewpanel", column(width = 12,
135 136 137
                                   
                                   h2(textOutput("title")),
                                   
138
                                   #uiOutput("hist_box"),
139
                                   uiOutput("time_box"),
140
                                   #timevisOutput("time"),
141
                                   uiOutput("line_box"),
142 143
                                   uiOutput("scat_box"),
                                   uiOutput("box_box"),
144
                                   uiOutput("map_box"),
145
                                   uiOutput("pdfview"),
146
                                  
147
                                   downloadButton("down.pdf","Download")
Stephanie Wegscheidl's avatar
Stephanie Wegscheidl committed
148 149
                                  )
                                  )
150 151 152 153 154 155 156 157
              
                
                
                )#end sidebarlayout
                
                )  #end fluidrow     
              )#end fluidpage
              
Stephanie Wegscheidl's avatar
Stephanie Wegscheidl committed
158
              #uiOutput("input_map_y"),
159
              #actionButton("dashboardSite", "go to dashboard")
Stephanie's avatar
Stephanie committed
160 161 162
      ),
      
      # Dashboard tab content
163 164 165
      #tabItem(tabName = "dashboard",
              #h2(textOutput("title")),
              #fluidRow(
166 167 168 169 170 171 172 173
                #tabBox(
                  #title = "First tabBox",
                  # The id lets us use input$tabset1 on the server to find the current tab
                  #id = "tabset1", height = "250px",
                  #tabPanel("Tab1", "First tab content"),
                  #tabPanel("Tab2", "Tab content 2")
                #),
                
174
               
175 176 177 178
                #uiOutput("hist_box"),
                #uiOutput("time_box"),
               # uiOutput("line_box"),
                #uiOutput("map_box")
179
                
180 181
             # )
              #actionButton("screenshot","Download")
182
              
183
              #downloadButton("downButton", "Download")
184
              
185
      #),
Stephanie's avatar
Stephanie committed
186 187 188
      
      # Help tab content
      tabItem(tabName = "help",
189
              h2("I am here to Help."),
190 191
              h3("General Information"),
              "This tool was created to help visualize and analyse data which is recorded with the CoConUT and CoCoQuest Applications. Please follow the next buttons, or the menu on the left side step by step. This will help you to work with this tool correctly.",
192
              h3("Uploading Data"),
193 194 195
              "Please make sure the files you want to upload are *.json files. Otherwise the upload won't work.", br(),
              "For uploading you have to click on the 'Browse'- Button and an explorer-window will open.", br(),
              "Please navigate to the wanted file, select it and click on 'open' or double click on it. 
196
              Then the name of the selected file and a loadingbar will apear. 'Upload complete' will show you that the upload worked and is finished.", br(),
197
              "Please make sure, that you upload the right data into the right field. If not please upload the correct file in the right fields. ", br(),
198
              "First field: CoConUT and second field: CoCoQuest. Otherwise the visualization won't work.",
199
              h3("Data"),
200 201 202 203 204 205 206 207 208 209
              "Do not skip this step. Otherwise the application will not load the needed data correctly. If you skiped this step, you might have to start the application new and do the upload again.",br(),
               "After correctly loading up the right json files, there will apear a table that shows the data that were red from the uploaded jsons. The first table contains the CoConUT.json data and the second table contains the CoCoQuest.json data.",br(),
                "Also the names of the loaded files will apear, here you can check again, if the uploaded files where the right ones. Please note, that there is a 'go to views'-button in the lower left corner, which will lead you to the next step.", br(),
              h3("Views"),
              "Here you can see which visualizations are possible within the Application. This tool is supposed to be supplemented by the user with functions they need. 
               On this page you are able to select the visualizations you want to use and which data should be in them.", br(), "Also you can enter the title of your dashboard.",
              "You can also add the vizualisations to the dashboard, which is shown on the right side of this view. 
              First you need click on the tab of the view you want to add to the dashboard, then select the data you want the visualization to contain (x- and y-axis or data). ",br(),
              "Then you will need to click on the button 'add *view*', right then the selected view should appear in the dashboard."
             
Stephanie's avatar
Stephanie committed
210 211
      )
    
212
    
Stephanie's avatar
Stephanie committed
213
    ))
214
)