PickleChart

เรื่องราวและแรงบันดาลใจ (The Story & Motivation)

ในโลกของการเทรดปัจจุบัน ข้อมูลระดับ Order Flow และ Liquidity (เช่น Depth of Market, Big Trades, Stop Hunts) มักถูกจำกัดอยู่บนแพลตฟอร์มแบบปิด (Closed-source) ที่คิดค่าบริการรายเดือนหลักพันถึงหลักหมื่นบาท หรือซอฟต์แวร์สมัยใหม่ที่เต็มไปด้วยแอนิเมชันหนักเครื่องที่กินทรัพยากรโดยไม่จำเป็น

พวกเราจึงตั้งคำถามว่า: ถ้าเรานำความเร็ว ความเบา และความ Nostalgic ของ Windows XP (ยุคทองที่ซอฟต์แวร์ทำงานได้รวดเร็ว ตรงไปตรงมา ไม่มีสิ่งรบกวน) มาผสานกับขุมพลัง Web Hardware Acceleration และ WebSocket ยุคใหม่ล่ะ?

จึงเกิดเป็น PickleChart — เทอร์มินัลวิเคราะห์สภาพคล่องและคำสั่งซื้อขายระดับสถาบันแบบ Open Source และ 100% Local-First

สิ่งที่เรากำลังสร้าง (What We Are Building)

PickleChart คือ Trading Terminal บนเว็บที่เทรดเดอร์สามารถเปิดเบราว์เซอร์แล้วใช้งานได้ทันทีโดยไม่ต้องติดตั้งโปรแกรมหรือสมัครสมาชิก:

PickleChart คือ Trading Terminal บนเว็บที่เทรดเดอร์สามารถเปิดเบราว์เซอร์แล้วใช้งานได้ทันทีโดยไม่ต้องติดตั้งโปรแกรมหรือสมัครสมาชิก:
- Real-Time Order Flow: เชื่อมต่อข้อมูลสตรีมตรงผ่าน Binance Futures WebSocket ความละเอียดระดับมิลลิวินาที
- 3D Big Trade Spheres: อัลกอริทึม Trade Clustering ที่ตรวจจับคำสั่งซื้อขายขนาดใหญ่ (Whale Trades) พร้อมแสงเงา 3 มิติและคลื่นกระเพื่อม (Ripple) แบบ Bookmap
- Liquidity Radar: สแกนกำแพงคำสั่ง Limit Wall, จุดซุ่ม Stop Loss / Take Profit และตรวจจับ Order Swept (จุดที่สภาพคล่องถูกกวาด)
- Native Canvas Drawing & Indicators: เครื่องมือวาดเส้น Trendline, กล่อง Order Block/FVG, Fibonacci, ป้ายโน้ต และ Indicator พื้นฐาน (EMA, VWAP, Bollinger Bands)
- Windows XP Luna UI: สัมผัสย้อนยุคที่ใช้งานได้จริง (Win32 Sunken ListViews, Command Rebar, Beveled Status Bar, Tahoma System Font)

ปัญหาที่ PickleChart เข้ามาแก้ไข (Problems It Solves)

• Subscription Fatigue: แพลตฟอร์ม Order Flow คิดเงินแพงและบังคับต่ออายุรายเดือน | Free & Open Source 100% ภายใต้ MIT License ใช้งานได้อิสระตลอดไป
• High Friction & Account Walls: ต้องลงทะเบียน ยืนยันตัวตน หรือดาวน์โหลดไฟล์ขนาดใหญ่
• Zero Setup / Low Friction**: เปิดผ่านเว็บเบราว์เซอร์ เชื่อมต่อสดกับกระดานเทรดได้ทันที
• Laggy Web Charts: กราฟเว็บส่วนใหญ่กระตุกเมื่อเจอการยิง Order ระดับ 1,000 trades/วินาที | 60 FPS Canvas & Micro-batching**: วาดด้วย Native HTML5 Canvas ผ่าน GPU พร้อมบัฟเฟอร์แยกเธรดคำนวณ
• Privacy & Cloud Lock-in**: กราฟที่วาดหรือการตั้งค่าถูกส่งไปเก็บบน Server ของผู้ให้บริการ
• 100% Local-First**: บันทึกทุกอย่างลง LocalStorage นำเข้ารูป Wallpaper พื้นหลัง และ Export/Import Preset เป็น JSON ได้เอง
• Blind Trading: แท่งเทียนทั่วไปมองไม่เห็นการสู้กันระหว่าง Buyer และ Seller ในระดับ Tick | แสดง Aggressive Market Orders และ Resting Liquidity ให้เห็นแบบจะๆ

รายละเอียดทางเทคนิคเชิงลึก (Technical Architecture)

1. Rendering Engine (HTML5 Canvas 2D Context):
- สถาปัตยกรรมแยกเลเยอร์ (Grid -> Candles -> Liquidity Walls -> 3D Big Trade Bubbles -> Drawings -> HUD Crosshair)
- เรนเดอร์ด้วย requestAnimationFrame ที่คงที่ 60 FPS ปราศจากปัญหา Layout Thrashing
2. Micro-Batching State Guard (React 18):
- สตรีม WebSocket สามารถส่งข้อมูลมากว่า 2,000 events/วินาที เราใช้ useRef เป็นบัฟเฟอร์รับข้อมูล แล้วใช้ Timer ความถี่ 20 FPS (50ms) ในการอัปเดต React State ทำให้ UI ไม่ค้างและนิ่งสนิท
3. Trade Clustering & Aggression Algorithm:
- คำนวณอัตราส่วน Buyer-Initiated vs Seller-Initiated Volume รวมเป็นก้อนเดี่ยว พร้อมจำลองแสง Specular Highlights และเสียง Chime แบบ Dynamic ตามขนาด Notional
4. Sub-Second Candlestick Synthesis:
- ระบบ In-memory Aggregator สังเคราะห์แท่งเทียนระดับ Ultra-fast (1s, 5s, 15s, 30s) จาก Raw Trades สดๆ แบบ Real-Time
5. Win32 UI Design System in TailwindCSS:
- จำลองระบบ UI แบบคลาสสิก: Sunken Borders (border-t-2 border-l-2 border-[#808080] border-r border-b border-white), Alternate List Row Striping, Windows XP Color Palettes (Luna Blue, Royale Noir, Metallic)

แผนการพัฒนาต่อไป (Roadmap & Future Vision)

- [ ] Footprint Chart / Volume Profile: การแสดงปริมาณการซื้อขายแยกตามแต่ละขั้นราคาภายในแท่งเทียน (Bid/Ask Imbalance)
- [ ] Multi-Exchange Feeds: เพิ่มการเชื่อมต่อ Bybit, OKX, และ Coinbase
- [ ] Market Replay / Tape Recorder: โหมดอัดเทปการเทรดและเล่นย้อนหลังสำหรับฝึกซ้อม Backtesting
- [ ] Desktop Native Build: พอร์ตเป็นแอป Desktop น้ำหนักเบาด้วย Tauri / Rust

การเปิดรับผู้สนใจร่วมงาน (Collaboration & Contributing)

PickleChart เป็นโปรเจกต์โอเพนซอร์สที่ยินดีต้อนรับนักพัฒนาทุกระดับ ไม่ว่าจะเป็น:
- Frontend / Canvas Wizards: มาร่วมพัฒนา Layer การวาดและการคำนวณคณิตศาสตร์กราฟิก
- Quant & Order Flow Traders: มาร่วมแนะนำฟีเจอร์ Liquidity Tracking และอัลกอริทึมตรวจจับความผิดปกติของวอลุ่ม
- Designers: มาร่วมต่อยอด Windows XP theme components และไอคอนวินเทจ