You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In order to implement additional functionality, we must change the third argument by adding React components provided by `react-sparklines`. We can do it like this:
138
+
In order to make our widget do something interesting, we must change the third argument by passing React components provided by `react-sparklines`. We can do it like this:
139
139
140
140
141
141
```{js eval = FALSE}
142
142
import * as SparklinesComponents from 'react-sparklines';
Instead of passing an empty object as the React components, we pass an object populated with all of the components exported by the `'react-sparklines'` module as `SparklinesComponents`.
149
149
150
+
We could also have exposed only a subset of the components exported by `react-sparklines` with code like the following:
151
+
152
+
```{js eval = FALSE}
153
+
import { Sparklines, SparklinesLine } from 'react-sparklines';
This function is the one responsible for creating an instance of our widget. In the `server` function of the generated `app.R`, we use it like this:
189
+
190
+
```{R eval = FALSE}
191
+
server <- function(input, output, session) {
192
+
output$widgetOutput <- renderReactSparklines(
193
+
reactSparklines("Hello world!")
194
+
)
195
+
}
196
+
```
197
+
198
+
In the code above, `renderReactSparklines` expects to receive the return value of `reactSparklines` as its argument.
199
+
200
+
`reactSparklines` is a thin wrapper around `htmlwidgets::createWidget`. Its most important argument, `message`, is the one we must change the handling of. In the current implementation, the following happens to `message`:
1. We call `htmltools::tag` to create a `div` with the list we created as its children
208
+
1. We call `reactR::reactMarkup` to prepare the tag to be rendered in the browser
209
+
1. We assign to `component`
210
+
211
+
Then, we pass `component` as the second argument of `htmlwidgets::createWidget`.
212
+
213
+
Widgets created using reactR expect for this argument to be a representation of `markup`, or either an `htmltools::tag` or a `reactR::component`. When we called `reactR.reactWidget` in our JavaScript, we created and installed the browser-side implementation of a widget that expects to receive markup and then renders that markup in the widget's HTML container.
214
+
215
+
Let's modify the `reactSparklines` function so that it handles `message` differently. In fact, let's change the meaning of that argument completely. Instead of a `message`, it should take an argument `data`, which is the vector of numbers to display as a sparkline graph:
Now, we're using the `data` argument in a more sophisticated way. We're assigning it to the attribute `data` of the `Sparklines` component, as per the first example in the [react-sparklines documentation](http://borisyankov.github.io/react-sparklines/). Then, we create a `SparklinesLine` component to tell `react-sparklines` the format to display the data.
239
+
240
+
Essentially, we're using R code that corresponds directly to the [JSX](https://reactjs.org/docs/introducing-jsx.html) syntax in the `react-sparklines` examples. This is a major benefit of using reactR: examples in JSX are generally easy to adapt.
241
+
242
+
Our widget now assumes that `data` is a numeric vector, and relies on the fact that this vector becomes a JavaScript array once it's sent to the browser.
243
+
244
+
After you've edited `R/reactSparklines.R`, run `devtools::install(quick = TRUE)` or hit `Ctrl-Shift-B` (macOS: `Cmd-Shift-B) to rebuild the package.
245
+
246
+
## Trying it out
247
+
248
+
It's finally time to modify `app.R` and test our widget modifications out. Open `app.R`, it should look like this:
249
+
250
+
```{r eval = FALSE}
251
+
library(shiny)
252
+
library(reactSparklines)
253
+
254
+
ui <- fluidPage(
255
+
titlePanel("reactR HTMLWidget Example"),
256
+
reactSparklinesOutput('widgetOutput')
257
+
)
258
+
259
+
server <- function(input, output, session) {
260
+
output$widgetOutput <- renderReactSparklines(
261
+
reactSparklines("Hello world!")
262
+
)
263
+
}
264
+
265
+
shinyApp(ui, server)
266
+
```
267
+
268
+
The thing we need to change is the argument to `reactSparklines`. It should no longer be a string, but a numeric vector to display as a sparkline graph. Here is the amended code:
269
+
270
+
```{r eval = FALSE}
271
+
library(shiny)
272
+
library(reactSparklines)
273
+
274
+
ui <- fluidPage(
275
+
titlePanel("reactR HTMLWidget Example"),
276
+
reactSparklinesOutput('widgetOutput')
277
+
)
278
+
279
+
server <- function(input, output, session) {
280
+
output$widgetOutput <- renderReactSparklines(
281
+
reactSparklines(sample.int(10, 10))
282
+
)
283
+
}
284
+
285
+
shinyApp(ui, server)
286
+
```
287
+
288
+
Now, when you run `app.R`, you should see something like the following:
Congratulations, you just wrote your first React-based widget!
295
+
296
+
Another thing you can try is running `reactSparklines(data = sample.int(10, 10))` directly in the RStudio Console. You should see a sparkline graph appear in the Viewer.
297
+
298
+
## Next steps
299
+
300
+
We've reached the end of this tutorial, but if you'd like to see how a sparklines library could be further improved, you might be interested in our [sparklines-example](https://github.com/react-R/sparklines-example) project. It picks up where we leave off, by creating a kind of DSL that makes the other sparkline types easily accessible from R.
0 commit comments