root = Card([header, kpiRow, watchTimeSection, engagementSection, audienceSection, deliverySection, catalogSection, opsSection], "clear", "column", "l")
header = CardHeader("Streaming Operations", "Live dashboard · Thursday, May 15")
kpiRow = Card([viewersKpi, bufferingKpi, ctrKpi], "card", "row", "m")
viewersKpi = Card([viewersTitle, viewersValue, viewersMeta], "sunk", "column", "xs")
viewersTitle = Heading("Viewers now", "h3")
viewersValue = TextContent("48,291", "large-heavy")
viewersMeta = TextContent("▲ 6.2% vs this time yesterday", "small")
bufferingKpi = Card([bufferingTitle, bufferingProgress, bufferingMeta], "sunk", "column", "xs")
bufferingTitle = Heading("Buffering rate", "h3")
bufferingProgress = Progress(2.4, "2.4% of streams")
bufferingMeta = TextContent("Target < 1% · improving", "small")
ctrKpi = Card([ctrTitle, ctrValue, ctrTrend, ctrChart], "sunk", "column", "xs")
ctrTitle = Heading("Recommendation CTR", "h3")
ctrValue = TextContent("4.8%", "large-heavy")
ctrTrend = TextContent("▲ 0.3 pts vs last week", "small")
ctrChart = LineChart(["W1", "W2", "W3", "W4"], [ctrSeries], "natural", "Week", "CTR %")
ctrSeries = Series("CTR", [4.1, 4.3, 4.5, 4.8])
watchTimeSection = Card([watchHeading, watchChart], "card", "column", "m")
watchHeading = Heading("Watch time · last 30 days", "h2")
watchChart = AreaChart(areaLabels, [areaSeries], "natural", "Date", "M hours")
areaLabels = ["May 1", "May 4", "May 7", "May 10", "May 13", "May 16", "May 19", "May 22", "May 25", "May 28"]
areaSeries = Series("Watch time (M hrs)", [2.1, 2.4, 2.2, 2.6, 3.1, 2.9, 3.4, 3.2, 3.8, 4.1])
engagementSection = Card([mostWatchedCard, subsVsCancelsCard], "card", "row", "m")
mostWatchedCard = Card([mostWatchedHeading, mostWatchedChart], "clear", "column", "m")
mostWatchedHeading = Heading("Most-watched titles", "h3")
mostWatchedChart = HorizontalBarChart(["Stranger Things", "The Crown", "Wednesday", "Bridgerton", "The Witcher"], [mostWatchedSeries], "grouped", "Hours (M)")
mostWatchedSeries = Series("Hours", [2.4, 1.9, 1.7, 1.5, 1.2])
subsVsCancelsCard = Card([subsHeading, subsChart], "clear", "column", "m")
subsHeading = Heading("New subscribers vs cancellations", "h3")
subsChart = BarChart(["Apr 15", "Apr 22", "Apr 29", "May 6", "May 13"], [newSubsSeries, cancelsSeries], "grouped", "Week", "Count")
newSubsSeries = Series("New subscribers", [3200, 3800, 4100, 4700, 5200])
cancelsSeries = Series("Cancellations", [1800, 2100, 1900, 2300, 2500])
audienceSection = Card([genreCard, deviceCard], "card", "row", "m")
genreCard = Card([genreHeading, genreChart], "clear", "column", "m")
genreHeading = Heading("Performance by genre", "h3")
genreChart = RadarChart(["Drama", "Comedy", "Sci-Fi", "Documentary", "Action", "Reality"], [genreWatchSeries, genreCompletionSeries])
genreWatchSeries = Series("Watch time (M hrs)", [38, 22, 29, 15, 31, 10])
genreCompletionSeries = Series("Completion rate (%)", [72, 68, 64, 80, 71, 77])
deviceCard = Card([deviceHeading, deviceChart], "clear", "column", "m")
deviceHeading = Heading("Viewing by device", "h3")
deviceChart = SingleStackedBarChart(["TV", "Mobile", "Tablet", "Web"], [52, 28, 12, 8])
deliverySection = Card([revenueCard, healthCard], "card", "row", "m")
revenueCard = Card([revenueHeading, revenueChart], "clear", "column", "m")
revenueHeading = Heading("Revenue by plan", "h3")
revenueChart = PieChart(["Premium", "Standard", "Basic", "Ad-supported"], [4.2, 3.1, 1.8, 0.9], "donut")
healthCard = Card([healthHeading, healthCallout, healthTable], "clear", "column", "m")
healthHeading = Heading("Delivery health by region", "h3")
healthCallout = Callout("warning", "APAC degraded", "Elevated error rates in APAC; failover in progress")
healthTable = Table([regionCol, latencyCol, errorCol, statusCol])
regionCol = Col("Region", ["NA East", "NA West", "Europe", "APAC", "LATAM"])
latencyCol = Col("Latency (ms)", [42, 55, 38, 120, 88])
errorCol = Col("Error rate", [0.1, 0.3, 0.2, 0.8, 0.4])
statusCol = Col("Status", ["Healthy", "Healthy", "Healthy", "Degraded", "Healthy"])
catalogSection = Card([releasesCard, expiringCard], "card", "row", "m")
releasesCard = Card([releasesHeading, releasesList], "clear", "column", "m")
releasesHeading = Heading("Releases this month", "h3")
releasesList = ListBlock([releaseItem1, releaseItem2, releaseItem3, releaseItem4], "number")
releaseItem1 = ListItem("The Last Voyage", "May 16 · Sci-Fi")
releaseItem2 = ListItem("Kitchen Stories", "May 19 · Documentary")
releaseItem3 = ListItem("Midnight at the Ritz", "May 23 · Drama")
releaseItem4 = ListItem("Laugh Track Live", "May 28 · Comedy")
expiringCard = Card([expiringHeading, expiringTable], "clear", "column", "m")
expiringHeading = Heading("Licenses expiring soon", "h3")
expiringTable = Table([licenseTitleCol, licenseeCol, expiryCol, daysCol])
licenseTitleCol = Col("Title", ["Amber Falls", "Space Cadets", "The Heist", "Great Beaches"])
licenseeCol = Col("Licensee", ["Paramount", "NBCUniversal", "Sony", "BBC"])
expiryCol = Col("Expires", ["Jun 02", "Jun 08", "Jun 14", "Jun 21"])
daysCol = Col("Days left", [18, 24, 30, 37])
opsSection = Card([opsRow1, opsRow2], "card", "column", "m")
opsRow1 = Card([searchCard, flagsCard], "clear", "row", "m")
searchCard = Card([searchHeading, searchTable], "sunk", "column", "m")
searchHeading = Heading("Searches without playback", "h3")
searchTable = Table([queryCol, countCol, missedCol])
queryCol = Col("Query", ["dark comedy", "k-drama", "true crime", "anime", "reality"])
countCol = Col("Searches", [12400, 9800, 8700, 6100, 4900])
missedCol = Col("No playback", [8900, 6100, 5200, 4300, 3800])
flagsCard = Card([flagsHeading, flagsTable], "sunk", "column", "m")
flagsHeading = Heading("Feature flags", "h3")
flagsTable = Table([flagCol, stateCol, rolloutCol])
flagCol = Col("Flag", ["4K HDR", "AV1 decode", "Kids profile", "Podcast tab", "Gift cards"])
stateCol = Col("State", ["On", "On", "On", "Off", "Off"])
rolloutCol = Col("Rollout", ["100%", "75%", "100%", "0%", "40%"])
opsRow2 = Card([focusCard, promoteCard], "clear", "row", "m")
focusCard = Card([focusHeading, focusForm], "sunk", "column", "m")
focusHeading = Heading("Focus on one region", "h3")
focusForm = Form("region-focus", focusButtons, [regionField])
regionField = FormControl("Region", regionSelect)
regionSelect = Select("region", [regionNA, regionEU, regionAPAC, regionLATAM], "Choose a region")
regionNA = SelectItem("na-east", "NA East")
regionEU = SelectItem("eu", "Europe")
regionAPAC = SelectItem("apac", "APAC")
regionLATAM = SelectItem("latam", "LATAM")
focusButtons = Buttons([applyRegionBtn])
applyRegionBtn = Button("Apply region filter", null, "primary")
promoteCard = Card([promoteHeading, promoteForm], "sunk", "column", "m")
promoteHeading = Heading("Promote a title", "h3")
promoteForm = Form("promote-title", promoteButtons, [titleField])
titleField = FormControl("Title", titleSelect)
titleSelect = Select("title", [titleItem1, titleItem2, titleItem3, titleItem4], "Choose a title")
titleItem1 = SelectItem("last-voyage", "The Last Voyage")
titleItem2 = SelectItem("kitchen-stories", "Kitchen Stories")
titleItem3 = SelectItem("midnight-ritz", "Midnight at the Ritz")
titleItem4 = SelectItem("laugh-track", "Laugh Track Live")
promoteButtons = Buttons([promoteBtn])
promoteBtn = Button("Promote to home", null, "primary")