timelyportfolio / dataui

data-ui for R
https://timelyportfolio.github.io/dataui/
Other
74 stars 5 forks source link

Different diagonal fill colours for multiple sparklines #13

Closed ixodid198 closed 3 years ago

ixodid198 commented 3 years ago

I would like the colour of the diagonal fill to match the color of the sparkline.

So, in the code below, Company A will have a green line with green diagonal fill underneath and company B will have a red line with red diagonal fill underneath.

I can't seem to get the diagonal fill to take on more than one value.

library("tidyverse")
library("dataui")
library("reactable")

df <- tibble(
  Company = c("A", "B"),
  Line = list(list(c(1, 2, 1)), list(c(2, 2, 1)))
)

colpal <- c("#00DA07", "#BB0337")

rt1 <- reactable(df,
        compact = TRUE,
        fullWidth = FALSE,

        columns = list(
          Line = colDef(
            cell = function(value, index) {
              dui_sparkline(
                data = value[[1]], 
                height = 80,
                components = list(
                  dui_sparklineseries(
                    curve = "linear",
                    showArea = TRUE,
                    fill = "url(#area_pattern2)",
                    stroke = colpal[index]),

                  # Diagonal fill lines
                  dui_sparkpatternlines(
                    id = "area_pattern2",
                    height = 4,
                    width = 4,
                    stroke =  colpal[index],
                    strokeWidth = 1,
                    orientation = "diagonal"
                  )

                )
              )
            }
          )
        )
)
rt1