Data Components
Display and interact with data using powerful data visualization components. Create charts, tables, and dashboards to present information effectively.
Data Visualization
Data components help you present complex information in an easy-to-understand format. Connect them to your data sources for real-time updates and interactive experiences.
Available Data Components
Data Table
Display tabular data with sorting, filtering, and pagination.
- • Sortable columns
- • Data filtering
- • Pagination controls
- • Custom cell rendering
Bar Chart
Compare values across categories with vertical or horizontal bars.
- • Vertical and horizontal bars
- • Multiple data series
- • Interactive tooltips
- • Custom colors and styling
Pie Chart
Show proportions and percentages with circular charts.
- • Proportional segments
- • Interactive legends
- • Donut chart option
- • Custom color schemes
Line Chart
Display trends and changes over time with connected data points.
- • Time series data
- • Multiple trend lines
- • Smooth curves
- • Interactive zoom and pan
Area Chart
Show cumulative data and trends with filled areas under lines.
- • Stacked areas
- • Gradient fills
- • Multiple data series
- • Interactive legends
Gauge Chart
Display single values and progress with circular gauges.
- • Progress indicators
- • KPI displays
- • Custom ranges
- • Color-coded zones
Data Table Component
Features
Data Management
- • Connect to any data source
- • Real-time data updates
- • Custom column configuration
- • Data formatting and transformation
User Interaction
- • Sort by any column
- • Filter data with search
- • Pagination for large datasets
- • Row selection and actions
Configuration Example
json
// Data Table Configuration
{
"dataSource": "database",
"table": "customers",
"columns": [
{
"field": "name",
"title": "Customer Name",
"sortable": true,
"filterable": true
},
{
"field": "email",
"title": "Email Address",
"sortable": true,
"filterable": true
},
{
"field": "created_at",
"title": "Join Date",
"type": "date",
"format": "MMM DD, YYYY"
},
{
"field": "status",
"title": "Status",
"type": "badge",
"colors": {
"active": "green",
"inactive": "gray"
}
}
],
"pagination": {
"enabled": true,
"pageSize": 25
}
}Chart Components
Bar Chart Configuration
Create bar charts to compare values across categories:
json
// Bar Chart Configuration
{
"type": "bar",
"dataSource": "database",
"query": "SELECT category, SUM(sales) as total FROM sales GROUP BY category",
"xAxis": {
"field": "category",
"title": "Product Category"
},
"yAxis": {
"field": "total",
"title": "Sales Total",
"format": "currency"
},
"colors": ["#3B82F6", "#10B981", "#F59E0B"],
"options": {
"orientation": "vertical",
"showValues": true,
"showLegend": true
}
}Line Chart Configuration
Display trends over time with line charts:
json
// Line Chart Configuration
{
"type": "line",
"dataSource": "api",
"endpoint": "https://api.example.com/metrics",
"xAxis": {
"field": "date",
"type": "time",
"title": "Date"
},
"yAxis": {
"field": "value",
"title": "Metric Value"
},
"series": [
{
"name": "Revenue",
"field": "revenue",
"color": "#3B82F6"
},
{
"name": "Users",
"field": "users",
"color": "#10B981"
}
],
"options": {
"smooth": true,
"showPoints": true,
"interactive": true
}
}Data Binding
Connecting to Data Sources
Data components can connect to various data sources:
SQLite Database - Query tables and records
REST APIs - Fetch data from external services
JSON Files - Use static or uploaded data
Workflow Variables - Use calculated or processed data
Data Transformation
Transform data before displaying it in components:
Formatting
javascript
// Format data for display
"{{formatCurrency(price)}}"
"{{formatDate(created_at, 'MMM DD, YYYY')}}"
"{{formatNumber(count, '0,0')}}"Calculations
javascript
// Calculate derived values
"{{(revenue / users).toFixed(2)}}"
"{{(current - previous) / previous * 100}}"
"{{sum(items.map(i => i.price))}}"Interactive Features
Chart Interactions
User Interactions
- • Click on data points
- • Hover for detailed information
- • Zoom and pan on charts
- • Toggle data series visibility
Responsive Design
- • Automatic resizing
- • Mobile-optimized layouts
- • Touch-friendly interactions
- • Adaptive chart types
Table Interactions
Sort columns by clicking headers
Filter data with search inputs
Select rows for bulk operations
Navigate through paginated data
Dashboard Examples
Sales Dashboard
Create a comprehensive sales dashboard with multiple data components:
Revenue line chart showing monthly trends
Product category pie chart for market share
Top customers data table with sorting
Sales targets gauge chart for progress
User Analytics Dashboard
Monitor user behavior and engagement metrics:
User growth line chart over time
User activity bar chart by hour
User segments pie chart
Recent users data table
Best Practices
Chart Selection
Choose the right chart type for your data. Use bar charts for comparisons, line charts for trends, and pie charts for proportions.
Data Performance
Optimize data queries for better performance. Use pagination for large datasets and consider caching for frequently accessed data.
User Experience
Make your data components interactive and responsive. Provide clear labels, legends, and tooltips to help users understand the information.