Data Binding

Veltix provides powerful data binding capabilities that allow you to connect components to various data sources, from static data to real-time APIs and databases.

Overview

Data binding in Veltix supports:

Static Data: Hardcoded data arrays and objects
API Endpoints: RESTful APIs and GraphQL
Database Connections: PostgreSQL, MySQL, and more
File Imports: CSV, JSON, Excel files
Cloud Services: Google Sheets, Airtable
Real-time Sources: WebSocket connections

Data Source Types

1. Static Data

The simplest form of data binding using hardcoded data.


// Direct data binding
const staticData = [
  { month: 'Jan', sales: 1000 },
  { month: 'Feb', sales: 1200 },
  { month: 'Mar', sales: 1100 }
];
 
<BarChart data={staticData} xField="month" yField="sales" />
 
// Using data source configuration
const dataSource = {
  type: 'static',
  data: staticData
};
 
<BarChart dataSource={dataSource} xField="month" yField="sales" />

2. API Data Sources

Connect to RESTful APIs and GraphQL endpoints.


// API configuration
const apiDataSource = {
  type: 'api',
  url: 'https://api.example.com/sales',
  method: 'GET',
  headers: {
    'Authorization': 'Bearer your-token'
  },
  refreshInterval: 30000, // 30 seconds
  transform: (data) => data.map(item => ({
    month: item.date,
    sales: item.amount
  }))
};
 
<BarChart dataSource={apiDataSource} xField="month" yField="sales" />
 
// GraphQL configuration
const graphqlDataSource = {
  type: 'graphql',
  url: 'https://api.example.com/graphql',
  query: `
    query GetSalesData {
      sales {
        date
        amount
        region
      }
    }
  `,
  variables: {
    year: 2024
  }
};

3. Database Connections

Connect directly to databases for real-time data.


// PostgreSQL connection
const dbDataSource = {
  type: 'database',
  connection: {
    type: 'postgresql',
    host: 'localhost',
    port: 5432,
    database: 'sales_db',
    username: 'user',
    password: 'password'
  },
  query: 'SELECT date, amount FROM sales WHERE year = $1',
  parameters: [2024],
  refreshInterval: 60000 // 1 minute
};
 
<LineChart dataSource={dbDataSource} xField="date" yField="amount" />
 
// MySQL connection
const mysqlDataSource = {
  type: 'database',
  connection: {
    type: 'mysql',
    host: 'localhost',
    port: 3306,
    database: 'analytics',
    username: 'user',
    password: 'password'
  },
  query: 'SELECT * FROM revenue WHERE created_at >= NOW() - INTERVAL 1 DAY'
};

4. File Data Sources

Import data from various file formats.


// CSV file import
const csvDataSource = {
  type: 'file',
  format: 'csv',
  url: '/data/sales.csv',
  delimiter: ',',
  hasHeader: true,
  encoding: 'utf-8'
};
 
<BarChart dataSource={csvDataSource} xField="Month" yField="Sales" />
 
// JSON file import
const jsonDataSource = {
  type: 'file',
  format: 'json',
  url: '/data/config.json',
  path: 'sales.data' // Nested data path
};
 
// Excel file import
const excelDataSource = {
  type: 'file',
  format: 'excel',
  url: '/data/report.xlsx',
  sheet: 'Sales',
  range: 'A1:D100'
};

5. Cloud Service Connections

Connect to cloud-based data sources.


// Google Sheets
const sheetsDataSource = {
  type: 'cloud',
  provider: 'google-sheets',
  spreadsheetId: 'your-spreadsheet-id',
  range: 'Sheet1!A1:D100',
  credentials: {
    clientId: 'your-client-id',
    clientSecret: 'your-client-secret'
  }
};
 
// Airtable
const airtableDataSource = {
  type: 'cloud',
  provider: 'airtable',
  baseId: 'your-base-id',
  table: 'Sales',
  apiKey: 'your-api-key'
};

Data Transformation

Built-in Transformers


// Filter data
const filterTransform = {
  type: 'filter',
  field: 'region',
  operator: 'equals',
  value: 'North'
};
 
// Sort data
const sortTransform = {
  type: 'sort',
  field: 'sales',
  order: 'desc'
};
 
