change layout

app.R

@@ -16,42 +16,65 @@ library(echarts4r)
 
 model <- readRDS("MoE-model.rds")
 
-ui <- page_sidebar(
-  theme = bs_theme(bootswatch = "minty"),
+ui <- fluidPage(
+  # theme = bs_theme(bootswatch = "minty"),
   title = "Simulation of Study Success",
-  sidebar = sidebar(width = "20%", 
-    h5("Input"), 
-    fluidRow(prettySwitch("playgroup", "Playgroup", fill = TRUE, status = "primary"), 
-    prettySwitch("preelementary_school", "Pre-Elementary School", fill = TRUE, status = "primary"), 
-    prettySwitch("gov_scholarship_holder", "Gov. Scholarship Holder", fill = TRUE, status = "primary"), 
-    numericInput("home_sch_dist", "Home to School Distance", value = 3, min = 0), 
-    prettySwitch("sex", "Male?", fill = TRUE, status = "primary"), 
-    selectInput("school_location", "School Location", choices = c("Rural", "Urban")), 
-    prettySwitch("parents_spc_need", "Parent have special needs?", fill = TRUE, status = "primary"), 
-    selectInput("parents_occupation_category", "Parents Occupation Category", 
-                choices = c("Civil Servants", "Labor Workers", "Private Employee")),  
-    numericInput("household_income", "Household Income", 4000000, min = 0, max = 19949598), 
-    selectInput("parents_education_level_cat", "Parent Education Level", 
-                choices = c("Bachelor", "Diploma", "Master/Doctorate", "Senior Highschool", "Junior Highschool", "Elementary School", "Unschooled"))
-              ), 
-    fluidRow(
-      selectInput("highsch_major", "Highschool Major", width = "60%", 
-                choices = c("Natural Science", "Social Sciences", "Language Studies")), 
-      numericInput("math_score", "Math Score", 50, min = 0, max = 100, width = "39%")
-            ), 
-    fluidRow(
-      numericInput("science_score", "Science Score", 50, min = 0, max = 100, width = "48%"), 
-      numericInput("english_score", "English Score", 50, min = 0, max = 100, width = "48%")
-    ), 
-    fluidRow(
-      numericInput("indonesian_score", "B. Indonesia Score", 50, min = 0, max = 100, width = "48%"),
-      numericInput("social_score", "Social Score", 50, min = 0, max = 100, width = "48%")
-    ), 
-    selectInput("university", "University", choices = c("Private", "Public")), 
-    hr()
-  ),
+  # sidebar = sidebar(width = "20%", 
+  #   , 
+  #   hr()
+  # ),
+  column(6, 
+    h1("Input"), 
+    wellPanel(
+      style = "background-color: transparent;", 
+      fluidRow(
+        style = "display: flex;", 
+          prettySwitch("sex", "Male?", fill = TRUE, status = "primary"), 
+          prettySwitch("playgroup", "Playgroup", fill = TRUE, status = "primary"), 
+          prettySwitch("preelementary_school", "Pre-Elementary School", fill = TRUE, status = "primary"), 
+          prettySwitch("gov_scholarship_holder", "Gov. Scholarship Holder", fill = TRUE, status = "primary"), 
+          prettySwitch("parents_spc_need", "Parent have special needs?", fill = TRUE, status = "primary")
+        ), 
+        fluidRow(
+          style = "display: flex;", 
+          selectInput("parents_occupation_category", "Parents Occupation Category", 
+                      choices = c("Civil Servants", "Labor Workers", "Private Employee"), 
+                    width = "33.333%"),  
+          numericInput("household_income", "Household Income", 4000000, min = 0, max = 19949598, 
+                      width = "33.333%"), 
+          selectInput("parents_education_level_cat", "Parent Education Level", 
+                      choices = c("Bachelor", "Diploma", "Master/Doctorate", "Senior Highschool", "Junior Highschool", "Elementary School", "Unschooled"), 
+                      width = "33.333%")
+        ), 
+        fluidRow(
+          style = "display: flex;", 
+          selectInput("school_location", "School Location", choices = c("Rural", "Urban"), width = "50%"), 
+          numericInput("home_sch_dist", "School Distance (km)", value = 3, min = 0, width = "50%")
+        ), 
+        fluidRow(
+          selectInput("highsch_major", "Highschool Major", width = "60%", 
+                    choices = c("Natural Science", "Social Sciences", "Language Studies")), 
+                  ), 
+        fluidRow(
+          style = "display: flex;", 
+          numericInput("math_score", "Math Score", 50, min = 0, max = 100, width = "20%"), 
+          numericInput("science_score", "Science Score", 50, min = 0, max = 100, width = "20%"), 
+          numericInput("english_score", "English Score", 50, min = 0, max = 100, width = "20%"),
+          numericInput("indonesian_score", "Bahasa Indonesia Score", 50, min = 0, max = 100, width = "20%"),
+          numericInput("social_score", "Social Score", 50, min = 0, max = 100, width = "20%")
+        ), 
+        fluidRow(selectInput("university", "University", choices = c("Private", "Public")))
+
+    ),
+  ), 
+  column(6, 
+    h1("Output"), 
+    wellPanel(
+      echarts4rOutput("gpa_plot"), 
+      style = "background-color: transparent;"
+    )
+  )
   # tableOutput("tblout") 
-  echarts4rOutput("gpa_plot")
 )
 
 server <- function(input, output, session) {
@@ -88,7 +111,7 @@ server <- function(input, output, session) {
               e_bar(predict_GPA, label = list(show = TRUE)) |> 
         e_flip_coords() |> 
         e_y_axis(inverse = TRUE) |> 
-        e_grid(left = "15%", right = "15%")
+        e_grid(left = "20%", right = "5%")
     }
   )
 }