tidytuesday-2022-week-29.qmd

---
title: "Tidytuesday - Week 29"
format: 
    html
---
    
## Libraries

```{r libraries}
library(tidyverse)
library(reactable)
library(reactablefmtr)
library(countrycode)
library(htmlwidgets)
library(htmltools)
```

## Load data

```{r load-data}
tuesdata <- tidytuesdayR::tt_load(x = 2022, week = 29)

technology <- tuesdata$technology
```

## Pre - processing

``` {r preprocessing}
technology_filtered <- technology |> 
    filter(
        group == "Production",
        category == "Energy"
    ) |> 
    mutate(
        value = ifelse(
            test = variable == "elec_cons",
            yes = value / 1e9,
            no = value
        ),
        is_source_energy = str_detect(
            string = label,
            pattern = "Electricity from"
        ),
        is_energy_statistic = !is_source_energy
    ) |> 
    select(
        iso3c,
        variable,
        label,
        year,
        value,
        is_source_energy,
        is_energy_statistic
    ) |> 
    inner_join(
        y = countrycode::codelist |> 
            select(continent, country_name = country.name.en, iso3c, flag = unicode.symbol),
        by = "iso3c"
    ) |> 
    glimpse()
```

```{r}
top_historical_countries_by_consumption <- technology_filtered |> 
    filter(
        is_energy_statistic,
        variable != "electric_gen_capacity"
    ) |> 
    group_by(variable, country_name) |> 
    summarize(
        value = sum(value) |> 
            round(),
        .groups = "drop"
    ) |> 
    pivot_wider(
        id_cols = country_name,
        names_from = variable,
        values_from = value
    ) |>
    filter(elecprod > elec_cons) |> 
    slice_max(
        order_by = elec_cons,
        n = 50
    ) |> 
    rename(
        overall_consumption = elec_cons,
        overall_production = elecprod
    )
```

```{r}
countries_energy <-technology_filtered |> 
    filter(
        country_name %in% top_historical_countries_by_consumption$country_name
    ) |> 
    mutate(value = round(value)) |> 
    left_join(
        y = top_historical_countries_by_consumption,
        by = "country_name"
    )

countries_energy
```


```{r}
countries_energy_first_level <- countries_energy |> 
    filter(
        is_energy_statistic,
        variable != "electric_gen_capacity",
    ) |>
    pivot_wider(
        id_cols = c(continent, country_name, overall_consumption, overall_production, year, flag),
        names_from = variable,
        values_from = value
    ) |> 
    arrange(continent, country_name, overall_consumption, overall_production, flag, year) |> 
    group_by(continent, country_name, overall_consumption, overall_production, flag) |> 
    summarize(
        year = list(year),
        consumption = list(elec_cons),
        production = list(elecprod),
        .groups = "drop"
    ) |> 
    arrange(desc(overall_consumption)) |> 
    mutate(
        country_name = paste(flag, country_name)
    ) |> 
    select(-year, - flag) |> 
    identity()

countries_energy_first_level
```

```{r}
non_renewable_color <- "#BB86FC" # "#FF2167"
renewable_color <- "#19ffb6"

subtable_energy <- countries_energy |>
    mutate(country_name = paste(flag, country_name)) |> 
    filter(is_source_energy) |> 
    mutate(
        label = label |> 
            str_remove("Electricity from ") |> 
            str_remove(" \\(TWH\\)") |> 
            str_to_title()
    ) |> 
    arrange(country_name, label, year) |> 
    group_by(country_name, label) |>
    summarize(
        overall_production = sum(value),
        value_trend = list(value),
        .groups = "drop"
    ) |> 
    mutate(
        label_color = case_when(
            label %in% c("Coal", "Gas", "Nuclear", "Oil") ~ non_renewable_color,
            TRUE ~ renewable_color
        )
    ) |> 
    glimpse() |> 
    identity()
```
```{r}
subtable_energy$label |> unique()
```

```{r}
background_color <- "#121212"
border_color <- "#3D3D3D"
text_color <- "white"
font_family <- "Atkinson Hyperlegible"

production_color <- "#4DA1A9"
consumption_color <- "#ffa630"

reactable_theme <- reactableTheme(
    style = list(fontFamily = font_family),
    searchInputStyle = list(background = background_color),
    pageButtonStyle = list(fontSize = 14),
    backgroundColor = background_color,
    color = text_color,
    footerStyle = list(color = text_color, fontSize = 11),
    borderColor = border_color,
    borderWidth = 0.019
)
```

