├── _pkgdown.yml ├── funding.yml ├── vignettes ├── .gitignore ├── shinydemo.Rmd └── Intro.Rmd ├── example.PNG ├── tests ├── testthat.R └── testthat │ └── test-clickable-links.R ├── docs ├── reference │ ├── Rplot001.png │ ├── ico.html │ ├── index.html │ ├── aquastat_rounder.html │ ├── prettify.html │ ├── finisher.html │ ├── div_maker.html │ ├── tile_matrix.html │ └── multi_box.html ├── pkgdown.yml ├── link.svg ├── sitemap.xml ├── bootstrap-toc.css ├── docsearch.js ├── pkgdown.js ├── articles │ ├── index.html │ └── shinydemo.html ├── bootstrap-toc.js ├── 404.html ├── authors.html ├── news │ └── index.html ├── LICENSE-text.html ├── pkgdown.css ├── CODE_OF_CONDUCT.html └── docsearch.css ├── .Rbuildignore ├── .travis.yml ├── .gitignore ├── man ├── ico.Rd ├── aquastat_rounder.Rd ├── prettify.Rd ├── div_maker.Rd ├── finisher.Rd ├── multi_box.Rd ├── tile_matrix.Rd ├── solo_box_ct.Rd ├── solo_box.Rd └── solo_gradient_box.Rd ├── TileMaker.Rproj ├── NEWS.md ├── NAMESPACE ├── example.html ├── DESCRIPTION ├── LICENSE ├── ..Rcheck └── 00check.log ├── README.Rmd ├── CODE_OF_CONDUCT.md └── README.md /_pkgdown.yml: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /funding.yml: -------------------------------------------------------------------------------- 1 | patreon: amitkohli -------------------------------------------------------------------------------- /vignettes/.gitignore: -------------------------------------------------------------------------------- 1 | *.html 2 | *.R 3 | -------------------------------------------------------------------------------- /example.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DataStrategist/TileMaker/HEAD/example.PNG -------------------------------------------------------------------------------- /tests/testthat.R: -------------------------------------------------------------------------------- 1 | library(testthat) 2 | library(TileMaker) 3 | 4 | test_check("TileMaker") 5 | -------------------------------------------------------------------------------- /docs/reference/Rplot001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DataStrategist/TileMaker/HEAD/docs/reference/Rplot001.png -------------------------------------------------------------------------------- /docs/pkgdown.yml: -------------------------------------------------------------------------------- 1 | pandoc: '3.4' 2 | pkgdown: 2.1.3 3 | pkgdown_sha: ~ 4 | articles: 5 | Intro: Intro.html 6 | shinydemo: shinydemo.html 7 | last_built: 2025-08-14T22:38Z 8 | -------------------------------------------------------------------------------- /.Rbuildignore: -------------------------------------------------------------------------------- 1 | ^_pkgdown\.yml$ 2 | ^Meta$ 3 | ^doc$ 4 | ^docs$ 5 | ^.*\.css$ 6 | ^example.html$ 7 | ^.*\.Rproj$ 8 | ^\.Rproj\.user$ 9 | ^\.travis\.yml$ 10 | ^.*\.png$ 11 | ^README.Rmd$ 12 | ^.git$ 13 | CODE_OF_CONDUCT.md 14 | funding.yml 15 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | # R for travis: see documentation at https://docs.travis-ci.com/user/languages/r 2 | 3 | language: r 4 | cache: packages 5 | r_binary_packages: 6 | - dplyr 7 | 8 | r_github_packages: 9 | - jimhester/covr 10 | 11 | after_success: 12 | - Rscript -e 'covr::coveralls()' 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | Meta 2 | doc 3 | # History files 4 | .Rhistory 5 | .Rapp.history 6 | 7 | # Session Data files 8 | .RData 9 | # Example code in package build process 10 | *-Ex.R 11 | # RStudio files 12 | .Rproj.user/ 13 | # produced vignettes 14 | vignettes/*.html 15 | vignettes/*.pdf 16 | # OAuth2 token, see https://github.com/hadley/httr/releases/tag/v0.3 17 | .httr-oauth 18 | .Rproj.user 19 | inst/doc 20 | -------------------------------------------------------------------------------- /man/ico.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/tile_maker.R 3 | \name{ico} 4 | \alias{ico} 5 | \title{ico} 6 | \usage{ 7 | ico(x, chevron = FALSE) 8 | } 9 | \arguments{ 10 | \item{x}{Icon name. See https://getbootstrap.com/docs/3.3/components/} 11 | 12 | \item{chevron}{binary to denote whether there is a former value to compare 13 | against or not.} 14 | } 15 | \description{ 16 | Auxiliary function to generate icons 17 | } 18 | -------------------------------------------------------------------------------- /TileMaker.Rproj: -------------------------------------------------------------------------------- 1 | Version: 1.0 2 | 3 | RestoreWorkspace: Default 4 | SaveWorkspace: Default 5 | AlwaysSaveHistory: Default 6 | 7 | EnableCodeIndexing: Yes 8 | UseSpacesForTab: Yes 9 | NumSpacesForTab: 2 10 | Encoding: UTF-8 11 | 12 | RnwWeave: Sweave 13 | LaTeX: pdfLaTeX 14 | 15 | AutoAppendNewline: Yes 16 | StripTrailingWhitespace: Yes 17 | 18 | BuildType: Package 19 | PackageUseDevtools: Yes 20 | PackageInstallArgs: --no-multiarch --with-keep.source 21 | PackageRoxygenize: rd,collate,namespace 22 | -------------------------------------------------------------------------------- /man/aquastat_rounder.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/tile_maker.R 3 | \name{aquastat_rounder} 4 | \alias{aquastat_rounder} 5 | \title{Perform UN-style rounding} 6 | \usage{ 7 | aquastat_rounder(x) 8 | } 9 | \arguments{ 10 | \item{x}{number to round} 11 | } 12 | \value{ 13 | x, but rounded 14 | } 15 | \description{ 16 | Rounds numbers greater than 1000 to no decimals, 17 | greater than 100 to one decimal, etc. 18 | } 19 | \details{ 20 | DETAILS 21 | } 22 | \examples{ 23 | \dontrun{ 24 | if(interactive()){ 25 | #EXAMPLE1 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /NEWS.md: -------------------------------------------------------------------------------- 1 | # TileMaker 0.2.0 2 | 3 | * Created all new functions using htmlTools. All old functions have been removed (sorry!) 4 | 5 | * Seperated simple box from one that responds to threshold to clarify better hat imputs are required to each 6 | 7 | * file_maker() now doesn't need a filename 8 | 9 | * Added tile_matrix() function to make multiple buttons suitable to quickly take inputs from a dataframe 10 | 11 | * Added multi_box() function to create buttons that contain more than one value and icon. 12 | 13 | * CRAN-ready! 14 | 15 | # TileMaker 0.1.0 16 | 17 | * Converting function to stand-alone package 18 | -------------------------------------------------------------------------------- /NAMESPACE: -------------------------------------------------------------------------------- 1 | # Generated by roxygen2: do not edit by hand 2 | 3 | export(div_maker) 4 | export(finisher) 5 | export(ico) 6 | export(multi_box) 7 | export(prettify) 8 | export(solo_box) 9 | export(solo_box_ct) 10 | export(solo_gradient_box) 11 | export(tile_matrix) 12 | importFrom(dplyr,"%>%") 13 | importFrom(dplyr,case_when) 14 | importFrom(dplyr,pull) 15 | importFrom(htmltools,HTML) 16 | importFrom(htmltools,a) 17 | importFrom(htmltools,browsable) 18 | importFrom(htmltools,save_html) 19 | importFrom(htmltools,span) 20 | importFrom(htmltools,tag) 21 | importFrom(htmltools,tags) 22 | importFrom(purrr,pmap) 23 | importFrom(rlang,"!!") 24 | importFrom(rlang,enquo) 25 | importFrom(rlang,syms) 26 | importFrom(tibble,tibble) 27 | -------------------------------------------------------------------------------- /example.html: -------------------------------------------------------------------------------- 1 | 2 |

Hello

Quantativity factors

Inverse proportions

