WHAT DO YOU NEED FOR THIS TUTORIAL?

You need to have 3 different dataframes (grouped by day, by week and by month)

STEP BY STEP

A.Basics

A.1. Let’s create an empty basic structure (HEADER + SIDEBAR + BODY)

## app.R ##
library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody()
)

server <- function(input, output) { }

shinyApp(ui, server)



A.2. Let’s put a tittle and three different sections in the menu

## app.R ##
library(shiny)
library(shinydashboard)
ui <- shinydashboard::dashboardPage(
  
  dashboardHeader(
    title="Energy consumption",
    titleWidth=250
  ),
  
  dashboardSidebar(
    sidebarMenu(
      
      menuItem("Datasets", tabName = "datasets", icon =icon("bar-chart-o")),
      menuItem("Graphs", tabName = "graphs", icon =icon("bar-chart-o")),       
      menuItem("Text", tabName = "text", icon = icon("line-chart"))
    )
        
    
  ),
  dashboardBody()
)

server <- function(input, output) { }
shinyApp(ui, server)



A.3. Let’s connect the body with the sidebar,showing the data per month when you select “datasets”

## app.R ##
library(shiny)
library(shinydashboard)
library(DT)
library(rstudioapi)

current_path = getActiveDocumentContext()$path 
setwd(dirname(current_path))
setwd("..")
rm(current_path)

data_bydays<-read.csv("./datasets/data_bydays.csv")
data_byweeks<-read.csv("/datasets/data_byweeks.csv")
data_bymonths<-read.csv("./datasets/data_bymonths.csv")

ui <- shinydashboard::dashboardPage(
  dashboardHeader(
    title="Energy consumption",
    titleWidth=250
  ),
  dashboardSidebar(
    sidebarMenu(
      menuItem("Datasets", tabName = "datasets", icon =icon("fasfa-address-book")),
      menuItem("Graphs", tabName = "graphs", icon =icon("bar-chart-o")),       
      menuItem("Text", tabName = "text", icon = icon("line-chart"))
    )
    
    
  ),
  dashboardBody(
    tabItems(
      tabItem(tabName = "datasets", box(DT::dataTableOutput("datasetTable"),width=10)),
      
      tabItem(tabName = "graphs", box()),
      
      tabItem(tabName = "text", box())
      
    )
  )
)

server <- function(input, output) {
    output$datasetTable <- renderDataTable ({
    data_bymonths
      
      
    output$
      
    output$
  })
}
shinyApp(ui, server)



A.4. Let’s add a widget for selecting granularity (by month, by week and by day)

## app.R ##
## app.R ##
library(shiny)
library(shinydashboard)
library(DT)
library(rstudioapi)

current_path = getActiveDocumentContext()$path 
setwd(dirname(current_path))
setwd("..")
rm(current_path)

data_bydays<-read.csv("./datasets/data_bydays.csv")
data_byweeks<-read.csv("/datasets/data_byweeks.csv")
data_bymonths<-read.csv("./datasets/data_bymonths.csv")
ui <- shinydashboard::dashboardPage(
  dashboardHeader(
    title="Energy consumption",
    titleWidth=250
  ),
  dashboardSidebar(
    sidebarMenu(
      menuItem("Datasets", tabName = "datasets", icon =icon("fasfa-address-book")),
      menuItem("Graphs", tabName = "graphs", icon =icon("bar-chart-o")),       
      menuItem("Text", tabName = "text", icon = icon("line-chart")),
      selectInput(inputId = "Granularity", label = "Select a granularity",
                  choices=c("Day","Week","Month"))
    )
    
    
  ),
  dashboardBody(
    tabItems(
      tabItem(tabName = "datasets", box(DT::dataTableOutput("datasetTable"),width=10)),
      
      tabItem(tabName = "graphs", box()),
      
      tabItem(tabName = "text", box())
      
    )
  )
)

server <- function(input, output) {
    output$datasetTable <- renderDataTable ({
    data_bymonths
  })
}
shinyApp(ui, server)



