\n 🔍\n results.length > 0 && setIsOpen(true)}\n placeholder=\"Search symbol (AAPL, BTC-USD, EURUSD=X)\"\n class=\"bg-transparent outline-none text-sm text-white placeholder-gray-500 w-64\"\n />\n {loading && ...}\n

\n\n {isOpen && results.length > 0 && (\n

\n {results.map((r) => (\n handleSelect(r.symbol)}\n >\n {typeEmoji[r.type] || \"📄\"}\n

{r.symbol}

{r.name}

\n {r.exchange}\n \n ))}\n

\n )}\n

\n );\n}\n",[177,93,82],"c6b94040-53ae-11f1-a85a-ee650bb23af1",["D",1779214554856],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\n\ninterface Candle {\n time: number;\n open: number;\n high: number;\n low: number;\n close: number;\n volume: number;\n}\n\ninterface ChartData {\n symbol: string;\n currency: string;\n exchangeName: string;\n instrumentType: string;\n candles: Candle[];\n}\n\n// Calculate anchored VWAP from a given index\nfunction calcAnchoredVWAP(candles: Candle[], anchorIdx: number) {\n const vwapData: { time: number; value: number }[] = [];\n let cumTPV = 0; // cumulative (typical price * volume)\n let cumVol = 0; // cumulative volume\n\n for (let i = anchorIdx; i < candles.length; i++) {\n const c = candles[i];\n const tp = (c.high + c.low + c.close) / 3;\n cumTPV += tp * c.volume;\n cumVol += c.volume;\n if (cumVol > 0) {\n vwapData.push({ time: c.time, value: Number((cumTPV / cumVol).toFixed(4)) });\n }\n }\n return vwapData;\n}\n\nexport function Chart({ symbol, interval }: { symbol: string; interval: \"5m\" | \"1d\" }) {\n const containerRef = useRef(null);\n const chartRef = useRef(null);\n const candleSeriesRef = useRef(null);\n const volumeSeriesRef = useRef(null);\n const vwapSeriesRef = useRef(null);\n const candlesRef = useRef([]);\n const [anchorTime, setAnchorTime] = useState(null);\n const [status, setStatus] = useState(\"Loading...\");\n const [chartInfo, setChartInfo] = useState<{ symbol: string; currency: string } | null>(null);\n const lwcModuleRef = useRef(null);\n\n const range = interval === \"5m\" ? \"5d\" : \"1y\";\n\n // Load lightweight-charts dynamically\n const getLWC = useCallback(async () => {\n if (lwcModuleRef.current) return lwcModuleRef.current;\n lwcModuleRef.current = await import(\"https://esm.sh/lightweight-charts@4.1.3\");\n return lwcModuleRef.current;\n }, []);\n\n // Initialize chart\n useEffect(() => {\n let disposed = false;\n\n (async () => {\n const lwc = await getLWC();\n if (disposed || !containerRef.current) return;\n\n // Clean up previous chart\n if (chartRef.current) {\n chartRef.current.remove();\n chartRef.current = null;\n }\n\n const chart = lwc.createChart(containerRef.current, {\n layout: {\n background: { color: \"#0a0a1a\" },\n textColor: \"#9ca3af\",\n },\n grid: {\n vertLines: { color: \"#1f2937\" },\n horzLines: { color: \"#1f2937\" },\n },\n crosshair: {\n mode: lwc.CrosshairMode.Normal,\n },\n rightPriceScale: {\n borderColor: \"#374151\",\n },\n timeScale: {\n borderColor: \"#374151\",\n timeVisible: interval === \"5m\",\n secondsVisible: false,\n },\n width: containerRef.current.clientWidth,\n height: containerRef.current.clientHeight,\n });\n\n const candleSeries = chart.addCandlestickSeries({\n upColor: \"#22c55e\",\n downColor: \"#ef4444\",\n borderDownColor: \"#ef4444\",\n borderUpColor: \"#22c55e\",\n wickDownColor: \"#ef4444\",\n wickUpColor: \"#22c55e\",\n });\n\n const volumeSeries = chart.addHistogramSeries({\n color: \"#3b82f6\",\n priceFormat: { type: \"volume\" },\n priceScaleId: \"\",\n });\n\n volumeSeries.priceScale().applyOptions({\n scaleMargins: { top: 0.8, bottom: 0 },\n });\n\n chartRef.current = chart;\n candleSeriesRef.current = candleSeries;\n volumeSeriesRef.current = volumeSeries;\n\n // Handle resize\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries[0] && chartRef.current) {\n const { width, height } = entries[0].contentRect;\n chartRef.current.applyOptions({ width, height });\n }\n });\n resizeObserver.observe(containerRef.current);\n\n // Click handler for anchoring\n chart.subscribeClick((param: any) => {\n if (!param.time) return;\n // Find the candle index by time\n const candles = candlesRef.current;\n const clickedTime = typeof param.time === \"object\"\n ? new Date(param.time.year, param.time.month - 1, param.time.day).getTime() / 1000\n : param.time;\n const idx = candles.findIndex((c) => c.time === clickedTime);\n if (idx >= 0) {\n setAnchorTime(clickedTime);\n drawVWAP(candles, idx);\n }\n });\n\n return () => {\n resizeObserver.disconnect();\n };\n })();\n\n return () => {\n disposed = true;\n if (chartRef.current) {\n chartRef.current.remove();\n chartRef.current = null;\n }\n };\n }, [interval]);\n\n // Draw VWAP line\n const drawVWAP = useCallback(async (candles: Candle[], anchorIdx: number) => {\n const lwc = await getLWC();\n if (!chartRef.current) return;\n\n // Remove old VWAP line\n if (vwapSeriesRef.current) {\n chartRef.current.removeSeries(vwapSeriesRef.current);\n vwapSeriesRef.current = null;\n }\n\n const vwapData = calcAnchoredVWAP(candles, anchorIdx);\n if (vwapData.length === 0) return;\n\n const vwapSeries = chartRef.current.addLineSeries({\n color: \"#f59e0b\",\n lineWidth: 2,\n lineStyle: lwc.LineStyle.Solid,\n title: \"AVWAP\",\n priceLineVisible: true,\n lastValueVisible: true,\n });\n\n vwapSeries.setData(vwapData);\n\n // Add anchor marker\n candleSeriesRef.current?.setMarkers([{\n time: candles[anchorIdx].time,\n position: \"belowBar\",\n color: \"#f59e0b\",\n shape: \"arrowUp\",\n text: \"⚓ Anchor\",\n }]);\n\n vwapSeriesRef.current = vwapSeries;\n }, [getLWC]);\n\n // Fetch data\n useEffect(() => {\n let cancelled = false;\n\n (async () => {\n setStatus(\"Loading...\");\n setAnchorTime(null);\n\n // Remove old vwap and markers\n if (vwapSeriesRef.current && chartRef.current) {\n chartRef.current.removeSeries(vwapSeriesRef.current);\n vwapSeriesRef.current = null;\n }\n if (candleSeriesRef.current) {\n candleSeriesRef.current.setMarkers([]);\n }\n\n try {\n const resp = await fetch(`/api/chart?symbol=${encodeURIComponent(symbol)}&interval=${interval}&range=${range}`);\n const data: ChartData = await resp.json();\n if (cancelled) return;\n\n if ((data as any).error) {\n setStatus((data as any).error);\n return;\n }\n\n const candles = data.candles;\n candlesRef.current = candles;\n\n if (candleSeriesRef.current) {\n candleSeriesRef.current.setData(\n candles.map((c) => ({ time: c.time, open: c.open, high: c.high, low: c.low, close: c.close })),\n );\n }\n\n if (volumeSeriesRef.current) {\n volumeSeriesRef.current.setData(\n candles.map((c) => ({\n time: c.time,\n value: c.volume,\n color: c.close >= c.open ? \"rgba(34,197,94,0.3)\" : \"rgba(239,68,68,0.3)\",\n })),\n );\n }\n\n if (chartRef.current) {\n chartRef.current.timeScale().fitContent();\n }\n\n setChartInfo({ symbol: data.symbol, currency: data.currency });\n setStatus(\"\");\n } catch (err) {\n if (!cancelled) setStatus(\"Failed to load data\");\n }\n })();\n\n return () => { cancelled = true; };\n }, [symbol, interval, range]);\n\n // Clear anchor\n const clearAnchor = () => {\n setAnchorTime(null);\n if (vwapSeriesRef.current && chartRef.current) {\n chartRef.current.removeSeries(vwapSeriesRef.current);\n vwapSeriesRef.current = null;\n }\n if (candleSeriesRef.current) {\n candleSeriesRef.current.setMarkers([]);\n }\n };\n\n return (\n

