TAK-43 TAK-45 interface
This commit is contained in:
parent
1485026777
commit
ce4c567497
149
app/app.R
149
app/app.R
@ -1,49 +1,126 @@
|
|||||||
#
|
|
||||||
# This is a Shiny web application. You can run the application by clicking
|
|
||||||
# the 'Run App' button above.
|
|
||||||
#
|
|
||||||
# Find out more about building applications with Shiny here:
|
|
||||||
#
|
|
||||||
# http://shiny.rstudio.com/
|
|
||||||
#
|
|
||||||
|
|
||||||
library(shiny)
|
library(shiny)
|
||||||
|
library(magrittr)
|
||||||
|
library(ggplot2)
|
||||||
|
library(plotly)
|
||||||
|
library(DT)
|
||||||
|
|
||||||
# Define UI for application that draws a histogram
|
|
||||||
ui <- fluidPage(
|
ui <- fluidPage(
|
||||||
|
tags$head(
|
||||||
|
tags$style(HTML("
|
||||||
|
@import url('//fonts.googleapis.com/css?family=Lobster|Cabin:400,700');
|
||||||
|
@import url('//fonts.googleapis.com/css2?family=Fjalla+One');
|
||||||
|
|
||||||
# Application title
|
|
||||||
titlePanel("Old Faithful Geyser Data"),
|
|
||||||
|
|
||||||
# Sidebar with a slider input for number of bins
|
"))),
|
||||||
sidebarLayout(
|
|
||||||
sidebarPanel(
|
theme = "style.css",
|
||||||
sliderInput("bins",
|
|
||||||
"Number of bins:",
|
fluidRow(
|
||||||
min = 1,
|
column(12,
|
||||||
max = 50,
|
navbarPage("",
|
||||||
value = 30)
|
tabPanel("TakeCareApp"),
|
||||||
),
|
tabPanel("Firmy"),
|
||||||
|
tabPanel("O nas"),
|
||||||
|
tabPanel("Zaloguj")),
|
||||||
|
|
||||||
|
)),
|
||||||
|
# App title ----
|
||||||
|
|
||||||
|
fluidRow(
|
||||||
|
column(3,
|
||||||
|
tags$div("Panel sterowania") %>% tagAppendAttributes(class="panel-title")
|
||||||
|
|
||||||
|
)%>% tagAppendAttributes(id = 'column-panel'),
|
||||||
|
column(9,
|
||||||
|
tabsetPanel(type = "tabs",
|
||||||
|
tabPanel("Zakładka 1", tags$div(plotlyOutput("plot1",height = "auto"))%>% tagAppendAttributes(class = 'content-wrapper')),
|
||||||
|
tabPanel("Zakładka 2", tags$div(plotlyOutput("plot2",height = "auto"))%>% tagAppendAttributes(class = 'content-wrapper')),
|
||||||
|
tabPanel("Zakładka 3", tags$div(plotlyOutput("plot3",height = "auto"))%>% tagAppendAttributes(class = 'content-wrapper')),
|
||||||
|
tabPanel("Zakładka 4", tags$div(plotlyOutput("plot4",height = "auto"))%>% tagAppendAttributes(class = 'content-wrapper')),
|
||||||
|
tabPanel("Zakładka 5", tags$div(DT::dataTableOutput("table1",height = "auto"))%>% tagAppendAttributes(class = 'content-wrapper')),
|
||||||
|
tabPanel("Zakładka 6", tags$div(DT::dataTableOutput("table2",height = "auto"))%>% tagAppendAttributes(class = 'content-wrapper'))
|
||||||
|
))%>% tagAppendAttributes(id = 'column-content')
|
||||||
|
) %>% tagAppendAttributes(id = 'row-content'),
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
fluidRow(
|
||||||
|
column(12,
|
||||||
|
tags$span("© Copyright Wszystkie prawa zastrzeżone."))%>% tagAppendAttributes(id = 'column-copyright'),
|
||||||
|
|
||||||
|
)%>% tagAppendAttributes(id = 'row-footer')
|
||||||
|
|
||||||
|
|
||||||
# Show a plot of the generated distribution
|
|
||||||
mainPanel(
|
|
||||||
plotOutput("distPlot")
|
|
||||||
)
|
|
||||||
)
|
|
||||||
)
|
)
|
||||||
|
|
||||||
# Define server logic required to draw a histogram
|
|
||||||
server <- function(input, output) {
|
server <- function(input, output) {
|
||||||
|
|
||||||
output$distPlot <- renderPlot({
|
output$plot1 <- renderPlotly({
|
||||||
# generate bins based on input$bins from ui.R
|
|
||||||
x <- faithful[, 2]
|
g<-ggplot(mpg) +
|
||||||
bins <- seq(min(x), max(x), length.out = input$bins + 1)
|
geom_point(mapping = aes(x = displ, y = hwy))
|
||||||
|
|
||||||
|
gg<-ggplotly(g)
|
||||||
|
|
||||||
|
gg
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
output$plot2 <- renderPlotly({
|
||||||
|
|
||||||
|
g<-ggplot(data = mpg, mapping = aes(x = cty, y = hwy)) +
|
||||||
|
geom_jitter()
|
||||||
|
|
||||||
|
gg<-ggplotly(g)
|
||||||
|
|
||||||
|
gg
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
output$plot3 <- renderPlotly({
|
||||||
|
|
||||||
|
g<-ggplot(data = mpg, mapping = aes(x = displ, y = hwy, color = drv)) +
|
||||||
|
geom_point() +
|
||||||
|
geom_smooth(se = FALSE)
|
||||||
|
|
||||||
|
gg<-ggplotly(g)
|
||||||
|
|
||||||
|
gg
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
output$plot4 <- renderPlotly({
|
||||||
|
|
||||||
|
g<-ggplot(data = mpg, mapping = aes(x = displ, y = hwy)) +
|
||||||
|
geom_point(mapping = aes(color=drv)) +
|
||||||
|
geom_smooth(se = FALSE)
|
||||||
|
|
||||||
|
gg<-ggplotly(g)
|
||||||
|
|
||||||
|
gg
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
pl <- list(
|
||||||
|
sSearch = "Szukaj",
|
||||||
|
sInfo="Wyniki od _START_ do _END_ z _TOTAL_ rekordów",
|
||||||
|
sZeroRecords="Brak rekordów",
|
||||||
|
sEmptyTable="Pusta tabela",
|
||||||
|
oPaginate= list(
|
||||||
|
sFirst="Pierwsza", sPrevious="Poprzednia",sLast="Ostatnia", sNext="Następna"
|
||||||
|
),
|
||||||
|
sLengthMenu = "Pokaż _MENU_ rekordów na stronie"
|
||||||
|
)
|
||||||
|
|
||||||
|
output$table1 <- DT::renderDataTable(iris,options = list(scrollX = TRUE,language=pl))
|
||||||
|
|
||||||
|
|
||||||
|
table<-DT::renderDataTable(mpg,options = list(scrollX = TRUE,language=pl))
|
||||||
|
output$table2 <- table
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# draw the histogram with the specified number of bins
|
|
||||||
hist(x, breaks = bins, col = 'darkgray', border = 'white')
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
# Run the application
|
shinyApp(ui=ui,server=server)
|
||||||
shinyApp(ui = ui, server = server)
|
|
||||||
24
app/www/main.css
Normal file
24
app/www/main.css
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
.main-pattern {
|
||||||
|
position: relative;
|
||||||
|
height: 500px;
|
||||||
|
background-image: linear-gradient(#3cfa97, #cafce2);
|
||||||
|
border-top-left-radius: 80% 50%;
|
||||||
|
border-bottom-right-radius: 80% 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: 'Raleway',sans-serif;
|
||||||
|
font-size: 62px;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 72px;
|
||||||
|
margin: 0 0 24px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
282
app/www/style.css
Normal file
282
app/www/style.css
Normal file
@ -0,0 +1,282 @@
|
|||||||
|
body{
|
||||||
|
background-color: #C7F9CC;
|
||||||
|
height:100vh;
|
||||||
|
|
||||||
|
}
|
||||||
|
body >.container-fluid{
|
||||||
|
height:100vh;
|
||||||
|
}
|
||||||
|
.container-fluid{
|
||||||
|
display:flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.row{
|
||||||
|
display:flex;
|
||||||
|
flex-direction:row;
|
||||||
|
flex-wrap:wrap;
|
||||||
|
|
||||||
|
}
|
||||||
|
.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{
|
||||||
|
display:flex;
|
||||||
|
flex-direction:column;
|
||||||
|
padding:0;
|
||||||
|
margin-bottom:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand{
|
||||||
|
display:none;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.navbar{
|
||||||
|
padding-left:0;
|
||||||
|
background-color:#00A896;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-default{
|
||||||
|
background-color:#00A896;
|
||||||
|
}
|
||||||
|
#
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.navbar-nav >li:first-child >a {
|
||||||
|
background-color: #028090;
|
||||||
|
box-shadow: 0.5px 0px 0px #FFFFFF;
|
||||||
|
font-family: Lobster !important;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 20px;
|
||||||
|
#line-height: 9px;
|
||||||
|
|
||||||
|
/* or 90% */
|
||||||
|
#display: flex;
|
||||||
|
|
||||||
|
#align-items: center;
|
||||||
|
#text-align: center;
|
||||||
|
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav >li:first-child.active >a {
|
||||||
|
#background-color: #028090;
|
||||||
|
#color: #FFFFFF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.navbar-nav >li:first-child >a {
|
||||||
|
#background-color: #028090;
|
||||||
|
# color: #FFFFFF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
|
||||||
|
background-color: #008375;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
font-family: Fjalla One;
|
||||||
|
|
||||||
|
}
|
||||||
|
.navbar-default .navbar-nav > li > a{
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
font-family: Fjalla One;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav >li:first-child.active >a, .navbar-nav >li:first-child.active >a:hover, .navbar-nav >li:first-child.active >a:focus,.navbar-nav >li:first-child >a:focus,.navbar-nav >li:first-child >a:hover,.navbar-nav >li:first-child >a {
|
||||||
|
background-color: #028090;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
background-color: #028090;
|
||||||
|
box-shadow: 0.5px 0px 0px #FFFFFF;
|
||||||
|
font-family: Lobster !important;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#row-content{
|
||||||
|
margin-left:0;
|
||||||
|
margin-right:0;
|
||||||
|
margin-bottom:auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#column-panel{
|
||||||
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), -2px -2px 4px rgba(0, 0, 0, 0.25);
|
||||||
|
|
||||||
|
background-color:white;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#column-content{
|
||||||
|
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), -2px -2px 4px rgba(0, 0, 0, 0.25);
|
||||||
|
background-color:white;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.content-wrapper{
|
||||||
|
padding-top:10px;
|
||||||
|
padding-bottom:10px;
|
||||||
|
padding-left:5px;
|
||||||
|
padding-right:5px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-title{
|
||||||
|
display:flex;
|
||||||
|
height:40px;
|
||||||
|
background-color:#028090;
|
||||||
|
color:white;
|
||||||
|
justify-content:center;
|
||||||
|
align-items:center;
|
||||||
|
font-family:Fjalla One;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.nav-tabs{
|
||||||
|
color:white;
|
||||||
|
background-color:#028090;
|
||||||
|
border-bottom:#028090;
|
||||||
|
}
|
||||||
|
.nav-tabs > li{
|
||||||
|
margin-bottom:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tabs > li > a{
|
||||||
|
color:white;
|
||||||
|
background-color:#028090;
|
||||||
|
border:none;
|
||||||
|
border-radius:0;
|
||||||
|
font-family:Fjalla One;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tabs > li > a:hover {
|
||||||
|
color:white;
|
||||||
|
background-color:#028090;
|
||||||
|
border:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tabs > li > a:focus {
|
||||||
|
color:white;
|
||||||
|
background-color:#028090;
|
||||||
|
border:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tabs > li {
|
||||||
|
border:none;
|
||||||
|
border-radius:0;
|
||||||
|
}
|
||||||
|
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover{
|
||||||
|
color:#028090;
|
||||||
|
background-color:white;
|
||||||
|
border:none;
|
||||||
|
border-radius:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#row-footer{
|
||||||
|
height:50px;
|
||||||
|
border-top:2px solid white;
|
||||||
|
margin-top:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#column-copyright{
|
||||||
|
padding-left:15px;
|
||||||
|
margin:0;
|
||||||
|
|
||||||
|
}
|
||||||
|
#column-copyright > span{
|
||||||
|
height:100%;
|
||||||
|
color:#00a896;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
table.dataTable tr:nth-child(even){
|
||||||
|
background-color:#C7F9CC!important;
|
||||||
|
}
|
||||||
|
table.dataTable tr:nth-child(odd){
|
||||||
|
background-color:#A7D7AC !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
table.dataTable th{
|
||||||
|
background-color:white !important;
|
||||||
|
}
|
||||||
|
.datatables .dataTables_wrapper .dataTables_paginate a{
|
||||||
|
border:none;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.datatables .dataTables_wrapper .dataTables_paginate span > a:hover,.datatables .dataTables_wrapper .dataTables_paginate span > a.current,.datatables .dataTables_wrapper .dataTables_paginate span > a.current:hover,.datatables .dataTables_wrapper .dataTables_paginate > .previous:hover,.datatables .dataTables_wrapper .dataTables_paginate > .next:hover {
|
||||||
|
color:white !important;
|
||||||
|
background:#05668dff !important;
|
||||||
|
border:none;
|
||||||
|
box-shadow: 0.5px 0px 0px #FFFFFF;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.datatables .dataTables_wrapper .dataTables_paginate .previous.disabled,.datatables .dataTables_wrapper .dataTables_paginate .next.disabled{
|
||||||
|
display:none!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media only screen and (max-width: 767px) {
|
||||||
|
.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#column-panel{
|
||||||
|
|
||||||
|
min-height:500px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#column-content{
|
||||||
|
|
||||||
|
min-height:500px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} }
|
||||||
|
|
||||||
|
|
||||||
|
@media only screen and (min-width: 768px) {
|
||||||
|
.navbar-nav{
|
||||||
|
width:100%;
|
||||||
|
margin-left:-15px;
|
||||||
|
display:flex !important;
|
||||||
|
}
|
||||||
|
.navbar-nav > li:last-of-type {
|
||||||
|
align-self:flex-end;
|
||||||
|
margin-left:auto;
|
||||||
|
#float:right !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#row-content{
|
||||||
|
justify-content:space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
#column-panel{
|
||||||
|
width:23%;
|
||||||
|
height:900px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#column-content{
|
||||||
|
width:73%;
|
||||||
|
min-height:900px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user