root = Card([header, kpiSection, mainRow, contentRow, controlRow], "clear", "column", "xl")
header = CardHeader("Streaming Operations", "Live overview")
kpiSection = Card([liveCard, bufferCard, recCard, searchCard], "clear", "row", "m")
liveCard = Card([liveLabel, liveValue], "sunk", "column")
liveLabel = TextContent("Viewers watching now", "small")
liveValue = Heading("48,201", "h2")
bufferCard = Card([bufferLabel, bufferValue, bufferTag], "sunk", "column")
bufferLabel = TextContent("Buffering rate", "small")
bufferValue = Heading("1.8%", "h2")
bufferTag = Tag("Healthy", null, "sm", "success")
recCard = Card([recLabel, recValue], "sunk", "column")
recLabel = TextContent("Recommendation click-through", "small")
recValue = Heading("12.6%", "h2")
searchCard = Card([searchLabel, searchValue], "sunk", "column")
searchLabel = TextContent("Searches without playback", "small")
searchValue = Heading("3,412", "h2")
mainRow = Card([chartsLeft, chartsRight], "clear", "row", "l")
chartsLeft = Card([mostWatchedCard, watchTimeCard, subsCard], "clear", "column", "l")
mostWatchedCard = Card([mostWatchedHeader, titleChart], "card", "column")
mostWatchedHeader = CardHeader("Most-watched titles", "Hours this week")
titleChart = HorizontalBarChart(titles, [titleSeries])
titles = ["House of Dragons", "The Last Signal", "Mindhunters", "Queen of the Mountain", "Blue Horizon"]
titleSeries = Series("Hours watched", [28.4, 22.1, 18.7, 15.2, 12.9])
watchTimeCard = Card([watchHeader, watchChart], "card", "column")
watchHeader = CardHeader("Watch time", "Past month")
watchChart = AreaChart(weeks, [watchSeries])
weeks = ["W1", "W2", "W3", "W4"]
watchSeries = Series("Hours (millions)", [142, 153, 149, 168])
subsCard = Card([subsHeader, subsChart], "card", "column")
subsHeader = CardHeader("Subscribers vs cancellations", "Monthly")
subsChart = BarChart(months, [subSeries, cancelsSeries], "grouped")
months = ["Jan", "Feb", "Mar", "Apr", "May"]
subSeries = Series("New subscribers", [820, 940, 1010, 1130, 1280])
cancelsSeries = Series("Cancellations", [310, 290, 335, 360, 345])
chartsRight = Card([genreCard, revenueCard, deviceCard], "clear", "column", "l")
genreCard = Card([genreHeader, genreChart], "card", "column")
genreHeader = CardHeader("Performance by genre", "Hours · Retention · Rating")
genreChart = RadarChart(genres, [genreHoursSeries, genreRetentionSeries, genreRatingSeries])
genres = ["Drama", "Comedy", "Documentary", "Sci-Fi", "Kids"]
genreHoursSeries = Series("Hours", [38, 24, 21, 33, 19])
genreRetentionSeries = Series("Retention", [72, 65, 81, 69, 58])
genreRatingSeries = Series("Rating", [8.4, 7.8, 8.9, 8.1, 7.2])
revenueCard = Card([revHeader, revChart], "card", "column")
revHeader = CardHeader("Revenue split", "By plan")
revChart = PieChart(plans, planRevenue, "donut")
plans = ["Premium", "Standard", "Basic", "Ads"]
planRevenue = [4.8, 3.2, 1.6, 0.9]
deviceCard = Card([deviceHeader, deviceChart], "card", "column")
deviceHeader = CardHeader("Viewing by device", "Share of watch time")
deviceChart = PieChart(devices, deviceShare)
devices = ["Smart TV", "Mobile", "Tablet", "Web"]
deviceShare = [46, 34, 12, 8]
contentRow = Card([releaseCard, licenseCard, deliveryCard, featureCard], "clear", "row", "m")
releaseCard = Card([releaseHeader, releaseList], "card", "column")
releaseHeader = CardHeader("Releases this month")
releaseList = ListBlock([release1, release2, release3, release4])
release1 = ListItem("House of Dragons: Season 2", "Premieres May 14")
release2 = ListItem("The Last Signal", "Premieres May 18")
release3 = ListItem("Comedy Central Live", "Premieres May 21")
release4 = ListItem("True Crime: Uncut", "Premieres May 28")
licenseCard = Card([licenseHeader, licenseTable], "card", "column")
licenseHeader = CardHeader("Licenses expiring soon")
licenseTable = Table([licenseTitleCol, licenseRegionCol, licenseExpiryCol, licenseRiskCol])
licenseTitleCol = Col("Title", ["Blue Horizon", "Mindhunters", "The Quiet Place"])
licenseRegionCol = Col("Region", ["US", "EU", "Global"])
licenseExpiryCol = Col("Expires", ["May 22", "Jun 01", "Jun 12"])
licenseRiskCol = Col("Risk", ["High", "Medium", "Low"])
deliveryCard = Card([deliveryHeader, deliveryTable], "card", "column")
deliveryHeader = CardHeader("Delivery health", "By region")
deliveryTable = Table([delivRegionCol, delivLatencyCol, delivErrorCol, delivStatusCol])
delivRegionCol = Col("Region", ["North America", "Europe", "Asia-Pacific", "LATAM"])
delivLatencyCol = Col("Latency", ["42 ms", "38 ms", "65 ms", "58 ms"])
delivErrorCol = Col("Error rate", ["0.2%", "0.3%", "0.9%", "1.1%"])
delivStatusCol = Col("Health", ["Good", "Good", "Degraded", "Watch"])
featureCard = Card([featureHeader, featureTable], "card", "column")
featureHeader = CardHeader("Feature flags")
featureTable = Table([flagNameCol, flagStateCol])
flagNameCol = Col("Feature", ["4K HDR", "Spatial Audio", "Offline Downloads", "Live Sports"])
flagStateCol = Col("State", ["On", "On", "Off", "Beta"])
controlRow = Card([regionFocusCard, promoteCard], "card", "row", "l")
regionFocusCard = Card([regionHeader, regionForm], "card", "column")
regionHeader = CardHeader("Focus on a region", "Filter the operations view")
regionForm = Form("focus-region", regionButtons, [regionField])
regionField = FormControl("Region", regionSelect)
regionSelect = Select("region", [regionNorth, regionEU, regionAsia, regionLatam], "Select a region")
regionButtons = Buttons([regionApplyButton])
regionApplyButton = Button("Apply focus", null, "primary")
regionNorth = SelectItem("na", "North America")
regionEU = SelectItem("eu", "Europe")
regionAsia = SelectItem("ap", "Asia-Pacific")
regionLatam = SelectItem("latam", "LATAM")
promoteCard = Card([promoteHeader, promoteForm], "card", "column")
promoteHeader = CardHeader("Promote on home screen")
promoteForm = Form("promote-title", promoteButtons, [promoteField])
promoteField = FormControl("Title", promoteSelect)
promoteSelect = Select("title", [promoteTitle1, promoteTitle2, promoteTitle3], "Select a title")
promoteButtons = Buttons([promoteAction])
promoteAction = Button("Promote title", null, "secondary")
promoteTitle1 = SelectItem("hod", "House of Dragons")
promoteTitle2 = SelectItem("signal", "The Last Signal")
promoteTitle3 = SelectItem("mountain", "Queen of the Mountain")