Update app.R

app.R

@@ -1,58 +1,1165 @@
 library(shiny)
+library(shinyWidgets)
+library(echarts4r)
 library(bslib)
-library(dplyr)
-library(ggplot2)
-
-df <- readr::read_csv("penguins.csv")
-# Find subset of columns that are suitable for scatter plot
-df_num <- df |> select(where(is.numeric), -Year)
-
-ui <- page_sidebar(
-  theme = bs_theme(bootswatch = "minty"),
-  title = "Penguins explorer",
-  sidebar = sidebar(
-    varSelectInput("xvar", "X variable", df_num, selected = "Bill Length (mm)"),
-    varSelectInput("yvar", "Y variable", df_num, selected = "Bill Depth (mm)"),
-    checkboxGroupInput("species", "Filter by species",
-      choices = unique(df$Species), selected = unique(df$Species)
-    ),
-    hr(), # Add a horizontal rule
-    checkboxInput("by_species", "Show species", TRUE),
-    checkboxInput("show_margins", "Show marginal plots", TRUE),
-    checkboxInput("smooth", "Add smoother"),
-  ),
-  plotOutput("scatter")
+library(tidyverse)
+library(leaflet)
+
+library(readxl)
+library(vetiver)
+library(janitor)
+
+telco_customer <- readr::read_csv("data/telco_customer_churn_dashboard.csv")
+locations <- readxl::read_xlsx("data/telco_customer_churn_location.xlsx") %>% 
+  clean_names() %>% 
+  select(customer_id, city, latitude, longitude)
+
+ui <- fluidPage(
+  tags$head(
+    tags$style("
+               body {
+               background-color: #8ec2ed;
+               }")
+  ), 
+  title = "Customer Churn Prevention Dashboard",
+  tabsetPanel(
+    tabPanel(h5("Dashboard", style="font-weight:bold;margin-top:5px;margin-bottom:5px;"), 
+             h1("Customer Churn Prevention Dashboard", style="font-weight:bold;text-align:center;color:#000;"), 
+             fluidRow(
+               column(12, 
+                      column(2, 
+                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                       h5("Customer", style="font-weight:bold;margin:0;padding:0;"), 
+                                       hr(style="margin:0.5em;padding:0;"), 
+                                       h2(scales::number(nrow(telco_customer), big.mark = ","), style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+                             )
+                      ), 
+                      column(2, 
+                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                       h5("Potential Churn Customer", style="font-weight:bold;margin:0;padding:0;"), 
+                                       hr(style="margin:0.5em;padding:0;"), 
+                                       h2(paste0(scales::number(sum(telco_customer$churn_label == "Yes"), accuracy = 1, big.mark = ","), " (", scales::percent(sum(telco_customer$churn_label == "Yes")/nrow(telco_customer), accuracy = 0.01), ")"), style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+                             )
+                      ), 
+                      column(2, 
+                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                       h5("Avg Monthly Charges", style="font-weight:bold;margin:0;padding:0;"), 
+                                       hr(style="margin:0.5em;padding:0;"), 
+                                       h2(scales::number(mean(telco_customer$monthly_charge), accuracy = 0.01, big.mark = ",", prefix = "$"), style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+                             )
+                      ), 
+                      column(2, 
+                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                       h5("Total Charges", style="font-weight:bold;margin:0;padding:0;"), 
+                                       hr(style="margin:0.5em;padding:0;"), 
+                                       h2(scales::number(sum(telco_customer$total_charges), big.mark = ",", prefix = "$"), style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+                             )
+                      ), 
+                      column(2, 
+                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                       h5("Avg Monthly Long Dist. Chrg", style="font-weight:bold;margin:0;padding:0;"), 
+                                       hr(style="margin:0.5em;padding:0;"), 
+                                       h2(scales::number(mean(telco_customer$avg_monthly_long_distance_charges), accuracy = 0.01, big.mark = ",", prefix = "$"), style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+                             )
+                      ), 
+                      column(2, 
+                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                       h5("Avg CLTV", style="font-weight:bold;margin:0;padding:0;"), 
+                                       hr(style="margin:0.5em;padding:0;"), 
+                                       h2(scales::number(mean(telco_customer$cltv), accuracy = 0.01, big.mark = ","), style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+                             )
+                      ) 
+               )
+             ), 
+             fluidRow(
+               column(4, 
+                      h3("Customer Demographics", style="font-weight:bold;text-align:center;color:#fff;"), 
+                      column(6, 
+                             wellPanel(style="background-color:transparent;text-align:center;margin:0 0 0.5em 0;padding:1em;height:200px;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                       # h5("% by Gender", style="margin:0;padding:0;"), 
+                                       # hr(style="margin:0.5em;padding:0;"), 
+                                       telco_customer |> 
+                                         count(gender) |>  
+                                         mutate(pct = round(n/sum(n)*100, 2)) |> 
+                                         e_charts(gender) |> 
+                                         e_pie(pct, 
+                                               startAngle = 90) |> 
+                                         e_title("% by Gender") |> 
+                                         e_legend(show = TRUE, type = "plain", orient = "vertical", left = "right") |> 
+                                         e_dims(height = 200) |>
+                                         e_tooltip(
+                                           formatter = htmlwidgets::JS("function(params){
+                                                     return(params.name + ': ' + params.value + '%')
+                                                     }")
+                                         )
+                             )
+                      ),
+                      column(6, 
+                             div(style="display:flex;", 
+                                 wellPanel(style="background-color:transparent;text-align:center;margin:0 0.5em 0.5em 0;padding:1em;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                           h5("Sr. Citizen", style="font-weight:bold;margin:0;padding:0;"), 
+                                           hr(style="margin:0.5em;padding:0;"), 
+                                           h3(telco_customer %>% 
+                                                mutate(senior_citizen = age > 65) %>% 
+                                                pull(senior_citizen) %>% 
+                                                mean() %>% 
+                                                scales::percent(accuracy = 0.01), style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+                                 ), 
+                                 wellPanel(style="background-color:transparent;text-align:center;margin:0 0 0.5em 0.5em;padding:1em;width:50%;border-width:medium;box-shadow: 2px 2px #888888;",
+                                           h5("Married", style="font-weight:bold;margin:0;padding:0;"), 
+                                           hr(style="margin:0.5em;padding:0;"), 
+                                           h3(telco_customer %>% 
+                                                mutate(married = married == "Yes") %>% 
+                                                pull(married) %>% 
+                                                mean() %>% 
+                                                scales::percent(accuracy = 0.01), style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+                                 )
+                             ), 
+                             div(style="display:flex;", 
+                                 wellPanel(style="background-color:transparent;text-align:center;margin:0.5em 0.5em 0 0;padding:1em;width:50%;border-width:medium;box-shadow: 2px 2px #888888;",
+                                           h5("Dependents", style="font-weight:bold;margin:0;padding:0;"), 
+                                           hr(style="margin:0.5em;padding:0;"), 
+                                           h3(telco_customer %>% 
+                                                mutate(dependents = number_of_dependents > 0) %>% 
+                                                pull(dependents) %>% 
+                                                mean() %>% 
+                                                scales::percent(accuracy = 0.01), style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+                                 ), 
+                                 wellPanel(style="background-color:transparent;text-align:center;margin:0.5em 0 0 0.5em;padding:1em;width:50%;border-width:medium;box-shadow: 2px 2px #888888;",
+                                           h5("Ref Friend", style="font-weight:bold;margin:0;padding:0;"), 
+                                           hr(style="margin:0.5em;padding:0;"), 
+                                           h3(telco_customer %>% 
+                                                mutate(referred_a_friend = referred_a_friend == "Yes") %>% 
+                                                pull(referred_a_friend) %>% 
+                                                mean() %>% 
+                                                scales::percent(accuracy = 0.01), style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+                                 )
+                             )
+                      ),
+                      column(12, 
+                             wellPanel(style="background-color:transparent;text-align:center;margin:0.5em 0 0 0;padding:0;border-width:medium;box-shadow: 2px 2px #888888;",
+                                       uiOutput("map")
+                             )
+                      )
+                      
+               ), 
+               column(4, 
+                      h3("Customer Account Information", style="font-weight:bold;text-align:center;color:#fff;"), 
+                      wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:1em;height:200px;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                # telco_customer |> 
+                                #   count(payment_method) |>  
+                                #   mutate(pct = round(n/sum(n)*100, 2)) |> 
+                                #   e_charts(payment_method) |> 
+                                #   e_pie(pct, 
+                                #         startAngle = 120) |> 
+                                #   e_title("Payment Method") |> 
+                                #   e_legend(show = TRUE, type = "plain", orient = "vertical", left = "right") |> 
+                                #   e_dims(height = 200) |> 
+                                #   e_tooltip(
+                                #     formatter = htmlwidgets::JS("function(params){
+                                #                                 return(params.name + ': ' + params.value + '%')
+                                #                                 }")
+                                #   )
+                                telco_customer |> 
+                                  count(payment_method) |> 
+                                  # top_n(3, n) %>% 
+                                  mutate(pct = round(n/sum(n), 4)) |> 
+                                  arrange(pct) %>% 
+                                  e_charts(payment_method, reorder = TRUE) |> 
+                                  e_bar(pct, legend = FALSE) |> 
+                                  e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
+                                  e_flip_coords() %>% 
+                                  e_title("Payment Method") |> 
+                                  e_dims(width = 600, height = 200) |> 
+                                  e_grid(left = "20%", top = "12.5%", bottom = "25%") %>% 
+                                  e_tooltip(
+                                    formatter = htmlwidgets::JS("function(params){
+                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
+                                                     }")
+                                  )
+                      ), 
+                      div(style="display: flex;", 
+                          wellPanel(style="background-color:transparent;text-align:center;margin:1em 0.5em 0.5em 0;padding:1em;height:190px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                    telco_customer %>% 
+                                      count(paperless_billing) |>  
+                                      mutate(pct = round(n/sum(n)*100, 2)) |> 
+                                      e_charts(paperless_billing) %>% 
+                                      e_pie(pct) |> 
+                                      e_title("Paperless Billing") |> 
+                                      e_legend(show = TRUE, type = "plain", orient = "vertical", left = "right") |> 
+                                      e_dims(height = 190) |> 
+                                      e_tooltip(
+                                        formatter = htmlwidgets::JS("function(params){
+                                                     return(params.name + ': ' + params.value + '%')
+                                                     }")
+                                      )
+                          ), 
+                          wellPanel(style="background-color:transparent;text-align:center;margin:1em 0 0.5em 0.5em;padding:1em;height:190px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                    telco_customer |> 
+                                      count(offer) |>  
+                                      mutate(offer = str_remove(offer, "Offer "), 
+                                             pct = round(n/sum(n), 4)) |> 
+                                      arrange(n) %>% 
+                                      e_charts(offer) |> 
+                                      e_bar(pct, legend = FALSE) |> 
+                                      e_title("Offer") |> 
+                                      e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
+                                      e_flip_coords() %>% 
+                                      e_dims(height = 200) |> 
+                                      e_grid(left = "15%", top = "12.5%", bottom = "25%", right = "10%") %>% 
+                                      e_tooltip(
+                                        formatter = htmlwidgets::JS("function(params){
+                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
+                                                     }")
+                                      )
+                          )
+                      ), 
+                      div(style="display: flex;", 
+                          wellPanel(style="background-color:transparent;text-align:center;margin:0.5em 0.5em 0 0;padding:1em;height:200px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                    telco_customer %>% 
+                                      mutate(tenure_grp = case_when(tenure_in_months < 12 ~ " < 1 year", 
+                                                                    tenure_in_months < 24 ~ " < 2 year", 
+                                                                    tenure_in_months < 36 ~ " < 3 year", 
+                                                                    tenure_in_months < 48 ~ " < 4 year",
+                                                                    TRUE ~ "4+ year")) %>% 
+                                      count(tenure_grp) %>% 
+                                      mutate(pct = round(n/sum(n), 4)) |> 
+                                      arrange(n) %>% 
+                                      e_charts(tenure_grp) |> 
+                                      e_bar(pct, legend = FALSE) |> 
+                                      e_title("Tenure") |> 
+                                      e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
+                                      e_flip_coords() %>% 
+                                      e_dims(height = 200) |> 
+                                      e_grid(left = "25%", top = "12.5%", bottom = "25%", right = "10%") %>% 
+                                      e_tooltip(
+                                        formatter = htmlwidgets::JS("function(params){
+                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
+                                                     }")
+                                      )
+                          ), 
+                          wellPanel(style="background-color:transparent;text-align:center;margin:0.5em 0 0 0.5em;padding:1em;height:200px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                    telco_customer %>% 
+                                      count(contract) %>% 
+                                      mutate(pct = round(n/sum(n), 4)) |> 
+                                      arrange(n) %>% 
+                                      e_charts(contract) |> 
+                                      e_bar(pct, legend = FALSE) |> 
+                                      e_title("Contract Type") |> 
+                                      e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
+                                      e_flip_coords() %>% 
+                                      e_dims(height = 200) |> 
+                                      e_grid(left = "45%", top = "12.5%", bottom = "25%", right = "10%") %>% 
+                                      e_tooltip(
+                                        formatter = htmlwidgets::JS("function(params){
+                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
+                                                     }")
+                                      )
+                          )
+                      )
+               ), 
+               column(4, 
+                      h3("Services Signed", style="font-weight:bold;text-align:center;color:#fff;"),
+                      column(12, 
+                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:1em;height:285px;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                       telco_customer |> 
+                                         count(internet_type) |>  
+                                         mutate(pct = round(n/sum(n), 4)) |> 
+                                         arrange(n) %>% 
+                                         e_charts(internet_type) |> 
+                                         e_bar(pct, legend = FALSE) |> 
+                                         e_title("Internet Service Type") |> 
+                                         e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
+                                         e_flip_coords() %>% 
+                                         e_dims(width = 600, height = 285) |> 
+                                         e_grid(left = "15%", top = "12.5%", bottom = "20%", right = "15%") %>% 
+                                         e_tooltip(
+                                           formatter = htmlwidgets::JS("function(params){
+                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
+                                                     }")
+                                         )
+                             ), 
+                             div(style="display:flex;", 
+                                 wellPanel(style="background-color:transparent;text-align:center;margin:1em 0.5em 1em 0;padding:1em;height:320px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                           # br(), 
+                                           progressBar(id = "pb1", value = 0, display_pct = TRUE, striped = TRUE), 
+                                           progressBar(id = "pb2", value = 0, display_pct = TRUE, striped = TRUE), 
+                                           progressBar(id = "pb3", value = 0, display_pct = TRUE, striped = TRUE), 
+                                           progressBar(id = "pb4", value = 0, display_pct = TRUE, striped = TRUE), 
+                                           progressBar(id = "pb5", value = 0, display_pct = TRUE, striped = TRUE) 
+                                 ), 
+                                 wellPanel(style="background-color:transparent;text-align:center;margin:1em 0 1em 0.5em;padding:1em;height:320px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                           # br(), 
+                                           progressBar(id = "pb6", value = 0, display_pct = TRUE, striped = TRUE), 
+                                           progressBar(id = "pb7", value = 0, display_pct = TRUE, striped = TRUE), 
+                                           progressBar(id = "pb8", value = 0, display_pct = TRUE, striped = TRUE), 
+                                           progressBar(id = "pb9", value = 0, display_pct = TRUE, striped = TRUE), 
+                                           progressBar(id = "pb10", value = 0, display_pct = TRUE, striped = TRUE)
+                                           )
+                                 )
+                             )
+                      )
+             )
+             ), 
+    tabPanel(
+      h5("Customer Churn Prediction", style="font-weight:bold;margin-top:5px;margin-bottom:5px;"),
+             fluidRow(
+               column(12, 
+                      # h1("Customer Churn Prediction", style="font-weight:bold;text-align:center;color:#000;margin-bottom:0;"), 
+                      div(style="display:flex;flex-wrap:nowrap;margin-left:1.5rem;margin-bottom:-30px !important;margin-top:1.5em;", 
+                          fileInput("file_data", "Upload File", width = "20%",),
+                          div(style="height:30px;margin-top:1.75em;margin-bottom:0;", 
+                              actionButton("process", "Process", icon = icon("cogs"))
+                          ), 
+                          div(style="margin-left:0.5em;", 
+                              selectInput("customer", "Select Customer", choices = c("---All Customers---"))
+                              )
+                      )
+               )
+             ), 
+             fluidRow(
+               column(12, 
+                      column(2, 
+                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                       uiOutput("pred_total_cust")
+                             )
+                      ), 
+                      column(2, 
+                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                       uiOutput("pred_potential_churn")
+                             )
+                      ), 
+                      column(2, 
+                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                       uiOutput("pred_monthly_charge")
+                             )
+                      ), 
+                      column(2, 
+                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                       uiOutput("pred_total_charge")
+                             )
+                      ), 
+                      column(2, 
+                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                       uiOutput("pred_avg_long_dist")
+                             )
+                      ), 
+                      column(2, 
+                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:0.5em;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                       uiOutput("pred_avg_cltv")
+                             )
+                      ) 
+               )
+             ), 
+             fluidRow(
+               column(4, 
+                      h3("Customer Demographics", style="font-weight:bold;text-align:center;color:#fff;"), 
+                      column(6, 
+                             wellPanel(style="background-color:transparent;text-align:center;margin:0 0 0.5em 0;padding:1em;height:200px;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                       echarts4rOutput("pred_pie_gender")
+                             )
+                      ),
+                      column(6, 
+                             div(style="display:flex;", 
+                                 wellPanel(style="background-color:transparent;text-align:center;margin:0 0.5em 0.5em 0;padding:1em;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                           uiOutput("pred_sr_citizen")
+                                 ), 
+                                 wellPanel(style="background-color:transparent;text-align:center;margin:0 0 0.5em 0.5em;padding:1em;width:50%;border-width:medium;box-shadow: 2px 2px #888888;",
+                                           uiOutput("pred_married")
+                                 )
+                             ), 
+                             div(style="display:flex;", 
+                                 wellPanel(style="background-color:transparent;text-align:center;margin:0.5em 0.5em 0 0;padding:1em;width:50%;border-width:medium;box-shadow: 2px 2px #888888;",
+                                           uiOutput("pred_dependents")
+                                 ), 
+                                 wellPanel(style="background-color:transparent;text-align:center;margin:0.5em 0 0 0.5em;padding:1em;width:50%;border-width:medium;box-shadow: 2px 2px #888888;",
+                                           uiOutput("pred_referred")
+                                 )
+                             )
+                      ),
+                column(12, 
+                        wellPanel(style="background-color:transparent;text-align:center;margin:0.5em 0 0 0;padding:0;border-width:medium;box-shadow: 2px 2px #888888;",
+                                  uiOutput("pred_map")
+                        )
+                )
+                      
+               ), 
+               column(4, 
+                      h3("Customer Account Information", style="font-weight:bold;text-align:center;color:#fff;"), 
+                      wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:1em;height:200px;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                echarts4rOutput("pred_payment")
+                      ), 
+                      div(style="display: flex;", 
+                          wellPanel(style="background-color:transparent;text-align:center;margin:1em 0.5em 0.5em 0;padding:1em;height:190px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                    echarts4rOutput("pred_paperless")
+                          ), 
+                          wellPanel(style="background-color:transparent;text-align:center;margin:1em 0 0.5em 0.5em;padding:1em;height:190px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                    echarts4rOutput("pred_offer")
+                          )
+                      ), 
+                      div(style="display: flex;", 
+                          wellPanel(style="background-color:transparent;text-align:center;margin:0.5em 0.5em 0 0;padding:1em;height:200px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                    echarts4rOutput("pred_tenure")
+                          ), 
+                          wellPanel(style="background-color:transparent;text-align:center;margin:0.5em 0 0 0.5em;padding:1em;height:200px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                    echarts4rOutput("pred_contract")
+                          )
+                      )
+               ), 
+               column(4, 
+                      h3("Services Signed", style="font-weight:bold;text-align:center;color:#fff;"),
+                      column(12, 
+                             wellPanel(style="background-color:transparent;text-align:center;margin:0;padding:1em;height:285px;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                       echarts4rOutput("pred_internet_type")
+                             ), 
+                             div(style="display:flex;", 
+                                 wellPanel(style="background-color:transparent;text-align:center;margin:1em 0.5em 1em 0;padding:1em;height:320px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                           # br(), 
+                                           progressBar(id = "pred_pb1", value = 0, display_pct = TRUE, striped = TRUE), 
+                                           progressBar(id = "pred_pb2", value = 0, display_pct = TRUE, striped = TRUE), 
+                                           progressBar(id = "pred_pb3", value = 0, display_pct = TRUE, striped = TRUE), 
+                                           progressBar(id = "pred_pb4", value = 0, display_pct = TRUE, striped = TRUE), 
+                                           progressBar(id = "pred_pb5", value = 0, display_pct = TRUE, striped = TRUE) 
+                                 ), 
+                                 wellPanel(style="background-color:transparent;text-align:center;margin:1em 0 1em 0.5em;padding:1em;height:320px;width:50%;border-width:medium;box-shadow: 2px 2px #888888;", 
+                                           # br(), 
+                                           progressBar(id = "pred_pb6", value = 0, display_pct = TRUE, striped = TRUE), 
+                                           progressBar(id = "pred_pb7", value = 0, display_pct = TRUE, striped = TRUE), 
+                                           progressBar(id = "pred_pb8", value = 0, display_pct = TRUE, striped = TRUE), 
+                                           progressBar(id = "pred_pb9", value = 0, display_pct = TRUE, striped = TRUE), 
+                                           progressBar(id = "pred_pb10", value = 0, display_pct = TRUE, striped = TRUE)
+                                           )
+                                 )
+                             )
+                      )
+               )
+             )
+    )
 )
 
