added selection input
This commit is contained in:
parent
31ada1a177
commit
7312588c47
|
@ -45,6 +45,7 @@ export(radialBar_opts)
|
||||||
export(renderApexchart)
|
export(renderApexchart)
|
||||||
export(run_input_demo)
|
export(run_input_demo)
|
||||||
export(set_input_click)
|
export(set_input_click)
|
||||||
|
export(set_input_selection)
|
||||||
export(set_input_zoom)
|
export(set_input_zoom)
|
||||||
importFrom(ggplot2,aes)
|
importFrom(ggplot2,aes)
|
||||||
importFrom(htmlwidgets,JS)
|
importFrom(htmlwidgets,JS)
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
#' @param effect_value A larger value intensifies the select effect, accept value between 0 and 1.
|
#' @param effect_value A larger value intensifies the select effect, accept value between 0 and 1.
|
||||||
#' @param session The Shiny session.
|
#' @param session The Shiny session.
|
||||||
#'
|
#'
|
||||||
|
#' @note If x-axis is of type datetime, value retrieved is of class \code{POSIXct}.
|
||||||
#'
|
#'
|
||||||
#' @return An \code{apexcharts} \code{htmlwidget} object.
|
#' @return An \code{apexcharts} \code{htmlwidget} object.
|
||||||
#' @export
|
#' @export
|
||||||
|
@ -22,6 +23,19 @@
|
||||||
#' @importFrom shiny getDefaultReactiveDomain
|
#' @importFrom shiny getDefaultReactiveDomain
|
||||||
#'
|
#'
|
||||||
#' @examples
|
#' @examples
|
||||||
|
#'
|
||||||
|
#' library(apexcharter)
|
||||||
|
#'
|
||||||
|
#' # Not in Shiny but you can still click on bars
|
||||||
|
#' data.frame(
|
||||||
|
#' month = month.abb,
|
||||||
|
#' value = sample(1:100, 12)
|
||||||
|
#' ) %>%
|
||||||
|
#' apex(aes(month, value)) %>%
|
||||||
|
#' set_input_click("month_click", multiple = TRUE)
|
||||||
|
#'
|
||||||
|
#'
|
||||||
|
#' # Interactive examples:
|
||||||
#' if (interactive()) {
|
#' if (interactive()) {
|
||||||
#'
|
#'
|
||||||
#' run_input_demo("click")
|
#' run_input_demo("click")
|
||||||
|
@ -54,9 +68,11 @@ set_input_click <- function(ax, inputId, multiple = FALSE,
|
||||||
#' Retrieve zoom information in Shiny
|
#' Retrieve zoom information in Shiny
|
||||||
#'
|
#'
|
||||||
#' @param ax An \code{apexcharts} \code{htmlwidget} object.
|
#' @param ax An \code{apexcharts} \code{htmlwidget} object.
|
||||||
#' @param inputId The id that will be used server-side for retrieving click.
|
#' @param inputId The id that will be used server-side for retrieving zoom.
|
||||||
#' @param session The Shiny session.
|
#' @param session The Shiny session.
|
||||||
#'
|
#'
|
||||||
|
#' @note If x-axis is of type datetime, value retrieved is of class \code{POSIXct}.
|
||||||
|
#'
|
||||||
#' @return An \code{apexcharts} \code{htmlwidget} object.
|
#' @return An \code{apexcharts} \code{htmlwidget} object.
|
||||||
#' @export
|
#' @export
|
||||||
#'
|
#'
|
||||||
|
@ -79,24 +95,95 @@ set_input_zoom <- function(ax, inputId,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#' Retrieve selection information in Shiny
|
||||||
|
#'
|
||||||
|
#' @param ax An \code{apexcharts} \code{htmlwidget} object.
|
||||||
|
#' @param inputId The id that will be used server-side for retrieving selection.
|
||||||
|
#' @param type Allow selection either on x-axis, y-axis or on both axis.
|
||||||
|
#' @param fill_color Background color of the selection rect which is drawn when user drags on the chart.
|
||||||
|
#' @param fill_opacity Opacity of background color of the selection rectangle.
|
||||||
|
#' @param stroke_width Border thickness of the selection rectangle.
|
||||||
|
#' @param stroke_dasharray Creates dashes in borders of selection rectangle.
|
||||||
|
#' Higher number creates more space between dashes in the border.
|
||||||
|
#' @param stroke_color Colors of selection border.
|
||||||
|
#' @param stroke_opacity Opacity of selection border.
|
||||||
|
#' @param xmin,xmax Start value of x-axis. Both \code{min} and \code{max} must be provided.
|
||||||
|
#' @param ymin,ymax Start value of y-axis. Both \code{min} and \code{max} must be provided.
|
||||||
|
#' @param session The Shiny session.
|
||||||
|
#'
|
||||||
|
#' @return An \code{apexcharts} \code{htmlwidget} object.
|
||||||
|
#' @export
|
||||||
|
#'
|
||||||
|
#' @examples
|
||||||
|
#'
|
||||||
|
#' library(apexcharter)
|
||||||
|
#' data("economics", package = "ggplot2")
|
||||||
|
#'
|
||||||
|
#' # Not in Shiny so no events
|
||||||
|
#' # but you can still select an area on chart
|
||||||
|
#' apex(economics, aes(date, psavert), type = "line") %>%
|
||||||
|
#' set_input_selection("selection")
|
||||||
|
#'
|
||||||
|
#' # Default selection at start
|
||||||
|
#' apex(economics, aes(date, psavert), type = "line") %>%
|
||||||
|
#' set_input_selection(
|
||||||
|
#' inputId = "selection",
|
||||||
|
#' xmin = format_date("1980-01-01"),
|
||||||
|
#' xmax = format_date("1985-01-01")
|
||||||
|
#' )
|
||||||
|
set_input_selection <- function(ax, inputId, type = c("x", "xy", "y"),
|
||||||
|
fill_color = "#24292e", fill_opacity = 0.1,
|
||||||
|
stroke_width = 1, stroke_dasharray = 3,
|
||||||
|
stroke_color = "#24292e", stroke_opacity = 0.4,
|
||||||
|
xmin = NULL, xmax = NULL, ymin = NULL, ymax = NULL,
|
||||||
|
session = shiny::getDefaultReactiveDomain()) {
|
||||||
|
type <- match.arg(type)
|
||||||
|
if (is.null(session))
|
||||||
|
session <- list(ns = identity)
|
||||||
|
selection <- list(
|
||||||
|
enabled = TRUE, type = type,
|
||||||
|
fill = list(color = fill_color, opacity = fill_opacity),
|
||||||
|
stroke = list(
|
||||||
|
width = stroke_width, dashArray = stroke_dasharray,
|
||||||
|
color = stroke_color, opacity = stroke_opacity
|
||||||
|
)
|
||||||
|
)
|
||||||
|
if (!is.null(xmin) & !is.null(xmax)) {
|
||||||
|
selection$xaxis <- list(min = xmin, max = xmax)
|
||||||
|
}
|
||||||
|
if (!is.null(ymin) & !is.null(ymax)) {
|
||||||
|
selection$yaxis <- list(min = ymin, max = ymax)
|
||||||
|
}
|
||||||
|
ax <- ax_chart(
|
||||||
|
ax = ax,
|
||||||
|
selection = selection,
|
||||||
|
toolbar = list(autoSelected = "selection")
|
||||||
|
)
|
||||||
|
ax$x$shinyEvents$selection <- list(
|
||||||
|
inputId = session$ns(inputId),
|
||||||
|
type = type
|
||||||
|
)
|
||||||
|
ax
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#' Run Shiny input events examples
|
#' Run Shiny input events examples
|
||||||
#'
|
#'
|
||||||
#' @param example NAme of the example.
|
#' @param example Name of the example.
|
||||||
#'
|
#'
|
||||||
#' @export
|
#' @export
|
||||||
#'
|
#'
|
||||||
#' @examples
|
#' @examples
|
||||||
#' if (interactive()) {
|
#' if (interactive()) {
|
||||||
#'
|
#'
|
||||||
#' run_input_demo()
|
#' run_input_demo("click")
|
||||||
|
#' run_input_demo("zoom")
|
||||||
|
#' run_input_demo("selection")
|
||||||
#'
|
#'
|
||||||
#' }
|
#' }
|
||||||
run_input_demo <- function(example = c("click", "zoom")) {
|
run_input_demo <- function(example = c("click", "zoom", "selection")) {
|
||||||
example <- match.arg(example)
|
example <- match.arg(example)
|
||||||
shiny::shinyAppFile(
|
shiny::shinyAppFile(
|
||||||
appFile = system.file("examples-input", example, "app.R", package = "apexcharter"),
|
appFile = system.file("examples-input", example, "app.R", package = "apexcharter"),
|
||||||
|
|
|
@ -0,0 +1,53 @@
|
||||||
|
|
||||||
|
library(shiny)
|
||||||
|
library(apexcharter)
|
||||||
|
data("economics", package = "ggplot2")
|
||||||
|
|
||||||
|
ui <- fluidPage(
|
||||||
|
tags$h2("Retrieve selection information"),
|
||||||
|
fluidRow(
|
||||||
|
column(
|
||||||
|
width = 8,
|
||||||
|
tags$b("Datetime"),
|
||||||
|
apexchartOutput("chart1")
|
||||||
|
),
|
||||||
|
column(
|
||||||
|
width = 4,
|
||||||
|
verbatimTextOutput("result1")
|
||||||
|
)
|
||||||
|
),
|
||||||
|
fluidRow(
|
||||||
|
column(
|
||||||
|
width = 8,
|
||||||
|
tags$b("Scatter"),
|
||||||
|
apexchartOutput("chart2")
|
||||||
|
),
|
||||||
|
column(
|
||||||
|
width = 4,
|
||||||
|
verbatimTextOutput("result2")
|
||||||
|
)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
server <- function(input, output, session) {
|
||||||
|
|
||||||
|
output$chart1 <- renderApexchart({
|
||||||
|
apex(economics, aes(date, psavert), type = "line") %>%
|
||||||
|
set_input_selection("selection_ts")
|
||||||
|
})
|
||||||
|
output$result1 <- renderPrint({
|
||||||
|
input$selection_ts
|
||||||
|
})
|
||||||
|
|
||||||
|
output$chart2 <- renderApexchart({
|
||||||
|
apex(iris, aes(Sepal.Length, Sepal.Width), type = "scatter") %>%
|
||||||
|
ax_chart(zoom = list(type = "xy")) %>%
|
||||||
|
set_input_selection("selection_scatter", type = "xy")
|
||||||
|
})
|
||||||
|
output$result2 <- renderPrint({
|
||||||
|
input$selection_scatter
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
shinyApp(ui, server)
|
|
@ -7,23 +7,23 @@ ui <- fluidPage(
|
||||||
tags$h2("Retrieve zoom information"),
|
tags$h2("Retrieve zoom information"),
|
||||||
fluidRow(
|
fluidRow(
|
||||||
column(
|
column(
|
||||||
width = 6,
|
width = 8,
|
||||||
tags$b("Datetime"),
|
tags$b("Datetime"),
|
||||||
apexchartOutput("chart1")
|
apexchartOutput("chart1")
|
||||||
),
|
),
|
||||||
column(
|
column(
|
||||||
width = 6,
|
width = 4,
|
||||||
verbatimTextOutput("result1")
|
verbatimTextOutput("result1")
|
||||||
)
|
)
|
||||||
),
|
),
|
||||||
fluidRow(
|
fluidRow(
|
||||||
column(
|
column(
|
||||||
width = 6,
|
width = 8,
|
||||||
tags$b("Scatter"),
|
tags$b("Scatter"),
|
||||||
apexchartOutput("chart2")
|
apexchartOutput("chart2")
|
||||||
),
|
),
|
||||||
column(
|
column(
|
||||||
width = 6,
|
width = 4,
|
||||||
verbatimTextOutput("result2")
|
verbatimTextOutput("result2")
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
|
|
|
@ -80,6 +80,24 @@ HTMLWidgets.widget({
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
if (x.shinyEvents.hasOwnProperty("selection")) {
|
||||||
|
ax_opts.chart.events.selection = function(chartContext, xaxis, yaxis) {
|
||||||
|
console.log(xaxis);
|
||||||
|
var id = x.shinyEvents.selection.inputId;
|
||||||
|
if (is_datetime(chartContext)) {
|
||||||
|
id = id + ":apex_datetime";
|
||||||
|
}
|
||||||
|
var selectionValue;
|
||||||
|
if (x.shinyEvents.selection.type == "x") {
|
||||||
|
selectionValue = {x: xaxis.xaxis};
|
||||||
|
} else if (x.shinyEvents.selection.type == "xy") {
|
||||||
|
selectionValue = {x: xaxis.xaxis, y: xaxis.yaxis};
|
||||||
|
} else if (x.shinyEvents.selection.type == "y") {
|
||||||
|
selectionValue = {y: xaxis.yaxis};
|
||||||
|
}
|
||||||
|
Shiny.setInputValue(id, selectionValue);
|
||||||
|
};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Generate or update chart
|
// Generate or update chart
|
||||||
|
@ -200,7 +218,7 @@ function getSelection(chartContext, selectedDataPoints, serieIndex) {
|
||||||
|
|
||||||
function getYaxis(axis) {
|
function getYaxis(axis) {
|
||||||
var yzoom = { min: null, max: null };
|
var yzoom = { min: null, max: null };
|
||||||
if (typeof axis.yaxis != "undefined") {
|
if (typeof axis.yaxis != "undefined" && axis.yaxis !== null && axis.yaxis.length > 0) {
|
||||||
var y_axis = axis.yaxis[0];
|
var y_axis = axis.yaxis[0];
|
||||||
if (y_axis.hasOwnProperty("min") && typeof y_axis.min != "undefined") {
|
if (y_axis.hasOwnProperty("min") && typeof y_axis.min != "undefined") {
|
||||||
yzoom.min = y_axis.min;
|
yzoom.min = y_axis.min;
|
||||||
|
|
|
@ -4,10 +4,10 @@
|
||||||
\alias{run_input_demo}
|
\alias{run_input_demo}
|
||||||
\title{Run Shiny input events examples}
|
\title{Run Shiny input events examples}
|
||||||
\usage{
|
\usage{
|
||||||
run_input_demo(example = c("click", "zoom"))
|
run_input_demo(example = c("click", "zoom", "selection"))
|
||||||
}
|
}
|
||||||
\arguments{
|
\arguments{
|
||||||
\item{example}{NAme of the example.}
|
\item{example}{Name of the example.}
|
||||||
}
|
}
|
||||||
\description{
|
\description{
|
||||||
Run Shiny input events examples
|
Run Shiny input events examples
|
||||||
|
@ -15,7 +15,9 @@ Run Shiny input events examples
|
||||||
\examples{
|
\examples{
|
||||||
if (interactive()) {
|
if (interactive()) {
|
||||||
|
|
||||||
run_input_demo()
|
run_input_demo("click")
|
||||||
|
run_input_demo("zoom")
|
||||||
|
run_input_demo("selection")
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -39,7 +39,23 @@ with size > 0 and set tooltip's options \code{intersect = TRUE} and \code{shared
|
||||||
\item \strong{scatter:} retrieve XY coordinates.
|
\item \strong{scatter:} retrieve XY coordinates.
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
\note{
|
||||||
|
If x-axis is of type datetime, value retrieved is of class \code{POSIXct}.
|
||||||
|
}
|
||||||
\examples{
|
\examples{
|
||||||
|
|
||||||
|
library(apexcharter)
|
||||||
|
|
||||||
|
# Not in Shiny but you can still click on bars
|
||||||
|
data.frame(
|
||||||
|
month = month.abb,
|
||||||
|
value = sample(1:100, 12)
|
||||||
|
) \%>\%
|
||||||
|
apex(aes(month, value)) \%>\%
|
||||||
|
set_input_click("month_click", multiple = TRUE)
|
||||||
|
|
||||||
|
|
||||||
|
# Interactive examples:
|
||||||
if (interactive()) {
|
if (interactive()) {
|
||||||
|
|
||||||
run_input_demo("click")
|
run_input_demo("click")
|
||||||
|
|
|
@ -0,0 +1,73 @@
|
||||||
|
% Generated by roxygen2: do not edit by hand
|
||||||
|
% Please edit documentation in R/shiny-input.R
|
||||||
|
\name{set_input_selection}
|
||||||
|
\alias{set_input_selection}
|
||||||
|
\title{Retrieve selection information in Shiny}
|
||||||
|
\usage{
|
||||||
|
set_input_selection(
|
||||||
|
ax,
|
||||||
|
inputId,
|
||||||
|
type = c("x", "xy", "y"),
|
||||||
|
fill_color = "#24292e",
|
||||||
|
fill_opacity = 0.1,
|
||||||
|
stroke_width = 1,
|
||||||
|
stroke_dasharray = 3,
|
||||||
|
stroke_color = "#24292e",
|
||||||
|
stroke_opacity = 0.4,
|
||||||
|
xmin = NULL,
|
||||||
|
xmax = NULL,
|
||||||
|
ymin = NULL,
|
||||||
|
ymax = NULL,
|
||||||
|
session = shiny::getDefaultReactiveDomain()
|
||||||
|
)
|
||||||
|
}
|
||||||
|
\arguments{
|
||||||
|
\item{ax}{An \code{apexcharts} \code{htmlwidget} object.}
|
||||||
|
|
||||||
|
\item{inputId}{The id that will be used server-side for retrieving selection.}
|
||||||
|
|
||||||
|
\item{type}{Allow selection either on x-axis, y-axis or on both axis.}
|
||||||
|
|
||||||
|
\item{fill_color}{Background color of the selection rect which is drawn when user drags on the chart.}
|
||||||
|
|
||||||
|
\item{fill_opacity}{Opacity of background color of the selection rectangle.}
|
||||||
|
|
||||||
|
\item{stroke_width}{Border thickness of the selection rectangle.}
|
||||||
|
|
||||||
|
\item{stroke_dasharray}{Creates dashes in borders of selection rectangle.
|
||||||
|
Higher number creates more space between dashes in the border.}
|
||||||
|
|
||||||
|
\item{stroke_color}{Colors of selection border.}
|
||||||
|
|
||||||
|
\item{stroke_opacity}{Opacity of selection border.}
|
||||||
|
|
||||||
|
\item{xmin, xmax}{Start value of x-axis. Both \code{min} and \code{max} must be provided.}
|
||||||
|
|
||||||
|
\item{ymin, ymax}{Start value of y-axis. Both \code{min} and \code{max} must be provided.}
|
||||||
|
|
||||||
|
\item{session}{The Shiny session.}
|
||||||
|
}
|
||||||
|
\value{
|
||||||
|
An \code{apexcharts} \code{htmlwidget} object.
|
||||||
|
}
|
||||||
|
\description{
|
||||||
|
Retrieve selection information in Shiny
|
||||||
|
}
|
||||||
|
\examples{
|
||||||
|
|
||||||
|
library(apexcharter)
|
||||||
|
data("economics", package = "ggplot2")
|
||||||
|
|
||||||
|
# Not in Shiny so no events
|
||||||
|
# but you can still select an area on chart
|
||||||
|
apex(economics, aes(date, psavert), type = "line") \%>\%
|
||||||
|
set_input_selection("selection")
|
||||||
|
|
||||||
|
# Default selection at start
|
||||||
|
apex(economics, aes(date, psavert), type = "line") \%>\%
|
||||||
|
set_input_selection(
|
||||||
|
inputId = "selection",
|
||||||
|
xmin = format_date("1980-01-01"),
|
||||||
|
xmax = format_date("1985-01-01")
|
||||||
|
)
|
||||||
|
}
|
|
@ -9,7 +9,7 @@ set_input_zoom(ax, inputId, session = shiny::getDefaultReactiveDomain())
|
||||||
\arguments{
|
\arguments{
|
||||||
\item{ax}{An \code{apexcharts} \code{htmlwidget} object.}
|
\item{ax}{An \code{apexcharts} \code{htmlwidget} object.}
|
||||||
|
|
||||||
\item{inputId}{The id that will be used server-side for retrieving click.}
|
\item{inputId}{The id that will be used server-side for retrieving zoom.}
|
||||||
|
|
||||||
\item{session}{The Shiny session.}
|
\item{session}{The Shiny session.}
|
||||||
}
|
}
|
||||||
|
@ -19,6 +19,9 @@ An \code{apexcharts} \code{htmlwidget} object.
|
||||||
\description{
|
\description{
|
||||||
Retrieve zoom information in Shiny
|
Retrieve zoom information in Shiny
|
||||||
}
|
}
|
||||||
|
\note{
|
||||||
|
If x-axis is of type datetime, value retrieved is of class \code{POSIXct}.
|
||||||
|
}
|
||||||
\examples{
|
\examples{
|
||||||
if (interactive()) {
|
if (interactive()) {
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue