root = Card([header, statusRow, congestionCard, transitCard, airCard, energyCard, waterCard, incidentsCard, emergencyCard, parkingCard, eventsCard, reportsCard, backlogCard, weatherCard, districtCard, dispatchCard, alertCard, roadworksCard, maintenanceCard], "card", "column", "l")
header = CardHeader("City Operations Center", "Live dashboard · updated just now")
statusRow = Card([statusTitle, congestionTag, transitTag, airTag, incidentTag], "sunk", "row", "m")
statusTitle = TextContent("Live status:", "small-heavy")
congestionTag = Tag("Congestion: High", null, null, "warning")
transitTag = Tag("Transit: 87% on time", null, null, "success")
airTag = Tag("AQI: Moderate", null, null, "info")
incidentTag = Tag("3 critical incidents", null, null, "danger")
congestionCard = Card([congestionHeading, congestionCallout, congestionChart], "sunk")
congestionHeading = Heading("Congestion right now", "h2")
congestionCallout = Callout("warning", "I-5 Northbound slowed", "Average speed 12 mph between exits 4A and 9B. Delays up to 20 minutes.")
congestionChart = HorizontalBarChart(["I-5 N", "HWY 101", "4th Ave", "Market St", "Riverside Dr"], [congestionSeries], "grouped", "MPH", "Corridor")
congestionSeries = Series("Average speed", [12, 19, 8, 26, 31])
transitCard = Card([transitHeading, transitPunctuality, transitTable], "sunk")
transitHeading = Heading("Transit punctuality", "h2")
transitPunctuality = Progress(87, "On-time performance")
transitTable = Table([transitLine, transitOnTime])
transitLine = Col("Line", ["Metro A", "Metro B", "Bus 12", "Bus 44"])
transitOnTime = Col("On time", ["91%", "84%", "88%", "79%"])
airCard = Card([airHeading, airChart], "sunk")
airHeading = Heading("Air quality by district", "h2")
airChart = BarChart(["North", "South", "East", "West", "Central"], [airSeries], "grouped", "District", "AQI")
airSeries = Series("AQI", [42, 58, 35, 71, 64])
energyCard = Card([energyHeading, energyChart], "sunk")
energyHeading = Heading("Energy use — past week", "h2")
energyChart = AreaChart(["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], [energyElectric, energyGas], "natural", "Day", "MWh")
energyElectric = Series("Electricity", [820, 790, 840, 810, 860, 720, 690])
energyGas = Series("Gas", [460, 430, 450, 440, 470, 410, 400])
waterCard = Card([waterHeading, waterUsage, waterNote], "sunk")
waterHeading = Heading("Water use today", "h2")
waterUsage = SingleStackedBarChart(["Used", "Remaining"], [68, 32])
waterNote = TextContent("**1.4M gallons** used · 8% below yesterday at this hour", "small")
incidentsCard = Card([incidentsHeading, incidentsTable], "sunk")
incidentsHeading = Heading("Open incidents", "h2")
incidentsTable = Table([incident, location, severity, district])
incident = Col("Incident", ["Vehicle fire", "Water main break", "Traffic signal outage", "Structure collapse", "Tree down"])
location = Col("Location", ["1200 Oak St", "Pine & 3rd", "Market St / 5th", "422 Maple Ave", "Riverside Park"])
severity = Col("Severity", ["Critical", "Major", "Minor", "Critical", "Minor"])
district = Col("District", ["North", "Central", "Downtown", "East", "West"])
emergencyCard = Card([emergencyHeading, emergencyList], "sunk")
emergencyHeading = Heading("Emergency vehicles deployed", "h2")
emergencyList = ListBlock([emergencyItem1, emergencyItem2, emergencyItem3, emergencyItem4])
emergencyItem1 = ListItem("Engine 7", "Downtown · On scene at 5th & Market")
emergencyItem2 = ListItem("Ambulance A-12", "North · Transport in progress")
emergencyItem3 = ListItem("Truck 3", "East · Responding to tree down")
emergencyItem4 = ListItem("HazMat 2", "Central · Staging at water main break")
parkingCard = Card([parkingHeading, parkingCentral, parkingGrand, parkingHarbor, parkingCity], "sunk")
parkingHeading = Heading("Parking availability — Downtown", "h2")
parkingCentral = Progress(78, "Central Garage · 210/270 used")
parkingGrand = Progress(64, "Grand Plaza · 141/220 used")
parkingHarbor = Progress(91, "Harbor Lot · 120/132 used")
parkingCity = Progress(45, "City Hall Deck · 98/218 used")
eventsCard = Card([eventsHeading, eventsList], "sunk")
eventsHeading = Heading("Public events this weekend", "h2")
eventsList = ListBlock([event1, event2, event3])
event1 = ListItem("Riverside Festival", "Sat 10:00–22:00 · Riverside Park")
event2 = ListItem("Marathon", "Sun 07:00–13:00 · Downtown loop")
event3 = ListItem("Farmers Market", "Sat 08:00–14:00 · Civic Center Plaza")
reportsCard = Card([reportsHeading, reportsList], "sunk")
reportsHeading = Heading("Citizen reports — live", "h2")
reportsList = ListBlock([report1, report2, report3, report4])
report1 = ListItem("Pothole at 14th & K", "Just now · North")
report2 = ListItem("Graffiti on bus shelter", "2 min ago · Central")
report3 = ListItem("Streetlight flickering", "5 min ago · West")
report4 = ListItem("Water accumulation on sidewalk", "11 min ago · East")
backlogCard = Card([backlogHeading, backlogTable], "sunk")
backlogHeading = Heading("Service request backlog", "h2")
backlogTable = Table([backlogCategory, backlogOpen, backlogOldest])
backlogCategory = Col("Category", ["Potholes", "Streetlights", "Parks", "Graffiti", "Drainage"])
backlogOpen = Col("Open", [142, 98, 55, 76, 31])
backlogOldest = Col("Oldest", ["12 days", "9 days", "21 days", "14 days", "6 days"])
weatherCard = Card([weatherHeading, weatherTemp, weatherDetail], "sunk")
weatherHeading = Heading("Current weather", "h2")
weatherTemp = TextContent("72°F · Partly cloudy", "large")
weatherDetail = TextContent("Humidity 45% · Wind 12 mph SW · Rain chance 10%", "small")
districtCard = Card([districtHeading, districtForm], "sunk")
districtHeading = Heading("Focus on a district", "h2")
districtForm = Form("district-focus", districtButtons, [districtSelectField])
districtButtons = Buttons([districtApplyBtn])
districtApplyBtn = Button("Apply filter", null, "primary")
districtSelectField = FormControl("District", districtSelect)
districtSelect = Select("district", [district1, district2, district3, district4, district5], "Choose district")
district1 = SelectItem("north", "North")
district2 = SelectItem("south", "South")
district3 = SelectItem("east", "East")
district4 = SelectItem("west", "West")
district5 = SelectItem("central", "Central")
dispatchCard = Card([dispatchHeading, dispatchForm], "sunk")
dispatchHeading = Heading("Dispatch a crew", "h2")
dispatchForm = Form("dispatch", dispatchButtons, [dispatchIncident, dispatchZone, dispatchCrew])
dispatchButtons = Buttons([dispatchBtn])
dispatchBtn = Button("Dispatch crew")
dispatchIncident = FormControl("Incident", incidentInput)
incidentInput = Input("incident", "e.g. Water main break")
dispatchZone = FormControl("Zone", zoneSelect)
zoneSelect = Select("zone", [zone1, zone2, zone3, zone4, zone5], "Select zone")
zone1 = SelectItem("z-north", "North")
zone2 = SelectItem("z-south", "South")
zone3 = SelectItem("z-east", "East")
zone4 = SelectItem("z-west", "West")
zone5 = SelectItem("z-central", "Central")
dispatchCrew = FormControl("Crew type", crewSelect)
crewSelect = Select("crew", [crewWater, crewTraffic, crewParks, crewRoads], "Select crew")
crewWater = SelectItem("water", "Water")
crewTraffic = SelectItem("traffic", "Traffic")
crewParks = SelectItem("parks", "Parks")
crewRoads = SelectItem("roads", "Roads")
alertCard = Card([alertHeading, alertForm], "sunk")
alertHeading = Heading("Send public alert", "h2")
alertForm = Form("public-alert", alertButtons, [alertMessage, alertAudience])
alertButtons = Buttons([sendAlertBtn])
sendAlertBtn = Button("Send alert", null, "primary")
alertMessage = FormControl("Message", messageArea)
messageArea = TextArea("message", "Write the alert text…", 3)
alertAudience = FormControl("Audience", audienceSelect)
audienceSelect = Select("audience", [audienceAll, audienceDowntown, audienceNorth, audienceEast], "Select audience")
audienceAll = SelectItem("all", "All districts")
audienceDowntown = SelectItem("downtown", "Downtown")
audienceNorth = SelectItem("north", "North")
audienceEast = SelectItem("east", "East")
roadworksCard = Card([roadworksHeading, roadworksTable], "sunk")
roadworksHeading = Heading("Roadworks this month", "h2")
roadworksTable = Table([roadworkRoad, roadworkDistrict, roadworkDates, roadworkImpact])
roadworkRoad = Col("Road", ["Oak St", "5th Ave", "Bridge Rd", "Cedar Ln"])
roadworkDistrict = Col("District", ["North", "Downtown", "West", "East"])
roadworkDates = Col("Dates", ["Oct 3–7", "Oct 10–14", "Oct 17–21", "Oct 24–28"])
roadworkImpact = Col("Impact", ["Lane closure", "Full closure", "Night work", "Sidewalk work"])
maintenanceCard = Card([maintenanceHeading, maintenanceTable], "sunk")
maintenanceHeading = Heading("Infrastructure jobs due", "h2")
maintenanceTable = Table([asset, assetDistrict, assetDue, assetPriority])
asset = Col("Asset", ["Water pump 4", "Traffic signals #22", "Bridge joint C", "Sewer line 12"])
assetDistrict = Col("District", ["Central", "South", "West", "North"])
assetDue = Col("Due", ["Oct 5", "Oct 9", "Oct 15", "Oct 20"])
assetPriority = Col("Priority", ["High", "High", "Medium", "Low"])