---
title: "Dashboard Transformasi Data Cuaca"
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: scroll
    theme: yeti
    source_code: embed
---

```{r setup, include=FALSE}
# Importing libraries
library(flexdashboard)
library(tidyverse)
library(highcharter)
library(gt)
library(htmltools)
library(viridis)
library(DT)
library(plotly)
library(lubridate)
```

```{r}

# Load dataset
df<- read_csv("C:/Users/ASUS/Downloads/6 Data-Transformation – Data Science Programming.csv")

# Hapus duplikat (jika ada)
df_clean <- df %>%
  distinct()

# Konversi kolom Date ke Date (untuk visualisasi)
df_clean <- df_clean %>%
  mutate(Date = as.Date(Date))

```
# Table {data-orientation=rows}

### Data Cuaca (Tabel) {data-height=520}

```{r}
datatable(
  df_clean,
  options = list(scrollX = TRUE, pageLength = 10),
  caption = htmltools::tags$caption(
    style = 'caption-side: top; text-align: left;',
    'Tabel: ', htmltools::em('Data Transformasi Cuaca')
  )
)

```

Bar-chart {data-orientation=rows}
=======================================================================

## Column {.tabset .tabset-fade data-height=520}
-----------------------------------------------------------------------

### Vertical {data-width=1200}

```{r, echo=FALSE}

# Warna kustom
custom_colors <- viridis::turbo(n = n_distinct(df_clean$Location))

# Siapkan data + assign warna per lokasi
chart_data <- df_clean %>%
  group_by(Location) %>%
  summarise(Average_Temperature = mean(Temperature, na.rm = TRUE)) %>%
  arrange(desc(Average_Temperature)) %>%
  mutate(color = custom_colors)

# Ubah data ke list_parse
data_hc <- chart_data %>%
  transmute(name = Location, y = Average_Temperature, color = color) %>%
  list_parse()

# Highchart – tipe column
highchart() %>%
  hc_chart(type = "column") %>%
  hc_title(text = "Rata-rata Suhu per Lokasi") %>%
  hc_xAxis(categories = chart_data$Location) %>%
  hc_add_series(
    data = data_hc,
    name = "Suhu Rata-rata",
    showInLegend = FALSE
  ) %>%
  hc_tooltip(pointFormat = '<b>Rata-rata Suhu: </b> {point.y}°C') %>%
  hc_add_theme(hc_theme_google()) %>%
  hc_credits(enabled = TRUE, text = "@dsciencelabs")


```
### Horizontal {data-width=1200}

```{r, echo=FALSE}

# Warna kustom
custom_colors <- viridis::plasma(n = n_distinct(df_clean$Location))

# Siapkan data
chart_data <- df_clean %>%
  group_by(Location) %>%
  summarise(avg_temperature = mean(Temperature, na.rm = TRUE)) %>%
  arrange(desc(avg_temperature)) %>%
  mutate(color = custom_colors) # kasih warna per bar

# Ubah ke list_parse
data_hc <- chart_data %>%
  transmute(name = Location, y = avg_temperature, color = color) %>%
  list_parse()

# Buat chart Highcharter
highchart() %>%
  hc_chart(type = "bar") %>%
  hc_xAxis(categories = chart_data$Location) %>%
  hc_add_series(
    data = data_hc,
    name = "Suhu Rata-rata",
    showInLegend = FALSE
  ) %>%
  hc_tooltip(pointFormat = '<b>Rata-rata Suhu: </b> {point.y} °C') %>%
  hc_title(text = 'Rata-rata Suhu per Lokasi',
           style = list(fontSize = '25px', fontWeight = 'bold')) %>%
  hc_subtitle(text = 'Sumber: Dataset Cuaca',
               style = list(fontSize = '16px')) %>%
  hc_credits(enabled = TRUE, text = '@dsciencelabs') %>%
  hc_add_theme(hc_theme_google())

```

### Lollipop {data-width=600 data-height=510}

```{r, echo=FALSE}


# Warna kustom
custom_colors <- viridis::mako(n = n_distinct(df_clean$Location))

# Siapkan data
chart_data <- df_clean %>%
  group_by(Location) %>%
  summarise(avg_temperature = mean(Temperature, na.rm = TRUE)) %>%
  arrange(desc(avg_temperature)) %>%
  mutate(color = custom_colors)

# Ubah ke list_parse agar warnanya terbaca
data_hc <- chart_data %>%
  transmute(name = Location, y = avg_temperature, color = color) %>%
  list_parse()

# Buat lollipop chart interaktif
highchart() %>%
  hc_chart(type = "lollipop") %>%
  hc_xAxis(categories = chart_data$Location, title = list(text = 'Lokasi')) %>%
  hc_yAxis(title = list(text = 'Rata-rata Suhu (°C)')) %>%
  hc_add_series(
    data = data_hc,
    name = "Rata-rata Suhu",
    showInLegend = FALSE
  ) %>%
  hc_tooltip(pointFormat = '<b>Rata-rata Suhu: </b> {point.y} °C<br>') %>%
  hc_title(text = 'Rata-rata Suhu Lokasi',
           style = list(fontSize = '25px', fontWeight = 'bold')) %>%
  hc_subtitle(text = 'Sumber: Dataset Cuaca',
               style = list(fontSize = '16px')) %>%
  hc_credits(enabled = TRUE, text = '@dsciencelabs') %>%
  hc_add_theme(hc_theme_google())

```


Donut-chart {data-orientation=rows}
=======================================================================

## Row  
-----------------------------------------------------------------------

### Simple {data-width=600 data-height=510}

```{r fig.height=5}

# Warna kustom (ambil hanya sebanyak jumlah lokasi teratas)
donut_data <- df_clean %>%
  group_by(Location) %>%
  summarise(avg_humidity = mean(Humidity, na.rm = TRUE)) %>%
  arrange(desc(avg_humidity)) %>%
  head(10) %>%
  mutate(color = viridis::inferno(n())[1:n()])  # warna sesuai jumlah data

# Siapkan data untuk Highcharter (pakai list_parse)
data_hc <- donut_data %>%
  transmute(name = Location, y = avg_humidity, color = color) %>%
  list_parse()

# Buat donut chart
highchart() %>%
  hc_chart(type = "pie") %>%
  hc_plotOptions(
    pie = list(
      innerSize = '60%',
      dataLabels = list(enabled = TRUE)
    )
  ) %>%
  hc_add_series(
    data = data_hc,
    name = "Rata-rata Kelembaban",
    showInLegend = TRUE
  ) %>%
  hc_tooltip(pointFormat = '<b>Rata-rata Kelembaban: </b> {point.y} %<br>') %>%
  hc_title(text = 'Lokasi dengan Rata-rata Kelembaban Tertinggi',
           style = list(fontSize = '25px', fontWeight = 'bold')) %>%
  hc_subtitle(text = 'Berdasarkan Dataset Cuaca',
               style = list(fontSize = '16px')) %>%
  hc_credits(enabled = TRUE, text = '@dsciencelabs') %>%
  hc_add_theme(hc_theme_google())


```

Bubble Chart {data-orientation=rows}
=======================================================================

### Scatter and Line Chart {data-width=600 data-height=510}

```{r fig.height=5, echo=FALSE}
library(tidyverse)
library(lubridate)
library(highcharter)

# 1. Baca data
df <- read_csv("C:/Users/ASUS/Downloads/6 Data-Transformation – Data Science Programming.csv")

# 2. Pastikan kolom 'Date' diubah ke format tanggal
df_clean <- df %>%
  mutate(
    Date = as.Date(Date),
    month = month(Date),
    Season = case_when(
      month %in% c(11, 12, 1, 2) ~ "Rainy Season",
      month %in% c(6, 7, 8, 9) ~ "Dry Season",
      TRUE ~ "Transitional Season"
    )
  )

# 3. Buat data ringkasan
df_summary <- df_clean %>%
  group_by(Location, Season) %>%
  summarise(
    avg_temp = mean(Temperature, na.rm = TRUE),
    avg_humidity = mean(Humidity, na.rm = TRUE),
    avg_wind = mean(Wind_Speed, na.rm = TRUE),
    .groups = "drop"
  )

# 4. Scatter plot interaktif
hchart(df_summary, "scatter",
       hcaes(x = avg_temp,
             y = avg_humidity,
             size = avg_wind,
             group = Season,
             name = Location)) %>%
  hc_title(text = "Scatter Plot: Rata-rata Suhu vs Kelembaban") %>%
  hc_subtitle(text = "Ukuran bubble = Rata-rata Kecepatan Angin | Warna = Musim") %>%
  hc_xAxis(title = list(text = "Rata-rata Suhu (°C)")) %>%
  hc_yAxis(title = list(text = "Rata-rata Kelembaban (%)")) %>%
  hc_add_theme(hc_theme_google()) %>%
  hc_tooltip(
    pointFormat = paste(
      "<b>Lokasi:</b> {point.name}<br>",
      "<b>Musim:</b> {series.name}<br>",
      "<b>Rata-rata Suhu:</b> {point.x} °C<br>",
      "<b>Rata-rata Kelembaban:</b> {point.y} %<br>",
      "<b>Rata-rata Kecepatan Angin:</b> {point.z} km/jam<br>"
    ),
    useHTML = TRUE
  ) %>%
  hc_credits(enabled = TRUE, text = "@dsciencelabs")

```

