themes.Rmd

---
title: Themes
author: Joshua Kunst
date: "`r Sys.Date()`"
output: rmarkdown::html_vignette
description: >
  Highcharts is very flexible for create or themes.
  In Highcarter there are some predefined themes and some 
  functions to create your own or merge themes.
editor_options: 
  chunk_output_type: console
vignette: >
  %\VignetteIndexEntry{Themes}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}   
---

<script>
$(document).ready(function(){ 
  el = $(".page-header > h1")
  icon = "paint-brush"
  text = el.text()
  text_new = "<span class=\"fa fa-" + icon  + "\"></span> " + text
  el.html(text_new) 
}) ;
</script>

```{r, include=FALSE}
library(highcharter)
library(dplyr)
library(purrr)
library(stringr)
library(htmltools)
library(ggplot2)
```

Highcharts is very flexible for create or themes.
In Highcarter there are some predefined themes and some 
functions to create your own or merge themes.

Let's start with a simple bar chart and see the default theme:

```{r}
library(highcharter)
library(dplyr)

data(diamonds, package = "ggplot2")

data <- count(diamonds, cut, color)

hc <- hchart(data, "column", hcaes(x = color, y = n, group = cut)) |>
  hc_yAxis(title = list(text = "Cases")) |>
  hc_title(text = "Diamonds Are Forever") |>
  hc_subtitle(text = "Source: Diamonds data set") |>
  hc_credits(enabled = TRUE, text = "http://jkunst.com/highcharter/") |>
  hc_tooltip(sort = TRUE, table = TRUE) |> 
  hc_caption(text = "This is a caption text to show the style of this type of text")

hc
```


## Themes

Here you'll find the themes to change the look of your charts.

```{r, echo=FALSE, results='asis'}
themes <- help.search("theme", package = "highcharter")$matches
themes <- themes |> 
  tibble::as_tibble() |>
  janitor::clean_names() |>
  select(name, title) |>
  distinct() |>
  filter(str_detect(name, "hc_theme_*")) |>
  filter(!name %in% c("hc_theme_merge", "hc_theme")) |>
  mutate(title = str_replace(title, " theme for highcharts", "")) |>
  arrange(name) |> 
  pull(name)

themes <- str_subset(themes, "spark", negate = TRUE)

themes <- unique(c("hc_theme_smpl", "hc_theme_db", themes))
# thms <- sample(thms, 5)

# generate tabs
themes |>
  map(function(t) { # t <- sample(themes, 1)
    
    thm <- get(t)()

    content <- list(hc) |>
      map(hc_add_theme, thm) |> 
      dplyr::first()

    tagList(
      tags$h3(stringr::str_remove(t, "hc_theme_")),
      content
    )
    
  }) |> 
  htmltools::as.tags()
```

## Creating themes

You can create your own themes!

```{r}
my_own_theme <- hc_theme(
  colors = c("red", "green", "blue"),
  chart = list(
    backgroundColor = NULL,
    divBackgroundImage = "http://media3.giphy.com/media/FzxkWdiYp5YFW/giphy.gif"
  ),
  title = list(
    style = list(
      color = "#333333",
      fontFamily = "Lato"
    )
  ),
  subtitle = list(
    style = list(
      color = "#666666",
      fontFamily = "Shadows Into Light"
    )
  ),
  legend = list(
    itemStyle = list(
      fontFamily = "Tangerine",
      color = "black"
    ),
    itemHoverStyle = list(
      color = "gray"
    )
  )
)

hc |>
  hc_add_theme(my_own_theme)
```

## Merge Themes

You can merge themes too.

```{r}
thm <- hc_theme_merge(
  hc_theme_darkunica(),
  hc_theme(
    chart = list(
      backgroundColor = "transparent",
      divBackgroundImage = "http://www.wired.com/images_blogs/underwire/2013/02/xwing-bg.gif"
    ),
    title = list(
      style = list(
        color = "white",
        fontFamily = "Griffy",
        fontSize = "25px"
      )
    )
  )
)

hc |>
  hc_add_theme(thm)
```