From ce4c567497b608363798cbe311ffb0406bfe0193 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Piskorski?= Date: Thu, 3 Dec 2020 11:39:38 +0100 Subject: [PATCH] TAK-43 TAK-45 interface --- app/app.R | 157 +++++++++++++++++++------- app/www/main.css | 24 ++++ app/www/style.css | 282 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 423 insertions(+), 40 deletions(-) create mode 100644 app/www/main.css create mode 100644 app/www/style.css diff --git a/app/app.R b/app/app.R index 1cd079f..2f1324a 100644 --- a/app/app.R +++ b/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(magrittr) +library(ggplot2) +library(plotly) +library(DT) -# Define UI for application that draws a histogram 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( - sliderInput("bins", - "Number of bins:", - min = 1, - max = 50, - value = 30) - ), - - # Show a plot of the generated distribution - mainPanel( - plotOutput("distPlot") - ) - ) + + "))), + + theme = "style.css", + + fluidRow( + column(12, + navbarPage("", + 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') + + ) -# Define server logic required to draw a histogram server <- function(input, output) { - - output$distPlot <- renderPlot({ - # generate bins based on input$bins from ui.R - x <- faithful[, 2] - bins <- seq(min(x), max(x), length.out = input$bins + 1) - - # draw the histogram with the specified number of bins - hist(x, breaks = bins, col = 'darkgray', border = 'white') - }) + + output$plot1 <- renderPlotly({ + + g<-ggplot(mpg) + + 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 + + + + } -# Run the application -shinyApp(ui = ui, server = server) +shinyApp(ui=ui,server=server) \ No newline at end of file diff --git a/app/www/main.css b/app/www/main.css new file mode 100644 index 0000000..4d26c3c --- /dev/null +++ b/app/www/main.css @@ -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; +} + diff --git a/app/www/style.css b/app/www/style.css new file mode 100644 index 0000000..204bf09 --- /dev/null +++ b/app/www/style.css @@ -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; + + +} + +}