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:
parent
5767669b2c
commit
006e95c266
6 changed files with 51 additions and 5 deletions
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue