-
Notifications
You must be signed in to change notification settings - Fork 9
/
smarp_ui.Rmd
134 lines (97 loc) · 4.68 KB
/
smarp_ui.Rmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
---
title: "SmaRP UI"
author: "Nicoletta Farabullini"
date: "`r Sys.Date()`"
output: rmarkdown::html_vignette
vignette: >
%\VignetteIndexEntry{SmaRP UI}
%\VignetteEngine{knitr::rmarkdown}
%\VignetteEncoding{UTF-8}
---
```{r setup, include = FALSE}
knitr::opts_chunk$set(
collapse = TRUE,
comment = "#>"
)
library(shiny)
```
```{r, echo=FALSE}
htmltools::img(src = knitr::image_uri("figures/mirai.png"),
alt = 'logo',
style = 'position:absolute; top:0; right:0; padding:10px; margin-right:200px; max-height: 40px;border-style: none;')
```
## Introduction
```{r child = 'children/short-intro.Rmd'}
```
This vignette describes the UI components and their inner-workings. It is programmed exclusively using shiny basic package and intended to be used with the mere support of a web browser. In addition to theoretical explanations, simplified versions of code are included; for the full version please check the ui.R file.
## Outline
The ui script is wrapped inside a `fluiPage` divided into different `fluidRow`s, one for each component: header, Personal Info, second, third Pillars and plots and table. Every component is then organized into a combination of other `fluidRow`s and `column`s.
<!-- The section gets "header" as id, we need to override the css style
centering #header -->
<style type="text/css">#header {text-align: left;}</style>
## Header
The header is the first object starting from the top of the page and it includes a long, blue bar with the SmaRP logo and a title.
![](figures/SmaRP_logo.png "SmaRP_logo")
These three objects are placed inside a `fluidRow` and divided into two columns: one containing the logo and the blue bar and the other the title. The blue bar and the logo is dragged from the Mirai Solutions website in the form of a URL and the logo as a .png image:
```{r, eval = FALSE}
fluidRow(
column(
width,
url_to_blue_bar,
logo.png
),
style = "margin-top: 10%; margin-bottom: 10%;",
column(
width=1,
title
),
style = "margin-left: 0%; margin-right: 0%;"
)
```
where,
width represents the width of the column, which can range between 1 and 12
style determines where objects should be located.
## Personal Info
The personal Info panel gathers the user's personal data, later used to perform calculations. Fields are aligned both vertically and horizontally as shown in the snippet.
![](figures/SmaRP_personal_info.png "SmaRP_personal_info")
Each component is created using a specific shiny function:
* Personal Info: text object with `h4` dimensions
* Birthday: `dateInput` object with date-month-year format. The user can either select a date form the calendar or manually type it in
* Gender affiliation: group of `radioButtons`with "Male" as the pre-selected option, the user can only select one
* Desired retirement age: optional `checkbox` object. If selected, it will show additional objects to be filled
* PLZ: in the form of a `selectInput` (dropdown) object. The user can either select a date from the drop-down menu or manually type it
* Marital Status:`radioButtons` group of 3
* Kids: `numericInput` object. The user can increase/decrease the number with the arrows or enter it manually; the default is zero
* Church affiliation: optional `checkbox` object.
Even though most components are self explanatory, `bsTooltip`s were added to provide short explanations. They appear in the form of a box when the user places the cursor on a specific object:
```{r, eval = FALSE}
fluidRow(
fluidRow(
column(
width,
dateInput("Birthdate", ...
),
bsTooltip("Birthdate", ...
)
)
)
)
```
## 2nd and 3rd Pillar
Below the personal info part lies the pillars section. Second Pillar is intended for the case of an occupational fund and the third Pillar for a private one.
![](figures/SmaRP_Pillar_II.png "SmaRP_Pillar_2")
![](figures/SmaRP_Pillar_III.png "SmaRP_Pillar_3")
They both contain `numericInput`s inside `fluidRow`s and a `radioButtons` in the case of the second Pillar.
## Plots and table
On the right side, the ui has two interchangeable parts: two plots and a table. Only one of these can be shown at a time by clicking on the respective tab on the top-center.
The first graph shows how much the retirement fund will increase over time, whereas the second displays percentage contributions from each pillar.
The table reports many output values including: Calendar, DirectP2, ReturnP2, TotalP2, DirectP3,...
## Additional components
GitHub and Mirai Solutions logos were imported using urls.
The disclaimer message was created using the `verbatimTextOutput` function:
```{r, eval = FALSE}
fluidRow(
style = "margin-left: 60%; margin-bottom: 0.1%;",
verbatimTextOutput("disclaimer")
)
```