---
title: "AirQ_Dashboard"
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: scroll
    theme: yeti
    source_code: embed
---

```{r setup, include=FALSE}
library(flexdashboard)
library(tidyverse)
library(plotly)
library(DT)
library(highcharter)
```


# Dashboard 1 

## Kolom 1 {.tabset .tabset-fade} 

### Data Arduiono Matana {data-height=580}

```{r}
# import data sampel dari Arduino 
dt_matana <- read.csv("data_arduino.csv")

# Menampilkan Data dalam bentuk tabel
datatable(dt_matana,
          options=list(scrollX=TRUE),
          caption = htmltools::tags$caption(
            style = 'caption-side: bottom; text-align: center;',
            'Table: ', htmltools::em('Kualitas Udara Indonesia')
          ))
```

### Grafik Garis (Line-Chart) {data-height=580}

```{r}
# Membuat Grafik Kosong
highchart() %>%
  
# Menambahkan Grafik Pertama Opsi: "line" dan "areaspline"
hc_add_series(dt_matana, 
              type = "line",  
              hcaes(x = Timestamp, y = CO),
              name = "Karbon Monoksida",
              color="#FF3C6B") %>%

# Menambahkan Grafik Kedua 
hc_add_series(dt_matana, 
              type = "line",  
              hcaes(x = Timestamp, y = H2), 
              name = "Hidrogen",
              color="#FFCE0B") %>%
  
# Menambahkan Grafik Ketiga
hc_add_series(dt_matana, 
              type = "line", 
              hcaes(x = Timestamp, y = CO2),
              name = "Karbon Dioksida",
              color="#38D138") %>%
  
# Sesuaikan judul/subjudul grafik dan label masing-masing sumbu
hc_title(text = "Data Rekaman Arduino 900 Detik",
         style = list(fontSize = '20px', fontWeight = 'bold')) %>%
hc_subtitle(text = 'Universitas Matana',
              style = list(fontSize = '16px')) %>%
hc_xAxis(title = list(text = "Timestamp")) %>%
hc_yAxis(title = list(text = "Nilai Palutan")) %>%

# Atur posisi Keterangan (Legend)
hc_legend(
  layout = "vertical",       # Opsi: "horizontal" or "vertical"
  align = "right",           # Opsi: "left", "center", "right"
  verticalAlign = "middle"   # Opsi: "top", "middle", "bottom"
  ) %>% 

# Menambahkan tooltip 
hc_tooltip(sort = TRUE) %>% 

# Menambahkan referensi/tagging
hc_credits(enabled = TRUE, text = 'Referensi Warna', 
           href = "https://color.adobe.com/create/color-contrast-analyzer")
```

## Kolom 2 

### Grafik Batang (Bar-Chart) {data-height=580}

```{r}
# Hitung masing-masing rerata palutan
rerata_CO <- mean(dt_matana$CO)
rerata_H2 <- mean(dt_matana$H2)
rerata_CO2 <- mean(dt_matana$CO2)

# Masukkan dalam Data Frame
data_rerata <- data.frame(
  Palutan = c("CO", "H2", "CO2"),
  Rerata = c(rerata_CO, rerata_H2, rerata_CO2)
)

# warna grafik secara manual 
warna = c("#FF3C6B","#FFCE0B", "#38D138" )

# Membuat Grafik Batang  (Opsinya: column, bar, dan lollipop)
data_rerata %>% 
  arrange(desc(Rerata)) %>% 
  hchart('column', hcaes(x = Palutan, y = Rerata, color = warna)) %>%
  hc_add_theme(hc_theme_google()) %>% 
  hc_tooltip(pointFormat = '<b>Rerata Kualitas Udara: </b> {point.y} <br>') %>% 
  hc_title(text = 'Rata-rata Sampel Kualitas di Udara Matana', 
           style = list(fontSize = '20px', fontWeight = 'bold')) %>% 
  hc_subtitle(text = 'Masing-masing Kategori Palutan',
              style = list(fontSize = '16px')) %>% 
  
# Menambahkan referensi/tagging
hc_credits(enabled = TRUE, text = 'Referensi Warna', 
           href = "https://color.adobe.com/create/color-contrast-analyzer")
```

