---
title: "UAS StatDas"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows          # atau "rows" sesuai kebutuhan
    vertical_layout: fill            # scroll or fill         
    theme: yeti
    source_code: embed
    social: null                  # Nonaktifkan social menu
    navbar: null                  # Nonaktifkan navbar default
    favicon: null                 # Nonaktifkan favicon
    self_contained: TRUE         # Semua dalam satu file
---

  
```{r setup, include=FALSE, warning=FALSE}

# Load library
library(flexdashboard)
library(tidyverse)
library(highcharter)
library(viridis)
library(DT)
library(plotly)
library(gapminder)
library(jsonlite)
library(lubridate)
library(gt)
library(kableExtra)
library(formattable)
library(reactable)
library(scales)
library(ggplot2)
library(dplyr)
library(lubridate)
library(RColorBrewer)
library(viridis)
library(ggthemes)
library(patchwork)
library(htmltools)
library(readr)
```

Members {data-orientation=rows}
=======================================================================

```{r, echo=FALSE}

HTML('
<div class="polaroid-container">
  <div class="polaroid-gallery">
    <div class="polaroid-card">
      <div class="polaroid-frame">
        <div class="photo-container">
          <img src="https://drive.google.com/uc?export=download&id=1RvRFkTws5jUBt1RrFCpeCW0OFoS4qblF" alt="Yosef" class="polaroid-photo">
          <div class="photo-overlay"></div>
        </div>
        <div class="polaroid-tape"></div>
      </div>
      <div class="polaroid-info">
        <h3 class="student-name">Yosef Teofani Tamba</h3>
        <p class="student-nim">52250007</p>
        <p class="student-job">Dataset & Statistical Inference</p>
      </div>
    </div>

    <div class="polaroid-card">
      <div class="polaroid-frame">
        <div class="photo-container">
          <img src="https://drive.google.com/uc?export=download&id=1R3wBfKNCo7eM4Ba71qH3K3EIS2Q_lM3Z" alt="Arya" class="polaroid-photo">
          <div class="photo-overlay"></div>
        </div>
        <div class="polaroid-tape"></div>
      </div>
      <div class="polaroid-info">
        <h3 class="student-name">Arya Fharezi</h3>
        <p class="student-nim">52250008</p>
        <p class="student-job">Basic Visualization</p>
      </div>
    </div>

    <div class="polaroid-card">
      <div class="polaroid-frame">
        <div class="photo-container">
          <img src="https://drive.google.com/uc?export=download&id=1TY4w04hz9qlmJVPRrTPwtVgNe1hfpaag" alt="Yustian" class="polaroid-photo">
          <div class="photo-overlay"></div>
        </div>
        <div class="polaroid-tape"></div>
      </div>
      <div class="polaroid-info">
        <h3 class="student-name">M Yustian Putra Muhadi</h3>
        <p class="student-nim">52250015</p>
        <p class="student-job">Confidence Interval</p>
      </div>
    </div>

    <div class="polaroid-card">
      <div class="polaroid-frame">
        <div class="photo-container">
          <img src="https://drive.google.com/uc?export=download&id=1vdu-UnUDPJxAsj5nMpVM4bd_BYx6Ya5a" alt="Christian" class="polaroid-photo">
          <div class="photo-overlay"></div>
        </div>
        <div class="polaroid-tape"></div>
      </div>
      <div class="polaroid-info">
        <h3 class="student-name">Christian Michael Juliano</h3>
        <p class="student-nim">52250011</p>
        <p class="student-job">Nonparametric Methods & Summary ch 1-5</p>
      </div>
    </div>

    <div class="polaroid-card">
      <div class="polaroid-frame">
        <div class="photo-container">
          <img src="https://drive.google.com/uc?export=download&id=1ZsPAcSAkjq9OMEI9Alrerbr1u2Fh34wf" alt="Frenkhy" class="polaroid-photo">
          <div class="photo-overlay"></div>
        </div>
        <div class="polaroid-tape"></div>
      </div>
      <div class="polaroid-info">
        <h3 class="student-name">Frenkhy Tonga Retang</h3>
        <p class="student-nim">52250005</p>
        <p class="student-job">Summary of Basic Statistic ch 6-10</p>
      </div>
    </div>
  </div>
</div>

<style>
.polaroid-container { isolation: isolate; }
.polaroid-container .polaroid-gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px;
}
.polaroid-container .polaroid-card {
  perspective: 1000px;
  position: relative;
  transition: transform 0.3s ease;
  height: 520px;
}
.polaroid-container .polaroid-card:hover { transform: translateY(-8px); }
.polaroid-container .polaroid-frame {
  background: white;
  padding: 20px 20px 80px 20px;
  border-radius: 4px;
  box-shadow: 0 15px 35px rgba(0, 82, 204, 0.15);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 340px;
}
.polaroid-container .photo-container {
  position: relative;
  width: 160px;
  height: 220px;
  overflow: hidden;
  border-radius: 4px;
  background: #003366;
  border: 6px solid white;
  z-index: 2;
}
.polaroid-container .polaroid-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.polaroid-container .polaroid-tape {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(2deg);
  width: 60px;
  height: 20px;
  background: linear-gradient(45deg, #00b8d9, #0052cc);
  opacity: 0.8;
  z-index: 3;
}
.polaroid-container .polaroid-info {
  margin-top: 15px;
  text-align: center;
  padding: 15px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  min-height: 120px;
}
.polaroid-container .student-name {
  font-family: sans-serif;
  font-size: 1.1em;
  color: #003366;
  margin: 0 0 5px 0;
}
.polaroid-container .student-nim {
  font-family: sans-serif;
  font-size: 0.9em;
  color: #666;
  background: #f0f7ff;
  padding: 2px 10px;
  border-radius: 10px;
  display: inline-block;
  margin-bottom: 8px;
}
.polaroid-container .student-job {
  font-family: sans-serif;
  font-size: 0.8em;
  color: #0052cc;
  margin: 0;
  font-style: italic;
  font-weight: bold;
}

@media (max-width: 1200px) { .polaroid-container .polaroid-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .polaroid-container .polaroid-gallery { grid-template-columns: repeat(1, 1fr); } }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.polaroid-container .polaroid-card { animation: fadeInUp 0.5s ease-out forwards; opacity: 0; }
.polaroid-container .polaroid-card:nth-child(1) { animation-delay: 0.1s; }
.polaroid-container .polaroid-card:nth-child(2) { animation-delay: 0.2s; }
.polaroid-container .polaroid-card:nth-child(3) { animation-delay: 0.3s; }
.polaroid-container .polaroid-card:nth-child(4) { animation-delay: 0.4s; }
.polaroid-container .polaroid-card:nth-child(5) { animation-delay: 0.5s; }
</style>
')
```

Summary of Basic Statistics {data-orientation=rows}
=======================================================================
  
## Column {.tabset .tabset-fade data-height=520}
-----------------------------------------------------------------------

### Chapter 1 {data-width=1200}

```{r ch1-mindmap, echo=FALSE, out.width="100%", fig.align='right'}
knitr::include_graphics("https://drive.google.com/uc?export=download&id=1eqimjBStVFbWCxkr3-jY6LqDpddOl0kr")
```

### Chapter 2 {data-width=1200}

```{r ch2-mindmap, echo=FALSE, out.width="100%", fig.align='right'}
knitr::include_graphics("https://drive.google.com/uc?export=download&id=1iJ3eAlWOmNL_mOnBIjln0VRQvCt6hTjz")
```

### Chapter 3 {data-width=1200}

```{r ch3-mindmap, echo=FALSE, out.width="100%", fig.align='right'}
knitr::include_graphics("https://drive.google.com/uc?export=download&id=1XEBDxF1UeGm-rINqs1aGw3dsYhEEhPZs")
```

### Chapter 4  {data-width=1200}

```{r ch4-mindmap, echo=FALSE, out.width="100%", fig.align='right'}
knitr::include_graphics("https://drive.google.com/uc?export=download&id=1cPIPyoV7fR1zFLNsj2ZTZ7G8qd5_Mw4P")
```

### Chapter 5 {data-width=1200}

```{r ch5-mindmap, echo=FALSE, out.width="100%", fig.align='right'}
knitr::include_graphics("https://drive.google.com/uc?export=download&id=1NxoRw0Kmy-5vvxmP1l71fq4sWsImQy5h")
```

### Chapter 6 {data-width=1200}

```{r c6-mindmap, echo=FALSE, out.width="100%", fig.align='right'}
knitr::include_graphics("https://drive.google.com/uc?export=download&id=1woHXj4b5nHdUzrfuLTdEVDBftwvomKaR")
```

### Chapter 7 {data-width=1200}

```{r ch7-mindmap, echo=FALSE, out.width="100%", fig.align='right'}
knitr::include_graphics("https://drive.google.com/uc?export=download&id=1jABg9hEooTD2c7A1MzjGSBPIl-pgebrr")
```

### Chapter 8 {data-width=1200}

```{r ch8-mindmap, echo=FALSE, out.width="100%", fig.align='right'}
knitr::include_graphics("https://drive.google.com/uc?export=download&id=1O8UP3_sK_FuWXCuDn-UDU9Y4kgIBnMjy")
```

### Chapter 9  {data-width=1200}

```{r ch9-mindmap, echo=FALSE, out.width="100%", fig.align='right'}
knitr::include_graphics("https://drive.google.com/uc?export=download&id=1rckdPi6dFsN0pp0o9X_TbMfogEQ_eLHB")
```

### Chapter 10  {data-width=1200}

```{r ch10-mindmap, echo=FALSE, out.width="100%", fig.align='right'}
knitr::include_graphics("https://drive.google.com/uc?export=download&id=1ZexIsFyj7AQpWspmhcMg6qxJ2mY9-kHd")
```


Dataset {data-orientation=rows}
=======================================================================

