color_bar text formatting

[ixodid198]

When the value for color_bar is small relative to the length the bar, the text seems misplaced. In the image see:

Nova Scotia, Increasing
The "2" is placed to the left of the bar.

Newfoundland and Labrador, Increasing
The "70" is misaligned with all the other numbers in its column.

Is this the desired behaviour?
It may well be. I'm new at most of this.
If this is correct, how can I stop it from happening?

[pdelboca]

This issue happens everytime data "grow exponentially" (Bigger differencies between max and min values). This can be reproduced with this code:

data.frame(
  key = LETTERS[1:4],
  value = c(1000,100,10,1)
) %>%
  mutate(value = color_bar()(value)) %>%
  kable("html", escape = F) %>%
  kable_styling("hover", full_width = F)

I'm not a css expert but I found removing the 'display:rtl' implemented in #49 solves this issue. I think focing text direction from right-to-left solves some issues but creates another. I did a quick workarround redefining the function in my code without that parameter.

[mikekaminsky]

@pdelboca how did you redefine the function? I'm running into this issue and would like to implement.

[ixodid198]

Hello, This was a while ago when I knew less R than I do no, which is still very little. In any case, here is what I used:

My version of color_bar with square bars

Remove commas from the data with gsub so it can calculate the correct width

color_bar <- function (color = "#49CA69", fun = "proportion", ...) { fun <- match.fun(fun) formatter("span", style = function(x) style(display = "inline-block", border-radius = "0px", padding-right = "0px", background-color = csscolor(color), width = percent(fun(as.numeric(gsub(",", "", x)), ...)))) }

Regards.

On Jul 23, 2019, at 5:42 PM, Michael [email protected] wrote:

@pdelboca https://github.com/pdelboca how did you redefine the function? I'm running into this issue and would like to implement.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/renkun-ken/formattable/issues/106?email_source=notifications&email_token=AC7RGAJD4UONLT2GVOOYL63QA53OBA5CNFSM4EYQP732YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2UQYBQ#issuecomment-514395142, or mute the thread https://github.com/notifications/unsubscribe-auth/AC7RGAJQJB6HNHO2CWJ6PVLQA53OBANCNFSM4EYQP73Q.

[psychemedia]

I've noticed that if the bar is narrow, text formatting can become an issue when rendering as HTML when using bookdown:

Using CSS linear gradient seems to get round the issue:

bg = function(start, end, color, ...) {
  paste("linear-gradient(90deg,transparent ",percent(start),",",
        color, percent(start), ",", color, percent(end),
        ", transparent", percent(end),")")
} 

color_bar2 =  function (color = "lightgray", fun = "proportion", ...) 
{
    fun <- match.fun(fun)
    formatter("span", style = function(x) style(display = "inline-block",
                `unicode-bidi` = "plaintext", 
                "background" = bg(1-fun(as.numeric(x), ...), 1, color), "width"="100%" ))
}

[nvelden]

When the function is defined outside the package don't forget to add a name space before the style function:

{
    fun <- match.fun(fun)
    formatter("span", style = function(x) formattable::style(display = "inline-block",
                `unicode-bidi` = "plaintext", 
                "background" = bg(1-fun(as.numeric(x), ...), 1, color), "width"="100%" ))
}