---

### Donut and Scatter Chart  {data-width=600 data-height=510}

```{r}

library(tidyverse)
library(highcharter)

# Misalnya, data sudah dibersihkan dan di-load ke df_clean
# Ganti df_clean sesuai nama data frame Anda
df_clean <- read_csv("C:/Users/ASUS/Downloads/6 Data-Transformation – Data Science Programming.csv") %>%
  distinct()

# --- Persiapkan data Donut Chart (populasi per lokasi = rata2 temperature di sini) ---
donutdata <- df_clean %>%
  group_by(Location) %>%
  summarise(avg_temp = mean(Temperature, na.rm = TRUE))

# --- Siapkan data nested untuk tooltip scatter ---
donutdata2 <- df_clean %>%
  select(Location, Temperature, Humidity) %>%
  nest(-Location) %>%
  mutate(
    data = map(data, mutate_mapping, hcaes(x = Temperature, y = Humidity), drop = TRUE),
    data = map(data, list_parse)
  ) %>%
  rename(ttdata = data) %>%
  left_join(donutdata, by = "Location")

# --- Buat Donut Chart dengan tooltip scatter ---
hc <- hchart(
  donutdata2,
  "pie",
  hcaes(name = Location, y = avg_temp),
  innerSize = 300,
  color = viridis::inferno(n = nrow(donutdata2))
)

# --- Konfigurasikan Tooltip ---
hc %>%
  hc_add_theme(hc_theme_google()) %>%
  hc_tooltip(
    useHTML = TRUE,
    headerFormat = "<b>{point.key}</b>",
    pointFormatter = tooltip_chart(
      accesor = "ttdata",
      hc_opts = list(
        chart = list(type = "scatter"),
        credits = list(enabled = FALSE),
        plotOptions = list(scatter = list(marker = list(radius = 2)))
      ),
      height = 130
    ),
    positioner = JS(
      "function () {
        xp = this.chart.chartWidth/2 - this.label.width/2;
        yp = this.chart.chartHeight/2 - this.label.height/2;
        return { x: xp, y: yp };
      }"
    ),
    shadow = FALSE,
    borderWidth = 0,
    backgroundColor = "transparent",
    hideDelay = 1000
  ) %>%
  hc_title(text = "Distribusi Rata-rata Suhu per Lokasi",
           style = list(fontSize = "25px", fontWeight = "bold")) %>%
  hc_subtitle(text = "Tooltip scatter plot: Temperature vs Humidity",
               style = list(fontSize = "16px")) %>%
  hc_credits(enabled = TRUE, text = "@dsciencelabs")
```
Motion Chart {data-orientation=rows}
=======================================================================

### Motion Chart {data-width=600 data-height=510}

