# Welcome to Metabase

Your guide to understanding the codebase

## Learning Path

15 units • 5 levels

### Orchestration & APIs
- Pipelines, workflows, public interfaces • 3 units
- API Layer and State Management
- Data Model and Entity Framework
- Component Library and UI Patterns
- Core Logic & Data
    - Business rules, schemas, models • 3 units
- Database Connections and Data Management
- Dashboard and Parameter System
- Query Builder and Visualization Engine

### Interaction & Integration
- UI components, external connectors • 3 units
- Enterprise Features and Embedding SDK
- Security and Multi-tenancy
- Actions, Alerts, and Automation
- Cross-Cutting Concerns
    - Auth, logging, config, testing • 2 units
- Infrastructure and Admin Systems
- Testing, Error Handling, and Versioning
- Edge Cases & Resilience
    - Error handling, fault tolerance • 1 units

### Additional Error Handling Patterns

### Test Your Knowledge
24 questions across all levels

#### Progress
- 0/24 answered

### Levels
- Level 1: 6 questions
- Level 2: 6 questions
- Level 3: 6 questions
- Level 4: 6 questions

### Hands-On Assignment
90-120 minutes

#### Your Challenge
Build a custom visualization plugin that adds a new chart type to Metabase's visualization engine. Your plugin should register itself through the plugin system, accept configuration options from users, and render data from a query result. This will require understanding how Metabase's plugin architecture works, how visualizations consume data, and how the UI components integrate with the visualization system.

### Starting Points

- `enterprise/frontend/src/metabase-enterprise/plugins.js:1-52`
    - Examine how enterprise plugins are loaded and registered in the system

- `enterprise/frontend/src/metabase-enterprise/redux.ts:1-11`
    - See how enterprise features integrate with the Redux state management

- `frontend/src/metabase/visualizations/register.js`
    - This is where core visualizations are registered - you'll follow a similar pattern

- `frontend/src/metabase/visualizations/components`
    - Browse existing visualization components to understand the structure and props they receive

- `frontend/src/metabase/visualizations/lib/settings`
    - Study how visualization settings and configuration options are defined

- `frontend/src/metabase/visualizations/visualizations`
    - Create your new visualization component here following the established patterns

### Success Criteria
- Your visualization appears in the visualization type picker with a custom icon and name.
- The visualization correctly renders data from a query result with at least 2 columns.
- Users can configure at least 2 settings (e.g., colors, labels) through the sidebar UI.
- The visualization handles empty data gracefully without crashing.
- Your code follows the same patterns as existing visualizations (proper exports, metadata structure).
- The visualization is interactive - clicking elements triggers `onVisualizationClick` with appropriate data.

### Hints
- (click to reveal)
    - Hint 1: Understanding the visualization lifecycle concept.
    - Hint 2: Plugin registration mechanism code location.
    - Hint 3: Data transformation patterns implementation.
    - Hint 4: Settings and configuration UI implementation.
    - Hint 5: Testing your visualization implementation.

### Prerequisites
- React component patterns
- Data visualization concepts
- Plugin architecture basics
- Redux state management (optional but helpful)