root = Card([header, liveStatus, kpiRow, watchTrend, topTitles, regionFocus, genrePerf, buffering, deliveryHealth, subsNet, revenueSplit, deviceSplit, recClicks, deadEnds, releases, licenses, featureFlags, promoteTitle, followups], "card", "column", "xl")

header = CardHeader("Streaming Operations", "Live overview of platform health and performance")

liveStatus = Callout("success", "Live", "1,284,392 viewers are watching right now")

kpiRow = Card([kpiHeading, kpiTable], "sunk")
kpiHeading = Heading("Key metrics", "h3")
kpiTable = Table([kpiMetric, kpiValue])
kpiMetric = Col("Metric", ["Viewers now", "Watch time (24h)", "Buffering rate", "Rec click-through", "Dead-end searches"])
kpiValue = Col("Value", ["1,284,392", "42.1M hours", "0.8%", "6.4%", "12.3%"])

watchTrend = Card([watchHeading, watchChart], "sunk")
watchHeading = Heading("Watch time — past month", "h3")
watchChart = LineChart(["Jun 1", "Jun 5", "Jun 10", "Jun 15", "Jun 20", "Jun 25", "Jun 30"], [watchSeries], "natural", "Date", "Hours (millions)")
watchSeries = Series("Watch time", [31.2, 33.8, 35.1, 38.4, 39.7, 41.5, 42.1])

topTitles = Card([topHeading, topChart], "sunk")
topHeading = Heading("Most-watched titles (hours)", "h3")
topChart = HorizontalBarChart(["Nightfall", "The Deep", "Crimson Tide", "Echoes", "Paper Planes"], [topSeries], "grouped", "Hours", "Title")
topSeries = Series("Hours watched", [12840000, 11920000, 10300000, 9210000, 8470000])

regionFocus = Card([regionHeading, regionSelect, regionNote], "sunk")
regionHeading = Heading("Focus by region", "h3")
regionSelect = Select("region", [regionNA, regionEU, regionAPAC, regionLATAM], "Choose a region", null, null, "medium")
regionNA = SelectItem("na", "North America")
regionEU = SelectItem("eu", "Europe")
regionAPAC = SelectItem("apac", "Asia-Pacific")
regionLATAM = SelectItem("latam", "Latin America")
regionNote = TextCallout("info", "Region selected", "All charts below now reflect the selected region. Currently: Global.")

genrePerf = Card([genreHeading, genreChart], "sunk")
genreHeading = Heading("Performance by genre", "h3")
genreChart = RadarChart(["Drama", "Comedy", "Sci-Fi", "Documentary", "Action", "Kids"], [genreSeries])
genreSeries = Series("Hours (millions)", [12.4, 8.9, 10.2, 6.1, 11.8, 7.3])

buffering = Card([bufferHeading, bufferProgress], "sunk")
bufferHeading = Heading("Buffering rate", "h3")
bufferProgress = Progress(0.8, "0.8% of streams buffered > 2s")

deliveryHealth = Card([deliveryHeading, deliveryTable], "sunk")
deliveryHeading = Heading("Delivery health by region", "h3")
deliveryTable = Table([regionCol, healthCol, latencyCol])
regionCol = Col("Region", ["North America", "Europe", "Asia-Pacific", "Latin America"])
healthCol = Col("Health", ["Excellent", "Good", "Fair", "Good"])
latencyCol = Col("Avg latency (ms)", [82, 110, 210, 145])

subsNet = Card([subsHeading, subsChart], "sunk")
subsHeading = Heading("New subscribers vs cancellations", "h3")
subsChart = AreaChart(["Jun 1", "Jun 8", "Jun 15", "Jun 22", "Jun 30"], [newSeries, cancelSeries], "natural", "Date", "Count")
newSeries = Series("New subscribers", [18200, 21400, 19800, 24500, 26300])
cancelSeries = Series("Cancellations", [9100, 8400, 9700, 8800, 10200])

revenueSplit = Card([revHeading, revPie], "sunk")
revHeading = Heading("Revenue split by plan", "h3")
revPie = PieChart(["Basic", "Standard", "Premium", "Family"], [38, 27, 22, 13], "donut")

deviceSplit = Card([deviceHeading, devicePie], "sunk")
deviceHeading = Heading("Viewing split by device", "h3")
devicePie = PieChart(["Smart TV", "Mobile", "Tablet", "Web", "Console"], [41, 29, 12, 11, 7])

recClicks = Card([recHeading, recChart], "sunk")
recHeading = Heading("Recommendation click-through", "h3")
recChart = LineChart(["W1", "W2", "W3", "W4"], [recSeries], "linear", "Week", "CTR %")
recSeries = Series("Click-through rate", [5.8, 6.1, 6.3, 6.4])

deadEnds = Card([deadHeading, deadTable], "sunk")
deadHeading = Heading("Searches ending without playback", "h3")
deadTable = Table([searchCol, countCol])
searchCol = Col("Search term", ["'season 3'", "'dubbed anime'", "'live sports'", "'old classics'"])
countCol = Col("Count", [84200, 61300, 45900, 32800])

releases = Card([releaseHeading, releaseList], "sunk")
releaseHeading = Heading("Releases this month", "h3")
releaseList = ListBlock([release1, release2, release3], "number")
release1 = ListItem("The Last Signal", "Premieres Jul 12 — Original series", null, "Promote")
release2 = ListItem("Ocean's Edge", "Premieres Jul 19 — Documentary film", null, "Promote")
release3 = ListItem("City of Ash", "Premieres Jul 26 — Drama series", null, "Promote")

licenses = Card([licenseHeading, licenseTable], "sunk")
licenseHeading = Heading("Licenses expiring soon", "h3")
licenseTable = Table([titleLic, expiryCol, statusCol])
titleLic = Col("Title", ["Nightfall", "Echoes", "Paper Planes"])
expiryCol = Col("Expires", ["Aug 15", "Aug 22", "Sep 2"])
statusCol = Col("Status", ["Renewal in progress", "Negotiating", "Not started"])

featureFlags = Card([flagHeading, flagTable], "sunk")
flagHeading = Heading("Feature flags", "h3")
flagTable = Table([flagName, flagState])
flagName = Col("Feature", ["4K HDR", "Offline downloads", "Kids profile", "Live sports", "AV1 encoding"])
flagState = Col("State", ["On", "On", "On", "Off", "Rollout 50%"])

promoteTitle = Card([promoteHeading, promoteForm], "sunk")
promoteHeading = Heading("Promote a title on home", "h3")
promoteForm = Form("promote", promoteButtons, [promoteSelect, promoteSlot])
promoteSelect = FormControl("Title", titlePick)
titlePick = Select("title", [titleNight, titleDeep, titleCrimson], "Select a title")
titleNight = SelectItem("nightfall", "Nightfall")
titleDeep = SelectItem("deep", "The Deep")
titleCrimson = SelectItem("crimson", "Crimson Tide")
promoteSlot = FormControl("Placement", slotPick)
slotPick = Select("slot", [slotHero, slotRow], "Choose placement")
slotHero = SelectItem("hero", "Hero banner")
slotRow = SelectItem("row", "Top row")
promoteButtons = Buttons([promoteBtn, cancelBtn])
promoteBtn = Button("Promote now", null, "primary")
cancelBtn = Button("Cancel", null, "tertiary")

followups = FollowUpBlock([fu1, fu2, fu3])
fu1 = FollowUpItem("Show me the top title in detail")
fu2 = FollowUpItem("Compare last month to this month")
fu3 = FollowUpItem("Which regions have the highest buffering?")