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

chore: archive update-candle-colors change

Browse source
This commit is contained in:
Marko Djordjevic 2026-02-12 23:26:25 +01:00
parent cce55c63c1
commit 4dad24845e
6 changed files with 9 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

0
openspec/changes/update-candle-colors/.openspec.yaml → openspec/changes/archive/2026-02-12-update-candle-colors/.openspec.yaml
View file

2
openspec/changes/update-candle-colors/design.md → openspec/changes/archive/2026-02-12-update-candle-colors/design.md
View file

@ -27,7 +27,7 @@ The lightweight-charts library configures candlestick colors through the `addCan
### Decision 1: Color Values ### Decision 1: Color Values
- **Up candles**: `upColor: '#ffffff'`, `borderUpColor: '#000000'`, `wickUpColor: '#000000'`, `borderVisible: true` - **Up candles**: `upColor: '#ffffff'`, `borderUpColor: '#000000'`, `wickUpColor: '#000000'`, `borderVisible: true`
- **Down candles**: `downColor: '#000000'`, `wickDownColor: '#000000'` - **Down candles**: `downColor: '#000000'`, , `borderDownColor: '#000000'`, `wickDownColor: '#000000'`
**Rationale**: Pure white (`#ffffff`) and pure black (`#000000`) provide maximum contrast and match traditional financial charting conventions. Borders must be visible for up candles to show the black outline. **Rationale**: Pure white (`#ffffff`) and pure black (`#000000`) provide maximum contrast and match traditional financial charting conventions. Borders must be visible for up candles to show the black outline.

0
openspec/changes/update-candle-colors/proposal.md → openspec/changes/archive/2026-02-12-update-candle-colors/proposal.md
View file

0
openspec/changes/update-candle-colors/specs/chart-canvas/spec.md → openspec/changes/archive/2026-02-12-update-candle-colors/specs/chart-canvas/spec.md
View file

0
openspec/changes/update-candle-colors/tasks.md → openspec/changes/archive/2026-02-12-update-candle-colors/tasks.md
View file

15
src/components/CandleChart.tsx
View file

@ -141,6 +141,7 @@ const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
wickUpColor: '#000000', wickUpColor: '#000000',
wickDownColor: '#000000', wickDownColor: '#000000',
borderUpColor: '#000000', borderUpColor: '#000000',
borderDownColor: '#000000',
}); });
chartRef.current = chart; chartRef.current = chart;
@ -197,14 +198,14 @@ const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
if (!annotationType) return null; if (!annotationType) return null;
const isSelected = annotation.id === selectedLabelId; const isSelected = annotation.id === selectedLabelId;
// Determine marker shape and position based on icon // Determine marker shape and position based on icon
const isUpArrow = annotationType.icon === 'arrowUp'; const isUpArrow = annotationType.icon === 'arrowUp';
return { return {
time: annotation.timestamp as Time, time: annotation.timestamp as Time,
position: isUpArrow ? ('belowBar' as const) : ('aboveBar' as const), position: isUpArrow ? ('belowBar' as const) : ('aboveBar' as const),
color: isSelected color: isSelected
? annotationType.color + 'CC' // Add slight transparency when selected ? annotationType.color + 'CC' // Add slight transparency when selected
: annotationType.color, : annotationType.color,
shape: isUpArrow ? ('arrowUp' as const) : ('arrowDown' as const), shape: isUpArrow ? ('arrowUp' as const) : ('arrowDown' as const),
@ -240,7 +241,7 @@ const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
if (markerType) { if (markerType) {
const timestamp = typeof time === 'string' ? Date.parse(time) / 1000 : (time as number); const timestamp = typeof time === 'string' ? Date.parse(time) / 1000 : (time as number);
// Find nearest candle // Find nearest candle
const nearestCandle = candles.reduce((prev, curr) => { const nearestCandle = candles.reduce((prev, curr) => {
return Math.abs(curr.time - timestamp) < Math.abs(prev.time - timestamp) ? curr : prev; return Math.abs(curr.time - timestamp) < Math.abs(prev.time - timestamp) ? curr : prev;
@ -274,7 +275,7 @@ const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
const markerTypeNames = annotationTypes const markerTypeNames = annotationTypes
.filter((t) => t.category === 'marker') .filter((t) => t.category === 'marker')
.map((t) => t.name); .map((t) => t.name);
// Find annotation at this timestamp (within tolerance) // Find annotation at this timestamp (within tolerance)
const tolerance = 60; // 60 seconds tolerance const tolerance = 60; // 60 seconds tolerance
const annotation = annotations.find( const annotation = annotations.find(
@ -303,13 +304,13 @@ const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
const isMarkerTool = annotationTypes.find( const isMarkerTool = annotationTypes.find(
(t) => t.category === 'marker' && t.name === activeTool (t) => t.category === 'marker' && t.name === activeTool
); );
if (!activeTool || isMarkerTool) { if (!activeTool || isMarkerTool) {
const timestamp = typeof time === 'string' ? Date.parse(time) / 1000 : (time as number); const timestamp = typeof time === 'string' ? Date.parse(time) / 1000 : (time as number);
const markerTypeNames = annotationTypes const markerTypeNames = annotationTypes
.filter((t) => t.category === 'marker') .filter((t) => t.category === 'marker')
.map((t) => t.name); .map((t) => t.name);
// Find annotation at this timestamp (within tolerance) // Find annotation at this timestamp (within tolerance)
const tolerance = 60; // 60 seconds tolerance const tolerance = 60; // 60 seconds tolerance
const annotation = annotations.find( const annotation = annotations.find(