root = Card([header, controls, kpiRow, visitorsCard, sourcesCard, campaignsCard, subscriberCard], "card", "column", "l")
header = CardHeader("Marketing Dashboard", "Weekly overview · Last 30 days")
controls = Card([rangeField, exportBtn], "sunk", "row", "m", "center")
rangeField = FormControl("Date range", rangeSelect)
rangeSelect = Select("date_range", [range7, range30, range90, rangeQuarter], "Select a range", null, "30", "medium")
range7 = SelectItem("7", "Last 7 days")
range30 = SelectItem("30", "Last 30 days")
range90 = SelectItem("90", "Last 90 days")
rangeQuarter = SelectItem("quarter", "This quarter")
exportBtn = Button("Export report", null, "primary")
kpiRow = Card([visitorsKpi, conversionKpi, subscribersKpi], "sunk", "row", "m")
visitorsKpi = Card([visitorsKpiLabel, visitorsKpiValue, visitorsKpiTag], "clear", "column")
visitorsKpiLabel = TextContent("**Site visitors (30d)**", "small")
visitorsKpiValue = TextContent("53,900", "large-heavy")
visitorsKpiTag = Tag("+12% vs last month", null, "sm", "success")
conversionKpi = Card([conversionKpiLabel, conversionKpiValue, conversionKpiTag], "clear", "column")
conversionKpiLabel = TextContent("**Conversion rate**", "small")
conversionKpiValue = TextContent("3.2%", "large-heavy")
conversionKpiTag = Tag("+0.4 pts", null, "sm", "success")
subscribersKpi = Card([subscribersKpiLabel, subscribersKpiValue, subscribersKpiTag], "clear", "column")
subscribersKpiLabel = TextContent("**Email subscribers**", "small")
subscribersKpiValue = TextContent("+1,683", "large-heavy")
subscribersKpiTag = Tag("This month", null, "sm", "info")
visitorsCard = Card([visitorsHeader, visitorsChart], "card", "column", "m")
visitorsHeader = CardHeader("Site visitors", "Daily sessions over the last 30 days")
visitorsChart = AreaChart(visitDays, [visitSeries], "natural", "Day", "Visitors")
visitDays = ["Oct 1", "Oct 2", "Oct 3", "Oct 4", "Oct 5", "Oct 6", "Oct 7", "Oct 8", "Oct 9", "Oct 10", "Oct 11", "Oct 12", "Oct 13", "Oct 14", "Oct 15", "Oct 16", "Oct 17", "Oct 18", "Oct 19", "Oct 20", "Oct 21", "Oct 22", "Oct 23", "Oct 24", "Oct 25", "Oct 26", "Oct 27", "Oct 28", "Oct 29", "Oct 30"]
visitSeries = Series("Visitors", [1420, 1350, 1510, 1480, 1620, 1890, 1730, 1540, 1490, 1580, 1470, 1660, 1740, 1690, 1900, 2210, 1980, 1760, 1680, 1810, 1750, 1930, 1990, 1860, 2100, 2350, 2140, 1980, 2050, 2240])
sourcesCard = Card([sourcesHeader, sourcesChart], "card", "column", "m")
sourcesHeader = CardHeader("Top traffic sources", "Share of sessions by channel")
sourcesChart = HorizontalBarChart(sourceNames, [sourceShare], "grouped", "Share (%)", "Source")
sourceNames = ["Organic Search", "Paid Ads", "Social Media", "Email", "Referrals"]
sourceShare = Series("Share", [38, 27, 18, 10, 7])
campaignsCard = Card([campaignsHeader, campaignsTable, bestCampaign], "card", "column", "m")
campaignsHeader = CardHeader("Running campaigns", "Spend and status")
campaignsTable = Table([campaignCol, spendCol, statusCol])
campaignCol = Col("Campaign", ["Summer Launch", "Retargeting Pro", "Brand Awareness", "Newsletter Promo", "Social Sprint"])
spendCol = Col("Spend", ["$12,400", "$8,950", "$6,300", "$4,120", "$3,780"])
statusCol = Col("Status", ["Active", "Active", "Active", "Paused", "Active"])
bestCampaign = Callout("success", "Best performing campaign", "Summer Launch leads with a 4.8% conversion rate and 5.2x ROAS on $12,400 spend.")
subscriberCard = Card([subscriberHeader, subscriberChart], "card", "column", "m")
subscriberHeader = CardHeader("Email subscriber growth", "Cumulative new subscribers this month")
subscriberChart = LineChart(subWeeks, [subscriberSeries], "linear", "Week", "Subscribers")
subWeeks = ["Week 1", "Week 2", "Week 3", "Week 4"]
subscriberSeries = Series("Subscribers", [1240, 1380, 1510, 1683])