root = Card([header, liveBadge, opsAlert, regionSection, metricsSection, topTitlesSection, watchTimeSection, subscriberSection, genreSection, deliverySection, recommendationsSection, searchesSection, revenueSection, deviceSection, releasesSection, expiringSection, flagsSection, promoteSection], "clear", "column", "2xl")
header = CardHeader("Streaming Operations Room", "Live metrics · Updated just now")
liveBadge = Tag("Live", null, null, "success")
opsAlert = Callout("warning", "Latin America delivery at risk", "Buffering above 4% for 2h. Edge capacity scaling up.")
regionSection = Card([regionHeader, regionForm], "sunk", "column", "m")
regionHeader = CardHeader("Region focus", "Filter all metrics to one market")
regionForm = Form("region-focus", regionButtons, [regionField])
regionField = FormControl("Region", regionSelect, "Choose a region to focus the dashboard")
regionSelect = Select("region", [regionNA, regionEU, regionApac, regionLatam], "All regions")
regionNA = SelectItem("na", "North America")
regionEU = SelectItem("eu", "Europe")
regionApac = SelectItem("apac", "Asia Pacific")
regionLatam = SelectItem("latam", "Latin America")
regionButtons = Buttons([applyRegionBtn])
applyRegionBtn = Button("Apply focus")
metricsSection = Card([metricsHeader, metricsTable], "sunk", "column", "m")
metricsHeader = CardHeader("Live metrics", "Point-in-time health")
metricsTable = Table([metricCol, valueCol])
metricCol = Col("Metric", ["Viewers now", "Buffering rate", "Recommendation CTR", "Searches without playback"])
valueCol = Col("Value", ["1,284,301", "2.1%", "8.7%", "3,742"])
topTitlesSection = Card([topTitlesHeader, topTitlesChart], "sunk", "column", "m")
topTitlesHeader = CardHeader("Most-watched titles", "Hours watched in the last 24 hours")
topTitlesChart = HorizontalBarChart(["Midnight Heist", "Aurora Falls", "The Last Signal", "Chef's Table: Kyoto", "Cosmos Reborn"], [topTitlesSeries])
topTitlesSeries = Series("Hours", [842000, 731000, 658000, 512000, 478000])
watchTimeSection = Card([watchTimeHeader, watchTimeChart], "sunk", "column", "m")
watchTimeHeader = CardHeader("Watch time", "Past month")
watchTimeChart = AreaChart(["Jun 1", "Jun 8", "Jun 15", "Jun 22", "Jun 29"], [watchSeries], "natural", "Date", "Hours (M)")
watchSeries = Series("Watch time", [42.1, 45.8, 44.2, 51.3, 56.7])
subscriberSection = Card([subscriberHeader, subscriberChart], "sunk", "column", "m")
subscriberHeader = CardHeader("Subscriber movement", "New subscribers vs cancellations")
subscriberChart = BarChart(["Jun 1", "Jun 8", "Jun 15", "Jun 22", "Jun 29"], [subNewSeries, subCancelSeries], "grouped", "Week", "Subscribers")
subNewSeries = Series("New subscribers", [92000, 104000, 88000, 121000, 137000])
subCancelSeries = Series("Cancellations", [31000, 28000, 34000, 29000, 26000])
genreSection = Card([genreHeader, genreChart], "sunk", "column", "m")
genreHeader = CardHeader("Genre performance", "Watch time by genre")
genreChart = BarChart(["Drama", "Comedy", "Documentary", "Action", "Reality", "Kids"], [genreSeries])
genreSeries = Series("Hours (M)", [128, 97, 84, 76, 58, 45])
deliverySection = Card([deliveryHeader, deliveryTable], "sunk", "column", "m")
deliveryHeader = CardHeader("Delivery health by region", "Availability and buffering")
deliveryTable = Table([regionCol, availabilityCol, bufferingCol, statusCol])
regionCol = Col("Region", ["North America", "Europe", "Asia Pacific", "Latin America"])
availabilityCol = Col("Availability", ["99.99%", "99.95%", "99.82%", "99.61%"])
bufferingCol = Col("Buffering rate", ["1.2%", "2.1%", "3.4%", "4.8%"])
statusCol = Col("Status", ["Healthy", "Healthy", "Degraded", "At risk"])
recommendationsSection = Card([recommendationsHeader, recommendationsChart], "sunk", "column", "m")
recommendationsHeader = CardHeader("Recommendation clicks", "CTR last 7 days")
recommendationsChart = LineChart(["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], [recSeries], "linear", "Day", "Click-through rate")
recSeries = Series("CTR", [7.8, 8.1, 8.4, 8.2, 8.7, 9.1, 8.7])
searchesSection = Card([searchesHeader, searchesTable], "sunk", "column", "m")
searchesHeader = CardHeader("Searches without playback", "Top queries that ended with no title played")
searchesTable = Table([queryCol, volumeCol])
queryCol = Col("Search query", ["\"the bear\"", "\"black mirror\"", "\"true crime\"", "\"dune part two\"", "\"anime\""])
volumeCol = Col("Count", ["8,342", "6,120", "5,874", "4,291", "3,127"])
revenueSection = Card([revenueHeader, revenuePie], "sunk", "column", "m")
revenueHeader = CardHeader("Revenue by plan", "Share of MRR")
revenuePie = PieChart(["Premium", "Standard", "Basic", "Ads"], [46, 33, 15, 6], "donut")
deviceSection = Card([deviceHeader, devicePie], "sunk", "column", "m")
deviceHeader = CardHeader("Viewing by device", "Share of watch time")
devicePie = PieChart(["Smart TV", "Mobile", "Tablet", "Web", "Game console"], [38, 29, 14, 11, 8])
releasesSection = Card([releasesHeader, releasesTable], "sunk", "column", "m")
releasesHeader = CardHeader("Releases this month", "Coming soon")
releasesTable = Table([releaseTitleCol, releaseDateCol, releaseTypeCol])
releaseTitleCol = Col("Title", ["Neon Horizon", "The Long Way Home", "Lighthouse Keeper", "K-pop: Origins", "Deep Ocean Live"])
releaseDateCol = Col("Date", ["Jul 12", "Jul 15", "Jul 18", "Jul 22", "Jul 26"])
releaseTypeCol = Col("Type", ["Film", "Series", "Film", "Docu-series", "Live event"])
expiringSection = Card([expiringHeader, expiringTable], "sunk", "column", "m")
expiringHeader = CardHeader("Licenses expiring soon", "Next 90 days")
expiringTable = Table([licenseTitleCol, rightsCol, expiresCol])
licenseTitleCol = Col("Title", ["Classic Westerns", "The Office", "80s Hits", "Studio Ghibli Classics", "NFL Archive"])
rightsCol = Col("Rights", ["SVOD", "SVOD", "Music", "SVOD", "Live & VOD"])
expiresCol = Col("Expires", ["Aug 04", "Aug 19", "Sep 02", "Sep 15", "Sep 28"])
flagsSection = Card([flagsHeader, flagsTable], "sunk", "column", "m")
flagsHeader = CardHeader("Feature flags", "Rollout status")
flagsTable = Table([flagCol, flagStateCol, rolloutCol])
flagCol = Col("Feature", ["New home rail", "4K HDR", "Kids profiles", "Download for offline", "AI recommendations", "Live sports hub"])
flagStateCol = Col("State", ["On", "On", "On", "Off", "On", "Off"])
rolloutCol = Col("Rollout", ["100%", "100%", "75%", "0%", "25%", "0%"])
promoteSection = Card([promoteHeader, promoteForm], "sunk", "column", "m")
promoteHeader = CardHeader("Home screen promotion", "Feature a title in the hero rail")
promoteForm = Form("promote-title", promoteButtons, [promoteField])
promoteField = FormControl("Title", promoteSelect, "The selected title will appear at the top of the home screen")
promoteSelect = Select("title", [promoteTitle1, promoteTitle2, promoteTitle3], "Choose a title")
promoteTitle1 = SelectItem("aurora-falls", "Aurora Falls")
promoteTitle2 = SelectItem("midnight-heist", "Midnight Heist")
promoteTitle3 = SelectItem("last-signal", "The Last Signal")
promoteButtons = Buttons([promoteBtn])
promoteBtn = Button("Promote to home")