-------------------------------------------------------------------------------- /man/prettify.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/tile_maker.R 3 | \name{prettify} 4 | \alias{prettify} 5 | \title{apply pretty format or not} 6 | \usage{ 7 | prettify(x, pretty = NULL) 8 | } 9 | \arguments{ 10 | \item{x}{thingie to evaluate (whether it should be prettified or not)} 11 | 12 | \item{pretty}{inheriting the value that should be used as a big-number separator} 13 | } 14 | \value{ 15 | returns a character string that looks like x, but beautified 16 | } 17 | \description{ 18 | to be used inside the functions, just a convenient way to apply 19 | just-in-time formatting 20 | } 21 | \details{ 22 | DETAILS 23 | } 24 | \examples{ 25 | \dontrun{ 26 | if(interactive()){ 27 | #EXAMPLE1 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /docs/link.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 12 | 13 | -------------------------------------------------------------------------------- /DESCRIPTION: -------------------------------------------------------------------------------- 1 | Package: TileMaker 2 | Type: Package 3 | Title: Create Tiles Suitable For Html Dashboards 4 | Version: 0.2.9 5 | Author: Amit Kohli, Joshua Kunst 6 | Maintainer: Amit Kohli 7 | Description: This package builds handsome single-data-point boxes suitable for inclusion in dashboards. It uses the Bootstrap v3 css buttons to make the process easy. Acts as a more fully-featured alternative to infoBox and valueBox. 8 | License: MIT + file LICENSE 9 | LazyData: TRUE 10 | RoxygenNote: 7.1.2 11 | BugReports: https://github.com/DataStrategist/TileMaker/issues 12 | URL: http://datastrategist.github.io/TileMaker/ 13 | Imports: 14 | htmltools, 15 | purrr, 16 | dplyr, 17 | rlang, 18 | tibble 19 | Encoding: UTF-8 20 | Suggests: 21 | testthat, 22 | knitr, 23 | rmarkdown, 24 | ggplot2 25 | VignetteBuilder: knitr 26 | -------------------------------------------------------------------------------- /man/div_maker.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/tile_maker.R 3 | \name{div_maker} 4 | \alias{div_maker} 5 | \title{Div maker} 6 | \usage{ 7 | div_maker(subtitle, textModifier, ...) 8 | } 9 | \arguments{ 10 | \item{subtitle}{The text heading of this row of buttons} 11 | 12 | \item{textModifier}{Optional css category of "large" text. In this case, 13 | subtitle. Use css flags 14 | like "h2", "h3","p", etc. Default = "h1"} 15 | 16 | \item{...}{\code{buttons to insert into the div} elements.} 17 | } 18 | \description{ 19 | This function takes buttons made by any of the solo or multi buttons and 20 | makes an a row (HTML `div`) suitable for inclusion in other HTML code, or for 21 | inclusion within the function of this package `finisher`. 22 | } 23 | \examples{ 24 | div_maker( 25 | subtitle = "Quantativity factors", textModifier = "h1", 26 | solo_gradient_box(value = 70), 27 | solo_box(value = 34) 28 | ) 29 | } 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 Amit 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /..Rcheck/00check.log: -------------------------------------------------------------------------------- 1 | * using log directory ‘/home/runner/work/TileMaker/TileMaker/..Rcheck’ 2 | * using R version 4.3.3 (2024-02-29) 3 | * using platform: x86_64-pc-linux-gnu (64-bit) 4 | * R was compiled by 5 | gcc (Ubuntu 13.2.0-23ubuntu3) 13.2.0 6 | GNU Fortran (Ubuntu 13.2.0-23ubuntu3) 13.2.0 7 | * running under: Ubuntu 24.04.2 LTS 8 | * using session charset: UTF-8 9 | * using options ‘--no-examples --no-tests --no-vignettes’ 10 | * checking for file ‘./DESCRIPTION’ ... OK 11 | * checking extension type ... Package 12 | * this is package ‘TileMaker’ version ‘0.2.9’ 13 | * package encoding: UTF-8 14 | * checking package namespace information ... OK 15 | * checking package dependencies ... ERROR 16 | Packages required but not available: 17 | 'htmltools', 'purrr', 'dplyr', 'rlang', 'tibble' 18 | 19 | Packages suggested but not available: 20 | 'testthat', 'knitr', 'rmarkdown', 'ggplot2' 21 | 22 | VignetteBuilder package required for checking but not installed: ‘knitr’ 23 | 24 | The suggested packages are required for a complete check. 25 | Checking can be attempted without them by setting the environment 26 | variable _R_CHECK_FORCE_SUGGESTS_ to a false value. 27 | 28 | See section ‘The DESCRIPTION file’ in the ‘Writing R Extensions’ 29 | manual. 30 | * DONE 31 | Status: 1 ERROR 32 | -------------------------------------------------------------------------------- /docs/sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | /404.html 5 | 6 | 7 | /articles/index.html 8 | 9 | 10 | /articles/Intro.html 11 | 12 | 13 | /articles/shinydemo.html 14 | 15 | 16 | /authors.html 17 | 18 | 19 | /CODE_OF_CONDUCT.html 20 | 21 | 22 | /index.html 23 | 24 | 25 | /LICENSE-text.html 26 | 27 | 28 | /news/index.html 29 | 30 | 31 | /reference/aquastat_rounder.html 32 | 33 | 34 | /reference/div_maker.html 35 | 36 | 37 | /reference/finisher.html 38 | 39 | 40 | /reference/ico.html 41 | 42 | 43 | /reference/index.html 44 | 45 | 46 | /reference/multi_box.html 47 | 48 | 49 | /reference/prettify.html 50 | 51 | 52 | /reference/solo_box.html 53 | 54 | 55 | /reference/solo_gradient_box.html 56 | 57 | 58 | /reference/tile_matrix.html 59 | 60 | 61 | -------------------------------------------------------------------------------- /man/finisher.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/tile_maker.R 3 | \name{finisher} 4 | \alias{finisher} 5 | \title{finisher} 6 | \usage{ 7 | finisher( 8 | title = NULL, 9 | css = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css", 10 | file = NULL, 11 | textModifier = "h1", 12 | divs 13 | ) 14 | } 15 | \arguments{ 16 | \item{title}{Title. Default NULL} 17 | 18 | \item{css}{A string indicating css url, for final installations pls save the 19 | css file locally. By default we are using the 3.3.7 bootstrap CDN because 20 | they support icons, but some others that might be interesting to you are: 21 | https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css or 22 | https://bootswatch.com/4/flatly/bootstrap.css (but if you use version 4 you 23 | will lose the ability to display icons).} 24 | 25 | \item{file}{Optional filename if you desire to save the file.} 26 | 27 | \item{textModifier}{Optional css category of "large" text. In this case, 28 | title. Default=h1} 29 | 30 | \item{divs}{\code{div_maker} elements.} 31 | } 32 | \description{ 33 | Function 3 of 3, the last step. This function grabs the Divs created by 34 | `DivMaker`, or individual buttons if so desired, and combines them into a 35 | freestanding html file. Use this when you don't want the buttons to be part 36 | of a file, but a file itself. or, you could also use this as a convenient way 37 | of wrapping up buttons without using a div (although it is a bit irregular). 38 | } 39 | -------------------------------------------------------------------------------- /vignettes/shinydemo.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "TileMaker in Shiny" 3 | output: rmarkdown::html_vignette 4 | vignette: > 5 | %\VignetteIndexEntry{Demo of Shiny} 6 | %\VignetteEngine{knitr::rmarkdown} 7 | %\VignetteEncoding{UTF-8} 8 | --- 9 | 10 | ```{r setup, include = FALSE} 11 | knitr::opts_chunk$set( 12 | collapse = TRUE, 13 | comment = "#>" 14 | ) 15 | ``` 16 | 17 | It is also possible to push these Tiles into a Shiny app, using the `htmlOutput` and `renderUI`. 18 | 19 | You can either assign objects outside the Shiny call (in the below example b1 and d1 which includes b1 and b2), or you can embed buttons inside the Shiny app to display values from there. 20 | 21 | (In order to make this work, uncomment the last line in your console. ) 22 | 23 | 24 | ```{r} 25 | library(dplyr) 26 | library(htmltools) 27 | library(TileMaker) 28 | 29 | b1 <- solo_box(value = 3.57, txt = "Times apple eaten", icon = "apple") 30 | b2 <- solo_box(value = 13.7, txt = "Nutritional value", size = "lg") 31 | 32 | d1 <- div_maker(subtitle = "Quantativity factors", textModifier = "h2", b1, b2) 33 | 34 | # ## Shinydashboard Test -------------- 35 | # ## app.R ## 36 | # library(shinydashboard) 37 | # library(shiny) 38 | # 39 | # ui <- dashboardPage( 40 | # dashboardHeader(title = "Basic dashboard"), 41 | # dashboardSidebar( 42 | # sliderInput("slider", "Number of observations:", 1, 100, 50)), 43 | # dashboardBody( 44 | # # Boxes need to be put in a row (or column) 45 | # fluidRow( 46 | # box( 47 | # b1, d1, htmlOutput("plot1") 48 | # ) 49 | # ) 50 | # ) 51 | # ) 52 | # 53 | # server <- function(input, output) { 54 | # output$plot1 <- renderUI({ 55 | # div_maker(subtitle = "boom", textModifier = "h2", solo_box(value = input$slider, txt = "Times apple eaten", icon = "apple")) 56 | # }) 57 | # } 58 | 59 | # shinyApp(ui, server) 60 | ``` 61 | 62 | -------------------------------------------------------------------------------- /man/multi_box.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/tile_maker.R 3 | \name{multi_box} 4 | \alias{multi_box} 5 | \title{multi_box} 6 | \usage{ 7 | multi_box( 8 | icons = NULL, 9 | txt = NULL, 10 | values = NULL, 11 | title = NULL, 12 | size = "md", 13 | color = "info", 14 | link = NULL, 15 | number_zoom = 150, 16 | hover = NULL, 17 | ... 18 | ) 19 | } 20 | \arguments{ 21 | \item{icons}{vector of Icons to display, Default: NULL} 22 | 23 | \item{txt}{Optional subtext that should appear under the value} 24 | 25 | \item{values}{vector of values to display, Default: NULL} 26 | 27 | \item{title}{Top title, Default: NULL} 28 | 29 | \item{size}{Optional size specified in the bootstrap css classes: 30 | "xs","sm","md","lg")} 31 | 32 | \item{color}{Optional bootstrap css element that governs the color. 33 | https://v4-alpha.getbootstrap.com/utilities/colors/ Choose from: "muted", 34 | "primary", "success", "info", "warning", "danger", Default: 'info'} 35 | 36 | \item{link}{Optional hyperlink to redirect to after a user click, Default: 37 | NULL} 38 | 39 | \item{number_zoom}{Optional magnification \% for number vs normal text, 40 | Default: 150} 41 | 42 | \item{hover}{Optional tooltip, or text that will show up when a user rests their 43 | mouse over the tile, Default: NULL} 44 | 45 | \item{...}{add any other html code here} 46 | } 47 | \value{ 48 | an HTML object 49 | } 50 | \description{ 51 | Create a tile that contains more than one value, icon and text 52 | } 53 | \details{ 54 | Allows for each button to contain several icon-number-text descriptions. 55 | } 56 | \examples{ 57 | library(dplyr) 58 | multi_box( 59 | values = c(21, 45), title = "Important
button", 60 | number_zoom = 300, icons = c("apple", "calendar"), color = "warning", 61 | txt = c("times", "reports") 62 | ) \%>\% 63 | finisher(divs = .) 64 | \dontrun{ 65 | if (interactive()) { 66 | # EXAMPLE1 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /docs/bootstrap-toc.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Table of Contents v0.4.1 (http://afeld.github.io/bootstrap-toc/) 3 | * Copyright 2015 Aidan Feldman 4 | * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) */ 5 | 6 | /* modified from https://github.com/twbs/bootstrap/blob/94b4076dd2efba9af71f0b18d4ee4b163aa9e0dd/docs/assets/css/src/docs.css#L548-L601 */ 7 | 8 | /* All levels of nav */ 9 | nav[data-toggle='toc'] .nav > li > a { 10 | display: block; 11 | padding: 4px 20px; 12 | font-size: 13px; 13 | font-weight: 500; 14 | color: #767676; 15 | } 16 | nav[data-toggle='toc'] .nav > li > a:hover, 17 | nav[data-toggle='toc'] .nav > li > a:focus { 18 | padding-left: 19px; 19 | color: #563d7c; 20 | text-decoration: none; 21 | background-color: transparent; 22 | border-left: 1px solid #563d7c; 23 | } 24 | nav[data-toggle='toc'] .nav > .active > a, 25 | nav[data-toggle='toc'] .nav > .active:hover > a, 26 | nav[data-toggle='toc'] .nav > .active:focus > a { 27 | padding-left: 18px; 28 | font-weight: bold; 29 | color: #563d7c; 30 | background-color: transparent; 31 | border-left: 2px solid #563d7c; 32 | } 33 | 34 | /* Nav: second level (shown on .active) */ 35 | nav[data-toggle='toc'] .nav .nav { 36 | display: none; /* Hide by default, but at >768px, show it */ 37 | padding-bottom: 10px; 38 | } 39 | nav[data-toggle='toc'] .nav .nav > li > a { 40 | padding-top: 1px; 41 | padding-bottom: 1px; 42 | padding-left: 30px; 43 | font-size: 12px; 44 | font-weight: normal; 45 | } 46 | nav[data-toggle='toc'] .nav .nav > li > a:hover, 47 | nav[data-toggle='toc'] .nav .nav > li > a:focus { 48 | padding-left: 29px; 49 | } 50 | nav[data-toggle='toc'] .nav .nav > .active > a, 51 | nav[data-toggle='toc'] .nav .nav > .active:hover > a, 52 | nav[data-toggle='toc'] .nav .nav > .active:focus > a { 53 | padding-left: 28px; 54 | font-weight: 500; 55 | } 56 | 57 | /* from https://github.com/twbs/bootstrap/blob/e38f066d8c203c3e032da0ff23cd2d6098ee2dd6/docs/assets/css/src/docs.css#L631-L634 */ 58 | nav[data-toggle='toc'] .nav > .active > ul { 59 | display: block; 60 | } 61 | -------------------------------------------------------------------------------- /docs/docsearch.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | // register a handler to move the focus to the search bar 4 | // upon pressing shift + "/" (i.e. "?") 5 | $(document).on('keydown', function(e) { 6 | if (e.shiftKey && e.keyCode == 191) { 7 | e.preventDefault(); 8 | $("#search-input").focus(); 9 | } 10 | }); 11 | 12 | $(document).ready(function() { 13 | // do keyword highlighting 14 | /* modified from https://jsfiddle.net/julmot/bL6bb5oo/ */ 15 | var mark = function() { 16 | 17 | var referrer = document.URL ; 18 | var paramKey = "q" ; 19 | 20 | if (referrer.indexOf("?") !== -1) { 21 | var qs = referrer.substr(referrer.indexOf('?') + 1); 22 | var qs_noanchor = qs.split('#')[0]; 23 | var qsa = qs_noanchor.split('&'); 24 | var keyword = ""; 25 | 26 | for (var i = 0; i < qsa.length; i++) { 27 | var currentParam = qsa[i].split('='); 28 | 29 | if (currentParam.length !== 2) { 30 | continue; 31 | } 32 | 33 | if (currentParam[0] == paramKey) { 34 | keyword = decodeURIComponent(currentParam[1].replace(/\+/g, "%20")); 35 | } 36 | } 37 | 38 | if (keyword !== "") { 39 | $(".contents").unmark({ 40 | done: function() { 41 | $(".contents").mark(keyword); 42 | } 43 | }); 44 | } 45 | } 46 | }; 47 | 48 | mark(); 49 | }); 50 | }); 51 | 52 | /* Search term highlighting ------------------------------*/ 53 | 54 | function matchedWords(hit) { 55 | var words = []; 56 | 57 | var hierarchy = hit._highlightResult.hierarchy; 58 | // loop to fetch from lvl0, lvl1, etc. 59 | for (var idx in hierarchy) { 60 | words = words.concat(hierarchy[idx].matchedWords); 61 | } 62 | 63 | var content = hit._highlightResult.content; 64 | if (content) { 65 | words = words.concat(content.matchedWords); 66 | } 67 | 68 | // return unique words 69 | var words_uniq = [...new Set(words)]; 70 | return words_uniq; 71 | } 72 | 73 | function updateHitURL(hit) { 74 | 75 | var words = matchedWords(hit); 76 | var url = ""; 77 | 78 | if (hit.anchor) { 79 | url = hit.url_without_anchor + '?q=' + escape(words.join(" ")) + '#' + hit.anchor; 80 | } else { 81 | url = hit.url + '?q=' + escape(words.join(" ")); 82 | } 83 | 84 | return url; 85 | } 86 | -------------------------------------------------------------------------------- /README.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | output: github_document 3 | --- 4 | 5 | [![Travis-CI Build Status](https://travis-ci.org/DataStrategist/TileMaker.svg?branch=master)](https://travis-ci.org/DataStrategist/TileMaker) 6 | [![Coverage Status](https://coveralls.io/repos/github/DataStrategist/TileMaker/badge.svg?branch=master)](https://coveralls.io/github/DataStrategist/TileMaker?branch=master) 7 | [![saythanks](https://img.shields.io/badge/say-thanks-ff69b4.svg)](https://saythanks.io/to/DataStrategist) 8 | 9 | # TileMaker 10 | An R library that enables the creation of data tiles for inclusion in a html dashboard or some such. 11 | 12 | To install, please type: 13 | ``` 14 | devtools::install_github("DataStrategist/TileMaker", build_vignettes = TRUE) 15 | ``` 16 | 17 | Please see the [Intro Vignette](http://datastrategist.github.io/TileMaker/articles/Intro.html) to learn more about how to do some lovely stuff, but in the meantime, here's the basics: 18 | 19 | This package is intended to "highlight single values", mainly in dashboards, reports or Shiny apps, and is highly customizeable. This is what it looks like: 20 | 21 | ```{r} 22 | suppressWarnings(suppressMessages(library(tidyverse,quietly = TRUE))) 23 | library(TileMaker) 24 | 25 | a <- solo_box(value = 3, txt = "Little piggies
go to the market", icon = "piggy-bank") 26 | b <- solo_gradient_box(value = 65, txt = "test score I got") 27 | c <- solo_gradient_box(value = 95, txt = "test score I wanted") 28 | d <- multi_box(values = c(4, 5, 6), txt = c("Sally", "George", "Mohammed"), icons = c("check", "plus", "calendar"), title = "Candidates") 29 | 30 | e <- iris %>% 31 | group_by(Species) %>% 32 | summarize(a = mean(Petal.Length)) %>% 33 | tile_matrix(values = a, txt = Species) 34 | 35 | f <- iris %>% 36 | group_by(Species) %>% 37 | summarize(a = mean(Petal.Length)) %>% 38 | mutate(old_a = c(3, 4, 5)) %>% 39 | tile_matrix(data = ., values = a, txt = Species, former = old_a) 40 | 41 | d1 <- div_maker(subtitle = "First line", textModifier = "h1", a, b) 42 | d2 <- div_maker(subtitle = "Second line", textModifier = "h1", c, d) 43 | d3 <- div_maker(subtitle = "Boom line", textModifier = "h1", e, f) 44 | 45 | finisher( 46 | title = "Important Reportings", 47 | css = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css", 48 | file = NULL, 49 | textModifier = "h1",div_maker(subtitle = "Boom", textModifier = "hi",d1, d2, d3) 50 | ) 51 | ``` 52 | -------------------------------------------------------------------------------- /man/tile_matrix.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/tile_maker.R 3 | \name{tile_matrix} 4 | \alias{tile_matrix} 5 | \title{tileMatrix} 6 | \usage{ 7 | tile_matrix( 8 | data, 9 | values, 10 | txt, 11 | icon, 12 | former, 13 | target = 100, 14 | thresholdHigh = 90, 15 | thresholdLow = 50, 16 | cols = 4, 17 | title = NULL, 18 | roundVal = 1, 19 | textModifier = "h1" 20 | ) 21 | } 22 | \arguments{ 23 | \item{data}{a dataframe containing the data you would like to plot} 24 | 25 | \item{values}{a Vector containing values for each tile, contained in the 26 | dataframe `data`} 27 | 28 | \item{txt}{Vector containing titles for each tile, contained in the datframe 29 | `data`} 30 | 31 | \item{icon}{Optional glyphicon that should be displayed from 32 | https://getbootstrap.com/docs/3.3/components/ you need only supply the name 33 | of thing you want, like "check"... not the full "gyphicon-check"} 34 | 35 | \item{former}{optional vector containing former values (to show change from 36 | last), contained in the datframe `data`} 37 | 38 | \item{target}{Optional target that the value should be compared against. Use 39 | with thresholdHigh and THresholdLow} 40 | 41 | \item{thresholdHigh}{Optional edge between \"green\" and \"orange\" from 42 | 0-100 as a percent of target. IE, this value represents the RATIO of the 43 | VALUE to the target that, if above or equal to the thresholdHigh will show 44 | as green, and if not, as orange. Use w/ target and thresholdLow.} 45 | 46 | \item{thresholdLow}{Optional border between \"orange\" and \"red\" from 0-100 47 | as a percent of target. IE, this value represents the RATIO of the VALUE to 48 | the target that, if above or equal to the ThresholdLow will show as orange, 49 | and if not, as red. Use w/ target and thresholdHigh.} 50 | 51 | \item{cols}{Number of columns that the matrix should tile around. Defaults to 52 | 4} 53 | 54 | \item{title}{The title the matrix should have.} 55 | 56 | \item{roundVal}{Number of decimals that Value will be rounded to. Defaults to 57 | 1} 58 | 59 | \item{textModifier}{Optional css category of "large" text. In this case, the 60 | icon, value and unit. Default=h1} 61 | } 62 | \value{ 63 | Returns a list object containing the matrix of buttons 64 | } 65 | \description{ 66 | Create a matrix of buttons suitable for quick comparisons 67 | } 68 | \examples{ 69 | finisher(title = "Tile Matrix", divs = tile_matrix( 70 | data = head(iris), 71 | values = Sepal.Length, 72 | txt = Species 73 | )) 74 | } 75 | -------------------------------------------------------------------------------- /man/solo_box_ct.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/tile_maker.R 3 | \name{solo_box_ct} 4 | \alias{solo_box_ct} 5 | \title{solo_box_ct} 6 | \usage{ 7 | solo_box_ct( 8 | value = NULL, 9 | txt = NULL, 10 | size = "md", 11 | icon = NULL, 12 | color = "info", 13 | link = NULL, 14 | units = NULL, 15 | hover = NULL, 16 | textModifier = "h1", 17 | ... 18 | ) 19 | } 20 | \arguments{ 21 | \item{value}{The numeric value you want to highlight (the main enchilada)} 22 | 23 | \item{txt}{Optional subtext that should appear under the value} 24 | 25 | \item{size}{Optional size specified in the bootstrap css classes: 26 | "xs","sm","md","lg")} 27 | 28 | \item{icon}{Optional glyphicon that should be displayed from 29 | https://getbootstrap.com/docs/3.3/components/ you need only supply the name 30 | of thing you want, like "check"... not the full "gyphicon-check"} 31 | 32 | \item{color}{Optional bootstrap css element that governs the color. 33 | https://v4-alpha.getbootstrap.com/utilities/colors/ Choose from: "muted", 34 | "primary", "success", "info", "warning", "danger"} 35 | 36 | \item{link}{Optional hyperlink that should be followed on click} 37 | 38 | \item{units}{Optional units that should be displayed after Value} 39 | 40 | \item{hover}{Optional tooltip, or text that will show up when a user rests 41 | their mouse over the tile.} 42 | 43 | \item{textModifier}{Optional css category of "large" text. In this case, the 44 | icon, value and unit. In this case, title. Default=h1} 45 | 46 | \item{...}{Optional additional html elements. For example, if you would like 47 | two buttons to fit into a section in a flexdashboard, you could specify 48 | style = 'width:100\%;height:50\%'} 49 | } 50 | \description{ 51 | Simple tile, suitable for usage with summarywidget in a 52 | crosstalk context 53 | } 54 | \examples{ 55 | b1 <- solo_box(color = "warning", value = 3.57, txt = "B") 56 | b2 <- solo_box(color = "danger", value = 13.7, txt = "Nutritional value") 57 | b3 <- solo_box(color = "success", value = 1, txt = "Yumminess factor") 58 | b4 <- solo_box(value = 3.57, former = 3, txt = "Times apple eaten", icon = "apple") 59 | finisher(title = "straight buttons", divs = b1) 60 | finisher( 61 | title = "with divs", 62 | divs = div_maker( 63 | subtitle = "boom", 64 | textModifier = "h1", 65 | div_maker(subtitle = "Boom", textModifier = "hi", b1, b2, b3) 66 | ) 67 | ) 68 | 69 | ## Or taking advantage of the ability to change the textModifier: 70 | finisher( 71 | title = "h4 modifier", 72 | divs = solo_box( 73 | value = 3, txt = "uh huh", 74 | former = 2, textModifier = "h4" 75 | ) 76 | ) 77 | } 78 | -------------------------------------------------------------------------------- /man/solo_box.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/tile_maker.R 3 | \name{solo_box} 4 | \alias{solo_box} 5 | \title{solo_box} 6 | \usage{ 7 | solo_box( 8 | value = NULL, 9 | txt = NULL, 10 | former = NULL, 11 | size = "md", 12 | icon = NULL, 13 | color = "info", 14 | link = NULL, 15 | units = NULL, 16 | hover = NULL, 17 | textModifier = "h1", 18 | pretty = NULL, 19 | ... 20 | ) 21 | } 22 | \arguments{ 23 | \item{value}{The numeric value you want to highlight (the main enchilada)} 24 | 25 | \item{txt}{Optional subtext that should appear under the value} 26 | 27 | \item{former}{The numeric old value to use for comparison to 'value'} 28 | 29 | \item{size}{Optional size specified in the bootstrap css classes: 30 | "xs","sm","md","lg")} 31 | 32 | \item{icon}{Optional glyphicon that should be displayed from 33 | https://getbootstrap.com/docs/3.3/components/ you need only supply the name 34 | of thing you want, like "check"... not the full "gyphicon-check"} 35 | 36 | \item{color}{Optional bootstrap css element that governs the color. 37 | https://v4-alpha.getbootstrap.com/utilities/colors/ Choose from: "muted", 38 | "primary", "success", "info", "warning", "danger"} 39 | 40 | \item{link}{Optional hyperlink that should be followed on click} 41 | 42 | \item{units}{Optional units that should be displayed after Value} 43 | 44 | \item{hover}{Optional tooltip, or text that will show up when a user rests 45 | their mouse over the tile.} 46 | 47 | \item{textModifier}{Optional css category of "large" text. In this case, the 48 | icon, value and unit. In this case, title. Default=h1} 49 | 50 | \item{pretty}{Optionally allow numbers to become embellished. Accepted values 51 | are NULL (default), or the desired divider (",", ".", " ", etc). If this 52 | option is not left as FALSE, rounding is automatically implemented.} 53 | 54 | \item{...}{Optional additional html elements. For example, if you would like 55 | two buttons to fit into a section in a flexdashboard, you could specify 56 | style = 'width:100\%;height:50\%'} 57 | } 58 | \description{ 59 | This function crafts the actual tile per se, including the 60 | specific aesthetic traits for each tile. This is the simple version where 61 | you explicitly state the color. 62 | } 63 | \examples{ 64 | b1 <- solo_box(color = "warning", value = 3.57, txt = "B") 65 | b2 <- solo_box(color = "danger", value = 13.7, txt = "Nutritional value") 66 | b3 <- solo_box(color = "success", value = 1, txt = "Yumminess factor") 67 | b4 <- solo_box(value = 3.57, former = 3, txt = "Times apple eaten", icon = "apple") 68 | finisher(title = "straight buttons", divs = b1) 69 | finisher( 70 | title = "with divs", 71 | divs = div_maker( 72 | subtitle = "boom", 73 | textModifier = "h1", 74 | div_maker(subtitle = "Boom", textModifier = "hi", b1, b2, b3) 75 | ) 76 | ) 77 | 78 | ## Or taking advantage of the ability to change the textModifier: 79 | finisher( 80 | title = "h4 modifier", 81 | divs = solo_box( 82 | value = 3, txt = "uh huh", 83 | former = 2, textModifier = "h4" 84 | ) 85 | ) 86 | } 87 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at amit@amitkohli.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /docs/pkgdown.js: -------------------------------------------------------------------------------- 1 | /* http://gregfranko.com/blog/jquery-best-practices/ */ 2 | (function($) { 3 | $(function() { 4 | 5 | $('.navbar-fixed-top').headroom(); 6 | 7 | $('body').css('padding-top', $('.navbar').height() + 10); 8 | $(window).resize(function(){ 9 | $('body').css('padding-top', $('.navbar').height() + 10); 10 | }); 11 | 12 | $('[data-toggle="tooltip"]').tooltip(); 13 | 14 | var cur_path = paths(location.pathname); 15 | var links = $("#navbar ul li a"); 16 | var max_length = -1; 17 | var pos = -1; 18 | for (var i = 0; i < links.length; i++) { 19 | if (links[i].getAttribute("href") === "#") 20 | continue; 21 | // Ignore external links 22 | if (links[i].host !== location.host) 23 | continue; 24 | 25 | var nav_path = paths(links[i].pathname); 26 | 27 | var length = prefix_length(nav_path, cur_path); 28 | if (length > max_length) { 29 | max_length = length; 30 | pos = i; 31 | } 32 | } 33 | 34 | // Add class to parent
  • , and enclosing
  • if in dropdown 35 | if (pos >= 0) { 36 | var menu_anchor = $(links[pos]); 37 | menu_anchor.parent().addClass("active"); 38 | menu_anchor.closest("li.dropdown").addClass("active"); 39 | } 40 | }); 41 | 42 | function paths(pathname) { 43 | var pieces = pathname.split("/"); 44 | pieces.shift(); // always starts with / 45 | 46 | var end = pieces[pieces.length - 1]; 47 | if (end === "index.html" || end === "") 48 | pieces.pop(); 49 | return(pieces); 50 | } 51 | 52 | // Returns -1 if not found 53 | function prefix_length(needle, haystack) { 54 | if (needle.length > haystack.length) 55 | return(-1); 56 | 57 | // Special case for length-0 haystack, since for loop won't run 58 | if (haystack.length === 0) { 59 | return(needle.length === 0 ? 0 : -1); 60 | } 61 | 62 | for (var i = 0; i < haystack.length; i++) { 63 | if (needle[i] != haystack[i]) 64 | return(i); 65 | } 66 | 67 | return(haystack.length); 68 | } 69 | 70 | /* Clipboard --------------------------*/ 71 | 72 | function changeTooltipMessage(element, msg) { 73 | var tooltipOriginalTitle=element.getAttribute('data-original-title'); 74 | element.setAttribute('data-original-title', msg); 75 | $(element).tooltip('show'); 76 | element.setAttribute('data-original-title', tooltipOriginalTitle); 77 | } 78 | 79 | if(ClipboardJS.isSupported()) { 80 | $(document).ready(function() { 81 | var copyButton = ""; 82 | 83 | $("div.sourceCode").addClass("hasCopyButton"); 84 | 85 | // Insert copy buttons: 86 | $(copyButton).prependTo(".hasCopyButton"); 87 | 88 | // Initialize tooltips: 89 | $('.btn-copy-ex').tooltip({container: 'body'}); 90 | 91 | // Initialize clipboard: 92 | var clipboardBtnCopies = new ClipboardJS('[data-clipboard-copy]', { 93 | text: function(trigger) { 94 | return trigger.parentNode.textContent.replace(/\n#>[^\n]*/g, ""); 95 | } 96 | }); 97 | 98 | clipboardBtnCopies.on('success', function(e) { 99 | changeTooltipMessage(e.trigger, 'Copied!'); 100 | e.clearSelection(); 101 | }); 102 | 103 | clipboardBtnCopies.on('error', function() { 104 | changeTooltipMessage(e.trigger,'Press Ctrl+C or Command+C to copy'); 105 | }); 106 | }); 107 | } 108 | })(window.jQuery || window.$) 109 | -------------------------------------------------------------------------------- /tests/testthat/test-clickable-links.R: -------------------------------------------------------------------------------- 1 | context("test-clickable-links") 2 | 3 | test_that("panels without links don't have anchor tags", { 4 | # Test solo_box without link 5 | box_no_link <- solo_box(value = 42, txt = "Test", color = "info") 6 | html_string <- as.character(box_no_link) 7 | 8 | # Should not contain tag 9 | expect_false(grepl(" tag 20 | expect_false(grepl(" tag 31 | expect_false(grepl(" tag 42 | expect_false(grepl(" tag with href 55 | expect_true(grepl(" tag with href 67 | expect_true(grepl(" tag with href 79 | expect_true(grepl(" tag with href 91 | expect_true(grepl(" tag when link is empty string 105 | expect_false(grepl(" 2 | Articles • TileMaker 6 | 7 | 8 |
    9 |
    53 | 54 | 55 | 56 |
    57 |
    58 | 61 | 62 |
    63 |

    All vignettes

    64 |

    65 | 66 |
    Overview
    67 |
    68 |
    TileMaker in Shiny
    69 |
    70 |
    71 |
    72 |
    73 | 74 | 75 |
    78 | 79 |
    80 |

    Site built with pkgdown 2.1.3.

    81 |
    82 | 83 |
    84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /docs/bootstrap-toc.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Table of Contents v0.4.1 (http://afeld.github.io/bootstrap-toc/) 3 | * Copyright 2015 Aidan Feldman 4 | * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) */ 5 | (function() { 6 | 'use strict'; 7 | 8 | window.Toc = { 9 | helpers: { 10 | // return all matching elements in the set, or their descendants 11 | findOrFilter: function($el, selector) { 12 | // http://danielnouri.org/notes/2011/03/14/a-jquery-find-that-also-finds-the-root-element/ 13 | // http://stackoverflow.com/a/12731439/358804 14 | var $descendants = $el.find(selector); 15 | return $el.filter(selector).add($descendants).filter(':not([data-toc-skip])'); 16 | }, 17 | 18 | generateUniqueIdBase: function(el) { 19 | var text = $(el).text(); 20 | var anchor = text.trim().toLowerCase().replace(/[^A-Za-z0-9]+/g, '-'); 21 | return anchor || el.tagName.toLowerCase(); 22 | }, 23 | 24 | generateUniqueId: function(el) { 25 | var anchorBase = this.generateUniqueIdBase(el); 26 | for (var i = 0; ; i++) { 27 | var anchor = anchorBase; 28 | if (i > 0) { 29 | // add suffix 30 | anchor += '-' + i; 31 | } 32 | // check if ID already exists 33 | if (!document.getElementById(anchor)) { 34 | return anchor; 35 | } 36 | } 37 | }, 38 | 39 | generateAnchor: function(el) { 40 | if (el.id) { 41 | return el.id; 42 | } else { 43 | var anchor = this.generateUniqueId(el); 44 | el.id = anchor; 45 | return anchor; 46 | } 47 | }, 48 | 49 | createNavList: function() { 50 | return $(''); 51 | }, 52 | 53 | createChildNavList: function($parent) { 54 | var $childList = this.createNavList(); 55 | $parent.append($childList); 56 | return $childList; 57 | }, 58 | 59 | generateNavEl: function(anchor, text) { 60 | var $a = $(''); 61 | $a.attr('href', '#' + anchor); 62 | $a.text(text); 63 | var $li = $('
  • '); 64 | $li.append($a); 65 | return $li; 66 | }, 67 | 68 | generateNavItem: function(headingEl) { 69 | var anchor = this.generateAnchor(headingEl); 70 | var $heading = $(headingEl); 71 | var text = $heading.data('toc-text') || $heading.text(); 72 | return this.generateNavEl(anchor, text); 73 | }, 74 | 75 | // Find the first heading level (`

    `, then `

    `, etc.) that has more than one element. Defaults to 1 (for `

    `). 76 | getTopLevel: function($scope) { 77 | for (var i = 1; i <= 6; i++) { 78 | var $headings = this.findOrFilter($scope, 'h' + i); 79 | if ($headings.length > 1) { 80 | return i; 81 | } 82 | } 83 | 84 | return 1; 85 | }, 86 | 87 | // returns the elements for the top level, and the next below it 88 | getHeadings: function($scope, topLevel) { 89 | var topSelector = 'h' + topLevel; 90 | 91 | var secondaryLevel = topLevel + 1; 92 | var secondarySelector = 'h' + secondaryLevel; 93 | 94 | return this.findOrFilter($scope, topSelector + ',' + secondarySelector); 95 | }, 96 | 97 | getNavLevel: function(el) { 98 | return parseInt(el.tagName.charAt(1), 10); 99 | }, 100 | 101 | populateNav: function($topContext, topLevel, $headings) { 102 | var $context = $topContext; 103 | var $prevNav; 104 | 105 | var helpers = this; 106 | $headings.each(function(i, el) { 107 | var $newNav = helpers.generateNavItem(el); 108 | var navLevel = helpers.getNavLevel(el); 109 | 110 | // determine the proper $context 111 | if (navLevel === topLevel) { 112 | // use top level 113 | $context = $topContext; 114 | } else if ($prevNav && $context === $topContext) { 115 | // create a new level of the tree and switch to it 116 | $context = helpers.createChildNavList($prevNav); 117 | } // else use the current $context 118 | 119 | $context.append($newNav); 120 | 121 | $prevNav = $newNav; 122 | }); 123 | }, 124 | 125 | parseOps: function(arg) { 126 | var opts; 127 | if (arg.jquery) { 128 | opts = { 129 | $nav: arg 130 | }; 131 | } else { 132 | opts = arg; 133 | } 134 | opts.$scope = opts.$scope || $(document.body); 135 | return opts; 136 | } 137 | }, 138 | 139 | // accepts a jQuery object, or an options object 140 | init: function(opts) { 141 | opts = this.helpers.parseOps(opts); 142 | 143 | // ensure that the data attribute is in place for styling 144 | opts.$nav.attr('data-toggle', 'toc'); 145 | 146 | var $topContext = this.helpers.createChildNavList(opts.$nav); 147 | var topLevel = this.helpers.getTopLevel(opts.$scope); 148 | var $headings = this.helpers.getHeadings(opts.$scope, topLevel); 149 | this.helpers.populateNav($topContext, topLevel, $headings); 150 | } 151 | }; 152 | 153 | $(function() { 154 | $('nav[data-toggle="toc"]').each(function(i, el) { 155 | var $nav = $(el); 156 | Toc.init($nav); 157 | }); 158 | }); 159 | })(); 160 | -------------------------------------------------------------------------------- /docs/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Page not found (404) • TileMaker 9 | 10 | 11 | 12 | 13 | 14 | 15 | 19 | 20 | 21 | 22 | 23 |
    24 |
    76 | 77 | 78 | 79 | 80 |
    81 |
    82 | 85 | 86 | Content not found. Please use links in the navbar. 87 | 88 |
    89 | 90 | 94 | 95 |
    96 | 97 | 98 | 99 |
    103 | 104 |
    105 |

    106 |

    Site built with pkgdown 2.1.3.

    107 |
    108 | 109 |
    110 |
    111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | [![Travis-CI Build 3 | Status](https://travis-ci.org/DataStrategist/TileMaker.svg?branch=master)](https://travis-ci.org/DataStrategist/TileMaker) 4 | [![Coverage 5 | Status](https://coveralls.io/repos/github/DataStrategist/TileMaker/badge.svg?branch=master)](https://coveralls.io/github/DataStrategist/TileMaker?branch=master) 6 | [![saythanks](https://img.shields.io/badge/say-thanks-ff69b4.svg)](https://saythanks.io/to/DataStrategist) 7 | 8 | # TileMaker 9 | 10 | An R library that enables the creation of data tiles for inclusion in a 11 | html dashboard or some such. 12 | 13 | To install, please type: 14 | 15 | devtools::install_github("DataStrategist/TileMaker", build_vignettes = TRUE) 16 | 17 | Please see the [Intro 18 | Vignette](http://datastrategist.github.io/TileMaker/articles/Intro.html) 19 | to learn more about how to do some lovely stuff, but in the meantime, 20 | here’s the basics: 21 | 22 | This package is intended to “highlight single values”, mainly in 23 | dashboards, reports or Shiny apps, and is highly customizeable. This is 24 | what it looks like: 25 | 26 | ``` r 27 | suppressWarnings(suppressMessages(library(tidyverse,quietly = TRUE))) 28 | library(TileMaker) 29 | 30 | a <- solo_box(value = 3, txt = "Little piggies
    go to the market", icon = "piggy-bank") 31 | b <- solo_gradient_box(value = 65, txt = "test score I got") 32 | ``` 33 | 34 | ## -- using target value of 100 -- 35 | 36 | ``` r 37 | c <- solo_gradient_box(value = 95, txt = "test score I wanted") 38 | ``` 39 | 40 | ## -- using target value of 100 -- 41 | 42 | ``` r 43 | d <- multi_box(values = c(4, 5, 6), txt = c("Sally", "George", "Mohammed"), icons = c("check", "plus", "calendar"), title = "Candidates") 44 | 45 | e <- iris %>% 46 | group_by(Species) %>% 47 | summarize(a = mean(Petal.Length)) %>% 48 | tile_matrix(values = a, txt = Species) 49 | ``` 50 | 51 | ## -- using target value of 100 -- 52 | ## -- using target value of 100 -- 53 | ## -- using target value of 100 -- 54 | 55 | ``` r 56 | f <- iris %>% 57 | group_by(Species) %>% 58 | summarize(a = mean(Petal.Length)) %>% 59 | mutate(old_a = c(3, 4, 5)) %>% 60 | tile_matrix(data = ., values = a, txt = Species, former = old_a) 61 | ``` 62 | 63 | ## -- using target value of 100 -- 64 | ## -- using target value of 100 -- 65 | ## -- using target value of 100 -- 66 | 67 | ``` r 68 | d1 <- div_maker(subtitle = "First line", textModifier = "h1", a, b) 69 | d2 <- div_maker(subtitle = "Second line", textModifier = "h1", c, d) 70 | d3 <- div_maker(subtitle = "Boom line", textModifier = "h1", e, f) 71 | 72 | finisher( 73 | title = "Important Reportings", 74 | css = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css", 75 | file = NULL, 76 | textModifier = "h1",div_maker(subtitle = "Boom", textModifier = "hi",d1, d2, d3) 77 | ) 78 | ``` 79 | 80 | 81 | 82 |

    Important Reportings

    83 |
    84 | Boom 85 |
    86 |

    First line

    87 |
    88 |
    89 |

    90 | 91 | 3 92 |

    93 |
    Little piggies
    go to the market
    94 |
    95 |
    96 |
    97 |
    98 |

    65

    99 |
    test score I got
    100 |
    101 |
    102 |
    103 |
    104 |

    Second line

    105 |
    106 |
    107 |

    95

    108 |
    test score I wanted
    109 |
    110 |
    111 |
    112 |
    113 |

    Candidates

    114 |

    115 | 116 | 4 117 | Sally 118 |

    119 |

    120 | 121 | 5 122 | George 123 |

    124 |

    125 | 126 | 6 127 | Mohammed 128 |

    129 |
    130 |
    131 |
    132 | 203 |
    204 | 205 | 206 | -------------------------------------------------------------------------------- /docs/authors.html: -------------------------------------------------------------------------------- 1 | 2 | Authors and Citation • TileMaker 6 | 7 | 8 |
    9 |
    53 | 54 | 55 | 56 |
    57 |
    58 |
    59 | 62 | 63 | 64 |
    • 65 |

      Amit Kohli. Maintainer. 66 |

      67 |
    • 68 |
    69 |
    70 |
    71 |

    Citation

    72 | Source: DESCRIPTION 73 |
    74 |
    75 | 76 | 77 |

    Kohli A, Kunst J (2025). 78 | TileMaker: Create Tiles Suitable For Html Dashboards. 79 | R package version 0.2.7, http://datastrategist.github.io/TileMaker/. 80 |

    81 |
    @Manual{,
     82 |   title = {TileMaker: Create Tiles Suitable For Html Dashboards},
     83 |   author = {Amit Kohli and Joshua Kunst},
     84 |   year = {2025},
     85 |   note = {R package version 0.2.7},
     86 |   url = {http://datastrategist.github.io/TileMaker/},
     87 | }
    88 | 89 |
    90 | 91 |
    92 | 93 | 94 | 95 |
    98 | 99 |
    100 |

    Site built with pkgdown 2.1.3.

    101 |
    102 | 103 |
    104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /docs/news/index.html: -------------------------------------------------------------------------------- 1 | 2 | Changelog • TileMaker 6 | 7 | 8 |
    9 |
    53 | 54 | 55 | 56 |
    57 |
    58 | 62 | 63 |
    64 | 65 |
    • Created all new functions using htmlTools. All old functions have been removed (sorry!)

    • 66 |
    • Seperated simple box from one that responds to threshold to clarify better hat imputs are required to each

    • 67 |
    • file_maker() now doesn’t need a filename

    • 68 |
    • Added tile_matrix() function to make multiple buttons suitable to quickly take inputs from a dataframe

    • 69 |
    • Added multi_box() function to create buttons that contain more than one value and icon.

    • 70 |
    • CRAN-ready!

    • 71 |
    72 |
    73 | 74 |
    • Converting function to stand-alone package
    • 75 |
    76 |
    77 | 78 | 81 | 82 |
    83 | 84 | 85 |
    88 | 89 |
    90 |

    Site built with pkgdown 2.0.2.

    91 |
    92 | 93 |
    94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /docs/LICENSE-text.html: -------------------------------------------------------------------------------- 1 | 2 | License • TileMaker 6 | 7 | 8 |
    9 |
    53 | 54 | 55 | 56 |
    57 |
    58 | 61 | 62 |
    The MIT License (MIT)
     63 | 
     64 | Copyright (c) 2017 Amit
     65 | 
     66 | Permission is hereby granted, free of charge, to any person obtaining a copy
     67 | of this software and associated documentation files (the "Software"), to deal
     68 | in the Software without restriction, including without limitation the rights
     69 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
     70 | copies of the Software, and to permit persons to whom the Software is
     71 | furnished to do so, subject to the following conditions:
     72 | 
     73 | The above copyright notice and this permission notice shall be included in all
     74 | copies or substantial portions of the Software.
     75 | 
     76 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
     77 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
     78 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
     79 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
     80 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
     81 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
     82 | SOFTWARE.
     83 | 
    84 | 85 |
    86 | 87 | 90 | 91 |
    92 | 93 | 94 | 95 |
    98 | 99 |
    100 |

    Site built with pkgdown 2.1.3.

    101 |
    102 | 103 |
    104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /docs/reference/ico.html: -------------------------------------------------------------------------------- 1 | 2 | ico — ico • TileMaker 6 | 7 | 8 |
    9 |
    53 | 54 | 55 | 56 |
    57 |
    58 | 63 | 64 |
    65 |

    Auxiliary function to generate icons

    66 |
    67 | 68 |
    69 |
    ico(x, chevron = FALSE)
    70 |
    71 | 72 |
    73 |

    Arguments

    74 | 75 | 76 |
    x
    77 |

    Icon name. See https://getbootstrap.com/docs/3.3/components/

    78 | 79 | 80 |
    chevron
    81 |

    binary to denote whether there is a former value to compare 82 | against or not.

    83 | 84 |
    85 | 86 |
    87 | 90 |
    91 | 92 | 93 |
    96 | 97 |
    98 |

    Site built with pkgdown 2.1.3.

    99 |
    100 | 101 |
    102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /docs/reference/index.html: -------------------------------------------------------------------------------- 1 | 2 | Package index • TileMaker 6 | 7 | 8 |
    9 |
    53 | 54 | 55 | 56 |
    57 |
    58 | 61 | 62 | 66 | 69 | 70 | 73 | 74 | 77 | 78 | 81 | 82 | 85 | 86 | 89 | 90 | 93 | 94 | 97 | 98 | 101 | 102 | 105 | 106 |
    63 |

    All functions

    64 |

    65 |
    67 |

    aquastat_rounder()

    68 |

    Perform UN-style rounding

    71 |

    div_maker()

    72 |

    Div maker

    75 |

    finisher()

    76 |

    finisher

    79 |

    ico()

    80 |

    ico

    83 |

    multi_box()

    84 |

    multi_box

    87 |

    prettify()

    88 |

    apply pretty format or not

    91 |

    solo_box()

    92 |

    solo_box

    95 |

    solo_box_ct()

    96 |

    solo_box_ct

    99 |

    solo_gradient_box()

    100 |

    box that changes colors based on value

    103 |

    tile_matrix()

    104 |

    tileMatrix

    107 | 108 | 111 |
    112 | 113 | 114 |
    117 | 118 |
    119 |

    Site built with pkgdown 2.1.3.

    120 |
    121 | 122 |
    123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /docs/reference/aquastat_rounder.html: -------------------------------------------------------------------------------- 1 | 2 | Perform UN-style rounding — aquastat_rounder • TileMaker 7 | 8 | 9 |
    10 |
    54 | 55 | 56 | 57 |
    58 |
    59 | 64 | 65 |
    66 |

    Rounds numbers greater than 1000 to no decimals, 67 | greater than 100 to one decimal, etc.

    68 |
    69 | 70 |
    71 |
    aquastat_rounder(x)
    72 |
    73 | 74 |
    75 |

    Arguments

    76 | 77 | 78 |
    x
    79 |

    number to round

    80 | 81 |
    82 |
    83 |

    Value

    84 |

    x, but rounded

    85 |
    86 |
    87 |

    Details

    88 |

    DETAILS

    89 |
    90 | 91 |
    92 |

    Examples

    93 |
    if (FALSE) { # \dontrun{
     94 | if(interactive()){
     95 |  #EXAMPLE1
     96 |  }
     97 | } # }
     98 | 
    99 |
    100 |
    101 | 104 |
    105 | 106 | 107 |
    110 | 111 |
    112 |

    Site built with pkgdown 2.1.3.

    113 |
    114 | 115 |
    116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /docs/reference/prettify.html: -------------------------------------------------------------------------------- 1 | 2 | apply pretty format or not — prettify • TileMaker 7 | 8 | 9 |
    10 |
    54 | 55 | 56 | 57 |
    58 |
    59 | 64 | 65 |
    66 |

    to be used inside the functions, just a convenient way to apply 67 | just-in-time formatting

    68 |
    69 | 70 |
    71 |
    prettify(x, pretty = NULL)
    72 |
    73 | 74 |
    75 |

    Arguments

    76 | 77 | 78 |
    x
    79 |

    thingie to evaluate (whether it should be prettified or not)

    80 | 81 | 82 |
    pretty
    83 |

    inheriting the value that should be used as a big-number separator

    84 | 85 |
    86 |
    87 |

    Value

    88 |

    returns a character string that looks like x, but beautified

    89 |
    90 |
    91 |

    Details

    92 |

    DETAILS

    93 |
    94 | 95 |
    96 |

    Examples

    97 |
    if (FALSE) { # \dontrun{
     98 | if(interactive()){
     99 |  #EXAMPLE1
    100 |  }
    101 | } # }
    102 | 
    103 |
    104 |
    105 | 108 |
    109 | 110 | 111 |
    114 | 115 |
    116 |

    Site built with pkgdown 2.1.3.

    117 |
    118 | 119 |
    120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /docs/reference/finisher.html: -------------------------------------------------------------------------------- 1 | 2 | finisher — finisher • TileMaker 10 | 11 | 12 |
    13 |
    57 | 58 | 59 | 60 |
    61 |
    62 | 67 | 68 |
    69 |

    Function 3 of 3, the last step. This function grabs the Divs created by 70 | `DivMaker`, or individual buttons if so desired, and combines them into a 71 | freestanding html file. Use this when you don't want the buttons to be part 72 | of a file, but a file itself. or, you could also use this as a convenient way 73 | of wrapping up buttons without using a div (although it is a bit irregular).

    74 |
    75 | 76 |
    77 |
    finisher(
     78 |   title = NULL,
     79 |   css = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css",
     80 |   file = NULL,
     81 |   textModifier = "h1",
     82 |   divs
     83 | )
    84 |
    85 | 86 |
    87 |

    Arguments

    88 | 89 | 90 |
    title
    91 |

    Title. Default NULL

    92 | 93 | 94 |
    css
    95 |

    A string indicating css url, for final installations pls save the 96 | css file locally. By default we are using the 3.3.7 bootstrap CDN because 97 | they support icons, but some others that might be interesting to you are: 98 | https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css or 99 | https://bootswatch.com/4/flatly/bootstrap.css (but if you use version 4 you 100 | will lose the ability to display icons).

    101 | 102 | 103 |
    file
    104 |

    Optional filename if you desire to save the file.

    105 | 106 | 107 |
    textModifier
    108 |

    Optional css category of "large" text. In this case, 109 | title. Default=h1

    110 | 111 | 112 |
    divs
    113 |

    div_maker elements.

    114 | 115 |
    116 | 117 |
    118 | 121 |
    122 | 123 | 124 |
    127 | 128 |
    129 |

    Site built with pkgdown 2.1.3.

    130 |
    131 | 132 |
    133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /docs/pkgdown.css: -------------------------------------------------------------------------------- 1 | /* Sticky footer */ 2 | 3 | /** 4 | * Basic idea: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ 5 | * Details: https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css 6 | * 7 | * .Site -> body > .container 8 | * .Site-content -> body > .container .row 9 | * .footer -> footer 10 | * 11 | * Key idea seems to be to ensure that .container and __all its parents__ 12 | * have height set to 100% 13 | * 14 | */ 15 | 16 | html, body { 17 | height: 100%; 18 | } 19 | 20 | body { 21 | position: relative; 22 | } 23 | 24 | body > .container { 25 | display: flex; 26 | height: 100%; 27 | flex-direction: column; 28 | } 29 | 30 | body > .container .row { 31 | flex: 1 0 auto; 32 | } 33 | 34 | footer { 35 | margin-top: 45px; 36 | padding: 35px 0 36px; 37 | border-top: 1px solid #e5e5e5; 38 | color: #666; 39 | display: flex; 40 | flex-shrink: 0; 41 | } 42 | footer p { 43 | margin-bottom: 0; 44 | } 45 | footer div { 46 | flex: 1; 47 | } 48 | footer .pkgdown { 49 | text-align: right; 50 | } 51 | footer p { 52 | margin-bottom: 0; 53 | } 54 | 55 | img.icon { 56 | float: right; 57 | } 58 | 59 | /* Ensure in-page images don't run outside their container */ 60 | .contents img { 61 | max-width: 100%; 62 | height: auto; 63 | } 64 | 65 | /* Fix bug in bootstrap (only seen in firefox) */ 66 | summary { 67 | display: list-item; 68 | } 69 | 70 | /* Typographic tweaking ---------------------------------*/ 71 | 72 | .contents .page-header { 73 | margin-top: calc(-60px + 1em); 74 | } 75 | 76 | dd { 77 | margin-left: 3em; 78 | } 79 | 80 | /* Section anchors ---------------------------------*/ 81 | 82 | a.anchor { 83 | display: none; 84 | margin-left: 5px; 85 | width: 20px; 86 | height: 20px; 87 | 88 | background-image: url(./link.svg); 89 | background-repeat: no-repeat; 90 | background-size: 20px 20px; 91 | background-position: center center; 92 | } 93 | 94 | h1:hover .anchor, 95 | h2:hover .anchor, 96 | h3:hover .anchor, 97 | h4:hover .anchor, 98 | h5:hover .anchor, 99 | h6:hover .anchor { 100 | display: inline-block; 101 | } 102 | 103 | /* Fixes for fixed navbar --------------------------*/ 104 | 105 | .contents h1, .contents h2, .contents h3, .contents h4 { 106 | padding-top: 60px; 107 | margin-top: -40px; 108 | } 109 | 110 | /* Navbar submenu --------------------------*/ 111 | 112 | .dropdown-submenu { 113 | position: relative; 114 | } 115 | 116 | .dropdown-submenu>.dropdown-menu { 117 | top: 0; 118 | left: 100%; 119 | margin-top: -6px; 120 | margin-left: -1px; 121 | border-radius: 0 6px 6px 6px; 122 | } 123 | 124 | .dropdown-submenu:hover>.dropdown-menu { 125 | display: block; 126 | } 127 | 128 | .dropdown-submenu>a:after { 129 | display: block; 130 | content: " "; 131 | float: right; 132 | width: 0; 133 | height: 0; 134 | border-color: transparent; 135 | border-style: solid; 136 | border-width: 5px 0 5px 5px; 137 | border-left-color: #cccccc; 138 | margin-top: 5px; 139 | margin-right: -10px; 140 | } 141 | 142 | .dropdown-submenu:hover>a:after { 143 | border-left-color: #ffffff; 144 | } 145 | 146 | .dropdown-submenu.pull-left { 147 | float: none; 148 | } 149 | 150 | .dropdown-submenu.pull-left>.dropdown-menu { 151 | left: -100%; 152 | margin-left: 10px; 153 | border-radius: 6px 0 6px 6px; 154 | } 155 | 156 | /* Sidebar --------------------------*/ 157 | 158 | #pkgdown-sidebar { 159 | margin-top: 30px; 160 | position: -webkit-sticky; 161 | position: sticky; 162 | top: 70px; 163 | } 164 | 165 | #pkgdown-sidebar h2 { 166 | font-size: 1.5em; 167 | margin-top: 1em; 168 | } 169 | 170 | #pkgdown-sidebar h2:first-child { 171 | margin-top: 0; 172 | } 173 | 174 | #pkgdown-sidebar .list-unstyled li { 175 | margin-bottom: 0.5em; 176 | } 177 | 178 | /* bootstrap-toc tweaks ------------------------------------------------------*/ 179 | 180 | /* All levels of nav */ 181 | 182 | nav[data-toggle='toc'] .nav > li > a { 183 | padding: 4px 20px 4px 6px; 184 | font-size: 1.5rem; 185 | font-weight: 400; 186 | color: inherit; 187 | } 188 | 189 | nav[data-toggle='toc'] .nav > li > a:hover, 190 | nav[data-toggle='toc'] .nav > li > a:focus { 191 | padding-left: 5px; 192 | color: inherit; 193 | border-left: 1px solid #878787; 194 | } 195 | 196 | nav[data-toggle='toc'] .nav > .active > a, 197 | nav[data-toggle='toc'] .nav > .active:hover > a, 198 | nav[data-toggle='toc'] .nav > .active:focus > a { 199 | padding-left: 5px; 200 | font-size: 1.5rem; 201 | font-weight: 400; 202 | color: inherit; 203 | border-left: 2px solid #878787; 204 | } 205 | 206 | /* Nav: second level (shown on .active) */ 207 | 208 | nav[data-toggle='toc'] .nav .nav { 209 | display: none; /* Hide by default, but at >768px, show it */ 210 | padding-bottom: 10px; 211 | } 212 | 213 | nav[data-toggle='toc'] .nav .nav > li > a { 214 | padding-left: 16px; 215 | font-size: 1.35rem; 216 | } 217 | 218 | nav[data-toggle='toc'] .nav .nav > li > a:hover, 219 | nav[data-toggle='toc'] .nav .nav > li > a:focus { 220 | padding-left: 15px; 221 | } 222 | 223 | nav[data-toggle='toc'] .nav .nav > .active > a, 224 | nav[data-toggle='toc'] .nav .nav > .active:hover > a, 225 | nav[data-toggle='toc'] .nav .nav > .active:focus > a { 226 | padding-left: 15px; 227 | font-weight: 500; 228 | font-size: 1.35rem; 229 | } 230 | 231 | /* orcid ------------------------------------------------------------------- */ 232 | 233 | .orcid { 234 | font-size: 16px; 235 | color: #A6CE39; 236 | /* margins are required by official ORCID trademark and display guidelines */ 237 | margin-left:4px; 238 | margin-right:4px; 239 | vertical-align: middle; 240 | } 241 | 242 | /* Reference index & topics ----------------------------------------------- */ 243 | 244 | .ref-index th {font-weight: normal;} 245 | 246 | .ref-index td {vertical-align: top; min-width: 100px} 247 | .ref-index .icon {width: 40px;} 248 | .ref-index .alias {width: 40%;} 249 | .ref-index-icons .alias {width: calc(40% - 40px);} 250 | .ref-index .title {width: 60%;} 251 | 252 | .ref-arguments th {text-align: right; padding-right: 10px;} 253 | .ref-arguments th, .ref-arguments td {vertical-align: top; min-width: 100px} 254 | .ref-arguments .name {width: 20%;} 255 | .ref-arguments .desc {width: 80%;} 256 | 257 | /* Nice scrolling for wide elements --------------------------------------- */ 258 | 259 | table { 260 | display: block; 261 | overflow: auto; 262 | } 263 | 264 | /* Syntax highlighting ---------------------------------------------------- */ 265 | 266 | pre, code, pre code { 267 | background-color: #f8f8f8; 268 | color: #333; 269 | } 270 | pre, pre code { 271 | white-space: pre-wrap; 272 | word-break: break-all; 273 | overflow-wrap: break-word; 274 | } 275 | 276 | pre { 277 | border: 1px solid #eee; 278 | } 279 | 280 | pre .img, pre .r-plt { 281 | margin: 5px 0; 282 | } 283 | 284 | pre .img img, pre .r-plt img { 285 | background-color: #fff; 286 | } 287 | 288 | code a, pre a { 289 | color: #375f84; 290 | } 291 | 292 | a.sourceLine:hover { 293 | text-decoration: none; 294 | } 295 | 296 | .fl {color: #1514b5;} 297 | .fu {color: #000000;} /* function */ 298 | .ch,.st {color: #036a07;} /* string */ 299 | .kw {color: #264D66;} /* keyword */ 300 | .co {color: #888888;} /* comment */ 301 | 302 | .error {font-weight: bolder;} 303 | .warning {font-weight: bolder;} 304 | 305 | /* Clipboard --------------------------*/ 306 | 307 | .hasCopyButton { 308 | position: relative; 309 | } 310 | 311 | .btn-copy-ex { 312 | position: absolute; 313 | right: 0; 314 | top: 0; 315 | visibility: hidden; 316 | } 317 | 318 | .hasCopyButton:hover button.btn-copy-ex { 319 | visibility: visible; 320 | } 321 | 322 | /* headroom.js ------------------------ */ 323 | 324 | .headroom { 325 | will-change: transform; 326 | transition: transform 200ms linear; 327 | } 328 | .headroom--pinned { 329 | transform: translateY(0%); 330 | } 331 | .headroom--unpinned { 332 | transform: translateY(-100%); 333 | } 334 | 335 | /* mark.js ----------------------------*/ 336 | 337 | mark { 338 | background-color: rgba(255, 255, 51, 0.5); 339 | border-bottom: 2px solid rgba(255, 153, 51, 0.3); 340 | padding: 1px; 341 | } 342 | 343 | /* vertical spacing after htmlwidgets */ 344 | .html-widget { 345 | margin-bottom: 10px; 346 | } 347 | 348 | /* fontawesome ------------------------ */ 349 | 350 | .fab { 351 | font-family: "Font Awesome 5 Brands" !important; 352 | } 353 | 354 | /* don't display links in code chunks when printing */ 355 | /* source: https://stackoverflow.com/a/10781533 */ 356 | @media print { 357 | code a:link:after, code a:visited:after { 358 | content: ""; 359 | } 360 | } 361 | 362 | /* Section anchors --------------------------------- 363 | Added in pandoc 2.11: https://github.com/jgm/pandoc-templates/commit/9904bf71 364 | */ 365 | 366 | div.csl-bib-body { } 367 | div.csl-entry { 368 | clear: both; 369 | } 370 | .hanging-indent div.csl-entry { 371 | margin-left:2em; 372 | text-indent:-2em; 373 | } 374 | div.csl-left-margin { 375 | min-width:2em; 376 | float:left; 377 | } 378 | div.csl-right-inline { 379 | margin-left:2em; 380 | padding-left:1em; 381 | } 382 | div.csl-indent { 383 | margin-left: 2em; 384 | } 385 | -------------------------------------------------------------------------------- /docs/reference/div_maker.html: -------------------------------------------------------------------------------- 1 | 2 | Div maker — div_maker • TileMaker 8 | 9 | 10 |
    11 |
    55 | 56 | 57 | 58 |
    59 |
    60 | 65 | 66 |
    67 |

    This function takes buttons made by any of the solo or multi buttons and 68 | makes an a row (HTML `div`) suitable for inclusion in other HTML code, or for 69 | inclusion within the function of this package `finisher`.

    70 |
    71 | 72 |
    73 |
    div_maker(subtitle, textModifier, ...)
    74 |
    75 | 76 |
    77 |

    Arguments

    78 | 79 | 80 |
    subtitle
    81 |

    The text heading of this row of buttons

    82 | 83 | 84 |
    textModifier
    85 |

    Optional css category of "large" text. In this case, 86 | subtitle. Use css flags 87 | like "h2", "h3","p", etc. Default = "h1"

    88 | 89 | 90 |
    ...
    91 |

    buttons to insert into the div elements.

    92 | 93 |
    94 | 95 |
    96 |

    Examples

    97 |
    div_maker(
     98 |   subtitle = "Quantativity factors", textModifier = "h1",
     99 |   solo_gradient_box(value = 70),
    100 |   solo_box(value = 34)
    101 | )
    102 | #> -- using target value of 100 --
    103 | #> <div class="container">
    104 | #>   <h1>Quantativity factors</h1>
    105 | #>   <a>
    106 | #>     <button class="btn btn-md btn-warning" color="warning" role="button">
    107 | #>       <h1>70</h1>
    108 | #>       
    109 | #>     </button>
    110 | #>   </a>
    111 | #>   <a>
    112 | #>     <button class="btn btn-md btn-info" color="info" role="button">
    113 | #>       <h1>34</h1>
    114 | #>       
    115 | #>     </button>
    116 | #>   </a>
    117 | #> </div>
    118 | 
    119 |
    120 |
    121 | 124 |
    125 | 126 | 127 |
    130 | 131 |
    132 |

    Site built with pkgdown 2.1.3.

    133 |
    134 | 135 |
    136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | -------------------------------------------------------------------------------- /docs/CODE_OF_CONDUCT.html: -------------------------------------------------------------------------------- 1 | 2 | Contributor Covenant Code of Conduct • TileMaker 6 | 7 | 8 |
    9 |
    53 | 54 | 55 | 56 |
    57 |
    58 | 61 | 62 |
    63 | 64 |
    65 |

    Our Pledge

    66 |

    In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.

    67 |
    68 |
    69 |

    Our Standards

    70 |

    Examples of behavior that contributes to creating a positive environment include:

    71 |
    • Using welcoming and inclusive language
    • 72 |
    • Being respectful of differing viewpoints and experiences
    • 73 |
    • Gracefully accepting constructive criticism
    • 74 |
    • Focusing on what is best for the community
    • 75 |
    • Showing empathy towards other community members
    • 76 |

    Examples of unacceptable behavior by participants include:

    77 |
    • The use of sexualized language or imagery and unwelcome sexual attention or advances
    • 78 |
    • Trolling, insulting/derogatory comments, and personal or political attacks
    • 79 |
    • Public or private harassment
    • 80 |
    • Publishing others’ private information, such as a physical or electronic address, without explicit permission
    • 81 |
    • Other conduct which could reasonably be considered inappropriate in a professional setting
    • 82 |
    83 |
    84 |

    Our Responsibilities

    85 |

    Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.

    86 |

    Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.

    87 |
    88 |
    89 |

    Scope

    90 |

    This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.

    91 |
    92 |
    93 |

    Enforcement

    94 |

    Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at . All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.

    95 |

    Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project’s leadership.

    96 |
    97 |
    98 |

    Attribution

    99 |

    This Code of Conduct is adapted from the Contributor Covenant, version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html

    100 |

    For answers to common questions about this code of conduct, see https://www.contributor-covenant.org/faq

    101 |
    102 |
    103 | 104 |
    105 | 106 | 109 | 110 |
    111 | 112 | 113 | 114 |
    117 | 118 |
    119 |

    Site built with pkgdown 2.1.3.

    120 |
    121 | 122 |
    123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /docs/articles/shinydemo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | TileMaker in Shiny • TileMaker 9 | 10 | 11 | 12 | 13 | 14 | 15 | 19 | 20 | 21 | 22 | 23 |
    24 |
    76 | 77 | 78 | 79 | 80 |
    81 |
    82 | 90 | 91 | 92 | 93 |

    It is also possible to push these Tiles into a Shiny app, using the 94 | htmlOutput and renderUI.

    95 |

    You can either assign objects outside the Shiny call (in the below 96 | example b1 and d1 which includes b1 and b2), or you can embed buttons 97 | inside the Shiny app to display values from there.

    98 |

    (In order to make this work, uncomment the last line in your console. 99 | )

    100 |
    101 | library(dplyr)
    102 | #> Warning: package 'dplyr' was built under R version 4.5.1
    103 | #> 
    104 | #> Attaching package: 'dplyr'
    105 | #> The following objects are masked from 'package:stats':
    106 | #> 
    107 | #>     filter, lag
    108 | #> The following objects are masked from 'package:base':
    109 | #> 
    110 | #>     intersect, setdiff, setequal, union
    111 | library(htmltools)
    112 | #> Warning: package 'htmltools' was built under R version 4.5.1
    113 | library(TileMaker)
    114 | 
    115 | b1 <- solo_box(value = 3.57, txt = "Times apple eaten", icon = "apple")
    116 | b2 <- solo_box(value = 13.7, txt = "Nutritional value", size = "lg")
    117 | 
    118 | d1 <- div_maker(subtitle = "Quantativity factors", textModifier = "h2", b1, b2)
    119 | 
    120 | # ## Shinydashboard Test --------------
    121 | # ## app.R ##
    122 | # library(shinydashboard)
    123 | # library(shiny)
    124 | # 
    125 | # ui <- dashboardPage(
    126 | #   dashboardHeader(title = "Basic dashboard"),
    127 | #   dashboardSidebar(
    128 | #         sliderInput("slider", "Number of observations:", 1, 100, 50)),
    129 | #   dashboardBody(
    130 | #     # Boxes need to be put in a row (or column)
    131 | #     fluidRow(
    132 | #       box(
    133 | #         b1, d1, htmlOutput("plot1")
    134 | #       )
    135 | #     )
    136 | #   )
    137 | # )
    138 | # 
    139 | # server <- function(input, output) {
    140 | #   output$plot1 <- renderUI({
    141 | #     div_maker(subtitle = "boom", textModifier = "h2", solo_box(value = input$slider, txt = "Times apple eaten", icon = "apple"))
    142 | #   })
    143 | # }
    144 | 
    145 | # shinyApp(ui, server)
    146 |
    147 | 148 | 151 | 152 |
    153 | 154 | 155 | 156 |
    160 | 161 |
    162 |

    163 |

    Site built with pkgdown 2.1.3.

    164 |
    165 | 166 |
    167 |
    168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | -------------------------------------------------------------------------------- /docs/docsearch.css: -------------------------------------------------------------------------------- 1 | /* Docsearch -------------------------------------------------------------- */ 2 | /* 3 | Source: https://github.com/algolia/docsearch/ 4 | License: MIT 5 | */ 6 | 7 | .algolia-autocomplete { 8 | display: block; 9 | -webkit-box-flex: 1; 10 | -ms-flex: 1; 11 | flex: 1 12 | } 13 | 14 | .algolia-autocomplete .ds-dropdown-menu { 15 | width: 100%; 16 | min-width: none; 17 | max-width: none; 18 | padding: .75rem 0; 19 | background-color: #fff; 20 | background-clip: padding-box; 21 | border: 1px solid rgba(0, 0, 0, .1); 22 | box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175); 23 | } 24 | 25 | @media (min-width:768px) { 26 | .algolia-autocomplete .ds-dropdown-menu { 27 | width: 175% 28 | } 29 | } 30 | 31 | .algolia-autocomplete .ds-dropdown-menu::before { 32 | display: none 33 | } 34 | 35 | .algolia-autocomplete .ds-dropdown-menu [class^=ds-dataset-] { 36 | padding: 0; 37 | background-color: rgb(255,255,255); 38 | border: 0; 39 | max-height: 80vh; 40 | } 41 | 42 | .algolia-autocomplete .ds-dropdown-menu .ds-suggestions { 43 | margin-top: 0 44 | } 45 | 46 | .algolia-autocomplete .algolia-docsearch-suggestion { 47 | padding: 0; 48 | overflow: visible 49 | } 50 | 51 | .algolia-autocomplete .algolia-docsearch-suggestion--category-header { 52 | padding: .125rem 1rem; 53 | margin-top: 0; 54 | font-size: 1.3em; 55 | font-weight: 500; 56 | color: #00008B; 57 | border-bottom: 0 58 | } 59 | 60 | .algolia-autocomplete .algolia-docsearch-suggestion--wrapper { 61 | float: none; 62 | padding-top: 0 63 | } 64 | 65 | .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column { 66 | float: none; 67 | width: auto; 68 | padding: 0; 69 | text-align: left 70 | } 71 | 72 | .algolia-autocomplete .algolia-docsearch-suggestion--content { 73 | float: none; 74 | width: auto; 75 | padding: 0 76 | } 77 | 78 | .algolia-autocomplete .algolia-docsearch-suggestion--content::before { 79 | display: none 80 | } 81 | 82 | .algolia-autocomplete .ds-suggestion:not(:first-child) .algolia-docsearch-suggestion--category-header { 83 | padding-top: .75rem; 84 | margin-top: .75rem; 85 | border-top: 1px solid rgba(0, 0, 0, .1) 86 | } 87 | 88 | .algolia-autocomplete .ds-suggestion .algolia-docsearch-suggestion--subcategory-column { 89 | display: block; 90 | padding: .1rem 1rem; 91 | margin-bottom: 0.1; 92 | font-size: 1.0em; 93 | font-weight: 400 94 | /* display: none */ 95 | } 96 | 97 | .algolia-autocomplete .algolia-docsearch-suggestion--title { 98 | display: block; 99 | padding: .25rem 1rem; 100 | margin-bottom: 0; 101 | font-size: 0.9em; 102 | font-weight: 400 103 | } 104 | 105 | .algolia-autocomplete .algolia-docsearch-suggestion--text { 106 | padding: 0 1rem .5rem; 107 | margin-top: -.25rem; 108 | font-size: 0.8em; 109 | font-weight: 400; 110 | line-height: 1.25 111 | } 112 | 113 | .algolia-autocomplete .algolia-docsearch-footer { 114 | width: 110px; 115 | height: 20px; 116 | z-index: 3; 117 | margin-top: 10.66667px; 118 | float: right; 119 | font-size: 0; 120 | line-height: 0; 121 | } 122 | 123 | .algolia-autocomplete .algolia-docsearch-footer--logo { 124 | background-image: url("data:image/svg+xml;utf8,"); 125 | background-repeat: no-repeat; 126 | background-position: 50%; 127 | background-size: 100%; 128 | overflow: hidden; 129 | text-indent: -9000px; 130 | width: 100%; 131 | height: 100%; 132 | display: block; 133 | transform: translate(-8px); 134 | } 135 | 136 | .algolia-autocomplete .algolia-docsearch-suggestion--highlight { 137 | color: #FF8C00; 138 | background: rgba(232, 189, 54, 0.1) 139 | } 140 | 141 | 142 | .algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight { 143 | box-shadow: inset 0 -2px 0 0 rgba(105, 105, 105, .5) 144 | } 145 | 146 | .algolia-autocomplete .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content { 147 | background-color: rgba(192, 192, 192, .15) 148 | } 149 | -------------------------------------------------------------------------------- /vignettes/Intro.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Overview" 3 | output: 4 | html_document: default 5 | pdf_document: default 6 | github_document: default 7 | vignette: > 8 | %\VignetteIndexEntry{Intro} 9 | %\VignetteEngine{knitr::rmarkdown} 10 | %\VignetteEncoding{UTF-8} 11 | %\VignetteDepends{ggplot2, dplyr} 12 | --- 13 | 14 | ```{r setup, include = FALSE} 15 | knitr::opts_chunk$set( 16 | collapse = TRUE, 17 | comment = "#>" 18 | ) 19 | ``` 20 | 21 | ## Introduction 22 | 23 | Dashboard Tiles, also named Notecards, are a great way to visualize key numbers. 24 | They can emphasize results in an easily digestible and colorful format. 25 | This package is a more fully featured alternative to infoboxes and valueboxes available from [flexdashboard](https://rmarkdown.rstudio.com/flexdashboard/) and [shinydashboards](https://rstudio.github.io/shinydashboard/). 26 | 27 | This package uses Twitter's [Bootstrap](https://getbootstrap.com/) CSS files to provide pleasant aesthetics to the tiles. These buttons are good for embedding in static reports, in Rmd files, and Shiny dashboards. This page will show you how to use the main features of these tiles. 28 | 29 | ## Getting Started 30 | 31 | Install the TileMaker package from Github as follows: 32 | 33 | ```{r, eval=FALSE} 34 | # install.packages("TileMaker") ## soon! 35 | devtools::install_github("DataStrategist/TileMaker") 36 | ``` 37 | 38 | ```{r} 39 | library(TileMaker) 40 | ``` 41 | 42 | Let's start small: 43 | 44 | ## Solo Box 45 | 46 | The ``solo_box`` function allows to create a simple colored box. 47 | 48 | ```{r} 49 | solo_box(value = 3.3, txt = "My metric") 50 | ``` 51 | 52 |
    53 | 54 | The ``solo_box`` function represents one key value, and should be used to demonstrate an important number inyour reports. There are many ways we can customize this tile, for example: 55 | 56 | ```{r} 57 | solo_box( 58 | value = 42, txt = "My metric", former = 99, size = "lg", icon = "check", 59 | color = "warning", link = "https://google.com", units = "kg", hover = "Warning reason", textModifier = "h3" 60 | ) 61 | ``` 62 | 63 |
    64 | 65 | Not only can you see many more details, but if you rest your mouse over the button, you should see the text "Warning reason" appear. 66 | 67 | ## Icons 68 | 69 | Icons are available using [Glyphicons](https://getbootstrap.com/docs/3.3/components/). 70 | 71 | ```{r} 72 | div_maker( 73 | subtitle = "One pic is worth a thousand words", textModifier = "h3", 74 | solo_box(value = 3.3, txt = "envelope", icon = "envelope"), 75 | solo_box(value = 3.3, txt = "pushpin", icon = "pushpin"), 76 | solo_box(value = 3.3, txt = "calendar", icon = "calendar") 77 | ) 78 | ``` 79 | 80 |
    81 | 82 | Click the link above for a full list of available icons. As you can see above, only the name of the icon needs to be supplied, ie "envelope", rather than "gyphicon-envelope". 83 | 84 | ### Size 85 | 86 | ```{r} 87 | div_maker( 88 | subtitle = "supersize it!", textModifier = "h4", 89 | solo_box(value = 3.3, txt = "extra small", size = "xs"), 90 | solo_box(value = 3.3, txt = "small", size = "sm"), 91 | solo_box(value = 3.3, txt = "medium", size = "md"), 92 | solo_box(value = 3.3, txt = "large", size = "lg") 93 | ) 94 | ``` 95 | 96 |
    97 | 98 | (Don't worry about the `div_maker` function for now, it'll be explained later, but for now we're using it to "tie" multiple icons together). 99 | 100 | ### Color 101 | 102 | The `color` argument controls the type of box which dictates the color. 103 | 104 | By default, Bootstrap Version 3 is used. 6 colors of boxes are available. 105 | It can be customised to use boostrap 4. 106 | 107 | ```{r} 108 | div_maker( 109 | subtitle = "... all the colors of a rainbow", textModifier = "h3", 110 | solo_box(value = 3.3, txt = "Default", color = "default"), 111 | solo_box(value = 3.3, txt = "Primary", color = "primary"), 112 | solo_box(value = 3.3, txt = "Success", color = "success"), 113 | solo_box(value = 3.3, txt = "Info", color = "info"), 114 | solo_box(value = 3.3, txt = "Warning", color = "warning"), 115 | solo_box(value = 3.3, txt = "Danger", color = "danger") 116 | ) 117 | ``` 118 | 119 |
    120 | 121 | ```{r, echo=FALSE} 122 | solo_box(value = NULL, txt = "Watch the case sensitivity of the color argument!", color = "warning") 123 | ``` 124 | 125 | # Let's go solo_gradient_box!!! 126 | 127 | The ``solo_gradient_box`` function lets us set targets and limits, and then changes the color depending on the value. Therefore, if a `value` is high, it'll be green, if it's "medium" it'll be orange, or if it's low, then it'll be red. By default, the `target` is set to 100 and thresholds are set to 50 and 90, although these are customizeable. 128 | 129 | ```{r} 130 | div_maker( 131 | subtitle = "Default gradients", textModifier = "h4", 132 | solo_gradient_box(value = 95, txt = "Grade 1"), 133 | solo_gradient_box(value = 80, txt = "Grade 2"), 134 | solo_gradient_box(value = 40, txt = "Grade 3") 135 | ) 136 | ``` 137 | 138 |
    139 | All of these limits are customizeable, so we can change the `target` or the thresholds (`thresholdHigh` and `thresholdLow`). 140 | The color is then determined by comparing ``value/target * 100`` to the thresholds. 141 | 142 | ```{r} 143 | div_maker( 144 | subtitle = "Playing with the thresholds", textModifier = "h4", 145 | solo_gradient_box(value = 24, txt = "Grade 1", target = 50), 146 | solo_gradient_box(value = 25, txt = "Grade 2", target = 50), 147 | solo_gradient_box(value = 44, txt = "Grade 2", target = 50), 148 | solo_gradient_box(value = 45, txt = "Grade 3", target = 50) 149 | ) 150 | ``` 151 | 152 |
    153 | The arguments ``thresholdHigh`` and ``thresholdLow`` can be used to change _when_ the values change color from green to orange and from orange to red respectively. For example, the value `95` was used above and had a green color (because the default `thresholdHigh` of 90 was used), but if we change the `thresholdHigh` to 96, we see that a value of `95` is still orange. 154 | 155 | ```{r} 156 | solo_gradient_box(value = 95, txt = "Customized
    threshold", thresholdHigh = 96) 157 | ``` 158 | 159 |
    160 | 161 | By the way, the `
    ` element in the `text` argument above forces a line break. Text accepts full html code, natively written. 162 | 163 | # It's your turn, multi_box! 164 | 165 | The `multi_box` function takes multiple values in one button, providing an easy way to summarize "a few" key values together. I say "a few"... if it's more than 5 perhaps a line or bar chart starts becoming more appropriate? Of course that's a style thing and everybody has their own opinions. Anyways, here's the `multi_box`: 166 | 167 | ```{r} 168 | multi_box(values = c(4, 5, 6), txt = c("Sally", "George", "Mohammed"), icons = c("check", "plus", "calendar"), title = "Candidates") 169 | ``` 170 | 171 |
    172 | 173 | As you can see, each entry can have it's own icon. The color is not dependant on any value as that would perhaps be confusing. It can be changed manually if desired. 174 | 175 | # Last but not least, here's the tile_matrix 176 | The ``tile_matrix`` function creates several new `solo_gradient_boxes` and compiles them all into a grid, but the best part about it is that it takes a `data.frame` or a `tibble` as input. 177 | 178 | ```{r} 179 | suppressPackageStartupMessages(library(dplyr)) 180 | 181 | df <- tibble( 182 | values = c(2, 5, 6), 183 | txt = c("Sally", "George", "Mohammed") 184 | ) 185 | tile_matrix(df, values = values, txt = txt, target = 10, thresholdHigh = 60, thresholdLow = 40, textModifier = "h2") 186 | ``` 187 | 188 | The function takes a dataframe as first value and as such can be used in a [tidyverse](https://www.tidyverse.org) pipe. For example: 189 | 190 | ```{r} 191 | mtcars %>% 192 | # name of car model is contained in the rowname 193 | mutate(names = rownames(.)) %>% 194 | # let's just take 8 entries: 195 | sample_n(8) %>% 196 | tile_matrix( 197 | values = "disp", txt = "names", 198 | target = 400, thresholdHigh = 80, thresholdLow = 50 199 | ) 200 | ``` 201 | 202 |
    203 | 204 | The concept of the `tile_matrix` is to provide a quick way to visualize one feature of the dataset. The fact that the thresholds scales automatically to the target is useful, since one need only set the target in order to quickly obtain actionable information. 205 | 206 | The number of tiles per column is `4` by default, but is customizeable using the `cols` argument. 207 | 208 | Another example, if one wanted to quickly see average diamond prices by cut, we could do so easily: 209 | 210 | ```{r BOOM} 211 | library(ggplot2) 212 | diamonds %>% 213 | group_by(cut) %>% 214 | summarize(price = mean(price)) %>% 215 | tile_matrix(data = ., values = price, txt = cut, target = 4500, roundVal = 0, cols = 5) 216 | ``` 217 | 218 |
    219 | 220 | # Comparing against a `former` version? 221 | 222 | What if we had former diamond prices for the above tileset? Well, we could use the `former` argument to quickly show if there's an increase or a decrease: 223 | 224 | ```{r BOOM1} 225 | library(ggplot2) 226 | diamonds %>% 227 | group_by(cut) %>% 228 | summarize(price = mean(price)) %>% 229 | ## Assume there was some former price that was a bit different 230 | mutate(old_price = price * (1 * runif(n = 5, min = 0.95, max = 1.05))) %>% 231 | tile_matrix(data = ., values = price, txt = cut, former = old_price, target = 4500, roundVal = 0, cols = 5) 232 | ``` 233 | 234 |
    235 | 236 | So what exactly does `former` do? It contextualizes the displayed value in comparison with a former value for that same tile. This is especially useful to measure growth of a metric. In order to show the functionality, let's use a quite contrived scenario in which valuesw range from 1 to 100, but in all cases, the former value was 50. See how the number in the top right corner changes: 237 | 238 | ```{r} 239 | suppressPackageStartupMessages(library(dplyr)) 240 | df <- tibble( 241 | values = seq(from = 0, to = 100, by = 10), 242 | txt = "comparison to 50", 243 | former = 50 244 | ) 245 | 246 | ## Let's pretend that all previous values were 50... so: 247 | tile_matrix(data = df, values = values, txt = txt, former = former, target = 1000) 248 | ``` 249 | 250 |
    251 | 252 | Important note: the color changes on the `value`, not on the `former`. For now I've forced the boxes to be red by having a high `target`, but just be clear on what the color is showing in real situations. 253 | 254 | ## Grammar of Tiles 255 | 256 | There are a few more bits and bobs, but that's the main features! All that's left is to discuss how to group tiles. For that we have two functions: `div_maker` and the bluntly named `finisher`. Individual tiles are put into a `div_maker` in order to group them in a row, and then those `div_maker` objects are put into a `finisher` call to create one object. The finished tile-set either creates a visible block of code or can be saved to a file for convenience by setting the `file` argument to `NULL`. Here is a "real-world" example: 257 | 258 | ```{r} 259 | Value1 <- 88 260 | Value2 <- 1985 261 | Value3 <- 1.22 262 | Value4 <- 30 263 | Value5 <- 42 264 | 265 | ## Make the buttons how you like 266 | Button1 <- solo_box(value = Value1, txt = "Speed", units = "mph", color = "danger") 267 | Button2 <- solo_box(value = Value2, txt = "Origin", color = "warning", icon = "flash") 268 | Button3 <- solo_gradient_box( 269 | value = Value3, txt = "Powah", units = "GW", hover = "Great Scott!", 270 | target = 1.22, thresholdHigh = 100, thresholdLow = 99 271 | ) 272 | Button4 <- solo_box(value = Value4, txt = "Heads turned", units = "K", color = "info") 273 | Button5 <- solo_box( 274 | value = Value5, txt = "Answer", hover = "Whales rule. Petunias suck", 275 | link = "https://en.wikipedia.org/wiki/The_Hitchhiker%27s_Guide_to_the_Galaxy", color = "primary" 276 | ) 277 | 278 | ## Combine in 2 rows: 279 | Div1 <- div_maker(subtitle = "Future", textModifier = "h2", Button1, Button2, Button3) 280 | Div2 <- div_maker(subtitle = "Effect", textModifier = "h2", Button4, Button5) 281 | 282 | ## Now put them all together: 283 | finisher( 284 | title = "Important block", css = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css", 285 | file = NULL, textModifier = "h1", div_maker(subtitle = "Back to the Future", textModifier = "hi",Div1, Div2) 286 | ) 287 | ``` 288 | 289 |
    290 | 291 | # Help! My report broke! 292 | 293 | The tilemaker package works by porting bootstrap functionality and controlling the HTML element within. It may affect others elements of your webpage. 294 | 295 | A few features are included to try to prevent these effects: 296 | 297 | 1. Most of the time, wrapping your buttons or groups of buttons in `div_maker`s, and/or in `finisher`s can be effective. 298 | 2. In some cases, for example in markdown documents that include a Table of Contents, format depends of previous html elements. It is advised to then change the `textModifier` option. You can change the textModifier from the default `h1` to `h4` or `
    ` or anything you think might work in your report. 299 | 300 | If you need help not covered here, please use [the Issues page](https://github.com/DataStrategist/TileMaker/issues). 301 | -------------------------------------------------------------------------------- /docs/reference/tile_matrix.html: -------------------------------------------------------------------------------- 1 | 2 | tileMatrix — tile_matrix • TileMaker 6 | 7 | 8 |
    9 |
    53 | 54 | 55 | 56 |
    57 |
    58 | 63 | 64 |
    65 |

    Create a matrix of buttons suitable for quick comparisons

    66 |
    67 | 68 |
    69 |
    tile_matrix(
     70 |   data,
     71 |   values,
     72 |   txt,
     73 |   icon,
     74 |   former,
     75 |   target = 100,
     76 |   thresholdHigh = 90,
     77 |   thresholdLow = 50,
     78 |   cols = 4,
     79 |   title = NULL,
     80 |   roundVal = 1,
     81 |   textModifier = "h1"
     82 | )
    83 |
    84 | 85 |
    86 |

    Arguments

    87 | 88 | 89 |
    data
    90 |

    a dataframe containing the data you would like to plot

    91 | 92 | 93 |
    values
    94 |

    a Vector containing values for each tile, contained in the 95 | dataframe `data`

    96 | 97 | 98 |
    txt
    99 |

    Vector containing titles for each tile, contained in the datframe 100 | `data`

    101 | 102 | 103 |
    icon
    104 |

    Optional glyphicon that should be displayed from 105 | https://getbootstrap.com/docs/3.3/components/ you need only supply the name 106 | of thing you want, like "check"... not the full "gyphicon-check"

    107 | 108 | 109 |
    former
    110 |

    optional vector containing former values (to show change from 111 | last), contained in the datframe `data`

    112 | 113 | 114 |
    target
    115 |

    Optional target that the value should be compared against. Use 116 | with thresholdHigh and THresholdLow

    117 | 118 | 119 |
    thresholdHigh
    120 |

    Optional edge between \"green\" and \"orange\" from 121 | 0-100 as a percent of target. IE, this value represents the RATIO of the 122 | VALUE to the target that, if above or equal to the thresholdHigh will show 123 | as green, and if not, as orange. Use w/ target and thresholdLow.

    124 | 125 | 126 |
    thresholdLow
    127 |

    Optional border between \"orange\" and \"red\" from 0-100 128 | as a percent of target. IE, this value represents the RATIO of the VALUE to 129 | the target that, if above or equal to the ThresholdLow will show as orange, 130 | and if not, as red. Use w/ target and thresholdHigh.

    131 | 132 | 133 |
    cols
    134 |

    Number of columns that the matrix should tile around. Defaults to 135 | 4

    136 | 137 | 138 |
    title
    139 |

    The title the matrix should have.

    140 | 141 | 142 |
    roundVal
    143 |

    Number of decimals that Value will be rounded to. Defaults to 144 | 1

    145 | 146 | 147 |
    textModifier
    148 |

    Optional css category of "large" text. In this case, the 149 | icon, value and unit. Default=h1

    150 | 151 |
    152 |
    153 |

    Value

    154 |

    Returns a list object containing the matrix of buttons

    155 |
    156 | 157 |
    158 |

    Examples

    159 |
    finisher(title = "Tile Matrix", divs = tile_matrix(
    160 |   data = head(iris),
    161 |   values = Sepal.Length,
    162 |   txt = Species
    163 | ))
    164 | #> -- using target value of 100 --
    165 | #> -- using target value of 100 --
    166 | #> -- using target value of 100 --
    167 | #> -- using target value of 100 --
    168 | #> -- using target value of 100 --
    169 | #> -- using target value of 100 --
    170 | 
    171 |   
    172 |     

    Tile Matrix

    173 | 174 |

    175 |
    203 | 219 | 220 | 221 |
    222 |
    223 |
    224 | 227 |
    228 | 229 | 230 |
    233 | 234 |
    235 |

    Site built with pkgdown 2.1.3.

    236 |
    237 | 238 |
    239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | -------------------------------------------------------------------------------- /docs/reference/multi_box.html: -------------------------------------------------------------------------------- 1 | 2 | multi_box — multi_box • TileMaker 6 | 7 | 8 |
    9 |
    53 | 54 | 55 | 56 |
    57 |
    58 | 63 | 64 |
    65 |

    Create a tile that contains more than one value, icon and text

    66 |
    67 | 68 |
    69 |
    multi_box(
     70 |   icons = NULL,
     71 |   txt = NULL,
     72 |   values = NULL,
     73 |   title = NULL,
     74 |   size = "md",
     75 |   color = "info",
     76 |   link = NULL,
     77 |   number_zoom = 150,
     78 |   hover = NULL,
     79 |   ...
     80 | )
    81 |
    82 | 83 |
    84 |

    Arguments

    85 | 86 | 87 |
    icons
    88 |

    vector of Icons to display, Default: NULL

    89 | 90 | 91 |
    txt
    92 |

    Optional subtext that should appear under the value

    93 | 94 | 95 |
    values
    96 |

    vector of values to display, Default: NULL

    97 | 98 | 99 |
    title
    100 |

    Top title, Default: NULL

    101 | 102 | 103 |
    size
    104 |

    Optional size specified in the bootstrap css classes: 105 | "xs","sm","md","lg")

    106 | 107 | 108 |
    color
    109 |

    Optional bootstrap css element that governs the color. 110 | https://v4-alpha.getbootstrap.com/utilities/colors/ Choose from: "muted", 111 | "primary", "success", "info", "warning", "danger", Default: 'info'

    112 | 113 | 114 | 115 |

    Optional hyperlink to redirect to after a user click, Default: 116 | NULL

    117 | 118 | 119 |
    number_zoom
    120 |

    Optional magnification % for number vs normal text, 121 | Default: 150

    122 | 123 | 124 |
    hover
    125 |

    Optional tooltip, or text that will show up when a user rests their 126 | mouse over the tile, Default: NULL

    127 | 128 | 129 |
    ...
    130 |

    add any other html code here

    131 | 132 |
    133 |
    134 |

    Value

    135 |

    an HTML object

    136 |
    137 |
    138 |

    Details

    139 |

    Allows for each button to contain several icon-number-text descriptions.

    140 |
    141 | 142 |
    143 |

    Examples

    144 |
    library(dplyr)
    145 | #> Warning: package 'dplyr' was built under R version 4.5.1
    146 | #> 
    147 | #> Attaching package: 'dplyr'
    148 | #> The following objects are masked from 'package:stats':
    149 | #> 
    150 | #>     filter, lag
    151 | #> The following objects are masked from 'package:base':
    152 | #> 
    153 | #>     intersect, setdiff, setequal, union
    154 | multi_box(
    155 |   values = c(21, 45), title = "Important <br>button",
    156 |   number_zoom = 300, icons = c("apple", "calendar"), color = "warning",
    157 |   txt = c("times", "reports")
    158 | ) %>%
    159 |   finisher(divs = .)
    160 | 
    161 |   
    162 |     

    163 | 164 | 177 | 178 | 179 | if (FALSE) { # \dontrun{ 180 | if (interactive()) { 181 | # EXAMPLE1 182 | } 183 | } # } 184 |
    185 |
    186 |
    187 | 190 |
    191 | 192 | 193 |
    202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | --------------------------------------------------------------------------------