2 değiştirilmiş dosya ile 86 ekleme ve 67 silme
+ 43
- 32
dev/dev.Rmd
Dosyayı Görüntüle
| @@ -28,11 +28,15 @@ is an excellent introduction. | |||
| ```{r setup, include=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 | |||
| * [a3f6fdd986d2b98323b5be43e323df4f6a19f1f3](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/a3f6fdd986d2b98323b5be43e323df4f6a19f1f3) | |||
| * `r github_sha_link("a3f6fdd986d2b98323b5be43e323df4f6a19f1f3")` | |||
| Create a package for this HTML widget. | |||
| We're not going to publish this, so you can call it whatever you want | |||
| @@ -62,7 +66,7 @@ usethis::use_package("yaml") | |||
| ## 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. | |||
| @@ -119,7 +123,7 @@ usethis::use_git_ignore("node_modules") | |||
| ## Scaffold the HTML widget | |||
| * [38bac2c65cf54816525076690310008e62ab99a1](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/38bac2c65cf54816525076690310008e62ab99a1) | |||
| * `r github_sha_link("38bac2c65cf54816525076690310008e62ab99a1")` | |||
| ```{r htmlwidgets-scaffold} | |||
| htmlwidgets::scaffoldWidget("frappeChart") | |||
| @@ -142,7 +146,7 @@ and creates a file `R/frappeChart.R` with the functions | |||
| ## 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 | |||
| `<script>` tag in the HTML `<head>`. | |||
| @@ -202,7 +206,7 @@ and have them run in the build process with | |||
| ## Create a demo html_document_plain() | |||
| * [036d454f80d6036fc1ba35db92161fd19c053635](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/036d454f80d6036fc1ba35db92161fd19c053635) | |||
| * `r github_sha_link("036d454f80d6036fc1ba35db92161fd19c053635")` | |||
| ```{r create-demo-html} | |||
| dir.create("dev/demo") | |||
| @@ -250,7 +254,7 @@ should be relative to `inst`. | |||
| ## 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. | |||
| Use the example from | |||
| @@ -266,7 +270,7 @@ const data = { | |||
| } | |||
| ``` | |||
| 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} | |||
| data <- list( | |||
| @@ -302,7 +306,7 @@ rData.textContent | |||
| ``` | |||
| 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} | |||
| let rData = document.getElementById('data') | |||
| @@ -319,7 +323,7 @@ Comment out the `data` on the JS side (but we'll want to see the structure later | |||
| ## 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, | |||
| such as `title`, `type` and `colors`. | |||
| @@ -335,7 +339,7 @@ Change the colors to | |||
| ## 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> | |||
| and add and test additional line options. | |||
| @@ -353,7 +357,7 @@ Find and implement an option to reduce the number of labels on the x-axis. | |||
| ## Turn on dots again and make navigable | |||
| * [93d4c74f4b30a819b5c22fd7cc8ff238fc62f572](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/93d4c74f4b30a819b5c22fd7cc8ff238fc62f572) | |||
| * `r github_sha_link("93d4c74f4b30a819b5c22fd7cc8ff238fc62f572")` | |||
| ```{r} | |||
| opts <- list( | |||
| @@ -369,7 +373,7 @@ opts <- list( | |||
| ## 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 | |||
| and how much work should be done on the JavaScript side. | |||
| @@ -451,7 +455,7 @@ x.data = chartData | |||
| ## 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`, | |||
| it's just a bit less coordinated. | |||
| @@ -485,7 +489,7 @@ and put them in the right places. | |||
| ## Declare dependencies | |||
| * [969fd962edf0be8f98ffff1823f8e08960ffb31a](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/969fd962edf0be8f98ffff1823f8e08960ffb31a) | |||
| * `r github_sha_link("969fd962edf0be8f98ffff1823f8e08960ffb31a")` | |||
| **FILE:** `inst/htmlwidgets/frappeChart.yaml` | |||
| @@ -500,7 +504,7 @@ Note: keep `htmlwidgets` in `src`! | |||
| ## Write the R function | |||
| * [cbc25a8f7bbf7e522f369f5fec7c2517ba768656](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/cbc25a8f7bbf7e522f369f5fec7c2517ba768656) | |||
| * `r github_sha_link("cbc25a8f7bbf7e522f369f5fec7c2517ba768656")` | |||
| **FILE:** `R/frappeChart.r` | |||
| @@ -511,7 +515,7 @@ Add appropriate arguments to `frappeChart()`. | |||
| * [colors](https://frappe.io/charts/docs/reference/configuration#colors)? | |||
| * [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: | |||
| @@ -529,7 +533,7 @@ Then go back and change it so we can find the element better. | |||
| ## Write JavaScript binding | |||
| * [6f141c4341a2c4f8615df81887e7927d2e765f11](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/6f141c4341a2c4f8615df81887e7927d2e765f11) | |||
| * `r github_sha_link("6f141c4341a2c4f8615df81887e7927d2e765f11")` | |||
| **FILE:** `inst/htmlwidgets/frappeChart.js` | |||
| @@ -545,7 +549,7 @@ The final step is to move the Javascript we wrote before into the js binding. | |||
| ### 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) | |||
| can be formatted using the `tooltipOptions` property: | |||
| @@ -568,7 +572,7 @@ tooltipOptions = list( | |||
| ## Shiny comes for free! | |||
| * [739d5945010d5e46ab3f9847fd412beb0766805d](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/739d5945010d5e46ab3f9847fd412beb0766805d) | |||
| * `r github_sha_link("739d5945010d5e46ab3f9847fd412beb0766805d")` | |||
| Create a basic Shiny app with | |||
| @@ -612,11 +616,17 @@ where `data` is the `data` part of the initial options object. | |||
| 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 | |||
| ``` | |||
| @@ -625,7 +635,8 @@ To make this work we will: | |||
| ``` | |||
| 1. Now, if nothing else, the `chart` object is accessible | |||
| 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` | |||
| @@ -637,7 +648,7 @@ To make this work we will: | |||
| Try with various values. You can increase the number of data points | |||
| 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 | |||
| // after factory function | |||
| @@ -658,9 +669,9 @@ To make this work we will: | |||
| 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. | |||
| Use the `el.id` to create a new id, like `el.id + '_selected'`. | |||
| @@ -670,7 +681,7 @@ To make this work we will: | |||
| 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. | |||
| ([e7fe0e1d87977823e6a040434b33e6d5cdf8eac1](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/e7fe0e1d87977823e6a040434b33e6d5cdf8eac1)) | |||
| (`r github_sha_link("e7fe0e1d87977823e6a040434b33e6d5cdf8eac1")` | |||
| This function basically reverses the chart processing and | |||
| and returns a list that should be a dataframe. | |||
| @@ -689,13 +700,13 @@ To make this work we will: | |||
| data[labelsName] = label | |||
| Shiny.setInputValue(el.id + '_selected', data) | |||
| }) | |||
| } | |||
| ``` | |||
| } | |||
| ``` | |||
| 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 | |||
| 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 | |||
| .onLoad <- function(libname, pkgname) { | |||
+ 43
- 35
dev/dev.md
Dosyayı Görüntüle
| @@ -19,7 +19,8 @@ of the R Markdown book is an excellent introduction. | |||
| ## 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, | |||
| so you can call it whatever you want | |||
| @@ -48,7 +49,7 @@ usethis::use_package("yaml") | |||
| ## 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. | |||
| @@ -107,7 +108,7 @@ usethis::use_git_ignore("node_modules") | |||
| ## 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 --> | |||
| @@ -130,7 +131,7 @@ and creates a file `R/frappeChart.R` with the functions | |||
| ## 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 | |||
| using a `<script>` tag in the HTML `<head>`. Look at the [documentation | |||
| @@ -182,7 +183,7 @@ etc. | |||
| ## 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 --> | |||
| @@ -229,7 +230,7 @@ should be relative to `inst`. | |||
| ## 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 | |||
| example from [Basic | |||
| @@ -246,7 +247,7 @@ const data = { | |||
| ``` | |||
| 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 | |||
| data <- list( | |||
| @@ -283,7 +284,7 @@ rData.textContent | |||
| 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)). | |||
| ([changelog: 7201e4](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/7201e436e72ebddee271cbf7c02a733ac81a5d86). | |||
| ``` js | |||
| let rData = document.getElementById('data') | |||
| @@ -300,7 +301,7 @@ side (but we’ll want to see the structure later). | |||
| ## 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, | |||
| such as `title`, `type` and `colors`. | |||
| @@ -317,7 +318,7 @@ Change the colors to | |||
| ## 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 | |||
| test additional line options. | |||
| @@ -336,7 +337,7 @@ x-axis. | |||
| ## 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 --> | |||
| @@ -354,7 +355,7 @@ opts <- list( | |||
| ## 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 | |||
| how much work should be done on the JavaScript side. One thing is clear | |||
| @@ -434,7 +435,8 @@ x.data = chartData | |||
| ## 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 | |||
| coordinated. | |||
| @@ -469,7 +471,7 @@ pieces and put them in the right places. | |||
| ## 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` | |||
| @@ -484,7 +486,8 @@ Note: keep `htmlwidgets` in `src`\! | |||
| ## 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` | |||
| @@ -495,7 +498,7 @@ Add appropriate arguments to `frappeChart()`. | |||
| - [colors](https://frappe.io/charts/docs/reference/configuration#colors)? | |||
| - [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: | |||
| `js4shiny::js4shiny_doc()`. | |||
| @@ -510,7 +513,7 @@ better. | |||
| ## 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` | |||
| @@ -527,7 +530,7 @@ binding. | |||
| ### 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) | |||
| can be formatted using the `tooltipOptions` property: | |||
| @@ -548,7 +551,7 @@ tooltipOptions = list( | |||
| ## 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 | |||
| @@ -589,20 +592,25 @@ where `data` is the `data` part of the initial options object. | |||
| 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()` | |||
| ([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 | |||
| 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 | |||
| @@ -614,7 +622,7 @@ To make this work we will: | |||
| 5. Create an update method that takes new data and updates an existing | |||
| chart. | |||
| ([5da4b68b5f60d8e6ee17cc8c4a009121539a2653](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/5da4b68b5f60d8e6ee17cc8c4a009121539a2653)) | |||
| ([changelog: 5da4b6](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/5da4b68b5f60d8e6ee17cc8c4a009121539a2653) | |||
| Demo with `app.R` | |||
| @@ -628,7 +636,7 @@ To make this work we will: | |||
| 6. Add a custom message handler that dependes on | |||
| `HTMLWidgets.shinyMode`. | |||
| ([5da4b68b5f60d8e6ee17cc8c4a009121539a2653](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/5da4b68b5f60d8e6ee17cc8c4a009121539a2653)) | |||
| ([changelog: 5da4b6](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/5da4b68b5f60d8e6ee17cc8c4a009121539a2653) | |||
| ``` js | |||
| // after factory function | |||
| @@ -651,10 +659,10 @@ To make this work we will: | |||
| 7. Write a user-friendly wrapper around `sendCustomMessage` called | |||
| `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 | |||
| ([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 | |||
| `data-select` event. Use the `el.id` to create a new id, like `el.id | |||
| @@ -664,8 +672,8 @@ To make this work we will: | |||
| 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 | |||
| 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 | |||
| returns a list that should be a dataframe. | |||
| @@ -684,13 +692,13 @@ To make this work we will: | |||
| data[labelsName] = label | |||
| Shiny.setInputValue(el.id + '_selected', data) | |||
| }) | |||
| } | |||
| } | |||
| ``` | |||
| 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 | |||
| 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 | |||
| .onLoad <- function(libname, pkgname) { | |||
Yükleniyor…