I've been asked by a VP of Sales to create a "single pane of glass" for the quarterly performance of Apex Electronics. They don't want a 20-page PDF report; they want a dashboard where they can see the total revenue, the top-performing region, and a trend line without scrolling for ten minutes. I've used Shiny for this in the past, but honestly, for a static snapshot, Shiny is overkill. Let's see if flexdashboard can handle this more simply.

Turning a report into a dashboard

Normally, I'd start an R Markdown file with output: html_document. But let's try switching that to flexdashboard::flex_dashboard in the YAML header. I'll throw in some dummy data for Apex Electronics—total sales, regional splits, and a time series—and just see what the default behavior is.

---
title: "Apex Electronics Quarterly Review"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
---

### Total Revenue
```{r}
# Just a simple plot for now
plot(rnorm(100), main="Revenue Trend")

I hit knit. It works, but it's... boring. It's just one big plot taking up the whole screen. The VP will hate that. The flexdashboard logic relies on Markdown headers to define the layout. The ### (level 3 header) creates a "box" or a "component." Since I only have one, it fills the whole page. I need more structure.

Fighting with the layout

I want a top row for high-level KPIs and a bottom section for the detailed charts. I'll try adding Column and Row levels. This is where I usually get tripped up because the hierarchy matters: Page > Column > Row > Component.

---
title: "Apex Electronics Quarterly Review"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
---

Column {data-width=650}
-----------------------------------------------------------------------

### Revenue Trend over Time
```{r}
library(ggplot2)
ggplot(mtcars, aes(wt, mpg)) + geom_line() # Using mtcars as a placeholder for sales data


### Regional Breakdown
```{r}
ggplot(mtcars, aes(factor(cyl))) + geom_bar()


Column {data-width=350}
-----------------------------------------------------------------------

### Key Performance Indicators
# I'll put something here in a second

Now we're getting somewhere. By adding Column, I've split the screen. The data-width attribute lets me play with the proportions. But look at that right column—it's empty and awkward. A VP doesn't want to see a ggplot for a single number; they want a "Value Box."

The 'Executive' feel with Value Boxes

I remember there's a specific valueBox function in this package. Let's try to implement a "Total Revenue" and "Growth %" box. I'll need to make sure the chunk option class="value-box"` is set, or the styling won't trigger.

### Key Performance Indicators

```{r}
# Let's simulate some KPIs
revenue <- 1250000
growth <- 12.5

flexdashboard::valueBox(revenue, caption = "Total Revenue", icon = "fa-dollar-sign")
flexdashboard::valueBox(paste0(growth, "%"), caption = "Quarterly Growth", icon = "fa-chart-line")

Wait, the boxes are stacking vertically, but they look a bit disconnected. If I want them to sit side-by-side within that column, I can actually wrap them in a Row. Let's adjust the right column:

Column {data-width=350}
-----------------------------------------------------------------------

Row {data-height=150}
-----------------------------------------------------------------------

### Total Revenue
```{r}
flexdashboard::valueBox(1250000, caption = "Total Revenue", icon = "fa-dollar-sign")


### Growth
```{r}
flexdashboard::valueBox("12.5%", caption = "Quarterly Growth", icon = "fa-chart-line")

That's the "Executive" look. The KPIs are prominent at the top right, and the heavy lifting (the plots) is on the left. One last thing: static plots are fine, but if the VP wants to hover over a data point to see the exact dollar amount, ggplot2 won't cut it. I'll wrap the plots in plotly::ggplotly(). It's the fastest way to add interactivity without writing a full Shiny server.

Adding a touch of interactivity

I'll update the Revenue Trend chunk. Instead of just printing the plot, I'll assign it to a variable and pass it to plotly.

### Revenue Trend over Time
```{r}
library(ggplot2)
library(plotly)

p <- ggplot(mtcars, aes(wt, mpg)) + 
     geom_line(color = "steelblue") + 
     theme_minimal()

ggplotly(p)

Now, when I knit, I have a professional, responsive dashboard. The flexdashboard package essentially turns R Markdown into a Bootstrap grid. I didn't have to write a single line of CSS or HTML to get a layout that looks like a commercial product.

📋 Practical Task

Exercise: The Apex Electronics Logistics Monitor

The logistics manager at Apex Electronics needs a dashboard to track shipping delays. Build a flexdashboard with the following requirements:

• Layout: Use a two-column layout. The left column should be wider (e.g., data-width=700).
• KPIs: In the right column, create a Row containing two valueBox elements: one for "Avg Delivery Time" (set to "3.2 Days") and one for "Pending Shipments" (set to "142"). Use appropriate FontAwesome icons (e.g., fa-truck and fa-clock).
• Visualization: In the left column, create a plot showing the number of shipments over time. Use a sample data frame (like AirPassengers or a created sequence) and wrap the plot in plotly::ggplotly() to make it interactive.
• Organization: Ensure you use the correct Markdown header levels (Column, Row, and ###) so the elements don't just stack in one long list.

Knit the document to HTML and verify that the value boxes sit side-by-side in their own row on the right side of the screen.