garrick
/
frappeCharts
ウォッチ 1
スター 0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki アクティビティ
ソースを参照

shorten sha links in dev journal

master
Garrick Aden-Buie 6年前
親
a7c00fe865
コミット
f804cc73d7
2個のファイルの変更、86行の追加、67行の削除
ユニファイド表示 差分情報を表示
  1. +43
    -32
      dev/dev.Rmd
  2. +43
    -35
      dev/dev.md

+ 43
- 32
dev/dev.Rmd ファイルの表示



```{r setup, include=FALSE} ```{r setup, include=FALSE}
knitr::opts_chunk$set(eval = FALSE) knitr::opts_chunk$set(eval = FALSE)

github_sha_link <- function(sha) {
glue::glue("[changelog: {substr(sha, 1, 6)}](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/{sha})")
}
``` ```


## Setup R Package ## Setup R Package


* [a3f6fdd986d2b98323b5be43e323df4f6a19f1f3](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/a3f6fdd986d2b98323b5be43e323df4f6a19f1f3)
* `r github_sha_link("a3f6fdd986d2b98323b5be43e323df4f6a19f1f3")`


Create a package for this HTML widget. Create a package for this HTML widget.
We're not going to publish this, so you can call it whatever you want We're not going to publish this, so you can call it whatever you want


## Setup npm package ## Setup npm package


* [256f0ca112b2685608f9a17a4fb4e35d279c9830](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/256f0ca112b2685608f9a17a4fb4e35d279c9830)
* `r github_sha_link("256f0ca112b2685608f9a17a4fb4e35d279c9830")`


Same process again, but this time for npm. Same process again, but this time for npm.




## Scaffold the HTML widget ## Scaffold the HTML widget


* [38bac2c65cf54816525076690310008e62ab99a1](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/38bac2c65cf54816525076690310008e62ab99a1)
* `r github_sha_link("38bac2c65cf54816525076690310008e62ab99a1")`


```{r htmlwidgets-scaffold} ```{r htmlwidgets-scaffold}
htmlwidgets::scaffoldWidget("frappeChart") htmlwidgets::scaffoldWidget("frappeChart")


## Use `npm` to get our dependencies in the right place ## Use `npm` to get our dependencies in the right place


* [7abf0224345a67217c4a476f04eafe581f0ecec0](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/7abf0224345a67217c4a476f04eafe581f0ecec0)
* `r github_sha_link("7abf0224345a67217c4a476f04eafe581f0ecec0")`


`htmlwidgets` load dependencies in a way that's exactly the same as using a `htmlwidgets` load dependencies in a way that's exactly the same as using a
`<script>` tag in the HTML `<head>`. `<script>` tag in the HTML `<head>`.


## Create a demo html_document_plain() ## Create a demo html_document_plain()


* [036d454f80d6036fc1ba35db92161fd19c053635](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/036d454f80d6036fc1ba35db92161fd19c053635)
* `r github_sha_link("036d454f80d6036fc1ba35db92161fd19c053635")`


```{r create-demo-html} ```{r create-demo-html}
dir.create("dev/demo") dir.create("dev/demo")


## Replace the example data with another data set and example ## Replace the example data with another data set and example


* [8fd703a08b021b8466171b83506f5fb0bf92f2ac](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/8fd703a08b021b8466171b83506f5fb0bf92f2ac)
* `r github_sha_link("8fd703a08b021b8466171b83506f5fb0bf92f2ac")`


The first demo mixes chart types and we don't want to do that. The first demo mixes chart types and we don't want to do that.
Use the example from Use the example from
} }
``` ```


