Example: Analytics Dashboard

A realistic analytics dashboard with KPI metrics, a time-period selector, a sortable DataGrid, and a Plotly bar chart. See examples/data_dashboard.py in the repo for the full runnable file.

---

data_dashboard.py

import fluxui as ui

try:
    import plotly.graph_objects as go
    HAS_PLOTLY = True
except ImportError:
    HAS_PLOTLY = False

app = ui.App("Analytics Dashboard")

# ── Sample data ──────────────────────────────────────────────────────────────

METRICS = {
    "7d":  {"users": "1,234",  "revenue": "$12,450",  "conversion": "3.2%", "uptime": "99.9%",
            "u_delta": "+8%",  "r_delta": "+5.1%",    "c_delta": "+0.3%",   "up_delta": ""},
    "30d": {"users": "4,891",  "revenue": "$48,200",  "conversion": "3.5%", "uptime": "99.7%",
            "u_delta": "+12%", "r_delta": "+9.2%",    "c_delta": "+0.6%",   "up_delta": ""},
    "90d": {"users": "12,443", "revenue": "$134,600", "conversion": "3.8%", "uptime": "99.8%",
            "u_delta": "+22%", "r_delta": "+18.4%",   "c_delta": "+1.1%",   "up_delta": ""},
}

USERS = [
    {"name": "Alice Martin",  "email": "alice@example.com",  "status": "Active",   "revenue": "$4,200"},
    {"name": "Bob Chen",      "email": "bob@example.com",    "status": "Active",   "revenue": "$2,890"},
    {"name": "Carol Davis",   "email": "carol@example.com",  "status": "Inactive", "revenue": "$1,100"},
    {"name": "David Kim",     "email": "david@example.com",  "status": "Active",   "revenue": "$5,670"},
    {"name": "Eve Johnson",   "email": "eve@example.com",    "status": "Active",   "revenue": "$3,450"},
    {"name": "Frank Lee",     "email": "frank@example.com",  "status": "Inactive", "revenue": "$890"},
    {"name": "Grace Park",    "email": "grace@example.com",  "status": "Active",   "revenue": "$6,120"},
    {"name": "Henry Brown",   "email": "henry@example.com",  "status": "Active",   "revenue": "$2,340"},
    {"name": "Iris Wilson",   "email": "iris@example.com",   "status": "Active",   "revenue": "$4,780"},
    {"name": "Jack Taylor",   "email": "jack@example.com",   "status": "Inactive", "revenue": "$1,230"},
]

REVENUE_BY_DAY = {
    "7d":  {"days": ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],
            "vals": [1200, 1450, 980, 1670, 2100, 1890, 1560]},
    "30d": {"days": [f"Week {i}" for i in range(1, 5)],
            "vals": [9800, 12400, 11200, 14800]},
    "90d": {"days": ["Jan", "Feb", "Mar"],
            "vals": [38000, 44200, 52400]},
}


def make_chart(period: str):
    if not HAS_PLOTLY:
        return None
    d = REVENUE_BY_DAY[period]
    fig = go.Figure(go.Bar(x=d["days"], y=d["vals"], marker_color="#d4a44a"))
    fig.update_layout(
        title=f"Revenue — last {period}",
        margin=dict(t=50, b=30, l=40, r=20),
        paper_bgcolor="rgba(0,0,0,0)",
        plot_bgcolor="rgba(0,0,0,0)",
        font=dict(family="Inter, sans-serif"),
    )
    return fig


# ── Page ─────────────────────────────────────────────────────────────────────

@app.page("/")
def dashboard(session):
    period    = ui.state("30d")
    dark_mode = ui.state(False)

    async def toggle_theme(v):
        dark_mode.set(v)
        await session.set_theme("dark" if v else "light")

    # ── Nav ──────────────────────────────────────────────────────────────
    with ui.NavMenu(brand="Analytics"):
        ui.NavItem("Dashboard", href="/", active=True, icon="📊")
        ui.NavItem("Reports",   href="/reports",       icon="📈")
        ui.NavItem("Settings",  href="/settings",      icon="⚙️")
        ui.Switch("Dark mode", checked=dark_mode, on_change=toggle_theme)

    with ui.Column(gap="var(--s-6)"):
        # ── Header + period selector ─────────────────────────────────────
        with ui.Row(justify="space-between", align="center"):
            ui.Heading("Overview", level=1)
            ui.Select(
                label="",
                options=[
                    {"label": "Last 7 days",  "value": "7d"},
                    {"label": "Last 30 days", "value": "30d"},
                    {"label": "Last 90 days", "value": "90d"},
                ],
                value=period,
                on_change=period.set,
            )

        # ── KPI cards ────────────────────────────────────────────────────
        def m():
            return METRICS[period.value]

        with ui.Grid(cols=4, gap="var(--s-4)"):
            ui.Metric(label="Users",      value=lambda: m()["users"],
                      delta=lambda: m()["u_delta"])
            ui.Metric(label="Revenue",    value=lambda: m()["revenue"],
                      delta=lambda: m()["r_delta"])
            ui.Metric(label="Conversion", value=lambda: m()["conversion"],
                      delta=lambda: m()["c_delta"])
            ui.Metric(label="Uptime",     value=lambda: m()["uptime"],
                      delta=lambda: m()["up_delta"])

        # ── Chart ────────────────────────────────────────────────────────
        if HAS_PLOTLY:
            with ui.Card(title="Revenue by day"):
                ui.Chart(lambda: make_chart(period.value), height="320px")
        else:
            ui.Alert(
                "Install plotly for the revenue chart: pip install 'fluxui[charts]'",
                variant="info",
            )

        # ── User DataGrid ─────────────────────────────────────────────────
        with ui.Card(title="Top users"):
            ui.DataGrid(
                data=USERS,
                columns=[
                    {"key": "name",    "label": "Name",    "sortable": True},
                    {"key": "email",   "label": "Email"},
                    {"key": "status",  "label": "Status",  "sortable": True},
                    {"key": "revenue", "label": "Revenue", "sortable": True},
                ],
                page_size=10,
            )


if __name__ == "__main__":
    app.run(port=8000)

---

Run it

pip install "fluxui[charts]"
python data_dashboard.py

The chart requires Plotly (fluxui[charts]). Without it, an informational alert is shown instead and all other widgets still work.