Dashboard — Real-Time Analytics

A live analytics dashboard ("Nexus Analytics"). Streaming data updates four widgets every two seconds, KPI stat cards recompute on each tick, and widgets can be toggled on or off from the settings menu. A faithful port of the glyx-design-kit dashboard template to Glyx.

Mode: JS-only dev (runs on the prebuilt glyx-runner — no Rust compile). Demonstrates: @glyx-dev/charts, @glyx-dev/design, dialog, fs, theming, realtime state, CSV export

Run it

# one-time: build + cache the JS-only runner
glyx runtime build
 
cd examples/dashboard
glyx dev

Features

KPI stat cards: Total Revenue, Active Users, System Errors, Avg Session (with % change)
Four streaming chart widgets: Revenue (area), Active Users (line), Error Rate (bar), Device Distribution (donut)
Pause / Resume the live data stream
Widget settings popover to show / hide each chart
Export the current time-series to CSV (save dialog via dialog + fs)
Light / dark theme toggle (runtime-switchable via ThemeProvider)
Responsive 1 / 2 / 4-column grid via useWindowSize

Key code

Real-time data

function useRealtimeData() {
  const [timeseries, setTimeseries] = useState(genInitial);
  const [isPaused, setIsPaused] = useState(false);
 
  useEffect(() => {
    if (isPaused) return;
    const id = setInterval(() => {
      setTimeseries((prev) => {
        const last = prev[prev.length - 1];
        const next = [...prev.slice(1)];
        next.push({
          timestamp: fmtTime(new Date()),
          revenue:   /* random walk */,
          users:     /* random walk */,
          errors:    /* random walk */,
        });
        return next;
      });
    }, 3000);
    return () => clearInterval(id);
  }, [isPaused]);
}

Charts

import { LineChart, BarChart, PieChart, AreaChart } from '@glyx-dev/charts'
 
<AreaChart  data={revenue} width={w} height={260} color="#38bdf8" />
<LineChart  data={users}    width={w} height={260} color="#34d399" showDots={false} />
<BarChart   data={errors}   width={w} height={260} color="#818cf8" />
<PieChart  data={devices}   width={w} height={260} innerRadius={0.5} />

All charts take data as an array of { x, y } (per-item color overrides are supported).

CSV export

import { fs, dialog } from '@glyx-dev/react'
 
async function exportToCSV(filename, data) {
  const path = await dialog.saveFile({
    defaultName: `${filename}.csv`,
    filters: [{ name: 'CSV', extensions: ['csv'] }],
  })
  if (!path) return
  await fs.writeFile(path, buildCSV(data))
}

The JS-only runner is not a browser, so there is no Blob / DOM download — export uses the native save dialog (dialog) and writes the file with fs.

Runtime theme toggle

function Root() {
  const [scheme, setScheme] = useState('dark');
  return (
    <ThemeProvider colorScheme={scheme}>
      <Dashboard onToggleTheme={() => setScheme(s => s === 'dark' ? 'light' : 'dark')} />
    </ThemeProvider>
  );
}

Source

Browse the full source on GitHub: glyx-dev/glyx · examples/dashboard (opens in a new tab)

glyx.config.json

{
  "window": { "title": "Nexus Analytics", "width": 1280, "height": 800, "renderMode": "skia" },
  "capabilities": { "fs": { "read": [], "write": ["**"] }, "dialog": true, "db": false, "system": false, "battery": false },
  "dev": { "entry": "src/app.jsx", "output": "dist/app.js", "watch": ["src"] }
}

Tasks Files