Initial commit

.Rbuildignore

@@ -0,0 +1,3 @@
+^apexcharter\.Rproj$
+^\.Rproj\.user$
+^dev$

.gitignore

@@ -0,0 +1,4 @@
+.Rproj.user
+.Rhistory
+.RData
+*.Rproj

DESCRIPTION

@@ -0,0 +1,17 @@
+Package: apexcharter
+Version: 0.0.0.9000
+Title: Create Interactive Chart with the JavaScript 'ApexCharts' Library
+Description: Provides an 'htmlwidgets' interface to 'apexcharts.js'.
+Authors@R: c(
+  person("Victor", "Perrier", email = "victor.perrier@dreamrs.fr", role = c("aut", "cre")),
+  person("Fanny", "Meyer", email = "fanny.meyer@dreamrs.fr", role = c("aut")),
+  person("ApexCharts", role = c("cph"), comment = "apexcharts.js library"))
+License: MIT + file LICENSE
+Encoding: UTF-8
+LazyData: true
+ByteCompile: true
+Imports: 
+    htmlwidgets
+RoxygenNote: 6.0.1
+URL: https://github.com/dreamRs/apexcharter
+BugReports: https://github.com/dreamRs/apexcharter/issues

LICENSE

@@ -0,0 +1,32 @@
+R PACKAGE
+=========
+
+YEAR: 2018
+COPYRIGHT HOLDER: dreamRs
+
+
+ApexCharts.js
+=============
+
+The MIT License (MIT)
+
+Copyright (c) 2018 ApexCharts
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+

NAMESPACE

@@ -0,0 +1,9 @@
+# Generated by roxygen2: do not edit by hand
+
+export(apexcharter)
+export(apexcharterOutput)
+export(renderApexcharter)
+importFrom(htmlwidgets,createWidget)
+importFrom(htmlwidgets,shinyRenderWidget)
+importFrom(htmlwidgets,shinyWidgetOutput)
+importFrom(htmlwidgets,sizingPolicy)

R/apexcharter.R

@@ -0,0 +1,83 @@
+
+#' Create a apexcharts.js widget
+#'
+#' @param ax_opts A \code{list} in JSON format with chart parameters
+#' @param data A \code{data.frame}.
+#' @param width A numeric input in pixels.
+#' @param height A numeric input in pixels.
+#' @param elementId Use an explicit element ID for the widget.
+#'
+#' @return A \code{apexcharts} \code{htmlwidget} object.
+#' @export
+#'
+#' @importFrom htmlwidgets createWidget sizingPolicy
+#'
+#' @examples
+#'
+#' library(apexcharter)
+#'
+#' apexcharter(ax_opts = list(
+#'   chart = list(type = "bar"),
+#'   series = list(list(
+#'     name = "Example",
+#'     data = sample(1:100, 5)
+#'   )),
+#'   xaxis = list(categories = LETTERS[1:5])
+#' ))
+apexcharter <- function(ax_opts = list(), data = NULL, width = NULL, height = NULL, elementId = NULL) {
+
+  # forward options using x
+  x <- list(
+    ax_opts = ax_opts,
+    data = data
+  )
+
+  # create widget
+  htmlwidgets::createWidget(
+    name = 'apexcharter',
+    x,
+    width = width,
+    height = height,
+    package = 'apexcharter',
+    elementId = elementId,
+    sizingPolicy = htmlwidgets::sizingPolicy(
+      defaultWidth = "90%",
+      defaultHeight = "90%",
+      viewer.defaultHeight = "100%",
+      viewer.defaultWidth = "100%",
+      knitr.figure = FALSE,
+      browser.fill = TRUE,
+      padding = 20
+    )
+  )
+}
+
+#' Shiny bindings for apexcharter
+#'
+#' Output and render functions for using apexcharter within Shiny
+#' applications and interactive Rmd documents.
+#'
+#' @param outputId output variable to read from
+#' @param width,height Must be a valid CSS unit (like \code{'100\%'},
+#'   \code{'400px'}, \code{'auto'}) or a number, which will be coerced to a
+#'   string and have \code{'px'} appended.
+#' @param expr An expression that generates a apexcharter
+#' @param env The environment in which to evaluate \code{expr}.
+#' @param quoted Is \code{expr} a quoted expression (with \code{quote()})? This
+#'   is useful if you want to save an expression in a variable.
+#'
+#' @name apexcharter-shiny
+#'
+#' @export
+#'
+#' @importFrom htmlwidgets shinyWidgetOutput shinyRenderWidget
+apexcharterOutput <- function(outputId, width = '100%', height = '400px'){
+  htmlwidgets::shinyWidgetOutput(outputId, 'apexcharter', width, height, package = 'apexcharter')
+}
+
+#' @rdname apexcharter-shiny
+#' @export
+renderApexcharter <- function(expr, env = parent.frame(), quoted = FALSE) {
+  if (!quoted) { expr <- substitute(expr) } # force quoted
+  htmlwidgets::shinyRenderWidget(expr, apexcharterOutput, env, quoted = TRUE)
+}

dev/raw-api.R

@@ -0,0 +1,96 @@
+
+
+# apexcharts.js raw api ---------------------------------------------------
+
+
+library(apexcharter)
+library(ggplot2) # for data
+library(dplyr)
+
+
+# bar ----
+
+data(mpg)
+dat <- count(mpg, manufacturer)
+
+apexcharter(ax_opts = list(
+  chart = list(type = "bar"),
+  plotOptions = list(
+    bar = list(
+      horizontal = FALSE,
+      endingShape = "flat",
+      columnWidth = "70%",
+      dataLabels = list(
+        position = "top"
+      )
+    )
+  ),
+  colors = list("#112446"),
+  grid = list(
+    show = TRUE,
+    position = "front"
+  ),
+  series = list(list(
+    name = "Count",
+    data = dat$n
+  )),
+  xaxis = list(categories = dat$manufacturer)
+))
+
+
+
+# line ----
+
+# recreating (mostly): https://apexcharts.com/javascript-chart-demos/line-charts/data-labels/
+
+apexcharter(ax_opts = list(
+  chart = list(
+    type = "line"
+  ),
+  stroke = list(
+    curve = "smooth"
+  ),
+  grid = list(
+    borderColor = "#e7e7e7",
+    row = list(
+      colors = c("#f3f3f3", "transparent"),
+      opacity = 0.5
+    )
+  ),
+  dataLabels = list(
+    enabled = TRUE
+  ),
+  markers = list(style = "inverted", size = 6),
+  series = list(
+    list(
+      name = "High",
+      data = c(28, 29, 33, 36, 32, 32, 33)
+    ),
+    list(
+      name = "Low",
+      data = c(12, 11, 14, 18, 17, 13, 13)
+    )
+  ),
+  title = list(
+    text = "Average High & Low Temperature",
+    align = "left"
+  ),
+  xaxis = list(
+    categories = month.abb[1:7]
+  ),
+  yaxis = list(
+    title = list(text = "Temperature"),
+    labels = list(
+      formatter = htmlwidgets::JS("function(value) {return value + '°C';}")
+    )
+  )
+))
+
+
+
+
+
+
+
+
+

inst/htmlwidgets/apexcharter.js

@@ -0,0 +1,40 @@
+HTMLWidgets.widget({
+
+  name: 'apexcharter',
+
+  type: 'output',
+
+  factory: function(el, width, height) {
+
+    var ax_opts, chart;
+
+    return {
+
+      renderValue: function(x) {
+
+
+        // Global options
+        ax_opts = x.ax_opts;
+
+        // Sizing
+        ax_opts.chart.width = width;
+        ax_opts.chart.height = height;
+
+        // Generate chart
+        chart = new ApexCharts(document.querySelector("#" + el.id), ax_opts);
+        chart.render();
+
+      },
+
+      resize: function(width, height) {
+        chart.updateOptions({
+          chart: {
+            width: width,
+            height: height
+          }
+        });
+      }
+
+    };
+  }
+});

inst/htmlwidgets/apexcharter.yaml

@@ -0,0 +1,5 @@
+dependencies:
+  - name: apexcharts
+    version: 1.0.4
+    src: htmlwidgets/lib/apexcharts-1.0.4
+    script: apexcharts.min.js

man/apexcharter-shiny.Rd

@@ -0,0 +1,30 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/apexcharter.R
+\name{apexcharter-shiny}
+\alias{apexcharter-shiny}
+\alias{apexcharterOutput}
+\alias{renderApexcharter}
+\title{Shiny bindings for apexcharter}
+\usage{
+apexcharterOutput(outputId, width = "100\%", height = "400px")
+
+renderApexcharter(expr, env = parent.frame(), quoted = FALSE)
+}
+\arguments{
+\item{outputId}{output variable to read from}
+
+\item{width, height}{Must be a valid CSS unit (like \code{'100\%'},
+\code{'400px'}, \code{'auto'}) or a number, which will be coerced to a
+string and have \code{'px'} appended.}
+
+\item{expr}{An expression that generates a apexcharter}
+
+\item{env}{The environment in which to evaluate \code{expr}.}
+
+\item{quoted}{Is \code{expr} a quoted expression (with \code{quote()})? This
+is useful if you want to save an expression in a variable.}
+}
+\description{
+Output and render functions for using apexcharter within Shiny
+applications and interactive Rmd documents.
+}

man/apexcharter.Rd

@@ -0,0 +1,39 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/apexcharter.R
+\name{apexcharter}
+\alias{apexcharter}
+\title{Create a apexcharts.js widget}
+\usage{
+apexcharter(ax_opts = list(), data = NULL, width = NULL, height = NULL,
+  elementId = NULL)
+}
+\arguments{
+\item{ax_opts}{A \code{list} in JSON format with chart parameters}
+
+\item{data}{A \code{data.frame}.}
+
+\item{width}{A numeric input in pixels.}
+
+\item{height}{A numeric input in pixels.}
+
+\item{elementId}{Use an explicit element ID for the widget.}
+}
+\value{
+A \code{apexcharts} \code{htmlwidget} object.
+}
+\description{
+Create a apexcharts.js widget
+}
+\examples{
+
+library(apexcharter)
+
+apexcharter(ax_opts = list(
+  chart = list(type = "bar"),
+  series = list(list(
+    name = "Example",
+    data = sample(1:100, 5)
+  )),
+  xaxis = list(categories = LETTERS[1:5])
+))
+}