การวางโครงร่าง (Wireframing)
มาดูตัวอย่างเดิมของ dashboard สำหรับแสดงผลการวิเคราะห์การแข่งขันฟุตบอลกันอีกครั้ง ในแบบฝึกหัดก่อนหน้า ได้ตั้งค่า header และ sidebar เรียบร้อยแล้ว
โดยเฉพาะอย่างยิ่ง ปุ่มใน sidebar กำหนดด้วย menuItem() และอยู่ภายใน sidebarMenu() คุณอาจสังเกตว่าปุ่มเหล่านี้ยังไม่ทำงานในขณะนี้ ต่อไปจะเชื่อมโยงปุ่มใน sidebar เหล่านี้เข้ากับหน้าต่างๆ ในส่วน body ของ UI ซึ่งยังเป็นส่วนหนึ่งของกระบวนการวางโครงร่าง (wireframing) ที่กำลังตัดสินใจว่าจะวางแต่ละออบเจกต์ไว้ที่ใด แต่ละหน้าใน body กำหนดด้วย tabItem() และต้องอยู่ภายใน tabItems
แพ็กเกจ shiny และ shinydashboard ถูกโหลดให้แล้ว และ dashboard header ถูกเก็บไว้ในตัวแปร header เรียบร้อยแล้ว
แบบฝึกหัดนี้เป็นส่วนหนึ่งของหลักสูตร
การสร้างแดชบอร์ดด้วย shinydashboard
แบบฝึกหัดเชิงโต้ตอบแบบลงมือทำ
ลองทำแบบฝึกหัดนี้โดยเติมโค้ดตัวอย่างนี้ให้สมบูรณ์
library(shiny)
library(shinydashboard)
header <- dashboardHeader(
title = "Analysis results for global soccer tournament",
titleWidth = 400,
dropdownMenu(type = "messages",
messageItem("Colleage", "Hello world!")),
dropdownMenu(type = "notifications",
notificationItem("Have you rested today?"),
taskItem("Dashboard completion", value = 20)))
sidebar <- dashboardSidebar(
sidebarMenu(
width = 400,
id = "pages",
menuItem("Match details", tabName = "matches", icon = icon("futbol"),
badgeLabel = "New content!", badgeColor = "green"),
menuItem("Overall results", tabName = "overall",
menuSubItem("Charts", tabName = "charts"),
menuSubItem("Data table", tabName = "datatable", icon=icon("file-excel"))),
menuItem("A slider", sliderInput("slider", "Number of goals", min=0, max=10, value = 2))
)
)
body <- dashboardBody(
# Link "matches" to an empty page in the body
___(
___(___, "Match information goes here")
)
)
ui <- dashboardPage(header, sidebar, body)
server <- function(input, output){}
shinyApp(ui, server)