[CALR-50] Extend shinydashboard 'infoBox' function for more flexibility

[eblondel]

Issue migrated from JIRA: https://sdlc.review.fao.org/jira/browse/CALR-50
Creator/Reporter: Emmanuel Blondel @eblondel
Assignee: Brian Ojok @brianandy
Priority: High
Status: Done
Date of creation: 2021-12-21T08:54:19.000+0000

One limitation of infoBox is its lack of flexibility to manage css classes and style property. In our case, it prevents us from applying different stylings to infoBoxes depending on the module. the only way is to modify the CSS classes at app level, but then the styles are applied in the same way to all info boxes.

The purpose of this task is to create a calipseoInfoBox function in ui_utils.R that re-writes the shinydashboard infoBox.

Looking at the infoBox function:

 
{code:java}
infoBox
function (title, value = NULL, subtitle = NULL, icon = shiny::icon("bar-chart"),
color = "aqua", width = 4, href = NULL, fill = FALSE)
{
validateColor(color)
tagAssert(icon, type = "i")
colorClass <- paste0("bg-", color)
boxContent <- div(class = "info-box", class = if (fill)
colorClass, span(class = "info-box-icon", class = if (!fill)
colorClass, icon), div(class = "info-box-content",
span(class = "info-box-text", title), if (!is.null(value))
span(class = "info-box-number", value), if (!is.null(subtitle))
p(subtitle)))
if (!is.null(href))
boxContent <- a(href = href, boxContent)
div(class = if (!is.null(width))
paste0("col-sm-", width), boxContent)
}
<bytecode: 0x000001c0a0b7fff8>
<environment: namespace:shinydashboard>
{code}
We can list different classes, that should be handled as args of the function, taking as default the infoBox class names:

• "info-box" --> class
• "info-box-icon" --> iconClass
• "info-box-content" --> contentClass
• "info-box-text" --> textClass
• "info-box-number" --> numberClass

In addition a style arg should be added to be applied to the info box container (in addition to the class.), for even more flexibility.

Once this is done, calipseoInfoBox should replace infoBox wherever it is needed, and info-box modified css classes should be removed from header.

Info boxes in the 'home' should have the default css classes, but in other places like the vessel detailed module or the logbook overview, infoBoxes should be smaller.

 

 

 

[eblondel]

Author: Emmanuel Blondel @eblondel
Date of creation: 2022-01-01T12:10:42.793+0000
Last update: 2022-01-01T12:10:42.793+0000

[~brian.ojok] please discuss this with [~alexandre.bennici@fao.org] Indeed there was somewhere (in vessel_utils.R I think) some custom function with the same spirit, but we should make it generic and flexible enough. so the above proposal with classes args and style, is probably the right way to move forward.

[eblondel]

Author: Brian Ojok @brianandy
Date of creation: 2022-01-01T13:36:50.112+0000
Last update: 2022-01-01T13:36:50.112+0000

[~emmanuel.blondel] alright