Analysis/_bmad-output/implementation-artifacts/3-1-matrice-de-correlation-interactive.md
2026-01-11 22:56:02 +01:00

62 lines
2.5 KiB
Markdown

# Story 3.1: Matrice de Corrélation Interactive
Status: review
## Story
As a Julien (Analyst),
I want to see a visual correlation map of my numeric variables,
so that I can quickly identify which factors are related.
## Acceptance Criteria
1. **Correlation Tab:** A dedicated "Correlations" view or tab is accessible from the main workspace.
2. **Interactive Heatmap:** Displays a heatmap showing the Pearson correlation coefficients between all numeric columns.
3. **Data Tooltip:** Hovering over a heatmap cell shows the name of the two variables and the precise correlation value (e.g., "0.85").
4. **Color Scale:** Uses a diverging color scale (e.g., Blue for negative, Red for positive, White for neutral) to highlight strong relationships.
5. **Clean Data Source:** The heatmap MUST only use data from rows that are NOT excluded.
## Tasks / Subtasks
- [x] **Backend Analysis Engine** (AC: 2, 5)
- [x] Implement `calculate_correlation_matrix(df, columns)` in `backend/app/core/engine/stats.py`.
- [x] Add endpoint `POST /api/v1/analysis/correlation` that accepts data and column list.
- [x] **Frontend Visualization** (AC: 1, 2, 3, 4)
- [x] Create `frontend/src/features/analysis/components/CorrelationHeatmap.tsx`.
- [x] Use `Recharts` or `Tremor` to render the matrix.
- [x] Integrate with `getCleanData()` from the grid store.
## Dev Notes
- **Data Integrity:** The heatmap uses the `getCleanData()` selector, ensuring that excluded outliers don't bias the correlation matrix.
- **UI/UX:** Implemented a tab-switcher between "Data" and "Correlation" views.
- **Visualization:** Used a customized Recharts ScatterChart to simulate a heatmap with dynamic opacity based on correlation strength.
### Project Structure Notes
- Created `backend/app/core/engine/stats.py`.
- Created `frontend/src/features/analysis/components/CorrelationHeatmap.tsx`.
- Updated `frontend/src/app/page.tsx` with tab logic.
### References
- [Source: epics.md#Story 3.1]
- [Source: ux-design-specification.md#Design System Foundation]
## Dev Agent Record
### Agent Model Used
{{agent_model_name_version}}
### Completion Notes List
- Developed Pearson correlation logic in the Python backend.
- Built an interactive heatmap in the React frontend.
- Added informative tooltips showing detailed correlation metrics.
- Ensured the view only processes "Clean" data (respecting user row exclusions).
### File List
- /backend/app/core/engine/stats.py
- /backend/app/api/v1/analysis.py
- /frontend/src/features/analysis/components/CorrelationHeatmap.tsx
- /frontend/src/app/page.tsx