root = Card([topBar, bestPerformer, visitorsSection, conversionSection, trafficSection, campaignsSection, growthSection, followups], "clear", "column", "l")
topBar = Card([header, dateForm, exportButtons], "clear", "row", "l", "center", "between")
header = CardHeader("Marketing Dashboard", "Weekly overview · last 30 days")
dateForm = Form("date-range", applyButtons, [dateField])
dateField = FormControl("Date range", datePicker)
datePicker = DatePicker("date_range", "range")
applyButtons = Buttons([applyBtn])
applyBtn = Button("Apply", null, "secondary")
exportButtons = Buttons([exportBtn])
exportBtn = Button("Export report")
bestPerformer = Callout("success", "Best performing campaign", "Spring Sale is the winner: 4.8% conversion, $412K revenue and 3.2× ROAS on a $12.4K spend.")
visitorsSection = Card([visitorsHeader, visitorsChart, visitorTotal], "sunk")
visitorsHeader = Heading("Site visitors — last 30 days", "h3")
visitorsChart = AreaChart(dayLabels, [visitorSeries], "natural", "Day", "Visitors")
visitorTotal = TextContent("**80,200** total visits · avg **2,673/day** · peak **3,410** on May 30", "small-heavy")
conversionSection = Card([conversionHeader, conversionTable], "sunk")
conversionHeader = Heading("Conversion rate", "h3")
conversionTable = Table([convMetric, convValue, convChange])
trafficSection = Card([trafficHeader, trafficChart, trafficNote], "sunk")
trafficHeader = Heading("Top traffic sources", "h3")
trafficChart = HorizontalBarChart(["Organic search", "Direct", "Paid social", "Email", "Referrals"], [trafficSeries], "grouped", "Share (%)")
trafficNote = TextContent("Organic search drives **42%** of sessions — up **4 pts** since last month.", "small")
campaignsSection = Card([campaignsHeader, campaignsTable], "sunk")
campaignsHeader = Heading("Running campaigns", "h3")
campaignsTable = Table([campaignCol, channelCol, spendCol, revenueCol, roasCol])
growthSection = Card([growthHeader, growthChart, growthTotal], "sunk")
growthHeader = Heading("Email subscriber growth — this month", "h3")
growthChart = LineChart(["Week 1", "Week 2", "Week 3", "Week 4"], [growthSeries], "linear", "Week", "New subscribers")
growthTotal = TextContent("**2,750** new subscribers this month · list total **38,420** · bounce **1.2%**", "small-heavy")
followups = FollowUpBlock([fu1, fu2, fu3])
fu1 = FollowUpItem("Compare this week vs last week")
fu2 = FollowUpItem("Which campaign should I pause?")
fu3 = FollowUpItem("Draft a weekly report for the CEO")
convMetric = Col("Metric", ["Conversion rate", "Conversions", "Avg order value"])
convValue = Col("Value", ["2.9%", "2,391", "$86"])
convChange = Col("vs last period", ["+0.3 pts", "+12%", "+$4"])
trafficSeries = Series("Share of sessions", [42, 24, 16, 11, 7])
campaignCol = Col("Campaign", ["Spring Sale", "Summer Launch", "Retargeting", "Newsletter Rewards", "Influencer 01"])
channelCol = Col("Channel", ["Paid Social", "Search Ads", "Display", "Email", "Social"])
spendCol = Col("Spend", ["$12,400", "$9,150", "$5,800", "$3,200", "$2,750"])
revenueCol = Col("Revenue", ["$412,000", "$221,000", "$104,000", "$131,000", "$41,000"])
roasCol = Col("ROAS", ["3.2×", "2.4×", "1.8×", "4.1×", "1.5×"])
growthSeries = Series("New subscribers", [420, 610, 780, 940])
dayLabels = ["May 1", "May 2", "May 3", "May 4", "May 5", "May 6", "May 7", "May 8", "May 9", "May 10", "May 11", "May 12", "May 13", "May 14", "May 15", "May 16", "May 17", "May 18", "May 19", "May 20", "May 21", "May 22", "May 23", "May 24", "May 25", "May 26", "May 27", "May 28", "May 29", "May 30"]
visitorSeries = Series("Visitors", [2140, 2310, 2480, 2250, 1980, 2400, 2650, 2810, 2540, 2390, 2620, 2790, 2960, 2710, 2480, 2330, 2590, 2760, 2910, 2680, 2510, 2740, 2980, 3120, 2860, 2640, 2890, 3050, 3220, 3410])