```{r}

library(dplyr)
library(highcharter)
library(tidyr)
library(readr)

# --- Load data Anda ---
df_clean <- read_csv("C:/Users/ASUS/Downloads/6 Data-Transformation – Data Science Programming.csv") %>%
  distinct()

# --- Buat kolom "Year" dummy ---
set.seed(123)  # Agar konsisten
df_clean$Year <- sample(2010:2020, nrow(df_clean), replace = TRUE)

# --- Data animasi: ambil rata-rata Temperature & Humidity per tahun & lokasi ---
data_anim <- df_clean %>%
  group_by(Location, Year) %>%
  summarise(
    avg_temp = mean(Temperature, na.rm = TRUE),
    avg_hum = mean(Humidity, na.rm = TRUE)
  ) %>%
  ungroup()

# --- Buat data "sequence" untuk motion chart ---
ds <- data_anim %>%
  group_by(Location) %>%
  do(item = list(
    name = first(.$Location),
    sequence = .$avg_temp,  # sequence yang akan dianimasikan
    value = first(.$avg_temp)
  )) %>%
  .$item

# --- Plot chart scatter animasi ---
hc <- highchart() %>%
  hc_chart(type = "scatter") %>%
  hc_add_series(
    data = ds,
    name = "Average Temperature by Year",
    showInLegend = FALSE,
    marker = list(radius = 5)
  ) %>%
  hc_title(text = "Animasi Perubahan Rata-rata Suhu") %>%
  hc_subtitle(text = "Lokasi vs Tahun (motion chart)") %>%
  hc_xAxis(title = list(text = "Lokasi (indeks)")) %>%
  hc_yAxis(title = list(text = "Average Temperature")) %>%
  hc_motion(
    enabled = TRUE,
    axisLabel = "Year",
    labels = sort(unique(data_anim$Year)),
    series = 0,
    updateIterval = 50,
    magnet = list(
      round = "floor",
      step = 0.1
    )
  ) %>%
  hc_chart(marginBottom = 100)

hc

```
---

High Charter {data-orientation=rows}
=======================================================================

### HighCharter {data-width=600 data-height=510}

```{r}

library(tidyverse)
library(highcharter)
library(lubridate)
library(readr)

# --- Load data Anda ---
df_clean <- read_csv("C:/Users/ASUS/Downloads/6 Data-Transformation – Data Science Programming.csv") %>%
  distinct()

# --- Buat kolom Date dummy jika belum ada ---
set.seed(123)
if (!"Date" %in% names(df_clean)) {
  df_clean$Date <- sample(seq(ymd("2010-01-01"), ymd("2020-12-31"), by = "month"), nrow(df_clean), replace = TRUE)
}

# --- Ubah menjadi data long agar cocok dengan highcharter (key-value) ---
df_long <- df_clean %>%
  pivot_longer(cols = c(Temperature, Humidity), names_to = "key", values_to = "value") %>%
  mutate(Date = as.Date(Date))

# --- Buat chart upper X-axis ---
hc_upper <- hchart(
  df_long,
  "areaspline",
  hcaes(x = datetime_to_timestamp(Date), y = value, group = key)
) %>%
  hc_plotOptions(series = list(stacking = "normal")) %>%
  hc_xAxis(type = "datetime") %>%
  hc_title(text = "Temperature and Humidity Over Time (Upper X-Axis)") %>%
  hc_chart(
    divBackgroundImage = "https://aceiteweb.com/wp-content/uploads/2018/06/aceite.jpg",
    backgroundColor = hex_to_rgba("white", 0.90)
  )

hc_upper


hc_lower <- hc_upper %>%
  hc_colors(c("#000000", "#222222")) %>%
  hc_title(align = "left", style = list(color = "black")) %>%
  hc_plotOptions(series = list(marker = list(enabled = FALSE))) %>%
  hc_tooltip(sort = TRUE, table = TRUE) %>%
  hc_legend(align = "right", verticalAlign = "top", layout = "horizontal") %>%
  hc_credits(
    enabled = TRUE,
    text = "Data: df_clean",
    href = "https://aceiteweb.com"
  ) %>%
  hc_chart(
    divBackgroundImage = "https://t4.ftcdn.net/jpg/02/39/60/81/360_F_239608136_4qtLPCPhCCzNaSoPo2hiEfMFA1fBXa2R.jpg",
    backgroundColor = hex_to_rgba("white", 0.70)
  ) %>%
  hc_xAxis(
    opposite = TRUE,
    gridLineWidth = 0,
    title = list(text = "Time", style = list(color = "black")),
    lineColor = "black", tickColor = "black",
    labels = list(style = list(color = "black"))
  ) %>%
  hc_yAxis(
    reversed = TRUE,
    gridLineWidth = 0,
    lineWidth = 1,
    lineColor = "black",
    tickWidth = 1,
    tickLength = 10,
    tickColor = "black",
    title = list(text = "Value", style = list(color = "black")),
    labels = list(style = list(color = "black"))
  ) %>%
  hc_add_theme(hc_theme_elementary())

hc_lower

```