https://github.com/sccmckenzie/reactable-timeline
Easy way to embed graphical timeline in a reactable.
https://github.com/sccmckenzie/reactable-timeline
Last synced: 3 months ago
JSON representation
Easy way to embed graphical timeline in a reactable.
- Host: GitHub
- URL: https://github.com/sccmckenzie/reactable-timeline
- Owner: sccmckenzie
- Created: 2020-11-23T01:36:02.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-03-24T16:20:31.000Z (about 4 years ago)
- Last Synced: 2023-12-04T16:55:19.451Z (over 1 year ago)
- Language: R
- Homepage:
- Size: 361 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.Rmd
Awesome Lists containing this project
- jimsghstars - sccmckenzie/reactable-timeline - Easy way to embed graphical timeline in a reactable. (R)
README
---
output: github_document
---```{r, include = FALSE}
knitr::opts_chunk$set(
collapse = TRUE,
comment = "#>",
message = FALSE,
warning = FALSE
)
```Below is a quick way to seamlessly integrate a graphical timeline into a reactable. Works with `POSIXct` and `hms`.
## Copy below code.
```{r message = FALSE}
library(tidyverse)
library(lubridate) # needed for time_length()
library(htmltools) # needed for div()convert_timestamps <- function(t1, t2) {
# extract timestamp range
t01 <- min(t1)
t02 <- max(t2)# normalize event timestamps within total range
left <- time_length(t1 - t01)/time_length(t02 - t01)
width <- time_length(t2 - t1)/time_length(t02 - t01)# splice values into list
out <- list()for (i in 1:length(left)) {
out[[i]] <- list(left[i], width[i])
}out
}create_timeline_bar <- function(left = 0, width = "100%", fill = "#00bfc4") {
left <- scales::percent(left)
width <- scales::percent(width)bar <- div(style = list(
position = "absolute",
left = left,
background = fill,
width = width,
height = "140%")
)chart <- div(style = list(
flexGrow = 1,
position = "relative",
display = "flex",
alignItems = "center",
height = "100%"
),
bar)div(style = list(
height = "100%"
),
chart)
}
```## Usage Example
For more details, see my [blog post](https://sccm.io/post/reactable-timeline/).
```{r, results='hide'}
library(reactable)sales <- read_csv("https://raw.githubusercontent.com/sccmckenzie/reactable-timeline/master/sales.csv")
sales %>%
mutate(timeline = convert_timestamps(enter, exit)) %>%
reactable(columns = list(
timeline = colDef(
cell = function(value) {
create_timeline_bar(left = value[[1]], width = value[[2]])
}
)
)
)
```