Skip to content

Commit

Permalink
Update R examples in dashHtmlComponents (plotly#153)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rpkyle
rpkyle committed Mar 6, 2020
1 parent 4af5c8f commit b7dd839
Show file tree
Hide file tree
Showing 4 changed files with 248 additions and 44 deletions.
101 changes: 61 additions & 40 deletions packages/dash-html-components/dash-info.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ r_examples:
app$layout(
htmlDiv(list(
htmlAddress(children='5555 Avenue de Gasp\U{00E9}, Montr\U{00E9}al QC H2T 2A3')
htmlAddress(children='5555 Avenue de Gaspe, Montreal QC H2T 2A3')
)
)
)
Expand Down Expand Up @@ -133,7 +133,7 @@ r_examples:
htmlP('Dash is a user interface library for creating analytical web applications.\n
Those who use R for data analysis, data exploration, visualization,\n
modelling, instrument control, and reporting will find immediate use for Dash for R.'),
htmlAside('Plotly is a technical computing company with offices in Montr\U{00E9}al, Canada and Cambridge, Massachusetts.')
htmlAside('Plotly is a technical computing company with offices in Montreal, Canada and Cambridge, Massachusetts.')
)
)
)
Expand All @@ -156,7 +156,7 @@ r_examples:
htmlP('Dash is a user interface library for creating analytical web applications.\n
Those who use R for data analysis, data exploration, visualization,\n
modelling, instrument control, and reporting will find immediate use for Dash for R.'),
htmlAside('Plotly is a technical computing company with offices in Montr\U{00E9}al, Canada and Cambridge, Massachusetts.')
htmlAside('Plotly is a technical computing company with offices in Montreal, Canada and Cambridge, Massachusetts.')
)
)
)
Expand Down Expand Up @@ -215,7 +215,7 @@ r_examples:
)
)
app$run_server()
app$run_server()
- name: htmlBasefont
dontrun: TRUE
code: |
Expand Down Expand Up @@ -562,12 +562,12 @@ r_examples:
- name: htmlCommand
dontrun: TRUE
code: |
# This component is deprecated and its use is no longer recommended.
# This component is deprecated and its use is no longer recommended.
- name: htmlContent
dontrun: TRUE
code: |
# This feature is obsolete and no longer supported. It is recommended
# that you use the htmlSlot component instead.
# This feature is obsolete and no longer supported. It is recommended
# that you use the htmlSlot component instead.
- name: htmlData
dontrun: TRUE
code: |
Expand All @@ -586,10 +586,10 @@ r_examples:
)
)
)
# Include the following in a seperate CSS file in an
# `assets` directory in the root of your app.
#
#
# data:hover::after {
# content: ' (ID ' attr(value) ')';
# font-size: .7em;
Expand Down Expand Up @@ -941,7 +941,7 @@ r_examples:
)
)
app$run_server()
app$run_server()
- name: htmlH1
dontrun: TRUE
code: |
Expand Down Expand Up @@ -1172,7 +1172,7 @@ r_examples:
- name: htmlIsindex
dontrun: TRUE
code: |
# This component is deprecated and its use is no longer recommended.
# This component is deprecated and its use is no longer recommended.
- name: htmlKbd
dontrun: TRUE
code: |
Expand Down Expand Up @@ -1392,7 +1392,7 @@ r_examples:
htmlDiv(list(
htmlP(list(
htmlMark("Plotly"),
'develops online data analytics and visualization tools."
" develops online data analytics and visualization tools."
))
))
)
Expand Down Expand Up @@ -1490,7 +1490,7 @@ r_examples:
- name: htmlNextid
dontrun: TRUE
code: |
# This component is deprecated and its use is no longer recommended.
# This component is deprecated and its use is no longer recommended.
# The <nextid> tag has been obsolete since HTML Version 3.2.
- name: htmlNobr
dontrun: TRUE
Expand Down Expand Up @@ -1527,7 +1527,7 @@ r_examples:
code: |
# Note that htmlObjectEl generates the <object> HTML element;
# for more information, please visit the link in this
# component's description.
# component's description.
library(dash)
library(dashHtmlComponents)
Expand Down Expand Up @@ -1639,7 +1639,7 @@ r_examples:
htmlDiv(list(
htmlP("The <param> element is used to specify the parameters that apply to
plugin-powered content embedded with an <object> element.
Read more: https://html.com/tags/param/#ixzz5vBNn4V00"),
Read more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/param"),
htmlObjectEl(
#data = "link-to-data-file"
htmlParam(name = "controller", value = TRUE)
Expand Down Expand Up @@ -1756,11 +1756,18 @@ r_examples:
app$layout(
htmlDiv(list(
htmlRuby(
htmlRb(
"\U{65e5}"
)
)
htmlRuby(list(
"\U{6f22}",
htmlRp("("),
htmlRt("kan"),
htmlRp(")")
)),
htmlRuby(list(
"\U{5b57}",
htmlRp("("),
htmlRt("ji"),
htmlRp(")")
))
))
)
Expand All @@ -1770,22 +1777,27 @@ r_examples:
code: |
library(dash)
library(dashHtmlComponents)
library(dashCoreComponents)
app <- Dash$new()
app$layout(
htmlDiv(list(
htmlRuby(list(
"\U{6f22}",
htmlRp("("),
htmlRt("kan"),
htmlRp(")")
))
))
)
app$run_server()
"\U{6f22}",
htmlRp("("),
htmlRt("kan"),
htmlRp(")")
)),
htmlRuby(list(
"\U{5b57}",
htmlRp("("),
htmlRt("ji"),
htmlRp(")")
))
))
)
app$run_server()
- name: htmlRt
dontrun: TRUE
code: |
Expand All @@ -1796,12 +1808,20 @@ r_examples:
app$layout(
htmlDiv(list(
htmlRuby(list(
"\U{6f22}",
htmlRp("("),
htmlRt("kan"),
htmlRp(")")
)),
htmlRuby(list(
"\U{5b57}",
htmlRt("ji")
))
))
)
htmlRp("("),
htmlRt("ji"),
htmlRp(")")
))
))
)
app$run_server()
- name: htmlRtc
Expand Down Expand Up @@ -1848,7 +1868,8 @@ r_examples:
app$layout(
htmlDiv(list(
htmlS("htmlS generates strikethrough text"),
htmlP("htmlB generates bold text")
htmlP(),
htmlB("htmlB generates bold text")
))
)
Expand Down Expand Up @@ -1925,7 +1946,7 @@ r_examples:
# with caution; it is now considered an obsolete element
# within the Web Components suite. It is retained here
# solely for backwards compatibility reasons.
#
#
# For more information, please see the MDN link above.
- name: htmlSlot
dontrun: TRUE
Expand Down Expand Up @@ -2108,7 +2129,7 @@ r_examples:
app$layout(
htmlDiv(list(
"You can create an Table with HtmlTable",
"You can create a table with htmlTable:",
htmlBr(),
htmlTable(
list(
Expand Down Expand Up @@ -2366,7 +2387,7 @@ r_examples:
list(
"It might be useful to wrap dates like ",
htmlTime(dateTime = "2019-07-29", children = "July 29th"),
'in an htmlTime to make your datetimes machine readable"
" in an htmlTime to make your datetime strings machine-readable."
)
)
)
Expand All @@ -2380,8 +2401,8 @@ r_examples:
# This component's effects will be overridden by the index
# template in Dash for R. We suggest using Dash's API to
# set the page title instead:
#
# app <- Dash$new(name = 'My page title')
#
# app$title('My page title')
- name: htmlTr
dontrun: TRUE
code: |
Expand Down
12 changes: 8 additions & 4 deletions packages/dash-html-components/vignettes/dash-html-components.Rmd
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
---
title: "Dash HTML Components"
output: rmarkdown::html_vignette
output:
html_document:
highlight: tango
vignette: >
%\VignetteIndexEntry{Dash HTML Components}
%\VignetteEngine{knitr::knitr}
Expand Down Expand Up @@ -30,12 +32,12 @@ htmlDiv(list(

which gets converted (behind the scenes) into the following HTML in your web application:

```html
```
<div>
<h1>Hello Dash</h1>
<div>
<p>Dash converts Python classes into HTML</p>
<p>This conversion happens behind the scenes by Dash's JavaScript front-end</p>
<p>This conversion happens behind the scenes by the JavaScript front-end</p>
</div>
</div>
```
Expand All @@ -44,10 +46,12 @@ If you're not comfortable with HTML, don't worry! You can get 95% of the way the

```r
library(dashHtmlComponents)
library(dashCoreComponents)
library(dash)
dccMarkdown('''
#### Dash and Markdown
Dash supports [Markdown](https://daringfireball.net/projects/markdown/).
Markdown is a simple way to write and format text.
It includes a syntax for things like **bold text** and *italics*,
[links](https://daringfireball.net/projects/markdown/), inline `code` snippets, lists,
Expand Down Expand Up @@ -82,7 +86,7 @@ htmlDiv(list(

That Dash code will render this HTML markup:

```html
```
<div style="margin-bottom: 50px; margin-top: 25px;">
<div style="color: blue; font-size: 14px">
Expand Down
Loading

0 comments on commit b7dd839

Please sign in to comment.