root = Card([header, controls, bestCampaignCallout, kpiRow, chartsRow, secondaryRow], "card", "column", "l")
header = Card([headerTitle, headerButtons], "clear", "row", "l", "center", "between")
headerTitle = CardHeader("Marketing Weekly Dashboard", "Last 30 days · Updated just now")
headerButtons = Buttons([exportButton])
exportButton = Button("Export report", null, "primary")
controls = Card([rangeForm], "sunk", "row", "m")
rangeForm = Form("date-range", rangeButtons, [rangeField])
rangeField = FormControl("Date range", rangeSelect, "Choose a range and apply it to refresh the dashboard")
rangeSelect = Select("range", [last7, last30, last90], "Select a range", [], "30")
last7 = SelectItem("7", "Last 7 days")
last30 = SelectItem("30", "Last 30 days")
last90 = SelectItem("90", "Last 90 days")
rangeButtons = Buttons([applyButton])
applyButton = Button("Apply", null, "secondary")
bestCampaignCallout = Callout("success", "Best performer: Spring Sale", "ROAS 5.2 on $12,400 spend — $64,500 attributed revenue.")
kpiRow = Card([visitorsKpi, conversionKpi, subscribersKpi], "sunk", "row", "l")
visitorsKpi = Card([visitorsHeading, visitorsValue, visitorsDelta], "clear", "column")
visitorsHeading = Heading("Visitors", "h4")
visitorsValue = TextContent("84,392", "large-heavy")
visitorsDelta = Tag("+12.4%", null, null, "success")
conversionKpi = Card([convHeading, convValue, convDelta], "clear", "column")
convHeading = Heading("Conversion rate", "h4")
convValue = TextContent("3.2%", "large-heavy")
convDelta = Tag("+0.4 pts", null, null, "success")
subscribersKpi = Card([subsHeading, subsValue, subsDelta], "clear", "column")
subsHeading = Heading("Email subscribers", "h4")
subsValue = TextContent("+1,284", "large-heavy")
subsDelta = Tag("+8.1% this month", null, null, "success")
chartsRow = Card([trafficCard, sourcesCard], "clear", "row", "l")
trafficCard = Card([trafficHeader, trafficChart], "sunk", "column")
trafficHeader = CardHeader("Visit trend", "Daily visitors, May 1 – May 30")
trafficChart = AreaChart(labels30, [trafficSeries], "natural", "Day", "Visitors")
labels30 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]
trafficSeries = Series("Visitors", [3240, 3370, 3120, 3590, 3820, 3410, 3150, 3980, 4210, 3880, 4020, 3760, 3540, 4370, 4680, 4310, 4560, 4230, 3980, 3760, 4120, 4350, 4610, 4890, 5230, 4980, 4760, 5440, 5170, 4680])
sourcesCard = Card([sourcesHeader, sourcesChart], "sunk", "column")
sourcesHeader = CardHeader("Traffic sources", "Top five by share")
sourcesChart = HorizontalBarChart(sourceLabels, [sourceSeries], "grouped", "Share (%)", "Source")
sourceLabels = ["Organic Search", "Paid Search", "Social", "Direct", "Email"]
sourceSeries = Series("Share (%)", [38, 24, 16, 12, 10])
secondaryRow = Card([growthCard, campaignsCard], "clear", "row", "l")
growthCard = Card([growthHeader, growthChart], "sunk", "column")
growthHeader = CardHeader("Email subscriber growth", "New subscribers by week in May")
growthChart = BarChart(growthLabels, [growthSeries], "grouped", "Week", "New subscribers")
growthLabels = ["Week 1", "Week 2", "Week 3", "Week 4"]
growthSeries = Series("New subscribers", [210, 285, 340, 449])
campaignsCard = Card([campaignsHeader, campaignsTable], "sunk", "column")
campaignsHeader = CardHeader("Running campaigns", "Media spend by campaign")
campaignsTable = Table([campaignCol, spendCol, statusCol])
campaignCol = Col("Campaign", ["Spring Sale", "Brand Awareness", "Retargeting", "Newsletter", "Influencer Launch"])
spendCol = Col("Spend", ["$12,400", "$9,800", "$7,250", "$3,600", "$1,900"])
statusCol = Col("Status", ["Active", "Active", "Active", "Active", "Active"])