Skip to content

Fix README tile rendering by displaying example image instead of unstyled HTML #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

Fix README tile rendering by displaying example image instead of unstyled HTML #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d8b0490
Initial plan
Copilot Aug 14, 2025
d8b6bfa
Fix README.Rmd syntax error in finisher() function call
Copilot Aug 14, 2025
cac7f42
committing the finisher to verify fix
Aug 14, 2025
6213cf3
Fix README to display example image instead of unstyled HTML
Copilot Aug 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 0 additions & 31 deletions ..Rcheck/00check.log
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,4 @@ vignettes/*.pdf
.httr-oauth
.Rproj.user
inst/doc
..Rcheck/
9 changes: 7 additions & 2 deletions README.Rmd
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,11 @@ Please see the [Intro Vignette](http://datastrategist.github.io/TileMaker/articl

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:

```{r}
![TileMaker Example](example.PNG)

Here's the code that generates the tiles above:

```{r eval=FALSE}
suppressWarnings(suppressMessages(library(tidyverse,quietly = TRUE)))
library(TileMaker)

Expand Down Expand Up @@ -46,6 +50,7 @@ finisher(
title = "Important Reportings",
css = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css",
file = NULL,
textModifier = "h1",div_maker(subtitle = "Boom", textModifier = "hi",d1, d2, d3)
textModifier = "h1",
divs = div_maker(subtitle = "Boom", textModifier = "h2", d1, d2, d3)
)
```
163 changes: 9 additions & 154 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

[![Travis-CI Build
Status](https://travis-ci.org/DataStrategist/TileMaker.svg?branch=master)](https://travis-ci.org/DataStrategist/TileMaker)
[![Coverage
Expand All @@ -17,54 +16,36 @@ To install, please type:
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:
here's the basics:

This package is intended to “highlight single values”, mainly in
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:

![TileMaker Example](example.PNG)

Here's the code that generates the tiles above:

``` r
suppressWarnings(suppressMessages(library(tidyverse,quietly = TRUE)))
library(TileMaker)

a <- solo_box(value = 3, txt = "Little piggies<br>go to the market", icon = "piggy-bank")
b <- solo_gradient_box(value = 65, txt = "test score I got")
```

## -- using target value of 100 --

``` r
c <- solo_gradient_box(value = 95, txt = "test score I wanted")
```

## -- using target value of 100 --

``` r
d <- multi_box(values = c(4, 5, 6), txt = c("Sally", "George", "Mohammed"), icons = c("check", "plus", "calendar"), title = "Candidates")

e <- iris %>%
group_by(Species) %>%
summarize(a = mean(Petal.Length)) %>%
tile_matrix(values = a, txt = Species)
```

## -- using target value of 100 --
## -- using target value of 100 --
## -- using target value of 100 --

``` r
f <- iris %>%
group_by(Species) %>%
summarize(a = mean(Petal.Length)) %>%
mutate(old_a = c(3, 4, 5)) %>%
tile_matrix(data = ., values = a, txt = Species, former = old_a)
```

## -- using target value of 100 --
## -- using target value of 100 --
## -- using target value of 100 --

``` r
d1 <- div_maker(subtitle = "First line", textModifier = "h1", a, b)
d2 <- div_maker(subtitle = "Second line", textModifier = "h1", c, d)
d3 <- div_maker(subtitle = "Boom line", textModifier = "h1", e, f)
Expand All @@ -73,133 +54,7 @@ finisher(
title = "Important Reportings",
css = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css",
file = NULL,
textModifier = "h1",div_maker(subtitle = "Boom", textModifier = "hi",d1, d2, d3)
textModifier = "h1",
divs = div_maker(subtitle = "Boom", textModifier = "h2", d1, d2, d3)
)
```

<html>
<body>
<h1>Important Reportings</h1>
<div>
<hi>Boom</hi>
<div class="container">
<h1>First line</h1>
<div class="panel panel-info">
<div class="panel-body text-center">
<h1>
<i class="glyphicon glyphicon-piggy-bank"></i>
3
</h1>
<div style="margin-top: 10px;">Little piggies<br>go to the market</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-body text-center">
<h1>65</h1>
<div style="margin-top: 10px;">test score I got</div>
</div>
</div>
</div>
<div class="container">
<h1>Second line</h1>
<div class="panel panel-success">
<div class="panel-body text-center">
<h1>95</h1>
<div style="margin-top: 10px;">test score I wanted</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-body text-center">
<h1>Candidates</h1>
<h3>
<i class="glyphicon glyphicon-check"></i>
<span style="font-size:150%">4</span>
Sally
</h3>
<h3>
<i class="glyphicon glyphicon-plus"></i>
<span style="font-size:150%">5</span>
George
</h3>
<h3>
<i class="glyphicon glyphicon-calendar"></i>
<span style="font-size:150%">6</span>
Mohammed
</h3>
</div>
</div>
</div>
<div class="container">
<h1>Boom line</h1>
<a>
<h1></h1>
<div class="container">
<h2>
<div class="panel panel-danger">
<div class="panel-body text-center">
<h1>1.5</h1>
<div style="margin-top: 10px;">setosa</div>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-body text-center">
<h1>4.3</h1>
<div style="margin-top: 10px;">versicolor</div>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-body text-center">
<h1>5.6</h1>
<div style="margin-top: 10px;">virginica</div>
</div>
</div>
</h2>
</div>
</a>
<a>
<h1></h1>
<div class="container">
<h2>
<div class="panel panel-danger">
<div class="panel-body text-center">
<h1>
1.5
<sup style="font-size: 12px;color:#EEEEEE;vertical-align: top;">
<i class="glyphicon glyphicon-chevron-down" style="font-size: 10px; vertical-align: top;"></i>
50%
</sup>
</h1>
<div style="margin-top: 10px;">setosa</div>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-body text-center">
<h1>
4.3
<sup style="font-size: 12px;color:#EEEEEE;vertical-align: top;">
<i class="glyphicon glyphicon-chevron-up" style="font-size: 10px; vertical-align: top;"></i>
7.5%
</sup>
</h1>
<div style="margin-top: 10px;">versicolor</div>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-body text-center">
<h1>
5.6
<sup style="font-size: 12px;color:#EEEEEE;vertical-align: top;">
<i class="glyphicon glyphicon-chevron-up" style="font-size: 10px; vertical-align: top;"></i>
12%
</sup>
</h1>
<div style="margin-top: 10px;">virginica</div>
</div>
</div>
</h2>
</div>
</a>
</div>
</div>
</body>
</html>
```