feat: add color support for line annotations

- Add color field to annotations schema with default blue (#3b82f6)
- Add color picker UI with 5 preset colors (red, green, blue, yellow, white)
- Pass selected color through component hierarchy (Page -> Toolbox, CandleChart -> SvgOverlay)
- Store color when creating line annotations
- Render lines with their stored color
- Update database with color column
- Preview lines show selected color during drawing

Phase 1 of LINE_DRAWING_IMPROVEMENTS.md complete
This commit is contained in:
Marko Djordjevic 2026-02-12 14:04:51 +01:00
parent 5767669b2c
commit 006e95c266
6 changed files with 51 additions and 5 deletions

View file

@ -13,6 +13,7 @@ interface Annotation {
endTime?: number;
endPrice?: number;
} | null;
color?: string;
created_at: number;
}
@ -21,6 +22,7 @@ interface SvgOverlayProps {
series: ISeriesApi<'Candlestick'> | null;
activeTool: string | null;
onAnnotationChange?: () => void;
selectedColor: string;
}
interface Point {
@ -33,6 +35,7 @@ export default function SvgOverlay({
series,
activeTool,
onAnnotationChange,
selectedColor,
}: SvgOverlayProps) {
const svgRef = useRef<SVGSVGElement>(null);
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
@ -169,6 +172,7 @@ export default function SvgOverlay({
body: JSON.stringify({
timestamp: drawingLine.start.time,
label_type: 'line',
color: selectedColor,
geometry: {
startTime: drawingLine.start.time,
startPrice: drawingLine.start.price,
@ -299,7 +303,7 @@ export default function SvgOverlay({
y1={start.y}
x2={end.x}
y2={end.y}
stroke="#3b82f6"
stroke={annotation.color || '#3b82f6'}
strokeWidth="2"
style={{ cursor: activeTool === 'delete' ? 'pointer' : 'default' }}
/>
@ -322,7 +326,7 @@ export default function SvgOverlay({
y1={start.y}
x2={end.x}
y2={end.y}
stroke="#3b82f6"
stroke={selectedColor}
strokeWidth="2"
strokeDasharray="5,5"
opacity="0.6"