agentic-ui-libs/README.md

A modular, config-driven analytics library for React and Angular applications

# Agentic Analytics Dashboard

A modular, config-driven analytics library for React and Angular applications with built-in Tailwind CSS styling.

## Installation

```bash
npm install agentic-ui-libs
```

## Quick Start

### For Angular Applications

1. **Install the package:**
```bash
npm install agentic-ui-libs
```

2. **Import the CSS in your global styles:**

In your `angular.json`, add to the styles array:
```json
"styles": [
  "node_modules/agentic-ui-libs/dist/assets/style.css",
  "src/styles.css"
]
```

Or in your global `styles.css`:
```css
@import 'agentic-ui-libs/styles.css';
```

3. **Use the Angular wrapper component:**
```typescript
import { AnalyticsDashboardComponent } from './analytics-dashboard.component';
import { DashboardConfig } from 'agentic-ui-libs';

@Component({
  selector: 'app-my-dashboard',
  template: `
    <app-analytics-dashboard 
      [config]="dashboardConfig"
      [onExport]="handleExport">
    </app-analytics-dashboard>
  `,
  imports: [AnalyticsDashboardComponent]
})
export class MyDashboardComponent {
  dashboardConfig: DashboardConfig = {
    // Your configuration here
  };
}
```

### For React Applications

```tsx
import { Dashboard, DashboardConfig } from 'agentic-ui-libs';
import 'agentic-ui-libs/styles.css';

const config: DashboardConfig = {
  // Your configuration
};

function App() {
  return <Dashboard config={config} />;
}
```

## Features

- 📊 **Rich Chart Components** - Built with Recharts
- 📋 **Data Tables** - Sortable, filterable tables  
- 🎨 **Tailwind CSS** - Pre-styled with custom design system
- 📱 **Responsive Design** - Mobile-first approach
- 🔧 **Fully Configurable** - JSON-driven configuration
- 🎯 **TypeScript** - Full type safety
- ⚡ **Framework Agnostic** - Works with React, Angular, and more

## Available Components

- `Dashboard` - Main dashboard container
- `DashboardSection` - Individual dashboard sections
- `MetricCard` - Key performance indicator cards
- `AnalyticsChart` - Various chart types (line, bar, area, etc.)
- `AnalyticsTable` - Data tables with sorting and filtering
- `ViewRenderer` - Dynamic view switching

## Sample Configuration

```typescript
import { sampleDashboardConfig } from 'agentic-ui-libs';

// Use the sample config as a starting point
console.log(sampleDashboardConfig);
```

## Dependencies Included

This library includes all necessary dependencies:
- React & React DOM
- Recharts (charting)
- Lucide React (icons)
- Tailwind CSS (styling)
- Date-fns (date utilities)

No additional peer dependencies required!

## License

MIT