```{r, echo=FALSE, warning=FALSE}
# Membaca data
url_data1 = "https://drive.google.com/uc?id=1PTMLi4GO9QMgDynwrW3-oOjdMBF9uNr4&export=download" # menggunakan link url dari GDrive
url_data2 = "https://drive.google.com/uc?id=1mgMkk5GIZeGE45JKlMCTfeTPDVBs78Wj&export=download"

data1 <- read.csv(url_data1, 
                 sep = ";", 
                 stringsAsFactors = FALSE,
                 encoding = "UTF-8")

# 2. BERSIHKAN DAN FORMAT DATA
data_clean <- data1 %>%
  mutate(
    # Format tanggal
    date_order = as.POSIXct(date_order, format = "%d/%m/%Y %H.%M"),
    date_finished = as.POSIXct(date_finished, format = "%d/%m/%Y %H.%M"),
    
    # Hitung durasi perjalanan (dalam jam)
    duration_hours = as.numeric(difftime(date_finished, date_order, units = "hours")),
    
    # Format kolom numerik (ganti koma dengan titik)
    across(c(distance, amount_delivery, amount_merchant, transaction_amount_total),
           ~ as.numeric(gsub(",", ".", .))),
    
    # Buat kategori jarak
    distance_category = case_when(
      distance <= 3 ~ "Pendek (<3 km)",
      distance <= 7 ~ "Sedang (3-7 km)",
      distance <= 12 ~ "Jauh (7-12 km)",
      TRUE ~ "Sangat Jauh (>12 km)"
    ),
    
    # Format mata uang
    transaction_amount_total_formatted = paste0("Rp", format(transaction_amount_total, big.mark = ".", decimal.mark = ",")),
    
    # Buat kolom tanggal saja (tanpa waktu)
    order_date_only = as.Date(date_order)
  )

# 3. BUAT DATATABLE INTERAKTIF
datatable(
  data_clean %>%
    select(
      ID = id,
      Tanggal_Pesanan = order_date_only,
      Waktu_Pesanan = date_order,
      Mode = mode,
      Dari_Kecamatan = from_kecamatan,
      Ke_Kecamatan = to_kecamatan,
      Jarak_km = distance,
      Kategori_Jarak = distance_category,
      Durasi_Jam = duration_hours,
      Biaya_Pengiriman = amount_delivery,
      Biaya_Merchant = amount_merchant,
      Total_Biaya = transaction_amount_total_formatted,
      Nama_Customer = customer_name,
      Gender_Customer = customer_gender,
      Nama_Driver = driver_name,
      Kendaraan = kendaraan_merk,
      Nama_Merchant = merchant_name,
      Kategori_Merchant = merchant_category
    ),
  
  # OPTIONS DATATABLE
  options = list(
    pageLength = 15,                    # 15 baris per halaman
    lengthMenu = c(10, 15, 25, 50, 100), # Pilihan jumlah baris
    scrollX = TRUE,                     # Scroll horizontal
    scrollY = "500px",                  # Tinggi fixed
    autoWidth = TRUE,                   # Lebar otomatis
    dom = 'Blfrtip',                    # Kontrol tabel
    buttons = list(
      list(extend = 'copy', title = 'Data OJOL Transactions'),
      list(extend = 'csv', title = 'Data OJOL Transactions'),
      list(extend = 'excel', title = 'Data OJOL Transactions'),
      list(extend = 'pdf', title = 'Data OJOL Transactions'),
      list(extend = 'print', title = 'Data OJOL Transactions'),
      list(extend = 'colvis', text = 'Pilih Kolom')
    ),
    language = list(
      search = "Cari:",
      lengthMenu = "Tampilkan _MENU_ baris",
      info = "Menampilkan _START_ sampai _END_ dari _TOTAL_ transaksi",
      paginate = list(
        first = "Pertama",
        last = "Terakhir",
        `next` = "Berikutnya",    # GUNAKAN BACKTICK untuk reserved word
        previous = "Sebelumnya"
      )
    ),
    initComplete = JS(
      "function(settings, json) {",
      "$(this.api().table().header()).css({'background-color': '#2C3E50', 'color': '#fff'});",
      "}"
    )
  ),
  
  # KUSTOMISASI
  rownames = FALSE,
  filter = "top",                        # Filter di atas setiap kolom
  class = "display compact stripe hover", # Style tabel
  caption = tags$caption(
    style = 'caption-side: top; text-align: center; color: #2C3E50; font-size: 20px; font-weight: bold;',
    'DATA TRANSAKSI OJOL - PONTIANAK'
  ),
  extensions = c('Buttons')
) %>%
  
  # FORMATTING KOLOM
  formatStyle(
    columns = 'Total_Biaya',
    backgroundColor = styleInterval(
      cuts = c(50000, 100000),
      values = c('#E8F8F5', '#D1F2EB', '#A3E4D7')
    ),
    fontWeight = 'bold'
  ) %>%
  
  formatStyle(
    columns = 'Mode',
    backgroundColor = styleEqual(
      levels = c('BIKE', 'CAR', 'FOOD', 'SHOP'),
      values = c('#FEF9E7', '#E8F6F3', '#FDEDEC', '#F4ECF7')
    ),
    fontWeight = 'bold'
  ) %>%
  
  formatStyle(
    columns = 'Kategori_Jarak',
    backgroundColor = styleEqual(
      levels = c('Pendek (<3 km)', 'Sedang (3-7 km)', 'Jauh (7-12 km)', 'Sangat Jauh (>12 km)'),
      values = c('#D5F4E6', '#FEF9E7', '#FDEBD0', '#FADBD8')
    )
  ) %>%
  
  formatRound(
    columns = c('Jarak_km', 'Durasi_Jam'),
    digits = 2
  ) %>%
  
  formatCurrency(
    columns = c('Biaya_Pengiriman', 'Biaya_Merchant'),
    currency = "Rp",
    interval = 3,
    mark = ".",
    digits = 0,
    before = FALSE
  ) %>%
  
  # WARNA BERDASARKAN NILAI
  formatStyle(
    columns = 'Jarak_km',
    background = styleColorBar(data_clean$distance, '#AED6F1'),
    backgroundSize = '100% 90%',
    backgroundRepeat = 'no-repeat',
    backgroundPosition = 'center'
  )
```

All About Basic Visualizations {data-orientation=rows}
=======================================================================

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

<div class="row"> <div class="col-md-6">
```{r, echo=FALSE}

# 2. LOAD DATA
data <- read.csv(url_data2, stringsAsFactors = FALSE)

# 3. HITUNG DISTRIBUSI MODA
mode_data <- data %>%
  count(Mode) %>%
  mutate(
    persen = round(n / sum(n) * 100, 1),
    label = paste0(persen, "%"),
    hover_text = paste0(
      "<b>", Mode, "</b><br>",
      "Persentase: <b>", persen, "%</b><br>",
      "Jumlah Transaksi: <b>", format(n, big.mark = ","), "</b>"
    )
  )

# 4. WARNA SOFT YANG SAMA
warna <- c(
  "BIKE" = "#66B3FF",
  "FOOD" = "#99FF99", 
  "CAR"  = "#FFB366",
  "SHOP" = "#FF9999"
)

# 5. BUAT VISUALISASI DENGAN UKURAN NORMAL
donut_interactive <- plot_ly(
  mode_data,
  labels = ~Mode,
  values = ~persen,
  type = 'pie',
  hole = 0.5,
  textinfo = 'text',
  text = ~label,
  textposition = 'inside',
  textfont = list(
    size = 16,
    color = 'black', 
    weight = 'bold',
    family = 'Arial'
  ),
  hoverinfo = 'text',
  hovertext = ~hover_text,
  hoverlabel = list(
    font = list(size = 13, color = 'white'),
    bgcolor = '#333333',
    bordercolor = '#333333'
  ),
  marker = list(
    colors = warna,
    line = list(color = 'white', width = 2)
  ),
  showlegend = TRUE
) %>%
  layout(
    title = list(
      text = "<span style='font-size:18px; font-weight:bold'>Distribusi Moda Transportasi OJOL</span>",
      x = 0.5,
      y = 0.95,
      xanchor = 'center',
      yanchor = 'top'
    ),
    legend = list(
      font = list(size = 13),
      title = list(
        text = "<b style='font-size:14px'>KATEGORI</b>",
        font = list(size = 14)
      ),
      x = 1.05,
      y = 0.5,
      xanchor = 'left',
      bgcolor = '#f8f9fa',
      bordercolor = '#dee2e6',
      borderwidth = 1
    ),
    margin = list(
      t = 80,
      b = 20,
      l = 20,
      r = 130
    ),
    paper_bgcolor = '#FFFFFF',
    plot_bgcolor = '#FFFFFF',
    showlegend = TRUE
  )

# 6. RENDER
donut_interactive
```

</div>
<div class="col-md-6">
<div style="background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); color: white; padding: 15px 20px; border-radius: 6px; margin-bottom: 25px; box-shadow: 0 4px 12px rgba(30, 60, 114, 0.15);">
<div style="display: flex; align-items: center; gap: 15px;">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
<polyline points="22 4 12 14.01 9 11.01"/>
</svg>
<div style="flex: 1; text-align: center; background: white; padding: 8px 20px; border-radius: 6px; border: 1px solid #c8e1ff; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
<div style="font-family: 'Courier New', monospace; font-size: 18px; color: #1e3c72; font-weight: 700; letter-spacing: 1px;">
***INTERPRETASI***
</div>
</div>
</div>
</div>
<div style="padding: 20px; background: linear-gradient(135deg, #f5fbff 0%, #d9ecff 100%); border-radius: 8px; border: 2px solid #2196f3; box-shadow: 0 4px 6px rgba(33, 150, 243, 0.1);">
<p style="text-align: justify; text-indent: 40px; margin-bottom: 0; color: #0d47a1; font-weight: 500; line-height: 1.6;">
Pie-Chart ini menunjukkan distribusi penggunaan moda transportasi OJOL di Pontianak. BIKE menjadi moda paling dominan dengan 32,0% transaksi, mencerminkan preferensi masyarakat terhadap ojek motor yang hemat dan efisien di perkotaan. FOOD menempati posisi kedua dengan 26,1%, mengindikasikan tingginya permintaan layanan pesan makanan. CAR dan SHOP masing-masing menyumbang 23,8% dan 18,1%. Secara keseluruhan, layanan transportasi (BIKE + CAR = 55,8%) masih mendominasi, namun layanan berbasis konsumsi (FOOD + SHOP = 44,3%) sudah mengejar ketat, menandakan diversifikasi penggunaan platform OJOL di masyarakat.
</p>
</div>
</div>
</div>

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

<div class="row">
<div class="col-md-6">

```{r, echo=FALSE}

# 1. LOAD & PREPARE DATA
data <- read.csv(url_data2, stringsAsFactors = FALSE)

jarak_data <- data %>%
  group_by(Kategori_Jarak) %>%
  summarise(
    Jumlah = n(),
    .groups = 'drop'
  ) %>%
  mutate(
    Persentase = round(Jumlah / sum(Jumlah) * 100, 1),
    Label = paste0(Persentase, "%"),
    Urutan = case_when(
      Kategori_Jarak == "Pendek (<3 km)" ~ 1,
      Kategori_Jarak == "Sedang (3-7 km)" ~ 2,
      Kategori_Jarak == "Jauh (7-12 km)" ~ 3,
      Kategori_Jarak == "Sangat Jauh (>12 km)" ~ 4
    )
  ) %>%
  arrange(Urutan)

# 2. CREATE INTERACTIVE BARCHART
fig <- plot_ly(
  jarak_data,
  x = ~Kategori_Jarak,
  y = ~Jumlah,
  type = "bar",
  marker = list(
    color = c("#66B3FF", "#99FF99", "#FFB366", "#FF9999"),
    line = list(color = "white", width = 1)
  ),
  hoverinfo = "text",
  hovertext = ~paste0(
    "<b>", Kategori_Jarak, "</b><br>",
    "Jumlah Pesanan: ", format(Jumlah, big.mark = "."), "<br>",
    "Persentase: ", Persentase, "%"
  ),
  text = ~Label,
  textposition = "outside"
)

# 3. CUSTOMIZE LAYOUT
fig <- fig %>% layout(
  title = list(
    text = "<b>Frekuensi Pesanan per Kategori Jarak</b>",
    x = 0.5,
    font = list(size = 18)
  ),
  xaxis = list(
    title = "",
    tickfont = list(size = 12),
    categoryorder = "array",
    categoryarray = jarak_data$Kategori_Jarak
  ),
  yaxis = list(
    title = "Jumlah Pesanan",
    tickfont = list(size = 12),
    gridcolor = "#f0f0f0"
  ),
  margin = list(t = 50, b = 50, l = 50, r = 50),
  plot_bgcolor = "white",
  paper_bgcolor = "white"
)

# 4. SHOW CHART
fig
```

</div>
<div class="col-md-6">
<div style="background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); color: white; padding: 15px 20px; border-radius: 6px; margin-bottom: 25px; box-shadow: 0 4px 12px rgba(30, 60, 114, 0.15);">
<div style="display: flex; align-items: center; gap: 15px;">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
<line x1="3" y1="9" x2="21" y2="9"/>
<line x1="9" y1="21" x2="9" y2="9"/>
</svg>
<div style="flex: 1; text-align: center; background: white; padding: 8px 20px; border-radius: 6px; border: 1px solid #c8e1ff; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
<div style="font-family: 'Courier New', monospace; font-size: 18px; color: #1e3c72; font-weight: 700; letter-spacing: 1px;">
***INTERPRETASI***
</div>
</div>
</div>
</div>
<div style="padding: 20px; background: linear-gradient(135deg, #f5fbff 0%, #d9ecff 100%); border-radius: 8px; border: 2px solid #2196f3; box-shadow: 0 4px 6px rgba(33, 150, 243, 0.1);">
<p style="text-align: justify; text-indent: 40px; margin-bottom: 15px; color: #0d47a1; font-weight: 500; line-height: 1.6;">
Berdasarkan analisis frekuensi pesanan, perjalanan dengan jarak Sedang (3-7 km) mendominasi penggunaan layanan OJOL (±60-70%), menunjukkan preferensi konsumen untuk mobilitas sehari-hari dalam jarak menengah. Jarak pendek (<3 km) relatif rendah (±10-15%), kemungkinan karena kurang kompetitifnya biaya minimum, sedangkan jarak jauh (7-12 km) tetap signifikan (±15-25%) sebagai alternatif transportasi antar kecamatan. Insight utama: fokus optimasi pada layanan jarak 3-7 km sebagai core business, sambil pertahankan layanan jarak lainnya untuk diversifikasi.
</p>
</div>
</div>
</div>

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

<div class="row">
<div class="col-md-6">

```{r}
# 1. PREPARE DATA
data <- read.csv(url_data2, stringsAsFactors = FALSE)

trend_data <- data %>%
  mutate(
    Tanggal = as.Date(Tanggal_Pesanan),
    Hari = format(Tanggal, "%Y-%m-%d")
  ) %>%
  group_by(Hari, Mode) %>%
  summarise(
    Jumlah_Pesanan = n(),
    .groups = 'drop'
  ) %>%
  mutate(
    Tanggal = as.Date(Hari),
    Mode = factor(Mode, levels = c("BIKE", "CAR", "FOOD", "SHOP"))
  ) %>%
  arrange(Tanggal)

# 2. CREATE LINE CHART
fig <- plot_ly()

# Add lines for each mode
colors <- c("BIKE" = "#66B3FF", "CAR" = "#FFB366", 
            "FOOD" = "#99FF99", "SHOP" = "#FF9999")

for(mode in levels(trend_data$Mode)) {
  mode_df <- trend_data %>% filter(Mode == mode)
  
  fig <- fig %>% add_trace(
    data = mode_df,
    x = ~Tanggal,
    y = ~Jumlah_Pesanan,
    type = 'scatter',
    mode = 'lines+markers',
    name = mode,
    line = list(color = colors[mode], width = 3),
    marker = list(size = 6),
    hoverinfo = 'text',
    hovertext = ~paste0(
      "<b>", mode, "</b><br>",
      "Tanggal: ", format(Tanggal, "%d %b %Y"), "<br>",
      "Jumlah Pesanan: ", Jumlah_Pesanan
    )
  )
}

# 3. CUSTOMIZE LAYOUT
fig <- fig %>% layout(
  title = list(
    text = "<b>Tren Pesanan Harian per Mode Layanan</b>",
    x = 0.5,
    font = list(size = 18)
  ),
  xaxis = list(
    title = "Tanggal",
    tickformat = "%d %b",
    tickfont = list(size = 12),
    gridcolor = "#f0f0f0"
  ),
  yaxis = list(
    title = "Jumlah Pesanan",
    tickfont = list(size = 12),
    gridcolor = "#f0f0f0"
  ),
  hovermode = 'x unified',
  margin = list(t = 50, b = 50, l = 50, r = 50),
  plot_bgcolor = "white",
  paper_bgcolor = "white",
  legend = list(
    orientation = "h",
    x = 0.5,
    y = -0.15,
    xanchor = "center"
  )
)

# 4. SHOW CHART
fig
```

</div>
<div class="col-md-6">
<div style="background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); color: white; padding: 15px 20px; border-radius: 6px; margin-bottom: 25px; box-shadow: 0 4px 12px rgba(30, 60, 114, 0.15);">
<div style="display: flex; align-items: center; gap: 15px;">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
<line x1="3" y1="9" x2="21" y2="9"/>
<line x1="9" y1="21" x2="9" y2="9"/>
</svg>
<div style="flex: 1; text-align: center; background: white; padding: 8px 20px; border-radius: 6px; border: 1px solid #c8e1ff; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
<div style="font-family: 'Courier New', monospace; font-size: 18px; color: #1e3c72; font-weight: 700; letter-spacing: 1px;">
***INTERPRETASI***
</div>
</div>
</div>
</div>
<div style="padding: 20px; background: linear-gradient(135deg, #f5fbff 0%, #d9ecff 100%); border-radius: 8px; border: 2px solid #2196f3; box-shadow: 0 4px 6px rgba(33, 150, 243, 0.1);">
<p style="text-align: justify; text-indent: 40px; margin-bottom: 15px; color: #0d47a1; font-weight: 500; line-height: 1.6;">
Analisis tren pesanan harian menunjukkan pola penggunaan OJOL yang berbeda-beda per mode layanan: FOOD mendominasi dengan pola stabil 8-10 pesanan/hari sebagai kebutuhan pokok, BIKE sangat fluktuatif (2-15 pesanan) dengan penurunan 40-50% di akhir pekan untuk mobilitas kerja, SHOP konsisten 5-8 pesanan untuk belanja rutin, dan CAR rendah 2-5 pesanan untuk kebutuhan khusus. Pola mingguan jelas terlihat hari kerja didominasi BIKE, akhir pekan didominasi FOOD dan SHOP sehingga platform perlu mengalokasikan driver secara dinamis: lebih banyak driver BIKE di hari kerja dan lebih banyak driver FOOD/SHOP di akhir pekan untuk optimasi efisiensi operasional.
</p>
</div>
</div>
</div>

### Central_Tendency

<div class="row"> <div class="col-md-6">
```{r, echo=FALSE}

# Pastikan data_clean awal sudah memuat data asli kamu
# Anggaplah data_clean "MASTER" sudah ada sebelumnya

# --- 1. Persiapan Data Statistik ---
# Pastikan kolom ini benar-benar ada di data_clean awal
total_biaya <- as.numeric(data_clean$transaction_amount_total)
total_biaya <- total_biaya[!is.na(total_biaya)]

median_target <- 34000 
alpha <- 0.05

# Cek apakah data kosong sebelum lanjut
if(length(total_biaya) == 0) stop("Error: Data total_biaya kosong! Cek nama kolom.")

# --- 2. Uji Wilcoxon ---
uji_case1_np <- wilcox.test(total_biaya, mu = median_target, exact = FALSE)
# ... (lanjutan kode tabel statistik kamu aman di sini)

# --- PERBAIKAN DI SINI: Gunakan nama 'data_viz', JANGAN 'data_clean' ---
if(!exists("data") || nrow(data) == 0) {
  # Buat data dummy
  set.seed(123)
  data_viz <- data.frame(  # <--- Ganti nama variabel
    Kategori_Jarak = factor(rep(c("Pendek (<3 km)", "Sedang (3-7 km)", 
                                  "Jauh (7-12 km)", "Sangat Jauh (>12 km)"), each=100),
                            levels = c("Pendek (<3 km)", "Sedang (3-7 km)", 
                                       "Jauh (7-12 km)", "Sangat Jauh (>12 km)")),
    Total_Biaya_Clean = c(
      runif(100, 1000, 100000),     
      runif(100, 5000, 150000),     
      runif(100, 10000, 200000),    
      runif(100, 30000, 300000)     
    )
  )
} else {
  # Gunakan data asli
  data_viz <- data %>%  # <--- Ganti nama variabel
    mutate(
      Total_Biaya_Clean = as.numeric(gsub("[^0-9]", "", Total_Biaya)),
      Kategori_Jarak = factor(Kategori_Jarak,
        levels = c("Pendek (<3 km)", "Sedang (3-7 km)", 
                   "Jauh (7-12 km)", "Sangat Jauh (>12 km)")
      )
    ) %>%
    filter(!is.na(Total_Biaya_Clean) & Total_Biaya_Clean > 0)
}

# --- BOXPLOT (Gunakan data_viz) ---
plot_ly(
  data_viz,  # <--- Update referensi data di sini
  x = ~Kategori_Jarak,
  y = ~Total_Biaya_Clean,
  type = "box",
  color = ~Kategori_Jarak,
  colors = c("#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4"),
  boxpoints = "outliers"
) %>%
  layout(
    title = "<b>Distribusi Total Biaya per Kategori Jarak</b>",
    xaxis = list(title = "Kategori Jarak"),
    yaxis = list(title = "Total Biaya (Rp)", tickformat = ",d")
  )
```

</div>
<div class="col-md-6">
<div style="background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); color: white; padding: 15px 20px; border-radius: 6px; margin-bottom: 25px; box-shadow: 0 4px 12px rgba(30, 60, 114, 0.15);">
<div style="display: flex; align-items: center; gap: 15px;">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
<line x1="3" y1="9" x2="21" y2="9"/>
<line x1="9" y1="21" x2="9" y2="9"/>
</svg>
<div style="flex: 1; text-align: center; background: white; padding: 8px 20px; border-radius: 6px; border: 1px solid #c8e1ff; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
<div style="font-family: 'Courier New', monospace; font-size: 18px; color: #1e3c72; font-weight: 700; letter-spacing: 1px;">
***INTERPRETASI***
</div>
</div>
</div>
</div>
<div style="padding: 20px; background: linear-gradient(135deg, #f5fbff 0%, #d9ecff 100%); border-radius: 8px; border: 2px solid #2196f3; box-shadow: 0 4px 6px rgba(33, 150, 243, 0.1);">
<p style="text-align: justify; text-indent: 40px; margin-bottom: 15px; color: #0d47a1; font-weight: 500; line-height: 1.6;">
Analisis Central Tendency pada grafik ini mengungkapkan anomali menarik yang bersifat kontra-intuitif: biaya perjalanan tidak selalu berbanding lurus dengan jarak. Secara mengejutkan, Median Biaya Tertinggi justru terjadi pada kategori Sedang (3-7 km), bukan pada jarak terjauh. Sementara itu, kategori Pendek menunjukkan ketidakstabilan harga yang ekstrem dengan rentang variasi terluas, sedangkan kategori Sangat Jauh memiliki median yang relatif rendah namun diwarnai oleh lonjakan biaya insidental (outliers). Pola ini mengindikasikan bahwa struktur harga lebih didorong oleh strategi platform atau densitas permintaan pada jarak menengah, dibandingkan sekadar faktor jarak fisik semata.
</p>
</div>
</div>
</div>

### Statistical Dispersion
<div class="row"> <div class="col-md-6">
```{r, echo=FALSE}

# 1. LOAD DATA
data <- read.csv(url_data2, stringsAsFactors = FALSE)

# 2. BERSIHKAN DATA BIAYA
# Fungsi sederhana untuk membersihkan Rp
bersihkan_angka <- function(x) {
  angka <- gsub("[^0-9]", "", x)
  ifelse(angka == "", 0, as.numeric(angka))
}

data <- data %>%
  mutate(
    Biaya_Bersih = bersihkan_angka(Total_Biaya)
  )

# 3. FILTER DATA
# Pilih 4 moda utama
moda_utama <- c("BIKE", "CAR", "FOOD", "SHOP")
data_filtered <- data %>% filter(Mode %in% moda_utama)

# Warna-warna lembut
warna <- c("#88CCEE", "#CC6677", "#DDCC77", "#117733")

# Hitung statistik per moda
stat_moda <- data_filtered %>%
  group_by(Mode) %>%
  summarise(
    Mean = mean(Biaya_Bersih, na.rm = TRUE),
    Median = median(Biaya_Bersih, na.rm = TRUE),
    Jumlah = n(),
    .groups = 'drop'
  )

# 4. BUAT HISTOGRAM INTERAKTIF DENGAN MEAN DAN MEDIAN
fig <- plot_ly()

for (i in 1:length(moda_utama)) {
  moda <- moda_utama[i]
  data_moda <- data_filtered %>% filter(Mode == moda)
  stats <- stat_moda %>% filter(Mode == moda)
  
  # Tambah histogram
  fig <- fig %>% add_trace(
    x = ~Biaya_Bersih,
    data = data_moda,
    type = "histogram",
    name = paste(moda, " (n=", stats$Jumlah, ")", sep = ""),
    marker = list(color = warna[i]),
    opacity = 0.6,
    nbinsx = 30,
    hovertemplate = paste(
      "<b>", moda, "</b><br>",
      "Biaya: Rp %{x:,.0f}<br>",
      "Frekuensi: %{y}<br>",
      "<extra></extra>"
    ),
    showlegend = TRUE
  )
  
  # Tambah garis mean (garis solid)
  fig <- fig %>% add_trace(
    x = c(stats$Mean, stats$Mean),
    y = c(0, max(hist(data_moda$Biaya_Bersih, breaks = 30, plot = FALSE)$counts) * 1.1),
    type = "scatter",
    mode = "lines",
    name = paste("Mean", moda),
    line = list(
      color = warna[i],
      width = 2,
      dash = "solid"
    ),
    hoverinfo = "text",
    text = paste("<b>Mean", moda, "</b><br>Rp", format(stats$Mean, big.mark = ".", decimal.mark = ",")),
    showlegend = FALSE
  )
  
  # Tambah garis median (garis putus-putus)
  fig <- fig %>% add_trace(
    x = c(stats$Median, stats$Median),
    y = c(0, max(hist(data_moda$Biaya_Bersih, breaks = 30, plot = FALSE)$counts) * 1.1),
    type = "scatter",
    mode = "lines",
    name = paste("Median", moda),
    line = list(
      color = warna[i],
      width = 2,
      dash = "dash"
    ),
    hoverinfo = "text",
    text = paste("<b>Median", moda, "</b><br>Rp", format(stats$Median, big.mark = ".", decimal.mark = ",")),
    showlegend = FALSE
  )
}

# 5. BUAT TABEL STATISTIK UNTUK TAMBAHAN
# Tabel statistik dalam format yang lebih rapi
stat_table <- stat_moda %>%
  mutate(
    Mean_Formatted = paste("Rp", format(round(Mean), big.mark = ".", decimal.mark = ",")),
    Median_Formatted = paste("Rp", format(round(Median), big.mark = ".", decimal.mark = ",")),
    Mode = factor(Mode, levels = moda_utama)
  ) %>%
  arrange(Mode)

# 6. ATUR TAMPILAN HISTOGRAM
fig <- fig %>% layout(
  title = list(
    text = "Distribusi Biaya per Moda Transportasi<br><sub>Garis Solid = Mean | Garis Putus-putus = Median</sub>",
    x = 0.05
  ),
  xaxis = list(
    title = "Total Biaya (Rp)",
    tickformat = ",.0f",
    range = c(0, max(data_filtered$Biaya_Bersih) * 1.05)
  ),
  yaxis = list(
    title = "Jumlah Transaksi",
    rangemode = "tozero"
  ),
  barmode = "overlay",
  legend = list(
    title = list(text = "<b>Moda (Jumlah Data)</b>"),
    x = 1.02,
    y = 0.5
  ),
  hovermode = "x unified",
  margin = list(r = 150)  # Tambah margin untuk legend
)

# 7. TAMPILKAN HISTOGRAM
fig
```

</div>
<div class="col-md-6">
<div style="background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); color: white; padding: 15px 20px; border-radius: 6px; margin-bottom: 25px; box-shadow: 0 4px 12px rgba(30, 60, 114, 0.15);">
<div style="display: flex; align-items: center; gap: 15px;">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
<line x1="3" y1="9" x2="21" y2="9"/>
<line x1="9" y1="21" x2="9" y2="9"/>
</svg>
<div style="flex: 1; text-align: center; background: white; padding: 8px 20px; border-radius: 6px; border: 1px solid #c8e1ff; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
<div style="font-family: 'Courier New', monospace; font-size: 18px; color: #1e3c72; font-weight: 700; letter-spacing: 1px;">
***INTERPRETASI***
</div>
</div>
</div>
</div>
<div style="padding: 20px; background: linear-gradient(135deg, #f5fbff 0%, #d9ecff 100%); border-radius: 8px; border: 2px solid #2196f3; box-shadow: 0 4px 6px rgba(33, 150, 243, 0.1);">
<p style="text-align: justify; text-indent: 40px; margin-bottom: 15px; color: #0d47a1; font-weight: 500; line-height: 1.6;">
Analisis dispersi statistik mengungkap bahwa layanan FOOD memiliki variabilitas biaya tertinggi akibat ragam preferensi konsumen, kontras dengan BIKE yang cenderung stabil dengan rentang harga yang sempit. Distribusi data seluruh moda terbukti Right Skewed (Mean > Median), menegaskan bahwa meskipun mayoritas transaksi bersifat ekonomis, keberadaan outlier bernilai tinggi tetap menarik nilai rata-rata naik. Temuan kunci lainnya adalah konsistensi Koefisien Variasi (CV) di kisaran 30-40% pada semua kategori, yang mengindikasikan bahwa fluktuasi harga terjadi secara proporsional terhadap rata-rata biaya layanan, mencerminkan struktur pricing yang konsisten di seluruh lini produk.
</p>
</div>
</div>
</div>


### Probability Distributions
<div class="row"> 
<div class="col-md-6">
```{r}

# Membaca data
data <- read_csv(url_data2)

# Membersihkan kolom Total_Biaya: menghapus "Rp", spasi, dan titik, lalu mengubah ke numeric
data$Total_Biaya_Clean <- as.numeric(gsub("[^0-9]", "", data$Total_Biaya))

# Menghapus baris dengan nilai NA setelah pembersihan
data <- data %>% filter(!is.na(Total_Biaya_Clean))

# Membuat plot interaktif dengan plotly
p <- plot_ly(
  data = data,
  x = ~Mode,
  y = ~Total_Biaya_Clean,
  color = ~Mode,
  type = 'violin',
  box = list(visible = TRUE),
  meanline = list(visible = TRUE),
  points = "outliers",
  text = ~paste(
    "Jenis Layanan: ", Mode,
    "<br>Total Biaya: Rp", format(Total_Biaya_Clean, big.mark = ".", decimal.mark = ","),
    "<br>Jarak: ", Jarak_km, " km",
    "<br>Durasi: ", Durasi_Jam, " jam",
    "<br>Kategori Jarak: ", Kategori_Jarak
  ),
  hoverinfo = 'text',
  hoveron = "violins+points+kde"
) %>%
  layout(
    title = list(
      text = "<b>DISTRIBUSI PROBABILITAS TOTAL BIAYA BERDASARKAN JENIS LAYANAN</b>",
      x = 0.05,
      font = list(size = 16, family = "Arial")
    ),
    xaxis = list(
      title = "<b>JENIS LAYANAN (MODE)</b>",
      categoryorder = "total descending",
      tickfont = list(size = 12)
    ),
    yaxis = list(
      title = "<b>TOTAL BIAYA (IDR)</b>",
      tickformat = ",.0f",
      tickprefix = "Rp",
      tickfont = list(size = 12),
      gridcolor = '#f0f0f0'
    ),
    showlegend = FALSE,
    hoverlabel = list(
      bgcolor = "white",
      font = list(size = 12, color = "black"),
      bordercolor = "black"
    ),
    plot_bgcolor = '#f9f9f9',
    paper_bgcolor = '#f9f9f9',
    margin = list(l = 50, r = 50, t = 80, b = 50)
  ) %>%
  config(
    displayModeBar = TRUE,
    modeBarButtonsToRemove = c('lasso2d', 'select2d'),
    displaylogo = FALSE,
    scrollZoom = TRUE
  )

# Menampilkan plot
p
```
</div> <div class="col-md-6">

<div style="background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); color: white; padding: 15px 20px; border-radius: 6px; margin-bottom: 25px; box-shadow: 0 4px 12px rgba(30, 60, 114, 0.15);"> <div style="display: flex; align-items: center; gap: 15px;"> <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/> <line x1="3" y1="9" x2="21" y2="9"/> <line x1="9" y1="21" x2="9" y2="9"/> </svg> <div style="flex: 1; text-align: center; background: white; padding: 8px 20px; border-radius: 6px; border: 1px solid #c8e1ff; box-shadow: 0 2px 6px rgba(0,0,0,0.05);"> <div style="font-family: 'Courier New', monospace; font-size: 18px; color: #1e3c72; font-weight: 700; letter-spacing: 1px;"> 
INTERPRETASI 
</div> 
</div> 
</div> 
</div>

<div style="padding: 20px; background: linear-gradient(135deg, #f5fbff 0%, #d9ecff 100%); border-radius: 8px; border: 2px solid #2196f3; box-shadow: 0 4px 6px rgba(33, 150, 243, 0.1);"> <div style="text-align: justify; color: #0d47a1; font-weight: 500; line-height: 1.6;"> <p style="text-indent: 40px; margin-bottom: 10px;"> 
Analisis Visualisasi Probabilitas Distribusi tersebut tentang layanan Bike, Car, Food, Shop. Visualisasi distribusi (Violin Plot) mengungkap adanya Multimodalitas atau potensi segmentasi. Perhatikan bentuk 'perut' pada layanan Shop; bentuk yang memanjang menunjukkan distribusi yang lebih merata tanpa satu harga dominan, berbeda dengan Car yang memiliki konsentrasi massa sangat kuat di harga bawah (condong ke arah harga murah).</p>

<strong>Rentang Biaya</strong> untuk masing-masing Layanan:

<ul style="margin-top: 5px; list-style-type: disc; padding-left: 20px;">
  <li><strong>Layanan Bike</strong> : Rp 500 - Rp 8.500</li>
  <li><strong>Layanan Car</strong> : Rp 3.600 - Rp 32.400</li>
  <li><strong>Layanan Food</strong> : Rp 31.000 - Rp 120.000</li>
  <li><strong>Layanan Shop</strong> : Rp 31.500 - Rp 120.000</li>
</ul>

</div> </div>

</div> </div>


Confidence Interval  {data-orientation=rows}
=======================================================================

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

### Case 1 {data-width=1200}

<div style="background: white; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,150,0.1); overflow: hidden; margin: 0; width: 100%; max-width: 100vw; box-sizing: border-box;">
<div style="background: linear-gradient(to right, #1a5a96, #2c6aa0); color: white; padding: 12px 15px;">
<h2 style="margin: 0; font-size: 18px; text-align: left;">One-Sample Z-Test: Confidence Interval 95%</h2>
</div>

<div style="display: flex; width: 100%;">
<div style="width: 50%; padding: 15px; background: #f8fbff; border-right: 1px solid #e0e0e0;">
<h3 style="color: #1a5a96; margin: 0 0 10px 0; font-size: 16px; text-align: left;">Konsep Z-Test</h3>
<div style="background: white; padding: 12px; border-radius: 5px; margin-bottom: 10px; border-left: 4px solid #2c6aa0;">
<p style="text-align: justify; text-indent: 40px; margin-bottom: 15px;">
***Latar Belakang***:Manager operasional dari perusahaan ojol mengklaim bahwa rata-rata total biaya per transaksi di sebuah wilayah adalah Rp 34.000. Tetapi, tim analisis data menduga bahwa rata-rata aktual nya berbeda dari yang sudah diberikan oleh manajer perusahaan.
Untuk membuktikan hal ini, tim analisis perusahaan mengambil data transaksi ojol dan melakukan analisis sehingga diketahui bahwa dari data histris diketahui bahwa standar deviasi populasi ($\sigma$) untuk biaya transaksi adalah Rp 34.533.</p>
<div style="background: #e6f2ff; padding: 8px; border-radius: 4px; margin: 8px 0; border-left: 3px solid #2c6aa0;">
<p style="margin: 0; font-size: 14px; text-align: left;"><strong>Standar deviasi populasi (σ):</strong> Rp 34.533</p>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 5px; border-left: 4px solid #2c6aa0;">
<p style="margin: 0 0 8px 0; font-size: 14px; text-align: left;"><strong>Komponen yang diketahui:</strong></p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;"><strong>Rata-rata klaim (μ):</strong> Rp34.000</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;"><strong>Standar Deviasi (σ):</strong> Rp34.533</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;"><strong>Tingkat Kepercayaan:</strong> 95% (α = 0,05)</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;"><strong>Nilai Z untuk 95%:</strong> 1,96</p>
</div>
</div>

<div style="width: 50%; padding: 15px;">
<h3 style="color: #1a5a96; margin: 0 0 10px 0; font-size: 16px; text-align: left;">Hasil Perhitungan</h3>
<div style="max-height: 280px; overflow-y: auto;">
<table style="width: 100%; border-collapse: collapse; font-size: 13px;">
<thead>
<tr style="background: #2c6aa0; color: white;">
<th style="padding: 8px; text-align: left;">Komponen</th>
<th style="padding: 8px; text-align: left;">Rumus</th>
<th style="padding: 8px; text-align: left;">Nilai</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Ukuran Sampel (n)</td>
<td style="padding: 8px;">n</td>
<td style="padding: 8px;">1017.0000</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Rata-rata Sampel (x̄)</td>
<td style="padding: 8px;">x̄ = Σxᵢ / n</td>
<td style="padding: 8px;">34000.0000</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Standar Deviasi (σ)</td>
<td style="padding: 8px;">σ</td>
<td style="padding: 8px;">34533.0000</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Standard Error (SE)</td>
<td style="padding: 8px;">σ / √n</td>
<td style="padding: 8px;">1082.8638</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Margin of Error (ME)</td>
<td style="padding: 8px;">z × SE</td>
<td style="padding: 8px;">2122.4130</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Batas Bawah CI</td>
<td style="padding: 8px;">x̄ - ME</td>
<td style="padding: 8px;">31877.5870</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Batas Atas CI</td>
<td style="padding: 8px;">x̄ + ME</td>
<td style="padding: 8px;">36122.4130</td>
</tr>
</tbody>
</table>
</div>
<div style="background: #f0fff0; border: 2px solid #4CAF50; border-radius: 6px; padding: 12px; margin-top: 10px;">
<h4 style="color: #2E7D32; margin: 0 0 8px 0; font-size: 14px; text-align: left;">Confidence Interval 95%</h4>
<p style="font-size: 16px; color: #1a5a96; font-weight: bold; margin: 5px 0; text-align: left;">Rp 31,877.59 ← Rp 36,122.41</p>
<p style="margin: 0; font-size: 13px; text-align: left;">Rata-rata: <strong>Rp 31,877.59 - Rp 36,122.41</strong> (95% confidence)</p>
</div>
<div style="background: #fff8e1; padding: 10px; border-radius: 5px; margin-top: 10px; border-left: 4px solid #ff9800;">
<p style="margin: 0; font-size: 13px; text-align: left;"><strong>Analisis:</strong> Nilai Klaim (Rp 34,000) berada di tengah CI. Klaim manager konsisten.</p>
</div>
</div>
</div>
</div>

### Case 2

<div style="background: white; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,150,0.1); overflow: hidden; margin: 0; width: 100%; max-width: 100vw; box-sizing: border-box;">
<div style="background: linear-gradient(to right, #1a5a96, #2c6aa0); color: white; padding: 12px 15px;">
<h2 style="margin: 0; font-size: 18px; text-align: left;">One-Sample T-Test: Confidence Interval 95%</h2>
</div>

<div style="display: flex; width: 100%;">
<div style="width: 50%; padding: 15px; background: #f8fbff; border-right: 1px solid #e0e0e0;">
<h3 style="color: #1a5a96; margin: 0 0 10px 0; font-size: 16px; text-align: left;">Konsep T-Test</h3>
<div style="background: white; padding: 12px; border-radius: 5px; margin-bottom: 10px; border-left: 4px solid #2c6aa0;">
<p style="text-align: justify; text-indent: 40px; margin-bottom: 15px;">
***Latar Belakang:*** Manajemen perusahaan ojol ingin mengetahui apakah rata-rata jarak perjalanan signifikan berbeda dari 7 km. Berdasarkan transaksi yang ada, dilakukan uji hipotesis untuk menentukan apakah rata-rata jarak perjalanan berbeda dari 7 km. Karena standar deviasi populasi tidak diketahui, maka digunakan One-Sample T-Test.</p>
<div style="background: #e6f2ff; padding: 8px; border-radius: 4px; margin: 8px 0; border-left: 3px solid #2c6aa0;">
<p style="margin: 0; font-size: 14px; text-align: left;"><strong>Standar deviasi sampel (s):</strong> 1.2 km (berdasarkan data sampel)</p>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 5px; border-left: 4px solid #2c6aa0;">
<p style="margin: 0 0 8px 0; font-size: 14px; text-align: left;"><strong>Komponen yang diketahui:</strong></p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;"><strong>Hipotesis Nol (H₀):</strong> μ = 7 km</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;"><strong>Hipotesis Alternatif (Hₐ):</strong> μ ≠ 7 km</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;"><strong>Tingkat Signifikansi (α):</strong> 0,05 (5%)</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;"><strong>Derajat Kebebasan (df):</strong> n - 1 = 24</p>
</div>
<div style="background: white; padding: 12px; border-radius: 5px; margin-top: 10px; border-left: 4px solid #ff9800;">
<p style="margin: 0; font-size: 13px; text-align: left;"><strong>Prosedur Uji Hipotesis:</strong></p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;"><strong>Kriteria Keputusan:</strong> Tolak H₀ jika p-value < 0,05 atau jika |tₕᵢₜᵤₙg| > tₜₐbₑₗ</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;"><strong>Nilai t-tabel (α=0,05, df=24):</strong> ±2.064</p>
</div>
</div>

<div style="width: 50%; padding: 15px;">
<h3 style="color: #1a5a96; margin: 0 0 10px 0; font-size: 16px; text-align: left;">Hasil Perhitungan</h3>
<div style="max-height: 280px; overflow-y: auto;">
<table style="width: 100%; border-collapse: collapse; font-size: 13px;">
<thead>
<tr style="background: #2c6aa0; color: white;">
<th style="padding: 8px; text-align: left;">Komponen</th>
<th style="padding: 8px; text-align: left;">Rumus</th>
<th style="padding: 8px; text-align: left;">Nilai</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Ukuran Sampel (n)</td>
<td style="padding: 8px;">n</td>
<td style="padding: 8px;">25.0000</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Rata-rata Sampel (x̄)</td>
<td style="padding: 8px;">x̄ = Σxᵢ / n</td>
<td style="padding: 8px;">6.5000</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Standar Deviasi (s)</td>
<td style="padding: 8px;">s = √[Σ(xᵢ-x̄)²/(n-1)]</td>
<td style="padding: 8px;">1.2000</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Nilai Hipotesis (H₀)</td>
<td style="padding: 8px;">μ₀</td>
<td style="padding: 8px;">7.0000</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Standard Error (SE)</td>
<td style="padding: 8px;">s / √n</td>
<td style="padding: 8px;">0.2400</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Statistik t (t-stat)</td>
<td style="padding: 8px;">t = (x̄ - μ₀) / SE</td>
<td style="padding: 8px;">-2.0833</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Batas Bawah CI</td>
<td style="padding: 8px;">x̄ - (t* × SE)</td>
<td style="padding: 8px;">6.0042</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Batas Atas CI</td>
<td style="padding: 8px;">x̄ + (t* × SE)</td>
<td style="padding: 8px;">6.9958</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Tingkat Signifikansi (α)</td>
<td style="padding: 8px;">α</td>
<td style="padding: 8px;">0.0500</td>
</tr>
</tbody>
</table>
</div>
<div style="background: #f0fff0; border: 2px solid #4CAF50; border-radius: 6px; padding: 12px; margin-top: 10px;">
<h4 style="color: #2E7D32; margin: 0 0 8px 0; font-size: 14px; text-align: left;">Confidence Interval 95%</h4>
<p style="font-size: 16px; color: #1a5a96; font-weight: bold; margin: 5px 0; text-align: left;">6.0042 km ← 6.9958 km</p>
<p style="margin: 0; font-size: 13px; text-align: left;">Rata-rata jarak perjalanan: <strong>6.0042 km - 6.9958 km</strong> (95% confidence)</p>
</div>
<div style="background: #fff8e1; padding: 10px; border-radius: 5px; margin-top: 10px; border-left: 4px solid #ff9800;">
<p style="margin: 0; font-size: 13px; text-align: left;"><strong>Analisis:</strong> Nilai hipotesis (7 km) <strong>TIDAK</strong> berada dalam Confidence Interval (6.0042 - 6.9958 km). Statistik t (-2.0833) > nilai kritis t-tabel (±2.064). Oleh karena itu, <strong>kita menolak H₀</strong>. Rata-rata jarak perjalanan signifikan berbeda dari 7 km pada tingkat signifikansi 5%.</p>
</div>
</div>
</div>
</div>

Statistical Inference {data-orientation=rows}
=======================================================================

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

### Case 1 {data-width=1200}

<div style="background: white; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,150,0.1); overflow: hidden; margin: 0; width: 100%; max-width: 100vw; box-sizing: border-box;">
<div style="background: linear-gradient(to right, #1a5a96, #2c6aa0); color: white; padding: 12px 15px;">
<h2 style="margin: 0; font-size: 18px; text-align: left;">One-Sample Z-Test: Statistical Inference</h2>
</div>

<div style="display: flex; width: 100%;">
<div style="width: 50%; padding: 15px; background: #f8fbff; border-right: 1px solid #e0e0e0;">
<h3 style="color: #1a5a96; margin: 0 0 10px 0; font-size: 16px; text-align: left;">Context & Hypothesis</h3>
<div style="background: white; padding: 12px; border-radius: 5px; margin-bottom: 10px; border-left: 4px solid #2c6aa0;">
<p style="margin: 0 0 8px 0; font-size: 14px; text-align: left;">Manager operasional dari perusahaan ojol mengklaim bahwa rata-rata total biaya per transaksi di sebuah wilayah adalah Rp 34.000. Tetapi, tim analisis data menduga bahwa rata-rata aktual nya berbeda dari yang sudah diberikan oleh manajer perusahaan.</p>
<p style="margin: 8px 0 0 0; font-size: 14px; text-align: left;">Untuk membuktikan hal ini, tim analisis perusahaan mengambil data transaksi ojol dan melakukan analisis sehingga diketahui bahwa dari data historis diketahui bahwa standar deviasi populasi (σ) untuk biaya transaksi adalah Rp 34.533.</p>
</div>
<div style="background: #e6f2ff; padding: 8px; border-radius: 4px; margin: 8px 0; border-left: 3px solid #2c6aa0;">
<p style="margin: 0; font-size: 14px; text-align: left;">Standard deviation population (σ): Rp 34.533</p>
</div>
<div style="background: white; padding: 12px; border-radius: 5px; border-left: 4px solid #2c6aa0;">
<p style="margin: 0 0 8px 0; font-size: 14px; text-align: left;">Hypothesis Setup:</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;">H₀: μ = Rp 34.000 (null hypothesis)</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;">H₁: μ ≠ Rp 34.000 (alternative hypothesis)</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;">Significance level: α = 0.05</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;">Critical Z-value: ±1.96</p>
</div>
</div>

<div style="width: 50%; padding: 15px;">
<h3 style="color: #1a5a96; margin: 0 0 10px 0; font-size: 16px; text-align: left;">Statistical Results</h3>
<div style="max-height: 280px; overflow-y: auto;">
<table style="width: 100%; border-collapse: collapse; font-size: 13px;">
<thead>
<tr style="background: #2c6aa0; color: white;">
<th style="padding: 8px; text-align: left;">Parameter</th>
<th style="padding: 8px; text-align: left;">Formula</th>
<th style="padding: 8px; text-align: left;">Value</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Sample mean (x̄)</td>
<td style="padding: 8px;">$\bar{x}$</td>
<td style="padding: 8px;">36.207</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Hypothesis mean (μ₀)</td>
<td style="padding: 8px;">$\mu_{0}$</td>
<td style="padding: 8px;">34.000</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Population std dev (σ)</td>
<td style="padding: 8px;">$\sigma$</td>
<td style="padding: 8px;">34.533</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Sample size (n)</td>
<td style="padding: 8px;">$n$</td>
<td style="padding: 8px;">1017</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Test statistic (z)</td>
<td style="padding: 8px;">$\frac{\bar{x}-\mu_{0}}{\sigma/\sqrt{n}}$</td>
<td style="padding: 8px;">2.0</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">p-value (two-tailed)</td>
<td style="padding: 8px;">$2\times{P}(Z\leq{z})$</td>
<td style="padding: 8px;">0.0</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Significance level (α)</td>
<td style="padding: 8px;">$\alpha$</td>
<td style="padding: 8px;">0.05</td>
</tr>
</tbody>
</table>
</div>
<div style="background: #f0fff0; border: 2px solid #4CAF50; border-radius: 6px; padding: 12px; margin-top: 10px;">
<h4 style="color: #2E7D32; margin: 0 0 8px 0; font-size: 14px; text-align: left;">95% Confidence Interval</h4>
<p style="font-size: 16px; color: #1a5a96; font-weight: bold; margin: 5px 0; text-align: left;">34.083 ← 38.331</p>
<p style="margin: 0; font-size: 13px; text-align: left;">Biaya transaksi rata-rata: 34.083 - 38.331 (95% confidence)</p>
</div>
<div style="background: #ffebee; padding: 10px; border-radius: 5px; margin-top: 10px; border-left: 4px solid #f44336;">
<p style="margin: 0; font-size: 13px; text-align: left;"><strong>Kesimpulan:</strong> Nilai statistik uji Z (2,00) lebih besar dari nilai kritis Z (1,75), oleh karena itu kita menolak hipotesis nol (H₀). Terdapat bukti statistik yang cukup pada tingkat signifikansi 5% untuk menyatakan bahwa rata-rata total transaksi berbeda dari klaim manajer sebesar Rp 34.000.</p>
</div>
</div>
</div>
</div>

### Case 2

<div style="background: white; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,150,0.1); overflow: hidden; margin: 0; width: 100%; max-width: 100vw; box-sizing: border-box;">
<div style="background: linear-gradient(to right, #1a5a96, #2c6aa0); color: white; padding: 12px 15px;">
<h2 style="margin: 0; font-size: 18px; text-align: left;">One-Sample t-Test: Statistical Inference</h2>
</div>

<div style="display: flex; width: 100%;">
<div style="width: 50%; padding: 15px; background: #f8fbff; border-right: 1px solid #e0e0e0;">
<h3 style="color: #1a5a96; margin: 0 0 10px 0; font-size: 16px; text-align: left;">Context & Hypothesis</h3>
<div style="background: white; padding: 12px; border-radius: 5px; margin-bottom: 10px; border-left: 4px solid #2c6aa0;">
<p style="margin: 0 0 8px 0; font-size: 14px; text-align: left;">Berdasarkan transaksi ojol, manajemen perusahaan ingin mengetahui apakah rata-rata jarak perjalanan signifikan berbeda dari 7km. Dalam mengetahui rata-rata, perusahaan mengambil sampel sebanyak 19 untuk mewakili seluruh populasi.</p>
<p style="margin: 8px 0 0 0; font-size: 14px; text-align: left;">One-sample t-test digunakan karena standar deviasi populasi tidak diketahui dan ukuran sampel kecil (n=19 < 30).</p>
</div>
<div style="background: #e6f2ff; padding: 8px; border-radius: 4px; margin: 8px 0; border-left: 3px solid #2c6aa0;">
<p style="margin: 0; font-size: 14px; text-align: left;">Sample size: n = 19 (small sample, t-distribution applies)</p>
</div>
<div style="background: white; padding: 12px; border-radius: 5px; border-left: 4px solid #2c6aa0;">
<p style="margin: 0 0 8px 0; font-size: 14px; text-align: left;">Hypothesis Setup:</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;">H₀: μ = 7 km (null hypothesis)</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;">H₁: μ ≠ 7 km (alternative hypothesis)</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;">Significance level: α = 0.05</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;">Critical t-value: ±2.101 (df=18, α=0.05)</p>
</div>
</div>

<div style="width: 50%; padding: 15px;">
<h3 style="color: #1a5a96; margin: 0 0 10px 0; font-size: 16px; text-align: left;">Statistical Results</h3>
<div style="max-height: 280px; overflow-y: auto;">
<table style="width: 100%; border-collapse: collapse; font-size: 13px;">
<thead>
<tr style="background: #2c6aa0; color: white;">
<th style="padding: 8px; text-align: left;">Calculation Component</th>
<th style="padding: 8px; text-align: left;">Formula/Symbol</th>
<th style="padding: 8px; text-align: left;">Calculation Result</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Sample Mean ($\bar{x}$)</td>
<td style="padding: 8px;">$\bar{x} = \frac{\sum x_i}{n}$</td>
<td style="padding: 8px;">19.0000</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Sample Standard Deviation ($s$)</td>
<td style="padding: 8px;">$s = \sqrt{\frac{\sum (x_i - \bar{x})^2}{n-1}}$</td>
<td style="padding: 8px;">7.4498</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Sample Size ($n$)</td>
<td style="padding: 8px;">$n$</td>
<td style="padding: 8px;">5</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Hypothesis Value ($\mu_0$)</td>
<td style="padding: 8px;">$\mu$</td>
<td style="padding: 8px;">7.0000</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">t-statistic ($t$)</td>
<td style="padding: 8px;">$t = \frac{\bar{x} - \mu_0}{s/\sqrt{n}}$</td>
<td style="padding: 8px;">7.0000</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Degrees of Freedom ($df$)</td>
<td style="padding: 8px;">$df = n - 1$</td>
<td style="padding: 8px;">4</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">p-value (two-tailed)</td>
<td style="padding: 8px;">$p = 2 \times P (T \geq t)$</td>
<td style="padding: 8px;">0.0021</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">95% CI Lower Bound</td>
<td style="padding: 8px;">$\bar{x} - t_{\alpha/2, df} \cdot \frac{s}{\sqrt{n}}$</td>
<td style="padding: 8px;">15.4194</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">95% CI Upper Bound</td>
<td style="padding: 8px;">$\bar{x} + t_{\alpha/2, df} \cdot \frac{s}{\sqrt{n}}$</td>
<td style="padding: 8px;">22.5806</td>
</tr>
</tbody>
</table>
</div>
<div style="background: #f0fff0; border: 2px solid #4CAF50; border-radius: 6px; padding: 12px; margin-top: 10px;">
<h4 style="color: #2E7D32; margin: 0 0 8px 0; font-size: 14px; text-align: left;">95% Confidence Interval</h4>
<p style="font-size: 16px; color: #1a5a96; font-weight: bold; margin: 5px 0; text-align: left;">15.4194 km ← 22.5806 km</p>
<p style="margin: 0; font-size: 13px; text-align: left;">Jarak tempuh rata-rata: 15,4194 - 22,5806 km  (95% confidence)</p>
</div>
<div style="background: #ffebee; padding: 10px; border-radius: 5px; margin-top: 10px; border-left: 4px solid #f44336;">
<p style="margin: 0; font-size: 13px; text-align: left;"><strong>Kesimpulan:</strong> Dengan Interval Kepercayaan 95%, terdapat bukti yang signifikan bahwa jarak tempuh rata-rata berbeda dari 7 km. Berdasarkan sampel, jarak tempuh rata-rata cenderung lebih panjang (19,0 km). Nilai hipotesis (7 km) tidak berada dalam interval kepercayaan, dan nilai p (0,0021) < α (0,05), sehingga kita menolak hipotesis nol.</p>
</div>
</div>
</div>
</div>
---

Nonparametric Methods {data-orientation=rows}
=======================================================================

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

### Case 1 {data-width=1200}

<div style="background: white; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,150,0.1); overflow: hidden; margin: 0; width: 100%; max-width: 100vw; box-sizing: border-box;">
<div style="background: linear-gradient(to right, #1a5a96, #2c6aa0); color: white; padding: 12px 15px;">
<h2 style="margin: 0; font-size: 18px; text-align: left;">Wilcoxon Signed-Rank Test: Nonparametric Analysis</h2>
</div>

<div style="display: flex; width: 100%;">
<div style="width: 50%; padding: 15px; background: #f8fbff; border-right: 1px solid #e0e0e0;">
<h3 style="color: #1a5a96; margin: 0 0 10px 0; font-size: 16px; text-align: left;">Konsep Wilcoxon Test</h3>
<div style="background: white; padding: 12px; border-radius: 5px; margin-bottom: 10px; border-left: 4px solid #2c6aa0;">
<p style="margin: 0 0 8px 0; font-size: 14px; text-align: left;">Latar Belakang: Diketahui data total biaya transaksi layanan OJOL. Dilakukan uji untuk mengetahui apakah median total biaya per transaksi berbeda secara signifikan dari Rp 34.000 pada taraf signifikansi α = 0.05. Uji ini cocok ketika data tidak berdistribusi normal atau ketika ingin menguji median daripada mean.</p>
<div style="background: #e6f2ff; padding: 8px; border-radius: 4px; margin: 8px 0; border-left: 3px solid #2c6aa0;">
<p style="margin: 0; font-size: 14px; text-align: left;">Alasan pemilihan Wilcoxon Signed-Rank: Uji nonparametrik ini digunakan ketika data tidak memenuhi asumsi normalitas atau ketika skala pengukuran ordinal. Cocok untuk menguji median satu sampel.</p>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 5px; border-left: 4px solid #2c6aa0;">
<p style="margin: 0 0 8px 0; font-size: 14px; text-align: left;">Hipotesis Pengujian:</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;">Hipotesis Nol (H₀): η = Rp 34.000 (median biaya transaksi = Rp 34.000)</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;">Hipotesis Alternatif (H₁): η ≠ Rp 34.000 (median biaya transaksi ≠ Rp 34.000)</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;">Tingkat Signifikansi (α): 0,05 (5%)</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;">Jenis Uji: Two-tailed test (dua arah)</p>
</div>
<div style="background: white; padding: 12px; border-radius: 5px; margin-top: 10px; border-left: 4px solid #ff9800;">
<p style="margin: 0; font-size: 13px; text-align: left;">Kriteria Keputusan:</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;">• Tolak H₀ jika p-value < 0.05</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;">• Gagal menolak H₀ jika p-value ≥ 0.05</p>
</div>
</div>

<div style="width: 50%; padding: 15px;">
<h3 style="color: #1a5a96; margin: 0 0 10px 0; font-size: 16px; text-align: left;">Hasil Perhitungan</h3>
<div style="max-height: 280px; overflow-y: auto;">
<table style="width: 100%; border-collapse: collapse; font-size: 13px;">
<thead>
<tr style="background: #2c6aa0; color: white;">
<th style="padding: 8px; text-align: left;">Komponen</th>
<th style="padding: 8px; text-align: left;">Rumus</th>
<th style="padding: 8px; text-align: left;">Nilai</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Ukuran Sampel (n)</td>
<td style="padding: 8px;">n</td>
<td style="padding: 8px;">1017</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Rata-rata Sampel (x̄)</td>
<td style="padding: 8px;">x̄ = Σxᵢ / n</td>
<td style="padding: 8px;">36,206.98</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Median Sampel</td>
<td style="padding: 8px;">η̂</td>
<td style="padding: 8px;">34,375.00</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Median Hipotesis (H₀)</td>
<td style="padding: 8px;">η₀</td>
<td style="padding: 8px;">34,000.00</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Statistik Wilcoxon (V)</td>
<td style="padding: 8px;">W = ΣR⁺</td>
<td style="padding: 8px;">245,930.50</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">p-value (dua arah)</td>
<td style="padding: 8px;">2 × P(W ≥ w)</td>
<td style="padding: 8px;">0.0108</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Tingkat Signifikansi (α)</td>
<td style="padding: 8px;">α</td>
<td style="padding: 8px;">0.0500</td>
</tr>
</tbody>
</table>
</div>
<div style="background: #fff3e0; border: 2px solid #ff9800; border-radius: 6px; padding: 12px; margin-top: 10px;">
<h4 style="color: #ef6c00; margin: 0 0 8px 0; font-size: 14px; text-align: left;">Wilcoxon Confidence Interval 95%</h4>
<p style="font-size: 16px; color: #1a5a96; font-weight: bold; margin: 5px 0; text-align: left;">Rp 34,050.00 ← Rp 34,875.00</p>
<p style="margin: 0; font-size: 13px; text-align: left;">Median biaya transaksi: Rp 34,050 - Rp 34,875 (95% confidence based on signed-rank)</p>
</div>
<div style="background: #ffebee; padding: 10px; border-radius: 5px; margin-top: 10px; border-left: 4px solid #f44336;">
<p style="margin: 0; font-size: 13px; text-align: left;"><strong>Kesimpulan Uji Hipotesis:</strong> p-value (0.0108) < α (0.05). Oleh karena itu, kita menolak Hipotesis Nol (H₀). Median total biaya transaksi berbeda secara signifikan dari Rp 34.000 pada tingkat signifikansi 5%. Perbedaan median sebenarnya adalah Rp 34.375, yang lebih tinggi dari nilai hipotesis.</p>
</div>
</div>
</div>
</div>

### Case 2 {data-width=1200} 

<div style="background: white; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,150,0.1); overflow: hidden; margin: 0; width: 100%; max-width: 100vw; box-sizing: border-box;">
<div style="background: linear-gradient(to right, #1a5a96, #2c6aa0); color: white; padding: 12px 15px;">
<h2 style="margin: 0; font-size: 18px; text-align: left;">Wilcoxon Signed-Rank Test: Distance Analysis</h2>
</div>

<div style="display: flex; width: 100%;">
<div style="width: 50%; padding: 15px; background: #f8fbff; border-right: 1px solid #e0e0e0;">
<h3 style="color: #1a5a96; margin: 0 0 10px 0; font-size: 16px; text-align: left;">Konsep Wilcoxon Test</h3>
<div style="background: white; padding: 12px; border-radius: 5px; margin-bottom: 10px; border-left: 4px solid #2c6aa0;">
<p style="margin: 0 0 8px 0; font-size: 14px; text-align: left;"><strong>Latar Belakang:</strong> Diketahui data jarak perjalanan layanan OJOL. Dilakukan uji untuk mengetahui apakah <strong>median jarak perjalanan</strong> berbeda secara signifikan dari <strong>7 km</strong> pada taraf signifikansi α = 0.05. Uji nonparametrik ini cocok ketika data jarak tidak berdistribusi normal atau ketika terdapat outlier yang signifikan.</p>
<div style="background: #e6f2ff; padding: 8px; border-radius: 4px; margin: 8px 0; border-left: 3px solid #2c6aa0;">
<p style="margin: 0; font-size: 14px; text-align: left;"><strong>Alasan pemilihan Wilcoxon Signed-Rank:</strong> Uji ini digunakan ketika data tidak memenuhi asumsi normalitas, terdapat outlier, atau data berskala ordinal. Cocok untuk menguji median satu sampel dengan data yang mungkin tidak simetris.</p>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 5px; border-left: 4px solid #2c6aa0;">
<p style="margin: 0 0 8px 0; font-size: 14px; text-align: left;"><strong>Hipotesis Pengujian:</strong></p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;"><strong>Hipotesis Nol (H₀):</strong> η = 7 km (median jarak perjalanan = 7 km)</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;"><strong>Hipotesis Alternatif (H₁):</strong> η ≠ 7 km (median jarak perjalanan ≠ 7 km)</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;"><strong>Tingkat Signifikansi (α):</strong> 0,05 (5%)</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;"><strong>Jenis Uji:</strong> Two-tailed test (dua arah)</p>
</div>
<div style="background: white; padding: 12px; border-radius: 5px; margin-top: 10px; border-left: 4px solid #ff9800;">
<p style="margin: 0; font-size: 13px; text-align: left;"><strong>Kriteria Keputusan:</strong></p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;">• Tolak H₀ jika p-value < 0.05</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;">• Gagal menolak H₀ jika p-value ≥ 0.05</p>
<p style="margin: 4px 0; font-size: 13px; text-align: left;"><strong>Statistik Uji:</strong> V = 56,168 (jumlah ranking positif)</p>
</div>
</div>

<div style="width: 50%; padding: 15px;">
<h3 style="color: #1a5a96; margin: 0 0 10px 0; font-size: 16px; text-align: left;">Hasil Perhitungan</h3>
<div style="max-height: 280px; overflow-y: auto;">
<table style="width: 100%; border-collapse: collapse; font-size: 13px;">
<thead>
<tr style="background: #2c6aa0; color: white;">
<th style="padding: 8px; text-align: left;">Komponen</th>
<th style="padding: 8px; text-align: left;">Rumus</th>
<th style="padding: 8px; text-align: left;">Nilai</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Ukuran Sampel (n)</td>
<td style="padding: 8px;">n</td>
<td style="padding: 8px;">1017</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Rata-rata Sampel (x̄)</td>
<td style="padding: 8px;">x̄ = Σxᵢ / n</td>
<td style="padding: 8px;">6.65</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Median Sampel</td>
<td style="padding: 8px;">η̂</td>
<td style="padding: 8px;">5.90</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Median Hipotesis (H₀)</td>
<td style="padding: 8px;">η₀</td>
<td style="padding: 8px;">7.00</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Statistik Wilcoxon (V)</td>
<td style="padding: 8px;">W = ΣR⁺</td>
<td style="padding: 8px;">56,168.00</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">p-value (dua arah)</td>
<td style="padding: 8px;">2 × P(W ≥ w)</td>
<td style="padding: 8px;">0.0000</td>
</tr>
<tr style="border-bottom: 1px solid #e0e0e0;">
<td style="padding: 8px;">Tingkat Signifikansi (α)</td>
<td style="padding: 8px;">α</td>
<td style="padding: 8px;">0.0500</td>
</tr>
</tbody>
</table>
</div>
<div style="background: #fff3e0; border: 2px solid #ff9800; border-radius: 6px; padding: 12px; margin-top: 10px;">
<h4 style="color: #ef6c00; margin: 0 0 8px 0; font-size: 14px; text-align: left;">Wilcoxon Confidence Interval 95%</h4>
<p style="font-size: 16px; color: #1a5a96; font-weight: bold; margin: 5px 0; text-align: left;">5.80 km ← 6.05 km</p>
<p style="margin: 0; font-size: 13px; text-align: left;">Median jarak perjalanan: <strong>5.80 km - 6.05 km</strong> (95% confidence based on signed-rank)</p>
</div>
<div style="background: #ffebee; padding: 10px; border-radius: 5px; margin-top: 10px; border-left: 4px solid #f44336;">
<p style="margin: 0; font-size: 13px; text-align: left;"><strong>Kesimpulan Uji Hipotesis:</strong> p-value (0.0000) < α (0.05). Oleh karena itu, <strong>kita menolak Hipotesis Nol (H₀)</strong>. Median jarak perjalanan OJOL berbeda secara signifikan dari 7 km pada tingkat signifikansi 5%. Median aktual jarak perjalanan adalah 5.90 km, yang lebih rendah dari nilai hipotesis 7 km.</p>
</div>
</div>
</div>
</div>