Open matbmeijer opened 4 years ago
Thank you for the issue.
I can update that function.
Can you first check if this solves the issue for you.
First set options('encoding'='UTF-8')
then run the slick with the htmlwidget.
From the help of readLines
encoding: encoding to be assumed for input strings. It is used to mark character strings as known to be in Latin-1 or UTF-8: it is not used to re-encode the input. To do the latter, specify the encoding as part of the connection con or via options(encoding=): see the examples.
It looks like the original widget has to be encoded correctly, readLines
will not change the encoding of the characters.
Can you save one of your widgets say p
and paste in the output from dput(p)
so i can recreate your issue.
Thanks
Hi, thank you for the fast reply!
I am working in an .Rmd file, and I set the encoding to r options('encoding'='UTF-8')
, but it did not work - I still get the wrong result.
The result from the r dput(p)
is the following (p being a formattable htmlwidget converted with as.htmlwidget to htmlwidget). But I don´t believe the problem is here. I believe the environment encoding is set to utf-8, but the functions environment of the slick_div.htmlwidget function not. and the r htmlwidgets::saveWidget(x,file = tf)
line might take the default encoding of the system, although I set r options('encoding'='UTF-8')
before in the global environment - my pc´s default encoding is ISO-8859-1. Let me know if you need anything else!
structure(list(x = list(html = "<table class=\"table table-condensed\">\n <thead>\n <tr>\n <th style=\"text-align:left;\"> </th>\n <th style=\"text-align:left;\"> pais </th>\n <th style=\"text-align:right;\"> iso </th>\n <th style=\"text-align:right;\"> venta_pvp </th>\n <th style=\"text-align:right;\"> var </th>\n <th style=\"text-align:right;\"> var_sem_aa </th>\n <th style=\"text-align:right;\"> Venta 5 semanas </th>\n </tr>\n </thead>\n<tbody>\n <tr>\n <td style=\"text-align:left;\"> <span style=\"color: green\">\n <i class=\"glyphicon glyphicon-arrow-up\"></i>\n</span> </td>\n <td style=\"text-align:left;\"> Reino Unido </td>\n <td style=\"text-align:right;\"> <img src=\"./flags/famfamfam_flag_icons/png/GB.png\"/> </td>\n <td style=\"text-align:right;\"> <span style=\"display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightblue; width: 100.00%\">\20086,523.21</span> </td>\n <td style=\"text-align:right;\"> <span style=\"color: red\">-41.59%</span> </td>\n <td style=\"text-align:right;\"> <span style=\"color: green\">30.90%</span> </td>\n <td style=\"text-align:right;\"> <span id=\"htmlwidget-2ed837169c14053d3620\" class=\"sparkline html-widget\"></span>\n<script type=\"application/json\" data-for=\"htmlwidget-2ed837169c14053d3620\">{\"x\":{\"values\":[0.129222516706108,-0.333751735834021,1.25216021472118,0.315832773712846,-1.28760335131164],\"options\":{\"type\":\"line\",\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}</script> </td>\n </tr>\n <tr>\n <td style=\"text-align:left;\"> <span style=\"color: green\">\n <i class=\"glyphicon glyphicon-arrow-up\"></i>\n</span> </td>\n <td style=\"text-align:left;\"> Países Bajos </td>\n <td style=\"text-align:right;\"> <img src=\"./flags/famfamfam_flag_icons/png/NL.png\"/> </td>\n <td style=\"text-align:right;\"> <span style=\"display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightblue; width: 80.37%\">\20069,536.07</span> </td>\n <td style=\"text-align:right;\"> <span style=\"color: red\">-18.41%</span> </td>\n <td style=\"text-align:right;\"> <span style=\"color: green\">47.87%</span> </td>\n <td style=\"text-align:right;\"> <span id=\"htmlwidget-a1ab8bd512590bdbd37c\" class=\"sparkline html-widget\"></span>\n<script type=\"application/json\" data-for=\"htmlwidget-a1ab8bd512590bdbd37c\">{\"x\":{\"values\":[-0.186751659931056,-1.3476674417042,-0.352432611806132,-0.168420121919685,0.577809053653512],\"options\":{\"type\":\"line\",\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}</script> </td>\n </tr>\n <tr>\n <td style=\"text-align:left;\"> <span style=\"color: green\">\n <i class=\"glyphicon glyphicon-arrow-up\"></i>\n</span> </td>\n <td style=\"text-align:left;\"> Portugal </td>\n <td style=\"text-align:right;\"> <img src=\"./flags/famfamfam_flag_icons/png/PT.png\"/> </td>\n <td style=\"text-align:right;\"> <span style=\"display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightblue; width: 61.52%\">\20053,227.11</span> </td>\n <td style=\"text-align:right;\"> <span style=\"color: green\">19.47%</span> </td>\n <td style=\"text-align:right;\"> <span style=\"color: red\">-34.64%</span> </td>\n <td style=\"text-align:right;\"> <span id=\"htmlwidget-ecc018d4db37931c37da\" class=\"sparkline html-widget\"></span>\n<script type=\"application/json\" data-for=\"htmlwidget-ecc018d4db37931c37da\">{\"x\":{\"values\":[0.625674855852418,-1.24886595248823,-1.93165171731139,0.266382358557024,0.295752370655017],\"options\":{\"type\":\"line\",\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}</script> </td>\n </tr>\n <tr>\n <td style=\"text-align:left;\"> <span style=\"color: green\">\n <i class=\"glyphicon glyphicon-arrow-up\"></i>\n</span> </td>\n <td style=\"text-align:left;\"> Turquía </td>\n <td style=\"text-align:right;\"> <img src=\"./flags/famfamfam_flag_icons/png/TR.png\"/> </td>\n <td style=\"text-align:right;\"> <span style=\"display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightblue; width: 60.41%\">\20052,267.94</span> </td>\n <td style=\"text-align:right;\"> <span style=\"color: green\">6.05%</span> </td>\n <td style=\"text-align:right;\"> <span style=\"color: red\">-0.62%</span> </td>\n <td style=\"text-align:right;\"> <span id=\"htmlwidget-e561c3025cc6231b395d\" class=\"sparkline html-widget\"></span>\n<script type=\"application/json\" data-for=\"htmlwidget-e561c3025cc6231b395d\">{\"x\":{\"values\":[0.93287421664541,1.47717744948537,-0.27039190120818,0.380234557105465,-0.979703869875312],\"options\":{\"type\":\"line\",\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}</script> </td>\n </tr>\n <tr>\n <td style=\"text-align:left;\"> <span style=\"color: green\">\n <i class=\"glyphicon glyphicon-arrow-up\"></i>\n</span> </td>\n <td style=\"text-align:left;\"> Rusia </td>\n <td style=\"text-align:right;\"> <img src=\"./flags/famfamfam_flag_icons/png/RU.png\"/> </td>\n <td style=\"text-align:right;\"> <span style=\"display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightblue; width: 57.36%\">\20049,631.10</span> </td>\n <td style=\"text-align:right;\"> <span style=\"color: red\">-9.57%</span> </td>\n <td style=\"text-align:right;\"> <span style=\"color: green\">27.14%</span> </td>\n <td style=\"text-align:right;\"> <span id=\"htmlwidget-9f9d2b33694e2bf480de\" class=\"sparkline html-widget\"></span>\n<script type=\"application/json\" data-for=\"htmlwidget-9f9d2b33694e2bf480de\">{\"x\":{\"values\":[-1.04183046898614,-0.76610759069263,0.120323922114076,0.573343077752449,-1.19292747633278],\"options\":{\"type\":\"line\",\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}</script> </td>\n </tr>\n <tr>\n <td style=\"text-align:left;\"> <span style=\"color: red\">\n <i class=\"glyphicon glyphicon-arrow-down\"></i>\n</span> </td>\n <td style=\"text-align:left;\"> Francia </td>\n <td style=\"text-align:right;\"> <img src=\"./flags/famfamfam_flag_icons/png/FR.png\"/> </td>\n <td style=\"text-align:right;\"> <span style=\"display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightblue; width: 49.54%\">\20042,864.83</span> </td>\n <td style=\"text-align:right;\"> <span style=\"color: red\">-46.26%</span> </td>\n <td style=\"text-align:right;\"> <span style=\"color: green\">7.69%</span> </td>\n <td style=\"text-align:right;\"> <span id=\"htmlwidget-b918cda80e322ec06e10\" class=\"sparkline html-widget\"></span>\n<script type=\"application/json\" data-for=\"htmlwidget-b918cda80e322ec06e10\">{\"x\":{\"values\":[0.630480830981316,1.31792287456568,1.66387528804368,0.823225211785445,0.177430898037216],\"options\":{\"type\":\"line\",\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}</script> </td>\n </tr>\n <tr>\n <td style=\"text-align:left;\"> <span style=\"color: green\">\n <i class=\"glyphicon glyphicon-arrow-up\"></i>\n</span> </td>\n <td style=\"text-align:left;\"> Italia </td>\n <td style=\"text-align:right;\"> <img src=\"./flags/famfamfam_flag_icons/png/IT.png\"/> </td>\n <td style=\"text-align:right;\"> <span style=\"display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightblue; width: 41.15%\">\20035,607.10</span> </td>\n <td style=\"text-align:right;\"> <span style=\"color: green\">18.12%</span> </td>\n <td style=\"text-align:right;\"> <span style=\"color: red\">-33.66%</span> </td>\n <td style=\"text-align:right;\"> <span id=\"htmlwidget-4d00d145cc9b75674135\" class=\"sparkline html-widget\"></span>\n<script type=\"application/json\" data-for=\"htmlwidget-4d00d145cc9b75674135\">{\"x\":{\"values\":[-0.439646993359681,-0.210095420899838,-0.138974677992052,-0.842060808737506,-0.0195762027592767],\"options\":{\"type\":\"line\",\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}</script> </td>\n </tr>\n <tr>\n <td style=\"text-align:left;\"> <span style=\"color: green\">\n <i class=\"glyphicon glyphicon-arrow-up\"></i>\n</span> </td>\n <td style=\"text-align:left;\"> Suiza </td>\n <td style=\"text-align:right;\"> <img src=\"./flags/famfamfam_flag_icons/png/CH.png\"/> </td>\n <td style=\"text-align:right;\"> <span style=\"display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightblue; width: 33.85%\">\20029,291.57</span> </td>\n <td style=\"text-align:right;\"> <span style=\"color: green\">49.45%</span> </td>\n <td style=\"text-align:right;\"> <span style=\"color: red\">-21.86%</span> </td>\n <td style=\"text-align:right;\"> <span id=\"htmlwidget-086ee522bf17bb29d7c2\" class=\"sparkline html-widget\"></span>\n<script type=\"application/json\" data-for=\"htmlwidget-086ee522bf17bb29d7c2\">{\"x\":{\"values\":[-1.20591651220131,0.217036244020289,-0.964415935325414,-0.464724225094459,-0.16377436030302],\"options\":{\"type\":\"line\",\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}</script> </td>\n </tr>\n <tr>\n <td style=\"text-align:left;\"> <span style=\"color: red\">\n <i class=\"glyphicon glyphicon-arrow-down\"></i>\n</span> </td>\n <td style=\"text-align:left;\"> Alemania </td>\n <td style=\"text-align:right;\"> <img src=\"./flags/famfamfam_flag_icons/png/DE.png\"/> </td>\n <td style=\"text-align:right;\"> <span style=\"display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightblue; width: 22.70%\">\20019,642.11</span> </td>\n <td style=\"text-align:right;\"> <span style=\"color: red\">-48.00%</span> </td>\n <td style=\"text-align:right;\"> <span style=\"color: green\">26.55%</span> </td>\n <td style=\"text-align:right;\"> <span id=\"htmlwidget-a88d946c1be1ce4617a2\" class=\"sparkline html-widget\"></span>\n<script type=\"application/json\" data-for=\"htmlwidget-a88d946c1be1ce4617a2\">{\"x\":{\"values\":[0.499010010418921,1.01893338067913,0.814957841022739,0.285716446046778,1.13555074473718],\"options\":{\"type\":\"line\",\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}</script> </td>\n </tr>\n <tr>\n <td style=\"text-align:left;\"> <span style=\"color: green\">\n <i class=\"glyphicon glyphicon-arrow-up\"></i>\n</span> </td>\n <td style=\"text-align:left;\"> España </td>\n <td style=\"text-align:right;\"> <img src=\"./flags/famfamfam_flag_icons/png/ES.png\"/> </td>\n <td style=\"text-align:right;\"> <span style=\"display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightblue; width: 14.54%\">\20012,577.88</span> </td>\n <td style=\"text-align:right;\"> <span style=\"color: red\">-34.20%</span> </td>\n <td style=\"text-align:right;\"> <span style=\"color: green\">16.73%</span> </td>\n <td style=\"text-align:right;\"> <span id=\"htmlwidget-64d11c617e6ecb61cf96\" class=\"sparkline html-widget\"></span>\n<script type=\"application/json\" data-for=\"htmlwidget-64d11c617e6ecb61cf96\">{\"x\":{\"values\":[-0.954692098419231,0.690313314431393,-0.372651951187344,0.775325127666857,-1.75294586620624],\"options\":{\"type\":\"line\",\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}</script> </td>\n </tr>\n</tbody>\n</table>"),
width = "100%", height = "90%", sizingPolicy = list(defaultWidth = NULL,
defaultHeight = NULL, padding = NULL, viewer = list(defaultWidth = NULL,
defaultHeight = NULL, padding = NULL, fill = TRUE,
suppress = FALSE, paneHeight = NULL), browser = list(
defaultWidth = NULL, defaultHeight = NULL, padding = NULL,
fill = FALSE, external = FALSE), knitr = list(defaultWidth = NULL,
defaultHeight = NULL, figure = TRUE)), dependencies = list(
structure(list(name = "htmlwidgets", version = "1.3",
src = list(file = "C:/Users/03739660/OneDrive - Mango/Documentos/R/R-3.6.1/library/htmlwidgets/www"),
meta = NULL, script = "htmlwidgets.js", stylesheet = NULL,
head = NULL, attachment = NULL, package = NULL, all_files = TRUE), class = "html_dependency"),
structure(list(name = "jquery", version = "1.11.3", src = list(
file = "C:/Users/03739660/OneDrive - Mango/Documentos/R/R-3.6.1/library/sparkline/htmlwidgets/lib/jquery"),
meta = NULL, script = "jquery.min.js", stylesheet = NULL,
head = NULL, attachment = NULL, package = NULL, all_files = TRUE), class = "html_dependency"),
structure(list(name = "jquery-sparkline", version = "2.1.2",
src = list(file = "C:/Users/03739660/OneDrive - Mango/Documentos/R/R-3.6.1/library/sparkline/htmlwidgets/lib/jquery.sparkline"),
meta = NULL, script = "jquery.sparkline.js", stylesheet = "jquery.sparkline.css",
head = NULL, attachment = NULL, package = NULL, all_files = TRUE), class = "html_dependency"),
structure(list(name = "sparkline-binding", version = "2.0",
src = list(file = "C:/Users/03739660/OneDrive - Mango/Documentos/R/R-3.6.1/library/sparkline/htmlwidgets"),
meta = NULL, script = "sparkline.js", stylesheet = NULL,
head = NULL, attachment = NULL, package = NULL, all_files = FALSE), class = "html_dependency")),
elementId = NULL, preRenderHook = NULL, jsHooks = list()), class = c("formattable_widget",
"htmlwidget"), package = "formattable")
```r
sure thing.
can you please set the saveWidget to selfContained=TRUE please. the paths in the structure are local.
thanks
Hi @yonicd,
I don´t understand very well what you mean. Do you mean to add in your r slick_div.htmlwidget
the r selfContained=TRUE
? Sorry, I am a little bit confused. If you don´t mind to elaborate on that. BY the way, thank you very much for the package, I am using it with flexdashboard and it creates amazing dashboards.
My apologies. In the htmlwidgets::saveWidget
there is an additional argument called selfContained
. https://github.com/ramnathv/htmlwidgets/blob/master/R/savewidget.R#L7
That is great news that the package is helping in shiny, thank you for sharing that 👍
My apologies. In the
htmlwidgets::saveWidget
there is an additional argument calledselfContained
. https://github.com/ramnathv/htmlwidgets/blob/master/R/savewidget.R#L7
¿If I understand it correctly it´s a change that needs to be made in your code: https://github.com/metrumresearchgroup/slickR/blob/master/R/slick_div.R:
Current code:
#' @importFrom htmlwidgets saveWidget
#' @importFrom htmltools css
#' @export
slick_div.htmlwidget <- function(
x,
css = htmltools::css(marginLeft='auto',marginRight='auto'),
type = 'iframe',
links = NULL
){
tf <- tempfile(fileext = '.html')
on.exit(unlink(tf,force = TRUE))
htmlwidgets::saveWidget(x,file = tf)
x_chr <- paste0(readLines(tf),collapse='\n')
slick_tag(type,varArgs = list(srcdoc = x_chr, style = css))
}
Necessary change:
#' @importFrom htmlwidgets saveWidget
#' @importFrom htmltools css
#' @export
slick_div.htmlwidget <- function(
x,
css = htmltools::css(marginLeft='auto',marginRight='auto'),
type = 'iframe',
links = NULL
){
tf <- tempfile(fileext = '.html')
on.exit(unlink(tf,force = TRUE))
htmlwidgets::saveWidget(x,file = tf, selfContained=TRUE)
x_chr <- paste0(readLines(tf),collapse='\n')
slick_tag(type,varArgs = list(srcdoc = x_chr, style = css))
}
Nonetheless, I tried the change to see if it worked and unfortunately it didn't , so I would go back to my initial proposal of permitting to set the encoding of readLines()
I need to be able to reproduce your error in order to find the correct solution.
Please either use reprex with your example or supply the data that is going into the slickR function that is creating the problem with the call that you are running.
Thanks
I played around with encoding a bit to see how options('encoding')
can be leveraged without needing to change slick_div.htmlwidget
From what I can see the readLines
respects the options('encoding')
From the documentation in ?Encoding
ISO-8859-1
is referred to as latin1
There is some ambiguity as to what is meant by a ‘Latin-1’ locale, since some OSes (notably Windows) make use of character positions used for control characters in the ISO 8859-1 character set. How such characters are interpreted is system-dependent but as from R 3.5.0 they are if possible interpreted as per Windows codepage 1252 (which Microsoft calls ‘Windows Latin 1 (ANSI)’) when converting to e.g. UTF-8.
options('encoding')
#> $encoding
#> [1] "native.enc"
x <- 'fa\xE7ile'
iconv(x,to = 'UTF-8',from = 'latin1')
#> [1] "façile"
tf <- tempfile(fileext = '.txt')
writeLines(x,con = tf)
readLines(tf)
#> [1] "fa\xe7ile"
readLines(tf,encoding = 'UTF-8')
#> [1] "fa\xe7ile"
readLines(tf,encoding = 'latin1')
#> [1] "façile"
options(encoding = 'latin1')
readLines(tf)
#> [1] "façile"
unlink(tf)
options(encoding = 'native.enc')
details::details(sessioninfo::session_info(),summary = 'session info')
Created on 2020-02-13 by the reprex package (v0.3.0)
Hi,
I have just noticed that the encoding with htmlwidgets can be wrong due to the current definition of slick_div.htmlwidget, The
r readLines
function is by default not "UTF-8", resulting in carrousels like these:I suggest the following change, giving the ability to the user to define the encoding, but defaulting to utf-8: