Map-Freight-Analysis-Framework/ui.R at main · shi093/Map-Freight-Analysis-Framework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
library(shiny)
library(leaflet)
library(dplyr)
library(shinycssloaders)
library(rgdal)
library(plotly)
library(htmltools)
library(DT)
library(shinyjs)

ui<-fluidPage(
    tags$head(HTML("<title>FAF Comparison </title>")),
    useShinyjs(),
    br(),
    span(style = "font-weight: 600; font-size: 25px; width: 100%;
         color: #022DB7;", "Freight Analysis Framework FAF4 vs. FAF5, Year 2017"),
    br(),br(),
    fluidRow(
      column(8, leafletOutput("Zone", height = "550px")%>% withSpinner(color="#0dc5c1")),
      column(4,
             span("Select "), span( style="color:green", "Origin"), span(" and "), span( style="color:red", "Destination"),
             span(" from the map:"),
             br(),br(),
             htmlOutput("od_info")%>% withSpinner(color="#0dc5c1"),
             hr(),
             htmlOutput("od_total")%>% withSpinner(color="#0dc5c1"),
             hr(),
             htmlOutput("od_total_5")%>% withSpinner(color="#0dc5c1")
      )
    ),
    br(),br(),
    fluidRow(
      column(9, div(DT::dataTableOutput("od_vol"),  width = "100%", style = "font-size:100%"))
    ),
    fluidRow(
      column(5, plotlyOutput("od_ton_chart", width = "100%", height = "350px")%>% withSpinner(color="#0dc5c1")),
      column(4, plotlyOutput("od_ton_pie", width = "100%", height = "250px")%>% withSpinner(color="#0dc5c1")),
      column(3, plotlyOutput("od_ton_pie_5", width = "100%", height = "250px")%>% withSpinner(color="#0dc5c1"))
    ),
    hr(),
    fluidRow(
      column(5, plotlyOutput("od_value_chart", width = "100%", height = "350px")%>% withSpinner(color="#0dc5c1")),
      column(4, plotlyOutput("od_value_pie", width = "100%", height = "250px")%>% withSpinner(color="#0dc5c1")),
      column(3, plotlyOutput("od_value_pie_5", width = "100%", height = "250px")%>% withSpinner(color="#0dc5c1"))
    )
  )