f29673cbd8
- New streaming-dashboard.ds: first example combining components + streaming - 4 Card grid with Badge, Button, match, stream receivers - Receives live data from counter, clock, stats streams - Button callbacks (Refresh/Reset) work within stream context - All 8 examples pass regression (47,799 bytes)
62 lines
2.1 KiB
Text
62 lines
2.1 KiB
Text
-- DreamStack Streaming Dashboard
|
|
-- Combines imported components with live stream data.
|
|
-- Receives from 3 upstream apps, renders with Card, Badge, Button.
|
|
--
|
|
-- Run with:
|
|
-- Tab 1: cargo run -p ds-stream
|
|
-- Tab 2: dreamstack stream examples/streaming-counter.ds --port 3000
|
|
-- Tab 3: dreamstack stream examples/streaming-clock.ds --port 3002
|
|
-- Tab 4: dreamstack stream examples/streaming-stats.ds --port 3003
|
|
-- Tab 5: dreamstack build examples/streaming-dashboard.ds -o /tmp/dashboard
|
|
|
|
import { Card } from "../registry/components/card"
|
|
import { Badge } from "../registry/components/badge"
|
|
import { Button } from "../registry/components/button"
|
|
|
|
-- Connect to upstream streams
|
|
let counter = stream from "ws://localhost:9100/stream/counter"
|
|
let clock = stream from "ws://localhost:9100/stream/clock"
|
|
let stats = stream from "ws://localhost:9100/stream/stats"
|
|
|
|
-- Local state
|
|
let refreshCount = 0
|
|
let theme = "dark"
|
|
|
|
view main = column [
|
|
text "Signal Dashboard" { variant: "title" }
|
|
text "Live streaming from 3 DreamStack apps" { variant: "subtitle" }
|
|
|
|
row [
|
|
Card { title: "Counter", subtitle: "real-time count" } [
|
|
text "Count: {counter.count}"
|
|
text "Doubled: {counter.doubled}"
|
|
Badge { label: "LIVE", variant: "success" }
|
|
]
|
|
|
|
Card { title: "Clock", subtitle: "streaming time" } [
|
|
text "{clock.hours}:{clock.minutes}:{clock.seconds}"
|
|
Badge { label: "TICKING", variant: "info" }
|
|
]
|
|
]
|
|
|
|
row [
|
|
Card { title: "Statistics", subtitle: "aggregated data" } [
|
|
text "Samples: {stats.total}"
|
|
text "Average: {stats.average}"
|
|
text "Max: {stats.max}"
|
|
Badge { label: "TRACKING", variant: "warning" }
|
|
]
|
|
|
|
Card { title: "Controls", subtitle: "dashboard actions" } [
|
|
text "Refreshes: {refreshCount}"
|
|
row [
|
|
Button { label: "Refresh", onClick: refreshCount += 1, variant: "primary" }
|
|
Button { label: "Reset", onClick: refreshCount = 0, variant: "ghost" }
|
|
]
|
|
match theme
|
|
"dark" -> Badge { label: "Dark Mode", variant: "info" }
|
|
"light" -> Badge { label: "Light Mode", variant: "warning" }
|
|
_ -> Badge { label: "System", variant: "info" }
|
|
]
|
|
]
|
|
]
|