AutoInsights Dashboard

A modern, interactive dashboard application built with SvelteKit for data visualization and analytics.

Features

• Interactive Dashboards: Create and manage multiple dashboards with drag-and-drop widgets
• Widget System: Support for various chart types (bar, line, pie, KPI grids)
• Edit Mode: Resize and rearrange widgets with visual grid alignment
• Chat Integration: Generate widgets through natural language chat interface
• Theme Support: Customizable color themes
• Data Visualization: Built-in support for various data sources and formats

Tech Stack

• Frontend: SvelteKit
• Styling: Custom CSS with design tokens
• Charts: D3.js for data visualizations
• Build Tool: Vite
• Language: TypeScript

Getting Started

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn

Installation

1. Clone the repository:

   git clone <repository-url>
   cd svelte-frontend
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

4. Open your browser and navigate to http://localhost:5173

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run check - Run type checking
• npm run lint - Run linter

Project Structure

src/
├── lib/                    # Shared utilities and components
│   ├── components/         # Reusable components
│   ├── data/              # Sample data files
│   ├── types.ts           # TypeScript type definitions
│   └── visualizations.ts  # Chart rendering logic
├── routes/                # SvelteKit routes
│   ├── chat/              # Chat interface
│   ├── dashboards/        # Dashboard management
│   └── settings/          # Application settings
├── app.css               # Global styles and design tokens
└── app.html              # HTML template

Dashboard Features

Widget Management

• Drag and drop widgets to rearrange
• Resize widgets by dragging corners
• Edit widget titles inline
• Delete widgets with confirmation

Edit Mode

• Visual grid overlay for precise positioning
• Snap-to-grid functionality
• Real-time collision detection
• Automatic visualization refresh after resize

Dashboard Management

• Create multiple dashboards
• Rename dashboards
• Switch between dashboards
• Delete dashboards (with protection for last dashboard)

Data Sources

The application supports multiple data source types:

• Default: Built-in sample data (sales, regions, KPIs)
• Chat: AI-generated data from chat interactions
• Custom: User-provided data (future enhancement)

Customization

Themes

The application uses CSS custom properties for theming. Modify the design tokens in src/app.css:

:root {
  --color-primary: #8b1538;
  --color-secondary: #d4af37;
  --color-accent: #f4e4bc;
  /* ... more theme variables */
}

Adding New Chart Types

1. Add the chart type to the Widget type in src/lib/types.ts
2. Implement the rendering logic in src/lib/visualizations.ts
3. Update the chat interface to support the new type

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Built with SvelteKit
• Charts powered by D3.js
• Icons from Lucide