// Aggregate data
const aggregateTransform = {
  type: 'aggregate',
  groupBy: 'region',
  fields: {
    totalSales: { type: 'sum', field: 'sales' },
    avgSales: { type: 'average', field: 'sales' }
  }
};
 
// Custom transformation
const customTransform = {
  type: 'custom',
  transform: (data) => {
    return data.map(item => ({
      ...item,
      salesGrowth: ((item.sales - item.previousSales) / item.previousSales) * 100
    }));
  }
};

Chaining Transformations


const dataSource = {
  type: 'api',
  url: 'https://api.example.com/sales',
  transforms: [
    filterTransform,
    sortTransform,
    aggregateTransform
  ]
};

Real-time Data Updates

WebSocket Connections


const websocketDataSource = {
  type: 'websocket',
  url: 'ws://localhost:8080/sales-updates',
  protocols: ['sales-protocol'],
  reconnect: true,
  reconnectInterval: 5000,
  onMessage: (data) => {
    // Handle incoming data
    console.log('New data received:', data);
  }
};

Polling Configuration


const pollingDataSource = {
  type: 'api',
  url: 'https://api.example.com/sales',
  refreshInterval: 10000, // 10 seconds
  refreshMode: 'polling',
  onUpdate: (data) => {
    // Handle data updates
    console.log('Data updated:', data);
  }
};

Error Handling

Data Source Error Handling


const dataSourceWithErrorHandling = {
  type: 'api',
  url: 'https://api.example.com/sales',
  errorHandling: {
    retryAttempts: 3,
    retryDelay: 1000,
    fallbackData: [
      { month: 'Jan', sales: 0 },
      { month: 'Feb', sales: 0 }
    ],
    onError: (error) => {
      console.error('Data source error:', error);
      // Show user-friendly error message
    }
  }
};

Component Error States


<BarChart
  dataSource={dataSourceWithErrorHandling}
  xField="month"
  yField="sales"
  errorComponent={<div>Unable to load data</div>}
  loadingComponent={<div>Loading...</div>}
/>

Performance Optimization

Data Caching


const cachedDataSource = {
  type: 'api',
  url: 'https://api.example.com/sales',
  cache: {
    enabled: true,
    ttl: 300000, // 5 minutes
    key: 'sales-data'
  }
};

Data Pagination


const paginatedDataSource = {
  type: 'api',
  url: 'https://api.example.com/sales',
  pagination: {
    enabled: true,
    pageSize: 100,
    pageField: 'page',
    sizeField: 'size'
  }
};

Security Considerations

API Authentication


const authenticatedDataSource = {
  type: 'api',
  url: 'https://api.example.com/sales',
  authentication: {
    type: 'bearer',
    token: 'your-access-token'
  }
};
 
// OAuth 2.0
const oauthDataSource = {
  type: 'api',
  url: 'https://api.example.com/sales',
  authentication: {
    type: 'oauth2',
    clientId: 'your-client-id',
    clientSecret: 'your-client-secret',
    scope: 'read:sales'
  }
};

Data Encryption


const encryptedDataSource = {
  type: 'api',
  url: 'https://api.example.com/sales',
  encryption: {
    enabled: true,
    algorithm: 'AES-256',
    key: process.env.ENCRYPTION_KEY
  }
};

Best Practices

1. Data Source Management

Use environment variables for sensitive configuration
Implement proper error handling
Set appropriate refresh intervals
Cache data when possible

2. Performance

Limit data size and implement pagination
Use data transformation to reduce processing
Implement proper caching strategies
Monitor data source performance

3. Security

Use HTTPS for all external connections
Implement proper authentication
Validate and sanitize data
Use least privilege access

4. Reliability

Implement retry logic
Use fallback data sources
Monitor data source health
Implement proper logging

Troubleshooting

Common Issues

Data not loading

Check network connectivity
Verify API endpoints
Check authentication credentials
Review browser console for errors

Data not updating

Verify refresh intervals
Check WebSocket connections
Ensure proper event handling
Review data transformation logic

Performance issues

Implement data caching
Reduce data size
Use pagination
Optimize queries