A.5. Let’s make the “select input widget” work!

## app.R ##
## app.R ##
library(shiny)
library(shinydashboard)
library(DT)
library(rstudioapi)

current_path = getActiveDocumentContext()$path 
setwd(dirname(current_path))
setwd("..")
rm(current_path)

data_bydays<-read.csv("./datasets/data_bydays.csv")
data_byweeks<-read.csv("/datasets/data_byweeks.csv")
data_bymonths<-read.csv("./datasets/data_bymonths.csv")

ui <- shinydashboard::dashboardPage(
  dashboardHeader(
    title="Energy consumption",
    titleWidth=250
  ),
  dashboardSidebar(
    sidebarMenu(
      menuItem("Datasets", tabName = "datasets", icon =icon("fasfa-address-book")),
      menuItem("Graphs", tabName = "graphs", icon =icon("bar-chart-o")),       
      menuItem("Text", tabName = "text", icon = icon("line-chart")),
      selectInput(inputId = "Granularity", label = "Select a granularity",
                  choices=c("Day","Week","Month"))
    )
    
    
  ),
  dashboardBody(
    tabItems(
      tabItem(tabName = "datasets", box(DT::dataTableOutput("datasetTable"),width=10)),
      
      tabItem(tabName = "graphs", box()),
      
      tabItem(tabName = "text", box())
      
    )
  )
)

server <- function(input, output) {
  
  # Extract the name of the selected dataset
  get.granularity <- reactive({
    switch(input$Granularity,
           "Day" = data_bydays,
           "Week" = data_byweeks,
           "Month" = data_bymonths)
  })
  
  # Prepare the dataset
  filteredData<-reactive({
    get.granularity()
  })
  
  # Print the table
  output$datasetTable <- renderDataTable ({
    final_data<-filteredData()
    
    
  })
}
shinyApp(ui, server)



A.6. Let’s add another widget for selecting a specific variable. Make sure that it works!

## app.R ##
## app.R ##
library(shiny)
library(shinydashboard)
library(DT)
library(rstudioapi)
library(dplyr)

current_path = getActiveDocumentContext()$path 
setwd(dirname(current_path))
setwd("..")
rm(current_path)

data_bydays<-read.csv("./datasets/data_bydays.csv")
data_byweeks<-read.csv("/datasets/data_byweeks.csv")
data_bymonths<-read.csv("./datasets/data_bymonths.csv")

ui <- shinydashboard::dashboardPage(
  dashboardHeader(
    title="Energy consumption",
    titleWidth=250
  ),
  dashboardSidebar(
    sidebarMenu(
      menuItem("Datasets", tabName = "datasets", icon =icon("fasfa-address-book")),
      menuItem("Graphs", tabName = "graphs", icon =icon("bar-chart-o")),       
      menuItem("Text", tabName = "text", icon = icon("line-chart")),
      
      selectInput(inputId = "Granularity", label = "Select a granularity",
                  choices=c("Day","Week","Month")),
      
      selectInput(inputId = "Variable", label = "Select a variable",
                  choices=c("ActiveEnergy","ReactiveEnergy","Kitchen","Laundry","EWAC"))
    )
    
    
  ),
  dashboardBody(
    tabItems(
      tabItem(tabName = "datasets", box(DT::dataTableOutput("datasetTable"),width=10)),
      
      tabItem(tabName = "graphs", box()),
      
      tabItem(tabName = "text", box())
      
    )
  )
)

server <- function(input, output) {
  
  # Extract the name of the selected dataset
  get.granularity <- reactive({
    switch(input$Granularity,
           "Day" = data_bydays,
           "Week" = data_byweeks,
           "Month" = data_bymonths)
  })
  
  # Prepare the dataset
  filteredData<-reactive({
    get.granularity() %>% select(Variable=input$Variable, X)
  })
  
  # Print the table
  output$datasetTable <- renderDataTable ({
    final_data<-filteredData() 
    
  })
}
shinyApp(ui, server)



