# Dashboard & Analytics Components Components for building enterprise dashboards: layout shell, navigation, data tables, metrics, and chart integration. - [Dashboard Shell](#dashboard-shell) - [Dark Mode Toggle](#dark-mode-toggle) - [Color Theme Switching](#color-theme-switching) - [Table](#table) - [DataGrid with Sorting](#datagrid-with-sorting) - [Stat Card](#stat-card) - [Metric Grid](#metric-grid) - [Chart Shell](#chart-shell) - [Chart (PhiaChart)](#chart-phiachart) --- ## Dashboard Shell Full-page layout with CSS Grid sidebar + main content. Mobile drawer auto-closes on `md:` breakpoint. ```heex <.shell> <:topbar> <.topbar> <:brand> MyApp <:actions> <.dark_mode_toggle id="theme-toggle" /> <.dropdown_menu id="user-menu"> <%!-- user avatar menu --%> <.mobile_sidebar_toggle /> <:sidebar> <.sidebar> <:brand> <.icon name="layers" /> MyApp <:nav_items> <.sidebar_item href={~p"/dashboard"} active={@current_path == "/dashboard"}> <.icon name="layout-dashboard" /> Dashboard <.sidebar_item href={~p"/analytics"} active={@current_path == "/analytics"}> <.icon name="bar-chart-2" /> Analytics <.sidebar_item href={~p"/users"} active={@current_path == "/users"}> <.icon name="users" /> Users <.sidebar_item href={~p"/reports"} active={@current_path == "/reports"}> <.icon name="file-text" /> Reports <.sidebar_item href={~p"/settings"} active={@current_path == "/settings"}> <.icon name="settings" /> Settings <:footer> <.sidebar_item href={~p"/help"}> <.icon name="help-circle" /> Help & Docs

<%= @inner_content %>

``` ### Embedding in a LiveView layout ```elixir # lib/my_app_web/layouts/dashboard.html.heex <.shell> <:topbar>… <:sidebar>…

<%= @inner_content %>

``` ### With breadcrumb in topbar ```heex <.topbar> <:brand> <.breadcrumb> <.breadcrumb_list> <.breadcrumb_item> <.breadcrumb_link navigate={~p"/dashboard"}>Dashboard <.breadcrumb_separator /> <.breadcrumb_item> <.breadcrumb_page><%= @page_title %> <:actions> <.dark_mode_toggle id="theme-toggle" /> ``` --- ## Dark Mode Toggle Toggles `.dark` class on ``, persists preference in `localStorage`, respects `prefers-color-scheme` on first load. ```heex <.dark_mode_toggle id="dark-mode-toggle" /> ``` ### With custom label (via class) ```heex

<.dark_mode_toggle id="theme-btn" />

``` ### Prevent FOUC Add this script **before** `` in your `root.html.heex`: ```html ``` ### TailwindCSS v4 setup Add to your `theme.css`: ```css @custom-variant dark (&:where(.dark, .dark *)); ``` Then use `dark:` utilities in your components: ```html

…