Then re-create this data in an R chunk ([881c12ffdbdaa017863c918f61fa6208400d6130](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/881c12ffdbdaa017863c918f61fa6208400d6130)):
Then re-create this data in an R chunk (`r github_sha_link("881c12ffdbdaa017863c918f61fa6208400d6130")`:


```{r data-in-r} ```{r data-in-r}
data <- list( data <- list(
``` ```


Use `JSON.parse()` to turn the data into a JS object Use `JSON.parse()` to turn the data into a JS object
and replace the data used in the chart ([7201e436e72ebddee271cbf7c02a733ac81a5d86](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/7201e436e72ebddee271cbf7c02a733ac81a5d86)).
and replace the data used in the chart (`r github_sha_link("7201e436e72ebddee271cbf7c02a733ac81a5d86")`.


```{js find-r-data-script-3} ```{js find-r-data-script-3}
let rData = document.getElementById('data') let rData = document.getElementById('data')


## Augment data to set options for the chart ## Augment data to set options for the chart


* [3e1d9bee03fdf621f5dc5ec46e0e92f603ebe219](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/3e1d9bee03fdf621f5dc5ec46e0e92f603ebe219)
* `r github_sha_link("3e1d9bee03fdf621f5dc5ec46e0e92f603ebe219")`


Embed `data` in another list `opts` that will carry additional options, Embed `data` in another list `opts` that will carry additional options,
such as `title`, `type` and `colors`. such as `title`, `type` and `colors`.


## Learn about other options for line charts ## Learn about other options for line charts


* [340d516ee4c7788e4f7e5089c4957ee9ffd1333e](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/340d516ee4c7788e4f7e5089c4957ee9ffd1333e)
* `r github_sha_link("340d516ee4c7788e4f7e5089c4957ee9ffd1333e")`


Read <https://frappe.io/charts/docs/basic/trends_regions> Read <https://frappe.io/charts/docs/basic/trends_regions>
and add and test additional line options. and add and test additional line options.


## Turn on dots again and make navigable ## Turn on dots again and make navigable


* [93d4c74f4b30a819b5c22fd7cc8ff238fc62f572](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/93d4c74f4b30a819b5c22fd7cc8ff238fc62f572)
* `r github_sha_link("93d4c74f4b30a819b5c22fd7cc8ff238fc62f572")`


```{r} ```{r}
opts <- list( opts <- list(


## Add a real data source ## Add a real data source


* [7a988739e3b5ff0572f4c16ce5110f52936550c3](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/7a988739e3b5ff0572f4c16ce5110f52936550c3)
* `r github_sha_link("7a988739e3b5ff0572f4c16ce5110f52936550c3")`


This is where you decide how much work you want to do on the R side This is where you decide how much work you want to do on the R side
and how much work should be done on the JavaScript side. and how much work should be done on the JavaScript side.


## This is basically what `htmlwidgets` does, just inside a framework ## This is basically what `htmlwidgets` does, just inside a framework


* [a0614d9699aefc0eda82b3e368b48370be0ae9ba](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/a0614d9699aefc0eda82b3e368b48370be0ae9ba)
* `r github_sha_link("a0614d9699aefc0eda82b3e368b48370be0ae9ba")`


We now have all of the pieces of an `htmlwidget`, We now have all of the pieces of an `htmlwidget`,
it's just a bit less coordinated. it's just a bit less coordinated.


## Declare dependencies ## Declare dependencies


* [969fd962edf0be8f98ffff1823f8e08960ffb31a](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/969fd962edf0be8f98ffff1823f8e08960ffb31a)
* `r github_sha_link("969fd962edf0be8f98ffff1823f8e08960ffb31a")`


**FILE:** `inst/htmlwidgets/frappeChart.yaml` **FILE:** `inst/htmlwidgets/frappeChart.yaml`




## Write the R function ## Write the R function


* [cbc25a8f7bbf7e522f369f5fec7c2517ba768656](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/cbc25a8f7bbf7e522f369f5fec7c2517ba768656)
* `r github_sha_link("cbc25a8f7bbf7e522f369f5fec7c2517ba768656")`


**FILE:** `R/frappeChart.r` **FILE:** `R/frappeChart.r`


* [colors](https://frappe.io/charts/docs/reference/configuration#colors)? * [colors](https://frappe.io/charts/docs/reference/configuration#colors)?
* [is_navigable](https://frappe.io/charts/docs/reference/configuration#isnavigable) * [is_navigable](https://frappe.io/charts/docs/reference/configuration#isnavigable)


Structure the argumets into `x` and pass `...` for the "extra bits".
Structure the arguments into `x` and pass `...` for the "extra bits".


Rebuild the package, Rebuild the package,
then create a new R markdown document: then create a new R markdown document:


## Write JavaScript binding ## Write JavaScript binding


* [6f141c4341a2c4f8615df81887e7927d2e765f11](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/6f141c4341a2c4f8615df81887e7927d2e765f11)
* `r github_sha_link("6f141c4341a2c4f8615df81887e7927d2e765f11")`


**FILE:** `inst/htmlwidgets/frappeChart.js` **FILE:** `inst/htmlwidgets/frappeChart.js`




### Writing JavaScript in R ### Writing JavaScript in R


* [8d442e3c842154adbae87dab5e9289cbb1333187](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/8d442e3c842154adbae87dab5e9289cbb1333187)
* `r github_sha_link("8d442e3c842154adbae87dab5e9289cbb1333187")`


The [tooltips](https://frappe.io/charts/docs/basic/annotations#tooltips) The [tooltips](https://frappe.io/charts/docs/basic/annotations#tooltips)
can be formatted using the `tooltipOptions` property: can be formatted using the `tooltipOptions` property:


## Shiny comes for free! ## Shiny comes for free!


* [739d5945010d5e46ab3f9847fd412beb0766805d](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/739d5945010d5e46ab3f9847fd412beb0766805d)
* `r github_sha_link("739d5945010d5e46ab3f9847fd412beb0766805d")`


Create a basic Shiny app with Create a basic Shiny app with




To make this work we will: To make this work we will:


1. refactor the JS-side data processing code ([b19e33af8fdca579a8578bcd7a39c6d1e43fb32c](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/b19e33af8fdca579a8578bcd7a39c6d1e43fb32c))
1. make the created `chart` object available outside `renderValue()` ([d114592668ca63f06f593f4f247432eec218894b](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/d114592668ca63f06f593f4f247432eec218894b))
1. bind the factory function context to `el` as `widget` ([f0a3bf9fd5e60cda9b2b7ace004f360c36bf6610](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/f0a3bf9fd5e60cda9b2b7ace004f360c36bf6610))
1. Demo this by opening a rendered widget and showing `widget` as attached to the div
1. expose `chart` with a `chart()` method ([f0a3bf9fd5e60cda9b2b7ace004f360c36bf6610](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/f0a3bf9fd5e60cda9b2b7ace004f360c36bf6610))
1. refactor the JS-side data processing code (`r github_sha_link("b19e33af8fdca579a8578bcd7a39c6d1e43fb32c")`
- Create a `prepareChartData()` function from the code we wrote for
`renderValue()`. The goal is that this will let us use the function in
multiple places.
1. make the created `chart` object available outside `renderValue()` (`r github_sha_link("d114592668ca63f06f593f4f247432eec218894b")`

1. bind the factory function context to `el` as `widget` (`r github_sha_link("f0a3bf9fd5e60cda9b2b7ace004f360c36bf6610")`
- Demo this by opening a rendered widget and showing `widget` as attached to the div

1. expose `chart` with a `chart()` method (`r github_sha_link("f0a3bf9fd5e60cda9b2b7ace004f360c36bf6610")`
1. Demo by finding widget div and running 1. Demo by finding widget div and running
``` ```
``` ```
1. Now, if nothing else, the `chart` object is accessible 1. Now, if nothing else, the `chart` object is accessible
so others can use or extend it. so others can use or extend it.
1. Create an update method that takes new data and updates an existing chart. ([5da4b68b5f60d8e6ee17cc8c4a009121539a2653](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/5da4b68b5f60d8e6ee17cc8c4a009121539a2653))
1. Create an update method that takes new data and updates an existing chart. (`r github_sha_link("5da4b68b5f60d8e6ee17cc8c4a009121539a2653")`


Demo with `app.R` Demo with `app.R`
Try with various values. You can increase the number of data points Try with various values. You can increase the number of data points
but you can't add or change the series. but you can't add or change the series.


1. Add a custom message handler that dependes on `HTMLWidgets.shinyMode`. ([5da4b68b5f60d8e6ee17cc8c4a009121539a2653](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/5da4b68b5f60d8e6ee17cc8c4a009121539a2653))
1. Add a custom message handler that dependes on `HTMLWidgets.shinyMode`. (`r github_sha_link("5da4b68b5f60d8e6ee17cc8c4a009121539a2653")`


```js ```js
// after factory function // after factory function
Demo the app, now updates are fast! Demo the app, now updates are fast!


1. Write a user-friendly wrapper around `sendCustomMessage` called `updateFrappeChart()` ([4706d89183aaa9a3721599ef13c6f7af4955808b](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/4706d89183aaa9a3721599ef13c6f7af4955808b))
1. Write a user-friendly wrapper around `sendCustomMessage` called `updateFrappeChart()` (`r github_sha_link("4706d89183aaa9a3721599ef13c6f7af4955808b")`


1. Now add an event listener to send chart navigation back to Shiny ([0b4f7ea16f378ec5a53d81260c8f9056fabbcaba](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/0b4f7ea16f378ec5a53d81260c8f9056fabbcaba))
1. Now add an event listener to send chart navigation back to Shiny (`r github_sha_link("0b4f7ea16f378ec5a53d81260c8f9056fabbcaba")`
Attach the event listener during `renderValue()` and watch for the `data-select` event. Attach the event listener during `renderValue()` and watch for the `data-select` event.
Use the `el.id` to create a new id, like `el.id + '_selected'`. Use the `el.id` to create a new id, like `el.id + '_selected'`.


1. You would probably want to do some work for the user and return more meaningful values. 1. You would probably want to do some work for the user and return more meaningful values.
We won't cover this in the workshop, but I've demonstrated a potential method. We won't cover this in the workshop, but I've demonstrated a potential method.
([e7fe0e1d87977823e6a040434b33e6d5cdf8eac1](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/e7fe0e1d87977823e6a040434b33e6d5cdf8eac1))
(`r github_sha_link("e7fe0e1d87977823e6a040434b33e6d5cdf8eac1")`


This function basically reverses the chart processing and This function basically reverses the chart processing and
and returns a list that should be a dataframe. and returns a list that should be a dataframe.
data[labelsName] = label data[labelsName] = label
Shiny.setInputValue(el.id + '_selected', data) Shiny.setInputValue(el.id + '_selected', data)
}) })
}
```
}
```


1. But now in Shiny it needs to go from a list to a data.frame. 1. But now in Shiny it needs to go from a list to a data.frame.
To do this we use `shiny::registerInputHandler()` in R and To do this we use `shiny::registerInputHandler()` in R and
give the input event a type: `inputId_selected:frappeCharts-selected`. give the input event a type: `inputId_selected:frappeCharts-selected`.
([000de60582f277e29983f6c5803de112ca1ade99](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/000de60582f277e29983f6c5803de112ca1ade99))
(`r github_sha_link("000de60582f277e29983f6c5803de112ca1ade99")`
```r ```r
.onLoad <- function(libname, pkgname) { .onLoad <- function(libname, pkgname) {

+ 43
- 35
dev/dev.md ファイルの表示



## Setup R Package ## Setup R Package


- [a3f6fdd986d2b98323b5be43e323df4f6a19f1f3](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/a3f6fdd986d2b98323b5be43e323df4f6a19f1f3)
- [changelog:
a3f6fd](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/a3f6fdd986d2b98323b5be43e323df4f6a19f1f3)


Create a package for this HTML widget. We’re not going to publish this, Create a package for this HTML widget. We’re not going to publish this,
so you can call it whatever you want so you can call it whatever you want


## Setup npm package ## Setup npm package


- [256f0ca112b2685608f9a17a4fb4e35d279c9830](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/256f0ca112b2685608f9a17a4fb4e35d279c9830)
- [changelog: 256f0c](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/256f0ca112b2685608f9a17a4fb4e35d279c9830)


Same process again, but this time for npm. Same process again, but this time for npm.




## Scaffold the HTML widget ## Scaffold the HTML widget


- [38bac2c65cf54816525076690310008e62ab99a1](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/38bac2c65cf54816525076690310008e62ab99a1)
- [changelog: 38bac2](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/38bac2c65cf54816525076690310008e62ab99a1)


<!-- end list --> <!-- end list -->




## Use `npm` to get our dependencies in the right place ## Use `npm` to get our dependencies in the right place


- [7abf0224345a67217c4a476f04eafe581f0ecec0](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/7abf0224345a67217c4a476f04eafe581f0ecec0)
- [changelog: 7abf02](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/7abf0224345a67217c4a476f04eafe581f0ecec0)


`htmlwidgets` load dependencies in a way that’s exactly the same as `htmlwidgets` load dependencies in a way that’s exactly the same as
using a `<script>` tag in the HTML `<head>`. Look at the [documentation using a `<script>` tag in the HTML `<head>`. Look at the [documentation


## Create a demo html\_document\_plain() ## Create a demo html\_document\_plain()


- [036d454f80d6036fc1ba35db92161fd19c053635](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/036d454f80d6036fc1ba35db92161fd19c053635)
- [changelog: 036d45](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/036d454f80d6036fc1ba35db92161fd19c053635)


<!-- end list --> <!-- end list -->




## Replace the example data with another data set and example ## Replace the example data with another data set and example


- [8fd703a08b021b8466171b83506f5fb0bf92f2ac](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/8fd703a08b021b8466171b83506f5fb0bf92f2ac)
- [changelog: 8fd703](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/8fd703a08b021b8466171b83506f5fb0bf92f2ac)


The first demo mixes chart types and we don’t want to do that. Use the The first demo mixes chart types and we don’t want to do that. Use the
example from [Basic example from [Basic
``` ```


Then re-create this data in an R chunk Then re-create this data in an R chunk
([881c12ffdbdaa017863c918f61fa6208400d6130](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/881c12ffdbdaa017863c918f61fa6208400d6130)):
([changelog: 881c12](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/881c12ffdbdaa017863c918f61fa6208400d6130):


``` r ``` r
data <- list( data <- list(


Use `JSON.parse()` to turn the data into a JS object and replace the Use `JSON.parse()` to turn the data into a JS object and replace the
data used in the chart data used in the chart
([7201e436e72ebddee271cbf7c02a733ac81a5d86](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/7201e436e72ebddee271cbf7c02a733ac81a5d86)).
([changelog: 7201e4](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/7201e436e72ebddee271cbf7c02a733ac81a5d86).


``` js ``` js
let rData = document.getElementById('data') let rData = document.getElementById('data')


## Augment data to set options for the chart ## Augment data to set options for the chart


- [3e1d9bee03fdf621f5dc5ec46e0e92f603ebe219](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/3e1d9bee03fdf621f5dc5ec46e0e92f603ebe219)
- [changelog: 3e1d9b](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/3e1d9bee03fdf621f5dc5ec46e0e92f603ebe219)


Embed `data` in another list `opts` that will carry additional options, Embed `data` in another list `opts` that will carry additional options,
such as `title`, `type` and `colors`. such as `title`, `type` and `colors`.


## Learn about other options for line charts ## Learn about other options for line charts


- [340d516ee4c7788e4f7e5089c4957ee9ffd1333e](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/340d516ee4c7788e4f7e5089c4957ee9ffd1333e)
- [changelog: 340d51](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/340d516ee4c7788e4f7e5089c4957ee9ffd1333e)


Read <https://frappe.io/charts/docs/basic/trends_regions> and add and Read <https://frappe.io/charts/docs/basic/trends_regions> and add and
test additional line options. test additional line options.


## Turn on dots again and make navigable ## Turn on dots again and make navigable


- [93d4c74f4b30a819b5c22fd7cc8ff238fc62f572](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/93d4c74f4b30a819b5c22fd7cc8ff238fc62f572)
- [changelog: 93d4c7](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/93d4c74f4b30a819b5c22fd7cc8ff238fc62f572)


<!-- end list --> <!-- end list -->




## Add a real data source ## Add a real data source


- [7a988739e3b5ff0572f4c16ce5110f52936550c3](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/7a988739e3b5ff0572f4c16ce5110f52936550c3)
- [changelog: 7a9887](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/7a988739e3b5ff0572f4c16ce5110f52936550c3)


This is where you decide how much work you want to do on the R side and This is where you decide how much work you want to do on the R side and
how much work should be done on the JavaScript side. One thing is clear how much work should be done on the JavaScript side. One thing is clear


## This is basically what `htmlwidgets` does, just inside a framework ## This is basically what `htmlwidgets` does, just inside a framework


- [a0614d9699aefc0eda82b3e368b48370be0ae9ba](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/a0614d9699aefc0eda82b3e368b48370be0ae9ba)
- [changelog:
a0614d](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/a0614d9699aefc0eda82b3e368b48370be0ae9ba)


We now have all of the pieces of an `htmlwidget`, it’s just a bit less We now have all of the pieces of an `htmlwidget`, it’s just a bit less
coordinated. coordinated.


## Declare dependencies ## Declare dependencies


- [969fd962edf0be8f98ffff1823f8e08960ffb31a](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/969fd962edf0be8f98ffff1823f8e08960ffb31a)
- [changelog: 969fd9](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/969fd962edf0be8f98ffff1823f8e08960ffb31a)


**FILE:** `inst/htmlwidgets/frappeChart.yaml` **FILE:** `inst/htmlwidgets/frappeChart.yaml`




## Write the R function ## Write the R function


- [cbc25a8f7bbf7e522f369f5fec7c2517ba768656](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/cbc25a8f7bbf7e522f369f5fec7c2517ba768656)
- [changelog:
cbc25a](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/cbc25a8f7bbf7e522f369f5fec7c2517ba768656)


**FILE:** `R/frappeChart.r` **FILE:** `R/frappeChart.r`


- [colors](https://frappe.io/charts/docs/reference/configuration#colors)? - [colors](https://frappe.io/charts/docs/reference/configuration#colors)?
- [is\_navigable](https://frappe.io/charts/docs/reference/configuration#isnavigable) - [is\_navigable](https://frappe.io/charts/docs/reference/configuration#isnavigable)


Structure the argumets into `x` and pass `...` for the “extra bits”.
Structure the arguments into `x` and pass `...` for the “extra bits”.


Rebuild the package, then create a new R markdown document: Rebuild the package, then create a new R markdown document:
`js4shiny::js4shiny_doc()`. `js4shiny::js4shiny_doc()`.


## Write JavaScript binding ## Write JavaScript binding


- [6f141c4341a2c4f8615df81887e7927d2e765f11](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/6f141c4341a2c4f8615df81887e7927d2e765f11)
- [changelog: 6f141c](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/6f141c4341a2c4f8615df81887e7927d2e765f11)


**FILE:** `inst/htmlwidgets/frappeChart.js` **FILE:** `inst/htmlwidgets/frappeChart.js`




### Writing JavaScript in R ### Writing JavaScript in R


- [8d442e3c842154adbae87dab5e9289cbb1333187](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/8d442e3c842154adbae87dab5e9289cbb1333187)
- [changelog: 8d442e](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/8d442e3c842154adbae87dab5e9289cbb1333187)


The [tooltips](https://frappe.io/charts/docs/basic/annotations#tooltips) The [tooltips](https://frappe.io/charts/docs/basic/annotations#tooltips)
can be formatted using the `tooltipOptions` property: can be formatted using the `tooltipOptions` property:


## Shiny comes for free\! ## Shiny comes for free\!


- [739d5945010d5e46ab3f9847fd412beb0766805d](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/739d5945010d5e46ab3f9847fd412beb0766805d)
- [changelog: 739d59](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/739d5945010d5e46ab3f9847fd412beb0766805d)


Create a basic Shiny app with Create a basic Shiny app with




To make this work we will: To make this work we will:


1. refactor the JS-side data processing code
([b19e33af8fdca579a8578bcd7a39c6d1e43fb32c](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/b19e33af8fdca579a8578bcd7a39c6d1e43fb32c))
1. refactor the JS-side data processing code ([changelog:
b19e33](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/b19e33af8fdca579a8578bcd7a39c6d1e43fb32c)
- Create a `prepareChartData()` function from the code we wrote
for `renderValue()`. The goal is that this will let us use the
function in multiple places.


2. make the created `chart` object available outside `renderValue()` 2. make the created `chart` object available outside `renderValue()`
([d114592668ca63f06f593f4f247432eec218894b](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/d114592668ca63f06f593f4f247432eec218894b))
([changelog:
d11459](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/d114592668ca63f06f593f4f247432eec218894b)


3. bind the factory function context to `el` as `widget`
([f0a3bf9fd5e60cda9b2b7ace004f360c36bf6610](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/f0a3bf9fd5e60cda9b2b7ace004f360c36bf6610))
3. bind the factory function context to `el` as `widget` ([changelog:
f0a3bf](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/f0a3bf9fd5e60cda9b2b7ace004f360c36bf6610)
1. Demo this by opening a rendered widget and showing `widget` as
- Demo this by opening a rendered widget and showing `widget` as
attached to the div attached to the div


4. expose `chart` with a `chart()` method
([f0a3bf9fd5e60cda9b2b7ace004f360c36bf6610](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/f0a3bf9fd5e60cda9b2b7ace004f360c36bf6610))
4. expose `chart` with a `chart()` method ([changelog:
f0a3bf](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/f0a3bf9fd5e60cda9b2b7ace004f360c36bf6610)
1. Demo by finding widget div and running 1. Demo by finding widget div and running


5. Create an update method that takes new data and updates an existing 5. Create an update method that takes new data and updates an existing
chart. chart.
([5da4b68b5f60d8e6ee17cc8c4a009121539a2653](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/5da4b68b5f60d8e6ee17cc8c4a009121539a2653))
([changelog: 5da4b6](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/5da4b68b5f60d8e6ee17cc8c4a009121539a2653)
Demo with `app.R` Demo with `app.R`


6. Add a custom message handler that dependes on 6. Add a custom message handler that dependes on
`HTMLWidgets.shinyMode`. `HTMLWidgets.shinyMode`.
([5da4b68b5f60d8e6ee17cc8c4a009121539a2653](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/5da4b68b5f60d8e6ee17cc8c4a009121539a2653))
([changelog: 5da4b6](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/5da4b68b5f60d8e6ee17cc8c4a009121539a2653)
``` js ``` js
// after factory function // after factory function


7. Write a user-friendly wrapper around `sendCustomMessage` called 7. Write a user-friendly wrapper around `sendCustomMessage` called
`updateFrappeChart()` `updateFrappeChart()`
([4706d89183aaa9a3721599ef13c6f7af4955808b](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/4706d89183aaa9a3721599ef13c6f7af4955808b))
([changelog: 4706d8](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/4706d89183aaa9a3721599ef13c6f7af4955808b)


8. Now add an event listener to send chart navigation back to Shiny 8. Now add an event listener to send chart navigation back to Shiny
([0b4f7ea16f378ec5a53d81260c8f9056fabbcaba](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/0b4f7ea16f378ec5a53d81260c8f9056fabbcaba))
([changelog: 0b4f7e](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/0b4f7ea16f378ec5a53d81260c8f9056fabbcaba)
Attach the event listener during `renderValue()` and watch for the Attach the event listener during `renderValue()` and watch for the
`data-select` event. Use the `el.id` to create a new id, like `el.id `data-select` event. Use the `el.id` to create a new id, like `el.id


9. You would probably want to do some work for the user and return more 9. You would probably want to do some work for the user and return more
meaningful values. We won’t cover this in the workshop, but I’ve meaningful values. We won’t cover this in the workshop, but I’ve
demonstrated a potential method.
([e7fe0e1d87977823e6a040434b33e6d5cdf8eac1](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/e7fe0e1d87977823e6a040434b33e6d5cdf8eac1))
demonstrated a potential method. ([changelog:
e7fe0e](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/e7fe0e1d87977823e6a040434b33e6d5cdf8eac1)
This function basically reverses the chart processing and and This function basically reverses the chart processing and and
returns a list that should be a dataframe. returns a list that should be a dataframe.
data[labelsName] = label data[labelsName] = label
Shiny.setInputValue(el.id + '_selected', data) Shiny.setInputValue(el.id + '_selected', data)
}) })
}
}
``` ```


10. But now in Shiny it needs to go from a list to a data.frame. To do 10. But now in Shiny it needs to go from a list to a data.frame. To do
this we use `shiny::registerInputHandler()` in R and give the input this we use `shiny::registerInputHandler()` in R and give the input
event a type: `inputId_selected:frappeCharts-selected`. event a type: `inputId_selected:frappeCharts-selected`.
([000de60582f277e29983f6c5803de112ca1ade99](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/000de60582f277e29983f6c5803de112ca1ade99))
([changelog: 000de6](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/000de60582f277e29983f6c5803de112ca1ade99)
``` r ``` r
.onLoad <- function(libname, pkgname) { .onLoad <- function(libname, pkgname) {

書き込み プレビュー
読み込み中…
キャンセル
保存