css still wonky - todo:

fix css
reactable table
fill in top stats on left
show where EOA is on the activity chart
 - Logarithmic Scale
Make it more braggable - Top 1% EOA

download "badge" as div-image (or copy to clipboard paste twitter?)
https://cran.r-project.org/web/packages/rclipboard/readme/README.html

Goal: build shroomDK buzz

eoa/global.R

@@ -52,24 +52,37 @@ get_eoa_activity <- function(eoa_address, api_key = api_key, ttl = 0){
     })
           }
 
-plot_eoa <- function(eoadh = eoa_daily_history, range = 1:21){
-  
-  eoa_plot <- ggplot(eoadh[range, ], 
-                     aes(x = UNIQUE_DAYS, y = EOA_FREQ/1e6,
-                         text = paste0(
-                           "Days Active: ", UNIQUE_DAYS,
-                           "\nEOAs: ", 
-                           scales::label_comma(accuracy = 1)(EOA_FREQ))
-                     )) + 
-    geom_bar(stat = 'identity') + 
-    theme_classic() + 
-    xlab("Days Active") + ylab("# EOAs (Millions)") 
-  
-  eoa_plotly <- ggplotly(eoa_plot, tooltip = "text") %>% 
-    layout(xaxis = list(range = c(0, 20)),
-           title = list(
-             text = "Vast Majority of Ethereum Addresses Rarely Active",
-             y = 0.95)
+plot_eoa <- function(eoadh = eoa_daily_history, range = 1:200){
+
+  eoa_plotly <- plot_ly(data = eoadh[range, ], type = 'bar',
+                        x = ~UNIQUE_DAYS,
+                        y = ~EOA_FREQ/1e6,
+                        text = ~paste0(
+                          "Days Active: ", UNIQUE_DAYS,
+                          "\nEOAs: ", 
+                          scales::label_comma(accuracy = 1)(EOA_FREQ))
+  ) %>% 
+    layout(title = "",
+           yaxis = list(title = "# EOAs (Millions)", 
+                        showgrid = FALSE,
+                        color = "#FFF"), 
+           xaxis = list(title = "Days Active",
+                        showticklabels = TRUE,
+                        color = "#FFF",
+                        gridcolor = "#202933"),
+           plot_bgcolor = "transparent", 
+           paper_bgcolor = "transparent",
+           legend = list(font = list(color = '#FFFFFF'))) %>%
+    # variety of useful config options to be aware of
+    # https://plotly.com/r/configuration-options/
+    config(scrollZoom = FALSE,
+           # displayModeBar = TRUE, # default is hover
+           toImageButtonOptions = list(format= 'svg', # one of png, svg, jpeg, webp
+                                       filename= 'template_image',
+                                       height= 500,
+                                       width= 700,
+                                       scale= 1),
+           displaylogo = FALSE
     )
   
   return(eoa_plotly)

eoa/ui.R

@@ -52,15 +52,17 @@ shinyUI(fluidPage(
     }),
     
     # APP START HERE -----------------------------------  
-    
-    div(class = 'header',
-        fluidRow(class = 'eoa-bar',
-                 column(11,
+    div( # re-using chart classes to make smoother outlining
+      class = 'chart-container',
+      div(
+        class = 'chart-block',
+        fluidRow(
+                 column(10, class = 'eoa-bar',
                         textInput(inputId = "address", label = "",
                                   placeholder = "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
                                   width = '100%')
                  ),
-                 column(1, class = 'eoa-btn',
+                 column(2, class = 'eoa-btn',
                         actionButton("submit", label = "Search")
                  )
         ),
@@ -69,7 +71,7 @@ shinyUI(fluidPage(
                              dataTableOutput("compare")
                          )
         )
-    ),
+    )),
     
     div(
       class = 'chart-container',
@@ -81,7 +83,7 @@ shinyUI(fluidPage(
           plotlyOutput("main_plot")
         )
       )
-    ),
+    )
   
 
   

eoa/www/styles.css

@@ -1,54 +1,3 @@
-/*
-
-// check this plotly
-.plotly {
-  font-family: Roboto Mono !important;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 14px;
-  line-height: 150%;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  color: #919EAB !important;
-}
-
-Study up on Reactable Table
-.rt-page-button-current  {
-  color: #FFF;
-}
-.rt-thead {
-  background-color: #10151A;
-  color: #FFFFFF;
-}
-
-.ReactTable {
-  background-color: #171e25;
-  color: #C4CDD5;
-  border: none;
-}
-
-.rt-th {
-  border: 0px solid #000000 !important;
-  padding-top: 15px;
-  padding-bottom: 15px;
-  font-weight: 400;
-  font-family: Inter;
-}
-.rt-tr {
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-.rt-pagination {
-  margin: 0;
-  background: #171e25;
-  opacity: 0.5;
-  border-bottom: 1px solid #C4CDD5;
-  border-top: 1px solid #C4CDD5;
-}
-*/
-
-
 
 /*******************/
 /*PUT CUSTOM CLASSES HERE*/
@@ -58,11 +7,14 @@ Study up on Reactable Table
  text-align: center;
   margin: 0% 5%; 
 }
-
 .eoa-btn { 
   margin-top: 30px;
 }
 
+.thead {
+  color: #FFFFFF;
+}
+
 
 
 /*******************/
@@ -185,6 +137,13 @@ hr {
 /*****************/
 /*     GENERAL Forms     */
 /*****************/
+
+/* helps with dropdown menu conflicts w/ body */
+
+.dropdown-menu {
+    background-color: #333;
+}
+
 .form-group {
   padding: 10px 10px 0;
   margin: none !important;
@@ -247,3 +206,40 @@ input[type=number] {
   padding: 10px 0;;
 }
 
+
+/******************/
+/*    REACTABLE Tables    */
+/******************/
+
+.rt-page-button-current  {
+  color: #FFF;
+}
+.rt-thead {
+  background-color: #10151A;
+    color: #FFFFFF;
+}
+
+.ReactTable {
+  background-color: #171e25;
+    color: #C4CDD5;
+    border: none;
+}
+
+.rt-th {
+  border: 0px solid #000000 !important;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  font-weight: 400;
+  font-family: Inter;
+}
+.rt-tr {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+.rt-pagination {
+  margin: 0;
+  background: #171e25;
+    opacity: 0.5;
+  border-bottom: 1px solid #C4CDD5;
+  border-top: 1px solid #C4CDD5;
+}