--- title: Footer for Flexdashboard author: Rob Wiederstein date: '2021-07-05' slug: footer-for-flexdashboard categories: - R tags: - flexdashboard layout: layouts/post/single draft: no bibliography: - packages.bib - ../blog.bib csl: ../ieee-with-url.csl link-citations: yes nocite: | @R-base, @R-blogdown, @R-tidyverse, @R-bslib, @R-flexdashboard, @R-rmarkdown header: image: feature.jpg alt: dashboard with footer caption: Flexdashboard with footer repo: https://raw.githubusercontent.com/RobWiederstein/purple-bananas/main/content/post/2021-07-05-footer-for-flexdashboard/index.Rmd summary: You can create a data dashboard in `R` using the `flexdashboard` package. In the background, there are a handful of other packages like bootstrap, bootswatch and fontawesome. The generated website did not have a footer though. Here is a mashup of some html and css. The code was posted in a codepen repo. --- ```{r load-packages, include = F} ## Load frequently used packages for blog posts packages <- c( 'devtools', #for session info 'ggthemes', #for plots 'blogdown', 'flexdashboard', 'rmarkdown', 'DT', 'bslib' ) lapply(packages, function(x) { if (!requireNamespace(x)) install.packages(x) library(x, character.only = TRUE) }) ``` ```{r set-chunk-options, include = F} ## Do not break chunk line ## Do not use spaces or periods "." or underscores "_" ## set options for knitr knitr::opts_chunk$set( comment = '', fig.width = 6, fig.asp = .8, fig.align="center", message=F, error=F, warning=F, tidy=T, comment='', cache=T, dev='svg', echo=F ) ``` ```{r set-ggplot-theme-defaults, include = F} #from ggthemes library(ggplot2); theme_set(ggthemes::theme_fivethirtyeight()) ``` ```{r define-color-palette, include = F, eval = T} # color blind friendly palette from http://www.cookbook-r.com/Graphs/Colors_(ggplot2)/ cbPalette <- c("#E69F00", "#56B4E9", "#009E73", "#F0E442", "#0072B2", "#D55E00", "#CC79A7", "#000000") ``` ```{r write-package-bib, echo = F} # write packages used to bib in current directory knitr::write_bib(.packages(), "./packages.bib") ``` # [Overview](#overview) Flexdashboard creates slick dashboards for the presentation of data. However, the out-of-the-box webpage didn't have a footer. The footer relies on older versions of bootstrap and it displays differently in codepen than in the "Indiana Early Childhood" [dashboard](https://robwiederstein.github.io/early_childhood/) Ideally, a footer should complement and match the navigation bar of the dashboard. And it shouldn't distract from the presentation of the data. It was a bit of a challenge to find a simple footer. # [Yaml Frontmatter](#frontmatter) The code was used in the Indiana Early Childhood [repo](https://github.com/RobWiederstein/early_childhood) and the files are `./my-css-rules.css` and `./includes/footer.html` . The YAML frontmatter for the flexdashboard looks like this: ```{r yaml-frontmatter, eval=F, echo = T} --- title: "Indiana Early Childhood" output: flexdashboard::flex_dashboard: theme: version: 4 bootswatch: sandstone base_font: google: Castoro heading_font: google: Lato code_font: google: # arguments to sass::font_google() family: Roboto Mono local: false font_scale: 1 css: my-css-rules.css mathjax: NULL orientation: columns vertical_layout: fill source_code: embed includes: after_body: ./includes/footer.html bibliography: ./refs.bib --- ``` # [CodePen Embed](#codepen) # [Acknowledgements](#acknowledge) The footer's original code was forked in Codepen from [here](https://codepen.io/scanfcode/pen/MEZPNd). # [References](#reference)
# [Disclaimer](#disclaimer) The views, analysis and conclusions presented within this paper represent the author’s alone and not of any other person, organization or government entity. While I have made every reasonable effort to ensure that the information in this article was correct, it will nonetheless contain errors, inaccuracies and inconsistencies. It is a working paper subject to revision without notice as additional information becomes available. Any liability is disclaimed as to any party for any loss, damage, or disruption caused by errors or omissions, whether such errors or omissions result from negligence, accident, or any other cause. The author(s) received no financial support for the research, authorship, and/or publication of this article. # [Reproducibility](#reproduce) ```{r reproducibility, echo = FALSE} # system & package info options(width = 120) session_info() ```