WeWeb Dashboard: Build Analytics Dashboards with DataGrid and Charts

In the WeWeb editor, open the Data panel (database icon in the left sidebar) and click + New to create your first collection. Select Supabase as the source, choose your analytics table, and configure the query. For a dashboard showing orders over time, select the 'orders' table, set the fetch mode to Dynamic (fetches on page load), and apply any date filters using the Filter section. Create a second collection for summary statistics — use a Supabase view or RPC (stored procedure) that returns pre-aggregated data (e.g., total revenue, order count by status). In the Supabase SQL editor, create a view: CREATE VIEW dashboard_summary AS SELECT status, COUNT(*) as count, SUM(amount) as total FROM orders GROUP BY status. Then in WeWeb, add a new collection pointing to that view.

1-- Injection point: Supabase Dashboard → SQL Editor
2-- Creates a view for dashboard KPI data
3CREATE OR REPLACE VIEW public.dashboard_summary AS
4SELECT
5  status,
6  COUNT(*) AS order_count,
7  SUM(amount) AS total_revenue,
8  AVG(amount) AS avg_order_value,
9  DATE_TRUNC('day', created_at) AS day
10FROM public.orders
11GROUP BY status, DATE_TRUNC('day', created_at)
12ORDER BY day DESC;

Click the Add panel (+) in the left sidebar, search for 'DataGrid', and drag it onto your dashboard page. Select the DataGrid and open its Settings panel. Under Data, click the plug icon (🔌) next to 'Row data' and bind it to your orders collection: collections['orders'].data. Switch to the Columns tab in DataGrid settings. Click + Add column for each field you want to display. For each column, set: Field (matches your data key, e.g., 'id', 'status', 'amount', 'created_at'), Header name (display label), and optionally a Value formatter for dates or currency. Enable Sortable and Filterable toggles per column. Under Pagination, set Page size to 25 and enable the pagination bar. Under Advanced settings, enable Row virtualization — this is critical for tables with 1,000+ rows as it only renders visible rows in the DOM, dramatically improving performance.

Navigate to Plugins → Extensions → Charts (if not already installed, click Install). After installation, the Charts element appears in the Add panel. Drag a Charts element onto the page. In its Settings panel, you can use Guided mode (simpler, dropdown-based configuration) or Advanced mode (full Chart.js config object). For a line chart of orders over time: select Chart type → Line. In Guided mode, bind the Labels field to a formula extracting dates from your collection: map(collections['dashboardSummary'].data, item => item.day). Bind the Datasets → Data field to: map(collections['dashboardSummary'].data, item => item.order_count). Set a dataset label ('Orders per Day') and choose a line color. In Advanced mode, you can pass a full Chart.js configuration object as a JSON-bound formula — useful for multi-dataset charts or custom tooltips.

1// Injection point: Charts element → Settings → Advanced mode → Config formula
2// Binds a multi-dataset Chart.js config to collection data
3// Paste this as a formula in the Advanced Config field (plug icon)
4return {
5  type: 'line',
6  data: {
7    labels: map(collections['dashboardSummary'].data, item => formatDate(item.day, 'MMM D')),
8    datasets: [
9      {
10        label: 'Order Count',
11        data: map(collections['dashboardSummary'].data, item => item.order_count),
12        borderColor: '#6366f1',
13        backgroundColor: 'rgba(99, 102, 241, 0.1)',
14        tension: 0.4,
15        fill: true
16      },
17      {
18        label: 'Revenue ($)',
19        data: map(collections['dashboardSummary'].data, item => item.total_revenue),
20        borderColor: '#10b981',
21        backgroundColor: 'rgba(16, 185, 129, 0.1)',
22        tension: 0.4,
23        yAxisID: 'y1'
24      }
25    ]
26  },
27  options: {
28    responsive: true,
29    interaction: { mode: 'index', intersect: false },
30    scales: {
31      y: { type: 'linear', display: true, position: 'left' },
32      y1: { type: 'linear', display: true, position: 'right', grid: { drawOnChartArea: false } }
33    }
34  }
35}

KPI cards display a single metric with a label and optional trend indicator. Create page-level variables for each KPI: Data panel → Variables → New → Number → name: 'totalRevenue'. Repeat for 'orderCount', 'avgOrderValue'. On page load, compute these from your collection using a workflow: Trigger → On page load → Action → Change variable value → bind the new value to a formula. For total revenue: reduce(collections['orders'].data, (acc, item) => acc + item.amount, 0). For order count: length(collections['orders'].data). Design a KPI card container with a Text element bound to the variable value (formatted with a formula: '$' + round(totalRevenue, 2)), a label below it ('Total Revenue'), and optionally a trend percentage. Duplicate the card three times and update bindings for each metric. Place all four cards in a horizontal flexbox container with wrap enabled so they stack on mobile.

In the Data panel, select your 'orders' collection and click its settings. Enable the Realtime toggle — this requires Realtime to be enabled for the table in your Supabase project (Supabase Dashboard → Database → Replication → enable for the orders table). Back in WeWeb, go to the workflow editor and add a new workflow with trigger: On realtime - database change. Select your Supabase data source and the orders table. Listen for INSERT, UPDATE, and DELETE events. Add an action: Fetch collection → select 'orders' to refresh the full dataset. Also add Fetch collection for 'dashboardSummary' so your KPI cards and charts update simultaneously. This workflow fires automatically whenever a change is made to the orders table in Supabase, keeping your dashboard live without polling.

Dashboards are more useful with date range and status filters. Add a Date Picker element (Add panel → Date Picker) and a Select element to your dashboard header. Create two page-level variables: 'filterStartDate' (Text) and 'filterStatus' (Text). Bind each input's On change workflow to a 'Change variable value' action that sets the corresponding variable. Then update your 'orders' collection filter: in the collection settings, click the Filter tab → + Add filter → Field: created_at → Condition: is after → Value: bind to filterStartDate variable → enable 'Ignore if empty'. Add another filter for status: Field: status → Condition: equals → Value: filterStatus → Ignore if empty. Add a 'Fetch collection' action to both On change workflows to reload data when filters change.