A.7. Let’s move to the graphs! Try to display this plot when you select “graphs” 

## app.R ##
library(shiny)
library(shinydashboard)
library(DT)
library(rstudioapi)
library(dplyr)
library(highcharter)

current_path = getActiveDocumentContext()$path 
setwd(dirname(current_path))
setwd("..")
rm(current_path)

data_bydays<-read.csv("./datasets/data_bydays.csv")
data_byweeks<-read.csv("/datasets/data_byweeks.csv")
data_bymonths<-read.csv("./datasets/data_bymonths.csv")

ui <- shinydashboard::dashboardPage(
  dashboardHeader(
    title="Energy consumption",
    titleWidth=250
  ),
  dashboardSidebar(
    sidebarMenu(
      menuItem("Datasets", tabName = "datasets", icon =icon("fasfa-address-book")),
      menuItem("Graphs", tabName = "graphs", icon =icon("bar-chart-o")),       
      menuItem("Text", tabName = "text", icon = icon("line-chart")),
      
      selectInput(inputId = "Granularity", label = "Select a granularity",
                  choices=c("Day","Week","Month")),
      
      selectInput(inputId = "Variable", label = "Select a variable",
                  choices=c("ActiveEnergy","ReactiveEnergy","Kitchen","Laundry","EWAC"))
    )
    
    
  ),
  dashboardBody(
    tabItems(
      tabItem(tabName = "datasets", box(DT::dataTableOutput("datasetTable"),width=10)),
      
      tabItem(tabName = "graphs", box(highchartOutput("plot"))),
      
      tabItem(tabName = "text", box())
      
    )
  )
)

server <- function(input, output) {
  
  # Extract the name of the selected dataset
  get.granularity <- reactive({
    switch(input$Granularity,
           "Day" = data_bydays,
           "Week" = data_byweeks,
           "Month" = data_bymonths)
  })
  
  # Prepare the dataset
  filteredData<-reactive({
    get.granularity() %>% select(Variable=input$Variable, X)
  })
  
  # Print the table
  output$datasetTable <- renderDataTable ({
    final_data<-filteredData() 
    
  })
  
   #Print the plot
   output$plot <- renderHighchart ({
     data_plot<-filteredData()
     hchart(data_plot, "line",hcaes(x=X, y=Variable))
   })
}
shinyApp(ui, server)



A.8. Let’s try to print some messages 

## app.R ##
library(shiny)
library(shinydashboard)
library(DT)
library(rstudioapi)
library(dplyr)
library(highcharter)

current_path = getActiveDocumentContext()$path 
setwd(dirname(current_path))
setwd("..")
rm(current_path)

data_bydays<-read.csv("./datasets/data_bydays.csv")
data_byweeks<-read.csv("/datasets/data_byweeks.csv")
data_bymonths<-read.csv("./datasets/data_bymonths.csv")

ui <- shinydashboard::dashboardPage(
  dashboardHeader(
    title="Energy consumption",
    titleWidth=250
  ),
  dashboardSidebar(
    sidebarMenu(
      menuItem("Datasets", tabName = "datasets", icon =icon("fasfa-address-book")),
      menuItem("Graphs", tabName = "graphs", icon =icon("bar-chart-o")),       
      menuItem("Text", tabName = "text", icon = icon("line-chart")),
      
      selectInput(inputId = "Granularity", label = "Select a granularity",
                  choices=c("Day","Week","Month")),
      
      selectInput(inputId = "Variable", label = "Select a variable",
                  choices=c("ActiveEnergy","ReactiveEnergy","Kitchen","Laundry","EWAC"))
    )
    
    
  ),
  dashboardBody(
    tabItems(
      tabItem(tabName = "datasets", box(DT::dataTableOutput("datasetTable"),width=10)),
      
      tabItem(tabName = "graphs", box(highchartOutput("plot"))),
      
      tabItem(tabName = "text", box(textOutput("messages")))
      
    )
  )
)

