Component Library

Veltix provides a comprehensive component library with built-in charts, tables, KPI cards, and other visualization components to help you build professional dashboards quickly.

Overview

The component library includes:

Chart Components: Bar, line, pie, scatter, and more
Data Components: Tables, lists, and data grids
Display Components: Text, images, and KPI cards
Interactive Components: Buttons, filters, and controls
Layout Components: Containers, dividers, and spacers

Chart Components

Bar Chart

Display categorical data with rectangular bars.


import { BarChart } from '@veltix/charts';
 
const data = [
  { category: 'Q1', value: 100 },
  { category: 'Q2', value: 150 },
  { category: 'Q3', value: 200 },
  { category: 'Q4', value: 180 }
];
 
<BarChart
  data={data}
  xField="category"
  yField="value"
  height={300}
  color="#1890ff"
/>

Configuration Options:

orientation: ‘horizontal’ | ‘vertical’
stacked: boolean
grouped: boolean
color: string | string[]
animation: boolean

Line Chart

Show trends and patterns over time.


import { LineChart } from '@veltix/charts';
 
const data = [
  { date: '2024-01', sales: 1000 },
  { date: '2024-02', sales: 1200 },
  { date: '2024-03', sales: 1100 },
  { date: '2024-04', sales: 1400 }
];
 
<LineChart
  data={data}
  xField="date"
  yField="sales"
  height={300}
  smooth={true}
/>

Configuration Options:

smooth: boolean
area: boolean
markers: boolean
grid: boolean

Pie Chart

Display proportions and percentages.


import { PieChart } from '@veltix/charts';
 
const data = [
  { name: 'Product A', value: 30 },
  { name: 'Product B', value: 25 },
  { name: 'Product C', value: 45 }
];
 
<PieChart
  data={data}
  nameField="name"
  valueField="value"
  height={300}
  donut={true}
/>

Configuration Options:

donut: boolean
explode: boolean
labels: boolean
legend: boolean

Scatter Plot

Show relationships between two variables.


import { ScatterChart } from '@veltix/charts';
 
const data = [
  { x: 10, y: 20, size: 5 },
  { x: 15, y: 25, size: 8 },
  { x: 20, y: 30, size: 12 }
];
 
<ScatterChart
  data={data}
  xField="x"
  yField="y"
  sizeField="size"
  height={300}
/>

Data Components

Data Table

Display structured data with sorting and filtering.


import { DataTable } from '@veltix/ui';
 
const columns = [
  { key: 'name', title: 'Name', sortable: true },
  { key: 'age', title: 'Age', sortable: true },
  { key: 'email', title: 'Email' }
];
 
const data = [
  { name: 'John Doe', age: 30, email: '[email protected]' },
  { name: 'Jane Smith', age: 25, email: '[email protected]' }
];
 
<DataTable
  columns={columns}
  data={data}
  pagination={true}
  searchable={true}
/>

Features:

Sorting by column
Search functionality
Pagination
Row selection
Export to CSV/Excel

KPI Card

Display key performance indicators.


import { KPICard } from '@veltix/ui';
 
<KPICard
  title="Total Revenue"
  value="$1,234,567"
  change={12.5}
  changeType="increase"
  icon="trending-up"
  color="green"
/>

Configuration:

title: string
value: string | number
change: number (percentage)
changeType: ‘increase’ | ‘decrease’
icon: string
color: string

Display Components

Text Component

Display formatted text content.


import { TextComponent } from '@veltix/ui';
 
<TextComponent
  content="Welcome to Veltix Dashboard"
  fontSize={24}
  fontWeight="bold"
  color="#1890ff"
  align="center"
/>

Features:

Rich text formatting
Font customization
Text alignment
Background styling

Image Component

Display images and graphics.


import { ImageComponent } from '@veltix/ui';
 
<ImageComponent
  src="/logo.png"
  alt="Company Logo"
  width={200}
  height={100}
  fit="contain"
/>

Configuration:

src: string
alt: string
width: number
height: number
fit: ‘contain’ | ‘cover’ | ‘fill’

Interactive Components

Filter Component

Create interactive data filters.


import { FilterComponent } from '@veltix/ui';
 
const filterOptions = [
  { label: 'All', value: 'all' },
  { label: 'Active', value: 'active' },
  { label: 'Inactive', value: 'inactive' }
];
 
<FilterComponent
  options={filterOptions}
  value="all"
  onChange={(value) => console.log(value)}
  multiple={false}
/>

Button Component

Interactive buttons for actions.


import { Button } from '@veltix/ui';
 
<Button
  variant="primary"
  size="medium"
  onClick={() => console.log('Clicked!')}
  disabled={false}
>
  Click Me
</Button>

Layout Components

Container

Group and organize components.


import { Container } from '@veltix/ui';
 
<Container
  padding={16}
  margin={8}
  border={true}
  borderRadius={8}
  backgroundColor="#f5f5f5"
>
  <BarChart data={data} />
</Container>

Divider

Separate content sections.


import { Divider } from '@veltix/ui';
 
<Divider
  orientation="horizontal"
  color="#e8e8e8"
  thickness={1}
/>

Component Properties

Common Properties

All components support these common properties:


interface ComponentProps {
  id: string;
  position: { x: number; y: number };
  size: { width: number; height: number };
  visible: boolean;
  locked: boolean;
  zIndex: number;
  style?: CSSProperties;
}

Data Binding

Components can be bound to data sources:


// Static data
<BarChart data={staticData} />
 
// API data
<BarChart dataSource="api://sales-data" />
 
// Database data
<BarChart dataSource="db://revenue-table" />
 
// File data
<BarChart dataSource="file://sales.csv" />

Custom Components

Creating Custom Components


import { ComponentType } from '@veltix/types';
 
interface CustomComponentProps {
  title: string;
  data: any[];
  config?: any;
}
 
const CustomComponent: ComponentType<CustomComponentProps> = ({
  title,
  data,
  config
}) => {
  return (
    <div className="custom-component">
      <h3>{title}</h3>
      {/* Your custom implementation */}
    </div>
  );
};
 
// Register the component
registerComponent('custom', CustomComponent);

Component Configuration


// Component configuration schema
const configSchema = {
  type: 'object',
  properties: {
    title: { type: 'string' },
    data: { type: 'array' },
    config: { type: 'object' }
  },
  required: ['title', 'data']
};

Best Practices

1. Component Selection

Choose the right chart type for your data
Consider the audience and use case
Balance aesthetics with functionality

2. Performance

Limit the number of data points
Use appropriate chart types for large datasets
Implement lazy loading for complex components

3. Accessibility

Provide alt text for images
Use sufficient color contrast
Include keyboard navigation

4. Responsive Design

Test components at different screen sizes
Use relative sizing where appropriate
Consider mobile interactions

Troubleshooting

Common Issues

Chart not rendering

Check data format
Verify required properties
Ensure data is not empty

Component not updating

Check data source configuration
Verify update intervals
Ensure proper data binding

Performance issues

Reduce data points
Use simpler chart types
Implement data aggregation