diff --git a/eoa/global.R b/eoa/global.R index 0b8bd9d..d84ce13 100644 --- a/eoa/global.R +++ b/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) diff --git a/eoa/ui.R b/eoa/ui.R index c4b6470..060b863 100644 --- a/eoa/ui.R +++ b/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") ) ) - ), + ) diff --git a/eoa/www/styles.css b/eoa/www/styles.css index eea934a..ca889c8 100644 --- a/eoa/www/styles.css +++ b/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; +}