La Estructura de `shinydashboard`

Bienvenido a la primera lección del Módulo 8. Aquí dejaremos atrás la estructura básica de fluidPage() para adoptar shinydashboard, el estándar de la industria para crear tableros de control robustos y con una apariencia profesional desde el primer momento.

La principal ventaja de shinydashboard es su estructura predefinida y organizada. Nos "obliga" a pensar de manera modular, separando la navegación del contenido, lo cual resulta en aplicaciones más limpias, escalables y fáciles de usar.

1. El Encabezado: `dashboardHeader()`

Es la barra superior de la aplicación. Su función principal es mostrar el título del dashboard y, opcionalmente, notificaciones, mensajes o menús desplegables. Es el primer punto de anclaje visual para el usuario.

# Define el encabezado de la aplicación
dashboardHeader(title = "Tablero ICFES")

2. La Barra Lateral: `dashboardSidebar()`

Es el centro de navegación principal. Aquí se define el menú que el usuario utilizará para moverse entre las diferentes secciones o vistas del tablero. Cada entrada del menú se crea con menuItem().

• menuItem(): Define una entrada de menú. Sus argumentos clave son:
  • text: El texto que verá el usuario (ej. "Visión General").
  • tabName: Un identificador único y crucial que conecta el botón del menú con su contenido en el cuerpo.
  • icon: Un ícono de Font Awesome para dar un apoyo visual, se invoca con icon().

# Define el menú de navegación lateral
dashboardSidebar(
    sidebarMenu(
        # Primer botón del menú, enlaza al contenido con id "dashboard"
        menuItem("Visión General", tabName = "dashboard", icon = icon("dashboard")),
        
        # Segundo botón, enlaza al contenido con id "analisis"
        menuItem("Análisis Detallado", tabName = "analisis", icon = icon("chart-bar"))
    )
)

3. El Cuerpo del Contenido: `dashboardBody()`

Es el área principal donde se mostrará todo el contenido: gráficos, tablas, mapas y controles interactivos. El contenido se organiza en "pestañas" usando tabItems(), donde cada tabItem() corresponde a un menuItem() de la barra lateral.

La conexión se hace a través del argumento tabName. ¡Debe ser idéntico en el menuItem y en el tabItem correspondiente para que el enlace funcione!

# Define el área de contenido principal
dashboardBody(
    tabItems(
        # Contenido para el primer menuItem (tabName = "dashboard")
        tabItem(tabName = "dashboard",
            h2("Contenido de la Visión General"),
            fluidRow(
                box(title = "Métricas Clave", "Aquí irían los valueBox..."),
                box(title = "Gráfico Principal", "Aquí iría un plotOutput...")
            )
        ),
        
        # Contenido para el segundo menuItem (tabName = "analisis")
        tabItem(tabName = "analisis",
            h2("Contenido del Análisis Detallado")
        )
    )
)

library(shiny)
library(shinydashboard)

# --- Definición de la Interfaz de Usuario (UI) ---
ui <- dashboardPage(

    # 1. Encabezado
    dashboardHeader(title = "Proyecto ICFES"),

    # 2. Barra Lateral de Navegación
    dashboardSidebar(
        sidebarMenu(
            menuItem("Visión General", tabName = "dashboard", icon = icon("tachometer-alt")),
            menuItem("Análisis por Filtros", tabName = "filtros", icon = icon("filter"))
        )
    ),

    # 3. Cuerpo del Dashboard
    dashboardBody(
        tabItems(
            # Contenido de la primera pestaña ("dashboard")
            tabItem(tabName = "dashboard",
                fluidRow(
                    # Un "box" es un contenedor para tus outputs
                    box(
                        title = "Gráfico de Distribución",
                        status = "primary", # Color del encabezado
                        solidHeader = TRUE,
                        collapsible = TRUE,
                        width = 8, # El ancho total es 12
                        "Aquí puedes poner un plotOutput('miGrafico')"
                    ),
                    box(
                        title = "Controles",
                        status = "warning",
                        solidHeader = TRUE,
                        width = 4,
                        "Aquí puedes poner tus selectInputs, sliders, etc."
                    )
                )
            ),

            # Contenido de la segunda pestaña ("filtros")
            tabItem(tabName = "filtros",
                h2("Página para análisis con filtros detallados")
            )
        )
    )
)

# --- Lógica del Servidor ---
server <- function(input, output) {
    # La lógica reactiva y los outputs se definen aquí.
    # Por ejemplo:
    # output$miGrafico <- renderPlot({ ... })
}

# --- Ejecutar la Aplicación ---
shinyApp(ui, server)