``` {r}
#| column: screen
table <- countries_energy_first_level |> 
    select(
          country_name,
          continent,
          overall_production,
          overall_consumption,
          production,
          consumption,
          everything()
    ) |> 
    arrange(desc(overall_production)) |> 
    reactable(
        theme = reactable_theme,
        # defaultColDef = colDef(
        #     vAlign="center",
        #     align="center",
        #     headerVAlign="center"
        # ),
        columns = list(
            country_name = colDef(
                name = "Country"
            ),
            continent = colDef(
                name = "Contient",
                width = 100
                maxWidth = 130
            ),
            overall_consumption = colDef(
                name = "Overall consumption",
                cell = data_bars(
                    data = select(countries_energy_first_level, overall_consumption),
                    round_edges = TRUE,
                    text_position = "above",
                    fill_color = consumption_color,
                    bar_height = 12,
                    text_color = "white",
                    number_fmt = scales::label_number(big.mark = ",")
                )
            ),
            overall_production = colDef(
                name = "Overall production",
                cell = data_bars(
                    data = select(countries_energy_first_level, overall_production),
                    round_edges = TRUE,
                    text_position = "above",
                    fill_color = production_color,
                    bar_height = 12,
                    text_color = "white",
                    number_fmt = scales::label_number(big.mark = ",")
                )
            ),
            consumption = colDef(
                name = "Consumption trend",
                cell = react_sparkline(
                    data = select(countries_energy_first_level, consumption),
                    line_color = consumption_color,
                    show_area = TRUE
                )
            ),
            production = colDef(
                name = "Production trend",
                cell = react_sparkline(
                    data = select(countries_energy_first_level, production),
                    line_color = production_color,
                    show_area = TRUE
                )
            )
        ),
        showSortable = TRUE,
        showSortIcon = TRUE,
        defaultExpanded = FALSE,
        pageSizeOptions = 5,
        details = function(index) {
            
            current_country <- countries_energy_first_level$country_name[index]
            sub_data <- subtable_energy[subtable_energy$country_name == current_country, ] |> 
                    arrange(desc(overall_production))
            
            
            reactable(
                data = sub_data,
                theme = reactable_theme,
                # defaultColDef = colDef(
                #     vAlign="center",
                #     align="center",
                #     headerVAlign="center"
                # ),
                columns = list(
                    country_name = colDef(show = FALSE),
                    label = colDef(
                        name = "Technology used",
                        vAlign="center",
                        align="right",
                        headerVAlign="center",
                        cell = pill_buttons(
                          data = sub_data,
                          color_ref = "label_color"
                        )
                    ),
                    overall_production = colDef(
                        name = "Overall production",
                        cell = data_bars(
                            data = sub_data,
                            round_edges = TRUE,
                            background = "transparent",
                            text_position = "outside-end",
                            text_color = text_color,
                            fill_gradient = FALSE,
                            fill_color_ref = "label_color",
                            number_fmt = scales::label_number(big.mark = ","),
                            bar_height = 10
                        )
                    ),
                    value_trend = colDef(
                        name = "Production trend",
                        cell = react_sparkbar(
                            data = sub_data,
                            fill_color_ref = "label_color"
                        )
                    ),
                    label_color = colDef(
                        show = FALSE
                    )
                ),
                showSortable = TRUE,
                showSortIcon = TRUE
            )
        },
        filterable = FALSE,
        searchable = TRUE
    ) |> 
    google_font(
        font_family = font_family
    )

html_object<-table |>
prependContent(
  tagList(
    div(style = "vertical-align:middle;text-align:center;background-color:#121212;color:white;padding-top:25px;padding-bottom:4px;font-size:24px;",
        "TECHNOLOGY ADOPTION IN THE WORLD'S ENERGY PRODUCTION"),
    div(
        style = "vertical-align:middle;text-align:center;background-color:#121212;color:#BBBBBB;padding-top:5px;padding-bottom:5px;font-size:20px;",
        "Is your country ",
        span(style="color: #4DA1A9", "producing"),
        " more",
        span(style = "color: #19ffb6","renewable energy"),
        "than ",
        span(style = "color: #BB86FC", "non-renewable energy"),
        "?"
    ),
    div(
        style = "vertical-align:middle;text-align:center;background-color:#121212;color:#BBBBBB;padding-top:5px;padding-bottom:20px;font-size:16px;",
        "Data shown on Terawatt-hour (TWh)",
    ),
    div(
        style = "vertical-align:middle;text-align:center;background-color:#121212;color:#BBBBBB;padding-top:5px;padding-bottom:15px;font-size:14px;",
        "Source: data.nber.org | Table: @jvelezmagic"
    )
  )
)

html_object
```
```{r}
#| echo: false
saveWidget(html_object, "tidytuesday-2022-week-29.html", selfcontained = TRUE)
```