diff --git a/examples/streaming-dashboard.ds b/examples/streaming-dashboard.ds new file mode 100644 index 0000000..128a75c --- /dev/null +++ b/examples/streaming-dashboard.ds @@ -0,0 +1,62 @@ +-- 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" } + ] + ] +]