This document provides a high-level introduction to the dashboard system, a modular data visualization platform that supports multiple data sources (PostgreSQL, MySQL, HTTP, and Merico Metric System), responsive layouts with breakpoints, and an extensible plugin architecture for custom visualizations. The system operates in two modes: read-only for data consumption and editor mode for dashboard creation and configuration.
For details about the monorepo structure and workspace configuration, see Monorepo Structure. For build system and deployment details, see Build System and Deployment. For getting started with development, see Getting Started.
Sources: dashboard/package.json1-158 website/package.json1-89 api/package.json1-95 package.json1-59
The dashboard system enables users to:
Sources: dashboard/src/types/dashboard.ts1-109 website/src/api-caller/dashboard.tsx1-64
The codebase is organized as a Yarn workspaces monorepo with four main packages and shared build tooling:
Sources: package.json1-59 dashboard/package.json1-158 settings-form/package.json1-85 website/package.json1-89 api/package.json1-95
| Package | Location | Purpose | Key Exports |
|---|---|---|---|
@devtable/dashboard | dashboard/ | Core dashboard component library | DashboardEditor, ReadOnlyDashboard, MobX models |
@devtable/settings-form | settings-form/ | Admin UI components | DataSourceList, SQLSnippetList, AccountList, APIKeyList |
@devtable/website | website/ | Main React application | Routes, authentication, dashboard management |
@devtable/api | api/ | Node.js backend | REST API, query execution, data sources |
Sources: dashboard/package.json1-158 settings-form/package.json1-85 website/package.json1-89 api/package.json1-95
The system follows a client-server architecture with reactive state management on the frontend and service-oriented design on the backend:
Sources: website/package.json10-79 dashboard/package.json45-128 api/package.json36-67
The dashboard system operates in two distinct modes sharing the same core data models:
Mode comparison:
| Aspect | Read-Only Mode | Editor Mode |
|---|---|---|
| Component | ReadOnlyDashboard | DashboardEditor |
| Purpose | Display data with filters | Create/modify dashboards |
| User Actions | Filter, view, screenshot | Add panels, edit queries, configure layouts |
| Persistence | Read-only | Saves changes via API |
| URL Pattern | /dashboard/:id | /dashboard/:id/edit |
Sources: dashboard/src/types/dashboard.ts38-41 website/src/api-caller/dashboard.tsx1-64
The system supports querying data from multiple source types with a unified query interface:
Supported data source types:
| Type | Configuration | Query Language | Use Case |
|---|---|---|---|
| PostgreSQL | Host, port, database, credentials | SQL with template variables | Relational data queries |
| MySQL | Host, port, database, credentials | SQL with template variables | Relational data queries |
| HTTP | URL, headers, authentication | HTTP requests with payload | REST API integration |
| Merico Metric System | Filters, groupBys, timeQuery | Metric expressions | Analytics and metrics |
Sources: api/package.json36-67 dashboard/package.json45-128
Key dependencies:
Sources: dashboard/package.json45-128 website/package.json10-79 package.json13-51
Key dependencies:
Sources: api/package.json36-67
The project uses Nx for monorepo task orchestration and Vite for frontend builds:
Build commands:
| Command | Purpose | Cache |
|---|---|---|
nx build dashboard | Build dashboard library (ES + UMD) | Yes |
nx build settings-form | Build settings-form library (ES + UMD) | Yes |
nx build website | Build website static assets | Yes |
nx build api | Compile and minify API server | Yes |
nx dev dashboard | Watch mode with hot reload | No |
nx test <project> | Run tests with Vitest | Yes |
Sources: nx.json1-43 dashboard/vite.config.ts1-119 dashboard/project.json1-54 website/project.json1-59 api/package.json6-33
Dashboards are persisted as JSON documents with a versioned schema structure:
Schema components:
| Field | Type | Description |
|---|---|---|
definition | IDashboardDefinition | Queries, SQL snippets, and mock context |
views | IDashboardView[] | View hierarchy (Division, Modal, Tabs) |
panels | IDashboardPanel[] | Panel configurations with viz types |
filters | FilterMetaSnapshotOut[] | Dashboard-level filters |
layouts | LayoutSetMetaSnapshotOut[] | Responsive layouts per breakpoint |
version | string | Schema version (e.g., "14.32.0") |
Sources: dashboard/src/types/dashboard.ts1-109 website/src/api-caller/dashboard.tsx1-64
The system supports deployment via Docker containers and includes CI/CD through GitHub Actions:
Deployment artifacts:
@devtable/dashboard and @devtable/settings-form published to npmjs.orgEnvironment variables:
| Variable | Package | Purpose |
|---|---|---|
VITE_API_BASE_URL | website | API endpoint URL |
VITE_WEBSITE_BASE_URL | website | Website base URL |
| Database connection | api | PostgreSQL/MySQL credentials |
| Cache configuration | api | Redis connection settings |
Sources: dashboard/package.json1-11 settings-form/package.json1-11 website/project.json7-22 .gitignore1-45
Refresh this wiki
This wiki was recently refreshed. Please wait 4 days to refresh again.