\n {/* Status bar */}\n {(status || chartInfo || anchorTime) && (\n

\n {status && {status}}\n {chartInfo && !status && (\n \n {chartInfo.symbol} · {chartInfo.currency} · {interval === \"5m\" ? \"5 min\" : \"Daily\"}\n \n )}\n {anchorTime && (\n \n ⚓ Clear Anchor\n \n )}\n

\n )}\n

\n );\n}\n",[177,93,91],"a95f6308-53ae-11f1-8bd1-ee650bb23af1",["D",1779214505606],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { SearchBar } from \"./SearchBar.tsx\";\nimport { Chart } from \"./Chart.tsx\";\n\nexport function App() {\n const [symbol, setSymbol] = useState(\"AAPL\");\n const [interval, setInterval_] = useState<\"5m\" | \"1d\">(\"1d\");\n\n const handleSymbolSelect = useCallback((sym: string) => {\n setSymbol(sym);\n }, []);\n\n return (\n

\n {/* Header */}\n

\n ⚓\n Anchored VWAP\n

\n\n \n\n {/* Interval Toggle */}\n

\n setInterval_(\"5m\")}\n >\n 5 min\n \n setInterval_(\"1d\")}\n >\n Daily\n \n

\n\n

\n Click any candle to anchor VWAP\n view source\n

\n\n {/* Chart */}\n

\n \n

\n );\n}\n",[177,93,67],"pulls","branches",1,"forks","envVars",{"_201":26,"_203":26},"connections",{"_201":26,"_202":26},"count","unfilledCount","emptyCount",{"_35":257,"_13":177,"_65":169,"_45":-5,"_37":38,"_170":258,"_172":24,"_39":259,"_41":26,"_68":94,"_174":-5,"_70":30,"_175":-5,"_219":260,"_17":261},{"_35":168,"_13":93,"_65":92,"_45":169,"_37":38,"_170":171,"_172":24,"_39":254,"_41":26,"_68":94,"_174":-5,"_70":30,"_175":-5,"_219":255,"_17":256},{"_35":189,"_13":67,"_65":66,"_45":92,"_37":38,"_170":42,"_172":24,"_39":251,"_41":26,"_68":69,"_174":191,"_70":30,"_175":-5,"_219":252,"_17":253},{"_35":185,"_13":91,"_65":90,"_45":92,"_37":38,"_170":85,"_172":24,"_39":248,"_41":26,"_68":69,"_174":187,"_70":30,"_175":-5,"_219":249,"_17":250},{"_35":181,"_13":82,"_65":81,"_45":92,"_37":38,"_170":76,"_172":24,"_39":245,"_41":26,"_68":69,"_174":183,"_70":30,"_175":-5,"_219":246,"_17":247},{"_35":237,"_13":238,"_65":239,"_45":169,"_37":38,"_170":240,"_172":24,"_39":241,"_41":26,"_68":21,"_174":242,"_70":30,"_175":-5,"_219":243,"_17":244},{"_35":229,"_13":230,"_65":231,"_45":169,"_37":38,"_170":232,"_172":24,"_39":233,"_41":26,"_68":69,"_174":234,"_70":30,"_175":-5,"_219":235,"_17":236},{"_35":222,"_13":223,"_65":224,"_45":-5,"_37":38,"_170":133,"_172":24,"_39":225,"_41":26,"_68":21,"_174":226,"_70":30,"_175":-5,"_219":227,"_17":228},{"_35":213,"_13":214,"_65":106,"_45":-5,"_37":38,"_170":215,"_172":24,"_39":216,"_41":26,"_68":217,"_174":218,"_70":30,"_175":-5,"_219":220,"_17":221},"99b388ee-53ae-11f1-83c5-ee650bb23af1","index.ts",5,["D",1779214479321],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve frontend\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ─── Yahoo Finance API ───────────────────────────────────────────────\n\napp.get(\"/api/chart\", async (c) => {\n const symbol = c.req.query(\"symbol\") || \"AAPL\";\n const interval = c.req.query(\"interval\") || \"1d\"; // \"5m\" or \"1d\"\n const range = c.req.query(\"range\") || \"6mo\"; // depends on interval\n\n // Yahoo Finance v8 chart API\n const url = `https://query1.finance.yahoo.com/v8/finance/chart/${encodeURIComponent(symbol)}`\n + `?interval=${interval}&range=${range}&includePrePost=false`;\n\n const resp = await fetch(url, {\n headers: {\n \"User-Agent\": \"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36\",\n },\n });\n\n if (!resp.ok) {\n return c.json({ error: `Yahoo Finance error: ${resp.status}` }, 400);\n }\n\n const data = await resp.json();\n const result = data?.chart?.result?.[0];\n if (!result) {\n return c.json({ error: \"No data found for this symbol\" }, 404);\n }\n\n const timestamps = result.timestamp || [];\n const quote = result.indicators?.quote?.[0] || {};\n const { open, high, low, close, volume } = quote;\n\n // Build OHLCV candles\n const candles = [];\n for (let i = 0; i < timestamps.length; i++) {\n if (open[i] == null || high[i] == null || low[i] == null || close[i] == null) continue;\n candles.push({\n time: timestamps[i],\n open: Number(open[i].toFixed(4)),\n high: Number(high[i].toFixed(4)),\n low: Number(low[i].toFixed(4)),\n close: Number(close[i].toFixed(4)),\n volume: volume[i] || 0,\n });\n }\n\n const meta = result.meta || {};\n return c.json({\n symbol: meta.symbol,\n currency: meta.currency,\n exchangeName: meta.exchangeName,\n instrumentType: meta.instrumentType,\n candles,\n });\n});\n\n// Search / autocomplete symbols\napp.get(\"/api/search\", async (c) => {\n const q = c.req.query(\"q\") || \"\";\n if (q.length < 1) return c.json({ results: [] });\n\n const url = `https://query1.finance.yahoo.com/v1/finance/search?q=${encodeURIComponent(q)}"esCount=8&newsCount=0`;\n const resp = await fetch(url, {\n headers: {\n \"User-Agent\": \"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36\",\n },\n });\n\n if (!resp.ok) return c.json({ results: [] });\n const data = await resp.json();\n const results = (data.quotes || []).map((q: any) => ({\n symbol: q.symbol,\n name: q.shortname || q.longname || q.symbol,\n type: q.quoteType,\n exchange: q.exchange,\n }));\n\n return c.json({ results });\n});\n\napp.onError((err) => Promise.reject(err));\nexport default app.fetch;\n","children",[],[214],"de7ddbbe-53ae-11f1-a85a-ee650bb23af1","README.md","de7ddc86-53ae-11f1-a85a-ee650bb23af1",["D",1779214594725],"# ⚓ Anchored VWAP\n\nInteractive **Anchored Volume Weighted Average Price** (AVWAP) chart tool powered by Yahoo Finance data.\n\n## Features\n\n- **Click to anchor** — Click any candle on the chart to set the VWAP anchor point\n- **All asset types** — Stocks, ETFs, Crypto, Forex, Futures\n- **Two timeframes** — 5-minute (5 days of data) and Daily (1 year of data)\n- **Symbol search** — Autocomplete search for any Yahoo Finance symbol\n- **Real-time VWAP calculation** — `AVWAP = Σ(TP × Volume) / Σ(Volume)` from anchor forward\n\n## How to Use\n\n1. Search for a symbol (e.g., `AAPL`, `BTC-USD`, `EURUSD=X`)\n2. Select a timeframe (5 min or Daily)\n3. **Click any candle** on the chart to set the anchor point\n4. The golden AVWAP line will appear from that point forward\n5. Click \"Clear Anchor\" to remove the VWAP line\n\n## Architecture\n\n```mermaid\ngraph LR\n A[Browser] --> B[Hono Server]\n B --> C[Yahoo Finance API]\n C --> B\n B --> A\n A --> D[Lightweight Charts]\n D --> E[Click → Anchor VWAP]\n```\n\n## Tech Stack\n\n- **Backend**: Hono (TypeScript)\n- **Frontend**: React 18 + TradingView Lightweight Charts\n- **Data**: Yahoo Finance v8 API\n- **Styling**: Twind (Tailwind CSS)\n",[],[223],"a126c41a-53ae-11f1-8bd1-ee650bb23af1","index.tsx","a126c514-53ae-11f1-8bd1-ee650bb23af1",8,["D",1779214491818],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"No root element found\");\ncreateRoot(root).render();\n",[],[177,230],"9e92b2f4-53ae-11f1-a85a-ee650bb23af1","index.html","9e92b498-53ae-11f1-a85a-ee650bb23af1",7,["D",1779214487487],"\n\n \n \n \n Anchored VWAP\n \n ⚓\">\n \n \n

\n \n \n \n\n",[],[177,238],["D",1779214520114],[],[177,93,82],["D",1779214554856],[],[177,93,91],["D",1779214505606],[],[177,93,67],["D",1779214495694],[206,207,208],[177,93],"9b592654-53ae-11f1-8bd1-ee650bb23af1",6,["D",1779214482084],[205,209,210],[177],["D",1779214164558],["D",1789501878689],{"_11":12,"_146":73},{"_11":12,"_142":12,"_72":73,"_31":71,"_143":144,"_145":30},{"_41":133,"_13":16,"_35":38,"_134":96,"_135":-5,"_136":-5,"_137":-5,"_138":-5,"_139":-5,"_140":14,"_141":12},"ctx",{"_55":-5,"_165":300,"_301":302,"_303":304,"_305":30,"_306":30,"_307":30,"_308":24,"_309":-5,"_310":-7,"_311":-7,"_312":26,"_313":30,"_314":30,"_315":-5,"_316":30,"_317":30,"_318":30,"_319":-5},"ENV",{"_271":272,"_273":274,"_275":16,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · components