feat: complete candle annotator implementation

- Created CandleChart component with lightweight-charts integration
- Implemented SvgOverlay component for line drawing
- Integrated all components in main page
- Fixed TypeScript and Tailwind CSS compatibility issues
- Added comprehensive README.md with project documentation
- Created DEPLOYMENT.md with setup and troubleshooting guide
- Downgraded to stable versions (Tailwind v3, lightweight-charts v4)
- All 59 tasks from OpenSpec completed
This commit is contained in:
Marko Djordjevic 2026-02-12 11:20:29 +01:00
parent 8d1e72579e
commit 23f18f405a
11 changed files with 8166 additions and 24 deletions

View file

@ -1,19 +1,26 @@
'use client';
import { useState } from 'react';
import { useState, useRef } from 'react';
import Toolbox, { Tool } from '@/components/Toolbox';
import FileUpload from '@/components/FileUpload';
import CandleChart, { CandleChartHandle } from '@/components/CandleChart';
export default function Home() {
const [activeTool, setActiveTool] = useState<Tool>(null);
const chartRef = useRef<CandleChartHandle>(null);
const handleExport = () => {
window.location.href = '/api/export';
};
const handleUploadSuccess = () => {
// TODO: Trigger chart refresh
console.log('Upload successful - refresh chart');
// Refresh chart data after successful upload
chartRef.current?.refreshData();
};
const handleAnnotationChange = () => {
// Refresh chart when annotations change
chartRef.current?.refreshData();
};
return (
@ -34,11 +41,12 @@ export default function Home() {
</aside>
{/* Main chart area */}
<main className="flex-1 flex items-center justify-center bg-background">
<div className="text-muted-foreground text-center">
<p className="text-lg">Upload a CSV file to view the candlestick chart</p>
<p className="text-sm mt-2">CSV format: time, open, high, low, close</p>
</div>
<main className="flex-1 relative">
<CandleChart
ref={chartRef}
activeTool={activeTool}
onAnnotationChange={handleAnnotationChange}
/>
</main>
</div>
);