---
title: "Crosstalk test with fake IP address data"
author: "Matt Dray"
output:
  flexdashboard::flex_dashboard:
    theme: cerulean
    source_code: embed
    favicon: img/map.png
---

```{r setup, include=FALSE}
# packages

# library(devtools)
# install_github("rstudio/crosstalk")
# install_github("rstudio/DT")
library(crosstalk)
library(dplyr)
library(leaflet)
library(DT)

# data

set.seed(1337)

fake_ip_geo <- readRDS("data/fake_ip_geo.RDS") %>% 
  dplyr::select(
    -country_code,
    -region_code,
    -time_zone,
    -metro_code
  ) %>% 
  dplyr::mutate(
    group = sample(  # randomly allocate to one of three groups
      c("Group A", "Group B", "Group C"),
      size = 500,
      replace = TRUE
    ),
    device = sample(  # randomly allocate to one of three groups
      c("Phone", "Laptop", "Desktop"),
      size = 500,
      replace = TRUE
    ),
    latitude = as.numeric(as.character(latitude)),  # must be numeric
    longitude = as.numeric(as.character(longitude))
  ) %>% 
  dplyr::group_by(longitude, latitude) %>% 
  dplyr::slice(1) %>%  # just get one example of each latlong pair
  dplyr::ungroup()

# make factors into character for use in popups

fake_ip_geo_char <- fake_ip_geo %>% 
  dplyr::mutate_if(is.factor, as.character)

# shared data object

sd <- SharedData$new(fake_ip_geo)
```


Column {data-width=600}
-------------------------------------
    
### Geolocated IP addresses
    
```{r map}
set.seed(1337)

leaflet::leaflet(sd) %>%
  leaflet::addProviderTiles(providers$OpenStreetMap) %>% 
  leaflet::addAwesomeMarkers(
    popup = ~paste0(
    "IP: ", fake_ip_geo$ip, "",
    "
",
    "
Group: ", fake_ip_geo_char$group,
    "
Device: ", fake_ip_geo_char$device,
    "
",
    "
Country: ", ifelse(fake_ip_geo_char$country_name == "", "unknown", fake_ip_geo_char$country_name),
    "
Region: ", ifelse(fake_ip_geo_char$region_name == "", "unknown", fake_ip_geo_char$region_name),
    "
City: ", ifelse(fake_ip_geo_char$city == "", "unknown", fake_ip_geo_char$city)
    ),
    icon = awesomeIcons(
      library = "ion",
      icon = ifelse(
        test = fake_ip_geo_char$device == "Phone", 
        yes = "ion-android-phone-portrait",
        no = ifelse(
          test = fake_ip_geo_char$device == "Laptop", 
          yes = "ion-android-laptop",
          no = "ion-android-desktop"
        )
      ),
      iconColor = "white",
      markerColor = ifelse(
        test = fake_ip_geo_char$group == "Group A", 
        yes = "lightred",
        no = ifelse(
          test = fake_ip_geo_char$group == "Group B", 
          yes = "red",
          no = "darkred"
        )
      )
    )
  )
```
    
Column {data-width=400}
-------------------------------------

### Filter/About

#### Filters

```{r filters}
crosstalk::bscols(
  list(
    filter_checkbox(
      id = "group",
      label = "Groups",
      sharedData = sd,
      group = ~group,
      inline = TRUE
    ),
    filter_checkbox(
      id = "device",
      label = "Devices",
      sharedData = sd,
      group = ~device,
      inline = TRUE
    ),
    filter_select(
      id = "country_name",
      label = "Countries",
      sharedData = sd,
      group = ~country_name
    ),
    filter_slider(
      id = "latitude",
      label = "Latitude",
      sharedData = sd,
      column = ~latitude,
      step = 5,
      width = 300,
      round = TRUE,
      sep = "",
      ticks = FALSE
    )
  )
)
```

#### How to

* Zoom with the + and - buttons on the map (upper left), or with your mouse wheel
* Click markers to get information about that point
* Filter the data using the options above and the map (left) and datatable (below) will auto-update to reflect the selections
* You can select multiple points from the map with the resizable selection tool (button in upper right below the zoom buttons)
* You can also click rows of the datatable (below) to highlight those individual points

#### About

This is a test of:

* mapping ([leaflet](https://rstudio.github.io/leaflet/)) geolocation ([freegeoip](https://github.com/luiscape/freegeoip)) of artificially-generated IP addresses ([generator](https://github.com/paulhendricks/generator)) with arbitrarily-assigned colours and icons ([ionicons](http://ionicons.com/))
* wrapping this into a user-friendly interface ([flexdashboard](https://rmarkdown.rstudio.com/flexdashboard/)) and including a table ([DT](https://rstudio.github.io/DT/))
* allowing data selections to impact across both the map and table ([crosstalk](https://rstudio.github.io/crosstalk/))

*Note that none of these data are real. They've been randomly generated.*

#### Inspiration

Ideas and code via the [Crosstalk site](https://rstudio.github.io/crosstalk/), this [video](https://www.rstudio.com/resources/videos/linking-html-widgets-with-crosstalk/) by [Joe Cheng](https://twitter.com/jcheng) at rstudio::conf 2017 and [this example](http://rstudio-pubs-static.s3.amazonaws.com/209203_02f14fea3274448bbbf8d04c99c6051b.html).

### Datatable
    
```{r}
DT::datatable(
  data = sd,
  extensions = "Scroller",
  rownames = FALSE,
  style = "bootstrap",
  #class = "compact",
  width = "100%",
  options = list(
    deferRender = TRUE,
    scrollY = 300,
    scroller = TRUE
  )
)

```