search

un-fao / calipseo-shiny

Calipseo is FAO web- based platform for national Fisheries Authorities to streamline management of fisheries data and the production, analysis and reporting of fishery statistics.
1 stars 0 forks source link

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

Closed eblondel closed 6 months ago

eblondel commented 6 months ago

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 _uiutils.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>

{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 commented 6 months ago

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 commented 6 months ago

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