-server <- function(input, output, session) {
-  subsetted <- reactive({
-    req(input$species)
-    df |> filter(Species %in% input$species)
-  })
-
-  output$scatter <- renderPlot(
-    {
-      p <- ggplot(subsetted(), aes(!!input$xvar, !!input$yvar)) +
-        theme_light() +
-        list(
-          theme(legend.position = "bottom"),
-          if (input$by_species) aes(color = Species),
-          geom_point(),
-          if (input$smooth) geom_smooth()
+server <- function(input, output, session){
+  output$location <- renderLeaflet({
+    tag.map.title <- tags$style(HTML("
+    .leaflet-control.map-title { 
+                                transform: translate(-50%,20%);
+                                position: float !important;
+                                left: 80%;
+                                margin-top: -50%;
+                                text-align: left;
+                                padding-left: 10px; 
+                                padding-right: 10px; 
+                                background: transparent;
+                                font-weight: bold;
+                                font-size: 20px;
+                                }"))
+    
+    title <- tags$div(
+      tag.map.title, HTML("Location")
+    )  
+    
+    telco_customer %>%
+      count(city, longitude, latitude) %>%
+      leaflet() %>% 
+      addTiles() %>% 
+      # addMarkers(lng = ~longitude, lat = ~latitude, 
+      #            clusterOptions = markerClusterOptions()
+      # ) %>%
+      addCircles(lng = ~longitude, lat = ~latitude) %>% 
+      addControl(title, position = "topleft", className="map-title")
+  })
+  output$map <- renderUI({
+    leafletOutput("location")
+  })
+  
+  mypb_status <- function(value){
+    if (value < 33) {
+      status <- "danger"
+    } else if (value >= 33 & value < 67) {
+      status <- "warning"
+    } else {
+      status <- "success"
+    }
+    return(status)
+  }
+  
+  # observe({
+  #   shinyWidgets::updateProgressBar(session = session, id = "pb1", value = 80, title = "Premium Tech Support")
+  #   shinyWidgets::updateProgressBar(session = session, id = "pb2", value = 80, title = "Phone Service")
+  #   shinyWidgets::updateProgressBar(session = session, id = "pb3", value = 50, title = "Multiple Lines")
+  #   shinyWidgets::updateProgressBar(session = session, id = "pb4", value = 50, title = "Online Security")
+  #   shinyWidgets::updateProgressBar(session = session, id = "pb5", value = 50, title = "Online Backup")
+  #   shinyWidgets::updateProgressBar(session = session, id = "pb6", value = 50, title = "Device Protection Plan")
+  #   shinyWidgets::updateProgressBar(session = session, id = "pb7", value = 50, title = "Streaming TV")
+  #   shinyWidgets::updateProgressBar(session = session, id = "pb8", value = 50, title = "Streaming Music")
+  #   shinyWidgets::updateProgressBar(session = session, id = "pb9", value = 50, title = "Streaming Movies")
+  #   shinyWidgets::updateProgressBar(session = session, id = "pb10", value = 50, title = "Unlimited Data")
+  # })
+  # 
+  observe({
+    shinyWidgets::updateProgressBar(session = session, id = "pb1", value = round(sum(telco_customer$premium_tech_support == "Yes")/nrow(telco_customer)*100, 2), title = "Premium Tech Support")
+    shinyWidgets::updateProgressBar(session = session, id = "pb2", value = round(sum(telco_customer$phone_service == "Yes")/nrow(telco_customer)*100, 2), title = "Phone Service")
+    shinyWidgets::updateProgressBar(session = session, id = "pb3", value = round(sum(telco_customer$multiple_lines == "Yes")/nrow(telco_customer)*100, 2), title = "Multiple Lines")
+    shinyWidgets::updateProgressBar(session = session, id = "pb4", value = round(sum(telco_customer$online_security == "Yes")/nrow(telco_customer)*100, 2), title = "Online Security")
+    shinyWidgets::updateProgressBar(session = session, id = "pb5", value = round(sum(telco_customer$online_backup == "Yes")/nrow(telco_customer)*100, 2), title = "Online Backup")
+    shinyWidgets::updateProgressBar(session = session, id = "pb6", value = round(sum(telco_customer$device_protection_plan == "Yes")/nrow(telco_customer)*100, 2), title = "Device Protection Plan")
+    shinyWidgets::updateProgressBar(session = session, id = "pb7", value = round(sum(telco_customer$streaming_tv == "Yes")/nrow(telco_customer)*100, 2), title = "Streaming TV")
+    shinyWidgets::updateProgressBar(session = session, id = "pb8", value = round(sum(telco_customer$streaming_music == "Yes")/nrow(telco_customer)*100, 2), title = "Streaming Music")
+    shinyWidgets::updateProgressBar(session = session, id = "pb9", value = round(sum(telco_customer$streaming_movies == "Yes")/nrow(telco_customer)*100, 2), title = "Streaming Movies")
+    shinyWidgets::updateProgressBar(session = session, id = "pb10", value = round(sum(telco_customer$unlimited_data == "Yes")/nrow(telco_customer)*100, 2), title = "Unlimited Data")
+  })
+
+  # to_pred_df <- eventReactive(input$process, read_csv(input$file_data$datapath))
+
+  vep <- vetiver_endpoint("https://aephiday-test.hf.space/predict")
+
+  outpred <- eventReactive(input$process, {
+    ext <- tools::file_ext(input$file_data$datapath)
+    req(input$file_data)
+    validate(need(ext == "csv", "Please upload a csv file"))
+    if(is.null(input$file_data)){
+      return(NULL)
+    } else {
+      to_pred_df <- read_csv(input$file_data$datapath)
+      vep %>%
+        augment(new_data = to_pred_df) %>%
+        mutate(.pred_class = factor(if_else(.pred_Yes > 0.5, "Yes", "No"), levels = c("Yes", "No")))
+    }
+  })
+  
+  observeEvent(input$process, {
+    updateSelectInput(session = session, inputId = "customer", label = "Select Customer", choices = c("---All Customers---", outpred()$customer_id))
+  })
+
+  output$pred_total_cust <- renderUI({
+    if(input$customer == "---All Customers---"){
+      tagList(
+        h5("Total Customer", style="font-weight:bold;margin:0;padding:0;"), 
+        hr(style="margin:0.5em;padding:0;"), 
+        scales::number(nrow(outpred()), big.mark = ",") %>%
+        h2(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+      )
+    } else {
+      tagList(
+        h5("Customer ID", style="font-weight:bold;margin:0;padding:0;"), 
+        hr(style="margin:0.5em;padding:0;"), 
+        h2(input$customer, style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+      )
+    }
+    
+  })
+  output$pred_potential_churn <- renderUI({
+    if(input$customer == "---All Customers---"){
+      tagList(
+        h5("Potential Churn Customer", style="font-weight:bold;margin:0;padding:0;"), 
+        hr(style="margin:0.5em;padding:0;"), 
+        paste0(scales::number(sum(outpred()$.pred_class == "Yes"), accuracy = 1), " (", scales::percent(sum(outpred()$.pred_class == "Yes")/nrow(outpred()), accuracy = 0.01), ")") %>% 
+          h2(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+      )
+    } else {
+      tagList(
+        h5("Churn Probability", style="font-weight:bold;margin:0;padding:0;"), 
+        hr(style="margin:0.5em;padding:0;"), 
+        scales::percent(outpred() %>% 
+                          filter(customer_id == input$customer) %>% 
+                          pull(.pred_Yes), accuracy = 0.01) %>% 
+          h2(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+      )
+    }
+  })
+  output$pred_monthly_charge <- renderUI({
+    if(input$customer == "---All Customers---"){
+      tagList(
+        h5("Avg Monthly Charges", style="font-weight:bold;margin:0;padding:0;"), 
+        hr(style="margin:0.5em;padding:0;"), 
+        scales::number(mean(outpred()$monthly_charge), accuracy = 0.01, big.mark = ",", prefix = "$") %>%
+        h2(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+      )
+    } else {
+      tagList(
+        h5("Avg Monthly Charges", style="font-weight:bold;margin:0;padding:0;"), 
+        hr(style="margin:0.5em;padding:0;"), 
+        scales::number(outpred() %>% 
+                       filter(customer_id == input$customer) %>% 
+                       pull(monthly_charge), accuracy = 0.01, 
+                     big.mark = ",", prefix = "$") %>%
+        h2(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+      )
+    }
+  })
+  output$pred_total_charge <- renderUI({
+    if(input$customer == "---All Customers---"){
+      tagList(
+        h5("Total Charges", style="font-weight:bold;margin:0;padding:0;"), 
+        hr(style="margin:0.5em;padding:0;"), 
+        scales::number(sum(outpred()$total_charges), 
+                       accuracy = 0.01, big.mark = ",", prefix = "$") %>% 
+          h2(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+      )
+    } else {
+      tagList(
+        h5("Total Charges", style="font-weight:bold;margin:0;padding:0;"), 
+        hr(style="margin:0.5em;padding:0;"), 
+        scales::number(outpred() %>% 
+                       filter(customer_id == input$customer) %>% 
+                       pull(total_charges), accuracy = 0.01, 
+                     big.mark = ",", prefix = "$") %>%
+        h2(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+      )
+    }
+  })
+  output$pred_avg_long_dist <- renderUI({
+    if(input$customer == "---All Customers---"){
+      tagList(
+        h5("Avg Monthly Long Dist. Chrg", style="font-weight:bold;margin:0;padding:0;"), 
+        hr(style="margin:0.5em;padding:0;"), 
+        scales::number(mean(outpred()$avg_monthly_long_distance_charges), 
+                       accuracy = 0.01, big.mark = ",", prefix = "$") %>% 
+          h2(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+      )
+    } else {
+      tagList(
+        h5("Avg Monthly Long Dist. Chrg", style="font-weight:bold;margin:0;padding:0;"), 
+        hr(style="margin:0.5em;padding:0;"), 
+        scales::number(outpred() %>% 
+                       filter(customer_id == input$customer) %>% 
+                       pull(avg_monthly_long_distance_charges), accuracy = 0.01, 
+                     big.mark = ",", prefix = "$") %>%
+        h2(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+      )
+    }
+  })
+  output$pred_avg_cltv <- renderUI({
+    if(input$customer == "---All Customers---"){
+      tagList(
+        h5("Avg CLTV", style="font-weight:bold;margin:0;padding:0;"), 
+        hr(style="margin:0.5em;padding:0;"), 
+        scales::number(mean(outpred()$cltv), accuracy = 0.01, big.mark = ",") %>% 
+        h2(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+      )
+    } else {
+      tagList(
+        h5("CLTV", style="font-weight:bold;margin:0;padding:0;"), 
+        hr(style="margin:0.5em;padding:0;"), 
+        scales::number(outpred() %>% 
+                       filter(customer_id == input$customer) %>% 
+                       pull(cltv), accuracy = 1, big.mark = ",") %>% 
+          h2(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+      )
+    }
+  })
+  
+  
+  output$pred_pie_gender <- renderEcharts4r({
+    if(input$customer == "---All Customers---"){
+      outpred() |> 
+        count(gender) |>  
+        mutate(pct = round(n/sum(n)*100, 2)) |> 
+        e_charts(gender) |> 
+        e_pie(pct, 
+              startAngle = 90) |> 
+        e_labels(show = FALSE) %>% 
+        e_title("% by Gender") |> 
+        e_legend(show = TRUE, type = "plain", orient = "vertical", left = "right") |> 
+        e_dims(height = 200) |>
+        e_tooltip(
+          formatter = htmlwidgets::JS("function(params){
+                                                       return(params.name + ': ' + params.value + '%')
+                                                       }")
         )
+    } else {
+      fm <- reactive(outpred() |> 
+        filter(customer_id == input$customer) %>% 
+        pull(gender))
+      
+      outpred() |> 
+        filter(customer_id == input$customer) %>% 
+        count(gender) |>  
+        mutate(pct = round(n/sum(n)*100, 2)) |> 
+        e_charts(gender) |> 
+        e_pie(pct, 
+              startAngle = 90) |> 
+        e_image_g(top = "10%", 
+                  left = "30%", 
+                  z = 999, 
+                  style = list(image = paste0(fm(), ".png"), 
+                               width = 150, 
+                               height = 150)
+                  ) %>% 
+        e_labels(show = FALSE) %>% 
+        e_title("Gender") %>% 
+        e_dims(height = 200) 
+    }
+  })
+  
+  output$pred_sr_citizen <- renderUI({
+    if(input$customer == "---All Customers---"){
+      tagList(
+        h5("Sr. Citizen", style="font-weight:bold;margin:0;padding:0;"), 
+        hr(style="margin:0.5em;padding:0;"), 
+        outpred() %>% 
+          mutate(senior_citizen = age > 65) %>% 
+          pull(senior_citizen) %>% 
+          mean() %>% 
+          scales::percent(accuracy = 0.01) %>% 
+          h3(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+      )
+    } else {
+      tagList(
+        h5("Age", style="font-weight:bold;margin:0;padding:0;"), 
+        hr(style="margin:0.5em;padding:0;"), 
+        outpred() %>% 
+          filter(customer_id == input$customer) %>% 
+          pull(age) %>% 
+          h3(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+      )
+    }
+  })
+  
+  output$pred_married <- renderUI({
+    if(input$customer == "---All Customers---"){
+      tagList(
+        h5("Married", style="font-weight:bold;margin:0;padding:0;"), 
+        hr(style="margin:0.5em;padding:0;"), 
+        outpred() %>% 
+          mutate(married = married == "Yes") %>% 
+          pull(married) %>% 
+          mean() %>% 
+          scales::percent(accuracy = 0.01) %>% 
+          h3(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+      )
+    } else {
+      tagList(
+        h5("Married", style="font-weight:bold;margin:0;padding:0;"), 
+        hr(style="margin:0.5em;padding:0;"), 
+        outpred() %>% 
+          filter(customer_id == input$customer) %>% 
+          pull(married) %>% 
+          h3(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+      )
+    }
+  })
+  
+  output$pred_dependents <- renderUI({
+    if(input$customer == "---All Customers---"){
+      tagList(
+        h5("Dependents", style="font-weight:bold;margin:0;padding:0;"), 
+        hr(style="margin:0.5em;padding:0;"), 
+        outpred() %>% 
+          mutate(dependents = number_of_dependents > 0) %>% 
+          pull(dependents) %>% 
+          mean() %>% 
+          scales::percent(accuracy = 0.01) %>% 
+          h3(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+      )
+    } else {
+      tagList(
+        h5("Dependents", style="font-weight:bold;margin:0;padding:0;"), 
+        hr(style="margin:0.5em;padding:0;"), 
+        outpred() %>% 
+          filter(customer_id == input$customer) %>% 
+          pull(number_of_dependents) %>% 
+          mean() %>% 
+          scales::number(big.mark = ",") %>% 
+          h3(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+      )
+    }
+  })
+  
+  output$pred_referred <- renderUI({
+    if(input$customer == "---All Customers---"){
+      tagList(
+        h5("Ref Friend", style="font-weight:bold;margin:0;padding:0;"), 
+        hr(style="margin:0.5em;padding:0;"), 
+        outpred() %>% 
+          mutate(referred_a_friend = referred_a_friend == "Yes") %>% 
+          pull(referred_a_friend) %>% 
+          mean() %>% 
+          scales::percent(accuracy = 0.01) %>% 
+          h3(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+      )
+    } else {
+      tagList(
+        h5("Ref Friend", style="font-weight:bold;margin:0;padding:0;"), 
+        hr(style="margin:0.5em;padding:0;"), 
+        outpred() %>% 
+          filter(customer_id == input$customer) %>% 
+          pull(referred_a_friend) %>% 
+          h3(style="font-weight:bold;margin:0;padding:0;color:#0c5896;")
+      )
+    }
+  })
+  
+  output$pred_location <- renderLeaflet({
+    tag.map.title <- tags$style(HTML("
+    .leaflet-control.map-title { 
+                                transform: translate(-50%,20%);
+                                position: float !important;
+                                left: 80%;
+                                margin-top: -50%;
+                                text-align: left;
+                                padding-left: 10px; 
+                                padding-right: 10px; 
+                                background: transparent;
+                                font-weight: bold;
+                                font-size: 20px;
+                                }"))
+    
+    title <- tags$div(
+      tag.map.title, HTML("Location")
+    )  
+    
+    pal <- colorFactor(palette = c("blue", "firebrick"), domain = outpred()$.pred_class)
+    
+    if(input$customer == "---All Customers---"){
+      outpred() %>% 
+      # filter(customer_id == input$customer) %>% 
+      left_join(locations, join_by(customer_id)) %>% 
+      count(city, longitude, latitude) %>%
+      leaflet() %>% 
+      addTiles() %>% 
+      # addMarkers(lng = ~longitude, lat = ~latitude, 
+      #            clusterOptions = markerClusterOptions()
+      # ) %>%
+      addCircles(lng = ~longitude, lat = ~latitude, 
+                 color = ~pal(outpred()$.pred_class), 
+                 popup = ~htmltools::htmlEscape(paste0(city, ": ", n))) %>% 
+      addControl(title, position = "topleft", className="map-title") %>% 
+      addLegend(pal = pal, values = outpred()$.pred_class)
+    } else {
+      cust_data <- outpred() %>% 
+        filter(customer_id == input$customer) %>%
+        left_join(locations, join_by(customer_id))
+      
+      cust_data %>% 
+        leaflet() %>% 
+        # setView(lng = ~longitude, lat = ~latitude, zoom = 17) %>% 
+        addTiles() %>% 
+        # addMarkers(lng = ~longitude, lat = ~latitude, 
+        #            clusterOptions = markerClusterOptions()
+        # ) %>%
+        addMarkers(lng = ~longitude, lat = ~latitude, 
+                   popup = ~htmltools::htmlEscape(city)) %>% 
+        addControl(title, position = "topleft", className="map-title")
+        
+    }
+  })
+  output$pred_map <- renderUI({
+    leafletOutput("pred_location")
+  })
+  
+  output$pred_payment <- renderEcharts4r({
+    if(input$customer == "---All Customers---"){
+      outpred() |> 
+          count(payment_method) |> 
+          mutate(pct = round(n/sum(n), 4)) |> 
+          arrange(pct) %>% 
+          ungroup() %>% 
+          e_charts(payment_method, reorder = TRUE) |> 
+          e_bar(pct, legend = FALSE) |> 
+          e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
+          e_flip_coords() %>% 
+          e_title("Payment Method") |> 
+          e_dims(width = 600, height = 200) |> 
+          e_grid(left = "20%", top = "12.5%", bottom = "25%") %>% 
+          e_tooltip(
+            formatter = htmlwidgets::JS("function(params){
+                                                         return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
+                                                         }")
+          
+      )
+    } else {
+      pm <- reactive(outpred() %>%
+        filter(customer_id == input$customer) %>%
+        pull(payment_method) %>%
+          str_replace("\\s", "-"))
+    #     
+    #   outpred() %>% 
+    #     filter(customer_id == input$customer) %>% 
+    #     e_charts() %>% 
+    #     e_image_g(top = "10%", 
+    #               left = "40%", 
+    #               z = -999, 
+    #               style = list(image = paste0(pm(), ".png"), 
+    #                            width = 150, 
+    #                            height = 150)
+    #     ) |> 
+    #     e_dims(width = 600, height = 200) %>% 
+    #     e_title("Payment Method")
+      outpred() |> 
+        filter(customer_id == input$customer) %>%
+        count(payment_method) |> 
+        mutate(pct = round(n/sum(n), 4)) |> 
+        arrange(pct) %>% 
+        ungroup() %>% 
+        e_charts(payment_method, reorder = TRUE) |> 
+        e_bar(pct, legend = FALSE) |> 
+        e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
+        e_flip_coords() %>% 
+        e_title("Payment Method") |> 
+        e_dims(width = 600, height = 200) |> 
+        e_image_g(top = "10%",
+                  left = "40%",
+                  z = 999,
+                  style = list(image = paste0(pm(), ".png"),
+                               width = 150,
+                               height = 150)
+        ) |>
+        e_grid(left = "20%", top = "12.5%", bottom = "25%") %>%
+        e_tooltip(
+          formatter = htmlwidgets::JS("function(params){
+                                                         return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
+                                                         }")
+          
+        )
+    }
+  })
+  
+  output$pred_paperless <- renderEcharts4r({
+    if(input$customer == "---All Customers---"){
+      outpred() |> 
+      count(paperless_billing) |>  
+      mutate(pct = round(n/sum(n)*100, 2)) |> 
+      e_charts(paperless_billing) %>% 
+      e_pie(pct) |> 
+      e_labels(show = FALSE) %>% 
+      e_title("Paperless Billing") |> 
+      e_legend(show = TRUE, type = "plain", orient = "vertical", left = "right") |> 
+      e_dims(height = 190) |> 
+      e_tooltip(
+        formatter = htmlwidgets::JS("function(params){
+                                                     return(params.name + ': ' + params.value + '%')
+                                                     }")
+      )
+    } else {
+      pp <- reactive(outpred() %>%
+                       filter(customer_id == input$customer) %>%
+                       pull(paperless_billing) %>%
+                       str_replace("\\s", "-"))
 
-      if (input$show_margins) {
-        margin_type <- if (input$by_species) "density" else "histogram"
-        p <- p |> ggExtra::ggMarginal(
-          type = margin_type, margins = "both",
-          size = 8, groupColour = input$by_species, groupFill = input$by_species
+      outpred() %>%
+        filter(customer_id == input$customer) %>%
+        count(paperless_billing) |>  
+        mutate(pct = round(n/sum(n)*100, 2)) |> 
+        e_charts(paperless_billing) %>% 
+        e_pie(pct) |> 
+        e_labels(show = FALSE) %>% 
+        e_image_g(top = "15%",
+                  left = "40%",
+                  z = 999,
+                  style = list(image = paste0(pp(), ".png"),
+                               width = 120,
+                               height = 120)
+        ) |>
+        e_dims(width = 200, height = 190) %>%
+        e_title("Paperless Billing")
+    }
+  })
+  
+  output$pred_offer <- renderEcharts4r({
+    if(input$customer == "---All Customers---"){
+      outpred() |> 
+      count(offer) |>  
+      mutate(offer = str_remove(offer, "Offer "), 
+             pct = round(n/sum(n), 4)) |> 
+      arrange(n) %>% 
+      e_charts(offer) |> 
+      e_bar(pct, legend = FALSE) |> 
+      e_title("Offer") |> 
+      e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
+      e_flip_coords() %>% 
+      e_dims(height = 200) |> 
+      e_grid(left = "15%", top = "12.5%", bottom = "25%", right = "10%") %>% 
+      e_tooltip(
+        formatter = htmlwidgets::JS("function(params){
+                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
+                                                     }")
+      )
+    } else {
+      po <- reactive(outpred() %>%
+                       filter(customer_id == input$customer) %>%
+                       mutate(offer = str_remove(offer, "Offer ")) %>%
+                       pull(offer) %>%
+                       str_replace("\\s", "-"))
+
+      outpred() %>%
+        filter(customer_id == input$customer) %>%
+        mutate(offer = str_remove(offer, "Offer ")) %>%
+        count(offer) |>  
+        mutate(offer = str_remove(offer, "Offer "), 
+               pct = round(n/sum(n), 4)) |> 
+        arrange(n) %>% 
+        e_charts(offer) |> 
+        e_bar(pct, legend = FALSE) |> 
+        e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
+        e_flip_coords() %>% 
+        e_image_g(top = "15%",
+                  left = "40%",
+                  z = 999,
+                  style = list(image = paste0(po(), ".png"),
+                               width = 120,
+                               height = 120)
+        ) |>
+        e_grid(left = "15%", top = "12.5%", bottom = "25%", right = "10%") %>% 
+        e_dims(width = 200, height = 200) %>%
+        e_title("Offer")
+    }
+  })
+  
+  output$pred_tenure <- renderEcharts4r({
+    if(input$customer == "---All Customers---"){
+      outpred() |> 
+      mutate(tenure_grp = case_when(tenure_in_months < 12 ~ " < 1 year", 
+                                    tenure_in_months < 24 ~ " < 2 year", 
+                                    tenure_in_months < 36 ~ " < 3 year", 
+                                    tenure_in_months < 48 ~ " < 4 year",
+                                    TRUE ~ "4+ year")) %>% 
+      count(tenure_grp) %>% 
+      mutate(pct = round(n/sum(n), 4)) |> 
+      arrange(n) %>% 
+      e_charts(tenure_grp) |> 
+      e_bar(pct, legend = FALSE) |> 
+      e_title("Tenure") |> 
+      e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
+      e_flip_coords() %>% 
+      e_dims(height = 200) |> 
+      e_grid(left = "25%", top = "12.5%", bottom = "25%", right = "10%") %>% 
+      e_tooltip(
+        formatter = htmlwidgets::JS("function(params){
+                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
+                                                     }")
+      )
+    } else {
+      outpred() |> 
+        filter(customer_id == input$customer) %>%
+        mutate(tenure_grp = case_when(tenure_in_months < 12 ~ " < 1 year", 
+                                      tenure_in_months < 24 ~ " < 2 year", 
+                                      tenure_in_months < 36 ~ " < 3 year", 
+                                      tenure_in_months < 48 ~ " < 4 year",
+                                      TRUE ~ "4+ year")) %>% 
+        count(tenure_grp) %>% 
+        mutate(pct = round(n/sum(n), 4)) |> 
+        arrange(n) %>% 
+        e_charts(tenure_grp) |> 
+        e_bar(pct, legend = FALSE) |> 
+        e_title("Tenure") |> 
+        e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
+        e_flip_coords() %>% 
+        e_dims(height = 200) |> 
+        e_grid(left = "25%", top = "12.5%", bottom = "25%", right = "10%") %>% 
+        e_tooltip(
+          formatter = htmlwidgets::JS("function(params){
+                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
+                                                     }")
+        )
+    }
+  })
+  
+  output$pred_contract <- renderEcharts4r({
+    if(input$customer == "---All Customers---"){
+      outpred() |> 
+      count(contract) %>% 
+      mutate(pct = round(n/sum(n), 4)) |> 
+      arrange(n) %>% 
+      e_charts(contract) |> 
+      e_bar(pct, legend = FALSE) |> 
+      e_title("Contract Type") |> 
+      e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
+      e_flip_coords() %>% 
+      e_dims(height = 200) |> 
+      e_grid(left = "45%", top = "12.5%", bottom = "25%", right = "10%") %>% 
+      e_tooltip(
+        formatter = htmlwidgets::JS("function(params){
+                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
+                                                     }")
+      )
+    } else {
+      outpred() |> 
+        filter(customer_id == input$customer) %>%
+        count(contract) %>% 
+        mutate(pct = round(n/sum(n), 4)) |> 
+        arrange(n) %>% 
+        e_charts(contract) |> 
+        e_bar(pct, legend = FALSE) |> 
+        e_title("Contract Type") |> 
+        e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
+        e_flip_coords() %>% 
+        e_dims(height = 200) |> 
+        e_grid(left = "45%", top = "12.5%", bottom = "25%", right = "10%") %>% 
+        e_tooltip(
+          formatter = htmlwidgets::JS("function(params){
+                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
+                                                     }")
         )
-      }
+    }
+  })
+  
+  output$pred_internet_type <- renderEcharts4r({
+    if(input$customer == "---All Customers---"){
+      outpred() |> 
+      count(internet_type) |>  
+      mutate(pct = round(n/sum(n), 4)) |> 
+      arrange(n) %>% 
+      e_charts(internet_type) |> 
+      e_bar(pct, legend = FALSE) |> 
+      e_title("Internet Service Type") |> 
+      e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
+      e_flip_coords() %>% 
+      e_dims(width = 600, height = 285) |> 
+      e_grid(left = "15%", top = "12.5%", bottom = "20%", right = "15%") %>% 
+      e_tooltip(
+        formatter = htmlwidgets::JS("function(params){
+                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
+                                                     }")
+      )
+    } else {
+      outpred() |> 
+        filter(customer_id == input$customer) %>%
+        count(internet_type) |>  
+        mutate(pct = round(n/sum(n), 4)) |> 
+        arrange(n) %>% 
+        e_charts(internet_type) |> 
+        e_bar(pct, legend = FALSE) |> 
+        e_title("Internet Service Type") |> 
+        e_y_axis(formatter = e_axis_formatter(style = "percent")) %>% 
+        e_flip_coords() %>% 
+        e_dims(width = 600, height = 285) |> 
+        e_grid(left = "15%", top = "12.5%", bottom = "20%", right = "15%") %>% 
+        e_tooltip(
+          formatter = htmlwidgets::JS("function(params){
+                                                     return(params.name + ': ' + Math.round(params.value[0]*10000)/100 + '%')
+                                                     }")
+        )
+    }
+  })
 
-      p
-    },
-    res = 100
-  )
-}
+  observe({
+    if(input$customer == "---All Customers---"){
+      shinyWidgets::updateProgressBar(session = session, id = "pred_pb1", value = round(sum(outpred()$premium_tech_support == "Yes")/nrow(outpred())*100, 2), title = "Premium Tech Support")
+    shinyWidgets::updateProgressBar(session = session, id = "pred_pb2", value = round(sum(outpred()$phone_service == "Yes")/nrow(outpred())*100, 2), title = "Phone Service")
+    shinyWidgets::updateProgressBar(session = session, id = "pred_pb3", value = round(sum(outpred()$multiple_lines == "Yes")/nrow(outpred())*100, 2), title = "Multiple Lines")
+    shinyWidgets::updateProgressBar(session = session, id = "pred_pb4", value = round(sum(outpred()$online_security == "Yes")/nrow(outpred())*100, 2), title = "Online Security")
+    shinyWidgets::updateProgressBar(session = session, id = "pred_pb5", value = round(sum(outpred()$online_backup == "Yes")/nrow(outpred())*100, 2), title = "Online Backup")
+    shinyWidgets::updateProgressBar(session = session, id = "pred_pb6", value = round(sum(outpred()$device_protection_plan == "Yes")/nrow(outpred())*100, 2), title = "Device Protection Plan")
+    shinyWidgets::updateProgressBar(session = session, id = "pred_pb7", value = round(sum(outpred()$streaming_tv == "Yes")/nrow(outpred())*100, 2), title = "Streaming TV")
+    shinyWidgets::updateProgressBar(session = session, id = "pred_pb8", value = round(sum(outpred()$streaming_music == "Yes")/nrow(outpred())*100, 2), title = "Streaming Music")
+    shinyWidgets::updateProgressBar(session = session, id = "pred_pb9", value = round(sum(outpred()$streaming_movies == "Yes")/nrow(outpred())*100, 2), title = "Streaming Movies")
+    shinyWidgets::updateProgressBar(session = session, id = "pred_pb10", value = round(sum(outpred()$unlimited_data == "Yes")/nrow(outpred())*100, 2), title = "Unlimited Data")
+    } else {
+      cust_data <- outpred() %>% 
+        filter(customer_id == input$customer)
+      
+      shinyWidgets::updateProgressBar(session = session, id = "pred_pb1", value = (cust_data$premium_tech_support == "Yes")*100, title = "Premium Tech Support")
+      shinyWidgets::updateProgressBar(session = session, id = "pred_pb2", value = (cust_data$phone_service == "Yes")*100, title = "Phone Service")
+      shinyWidgets::updateProgressBar(session = session, id = "pred_pb3", value = (cust_data$multiple_lines == "Yes")*100, title = "Multiple Lines")
+      shinyWidgets::updateProgressBar(session = session, id = "pred_pb4", value = (cust_data$online_security == "Yes")*100, title = "Online Security")
+      shinyWidgets::updateProgressBar(session = session, id = "pred_pb5", value = (cust_data$online_backup == "Yes")*100, title = "Online Backup")
+      shinyWidgets::updateProgressBar(session = session, id = "pred_pb6", value = (cust_data$device_protection_plan == "Yes")*100, title = "Device Protection Plan")
+      shinyWidgets::updateProgressBar(session = session, id = "pred_pb7", value = (cust_data$streaming_tv == "Yes")*100, title = "Streaming TV")
+      shinyWidgets::updateProgressBar(session = session, id = "pred_pb8", value = (cust_data$streaming_music == "Yes")*100, title = "Streaming Music")
+      shinyWidgets::updateProgressBar(session = session, id = "pred_pb9", value = (cust_data$streaming_movies == "Yes")*100, title = "Streaming Movies")
+      shinyWidgets::updateProgressBar(session = session, id = "pred_pb10", value = (cust_data$unlimited_data == "Yes")*100, title = "Unlimited Data")
+    }
+  })
+  }
 
 shinyApp(ui, server)