From 8a3bf8d6e87b38ba2f81fc8e64e2bda4278eeeeb Mon Sep 17 00:00:00 2001
From: pvictor <perrier.victor@gmail.com>
Date: Wed, 4 Mar 2020 16:52:37 +0100
Subject: [PATCH] brush chart example

---
 NAMESPACE                 |  1 +
 R/format.R                | 23 ++++++++++++++++
 man/format_date.Rd        | 17 ++++++++++++
 vignettes/sync-charts.Rmd | 57 +++++++++++++++++++++++++++++++++++----
 4 files changed, 93 insertions(+), 5 deletions(-)
 create mode 100644 man/format_date.Rd

diff --git a/NAMESPACE b/NAMESPACE
index 23d292a..e28f2a5 100644
--- a/NAMESPACE
+++ b/NAMESPACE
@@ -36,6 +36,7 @@ export(ax_yaxis2)
 export(bar_opts)
 export(config_update)
 export(events_opts)
+export(format_date)
 export(format_num)
 export(heatmap_opts)
 export(parse_df)
diff --git a/R/format.R b/R/format.R
index de6d8cf..614c82a 100644
--- a/R/format.R
+++ b/R/format.R
@@ -38,3 +38,26 @@ check_locale <- function(x) {
   }
 }
 
+
+
+
+#' Format date in JS
+#'
+#' @param x Date to use in JavaScript
+#'
+#' @return a JavaScript string
+#' @export
+#'
+format_date <- function(x) {
+  stopifnot(length(x) == 1)
+  JS(sprintf("new Date('%s').getTime()", x))
+}
+
+
+
+
+
+
+
+
+
diff --git a/man/format_date.Rd b/man/format_date.Rd
new file mode 100644
index 0000000..abe4286
--- /dev/null
+++ b/man/format_date.Rd
@@ -0,0 +1,17 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/format.R
+\name{format_date}
+\alias{format_date}
+\title{Format date in JS}
+\usage{
+format_date(x)
+}
+\arguments{
+\item{x}{Date to use in JavaScript}
+}
+\value{
+a JavaScript string
+}
+\description{
+Format date in JS
+}
diff --git a/vignettes/sync-charts.Rmd b/vignettes/sync-charts.Rmd
index a44bab6..a0cf11b 100644
--- a/vignettes/sync-charts.Rmd
+++ b/vignettes/sync-charts.Rmd
@@ -17,19 +17,19 @@ knitr::opts_chunk$set(
 ```{r setup}
 library(apexcharter)
 data("economics", package = "ggplot2")
-economics <- tail(economics, 150)
 ```
 
 
+## Sync charts
+
 With [Apexcharts](https://apexcharts.com) you can sync (tooltip, zoom) several charts together by providing a group and id to each charts. This works in Shiny and Markdown. Here a basic example :
 
 ```{r example-1, eval=FALSE}
 apex(
-  data = economics, 
+  data = tail(economics, 150), 
   mapping = aes(x = date, y = pce),
   type = "line"
 ) %>% 
-  ax_stroke(width = 2) %>% 
   ax_chart(
     group = "economics", id = "pce" # <- define common group and unique id
   ) %>% 
@@ -40,11 +40,10 @@ apex(
   )
 
 apex(
-  data = economics, 
+  data = tail(economics, 150), 
   mapping = aes(x = date, y = psavert),
   type = "line"
 ) %>% 
-  ax_stroke(width = 2) %>% 
   ax_chart(
     group = "economics", id = "psavert" # <- define common group and unique id
   ) %>% 
@@ -59,3 +58,51 @@ apex(
 ```{r run-example-1, echo=FALSE, ref.label="example-1"}
 
 ```
+
+
+
+## Brush chart
+
+Create a brush chart to navigate into a synced chart.
+
+```{r example-2, eval=FALSE}
+apex(
+  data = economics, 
+  mapping = aes(x = date, y = psavert),
+  type = "line"
+) %>% 
+  ax_chart(
+    id = "target-chart",
+    toolbar = list(
+      autoSelected = "pan",
+      show = FALSE
+    )
+  )
+
+apex(
+  data = economics, 
+  mapping = aes(x = date, y = psavert),
+  type = "line", 
+  height = "130px"
+) %>% 
+  ax_chart(
+    brush = list(
+      target = "target-chart",
+      enabled = TRUE
+    ),
+    selection = list(
+      enabled = TRUE,
+      xaxis = list(
+        min = format_date(economics$date[1]),
+        max = format_date(economics$date[100])
+      )
+    )
+  ) %>% 
+  ax_xaxis(labels = list(show = FALSE)) %>% 
+  ax_yaxis(labels = list(show = FALSE))
+```
+
+
+```{r run-example-2, echo=FALSE, ref.label="example-2"}
+
+```
\ No newline at end of file