Search code examples
rshinyflexdashboard

scrollable tab in flexdashboard


I hope all is well.

I have this flexdashboard app. [1]: https://i.sstatic.net/mqiWV.png and I want to have the "Notes and Formulas" tab to be scrollable, since I plan on writing a load of explanations.

Following is the code I use

---
title: "Finance"
runtime: shiny
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill
    smooth_scroll: true
    
    theme: simplex
---

```{r setup, include=FALSE}
library(flexdashboard)
library(fBasics)
library(FinTS)
library(tidyquant)
library(shiny)
library(quantmod)
library(ggplot2)
library(highcharter)
library(shinyjs)
library(htmltools)
scroll_css = "<style> #section-text {overflow-y: scroll;}</style>"
```

Sidebar {.sidebar}
=========================================
```{r echo=FALSE}
tags$h5("Please click the submit button after every input change")
tags$hr()

textInput("tickers","Ticker",value = "",placeholder = "tickers")
dateInput("from","Starting Date",format = "yyyy-mm-dd")
sliderInput("k","Number of Period",min = 0,max = 250,value = 10)
checkboxGroupInput("priceKind","Kind (Choose 1)",c("Open","High","Low","Close"),selected = "Close",inline = TRUE)
# Close = Adjusted
kind = c("Open","High","Low","Close")
kindIndex = c(1,2,3,4)
names(kindIndex) = kind

numericInput("x","Initial Investment in $",value = 0)
sliderInput("m","Number of Periods of Interest Payment per annum",min = 1,max = 365,value = 2)
sliderInput("r","Interest year per annum",min = 0,max = 1,value = 0.05)

actionButton("go","Submit")
```

CH 1
=========================================

Row {data-height=200}
-----------------------------------------

### Notes and Formulas
```{r}
htmltools::includeMarkdown('Notes.Rmd')
```

Any help is much appreciated.
This is the Notes.Rmd file:

---
title: "Notes"
author: "Homi"
date: "11/10/2020"
output: html_document
---

* Financial time series analysis is concerned with the theory and practice of asset
valuation over time. It is a highly empirical discipline, but like other scientific
fields theory forms the foundation for making inference.  
* Both financial theory and its empirical time series contain an element of
uncertainty.
* Two main reasons to use *returns* instead of *prices*: 1) for average
investors, return of an asset is a complete and scale-free summary of the investment
opportunity. 2) return series are easier to handle than price series because
the former have more attractive statistical properties. There are, however, several
definitions of an asset return.
* From now on assume $P_t$ is the price of the stock at time $t$
* One-Period Simple Return: $$ 1 + R_t = \frac{P_t}{P_t-1} \, \text{or}\ P_t = P_{t-1}(1+R_t) $$
* One-Period Simple Net Return: $$ R_t = \frac{P_t}{P_{t-1}} - 1 = \frac{P_t - P_{t-1}}{P_{t-1}} $$
* Multiperiod Simple Return: $$ 1 + R_t[k] = \frac{P_t}{P_{t-k}} = \prod_{j=0}^{k-1}(1+R_{t-j})$$
* k-period simple net return: $$ R_t[k] = \frac{(P_t - P_{t-k})}{P_{t-k}}$$
* Annualized return: $$ Annualized{R_t[k]} = [\prod_{j=0}^{k-1}(1+R_{t-j})]^{1/k} - 1$$ or $$ Annualized{R_t[k]} = exp[\frac{1}{k}\sum_{j=0}^{k-1}ln(1+R_{t-j})] - 1$$
* Continuous compounding for $m$ periods in a year with $x\%$ interest year per annum for initial investment C: $$ C(1+x/m)^m$$ 
 

Solution

  • You can add a css chunck that adds scrolling to the div of class chart-shim of your section-notes-and-formulas:

    ```{css my-style, echo = FALSE}
    #section-notes-and-formulas
      .chart-shim {
        overflow-y: scroll;
        }
    ```