{"id":41707916,"url":"https://github.com/deepentropy/oakview","last_synced_at":"2026-01-24T21:34:41.768Z","repository":{"id":325083216,"uuid":"1091268369","full_name":"deepentropy/oakview","owner":"deepentropy","description":"A lightweight, embeddable Web Component wrapper for TradingView's Lightweight Charts.","archived":false,"fork":false,"pushed_at":"2026-01-21T21:11:04.000Z","size":20898,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-22T10:00:46.830Z","etag":null,"topics":["lightweight-charts","tradingview"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/deepentropy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-06T19:35:10.000Z","updated_at":"2026-01-21T21:11:08.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/deepentropy/oakview","commit_stats":null,"previous_names":["deepentropy/oakview"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/deepentropy/oakview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepentropy%2Foakview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepentropy%2Foakview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepentropy%2Foakview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepentropy%2Foakview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deepentropy","download_url":"https://codeload.github.com/deepentropy/oakview/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepentropy%2Foakview/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28737384,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-24T21:19:41.845Z","status":"ssl_error","status_checked_at":"2026-01-24T21:13:38.675Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lightweight-charts","tradingview"],"created_at":"2026-01-24T21:34:41.198Z","updated_at":"2026-01-24T21:34:41.760Z","avatar_url":"https://github.com/deepentropy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# OakView\n\n[![npm version](https://img.shields.io/npm/v/oakview.svg)](https://www.npmjs.com/package/oakview)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nA TradingView-style charting Web Component built\non [lightweight-charts v5](https://github.com/tradingview/lightweight-charts). Drop-in chart with toolbar, drawing\ntools, and flexible data provider architecture.\n\n## Features\n\n- **Simple Integration**: `\u003coak-view\u003e` - single tag for full-featured charts\n- **TradingView UI**: Built-in toolbar, symbol search, interval selector, chart types\n- **Drawing Tools**: 21 professional drawing tools (trend lines, Fibonacci, shapes)\n- **Data Agnostic**: Bring your own data provider (REST, WebSocket, CSV)\n- **Full API Access**: Direct access to lightweight-charts v5 API\n- **Framework Agnostic**: Works with React, Vue, Angular, or vanilla JS\n- **Multiple Layouts**: Single, dual, triple, or quad pane layouts\n- **Theme Support**: Light and dark themes\n\n## Installation\n\n```bash\nnpm install oakview\n```\n\n## Quick Start\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003cscript type=\"module\"\u003e\n    import 'oakview';\n    import { OakViewDataProvider } from 'oakview';\n\n    class MyProvider extends OakViewDataProvider {\n      async initialize() { /* Connect to your data source */ }\n\n      async fetchHistorical(symbol, interval) {\n        const response = await fetch(`/api/bars/${symbol}/${interval}`);\n        const data = await response.json();\n        return data.map(bar =\u003e ({\n          time: bar.timestamp,  // Unix seconds\n          open: bar.open,\n          high: bar.high,\n          low: bar.low,\n          close: bar.close,\n          volume: bar.volume\n        }));\n      }\n    }\n\n    const chart = document.getElementById('chart');\n    const provider = new MyProvider();\n    await provider.initialize();\n    chart.setDataProvider(provider);\n  \u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003coak-view id=\"chart\" symbol=\"AAPL\" theme=\"dark\"\u003e\u003c/oak-view\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Data Providers\n\nOakView uses a flexible data provider system. Implement these methods:\n\n| Method                                  | Required | Description            |\n|-----------------------------------------|----------|------------------------|\n| `initialize(config)`                    | Yes      | Connect to data source |\n| `fetchHistorical(symbol, interval)`     | Yes      | Load OHLCV bars        |\n| `subscribe(symbol, interval, callback)` | No       | Real-time updates      |\n| `searchSymbols(query)`                  | No       | Symbol search          |\n| `getAvailableIntervals(symbol)`         | No       | List timeframes        |\n\n### Example Providers\n\n- **[CSV Provider](./examples/csv/)** - Load from static CSV files\n- **[WebSocket Provider](./examples/websocket/)** - Real-time streaming\n- **[VoltTrading Provider](./examples/volttrading/)** - Production REST + WebSocket\n\n### Data Format\n\n```javascript\n// OHLCV bar format\n{\n  time: 1700000000,    // Unix timestamp in SECONDS (not milliseconds)\n  open: 150.00,\n  high: 152.50,\n  low: 149.00,\n  close: 151.75,\n  volume: 1000000      // Optional\n}\n```\n\n**Important**: Time must be in Unix seconds. Data must be sorted ascending (oldest first).\n\n## API Reference\n\n### `\u003coak-view\u003e` Attributes\n\n| Attribute | Type                                             | Default    | Description    |\n|-----------|--------------------------------------------------|------------|----------------|\n| `layout`  | `'single'` \\| `'dual'` \\| `'triple'` \\| `'quad'` | `'single'` | Pane layout    |\n| `symbol`  | `string`                                         | `'SYMBOL'` | Initial symbol |\n| `theme`   | `'light'` \\| `'dark'`                            | `'dark'`   | Color theme    |\n\n### Layout Methods\n\n```javascript\nconst chart = document.getElementById('chart');\n\n// Set data provider\nchart.setDataProvider(provider);\n\n// Get chart pane (0-indexed)\nconst pane = chart.getChartAt(0);\n\n// Get pane count\nconst count = chart.getChartCount();\n\n// Change layout\nchart.setLayout('dual');\n```\n\n### Chart Pane Methods\n\n```javascript\nconst pane = chart.getChartAt(0);\n\n// Set OHLCV data\npane.setData(bars);\n\n// Update real-time\npane.updateRealtime(bar);\n\n// Get lightweight-charts instance (full API access)\nconst lwChart = pane.getChart();\n\n// Get main series\nconst series = pane.getSeries();\n```\n\n### Events\n\n```javascript\nchart.addEventListener('symbol-change', (e) =\u003e {\n  console.log('Symbol:', e.detail.symbol);\n});\n\nchart.addEventListener('interval-change', (e) =\u003e {\n  console.log('Interval:', e.detail.interval);\n});\n```\n\n## Direct API Access\n\nAccess the underlying lightweight-charts v5 API for advanced features:\n\n```javascript\nconst pane = chart.getChartAt(0);\n\n// Get lightweight-charts instance\nconst lwChart = pane.getChart();\nconst series = pane.getSeries();\n\n// Add price lines\nseries.createPriceLine({\n  price: 150.00,\n  color: '#FF9800',\n  title: 'Entry'\n});\n\n// Add markers\nseries.setMarkers([{\n  time: 1700000000,\n  position: 'belowBar',\n  color: '#26a69a',\n  shape: 'arrowUp',\n  text: 'BUY'\n}]);\n\n// Configure time scale\nlwChart.timeScale().fitContent();\n```\n\n## Drawing Tools\n\n21 professional drawing tools organized by category:\n\n- **Lines**: Trend Line, Horizontal, Vertical, Ray, Arrow, Extended Line\n- **Fibonacci**: Retracement, Parallel Channel\n- **Shapes**: Rectangle, Circle, Triangle, Price Range\n- **Annotations**: Text, Callout, Brush, Highlighter, Path\n\n```javascript\nconst pane = chart.getChartAt(0);\n\n// Activate tool\npane.setActiveTool('trend-line');\n\n// Add drawing programmatically\npane.addDrawing('horizontal-line', [\n  { time: 1700000000, price: 150 }\n], { lineColor: '#ef5350' });\n\n// Export/import drawings\nconst json = pane.exportDrawings();\npane.importDrawings(json);\n```\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Start dev server\nnpm run dev\n\n# Build for production\nnpm run build\n\n# Run tests\nnpm test\n```\n\n## Browser Support\n\n- Chrome/Edge 79+\n- Firefox 63+\n- Safari 13.1+\n\n## Tech Stack\n\n- [lightweight-charts v5](https://github.com/tradingview/lightweight-charts) - Charting engine\n- [Lit](https://lit.dev/) - Web Components\n- [TypeScript](https://www.typescriptlang.org/) - Type safety\n- [Vite](https://vitejs.dev/) - Build tool\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeepentropy%2Foakview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeepentropy%2Foakview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeepentropy%2Foakview/lists"}