d04b673cfa
- Set up Next.js with App Router, TypeScript, Tailwind CSS - Configure shadcn/ui with dark theme - Install dependencies: lightweight-charts, papaparse, lucide-react - Set up Drizzle ORM with better-sqlite3 - Create database schema for candles and annotations tables - Generate migration SQL
2.9 KiB
ADDED Requirements
Requirement: Candlestick chart rendering
The system SHALL render candle data as a candlestick chart using the lightweight-charts library (v4). The chart MUST display OHLC data with standard candlestick visuals (green for bullish, red for bearish). The chart SHALL be a client-side React component.
Scenario: Chart renders candle data
- WHEN candle data exists in the database and the page loads
- THEN the chart renders all candles as a candlestick series with correct open/high/low/close values
Scenario: Empty state
- WHEN no candle data exists in the database
- THEN the chart area displays an empty chart with a prompt to upload CSV data
Requirement: Chart interactivity
The chart SHALL support zooming (mouse wheel), panning (click and drag on time axis), and crosshair display (showing price/time on hover). These are built-in lightweight-charts behaviors that MUST be enabled.
Scenario: Zoom and pan
- WHEN user scrolls the mouse wheel over the chart
- THEN the chart zooms in or out on the time axis
Scenario: Crosshair display
- WHEN user hovers the mouse over the chart
- THEN a crosshair displays with the current price and time at the cursor position
Requirement: Responsive chart layout
The chart MUST fill the available width of the main content area (excluding the sidebar). The chart height SHALL be responsive, using the full viewport height minus header/toolbar areas. The chart MUST resize when the browser window is resized.
Scenario: Window resize
- WHEN user resizes the browser window
- THEN the chart resizes to fill the available space without requiring a page reload
Requirement: Dark theme chart
The chart SHALL use a dark color scheme consistent with the application's Slate-900 dark theme. Background MUST be dark, grid lines subtle, and text/crosshair in light colors.
Scenario: Dark theme applied
- WHEN the chart renders
- THEN the chart background, grid, text, and crosshair colors match the dark theme (dark background, light text)
Requirement: Annotation markers on chart
The chart SHALL display visual markers for existing annotations using the series.setMarkers() API. Break Up annotations MUST appear as green upward arrows above the bar. Break Down annotations MUST appear as red downward arrows below the bar. Markers MUST update when annotations are added or deleted.
Scenario: Break Up marker display
- WHEN a Break Up annotation exists for a candle timestamp
- THEN a green upward arrow marker appears above that candle on the chart
Scenario: Break Down marker display
- WHEN a Break Down annotation exists for a candle timestamp
- THEN a red downward arrow marker appears below that candle on the chart
Scenario: Marker updates on annotation change
- WHEN user adds or deletes an annotation
- THEN chart markers update immediately without requiring a page reload