Skip to content
R HtmlWidget for displaying cropped image overlay
HTML JavaScript Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
R
bdd
bin
build/config
docs
inst/htmlwidgets
man
theSrc
.eslintignore
.eslintrc
.gitignore
.travis.yml
DESCRIPTION
NAMESPACE
README.md
gulpfile.js
package-lock.json
package.json

README.md

An R HTMLWidget that can generate single image graphics, mutli image graphics, or a table of single/multi image graphics.

Installation in R

  1. library(devtools)
  2. install_github('Displayr/rhtmlPictographs')

Simple Example to verify installation:

rhtmlPictographs::graphic('circle:lightblue')

Docs

The repo contains an internal web server that can be started via gulp serve. Once the server is running, on the index page of the web content there is a link to a tutorial. This is the best way to understand how to use the widget.

Developing and Contributing

Local Installation to Develop/Contribute

Prerequisites:

  1. Must have node.js version >= 6.1 installed
  2. Must have yarn installed globally (can use npm just to run, should use yarn if contributing)
  3. Must have Google Chrome installed
  4. tested on OSX only, should work in Windows/Linux

Steps:

  1. git clone git@github.com:Displayr/rhtmlPictographs.git
  2. cd rhtmlPictographs
  3. yarn install
  4. gulp serve

You should now see a page listing tutorial sections and several examples. Each of these pages has one or more pictographs defined.

Choose an example or add another example/tutorial to the internal www content. When changes to the widget source code or any other file in ./theSrc are saved, the browser will automatically reload.

Developer Docs

rhtmlPictograph relies heavily on rhtmlBuildUtils. You should read through the docs in the rhtmlBuildUtils repo to understand:

  1. which gulp tasks are available
  2. the constraints on file layout in your widget project
  3. How to perform visual testing.

Here are a few important notes (both detailed in the rhtmlBuildUtils docs) you must keep in mind:

  1. The last thing you do before committing is run gulp build to ensure all the autogenerated files are up to date.
  2. (With some exceptions) ONLY EDIT THINGS IN these directories: theSrc, bdd, docs, and sometimes build !! Many of the other files are auto generated based on the contents of theSrc. As an example, if you edit R/rhtmlTemplate.R and then run gulp build your changes will be DELETED FOREVER!, because R/rhtmlTemplate.R is just a copy of theSrc/R/htmlwidget.R. See htmlwidget_build_system for more details.

Contributing to rhtmlPictograph

  1. Do not work in master, as the master branch of rhtmlTemplate is used to verify the R server build process.
  2. Create a branch, make some changes, add test for your changes, update the docs if necessary, push your branch, and create a pull request on github.

How the git prepush hook works (aka: My git push got rejected ?!)

This project uses the npm husky module to add git lifecycle hooks to the project. These are defined in the scripts section of the package.json file.

Of particular interest is the prepush entry which runs a script that checks the project code style using the gulp lint command. If there are errors, then it will reject your git push command. You have two options:

  1. Fix the errors and try pushing again. To see which errors are in the code run gulp lint. To autofix as many as possible run gulp lint --fix; this will only report the errors it could not auto-fix. Don't forget to commit your code again before pushing.
  2. If you must (not recommended) add a --no-verify (i.e., git push origin head --no-verify) to skip the style checking.

Here is an illustrative sequence:

$ git push origin head

> husky - npm run -s prepush

...

.../rhtmlPictograph/bdd/steps/loadThePage.steps.js
  8:47  error  Missing semicolon  semi

✖ 1 problem (1 error, 0 warnings)

[17:50:09] 'lint' errored after 4.85 s

...

$ gulp lint --fix
[17:50:16] Starting 'lint'...
[17:50:21] Finished 'lint' after 4.94 s

$ git commit -a -m 'fix the style'
...

$ git push origin head

Detailed list of CSS class names - useful when targeting these DOM via the custom CSS feature

A bit out of date here

R Examples

The R examples are auto generated from the internal www contents. You are strongly encouraged to view the contents in it's intended glorious format (using a browser), and only use the R examples file for reference.

You can’t perform that action at this time.