server <- function(input, output) {
  
  # Extract the name of the selected dataset
  get.granularity <- reactive({
    switch(input$Granularity,
           "Day" = data_bydays,
           "Week" = data_byweeks,
           "Month" = data_bymonths)
  })
  
  # Prepare the dataset
  filteredData<-reactive({
    get.granularity() %>% select(Variable=input$Variable, X)
  })
  
  # Print the table
  output$datasetTable <- renderDataTable ({
    final_data<-filteredData() 
    
  })
  
   # Print the plot
   output$plot <- renderHighchart ({
     data_plot<-filteredData()
     hchart(data_plot, "line",hcaes(x=X, y=Variable))
   })
   
  
   # Print the messages 
  output$messages<- renderText({
    data_text<-filteredData()
    print(paste0("You have consumed a mean of ", round(mean(data_text$Variable)), " watts"))
  })
}

shinyApp(ui, server)



A.9. Let’s add an infobox with the amount of money spent 

## app.R ##

library(shiny)
library(shinydashboard)
library(DT)
library(rstudioapi)
library(dplyr)
library(highcharter)

current_path = getActiveDocumentContext()$path 
setwd(dirname(current_path))
setwd("..")
rm(current_path)

data_bydays<-read.csv("./datasets/data_bydays.csv")
data_byweeks<-read.csv("/datasets/data_byweeks.csv")
data_bymonths<-read.csv("./datasets/data_bymonths.csv")

ui <- shinydashboard::dashboardPage(
  dashboardHeader(
    title="Energy consumption",
    titleWidth=250
  ),
  dashboardSidebar(
    sidebarMenu(
      menuItem("Datasets", tabName = "datasets", icon =icon("fasfa-address-book")),
      menuItem("Graphs", tabName = "graphs", icon =icon("bar-chart-o")),       
      menuItem("Text", tabName = "text", icon = icon("line-chart")),
      
      selectInput(inputId = "Granularity", label = "Select a granularity",
                  choices=c("Day","Week","Month")),
      
      selectInput(inputId = "Variable", label = "Select a variable",
                  choices=c("ActiveEnergy","ReactiveEnergy","Kitchen","Laundry","EWAC"))
    )
    
    
  ),
  dashboardBody(
    tabItems(
      tabItem(tabName = "datasets", box(DT::dataTableOutput("datasetTable"),width=10)),
      
      tabItem(tabName = "graphs", box(highchartOutput("plot"))),
      
      tabItem(tabName = "text", 
              
              # First row
              fluidRow(
                box(textOutput("messages"))),
              
              # Second row
              fluidRow(
                box(infoBoxOutput(width = 6, "box")))
      
     )
    )
  )
)

server <- function(input, output) {
  
  # Extract the name of the selected dataset
  get.granularity <- reactive({
    switch(input$Granularity,
           "Day" = data_bydays,
           "Week" = data_byweeks,
           "Month" = data_bymonths)
  })
  
  # Prepare the dataset
  filteredData<-reactive({
    get.granularity() %>% select(Variable=input$Variable, X)
  })
  
  # Print the table
  output$datasetTable <- renderDataTable ({
    final_data<-filteredData() 
    
  })
  
  # Print the plot
  output$plot <- renderHighchart ({
    data_plot<-filteredData()
    hchart(data_plot, "line",hcaes(x=X, y=Variable))
  })
  
  
  # Print the messages 
  output$messages<- renderText({
    data_text<-filteredData()
    print(paste0("You have consumed a mean of ", round(mean(data_text$Variable)), " watts"))
  })
  
  # Infobox
  output$box <- renderInfoBox({
    
    data_text<-filteredData()
    
    infoBox(
    "Information", paste0(round(mean(data_text$Variable)*0.00014), " euros"), icon = icon("list"),
    color = "maroon", fill = TRUE)
  })
}

shinyApp(ui, server)