root = Card([header, kpiRow, chartsRow1, chartsRow2, tablesRow, bottomRow, flagsPromo])
header = CardHeader("Streaming Operations", "Live overview · North America + EMEA")
kpiRow = Card([kpiHeading, liveGrid], "sunk", "column", "m")
kpiHeading = Heading("Live now", "h3")
liveGrid = Card([viewersCard, bufferingCard, recClicksCard, deadEndsCard], "clear", "row", "m")
viewersCard = Card([viewersTitle, viewersValue], "sunk")
viewersTitle = Tag("Viewers watching", null, null, "info")
viewersValue = TextContent("**1,284,392**", "large-heavy")
bufferingCard = Card([bufferingTitle, bufferingValue], "sunk")
bufferingTitle = Tag("Buffering rate", null, null, "warning")
bufferingValue = TextContent("**1.8%**", "large-heavy")
recClicksCard = Card([recClicksTitle, recClicksValue], "sunk")
recClicksTitle = Tag("Rec. click-through", null, null, "success")
recClicksValue = TextContent("**12.4%**", "large-heavy")
deadEndsCard = Card([deadEndsTitle, deadEndsValue], "sunk")
deadEndsTitle = Tag("Searches w/o playback", null, null, "danger")
deadEndsValue = TextContent("**3,912**", "large-heavy")
chartsRow1 = Card([watchHeading, watchChart, topHeading, topChart], "column", "m")
watchHeading = Heading("Watch time — past month", "h3")
watchChart = LineChart(["Jun 1", "Jun 8", "Jun 15", "Jun 22", "Jun 29"], [watchSeries], "natural", "Date", "Hours (M)")
watchSeries = Series("Watch time", [2.1, 2.4, 2.3, 2.8, 3.1])
topHeading = Heading("Most-watched titles", "h3")
topChart = HorizontalBarChart(["Nightfall", "The Long Arc", "Signal Lost", "Paper Crowns", "Drift City"], [topSeries], "grouped", "Hours (M)", "Title")
topSeries = Series("Hours", [18.4, 15.2, 12.9, 11.3, 9.8])
chartsRow2 = Card([subsHeading, subsChart, genreHeading, genreChart, regionHeading, regionChart], "clear", "row", "m")
subsHeading = Heading("Subscribers vs cancellations", "h3")
subsChart = BarChart(["Jun 1", "Jun 8", "Jun 15", "Jun 22", "Jun 29"], [subsSeries, cancelSeries], "grouped", "Date", "Count")
subsSeries = Series("New subscribers", [8200, 9100, 8800, 10400, 9900])
cancelSeries = Series("Cancellations", [3100, 2900, 3300, 2800, 2600])
genreHeading = Heading("Performance by genre", "h3")
genreChart = BarChart(["Drama", "Comedy", "Sci-Fi", "Doc", "Kids"], [genreSeries], "grouped", "Genre", "Hours (M)")
genreSeries = Series("Hours", [22.1, 14.6, 18.2, 9.4, 11.7])
regionHeading = Heading("Delivery health by region", "h3")
regionChart = RadialChart(["NA", "EU", "APAC", "LATAM", "MEA"], [98, 94, 89, 91, 86])
tablesRow = Card([releasesHeading, releasesList, licensesHeading, licensesList, deviceHeading, deviceChart, revenueHeading, revenueChart], "clear", "row", "m")
releasesHeading = Heading("Releases this month", "h3")
releasesList = ListBlock([release1, release2, release3, release4], "number")
release1 = ListItem("Echoes of Tomorrow", "Drama · Jun 12")
release2 = ListItem("Laugh Track", "Comedy · Jun 18")
release3 = ListItem("Deep Field", "Sci-Fi · Jun 24")
release4 = ListItem("Wild Coast", "Doc · Jun 30")
licensesHeading = Heading("Licenses expiring soon", "h3")
licensesList = ListBlock([license1, license2, license3], "number")
license1 = ListItem("The Long Arc", "Expires Jul 15", null, "Renew")
license2 = ListItem("Paper Crowns", "Expires Jul 22", null, "Renew")
license3 = ListItem("Drift City", "Expires Aug 01", null, "Renew")
deviceHeading = Heading("Viewing by device", "h3")
deviceChart = PieChart(["TV", "Mobile", "Web", "Tablet"], [46, 32, 15, 7], "donut")
revenueHeading = Heading("Revenue by plan", "h3")
revenueChart = PieChart(["Premium", "Standard", "Basic", "Ads"], [48, 31, 14, 7], "donut")
bottomRow = Card([regionHeading2, regionSelect, flagsHeading, flagsList, promoHeading, promoForm], "clear", "row", "m")
regionHeading2 = Heading("Focus on a region", "h3")
regionSelect = Select("region", [regionNA, regionEU, regionAPAC, regionLATAM, regionMEA], "Choose region", null, "North America")
regionNA = SelectItem("na", "North America")
regionEU = SelectItem("eu", "Europe")
regionAPAC = SelectItem("apac", "Asia Pacific")
regionLATAM = SelectItem("latam", "Latin America")
regionMEA = SelectItem("mea", "Middle East & Africa")
flagsHeading = Heading("Feature flags", "h3")
flagsList = ListBlock([flag1, flag2, flag3, flag4], "number")
flag1 = ListItem("4K streaming", "Enabled · all regions")
flag2 = ListItem("Offline downloads", "Enabled · beta")
flag3 = ListItem("New recommendation engine", "Enabled · 25% rollout")
flag4 = ListItem("Kids profile v2", "Disabled")
promoHeading = Heading("Promote a title", "h3")
promoForm = Form("promote", promoButtons, [promoTitleField, promoRegionField])
promoTitleField = FormControl("Title", promoTitleInput)
promoTitleInput = Input("title", "e.g. Nightfall")
promoRegionField = FormControl("Region", promoRegionSelect)
promoRegionSelect = Select("promo_region", [promoNA, promoEU, promoAPAC], "Choose region")
promoNA = SelectItem("na", "North America")
promoEU = SelectItem("eu", "Europe")
promoAPAC = SelectItem("apac", "Asia Pacific")
promoButtons = Buttons([promoBtn])
promoBtn = Button("Promote on home", null, "primary")