trentuna/candle-annotator
8
0
Fork 0
Code Issues Pull requests Releases Packages Activity Actions

sync: apply multi-chart-management delta specs to main specs

Browse source 
- Created new chart-management capability spec
- Updated data-ingestion: chart-scoped candles, duplicate filename handling
- Updated backend-api: all endpoints gain chartId parameter, chart CRUD
- Updated chart-canvas: chart switching, scoped data fetching
- Updated label-management: annotations scoped to active chart
- Updated ui-shell: upload creates/selects chart, theme-aware link styling
This commit is contained in:
Marko Djordjevic 2026-02-13 09:06:37 +01:00
parent 7cb308788e
commit 4121a87875
6 changed files with 201 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

26
openspec/specs/chart-canvas/spec.md
View file

@ -1,14 +1,14 @@
## 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 candlestick visuals using a black and white color scheme. Bullish candles SHALL have a white interior with black outline and black wicks. Bearish candles SHALL be completely black (black fill and black wicks). The chart SHALL be a client-side React component.
The system SHALL render candle data as a candlestick chart using the `lightweight-charts` library (v4). The chart MUST display OHLC data with candlestick visuals using a black and white color scheme. Bullish candles SHALL have a white interior with black outline and black wicks. Bearish candles SHALL be completely black (black fill and black wicks). The chart SHALL be a client-side React component. The chart SHALL fetch and display candles scoped to the active chart by passing `chartId` to the `GET /api/candles` endpoint.
#### 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: Chart renders candle data for active chart
- **WHEN** an active chart is selected and candle data exists for that chart
- **THEN** the chart fetches candles via `GET /api/candles?chartId=<activeChartId>` and renders only that chart's candles
#### Scenario: Empty state
- **WHEN** no candle data exists in the database
- **WHEN** no charts exist or the active chart has no candle data
- **THEN** the chart area displays an empty chart with a prompt to upload CSV data
#### Scenario: Bullish candle appearance
@ -19,6 +19,10 @@ The system SHALL render candle data as a candlestick chart using the `lightweigh
- **WHEN** a candle's close price is lower than its open price (bearish)
- **THEN** the candle displays as completely black (black fill and black wick)
#### Scenario: Chart switches when active chart changes
- **WHEN** user selects a different chart from the chart selector
- **THEN** the chart clears existing data, fetches candles for the newly selected chart, and renders the new dataset
### 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.
@ -45,16 +49,20 @@ The chart SHALL use a dark color scheme consistent with the application's Slate-
- **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.
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. Markers SHALL be scoped to the active chart by fetching annotations via `GET /api/annotations?chartId=<activeChartId>`.
#### Scenario: Break Up marker display
- **WHEN** a Break Up annotation exists for a candle timestamp
- **WHEN** a Break Up annotation exists for a candle timestamp in the active chart
- **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
- **WHEN** a Break Down annotation exists for a candle timestamp in the active chart
- **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
- **WHEN** user adds or deletes an annotation on the active chart
- **THEN** chart markers update immediately without requiring a page reload
#### Scenario: Markers refresh on chart switch
- **WHEN** user switches to a different chart
- **THEN** markers from the previous chart are cleared and markers for the new chart's annotations are loaded