Twitter Followers • reactable

library(reactable)
library(htmltools)

data <- read.csv("twitter_followers.csv", stringsAsFactors = FALSE)

tbl <- reactable(
  data,
  pagination = FALSE,
  defaultSorted = "exclusive_followers_pct",
  defaultColDef = colDef(headerClass = "header", align = "left"),
  columns = list(
    account = colDef(
      cell = function(value) {
        url <- paste0("https://twitter.com/", value)
        tags$a(href = url, target = "_blank", paste0("@", value))
      },
      width = 150
    ),
    followers = colDef(
      defaultSortOrder = "desc",
      cell = function(value) {
        width <- paste0(value * 100 / max(data$followers), "%")
        value <- format(value, big.mark = ",")
        value <- format(value, width = 9, justify = "right")
        bar <- div(
          class = "bar-chart",
          style = list(marginRight = "0.375rem"),
          div(class = "bar", style = list(width = width, backgroundColor = "#3fc1c9"))
        )
        div(class = "bar-cell", span(class = "number", value), bar)
      }
    ),
    exclusive_followers_pct = colDef(
      name = "Exclusive Followers",
      defaultSortOrder = "desc",
      cell = JS('function(cellInfo) {
        // Format as percentage
        const pct = (cellInfo.value * 100).toFixed(1) + "%"
        // Pad single-digit numbers
        let value = pct.padStart(5)
        // Show % on first row only
        if (cellInfo.viewIndex > 0) {
          value = value.replace("%", " ")
        }
        // Render bar chart
        return `
          <div class="bar-cell">
            <span class="number">${value}</span>
            <div class="bar-chart" style="background-color: #e1e1e1">
              <div class="bar" style="width: ${pct}; background-color: #fc5185"></div>
            </div>
          </div>
        `
      }'),
      html = TRUE
    )
  ),
  compact = TRUE,
  class = "followers-tbl"
)

div(class = "twitter-followers",
  div(class = "followers-header",
    h2(class = "followers-title", "Candidates whose followers are loyal only to them"),
    "Share of each 2020 candidate's followers who don't follow any other candidates"
  ),
  tbl
)

htmltools::tags$link(href = "https://fonts.googleapis.com/css?family=Karla:400,700|Fira+Mono&display=fallback", rel = "stylesheet")

.twitter-followers {
  margin: 0 auto;
  width: 575px;
  font-family: Karla, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.followers-header {
  margin: 1.125rem 0;
  font-size: 1rem;
}

.followers-title {
  font-size: 1.25rem;
  font-weight: 600;
}

.followers-tbl {
  font-size: 0.875rem;
  line-height: 1.125rem;
}

.followers-tbl a {
  color: inherit;
  text-decoration: none;
}

.followers-tbl a:hover,
.followers-tbl a:focus {
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.0625rem);
}

.header {
  border-bottom: 2px solid #555;
  font-size: 0.8125rem;
  font-weight: 400;
  text-transform: uppercase;
}

.header:hover {
  background-color: #eee;
}

.bar-cell {
  display: flex;
  align-items: center;
}

.number {
  font-family: "Fira Mono", Consolas, Monaco, monospace;
  font-size: 0.84375rem;
  white-space: pre;
}

.bar-chart {
  flex-grow: 1;
  margin-left: 0.375rem;
  height: 0.875rem;
}

.bar {
  height: 100%;
}