5  Flexdashboard with DataTable

To create a data table with Flexdashboard, you can use the DT library, which provides an R interface to the JavaScript library DataTables.

5.1 download dictionary

You can download the dictionary of variables and values using the following R code:

# Download dictionary of variables and values
url <- "https://github.com/jinhaslab/opendata/raw/8af2018ddd7f60b7323ce7bc69a58b0a9b70a07b/kwcs/pdf3.pdf"
download.file(url, "www/pdf3.pdf")
Warning in download.file(url, "www/pdf3.pdf"): URL
https://github.com/jinhaslab/opendata/raw/8af2018ddd7f60b7323ce7bc69a58b0a9b70a07b/kwcs/pdf3.pdf:
cannot open destfile 'www/pdf3.pdf', reason '그런 파일이나 디렉터리가 없습니다'
Warning in download.file(url, "www/pdf3.pdf"): 다운로드의 종료상태(exit
status)가 0이 아닙니다.
url2 <- "https://github.com/jinhaslab/opendata/raw/98779fcdb20ed1f3812a2793671c5d191c7a9703/kwcs/ques2.rds"
download.file(url2, "data/ques2.rds")
ques2 <- readRDS("data/ques2.rds")

The code downloads the ques2 data from the specified URL using the download.file function and saves it to a local file “data/ques2.rds”. Then, it reads the data from the local file using the readRDS function and stores it in the ques2 object.

5.2 first setting of flexdashboard

The code sets up the title of the dashboard to “KWCS dictionary” and specifies the output format as a Flexdashboard. It also loads the required packages, which include tidyverse, readxl, DT, and htmlwidgets.

In addition, it reads the ques2.rds data into the ques1 object and creates a new object ques_choice that contains the unique values of the type column from the ques1 data. This can be useful for filtering or grouping the data in later steps.

5.3 button options

btoption = list(
  list(
    extend = "excel",
    text = "current page (download)",
    filename = "data",
    exportOptions = list(modifier = list(page = "current"))
  ),
  list(
    extend = "excel",
    text = "total page (download)",
    filename = "data",
    exportOptions = list(modifier = list(page = "all"))
  )
)

The code creates a list btoption that defines two export options for the data table. The first option allows the user to download the current page of the data table as an Excel file, and the second option allows the user to download the entire data table as an Excel file.

5.4 Data Table height and window height

The code is a JavaScript function that calculates the height of an element as a percentage of the window height. The function takes a single argument percentage, which is the percentage of the window height to use as the height of the element.

For example, if you want an element to be 60% of the window height, you would call getRelativeHeight(0.6). The function would then return the height of the element in pixels as a string, such as “720px”.

This function can be useful when you want to create elements with dynamic height based on the size of the window, for example, when creating a dashboard with Flexdashboard.

5.5 create data table

DT::datatable(
  ques2, 
  extensions = 'Buttons',
  filter = 'top', 
  options = list(
    searching = TRUE, 
    ordering = TRUE, 
    scrollx = TRUE, 
    dom = "Blfrtip",
    buttons = btoption
  )
)

The code creates a data table using the datatable function from the DT library. The data table is created from the ques1 data and configured with various options to enable searching, ordering, and horizontal scrolling.

The extensions option is set to ‘Buttons’ to enable the use of buttons for exporting the data. The filter option is set to ‘top’ to display the filtering options at the top of the data table. The options argument is set to a list that includes the searching, ordering, and scrollx options set to TRUE to enable searching, ordering, and horizontal scrolling, respectively. The dom option in the DT library specifies the structure of the data table. The value ‘Blfrtip’ is a predefined string that stands for “buttons, length, filtering, information, paging, and table”. This value specifies that the data table should include buttons for exporting the data, a length selector for the number of rows to display, filtering options, information about the data table, pagination, and the table itself.

5.6 make dashboard for questionnaire and dictonary

The code creates a Flexdashboard that displays a PDF file and a data table.

The PDF file named pdf3.pdf is embedded in the dashboard using the HTML tag. The PDF file is specified using the src attribute and the type is set to “application/pdf”. The width and height of the PDF are set to “100%” and “1200px”, respectively, which means that the PDF will occupy the entire width of the dashboard and will have a height of 1200 pixels.

5.7 storyboard for dictionary

5.7.1 making function of Data Table

The code creates an R function dtf that creates a data table using the DT library. The function takes two arguments: i and height_ratio. i is used to filter the ques1 data based on the ques_choice object created earlier, and height_ratio is used to specify the height of the data table as a percentage of the window height.

The function uses the filter function from the dplyr package to filter the ques1 data based on the type column, and it passes the filtered data to the datatable function from the DT library. The datatable function is configured with various options, including enabling searching and ordering, setting the width and height of the data table, and specifying the export options using the btoption list created earlier.

The scrollX option is set to “400px” to specify the width of the horizontal scrollbar, and the scrollY option is set to the result of the JS function, which calculates the height of the data table as a percentage of the window height using the getRelativeHeight function. The dom option is set to ‘Blfrtip’ to add buttons, filtering options, information, and pagination to the data table, and the buttons option is set to btoption to specify the export options for the data table.

By creating this function, you can use it to create data tables for different types of data in the ques1 data. To create a data table for a specific type, you simply need to call the dtf function and pass in the appropriate value for the i argument.

5.7.2 add storyboard for selecting variable type

The code creates two slides in the storyboard of the Flexdashboard. Each slide contains a single widget, which is the result of calling the dtf function with a different argument.

The first slide contains a data table for the first type of data in the ques1 data, which is created by calling the dtf function with the argument 1. The second slide contains a data table for the second type of data in the ques1 data, which is created by calling the dtf function with the argument 2.

Each slide in the storyboard is represented by a heading that starts with ### code, followed by the widget generated by the dtf function. The reader can navigate between the slides using the built-in navigation controls, allowing them to view the data tables for different types of data in the ques1 data.

5.8 put it togather

5.9 Quiz

Use of all type of variable to make storyboard, as following.