``` ### Required hook ```javascript import PhiaDarkMode from "./phia_hooks/dark_mode" ``` --- ## Color Theme Switching PhiaUI includes 8 built-in OKLCH color presets. The CSS-first theme system uses `data-phia-theme` attribute selectors — activating a theme is a single `setAttribute` call with zero runtime overhead. ### Setup Generate the multi-theme CSS file and auto-import it: ```bash mix phia.theme install ``` This creates `assets/css/phia-themes.css` and injects `@import "./phia-themes.css";` into your `app.css`. ### Available presets | Preset | `data-phia-theme` | |--------|------------------| | Zinc (default) | `zinc` | | Slate | `slate` | | Blue | `blue` | | Rose | `rose` | | Orange | `orange` | | Green | `green` | | Violet | `violet` | | Neutral | `neutral` | ### Activate a preset in HTML ```heex <%!-- Entire app uses blue theme --%> ``` ### Scoped to a section via ThemeProvider ```heex <%!-- Only this section uses the rose preset --%> <.theme_provider theme={:rose} class="p-4 rounded-lg border"> <.button>Rose Button <.badge variant="default">Active ``` ### Runtime switching with PhiaTheme hook The `PhiaTheme` hook lets users switch presets without a page reload. Works with buttons and selects. **Select dropdown:** ```heex ``` **Button group:** ```heex <.button_group> <.button phx-hook="PhiaTheme" id="t-zinc" data-theme="zinc" variant="outline" size="sm">Zinc <.button phx-hook="PhiaTheme" id="t-blue" data-theme="blue" variant="outline" size="sm">Blue <.button phx-hook="PhiaTheme" id="t-rose" data-theme="rose" variant="outline" size="sm">Rose ``` The hook persists the selection to `localStorage['phia-color-theme']` and dispatches a `phia:color-theme-changed` CustomEvent so other hooks (e.g. `PhiaChart`) can re-render with new colors. ### Required hook ```javascript import PhiaTheme from "./phia_hooks/theme" let liveSocket = new LiveSocket("/live", Socket, { hooks: { PhiaTheme, PhiaDarkMode, /* ... */ } }) ``` --- ## Table Streams-compatible data table. The body uses `phx-update="stream"` for O(1) row updates. ```heex <.table> <.table_header> <.table_row> <.table_head>Customer <.table_head>Status <.table_head>Amount <.table_head class="text-right">Actions <.table_body> <.table_row :for={{dom_id, row} <- @streams.orders} id={dom_id}> <.table_cell class="font-medium"><%= row.customer_name %> <.table_cell> <.badge variant={badge_variant(row.status)}><%= row.status %> <.table_cell><%= Number.Currency.number_to_currency(row.amount) %> <.table_cell class="text-right"> <.dropdown_menu id={"actions-#{dom_id}"}> <%!-- actions --%> <.table_footer> <.table_row> <.table_head colspan="2">Total <.table_head><%= @total_amount %> <.table_head /> ``` ### With caption ```heex <.table> <.table_caption>Orders for November 2024 <%!-- header + body --%> ``` --- ## DataGrid with Sorting Extended table with clickable column headers for server-side sorting. Streams-compatible. ```heex <.data_grid> <.data_grid_head sort_key="name" sort_dir={if @sort_key == "name", do: @sort_dir, else: :none} on_sort="sort" > Name <.data_grid_head sort_key="revenue" sort_dir={if @sort_key == "revenue", do: @sort_dir, else: :none} on_sort="sort" > Revenue <.data_grid_head>Actions <.data_grid_body id="grid-body" phx-update="stream"> <.data_grid_row :for={{dom_id, row} <- @streams.rows} id={dom_id}> <.data_grid_cell><%= row.name %> <.data_grid_cell class="tabular-nums"> <%= Number.Currency.number_to_currency(row.revenue) %> <.data_grid_cell> <.button variant="ghost" size="sm" phx-click="view" phx-value-id={row.id}>View ``` ### LiveView sort handler ```elixir def mount(_params, _session, socket) do {:ok, socket |> assign(sort_key: "name", sort_dir: :asc) |> stream(:rows, load_rows("name", :asc))} end def handle_event("sort", %{"key" => key, "dir" => dir}, socket) do sort_dir = String.to_existing_atom(dir) rows = load_rows(key, sort_dir) {:noreply, socket |> assign(sort_key: key, sort_dir: sort_dir) |> stream(:rows, rows, reset: true)} end defp load_rows(key, dir) do Reports.list_rows(order_by: [{dir, String.to_atom(key)}]) end ``` ### Sort direction atoms | `sort_dir` | Icon shown | Sends `dir` | |------------|------------|-------------| | `:none` | ↕ (chevrons-up-down) | `"asc"` | | `:asc` | ↑ (chevron-up) | `"desc"` | | `:desc` | ↓ (chevron-down) | `"none"` | --- ## Stat Card KPI card with trend indicator, optional icon slot, and footer slot. ```heex <.stat_card title="Monthly Revenue" value="$48,290" trend="up" trend_value="+12.5%" description="vs last month" > <:icon><.icon name="dollar-sign" size="lg" class="text-primary" /> ``` ### All trend variants ```heex <.stat_card title="Revenue" value="$48,290" trend="up" trend_value="+12.5%" description="vs last month" /> <.stat_card title="Churn Rate" value="3.1%" trend="down" trend_value="-0.4%" description="this month" /> <.stat_card title="Avg Session" value="4m 32s" trend="neutral" trend_value="0%" description="no change" /> ``` ### With footer slot ```heex <.stat_card title="Active Users" value="2,840" trend="up" trend_value="+8.2%"> <:footer> <.button variant="ghost" size="sm" phx-click="view-users"> View all users <.icon name="arrow-right" size="sm" /> ``` --- ## Metric Grid Responsive KPI grid for multiple stat cards. ```heex <.metric_grid cols={4}> <.stat_card title="Revenue" value="$48,290" trend="up" trend_value="+12.5%" description="vs last month"> <:icon><.icon name="dollar-sign" size="lg" /> <.stat_card title="Active Users" value="2,840" trend="up" trend_value="+8.2%" description="daily active" /> <.stat_card title="Churn Rate" value="3.1%" trend="down" trend_value="-0.4%" description="this month" /> <.stat_card title="Avg Session" value="4m 32s" trend="neutral" trend_value="0%" description="no change" /> ``` | `cols` | Breakpoint | Layout | |--------|-----------|--------| | 1 | any | 1-col always | | 2 | sm+ | 2-col | | 3 | sm+/lg+ | 1 → 2 → 3 | | 4 | sm+/lg+ | 1 → 2 → 4 | --- ## Chart Shell Titled card container for any chart library. Compatible with VegaLite, Chart.js, ECharts, D3. ```heex <.chart_shell title="Monthly Revenue" description="MRR for the past 12 months" period="Jan–Dec 2024" min_height="320px" > <:actions> <.button variant="outline" size="sm"> <.icon name="download" size="sm" /> Export <%!-- Drop any chart canvas/div here --%>