root = Card([header, kpiRow, trafficSources, campaignsSection, bestCampaign, exportBtn])
header = Card([titleRow, dateRangeForm], "clear", "row", "m", "center", "between")
titleRow = Card([title, subtitle], "clear", "column", "xs")
title = Heading("Marketing Weekly Dashboard", "h2")
subtitle = TextContent("Week of Jan 15 – Jan 21, 2024", "small")
dateRangeForm = Form("date-range", dateButtons, [dateField])
dateField = FormControl("Date range", datePicker, "Select a custom range")
datePicker = DatePicker("date_range", "range", [], [])
dateButtons = Buttons([applyBtn], "row")
applyBtn = Button("Apply", null, "primary")
kpiRow = Card([visitorsKpi, conversionKpi, subscribersKpi], "clear", "row", "m", "stretch", "between")
visitorsKpi = Card([visitorsLabel, visitorsValue, visitorsTrend], "sunk", "column", "s")
visitorsLabel = TextContent("Site Visitors (30d)", "small-heavy")
visitorsValue = TextContent("124,582", "large-heavy")
visitorsTrend = TextContent("↑ 12.3% vs prior period", "small")
conversionKpi = Card([conversionLabel, conversionValue, conversionTrend], "sunk", "column", "s")
conversionLabel = TextContent("Conversion Rate", "small-heavy")
conversionValue = TextContent("3.24%", "large-heavy")
conversionTrend = TextContent("↑ 0.18 pp vs prior period", "small")
subscribersKpi = Card([subscribersLabel, subscribersValue, subscribersTrend], "sunk", "column", "s")
subscribersLabel = TextContent("Email Subscribers (MTD)", "small-heavy")
subscribersValue = TextContent("18,740", "large-heavy")
subscribersTrend = TextContent("↑ 2,340 new this month", "small")
trafficSources = Card([trafficHeader, trafficChart], "sunk", "column", "m")
trafficHeader = Heading("Top 5 Traffic Sources", "h3")
trafficChart = PieChart(trafficLabels, trafficValues, "donut", "circular")
trafficLabels = ["Organic Search", "Direct", "Referral", "Social", "Email"]
trafficValues = [52400, 31200, 18900, 14500, 7582]
campaignsSection = Card([campaignsHeader, campaignsTable], "sunk", "column", "m")
campaignsHeader = Heading("Running Campaigns", "h3")
campaignsTable = Table([campNameCol, campSpendCol, campImpressionsCol, campClicksCol, campConversionsCol, campCpaCol])
campNameCol = Col("Campaign", ["Summer Sale", "Brand Awareness", "Retargeting", "Product Launch", "Newsletter"])
campSpendCol = Col("Spend", [12500, 8200, 4600, 15300, 2100])
campImpressionsCol = Col("Impressions", [450000, 620000, 180000, 310000, 95000])
campClicksCol = Col("Clicks", [18200, 12400, 8900, 14600, 4200])
campConversionsCol = Col("Conversions", [586, 298, 412, 438, 189])
campCpaCol = Col("CPA", [21.33, 27.52, 11.17, 34.93, 11.11])
bestCampaign = Card([bestHeader, bestCard], "clear", "column", "m")
bestHeader = Heading("Best Performing Campaign", "h3")
bestCard = Card([bestName, bestMetrics, bestInsight], "card", "column", "m")
bestName = TextContent("Summer Sale", "large-heavy")
bestMetrics = Card([bestCpa, bestRoas, bestConvRate], "clear", "row", "l", "center", "between")
bestCpa = Card([cpaLabel, cpaValue], "sunk", "column", "xs", "center")
cpaLabel = TextContent("CPA", "small")
cpaValue = TextContent("$21.33", "large-heavy")
bestRoas = Card([roasLabel, roasValue], "sunk", "column", "xs", "center")
roasLabel = TextContent("ROAS", "small")
roasValue = TextContent("5.8×", "large-heavy")
bestConvRate = Card([convLabel, convValue], "sunk", "column", "xs", "center")
convLabel = TextContent("Conv. Rate", "small")
convValue = TextContent("3.22%", "large-heavy")
bestInsight = Callout("success", "Top performer", "Summer Sale delivers the lowest CPA and highest ROAS across all active campaigns. Consider increasing budget allocation.")
exportBtn = Buttons([exportButton], "row", "end")
exportButton = Button("Export Report", null, "primary")