lmiranda
20458add3f
Sprint 1 - viz-platform Plugin completed (13/13 issues): - Commands: 7 files (initial-setup, chart, dashboard, theme, theme-new, theme-css, component) - Agents: 3 files (theme-setup, layout-builder, component-check) - Documentation: README.md, claude-md-integration.md - Tests: 94 tests passing (68-99% coverage) - CHANGELOG updated with completion status Closes: #178, #179, #180, #181, #182 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
145 lines
4.0 KiB
Markdown
145 lines
4.0 KiB
Markdown
# viz-platform CLAUDE.md Integration
|
|
|
|
Add this snippet to your project's CLAUDE.md to enable viz-platform capabilities.
|
|
|
|
## Integration Snippet
|
|
|
|
```markdown
|
|
## Visualization (viz-platform)
|
|
|
|
This project uses viz-platform for Dash Mantine Components dashboards.
|
|
|
|
### Available Commands
|
|
- `/component {name}` - Inspect DMC component props
|
|
- `/chart {type}` - Create Plotly charts (line, bar, scatter, pie, area, histogram, box, heatmap, sunburst, treemap)
|
|
- `/dashboard {template}` - Create layouts (basic, sidebar, tabs, split)
|
|
- `/theme {name}` - Apply a theme
|
|
- `/theme-new {name}` - Create custom theme
|
|
- `/theme-css {name}` - Export theme as CSS
|
|
|
|
### MCP Tools Available
|
|
- **DMC**: list_components, get_component_props, validate_component
|
|
- **Charts**: chart_create, chart_configure_interaction
|
|
- **Layouts**: layout_create, layout_add_filter, layout_set_grid, layout_add_section, layout_get
|
|
- **Themes**: theme_create, theme_extend, theme_validate, theme_export_css, theme_list, theme_activate
|
|
- **Pages**: page_create, page_add_navbar, page_set_auth, page_list, page_get_app_config
|
|
|
|
### Component Validation
|
|
ALWAYS validate DMC components before use:
|
|
1. Check props with `get_component_props(component_name)`
|
|
2. Validate usage with `validate_component(component_name, props)`
|
|
3. Fix any errors before proceeding
|
|
|
|
### Project Theme
|
|
Theme: [YOUR_THEME_NAME or "default"]
|
|
Color scheme: [light/dark]
|
|
Primary color: [color name]
|
|
```
|
|
|
|
## Cross-Plugin Configuration
|
|
|
|
If using with data-platform, add this section:
|
|
|
|
```markdown
|
|
## Data + Visualization Workflow
|
|
|
|
### Data Loading (data-platform)
|
|
- `/ingest {file}` - Load CSV, Parquet, or JSON
|
|
- `/schema {table}` - View database schema
|
|
- `/profile {data_ref}` - Statistical summary
|
|
|
|
### Visualization (viz-platform)
|
|
- `/chart {type}` - Create charts from loaded data
|
|
- `/dashboard {template}` - Build dashboard layouts
|
|
|
|
### Workflow Pattern
|
|
1. Load data: `read_csv("data.csv")` → returns `data_ref`
|
|
2. Create chart: `chart_create(data_ref="data_ref", ...)`
|
|
3. Add to layout: `layout_add_section(chart_ref="...")`
|
|
4. Apply theme: `theme_activate("my-theme")`
|
|
```
|
|
|
|
## Agent Configuration
|
|
|
|
### Using theme-setup agent
|
|
|
|
When user mentions theming or brand colors:
|
|
```markdown
|
|
Use the theme-setup agent for:
|
|
- Creating new themes with brand colors
|
|
- Configuring typography and spacing
|
|
- Exporting themes as CSS
|
|
```
|
|
|
|
### Using layout-builder agent
|
|
|
|
When user wants dashboard structure:
|
|
```markdown
|
|
Use the layout-builder agent for:
|
|
- Creating dashboard layouts
|
|
- Adding filter components
|
|
- Configuring responsive grids
|
|
```
|
|
|
|
### Using component-check agent
|
|
|
|
For code review and debugging:
|
|
```markdown
|
|
Use the component-check agent for:
|
|
- Validating DMC component usage
|
|
- Fixing prop errors
|
|
- Understanding component APIs
|
|
```
|
|
|
|
## Example Project CLAUDE.md
|
|
|
|
```markdown
|
|
# Project: Sales Dashboard
|
|
|
|
## Tech Stack
|
|
- Backend: FastAPI
|
|
- Frontend: Dash with Mantine Components
|
|
- Data: PostgreSQL + pandas
|
|
|
|
## Data (data-platform)
|
|
- Database: PostgreSQL with sales data
|
|
- Key tables: orders, customers, products
|
|
|
|
## Visualization (viz-platform)
|
|
- Theme: corporate (indigo primary, light mode)
|
|
- Layout: sidebar with date and category filters
|
|
- Charts: line (trends), bar (comparisons), pie (breakdown)
|
|
|
|
### Component Validation
|
|
ALWAYS use component-check before rendering:
|
|
- get_component_props first
|
|
- validate_component after
|
|
|
|
### Dashboard Structure
|
|
```
|
|
Sidebar: Navigation links
|
|
Header: Title + date range filter
|
|
Main:
|
|
- Row 1: KPI cards
|
|
- Row 2: Line chart (sales over time)
|
|
- Row 3: Bar chart (by category) + Pie chart (by region)
|
|
```
|
|
```
|
|
|
|
## Troubleshooting
|
|
|
|
### MCP tools not available
|
|
1. Check venv exists: `ls mcp-servers/viz-platform/.venv/`
|
|
2. Rebuild if needed: `cd mcp-servers/viz-platform && python -m venv .venv && pip install -r requirements.txt`
|
|
3. Restart Claude Code session
|
|
|
|
### Component validation fails
|
|
1. Check DMC version matches registry
|
|
2. Use `list_components()` to see available components
|
|
3. Verify prop names are camelCase
|
|
|
|
### Charts not rendering
|
|
1. Verify data_ref exists with `list_data()`
|
|
2. Check column names match data
|
|
3. Validate theme is active
|