# Dashboard 2 

## Kolom {.tabset .tabset-fade} 

### Data Indonesia {data-height=580}

```{r}
# data kabupaten kota di Indonesia
# https://raw.githubusercontent.com/dsciencelabs/dataset/master/kabko_id.csv

dt_kabko <- read.csv2("kabko_id.csv")

# data dummy kualitas udara di kabko
n_kabko <- nrow(dt_kabko)                               # banyaknya kabupaten kota
CO <- round(runif(n_kabko, min=0, max=100), digits = 2) # CO (Karbon Monoksida) 
H2 <- round(runif(n_kabko, min=0, max=100), digits = 2) # H2 (Hidrogen) 
CO2<- round(runif(n_kabko, min=0, max=400), digits = 2) # CO2 (Karbon Dioksida) 

# Buat data frame kualitas udara harian
data_id <- data.frame(dt_kabko, CO, H2, CO2)

# kumpulkan data kualitas udara matana
matana = c("Matana University", 
           -6.243763872691305, 
           106.62500553068874, 
           rerata_CO, 
           rerata_H2, 
           rerata_CO2)

# gabungkan data kualitas udara Indonesia dan Matana
data_id_matana = rbind(data_id, matana)

# Menambahkan kolom baru berdasarkan tiga kondisi kolom lainnya
data_id_matana_kategori <- data_id_matana %>%
mutate(Kategori = ifelse(CO2 > 0 & CO2 <= 50, "Baik",
                  ifelse(CO2 > 50 & CO2 <= 100, "Sedang",
                  ifelse(CO2 > 100 & CO2 <= 150, "Tidak Sehat (Sensitif)",
                  ifelse(CO2 > 150 & CO2 <= 200, "Tidak Sehat",
                  ifelse(CO2 > 200 & CO2 <= 300, "Sangat Tidak Sehat",
                  "Bahaya"))))))

# Menampilkan Data dalam bentuk tabel
datatable(data_id_matana_kategori,
          options=list(scrollX=TRUE),
          caption = htmltools::tags$caption(
            style = 'caption-side: bottom; text-align: center;',
            'Table: ', htmltools::em('Kualitas Udara Indonesia + Matana + Kategori')
          ))
```


### Map Indonesia {data-height=580}

```{r}
library(plotly)
library(leaflet)  

# Buat peta Plotly
map <- data_id_matana_kategori %>%
       plot_ly(x = ~long, y = ~lat, type = "scattermapbox", mode = "markers",
        text = ~paste("Kabupaten Kota: ", kabko, 
                      "<br>CO: ", CO,
                      "<br>H2: ", H2,
                      "<br>CO2: ", CO2,
                      "<br>Kualitas Udara:", Kategori),
        marker = list(size = 7, color = ~CO2)) %>%
        layout(
        mapbox = list(center = list(lat = -2, lon = 118),
        zoom = 4, style = "open-street-map"),
          title = "Kualitas Udara di Indonesia",
          geo = list(scope = "asia",showland = TRUE)
        )

map
```


### Zoom Matana {data-height=580}

```{r}
library(plotly)
library(leaflet)  

# Buat peta Plotly
map <- data_id_matana_kategori %>%
       plot_ly(x = ~long, y = ~lat, type = "scattermapbox", mode = "markers",
        text = ~paste("Kabupaten Kota: ", kabko, 
                      "<br>CO: ", CO,
                      "<br>H2: ", H2,
                      "<br>CO2: ", CO2,
                      "<br>Kualitas Udara:", Kategori),
        marker = list(size = 7, color = ~CO2)) %>%  
        layout(
        mapbox = list(center = list(lat = -6.244572116187856, lon = 106.62467647870157),
        zoom = 16, style = "open-street-map"),
          title = "Zoom Kualitas Udara di Matana",
          geo = list(scope = "asia",showland = TRUE)
        )

map
```