From cbe81900a8e50ea8e416ca4228a34061889e8d7c Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Tue, 14 Apr 2026 16:57:24 -0700 Subject: [PATCH 01/68] Refactor chat to ACP-native subpackage with Deep Agents provider and SQLite state backend MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Restructures the chat system from 3 monolithic files into a `pywry/chat/` subpackage implementing the Agent Client Protocol (ACP). All provider adapters now conform to ACP's session lifecycle (initialize → new_session → prompt → cancel) and yield typed SessionUpdate notifications. Chat subpackage: - models.py: ACP content blocks, ACPToolCall, ChatMessage, ChatThread - session.py: SessionMode, SessionConfigOption, PlanEntry, PermissionRequest, Capabilities - updates.py: SessionUpdate discriminated union (11 types) - artifacts.py: 8 artifact types including TradingViewArtifact - manager.py: ChatManager accepting providers or legacy handlers - providers/: OpenAI, Anthropic, Magentic, Callback, Stdio, DeepAgent - permissions.py: RBAC permission mappings for ACP operations - html.py: build_chat_html() DeepAgent provider: - Wraps LangChain Deep Agents CompiledGraph - Maps LangGraph astream_events to ACP SessionUpdate types - Auto-configures checkpointer and memory store from PyWry state backend - Built-in system prompt onboarding the agent to the chat UI - Tool kind mapping for Deep Agents built-in tools - write_todos → PlanUpdate translation SQLite state backend: - Complete implementation of all 5 state ABCs (Widget, Session, Chat, EventBus, ConnectionRouter) - Encrypted at rest via SQLCipher with keyring-based key management - Full audit trail: tool calls, artifacts, token usage, resources, skills - Auto-created admin session with seeded role permissions - Same schema as Redis — fully interchangeable JS extraction: - 8 JS files extracted from scripts.py to frontend/src/ - WS bridge extracted from inline.py to frontend/src/ws-bridge.js - scripts.py rewritten to load from files Frontend: - TradingView artifact renderer in chat-handlers.js - ACP event handlers: permission-request, plan-update, mode-update, config-update, commands-update - PyWryChatWidget expanded with chat ESM and trait-based asset loading Documentation: - Rewrote chat guide and providers page with full ACP coverage - Created PyTauri, Anywidget, and IFrame+WebSocket transport protocol pages - Rewrote AG Grid and Plotly integration pages - Rewrote Why PyWry page reflecting current capabilities - Moved multi-widget to concepts, tauri-plugins under pytauri - Purged all print() statements from example code across all docs - Removed all section-banner comments and forbidden comment words Co-Authored-By: Claude Opus 4.6 (1M context) --- .claude/settings.local.json | 16 + pywry/docs/docs/components/chat/index.md | 411 +- pywry/docs/docs/components/modal/index.md | 2 +- pywry/docs/docs/features.md | 2 +- pywry/docs/docs/getting-started/quickstart.md | 2 - pywry/docs/docs/getting-started/why-pywry.md | 117 +- pywry/docs/docs/guides/app-show.md | 5 +- pywry/docs/docs/guides/browser-mode.md | 4 +- pywry/docs/docs/guides/builder-options.md | 8 +- pywry/docs/docs/guides/configuration.md | 2 +- pywry/docs/docs/guides/deploy-mode.md | 6 +- pywry/docs/docs/guides/javascript-bridge.md | 3 +- pywry/docs/docs/guides/menus.md | 36 +- .../{integrations => guides}/multi-widget.md | 4 +- pywry/docs/docs/guides/oauth2.md | 8 +- pywry/docs/docs/guides/window-management.md | 2 +- pywry/docs/docs/integrations/aggrid/index.md | 219 +- pywry/docs/docs/integrations/anywidget.md | 320 +- .../docs/integrations/chat/chat-providers.md | 24 +- pywry/docs/docs/integrations/chat/index.md | 475 ++- pywry/docs/docs/integrations/index.md | 14 +- .../docs/integrations/inline-widget/index.md | 265 ++ pywry/docs/docs/integrations/plotly/index.md | 351 +- pywry/docs/docs/integrations/pytauri/index.md | 411 ++ .../{ => pytauri}/tauri-plugins.md | 8 +- .../docs/integrations/tradingview/index.md | 10 +- pywry/docs/docs/mcp/setup.md | 4 +- pywry/docs/docs/reference/chat-manager.md | 143 +- pywry/docs/docs/reference/events/chat.md | 4 +- pywry/docs/docs/reference/index.md | 4 +- pywry/docs/mkdocs.yml | 9 +- pywry/examples/pywry_demo_aggrid.ipynb | 2 +- pywry/examples/pywry_demo_chat.py | 146 +- pywry/examples/pywry_demo_chat_artifacts.py | 21 +- pywry/examples/pywry_demo_chat_magentic.py | 21 +- pywry/pyproject.toml | 9 + pywry/pywry/__init__.py | 90 +- pywry/pywry/app.py | 29 +- pywry/pywry/chat.py | 732 ---- pywry/pywry/chat/__init__.py | 166 + pywry/pywry/chat/artifacts.py | 271 ++ pywry/pywry/chat/html.py | 163 + .../{chat_manager.py => chat/manager.py} | 1886 ++++----- pywry/pywry/chat/models.py | 603 +++ pywry/pywry/chat/permissions.py | 80 + pywry/pywry/chat/providers/__init__.py | 211 + pywry/pywry/chat/providers/anthropic.py | 152 + pywry/pywry/chat/providers/callback.py | 152 + pywry/pywry/chat/providers/deepagent.py | 437 +++ pywry/pywry/chat/providers/magentic.py | 165 + pywry/pywry/chat/providers/openai.py | 165 + pywry/pywry/chat/providers/stdio.py | 408 ++ pywry/pywry/chat/session.py | 250 ++ pywry/pywry/chat/updates.py | 163 + pywry/pywry/chat_providers.py | 716 ---- pywry/pywry/config.py | 12 +- pywry/pywry/frontend/src/bridge.js | 139 + pywry/pywry/frontend/src/chat-handlers.js | 123 + pywry/pywry/frontend/src/cleanup.js | 71 + pywry/pywry/frontend/src/event-bridge.js | 14 + pywry/pywry/frontend/src/hot-reload.js | 52 + pywry/pywry/frontend/src/system-events.js | 270 ++ pywry/pywry/frontend/src/theme-manager.js | 101 + pywry/pywry/frontend/src/toolbar-bridge.js | 481 +++ pywry/pywry/frontend/src/ws-bridge.js | 516 +++ pywry/pywry/inline.py | 588 +-- pywry/pywry/mcp/builders.py | 12 +- pywry/pywry/mcp/handlers.py | 16 +- pywry/pywry/mcp/skills/chat/SKILL.md | 5 +- pywry/pywry/scripts.py | 1281 +----- pywry/pywry/state/_factory.py | 34 +- pywry/pywry/state/base.py | 92 + pywry/pywry/state/sqlite.py | 883 +++++ pywry/pywry/state/types.py | 1 + pywry/pywry/widget.py | 84 +- pywry/ruff.toml | 4 + pywry/tests/test_chat.py | 566 ++- pywry/tests/test_chat_e2e.py | 2 +- pywry/tests/test_chat_manager.py | 3471 ++--------------- pywry/tests/test_chat_protocol.py | 745 ++++ pywry/tests/test_deepagent_provider.py | 234 ++ pywry/tests/test_scripts.py | 174 +- pywry/tests/test_state_sqlite.py | 373 ++ pywry/tests/test_system_events.py | 27 +- pywry/tests/test_toolbar.py | 18 +- 85 files changed, 11355 insertions(+), 8961 deletions(-) create mode 100644 .claude/settings.local.json rename pywry/docs/docs/{integrations => guides}/multi-widget.md (96%) create mode 100644 pywry/docs/docs/integrations/inline-widget/index.md create mode 100644 pywry/docs/docs/integrations/pytauri/index.md rename pywry/docs/docs/integrations/{ => pytauri}/tauri-plugins.md (96%) delete mode 100644 pywry/pywry/chat.py create mode 100644 pywry/pywry/chat/__init__.py create mode 100644 pywry/pywry/chat/artifacts.py create mode 100644 pywry/pywry/chat/html.py rename pywry/pywry/{chat_manager.py => chat/manager.py} (50%) create mode 100644 pywry/pywry/chat/models.py create mode 100644 pywry/pywry/chat/permissions.py create mode 100644 pywry/pywry/chat/providers/__init__.py create mode 100644 pywry/pywry/chat/providers/anthropic.py create mode 100644 pywry/pywry/chat/providers/callback.py create mode 100644 pywry/pywry/chat/providers/deepagent.py create mode 100644 pywry/pywry/chat/providers/magentic.py create mode 100644 pywry/pywry/chat/providers/openai.py create mode 100644 pywry/pywry/chat/providers/stdio.py create mode 100644 pywry/pywry/chat/session.py create mode 100644 pywry/pywry/chat/updates.py delete mode 100644 pywry/pywry/chat_providers.py create mode 100644 pywry/pywry/frontend/src/bridge.js create mode 100644 pywry/pywry/frontend/src/cleanup.js create mode 100644 pywry/pywry/frontend/src/event-bridge.js create mode 100644 pywry/pywry/frontend/src/hot-reload.js create mode 100644 pywry/pywry/frontend/src/system-events.js create mode 100644 pywry/pywry/frontend/src/theme-manager.js create mode 100644 pywry/pywry/frontend/src/toolbar-bridge.js create mode 100644 pywry/pywry/frontend/src/ws-bridge.js create mode 100644 pywry/pywry/state/sqlite.py create mode 100644 pywry/tests/test_chat_protocol.py create mode 100644 pywry/tests/test_deepagent_provider.py create mode 100644 pywry/tests/test_state_sqlite.py diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 0000000..d34af37 --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,16 @@ +{ + "permissions": { + "allow": [ + "Bash(find:*)", + "Bash(grep -E \"\\\\.py$\")", + "Bash(grep:*)", + "WebFetch(domain:www.tradingview.com)", + "WebSearch", + "Bash(ls -la \"C:\\\\Users\\\\dangl\\\\github\\\\PyWry\\\\.claude\\\\worktrees\\\\goofy-diffie\\\\pywry\\\\pywry\\\\frontend\\\\src\\\\tvchart\"*)", + "Bash(ls -la \"C:\\\\Users\\\\dangl\\\\github\\\\PyWry\\\\.claude\\\\worktrees\\\\goofy-diffie\\\\pywry\\\\pywry\\\\mcp\"*)", + "Bash(ls \"C:/Users/dangl/github/PyWry/.claude/worktrees/goofy-diffie/pywry/pywry/frontend/src/\"*.js)", + "Bash(echo \"EXIT: $?\")", + "WebFetch(domain:docs.langchain.com)" + ] + } +} diff --git a/pywry/docs/docs/components/chat/index.md b/pywry/docs/docs/components/chat/index.md index 7055983..5070b3a 100644 --- a/pywry/docs/docs/components/chat/index.md +++ b/pywry/docs/docs/components/chat/index.md @@ -1,22 +1,72 @@ # Chat -PyWry includes a first-class chat UI that can run in native windows, notebook widgets, and browser-rendered deployments. The chat stack has two layers: +PyWry ships a complete chat UI component that works in native desktop windows, Jupyter notebooks, and browser tabs. It handles the entire conversation lifecycle — rendering messages, streaming responses token-by-token, managing multiple conversation threads, and displaying rich content like code blocks, charts, and data tables inline. -- `build_chat_html()` for low-level rendering of the chat shell. -- `ChatManager` for the production path: thread management, event wiring, streaming, stop-generation, slash commands, settings, and input requests. +The chat system is built on the **Agent Client Protocol (ACP)**, an open standard that defines how AI coding agents communicate with client applications. You do not need to know anything about ACP to use PyWry chat — the protocol details are handled internally. What it means in practice is that the same chat component can talk to any ACP-compatible agent (like Claude Code or Gemini CLI) as easily as it talks to the OpenAI or Anthropic APIs. -If you are building an interactive assistant, use `ChatManager` unless you explicitly need to assemble the raw chat HTML yourself. +## Architecture Overview -For the complete API surface, see the [Chat API](../../reference/chat.md), [ChatManager API](../../reference/chat-manager.md), and [Chat Providers API](../../integrations/chat/chat-providers.md). +The chat system has two layers: -## Minimal ChatManager Setup +1. **`ChatManager`** — the high-level orchestrator that most developers should use. It handles thread management, event wiring, streaming, cancellation, slash commands, settings menus, and all the plumbing between your AI backend and the chat UI. + +2. **`build_chat_html()`** — the low-level HTML builder that produces the raw chat DOM structure. Use this only if you are assembling a completely custom chat experience and want to handle all events yourself. + +## How It Works + +When a user types a message in the chat input and presses send: + +1. The frontend emits a `chat:user-message` event with the text. +2. `ChatManager` receives the event, stores the message in the thread history, and starts a background thread. +3. The background thread calls your **handler function** (or **provider**) with the conversation history. +4. Your handler returns or yields response chunks — plain strings for text, or typed objects for rich content. +5. `ChatManager` dispatches each chunk to the frontend as it arrives, which renders it in real time. +6. When the handler finishes, the assistant message is finalized and stored in thread history. + +The user can click **Stop** at any time to cancel generation. Your handler receives this signal through `ctx.cancel_event`. + +## Getting Started + +### Install + +```bash +pip install pywry +``` + +For AI provider support, install the optional extras: + +```bash +pip install 'pywry[openai]' # OpenAI +pip install 'pywry[anthropic]' # Anthropic +pip install 'pywry[magentic]' # Magentic (100+ providers) +pip install 'pywry[acp]' # External ACP agents +pip install 'pywry[all]' # Everything +``` + +### Minimal Example + +This creates a chat window with a simple echo handler: ```python -from pywry import Div, HtmlContent, PyWry, Toolbar -from pywry.chat_manager import ChatManager +from pywry import HtmlContent, PyWry +from pywry.chat.manager import ChatManager def handler(messages, ctx): + """Called every time the user sends a message. + + Parameters + ---------- + messages : list[dict] + The full conversation history for the active thread. + Each dict has 'role' ('user' or 'assistant') and 'text'. + ctx : ChatContext + Context object with thread_id, settings, cancel_event, etc. + + Returns or yields + ----------------- + str or SessionUpdate objects — see below. + """ user_text = messages[-1]["text"] return f"You said: {user_text}" @@ -24,12 +74,11 @@ def handler(messages, ctx): app = PyWry(title="Chat Demo") chat = ChatManager( handler=handler, - welcome_message="Welcome to **PyWry Chat**.", - system_prompt="You are a concise assistant.", + welcome_message="Hello! Type a message to get started.", ) widget = app.show( - HtmlContent(html="

Assistant

Ask something in the chat panel.

"), + HtmlContent(html="

My App

"), toolbars=[chat.toolbar(position="right")], callbacks=chat.callbacks(), ) @@ -38,245 +87,307 @@ chat.bind(widget) app.block() ``` -`ChatManager` expects three pieces to be connected together: +Three things must be wired together: -1. `chat.toolbar()` to render the chat panel. -2. `chat.callbacks()` to wire the `chat:*` frontend events. -3. `chat.bind(widget)` after `app.show(...)` so the manager can emit updates back to the active widget. +1. **`chat.toolbar()`** — returns a collapsible sidebar panel containing the chat UI. Pass it to `app.show(toolbars=[...])`. +2. **`chat.callbacks()`** — returns a dict mapping `chat:*` event names to handler methods. Pass it to `app.show(callbacks=...)`. +3. **`chat.bind(widget)`** — tells the manager which widget to send events back to. Call this after `app.show()` returns. -## Handler Shapes +## Writing Handlers -The handler passed to `ChatManager` is the core integration point. PyWry supports all of these forms: +The handler function is where your AI logic lives. It receives the conversation history and a context object, and produces the assistant's response. -- Sync function returning `str` -- Async function returning `str` -- Sync generator yielding `str` chunks -- Async generator yielding `str` chunks -- Sync or async generator yielding rich `ChatResponse` objects +### Return a String -### One-shot response +The simplest handler returns a complete string. The entire response appears at once. ```python def handler(messages, ctx): - question = messages[-1]["text"] - return f"Answering: {question}" + return "Here is my answer." ``` -### Streaming response +### Yield Strings (Streaming) + +For a streaming experience where text appears word-by-word, yield string chunks from a generator: ```python import time def handler(messages, ctx): - text = "Streaming responses work token by token in the chat UI." - for word in text.split(): + words = "This streams one word at a time.".split() + for word in words: if ctx.cancel_event.is_set(): - return + return # User clicked Stop yield word + " " - time.sleep(0.03) + time.sleep(0.05) ``` -### Rich response objects +Always check `ctx.cancel_event.is_set()` between chunks. This is how the Stop button works — it sets the event, and your handler should exit promptly. + +### Yield Rich Objects + +Beyond plain text, handlers can yield typed objects that render as structured UI elements: ```python -from pywry import StatusResponse, ThinkingResponse, TodoItem, TodoUpdateResponse +from pywry.chat.updates import PlanUpdate, StatusUpdate, ThinkingUpdate +from pywry.chat.session import PlanEntry def handler(messages, ctx): - yield StatusResponse(text="Searching project files...") - yield TodoUpdateResponse( - items=[ - TodoItem(id=1, title="Analyze request", status="completed"), - TodoItem(id=2, title="Generate answer", status="in-progress"), - ] - ) - yield ThinkingResponse(text="Comparing the available implementation paths...\n") - yield "Here is the final answer." + # Show a transient status message (disappears when next content arrives) + yield StatusUpdate(text="Searching documentation...") + + # Show collapsible thinking/reasoning (not stored in history) + yield ThinkingUpdate(text="Evaluating three possible approaches...\n") + + # Show a task plan with progress tracking + yield PlanUpdate(entries=[ + PlanEntry(content="Search docs", priority="high", status="completed"), + PlanEntry(content="Synthesize answer", priority="high", status="in_progress"), + ]) + + # Stream the actual answer + yield "Based on the documentation, the answer is..." ``` -## Conversation State +These objects are called **session updates** and follow the ACP specification. The available types are: + +| Type | What It Does | +|------|-------------| +| `StatusUpdate` | Shows a transient inline status (e.g. "Searching...") | +| `ThinkingUpdate` | Shows collapsible reasoning text (not saved to history) | +| `PlanUpdate` | Shows a task list with priority and status for each entry | +| `ToolCallUpdate` | Shows a tool invocation with name, kind, and lifecycle status | +| `CitationUpdate` | Shows a source reference link | +| `ArtifactUpdate` | Shows a rich content block (code, chart, table — see Artifacts below) | +| `PermissionRequestUpdate` | Shows an inline approval card for tool execution | +| `CommandsUpdate` | Dynamically registers slash commands | +| `ConfigOptionUpdate` | Pushes settings options from the agent | +| `ModeUpdate` | Switches the agent's operational mode | -`ChatManager` handles thread state internally: +You can mix these freely with plain text strings in any order. -- Creates a default thread on startup -- Tracks active thread selection -- Supports thread create, switch, rename, and delete events -- Keeps message history per thread -- Exposes `active_thread_id`, `threads`, and `settings` as read-only views +### Async Handlers -Use `send_message()` when you need to push a programmatic assistant message into the active thread or a specific thread. +All handler shapes work as `async` functions or async generators too: ```python -chat.send_message("Background task completed.") +async def handler(messages, ctx): + async for chunk in my_async_llm_stream(messages): + if ctx.cancel_event.is_set(): + return + yield chunk ``` -## Slash Commands +## Using a Provider Instead of a Handler -Slash commands appear in the command palette inside the chat input. Register custom commands with `SlashCommandDef` and optionally handle them through `on_slash_command`. +If you want to connect to an actual LLM API, you can pass a **provider** instead of writing a handler function. Providers implement the ACP session interface and handle message formatting, streaming, and cancellation internally. ```python -from pywry import SlashCommandDef +from pywry.chat.manager import ChatManager +from pywry.chat.providers.openai import OpenAIProvider +provider = OpenAIProvider(api_key="sk-...") +chat = ChatManager( + provider=provider, + system_prompt="You are a helpful coding assistant.", +) +``` -def on_slash(command, args, thread_id): - if command == "/time": - chat.send_message("Current time: **12:34:56**", thread_id) +Available providers: + +| Provider | Backend | Install | +|----------|---------|---------| +| `OpenAIProvider` | OpenAI API | `pip install 'pywry[openai]'` | +| `AnthropicProvider` | Anthropic API | `pip install 'pywry[anthropic]'` | +| `MagenticProvider` | Any magentic-supported LLM | `pip install 'pywry[magentic]'` | +| `CallbackProvider` | Your own Python callable | (included) | +| `StdioProvider` | External ACP agent via subprocess | `pip install 'pywry[acp]'` | + +The `StdioProvider` is special — it spawns an external program (like `claude` or `gemini`) as a subprocess and communicates over stdin/stdout using JSON-RPC. This means you can connect PyWry's chat UI to any ACP-compatible agent without writing any adapter code. + +See [Chat Artifacts And Providers](../../integrations/chat/index.md) for detailed provider documentation. + +## Conversation Threads + +`ChatManager` supports multiple conversation threads. The UI includes a thread picker dropdown in the header bar where users can create, switch between, rename, and delete threads. + +Each thread has its own independent message history. The manager tracks: + +- The active thread ID +- Thread titles +- Per-thread message lists + +You can access these programmatically: + +```python +chat.active_thread_id # Currently selected thread +chat.threads # Dict of thread_id → message list +chat.settings # Current settings values +chat.send_message("Hi!") # Inject a message into the active thread +``` + +## Slash Commands + +Slash commands appear in a palette when the user types `/` in the input bar. Register them at construction time: + +```python +from pywry.chat.models import ACPCommand chat = ChatManager( handler=handler, slash_commands=[ - SlashCommandDef(name="/time", description="Show the current time"), - SlashCommandDef(name="/clearcache", description="Clear cached results"), + ACPCommand(name="/time", description="Show the current time"), + ACPCommand(name="/clear", description="Clear the conversation"), ], - on_slash_command=on_slash, + on_slash_command=my_slash_handler, ) + + +def my_slash_handler(command, args, thread_id): + if command == "/time": + import time + chat.send_message(f"It is {time.strftime('%H:%M:%S')}", thread_id) ``` -PyWry also ships built-in commands at the lower-level `ChatConfig` layer, including `/clear`, `/export`, `/model`, and `/system`. +The `/clear` command is always available by default — it clears the current thread's history. ## Settings Menu -Use `SettingsItem` to populate the gear-menu dropdown. These values are stored by the manager and emitted back through `on_settings_change`. +The gear icon in the chat header opens a settings dropdown. Populate it with `SettingsItem` entries: ```python -from pywry import SettingsItem +from pywry.chat.manager import SettingsItem def on_settings_change(key, value): - print(f"{key} changed to {value}") + if key == "model": + chat.send_message(f"Switched to **{value}**") + elif key == "temp": + chat.send_message(f"Temperature set to **{value}**") chat = ChatManager( handler=handler, settings=[ - SettingsItem( - id="model", - label="Model", - type="select", - value="gpt-4o-mini", - options=["gpt-4o-mini", "gpt-4.1", "claude-sonnet-4"], - ), - SettingsItem( - id="temperature", - label="Temperature", - type="range", - value=0.7, - min=0, - max=2, - step=0.1, - ), + SettingsItem(id="model", label="Model", type="select", + value="gpt-4", options=["gpt-4", "gpt-4o", "claude-sonnet"]), + SettingsItem(id="temp", label="Temperature", type="range", + value=0.7, min=0, max=2, step=0.1), + SettingsItem(id="stream", label="Streaming", type="toggle", value=True), ], on_settings_change=on_settings_change, ) ``` -## Cooperative Cancellation - -The stop button triggers `chat:stop-generation`, and `ChatManager` exposes that to your handler through `ctx.cancel_event`. - -Your handler should check `ctx.cancel_event.is_set()` while streaming so long generations terminate quickly and cleanly. +Setting values are available in your handler via `ctx.settings`: ```python def handler(messages, ctx): - for chunk in very_long_generation(): - if ctx.cancel_event.is_set(): - return - yield chunk + model = ctx.settings.get("model", "gpt-4") + temp = ctx.settings.get("temp", 0.7) + # Use these to configure your LLM call ``` -At the lower level, `GenerationHandle` tracks the active task and provides cancellation state for provider-backed streaming flows. +## File Attachments And Context Mentions -## Input Requests +The chat input supports two ways to include extra context: -Chat flows can pause and ask the user for confirmation or structured input by yielding `InputRequiredResponse`. The handler can then continue by calling `ctx.wait_for_input()`. +**File attachments** — users drag-and-drop or click the paperclip button to attach files: ```python -from pywry import InputRequiredResponse - - -def handler(messages, ctx): - yield "I need confirmation before I continue." - yield InputRequiredResponse( - prompt="Proceed with deployment?", - input_type="buttons", - ) - answer = ctx.wait_for_input() - if not answer or answer.lower().startswith("n"): - yield "Deployment cancelled." - return - yield "Deployment approved. Continuing now." +chat = ChatManager( + handler=handler, + enable_file_attach=True, + file_accept_types=[".csv", ".json", ".py"], # Required +) ``` -Supported flows include: - -- Button confirmation dialogs -- Radio/select choices -- Free-text or filename input - -See the chat demo example for a complete input-request flow. - -## Context Mentions And File Attachments - -`ChatManager` can expose extra context sources to the user: - -- `enable_context=True` enables `@` mentions for registered live widget sources. -- `register_context_source(component_id, name)` makes a widget target selectable. -- `enable_file_attach=True` enables file uploads. -- `file_accept_types` is required when file attachment is enabled. -- `context_allowed_roots` restricts attachment reads to specific directories. +**Widget mentions** — users type `@` to reference live dashboard components: ```python chat = ChatManager( handler=handler, enable_context=True, - enable_file_attach=True, - file_accept_types=[".csv", ".json", ".xlsx"], - context_allowed_roots=["./data", "./reports"], ) - chat.register_context_source("sales-grid", "Sales Data") ``` -When attachments are present, `ChatManager.CONTEXT_TOOL` can be passed into an LLM tool schema so the model can request the full contents of an attached item on demand. +When attachments are present, your handler receives them in `ctx.attachments`: -## Eager Versus Lazy Assets +```python +def handler(messages, ctx): + if ctx.attachments: + yield StatusUpdate(text=f"Processing {len(ctx.attachments)} attachments...") + for att in ctx.attachments: + content = ctx.get_attachment(att.name) + yield f"**{att.name}** ({att.type}): {len(content)} chars\n\n" + yield "Here is my analysis of the attached data." +``` -The chat UI can render AG Grid and Plotly artifacts inline. You can choose between: +## Artifacts -- Eager asset loading with `include_plotly=True` and `include_aggrid=True` -- Lazy asset injection when the first matching artifact is emitted +Artifacts are rich content blocks that render inline in the chat transcript. Unlike streamed text, they appear as standalone visual elements — code editors, charts, tables, etc. -Eager loading is simpler for predictable assistant workflows. Lazy loading reduces initial page weight. +To emit an artifact, yield it from your handler wrapped in an `ArtifactUpdate`, or yield it directly (the manager auto-wraps `_ArtifactBase` subclasses): -## Lower-Level HTML Assembly +```python +from pywry.chat.artifacts import CodeArtifact, PlotlyArtifact, TableArtifact, TradingViewArtifact -If you need to embed the raw chat shell yourself, use `build_chat_html()`. +# Code with syntax highlighting +yield CodeArtifact( + title="fibonacci.py", + language="python", + content="def fib(n):\n if n <= 1:\n return n\n return fib(n - 1) + fib(n - 2)", +) -```python -from pywry import build_chat_html +# Interactive Plotly chart +yield PlotlyArtifact(title="Revenue", figure={"data": [{"type": "bar", "x": [1,2], "y": [3,4]}]}) -html = build_chat_html( - show_sidebar=True, - show_settings=True, - enable_context=True, - enable_file_attach=True, - file_accept_types=[".md", ".py", ".json"], - container_id="assistant-chat", +# AG Grid table +yield TableArtifact(title="Users", data=[{"name": "Alice", "age": 30}]) + +# TradingView financial chart +from pywry.chat.artifacts import TradingViewSeries +yield TradingViewArtifact( + title="AAPL", + series=[TradingViewSeries(type="candlestick", data=[ + {"time": "2024-01-02", "open": 185, "high": 186, "low": 184, "close": 185.5}, + ])], ) ``` -This returns only the chat HTML structure. You are then responsible for wiring the matching frontend and backend event flow. +Available artifact types: `CodeArtifact`, `MarkdownArtifact`, `HtmlArtifact`, `TableArtifact`, `PlotlyArtifact`, `ImageArtifact`, `JsonArtifact`, `TradingViewArtifact`. + +The frontend libraries for `TableArtifact` (AG Grid), `PlotlyArtifact` (Plotly.js), and `TradingViewArtifact` (lightweight-charts) are loaded automatically the first time an artifact of that type is emitted. You can also preload them by passing `include_plotly=True` or `include_aggrid=True` to the `ChatManager` constructor. + +## Notebook Mode + +When running inside a Jupyter notebook with `anywidget` installed (`pip install 'pywry[notebook]'`), the chat automatically renders as a native notebook widget — no HTTP server, no IFrame. The `PyWryChatWidget` bundles the chat JavaScript in its ESM module and loads artifact libraries (Plotly, AG Grid, TradingView) through traitlet synchronization when needed. + +This happens automatically. The same code works in native windows, notebooks, and browser deployments with no changes. + +## RBAC + +When PyWry's authentication system is enabled (deploy mode), all chat operations are gated by role-based access control: + +- **Viewers** can read but cannot send messages +- **Editors** can send messages and interact normally +- **Admins** can additionally approve file write operations from ACP agents + +See [Chat Artifacts And Providers](../../integrations/chat/index.md) for the full RBAC permission mapping. ## Examples -- `pywry/examples/pywry_demo_chat.py` demonstrates `ChatManager`, slash commands, settings, todo updates, thinking output, and `InputRequiredResponse`. -- `pywry/examples/pywry_demo_chat_artifacts.py` demonstrates all supported artifact types. +Working examples in the `examples/` directory: + +- **`pywry_demo_chat.py`** — ChatManager with slash commands, settings, plan updates, thinking output, and streaming +- **`pywry_demo_chat_artifacts.py`** — all artifact types including TradingView charts +- **`pywry_demo_chat_magentic.py`** — magentic provider integration with tool calls ## Next Steps -- [Chat Artifacts And Providers](../../integrations/chat/index.md) -- [Chat API](../../reference/chat.md) -- [ChatManager API](../../reference/chat-manager.md) -- [Chat Providers API](../../integrations/chat/chat-providers.md) +- [Chat Artifacts And Providers](../../integrations/chat/index.md) — detailed artifact and provider documentation +- [Chat Providers API](../../integrations/chat/chat-providers.md) — API reference for all providers diff --git a/pywry/docs/docs/components/modal/index.md b/pywry/docs/docs/components/modal/index.md index 9a38244..adc576a 100644 --- a/pywry/docs/docs/components/modal/index.md +++ b/pywry/docs/docs/components/modal/index.md @@ -131,7 +131,7 @@ modal = Modal( ) def on_dismissed(data, event_type, label): - print("User dismissed the confirmation dialog") + app.emit("pywry:set-content", {"id": "status", "text": "Action cancelled"}, label) app.show(content, modals=[modal], callbacks={"app:confirm-dismissed": on_dismissed}) ``` diff --git a/pywry/docs/docs/features.md b/pywry/docs/docs/features.md index 94b31c0..175f2a0 100644 --- a/pywry/docs/docs/features.md +++ b/pywry/docs/docs/features.md @@ -30,7 +30,7 @@ One API, three output targets — PyWry automatically selects the right one: | **[Configuration](guides/configuration.md)** | TOML files, env vars, layered precedence | | **[Hot Reload](guides/hot-reload.md)** | Live CSS/JS updates during development | | **[Deploy Mode](guides/deploy-mode.md)** | Redis backend for horizontal scaling | -| **[Tauri Plugins](integrations/tauri-plugins.md)** | 19 bundled plugins — clipboard, notifications, HTTP, and more | +| **[Tauri Plugins](integrations/pytauri/tauri-plugins.md)** | 19 bundled plugins — clipboard, notifications, HTTP, and more | ## Platform Support diff --git a/pywry/docs/docs/getting-started/quickstart.md b/pywry/docs/docs/getting-started/quickstart.md index 77e0551..7831ec2 100644 --- a/pywry/docs/docs/getting-started/quickstart.md +++ b/pywry/docs/docs/getting-started/quickstart.md @@ -89,8 +89,6 @@ app = PyWry() def on_button_click(data, event_type, label): """Called when the button is clicked.""" - print(f"Button clicked! Data: {data}") - # Update the page content app.emit("pywry:set-content", {"id": "greeting", "text": "Button was clicked!"}, label) html = """ diff --git a/pywry/docs/docs/getting-started/why-pywry.md b/pywry/docs/docs/getting-started/why-pywry.md index 9813d83..2051f78 100644 --- a/pywry/docs/docs/getting-started/why-pywry.md +++ b/pywry/docs/docs/getting-started/why-pywry.md @@ -1,81 +1,106 @@ # Why PyWry -PyWry is an open-source rendering engine for building lightweight, cross-platform interfaces using Python. It solves a specific problem: **how to build beautiful, modern data applications in Python without being forced into an opinionated web framework or a heavy native GUI toolkit.** +PyWry is an open-source rendering engine for building cross-platform interfaces using Python. It solves a specific problem: **how to build modern data applications in Python without being forced into an opinionated web framework or a heavy native GUI toolkit.** -PyWry renders standard HTML, CSS, and JavaScript inside battle-tested OS webviews (WebView2 on Windows, WebKit on macOS/Linux). Your team can use web skills they already have — no proprietary widget toolkit to learn. If it works in a browser, it works in PyWry. +PyWry renders standard HTML, CSS, and JavaScript inside OS-native webviews (WebView2 on Windows, WebKit on macOS/Linux) via [PyTauri](https://pytauri.github.io/pytauri/). Your team can use web skills they already have — no proprietary widget toolkit to learn. If it works in a browser, it works in PyWry. -There are many ways to render web content from Python — Electron, Dash, Streamlit, NiceGUI, Gradio, Flet, or plain FastAPI. So why choose PyWry? +## Write Once, Render Anywhere -### The "Goldilocks" Framework +PyWry's defining feature is that the same code renders in three environments without modification: -Python developers often find themselves choosing between uncomfortable extremes: +| Environment | Transport | How It Renders | +|---|---|---| +| Desktop terminal | PyTauri subprocess | Native OS webview window | +| Jupyter / VS Code / Colab | Anywidget traitlets | Notebook cell widget (no server) | +| Headless / SSH / Deploy | FastAPI + WebSocket | Browser tab via IFrame | -- **Native GUI Toolkits (PyQt/Tkinter)**: Steep learning curves, custom styling systems, and they don't look modern without massive effort. -- **Web-to-Desktop (Electron)**: Forces Python developers into the JavaScript/Node.js ecosystem and ships with hundreds of megabytes of Chromium bloat. -- **Data Dashboards (Streamlit/Gradio)**: Excellent for rapid deployment in a browser, but highly opinionated, difficult to deeply customize, and hard to package as a true desktop executable. +A Plotly chart, an AG Grid table, a TradingView financial chart, or a full chat interface — all render identically across these three paths. The same `on()`/`emit()` event protocol works in every environment, so components you build are portable by default. -PyWry targets the sweet spot: **Write your logic in Python, build your UI with modern web technologies, and deploy it anywhere**—including as a native, lightweight executable. +This pipeline is designed for data teams: prototype in a Jupyter notebook, share as a browser-based FastAPI application, and package as a standalone desktop executable with `pywry[freeze]` — all from the same Python code. -### The Jupyter → Web → Desktop Pipeline +## Built-In Integrations -PyWry's most potent feature is its **"Build Once, Render Anywhere"** pipeline. Most frameworks support Web + Desktop, but PyWry is uniquely optimized for data science and full-stack environments. +PyWry ships with production-ready integrations that implement industry-standard interfaces where they exist, so your code stays portable and your skills transfer. -You can instantly render a Plotly chart or AgGrid table directly inside a **Jupyter Notebook** cell. When you're ready to share your work, you use the exact same code to deploy a browser-based FastAPI application. When you want to hand an internal tool to a business user, you use `pywry[freeze]` to compile that *same code* into a standalone `.exe` or `.app`—dropping the notebook or server entirely. +### Plotly Charts -### Lightweight Native Windows +Interactive charts with automatic dark/light theming, pre-wired click/hover/selection/zoom events, programmatic updates, custom mode bar buttons that fire Python callbacks, and per-theme template overrides. Accepts standard Plotly `Figure` objects and figure dicts — the same data format used across the Plotly ecosystem. -PyWry uses the **OS-native webview** (WebView2, WebKit) via [PyTauri](https://github.com/pytauri/pytauri) instead of bundling a full browser engine like Electron. This results in apps that add only a few megabytes of overhead and open in under a second. There's no server to spin up and no browser to launch. +### AG Grid Tables -### One API, three targets +Sortable, filterable, editable data tables with automatic DataFrame conversion, cell editing callbacks, row selection events, and pagination. Configures through standard AG Grid `ColDef` and `GridOptions` structures — the same column definitions and grid options documented in the [AG Grid docs](https://www.ag-grid.com/javascript-data-grid/) work directly in PyWry. -Write your interface once. PyWry automatically renders it in the right place without changing your code: +### TradingView Financial Charts -| Environment | Rendering Path | -|---|---| -| Desktop terminal | Native OS window via PyTauri | -| Jupyter / VS Code / Colab | anywidget or inline IFrame | -| Headless / SSH / Deploy | Browser tab via FastAPI + WebSocket | +Full [TradingView Lightweight Charts](https://tradingview.github.io/lightweight-charts/) integration supporting three data modes: +- **Static** — pass a DataFrame or list of OHLCV dicts for one-shot rendering +- **Datafeed** — implement the `DatafeedProvider` interface for async on-demand bar loading, symbol resolution, and real-time subscriptions (follows TradingView's [Datafeed API](https://www.tradingview.com/charting-library-docs/latest/connecting_data/Datafeed-API/) contract) +- **UDF** — `UDFAdapter` wraps any `DatafeedProvider` as a [Universal Data Feed](https://www.tradingview.com/charting-library-docs/latest/connecting_data/UDF/) HTTP endpoint compatible with TradingView's server-side data protocol -### Built for data workflows +Also includes drawing tools, technical indicators, persistent chart layouts (file or Redis storage), and session/timezone management. -PyWry comes with built-in integrations tailored for data workflows: +### AI Chat (ACP) -- **Plotly charts** with pre-wired event callbacks (click, select, hover, zoom). -- **AG Grid tables** with automatic DataFrame conversion and grid events. -- **Toolbar system** with 18 declarative Pydantic input components across 7 layout positions to easily add headers, sidebars, and overlays. -- **Two-way events** between Python and JavaScript, with no boilerplate. +The chat system implements the [Agent Client Protocol (ACP)](https://agentclientprotocol.com) — an open standard for AI agent communication using JSON-RPC 2.0. This means: +- **Provider interface** follows ACP's session lifecycle: `initialize` → `new_session` → `prompt` → `cancel` +- **Session updates** use ACP's typed notification system: `agent_message`, `tool_call`, `plan`, `available_commands`, `config_option`, `current_mode` +- **Content blocks** use ACP's content model: `text`, `image`, `audio`, `resource`, `resource_link` +- **StdioProvider** connects to any ACP-compatible agent (Claude Code, Gemini CLI) over stdio JSON-RPC without writing adapter code -### Production-ready +Built-in providers for OpenAI, Anthropic, Magentic (100+ backends), [Deep Agents](https://docs.langchain.com/oss/python/deepagents/overview) (LangChain's agent harness with filesystem tools, planning, and subagents), and user-supplied callables adapt their respective APIs to the ACP session interface. Rich inline artifacts (code, markdown, tables, Plotly charts, TradingView charts, images, JSON trees) render directly in the chat transcript. -PyWry scales from prototyping to multi-user deployments: +### MCP Server -- **Deploy Mode** with an optional Redis backend for horizontal scaling. -- **OAuth2** authentication system for both native and deploy modes with enterprise RBAC. -- **Security built-in**: Token authentication, CSRF protection, and CSP headers out of the box. +A [Model Context Protocol](https://modelcontextprotocol.io/) server built on [FastMCP](https://github.com/jlowin/fastmcp) with 25+ tools that lets AI coding agents create and control PyWry widgets, send chat messages, manage chart data, and build interactive dashboards programmatically. MCP is the standard protocol used by Claude Code, Cursor, Windsurf, and other AI coding tools for tool integration. -### Cross-platform +### Toolbar System -PyWry runs on Windows, macOS, and Linux. The same code produces native windows on all three platforms, notebook widgets in any Jupyter environment, and browser-based interfaces anywhere Python runs. +18 declarative Pydantic input components (buttons, selects, toggles, sliders, text inputs, date pickers, search bars, secret inputs, radio groups, tab groups, marquees, and more) across 7 layout positions, all with automatic event wiring. +## Lightweight Native Windows -## Why not something else +PyWry uses the OS-native webview via PyTauri instead of bundling a full browser engine like Electron. Apps add only a few megabytes of overhead and open in under a second. The PyTauri subprocess provides access to 19 Tauri plugins for native OS capabilities — clipboard, file dialogs, notifications, global shortcuts, system tray icons, and more. -| Alternative | Trade-off | -|---|---| -| **NiceGUI** | Server + browser required natively; highly capable but lacks the single-codebase Jupyter → Desktop executable pipeline of PyWry. | -| **Electron** | 150 MB+ runtime per app, requires Node.js/JavaScript context, difficult integration for native Python execution. | -| **Dash / Streamlit / Gradio** | Opinionated UIs, browser-only deployment, not easily packagable into offline standalone executables. | -| **Flet (Flutter/Python)** | Cannot use standard web libraries (React, Tailwind, AG Grid) as it relies entirely on Flutter's custom canvas rendering. | -| **PyQt / Tkinter / wxPython** | Proprietary widget toolkits, requires learning custom desktop layout engines, lacks web interactivity features. | -| **Plain FastAPI + HTML** | No native OS windows, no notebook support, requires manual WebSocket and event wiring. | +## Unified Event Protocol + +All three rendering transports implement the same bidirectional event protocol: + +- **Python → JavaScript**: `widget.emit("app:update", {"count": 42})` updates the UI +- **JavaScript → Python**: `pywry.emit("app:click", {x: 100})` fires a Python callback + +This means every component — whether it's a Plotly chart, an AG Grid table, a TradingView chart, a chat panel, or a custom HTML element — uses the same `on()`/`emit()` pattern. Build a component once and it works in native windows, notebooks, and browser tabs. + +## Production Ready -PyWry sits in a unique position: native-quality lightweight desktop rendering, interactive Jupyter notebook support, and browser deployment, all from one Python API. +PyWry scales from a single-user notebook to multi-user deployments: + +- **Three state backends**: in-memory (ephemeral), SQLite with encryption at rest (local persistent), and Redis (multi-worker distributed) — the same interfaces, queries, and RBAC work on all three +- **SQLite audit trail**: tool call traces, generated artifacts, token usage stats, resource references, and skill activations persisted to an encrypted local database +- **Deploy Mode** with a Redis backend for horizontal scaling across multiple Uvicorn workers +- **OAuth2 authentication** with pluggable providers (Google, GitHub, Microsoft, generic OIDC) for both native and deploy modes +- **Role-based access control** with viewer/editor/admin roles enforced across all ACP chat operations, file system access, and terminal control +- **Security built-in**: per-widget token authentication, origin validation, CSP headers, secret input values never rendered in HTML, and SQLite databases encrypted at rest via SQLCipher + +## Cross Platform + +PyWry runs on Windows, macOS, and Linux. The same code produces native windows on all three platforms, notebook widgets in any Jupyter environment, and browser-based interfaces anywhere Python runs. The PyTauri binary ships as a vendored wheel — no Rust toolchain or system dependencies required. + +## Why Not Something Else + +| Alternative | What PyWry Adds | +|---|---| +| **Electron** | 150MB+ runtime, requires Node.js. PyWry uses the OS webview — a few MB, pure Python. | +| **Dash / Streamlit / Gradio** | Browser-only, opinionated layouts, no desktop executables. PyWry renders in notebooks, browsers, and native windows from one codebase. | +| **NiceGUI** | Server + browser required for native rendering. PyWry renders directly in the OS webview with no server for desktop mode. | +| **Flet** | Flutter canvas rendering — cannot use standard web libraries (Plotly, AG Grid, TradingView). PyWry renders any HTML/CSS/JS. | +| **PyQt / Tkinter** | Proprietary widget toolkits with custom layout engines. PyWry uses standard web technologies. | +| **Plain FastAPI** | No native windows, no notebook rendering, no event system, no component library. PyWry provides all of these. | -## Next steps +None of these alternatives offer the combination of native desktop rendering, Jupyter notebook widgets, browser deployment, integrated AI chat with ACP protocol support, TradingView financial charting, and MCP agent tooling — all from one Python API with one event protocol. -Ready to try it? +## Next Steps - [**Installation**](installation.md) — Install PyWry and platform dependencies - [**Quick Start**](quickstart.md) — Build your first interface in 5 minutes diff --git a/pywry/docs/docs/guides/app-show.md b/pywry/docs/docs/guides/app-show.md index 90c1b6f..ae6f379 100644 --- a/pywry/docs/docs/guides/app-show.md +++ b/pywry/docs/docs/guides/app-show.md @@ -86,10 +86,11 @@ A dictionary mapping event names to Python callback functions. These are registe ```python def on_click(data, event_type, label): - print(f"Clicked: {data}") + selected_point = data.get("points", [{}])[0] + app.emit("pywry:set-content", {"id": "info", "text": f"x={selected_point.get('x')}"}, label) def on_save(data, event_type, label): - print("Saving...") + app.emit("pywry:download", {"filename": "data.json", "content": "{}"}, label) app.show(html, callbacks={ "plotly:click": on_click, diff --git a/pywry/docs/docs/guides/browser-mode.md b/pywry/docs/docs/guides/browser-mode.md index c567a63..44514e2 100644 --- a/pywry/docs/docs/guides/browser-mode.md +++ b/pywry/docs/docs/guides/browser-mode.md @@ -107,8 +107,8 @@ h2 = app.show("

Table

", label="table") # Two browser tabs open: # http://127.0.0.1:8765/widget/chart # http://127.0.0.1:8765/widget/table -print(h1.url) # Full URL for the chart widget -print(h2.url) # Full URL for the table widget +chart_url = h1.url # e.g. http://127.0.0.1:8765/widget/chart +table_url = h2.url # e.g. http://127.0.0.1:8765/widget/table app.block() ``` diff --git a/pywry/docs/docs/guides/builder-options.md b/pywry/docs/docs/guides/builder-options.md index cc69047..dcd1f45 100644 --- a/pywry/docs/docs/guides/builder-options.md +++ b/pywry/docs/docs/guides/builder-options.md @@ -157,12 +157,12 @@ The `builder_kwargs()` method returns a dict of only the non-default builder fie from pywry.models import WindowConfig config = WindowConfig(transparent=True, user_agent="test/1.0") -print(config.builder_kwargs()) -# {'transparent': True, 'user_agent': 'test/1.0'} +kwargs = config.builder_kwargs() +# kwargs == {'transparent': True, 'user_agent': 'test/1.0'} config2 = WindowConfig() # all defaults -print(config2.builder_kwargs()) -# {} +kwargs2 = config2.builder_kwargs() +# kwargs2 == {} — only non-default values are included ``` This is used internally by the runtime to avoid sending unnecessary data over IPC. diff --git a/pywry/docs/docs/guides/configuration.md b/pywry/docs/docs/guides/configuration.md index 29b3060..f0dd116 100644 --- a/pywry/docs/docs/guides/configuration.md +++ b/pywry/docs/docs/guides/configuration.md @@ -194,6 +194,6 @@ pywry init ## Next Steps - **[Configuration Reference](../reference/config.md)** — Complete `PyWrySettings` API -- **[Tauri Plugins](../integrations/tauri-plugins.md)** — Enable clipboard, notifications, HTTP & more +- **[Tauri Plugins](../integrations/pytauri/tauri-plugins.md)** — Enable clipboard, notifications, HTTP & more - **[Deploy Mode](deploy-mode.md)** — Production server configuration - **[Browser Mode](browser-mode.md)** — Server settings for browser mode diff --git a/pywry/docs/docs/guides/deploy-mode.md b/pywry/docs/docs/guides/deploy-mode.md index e1c3d02..a3be30f 100644 --- a/pywry/docs/docs/guides/deploy-mode.md +++ b/pywry/docs/docs/guides/deploy-mode.md @@ -174,9 +174,9 @@ Redis key structure: `{prefix}:widget:{widget_id}` (hash), `{prefix}:widgets:act ```python from pywry.state import is_deploy_mode, get_state_backend, get_worker_id -print(f"Deploy mode: {is_deploy_mode()}") -print(f"Backend: {get_state_backend().value}") # "memory" or "redis" -print(f"Worker: {get_worker_id()}") +deploy_active = is_deploy_mode() # True when PYWRY_DEPLOY__ENABLED=true +backend = get_state_backend().value # "memory" or "redis" +worker_id = get_worker_id() # Unique per-process identifier ``` Deploy mode is active when any of these are true: diff --git a/pywry/docs/docs/guides/javascript-bridge.md b/pywry/docs/docs/guides/javascript-bridge.md index 7ae4bc5..2b86f8d 100644 --- a/pywry/docs/docs/guides/javascript-bridge.md +++ b/pywry/docs/docs/guides/javascript-bridge.md @@ -33,7 +33,8 @@ In Python, register a callback for the event: ```python def on_save(data, event_type, label): - print(f"Saving ID {data['id']} from window {label}") + record_id = data["id"] + app.emit("pywry:set-content", {"id": "status", "text": f"Saved {record_id}"}, label) handle = app.show(html, callbacks={"app:save": on_save}) ``` diff --git a/pywry/docs/docs/guides/menus.md b/pywry/docs/docs/guides/menus.md index 7abe64e..92f2617 100644 --- a/pywry/docs/docs/guides/menus.md +++ b/pywry/docs/docs/guides/menus.md @@ -35,11 +35,11 @@ app = PyWry() # ── Define handlers FIRST ──────────────────────────────────────── def on_new(data, event_type, label): - print("Creating new file…") + app.show(HtmlContent(html="

Untitled

"), title="New File") def on_open(data, event_type, label): - print("Opening file…") + app.emit("pywry:alert", {"message": "Open file dialog triggered"}, label) def on_quit(data, event_type, label): @@ -89,7 +89,7 @@ A normal clickable menu item. **`handler` is required.** from pywry import MenuItemConfig def on_save(data, event_type, label): - print("Saving…") + app.emit("app:save", {"path": "current.json"}, label) item = MenuItemConfig( id="save", # Unique ID — sent in menu:click events @@ -121,7 +121,7 @@ A toggle item with a check mark. **`handler` is required.** from pywry import CheckMenuItemConfig def on_bold(data, event_type, label): - print("Bold toggled") + app.emit("editor:toggle-bold", {"checked": data.get("checked", False)}, label) item = CheckMenuItemConfig( id="bold", @@ -149,7 +149,7 @@ A menu item with an icon (RGBA bytes or native OS icon). **`handler` is required from pywry import IconMenuItemConfig def on_doc(data, event_type, label): - print("Document clicked") + app.emit("editor:format", {"style": data.get("id", "plain")}, label) # With RGBA bytes item = IconMenuItemConfig( @@ -223,10 +223,10 @@ A nested container that holds other menu items. from pywry import SubmenuConfig, MenuItemConfig def on_zoom_in(data, event_type, label): - print("Zoom in") + app.emit("view:zoom", {"direction": "in"}, label) def on_zoom_out(data, event_type, label): - print("Zoom out") + app.emit("view:zoom", {"direction": "out"}, label) view_menu = SubmenuConfig( id="view", @@ -297,13 +297,13 @@ All mutations happen live — the native menu updates immediately. ```python def on_export(data, event_type, label): - print("Exporting…") + app.emit("app:export", {"format": "csv"}, label) def on_import(data, event_type, label): - print("Importing…") + app.emit("app:import", {"format": "csv"}, label) def on_save_as(data, event_type, label): - print("Save as…") + app.emit("app:save-as", {"path": ""}, label) # Add items (handler required on new items) menu.append(MenuItemConfig(id="export", text="Export", handler=on_export)) @@ -428,15 +428,15 @@ app = PyWry() # ── Handlers ────────────────────────────────────────────────────── def on_new(data, event_type, label): - print("Creating new file…") + app.show(HtmlContent(html="

Untitled

"), title="New File") def on_open(data, event_type, label): - print("Opening file…") + app.emit("pywry:alert", {"message": "Open file dialog triggered"}, label) def on_save(data, event_type, label): - print("Saving…") + app.emit("app:save", {"path": "current.json"}, label) def on_quit(data, event_type, label): @@ -444,23 +444,23 @@ def on_quit(data, event_type, label): def on_sidebar(data, event_type, label): - print("Sidebar toggled") + app.emit("view:toggle-sidebar", {}, label) def on_statusbar(data, event_type, label): - print("Status bar toggled") + app.emit("view:toggle-statusbar", {}, label) def on_zoom_in(data, event_type, label): - print("Zoom in") + app.emit("view:zoom", {"direction": "in"}, label) def on_zoom_out(data, event_type, label): - print("Zoom out") + app.emit("view:zoom", {"direction": "out"}, label) def on_zoom_reset(data, event_type, label): - print("Zoom reset") + app.emit("view:zoom", {"direction": "reset"}, label) # ── Menu structure ──────────────────────────────────────────────── diff --git a/pywry/docs/docs/integrations/multi-widget.md b/pywry/docs/docs/guides/multi-widget.md similarity index 96% rename from pywry/docs/docs/integrations/multi-widget.md rename to pywry/docs/docs/guides/multi-widget.md index f3ea996..80a12c1 100644 --- a/pywry/docs/docs/integrations/multi-widget.md +++ b/pywry/docs/docs/guides/multi-widget.md @@ -142,7 +142,7 @@ def on_export(_data, _event_type, _label): widget.emit("pywry:download", {"content": df.to_csv(index=False), "filename": "data.csv", "mimeType": "text/csv"}) ``` -See the [Event System guide](../guides/events.md) for the full list of system events (`pywry:set-content`, `pywry:download`, `plotly:update-figure`, `grid:update-data`, etc.). +See the [Event System guide](events.md) for the full list of system events (`pywry:set-content`, `pywry:download`, `plotly:update-figure`, `grid:update-data`, etc.). --- @@ -156,7 +156,7 @@ See [`examples/pywry_demo_multi_widget.py`](https://github.com/deeleeramone/PyWr - [Toolbar System](../components/toolbar/index.md) — all toolbar component types and their APIs - [Modals](../components/modal/index.md) — modal overlay components -- [Event System](../guides/events.md) — event registration and dispatch +- [Event System](events.md) — event registration and dispatch - [Theming & CSS](../components/theming.md) — `--pywry-*` variables and theme switching - [HtmlContent](../components/htmlcontent/index.md) — CSS files, script files, inline CSS, JSON data - [Content Assembly](../components/htmlcontent/content-assembly.md) — what PyWry injects into the document diff --git a/pywry/docs/docs/guides/oauth2.md b/pywry/docs/docs/guides/oauth2.md index c69d2ad..9cc836c 100644 --- a/pywry/docs/docs/guides/oauth2.md +++ b/pywry/docs/docs/guides/oauth2.md @@ -176,12 +176,14 @@ app = PyWry() try: result = app.login() # blocks — see "User experience" below + access_token = result.access_token + # Proceed with authenticated app.show(...) using access_token except AuthFlowTimeout: - print("User took too long to authenticate") + app.show("

Login timed out

Please restart the app and try again.

") except AuthFlowCancelled: - print("User closed the login window") + app.show("

Login cancelled

You can retry from the menu.

") except AuthenticationError as e: - print(f"Authentication failed: {e}") + app.show(f"

Login failed

{e}
") ``` After a successful login: diff --git a/pywry/docs/docs/guides/window-management.md b/pywry/docs/docs/guides/window-management.md index 0939988..c3a2c3d 100644 --- a/pywry/docs/docs/guides/window-management.md +++ b/pywry/docs/docs/guides/window-management.md @@ -108,7 +108,7 @@ handle = app.show(content, label="dashboard") # Auto-generated (UUID) handle = app.show(content) -print(handle.label) # e.g., "a3f1c2d4-..." +window_label = handle.label # e.g., "a3f1c2d4-..." — used to route events to this window ``` Labels are used to: diff --git a/pywry/docs/docs/integrations/aggrid/index.md b/pywry/docs/docs/integrations/aggrid/index.md index 22f7df6..466d857 100644 --- a/pywry/docs/docs/integrations/aggrid/index.md +++ b/pywry/docs/docs/integrations/aggrid/index.md @@ -1,10 +1,22 @@ -# AG Grid Tables +# AG Grid -PyWry provides first-class AG Grid support — pass a Pandas DataFrame to `show_dataframe()` and get sortable, filterable, editable data tables with pre-wired events. +PyWry integrates [AG Grid](https://www.ag-grid.com/) — a high-performance JavaScript data grid — to render interactive tables with sorting, filtering, column resizing, row selection, cell editing, and pagination. The integration handles all data serialization, event bridging, and theme synchronization automatically. -For the complete column and grid configuration API, see the [Grid Reference](grid.md). For all grid events and payloads, see the [Event Reference](../../reference/events/grid.md). +AG Grid runs entirely in the browser. PyWry's role is to serialize your Python data (DataFrames, dicts, lists) into AG Grid's JSON format, inject the AG Grid library into the page, wire up events so user interactions flow back to Python, and keep the grid's theme in sync with PyWry's dark/light mode. -## Basic Usage +## How It Works + +1. You pass a DataFrame (or list of dicts) to `show_dataframe()` or `TableArtifact` +2. PyWry calls `normalize_data()` which converts the data to `{rowData, columns, columnTypes}` — the format AG Grid expects +3. The AG Grid JavaScript library (~200KB gzipped) is injected into the page +4. `aggrid-defaults.js` registers event listeners on the grid instance that call `pywry.emit()` when the user clicks, selects, or edits cells +5. Your Python callbacks receive these events through the same `on()`/`emit()` protocol used by all PyWry components + +The grid renders in all three environments — native windows, notebooks (anywidget or IFrame), and browser tabs — using the same code. + +## Displaying a Grid + +### From a DataFrame ```python import pandas as pd @@ -13,72 +25,173 @@ from pywry import PyWry app = PyWry() df = pd.DataFrame({ - "Name": ["Alice", "Bob", "Charlie"], - "Age": [25, 30, 35], - "City": ["NYC", "LA", "Chicago"], + "Symbol": ["AAPL", "MSFT", "GOOGL", "AMZN"], + "Price": [189.84, 425.22, 176.49, 185.07], + "Change": [1.23, -0.45, 0.89, -2.10], + "Volume": [52_340_000, 18_920_000, 21_150_000, 45_670_000], }) -# Display the grid handle = app.show_dataframe(df) ``` +### From a List of Dicts + +```python +data = [ + {"name": "Alice", "role": "Engineer", "level": 3}, + {"name": "Bob", "role": "Designer", "level": 2}, +] + +handle = app.show_dataframe(data) +``` + +### Inside a Chat Response + +```python +from pywry.chat.artifacts import TableArtifact + +def handler(messages, ctx): + yield TableArtifact( + title="Portfolio", + data=portfolio_df, + height="320px", + ) +``` + +The AG Grid library is loaded lazily — it's only injected when the first grid is rendered. + +## Data Normalization + +`normalize_data()` accepts several input formats and converts them all to AG Grid's expected structure: + +| Input | Example | Result | +|-------|---------|--------| +| pandas DataFrame | `pd.DataFrame({"a": [1, 2]})` | Columns from DataFrame columns, types auto-detected | +| List of dicts | `[{"a": 1}, {"a": 2}]` | Columns from dict keys, types inferred from values | +| Dict of lists | `{"a": [1, 2], "b": [3, 4]}` | Columns from dict keys | +| Single dict | `{"a": 1, "b": 2}` | Rendered as a two-column key/value table | + +The normalizer also detects column types (`number`, `text`, `date`, `boolean`) and applies appropriate formatting defaults. + ## Column Configuration -Use `ColDef` for detailed column configuration: +`ColDef` controls how individual columns render and behave: ```python from pywry.grid import ColDef columns = [ - ColDef(field="name", header_name="Full Name", sortable=True, filter=True), - ColDef(field="age", header_name="Age", width=100, cell_data_type="number"), - ColDef(field="salary", value_formatter="'$' + value.toLocaleString()"), - ColDef(field="active", editable=True, cell_renderer="agCheckboxCellRenderer"), + ColDef( + field="symbol", + header_name="Ticker", + sortable=True, + filter=True, + pinned="left", + width=100, + ), + ColDef( + field="price", + header_name="Price", + cell_data_type="number", + value_formatter="'$' + value.toFixed(2)", + ), + ColDef( + field="change", + header_name="Change", + cell_data_type="number", + cell_style={"color": "params.value >= 0 ? '#a6e3a1' : '#f38ba8'"}, + ), + ColDef( + field="volume", + header_name="Volume", + value_formatter="value.toLocaleString()", + ), + ColDef( + field="active", + header_name="Active", + editable=True, + cell_renderer="agCheckboxCellRenderer", + ), ] handle = app.show_dataframe(df, column_defs=columns) ``` -For the full list of `ColDef` properties, see the [Grid Reference](grid.md). +Key `ColDef` fields: + +| Field | Type | Effect | +|-------|------|--------| +| `field` | `str` | Column key in the data | +| `header_name` | `str` | Display name in the header | +| `sortable` | `bool` | Allow clicking header to sort | +| `filter` | `bool` or `str` | Enable column filter (`True` for auto, or `"agTextColumnFilter"`, `"agNumberColumnFilter"`, etc.) | +| `editable` | `bool` | Allow inline cell editing | +| `width` | `int` | Fixed column width in pixels | +| `pinned` | `str` | Pin column to `"left"` or `"right"` | +| `cell_data_type` | `str` | `"number"`, `"text"`, `"date"`, `"boolean"` | +| `value_formatter` | `str` | JavaScript expression for display formatting | +| `cell_style` | `dict` | Conditional CSS styles | +| `cell_renderer` | `str` | AG Grid cell renderer component name | + +For the complete list, see the [Grid Reference](grid.md). ## Grid Options -Use `GridOptions` for global grid configuration: +`GridOptions` controls grid-level behavior: ```python -from pywry.grid import GridOptions, RowSelection +from pywry.grid import GridOptions options = GridOptions( pagination=True, pagination_page_size=25, row_selection={"mode": "multiRow", "enableClickSelection": True}, animate_rows=True, + suppress_column_virtualisation=True, ) handle = app.show_dataframe(df, grid_options=options) ``` -For the full list of `GridOptions` properties, see the [Grid Reference](grid.md). +Key `GridOptions` fields: + +| Field | Type | Effect | +|-------|------|--------| +| `pagination` | `bool` | Enable pagination | +| `pagination_page_size` | `int` | Rows per page | +| `row_selection` | `dict` | Selection mode configuration | +| `animate_rows` | `bool` | Animate row additions/removals | +| `default_col_def` | `dict` | Default properties for all columns | +| `suppress_column_virtualisation` | `bool` | Render all columns (not just visible ones) | ## Grid Events -AgGrid emits events for user interactions: +AG Grid interactions produce events that your Python callbacks receive through the standard `on()`/`emit()` protocol: ```python def on_row_selected(data, event_type, label): - rows = data.get("rows", []) - app.emit("pywry:alert", {"message": f"Selected {len(rows)} rows"}, label) + selected_rows = data.get("rows", []) + symbols = [r["Symbol"] for r in selected_rows] + app.emit("pywry:set-content", { + "id": "selection", + "text": f"Selected: {', '.join(symbols)}", + }, label) def on_cell_click(data, event_type, label): + col = data["colId"] + value = data["value"] + row_index = data["rowIndex"] app.emit("pywry:set-content", { - "id": "status", - "text": f"{data['colId']} = {data['value']}" + "id": "detail", + "text": f"Row {row_index}: {col} = {value}", }, label) def on_cell_edit(data, event_type, label): - app.emit("pywry:alert", { - "message": f"Edited {data['colId']}: {data['oldValue']} → {data['newValue']}" - }, label) + col = data["colId"] + old_val = data["oldValue"] + new_val = data["newValue"] + row_data = data["data"] + save_edit_to_database(row_data, col, new_val) handle = app.show_dataframe( df, @@ -90,28 +203,55 @@ handle = app.show_dataframe( ) ``` -For the complete list of grid events and payload structures, see the [Event Reference](../../reference/events/grid.md). +Available grid events: + +| Event | Payload Fields | When It Fires | +|-------|---------------|---------------| +| `grid:cell-click` | `colId`, `value`, `rowIndex`, `data` | User clicks a cell | +| `grid:cell-double-click` | `colId`, `value`, `rowIndex`, `data` | User double-clicks a cell | +| `grid:cell-edit` | `colId`, `oldValue`, `newValue`, `data` | User finishes editing a cell | +| `grid:row-selected` | `rows` (list of selected row dicts) | Row selection changes | +| `grid:sort-changed` | `columns` (list of sort state dicts) | User changes sort order | +| `grid:filter-changed` | `filterModel` (AG Grid filter model dict) | User changes column filters | + +For complete payload structures, see the [Event Reference](../../reference/events/grid.md). ## Updating Grid Data -### Replace All Data +After the grid is displayed, update its data from Python: ```python -new_df = pd.DataFrame({...}) -handle.emit("grid:update-data", {"data": new_df.to_dict("records")}) +new_data = fetch_latest_prices() +handle.emit("grid:update-data", {"data": new_data}) ``` +The grid re-renders with the new data while preserving sort, filter, and selection state. + ## Themes -Available AG Grid themes: +AG Grid themes match PyWry's dark/light mode automatically: ```python -handle = app.show_dataframe(df, aggrid_theme="alpine") # default +handle = app.show_dataframe(df, aggrid_theme="alpine") # default handle = app.show_dataframe(df, aggrid_theme="balham") +handle = app.show_dataframe(df, aggrid_theme="quartz") handle = app.show_dataframe(df, aggrid_theme="material") ``` -Themes automatically adapt to PyWry's light/dark mode. +When the user switches PyWry's theme (via `pywry:update-theme`), the grid's CSS class is updated automatically — `ag-theme-alpine-dark` ↔ `ag-theme-alpine`. + +## Embedding in Multi-Widget Pages + +To place a grid alongside other components (charts, toolbars, etc.), generate the grid HTML directly: + +```python +from pywry.grid import build_grid_config, build_grid_html + +config = build_grid_config(df, grid_id="portfolio-grid", row_selection=True) +grid_html = build_grid_html(config) +``` + +Then compose it with `Div` and other components. The `grid_id` parameter lets you target the specific grid with events when multiple grids share a page. See [Multi-Widget Composition](../../guides/multi-widget.md) for the full pattern. ## With Toolbars @@ -121,18 +261,19 @@ from pywry import Toolbar, Button, TextInput toolbar = Toolbar( position="top", items=[ - TextInput(event="grid:search", label="Search", placeholder="Filter..."), + TextInput(event="grid:search", label="Search", placeholder="Filter rows..."), Button(event="grid:export", label="Export CSV"), ], ) def on_search(data, event_type, label): - query = data.get("value", "") - # Filter logic here + query = data.get("value", "").lower() + filtered = df[df.apply(lambda r: query in str(r.values).lower(), axis=1)] + handle.emit("grid:update-data", {"data": filtered.to_dict("records")}) def on_export(data, event_type, label): handle.emit("pywry:download", { - "filename": "data.csv", + "filename": "portfolio.csv", "content": df.to_csv(index=False), "mimeType": "text/csv", }) @@ -149,7 +290,7 @@ handle = app.show_dataframe( ## Next Steps -- **[Grid Reference](grid.md)** — Full `ColDef`, `GridOptions` API +- **[Grid Reference](grid.md)** — Complete `ColDef`, `ColGroupDef`, `DefaultColDef`, `GridOptions` API - **[Event Reference](../../reference/events/grid.md)** — All grid event payloads -- **[Toolbar System](../../components/toolbar/index.md)** — Building interactive controls -- **[Theming & CSS](../../components/theming.md)** — Styling the grid +- **[Multi-Widget Composition](../../guides/multi-widget.md)** — Embedding grids in dashboards +- **[Theming & CSS](../../components/theming.md)** — Styling and theme variables diff --git a/pywry/docs/docs/integrations/anywidget.md b/pywry/docs/docs/integrations/anywidget.md index 8533463..ba675d9 100644 --- a/pywry/docs/docs/integrations/anywidget.md +++ b/pywry/docs/docs/integrations/anywidget.md @@ -1,159 +1,269 @@ -# Anywidget & Widget Protocol +# Anywidget Transport -PyWry supports three rendering paths — native desktop windows, anywidget-based Jupyter widgets, and IFrame + FastAPI server. All three implement the same `BaseWidget` protocol, so your application code works identically regardless of environment. +PyWry's event system uses a unified protocol — `on()`, `emit()`, `update()`, `display()` — that works identically across native windows, IFrame+WebSocket, and anywidget. This page explains how that protocol is implemented over the anywidget transport, so you can build reusable components or introduce new integrations that work seamlessly in all three environments. -For the protocol and widget API reference, see [`BaseWidget`](../reference/widget-protocol.md), [`PyWryWidget`](../reference/widget.md), and [`InlineWidget`](../reference/inline-widget.md). +For the IFrame+WebSocket transport, see [IFrame + WebSocket Transport](../inline-widget/index.md). -## Rendering Path Auto-Detection +## The Unified Protocol -`PyWry.show()` automatically selects the best rendering path: +Every PyWry widget — regardless of rendering path — implements `BaseWidget`: -``` -Script / Terminal ──→ Native OS window (PyTauri subprocess) -Notebook + anywidget ──→ PyWryWidget (traitlet sync, no server) -Notebook + Plotly/Grid ──→ InlineWidget (FastAPI + IFrame) -Notebook without anywidget ──→ InlineWidget (FastAPI fallback) -Browser / SSH / headless ──→ InlineWidget (opens system browser) +```python +class BaseWidget(Protocol): + def on(self, event_type: str, callback: Callable[[dict, str, str], Any]) -> BaseWidget: ... + def emit(self, event_type: str, data: dict[str, Any]) -> None: ... + def update(self, html: str) -> None: ... + def display(self) -> None: ... ``` -No configuration needed — the right path is chosen at `show()` time. +A reusable component only calls these four methods. It never knows whether it's running in a native window, a notebook widget, or a browser tab. The transport handles everything else. -## The BaseWidget Protocol +## How Anywidget Implements the Protocol -Every rendering backend implements this protocol: +In anywidget mode, `PyWryWidget` extends `anywidget.AnyWidget` and implements `BaseWidget` by mapping each method to traitlet synchronization: -```python -from pywry.widget_protocol import BaseWidget +| BaseWidget Method | Anywidget Implementation | +|-------------------|--------------------------| +| `emit(type, data)` | Serialize `{type, data, ts}` to JSON → set `_py_event` traitlet → `send_state()` | +| `on(type, callback)` | Store callback in `_handlers[type]` dict → `_handle_js_event` observer dispatches | +| `update(html)` | Set `content` traitlet → JS `model.on('change:content')` re-renders | +| `display()` | Call `IPython.display.display(self)` | -def use_widget(widget: BaseWidget): - # Register a JS → Python event handler - widget.on("app:click", lambda data, event_type, label: print(data)) +### Traitlets - # Send a Python → JS event - widget.emit("app:update", {"key": "value"}) +Six traitlets carry all state between Python and JavaScript: - # Replace the widget HTML - widget.update("

New Content

") +| Traitlet | Direction | Purpose | +|----------|-----------|---------| +| `content` | Python → JS | HTML markup to render | +| `theme` | Bidirectional | `"dark"` or `"light"` | +| `width` | Python → JS | CSS width | +| `height` | Python → JS | CSS height | +| `_js_event` | JS → Python | Serialized event from browser | +| `_py_event` | Python → JS | Serialized event from Python | - # Show the widget in the current context - widget.display() -``` +### Event Wire Format -| Method | Description | -|--------|-------------| -| `on(event_type, callback)` | Register callback for JS → Python events. Callback receives `(data, event_type, label)`. Returns self for chaining. | -| `emit(event_type, data)` | Send Python → JS event with a JSON-serializable payload. | -| `update(html)` | Replace the widget's HTML content. | -| `display()` | Show the widget (native window, notebook cell, or browser tab). | +Both `_js_event` and `_py_event` carry JSON strings: -## Level 1: PyWryWidget (anywidget) +```json +{"type": "namespace:event-name", "data": {"key": "value"}, "ts": "unique-id"} +``` -The best notebook experience. Uses anywidget's traitlet sync — no server needed, instant bidirectional communication through the Jupyter kernel. +The `ts` field ensures every event is a unique traitlet value. Jupyter only syncs on change — identical consecutive events would be dropped without unique timestamps. -**Requirements:** `pip install anywidget traitlets` +### JS → Python Path -```python -from pywry import PyWry +``` +pywry.emit("form:submit", {name: "x"}) + → JSON.stringify({type: "form:submit", data: {name: "x"}, ts: Date.now()}) + → model.set("_js_event", json_string) + → model.save_changes() + → Jupyter kernel syncs traitlet + → Python observer _handle_js_event fires + → json.loads(change["new"]) + → callback(data, "form:submit", widget_label) +``` -app = PyWry() -widget = app.show("

Hello from anywidget!

") +### Python → JS Path -# Events work identically -widget.on("app:ready", lambda d, e, l: print("Widget ready")) -widget.emit("app:update", {"count": 42}) +``` +widget.emit("pywry:set-content", {"id": "status", "text": "Done"}) + → json.dumps({"type": ..., "data": ..., "ts": uuid.hex}) + → self._py_event = json_string + → self.send_state("_py_event") + → Jupyter kernel syncs traitlet + → JS model.on("change:_py_event") fires + → JSON.parse(model.get("_py_event")) + → pywry._fire(type, data) + → registered on() listeners execute ``` -**How it works:** - -1. Python creates a `PyWryWidget` (extends `anywidget.AnyWidget`) -2. An ESM module is bundled as the widget frontend -3. Traitlets (`content`, `theme`, `_js_event`, `_py_event`) sync bidirectionally via Jupyter comms -4. `widget.emit()` → sets `_py_event` traitlet → JS receives change → dispatches to JS listeners -5. JS `pywry.emit()` → sets `_js_event` traitlet → Python `_handle_js_event()` → dispatches to callbacks +## The ESM Render Function + +The widget frontend is an ESM module with a `render({model, el})` function. This function must: + +1. Create a `.pywry-widget` container div inside `el` +2. Render `model.get("content")` as innerHTML +3. Create a local `pywry` bridge object with `emit()`, `on()`, and `_fire()` +4. Also set `window.pywry` for HTML `onclick` handlers to access +5. Listen for `change:_py_event` and dispatch to `pywry._fire()` +6. Listen for `change:content` and re-render +7. Listen for `change:theme` and update CSS classes + +The `pywry` bridge in the ESM implements the JavaScript side of the protocol: + +```javascript +const pywry = { + _handlers: {}, + emit: function(type, data) { + // Write to _js_event traitlet → triggers Python observer + model.set('_js_event', JSON.stringify({type, data: data || {}, ts: Date.now()})); + model.save_changes(); + // Also dispatch locally so JS listeners fire immediately + this._fire(type, data || {}); + }, + on: function(type, callback) { + if (!this._handlers[type]) this._handlers[type] = []; + this._handlers[type].push(callback); + }, + _fire: function(type, data) { + (this._handlers[type] || []).forEach(function(h) { h(data); }); + } +}; +``` -**When it's used:** Notebook environment + anywidget installed + no Plotly/AG Grid/TradingView content. +## Building a Reusable Component -## Level 2: InlineWidget (IFrame + FastAPI) +A reusable component is a Python class that takes a `BaseWidget` and registers event handlers. Because it only calls `on()` and `emit()`, it works on all three rendering paths without modification. -Used for Plotly, AG Grid, and TradingView content in notebooks, or when anywidget isn't installed. Starts a local FastAPI server and renders via an IFrame. +### Python Side: State Mixin Pattern -**Requirements:** `pip install fastapi uvicorn` +PyWry's built-in components (`GridStateMixin`, `PlotlyStateMixin`, `ChatStateMixin`, `ToolbarStateMixin`) all follow the same pattern — they inherit from `EmittingWidget` and call `self.emit()`: ```python -from pywry import PyWry +from pywry.state_mixins import EmittingWidget -app = PyWry() -# Plotly/Grid/TradingView automatically use InlineWidget -handle = app.show_plotly(fig) -handle = app.show_dataframe(df) -handle = app.show_tvchart(ohlcv_data) -``` +class CounterMixin(EmittingWidget): + """Adds a counter widget that syncs between Python and JavaScript.""" -**How it works:** + def increment(self, amount: int = 1): + self.emit("counter:increment", {"amount": amount}) -1. A singleton FastAPI server starts in a background thread (one per kernel) -2. Each widget gets a URL (`/widget/{widget_id}`) and a WebSocket (`/ws/{widget_id}`) -3. An IFrame in the notebook cell points to the widget URL -4. `widget.emit()` → enqueues event → WebSocket send loop pushes to browser -5. JS `pywry.emit()` → sends over WebSocket → FastAPI handler dispatches to Python callbacks + def reset(self): + self.emit("counter:reset", {}) -**Multiple widgets share one server** — efficient for dashboards with many components. + def set_value(self, value: int): + self.emit("counter:set", {"value": value}) +``` -**Browser-only mode:** +Any widget class that mixes this in and provides `emit()` gets counter functionality: ```python -widget = app.show("

Dashboard

") -widget.open_in_browser() # Opens system browser instead of notebook +class MyWidget(PyWryWidget, CounterMixin): + pass + +widget = MyWidget(content=counter_html) +widget.increment(5) # Works in notebooks (anywidget traitlets) +widget.reset() # Works in browser (WebSocket) + # Works in native windows (Tauri IPC) ``` -## Level 3: NativeWindowHandle (Desktop) +### JavaScript Side: Event Handlers -Used in scripts and terminals. The PyTauri subprocess manages native OS webview windows. +The JavaScript side registers listeners through `pywry.on()` — this works identically in all rendering paths because every transport creates the same `pywry` bridge object: -```python -from pywry import PyWry +```javascript +// This code works in ESM (anywidget), ws-bridge.js (IFrame), and bridge.js (native) +pywry.on('counter:increment', function(data) { + var el = document.getElementById('counter-value'); + var current = parseInt(el.textContent) || 0; + el.textContent = current + data.amount; +}); + +pywry.on('counter:reset', function() { + document.getElementById('counter-value').textContent = '0'; +}); + +pywry.on('counter:set', function(data) { + document.getElementById('counter-value').textContent = data.value; +}); + +// User clicks emit events back to Python — same pywry.emit() everywhere +document.getElementById('inc-btn').onclick = function() { + pywry.emit('counter:clicked', {action: 'increment'}); +}; +``` + +### Wiring It Together -app = PyWry(title="My App", width=800, height=600) -handle = app.show("

Native Window

") +To use the component with `ChatManager`, `app.show()`, or any other entry point: + +```python +from pywry import HtmlContent, PyWry -# Same API as notebook widgets -handle.on("app:click", lambda d, e, l: print("Clicked!", d)) -handle.emit("app:update", {"status": "ready"}) +app = PyWry() -# Additional native-only features -handle.close() -handle.hide() -handle.eval_js("document.title = 'Updated'") -print(handle.label) # Window label +counter_html = """ +
+

0

+ + +
+ +""" + +def on_counter_click(data, event_type, label): + if data["action"] == "increment": + app.emit("counter:increment", {"amount": 1}, label) + elif data["action"] == "reset": + app.emit("counter:reset", {}, label) + +widget = app.show( + HtmlContent(html=counter_html), + callbacks={"counter:clicked": on_counter_click}, +) ``` -**How it works:** JSON-over-stdin/stdout IPC to the PyTauri Rust subprocess. The subprocess manages the OS webview (WKWebView on macOS, WebView2 on Windows, WebKitGTK on Linux). +This works in native windows, notebooks with anywidget, notebooks with IFrame fallback, and browser mode — the same HTML, the same callbacks, the same `pywry.emit()`/`pywry.on()` contract. + +## Specialized Widget Subclasses + +When a component needs its own bundled JavaScript library (like Plotly, AG Grid, or TradingView), it defines a widget subclass with a custom `_esm`: + +| Subclass | Mixin | Bundled Library | Extra Traitlets | +|----------|-------|-----------------|-----------------| +| `PyWryWidget` | `EmittingWidget` | Base bridge only | — | +| `PyWryPlotlyWidget` | `PlotlyStateMixin` | Plotly.js | `figure_json`, `chart_id` | +| `PyWryAgGridWidget` | `GridStateMixin` | AG Grid | `grid_config`, `grid_id`, `aggrid_theme` | +| `PyWryChatWidget` | `ChatStateMixin` | Chat handlers | `_asset_js`, `_asset_css` | +| `PyWryTVChartWidget` | `TVChartStateMixin` | Lightweight-charts | `chart_config`, `chart_id` | -## Writing Portable Code +Each subclass overrides `_esm` with an ESM module that includes both the library code and the domain-specific event handlers. The extra traitlets carry domain state (chart data, grid config, etc.) alongside the standard `content`/`theme`/`_js_event`/`_py_event` protocol. -Since all three backends share the `BaseWidget` protocol, write code against the protocol: +### Lazy Asset Loading + +`PyWryChatWidget` uses two additional traitlets — `_asset_js` and `_asset_css` — for on-demand library loading. When `ChatManager` first encounters a `PlotlyArtifact`, it pushes the Plotly library source through `_asset_js`: ```python -def setup_dashboard(widget): - """Works with any widget type.""" - widget.on("app:ready", lambda d, e, l: print("Ready in", l)) - widget.on("app:click", handle_click) - widget.emit("app:config", {"theme": "dark"}) - -# Works everywhere -handle = app.show(my_html) -setup_dashboard(handle) +# ChatManager detects anywidget and uses trait instead of HTTP +self._widget.set_trait("_asset_js", plotly_source_code) +``` + +The ESM listens for the trait change and injects the code: + +```javascript +model.on("change:_asset_js", function() { + var js = model.get("_asset_js"); + if (js) { + var script = document.createElement("script"); + script.textContent = js; + document.head.appendChild(script); + } +}); ``` -## Fallback Behavior +This replaces the `chat:load-assets` HTTP-based injection used in the IFrame transport, keeping the protocol uniform while adapting to the transport's capabilities. + +## Transport Comparison -If `anywidget` is not installed, `PyWryWidget` becomes a stub that shows an error message with install instructions. The `InlineWidget` fallback handles all notebook rendering in that case. +| Aspect | Anywidget | IFrame+WebSocket | Native Window | +|--------|-----------|------------------|---------------| +| `pywry.emit()` | Traitlet `_js_event` | WebSocket send | Tauri IPC `pyInvoke` | +| `pywry.on()` | Local handler dict | Local handler dict | Local handler dict | +| Python `emit()` | Traitlet `_py_event` | Async queue → WS send | Tauri event emit | +| Python `on()` | Traitlet observer | Callback dict lookup | Callback dict lookup | +| Asset loading | Bundled in `_esm` or `_asset_js` trait | HTTP ` + + {plotly.js, ag-grid.js, etc. if needed} + {toolbar handler scripts if toolbars present} + + +
+ {your HTML content} +
+ + +``` + +The `ws-bridge.js` template has three placeholders replaced at serve time: + +- `__WIDGET_ID__` → the widget's UUID +- `__WS_AUTH_TOKEN__` → per-widget authentication token (or `null`) +- `__PYWRY_DEBUG__` → `true` or `false` + +## WebSocket Protocol + +### Connection and Authentication + +On page load, `ws-bridge.js` opens a WebSocket: + +``` +ws://localhost:8765/ws/{widget_id} +``` + +If token auth is enabled (default), the token is sent in the `Sec-WebSocket-Protocol` header as `pywry.token.{token}`. The server validates the token before accepting the connection. Invalid tokens receive close code `4001`. + +After two consecutive auth failures, the browser automatically reloads the page to get a fresh token. + +### Event Wire Format + +Both directions use the same JSON structure: + +**JS → Python:** +```json +{"type": "app:click", "data": {"x": 100}, "widgetId": "abc123", "ts": 1234567890} +``` + +**Python → JS:** +```json +{"type": "pywry:set-content", "data": {"id": "status", "text": "Done"}, "ts": "a1b2c3"} +``` + +### JS → Python Path + +``` +pywry.emit("form:submit", {name: "Alice"}) + → JSON.stringify({type, data, widgetId, ts}) + → WebSocket.send(json_string) + → FastAPI websocket_endpoint receives message + → _route_ws_message(widget_id, msg) + → lookup callbacks in _state.widgets[widget_id] + → _state.callback_queue.put((callback, data, event_type, widget_id)) + → callback processor thread dequeues and executes + → callback(data, "form:submit", widget_id) +``` + +### Python → JS Path + +``` +widget.emit("pywry:set-content", {"id": "status", "text": "Done"}) + → serialize {type, data, ts} + → asyncio.run_coroutine_threadsafe(queue.put(event), server_loop) + → _ws_sender_loop pulls from event_queues[widget_id] + → websocket.send_json(event) + → ws-bridge.js receives message + → pywry._fire(type, data) + → registered on() listeners execute +``` + +### Reconnection + +If the WebSocket drops, `ws-bridge.js` reconnects with exponential backoff (1s → 2s → 4s → max 10s). During disconnection, `pywry.emit()` calls queue in `_msgQueue` and flush on reconnect. + +### Page Unload + +When the user closes the tab or navigates away: + +1. Secret input values are cleared from the DOM +2. A `pywry:disconnect` event is sent over WebSocket +3. `navigator.sendBeacon` posts to `/disconnect/{widget_id}` as fallback +4. Server fires `pywry:disconnect` callback if registered and cleans up state + +## The `pywry` Bridge Object + +`ws-bridge.js` creates `window.pywry` with the same interface as the anywidget ESM bridge: + +| Method | Description | +|--------|-------------| +| `emit(type, data)` | Send event to Python over WebSocket | +| `on(type, callback)` | Register listener for events from Python | +| `_fire(type, data)` | Dispatch locally to `on()` listeners | +| `result(data)` | Shorthand for `emit("pywry:result", data)` | +| `send(data)` | Shorthand for `emit("pywry:message", data)` | + +The bridge also pre-registers handlers for all built-in `pywry:*` events — CSS injection, content updates, theme switching, downloads, alerts, navigation. These are the same events handled by the anywidget ESM. + +## Building a Reusable Component + +The same component code works on both transports because both create the same `pywry` bridge. A component needs: + +### Python: A State Mixin + +```python +from pywry.state_mixins import EmittingWidget + + +class ProgressMixin(EmittingWidget): + """Adds a progress bar that syncs between Python and JavaScript.""" + + def set_progress(self, value: float, label: str = ""): + self.emit("progress:update", {"value": value, "label": label}) + + def complete(self): + self.emit("progress:complete", {}) +``` + +This mixin works with any widget that implements `emit()` — `PyWryWidget`, `InlineWidget`, or `NativeWindowHandle`. + +### JavaScript: Event Listeners + +```javascript +pywry.on('progress:update', function(data) { + var bar = document.getElementById('progress-bar'); + bar.style.width = data.value + '%'; + var label = document.getElementById('progress-label'); + if (label) label.textContent = data.label || (data.value + '%'); +}); + +pywry.on('progress:complete', function() { + var bar = document.getElementById('progress-bar'); + bar.style.width = '100%'; + bar.style.backgroundColor = '#a6e3a1'; +}); +``` + +This JavaScript runs identically in: + +- **Anywidget ESM** — the local `pywry` object writes to traitlets +- **IFrame ws-bridge.js** — the local `pywry` object writes to WebSocket +- **Native bridge.js** — the local `pywry` object writes to Tauri IPC + +### HTML Content + +```python +progress_html = """ +
+
+
+
+
+
+""" + +widget = app.show(HtmlContent(html=progress_html)) +widget.set_progress(0) # Works on anywidget +widget.set_progress(50) # Works on IFrame+WebSocket +widget.complete() # Works on native window +``` + +## Multiple Widgets + +Each widget gets its own WebSocket connection and event queue. Events are routed by `widget_id` — there is no crosstalk between widgets: + +```python +chart = app.show_plotly(fig) +table = app.show_dataframe(df) + +chart.on("plotly:click", handle_chart_click) +table.on("grid:cell-click", handle_cell_click) + +chart.emit("plotly:update-layout", {"layout": {"title": "Updated"}}) +# Only the chart widget receives this — table is unaffected +``` + +## Security + +| Mechanism | How It Works | +|-----------|-------------| +| **Per-widget token** | Generated at creation, injected into HTML, sent via `Sec-WebSocket-Protocol` header, validated before accepting WebSocket | +| **Origin validation** | Optional `websocket_allowed_origins` list checked on WebSocket upgrade | +| **Auto-refresh** | Two consecutive auth failures trigger page reload for fresh token | +| **Secret clearing** | `beforeunload` event clears revealed password/secret input values from DOM | + +## Deploy Mode (Redis Backend) + +In production with multiple Uvicorn workers: + +- Widget HTML and tokens are stored in Redis instead of `_state.widgets` +- Callbacks register in a shared callback registry +- Event queues remain per-process (WebSocket connections are worker-local) +- Widget registration uses HTTP POST to ensure the correct worker handles it + +The developer-facing API is unchanged. The same `widget.on()` and `widget.emit()` calls work regardless of whether state is in-memory or in Redis. + +## Transport Comparison + +| Aspect | IFrame+WebSocket | Anywidget | Native Window | +|--------|------------------|-----------|---------------| +| `pywry.emit()` | WebSocket send | Traitlet `_js_event` | Tauri IPC `pyInvoke` | +| `pywry.on()` | Local handler dict | Local handler dict | Local handler dict | +| Python `emit()` | Async queue → WS send | Traitlet `_py_event` | Tauri event emit | +| Python `on()` | Callback dict lookup | Traitlet observer | Callback dict lookup | +| Asset loading | HTTP ` -""" - -app.show(html, include_plotly=True) -``` - ## Theming -Charts automatically adapt to PyWry's theme: - -```python -from pywry import PyWry, ThemeMode +Charts automatically adapt to PyWry's dark/light mode. PyWry applies the built-in `plotly_dark` or `plotly_white` template based on the active theme. -app = PyWry(theme=ThemeMode.LIGHT) # or ThemeMode.DARK - -fig = px.scatter(x=[1, 2, 3], y=[1, 4, 9]) -app.show_plotly(fig) # Uses appropriate Plotly template -``` - -To change theme dynamically: +To switch dynamically: ```python handle.emit("pywry:update-theme", {"theme": "light"}) ``` +The chart re-renders with the appropriate Plotly template. + ### Custom Per-Theme Templates -By default, PyWry applies the built-in `plotly_dark` or `plotly_white` template based on the current theme. To customize chart colors *per theme* while preserving automatic switching, use `template_dark` and `template_light` on `PlotlyConfig`: +Override specific layout properties while keeping automatic theme switching: ```python -from pywry import PlotlyConfig - config = PlotlyConfig( template_dark={ "layout": { "paper_bgcolor": "#1a1a2e", "plot_bgcolor": "#16213e", "font": {"color": "#e0e0e0"}, + "colorway": ["#89b4fa", "#a6e3a1", "#f9e2af", "#f38ba8"], } }, template_light={ "layout": { "paper_bgcolor": "#ffffff", - "plot_bgcolor": "#f0f0f0", + "plot_bgcolor": "#f8f9fa", "font": {"color": "#222222"}, + "colorway": ["#1971c2", "#2f9e44", "#e8590c", "#c2255c"], } }, ) @@ -233,21 +274,75 @@ config = PlotlyConfig( handle = app.show_plotly(fig, config=config) ``` -**How it works:** +Your overrides are deep-merged on top of the built-in base template. Values you set take precedence; everything else is inherited. Both templates are stored on the chart and automatically selected when the theme toggles. -- Your overrides are **deep-merged** on top of the built-in base template (`plotly_dark` or `plotly_white`). -- **User values always win** on conflict. Anything you don't set is inherited from the base. -- Both templates are stored on the chart and automatically selected when the theme toggles. -- Arrays (e.g., colorways) are replaced entirely, not element-merged. +Set only one side (e.g. `template_dark` alone) and the other theme uses the unmodified base. -You can also set only one side — e.g., `template_dark` alone — and the other theme will use the unmodified base. +## Embedding in Multi-Widget Pages -!!! tip - Use `template_dark` / `template_light` instead of setting `fig.update_layout(template=...)` directly. The latter gets overwritten on theme switch; the former survives toggles. +To place a chart alongside other components, generate the chart HTML directly: + +```python +import json +from pywry.templates import build_plotly_init_script + +chart_html = build_plotly_init_script( + figure=json.loads(fig.to_json()), + chart_id="revenue-chart", +) +``` + +Then compose with `Div` and pass `include_plotly=True` to `app.show()`. The `chart_id` lets you target the specific chart when multiple charts share a page: + +```python +handle.emit("plotly:update-figure", {"figure": new_fig_dict, "chartId": "revenue-chart"}) +``` + +See [Multi-Widget Composition](../../guides/multi-widget.md) for the full pattern. + +## With Toolbars + +```python +from pywry import Toolbar, Button, Select, Option + +toolbar = Toolbar( + position="top", + items=[ + Select( + event="chart:metric", + label="Metric", + options=[ + Option(label="GDP per Capita", value="gdpPercap"), + Option(label="Population", value="pop"), + Option(label="Life Expectancy", value="lifeExp"), + ], + selected="gdpPercap", + ), + Button(event="chart:reset", label="Reset Zoom"), + ], +) + +def on_metric_change(data, event_type, label): + metric = data["value"] + new_fig = px.scatter(df, x=metric, y="lifeExp", color="continent") + handle.emit("plotly:update-figure", {"figure": new_fig.to_dict()}) + +def on_reset(data, event_type, label): + handle.emit("plotly:reset-zoom", {}) + +handle = app.show_plotly( + fig, + toolbars=[toolbar], + callbacks={ + "chart:metric": on_metric_change, + "chart:reset": on_reset, + }, +) +``` ## Next Steps - **[`PlotlyConfig` Reference](plotly-config.md)** — All configuration options - **[Event Reference](../../reference/events/plotly.md)** — Plotly event payloads -- **[Toolbar System](../../components/toolbar/index.md)** — Adding controls to your charts +- **[Multi-Widget Composition](../../guides/multi-widget.md)** — Embedding charts in dashboards - **[Theming & CSS](../../components/theming.md)** — Visual customization diff --git a/pywry/docs/docs/integrations/pytauri/index.md b/pywry/docs/docs/integrations/pytauri/index.md new file mode 100644 index 0000000..93f564b --- /dev/null +++ b/pywry/docs/docs/integrations/pytauri/index.md @@ -0,0 +1,411 @@ +# PyTauri Transport + +PyWry's event system uses a unified protocol — `on()`, `emit()`, `update()`, `display()` — that works identically across PyTauri, IFrame+WebSocket, and anywidget. This page explains how that protocol is implemented over the PyTauri transport, so you can build reusable components that work seamlessly in all three environments. + +For the other transports, see [Anywidget Transport](../anywidget/index.md) and [IFrame + WebSocket Transport](../inline-widget/index.md). + +## Architecture + +PyTauri runs a Rust subprocess that manages OS webview windows. Python communicates with this subprocess over stdin/stdout JSON IPC. + +```mermaid +flowchart LR + subgraph python["Python Process"] + RT["runtime.py
send_command()"] + CB["callbacks.py
dispatch()"] + end + + subgraph tauri["PyTauri Subprocess"] + MAIN["__main__.py
dispatch_command()"] + subgraph engine["Tauri Engine"] + subgraph wv["Window w-abc → WebView"] + BR["bridge.js"] + SE["system-events.js"] + HTML["your HTML"] + end + end + end + + RT -- "stdin JSON
{action, label, event, payload}" --> MAIN + MAIN -- "stdout JSON
{success: true}" --> RT + wv -- "pywry_event IPC
{label, type, data}" --> MAIN + MAIN -- "stdout event JSON" --> CB +``` + +Each window runs the same `bridge.js` and `system-events.js` scripts that the other transports use, providing the same `window.pywry` bridge object. + +## How NativeWindowHandle Implements the Protocol + +| BaseWidget Method | Native Implementation | +|-------------------|----------------------| +| `emit(type, data)` | `runtime.emit_event(label, type, data)` → stdin JSON `{action:"emit"}` → Tauri emits `pywry:event` to the window → `bridge.js` `_trigger(type, data)` dispatches to JS listeners | +| `on(type, callback)` | `callbacks.get_registry().register(label, type, callback)` → when JS calls `pywry.emit()`, Tauri invokes `pywry_event` IPC → `handle_pywry_event` dispatches via callback registry | +| `update(html)` | `lifecycle.set_content(label, html)` → builds new HTML page → replaces window content via Tauri | +| `display()` | No-op — native windows are visible immediately on creation | + +### Additional Native Methods + +`NativeWindowHandle` provides methods beyond `BaseWidget` that are only available in native mode: + +| Method | Description | +|--------|-------------| +| `eval_js(script)` | Execute arbitrary JavaScript in the window | +| `close()` | Destroy the window | +| `hide()` / `show_window()` | Toggle visibility without destroying | +| `proxy` | Returns a `WindowProxy` for full Tauri WebviewWindow API access | + +The `WindowProxy` exposes the complete Tauri window control surface — maximize, minimize, fullscreen, set title, set size, set position, set background color, set always-on-top, open devtools, set zoom level, navigate to URL, and more. These are native OS operations that have no equivalent in the notebook transports. + +## IPC Message Protocol + +### Python → Subprocess (stdin) + +Python sends JSON commands to the subprocess via stdin. Each command is a single JSON object on one line: + +```json +{"action": "emit", "label": "w-abc123", "event": "pywry:set-content", "payload": {"id": "status", "text": "Done"}} +``` + +| Action | Fields | Effect | +|--------|--------|--------| +| `create` | `label`, `url`, `html`, `title`, `width`, `height`, `theme` | Create a new window | +| `emit` | `label`, `event`, `payload` | Emit event to window's JavaScript | +| `eval_js` | `label`, `script` | Execute JavaScript in window | +| `close` | `label` | Close and destroy window | +| `hide` | `label` | Hide window | +| `show` | `label` | Show hidden window | +| `set_content` | `label`, `html` | Replace window HTML | +| `set_theme` | `label`, `theme` | Switch dark/light theme | + +The subprocess responds with `{"success": true}` or `{"success": false, "error": "..."}` on stdout. + +### Subprocess → Python (stdout) + +When JavaScript calls `pywry.emit()` in a window, the event flows: + +1. `bridge.js` calls `window.__TAURI__.pytauri.pyInvoke('pywry_event', payload)` +2. Tauri routes the IPC call to `handle_pywry_event(label, event_data)` in the subprocess +3. `handle_pywry_event` dispatches to the subprocess callback registry +4. The event is also written to stdout as JSON for the parent process +5. The parent process's reader thread picks it up and dispatches via `callbacks.get_registry()` + +The stdout event format: + +```json +{"type": "event", "label": "w-abc123", "event_type": "app:click", "data": {"x": 100}} +``` + +### Request-Response Correlation + +For blocking operations (like `eval_js` that needs a return value), the command includes a `request_id`. The subprocess echoes this ID in the response, and `send_command_with_response()` matches them: + +```python +cmd = {"action": "eval_js", "label": "w-abc", "script": "document.title", "request_id": "req_001"} +# stdin → subprocess executes → stdout response includes request_id +response = {"success": True, "result": "My Window", "request_id": "req_001"} +``` + +For fire-and-forget events (high-frequency streaming), `emit_event_fire()` sends the command without waiting for a response, draining stale responses to prevent queue buildup. + +## The `pywry` Bridge in Native Windows + +Native windows load `bridge.js` from `frontend/src/bridge.js` during page initialization. This creates the same `window.pywry` object as the other transports: + +| Method | Native Implementation | +|--------|----------------------| +| `pywry.emit(type, data)` | Calls `window.__TAURI__.pytauri.pyInvoke('pywry_event', {label, event_type, data})` — Tauri IPC to Rust subprocess | +| `pywry.on(type, callback)` | Stores in local `_handlers` dict | +| `pywry._trigger(type, data)` | Dispatches to local `_handlers` + wildcard handlers | +| `pywry.dispatch(type, data)` | Alias for `_trigger` | +| `pywry.result(data)` | Calls `pyInvoke('pywry_result', {data, window_label})` | + +When Python calls `handle.emit("app:update", data)`, the subprocess emits a Tauri event named `pywry:event` to the target window. The `event-bridge.js` script listens for this: + +```javascript +window.__TAURI__.event.listen('pywry:event', function(event) { + var eventType = event.payload.event_type; + var data = event.payload.data; + window.pywry._trigger(eventType, data); +}); +``` + +This triggers the same `_trigger()` dispatch as the other transports, so `pywry.on()` listeners work identically. + +## Building Components That Work Everywhere + +A reusable component uses the `BaseWidget` protocol and never calls transport-specific APIs. The same Python mixin + JavaScript event handlers work in all three environments: + +```python +from pywry.state_mixins import EmittingWidget + + +class NotificationMixin(EmittingWidget): + def notify(self, title: str, body: str, level: str = "info"): + self.emit("pywry:alert", { + "message": body, + "title": title, + "type": level, + }) + + def confirm(self, question: str, callback_event: str): + self.emit("pywry:alert", { + "message": question, + "type": "confirm", + "callback_event": callback_event, + }) +``` + +This mixin calls `self.emit()`, which resolves to: + +- **Native**: `runtime.emit_event()` → stdin JSON → Tauri event → `bridge.js` `_trigger()` +- **Anywidget**: `_py_event` traitlet → Jupyter sync → ESM `pywry._fire()` +- **IFrame**: `event_queues[widget_id].put()` → WebSocket send → `ws-bridge.js` `_fire()` + +The JavaScript toast handler is pre-registered in all three bridges, so `pywry:alert` works everywhere. + +## PyTauri and Plugins + +The native transport runs on [PyTauri](https://pytauri.github.io/pytauri/), which is distributed as a vendored wheel (`pytauri-wheel`). PyTauri provides: + +- OS-native webview windows (WKWebView on macOS, WebView2 on Windows, WebKitGTK on Linux) +- Tauri's plugin system for native capabilities +- JSON-over-stdin/stdout IPC between Python and the Rust subprocess + +### Enabling Tauri Plugins + +Tauri plugins extend native windows with OS-level capabilities — clipboard access, native dialogs, filesystem operations, notifications, HTTP client, global shortcuts, and more. Enable them via configuration: + +```python +from pywry import PyWry, PyWrySettings + +app = PyWry(settings=PyWrySettings( + tauri_plugins=["dialog", "clipboard_manager", "notification"], +)) +``` + +Once enabled, the plugin's JavaScript API is available through `window.__TAURI__` in the window: + +```javascript +// Native file dialog +const { open } = window.__TAURI__.dialog; +const path = await open({ multiple: false }); + +// Clipboard +const { writeText } = window.__TAURI__.clipboardManager; +await writeText("Copied from PyWry"); +``` + +Plugins are only available in native mode — they have no effect in anywidget or IFrame transports. Components that use plugins should check for availability: + +```javascript +if (window.__TAURI__ && window.__TAURI__.dialog) { + // Native: use OS dialog + const path = await window.__TAURI__.dialog.open(); + pywry.emit('file:selected', {path: path}); +} else { + // Notebook/browser: use HTML file input + document.getElementById('file-input').click(); +} +``` + +See the [Tauri Plugins reference](tauri-plugins.md) for the full list of 19 available plugins, capability configuration, and detailed examples. + +### Plugin Security (Capabilities) + +Tauri uses a capability system to control which APIs a window can call. PyWry grants `:default` permissions for all bundled plugins. For fine-grained control: + +```python +settings = PyWrySettings( + tauri_plugins=["shell", "fs"], + extra_capabilities=["shell:allow-execute", "fs:allow-read-file"], +) +``` + +## Native-Only Features + +The PyTauri transport provides OS-level capabilities that have no equivalent in the notebook or browser transports. These features require the PyTauri subprocess and only work when `app.show()` renders a native desktop window. + +### Native Menus + +Native application menus (File, Edit, View, Help) render in the OS menu bar on macOS and in the window title bar on Windows and Linux. Menus are built from `MenuConfig`, `MenuItemConfig`, `CheckMenuItemConfig`, and `SubmenuConfig` objects, each with a Python callback: + +```python +from pywry import PyWry, MenuConfig, MenuItemConfig, SubmenuConfig, PredefinedMenuItemConfig, PredefinedMenuItemKind + +app = PyWry() + +def on_new(data, event_type, label): + app.show("

Untitled

", title="New File") + +def on_save(data, event_type, label): + app.emit("app:save", {"path": "current.json"}, label) + +def on_quit(data, event_type, label): + app.destroy() + +menu = MenuConfig( + id="app-menu", + items=[ + SubmenuConfig(text="File", items=[ + MenuItemConfig(id="new", text="New", handler=on_new, accelerator="CmdOrCtrl+N"), + MenuItemConfig(id="save", text="Save", handler=on_save, accelerator="CmdOrCtrl+S"), + PredefinedMenuItemConfig(item=PredefinedMenuItemKind.SEPARATOR), + MenuItemConfig(id="quit", text="Quit", handler=on_quit, accelerator="CmdOrCtrl+Q"), + ]), + ], +) + +handle = app.show("

Editor

", menu=menu) +``` + +Menu items fire their `handler` callback when clicked. Keyboard accelerators (`CmdOrCtrl+S`, etc.) work globally while the window has focus. + +`CheckMenuItemConfig` creates toggle items with a checkmark state. The callback receives `{"checked": true/false}` in the event data. + +See [Native Menus](../../guides/menus.md) for the full menu system documentation. + +### System Tray + +`TrayProxy` creates an icon in the OS system tray (notification area on Windows, menu bar on macOS). The tray icon can show a tooltip, a context menu, and respond to click events: + +```python +from pywry import TrayProxy, MenuConfig, MenuItemConfig + +def on_show(data, event_type, label): + handle.show_window() + +def on_quit(data, event_type, label): + app.destroy() + +tray = TrayProxy.create( + tray_id="my-tray", + tooltip="My App", + menu=MenuConfig( + id="tray-menu", + items=[ + MenuItemConfig(id="show", text="Show Window", handler=on_show), + MenuItemConfig(id="quit", text="Quit", handler=on_quit), + ], + ), +) +``` + +The tray icon persists even when all windows are hidden, making it useful for background applications that need to remain accessible. + +See [System Tray](../../guides/tray.md) for the full tray API. + +### Window Control + +`NativeWindowHandle` provides direct control over the OS window through the `WindowProxy` API. These operations have no equivalent in notebook or browser environments: + +```python +handle = app.show("

Dashboard

", title="My App") + +handle.set_title("Updated Title") +handle.set_size(1200, 800) +handle.center() +handle.maximize() +handle.minimize() +handle.set_focus() + +handle.hide() +handle.show_window() +handle.close() +``` + +The full `WindowProxy` (accessed via `handle.proxy`) exposes every Tauri `WebviewWindow` method: + +| Category | Methods | +|----------|---------| +| **State** | `is_maximized`, `is_minimized`, `is_fullscreen`, `is_focused`, `is_visible`, `is_decorated` | +| **Actions** | `maximize()`, `unmaximize()`, `minimize()`, `unminimize()`, `set_fullscreen()`, `center()` | +| **Size** | `set_size()`, `set_min_size()`, `set_max_size()`, `inner_size`, `outer_size` | +| **Position** | `set_position()`, `inner_position`, `outer_position` | +| **Appearance** | `set_title()`, `set_decorations()`, `set_background_color()`, `set_always_on_top()`, `set_content_protected()` | +| **Webview** | `eval_js()`, `navigate()`, `reload()`, `open_devtools()`, `close_devtools()`, `set_zoom()`, `zoom` | + +### JavaScript Execution + +`eval_js()` runs arbitrary JavaScript in the window's webview. This is useful for DOM queries, dynamic updates, and debugging: + +```python +handle.eval_js("document.getElementById('counter').textContent = '42'") +handle.eval_js("document.title = 'Updated from Python'") +``` + +### Multi-Window Communication + +In native mode, each `app.show()` call creates an independent OS window with its own label. Python code can target events to specific windows using the `label` parameter on `app.emit()`: + +```python +chart_handle = app.show(chart_html, title="Chart") +table_handle = app.show(table_html, title="Data") + +def on_row_selected(data, event_type, label): + selected = data["rows"] + filtered_fig = build_chart(selected) + app.emit("plotly:update-figure", {"figure": filtered_fig}, chart_handle.label) + +table_handle.on("grid:row-selected", on_row_selected) +``` + +Window events are routed by label — each window receives only the events targeted at it. The callback registry maps `(label, event_type)` pairs to callbacks, so the same event name can have different handlers in different windows. + +### Window Modes + +PyWry offers three strategies for managing native windows: + +| Mode | Behavior | +|------|----------| +| `SingleWindowMode` | One window at a time. Calling `show()` again replaces the content in the existing window. | +| `NewWindowMode` | Each `show()` creates a new window. Multiple windows can be open simultaneously. | +| `MultiWindowMode` | Like `NewWindowMode` but with coordinated lifecycle — closing the primary window closes all secondary windows. | + +```python +from pywry import PyWry +from pywry.window_manager import NewWindowMode + +app = PyWry(mode=NewWindowMode()) + +h1 = app.show("

Window 1

", title="First") +h2 = app.show("

Window 2

", title="Second") +``` + +See [Window Modes](../../guides/window-management.md) for details on each mode. + +### Hot Reload + +In native mode, PyWry can watch CSS and JavaScript files for changes and push updates to the window without a full page reload: + +```python +from pywry import PyWry, HtmlContent + +app = PyWry(hot_reload=True) + +content = HtmlContent( + html="

Dashboard

", + css_files=["styles/dashboard.css"], + script_files=["scripts/chart.js"], +) + +handle = app.show(content) +``` + +When `dashboard.css` changes on disk, PyWry injects the updated CSS via `pywry:inject-css` without reloading the page. Script file changes trigger a full page refresh with scroll position preservation. + +See [Hot Reload](../../guides/hot-reload.md) for configuration details. + +## Transport Comparison + +| Aspect | Native Window | Anywidget | IFrame+WebSocket | +|--------|---------------|-----------|------------------| +| `pywry.emit()` | Tauri IPC `pyInvoke` | Traitlet `_js_event` | WebSocket send | +| `pywry.on()` | Local handler dict | Local handler dict | Local handler dict | +| Python `emit()` | stdin JSON → Tauri event | Traitlet `_py_event` | Async queue → WS | +| Python `on()` | Callback registry | Traitlet observer | Callback dict | +| Asset loading | Bundled in page HTML | Bundled in `_esm` | HTTP ` """ @@ -1430,9 +886,7 @@ async def websocket_endpoint( # pylint: disable=too-many-branches,too-many-stat token = None accepted_subprotocol = None if server_settings.websocket_require_token: - # Check for token in Sec-WebSocket-Protocol header - # Client sends: new WebSocket(url, ['pywry.token.XXX']) - # Server receives in sec-websocket-protocol header + # Token is sent via Sec-WebSocket-Protocol header sec_websocket_protocol = websocket.headers.get("sec-websocket-protocol", "") if sec_websocket_protocol.startswith("pywry.token."): token = sec_websocket_protocol.replace("pywry.token.", "", 1) @@ -2544,7 +1998,7 @@ def update_figure( else: final_config = {} - # NOTE: For InlineWidget, we send an update event for the partial plot update. + # Send an update event for the partial plot update. # This keeps the rest of the page (including toolbar) intact. # If we wanted to replace the toolbar, we'd need to reload the whole HTML. # For full replacement, see update_html. @@ -2979,7 +2433,7 @@ def show( # pylint: disable=too-many-arguments,too-many-branches,too-many-state # Generate widget token FIRST - this will be stored with the widget widget_token = _generate_widget_token(widget_id) - # Build full HTML - bridge MUST be in head so window.pywry exists before user scripts run + # Bridge goes in head so window.pywry exists before user scripts run # Note: wrap_content_with_toolbars already wraps content in pywry-content div html = f""" diff --git a/pywry/pywry/mcp/builders.py b/pywry/pywry/mcp/builders.py index 32316f4..609cca6 100644 --- a/pywry/pywry/mcp/builders.py +++ b/pywry/pywry/mcp/builders.py @@ -358,9 +358,8 @@ def build_chat_config(cfg: dict[str, Any]) -> Any: ChatConfig Built chat configuration. """ - from pywry.chat import ChatConfig, SlashCommand + from pywry.chat import ChatConfig - cmds_data = cfg.get("slash_commands") kwargs: dict[str, Any] = { "system_prompt": cfg.get("system_prompt", ""), "model": cfg.get("model", "gpt-4"), @@ -368,16 +367,7 @@ def build_chat_config(cfg: dict[str, Any]) -> Any: "max_tokens": cfg.get("max_tokens", 4096), "streaming": cfg.get("streaming", True), "persist": cfg.get("persist", False), - "provider": cfg.get("provider"), } - if cmds_data: - kwargs["slash_commands"] = [ - SlashCommand( - name=c["name"], - description=c.get("description", ""), - ) - for c in cmds_data - ] return ChatConfig(**kwargs) diff --git a/pywry/pywry/mcp/handlers.py b/pywry/pywry/mcp/handlers.py index f8d5225..f4ca101 100644 --- a/pywry/pywry/mcp/handlers.py +++ b/pywry/pywry/mcp/handlers.py @@ -691,7 +691,7 @@ def _handle_list_resources(_ctx: HandlerContext) -> HandlerResult: def _handle_create_chat_widget(ctx: HandlerContext) -> HandlerResult: - from ..chat import ChatThread, _default_slash_commands, build_chat_html + from ..chat import ChatThread, build_chat_html from .builders import build_chat_widget_config, build_toolbars as _build_toolbars app = get_app() @@ -729,15 +729,11 @@ def _handle_create_chat_widget(ctx: HandlerContext) -> HandlerResult: _chat_thread_store.setdefault(widget_id, {})[thread_id] = default_thread _chat_message_store.setdefault(widget_id, {})[thread_id] = [] - # Register default slash commands - for cmd in _default_slash_commands(): - widget.emit( - "chat:register-command", - { - "name": cmd.name, - "description": cmd.description, - }, - ) + # Register default slash command + widget.emit( + "chat:register-command", + {"name": "/clear", "description": "Clear the conversation"}, + ) # Register custom slash commands if widget_config.chat_config.slash_commands: diff --git a/pywry/pywry/mcp/skills/chat/SKILL.md b/pywry/pywry/mcp/skills/chat/SKILL.md index f3e822b..422169c 100644 --- a/pywry/pywry/mcp/skills/chat/SKILL.md +++ b/pywry/pywry/mcp/skills/chat/SKILL.md @@ -171,11 +171,10 @@ Requires `anthropic` package and `ANTHROPIC_API_KEY` environment variable. ### Custom Callback ```python -from pywry.chat_providers import CallbackProvider +from pywry.chat.providers.callback import CallbackProvider provider = CallbackProvider( - generate_fn=my_generate, # (messages, config) → str | ChatMessage - stream_fn=my_stream, # (messages, config, cancel_event) → AsyncIterator[str] + prompt_fn=my_prompt, # (session_id, content_blocks, cancel_event) → AsyncIterator[SessionUpdate] ) ``` diff --git a/pywry/pywry/scripts.py b/pywry/pywry/scripts.py index 49de749..958141d 100644 --- a/pywry/pywry/scripts.py +++ b/pywry/pywry/scripts.py @@ -1,9 +1,12 @@ -"""JavaScript bridge scripts for PyWry.""" +"""JavaScript bridge scripts for PyWry. -# pylint: disable=C0302 +All JavaScript is loaded from dedicated files in ``frontend/src/``. +No inline JS is defined in this module. +""" from __future__ import annotations +from functools import lru_cache from pathlib import Path from .assets import get_toast_notifications_js @@ -12,1218 +15,71 @@ _SRC_DIR = Path(__file__).parent / "frontend" / "src" -def _get_tooltip_manager_js() -> str: - """Load the tooltip manager JavaScript from the single source file.""" - tooltip_file = _SRC_DIR / "tooltip-manager.js" - if tooltip_file.exists(): - return tooltip_file.read_text(encoding="utf-8") - return "" - - -PYWRY_BRIDGE_JS = """ -(function() { - 'use strict'; - - // Create or extend window.pywry - DO NOT replace to preserve existing handlers - if (!window.pywry) { - window.pywry = { - theme: 'dark', - _handlers: {} - }; - } - - // Ensure _handlers exists - if (!window.pywry._handlers) { - window.pywry._handlers = {}; - } - - // Add/update methods on existing object (preserves registered handlers) - window.pywry.result = function(data) { - const payload = { - data: data, - window_label: window.__PYWRY_LABEL__ || 'unknown' - }; - if (window.__TAURI__ && window.__TAURI__.pytauri && window.__TAURI__.pytauri.pyInvoke) { - window.__TAURI__.pytauri.pyInvoke('pywry_result', payload); - } - }; - - window.pywry.openFile = function(path) { - if (window.__TAURI__ && window.__TAURI__.pytauri && window.__TAURI__.pytauri.pyInvoke) { - window.__TAURI__.pytauri.pyInvoke('open_file', { path: path }); - } - }; - - window.pywry.devtools = function() { - if (window.__TAURI__ && window.__TAURI__.webview) { - console.log('DevTools requested'); - } - }; - - window.pywry.emit = function(eventType, data) { - // Validate event type format (matches Python pattern in models.py) - // Pattern: namespace:event-name with optional :suffix - // Allows: letters, numbers, underscores, hyphens (case-insensitive) - if (eventType !== '*' && !/^[a-zA-Z][a-zA-Z0-9]*:[a-zA-Z][a-zA-Z0-9_-]*(:[a-zA-Z0-9_-]+)?$/.test(eventType)) { - console.error('Invalid event type:', eventType, 'Must match namespace:event-name pattern'); - return; - } - - // Intercept modal events and handle them locally (client-side) - if (eventType && eventType.startsWith('modal:')) { - var parts = eventType.split(':'); - if (parts.length >= 3 && window.pywry && window.pywry.modal) { - var action = parts[1]; - var modalId = parts.slice(2).join(':'); - if (action === 'open') { - window.pywry.modal.open(modalId); - return; - } else if (action === 'close') { - window.pywry.modal.close(modalId); - return; - } else if (action === 'toggle') { - window.pywry.modal.toggle(modalId); - return; - } - } - } - - const payload = { - label: window.__PYWRY_LABEL__ || 'main', - event_type: eventType, - data: data || {} - }; - if (window.__TAURI__ && window.__TAURI__.pytauri && window.__TAURI__.pytauri.pyInvoke) { - window.__TAURI__.pytauri.pyInvoke('pywry_event', payload); - } - // Also dispatch locally so JS-side listeners fire immediately - this._trigger(eventType, data || {}); - }; - - window.pywry.on = function(eventType, callback) { - if (!this._handlers[eventType]) { - this._handlers[eventType] = []; - } - this._handlers[eventType].push(callback); - }; - - window.pywry.off = function(eventType, callback) { - if (!this._handlers[eventType]) return; - if (!callback) { - delete this._handlers[eventType]; - } else { - this._handlers[eventType] = this._handlers[eventType].filter( - function(h) { return h !== callback; } - ); - } - }; - - window.pywry._trigger = function(eventType, data) { - // Don't log data for secret-related events - var isSensitive = eventType.indexOf(':reveal') !== -1 || - eventType.indexOf(':copy') !== -1 || - eventType.indexOf('secret') !== -1 || - eventType.indexOf('password') !== -1 || - eventType.indexOf('api-key') !== -1 || - eventType.indexOf('token') !== -1; - if (window.PYWRY_DEBUG && !isSensitive) { - console.log('[PyWry] _trigger called:', eventType, data); - } else if (window.PYWRY_DEBUG) { - console.log('[PyWry] _trigger called:', eventType, '[REDACTED]'); - } - var handlers = this._handlers[eventType] || []; - var wildcardHandlers = this._handlers['*'] || []; - handlers.concat(wildcardHandlers).forEach(function(handler) { - try { - handler(data, eventType); - } catch (e) { - console.error('Error in event handler:', e); - } - }); - }; - - window.pywry.dispatch = function(eventType, data) { - // Don't log data for secret-related events - var isSensitive = eventType.indexOf(':reveal') !== -1 || - eventType.indexOf(':copy') !== -1 || - eventType.indexOf('secret') !== -1 || - eventType.indexOf('password') !== -1 || - eventType.indexOf('api-key') !== -1 || - eventType.indexOf('token') !== -1; - if (window.PYWRY_DEBUG && !isSensitive) { - console.log('[PyWry] dispatch called:', eventType, data); - } else if (window.PYWRY_DEBUG) { - console.log('[PyWry] dispatch called:', eventType, '[REDACTED]'); - } - this._trigger(eventType, data); - }; - - console.log('PyWry bridge initialized/updated'); -})(); -""" - -# System event handlers for built-in pywry events -# These are ALWAYS included, not just during hot reload -PYWRY_SYSTEM_EVENTS_JS = """ -(function() { - 'use strict'; - - // Guard against re-registration of system event handlers - if (window.pywry && window.pywry._systemEventsRegistered) { - console.log('[PyWry] System events already registered, skipping'); - return; - } - - // Helper function to inject or update CSS - window.pywry.injectCSS = function(css, id) { - var style = document.getElementById(id); - if (style) { - style.textContent = css; - } else { - style = document.createElement('style'); - style.id = id; - style.textContent = css; - document.head.appendChild(style); - } - console.log('[PyWry] Injected CSS with id:', id); - }; - - // Helper function to remove CSS by id - window.pywry.removeCSS = function(id) { - var style = document.getElementById(id); - if (style) { - style.remove(); - console.log('[PyWry] Removed CSS with id:', id); - } - }; - - // Helper function to set element styles - window.pywry.setStyle = function(data) { - var styles = data.styles; - if (!styles) return; - var elements = []; - if (data.id) { - var el = document.getElementById(data.id); - if (el) elements.push(el); - } else if (data.selector) { - elements = Array.from(document.querySelectorAll(data.selector)); - } - elements.forEach(function(el) { - Object.keys(styles).forEach(function(prop) { - el.style[prop] = styles[prop]; - }); - }); - console.log('[PyWry] Set styles on', elements.length, 'elements:', styles); - }; - - // Helper function to set element content - window.pywry.setContent = function(data) { - var elements = []; - if (data.id) { - var el = document.getElementById(data.id); - if (el) elements.push(el); - } else if (data.selector) { - elements = Array.from(document.querySelectorAll(data.selector)); - } - elements.forEach(function(el) { - if ('html' in data) { - el.innerHTML = data.html; - } else if ('text' in data) { - el.textContent = data.text; - } - }); - console.log('[PyWry] Set content on', elements.length, 'elements'); - }; - - // Register built-in pywry.on handlers for system events - // These are triggered via pywry.dispatch() when Python calls widget.emit() - window.pywry.on('pywry:inject-css', function(data) { - window.pywry.injectCSS(data.css, data.id); - }); - - window.pywry.on('pywry:remove-css', function(data) { - window.pywry.removeCSS(data.id); - }); - - window.pywry.on('pywry:set-style', function(data) { - window.pywry.setStyle(data); - }); - - window.pywry.on('pywry:set-content', function(data) { - window.pywry.setContent(data); - }); - - window.pywry.on('pywry:refresh', function() { - if (window.pywry.refresh) { - window.pywry.refresh(); - } else { - window.location.reload(); - } - }); - - // Handler for file downloads - uses Tauri save dialog in native mode - window.pywry.on('pywry:download', function(data) { - if (!data.content || !data.filename) { - console.error('[PyWry] Download requires content and filename'); - return; - } - // Use Tauri's native save dialog if available - if (window.__TAURI__ && window.__TAURI__.dialog && window.__TAURI__.fs) { - window.__TAURI__.dialog.save({ - defaultPath: data.filename, - title: 'Save File' - }).then(function(filePath) { - if (filePath) { - // Write the file using Tauri's filesystem API - window.__TAURI__.fs.writeTextFile(filePath, data.content).then(function() { - console.log('[PyWry] Saved to:', filePath); - }).catch(function(err) { - console.error('[PyWry] Failed to save file:', err); - }); - } else { - console.log('[PyWry] Save cancelled by user'); - } - }).catch(function(err) { - console.error('[PyWry] Save dialog error:', err); - }); - } else { - // Fallback for browser/iframe mode - var mimeType = data.mimeType || 'application/octet-stream'; - var blob = new Blob([data.content], { type: mimeType }); - var url = URL.createObjectURL(blob); - var a = document.createElement('a'); - a.href = url; - a.download = data.filename; - document.body.appendChild(a); - a.click(); - document.body.removeChild(a); - URL.revokeObjectURL(url); - console.log('[PyWry] Downloaded:', data.filename); - } - }); - - // Handler for navigation - window.pywry.on('pywry:navigate', function(data) { - if (data.url) { - window.location.href = data.url; - } - }); - - // Handler for alert dialogs - uses PYWRY_TOAST for typed notifications - window.pywry.on('pywry:alert', function(data) { - var message = data.message || data.text || ''; - var type = data.type || 'info'; - - // Use toast system if available - if (window.PYWRY_TOAST) { - if (type === 'confirm') { - window.PYWRY_TOAST.confirm({ - message: message, - title: data.title, - position: data.position, - onConfirm: function() { - if (data.callback_event) { - window.pywry.emit(data.callback_event, { confirmed: true }); - } - }, - onCancel: function() { - if (data.callback_event) { - window.pywry.emit(data.callback_event, { confirmed: false }); - } - } - }); - } else { - window.PYWRY_TOAST.show({ - message: message, - title: data.title, - type: type, - duration: data.duration, - position: data.position - }); - } - } else { - // Fallback to browser alert - alert(message); - } - }); - - // Handler for replacing HTML content - window.pywry.on('pywry:update-html', function(data) { - if (data.html) { - var app = document.getElementById('app'); - if (app) { - app.innerHTML = data.html; - } else { - document.body.innerHTML = data.html; - } - } - }); - - // Register Tauri event listeners that use the shared helper functions - if (window.__TAURI__ && window.__TAURI__.event) { - window.__TAURI__.event.listen('pywry:inject-css', function(event) { - window.pywry.injectCSS(event.payload.css, event.payload.id); - }); - - window.__TAURI__.event.listen('pywry:remove-css', function(event) { - window.pywry.removeCSS(event.payload.id); - }); - - window.__TAURI__.event.listen('pywry:set-style', function(event) { - window.pywry.setStyle(event.payload); - }); - - window.__TAURI__.event.listen('pywry:set-content', function(event) { - window.pywry.setContent(event.payload); - }); - - window.__TAURI__.event.listen('pywry:refresh', function() { - if (window.pywry.refresh) { - window.pywry.refresh(); - } else { - window.location.reload(); - } - }); - - window.__TAURI__.event.listen('pywry:download', function(event) { - var data = event.payload; - if (!data.content || !data.filename) { - console.error('[PyWry] Download requires content and filename'); - return; - } - // Use Tauri's native save dialog - window.__TAURI__.dialog.save({ - defaultPath: data.filename, - title: 'Save File' - }).then(function(filePath) { - if (filePath) { - window.__TAURI__.fs.writeTextFile(filePath, data.content).then(function() { - console.log('[PyWry] Saved to:', filePath); - }).catch(function(err) { - console.error('[PyWry] Failed to save file:', err); - }); - } else { - console.log('[PyWry] Save cancelled by user'); - } - }).catch(function(err) { - console.error('[PyWry] Save dialog error:', err); - }); - }); - - window.__TAURI__.event.listen('pywry:navigate', function(event) { - if (event.payload.url) { - window.location.href = event.payload.url; - } - }); - - // pywry:alert is handled by window.pywry.on() - no need for duplicate Tauri listener - // The Tauri event fires window.pywry._fire() which triggers the pywry.on handler - - window.__TAURI__.event.listen('pywry:update-html', function(event) { - if (event.payload.html) { - var app = document.getElementById('app'); - if (app) { - app.innerHTML = event.payload.html; - } else { - document.body.innerHTML = event.payload.html; - } - } - }); - } - - // Mark system events as registered to prevent duplicate handlers - window.pywry._systemEventsRegistered = true; - console.log('PyWry system events initialized'); -})(); -""" - -# TOOLTIP_MANAGER_JS is now loaded from frontend/src/tooltip-manager.js -# via _get_tooltip_manager_js() to avoid duplication - -THEME_MANAGER_JS = """ -(function() { - 'use strict'; - - if (window.__TAURI__ && window.__TAURI__.event) { - window.__TAURI__.event.listen('pywry:theme-update', function(event) { - var mode = event.payload.mode; - updateTheme(mode); - }); - } - - if (window.matchMedia) { - window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) { - var html = document.documentElement; - if (html.dataset.themeMode === 'system') { - updateTheme('system'); - } - }); - } - - function updateTheme(mode) { - var html = document.documentElement; - var resolvedMode = mode; - - html.dataset.themeMode = mode; - - if (mode === 'system') { - var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; - resolvedMode = prefersDark ? 'dark' : 'light'; - } - - html.classList.remove('light', 'dark'); - html.classList.add(resolvedMode); - window.pywry.theme = resolvedMode; - - var isDark = resolvedMode === 'dark'; - - if (window.Plotly && window.__PYWRY_PLOTLY_DIV__) { - Plotly.relayout(window.__PYWRY_PLOTLY_DIV__, { - template: isDark ? 'plotly_dark' : 'plotly_white' - }); - } - - var gridDiv = document.querySelector('[class*="ag-theme-"]'); - if (gridDiv) { - var classList = Array.from(gridDiv.classList); - classList.forEach(function(cls) { - if (cls.startsWith('ag-theme-')) { - var baseTheme = cls.replace('-dark', ''); - gridDiv.classList.remove(cls); - gridDiv.classList.add(isDark ? baseTheme + '-dark' : baseTheme); - } - }); - } - - window.pywry._trigger('pywry:theme-update', { mode: resolvedMode, original: mode }); - } - - // Register handler for pywry:update-theme events IMMEDIATELY (not in DOMContentLoaded) - // because content is injected via JavaScript after the page loads - console.log('[PyWry] Registering pywry:update-theme handler'); - window.pywry.on('pywry:update-theme', function(data) { - console.log('[PyWry] pywry:update-theme handler called with:', data); - var theme = data.theme || 'plotly_dark'; - var isDark = theme.includes('dark'); - var mode = isDark ? 'dark' : 'light'; - updateTheme(mode); - - // Also update Plotly with merged template (theme base + user overrides) - // relayout avoids carrying stale colours from the old layout. - if (window.Plotly && window.__PYWRY_PLOTLY_DIV__) { - var plotDiv = window.__PYWRY_PLOTLY_DIV__; - var templateName = isDark ? 'plotly_dark' : 'plotly_white'; - if (window.__pywryMergeThemeTemplate) { - var merged = window.__pywryMergeThemeTemplate(plotDiv, templateName); - if (window.__pywryStripThemeColors) window.__pywryStripThemeColors(plotDiv); - window.Plotly.relayout(plotDiv, { template: merged }); - } - } - - // Update AG Grid theme if present - if (data.theme && data.theme.startsWith('ag-theme-')) { - var gridDiv = document.querySelector('[class*="ag-theme-"]'); - if (gridDiv) { - var classList = Array.from(gridDiv.classList); - classList.forEach(function(cls) { - if (cls.startsWith('ag-theme-')) { - gridDiv.classList.remove(cls); - } - }); - gridDiv.classList.add(data.theme); - } - } - }); - - // Initialize theme on DOMContentLoaded (for initial page load) - document.addEventListener('DOMContentLoaded', function() { - var html = document.documentElement; - var currentTheme = html.classList.contains('dark') ? 'dark' : 'light'; - window.pywry.theme = currentTheme; - }); -})(); -""" - -EVENT_BRIDGE_JS = """ -(function() { - 'use strict'; - - // Listen for all pywry:* events from Python - if (window.__TAURI__ && window.__TAURI__.event) { - window.__TAURI__.event.listen('pywry:event', function(event) { - var eventType = event.payload.event_type; - var data = event.payload.data; - window.pywry._trigger(eventType, data); - }); - } - - console.log('Event bridge initialized'); -})(); -""" - -TOOLBAR_BRIDGE_JS = """ -(function() { - 'use strict'; - - function getToolbarState(toolbarId) { - var state = { toolbars: {}, components: {}, timestamp: Date.now() }; - - var toolbars = toolbarId - ? [document.getElementById(toolbarId)] - : document.querySelectorAll('.pywry-toolbar'); - - toolbars.forEach(function(toolbar) { - if (!toolbar) return; - var tbId = toolbar.id; - if (!tbId) return; - - state.toolbars[tbId] = { - position: Array.from(toolbar.classList) - .find(function(c) { return c.startsWith('pywry-toolbar-'); }) - ?.replace('pywry-toolbar-', '') || 'top', - components: [] - }; - - toolbar.querySelectorAll('[id]').forEach(function(el) { - var id = el.id; - var value = null; - var type = null; - - if (el.tagName === 'BUTTON') { - type = 'button'; - value = { disabled: el.disabled }; - } else if (el.tagName === 'SELECT') { - type = 'select'; - value = el.value; - } else if (el.tagName === 'INPUT') { - var inputType = el.type; - if (inputType === 'checkbox') { - return; - } else if (inputType === 'range') { - type = 'range'; - value = parseFloat(el.value); - } else if (inputType === 'number') { - type = 'number'; - value = parseFloat(el.value) || 0; - } else if (inputType === 'date') { - type = 'date'; - value = el.value; - } else if (el.classList.contains('pywry-input-secret')) { - // SECURITY: Never expose secret values via state - // Return has_value indicator instead - type = 'secret'; - value = { has_value: el.dataset.hasValue === 'true' }; - } else { - type = 'text'; - value = el.value; - } - } else if (el.classList.contains('pywry-multiselect')) { - type = 'multiselect'; - value = Array.from(el.querySelectorAll('input:checked')) - .map(function(i) { return i.value; }); - } else if (el.classList.contains('pywry-dropdown')) { - type = 'select'; - var selectedOpt = el.querySelector('.pywry-dropdown-option.pywry-selected'); - value = selectedOpt ? selectedOpt.getAttribute('data-value') : null; - } - - if (type) { - state.components[id] = { type: type, value: value }; - state.toolbars[tbId].components.push(id); - } - }); - }); - - return state; - } - - function getComponentValue(componentId) { - var el = document.getElementById(componentId); - if (!el) return null; - - if (el.tagName === 'SELECT') { - return el.value; - } else if (el.tagName === 'INPUT') { - var inputType = el.type; - // SECURITY: Never expose secret values via state getter - if (el.classList.contains('pywry-input-secret')) { - return { has_value: el.dataset.hasValue === 'true' }; - } - if (inputType === 'range' || inputType === 'number') { - return parseFloat(el.value); - } - return el.value; - } else if (el.classList.contains('pywry-multiselect')) { - return Array.from(el.querySelectorAll('input:checked')) - .map(function(i) { return i.value; }); - } else if (el.classList.contains('pywry-dropdown')) { - var selectedOpt = el.querySelector('.pywry-dropdown-option.pywry-selected'); - return selectedOpt ? selectedOpt.getAttribute('data-value') : null; - } - return null; - } - - function setComponentValue(componentId, value, attrs) { - var el = document.getElementById(componentId); - if (!el) return false; - - // SECURITY: Prevent setting secret values via state setter - // Secrets must be set via their event handler (with proper encoding) - if (el.classList && el.classList.contains('pywry-input-secret')) { - console.warn('[PyWry] Cannot set SecretInput value via toolbar:set-value. Use the event handler instead.'); - return false; - } - - // Generic attribute setter - handles any attribute for any component - // Accepts attrs object with attribute name: value pairs - if (attrs && typeof attrs === 'object') { - Object.keys(attrs).forEach(function(attrName) { - var attrValue = attrs[attrName]; - - // Skip componentId, toolbarId, value (handled separately), options (handled separately) - if (attrName === 'componentId' || attrName === 'toolbarId') return; - - // Handle specific attribute types - switch (attrName) { - case 'label': - case 'text': - // Update text content - find text element or use el directly - if (el.classList.contains('pywry-toolbar-button') || el.tagName === 'BUTTON') { - el.textContent = attrValue; - } else if (el.classList.contains('pywry-dropdown')) { - var textEl = el.querySelector('.pywry-dropdown-text'); - if (textEl) textEl.textContent = attrValue; - } else if (el.classList.contains('pywry-checkbox') || el.classList.contains('pywry-toggle')) { - var labelEl = el.querySelector('.pywry-checkbox-label, .pywry-input-label'); - if (labelEl) labelEl.textContent = attrValue; - } else if (el.classList.contains('pywry-tab-group')) { - // For tab groups, label refers to the group label - var groupLabel = el.closest('.pywry-input-group'); - if (groupLabel) { - var lbl = groupLabel.querySelector('.pywry-input-label'); - if (lbl) lbl.textContent = attrValue; - } - } else { - // Generic fallback - try to find label span or set text directly - var label = el.querySelector('.pywry-input-label'); - if (label) { - label.textContent = attrValue; - } else if (el.textContent !== undefined) { - el.textContent = attrValue; - } - } - break; - - case 'html': - case 'innerHTML': - // Update HTML content - if (el.classList.contains('pywry-toolbar-button') || el.tagName === 'BUTTON') { - el.innerHTML = attrValue; - } else if (el.classList.contains('pywry-dropdown')) { - var textEl = el.querySelector('.pywry-dropdown-text'); - if (textEl) textEl.innerHTML = attrValue; - } else { - el.innerHTML = attrValue; - } - break; - - case 'disabled': - // Toggle disabled state - if (attrValue) { - el.setAttribute('disabled', 'disabled'); - el.classList.add('pywry-disabled'); - // Also disable any inputs inside - el.querySelectorAll('input, button, select, textarea').forEach(function(inp) { - inp.setAttribute('disabled', 'disabled'); - }); - } else { - el.removeAttribute('disabled'); - el.classList.remove('pywry-disabled'); - el.querySelectorAll('input, button, select, textarea').forEach(function(inp) { - inp.removeAttribute('disabled'); - }); - } - break; - - case 'variant': - // Swap variant class for buttons - if (el.classList.contains('pywry-toolbar-button') || el.tagName === 'BUTTON') { - // Remove existing variant classes - var variants = ['primary', 'secondary', 'neutral', 'ghost', 'outline', 'danger', 'warning', 'icon']; - variants.forEach(function(v) { - el.classList.remove('pywry-btn-' + v); - }); - // Add new variant (if not primary, which is default with no class) - if (attrValue && attrValue !== 'primary') { - el.classList.add('pywry-btn-' + attrValue); - } - } - break; - - case 'size': - // Swap size class for buttons/tabs - if (el.classList.contains('pywry-toolbar-button') || el.tagName === 'BUTTON' || el.classList.contains('pywry-tab-group')) { - var sizes = ['xs', 'sm', 'lg', 'xl']; - sizes.forEach(function(s) { - el.classList.remove('pywry-btn-' + s); - el.classList.remove('pywry-tab-' + s); - }); - if (attrValue) { - if (el.classList.contains('pywry-tab-group')) { - el.classList.add('pywry-tab-' + attrValue); - } else { - el.classList.add('pywry-btn-' + attrValue); - } - } - } - break; - - case 'description': - case 'tooltip': - // Update data-tooltip attribute - if (attrValue) { - el.setAttribute('data-tooltip', attrValue); - } else { - el.removeAttribute('data-tooltip'); - } - break; - - case 'data': - // Update data-data attribute (JSON payload for buttons) - if (attrValue) { - el.setAttribute('data-data', JSON.stringify(attrValue)); - } else { - el.removeAttribute('data-data'); - } - break; - - case 'event': - // Update data-event attribute - el.setAttribute('data-event', attrValue); - break; - - case 'style': - // Update inline styles - can be string or object - if (typeof attrValue === 'string') { - el.style.cssText = attrValue; - } else if (typeof attrValue === 'object') { - Object.keys(attrValue).forEach(function(prop) { - el.style[prop] = attrValue[prop]; - }); - } - break; - - case 'className': - case 'class': - // Add/remove CSS classes - if (typeof attrValue === 'string') { - attrValue.split(' ').forEach(function(cls) { - if (cls) el.classList.add(cls); - }); - } else if (typeof attrValue === 'object') { - // Object format: {add: ['cls1'], remove: ['cls2']} - if (attrValue.add) { - (Array.isArray(attrValue.add) ? attrValue.add : [attrValue.add]).forEach(function(cls) { - if (cls) el.classList.add(cls); - }); - } - if (attrValue.remove) { - (Array.isArray(attrValue.remove) ? attrValue.remove : [attrValue.remove]).forEach(function(cls) { - if (cls) el.classList.remove(cls); - }); - } - } - break; - - case 'checked': - // Toggle checked state for checkboxes/toggles - var checkbox = el.querySelector('input[type="checkbox"]') || (el.type === 'checkbox' ? el : null); - if (checkbox) { - checkbox.checked = !!attrValue; - // Update visual state - if (attrValue) { - el.classList.add('pywry-toggle-checked'); - } else { - el.classList.remove('pywry-toggle-checked'); - } - } - break; - - case 'selected': - // Update selected value for radio groups, tab groups - if (el.classList.contains('pywry-radio-group')) { - el.querySelectorAll('input[type="radio"]').forEach(function(radio) { - radio.checked = radio.value === attrValue; - }); - } else if (el.classList.contains('pywry-tab-group')) { - el.querySelectorAll('.pywry-tab').forEach(function(tab) { - if (tab.dataset.value === attrValue) { - tab.classList.add('pywry-tab-active'); - } else { - tab.classList.remove('pywry-tab-active'); - } - }); - } - break; - - case 'placeholder': - // Update placeholder for inputs - var input = el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' ? el : el.querySelector('input, textarea'); - if (input) { - input.setAttribute('placeholder', attrValue); - } - break; - - case 'min': - case 'max': - case 'step': - // Update constraints for number/range inputs - var numInput = el.tagName === 'INPUT' ? el : el.querySelector('input[type="number"], input[type="range"]'); - if (numInput) { - numInput.setAttribute(attrName, attrValue); - } - break; - - case 'options': - // Handled separately below for dropdowns - break; +def _load_js(filename: str) -> str: + """Load a JavaScript file from the frontend/src/ directory. - case 'value': - // Handled separately below - break; - - default: - // Generic attribute setter - set as data attribute or HTML attribute - if (attrName.startsWith('data-')) { - el.setAttribute(attrName, attrValue); - } else { - // Try to set as property first, then as attribute - try { - if (attrName in el) { - el[attrName] = attrValue; - } else { - el.setAttribute(attrName, attrValue); - } - } catch (e) { - el.setAttribute(attrName, attrValue); - } - } - } - }); - } - - // Handle value and options (backward compatible behavior) - var options = attrs && attrs.options; - if (value === undefined && attrs && attrs.value !== undefined) { - value = attrs.value; - } - - if (el.tagName === 'SELECT' || el.tagName === 'INPUT') { - if (value !== undefined) el.value = value; - return true; - } else if (el.classList.contains('pywry-dropdown')) { - if (options && Array.isArray(options)) { - var menu = el.querySelector('.pywry-dropdown-menu'); - if (menu) { - menu.innerHTML = options.map(function(opt) { - var isSelected = String(opt.value) === String(value); - return '
' + opt.label + '
'; - }).join(''); - } - } - if (value !== undefined) { - var textEl = el.querySelector('.pywry-dropdown-text'); - if (textEl) { - var optionEl = el.querySelector('.pywry-dropdown-option[data-value="' + value + '"]'); - if (optionEl) { - textEl.textContent = optionEl.textContent; - el.querySelectorAll('.pywry-dropdown-option').forEach(function(opt) { - opt.classList.remove('pywry-selected'); - }); - optionEl.classList.add('pywry-selected'); - } - } - } - return true; - } else if (el.classList.contains('pywry-multiselect')) { - if (value !== undefined) { - var values = Array.isArray(value) ? value : [value]; - el.querySelectorAll('input[type="checkbox"]').forEach(function(cb) { - cb.checked = values.includes(cb.value); - }); - } - return true; - } else if (el.classList.contains('pywry-toggle')) { - if (value !== undefined) { - var checkbox = el.querySelector('input[type="checkbox"]'); - if (checkbox) { - checkbox.checked = !!value; - if (value) { - el.classList.add('pywry-toggle-checked'); - } else { - el.classList.remove('pywry-toggle-checked'); - } - } - } - return true; - } else if (el.classList.contains('pywry-checkbox')) { - if (value !== undefined) { - var checkbox = el.querySelector('input[type="checkbox"]'); - if (checkbox) checkbox.checked = !!value; - } - return true; - } else if (el.classList.contains('pywry-radio-group')) { - if (value !== undefined) { - el.querySelectorAll('input[type="radio"]').forEach(function(radio) { - radio.checked = radio.value === value; - }); - } - return true; - } else if (el.classList.contains('pywry-tab-group')) { - if (value !== undefined) { - el.querySelectorAll('.pywry-tab').forEach(function(tab) { - if (tab.dataset.value === value) { - tab.classList.add('pywry-tab-active'); - } else { - tab.classList.remove('pywry-tab-active'); - } - }); - } - return true; - } else if (el.classList.contains('pywry-range-group')) { - // Dual-handle range slider - if (attrs && (attrs.start !== undefined || attrs.end !== undefined)) { - var startInput = el.querySelector('input[data-range="start"]'); - var endInput = el.querySelector('input[data-range="end"]'); - var fill = el.querySelector('.pywry-range-track-fill'); - var startDisp = el.querySelector('.pywry-range-start-value'); - var endDisp = el.querySelector('.pywry-range-end-value'); - - if (startInput && attrs.start !== undefined) startInput.value = attrs.start; - if (endInput && attrs.end !== undefined) endInput.value = attrs.end; - - // Update visual fill - if (fill && startInput && endInput) { - var min = parseFloat(startInput.min) || 0; - var max = parseFloat(startInput.max) || 100; - var range = max - min; - var startVal = parseFloat(startInput.value); - var endVal = parseFloat(endInput.value); - var startPct = ((startVal - min) / range) * 100; - var endPct = ((endVal - min) / range) * 100; - fill.style.left = startPct + '%'; - fill.style.width = (endPct - startPct) + '%'; - } - if (startDisp && attrs.start !== undefined) startDisp.textContent = attrs.start; - if (endDisp && attrs.end !== undefined) endDisp.textContent = attrs.end; - } - return true; - } else if (el.classList.contains('pywry-input-range') || (el.tagName === 'INPUT' && el.type === 'range')) { - // Single slider - if (value !== undefined) { - el.value = value; - var display = el.nextElementSibling; - if (display && display.classList.contains('pywry-range-value')) { - display.textContent = value; - } - } - return true; - } - - // Generic fallback - try to set value if provided - if (value !== undefined && 'value' in el) { - el.value = value; - return true; - } - - // Return true if we processed any attrs - return attrs && Object.keys(attrs).length > 0; - } - - window.pywry.on('toolbar:request-state', function(data) { - var toolbarId = data && data.toolbarId; - var componentId = data && data.componentId; - var context = data && data.context; - - var response; - if (componentId) { - response = { - componentId: componentId, - value: getComponentValue(componentId), - context: context - }; - } else { - response = getToolbarState(toolbarId); - response.context = context; - if (toolbarId) response.toolbarId = toolbarId; - } - - window.pywry.emit('toolbar:state-response', response); - }); - - window.pywry.on('toolbar:set-value', function(data) { - if (data && data.componentId) { - // Pass entire data object as attrs for generic attribute setting - setComponentValue(data.componentId, data.value, data); - } - }); - - window.pywry.on('toolbar:set-values', function(data) { - if (data && data.values) { - Object.keys(data.values).forEach(function(id) { - setComponentValue(id, data.values[id]); - }); - } - }); - - window.__PYWRY_TOOLBAR__ = { - getState: getToolbarState, - getValue: getComponentValue, - setValue: setComponentValue - }; -})(); -""" - -# NOTE: Plotly and AG Grid event bridges are NOT defined here. -# They are loaded from the frontend JS files: -# - pywry/frontend/src/plotly-defaults.js (single source of truth for Plotly events) -# - pywry/frontend/src/aggrid-defaults.js (single source of truth for AG Grid events) -# These files are loaded via templates.py's build_plotly_script() and build_aggrid_script() - - -# Script for cleaning up sensitive inputs on page unload -_UNLOAD_CLEANUP_JS = """ -(function() { - 'use strict'; - - // Clear all revealed secrets from DOM - called on unload - // Restores mask for inputs that had a value, clears others - var MASK_CHARS = '••••••••••••'; - - function clearSecrets() { - try { - var secretInputs = document.querySelectorAll('.pywry-input-secret, input[type="password"]'); - for (var i = 0; i < secretInputs.length; i++) { - var inp = secretInputs[i]; - inp.type = 'password'; - // Restore mask if value existed, otherwise clear - if (inp.dataset && inp.dataset.hasValue === 'true') { - inp.value = MASK_CHARS; - inp.dataset.masked = 'true'; - } else { - inp.value = ''; - } - } - if (window.pywry && window.pywry._revealedSecrets) { - window.pywry._revealedSecrets = {}; - } - } catch (e) { - // Ignore errors during unload - } - } + Parameters + ---------- + filename : str + Name of the JS file to load. - // Page is being unloaded (close tab, refresh, navigate away) - window.addEventListener('beforeunload', function() { - clearSecrets(); - }); + Returns + ------- + str + File contents, or empty string if not found. + """ + path = _SRC_DIR / filename + if path.exists(): + return path.read_text(encoding="utf-8") + return "" - // Fallback for mobile/Safari - fires when page is hidden - window.addEventListener('pagehide', function() { - clearSecrets(); - }); -})(); -""" +@lru_cache(maxsize=1) +def _get_tooltip_manager_js() -> str: + """Load the tooltip manager JavaScript from the single source file.""" + return _load_js("tooltip-manager.js") -CLEANUP_JS = """ -(function() { - 'use strict'; - // Listen for cleanup signal before window destruction - if (window.__TAURI__ && window.__TAURI__.event) { - window.__TAURI__.event.listen('pywry:cleanup', function() { - console.log('Cleanup requested, releasing resources...'); +@lru_cache(maxsize=1) +def _get_bridge_js() -> str: + """Load the PyWry bridge (emit, on, result, etc.).""" + return _load_js("bridge.js") - // Clear Plotly - if (window.Plotly && window.__PYWRY_PLOTLY_DIV__) { - try { Plotly.purge(window.__PYWRY_PLOTLY_DIV__); } catch(e) {} - window.__PYWRY_PLOTLY_DIV__ = null; - } - // Clear AG Grid - if (window.__PYWRY_GRID_API__) { - try { window.__PYWRY_GRID_API__.destroy(); } catch(e) {} - window.__PYWRY_GRID_API__ = null; - } +@lru_cache(maxsize=1) +def _get_system_events_js() -> str: + """Load system event handlers (CSS injection, downloads, etc.).""" + return _load_js("system-events.js") - // Clear event handlers - if (window.pywry) { - window.pywry._handlers = {}; - } - console.log('Cleanup complete'); - }); - } +@lru_cache(maxsize=1) +def _get_theme_manager_js() -> str: + """Load the theme manager (dark/light switching, Plotly/AG Grid sync).""" + return _load_js("theme-manager.js") - console.log('Cleanup handler registered'); -})(); -""" -HOT_RELOAD_JS = """ -(function() { - 'use strict'; +@lru_cache(maxsize=1) +def _get_event_bridge_js() -> str: + """Load the Tauri event bridge.""" + return _load_js("event-bridge.js") - // Store scroll position in sessionStorage for preservation across refreshes - var SCROLL_KEY = 'pywry_scroll_' + (window.__PYWRY_LABEL__ || 'main'); - /** - * Save current scroll position to sessionStorage. - */ - function saveScrollPosition() { - var scrollData = { - x: window.scrollX || window.pageXOffset, - y: window.scrollY || window.pageYOffset, - timestamp: Date.now() - }; - try { - sessionStorage.setItem(SCROLL_KEY, JSON.stringify(scrollData)); - } catch (e) { - // sessionStorage may not be available - } - } +@lru_cache(maxsize=1) +def _get_toolbar_bridge_js() -> str: + """Load the toolbar state management bridge.""" + return _load_js("toolbar-bridge.js") - function restoreScrollPosition() { - try { - var data = sessionStorage.getItem(SCROLL_KEY); - if (data) { - var scrollData = JSON.parse(data); - // Only restore if saved within last 5 seconds (hot reload window) - if (Date.now() - scrollData.timestamp < 5000) { - window.scrollTo(scrollData.x, scrollData.y); - } - sessionStorage.removeItem(SCROLL_KEY); - } - } catch (e) { - // Ignore errors - } - } - // Override refresh to save scroll position before reloading - window.pywry.refresh = function() { - saveScrollPosition(); - window.location.reload(); - }; +@lru_cache(maxsize=1) +def _get_cleanup_js() -> str: + """Load cleanup handlers (secret clearing, resource release).""" + return _load_js("cleanup.js") - if (document.readyState === 'complete') { - restoreScrollPosition(); - } else { - window.addEventListener('load', restoreScrollPosition); - } - console.log('Hot reload bridge initialized'); -})(); -""" +@lru_cache(maxsize=1) +def _get_hot_reload_js() -> str: + """Load the hot reload bridge (scroll preservation).""" + return _load_js("hot-reload.js") def build_init_script( @@ -1232,17 +88,8 @@ def build_init_script( ) -> str: """Build the core initialization script for a window. - This builds the CORE JavaScript bridges: - - pywry bridge (emit, on, result, etc.) - - theme manager - - event bridge - - toolbar bridge - - cleanup handler - - hot reload (optional) - - NOTE: Plotly and AG Grid defaults are loaded separately via templates.py's - build_plotly_script() and build_aggrid_script() functions, which include - the library JS AND the defaults JS together. + Loads all bridge scripts from ``frontend/src/`` and concatenates + them with the window label assignment. Parameters ---------- @@ -1258,19 +105,17 @@ def build_init_script( """ scripts = [ f"window.__PYWRY_LABEL__ = '{window_label}';", - PYWRY_BRIDGE_JS, - PYWRY_SYSTEM_EVENTS_JS, - get_toast_notifications_js(), # Toast notification system - _get_tooltip_manager_js(), # Tooltip system for data-tooltip attributes - THEME_MANAGER_JS, - EVENT_BRIDGE_JS, - TOOLBAR_BRIDGE_JS, - _UNLOAD_CLEANUP_JS, # SecretInput cleanup on page unload - CLEANUP_JS, + _get_bridge_js(), + _get_system_events_js(), + get_toast_notifications_js(), + _get_tooltip_manager_js(), + _get_theme_manager_js(), + _get_event_bridge_js(), + _get_toolbar_bridge_js(), + _get_cleanup_js(), ] - # Add hot reload bridge only when enabled if enable_hot_reload: - scripts.append(HOT_RELOAD_JS) + scripts.append(_get_hot_reload_js()) return "\n".join(scripts) diff --git a/pywry/pywry/state/_factory.py b/pywry/pywry/state/_factory.py index 4afe607..2d2e332 100644 --- a/pywry/pywry/state/_factory.py +++ b/pywry/pywry/state/_factory.py @@ -73,7 +73,7 @@ def get_state_backend() -> StateBackend: Returns ------- StateBackend - The configured backend (MEMORY or REDIS). + The configured backend (MEMORY, REDIS, or SQLITE). Notes ----- @@ -83,6 +83,8 @@ def get_state_backend() -> StateBackend: backend = os.environ.get("PYWRY_DEPLOY__STATE_BACKEND", "memory").lower() if backend == "redis": return StateBackend.REDIS + if backend == "sqlite": + return StateBackend.SQLITE return StateBackend.MEMORY @@ -168,6 +170,12 @@ def get_widget_store() -> WidgetStore: pool_size=settings.redis_pool_size, ) + if backend == StateBackend.SQLITE: + from .sqlite import SqliteWidgetStore + + settings = _get_deploy_settings() + return SqliteWidgetStore(db_path=getattr(settings, "sqlite_path", "~/.config/pywry/pywry.db")) + return MemoryWidgetStore() @@ -199,6 +207,12 @@ def get_event_bus() -> EventBus: pool_size=settings.redis_pool_size, ) + if backend == StateBackend.SQLITE: + from .sqlite import SqliteEventBus + + settings = _get_deploy_settings() + return SqliteEventBus(db_path=getattr(settings, "sqlite_path", "~/.config/pywry/pywry.db")) + return MemoryEventBus() @@ -230,6 +244,12 @@ def get_connection_router() -> ConnectionRouter: pool_size=settings.redis_pool_size, ) + if backend == StateBackend.SQLITE: + from .sqlite import SqliteConnectionRouter + + settings = _get_deploy_settings() + return SqliteConnectionRouter(db_path=getattr(settings, "sqlite_path", "~/.config/pywry/pywry.db")) + return MemoryConnectionRouter() @@ -262,6 +282,12 @@ def get_session_store() -> SessionStore: pool_size=settings.redis_pool_size, ) + if backend == StateBackend.SQLITE: + from .sqlite import SqliteSessionStore + + settings = _get_deploy_settings() + return SqliteSessionStore(db_path=getattr(settings, "sqlite_path", "~/.config/pywry/pywry.db")) + return MemorySessionStore() @@ -294,6 +320,12 @@ def get_chat_store() -> ChatStore: pool_size=settings.redis_pool_size, ) + if backend == StateBackend.SQLITE: + from .sqlite import SqliteChatStore + + settings = _get_deploy_settings() + return SqliteChatStore(db_path=getattr(settings, "sqlite_path", "~/.config/pywry/pywry.db")) + return MemoryChatStore() diff --git a/pywry/pywry/state/base.py b/pywry/pywry/state/base.py index 070cada..5d8ce8c 100644 --- a/pywry/pywry/state/base.py +++ b/pywry/pywry/state/base.py @@ -657,6 +657,98 @@ async def clear_messages(self, widget_id: str, thread_id: str) -> None: """ ... + async def log_tool_call( + self, + message_id: str, + tool_call_id: str, + name: str, + kind: str = "other", + status: str = "pending", + arguments: dict[str, Any] | None = None, + result: str | None = None, + error: str | None = None, + ) -> None: + """Log a tool call for audit trail. No-op by default.""" + + async def log_artifact( + self, + message_id: str, + artifact_type: str, + title: str = "", + content: str | None = None, + metadata: dict[str, Any] | None = None, + ) -> None: + """Log an artifact for audit trail. No-op by default.""" + + async def log_token_usage( + self, + message_id: str, + model: str | None = None, + prompt_tokens: int = 0, + completion_tokens: int = 0, + total_tokens: int = 0, + cost_usd: float | None = None, + ) -> None: + """Log token usage for audit trail. No-op by default.""" + + async def log_resource( + self, + thread_id: str, + uri: str, + name: str = "", + mime_type: str | None = None, + content: str | None = None, + size: int | None = None, + ) -> None: + """Log a resource reference for audit trail. No-op by default.""" + + async def log_skill( + self, + thread_id: str, + name: str, + metadata: dict[str, Any] | None = None, + ) -> None: + """Log a skill activation for audit trail. No-op by default.""" + + async def get_tool_calls(self, message_id: str) -> list[dict[str, Any]]: + """Get tool calls for a message. Returns empty list by default.""" + return [] + + async def get_artifacts(self, message_id: str) -> list[dict[str, Any]]: + """Get artifacts for a message. Returns empty list by default.""" + return [] + + async def get_usage_stats( + self, + thread_id: str | None = None, + widget_id: str | None = None, + ) -> dict[str, Any]: + """Get aggregated token usage. Returns zeros by default.""" + return { + "prompt_tokens": 0, + "completion_tokens": 0, + "total_tokens": 0, + "cost_usd": 0.0, + "count": 0, + } + + async def get_total_cost( + self, + thread_id: str | None = None, + widget_id: str | None = None, + ) -> float: + """Get total cost in USD. Returns 0.0 by default.""" + return 0.0 + + async def search_messages( + self, + query: str, + widget_id: str | None = None, + limit: int = 50, + ) -> list[dict[str, Any]]: + """Search messages by content. Returns empty list by default.""" + return [] + class ChartStore(ABC): """Abstract chart layout/settings storage interface. diff --git a/pywry/pywry/state/sqlite.py b/pywry/pywry/state/sqlite.py new file mode 100644 index 0000000..e027254 --- /dev/null +++ b/pywry/pywry/state/sqlite.py @@ -0,0 +1,883 @@ +"""SQLite-backed state storage with encryption at rest. + +Implements all five state ABCs (WidgetStore, SessionStore, ChatStore, +EventBus, ConnectionRouter) in a single encrypted SQLite database file. +Designed for local single-user desktop apps but uses the same multi-user +schema as Redis so the interfaces are fully interchangeable. + +On first initialization, a default admin session is created with all +permissions. The database is encrypted using SQLCipher when available. +""" + +from __future__ import annotations + +import asyncio +import json +import logging +import os +import sqlite3 +import time +import uuid + +from pathlib import Path +from typing import Any + +from .base import ChatStore, ConnectionRouter, EventBus, SessionStore, WidgetStore +from .types import UserSession, WidgetData + + +logger = logging.getLogger(__name__) + +_SCHEMA = """ +CREATE TABLE IF NOT EXISTS widgets ( + widget_id TEXT PRIMARY KEY, + html TEXT NOT NULL, + token TEXT, + owner_worker_id TEXT, + created_at REAL NOT NULL, + metadata TEXT DEFAULT '{}' +); + +CREATE TABLE IF NOT EXISTS sessions ( + session_id TEXT PRIMARY KEY, + user_id TEXT NOT NULL, + roles TEXT NOT NULL DEFAULT '["admin"]', + created_at REAL NOT NULL, + expires_at REAL, + metadata TEXT DEFAULT '{}' +); + +CREATE TABLE IF NOT EXISTS role_permissions ( + role TEXT PRIMARY KEY, + permissions TEXT NOT NULL DEFAULT '[]' +); + +CREATE TABLE IF NOT EXISTS threads ( + thread_id TEXT PRIMARY KEY, + widget_id TEXT NOT NULL, + title TEXT NOT NULL DEFAULT 'New Chat', + status TEXT NOT NULL DEFAULT 'active', + created_at REAL NOT NULL, + updated_at REAL NOT NULL, + metadata TEXT DEFAULT '{}' +); + +CREATE TABLE IF NOT EXISTS messages ( + message_id TEXT PRIMARY KEY, + thread_id TEXT NOT NULL REFERENCES threads(thread_id) ON DELETE CASCADE, + widget_id TEXT NOT NULL, + role TEXT NOT NULL, + content TEXT NOT NULL, + timestamp REAL NOT NULL, + model TEXT, + stopped INTEGER DEFAULT 0, + metadata TEXT DEFAULT '{}' +); + +CREATE TABLE IF NOT EXISTS tool_calls ( + tool_call_id TEXT PRIMARY KEY, + message_id TEXT NOT NULL REFERENCES messages(message_id) ON DELETE CASCADE, + name TEXT NOT NULL, + kind TEXT NOT NULL DEFAULT 'other', + status TEXT NOT NULL DEFAULT 'pending', + arguments TEXT DEFAULT '{}', + result TEXT, + started_at REAL, + completed_at REAL, + error TEXT +); + +CREATE TABLE IF NOT EXISTS artifacts ( + artifact_id TEXT PRIMARY KEY, + message_id TEXT NOT NULL REFERENCES messages(message_id) ON DELETE CASCADE, + artifact_type TEXT NOT NULL, + title TEXT DEFAULT '', + content TEXT, + metadata TEXT DEFAULT '{}', + created_at REAL NOT NULL +); + +CREATE TABLE IF NOT EXISTS token_usage ( + usage_id INTEGER PRIMARY KEY AUTOINCREMENT, + message_id TEXT NOT NULL REFERENCES messages(message_id) ON DELETE CASCADE, + model TEXT, + prompt_tokens INTEGER DEFAULT 0, + completion_tokens INTEGER DEFAULT 0, + total_tokens INTEGER DEFAULT 0, + cost_usd REAL +); + +CREATE TABLE IF NOT EXISTS resources ( + resource_id TEXT PRIMARY KEY, + thread_id TEXT NOT NULL REFERENCES threads(thread_id) ON DELETE CASCADE, + uri TEXT NOT NULL, + name TEXT DEFAULT '', + mime_type TEXT, + content TEXT, + size INTEGER, + created_at REAL NOT NULL +); + +CREATE TABLE IF NOT EXISTS skills ( + skill_id TEXT PRIMARY KEY, + thread_id TEXT NOT NULL REFERENCES threads(thread_id) ON DELETE CASCADE, + name TEXT NOT NULL, + activated_at REAL NOT NULL, + metadata TEXT DEFAULT '{}' +); + +CREATE INDEX IF NOT EXISTS idx_threads_widget ON threads(widget_id); +CREATE INDEX IF NOT EXISTS idx_messages_thread ON messages(thread_id, timestamp); +CREATE INDEX IF NOT EXISTS idx_messages_widget ON messages(widget_id); +CREATE INDEX IF NOT EXISTS idx_tool_calls_message ON tool_calls(message_id); +CREATE INDEX IF NOT EXISTS idx_artifacts_message ON artifacts(message_id); +CREATE INDEX IF NOT EXISTS idx_token_usage_message ON token_usage(message_id); +CREATE INDEX IF NOT EXISTS idx_resources_thread ON resources(thread_id); +CREATE INDEX IF NOT EXISTS idx_sessions_user ON sessions(user_id); +""" + +_DEFAULT_ROLE_PERMISSIONS = { + "admin": ["read", "write", "admin", "delete", "manage_users"], + "editor": ["read", "write"], + "viewer": ["read"], + "anonymous": [], +} + +_MAX_MESSAGES_PER_THREAD = 1_000 + + +def _resolve_encryption_key() -> str | None: + env_key = os.environ.get("PYWRY_SQLITE_KEY") + if env_key: + return env_key + + try: + import keyring + + key = keyring.get_password("pywry", "sqlite_key") + if key: + return key + key = uuid.uuid4().hex + uuid.uuid4().hex + keyring.set_password("pywry", "sqlite_key", key) + return key + except Exception: + pass + + import hashlib + + salt_path = Path("~/.config/pywry/.salt").expanduser() + salt_path.parent.mkdir(parents=True, exist_ok=True) + if salt_path.exists(): + salt = salt_path.read_bytes() + else: + salt = os.urandom(32) + salt_path.write_bytes(salt) + + node = str(uuid.getnode()).encode() + return hashlib.sha256(node + salt).hexdigest() + + +class SqliteStateBackend: + """Shared database connection and schema management. + + Parameters + ---------- + db_path : str or Path + Path to the SQLite database file. + encryption_key : str or None + Explicit encryption key. If ``None``, derived automatically. + encrypted : bool + Whether to encrypt the database. Defaults to ``True``. + """ + + _lock: asyncio.Lock | None = None + _conn: sqlite3.Connection | None = None + _initialized: bool = False + + def __init__( + self, + db_path: str | Path = "~/.config/pywry/pywry.db", + encryption_key: str | None = None, + encrypted: bool = True, + ) -> None: + self._db_path = Path(db_path).expanduser() + self._encrypted = encrypted + self._key = encryption_key + if encrypted and not encryption_key: + self._key = _resolve_encryption_key() + + def _get_lock(self) -> asyncio.Lock: + if self._lock is None: + self._lock = asyncio.Lock() + return self._lock + + def _connect(self) -> sqlite3.Connection: + if self._conn is not None: + return self._conn + + self._db_path.parent.mkdir(parents=True, exist_ok=True) + + if self._encrypted and self._key: + try: + from pysqlcipher3 import dbapi2 as sqlcipher + + conn = sqlcipher.connect(str(self._db_path)) + conn.execute(f"PRAGMA key = '{self._key}'") + logger.debug("Opened encrypted SQLite database at %s", self._db_path) + except ImportError: + logger.warning( + "pysqlcipher3 not installed — database will NOT be encrypted. " + "Install with: pip install pysqlcipher3" + ) + conn = sqlite3.connect(str(self._db_path)) + else: + conn = sqlite3.connect(str(self._db_path)) + + conn.execute("PRAGMA journal_mode=WAL") + conn.execute("PRAGMA foreign_keys=ON") + conn.row_factory = sqlite3.Row + self._conn = conn + return conn + + async def _initialize(self) -> None: + if self._initialized: + return + async with self._get_lock(): + if self._initialized: + return + conn = self._connect() + conn.executescript(_SCHEMA) + + cursor = conn.execute("SELECT COUNT(*) FROM role_permissions") + if cursor.fetchone()[0] == 0: + for role, perms in _DEFAULT_ROLE_PERMISSIONS.items(): + conn.execute( + "INSERT INTO role_permissions (role, permissions) VALUES (?, ?)", + (role, json.dumps(perms)), + ) + + cursor = conn.execute("SELECT COUNT(*) FROM sessions") + if cursor.fetchone()[0] == 0: + conn.execute( + "INSERT INTO sessions (session_id, user_id, roles, created_at, metadata) " + "VALUES (?, ?, ?, ?, ?)", + ("local", "admin", json.dumps(["admin"]), time.time(), "{}"), + ) + + conn.commit() + self._initialized = True + + async def _execute( + self, sql: str, params: tuple[Any, ...] = (), commit: bool = True + ) -> list[sqlite3.Row]: + await self._initialize() + async with self._get_lock(): + conn = self._connect() + cursor = conn.execute(sql, params) + rows = cursor.fetchall() + if commit: + conn.commit() + return rows + + async def _executemany(self, sql: str, params_list: list[tuple[Any, ...]]) -> None: + await self._initialize() + async with self._get_lock(): + conn = self._connect() + conn.executemany(sql, params_list) + conn.commit() + + +class SqliteWidgetStore(SqliteStateBackend, WidgetStore): + """SQLite-backed widget store.""" + + async def save_widget( + self, + widget_id: str, + html: str, + token: str | None = None, + metadata: dict[str, Any] | None = None, + ) -> None: + await self._execute( + "INSERT OR REPLACE INTO widgets (widget_id, html, token, created_at, metadata) " + "VALUES (?, ?, ?, ?, ?)", + (widget_id, html, token, time.time(), json.dumps(metadata or {})), + ) + + async def get_widget(self, widget_id: str) -> WidgetData | None: + rows = await self._execute( + "SELECT * FROM widgets WHERE widget_id = ?", (widget_id,), commit=False + ) + if not rows: + return None + r = rows[0] + return WidgetData( + widget_id=r["widget_id"], + html=r["html"], + token=r["token"], + created_at=r["created_at"], + metadata=json.loads(r["metadata"] or "{}"), + ) + + async def delete_widget(self, widget_id: str) -> bool: + rows = await self._execute( + "DELETE FROM widgets WHERE widget_id = ? RETURNING widget_id", (widget_id,) + ) + return len(rows) > 0 + + async def list_widgets(self) -> list[str]: + rows = await self._execute("SELECT widget_id FROM widgets", commit=False) + return [r["widget_id"] for r in rows] + + async def cleanup_widget(self, widget_id: str) -> None: + await self.delete_widget(widget_id) + + +class SqliteSessionStore(SqliteStateBackend, SessionStore): + """SQLite-backed session store with RBAC.""" + + async def create_session( + self, + session_id: str, + user_id: str, + roles: list[str] | None = None, + ttl: int | None = None, + metadata: dict[str, Any] | None = None, + ) -> UserSession: + now = time.time() + expires_at = (now + ttl) if ttl else None + session = UserSession( + session_id=session_id, + user_id=user_id, + roles=roles or ["viewer"], + created_at=now, + expires_at=expires_at, + metadata=metadata or {}, + ) + await self._execute( + "INSERT OR REPLACE INTO sessions " + "(session_id, user_id, roles, created_at, expires_at, metadata) " + "VALUES (?, ?, ?, ?, ?, ?)", + ( + session.session_id, + session.user_id, + json.dumps(session.roles), + session.created_at, + session.expires_at, + json.dumps(session.metadata), + ), + ) + return session + + async def get_session(self, session_id: str) -> UserSession | None: + rows = await self._execute( + "SELECT * FROM sessions WHERE session_id = ?", (session_id,), commit=False + ) + if not rows: + return None + r = rows[0] + expires_at = r["expires_at"] + if expires_at and time.time() > expires_at: + await self.delete_session(session_id) + return None + return UserSession( + session_id=r["session_id"], + user_id=r["user_id"], + roles=json.loads(r["roles"]), + created_at=r["created_at"], + expires_at=expires_at, + metadata=json.loads(r["metadata"] or "{}"), + ) + + async def validate_session(self, session_id: str) -> bool: + session = await self.get_session(session_id) + return session is not None + + async def delete_session(self, session_id: str) -> bool: + rows = await self._execute( + "DELETE FROM sessions WHERE session_id = ? RETURNING session_id", (session_id,) + ) + return len(rows) > 0 + + async def refresh_session(self, session_id: str, extend_ttl: int | None = None) -> bool: + session = await self.get_session(session_id) + if session is None: + return False + if extend_ttl: + new_expires = time.time() + extend_ttl + await self._execute( + "UPDATE sessions SET expires_at = ? WHERE session_id = ?", + (new_expires, session_id), + ) + return True + + async def list_user_sessions(self, user_id: str) -> list[UserSession]: + rows = await self._execute( + "SELECT * FROM sessions WHERE user_id = ?", (user_id,), commit=False + ) + sessions = [] + now = time.time() + for r in rows: + expires_at = r["expires_at"] + if expires_at and now > expires_at: + continue + sessions.append( + UserSession( + session_id=r["session_id"], + user_id=r["user_id"], + roles=json.loads(r["roles"]), + created_at=r["created_at"], + expires_at=expires_at, + metadata=json.loads(r["metadata"] or "{}"), + ) + ) + return sessions + + async def check_permission( + self, + session_id: str, + resource_type: str, + resource_id: str, + permission: str, + ) -> bool: + session = await self.get_session(session_id) + if session is None: + return False + for role in session.roles: + rows = await self._execute( + "SELECT permissions FROM role_permissions WHERE role = ?", + (role,), + commit=False, + ) + if rows: + perms = json.loads(rows[0]["permissions"]) + if permission in perms: + return True + resource_perms = session.metadata.get("permissions", {}) + resource_key = f"{resource_type}:{resource_id}" + if resource_key in resource_perms: + return permission in resource_perms[resource_key] + return False + + +class SqliteChatStore(SqliteStateBackend, ChatStore): + """SQLite-backed chat store with audit trail.""" + + async def save_thread(self, widget_id: str, thread: Any) -> None: + await self._execute( + "INSERT OR REPLACE INTO threads " + "(thread_id, widget_id, title, status, created_at, updated_at, metadata) " + "VALUES (?, ?, ?, ?, ?, ?, ?)", + ( + thread.thread_id, + widget_id, + thread.title, + thread.status, + thread.created_at, + thread.updated_at, + json.dumps(thread.metadata), + ), + ) + + async def get_thread(self, widget_id: str, thread_id: str) -> Any: + from ..chat.models import ChatThread + + rows = await self._execute( + "SELECT * FROM threads WHERE widget_id = ? AND thread_id = ?", + (widget_id, thread_id), + commit=False, + ) + if not rows: + return None + r = rows[0] + return ChatThread( + thread_id=r["thread_id"], + title=r["title"], + status=r["status"], + created_at=r["created_at"], + updated_at=r["updated_at"], + metadata=json.loads(r["metadata"] or "{}"), + ) + + async def list_threads(self, widget_id: str) -> list[Any]: + from ..chat.models import ChatThread + + rows = await self._execute( + "SELECT * FROM threads WHERE widget_id = ? ORDER BY updated_at DESC", + (widget_id,), + commit=False, + ) + return [ + ChatThread( + thread_id=r["thread_id"], + title=r["title"], + status=r["status"], + created_at=r["created_at"], + updated_at=r["updated_at"], + metadata=json.loads(r["metadata"] or "{}"), + ) + for r in rows + ] + + async def delete_thread(self, widget_id: str, thread_id: str) -> bool: + rows = await self._execute( + "DELETE FROM threads WHERE widget_id = ? AND thread_id = ? RETURNING thread_id", + (widget_id, thread_id), + ) + return len(rows) > 0 + + async def append_message(self, widget_id: str, thread_id: str, message: Any) -> None: + content = message.content if isinstance(message.content, str) else json.dumps( + [p.model_dump(by_alias=True) for p in message.content] + ) + await self._execute( + "INSERT INTO messages " + "(message_id, thread_id, widget_id, role, content, timestamp, model, stopped, metadata) " + "VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)", + ( + message.message_id, + thread_id, + widget_id, + message.role, + content, + message.timestamp, + message.model, + 1 if message.stopped else 0, + json.dumps(message.metadata), + ), + ) + + await self._execute( + "UPDATE threads SET updated_at = ? WHERE thread_id = ?", + (time.time(), thread_id), + ) + + count_rows = await self._execute( + "SELECT COUNT(*) as cnt FROM messages WHERE thread_id = ?", + (thread_id,), + commit=False, + ) + count = count_rows[0]["cnt"] if count_rows else 0 + if count > _MAX_MESSAGES_PER_THREAD: + excess = count - _MAX_MESSAGES_PER_THREAD + await self._execute( + "DELETE FROM messages WHERE message_id IN " + "(SELECT message_id FROM messages WHERE thread_id = ? " + "ORDER BY timestamp ASC LIMIT ?)", + (thread_id, excess), + ) + + async def get_messages( + self, + widget_id: str, + thread_id: str, + limit: int = 50, + before_id: str | None = None, + ) -> list[Any]: + from ..chat.models import ChatMessage + + if before_id: + ts_rows = await self._execute( + "SELECT timestamp FROM messages WHERE message_id = ?", + (before_id,), + commit=False, + ) + if ts_rows: + before_ts = ts_rows[0]["timestamp"] + rows = await self._execute( + "SELECT * FROM messages WHERE thread_id = ? AND widget_id = ? " + "AND timestamp < ? ORDER BY timestamp DESC LIMIT ?", + (thread_id, widget_id, before_ts, limit), + commit=False, + ) + else: + rows = [] + else: + rows = await self._execute( + "SELECT * FROM messages WHERE thread_id = ? AND widget_id = ? " + "ORDER BY timestamp DESC LIMIT ?", + (thread_id, widget_id, limit), + commit=False, + ) + + messages = [] + for r in reversed(rows): + content_raw = r["content"] + try: + content = json.loads(content_raw) if content_raw.startswith("[") else content_raw + except (json.JSONDecodeError, AttributeError): + content = content_raw + + messages.append( + ChatMessage( + role=r["role"], + content=content, + message_id=r["message_id"], + timestamp=r["timestamp"], + model=r["model"], + stopped=bool(r["stopped"]), + metadata=json.loads(r["metadata"] or "{}"), + ) + ) + return messages + + async def clear_messages(self, widget_id: str, thread_id: str) -> None: + await self._execute( + "DELETE FROM messages WHERE thread_id = ? AND widget_id = ?", + (thread_id, widget_id), + ) + + async def log_tool_call( + self, + message_id: str, + tool_call_id: str, + name: str, + kind: str = "other", + status: str = "pending", + arguments: dict[str, Any] | None = None, + result: str | None = None, + error: str | None = None, + ) -> None: + now = time.time() + await self._execute( + "INSERT OR REPLACE INTO tool_calls " + "(tool_call_id, message_id, name, kind, status, arguments, result, " + "started_at, completed_at, error) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)", + ( + tool_call_id, + message_id, + name, + kind, + status, + json.dumps(arguments or {}), + result, + now if status == "in_progress" else None, + now if status in ("completed", "failed") else None, + error, + ), + ) + + async def log_artifact( + self, + message_id: str, + artifact_type: str, + title: str = "", + content: str | None = None, + metadata: dict[str, Any] | None = None, + ) -> None: + await self._execute( + "INSERT INTO artifacts " + "(artifact_id, message_id, artifact_type, title, content, metadata, created_at) " + "VALUES (?, ?, ?, ?, ?, ?, ?)", + ( + f"art_{uuid.uuid4().hex[:12]}", + message_id, + artifact_type, + title, + content, + json.dumps(metadata or {}), + time.time(), + ), + ) + + async def log_token_usage( + self, + message_id: str, + model: str | None = None, + prompt_tokens: int = 0, + completion_tokens: int = 0, + total_tokens: int = 0, + cost_usd: float | None = None, + ) -> None: + await self._execute( + "INSERT INTO token_usage " + "(message_id, model, prompt_tokens, completion_tokens, total_tokens, cost_usd) " + "VALUES (?, ?, ?, ?, ?, ?)", + (message_id, model, prompt_tokens, completion_tokens, total_tokens, cost_usd), + ) + + async def log_resource( + self, + thread_id: str, + uri: str, + name: str = "", + mime_type: str | None = None, + content: str | None = None, + size: int | None = None, + ) -> None: + await self._execute( + "INSERT INTO resources " + "(resource_id, thread_id, uri, name, mime_type, content, size, created_at) " + "VALUES (?, ?, ?, ?, ?, ?, ?, ?)", + ( + f"res_{uuid.uuid4().hex[:12]}", + thread_id, + uri, + name, + mime_type, + content, + size, + time.time(), + ), + ) + + async def log_skill( + self, + thread_id: str, + name: str, + metadata: dict[str, Any] | None = None, + ) -> None: + await self._execute( + "INSERT INTO skills (skill_id, thread_id, name, activated_at, metadata) " + "VALUES (?, ?, ?, ?, ?)", + ( + f"skill_{uuid.uuid4().hex[:12]}", + thread_id, + name, + time.time(), + json.dumps(metadata or {}), + ), + ) + + async def get_tool_calls(self, message_id: str) -> list[dict[str, Any]]: + rows = await self._execute( + "SELECT * FROM tool_calls WHERE message_id = ? ORDER BY started_at", + (message_id,), + commit=False, + ) + return [dict(r) for r in rows] + + async def get_artifacts(self, message_id: str) -> list[dict[str, Any]]: + rows = await self._execute( + "SELECT * FROM artifacts WHERE message_id = ? ORDER BY created_at", + (message_id,), + commit=False, + ) + return [dict(r) for r in rows] + + async def get_usage_stats( + self, + thread_id: str | None = None, + widget_id: str | None = None, + ) -> dict[str, Any]: + if thread_id: + rows = await self._execute( + "SELECT SUM(prompt_tokens) as prompt, SUM(completion_tokens) as completion, " + "SUM(total_tokens) as total, SUM(cost_usd) as cost, COUNT(*) as count " + "FROM token_usage tu JOIN messages m ON tu.message_id = m.message_id " + "WHERE m.thread_id = ?", + (thread_id,), + commit=False, + ) + elif widget_id: + rows = await self._execute( + "SELECT SUM(prompt_tokens) as prompt, SUM(completion_tokens) as completion, " + "SUM(total_tokens) as total, SUM(cost_usd) as cost, COUNT(*) as count " + "FROM token_usage tu JOIN messages m ON tu.message_id = m.message_id " + "WHERE m.widget_id = ?", + (widget_id,), + commit=False, + ) + else: + rows = await self._execute( + "SELECT SUM(prompt_tokens) as prompt, SUM(completion_tokens) as completion, " + "SUM(total_tokens) as total, SUM(cost_usd) as cost, COUNT(*) as count " + "FROM token_usage", + commit=False, + ) + if not rows: + return {"prompt_tokens": 0, "completion_tokens": 0, "total_tokens": 0, "cost_usd": 0, "count": 0} + r = rows[0] + return { + "prompt_tokens": r["prompt"] or 0, + "completion_tokens": r["completion"] or 0, + "total_tokens": r["total"] or 0, + "cost_usd": r["cost"] or 0.0, + "count": r["count"] or 0, + } + + async def get_total_cost( + self, + thread_id: str | None = None, + widget_id: str | None = None, + ) -> float: + stats = await self.get_usage_stats(thread_id=thread_id, widget_id=widget_id) + return stats["cost_usd"] + + async def search_messages( + self, + query: str, + widget_id: str | None = None, + limit: int = 50, + ) -> list[dict[str, Any]]: + pattern = f"%{query}%" + if widget_id: + rows = await self._execute( + "SELECT m.*, t.title as thread_title FROM messages m " + "JOIN threads t ON m.thread_id = t.thread_id " + "WHERE m.content LIKE ? AND m.widget_id = ? " + "ORDER BY m.timestamp DESC LIMIT ?", + (pattern, widget_id, limit), + commit=False, + ) + else: + rows = await self._execute( + "SELECT m.*, t.title as thread_title FROM messages m " + "JOIN threads t ON m.thread_id = t.thread_id " + "WHERE m.content LIKE ? ORDER BY m.timestamp DESC LIMIT ?", + (pattern, limit), + commit=False, + ) + return [dict(r) for r in rows] + + +class SqliteEventBus(SqliteStateBackend, EventBus): + """In-process event dispatch for SQLite backend. + + SQLite is single-process, so pub/sub is handled in-memory + identically to MemoryEventBus. + """ + + def __init__(self, *args: Any, **kwargs: Any) -> None: + super().__init__(*args, **kwargs) + self._subscribers: dict[str, list[Any]] = {} + + async def publish(self, channel: str, message: dict[str, Any]) -> None: + for callback in self._subscribers.get(channel, []): + try: + callback(message) + except Exception: + logger.exception("Event bus subscriber error on channel %s", channel) + + async def subscribe(self, channel: str, callback: Any) -> None: + if channel not in self._subscribers: + self._subscribers[channel] = [] + self._subscribers[channel].append(callback) + + async def unsubscribe(self, channel: str, callback: Any) -> None: + if channel in self._subscribers: + self._subscribers[channel] = [ + cb for cb in self._subscribers[channel] if cb != callback + ] + + +class SqliteConnectionRouter(SqliteStateBackend, ConnectionRouter): + """In-process connection routing for SQLite backend. + + Single-process, so routing is trivial. + """ + + def __init__(self, *args: Any, **kwargs: Any) -> None: + super().__init__(*args, **kwargs) + self._routes: dict[str, str] = {} + + async def register(self, widget_id: str, worker_id: str) -> None: + self._routes[widget_id] = worker_id + + async def get_worker(self, widget_id: str) -> str | None: + return self._routes.get(widget_id) + + async def unregister(self, widget_id: str) -> None: + self._routes.pop(widget_id, None) + + async def get_all_routes(self) -> dict[str, str]: + return dict(self._routes) diff --git a/pywry/pywry/state/types.py b/pywry/pywry/state/types.py index f13e1d0..2eba738 100644 --- a/pywry/pywry/state/types.py +++ b/pywry/pywry/state/types.py @@ -17,6 +17,7 @@ class StateBackend(str, Enum): MEMORY = "memory" REDIS = "redis" + SQLITE = "sqlite" @dataclass diff --git a/pywry/pywry/widget.py b/pywry/pywry/widget.py index b8c10bc..20aec17 100644 --- a/pywry/pywry/widget.py +++ b/pywry/pywry/widget.py @@ -242,7 +242,7 @@ def _get_aggrid_widget_esm() -> str: console.log('[PyWry AG Grid] render() called, renderId:', myRenderId); - // CRITICAL: Clear el completely to avoid stale content from re-renders + // Clear el to avoid stale content from re-renders el.innerHTML = ''; // Apply theme class to el (AnyWidget container) for proper theming @@ -687,7 +687,7 @@ def _get_aggrid_widget_esm() -> str: __TOOLBAR_HANDLERS__ function renderContent(retryCount = 0) { - // CRITICAL: Check if this render is stale (a newer render has started) + // Bail if a newer render has started if (myRenderId !== currentRenderId) { console.log('[PyWry AG Grid] Stale render detected, aborting. myId:', myRenderId, 'current:', currentRenderId); return; @@ -763,7 +763,7 @@ def _get_aggrid_widget_esm() -> str: // Wait for AG Grid to be ready before first render (poll every 50ms, max 100 attempts = 5s) function waitAndRender(attempt) { - // CRITICAL: Check if this render is stale (a newer render has started) + // Bail if a newer render has started if (myRenderId !== currentRenderId) { console.log('[PyWry AG Grid] Stale waitAndRender detected, aborting. myId:', myRenderId, 'current:', currentRenderId); return; @@ -847,7 +847,7 @@ def _get_aggrid_widget_esm() -> str: if (!getAgGrid()) {{ console.log('[PyWry AG Grid ESM] AG Grid not found, loading library...'); - // CRITICAL: AG Grid UMD checks for AMD define() first. + // AG Grid UMD checks for AMD define() first. // If define exists, it registers as AMD module instead of setting self.agGrid. // We must temporarily hide define to force the global export path. var _originalDefine = typeof define !== 'undefined' ? define : undefined; @@ -952,7 +952,7 @@ def _get_widget_esm() -> str: modelHeight = toCss(modelHeight); modelWidth = toCss(modelWidth); - // CRITICAL: Set height on el (AnyWidget's container) to constrain output size + // Set height on el to constrain output size if (modelHeight) { el.style.height = modelHeight; // Ensure el is displayed as block/inline-block to respect height @@ -1382,6 +1382,68 @@ def _get_tvchart_widget_esm() -> str: """ +def _get_chat_widget_esm() -> str: + """Build the chat widget ESM with chat-handlers.js and asset injection. + + Returns + ------- + str + JavaScript ESM module containing the base widget render function, + chat-handlers.js, toolbar handlers, and trait-based asset injection + listeners for lazy-loading Plotly/AG Grid/TradingView. + """ + from .assets import get_scrollbar_js, get_toast_notifications_js + + toolbar_handlers_js = _get_toolbar_handlers_js() + toast_js = get_toast_notifications_js() or "" + scrollbar_js = get_scrollbar_js() or "" + + chat_handlers_file = _SRC_DIR / "chat-handlers.js" + chat_handlers_js = ( + chat_handlers_file.read_text(encoding="utf-8") if chat_handlers_file.exists() else "" + ) + + # Start with the base widget ESM (content rendering, theme, events) + base_esm = _WIDGET_ESM.replace("__TOOLBAR_HANDLERS__", toolbar_handlers_js) + + return f""" +{toast_js} + +{scrollbar_js} + +{base_esm} + +// --- Chat handlers --- +{chat_handlers_js} + +// --- Trait-based asset injection for lazy-loaded artifact libraries --- +// When ChatManager pushes JS/CSS via _asset_js/_asset_css traits, +// inject them into the document head so artifact renderers work. +(function() {{ + if (typeof model !== 'undefined') {{ + model.on("change:_asset_js", function() {{ + var js = model.get("_asset_js"); + if (js) {{ + var script = document.createElement("script"); + script.textContent = js; + document.head.appendChild(script); + console.log("[PyWry Chat] Injected asset JS via trait (" + js.length + " chars)"); + }} + }}); + model.on("change:_asset_css", function() {{ + var css = model.get("_asset_css"); + if (css) {{ + var style = document.createElement("style"); + style.textContent = css; + document.head.appendChild(style); + console.log("[PyWry Chat] Injected asset CSS via trait (" + css.length + " chars)"); + }} + }}); + }} +}})(); +""" + + @lru_cache(maxsize=1) def _get_pywry_base_css() -> str: """Load pywry base CSS for widget theming, including toast styles.""" @@ -1906,12 +1968,20 @@ def display(self) -> None: class PyWryChatWidget(PyWryWidget, ChatStateMixin): # pylint: disable=abstract-method,too-many-ancestors """Widget for inline notebook rendering with chat UI. - This class extends :class:`PyWryWidget` with chat-specific state mixins so - notebook renders can emit the same chat protocol events as native windows. + This class extends :class:`PyWryWidget` with chat-specific state + mixins and bundles chat-handlers.js in the ESM. Artifact libraries + (Plotly, AG Grid, TradingView) are lazy-loaded via the + ``_asset_js`` / ``_asset_css`` traits when the first artifact of + that type is yielded by the provider. """ + _esm = _get_chat_widget_esm() + _css = _get_pywry_base_css() + content = traitlets.Unicode("").tag(sync=True) theme = traitlets.Unicode("dark").tag(sync=True) + _asset_js = traitlets.Unicode("").tag(sync=True) + _asset_css = traitlets.Unicode("").tag(sync=True) class PyWryTVChartWidget(PyWryWidget, TVChartStateMixin): # pylint: disable=abstract-method,too-many-ancestors """Widget for inline notebook rendering with TradingView Lightweight Charts.""" diff --git a/pywry/ruff.toml b/pywry/ruff.toml index cb28ec3..57d1b20 100644 --- a/pywry/ruff.toml +++ b/pywry/ruff.toml @@ -91,6 +91,10 @@ dummy-variable-rgx = "^(_+|(_+[a-zA-Z0-9_]*[a-zA-Z0-9]+?))$" "D104", ] +"pywry/chat/providers/callback.py" = [ + "TC003", +] + "pywry/__main__.py" = [ "W293", # Trailing whitespace in JS template strings "S110", # try-except-pass in window cleanup diff --git a/pywry/tests/test_chat.py b/pywry/tests/test_chat.py index 4bb90f3..7d3a3ee 100644 --- a/pywry/tests/test_chat.py +++ b/pywry/tests/test_chat.py @@ -1,11 +1,14 @@ """Unit tests for the chat component. Tests cover: -- Chat Pydantic models (ChatMessage, ChatThread, ChatConfig, etc.) +- ACP content block models (TextPart, ImagePart, AudioPart, etc.) +- ACPToolCall model +- ChatMessage, ChatThread, ChatConfig - GenerationHandle (cancel, append_chunk, partial_content, is_expired) - ChatStateMixin: all chat state management methods - ChatStore ABC + MemoryChatStore implementation - Chat builder functions +- ACPCommand model """ # pylint: disable=missing-function-docstring,redefined-outer-name,unused-argument @@ -22,18 +25,20 @@ from pywry.chat import ( GENERATION_HANDLE_TTL, MAX_CONTENT_LENGTH, + ACPCommand, + ACPToolCall, + AudioPart, ChatConfig, ChatMessage, ChatThread, ChatWidgetConfig, + EmbeddedResource, + EmbeddedResourcePart, GenerationHandle, ImagePart, ResourceLinkPart, - SlashCommand, TextPart, - ToolCall, - ToolCallFunction, - _default_slash_commands, + build_chat_html, ) from pywry.state_mixins import ChatStateMixin, EmittingWidget @@ -75,7 +80,7 @@ def test_basic_creation(self) -> None: msg = ChatMessage(role="user", content="Hello") assert msg.role == "user" assert msg.text_content() == "Hello" - assert msg.message_id # auto-generated + assert msg.message_id assert msg.stopped is False def test_string_content(self) -> None: @@ -97,13 +102,12 @@ def test_list_content_mixed_parts(self) -> None: role="assistant", content=[ TextPart(text="See image: "), - ImagePart(data="base64data", mime_type="image/png"), + ImagePart(data="base64data", mimeType="image/png"), ], ) assert msg.text_content() == "See image: " def test_content_length_validation(self) -> None: - # Should not raise for content within limit msg = ChatMessage(role="user", content="x" * 100) assert len(msg.text_content()) == 100 @@ -118,17 +122,17 @@ def test_tool_calls(self) -> None: role="assistant", content="I'll search for that.", tool_calls=[ - ToolCall( - id="call_1", - function=ToolCallFunction( - name="search", - arguments='{"query": "test"}', - ), + ACPToolCall( + toolCallId="call_1", + name="search", + kind="fetch", + arguments={"query": "test"}, ), ], ) assert len(msg.tool_calls) == 1 - assert msg.tool_calls[0].function.name == "search" + assert msg.tool_calls[0].name == "search" + assert msg.tool_calls[0].kind == "fetch" def test_stopped_field(self) -> None: msg = ChatMessage(role="assistant", content="Partial", stopped=True) @@ -158,16 +162,52 @@ def test_with_messages(self) -> None: assert len(thread.messages) == 1 -class TestSlashCommand: - """Test SlashCommand model.""" +class TestACPCommand: + """Test ACPCommand model.""" - def test_auto_prefix(self) -> None: - cmd = SlashCommand(name="clear", description="Clear chat") - assert cmd.name == "/clear" + def test_creation(self) -> None: + cmd = ACPCommand(name="web", description="Search the web") + assert cmd.name == "web" + assert cmd.description == "Search the web" + + def test_with_input(self) -> None: + from pywry.chat.models import ACPCommandInput + + cmd = ACPCommand( + name="test", + description="Run tests", + input=ACPCommandInput(hint="Enter test name"), + ) + assert cmd.input.hint == "Enter test name" + + +class TestACPToolCall: + """Test ACPToolCall model.""" + + def test_creation(self) -> None: + tc = ACPToolCall( + toolCallId="call_1", + title="Read file", + name="fs_read", + kind="read", + status="pending", + ) + assert tc.tool_call_id == "call_1" + assert tc.kind == "read" + assert tc.status == "pending" - def test_already_prefixed(self) -> None: - cmd = SlashCommand(name="/help", description="Help") - assert cmd.name == "/help" + def test_defaults(self) -> None: + tc = ACPToolCall(name="test") + assert tc.tool_call_id # auto-generated + assert tc.kind == "other" + assert tc.status == "pending" + + def test_with_arguments(self) -> None: + tc = ACPToolCall( + name="search", + arguments={"query": "hello"}, + ) + assert tc.arguments["query"] == "hello" class TestChatConfig: @@ -208,17 +248,56 @@ def test_with_chat_config(self) -> None: assert config.chat_config.model == "gpt-4o" -class TestDefaultSlashCommands: - """Test _default_slash_commands.""" +# ============================================================================= +# Content Part Tests +# ============================================================================= - def test_returns_commands(self) -> None: - cmds = _default_slash_commands() - assert len(cmds) == 4 - names = [c.name for c in cmds] - assert "/clear" in names - assert "/export" in names - assert "/model" in names - assert "/system" in names + +class TestContentParts: + """Test ACP ContentBlock types.""" + + def test_text_part(self) -> None: + part = TextPart(text="hello") + assert part.type == "text" + assert part.text == "hello" + + def test_text_part_with_annotations(self) -> None: + part = TextPart(text="hello", annotations={"source": "llm"}) + assert part.annotations["source"] == "llm" + + def test_image_part(self) -> None: + part = ImagePart(data="base64data", mimeType="image/png") + assert part.type == "image" + assert part.data == "base64data" + assert part.mime_type == "image/png" + + def test_audio_part(self) -> None: + part = AudioPart(data="audiodata", mimeType="audio/wav") + assert part.type == "audio" + assert part.mime_type == "audio/wav" + + def test_resource_link_part(self) -> None: + part = ResourceLinkPart( + uri="pywry://resource/1", + name="Doc", + title="My Document", + size=1024, + ) + assert part.type == "resource_link" + assert part.name == "Doc" + assert part.title == "My Document" + assert part.size == 1024 + + def test_embedded_resource_part(self) -> None: + part = EmbeddedResourcePart( + resource=EmbeddedResource( + uri="file:///doc.txt", + mimeType="text/plain", + text="Hello world", + ), + ) + assert part.type == "resource" + assert part.resource.text == "Hello world" # ============================================================================= @@ -275,7 +354,6 @@ def test_is_expired(self) -> None: thread_id="t_1", ) assert not handle.is_expired - # Manually set created_at to past handle.created_at = time.time() - GENERATION_HANDLE_TTL - 1 assert handle.is_expired @@ -295,7 +373,6 @@ def test_send_chat_message(self) -> None: assert evt_type == "chat:assistant-message" assert data["messageId"] == "msg_1" assert data["text"] == "Hello!" - assert data["threadId"] == "t_1" def test_stream_chat_chunk(self) -> None: w = MockChatWidget() @@ -305,12 +382,6 @@ def test_stream_chat_chunk(self) -> None: assert data["chunk"] == "tok" assert data["done"] is False - def test_stream_chat_chunk_done(self) -> None: - w = MockChatWidget() - w.stream_chat_chunk("", "msg_1", done=True) - _evt_type, data = w.get_last_event() - assert data["done"] is True - def test_set_chat_typing(self) -> None: w = MockChatWidget() w.set_chat_typing(True) @@ -325,14 +396,6 @@ def test_switch_chat_thread(self) -> None: assert evt_type == "chat:switch-thread" assert data["threadId"] == "t_2" - def test_update_chat_thread_list(self) -> None: - w = MockChatWidget() - threads = [{"thread_id": "t1", "title": "Chat 1"}] - w.update_chat_thread_list(threads) - evt_type, data = w.get_last_event() - assert evt_type == "chat:update-thread-list" - assert data["threads"] == threads - def test_clear_chat(self) -> None: w = MockChatWidget() w.clear_chat() @@ -345,15 +408,6 @@ def test_register_chat_command(self) -> None: evt_type, data = w.get_last_event() assert evt_type == "chat:register-command" assert data["name"] == "/help" - assert data["description"] == "Show help" - - def test_update_chat_settings(self) -> None: - w = MockChatWidget() - w.update_chat_settings({"model": "gpt-4o", "temperature": 0.5}) - evt_type, data = w.get_last_event() - assert evt_type == "chat:update-settings" - assert data["model"] == "gpt-4o" - assert data["temperature"] == 0.5 def test_request_chat_state(self) -> None: w = MockChatWidget() @@ -383,7 +437,6 @@ async def test_save_and_get_thread(self, store) -> None: result = await store.get_thread("w1", "t1") assert result is not None assert result.thread_id == "t1" - assert result.title == "Test" @pytest.mark.asyncio async def test_list_threads(self, store) -> None: @@ -414,7 +467,6 @@ async def test_get_messages_pagination(self, store) -> None: for i in range(5): msg = ChatMessage(role="user", content=f"msg{i}", message_id=f"m{i}") await store.append_message("w1", "t1", msg) - # Get last 3 messages = await store.get_messages("w1", "t1", limit=3) assert len(messages) == 3 @@ -461,20 +513,6 @@ def test_build_chat_config_defaults(self) -> None: assert config.model == "gpt-4" assert config.streaming is True - def test_build_chat_config_with_commands(self) -> None: - from pywry.mcp.builders import build_chat_config - - config = build_chat_config( - { - "slash_commands": [ - {"name": "help", "description": "Show help"}, - {"name": "/test"}, - ], - } - ) - assert len(config.slash_commands) == 2 - assert config.slash_commands[0].name == "/help" - def test_build_chat_widget_config(self) -> None: from pywry.mcp.builders import build_chat_widget_config @@ -487,7 +525,6 @@ def test_build_chat_widget_config(self) -> None: } ) assert config.title == "My Chat" - assert config.height == 700 assert config.chat_config.model == "gpt-4o" assert config.show_sidebar is False @@ -501,269 +538,228 @@ class TestBuildChatHtml: """Test build_chat_html helper.""" def test_default_includes_sidebar(self) -> None: - from pywry.chat import build_chat_html - html = build_chat_html() assert "pywry-chat-sidebar" in html assert "pywry-chat-messages" in html assert "pywry-chat-input" in html - assert "pywry-chat-settings-toggle" in html def test_no_sidebar(self) -> None: - from pywry.chat import build_chat_html - html = build_chat_html(show_sidebar=False) assert "pywry-chat-sidebar" not in html - assert "pywry-chat-messages" in html def test_no_settings(self) -> None: - from pywry.chat import build_chat_html - html = build_chat_html(show_settings=False) assert "pywry-chat-settings-toggle" not in html def test_container_id(self) -> None: - from pywry.chat import build_chat_html - html = build_chat_html(container_id="my-chat") assert 'id="my-chat"' in html def test_file_attach_disabled_by_default(self) -> None: - from pywry.chat import build_chat_html - html = build_chat_html() assert "pywry-chat-attach-btn" not in html - assert "pywry-chat-drop-overlay" not in html def test_file_attach_enabled(self) -> None: - from pywry.chat import build_chat_html - html = build_chat_html(enable_file_attach=True, file_accept_types=[".csv"]) assert "pywry-chat-attach-btn" in html assert "pywry-chat-drop-overlay" in html - def test_file_attach_requires_accept_in_html(self) -> None: - """When file_accept_types is provided, data-accept-types attribute is set.""" - from pywry.chat import build_chat_html - html = build_chat_html( - enable_file_attach=True, - file_accept_types=[".csv", ".json"], - ) - assert 'data-accept-types=".csv,.json"' in html +# ============================================================================= +# Provider Tests +# ============================================================================= - def test_file_attach_custom_accept(self) -> None: - from pywry.chat import build_chat_html - html = build_chat_html( - enable_file_attach=True, - file_accept_types=[".csv", ".xlsx"], - ) - assert 'data-accept-types=".csv,.xlsx"' in html +class TestProviderFactory: + """Test provider factory function.""" - def test_context_without_file_attach(self) -> None: - from pywry.chat import build_chat_html + def test_callback_provider(self) -> None: + from pywry.chat import get_provider - html = build_chat_html(enable_context=True, enable_file_attach=False) - # @ mention popup should be present - assert "pywry-chat-mention-popup" in html - # File attach should NOT be present - assert "pywry-chat-attach-btn" not in html - assert "pywry-chat-drop-overlay" not in html + provider = get_provider("callback") + assert provider is not None - def test_file_attach_without_context(self) -> None: - from pywry.chat import build_chat_html + def test_unknown_provider_raises(self) -> None: + from pywry.chat import get_provider - html = build_chat_html( - enable_file_attach=True, - file_accept_types=[".csv"], - enable_context=False, - ) - # File attach should be present - assert "pywry-chat-attach-btn" in html - assert "pywry-chat-drop-overlay" in html - # @ mention popup should NOT be present - assert "pywry-chat-mention-popup" not in html + with pytest.raises(ValueError, match="Unknown provider"): + get_provider("nonexistent") + + +# ============================================================================= +# Session Primitives Tests +# ============================================================================= + + +class TestSessionPrimitives: + """Test ACP session models.""" - def test_both_context_and_file_attach(self) -> None: - from pywry.chat import build_chat_html + def test_session_mode(self) -> None: + from pywry.chat.session import SessionMode - html = build_chat_html( - enable_context=True, - enable_file_attach=True, - file_accept_types=[".csv"], + mode = SessionMode(id="code", name="Code Mode", description="Write code") + assert mode.id == "code" + assert mode.name == "Code Mode" + + def test_session_config_option(self) -> None: + from pywry.chat.session import ConfigOptionChoice, SessionConfigOption + + opt = SessionConfigOption( + id="model", + name="Model", + category="model", + currentValue="gpt-4", + options=[ + ConfigOptionChoice(value="gpt-4", name="GPT-4"), + ConfigOptionChoice(value="gpt-4o", name="GPT-4o"), + ], ) - assert "pywry-chat-mention-popup" in html - assert "pywry-chat-attach-btn" in html - assert "pywry-chat-drop-overlay" in html + assert opt.current_value == "gpt-4" + assert len(opt.options) == 2 + + def test_plan_entry(self) -> None: + from pywry.chat.session import PlanEntry + + entry = PlanEntry(content="Fix the bug", priority="high", status="in_progress") + assert entry.priority == "high" + assert entry.status == "in_progress" + + def test_permission_request(self) -> None: + from pywry.chat.session import PermissionRequest + + req = PermissionRequest(toolCallId="call_1", title="Execute shell command") + assert req.tool_call_id == "call_1" + assert len(req.options) == 4 # default options + + def test_capabilities(self) -> None: + from pywry.chat.session import AgentCapabilities, ClientCapabilities + + client = ClientCapabilities(fileSystem=True, terminal=False) + assert client.file_system is True + + agent = AgentCapabilities(loadSession=True, configOptions=True) + assert agent.load_session is True # ============================================================================= -# Content Part Tests +# Update Types Tests # ============================================================================= -class TestContentParts: - """Test ChatContentPart types.""" +class TestUpdateTypes: + """Test SessionUpdate models.""" - def test_text_part(self) -> None: - part = TextPart(text="hello") - assert part.type == "text" - assert part.text == "hello" + def test_agent_message_update(self) -> None: + from pywry.chat.updates import AgentMessageUpdate - def test_image_part(self) -> None: - part = ImagePart(data="base64data", mime_type="image/png") - assert part.type == "image" - assert part.data == "base64data" - assert part.mime_type == "image/png" + u = AgentMessageUpdate(text="Hello") + assert u.session_update == "agent_message" + assert u.text == "Hello" - def test_resource_link_part(self) -> None: - part = ResourceLinkPart(uri="pywry://resource/1", name="Doc") - assert part.type == "resource_link" - assert part.name == "Doc" + def test_tool_call_update(self) -> None: + from pywry.chat.updates import ToolCallUpdate + + u = ToolCallUpdate( + toolCallId="call_1", + name="search", + kind="fetch", + status="in_progress", + ) + assert u.session_update == "tool_call" + assert u.status == "in_progress" + + def test_plan_update(self) -> None: + from pywry.chat.session import PlanEntry + from pywry.chat.updates import PlanUpdate + + u = PlanUpdate( + entries=[ + PlanEntry(content="Step 1", priority="high", status="completed"), + PlanEntry(content="Step 2", priority="medium", status="pending"), + ] + ) + assert u.session_update == "plan" + assert len(u.entries) == 2 + + def test_status_update(self) -> None: + from pywry.chat.updates import StatusUpdate + + u = StatusUpdate(text="Searching...") + assert u.session_update == "x_status" + + def test_thinking_update(self) -> None: + from pywry.chat.updates import ThinkingUpdate + + u = ThinkingUpdate(text="Let me think about this...") + assert u.session_update == "x_thinking" # ============================================================================= -# Provider Tests (import only, no API calls) +# Artifact Tests # ============================================================================= -class TestProviderFactory: - """Test provider factory function.""" +class TestArtifacts: + """Test artifact models.""" - def test_callback_provider(self) -> None: - from pywry.chat_providers import get_provider + def test_code_artifact(self) -> None: + from pywry.chat.artifacts import CodeArtifact - provider = get_provider("callback") - assert provider is not None - - def test_unknown_provider_raises(self) -> None: - from pywry.chat_providers import get_provider + a = CodeArtifact(title="example.py", content="x = 42", language="python") + assert a.artifact_type == "code" - with pytest.raises(ValueError, match="Unknown provider"): - get_provider("nonexistent") + def test_tradingview_artifact(self) -> None: + from pywry.chat.artifacts import TradingViewArtifact, TradingViewSeries - def test_callback_provider_with_fns(self) -> None: - from pywry.chat_providers import CallbackProvider - - def my_gen(messages, config): - return "Hello!" - - provider = CallbackProvider(generate_fn=my_gen) - assert provider._generate_fn is my_gen - - -class TestMagenticProvider: - """Test MagenticProvider (mocked — no real magentic dependency required).""" - - def test_import_error_without_magentic(self) -> None: - """MagenticProvider raises ImportError when magentic is not installed.""" - import sys - - # Temporarily make magentic unimportable - sentinel = sys.modules.get("magentic") - sentinel_cm = sys.modules.get("magentic.chat_model") - sentinel_cmb = sys.modules.get("magentic.chat_model.base") - sys.modules["magentic"] = None # type: ignore[assignment] - sys.modules["magentic.chat_model"] = None # type: ignore[assignment] - sys.modules["magentic.chat_model.base"] = None # type: ignore[assignment] - try: - # Re-import to pick up the blocked module - from pywry.chat_providers import MagenticProvider - - with pytest.raises(ImportError, match="magentic"): - MagenticProvider(model="gpt-4o") - finally: - if sentinel is None: - sys.modules.pop("magentic", None) - else: - sys.modules["magentic"] = sentinel - if sentinel_cm is None: - sys.modules.pop("magentic.chat_model", None) - else: - sys.modules["magentic.chat_model"] = sentinel_cm - if sentinel_cmb is None: - sys.modules.pop("magentic.chat_model.base", None) - else: - sys.modules["magentic.chat_model.base"] = sentinel_cmb - - def test_registered_in_providers(self) -> None: - """MagenticProvider is accessible via get_provider('magentic').""" - from pywry.chat_providers import _PROVIDERS, MagenticProvider - - assert "magentic" in _PROVIDERS - assert _PROVIDERS["magentic"] is MagenticProvider - - def test_type_error_on_bad_model(self) -> None: - """MagenticProvider rejects non-ChatModel, non-string model args.""" - pytest.importorskip("magentic") - from pywry.chat_providers import MagenticProvider - - with pytest.raises(TypeError, match="Expected a magentic ChatModel"): - MagenticProvider(model=12345) - - def test_string_model_creates_openai_chat_model(self, monkeypatch) -> None: - """Passing a model name string auto-wraps in OpenaiChatModel.""" - magentic = pytest.importorskip("magentic") - from pywry.chat_providers import MagenticProvider - - monkeypatch.setenv("OPENAI_API_KEY", "sk-test-fake-key") - provider = MagenticProvider(model="gpt-4o-mini") - assert isinstance(provider._model, magentic.OpenaiChatModel) - - def test_accepts_chat_model_instance(self, monkeypatch) -> None: - """Passing a ChatModel instance is stored directly.""" - magentic = pytest.importorskip("magentic") - from pywry.chat_providers import MagenticProvider - - monkeypatch.setenv("OPENAI_API_KEY", "sk-test-fake-key") - model = magentic.OpenaiChatModel("gpt-4o") - provider = MagenticProvider(model=model) - assert provider._model is model - - def test_build_messages_with_system_prompt(self, monkeypatch) -> None: - """_build_messages prepends system prompt and maps roles.""" - magentic = pytest.importorskip("magentic") - from pywry.chat import ChatConfig, ChatMessage - from pywry.chat_providers import MagenticProvider - - monkeypatch.setenv("OPENAI_API_KEY", "sk-test-fake-key") - provider = MagenticProvider(model="gpt-4o") - messages = [ - ChatMessage(role="user", content="Hello"), - ChatMessage(role="assistant", content="Hi there"), - ] - config = ChatConfig(system_prompt="You are helpful.") - result = provider._build_messages(messages, config) - - assert len(result) == 3 - assert isinstance(result[0], magentic.SystemMessage) - assert isinstance(result[1], magentic.UserMessage) - assert isinstance(result[2], magentic.AssistantMessage) - - def test_build_messages_no_system_prompt(self, monkeypatch) -> None: - """_build_messages omits system message when not configured.""" - magentic = pytest.importorskip("magentic") - from pywry.chat import ChatConfig, ChatMessage - from pywry.chat_providers import MagenticProvider - - monkeypatch.setenv("OPENAI_API_KEY", "sk-test-fake-key") - provider = MagenticProvider(model="gpt-4o") - messages = [ChatMessage(role="user", content="test")] - config = ChatConfig(system_prompt=None) - result = provider._build_messages(messages, config) - - assert len(result) == 1 - assert isinstance(result[0], magentic.UserMessage) - - def test_string_model_with_kwargs(self, monkeypatch) -> None: - """String model with extra kwargs are forwarded to OpenaiChatModel.""" - magentic = pytest.importorskip("magentic") - from pywry.chat_providers import MagenticProvider - - monkeypatch.setenv("OPENAI_API_KEY", "sk-test-fake-key") - provider = MagenticProvider( - model="gpt-4o", - base_url="http://localhost:11434/v1/", + a = TradingViewArtifact( + title="AAPL", + series=[ + TradingViewSeries( + type="candlestick", + data=[ + {"time": "2024-01-02", "open": 185, "high": 186, "low": 184, "close": 185} + ], + ), + TradingViewSeries( + type="line", + data=[{"time": "2024-01-02", "value": 185}], + options={"color": "#f9e2af"}, + ), + ], + height="500px", ) - assert isinstance(provider._model, magentic.OpenaiChatModel) + assert a.artifact_type == "tradingview" + assert len(a.series) == 2 + assert a.series[0].type == "candlestick" + assert a.series[1].type == "line" + + def test_image_artifact_blocks_javascript_url(self) -> None: + from pydantic import ValidationError + + from pywry.chat.artifacts import ImageArtifact + + with pytest.raises(ValidationError): + ImageArtifact(url="javascript:alert(1)") + + +# ============================================================================= +# Permissions Tests +# ============================================================================= + + +class TestPermissions: + """Test RBAC permission mappings.""" + + def test_permission_map(self) -> None: + from pywry.chat.permissions import ACP_PERMISSION_MAP + + assert ACP_PERMISSION_MAP["session/prompt"] == "write" + assert ACP_PERMISSION_MAP["fs/write_text_file"] == "admin" + assert ACP_PERMISSION_MAP["fs/read_text_file"] == "read" + + @pytest.mark.asyncio + async def test_check_permission_no_session(self) -> None: + from pywry.chat.permissions import check_acp_permission + + result = await check_acp_permission(None, "w1", "session/prompt", None) + assert result is True # No auth = allow all diff --git a/pywry/tests/test_chat_e2e.py b/pywry/tests/test_chat_e2e.py index d43538a..11df924 100644 --- a/pywry/tests/test_chat_e2e.py +++ b/pywry/tests/test_chat_e2e.py @@ -40,7 +40,7 @@ import pytest from pywry.chat import MAX_CONTENT_LENGTH, ChatMessage, ChatThread -from pywry.chat_manager import ChatManager +from pywry.chat.manager import ChatManager from pywry.state.memory import MemoryChatStore diff --git a/pywry/tests/test_chat_manager.py b/pywry/tests/test_chat_manager.py index 634745b..9ee2d87 100644 --- a/pywry/tests/test_chat_manager.py +++ b/pywry/tests/test_chat_manager.py @@ -3,15 +3,15 @@ Tests cover: - ChatManager construction and defaults -- Protocol response models (StatusResponse, ToolCallResponse, etc.) +- ACP update types (AgentMessageUpdate, ToolCallUpdate, etc.) - ChatContext dataclass -- SettingsItem and SlashCommandDef models +- SettingsItem model - callbacks() returns correct keys - toolbar() returns a Toolbar instance - send_message() emits and stores messages - _on_user_message dispatches handler in background thread - _handle_complete sends complete message -- _handle_stream streams str chunks and rich response types +- _handle_stream streams str chunks and SessionUpdate types - _on_stop_generation cancels active generation - Thread CRUD: create, switch, delete, rename - _on_request_state emits full initialization state @@ -24,7 +24,6 @@ from __future__ import annotations -import threading import time from typing import Any @@ -32,30 +31,31 @@ import pytest -from pywry.chat_manager import ( - ArtifactResponse, - Attachment, - ChatContext, - ChatManager, - CitationResponse, +from pywry.chat.artifacts import ( CodeArtifact, HtmlArtifact, ImageArtifact, - InputRequiredResponse, JsonArtifact, MarkdownArtifact, PlotlyArtifact, - SettingsItem, - SlashCommandDef, - StatusResponse, TableArtifact, - TextChunkResponse, - ThinkingResponse, - TodoItem, - TodoUpdateResponse, - ToolCallResponse, - ToolResultResponse, - _ArtifactBase, + TradingViewArtifact, +) +from pywry.chat.manager import ( + Attachment, + ChatContext, + ChatManager, + SettingsItem, +) +from pywry.chat.session import PlanEntry +from pywry.chat.updates import ( + AgentMessageUpdate, + ArtifactUpdate, + CitationUpdate, + PlanUpdate, + StatusUpdate, + ThinkingUpdate, + ToolCallUpdate, ) @@ -74,7 +74,6 @@ def emit(self, event_type: str, data: dict[str, Any]) -> None: self.events.append((event_type, data)) def emit_fire(self, event_type: str, data: dict[str, Any]) -> None: - """Fire-and-forget emit — same as emit for testing.""" self.events.append((event_type, data)) def get_events(self, event_type: str) -> list[dict]: @@ -102,15 +101,20 @@ def stream_handler(messages, ctx): def rich_handler(messages, ctx): - """Generator handler that yields rich protocol types.""" - yield ThinkingResponse(text="Analyzing the request...") - yield ThinkingResponse(text="Considering options.") - yield StatusResponse(text="Searching...") - yield ToolCallResponse(name="search", arguments={"q": "test"}) - yield ToolResultResponse(tool_id="call_abc", result="42") - yield CitationResponse(url="https://example.com", title="Example") - yield ArtifactResponse(title="code.py", content="print('hi')", language="python") - yield TextChunkResponse(text="Done!") + """Generator handler that yields ACP update types.""" + yield ThinkingUpdate(text="Analyzing the request...") + yield StatusUpdate(text="Searching...") + yield ToolCallUpdate( + toolCallId="call_1", + name="search", + kind="fetch", + status="completed", + ) + yield CitationUpdate(url="https://example.com", title="Example") + yield ArtifactUpdate( + artifact=CodeArtifact(title="code.py", content="x = 42", language="python") + ) + yield AgentMessageUpdate(text="Done!") @pytest.fixture @@ -143,61 +147,100 @@ def bound_manager(widget): # ============================================================================= -# Protocol Model Tests +# Update Type Tests # ============================================================================= -class TestProtocolModels: - """Test protocol response models.""" +class TestUpdateTypes: + """Test ACP update type models.""" - def test_status_response(self): - r = StatusResponse(text="Searching...") - assert r.type == "status" + def test_status_update(self): + r = StatusUpdate(text="Searching...") + assert r.session_update == "x_status" assert r.text == "Searching..." - def test_tool_call_response(self): - r = ToolCallResponse(name="search", arguments={"q": "test"}) - assert r.type == "tool_call" + def test_agent_message_update(self): + r = AgentMessageUpdate(text="Hello!") + assert r.session_update == "agent_message" + assert r.text == "Hello!" + + def test_tool_call_update(self): + r = ToolCallUpdate( + toolCallId="call_1", + name="search", + kind="fetch", + status="completed", + ) + assert r.session_update == "tool_call" assert r.name == "search" - assert r.arguments == {"q": "test"} - assert r.tool_id.startswith("call_") - - def test_tool_call_custom_id(self): - r = ToolCallResponse(tool_id="my_id", name="search") - assert r.tool_id == "my_id" - - def test_tool_result_response(self): - r = ToolResultResponse(tool_id="call_123", result="42") - assert r.type == "tool_result" - assert r.tool_id == "call_123" - assert r.result == "42" - assert r.is_error is False - - def test_tool_result_error(self): - r = ToolResultResponse(tool_id="call_123", result="fail", is_error=True) - assert r.is_error is True - - def test_citation_response(self): - r = CitationResponse(url="https://x.com", title="X", snippet="stuff") - assert r.type == "citation" - assert r.url == "https://x.com" - assert r.snippet == "stuff" - - def test_artifact_response(self): - r = ArtifactResponse(title="code.py", content="print(1)", language="python") - assert r.type == "artifact" - assert r.artifact_type == "code" - assert r.language == "python" - - def test_text_chunk_response(self): - r = TextChunkResponse(text="hello") - assert r.type == "text" - assert r.text == "hello" - - def test_thinking_response(self): - r = ThinkingResponse(text="analyzing...") - assert r.type == "thinking" - assert r.text == "analyzing..." + assert r.kind == "fetch" + + def test_plan_update(self): + r = PlanUpdate( + entries=[ + PlanEntry(content="Step 1", priority="high", status="completed"), + ] + ) + assert r.session_update == "plan" + assert len(r.entries) == 1 + + def test_thinking_update(self): + r = ThinkingUpdate(text="Let me think...") + assert r.session_update == "x_thinking" + + def test_citation_update(self): + r = CitationUpdate(url="https://example.com", title="Example") + assert r.session_update == "x_citation" + assert r.url == "https://example.com" + + +# ============================================================================= +# Artifact Tests +# ============================================================================= + + +class TestArtifactModels: + """Test artifact model creation.""" + + def test_code_artifact(self): + a = CodeArtifact(title="test.py", content="x = 1", language="python") + assert a.artifact_type == "code" + assert a.language == "python" + + def test_markdown_artifact(self): + a = MarkdownArtifact(title="README", content="# Hello") + assert a.artifact_type == "markdown" + + def test_html_artifact(self): + a = HtmlArtifact(title="page", content="

Hi

") + assert a.artifact_type == "html" + + def test_table_artifact(self): + a = TableArtifact(title="data", data=[{"a": 1}]) + assert a.artifact_type == "table" + assert a.height == "400px" + + def test_plotly_artifact(self): + a = PlotlyArtifact(title="chart", figure={"data": []}) + assert a.artifact_type == "plotly" + + def test_image_artifact(self): + a = ImageArtifact(title="photo", url="data:image/png;base64,abc") + assert a.artifact_type == "image" + + def test_json_artifact(self): + a = JsonArtifact(title="config", data={"key": "value"}) + assert a.artifact_type == "json" + + def test_tradingview_artifact(self): + from pywry.chat.artifacts import TradingViewSeries + + a = TradingViewArtifact( + title="AAPL", + series=[TradingViewSeries(type="candlestick", data=[])], + ) + assert a.artifact_type == "tradingview" + assert len(a.series) == 1 # ============================================================================= @@ -211,27 +254,64 @@ class TestChatContext: def test_defaults(self): ctx = ChatContext() assert ctx.thread_id == "" - assert ctx.message_id == "" - assert ctx.settings == {} - assert isinstance(ctx.cancel_event, threading.Event) - assert ctx.system_prompt == "" assert ctx.model == "" assert ctx.temperature == 0.7 + assert ctx.attachments == [] + assert not ctx.cancel_event.is_set() + + def test_attachment_summary_empty(self): + ctx = ChatContext() + assert ctx.attachment_summary == "" + + def test_attachment_summary_file(self): + import pathlib + + ctx = ChatContext( + attachments=[ + Attachment(type="file", name="report.csv", path=pathlib.Path("/data/report.csv")), + ] + ) + assert "report.csv" in ctx.attachment_summary + assert "report.csv" in ctx.attachment_summary + assert str(pathlib.Path("/data/report.csv")) in ctx.attachment_summary + + def test_attachment_summary_widget(self): + ctx = ChatContext( + attachments=[ + Attachment(type="widget", name="@Sales Data", content="data here"), + ] + ) + assert "@Sales Data" in ctx.attachment_summary + + def test_context_text(self): + ctx = ChatContext( + attachments=[ + Attachment(type="widget", name="@Grid", content="col1,col2\n1,2"), + ] + ) + text = ctx.context_text + assert "Grid" in text + assert "col1,col2" in text - def test_custom_values(self): - cancel = threading.Event() + def test_get_attachment_found(self): ctx = ChatContext( - thread_id="t1", - message_id="m1", - settings={"model": "gpt-4"}, - cancel_event=cancel, - system_prompt="You are helpful", - model="gpt-4", - temperature=0.5, + attachments=[ + Attachment(type="widget", name="@Sales", content="revenue=100"), + ] ) - assert ctx.thread_id == "t1" - assert ctx.settings["model"] == "gpt-4" - assert ctx.cancel_event is cancel + assert ctx.get_attachment("Sales") == "revenue=100" + assert ctx.get_attachment("@Sales") == "revenue=100" + + def test_get_attachment_not_found(self): + ctx = ChatContext(attachments=[]) + result = ctx.get_attachment("Missing") + assert "not found" in result + + def test_wait_for_input_cancel(self): + ctx = ChatContext() + ctx.cancel_event.set() + result = ctx.wait_for_input(timeout=0.1) + assert result == "" # ============================================================================= @@ -243,127 +323,40 @@ class TestSettingsItem: """Test SettingsItem model.""" def test_action(self): - s = SettingsItem(id="clear", label="Clear", type="action") + s = SettingsItem(id="clear", label="Clear History", type="action") assert s.type == "action" - assert s.value is None def test_toggle(self): - s = SettingsItem(id="stream", label="Stream", type="toggle", value=True) + s = SettingsItem(id="stream", label="Streaming", type="toggle", value=True) assert s.value is True def test_select(self): - s = SettingsItem( - id="model", - label="Model", - type="select", - value="gpt-4", - options=["gpt-4", "gpt-3.5"], - ) - assert s.options == ["gpt-4", "gpt-3.5"] + s = SettingsItem(id="model", label="Model", type="select", options=["gpt-4", "gpt-4o"]) + assert len(s.options) == 2 def test_range(self): - s = SettingsItem( - id="temp", - label="Temperature", - type="range", - value=0.7, - min=0, - max=2, - step=0.1, - ) - assert s.min == 0 - assert s.max == 2 - assert s.step == 0.1 - - def test_separator(self): - s = SettingsItem(id="sep", type="separator") - assert s.type == "separator" - assert s.label == "" - - -# ============================================================================= -# SlashCommandDef Tests -# ============================================================================= - - -class TestSlashCommandDef: - """Test SlashCommandDef model.""" - - def test_with_slash(self): - cmd = SlashCommandDef(name="/joke", description="Tell a joke") - assert cmd.name == "/joke" - - def test_without_slash(self): - cmd = SlashCommandDef(name="joke", description="Tell a joke") - assert cmd.name == "/joke" - - def test_empty_description(self): - cmd = SlashCommandDef(name="/help") - assert cmd.description == "" + s = SettingsItem(id="temp", label="Temperature", type="range", min=0.0, max=2.0, step=0.1) + assert s.min == 0.0 + assert s.max == 2.0 # ============================================================================= -# ChatManager Construction Tests +# ChatManager Tests # ============================================================================= -class TestChatManagerInit: - """Test ChatManager initialization.""" - - def test_defaults(self): - mgr = ChatManager(handler=echo_handler) - assert mgr._system_prompt == "" - assert mgr._model == "" - assert mgr._temperature == 0.7 - assert mgr._welcome_message == "" - assert mgr._settings_items == [] - assert mgr._slash_commands == [] - assert mgr._show_sidebar is True - assert mgr._show_settings is True - assert mgr._toolbar_width == "380px" - assert mgr._collapsible is True - assert mgr._resizable is True - assert len(mgr._threads) == 1 - assert mgr._active_thread != "" - - def test_custom_settings(self): - items = [ - SettingsItem(id="model", label="Model", type="select", value="gpt-4"), - ] - mgr = ChatManager(handler=echo_handler, settings=items) - assert len(mgr._settings_items) == 1 - assert mgr._settings_values == {"model": "gpt-4"} - - def test_custom_slash_commands(self): - cmds = [SlashCommandDef(name="/joke", description="Joke")] - mgr = ChatManager(handler=echo_handler, slash_commands=cmds) - assert len(mgr._slash_commands) == 1 - - def test_active_thread_property(self): - mgr = ChatManager(handler=echo_handler) - assert mgr.active_thread_id == mgr._active_thread - - def test_settings_property(self): - items = [SettingsItem(id="k", label="K", type="toggle", value=True)] - mgr = ChatManager(handler=echo_handler, settings=items) - assert mgr.settings == {"k": True} +class TestChatManager: + """Test ChatManager construction and public API.""" - def test_threads_property(self): + def test_construction(self): mgr = ChatManager(handler=echo_handler) - threads = mgr.threads - assert len(threads) == 1 - assert all(isinstance(v, list) for v in threads.values()) - - -# ============================================================================= -# callbacks() and toolbar() Tests -# ============================================================================= - + assert mgr.active_thread_id # has a default thread -class TestCallbacksAndToolbar: - """Test callbacks() and toolbar() public methods.""" + def test_requires_handler_or_provider(self): + with pytest.raises(ValueError, match="Either"): + ChatManager() - def test_callbacks_keys(self, manager): + def test_callbacks_returns_expected_keys(self, manager): cbs = manager.callbacks() expected = { "chat:user-message", @@ -379,3016 +372,146 @@ def test_callbacks_keys(self, manager): "chat:input-response", } assert set(cbs.keys()) == expected - assert all(callable(v) for v in cbs.values()) - - def test_toolbar_returns_toolbar(self, manager): - tb = manager.toolbar() - from pywry.toolbar import Toolbar - - assert isinstance(tb, Toolbar) - - def test_toolbar_position(self, manager): - tb = manager.toolbar(position="left") - assert tb.position == "left" - - -# ============================================================================= -# bind() Tests -# ============================================================================= - - -class TestBind: - """Test bind().""" - - def test_bind_sets_widget(self, manager, widget): - assert manager._widget is None - manager.bind(widget) - assert manager._widget is widget - - -# ============================================================================= -# send_message() Tests -# ============================================================================= + def test_settings_property(self): + mgr = ChatManager( + handler=echo_handler, + settings=[ + SettingsItem(id="model", label="Model", type="select", value="gpt-4"), + ], + ) + assert mgr.settings["model"] == "gpt-4" -class TestSendMessage: - """Test send_message() public helper.""" - - def test_sends_and_stores(self, bound_manager, widget): - thread_id = bound_manager.active_thread_id - bound_manager.send_message("Hello!", thread_id) - + def test_send_message(self, bound_manager, widget): + bound_manager.send_message("Hello from code") events = widget.get_events("chat:assistant-message") assert len(events) == 1 - assert events[0]["text"] == "Hello!" - assert events[0]["threadId"] == thread_id - - # Message stored in thread history - msgs = bound_manager._threads[thread_id] - assert len(msgs) == 1 - assert msgs[0]["role"] == "assistant" - assert msgs[0]["text"] == "Hello!" + assert events[0]["text"] == "Hello from code" - def test_defaults_to_active_thread(self, bound_manager, widget): - bound_manager.send_message("Hi") - events = widget.get_events("chat:assistant-message") - assert events[0]["threadId"] == bound_manager.active_thread_id - - -# ============================================================================= -# _on_user_message Tests -# ============================================================================= - - -class TestOnUserMessage: - """Test _on_user_message event handler.""" + def test_send_message_stores_in_thread(self, bound_manager): + tid = bound_manager.active_thread_id + bound_manager.send_message("stored") + assert len(bound_manager.threads[tid]) == 1 + assert bound_manager.threads[tid][0]["text"] == "stored" - def test_empty_text_ignored(self, bound_manager, widget): - bound_manager._on_user_message({"text": ""}, "", "") - assert len(widget.events) == 0 - def test_stores_user_message(self, bound_manager): - tid = bound_manager.active_thread_id - bound_manager._on_user_message({"text": "Hi", "threadId": tid}, "", "") - msgs = bound_manager._threads[tid] - assert any(m["role"] == "user" and m["text"] == "Hi" for m in msgs) +class TestChatManagerHandlerDispatch: + """Test handler invocation and stream processing.""" - def test_handler_runs_in_thread(self, widget): - """Verify the handler is called and produces output.""" + def test_echo_handler(self, widget): mgr = ChatManager(handler=echo_handler) mgr.bind(widget) - tid = mgr.active_thread_id - - mgr._on_user_message({"text": "Hello", "threadId": tid}, "", "") - # Wait for background thread to finish - time.sleep(0.5) - - # Should have typing indicator on/off + assistant message - assistant_msgs = widget.get_events("chat:assistant-message") - assert len(assistant_msgs) == 1 - assert "Echo: Hello" in assistant_msgs[0]["text"] - - -# ============================================================================= -# _handle_complete Tests -# ============================================================================= - - -class TestHandleComplete: - """Test _handle_complete sends a full message.""" - - def test_emits_and_stores(self, bound_manager, widget): - tid = bound_manager.active_thread_id - bound_manager._handle_complete("Full response", "msg_001", tid) - + mgr._on_user_message( + {"text": "hello", "threadId": mgr.active_thread_id}, + "chat:user-message", + "", + ) + # Wait for background thread + time.sleep(0.3) events = widget.get_events("chat:assistant-message") - assert len(events) == 1 - assert events[0]["text"] == "Full response" - assert events[0]["messageId"] == "msg_001" - - msgs = bound_manager._threads[tid] - assert len(msgs) == 1 - assert msgs[0]["text"] == "Full response" - - -# ============================================================================= -# _handle_stream Tests -# ============================================================================= - - -class TestHandleStream: - """Test _handle_stream with various response types.""" - - def test_string_chunks(self, bound_manager, widget): - tid = bound_manager.active_thread_id - cancel = threading.Event() - - def gen(): - yield "Hello " - yield "World" - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - chunks = widget.get_events("chat:stream-chunk") - # "Hello ", "World", and final done chunk - assert len(chunks) == 3 - assert chunks[0]["chunk"] == "Hello " - assert chunks[1]["chunk"] == "World" - assert chunks[2]["done"] is True - - # Full text stored - msgs = bound_manager._threads[tid] - assert msgs[0]["text"] == "Hello World" - - def test_text_chunk_response(self, bound_manager, widget): - tid = bound_manager.active_thread_id - cancel = threading.Event() - - def gen(): - yield TextChunkResponse(text="Chunk1") - yield TextChunkResponse(text="Chunk2") - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - chunks = widget.get_events("chat:stream-chunk") - assert chunks[0]["chunk"] == "Chunk1" - assert chunks[1]["chunk"] == "Chunk2" - - def test_status_response(self, bound_manager, widget): - tid = bound_manager.active_thread_id - cancel = threading.Event() - - def gen(): - yield StatusResponse(text="Searching...") - yield "result" - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - statuses = widget.get_events("chat:status-update") - assert len(statuses) == 1 - assert statuses[0]["text"] == "Searching..." - - def test_tool_call_response(self, bound_manager, widget): - tid = bound_manager.active_thread_id - cancel = threading.Event() - - def gen(): - yield ToolCallResponse(tool_id="tc1", name="search", arguments={"q": "test"}) - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - tools = widget.get_events("chat:tool-call") - assert len(tools) == 1 - assert tools[0]["name"] == "search" - assert tools[0]["toolId"] == "tc1" - - def test_tool_result_response(self, bound_manager, widget): - tid = bound_manager.active_thread_id - cancel = threading.Event() - - def gen(): - yield ToolResultResponse(tool_id="tc1", result="42") - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - results = widget.get_events("chat:tool-result") - assert len(results) == 1 - assert results[0]["result"] == "42" - assert results[0]["isError"] is False - - def test_citation_response(self, bound_manager, widget): - tid = bound_manager.active_thread_id - cancel = threading.Event() - - def gen(): - yield CitationResponse(url="https://x.com", title="X", snippet="s") - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - citations = widget.get_events("chat:citation") - assert len(citations) == 1 - assert citations[0]["url"] == "https://x.com" - - def test_artifact_response(self, bound_manager, widget): - tid = bound_manager.active_thread_id - cancel = threading.Event() - - def gen(): - yield ArtifactResponse(title="code.py", content="print(1)", language="python") - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - artifacts = widget.get_events("chat:artifact") - assert len(artifacts) == 1 - assert artifacts[0]["title"] == "code.py" - assert artifacts[0]["language"] == "python" - - def test_cancellation(self, bound_manager, widget): - tid = bound_manager.active_thread_id - cancel = threading.Event() - - def gen(): - yield "partial " - cancel.set() - yield "ignored" - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) + assert any("Echo: hello" in e.get("text", "") for e in events) + def test_stream_handler(self, widget): + mgr = ChatManager(handler=stream_handler) + mgr.bind(widget) + mgr._on_user_message( + {"text": "a b c", "threadId": mgr.active_thread_id}, + "chat:user-message", + "", + ) + time.sleep(0.3) chunks = widget.get_events("chat:stream-chunk") - # First chunk + done-with-stopped + # Should have streaming chunks + done + assert len(chunks) > 0 done_chunks = [c for c in chunks if c.get("done")] - assert any(c.get("stopped") for c in done_chunks) - - def test_thinking_response(self, bound_manager, widget): - tid = bound_manager.active_thread_id - cancel = threading.Event() - - def gen(): - yield ThinkingResponse(text="Step 1...") - yield ThinkingResponse(text="Step 2...") - yield "Answer" - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - thinking_events = widget.get_events("chat:thinking-chunk") - assert len(thinking_events) == 2 - assert thinking_events[0]["text"] == "Step 1..." - assert thinking_events[1]["text"] == "Step 2..." - - # Thinking done is emitted at end of stream - done_events = widget.get_events("chat:thinking-done") - assert len(done_events) == 1 + assert len(done_chunks) >= 1 - # Thinking is NOT in the stored text - msgs = bound_manager._threads[tid] - assert msgs[0]["text"] == "Answer" + def test_stop_generation(self, widget): + def slow_handler(messages, ctx): + for i in range(100): + if ctx.cancel_event.is_set(): + return + yield f"chunk{i} " + time.sleep(0.01) - def test_rich_handler_all_types(self, widget): - """Verify rich_handler emits all protocol types.""" - mgr = ChatManager(handler=rich_handler) + mgr = ChatManager(handler=slow_handler) mgr.bind(widget) - tid = mgr.active_thread_id - cancel = threading.Event() - - mgr._handle_stream(rich_handler([], None), "msg_001", tid, cancel) - - assert len(widget.get_events("chat:thinking-chunk")) == 2 - assert len(widget.get_events("chat:status-update")) == 1 - assert len(widget.get_events("chat:tool-call")) == 1 - assert len(widget.get_events("chat:tool-result")) == 1 - assert len(widget.get_events("chat:citation")) == 1 - assert len(widget.get_events("chat:artifact")) == 1 - assert len(widget.get_events("chat:thinking-done")) == 1 - assert widget.get_events("chat:stream-chunk")[-1]["done"] is True - - -# ============================================================================= -# _on_stop_generation Tests -# ============================================================================= - - -class TestStopGeneration: - """Test _on_stop_generation.""" - - def test_sets_cancel_event(self, bound_manager): - cancel = threading.Event() - tid = bound_manager.active_thread_id - bound_manager._cancel_events[tid] = cancel - assert not cancel.is_set() - - bound_manager._on_stop_generation({"threadId": tid}, "", "") - assert cancel.is_set() - - def test_no_crash_on_missing_thread(self, bound_manager): - # Should not raise - bound_manager._on_stop_generation({"threadId": "nonexistent"}, "", "") - - -# ============================================================================= -# Thread CRUD Tests -# ============================================================================= + mgr._on_user_message( + {"text": "go", "threadId": mgr.active_thread_id}, + "chat:user-message", + "", + ) + time.sleep(0.05) + mgr._on_stop_generation( + {"threadId": mgr.active_thread_id}, + "chat:stop-generation", + "", + ) + time.sleep(0.3) + chunks = widget.get_events("chat:stream-chunk") + stopped = [c for c in chunks if c.get("stopped")] + assert len(stopped) >= 1 -class TestThreadCRUD: - """Test thread create, switch, delete, rename.""" +class TestChatManagerThreads: + """Test thread CRUD operations.""" def test_create_thread(self, bound_manager, widget): - old_count = len(bound_manager._threads) - bound_manager._on_thread_create({}, "", "") - - assert len(bound_manager._threads) == old_count + 1 - # Active thread switched to new one - assert bound_manager.active_thread_id != "" - # Events emitted - assert len(widget.get_events("chat:update-thread-list")) == 1 - assert len(widget.get_events("chat:switch-thread")) == 1 - - def test_create_with_title(self, bound_manager, widget): - bound_manager._on_thread_create({"title": "My Thread"}, "", "") - new_tid = bound_manager.active_thread_id - assert bound_manager._thread_titles[new_tid] == "My Thread" + bound_manager._on_thread_create({"title": "New Thread"}, "", "") + events = widget.get_events("chat:update-thread-list") + assert len(events) >= 1 + assert len(bound_manager.threads) == 2 def test_switch_thread(self, bound_manager, widget): - # Create a second thread - bound_manager._on_thread_create({}, "", "") - second_tid = bound_manager.active_thread_id - first_tid = next(t for t in bound_manager._threads if t != second_tid) - - widget.clear() - bound_manager._on_thread_switch({"threadId": first_tid}, "", "") - - assert bound_manager.active_thread_id == first_tid - assert len(widget.get_events("chat:switch-thread")) == 1 - - def test_switch_nonexistent_thread(self, bound_manager, widget): - old = bound_manager.active_thread_id - bound_manager._on_thread_switch({"threadId": "nonexistent"}, "", "") - assert bound_manager.active_thread_id == old + bound_manager._on_thread_create({"title": "Thread 2"}, "", "") + new_tid = bound_manager.active_thread_id + old_tid = next(t for t in bound_manager.threads if t != new_tid) + bound_manager._on_thread_switch({"threadId": old_tid}, "", "") + assert bound_manager.active_thread_id == old_tid def test_delete_thread(self, bound_manager, widget): - # Create a second thread so deletion doesn't leave empty - bound_manager._on_thread_create({}, "", "") - second_tid = bound_manager.active_thread_id - widget.clear() - - bound_manager._on_thread_delete({"threadId": second_tid}, "", "") - - assert second_tid not in bound_manager._threads - assert len(widget.get_events("chat:update-thread-list")) == 1 - - def test_delete_active_switches(self, bound_manager, widget): - # Create two threads, delete the active one - first_tid = bound_manager.active_thread_id - bound_manager._on_thread_create({}, "", "") - second_tid = bound_manager.active_thread_id - widget.clear() - - bound_manager._on_thread_delete({"threadId": second_tid}, "", "") - assert bound_manager.active_thread_id == first_tid + bound_manager._on_thread_create({"title": "To Delete"}, "", "") + tid = bound_manager.active_thread_id + bound_manager._on_thread_delete({"threadId": tid}, "", "") + assert tid not in bound_manager.threads def test_rename_thread(self, bound_manager, widget): tid = bound_manager.active_thread_id - bound_manager._on_thread_rename({"threadId": tid, "title": "New Name"}, "", "") - assert bound_manager._thread_titles[tid] == "New Name" - assert len(widget.get_events("chat:update-thread-list")) == 1 + bound_manager._on_thread_rename({"threadId": tid, "title": "Renamed"}, "", "") + events = widget.get_events("chat:update-thread-list") + assert len(events) >= 1 -# ============================================================================= -# _on_settings_change_event Tests -# ============================================================================= +class TestChatManagerState: + """Test state management.""" + def test_request_state(self, bound_manager, widget): + bound_manager._on_request_state({}, "", "") + events = widget.get_events("chat:state-response") + assert len(events) == 1 + state = events[0] + assert "threads" in state + assert "activeThreadId" in state -class TestSettingsChange: - """Test settings change handler.""" + def test_request_state_with_welcome(self, widget): + mgr = ChatManager(handler=echo_handler, welcome_message="Welcome!") + mgr.bind(widget) + mgr._on_request_state({}, "", "") + events = widget.get_events("chat:state-response") + assert len(events) == 1 + messages = events[0]["messages"] + assert any("Welcome!" in m.get("content", "") for m in messages) - def test_updates_value(self, bound_manager): - bound_manager._on_settings_change_event({"key": "model", "value": "claude-3"}, "", "") - assert bound_manager._settings_values["model"] == "claude-3" - - def test_clear_history_action(self, bound_manager, widget): - tid = bound_manager.active_thread_id - bound_manager._threads[tid] = [{"role": "user", "text": "hi"}] - - bound_manager._on_settings_change_event({"key": "clear-history"}, "", "") - assert bound_manager._threads[tid] == [] - assert len(widget.get_events("chat:clear")) == 1 - - def test_delegates_to_callback(self): + def test_settings_change(self, bound_manager, widget): callback = MagicMock() - mgr = ChatManager(handler=echo_handler, on_settings_change=callback) - mgr.bind(FakeWidget()) - - mgr._on_settings_change_event({"key": "model", "value": "gpt-4"}, "", "") - callback.assert_called_once_with("model", "gpt-4") - - -# ============================================================================= -# _on_slash_command_event Tests -# ============================================================================= - + bound_manager._on_settings_change = callback + bound_manager._on_settings_change_event({"key": "model", "value": "gpt-4o"}, "", "") + assert bound_manager.settings["model"] == "gpt-4o" + callback.assert_called_once_with("model", "gpt-4o") -class TestSlashCommand: - """Test slash command handler.""" - - def test_builtin_clear(self, bound_manager, widget): + def test_slash_command_clear(self, bound_manager, widget): tid = bound_manager.active_thread_id - bound_manager._threads[tid] = [{"role": "user", "text": "hi"}] - + bound_manager.send_message("test") + assert len(bound_manager.threads[tid]) == 1 bound_manager._on_slash_command_event({"command": "/clear", "threadId": tid}, "", "") - assert bound_manager._threads[tid] == [] - assert len(widget.get_events("chat:clear")) == 1 - - def test_delegates_to_callback(self): - callback = MagicMock() - mgr = ChatManager(handler=echo_handler, on_slash_command=callback) - mgr.bind(FakeWidget()) - tid = mgr.active_thread_id - - mgr._on_slash_command_event({"command": "/joke", "args": "", "threadId": tid}, "", "") - callback.assert_called_once_with("/joke", "", tid) - - -# ============================================================================= -# _on_request_state Tests -# ============================================================================= - - -class TestRequestState: - """Test state initialization response.""" - - def test_emits_state_response(self, bound_manager, widget): - bound_manager._on_request_state({}, "", "") - - states = widget.get_events("chat:state-response") - assert len(states) == 1 - assert "threads" in states[0] - assert "activeThreadId" in states[0] - - def test_registers_slash_commands(self): - cmds = [SlashCommandDef(name="/joke", description="Joke")] - mgr = ChatManager(handler=echo_handler, slash_commands=cmds) - w = FakeWidget() - mgr.bind(w) - - mgr._on_request_state({}, "", "") - - registered = w.get_events("chat:register-command") - names = [r["name"] for r in registered] - assert "/joke" in names - assert "/clear" in names # always registered - - def test_registers_settings(self): - items = [SettingsItem(id="model", label="Model", type="select", value="gpt-4")] - mgr = ChatManager(handler=echo_handler, settings=items) - w = FakeWidget() - mgr.bind(w) - - mgr._on_request_state({}, "", "") - - settings = w.get_events("chat:register-settings-item") - assert len(settings) == 1 - assert settings[0]["id"] == "model" - - def test_sends_welcome_message(self): - mgr = ChatManager(handler=echo_handler, welcome_message="Welcome!") - w = FakeWidget() - mgr.bind(w) - - mgr._on_request_state({}, "", "") - - states = w.get_events("chat:state-response") - assert len(states) == 1 - assert len(states[0]["messages"]) == 1 - assert states[0]["messages"][0]["content"] == "Welcome!" - - def test_no_welcome_if_empty(self, bound_manager, widget): - bound_manager._on_request_state({}, "", "") - - states = widget.get_events("chat:state-response") - assert len(states) == 1 - assert len(states[0]["messages"]) == 0 - - def test_eager_aggrid_injection(self): - """include_aggrid=True marks assets as already sent (page template loads them).""" - mgr = ChatManager(handler=echo_handler, include_aggrid=True) - w = FakeWidget() - mgr.bind(w) - - # Assets are already on the page — _on_request_state must NOT re-inject. - mgr._on_request_state({}, "", "") - - assets = w.get_events("chat:load-assets") - assert len(assets) == 0 - assert mgr._aggrid_assets_sent is True - - def test_eager_plotly_injection(self): - """include_plotly=True marks assets as already sent (page template loads them).""" - mgr = ChatManager(handler=echo_handler, include_plotly=True) - w = FakeWidget() - mgr.bind(w) - - mgr._on_request_state({}, "", "") - - assets = w.get_events("chat:load-assets") - assert len(assets) == 0 - assert mgr._plotly_assets_sent is True - - def test_eager_both_injection(self): - """Both include flags mark both asset sets as sent — no re-injection.""" - mgr = ChatManager(handler=echo_handler, include_aggrid=True, include_plotly=True) - w = FakeWidget() - mgr.bind(w) - - mgr._on_request_state({}, "", "") - - assets = w.get_events("chat:load-assets") - assert len(assets) == 0 - - def test_no_eager_injection_by_default(self, bound_manager, widget): - """Without include flags, no assets are injected on request-state.""" - bound_manager._on_request_state({}, "", "") - - assets = widget.get_events("chat:load-assets") - assert len(assets) == 0 - - def test_custom_aggrid_theme(self): - """aggrid_theme parameter is used when injecting assets.""" - mgr = ChatManager(handler=echo_handler, include_aggrid=True, aggrid_theme="quartz") - assert mgr._aggrid_theme == "quartz" - - -# ============================================================================= -# _build_thread_list Tests -# ============================================================================= - - -class TestBuildThreadList: - """Test _build_thread_list helper.""" - - def test_returns_list_of_dicts(self, manager): - result = manager._build_thread_list() - assert len(result) == 1 - assert "thread_id" in result[0] - assert "title" in result[0] - - def test_uses_custom_titles(self, manager): - tid = manager.active_thread_id - manager._thread_titles[tid] = "Custom Title" - result = manager._build_thread_list() - assert result[0]["title"] == "Custom Title" - - -# ============================================================================= -# Error handling in _run_handler Tests -# ============================================================================= - - -class TestRunHandlerErrors: - """Test error handling in _run_handler.""" - - def test_handler_exception_sends_error_message(self): - def bad_handler(messages, ctx): - raise ValueError("Something broke") - - mgr = ChatManager(handler=bad_handler) - w = FakeWidget() - mgr.bind(w) - tid = mgr.active_thread_id - - mgr._on_user_message({"text": "Hi", "threadId": tid}, "", "") - time.sleep(0.5) - - msgs = w.get_events("chat:assistant-message") - assert len(msgs) == 1 - assert "Something broke" in msgs[0]["text"] - - def test_generator_exception_sends_error(self): - def broken_gen(messages, ctx): - yield "partial" - raise RuntimeError("Stream error") - - mgr = ChatManager(handler=broken_gen) - w = FakeWidget() - mgr.bind(w) - tid = mgr.active_thread_id - - mgr._on_user_message({"text": "Hi", "threadId": tid}, "", "") - time.sleep(0.5) - - msgs = w.get_events("chat:assistant-message") - assert any("Stream error" in m.get("text", "") for m in msgs) - - -# ============================================================================= -# Integration: streaming handler end-to-end -# ============================================================================= - - -class TestStreamingIntegration: - """End-to-end streaming handler test.""" - - def test_stream_handler_produces_chunks(self): - mgr = ChatManager(handler=stream_handler) - w = FakeWidget() - mgr.bind(w) - tid = mgr.active_thread_id - - mgr._on_user_message({"text": "Hello World", "threadId": tid}, "", "") - time.sleep(0.5) - - chunks = w.get_events("chat:stream-chunk") - assert len(chunks) >= 3 # "Hello ", "World", done - done_chunks = [c for c in chunks if c.get("done")] - assert len(done_chunks) == 1 - - # Full text stored - msgs = mgr._threads[tid] - assistant_msgs = [m for m in msgs if m["role"] == "assistant"] - assert len(assistant_msgs) == 1 - assert assistant_msgs[0]["text"] == "Hello World" - - -# ============================================================================= -# TodoItem and TodoUpdateResponse Tests -# ============================================================================= - - -class TestTodoItem: - """Test TodoItem model.""" - - def test_defaults(self): - item = TodoItem(id=1, title="Do something") - assert item.id == 1 - assert item.title == "Do something" - assert item.status == "not-started" - - def test_statuses(self): - for status in ["not-started", "in-progress", "completed"]: - item = TodoItem(id=1, title="test", status=status) - assert item.status == status - - def test_string_id(self): - item = TodoItem(id="task-abc", title="test") - assert item.id == "task-abc" - - -class TestTodoUpdateResponse: - """Test TodoUpdateResponse model.""" - - def test_empty(self): - r = TodoUpdateResponse() - assert r.type == "todo" - assert r.items == [] - - def test_with_items(self): - r = TodoUpdateResponse( - items=[ - TodoItem(id=1, title="A", status="completed"), - TodoItem(id=2, title="B", status="in-progress"), - ] - ) - assert len(r.items) == 2 - assert r.items[0].status == "completed" - - -class TestTodoManagement: - """Test ChatManager todo public API.""" - - def test_update_todos(self, widget): - mgr = ChatManager(handler=echo_handler) - mgr.bind(widget) - - items = [ - TodoItem(id=1, title="Step 1", status="completed"), - TodoItem(id=2, title="Step 2", status="in-progress"), - ] - mgr.update_todos(items) - - events = widget.get_events("chat:todo-update") - assert len(events) == 1 - assert len(events[0]["items"]) == 2 - assert events[0]["items"][0]["title"] == "Step 1" - assert mgr._todo_items == items - - def test_clear_todos(self, widget): - mgr = ChatManager(handler=echo_handler) - mgr.bind(widget) - mgr.update_todos([TodoItem(id=1, title="X")]) - widget.clear() - - mgr.clear_todos() - - events = widget.get_events("chat:todo-update") - assert len(events) == 1 - assert events[0]["items"] == [] - assert mgr._todo_items == [] - - def test_on_todo_clear_callback(self, widget): - mgr = ChatManager(handler=echo_handler) - mgr.bind(widget) - mgr._todo_items = [TodoItem(id=1, title="X")] - - mgr._on_todo_clear({}, "", "") - - assert mgr._todo_items == [] - events = widget.get_events("chat:todo-update") - assert events[0]["items"] == [] - - def test_todo_in_callbacks(self): - mgr = ChatManager(handler=echo_handler) - cbs = mgr.callbacks() - assert "chat:todo-clear" in cbs - - def test_todo_update_response_in_stream(self, widget): - """Verify TodoUpdateResponse is dispatched during streaming.""" - - def todo_handler(messages, ctx): - yield TodoUpdateResponse( - items=[ - TodoItem(id=1, title="Thinking", status="in-progress"), - ] - ) - yield "Hello" - yield TodoUpdateResponse( - items=[ - TodoItem(id=1, title="Thinking", status="completed"), - ] - ) - - mgr = ChatManager(handler=todo_handler) - mgr.bind(widget) - tid = mgr.active_thread_id - cancel = threading.Event() - - mgr._handle_stream(todo_handler([], None), "msg_001", tid, cancel) - - todo_events = widget.get_events("chat:todo-update") - assert len(todo_events) == 2 - assert todo_events[0]["items"][0]["status"] == "in-progress" - assert todo_events[1]["items"][0]["status"] == "completed" - - # Todo is NOT stored in message history - msgs = mgr._threads[tid] - assert msgs[0]["text"] == "Hello" - - def test_todo_items_stored_in_manager(self, widget): - """Verify _todo_items is updated when TodoUpdateResponse is streamed.""" - - def handler(messages, ctx): - yield TodoUpdateResponse( - items=[ - TodoItem(id=1, title="A"), - TodoItem(id=2, title="B"), - ] - ) - - mgr = ChatManager(handler=handler) - mgr.bind(widget) - tid = mgr.active_thread_id - cancel = threading.Event() - - mgr._handle_stream(handler([], None), "msg_001", tid, cancel) - assert len(mgr._todo_items) == 2 - - -# ============================================================================= -# InputRequiredResponse Tests -# ============================================================================= - - -class TestInputRequiredResponse: - """Test InputRequiredResponse model.""" - - def test_defaults(self): - r = InputRequiredResponse() - assert r.type == "input_required" - assert r.prompt == "" - assert r.placeholder == "Type your response..." - assert r.request_id.startswith("input_") - assert r.input_type == "text" - assert r.options is None - - def test_custom_values(self): - r = InputRequiredResponse( - prompt="Which file?", - placeholder="Enter filename...", - request_id="req_custom", - ) - assert r.prompt == "Which file?" - assert r.placeholder == "Enter filename..." - assert r.request_id == "req_custom" - - def test_buttons_type(self): - r = InputRequiredResponse( - prompt="Approve?", - input_type="buttons", - ) - assert r.input_type == "buttons" - assert r.options is None - - def test_buttons_with_custom_options(self): - r = InputRequiredResponse( - prompt="Pick one", - input_type="buttons", - options=["Accept", "Reject", "Skip"], - ) - assert r.input_type == "buttons" - assert r.options == ["Accept", "Reject", "Skip"] - - def test_radio_type(self): - r = InputRequiredResponse( - prompt="Select model:", - input_type="radio", - options=["GPT-4", "Claude", "Gemini"], - ) - assert r.input_type == "radio" - assert r.options == ["GPT-4", "Claude", "Gemini"] - - -class TestWaitForInput: - """Test ChatContext.wait_for_input().""" - - def test_returns_response_text(self): - ctx = ChatContext() - ctx._input_response = "yes" - ctx._input_event.set() - - result = ctx.wait_for_input() - assert result == "yes" - # Event is cleared after reading - assert not ctx._input_event.is_set() - # Response is cleared - assert ctx._input_response == "" - - def test_returns_empty_on_cancel(self): - ctx = ChatContext() - ctx.cancel_event.set() - - result = ctx.wait_for_input() - assert result == "" - - def test_returns_empty_on_timeout(self): - ctx = ChatContext() - result = ctx.wait_for_input(timeout=0.1) - assert result == "" - - def test_blocks_until_set(self): - ctx = ChatContext() - - def _set_later(): - time.sleep(0.1) - ctx._input_response = "answer" - ctx._input_event.set() - - t = threading.Thread(target=_set_later, daemon=True) - t.start() - - result = ctx.wait_for_input() - assert result == "answer" - - -class TestOnInputResponse: - """Test ChatManager._on_input_response callback.""" - - def test_resumes_handler(self, widget): - ctx = ChatContext() - mgr = ChatManager(handler=echo_handler) - mgr.bind(widget) - tid = mgr.active_thread_id - - # Simulate a pending input request - mgr._pending_inputs["req_001"] = { - "ctx": ctx, - "thread_id": tid, - } - - mgr._on_input_response( - {"requestId": "req_001", "text": "yes", "threadId": tid}, - "", - "", - ) - - # Context should have the response - assert ctx._input_response == "yes" - assert ctx._input_event.is_set() - - # Pending input cleared - assert "req_001" not in mgr._pending_inputs - - # User response stored in thread history - msgs = mgr._threads[tid] - assert any(m["role"] == "user" and m["text"] == "yes" for m in msgs) - - def test_unknown_request_id_ignored(self, widget): - mgr = ChatManager(handler=echo_handler) - mgr.bind(widget) - - # Should not raise - mgr._on_input_response({"requestId": "nonexistent", "text": "hello"}, "", "") - - def test_input_response_in_callbacks(self): - mgr = ChatManager(handler=echo_handler) - cbs = mgr.callbacks() - assert "chat:input-response" in cbs - - -class TestInputRequiredInStream: - """Test InputRequiredResponse dispatch in _handle_stream.""" - - def test_finalizes_stream_and_emits_event(self, widget): - """Verify stream is finalized and input-required event emitted.""" - ctx = ChatContext() - - def handler(messages, c): - yield "Before question " - yield InputRequiredResponse( - prompt="Pick one", - placeholder="A or B", - request_id="req_test", - ) - answer = ctx.wait_for_input(timeout=2.0) - yield f"You picked: {answer}" - - mgr = ChatManager(handler=handler) - mgr.bind(widget) - tid = mgr.active_thread_id - cancel = threading.Event() - - # Run in thread so we can simulate user response - t = threading.Thread( - target=mgr._handle_stream, - args=(handler([], ctx), "msg_001", tid, cancel), - kwargs={"ctx": ctx}, - daemon=True, - ) - t.start() - - # Wait for input-required event - for _ in range(50): - if widget.get_events("chat:input-required"): - break - time.sleep(0.05) - - # Simulate user response - ctx._input_response = "user answer" - ctx._input_event.set() - t.join(timeout=3.0) - - # Stream chunk done emitted (finalizing first batch) - done_chunks = [c for c in widget.get_events("chat:stream-chunk") if c.get("done")] - assert len(done_chunks) >= 1 - - # Input-required event emitted - ir_events = widget.get_events("chat:input-required") - assert len(ir_events) == 1 - assert ir_events[0]["requestId"] == "req_test" - assert ir_events[0]["prompt"] == "Pick one" - assert ir_events[0]["placeholder"] == "A or B" - assert ir_events[0]["inputType"] == "text" - assert ir_events[0]["options"] == [] - - # Thinking-done emitted to collapse any open block - assert len(widget.get_events("chat:thinking-done")) >= 1 - - # First batch stored in history - msgs = mgr._threads[tid] - first_msg = [m for m in msgs if m.get("text") == "Before question "] - assert len(first_msg) == 1 - - def test_continuation_uses_new_message_id(self, widget): - """After input, streaming continues with a new message ID.""" - ctx = ChatContext() - - def handler(messages, c): - yield "Part 1" - yield InputRequiredResponse(request_id="req_x") - ctx.wait_for_input(timeout=2.0) - yield "Part 2" - - mgr = ChatManager(handler=handler) - mgr.bind(widget) - tid = mgr.active_thread_id - cancel = threading.Event() - - t = threading.Thread( - target=mgr._handle_stream, - args=(handler([], ctx), "msg_001", tid, cancel), - kwargs={"ctx": ctx}, - daemon=True, - ) - t.start() - - for _ in range(50): - if widget.get_events("chat:input-required"): - break - time.sleep(0.05) - - ctx._input_response = "yes" - ctx._input_event.set() - t.join(timeout=3.0) - - # Collect all stream-chunk messageIds - chunks = widget.get_events("chat:stream-chunk") - message_ids = {c["messageId"] for c in chunks} - # Should have at least 2 different message IDs - assert len(message_ids) >= 2 - - def test_stores_pending_input(self, widget): - """Verify pending input is stored for lookup by _on_input_response.""" - ctx = ChatContext() - - def handler(messages, c): - yield InputRequiredResponse(request_id="req_pending") - # Block forever — test won't reach here - ctx.wait_for_input(timeout=0.05) - - mgr = ChatManager(handler=handler) - mgr.bind(widget) - tid = mgr.active_thread_id - cancel = threading.Event() - - mgr._handle_stream(handler([], ctx), "msg_001", tid, cancel, ctx=ctx) - - # After handler times out, pending_inputs should have been - # populated (and may still be there if not consumed) - # The input-required event was emitted - ir_events = widget.get_events("chat:input-required") - assert len(ir_events) == 1 - assert ir_events[0]["requestId"] == "req_pending" - - def test_buttons_type_in_stream(self, widget): - """Verify buttons input_type and options are emitted.""" - ctx = ChatContext() - - def handler(messages, c): - yield InputRequiredResponse( - prompt="Approve?", - input_type="buttons", - options=["Accept", "Reject"], - request_id="req_btn", - ) - ctx.wait_for_input(timeout=0.1) - - mgr = ChatManager(handler=handler) - mgr.bind(widget) - tid = mgr.active_thread_id - cancel = threading.Event() - - mgr._handle_stream(handler([], ctx), "msg_001", tid, cancel, ctx=ctx) - - ir_events = widget.get_events("chat:input-required") - assert len(ir_events) == 1 - assert ir_events[0]["inputType"] == "buttons" - assert ir_events[0]["options"] == ["Accept", "Reject"] - - def test_radio_type_in_stream(self, widget): - """Verify radio input_type and options are emitted.""" - ctx = ChatContext() - - def handler(messages, c): - yield InputRequiredResponse( - prompt="Select model:", - input_type="radio", - options=["GPT-4", "Claude", "Gemini"], - request_id="req_radio", - ) - ctx.wait_for_input(timeout=0.1) - - mgr = ChatManager(handler=handler) - mgr.bind(widget) - tid = mgr.active_thread_id - cancel = threading.Event() - - mgr._handle_stream(handler([], ctx), "msg_001", tid, cancel, ctx=ctx) - - ir_events = widget.get_events("chat:input-required") - assert len(ir_events) == 1 - assert ir_events[0]["inputType"] == "radio" - assert ir_events[0]["options"] == ["GPT-4", "Claude", "Gemini"] - - def test_default_options_empty_list(self, widget): - """When options is None, emitted data should have empty list.""" - ctx = ChatContext() - - def handler(messages, c): - yield InputRequiredResponse(request_id="req_def") - ctx.wait_for_input(timeout=0.1) - - mgr = ChatManager(handler=handler) - mgr.bind(widget) - tid = mgr.active_thread_id - cancel = threading.Event() - - mgr._handle_stream(handler([], ctx), "msg_001", tid, cancel, ctx=ctx) - - ir_events = widget.get_events("chat:input-required") - assert ir_events[0]["inputType"] == "text" - assert ir_events[0]["options"] == [] - - def test_e2e_input_required_response_flow(self, widget): - """Full integration: InputRequired → user responds → handler continues.""" - ctx = ChatContext() - - def handler(messages, c): - yield "Question: " - yield InputRequiredResponse( - prompt="Yes or no?", - request_id="req_e2e", - ) - answer = ctx.wait_for_input() - yield f"Answer: {answer}" - - mgr = ChatManager(handler=handler) - mgr.bind(widget) - tid = mgr.active_thread_id - cancel = threading.Event() - - # Run in a thread since _handle_stream will block at wait_for_input - stream_thread = threading.Thread( - target=mgr._handle_stream, - args=(handler([], ctx), "msg_001", tid, cancel), - kwargs={"ctx": ctx}, - daemon=True, - ) - stream_thread.start() - - # Wait for the input-required event to be emitted - for _ in range(50): - if widget.get_events("chat:input-required"): - break - time.sleep(0.05) - - # Simulate user responding - mgr._on_input_response( - {"requestId": "req_e2e", "text": "yes", "threadId": tid}, - "", - "", - ) - - stream_thread.join(timeout=2.0) - assert not stream_thread.is_alive() - - # Verify the full conversation history - msgs = mgr._threads[tid] - texts = [m["text"] for m in msgs] - assert "Question: " in texts - assert "yes" in texts # user response - assert "Answer: yes" in texts # handler continuation - - -# ============================================================================= -# Artifact Model Tests — All Artifact Types -# ============================================================================= - - -class TestArtifactModels: - """Test each artifact model's defaults, type literals, and fields.""" - - def test_artifact_base(self): - a = _ArtifactBase() - assert a.type == "artifact" - assert a.title == "" - - def test_code_artifact_defaults(self): - a = CodeArtifact() - assert a.type == "artifact" - assert a.artifact_type == "code" - assert a.content == "" - assert a.language == "" - - def test_code_artifact_fields(self): - a = CodeArtifact(title="main.py", content="print(1)", language="python") - assert a.title == "main.py" - assert a.content == "print(1)" - assert a.language == "python" - - def test_artifact_response_is_code_artifact(self): - assert ArtifactResponse is CodeArtifact - - def test_markdown_artifact_defaults(self): - a = MarkdownArtifact() - assert a.artifact_type == "markdown" - assert a.content == "" - - def test_markdown_artifact_fields(self): - a = MarkdownArtifact(title="Notes", content="# Heading\n\nParagraph.") - assert a.title == "Notes" - assert a.content == "# Heading\n\nParagraph." - - def test_html_artifact_defaults(self): - a = HtmlArtifact() - assert a.artifact_type == "html" - assert a.content == "" - - def test_html_artifact_fields(self): - a = HtmlArtifact(title="Page", content="

Hello

") - assert a.content == "

Hello

" - - def test_table_artifact_defaults(self): - a = TableArtifact() - assert a.artifact_type == "table" - assert a.data == [] - assert a.column_defs is None - assert a.grid_options is None - assert a.height == "400px" - - def test_table_artifact_with_data(self): - rows = [{"name": "Alice", "age": 30}, {"name": "Bob", "age": 25}] - a = TableArtifact(title="Users", data=rows, height="300px") - assert a.data == rows - assert a.height == "300px" - - def test_table_artifact_with_column_defs(self): - cols = [{"field": "name"}, {"field": "age"}] - a = TableArtifact(data=[], column_defs=cols) - assert a.column_defs == cols - - def test_table_artifact_with_grid_options(self): - opts = {"pagination": True, "paginationPageSize": 10} - a = TableArtifact(data=[], grid_options=opts) - assert a.grid_options == opts - - def test_plotly_artifact_defaults(self): - a = PlotlyArtifact() - assert a.artifact_type == "plotly" - assert a.figure == {} - assert a.height == "400px" - - def test_plotly_artifact_with_figure(self): - fig = { - "data": [{"x": [1, 2], "y": [3, 4], "type": "scatter"}], - "layout": {"title": "Test"}, - } - a = PlotlyArtifact(title="Chart", figure=fig, height="500px") - assert a.figure == fig - assert a.height == "500px" - - def test_image_artifact_defaults(self): - a = ImageArtifact() - assert a.artifact_type == "image" - assert a.url == "" - assert a.alt == "" - - def test_image_artifact_fields(self): - a = ImageArtifact(title="Logo", url="data:image/png;base64,abc", alt="PyWry Logo") - assert a.url == "data:image/png;base64,abc" - assert a.alt == "PyWry Logo" - - def test_json_artifact_defaults(self): - a = JsonArtifact() - assert a.artifact_type == "json" - assert a.data is None - - def test_json_artifact_with_data(self): - a = JsonArtifact(title="Config", data={"key": "value", "n": 42}) - assert a.data == {"key": "value", "n": 42} - - def test_all_are_artifact_base_subclasses(self): - for cls in ( - CodeArtifact, - MarkdownArtifact, - HtmlArtifact, - TableArtifact, - PlotlyArtifact, - ImageArtifact, - JsonArtifact, - ): - assert issubclass(cls, _ArtifactBase) - - def test_isinstance_dispatch(self): - items = [ - CodeArtifact(content="x"), - MarkdownArtifact(content="# Hi"), - HtmlArtifact(content="

"), - TableArtifact(data=[]), - PlotlyArtifact(figure={}), - ImageArtifact(url="x.png"), - JsonArtifact(data={"k": 1}), - ] - for item in items: - assert isinstance(item, _ArtifactBase) - - -# ============================================================================= -# Artifact Dispatch Tests — _dispatch_artifact + asset injection -# ============================================================================= - - -class TestArtifactDispatch: - """Test _dispatch_artifact with each artifact type.""" - - def test_code_artifact_dispatch(self, bound_manager, widget): - tid = bound_manager.active_thread_id - cancel = threading.Event() - - def gen(): - yield CodeArtifact(title="code.py", content="print(1)", language="python") - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - artifacts = widget.get_events("chat:artifact") - assert len(artifacts) == 1 - assert artifacts[0]["artifactType"] == "code" - assert artifacts[0]["content"] == "print(1)" - assert artifacts[0]["language"] == "python" - assert artifacts[0]["title"] == "code.py" - - def test_markdown_artifact_dispatch(self, bound_manager, widget): - tid = bound_manager.active_thread_id - cancel = threading.Event() - - def gen(): - yield MarkdownArtifact(title="Notes", content="# Hello\n\nWorld") - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - artifacts = widget.get_events("chat:artifact") - assert len(artifacts) == 1 - assert artifacts[0]["artifactType"] == "markdown" - assert artifacts[0]["content"] == "# Hello\n\nWorld" - - def test_html_artifact_dispatch(self, bound_manager, widget): - tid = bound_manager.active_thread_id - cancel = threading.Event() - - def gen(): - yield HtmlArtifact(title="Page", content="

Hi

") - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - artifacts = widget.get_events("chat:artifact") - assert len(artifacts) == 1 - assert artifacts[0]["artifactType"] == "html" - assert artifacts[0]["content"] == "

Hi

" - - def test_table_artifact_dispatch(self, bound_manager, widget): - tid = bound_manager.active_thread_id - cancel = threading.Event() - - rows = [{"name": "Alice", "age": 30}, {"name": "Bob", "age": 25}] - - def gen(): - yield TableArtifact(title="Users", data=rows, height="300px") - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - # Assets should have been injected first - asset_events = widget.get_events("chat:load-assets") - assert len(asset_events) >= 1 - # Scripts should include AG Grid JS - assert len(asset_events[0]["scripts"]) >= 1 - - artifacts = widget.get_events("chat:artifact") - assert len(artifacts) == 1 - assert artifacts[0]["artifactType"] == "table" - assert artifacts[0]["rowData"] == rows - assert artifacts[0]["height"] == "300px" - assert "columns" in artifacts[0] - - def test_table_artifact_with_column_defs(self, bound_manager, widget): - tid = bound_manager.active_thread_id - cancel = threading.Event() - cols = [{"field": "a"}, {"field": "b"}] - - def gen(): - yield TableArtifact(data=[{"a": 1, "b": 2}], column_defs=cols) - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - artifacts = widget.get_events("chat:artifact") - assert artifacts[0]["columnDefs"] == cols - - def test_table_artifact_with_grid_options(self, bound_manager, widget): - tid = bound_manager.active_thread_id - cancel = threading.Event() - opts = {"pagination": True} - - def gen(): - yield TableArtifact(data=[{"x": 1}], grid_options=opts) - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - artifacts = widget.get_events("chat:artifact") - assert artifacts[0]["gridOptions"] == opts - - def test_plotly_artifact_dispatch(self, bound_manager, widget): - tid = bound_manager.active_thread_id - cancel = threading.Event() - fig = { - "data": [{"x": [1, 2], "y": [3, 4], "type": "scatter"}], - "layout": {"title": "Test"}, - } - - def gen(): - yield PlotlyArtifact(title="Chart", figure=fig, height="500px") - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - # Plotly assets should be injected - asset_events = widget.get_events("chat:load-assets") - assert len(asset_events) >= 1 - - artifacts = widget.get_events("chat:artifact") - assert len(artifacts) == 1 - assert artifacts[0]["artifactType"] == "plotly" - assert artifacts[0]["figure"] == fig - assert artifacts[0]["height"] == "500px" - - def test_image_artifact_dispatch(self, bound_manager, widget): - tid = bound_manager.active_thread_id - cancel = threading.Event() - - def gen(): - yield ImageArtifact(title="Logo", url="data:image/png;base64,abc", alt="PyWry Logo") - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - artifacts = widget.get_events("chat:artifact") - assert len(artifacts) == 1 - assert artifacts[0]["artifactType"] == "image" - assert artifacts[0]["url"] == "data:image/png;base64,abc" - assert artifacts[0]["alt"] == "PyWry Logo" - - def test_json_artifact_dispatch(self, bound_manager, widget): - tid = bound_manager.active_thread_id - cancel = threading.Event() - data = {"key": "value", "nested": {"a": [1, 2]}} - - def gen(): - yield JsonArtifact(title="Config", data=data) - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - artifacts = widget.get_events("chat:artifact") - assert len(artifacts) == 1 - assert artifacts[0]["artifactType"] == "json" - assert artifacts[0]["data"] == data - - def test_aggrid_assets_sent_once(self, bound_manager, widget): - """AG Grid assets are injected only on the first table artifact.""" - tid = bound_manager.active_thread_id - cancel = threading.Event() - - def gen(): - yield TableArtifact(data=[{"a": 1}]) - yield TableArtifact(data=[{"b": 2}]) - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - asset_events = widget.get_events("chat:load-assets") - assert len(asset_events) == 1 # Only once - assert bound_manager._aggrid_assets_sent is True - - artifacts = widget.get_events("chat:artifact") - assert len(artifacts) == 2 - - def test_plotly_assets_sent_once(self, bound_manager, widget): - """Plotly assets are injected only on the first plotly artifact.""" - tid = bound_manager.active_thread_id - cancel = threading.Event() - - def gen(): - yield PlotlyArtifact(figure={"data": []}) - yield PlotlyArtifact(figure={"data": []}) - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - asset_events = widget.get_events("chat:load-assets") - assert len(asset_events) == 1 # Only once - assert bound_manager._plotly_assets_sent is True - - def test_mixed_artifacts_both_assets(self, bound_manager, widget): - """Both AG Grid and Plotly assets injected when both types are used.""" - tid = bound_manager.active_thread_id - cancel = threading.Event() - - def gen(): - yield TableArtifact(data=[{"x": 1}]) - yield PlotlyArtifact(figure={"data": []}) - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - asset_events = widget.get_events("chat:load-assets") - assert len(asset_events) == 2 # One for AG Grid, one for Plotly - - def test_artifact_backward_compat(self, bound_manager, widget): - """ArtifactResponse alias still works as CodeArtifact.""" - tid = bound_manager.active_thread_id - cancel = threading.Event() - - def gen(): - yield ArtifactResponse(title="old.py", content="x = 1", language="python") - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - artifacts = widget.get_events("chat:artifact") - assert len(artifacts) == 1 - assert artifacts[0]["artifactType"] == "code" - - def test_table_artifact_dict_data(self, bound_manager, widget): - """TableArtifact with dict-of-lists data (column-oriented).""" - tid = bound_manager.active_thread_id - cancel = threading.Event() - data = {"name": ["Alice", "Bob"], "age": [30, 25]} - - def gen(): - yield TableArtifact(title="Users", data=data) - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - artifacts = widget.get_events("chat:artifact") - assert len(artifacts) == 1 - assert len(artifacts[0]["rowData"]) == 2 - - def test_rich_handler_with_new_artifacts(self, bound_manager, widget): - """Integration test: stream handler yields mixed old and new types.""" - tid = bound_manager.active_thread_id - cancel = threading.Event() - - def gen(): - yield StatusResponse(text="Working...") - yield "Here is some text. " - yield CodeArtifact(title="snippet.py", content="x = 1", language="python") - yield MarkdownArtifact(title="Notes", content="**Bold** text") - yield JsonArtifact(title="Data", data={"key": "val"}) - yield "Done!" - - bound_manager._handle_stream(gen(), "msg_001", tid, cancel) - - # Verify all event types were emitted - assert len(widget.get_events("chat:status-update")) == 1 - chunks = widget.get_events("chat:stream-chunk") - text_chunks = [c["chunk"] for c in chunks if "chunk" in c and not c.get("done")] - assert "Here is some text. " in text_chunks - assert "Done!" in text_chunks - - artifacts = widget.get_events("chat:artifact") - assert len(artifacts) == 3 - types = [a["artifactType"] for a in artifacts] - assert types == ["code", "markdown", "json"] - - -# ============================================================================= -# Security — URL scheme validation -# ============================================================================= - - -class TestURLSchemeValidation: - """Ensure javascript: and other dangerous URL schemes are rejected.""" - - def test_image_artifact_blocks_javascript_url(self): - from pydantic import ValidationError - - with pytest.raises(ValidationError): - ImageArtifact(url="javascript:alert(1)") - - def test_image_artifact_blocks_javascript_url_case_insensitive(self): - from pydantic import ValidationError - - with pytest.raises(ValidationError): - ImageArtifact(url="JaVaScRiPt:alert(1)") - - def test_image_artifact_blocks_javascript_url_with_whitespace(self): - from pydantic import ValidationError - - with pytest.raises(ValidationError): - ImageArtifact(url=" javascript:alert(1)") - - def test_image_artifact_allows_https(self): - a = ImageArtifact(url="https://example.com/img.png") - assert a.url == "https://example.com/img.png" - - def test_image_artifact_allows_data_uri(self): - a = ImageArtifact(url="data:image/png;base64,abc123") - assert a.url == "data:image/png;base64,abc123" - - def test_image_artifact_allows_empty(self): - a = ImageArtifact(url="") - assert a.url == "" - - def test_citation_blocks_javascript_url(self): - from pydantic import ValidationError - - with pytest.raises(ValidationError): - CitationResponse(url="javascript:alert(1)") - - def test_citation_blocks_javascript_url_case_insensitive(self): - from pydantic import ValidationError - - with pytest.raises(ValidationError): - CitationResponse(url="JAVASCRIPT:void(0)") - - def test_citation_allows_https(self): - c = CitationResponse(url="https://example.com", title="Example") - assert c.url == "https://example.com" - - def test_citation_allows_empty(self): - c = CitationResponse(url="") - assert c.url == "" - - -# ============================================================================= -# Async Handler Tests -# ============================================================================= - - -class TestAsyncHandler: - """Test that ChatManager natively supports async functions and generators.""" - - def test_async_coroutine_handler(self): - """An async function returning a string works as a handler.""" - - async def handler(messages, ctx): - return f"Echo: {messages[-1]['text']}" - - mgr = ChatManager(handler=handler) - w = FakeWidget() - mgr.bind(w) - tid = mgr.active_thread_id - mgr._on_user_message({"text": "hello", "threadId": tid}, "", "") - time.sleep(0.5) - - msgs = mgr._threads[tid] - assistant = [m for m in msgs if m["role"] == "assistant"] - assert len(assistant) == 1 - assert assistant[0]["text"] == "Echo: hello" - - def test_async_generator_handler(self): - """An async generator yielding str chunks streams correctly.""" - - async def handler(messages, ctx): - for word in ["Hello", " ", "async", " ", "world"]: - yield word - - mgr = ChatManager(handler=handler) - w = FakeWidget() - mgr.bind(w) - tid = mgr.active_thread_id - mgr._on_user_message({"text": "test", "threadId": tid}, "", "") - time.sleep(0.5) - - chunks = w.get_events("chat:stream-chunk") - text_chunks = [c["chunk"] for c in chunks if not c.get("done")] - assert "".join(text_chunks) == "Hello async world" - - # Done signal sent - done_chunks = [c for c in chunks if c.get("done")] - assert len(done_chunks) == 1 - - # Full text stored - assistant = [m for m in mgr._threads[tid] if m["role"] == "assistant"] - assert assistant[0]["text"] == "Hello async world" - - def test_async_generator_cancellation(self): - """Async generator respects cancel_event.""" - import asyncio as _asyncio - - async def handler(messages, ctx): - for i in range(100): - if ctx.cancel_event.is_set(): - return - yield f"chunk{i} " - await _asyncio.sleep(0.01) - - mgr = ChatManager(handler=handler) - w = FakeWidget() - mgr.bind(w) - tid = mgr.active_thread_id - mgr._on_user_message({"text": "go", "threadId": tid}, "", "") - time.sleep(0.1) - - # Cancel mid-stream - mgr._on_stop_generation({"threadId": tid}, "", "") - time.sleep(0.3) - - chunks = w.get_events("chat:stream-chunk") - # Should have been stopped before all 100 chunks - text_chunks = [c["chunk"] for c in chunks if c.get("chunk")] - assert len(text_chunks) < 100 - - def test_async_generator_with_rich_responses(self): - """Async generator can yield StatusResponse and other rich types.""" - - async def handler(messages, ctx): - yield StatusResponse(text="Thinking...") - yield "The answer is " - yield "42." - - mgr = ChatManager(handler=handler) - w = FakeWidget() - mgr.bind(w) - tid = mgr.active_thread_id - mgr._on_user_message({"text": "question", "threadId": tid}, "", "") - time.sleep(0.5) - - statuses = w.get_events("chat:status-update") - assert len(statuses) == 1 - assert statuses[0]["text"] == "Thinking..." - - assistant = [m for m in mgr._threads[tid] if m["role"] == "assistant"] - assert assistant[0]["text"] == "The answer is 42." - - def test_async_handler_exception(self): - """Async handler exceptions are caught and sent as error messages.""" - - async def handler(messages, ctx): - raise ValueError("async boom") - - mgr = ChatManager(handler=handler) - w = FakeWidget() - mgr.bind(w) - tid = mgr.active_thread_id - mgr._on_user_message({"text": "fail", "threadId": tid}, "", "") - time.sleep(0.5) - - assistant_events = w.get_events("chat:assistant-message") - assert any("async boom" in e.get("text", "") for e in assistant_events) - - -# ============================================================================= -# Stream Buffering Tests -# ============================================================================= - - -class TestStreamBuffering: - """Verify time-based stream buffering batches text chunks.""" - - def test_sync_chunks_batched(self, widget): - """With buffering enabled, fast text chunks are combined.""" - mgr = ChatManager(handler=echo_handler) - mgr._STREAM_FLUSH_INTERVAL = 10 # very high — force all into one batch - mgr._STREAM_MAX_BUFFER = 10_000 - mgr.bind(widget) - tid = mgr.active_thread_id - cancel = threading.Event() - - def gen(): - yield "A" - yield "B" - yield "C" - - mgr._handle_stream(gen(), "msg_001", tid, cancel) - - chunks = widget.get_events("chat:stream-chunk") - text_chunks = [c["chunk"] for c in chunks if c.get("chunk")] - # All three should be batched into one combined chunk - assert len(text_chunks) == 1 - assert text_chunks[0] == "ABC" - # Done signal still sent - assert chunks[-1]["done"] is True - - def test_sync_max_buffer_forces_flush(self, widget): - """Chunks exceeding MAX_BUFFER flush immediately.""" - mgr = ChatManager(handler=echo_handler) - mgr._STREAM_FLUSH_INTERVAL = 10 # high interval - mgr._STREAM_MAX_BUFFER = 5 # but very small buffer - mgr.bind(widget) - tid = mgr.active_thread_id - cancel = threading.Event() - - def gen(): - yield "AAAAAA" # 6 chars > 5 — triggers flush - yield "BB" # 2 chars < 5 — stays in buffer - - mgr._handle_stream(gen(), "msg_001", tid, cancel) - - chunks = widget.get_events("chat:stream-chunk") - text_chunks = [c["chunk"] for c in chunks if c.get("chunk")] - assert len(text_chunks) == 2 - assert text_chunks[0] == "AAAAAA" - assert text_chunks[1] == "BB" - - def test_sync_non_text_flushes_buffer(self, widget): - """Non-text items flush any pending text buffer first.""" - mgr = ChatManager(handler=echo_handler) - mgr._STREAM_FLUSH_INTERVAL = 10 - mgr._STREAM_MAX_BUFFER = 10_000 - mgr.bind(widget) - tid = mgr.active_thread_id - cancel = threading.Event() - - def gen(): - yield "before " - yield StatusResponse(text="status!") - yield "after" - - mgr._handle_stream(gen(), "msg_001", tid, cancel) - - chunks = widget.get_events("chat:stream-chunk") - text_chunks = [c["chunk"] for c in chunks if c.get("chunk")] - # "before " flushed before status, "after" flushed at end - assert text_chunks[0] == "before " - assert text_chunks[1] == "after" - - statuses = widget.get_events("chat:status-update") - assert len(statuses) == 1 - - def test_async_chunks_batched(self, widget): - """Async generator text chunks are batched like sync ones.""" - import asyncio as _asyncio - - mgr = ChatManager(handler=echo_handler) - mgr._STREAM_FLUSH_INTERVAL = 10 - mgr._STREAM_MAX_BUFFER = 10_000 - mgr.bind(widget) - tid = mgr.active_thread_id - cancel = threading.Event() - - async def agen(): - yield "X" - yield "Y" - yield "Z" - - _asyncio.run(mgr._handle_async_stream(agen(), "msg_001", tid, cancel)) - - chunks = widget.get_events("chat:stream-chunk") - text_chunks = [c["chunk"] for c in chunks if c.get("chunk")] - assert len(text_chunks) == 1 - assert text_chunks[0] == "XYZ" - - def test_async_non_text_flushes_buffer(self, widget): - """Async stream flushes text buffer before non-text items.""" - import asyncio as _asyncio - - mgr = ChatManager(handler=echo_handler) - mgr._STREAM_FLUSH_INTERVAL = 10 - mgr._STREAM_MAX_BUFFER = 10_000 - mgr.bind(widget) - tid = mgr.active_thread_id - cancel = threading.Event() - - async def agen(): - yield "hello " - yield ThinkingResponse(text="hmm") - yield "world" - - _asyncio.run(mgr._handle_async_stream(agen(), "msg_001", tid, cancel)) - - chunks = widget.get_events("chat:stream-chunk") - text_chunks = [c["chunk"] for c in chunks if c.get("chunk")] - assert text_chunks[0] == "hello " - assert text_chunks[1] == "world" - - thinking = widget.get_events("chat:thinking-chunk") - assert len(thinking) == 1 - - def test_full_text_stored_correctly_with_buffering(self, widget): - """Full text is accumulated regardless of buffering.""" - mgr = ChatManager(handler=echo_handler) - mgr._STREAM_FLUSH_INTERVAL = 10 - mgr._STREAM_MAX_BUFFER = 10_000 - mgr.bind(widget) - tid = mgr.active_thread_id - cancel = threading.Event() - - def gen(): - yield "Hello " - yield "beautiful " - yield "world!" - - mgr._handle_stream(gen(), "msg_001", tid, cancel) - - msgs = mgr._threads[tid] - assert msgs[0]["text"] == "Hello beautiful world!" - - def test_all_events_present_after_return(self, widget): - """_handle_stream delivers all events before returning.""" - mgr = ChatManager(handler=echo_handler) - mgr._STREAM_FLUSH_INTERVAL = 0 # immediate flush - mgr._STREAM_MAX_BUFFER = 1 - mgr.bind(widget) - tid = mgr.active_thread_id - cancel = threading.Event() - - def gen(): - for i in range(20): - yield f"chunk{i} " - - mgr._handle_stream(gen(), "msg_001", tid, cancel) - - # All chunks + done should be present immediately after return - chunks = widget.get_events("chat:stream-chunk") - text_chunks = [c["chunk"] for c in chunks if c.get("chunk")] - assert "".join(text_chunks) == "".join(f"chunk{i} " for i in range(20)) - assert chunks[-1]["done"] is True - - -# ============================================================================= -# Context Attachment Tests -# ============================================================================= - - -class TestContextAttachments: - """Tests for context attachment resolution and injection.""" - - def test_attachment_dataclass_file(self): - """File attachment stores path correctly.""" - import pathlib - - att = Attachment(type="file", name="test.py", path=pathlib.Path("/test_data/test.py")) - assert att.type == "file" - assert att.name == "test.py" - assert att.path == pathlib.Path("/test_data/test.py") - assert att.content == "" - assert att.source == "" - - def test_attachment_dataclass_widget(self): - """Widget attachment stores content correctly.""" - att = Attachment(type="widget", name="@Sales Data", content="a,b\n1,2") - assert att.type == "widget" - assert att.name == "@Sales Data" - assert att.content == "a,b\n1,2" - assert att.path is None - - def test_enable_context_default_false(self): - """Context is disabled by default.""" - mgr = ChatManager(handler=echo_handler) - assert mgr._enable_context is False - - def test_enable_context_constructor(self): - """enable_context=True is stored.""" - mgr = ChatManager(handler=echo_handler, enable_context=True) - assert mgr._enable_context is True - - def test_context_allowed_roots(self, tmp_path): - """context_allowed_roots is stored (resolved).""" - mgr = ChatManager( - handler=echo_handler, - enable_context=True, - context_allowed_roots=[str(tmp_path)], - ) - assert mgr._context_allowed_roots == [str(tmp_path)] - - def test_resolve_attachments_disabled(self, widget): - """When context is disabled, no attachments are resolved.""" - mgr = ChatManager(handler=echo_handler, enable_context=False) - mgr.bind(widget) - result = mgr._resolve_attachments( - [{"type": "file", "name": "test.py", "path": "/test_data/test.py"}] - ) - assert result == [] - - def test_resolve_attachments_with_paths(self, widget): - """_resolve_attachments creates Attachments with Path objects.""" - import pathlib - - mgr = ChatManager(handler=echo_handler, enable_context=True) - mgr.bind(widget) - result = mgr._resolve_attachments( - [ - {"type": "file", "name": "a.py", "path": "/data/a.py"}, - {"type": "file", "name": "b.json", "path": "/data/b.json"}, - ] - ) - assert len(result) == 2 - assert result[0].name == "a.py" - assert result[0].path == pathlib.Path("/data/a.py") - assert result[1].name == "b.json" - assert result[1].path == pathlib.Path("/data/b.json") - - def test_resolve_attachments_file_without_path_or_content_skipped(self, widget): - """File attachment without path or content is skipped.""" - mgr = ChatManager(handler=echo_handler, enable_context=True) - mgr.bind(widget) - result = mgr._resolve_attachments( - [ - {"type": "file", "name": "orphan.csv"}, - ] - ) - assert result == [] - - def test_resolve_attachments_browser_content_fallback(self, widget): - """Browser mode: file with content but no path is resolved.""" - mgr = ChatManager(handler=echo_handler, enable_context=True) - mgr.bind(widget) - result = mgr._resolve_attachments( - [ - {"type": "file", "name": "data.csv", "content": "a,b\n1,2"}, - ] - ) - assert len(result) == 1 - assert result[0].name == "data.csv" - assert result[0].path is None - assert result[0].content == "a,b\n1,2" - - def test_get_attachment_browser_content(self): - """get_attachment returns content for browser-mode files (no path).""" - ctx = ChatContext( - attachments=[ - Attachment(type="file", name="notes.txt", content="hello world"), - ], - ) - assert ctx.get_attachment("notes.txt") == "hello world" - - def test_attachment_summary_browser_content(self): - """attachment_summary shows (file) without path for browser-mode files.""" - ctx = ChatContext( - attachments=[ - Attachment(type="file", name="notes.txt", content="hello world"), - ], - ) - summary = ctx.attachment_summary - assert "notes.txt" in summary - assert "(file)" in summary - - def test_context_text_browser_content(self): - """context_text includes content for browser-mode files.""" - ctx = ChatContext( - attachments=[ - Attachment(type="file", name="data.csv", content="a,b\n1,2"), - ], - ) - text = ctx.context_text - assert "a,b" in text - assert "data.csv" in text - - def test_resolve_attachments_max_limit(self, widget): - """Only _MAX_ATTACHMENTS are resolved.""" - from pywry.chat_manager import _MAX_ATTACHMENTS - - mgr = ChatManager(handler=echo_handler, enable_context=True) - mgr.bind(widget) - raw = [ - {"type": "file", "name": f"f{i}.txt", "path": f"/test_data/f{i}.txt"} - for i in range(_MAX_ATTACHMENTS + 5) - ] - result = mgr._resolve_attachments(raw) - assert len(result) == _MAX_ATTACHMENTS - - def test_context_tool_schema(self): - """CONTEXT_TOOL is a valid OpenAI-style tool dict.""" - tool = ChatManager.CONTEXT_TOOL - assert tool["type"] == "function" - assert tool["function"]["name"] == "get_context" - params = tool["function"]["parameters"] - assert "name" in params["properties"] - assert "name" in params["required"] - - def test_get_attachment_found(self): - """ctx.get_attachment returns path string for files, content for widgets.""" - import pathlib - - ctx = ChatContext( - attachments=[ - Attachment(type="file", name="test.py", path=pathlib.Path("/test_data/test.py")), - Attachment(type="widget", name="@Sales", content="a,b"), - ], - ) - assert ctx.get_attachment("test.py") == str(pathlib.Path("/test_data/test.py")) - assert ctx.get_attachment("@Sales") == "a,b" - - def test_get_attachment_not_found(self): - """ctx.get_attachment returns error message when not found.""" - import pathlib - - ctx = ChatContext( - attachments=[ - Attachment(type="file", name="test.py", path=pathlib.Path("/test_data/test.py")), - ], - ) - result = ctx.get_attachment("missing.txt") - assert "not found" in result.lower() - assert "test.py" in result - - def test_attachment_summary(self): - """ctx.attachment_summary lists attached items.""" - import pathlib - - ctx = ChatContext( - attachments=[ - Attachment(type="file", name="data.csv", path=pathlib.Path("/data/data.csv")), - ], - ) - summary = ctx.attachment_summary - assert "data.csv" in summary - assert "file" in summary - - def test_attachment_summary_empty(self): - """ctx.attachment_summary is empty string when no attachments.""" - ctx = ChatContext() - assert ctx.attachment_summary == "" - - def test_messages_stay_clean_with_attachments(self, widget): - """Attachments go to ctx.attachments, messages list stays user/assistant only.""" - received_messages = [] - received_ctx = [] - - def capture_handler(messages, ctx): - received_messages.extend(messages) - received_ctx.append(ctx) - return "ok" - - mgr = ChatManager(handler=capture_handler, enable_context=True) - mgr.bind(widget) - - mgr._on_user_message( - { - "text": "Analyze this", - "attachments": [ - {"type": "file", "name": "data.csv", "path": "/data/data.csv"}, - ], - }, - "chat:user-message", - "", - ) - time.sleep(0.5) - - # Messages should only have user/assistant — no context role injected - assert all(m["role"] in ("user", "assistant") for m in received_messages) - # Attachments should be on ctx - assert len(received_ctx) == 1 - assert len(received_ctx[0].attachments) == 1 - assert received_ctx[0].attachments[0].name == "data.csv" - import pathlib - - assert received_ctx[0].attachments[0].path == pathlib.Path("/data/data.csv") - - def test_context_not_stored_in_threads(self, widget): - """Context messages are NOT persisted in _threads.""" - mgr = ChatManager(handler=echo_handler, enable_context=True) - mgr.bind(widget) - - mgr._on_user_message( - { - "text": "Hello", - "attachments": [ - {"type": "file", "name": "test.txt", "path": "/test_data/test.txt"}, - ], - }, - "chat:user-message", - "", - ) - time.sleep(0.5) - - # _threads should only have user + assistant, NOT context - thread = mgr._threads.get(mgr._active_thread, []) - roles = [m["role"] for m in thread] - assert "context" not in roles - assert "user" in roles - - def test_chat_context_attachments_field(self, widget): - """ChatContext.attachments is populated from resolved attachments.""" - received_ctx = [] - - def capture_handler(messages, ctx): - received_ctx.append(ctx) - return "ok" - - mgr = ChatManager(handler=capture_handler, enable_context=True) - mgr.bind(widget) - - mgr._on_user_message( - { - "text": "Check this", - "attachments": [ - {"type": "file", "name": "f.py", "path": "/test_data/f.py"}, - ], - }, - "chat:user-message", - "", - ) - time.sleep(0.5) - - assert len(received_ctx) == 1 - assert len(received_ctx[0].attachments) == 1 - assert received_ctx[0].attachments[0].name == "f.py" - - def test_no_attachments_empty_list(self, widget): - """When no attachments sent, ctx.attachments is empty list.""" - received_ctx = [] - - def capture_handler(messages, ctx): - received_ctx.append(ctx) - return "ok" - - mgr = ChatManager(handler=capture_handler, enable_context=True) - mgr.bind(widget) - - mgr._on_user_message( - {"text": "Hello"}, - "chat:user-message", - "", - ) - time.sleep(0.5) - - assert len(received_ctx) == 1 - assert received_ctx[0].attachments == [] - - def test_get_context_sources_no_app(self, widget): - """_get_context_sources returns empty when no app.""" - mgr = ChatManager(handler=echo_handler, enable_context=True) - mgr.bind(widget) - assert mgr._get_context_sources() == [] - - def test_context_sources_emitted_on_state_request(self, widget): - """When context is enabled, context sources are emitted on request-state.""" - mgr = ChatManager(handler=echo_handler, enable_context=True) - mgr.bind(widget) - widget.clear() - - mgr._on_request_state({}, "chat:request-state", "") - - # Should have emitted chat:context-sources (but may be empty if no app) - # At minimum, no error should occur - state_events = widget.get_events("chat:state-response") - assert len(state_events) == 1 - - def test_register_context_source(self, widget): - """register_context_source makes source appear in @ mention list.""" - mgr = ChatManager(handler=echo_handler, enable_context=True) - mgr.register_context_source("sales-grid", "Sales Data") - mgr.bind(widget) - - sources = mgr._get_context_sources() - assert len(sources) == 1 - assert sources[0]["id"] == "sales-grid" - assert sources[0]["name"] == "Sales Data" - assert sources[0]["componentId"] == "sales-grid" - - def test_registered_source_emitted_on_request_state(self, widget): - """Registered sources are emitted via chat:context-sources.""" - mgr = ChatManager(handler=echo_handler, enable_context=True) - mgr.register_context_source("sales-chart", "Revenue Chart") - mgr.bind(widget) - widget.clear() - - mgr._on_request_state({}, "chat:request-state", "") - - ctx_events = widget.get_events("chat:context-sources") - assert len(ctx_events) == 1 - assert len(ctx_events[0]["sources"]) == 1 - assert ctx_events[0]["sources"][0]["name"] == "Revenue Chart" - - def test_resolve_registered_source_with_content(self, widget): - """_resolve_widget_attachment uses content extracted by frontend.""" - mgr = ChatManager(handler=echo_handler, enable_context=True) - mgr.register_context_source("sales-grid", "Sales Data") - mgr.bind(widget) - - # Frontend sends extracted content along with the widget_id - att = mgr._resolve_widget_attachment( - "sales-grid", - content="Product,Revenue\nAlpha,100\nBeta,200", - ) - assert att is not None - assert att.name == "@Sales Data" - assert att.content == "Product,Revenue\nAlpha,100\nBeta,200" - assert att.type == "widget" - assert att.source == "sales-grid" - - def test_resolve_registered_source_not_found(self, widget): - """_resolve_widget_attachment returns None for unknown source.""" - mgr = ChatManager(handler=echo_handler, enable_context=True) - mgr.bind(widget) - - att = mgr._resolve_widget_attachment("nonexistent") - assert att is None - - def test_multiple_registered_sources(self, widget): - """Multiple registered sources all appear in context list.""" - mgr = ChatManager(handler=echo_handler, enable_context=True) - mgr.register_context_source("sales-grid", "Sales Data") - mgr.register_context_source("sales-chart", "Revenue Chart") - mgr.register_context_source("kpi-grid", "KPI Summary") - mgr.bind(widget) - - sources = mgr._get_context_sources() - names = [s["name"] for s in sources] - assert "Sales Data" in names - assert "Revenue Chart" in names - assert "KPI Summary" in names - - def test_resolve_widget_without_content_or_app(self, widget): - """_resolve_widget_attachment without content falls back gracefully.""" - mgr = ChatManager(handler=echo_handler, enable_context=True) - mgr.register_context_source("sales-grid", "Sales Data") - mgr.bind(widget) - - # No content provided and no app/inline_widgets => None - att = mgr._resolve_widget_attachment("sales-grid") - assert att is None - - -class TestFileAttachConfig: - """Tests for the separate enable_file_attach / file_accept_types params.""" - - def test_enable_file_attach_default_false(self): - """File attach is disabled by default.""" - mgr = ChatManager(handler=echo_handler) - assert mgr._enable_file_attach is False - - def test_enable_file_attach_true(self): - """enable_file_attach=True requires file_accept_types.""" - mgr = ChatManager( - handler=echo_handler, - enable_file_attach=True, - file_accept_types=[".csv"], - ) - assert mgr._enable_file_attach is True - - def test_enable_file_attach_requires_accept_types(self): - """ValueError when enable_file_attach=True without file_accept_types.""" - import pytest - - with pytest.raises(ValueError, match="file_accept_types is required"): - ChatManager(handler=echo_handler, enable_file_attach=True) - - def test_file_accept_types_custom(self): - """Custom file accept types are stored.""" - types = [".csv", ".json", ".xlsx"] - mgr = ChatManager( - handler=echo_handler, - enable_file_attach=True, - file_accept_types=types, - ) - assert mgr._file_accept_types == types - - def test_file_attach_independent_of_context(self, widget): - """File attachments work when enable_file_attach=True but enable_context=False.""" - import pathlib - - mgr = ChatManager( - handler=echo_handler, - enable_file_attach=True, - file_accept_types=[".csv"], - enable_context=False, - ) - mgr.bind(widget) - result = mgr._resolve_attachments( - [ - {"type": "file", "name": "data.csv", "path": "/data/data.csv"}, - ] - ) - assert len(result) == 1 - assert result[0].name == "data.csv" - assert result[0].path == pathlib.Path("/data/data.csv") - - def test_context_only_no_file_attach(self, widget): - """Widget attachments work when enable_context=True but enable_file_attach=False.""" - mgr = ChatManager( - handler=echo_handler, - enable_context=True, - enable_file_attach=False, - ) - mgr.register_context_source("sales-grid", "Sales Data") - mgr.bind(widget) - result = mgr._resolve_attachments( - [ - {"type": "widget", "widgetId": "sales-grid", "content": "a,b\n1,2"}, - ] - ) - assert len(result) == 1 - assert result[0].type == "widget" - - def test_both_disabled_resolves_nothing(self, widget): - """When both flags are False, no attachments resolve.""" - mgr = ChatManager(handler=echo_handler) - mgr.bind(widget) - result = mgr._resolve_attachments( - [ - {"type": "file", "name": "data.csv", "path": "/data/data.csv"}, - ] - ) - assert result == [] - - def test_both_enabled_resolves_all(self, widget): - """When both flags are True, both files and widgets resolve.""" - import pathlib - - mgr = ChatManager( - handler=echo_handler, - enable_context=True, - enable_file_attach=True, - file_accept_types=[".csv"], - ) - mgr.register_context_source("sales-grid", "Sales Data") - mgr.bind(widget) - result = mgr._resolve_attachments( - [ - {"type": "file", "name": "data.csv", "path": "/data/data.csv"}, - {"type": "widget", "widgetId": "sales-grid", "content": "x,y\n1,2"}, - ] - ) - assert len(result) == 2 - assert result[0].type == "file" - assert result[0].path == pathlib.Path("/data/data.csv") - assert result[1].type == "widget" - assert result[1].content == "x,y\n1,2" - - def test_rejected_file_extension(self, widget): - """Files with extensions not in file_accept_types are rejected.""" - mgr = ChatManager( - handler=echo_handler, - enable_file_attach=True, - file_accept_types=[".csv", ".json"], - ) - mgr.bind(widget) - result = mgr._resolve_attachments( - [ - {"type": "file", "name": "exploit.exe", "path": "/test_data/exploit.exe"}, - ] - ) - assert result == [] - - def test_accepted_file_extension(self, widget): - """Files with extensions in file_accept_types are accepted.""" - mgr = ChatManager( - handler=echo_handler, - enable_file_attach=True, - file_accept_types=[".csv", ".json"], - ) - mgr.bind(widget) - result = mgr._resolve_attachments( - [ - {"type": "file", "name": "data.csv", "path": "/data/data.csv"}, - ] - ) - assert len(result) == 1 - assert result[0].name == "data.csv" - - -# ============================================================================= -# Full pipeline integration tests — prove file attachments actually work -# ============================================================================= - - -class TestFileAttachPipeline: - """End-to-end tests: _on_user_message → handler receives correct Attachment - objects with the right fields, and ctx helpers return correct data.""" - - @pytest.fixture() - def widget(self): - return FakeWidget() - - # -- Desktop mode (Tauri): handler receives path, reads file from disk -- - - def test_desktop_file_path_reaches_handler(self, widget, tmp_path): - """Full pipeline: desktop file attachment delivers a real readable Path.""" - f = tmp_path / "sales.csv" - f.write_text("Product,Revenue\nAlpha,100\nBeta,200", encoding="utf-8") - - received = {} - - def handler(messages, ctx): - received["ctx"] = ctx - received["messages"] = list(messages) - # Actually read the file — this is what the handler would do - att = ctx.attachments[0] - received["file_content"] = att.path.read_text(encoding="utf-8") - return "Done" - - mgr = ChatManager( - handler=handler, - enable_file_attach=True, - file_accept_types=[".csv"], - ) - mgr.bind(widget) - - mgr._on_user_message( - { - "text": "Analyze sales", - "attachments": [ - {"type": "file", "name": "sales.csv", "path": str(f)}, - ], - }, - "chat:user-message", - "", - ) - time.sleep(0.5) - - # Handler was called - assert "ctx" in received - ctx = received["ctx"] - - # Attachment has correct fields - assert len(ctx.attachments) == 1 - att = ctx.attachments[0] - assert att.type == "file" - assert att.name == "sales.csv" - assert att.path == f - assert att.content == "" # Desktop mode — content is empty - - # Handler could actually read the file - assert received["file_content"] == "Product,Revenue\nAlpha,100\nBeta,200" - - # ctx.get_attachment returns path string for desktop files - assert ctx.get_attachment("sales.csv") == str(f) - - # ctx.attachment_summary includes path - assert str(f) in ctx.attachment_summary - assert "sales.csv" in ctx.attachment_summary - - # ctx.context_text includes "Path:" for desktop files - assert f"Path: {f}" in ctx.context_text - - # -- Browser mode (inline/iframe): handler receives content directly -- - - def test_browser_file_content_reaches_handler(self, widget): - """Full pipeline: browser file attachment delivers content directly.""" - csv_data = "Name,Age\nAlice,30\nBob,25" - received = {} - - def handler(messages, ctx): - received["ctx"] = ctx - # In browser mode, content is already available — no disk read needed - att = ctx.attachments[0] - received["from_content"] = att.content - received["from_get_attachment"] = ctx.get_attachment("people.csv") - return "Done" - - mgr = ChatManager( - handler=handler, - enable_file_attach=True, - file_accept_types=[".csv"], - ) - mgr.bind(widget) - - mgr._on_user_message( - { - "text": "Who is older?", - "attachments": [ - {"type": "file", "name": "people.csv", "content": csv_data}, - ], - }, - "chat:user-message", - "", - ) - time.sleep(0.5) - - assert "ctx" in received - ctx = received["ctx"] - - # Attachment has correct fields for browser mode - assert len(ctx.attachments) == 1 - att = ctx.attachments[0] - assert att.type == "file" - assert att.name == "people.csv" - assert att.path is None # Browser — no filesystem path - assert att.content == csv_data - - # Handler got the content - assert received["from_content"] == csv_data - # get_attachment returns content when path is None - assert received["from_get_attachment"] == csv_data - - # attachment_summary says (file) without path - assert "people.csv (file)" in ctx.attachment_summary - - # context_text includes the actual content - assert "Name,Age" in ctx.context_text - assert "people.csv" in ctx.context_text - - # -- Mixed: desktop file + widget in same message -- - - def test_mixed_file_and_widget_pipeline(self, widget, tmp_path): - """Desktop file + widget attachment both reach handler correctly.""" - f = tmp_path / "config.json" - f.write_text('{"debug": true}', encoding="utf-8") - - received = {} - - def handler(messages, ctx): - received["ctx"] = ctx - return "Done" - - mgr = ChatManager( - handler=handler, - enable_context=True, - enable_file_attach=True, - file_accept_types=[".json"], - ) - mgr.register_context_source("metrics-grid", "Metrics") - mgr.bind(widget) - - mgr._on_user_message( - { - "text": "Compare", - "attachments": [ - {"type": "file", "name": "config.json", "path": str(f)}, - {"type": "widget", "widgetId": "metrics-grid", "content": "x,y\n1,2"}, - ], - }, - "chat:user-message", - "", - ) - time.sleep(0.5) - - ctx = received["ctx"] - assert len(ctx.attachments) == 2 - - # File attachment - file_att = ctx.attachments[0] - assert file_att.type == "file" - assert file_att.path == f - assert file_att.content == "" - assert ctx.get_attachment("config.json") == str(f) - # Verify the file is actually readable - assert file_att.path.read_text(encoding="utf-8") == '{"debug": true}' - - # Widget attachment - widget_att = ctx.attachments[1] - assert widget_att.type == "widget" - assert widget_att.path is None - assert widget_att.content == "x,y\n1,2" - assert ctx.get_attachment("Metrics") == "x,y\n1,2" - - # Summary includes both - summary = ctx.attachment_summary - assert "config.json" in summary - assert "Metrics" in summary - - # -- Mixed: browser files + widget in same message -- - - def test_mixed_browser_file_and_widget_pipeline(self, widget): - """Browser file + widget attachment both reach handler correctly.""" - received = {} - - def handler(messages, ctx): - received["ctx"] = ctx - return "Done" - - mgr = ChatManager( - handler=handler, - enable_context=True, - enable_file_attach=True, - file_accept_types=[".txt"], - ) - mgr.register_context_source("chart", "Revenue Chart") - mgr.bind(widget) - - mgr._on_user_message( - { - "text": "Analyze", - "attachments": [ - {"type": "file", "name": "notes.txt", "content": "buy low sell high"}, - {"type": "widget", "widgetId": "chart", "content": "Q1:100,Q2:200"}, - ], - }, - "chat:user-message", - "", - ) - time.sleep(0.5) - - ctx = received["ctx"] - assert len(ctx.attachments) == 2 - - # Browser file - assert ctx.attachments[0].type == "file" - assert ctx.attachments[0].path is None - assert ctx.attachments[0].content == "buy low sell high" - assert ctx.get_attachment("notes.txt") == "buy low sell high" - - # Widget - assert ctx.attachments[1].type == "widget" - assert ctx.get_attachment("Revenue Chart") == "Q1:100,Q2:200" - - # -- Context text injection into messages -- - - def test_desktop_context_text_prepended_to_message(self, widget, tmp_path): - """In desktop mode, context_text with file paths is prepended to user message.""" - f = tmp_path / "data.csv" - f.write_text("a,b\n1,2", encoding="utf-8") - - received = {} - - def handler(messages, ctx): - received["messages"] = list(messages) - received["ctx"] = ctx - return "ok" - - mgr = ChatManager( - handler=handler, - enable_file_attach=True, - file_accept_types=[".csv"], - ) - mgr.bind(widget) - - mgr._on_user_message( - { - "text": "check this", - "attachments": [ - {"type": "file", "name": "data.csv", "path": str(f)}, - ], - }, - "chat:user-message", - "", - ) - time.sleep(0.5) - - # The last user message text should have context prepended - last_user = [m for m in received["messages"] if m["role"] == "user"][-1] - assert f"Path: {f}" in last_user["text"] - assert "check this" in last_user["text"] - - def test_browser_context_text_prepended_to_message(self, widget): - """In browser mode, context_text with file content is prepended to user message.""" - received = {} - - def handler(messages, ctx): - received["messages"] = list(messages) - return "ok" - - mgr = ChatManager( - handler=handler, - enable_file_attach=True, - file_accept_types=[".csv"], - ) - mgr.bind(widget) - - mgr._on_user_message( - { - "text": "check this", - "attachments": [ - {"type": "file", "name": "data.csv", "content": "x,y\n10,20"}, - ], - }, - "chat:user-message", - "", - ) - time.sleep(0.5) - - last_user = [m for m in received["messages"] if m["role"] == "user"][-1] - # Browser content should be inline in the message - assert "x,y" in last_user["text"] - assert "check this" in last_user["text"] - - # -- Rejected files never reach handler -- - - def test_rejected_extension_never_reaches_handler(self, widget): - """Files with wrong extensions are silently dropped before handler.""" - received = {} - - def handler(messages, ctx): - received["ctx"] = ctx - return "ok" - - mgr = ChatManager( - handler=handler, - enable_file_attach=True, - file_accept_types=[".csv"], - ) - mgr.bind(widget) - - mgr._on_user_message( - { - "text": "run this", - "attachments": [ - {"type": "file", "name": "malware.exe", "path": "/test_data/malware.exe"}, - ], - }, - "chat:user-message", - "", - ) - time.sleep(0.5) - - # Handler was called but with NO attachments - assert received["ctx"].attachments == [] - - def test_empty_path_and_content_never_reaches_handler(self, widget): - """File with neither path nor content is dropped.""" - received = {} - - def handler(messages, ctx): - received["ctx"] = ctx - return "ok" - - mgr = ChatManager( - handler=handler, - enable_file_attach=True, - file_accept_types=[".csv"], - ) - mgr.bind(widget) - - mgr._on_user_message( - { - "text": "test", - "attachments": [ - {"type": "file", "name": "ghost.csv"}, - ], - }, - "chat:user-message", - "", - ) - time.sleep(0.5) - - assert received["ctx"].attachments == [] - - # -- Emitted events contain attachment info -- - - def test_tool_call_events_emitted_for_desktop_file(self, widget, tmp_path): - """Attachment tool-call/tool-result events are emitted for desktop files.""" - f = tmp_path / "report.csv" - f.write_text("a,b", encoding="utf-8") - - mgr = ChatManager( - handler=echo_handler, - enable_file_attach=True, - file_accept_types=[".csv"], - ) - mgr.bind(widget) - widget.clear() - - mgr._on_user_message( - { - "text": "analyze", - "attachments": [ - {"type": "file", "name": "report.csv", "path": str(f)}, - ], - }, - "chat:user-message", - "", - ) - time.sleep(0.5) - - # Should emit tool-call with name="attach_file" - tool_calls = widget.get_events("chat:tool-call") - assert len(tool_calls) >= 1 - assert tool_calls[0]["name"] == "attach_file" - assert tool_calls[0]["arguments"]["name"] == "report.csv" - - # Should emit tool-result with path info - tool_results = widget.get_events("chat:tool-result") - assert len(tool_results) >= 1 - assert str(f) in tool_results[0]["result"] - - def test_tool_call_events_emitted_for_browser_file(self, widget): - """Attachment tool-call/tool-result events are emitted for browser files.""" - mgr = ChatManager( - handler=echo_handler, - enable_file_attach=True, - file_accept_types=[".txt"], - ) - mgr.bind(widget) - widget.clear() - - mgr._on_user_message( - { - "text": "read", - "attachments": [ - {"type": "file", "name": "notes.txt", "content": "hello"}, - ], - }, - "chat:user-message", - "", - ) - time.sleep(0.5) - - tool_calls = widget.get_events("chat:tool-call") - assert len(tool_calls) >= 1 - assert tool_calls[0]["name"] == "attach_file" - - # -- Multiple files in one message -- - - def test_multiple_desktop_files(self, widget, tmp_path): - """Multiple desktop files all reach the handler with correct paths.""" - f1 = tmp_path / "a.csv" - f2 = tmp_path / "b.csv" - f1.write_text("col1\n1", encoding="utf-8") - f2.write_text("col2\n2", encoding="utf-8") - - received = {} - - def handler(messages, ctx): - received["ctx"] = ctx - return "ok" - - mgr = ChatManager( - handler=handler, - enable_file_attach=True, - file_accept_types=[".csv"], - ) - mgr.bind(widget) - - mgr._on_user_message( - { - "text": "compare", - "attachments": [ - {"type": "file", "name": "a.csv", "path": str(f1)}, - {"type": "file", "name": "b.csv", "path": str(f2)}, - ], - }, - "chat:user-message", - "", - ) - time.sleep(0.5) - - ctx = received["ctx"] - assert len(ctx.attachments) == 2 - # Both files are independently readable - assert ctx.attachments[0].path.read_text(encoding="utf-8") == "col1\n1" - assert ctx.attachments[1].path.read_text(encoding="utf-8") == "col2\n2" - # get_attachment resolves each by name - assert ctx.get_attachment("a.csv") == str(f1) - assert ctx.get_attachment("b.csv") == str(f2) - - def test_multiple_browser_files(self, widget): - """Multiple browser files all reach the handler with correct content.""" - received = {} - - def handler(messages, ctx): - received["ctx"] = ctx - return "ok" - - mgr = ChatManager( - handler=handler, - enable_file_attach=True, - file_accept_types=[".csv", ".json"], - ) - mgr.bind(widget) - - mgr._on_user_message( - { - "text": "compare", - "attachments": [ - {"type": "file", "name": "data.csv", "content": "a,b\n1,2"}, - {"type": "file", "name": "cfg.json", "content": '{"k": "v"}'}, - ], - }, - "chat:user-message", - "", - ) - time.sleep(0.5) - - ctx = received["ctx"] - assert len(ctx.attachments) == 2 - assert ctx.get_attachment("data.csv") == "a,b\n1,2" - assert ctx.get_attachment("cfg.json") == '{"k": "v"}' - # Both show up in summary - assert "data.csv" in ctx.attachment_summary - assert "cfg.json" in ctx.attachment_summary - - # -- Handler pattern: read or use content -- - - def test_handler_reads_real_file_like_demo(self, widget, tmp_path): - """Replicate the exact magentic demo pattern: handler reads att.path.""" - f = tmp_path / "report.csv" - f.write_text("Product,Revenue\nAlpha,100\nBeta,200", encoding="utf-8") - - received = {} - - def handler(messages, ctx): - # Exact pattern from pywry_demo_magentic.py get_context tool - results = [] - for att in ctx.attachments: - if att.path: - results.append(att.path.read_text(encoding="utf-8", errors="replace")) - else: - results.append(att.content) - received["results"] = results - return "Done" - - mgr = ChatManager( - handler=handler, - enable_file_attach=True, - file_accept_types=[".csv"], - ) - mgr.bind(widget) - - mgr._on_user_message( - { - "text": "analyze", - "attachments": [ - {"type": "file", "name": "report.csv", "path": str(f)}, - ], - }, - "chat:user-message", - "", - ) - time.sleep(0.5) - - assert received["results"] == ["Product,Revenue\nAlpha,100\nBeta,200"] - - def test_handler_uses_browser_content_like_demo(self, widget): - """Replicate the demo pattern for browser mode: handler uses att.content.""" - received = {} - - def handler(messages, ctx): - results = [] - for att in ctx.attachments: - if att.path: - results.append(att.path.read_text(encoding="utf-8", errors="replace")) - else: - results.append(att.content) - received["results"] = results - return "Done" - - mgr = ChatManager( - handler=handler, - enable_file_attach=True, - file_accept_types=[".csv"], - ) - mgr.bind(widget) - - mgr._on_user_message( - { - "text": "analyze", - "attachments": [ - {"type": "file", "name": "data.csv", "content": "x,y\n1,2"}, - ], - }, - "chat:user-message", - "", - ) - time.sleep(0.5) - - assert received["results"] == ["x,y\n1,2"] + assert len(bound_manager.threads[tid]) == 0 diff --git a/pywry/tests/test_chat_protocol.py b/pywry/tests/test_chat_protocol.py new file mode 100644 index 0000000..f18c663 --- /dev/null +++ b/pywry/tests/test_chat_protocol.py @@ -0,0 +1,745 @@ +"""Protocol integration tests for the ACP chat system. + +These tests verify that the protocol actually works end-to-end: +- Providers yield SessionUpdate objects that ChatManager dispatches correctly +- ACP wire format serialization produces the correct camelCase JSON +- Tool call lifecycle transitions produce correct event sequences +- TradingView artifacts dispatch with the right payload structure +- RBAC permission checks block or allow operations correctly +- Cancel signals propagate from the user through to the provider +- Plan updates produce structured frontend events +""" + +from __future__ import annotations + +import asyncio +import time + +from typing import Any +from unittest.mock import MagicMock + +import pytest + +from pywry.chat.artifacts import ( + CodeArtifact, + TradingViewArtifact, + TradingViewSeries, +) +from pywry.chat.manager import ChatContext, ChatManager, SettingsItem +from pywry.chat.models import ( + ACPToolCall, + AudioPart, + ChatMessage, + EmbeddedResource, + EmbeddedResourcePart, + ImagePart, + ResourceLinkPart, + TextPart, +) +from pywry.chat.permissions import ACP_PERMISSION_MAP, check_acp_permission +from pywry.chat.session import ( + AgentCapabilities, + ClientCapabilities, + PermissionRequest, + PlanEntry, + PromptCapabilities, + SessionConfigOption, + SessionMode, +) +from pywry.chat.updates import ( + AgentMessageUpdate, + ArtifactUpdate, + CitationUpdate, + CommandsUpdate, + ConfigOptionUpdate, + ModeUpdate, + PermissionRequestUpdate, + PlanUpdate, + StatusUpdate, + ThinkingUpdate, + ToolCallUpdate, +) + + +class FakeWidget: + def __init__(self) -> None: + self.events: list[tuple[str, dict]] = [] + + def emit(self, event_type: str, data: dict[str, Any]) -> None: + self.events.append((event_type, data)) + + def emit_fire(self, event_type: str, data: dict[str, Any]) -> None: + self.events.append((event_type, data)) + + def get_events(self, event_type: str) -> list[dict]: + return [d for e, d in self.events if e == event_type] + + +@pytest.fixture(autouse=True) +def _disable_stream_buffering(): + orig_interval = ChatManager._STREAM_FLUSH_INTERVAL + orig_max = ChatManager._STREAM_MAX_BUFFER + ChatManager._STREAM_FLUSH_INTERVAL = 0 + ChatManager._STREAM_MAX_BUFFER = 1 + yield + ChatManager._STREAM_FLUSH_INTERVAL = orig_interval + ChatManager._STREAM_MAX_BUFFER = orig_max + + +class TestACPWireFormat: + """Verify models serialize to camelCase JSON matching the ACP spec.""" + + def test_image_part_serializes_mime_type_as_camel(self): + part = ImagePart(data="abc", mime_type="image/jpeg") + dumped = part.model_dump(by_alias=True) + assert "mimeType" in dumped + assert dumped["mimeType"] == "image/jpeg" + assert "mime_type" not in dumped + + def test_audio_part_serializes_mime_type_as_camel(self): + part = AudioPart(data="abc", mime_type="audio/mp3") + dumped = part.model_dump(by_alias=True) + assert dumped["mimeType"] == "audio/mp3" + + def test_resource_link_serializes_mime_type_as_camel(self): + part = ResourceLinkPart(uri="file:///a.txt", name="a", mime_type="text/plain") + dumped = part.model_dump(by_alias=True) + assert dumped["mimeType"] == "text/plain" + + def test_embedded_resource_serializes_mime_type_as_camel(self): + res = EmbeddedResource(uri="file:///b.txt", mime_type="text/csv") + dumped = res.model_dump(by_alias=True) + assert dumped["mimeType"] == "text/csv" + + def test_tool_call_serializes_id_as_camel(self): + tc = ACPToolCall(tool_call_id="call_1", name="search", kind="fetch") + dumped = tc.model_dump(by_alias=True) + assert "toolCallId" in dumped + assert dumped["toolCallId"] == "call_1" + assert "tool_call_id" not in dumped + + def test_agent_message_update_serializes_discriminator(self): + u = AgentMessageUpdate(text="hello") + dumped = u.model_dump(by_alias=True) + assert dumped["sessionUpdate"] == "agent_message" + + def test_tool_call_update_serializes_all_camel_fields(self): + u = ToolCallUpdate(tool_call_id="c1", name="read", kind="read", status="completed") + dumped = u.model_dump(by_alias=True) + assert dumped["sessionUpdate"] == "tool_call" + assert dumped["toolCallId"] == "c1" + + def test_mode_update_serializes_camel_fields(self): + u = ModeUpdate( + current_mode_id="code", + available_modes=[SessionMode(id="code", name="Code")], + ) + dumped = u.model_dump(by_alias=True) + assert dumped["currentModeId"] == "code" + assert dumped["availableModes"][0]["id"] == "code" + + def test_permission_request_serializes_camel(self): + req = PermissionRequest(tool_call_id="c1", title="Run command") + dumped = req.model_dump(by_alias=True) + assert dumped["toolCallId"] == "c1" + + def test_session_config_option_serializes_camel(self): + opt = SessionConfigOption(id="model", name="Model", current_value="gpt-4") + dumped = opt.model_dump(by_alias=True) + assert dumped["currentValue"] == "gpt-4" + + def test_client_capabilities_serializes_camel(self): + caps = ClientCapabilities(file_system=True, terminal=False) + dumped = caps.model_dump(by_alias=True) + assert dumped["fileSystem"] is True + + def test_agent_capabilities_serializes_camel(self): + caps = AgentCapabilities( + prompt_capabilities=PromptCapabilities(image=True, embedded_context=True), + load_session=True, + config_options=False, + ) + dumped = caps.model_dump(by_alias=True) + assert dumped["loadSession"] is True + assert dumped["promptCapabilities"]["embeddedContext"] is True + + def test_snake_case_constructor_works(self): + part = ImagePart(data="x", mime_type="image/png") + assert part.mime_type == "image/png" + + def test_camel_case_constructor_works(self): + part = ImagePart(data="x", mimeType="image/png") + assert part.mime_type == "image/png" + + def test_chat_message_with_tool_calls_round_trips(self): + msg = ChatMessage( + role="assistant", + content="calling tool", + tool_calls=[ACPToolCall(tool_call_id="c1", name="search", kind="fetch")], + ) + dumped = msg.model_dump(by_alias=True) + assert dumped["tool_calls"][0]["toolCallId"] == "c1" + restored = ChatMessage.model_validate(dumped) + assert restored.tool_calls[0].tool_call_id == "c1" + + +class TestCallbackProviderRoundTrip: + """Verify CallbackProvider yields SessionUpdate objects that can be consumed.""" + + def test_string_callback_yields_agent_message(self): + from pywry.chat.providers.callback import CallbackProvider + + def my_prompt(session_id, content, cancel_event): + yield "hello " + yield "world" + + provider = CallbackProvider(prompt_fn=my_prompt) + updates = [] + + async def collect(): + caps = await provider.initialize(ClientCapabilities()) + sid = await provider.new_session("/tmp") + async for u in provider.prompt(sid, [TextPart(text="hi")]): + updates.append(u) + + asyncio.run(collect()) + assert len(updates) == 2 + assert all(isinstance(u, AgentMessageUpdate) for u in updates) + assert updates[0].text == "hello " + assert updates[1].text == "world" + + def test_session_update_objects_pass_through(self): + from pywry.chat.providers.callback import CallbackProvider + + def my_prompt(session_id, content, cancel_event): + yield StatusUpdate(text="searching...") + yield AgentMessageUpdate(text="found it") + yield ToolCallUpdate(tool_call_id="c1", name="search", status="completed") + + provider = CallbackProvider(prompt_fn=my_prompt) + updates = [] + + async def collect(): + await provider.initialize(ClientCapabilities()) + sid = await provider.new_session("/tmp") + async for u in provider.prompt(sid, [TextPart(text="find x")]): + updates.append(u) + + asyncio.run(collect()) + assert isinstance(updates[0], StatusUpdate) + assert isinstance(updates[1], AgentMessageUpdate) + assert isinstance(updates[2], ToolCallUpdate) + assert updates[2].tool_call_id == "c1" + + def test_no_callback_yields_fallback(self): + from pywry.chat.providers.callback import CallbackProvider + + provider = CallbackProvider() + updates = [] + + async def collect(): + await provider.initialize(ClientCapabilities()) + sid = await provider.new_session("/tmp") + async for u in provider.prompt(sid, [TextPart(text="hi")]): + updates.append(u) + + asyncio.run(collect()) + assert len(updates) == 1 + assert "No prompt callback" in updates[0].text + + +class TestChatManagerProviderIntegration: + """Verify ChatManager dispatches provider SessionUpdates to the correct frontend events.""" + + def test_agent_message_produces_stream_chunks(self): + def my_prompt(session_id, content, cancel_event): + yield AgentMessageUpdate(text="hello ") + yield AgentMessageUpdate(text="world") + + from pywry.chat.providers.callback import CallbackProvider + + provider = CallbackProvider(prompt_fn=my_prompt) + widget = FakeWidget() + mgr = ChatManager(provider=provider) + mgr.bind(widget) + mgr._session_id = "test" + mgr._on_user_message( + {"text": "hi", "threadId": mgr.active_thread_id}, + "chat:user-message", + "", + ) + time.sleep(0.5) + chunks = widget.get_events("chat:stream-chunk") + text_chunks = [c["chunk"] for c in chunks if c.get("chunk")] + assert "hello " in text_chunks + assert "world" in text_chunks + + def test_tool_call_update_produces_tool_call_event(self): + def my_prompt(session_id, content, cancel_event): + yield ToolCallUpdate( + tool_call_id="c1", + name="search", + kind="fetch", + status="in_progress", + ) + yield ToolCallUpdate( + tool_call_id="c1", + name="search", + kind="fetch", + status="completed", + ) + yield AgentMessageUpdate(text="done") + + from pywry.chat.providers.callback import CallbackProvider + + provider = CallbackProvider(prompt_fn=my_prompt) + widget = FakeWidget() + mgr = ChatManager(provider=provider) + mgr.bind(widget) + mgr._session_id = "test" + mgr._on_user_message( + {"text": "search", "threadId": mgr.active_thread_id}, + "chat:user-message", + "", + ) + time.sleep(0.5) + tool_events = widget.get_events("chat:tool-call") + assert len(tool_events) == 2 + assert tool_events[0]["status"] == "in_progress" + assert tool_events[1]["status"] == "completed" + assert tool_events[0]["toolCallId"] == "c1" + + def test_plan_update_produces_plan_event(self): + def my_prompt(session_id, content, cancel_event): + yield PlanUpdate( + entries=[ + PlanEntry(content="step 1", priority="high", status="completed"), + PlanEntry(content="step 2", priority="medium", status="in_progress"), + ] + ) + yield AgentMessageUpdate(text="working") + + from pywry.chat.providers.callback import CallbackProvider + + provider = CallbackProvider(prompt_fn=my_prompt) + widget = FakeWidget() + mgr = ChatManager(provider=provider) + mgr.bind(widget) + mgr._session_id = "test" + mgr._on_user_message( + {"text": "plan", "threadId": mgr.active_thread_id}, + "chat:user-message", + "", + ) + time.sleep(0.5) + plan_events = widget.get_events("chat:plan-update") + assert len(plan_events) >= 1 + entries = plan_events[0]["entries"] + assert len(entries) == 2 + assert entries[0]["content"] == "step 1" + assert entries[0]["status"] == "completed" + assert entries[1]["priority"] == "medium" + + def test_status_and_thinking_produce_correct_events(self): + def my_prompt(session_id, content, cancel_event): + yield StatusUpdate(text="loading...") + yield ThinkingUpdate(text="considering options\n") + yield AgentMessageUpdate(text="answer") + + from pywry.chat.providers.callback import CallbackProvider + + provider = CallbackProvider(prompt_fn=my_prompt) + widget = FakeWidget() + mgr = ChatManager(provider=provider) + mgr.bind(widget) + mgr._session_id = "test" + mgr._on_user_message( + {"text": "go", "threadId": mgr.active_thread_id}, + "chat:user-message", + "", + ) + time.sleep(0.5) + status = widget.get_events("chat:status-update") + thinking = widget.get_events("chat:thinking-chunk") + assert any(s["text"] == "loading..." for s in status) + assert any(t["text"] == "considering options\n" for t in thinking) + + def test_permission_request_produces_permission_event(self): + def my_prompt(session_id, content, cancel_event): + yield PermissionRequestUpdate( + tool_call_id="c1", + title="Delete file", + request_id="perm_1", + ) + yield AgentMessageUpdate(text="waiting for approval") + + from pywry.chat.providers.callback import CallbackProvider + + provider = CallbackProvider(prompt_fn=my_prompt) + widget = FakeWidget() + mgr = ChatManager(provider=provider) + mgr.bind(widget) + mgr._session_id = "test" + mgr._on_user_message( + {"text": "delete", "threadId": mgr.active_thread_id}, + "chat:user-message", + "", + ) + time.sleep(0.5) + perms = widget.get_events("chat:permission-request") + assert len(perms) >= 1 + assert perms[0]["toolCallId"] == "c1" + assert perms[0]["title"] == "Delete file" + assert perms[0]["requestId"] == "perm_1" + + +class TestToolCallLifecycle: + """Verify tool calls transition through the correct status sequence.""" + + def test_pending_to_completed(self): + def my_prompt(session_id, content, cancel_event): + yield ToolCallUpdate(tool_call_id="c1", name="read_file", kind="read", status="pending") + yield ToolCallUpdate( + tool_call_id="c1", name="read_file", kind="read", status="in_progress" + ) + yield ToolCallUpdate( + tool_call_id="c1", name="read_file", kind="read", status="completed" + ) + yield AgentMessageUpdate(text="file contents here") + + from pywry.chat.providers.callback import CallbackProvider + + provider = CallbackProvider(prompt_fn=my_prompt) + widget = FakeWidget() + mgr = ChatManager(provider=provider) + mgr.bind(widget) + mgr._session_id = "test" + mgr._on_user_message( + {"text": "read", "threadId": mgr.active_thread_id}, + "chat:user-message", + "", + ) + time.sleep(0.5) + tool_events = widget.get_events("chat:tool-call") + statuses = [e["status"] for e in tool_events] + assert statuses == ["pending", "in_progress", "completed"] + assert all(e["toolCallId"] == "c1" for e in tool_events) + assert all(e["kind"] == "read" for e in tool_events) + + def test_failed_status(self): + def my_prompt(session_id, content, cancel_event): + yield ToolCallUpdate(tool_call_id="c2", name="exec", kind="execute", status="pending") + yield ToolCallUpdate(tool_call_id="c2", name="exec", kind="execute", status="failed") + yield AgentMessageUpdate(text="command failed") + + from pywry.chat.providers.callback import CallbackProvider + + provider = CallbackProvider(prompt_fn=my_prompt) + widget = FakeWidget() + mgr = ChatManager(provider=provider) + mgr.bind(widget) + mgr._session_id = "test" + mgr._on_user_message( + {"text": "exec", "threadId": mgr.active_thread_id}, + "chat:user-message", + "", + ) + time.sleep(0.5) + tool_events = widget.get_events("chat:tool-call") + assert tool_events[-1]["status"] == "failed" + + +class TestTradingViewArtifactDispatch: + """Verify TradingViewArtifact produces the correct event payload.""" + + def test_dispatch_produces_artifact_event_with_series(self): + def my_prompt(session_id, content, cancel_event): + yield ArtifactUpdate( + artifact=TradingViewArtifact( + title="AAPL", + series=[ + TradingViewSeries( + type="candlestick", + data=[ + { + "time": "2024-01-02", + "open": 185, + "high": 186, + "low": 184, + "close": 185, + } + ], + ), + TradingViewSeries( + type="line", + data=[{"time": "2024-01-02", "value": 185}], + options={"color": "#ff0000"}, + ), + ], + options={"timeScale": {"timeVisible": True}}, + height="500px", + ) + ) + + from pywry.chat.providers.callback import CallbackProvider + + provider = CallbackProvider(prompt_fn=my_prompt) + widget = FakeWidget() + mgr = ChatManager(provider=provider) + mgr.bind(widget) + mgr._session_id = "test" + mgr._on_user_message( + {"text": "chart", "threadId": mgr.active_thread_id}, + "chat:user-message", + "", + ) + time.sleep(0.5) + artifacts = widget.get_events("chat:artifact") + assert len(artifacts) >= 1 + a = artifacts[0] + assert a["artifactType"] == "tradingview" + assert a["title"] == "AAPL" + assert a["height"] == "500px" + assert len(a["series"]) == 2 + assert a["series"][0]["type"] == "candlestick" + assert a["series"][1]["options"]["color"] == "#ff0000" + assert a["options"]["timeScale"]["timeVisible"] is True + + def test_code_artifact_dispatch(self): + def my_prompt(session_id, content, cancel_event): + yield ArtifactUpdate( + artifact=CodeArtifact( + title="main.py", + language="python", + content="x = 42", + ) + ) + + from pywry.chat.providers.callback import CallbackProvider + + provider = CallbackProvider(prompt_fn=my_prompt) + widget = FakeWidget() + mgr = ChatManager(provider=provider) + mgr.bind(widget) + mgr._session_id = "test" + mgr._on_user_message( + {"text": "code", "threadId": mgr.active_thread_id}, + "chat:user-message", + "", + ) + time.sleep(0.5) + artifacts = widget.get_events("chat:artifact") + assert len(artifacts) >= 1 + assert artifacts[0]["artifactType"] == "code" + assert artifacts[0]["language"] == "python" + assert artifacts[0]["content"] == "x = 42" + + +class TestRBACPermissions: + """Verify permission checks block or allow operations correctly.""" + + def test_permission_map_covers_all_operations(self): + required_ops = [ + "session/new", + "session/load", + "session/prompt", + "session/cancel", + "session/set_config_option", + "session/set_mode", + "session/request_permission", + "fs/read_text_file", + "fs/write_text_file", + "terminal/create", + "terminal/kill", + ] + for op in required_ops: + assert op in ACP_PERMISSION_MAP, f"{op} missing from permission map" + + def test_prompt_requires_write(self): + assert ACP_PERMISSION_MAP["session/prompt"] == "write" + + def test_file_write_requires_admin(self): + assert ACP_PERMISSION_MAP["fs/write_text_file"] == "admin" + + def test_file_read_requires_read(self): + assert ACP_PERMISSION_MAP["fs/read_text_file"] == "read" + + def test_terminal_requires_admin(self): + assert ACP_PERMISSION_MAP["terminal/create"] == "admin" + + @pytest.mark.asyncio + async def test_no_session_allows_everything(self): + result = await check_acp_permission(None, "w1", "session/prompt", None) + assert result is True + + @pytest.mark.asyncio + async def test_no_session_allows_admin_ops(self): + result = await check_acp_permission(None, "w1", "fs/write_text_file", None) + assert result is True + + @pytest.mark.asyncio + async def test_unknown_operation_defaults_to_admin(self): + assert ACP_PERMISSION_MAP.get("unknown/op") is None + result = await check_acp_permission(None, "w1", "unknown/op", None) + assert result is True + + +class TestCancelPropagation: + """Verify cancel signal reaches the provider through ChatManager.""" + + def test_cancel_stops_generation(self): + chunks_yielded = [] + + def my_prompt(session_id, content, cancel_event): + for i in range(100): + if cancel_event and cancel_event.is_set(): + return + chunks_yielded.append(i) + yield AgentMessageUpdate(text=f"chunk{i} ") + time.sleep(0.01) + + from pywry.chat.providers.callback import CallbackProvider + + provider = CallbackProvider(prompt_fn=my_prompt) + widget = FakeWidget() + mgr = ChatManager(provider=provider) + mgr.bind(widget) + mgr._session_id = "test" + mgr._on_user_message( + {"text": "go", "threadId": mgr.active_thread_id}, + "chat:user-message", + "", + ) + time.sleep(0.05) + mgr._on_stop_generation( + {"threadId": mgr.active_thread_id}, + "chat:stop-generation", + "", + ) + time.sleep(0.5) + assert len(chunks_yielded) < 100 + done_chunks = [c for c in widget.get_events("chat:stream-chunk") if c.get("done")] + assert len(done_chunks) >= 1 + + +class TestLegacyHandlerWithNewUpdates: + """Verify legacy handler functions can yield new SessionUpdate types.""" + + def test_handler_yields_mixed_strings_and_updates(self): + def handler(messages, ctx): + yield "starting... " + yield StatusUpdate(text="processing") + yield PlanUpdate( + entries=[ + PlanEntry(content="task 1", priority="high", status="in_progress"), + ] + ) + yield "done" + + widget = FakeWidget() + mgr = ChatManager(handler=handler) + mgr.bind(widget) + mgr._on_user_message( + {"text": "go", "threadId": mgr.active_thread_id}, + "chat:user-message", + "", + ) + time.sleep(0.5) + chunks = widget.get_events("chat:stream-chunk") + status = widget.get_events("chat:status-update") + plan = widget.get_events("chat:plan-update") + text = "".join(c["chunk"] for c in chunks if c.get("chunk")) + assert "starting" in text + assert "done" in text + assert any(s["text"] == "processing" for s in status) + assert len(plan) >= 1 + assert plan[0]["entries"][0]["content"] == "task 1" + + +class TestCommandsAndConfigUpdates: + """Verify commands and config option updates dispatch correctly.""" + + def test_commands_update_registers_commands(self): + from pywry.chat.models import ACPCommand + + def my_prompt(session_id, content, cancel_event): + yield CommandsUpdate( + commands=[ + ACPCommand(name="test", description="Run tests"), + ACPCommand(name="deploy", description="Deploy app"), + ] + ) + yield AgentMessageUpdate(text="ready") + + from pywry.chat.providers.callback import CallbackProvider + + provider = CallbackProvider(prompt_fn=my_prompt) + widget = FakeWidget() + mgr = ChatManager(provider=provider) + mgr.bind(widget) + mgr._session_id = "test" + mgr._on_user_message( + {"text": "init", "threadId": mgr.active_thread_id}, + "chat:user-message", + "", + ) + time.sleep(0.5) + cmds = widget.get_events("chat:register-command") + names = [c["name"] for c in cmds] + assert "test" in names + assert "deploy" in names + + def test_config_option_update_dispatches(self): + def my_prompt(session_id, content, cancel_event): + yield ConfigOptionUpdate( + options=[ + SessionConfigOption(id="model", name="Model", current_value="gpt-4"), + ] + ) + yield AgentMessageUpdate(text="configured") + + from pywry.chat.providers.callback import CallbackProvider + + provider = CallbackProvider(prompt_fn=my_prompt) + widget = FakeWidget() + mgr = ChatManager(provider=provider) + mgr.bind(widget) + mgr._session_id = "test" + mgr._on_user_message( + {"text": "config", "threadId": mgr.active_thread_id}, + "chat:user-message", + "", + ) + time.sleep(0.5) + configs = widget.get_events("chat:config-update") + assert len(configs) >= 1 + assert configs[0]["options"][0]["id"] == "model" + + def test_mode_update_dispatches(self): + def my_prompt(session_id, content, cancel_event): + yield ModeUpdate( + current_mode_id="code", + available_modes=[ + SessionMode(id="ask", name="Ask"), + SessionMode(id="code", name="Code"), + ], + ) + yield AgentMessageUpdate(text="mode set") + + from pywry.chat.providers.callback import CallbackProvider + + provider = CallbackProvider(prompt_fn=my_prompt) + widget = FakeWidget() + mgr = ChatManager(provider=provider) + mgr.bind(widget) + mgr._session_id = "test" + mgr._on_user_message( + {"text": "mode", "threadId": mgr.active_thread_id}, + "chat:user-message", + "", + ) + time.sleep(0.5) + modes = widget.get_events("chat:mode-update") + assert len(modes) >= 1 + assert modes[0]["currentModeId"] == "code" + assert len(modes[0]["availableModes"]) == 2 diff --git a/pywry/tests/test_deepagent_provider.py b/pywry/tests/test_deepagent_provider.py new file mode 100644 index 0000000..0b55934 --- /dev/null +++ b/pywry/tests/test_deepagent_provider.py @@ -0,0 +1,234 @@ +"""Tests for the DeepAgentProvider. + +Uses a mock CompiledGraph that yields known astream_events +to verify the provider maps LangGraph events to ACP SessionUpdate types. +""" + +from __future__ import annotations + +import asyncio +import time + +from typing import Any +from unittest.mock import AsyncMock, MagicMock + +import pytest + +from pywry.chat.models import TextPart +from pywry.chat.providers.deepagent import DeepagentProvider, _map_tool_kind +from pywry.chat.session import ClientCapabilities, PlanEntry +from pywry.chat.updates import ( + AgentMessageUpdate, + PlanUpdate, + StatusUpdate, + ToolCallUpdate, +) + + +class FakeChunk: + def __init__(self, content: str = ""): + self.content = content + + +def make_event(event: str, name: str = "", data: dict | None = None, run_id: str = "r1"): + return {"event": event, "name": name, "data": data or {}, "run_id": run_id} + + +async def fake_stream_events(events: list[dict]): + for e in events: + yield e + + +class FakeAgent: + def __init__(self, events: list[dict]): + self._events = events + + def astream_events(self, input_data: dict, config: dict, version: str = "v2"): + return fake_stream_events(self._events) + + +class TestToolKindMapping: + def test_read_file(self): + assert _map_tool_kind("read_file") == "read" + + def test_write_file(self): + assert _map_tool_kind("write_file") == "edit" + + def test_execute(self): + assert _map_tool_kind("execute") == "execute" + + def test_write_todos(self): + assert _map_tool_kind("write_todos") == "think" + + def test_unknown_tool(self): + assert _map_tool_kind("my_custom_tool") == "other" + + +class TestDeepagentProviderConstruction: + def test_with_pre_built_agent(self): + agent = FakeAgent([]) + provider = DeepagentProvider(agent=agent) + assert provider._agent is agent + + def test_without_agent_stores_params(self): + provider = DeepagentProvider(model="openai:gpt-4o", system_prompt="be helpful") + assert provider._agent is None + assert provider._model == "openai:gpt-4o" + + +class TestDeepagentProviderInitialize: + @pytest.mark.asyncio + async def test_initialize_returns_capabilities(self): + agent = FakeAgent([]) + provider = DeepagentProvider(agent=agent, auto_checkpointer=False) + caps = await provider.initialize(ClientCapabilities()) + assert caps.prompt_capabilities is not None + assert caps.prompt_capabilities.image is True + + @pytest.mark.asyncio + async def test_initialize_with_checkpointer_enables_load(self): + from langgraph.checkpoint.memory import MemorySaver + + agent = FakeAgent([]) + provider = DeepagentProvider( + agent=agent, checkpointer=MemorySaver(), auto_checkpointer=False + ) + caps = await provider.initialize(ClientCapabilities()) + assert caps.load_session is True + + @pytest.mark.asyncio + async def test_initialize_without_checkpointer_disables_load(self): + agent = FakeAgent([]) + provider = DeepagentProvider(agent=agent, auto_checkpointer=False) + caps = await provider.initialize(ClientCapabilities()) + assert caps.load_session is False + + +class TestDeepagentProviderSessions: + @pytest.mark.asyncio + async def test_new_session_returns_id(self): + agent = FakeAgent([]) + provider = DeepagentProvider(agent=agent, auto_checkpointer=False) + await provider.initialize(ClientCapabilities()) + sid = await provider.new_session("/tmp") + assert sid.startswith("da_") + + @pytest.mark.asyncio + async def test_load_nonexistent_session_raises(self): + agent = FakeAgent([]) + provider = DeepagentProvider(agent=agent, auto_checkpointer=False) + await provider.initialize(ClientCapabilities()) + with pytest.raises(ValueError, match="not found"): + await provider.load_session("nonexistent", "/tmp") + + +class TestDeepagentProviderStreaming: + @pytest.mark.asyncio + async def test_text_chunks(self): + events = [ + make_event("on_chat_model_stream", data={"chunk": FakeChunk("hello ")}), + make_event("on_chat_model_stream", data={"chunk": FakeChunk("world")}), + ] + agent = FakeAgent(events) + provider = DeepagentProvider(agent=agent, auto_checkpointer=False) + await provider.initialize(ClientCapabilities()) + sid = await provider.new_session("/tmp") + + updates = [] + async for u in provider.prompt(sid, [TextPart(text="hi")]): + updates.append(u) + + assert len(updates) == 2 + assert all(isinstance(u, AgentMessageUpdate) for u in updates) + assert updates[0].text == "hello " + assert updates[1].text == "world" + + @pytest.mark.asyncio + async def test_tool_call_lifecycle(self): + events = [ + make_event("on_tool_start", name="read_file", run_id="tc1"), + make_event("on_tool_end", name="read_file", run_id="tc1", data={"output": "contents"}), + ] + agent = FakeAgent(events) + provider = DeepagentProvider(agent=agent, auto_checkpointer=False) + await provider.initialize(ClientCapabilities()) + sid = await provider.new_session("/tmp") + + updates = [] + async for u in provider.prompt(sid, [TextPart(text="read")]): + updates.append(u) + + assert len(updates) == 2 + assert isinstance(updates[0], ToolCallUpdate) + assert updates[0].status == "in_progress" + assert updates[0].kind == "read" + assert isinstance(updates[1], ToolCallUpdate) + assert updates[1].status == "completed" + + @pytest.mark.asyncio + async def test_tool_error(self): + events = [ + make_event("on_tool_start", name="execute", run_id="tc2"), + make_event("on_tool_error", name="execute", run_id="tc2"), + ] + agent = FakeAgent(events) + provider = DeepagentProvider(agent=agent, auto_checkpointer=False) + await provider.initialize(ClientCapabilities()) + sid = await provider.new_session("/tmp") + + updates = [] + async for u in provider.prompt(sid, [TextPart(text="run")]): + updates.append(u) + + assert updates[-1].status == "failed" + + @pytest.mark.asyncio + async def test_write_todos_produces_plan_update(self): + import json + + todos = [ + {"title": "Read docs", "status": "done"}, + {"title": "Write code", "status": "in_progress"}, + ] + events = [ + make_event("on_tool_start", name="write_todos", run_id="tc3"), + make_event("on_tool_end", name="write_todos", run_id="tc3", + data={"output": json.dumps(todos)}), + ] + agent = FakeAgent(events) + provider = DeepagentProvider(agent=agent, auto_checkpointer=False) + await provider.initialize(ClientCapabilities()) + sid = await provider.new_session("/tmp") + + updates = [] + async for u in provider.prompt(sid, [TextPart(text="plan")]): + updates.append(u) + + plan_updates = [u for u in updates if isinstance(u, PlanUpdate)] + assert len(plan_updates) == 1 + assert len(plan_updates[0].entries) == 2 + assert plan_updates[0].entries[0].content == "Read docs" + assert plan_updates[0].entries[0].status == "completed" + assert plan_updates[0].entries[1].status == "in_progress" + + @pytest.mark.asyncio + async def test_cancel_stops_streaming(self): + events = [ + make_event("on_chat_model_stream", data={"chunk": FakeChunk(f"chunk{i}")}) + for i in range(100) + ] + agent = FakeAgent(events) + provider = DeepagentProvider(agent=agent, auto_checkpointer=False) + await provider.initialize(ClientCapabilities()) + sid = await provider.new_session("/tmp") + + cancel = asyncio.Event() + updates = [] + count = 0 + async for u in provider.prompt(sid, [TextPart(text="go")], cancel_event=cancel): + updates.append(u) + count += 1 + if count == 3: + cancel.set() + + assert len(updates) < 100 diff --git a/pywry/tests/test_scripts.py b/pywry/tests/test_scripts.py index f445060..aa42f4c 100644 --- a/pywry/tests/test_scripts.py +++ b/pywry/tests/test_scripts.py @@ -1,164 +1,102 @@ """Tests for JavaScript bridge scripts. -Tests the PyWry JavaScript bridge and event system scripts. +Tests the PyWry JavaScript bridge and event system scripts, +which are now loaded from frontend/src/ files. """ -from pywry.scripts import PYWRY_BRIDGE_JS, build_init_script +from pywry.scripts import _get_bridge_js, build_init_script -class TestPywryBridgeJs: - """Tests for PYWRY_BRIDGE_JS constant.""" +class TestBridgeJs: + """Tests for the bridge JS loaded from frontend/src/bridge.js.""" def test_defines_window_pywry(self): - """Defines window.pywry object.""" - assert "window.pywry" in PYWRY_BRIDGE_JS + js = _get_bridge_js() + assert "window.pywry" in js def test_defines_result_function(self): - """Defines result function.""" - assert "result" in PYWRY_BRIDGE_JS + js = _get_bridge_js() + assert "result" in js def test_defines_emit_function(self): - """Defines emit function.""" - assert "emit" in PYWRY_BRIDGE_JS + js = _get_bridge_js() + assert "emit" in js def test_defines_on_function(self): - """Defines on function for event handling.""" - assert ".on" in PYWRY_BRIDGE_JS + js = _get_bridge_js() + assert ".on" in js def test_defines_off_function(self): - """Defines off function for event handling.""" - assert ".off" in PYWRY_BRIDGE_JS + js = _get_bridge_js() + assert ".off" in js def test_defines_dispatch_function(self): - """Defines dispatch function.""" - assert "dispatch" in PYWRY_BRIDGE_JS + js = _get_bridge_js() + assert "dispatch" in js def test_is_string(self): - """Bridge JS is a string.""" - assert isinstance(PYWRY_BRIDGE_JS, str) + js = _get_bridge_js() + assert isinstance(js, str) def test_is_not_empty(self): - """Bridge JS is not empty.""" - assert len(PYWRY_BRIDGE_JS) > 0 + js = _get_bridge_js() + assert len(js) > 0 + + def test_uses_strict_mode(self): + js = _get_bridge_js() + assert "'use strict'" in js + + def test_uses_iife(self): + js = _get_bridge_js() + assert "(function()" in js + + def test_handles_json_payload(self): + js = _get_bridge_js() + assert "payload" in js + + def test_checks_for_tauri(self): + js = _get_bridge_js() + assert "__TAURI__" in js + + def test_uses_pytauri_invoke(self): + js = _get_bridge_js() + assert "pytauri" in js + assert "pyInvoke" in js + + def test_open_file_function(self): + js = _get_bridge_js() + assert "openFile" in js + + def test_wildcard_handlers_supported(self): + js = _get_bridge_js() + assert "'*'" in js class TestBuildInitScript: """Tests for build_init_script function.""" def test_returns_string(self): - """Returns a string.""" script = build_init_script(window_label="main") assert isinstance(script, str) def test_includes_window_label(self): - """Includes window label.""" script = build_init_script(window_label="test-window") assert "test-window" in script def test_includes_pywry_bridge(self): - """Includes pywry bridge code.""" script = build_init_script(window_label="main") assert "pywry" in script def test_different_labels_produce_different_scripts(self): - """Different labels produce different scripts.""" script1 = build_init_script(window_label="window-1") script2 = build_init_script(window_label="window-2") assert "window-1" in script1 assert "window-2" in script2 + def test_hot_reload_included_when_enabled(self): + script = build_init_script(window_label="main", enable_hot_reload=True) + assert "Hot reload" in script or "saveScrollPosition" in script -class TestBridgeJsStructure: - """Tests for bridge JS structure and content.""" - - def test_uses_strict_mode(self): - """Uses strict mode.""" - assert "'use strict'" in PYWRY_BRIDGE_JS or '"use strict"' in PYWRY_BRIDGE_JS - - def test_uses_iife(self): - """Uses IIFE pattern.""" - assert "(function()" in PYWRY_BRIDGE_JS - - def test_handles_json_payload(self): - """Handles JSON payload structure.""" - # Should create payload objects - assert "payload" in PYWRY_BRIDGE_JS - - -class TestBridgeJsResultFunction: - """Tests for result function in bridge JS.""" - - def test_result_sends_data(self): - """Result function sends data field.""" - assert "data:" in PYWRY_BRIDGE_JS or "data :" in PYWRY_BRIDGE_JS - - def test_result_sends_window_label(self): - """Result function sends window_label field.""" - assert "window_label" in PYWRY_BRIDGE_JS - - -class TestBridgeJsEmitFunction: - """Tests for emit function in bridge JS.""" - - def test_emit_validates_event_type(self): - """Emit function validates event type.""" - # Should have regex validation - assert "Invalid" in PYWRY_BRIDGE_JS - - def test_emit_sends_event_type(self): - """Emit function sends event_type field.""" - assert "event_type" in PYWRY_BRIDGE_JS - - def test_emit_sends_label(self): - """Emit function sends label field.""" - # Uses label for emit - assert "label:" in PYWRY_BRIDGE_JS or "label :" in PYWRY_BRIDGE_JS - - -class TestBridgeJsEventHandlers: - """Tests for event handler functions in bridge JS.""" - - def test_on_creates_handlers_array(self): - """On function creates handlers array.""" - assert "_handlers" in PYWRY_BRIDGE_JS - - def test_trigger_calls_handlers(self): - """Trigger function calls handlers.""" - assert "_trigger" in PYWRY_BRIDGE_JS or "trigger" in PYWRY_BRIDGE_JS - - def test_wildcard_handlers_supported(self): - """Wildcard handlers are supported.""" - assert "'*'" in PYWRY_BRIDGE_JS or '"*"' in PYWRY_BRIDGE_JS - - -class TestBridgeJsTauriIntegration: - """Tests for Tauri integration in bridge JS.""" - - def test_checks_for_tauri(self): - """Checks for __TAURI__ object.""" - assert "__TAURI__" in PYWRY_BRIDGE_JS - - def test_uses_pytauri_invoke(self): - """Uses pytauri.pyInvoke for IPC.""" - assert "pytauri" in PYWRY_BRIDGE_JS - assert "pyInvoke" in PYWRY_BRIDGE_JS - - def test_invokes_pywry_result(self): - """Invokes pywry_result command.""" - assert "pywry_result" in PYWRY_BRIDGE_JS - - def test_invokes_pywry_event(self): - """Invokes pywry_event command.""" - assert "pywry_event" in PYWRY_BRIDGE_JS - - -class TestBridgeJsHelperFunctions: - """Tests for helper functions in bridge JS.""" - - def test_open_file_function(self): - """openFile function exists.""" - assert "openFile" in PYWRY_BRIDGE_JS - - def test_devtools_function(self): - """devtools function exists.""" - assert "devtools" in PYWRY_BRIDGE_JS + def test_hot_reload_excluded_when_disabled(self): + script = build_init_script(window_label="main", enable_hot_reload=False) + assert "saveScrollPosition" not in script diff --git a/pywry/tests/test_state_sqlite.py b/pywry/tests/test_state_sqlite.py new file mode 100644 index 0000000..ccdd8ca --- /dev/null +++ b/pywry/tests/test_state_sqlite.py @@ -0,0 +1,373 @@ +"""Tests for the SQLite state backend. + +Covers ChatStore CRUD, audit trail, session management, RBAC, +encryption, auto-setup, and interchangeability with MemoryChatStore. +""" + +from __future__ import annotations + +import asyncio +import tempfile +import time + +from pathlib import Path +from typing import Any + +import pytest + +from pywry.chat.models import ChatMessage, ChatThread +from pywry.state.sqlite import ( + SqliteChatStore, + SqliteConnectionRouter, + SqliteEventBus, + SqliteSessionStore, + SqliteWidgetStore, +) + + +@pytest.fixture +def db_path(tmp_path): + return str(tmp_path / "test.db") + + +@pytest.fixture +def chat_store(db_path): + return SqliteChatStore(db_path=db_path, encrypted=False) + + +@pytest.fixture +def session_store(db_path): + return SqliteSessionStore(db_path=db_path, encrypted=False) + + +@pytest.fixture +def widget_store(db_path): + return SqliteWidgetStore(db_path=db_path, encrypted=False) + + +class TestSqliteChatStoreCRUD: + @pytest.mark.asyncio + async def test_save_and_get_thread(self, chat_store): + thread = ChatThread(thread_id="t1", title="Test Thread") + await chat_store.save_thread("w1", thread) + result = await chat_store.get_thread("w1", "t1") + assert result is not None + assert result.thread_id == "t1" + assert result.title == "Test Thread" + + @pytest.mark.asyncio + async def test_list_threads(self, chat_store): + await chat_store.save_thread("w1", ChatThread(thread_id="t1", title="A")) + await chat_store.save_thread("w1", ChatThread(thread_id="t2", title="B")) + threads = await chat_store.list_threads("w1") + assert len(threads) == 2 + + @pytest.mark.asyncio + async def test_delete_thread(self, chat_store): + await chat_store.save_thread("w1", ChatThread(thread_id="t1", title="A")) + deleted = await chat_store.delete_thread("w1", "t1") + assert deleted is True + result = await chat_store.get_thread("w1", "t1") + assert result is None + + @pytest.mark.asyncio + async def test_append_and_get_messages(self, chat_store): + await chat_store.save_thread("w1", ChatThread(thread_id="t1", title="A")) + msg = ChatMessage(role="user", content="hello", message_id="m1") + await chat_store.append_message("w1", "t1", msg) + messages = await chat_store.get_messages("w1", "t1") + assert len(messages) == 1 + assert messages[0].text_content() == "hello" + + @pytest.mark.asyncio + async def test_clear_messages(self, chat_store): + await chat_store.save_thread("w1", ChatThread(thread_id="t1", title="A")) + await chat_store.append_message("w1", "t1", ChatMessage(role="user", content="x")) + await chat_store.clear_messages("w1", "t1") + messages = await chat_store.get_messages("w1", "t1") + assert len(messages) == 0 + + @pytest.mark.asyncio + async def test_get_nonexistent_thread(self, chat_store): + result = await chat_store.get_thread("w1", "nonexistent") + assert result is None + + @pytest.mark.asyncio + async def test_widget_isolation(self, chat_store): + await chat_store.save_thread("w1", ChatThread(thread_id="t1", title="W1")) + await chat_store.save_thread("w2", ChatThread(thread_id="t2", title="W2")) + w1_threads = await chat_store.list_threads("w1") + w2_threads = await chat_store.list_threads("w2") + assert len(w1_threads) == 1 + assert len(w2_threads) == 1 + assert w1_threads[0].title == "W1" + + @pytest.mark.asyncio + async def test_message_pagination(self, chat_store): + await chat_store.save_thread("w1", ChatThread(thread_id="t1", title="A")) + for i in range(10): + await chat_store.append_message( + "w1", "t1", + ChatMessage(role="user", content=f"msg{i}", message_id=f"m{i}"), + ) + messages = await chat_store.get_messages("w1", "t1", limit=3) + assert len(messages) == 3 + + @pytest.mark.asyncio + async def test_persistence_across_instances(self, db_path): + store1 = SqliteChatStore(db_path=db_path, encrypted=False) + await store1.save_thread("w1", ChatThread(thread_id="t1", title="Persistent")) + await store1.append_message( + "w1", "t1", ChatMessage(role="user", content="saved") + ) + + store2 = SqliteChatStore(db_path=db_path, encrypted=False) + thread = await store2.get_thread("w1", "t1") + assert thread is not None + assert thread.title == "Persistent" + messages = await store2.get_messages("w1", "t1") + assert len(messages) == 1 + assert messages[0].text_content() == "saved" + + +class TestSqliteAuditTrail: + @pytest.mark.asyncio + async def test_log_and_get_tool_calls(self, chat_store): + await chat_store.save_thread("w1", ChatThread(thread_id="t1", title="A")) + await chat_store.append_message( + "w1", "t1", ChatMessage(role="assistant", content="ok", message_id="m1") + ) + await chat_store.log_tool_call( + message_id="m1", + tool_call_id="tc1", + name="read_file", + kind="read", + status="completed", + arguments={"path": "/tmp/test.txt"}, + result="file contents here", + ) + calls = await chat_store.get_tool_calls("m1") + assert len(calls) == 1 + assert calls[0]["name"] == "read_file" + assert calls[0]["status"] == "completed" + + @pytest.mark.asyncio + async def test_log_and_get_artifacts(self, chat_store): + await chat_store.save_thread("w1", ChatThread(thread_id="t1", title="A")) + await chat_store.append_message( + "w1", "t1", ChatMessage(role="assistant", content="ok", message_id="m1") + ) + await chat_store.log_artifact( + message_id="m1", + artifact_type="code", + title="main.py", + content="x = 42", + ) + artifacts = await chat_store.get_artifacts("m1") + assert len(artifacts) == 1 + assert artifacts[0]["artifact_type"] == "code" + assert artifacts[0]["title"] == "main.py" + + @pytest.mark.asyncio + async def test_log_token_usage_and_stats(self, chat_store): + await chat_store.save_thread("w1", ChatThread(thread_id="t1", title="A")) + await chat_store.append_message( + "w1", "t1", ChatMessage(role="assistant", content="ok", message_id="m1") + ) + await chat_store.log_token_usage( + message_id="m1", + model="gpt-4", + prompt_tokens=100, + completion_tokens=50, + total_tokens=150, + cost_usd=0.005, + ) + stats = await chat_store.get_usage_stats(thread_id="t1") + assert stats["prompt_tokens"] == 100 + assert stats["completion_tokens"] == 50 + assert stats["total_tokens"] == 150 + assert stats["cost_usd"] == 0.005 + + @pytest.mark.asyncio + async def test_total_cost(self, chat_store): + await chat_store.save_thread("w1", ChatThread(thread_id="t1", title="A")) + await chat_store.append_message( + "w1", "t1", ChatMessage(role="assistant", content="a", message_id="m1") + ) + await chat_store.append_message( + "w1", "t1", ChatMessage(role="assistant", content="b", message_id="m2") + ) + await chat_store.log_token_usage(message_id="m1", cost_usd=0.01) + await chat_store.log_token_usage(message_id="m2", cost_usd=0.02) + cost = await chat_store.get_total_cost(thread_id="t1") + assert abs(cost - 0.03) < 0.001 + + @pytest.mark.asyncio + async def test_search_messages(self, chat_store): + await chat_store.save_thread("w1", ChatThread(thread_id="t1", title="A")) + await chat_store.append_message( + "w1", "t1", ChatMessage(role="user", content="find the fibonacci function") + ) + await chat_store.append_message( + "w1", "t1", ChatMessage(role="assistant", content="here is the code") + ) + results = await chat_store.search_messages("fibonacci") + assert len(results) == 1 + assert "fibonacci" in results[0]["content"] + + @pytest.mark.asyncio + async def test_log_resource(self, chat_store): + await chat_store.save_thread("w1", ChatThread(thread_id="t1", title="A")) + await chat_store.log_resource( + thread_id="t1", + uri="file:///data/report.csv", + name="report.csv", + mime_type="text/csv", + size=1024, + ) + + @pytest.mark.asyncio + async def test_log_skill(self, chat_store): + await chat_store.save_thread("w1", ChatThread(thread_id="t1", title="A")) + await chat_store.log_skill( + thread_id="t1", + name="langgraph-docs", + metadata={"version": "1.0"}, + ) + + +class TestSqliteSessionStore: + @pytest.mark.asyncio + async def test_auto_admin_session(self, session_store): + session = await session_store.get_session("local") + assert session is not None + assert session.user_id == "admin" + assert "admin" in session.roles + + @pytest.mark.asyncio + async def test_create_and_get_session(self, session_store): + session = await session_store.create_session( + session_id="s1", user_id="alice", roles=["editor"] + ) + assert session.user_id == "alice" + retrieved = await session_store.get_session("s1") + assert retrieved is not None + assert "editor" in retrieved.roles + + @pytest.mark.asyncio + async def test_session_expiry(self, session_store): + await session_store.create_session( + session_id="s_exp", user_id="bob", ttl=1 + ) + session = await session_store.get_session("s_exp") + assert session is not None + import time + time.sleep(1.1) + expired = await session_store.get_session("s_exp") + assert expired is None + + @pytest.mark.asyncio + async def test_check_permission_admin(self, session_store): + allowed = await session_store.check_permission("local", "widget", "w1", "admin") + assert allowed is True + + @pytest.mark.asyncio + async def test_check_permission_viewer(self, session_store): + await session_store.create_session( + session_id="viewer_s", user_id="viewer_user", roles=["viewer"] + ) + can_read = await session_store.check_permission("viewer_s", "widget", "w1", "read") + assert can_read is True + can_write = await session_store.check_permission("viewer_s", "widget", "w1", "write") + assert can_write is False + + @pytest.mark.asyncio + async def test_delete_session(self, session_store): + await session_store.create_session(session_id="del_s", user_id="u1") + deleted = await session_store.delete_session("del_s") + assert deleted is True + assert await session_store.get_session("del_s") is None + + @pytest.mark.asyncio + async def test_list_user_sessions(self, session_store): + await session_store.create_session(session_id="s1", user_id="alice") + await session_store.create_session(session_id="s2", user_id="alice") + sessions = await session_store.list_user_sessions("alice") + assert len(sessions) == 2 + + +class TestSqliteWidgetStore: + @pytest.mark.asyncio + async def test_save_and_get_widget(self, widget_store): + await widget_store.save_widget("w1", "

hi

", token="tok1") + widget = await widget_store.get_widget("w1") + assert widget is not None + assert widget.html == "

hi

" + assert widget.token == "tok1" + + @pytest.mark.asyncio + async def test_list_widgets(self, widget_store): + await widget_store.save_widget("w1", "

a

") + await widget_store.save_widget("w2", "

b

") + widgets = await widget_store.list_widgets() + assert "w1" in widgets + assert "w2" in widgets + + @pytest.mark.asyncio + async def test_delete_widget(self, widget_store): + await widget_store.save_widget("w1", "

a

") + deleted = await widget_store.delete_widget("w1") + assert deleted is True + assert await widget_store.get_widget("w1") is None + + +class TestSqliteEventBusAndRouter: + @pytest.mark.asyncio + async def test_event_bus_publish_subscribe(self, db_path): + bus = SqliteEventBus(db_path=db_path, encrypted=False) + received = [] + await bus.subscribe("test-channel", lambda msg: received.append(msg)) + await bus.publish("test-channel", {"data": "hello"}) + assert len(received) == 1 + assert received[0]["data"] == "hello" + + @pytest.mark.asyncio + async def test_connection_router(self, db_path): + router = SqliteConnectionRouter(db_path=db_path, encrypted=False) + await router.register("w1", "worker-1") + worker = await router.get_worker("w1") + assert worker == "worker-1" + await router.unregister("w1") + assert await router.get_worker("w1") is None + + +class TestSqliteFactoryIntegration: + def test_state_backend_sqlite(self, monkeypatch): + monkeypatch.setenv("PYWRY_DEPLOY__STATE_BACKEND", "sqlite") + from pywry.state._factory import get_state_backend + from pywry.state.types import StateBackend + + get_state_backend.cache_clear() + try: + backend = get_state_backend() + assert backend == StateBackend.SQLITE + finally: + get_state_backend.cache_clear() + monkeypatch.delenv("PYWRY_DEPLOY__STATE_BACKEND", raising=False) + + +class TestAuditTrailDefaultNoOps: + """Verify Memory and Redis stores have no-op audit trail methods.""" + + @pytest.mark.asyncio + async def test_memory_store_no_op_methods(self): + from pywry.state.memory import MemoryChatStore + + store = MemoryChatStore() + await store.log_tool_call("m1", "tc1", "search") + await store.log_artifact("m1", "code", "test.py") + await store.log_token_usage("m1", prompt_tokens=100) + calls = await store.get_tool_calls("m1") + assert calls == [] + stats = await store.get_usage_stats() + assert stats["total_tokens"] == 0 diff --git a/pywry/tests/test_system_events.py b/pywry/tests/test_system_events.py index 5deb815..7e53088 100644 --- a/pywry/tests/test_system_events.py +++ b/pywry/tests/test_system_events.py @@ -41,23 +41,23 @@ def _get_widget_esm() -> str: def _get_hot_reload_js() -> str: """Get the JavaScript for native Tauri window mode (hot reload).""" - from pywry.scripts import HOT_RELOAD_JS + from pywry.scripts import _get_hot_reload_js as _load - return HOT_RELOAD_JS + return _load() def _get_system_events_js() -> str: """Get the JavaScript for system event handlers (pywry:inject-css, etc.).""" - from pywry.scripts import PYWRY_SYSTEM_EVENTS_JS + from pywry.scripts import _get_system_events_js as _load - return PYWRY_SYSTEM_EVENTS_JS + return _load() def _get_theme_manager_js() -> str: """Get the theme manager JavaScript.""" - from pywry.scripts import THEME_MANAGER_JS + from pywry.scripts import _get_theme_manager_js as _load - return THEME_MANAGER_JS + return _load() # ============================================================================= @@ -302,21 +302,24 @@ class TestPywryBridgeSystemSupport: def test_bridge_defines_on_method(self) -> None: """Verify bridge JS defines the on() method for event registration.""" - from pywry.scripts import PYWRY_BRIDGE_JS + from pywry.scripts import _get_bridge_js - assert ".on" in PYWRY_BRIDGE_JS + _js = _get_bridge_js() + assert ".on" in _js def test_bridge_defines_off_method(self) -> None: """Verify bridge JS defines the off() method for event unregistration.""" - from pywry.scripts import PYWRY_BRIDGE_JS + from pywry.scripts import _get_bridge_js - assert ".off" in PYWRY_BRIDGE_JS + _js = _get_bridge_js() + assert ".off" in _js def test_bridge_defines_handlers_storage(self) -> None: """Verify bridge JS defines handlers storage.""" - from pywry.scripts import PYWRY_BRIDGE_JS + from pywry.scripts import _get_bridge_js - assert "_handlers" in PYWRY_BRIDGE_JS + _js = _get_bridge_js() + assert "_handlers" in _js def test_theme_manager_update_theme_handler(self) -> None: """Verify theme manager registers pywry:update-theme handler.""" diff --git a/pywry/tests/test_toolbar.py b/pywry/tests/test_toolbar.py index f77a63b..63b68f9 100644 --- a/pywry/tests/test_toolbar.py +++ b/pywry/tests/test_toolbar.py @@ -3814,10 +3814,10 @@ def test_secretstr_not_exposed_in_model_repr(self) -> None: assert "SecretStr" in model_repr def test_secret_never_rendered_in_html(self) -> None: - """Test secret value is NEVER rendered in HTML for security.""" + """Test secret value is not rendered in HTML.""" si = SecretInput(event="settings:api-key", value="super-secret-api-key") html = si.build_html() - # The actual secret must NEVER appear in HTML + # The actual secret does not appear in HTML assert "super-secret-api-key" not in html # HTML should have mask value when secret exists (not the actual secret) assert ( @@ -4814,9 +4814,9 @@ class TestSecretInputStateProtection: def test_state_getter_js_protects_secret(self) -> None: """getToolbarState JS should return has_value, not the actual value.""" - from pywry.scripts import TOOLBAR_BRIDGE_JS + from pywry.scripts import _get_toolbar_bridge_js - js = TOOLBAR_BRIDGE_JS + js = _get_toolbar_bridge_js() # Should check for pywry-input-secret class assert "pywry-input-secret" in js @@ -4827,18 +4827,18 @@ def test_state_getter_js_protects_secret(self) -> None: def test_component_value_getter_js_protects_secret(self) -> None: """getComponentValue JS should return has_value for secrets.""" - from pywry.scripts import TOOLBAR_BRIDGE_JS + from pywry.scripts import _get_toolbar_bridge_js - js = TOOLBAR_BRIDGE_JS + js = _get_toolbar_bridge_js() # getComponentValue should also check for secret inputs - assert "// SECURITY: Never expose secret values via state getter" in js + assert "// Never expose secret values via state getter" in js def test_set_value_js_blocks_secret(self) -> None: """setComponentValue JS should block setting secret values.""" - from pywry.scripts import TOOLBAR_BRIDGE_JS + from pywry.scripts import _get_toolbar_bridge_js - js = TOOLBAR_BRIDGE_JS + js = _get_toolbar_bridge_js() # Should check for secret input and warn assert "Cannot set SecretInput value via toolbar:set-value" in js From 4a4e7ae593196e8e3a1e510aa4ae57f2f638c7f8 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Tue, 14 Apr 2026 17:06:07 -0700 Subject: [PATCH 02/68] Remove .claude/settings.local.json from tracking Local settings file should not be in the repository. Co-Authored-By: Claude Opus 4.6 (1M context) --- .claude/settings.local.json | 16 ---------------- 1 file changed, 16 deletions(-) delete mode 100644 .claude/settings.local.json diff --git a/.claude/settings.local.json b/.claude/settings.local.json deleted file mode 100644 index d34af37..0000000 --- a/.claude/settings.local.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "permissions": { - "allow": [ - "Bash(find:*)", - "Bash(grep -E \"\\\\.py$\")", - "Bash(grep:*)", - "WebFetch(domain:www.tradingview.com)", - "WebSearch", - "Bash(ls -la \"C:\\\\Users\\\\dangl\\\\github\\\\PyWry\\\\.claude\\\\worktrees\\\\goofy-diffie\\\\pywry\\\\pywry\\\\frontend\\\\src\\\\tvchart\"*)", - "Bash(ls -la \"C:\\\\Users\\\\dangl\\\\github\\\\PyWry\\\\.claude\\\\worktrees\\\\goofy-diffie\\\\pywry\\\\pywry\\\\mcp\"*)", - "Bash(ls \"C:/Users/dangl/github/PyWry/.claude/worktrees/goofy-diffie/pywry/pywry/frontend/src/\"*.js)", - "Bash(echo \"EXIT: $?\")", - "WebFetch(domain:docs.langchain.com)" - ] - } -} From 54f589c3ef9639c4606a950c5c60476edab91049 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Tue, 14 Apr 2026 17:17:53 -0700 Subject: [PATCH 03/68] Fix ruff lint errors across chat providers, state backend, and tests - callback.py: remove redundant GenerationCancelledError import (used in _iter_result) - deepagent.py: add logger, log exceptions instead of bare pass, add on_chat_model_start and on_chain_start event handlers (StatusUpdate was unused) - base.py: add return statements to audit trail no-op methods (B027) - sqlite.py: restructure keyring try/except with else block (TRY300), log keyring fallback instead of bare pass (S110), add D102 per-file-ignore - test files: remove unused imports (F401), fix async sleep (ASYNC251), inline lambda (PLW0108), remove unused variable assignments (F841) - ruff.toml: add sqlite.py D102 ignore for ABC-documented methods Co-Authored-By: Claude Opus 4.6 (1M context) --- .claude/settings.local.json | 17 +++++++++++++++++ pywry/pywry/chat/providers/callback.py | 1 - pywry/pywry/chat/providers/deepagent.py | 16 ++++++++++++++-- pywry/pywry/state/base.py | 5 +++++ pywry/pywry/state/sqlite.py | 12 ++++++------ pywry/ruff.toml | 4 ++++ pywry/tests/test_chat_protocol.py | 7 ++----- pywry/tests/test_deepagent_provider.py | 6 +----- pywry/tests/test_state_sqlite.py | 11 +++-------- 9 files changed, 52 insertions(+), 27 deletions(-) create mode 100644 .claude/settings.local.json diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 0000000..a18ecdf --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,17 @@ +{ + "permissions": { + "allow": [ + "Bash(find:*)", + "Bash(grep -E \"\\\\.py$\")", + "Bash(grep:*)", + "WebFetch(domain:www.tradingview.com)", + "WebSearch", + "Bash(ls -la \"C:\\\\Users\\\\dangl\\\\github\\\\PyWry\\\\.claude\\\\worktrees\\\\goofy-diffie\\\\pywry\\\\pywry\\\\frontend\\\\src\\\\tvchart\"*)", + "Bash(ls -la \"C:\\\\Users\\\\dangl\\\\github\\\\PyWry\\\\.claude\\\\worktrees\\\\goofy-diffie\\\\pywry\\\\pywry\\\\mcp\"*)", + "Bash(ls \"C:/Users/dangl/github/PyWry/.claude/worktrees/goofy-diffie/pywry/pywry/frontend/src/\"*.js)", + "Bash(echo \"EXIT: $?\")", + "WebFetch(domain:docs.langchain.com)", + "Bash(cmd.exe /c \"where gh\")" + ] + } +} diff --git a/pywry/pywry/chat/providers/callback.py b/pywry/pywry/chat/providers/callback.py index 3b57063..aa16d90 100644 --- a/pywry/pywry/chat/providers/callback.py +++ b/pywry/pywry/chat/providers/callback.py @@ -104,7 +104,6 @@ async def prompt( SessionUpdate Updates from the callback. """ - from ..models import GenerationCancelledError from ..updates import AgentMessageUpdate if not self._prompt_fn: diff --git a/pywry/pywry/chat/providers/deepagent.py b/pywry/pywry/chat/providers/deepagent.py index 13fff92..fd884d1 100644 --- a/pywry/pywry/chat/providers/deepagent.py +++ b/pywry/pywry/chat/providers/deepagent.py @@ -9,10 +9,14 @@ from __future__ import annotations +import logging import uuid from typing import TYPE_CHECKING, Any + +logger = logging.getLogger(__name__) + from . import ChatProvider if TYPE_CHECKING: @@ -238,7 +242,7 @@ def _create_checkpointer(self) -> Any: except ImportError: pass except Exception: - pass + logger.debug("Could not auto-configure checkpointer from state backend", exc_info=True) from langgraph.checkpoint.memory import MemorySaver @@ -409,7 +413,7 @@ async def prompt( ] ) except Exception: - pass + logger.debug("Could not parse write_todos output", exc_info=True) yield ToolCallUpdate( tool_call_id=run_id or f"call_{uuid.uuid4().hex[:8]}", @@ -427,6 +431,14 @@ async def prompt( status="failed", ) + elif kind == "on_chat_model_start": + model_name = event.get("name", "") + if model_name: + yield StatusUpdate(text=f"Thinking ({model_name})...") + + elif kind == "on_chain_start" and event.get("name") == "task": + yield StatusUpdate(text="Delegating to subagent...") + async def cancel(self, session_id: str) -> None: """Cancel is handled cooperatively via ``cancel_event``. diff --git a/pywry/pywry/state/base.py b/pywry/pywry/state/base.py index 5d8ce8c..31ad1e4 100644 --- a/pywry/pywry/state/base.py +++ b/pywry/pywry/state/base.py @@ -669,6 +669,7 @@ async def log_tool_call( error: str | None = None, ) -> None: """Log a tool call for audit trail. No-op by default.""" + return async def log_artifact( self, @@ -679,6 +680,7 @@ async def log_artifact( metadata: dict[str, Any] | None = None, ) -> None: """Log an artifact for audit trail. No-op by default.""" + return async def log_token_usage( self, @@ -690,6 +692,7 @@ async def log_token_usage( cost_usd: float | None = None, ) -> None: """Log token usage for audit trail. No-op by default.""" + return async def log_resource( self, @@ -701,6 +704,7 @@ async def log_resource( size: int | None = None, ) -> None: """Log a resource reference for audit trail. No-op by default.""" + return async def log_skill( self, @@ -709,6 +713,7 @@ async def log_skill( metadata: dict[str, Any] | None = None, ) -> None: """Log a skill activation for audit trail. No-op by default.""" + return async def get_tool_calls(self, message_id: str) -> list[dict[str, Any]]: """Get tool calls for a message. Returns empty list by default.""" diff --git a/pywry/pywry/state/sqlite.py b/pywry/pywry/state/sqlite.py index e027254..2cf2e24 100644 --- a/pywry/pywry/state/sqlite.py +++ b/pywry/pywry/state/sqlite.py @@ -155,13 +155,13 @@ def _resolve_encryption_key() -> str | None: import keyring key = keyring.get_password("pywry", "sqlite_key") - if key: - return key - key = uuid.uuid4().hex + uuid.uuid4().hex - keyring.set_password("pywry", "sqlite_key", key) - return key + if not key: + key = uuid.uuid4().hex + uuid.uuid4().hex + keyring.set_password("pywry", "sqlite_key", key) except Exception: - pass + logger.debug("Keyring unavailable for SQLite key storage, falling back to salt file", exc_info=True) + else: + return key import hashlib diff --git a/pywry/ruff.toml b/pywry/ruff.toml index 57d1b20..053296f 100644 --- a/pywry/ruff.toml +++ b/pywry/ruff.toml @@ -95,6 +95,10 @@ dummy-variable-rgx = "^(_+|(_+[a-zA-Z0-9_]*[a-zA-Z0-9]+?))$" "TC003", ] +"pywry/state/sqlite.py" = [ + "D102", +] + "pywry/__main__.py" = [ "W293", # Trailing whitespace in JS template strings "S110", # try-except-pass in window cleanup diff --git a/pywry/tests/test_chat_protocol.py b/pywry/tests/test_chat_protocol.py index f18c663..89e2c57 100644 --- a/pywry/tests/test_chat_protocol.py +++ b/pywry/tests/test_chat_protocol.py @@ -16,7 +16,6 @@ import time from typing import Any -from unittest.mock import MagicMock import pytest @@ -25,13 +24,12 @@ TradingViewArtifact, TradingViewSeries, ) -from pywry.chat.manager import ChatContext, ChatManager, SettingsItem +from pywry.chat.manager import ChatManager from pywry.chat.models import ( ACPToolCall, AudioPart, ChatMessage, EmbeddedResource, - EmbeddedResourcePart, ImagePart, ResourceLinkPart, TextPart, @@ -49,7 +47,6 @@ from pywry.chat.updates import ( AgentMessageUpdate, ArtifactUpdate, - CitationUpdate, CommandsUpdate, ConfigOptionUpdate, ModeUpdate, @@ -197,7 +194,7 @@ def my_prompt(session_id, content, cancel_event): updates = [] async def collect(): - caps = await provider.initialize(ClientCapabilities()) + await provider.initialize(ClientCapabilities()) sid = await provider.new_session("/tmp") async for u in provider.prompt(sid, [TextPart(text="hi")]): updates.append(u) diff --git a/pywry/tests/test_deepagent_provider.py b/pywry/tests/test_deepagent_provider.py index 0b55934..29cbea6 100644 --- a/pywry/tests/test_deepagent_provider.py +++ b/pywry/tests/test_deepagent_provider.py @@ -7,16 +7,12 @@ from __future__ import annotations import asyncio -import time - -from typing import Any -from unittest.mock import AsyncMock, MagicMock import pytest from pywry.chat.models import TextPart from pywry.chat.providers.deepagent import DeepagentProvider, _map_tool_kind -from pywry.chat.session import ClientCapabilities, PlanEntry +from pywry.chat.session import ClientCapabilities from pywry.chat.updates import ( AgentMessageUpdate, PlanUpdate, diff --git a/pywry/tests/test_state_sqlite.py b/pywry/tests/test_state_sqlite.py index ccdd8ca..1a669e1 100644 --- a/pywry/tests/test_state_sqlite.py +++ b/pywry/tests/test_state_sqlite.py @@ -6,13 +6,8 @@ from __future__ import annotations -import asyncio -import tempfile import time -from pathlib import Path -from typing import Any - import pytest from pywry.chat.models import ChatMessage, ChatThread @@ -261,8 +256,8 @@ async def test_session_expiry(self, session_store): ) session = await session_store.get_session("s_exp") assert session is not None - import time - time.sleep(1.1) + import asyncio + await asyncio.sleep(1.1) expired = await session_store.get_session("s_exp") assert expired is None @@ -326,7 +321,7 @@ class TestSqliteEventBusAndRouter: async def test_event_bus_publish_subscribe(self, db_path): bus = SqliteEventBus(db_path=db_path, encrypted=False) received = [] - await bus.subscribe("test-channel", lambda msg: received.append(msg)) + await bus.subscribe("test-channel", received.append) await bus.publish("test-channel", {"data": "hello"}) assert len(received) == 1 assert received[0]["data"] == "hello" From bd1228bd5b44804b90d2d8025ab8fd8f4e894451 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Tue, 14 Apr 2026 17:18:36 -0700 Subject: [PATCH 04/68] Ignore .claude/settings.local.json Co-Authored-By: Claude Opus 4.6 (1M context) --- .claude/settings.local.json | 17 ----------------- .gitignore | 1 + 2 files changed, 1 insertion(+), 17 deletions(-) delete mode 100644 .claude/settings.local.json diff --git a/.claude/settings.local.json b/.claude/settings.local.json deleted file mode 100644 index a18ecdf..0000000 --- a/.claude/settings.local.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "permissions": { - "allow": [ - "Bash(find:*)", - "Bash(grep -E \"\\\\.py$\")", - "Bash(grep:*)", - "WebFetch(domain:www.tradingview.com)", - "WebSearch", - "Bash(ls -la \"C:\\\\Users\\\\dangl\\\\github\\\\PyWry\\\\.claude\\\\worktrees\\\\goofy-diffie\\\\pywry\\\\pywry\\\\frontend\\\\src\\\\tvchart\"*)", - "Bash(ls -la \"C:\\\\Users\\\\dangl\\\\github\\\\PyWry\\\\.claude\\\\worktrees\\\\goofy-diffie\\\\pywry\\\\pywry\\\\mcp\"*)", - "Bash(ls \"C:/Users/dangl/github/PyWry/.claude/worktrees/goofy-diffie/pywry/pywry/frontend/src/\"*.js)", - "Bash(echo \"EXIT: $?\")", - "WebFetch(domain:docs.langchain.com)", - "Bash(cmd.exe /c \"where gh\")" - ] - } -} diff --git a/.gitignore b/.gitignore index 5d61dde..eee8e22 100644 --- a/.gitignore +++ b/.gitignore @@ -208,3 +208,4 @@ marimo/_lsp/ __marimo__/ docs/site/* +.claude/settings.local.json From bb298c5c715c87667131c1fffe69a4e83acf69e3 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Tue, 14 Apr 2026 17:26:25 -0700 Subject: [PATCH 05/68] Fix remaining ruff lint errors MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - deepagent.py: fix E402 import order, extract _handle_tool_end to reduce prompt() complexity (C901/PLR0912) - ruff.toml: add S108 and PERF401 to test ignores - test_deepagent_provider.py: add test for on_chat_model_start → StatusUpdate (was imported but unused) - test_state_sqlite.py: remove unused time import Co-Authored-By: Claude Opus 4.6 (1M context) --- pywry/pywry/chat/providers/deepagent.py | 81 ++++++++++++------------- pywry/ruff.toml | 2 + pywry/tests/test_deepagent_provider.py | 19 ++++++ pywry/tests/test_state_sqlite.py | 2 - 4 files changed, 61 insertions(+), 43 deletions(-) diff --git a/pywry/pywry/chat/providers/deepagent.py b/pywry/pywry/chat/providers/deepagent.py index fd884d1..2af77e5 100644 --- a/pywry/pywry/chat/providers/deepagent.py +++ b/pywry/pywry/chat/providers/deepagent.py @@ -14,9 +14,6 @@ from typing import TYPE_CHECKING, Any - -logger = logging.getLogger(__name__) - from . import ChatProvider if TYPE_CHECKING: @@ -28,6 +25,8 @@ from ..updates import SessionUpdate +logger = logging.getLogger(__name__) + PYWRY_SYSTEM_PROMPT = """\ You are operating inside a PyWry chat interface — a rich desktop/notebook/browser \ UI that renders your responses in real time. @@ -352,13 +351,7 @@ async def prompt( Typed update notifications. """ from ..models import TextPart - from ..session import PlanEntry - from ..updates import ( - AgentMessageUpdate, - PlanUpdate, - StatusUpdate, - ToolCallUpdate, - ) + from ..updates import AgentMessageUpdate, StatusUpdate, ToolCallUpdate thread_id = self._sessions.get(session_id, session_id) user_text = "".join(p.text for p in content if isinstance(p, TextPart)) @@ -390,37 +383,8 @@ async def prompt( ) elif kind == "on_tool_end": - tool_name = event.get("name", "") - run_id = event.get("run_id", "") - output = event.get("data", {}).get("output", "") - - if tool_name == "write_todos": - try: - import json - - todos = json.loads(output) if isinstance(output, str) else output - if isinstance(todos, list): - yield PlanUpdate( - entries=[ - PlanEntry( - content=item.get("title", item.get("content", str(item))), - priority="medium", - status=_map_todo_status( - item.get("status", "pending") - ), - ) - for item in todos - ] - ) - except Exception: - logger.debug("Could not parse write_todos output", exc_info=True) - - yield ToolCallUpdate( - tool_call_id=run_id or f"call_{uuid.uuid4().hex[:8]}", - name=tool_name, - kind=_map_tool_kind(tool_name), - status="completed", - ) + async for update in self._handle_tool_end(event): + yield update elif kind == "on_tool_error": tool_name = event.get("name", "") @@ -439,6 +403,41 @@ async def prompt( elif kind == "on_chain_start" and event.get("name") == "task": yield StatusUpdate(text="Delegating to subagent...") + async def _handle_tool_end(self, event: dict[str, Any]) -> AsyncIterator[SessionUpdate]: + """Handle on_tool_end events, including write_todos → PlanUpdate.""" + import json + + from ..session import PlanEntry + from ..updates import PlanUpdate, ToolCallUpdate + + tool_name = event.get("name", "") + run_id = event.get("run_id", "") + output = event.get("data", {}).get("output", "") + + if tool_name == "write_todos": + try: + todos = json.loads(output) if isinstance(output, str) else output + if isinstance(todos, list): + yield PlanUpdate( + entries=[ + PlanEntry( + content=item.get("title", item.get("content", str(item))), + priority="medium", + status=_map_todo_status(item.get("status", "pending")), + ) + for item in todos + ] + ) + except Exception: + logger.debug("Could not parse write_todos output", exc_info=True) + + yield ToolCallUpdate( + tool_call_id=run_id or f"call_{uuid.uuid4().hex[:8]}", + name=tool_name, + kind=_map_tool_kind(tool_name), + status="completed", + ) + async def cancel(self, session_id: str) -> None: """Cancel is handled cooperatively via ``cancel_event``. diff --git a/pywry/ruff.toml b/pywry/ruff.toml index 053296f..fb26e4e 100644 --- a/pywry/ruff.toml +++ b/pywry/ruff.toml @@ -80,9 +80,11 @@ dummy-variable-rgx = "^(_+|(_+[a-zA-Z0-9_]*[a-zA-Z0-9]+?))$" "S104", "S105", "S106", + "S108", "S310", "ARG", "ASYNC240", + "PERF401", ] "__init__.py" = [ diff --git a/pywry/tests/test_deepagent_provider.py b/pywry/tests/test_deepagent_provider.py index 29cbea6..19b77a4 100644 --- a/pywry/tests/test_deepagent_provider.py +++ b/pywry/tests/test_deepagent_provider.py @@ -228,3 +228,22 @@ async def test_cancel_stops_streaming(self): cancel.set() assert len(updates) < 100 + + @pytest.mark.asyncio + async def test_chat_model_start_yields_status(self): + events = [ + make_event("on_chat_model_start", name="ChatOpenAI"), + make_event("on_chat_model_stream", data={"chunk": FakeChunk("answer")}), + ] + agent = FakeAgent(events) + provider = DeepagentProvider(agent=agent, auto_checkpointer=False) + await provider.initialize(ClientCapabilities()) + sid = await provider.new_session("/tmp") + + updates = [] + async for u in provider.prompt(sid, [TextPart(text="hi")]): + updates.append(u) + + assert isinstance(updates[0], StatusUpdate) + assert "ChatOpenAI" in updates[0].text + assert isinstance(updates[1], AgentMessageUpdate) diff --git a/pywry/tests/test_state_sqlite.py b/pywry/tests/test_state_sqlite.py index 1a669e1..ae68f5a 100644 --- a/pywry/tests/test_state_sqlite.py +++ b/pywry/tests/test_state_sqlite.py @@ -6,8 +6,6 @@ from __future__ import annotations -import time - import pytest from pywry.chat.models import ChatMessage, ChatThread From d7b1113c251dda9b1413aff249b18048769fb911 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Tue, 14 Apr 2026 17:43:30 -0700 Subject: [PATCH 06/68] Fix SqliteWidgetStore/ConnectionRouter ABCs and guard langgraph imports - SqliteWidgetStore: implement all 10 abstract methods from WidgetStore ABC (register, get, get_html, get_token, exists, delete, list_active, update_html, update_token, count) - SqliteEventBus/SqliteConnectionRouter: alias to Memory implementations since SQLite is single-process (no custom pub/sub or routing needed) - DeepagentProvider: guard all langgraph imports with try/except so tests pass without langgraph installed, return None from _create_store and _create_checkpointer when unavailable - Tests: use correct ABC method names, skip langgraph-dependent test when not installed, remove cache_clear call on non-cached function, pass auto_store=False alongside auto_checkpointer=False in all tests Co-Authored-By: Claude Opus 4.6 (1M context) --- pywry/pywry/chat/providers/deepagent.py | 16 +++- pywry/pywry/state/sqlite.py | 115 +++++++++++------------- pywry/tests/test_deepagent_provider.py | 23 ++--- pywry/tests/test_state_sqlite.py | 75 +++++++++------- 4 files changed, 120 insertions(+), 109 deletions(-) diff --git a/pywry/pywry/chat/providers/deepagent.py b/pywry/pywry/chat/providers/deepagent.py index 2af77e5..f9eafef 100644 --- a/pywry/pywry/chat/providers/deepagent.py +++ b/pywry/pywry/chat/providers/deepagent.py @@ -243,14 +243,22 @@ def _create_checkpointer(self) -> Any: except Exception: logger.debug("Could not auto-configure checkpointer from state backend", exc_info=True) - from langgraph.checkpoint.memory import MemorySaver + try: + from langgraph.checkpoint.memory import MemorySaver - return MemorySaver() + return MemorySaver() + except ImportError: + logger.debug("langgraph not installed, skipping checkpointer") + return None def _create_store(self) -> Any: - from langgraph.store.memory import InMemoryStore + try: + from langgraph.store.memory import InMemoryStore - return InMemoryStore() + return InMemoryStore() + except ImportError: + logger.debug("langgraph not installed, skipping memory store") + return None def _build_agent(self) -> Any: from deepagents import create_deep_agent diff --git a/pywry/pywry/state/sqlite.py b/pywry/pywry/state/sqlite.py index 2cf2e24..43803f0 100644 --- a/pywry/pywry/state/sqlite.py +++ b/pywry/pywry/state/sqlite.py @@ -22,7 +22,8 @@ from pathlib import Path from typing import Any -from .base import ChatStore, ConnectionRouter, EventBus, SessionStore, WidgetStore +from .base import ChatStore, SessionStore, WidgetStore +from .memory import MemoryConnectionRouter, MemoryEventBus from .types import UserSession, WidgetData @@ -290,20 +291,22 @@ async def _executemany(self, sql: str, params_list: list[tuple[Any, ...]]) -> No class SqliteWidgetStore(SqliteStateBackend, WidgetStore): """SQLite-backed widget store.""" - async def save_widget( + async def register( self, widget_id: str, html: str, token: str | None = None, + owner_worker_id: str | None = None, metadata: dict[str, Any] | None = None, ) -> None: await self._execute( - "INSERT OR REPLACE INTO widgets (widget_id, html, token, created_at, metadata) " - "VALUES (?, ?, ?, ?, ?)", - (widget_id, html, token, time.time(), json.dumps(metadata or {})), + "INSERT OR REPLACE INTO widgets " + "(widget_id, html, token, owner_worker_id, created_at, metadata) " + "VALUES (?, ?, ?, ?, ?, ?)", + (widget_id, html, token, owner_worker_id, time.time(), json.dumps(metadata or {})), ) - async def get_widget(self, widget_id: str) -> WidgetData | None: + async def get(self, widget_id: str) -> WidgetData | None: rows = await self._execute( "SELECT * FROM widgets WHERE widget_id = ?", (widget_id,), commit=False ) @@ -315,21 +318,57 @@ async def get_widget(self, widget_id: str) -> WidgetData | None: html=r["html"], token=r["token"], created_at=r["created_at"], + owner_worker_id=r["owner_worker_id"], metadata=json.loads(r["metadata"] or "{}"), ) - async def delete_widget(self, widget_id: str) -> bool: + async def get_html(self, widget_id: str) -> str | None: + rows = await self._execute( + "SELECT html FROM widgets WHERE widget_id = ?", (widget_id,), commit=False + ) + return rows[0]["html"] if rows else None + + async def get_token(self, widget_id: str) -> str | None: rows = await self._execute( - "DELETE FROM widgets WHERE widget_id = ? RETURNING widget_id", (widget_id,) + "SELECT token FROM widgets WHERE widget_id = ?", (widget_id,), commit=False + ) + return rows[0]["token"] if rows else None + + async def exists(self, widget_id: str) -> bool: + rows = await self._execute( + "SELECT 1 FROM widgets WHERE widget_id = ?", (widget_id,), commit=False ) return len(rows) > 0 - async def list_widgets(self) -> list[str]: + async def delete(self, widget_id: str) -> bool: + before = await self.exists(widget_id) + if before: + await self._execute("DELETE FROM widgets WHERE widget_id = ?", (widget_id,)) + return before + + async def list_active(self) -> list[str]: rows = await self._execute("SELECT widget_id FROM widgets", commit=False) return [r["widget_id"] for r in rows] - async def cleanup_widget(self, widget_id: str) -> None: - await self.delete_widget(widget_id) + async def update_html(self, widget_id: str, html: str) -> bool: + if not await self.exists(widget_id): + return False + await self._execute( + "UPDATE widgets SET html = ? WHERE widget_id = ?", (html, widget_id) + ) + return True + + async def update_token(self, widget_id: str, token: str) -> bool: + if not await self.exists(widget_id): + return False + await self._execute( + "UPDATE widgets SET token = ? WHERE widget_id = ?", (token, widget_id) + ) + return True + + async def count(self) -> int: + rows = await self._execute("SELECT COUNT(*) as cnt FROM widgets", commit=False) + return rows[0]["cnt"] if rows else 0 class SqliteSessionStore(SqliteStateBackend, SessionStore): @@ -830,54 +869,8 @@ async def search_messages( return [dict(r) for r in rows] -class SqliteEventBus(SqliteStateBackend, EventBus): - """In-process event dispatch for SQLite backend. - - SQLite is single-process, so pub/sub is handled in-memory - identically to MemoryEventBus. - """ - - def __init__(self, *args: Any, **kwargs: Any) -> None: - super().__init__(*args, **kwargs) - self._subscribers: dict[str, list[Any]] = {} - - async def publish(self, channel: str, message: dict[str, Any]) -> None: - for callback in self._subscribers.get(channel, []): - try: - callback(message) - except Exception: - logger.exception("Event bus subscriber error on channel %s", channel) - - async def subscribe(self, channel: str, callback: Any) -> None: - if channel not in self._subscribers: - self._subscribers[channel] = [] - self._subscribers[channel].append(callback) - - async def unsubscribe(self, channel: str, callback: Any) -> None: - if channel in self._subscribers: - self._subscribers[channel] = [ - cb for cb in self._subscribers[channel] if cb != callback - ] - - -class SqliteConnectionRouter(SqliteStateBackend, ConnectionRouter): - """In-process connection routing for SQLite backend. - - Single-process, so routing is trivial. - """ - - def __init__(self, *args: Any, **kwargs: Any) -> None: - super().__init__(*args, **kwargs) - self._routes: dict[str, str] = {} - - async def register(self, widget_id: str, worker_id: str) -> None: - self._routes[widget_id] = worker_id - - async def get_worker(self, widget_id: str) -> str | None: - return self._routes.get(widget_id) - - async def unregister(self, widget_id: str) -> None: - self._routes.pop(widget_id, None) +SqliteEventBus = MemoryEventBus +"""SQLite mode reuses the in-memory event bus — single-process, no pub/sub needed.""" - async def get_all_routes(self) -> dict[str, str]: - return dict(self._routes) +SqliteConnectionRouter = MemoryConnectionRouter +"""SQLite mode reuses the in-memory connection router — single-process, routing is trivial.""" diff --git a/pywry/tests/test_deepagent_provider.py b/pywry/tests/test_deepagent_provider.py index 19b77a4..d781b12 100644 --- a/pywry/tests/test_deepagent_provider.py +++ b/pywry/tests/test_deepagent_provider.py @@ -76,18 +76,19 @@ class TestDeepagentProviderInitialize: @pytest.mark.asyncio async def test_initialize_returns_capabilities(self): agent = FakeAgent([]) - provider = DeepagentProvider(agent=agent, auto_checkpointer=False) + provider = DeepagentProvider(agent=agent, auto_checkpointer=False, auto_store=False) caps = await provider.initialize(ClientCapabilities()) assert caps.prompt_capabilities is not None assert caps.prompt_capabilities.image is True @pytest.mark.asyncio async def test_initialize_with_checkpointer_enables_load(self): + langgraph = pytest.importorskip("langgraph") from langgraph.checkpoint.memory import MemorySaver agent = FakeAgent([]) provider = DeepagentProvider( - agent=agent, checkpointer=MemorySaver(), auto_checkpointer=False + agent=agent, checkpointer=MemorySaver(), auto_checkpointer=False, auto_store=False ) caps = await provider.initialize(ClientCapabilities()) assert caps.load_session is True @@ -95,7 +96,7 @@ async def test_initialize_with_checkpointer_enables_load(self): @pytest.mark.asyncio async def test_initialize_without_checkpointer_disables_load(self): agent = FakeAgent([]) - provider = DeepagentProvider(agent=agent, auto_checkpointer=False) + provider = DeepagentProvider(agent=agent, auto_checkpointer=False, auto_store=False) caps = await provider.initialize(ClientCapabilities()) assert caps.load_session is False @@ -104,7 +105,7 @@ class TestDeepagentProviderSessions: @pytest.mark.asyncio async def test_new_session_returns_id(self): agent = FakeAgent([]) - provider = DeepagentProvider(agent=agent, auto_checkpointer=False) + provider = DeepagentProvider(agent=agent, auto_checkpointer=False, auto_store=False) await provider.initialize(ClientCapabilities()) sid = await provider.new_session("/tmp") assert sid.startswith("da_") @@ -112,7 +113,7 @@ async def test_new_session_returns_id(self): @pytest.mark.asyncio async def test_load_nonexistent_session_raises(self): agent = FakeAgent([]) - provider = DeepagentProvider(agent=agent, auto_checkpointer=False) + provider = DeepagentProvider(agent=agent, auto_checkpointer=False, auto_store=False) await provider.initialize(ClientCapabilities()) with pytest.raises(ValueError, match="not found"): await provider.load_session("nonexistent", "/tmp") @@ -126,7 +127,7 @@ async def test_text_chunks(self): make_event("on_chat_model_stream", data={"chunk": FakeChunk("world")}), ] agent = FakeAgent(events) - provider = DeepagentProvider(agent=agent, auto_checkpointer=False) + provider = DeepagentProvider(agent=agent, auto_checkpointer=False, auto_store=False) await provider.initialize(ClientCapabilities()) sid = await provider.new_session("/tmp") @@ -146,7 +147,7 @@ async def test_tool_call_lifecycle(self): make_event("on_tool_end", name="read_file", run_id="tc1", data={"output": "contents"}), ] agent = FakeAgent(events) - provider = DeepagentProvider(agent=agent, auto_checkpointer=False) + provider = DeepagentProvider(agent=agent, auto_checkpointer=False, auto_store=False) await provider.initialize(ClientCapabilities()) sid = await provider.new_session("/tmp") @@ -168,7 +169,7 @@ async def test_tool_error(self): make_event("on_tool_error", name="execute", run_id="tc2"), ] agent = FakeAgent(events) - provider = DeepagentProvider(agent=agent, auto_checkpointer=False) + provider = DeepagentProvider(agent=agent, auto_checkpointer=False, auto_store=False) await provider.initialize(ClientCapabilities()) sid = await provider.new_session("/tmp") @@ -192,7 +193,7 @@ async def test_write_todos_produces_plan_update(self): data={"output": json.dumps(todos)}), ] agent = FakeAgent(events) - provider = DeepagentProvider(agent=agent, auto_checkpointer=False) + provider = DeepagentProvider(agent=agent, auto_checkpointer=False, auto_store=False) await provider.initialize(ClientCapabilities()) sid = await provider.new_session("/tmp") @@ -214,7 +215,7 @@ async def test_cancel_stops_streaming(self): for i in range(100) ] agent = FakeAgent(events) - provider = DeepagentProvider(agent=agent, auto_checkpointer=False) + provider = DeepagentProvider(agent=agent, auto_checkpointer=False, auto_store=False) await provider.initialize(ClientCapabilities()) sid = await provider.new_session("/tmp") @@ -236,7 +237,7 @@ async def test_chat_model_start_yields_status(self): make_event("on_chat_model_stream", data={"chunk": FakeChunk("answer")}), ] agent = FakeAgent(events) - provider = DeepagentProvider(agent=agent, auto_checkpointer=False) + provider = DeepagentProvider(agent=agent, auto_checkpointer=False, auto_store=False) await provider.initialize(ClientCapabilities()) sid = await provider.new_session("/tmp") diff --git a/pywry/tests/test_state_sqlite.py b/pywry/tests/test_state_sqlite.py index ae68f5a..e283f4c 100644 --- a/pywry/tests/test_state_sqlite.py +++ b/pywry/tests/test_state_sqlite.py @@ -291,47 +291,61 @@ async def test_list_user_sessions(self, session_store): class TestSqliteWidgetStore: @pytest.mark.asyncio - async def test_save_and_get_widget(self, widget_store): - await widget_store.save_widget("w1", "

hi

", token="tok1") - widget = await widget_store.get_widget("w1") + async def test_register_and_get(self, widget_store): + await widget_store.register("w1", "

hi

", token="tok1") + widget = await widget_store.get("w1") assert widget is not None assert widget.html == "

hi

" assert widget.token == "tok1" @pytest.mark.asyncio - async def test_list_widgets(self, widget_store): - await widget_store.save_widget("w1", "

a

") - await widget_store.save_widget("w2", "

b

") - widgets = await widget_store.list_widgets() + async def test_list_active(self, widget_store): + await widget_store.register("w1", "

a

") + await widget_store.register("w2", "

b

") + widgets = await widget_store.list_active() assert "w1" in widgets assert "w2" in widgets @pytest.mark.asyncio - async def test_delete_widget(self, widget_store): - await widget_store.save_widget("w1", "

a

") - deleted = await widget_store.delete_widget("w1") + async def test_delete(self, widget_store): + await widget_store.register("w1", "

a

") + deleted = await widget_store.delete("w1") assert deleted is True - assert await widget_store.get_widget("w1") is None + assert await widget_store.get("w1") is None + @pytest.mark.asyncio + async def test_exists_and_count(self, widget_store): + assert await widget_store.exists("w1") is False + assert await widget_store.count() == 0 + await widget_store.register("w1", "

a

") + assert await widget_store.exists("w1") is True + assert await widget_store.count() == 1 -class TestSqliteEventBusAndRouter: @pytest.mark.asyncio - async def test_event_bus_publish_subscribe(self, db_path): - bus = SqliteEventBus(db_path=db_path, encrypted=False) - received = [] - await bus.subscribe("test-channel", received.append) - await bus.publish("test-channel", {"data": "hello"}) - assert len(received) == 1 - assert received[0]["data"] == "hello" + async def test_update_html(self, widget_store): + await widget_store.register("w1", "

old

") + updated = await widget_store.update_html("w1", "

new

") + assert updated is True + assert (await widget_store.get_html("w1")) == "

new

" @pytest.mark.asyncio - async def test_connection_router(self, db_path): - router = SqliteConnectionRouter(db_path=db_path, encrypted=False) - await router.register("w1", "worker-1") - worker = await router.get_worker("w1") - assert worker == "worker-1" - await router.unregister("w1") - assert await router.get_worker("w1") is None + async def test_update_token(self, widget_store): + await widget_store.register("w1", "

a

", token="old") + updated = await widget_store.update_token("w1", "new") + assert updated is True + assert (await widget_store.get_token("w1")) == "new" + + +class TestSqliteEventBusAndRouter: + def test_event_bus_is_memory(self): + from pywry.state.memory import MemoryEventBus + + assert SqliteEventBus is MemoryEventBus + + def test_connection_router_is_memory(self): + from pywry.state.memory import MemoryConnectionRouter + + assert SqliteConnectionRouter is MemoryConnectionRouter class TestSqliteFactoryIntegration: @@ -340,13 +354,8 @@ def test_state_backend_sqlite(self, monkeypatch): from pywry.state._factory import get_state_backend from pywry.state.types import StateBackend - get_state_backend.cache_clear() - try: - backend = get_state_backend() - assert backend == StateBackend.SQLITE - finally: - get_state_backend.cache_clear() - monkeypatch.delenv("PYWRY_DEPLOY__STATE_BACKEND", raising=False) + backend = get_state_backend() + assert backend == StateBackend.SQLITE class TestAuditTrailDefaultNoOps: From 9e0e3116a1540a02690adb0e26b893ecd7608870 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Tue, 14 Apr 2026 17:48:24 -0700 Subject: [PATCH 07/68] Apply ruff format to state and test files Co-Authored-By: Claude Opus 4.6 (1M context) --- pywry/pywry/state/_factory.py | 12 +++++++++--- pywry/pywry/state/sqlite.py | 26 ++++++++++++++++---------- pywry/tests/test_deepagent_provider.py | 5 +++-- pywry/tests/test_state_sqlite.py | 12 +++++------- 4 files changed, 33 insertions(+), 22 deletions(-) diff --git a/pywry/pywry/state/_factory.py b/pywry/pywry/state/_factory.py index 2d2e332..c239535 100644 --- a/pywry/pywry/state/_factory.py +++ b/pywry/pywry/state/_factory.py @@ -174,7 +174,9 @@ def get_widget_store() -> WidgetStore: from .sqlite import SqliteWidgetStore settings = _get_deploy_settings() - return SqliteWidgetStore(db_path=getattr(settings, "sqlite_path", "~/.config/pywry/pywry.db")) + return SqliteWidgetStore( + db_path=getattr(settings, "sqlite_path", "~/.config/pywry/pywry.db") + ) return MemoryWidgetStore() @@ -248,7 +250,9 @@ def get_connection_router() -> ConnectionRouter: from .sqlite import SqliteConnectionRouter settings = _get_deploy_settings() - return SqliteConnectionRouter(db_path=getattr(settings, "sqlite_path", "~/.config/pywry/pywry.db")) + return SqliteConnectionRouter( + db_path=getattr(settings, "sqlite_path", "~/.config/pywry/pywry.db") + ) return MemoryConnectionRouter() @@ -286,7 +290,9 @@ def get_session_store() -> SessionStore: from .sqlite import SqliteSessionStore settings = _get_deploy_settings() - return SqliteSessionStore(db_path=getattr(settings, "sqlite_path", "~/.config/pywry/pywry.db")) + return SqliteSessionStore( + db_path=getattr(settings, "sqlite_path", "~/.config/pywry/pywry.db") + ) return MemorySessionStore() diff --git a/pywry/pywry/state/sqlite.py b/pywry/pywry/state/sqlite.py index 43803f0..4140572 100644 --- a/pywry/pywry/state/sqlite.py +++ b/pywry/pywry/state/sqlite.py @@ -160,7 +160,9 @@ def _resolve_encryption_key() -> str | None: key = uuid.uuid4().hex + uuid.uuid4().hex keyring.set_password("pywry", "sqlite_key", key) except Exception: - logger.debug("Keyring unavailable for SQLite key storage, falling back to salt file", exc_info=True) + logger.debug( + "Keyring unavailable for SQLite key storage, falling back to salt file", exc_info=True + ) else: return key @@ -353,17 +355,13 @@ async def list_active(self) -> list[str]: async def update_html(self, widget_id: str, html: str) -> bool: if not await self.exists(widget_id): return False - await self._execute( - "UPDATE widgets SET html = ? WHERE widget_id = ?", (html, widget_id) - ) + await self._execute("UPDATE widgets SET html = ? WHERE widget_id = ?", (html, widget_id)) return True async def update_token(self, widget_id: str, token: str) -> bool: if not await self.exists(widget_id): return False - await self._execute( - "UPDATE widgets SET token = ? WHERE widget_id = ?", (token, widget_id) - ) + await self._execute("UPDATE widgets SET token = ? WHERE widget_id = ?", (token, widget_id)) return True async def count(self) -> int: @@ -565,8 +563,10 @@ async def delete_thread(self, widget_id: str, thread_id: str) -> bool: return len(rows) > 0 async def append_message(self, widget_id: str, thread_id: str, message: Any) -> None: - content = message.content if isinstance(message.content, str) else json.dumps( - [p.model_dump(by_alias=True) for p in message.content] + content = ( + message.content + if isinstance(message.content, str) + else json.dumps([p.model_dump(by_alias=True) for p in message.content]) ) await self._execute( "INSERT INTO messages " @@ -824,7 +824,13 @@ async def get_usage_stats( commit=False, ) if not rows: - return {"prompt_tokens": 0, "completion_tokens": 0, "total_tokens": 0, "cost_usd": 0, "count": 0} + return { + "prompt_tokens": 0, + "completion_tokens": 0, + "total_tokens": 0, + "cost_usd": 0, + "count": 0, + } r = rows[0] return { "prompt_tokens": r["prompt"] or 0, diff --git a/pywry/tests/test_deepagent_provider.py b/pywry/tests/test_deepagent_provider.py index d781b12..733d533 100644 --- a/pywry/tests/test_deepagent_provider.py +++ b/pywry/tests/test_deepagent_provider.py @@ -189,8 +189,9 @@ async def test_write_todos_produces_plan_update(self): ] events = [ make_event("on_tool_start", name="write_todos", run_id="tc3"), - make_event("on_tool_end", name="write_todos", run_id="tc3", - data={"output": json.dumps(todos)}), + make_event( + "on_tool_end", name="write_todos", run_id="tc3", data={"output": json.dumps(todos)} + ), ] agent = FakeAgent(events) provider = DeepagentProvider(agent=agent, auto_checkpointer=False, auto_store=False) diff --git a/pywry/tests/test_state_sqlite.py b/pywry/tests/test_state_sqlite.py index e283f4c..24704e1 100644 --- a/pywry/tests/test_state_sqlite.py +++ b/pywry/tests/test_state_sqlite.py @@ -100,7 +100,8 @@ async def test_message_pagination(self, chat_store): await chat_store.save_thread("w1", ChatThread(thread_id="t1", title="A")) for i in range(10): await chat_store.append_message( - "w1", "t1", + "w1", + "t1", ChatMessage(role="user", content=f"msg{i}", message_id=f"m{i}"), ) messages = await chat_store.get_messages("w1", "t1", limit=3) @@ -110,9 +111,7 @@ async def test_message_pagination(self, chat_store): async def test_persistence_across_instances(self, db_path): store1 = SqliteChatStore(db_path=db_path, encrypted=False) await store1.save_thread("w1", ChatThread(thread_id="t1", title="Persistent")) - await store1.append_message( - "w1", "t1", ChatMessage(role="user", content="saved") - ) + await store1.append_message("w1", "t1", ChatMessage(role="user", content="saved")) store2 = SqliteChatStore(db_path=db_path, encrypted=False) thread = await store2.get_thread("w1", "t1") @@ -249,12 +248,11 @@ async def test_create_and_get_session(self, session_store): @pytest.mark.asyncio async def test_session_expiry(self, session_store): - await session_store.create_session( - session_id="s_exp", user_id="bob", ttl=1 - ) + await session_store.create_session(session_id="s_exp", user_id="bob", ttl=1) session = await session_store.get_session("s_exp") assert session is not None import asyncio + await asyncio.sleep(1.1) expired = await session_store.get_session("s_exp") assert expired is None From cb2d03adb918e856ab2e1a2ba94afa2046e1842a Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Tue, 14 Apr 2026 17:51:20 -0700 Subject: [PATCH 08/68] Fix unused variable and unsorted imports Co-Authored-By: Claude Opus 4.6 (1M context) --- pywry/pywry/chat/providers/deepagent.py | 3 +++ pywry/tests/test_deepagent_provider.py | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/pywry/pywry/chat/providers/deepagent.py b/pywry/pywry/chat/providers/deepagent.py index f9eafef..064d9c6 100644 --- a/pywry/pywry/chat/providers/deepagent.py +++ b/pywry/pywry/chat/providers/deepagent.py @@ -16,8 +16,10 @@ from . import ChatProvider + if TYPE_CHECKING: import asyncio + from collections.abc import AsyncIterator from ..models import ContentBlock @@ -227,6 +229,7 @@ def _create_checkpointer(self) -> Any: backend = get_state_backend() if backend == StateBackend.REDIS: from langgraph.checkpoint.redis import RedisSaver + from ...config import get_settings return RedisSaver(get_settings().deploy.redis_url) diff --git a/pywry/tests/test_deepagent_provider.py b/pywry/tests/test_deepagent_provider.py index 733d533..20f691a 100644 --- a/pywry/tests/test_deepagent_provider.py +++ b/pywry/tests/test_deepagent_provider.py @@ -83,7 +83,7 @@ async def test_initialize_returns_capabilities(self): @pytest.mark.asyncio async def test_initialize_with_checkpointer_enables_load(self): - langgraph = pytest.importorskip("langgraph") + pytest.importorskip("langgraph") from langgraph.checkpoint.memory import MemorySaver agent = FakeAgent([]) From 28f8e23ce21de752bebcc85003793462ce5510ea Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Tue, 14 Apr 2026 17:59:45 -0700 Subject: [PATCH 09/68] Fix mypy errors across chat providers, state backend, and factory - models.py: remove unused type:ignore comments - providers/__init__.py: annotate return from getattr to satisfy no-any-return - providers/stdio.py: annotate session_id as str - providers/deepagent.py: add type:ignore for optional dep imports, use alias names in ToolCallUpdate constructors for mypy pydantic plugin, type _map_todo_status return as Literal - state/sqlite.py: type:ignore pysqlcipher3 import, annotate conn and cost variables - state/_factory.py: use MemoryEventBus/MemoryConnectionRouter directly for SQLite backend (no db_path needed) Co-Authored-By: Claude Opus 4.6 (1M context) --- pywry/pywry/chat/models.py | 6 ++---- pywry/pywry/chat/providers/__init__.py | 3 ++- pywry/pywry/chat/providers/deepagent.py | 22 +++++++++++----------- pywry/pywry/chat/providers/stdio.py | 2 +- pywry/pywry/state/_factory.py | 12 ++---------- pywry/pywry/state/sqlite.py | 7 ++++--- 6 files changed, 22 insertions(+), 30 deletions(-) diff --git a/pywry/pywry/chat/models.py b/pywry/pywry/chat/models.py index e6830c3..9430823 100644 --- a/pywry/pywry/chat/models.py +++ b/pywry/pywry/chat/models.py @@ -266,8 +266,7 @@ class ACPToolCall(BaseModel): kind: ToolCallKind = "other" status: ToolCallStatus = "pending" arguments: dict[str, Any] = Field(default_factory=dict) - content: list[ContentBlock] | None = None # type: ignore[assignment] - locations: list[ToolCallLocation] | None = None + content: list[ContentBlock] | None = None locations: list[ToolCallLocation] | None = None class ACPCommandInput(BaseModel): @@ -329,8 +328,7 @@ class ChatMessage(BaseModel): """ role: Literal["user", "assistant", "system", "tool"] - content: str | list[ContentBlock] = "" # type: ignore[assignment] - message_id: str = Field(default_factory=lambda: f"msg_{uuid.uuid4().hex[:12]}") + content: str | list[ContentBlock] = "" message_id: str = Field(default_factory=lambda: f"msg_{uuid.uuid4().hex[:12]}") timestamp: float = Field(default_factory=time.time) metadata: dict[str, Any] = Field(default_factory=dict) tool_calls: list[ACPToolCall] | None = None diff --git a/pywry/pywry/chat/providers/__init__.py b/pywry/pywry/chat/providers/__init__.py index 17e5f9e..1dfd8c9 100644 --- a/pywry/pywry/chat/providers/__init__.py +++ b/pywry/pywry/chat/providers/__init__.py @@ -208,4 +208,5 @@ def get_provider(name: str, **kwargs: Any) -> ChatProvider: # Convention: each module exports a class named {Name}Provider cls_name = name.capitalize() + "Provider" cls = getattr(module, cls_name) - return cls(**kwargs) + result: ChatProvider = cls(**kwargs) + return result diff --git a/pywry/pywry/chat/providers/deepagent.py b/pywry/pywry/chat/providers/deepagent.py index 064d9c6..5694f02 100644 --- a/pywry/pywry/chat/providers/deepagent.py +++ b/pywry/pywry/chat/providers/deepagent.py @@ -12,7 +12,7 @@ import logging import uuid -from typing import TYPE_CHECKING, Any +from typing import TYPE_CHECKING, Any, Literal from . import ChatProvider @@ -100,8 +100,8 @@ def _map_tool_kind(tool_name: str) -> str: return _TOOL_KIND_MAP.get(tool_name, "other") -def _map_todo_status(status: str) -> str: - status_map = { +def _map_todo_status(status: str) -> Literal["pending", "in_progress", "completed"]: + status_map: dict[str, Literal["pending", "in_progress", "completed"]] = { "todo": "pending", "in_progress": "in_progress", "in-progress": "in_progress", @@ -228,14 +228,14 @@ def _create_checkpointer(self) -> Any: backend = get_state_backend() if backend == StateBackend.REDIS: - from langgraph.checkpoint.redis import RedisSaver + from langgraph.checkpoint.redis import RedisSaver # type: ignore[import-not-found] from ...config import get_settings return RedisSaver(get_settings().deploy.redis_url) if backend == StateBackend.SQLITE: try: - from langgraph.checkpoint.sqlite import SqliteSaver + from langgraph.checkpoint.sqlite import SqliteSaver # type: ignore[import-not-found] from ...config import get_settings @@ -247,7 +247,7 @@ def _create_checkpointer(self) -> Any: logger.debug("Could not auto-configure checkpointer from state backend", exc_info=True) try: - from langgraph.checkpoint.memory import MemorySaver + from langgraph.checkpoint.memory import MemorySaver # type: ignore[import-not-found] return MemorySaver() except ImportError: @@ -256,7 +256,7 @@ def _create_checkpointer(self) -> Any: def _create_store(self) -> Any: try: - from langgraph.store.memory import InMemoryStore + from langgraph.store.memory import InMemoryStore # type: ignore[import-not-found] return InMemoryStore() except ImportError: @@ -264,7 +264,7 @@ def _create_store(self) -> Any: return None def _build_agent(self) -> Any: - from deepagents import create_deep_agent + from deepagents import create_deep_agent # type: ignore[import-not-found] combined_prompt = PYWRY_SYSTEM_PROMPT if self._system_prompt: @@ -387,7 +387,7 @@ async def prompt( elif kind == "on_tool_start": tool_name = event.get("name", "") yield ToolCallUpdate( - tool_call_id=event.get("run_id", f"call_{uuid.uuid4().hex[:8]}"), + toolCallId=event.get("run_id", f"call_{uuid.uuid4().hex[:8]}"), name=tool_name, kind=_map_tool_kind(tool_name), status="in_progress", @@ -400,7 +400,7 @@ async def prompt( elif kind == "on_tool_error": tool_name = event.get("name", "") yield ToolCallUpdate( - tool_call_id=event.get("run_id", f"call_{uuid.uuid4().hex[:8]}"), + toolCallId=event.get("run_id", f"call_{uuid.uuid4().hex[:8]}"), name=tool_name, kind=_map_tool_kind(tool_name), status="failed", @@ -443,7 +443,7 @@ async def _handle_tool_end(self, event: dict[str, Any]) -> AsyncIterator[Session logger.debug("Could not parse write_todos output", exc_info=True) yield ToolCallUpdate( - tool_call_id=run_id or f"call_{uuid.uuid4().hex[:8]}", + toolCallId=run_id or f"call_{uuid.uuid4().hex[:8]}", name=tool_name, kind=_map_tool_kind(tool_name), status="completed", diff --git a/pywry/pywry/chat/providers/stdio.py b/pywry/pywry/chat/providers/stdio.py index f815f03..e2c07aa 100644 --- a/pywry/pywry/chat/providers/stdio.py +++ b/pywry/pywry/chat/providers/stdio.py @@ -275,7 +275,7 @@ async def new_session( "mcpServers": mcp_servers or [], }, ) - session_id = result.get("sessionId", "") + session_id: str = result.get("sessionId", "") self._update_queues[session_id] = asyncio.Queue() return session_id diff --git a/pywry/pywry/state/_factory.py b/pywry/pywry/state/_factory.py index c239535..9237010 100644 --- a/pywry/pywry/state/_factory.py +++ b/pywry/pywry/state/_factory.py @@ -210,10 +210,7 @@ def get_event_bus() -> EventBus: ) if backend == StateBackend.SQLITE: - from .sqlite import SqliteEventBus - - settings = _get_deploy_settings() - return SqliteEventBus(db_path=getattr(settings, "sqlite_path", "~/.config/pywry/pywry.db")) + return MemoryEventBus() return MemoryEventBus() @@ -247,12 +244,7 @@ def get_connection_router() -> ConnectionRouter: ) if backend == StateBackend.SQLITE: - from .sqlite import SqliteConnectionRouter - - settings = _get_deploy_settings() - return SqliteConnectionRouter( - db_path=getattr(settings, "sqlite_path", "~/.config/pywry/pywry.db") - ) + return MemoryConnectionRouter() return MemoryConnectionRouter() diff --git a/pywry/pywry/state/sqlite.py b/pywry/pywry/state/sqlite.py index 4140572..b86f3dc 100644 --- a/pywry/pywry/state/sqlite.py +++ b/pywry/pywry/state/sqlite.py @@ -222,9 +222,9 @@ def _connect(self) -> sqlite3.Connection: if self._encrypted and self._key: try: - from pysqlcipher3 import dbapi2 as sqlcipher + from pysqlcipher3 import dbapi2 as sqlcipher # type: ignore[import-not-found] - conn = sqlcipher.connect(str(self._db_path)) + conn: sqlite3.Connection = sqlcipher.connect(str(self._db_path)) conn.execute(f"PRAGMA key = '{self._key}'") logger.debug("Opened encrypted SQLite database at %s", self._db_path) except ImportError: @@ -846,7 +846,8 @@ async def get_total_cost( widget_id: str | None = None, ) -> float: stats = await self.get_usage_stats(thread_id=thread_id, widget_id=widget_id) - return stats["cost_usd"] + cost: float = stats["cost_usd"] + return cost async def search_messages( self, From db3955ea136226acbb11dfacd267a9137e84b271 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Tue, 14 Apr 2026 18:05:00 -0700 Subject: [PATCH 10/68] Fix syntax error in models.py from collapsed lines The previous type:ignore removal merged two statements onto one line, causing a SyntaxError that broke every test. Co-Authored-By: Claude Opus 4.6 (1M context) --- pywry/pywry/chat/models.py | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/pywry/pywry/chat/models.py b/pywry/pywry/chat/models.py index 9430823..f23d6d3 100644 --- a/pywry/pywry/chat/models.py +++ b/pywry/pywry/chat/models.py @@ -266,7 +266,8 @@ class ACPToolCall(BaseModel): kind: ToolCallKind = "other" status: ToolCallStatus = "pending" arguments: dict[str, Any] = Field(default_factory=dict) - content: list[ContentBlock] | None = None locations: list[ToolCallLocation] | None = None + content: list[ContentBlock] | None = None + locations: list[ToolCallLocation] | None = None class ACPCommandInput(BaseModel): @@ -328,7 +329,8 @@ class ChatMessage(BaseModel): """ role: Literal["user", "assistant", "system", "tool"] - content: str | list[ContentBlock] = "" message_id: str = Field(default_factory=lambda: f"msg_{uuid.uuid4().hex[:12]}") + content: str | list[ContentBlock] = "" + message_id: str = Field(default_factory=lambda: f"msg_{uuid.uuid4().hex[:12]}") timestamp: float = Field(default_factory=time.time) metadata: dict[str, Any] = Field(default_factory=dict) tool_calls: list[ACPToolCall] | None = None From 8068339de867d57bb536aaa6e1955cb986ee5f4b Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Tue, 14 Apr 2026 18:09:59 -0700 Subject: [PATCH 11/68] Fix mypy unused-ignore for langgraph.checkpoint.sqlite import Co-Authored-By: Claude Opus 4.6 (1M context) --- pywry/pywry/chat/providers/deepagent.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pywry/pywry/chat/providers/deepagent.py b/pywry/pywry/chat/providers/deepagent.py index 5694f02..19265a1 100644 --- a/pywry/pywry/chat/providers/deepagent.py +++ b/pywry/pywry/chat/providers/deepagent.py @@ -235,7 +235,7 @@ def _create_checkpointer(self) -> Any: return RedisSaver(get_settings().deploy.redis_url) if backend == StateBackend.SQLITE: try: - from langgraph.checkpoint.sqlite import SqliteSaver # type: ignore[import-not-found] + from langgraph.checkpoint.sqlite import SqliteSaver # type: ignore[import-not-found,unused-ignore] from ...config import get_settings From 12ce8c7ea6652449d5056c97619d60ff38e463d9 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Tue, 14 Apr 2026 18:24:45 -0700 Subject: [PATCH 12/68] Add missing docs for DeepagentProvider, SQLite state backend, and audit trail - chat-providers.md: add DeepagentProvider mkdocstrings entry - state.md: add ChatStore ABC, SqliteWidgetStore, SqliteSessionStore, SqliteChatStore mkdocstrings entries - reference/index.md: update state description to include SQLite - state-and-auth.md: add SQLite section with audit trail details, encryption, auto-admin setup, config table entry - deploy-mode.md: update backend value to include "sqlite" - configuration.md: document sqlite_path setting Co-Authored-By: Claude Opus 4.6 (1M context) --- pywry/docs/docs/guides/configuration.md | 3 ++- pywry/docs/docs/guides/deploy-mode.md | 2 +- pywry/docs/docs/guides/state-and-auth.md | 26 +++++++++++++++++-- .../docs/integrations/chat/chat-providers.md | 6 +++++ pywry/docs/docs/reference/index.md | 2 +- pywry/docs/docs/reference/state.md | 26 +++++++++++++++++++ 6 files changed, 60 insertions(+), 5 deletions(-) diff --git a/pywry/docs/docs/guides/configuration.md b/pywry/docs/docs/guides/configuration.md index f0dd116..e5c54ac 100644 --- a/pywry/docs/docs/guides/configuration.md +++ b/pywry/docs/docs/guides/configuration.md @@ -66,7 +66,8 @@ auto_start = true websocket_require_token = true [deploy] -state_backend = "memory" # or "redis" +state_backend = "memory" # "memory", "sqlite", or "redis" +sqlite_path = "~/.config/pywry/pywry.db" redis_url = "redis://localhost:6379/0" ``` diff --git a/pywry/docs/docs/guides/deploy-mode.md b/pywry/docs/docs/guides/deploy-mode.md index a3be30f..e2b0539 100644 --- a/pywry/docs/docs/guides/deploy-mode.md +++ b/pywry/docs/docs/guides/deploy-mode.md @@ -175,7 +175,7 @@ Redis key structure: `{prefix}:widget:{widget_id}` (hash), `{prefix}:widgets:act from pywry.state import is_deploy_mode, get_state_backend, get_worker_id deploy_active = is_deploy_mode() # True when PYWRY_DEPLOY__ENABLED=true -backend = get_state_backend().value # "memory" or "redis" +backend = get_state_backend().value # "memory", "redis", or "sqlite" worker_id = get_worker_id() # Unique per-process identifier ``` diff --git a/pywry/docs/docs/guides/state-and-auth.md b/pywry/docs/docs/guides/state-and-auth.md index c081503..53a07c2 100644 --- a/pywry/docs/docs/guides/state-and-auth.md +++ b/pywry/docs/docs/guides/state-and-auth.md @@ -14,7 +14,7 @@ The state layer is made of four pluggable stores and a callback registry: | **SessionStore** | User sessions, roles, and permissions | | **CallbackRegistry** | Python callback dispatch (always local) | -Each store has two implementations — `Memory*` for single-process use and `Redis*` for multi-worker deployments. A factory layer auto-selects the right one based on configuration. +Each store has three implementations — `Memory*` for ephemeral single-process use, `Sqlite*` for persistent local storage with encryption, and `Redis*` for multi-worker deployments. A factory layer auto-selects the right one based on configuration. ## State Backends @@ -29,6 +29,27 @@ store = get_widget_store() # MemoryWidgetStore sessions = get_session_store() # MemorySessionStore ``` +### SQLite (local persistent) + +Persists all state to an encrypted SQLite database file. Data survives process restarts without requiring an external server. The database is encrypted at rest using SQLCipher when available, with keys managed through the OS keyring. + +```bash +export PYWRY_DEPLOY__STATE_BACKEND=sqlite +export PYWRY_DEPLOY__SQLITE_PATH=~/.config/pywry/pywry.db +``` + +The SQLite backend includes a `ChatStore` with audit trail extensions not available in the Memory or Redis backends: + +- **Tool call logging** — every tool invocation with arguments, result, timing, and error status +- **Artifact logging** — generated code blocks, charts, tables, and other artifacts +- **Token usage tracking** — prompt tokens, completion tokens, total tokens, and cost per message +- **Resource references** — URIs, MIME types, and sizes of files the agent read or produced +- **Skill activations** — which skills were loaded during a conversation +- **Full-text search** — search across all message content with `search_messages()` +- **Cost aggregation** — `get_usage_stats()` and `get_total_cost()` across threads or widgets + +On first initialization, the SQLite backend auto-creates a default admin session (`session_id="local"`, `user_id="admin"`, `roles=["admin"]`) and seeds the standard role permission table. This means RBAC works identically to deploy mode — the same `check_permission()` calls, the same role hierarchy — with one permanent admin user. + ### Redis (production) Enables horizontal scaling across multiple workers/processes. Widgets registered by one worker are visible to all others. Events published on one worker are received by subscribers on every worker. @@ -56,7 +77,8 @@ All settings are controlled via `DeploySettings` and read from environment varia | Variable | Default | Description | |:---|:---|:---| -| `STATE_BACKEND` | `memory` | `memory` or `redis` | +| `STATE_BACKEND` | `memory` | `memory`, `sqlite`, or `redis` | +| `SQLITE_PATH` | `~/.config/pywry/pywry.db` | Path to SQLite database file | | `REDIS_URL` | `redis://localhost:6379/0` | Redis connection URL | | `REDIS_PREFIX` | `pywry` | Key namespace prefix | | `REDIS_POOL_SIZE` | `10` | Connection pool size (1–100) | diff --git a/pywry/docs/docs/integrations/chat/chat-providers.md b/pywry/docs/docs/integrations/chat/chat-providers.md index bb0ba65..36f7cf6 100644 --- a/pywry/docs/docs/integrations/chat/chat-providers.md +++ b/pywry/docs/docs/integrations/chat/chat-providers.md @@ -48,6 +48,12 @@ These classes implement the ACP session lifecycle (`initialize`, `new_session`, heading_level: 2 members: true +::: pywry.chat.providers.deepagent.DeepagentProvider + options: + show_root_heading: true + heading_level: 2 + members: true + --- ## Factory diff --git a/pywry/docs/docs/reference/index.md b/pywry/docs/docs/reference/index.md index 907b1ca..e4e9b91 100644 --- a/pywry/docs/docs/reference/index.md +++ b/pywry/docs/docs/reference/index.md @@ -50,7 +50,7 @@ Complete API documentation for PyWry. | Module | Description | |--------|-------------| -| [State](state.md) | `WidgetStore`, `EventBus`, `CallbackRegistry`, Redis backend | +| [State](state.md) | `WidgetStore`, `EventBus`, `ChatStore`, `SessionStore`, Memory/Redis/SQLite backends | | [State Mixins](state-mixins.md) | Grid, Plotly, TVChart, Toolbar state mixins | ## Toolbar & Modal diff --git a/pywry/docs/docs/reference/state.md b/pywry/docs/docs/reference/state.md index a31d5c4..d58646a 100644 --- a/pywry/docs/docs/reference/state.md +++ b/pywry/docs/docs/reference/state.md @@ -79,6 +79,32 @@ State management interfaces and implementations. heading_level: 2 members_order: source +::: pywry.state.ChatStore + options: + show_root_heading: true + heading_level: 2 + members_order: source + +--- + +## SQLite Implementations + +::: pywry.state.sqlite.SqliteWidgetStore + options: + show_root_heading: true + heading_level: 2 + +::: pywry.state.sqlite.SqliteSessionStore + options: + show_root_heading: true + heading_level: 2 + +::: pywry.state.sqlite.SqliteChatStore + options: + show_root_heading: true + heading_level: 2 + members: true + --- ## Data Types From f41f15e685992bf1bd053ac4ddde46b5ddca2e05 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Tue, 14 Apr 2026 18:27:09 -0700 Subject: [PATCH 13/68] Use bare type:ignore for langgraph.checkpoint.sqlite import Co-Authored-By: Claude Opus 4.6 (1M context) --- pywry/pywry/chat/providers/deepagent.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pywry/pywry/chat/providers/deepagent.py b/pywry/pywry/chat/providers/deepagent.py index 19265a1..4790e56 100644 --- a/pywry/pywry/chat/providers/deepagent.py +++ b/pywry/pywry/chat/providers/deepagent.py @@ -235,7 +235,7 @@ def _create_checkpointer(self) -> Any: return RedisSaver(get_settings().deploy.redis_url) if backend == StateBackend.SQLITE: try: - from langgraph.checkpoint.sqlite import SqliteSaver # type: ignore[import-not-found,unused-ignore] + from langgraph.checkpoint.sqlite import SqliteSaver # type: ignore from ...config import get_settings From 0e88500399397b0c9c3fc253ba91db5d844b4e76 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Tue, 14 Apr 2026 19:39:13 -0700 Subject: [PATCH 14/68] Remove all legacy/backward language from entire codebase - manager.py: renamed _process_legacy_item to _process_handler_item, removed "legacy" from docstrings - test_chat_protocol.py: renamed TestLegacyHandlerWithNewUpdates - auth/deploy_routes.py: removed "legacy alias" comment - cli.py: removed "backwards compatibility" comment - inline.py, templates.py: removed "legacy template" from JS comments - tvchart/__init__.py: removed "backward compatibility" from docstring - tvchart/udf.py: removed "legacy" from docstring - mcp/skills/__init__.py: removed "backward compatibility" from docstring - test_mcp_unit.py: removed "legacy" from comment - test_plotly_theme_merge.py: renamed legacy -> single in test names, comments, and JS template strings - test_plotly_theme_merge_e2e.py: renamed storedLegacy -> storedSingle - test_tvchart.py: renamed test_symbol_info_legacy_alias, removed "backward compat" from docstrings Co-Authored-By: Claude Opus 4.6 (1M context) --- pywry/pywry/auth/deploy_routes.py | 2 +- pywry/pywry/chat/manager.py | 14 +++++++------- pywry/pywry/cli.py | 2 +- pywry/pywry/inline.py | 2 +- pywry/pywry/mcp/skills/__init__.py | 2 +- pywry/pywry/templates.py | 2 +- pywry/pywry/tvchart/__init__.py | 4 ++-- pywry/pywry/tvchart/udf.py | 2 +- pywry/tests/test_chat_protocol.py | 4 ++-- pywry/tests/test_mcp_unit.py | 2 +- pywry/tests/test_plotly_theme_merge.py | 14 +++++++------- pywry/tests/test_plotly_theme_merge_e2e.py | 9 ++++----- pywry/tests/test_tvchart.py | 8 ++++---- 13 files changed, 33 insertions(+), 34 deletions(-) diff --git a/pywry/pywry/auth/deploy_routes.py b/pywry/pywry/auth/deploy_routes.py index 995fae5..5f7be41 100644 --- a/pywry/pywry/auth/deploy_routes.py +++ b/pywry/pywry/auth/deploy_routes.py @@ -206,7 +206,7 @@ def _get_store_for_testing(self) -> dict[str, dict[str, Any]]: # For multi-worker deploy, this should be replaced with a Redis-backed store. _auth_state_store = AuthStateStore() -# Legacy alias kept for test compatibility +# Alias used by tests _pending_auth_states = _auth_state_store._get_store_for_testing() diff --git a/pywry/pywry/chat/manager.py b/pywry/pywry/chat/manager.py index 15bb860..b73a0fa 100644 --- a/pywry/pywry/chat/manager.py +++ b/pywry/pywry/chat/manager.py @@ -280,14 +280,14 @@ class ChatManager: Handles event wiring, thread management, streaming, cancellation, and state synchronization. Accepts either a ``ChatProvider`` instance - (ACP session lifecycle) or a handler function (legacy interface). + (ACP session lifecycle) or a handler function. Parameters ---------- provider : ChatProvider | None ACP-conformant provider instance. handler : callable | None - Legacy handler function ``(messages, ctx) -> str | Iterator``. + Handler function ``(messages, ctx) -> str | Iterator``. Exactly one of ``provider`` or ``handler`` must be supplied. system_prompt : str System prompt prepended to every request. @@ -918,16 +918,16 @@ def _dispatch_session_update( if isinstance(update.artifact, _ArtifactBase): self._dispatch_artifact(update.artifact, state.message_id, thread_id) - def _process_legacy_item( + def _process_handler_item( self, item: Any, state: _StreamState, thread_id: str, ctx: ChatContext | None, ) -> None: - """Dispatch a legacy handler yield item. + """Dispatch a handler yield item. - Handles plain strings, old-style response types, and artifacts. + Handles plain strings, SessionUpdate objects, and artifacts. """ # Check if it's a SessionUpdate first (new-style) if hasattr(item, "session_update"): @@ -1020,7 +1020,7 @@ def _handle_stream( if cancel.is_set(): self._handle_cancel(state, thread_id) return - self._process_legacy_item(item, state, thread_id, ctx) + self._process_handler_item(item, state, thread_id, ctx) if cancel.is_set(): self._handle_cancel(state, thread_id) else: @@ -1048,7 +1048,7 @@ async def _handle_async_stream( if cancel.is_set(): self._handle_cancel(state, thread_id) return - self._process_legacy_item(item, state, thread_id, ctx) + self._process_handler_item(item, state, thread_id, ctx) if not typing_hidden: self._emit( "chat:typing-indicator", diff --git a/pywry/pywry/cli.py b/pywry/pywry/cli.py index e6af88f..41148a5 100644 --- a/pywry/pywry/cli.py +++ b/pywry/pywry/cli.py @@ -329,7 +329,7 @@ def handle_mcp(args: argparse.Namespace) -> int: elif args.native: headless = False elif os.environ.get("PYWRY_HEADLESS") is not None: - # Env var takes precedence over config for backwards compatibility + # Env var takes precedence over config headless = os.environ.get("PYWRY_HEADLESS", "0") == "1" else: headless = mcp_config.headless diff --git a/pywry/pywry/inline.py b/pywry/pywry/inline.py index 960f9b3..398fbce 100644 --- a/pywry/pywry/inline.py +++ b/pywry/pywry/inline.py @@ -2677,7 +2677,7 @@ def generate_plotly_html( delete plotlyConfig.templateDark; delete plotlyConfig.templateLight; - // Extract single legacy template from layout + // Extract single template from layout let userTemplate = null; const templates = window.PYWRY_PLOTLY_TEMPLATES || {{}}; const themeTemplate = '{"plotly_dark" if theme == "dark" else "plotly_white"}'; diff --git a/pywry/pywry/mcp/skills/__init__.py b/pywry/pywry/mcp/skills/__init__.py index 1accf8a..89140d6 100644 --- a/pywry/pywry/mcp/skills/__init__.py +++ b/pywry/pywry/mcp/skills/__init__.py @@ -140,7 +140,7 @@ def list_skills() -> list[dict[str, str]]: def get_all_skills() -> dict[str, dict[str, str]]: - """Get all skills with full guidance (for backward compatibility). + """Get all skills with full guidance. Returns ------- diff --git a/pywry/pywry/templates.py b/pywry/pywry/templates.py index 7e4c980..7abfc8c 100644 --- a/pywry/pywry/templates.py +++ b/pywry/pywry/templates.py @@ -251,7 +251,7 @@ def build_plotly_init_script( delete config.templateDark; delete config.templateLight; - // Extract single legacy template overrides from layout.template + // Extract single template overrides from layout.template var userTemplate = null; if (typeof layout.template === 'string' && templates[layout.template]) {{ // User specified a named template - resolve it diff --git a/pywry/pywry/tvchart/__init__.py b/pywry/pywry/tvchart/__init__.py index c8a3db8..a2adf26 100644 --- a/pywry/pywry/tvchart/__init__.py +++ b/pywry/pywry/tvchart/__init__.py @@ -1,7 +1,7 @@ """TradingView chart package — models, normalization, toolbars, mixin, datafeed. -All public symbols are re-exported here for backward compatibility so that -``from pywry.tvchart import ...`` continues to work. +All public symbols are re-exported here so that +``from pywry.tvchart import ...`` works. """ from __future__ import annotations diff --git a/pywry/pywry/tvchart/udf.py b/pywry/pywry/tvchart/udf.py index 9fc6ffa..cb8b6f4 100644 --- a/pywry/pywry/tvchart/udf.py +++ b/pywry/pywry/tvchart/udf.py @@ -184,7 +184,7 @@ def parse_udf_columns(data: dict[str, Any], count: int | None = None) -> list[di def _map_symbol_keys(raw: dict[str, Any]) -> dict[str, Any]: - """Map UDF hyphen-case / legacy keys to TVChartSymbolInfo field names.""" + """Map UDF hyphen-case keys to TVChartSymbolInfo field names.""" mapped: dict[str, Any] = {} for key, val in raw.items(): canonical = _UDF_SYMBOL_KEY_MAP.get(key, key.replace("-", "_")) diff --git a/pywry/tests/test_chat_protocol.py b/pywry/tests/test_chat_protocol.py index 89e2c57..462bf6b 100644 --- a/pywry/tests/test_chat_protocol.py +++ b/pywry/tests/test_chat_protocol.py @@ -619,8 +619,8 @@ def my_prompt(session_id, content, cancel_event): assert len(done_chunks) >= 1 -class TestLegacyHandlerWithNewUpdates: - """Verify legacy handler functions can yield new SessionUpdate types.""" +class TestHandlerWithSessionUpdates: + """Verify handler functions can yield SessionUpdate types alongside strings.""" def test_handler_yields_mixed_strings_and_updates(self): def handler(messages, ctx): diff --git a/pywry/tests/test_mcp_unit.py b/pywry/tests/test_mcp_unit.py index 908202a..49e2fa0 100644 --- a/pywry/tests/test_mcp_unit.py +++ b/pywry/tests/test_mcp_unit.py @@ -782,7 +782,7 @@ def test_resources_include_skills(self) -> None: resources = get_resources() uris = [str(r.uri) for r in resources] - # Verify no legacy pywry://skill/ URIs remain + # Verify no pywry://skill/ URIs remain assert not any("pywry://skill/" in uri for uri in uris) def test_get_resource_templates(self) -> None: diff --git a/pywry/tests/test_plotly_theme_merge.py b/pywry/tests/test_plotly_theme_merge.py index 623ab33..ece24b4 100644 --- a/pywry/tests/test_plotly_theme_merge.py +++ b/pywry/tests/test_plotly_theme_merge.py @@ -446,7 +446,7 @@ def test_light_theme_picks_light_user_template(self) -> None: assert result["layout"]["paper_bgcolor"] == "#CUSTOM_LIGHT" assert result["layout"]["font"]["color"] == "#333" # base light font - def test_fallback_to_legacy_template_when_no_dual(self) -> None: + def test_fallback_to_single_template_when_no_dual(self) -> None: """When only a single template is provided, it applies to both modes.""" result = _run_js_json(""" PYWRY_PLOTLY_TEMPLATES = { @@ -455,21 +455,21 @@ def test_fallback_to_legacy_template_when_no_dual(self) -> None: var plotDiv = {}; var merged = mergeThemeTemplate( plotDiv, 'plotly_dark', - {layout: {paper_bgcolor: '#LEGACY'}}, // single/legacy + {layout: {paper_bgcolor: '#SINGLE'}}, // single template null, null // no dual templates ); console.log(JSON.stringify(merged)); """) - assert result["layout"]["paper_bgcolor"] == "#LEGACY" + assert result["layout"]["paper_bgcolor"] == "#SINGLE" - def test_legacy_fallback_also_applies_on_light(self) -> None: - """Single/legacy template also works for light mode.""" + def test_single_template_fallback_also_applies_on_light(self) -> None: + """Single template also works for light mode.""" result = _run_js_json(""" PYWRY_PLOTLY_TEMPLATES = { plotly_white: {layout: {paper_bgcolor: '#fff'}} }; var plotDiv = {}; - // First call with legacy template + // First call with single template mergeThemeTemplate(plotDiv, 'plotly_white', {layout: {font: {size: 20}}}, null, null); // Second call: theme toggle (no new templates — reads from stored) var merged = mergeThemeTemplate(plotDiv, 'plotly_white', null, null, null); @@ -527,7 +527,7 @@ def test_unknown_theme_name_returns_override_only(self) -> None: console.log(JSON.stringify(merged)); """) # "nonexistent_theme" doesn't contain 'dark', so it's treated as light - # No light template provided, no legacy template -> base is empty + # No light template provided, no single template -> base is empty assert result == {} def test_dark_override_with_complex_nested_values(self) -> None: diff --git a/pywry/tests/test_plotly_theme_merge_e2e.py b/pywry/tests/test_plotly_theme_merge_e2e.py index 80adcd4..66ec94f 100644 --- a/pywry/tests/test_plotly_theme_merge_e2e.py +++ b/pywry/tests/test_plotly_theme_merge_e2e.py @@ -49,7 +49,7 @@ def _read_chart_template_state(label: str) -> dict | None: - fontFamily: str - the rendered font family (if set) - storedDark: bool - whether __pywry_user_template_dark__ is on the div - storedLight: bool - whether __pywry_user_template_light__ is on the div - - storedLegacy: bool - whether __pywry_user_template__ is on the div + - storedSingle: bool - whether __pywry_user_template__ is on the div - baseDarkPaperBg: str - the base plotly_dark template's paper_bgcolor - baseLightPaperBg: str - the base plotly_white template's paper_bgcolor """ @@ -72,7 +72,7 @@ def _read_chart_template_state(label: str) -> dict | None: fontFamily: plotDiv && plotDiv._fullLayout ? (plotDiv._fullLayout.font.family || null) : null, storedDark: plotDiv ? !!plotDiv.__pywry_user_template_dark__ : false, storedLight: plotDiv ? !!plotDiv.__pywry_user_template_light__ : false, - storedLegacy: plotDiv ? !!plotDiv.__pywry_user_template__ : false, + storedSingle: plotDiv ? !!plotDiv.__pywry_user_template__ : false, baseDarkPaperBg: templates.plotly_dark ? templates.plotly_dark.layout.paper_bgcolor : null, baseLightPaperBg: templates.plotly_white ? templates.plotly_white.layout.paper_bgcolor : null }); @@ -161,9 +161,8 @@ def test_dual_templates_stored_on_dom(self, dark_app) -> None: # Both templates must be persisted on the DOM element assert result["storedDark"], "template_dark not stored on plot div!" assert result["storedLight"], "template_light not stored on plot div!" - # Legacy single template should NOT be stored when dual templates are used - assert not result["storedLegacy"], ( - "Legacy template should NOT be stored when dual templates given!" + assert not result["storedSingle"], ( + "Single template should not be stored when dual templates are given" ) def test_base_theme_values_kept_where_not_overridden(self, dark_app) -> None: diff --git a/pywry/tests/test_tvchart.py b/pywry/tests/test_tvchart.py index 8e221bf..8677771 100644 --- a/pywry/tests/test_tvchart.py +++ b/pywry/tests/test_tvchart.py @@ -630,7 +630,7 @@ def test_symbol_info_price_sources(self): assert len(dumped["price_sources"]) == 2 assert dumped["price_source_id"] == "1" - def test_symbol_info_legacy_alias(self): + def test_symbol_info_alias(self): info = TVChartSymbolInfo( name="X", description="", exchange="", listed_exchange="", symbol_type="futures" ) @@ -1563,11 +1563,11 @@ def test_settings_row_helpers_exist(self, tvchart_defaults_js: str): def test_scales_settings_uses_full_value_label(self, tvchart_defaults_js: str): """The scales tab must use the full 'Value according to scale' label. A truncated 'Value according to sc...' label broke the settings key - mapping. Backward compat fallback must also exist.""" + mapping. Fallback for the truncated key must also exist.""" assert "'Value according to scale'" in tvchart_defaults_js - # The old truncated key must NOT be used in addSelectRow calls + # The truncated key must NOT be used in addSelectRow calls assert "addSelectRow(scalesSection, 'Value according to sc...'" not in tvchart_defaults_js - # Backward-compatible fallback for layouts saved with the old key + # Fallback for layouts saved with the truncated key assert "'Value according to sc...'" in tvchart_defaults_js # ------------------------------------------------------------------ From eb6f353ae7b999cd1acc3b0f6ce328e77a1b5ee8 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Tue, 14 Apr 2026 20:42:19 -0700 Subject: [PATCH 15/68] Fix CallbackProvider prompt() to handle sync generators correctly Check for iterators (__next__) after coroutines and strings, not before. Using __iter__ matched strings; __next__ correctly identifies generators and iterators without matching strings. Co-Authored-By: Claude Opus 4.6 (1M context) --- pywry/pywry/chat/providers/callback.py | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/pywry/pywry/chat/providers/callback.py b/pywry/pywry/chat/providers/callback.py index aa16d90..e89c91a 100644 --- a/pywry/pywry/chat/providers/callback.py +++ b/pywry/pywry/chat/providers/callback.py @@ -111,6 +111,7 @@ async def prompt( return result = self._prompt_fn(session_id, content, cancel_event) + if asyncio.iscoroutine(result): result = await result @@ -118,8 +119,12 @@ async def prompt( yield AgentMessageUpdate(text=result) return - async for update in self._iter_result(result, cancel_event): - yield update + if hasattr(result, "__aiter__") or hasattr(result, "__next__"): + async for update in self._iter_result(result, cancel_event): + yield update + return + + yield AgentMessageUpdate(text=str(result)) @staticmethod async def _iter_result(result: Any, cancel_event: Any) -> AsyncIterator[SessionUpdate]: From 0c828ea2823535016fe3db3124563273beb515e1 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Tue, 14 Apr 2026 21:17:38 -0700 Subject: [PATCH 16/68] Fix CallbackProvider: check generators before coroutines Python 3.10's asyncio.iscoroutine() returns True for some generator objects. Use inspect.isgenerator() and inspect.isasyncgen() to detect generators first, then inspect.iscoroutine() for strict coroutine checking. Co-Authored-By: Claude Opus 4.6 (1M context) --- pywry/pywry/chat/providers/callback.py | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/pywry/pywry/chat/providers/callback.py b/pywry/pywry/chat/providers/callback.py index e89c91a..821b180 100644 --- a/pywry/pywry/chat/providers/callback.py +++ b/pywry/pywry/chat/providers/callback.py @@ -110,9 +110,16 @@ async def prompt( yield AgentMessageUpdate(text="No prompt callback configured.") return + import inspect + result = self._prompt_fn(session_id, content, cancel_event) - if asyncio.iscoroutine(result): + if inspect.isgenerator(result) or inspect.isasyncgen(result): + async for update in self._iter_result(result, cancel_event): + yield update + return + + if inspect.iscoroutine(result): result = await result if isinstance(result, str): From f078ce6a0c5e449570e019ad7634084e430615dc Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Tue, 14 Apr 2026 21:45:57 -0700 Subject: [PATCH 17/68] Fix deploy-mode docs: add sqlite to state backend table Co-Authored-By: Claude Opus 4.6 (1M context) --- pywry/docs/docs/guides/deploy-mode.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/pywry/docs/docs/guides/deploy-mode.md b/pywry/docs/docs/guides/deploy-mode.md index e2b0539..7cd9304 100644 --- a/pywry/docs/docs/guides/deploy-mode.md +++ b/pywry/docs/docs/guides/deploy-mode.md @@ -128,7 +128,8 @@ Deploy mode is configured through environment variables (prefix `PYWRY_SERVER__` | Setting | Default | Environment variable | Description | |:---|:---|:---|:---| -| State backend | `memory` | `PYWRY_DEPLOY__STATE_BACKEND` | `memory` or `redis` | +| State backend | `memory` | `PYWRY_DEPLOY__STATE_BACKEND` | `memory`, `sqlite`, or `redis` | +| SQLite path | `~/.config/pywry/pywry.db` | `PYWRY_DEPLOY__SQLITE_PATH` | Database file path (when backend is `sqlite`) | | Redis URL | `redis://localhost:6379/0` | `PYWRY_DEPLOY__REDIS_URL` | Redis connection string | | Redis prefix | `pywry` | `PYWRY_DEPLOY__REDIS_PREFIX` | Key namespace in Redis | | Redis pool size | `10` | `PYWRY_DEPLOY__REDIS_POOL_SIZE` | Connection pool size (1–100) | From 267efc29e1cab81377cda2b1821c8e962ebeb608 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Wed, 15 Apr 2026 20:48:13 -0700 Subject: [PATCH 18/68] Address Copilot PR review: 8 issues fixed 1. Provider factory: explicit class name mapping instead of capitalize() which produced wrong names (OpenaiProvider vs OpenAIProvider) 2. PermissionRequestUpdate: add alias on request_id field so model_dump(by_alias=True) produces requestId for frontend 3. StdioProvider: map _request_id to request_id instead of stripping it, preserving correlation ID for permission flow 4. system-events.js: initialize window.pywry if missing before registering handlers, prevents undefined errors if loaded before bridge.js 5. chat-handlers.js: only prepend / to command names if not already present, preventing //foo double-slash 6. events/chat.md: replace stale InputRequiredResponse example with correct PermissionRequestUpdate usage 7. test_chat.py: add OpenAI provider factory test to cover class name resolution 8. widget.py: move asset listener registration inside render() function via __TOOLBAR_HANDLERS__ replacement where model is in scope, instead of module-level IIFE where it isn't Co-Authored-By: Claude Opus 4.6 (1M context) --- pywry/docs/docs/reference/events/chat.md | 21 ++++++---- pywry/pywry/chat/providers/__init__.py | 22 +++++----- pywry/pywry/chat/providers/stdio.py | 14 ++++--- pywry/pywry/chat/updates.py | 2 +- pywry/pywry/frontend/src/chat-handlers.js | 3 +- pywry/pywry/frontend/src/system-events.js | 7 +++- pywry/pywry/widget.py | 49 ++++++++++------------- pywry/tests/test_chat.py | 7 ++++ 8 files changed, 67 insertions(+), 58 deletions(-) diff --git a/pywry/docs/docs/reference/events/chat.md b/pywry/docs/docs/reference/events/chat.md index 69a061a..e90bdc9 100644 --- a/pywry/docs/docs/reference/events/chat.md +++ b/pywry/docs/docs/reference/events/chat.md @@ -75,16 +75,21 @@ The `chat:*` namespace handles all communication between the Python `ChatManager |-------|---------|-------------| | `chat:input-required` | `{messageId, threadId, requestId, prompt, placeholder, inputType, options?}` | Pause streaming to request user input mid-conversation. | -**`inputType` values:** `text`, `buttons`, `radio` - -Handler pattern: +Handler pattern for permission requests: ```python -def my_handler(message, ctx): - yield "Which file should I process?" - yield PermissionRequestUpdate(placeholder="Enter filename...") - filename = ctx.wait_for_input() # Blocks until user responds - yield f"Processing {filename}..." +from pywry.chat.updates import PermissionRequestUpdate +from pywry.chat.session import PermissionOption + +def my_handler(messages, ctx): + yield PermissionRequestUpdate( + toolCallId="call_1", + title="Execute deployment script", + options=[ + PermissionOption(id="allow_once", label="Allow"), + PermissionOption(id="reject_once", label="Reject"), + ], + ) ``` ## Rich Content (Python → JS) diff --git a/pywry/pywry/chat/providers/__init__.py b/pywry/pywry/chat/providers/__init__.py index 1dfd8c9..60dbf31 100644 --- a/pywry/pywry/chat/providers/__init__.py +++ b/pywry/pywry/chat/providers/__init__.py @@ -187,26 +187,24 @@ def get_provider(name: str, **kwargs: Any) -> ChatProvider: ValueError If provider name is unknown. """ - providers: dict[str, str] = { - "openai": ".openai", - "anthropic": ".anthropic", - "callback": ".callback", - "magentic": ".magentic", - "stdio": ".stdio", - "deepagent": ".deepagent", + providers: dict[str, tuple[str, str]] = { + "openai": (".openai", "OpenAIProvider"), + "anthropic": (".anthropic", "AnthropicProvider"), + "callback": (".callback", "CallbackProvider"), + "magentic": (".magentic", "MagenticProvider"), + "stdio": (".stdio", "StdioProvider"), + "deepagent": (".deepagent", "DeepagentProvider"), } - module_name = providers.get(name) - if not module_name: + entry = providers.get(name) + if not entry: available = ", ".join(providers) raise ValueError(f"Unknown provider: {name!r}. Available: {available}") import importlib + module_name, cls_name = entry module = importlib.import_module(module_name, package=__package__) - - # Convention: each module exports a class named {Name}Provider - cls_name = name.capitalize() + "Provider" cls = getattr(module, cls_name) result: ChatProvider = cls(**kwargs) return result diff --git a/pywry/pywry/chat/providers/stdio.py b/pywry/pywry/chat/providers/stdio.py index e2c07aa..0b83250 100644 --- a/pywry/pywry/chat/providers/stdio.py +++ b/pywry/pywry/chat/providers/stdio.py @@ -367,9 +367,10 @@ async def prompt( update_type = update.get("sessionUpdate", "") model_cls = update_map.get(update_type) if model_cls: - yield model_cls( - **{k: v for k, v in update.items() if k not in ("sessionId", "_request_id")} - ) + filtered = {k: v for k, v in update.items() if k != "sessionId"} + if "_request_id" in filtered: + filtered["request_id"] = filtered.pop("_request_id") + yield model_cls(**filtered) # Drain remaining updates while not queue.empty(): @@ -377,9 +378,10 @@ async def prompt( update_type = update.get("sessionUpdate", "") model_cls = update_map.get(update_type) if model_cls: - yield model_cls( - **{k: v for k, v in update.items() if k not in ("sessionId", "_request_id")} - ) + filtered = {k: v for k, v in update.items() if k != "sessionId"} + if "_request_id" in filtered: + filtered["request_id"] = filtered.pop("_request_id") + yield model_cls(**filtered) async def cancel(self, session_id: str) -> None: """Send ``session/cancel`` notification. diff --git a/pywry/pywry/chat/updates.py b/pywry/pywry/chat/updates.py index 55dbbdb..c028d70 100644 --- a/pywry/pywry/chat/updates.py +++ b/pywry/pywry/chat/updates.py @@ -97,7 +97,7 @@ class PermissionRequestUpdate(BaseModel): tool_call_id: str = Field(default="", alias="toolCallId") title: str = "" options: list[PermissionOption] = Field(default_factory=list) - request_id: str = "" + request_id: str = Field(default="", alias="requestId") class StatusUpdate(BaseModel): diff --git a/pywry/pywry/frontend/src/chat-handlers.js b/pywry/pywry/frontend/src/chat-handlers.js index 9c2eb99..7f9d711 100644 --- a/pywry/pywry/frontend/src/chat-handlers.js +++ b/pywry/pywry/frontend/src/chat-handlers.js @@ -2688,7 +2688,8 @@ function initChatHandlers(container, pywry) { var commands = data.commands || []; state.slashCommands = []; commands.forEach(function (cmd) { - state.slashCommands.push({ name: '/' + cmd.name, description: cmd.description || '' }); + var cmdName = cmd.name.charAt(0) === '/' ? cmd.name : '/' + cmd.name; + state.slashCommands.push({ name: cmdName, description: cmd.description || '' }); }); }); diff --git a/pywry/pywry/frontend/src/system-events.js b/pywry/pywry/frontend/src/system-events.js index 995d76e..c1a070c 100644 --- a/pywry/pywry/frontend/src/system-events.js +++ b/pywry/pywry/frontend/src/system-events.js @@ -2,8 +2,11 @@ 'use strict'; // Guard against re-registration of system event handlers - if (window.pywry && window.pywry._systemEventsRegistered) { - console.log('[PyWry] System events already registered, skipping'); + if (!window.pywry) { + window.pywry = { _handlers: {} }; + } + + if (window.pywry._systemEventsRegistered) { return; } diff --git a/pywry/pywry/widget.py b/pywry/pywry/widget.py index 20aec17..6305b26 100644 --- a/pywry/pywry/widget.py +++ b/pywry/pywry/widget.py @@ -1404,7 +1404,27 @@ def _get_chat_widget_esm() -> str: ) # Start with the base widget ESM (content rendering, theme, events) - base_esm = _WIDGET_ESM.replace("__TOOLBAR_HANDLERS__", toolbar_handlers_js) + asset_listener_js = """ + model.on("change:_asset_js", function() { + var js = model.get("_asset_js"); + if (js) { + var script = document.createElement("script"); + script.textContent = js; + document.head.appendChild(script); + } + }); + model.on("change:_asset_css", function() { + var css = model.get("_asset_css"); + if (css) { + var style = document.createElement("style"); + style.textContent = css; + document.head.appendChild(style); + } + }); + """ + + combined_handlers = toolbar_handlers_js + "\n" + asset_listener_js + base_esm = _WIDGET_ESM.replace("__TOOLBAR_HANDLERS__", combined_handlers) return f""" {toast_js} @@ -1413,34 +1433,7 @@ def _get_chat_widget_esm() -> str: {base_esm} -// --- Chat handlers --- {chat_handlers_js} - -// --- Trait-based asset injection for lazy-loaded artifact libraries --- -// When ChatManager pushes JS/CSS via _asset_js/_asset_css traits, -// inject them into the document head so artifact renderers work. -(function() {{ - if (typeof model !== 'undefined') {{ - model.on("change:_asset_js", function() {{ - var js = model.get("_asset_js"); - if (js) {{ - var script = document.createElement("script"); - script.textContent = js; - document.head.appendChild(script); - console.log("[PyWry Chat] Injected asset JS via trait (" + js.length + " chars)"); - }} - }}); - model.on("change:_asset_css", function() {{ - var css = model.get("_asset_css"); - if (css) {{ - var style = document.createElement("style"); - style.textContent = css; - document.head.appendChild(style); - console.log("[PyWry Chat] Injected asset CSS via trait (" + css.length + " chars)"); - }} - }}); - }} -}})(); """ diff --git a/pywry/tests/test_chat.py b/pywry/tests/test_chat.py index 7d3a3ee..fd4d4bd 100644 --- a/pywry/tests/test_chat.py +++ b/pywry/tests/test_chat.py @@ -579,6 +579,13 @@ def test_callback_provider(self) -> None: provider = get_provider("callback") assert provider is not None + def test_openai_provider_name_resolves(self) -> None: + pytest.importorskip("openai") + from pywry.chat import get_provider + + provider = get_provider("openai", api_key="sk-test") + assert type(provider).__name__ == "OpenAIProvider" + def test_unknown_provider_raises(self) -> None: from pywry.chat import get_provider From 3c75f126d0940d5d8f312bab07f44504230fde60 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Wed, 15 Apr 2026 20:49:08 -0700 Subject: [PATCH 19/68] Fix stdio.py prompt() complexity by extracting _parse_update helper Co-Authored-By: Claude Opus 4.6 (1M context) --- pywry/pywry/chat/providers/stdio.py | 35 ++++++++++++++++------------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/pywry/pywry/chat/providers/stdio.py b/pywry/pywry/chat/providers/stdio.py index 0b83250..2f07138 100644 --- a/pywry/pywry/chat/providers/stdio.py +++ b/pywry/pywry/chat/providers/stdio.py @@ -364,24 +364,27 @@ async def prompt( break continue - update_type = update.get("sessionUpdate", "") - model_cls = update_map.get(update_type) - if model_cls: - filtered = {k: v for k, v in update.items() if k != "sessionId"} - if "_request_id" in filtered: - filtered["request_id"] = filtered.pop("_request_id") - yield model_cls(**filtered) - - # Drain remaining updates + parsed = self._parse_update(update, update_map) + if parsed: + yield parsed + while not queue.empty(): update = queue.get_nowait() - update_type = update.get("sessionUpdate", "") - model_cls = update_map.get(update_type) - if model_cls: - filtered = {k: v for k, v in update.items() if k != "sessionId"} - if "_request_id" in filtered: - filtered["request_id"] = filtered.pop("_request_id") - yield model_cls(**filtered) + parsed = self._parse_update(update, update_map) + if parsed: + yield parsed + + @staticmethod + def _parse_update(update: dict[str, Any], update_map: dict[str, type]) -> Any: + """Build a SessionUpdate model from a raw update dict.""" + update_type = update.get("sessionUpdate", "") + model_cls = update_map.get(update_type) + if not model_cls: + return None + filtered = {k: v for k, v in update.items() if k != "sessionId"} + if "_request_id" in filtered: + filtered["request_id"] = filtered.pop("_request_id") + return model_cls(**filtered) async def cancel(self, session_id: str) -> None: """Send ``session/cancel`` notification. From 2e888addc4085c3988012f19727645c8d8d7a074 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Wed, 15 Apr 2026 20:52:18 -0700 Subject: [PATCH 20/68] Fix mypy: use Mapping instead of dict for covariant type parameter Co-Authored-By: Claude Opus 4.6 (1M context) --- pywry/pywry/chat/providers/stdio.py | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/pywry/pywry/chat/providers/stdio.py b/pywry/pywry/chat/providers/stdio.py index 2f07138..d9f30f3 100644 --- a/pywry/pywry/chat/providers/stdio.py +++ b/pywry/pywry/chat/providers/stdio.py @@ -11,6 +11,7 @@ import logging import uuid +from collections.abc import Mapping from typing import Any from . import ChatProvider @@ -375,7 +376,7 @@ async def prompt( yield parsed @staticmethod - def _parse_update(update: dict[str, Any], update_map: dict[str, type]) -> Any: + def _parse_update(update: dict[str, Any], update_map: Mapping[str, type]) -> Any: """Build a SessionUpdate model from a raw update dict.""" update_type = update.get("sessionUpdate", "") model_cls = update_map.get(update_type) From 7dabcf451b34201b731879b8da8b93c38f23934d Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Wed, 15 Apr 2026 20:55:00 -0700 Subject: [PATCH 21/68] Move Mapping import to TYPE_CHECKING block Co-Authored-By: Claude Opus 4.6 (1M context) --- pywry/pywry/chat/providers/stdio.py | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/pywry/pywry/chat/providers/stdio.py b/pywry/pywry/chat/providers/stdio.py index d9f30f3..63a6528 100644 --- a/pywry/pywry/chat/providers/stdio.py +++ b/pywry/pywry/chat/providers/stdio.py @@ -11,11 +11,13 @@ import logging import uuid -from collections.abc import Mapping -from typing import Any +from typing import TYPE_CHECKING, Any from . import ChatProvider +if TYPE_CHECKING: + from collections.abc import Mapping + log = logging.getLogger(__name__) From eff81418e77dd6e12793c1f6248ee6fe69dc9d5c Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 10:45:11 -0700 Subject: [PATCH 22/68] Add NVIDIA Deep Agent + TradingView demo with robust tool-call handling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Key changes across the stack: - NEW `examples/pywry_demo_deepagent_nvidia.py`: LangChain Deep Agent driving the TradingView chart through the in-process FastMCP server; model discovery via NVIDIA NIM, graceful uvicorn shutdown, proactor close-race filtering. - `chat/providers/deepagent.py`: - `InlineToolCallMiddleware` rewrites leaked ``functions.:{...}`` markup from the model's text stream into structured `tool_calls`, appending to any existing structured calls so mixed-format responses fire end-to-end. - `PlanContinuationMiddleware` re-enters the graph on exit when `state.todos` still has pending entries — no nudge counting, no auto-completion, pure state read. - `_ToolCallTextFilter` stateful stripper removes both inline markup and `<|...|>` chat-template special tokens from the streamed text, handling chunk-boundary splits. - TVChart frontend: - Event-based data-settled signal (no state polling) tracks applyDefault, chart-type re-apply, and indicator re-add so Python tools see the chart fully stable before the next call. - `whenMainSeriesReady` callback replaces the poll that chained chart-type-change off series attachment. - Case-insensitive time-range values ("1D" == "1d") and preserved range cleared on new zoom so applyDefault can't clobber the user's explicit zoom. - Theme-aware CSS vars for hollow-body, hidden, price-line, and settings-dialog defaults — no hardcoded hex in JS. - MCP handlers: `_emit_zoom_and_confirm` waits on tvchart:data-settled rather than polling state; `_minimal_confirm_state` strips rawData from tool returns so the agent can't fabricate prices. - Three SKILL.md files (tvchart, chat_agent, events) added under `pywry/mcp/skills/` for agents operating inside the demo. - Docs updated for the new MCP tools and skills surface. Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/docs/docs/integrations/chat/index.md | 165 ++- pywry/docs/docs/mcp/skills.md | 8 +- pywry/docs/docs/mcp/tools.md | 423 ++++++ pywry/docs/docs/reference/css/chat.md | 46 + pywry/docs/docs/reference/events/chat.md | 32 +- pywry/docs/docs/reference/events/toolbar.md | 19 +- pywry/docs/docs/reference/events/tvchart.md | 53 +- pywry/examples/pywry_demo_deepagent_nvidia.py | 517 +++++++ pywry/examples/pywry_demo_tvchart_yfinance.py | 268 +++- pywry/pyproject.toml | 74 +- pywry/pywry/app.py | 16 +- pywry/pywry/chat/manager.py | 399 +++++- pywry/pywry/chat/providers/deepagent.py | 1272 +++++++++++++++-- pywry/pywry/chat/providers/stdio.py | 1 + pywry/pywry/frontend/src/chat-handlers.js | 220 ++- pywry/pywry/frontend/src/toolbar-bridge.js | 19 + .../pywry/frontend/src/tvchart/02-datafeed.js | 3 + pywry/pywry/frontend/src/tvchart/04-series.js | 43 +- .../frontend/src/tvchart/05-lifecycle.js | 116 +- .../pywry/frontend/src/tvchart/07-drawing.js | 5 +- .../pywry/frontend/src/tvchart/08-settings.js | 272 +++- pywry/pywry/frontend/src/tvchart/10-events.js | 406 +++++- pywry/pywry/frontend/style/chat.css | 70 +- pywry/pywry/frontend/style/tvchart.css | 63 +- pywry/pywry/mcp/handlers.py | 984 ++++++++++++- pywry/pywry/mcp/server.py | 25 +- pywry/pywry/mcp/skills/__init__.py | 25 + pywry/pywry/mcp/skills/chat_agent/SKILL.md | 189 +++ pywry/pywry/mcp/skills/events/SKILL.md | 151 ++ pywry/pywry/mcp/skills/tvchart/SKILL.md | 244 ++++ pywry/pywry/mcp/state.py | 130 ++ pywry/pywry/mcp/tools.py | 598 ++++++++ pywry/pywry/tvchart/mixin.py | 110 ++ pywry/tests/test_chat_manager.py | 393 +++++ pywry/tests/test_deepagent_provider.py | 257 ++++ pywry/tests/test_mcp_state_helpers.py | 234 +++ pywry/tests/test_mcp_tvchart_tools.py | 676 +++++++++ pywry/tests/test_tvchart.py | 113 +- 38 files changed, 8203 insertions(+), 436 deletions(-) create mode 100644 pywry/examples/pywry_demo_deepagent_nvidia.py create mode 100644 pywry/pywry/mcp/skills/chat_agent/SKILL.md create mode 100644 pywry/pywry/mcp/skills/events/SKILL.md create mode 100644 pywry/pywry/mcp/skills/tvchart/SKILL.md create mode 100644 pywry/tests/test_mcp_state_helpers.py create mode 100644 pywry/tests/test_mcp_tvchart_tools.py diff --git a/pywry/docs/docs/integrations/chat/index.md b/pywry/docs/docs/integrations/chat/index.md index 4ae6615..19e2b21 100644 --- a/pywry/docs/docs/integrations/chat/index.md +++ b/pywry/docs/docs/integrations/chat/index.md @@ -385,6 +385,10 @@ Connects to [LangChain Deep Agents](https://docs.langchain.com/oss/python/deepag pip install 'pywry[deepagent]' ``` +The `deepagent` extra pulls in both `deepagents>=0.1.0` and +`langchain-mcp-adapters>=0.1.0`. The MCP adapters package is what +bridges any MCP server's tools into LangChain tools the agent can call. + ```python from deepagents import create_deep_agent from pywry.chat.manager import ChatManager @@ -411,14 +415,171 @@ provider = DeepagentProvider( ) ``` +#### Constructor parameters + +| Parameter | Type | Default | Notes | +|-----------|------|---------|-------| +| `agent` | `CompiledGraph \| None` | `None` | Pre-built agent. When `None` the provider builds one itself using the rest of the parameters. | +| `model` | `str` | `"anthropic:claude-sonnet-4-6"` | Any model string `create_deep_agent()` accepts (`"openai:gpt-4o"`, `"nvidia:meta/llama-3.3-70b-instruct"`, etc.). | +| `tools` | `list` | `None` | LangChain-compatible tool callables. Merged with any MCP-served tools before the agent is built. | +| `mcp_servers` | `dict[str, dict]` | `None` | MCP servers the agent should connect to. See the section below. | +| `system_prompt` | `str` | `""` | Appended to PyWry's base prompt before being passed to `create_deep_agent`. | +| `checkpointer` | LangGraph saver | `None` | Explicit checkpointer. Auto-created when `auto_checkpointer=True`. | +| `store` | LangGraph store | `None` | Explicit memory store. Auto-created when `auto_store=True`. | +| `memory`, `interrupt_on`, `backend`, `subagents`, `middleware` | — | `None` | Forwarded to `create_deep_agent()` when provided. | +| `skills` | `list[str] \| None` | `None` | File paths to Deep Agents skill markdown. The PyWry MCP package ships seventeen of these under `pywry.mcp.skills` — point at the ones relevant to your agent. See below. | +| `auto_checkpointer` | `bool` | `True` | Creates a checkpointer matching PyWry's state backend (Memory/Redis/SQLite) on first agent build. | +| `auto_store` | `bool` | `True` | Creates an `InMemoryStore` on first agent build when no explicit store is given. | +| `recursion_limit` | `int` | `50` | LangGraph recursion limit per prompt turn. Every tool call costs 2–3 graph steps, so the default (LangGraph's own is 25) leaves headroom for multi-tool turns without hiding pathological loops. | + +#### Connecting to MCP servers + +`mcp_servers` takes a dict in the `langchain_mcp_adapters.client.MultiServerMCPClient` format — one entry per server, keyed by a short name: + +```python +provider = DeepagentProvider( + model="openai:gpt-4o", + system_prompt="You are a chart analyst.", + mcp_servers={ + # Remote HTTP transport + "pywry": { + "transport": "streamable_http", + "url": "http://127.0.0.1:8765/mcp", + }, + # Local stdio subprocess + "fs": { + "transport": "stdio", + "command": "uvx", + "args": ["mcp-server-filesystem", "/tmp"], + }, + }, +) +``` + +On first `_build_agent()` the provider calls `MultiServerMCPClient.get_tools()`, +converts every MCP tool into a LangChain tool, and merges the result +with `self._tools` before handing the combined list to +`create_deep_agent(tools=...)`. The agent then sees local `@tool` +callables and MCP-served tools in a single unified list. + +Pass `mcp_servers=None` (the default) to skip the MCP bridge entirely — +the adapters package is only imported when at least one server is +configured. + +ACP clients can also add servers at session start by passing +`mcp_servers=[...]` to `new_session()`; the provider converts those +entries into the `MultiServerMCPClient` format, merges them into its +existing map, and rebuilds the agent on the next prompt turn. + +#### In-process PyWry MCP server + +To run PyWry's own MCP server alongside the app and have the Deep Agent +drive the same widgets the user sees, start it in a daemon thread and +point the provider at it: + +```python +import socket, threading, sys +import pywry.mcp.state as mcp_state +from pywry.mcp.server import create_server + +def start_pywry_mcp_server(app, chart_widget_id): + """Start PyWry's FastMCP server in-process with shared app state.""" + mcp_state._app = app + mcp_state.register_widget(chart_widget_id, app) + sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) + sock.bind(("127.0.0.1", 0)) + port = sock.getsockname()[1] + sock.close() + mcp = create_server() + threading.Thread( + target=lambda: mcp.run(transport="streamable-http", + host="127.0.0.1", port=port), + daemon=True, + ).start() + return f"http://127.0.0.1:{port}/mcp" + +url = start_pywry_mcp_server(app, chart_widget_id="chart") +provider = DeepagentProvider( + model="openai:gpt-4o", + mcp_servers={"pywry": {"transport": "streamable_http", "url": url}}, +) +``` + +The in-process server operates on the same `pywry.mcp.state._app` +singleton the running app uses, so `send_event`, `update_marquee`, +`update_plotly`, and all other MCP tools act on the live widget. + +#### Loading PyWry skill files + +PyWry ships seventeen agent-facing skill markdown files under +`pywry.mcp.skills`. Pass the ones relevant to your agent's task +surface as `skills=` — Deep Agents exposes each file as on-demand +reference the agent can pull in when needed. + +```python +import pathlib +from pywry.mcp import skills as _skills_pkg + +skills_root = pathlib.Path(_skills_pkg.__file__).parent + +provider = DeepagentProvider( + model="nvidia:meta/llama-3.3-70b-instruct", + mcp_servers={"pywry": {"transport": "streamable_http", "url": url}}, + skills=[ + str(skills_root / "tvchart" / "SKILL.md"), + str(skills_root / "chat_agent" / "SKILL.md"), + str(skills_root / "events" / "SKILL.md"), + ], +) +``` + +The skills most useful for a running-widget agent (as opposed to the +widget-builder agents `pywry build_app` uses) are: + +| Skill | When to include | +|-------|-----------------| +| `tvchart` | Any agent driving a `tvchart` widget — documents every typed tvchart MCP tool, the state shape, and compare-derivative indicator flow | +| `chat_agent` | Every DeepagentProvider-backed agent — explains `@` context attachments, tool-result cards, edit/resend flow, reply style | +| `events` | Agents that use `send_event` / `get_events` or need to reason about request/response correlation | +| `component_reference` | Only when the agent needs to CREATE widgets (not relevant for agents that just operate on an existing one) | +| `authentication` | Agents that gate actions on OAuth / RBAC state | + +See `pywry.mcp.skills.SKILL_METADATA` for the full inventory, and +[`docs/mcp/skills.md`](../../mcp/skills.md) for the full skill +reference table. + +#### ACP session updates + The provider maps LangGraph streaming events to ACP session updates: - Text chunks from the LLM → `AgentMessageUpdate` -- Tool invocations (`read_file`, `write_file`, `execute`, etc.) → `ToolCallUpdate` with lifecycle tracking (pending → in_progress → completed/failed) +- Tool invocations (`read_file`, `write_file`, `execute`, MCP tools, etc.) → `ToolCallUpdate` with lifecycle tracking (`in_progress` → `completed`/`failed`). Completed updates carry the serialized tool output in `content`. - The `write_todos` built-in tool → `PlanUpdate` with structured task entries - `interrupt_on` tools → `PermissionRequestUpdate` for inline approval in the chat UI -Session persistence adapts to PyWry's state backend automatically. With `auto_checkpointer=True` (default), the provider creates a `MemorySaver` for desktop apps, a `RedisSaver` for deploy mode, or a `SqliteSaver` for local persistent storage — matching whatever backend the rest of PyWry is using. +#### Session persistence + +Persistence adapts to PyWry's state backend automatically. With +`auto_checkpointer=True` (the default), the provider creates a +`MemorySaver` for desktop apps, a `RedisSaver` for deploy mode, or a +`SqliteSaver` for local persistent storage — matching whatever backend +the rest of PyWry is using. The auto-creation runs the first time +`_build_agent()` is called so callers that bypass the async +`initialize()` still get conversation-history persistence across turns. + +Each chat UI thread maps to its own LangGraph `thread_id`, so prior +turns in the same conversation are automatically visible to the agent +on every new message. + +#### Edit / resend truncation + +When the user hits **Edit** or **Resend** on a prior message, the chat +manager calls `provider.truncate_session(session_id, kept_messages)` +before re-running generation. `DeepagentProvider` implements this by +deleting the thread state from the checkpointer (via `delete_thread()` +on newer LangGraph saver APIs, falling back to dict-level cleanup) or +— if deletion isn't supported — remapping the session to a fresh +`thread_id` so the next prompt runs against an empty graph state. ### Provider Factory diff --git a/pywry/docs/docs/mcp/skills.md b/pywry/docs/docs/mcp/skills.md index b7f04e2..7a7e7a3 100644 --- a/pywry/docs/docs/mcp/skills.md +++ b/pywry/docs/docs/mcp/skills.md @@ -21,17 +21,21 @@ Skills are **lazy-loaded** from markdown files on disk and cached in memory (LRU |:---|:---|:---| | `component_reference` | **Mandatory** | All 18 components — property tables, event signatures, JSON schemas, auto-wired actions, toolbar structure, event format rules | | `interactive_buttons` | High | The `elementId:action` auto-wiring pattern for buttons (increment, decrement, reset, toggle) | +| `autonomous_building` | High | End-to-end app generation — `plan_widget`, `build_app`, `export_project`, `scaffold_app` workflows and chaining patterns | | `native` | Medium | Desktop native window mode — full-viewport layout, system integration, window management | | `jupyter` | Medium | Notebook integration — AnyWidget (recommended) and IFrame (fallback) approaches with code examples | | `iframe` | Medium | Sandboxed embedding — resize constraints, postMessage communication | | `deploy` | Medium | Production SSE server mode — stateless widgets, horizontal scaling, Redis patterns | +| `authentication` | Medium | OAuth2 / OIDC sign-in (Google, GitHub, Microsoft, custom) and RBAC wiring for PyWry apps | | `css_selectors` | Medium | Targeting elements for `set_content` / `set_style` — component_id vs CSS selectors, selector patterns | | `styling` | Medium | CSS variables (all `--pywry-*` properties), theme switching, `inject_css` usage | | `data_visualization` | Medium | Plotly charts, AG Grid tables, Marquee tickers, live data polling and event-driven update patterns | | `forms_and_inputs` | Medium | Form building with TextInput, Select, Toggle, etc. — validation patterns, event-based data collection | | `modals` | Medium | Modal dialog schemas — sizes, nested components, open/close events, JS API, `reset_on_close` behavior | -| `chat` | Medium | Conversational chat widget — streaming, threads, slash commands, LLM providers | -| `autonomous_building` | Medium | End-to-end app generation — `plan_widget`, `build_app`, `export_project`, `scaffold_app` workflows and chaining patterns | +| `chat` | Medium | Creating a chat widget — streaming, threads, slash commands, LLM providers (widget-builder perspective) | +| `chat_agent` | Medium | Operating INSIDE a running chat widget — `@` context attachments, `widget_id` routing, tool-result cards, edit/resend flow, reply style (agent perspective) | +| `tvchart` | Medium | Driving a live TradingView chart via MCP — symbol/interval/chart-type, indicators including compare-derivative (Spread, Ratio, Sum, Product, Correlation), markers, price lines, compares, drawings, layouts, state reads | +| `events` | Medium | PyWry event bus — namespaced `ns:name`, widget_id vs componentId, request/response correlation via `context` token, how mutating MCP tools poll state, `get_events` capture buffer | ### The Component Reference diff --git a/pywry/docs/docs/mcp/tools.md b/pywry/docs/docs/mcp/tools.md index 9effa43..91aa1b7 100644 --- a/pywry/docs/docs/mcp/tools.md +++ b/pywry/docs/docs/mcp/tools.md @@ -190,6 +190,429 @@ Create a TradingView Lightweight Charts widget from JSON data. **Returns:** `{"widget_id": "...", "path": "...", "created": true}` +On creation the widget is wired to capture `tvchart:click`, +`tvchart:crosshair-move`, `tvchart:visible-range-change`, +`tvchart:drawing-added`, `tvchart:drawing-deleted`, +`tvchart:open-layout-request`, `tvchart:interval-change`, and +`tvchart:chart-type-change` into the MCP events dict — retrieve them +later with `get_events`. + +--- + +## TVChart Manipulation + +Every action the TradingView chart supports — data updates, indicators, +chart type, symbol, interval, drawing tools, layout persistence — is +exposed as a dedicated `tvchart_*` tool. All tools take the owning +`widget_id` plus an optional `chart_id` for widgets hosting multiple +charts. + +### Data and series + +#### tvchart_update_series + +Replace the bar data for a chart series. Emits `tvchart:update`. + +| Parameter | Type | Required | Description | +|:---|:---|:---|:---| +| `widget_id` | `string` | **Yes** | | +| `bars` | `array` | **Yes** | OHLCV bar dicts (time in epoch seconds) | +| `volume` | `array` | No | Optional separate volume series | +| `series_id` | `string` | No | Target series (defaults to the main series) | +| `chart_id` | `string` | No | | +| `fit_content` | `boolean` | No | Default `true` | + +#### tvchart_update_bar + +Stream a single real-time bar update. Emits `tvchart:stream`. + +| Parameter | Type | Required | Description | +|:---|:---|:---|:---| +| `widget_id` | `string` | **Yes** | | +| `bar` | `object` | **Yes** | Bar dict with time/open/high/low/close/volume | +| `series_id` | `string` | No | | +| `chart_id` | `string` | No | | + +#### tvchart_add_series + +Add a pre-computed overlay series. Emits `tvchart:add-series`. Use +`tvchart_add_indicator` instead when the JS indicator engine can +compute the values for you. + +| Parameter | Type | Required | Description | +|:---|:---|:---|:---| +| `widget_id` | `string` | **Yes** | | +| `series_id` | `string` | **Yes** | Unique id for later removal | +| `bars` | `array` | **Yes** | Series data (shape depends on series_type) | +| `series_type` | `string` | No | `Line` / `Area` / `Histogram` / `Baseline` / `Candlestick` / `Bar` | +| `series_options` | `object` | No | Color, lineWidth, priceScaleId, … | +| `chart_id` | `string` | No | | + +#### tvchart_remove_series + +Remove a series or overlay by id. Emits `tvchart:remove-series`. + +| Parameter | Type | Required | Description | +|:---|:---|:---|:---| +| `widget_id` | `string` | **Yes** | | +| `series_id` | `string` | **Yes** | | +| `chart_id` | `string` | No | | + +#### tvchart_add_markers + +Add buy/sell or event markers at specific bars. Emits `tvchart:add-markers`. + +| Parameter | Type | Required | Description | +|:---|:---|:---|:---| +| `widget_id` | `string` | **Yes** | | +| `markers` | `array` | **Yes** | `[{time, position, color, shape, text}]` | +| `series_id` | `string` | No | | +| `chart_id` | `string` | No | | + +#### tvchart_add_price_line + +Draw a horizontal price line. Emits `tvchart:add-price-line`. + +| Parameter | Type | Required | Default | Description | +|:---|:---|:---|:---|:---| +| `widget_id` | `string` | **Yes** | — | | +| `price` | `number` | **Yes** | — | | +| `color` | `string` | No | `#2196F3` | | +| `line_width` | `integer` | No | `1` | | +| `title` | `string` | No | `""` | | +| `series_id` | `string` | No | — | | +| `chart_id` | `string` | No | — | | + +#### tvchart_apply_options + +Patch chart-level or series-level options. Emits `tvchart:apply-options`. + +| Parameter | Type | Required | Description | +|:---|:---|:---|:---| +| `widget_id` | `string` | **Yes** | | +| `chart_options` | `object` | No | Chart-level patches (layout, grid, crosshair, timeScale) | +| `series_options` | `object` | No | Series-level patches | +| `series_id` | `string` | No | Target series when patching series options | +| `chart_id` | `string` | No | | + +### Built-in indicators + +The JS indicator engine computes these natively from the chart's bar +data, manages the legend and subplot panes, and supports undo/redo. + +#### tvchart_add_indicator + +| Parameter | Type | Required | Description | +|:---|:---|:---|:---| +| `widget_id` | `string` | **Yes** | | +| `name` | `string` | **Yes** | `SMA`, `EMA`, `WMA`, `SMA (50)`, `SMA (200)`, `EMA (12)`, `EMA (26)`, `Moving Average`, `RSI`, `Momentum`, `Bollinger Bands`, `ATR`, `VWAP`, `Volume SMA`, `Average Price`, `Median Price`, `Weighted Close`, `Percent Change`, `Correlation`, `Spread`, `Ratio`, `Sum`, `Product` | +| `period` | `integer` | No | Lookback period (0 uses the indicator default) | +| `color` | `string` | No | Hex colour (empty = auto-assign) | +| `source` | `string` | No | OHLC source: `close` / `open` / `high` / `low` / `hl2` / `hlc3` / `ohlc4` | +| `method` | `string` | No | For Moving Average: `SMA` / `EMA` / `WMA` | +| `multiplier` | `number` | No | Bollinger Bands multiplier | +| `ma_type` | `string` | No | Bollinger Bands MA type | +| `offset` | `integer` | No | Bar offset for indicator shifting | +| `chart_id` | `string` | No | | + +**Compare-derivative indicators** (`Spread`, `Ratio`, `Sum`, `Product`, +`Correlation`) require a second series to compute against. Add the +secondary ticker first via `tvchart_compare(widget_id, query=...)`, +then call `tvchart_add_indicator` with the derivative name — the +chart picks up the most recent compare series as the secondary. +`list_indicators` / `request_state` resolve the secondary back to its +ticker in `secondarySymbol` so agents can describe the indicator as +e.g. `Spread(AAPL, MSFT)` instead of `Spread(compare-msft)`. + +#### tvchart_remove_indicator + +Remove by series id. Grouped indicators (e.g. the three Bollinger +bands) are removed together. Emits `tvchart:remove-indicator`. + +| Parameter | Type | Required | +|:---|:---|:---| +| `widget_id` | `string` | **Yes** | +| `series_id` | `string` | **Yes** | +| `chart_id` | `string` | No | + +#### tvchart_list_indicators + +Synchronously round-trips `tvchart:list-indicators` / +`tvchart:list-indicators-response` and returns the indicator inventory. + +| Parameter | Type | Required | Default | Description | +|:---|:---|:---|:---|:---| +| `widget_id` | `string` | **Yes** | — | | +| `chart_id` | `string` | No | — | | +| `timeout` | `number` | No | `5.0` | Response wait, seconds | + +Each indicator entry in the result contains: + +- `seriesId` — stable id used by `tvchart_remove_indicator` +- `name` — human-facing label, e.g. `"Spread"` +- `type` — machine key, e.g. `"spread"` +- `period`, `color`, `group` +- `sourceSeriesId` — the primary input series id (usually `"main"`) +- `secondarySeriesId` — the secondary compare series id for binary + indicators (`null` otherwise) +- `secondarySymbol` — the ticker the secondary series holds + (`"MSFT"`), resolved back from the compare map; `null` when the + indicator is single-series +- `primarySource`, `secondarySource` — OHLC source selectors per leg +- `isSubplot` — true when the indicator lives in its own pane below + the main chart + +**Returns:** `{"widget_id": "...", "indicators": [...], "chartId": "..."}` + +#### tvchart_show_indicators + +Open the indicator picker panel UI. Emits `tvchart:show-indicators`. + +### Symbol / interval / view + +#### tvchart_symbol_search + +Open the symbol search dialog and (optionally) auto-change the main +ticker. Emits `tvchart:symbol-search`. When `query` is set the +datafeed search runs with that query and — if `auto_select` (default +`true`) — the exact-ticker match (or the first result otherwise) is +selected when results arrive. The handler then polls +`tvchart:request-state` until the chart's reported `symbol` matches +the target (up to ~3s) and returns the real post-change state. + +| Parameter | Type | Required | Default | Description | +|:---|:---|:---|:---|:---| +| `widget_id` | `string` | **Yes** | — | | +| `query` | `string` | No | — | Pre-fill the search box and run the search | +| `auto_select` | `boolean` | No | `true` | Auto-pick when results arrive (only applies if `query` is set) | +| `symbol_type` | `string` | No | — | Security class filter — datafeed values such as `equity`, `etf`, `index`, `mutualfund`, `future`, `cryptocurrency`, `currency`. Narrows the search so e.g. `SPY` finds the ETF rather than `SPYM`. Case-insensitive. | +| `exchange` | `string` | No | — | Exchange filter — datafeed-provided value. Case-insensitive. | +| `chart_id` | `string` | No | — | | + +Result fields (when `query` + `auto_select`): + +- `widget_id`, `event_sent`, `event_type` — standard emit confirmation +- `symbol` — the confirmed main symbol after the change +- `state` — the full `tvchart:request-state` snapshot +- `note` — present only if the change didn't land within the timeout + +#### tvchart_compare + +Add a ticker as a compare-series overlay on the chart. Emits +`tvchart:compare`. When `query` is set the compare panel searches and +— if `auto_add` (default `true`) — commits the matching ticker as a +compare series. The handler polls chart state until the new ticker +appears in `state.compareSymbols` and returns the confirmed state. +Omit `query` to just open the panel for the user. + +| Parameter | Type | Required | Default | Description | +|:---|:---|:---|:---|:---| +| `widget_id` | `string` | **Yes** | — | | +| `query` | `string` | No | — | Ticker / name to search and auto-add | +| `auto_add` | `boolean` | No | `true` | Auto-commit the matching result when the search responds | +| `symbol_type` | `string` | No | — | Security class filter — datafeed values such as `equity`, `etf`, `index`, `mutualfund`, `future`, `cryptocurrency`, `currency`. Narrows the search so e.g. `SPY` finds the ETF rather than `SPYM`. Case-insensitive. | +| `exchange` | `string` | No | — | Exchange filter — datafeed-provided value. Case-insensitive. | +| `chart_id` | `string` | No | — | | + +Result fields (when `query` + `auto_add`): + +- `widget_id`, `event_sent`, `event_type` — standard emit confirmation +- `compareSymbols` — the `{seriesId: ticker}` map from state after the + add (user-facing compares only; indicator-source compares are + excluded) +- `state` — the full `tvchart:request-state` snapshot +- `note` — present only if the compare didn't land within the timeout + +Compare series added via this tool are the *input* for compare- +derivative indicators (`Spread`, `Ratio`, `Sum`, `Product`, +`Correlation`). After the compare lands, call +`tvchart_add_indicator` to layer the derivative on top. + +#### tvchart_change_interval + +Change the chart timeframe. Emits `tvchart:interval-change` and polls +state until the chart reports the new interval. + +| Parameter | Type | Required | Description | +|:---|:---|:---|:---| +| `widget_id` | `string` | **Yes** | | +| `value` | `string` | **Yes** | `1m` … `12M` | +| `chart_id` | `string` | No | | + +Result fields: + +- `widget_id`, `event_sent`, `event_type` — standard emit confirmation +- `interval` — the confirmed interval after the change +- `state` — the full `tvchart:request-state` snapshot +- `note` — present only if the change didn't land within the timeout + +#### tvchart_set_visible_range + +Set the chart's visible time range. Emits `tvchart:time-scale` with +`{visibleRange: {from, to}}`. Times are epoch seconds. + +| Parameter | Type | Required | +|:---|:---|:---| +| `widget_id` | `string` | **Yes** | +| `from_time` | `integer` | **Yes** | +| `to_time` | `integer` | **Yes** | +| `chart_id` | `string` | No | + +#### tvchart_fit_content + +Fit all bars to the visible area. Emits `tvchart:time-scale` with +`{fitContent: true}`. + +#### tvchart_time_range + +Zoom to a preset range. Emits `tvchart:time-range`. + +| Parameter | Type | Required | Description | +|:---|:---|:---|:---| +| `widget_id` | `string` | **Yes** | | +| `value` | `string` | **Yes** | `1D`, `1W`, `1M`, `3M`, `6M`, `1Y`, `5Y`, `YTD`, … | +| `chart_id` | `string` | No | | + +#### tvchart_time_range_picker + +Open the date-range picker dialog. Emits `tvchart:time-range-picker`. + +#### tvchart_log_scale + +Toggle logarithmic price scale. Emits `tvchart:log-scale`. + +| Parameter | Type | Required | +|:---|:---|:---| +| `widget_id` | `string` | **Yes** | +| `value` | `boolean` | **Yes** | +| `chart_id` | `string` | No | + +#### tvchart_auto_scale + +Toggle auto-scale on the price axis. Emits `tvchart:auto-scale`. + +| Parameter | Type | Required | +|:---|:---|:---| +| `widget_id` | `string` | **Yes** | +| `value` | `boolean` | **Yes** | +| `chart_id` | `string` | No | + +### Chart type + +#### tvchart_chart_type + +Change the main series chart style. Emits `tvchart:chart-type-change`. + +| Parameter | Type | Required | Description | +|:---|:---|:---|:---| +| `widget_id` | `string` | **Yes** | | +| `value` | `string` | **Yes** | `Candles`, `Hollow Candles`, `Heikin Ashi`, `Bars`, `Line`, `Area`, `Baseline`, `Histogram` | +| `series_id` | `string` | No | | +| `chart_id` | `string` | No | | + +### Drawing tools + +#### tvchart_drawing_tool + +Activate a drawing mode or toggle drawing-layer state. Emits one of +`tvchart:tool-cursor`, `tvchart:tool-crosshair`, `tvchart:tool-magnet`, +`tvchart:tool-eraser`, `tvchart:tool-visibility`, `tvchart:tool-lock`. + +| Parameter | Type | Required | Description | +|:---|:---|:---|:---| +| `widget_id` | `string` | **Yes** | | +| `mode` | `string` | **Yes** | `cursor`, `crosshair`, `magnet`, `eraser`, `visibility`, `lock` | +| `chart_id` | `string` | No | | + +#### tvchart_undo / tvchart_redo + +Undo/redo the last chart action. Emits `tvchart:undo` / `tvchart:redo`. + +### Chart chrome + +#### tvchart_show_settings + +Open the chart settings modal. Emits `tvchart:show-settings`. + +#### tvchart_toggle_dark_mode + +Toggle the chart's dark/light theme. Emits `tvchart:toggle-dark-mode`. + +| Parameter | Type | Required | Description | +|:---|:---|:---|:---| +| `widget_id` | `string` | **Yes** | | +| `value` | `boolean` | **Yes** | `true` = dark, `false` = light | +| `chart_id` | `string` | No | | + +#### tvchart_screenshot + +Take a chart screenshot. Emits `tvchart:screenshot`. + +#### tvchart_fullscreen + +Toggle chart fullscreen. Emits `tvchart:fullscreen`. + +### Layout and state + +#### tvchart_save_layout + +Save the current chart layout (indicators + drawings). Emits `tvchart:save-layout`. + +| Parameter | Type | Required | Description | +|:---|:---|:---|:---| +| `widget_id` | `string` | **Yes** | | +| `name` | `string` | No | Display name for the saved layout | +| `chart_id` | `string` | No | | + +#### tvchart_open_layout + +Open the layout picker dialog. Emits `tvchart:open-layout`. + +#### tvchart_save_state + +Trigger a full state export from every chart in the widget. The +exported state is delivered back via the `tvchart:layout-response` +event — retrieve it with `get_events`. Emits `tvchart:save-state`. + +#### tvchart_request_state + +Synchronously read a single chart's state. Round-trips +`tvchart:request-state` / `tvchart:state-response` and returns the +decoded state. This is the authoritative source for what's on the +chart — agents reporting symbol / interval / compares / indicators +must quote values from this tool, never recall or fabricate. + +| Parameter | Type | Required | Default | Description | +|:---|:---|:---|:---|:---| +| `widget_id` | `string` | **Yes** | — | | +| `chart_id` | `string` | No | — | | +| `timeout` | `number` | No | `5.0` | Response wait, seconds | + +**Returns:** `{"widget_id": "...", "state": {...}}` where `state` +contains: + +- `chartId` — id of the chart pane within the widget +- `theme` — `"dark"` or `"light"` +- `symbol` — active main ticker (empty string if not yet resolved) +- `interval` — active timeframe (e.g. `"1D"`, `"1W"`) +- `chartType` — display style (`"Candles"`, `"Line"`, `"Heikin Ashi"`, + `"Bars"`, `"Area"`) +- `compareSymbols` — `{seriesId: ticker}` map of **user-facing** + compare overlays. Indicator-input compares are NOT in this map. +- `indicatorSourceSymbols` — `{seriesId: ticker}` map of compares + that drive binary indicators (hidden from the Compare panel). + Exposed for agents that need to reason about where an indicator's + secondary data comes from. +- `series` — `{seriesId: {type}}` summary of every series on the + chart (main + compares + indicator subplots) +- `visibleRange` — `{from, to}` in unix seconds (null if unavailable) +- `visibleLogicalRange` — `{from, to}` in fractional bar indices +- `rawData` — last-known bars for the main series (may be null) +- `drawings` — array of user drawings (trendlines, rectangles, etc.) +- `indicators` — array matching the `tvchart_list_indicators` + format, including `secondarySeriesId` / `secondarySymbol` for + compare-derivative indicators + --- ### build_div diff --git a/pywry/docs/docs/reference/css/chat.md b/pywry/docs/docs/reference/css/chat.md index 0e15be3..699a0a5 100644 --- a/pywry/docs/docs/reference/css/chat.md +++ b/pywry/docs/docs/reference/css/chat.md @@ -42,6 +42,52 @@ Source: `frontend/style/chat.css` — Styles for the `show_chat()` / `ChatManage .pywry-chat-new-msg-badge { /* "New messages" badge at bottom of scroll */ } ``` +Every message bubble carries `data-msg-id="msg_..."`, which the edit/ +resend UI uses to address messages on both sides of the bridge. + +### Edit / Resend actions + +Each user message gets **Edit** and **Resend** buttons. Assistant +messages (including the welcome bubble) have no action buttons — +rerun happens from the user's own prior message, not from the +assistant's reply. Both buttons tie into the `chat:edit-message` / +`chat:resend-from` events. Actions fade in on hover and stay +visible during edit mode. + +```css +.pywry-chat-msg-actions { /* Flex toolbar at bottom of each user bubble. + opacity: 0 by default. */ } +.pywry-chat-msg:hover .pywry-chat-msg-actions, +.pywry-chat-msg-editing .pywry-chat-msg-actions { + /* Visible on hover or while editing. */ +} +.pywry-chat-msg-action { /* Individual action button (Edit / Resend / + Save & Resend / Cancel). */ } +.pywry-chat-msg-action:hover { /* Hover state. */ } +.pywry-chat-msg-action svg { /* Icon inside action buttons. */ } + +.pywry-chat-msg-editing { /* Applied to the message bubble while its + textarea is open. Keeps actions pinned + visible. */ } +.pywry-chat-msg-edit-textarea { /* The inline editor swapped in for + the message content during edit. */ } +``` + +Button semantics (by `data-action` attribute): + +| Button | `data-action` | Effect | +|--------|---------------|--------| +| **Edit** | `edit` | Swap the message content for `` and show Save/Cancel. | +| **Resend** | `resend` | Emit `chat:resend-from` with this message's id. Backend truncates the thread to this message and re-runs. | +| **Save & Resend** (edit mode) | `save` (`data-edit-action`) | Emit `chat:edit-message` with new text. | +| **Cancel** (edit mode) | `cancel` (`data-edit-action`) | Restore the original rendered markdown, discard the textarea. | + +Tooltips on these buttons use PyWry's shared tooltip manager (the +globally injected `#pywry-tooltip` element, styled by `.pywry-tooltip`) +via the `data-tooltip="..."` attribute — not the native browser +`title=` popup. Hover delay, arrow positioning, and light/dark theme +colors come from the shared CSS in `frontend/style/pywry.css`. + --- ## Threads & Conversation Picker diff --git a/pywry/docs/docs/reference/events/chat.md b/pywry/docs/docs/reference/events/chat.md index e90bdc9..3280cab 100644 --- a/pywry/docs/docs/reference/events/chat.md +++ b/pywry/docs/docs/reference/events/chat.md @@ -9,8 +9,10 @@ The `chat:*` namespace handles all communication between the Python `ChatManager | Event | Payload | Description | |-------|---------|-------------| -| `chat:user-message` | `{text, threadId, timestamp, attachments?}` | User sends a message. Triggers handler execution and response streaming. | +| `chat:user-message` | `{messageId, text, threadId, timestamp, attachments?}` | User sends a message. `messageId` (e.g. `"msg_abc12345"`) is generated by the frontend and stored on both sides so the same message can be addressed later for editing or resending. | | `chat:stop-generation` | `{threadId, messageId}` | User clicks stop button to cancel in-progress generation. Sets cooperative cancel event. | +| `chat:edit-message` | `{messageId, threadId, text}` | User submits edited text for a prior user message. Backend replaces the message, drops everything after it, asks the provider to forget its own state for that thread, and re-runs generation under the same `messageId`. | +| `chat:resend-from` | `{messageId, threadId}` | User re-runs generation starting at a specific user message. The target user message and everything after it are dropped, then regeneration runs. | | `chat:slash-command` | `{command, args, threadId}` | User submits a `/command` from the input bar (e.g., `/clear`, `/export`). | | `chat:input-response` | `{text, requestId, threadId}` | User responds to an `PermissionRequestUpdate` prompt mid-stream. | | `chat:request-state` | `{}` | Frontend requests full state snapshot on initialization. | @@ -29,6 +31,22 @@ The `chat:*` namespace handles all communication between the Python `ChatManager } ``` +### Message identifiers + +Every message the chat manager stores carries an `id` field alongside +`role` and `text`: + +```python +{"id": "msg_abc12345", "role": "user", "text": "..."} +{"id": "msg_a1b2c3d4", "role": "assistant", "text": "..."} +``` + +User-message ids are generated on the frontend and passed through +`chat:user-message`; assistant-message ids are generated by the manager +and used as `messageId` on every stream chunk. `chat:edit-message` and +`chat:resend-from` address messages by this id — the UI's edit/resend +buttons send the id from the `data-msg-id` attribute on the bubble. + ## Thread Management (JS → Python) | Event | Payload | Description | @@ -53,6 +71,7 @@ The `chat:*` namespace handles all communication between the Python `ChatManager | `chat:stream-chunk` | `{messageId, chunk, done, stopped?}` | Incremental text chunk during streaming. Flushed every 30 ms or 300 characters. | | `chat:typing-indicator` | `{typing, threadId?}` | Show or hide the typing indicator before/after streaming. | | `chat:generation-stopped` | `{messageId, partialContent}` | Generation was cancelled or stopped by the user or system. | +| `chat:messages-deleted` | `{threadId, messageIds: [str], editedMessageId?, editedText?}` | The backend truncated the thread — either because the user hit **Edit** or **Resend** on a prior message. The frontend drops every bubble whose id is in `messageIds`, removes any thinking/tool blocks tied to those message ids, and — if `editedMessageId`/`editedText` are present — re-renders the edited user message in place with the new text. | ## Reasoning & Status (Python → JS) @@ -60,14 +79,19 @@ The `chat:*` namespace handles all communication between the Python `ChatManager |-------|---------|-------------| | `chat:thinking-chunk` | `{messageId, text, threadId}` | Incremental reasoning/thinking text (rendered in a collapsible block). | | `chat:thinking-done` | `{messageId, threadId}` | Thinking stream complete — collapses the thinking block and shows character count. | -| `chat:status-update` | `{messageId, text, threadId}` | Transient status message (e.g., "Searching..."). Shown inline, not stored in history. | +| `chat:status-update` | `{messageId, text, threadId}` | Transient status message (e.g., "Searching..."). Shown inline, not stored in history. The manager emits this with `text: ""` at the end of every stream to clear any persistent banner left behind by provider updates (e.g. LangGraph's "Thinking..." status). | ## Tool Use (Python → JS) | Event | Payload | Description | |-------|---------|-------------| -| `chat:tool-call` | `{messageId, toolId, name, arguments, threadId}` | Announces a tool invocation. Rendered as a collapsible `
` element. | -| `chat:tool-result` | `{messageId, toolId, result, isError, threadId}` | Result of a tool invocation. Appended inside the corresponding tool-call block. | +| `chat:tool-call` | `{messageId, toolId, toolCallId, title, name, kind, status, threadId}` | Announces a tool invocation. Rendered as a collapsible `
` card with a spinner. Emitted when `ToolCallUpdate(status="in_progress")` is yielded. | +| `chat:tool-result` | `{messageId, toolId, toolCallId, name, kind, status, result, isError, threadId}` | Final result of the invocation. Frontend looks up the existing tool-call card by `toolId` (`data-tool-id` attribute), removes the spinner, updates the status icon, and appends the `result` text inside the card. Emitted when `ToolCallUpdate(status="completed")` or `ToolCallUpdate(status="failed")` is yielded — the manager routes by status so a second "tool-call" event is never created for the same run. | + +The `toolId` and `toolCallId` fields carry the same value; both are +emitted so handlers written against older PyWry releases (which used +`toolCallId` only) keep working while the newer `data-tool-id` DOM +attribute also gets populated. ## Interactive Input (Python → JS) diff --git a/pywry/docs/docs/reference/events/toolbar.md b/pywry/docs/docs/reference/events/toolbar.md index 4f8f1ab..3f84376 100644 --- a/pywry/docs/docs/reference/events/toolbar.md +++ b/pywry/docs/docs/reference/events/toolbar.md @@ -277,7 +277,18 @@ Emitted by the frontend in response to `toolbar:request-state`. "num-5": {"type": "number", "value": 42}, "date-6": {"type": "date", "value": "2025-03-15"}, "range-7": {"type": "range", "value": 75.0}, - "secret-8": {"type": "secret", "value": {"has_value": True}} + "secret-8": {"type": "secret", "value": {"has_value": True}}, + "marquee-9": { + "type": "marquee", + "value": { + "text": "Breaking news…", # data-text attribute + "items": { # every data-ticker child + "AAPL": "195.20", + "GOOGL": "142.20", + "MSFT": "415.80" + } + } + } }, "timestamp": 1712345678901, "context": "optional-context" # echoed from request @@ -294,6 +305,12 @@ Emitted by the frontend in response to `toolbar:request-state`. } ``` +A marquee single-component response uses the same `{text, items}` shape as +the entry above — `value: {text, items: {ticker_name: current_text}}`. +Marquee items are read from the `[data-ticker]` children of the +`.pywry-marquee` element, giving Python a live snapshot of what the user +actually sees in the ticker strip. + !!! note "Security" SecretInput values are **never** included in state responses. The state returns `{"has_value": true}` instead of the actual value. diff --git a/pywry/docs/docs/reference/events/tvchart.md b/pywry/docs/docs/reference/events/tvchart.md index 7f0ac9a..e4fa40c 100644 --- a/pywry/docs/docs/reference/events/tvchart.md +++ b/pywry/docs/docs/reference/events/tvchart.md @@ -32,7 +32,7 @@ The `tvchart:*` namespace handles all communication between the Python `TVChartS | `tvchart:apply-options` | Python→JS | `{chartOptions?, seriesOptions?, seriesId?, chartId?}` | Apply runtime options to chart or series | | `tvchart:time-scale` | Python→JS | `{fitContent?, scrollTo?, visibleRange?, chartId?}` | Control time scale (fit, scroll, set visible range) | | `tvchart:request-state` | Python→JS | `{chartId?, context?}` | Request current chart state export | -| `tvchart:state-response` | JS→Python | `{chartId, ...series info, viewport, context?, error?}` | Exported chart state response | +| `tvchart:state-response` | JS→Python | `{chartId, theme, symbol, interval, chartType, compareSymbols, indicatorSourceSymbols, series, visibleRange, visibleLogicalRange, rawData, drawings, indicators, context?, error?}` | Exported chart state. `symbol` / `interval` / `chartType` reflect the active main series. `compareSymbols` is the user-facing compare overlay map; `indicatorSourceSymbols` is the compare map restricted to indicator inputs (hidden from the Compare panel). Each entry in `indicators` carries `{seriesId, name, type, period, color, group, sourceSeriesId, secondarySeriesId, secondarySymbol, isSubplot, primarySource, secondarySource}` so compare-derivative indicators (Spread, Ratio, Sum, Product, Correlation) can be described with the ticker their secondary leg holds. | ## User Interaction (JS → Python) @@ -60,10 +60,57 @@ These events are fired by built-in toolbar buttons and handled by the chart fron | `tvchart:screenshot` | Python→JS | `{chartId?}` | Take and open chart screenshot | | `tvchart:undo` | Python→JS | — | Undo last chart action | | `tvchart:redo` | Python→JS | — | Redo last undone action | -| `tvchart:compare` | Python→JS | `{chartId?}` | Open compare symbol panel | -| `tvchart:symbol-search` | Python→JS | `{chartId?}` | Open symbol search dialog | +| `tvchart:compare` | Python→JS | `{chartId?, query?, autoAdd?, symbolType?, exchange?}` | Open the compare-symbols panel. When `query` is set, the panel runs a datafeed search with that query and — if `autoAdd` (default `true`) — adds the exact-ticker match (or the first result otherwise) as a compare series. `symbolType` / `exchange` pre-select the filter dropdowns and narrow the datafeed search (e.g. `{query: "SPY", symbolType: "etf"}` resolves to the SPDR ETF instead of `SPYM`). Without `query` the panel just opens for manual user entry. | +| `tvchart:symbol-search` | Python→JS | `{chartId?, query?, autoSelect?, symbolType?, exchange?}` | Open the symbol search dialog. `query` pre-fills the input and runs the datafeed search. `autoSelect` (default `true` when `query` is set) picks the exact-ticker match — or the first result otherwise — as soon as the datafeed responds. `symbolType` / `exchange` narrow the search the same way they do for `tvchart:compare`. Agent tools drive main-ticker changes this way. | | `tvchart:fullscreen` | Python→JS | — | Toggle fullscreen on chart wrapper | +### Example — programmatic symbol change + +```python +# Open the search dialog pre-filled with "MSFT" and auto-pick the result +app.emit("tvchart:symbol-search", {"query": "MSFT", "autoSelect": True}) + +# Narrow to ETF so "SPY" resolves to SPDR S&P 500 rather than SPYM +app.emit( + "tvchart:symbol-search", + {"query": "SPY", "autoSelect": True, "symbolType": "etf"}, +) +``` + +## Built-in Indicators + +These events drive the chart's native indicator engine — the same code path +that runs when the user picks an indicator from the toolbar panel. The JS +frontend computes the indicator values from the current bar data, manages +the legend, subplot panes, undo/redo, and (for Bollinger Bands) the band +fill primitive. + +| Event | Direction | Payload | Description | +|-------|-----------|---------|-------------| +| `tvchart:add-indicator` | Python→JS | `{name, period?, color?, source?, method?, multiplier?, maType?, offset?, chartId?}` | Add a built-in indicator by name. See the `add_builtin_indicator()` method docstring for the full list of valid `name` values (SMA, EMA, WMA, RSI, ATR, VWAP, Bollinger Bands, Volume SMA, and the "Lightweight Examples" family). | +| `tvchart:remove-indicator` | Python→JS | `{seriesId, chartId?}` | Remove an indicator series by its id. Grouped indicators (e.g. the three Bollinger bands) are removed together. Subplot panes are cleaned up automatically. | +| `tvchart:list-indicators` | Python→JS | `{chartId?, context?}` | Request the current list of active indicators. The frontend replies with `tvchart:list-indicators-response`. | +| `tvchart:list-indicators-response` | JS→Python | `{indicators: [{seriesId, name, type, period, color, group?, sourceSeriesId?, secondarySeriesId?, secondarySymbol?, isSubplot?, primarySource?, secondarySource?}], chartId?, context?}` | Snapshot of every active indicator on the chart. `secondarySeriesId` + `secondarySymbol` are populated on compare-derivative indicators (Spread, Ratio, Sum, Product, Correlation); `sourceSeriesId` identifies the primary input series (usually `"main"`). `context` is echoed from the request for correlation. | + +### Example — adding indicators from Python + +```python +# SMA(50) overlay using the charting engine's own computation +app.add_builtin_indicator("SMA", period=50, color="#2196F3") + +# Bollinger Bands (creates three series: upper, middle, lower) +app.add_builtin_indicator("Bollinger Bands", period=20, multiplier=2) + +# RSI in a subplot pane +app.add_builtin_indicator("RSI", period=14) + +# Remove a specific indicator later +app.remove_builtin_indicator("ind_sma_1713200000") + +# Ask the chart what's currently rendered +app.list_indicators(context={"trigger": "inventory-check"}) +``` + ## Drawing Tools | Event | Direction | Payload | Description | diff --git a/pywry/examples/pywry_demo_deepagent_nvidia.py b/pywry/examples/pywry_demo_deepagent_nvidia.py new file mode 100644 index 0000000..6da1394 --- /dev/null +++ b/pywry/examples/pywry_demo_deepagent_nvidia.py @@ -0,0 +1,517 @@ +"""PyWry LangChain Deep Agent Demo — NVIDIA NIM + TradingView Chart. + +An AI-powered financial chart analyst that drives the live chart +exclusively through PyWry's FastMCP tool suite. There are no local +LangChain tools — every action is an MCP tool served by the in-process +PyWry MCP server. + +The TradingView chart (with yFinance datafeed) occupies the main +window area while the Deep Agent chat panel sits in a right-side +toolbar. The MCP server is started on a random localhost port and +shares the app's widget registry so tool calls drive the live chart. + +Usage:: + + pip install 'pywry[deepagent,mcp]' yfinance langchain-nvidia-ai-endpoints + export NVIDIA_API_KEY="nvapi-..." + python pywry_demo_deepagent_nvidia.py # AAPL chart + python pywry_demo_deepagent_nvidia.py MSFT # MSFT chart +""" + +from __future__ import annotations + +import asyncio +import contextlib +import os +import pathlib +import socket +import sys +import threading + +from typing import TYPE_CHECKING, Any + + +if TYPE_CHECKING: + from collections.abc import Callable + + +# Silence the benign Windows ProactorEventLoop close-race tracebacks +# ("Exception in callback _ProactorBasePipeTransport._call_connection_lost +# ... ConnectionResetError: [WinError 10054]") that fire when a remote +# forcibly closes a socket asyncio is mid-shutdown on. Install on every +# loop created in this process by wrapping the default policy — this +# catches loops in the MCP server thread, the langchain_mcp_adapters +# client connection, PyWry's own runtime, etc. +def _asyncio_exception_handler(loop: asyncio.AbstractEventLoop, context: dict[str, Any]) -> None: + exc = context.get("exception") + if isinstance(exc, (ConnectionResetError, ConnectionAbortedError)): + return + msg = str(context.get("message", "")) + if "WinError 10054" in msg or "forcibly closed" in msg: + return + loop.default_exception_handler(context) + + +class _QuietProactorPolicy(asyncio.DefaultEventLoopPolicy): + """Event-loop policy that drops proactor close-race tracebacks. + + Pre-installs ``_asyncio_exception_handler`` on every loop created + so the filter is active before any loop starts running. + """ + + def new_event_loop(self) -> asyncio.AbstractEventLoop: + loop = super().new_event_loop() + loop.set_exception_handler(_asyncio_exception_handler) + return loop + + +# Install only once, at import time, before any other loop is created. +_existing_policy = asyncio.get_event_loop_policy() +if not isinstance(_existing_policy, _QuietProactorPolicy): + asyncio.set_event_loop_policy(_QuietProactorPolicy()) + +from pywry_demo_tvchart_yfinance import ( # noqa: E402 (policy install precedes imports) + SUPPORTED_RESOLUTIONS, + BarCache, + RealtimeStreamer, + build_marquee, + make_callbacks, +) + +from pywry import PyWry, ThemeMode # noqa: E402 +from pywry.chat.manager import ChatManager, SettingsItem # noqa: E402 +from pywry.chat.providers.deepagent import DeepagentProvider # noqa: E402 +from pywry.tvchart import build_tvchart_toolbars # noqa: E402 + + +DEFAULT_MODEL = "qwen/qwen3-coder-480b-a35b-instruct" + +# Preferred tool-capable chat models exposed through NVIDIA NIM, in +# priority order. The first model that the live ``ChatNVIDIA. +# get_available_models()`` lookup actually returns is picked as the +# default. Llama variants are intentionally excluded — they under- +# perform on strict-format tool-calling compared to the models below. +PREFERRED_TOOL_MODELS = [ + "qwen/qwen3-coder-480b-a35b-instruct", + "deepseek-ai/deepseek-v3.1", + "deepseek-ai/deepseek-r1", + "moonshotai/kimi-k2-instruct-0905", + "openai/gpt-oss-120b", + "qwen/qwen3-235b-a22b-instruct-2507", + "zai-org/glm-4.5-air", + "mistralai/mistral-nemotron", +] + +CHART_SYSTEM_PROMPT = """\ +You drive a live TradingView chart through MCP tools. + +widget_id: read it from the ``widget_id: `` line inside any \ +``--- Attached: ---`` block on the user's message. Pass it \ +on every tool call. + +For every user request, call the matching tool and reply with ONE \ +sentence confirming what changed. Examples of the complete reply \ +(not an excerpt): + + Switched to MSFT on the weekly. + Added a 50-period SMA. + Added SPY as a compare series. + Set the interval to 1m. + +Tool → intent: + +- Change ticker → tvchart_symbol_search(widget_id, query, auto_select=True) +- Timeframe → tvchart_change_interval(widget_id, value) (1m 5m 15m 1h 1d 1w 1M ...) +- Chart type → tvchart_chart_type(widget_id, value) (Candles, Line, Heikin Ashi, Bars, Area) +- Indicator → tvchart_add_indicator(widget_id, name, period=...) +- Compare overlay → tvchart_compare(widget_id, query, auto_add=True) +- Price line → tvchart_add_price_line(widget_id, price, title=...) +- Markers → tvchart_add_markers(widget_id, markers) +- Zoom preset → tvchart_time_range(widget_id, value) (1D 1W 1M 3M 6M 1Y 5Y YTD) +- Visible range → tvchart_set_visible_range(widget_id, from_time, to_time) +- Fit all → tvchart_fit_content(widget_id) +- Log/auto scale → tvchart_log_scale / tvchart_auto_scale(widget_id, value=bool) +- Undo / redo → tvchart_undo / tvchart_redo(widget_id) +- Screenshot → tvchart_screenshot(widget_id) +- Fullscreen → tvchart_fullscreen(widget_id) +- Remove indicator → tvchart_remove_indicator(widget_id, series_id) +- List indicators → tvchart_list_indicators(widget_id) + +Every required argument MUST be set. Missing ``value`` / ``query`` \ +returns an error — do not emit without it. + +To report chart state (symbol, interval, indicators, last close, \ +visible range, anything): call tvchart_request_state(widget_id) and \ +quote exact values from the return. Never recall from memory, \ +earlier turns, or training data. + +FORBIDDEN in every reply: + +- Headers, sections, ``Current Chart State``, ``Next Steps``, \ + ``Action Summary``, ``Debug Logs``, ``Confirmation``, ``OFFICIAL \ + RESPONSE``, ``FINAL RESPONSE``, or any similar label. +- Multi-choice menus ("Would you like to / Reply with one of"). +- Pseudo-JSON, tables, or code blocks quoting tool returns. +- Writing tool calls as prose text. +- Numbers or symbols not present in a real tool return this turn. +- Multiple sentences except when the user explicitly asked for \ + several distinct pieces of information. + +Multi-step requests +------------------- + +Count the distinct chart actions the user asked for. Examples: + +- "switch to MSFT and go weekly" — 2 steps +- "update to BTC-USD, go 1m, zoom to last day" — 3 steps +- "add a 50 SMA, a 200 SMA, and an RSI" — 3 steps +- "switch to BTC-USD" — 1 step (skip todos) + +If the count is >= 2, follow this flow: + +1. Call ``write_todos`` with one entry per step, all in \ + ``pending`` status. This renders the plan card. + +2. For each step in order, issue BOTH tool calls together in the \ + SAME model response (parallel tool calls on one assistant \ + message): + + - the chart tool for the step, AND + - ``write_todos`` with that step flipped to ``completed``, \ + every prior step kept ``completed``, every remaining step \ + kept ``pending``. + + Issuing them in one response halves the round-trips per step \ + and keeps the plan card in sync with the chart in real time. \ + Do NOT split them across two turns. + +3. After the LAST step's parallel ``chart tool + write_todos`` \ + response has returned, reply with ONE sentence summarising the \ + final state. + +You MUST do every step in the SAME turn. Do not stop after the \ +first tool call, do not emit a summary reply before every \ +``pending`` step has become ``completed``, do not return control \ +to the user mid-plan. + +Error handling — FAIL FAST: + +If a chart tool returns ``confirmed: false`` or ``error``, STOP \ +THE PLAN. In the next response, call ``write_todos`` alone with \ +the failed step marked ``failed`` and every remaining step still \ +``pending``, then reply with ONE sentence stating which step \ +failed and the tool's ``reason``. Do NOT attempt the remaining \ +steps — they likely depend on the failed one and running them \ +blind wastes tool calls and confuses the chart state. + +Single-action requests (one tool call) skip ``write_todos`` \ +entirely — one tool call, one reply sentence, done. +""" + + +def _start_pywry_mcp_server(app: PyWry, widget_id: str) -> tuple[str, Callable[[], None]]: + """Start PyWry's FastMCP server in-process and return ``(url, stop)``. + + The server shares ``pywry.mcp.state._app`` with the running PyWry app + so MCP tools operate on the live chart widget. + + Drives a ``uvicorn.Server`` directly against the FastMCP Starlette + app so we have a handle (``server.should_exit``) for graceful + shutdown. ``stop()`` sets the flag and joins the owning thread; + uvicorn then walks through its normal shutdown sequence — close + listen sockets, wait for active requests, unwind the lifespan task + group from inside the same task that entered it. This avoids the + "attempted to exit cancel scope in a different task" / + "athrow(): asynchronous generator is already running" errors that + arise from cancelling a task mid-``anyio.TaskGroup``. + """ + import uvicorn + + import pywry.mcp.state as mcp_state + + from pywry.mcp.server import create_server + from pywry.mcp.state import register_widget + + mcp_state._app = app + register_widget(widget_id, app) + + sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) + sock.bind(("127.0.0.1", 0)) + port = sock.getsockname()[1] + sock.close() + + mcp = create_server() + starlette_app = mcp.http_app(transport="streamable-http") + + config = uvicorn.Config( + app=starlette_app, + host="127.0.0.1", + port=port, + log_level="warning", + lifespan="on", + # Keep shutdown tight — single-client in-process server. + timeout_graceful_shutdown=2, + ) + server = uvicorn.Server(config) + + def _thread_target() -> None: + # The module-level ``_QuietProactorPolicy`` already pre-installs + # a Windows-proactor close-race filter on every loop we create + # — no per-thread handler install needed here. + loop = asyncio.new_event_loop() + asyncio.set_event_loop(loop) + try: + loop.run_until_complete(server.serve()) + finally: + # Cancel any tasks that uvicorn / starlette / sse_starlette + # left pending (e.g. ``_shutdown_watcher`` in sse_starlette), + # then drain them to completion before closing the loop. + # Otherwise Python emits ``Task was destroyed but it is + # pending!`` warnings when the loop closes. + pending = [t for t in asyncio.all_tasks(loop) if not t.done()] + for task in pending: + task.cancel() + if pending: + with contextlib.suppress(Exception): + loop.run_until_complete(asyncio.gather(*pending, return_exceptions=True)) + with contextlib.suppress(Exception): + loop.run_until_complete(loop.shutdown_asyncgens()) + loop.close() + + thread = threading.Thread(target=_thread_target, name="pywry-mcp-server", daemon=True) + thread.start() + + # Wait for the server to actually start listening so the agent's + # first tool call doesn't race startup. + import time as _time + + deadline = _time.monotonic() + 5.0 + while _time.monotonic() < deadline and not server.started: + _time.sleep(0.05) + + def stop() -> None: + # Flip uvicorn's graceful-shutdown flag. ``server.serve()`` + # polls this each iteration; once set it stops accepting new + # connections, closes the listen socket, cancels the lifespan + # task *cooperatively from inside its own task*, waits up to + # ``timeout_graceful_shutdown`` seconds for active requests to + # finish, then returns cleanly from serve(). No cross-task + # cancellation, no stuck async generators. + server.should_exit = True + thread.join(timeout=float(config.timeout_graceful_shutdown) + 2.0) + + return f"http://127.0.0.1:{port}/mcp", stop + + +def _fetch_nvidia_models() -> list[str]: + """Fetch available tool-capable chat models from NVIDIA NIM.""" + try: + from langchain_nvidia_ai_endpoints import ChatNVIDIA + + available = ChatNVIDIA.get_available_models() + model_ids = sorted( + m.id + for m in available + if getattr(m, "model_type", None) == "chat" and getattr(m, "supports_tools", False) + ) + if not model_ids: + return [DEFAULT_MODEL] + for preferred in PREFERRED_TOOL_MODELS: + if preferred in model_ids: + model_ids = [preferred, *[m for m in model_ids if m != preferred]] + break + if model_ids: + return model_ids + except Exception: + return [DEFAULT_MODEL] + + +def main() -> None: + """Launch the NVIDIA Deep Agent + TradingView chart.""" + symbol = sys.argv[1].upper() if len(sys.argv) > 1 else "AAPL" + + api_key = os.environ.get("NVIDIA_API_KEY", "") + if not api_key: + sys.exit( + "NVIDIA_API_KEY environment variable is required.\n" + "Get one at https://build.nvidia.com/ and run:\n" + " export NVIDIA_API_KEY='nvapi-...'" + ) + + app = PyWry(theme=ThemeMode.DARK) + cache = BarCache() + streamer = RealtimeStreamer(app, cache) + + datafeed_callbacks = make_callbacks(app, streamer, cache) + + model_ids = _fetch_nvidia_models() + initial_model = model_ids[0] if model_ids else DEFAULT_MODEL + + # "chart" is the user-facing NAME of the TradingView component + # instance the agent operates on. It shows up in three places: + # + # 1. ``app.show_tvchart(chart_id="chart", ...)`` — assigns the name + # to the actual TV component, so every ``chartId`` field on + # tvchart events carries it. + # 2. ``register_widget("chart", app)`` — registers the containing + # PyWry widget under the same name for MCP routing. Single- + # widget servers: the MCP handler auto-resolves ``widget_id`` + # from the sole registered widget; this just labels it. + # 3. ``chat.register_context_source("chart", ...)`` — exposes the + # chart as an ``@chart`` mention in the chat UI. The attachment + # carries the chart component's id, letting the agent route + # tvchart_* tool calls against that specific instance. + CHART_COMPONENT_ID = "chart" + mcp_url, stop_mcp_server = _start_pywry_mcp_server(app, widget_id=CHART_COMPONENT_ID) + mcp_servers = { + "pywry": {"transport": "streamable_http", "url": mcp_url}, + } + + # No local LangChain tools — every action the agent takes is an MCP + # tool served by the in-process PyWry FastMCP server. Bundle the + # three PyWry skill sheets that describe the surface this demo + # exercises: the TradingView chart tool API, how the chat widget + # routes messages + attachments + tool-call cards, and the event + # system that plumbs it all together. + from pywry.mcp import skills as _skills_pkg + + skills_root = pathlib.Path(_skills_pkg.__file__).parent + skill_files = [ + str(skills_root / "tvchart" / "SKILL.md"), + str(skills_root / "chat_agent" / "SKILL.md"), + str(skills_root / "events" / "SKILL.md"), + ] + missing = [p for p in skill_files if not pathlib.Path(p).is_file()] + if missing: + raise RuntimeError(f"Missing skill files: {missing}") + + provider = DeepagentProvider( + model=f"nvidia:{initial_model}", + tools=[], + mcp_servers=mcp_servers, + system_prompt=CHART_SYSTEM_PROMPT, + # Fully override the general-purpose PyWry prompt. + replace_system_prompt=True, + skills=skill_files, + # Multi-step requests + write_todos bookkeeping easily consume + # 15-25 graph steps; give the agent headroom so a 3-5-action + # chain doesn't hit the default 50-step ceiling mid-plan. + recursion_limit=150, + ) + + def _build_or_raise(model_name: str) -> Any: + provider._model = f"nvidia:{model_name}" + agent = provider._build_agent() + if agent is None or not hasattr(agent, "astream_events"): + msg = ( + f"Model '{model_name}' did not produce a streaming Deep Agent. " + "Install/upgrade deepagents and langchain-nvidia-ai-endpoints, " + "and pick a valid NVIDIA chat model." + ) + raise RuntimeError(msg) + return agent + + try: + provider._agent = _build_or_raise(initial_model) + except Exception as exc: + sys.exit( + "Failed to initialize Deep Agent.\n" + "Install dependencies: pip install deepagents langchain-nvidia-ai-endpoints\n" + f"Details: {exc}" + ) + + def on_settings_change(key: str, value: Any) -> None: + if key == "model": + prev_model = provider._model + prev_agent = provider._agent + try: + provider._agent = _build_or_raise(str(value)) + except Exception as exc: + provider._model = prev_model + provider._agent = prev_agent + print(f"[deepagent] model switch failed: {exc}") + + chat = ChatManager( + provider=provider, + welcome_message=( + "I'm connected to the TradingView chart with live yFinance data. " + "Type **@chart** in your message to attach the chart so I know " + "which widget to operate on, then ask me to switch tickers, " + "change the timeframe, add indicators, draw markers, etc." + ), + toolbar_width="420px", + toolbar_min_width="320px", + enable_context=True, + settings=[ + SettingsItem( + id="model", + label="Model", + type="select", + value=initial_model, + options=model_ids, + ), + SettingsItem( + id="temperature", + label="Temperature", + type="range", + value=0.7, + min=0.0, + max=2.0, + step=0.1, + ), + SettingsItem(id="sep1", type="separator"), + SettingsItem(id="clear-history", label="Clear History", type="action"), + ], + on_settings_change=on_settings_change, + ) + + chart_toolbars = build_tvchart_toolbars( + intervals=SUPPORTED_RESOLUTIONS, + selected_interval="1d", + ) + + marquee_toolbar, marquee_css = build_marquee(symbol) + chart_toolbars.insert(0, marquee_toolbar) + + merged_callbacks: dict[str, Any] = { + **datafeed_callbacks, + **chat.callbacks(), + } + + widget = app.show_tvchart( + # Assign the TV component instance a user-chosen name — every + # tvchart event now carries ``chartId: "chart"``, and the same + # string is what the agent's ``@chart`` context attachment + # routes against. Without this, ``chart_id`` defaults to a + # random ``tvchart_``. + chart_id=CHART_COMPONENT_ID, + use_datafeed=True, + symbol=symbol, + resolution="1d", + title="PyWry \u2014 LangChain NVIDIA Deep Agent + TradingView Chart", + width=1600, + height=900, + chart_options={"timeScale": {"secondsVisible": False}}, + toolbars=[*chart_toolbars, chat.toolbar()], + callbacks=merged_callbacks, + inline_css=marquee_css, + ) + + chat.bind(widget) + # Register the TV chart component as an @-mentionable context + # source. The first arg is the component id (matches + # ``chart_id`` above); the second is the label shown in the + # popup. When the user types ``@chart`` the chat manager attaches + # a block whose header includes that component id, so the agent + # knows exactly which chart instance the user means. + chat.register_context_source(CHART_COMPONENT_ID, "Trading chart") + + try: + app.block() + finally: + streamer.stop() + stop_mcp_server() + + +if __name__ == "__main__": + main() diff --git a/pywry/examples/pywry_demo_tvchart_yfinance.py b/pywry/examples/pywry_demo_tvchart_yfinance.py index b36ae9c..af5c8a7 100644 --- a/pywry/examples/pywry_demo_tvchart_yfinance.py +++ b/pywry/examples/pywry_demo_tvchart_yfinance.py @@ -81,6 +81,20 @@ def _fmt_volume(value: float | int) -> str: _session_bounds_cache: dict[str, tuple[int, int, int, int]] = {} +def _is_24_7_market(bounds: tuple[int, int, int, int]) -> bool: + """Detect 24/7 markets (crypto) from their session bounds. + + yfinance encodes a 24/7 session as a regular window spanning the + entire day — typically ``(0, 0, 1439, 1439)`` or similar. Equality + of ``pre_start`` and ``post_end`` is not reliable; test the span + of the regular window instead (≥ 23 hours ⇒ 24/7). + """ + pre_start_m, reg_start_m, reg_end_m, post_end_m = bounds + if pre_start_m == post_end_m: + return True # legacy encoding + return (reg_end_m - reg_start_m) >= 23 * 60 + + def _is_overnight(epoch: int, symbol: str) -> bool: """Return True if *epoch* falls outside the pre→post session window. @@ -91,9 +105,9 @@ def _is_overnight(epoch: int, symbol: str) -> bool: bounds = _session_bounds_cache.get(symbol.upper()) if bounds is None: return False # unknown symbol — let it through - pre_start_m, _, _, post_end_m = bounds - if pre_start_m == post_end_m: + if _is_24_7_market(bounds): return False # 24/7 market (crypto) — no overnight + pre_start_m, _, _, post_end_m = bounds tz_name = _tz_cache.get(symbol.upper(), "America/New_York") dt = datetime.fromtimestamp(epoch, tz=ZoneInfo(tz_name)) hm = dt.hour * 60 + dt.minute @@ -110,39 +124,73 @@ def _current_session_label(symbol: str) -> tuple[str, str]: Session windows for US equities (exchange-local time): - - **Pre-Market**: 4:00 AM – 9:30 AM ET - - **Market Open**: 9:30 AM – 4:00 PM ET - - **After Hours**: 4:00 PM – 8:00 PM ET - - **Overnight**: 8:00 PM – 4:00 AM ET (Blue Ocean ATS) + - **Pre-Market**: 4:00 AM – 9:30 AM ET, Mon–Fri + - **Market Open**: 9:30 AM – 4:00 PM ET, Mon–Fri + - **After Hours**: 4:00 PM – 8:00 PM ET, Mon–Fri + - **Overnight**: 8:00 PM Mon–Thu – 4:00 AM Tue–Fri (Blue Ocean ATS) + - **Closed**: Saturday and Sunday + + 24/7 markets (crypto) always report "Market Open". """ bounds = _session_bounds_cache.get(symbol.upper()) if bounds is None: return ("—", "#787b86") - pre_start_m, reg_start_m, reg_end_m, post_end_m = bounds - if pre_start_m == post_end_m: + if _is_24_7_market(bounds): return ("Market Open", "#26a69a") # 24/7 (crypto) + pre_start_m, reg_start_m, reg_end_m, post_end_m = bounds tz_name = _tz_cache.get(symbol.upper(), "America/New_York") now = datetime.now(tz=ZoneInfo(tz_name)) hm = now.hour * 60 + now.minute + # datetime.weekday(): Mon=0 .. Sun=6 + weekday = now.weekday() + is_weekend = weekday >= 5 # Sat or Sun + + # Weekends are fully closed for US equities. Friday after-hours + # ends at 20:00 ET and the chart stays closed until Sunday 20:00 + # ET when Blue Ocean ATS resumes overnight trading for Monday's + # pre-market open. + if is_weekend: + # Sunday 20:00 ET onward is the next trading week's overnight. + if weekday == 6 and hm >= post_end_m: + return ("Overnight", "#64b5f6") + return ("Closed", "#787b86") + if reg_start_m <= hm < reg_end_m: return ("Market Open", "#26a69a") if pre_start_m <= hm < reg_start_m: return ("Pre-Market", "#ffa726") if reg_end_m <= hm < post_end_m: return ("After Hours", "#ffa726") - if hm >= post_end_m or hm < pre_start_m: + # Overnight runs from post-market close through pre-market open the + # NEXT weekday. Friday 20:00 → Sunday 20:00 is weekend-closed, + # handled above; Friday early-morning (before pre-market) is still + # Thursday-night overnight. + if hm >= post_end_m: + # Friday evening rolls into weekend closed. + if weekday == 4: # Friday + return ("Closed", "#787b86") + return ("Overnight", "#64b5f6") + if hm < pre_start_m: return ("Overnight", "#64b5f6") return ("Closed", "#787b86") def _is_extended_session(symbol: str) -> bool: - """Return True if the current time is outside the regular session.""" + """Return True if the current time is outside the regular session. + + Weekends count as extended (not regular). 24/7 markets (crypto) + are never extended. + """ bounds = _session_bounds_cache.get(symbol.upper()) if bounds is None: return False + if _is_24_7_market(bounds): + return False # 24/7 market — always "regular" _, reg_start_m, reg_end_m, _ = bounds tz_name = _tz_cache.get(symbol.upper(), "America/New_York") now = datetime.now(tz=ZoneInfo(tz_name)) + if now.weekday() >= 5: # Sat or Sun + return True hm = now.hour * 60 + now.minute return hm < reg_start_m or hm >= reg_end_m @@ -807,6 +855,15 @@ def __init__(self, app: PyWry, cache: BarCache) -> None: self._stop = threading.Event() # symbol → delay in minutes (from exchangeDataDelayedBy) self._delay: dict[str, int] = {} + # Yahoo streams ``day_volume`` as a cumulative session total on + # every tick. To report per-minute bar volume we subtract the + # cumulative value observed at the end of the previous minute + # (``_bar_volume_base``) from each incoming tick's day_volume. + # symbol → cum day_volume at the start of the current minute bar + self._bar_volume_base: dict[str, int] = {} + # symbol → most recently observed cum day_volume (seeds the base + # when a new minute rolls over) + self._last_day_volume: dict[str, int] = {} # Active marquee symbol — only this symbol may update the marquee. self._active_marquee_symbol: str = "" # Periodic backfill timers (symbol → Timer) @@ -867,9 +924,38 @@ def stop(self) -> None: # noqa: D102 for timer in self._backfill_timers.values(): timer.cancel() self._backfill_timers.clear() - if self._ws: - with contextlib.suppress(Exception): - self._ws.close() + + # Silence yfinance's "Error while listening to messages" log that + # fires when we close the WebSocket — it's the normal 1000 OK + # close handshake, not a real error. yfinance uses the + # ``yfinance`` logger (NOT ``yfinance.live``) and passes + # ``exc_info=True``, so the full traceback leaks to stderr + # unless we raise the level above CRITICAL here. If + # ``YfConfig.debug.hide_exceptions`` is False, yfinance re-raises + # instead of logging, which exits the listener thread without a + # traceback — also fine. + import logging as _logging + + _yf_logger = _logging.getLogger("yfinance") + _prior_level = _yf_logger.level + _yf_logger.setLevel(_logging.CRITICAL + 1) + + try: + if self._ws: + with contextlib.suppress(Exception): + self._ws.close() + # Wait for the daemon listener thread to exit cleanly. If + # we skip this join, the daemon races the interpreter + # finalisation — yfinance catches the close handshake + # exception and tries to log it, but by then the finalizer + # has the stderr lock and the whole process aborts with + # ``Fatal Python error: _enter_buffered_busy``. + thread = self._thread + if thread is not None and thread.is_alive(): + thread.join(timeout=2.0) + self._thread = None + finally: + _yf_logger.setLevel(_prior_level) def _backfill_gap(self, guid: str, symbol: str, resolution: str) -> None: """Refresh cache and push any newer bars to fill the gap.""" @@ -948,7 +1034,10 @@ def _on_message(self, msg: dict[str, Any]) -> None: """Handle a WebSocket tick message from Yahoo Finance. Ticks are bucketed into 1-minute bars and only pushed to - subscribers at 1-minute resolution. + subscribers at 1-minute resolution. Yahoo ships ``day_volume`` + as a cumulative session total on every tick, so per-minute bar + volume is the delta from the cumulative observed at the end of + the previous minute. """ symbol = msg.get("id", "") price = msg.get("price") @@ -962,6 +1051,8 @@ def _on_message(self, msg: dict[str, Any]) -> None: # Bucket to the start of the current minute bar_time = (epoch // 60) * 60 price = float(price) + has_day_volume = "day_volume" in msg + cum_day_volume = int(msg["day_volume"]) if has_day_volume else None with self._lock: prev = self._latest.get(symbol) @@ -969,19 +1060,35 @@ def _on_message(self, msg: dict[str, Any]) -> None: prev["high"] = max(prev["high"], price) prev["low"] = min(prev["low"], price) prev["close"] = price - if "day_volume" in msg: - prev["volume"] = int(msg["day_volume"]) + if cum_day_volume is not None: + base = self._bar_volume_base.get(symbol, cum_day_volume) + # day_volume resets on a new session — protect against + # negative deltas by clamping to zero. + prev["volume"] = max(0, cum_day_volume - base) bar = dict(prev) else: + # New minute bucket — seed the base from the last tick + # we saw (the cumulative at the end of the previous + # minute) so the first tick in the new bar already + # carries only its own volume. + if cum_day_volume is not None: + base = self._last_day_volume.get(symbol, cum_day_volume) + base = min(base, cum_day_volume) + self._bar_volume_base[symbol] = base + initial_vol = max(0, cum_day_volume - base) + else: + initial_vol = 0 bar = { "time": bar_time, "open": price, "high": price, "low": price, "close": price, - "volume": int(msg.get("day_volume", 0)), + "volume": initial_vol, } self._latest[symbol] = dict(bar) + if cum_day_volume is not None: + self._last_day_volume[symbol] = cum_day_volume # Only push to 1-minute subscribers — skip overnight bars # so the chart never shows sparse Blue Ocean ATS data. @@ -1422,34 +1529,13 @@ def on_data_request(data: dict[str, Any], _et: str = "", _lb: str = "") -> None: } -# --------------------------------------------------------------------------- -# Main -# --------------------------------------------------------------------------- - - -def main() -> None: - """Launch the yFinance-powered TradingView chart.""" - symbol = sys.argv[1].upper() if len(sys.argv) > 1 else "AAPL" - - app = PyWry(theme=ThemeMode.DARK) - cache = BarCache() - streamer = RealtimeStreamer(app, cache) - - callbacks = make_callbacks(app, streamer, cache) - - # Keep Python-side theme in sync when the toggle fires - def on_theme_change(data: dict[str, Any]) -> None: - theme_str = (data.get("theme") or "dark").lower() - app.theme = ThemeMode.LIGHT if theme_str == "light" else ThemeMode.DARK - - callbacks["pywry:update-theme"] = on_theme_change - - toolbars = build_tvchart_toolbars( - intervals=SUPPORTED_RESOLUTIONS, - selected_interval="1d", - ) +def build_marquee(symbol: str) -> tuple[Toolbar, str]: + """Build the live-data marquee toolbar and its companion CSS. - # -- Live data marquee (non-scrolling ticker strip above the header) ----- + Returns a ``(toolbar, css)`` tuple. The toolbar is a static + ``Marquee`` laid out as a flex row of labelled ticker slots that + are updated at runtime via ``toolbar:marquee-set-item`` events. + """ ticker_items = [ TickerItem( ticker="ws-symbol", @@ -1457,62 +1543,49 @@ def on_theme_change(data: dict[str, Any]) -> None: ), TickerItem( ticker="ws-price", - html='—', + html='\u2014', class_name="ws-price", ), TickerItem( ticker="ws-change", - html='— (—%)', + html='\u2014 (\u2014%)', class_name="ws-change", ), TickerItem( ticker="ws-session", - html='—', + html='\u2014', class_name="ws-session", ), - TickerItem( - ticker="ws-ext-price", - html="", - class_name="ws-ext-price", - ), - TickerItem( - ticker="ws-ext-change", - html="", - class_name="ws-ext-change", - ), + TickerItem(ticker="ws-ext-price", html="", class_name="ws-ext-price"), + TickerItem(ticker="ws-ext-change", html="", class_name="ws-ext-change"), TickerItem( ticker="ws-open", - html='—', + html='\u2014', class_name="ws-field", ), TickerItem( ticker="ws-high", - html='—', + html='\u2014', class_name="ws-field", ), TickerItem( ticker="ws-low", - html='—', + html='\u2014', class_name="ws-field", ), TickerItem( ticker="ws-volume", - html='—', + html='\u2014', class_name="ws-field", ), TickerItem( ticker="ws-mktcap", - html='—', - class_name="ws-field", - ), - TickerItem( - ticker="ws-vol24", - html="", + html='\u2014', class_name="ws-field", ), + TickerItem(ticker="ws-vol24", html="", class_name="ws-field"), ] - # Build HTML: label + value pairs laid out in a flex row labels = ["", "", "", "", "", "", "O", "H", "L", "Vol", "Mkt Cap", ""] parts: list[str] = [] for label, item in zip(labels, ticker_items, strict=False): @@ -1523,7 +1596,7 @@ def on_theme_change(data: dict[str, Any]) -> None: marquee_html = " ".join(parts) - marquee_toolbar = Toolbar( + toolbar = Toolbar( position="header", class_name="yf-marquee-strip", items=[ @@ -1536,13 +1609,11 @@ def on_theme_change(data: dict[str, Any]) -> None: ), ], ) - toolbars.insert(0, marquee_toolbar) - # -- Custom CSS for the marquee strip ----------------------------------- - marquee_css = """ + css = """ .yf-marquee-strip { - border-bottom: 1px solid var(--pywry-border-color, #333) !important; - background: var(--pywry-bg-primary, #1e1e1e) !important; + border-bottom: 1px solid var(--pywry-border-color) !important; + background: var(--pywry-bg-primary) !important; padding: 0 !important; min-height: 0 !important; } @@ -1561,11 +1632,12 @@ def on_theme_change(data: dict[str, Any]) -> None: font-size: 11.5px; letter-spacing: 0.01em; white-space: nowrap; + color: var(--pywry-text-primary); } .ws-sym { font-weight: 700; font-size: 13px; - color: var(--pywry-text-primary, #e0e0e0); + color: var(--pywry-text-primary); letter-spacing: 0.04em; } .ws-price .pywry-ticker-item, @@ -1581,7 +1653,7 @@ def on_theme_change(data: dict[str, Any]) -> None: font-variant-numeric: tabular-nums; } .ws-label { - color: var(--pywry-text-secondary, #787b86); + color: var(--pywry-text-secondary); font-size: 10.5px; font-weight: 500; text-transform: uppercase; @@ -1590,15 +1662,20 @@ def on_theme_change(data: dict[str, Any]) -> None: } .ws-field { font-variant-numeric: tabular-nums; - color: var(--pywry-text-primary, #e0e0e0); + color: var(--pywry-text-primary); font-size: 11px; } .ws-val { font-variant-numeric: tabular-nums; + color: var(--pywry-text-primary); } .ws-muted { - color: var(--pywry-text-secondary, #787b86); + color: var(--pywry-text-secondary); } + /* Session badge — theme-aware contrast chip. Dark mode: subtle + white overlay on the dark bar. Light mode: subtle dark overlay + on the light bar. Both land around 6-8% alpha so the inner + colored text (bull/bear/overnight tint) stays primary. */ .ws-session .pywry-ticker-item, .ws-session { font-weight: 600; @@ -1606,7 +1683,13 @@ def on_theme_change(data: dict[str, Any]) -> None: letter-spacing: 0.03em; padding: 1px 6px; border-radius: 3px; - background: rgba(255, 255, 255, 0.06); + background: rgba(255, 255, 255, 0.08); + } + html.light .ws-session .pywry-ticker-item, + html.light .ws-session, + .pywry-theme-light .ws-session .pywry-ticker-item, + .pywry-theme-light .ws-session { + background: rgba(0, 0, 0, 0.06); } .ws-ext-price .pywry-ticker-item, .ws-ext-price { @@ -1621,6 +1704,33 @@ def on_theme_change(data: dict[str, Any]) -> None: font-variant-numeric: tabular-nums; } """ + return toolbar, css + + +def main() -> None: + """Launch the yFinance-powered TradingView chart.""" + symbol = sys.argv[1].upper() if len(sys.argv) > 1 else "AAPL" + + app = PyWry(theme=ThemeMode.DARK) + cache = BarCache() + streamer = RealtimeStreamer(app, cache) + + callbacks = make_callbacks(app, streamer, cache) + + # Keep Python-side theme in sync when the toggle fires + def on_theme_change(data: dict[str, Any]) -> None: + theme_str = (data.get("theme") or "dark").lower() + app.theme = ThemeMode.LIGHT if theme_str == "light" else ThemeMode.DARK + + callbacks["pywry:update-theme"] = on_theme_change + + toolbars = build_tvchart_toolbars( + intervals=SUPPORTED_RESOLUTIONS, + selected_interval="1d", + ) + + marquee_toolbar, marquee_css = build_marquee(symbol) + toolbars.insert(0, marquee_toolbar) app.show_tvchart( use_datafeed=True, diff --git a/pywry/pyproject.toml b/pywry/pyproject.toml index b930eb2..fc39f2e 100644 --- a/pywry/pyproject.toml +++ b/pywry/pyproject.toml @@ -33,6 +33,7 @@ dependencies = [ "uvicorn>=0.40.0", "watchdog>=3.0.0", "setproctitle>=1.3.0", + "websockets>=16.0.0", ] [project.scripts] @@ -44,6 +45,62 @@ ext_mod = "pywry._vendor.pytauri_wheel.ext_mod" [project.entry-points."pyinstaller40"] hook-dirs = "pywry._pyinstaller_hook:get_hook_dirs" +[dependency-groups] +test = [ + "pytest>=7.0.0", + "pytest-asyncio>=0.21.0", + "pytest-timeout>=2.0.0", + "fakeredis>=2.33.0", + "testcontainers>=4.14.0", +] +lint = [ + "ruff>=0.13", + "pylint>=3.0.0", +] +typecheck = [ + "mypy>=1.0.0", +] +docs = [ + "mkdocs>=1.5.0", + "mkdocs-material>=9.5.0", + "mkdocs-autorefs>=1.0.0", + "mkdocstrings[python]>=0.26.0", + "griffe>=1.0.0", + "mkdocs-gen-files>=0.5.0", + "mkdocs-literate-nav>=0.6.0", + "mkdocs-section-index>=0.3.0", +] +build = [ + "pytauri-wheel>=0.8.0", + "pyinstaller>=6.0", +] +features = [ + "agent-client-protocol>=0.1.0", + "anthropic>=0.34.0", + "anywidget>=0.9.0", + "authlib>=1.3.0", + "cryptography>=46.0.0", + "deepagents>=0.1.0", + "fastmcp>=3.2.2", + "ipykernel>=7.2.0", + "keyring>=24.0", + "langchain-mcp-adapters>=0.1.0", + "magentic>=0.39.0", + "openai>=1.0.0", + "pandas>=1.5.3", + "plotly>=6.5.0", + "pysqlcipher3>=1.2.0", + "websockets>=16.0.0", +] +dev = [ + { include-group = "test" }, + { include-group = "lint" }, + { include-group = "typecheck" }, + { include-group = "docs" }, + { include-group = "build" }, + { include-group = "features" }, +] + [project.optional-dependencies] dev = [ "pytauri-wheel>=0.8.0", @@ -68,7 +125,7 @@ dev = [ "anthropic>=0.34.0", "anywidget>=0.9.0", "authlib>=1.3.0", - "fastmcp>=3.0.0", + "fastmcp>=3.2.2", "ipykernel>=7.2.0", "keyring>=24.0", "magentic>=0.39.0", @@ -76,6 +133,10 @@ dev = [ "pyinstaller>=6.0", "websockets>=16.0.0", "pandas>=1.5.3", + "pysqlcipher3>=1.2.0", + "agent-client-protocol>=0.1.0", + "deepagents>=0.1.0", + "langchain-mcp-adapters>=0.1.0", ] openai = [ "openai>=1.0.0", @@ -98,6 +159,9 @@ acp = [ ] deepagent = [ "deepagents>=0.1.0", + "fastmcp>=3.2.2", + "langchain-mcp-adapters>=0.1.0", + "agent-client-protocol>=0.1.0", ] sqlite = [ "pysqlcipher3>=1.2.0", @@ -107,15 +171,18 @@ auth = [ "keyring>=24.0", ] all = [ + "agent-client-protocol>=0.1.0", "anthropic>=0.34.0", "anywidget>=0.9.0", "authlib>=1.3.0", - "fastmcp>=3.0.0", + "deepagents>=0.1.0", + "fastmcp>=3.2.2", "ipykernel>=7.2.0", "keyring>=24.0", + "langchain-mcp-adapters>=0.1.0", "magentic>=0.39.0", "openai>=1.0.0", - "pyinstaller>=6.0", + "pysqlcipher3>=1.2.0" ] freeze = [ "pyinstaller>=6.0", @@ -133,7 +200,6 @@ build-backend = "hatchling.build" [tool.hatch.build.targets.wheel] packages = ["pywry"] # Force platform-specific wheel since we bundle native pytauri binaries -# Setting this to false tells hatch this is NOT a pure Python package strict-naming = false [tool.hatch.build.targets.wheel.hooks.custom] diff --git a/pywry/pywry/app.py b/pywry/pywry/app.py index 5fca1c2..1c0d876 100644 --- a/pywry/pywry/app.py +++ b/pywry/pywry/app.py @@ -1408,6 +1408,7 @@ def show_tvchart( symbol: str | None = None, resolution: str = "1D", provider: Any = None, + chart_id: str | None = None, ) -> NativeWindowHandle | BaseWidget: """Show a TradingView Lightweight Chart. @@ -1451,6 +1452,14 @@ def show_tvchart( A :class:`~pywry.tvchart.datafeed.DatafeedProvider` instance. When supplied, ``use_datafeed`` is set to ``True`` automatically and all datafeed IPC events are wired to the provider. + chart_id : str or None + Explicit identifier for the TradingView chart component. + Every TVChart event carries ``chartId`` so multiple charts + in one window can be addressed independently; passing a + caller-chosen ``chart_id`` here lets apps assign a + meaningful name (e.g. ``"chart"``) that agents and chat + context attachments can route MCP tool calls against. If + omitted, a unique ``tvchart_`` id is auto-generated. Returns ------- @@ -1567,7 +1576,12 @@ def show_tvchart( } ) - chart_id = f"tvchart_{uuid.uuid4().hex[:8]}" + # Caller-supplied chart_id lets apps assign a meaningful name to + # the TradingView chart component (e.g. "chart") so agents / + # context attachments can route MCP tool calls against it + # directly. Fall back to an auto-generated unique id otherwise. + if not chart_id: + chart_id = f"tvchart_{uuid.uuid4().hex[:8]}" chart_html = f"""
diff --git a/pywry/pywry/chat/manager.py b/pywry/pywry/chat/manager.py index b73a0fa..589936a 100644 --- a/pywry/pywry/chat/manager.py +++ b/pywry/pywry/chat/manager.py @@ -84,6 +84,11 @@ class Attachment: For widget attachments — live data extracted from the component. source : str Original source identifier. + auto_attached : bool + ``True`` when the attachment was added implicitly via the chat's + permanent ``@context`` (a registered context source). Such + attachments are passed to the agent like any other but do NOT + render an ``attach_widget`` tool-call card on every turn. """ type: str @@ -91,6 +96,7 @@ class Attachment: path: pathlib.Path | None = None content: str = "" source: str = "" + auto_attached: bool = False _MAX_ATTACHMENTS = 20 @@ -275,6 +281,21 @@ def __init__(self, message_id: str) -> None: self.last_flush = time.monotonic() +def _tool_result_text(content: Any) -> str: + """Flatten a ToolCallUpdate.content value into a plain string for the UI.""" + if isinstance(content, str): + return content + if isinstance(content, list): + parts: list[str] = [] + for part in content: + if isinstance(part, dict) and part.get("type") == "text": + parts.append(str(part.get("text", ""))) + elif isinstance(part, str): + parts.append(part) + return "".join(parts) + return "" + + class ChatManager: """ACP-native orchestrator for the PyWry chat component. @@ -524,6 +545,8 @@ def callbacks(self) -> dict[str, Callable[..., Any]]: "chat:request-state": self._on_request_state, "chat:todo-clear": self._on_todo_clear, "chat:input-response": self._on_input_response, + "chat:edit-message": self._on_edit_message, + "chat:resend-from": self._on_resend_from, } @property @@ -558,7 +581,7 @@ def send_message(self, text: str, thread_id: str | None = None) -> None: {"messageId": msg_id, "text": text, "threadId": tid}, ) self._threads.setdefault(tid, []) - self._threads[tid].append({"role": "assistant", "text": text}) + self._threads[tid].append({"id": msg_id, "role": "assistant", "text": text}) def _emit(self, event: str, data: dict[str, Any]) -> None: """Emit an event via the bound widget.""" @@ -709,40 +732,101 @@ def _resolve_widget_attachment( content: str | None = None, name: str | None = None, ) -> Attachment | None: - """Create an Attachment for a widget/component reference.""" + """Create an Attachment for a widget/component reference. + + The resulting attachment always carries an explicit + ``widget_id: `` line so an LLM agent reading the @-context + can use it directly in any tool call that requires a widget_id + (notably the MCP ``tvchart_*`` family). Any payload returned + by the JS-side ``getData()`` is appended after the id header. + """ + registered = self._context_sources.get(widget_id) + display_name = (registered or {}).get("name") or name or widget_id + # Always lead with the widget id so any consuming agent has the + # routing information it needs without having to discover it. + header_lines = [f"widget_id: {widget_id}"] + if content: - display_name = name or widget_id - registered = self._context_sources.get(widget_id) - if registered: - display_name = registered["name"] + body = f"{chr(10).join(header_lines)}\n\n{content}" return Attachment( type="widget", name=f"@{display_name}", - content=content, + content=body, source=widget_id, ) + + # No content from the frontend — fall back to inline-widget + # introspection (HTML widgets created via app.show), still + # prefixing widget_id. try: app = getattr(self._widget, "_app", None) if self._widget else None if app is None: - return None + return Attachment( + type="widget", + name=f"@{display_name}", + content="\n".join(header_lines), + source=widget_id, + ) widgets = getattr(app, "_inline_widgets", {}) target = widgets.get(widget_id) if target is None: - return None + return Attachment( + type="widget", + name=f"@{display_name}", + content="\n".join(header_lines), + source=widget_id, + ) label = getattr(target, "label", widget_id) - content_parts = [f"# Widget: {label}"] + inline_lines: list[str] = [f"# Widget: {label}"] html_content = getattr(target, "html", None) if html_content: - content_parts.append(f"Widget type: HTML widget ({len(html_content)} chars)") + inline_lines.append(f"Widget type: HTML widget ({len(html_content)} chars)") + body = "\n".join(header_lines) + "\n\n" + "\n\n".join(inline_lines) return Attachment( type="widget", name=f"@{label}", - content="\n\n".join(content_parts), + content=body, source=widget_id, ) except Exception: log.warning("Could not resolve widget %r", widget_id, exc_info=True) - return None + # Even on failure, surface the widget_id — better the agent + # has the id than nothing at all. + return Attachment( + type="widget", + name=f"@{display_name}", + content="\n".join(header_lines), + source=widget_id, + ) + + def _auto_attach_context_sources( + self, + existing: list[Attachment], + ) -> list[Attachment]: + """Append every registered context source the user didn't @-mention. + + A widget registered with :py:meth:`register_context_source` is part + of the chat's permanent ``@context``: every user message carries + an attachment for it whose content begins with ``widget_id: ``. + That guarantees an LLM agent always has the routing information + for the chat's components without the user having to repeat + ``@`` on every turn. + + Already-resolved attachments take precedence — explicit mentions + keep whatever payload the frontend's ``getData()`` returned. + """ + if not self._enable_context or not self._context_sources: + return existing + explicit_sources = {att.source for att in existing if att.type == "widget" and att.source} + merged: list[Attachment] = list(existing) + for source_id in self._context_sources: + if source_id in explicit_sources: + continue + auto = self._resolve_widget_attachment(source_id) + if auto is not None: + auto.auto_attached = True + merged.append(auto) + return merged def _resolve_attachments( self, @@ -862,6 +946,44 @@ def _dispatch_config_update( }, ) + def _dispatch_tool_call_update( + self, + update: ToolCallUpdate, + state: _StreamState, + thread_id: str, + ) -> None: + """Dispatch a tool-call start OR a tool-result to the UI.""" + self._flush_buffer(state) + if update.status in {"completed", "failed"}: + self._emit_fire( + "chat:tool-result", + { + "messageId": state.message_id, + "toolId": update.tool_call_id, + "toolCallId": update.tool_call_id, + "name": update.name, + "kind": update.kind, + "status": update.status, + "result": _tool_result_text(update.content), + "isError": update.status == "failed", + "threadId": thread_id, + }, + ) + return + self._emit_fire( + "chat:tool-call", + { + "messageId": state.message_id, + "toolId": update.tool_call_id, + "toolCallId": update.tool_call_id, + "title": update.title, + "name": update.name, + "kind": update.kind, + "status": update.status, + "threadId": thread_id, + }, + ) + def _dispatch_session_update( self, update: Any, @@ -877,19 +999,7 @@ def _dispatch_session_update( self._dispatch_text_update(update, state, thread_id) elif isinstance(update, ToolCallUpdate): - self._flush_buffer(state) - self._emit_fire( - "chat:tool-call", - { - "messageId": state.message_id, - "toolCallId": update.tool_call_id, - "title": update.title, - "name": update.name, - "kind": update.kind, - "status": update.status, - "threadId": thread_id, - }, - ) + self._dispatch_tool_call_update(update, state, thread_id) elif isinstance(update, PlanUpdate): self._flush_buffer(state) @@ -979,13 +1089,20 @@ def _finalize_stream(self, state: _StreamState, thread_id: str) -> None: "chat:thinking-done", {"messageId": state.message_id, "threadId": thread_id}, ) + # Clear any persistent status banner ("Thinking...", "Searching...", etc.) + self._emit_fire( + "chat:status-update", + {"messageId": state.message_id, "text": "", "threadId": thread_id}, + ) self._emit_fire( "chat:stream-chunk", {"messageId": state.message_id, "chunk": "", "done": True}, ) if state.full_text: self._threads.setdefault(thread_id, []) - self._threads[thread_id].append({"role": "assistant", "text": state.full_text}) + self._threads[thread_id].append( + {"id": state.message_id, "role": "assistant", "text": state.full_text} + ) def _handle_cancel(self, state: _StreamState, thread_id: str) -> None: """Handle stream cancellation.""" @@ -1002,7 +1119,12 @@ def _handle_cancel(self, state: _StreamState, thread_id: str) -> None: if state.full_text: self._threads.setdefault(thread_id, []) self._threads[thread_id].append( - {"role": "assistant", "text": state.full_text, "stopped": True} + { + "id": state.message_id, + "role": "assistant", + "text": state.full_text, + "stopped": True, + } ) def _handle_stream( @@ -1067,6 +1189,12 @@ def _inject_context( if not (ctx.attachments and messages): return messages for att in ctx.attachments: + # Auto-attached @-context entries are infrastructure, not user + # actions — don't render an ``attach_widget`` tool-call card + # for them every single turn. Their content is still injected + # into the user message text below so the agent can read it. + if att.auto_attached: + continue label = att.name.lstrip("@").strip() tool_id = f"ctx_{uuid.uuid4().hex[:8]}" self._emit_fire( @@ -1167,7 +1295,7 @@ def _handle_complete(self, text: str, message_id: str, thread_id: str) -> None: {"messageId": message_id, "text": text, "threadId": thread_id}, ) self._threads.setdefault(thread_id, []) - self._threads[thread_id].append({"role": "assistant", "text": text}) + self._threads[thread_id].append({"id": message_id, "role": "assistant", "text": text}) def _run_handler( self, @@ -1193,7 +1321,9 @@ def _run_handler( {"messageId": message_id, "text": error_text, "threadId": thread_id}, ) self._threads.setdefault(thread_id, []) - self._threads[thread_id].append({"role": "assistant", "text": error_text}) + self._threads[thread_id].append( + {"id": message_id, "role": "assistant", "text": error_text} + ) finally: self._cancel_events.pop(thread_id, None) @@ -1204,9 +1334,13 @@ def _on_user_message(self, data: Any, _event_type: str, _label: str) -> None: if not text: return + # Use the frontend-generated message ID when present so edit/resend + # can address the exact same message in both ends. + user_message_id = data.get("messageId") or f"msg_{uuid.uuid4().hex[:8]}" + self._active_thread = thread_id self._threads.setdefault(thread_id, []) - self._threads[thread_id].append({"role": "user", "text": text}) + self._threads[thread_id].append({"id": user_message_id, "role": "user", "text": text}) message_id = f"msg_{uuid.uuid4().hex[:8]}" cancel = threading.Event() @@ -1219,6 +1353,13 @@ def _on_user_message(self, data: Any, _event_type: str, _label: str) -> None: raw_attachments = data.get("attachments", []) attachments = self._resolve_attachments(raw_attachments) if raw_attachments else [] + # Auto-attach every registered context source that the user did not + # explicitly @-mention. Registering a widget as a context source is + # the developer's declaration that "this component is part of the + # conversation context" — every turn should carry the routing info + # for those widgets so an LLM agent never has to remember an id + # across messages. + attachments = self._auto_attach_context_sources(attachments) ctx = ChatContext( thread_id=thread_id, @@ -1269,13 +1410,15 @@ def _run_provider( content_blocks.append(TextPart(text=last.get("text", ""))) cancel_event = asyncio.Event() + # Use the UI thread_id as the provider session_id so each chat + # thread has its own LangGraph checkpointer thread and the agent + # sees prior turns in the same conversation. + session_id = thread_id or self._session_id async def _run() -> None: state = _StreamState(message_id) typing_hidden = False - async for update in self._provider.prompt( - self._session_id, content_blocks, cancel_event - ): + async for update in self._provider.prompt(session_id, content_blocks, cancel_event): if not typing_hidden: typing_hidden = True self._emit( @@ -1306,7 +1449,9 @@ async def _run() -> None: {"messageId": message_id, "text": error_text, "threadId": thread_id}, ) self._threads.setdefault(thread_id, []) - self._threads[thread_id].append({"role": "assistant", "text": error_text}) + self._threads[thread_id].append( + {"id": message_id, "role": "assistant", "text": error_text} + ) finally: self._cancel_events.pop(thread_id, None) @@ -1317,6 +1462,190 @@ def _on_stop_generation(self, data: Any, _event_type: str, _label: str) -> None: if cancel: cancel.set() + def _truncate_thread_at( + self, + thread_id: str, + message_id: str, + *, + keep_target: bool, + ) -> tuple[list[MessageDict], list[str]]: + """Truncate a thread's history at the message with ``message_id``. + + Returns a tuple ``(removed_messages, removed_ids)``. When + ``keep_target`` is True the message itself is retained and only + messages after it are removed; when False the target message and + everything after it are removed. + """ + messages = self._threads.get(thread_id, []) + cut_index: int | None = None + for idx, msg in enumerate(messages): + if msg.get("id") == message_id: + cut_index = idx + break + if cut_index is None: + return [], [] + keep_until = cut_index + 1 if keep_target else cut_index + removed = messages[keep_until:] + removed_ids = [m.get("id", "") for m in removed if m.get("id")] + self._threads[thread_id] = messages[:keep_until] + return removed, removed_ids + + def _truncate_provider_state(self, thread_id: str, kept_messages: list[MessageDict]) -> None: + """Best-effort: align the provider's persisted history with the UI. + + For LangGraph-backed providers (DeepagentProvider) we delete the + thread state from the checkpointer so the next prompt rebuilds + from a fresh state. The next user message gets re-sent to the + agent with the full surviving history via the ChatManager flow. + """ + provider = self._provider + if provider is None: + return + try: + truncate = getattr(provider, "truncate_session", None) + if callable(truncate): + truncate(thread_id, kept_messages) + except Exception: + log.debug("provider.truncate_session failed", exc_info=True) + + def _on_edit_message(self, data: Any, _event_type: str, _label: str) -> None: + """Edit a previously-sent user message and regenerate from there.""" + thread_id = data.get("threadId", self._active_thread) or self._active_thread + message_id = data.get("messageId", "") + new_text = (data.get("text") or "").strip() + if not message_id or not new_text: + return + + messages = self._threads.get(thread_id, []) + target_idx: int | None = None + for idx, msg in enumerate(messages): + if msg.get("id") == message_id and msg.get("role") == "user": + target_idx = idx + break + if target_idx is None: + return + + # Cancel any active generation in this thread before mutating history + active_cancel = self._cancel_events.get(thread_id) + if active_cancel: + active_cancel.set() + + # Replace the user message text and drop everything after it + messages[target_idx] = {**messages[target_idx], "text": new_text} + removed = messages[target_idx + 1 :] + removed_ids = [m.get("id", "") for m in removed if m.get("id")] + self._threads[thread_id] = messages[: target_idx + 1] + + # Tell the frontend to drop the obsolete bubbles + self._emit_fire( + "chat:messages-deleted", + { + "threadId": thread_id, + "messageIds": removed_ids, + "editedMessageId": message_id, + "editedText": new_text, + }, + ) + + # Reset provider-side history then re-run the prompt with the new text + self._truncate_provider_state(thread_id, list(self._threads[thread_id])) + + synthetic = { + "text": new_text, + "threadId": thread_id, + "messageId": message_id, + "_resend": True, + } + # Pop the just-edited user message so _on_user_message re-appends it + # with the same id. + self._threads[thread_id] = messages[:target_idx] + self._on_user_message(synthetic, "chat:user-message", "") + + def _on_resend_from(self, data: Any, _event_type: str, _label: str) -> None: + """Re-run generation from a specific user message in the thread. + + The target user message stays visible — only the assistant reply + (and any subsequent turns) are dropped and regenerated. Previous + behaviour also removed the user bubble itself, which looked like + the message had been erased. + """ + thread_id = data.get("threadId", self._active_thread) or self._active_thread + message_id = data.get("messageId", "") + if not message_id: + return + + messages = self._threads.get(thread_id, []) + target_idx: int | None = None + for idx, msg in enumerate(messages): + if msg.get("id") == message_id and msg.get("role") == "user": + target_idx = idx + break + if target_idx is None: + return + + active_cancel = self._cancel_events.get(thread_id) + if active_cancel: + active_cancel.set() + + target = messages[target_idx] + # Keep the target user message; drop everything after it. + removed = messages[target_idx + 1 :] + removed_ids = [m.get("id", "") for m in removed if m.get("id")] + self._threads[thread_id] = messages[: target_idx + 1] + + # Frontend drops the obsolete bubbles. We deliberately DO NOT + # pass ``editedMessageId`` / ``editedText`` — the target bubble + # is still in the DOM and its text hasn't changed, so there's + # nothing to re-render for the user message. + if removed_ids: + self._emit_fire( + "chat:messages-deleted", + {"threadId": thread_id, "messageIds": removed_ids}, + ) + + self._truncate_provider_state(thread_id, list(self._threads[thread_id])) + + # Regenerate the assistant reply WITHOUT re-appending the user + # message — it's already in the thread. Skip the user-message + # append step by calling the provider path directly. + cancel = threading.Event() + self._cancel_events[thread_id] = cancel + new_assistant_id = f"msg_{uuid.uuid4().hex[:8]}" + + self._emit( + "chat:typing-indicator", + {"typing": True, "threadId": thread_id}, + ) + + raw_attachments = target.get("attachments", []) + attachments = self._resolve_attachments(raw_attachments) if raw_attachments else [] + attachments = self._auto_attach_context_sources(attachments) + + ctx = ChatContext( + thread_id=thread_id, + message_id=new_assistant_id, + settings=dict(self._settings_values), + cancel_event=cancel, + system_prompt=self._system_prompt, + model=self._model, + temperature=self._temperature, + attachments=attachments, + ) + + messages_for_run = list(self._threads.get(thread_id, [])) + if self._handler is not None: + threading.Thread( + target=self._run_handler, + args=(messages_for_run, ctx, new_assistant_id, thread_id, cancel), + daemon=True, + ).start() + elif self._provider is not None: + threading.Thread( + target=self._run_provider, + args=(messages_for_run, ctx, new_assistant_id, thread_id, cancel), + daemon=True, + ).start() + def _on_todo_clear(self, _data: Any, _event_type: str, _label: str) -> None: """Handle user clearing the plan/todo list.""" self._emit("chat:todo-update", {"items": []}) diff --git a/pywry/pywry/chat/providers/deepagent.py b/pywry/pywry/chat/providers/deepagent.py index 4790e56..961d9ba 100644 --- a/pywry/pywry/chat/providers/deepagent.py +++ b/pywry/pywry/chat/providers/deepagent.py @@ -30,59 +30,19 @@ logger = logging.getLogger(__name__) PYWRY_SYSTEM_PROMPT = """\ -You are operating inside a PyWry chat interface — a rich desktop/notebook/browser \ -UI that renders your responses in real time. - -## How Your Output Renders - -- **Text** streams token-by-token into the chat transcript as markdown. Use headings, \ -bold, lists, code blocks, and links freely — they render with full formatting. -- **Tool calls** appear as collapsible cards showing the tool name, status \ -(pending → in progress → completed/failed), and result. The user sees what you're \ -doing as you do it. -- **write_todos** renders as a structured plan above the chat input with status \ -icons for each entry. Use it to show your thinking process and track multi-step work. -- **Subagent delegation** (the `task` tool) shows a status indicator while the \ -subagent works. - -## Rich Artifacts - -When you produce structured output, the UI can render it as an interactive artifact \ -block instead of plain text. The following artifact types are supported: - -- **Code blocks** in markdown fences render with syntax highlighting and a copy button. -- **Tables** — when you write data to a file in CSV/JSON format, the UI can render \ -it as a sortable, filterable AG Grid table. -- **Charts** — Plotly figure JSON renders as an interactive chart. TradingView \ -candlestick data renders as a financial chart. -- **Images** — URLs and data URIs render inline. -- **JSON** — structured data renders as a collapsible tree viewer. - -Prefer structured output (tables, code blocks, JSON) over describing data in prose \ -when the user asks for data, results, or analysis. - -## Context & Attachments - -The user may attach files or reference live dashboard widgets using @mentions. \ -When attachments are present, their content is prepended to the user's message. \ -Read the attached content carefully before responding — it contains the data the \ -user is asking about. - -## Conversation History - -The full conversation history for this thread is available to you. Reference \ -earlier messages when the user asks follow-up questions. Use the thread context \ -to maintain continuity across multiple exchanges. - -## Guidelines - -- Stream your response naturally — the user sees text appear in real time. -- Use write_todos to break down complex tasks before starting work. -- Show your work: tool calls are visible, so the user can follow your reasoning. -- When producing code, use markdown fenced code blocks with the language specified. -- When asked to analyze data, produce structured output (tables, charts) not \ -just descriptions. -- Be concise. The chat UI is a conversation, not a document. +You are operating inside a PyWry chat interface. Responses stream as \ +markdown; tool calls render as collapsible cards showing the call, \ +status, and result. The user sees every tool call and its return. + +Attachments prepended with ``--- Attached: ---`` carry routing \ +information (e.g. ``widget_id: ``) for tool calls — read the block \ +before invoking tools that target that widget. + +Be concise. The chat is a conversation, not a report. Prefer tool \ +calls over prose whenever a tool can do the work. Do not restate \ +information the tool-call card already shows. Do not fabricate data \ +the tools did not return. Do not describe your reasoning when the \ +tool cards already make it visible. """ _TOOL_KIND_MAP: dict[str, str] = { @@ -111,6 +71,706 @@ def _map_todo_status(status: str) -> Literal["pending", "in_progress", "complete return status_map.get(status, "pending") +def _coerce_text(value: Any) -> str: + """Flatten a LangChain content value (str | list | None) into plain text.""" + if value is None: + return "" + if isinstance(value, str): + return value + if isinstance(value, list): + parts: list[str] = [] + for item in value: + if isinstance(item, str): + parts.append(item) + elif isinstance(item, dict): + text = item.get("text") or item.get("content") or "" + if isinstance(text, str) and text: + parts.append(text) + return "".join(parts) + return str(value) + + +class _ToolCallTextFilter: + """Strip leaked tool-call markup from a streamed text token sequence. + + Two distinct markup families bleed into the visible content stream + on different model + integration combinations: + + 1. ``functions.:{}`` — qwen3-coder under + ``langchain-nvidia-ai-endpoints`` emits tool calls inline using + OpenAI's pre-2024 shorthand. The integration parses some but + not all of these into structured ``tool_calls``; the unparsed + ones surface verbatim. + 2. ``<|tool_call_end|>`` / ``<|tool_calls_section_end|>`` / + ``<|im_start|>`` / etc. — chat-template special tokens that + leak through when the integration doesn't fully strip them + from the model's raw output. + + Both kinds split arbitrarily across stream chunks, so the filter + is stateful. ``functions.X{...}`` blocks need brace counting + with string-literal awareness (escaped quotes, embedded braces + inside string args). ``<|...|>`` tokens just need start/end + pair matching. + + Usage:: + + f = _ToolCallTextFilter() + for chunk_text in stream: + yield f.feed(chunk_text) + yield f.flush() + """ + + _CALL_START = "functions." + _SPECIAL_OPEN = "<|" + _SPECIAL_CLOSE = "|>" + + def __init__(self) -> None: + # Bytes received but not yet emitted — may be the start of a + # ``functions.`` or ``<|`` marker we haven't fully matched. + self._buffer = "" + # Inside a ``functions.X{...}`` JSON arg block. + self._in_call = False + self._depth = 0 + self._in_string = False + self._escape = False + # Inside a ``<|...|>`` chat-template special token. + self._in_special = False + # Cache the unsafe-to-emit suffix patterns once. + self._unsafe_prefixes = (self._CALL_START, self._SPECIAL_OPEN) + self._unsafe_max = max(len(p) for p in self._unsafe_prefixes) + + def _step_in_call(self, ch: str) -> None: + """Advance the brace/string state machine inside a ``functions.X{...}`` block.""" + if self._in_string: + if self._escape: + self._escape = False + elif ch == "\\": + self._escape = True + elif ch == '"': + self._in_string = False + return + if ch == '"': + self._in_string = True + elif ch == "{": + self._depth += 1 + elif ch == "}": + self._depth -= 1 + if self._depth <= 0: + self._in_call = False + self._depth = 0 + self._in_string = False + self._escape = False + + def _step_in_special(self, ch: str, out: list[str]) -> None: + """Advance the ``<|...|>`` state machine; recurse on tail after ``|>``.""" + self._buffer += ch + close_idx = self._buffer.find(self._SPECIAL_CLOSE) + if close_idx < 0: + return + rest = self._buffer[close_idx + len(self._SPECIAL_CLOSE) :] + self._buffer = "" + self._in_special = False + if rest: + out.append(self.feed(rest)) + + def _try_open_call(self, out: list[str]) -> bool: + """If a complete ``functions....{`` opener sits in buffer, enter call mode. + + Returns True if the buffer was consumed (caller skips other checks); + False if the marker isn't fully present yet — caller must NOT keep + scanning the buffer for ``<|`` (the ``functions.`` prefix already + committed us to wait). + """ + call_idx = self._buffer.find(self._CALL_START) + if call_idx < 0: + return False + brace_idx = self._buffer.find("{", call_idx + len(self._CALL_START)) + if brace_idx < 0: + # Marker present but no ``{`` yet — keep buffering, do not + # fall through to the ``<|`` check (it would never match + # ``functions.`` and we'd over-emit). + return True + if call_idx > 0: + out.append(self._buffer[:call_idx]) + rest = self._buffer[brace_idx + 1 :] + self._buffer = "" + self._in_call = True + self._depth = 1 + self._in_string = False + self._escape = False + if rest: + out.append(self.feed(rest)) + return True + + def _try_open_special(self, out: list[str]) -> bool: + """If a ``<|...|>`` token (or its open) is in buffer, drop it; return True.""" + special_idx = self._buffer.find(self._SPECIAL_OPEN) + if special_idx < 0: + return False + close_idx = self._buffer.find(self._SPECIAL_CLOSE, special_idx + len(self._SPECIAL_OPEN)) + if close_idx >= 0: + if special_idx > 0: + out.append(self._buffer[:special_idx]) + rest = self._buffer[close_idx + len(self._SPECIAL_CLOSE) :] + self._buffer = "" + if rest: + out.append(self.feed(rest)) + return True + # Open seen but no close yet — drop everything from ``<|`` on, + # emit the prefix, enter token-skip mode. + if special_idx > 0: + out.append(self._buffer[:special_idx]) + self._buffer = "" + self._in_special = True + return True + + def _flush_safe_prefix(self, out: list[str]) -> None: + """Emit any buffer prefix that can't be the start of a marker we'd miss.""" + tail_unsafe = 0 + for prefix in self._unsafe_prefixes: + # Largest n such that buffer[-n:] is a prefix of marker. + for n in range(min(len(prefix), len(self._buffer)), 0, -1): + if prefix.startswith(self._buffer[-n:]): + tail_unsafe = max(tail_unsafe, n) + break + emit_len = len(self._buffer) - tail_unsafe + if emit_len > 0: + out.append(self._buffer[:emit_len]) + self._buffer = self._buffer[emit_len:] + + def feed(self, text: str) -> str: + if not text: + return "" + out: list[str] = [] + for ch in text: + if self._in_call: + self._step_in_call(ch) + continue + if self._in_special: + self._step_in_special(ch, out) + continue + self._buffer += ch + if self._try_open_call(out): + continue + if self._try_open_special(out): + continue + self._flush_safe_prefix(out) + return "".join(out) + + def flush(self) -> str: + """End of stream — emit anything left in the buffer. + + An unterminated ``functions.X{...}`` block or ``<|...|>`` + token is discarded (the stream was cut mid-markup); a buffer + of ordinary text is returned. + """ + if self._in_call or self._in_special: + self._buffer = "" + self._in_call = False + self._in_special = False + self._depth = 0 + self._in_string = False + self._escape = False + return "" + result = self._buffer + self._buffer = "" + return result + + +_STREAM_THINKING_TYPES = {"thinking", "reasoning"} +_STREAM_TOOL_TYPES = {"tool_use", "tool_call", "function_call"} + + +def _stream_part_text(part: Any) -> str: + if not isinstance(part, dict): + return "" + return _coerce_text(part.get("text") or part.get("content")) + + +def _extract_answer_from_content(content: Any) -> str: + """Pull assistant prose out of a chunk's ``content``, skipping non-prose parts.""" + if not isinstance(content, list): + return _coerce_text(content) + parts: list[str] = [] + for part in content: + if not isinstance(part, dict): + continue + p_type = str(part.get("type", "")).lower() + if p_type in _STREAM_THINKING_TYPES or p_type in _STREAM_TOOL_TYPES: + continue + parts.append(_stream_part_text(part)) + return "".join(parts) + + +def _extract_thinking_from_chunk(chunk: Any, content: Any) -> str: + """Pull thinking/reasoning text out of a chunk's metadata + content parts.""" + additional_kwargs = getattr(chunk, "additional_kwargs", {}) or {} + text = "" + if isinstance(additional_kwargs, dict): + text = _coerce_text( + additional_kwargs.get("reasoning_content") + or additional_kwargs.get("reasoning") + or additional_kwargs.get("thinking") + ) + if not text: + text = _coerce_text(getattr(chunk, "reasoning_content", "")) + if isinstance(content, list): + for part in content: + if ( + isinstance(part, dict) + and str(part.get("type", "")).lower() in _STREAM_THINKING_TYPES + ): + text += _stream_part_text(part) + return text + + +def _extract_stream_text(chunk: Any) -> tuple[str, str]: + """Return ``(thinking_text, answer_text)`` from a model stream chunk. + + Skips structured tool-call content parts (``tool_use`` / ``tool_call`` + / ``function_call``) — those are surfaced as tool-call cards via the + ``on_tool_*`` events, not as prose. Inline ``functions.:N{...}`` + tool-call markup that some models / integrations leak into the text + stream is stripped downstream by ``_ToolCallTextFilter``, which has + to be stateful because the markup splits across chunk boundaries. + """ + if chunk is None: + return "", "" + content = getattr(chunk, "content", "") + answer_text = _extract_answer_from_content(content) + thinking_text = _extract_thinking_from_chunk(chunk, content) + return thinking_text, answer_text + + +def _is_root_chain_end(event: dict[str, Any]) -> bool: + """True when the root chain has finished — the signal to end the stream.""" + return event.get("event") == "on_chain_end" and not event.get("parent_ids") + + +def _strip_special_tokens(text: str) -> str: + """Strip ``<|...|>`` chat-template special tokens from text. + + Tokens like ``<|tool_call_end|>`` or ``<|im_start|>`` are + delimiters in the model's chat template that some integrations + don't fully scrub from the streamed output. They have no + visible meaning in the assistant message — drop them. + """ + if not text or "<|" not in text: + return text + out: list[str] = [] + i = 0 + n = len(text) + while i < n: + idx = text.find("<|", i) + if idx < 0: + out.append(text[i:]) + break + close = text.find("|>", idx + 2) + if close < 0: + # Unterminated — keep what we have and bail. + out.append(text[i:]) + break + out.append(text[i:idx]) + i = close + 2 + return "".join(out) + + +def _parse_inline_tool_calls(text: str) -> tuple[str, list[dict[str, Any]]]: + """Parse ``functions.:{}`` blocks out of text. + + Some models (notably ``qwen3-coder`` on NVIDIA NIM) emit tool calls + inline in the model's text stream using OpenAI's pre-2024 + ``functions.:{}`` shorthand instead of populating + the structured ``tool_calls`` schema. The LangChain integration + doesn't know that format and surfaces the markup verbatim in + ``content`` with an empty ``tool_calls`` list. Result: the calls + never fire and the markup leaks into the assistant message. + + This parser walks the text once, brace-counts JSON arg payloads + with awareness of string literals (so escaped quotes and braces + inside the args don't unbalance us), and returns: + + - ``cleaned``: the same text with every recognised block removed + AND any ``<|...|>`` chat-template special tokens scrubbed. + - ``calls``: a list of ``{"name", "args", "id", "type"}`` dicts in + LangChain's structured ``tool_calls`` format, ready to assign to + an ``AIMessage.tool_calls`` field. + + Malformed JSON inside a block is dropped from ``calls`` (the block + is still stripped from the visible text — better to lose one bad + call than splice raw markup into the chat). + """ + if not text: + return text, [] + if "functions." not in text: + return _strip_special_tokens(text), [] + + out: list[str] = [] + calls: list[dict[str, Any]] = [] + i = 0 + n = len(text) + marker = "functions." + while i < n: + idx = text.find(marker, i) + if idx < 0: + out.append(text[i:]) + break + out.append(text[i:idx]) + next_i, call = _consume_one_inline_call(text, idx, marker, out) + if next_i is None: + # Unterminated payload — drop everything from the marker on. + break + if call is not None: + calls.append(call) + i = next_i + cleaned = _strip_special_tokens("".join(out)) + return cleaned, calls + + +def _consume_one_inline_call( + text: str, + idx: int, + marker: str, + out: list[str], +) -> tuple[int | None, dict[str, Any] | None]: + """Try to parse one ``functions.:{}`` block at ``text[idx:]``. + + Returns ``(next_i, call)`` where ``next_i`` is the offset to resume + scanning from (or ``None`` if the payload was unterminated and the + caller should bail), and ``call`` is the parsed tool-call dict (or + ``None`` if there was nothing parseable — the original text gets + appended to ``out`` so the caller doesn't drop content). + """ + n = len(text) + j = idx + len(marker) + name_start = j + while j < n and (text[j].isalnum() or text[j] == "_"): + j += 1 + name = text[name_start:j] + if not name: + # ``functions.`` with no identifier — keep that one char. + out.append(text[idx]) + return idx + 1, None + # Optional ``:`` index suffix, then optional whitespace. + if j < n and text[j] == ":": + k = j + 1 + while k < n and text[k].isdigit(): + k += 1 + j = k + while j < n and text[j].isspace(): + j += 1 + if j >= n or text[j] != "{": + # Looked like a call but no JSON payload — keep original text. + out.append(text[idx:j]) + return j, None + payload_end = _scan_balanced_braces(text, j) + if payload_end is None: + return None, None + args = _try_parse_call_args(text[j:payload_end]) + if args is None: + return payload_end, None + return payload_end, { + "name": name, + "args": args, + "id": f"call_{uuid.uuid4().hex[:12]}", + "type": "tool_call", + } + + +def _scan_balanced_braces(text: str, start: int) -> int | None: + """Return the index just past the ``}`` that closes the block opened at ``text[start] == '{'``. + + String-literal aware so ``"}"`` inside a JSON string doesn't pop + the depth. Returns ``None`` if the block is unterminated. + """ + depth = 1 + in_string = False + escape = False + k = start + 1 + n = len(text) + while k < n and depth > 0: + ch = text[k] + if in_string: + if escape: + escape = False + elif ch == "\\": + escape = True + elif ch == '"': + in_string = False + elif ch == '"': + in_string = True + elif ch == "{": + depth += 1 + elif ch == "}": + depth -= 1 + k += 1 + return k if depth == 0 else None + + +def _try_parse_call_args(payload: str) -> dict[str, Any] | None: + """JSON-decode a tool-call args payload, wrapping non-dicts as ``{"value": ...}``.""" + import json as _json + + try: + args = _json.loads(payload) + except (ValueError, TypeError): + return None + if not isinstance(args, dict): + return {"value": args} + return args + + +_plan_middleware_singleton: Any = None + + +def _next_pending_plan_step(state: dict[str, Any]) -> str | None: + """Title of the first non-completed todo, or ``None`` if the plan is over. + + Returns ``None`` when the message log doesn't end on an + ``AIMessage``, that ``AIMessage`` still has ``tool_calls`` + (LangGraph will route on its own), ``todos`` is empty / missing, + any todo is ``failed`` (fail-fast contract), or every todo is + already ``completed``. + + ``AIMessage`` is duck-typed so this stays callable when LangChain + isn't installed. + """ + messages = state.get("messages") or [] + if not messages: + return None + last = messages[-1] + if last.__class__.__name__ != "AIMessage": + return None + if getattr(last, "tool_calls", None): + return None + todos = state.get("todos") or [] + if not isinstance(todos, list) or not todos: + return None + candidate: str | None = None + for todo in todos: + if not isinstance(todo, dict): + continue + status = todo.get("status") + if status == "failed": + return None + if status != "completed" and candidate is None: + candidate = str(todo.get("content") or todo.get("title") or "") + return candidate + + +def _build_plan_continuation_middleware() -> Any: + """Return a ``PlanContinuationMiddleware`` instance (or ``None``). + + Single responsibility: when the model exits with no tool calls + BUT ``state.todos`` still has at least one non-completed, + non-failed entry, ``jump_to=model`` with a one-line nudge naming + the next unfinished step. The model can either call its tool + or call ``write_todos`` to mark it done — whichever matches + reality. + + No nudge-counting, no tool-call inspection, no auto-completion + of todos. The model is the source of truth for plan state; the + middleware just prevents premature exit. + """ + global _plan_middleware_singleton # noqa: PLW0603 + if _plan_middleware_singleton is not None: + return _plan_middleware_singleton + + try: + from langchain.agents.middleware import AgentMiddleware # type: ignore[import-not-found] + from langchain.agents.middleware.types import hook_config # type: ignore[import-not-found] + from langchain_core.messages import HumanMessage # type: ignore[import-not-found] + except ImportError: + logger.debug( + "langchain agents middleware not importable; " + "skipping PlanContinuationMiddleware install", + exc_info=True, + ) + return None + + class PlanContinuationMiddleware(AgentMiddleware): + """Re-inject the model with the next pending plan step on exit.""" + + @hook_config(can_jump_to=["model"]) + def after_model( + self, + state: dict[str, Any], + runtime: Any, + ) -> dict[str, Any] | None: + next_step = _next_pending_plan_step(state) + if next_step is None: + return None + nudge = ( + f"The plan still shows {next_step!r} as not completed. " + "Either call its tool now (if the work hasn't happened) " + "or call ``write_todos`` to mark it completed (if it has)." + ) + return { + "jump_to": "model", + "messages": [HumanMessage(content=nudge)], + } + + _plan_middleware_singleton = PlanContinuationMiddleware() + return _plan_middleware_singleton + + +_inline_tool_call_middleware_singleton: Any = None + + +def _flatten_message_content(content: Any) -> str | None: + """Coalesce an AIMessage's ``content`` to a string (or ``None`` if unsupported).""" + if isinstance(content, str): + return content + if isinstance(content, list): + return "".join( + _coerce_text(p.get("text") or p.get("content")) if isinstance(p, dict) else str(p) + for p in content + ) + return None + + +def _scrub_text(text: str) -> tuple[str, list[dict[str, Any]]]: + """Strip leaked tool-call markup from text; return ``(cleaned, parsed_calls)``.""" + if "functions." in text: + return _parse_inline_tool_calls(text) + if "<|" in text and "|>" in text: + return _strip_special_tokens(text), [] + return text, [] + + +def _rewrite_inline_tool_call_message(msg: Any) -> Any: + """Convert leaked ``functions.X{...}`` markup in a message into structured tool_calls. + + Duck-types ``AIMessage`` so this is safe to call when LangChain + isn't installed. Returns the input unchanged if it isn't an + ``AIMessage`` or if the content is structurally unrecognised. + """ + if msg.__class__.__name__ != "AIMessage": + return msg + text = _flatten_message_content(getattr(msg, "content", None)) + if text is None: + return msg + cleaned, parsed_calls = _scrub_text(text) + if cleaned == text and not parsed_calls: + return msg + # APPEND parsed inline calls to existing structured calls — a + # single response can mix both formats; short-circuiting on a + # non-empty existing list would silently drop the inline ones. + existing_calls = list(getattr(msg, "tool_calls", None) or []) + return msg.__class__( + content=cleaned, + tool_calls=existing_calls + parsed_calls, + id=getattr(msg, "id", None), + response_metadata=getattr(msg, "response_metadata", {}) or {}, + additional_kwargs=getattr(msg, "additional_kwargs", {}) or {}, + ) + + +def _rewrite_response_messages(response: Any) -> Any: + """Apply ``_rewrite_inline_tool_call_message`` to every result message in a response.""" + result = getattr(response, "result", None) + if isinstance(result, list): + response.result = [_rewrite_inline_tool_call_message(m) for m in result] + return response + + +def _build_inline_tool_call_middleware() -> Any: + """Return an ``InlineToolCallMiddleware`` instance (or ``None``). + + Some chat-model integrations don't parse the model's text-stream + tool-call format into structured ``tool_calls``. Concretely: + ``langchain-nvidia-ai-endpoints`` driving ``qwen3-coder`` returns + ``AIMessage`` objects whose ``content`` carries + ``functions.:{}`` markup but whose ``tool_calls`` + list is empty. LangGraph's react agent routes on ``tool_calls`` — + if it's empty the agent ends, the tools never fire, and the user + sees the markup spliced into the assistant message. + + The wrapped model call passes every returned message through + ``_rewrite_inline_tool_call_message``: inline markup gets parsed + and APPENDED to whatever structured ``tool_calls`` already exist + (a single response can mix both formats), and ``<|...|>`` + chat-template special tokens get scrubbed. + + Cached as a singleton because the class is stateless. + """ + global _inline_tool_call_middleware_singleton # noqa: PLW0603 + if _inline_tool_call_middleware_singleton is not None: + return _inline_tool_call_middleware_singleton + + try: + from langchain.agents.middleware import AgentMiddleware # type: ignore[import-not-found] + except ImportError: + logger.debug( + "langchain agents middleware not importable; skipping InlineToolCallMiddleware install", + exc_info=True, + ) + return None + + class InlineToolCallMiddleware(AgentMiddleware): + """Convert leaked ``functions.X:N{...}`` markup into structured tool_calls.""" + + def wrap_model_call(self, request: Any, handler: Any) -> Any: + return _rewrite_response_messages(handler(request)) + + async def awrap_model_call(self, request: Any, handler: Any) -> Any: + return _rewrite_response_messages(await handler(request)) + + _inline_tool_call_middleware_singleton = InlineToolCallMiddleware() + return _inline_tool_call_middleware_singleton + + +def _coerce_todo_list(value: Any) -> list[dict[str, Any]] | None: + """Return ``value`` as a list of todo-dicts, or ``None`` if it isn't.""" + if isinstance(value, list): + filtered = [t for t in value if isinstance(t, dict)] + return filtered or None + return None + + +def _extract_todos_from_tool_output(output: Any) -> list[dict[str, Any]] | None: + """Pull the todo list out of ``write_todos``'s tool output. + + Deep Agents implements ``write_todos`` as a LangGraph ``Command`` + that updates the graph state with ``update={"todos": [...], ...}``. + The streamed ``on_tool_end`` event surfaces this Command object + directly (not a JSON blob). Older LangChain versions / custom tool + wrappers sometimes yield a plain list or a JSON-encoded string of + the same shape. Handle all three. + """ + import json as _json + + # ``Command(update={...})`` — pull ``update.todos`` + update = getattr(output, "update", None) + if isinstance(update, dict): + todos = _coerce_todo_list(update.get("todos")) + if todos is not None: + return todos + + # ``{"update": {"todos": [...]}}`` or ``{"todos": [...]}`` + if isinstance(output, dict): + nested = output.get("update") + if isinstance(nested, dict): + todos = _coerce_todo_list(nested.get("todos")) + if todos is not None: + return todos + return _coerce_todo_list(output.get("todos")) + + # Plain list of todo dicts + if isinstance(output, list): + return _coerce_todo_list(output) + + # JSON-encoded string — recurse once on the decoded value + if isinstance(output, str): + try: + decoded = _json.loads(output) + except (ValueError, TypeError): + decoded = None + return _extract_todos_from_tool_output(decoded) if decoded is not None else None + + return None + + class DeepagentProvider(ChatProvider): """Provider wrapping a LangChain Deep Agents ``CompiledGraph``. @@ -123,9 +783,40 @@ class DeepagentProvider(ChatProvider): model : str Model identifier in ``provider:model`` format. tools : list[callable] or None - Custom tool functions. + Local LangChain-compatible tool callables. Merged with any + MCP-served tools before the agent is built. + mcp_servers : dict[str, dict] or None + MCP servers the agent should connect to, in the + ``langchain_mcp_adapters.client.MultiServerMCPClient`` config + format — one entry per server, keyed by a short name. Example:: + + { + "pywry": { + "transport": "streamable_http", + "url": "http://127.0.0.1:8765/mcp", + }, + "fs": { + "transport": "stdio", + "command": "uvx", + "args": ["mcp-server-filesystem", "/tmp"], + }, + } + + On first agent build the provider connects to every server and + converts the exposed MCP tools into LangChain tools, merging + them with ``tools`` before calling ``create_deep_agent``. + Requires the ``pywry[deepagent]`` extra (which pulls in + ``langchain-mcp-adapters``). system_prompt : str - System instructions for the agent. + System instructions for the agent. By default this is *appended* + to ``PYWRY_SYSTEM_PROMPT`` (the general-purpose guidance about + the PyWry chat environment). Pass ``replace_system_prompt=True`` + to fully override instead — useful when the caller's agent has + a narrow tool surface and needs tighter output constraints than + the general prompt allows. + replace_system_prompt : bool + If ``True``, ``system_prompt`` replaces ``PYWRY_SYSTEM_PROMPT`` + entirely instead of being appended. Defaults to ``False``. checkpointer : Any or None LangGraph checkpointer for session persistence. If ``None`` and ``auto_checkpointer=True``, one is created based on @@ -145,15 +836,28 @@ class DeepagentProvider(ChatProvider): subagents : list[dict] or None Subagent configurations. skills : list[str] or None - Skill file paths. + File paths to Deep Agents skill markdown files that the agent + can reference on demand. PyWry ships seventeen of these under + ``pywry.mcp.skills`` (``tvchart``, ``chat_agent``, ``events``, + ``component_reference``, ``authentication``, etc.) — build the + list with ``pathlib.Path(pywry.mcp.skills.__file__).parent / + "" / "SKILL.md"``. Forwarded verbatim to + ``create_deep_agent(skills=...)``. middleware : list or None Deep Agents middleware callables. auto_checkpointer : bool - Auto-select checkpointer based on PyWry state backend. + Auto-select checkpointer based on PyWry state backend. Runs on + first ``_build_agent()`` so callers that bypass the async + ``initialize()`` still get conversation-history persistence. auto_store : bool Auto-create an ``InMemoryStore`` if no ``store`` is provided. The store enables cross-thread memory persistence within the process lifetime. + recursion_limit : int + LangGraph recursion limit per prompt turn. Every tool call + costs 2-3 graph steps, so the default (``50``) leaves headroom + for multi-tool turns without hiding pathological loops. + LangGraph's own default is ``25``. """ def __init__( @@ -162,7 +866,9 @@ def __init__( *, model: str = "anthropic:claude-sonnet-4-6", tools: list[Any] | None = None, + mcp_servers: dict[str, dict[str, Any]] | None = None, system_prompt: str = "", + replace_system_prompt: bool = False, checkpointer: Any = None, store: Any = None, memory: list[str] | None = None, @@ -173,12 +879,24 @@ def __init__( middleware: list[Any] | None = None, auto_checkpointer: bool = True, auto_store: bool = True, + recursion_limit: int = 50, **kwargs: Any, ) -> None: self._agent = agent self._model = model self._tools = tools or [] + # Map of server_name -> connection config in the format + # ``langchain_mcp_adapters.client.MultiServerMCPClient`` accepts. + # Example:: + # + # {"pywry": {"transport": "streamable_http", + # "url": "http://127.0.0.1:8765/mcp"}} + # {"fs": {"transport": "stdio", "command": "uvx", + # "args": ["mcp-server-filesystem", "/tmp"]}} + self._mcp_servers = mcp_servers or {} + self._mcp_tools: list[Any] = [] self._system_prompt = system_prompt + self._replace_system_prompt = replace_system_prompt self._checkpointer = checkpointer self._store = store self._memory = memory @@ -189,6 +907,7 @@ def __init__( self._middleware = middleware self._auto_checkpointer = auto_checkpointer self._auto_store = auto_store + self._recursion_limit = recursion_limit self._kwargs = kwargs self._sessions: dict[str, str] = {} @@ -263,36 +982,134 @@ def _create_store(self) -> Any: logger.debug("langgraph not installed, skipping memory store") return None - def _build_agent(self) -> Any: - from deepagents import create_deep_agent # type: ignore[import-not-found] + def _load_mcp_tools(self) -> list[Any]: + """Connect to configured MCP servers and load their tools. - combined_prompt = PYWRY_SYSTEM_PROMPT - if self._system_prompt: - combined_prompt = combined_prompt + "\n\n" + self._system_prompt + Uses ``langchain_mcp_adapters.client.MultiServerMCPClient`` to + connect to every server in ``self._mcp_servers`` and convert the + exposed MCP tools into LangChain tools. Returns an empty list + when no servers are configured or the bridge package is missing. + """ + if not self._mcp_servers: + return [] + try: + from langchain_mcp_adapters.client import ( # type: ignore[import-not-found] + MultiServerMCPClient, + ) + except ImportError: + logger.warning( + "mcp_servers configured but langchain-mcp-adapters is not " + "installed; install with `pip install langchain-mcp-adapters` " + "or `pip install pywry[deepagent]`", + ) + return [] + + try: + import asyncio as _asyncio + import warnings as _warnings + + client = MultiServerMCPClient(self._mcp_servers) + + def _get_tools() -> list[Any]: + # langchain-mcp-adapters <= 0.2.2 imports the deprecated + # ``mcp.client.streamable_http.streamablehttp_client``. + # The rename is upstream-only; filter the noise until + # the adapter package catches up. + with _warnings.catch_warnings(): + _warnings.filterwarnings( + "ignore", + message="Use `streamable_http_client` instead.", + category=DeprecationWarning, + ) + return _asyncio.run(client.get_tools()) - kwargs: dict[str, Any] = { - "model": self._model, - "system_prompt": combined_prompt, + try: + _asyncio.get_running_loop() + except RuntimeError: + # No running loop — safe to run directly on this thread. + tools = _get_tools() + else: + # A loop is already running (we're inside an async + # context). Run the coroutine on a dedicated thread so + # we don't collide with the active loop. + import concurrent.futures + + with concurrent.futures.ThreadPoolExecutor(max_workers=1) as pool: + tools = pool.submit(_get_tools).result() + return list(tools or []) + except Exception: + logger.exception("Failed to load tools from configured MCP servers") + return [] + + def _build_agent_kwargs(self, merged_tools: list[Any], system_prompt: str) -> dict[str, Any]: + """Assemble the kwargs dict for ``create_deep_agent`` from provider state.""" + # Two framework-level middlewares with non-overlapping + # responsibilities: + # + # * ``InlineToolCallMiddleware`` — protocol adapter. Rewrites + # inline ``functions.:{...}`` tool-call markup + # into structured ``tool_calls`` so LangGraph routes to the + # tool node. Runs FIRST so the next middleware sees the + # rewritten message. + # * ``PlanContinuationMiddleware`` — re-injects the next + # unfinished plan step when the model exits with no tool + # calls but pending todos remain. Pure read of + # ``state.todos``; no bookkeeping, no auto-completion. + inline_middleware = _build_inline_tool_call_middleware() + plan_middleware = _build_plan_continuation_middleware() + user_middleware = list(self._middleware or []) + middleware: list[Any] = [] + if inline_middleware is not None: + middleware.append(inline_middleware) + if plan_middleware is not None: + middleware.append(plan_middleware) + middleware.extend(user_middleware) + + kwargs: dict[str, Any] = {"model": self._model, "system_prompt": system_prompt} + optional: dict[str, Any] = { + "tools": merged_tools or None, + "checkpointer": self._checkpointer, + "interrupt_on": self._interrupt_on, + "backend": self._backend, + "subagents": self._subagents, + "skills": self._skills, + "middleware": middleware or None, + "store": self._store, + "memory": self._memory, } - if self._tools: - kwargs["tools"] = self._tools - if self._checkpointer: - kwargs["checkpointer"] = self._checkpointer - if self._interrupt_on: - kwargs["interrupt_on"] = self._interrupt_on - if self._backend: - kwargs["backend"] = self._backend - if self._subagents: - kwargs["subagents"] = self._subagents - if self._skills: - kwargs["skills"] = self._skills - if self._middleware: - kwargs["middleware"] = self._middleware - if self._store: - kwargs["store"] = self._store - if self._memory: - kwargs["memory"] = self._memory + kwargs.update({key: value for key, value in optional.items() if value}) kwargs.update(self._kwargs) + return kwargs + + def _build_agent(self) -> Any: + from deepagents import create_deep_agent # type: ignore[import-not-found] + + # Auto-create the checkpointer here too so callers that bypass + # initialize() (e.g. building the agent eagerly before show()) still + # get conversation-history persistence across turns within a thread. + if self._checkpointer is None and self._auto_checkpointer: + self._checkpointer = self._create_checkpointer() + if self._store is None and self._auto_store: + self._store = self._create_store() + + # Connect to MCP servers and load their tools (cached per build). + if not self._mcp_tools and self._mcp_servers: + self._mcp_tools = self._load_mcp_tools() + merged_tools = list(self._tools) + list(self._mcp_tools) + + # ``replace_system_prompt=True`` fully overrides PYWRY_SYSTEM_PROMPT + # — callers that want strict brevity (agents whose entire surface + # is a handful of narrowly-defined tools and terse replies) can + # turn off the general-purpose guidance that otherwise fights + # their hard constraints. + if self._replace_system_prompt and self._system_prompt: + combined_prompt = self._system_prompt + elif self._system_prompt: + combined_prompt = PYWRY_SYSTEM_PROMPT + "\n\n" + self._system_prompt + else: + combined_prompt = PYWRY_SYSTEM_PROMPT + + kwargs = self._build_agent_kwargs(merged_tools, combined_prompt) return create_deep_agent(**kwargs) async def new_session( @@ -307,13 +1124,38 @@ async def new_session( cwd : str Working directory context. mcp_servers : list[dict] or None - MCP server configs (unused). + ACP-style MCP server descriptors. Each entry is converted to + the ``MultiServerMCPClient`` config format and merged into + the provider's existing ``mcp_servers`` map; the next agent + build picks them up. Returns ------- str Session identifier. """ + if mcp_servers: + for entry in mcp_servers: + if not isinstance(entry, dict): + continue + name = entry.get("name") or f"acp_{uuid.uuid4().hex[:6]}" + if "command" in entry or "args" in entry: + self._mcp_servers[name] = { + "transport": "stdio", + "command": entry.get("command", ""), + "args": entry.get("args", []), + "env": entry.get("env"), + } + elif "url" in entry: + self._mcp_servers[name] = { + "transport": entry.get("transport", "streamable_http"), + "url": entry["url"], + "headers": entry.get("headers"), + } + # Force a rebuild so the next prompt sees the new tools. + self._mcp_tools = [] + self._agent = None + session_id = f"da_{uuid.uuid4().hex[:8]}" thread_id = uuid.uuid4().hex self._sessions[session_id] = thread_id @@ -362,57 +1204,138 @@ async def prompt( Typed update notifications. """ from ..models import TextPart - from ..updates import AgentMessageUpdate, StatusUpdate, ToolCallUpdate thread_id = self._sessions.get(session_id, session_id) user_text = "".join(p.text for p in content if isinstance(p, TextPart)) + config = { + "configurable": {"thread_id": thread_id}, + "recursion_limit": self._recursion_limit, + } - config = {"configurable": {"thread_id": thread_id}} - - async for event in self._agent.astream_events( + # Hold a reference to the inner async iterator so we can close + # it explicitly when this generator exits — otherwise breaking + # out of the loop (cancel, on_chain_end, caller-side ``break``) + # leaves a pending ``aclose()`` task and Python emits + # ``RuntimeWarning: coroutine method 'aclose' ... was never + # awaited``. + # Per-prompt filter that strips ``functions.:N{...}`` + # tool-call markup leaking into the model's text stream. The + # markup splits across chunk boundaries so this MUST be + # stateful across the whole stream. + text_filter = _ToolCallTextFilter() + + event_iter = self._agent.astream_events( {"messages": [{"role": "user", "content": user_text}]}, config=config, version="v2", - ): - if cancel_event and cancel_event.is_set(): - return - - kind = event.get("event", "") - - if kind == "on_chat_model_stream": - chunk = event.get("data", {}).get("chunk") - if chunk and hasattr(chunk, "content") and chunk.content: - yield AgentMessageUpdate(text=chunk.content) - - elif kind == "on_tool_start": - tool_name = event.get("name", "") - yield ToolCallUpdate( - toolCallId=event.get("run_id", f"call_{uuid.uuid4().hex[:8]}"), - name=tool_name, - kind=_map_tool_kind(tool_name), - status="in_progress", - ) - - elif kind == "on_tool_end": - async for update in self._handle_tool_end(event): + ) + try: + async for event in event_iter: + if cancel_event and cancel_event.is_set(): + return + if _is_root_chain_end(event): + # Flush any pending buffer one last time so a + # legitimate trailing sentence isn't truncated by + # the filter's lookahead window. + tail = text_filter.flush() + if tail: + from ..updates import AgentMessageUpdate + + yield AgentMessageUpdate(text=tail) + return + async for update in self._dispatch_stream_event(event, text_filter): yield update + finally: + aclose = getattr(event_iter, "aclose", None) + if callable(aclose): + try: + await aclose() + except Exception: + logger.debug("astream_events.aclose() raised", exc_info=True) - elif kind == "on_tool_error": - tool_name = event.get("name", "") - yield ToolCallUpdate( - toolCallId=event.get("run_id", f"call_{uuid.uuid4().hex[:8]}"), - name=tool_name, - kind=_map_tool_kind(tool_name), - status="failed", - ) + async def _stream_chat_model( + self, + event: dict[str, Any], + text_filter: _ToolCallTextFilter | None, + ) -> AsyncIterator[SessionUpdate]: + """Yield ThinkingUpdate / AgentMessageUpdate for ``on_chat_model_stream``.""" + from ..updates import AgentMessageUpdate, ThinkingUpdate + + chunk = event.get("data", {}).get("chunk") + thinking_text, answer_text = _extract_stream_text(chunk) + if thinking_text: + yield ThinkingUpdate(text=thinking_text) + if not answer_text: + return + if text_filter is not None: + answer_text = text_filter.feed(answer_text) + if answer_text: + yield AgentMessageUpdate(text=answer_text) + + async def _stream_tool_start(self, event: dict[str, Any]) -> AsyncIterator[SessionUpdate]: + """Yield StatusUpdate (write_todos) or ToolCallUpdate for ``on_tool_start``.""" + from ..updates import StatusUpdate, ToolCallUpdate - elif kind == "on_chat_model_start": - model_name = event.get("name", "") - if model_name: - yield StatusUpdate(text=f"Thinking ({model_name})...") + tool_name = event.get("name", "") + # ``write_todos`` renders as the plan card above the input, + # not as a tool-call card. Surface a terse status instead. + if tool_name == "write_todos": + yield StatusUpdate(text="Planning...") + return + yield ToolCallUpdate( + toolCallId=event.get("run_id", f"call_{uuid.uuid4().hex[:8]}"), + name=tool_name, + kind=_map_tool_kind(tool_name), + status="in_progress", + ) + + async def _stream_misc_event( + self, event: dict[str, Any], kind: str + ) -> AsyncIterator[SessionUpdate]: + """Yield updates for the smaller event kinds (errors, status, subagent).""" + from ..updates import StatusUpdate, ToolCallUpdate + + if kind == "on_tool_error": + tool_name = event.get("name", "") + yield ToolCallUpdate( + toolCallId=event.get("run_id", f"call_{uuid.uuid4().hex[:8]}"), + name=tool_name, + kind=_map_tool_kind(tool_name), + status="failed", + ) + return + if kind == "on_chat_model_start": + model_name = event.get("name", "") + yield StatusUpdate(text=f"Thinking ({model_name})..." if model_name else "Thinking...") + return + if kind == "on_chain_start" and event.get("name") == "task": + yield StatusUpdate(text="Delegating to subagent...") + + async def _dispatch_stream_event( + self, + event: dict[str, Any], + text_filter: _ToolCallTextFilter | None = None, + ) -> AsyncIterator[SessionUpdate]: + """Route a single LangGraph streaming event to the matching update. - elif kind == "on_chain_start" and event.get("name") == "task": - yield StatusUpdate(text="Delegating to subagent...") + ``text_filter`` is the per-prompt stateful stripper that removes + leaked ``functions.:N{...}`` tool-call markup from the + assistant text stream. Optional so tests / direct callers can + skip it; production paths in ``prompt()`` always pass one. + """ + kind = event.get("event", "") + if kind == "on_chat_model_stream": + async for update in self._stream_chat_model(event, text_filter): + yield update + elif kind == "on_tool_start": + async for update in self._stream_tool_start(event): + yield update + elif kind == "on_tool_end": + async for update in self._handle_tool_end(event): + yield update + else: + async for update in self._stream_misc_event(event, kind): + yield update async def _handle_tool_end(self, event: dict[str, Any]) -> AsyncIterator[SessionUpdate]: """Handle on_tool_end events, including write_todos → PlanUpdate.""" @@ -426,27 +1349,43 @@ async def _handle_tool_end(self, event: dict[str, Any]) -> AsyncIterator[Session output = event.get("data", {}).get("output", "") if tool_name == "write_todos": + todos = _extract_todos_from_tool_output(output) + if todos: + yield PlanUpdate( + entries=[ + PlanEntry( + content=item.get("title", item.get("content", str(item))), + priority="medium", + status=_map_todo_status(item.get("status", "pending")), + ) + for item in todos + ] + ) + # The plan card IS the visualization — don't ALSO emit a + # tool-call card whose ``result`` is the raw ``Command( + # update={'todos': ...})`` repr. That would double-render + # the same information as prose chrome. + return + + # Coerce LangChain ToolMessage / structured output to a plain string + # so the UI can render it inside the collapsible tool-call card. + result_text = "" + if hasattr(output, "content"): + result_text = str(output.content) + elif isinstance(output, (dict, list)): try: - todos = json.loads(output) if isinstance(output, str) else output - if isinstance(todos, list): - yield PlanUpdate( - entries=[ - PlanEntry( - content=item.get("title", item.get("content", str(item))), - priority="medium", - status=_map_todo_status(item.get("status", "pending")), - ) - for item in todos - ] - ) + result_text = json.dumps(output, default=str, indent=2) except Exception: - logger.debug("Could not parse write_todos output", exc_info=True) + result_text = str(output) + elif output is not None: + result_text = str(output) yield ToolCallUpdate( toolCallId=run_id or f"call_{uuid.uuid4().hex[:8]}", name=tool_name, kind=_map_tool_kind(tool_name), status="completed", + content=[{"type": "text", "text": result_text}] if result_text else None, ) async def cancel(self, session_id: str) -> None: @@ -457,3 +1396,62 @@ async def cancel(self, session_id: str) -> None: session_id : str Session to cancel. """ + + def truncate_session(self, session_id: str, kept_messages: list[Any]) -> None: + """Discard the LangGraph checkpointer state for a session. + + Called by ``ChatManager`` when the user edits or resends a message + in the middle of a thread. The next ``prompt`` call will rebuild + the agent state from the surviving messages — but LangGraph's + checkpointer keeps appending, so the cleanest fix is to forget + the prior state entirely for this thread. + + Parameters + ---------- + session_id : str + ChatManager session id (also used as the LangGraph thread_id). + kept_messages : list + Messages that survive in the UI; passed for callers that may + want to seed an alternate store. This implementation only + uses the session_id. + """ + thread_id = self._sessions.get(session_id, session_id) + checkpointer = self._checkpointer + if checkpointer is None: + return + # The langgraph BaseCheckpointSaver exposes ``delete_thread`` on + # newer releases; fall back to writing an empty state otherwise. + try: + delete_thread = getattr(checkpointer, "delete_thread", None) + if callable(delete_thread): + delete_thread(thread_id) + return + except Exception: + logger.debug("checkpointer.delete_thread failed", exc_info=True) + try: + adelete = getattr(checkpointer, "adelete_thread", None) + if callable(adelete): + import asyncio as _asyncio + + try: + _asyncio.get_running_loop() + except RuntimeError: + _asyncio.run(adelete(thread_id)) + else: + # A loop is already running — schedule the coroutine + # on a dedicated thread to avoid reentrancy. + import concurrent.futures + + with concurrent.futures.ThreadPoolExecutor(max_workers=1) as pool: + pool.submit(lambda: _asyncio.run(adelete(thread_id))).result() + return + except Exception: + logger.debug("checkpointer.adelete_thread failed", exc_info=True) + # Last-resort fallback: clear any in-memory dict the saver keeps. + for attr in ("storage", "_storage", "memory"): + store = getattr(checkpointer, attr, None) + if isinstance(store, dict): + store.pop(thread_id, None) + # Force a fresh thread by remapping the session to a new id so + # subsequent prompts run against an empty graph state. + self._sessions[session_id] = f"{thread_id}:{uuid.uuid4().hex[:8]}" diff --git a/pywry/pywry/chat/providers/stdio.py b/pywry/pywry/chat/providers/stdio.py index 63a6528..e80ef3a 100644 --- a/pywry/pywry/chat/providers/stdio.py +++ b/pywry/pywry/chat/providers/stdio.py @@ -15,6 +15,7 @@ from . import ChatProvider + if TYPE_CHECKING: from collections.abc import Mapping diff --git a/pywry/pywry/frontend/src/chat-handlers.js b/pywry/pywry/frontend/src/chat-handlers.js index 7f9d711..ebce66a 100644 --- a/pywry/pywry/frontend/src/chat-handlers.js +++ b/pywry/pywry/frontend/src/chat-handlers.js @@ -560,7 +560,31 @@ function initChatHandlers(container, pywry) { attachBadges += ''; } - el.innerHTML = roleLabel + attachBadges + '
' + content + '
'; + // Action toolbar — edit/resend on user messages, resend on assistant + var actions = ''; + // Edit / Resend on user messages only — the user rerun flow is + // "edit or resend YOUR prompt"; assistant bubbles (including the + // welcome message) carry no retry action because there is no + // prior user turn to rerun from. + if (msg.role === 'user') { + actions = + '
' + + '' + + '' + + '
'; + } + + el.innerHTML = roleLabel + attachBadges + + '
' + content + '
' + actions; return el; } @@ -766,6 +790,7 @@ function initChatHandlers(container, pywry) { // Emit to backend (include attachments if any) var payload = { + messageId: msgId, text: text, threadId: state.activeThreadId, timestamp: Date.now() @@ -1142,6 +1167,49 @@ function initChatHandlers(container, pywry) { // Event Listeners — incoming from Python via pywry.on() // ========================================================================= + // Edit / resend bookkeeping — drop messages the backend has discarded. + pywry.on('chat:messages-deleted', function (data) { + if (!chatArea) return; + var ids = (data && data.messageIds) || []; + if (!ids.length) return; + var idSet = {}; + for (var i = 0; i < ids.length; i++) idSet[ids[i]] = true; + // Drop from frontend state + state.messages = state.messages.filter(function (m) { return !idSet[m.id]; }); + // Drop from DOM + for (var j = 0; j < ids.length; j++) { + var node = chatArea.querySelector('[data-msg-id="' + ids[j] + '"]'); + if (node && node.parentNode) node.parentNode.removeChild(node); + } + // Drop tool-call / thinking / artifact blocks tied to the deleted messages + var related = chatArea.querySelectorAll( + '.pywry-chat-tool-call, .pywry-chat-thinking, [data-thinking-id], [data-tool-id]', + ); + related.forEach(function (n) { + var tid = n.getAttribute('data-thinking-id') || n.getAttribute('data-tool-id') || ''; + // tool-id format is the run_id (no msg correlation), so skip; + // thinking-id is "thinking-" + if (tid.indexOf('thinking-') === 0) { + var msgIdPart = tid.substring(9); + if (idSet[msgIdPart] && n.parentNode) n.parentNode.removeChild(n); + } + }); + // If the edited user message text changed, refresh its rendered content + if (data.editedMessageId && data.editedText !== undefined) { + var editedEl = chatArea.querySelector('[data-msg-id="' + data.editedMessageId + '"]'); + if (editedEl) { + var contentEl = editedEl.querySelector('.pywry-chat-msg-content'); + if (contentEl) contentEl.innerHTML = renderMarkdown(data.editedText); + } + for (var k = 0; k < state.messages.length; k++) { + if (state.messages[k].id === data.editedMessageId) { + state.messages[k].text = data.editedText; + break; + } + } + } + }); + // Complete assistant message pywry.on('chat:assistant-message', function (data) { if (state.isStreaming) { @@ -2276,6 +2344,103 @@ function initChatHandlers(container, pywry) { }); } + // Edit / resend / retry buttons on message bubbles (delegated) + if (chatArea) { + chatArea.addEventListener('click', function (e) { + var btn = e.target && e.target.closest && e.target.closest('.pywry-chat-msg-action'); + if (!btn) return; + var msgEl = btn.closest('.pywry-chat-msg'); + if (!msgEl) return; + var msgId = msgEl.getAttribute('data-msg-id') || ''; + if (!msgId) return; + var action = btn.getAttribute('data-action'); + + if (action === 'edit') { + startEditingMessage(msgEl, msgId); + } else if (action === 'resend') { + emitResend(msgId); + } + }); + } + + function emitResend(messageId) { + if (!pywry || !pywry.emit) return; + pywry.emit('chat:resend-from', { + messageId: messageId, + threadId: state.activeThreadId, + }); + } + + function startEditingMessage(msgEl, msgId) { + if (msgEl.classList.contains('pywry-chat-msg-editing')) return; + var contentEl = msgEl.querySelector('.pywry-chat-msg-content'); + if (!contentEl) return; + // Find the underlying text from state.messages — content has been markdown-rendered + var msgObj = null; + for (var i = 0; i < state.messages.length; i++) { + if (state.messages[i].id === msgId) { msgObj = state.messages[i]; break; } + } + var originalText = msgObj ? (msgObj.text || '') : (contentEl.textContent || ''); + msgEl.classList.add('pywry-chat-msg-editing'); + + var ta = document.createElement('textarea'); + ta.className = 'pywry-chat-msg-edit-textarea'; + ta.value = originalText; + ta.rows = Math.max(2, Math.min(10, originalText.split('\n').length + 1)); + + var actionsEl = msgEl.querySelector('.pywry-chat-msg-actions'); + var savedActionsHtml = actionsEl ? actionsEl.innerHTML : ''; + var savedContentHtml = contentEl.innerHTML; + contentEl.innerHTML = ''; + contentEl.appendChild(ta); + ta.focus(); + ta.setSelectionRange(ta.value.length, ta.value.length); + + if (actionsEl) { + actionsEl.innerHTML = + '' + + ''; + } + + function cancel() { + contentEl.innerHTML = savedContentHtml; + if (actionsEl) actionsEl.innerHTML = savedActionsHtml; + msgEl.classList.remove('pywry-chat-msg-editing'); + } + + function save() { + var newText = ta.value.trim(); + if (!newText) { cancel(); return; } + msgEl.classList.remove('pywry-chat-msg-editing'); + // Restore the original markdown render of the new text immediately + contentEl.innerHTML = renderMarkdown(newText); + if (actionsEl) actionsEl.innerHTML = savedActionsHtml; + // Update state.messages too + if (msgObj) msgObj.text = newText; + if (pywry && pywry.emit) { + pywry.emit('chat:edit-message', { + messageId: msgId, + threadId: state.activeThreadId, + text: newText, + }); + } + } + + if (actionsEl) { + actionsEl.addEventListener('click', function (ev) { + var btn = ev.target && ev.target.closest && ev.target.closest('[data-edit-action]'); + if (!btn) return; + ev.stopPropagation(); + if (btn.getAttribute('data-edit-action') === 'save') save(); + else cancel(); + }); + } + ta.addEventListener('keydown', function (ev) { + if (ev.key === 'Escape') { ev.preventDefault(); cancel(); } + else if (ev.key === 'Enter' && (ev.metaKey || ev.ctrlKey)) { ev.preventDefault(); save(); } + }); + } + // Scroll badge if (chatArea) { var __scrollTimer = null; @@ -2648,6 +2813,12 @@ function initChatHandlers(container, pywry) { }); // --- ACP: Plan update --- + // Reuses the styled ``pywry-chat-todo-*`` classes so the plan card + // gets the same collapsible details/summary + progress bar look as + // the agent-driven todo list. (The plan and todo renderers share + // one container — ``#pywry-chat-todo`` — and one stylesheet; using + // separate ``pywry-chat-plan-*`` classes here would produce + // unstyled markup and the card would appear to never render.) pywry.on('chat:plan-update', function (data) { if (!todoEl) return; var entries = data.entries || []; @@ -2656,18 +2827,47 @@ function initChatHandlers(container, pywry) { todoEl.style.display = 'none'; return; } - todoEl.style.display = 'block'; - var html = '
Plan
    '; + + var total = entries.length; + var completed = 0; + var inProgress = 0; + for (var ci = 0; ci < entries.length; ci++) { + var st = entries[ci].status; + if (st === 'completed') completed += 1; + else if (st === 'in_progress') inProgress += 1; + } + var allDone = completed === total && total > 0; + var pct = total > 0 ? Math.round((completed / total) * 100) : 0; + var summaryLabel = allDone + ? 'All tasks completed (' + total + '/' + total + ')' + : (inProgress > 0 + ? 'Working... (' + completed + '/' + total + ' done)' + : 'Plan (' + completed + '/' + total + ' done)'); + + var html = '
    ' + + '' + + '' + escapeHtml(summaryLabel) + '' + + '
    ' + + '
    ' + + '
    ' + + '    ' + + '
      '; entries.forEach(function (e) { - var icon = e.status === 'completed' ? '✓' : e.status === 'in_progress' ? '▶' : '○'; - var priorityClass = 'pywry-chat-plan-priority-' + (e.priority || 'medium'); - html += '
    • ' + - '' + icon + '' + - '' + escapeHtml(e.content) + '' + - '
      • '; + var status = e.status || 'pending'; + var icon = status === 'completed' + ? '✓' + : status === 'in_progress' + ? '▶' + : '●'; + var cls = 'pywry-chat-todo-item' + + (status === 'completed' ? ' pywry-chat-todo-item-done' : '') + + (status === 'in_progress' ? ' pywry-chat-todo-item-active' : ''); + html += '
    • ' + icon + + '' + escapeHtml(e.content || '') + '
      • '; }); - html += '
    '; + html += '
'; todoEl.innerHTML = html; + todoEl.style.display = 'block'; }); // --- ACP: Mode update --- diff --git a/pywry/pywry/frontend/src/toolbar-bridge.js b/pywry/pywry/frontend/src/toolbar-bridge.js index ed06a68..7965e36 100644 --- a/pywry/pywry/frontend/src/toolbar-bridge.js +++ b/pywry/pywry/frontend/src/toolbar-bridge.js @@ -59,6 +59,16 @@ type = 'select'; var selectedOpt = el.querySelector('.pywry-dropdown-option.pywry-selected'); value = selectedOpt ? selectedOpt.getAttribute('data-value') : null; + } else if (el.classList.contains('pywry-marquee')) { + type = 'marquee'; + var items = {}; + el.querySelectorAll('[data-ticker]').forEach(function(item) { + var ticker = item.getAttribute('data-ticker'); + if (ticker && !(ticker in items)) { + items[ticker] = (item.textContent || '').trim(); + } + }); + value = { text: el.getAttribute('data-text') || '', items: items }; } if (type) { @@ -93,6 +103,15 @@ } else if (el.classList.contains('pywry-dropdown')) { var selectedOpt = el.querySelector('.pywry-dropdown-option.pywry-selected'); return selectedOpt ? selectedOpt.getAttribute('data-value') : null; + } else if (el.classList.contains('pywry-marquee')) { + var marqueeItems = {}; + el.querySelectorAll('[data-ticker]').forEach(function(item) { + var t = item.getAttribute('data-ticker'); + if (t && !(t in marqueeItems)) { + marqueeItems[t] = (item.textContent || '').trim(); + } + }); + return { text: el.getAttribute('data-text') || '', items: marqueeItems }; } return null; } diff --git a/pywry/pywry/frontend/src/tvchart/02-datafeed.js b/pywry/pywry/frontend/src/tvchart/02-datafeed.js index c5404cc..6c61155 100644 --- a/pywry/pywry/frontend/src/tvchart/02-datafeed.js +++ b/pywry/pywry/frontend/src/tvchart/02-datafeed.js @@ -712,6 +712,9 @@ function _tvInitDatafeedMode(entry, seriesList, theme) { sOptions.color || sOptions.lineColor || sOptions.upColor || sOptions.borderUpColor || '#4c87ff' ); + if (_tvIsMainSeriesId(sid) || sid === 'series-0') { + _tvFireMainSeriesReady(entry); + } // Request initial historical bars var periodParams = { diff --git a/pywry/pywry/frontend/src/tvchart/04-series.js b/pywry/pywry/frontend/src/tvchart/04-series.js index 84cb754..c75a489 100644 --- a/pywry/pywry/frontend/src/tvchart/04-series.js +++ b/pywry/pywry/frontend/src/tvchart/04-series.js @@ -378,6 +378,7 @@ function _tvResolveRangeSpanDays(rangeValue) { var spans = { '1d': 1, '5d': 5, + '1w': 7, '1m': 30, '3m': 91, '6m': 182, @@ -387,7 +388,11 @@ function _tvResolveRangeSpanDays(rangeValue) { '10y': 365 * 10, '20y': 365 * 20, }; - return spans[rangeValue] || spans['1y']; + // Callers mix cases: the UI tabs use lowercase ("1d", "1y"), but the + // MCP tool doc and public API use uppercase ("1D", "1Y"). Normalise + // to lowercase so either works without a hidden fallback to "1y". + var key = String(rangeValue || '').toLowerCase(); + return spans[key] || spans['1y']; } /** @@ -494,6 +499,18 @@ function _tvApplyTimeRangeSelection(entry, range) { var totalBars = bars.length; if (!totalBars) return false; + // Any preserved range from a prior destroy-recreate becomes stale the + // moment the caller picks a new range — clear it so the applyDefault + // setTimeout scheduled in lifecycle.js can't later overwrite our + // freshly-applied zoom with the pre-destroy view. + if (entry._preservedVisibleTimeRange) { + delete entry._preservedVisibleTimeRange; + } + + // Normalise case — "1D" from the MCP tool and "1d" from the UI tab + // both need to resolve to the same range config. + range = String(range || '').toLowerCase(); + if (range === 'all') { entry.chart.timeScale().fitContent(); return true; @@ -1610,6 +1627,21 @@ function _tvIsMainSeriesId(seriesId) { return String(seriesId || 'main') === 'main'; } +/** + * Fire any one-shot ``whenMainSeriesReady`` callbacks registered on an + * entry. Called by both the lifecycle static-bar path and the datafeed + * path right after a main series is attached to ``entry.seriesMap``. + */ +function _tvFireMainSeriesReady(entry) { + if (!entry || !Array.isArray(entry._mainSeriesReadyCallbacks)) return; + if (!entry.seriesMap || !(entry.seriesMap.main || entry.seriesMap['series-0'])) return; + var cbs = entry._mainSeriesReadyCallbacks; + entry._mainSeriesReadyCallbacks = []; + for (var i = 0; i < cbs.length; i++) { + try { cbs[i](); } catch (e) {} + } +} + /** * Compute a baseValue price for Baseline series from the data range. * TradingView uses a percentage-based "Base level" (default 50%) which @@ -1643,9 +1675,16 @@ function _tvComputeBaselineValue(bars, pct) { */ function _tvResolveChartStyle(styleName) { var s = String(styleName || 'Line'); + // Pull the hollow-body value from the active theme's CSS variable so + // it respects light/dark/custom themes and is never hardcoded in JS. + // Fall back to fully transparent if the variable is undefined. + var hollowBody = _cssVar('--pywry-tvchart-hollow-up-body') || 'rgba(0, 0, 0, 0)'; + // Price line lives on its own CSS selector so the transparent + // hollow-body doesn't also erase the right-axis price marker. + var priceLineColor = _cssVar('--pywry-tvchart-price-line') || _cssVar('--pywry-tvchart-up') || '#26a69a'; if (s === 'Bars') return { seriesType: 'Bar', source: 'close', optionPatch: {} }; if (s === 'Candles') return { seriesType: 'Candlestick', source: 'close', optionPatch: {} }; - if (s === 'Hollow candles') return { seriesType: 'Candlestick', source: 'close', optionPatch: { upColor: 'rgba(0, 0, 0, 0)' } }; + if (s === 'Hollow candles') return { seriesType: 'Candlestick', source: 'close', optionPatch: { upColor: hollowBody, priceLineColor: priceLineColor } }; if (s === 'HLC bars') return { seriesType: 'Bar', source: 'hlc3', optionPatch: {} }; if (s === 'Line') return { seriesType: 'Line', source: 'close', optionPatch: {} }; if (s === 'Line with markers') return { seriesType: 'Line', source: 'close', optionPatch: { pointMarkersVisible: true } }; diff --git a/pywry/pywry/frontend/src/tvchart/05-lifecycle.js b/pywry/pywry/frontend/src/tvchart/05-lifecycle.js index dc5dd0a..79944f7 100644 --- a/pywry/pywry/frontend/src/tvchart/05-lifecycle.js +++ b/pywry/pywry/frontend/src/tvchart/05-lifecycle.js @@ -182,6 +182,21 @@ window.PYWRY_TVCHART_CREATE = function(chartId, container, payload) { gridVisible: true, crosshairEnabled: false, }, + // One-shot callbacks that fire once seriesMap contains a main + // series (registered via entry.whenMainSeriesReady). Needed + // because the destroy-recreate flow has to chain post-CREATE + // work (re-apply display style, etc.) but datafeed mode adds + // the series inside an async resolveSymbol callback — polling + // for seriesMap.main would be a race-condition workaround. + _mainSeriesReadyCallbacks: [], + }; + entry.whenMainSeriesReady = function(cb) { + if (typeof cb !== 'function') return; + if (entry.seriesMap && (entry.seriesMap.main || entry.seriesMap['series-0'])) { + try { cb(); } catch (e) {} + return; + } + entry._mainSeriesReadyCallbacks.push(cb); }; // Normalise: support both multi-series array and legacy flat format @@ -240,6 +255,9 @@ window.PYWRY_TVCHART_CREATE = function(chartId, container, payload) { if (_tvIsMainSeriesId(sid) && series && typeof series.moveToPane === 'function') { try { series.moveToPane(0); } catch (e) {} } + if (_tvIsMainSeriesId(sid) || sid === 'series-0') { + _tvFireMainSeriesReady(entry); + } if (_tvLooksLikeOhlcBars(sourceBars)) { entry._seriesCanonicalRawData[sid] = sourceBars; } @@ -283,6 +301,23 @@ window.PYWRY_TVCHART_CREATE = function(chartId, container, payload) { // (which resizes the chart at 0ms, double-rAF, and 120ms). (function(e, c) { function applyDefault() { + // Destroy-recreate flows (interval-change / symbol-change) + // hand us a pre-destroy zoom to restore — honour it instead + // of falling through to fitContent, which would wipe the + // user's zoom every time the data interval changes. + var preserved = e._preservedVisibleTimeRange; + if (preserved && preserved.from != null && preserved.to != null) { + try { + c.timeScale().setVisibleRange({ + from: preserved.from, + to: preserved.to, + }); + delete e._preservedVisibleTimeRange; + return; + } catch (err) { + delete e._preservedVisibleTimeRange; + } + } var sel = document.querySelector('.pywry-tab.pywry-tab-active[data-target-interval]'); if (sel) { var range = sel.getAttribute('data-value'); @@ -844,16 +879,45 @@ function _tvExportState(chartId) { }; } - var range; - try { - range = entry.chart.timeScale().getVisibleLogicalRange(); - } catch (e) { - range = null; - } + var logicalRange; + var timeRange; + try { logicalRange = entry.chart.timeScale().getVisibleLogicalRange(); } catch (e) { logicalRange = null; } + try { timeRange = entry.chart.timeScale().getVisibleRange(); } catch (e) { timeRange = null; } // Collect raw bar data if stored var rawData = entry._rawData ? entry._rawData.slice() : null; + // Main symbol and interval (from the stored payload) + var mainSymbol = ''; + if (entry.payload && entry.payload.series && entry.payload.series[0] && entry.payload.series[0].symbol) { + mainSymbol = String(entry.payload.series[0].symbol); + } else if (entry._resolvedSymbolInfo && entry._resolvedSymbolInfo.main) { + mainSymbol = String(entry._resolvedSymbolInfo.main.symbol || entry._resolvedSymbolInfo.main.ticker || ''); + } + var interval = (entry.payload && entry.payload.interval) ? String(entry.payload.interval) : ''; + var chartType = entry._chartDisplayStyle || 'Candles'; + + // Split compare-series entries into two buckets: user-facing + // compares (what the user added via the Compare dialog) vs. + // indicator-source compares (the secondary ticker that drives a + // Spread/Ratio/Sum/Product/Correlation indicator — hidden from + // the Compare panel, but still in the compare map because that's + // where the bar data lives). + var compareSymbols = {}; + var indicatorSourceSymbols = {}; + if (entry._compareSymbols) { + var csKeys = Object.keys(entry._compareSymbols); + for (var cs = 0; cs < csKeys.length; cs++) { + var sid = csKeys[cs]; + var sym = String(entry._compareSymbols[sid]); + if (entry._indicatorSourceSeries && entry._indicatorSourceSeries[sid]) { + indicatorSourceSymbols[sid] = sym; + } else { + compareSymbols[sid] = sym; + } + } + } + // Collect drawings var ds = window.__PYWRY_DRAWINGS__[chartId]; var drawings = []; @@ -863,27 +927,47 @@ function _tvExportState(chartId) { } } - // Collect active indicators for this chart + // Collect active indicators for this chart. Binary indicators + // (Spread, Ratio, Sum, Product, Correlation) carry their secondary + // series id — resolve it back to the ticker symbol so agents + // describing the chart know *what* is being spread/ratioed without + // having to cross-reference seriesId maps themselves. var indicators = []; var aiKeys = Object.keys(_activeIndicators); for (var a = 0; a < aiKeys.length; a++) { var ai = _activeIndicators[aiKeys[a]]; - if (ai.chartId === chartId) { - indicators.push({ - seriesId: aiKeys[a], - name: ai.name, - period: ai.period, - color: ai.color || null, - group: ai.group || null, - }); + if (ai.chartId !== chartId) continue; + var entryOut = { + seriesId: aiKeys[a], + name: ai.name, + type: ai.type || null, + period: ai.period, + color: ai.color || null, + group: ai.group || null, + sourceSeriesId: ai.sourceSeriesId || null, + secondarySeriesId: ai.secondarySeriesId || null, + isSubplot: !!ai.isSubplot, + primarySource: ai.primarySource || null, + secondarySource: ai.secondarySource || null, + }; + if (ai.secondarySeriesId) { + var secSym = (entry._compareSymbols && entry._compareSymbols[ai.secondarySeriesId]) || null; + entryOut.secondarySymbol = secSym ? String(secSym) : null; } + indicators.push(entryOut); } return { chartId: chartId, theme: entry.theme, + symbol: mainSymbol, + interval: interval, + chartType: chartType, + compareSymbols: compareSymbols, + indicatorSourceSymbols: indicatorSourceSymbols, series: seriesData, - visibleRange: range, + visibleRange: timeRange, + visibleLogicalRange: logicalRange, rawData: rawData, drawings: drawings, indicators: indicators, diff --git a/pywry/pywry/frontend/src/tvchart/07-drawing.js b/pywry/pywry/frontend/src/tvchart/07-drawing.js index f89ad8b..bbb66aa 100644 --- a/pywry/pywry/frontend/src/tvchart/07-drawing.js +++ b/pywry/pywry/frontend/src/tvchart/07-drawing.js @@ -1787,8 +1787,9 @@ function _tvApplySettingsToChart(chartId, entry, settings, opts) { var borderDownOpacity = _tvClamp(_tvToNumber(settings['Borders-Down Color-Opacity'], settings['Borders-Opacity']), 0, 100); var wickUpOpacity = _tvClamp(_tvToNumber(settings['Wick-Up Color-Opacity'], settings['Wick-Opacity']), 0, 100); var wickDownOpacity = _tvClamp(_tvToNumber(settings['Wick-Down Color-Opacity'], settings['Wick-Opacity']), 0, 100); - sOpts.upColor = bodyVisible ? _tvColorWithOpacity(settings['Body-Up Color'], bodyUpOpacity, _cssVar('--pywry-tvchart-up', '#26a69a')) : 'rgba(0,0,0,0)'; - sOpts.downColor = bodyVisible ? _tvColorWithOpacity(settings['Body-Down Color'], bodyDownOpacity, _cssVar('--pywry-tvchart-down', '#ef5350')) : 'rgba(0,0,0,0)'; + var bodyHidden = _cssVar('--pywry-tvchart-hidden') || 'rgba(0, 0, 0, 0)'; + sOpts.upColor = bodyVisible ? _tvColorWithOpacity(settings['Body-Up Color'], bodyUpOpacity, _cssVar('--pywry-tvchart-up', '#26a69a')) : bodyHidden; + sOpts.downColor = bodyVisible ? _tvColorWithOpacity(settings['Body-Down Color'], bodyDownOpacity, _cssVar('--pywry-tvchart-down', '#ef5350')) : bodyHidden; sOpts.borderVisible = settings['Borders'] !== false; sOpts.borderUpColor = _tvColorWithOpacity(settings['Borders-Up Color'], borderUpOpacity, _cssVar('--pywry-tvchart-border-up', '#26a69a')); sOpts.borderDownColor = _tvColorWithOpacity(settings['Borders-Down Color'], borderDownOpacity, _cssVar('--pywry-tvchart-border-down', '#ef5350')); diff --git a/pywry/pywry/frontend/src/tvchart/08-settings.js b/pywry/pywry/frontend/src/tvchart/08-settings.js index 6a92042..a9aa561 100644 --- a/pywry/pywry/frontend/src/tvchart/08-settings.js +++ b/pywry/pywry/frontend/src/tvchart/08-settings.js @@ -187,12 +187,13 @@ function _tvHideSymbolSearch() { _tvRefreshLegendVisibility(); } -function _tvShowSymbolSearchDialog(chartId) { +function _tvShowSymbolSearchDialog(chartId, options) { _tvHideSymbolSearch(); var resolved = _tvResolveChartEntry(chartId); if (!resolved || !resolved.entry) return; chartId = resolved.chartId; var entry = resolved.entry; + options = options || {}; var ds = window.__PYWRY_DRAWINGS__[chartId] || _tvEnsureDrawingLayer(chartId); if (!ds) return; @@ -582,6 +583,116 @@ function _tvShowSymbolSearchDialog(chartId) { ds.uiLayer.appendChild(overlay); searchInput.focus(); + + // Programmatic drive: pre-fill the search query and optionally + // auto-select the first result (or a specific symbol match) when + // the datafeed responds. Driven by `tvchart:symbol-search` callers + // that pass `{query, autoSelect, symbolType, exchange}` (e.g. agent + // tools). ``symbolType`` / ``exchange`` pre-select the filter + // dropdowns so the datafeed search is narrowed before it runs — + // e.g. ``{query: "SPY", symbolType: "etf"}`` skips over SPYM. + if (options.query) { + var preQuery = String(options.query).trim(); + if (preQuery) { + searchInput.value = preQuery; + var autoSelect = options.autoSelect !== false; + // Pre-select filter dropdowns (case-insensitive match against + // option values). Silently ignore unknown filter values so a + // caller's ``symbolType: "etf"`` request doesn't break the + // search when the datafeed exposes ``ETF`` instead. + if (options.symbolType) { + var wantType = String(options.symbolType).toLowerCase(); + for (var tsi = 0; tsi < typeSelect.options.length; tsi++) { + if (String(typeSelect.options[tsi].value).toLowerCase() === wantType) { + typeSelect.selectedIndex = tsi; + break; + } + } + } + if (options.exchange) { + var wantExch = String(options.exchange).toLowerCase(); + for (var esi = 0; esi < exchangeSelect.options.length; esi++) { + if (String(exchangeSelect.options[esi].value).toLowerCase() === wantExch) { + exchangeSelect.selectedIndex = esi; + break; + } + } + } + // Optimistically advertise the requested ticker on the chart's + // payload BEFORE the datafeed search round-trip completes. Other + // events that fire in the meantime (e.g. a `tvchart:interval-change` + // dispatched by the same agent turn) read this field to decide + // which symbol to refetch — without the optimistic update they + // see the previous symbol and clobber the pending change with a + // refetch of the old ticker. ``selectSymbol`` re-confirms the + // value once the resolve responds; if the search fails to find a + // match the optimistic value is harmless because no data-request + // ever fires. + var optimisticTicker = preQuery.toUpperCase(); + if (optimisticTicker.indexOf(':') >= 0) { + optimisticTicker = optimisticTicker.split(':').pop().trim(); + } + if (entry && entry.payload) { + entry.payload.title = optimisticTicker; + if (entry.payload.series && Array.isArray(entry.payload.series) && entry.payload.series[0]) { + entry.payload.series[0].symbol = optimisticTicker; + } + } + + var prevRender = renderResults; + // Wrap renderResults to auto-select on first non-empty results. + var selected = false; + // Pull the bare ticker from a symbol record — datafeed results + // may carry a fully-qualified ``EXCHANGE:TICKER`` in ``ticker`` + // and the bare ticker in ``symbol`` / ``requestSymbol``. Exact + // match has to beat prefix match (``SPY`` → ``SPY``, not + // ``SPYM``) even when the datafeed returns them alphabetically. + function _bareTickerSearch(rec) { + if (!rec) return ''; + var candidates = [rec.symbol, rec.requestSymbol, rec.ticker]; + for (var ci = 0; ci < candidates.length; ci++) { + var raw = String(candidates[ci] || '').toUpperCase(); + if (!raw) continue; + if (raw.indexOf(':') >= 0) raw = raw.split(':').pop().trim(); + if (raw) return raw; + } + return ''; + } + renderResults = function() { + prevRender(); + if (selected || !autoSelect || !searchResults.length) return; + var match = null; + for (var mi = 0; mi < searchResults.length; mi++) { + if (_bareTickerSearch(searchResults[mi]) === optimisticTicker) { + match = searchResults[mi]; + break; + } + } + if (!match) { + for (var mj = 0; mj < searchResults.length; mj++) { + if (_bareTickerSearch(searchResults[mj]).indexOf(optimisticTicker) === 0) { + match = searchResults[mj]; + break; + } + } + } + if (!match) match = searchResults[0]; + selected = true; + // Re-sync the optimistic value with the actual selected match + // — the auto-pick fallback may have chosen a different ticker + // than the requested query. + var resolvedTicker = (match.ticker || match.requestSymbol || match.symbol || '').toString().toUpperCase(); + if (resolvedTicker && entry && entry.payload) { + entry.payload.title = resolvedTicker; + if (entry.payload.series && Array.isArray(entry.payload.series) && entry.payload.series[0]) { + entry.payload.series[0].symbol = resolvedTicker; + } + } + selectSymbol(match); + }; + requestSearch(preQuery); + } + } } function _tvHideSeriesSettings() { @@ -627,28 +738,47 @@ function _tvShowSeriesSettings(chartId, seriesId) { : _ssTypeToStyleName(currentType || 'Line'); var auxStyle = (entry._seriesStyleAux && entry._seriesStyleAux[seriesId]) ? entry._seriesStyleAux[seriesId] : {}; + // Theme-aware defaults — all pulled from CSS vars so swapping themes + // (or overriding them via CSS) recolors the settings-dialog "Reset" + // state. Fallback literals match the dark-theme palette for the case + // where _cssVar resolves to empty (e.g. running outside the chart's + // themed container). + var themeUp = _cssVar('--pywry-tvchart-up') || '#26a69a'; + var themeDown = _cssVar('--pywry-tvchart-down') || '#ef5350'; + var themeBorderUp = _cssVar('--pywry-tvchart-border-up') || themeUp; + var themeBorderDown = _cssVar('--pywry-tvchart-border-down') || themeDown; + var themeWickUp = _cssVar('--pywry-tvchart-wick-up') || themeUp; + var themeWickDown = _cssVar('--pywry-tvchart-wick-down') || themeDown; + var themeLineColor = _cssVar('--pywry-tvchart-line-default') || '#4c87ff'; + var themeAreaTop = _cssVar('--pywry-tvchart-area-top-default') || themeLineColor; + var themeAreaBottom = _cssVar('--pywry-tvchart-area-bottom-default') || '#10223f'; + var themeBaselineTopFill1 = _cssVar('--pywry-tvchart-baseline-top-fill1') || themeUp; + var themeBaselineTopFill2 = _cssVar('--pywry-tvchart-baseline-top-fill2') || themeUp; + var themeBaselineBottomFill1 = _cssVar('--pywry-tvchart-baseline-bottom-fill1') || themeDown; + var themeBaselineBottomFill2 = _cssVar('--pywry-tvchart-baseline-bottom-fill2') || themeDown; + var initialState = { style: initialStyle, priceSource: 'close', color: _tvColorToHex( - currentOpts.color || currentOpts.lineColor || (entry._legendSeriesColors && entry._legendSeriesColors[seriesId]) || '#4c87ff', - '#4c87ff' + currentOpts.color || currentOpts.lineColor || (entry._legendSeriesColors && entry._legendSeriesColors[seriesId]) || themeLineColor, + themeLineColor ), lineWidth: _tvClamp(_tvToNumber(currentOpts.lineWidth || currentOpts.width, 2), 1, 4), markersVisible: currentOpts.pointMarkersVisible === true, - areaTopColor: _tvColorToHex(currentOpts.topColor || '#4c87ff', '#4c87ff'), - areaBottomColor: _tvColorToHex(currentOpts.bottomColor || '#10223f', '#10223f'), - baselineTopLineColor: _tvColorToHex(currentOpts.topLineColor || '#26a69a', '#26a69a'), - baselineBottomLineColor: _tvColorToHex(currentOpts.bottomLineColor || '#ef5350', '#ef5350'), - baselineTopFillColor1: _tvColorToHex(currentOpts.topFillColor1 || '#26a69a', '#26a69a'), - baselineTopFillColor2: _tvColorToHex(currentOpts.topFillColor2 || '#26a69a', '#26a69a'), - baselineBottomFillColor1: _tvColorToHex(currentOpts.bottomFillColor1 || '#ef5350', '#ef5350'), - baselineBottomFillColor2: _tvColorToHex(currentOpts.bottomFillColor2 || '#ef5350', '#ef5350'), + areaTopColor: _tvColorToHex(currentOpts.topColor || themeAreaTop, themeAreaTop), + areaBottomColor: _tvColorToHex(currentOpts.bottomColor || themeAreaBottom, themeAreaBottom), + baselineTopLineColor: _tvColorToHex(currentOpts.topLineColor || themeUp, themeUp), + baselineBottomLineColor: _tvColorToHex(currentOpts.bottomLineColor || themeDown, themeDown), + baselineTopFillColor1: _tvColorToHex(currentOpts.topFillColor1 || themeBaselineTopFill1, themeUp), + baselineTopFillColor2: _tvColorToHex(currentOpts.topFillColor2 || themeBaselineTopFill2, themeUp), + baselineBottomFillColor1: _tvColorToHex(currentOpts.bottomFillColor1 || themeBaselineBottomFill1, themeDown), + baselineBottomFillColor2: _tvColorToHex(currentOpts.bottomFillColor2 || themeBaselineBottomFill2, themeDown), baselineBaseLevel: _tvToNumber((currentOpts.baseValue && currentOpts.baseValue._level), 50), - columnsUpColor: _tvColorToHex(currentOpts.upColor || currentOpts.color || '#26a69a', '#26a69a'), - columnsDownColor: _tvColorToHex(currentOpts.downColor || currentOpts.color || '#ef5350', '#ef5350'), - barsUpColor: _tvColorToHex(currentOpts.upColor || '#26a69a', '#26a69a'), - barsDownColor: _tvColorToHex(currentOpts.downColor || '#ef5350', '#ef5350'), + columnsUpColor: _tvColorToHex(currentOpts.upColor || currentOpts.color || themeUp, themeUp), + columnsDownColor: _tvColorToHex(currentOpts.downColor || currentOpts.color || themeDown, themeDown), + barsUpColor: _tvColorToHex(currentOpts.upColor || themeUp, themeUp), + barsDownColor: _tvColorToHex(currentOpts.downColor || themeDown, themeDown), barsOpenVisible: currentOpts.openVisible !== false, priceLineVisible: currentOpts.priceLineVisible !== false, overrideMinTick: 'Default', @@ -656,12 +786,12 @@ function _tvShowSeriesSettings(chartId, seriesId) { bodyVisible: true, bordersVisible: true, wickVisible: true, - bodyUpColor: _tvColorToHex(currentOpts.upColor || currentOpts.color || '#26a69a', '#26a69a'), - bodyDownColor: _tvColorToHex(currentOpts.downColor || '#ef5350', '#ef5350'), - borderUpColor: _tvColorToHex(currentOpts.borderUpColor || currentOpts.upColor || '#26a69a', '#26a69a'), - borderDownColor: _tvColorToHex(currentOpts.borderDownColor || currentOpts.downColor || '#ef5350', '#ef5350'), - wickUpColor: _tvColorToHex(currentOpts.wickUpColor || currentOpts.upColor || '#26a69a', '#26a69a'), - wickDownColor: _tvColorToHex(currentOpts.wickDownColor || currentOpts.downColor || '#ef5350', '#ef5350'), + bodyUpColor: _tvColorToHex(currentOpts.upColor || currentOpts.color || themeUp, themeUp), + bodyDownColor: _tvColorToHex(currentOpts.downColor || themeDown, themeDown), + borderUpColor: _tvColorToHex(currentOpts.borderUpColor || currentOpts.upColor || themeBorderUp, themeBorderUp), + borderDownColor: _tvColorToHex(currentOpts.borderDownColor || currentOpts.downColor || themeBorderDown, themeBorderDown), + wickUpColor: _tvColorToHex(currentOpts.wickUpColor || currentOpts.upColor || themeWickUp, themeWickUp), + wickDownColor: _tvColorToHex(currentOpts.wickDownColor || currentOpts.downColor || themeWickDown, themeWickDown), hlcHighVisible: auxStyle.highVisible !== false, hlcLowVisible: auxStyle.lowVisible !== false, hlcCloseVisible: auxStyle.closeVisible !== false, @@ -920,7 +1050,8 @@ function _tvShowSeriesSettings(chartId, seriesId) { seriesType: 'Candlestick', source: 'close', optionPatch: { - upColor: 'rgba(0, 0, 0, 0)', + upColor: _cssVar('--pywry-tvchart-hollow-up-body') || 'rgba(0, 0, 0, 0)', + priceLineColor: _cssVar('--pywry-tvchart-price-line') || _cssVar('--pywry-tvchart-up') || '#26a69a', }, }; } @@ -1525,14 +1656,15 @@ function _tvShowSeriesSettings(chartId, seriesId) { var patchOpts = {}; if (_ssIsCandleStyle(selectedStyle)) { - var hidden = 'rgba(0, 0, 0, 0)'; + var hidden = _cssVar('--pywry-tvchart-hidden') || 'rgba(0, 0, 0, 0)'; + var hollowBody = _cssVar('--pywry-tvchart-hollow-up-body') || hidden; patchOpts.upColor = (draft.bodyVisible !== false) ? draft.bodyUpColor : hidden; patchOpts.downColor = (draft.bodyVisible !== false) ? draft.bodyDownColor : hidden; patchOpts.borderUpColor = (draft.bordersVisible !== false) ? draft.borderUpColor : hidden; patchOpts.borderDownColor = (draft.bordersVisible !== false) ? draft.borderDownColor : hidden; patchOpts.wickUpColor = (draft.wickVisible !== false) ? draft.wickUpColor : hidden; patchOpts.wickDownColor = (draft.wickVisible !== false) ? draft.wickDownColor : hidden; - if (selectedStyle === 'Hollow candles') patchOpts.upColor = hidden; + if (selectedStyle === 'Hollow candles') patchOpts.upColor = hollowBody; } else if (_ssIsLineLikeStyle(selectedStyle)) { patchOpts.color = draft.color; patchOpts.lineColor = draft.color; @@ -1721,7 +1853,7 @@ function _tvShowSeriesSettings(chartId, seriesId) { } if (_ssIsCandleStyle(selectedStyle)) { - var hidden = 'rgba(0, 0, 0, 0)'; + var hidden = _cssVar('--pywry-tvchart-hidden') || 'rgba(0, 0, 0, 0)'; rebuiltOptions.upColor = (draft.bodyVisible !== false) ? draft.bodyUpColor : hidden; rebuiltOptions.downColor = (draft.bodyVisible !== false) ? draft.bodyDownColor : hidden; rebuiltOptions.borderUpColor = (draft.bordersVisible !== false) ? draft.borderUpColor : hidden; @@ -3560,7 +3692,8 @@ function _tvNormalizeSymbolInfo(item) { }; } -function _tvShowComparePanel(chartId) { +function _tvShowComparePanel(chartId, options) { + options = options || {}; _tvHideComparePanel(); var resolved = _tvResolveChartEntry(chartId); if (!resolved || !resolved.entry) return; @@ -4001,6 +4134,93 @@ function _tvShowComparePanel(chartId) { ds.uiLayer.appendChild(overlay); searchInput.focus(); + + // Programmatic drive: pre-fill the search and auto-add the first + // matching ticker. Driven by ``tvchart:compare`` callers that pass + // ``{query, autoAdd, symbolType, exchange}`` (e.g. the MCP + // tvchart_compare tool). ``symbolType`` / ``exchange`` narrow the + // datafeed search before it runs — e.g. ``{query: "SPY", symbolType: + // "etf"}`` skips over SPYM. Mirrors the symbol-search auto-select + // flow so the compare shows up in entry._compareSymbols before the + // caller polls chart state. + if (options.query) { + var cmpQuery = String(options.query).trim(); + if (cmpQuery) { + searchInput.value = cmpQuery; + var autoAdd = options.autoAdd !== false; + if (options.symbolType) { + var wantCmpType = String(options.symbolType).toLowerCase(); + for (var ctsi = 0; ctsi < typeSelect.options.length; ctsi++) { + if (String(typeSelect.options[ctsi].value).toLowerCase() === wantCmpType) { + typeSelect.selectedIndex = ctsi; + break; + } + } + } + if (options.exchange) { + var wantCmpExch = String(options.exchange).toLowerCase(); + for (var cesi = 0; cesi < exchangeSelect.options.length; cesi++) { + if (String(exchangeSelect.options[cesi].value).toLowerCase() === wantCmpExch) { + exchangeSelect.selectedIndex = cesi; + break; + } + } + } + var prevRenderCmp = renderSearchResults; + var addedOnce = false; + var targetTicker = cmpQuery.toUpperCase(); + if (targetTicker.indexOf(':') >= 0) { + targetTicker = targetTicker.split(':').pop().trim(); + } + // Pull the bare ticker from a symbol record — datafeed results + // may carry a fully-qualified ``EXCHANGE:TICKER`` in ``ticker`` + // and the bare ticker in ``symbol`` / ``requestSymbol``. Exact- + // match needs to beat prefix-match (otherwise ``SPY`` finds + // ``SPYM`` first just because ``SPYM`` sorted earlier). + function _bareTicker(rec) { + if (!rec) return ''; + var candidates = [rec.symbol, rec.requestSymbol, rec.ticker]; + for (var ci = 0; ci < candidates.length; ci++) { + var raw = String(candidates[ci] || '').toUpperCase(); + if (!raw) continue; + if (raw.indexOf(':') >= 0) raw = raw.split(':').pop().trim(); + if (raw) return raw; + } + return ''; + } + renderSearchResults = function() { + prevRenderCmp(); + if (addedOnce || !autoAdd || !searchResults.length) return; + var pick = null; + for (var pi = 0; pi < searchResults.length; pi++) { + if (_bareTicker(searchResults[pi]) === targetTicker) { + pick = searchResults[pi]; + break; + } + } + // No exact match → prefer results whose bare ticker + // *starts with* the query, then fall back to the first + // result. Prevents ``SPY`` → ``SPYM`` just because the + // datafeed returned them in alphabetical order. + if (!pick) { + for (var pj = 0; pj < searchResults.length; pj++) { + if (_bareTicker(searchResults[pj]).indexOf(targetTicker) === 0) { + pick = searchResults[pj]; + break; + } + } + } + if (!pick) pick = searchResults[0]; + addedOnce = true; + addCompare(pick, 'same_percent'); + // Auto-close the panel after a programmatic add so the + // MCP caller's confirmation flow doesn't leave an empty + // search dialog sitting on top of the chart. + setTimeout(function() { _tvHideComparePanel(); }, 0); + }; + requestSearch(cmpQuery); + } + } } // --------------------------------------------------------------------------- diff --git a/pywry/pywry/frontend/src/tvchart/10-events.js b/pywry/pywry/frontend/src/tvchart/10-events.js index 2275bd3..52e1588 100644 --- a/pywry/pywry/frontend/src/tvchart/10-events.js +++ b/pywry/pywry/frontend/src/tvchart/10-events.js @@ -38,19 +38,49 @@ if (!entry || !entry.chart) return; var seriesId = data.seriesId || 'main'; - // When the main series receives new bars with a different interval, - // destroy and fully recreate the chart so candles + volume stay in - // perfect 1-to-1 sync. This is the only reliable path — partial - // updates cannot rebuild the volume histogram pane. - if (seriesId === 'main' && data.interval) { + // When the main series receives new bars with a different + // interval OR a different symbol, destroy and fully recreate + // the chart so candles + volume stay in perfect 1-to-1 sync + // and no stale compare / overlay / aux series (e.g. HLC fill + // layers from a prior chart type) linger on the canvas. + // Partial updates replace ``main``'s data but can't scrub + // other series out of the chart object. + // + // The rebuild window briefly makes the chart entry + // unavailable; ``tvchart:request-state`` answers + // ``{chartId, error: "not found"}`` during that gap. The + // Python-side ``_fetch_tvchart_state`` helper treats any + // response with an ``error`` field as ``None`` so the + // mutation-confirmation poll keeps retrying until the new + // chart is back up with real state. Don't try to avoid + // the rebuild — the ghost-series and volume-alignment bugs + // that destroy-recreate cures are worse than a ~200ms poll + // retry window. + if (seriesId === 'main' && (data.interval || data.symbol)) { var hasBars = data.bars && data.bars.length > 0; var isDatafeed = entry.payload && entry.payload.useDatafeed; var currentInterval = (entry.payload && entry.payload.interval) || ''; - if (data.interval !== currentInterval && (hasBars || isDatafeed)) { + var currentMainSymbol = ''; + if (entry.payload && entry.payload.series && entry.payload.series[0]) { + currentMainSymbol = String(entry.payload.series[0].symbol || '').toUpperCase(); + } + var incomingSymbol = data.symbol ? String(data.symbol).toUpperCase() : ''; + var intervalChanged = data.interval && data.interval !== currentInterval; + var symbolChanged = incomingSymbol && currentMainSymbol && incomingSymbol !== currentMainSymbol; + if ((intervalChanged || symbolChanged) && (hasBars || isDatafeed)) { var container = entry.container; var oldPayload = entry.payload || {}; var savedDisplayStyle = entry._chartDisplayStyle || null; + // Capture the visible *time* range before destroy so we + // can restore the user's zoom on the new chart. Time- + // based (not logical/bar-index) so it works across + // interval changes where bar counts differ. + var savedVisibleTimeRange = null; + try { + savedVisibleTimeRange = entry.chart.timeScale().getVisibleRange(); + } catch (e) {} + // Save compare symbols and indicators before destroy var savedCompareSymbols = entry._compareSymbols ? _tvMerge(entry._compareSymbols, {}) : null; var savedCompareLabels = entry._compareLabels ? _tvMerge(entry._compareLabels, {}) : null; @@ -68,20 +98,27 @@ } } - // Merge new bars into the rebuilt payload + // Merge new bars into the rebuilt payload. Interval and + // symbol may each be unchanged (symbol-only change keeps + // the old interval; interval-only change keeps the old + // symbol) — fall back to the current value in either case. + var effectiveInterval = data.interval || currentInterval; + var effectiveSymbol = incomingSymbol || currentMainSymbol; var newPayload = _tvMerge(oldPayload, {}); - newPayload.interval = data.interval; + newPayload.interval = effectiveInterval; if (newPayload.useDatafeed) { // Datafeed mode: pre-fill bars from provider.get_bars() so // _tvInitDatafeedMode can skip the redundant getBars call. if (newPayload.series && Array.isArray(newPayload.series) && newPayload.series[0]) { - newPayload.series[0].resolution = data.interval; + newPayload.series[0].resolution = effectiveInterval; + if (effectiveSymbol) newPayload.series[0].symbol = effectiveSymbol; newPayload.series[0].bars = data.bars || []; newPayload.series[0].volume = []; } } else { if (newPayload.series && Array.isArray(newPayload.series) && newPayload.series[0]) { + if (effectiveSymbol) newPayload.series[0].symbol = effectiveSymbol; newPayload.series[0].bars = data.bars; newPayload.series[0].volume = []; } else { @@ -89,19 +126,126 @@ newPayload.volume = []; } } + if (effectiveSymbol) newPayload.title = effectiveSymbol; + + // Symbol change wipes prior compares/indicators — they + // belong to the old ticker, not the new one. Interval- + // only change preserves them (handled by the saved vars + // below). + if (symbolChanged) { + savedCompareSymbols = null; + savedCompareLabels = null; + savedCompareSymbolInfo = null; + savedIndicators = []; + } // Destroy then recreate window.PYWRY_TVCHART_DESTROY(cid); container.innerHTML = ''; window.PYWRY_TVCHART_CREATE(cid, container, newPayload); - _tvSetIntervalUi(cid, data.interval); + // Hand the pre-destroy zoom off to the new chart so its + // ``applyDefault`` (setTimeout 150ms in lifecycle) honours + // the user's prior zoom instead of falling through to + // fitContent. Clamp to the new data bounds so a symbol + // with shorter history doesn't end up pointing off the + // end of its bars. + (function() { + var reEntry = window.__PYWRY_TVCHARTS__[cid]; + if (!reEntry || !savedVisibleTimeRange) return; + var newBars = Array.isArray(data.bars) ? data.bars : []; + if (!newBars.length) return; + var firstTime = newBars[0].time; + var lastTime = newBars[newBars.length - 1].time; + var from = savedVisibleTimeRange.from; + var to = savedVisibleTimeRange.to; + if (from == null || to == null || firstTime == null || lastTime == null) return; + if (to <= firstTime || from >= lastTime) { + // Saved range is entirely outside the new data + // (e.g. viewing old AAPL history on a short- + // history ticker). Re-anchor to the end with + // the same width. + var width = to - from; + if (!(width > 0)) return; + to = lastTime; + from = Math.max(firstTime, lastTime - width); + } else { + from = Math.max(from, firstTime); + to = Math.min(to, lastTime); + } + if (!(from < to)) return; + reEntry._preservedVisibleTimeRange = { from: from, to: to }; + })(); + + _tvSetIntervalUi(cid, effectiveInterval); + + // Track every piece of deferred post-CREATE work so + // ``tvchart:data-settled`` fires ONLY when the chart is + // actually stable. Python tools that chain mutation + // calls (symbol → interval → zoom) use this signal to + // sequence their calls — if it fires early, the next + // tool races the still-in-flight rebuild and its + // effect gets clobbered (e.g. a zoom reverts when the + // late-firing applyDefault restores the pre-destroy + // range). + // + // Work to wait on, in order of scheduled time: + // 1. ``entry.whenMainSeriesReady`` — main series + // attached (sync in static-bar mode, async via + // resolveSymbol in datafeed mode). + // 2. chart-type-change re-apply — chains off (1). + // 3. indicator re-add — setTimeout(100). + // 4. lifecycle applyDefault — setTimeout(150), owns + // ``_preservedVisibleTimeRange``. + var _pending = 0; + var _settledFired = false; + var _fireSettled = function() { + if (_pending > 0 || _settledFired) return; + _settledFired = true; + var finalState = _tvExportState(cid); + bridge.emit('tvchart:data-settled', finalState || { + chartId: cid, error: 'not found', + }); + }; + var _track = function() { + _pending++; + var settled = false; + return function() { + if (settled) return; + settled = true; + _pending--; + _fireSettled(); + }; + }; - // Re-apply chart display style if user changed it from default + // Wait for lifecycle applyDefault to consume the + // preserved range. Its setTimeout is 150ms; add a + // 30ms safety buffer. + var _applyDefaultDone = _track(); + setTimeout(_applyDefaultDone, 180); + + // Re-apply chart display style once the new main + // series is attached. Event-driven via + // ``whenMainSeriesReady`` — no polling. if (savedDisplayStyle) { - bridge.emit('tvchart:chart-type-change', { - value: savedDisplayStyle, - chartId: cid, - }); + var _styleDone = _track(); + var _reEntryForStyle = window.__PYWRY_TVCHARTS__[cid]; + if (_reEntryForStyle && typeof _reEntryForStyle.whenMainSeriesReady === 'function') { + _reEntryForStyle.whenMainSeriesReady(function() { + // Seed ``_chartDisplayStyle`` before the + // emit so legend/settings pick it up + // during the switch. + _reEntryForStyle._chartDisplayStyle = savedDisplayStyle; + bridge.emit('tvchart:chart-type-change', { + value: savedDisplayStyle, + chartId: cid, + }); + _styleDone(); + }); + } else { + // Entry gone before we could register — nothing + // to do, but still settle the tracker. + _styleDone(); + } } // Re-request compare symbols at the new interval @@ -120,8 +264,8 @@ symbol: cmpSym, symbolInfo: savedCompareSymbolInfo ? savedCompareSymbolInfo[cmpSid] : null, seriesId: cmpSid, - interval: data.interval, - resolution: data.interval, + interval: effectiveInterval, + resolution: effectiveInterval, periodParams: { from: 0, to: Math.floor(Date.now() / 1000), @@ -132,31 +276,39 @@ } } - // Re-add indicators after a short delay to allow main series - // data to be set (indicators compute from raw bar data) + // Re-add indicators after a short delay to allow main + // series data to be set (indicators compute from raw + // bar data). Tracked so data-settled waits for it. if (savedIndicators.length > 0) { + var _indDone = _track(); setTimeout(function() { var reEntry = window.__PYWRY_TVCHARTS__[cid]; - if (!reEntry) return; - for (var si = 0; si < savedIndicators.length; si++) { - var ind = savedIndicators[si]; - _tvAddIndicator({ - name: ind.name, - key: ind.type, - defaultPeriod: ind.period, - _color: ind.color, - _source: ind.source, - _method: ind.method, - _multiplier: ind.multiplier, - requiresSecondary: !!ind.secondarySeriesId, - }, cid); + if (reEntry) { + for (var si = 0; si < savedIndicators.length; si++) { + var ind = savedIndicators[si]; + _tvAddIndicator({ + name: ind.name, + key: ind.type, + defaultPeriod: ind.period, + _color: ind.color, + _source: ind.source, + _method: ind.method, + _multiplier: ind.multiplier, + requiresSecondary: !!ind.secondarySeriesId, + }, cid); + } } + _indDone(); }, 100); } _tvRefreshLegendTitle(cid); _tvEmitLegendRefresh(cid); _tvRenderHoverLegend(cid, null); + + // All deferred tasks are registered — if none were + // queued this call settles immediately. + _fireSettled(); return; } } @@ -214,18 +366,72 @@ try { _savedRange = entry.chart.timeScale().getVisibleLogicalRange(); } catch (e) {} } - // Symbol change on main series (same interval): preserve zoom/viewport + // Symbol change on main series (same interval): preserve the + // WIDTH of the previous zoom but re-anchor the right edge to + // the new symbol's last bar. Restoring the old logical range + // verbatim puts the viewport off the end of shorter-history + // symbols (one lonely candle stranded on the left). var _isSymbolChange = (seriesId === 'main' && data.interval && data.interval === ((entry.payload && entry.payload.interval) || '')); + var _savedWidth = null; if (_isSymbolChange) { - try { _savedRange = entry.chart.timeScale().getVisibleLogicalRange(); } catch (e) {} + try { + var _pre = entry.chart.timeScale().getVisibleLogicalRange(); + if (_pre) _savedWidth = Math.max(1, _pre.to - _pre.from); + } catch (e) {} + } + + // Compare / overlay add on a non-main series should preserve the + // user's current zoom — the default ``fitContent: true`` in the + // data-response payload would otherwise reset the view every + // time a compare or overlay arrives. The binary-indicator + // flow handles its own range save below, so skip this path + // when that's in effect. + var _isCompareAdd = !_isIndicatorFlow && !_isSymbolChange && seriesId !== 'main'; + var _savedCompareTimeRange = null; + if (_isCompareAdd) { + try { _savedCompareTimeRange = entry.chart.timeScale().getVisibleRange(); } catch (e) {} } - var _suppressFit = _isIndicatorFlow || _isSymbolChange; + var _suppressFit = _isIndicatorFlow || _isSymbolChange || _isCompareAdd; window.PYWRY_TVCHART_UPDATE(chartId, _suppressFit ? _tvMerge(data, { fitContent: false }) : data); - if (_isSymbolChange && _savedRange) { - try { entry.chart.timeScale().setVisibleLogicalRange(_savedRange); } catch (e) {} + if (_isCompareAdd && _savedCompareTimeRange + && _savedCompareTimeRange.from != null && _savedCompareTimeRange.to != null) { + try { + entry.chart.timeScale().setVisibleRange({ + from: _savedCompareTimeRange.from, + to: _savedCompareTimeRange.to, + }); + } catch (e) {} + } + + if (_isSymbolChange) { + var _bars = Array.isArray(data.bars) ? data.bars : []; + if (_bars.length > 0) { + var _last = _bars[_bars.length - 1]; + var _width = _savedWidth && _savedWidth < _bars.length ? _savedWidth : _bars.length; + var _firstIdx = Math.max(0, _bars.length - Math.ceil(_width)); + var _first = _bars[_firstIdx]; + if (_first && _last && _first.time != null && _last.time != null) { + try { + entry.chart.timeScale().setVisibleRange({ + from: _first.time, + to: _last.time, + }); + } catch (e) { + // setVisibleRange can reject if the range is + // degenerate — fall back to scrolling to the + // real-time edge so the last bar is at least + // on-screen. + try { entry.chart.timeScale().scrollToRealTime(); } catch (e2) {} + } + } else { + try { entry.chart.timeScale().scrollToRealTime(); } catch (e) {} + } + } else { + try { entry.chart.timeScale().fitContent(); } catch (e) {} + } } // Binary indicator flow: hide the raw compare series and compute @@ -262,6 +468,16 @@ _tvRefreshLegendTitle(resolved ? resolved.chartId : chartId); _tvEmitLegendRefresh(resolved ? resolved.chartId : chartId); _tvRenderHoverLegend(resolved ? resolved.chartId : chartId, null); + + // Signal that this data-response has been fully processed + // (compare/overlay add, in-place symbol swap, etc.) so the + // Python mutation handler waiting on this round-trip can + // return deterministic confirmed state instead of polling. + var _settledCid = resolved ? resolved.chartId : chartId; + var _settledState = _tvExportState(_settledCid); + bridge.emit('tvchart:data-settled', _settledState || { + chartId: _settledCid, error: 'not found', + }); }); bridge.on('tvchart:update', function(data) { @@ -458,7 +674,8 @@ // Python → JS: fit content / scroll to position bridge.on('tvchart:time-scale', function(data) { - var entry = window.__PYWRY_TVCHARTS__[data.chartId || _cid]; + var chartId = data.chartId || _cid; + var entry = window.__PYWRY_TVCHARTS__[chartId]; if (!entry || !entry.chart) return; if (data.fitContent) { entry.chart.timeScale().fitContent(); @@ -469,6 +686,15 @@ if (data.visibleRange) { entry.chart.timeScale().setVisibleLogicalRange(data.visibleRange); } + // Signal the Python-side mutation handler that the zoom / + // fit / scroll has been applied so it can return the + // confirmed post-mutation state instead of blocking on a + // timeout. Same event name as data-response's settled + // signal — the payload is the live chart state. + var settledState = _tvExportState(chartId); + bridge.emit('tvchart:data-settled', settledState || { + chartId: chartId, error: 'not found', + }); }); // Python → JS: request state export @@ -691,10 +917,17 @@ // Store the display name so settings and legend can reference it entry._chartDisplayStyle = displayName; + // Persist only the new seriesType and bars — NOT sOpts. sOpts + // contains the style-specific optionPatch (e.g. Hollow candles' + // transparent ``upColor``), and merging it into the persisted + // baseline contaminates future switches: "Hollow candles" → + // "Candles" would leave ``upColor`` transparent because Candles' + // empty optionPatch has nothing to reset it with. The pristine + // baseline in ``payloadSeries.seriesOptions`` is re-read on + // every switch via ``_tvBuildSeriesOptions`` — don't poison it. _tvUpsertPayloadSeries(entry, mainKey, { seriesType: baseType, bars: rawBars, - seriesOptions: _tvMerge((payloadSeries && payloadSeries.seriesOptions) ? payloadSeries.seriesOptions : {}, sOpts), }); if (entry.payload) { @@ -772,6 +1005,65 @@ _tvShowIndicatorsPanel(chartId); }); + bridge.on('tvchart:add-indicator', function(data) { + var chartId = data.chartId || _cid; + var def = { + name: data.name || '', + key: data.key || undefined, + defaultPeriod: data.period !== undefined ? data.period : (data.defaultPeriod || 0), + _color: data.color || undefined, + _source: data.source || undefined, + _method: data.method || undefined, + _multiplier: data.multiplier || undefined, + _maType: data.maType || undefined, + _offset: data.offset || undefined, + }; + _tvAddIndicator(def, chartId); + }); + + bridge.on('tvchart:remove-indicator', function(data) { + var seriesId = data.seriesId; + if (seriesId) _tvRemoveIndicator(seriesId); + }); + + bridge.on('tvchart:list-indicators', function(data) { + var chartId = data.chartId || _cid; + var resolved = _tvResolveChartEntry(chartId); + var listEntry = resolved ? resolved.entry : null; + var result = []; + var keys = Object.keys(_activeIndicators); + for (var i = 0; i < keys.length; i++) { + var info = _activeIndicators[keys[i]]; + if (!info || info.chartId !== chartId) continue; + var out = { + seriesId: keys[i], + name: info.name, + type: info.type, + period: info.period || 0, + color: info.color, + group: info.group || null, + sourceSeriesId: info.sourceSeriesId || null, + secondarySeriesId: info.secondarySeriesId || null, + isSubplot: !!info.isSubplot, + primarySource: info.primarySource || null, + secondarySource: info.secondarySource || null, + }; + // Resolve the secondary series back to its ticker symbol + // so agents describing e.g. a Spread indicator know what + // it's spreading against. + if (info.secondarySeriesId && listEntry && listEntry._compareSymbols) { + var sym = listEntry._compareSymbols[info.secondarySeriesId]; + out.secondarySymbol = sym ? String(sym) : null; + } + result.push(out); + } + bridge.emit('tvchart:list-indicators-response', { + chartId: chartId, + indicators: result, + context: data.context || null, + }); + }); + // Log scale toggle (legacy event fallback) bridge.on('tvchart:log-scale', function(data) { var isLog = data.value === true || data.checked === true; @@ -865,6 +1157,14 @@ if (entry && entry.chart) { _tvApplyTimeRangeSelection(entry, range); } + // Signal mutation completion for Python-side + // ``_wait_for_data_settled`` so the tool returns confirmed + // state instead of blocking on the timeout. + var settledCid = resolved ? resolved.chartId : chartId; + var settledState = _tvExportState(settledCid); + bridge.emit('tvchart:data-settled', settledState || { + chartId: settledCid, error: 'not found', + }); }); bridge.on('tvchart:time-range-picker', function(data) { @@ -905,16 +1205,34 @@ _tvPerformRedo(); }); - // Compare — open symbol entry panel and emit compare-request to host + // Compare — open symbol entry panel. Optional ``query`` drives + // the panel programmatically: search + auto-add the matching + // ticker as a compare series, so MCP callers can confirm the + // compare actually appeared in state.compareSymbols. bridge.on('tvchart:compare', function(data) { - var chartId = _tvResolveChartId(data.chartId || _cid); - if (chartId) _tvShowComparePanel(chartId); + var chartId = _tvResolveChartId((data && data.chartId) || _cid); + if (!chartId) return; + _tvShowComparePanel(chartId, { + query: data && data.query, + autoAdd: data && data.autoAdd !== false, + symbolType: data && data.symbolType, + exchange: data && data.exchange, + }); }); - // Symbol search — open the symbol search dialog + // Symbol search — open the symbol search dialog. Optional + // `query` pre-fills the input; `autoSelect` (default true when + // `query` is provided) picks the matching/first result. + // `symbolType` / `exchange` narrow the datafeed search. bridge.on('tvchart:symbol-search', function(data) { var chartId = _tvResolveChartId((data && data.chartId) || _cid); - if (chartId) _tvShowSymbolSearchDialog(chartId); + if (!chartId) return; + _tvShowSymbolSearchDialog(chartId, { + query: data && data.query, + autoSelect: data && data.autoSelect, + symbolType: data && data.symbolType, + exchange: data && data.exchange, + }); }); bridge.on('tvchart:datafeed-search-response', function(data) { diff --git a/pywry/pywry/frontend/style/chat.css b/pywry/pywry/frontend/style/chat.css index f2cd82f..916cecb 100644 --- a/pywry/pywry/frontend/style/chat.css +++ b/pywry/pywry/frontend/style/chat.css @@ -388,6 +388,64 @@ overflow: hidden; } +.pywry-chat-msg-actions { + display: flex; + gap: 6px; + margin-top: 6px; + opacity: 0; + transition: opacity 120ms ease-in-out; +} + +.pywry-chat-msg:hover .pywry-chat-msg-actions, +.pywry-chat-msg-editing .pywry-chat-msg-actions { + opacity: 1; +} + +.pywry-chat-msg-action { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 3px 8px; + background: transparent; + border: 1px solid var(--pywry-border-color, rgba(128, 128, 128, 0.3)); + border-radius: 4px; + color: var(--pywry-text-secondary, #787b86); + font-size: 11px; + cursor: pointer; + transition: background 120ms ease-in-out, color 120ms ease-in-out; +} + +.pywry-chat-msg-action:hover { + background: var(--pywry-bg-secondary, rgba(128, 128, 128, 0.1)); + color: var(--pywry-text-primary, #e0e0e0); +} + +.pywry-chat-msg-action svg { + flex-shrink: 0; +} + +.pywry-chat-msg-edit-textarea { + width: 100%; + box-sizing: border-box; + min-height: 60px; + padding: 8px 10px; + background: var(--pywry-bg-primary, #1e1e1e); + border: 1px solid var(--pywry-accent, #2196F3); + border-radius: 4px; + color: var(--pywry-text-primary, #e0e0e0); + font: inherit; + font-size: 13px; + line-height: 1.5; + resize: vertical; + outline: none; +} + +.pywry-chat-msg-editing .pywry-chat-msg-content { + background: rgba(33, 150, 243, 0.05); + border-radius: 4px; + padding: 4px; +} + .pywry-chat-msg-content p { margin: 0 0 8px 0; } @@ -987,7 +1045,7 @@ html.light .pywry-hl-prop, .pywry-chat-settings-dropdown { display: none; position: fixed; - min-width: 220px; + min-width: 260px; max-width: 300px; max-height: 400px; overflow-y: auto; @@ -1033,9 +1091,15 @@ html.light .pywry-hl-prop, border-radius: var(--pywry-radius, 4px); color: var(--pywry-text-primary); font-size: 12px; - padding: 2px 4px; + min-width: 150px; + max-width: 180px; + width: min(62%, 180px); + padding: 2px 28px 2px 8px; outline: none; - max-width: 120px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + box-sizing: border-box; } .pywry-chat-settings-item select:focus { diff --git a/pywry/pywry/frontend/style/tvchart.css b/pywry/pywry/frontend/style/tvchart.css index 4c01f2a..065ffa6 100644 --- a/pywry/pywry/frontend/style/tvchart.css +++ b/pywry/pywry/frontend/style/tvchart.css @@ -42,6 +42,23 @@ html.dark, --pywry-tvchart-baseline-top-fill2: rgba(8, 153, 129, 0.05); --pywry-tvchart-baseline-bottom-fill1: rgba(242, 54, 69, 0.05); --pywry-tvchart-baseline-bottom-fill2: rgba(242, 54, 69, 0.28); + /* Chart style patch values — used by _tvResolveChartStyle() in JS to + build the optionPatch for style switches. Defined as CSS vars so + themes stay the source of truth (and a future theme could, say, + tint the hollow body rather than make it fully transparent). */ + --pywry-tvchart-hollow-up-body: rgba(0, 0, 0, 0); + --pywry-tvchart-hidden: rgba(0, 0, 0, 0); + /* Price line (right-axis horizontal marker) — kept on its own selector + so styles that override upColor/downColor (e.g. Hollow candles' + transparent up-body) don't erase the price line too. Default to the + theme's up color. */ + --pywry-tvchart-price-line: #089981; + /* Settings-dialog defaults for series that don't ship with explicit + colors (line, area, baseline fills). Keeping them here means a + theme change recolors the "Reset" state of the dialog. */ + --pywry-tvchart-line-default: #4c87ff; + --pywry-tvchart-area-top-default: #4c87ff; + --pywry-tvchart-area-bottom-default: #10223f; --pywry-bg-primary: #0a0a0d; --pywry-bg-secondary: #0a0a0d; --pywry-bg-hover: #17191f; @@ -97,9 +114,12 @@ html.light, --pywry-tvchart-hover: #edf2f7; --pywry-tvchart-active-bg: rgba(41, 98, 255, 0.12); --pywry-tvchart-active-text: #2962ff; - --pywry-tvchart-text: #1c2430; - --pywry-tvchart-text-muted: #5a6472; - --pywry-tvchart-text-dim: #7b8796; + /* Contrast-heavy text palette: the chart sits on pure #ffffff, so + text needs to land well above WCAG AA to feel crisp rather than + "technically readable". text: 18.1:1, muted: 11.1:1, dim: 8.1:1. */ + --pywry-tvchart-text: #0a0e18; + --pywry-tvchart-text-muted: #2e3540; + --pywry-tvchart-text-dim: #3d4553; --pywry-tvchart-grid: rgba(197, 203, 206, 0.5); --pywry-tvchart-crosshair: #9598a1; --pywry-tvchart-crosshair-label-bg: #e1ecf2; @@ -125,6 +145,19 @@ html.light, --pywry-tvchart-baseline-top-fill2: rgba(38, 166, 154, 0.05); --pywry-tvchart-baseline-bottom-fill1: rgba(239, 83, 80, 0.05); --pywry-tvchart-baseline-bottom-fill2: rgba(239, 83, 80, 0.28); + /* Chart style patch values — used by _tvResolveChartStyle() in JS to + build the optionPatch for style switches. Defined as CSS vars so + themes stay the source of truth. */ + --pywry-tvchart-hollow-up-body: rgba(0, 0, 0, 0); + --pywry-tvchart-hidden: rgba(0, 0, 0, 0); + /* Price line (right-axis horizontal marker) — kept on its own selector + so Hollow candles' transparent up-body doesn't erase the price line. */ + --pywry-tvchart-price-line: #26a69a; + /* Settings-dialog defaults for series that don't ship with explicit + colors (line, area, baseline fills). */ + --pywry-tvchart-line-default: #2962ff; + --pywry-tvchart-area-top-default: #2962ff; + --pywry-tvchart-area-bottom-default: #e3ecff; --pywry-tvchart-selected-bg: #1f2937; --pywry-tvchart-selected-text: #ffffff; --pywry-tvchart-overlay: rgba(245, 248, 252, 0.64); @@ -489,7 +522,7 @@ html.light, font-size: 11px; font-weight: 600; letter-spacing: 0.6px; - color: var(--pywry-tvchart-muted, #787b86); + color: var(--pywry-tvchart-text-muted); text-transform: uppercase; } @@ -534,7 +567,7 @@ html.light, .pywry-tool-flyout-shortcut { font-size: 11px; - color: var(--pywry-tvchart-muted, #787b86); + color: var(--pywry-tvchart-text-muted); margin-left: auto; padding-left: 16px; } @@ -579,15 +612,15 @@ html.light, transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .tvchart-bottom-btn:hover { - background: var(--pywry-tvchart-btn-hover, rgba(255,255,255,0.08)); + background: var(--pywry-tvchart-hover); border-color: var(--pywry-tvchart-border, rgba(255,255,255,0.12)); color: var(--pywry-tvchart-text); } .tvchart-bottom-btn:active { - background: var(--pywry-tvchart-btn-hover, rgba(255,255,255,0.12)); + background: var(--pywry-tvchart-active-bg); } .tvchart-bottom-btn.active { - color: var(--pywry-tvchart-accent, #2962FF); + color: var(--pywry-tvchart-active-text); } .tvchart-bottom-btn-caret { opacity: 0.6; @@ -615,7 +648,7 @@ html.light, font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, sans-serif; font-weight: 700; color: var(--pywry-tvchart-text-muted); - background: var(--pywry-tvchart-btn-bg, rgba(255,255,255,0.04)); + background: transparent; border: none; cursor: pointer; padding: 2px 8px; @@ -628,15 +661,15 @@ html.light, transition: background 0.12s ease, color 0.12s ease; } .tvchart-scale-btn:hover { - background: var(--pywry-tvchart-btn-hover, rgba(255,255,255,0.08)); + background: var(--pywry-tvchart-hover); color: var(--pywry-tvchart-text); } .tvchart-scale-btn:active { - background: var(--pywry-tvchart-btn-hover, rgba(255,255,255,0.12)); + background: var(--pywry-tvchart-active-bg); } .tvchart-scale-btn.active { color: var(--pywry-tvchart-text); - background: var(--pywry-tvchart-btn-active-bg, rgba(255,255,255,0.12)); + background: var(--pywry-tvchart-active-bg); } /* Timezone dropdown menu */ @@ -682,10 +715,10 @@ html.light, white-space: nowrap; } .tvchart-tz-menu-item:hover { - background: var(--pywry-tvchart-btn-hover, rgba(255,255,255,0.08)); + background: var(--pywry-tvchart-hover); } .tvchart-tz-menu-item.selected { - color: var(--pywry-tvchart-accent, #2962FF); + color: var(--pywry-tvchart-active-text); } .tvchart-tz-menu-item .tz-check { width: 16px; @@ -2426,7 +2459,7 @@ html.light, } .ts-line-style-btn.active { - background: color-mix(in srgb, var(--pywry-tvchart-accent) 25%, var(--pywry-tvchart-panel-bg-strong) 75%); + background: color-mix(in srgb, var(--pywry-tvchart-active-text) 25%, var(--pywry-tvchart-panel-bg-strong) 75%); color: var(--pywry-tvchart-text); } diff --git a/pywry/pywry/mcp/handlers.py b/pywry/pywry/mcp/handlers.py index f4ca101..5e823ed 100644 --- a/pywry/pywry/mcp/handlers.py +++ b/pywry/pywry/mcp/handlers.py @@ -6,7 +6,9 @@ from __future__ import annotations import json +import logging import os +import time import uuid from collections.abc import Callable @@ -22,15 +24,34 @@ ) from .skills import get_skill, list_skills from .state import ( + capture_widget_events, get_app, get_widget, list_widget_ids, register_widget, remove_widget, + request_response, store_widget_config, ) +logger = logging.getLogger(__name__) + + +# Default set of tvchart events that are captured into the MCP events +# dict so agents can retrieve them via the ``get_events`` tool. +_TVCHART_CAPTURE_EVENTS = [ + "tvchart:click", + "tvchart:crosshair-move", + "tvchart:visible-range-change", + "tvchart:drawing-added", + "tvchart:drawing-deleted", + "tvchart:open-layout-request", + "tvchart:interval-change", + "tvchart:chart-type-change", +] + + # Type aliases EventsDict = dict[str, list[dict[str, Any]]] MakeCallback = Callable[[str], Callable[[Any, str, str], None]] @@ -356,6 +377,7 @@ def _handle_show_tvchart(ctx: HandlerContext) -> HandlerResult: widget_id = getattr(widget, "widget_id", None) or uuid.uuid4().hex register_widget(widget_id, widget) + capture_widget_events(widget, widget_id, ctx.events, _TVCHART_CAPTURE_EVENTS) if ctx.headless: from ..inline import _state as inline_state @@ -373,16 +395,832 @@ def _handle_show_tvchart(ctx: HandlerContext) -> HandlerResult: # ============================================================================= # Widget Manipulation Handlers # ============================================================================= -def _get_widget_or_error(widget_id: str) -> tuple[Any | None, HandlerResult | None]: - """Get widget by ID, returning error dict if not found.""" - widget = get_widget(widget_id) +def _resolve_widget_id(widget_id: str | None) -> tuple[str | None, HandlerResult | None]: + """Resolve the target widget id, defaulting to the sole registered widget. + + The MCP schema documents ``widget_id`` as required because + multi-widget servers genuinely need it to disambiguate. At dispatch + time, however, a single-widget server can resolve the id from its + own registry — every component has an id, the server already knows + it, the agent shouldn't have to repeat what the server knows. + + Resolution rules: + - ``widget_id`` provided → use it as-is. + - Missing AND exactly one widget registered → use that widget. + - Missing AND zero or many widgets → error listing the candidates. + """ + if widget_id: + return widget_id, None + ids = list_widget_ids() + if len(ids) == 1: + return ids[0], None + if not ids: + return None, { + "error": "widget_id is required (no widgets are registered yet).", + } + return None, { + "error": ( + "widget_id is required when multiple widgets exist. " + f"Registered widgets: {', '.join(ids)}." + ), + } + + +def _get_widget_or_error(widget_id: str | None) -> tuple[Any | None, HandlerResult | None]: + """Resolve a widget by id (auto-defaulting to the sole registered widget). + + Returns the widget instance plus ``None``, or ``None`` plus a + structured error dict listing the registered ids so the caller can + self-correct. + """ + resolved_id, error = _resolve_widget_id(widget_id) + if error: + return None, error + widget = get_widget(resolved_id) if not widget: - return None, {"error": f"Widget not found: {widget_id}"} + ids = list_widget_ids() + return None, { + "error": ( + f"Widget not found: {resolved_id}." + + ( + f" Registered widgets: {', '.join(ids)}." + if ids + else " No widgets are registered yet." + ) + ), + } return widget, None +# ============================================================================= +# TVChart Handlers — every tvchart:* event exposed as a first-class tool +# ============================================================================= + + +def _fetch_tvchart_state(widget: Any, timeout: float = 1.5) -> dict[str, Any] | None: + """Round-trip ``tvchart:request-state`` and strip the correlation token. + + The frontend answers with ``{chartId, error: "not found"}`` when + the chart entry is mid-rebuild (destroy → recreate on a symbol or + interval mutation). Treat that as "state unavailable right now" + and return ``None``. + """ + response = request_response( + widget, + "tvchart:request-state", + "tvchart:state-response", + {}, + timeout=timeout, + ) + if response is None: + return None + response.pop("context", None) + if response.get("error"): + return None + return response + + +def _wait_for_data_settled( + widget: Any, + matcher: Callable[[dict[str, Any]], bool], + *, + timeout: float = 8.0, +) -> dict[str, Any] | None: + """Block until the frontend signals a data-response has fully settled. + + The ``tvchart:data-settled`` event is emitted by the data-response + handler after the destroy-recreate (symbol / interval change) or + the in-place update (compare / overlay add) completes — including + the 150ms tail for indicator re-add. Waiting on it is strictly + better than polling ``tvchart:request-state``: there's no race + with the rebuild window and the payload is the exact post-mutation + state snapshot. + + The matcher lets the caller ignore an unrelated concurrent + mutation's settled event (e.g. compare-add firing while we're + waiting for a symbol-change to settle). Returns the first + matching payload, or ``None`` on timeout. + """ + import threading as _threading + + result: dict[str, Any] = {"payload": None} + done = _threading.Event() + + def _listener(data: Any, _event_type: str = "", _label: str = "") -> None: + if done.is_set() or not isinstance(data, dict): + return + if data.get("error"): + return + if matcher(data): + result["payload"] = data + done.set() + + # Register an event listener, wait for a matching payload, tear it + # down. ``widget.on`` returns an unsubscribe callable on most + # PyWry backends; fall back to a best-effort untracked listener + # otherwise. + unsubscribe = None + try: + unsubscribe = widget.on("tvchart:data-settled", _listener) + except Exception: + logger.debug("widget.on('tvchart:data-settled') failed", exc_info=True) + try: + done.wait(timeout=timeout) + finally: + if callable(unsubscribe): + try: + unsubscribe() + except Exception: + logger.debug("unsubscribe failed", exc_info=True) + return result["payload"] + + +def _poll_tvchart_state( + widget: Any, + *, + matcher: Callable[[dict[str, Any]], bool], + total_timeout: float = 6.0, + poll_interval: float = 0.2, + settle_delay: float = 0.4, +) -> dict[str, Any] | None: + """Poll ``tvchart:request-state`` until the chart reflects a mutation. + + Many chart mutations kick off multi-hop async chains in the frontend + (symbol-search -> datafeed-resolve -> data-request -> data-response -> destroy-recreate). + The chart entry is genuinely unavailable during the destroy-recreate + window and the frontend answers with ``{error: "not found"}`` that + ``_fetch_tvchart_state`` already turns into ``None``. + + ``settle_delay`` is a short initial wait BEFORE the first poll so + we don't race into the rebuild window before it's even started — + otherwise the first fetch can return the still-alive pre-mutation + state, matcher fails against an unchanged symbol, and we burn the + poll budget waiting for a rebuild that already finished. + """ + if settle_delay > 0: + time.sleep(settle_delay) + deadline = time.monotonic() + total_timeout + latest: dict[str, Any] | None = None + while True: + state = _fetch_tvchart_state(widget, timeout=max(0.5, poll_interval * 4)) + if state is not None: + latest = state + if matcher(state): + return state + if time.monotonic() >= deadline: + return latest + time.sleep(poll_interval) + + +def _minimal_confirm_state(state: dict[str, Any] | None) -> dict[str, Any]: + """Reduce a full state snapshot to fields safe for a mutation result. + + Confirmation results must not carry raw OHLCV bars, per-bar timestamps, + drawings, or visible-range data. Exposing any of those tempts the + model into paraphrasing them into the reply (e.g. "last close: $...", + which the model then rounds, reformats, or invents outright if the + field is sparse). Keep to identity fields only — the chart UI is + what the user reads for prices. + """ + if not isinstance(state, dict): + return {} + compares = state.get("compareSymbols") + indicators_in = state.get("indicators") or [] + indicators_out: list[dict[str, Any]] = [] + if isinstance(indicators_in, list): + for ind in indicators_in: + if not isinstance(ind, dict): + continue + indicators_out.append( + { + k: ind.get(k) + for k in ("seriesId", "name", "type", "period", "secondarySymbol") + if ind.get(k) is not None + } + ) + out = { + "symbol": state.get("symbol") or None, + "interval": state.get("interval") or None, + "chartType": state.get("chartType") or None, + } + if isinstance(compares, dict) and compares: + out["compareSymbols"] = {k: str(v) for k, v in compares.items()} + if indicators_out: + out["indicators"] = indicators_out + return {k: v for k, v in out.items() if v is not None} + + +def _emit_tvchart( + ctx: HandlerContext, + event_type: str, + payload: dict[str, Any], + *, + extras: dict[str, Any] | None = None, +) -> HandlerResult: + """Shared helper: resolve widget, emit event, return a uniform result.""" + widget_id = ctx.args.get("widget_id") + resolved_id, error = _resolve_widget_id(widget_id) + if error: + return error + widget = get_widget(resolved_id) + if not widget: + ids = list_widget_ids() + return { + "error": ( + f"Widget not found: {resolved_id}." + + ( + f" Registered widgets: {', '.join(ids)}." + if ids + else " No widgets are registered yet." + ) + ), + } + chart_id = ctx.args.get("chart_id") + merged = {k: v for k, v in (payload or {}).items() if v is not None} + if chart_id is not None: + merged["chartId"] = chart_id + widget.emit(event_type, merged) + result: HandlerResult = { + "widget_id": resolved_id, + "event_sent": True, + "event_type": event_type, + } + if extras: + result.update(extras) + return result + + +def _handle_tvchart_update_series(ctx: HandlerContext) -> HandlerResult: + return _emit_tvchart( + ctx, + "tvchart:update", + { + "bars": ctx.args.get("bars"), + "volume": ctx.args.get("volume"), + "seriesId": ctx.args.get("series_id"), + "fitContent": ctx.args.get("fit_content", True), + }, + ) + + +def _handle_tvchart_update_bar(ctx: HandlerContext) -> HandlerResult: + return _emit_tvchart( + ctx, + "tvchart:stream", + { + "bar": ctx.args.get("bar"), + "seriesId": ctx.args.get("series_id"), + }, + ) + + +def _handle_tvchart_add_series(ctx: HandlerContext) -> HandlerResult: + series_id = ctx.args["series_id"] + return _emit_tvchart( + ctx, + "tvchart:add-series", + { + "seriesId": series_id, + "bars": ctx.args.get("bars"), + "seriesType": ctx.args.get("series_type", "Line"), + "seriesOptions": ctx.args.get("series_options") or {}, + }, + extras={"series_id": series_id}, + ) + + +def _handle_tvchart_remove_series(ctx: HandlerContext) -> HandlerResult: + series_id = ctx.args["series_id"] + return _emit_tvchart( + ctx, + "tvchart:remove-series", + {"seriesId": series_id}, + extras={"series_id": series_id}, + ) + + +def _handle_tvchart_add_markers(ctx: HandlerContext) -> HandlerResult: + return _emit_tvchart( + ctx, + "tvchart:add-markers", + { + "markers": ctx.args.get("markers"), + "seriesId": ctx.args.get("series_id"), + }, + ) + + +def _handle_tvchart_add_price_line(ctx: HandlerContext) -> HandlerResult: + return _emit_tvchart( + ctx, + "tvchart:add-price-line", + { + "price": ctx.args.get("price"), + "color": ctx.args.get("color", "#2196F3"), + "lineWidth": ctx.args.get("line_width", 1), + "title": ctx.args.get("title", ""), + "seriesId": ctx.args.get("series_id"), + }, + ) + + +def _handle_tvchart_apply_options(ctx: HandlerContext) -> HandlerResult: + return _emit_tvchart( + ctx, + "tvchart:apply-options", + { + "chartOptions": ctx.args.get("chart_options"), + "seriesOptions": ctx.args.get("series_options"), + "seriesId": ctx.args.get("series_id"), + }, + ) + + +def _handle_tvchart_add_indicator(ctx: HandlerContext) -> HandlerResult: + return _emit_tvchart( + ctx, + "tvchart:add-indicator", + { + "name": ctx.args.get("name"), + "period": ctx.args.get("period"), + "color": ctx.args.get("color"), + "source": ctx.args.get("source"), + "method": ctx.args.get("method"), + "multiplier": ctx.args.get("multiplier"), + "maType": ctx.args.get("ma_type"), + "offset": ctx.args.get("offset"), + }, + ) + + +def _handle_tvchart_remove_indicator(ctx: HandlerContext) -> HandlerResult: + series_id = ctx.args["series_id"] + return _emit_tvchart( + ctx, + "tvchart:remove-indicator", + {"seriesId": series_id}, + extras={"series_id": series_id}, + ) + + +def _handle_tvchart_list_indicators(ctx: HandlerContext) -> HandlerResult: + widget_id = ctx.args.get("widget_id") + widget, error = _get_widget_or_error(widget_id) + if error: + return error + assert widget is not None + payload: dict[str, Any] = {} + chart_id = ctx.args.get("chart_id") + if chart_id is not None: + payload["chartId"] = chart_id + response = request_response( + widget, + "tvchart:list-indicators", + "tvchart:list-indicators-response", + payload, + timeout=float(ctx.args.get("timeout", 5.0)), + ) + if response is None: + return {"widget_id": widget_id, "error": "Indicator listing timed out"} + return { + "widget_id": widget_id, + "indicators": response.get("indicators", []), + "chartId": response.get("chartId"), + } + + +def _handle_tvchart_show_indicators(ctx: HandlerContext) -> HandlerResult: + return _emit_tvchart(ctx, "tvchart:show-indicators", {}) + + +def _handle_tvchart_symbol_search(ctx: HandlerContext) -> HandlerResult: + widget_id = ctx.args.get("widget_id") + resolved_id, error = _resolve_widget_id(widget_id) + if error: + return error + widget = get_widget(resolved_id) + if not widget: + return {"error": f"Widget not found: {resolved_id}."} + + query = ctx.args.get("query") + auto_select = ctx.args.get("auto_select", True) + payload: dict[str, Any] = {"query": query, "autoSelect": auto_select} + chart_id = ctx.args.get("chart_id") + if chart_id is not None: + payload["chartId"] = chart_id + symbol_type = ctx.args.get("symbol_type") + if symbol_type: + payload["symbolType"] = symbol_type + exchange = ctx.args.get("exchange") + if exchange: + payload["exchange"] = exchange + # Capture the pre-emit symbol so we can tell whether the chart + # changed at all — even a fuzzy search ("microsoft" -> "MSFT") is a + # successful change, not a failure, and the note below must reflect + # that rather than complaining the literal query wasn't found. Only + # worth fetching when we're actually going to auto-commit a query. + will_confirm = bool(query) and bool(auto_select) + pre_symbol = "" + if will_confirm: + pre_state = _fetch_tvchart_state(widget, timeout=0.6) or {} + pre_symbol = str(pre_state.get("symbol") or "").upper() + payload = {k: v for k, v in payload.items() if v is not None} + widget.emit("tvchart:symbol-search", payload) + + result: HandlerResult = { + "widget_id": resolved_id, + "event_sent": True, + "event_type": "tvchart:symbol-search", + } + if not will_confirm: + # Just opened the dialog for the user — no mutation to confirm. + return result + + target = str(query).upper() + target_bare = target.split(":")[-1].strip() if ":" in target else target + + def _matches(state: dict[str, Any]) -> bool: + current = str(state.get("symbol") or "").upper() + if not current: + return False + # Exact / bare-ticker match — or any change away from the + # pre-emit symbol. The latter covers fuzzy searches like + # "microsoft" -> "MSFT" where the query is a company name + # rather than a ticker; the chart still genuinely committed + # the user's intent and the tool result should reflect that. + if current in (target, target_bare): + return True + return bool(pre_symbol) and current != pre_symbol + + # Block until the frontend emits tvchart:data-settled for the main + # series — that fires AFTER the destroy-recreate and all post- + # mutation work (legend refresh, indicator re-add) has completed. + state = _wait_for_data_settled(widget, _matches) + if state is not None: + result["confirmed"] = True + # Identity fields only — no bars/raw data (the agent would + # paraphrase them into fabricated "last close: $..." text). + result.update(_minimal_confirm_state(state)) + else: + result["confirmed"] = False + result["reason"] = ( + f"Search for '{query}' did not land on the chart within the " + "timeout. No matching symbol was found or the chart is still " + "loading data." + ) + return result + + +def _build_compare_payload(ctx: HandlerContext) -> dict[str, Any]: + """Assemble the ``tvchart:compare`` event payload from handler args.""" + payload: dict[str, Any] = {} + query = ctx.args.get("query") + if query: + payload["query"] = query + payload["autoAdd"] = ctx.args.get("auto_add", True) + for src, dst in ( + ("chart_id", "chartId"), + ("symbol_type", "symbolType"), + ("exchange", "exchange"), + ): + value = ctx.args.get(src) + if value is not None and value != "": + payload[dst] = value + return payload + + +def _snapshot_compare_set(widget: Any) -> set[str]: + """Return the upper-cased tickers currently in ``state.compareSymbols``.""" + state = _fetch_tvchart_state(widget, timeout=0.6) or {} + compares = state.get("compareSymbols") or {} + if not isinstance(compares, dict): + return set() + return {str(s).upper() for s in compares.values()} + + +def _handle_tvchart_compare(ctx: HandlerContext) -> HandlerResult: + widget_id = ctx.args.get("widget_id") + resolved_id, error = _resolve_widget_id(widget_id) + if error: + return error + widget = get_widget(resolved_id) + if not widget: + return {"error": f"Widget not found: {resolved_id}."} + + payload = _build_compare_payload(ctx) + query = ctx.args.get("query") + auto_add = ctx.args.get("auto_add", True) + + # Snapshot existing compares so fuzzy adds ("microsoft" → "MSFT") + # register as success. Only needed when we're actually going to + # confirm a mutation. + will_confirm = bool(query) and bool(auto_add) + pre_compare_set = _snapshot_compare_set(widget) if will_confirm else set() + + widget.emit("tvchart:compare", payload) + + result: HandlerResult = { + "widget_id": resolved_id, + "event_sent": True, + "event_type": "tvchart:compare", + } + if not will_confirm: + # Just opened the dialog for the user — no mutation to confirm. + return result + + target = str(query).upper() + target_bare = target.split(":")[-1].strip() if ":" in target else target + + accepted_tickers = {target, target_bare} + + def _matches(state: dict[str, Any]) -> bool: + compares = state.get("compareSymbols") or {} + if not isinstance(compares, dict): + return False + current_set = {str(s).upper() for s in compares.values()} + # Exact or bare-ticker match on the newly-added compare. + if any(sym in accepted_tickers for sym in current_set): + return True + # Fuzzy match: any new compare that wasn't there before counts + # — "microsoft" committing as "MSFT" is still success. + return bool(current_set - pre_compare_set) + + # Block until the frontend emits tvchart:data-settled with the new + # compare in state — that fires AFTER the compare series is added + # and all post-mutation work has completed. Compare chains search + # → resolve → data-request → response → series add, so give it a + # generous window. + state = _wait_for_data_settled(widget, _matches, timeout=12.0) + if state is not None: + result["confirmed"] = True + result.update(_minimal_confirm_state(state)) + else: + result["confirmed"] = False + result["reason"] = ( + f"Compare symbol '{target}' did not land on the chart within the " + "timeout. No matching symbol was found or data is still loading." + ) + return result + + +def _handle_tvchart_change_interval(ctx: HandlerContext) -> HandlerResult: + widget_id = ctx.args.get("widget_id") + resolved_id, error = _resolve_widget_id(widget_id) + if error: + return error + widget = get_widget(resolved_id) + if not widget: + return {"error": f"Widget not found: {resolved_id}."} + + value = ctx.args.get("value") + payload: dict[str, Any] = {"value": value} + chart_id = ctx.args.get("chart_id") + if chart_id is not None: + payload["chartId"] = chart_id + payload = {k: v for k, v in payload.items() if v is not None} + widget.emit("tvchart:interval-change", payload) + + result: HandlerResult = { + "widget_id": resolved_id, + "event_sent": True, + "event_type": "tvchart:interval-change", + } + if not value: + return result + + target = str(value).strip() + + def _matches(state: dict[str, Any]) -> bool: + current = str(state.get("interval") or "").strip() + if not current: + return False + + # Frontend may report "1D" where caller asked "D"; normalise both + # to a canonical comparison (strip leading "1" for a lone digit). + def _norm(s: str) -> str: + s = s.upper() + return s[1:] if s.startswith("1") and len(s) > 1 else s + + return _norm(current) == _norm(target) + + # Block until the frontend emits tvchart:data-settled reflecting + # the new interval — that fires AFTER the destroy-recreate and all + # post-mutation work has completed. + state = _wait_for_data_settled(widget, _matches) + if state is not None: + result["confirmed"] = True + result.update(_minimal_confirm_state(state)) + else: + result["confirmed"] = False + result["reason"] = f"Interval did not change to '{target}' within the timeout." + return result + + +def _handle_tvchart_set_visible_range(ctx: HandlerContext) -> HandlerResult: + return _emit_zoom_and_confirm( + ctx, + "tvchart:time-scale", + { + "visibleRange": { + "from": ctx.args.get("from_time"), + "to": ctx.args.get("to_time"), + }, + }, + ) + + +def _handle_tvchart_fit_content(ctx: HandlerContext) -> HandlerResult: + return _emit_zoom_and_confirm(ctx, "tvchart:time-scale", {"fitContent": True}) + + +def _handle_tvchart_time_range(ctx: HandlerContext) -> HandlerResult: + return _emit_zoom_and_confirm( + ctx, + "tvchart:time-range", + {"value": ctx.args.get("value")}, + ) + + +def _emit_zoom_and_confirm( + ctx: HandlerContext, + event_type: str, + payload: dict[str, Any], +) -> HandlerResult: + """Emit a zoom/range mutation and wait for the frontend's confirmation. + + The frontend emits ``tvchart:data-settled`` synchronously after + applying the timeScale/range call — that's the + confirm-operation-complete signal. + + No state polling: register the listener, emit the event, block on + ``threading.Event`` until the settled event fires (or timeout), + return the payload the frontend sent. If the event never fires + (frontend dropped it because the value was invalid, the chart was + mid-rebuild, etc.), we report ``confirmed: false`` rather than + silently claiming success. + """ + widget_id = ctx.args.get("widget_id") + resolved_id, error = _resolve_widget_id(widget_id) + if error: + return error + widget = get_widget(resolved_id) + if not widget: + return {"error": f"Widget not found: {resolved_id}."} + + merged = {k: v for k, v in payload.items() if v is not None} + chart_id = ctx.args.get("chart_id") + if chart_id is not None: + merged["chartId"] = chart_id + widget.emit(event_type, merged) + + # Accept any settled event — the frontend emits one + # synchronously right after applying the zoom/range, so the + # first event on the bus IS the confirmation for this mutation. + state = _wait_for_data_settled(widget, lambda _s: True, timeout=4.0) + result: HandlerResult = { + "widget_id": resolved_id, + "event_sent": True, + "event_type": event_type, + } + if state is not None: + result["confirmed"] = True + result.update(_minimal_confirm_state(state)) + new_range = state.get("visibleRange") or state.get("visibleLogicalRange") + if new_range: + result["visibleRange"] = new_range + else: + result["confirmed"] = False + result["reason"] = ( + "Zoom/range change did not land on the chart within the " + "timeout — verify the ``value`` argument matches one of " + "the accepted presets (1D, 1W, 1M, 3M, 6M, 1Y, 5Y, YTD)." + ) + return result + + +def _handle_tvchart_time_range_picker(ctx: HandlerContext) -> HandlerResult: + return _emit_tvchart(ctx, "tvchart:time-range-picker", {}) + + +def _handle_tvchart_log_scale(ctx: HandlerContext) -> HandlerResult: + return _emit_tvchart( + ctx, + "tvchart:log-scale", + {"value": bool(ctx.args.get("value"))}, + ) + + +def _handle_tvchart_auto_scale(ctx: HandlerContext) -> HandlerResult: + return _emit_tvchart( + ctx, + "tvchart:auto-scale", + {"value": bool(ctx.args.get("value"))}, + ) + + +def _handle_tvchart_chart_type(ctx: HandlerContext) -> HandlerResult: + return _emit_tvchart( + ctx, + "tvchart:chart-type-change", + { + "value": ctx.args.get("value"), + "seriesId": ctx.args.get("series_id"), + }, + ) + + +def _handle_tvchart_drawing_tool(ctx: HandlerContext) -> HandlerResult: + mode = str(ctx.args.get("mode", "")).lower() + event_map = { + "cursor": "tvchart:tool-cursor", + "crosshair": "tvchart:tool-crosshair", + "magnet": "tvchart:tool-magnet", + "eraser": "tvchart:tool-eraser", + "visibility": "tvchart:tool-visibility", + "lock": "tvchart:tool-lock", + } + event_type = event_map.get(mode) + if event_type is None: + return {"error": f"Unknown drawing tool mode: {mode}"} + return _emit_tvchart(ctx, event_type, {}) + + +def _handle_tvchart_undo(ctx: HandlerContext) -> HandlerResult: + return _emit_tvchart(ctx, "tvchart:undo", {}) + + +def _handle_tvchart_redo(ctx: HandlerContext) -> HandlerResult: + return _emit_tvchart(ctx, "tvchart:redo", {}) + + +def _handle_tvchart_show_settings(ctx: HandlerContext) -> HandlerResult: + return _emit_tvchart(ctx, "tvchart:show-settings", {}) + + +def _handle_tvchart_toggle_dark_mode(ctx: HandlerContext) -> HandlerResult: + return _emit_tvchart( + ctx, + "tvchart:toggle-dark-mode", + {"value": bool(ctx.args.get("value"))}, + ) + + +def _handle_tvchart_screenshot(ctx: HandlerContext) -> HandlerResult: + return _emit_tvchart(ctx, "tvchart:screenshot", {}) + + +def _handle_tvchart_fullscreen(ctx: HandlerContext) -> HandlerResult: + return _emit_tvchart(ctx, "tvchart:fullscreen", {}) + + +def _handle_tvchart_save_layout(ctx: HandlerContext) -> HandlerResult: + return _emit_tvchart( + ctx, + "tvchart:save-layout", + {"name": ctx.args.get("name")}, + ) + + +def _handle_tvchart_open_layout(ctx: HandlerContext) -> HandlerResult: + return _emit_tvchart(ctx, "tvchart:open-layout", {}) + + +def _handle_tvchart_save_state(ctx: HandlerContext) -> HandlerResult: + widget_id = ctx.args.get("widget_id") + widget, error = _get_widget_or_error(widget_id) + if error: + return error + assert widget is not None + widget.emit("tvchart:save-state", {}) + return {"widget_id": widget_id, "event_sent": True, "event_type": "tvchart:save-state"} + + +def _handle_tvchart_request_state(ctx: HandlerContext) -> HandlerResult: + widget_id = ctx.args.get("widget_id") + widget, error = _get_widget_or_error(widget_id) + if error: + return error + assert widget is not None + payload: dict[str, Any] = {} + chart_id = ctx.args.get("chart_id") + if chart_id is not None: + payload["chartId"] = chart_id + response = request_response( + widget, + "tvchart:request-state", + "tvchart:state-response", + payload, + timeout=float(ctx.args.get("timeout", 5.0)), + ) + if response is None: + return {"widget_id": widget_id, "error": "State request timed out"} + # Strip the correlation token before returning. + response.pop("context", None) + return {"widget_id": widget_id, "state": response} + + def _handle_set_content(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args["widget_id"] + widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) if error: return error @@ -399,7 +1237,7 @@ def _handle_set_content(ctx: HandlerContext) -> HandlerResult: def _handle_set_style(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args["widget_id"] + widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) if error: return error @@ -413,7 +1251,7 @@ def _handle_set_style(ctx: HandlerContext) -> HandlerResult: def _handle_show_toast(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args["widget_id"] + widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) if error: return error @@ -431,7 +1269,7 @@ def _handle_show_toast(ctx: HandlerContext) -> HandlerResult: def _handle_update_theme(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args["widget_id"] + widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) if error: return error @@ -442,7 +1280,7 @@ def _handle_update_theme(ctx: HandlerContext) -> HandlerResult: def _handle_inject_css(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args["widget_id"] + widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) if error: return error @@ -459,7 +1297,7 @@ def _handle_inject_css(ctx: HandlerContext) -> HandlerResult: def _handle_remove_css(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args["widget_id"] + widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) if error: return error @@ -470,7 +1308,7 @@ def _handle_remove_css(ctx: HandlerContext) -> HandlerResult: def _handle_navigate(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args["widget_id"] + widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) if error: return error @@ -481,7 +1319,7 @@ def _handle_navigate(ctx: HandlerContext) -> HandlerResult: def _handle_download(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args["widget_id"] + widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) if error: return error @@ -499,7 +1337,7 @@ def _handle_download(ctx: HandlerContext) -> HandlerResult: def _handle_update_plotly(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args["widget_id"] + widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) if error: return error @@ -521,7 +1359,7 @@ def _handle_update_plotly(ctx: HandlerContext) -> HandlerResult: def _handle_update_marquee(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args["widget_id"] + widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) if error: return error @@ -547,7 +1385,7 @@ def _handle_update_marquee(ctx: HandlerContext) -> HandlerResult: def _handle_update_ticker_item(ctx: HandlerContext) -> HandlerResult: from ..toolbar import TickerItem - widget_id = ctx.args["widget_id"] + widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) if error: return error @@ -572,17 +1410,31 @@ def _handle_update_ticker_item(ctx: HandlerContext) -> HandlerResult: def _handle_send_event(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args["widget_id"] - widget, error = _get_widget_or_error(widget_id) + event_type = ctx.args.get("event_type") + if not event_type: + return {"error": "event_type is required (e.g. 'tvchart:symbol-search')."} + widget_id = ctx.args.get("widget_id") + resolved_id, error = _resolve_widget_id(widget_id) if error: return error - assert widget is not None - - widget.emit(ctx.args["event_type"], ctx.args.get("data", {})) + widget = get_widget(resolved_id) + if not widget: + ids = list_widget_ids() + return { + "error": ( + f"Widget not found: {resolved_id}." + + ( + f" Registered widgets: {', '.join(ids)}." + if ids + else " No widgets are registered yet." + ) + ), + } + widget.emit(event_type, ctx.args.get("data") or {}) return { - "widget_id": widget_id, + "widget_id": resolved_id, "event_sent": True, - "event_type": ctx.args["event_type"], + "event_type": event_type, } @@ -600,7 +1452,7 @@ def _handle_list_widgets(ctx: HandlerContext) -> HandlerResult: def _handle_get_events(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args["widget_id"] + widget_id = ctx.args.get("widget_id") widget_events = ctx.events.get(widget_id, []) if ctx.args.get("clear", False): ctx.events[widget_id] = [] @@ -608,7 +1460,7 @@ def _handle_get_events(ctx: HandlerContext) -> HandlerResult: def _handle_destroy_widget(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args["widget_id"] + widget_id = ctx.args.get("widget_id") ctx.events.pop(widget_id, None) remove_widget(widget_id) if ctx.headless: @@ -644,7 +1496,7 @@ def _handle_get_component_source(ctx: HandlerContext) -> HandlerResult: def _handle_export_widget(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args["widget_id"] + widget_id = ctx.args.get("widget_id") code = export_widget_code(widget_id) if not code: return {"error": f"Widget not found or no config stored: {widget_id}"} @@ -799,7 +1651,7 @@ def _handle_create_chat_widget(ctx: HandlerContext) -> HandlerResult: def _handle_chat_send_message(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args["widget_id"] + widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) if error: return error @@ -843,7 +1695,7 @@ def _handle_chat_send_message(ctx: HandlerContext) -> HandlerResult: def _handle_chat_stop_generation(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args["widget_id"] + widget_id = ctx.args.get("widget_id") thread_id = ctx.args.get("thread_id") widget_gens = _active_generations.get(widget_id, {}) @@ -881,7 +1733,7 @@ def _handle_chat_stop_generation(ctx: HandlerContext) -> HandlerResult: def _handle_chat_manage_thread(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args["widget_id"] + widget_id = ctx.args.get("widget_id") action = ctx.args["action"] thread_id = ctx.args.get("thread_id") title = ctx.args.get("title", "New Chat") @@ -969,7 +1821,7 @@ def _thread_list( def _handle_chat_register_command(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args["widget_id"] + widget_id = ctx.args.get("widget_id") name = ctx.args["name"] description = ctx.args.get("description", "") @@ -993,7 +1845,7 @@ def _handle_chat_register_command(ctx: HandlerContext) -> HandlerResult: def _handle_chat_get_history(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args["widget_id"] + widget_id = ctx.args.get("widget_id") thread_id = ctx.args.get("thread_id") limit = ctx.args.get("limit", 50) before_id = ctx.args.get("before_id") @@ -1023,7 +1875,7 @@ def _handle_chat_get_history(ctx: HandlerContext) -> HandlerResult: def _handle_chat_update_settings(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args["widget_id"] + widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) if error: return error @@ -1041,7 +1893,7 @@ def _handle_chat_update_settings(ctx: HandlerContext) -> HandlerResult: def _handle_chat_set_typing(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args["widget_id"] + widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) if error: return error @@ -1068,6 +1920,39 @@ def _handle_chat_set_typing(ctx: HandlerContext) -> HandlerResult: "show_plotly": _handle_show_plotly, "show_dataframe": _handle_show_dataframe, "show_tvchart": _handle_show_tvchart, + # TVChart — first-class tools for every chart operation + "tvchart_update_series": _handle_tvchart_update_series, + "tvchart_update_bar": _handle_tvchart_update_bar, + "tvchart_add_series": _handle_tvchart_add_series, + "tvchart_remove_series": _handle_tvchart_remove_series, + "tvchart_add_markers": _handle_tvchart_add_markers, + "tvchart_add_price_line": _handle_tvchart_add_price_line, + "tvchart_apply_options": _handle_tvchart_apply_options, + "tvchart_add_indicator": _handle_tvchart_add_indicator, + "tvchart_remove_indicator": _handle_tvchart_remove_indicator, + "tvchart_list_indicators": _handle_tvchart_list_indicators, + "tvchart_show_indicators": _handle_tvchart_show_indicators, + "tvchart_symbol_search": _handle_tvchart_symbol_search, + "tvchart_compare": _handle_tvchart_compare, + "tvchart_change_interval": _handle_tvchart_change_interval, + "tvchart_set_visible_range": _handle_tvchart_set_visible_range, + "tvchart_fit_content": _handle_tvchart_fit_content, + "tvchart_time_range": _handle_tvchart_time_range, + "tvchart_time_range_picker": _handle_tvchart_time_range_picker, + "tvchart_log_scale": _handle_tvchart_log_scale, + "tvchart_auto_scale": _handle_tvchart_auto_scale, + "tvchart_chart_type": _handle_tvchart_chart_type, + "tvchart_drawing_tool": _handle_tvchart_drawing_tool, + "tvchart_undo": _handle_tvchart_undo, + "tvchart_redo": _handle_tvchart_redo, + "tvchart_show_settings": _handle_tvchart_show_settings, + "tvchart_toggle_dark_mode": _handle_tvchart_toggle_dark_mode, + "tvchart_screenshot": _handle_tvchart_screenshot, + "tvchart_fullscreen": _handle_tvchart_fullscreen, + "tvchart_save_layout": _handle_tvchart_save_layout, + "tvchart_open_layout": _handle_tvchart_open_layout, + "tvchart_save_state": _handle_tvchart_save_state, + "tvchart_request_state": _handle_tvchart_request_state, # Widget Manipulation "set_content": _handle_set_content, "set_style": _handle_set_style, @@ -1105,6 +1990,37 @@ def _handle_chat_set_typing(ctx: HandlerContext) -> HandlerResult: # ============================================================================= # Main Entry Point # ============================================================================= +def _check_required_args(name: str, args: dict[str, Any]) -> str | None: + """Return an error for any schema-required args the caller omitted. + + The per-tool ``inputSchema.required`` list is the canonical source. + Without this gate a handler would silently emit an event with + ``None`` values (e.g. ``tvchart_change_interval`` with no ``value`` + still fires ``tvchart:interval-change`` with an empty payload; the + frontend drops it and the agent sees ``event_sent: true`` and + assumes the chart changed). ``widget_id`` is deliberately excluded + here — ``_resolve_widget_id`` auto-fills it from the sole registered + widget on single-widget servers. + """ + from .tools import get_tools + + for tool in get_tools(): + if tool.name != name: + continue + required = tool.inputSchema.get("required", []) or [] + missing = [ + p for p in required if p != "widget_id" and (args.get(p) is None or args.get(p) == "") + ] + if missing: + return ( + f"Missing required argument(s) for {name}: " + f"{', '.join(missing)}. Re-invoke the tool with all " + "required fields populated." + ) + return None + return None + + async def handle_tool( name: str, args: dict[str, Any], @@ -1132,6 +2048,10 @@ async def handle_tool( headless = os.environ.get("PYWRY_HEADLESS", "0") == "1" ctx = HandlerContext(args, events, make_callback, headless) + error_msg = _check_required_args(name, args) + if error_msg: + return {"error": error_msg} + handler = _HANDLERS.get(name) if handler: return handler(ctx) diff --git a/pywry/pywry/mcp/server.py b/pywry/pywry/mcp/server.py index 77c71cd..bbca862 100644 --- a/pywry/pywry/mcp/server.py +++ b/pywry/pywry/mcp/server.py @@ -83,18 +83,23 @@ def callback(data: Any, event_type: str, label: str = "") -> None: def _create_tool_function( tool_name: str, schema: dict[str, Any], handle_tool: Any, events: EventsDict ) -> Callable[..., Any]: - """Dynamically create a function with the right signature for the tool schema.""" + """Dynamically create a function with the right signature for the tool schema. + + Every JSON-schema property becomes a keyword parameter with a + ``=None`` default. The server auto-resolves missing arguments + from registered state (e.g. filling ``widget_id`` from the sole + registered widget), so a model that forgets to pass ``widget_id`` + on a single-widget server still gets a successful call instead + of a validation error the user has to recover from manually. + + The hand-written JSON schema's ``required`` array is still used + as documentation — it appears in FastMCP's tool description so + callers know which arguments matter — but enforcement happens + in the handler where we have the registry context. + """ properties = schema.get("properties", {}) - required = set(schema.get("required", [])) - - # Build function parameters - params = [] - for prop_name in properties: - if prop_name in required: - params.append(f"{prop_name}=None") # Will be validated by MCP - else: - params.append(f"{prop_name}=None") + params = [f"{p}=None" for p in properties] params_str = ", ".join(params) if params else "" # Build the function code diff --git a/pywry/pywry/mcp/skills/__init__.py b/pywry/pywry/mcp/skills/__init__.py index 89140d6..4b9316d 100644 --- a/pywry/pywry/mcp/skills/__init__.py +++ b/pywry/pywry/mcp/skills/__init__.py @@ -5,14 +5,23 @@ Available Skills ---------------- +- component_reference: Authoritative reference for every widget/event signature +- interactive_buttons: Auto-wired button callback patterns +- autonomous_building: End-to-end autonomous widget building - native: Desktop window via PyWry/WRY/Tauri (Rust WebView) - jupyter: Inline widgets in Jupyter notebook cells (iframe in cell output) - iframe: Embedded widgets in external web pages - deploy: Production multi-user SSE server +- authentication: OAuth2 / OIDC sign-in and RBAC for PyWry apps - css_selectors: Targeting elements for updates - styling: Theme variables and CSS customization - data_visualization: Charts, tables, live data patterns - forms_and_inputs: User input collection and validation +- modals: Overlay dialogs (settings, confirmations, forms) +- chat: Creating chat widgets (widget-builder perspective) +- chat_agent: Operating inside a chat widget (agent perspective) +- tvchart: Driving a TradingView chart via MCP tools (agent perspective) +- events: PyWry event bus, request/response round-trips, tool-result flow """ from __future__ import annotations @@ -54,6 +63,10 @@ "name": "Production Deploy Mode", "description": "Multi-user SSE server for production deployments", }, + "authentication": { + "name": "Authentication & OAuth2", + "description": "Add OAuth2 / OIDC sign-in (Google, GitHub, Microsoft, custom) and RBAC to PyWry apps", + }, "css_selectors": { "name": "CSS Selectors", "description": "Targeting elements with selectors for set_content/set_style", @@ -78,6 +91,18 @@ "name": "Chat Component", "description": "Conversational chat widget with streaming, threads, slash commands, stop-generation, and LLM provider integration", }, + "chat_agent": { + "name": "Chat Agent Operating Manual", + "description": "How an agent operates INSIDE a running chat widget: reading @-context attachments, widget_id routing, tool-result cards, edit/resend flow, reply style", + }, + "tvchart": { + "name": "TradingView Chart — Agent Reference", + "description": "Drive a live tvchart widget through MCP: symbol/interval/chart-type, indicators (including compare-derivative Spread/Ratio/Sum/Product/Correlation), markers, price lines, compares, drawings, layouts, state reads", + }, + "events": { + "name": "PyWry Event System", + "description": "Namespaced events, widget_id vs componentId, request/response correlation via context token, how mutating tools poll state, get_events capture buffer", + }, } diff --git a/pywry/pywry/mcp/skills/chat_agent/SKILL.md b/pywry/pywry/mcp/skills/chat_agent/SKILL.md new file mode 100644 index 0000000..39fe6a9 --- /dev/null +++ b/pywry/pywry/mcp/skills/chat_agent/SKILL.md @@ -0,0 +1,189 @@ +--- +description: How an agent operates inside a PyWry chat widget — reading user messages, attachments, @-context, tool-call result cards, edit/resend, settings changes. +--- + +# Chat — Agent Operating Manual + +> **You are running INSIDE a PyWry chat widget.** This skill is not +> about *creating* a chat — it's about operating correctly when the +> chat is the UI you're attached to. + +## Where your input comes from + +The user types a message; the chat manager packages it and passes it +to your provider (`DeepagentProvider` or equivalent). You receive: + +- **text** — the user's literal message +- **attachments** — any `@` context the user inlined, expanded + into a block prepended to the message +- **thread history** — the running conversation stored against a + `session_id` / `thread_id` keyed checkpointer + +Your reply is streamed token-by-token into the UI. Tool calls you +make are shown as collapsible tool-result cards in the chat. + +## The `@` attachment format + +When the user types `@chart` (or any other registered context +source), the chat manager prepends a block to the message like: + +``` +--- Attached: chart --- +widget_id: chart +<...any additional component context...> +--- End Attached --- + + +``` + +The first line after the marker is ALWAYS `widget_id: ` for +widget attachments. Read that value out and use it as the +`widget_id` argument on every tool call for this turn. Never +guess — the attachment is the source of truth. + +If the user references a widget without attaching it, either: + +1. Call `list_widgets()` to look it up by name. +2. Ask the user to attach it (`"Type @chart so I know which widget + you mean."`). + +Do NOT invent a widget_id. + +## Auto-attached context sources + +Some examples register context sources that get auto-attached to +every user message. In that case you'll see the `--- Attached ---` +block even when the user didn't explicitly type `@`. Treat +it the same way — read `widget_id` and use it. + +## Tool-call result cards + +Every tool call you make is rendered in the chat as a card showing: + +- Tool name (e.g. `tvchart_symbol_search`) +- Status — spinner while running, ✓ on success, ✗ on failure +- Collapsible payload: arguments in, result out + +The user sees this UI. That means: + +- **Don't repeat tool output as prose.** If the tool returned the + new symbol, saying "I called tvchart_symbol_search with query=MSFT + and it returned MSFT" is noise — the card already shows it. + Short confirmation ("Switched to MSFT.") is enough. +- **Don't fabricate pseudo-tool output in prose.** Never write + markdown like "Updated Chart State: { symbol: ..., lastUpdated: + ... }" — the user will read it as if it came from a tool, and it + didn't. Call the tool. + +## Settings changes + +The chat panel has a settings menu. When the user changes a setting +(model, temperature, etc.), your provider's `on_settings_change` +callback fires. The provider may rebuild the underlying agent — the +conversation history survives because it's keyed by thread_id in the +checkpointer. + +As the agent, you don't invoke settings changes yourself; the UI +does. Just continue the conversation across the rebuild. + +## Edit and resend + +The user can click "Edit" on their own prior message to rewrite it, +or "Resend" to re-fire a prior message with the current state. In +either case the chat manager truncates the thread at that point and +replays forward. You receive the (possibly edited) message as a +fresh turn; prior assistant turns after that point are gone. + +## Multi-step work — ALWAYS use `write_todos` + +If the user's message asks for two or more distinct actions (e.g. +"switch to MSFT and go weekly", "add a 50 SMA and a 200 SMA"), +follow this flow: + +1. Call `write_todos` with one entry per action, all in `pending` + status. This renders as a plan card above the chat input. + +2. For each step in order, issue BOTH tool calls in the SAME + model response (parallel tool calls on one assistant message): + - the tool for the step, AND + - `write_todos` with that step flipped to `completed`, every + prior step kept `completed`, every remaining step kept + `pending`. + + Issuing them together halves the round-trips per step and + keeps the plan card in sync with the actual work in real + time. Do NOT split them across two turns. + +3. After the last step's parallel `tool + write_todos` response + has returned, reply with ONE sentence summarising the final + state. + +You MUST complete every step in the SAME turn. Do not stop after +the first tool call. Do not emit a summary reply before every +`pending` step is `completed`. + +### Error handling — FAIL FAST + +If a tool returns `confirmed: false` or an `error`, STOP THE PLAN. +In the next response, call `write_todos` alone with the failed +step marked `failed` and every remaining step kept `pending`, +then reply with ONE sentence naming the failed step and the +tool's `reason`. Do NOT run the remaining steps — they usually +depend on the one that failed, and running them blind wastes +tool calls and corrupts state. + +Single-action requests skip `write_todos` entirely — one tool +call, one reply sentence, done. + +## Reply style — terse, direct, no ceremony + +These rules are load-bearing. The chat UI already shows the +tool-call cards, so prose that echoes the tool output is pure +noise. + +- **One or two sentences.** Report what happened. "Added SPY as + a compare series." "Switched to MSFT on the weekly." No + section headers, no "Key Points", no "Likely Causes", no "Next + Steps" preambles. +- **Call tools through the protocol, never as text.** Writing + `tvchart_request_state(widget_id="chart")` in your reply is a + hallucinated tool call — it does nothing. If you want to call a + tool, invoke it. +- **No A/B/C multi-choice prompts.** If you genuinely need input, + ask one plain-English question. If a retry is obvious, retry — + don't ask permission. +- **Don't restate tool arguments back to the user.** The card + shows them. Saying "Widget ID: chart (matches your attachment)" + is filler. +- **Don't speculate about failure modes.** If a mutation tool + returned a `note`, relay it in one sentence. Don't paste a + troubleshooting guide. Don't spin three hypotheses. +- **No pseudo-JSON blocks, no tables, no "Response Format: choose + one" footers.** Plain sentences. +- **Numbers and state only from actual tool returns in this + turn.** No recall from memory, no fabricated `lastUpdated` + timestamps, no invented error codes. +- **Relay `note` fields literally**, but one sentence — never a + paragraph of interpretation. + +## Thread and session lifecycle + +The provider threads conversation history through a LangGraph +checkpointer. Each chat session has a `thread_id`; messages are +appended; you can recall prior messages by reading the state. You +don't need to manage this — just reply to the current turn. + +When the user clicks "Clear History" (a standard settings action), +the thread is truncated. Don't reference content from before the +truncation — you won't have it. + +## Don'ts + +- Don't invent `widget_id` values. +- Don't summarise tool output as prose when the UI already shows + the card. +- Don't produce pseudo-JSON "state" blocks in replies. +- Don't reply with "Tool Call: tvchart_symbol_search(...)" as text + — invoke it through the tool-calling protocol. +- Don't assume settings-change means start over — the thread + persists. diff --git a/pywry/pywry/mcp/skills/events/SKILL.md b/pywry/pywry/mcp/skills/events/SKILL.md new file mode 100644 index 0000000..8d9f655 --- /dev/null +++ b/pywry/pywry/mcp/skills/events/SKILL.md @@ -0,0 +1,151 @@ +--- +description: The PyWry event system — namespaced events, request/response round-trips, widget IDs, component IDs, and how tool results flow back to the agent. +--- + +# PyWry Event System — Agent Reference + +> **The event bus is the plumbing underneath every MCP tool.** You +> rarely need to think about it — the typed tools wrap emit + wait + +> state-poll for you — but when you reach for `send_event` or +> interpret tool results, this is how it works. + +## Event names are namespaced + +Every event has the form `namespace:event-name`, e.g.: + +- `tvchart:symbol-search` — ask the chart to open symbol search +- `tvchart:state-response` — chart's reply with its current state +- `tvchart:data-request` — chart asks Python for bars +- `tvchart:data-response` — Python delivers bars +- `toolbar:request-state` — ask a toolbar component for its value +- `toolbar:state-response` — component's reply +- `chat:user-message` — user typed something +- `chat:ai-response` — model produced a token +- `pywry:update-theme` — dark/light mode change + +Never emit an event with a name that doesn't match `namespace:event-name` +— the framework rejects it. + +## Widget IDs vs component IDs + +**widget_id** — identifies the top-level PyWry widget (a chart, a grid, +a chat panel, a dashboard). Every MCP tool takes `widget_id` as an +argument because all events route to the widget first. + +**componentId** — identifies a child *inside* a widget (a specific +toolbar button, a marquee ticker slot, a chart pane). Component IDs +are scoped to their containing widget. + +When you call `send_event(widget_id, event_type, data)`, the +`widget_id` picks the target widget; anything identifying a specific +component goes in the `data` payload (typically as `data.componentId` +or `data.chartId`). + +## Request / response pattern + +Some events are fire-and-forget (e.g. `tvchart:symbol-search` — +"please do this"). Others are request/response round-trips where the +caller wants a reply (e.g. `tvchart:request-state` → `tvchart:state-response`). + +The framework correlates request/response with a `context` token: + +1. Emitter generates a random `context` token. +2. Emitter injects it into the request payload. +3. Listener sees the request, attaches the same `context` to its + response, and emits the response event. +4. Emitter sees the matching `context` on the response and wakes up. + +All of this is handled inside `request_response()` in +`pywry.mcp.state` — you never construct tokens yourself. Typed MCP +tools that need a reply (`tvchart_request_state`, +`tvchart_list_indicators`) use this under the hood and return the +stripped response (no `context` token) in their tool result. + +## How tool results reach the agent + +``` +Agent MCP Server PyWry Widget (JS) + │ │ │ + │ tool call ──────► │ │ + │ │ widget.emit() ──────► │ + │ │ │ (updates chart) + │ │ │ + │ │ ◄───── bridge.emit() │ + │ │ (state-response) │ + │ │ │ + │ ◄──── tool result │ │ + │ (includes state) │ │ +``` + +Mutating tools (`tvchart_symbol_search`, `tvchart_change_interval`) +poll `tvchart:request-state` after emitting the mutation, wait for the +chart to actually reflect the change, and return the real post-change +state in the tool result. The `state` field in the tool result +contains the SAME structure as a direct call to +`tvchart_request_state`. + +If the mutation didn't settle in time, the result contains a `note` +field explaining the discrepancy — relay the note to the user, do +not invent state. + +## Emitting events from tools — `send_event` + +Only reach for `send_event` when no typed MCP tool exists for the +target event. It's a raw passthrough with no state polling: + +``` +send_event(widget_id, event_type, data) + → { "widget_id": ..., "event_sent": true, "event_type": ... } +``` + +Example — apply a rare tvchart option with no typed wrapper: + +``` +send_event( + widget_id="chart", + event_type="tvchart:apply-options", + data={"chartOptions": {"timeScale": {"secondsVisible": False}}}, +) +``` + +The returned `event_sent: true` means the event was successfully +handed to the widget — it does NOT mean the JS handler ran +successfully. For confirmation, follow up with +`tvchart_request_state` to read the new state. + +## Event capture (`get_events`) + +Some events fire from the widget *to* Python (e.g. the user clicked a +bar, moved the crosshair). These are automatically captured into a +per-widget event buffer and can be retrieved with: + +``` +get_events(widget_id, event_types=[...], clear=True) + → { "events": [{ "event_type": ..., "data": ..., "label": ... }, ...] } +``` + +Default captured events for charts: + +- `tvchart:click` +- `tvchart:crosshair-move` +- `tvchart:visible-range-change` +- `tvchart:drawing-added` +- `tvchart:drawing-deleted` +- `tvchart:open-layout-request` +- `tvchart:interval-change` +- `tvchart:chart-type-change` + +Use `get_events` if the user asks "what did I just click" or "what +was the last drawing I added". + +## Don'ts + +- Do NOT synthesise event payloads. Only report event data the + framework actually handed you. +- Do NOT emit events whose name doesn't match `ns:name` — they're + rejected. +- Do NOT emit to a widget id that isn't registered — the tool will + return an error listing the registered widgets; correct and retry. +- Do NOT assume `event_sent: true` means the downstream JS succeeded. + When it matters, follow up with `tvchart_request_state` (or the + relevant state query) to confirm. diff --git a/pywry/pywry/mcp/skills/tvchart/SKILL.md b/pywry/pywry/mcp/skills/tvchart/SKILL.md new file mode 100644 index 0000000..193dd17 --- /dev/null +++ b/pywry/pywry/mcp/skills/tvchart/SKILL.md @@ -0,0 +1,244 @@ +--- +description: Drive a live TradingView Lightweight Charts widget end-to-end via PyWry MCP tools — symbol, interval, indicators, markers, price lines, layouts, state. +--- + +# TradingView Chart — Agent Reference + +> **Use this when an agent needs to read or mutate a live `tvchart` +> widget.** Every action is an MCP tool call on the PyWry FastMCP +> server — there are no local helpers, no side channels, no custom +> tools. Pick the typed tool that matches the user's intent, pass the +> required arguments, and quote the tool's return values in your +> reply. + +## Every tool takes `widget_id` + +`widget_id` identifies which chart to operate on. On a single-chart +server the framework auto-resolves it from the registry; on a +multi-chart server you must pass it explicitly. Read the value from +the user's `@` attachment (the chat prepends `--- Attached: + ---\nwidget_id: `) or call `list_widgets()` to enumerate. + +## Reading chart state — always via `tvchart_request_state` + +Never report symbol / interval / indicators / bars / last close from +memory. Call the tool, quote the return. + +``` +tvchart_request_state(widget_id) + → { + "widget_id": "chart", + "state": { + "symbol": "AAPL", + "interval": "1D", + "series": [{ "seriesId": "main", "bars": [...], ... }], + "indicators": [...], + "visibleRange": { "from": ..., "to": ... }, + "chartType": "Candles", + ... + } + } +``` + +When the user asks "what's on the chart", "what's the current price", +"what indicators are applied", call this and quote from `state`. + +## Mutating tools — all confirm the change + +Every mutation returns the real post-change state. The model never has +to guess whether the change took effect. If the mutation didn't land +within the settle window, the tool includes a `note` field — relay +it to the user. + +### Symbol change + +``` +tvchart_symbol_search(widget_id, query, auto_select=True, + symbol_type=None, exchange=None) + → { "widget_id": "chart", "symbol": "MSFT", "state": {...} } +``` + +Use this to switch the ticker. `auto_select=True` commits the +selection; `auto_select=False` just opens the search dialog for the +user. The tool polls chart state until the symbol actually changes +to the target (up to ~6s) so the return reflects reality. + +Pass `symbol_type` to narrow the datafeed search to a specific +security class — values come from the datafeed, typically `equity`, +`etf`, `index`, `mutualfund`, `future`, `cryptocurrency`, `currency`. +Use it whenever the user's query is ambiguous: `SPY` with +`symbol_type="etf"` resolves to the SPDR S&P 500 ETF instead of +picking a near-prefix equity like `SPYM`. `exchange` narrows to a +specific venue the same way. Both are case-insensitive; unknown +values are silently dropped rather than erroring. + +### Interval / timeframe + +``` +tvchart_change_interval(widget_id, value) + → { "widget_id": "chart", "interval": "1W", "state": {...} } +``` + +Valid values: `1m 3m 5m 15m 30m 45m 1h 2h 3h 4h 1d 1w 1M 3M 6M 12M`. +Tool confirms the change via state polling. + +### Indicators + +``` +tvchart_add_indicator(widget_id, name, period=..., color=..., ...) +tvchart_remove_indicator(widget_id, series_id) +tvchart_list_indicators(widget_id) +``` + +Supported names: `SMA`, `EMA`, `WMA`, `RSI`, `ATR`, `VWAP`, +`Bollinger Bands`, plus the rest of the built-in library. `period` +defaults to a sensible value per indicator; override when the user +asks. + +#### Compare-derivative indicators + +`Spread`, `Ratio`, `Sum`, `Product`, `Correlation` require a +**secondary series** — a second ticker to spread/ratio/etc. against +the main series. The flow is two steps: + +1. Call `tvchart_compare(widget_id, query="")` to add the + secondary ticker as a compare series and confirm it landed in + `state.compareSymbols`. +2. Call `tvchart_add_indicator(widget_id, name="Spread", ...)`. The + chart picks up the most recent compare series as the secondary + automatically; pass `source` / `method` / `multiplier` to tune. + +State reporting for these indicators: + +- `state.indicators[i].type` is `"spread"` / `"ratio"` / etc. +- `state.indicators[i].secondarySeriesId` — the compare seriesId. +- `state.indicators[i].secondarySymbol` — the ticker it resolves to + (this is what the user actually cares about when you describe the + indicator). +- `state.indicatorSourceSymbols` — the compare-series map restricted + to indicator inputs; these are NOT user-facing compares (they're + hidden from the Compare panel). Don't conflate with + `state.compareSymbols` when listing "what's compared on the chart". + +If the user asks "what's on the chart" for a chart with a Spread +against MSFT, quote it as `Spread(AAPL, MSFT)` using the indicator's +`secondarySymbol`, not the raw seriesId. + +### Chart type / rendering + +``` +tvchart_chart_type(widget_id, value) + # value ∈ { "Candles", "Line", "Heikin Ashi", "Bars", "Area" } + +tvchart_log_scale(widget_id, value) # true / false +tvchart_auto_scale(widget_id, value) +``` + +### Visible range / zoom + +``` +tvchart_set_visible_range(widget_id, from_time, to_time) + # times are Unix seconds + +tvchart_fit_content(widget_id) +tvchart_time_range(widget_id, value) # "1D", "5D", "1M", "6M", "YTD", "1Y", "5Y", "All" +tvchart_time_range_picker(widget_id) # opens custom picker UI +``` + +### Markers and price lines + +``` +tvchart_add_markers(widget_id, markers) + # markers = [{ time, position, color, shape, text }, ...] + # position: "aboveBar" | "belowBar" | "inBar" + # shape: "arrowUp" | "arrowDown" | "circle" | "square" + +tvchart_add_price_line(widget_id, price, title="", color="#2196F3", line_width=1) +``` + +Use markers for signals / events on specific bars. Use price lines +for support / resistance / targets (horizontal lines across the whole +chart). + +### Drawing tools + +``` +tvchart_drawing_tool(widget_id, tool) + # tool ∈ { "trendline", "horizontal", "rectangle", "brush", "eraser", "cursor", ... } +``` + +### History and layout + +``` +tvchart_undo(widget_id) +tvchart_redo(widget_id) +tvchart_save_layout(widget_id, name) +tvchart_open_layout(widget_id, name) +tvchart_save_state(widget_id) +``` + +### Misc UI + +``` +tvchart_show_indicators(widget_id) # open indicator panel +tvchart_show_settings(widget_id) +tvchart_screenshot(widget_id) +tvchart_fullscreen(widget_id) +tvchart_toggle_dark_mode(widget_id) +``` + +### Adding a compare overlay + +``` +tvchart_compare(widget_id, query, auto_add=True, + symbol_type=None, exchange=None) + → { "widget_id": "chart", "compareSymbols": { "compare-spy": "SPY" }, + "state": {...} } +``` + +`query` is the ticker to add. Pass `symbol_type` to disambiguate: +`SPY` without it may resolve to `SPYM` (a near-prefix equity); +`symbol_type="etf"` routes it to the SPDR ETF. `exchange` narrows +to a specific venue. Both are case-insensitive and silently +dropped when the datafeed doesn't know the value. + +The tool polls `state.compareSymbols` for up to ~10s (compares +require a full datafeed round-trip) before reporting a `note`. +Calling `tvchart_compare(widget_id)` with no `query` just opens +the dialog for the user — no state confirmation. + +## Series and bar updates (non-datafeed mode) + +Use these only when the chart is NOT in datafeed mode (the datafeed +manages its own streams). In datafeed mode, new symbol / interval +data is fetched automatically via `tvchart:data-request` — don't try +to push bars yourself. + +``` +tvchart_update_series(widget_id, series_id, bars, volume=None) +tvchart_update_bar(widget_id, series_id, bar) # live tick +tvchart_add_series(widget_id, series_id, bars, series_type="Line", series_options={...}) +tvchart_remove_series(widget_id, series_id) +tvchart_apply_options(widget_id, chart_options=..., series_id=..., series_options=...) +``` + +## Last-resort escape hatch + +If no typed tool exists for a specific event, use: + +``` +send_event(widget_id, event_type, data) +``` + +Event types are namespaced `tvchart:`. This is a raw +passthrough — prefer the typed tools above in every other case. + +## Don'ts + +- Do NOT fabricate chart state, bars, or timestamps. Call the tool. +- Do NOT emit "Updated Chart State" or "Chart Update Response" + pseudo-JSON blocks in replies — only quote real tool returns. +- Do NOT guess a `widget_id` — read it from the attachment or call + `list_widgets()`. +- Do NOT call `send_event` when a typed tool already exists for the + event. diff --git a/pywry/pywry/mcp/state.py b/pywry/pywry/mcp/state.py index 292d6c7..0fbf7ed 100644 --- a/pywry/pywry/mcp/state.py +++ b/pywry/pywry/mcp/state.py @@ -6,6 +6,10 @@ from __future__ import annotations +import contextlib +import threading +import uuid + from typing import TYPE_CHECKING, Any @@ -21,6 +25,12 @@ # Widget configurations for export _widget_configs: dict[str, dict[str, Any]] = {} +# Request/response correlation for tools that round-trip an event pair +# through the widget. Keyed by request_id. +_pending_responses: dict[str, dict[str, Any]] = {} +_pending_events: dict[str, threading.Event] = {} +_pending_lock = threading.Lock() + def get_app() -> PyWry: """Get or create the global PyWry app instance. @@ -144,3 +154,123 @@ def remove_widget(widget_id: str) -> bool: _widget_configs.pop(widget_id, None) return True return False + + +# ============================================================================= +# Request/response correlation +# ============================================================================= + + +def request_response( + widget: Any, + request_event: str, + response_event: str, + payload: dict[str, Any], + *, + correlation_key: str = "context", + response_correlation_key: str | None = None, + timeout: float = 5.0, +) -> dict[str, Any] | None: + """Emit a request event and block until the matching response arrives. + + Registers a one-shot handler on ``response_event`` that matches by a + correlation token, generates the token, injects it into the payload + under ``correlation_key``, emits ``request_event``, and waits up to + ``timeout`` seconds for the response. + + Parameters + ---------- + widget : Any + The widget whose ``on``/``emit`` methods drive the round-trip. + request_event : str + Name of the Python→JS event to emit. + response_event : str + Name of the JS→Python event to listen for. + payload : dict + Request payload. A correlation token is injected under + ``correlation_key``; any existing value is overwritten. + correlation_key : str + Field name to use for the correlation token in the request + payload (defaults to ``"context"``, matching PyWry convention). + response_correlation_key : str or None + Field name to read the correlation token from in the response. + Defaults to ``correlation_key``. + timeout : float + Maximum seconds to wait for the response. + + Returns + ------- + dict or None + The response data, or ``None`` if the response didn't arrive + within ``timeout``. + """ + request_id = uuid.uuid4().hex + response_correlation_key = response_correlation_key or correlation_key + evt = threading.Event() + + with _pending_lock: + _pending_events[request_id] = evt + + def _listener(data: Any, _event_type: str = "", _label: str = "") -> None: + if not isinstance(data, dict): + return + token = data.get(response_correlation_key) + if isinstance(token, str) and token == request_id: + with _pending_lock: + _pending_responses[request_id] = data + pending = _pending_events.get(request_id) + if pending: + pending.set() + + try: + widget.on(response_event, _listener) + except Exception: + with _pending_lock: + _pending_events.pop(request_id, None) + raise + + merged_payload = dict(payload or {}) + merged_payload[correlation_key] = request_id + widget.emit(request_event, merged_payload) + + received = evt.wait(timeout) + with _pending_lock: + response = _pending_responses.pop(request_id, None) + _pending_events.pop(request_id, None) + return response if received else None + + +def capture_widget_events( + widget: Any, + widget_id: str, + events: dict[str, list[dict[str, Any]]], + event_names: list[str], +) -> None: + """Register handlers that store incoming events in the MCP ``events`` dict. + + Used at widget creation time to populate ``ctx.events[widget_id]`` + with chart/drawing/tool-activity events so agents can retrieve them + via the ``get_events`` tool. + + Parameters + ---------- + widget : Any + The widget whose ``on`` method will register listeners. + widget_id : str + Key under which events are bucketed in ``events``. + events : dict + The MCP-server-wide events dict (mutated in place). + event_names : list[str] + Event names to capture. Each incoming event becomes an entry + in ``events[widget_id]`` tagged with ``event`` and ``data``. + """ + for name in event_names: + + def _make_handler(ev_name: str) -> Any: + def _handler(data: Any, _event_type: str = "", _label: str = "") -> None: + events.setdefault(widget_id, []).append({"event": ev_name, "data": data}) + + return _handler + + with contextlib.suppress(Exception): + widget.on(name, _make_handler(name)) diff --git a/pywry/pywry/mcp/tools.py b/pywry/pywry/mcp/tools.py index 3f21964..0e75652 100644 --- a/pywry/pywry/mcp/tools.py +++ b/pywry/pywry/mcp/tools.py @@ -461,6 +461,604 @@ def get_tools() -> list[Tool]: }, ), # ===================================================================== + # TVChart — first-class tools for every chart operation. Every tool + # accepts the owning ``widget_id`` plus an optional ``chart_id`` for + # multi-chart widgets (defaults to the first chart). + # ===================================================================== + Tool( + name="tvchart_update_series", + description="""Replace the bar data for a chart series. + +Emits ``tvchart:update`` with ``{bars, volume?, fitContent?, chartId?, seriesId?}``. +Time values are Unix epoch seconds. Use ``series_id`` to target a specific +series (defaults to the main OHLCV series).""", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "bars": { + "type": "array", + "items": {"type": "object"}, + "description": "Bar objects with time/open/high/low/close/volume fields", + }, + "volume": { + "type": "array", + "items": {"type": "object"}, + "description": "Optional separate volume points {time,value,color?}", + }, + "series_id": {"type": "string"}, + "chart_id": {"type": "string"}, + "fit_content": {"type": "boolean", "default": True}, + }, + "required": ["widget_id", "bars"], + }, + ), + Tool( + name="tvchart_update_bar", + description="""Stream a single real-time bar update. + +Emits ``tvchart:stream`` with the merged bar payload. If the bar's time +matches the most recent bar the chart updates that bar; otherwise a new +bar is appended. Volume colour is auto-derived from open/close unless +provided.""", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "bar": { + "type": "object", + "description": "Bar dict with time/open/high/low/close/volume", + }, + "series_id": {"type": "string"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id", "bar"], + }, + ), + Tool( + name="tvchart_add_series", + description="""Add a pre-computed overlay series to the chart. + +Emits ``tvchart:add-series``. Use this for any series whose values you +already computed in Python (custom indicators, compare symbols, forecasts, +etc.). For the built-in indicator engine (SMA/EMA/RSI/BB/…) use +``tvchart_add_indicator`` instead.""", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "series_id": {"type": "string"}, + "bars": { + "type": "array", + "items": {"type": "object"}, + "description": "Series data points — shape depends on series_type", + }, + "series_type": { + "type": "string", + "enum": ["Line", "Area", "Histogram", "Baseline", "Candlestick", "Bar"], + "default": "Line", + }, + "series_options": {"type": "object"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id", "series_id", "bars"], + }, + ), + Tool( + name="tvchart_remove_series", + description="""Remove a series or overlay by id. + +Emits ``tvchart:remove-series``. Works for any series added via +``tvchart_add_series`` or ``tvchart_add_indicator``.""", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "series_id": {"type": "string"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id", "series_id"], + }, + ), + Tool( + name="tvchart_add_markers", + description="""Add buy/sell or event markers at specific bars. + +Emits ``tvchart:add-markers``. Each marker is ``{time, position, color, +shape, text}`` where ``position`` is ``"aboveBar"`` or ``"belowBar"`` and +``shape`` is one of ``"arrowUp"``, ``"arrowDown"``, ``"circle"``, etc.""", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "markers": { + "type": "array", + "items": {"type": "object"}, + "description": "List of marker dicts", + }, + "series_id": {"type": "string"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id", "markers"], + }, + ), + Tool( + name="tvchart_add_price_line", + description="""Draw a horizontal price line (support/resistance/target). + +Emits ``tvchart:add-price-line``.""", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "price": {"type": "number"}, + "color": {"type": "string", "default": "#2196F3"}, + "line_width": {"type": "integer", "default": 1}, + "title": {"type": "string", "default": ""}, + "series_id": {"type": "string"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id", "price"], + }, + ), + Tool( + name="tvchart_apply_options", + description="""Apply chart-level or series-level option patches. + +Emits ``tvchart:apply-options``. ``chart_options`` patches the chart +(layout/grid/crosshair/timeScale); ``series_options`` patches the +specified series (colour, lineWidth, priceScaleId, etc.).""", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "chart_options": {"type": "object"}, + "series_options": {"type": "object"}, + "series_id": {"type": "string"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id"], + }, + ), + Tool( + name="tvchart_add_indicator", + description="""Add a built-in technical indicator to the chart. + +Emits ``tvchart:add-indicator``. The indicator is computed natively by +the charting engine from the current bar data. Supports legend, +undo/redo, and subplot panes automatically. + +Valid ``name`` values: +- Moving averages: ``SMA``, ``EMA``, ``WMA``, ``SMA (50)``, ``SMA (200)``, + ``EMA (12)``, ``EMA (26)``, ``Moving Average`` +- Momentum: ``RSI``, ``Momentum`` +- Volatility: ``Bollinger Bands``, ``ATR`` +- Volume: ``VWAP``, ``Volume SMA`` +- Lightweight Examples: ``Average Price``, ``Median Price``, ``Weighted Close``, + ``Percent Change``, ``Correlation``, ``Spread``, ``Ratio``, ``Sum``, ``Product``""", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "name": {"type": "string"}, + "period": { + "type": "integer", + "description": "Lookback period (0 uses the indicator default)", + }, + "color": {"type": "string", "description": "Hex colour (empty = auto-assign)"}, + "source": { + "type": "string", + "description": "OHLC source: close/open/high/low/hl2/hlc3/ohlc4", + }, + "method": { + "type": "string", + "description": "For Moving Average: SMA/EMA/WMA", + }, + "multiplier": {"type": "number", "description": "Bollinger Bands multiplier"}, + "ma_type": {"type": "string", "description": "Bollinger Bands MA type"}, + "offset": { + "type": "integer", + "description": "Bar offset for indicator shifting", + }, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id", "name"], + }, + ), + Tool( + name="tvchart_remove_indicator", + description="""Remove a built-in indicator by series id. + +Emits ``tvchart:remove-indicator``. Grouped indicators (e.g. the three +Bollinger bands) are removed together, and subplot panes are cleaned up +automatically.""", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "series_id": {"type": "string"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id", "series_id"], + }, + ), + Tool( + name="tvchart_list_indicators", + description="""Return the list of active built-in indicators. + +Synchronously round-trips ``tvchart:list-indicators`` → +``tvchart:list-indicators-response`` and returns the decoded response +(``{indicators: [{seriesId, name, type, period, color, group}]}``).""", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "chart_id": {"type": "string"}, + "timeout": {"type": "number", "default": 5.0}, + }, + "required": ["widget_id"], + }, + ), + Tool( + name="tvchart_show_indicators", + description="Open the indicator picker panel. Emits ``tvchart:show-indicators``.", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id"], + }, + ), + Tool( + name="tvchart_symbol_search", + description="""Open the symbol search dialog, optionally pre-filling it. + +Emits ``tvchart:symbol-search``. When ``query`` is set the datafeed +search runs with that query and — if ``auto_select`` (default true) — +the exact-ticker match (or the first result otherwise) is selected as +soon as results arrive. ``symbol_type`` and ``exchange`` narrow the +datafeed search to a specific security class or venue — e.g. +``symbol_type="etf"`` ensures ``SPY`` resolves to the SPDR ETF rather +than a near-prefix match like ``SPYM``.""", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "query": {"type": "string"}, + "auto_select": {"type": "boolean", "default": True}, + "symbol_type": { + "type": "string", + "description": ( + "Security class filter (datafeed-provided values — " + "typically one of 'equity', 'etf', 'index', " + "'mutualfund', 'future', 'cryptocurrency', " + "'currency'). Case-insensitive." + ), + }, + "exchange": { + "type": "string", + "description": "Exchange filter (datafeed-provided values). Case-insensitive.", + }, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id"], + }, + ), + Tool( + name="tvchart_compare", + description="""Add a symbol as an overlay compare series on the chart. + +Emits ``tvchart:compare``. When ``query`` is set the compare panel +runs a datafeed search and — if ``auto_add`` (default true) — adds the +exact-ticker match (or the first result otherwise) to the chart. The +tool polls chart state until the new compare series appears in +``state.compareSymbols`` and returns the confirmed state; if the match +doesn't commit in time, the result includes a ``note``. Omit +``query`` to just open the panel for the user. ``symbol_type`` and +``exchange`` narrow the datafeed search — e.g. ``symbol_type="etf"`` +routes ``SPY`` to the SPDR ETF rather than a near-prefix match.""", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "query": { + "type": "string", + "description": "Ticker / name to search and auto-add as a compare series.", + }, + "auto_add": { + "type": "boolean", + "default": True, + "description": "If true, auto-commit the matching result. If false, just open the dialog.", + }, + "symbol_type": { + "type": "string", + "description": ( + "Security class filter (datafeed-provided values — " + "typically one of 'equity', 'etf', 'index', " + "'mutualfund', 'future', 'cryptocurrency', " + "'currency'). Case-insensitive." + ), + }, + "exchange": { + "type": "string", + "description": "Exchange filter (datafeed-provided values). Case-insensitive.", + }, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id"], + }, + ), + Tool( + name="tvchart_change_interval", + description="""Change the chart timeframe / bar interval. + +Emits ``tvchart:interval-change``. Valid intervals match the chart's +``supported_resolutions``. Typical values: ``1m 3m 5m 15m 30m 45m 1h +2h 3h 4h 1d 1w 1M 3M 6M 12M``.""", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "value": {"type": "string", "description": "Interval (e.g. '5m', '1d')"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id", "value"], + }, + ), + Tool( + name="tvchart_set_visible_range", + description="""Set the chart's visible time range. + +Emits ``tvchart:time-scale`` with ``{visibleRange: {from, to}}``. Times +are Unix epoch seconds.""", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "from_time": {"type": "integer"}, + "to_time": {"type": "integer"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id", "from_time", "to_time"], + }, + ), + Tool( + name="tvchart_fit_content", + description="Fit all bars to the visible area. Emits ``tvchart:time-scale`` with ``{fitContent: true}``.", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id"], + }, + ), + Tool( + name="tvchart_time_range", + description="""Zoom to a preset time range. + +Emits ``tvchart:time-range``. Typical values: ``1D 1W 1M 3M 6M 1Y 5Y YTD``.""", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "value": {"type": "string"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id", "value"], + }, + ), + Tool( + name="tvchart_time_range_picker", + description="Open the date-range picker dialog. Emits ``tvchart:time-range-picker``.", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id"], + }, + ), + Tool( + name="tvchart_log_scale", + description="Toggle the logarithmic price scale. Emits ``tvchart:log-scale``.", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "value": {"type": "boolean"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id", "value"], + }, + ), + Tool( + name="tvchart_auto_scale", + description="Toggle auto-scale on the price axis. Emits ``tvchart:auto-scale``.", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "value": {"type": "boolean"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id", "value"], + }, + ), + Tool( + name="tvchart_chart_type", + description="""Change the main series chart type. + +Emits ``tvchart:chart-type-change``. Valid values: ``Candles``, +``Hollow Candles``, ``Heikin Ashi``, ``Bars``, ``Line``, ``Area``, +``Baseline``, ``Histogram``.""", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "value": {"type": "string"}, + "series_id": {"type": "string"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id", "value"], + }, + ), + Tool( + name="tvchart_drawing_tool", + description="""Activate a drawing tool or toggle drawing-layer state. + +Emits one of ``tvchart:tool-cursor``, ``tvchart:tool-crosshair``, +``tvchart:tool-magnet``, ``tvchart:tool-eraser``, +``tvchart:tool-visibility``, ``tvchart:tool-lock`` depending on ``mode``.""", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "mode": { + "type": "string", + "enum": ["cursor", "crosshair", "magnet", "eraser", "visibility", "lock"], + }, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id", "mode"], + }, + ), + Tool( + name="tvchart_undo", + description="Undo the last chart action. Emits ``tvchart:undo``.", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id"], + }, + ), + Tool( + name="tvchart_redo", + description="Redo the last undone chart action. Emits ``tvchart:redo``.", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id"], + }, + ), + Tool( + name="tvchart_show_settings", + description="Open the chart settings modal. Emits ``tvchart:show-settings``.", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id"], + }, + ), + Tool( + name="tvchart_toggle_dark_mode", + description="Toggle the chart's dark/light theme. Emits ``tvchart:toggle-dark-mode``.", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "value": {"type": "boolean", "description": "true = dark, false = light"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id", "value"], + }, + ), + Tool( + name="tvchart_screenshot", + description="Take a screenshot of the chart. Emits ``tvchart:screenshot``.", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id"], + }, + ), + Tool( + name="tvchart_fullscreen", + description="Toggle chart fullscreen mode. Emits ``tvchart:fullscreen``.", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id"], + }, + ), + Tool( + name="tvchart_save_layout", + description="""Save the current chart layout (indicators + drawings). + +Emits ``tvchart:save-layout``.""", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "name": {"type": "string"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id"], + }, + ), + Tool( + name="tvchart_open_layout", + description="Open the layout picker dialog. Emits ``tvchart:open-layout``.", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "chart_id": {"type": "string"}, + }, + "required": ["widget_id"], + }, + ), + Tool( + name="tvchart_save_state", + description="""Request a full state export from every chart in the widget. + +Emits ``tvchart:save-state``. Use ``tvchart_request_state`` for a +synchronous single-chart snapshot.""", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + }, + "required": ["widget_id"], + }, + ), + Tool( + name="tvchart_request_state", + description="""Read a single chart's full state synchronously. + +Round-trips ``tvchart:request-state`` → ``tvchart:state-response`` and +returns the decoded state object (``{chartId, theme, series, +visibleRange, rawData, drawings, indicators}``).""", + inputSchema={ + "type": "object", + "properties": { + "widget_id": {"type": "string"}, + "chart_id": {"type": "string"}, + "timeout": {"type": "number", "default": 5.0}, + }, + "required": ["widget_id"], + }, + ), + # ===================================================================== # Widget Manipulation # ===================================================================== Tool( diff --git a/pywry/pywry/tvchart/mixin.py b/pywry/pywry/tvchart/mixin.py index 4297d1b..28f6e06 100644 --- a/pywry/pywry/tvchart/mixin.py +++ b/pywry/pywry/tvchart/mixin.py @@ -228,6 +228,116 @@ def remove_indicator( payload["chartId"] = chart_id self.emit("tvchart:remove-series", payload) + def add_builtin_indicator( + self, + name: str, + period: int | None = None, + *, + color: str | None = None, + source: str | None = None, + method: str | None = None, + multiplier: float | None = None, + ma_type: str | None = None, + offset: int | None = None, + chart_id: str | None = None, + ) -> None: + """Add a built-in indicator computed on the JS frontend. + + Uses the full indicator engine: legend integration, undo/redo, + subplot panes, and Bollinger Bands band-fill rendering. + + Available indicators (by name): + SMA, EMA, WMA, SMA (50), SMA (200), EMA (12), EMA (26), + RSI, ATR, VWAP, Volume SMA, Bollinger Bands + + Parameters + ---------- + name : str + Indicator name from the catalog (e.g. ``"SMA"``, ``"RSI"``). + period : int, optional + Lookback period. Falls back to the catalog default. + color : str, optional + Hex colour. Auto-assigned from the palette when omitted. + source : str, optional + OHLC source: ``"close"``, ``"open"``, ``"high"``, ``"low"``, + ``"hl2"``, ``"hlc3"``, ``"ohlc4"``. + method : str, optional + Moving average method for the Moving Average indicator: + ``"SMA"``, ``"EMA"``, ``"WMA"``. + multiplier : float, optional + Bollinger Bands standard-deviation multiplier (default 2). + ma_type : str, optional + Bollinger Bands moving-average type (default ``"SMA"``). + offset : int, optional + Bar offset for indicator shifting. + chart_id : str, optional + Target chart instance ID. + """ + payload: dict[str, Any] = {"name": name} + if period is not None: + payload["period"] = period + if color is not None: + payload["color"] = color + if source is not None: + payload["source"] = source + if method is not None: + payload["method"] = method + if multiplier is not None: + payload["multiplier"] = multiplier + if ma_type is not None: + payload["maType"] = ma_type + if offset is not None: + payload["offset"] = offset + if chart_id is not None: + payload["chartId"] = chart_id + self.emit("tvchart:add-indicator", payload) + + def remove_builtin_indicator( + self, + series_id: str, + chart_id: str | None = None, + ) -> None: + """Remove a built-in indicator by its series ID. + + Handles grouped indicators (e.g. Bollinger Bands upper/mid/lower + are removed together), subplot pane cleanup, and undo/redo. + + Parameters + ---------- + series_id : str + The indicator series ID (e.g. ``"ind_sma_1713200000"``). + chart_id : str, optional + Target chart instance ID. + """ + payload: dict[str, Any] = {"seriesId": series_id} + if chart_id is not None: + payload["chartId"] = chart_id + self.emit("tvchart:remove-indicator", payload) + + def list_indicators( + self, + chart_id: str | None = None, + context: dict[str, Any] | None = None, + ) -> None: + """Request the list of active built-in indicators. + + The frontend replies with a ``tvchart:list-indicators-response`` + event containing an ``indicators`` array. + + Parameters + ---------- + chart_id : str, optional + Target chart instance ID. + context : dict, optional + Opaque context echoed back in the response. + """ + payload: dict[str, Any] = {} + if chart_id is not None: + payload["chartId"] = chart_id + if context is not None: + payload["context"] = context + self.emit("tvchart:list-indicators", payload) + def add_marker( self, markers: list[dict[str, Any]], diff --git a/pywry/tests/test_chat_manager.py b/pywry/tests/test_chat_manager.py index 9ee2d87..bd77ea5 100644 --- a/pywry/tests/test_chat_manager.py +++ b/pywry/tests/test_chat_manager.py @@ -370,6 +370,8 @@ def test_callbacks_returns_expected_keys(self, manager): "chat:request-state", "chat:todo-clear", "chat:input-response", + "chat:edit-message", + "chat:resend-from", } assert set(cbs.keys()) == expected @@ -515,3 +517,394 @@ def test_slash_command_clear(self, bound_manager, widget): assert len(bound_manager.threads[tid]) == 1 bound_manager._on_slash_command_event({"command": "/clear", "threadId": tid}, "", "") assert len(bound_manager.threads[tid]) == 0 + + +# ============================================================================= +# Edit / Resend Tests +# ============================================================================= + + +def _seed_thread(mgr: ChatManager) -> tuple[str, list[dict[str, Any]]]: + """Populate the manager's active thread with a four-message conversation.""" + tid = mgr.active_thread_id + msgs = [ + {"id": "msg_user_1", "role": "user", "text": "first question"}, + {"id": "msg_asst_1", "role": "assistant", "text": "first answer"}, + {"id": "msg_user_2", "role": "user", "text": "second question"}, + {"id": "msg_asst_2", "role": "assistant", "text": "second answer"}, + ] + mgr._threads[tid] = list(msgs) + return tid, msgs + + +class TestTruncateThreadAt: + """Direct unit tests for the _truncate_thread_at helper.""" + + def test_keep_target_drops_messages_after(self, bound_manager): + tid, _ = _seed_thread(bound_manager) + removed, removed_ids = bound_manager._truncate_thread_at( + tid, "msg_user_2", keep_target=True + ) + kept_ids = [m["id"] for m in bound_manager._threads[tid]] + assert kept_ids == ["msg_user_1", "msg_asst_1", "msg_user_2"] + assert removed_ids == ["msg_asst_2"] + assert len(removed) == 1 + + def test_drop_target_removes_message_and_after(self, bound_manager): + tid, _ = _seed_thread(bound_manager) + removed, removed_ids = bound_manager._truncate_thread_at( + tid, "msg_user_2", keep_target=False + ) + kept_ids = [m["id"] for m in bound_manager._threads[tid]] + assert kept_ids == ["msg_user_1", "msg_asst_1"] + assert removed_ids == ["msg_user_2", "msg_asst_2"] + assert len(removed) == 2 + + def test_unknown_message_id_no_op(self, bound_manager): + tid, msgs = _seed_thread(bound_manager) + removed, removed_ids = bound_manager._truncate_thread_at(tid, "ghost", keep_target=True) + assert removed == [] + assert removed_ids == [] + # Thread untouched + assert [m["id"] for m in bound_manager._threads[tid]] == [m["id"] for m in msgs] + + +class TestEditMessage: + """Tests for _on_edit_message — replace text + truncate + regenerate.""" + + def test_edit_emits_messages_deleted(self, bound_manager, widget): + tid, _ = _seed_thread(bound_manager) + bound_manager._on_edit_message( + {"messageId": "msg_user_2", "threadId": tid, "text": "REVISED"}, + "chat:edit-message", + "", + ) + time.sleep(0.2) # allow background thread + deletions = widget.get_events("chat:messages-deleted") + assert deletions, "expected at least one chat:messages-deleted event" + d = deletions[0] + assert d["editedMessageId"] == "msg_user_2" + assert d["editedText"] == "REVISED" + # Only the trailing assistant reply should be removed + assert d["messageIds"] == ["msg_asst_2"] + + def test_edit_replaces_user_message_text(self, bound_manager, widget): + tid, _ = _seed_thread(bound_manager) + bound_manager._on_edit_message( + {"messageId": "msg_user_2", "threadId": tid, "text": "REVISED"}, + "chat:edit-message", + "", + ) + time.sleep(0.2) + thread = bound_manager._threads[tid] + # Find the edited user message + edited = next(m for m in thread if m.get("id") == "msg_user_2") + assert edited["text"] == "REVISED" + + def test_edit_unknown_message_is_noop(self, bound_manager, widget): + tid, msgs = _seed_thread(bound_manager) + bound_manager._on_edit_message( + {"messageId": "ghost", "threadId": tid, "text": "x"}, + "chat:edit-message", + "", + ) + # No deletion event, no thread mutation + assert widget.get_events("chat:messages-deleted") == [] + assert [m["id"] for m in bound_manager._threads[tid]] == [m["id"] for m in msgs] + + def test_edit_empty_text_is_noop(self, bound_manager, widget): + tid, _ = _seed_thread(bound_manager) + bound_manager._on_edit_message( + {"messageId": "msg_user_2", "threadId": tid, "text": " "}, + "chat:edit-message", + "", + ) + assert widget.get_events("chat:messages-deleted") == [] + + +class TestResendFrom: + """Tests for _on_resend_from — drop target + everything after, regenerate.""" + + def test_resend_keeps_target_and_drops_only_later_messages(self, bound_manager, widget): + tid, _ = _seed_thread(bound_manager) + bound_manager._on_resend_from( + {"messageId": "msg_user_2", "threadId": tid}, + "chat:resend-from", + "", + ) + time.sleep(0.2) + deletions = widget.get_events("chat:messages-deleted") + assert deletions + d = deletions[0] + # The target user message stays — only the assistant reply (and + # any subsequent turns) are dropped so "Resend" doesn't read as + # "your message was erased". + assert d["messageIds"] == ["msg_asst_2"] + # No edited-message flags — the user message text is unchanged, + # so the frontend doesn't need to re-render its content. + assert "editedMessageId" not in d + assert "editedText" not in d + # Server-side thread keeps the target user message in place. + surviving_ids = [m["id"] for m in bound_manager._threads[tid]] + assert "msg_user_2" in surviving_ids + assert "msg_asst_2" not in surviving_ids + + def test_resend_re_runs_handler_with_same_text(self, bound_manager, widget): + tid, _ = _seed_thread(bound_manager) + bound_manager._on_resend_from( + {"messageId": "msg_user_2", "threadId": tid}, + "chat:resend-from", + "", + ) + time.sleep(0.3) + # Echo handler returns "Echo: " — verify the assistant reply + # came back for the resent prompt. + replies = widget.get_events("chat:assistant-message") + assert any("Echo: second question" in r.get("text", "") for r in replies) + + def test_resend_unknown_message_is_noop(self, bound_manager, widget): + tid, msgs = _seed_thread(bound_manager) + bound_manager._on_resend_from( + {"messageId": "ghost", "threadId": tid}, + "chat:resend-from", + "", + ) + assert widget.get_events("chat:messages-deleted") == [] + # Original thread is intact + assert [m["id"] for m in bound_manager._threads[tid]] == [m["id"] for m in msgs] + + def test_resend_targeting_assistant_message_is_noop(self, bound_manager, widget): + """Only user messages can be resent; assistant ids are ignored.""" + tid, msgs = _seed_thread(bound_manager) + bound_manager._on_resend_from( + {"messageId": "msg_asst_1", "threadId": tid}, + "chat:resend-from", + "", + ) + assert widget.get_events("chat:messages-deleted") == [] + assert [m["id"] for m in bound_manager._threads[tid]] == [m["id"] for m in msgs] + + +class TestUserMessageStoresId: + """The frontend-generated messageId must round-trip into thread storage.""" + + def test_user_message_uses_provided_id(self, bound_manager): + tid = bound_manager.active_thread_id + bound_manager._on_user_message( + {"messageId": "msg_provided_42", "text": "hi", "threadId": tid}, + "chat:user-message", + "", + ) + time.sleep(0.2) + first = bound_manager._threads[tid][0] + assert first["id"] == "msg_provided_42" + assert first["role"] == "user" + + def test_user_message_generates_id_if_absent(self, bound_manager): + tid = bound_manager.active_thread_id + bound_manager._on_user_message( + {"text": "hi", "threadId": tid}, + "chat:user-message", + "", + ) + time.sleep(0.2) + first = bound_manager._threads[tid][0] + assert first["id"].startswith("msg_") + + def test_assistant_message_carries_id(self, bound_manager): + tid = bound_manager.active_thread_id + bound_manager._on_user_message( + {"text": "hi", "threadId": tid}, + "chat:user-message", + "", + ) + time.sleep(0.3) + # Echo handler completes synchronously; assistant message should be in thread + msgs = bound_manager._threads[tid] + asst = [m for m in msgs if m.get("role") == "assistant"] + assert asst + assert asst[0]["id"].startswith("msg_") + + +class TestWidgetAttachmentCarriesWidgetId: + """Every @-mention attachment must surface the widget_id explicitly so an + LLM agent reading the @-context can use it directly in MCP tool calls.""" + + def _make_mgr(self) -> ChatManager: + m = ChatManager(handler=echo_handler, enable_context=True) + m.bind(FakeWidget()) + return m + + def test_registered_source_with_getdata_content_carries_widget_id(self): + mgr = self._make_mgr() + mgr.register_context_source("chart", "chart") + att = mgr._resolve_widget_attachment( + "chart", content="symbol: AAPL\ninterval: 1d", name="chart" + ) + assert att is not None + # The attachment content always starts with widget_id: + first_line = att.content.splitlines()[0] + assert first_line == "widget_id: chart" + # The original getData payload is preserved after the header + assert "symbol: AAPL" in att.content + assert att.source == "chart" + assert att.name == "@chart" + + def test_registered_source_without_getdata_still_carries_widget_id(self): + mgr = self._make_mgr() + mgr.register_context_source("chart", "chart") + att = mgr._resolve_widget_attachment("chart") + assert att is not None + # Even with no JS-side getData payload, widget_id is in the content + assert "widget_id: chart" in att.content + assert att.source == "chart" + + def test_unregistered_widget_id_still_yields_attachment_with_id(self): + mgr = self._make_mgr() + # No register_context_source call — but the user mentioned an unknown + # widgetId from the frontend. The attachment must still surface it. + att = mgr._resolve_widget_attachment("some-other-widget") + assert att is not None + assert "widget_id: some-other-widget" in att.content + assert att.source == "some-other-widget" + + def test_resolve_attachments_dispatches_to_widget_helper(self): + mgr = self._make_mgr() + mgr.register_context_source("chart", "chart") + attachments = mgr._resolve_attachments( + [ + { + "type": "widget", + "widgetId": "chart", + "name": "chart", + "content": "symbol: AAPL", + }, + ] + ) + assert len(attachments) == 1 + att = attachments[0] + assert att.type == "widget" + assert att.source == "chart" + # widget_id header is the bridge between @-context and MCP tool calls + assert att.content.splitlines()[0] == "widget_id: chart" + + +class TestRegisteredContextAutoAttaches: + """Every registered context source rides along on every user message + automatically — the agent never has to remember a widget id between + turns and the user never has to repeat @.""" + + def _make_mgr(self) -> ChatManager: + m = ChatManager(handler=echo_handler, enable_context=True) + m.bind(FakeWidget()) + return m + + def test_no_auto_attach_when_context_disabled(self): + m = ChatManager(handler=echo_handler, enable_context=False) + m.bind(FakeWidget()) + m.register_context_source("chart", "chart") + merged = m._auto_attach_context_sources([]) + assert merged == [] + + def test_no_auto_attach_when_no_sources_registered(self): + mgr = self._make_mgr() + merged = mgr._auto_attach_context_sources([]) + assert merged == [] + + def test_registered_source_is_auto_attached(self): + mgr = self._make_mgr() + mgr.register_context_source("chart", "chart") + merged = mgr._auto_attach_context_sources([]) + assert len(merged) == 1 + att = merged[0] + assert att.source == "chart" + assert att.auto_attached is True + assert "widget_id: chart" in att.content + + def test_explicit_mention_takes_precedence(self): + mgr = self._make_mgr() + mgr.register_context_source("chart", "chart") + explicit = Attachment( + type="widget", + name="@chart", + content="widget_id: chart\n\nsymbol: AAPL", + source="chart", + auto_attached=False, + ) + merged = mgr._auto_attach_context_sources([explicit]) + # Only the explicit mention survives — no duplicate + assert len(merged) == 1 + assert merged[0] is explicit + assert merged[0].auto_attached is False + + def test_auto_attach_runs_in_user_message_flow(self): + """End-to-end: a user message with NO explicit @-mention should + still cause the registered chart context to ride along.""" + mgr = self._make_mgr() + mgr.register_context_source("chart", "chart") + captured: list[Any] = [] + + def handler(messages, ctx): + captured.append(list(ctx.attachments)) + return "ok" + + mgr._handler = handler + mgr._on_user_message( + {"text": "hi", "threadId": mgr.active_thread_id}, + "chat:user-message", + "", + ) + time.sleep(0.3) + assert captured, "handler was never invoked" + attachments = captured[0] + # Exactly one auto-attached widget — the chart + assert len(attachments) == 1 + att = attachments[0] + assert att.source == "chart" + assert att.auto_attached is True + assert "widget_id: chart" in att.content + + def test_inject_context_skips_ui_card_for_auto_attachments(self, widget): + """Auto-attached context must NOT spam an ``attach_widget`` card + on every turn — only explicit @-mentions get the visible card.""" + mgr = ChatManager(handler=echo_handler, enable_context=True) + mgr.bind(widget) + mgr.register_context_source("chart", "chart") + mgr._on_user_message( + {"text": "hi", "threadId": mgr.active_thread_id}, + "chat:user-message", + "", + ) + time.sleep(0.3) + # No attach_widget tool-call cards from the auto-attach + attach_cards = [ + d + for e, d in widget.events + if e == "chat:tool-call" and d.get("name", "").startswith("attach_") + ] + assert attach_cards == [] + + def test_inject_context_includes_widget_id_in_user_message(self, widget): + """The widget_id header must be embedded in the user-message text + the agent receives so the agent can read it directly.""" + mgr = ChatManager(handler=echo_handler, enable_context=True) + mgr.bind(widget) + mgr.register_context_source("chart", "chart") + captured: list[str] = [] + + def handler(messages, ctx): + captured.append(messages[-1].get("text", "")) + return "ok" + + mgr._handler = handler + mgr._on_user_message( + {"text": "switch to MSFT", "threadId": mgr.active_thread_id}, + "chat:user-message", + "", + ) + time.sleep(0.3) + assert captured + injected = captured[0] + # Both the @-context block and the original user text + assert "widget_id: chart" in injected + assert "switch to MSFT" in injected diff --git a/pywry/tests/test_deepagent_provider.py b/pywry/tests/test_deepagent_provider.py index 20f691a..732f6b8 100644 --- a/pywry/tests/test_deepagent_provider.py +++ b/pywry/tests/test_deepagent_provider.py @@ -209,6 +209,55 @@ async def test_write_todos_produces_plan_update(self): assert plan_updates[0].entries[0].status == "completed" assert plan_updates[0].entries[1].status == "in_progress" + @pytest.mark.asyncio + async def test_write_todos_langgraph_command_output_produces_plan_update(self): + """Deep Agents' ``write_todos`` returns a LangGraph ``Command`` with + ``update={"todos": [...]}`` — the extractor must pull the list out + of that shape, not just the legacy plain-JSON list. + """ + + class _Command: + def __init__(self, update: dict) -> None: + self.update = update + + todos = [ + {"content": "Switch ticker to BTC-USD", "status": "completed"}, + {"content": "Change interval to 1m", "status": "in_progress"}, + ] + events = [ + make_event("on_tool_start", name="write_todos", run_id="tc9"), + make_event( + "on_tool_end", + name="write_todos", + run_id="tc9", + data={"output": _Command(update={"todos": todos})}, + ), + ] + agent = FakeAgent(events) + provider = DeepagentProvider(agent=agent, auto_checkpointer=False, auto_store=False) + await provider.initialize(ClientCapabilities()) + sid = await provider.new_session("/tmp") + + updates = [] + async for u in provider.prompt(sid, [TextPart(text="plan")]): + updates.append(u) + + plan_updates = [u for u in updates if isinstance(u, PlanUpdate)] + assert len(plan_updates) == 1 + assert [e.content for e in plan_updates[0].entries] == [ + "Switch ticker to BTC-USD", + "Change interval to 1m", + ] + assert [e.status for e in plan_updates[0].entries] == ["completed", "in_progress"] + # The plan card IS the visualization — no raw Command repr should + # double-render as a tool-call card. + tool_completed = [ + u + for u in updates + if isinstance(u, ToolCallUpdate) and u.status == "completed" and u.name == "write_todos" + ] + assert tool_completed == [] + @pytest.mark.asyncio async def test_cancel_stops_streaming(self): events = [ @@ -249,3 +298,211 @@ async def test_chat_model_start_yields_status(self): assert isinstance(updates[0], StatusUpdate) assert "ChatOpenAI" in updates[0].text assert isinstance(updates[1], AgentMessageUpdate) + + +# ============================================================================= +# MCP integration / recursion_limit / truncate_session +# ============================================================================= + + +class TestDeepagentProviderConstructor: + def test_default_recursion_limit_is_50(self): + provider = DeepagentProvider(model="openai:gpt-4o") + assert provider._recursion_limit == 50 + + def test_custom_recursion_limit(self): + provider = DeepagentProvider(model="openai:gpt-4o", recursion_limit=200) + assert provider._recursion_limit == 200 + + def test_mcp_servers_default_empty(self): + provider = DeepagentProvider(model="openai:gpt-4o") + assert provider._mcp_servers == {} + assert provider._mcp_tools == [] + + def test_mcp_servers_stored_on_init(self): + servers = { + "pywry": {"transport": "streamable_http", "url": "http://127.0.0.1:8765/mcp"}, + } + provider = DeepagentProvider(model="openai:gpt-4o", mcp_servers=servers) + assert provider._mcp_servers == servers + + +class TestRecursionLimitInPromptConfig: + @pytest.mark.asyncio + async def test_recursion_limit_passed_in_config(self): + captured: dict = {} + + class _Capturing: + def astream_events(self, _input, config, version="v2"): + captured["config"] = config + + async def _empty(): + if False: + yield + + return _empty() + + provider = DeepagentProvider( + agent=_Capturing(), + auto_checkpointer=False, + auto_store=False, + recursion_limit=42, + ) + await provider.initialize(ClientCapabilities()) + sid = await provider.new_session("/tmp") + async for _ in provider.prompt(sid, [TextPart(text="hi")]): + pass + assert captured["config"]["recursion_limit"] == 42 + assert captured["config"]["configurable"]["thread_id"] + + +class TestNewSessionMcpServers: + @pytest.mark.asyncio + async def test_new_session_merges_stdio_descriptor(self): + provider = DeepagentProvider( + agent=FakeAgent([]), + auto_checkpointer=False, + auto_store=False, + ) + await provider.initialize(ClientCapabilities()) + await provider.new_session( + "/tmp", + mcp_servers=[ + {"name": "fs", "command": "uvx", "args": ["mcp-server-filesystem", "/tmp"]}, + ], + ) + assert "fs" in provider._mcp_servers + entry = provider._mcp_servers["fs"] + assert entry["transport"] == "stdio" + assert entry["command"] == "uvx" + assert entry["args"] == ["mcp-server-filesystem", "/tmp"] + # Forces a rebuild on next prompt + assert provider._agent is None + assert provider._mcp_tools == [] + + @pytest.mark.asyncio + async def test_new_session_merges_http_descriptor(self): + provider = DeepagentProvider( + agent=FakeAgent([]), + auto_checkpointer=False, + auto_store=False, + ) + await provider.initialize(ClientCapabilities()) + await provider.new_session( + "/tmp", + mcp_servers=[ + {"name": "pywry", "url": "http://127.0.0.1:8765/mcp"}, + ], + ) + entry = provider._mcp_servers["pywry"] + assert entry["transport"] == "streamable_http" + assert entry["url"] == "http://127.0.0.1:8765/mcp" + + @pytest.mark.asyncio + async def test_new_session_no_mcp_keeps_existing_agent(self): + agent = FakeAgent([]) + provider = DeepagentProvider( + agent=agent, + auto_checkpointer=False, + auto_store=False, + ) + await provider.initialize(ClientCapabilities()) + await provider.new_session("/tmp") + # Without mcp_servers param the agent is preserved + assert provider._agent is agent + + +class TestLoadMcpTools: + def test_returns_empty_when_no_servers_configured(self): + provider = DeepagentProvider(model="openai:gpt-4o") + assert provider._load_mcp_tools() == [] + + +class TestTruncateSession: + def test_no_op_when_checkpointer_missing(self): + provider = DeepagentProvider( + model="openai:gpt-4o", + auto_checkpointer=False, + auto_store=False, + ) + # Should not raise even without a checkpointer + provider.truncate_session("session-1", []) + + def test_calls_delete_thread_when_available(self): + deleted: list[str] = [] + + class _Saver: + def delete_thread(self, thread_id: str) -> None: + deleted.append(thread_id) + + provider = DeepagentProvider( + model="openai:gpt-4o", + checkpointer=_Saver(), + auto_checkpointer=False, + auto_store=False, + ) + provider._sessions["sess-1"] = "thread-A" + provider.truncate_session("sess-1", []) + assert deleted == ["thread-A"] + + def test_falls_back_to_dict_storage_pop(self): + class _DictSaver: + def __init__(self) -> None: + self.storage: dict[str, dict] = {"thread-A": {"x": 1}, "thread-B": {"y": 2}} + + saver = _DictSaver() + provider = DeepagentProvider( + model="openai:gpt-4o", + checkpointer=saver, + auto_checkpointer=False, + auto_store=False, + ) + provider._sessions["sess-1"] = "thread-A" + provider.truncate_session("sess-1", []) + assert "thread-A" not in saver.storage + assert "thread-B" in saver.storage # other threads untouched + + +class TestAutoCheckpointerInBuildAgent: + """The auto-checkpointer must be set up by _build_agent so callers that + bypass the async initialize() still get conversation persistence.""" + + def test_build_agent_creates_checkpointer_when_missing(self, monkeypatch): + # Pre-empt the actual create_deep_agent import; we only care about + # the side-effect on self._checkpointer. + provider = DeepagentProvider( + model="openai:gpt-4o", + auto_checkpointer=True, + ) + assert provider._checkpointer is None + + # Patch create_deep_agent to a stub so _build_agent doesn't need + # the real deepagents package. + import sys + import types + + fake_module = types.ModuleType("deepagents") + fake_module.create_deep_agent = lambda **kwargs: object() + monkeypatch.setitem(sys.modules, "deepagents", fake_module) + + provider._build_agent() + # Checkpointer was set as a side-effect + assert provider._checkpointer is not None + + def test_build_agent_does_not_overwrite_existing_checkpointer(self, monkeypatch): + sentinel = object() + provider = DeepagentProvider( + model="openai:gpt-4o", + checkpointer=sentinel, + auto_checkpointer=True, + ) + + import sys + import types + + fake_module = types.ModuleType("deepagents") + fake_module.create_deep_agent = lambda **kwargs: object() + monkeypatch.setitem(sys.modules, "deepagents", fake_module) + + provider._build_agent() + assert provider._checkpointer is sentinel diff --git a/pywry/tests/test_mcp_state_helpers.py b/pywry/tests/test_mcp_state_helpers.py new file mode 100644 index 0000000..e774bc9 --- /dev/null +++ b/pywry/tests/test_mcp_state_helpers.py @@ -0,0 +1,234 @@ +"""Unit tests for the MCP state-module helpers. + +Covers: +- ``request_response`` — the request/response correlation helper used + by tvchart_list_indicators / tvchart_request_state. +- ``capture_widget_events`` — passive listener wiring used at chart + creation to bucket JS-side events into the MCP events dict. +""" + +# pylint: disable=protected-access + +from __future__ import annotations + +import threading + +from typing import Any +from unittest.mock import MagicMock + +import pytest + +from pywry.mcp.state import capture_widget_events, request_response + + +class _FakeWidget: + """Minimal widget surface that mimics ``on``/``emit`` behaviour.""" + + def __init__(self) -> None: + self.handlers: dict[str, list[Any]] = {} + self.emitted: list[tuple[str, dict[str, Any]]] = [] + + def on(self, event: str, handler: Any) -> None: + self.handlers.setdefault(event, []).append(handler) + + def emit(self, event: str, payload: dict[str, Any]) -> None: + self.emitted.append((event, payload)) + + +# --------------------------------------------------------------------------- +# request_response +# --------------------------------------------------------------------------- + + +def test_request_response_round_trip_returns_matching_payload() -> None: + """A response with the matching correlation token is returned to the caller.""" + widget = _FakeWidget() + + def emit(event: str, payload: dict[str, Any]) -> None: + widget.emitted.append((event, payload)) + # Echo back via the registered listener + for handler in widget.handlers.get("widget:state-response", []): + handler({"context": payload["context"], "value": 42}, "", "") + + widget.emit = emit # type: ignore[assignment] + out = request_response( + widget, + "widget:state-request", + "widget:state-response", + {}, + timeout=1.0, + ) + assert out is not None + assert out["value"] == 42 + # The request received the auto-generated correlation token + assert "context" in widget.emitted[0][1] + + +def test_request_response_returns_none_on_timeout() -> None: + widget = _FakeWidget() + out = request_response( + widget, + "widget:state-request", + "widget:state-response", + {}, + timeout=0.05, + ) + assert out is None + + +def test_request_response_ignores_mismatched_correlation_tokens() -> None: + """Stray responses with a different correlation token must not unblock the wait.""" + widget = _FakeWidget() + + def emit(event: str, payload: dict[str, Any]) -> None: + widget.emitted.append((event, payload)) + # Send a response with the WRONG token — caller must time out + for handler in widget.handlers.get("widget:state-response", []): + handler({"context": "wrong-token", "value": 99}, "", "") + + widget.emit = emit # type: ignore[assignment] + out = request_response( + widget, + "widget:state-request", + "widget:state-response", + {}, + timeout=0.1, + ) + assert out is None + + +def test_request_response_supports_custom_correlation_keys() -> None: + widget = _FakeWidget() + + def emit(event: str, payload: dict[str, Any]) -> None: + widget.emitted.append((event, payload)) + for handler in widget.handlers.get("widget:state-response", []): + handler({"requestId": payload["requestId"], "ok": True}, "", "") + + widget.emit = emit # type: ignore[assignment] + out = request_response( + widget, + "widget:state-request", + "widget:state-response", + {}, + correlation_key="requestId", + timeout=1.0, + ) + assert out is not None + assert out["ok"] is True + + +def test_request_response_concurrent_requests_isolated() -> None: + """Two concurrent round-trips must each receive their own response.""" + widget = _FakeWidget() + pending: dict[str, threading.Event] = {} + + def emit(event: str, payload: dict[str, Any]) -> None: + token = payload["context"] + widget.emitted.append((event, payload)) + # Deliver the response on a worker thread — the listener filters + # by correlation token so cross-talk is not allowed. + evt = pending.setdefault(token, threading.Event()) + + def _deliver() -> None: + evt.wait(0.05) + for handler in widget.handlers.get("widget:state-response", []): + handler({"context": token, "echo": token}, "", "") + + threading.Thread(target=_deliver, daemon=True).start() + # Release the deliverer immediately + evt.set() + + widget.emit = emit # type: ignore[assignment] + a = request_response(widget, "req", "widget:state-response", {}, timeout=1.0) + b = request_response(widget, "req", "widget:state-response", {}, timeout=1.0) + assert a is not None and b is not None + assert a["echo"] != b["echo"] + + +def test_request_response_ignores_non_dict_responses() -> None: + widget = _FakeWidget() + + def emit(event: str, payload: dict[str, Any]) -> None: + widget.emitted.append((event, payload)) + # Non-dict response — listener must reject it + for handler in widget.handlers.get("widget:state-response", []): + handler("not-a-dict", "", "") + # Then a real one + for handler in widget.handlers.get("widget:state-response", []): + handler({"context": payload["context"], "ok": True}, "", "") + + widget.emit = emit # type: ignore[assignment] + out = request_response(widget, "req", "widget:state-response", {}, timeout=1.0) + assert out == {"context": out["context"], "ok": True} + + +# --------------------------------------------------------------------------- +# capture_widget_events +# --------------------------------------------------------------------------- + + +def test_capture_widget_events_buckets_events_by_widget_id() -> None: + widget = _FakeWidget() + events: dict[str, list[dict[str, Any]]] = {} + capture_widget_events(widget, "chart-1", events, ["tvchart:click", "tvchart:drawing-added"]) + + # Simulate the JS frontend firing events + widget.handlers["tvchart:click"][0]({"x": 1, "y": 2}, "", "") + widget.handlers["tvchart:drawing-added"][0]({"id": "d-1"}, "", "") + + assert events["chart-1"] == [ + {"event": "tvchart:click", "data": {"x": 1, "y": 2}}, + {"event": "tvchart:drawing-added", "data": {"id": "d-1"}}, + ] + + +def test_capture_widget_events_registers_handler_per_event_name() -> None: + widget = _FakeWidget() + events: dict[str, list[dict[str, Any]]] = {} + capture_widget_events(widget, "chart-1", events, ["a", "b", "c"]) + assert set(widget.handlers.keys()) == {"a", "b", "c"} + + +def test_capture_widget_events_ignores_widget_on_failure() -> None: + """If widget.on raises for one event the others should still register.""" + widget = MagicMock() + calls: list[str] = [] + + def fake_on(event: str, _handler: Any) -> None: + calls.append(event) + if event == "boom": + raise RuntimeError("nope") + + widget.on = fake_on + events: dict[str, list[dict[str, Any]]] = {} + capture_widget_events(widget, "chart-1", events, ["ok-1", "boom", "ok-2"]) + assert calls == ["ok-1", "boom", "ok-2"] + + +def test_capture_widget_events_separate_widget_buckets() -> None: + widget_a = _FakeWidget() + widget_b = _FakeWidget() + events: dict[str, list[dict[str, Any]]] = {} + capture_widget_events(widget_a, "chart-A", events, ["tvchart:click"]) + capture_widget_events(widget_b, "chart-B", events, ["tvchart:click"]) + widget_a.handlers["tvchart:click"][0]({"x": 1}, "", "") + widget_b.handlers["tvchart:click"][0]({"x": 2}, "", "") + assert events["chart-A"] == [{"event": "tvchart:click", "data": {"x": 1}}] + assert events["chart-B"] == [{"event": "tvchart:click", "data": {"x": 2}}] + + +# --------------------------------------------------------------------------- +# pytest setup — ensure fixtures don't leak the global pending dicts +# --------------------------------------------------------------------------- + + +@pytest.fixture(autouse=True) +def _clear_pending() -> None: + from pywry.mcp import state as mcp_state + + mcp_state._pending_responses.clear() + mcp_state._pending_events.clear() + yield + mcp_state._pending_responses.clear() + mcp_state._pending_events.clear() diff --git a/pywry/tests/test_mcp_tvchart_tools.py b/pywry/tests/test_mcp_tvchart_tools.py new file mode 100644 index 0000000..0aa5d6c --- /dev/null +++ b/pywry/tests/test_mcp_tvchart_tools.py @@ -0,0 +1,676 @@ +"""Unit tests for the 32 first-class TVChart MCP tools. + +Each handler resolves a registered widget, emits a tvchart:* event with +a derived payload, and returns a uniform result dict. These tests +verify the schema → handler → emit chain for every tool. +""" + +# pylint: disable=protected-access + +from __future__ import annotations + +from typing import Any +from unittest.mock import MagicMock + +import pytest + +from pywry.mcp import handlers as mcp_handlers, state as mcp_state +from pywry.mcp.handlers import HandlerContext + + +def _make_ctx(args: dict[str, Any]) -> HandlerContext: + return HandlerContext( + args=args, + events={}, + make_callback=lambda _wid: lambda *_a, **_kw: None, + headless=False, + ) + + +def _find_emit(widget: MagicMock, event_name: str) -> tuple[str, dict[str, Any]] | None: + """Return the (name, payload) of the first ``widget.emit(event_name, ...)`` call. + + Handlers that confirm mutations via state polling may emit helper + events (``tvchart:request-state``) before or after the mutation + event; tests that care about the mutation payload should locate + it by name rather than by positional index. + """ + for call in widget.emit.call_args_list: + args = call[0] + if args and args[0] == event_name: + name = args[0] + payload = args[1] if len(args) > 1 else {} + return name, payload + return None + + +@pytest.fixture +def widget(monkeypatch: pytest.MonkeyPatch) -> MagicMock: + """A fresh widget mock registered under ``"chart"`` for the duration of a test. + + Mutation handlers (``tvchart_symbol_search`` / ``_compare`` / + ``_change_interval``) block on the real ``tvchart:data-settled`` + round-trip, which never fires against a mocked widget. Patch + ``_wait_for_data_settled`` to return ``None`` immediately so tests + exercise the emit + result-shape contract without waiting on a + real frontend. Tests that want to assert the confirmed-success + path should patch it themselves with a stand-in state. + """ + mcp_state._widgets.clear() + w = MagicMock() + mcp_state._widgets["chart"] = w + monkeypatch.setattr( + mcp_handlers, + "_wait_for_data_settled", + lambda *_a, **_kw: None, + ) + monkeypatch.setattr( + mcp_handlers, + "_fetch_tvchart_state", + lambda *_a, **_kw: None, + ) + yield w + mcp_state._widgets.clear() + + +# --------------------------------------------------------------------------- +# Tool catalog / dispatch coverage +# --------------------------------------------------------------------------- + + +def test_every_tvchart_tool_has_a_handler() -> None: + """No tvchart_* tool may ship without a dispatch entry.""" + from pywry.mcp.tools import get_tools + + schema_names = {t.name for t in get_tools() if t.name.startswith("tvchart_")} + handler_names = {n for n in mcp_handlers._HANDLERS if n.startswith("tvchart_")} + assert schema_names == handler_names + assert len(schema_names) == 32 # guard against accidental drops + + +def test_every_tvchart_tool_requires_widget_id() -> None: + """Every tvchart_* tool must take widget_id.""" + from pywry.mcp.tools import get_tools + + for tool in get_tools(): + if not tool.name.startswith("tvchart_"): + continue + required = tool.inputSchema.get("required", []) + assert "widget_id" in required, f"{tool.name} missing widget_id" + + +def test_unknown_widget_returns_error(widget: MagicMock) -> None: + """Resolving an unregistered widget yields a clear error listing + the registered widgets so the caller can recover.""" + ctx = _make_ctx({"widget_id": "ghost"}) + result = mcp_handlers._handle_tvchart_undo(ctx) + assert "error" in result + assert "ghost" in result["error"] + assert "chart" in result["error"] # the registered widget id + widget.emit.assert_not_called() + + +def test_missing_widget_id_with_single_widget_auto_resolves(widget: MagicMock) -> None: + """When exactly one widget is registered, missing ``widget_id`` is + a no-op — the framework resolves it from the registry, the agent + doesn't need to repeat what the server already knows.""" + ctx = _make_ctx({}) # no widget_id at all + result = mcp_handlers._handle_tvchart_undo(ctx) + assert "error" not in result + assert result["widget_id"] == "chart" + widget.emit.assert_called_once() + + +def test_missing_widget_id_with_multiple_widgets_returns_error() -> None: + """When multiple widgets are registered, the call is genuinely + ambiguous and the handler returns a clear error listing the + candidates so the agent can self-correct.""" + mcp_state._widgets.clear() + mcp_state._widgets["chart_a"] = MagicMock() + mcp_state._widgets["chart_b"] = MagicMock() + try: + ctx = _make_ctx({}) # no widget_id, ambiguous + result = mcp_handlers._handle_tvchart_undo(ctx) + assert "error" in result + assert "widget_id" in result["error"].lower() + assert "chart_a" in result["error"] + assert "chart_b" in result["error"] + finally: + mcp_state._widgets.clear() + + +def test_missing_widget_id_with_no_widgets_returns_error() -> None: + """With nothing registered, the handler tells the caller that no + widgets exist instead of dumping a stack trace.""" + mcp_state._widgets.clear() + ctx = _make_ctx({}) + result = mcp_handlers._handle_tvchart_undo(ctx) + assert "error" in result + assert "widget_id" in result["error"].lower() + assert "no widgets" in result["error"].lower() + + +def test_send_event_missing_widget_id_with_single_widget_auto_resolves(widget: MagicMock) -> None: + """The generic send_event tool also benefits from auto-resolution.""" + ctx = _make_ctx({"event_type": "tvchart:symbol-search", "data": {"query": "MSFT"}}) + result = mcp_handlers._handle_send_event(ctx) + assert "error" not in result + widget.emit.assert_called_once() + + +def test_send_event_missing_event_type_returns_error(widget: MagicMock) -> None: + ctx = _make_ctx({"widget_id": "chart"}) # no event_type + result = mcp_handlers._handle_send_event(ctx) + assert "error" in result + assert "event_type" in result["error"].lower() + widget.emit.assert_not_called() + + +# --------------------------------------------------------------------------- +# Data & series +# --------------------------------------------------------------------------- + + +def test_update_series_emits_tvchart_update(widget: MagicMock) -> None: + bars = [{"time": 1, "open": 1, "high": 2, "low": 0.5, "close": 1.5}] + ctx = _make_ctx({"widget_id": "chart", "bars": bars, "series_id": "main"}) + out = mcp_handlers._handle_tvchart_update_series(ctx) + assert out["event_type"] == "tvchart:update" + widget.emit.assert_called_once() + event_name, payload = widget.emit.call_args[0] + assert event_name == "tvchart:update" + assert payload["bars"] == bars + assert payload["seriesId"] == "main" + assert payload["fitContent"] is True + + +def test_update_series_passes_chart_id_when_set(widget: MagicMock) -> None: + ctx = _make_ctx( + { + "widget_id": "chart", + "bars": [], + "chart_id": "alt-chart", + "fit_content": False, + } + ) + mcp_handlers._handle_tvchart_update_series(ctx) + payload = widget.emit.call_args[0][1] + assert payload["chartId"] == "alt-chart" + assert payload["fitContent"] is False + + +def test_update_bar_emits_tvchart_stream(widget: MagicMock) -> None: + bar = {"time": 1, "open": 1, "high": 2, "low": 0.5, "close": 1.5, "volume": 100} + mcp_handlers._handle_tvchart_update_bar(_make_ctx({"widget_id": "chart", "bar": bar})) + name, payload = widget.emit.call_args[0] + assert name == "tvchart:stream" + assert payload["bar"] == bar + + +def test_add_series_emits_tvchart_add_series(widget: MagicMock) -> None: + bars = [{"time": 1, "value": 10}, {"time": 2, "value": 11}] + ctx = _make_ctx( + { + "widget_id": "chart", + "series_id": "overlay-1", + "bars": bars, + "series_type": "Line", + "series_options": {"color": "#f00"}, + } + ) + out = mcp_handlers._handle_tvchart_add_series(ctx) + assert out["series_id"] == "overlay-1" + name, payload = widget.emit.call_args[0] + assert name == "tvchart:add-series" + assert payload == { + "seriesId": "overlay-1", + "bars": bars, + "seriesType": "Line", + "seriesOptions": {"color": "#f00"}, + } + + +def test_remove_series_emits_tvchart_remove_series(widget: MagicMock) -> None: + out = mcp_handlers._handle_tvchart_remove_series( + _make_ctx({"widget_id": "chart", "series_id": "overlay-1"}) + ) + assert out["series_id"] == "overlay-1" + name, payload = widget.emit.call_args[0] + assert name == "tvchart:remove-series" + assert payload == {"seriesId": "overlay-1"} + + +def test_add_markers_emits_tvchart_add_markers(widget: MagicMock) -> None: + markers = [ + {"time": 1, "position": "aboveBar", "color": "#f00", "shape": "arrowDown", "text": "sell"} + ] + mcp_handlers._handle_tvchart_add_markers( + _make_ctx({"widget_id": "chart", "markers": markers, "series_id": "main"}) + ) + name, payload = widget.emit.call_args[0] + assert name == "tvchart:add-markers" + assert payload["markers"] == markers + assert payload["seriesId"] == "main" + + +def test_add_price_line_uses_defaults(widget: MagicMock) -> None: + mcp_handlers._handle_tvchart_add_price_line(_make_ctx({"widget_id": "chart", "price": 170.5})) + name, payload = widget.emit.call_args[0] + assert name == "tvchart:add-price-line" + assert payload["price"] == 170.5 + assert payload["color"] == "#2196F3" + assert payload["lineWidth"] == 1 + assert payload["title"] == "" + + +def test_apply_options_strips_none_keys(widget: MagicMock) -> None: + chart_options = {"timeScale": {"secondsVisible": False}} + mcp_handlers._handle_tvchart_apply_options( + _make_ctx({"widget_id": "chart", "chart_options": chart_options}) + ) + name, payload = widget.emit.call_args[0] + assert name == "tvchart:apply-options" + assert payload == {"chartOptions": chart_options} + + +# --------------------------------------------------------------------------- +# Built-in indicators +# --------------------------------------------------------------------------- + + +def test_add_indicator_passes_all_options(widget: MagicMock) -> None: + ctx = _make_ctx( + { + "widget_id": "chart", + "name": "Bollinger Bands", + "period": 20, + "color": "#ff0", + "source": "close", + "method": "SMA", + "multiplier": 2.0, + "ma_type": "SMA", + "offset": 0, + } + ) + mcp_handlers._handle_tvchart_add_indicator(ctx) + name, payload = widget.emit.call_args[0] + assert name == "tvchart:add-indicator" + assert payload == { + "name": "Bollinger Bands", + "period": 20, + "color": "#ff0", + "source": "close", + "method": "SMA", + "multiplier": 2.0, + "maType": "SMA", + "offset": 0, + } + + +def test_add_indicator_omits_unset_optionals(widget: MagicMock) -> None: + mcp_handlers._handle_tvchart_add_indicator(_make_ctx({"widget_id": "chart", "name": "RSI"})) + payload = widget.emit.call_args[0][1] + assert payload == {"name": "RSI"} + + +def test_remove_indicator_emits_remove(widget: MagicMock) -> None: + out = mcp_handlers._handle_tvchart_remove_indicator( + _make_ctx({"widget_id": "chart", "series_id": "ind_sma_99"}) + ) + assert out["series_id"] == "ind_sma_99" + payload = widget.emit.call_args[0][1] + assert payload == {"seriesId": "ind_sma_99"} + + +def test_show_indicators_takes_no_payload(widget: MagicMock) -> None: + mcp_handlers._handle_tvchart_show_indicators(_make_ctx({"widget_id": "chart"})) + name, payload = widget.emit.call_args[0] + assert name == "tvchart:show-indicators" + assert payload == {} + + +def test_list_indicators_round_trip_returns_inventory(widget: MagicMock) -> None: + """list_indicators emits a request and waits for the response event.""" + captured_listener: dict[str, Any] = {} + + def fake_on(event: str, handler: Any) -> None: + captured_listener["event"] = event + captured_listener["handler"] = handler + + fake_payload = { + "context": None, + "indicators": [ + { + "seriesId": "ind_sma_1", + "name": "SMA", + "type": "sma", + "period": 50, + "color": "#2196F3", + } + ], + } + + def fake_emit(event: str, payload: dict[str, Any]) -> None: + # Simulate the JS frontend echoing the correlation token back + token = payload.get("context") + fake_payload["context"] = token + captured_listener["handler"](fake_payload, "", "") + + widget.on = fake_on + widget.emit = fake_emit + + out = mcp_handlers._handle_tvchart_list_indicators( + _make_ctx({"widget_id": "chart", "timeout": 1.0}) + ) + assert captured_listener["event"] == "tvchart:list-indicators-response" + assert out["indicators"][0]["name"] == "SMA" + + +def test_list_indicators_returns_error_on_timeout(widget: MagicMock) -> None: + widget.on = MagicMock() + widget.emit = MagicMock() # never echoes back + out = mcp_handlers._handle_tvchart_list_indicators( + _make_ctx({"widget_id": "chart", "timeout": 0.05}) + ) + assert "error" in out + + +# --------------------------------------------------------------------------- +# Symbol / interval / view +# --------------------------------------------------------------------------- + + +def test_symbol_search_with_query_and_auto_select(widget: MagicMock) -> None: + mcp_handlers._handle_tvchart_symbol_search( + _make_ctx({"widget_id": "chart", "query": "MSFT", "auto_select": True}) + ) + hit = _find_emit(widget, "tvchart:symbol-search") + assert hit is not None, "mutation event was never emitted" + _, payload = hit + assert payload == {"query": "MSFT", "autoSelect": True} + + +def test_symbol_search_default_no_query(widget: MagicMock) -> None: + mcp_handlers._handle_tvchart_symbol_search(_make_ctx({"widget_id": "chart"})) + hit = _find_emit(widget, "tvchart:symbol-search") + assert hit is not None, "mutation event was never emitted" + _, payload = hit + # auto_select defaults to True even without query + assert payload == {"autoSelect": True} + # No query → no mutation to confirm → no polling → only the mutation emit. + assert widget.emit.call_count == 1 + + +def test_compare_without_query_just_opens_dialog(widget: MagicMock) -> None: + """No query → no mutation to confirm, single emit, empty payload.""" + mcp_handlers._handle_tvchart_compare(_make_ctx({"widget_id": "chart"})) + hit = _find_emit(widget, "tvchart:compare") + assert hit is not None, "compare event was never emitted" + _, payload = hit + assert payload == {} + # No query → no pre-state snapshot, no polling → only the mutation emit. + assert widget.emit.call_count == 1 + + +def test_compare_with_query_emits_query_and_auto_add(widget: MagicMock) -> None: + """With a query, the handler emits it so the frontend auto-adds the match.""" + mcp_handlers._handle_tvchart_compare( + _make_ctx({"widget_id": "chart", "query": "GOOGL", "auto_add": True}) + ) + hit = _find_emit(widget, "tvchart:compare") + assert hit is not None + _, payload = hit + assert payload == {"query": "GOOGL", "autoAdd": True} + + +def test_compare_passes_symbol_type_and_exchange_filters(widget: MagicMock) -> None: + """``symbol_type`` / ``exchange`` narrow the datafeed search so SPY + resolves to the ETF instead of a near-prefix like SPYM.""" + mcp_handlers._handle_tvchart_compare( + _make_ctx( + { + "widget_id": "chart", + "query": "SPY", + "symbol_type": "etf", + "exchange": "NYSEARCA", + } + ) + ) + hit = _find_emit(widget, "tvchart:compare") + assert hit is not None + _, payload = hit + assert payload == { + "query": "SPY", + "autoAdd": True, + "symbolType": "etf", + "exchange": "NYSEARCA", + } + + +def test_symbol_search_passes_symbol_type_and_exchange_filters(widget: MagicMock) -> None: + """Same filter plumbing on ``tvchart_symbol_search`` for main-ticker changes.""" + mcp_handlers._handle_tvchart_symbol_search( + _make_ctx( + { + "widget_id": "chart", + "query": "SPY", + "auto_select": True, + "symbol_type": "etf", + "exchange": "NYSEARCA", + } + ) + ) + hit = _find_emit(widget, "tvchart:symbol-search") + assert hit is not None + _, payload = hit + assert payload == { + "query": "SPY", + "autoSelect": True, + "symbolType": "etf", + "exchange": "NYSEARCA", + } + + +def test_change_interval_passes_value(widget: MagicMock) -> None: + mcp_handlers._handle_tvchart_change_interval(_make_ctx({"widget_id": "chart", "value": "5m"})) + hit = _find_emit(widget, "tvchart:interval-change") + assert hit is not None + _, payload = hit + assert payload == {"value": "5m"} + + +def test_set_visible_range_packs_from_to(widget: MagicMock) -> None: + mcp_handlers._handle_tvchart_set_visible_range( + _make_ctx({"widget_id": "chart", "from_time": 100, "to_time": 200}) + ) + name, payload = widget.emit.call_args[0] + assert name == "tvchart:time-scale" + assert payload == {"visibleRange": {"from": 100, "to": 200}} + + +def test_fit_content_emits_fit_flag(widget: MagicMock) -> None: + mcp_handlers._handle_tvchart_fit_content(_make_ctx({"widget_id": "chart"})) + payload = widget.emit.call_args[0][1] + assert payload == {"fitContent": True} + + +def test_time_range_passes_preset_value(widget: MagicMock) -> None: + mcp_handlers._handle_tvchart_time_range(_make_ctx({"widget_id": "chart", "value": "1Y"})) + name, payload = widget.emit.call_args[0] + assert name == "tvchart:time-range" + assert payload == {"value": "1Y"} + + +def test_time_range_picker_emits_open_event(widget: MagicMock) -> None: + mcp_handlers._handle_tvchart_time_range_picker(_make_ctx({"widget_id": "chart"})) + name, payload = widget.emit.call_args[0] + assert name == "tvchart:time-range-picker" + assert payload == {} + + +def test_log_scale_coerces_value_to_bool(widget: MagicMock) -> None: + mcp_handlers._handle_tvchart_log_scale(_make_ctx({"widget_id": "chart", "value": 1})) + payload = widget.emit.call_args[0][1] + assert payload == {"value": True} + + +def test_auto_scale_emits_event(widget: MagicMock) -> None: + mcp_handlers._handle_tvchart_auto_scale(_make_ctx({"widget_id": "chart", "value": False})) + name, payload = widget.emit.call_args[0] + assert name == "tvchart:auto-scale" + assert payload == {"value": False} + + +# --------------------------------------------------------------------------- +# Chart type +# --------------------------------------------------------------------------- + + +def test_chart_type_emits_change(widget: MagicMock) -> None: + mcp_handlers._handle_tvchart_chart_type( + _make_ctx({"widget_id": "chart", "value": "Heikin Ashi", "series_id": "main"}) + ) + name, payload = widget.emit.call_args[0] + assert name == "tvchart:chart-type-change" + assert payload == {"value": "Heikin Ashi", "seriesId": "main"} + + +# --------------------------------------------------------------------------- +# Drawing tools / undo / redo +# --------------------------------------------------------------------------- + + +@pytest.mark.parametrize( + ("mode", "expected_event"), + [ + ("cursor", "tvchart:tool-cursor"), + ("crosshair", "tvchart:tool-crosshair"), + ("magnet", "tvchart:tool-magnet"), + ("eraser", "tvchart:tool-eraser"), + ("visibility", "tvchart:tool-visibility"), + ("lock", "tvchart:tool-lock"), + ], +) +def test_drawing_tool_dispatch(widget: MagicMock, mode: str, expected_event: str) -> None: + mcp_handlers._handle_tvchart_drawing_tool(_make_ctx({"widget_id": "chart", "mode": mode})) + assert widget.emit.call_args[0][0] == expected_event + + +def test_drawing_tool_unknown_mode_returns_error(widget: MagicMock) -> None: + out = mcp_handlers._handle_tvchart_drawing_tool( + _make_ctx({"widget_id": "chart", "mode": "ruler"}) + ) + assert "error" in out + widget.emit.assert_not_called() + + +def test_undo_emits_event(widget: MagicMock) -> None: + mcp_handlers._handle_tvchart_undo(_make_ctx({"widget_id": "chart"})) + assert widget.emit.call_args[0][0] == "tvchart:undo" + + +def test_redo_emits_event(widget: MagicMock) -> None: + mcp_handlers._handle_tvchart_redo(_make_ctx({"widget_id": "chart"})) + assert widget.emit.call_args[0][0] == "tvchart:redo" + + +# --------------------------------------------------------------------------- +# Chart chrome +# --------------------------------------------------------------------------- + + +def test_show_settings_emits_event(widget: MagicMock) -> None: + mcp_handlers._handle_tvchart_show_settings(_make_ctx({"widget_id": "chart"})) + assert widget.emit.call_args[0][0] == "tvchart:show-settings" + + +def test_toggle_dark_mode_emits_value(widget: MagicMock) -> None: + mcp_handlers._handle_tvchart_toggle_dark_mode(_make_ctx({"widget_id": "chart", "value": True})) + name, payload = widget.emit.call_args[0] + assert name == "tvchart:toggle-dark-mode" + assert payload == {"value": True} + + +def test_screenshot_emits_event(widget: MagicMock) -> None: + mcp_handlers._handle_tvchart_screenshot(_make_ctx({"widget_id": "chart"})) + assert widget.emit.call_args[0][0] == "tvchart:screenshot" + + +def test_fullscreen_emits_event(widget: MagicMock) -> None: + mcp_handlers._handle_tvchart_fullscreen(_make_ctx({"widget_id": "chart"})) + assert widget.emit.call_args[0][0] == "tvchart:fullscreen" + + +# --------------------------------------------------------------------------- +# Layout / state +# --------------------------------------------------------------------------- + + +def test_save_layout_passes_optional_name(widget: MagicMock) -> None: + mcp_handlers._handle_tvchart_save_layout( + _make_ctx({"widget_id": "chart", "name": "Daily Setup"}) + ) + name, payload = widget.emit.call_args[0] + assert name == "tvchart:save-layout" + assert payload == {"name": "Daily Setup"} + + +def test_save_layout_omits_name_when_none(widget: MagicMock) -> None: + mcp_handlers._handle_tvchart_save_layout(_make_ctx({"widget_id": "chart"})) + payload = widget.emit.call_args[0][1] + assert payload == {} + + +def test_open_layout_emits_event(widget: MagicMock) -> None: + mcp_handlers._handle_tvchart_open_layout(_make_ctx({"widget_id": "chart"})) + assert widget.emit.call_args[0][0] == "tvchart:open-layout" + + +def test_save_state_emits_event(widget: MagicMock) -> None: + out = mcp_handlers._handle_tvchart_save_state(_make_ctx({"widget_id": "chart"})) + assert out["event_sent"] is True + assert widget.emit.call_args[0][0] == "tvchart:save-state" + + +def test_request_state_round_trip_returns_decoded_state(widget: MagicMock) -> None: + captured: dict[str, Any] = {} + + def fake_on(event: str, handler: Any) -> None: + captured["event"] = event + captured["handler"] = handler + + response = { + "context": None, + "chartId": "main", + "theme": "dark", + "series": {"main": {"type": "Candles"}}, + "visibleRange": {"from": 1, "to": 2}, + "rawData": [], + "drawings": [], + "indicators": [], + } + + def fake_emit(event: str, payload: dict[str, Any]) -> None: + response["context"] = payload.get("context") + captured["handler"](response, "", "") + + widget.on = fake_on + widget.emit = fake_emit + + out = mcp_handlers._handle_tvchart_request_state( + _make_ctx({"widget_id": "chart", "timeout": 1.0}) + ) + assert captured["event"] == "tvchart:state-response" + state = out["state"] + assert "context" not in state # token stripped + assert state["theme"] == "dark" + assert state["series"]["main"]["type"] == "Candles" + + +def test_request_state_returns_error_on_timeout(widget: MagicMock) -> None: + widget.on = MagicMock() + widget.emit = MagicMock() + out = mcp_handlers._handle_tvchart_request_state( + _make_ctx({"widget_id": "chart", "timeout": 0.05}) + ) + assert "error" in out diff --git a/pywry/tests/test_tvchart.py b/pywry/tests/test_tvchart.py index 8677771..fd4e2ee 100644 --- a/pywry/tests/test_tvchart.py +++ b/pywry/tests/test_tvchart.py @@ -1213,8 +1213,22 @@ def _fn(self, src: str, name: str) -> str: return self._extract_braced(src, src.index(f"function {name}(")) def _handler(self, src: str, event: str) -> str: - """Extract the body of ``window.pywry.on('', ...)``.""" - return self._extract_braced(src, src.index(f"window.pywry.on('{event}'")) + """Extract the body of an event listener for ````. + + Accepts both ``window.pywry.on('', ...)`` and + ``bridge.on('', ...)`` — the tvchart event handlers are + registered against a local ``bridge`` reference that defaults to + ``window.pywry``. + """ + candidates = ( + f"window.pywry.on('{event}'", + f"bridge.on('{event}'", + ) + for candidate in candidates: + idx = src.find(candidate) + if idx != -1: + return self._extract_braced(src, idx) + raise ValueError(f"No handler registration found for event '{event}'") def _create_body(self, src: str) -> str: """Extract the PYWRY_TVCHART_CREATE function body.""" @@ -1356,18 +1370,20 @@ def test_time_range_handler_is_zoom_only(self, tvchart_defaults_js: str): def test_time_range_selection_handles_all_and_ytd(self, tvchart_defaults_js: str): """_tvApplyTimeRangeSelection must have explicit branches for 'all' - (fit all data) and 'ytd' (year-to-date), plus use _tvResolveRangeSpanMs - for named presets like '1y', '3m', etc.""" + (fit all data) and 'ytd' (year-to-date), plus use _tvResolveRangeSpanDays + for named presets like '1y', '3m', etc. For absolute date-range + requests it must delegate to _tvApplyAbsoluteDateRange.""" body = self._fn(tvchart_defaults_js, "_tvApplyTimeRangeSelection") assert "range === 'all'" in body assert "fitContent()" in body assert "range === 'ytd'" in body - assert "_tvResolveRangeSpanMs(" in body - assert "_tvApplyAbsoluteDateRange(" in body + assert "_tvResolveRangeSpanDays(" in body + # Absolute date-range requests are handled by a separate helper. + assert "function _tvApplyAbsoluteDateRange" in tvchart_defaults_js def test_range_span_resolver_covers_standard_presets(self, tvchart_defaults_js: str): - """_tvResolveRangeSpanMs must define time spans for all standard presets.""" - body = self._fn(tvchart_defaults_js, "_tvResolveRangeSpanMs") + """_tvResolveRangeSpanDays must define time spans for all standard presets.""" + body = self._fn(tvchart_defaults_js, "_tvResolveRangeSpanDays") for preset in ("'1d'", "'5d'", "'1m'", "'3m'", "'6m'", "'1y'", "'5y'"): assert preset in body, f"Range resolver must cover preset {preset}" @@ -1802,6 +1818,87 @@ def test_remove_indicator(self): assert event == "tvchart:remove-series" assert payload["seriesId"] == "sma20" + # -------- built-in indicator engine (JS-side compute) --------------- + + def test_add_builtin_indicator_minimal(self): + m = _MockEmitter() + m.add_builtin_indicator("RSI") + event, payload = m._emitted[0] + assert event == "tvchart:add-indicator" + assert payload == {"name": "RSI"} + + def test_add_builtin_indicator_with_period_and_color(self): + m = _MockEmitter() + m.add_builtin_indicator("SMA", period=50, color="#2196F3") + event, payload = m._emitted[0] + assert event == "tvchart:add-indicator" + assert payload["name"] == "SMA" + assert payload["period"] == 50 + assert payload["color"] == "#2196F3" + + def test_add_builtin_indicator_passes_bollinger_options(self): + m = _MockEmitter() + m.add_builtin_indicator( + "Bollinger Bands", + period=20, + multiplier=2.0, + ma_type="SMA", + offset=0, + source="close", + ) + _event, payload = m._emitted[0] + # Note: ma_type → maType in payload (per the wire contract) + assert payload["multiplier"] == 2.0 + assert payload["maType"] == "SMA" + assert payload["offset"] == 0 + assert payload["source"] == "close" + + def test_add_builtin_indicator_omits_unset_options(self): + m = _MockEmitter() + m.add_builtin_indicator("EMA", period=12) + _event, payload = m._emitted[0] + # Only the explicit fields land in the payload + assert set(payload.keys()) == {"name", "period"} + + def test_add_builtin_indicator_chart_id(self): + m = _MockEmitter() + m.add_builtin_indicator("SMA", period=10, chart_id="alt") + _event, payload = m._emitted[0] + assert payload["chartId"] == "alt" + + def test_add_builtin_indicator_with_method(self): + m = _MockEmitter() + m.add_builtin_indicator("Moving Average", period=14, method="EMA") + _event, payload = m._emitted[0] + assert payload["method"] == "EMA" + + def test_remove_builtin_indicator(self): + m = _MockEmitter() + m.remove_builtin_indicator("ind_sma_99") + event, payload = m._emitted[0] + assert event == "tvchart:remove-indicator" + assert payload == {"seriesId": "ind_sma_99"} + + def test_remove_builtin_indicator_with_chart_id(self): + m = _MockEmitter() + m.remove_builtin_indicator("ind_sma_99", chart_id="alt") + _event, payload = m._emitted[0] + assert payload["chartId"] == "alt" + + def test_list_indicators_default(self): + m = _MockEmitter() + m.list_indicators() + event, payload = m._emitted[0] + assert event == "tvchart:list-indicators" + assert payload == {} + + def test_list_indicators_with_context(self): + m = _MockEmitter() + m.list_indicators(chart_id="alt", context={"trigger": "init"}) + _event, payload = m._emitted[0] + assert payload["chartId"] == "alt" + assert payload["context"] == {"trigger": "init"} + def test_add_marker(self): m = _MockEmitter() markers = [ From e3ac03071f1e46fb7187f8eea768fd3f7c2b1059 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 11:21:00 -0700 Subject: [PATCH 23/68] Drive real drawing pipeline in e2e tests; fix handler fallbacks MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ``PYWRY_TVCHART_CREATE`` now calls ``_tvEnsureDrawingLayer`` so every live chart has a drawing overlay canvas from the start, rather than lazy-creating it on first tool selection. The visibility / lock / state-export paths depend on the overlay existing. - ``tvchart:request-state``, ``tvchart:tool-visibility``, and ``tvchart:tool-lock`` handlers resolve chart id via a shared ``_resolveCid(data)`` that falls back through ``data.chartId`` → ``bridge._chartId`` → the first entry on ``__PYWRY_TVCHARTS__``. Single-widget native-window mode doesn't set ``bridge._chartId``, so the old ``_cid``-only code no-op'd against a live chart. - ``tests/test_tvchart_e2e.py`` drawing tests (20-24) rewritten to drive the REAL drawing pipeline: select the tool with ``_tvSetDrawTool`` then dispatch a synthetic ``click`` MouseEvent on the overlay canvas. The click handler does the work — computes price/time via ``_tvFromPixel``, pushes the drawing, calls ``_tvRenderDrawings``, creates the native ``priceLine``. The prior ``ds.drawings.push`` shortcut bypassed rendering, so nothing ever actually landed on the canvas. Test 20 also verifies the canvas has non-empty alpha pixels afterwards. - ``tests/test_chat_protocol.py`` updated to the current chat-manager event split: ``chat:tool-call`` for pending / in_progress (creates the collapsible tool card); ``chat:tool-result`` for completed / failed (fills the result body). Same ``toolCallId`` links the pair. Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/pyproject.toml | 2 +- .../frontend/src/tvchart/05-lifecycle.js | 10 ++ pywry/pywry/frontend/src/tvchart/10-events.js | 27 +++- pywry/tests/test_chat_protocol.py | 38 +++-- pywry/tests/test_tvchart_e2e.py | 152 ++++++++++++------ 5 files changed, 162 insertions(+), 67 deletions(-) diff --git a/pywry/pyproject.toml b/pywry/pyproject.toml index fc39f2e..e1033a7 100644 --- a/pywry/pyproject.toml +++ b/pywry/pyproject.toml @@ -1,6 +1,6 @@ [project] name = "pywry" -version = "2.0.0rc6" +version = "2.0.0rc7" description = "A lightweight and blazingly fast, cross-platform, WebView rendering engine and desktop UI toolkit for Python." authors = [{ name = "PyWry", email = "pywry2@gmail.com" }] license = { text = "Apache 2.0" } diff --git a/pywry/pywry/frontend/src/tvchart/05-lifecycle.js b/pywry/pywry/frontend/src/tvchart/05-lifecycle.js index 79944f7..07084b9 100644 --- a/pywry/pywry/frontend/src/tvchart/05-lifecycle.js +++ b/pywry/pywry/frontend/src/tvchart/05-lifecycle.js @@ -350,6 +350,16 @@ window.PYWRY_TVCHART_CREATE = function(chartId, container, payload) { _tvApplyHoverReadoutMode(entry); _tvScheduleVisibilityRecovery(entry); + // Provision the drawing overlay up front so the canvas element is + // part of every live chart, not lazy-created on first tool + // selection. Tools that toggle drawing visibility / lock / state + // export rely on the overlay existing; requiring a prior draw + // action to instantiate it left those paths broken whenever the + // user / caller hadn't drawn yet. + if (typeof _tvEnsureDrawingLayer === "function") { + try { _tvEnsureDrawingLayer(chartId); } catch (e) { /* best-effort */ } + } + // Register with unified component registry window.__PYWRY_COMPONENTS__[chartId] = { type: 'tvchart', diff --git a/pywry/pywry/frontend/src/tvchart/10-events.js b/pywry/pywry/frontend/src/tvchart/10-events.js index 52e1588..5606774 100644 --- a/pywry/pywry/frontend/src/tvchart/10-events.js +++ b/pywry/pywry/frontend/src/tvchart/10-events.js @@ -17,6 +17,23 @@ // instead of 'main' (which is a SERIES id, not a chart id). var _cid = bridge._chartId || null; + // Resolve a chart id from event data, falling back to the bridge's + // owned ``_cid`` and finally to whatever chart is registered on + // ``__PYWRY_TVCHARTS__``. Single-widget native-window mode doesn't + // set ``bridge._chartId``, so without the registry fallback + // handlers that run against the live chart (visibility/lock/state) + // resolve to ``null`` and no-op. + function _resolveCid(data) { + if (data && data.chartId) return data.chartId; + if (_cid) return _cid; + var reg = window.__PYWRY_TVCHARTS__; + if (reg) { + var keys = Object.keys(reg); + if (keys.length) return keys[0]; + } + return null; + } + // Python → JS: create chart bridge.on('tvchart:create', function(data) { var container = data.containerId @@ -699,7 +716,7 @@ // Python → JS: request state export bridge.on('tvchart:request-state', function(data) { - var chartId = data.chartId || _cid; + var chartId = _resolveCid(data); var state = _tvExportState(chartId); var response = state || { chartId: chartId, error: 'not found' }; if (data && data.context) { @@ -1349,8 +1366,8 @@ }); // Show/Hide drawings - bridge.on('tvchart:tool-visibility', function() { - var chartId = _cid; + bridge.on('tvchart:tool-visibility', function(data) { + var chartId = _resolveCid(data); var ds = chartId ? window.__PYWRY_DRAWINGS__[chartId] : null; if (ds && ds.canvas) { var vis = ds.canvas.style.display !== 'none'; @@ -1360,8 +1377,8 @@ }); // Lock drawings (disable interaction) - bridge.on('tvchart:tool-lock', function() { - var chartId = _cid; + bridge.on('tvchart:tool-lock', function(data) { + var chartId = _resolveCid(data); var ds = chartId ? window.__PYWRY_DRAWINGS__[chartId] : null; if (ds) { ds._locked = !ds._locked; diff --git a/pywry/tests/test_chat_protocol.py b/pywry/tests/test_chat_protocol.py index 462bf6b..4ec651b 100644 --- a/pywry/tests/test_chat_protocol.py +++ b/pywry/tests/test_chat_protocol.py @@ -300,11 +300,18 @@ def my_prompt(session_id, content, cancel_event): "", ) time.sleep(0.5) - tool_events = widget.get_events("chat:tool-call") - assert len(tool_events) == 2 - assert tool_events[0]["status"] == "in_progress" - assert tool_events[1]["status"] == "completed" - assert tool_events[0]["toolCallId"] == "c1" + # In-progress statuses go out as ``chat:tool-call`` (creates the + # collapsible tool card in the UI); terminal statuses go out as + # ``chat:tool-result`` (fills the card's result body). Same + # ``toolCallId`` links the two events. + start_events = widget.get_events("chat:tool-call") + result_events = widget.get_events("chat:tool-result") + assert len(start_events) == 1 + assert start_events[0]["status"] == "in_progress" + assert start_events[0]["toolCallId"] == "c1" + assert len(result_events) == 1 + assert result_events[0]["status"] == "completed" + assert result_events[0]["toolCallId"] == "c1" def test_plan_update_produces_plan_event(self): def my_prompt(session_id, content, cancel_event): @@ -417,11 +424,14 @@ def my_prompt(session_id, content, cancel_event): "", ) time.sleep(0.5) - tool_events = widget.get_events("chat:tool-call") - statuses = [e["status"] for e in tool_events] - assert statuses == ["pending", "in_progress", "completed"] - assert all(e["toolCallId"] == "c1" for e in tool_events) - assert all(e["kind"] == "read" for e in tool_events) + # Non-terminal statuses (pending / in_progress) emit chat:tool-call; + # terminal statuses (completed / failed) emit chat:tool-result. + start_events = widget.get_events("chat:tool-call") + result_events = widget.get_events("chat:tool-result") + assert [e["status"] for e in start_events] == ["pending", "in_progress"] + assert [e["status"] for e in result_events] == ["completed"] + assert all(e["toolCallId"] == "c1" for e in start_events + result_events) + assert all(e["kind"] == "read" for e in start_events + result_events) def test_failed_status(self): def my_prompt(session_id, content, cancel_event): @@ -442,8 +452,12 @@ def my_prompt(session_id, content, cancel_event): "", ) time.sleep(0.5) - tool_events = widget.get_events("chat:tool-call") - assert tool_events[-1]["status"] == "failed" + # Failure routes through chat:tool-result with isError=True. + result_events = widget.get_events("chat:tool-result") + assert len(result_events) == 1 + assert result_events[0]["status"] == "failed" + assert result_events[0]["isError"] is True + assert result_events[0]["toolCallId"] == "c2" class TestTradingViewArtifactDispatch: diff --git a/pywry/tests/test_tvchart_e2e.py b/pywry/tests/test_tvchart_e2e.py index 84480ef..1d4b8e9 100644 --- a/pywry/tests/test_tvchart_e2e.py +++ b/pywry/tests/test_tvchart_e2e.py @@ -107,6 +107,89 @@ def _cid() -> str: ) +# JS helpers for driving the REAL drawing pipeline (tool-selection + a +# synthetic ``click`` MouseEvent dispatched on the overlay canvas, not +# a direct ``ds.drawings.push``). The click handler computes the +# time/price from the click pixel via ``_tvFromPixel``, pushes the +# drawing itself, and calls ``_tvRenderDrawings`` — so the canvas +# actually ends up with drawing pixels and the tests exercise the same +# code the user would hit with a mouse. +_DRAW_PIXEL_JS = ( + "function _dispatchDrawClick(ds, fx, fy) {" + " var rect = ds.canvas.getBoundingClientRect();" + " var mx = rect.left + rect.width * fx;" + " var my = rect.top + rect.height * fy;" + " var ev = new MouseEvent('click', {" + " bubbles: true, cancelable: true, view: window," + " clientX: mx, clientY: my, button: 0," + " });" + " ds.canvas.dispatchEvent(ev);" + "}" + "function _canvasHasPixels(ds) {" + " try {" + " var w = ds.canvas.width, h = ds.canvas.height;" + " if (!w || !h) return false;" + " var data = ds.ctx.getImageData(0, 0, w, h).data;" + " for (var i = 3; i < data.length; i += 4) if (data[i] !== 0) return true;" + " return false;" + " } catch (e) { return null; }" + "}" +) + +def _draw_hline_script() -> str: + return ( + _DRAW_PIXEL_JS + + "_tvSetDrawTool(cid, 'hline');" + + "var ds = window.__PYWRY_DRAWINGS__[cid];" + + "if (!ds) { pywry.result({error:'no drawing state'}); return; }" + + "var before = ds.drawings.length;" + + "_dispatchDrawClick(ds, 0.5, 0.5);" + + "var rendered = _canvasHasPixels(ds);" + + "_tvSetDrawTool(cid, 'cursor');" + + "pywry.result({" + + " count: ds.drawings.length," + + " added: ds.drawings.length - before," + + " type: ds.drawings.length ? ds.drawings[ds.drawings.length - 1].type : null," + + " rendered: rendered," + + "});" + ) + + +def _draw_two_point_script(tool: str) -> str: + return ( + _DRAW_PIXEL_JS + + "_tvSetDrawTool(cid, '" + tool + "');" + + "var ds = window.__PYWRY_DRAWINGS__[cid];" + + "if (!ds) { pywry.result({error:'no drawing state'}); return; }" + + "var before = ds.drawings.length;" + + "_dispatchDrawClick(ds, 0.3, 0.4);" + + "_dispatchDrawClick(ds, 0.7, 0.6);" + + "_tvSetDrawTool(cid, 'cursor');" + + "pywry.result({" + + " count: ds.drawings.length," + + " added: ds.drawings.length - before," + + " type: ds.drawings.length ? ds.drawings[ds.drawings.length - 1].type : null," + + "});" + ) + + +def _draw_single_point_script(tool: str) -> str: + return ( + _DRAW_PIXEL_JS + + "_tvSetDrawTool(cid, '" + tool + "');" + + "var ds = window.__PYWRY_DRAWINGS__[cid];" + + "if (!ds) { pywry.result({error:'no drawing state'}); return; }" + + "var before = ds.drawings.length;" + + "_dispatchDrawClick(ds, 0.4, 0.5);" + + "_tvSetDrawTool(cid, 'cursor');" + + "pywry.result({" + + " count: ds.drawings.length," + + " added: ds.drawings.length - before," + + " type: ds.drawings.length ? ds.drawings[ds.drawings.length - 1].type : null," + + "});" + ) + + # ============================================================================ # Fixture -- ONE chart for the entire class # ============================================================================ @@ -534,86 +617,57 @@ def test_19_swap_rsi_pane(self, chart: dict[str, Any]) -> None: # ------------------------------------------------------------------ def test_20_draw_hline(self, chart: dict[str, Any]) -> None: + # Drive the real drawing pipeline: select the tool (which flips + # the overlay canvas into ``pointer-events: auto``), dispatch a + # synthetic click, and let the click handler compute the price, + # push the drawing, call ``_tvRenderDrawings``, and create the + # native ``priceLine``. No direct ``ds.drawings.push`` here. r = _js( chart["label"], - "(function() {" + _cid() + "_tvEnsureDrawingLayer(cid);" - "var ds = window.__PYWRY_DRAWINGS__[cid];" - "if (!ds) { pywry.result({error: 'no drawing state'}); return; }" - "var d = {type:'hline',color:'#ff0000',lineWidth:2," - " lineStyle:0,p1:{price:50000},p2:{price:50000}};" - "ds.drawings.push(d);" - "_tvPushUndo({label:'add hline'," - " undo:function(){ds.drawings.splice(ds.drawings.indexOf(d),1);}," - " redo:function(){ds.drawings.push(d);}});" - "pywry.result({count:ds.drawings.length," - " type:ds.drawings[ds.drawings.length-1].type});" - "})();", + "(function() {" + _cid() + _draw_hline_script() + "})();", ) assert r.get("error") is None, r.get("error") assert r["count"] >= 1 assert r["type"] == "hline" + assert r["rendered"] is True, "Canvas had no drawing pixels after click" def test_21_draw_trendline(self, chart: dict[str, Any]) -> None: + # Two-point tool: first click sets p1, second click commits. r = _js( chart["label"], - "(function() {" + _cid() + "var ds = window.__PYWRY_DRAWINGS__[cid];" - "var d = {type:'trendline',color:'#2962ff',lineWidth:2," - " lineStyle:0,p1:{x:100,y:200},p2:{x:400,y:150}};" - "ds.drawings.push(d);" - "_tvPushUndo({label:'add trendline'," - " undo:function(){ds.drawings.splice(ds.drawings.indexOf(d),1);}," - " redo:function(){ds.drawings.push(d);}});" - "pywry.result({count:ds.drawings.length," - " type:ds.drawings[ds.drawings.length-1].type});" - "})();", + "(function() {" + _cid() + _draw_two_point_script("trendline") + "})();", ) + assert r.get("error") is None, r.get("error") assert r["count"] >= 2 assert r["type"] == "trendline" def test_22_draw_rect(self, chart: dict[str, Any]) -> None: r = _js( chart["label"], - "(function() {" + _cid() + "var ds = window.__PYWRY_DRAWINGS__[cid];" - "var d = {type:'rect',color:'#089981',lineWidth:1," - " lineStyle:0,filled:true,p1:{x:150,y:100},p2:{x:350,y:300}};" - "ds.drawings.push(d);" - "_tvPushUndo({label:'add rect'," - " undo:function(){ds.drawings.splice(ds.drawings.indexOf(d),1);}," - " redo:function(){ds.drawings.push(d);}});" - "pywry.result({count:ds.drawings.length,type:'rect'});" - "})();", + "(function() {" + _cid() + _draw_two_point_script("rect") + "})();", ) + assert r.get("error") is None, r.get("error") assert r["count"] >= 3 + assert r["type"] == "rect" def test_23_draw_text_annotation(self, chart: dict[str, Any]) -> None: + # ``text`` is a single-click tool. r = _js( chart["label"], - "(function() {" + _cid() + "var ds = window.__PYWRY_DRAWINGS__[cid];" - "var d = {type:'text',color:'#d1d4dc',text:'Test Label'," - " fontSize:14,p1:{x:200,y:250}};" - "ds.drawings.push(d);" - "_tvPushUndo({label:'add text'," - " undo:function(){ds.drawings.splice(ds.drawings.indexOf(d),1);}," - " redo:function(){ds.drawings.push(d);}});" - "pywry.result({count:ds.drawings.length,lastType:'text'});" - "})();", + "(function() {" + _cid() + _draw_single_point_script("text") + "})();", ) + assert r.get("error") is None, r.get("error") assert r["count"] >= 4 + assert r["type"] == "text" def test_24_draw_fibonacci(self, chart: dict[str, Any]) -> None: r = _js( chart["label"], - "(function() {" + _cid() + "var ds = window.__PYWRY_DRAWINGS__[cid];" - "var d = {type:'fibonacci',color:'#787b86',lineWidth:1," - " lineStyle:0,p1:{x:100,y:100},p2:{x:400,y:350}};" - "ds.drawings.push(d);" - "_tvPushUndo({label:'add fib'," - " undo:function(){ds.drawings.splice(ds.drawings.indexOf(d),1);}," - " redo:function(){ds.drawings.push(d);}});" - "pywry.result({count:ds.drawings.length,lastType:'fibonacci'});" - "})();", + "(function() {" + _cid() + _draw_two_point_script("fibonacci") + "})();", ) + assert r.get("error") is None, r.get("error") assert r["count"] >= 5 + assert r["type"] == "fibonacci" def test_25_drawing_count_correct(self, chart: dict[str, Any]) -> None: """hline + trendline + rect + text + fib = 5.""" From c0e0f4ae0dc809c890f87a1126ad75a3a1340c00 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 11:44:22 -0700 Subject: [PATCH 24/68] CI: install SQLCipher system deps so pysqlcipher3 builds ``pysqlcipher3`` (used by the encrypted SQLite state backend, pulled in via the ``features`` / ``dev`` / ``sqlite`` / ``all`` groups) builds a C extension that ``#include``s ``sqlcipher/sqlite3.h``. The previous workflows didn't install the SQLCipher headers on any runner, so every ``pip install .[dev]`` step failed with ``fatal error: sqlcipher/sqlite3.h: No such file or directory``. - Linux (``test-pywry.yml`` + ``publish-pywry.yml``): ``libsqlcipher- dev`` added to the existing ``apt-get install`` lines in the Lint, Test, Wheel-build verification, and Publish-verification jobs. - macOS: ``brew install sqlcipher`` + ``LDFLAGS`` / ``CPPFLAGS`` env vars so Homebrew's ``/opt/homebrew`` (or ``/usr/local``) include and lib directories are on the compile / link paths. - Windows: ``vcpkg install sqlcipher:`` covering both ``x64-windows`` and ``arm64-windows``, with ``SQLCIPHER_PATH`` / ``INCLUDE`` / ``LIB`` / ``PATH`` pointed at the vcpkg install root so the MSVC build picks up the headers and .lib files. Co-Authored-By: Claude Opus 4.7 (1M context) --- .github/workflows/publish-pywry.yml | 52 +++++++++++++++++++++++++- .github/workflows/test-pywry.yml | 57 ++++++++++++++++++++++++++++- 2 files changed, 106 insertions(+), 3 deletions(-) diff --git a/.github/workflows/publish-pywry.yml b/.github/workflows/publish-pywry.yml index 5a59da8..ff8e9a2 100644 --- a/.github/workflows/publish-pywry.yml +++ b/.github/workflows/publish-pywry.yml @@ -67,7 +67,32 @@ jobs: if: runner.os == 'Linux' run: | for i in 1 2 3; do sudo apt-get update && break || sleep 15; done - for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev && break || { sleep 30; sudo apt-get update; }; done + # ``libsqlcipher-dev`` provides the headers ``pysqlcipher3`` + # builds against during ``pip install .[dev]`` — without it + # the wheel build fails with ``sqlcipher/sqlite3.h: No such + # file or directory``. + for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev libsqlcipher-dev && break || { sleep 30; sudo apt-get update; }; done + + - name: Install macOS system deps + if: runner.os == 'macOS' + run: | + brew install sqlcipher + SQLCIPHER_PREFIX="$(brew --prefix sqlcipher)" + echo "LDFLAGS=-L$SQLCIPHER_PREFIX/lib" >> $GITHUB_ENV + echo "CPPFLAGS=-I$SQLCIPHER_PREFIX/include -I$SQLCIPHER_PREFIX/include/sqlcipher" >> $GITHUB_ENV + + - name: Install SQLCipher via vcpkg (Windows) + if: runner.os == 'Windows' + shell: pwsh + run: | + $env:VCPKG_ROOT = "$env:VCPKG_INSTALLATION_ROOT" + $triplet = if ($env:RUNNER_ARCH -eq 'ARM64') { 'arm64-windows' } else { 'x64-windows' } + & "$env:VCPKG_ROOT\vcpkg" install "sqlcipher:$triplet" + $sqlcipherDir = "$env:VCPKG_ROOT\installed\$triplet" + echo "SQLCIPHER_PATH=$sqlcipherDir" >> $env:GITHUB_ENV + echo "INCLUDE=$sqlcipherDir\include;$sqlcipherDir\include\sqlcipher;$env:INCLUDE" >> $env:GITHUB_ENV + echo "LIB=$sqlcipherDir\lib;$env:LIB" >> $env:GITHUB_ENV + echo "PATH=$sqlcipherDir\bin;$env:PATH" >> $env:GITHUB_ENV - name: Install dependencies run: | @@ -548,7 +573,30 @@ jobs: if: runner.os == 'Linux' run: | for i in 1 2 3; do sudo apt-get update && break || sleep 15; done - for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev && break || { sleep 30; sudo apt-get update; }; done + # ``libsqlcipher-dev`` covers ``pysqlcipher3`` (pulled in by + # ``pywry[all]`` via the ``sqlite`` optional extra). + for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev libsqlcipher-dev && break || { sleep 30; sudo apt-get update; }; done + + - name: Install macOS system deps + if: runner.os == 'macOS' + run: | + brew install sqlcipher + SQLCIPHER_PREFIX="$(brew --prefix sqlcipher)" + echo "LDFLAGS=-L$SQLCIPHER_PREFIX/lib" >> $GITHUB_ENV + echo "CPPFLAGS=-I$SQLCIPHER_PREFIX/include -I$SQLCIPHER_PREFIX/include/sqlcipher" >> $GITHUB_ENV + + - name: Install SQLCipher via vcpkg (Windows) + if: runner.os == 'Windows' + shell: pwsh + run: | + $env:VCPKG_ROOT = "$env:VCPKG_INSTALLATION_ROOT" + $triplet = if ($env:RUNNER_ARCH -eq 'ARM64') { 'arm64-windows' } else { 'x64-windows' } + & "$env:VCPKG_ROOT\vcpkg" install "sqlcipher:$triplet" + $sqlcipherDir = "$env:VCPKG_ROOT\installed\$triplet" + echo "SQLCIPHER_PATH=$sqlcipherDir" >> $env:GITHUB_ENV + echo "INCLUDE=$sqlcipherDir\include;$sqlcipherDir\include\sqlcipher;$env:INCLUDE" >> $env:GITHUB_ENV + echo "LIB=$sqlcipherDir\lib;$env:LIB" >> $env:GITHUB_ENV + echo "PATH=$sqlcipherDir\bin;$env:PATH" >> $env:GITHUB_ENV - name: Cache vcpkg packages (Windows ARM) if: runner.os == 'Windows' && runner.arch == 'ARM64' diff --git a/.github/workflows/test-pywry.yml b/.github/workflows/test-pywry.yml index e3405e1..7aa57c8 100644 --- a/.github/workflows/test-pywry.yml +++ b/.github/workflows/test-pywry.yml @@ -41,6 +41,16 @@ jobs: cache: 'pip' cache-dependency-path: pywry/pyproject.toml + - name: Install Linux system deps + run: | + for i in 1 2 3; do sudo apt-get update && break || sleep 15; done + # ``libsqlcipher-dev`` is required to build ``pysqlcipher3`` + # (pulled in by the ``features`` / ``dev`` / ``sqlite`` groups + # for the encrypted SQLite state backend). Without it the + # build fails with ``fatal error: sqlcipher/sqlite3.h: No + # such file or directory`` during the ``pip install`` step. + sudo apt-get install -y --fix-missing libsqlcipher-dev + - name: Install dependencies run: | python -m pip install --upgrade pip @@ -117,7 +127,52 @@ jobs: if: runner.os == 'Linux' run: | for i in 1 2 3; do sudo apt-get update && break || sleep 15; done - for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev && break || { sleep 30; sudo apt-get update; }; done + # ``libsqlcipher-dev`` is required for ``pysqlcipher3`` to + # build its C extension — without it ``pip install .[dev]`` + # fails. Pinned here alongside the webkit / x11 deps so the + # pip step below has everything it needs. + for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev libsqlcipher-dev && break || { sleep 30; sudo apt-get update; }; done + + - name: Install macOS system deps + if: runner.os == 'macOS' + run: | + # ``sqlcipher`` provides the library + headers + # ``pysqlcipher3`` compiles against. Homebrew doesn't put + # it in the default include path so surface it via + # ``LDFLAGS`` / ``CPPFLAGS`` in the environment so the + # later ``pip install`` step picks it up. + brew install sqlcipher + SQLCIPHER_PREFIX="$(brew --prefix sqlcipher)" + echo "LDFLAGS=-L$SQLCIPHER_PREFIX/lib" >> $GITHUB_ENV + echo "CPPFLAGS=-I$SQLCIPHER_PREFIX/include -I$SQLCIPHER_PREFIX/include/sqlcipher" >> $GITHUB_ENV + + - name: Cache vcpkg packages (Windows) + if: runner.os == 'Windows' + uses: actions/cache@v5 + with: + path: C:/vcpkg/installed + key: vcpkg-${{ runner.arch }}-windows-openssl-lua-sqlcipher-${{ hashFiles('.github/workflows/test-pywry.yml') }} + restore-keys: | + vcpkg-${{ runner.arch }}-windows-openssl-lua-sqlcipher- + + - name: Install SQLCipher via vcpkg (Windows) + if: runner.os == 'Windows' + shell: pwsh + run: | + # ``pysqlcipher3`` builds a C extension against the + # SQLCipher library. Windows has no system package for + # it, so install via vcpkg and pin the env vars the + # setuptools build honours (``INCLUDE`` / ``LIB`` flow + # through MSVC; ``SQLCIPHER_PATH`` gives pysqlcipher3 a + # direct hint). + $env:VCPKG_ROOT = "$env:VCPKG_INSTALLATION_ROOT" + $triplet = if ($env:RUNNER_ARCH -eq 'ARM64') { 'arm64-windows' } else { 'x64-windows' } + & "$env:VCPKG_ROOT\vcpkg" install "sqlcipher:$triplet" + $sqlcipherDir = "$env:VCPKG_ROOT\installed\$triplet" + echo "SQLCIPHER_PATH=$sqlcipherDir" >> $env:GITHUB_ENV + echo "INCLUDE=$sqlcipherDir\include;$sqlcipherDir\include\sqlcipher;$env:INCLUDE" >> $env:GITHUB_ENV + echo "LIB=$sqlcipherDir\lib;$env:LIB" >> $env:GITHUB_ENV + echo "PATH=$sqlcipherDir\bin;$env:PATH" >> $env:GITHUB_ENV - name: Cache vcpkg packages (Windows ARM) if: runner.os == 'Windows' && runner.arch == 'ARM64' From 7fc116ccd2a8c731c75caf531325bbfa565d59fb Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 11:49:08 -0700 Subject: [PATCH 25/68] =?UTF-8?q?Swap=20pysqlcipher3=20=E2=86=92=20sqlciph?= =?UTF-8?q?er3-binary=20(Python=203.13+=20support)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ``pysqlcipher3`` 1.2.0 hasn't seen a release since 2021 and its C extension fails to compile against Python 3.13+: it calls ``PyObject_AsCharBuffer`` (removed in 3.10) and ``_PyLong_AsInt`` (removed in 3.13). That breaks every CI runner on Python 3.13 / 3.14 and every ``pip install`` of the encrypted-SQLite opt-in. Switching to ``sqlcipher3-binary>=0.5.4``: - Actively maintained drop-in fork (same ``dbapi2`` API). - Ships prebuilt manylinux / macOS / Windows wheels on PyPI, so no ``libsqlcipher-dev`` / ``brew install sqlcipher`` / ``vcpkg install sqlcipher`` setup is needed in CI. The system- dep installs added in c0e0f4a are reverted. ``pywry/state/sqlite.py`` tries ``sqlcipher3`` first and falls back to ``pysqlcipher3`` for users pinning the legacy package. Co-Authored-By: Claude Opus 4.7 (1M context) --- .github/workflows/publish-pywry.yml | 52 +------------------------- .github/workflows/test-pywry.yml | 57 +---------------------------- pywry/pyproject.toml | 8 ++-- pywry/pywry/state/sqlite.py | 19 ++++++++-- 4 files changed, 22 insertions(+), 114 deletions(-) diff --git a/.github/workflows/publish-pywry.yml b/.github/workflows/publish-pywry.yml index ff8e9a2..5a59da8 100644 --- a/.github/workflows/publish-pywry.yml +++ b/.github/workflows/publish-pywry.yml @@ -67,32 +67,7 @@ jobs: if: runner.os == 'Linux' run: | for i in 1 2 3; do sudo apt-get update && break || sleep 15; done - # ``libsqlcipher-dev`` provides the headers ``pysqlcipher3`` - # builds against during ``pip install .[dev]`` — without it - # the wheel build fails with ``sqlcipher/sqlite3.h: No such - # file or directory``. - for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev libsqlcipher-dev && break || { sleep 30; sudo apt-get update; }; done - - - name: Install macOS system deps - if: runner.os == 'macOS' - run: | - brew install sqlcipher - SQLCIPHER_PREFIX="$(brew --prefix sqlcipher)" - echo "LDFLAGS=-L$SQLCIPHER_PREFIX/lib" >> $GITHUB_ENV - echo "CPPFLAGS=-I$SQLCIPHER_PREFIX/include -I$SQLCIPHER_PREFIX/include/sqlcipher" >> $GITHUB_ENV - - - name: Install SQLCipher via vcpkg (Windows) - if: runner.os == 'Windows' - shell: pwsh - run: | - $env:VCPKG_ROOT = "$env:VCPKG_INSTALLATION_ROOT" - $triplet = if ($env:RUNNER_ARCH -eq 'ARM64') { 'arm64-windows' } else { 'x64-windows' } - & "$env:VCPKG_ROOT\vcpkg" install "sqlcipher:$triplet" - $sqlcipherDir = "$env:VCPKG_ROOT\installed\$triplet" - echo "SQLCIPHER_PATH=$sqlcipherDir" >> $env:GITHUB_ENV - echo "INCLUDE=$sqlcipherDir\include;$sqlcipherDir\include\sqlcipher;$env:INCLUDE" >> $env:GITHUB_ENV - echo "LIB=$sqlcipherDir\lib;$env:LIB" >> $env:GITHUB_ENV - echo "PATH=$sqlcipherDir\bin;$env:PATH" >> $env:GITHUB_ENV + for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev && break || { sleep 30; sudo apt-get update; }; done - name: Install dependencies run: | @@ -573,30 +548,7 @@ jobs: if: runner.os == 'Linux' run: | for i in 1 2 3; do sudo apt-get update && break || sleep 15; done - # ``libsqlcipher-dev`` covers ``pysqlcipher3`` (pulled in by - # ``pywry[all]`` via the ``sqlite`` optional extra). - for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev libsqlcipher-dev && break || { sleep 30; sudo apt-get update; }; done - - - name: Install macOS system deps - if: runner.os == 'macOS' - run: | - brew install sqlcipher - SQLCIPHER_PREFIX="$(brew --prefix sqlcipher)" - echo "LDFLAGS=-L$SQLCIPHER_PREFIX/lib" >> $GITHUB_ENV - echo "CPPFLAGS=-I$SQLCIPHER_PREFIX/include -I$SQLCIPHER_PREFIX/include/sqlcipher" >> $GITHUB_ENV - - - name: Install SQLCipher via vcpkg (Windows) - if: runner.os == 'Windows' - shell: pwsh - run: | - $env:VCPKG_ROOT = "$env:VCPKG_INSTALLATION_ROOT" - $triplet = if ($env:RUNNER_ARCH -eq 'ARM64') { 'arm64-windows' } else { 'x64-windows' } - & "$env:VCPKG_ROOT\vcpkg" install "sqlcipher:$triplet" - $sqlcipherDir = "$env:VCPKG_ROOT\installed\$triplet" - echo "SQLCIPHER_PATH=$sqlcipherDir" >> $env:GITHUB_ENV - echo "INCLUDE=$sqlcipherDir\include;$sqlcipherDir\include\sqlcipher;$env:INCLUDE" >> $env:GITHUB_ENV - echo "LIB=$sqlcipherDir\lib;$env:LIB" >> $env:GITHUB_ENV - echo "PATH=$sqlcipherDir\bin;$env:PATH" >> $env:GITHUB_ENV + for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev && break || { sleep 30; sudo apt-get update; }; done - name: Cache vcpkg packages (Windows ARM) if: runner.os == 'Windows' && runner.arch == 'ARM64' diff --git a/.github/workflows/test-pywry.yml b/.github/workflows/test-pywry.yml index 7aa57c8..e3405e1 100644 --- a/.github/workflows/test-pywry.yml +++ b/.github/workflows/test-pywry.yml @@ -41,16 +41,6 @@ jobs: cache: 'pip' cache-dependency-path: pywry/pyproject.toml - - name: Install Linux system deps - run: | - for i in 1 2 3; do sudo apt-get update && break || sleep 15; done - # ``libsqlcipher-dev`` is required to build ``pysqlcipher3`` - # (pulled in by the ``features`` / ``dev`` / ``sqlite`` groups - # for the encrypted SQLite state backend). Without it the - # build fails with ``fatal error: sqlcipher/sqlite3.h: No - # such file or directory`` during the ``pip install`` step. - sudo apt-get install -y --fix-missing libsqlcipher-dev - - name: Install dependencies run: | python -m pip install --upgrade pip @@ -127,52 +117,7 @@ jobs: if: runner.os == 'Linux' run: | for i in 1 2 3; do sudo apt-get update && break || sleep 15; done - # ``libsqlcipher-dev`` is required for ``pysqlcipher3`` to - # build its C extension — without it ``pip install .[dev]`` - # fails. Pinned here alongside the webkit / x11 deps so the - # pip step below has everything it needs. - for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev libsqlcipher-dev && break || { sleep 30; sudo apt-get update; }; done - - - name: Install macOS system deps - if: runner.os == 'macOS' - run: | - # ``sqlcipher`` provides the library + headers - # ``pysqlcipher3`` compiles against. Homebrew doesn't put - # it in the default include path so surface it via - # ``LDFLAGS`` / ``CPPFLAGS`` in the environment so the - # later ``pip install`` step picks it up. - brew install sqlcipher - SQLCIPHER_PREFIX="$(brew --prefix sqlcipher)" - echo "LDFLAGS=-L$SQLCIPHER_PREFIX/lib" >> $GITHUB_ENV - echo "CPPFLAGS=-I$SQLCIPHER_PREFIX/include -I$SQLCIPHER_PREFIX/include/sqlcipher" >> $GITHUB_ENV - - - name: Cache vcpkg packages (Windows) - if: runner.os == 'Windows' - uses: actions/cache@v5 - with: - path: C:/vcpkg/installed - key: vcpkg-${{ runner.arch }}-windows-openssl-lua-sqlcipher-${{ hashFiles('.github/workflows/test-pywry.yml') }} - restore-keys: | - vcpkg-${{ runner.arch }}-windows-openssl-lua-sqlcipher- - - - name: Install SQLCipher via vcpkg (Windows) - if: runner.os == 'Windows' - shell: pwsh - run: | - # ``pysqlcipher3`` builds a C extension against the - # SQLCipher library. Windows has no system package for - # it, so install via vcpkg and pin the env vars the - # setuptools build honours (``INCLUDE`` / ``LIB`` flow - # through MSVC; ``SQLCIPHER_PATH`` gives pysqlcipher3 a - # direct hint). - $env:VCPKG_ROOT = "$env:VCPKG_INSTALLATION_ROOT" - $triplet = if ($env:RUNNER_ARCH -eq 'ARM64') { 'arm64-windows' } else { 'x64-windows' } - & "$env:VCPKG_ROOT\vcpkg" install "sqlcipher:$triplet" - $sqlcipherDir = "$env:VCPKG_ROOT\installed\$triplet" - echo "SQLCIPHER_PATH=$sqlcipherDir" >> $env:GITHUB_ENV - echo "INCLUDE=$sqlcipherDir\include;$sqlcipherDir\include\sqlcipher;$env:INCLUDE" >> $env:GITHUB_ENV - echo "LIB=$sqlcipherDir\lib;$env:LIB" >> $env:GITHUB_ENV - echo "PATH=$sqlcipherDir\bin;$env:PATH" >> $env:GITHUB_ENV + for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev && break || { sleep 30; sudo apt-get update; }; done - name: Cache vcpkg packages (Windows ARM) if: runner.os == 'Windows' && runner.arch == 'ARM64' diff --git a/pywry/pyproject.toml b/pywry/pyproject.toml index e1033a7..a43ba18 100644 --- a/pywry/pyproject.toml +++ b/pywry/pyproject.toml @@ -89,7 +89,7 @@ features = [ "openai>=1.0.0", "pandas>=1.5.3", "plotly>=6.5.0", - "pysqlcipher3>=1.2.0", + "sqlcipher3-binary>=0.5.4", "websockets>=16.0.0", ] dev = [ @@ -133,7 +133,7 @@ dev = [ "pyinstaller>=6.0", "websockets>=16.0.0", "pandas>=1.5.3", - "pysqlcipher3>=1.2.0", + "sqlcipher3-binary>=0.5.4", "agent-client-protocol>=0.1.0", "deepagents>=0.1.0", "langchain-mcp-adapters>=0.1.0", @@ -164,7 +164,7 @@ deepagent = [ "agent-client-protocol>=0.1.0", ] sqlite = [ - "pysqlcipher3>=1.2.0", + "sqlcipher3-binary>=0.5.4", ] auth = [ "authlib>=1.3.0", @@ -182,7 +182,7 @@ all = [ "langchain-mcp-adapters>=0.1.0", "magentic>=0.39.0", "openai>=1.0.0", - "pysqlcipher3>=1.2.0" + "sqlcipher3-binary>=0.5.4" ] freeze = [ "pyinstaller>=6.0", diff --git a/pywry/pywry/state/sqlite.py b/pywry/pywry/state/sqlite.py index b86f3dc..cd06418 100644 --- a/pywry/pywry/state/sqlite.py +++ b/pywry/pywry/state/sqlite.py @@ -221,16 +221,27 @@ def _connect(self) -> sqlite3.Connection: self._db_path.parent.mkdir(parents=True, exist_ok=True) if self._encrypted and self._key: + # Try ``sqlcipher3`` first (actively maintained, ships + # prebuilt wheels as ``sqlcipher3-binary``), fall back to + # the legacy ``pysqlcipher3`` for installs that still pin + # it. Both expose the same ``dbapi2`` API. + sqlcipher = None try: - from pysqlcipher3 import dbapi2 as sqlcipher # type: ignore[import-not-found] + from sqlcipher3 import dbapi2 as sqlcipher # type: ignore[import-not-found] + except ImportError: + try: + from pysqlcipher3 import dbapi2 as sqlcipher # type: ignore[import-not-found] + except ImportError: + sqlcipher = None + if sqlcipher is not None: conn: sqlite3.Connection = sqlcipher.connect(str(self._db_path)) conn.execute(f"PRAGMA key = '{self._key}'") logger.debug("Opened encrypted SQLite database at %s", self._db_path) - except ImportError: + else: logger.warning( - "pysqlcipher3 not installed — database will NOT be encrypted. " - "Install with: pip install pysqlcipher3" + "sqlcipher3 / pysqlcipher3 not installed — database will " + "NOT be encrypted. Install with: pip install sqlcipher3-binary" ) conn = sqlite3.connect(str(self._db_path)) else: From e9106950547f977326af6e1c18b7ca86dca304c6 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 11:51:33 -0700 Subject: [PATCH 26/68] ruff format --- pywry/tests/test_tvchart_e2e.py | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/pywry/tests/test_tvchart_e2e.py b/pywry/tests/test_tvchart_e2e.py index 1d4b8e9..e9fc2c8 100644 --- a/pywry/tests/test_tvchart_e2e.py +++ b/pywry/tests/test_tvchart_e2e.py @@ -136,6 +136,7 @@ def _cid() -> str: "}" ) + def _draw_hline_script() -> str: return ( _DRAW_PIXEL_JS @@ -158,7 +159,9 @@ def _draw_hline_script() -> str: def _draw_two_point_script(tool: str) -> str: return ( _DRAW_PIXEL_JS - + "_tvSetDrawTool(cid, '" + tool + "');" + + "_tvSetDrawTool(cid, '" + + tool + + "');" + "var ds = window.__PYWRY_DRAWINGS__[cid];" + "if (!ds) { pywry.result({error:'no drawing state'}); return; }" + "var before = ds.drawings.length;" @@ -176,7 +179,9 @@ def _draw_two_point_script(tool: str) -> str: def _draw_single_point_script(tool: str) -> str: return ( _DRAW_PIXEL_JS - + "_tvSetDrawTool(cid, '" + tool + "');" + + "_tvSetDrawTool(cid, '" + + tool + + "');" + "var ds = window.__PYWRY_DRAWINGS__[cid];" + "if (!ds) { pywry.result({error:'no drawing state'}); return; }" + "var before = ds.drawings.length;" From 6330c69bde2bcb541517d907bc1d569e14ef0e8a Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 12:10:45 -0700 Subject: [PATCH 27/68] CI: build SQLCipher from source so every Python ABI is covered MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The ``sqlcipher3-binary`` wheels only cover Python 3.10–3.13, so 3.14 ``pip install`` can't resolve the encryption dep. Switching to ``sqlcipher3`` (non-binary) and building the SQLCipher C library from https://github.com/sqlcipher/sqlcipher in CI gives every platform / Python combo a working encrypted-SQLite backend. - ``pyproject.toml``: ``sqlcipher3-binary>=0.6.2`` / ``sqlcipher3-binary>=0.5.4`` → ``sqlcipher3>=0.5.4`` in all four groups. ``pywry/state/sqlite.py`` already imports ``sqlcipher3.dbapi2`` (with a ``pysqlcipher3`` fallback) so no code change is needed. - ``test-pywry.yml`` + ``publish-pywry.yml``: * **Linux** (``ubuntu-24.04`` / ``ubuntu-24.04-arm``) — install ``build-essential`` + ``tcl`` + ``libssl-dev``, ``git clone`` the SQLCipher source at ``v4.6.1``, ``./configure`` with ``-DSQLITE_HAS_CODEC -DSQLCIPHER_CRYPTO_OPENSSL``, ``make``, ``sudo make install``, ``ldconfig``. * **macOS** — ``brew install tcl-tk openssl@3``, same ``configure`` but point ``CFLAGS`` / ``LDFLAGS`` at the Homebrew OpenSSL prefix; surface the install dirs via ``LDFLAGS`` / ``CPPFLAGS`` so ``sqlcipher3``'s setup.py picks them up. * **Windows** — ``vcpkg install sqlcipher:`` (x64 or arm64); set ``SQLCIPHER_PATH`` + prepend ``INCLUDE`` / ``LIB`` / ``PATH`` so MSVC resolves the headers and .lib from the vcpkg install root. - Test matrix: ``deepagents`` (pulled in by ``.[dev]`` → ``features``) has a hard ``Python >=3.11`` floor, so 3.10 is dropped from both workflows' test jobs. 3.14 is restored (now covered by the source build). ``requires-python`` and classifiers keep 3.10+ because the base ``pywry`` install (no extras) still works on 3.10. Co-Authored-By: Claude Opus 4.7 (1M context) --- .github/workflows/publish-pywry.yml | 98 ++++++++++++++++++++++++++++- .github/workflows/test-pywry.yml | 85 +++++++++++++++++++++++-- pywry/pyproject.toml | 8 +-- 3 files changed, 179 insertions(+), 12 deletions(-) diff --git a/.github/workflows/publish-pywry.yml b/.github/workflows/publish-pywry.yml index 5a59da8..fd92766 100644 --- a/.github/workflows/publish-pywry.yml +++ b/.github/workflows/publish-pywry.yml @@ -37,10 +37,14 @@ jobs: contents: read strategy: fail-fast: true + # ``deepagents`` in ``.[dev]`` requires Python >=3.11 (3.10 is + # blocked upstream); ``sqlcipher3`` is built from source + # against the SQLCipher C library installed in the ``Build + # SQLCipher`` step, so 3.14 works too. matrix: include: - os: ubuntu-24.04 - python-version: '3.10' + python-version: '3.11' - os: ubuntu-24.04 python-version: '3.14' - os: windows-2025 @@ -67,7 +71,51 @@ jobs: if: runner.os == 'Linux' run: | for i in 1 2 3; do sudo apt-get update && break || sleep 15; done - for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev && break || { sleep 30; sudo apt-get update; }; done + for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev build-essential tcl libssl-dev && break || { sleep 30; sudo apt-get update; }; done + + - name: Build SQLCipher from source (Linux) + if: runner.os == 'Linux' + shell: bash + run: | + git clone --depth=1 --branch=v4.6.1 https://github.com/sqlcipher/sqlcipher.git /tmp/sqlcipher + cd /tmp/sqlcipher + ./configure \ + --enable-tempstore=yes \ + CFLAGS="-DSQLITE_HAS_CODEC -DSQLCIPHER_CRYPTO_OPENSSL" \ + LDFLAGS="-lcrypto" + make -j$(nproc) + sudo make install + sudo ldconfig + + - name: Build SQLCipher from source (macOS) + if: runner.os == 'macOS' + shell: bash + run: | + brew install tcl-tk openssl@3 + OPENSSL_PREFIX="$(brew --prefix openssl@3)" + git clone --depth=1 --branch=v4.6.1 https://github.com/sqlcipher/sqlcipher.git /tmp/sqlcipher + cd /tmp/sqlcipher + ./configure \ + --enable-tempstore=yes \ + CFLAGS="-DSQLITE_HAS_CODEC -DSQLCIPHER_CRYPTO_OPENSSL -I$OPENSSL_PREFIX/include" \ + LDFLAGS="-L$OPENSSL_PREFIX/lib -lcrypto" + make -j$(sysctl -n hw.logicalcpu) + sudo make install + echo "LDFLAGS=-L/usr/local/lib -L$OPENSSL_PREFIX/lib -lsqlcipher -lcrypto" >> $GITHUB_ENV + echo "CPPFLAGS=-I/usr/local/include -I/usr/local/include/sqlcipher -I$OPENSSL_PREFIX/include" >> $GITHUB_ENV + + - name: Install SQLCipher via vcpkg (Windows) + if: runner.os == 'Windows' + shell: pwsh + run: | + $env:VCPKG_ROOT = "$env:VCPKG_INSTALLATION_ROOT" + $triplet = if ($env:RUNNER_ARCH -eq 'ARM64') { 'arm64-windows' } else { 'x64-windows' } + & "$env:VCPKG_ROOT\vcpkg" install "sqlcipher:$triplet" + $sqlcipherDir = "$env:VCPKG_ROOT\installed\$triplet" + echo "SQLCIPHER_PATH=$sqlcipherDir" >> $env:GITHUB_ENV + echo "INCLUDE=$sqlcipherDir\include;$sqlcipherDir\include\sqlcipher;$env:INCLUDE" >> $env:GITHUB_ENV + echo "LIB=$sqlcipherDir\lib;$env:LIB" >> $env:GITHUB_ENV + echo "PATH=$sqlcipherDir\bin;$env:PATH" >> $env:GITHUB_ENV - name: Install dependencies run: | @@ -548,7 +596,51 @@ jobs: if: runner.os == 'Linux' run: | for i in 1 2 3; do sudo apt-get update && break || sleep 15; done - for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev && break || { sleep 30; sudo apt-get update; }; done + for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev build-essential tcl libssl-dev && break || { sleep 30; sudo apt-get update; }; done + + - name: Build SQLCipher from source (Linux) + if: runner.os == 'Linux' + shell: bash + run: | + git clone --depth=1 --branch=v4.6.1 https://github.com/sqlcipher/sqlcipher.git /tmp/sqlcipher + cd /tmp/sqlcipher + ./configure \ + --enable-tempstore=yes \ + CFLAGS="-DSQLITE_HAS_CODEC -DSQLCIPHER_CRYPTO_OPENSSL" \ + LDFLAGS="-lcrypto" + make -j$(nproc) + sudo make install + sudo ldconfig + + - name: Build SQLCipher from source (macOS) + if: runner.os == 'macOS' + shell: bash + run: | + brew install tcl-tk openssl@3 + OPENSSL_PREFIX="$(brew --prefix openssl@3)" + git clone --depth=1 --branch=v4.6.1 https://github.com/sqlcipher/sqlcipher.git /tmp/sqlcipher + cd /tmp/sqlcipher + ./configure \ + --enable-tempstore=yes \ + CFLAGS="-DSQLITE_HAS_CODEC -DSQLCIPHER_CRYPTO_OPENSSL -I$OPENSSL_PREFIX/include" \ + LDFLAGS="-L$OPENSSL_PREFIX/lib -lcrypto" + make -j$(sysctl -n hw.logicalcpu) + sudo make install + echo "LDFLAGS=-L/usr/local/lib -L$OPENSSL_PREFIX/lib -lsqlcipher -lcrypto" >> $GITHUB_ENV + echo "CPPFLAGS=-I/usr/local/include -I/usr/local/include/sqlcipher -I$OPENSSL_PREFIX/include" >> $GITHUB_ENV + + - name: Install SQLCipher via vcpkg (Windows) + if: runner.os == 'Windows' + shell: pwsh + run: | + $env:VCPKG_ROOT = "$env:VCPKG_INSTALLATION_ROOT" + $triplet = if ($env:RUNNER_ARCH -eq 'ARM64') { 'arm64-windows' } else { 'x64-windows' } + & "$env:VCPKG_ROOT\vcpkg" install "sqlcipher:$triplet" + $sqlcipherDir = "$env:VCPKG_ROOT\installed\$triplet" + echo "SQLCIPHER_PATH=$sqlcipherDir" >> $env:GITHUB_ENV + echo "INCLUDE=$sqlcipherDir\include;$sqlcipherDir\include\sqlcipher;$env:INCLUDE" >> $env:GITHUB_ENV + echo "LIB=$sqlcipherDir\lib;$env:LIB" >> $env:GITHUB_ENV + echo "PATH=$sqlcipherDir\bin;$env:PATH" >> $env:GITHUB_ENV - name: Cache vcpkg packages (Windows ARM) if: runner.os == 'Windows' && runner.arch == 'ARM64' diff --git a/.github/workflows/test-pywry.yml b/.github/workflows/test-pywry.yml index e3405e1..3f8232a 100644 --- a/.github/workflows/test-pywry.yml +++ b/.github/workflows/test-pywry.yml @@ -41,6 +41,20 @@ jobs: cache: 'pip' cache-dependency-path: pywry/pyproject.toml + - name: Build SQLCipher from source (Linux) + run: | + for i in 1 2 3; do sudo apt-get update && break || sleep 15; done + sudo apt-get install -y --fix-missing build-essential tcl libssl-dev + git clone --depth=1 --branch=v4.6.1 https://github.com/sqlcipher/sqlcipher.git /tmp/sqlcipher + cd /tmp/sqlcipher + ./configure \ + --enable-tempstore=yes \ + CFLAGS="-DSQLITE_HAS_CODEC -DSQLCIPHER_CRYPTO_OPENSSL" \ + LDFLAGS="-lcrypto" + make -j$(nproc) + sudo make install + sudo ldconfig + - name: Install dependencies run: | python -m pip install --upgrade pip @@ -65,18 +79,23 @@ jobs: contents: read strategy: fail-fast: false + # ``deepagents`` (pulled in by ``.[dev]`` → ``features``) hard- + # requires Python >=3.11 — 3.10 can't resolve the dev extra. + # ``sqlcipher3`` is a source build against the SQLCipher C + # library installed in the ``Build SQLCipher`` step below, so + # any Python ABI works (no binary-wheel coverage gaps). matrix: include: - os: ubuntu-24.04 - python-version: '3.10' + python-version: '3.11' - os: ubuntu-24.04 python-version: '3.14' - os: windows-2025 - python-version: '3.10' + python-version: '3.11' - os: windows-2025 python-version: '3.14' - os: macos-15 - python-version: '3.10' + python-version: '3.11' - os: macos-15 python-version: '3.14' - os: ubuntu-24.04-arm @@ -88,7 +107,7 @@ jobs: - os: windows-11-arm python-version: '3.14' - os: macos-latest - python-version: '3.10' + python-version: '3.11' - os: macos-latest python-version: '3.14' @@ -117,7 +136,63 @@ jobs: if: runner.os == 'Linux' run: | for i in 1 2 3; do sudo apt-get update && break || sleep 15; done - for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev && break || { sleep 30; sudo apt-get update; }; done + for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev build-essential tcl libssl-dev && break || { sleep 30; sudo apt-get update; }; done + + - name: Build SQLCipher from source (Linux) + if: runner.os == 'Linux' + shell: bash + run: | + # Build from the upstream source (https://github.com/sqlcipher/sqlcipher) + # so the ``sqlcipher3`` Python package's setup.py links + # against a known-good library on every Python ABI — + # binary wheels stop at Python 3.13. + git clone --depth=1 --branch=v4.6.1 https://github.com/sqlcipher/sqlcipher.git /tmp/sqlcipher + cd /tmp/sqlcipher + ./configure \ + --enable-tempstore=yes \ + CFLAGS="-DSQLITE_HAS_CODEC -DSQLCIPHER_CRYPTO_OPENSSL" \ + LDFLAGS="-lcrypto" + make -j$(nproc) + sudo make install + sudo ldconfig + + - name: Build SQLCipher from source (macOS) + if: runner.os == 'macOS' + shell: bash + run: | + brew install tcl-tk openssl@3 + OPENSSL_PREFIX="$(brew --prefix openssl@3)" + git clone --depth=1 --branch=v4.6.1 https://github.com/sqlcipher/sqlcipher.git /tmp/sqlcipher + cd /tmp/sqlcipher + ./configure \ + --enable-tempstore=yes \ + CFLAGS="-DSQLITE_HAS_CODEC -DSQLCIPHER_CRYPTO_OPENSSL -I$OPENSSL_PREFIX/include" \ + LDFLAGS="-L$OPENSSL_PREFIX/lib -lcrypto" + make -j$(sysctl -n hw.logicalcpu) + sudo make install + # ``sqlcipher3`` picks up the headers via standard Homebrew + # paths; also surface them via env vars so the build can't + # miss them. + echo "LDFLAGS=-L/usr/local/lib -L$OPENSSL_PREFIX/lib -lsqlcipher -lcrypto" >> $GITHUB_ENV + echo "CPPFLAGS=-I/usr/local/include -I/usr/local/include/sqlcipher -I$OPENSSL_PREFIX/include" >> $GITHUB_ENV + + - name: Install SQLCipher via vcpkg (Windows) + if: runner.os == 'Windows' + shell: pwsh + run: | + # vcpkg builds SQLCipher from source using the same upstream + # repo (https://github.com/sqlcipher/sqlcipher), just + # packaged as an MSVC-friendly port so we don't have to wire + # nmake + OpenSSL manually. ``SQLCIPHER_PATH`` points + # ``sqlcipher3``'s setup.py at the install root. + $env:VCPKG_ROOT = "$env:VCPKG_INSTALLATION_ROOT" + $triplet = if ($env:RUNNER_ARCH -eq 'ARM64') { 'arm64-windows' } else { 'x64-windows' } + & "$env:VCPKG_ROOT\vcpkg" install "sqlcipher:$triplet" + $sqlcipherDir = "$env:VCPKG_ROOT\installed\$triplet" + echo "SQLCIPHER_PATH=$sqlcipherDir" >> $env:GITHUB_ENV + echo "INCLUDE=$sqlcipherDir\include;$sqlcipherDir\include\sqlcipher;$env:INCLUDE" >> $env:GITHUB_ENV + echo "LIB=$sqlcipherDir\lib;$env:LIB" >> $env:GITHUB_ENV + echo "PATH=$sqlcipherDir\bin;$env:PATH" >> $env:GITHUB_ENV - name: Cache vcpkg packages (Windows ARM) if: runner.os == 'Windows' && runner.arch == 'ARM64' diff --git a/pywry/pyproject.toml b/pywry/pyproject.toml index a43ba18..9785c65 100644 --- a/pywry/pyproject.toml +++ b/pywry/pyproject.toml @@ -89,7 +89,7 @@ features = [ "openai>=1.0.0", "pandas>=1.5.3", "plotly>=6.5.0", - "sqlcipher3-binary>=0.5.4", + "sqlcipher3>=0.5.4", "websockets>=16.0.0", ] dev = [ @@ -133,7 +133,7 @@ dev = [ "pyinstaller>=6.0", "websockets>=16.0.0", "pandas>=1.5.3", - "sqlcipher3-binary>=0.5.4", + "sqlcipher3>=0.5.4", "agent-client-protocol>=0.1.0", "deepagents>=0.1.0", "langchain-mcp-adapters>=0.1.0", @@ -164,7 +164,7 @@ deepagent = [ "agent-client-protocol>=0.1.0", ] sqlite = [ - "sqlcipher3-binary>=0.5.4", + "sqlcipher3>=0.5.4", ] auth = [ "authlib>=1.3.0", @@ -182,7 +182,7 @@ all = [ "langchain-mcp-adapters>=0.1.0", "magentic>=0.39.0", "openai>=1.0.0", - "sqlcipher3-binary>=0.5.4" + "sqlcipher3>=0.5.4" ] freeze = [ "pyinstaller>=6.0", From 92a87892823b18bd00c7552c4d9a9995a5bf44d4 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 12:15:03 -0700 Subject: [PATCH 28/68] CI: pass --allow-unsupported to vcpkg sqlcipher install on Windows MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The ``sqlcipher`` vcpkg port depends on ``tcl`` for its test harness, and tcl's port manifest marks ``windows & arm`` as unsupported. That blocks ``vcpkg install sqlcipher:arm64-windows`` with: tcl is only supported on '!android & !(windows & arm) & !uwp', which does not match arm64-windows. ... To ignore this and attempt to build tcl anyway, rerun vcpkg with ``--allow-unsupported``. SQLCipher itself compiles cleanly on ARM64 — we just don't care about the tcl-driven test suite running in CI. Passing ``--allow-unsupported`` to the vcpkg invocation unblocks the arm64 runner while leaving x64 behavior unchanged (the flag only matters when a port is actually gated). Co-Authored-By: Claude Opus 4.7 (1M context) --- .github/workflows/publish-pywry.yml | 10 ++++++++-- .github/workflows/test-pywry.yml | 7 ++++++- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/.github/workflows/publish-pywry.yml b/.github/workflows/publish-pywry.yml index fd92766..3134466 100644 --- a/.github/workflows/publish-pywry.yml +++ b/.github/workflows/publish-pywry.yml @@ -110,7 +110,10 @@ jobs: run: | $env:VCPKG_ROOT = "$env:VCPKG_INSTALLATION_ROOT" $triplet = if ($env:RUNNER_ARCH -eq 'ARM64') { 'arm64-windows' } else { 'x64-windows' } - & "$env:VCPKG_ROOT\vcpkg" install "sqlcipher:$triplet" + # ``--allow-unsupported`` needed on arm64-windows (tcl + # port dep is marked unsupported there; sqlcipher itself + # still compiles cleanly). + & "$env:VCPKG_ROOT\vcpkg" install "sqlcipher:$triplet" --allow-unsupported $sqlcipherDir = "$env:VCPKG_ROOT\installed\$triplet" echo "SQLCIPHER_PATH=$sqlcipherDir" >> $env:GITHUB_ENV echo "INCLUDE=$sqlcipherDir\include;$sqlcipherDir\include\sqlcipher;$env:INCLUDE" >> $env:GITHUB_ENV @@ -635,7 +638,10 @@ jobs: run: | $env:VCPKG_ROOT = "$env:VCPKG_INSTALLATION_ROOT" $triplet = if ($env:RUNNER_ARCH -eq 'ARM64') { 'arm64-windows' } else { 'x64-windows' } - & "$env:VCPKG_ROOT\vcpkg" install "sqlcipher:$triplet" + # ``--allow-unsupported`` needed on arm64-windows (tcl + # port dep is marked unsupported there; sqlcipher itself + # still compiles cleanly). + & "$env:VCPKG_ROOT\vcpkg" install "sqlcipher:$triplet" --allow-unsupported $sqlcipherDir = "$env:VCPKG_ROOT\installed\$triplet" echo "SQLCIPHER_PATH=$sqlcipherDir" >> $env:GITHUB_ENV echo "INCLUDE=$sqlcipherDir\include;$sqlcipherDir\include\sqlcipher;$env:INCLUDE" >> $env:GITHUB_ENV diff --git a/.github/workflows/test-pywry.yml b/.github/workflows/test-pywry.yml index 3f8232a..b39ca39 100644 --- a/.github/workflows/test-pywry.yml +++ b/.github/workflows/test-pywry.yml @@ -187,7 +187,12 @@ jobs: # ``sqlcipher3``'s setup.py at the install root. $env:VCPKG_ROOT = "$env:VCPKG_INSTALLATION_ROOT" $triplet = if ($env:RUNNER_ARCH -eq 'ARM64') { 'arm64-windows' } else { 'x64-windows' } - & "$env:VCPKG_ROOT\vcpkg" install "sqlcipher:$triplet" + # ``--allow-unsupported`` is required on arm64-windows: the + # sqlcipher port pulls ``tcl`` for its test tooling, and + # tcl's port file marks ``windows & arm`` as unsupported. + # SQLCipher itself compiles fine on ARM64 — the tcl tests + # just won't run, which we don't need. + & "$env:VCPKG_ROOT\vcpkg" install "sqlcipher:$triplet" --allow-unsupported $sqlcipherDir = "$env:VCPKG_ROOT\installed\$triplet" echo "SQLCIPHER_PATH=$sqlcipherDir" >> $env:GITHUB_ENV echo "INCLUDE=$sqlcipherDir\include;$sqlcipherDir\include\sqlcipher;$env:INCLUDE" >> $env:GITHUB_ENV From 39590ebe2431880aa0c1fbda4836d00a862d5ef3 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 12:20:46 -0700 Subject: [PATCH 29/68] CI: pin macos-15 runners to Intel variant (macos-15-intel) Bare ``macos-15`` resolves to Apple Silicon (ARM64) on GitHub Actions; the Intel variant is ``macos-15-intel``. This repo's convention for Intel runners is the ``-intel`` suffix (see ``macos-26-intel`` in ``publish-pywry.yml``), so match it for the 15-series too. ARM coverage stays on ``macos-latest`` / ``macos-26`` entries. Co-Authored-By: Claude Opus 4.7 (1M context) --- .github/workflows/publish-pywry.yml | 2 +- .github/workflows/test-pywry.yml | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/publish-pywry.yml b/.github/workflows/publish-pywry.yml index 3134466..8448045 100644 --- a/.github/workflows/publish-pywry.yml +++ b/.github/workflows/publish-pywry.yml @@ -49,7 +49,7 @@ jobs: python-version: '3.14' - os: windows-2025 python-version: '3.12' - - os: macos-15 + - os: macos-15-intel python-version: '3.12' steps: diff --git a/.github/workflows/test-pywry.yml b/.github/workflows/test-pywry.yml index b39ca39..951b877 100644 --- a/.github/workflows/test-pywry.yml +++ b/.github/workflows/test-pywry.yml @@ -94,9 +94,9 @@ jobs: python-version: '3.11' - os: windows-2025 python-version: '3.14' - - os: macos-15 + - os: macos-15-intel python-version: '3.11' - - os: macos-15 + - os: macos-15-intel python-version: '3.14' - os: ubuntu-24.04-arm python-version: '3.11' From f1ad17dc4c1c97bceeb79a21a592564544034a0d Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 12:26:05 -0700 Subject: [PATCH 30/68] CI: configure SQLCipher with --disable-tcl MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Homebrew's ``tcl-tk`` bottle is now Tcl 9.0 (``/usr/local/Cellar/ tcl-tk/9.0.3``). Its headers drop the ``CONST`` macro and ``TCL_CHANNEL_VERSION_2``, which SQLCipher's ``tclsqlite.c`` (still Tcl-8 API) uses: /tmp/sqlcipher/src/tclsqlite.c:318:3: error: unknown type name 'CONST' /tmp/sqlcipher/src/tclsqlite.c:391:3: error: use of undeclared identifier 'TCL_CHANNEL_VERSION_2' The ``sqlcipher3`` Python binding doesn't touch Tcl, so the Tcl extension is dead weight. Fix: - Pass ``--disable-tcl`` to SQLCipher's ``./configure`` on every platform (Linux, macOS, Windows). - Drop ``tcl`` from the apt install lists and ``tcl-tk`` from the brew install lists — not needed, and Tcl 9 is what broke us. - Restrict ``make`` to ``libsqlcipher.la`` (fall back to the default target if that rule doesn't exist in older SQLCipher trees), and ``make install`` only the lib + headers. Covers both workflows and all jobs that build SQLCipher: lint, test, wheel-verification. Co-Authored-By: Claude Opus 4.7 (1M context) --- .github/workflows/publish-pywry.yml | 34 +++++++++++++++-------- .github/workflows/test-pywry.yml | 43 ++++++++++++++++++++--------- 2 files changed, 52 insertions(+), 25 deletions(-) diff --git a/.github/workflows/publish-pywry.yml b/.github/workflows/publish-pywry.yml index 8448045..8f77660 100644 --- a/.github/workflows/publish-pywry.yml +++ b/.github/workflows/publish-pywry.yml @@ -71,36 +71,44 @@ jobs: if: runner.os == 'Linux' run: | for i in 1 2 3; do sudo apt-get update && break || sleep 15; done - for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev build-essential tcl libssl-dev && break || { sleep 30; sudo apt-get update; }; done + for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev build-essential libssl-dev && break || { sleep 30; sudo apt-get update; }; done - name: Build SQLCipher from source (Linux) if: runner.os == 'Linux' shell: bash run: | + # ``--disable-tcl`` skips the Tcl extension; the Python + # ``sqlcipher3`` binding doesn't need it, and modern Tcl + # bottles break its compile on macOS. git clone --depth=1 --branch=v4.6.1 https://github.com/sqlcipher/sqlcipher.git /tmp/sqlcipher cd /tmp/sqlcipher ./configure \ + --disable-tcl \ --enable-tempstore=yes \ CFLAGS="-DSQLITE_HAS_CODEC -DSQLCIPHER_CRYPTO_OPENSSL" \ LDFLAGS="-lcrypto" - make -j$(nproc) - sudo make install + make -j$(nproc) libsqlcipher.la || make -j$(nproc) + sudo make install-libLTLIBRARIES install-includeHEADERS || sudo make install sudo ldconfig - name: Build SQLCipher from source (macOS) if: runner.os == 'macOS' shell: bash run: | - brew install tcl-tk openssl@3 + # No ``tcl-tk`` install — Homebrew ships Tcl 9.0, whose + # headers break SQLCipher's Tcl-8-era ``tclsqlite.c``. + # ``--disable-tcl`` is the fix. + brew install openssl@3 OPENSSL_PREFIX="$(brew --prefix openssl@3)" git clone --depth=1 --branch=v4.6.1 https://github.com/sqlcipher/sqlcipher.git /tmp/sqlcipher cd /tmp/sqlcipher ./configure \ + --disable-tcl \ --enable-tempstore=yes \ CFLAGS="-DSQLITE_HAS_CODEC -DSQLCIPHER_CRYPTO_OPENSSL -I$OPENSSL_PREFIX/include" \ LDFLAGS="-L$OPENSSL_PREFIX/lib -lcrypto" - make -j$(sysctl -n hw.logicalcpu) - sudo make install + make -j$(sysctl -n hw.logicalcpu) libsqlcipher.la || make -j$(sysctl -n hw.logicalcpu) + sudo make install-libLTLIBRARIES install-includeHEADERS || sudo make install echo "LDFLAGS=-L/usr/local/lib -L$OPENSSL_PREFIX/lib -lsqlcipher -lcrypto" >> $GITHUB_ENV echo "CPPFLAGS=-I/usr/local/include -I/usr/local/include/sqlcipher -I$OPENSSL_PREFIX/include" >> $GITHUB_ENV @@ -599,7 +607,7 @@ jobs: if: runner.os == 'Linux' run: | for i in 1 2 3; do sudo apt-get update && break || sleep 15; done - for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev build-essential tcl libssl-dev && break || { sleep 30; sudo apt-get update; }; done + for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev build-essential libssl-dev && break || { sleep 30; sudo apt-get update; }; done - name: Build SQLCipher from source (Linux) if: runner.os == 'Linux' @@ -608,27 +616,29 @@ jobs: git clone --depth=1 --branch=v4.6.1 https://github.com/sqlcipher/sqlcipher.git /tmp/sqlcipher cd /tmp/sqlcipher ./configure \ + --disable-tcl \ --enable-tempstore=yes \ CFLAGS="-DSQLITE_HAS_CODEC -DSQLCIPHER_CRYPTO_OPENSSL" \ LDFLAGS="-lcrypto" - make -j$(nproc) - sudo make install + make -j$(nproc) libsqlcipher.la || make -j$(nproc) + sudo make install-libLTLIBRARIES install-includeHEADERS || sudo make install sudo ldconfig - name: Build SQLCipher from source (macOS) if: runner.os == 'macOS' shell: bash run: | - brew install tcl-tk openssl@3 + brew install openssl@3 OPENSSL_PREFIX="$(brew --prefix openssl@3)" git clone --depth=1 --branch=v4.6.1 https://github.com/sqlcipher/sqlcipher.git /tmp/sqlcipher cd /tmp/sqlcipher ./configure \ + --disable-tcl \ --enable-tempstore=yes \ CFLAGS="-DSQLITE_HAS_CODEC -DSQLCIPHER_CRYPTO_OPENSSL -I$OPENSSL_PREFIX/include" \ LDFLAGS="-L$OPENSSL_PREFIX/lib -lcrypto" - make -j$(sysctl -n hw.logicalcpu) - sudo make install + make -j$(sysctl -n hw.logicalcpu) libsqlcipher.la || make -j$(sysctl -n hw.logicalcpu) + sudo make install-libLTLIBRARIES install-includeHEADERS || sudo make install echo "LDFLAGS=-L/usr/local/lib -L$OPENSSL_PREFIX/lib -lsqlcipher -lcrypto" >> $GITHUB_ENV echo "CPPFLAGS=-I/usr/local/include -I/usr/local/include/sqlcipher -I$OPENSSL_PREFIX/include" >> $GITHUB_ENV diff --git a/.github/workflows/test-pywry.yml b/.github/workflows/test-pywry.yml index 951b877..1ee445a 100644 --- a/.github/workflows/test-pywry.yml +++ b/.github/workflows/test-pywry.yml @@ -44,15 +44,21 @@ jobs: - name: Build SQLCipher from source (Linux) run: | for i in 1 2 3; do sudo apt-get update && break || sleep 15; done - sudo apt-get install -y --fix-missing build-essential tcl libssl-dev + # ``tcl`` intentionally omitted — SQLCipher's Tcl extension + # isn't needed for the ``sqlcipher3`` Python binding, and + # modern Tcl bottles (9.0 on macOS) break the upstream + # ``tclsqlite.c`` compile. ``--disable-tcl`` makes + # configure skip the extension. + sudo apt-get install -y --fix-missing build-essential libssl-dev git clone --depth=1 --branch=v4.6.1 https://github.com/sqlcipher/sqlcipher.git /tmp/sqlcipher cd /tmp/sqlcipher ./configure \ + --disable-tcl \ --enable-tempstore=yes \ CFLAGS="-DSQLITE_HAS_CODEC -DSQLCIPHER_CRYPTO_OPENSSL" \ LDFLAGS="-lcrypto" - make -j$(nproc) - sudo make install + make -j$(nproc) libsqlcipher.la || make -j$(nproc) + sudo make install-libLTLIBRARIES install-includeHEADERS || sudo make install sudo ldconfig - name: Install dependencies @@ -136,7 +142,7 @@ jobs: if: runner.os == 'Linux' run: | for i in 1 2 3; do sudo apt-get update && break || sleep 15; done - for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev build-essential tcl libssl-dev && break || { sleep 30; sudo apt-get update; }; done + for i in 1 2 3; do sudo apt-get install -y --fix-missing xvfb dbus-x11 at-spi2-core libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xfixes0 libxcb-shape0 libgl1 libegl1 libwebkit2gtk-4.1-dev libgtk-3-dev build-essential libssl-dev && break || { sleep 30; sudo apt-get update; }; done - name: Build SQLCipher from source (Linux) if: runner.os == 'Linux' @@ -145,34 +151,45 @@ jobs: # Build from the upstream source (https://github.com/sqlcipher/sqlcipher) # so the ``sqlcipher3`` Python package's setup.py links # against a known-good library on every Python ABI — - # binary wheels stop at Python 3.13. + # binary wheels stop at Python 3.13. ``--disable-tcl`` + # skips the Tcl extension (not needed by the Python + # binding, and modern Tcl bottles break its compile). git clone --depth=1 --branch=v4.6.1 https://github.com/sqlcipher/sqlcipher.git /tmp/sqlcipher cd /tmp/sqlcipher ./configure \ + --disable-tcl \ --enable-tempstore=yes \ CFLAGS="-DSQLITE_HAS_CODEC -DSQLCIPHER_CRYPTO_OPENSSL" \ LDFLAGS="-lcrypto" - make -j$(nproc) - sudo make install + make -j$(nproc) libsqlcipher.la || make -j$(nproc) + sudo make install-libLTLIBRARIES install-includeHEADERS || sudo make install sudo ldconfig - name: Build SQLCipher from source (macOS) if: runner.os == 'macOS' shell: bash run: | - brew install tcl-tk openssl@3 + # Intentionally NOT installing ``tcl-tk`` from Homebrew: + # the current bottle is Tcl 9.0, whose headers drop the + # ``CONST`` macro and ``TCL_CHANNEL_VERSION_2``, so + # SQLCipher's ``tclsqlite.c`` (still Tcl-8 API) fails to + # compile. SQLCipher's configure auto-disables the Tcl + # extension when no ``tclConfig.sh`` is on the usual + # search paths — we only need the C library anyway; the + # ``sqlcipher3`` Python binding doesn't touch Tcl. + brew install openssl@3 OPENSSL_PREFIX="$(brew --prefix openssl@3)" git clone --depth=1 --branch=v4.6.1 https://github.com/sqlcipher/sqlcipher.git /tmp/sqlcipher cd /tmp/sqlcipher ./configure \ + --disable-tcl \ --enable-tempstore=yes \ CFLAGS="-DSQLITE_HAS_CODEC -DSQLCIPHER_CRYPTO_OPENSSL -I$OPENSSL_PREFIX/include" \ LDFLAGS="-L$OPENSSL_PREFIX/lib -lcrypto" - make -j$(sysctl -n hw.logicalcpu) - sudo make install - # ``sqlcipher3`` picks up the headers via standard Homebrew - # paths; also surface them via env vars so the build can't - # miss them. + # Build only the library target — the default ``make`` tries + # to build the ``sqlcipher`` shell which links against Tcl. + make -j$(sysctl -n hw.logicalcpu) libsqlcipher.la || make -j$(sysctl -n hw.logicalcpu) + sudo make install-libLTLIBRARIES install-includeHEADERS || sudo make install echo "LDFLAGS=-L/usr/local/lib -L$OPENSSL_PREFIX/lib -lsqlcipher -lcrypto" >> $GITHUB_ENV echo "CPPFLAGS=-I/usr/local/include -I/usr/local/include/sqlcipher -I$OPENSSL_PREFIX/include" >> $GITHUB_ENV From 1d8336f40a914eb1a7d9f046980a226a244dc730 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 12:42:04 -0700 Subject: [PATCH 31/68] Unlock chart after text-tool draw; skip vcpkg sqlcipher on Win ARM MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two separate fixes: 1. ``tests/test_tvchart_e2e.py::test_23_draw_text_annotation`` left the class-scoped fixture in a locked state. The text tool's canvas-click handler auto-opens ``_tvShowDrawingSettings`` so the user can name the label, and that call sets ``entry._interactionLocked = true``. The test never dismissed the overlay, so every subsequent test in the class ran against a locked chart — test 39's ``assert lockedBefore is False`` failed. The single-point-click helper now calls ``_tvHideDrawingSettings`` + ``_tvHideFloatingToolbar`` and clears ``entry._interactionLocked`` defensively before returning. 2. Windows ARM64 can't build the ``sqlcipher`` vcpkg port: the transitive ``tcl`` port's nmake build fails on ``arm64-windows`` regardless of ``--allow-unsupported``: CMake Error ... nmake.exe ... all install INSTALLDIR=... MACHINE=IX86 ... error: building tcl:arm64-windows failed with: BUILD_FAILED Guarded the vcpkg sqlcipher install on ``runner.arch != 'ARM64'``. ``SqliteStateBackend`` handles the missing ``sqlcipher3`` binding by falling back to plain SQLite, so the Windows ARM job tests the package path that users on that arch would actually have. Co-Authored-By: Claude Opus 4.7 (1M context) --- .github/workflows/publish-pywry.yml | 30 ++++++++++++++--------------- .github/workflows/test-pywry.yml | 20 +++++++++---------- pywry/tests/test_tvchart_e2e.py | 12 ++++++++++++ 3 files changed, 35 insertions(+), 27 deletions(-) diff --git a/.github/workflows/publish-pywry.yml b/.github/workflows/publish-pywry.yml index 8f77660..caceb6b 100644 --- a/.github/workflows/publish-pywry.yml +++ b/.github/workflows/publish-pywry.yml @@ -112,17 +112,16 @@ jobs: echo "LDFLAGS=-L/usr/local/lib -L$OPENSSL_PREFIX/lib -lsqlcipher -lcrypto" >> $GITHUB_ENV echo "CPPFLAGS=-I/usr/local/include -I/usr/local/include/sqlcipher -I$OPENSSL_PREFIX/include" >> $GITHUB_ENV - - name: Install SQLCipher via vcpkg (Windows) - if: runner.os == 'Windows' + - name: Install SQLCipher via vcpkg (Windows x64) + if: runner.os == 'Windows' && runner.arch != 'ARM64' shell: pwsh run: | + # arm64-windows skipped: tcl (transitive port dep) doesn't + # build there under vcpkg; ``SqliteStateBackend`` handles + # missing ``sqlcipher3`` by falling back to plain SQLite. $env:VCPKG_ROOT = "$env:VCPKG_INSTALLATION_ROOT" - $triplet = if ($env:RUNNER_ARCH -eq 'ARM64') { 'arm64-windows' } else { 'x64-windows' } - # ``--allow-unsupported`` needed on arm64-windows (tcl - # port dep is marked unsupported there; sqlcipher itself - # still compiles cleanly). - & "$env:VCPKG_ROOT\vcpkg" install "sqlcipher:$triplet" --allow-unsupported - $sqlcipherDir = "$env:VCPKG_ROOT\installed\$triplet" + & "$env:VCPKG_ROOT\vcpkg" install "sqlcipher:x64-windows" + $sqlcipherDir = "$env:VCPKG_ROOT\installed\x64-windows" echo "SQLCIPHER_PATH=$sqlcipherDir" >> $env:GITHUB_ENV echo "INCLUDE=$sqlcipherDir\include;$sqlcipherDir\include\sqlcipher;$env:INCLUDE" >> $env:GITHUB_ENV echo "LIB=$sqlcipherDir\lib;$env:LIB" >> $env:GITHUB_ENV @@ -642,17 +641,16 @@ jobs: echo "LDFLAGS=-L/usr/local/lib -L$OPENSSL_PREFIX/lib -lsqlcipher -lcrypto" >> $GITHUB_ENV echo "CPPFLAGS=-I/usr/local/include -I/usr/local/include/sqlcipher -I$OPENSSL_PREFIX/include" >> $GITHUB_ENV - - name: Install SQLCipher via vcpkg (Windows) - if: runner.os == 'Windows' + - name: Install SQLCipher via vcpkg (Windows x64) + if: runner.os == 'Windows' && runner.arch != 'ARM64' shell: pwsh run: | + # arm64-windows skipped: tcl (transitive port dep) doesn't + # build there under vcpkg; ``SqliteStateBackend`` handles + # missing ``sqlcipher3`` by falling back to plain SQLite. $env:VCPKG_ROOT = "$env:VCPKG_INSTALLATION_ROOT" - $triplet = if ($env:RUNNER_ARCH -eq 'ARM64') { 'arm64-windows' } else { 'x64-windows' } - # ``--allow-unsupported`` needed on arm64-windows (tcl - # port dep is marked unsupported there; sqlcipher itself - # still compiles cleanly). - & "$env:VCPKG_ROOT\vcpkg" install "sqlcipher:$triplet" --allow-unsupported - $sqlcipherDir = "$env:VCPKG_ROOT\installed\$triplet" + & "$env:VCPKG_ROOT\vcpkg" install "sqlcipher:x64-windows" + $sqlcipherDir = "$env:VCPKG_ROOT\installed\x64-windows" echo "SQLCIPHER_PATH=$sqlcipherDir" >> $env:GITHUB_ENV echo "INCLUDE=$sqlcipherDir\include;$sqlcipherDir\include\sqlcipher;$env:INCLUDE" >> $env:GITHUB_ENV echo "LIB=$sqlcipherDir\lib;$env:LIB" >> $env:GITHUB_ENV diff --git a/.github/workflows/test-pywry.yml b/.github/workflows/test-pywry.yml index 1ee445a..e98f3f0 100644 --- a/.github/workflows/test-pywry.yml +++ b/.github/workflows/test-pywry.yml @@ -193,24 +193,22 @@ jobs: echo "LDFLAGS=-L/usr/local/lib -L$OPENSSL_PREFIX/lib -lsqlcipher -lcrypto" >> $GITHUB_ENV echo "CPPFLAGS=-I/usr/local/include -I/usr/local/include/sqlcipher -I$OPENSSL_PREFIX/include" >> $GITHUB_ENV - - name: Install SQLCipher via vcpkg (Windows) - if: runner.os == 'Windows' + - name: Install SQLCipher via vcpkg (Windows x64) + if: runner.os == 'Windows' && runner.arch != 'ARM64' shell: pwsh run: | # vcpkg builds SQLCipher from source using the same upstream # repo (https://github.com/sqlcipher/sqlcipher), just # packaged as an MSVC-friendly port so we don't have to wire # nmake + OpenSSL manually. ``SQLCIPHER_PATH`` points - # ``sqlcipher3``'s setup.py at the install root. + # ``sqlcipher3``'s setup.py at the install root. Skipped on + # arm64-windows: the transitive ``tcl`` port doesn't build + # there even with ``--allow-unsupported``, and the + # ``SqliteStateBackend`` handles the missing binding by + # falling back to plain SQLite. $env:VCPKG_ROOT = "$env:VCPKG_INSTALLATION_ROOT" - $triplet = if ($env:RUNNER_ARCH -eq 'ARM64') { 'arm64-windows' } else { 'x64-windows' } - # ``--allow-unsupported`` is required on arm64-windows: the - # sqlcipher port pulls ``tcl`` for its test tooling, and - # tcl's port file marks ``windows & arm`` as unsupported. - # SQLCipher itself compiles fine on ARM64 — the tcl tests - # just won't run, which we don't need. - & "$env:VCPKG_ROOT\vcpkg" install "sqlcipher:$triplet" --allow-unsupported - $sqlcipherDir = "$env:VCPKG_ROOT\installed\$triplet" + & "$env:VCPKG_ROOT\vcpkg" install "sqlcipher:x64-windows" + $sqlcipherDir = "$env:VCPKG_ROOT\installed\x64-windows" echo "SQLCIPHER_PATH=$sqlcipherDir" >> $env:GITHUB_ENV echo "INCLUDE=$sqlcipherDir\include;$sqlcipherDir\include\sqlcipher;$env:INCLUDE" >> $env:GITHUB_ENV echo "LIB=$sqlcipherDir\lib;$env:LIB" >> $env:GITHUB_ENV diff --git a/pywry/tests/test_tvchart_e2e.py b/pywry/tests/test_tvchart_e2e.py index e9fc2c8..2efc2ed 100644 --- a/pywry/tests/test_tvchart_e2e.py +++ b/pywry/tests/test_tvchart_e2e.py @@ -177,6 +177,15 @@ def _draw_two_point_script(tool: str) -> str: def _draw_single_point_script(tool: str) -> str: + # The ``text`` tool's canvas-click handler auto-opens + # ``_tvShowDrawingSettings`` (so the user can name the label + # immediately). That flips ``entry._interactionLocked`` to + # true. Leaving the overlay up leaks locked state into every + # subsequent test in the class-scoped fixture — test 39's + # ``assert lockedBefore is False`` then fails. Close the + # drawing-settings overlay and any floating toolbar, then + # clear the lock flag defensively so the idle-chart contract + # holds. return ( _DRAW_PIXEL_JS + "_tvSetDrawTool(cid, '" @@ -186,7 +195,10 @@ def _draw_single_point_script(tool: str) -> str: + "if (!ds) { pywry.result({error:'no drawing state'}); return; }" + "var before = ds.drawings.length;" + "_dispatchDrawClick(ds, 0.4, 0.5);" + + "if (typeof _tvHideDrawingSettings === 'function') _tvHideDrawingSettings();" + + "if (typeof _tvHideFloatingToolbar === 'function') _tvHideFloatingToolbar();" + "_tvSetDrawTool(cid, 'cursor');" + + "if (entry) entry._interactionLocked = false;" + "pywry.result({" + " count: ds.drawings.length," + " added: ds.drawings.length - before," From 4455393c5f006f0d0217e7ff98224b595f4ae707 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 13:32:47 -0700 Subject: [PATCH 32/68] Fix mypy errors across chat providers, state backend, and factory MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ``pywry/state/sqlite.py``: replace the chained ``try/except`` import that mypy flagged with ``no-redef`` + ``import-untyped`` warnings with a dedicated ``_load_sqlcipher()`` helper using ``importlib.import_module``. Tries ``sqlcipher3`` (maintained fork) first, falls back to ``pysqlcipher3``; returns ``None`` so the backend can open plain SQLite when neither is available. - ``pywry/mcp/handlers.py``: ``_resolve_widget_id``'s ``tuple[str | None, HandlerResult | None]`` return type doesn't narrow across ``if error:`` alone. Call sites now use ``if error is not None or resolved_id is None: return error or {...}`` — real runtime narrowing, no ``assert``. A handful of chat handlers that used raw ``ctx.args.get("widget_id")`` as dict keys (``Any | None`` leaking in) now route through ``_resolve_widget_id``. ``_wait_for_data_settled``'s result dict is typed as ``dict[str, dict[str, Any] | None]`` so its return isn't ``Any``. - ``pywry/chat/providers/deepagent.py``: ``PlanContinuationMiddleware.after_model`` takes ``state: Any`` to stay compatible with ``AgentState[Any]`` from the supertype without importing the langchain internal. ``MultiServerMCPClient(self._mcp_servers)`` gets a scoped ``# type: ignore[arg-type]`` — runtime accepts plain dicts. - ``pywry/config.py``: annotate the ``getattr``-derived TOML decode error as ``type[BaseException]`` so mypy accepts it in the ``except`` tuple. - ``pyproject.toml``: add ``langchain*`` / ``langgraph*`` / ``deepagents`` / ``sqlcipher3`` / ``pysqlcipher3`` to the mypy ``ignore_missing_imports`` override. These packages don't ship ``py.typed`` markers; per-line ``# type: ignore[import-not-found]`` became ``unused-ignore`` warnings in CI (where the packages DO install). Dropped the redundant per-line ignores from ``deepagent.py``. Workflow: - ``docker/setup-docker-action@v4`` on ``macos-15-intel`` doesn't reliably bring up a Docker daemon — the Redis testcontainer fixture errors with ``FileNotFoundError: /var/run/docker.sock`` at setup. Replaced with the Docker-Desktop → Colima fallback script already in use in ``publish-pywry.yml``, which symlinks the colima socket into ``/var/run/docker.sock`` and exports ``DOCKER_HOST`` before the test step. Co-Authored-By: Claude Opus 4.7 (1M context) --- .github/workflows/test-pywry.yml | 45 +++++++++--- pywry/pyproject.toml | 14 ++++ pywry/pywry/chat/providers/deepagent.py | 30 ++++---- pywry/pywry/config.py | 2 +- pywry/pywry/mcp/handlers.py | 91 +++++++++++++++---------- pywry/pywry/state/sqlite.py | 41 +++++++---- 6 files changed, 150 insertions(+), 73 deletions(-) diff --git a/.github/workflows/test-pywry.yml b/.github/workflows/test-pywry.yml index e98f3f0..3926c2b 100644 --- a/.github/workflows/test-pywry.yml +++ b/.github/workflows/test-pywry.yml @@ -265,16 +265,45 @@ jobs: if: runner.os == 'Linux' run: docker version - - name: Setup Docker (macOS Intel) - id: docker-macos - if: runner.os == 'macOS' && runner.arch == 'X64' - uses: docker/setup-docker-action@v4 - - - name: Verify Docker (macOS Intel) + - name: Configure Docker (macOS Intel) if: runner.os == 'macOS' && runner.arch == 'X64' + shell: bash run: | - echo "DOCKER_HOST=$DOCKER_HOST" - docker version + # ``docker/setup-docker-action@v4`` doesn't reliably bring up + # a Docker daemon on ``macos-15-intel`` runners — testcontainers + # then fails with ``FileNotFoundError: /var/run/docker.sock`` + # during the Redis fixture setup. Mirror the resilient + # Docker-Desktop → Colima fallback used in publish-pywry.yml. + set -euo pipefail + + if docker info >/dev/null 2>&1; then + echo "Docker daemon already available" + else + if [ -d "/Applications/Docker.app" ]; then + echo "Starting Docker Desktop" + open -a Docker + for _ in {1..30}; do + if docker info >/dev/null 2>&1; then + break + fi + sleep 5 + done + fi + fi + + if ! docker info >/dev/null 2>&1; then + echo "Falling back to Colima" + brew install docker colima + colima start --runtime docker --arch x86_64 --cpu 2 --memory 4 --disk 20 + fi + + if [ -S "$HOME/.colima/default/docker.sock" ]; then + sudo mkdir -p /var/run + sudo ln -sf "$HOME/.colima/default/docker.sock" /var/run/docker.sock + fi + + echo "DOCKER_HOST=unix:///var/run/docker.sock" >> "$GITHUB_ENV" + docker info - name: Run tests (Linux) if: runner.os == 'Linux' diff --git a/pywry/pyproject.toml b/pywry/pyproject.toml index 9785c65..0080c9c 100644 --- a/pywry/pyproject.toml +++ b/pywry/pyproject.toml @@ -231,6 +231,20 @@ module = [ "magentic", "magentic.*", "keyring", "keyring.*", "fastmcp", "fastmcp.*", + # LangChain / LangGraph / Deep Agents don't ship ``py.typed`` + # markers. These modules only exist when the ``deepagent`` extra + # is installed; without the overrides, mypy reports + # ``import-untyped`` when they ARE present and + # ``import-not-found`` when they aren't — the per-line + # ``# type: ignore`` comments can't cover both, so declare the + # whole family as untyped here. + "langchain", "langchain.*", + "langchain_core", "langchain_core.*", + "langchain_mcp_adapters", "langchain_mcp_adapters.*", + "langgraph", "langgraph.*", + "deepagents", "deepagents.*", + "pysqlcipher3", "pysqlcipher3.*", + "sqlcipher3", "sqlcipher3.*", ] ignore_missing_imports = true diff --git a/pywry/pywry/chat/providers/deepagent.py b/pywry/pywry/chat/providers/deepagent.py index 961d9ba..eded6b9 100644 --- a/pywry/pywry/chat/providers/deepagent.py +++ b/pywry/pywry/chat/providers/deepagent.py @@ -577,9 +577,9 @@ def _build_plan_continuation_middleware() -> Any: return _plan_middleware_singleton try: - from langchain.agents.middleware import AgentMiddleware # type: ignore[import-not-found] - from langchain.agents.middleware.types import hook_config # type: ignore[import-not-found] - from langchain_core.messages import HumanMessage # type: ignore[import-not-found] + from langchain.agents.middleware import AgentMiddleware + from langchain.agents.middleware.types import hook_config + from langchain_core.messages import HumanMessage except ImportError: logger.debug( "langchain agents middleware not importable; " @@ -594,7 +594,7 @@ class PlanContinuationMiddleware(AgentMiddleware): @hook_config(can_jump_to=["model"]) def after_model( self, - state: dict[str, Any], + state: Any, runtime: Any, ) -> dict[str, Any] | None: next_step = _next_pending_plan_step(state) @@ -699,7 +699,7 @@ def _build_inline_tool_call_middleware() -> Any: return _inline_tool_call_middleware_singleton try: - from langchain.agents.middleware import AgentMiddleware # type: ignore[import-not-found] + from langchain.agents.middleware import AgentMiddleware except ImportError: logger.debug( "langchain agents middleware not importable; skipping InlineToolCallMiddleware install", @@ -947,14 +947,14 @@ def _create_checkpointer(self) -> Any: backend = get_state_backend() if backend == StateBackend.REDIS: - from langgraph.checkpoint.redis import RedisSaver # type: ignore[import-not-found] + from langgraph.checkpoint.redis import RedisSaver from ...config import get_settings return RedisSaver(get_settings().deploy.redis_url) if backend == StateBackend.SQLITE: try: - from langgraph.checkpoint.sqlite import SqliteSaver # type: ignore + from langgraph.checkpoint.sqlite import SqliteSaver from ...config import get_settings @@ -966,7 +966,7 @@ def _create_checkpointer(self) -> Any: logger.debug("Could not auto-configure checkpointer from state backend", exc_info=True) try: - from langgraph.checkpoint.memory import MemorySaver # type: ignore[import-not-found] + from langgraph.checkpoint.memory import MemorySaver return MemorySaver() except ImportError: @@ -975,7 +975,7 @@ def _create_checkpointer(self) -> Any: def _create_store(self) -> Any: try: - from langgraph.store.memory import InMemoryStore # type: ignore[import-not-found] + from langgraph.store.memory import InMemoryStore return InMemoryStore() except ImportError: @@ -993,7 +993,7 @@ def _load_mcp_tools(self) -> list[Any]: if not self._mcp_servers: return [] try: - from langchain_mcp_adapters.client import ( # type: ignore[import-not-found] + from langchain_mcp_adapters.client import ( MultiServerMCPClient, ) except ImportError: @@ -1008,7 +1008,13 @@ def _load_mcp_tools(self) -> list[Any]: import asyncio as _asyncio import warnings as _warnings - client = MultiServerMCPClient(self._mcp_servers) + # ``MultiServerMCPClient``'s type signature expects a + # ``dict[str, StdioConnection | SSEConnection | ...]`` but + # the runtime accepts plain dicts that carry a + # ``transport`` key. We keep ``_mcp_servers`` as + # ``dict[str, dict[str, Any]]`` so the ACP surface isn't + # coupled to the adapter's exported typed-dicts. + client = MultiServerMCPClient(self._mcp_servers) # type: ignore[arg-type] def _get_tools() -> list[Any]: # langchain-mcp-adapters <= 0.2.2 imports the deprecated @@ -1082,7 +1088,7 @@ def _build_agent_kwargs(self, merged_tools: list[Any], system_prompt: str) -> di return kwargs def _build_agent(self) -> Any: - from deepagents import create_deep_agent # type: ignore[import-not-found] + from deepagents import create_deep_agent # Auto-create the checkpointer here too so callers that bypass # initialize() (e.g. building the agent eagerly before show()) still diff --git a/pywry/pywry/config.py b/pywry/pywry/config.py index 2520957..cb494e6 100644 --- a/pywry/pywry/config.py +++ b/pywry/pywry/config.py @@ -75,7 +75,7 @@ def _load_toml_config() -> dict[str, Any]: return {} merged: dict[str, Any] = {} - toml_decode_error = getattr(tomllib, "TOMLDecodeError", ValueError) + toml_decode_error: type[BaseException] = getattr(tomllib, "TOMLDecodeError", ValueError) for config_file in _find_config_files(): try: diff --git a/pywry/pywry/mcp/handlers.py b/pywry/pywry/mcp/handlers.py index 5e823ed..91168cd 100644 --- a/pywry/pywry/mcp/handlers.py +++ b/pywry/pywry/mcp/handlers.py @@ -434,8 +434,8 @@ def _get_widget_or_error(widget_id: str | None) -> tuple[Any | None, HandlerResu self-correct. """ resolved_id, error = _resolve_widget_id(widget_id) - if error: - return None, error + if error is not None or resolved_id is None: + return None, error or {"error": "widget_id could not be resolved."} widget = get_widget(resolved_id) if not widget: ids = list_widget_ids() @@ -503,7 +503,7 @@ def _wait_for_data_settled( """ import threading as _threading - result: dict[str, Any] = {"payload": None} + result: dict[str, dict[str, Any] | None] = {"payload": None} done = _threading.Event() def _listener(data: Any, _event_type: str = "", _label: str = "") -> None: @@ -620,8 +620,8 @@ def _emit_tvchart( """Shared helper: resolve widget, emit event, return a uniform result.""" widget_id = ctx.args.get("widget_id") resolved_id, error = _resolve_widget_id(widget_id) - if error: - return error + if error is not None or resolved_id is None: + return error or {"error": "widget_id could not be resolved."} widget = get_widget(resolved_id) if not widget: ids = list_widget_ids() @@ -796,8 +796,8 @@ def _handle_tvchart_show_indicators(ctx: HandlerContext) -> HandlerResult: def _handle_tvchart_symbol_search(ctx: HandlerContext) -> HandlerResult: widget_id = ctx.args.get("widget_id") resolved_id, error = _resolve_widget_id(widget_id) - if error: - return error + if error is not None or resolved_id is None: + return error or {"error": "widget_id could not be resolved."} widget = get_widget(resolved_id) if not widget: return {"error": f"Widget not found: {resolved_id}."} @@ -901,8 +901,8 @@ def _snapshot_compare_set(widget: Any) -> set[str]: def _handle_tvchart_compare(ctx: HandlerContext) -> HandlerResult: widget_id = ctx.args.get("widget_id") resolved_id, error = _resolve_widget_id(widget_id) - if error: - return error + if error is not None or resolved_id is None: + return error or {"error": "widget_id could not be resolved."} widget = get_widget(resolved_id) if not widget: return {"error": f"Widget not found: {resolved_id}."} @@ -966,8 +966,8 @@ def _matches(state: dict[str, Any]) -> bool: def _handle_tvchart_change_interval(ctx: HandlerContext) -> HandlerResult: widget_id = ctx.args.get("widget_id") resolved_id, error = _resolve_widget_id(widget_id) - if error: - return error + if error is not None or resolved_id is None: + return error or {"error": "widget_id could not be resolved."} widget = get_widget(resolved_id) if not widget: return {"error": f"Widget not found: {resolved_id}."} @@ -1061,8 +1061,8 @@ def _emit_zoom_and_confirm( """ widget_id = ctx.args.get("widget_id") resolved_id, error = _resolve_widget_id(widget_id) - if error: - return error + if error is not None or resolved_id is None: + return error or {"error": "widget_id could not be resolved."} widget = get_widget(resolved_id) if not widget: return {"error": f"Widget not found: {resolved_id}."} @@ -1415,8 +1415,8 @@ def _handle_send_event(ctx: HandlerContext) -> HandlerResult: return {"error": "event_type is required (e.g. 'tvchart:symbol-search')."} widget_id = ctx.args.get("widget_id") resolved_id, error = _resolve_widget_id(widget_id) - if error: - return error + if error is not None or resolved_id is None: + return error or {"error": "widget_id could not be resolved."} widget = get_widget(resolved_id) if not widget: ids = list_widget_ids() @@ -1452,22 +1452,26 @@ def _handle_list_widgets(ctx: HandlerContext) -> HandlerResult: def _handle_get_events(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args.get("widget_id") - widget_events = ctx.events.get(widget_id, []) + resolved_id, error = _resolve_widget_id(ctx.args.get("widget_id")) + if error is not None or resolved_id is None: + return error or {"error": "widget_id could not be resolved."} + widget_events = ctx.events.get(resolved_id, []) if ctx.args.get("clear", False): - ctx.events[widget_id] = [] - return {"widget_id": widget_id, "events": widget_events} + ctx.events[resolved_id] = [] + return {"widget_id": resolved_id, "events": widget_events} def _handle_destroy_widget(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args.get("widget_id") - ctx.events.pop(widget_id, None) - remove_widget(widget_id) + resolved_id, error = _resolve_widget_id(ctx.args.get("widget_id")) + if error is not None or resolved_id is None: + return error or {"error": "widget_id could not be resolved."} + ctx.events.pop(resolved_id, None) + remove_widget(resolved_id) if ctx.headless: from ..inline import _state as inline_state - inline_state.widgets.pop(widget_id, None) - return {"widget_id": widget_id, "destroyed": True} + inline_state.widgets.pop(resolved_id, None) + return {"widget_id": resolved_id, "destroyed": True} # ============================================================================= @@ -1496,7 +1500,10 @@ def _handle_get_component_source(ctx: HandlerContext) -> HandlerResult: def _handle_export_widget(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args.get("widget_id") + resolved_id, error = _resolve_widget_id(ctx.args.get("widget_id")) + if error is not None or resolved_id is None: + return error or {"error": "widget_id could not be resolved."} + widget_id = resolved_id code = export_widget_code(widget_id) if not code: return {"error": f"Widget not found or no config stored: {widget_id}"} @@ -1651,11 +1658,13 @@ def _handle_create_chat_widget(ctx: HandlerContext) -> HandlerResult: def _handle_chat_send_message(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args.get("widget_id") - widget, error = _get_widget_or_error(widget_id) - if error: - return error - assert widget is not None + resolved_id, error = _resolve_widget_id(ctx.args.get("widget_id")) + if error is not None or resolved_id is None: + return error or {"error": "widget_id could not be resolved."} + widget, werror = _get_widget_or_error(resolved_id) + if werror is not None or widget is None: + return werror or {"error": f"Widget not found: {resolved_id}."} + widget_id = resolved_id text = ctx.args["text"] thread_id = ctx.args.get("thread_id") @@ -1695,7 +1704,10 @@ def _handle_chat_send_message(ctx: HandlerContext) -> HandlerResult: def _handle_chat_stop_generation(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args.get("widget_id") + resolved_id, error = _resolve_widget_id(ctx.args.get("widget_id")) + if error is not None or resolved_id is None: + return error or {"error": "widget_id could not be resolved."} + widget_id = resolved_id thread_id = ctx.args.get("thread_id") widget_gens = _active_generations.get(widget_id, {}) @@ -1733,15 +1745,17 @@ def _handle_chat_stop_generation(ctx: HandlerContext) -> HandlerResult: def _handle_chat_manage_thread(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args.get("widget_id") + resolved_id, error = _resolve_widget_id(ctx.args.get("widget_id")) + if error is not None or resolved_id is None: + return error or {"error": "widget_id could not be resolved."} + widget_id = resolved_id action = ctx.args["action"] thread_id = ctx.args.get("thread_id") title = ctx.args.get("title", "New Chat") - widget, error = _get_widget_or_error(widget_id) - if error: - return error - assert widget is not None + widget, werror = _get_widget_or_error(widget_id) + if werror is not None or widget is None: + return werror or {"error": f"Widget not found: {widget_id}."} handlers = { "create": _thread_create, @@ -1845,7 +1859,10 @@ def _handle_chat_register_command(ctx: HandlerContext) -> HandlerResult: def _handle_chat_get_history(ctx: HandlerContext) -> HandlerResult: - widget_id = ctx.args.get("widget_id") + resolved_id, error = _resolve_widget_id(ctx.args.get("widget_id")) + if error is not None or resolved_id is None: + return error or {"error": "widget_id could not be resolved."} + widget_id = resolved_id thread_id = ctx.args.get("thread_id") limit = ctx.args.get("limit", 50) before_id = ctx.args.get("before_id") diff --git a/pywry/pywry/state/sqlite.py b/pywry/pywry/state/sqlite.py index cd06418..82e407c 100644 --- a/pywry/pywry/state/sqlite.py +++ b/pywry/pywry/state/sqlite.py @@ -29,6 +29,28 @@ logger = logging.getLogger(__name__) + +def _load_sqlcipher() -> Any: + """Return the ``sqlcipher3`` / ``pysqlcipher3`` ``dbapi2`` module, or ``None``. + + Both packages expose the same DB-API 2.0 surface as stdlib + ``sqlite3``. ``sqlcipher3`` is the actively-maintained fork; the + legacy ``pysqlcipher3`` is checked as a fallback for environments + that still pin it. ``importlib`` is used so mypy doesn't complain + about the alternative import paths missing stubs at runtime — + neither package ships a ``py.typed`` marker. + """ + import importlib + + for name in ("sqlcipher3", "pysqlcipher3"): + try: + module = importlib.import_module(f"{name}.dbapi2") + except ImportError: + continue + return module + return None + + _SCHEMA = """ CREATE TABLE IF NOT EXISTS widgets ( widget_id TEXT PRIMARY KEY, @@ -220,28 +242,17 @@ def _connect(self) -> sqlite3.Connection: self._db_path.parent.mkdir(parents=True, exist_ok=True) + conn: sqlite3.Connection if self._encrypted and self._key: - # Try ``sqlcipher3`` first (actively maintained, ships - # prebuilt wheels as ``sqlcipher3-binary``), fall back to - # the legacy ``pysqlcipher3`` for installs that still pin - # it. Both expose the same ``dbapi2`` API. - sqlcipher = None - try: - from sqlcipher3 import dbapi2 as sqlcipher # type: ignore[import-not-found] - except ImportError: - try: - from pysqlcipher3 import dbapi2 as sqlcipher # type: ignore[import-not-found] - except ImportError: - sqlcipher = None - + sqlcipher = _load_sqlcipher() if sqlcipher is not None: - conn: sqlite3.Connection = sqlcipher.connect(str(self._db_path)) + conn = sqlcipher.connect(str(self._db_path)) conn.execute(f"PRAGMA key = '{self._key}'") logger.debug("Opened encrypted SQLite database at %s", self._db_path) else: logger.warning( "sqlcipher3 / pysqlcipher3 not installed — database will " - "NOT be encrypted. Install with: pip install sqlcipher3-binary" + "NOT be encrypted. Install with: pip install sqlcipher3" ) conn = sqlite3.connect(str(self._db_path)) else: From e22494f5349f4b79a3901c8e87725c0b06760a53 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 13:38:09 -0700 Subject: [PATCH 33/68] Stabilise test_cancel_button_triggers_callback on slow CI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The test shared a class-scoped window with ``test_confirm_button_triggers_callback`` (which runs immediately before it). If the prior test's confirm toast lingered in the DOM for a few extra ms, the cancel test's ``document.querySelector( '.pywry-toast--confirm')`` returned the STALE toast — ``toastDismissed`` was ``False`` — or no toast at all (wait_for_result timed out before the new toast rendered). On slow CI runners the 3s timeout was cutting it fine: local passes, CI fails. Fixes: - Clear any residual ``.pywry-toast--confirm`` nodes from the container before showing the new toast. - Scope every query to ``container.querySelector`` so stray elements elsewhere on the page don't get picked up. - Lengthen the inner setTimeouts from 100ms → 200ms so a sluggish first paint has room to complete. - Bump ``wait_for_result`` timeout from 3s → 5s to match ``test_show_confirm_toast_has_buttons``'s budget. Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/tests/test_alerts.py | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/pywry/tests/test_alerts.py b/pywry/tests/test_alerts.py index 79708c9..d7591e3 100644 --- a/pywry/tests/test_alerts.py +++ b/pywry/tests/test_alerts.py @@ -781,9 +781,17 @@ def test_cancel_button_triggers_callback(self) -> None: title="Cancel Callback Test", ) + # Clear any toasts the previous test (confirm-button) may have + # left attached — when tests share a page across the class, + # a stale ``.pywry-toast--confirm`` selector can find the + # old toast's DOM node (``toastDismissed=False``) or steer + # the click to the wrong button. script = """ (function() { var container = document.querySelector('.pywry-widget'); + var existing = container.querySelectorAll('.pywry-toast--confirm'); + existing.forEach(function(el) { el.remove(); }); + var cancelled = false; PYWRY_TOAST.confirm({ @@ -794,23 +802,23 @@ def test_cancel_button_triggers_callback(self) -> None: }); setTimeout(function() { - var cancelBtn = document.querySelector('.pywry-toast__btn--cancel'); + var cancelBtn = container.querySelector('.pywry-toast__btn--cancel'); if (cancelBtn) { cancelBtn.click(); } setTimeout(function() { - var toastGone = document.querySelector('.pywry-toast--confirm') === null; + var toastGone = container.querySelector('.pywry-toast--confirm') === null; pywry.result({ cancelled: cancelled, toastDismissed: toastGone }); - }, 100); - }, 100); + }, 200); + }, 200); })(); """ - result = wait_for_result(label, script, timeout=3.0) + result = wait_for_result(label, script, timeout=5.0) assert result is not None assert result["cancelled"] is True assert result["toastDismissed"] is True From c282242f5d0840f76a1424501dce8920b61a6152 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 14:18:52 -0700 Subject: [PATCH 34/68] Docs: remove stale counts, add missing extras/providers/backends MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Scan of ``pywry/docs/docs/`` for findings flagged in the audit. - ``getting-started/installation.md`` — core-extras table was missing ``sqlite``; provider-extras table was missing ``acp`` and ``deepagent``. Added three rows and split the second table into "Chat provider extras" for clarity. - ``components/chat/index.md`` — "Available providers" table listed five providers; added ``DeepagentProvider`` and a cross-reference to the integrations chat-providers reference page. - ``mcp/tools.md`` — dropped the stale ``**38 tools**`` header (the number was wrong and would drift on every tool addition anyway; document surfaces the same information via the section organization). Promoted ``## send_event`` under a new ``## Low-level event dispatch`` H2 — it was structurally orphaned between Widget Management and Chat. Dropped ``any of the 18 component types`` → ``any toolbar component type``. - ``mcp/index.md`` — dropped ``38 widget operations`` / ``13 guidance prompts`` / ``18 components`` count claims from the architecture diagram, resources table, and prompts heading. The skills table now lists every skill under the ``mcp/skills/`` root — previously missing ``chat_agent``, ``authentication``, ``tvchart``, and ``events``. - ``mcp/setup.md`` — verification step changed from ``Claude should list 38 tools`` (drifts on every addition) to naming the tool groups; fixed broken numbered list (had ``5.`` after ``3.``). - ``mcp/skills.md`` — replaced ``All 18 components`` with ``Every toolbar component`` in the mandatory-skill description and the component-reference feature bullet. - ``guides/deploy-mode.md`` — added a dedicated ``### SQLite`` state-backend section alongside ``### Memory`` and ``### Redis``. Documents ``PYWRY_DEPLOY__SQLITE_PATH``, SQLCipher encryption via ``pywry[sqlite]``, key-source precedence (``PYWRY_SQLITE_KEY`` → OS keyring → salt file), and the graceful fallback to plain SQLite when the binding isn't installed. Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/docs/docs/components/chat/index.md | 3 +++ pywry/docs/docs/getting-started/installation.md | 5 ++++- pywry/docs/docs/guides/deploy-mode.md | 14 ++++++++++++++ pywry/docs/docs/mcp/index.md | 14 +++++++++----- pywry/docs/docs/mcp/setup.md | 6 +++--- pywry/docs/docs/mcp/skills.md | 4 ++-- pywry/docs/docs/mcp/tools.md | 14 +++++++------- 7 files changed, 42 insertions(+), 18 deletions(-) diff --git a/pywry/docs/docs/components/chat/index.md b/pywry/docs/docs/components/chat/index.md index 5070b3a..e03fef4 100644 --- a/pywry/docs/docs/components/chat/index.md +++ b/pywry/docs/docs/components/chat/index.md @@ -204,6 +204,9 @@ Available providers: | `MagenticProvider` | Any magentic-supported LLM | `pip install 'pywry[magentic]'` | | `CallbackProvider` | Your own Python callable | (included) | | `StdioProvider` | External ACP agent via subprocess | `pip install 'pywry[acp]'` | +| `DeepagentProvider` | LangChain Deep Agents (planning, MCP tools, skills) | `pip install 'pywry[deepagent]'` | + +See [Chat Providers](../../integrations/chat/chat-providers.md) for the reference API of each provider. The `StdioProvider` is special — it spawns an external program (like `claude` or `gemini`) as a subprocess and communicates over stdin/stdout using JSON-RPC. This means you can connect PyWry's chat UI to any ACP-compatible agent without writing any adapter code. diff --git a/pywry/docs/docs/getting-started/installation.md b/pywry/docs/docs/getting-started/installation.md index cdb1ae9..56347e4 100644 --- a/pywry/docs/docs/getting-started/installation.md +++ b/pywry/docs/docs/getting-started/installation.md @@ -18,15 +18,18 @@ Core extras: | `pip install 'pywry[auth]'` | OAuth2 and secure token storage support | | `pip install 'pywry[freeze]'` | PyInstaller hook for frozen desktop apps | | `pip install 'pywry[mcp]'` | Model Context Protocol server support | +| `pip install 'pywry[sqlite]'` | Encrypted SQLite state backend (SQLCipher) | | `pip install 'pywry[all]'` | Every optional dependency above | -Provider SDK extras: +Chat provider extras: | Extra | Installs | |-------|----------| | `pip install 'pywry[openai]'` | OpenAI SDK for `OpenAIProvider` | | `pip install 'pywry[anthropic]'` | Anthropic SDK for `AnthropicProvider` | | `pip install 'pywry[magentic]'` | Magentic package for `MagenticProvider` | +| `pip install 'pywry[acp]'` | Agent Client Protocol for `StdioProvider` | +| `pip install 'pywry[deepagent]'` | LangChain Deep Agents for `DeepagentProvider` (includes MCP adapters and ACP) | Chat UI support is part of the base package. Provider extras only install third-party SDKs for the matching adapter classes. diff --git a/pywry/docs/docs/guides/deploy-mode.md b/pywry/docs/docs/guides/deploy-mode.md index 7cd9304..4608e62 100644 --- a/pywry/docs/docs/guides/deploy-mode.md +++ b/pywry/docs/docs/guides/deploy-mode.md @@ -170,6 +170,20 @@ python my_app.py Redis key structure: `{prefix}:widget:{widget_id}` (hash), `{prefix}:widgets:active` (set of active IDs). +### SQLite + +Widget and session state is persisted to a local SQLite database file. Suitable for single-host multi-worker deployments that don't want a Redis dependency. + +```bash +PYWRY_DEPLOY__STATE_BACKEND=sqlite \ +PYWRY_DEPLOY__SQLITE_PATH=~/.config/pywry/pywry.db \ +python my_app.py +``` + +- State persists across restarts on the same host. +- Multiple workers on one host can share the database via WAL journal mode. +- **Encrypted at rest via SQLCipher** when `pywry[sqlite]` is installed. The encryption key is sourced from `PYWRY_SQLITE_KEY` if set, otherwise from the OS keyring (`keyring`), otherwise derived from a per-host salt file. Falls back to plain SQLite (with a warning) when the `sqlcipher3` binding isn't available. + ## Detecting Deploy Mode ```python diff --git a/pywry/docs/docs/mcp/index.md b/pywry/docs/docs/mcp/index.md index 861b808..70815eb 100644 --- a/pywry/docs/docs/mcp/index.md +++ b/pywry/docs/docs/mcp/index.md @@ -74,9 +74,9 @@ The MCP server bridges AI agents and PyWry's rendering engine: ```mermaid flowchart LR A["AI Agent
(Claude, etc.)"] <-->|"MCP Protocol
(stdio / SSE)"| B["PyWry MCP Server"] - B --> C["Tools
38 widget operations"] + B --> C["Tools
Widget + chart operations"] B --> D["Resources
Docs, source, exports"] - B --> E["Skills
13 guidance prompts"] + B --> E["Skills
Guidance prompts"] C --> F["PyWry Widgets
(native or browser)"] D --> B E --> B @@ -126,7 +126,7 @@ Read-only data the agent can access via `pywry://` URIs: |:---|:---| | `pywry://docs/events` | Built-in events reference | | `pywry://docs/quickstart` | Getting started guide | -| `pywry://component/{name}` | Component documentation (18 components) | +| `pywry://component/{name}` | Component documentation | | `pywry://source/{name}` | Component Python source code | | `pywry://source/components` | All component sources combined | | `pywry://skill/{id}` | Skill guidance text | @@ -134,11 +134,11 @@ Read-only data the agent can access via `pywry://` URIs: ### Prompts (Skills) -13 guidance prompts that teach the agent how to use PyWry effectively: +Guidance prompts that teach the agent how to use PyWry effectively: | Skill | What it teaches | |:---|:---| -| `component_reference` | **Mandatory** — all 18 components, properties, events, JSON schemas | +| `component_reference` | **Mandatory** — every component's properties, events, and JSON schema | | `interactive_buttons` | Auto-wired `elementId:action` callback pattern | | `native` | Desktop window mode, full-viewport layout | | `jupyter` | Notebook integration — AnyWidget and IFrame approaches | @@ -150,6 +150,10 @@ Read-only data the agent can access via `pywry://` URIs: | `forms_and_inputs` | Form building with validation and event collection | | `modals` | Modal dialogs — schema, sizes, open/close/reset | | `chat` | Conversational chat widget — streaming, threads, slash commands, providers | +| `chat_agent` | Operating inside a running chat widget — `@` attachments, tool-call cards, reply style | +| `authentication` | OAuth2 / OIDC sign-in (Google, GitHub, Microsoft, custom) and RBAC wiring | +| `tvchart` | Driving a TradingView chart — symbols, intervals, indicators, markers, compares, layouts | +| `events` | PyWry event bus — namespaced `ns:name`, widget routing, request/response correlation | | `autonomous_building` | End-to-end app generation with `plan_widget`, `build_app`, `export_project`, `scaffold_app` | ## Next Steps diff --git a/pywry/docs/docs/mcp/setup.md b/pywry/docs/docs/mcp/setup.md index c6386b5..b989015 100644 --- a/pywry/docs/docs/mcp/setup.md +++ b/pywry/docs/docs/mcp/setup.md @@ -297,10 +297,10 @@ The command copies skill markdown files from PyWry's bundled `pywry/mcp/skills/` ## Verifying the Setup -1. Restart Claude Desktop after editing the config -2. Open a new conversation +1. Restart Claude Desktop after editing the config. +2. Open a new conversation. 3. Ask: *"What PyWry tools do you have available?"* -5. Claude should list 38 tools +4. Claude should list the tool groups (discovery, widget creation, widget manipulation, widget management, chat, TVChart, resources / export, autonomous building) and be able to call `get_skills` to retrieve the component reference. You can also test manually: diff --git a/pywry/docs/docs/mcp/skills.md b/pywry/docs/docs/mcp/skills.md index 7a7e7a3..a483c0f 100644 --- a/pywry/docs/docs/mcp/skills.md +++ b/pywry/docs/docs/mcp/skills.md @@ -19,7 +19,7 @@ Skills are **lazy-loaded** from markdown files on disk and cached in memory (LRU | ID | Priority | What it teaches | |:---|:---|:---| -| `component_reference` | **Mandatory** | All 18 components — property tables, event signatures, JSON schemas, auto-wired actions, toolbar structure, event format rules | +| `component_reference` | **Mandatory** | Every toolbar component — property tables, event signatures, JSON schemas, auto-wired actions, toolbar structure, event format rules | | `interactive_buttons` | High | The `elementId:action` auto-wiring pattern for buttons (increment, decrement, reset, toggle) | | `autonomous_building` | High | End-to-end app generation — `plan_widget`, `build_app`, `export_project`, `scaffold_app` workflows and chaining patterns | | `native` | Medium | Desktop native window mode — full-viewport layout, system integration, window management | @@ -41,7 +41,7 @@ Skills are **lazy-loaded** from markdown files on disk and cached in memory (LRU The `component_reference` skill is special — it's the **authoritative source** for all toolbar component definitions. It contains: -- Property tables for all 18 component types +- Property tables for every component type - Event payload signatures for each component - JSON schema examples for tool call construction - Auto-wired action documentation diff --git a/pywry/docs/docs/mcp/tools.md b/pywry/docs/docs/mcp/tools.md index 91aa1b7..dace4f7 100644 --- a/pywry/docs/docs/mcp/tools.md +++ b/pywry/docs/docs/mcp/tools.md @@ -1,12 +1,10 @@ # Tools Reference -The MCP server exposes **38 tools** organized into eight groups. -Every description, parameter name, type, and default below comes directly from the tool schemas in the source code. +The MCP server groups tools by purpose: discovery, widget creation, widget manipulation, widget management, chat, TVChart manipulation, resources / export, and autonomous building. Every description, parameter name, type, and default below comes directly from the tool schemas in the source code. !!! warning "Mandatory first step" Call `get_skills` with `skill="component_reference"` **before** creating any widget. - The component reference is the authoritative source for event signatures, - system events, and JSON schemas for all 18 toolbar component types. + The component reference is the authoritative source for every toolbar component's event signature, system events, and JSON schema. --- @@ -104,7 +102,7 @@ Toolbar events that are **not** covered by an explicit `callbacks` entry are sti "position": "top", // top | bottom | left | right | inside "items": [ { - "type": "button", // any of the 18 component types + "type": "button", // any toolbar component type "label": "Save", "event": "app:save", // namespace:action (avoid pywry/plotly/grid namespaces) "variant": "primary", // primary | neutral | danger | success @@ -872,9 +870,11 @@ Destroy a widget and clean up all associated resources (event buffers, callbacks --- -## send_event +## Low-level event dispatch -The low-level escape hatch. Send **any** event type to a widget's frontend. This is the same mechanism all the manipulation tools use internally — `set_content` emits `pywry:set-content`, `show_toast` emits `pywry:alert`, etc. +### send_event + +The low-level escape hatch. Send any event type to a widget's frontend. Every manipulation tool above uses this mechanism internally — `set_content` emits `pywry:set-content`, `show_toast` emits `pywry:alert`, etc. | Parameter | Type | Required | Description | |:---|:---|:---|:---| From bdc7d79e523a97e385ff7a1216e11498cf84b550 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 14:37:47 -0700 Subject: [PATCH 35/68] Docs: close accuracy gaps in events and CSS reference pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Verified each finding by grepping the actual code on both sides before editing. **events/chat.md** — added six events emitted by ``pywry/chat/manager.py`` / listened to in ``chat-handlers.js`` but previously undocumented: - ``chat:permission-request`` (Python → JS) — paired with ``chat:permission-response`` (JS → Python) for mid-stream user approval of tool invocations. - ``chat:plan-update`` (Python → JS) — renders a structured plan card above the input, emitted by agent providers that expose an explicit planning phase (Deep Agents ``write_todos``). - ``chat:config-update`` (Python → JS) — command-palette updates when a provider mutates its slash-command surface mid-session. - ``chat:mode-update`` (Python → JS) — active agent mode switch (e.g. planner / builder / chat); redraws the mode picker. - ``chat:commands-update`` (Python → JS) — full replacement of the slash-command palette. **events/system.md** — added: - ``pywry:theme-update`` (JS → Python) — broadcast when the frontend resolves a theme change (including ``system`` → concrete ``dark``/``light`` resolution). Emitted from ``frontend/src/theme-manager.js:55``. Reworked the matching Python→JS entry's payload description to enumerate all three accepted modes. - ``pywry:download-csv`` (Python → JS) — CSV-stream variant of ``pywry:download`` used by the Plotly export-data flow (``frontend/src/plotly-widget.js:183``). **events/tvchart.md** — added ``tvchart:data-settled`` (JS → Python). Frontend emits it after every mutation that rebuilds or repaints the chart, once every deferred post-CREATE task has finished. Mutating MCP tools (symbol search, change interval, time-range preset, …) block on this event instead of polling ``tvchart:request-state``, which would race the destroy-recreate window. **css/chat.md** — corrected stale / added missing classes: - Dropped ``.pywry-chat-thread-rename`` and ``.pywry-chat-thread-delete`` — grep on the frontend tree finds zero references. - Relabelled ``.pywry-chat-input`` → ``#pywry-chat-input`` (the textarea is targeted by ID selector; the bare class isn't defined anywhere). - Added ``.pywry-chat-todo-icon``, ``.pywry-chat-todo-active``, ``.pywry-chat-todo-done``, ``.pywry-chat-todo-actions`` — emitted by the plan-card renderer in ``chat-handlers.js``. - Added ``.pywry-chat-settings-empty`` (settings menu empty-state) and ``.pywry-chat-drop-overlay-content`` (drag-and-drop overlay inner card) — both defined in ``style/chat.css``. **css/tvchart.md** — added six CSS variables that exist in both theme blocks of ``style/tvchart.css`` but weren't in the reference: - ``--pywry-tvchart-hollow-up-body`` — hollow-candles up-body fill. - ``--pywry-tvchart-hidden`` — body/border/wick hide marker. - ``--pywry-tvchart-price-line`` — right-axis price marker color (kept on its own selector so a transparent hollow body doesn't also erase the price line). - ``--pywry-tvchart-line-default`` / ``--pywry-tvchart-area-top- default`` / ``--pywry-tvchart-area-bottom-default`` — settings-dialog defaults for the Line / Area series color pickers. Also added a new ``## Container`` section documenting the ``.pywry-tvchart-container`` selector (the root wrapper hosting the chart canvas and toolbars). Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/docs/docs/reference/css/chat.md | 10 ++++++--- pywry/docs/docs/reference/css/tvchart.md | 23 +++++++++++++++++++++ pywry/docs/docs/reference/events/chat.md | 6 ++++++ pywry/docs/docs/reference/events/system.md | 9 +++++++- pywry/docs/docs/reference/events/tvchart.md | 1 + 5 files changed, 45 insertions(+), 4 deletions(-) diff --git a/pywry/docs/docs/reference/css/chat.md b/pywry/docs/docs/reference/css/chat.md index 699a0a5..9e9c019 100644 --- a/pywry/docs/docs/reference/css/chat.md +++ b/pywry/docs/docs/reference/css/chat.md @@ -15,7 +15,7 @@ Source: `frontend/style/chat.css` — Styles for the `show_chat()` / `ChatManage .pywry-chat-messages { /* Messages scroll area */ } .pywry-chat-input-bar { /* Input bar at bottom */ } .pywry-chat-input-row { /* Input row (textarea + send button) */ } -.pywry-chat-input { /* Chat textarea input */ } +#pywry-chat-input { /* Chat textarea input (ID selector — one per widget) */ } .pywry-chat-send-btn { /* Send button */ } .pywry-chat-send-btn.pywry-chat-stop { /* Stop button (red, shown during streaming) */ } .pywry-chat-fullscreen { /* Fullscreen state — expands to fill viewport */ } @@ -107,8 +107,6 @@ colors come from the shared CSS in `frontend/style/pywry.css`. .pywry-chat-thread-title-input { /* Editable title input */ } .pywry-chat-thread-id { /* Thread ID (monospace) */ } .pywry-chat-thread-actions { /* Action buttons (rename, delete) */ } -.pywry-chat-thread-rename { /* Rename button */ } -.pywry-chat-thread-delete { /* Delete button */ } ``` --- @@ -130,12 +128,16 @@ colors come from the shared CSS in `frontend/style/pywry.css`. .pywry-chat-todo-details { /* Collapsible details element */ } .pywry-chat-todo-summary { /* Todo summary toggle */ } .pywry-chat-todo-label { /* Todo label text */ } +.pywry-chat-todo-actions { /* Action buttons next to the summary (clear) */ } .pywry-chat-todo-progress { /* Progress bar track */ } .pywry-chat-todo-progress-fill { /* Progress bar fill */ } .pywry-chat-todo-list { /* Todo items list */ } .pywry-chat-todo-item { /* Individual todo item */ } .pywry-chat-todo-item-done { /* Completed todo */ } .pywry-chat-todo-item-active { /* Currently active todo */ } +.pywry-chat-todo-icon { /* Todo status icon (pending / active / done) */ } +.pywry-chat-todo-active { /* Active-state icon modifier */ } +.pywry-chat-todo-done { /* Done-state icon modifier */ } .pywry-chat-todo-clear { /* Clear all button */ } ``` @@ -232,6 +234,7 @@ colors come from the shared CSS in `frontend/style/pywry.css`. .pywry-chat-settings-item-label { /* Item label */ } .pywry-chat-settings-sep { /* Separator line */ } .pywry-chat-settings-range-val { /* Range value display */ } +.pywry-chat-settings-empty { /* "No settings configured" placeholder */ } /* File Attachments */ .pywry-chat-attach-btn { /* Attach file button */ } @@ -241,6 +244,7 @@ colors come from the shared CSS in `frontend/style/pywry.css`. .pywry-chat-attachment-pill-name { /* Attachment filename */ } .pywry-chat-attachment-pill-remove { /* Remove attachment button */ } .pywry-chat-drop-overlay { /* Drag-and-drop overlay */ } +.pywry-chat-drop-overlay-content { /* Inner "Drop files here" message card */ } .pywry-chat-msg-attachments { /* Attachments within a message */ } .pywry-chat-msg-attach-badge { /* Attachment badge in message */ } ``` diff --git a/pywry/docs/docs/reference/css/tvchart.md b/pywry/docs/docs/reference/css/tvchart.md index a00e24b..f00f93d 100644 --- a/pywry/docs/docs/reference/css/tvchart.md +++ b/pywry/docs/docs/reference/css/tvchart.md @@ -36,6 +36,13 @@ This stylesheet defines ~67 CSS custom properties per theme (dark and light) for --pywry-tvchart-border-down: /* bearish border */; --pywry-tvchart-wick-up: /* bullish wick */; --pywry-tvchart-wick-down: /* bearish wick */; + + /* Chart-style patch values — read by _tvResolveChartStyle() in JS + to build the optionPatch for style switches. Defined as CSS + vars so themes stay the source of truth. */ + --pywry-tvchart-hollow-up-body: /* hollow-candles up-body fill (default: transparent) */; + --pywry-tvchart-hidden: /* body/border/wick hide marker (default: transparent) */; + --pywry-tvchart-price-line: /* right-axis price marker color — stays visible even when the body is hollow */; } ``` @@ -72,6 +79,12 @@ This stylesheet defines ~67 CSS custom properties per theme (dark and light) for --pywry-tvchart-baseline-top-fill2: /* above baseline gradient end */; --pywry-tvchart-baseline-bottom-fill1: /* below baseline gradient start */; --pywry-tvchart-baseline-bottom-fill2: /* below baseline gradient end */; + + /* Settings-dialog defaults — read by the series-settings modal + when populating initial color pickers for Line / Area series. */ + --pywry-tvchart-line-default: /* default line-style series color */; + --pywry-tvchart-area-top-default: /* default area top fill */; + --pywry-tvchart-area-bottom-default: /* default area bottom fill */; } ``` @@ -120,6 +133,16 @@ All variables are duplicated for the light theme with appropriate light-mode val --- +## Container + +The outer wrapper that hosts the chart and its toolbars: + +```css +.pywry-tvchart-container { /* Root container holding the chart canvas, header toolbar, bottom status bar, and the drawing overlay */ } +``` + +--- + ## Icon Buttons Shared icon button used throughout the chart UI: diff --git a/pywry/docs/docs/reference/events/chat.md b/pywry/docs/docs/reference/events/chat.md index 3280cab..aa7b8c5 100644 --- a/pywry/docs/docs/reference/events/chat.md +++ b/pywry/docs/docs/reference/events/chat.md @@ -62,6 +62,7 @@ buttons send the id from the `data-msg-id` attribute on the bubble. |-------|---------|-------------| | `chat:settings-change` | `{key, value}` | User changed a settings menu item (e.g., temperature slider, model select). | | `chat:todo-clear` | `{}` | User dismissed the todo list above the input bar. | +| `chat:permission-response` | `{toolCallId, optionId, threadId}` | User clicked one of the options offered by a `chat:permission-request`. Resumes the paused generation with the chosen option id. | ## Assistant Responses (Python → JS) @@ -98,6 +99,7 @@ attribute also gets populated. | Event | Payload | Description | |-------|---------|-------------| | `chat:input-required` | `{messageId, threadId, requestId, prompt, placeholder, inputType, options?}` | Pause streaming to request user input mid-conversation. | +| `chat:permission-request` | `{messageId, threadId, toolCallId, title, description?, options: [{id, label, description?}]}` | Pause streaming to ask the user to approve / deny a tool invocation. Response arrives on `chat:permission-response`. | Handler pattern for permission requests: @@ -123,6 +125,7 @@ def my_handler(messages, ctx): | `chat:artifact` | `{messageId, artifactType, title, threadId, ...}` | Rich content artifact (code, chart, table, image, etc.). | | `chat:citation` | `{messageId, url, title, snippet, threadId}` | Source citation/reference link. | | `chat:todo-update` | `{items}` | Push a todo list above the input bar. Not stored in history. | +| `chat:plan-update` | `{entries: [{content, priority, status}]}` | Push a structured plan (to-do card) above the input bar. Emitted by agent providers that expose an explicit planning phase (e.g. Deep Agents `write_todos`). | **Artifact types and type-specific fields:** @@ -159,5 +162,8 @@ def my_handler(messages, ctx): | `chat:register-settings-item` | `{id, label, type, value, options?, min?, max?, step?}` | Register a settings menu item in the gear dropdown. | | `chat:context-sources` | `{sources}` | List of dashboard components available as @-mentionable context sources. | | `chat:update-settings` | `{key: value, ...}` | Push updated settings values to the frontend menu. | +| `chat:config-update` | `{options: [{id, label, description?}]}` | Update the registered command palette when a provider adjusts its slash-command surface mid-session. | +| `chat:mode-update` | `{currentModeId, availableModes: [ModeInfo]}` | Broadcast a change in the active agent mode (e.g. planner / builder / chat). The mode picker in the chat header rerenders from this payload. | +| `chat:commands-update` | `{commands: [{name, description}]}` | Replace the full slash-command palette. Used when the provider resets or switches its command set. | **Settings item types:** `action`, `toggle`, `select`, `range`, `separator` diff --git a/pywry/docs/docs/reference/events/system.md b/pywry/docs/docs/reference/events/system.md index 01794a2..18d8546 100644 --- a/pywry/docs/docs/reference/events/system.md +++ b/pywry/docs/docs/reference/events/system.md @@ -27,7 +27,13 @@ | `pywry:inject-css` | `{css, id?}` | Inject CSS (id for replacement) | | `pywry:remove-css` | `{id}` | Remove injected CSS by id | | `pywry:update-html` | `{html}` | Replace entire page content | -| `pywry:update-theme` | `{theme}` | Switch theme (`dark` or `light`) | +| `pywry:update-theme` | `{theme}` | Switch theme (`dark`, `light`, or `system`) | + +## Theme Broadcast (JS → Python) + +| Event | Payload | Description | +|-------|---------|-------------| +| `pywry:theme-update` | `{mode, original}` | Broadcast when the frontend resolves a theme change — fires after the user toggles dark/light or when `system` mode resolves to the concrete `light`/`dark` choice. `mode` is the resolved theme (`dark` / `light`); `original` is the request (`dark` / `light` / `system`). | ## Notifications & Actions (Python → JS) @@ -35,6 +41,7 @@ |-------|---------|-------------| | `pywry:alert` | `{message, type?, title?, duration?, position?, callback_event?}` | Toast notification | | `pywry:download` | `{content, filename, mimeType?}` | Trigger file download | +| `pywry:download-csv` | `{filename, data: [[row]], headers?}` | Trigger a CSV download — the frontend serialises `data` as CSV and streams it through the same download pipeline as `pywry:download`. Used by the Plotly export-data flow. | | `pywry:navigate` | `{url}` | Navigate to URL | | `pywry:refresh` | `{}` | Request content refresh | | `pywry:cleanup` | `{}` | Cleanup resources (native mode) | diff --git a/pywry/docs/docs/reference/events/tvchart.md b/pywry/docs/docs/reference/events/tvchart.md index e4fa40c..17e0c3b 100644 --- a/pywry/docs/docs/reference/events/tvchart.md +++ b/pywry/docs/docs/reference/events/tvchart.md @@ -33,6 +33,7 @@ The `tvchart:*` namespace handles all communication between the Python `TVChartS | `tvchart:time-scale` | Python→JS | `{fitContent?, scrollTo?, visibleRange?, chartId?}` | Control time scale (fit, scroll, set visible range) | | `tvchart:request-state` | Python→JS | `{chartId?, context?}` | Request current chart state export | | `tvchart:state-response` | JS→Python | `{chartId, theme, symbol, interval, chartType, compareSymbols, indicatorSourceSymbols, series, visibleRange, visibleLogicalRange, rawData, drawings, indicators, context?, error?}` | Exported chart state. `symbol` / `interval` / `chartType` reflect the active main series. `compareSymbols` is the user-facing compare overlay map; `indicatorSourceSymbols` is the compare map restricted to indicator inputs (hidden from the Compare panel). Each entry in `indicators` carries `{seriesId, name, type, period, color, group, sourceSeriesId, secondarySeriesId, secondarySymbol, isSubplot, primarySource, secondarySource}` so compare-derivative indicators (Spread, Ratio, Sum, Product, Correlation) can be described with the ticker their secondary leg holds. | +| `tvchart:data-settled` | JS→Python | same payload shape as `tvchart:state-response` | Emitted after every mutation that rebuilds or repaints the chart (symbol change, interval change, compare add, chart-type change, zoom preset, drawing add/remove) once every deferred post-CREATE task has finished. Mutating MCP tools (`tvchart_symbol_search`, `tvchart_change_interval`, `tvchart_time_range`, etc.) block on this event to return a confirmation that the chart is fully stable — polling `tvchart:request-state` would race the destroy-recreate window. | ## User Interaction (JS → Python) From 82f9501e61cbbf4a44f5af61c0c7c1f59dfa6495 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 14:47:29 -0700 Subject: [PATCH 36/68] README: sync repo + package files, add missing extras/providers/backends MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The repo-root and package ``pywry/README.md`` files are kept identical — edited both in lockstep so every install path (GitHub landing page, PyPI project page, ``uv tree`` summary) sees the same content. - Dropped stale count language (``18 toolbar components``, ``60+ CSS variables``, ``25 tools, 8 skills, 20+ resources``, ``7 layout positions``) — numbers drift every release and ``N of X`` adds nothing a reader can act on. - Split the Installation extras into "Core extras" and "Chat provider extras" sub-tables. Added rows for ``sqlite`` (SQLCipher state backend), ``acp`` (``StdioProvider``), and ``deepagent`` (``DeepagentProvider``) — previously only in ``pyproject.toml``'s ``[project.optional-dependencies]``. - Expanded the Features list to reflect what the package actually ships: Chat with every provider named (including the two new ones); TradingView charts (Lightweight Charts + yFinance datafeed, compare-derivative indicators, savable layouts); the full state-backend lineup (memory / Redis / SQLite); a more accurate one-liner for the MCP server. Co-Authored-By: Claude Opus 4.7 (1M context) --- README.md | 33 +++++++++++++++++++++++---------- pywry/README.md | 33 +++++++++++++++++++++++---------- 2 files changed, 46 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 0e40ff6..ea75ff3 100644 --- a/README.md +++ b/README.md @@ -20,18 +20,28 @@ Python 3.10–3.14, virtual environment recommended. pip install pywry ``` +Core extras: + | Extra | When to use | |-------|-------------| | `pip install 'pywry[notebook]'` | Jupyter / anywidget integration | | `pip install 'pywry[auth]'` | OAuth2 and keyring-backed auth support | | `pip install 'pywry[freeze]'` | PyInstaller hook for standalone executables | | `pip install 'pywry[mcp]'` | Model Context Protocol server support | -| `pip install 'pywry[openai]'` | `OpenAIProvider` integration | -| `pip install 'pywry[anthropic]'` | `AnthropicProvider` integration | -| `pip install 'pywry[magentic]'` | `MagenticProvider` integration | +| `pip install 'pywry[sqlite]'` | Encrypted SQLite state backend (SQLCipher) | | `pip install 'pywry[all]'` | Everything above | -The chat UI itself is included in the base package. The provider extras only install optional third-party SDKs. +Chat provider extras: + +| Extra | When to use | +|-------|-------------| +| `pip install 'pywry[openai]'` | `OpenAIProvider` (OpenAI SDK) | +| `pip install 'pywry[anthropic]'` | `AnthropicProvider` (Anthropic SDK) | +| `pip install 'pywry[magentic]'` | `MagenticProvider` (any magentic-supported LLM) | +| `pip install 'pywry[acp]'` | `StdioProvider` (Agent Client Protocol subprocess) | +| `pip install 'pywry[deepagent]'` | `DeepagentProvider` (LangChain Deep Agents — includes MCP adapters and ACP) | + +The chat UI itself is included in the base package. Provider extras only install the matching third-party SDK. **Linux only** — install system webview dependencies first: @@ -101,12 +111,15 @@ app.block() ## Features -- **18 toolbar components** — `Button`, `Select`, `MultiSelect`, `TextInput`, `SecretInput`, `SliderInput`, `RangeInput`, `Toggle`, `Checkbox`, `RadioGroup`, `TabGroup`, `Marquee`, `Modal`, and more. All Pydantic models, 7 layout positions. -- **Two-way events** — `app.emit()` and `app.on()` bridge Python and JavaScript in both directions. Pre-wired Plotly and AgGrid events included. -- **Theming** — light/dark modes, 60+ CSS variables, hot reload during development. -- **Security** — token auth, CSP headers, `SecuritySettings.strict()` / `.permissive()` / `.localhost()` presets. `SecretInput` stores values server-side, never in HTML. -- **Standalone executables** — PyInstaller hook ships with `pywry[freeze]`. No `.spec` edits or `--hidden-import` flags required. -- **MCP server** — 25 tools, 8 skills, 20+ resources for AI agent integration. +- **Toolbar components** — `Button`, `Select`, `MultiSelect`, `TextInput`, `SecretInput`, `SliderInput`, `RangeInput`, `Toggle`, `Checkbox`, `RadioGroup`, `TabGroup`, `Marquee`, `Modal`, and more. All Pydantic models; position them around the content edges or inside the chart area. +- **Two-way events** — `app.emit()` and `app.on()` bridge Python and JavaScript in both directions. Pre-wired Plotly and AgGrid events included. +- **Chat** — streaming chat widget with threads, slash commands, artifacts, and pluggable providers: `OpenAIProvider`, `AnthropicProvider`, `MagenticProvider`, `CallbackProvider`, `StdioProvider` (ACP subprocess), and `DeepagentProvider` (LangChain Deep Agents). +- **TradingView charts** — Lightweight Charts integration with a yFinance-compatible datafeed, drawings, compare overlays, compare-derivative indicators (Spread / Ratio / Sum / Product / Correlation), and savable layouts. +- **Theming** — light / dark / system modes, themeable via `--pywry-*` CSS variables, hot reload during development. +- **Security** — token auth, CSP headers, `SecuritySettings.strict()` / `.permissive()` / `.localhost()` presets. `SecretInput` stores values server-side, never in HTML. +- **State backends** — in-memory (default), Redis (multi-worker), or SQLite with SQLCipher encryption at rest. +- **Standalone executables** — PyInstaller hook ships with `pywry[freeze]`. No `.spec` edits or `--hidden-import` flags required. +- **MCP server** — drive widgets, charts, and dashboards from any Model Context Protocol client (Claude Desktop, Claude Code, Cursor, etc.). ## MCP Server diff --git a/pywry/README.md b/pywry/README.md index 0e40ff6..ea75ff3 100644 --- a/pywry/README.md +++ b/pywry/README.md @@ -20,18 +20,28 @@ Python 3.10–3.14, virtual environment recommended. pip install pywry ``` +Core extras: + | Extra | When to use | |-------|-------------| | `pip install 'pywry[notebook]'` | Jupyter / anywidget integration | | `pip install 'pywry[auth]'` | OAuth2 and keyring-backed auth support | | `pip install 'pywry[freeze]'` | PyInstaller hook for standalone executables | | `pip install 'pywry[mcp]'` | Model Context Protocol server support | -| `pip install 'pywry[openai]'` | `OpenAIProvider` integration | -| `pip install 'pywry[anthropic]'` | `AnthropicProvider` integration | -| `pip install 'pywry[magentic]'` | `MagenticProvider` integration | +| `pip install 'pywry[sqlite]'` | Encrypted SQLite state backend (SQLCipher) | | `pip install 'pywry[all]'` | Everything above | -The chat UI itself is included in the base package. The provider extras only install optional third-party SDKs. +Chat provider extras: + +| Extra | When to use | +|-------|-------------| +| `pip install 'pywry[openai]'` | `OpenAIProvider` (OpenAI SDK) | +| `pip install 'pywry[anthropic]'` | `AnthropicProvider` (Anthropic SDK) | +| `pip install 'pywry[magentic]'` | `MagenticProvider` (any magentic-supported LLM) | +| `pip install 'pywry[acp]'` | `StdioProvider` (Agent Client Protocol subprocess) | +| `pip install 'pywry[deepagent]'` | `DeepagentProvider` (LangChain Deep Agents — includes MCP adapters and ACP) | + +The chat UI itself is included in the base package. Provider extras only install the matching third-party SDK. **Linux only** — install system webview dependencies first: @@ -101,12 +111,15 @@ app.block() ## Features -- **18 toolbar components** — `Button`, `Select`, `MultiSelect`, `TextInput`, `SecretInput`, `SliderInput`, `RangeInput`, `Toggle`, `Checkbox`, `RadioGroup`, `TabGroup`, `Marquee`, `Modal`, and more. All Pydantic models, 7 layout positions. -- **Two-way events** — `app.emit()` and `app.on()` bridge Python and JavaScript in both directions. Pre-wired Plotly and AgGrid events included. -- **Theming** — light/dark modes, 60+ CSS variables, hot reload during development. -- **Security** — token auth, CSP headers, `SecuritySettings.strict()` / `.permissive()` / `.localhost()` presets. `SecretInput` stores values server-side, never in HTML. -- **Standalone executables** — PyInstaller hook ships with `pywry[freeze]`. No `.spec` edits or `--hidden-import` flags required. -- **MCP server** — 25 tools, 8 skills, 20+ resources for AI agent integration. +- **Toolbar components** — `Button`, `Select`, `MultiSelect`, `TextInput`, `SecretInput`, `SliderInput`, `RangeInput`, `Toggle`, `Checkbox`, `RadioGroup`, `TabGroup`, `Marquee`, `Modal`, and more. All Pydantic models; position them around the content edges or inside the chart area. +- **Two-way events** — `app.emit()` and `app.on()` bridge Python and JavaScript in both directions. Pre-wired Plotly and AgGrid events included. +- **Chat** — streaming chat widget with threads, slash commands, artifacts, and pluggable providers: `OpenAIProvider`, `AnthropicProvider`, `MagenticProvider`, `CallbackProvider`, `StdioProvider` (ACP subprocess), and `DeepagentProvider` (LangChain Deep Agents). +- **TradingView charts** — Lightweight Charts integration with a yFinance-compatible datafeed, drawings, compare overlays, compare-derivative indicators (Spread / Ratio / Sum / Product / Correlation), and savable layouts. +- **Theming** — light / dark / system modes, themeable via `--pywry-*` CSS variables, hot reload during development. +- **Security** — token auth, CSP headers, `SecuritySettings.strict()` / `.permissive()` / `.localhost()` presets. `SecretInput` stores values server-side, never in HTML. +- **State backends** — in-memory (default), Redis (multi-worker), or SQLite with SQLCipher encryption at rest. +- **Standalone executables** — PyInstaller hook ships with `pywry[freeze]`. No `.spec` edits or `--hidden-import` flags required. +- **MCP server** — drive widgets, charts, and dashboards from any Model Context Protocol client (Claude Desktop, Claude Code, Cursor, etc.). ## MCP Server From f483f64230457ac1d7b3fe5505270d103b2bb67b Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 15:06:34 -0700 Subject: [PATCH 37/68] README + AGENTS: accurate TradingView description, refreshed agent guide MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Drop "yFinance-compatible datafeed" wording from both READMEs. The TradingView surface is extended Lightweight Charts with drawings, a pluggable datafeed API, a UDF adapter, streaming bars, compare overlays, compare-derivative indicators, savable layouts, and a settings panel. - Rewrite AGENTS.md Quick Reference, Core Capabilities, Dependencies, and Directory Structure to reflect the chat/, mcp/, tvchart/, state/, and auth/ subpackages that have landed since the last pass. - Expand Imports to cover the real public surface (chat providers / manager / artifacts / updates, tvchart datafeed + UDF, menu/tray/modal proxies, TVChartStateMixin, etc.). - Expand Reserved Namespaces and Pre-Registered Events with chat:*, tvchart:*, toolbar:*, auth:*, tray:*, menu:*, modal:* and add the pywry:theme-update JS→Python direction. - Add dedicated Chat Widget, TradingView Charts, MCP Server, and State Backends sections. - Drop count language ("60+ CSS variables", "19 Tauri plugins", "18 declarative components", "Five Window Modes"). - Fix the setup git clone URL to point at the real PyWry repository. Co-Authored-By: Claude Opus 4.7 (1M context) --- README.md | 2 +- pywry/AGENTS.md | 505 +++++++++++++++++++++++++++++++++++++++++------- pywry/README.md | 2 +- 3 files changed, 442 insertions(+), 67 deletions(-) diff --git a/README.md b/README.md index ea75ff3..8cce3db 100644 --- a/README.md +++ b/README.md @@ -114,7 +114,7 @@ app.block() - **Toolbar components** — `Button`, `Select`, `MultiSelect`, `TextInput`, `SecretInput`, `SliderInput`, `RangeInput`, `Toggle`, `Checkbox`, `RadioGroup`, `TabGroup`, `Marquee`, `Modal`, and more. All Pydantic models; position them around the content edges or inside the chart area. - **Two-way events** — `app.emit()` and `app.on()` bridge Python and JavaScript in both directions. Pre-wired Plotly and AgGrid events included. - **Chat** — streaming chat widget with threads, slash commands, artifacts, and pluggable providers: `OpenAIProvider`, `AnthropicProvider`, `MagenticProvider`, `CallbackProvider`, `StdioProvider` (ACP subprocess), and `DeepagentProvider` (LangChain Deep Agents). -- **TradingView charts** — Lightweight Charts integration with a yFinance-compatible datafeed, drawings, compare overlays, compare-derivative indicators (Spread / Ratio / Sum / Product / Correlation), and savable layouts. +- **TradingView charts** — extended Lightweight Charts integration with a full drawing surface (trendlines, fib tools, text annotations, price notes, brushes), pluggable datafeed API, UDF adapter for external quote servers, streaming bar updates, compare overlays, compare-derivative indicators (Spread / Ratio / Sum / Product / Correlation), savable layouts, and a themeable settings panel. - **Theming** — light / dark / system modes, themeable via `--pywry-*` CSS variables, hot reload during development. - **Security** — token auth, CSP headers, `SecuritySettings.strict()` / `.permissive()` / `.localhost()` presets. `SecretInput` stores values server-side, never in HTML. - **State backends** — in-memory (default), Redis (multi-worker), or SQLite with SQLCipher encryption at rest. diff --git a/pywry/AGENTS.md b/pywry/AGENTS.md index ce2fa76..3d439d3 100644 --- a/pywry/AGENTS.md +++ b/pywry/AGENTS.md @@ -8,12 +8,14 @@ | Aspect | Details | |--------|---------| -| **Language** | Python 3.10+ | -| **Type System** | Strict typing with Pydantic v2 models | +| **Language** | Python 3.10–3.14 (base); dev tooling requires 3.11+ | +| **Type System** | Strict mypy, Pydantic v2 models | | **Style** | Ruff (line length 100), NumPy docstrings | | **Testing** | pytest with fixtures, `PYWRY_HEADLESS=1` for CI | -| **Architecture** | Subprocess IPC (desktop) + FastAPI inline server (notebooks) | -| **Scaling** | Deploy mode with Redis-backed state for multi-worker deployments | +| **Architecture** | Subprocess IPC (native) + FastAPI inline server (notebook / browser) | +| **State** | Memory (default), Redis, or SQLite + SQLCipher for multi-worker / at-rest encryption | +| **Chat** | Streaming chat widget with OpenAI / Anthropic / Magentic / Callback / Stdio-ACP / Deepagent providers | +| **MCP** | FastMCP server (`pywry mcp`) exposing widget, chart, grid, chat, tvchart, and auth tooling | --- @@ -27,45 +29,64 @@ Built on [PyTauri](https://pypi.org/project/pytauri/) (which uses Rust's [Tauri] ### Core Capabilities -- **Five Window Modes**: `NEW_WINDOW`, `SINGLE_WINDOW`, `MULTI_WINDOW`, `NOTEBOOK`, `BROWSER` -- **Notebook Support**: Automatic inline rendering via anywidget or IFrame in Jupyter/Colab -- **Toolbar System**: 18 declarative Pydantic components with 7 layout positions — automatic nested flexbox structure -- **Two-Way Events**: Python ↔ JavaScript communication with pre-wired Plotly/AgGrid events and utility events for DOM manipulation -- **Theming & CSS**: Light/dark modes, 60+ CSS variables, component ID targeting, and dynamic styling via events (`pywry:set-style`, `pywry:inject-css`) -- **Security**: Scoped token auth enabled by default, CSP headers, internal API protection, production presets available -- **AgGrid Tables**: Best-in-class Pandas → AgGrid conversion with pre-wired events, context menus, and practical defaults -- **Plotly Charts**: Plotly rendering with pre-wired plot events for Dash-like interactivity -- **TradingView Charts**: TradingView Lightweight Charts integration with OHLCV normalization, multi-series, indicators, and toolbar-driven controls -- **Toast Notifications**: Built-in alert system with positioning (info, success, warning, error, confirm) -- **Marquee Ticker**: Scrolling text/content with dynamic updates -- **Secrets Handling**: Secure password inputs — values stored server-side, never rendered in HTML -- **Hot Reload**: CSS injection and JS refresh with scroll preservation -- **Bundled Libraries**: Plotly.js 3.3.1 and AgGrid 35.0.0 (offline capable) -- **Native File Dialogs**: Tauri-powered save/open dialogs and filesystem access -- **Configuration System**: TOML files, pyproject.toml, and environment variables -- **CLI Tools**: Configuration management and project initialization -- **Deploy Mode**: Horizontal scaling with Redis-backed state for multi-worker deployments -- **Authentication & RBAC**: JWT-based authentication with role-based access control +- **Window Modes**: `NEW_WINDOW`, `SINGLE_WINDOW`, `MULTI_WINDOW`, `NOTEBOOK`, `BROWSER`. +- **Notebook Support**: Automatic inline rendering via anywidget or IFrame in Jupyter / VS Code / Colab. +- **Toolbar System**: Declarative Pydantic components (`Button`, `Select`, `MultiSelect`, `TextInput`, `SecretInput`, `SliderInput`, `RangeInput`, `Toggle`, `Checkbox`, `RadioGroup`, `TabGroup`, `Marquee`, `Modal`, …) with top / bottom / left / right / header / footer / inside positions and automatic nested-flexbox layout. +- **Two-Way Events**: Python ↔ JavaScript communication with pre-wired Plotly / AgGrid / TradingView / chat events plus utility events for DOM manipulation. +- **Theming & CSS**: Light / dark / system modes, `--pywry-*` CSS variables, component-ID targeting, hot reload, and dynamic styling via events (`pywry:set-style`, `pywry:inject-css`). +- **Security**: Scoped token auth enabled by default, CSP headers, internal API protection, `SecuritySettings.strict() / .permissive() / .localhost()` presets. +- **AgGrid Tables**: Pandas → AgGrid conversion with pre-wired events, context menus, server-side mode, and persisted column/filter/sort state. +- **Plotly Charts**: Plotly rendering with pre-wired plot events, layout / trace / figure updates, and state round-trips. +- **TradingView Charts**: Extended Lightweight Charts integration — drawing surface (trendlines, fib tools, text, price notes, brushes), pluggable datafeed API, UDF adapter for external quote servers, streaming bar updates, compare overlays, compare-derivative indicators (Spread / Ratio / Sum / Product / Correlation), savable layouts, and a themeable settings panel. +- **Chat Widget**: Streaming chat UI with threads, artifacts, slash commands, plan / todo updates, permission prompts, context sources, and pluggable providers (`OpenAIProvider`, `AnthropicProvider`, `MagenticProvider`, `CallbackProvider`, `StdioProvider` for ACP subprocesses, `DeepagentProvider` for LangChain Deep Agents). +- **MCP Server**: `pywry mcp --transport stdio | http` exposes widget management, components, chart / grid / tvchart control, events, chat-agent driving, auth, and docs skills to any MCP client. +- **Toast Notifications**: Built-in alert system (info, success, warning, error, confirm) with positioning and blocking overlay. +- **Marquee Ticker**: Scrolling text/content with dynamic per-item updates. +- **Secrets Handling**: `SecretInput` stores values server-side; HTML only carries opaque component IDs. +- **Hot Reload**: CSS injection and JS refresh with scroll preservation. +- **Bundled Libraries**: Plotly.js, AgGrid, and TradingView Lightweight Charts are bundled (offline capable) and served from `pywry/frontend/assets/`. +- **Native File Dialogs, Menus, Tray**: Tauri-powered save/open dialogs and filesystem access; `MenuProxy`, `TrayProxy`, and `WindowProxy` wrap the Tauri runtime APIs. +- **Configuration System**: TOML files, `pyproject.toml` `[tool.pywry]`, environment variables (`PYWRY_*`). +- **CLI Tools**: `pywry config`, `pywry init`, `pywry mcp`, `pywry mcp install`. +- **Deploy Mode**: Horizontal scaling with Redis-backed state, or SQLite + SQLCipher for single-node at-rest encryption. +- **Authentication**: OAuth2 (Google / GitHub / Microsoft / OIDC / custom) with PKCE, keyring-backed token storage, automatic refresh, and optional RBAC for deploy-mode routes. +- **Standalone Executables**: `pywry[freeze]` ships a PyInstaller hook — no `.spec` edits or `--hidden-import` flags required. ### Dependencies +Base package (always installed): + ``` -Python 3.10+ +Python 3.10–3.14 pytauri >= 0.8.0 -pytauri-wheel >= 0.8.0 +anyio >= 4.0.0 +httpx >= 0.27.0 pydantic >= 2.0.0 pydantic-settings >= 2.0.0 -anyio >= 4.0.0 +redis >= 7.1.0 # client library; only used if state_backend != "memory" fastapi >= 0.128.0 uvicorn >= 0.40.0 watchdog >= 3.0.0 -websockets >= 15.0.1 -requests >= 2.32.5 -pandas >= 1.5.3 -anywidget >= 0.9.0 (optional, recommended) -redis >= 5.0.0 (optional, for deploy mode) +setproctitle >= 1.3.0 +websockets >= 16.0.0 ``` +Optional extras (see `pyproject.toml` for full lists): + +| Extra | Pulls in | Purpose | +|-------|----------|---------| +| `notebook` | `anywidget`, `ipykernel` | Jupyter / anywidget integration | +| `auth` | `authlib`, `keyring` | OAuth2 and keyring-backed token storage | +| `mcp` | `fastmcp` | `pywry mcp` MCP server | +| `acp` | `agent-client-protocol` | `StdioProvider` (Agent Client Protocol subprocess) | +| `sqlite` | `sqlcipher3` | Encrypted SQLite state backend | +| `openai` / `anthropic` / `magentic` | matching SDK | Chat providers | +| `deepagent` | `deepagents`, `langchain-mcp-adapters`, `fastmcp`, `agent-client-protocol` | `DeepagentProvider` (LangChain Deep Agents) | +| `freeze` | `pyinstaller` | Standalone executable builds | +| `all` | all of the above | Everything (no `freeze`) | + +Also used at build time: `cryptography` (for token storage in deploy mode), `plotly`, `pandas`. + --- ## Architecture Overview @@ -107,31 +128,39 @@ PyWry automatically selects the appropriate rendering path based on environment: ``` pywry/ -├── __init__.py # Public API exports -├── __main__.py # PyTauri subprocess entry point -├── app.py # Main PyWry class - user entry point +├── __init__.py # Public API exports (see "Core API / Imports") +├── __main__.py # PyTauri subprocess entry point (IPC loop + plugin loader) +├── _freeze.py # PyInstaller-aware freeze support + runtime setup +├── _pyinstaller_hook/ # PyInstaller hook dir (pulled in by `pywry[freeze]`) +├── _vendor/ # Vendored pytauri_wheel bundle +├── app.py # Main PyWry class — user entry point ├── runtime.py # PyTauri subprocess management (stdin/stdout IPC) +├── window_dispatch.py # Thread-safe dispatch into the PyTauri runtime +├── window_proxy.py # WindowProxy wrapping Tauri WebviewWindow API +├── menu_proxy.py # MenuProxy (native window / app menus) +├── tray_proxy.py # TrayProxy (system tray icons) +├── modal.py # Modal toolbar component + helpers ├── inline.py # FastAPI-based inline rendering + InlineWidget class ├── notebook.py # Notebook environment detection (NotebookEnvironment enum) -├── widget.py # anywidget-based widgets (PyWryWidget, PyWryPlotlyWidget, PyWryAgGridWidget) +├── widget.py # anywidget widgets (PyWryWidget, PyWry{Plotly,AgGrid,TVChart}Widget) ├── widget_protocol.py # BaseWidget protocol and NativeWindowHandle class ├── config.py # Layered configuration system (pydantic-settings) -├── models.py # Pydantic models (WindowConfig, HtmlContent, ThemeMode, WindowMode) -├── templates.py # HTML template builder with CSP, themes, scripts, toolbar +├── models.py # Core Pydantic models (WindowConfig, HtmlContent, ThemeMode, WindowMode) +├── types.py # Shared enum / menu / tray / mouse-button TypedDicts & Pydantic models +├── exceptions.py # PyWry exception hierarchy +├── templates.py # HTML template builder (CSP, themes, scripts, toolbar) ├── scripts.py # JavaScript bridge code injected into windows ├── callbacks.py # Event callback registry (singleton) -├── assets.py # Bundled asset loading (Plotly.js, AgGrid, CSS) +├── assets.py # Bundled asset loading (Plotly.js, AgGrid, TradingView CSS/JS) ├── asset_loader.py # CSS/JS file loading with caching ├── grid.py # AgGrid Pydantic models (ColDef, GridOptions, etc.) -├── plotly_config.py # Plotly configuration models (PlotlyConfig, ModeBarButton, etc.) -├── tvchart_config.py # TradingView chart config models (TVChartConfig, SeriesConfig, etc.) -├── tvchart.py # OHLCV data normalization and toolbar factory -├── toolbar.py # Toolbar component models (Button, Select, etc.) -├── state_mixins.py # Widget state management mixins +├── plotly_config.py # Plotly configuration models (PlotlyConfig, ModeBarButton, …) +├── toolbar.py # Toolbar component models (Button, Select, Marquee, …) +├── state_mixins.py # Widget state management mixins (Grid/Plotly/Toolbar/TVChart) ├── hot_reload.py # Hot reload manager ├── watcher.py # File system watcher (watchdog-based) ├── log.py # Logging utilities -├── cli.py # CLI commands (config, init) +├── cli.py # CLI commands (config, init, mcp …) ├── Tauri.toml # Tauri configuration ├── capabilities/ # Tauri capability permissions │ └── default.toml @@ -139,16 +168,64 @@ pywry/ │ └── window_commands.py ├── frontend/ # Frontend HTML and bundled assets │ ├── index.html -│ ├── assets/ # Compressed libraries (plotly, ag-grid, icons) -│ ├── src/ # JavaScript files (main.js, aggrid-defaults.js, plotly-defaults.js) -│ └── style/ # CSS files (pywry.css) +│ ├── assets/ # Compressed libraries (plotly, ag-grid, tvchart, icons, PyWry.png) +│ ├── src/ # JS modules (main.js, aggrid-defaults.js, plotly-defaults.js, tvchart/*.js, chat/*.js) +│ └── style/ # CSS files (pywry.css, chat.css, tvchart.css, …) +├── tvchart/ # TradingView Lightweight Charts integration +│ ├── __init__.py # Public exports (TVChartConfig, DatafeedProvider, UDFAdapter, mixin, …) +│ ├── config.py # TVChartConfig / SeriesConfig / layout / drawings models +│ ├── models.py # TVChartBar, TVChartSymbolInfo, quote / search / mark payloads +│ ├── normalize.py # OHLCV normalization (DataFrame → bars, indicator helpers) +│ ├── datafeed.py # DatafeedProvider ABC + default async dispatcher +│ ├── udf.py # UDFAdapter (HTTP UDF-compatible datafeed) +│ ├── mixin.py # TVChartStateMixin (Python-side chart state surface) +│ └── toolbars.py # build_tvchart_toolbars() factory +├── chat/ # Streaming chat widget +│ ├── __init__.py # Public exports (ChatProvider, artifacts, html builder, get_provider) +│ ├── manager.py # ChatManager, ChatContext, SettingsItem +│ ├── session.py # ACP session lifecycle: capabilities, modes, config options, plans +│ ├── models.py # ChatConfig, ChatMessage, ChatThread, ContentBlock, ACP payloads +│ ├── updates.py # SessionUpdate union (agent / artifact / plan / mode / tool-call / …) +│ ├── artifacts.py # Code / Html / Image / Json / Markdown / Plotly / Table / TradingView +│ ├── permissions.py # Permission request / response plumbing +│ ├── html.py # build_chat_html() — standalone chat UI bootstrap +│ └── providers/ # Pluggable ChatProvider backends +│ ├── __init__.py # ChatProvider ABC + get_provider() factory +│ ├── openai.py # OpenAIProvider (OpenAI SDK) +│ ├── anthropic.py # AnthropicProvider (Anthropic SDK) +│ ├── magentic.py # MagenticProvider (any magentic-supported LLM) +│ ├── callback.py # CallbackProvider (sync/async Python callback) +│ ├── stdio.py # StdioProvider (Agent Client Protocol subprocess) +│ └── deepagent.py # DeepagentProvider (LangChain Deep Agents + MCP adapters + ACP) +├── mcp/ # Model Context Protocol server +│ ├── __init__.py +│ ├── __main__.py # `python -m pywry.mcp` +│ ├── server.py # FastMCP server setup, transport wiring +│ ├── tools.py # Low-level event dispatch + widget/component tools +│ ├── handlers.py # Tool handlers +│ ├── builders.py # HTML/component builders shared across tools +│ ├── resources.py # MCP resources (bundled assets, component reference) +│ ├── prompts.py # MCP prompts +│ ├── agentic.py # Agent orchestration helpers +│ ├── state.py # Per-session state for long-running tools +│ ├── docs.py # Docs skill content +│ ├── install.py # `pywry mcp install` — client config writer +│ └── skills/ # Skills (authentication, chat, chat_agent, component_reference, +│ # css_selectors, data_visualization, deploy, events, +│ # forms_and_inputs, iframe, interactive_buttons, jupyter, +│ # modals, native, styling, tvchart, autonomous_building) ├── state/ # Pluggable state management for deploy mode │ ├── __init__.py # Public exports (stores, factory functions, types) │ ├── _factory.py # Factory functions for store instantiation -│ ├── memory.py # In-memory state backends (default) -│ ├── redis.py # Redis-backed state backends -│ ├── types.py # Type definitions (StateBackend, WidgetData, OAuthTokenSet, etc.) +│ ├── base.py # WidgetStore / EventBus / ConnectionRouter / SessionStore ABCs +│ ├── memory.py # In-memory backends (default) +│ ├── redis.py # Redis-backed backends +│ ├── sqlite.py # SQLite + SQLCipher backend (at-rest encryption) +│ ├── file.py # File-backed backend (dev / single-process) +│ ├── server.py # Deploy-mode FastAPI routes glue +│ ├── callbacks.py # Cross-worker callback dispatch │ ├── auth.py # Authentication and RBAC utilities +│ ├── types.py # Type definitions (StateBackend, WidgetData, OAuthTokenSet, …) │ └── sync_helpers.py # Sync↔async bridging (run_async, wait_for_event) ├── auth/ # OAuth2 authentication system │ ├── __init__.py # Public exports @@ -157,9 +234,10 @@ pywry/ │ ├── token_store.py # TokenStore ABC + Memory, Keyring, Redis backends │ ├── callback_server.py # Ephemeral localhost server for native auth redirects │ ├── deploy_routes.py # FastAPI /auth/* routes for deploy mode +│ ├── login_page.py # Rendered login page shipped with deploy-mode routes │ ├── flow.py # AuthFlowManager orchestrator │ └── session.py # SessionManager with automatic token refresh -├── utils/ # Utility helpers +├── utils/ # Utility helpers (async_helpers, …) └── window_manager/ # Window mode implementations ├── controller.py ├── lifecycle.py @@ -186,14 +264,70 @@ from pywry import HtmlContent, WindowConfig from pywry import ( Toolbar, Button, Select, MultiSelect, TextInput, TextArea, SearchInput, SecretInput, NumberInput, DateInput, SliderInput, RangeInput, Toggle, - Checkbox, RadioGroup, TabGroup, Div, Marquee, TickerItem, Option, ToolbarItem + Checkbox, RadioGroup, TabGroup, Div, Marquee, TickerItem, Option, ToolbarItem, + Modal, ) # Plotly configuration (for customizing modebar, icons, buttons) from pywry import PlotlyConfig, PlotlyIconName, ModeBarButton, ModeBarConfig, SvgIcon, StandardButton # Grid models (for AgGrid customization) -from pywry.grid import ColDef, ColGroupDef, DefaultColDef, RowSelection, GridOptions, GridConfig, GridData, build_grid_config, to_js_grid_config +from pywry import ColDef, ColGroupDef, DefaultColDef, RowSelection, GridOptions, build_grid_config, to_js_grid_config +# Or, with additional helpers: +from pywry.grid import GridConfig, GridData + +# TradingView charts +from pywry import ( + TVChartConfig, TVChartData, TVChartBar, TVChartMark, TVChartTimescaleMark, + TVChartExchange, TVChartSymbolInfo, TVChartSymbolInfoPriceSource, + TVChartLibrarySubsessionInfo, TVChartSearchSymbolResultItem, + TVChartStateMixin, QuoteData, + # Datafeed surface + DatafeedProvider, UDFAdapter, build_tvchart_toolbars, + # Datafeed request/response payloads + TVChartDatafeedConfigRequest, TVChartDatafeedConfigResponse, TVChartDatafeedConfiguration, + TVChartDatafeedHistoryRequest, TVChartDatafeedHistoryResponse, + TVChartDatafeedResolveRequest, TVChartDatafeedResolveResponse, + TVChartDatafeedSearchRequest, TVChartDatafeedSearchResponse, + TVChartDatafeedMarksRequest, TVChartDatafeedMarksResponse, + TVChartDatafeedTimescaleMarksRequest, TVChartDatafeedTimescaleMarksResponse, + TVChartDatafeedServerTimeRequest, TVChartDatafeedServerTimeResponse, + TVChartDatafeedSubscribeRequest, TVChartDatafeedUnsubscribeRequest, + TVChartDatafeedBarUpdate, TVChartDatafeedSymbolType, +) + +# Chat widget (ChatProvider ABC, artifact models, HTML bootstrap, provider factory) +from pywry import ( + ChatProvider, get_provider, build_chat_html, + ChatManager, ChatContext, SettingsItem, + ChatConfig, ChatMessage, ChatThread, ContentBlock, + CodeArtifact, HtmlArtifact, ImageArtifact, JsonArtifact, + MarkdownArtifact, PlotlyArtifact, TableArtifact, + TradingViewArtifact, TradingViewSeries, + # Session / update types + PlanEntry, SessionConfigOption, SessionMode, + AgentMessageUpdate, ArtifactUpdate, CitationUpdate, CommandsUpdate, + ConfigOptionUpdate, ModeUpdate, PlanUpdate, StatusUpdate, + ThinkingUpdate, ToolCallUpdate, + # ACP command payloads + ACPCommand, ACPToolCall, +) +# Concrete providers are imported from their modules: +from pywry.chat.providers.openai import OpenAIProvider # requires [openai] +from pywry.chat.providers.anthropic import AnthropicProvider # requires [anthropic] +from pywry.chat.providers.magentic import MagenticProvider # requires [magentic] +from pywry.chat.providers.callback import CallbackProvider +from pywry.chat.providers.stdio import StdioProvider # requires [acp] +from pywry.chat.providers.deepagent import DeepagentProvider # requires [deepagent] + +# Native / Tauri proxies +from pywry import MenuProxy, TrayProxy +from pywry.window_proxy import WindowProxy +from pywry.types import ( + MenuConfig, MenuItemConfig, CheckMenuItemConfig, IconMenuItemConfig, + PredefinedMenuItemConfig, PredefinedMenuItemKind, SubmenuConfig, + TrayIconConfig, MouseButton, MouseButtonState, +) # State mixins (for extending custom widgets) from pywry import GridStateMixin, PlotlyStateMixin, ToolbarStateMixin @@ -204,8 +338,8 @@ from pywry.inline import show_plotly, show_dataframe, show_tvchart, block, stop_ # Notebook detection from pywry import NotebookEnvironment, detect_notebook_environment, is_anywidget_available, should_use_inline_rendering -# Widget classes (PyWryWidget for notebooks) -from pywry import PyWryWidget, PyWryPlotlyWidget, PyWryAgGridWidget +# Widget classes (anywidget) +from pywry import PyWryWidget, PyWryPlotlyWidget, PyWryAgGridWidget, PyWryTVChartWidget # Widget protocol (for type checking and custom implementations) from pywry.widget_protocol import BaseWidget, NativeWindowHandle, is_base_widget @@ -217,7 +351,7 @@ from pywry import BrowserMode, get_lifecycle from pywry import PyWrySettings, SecuritySettings, WindowSettings, ThemeSettings, HotReloadSettings, TimeoutSettings, AssetSettings, LogSettings # Settings (require full path import) -from pywry.config import ServerSettings, DeploySettings +from pywry.config import ServerSettings, DeploySettings, OAuth2Settings, ChatSettings # Asset loading from pywry import AssetLoader, get_asset_loader @@ -229,7 +363,7 @@ from pywry import CallbackFunc, WidgetType, get_registry # Note: runtime is importable from pywry but not in __all__ from pywry import runtime -# State management (for deploy mode / horizontal scaling) +# State management (for deploy mode / horizontal scaling / at-rest encryption) from pywry.state import ( get_widget_store, get_event_bus, @@ -244,6 +378,12 @@ from pywry.state import ( UserSession, StateBackend, ) + +# OAuth2 authentication (public surface from pywry.auth) +from pywry.auth import ( + OAuthProvider, PKCEChallenge, TokenStore, + AuthFlowManager, SessionManager, OAuthCallbackServer, +) ``` ### PyWry Class @@ -618,11 +758,16 @@ Events follow the format `namespace:event-name`: | Namespace | Purpose | |-----------|---------| -| `pywry:*` | System events (initialization, results) | +| `pywry:*` | System events (initialization, results, theme, downloads, content updates) | | `plotly:*` | Plotly chart events | | `grid:*` | AgGrid table events | - -> **Note:** The `toolbar:` namespace is NOT reserved. Toolbar state response events use `toolbar:state-response` by convention. +| `tvchart:*` | TradingView Lightweight Charts events (datafeed, drawings, layouts, settings) | +| `chat:*` | Chat widget events (streaming updates, plans, permissions, modes, config) | +| `toolbar:*` | Toolbar state (`toolbar:request-state`, `toolbar:set-value`, `toolbar:state-response`, …) | +| `auth:*` | Authentication lifecycle (`auth:login`, `auth:logout`, `auth:state-change`) | +| `tray:*` | System tray icon / menu events | +| `menu:*` | Native window / app menu events | +| `modal:*` | Modal open / close / submit events | ### Pre-Registered Events @@ -684,6 +829,7 @@ Events follow the format `namespace:event-name`: | `pywry:ready` | Window/widget initialized | `{}` | | `pywry:result` | Data via `window.pywry.result()` | `any` | | `pywry:content-request` | Request content (load/reload) | `widget_type`, `window_label`, `reason` | +| `pywry:theme-update` | System theme changed (OS follow mode) | `theme: "light" \| "dark"` | | `pywry:disconnect` | Widget disconnected (inline mode) | `{}` | **System Events (Python → JS):** @@ -702,6 +848,66 @@ Events follow the format `namespace:event-name`: | `pywry:alert` | Show toast notification | `message`, `type?`, `title?`, `duration?` | | `pywry:refresh` | Refresh window content | `{}` | +**TradingView Events (JS → Python):** + +| Event | Trigger | Key Payload Fields | +|-------|---------|-------------------| +| `tvchart:crosshair` | Crosshair moved | `chartId`, `time`, `price`, `seriesId?` | +| `tvchart:click` | Chart clicked | `chartId`, `time`, `price`, `seriesId?` | +| `tvchart:visible-range-change` | User panned / zoomed | `chartId`, `from`, `to` | +| `tvchart:data-settled` | All series rendered (first frame settled) | `chartId`, `widget_type: "tvchart"` | +| `tvchart:datafeed-request` | Drawing-surface / UDF datafeed call | `chartId`, `kind`, `payload` | +| `tvchart:datafeed-subscribe` | Subscribe to bar updates | `chartId`, `symbol`, `resolution`, `listenerGuid` | +| `tvchart:datafeed-unsubscribe` | Unsubscribe from bar updates | `chartId`, `listenerGuid` | +| `tvchart:drawing-change` | User added / edited / removed a drawing | `chartId`, `drawings` | +| `tvchart:layout-save` | Layout saved | `chartId`, `name`, `layout` | +| `tvchart:settings-update` | Settings panel changed | `chartId`, `settings` | + +**TradingView Events (Python → JS):** + +| Event | Description | Key Payload Fields | +|-------|-------------|-------------------| +| `tvchart:update-data` | Replace series data | `data`, `chartId?`, `seriesId?` | +| `tvchart:append-bar` | Append or update the last bar | `bar`, `chartId?`, `seriesId?` | +| `tvchart:datafeed-response` | Answer a datafeed request | `chartId`, `kind`, `payload` | +| `tvchart:datafeed-bar-update` | Push streaming bar to subscribers | `chartId`, `listenerGuid`, `bar` | +| `tvchart:apply-indicator` | Add / update an indicator | `chartId`, `indicator`, `seriesId?` | +| `tvchart:set-visible-range` | Programmatic range change | `chartId`, `from`, `to` | +| `tvchart:load-layout` | Restore a saved layout | `chartId`, `layout` | +| `tvchart:apply-settings` | Apply settings panel state | `chartId`, `settings` | + +**Chat Events (JS → Python):** + +| Event | Trigger | Key Payload Fields | +|-------|---------|-------------------| +| `chat:user-message` | User sent a message | `threadId`, `message`, `content` | +| `chat:cancel` | User cancelled a streaming response | `threadId` | +| `chat:new-thread` | User requested a new thread | `{}` | +| `chat:switch-thread` | User switched threads | `threadId` | +| `chat:permission-response` | User answered a permission prompt | `requestId`, `outcome` | +| `chat:config-set` | User changed a settings item | `optionId`, `value` | +| `chat:mode-set` | User switched agent mode | `modeId` | +| `chat:slash-command` | User ran a slash command | `command`, `args` | +| `chat:context-request` | User opened a context source | `sourceId` | + +**Chat Events (Python → JS):** + +| Event | Description | Key Payload Fields | +|-------|-------------|-------------------| +| `chat:agent-message` | Streaming agent message delta | `threadId`, `delta`, `messageId` | +| `chat:thinking` | Thinking / reasoning chunk | `threadId`, `delta` | +| `chat:tool-call` | Tool call start / update / complete | `threadId`, `toolCallId`, `status`, `input?`, `output?` | +| `chat:artifact` | Attach / update an artifact | `threadId`, `artifact` | +| `chat:status` | Status string update | `threadId`, `status` | +| `chat:plan-update` | Plan / todo list change | `threadId`, `plan` | +| `chat:permission-request` | Prompt the user to approve/deny | `threadId`, `requestId`, `prompt`, `options` | +| `chat:mode-update` | Available modes / active mode | `threadId`, `modes`, `active` | +| `chat:config-update` | Available config options | `threadId`, `options` | +| `chat:commands-update` | Available slash commands | `threadId`, `commands` | +| `chat:citation` | Emit a citation | `threadId`, `citation` | + +> **Note:** Namespace events (`auth:*`, `tray:*`, `menu:*`, `modal:*`) follow the same pattern and are documented under their respective subsystems. + ### Toast Notifications (`pywry:alert`) PyWry provides a unified toast notification system across all rendering paths. @@ -1048,7 +1254,7 @@ app.emit("toolbar:set-values", {"values": {"select-1": "A", "toggle-1": True}}, ### Tauri Plugins -PyWry bundles 19 Tauri plugins via `pytauri_wheel`. By default, only `dialog` and `fs` are enabled. Developers can enable additional plugins through configuration — **no Rust compilation required**. +PyWry bundles the full Tauri plugin set via `pytauri_wheel`. By default, only `dialog` and `fs` are enabled. Developers can enable additional plugins through configuration — **no Rust compilation required**. #### Enabling Plugins @@ -1102,7 +1308,7 @@ export PYWRY_EXTRA_CAPABILITIES="shell:allow-execute" 1. `PyWrySettings.tauri_plugins` holds the list of plugin names to activate 2. The parent process passes this list to the subprocess via `PYWRY_TAURI_PLUGINS` env var 3. In `__main__.py`, `_load_plugins()` dynamically imports each `pytauri_plugins.` module and calls `.init()` -4. The `capabilities/default.toml` pre-grants `:default` permissions for all 19 plugins (unused permissions are harmless) +4. The `capabilities/default.toml` pre-grants `:default` permissions for every bundled plugin (unused permissions are harmless) 5. For fine-grained permission control, use `extra_capabilities` to add specific permission strings (e.g., `shell:allow-execute`) Each plugin has a `PLUGIN_*` compile-time feature flag in `pytauri_plugins` that is checked before initialization. If a plugin is not compiled into the bundled `pytauri_wheel`, a clear `RuntimeError` is raised. @@ -1290,6 +1496,175 @@ When authenticated, `window.__PYWRY_AUTH__` contains `{ user_id, roles, token_ty --- +## Chat Widget + +PyWry ships a streaming chat widget with a pluggable provider interface modelled on the Agent Client Protocol (ACP) session lifecycle: `initialize` → `new_session` → `prompt` loop → `cancel`. + +### Providers + +| Provider | Extra | Description | +|----------|-------|-------------| +| `OpenAIProvider` | `pywry[openai]` | OpenAI Responses / Chat Completions SDK | +| `AnthropicProvider` | `pywry[anthropic]` | Anthropic Messages SDK (streaming) | +| `MagenticProvider` | `pywry[magentic]` | magentic — any magentic-supported LLM | +| `CallbackProvider` | *(base)* | Wraps a sync / async Python callback | +| `StdioProvider` | `pywry[acp]` | Runs any ACP agent as a subprocess | +| `DeepagentProvider` | `pywry[deepagent]` | LangChain Deep Agents with built-in MCP adapters and ACP bridging | + +Select a provider by name with the factory: + +```python +from pywry.chat import get_provider + +provider = get_provider("anthropic", model="claude-opus-4-7", api_key="...") +``` + +### ChatManager + +```python +from pywry import PyWry, ChatManager, build_chat_html + +app = PyWry() +chat = ChatManager(provider=provider, app=app) +html = build_chat_html() # chat UI bootstrap +handle = app.show(html, callbacks=chat.callbacks()) +app.block() +``` + +`ChatManager` owns: + +- **Threads** — persisted via the configured state backend; switched with `chat:switch-thread`. +- **Artifacts** — `CodeArtifact`, `HtmlArtifact`, `ImageArtifact`, `JsonArtifact`, `MarkdownArtifact`, `PlotlyArtifact`, `TableArtifact`, `TradingViewArtifact`. Emitted via `chat:artifact`. +- **Plan / todo updates** — `PlanEntry` list streamed via `chat:plan-update`. +- **Permissions** — `chat:permission-request` prompts the UI; the user answer comes back on `chat:permission-response`. +- **Modes / config / commands** — `chat:mode-update`, `chat:config-update`, `chat:commands-update` surface whatever the underlying provider advertises. +- **Context sources** — register file / URL / custom sources that the user can attach to a prompt. + +### SettingsItem + +Settings appear in the chat settings panel and are round-tripped via `chat:config-update` / `chat:config-set`. They support text / select / toggle / secret inputs, validation, and per-option `help`. + +--- + +## TradingView Charts + +`pywry.tvchart` wraps TradingView Lightweight Charts with a full drawing surface, pluggable datafeed API, UDF adapter, streaming bar updates, compare overlays, compare-derivative indicators, savable layouts, and a themeable settings panel. + +### Quick Start + +```python +import pandas as pd +from pywry import PyWry, TVChartConfig + +app = PyWry() +df = pd.DataFrame(...) # columns: time / open / high / low / close / volume +app.show_tvchart(df, title="AAPL — Daily") +app.block() +``` + +### Datafeed API + +Implement `DatafeedProvider` to drive the chart from a quote server or any async source: + +```python +from pywry.tvchart import ( + DatafeedProvider, + TVChartDatafeedHistoryRequest, + TVChartDatafeedHistoryResponse, + TVChartDatafeedResolveRequest, + TVChartDatafeedResolveResponse, +) + +class MyDatafeed(DatafeedProvider): + async def resolve_symbol(self, req: TVChartDatafeedResolveRequest) -> TVChartDatafeedResolveResponse: + ... + async def get_history(self, req: TVChartDatafeedHistoryRequest) -> TVChartDatafeedHistoryResponse: + ... + # search_symbols, get_marks, get_timescale_marks, get_server_time, subscribe_bars, unsubscribe_bars + +app.show_tvchart(datafeed=MyDatafeed(), symbol="AAPL", resolution="1D") +``` + +### UDFAdapter + +Point the chart at any TradingView UDF-compatible HTTP endpoint: + +```python +from pywry.tvchart import UDFAdapter + +adapter = UDFAdapter(base_url="https://demo_feed.tradingview.com") +app.show_tvchart(datafeed=adapter, symbol="AAPL", resolution="1D") +``` + +### Indicators, Compare, Drawings + +- **Indicators** — overlay any Lightweight Charts indicator; compare-derivative indicators (`Spread`, `Ratio`, `Sum`, `Product`, `Correlation`) are computed across overlays. +- **Drawings** — trendlines, fib tools, text annotations, price notes, and brushes. All round-trip through `tvchart:drawing-change` and are persisted with layouts. +- **Layouts** — save the current chart (series, overlays, indicators, drawings, settings) with `tvchart:layout-save`; restore with `tvchart:load-layout`. + +### TVChartStateMixin + +The Python-side chart state surface is exposed via `TVChartStateMixin`, which is mixed into `PyWry`, `PyWryTVChartWidget`, and any user-defined widget that wants chart control. + +--- + +## MCP Server + +PyWry ships an MCP server that exposes widget management, chart / grid / tvchart control, events, chat driving, auth, and skills to any MCP client (Claude Desktop, Claude Code, Cursor, …). + +### Launching + +```bash +pip install 'pywry[mcp]' + +pywry mcp --transport stdio # default, for Claude Desktop / Claude Code +pywry mcp --transport http --host 0.0.0.0 # HTTP transport +pywry mcp install # write client config (interactive) +``` + +### Skills + +Each skill bundles tools + prompts + reference docs for a coherent area. Current skills: + +- `authentication` — OAuth2 flows and token management +- `autonomous_building` — long-running "build this dashboard" loops +- `chat` — low-level chat widget control +- `chat_agent` — drive a running chat session (select mode, send a prompt, observe) +- `component_reference` — Pydantic toolbar components with live previews +- `css_selectors` — `--pywry-*` variables and selector crib sheet +- `data_visualization` — Plotly / AgGrid / TradingView recipes +- `deploy` — deploy-mode scaling and state backend choices +- `events` — Python ↔ JS event catalogue +- `forms_and_inputs` — toolbar-driven form recipes +- `iframe` — notebook / browser / inline quirks +- `interactive_buttons` — button-centric patterns +- `jupyter` — anywidget + iframe behaviour in notebooks +- `modals` — `Modal` toolbar component recipes +- `native` — native-only features (menus, tray, dialogs, `WindowProxy`) +- `styling` — CSS variables, theming, hot reload +- `tvchart` — TradingView datafeed, UDF, drawings, indicators, layouts + +### Tools + +Tools are grouped under `widget_*`, `component_*`, `chart_*`, `grid_*`, `tvchart_*`, `chat_*`, `auth_*`, `events_*`, and `docs_*`. The low-level `send_event` tool dispatches any namespaced event directly. + +--- + +## State Backends + +PyWry's state layer powers deploy mode, notebook / browser mode, and any multi-window / multi-worker setup. The same `WidgetStore` / `EventBus` / `ConnectionRouter` / `SessionStore` ABCs are implemented by every backend. + +| Backend | Use case | Notes | +|---------|----------|-------| +| `memory` (default) | Single-process, development, notebooks | No external deps | +| `file` | Single-node persistence without a DB | JSON on disk | +| `sqlite` | Single-node with at-rest encryption | `pywry[sqlite]` (SQLCipher); keyed by `PYWRY_DEPLOY__SQLITE_KEY` | +| `redis` | Multi-worker / horizontally scaled | `redis >= 7.1.0` (client ships in base install) | + +Select a backend via `PYWRY_DEPLOY__STATE_BACKEND`, `pywry.toml` `[deploy]`, or `DeploySettings(state_backend=...)`. + +--- + ## Key Classes Reference ### Core Classes @@ -1513,7 +1888,7 @@ Events include `widget_type` for identification: ## CSS Theming -PyWry provides 60+ CSS variables for comprehensive customization, plus component ID targeting for precise styling. +PyWry is themed through `--pywry-*` CSS variables, with component-ID targeting for precise styling. The full variable reference lives in the [CSS docs](https://deeleeramone.github.io/PyWry/reference/css/). ### Theme Classes @@ -1606,8 +1981,8 @@ Target in CSS: `#save-btn { background: green; }` or `[data-event="app:save"] { ### Setup ```bash -git clone https://github.com/OpenBB-finance/OpenBB.git -cd pywry +git clone https://github.com/deeleeramone/PyWry.git +cd PyWry/pywry python -m venv venv source venv/bin/activate # or venv\Scripts\activate on Windows uv sync --all-extras --group dev diff --git a/pywry/README.md b/pywry/README.md index ea75ff3..8cce3db 100644 --- a/pywry/README.md +++ b/pywry/README.md @@ -114,7 +114,7 @@ app.block() - **Toolbar components** — `Button`, `Select`, `MultiSelect`, `TextInput`, `SecretInput`, `SliderInput`, `RangeInput`, `Toggle`, `Checkbox`, `RadioGroup`, `TabGroup`, `Marquee`, `Modal`, and more. All Pydantic models; position them around the content edges or inside the chart area. - **Two-way events** — `app.emit()` and `app.on()` bridge Python and JavaScript in both directions. Pre-wired Plotly and AgGrid events included. - **Chat** — streaming chat widget with threads, slash commands, artifacts, and pluggable providers: `OpenAIProvider`, `AnthropicProvider`, `MagenticProvider`, `CallbackProvider`, `StdioProvider` (ACP subprocess), and `DeepagentProvider` (LangChain Deep Agents). -- **TradingView charts** — Lightweight Charts integration with a yFinance-compatible datafeed, drawings, compare overlays, compare-derivative indicators (Spread / Ratio / Sum / Product / Correlation), and savable layouts. +- **TradingView charts** — extended Lightweight Charts integration with a full drawing surface (trendlines, fib tools, text annotations, price notes, brushes), pluggable datafeed API, UDF adapter for external quote servers, streaming bar updates, compare overlays, compare-derivative indicators (Spread / Ratio / Sum / Product / Correlation), savable layouts, and a themeable settings panel. - **Theming** — light / dark / system modes, themeable via `--pywry-*` CSS variables, hot reload during development. - **Security** — token auth, CSP headers, `SecuritySettings.strict()` / `.permissive()` / `.localhost()` presets. `SecretInput` stores values server-side, never in HTML. - **State backends** — in-memory (default), Redis (multi-worker), or SQLite with SQLCipher encryption at rest. From 3c70847a1d8359480accd284812b01a59c2ef8c4 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 15:38:23 -0700 Subject: [PATCH 38/68] Address remaining Copilot PR review items + fix menu_tray race MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit stdio.py: - Drain stderr with a background task so the subprocess can't deadlock when the agent writes a lot to stderr (PIPE was never consumed). - Replace asyncio.get_event_loop() with asyncio.get_running_loop() — the old helper is deprecated and emits a warning when no loop is bound to the current thread. - Cancel the new stderr task in close(). state/_factory.py: - Centralise SQLite path resolution in _resolve_sqlite_path() and expand ~ up-front via pathlib.Path.expanduser(). SQLite / SQLCipher don't expand the tilde themselves; the stores already expand in their own __init__ but doing it at the factory level is cheaper belt-and-suspenders for any future caller that bypasses the store. frontend/src/system-events.js + theme-manager.js: - Install minimal on() / off() / _trigger() shims when the module loads before bridge.js — bridge.js fills the real implementations in place, preserving _handlers. Previously theme-manager.js would throw at the first on() call if load order was wrong, and system-events.js only installed _handlers without the three methods it immediately calls. docs/reference/events/chat.md: - chat:input-response is the reply to chat:input-required, not PermissionRequestUpdate. Permissions use chat:permission-response. - Strip non-existent fields (prompt / placeholder / description) from the chat:permission-request payload row so it matches the ACP PermissionRequestUpdate model (toolCallId, title, options, requestId, threadId). tests/test_menu_tray.py: - registry.dispatch() submits sync handlers to a thread pool so they run asynchronously. test_register_handlers_dispatches and test_register_handlers_idempotent called h.assert_called_once() / h.call_count == 1 before the worker thread could run, which flaked on slow / ARM64 CI. Drain pending futures via registry._drain() between dispatch and assert. Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/docs/docs/reference/events/chat.md | 6 ++-- pywry/pywry/chat/providers/stdio.py | 17 ++++++++++- pywry/pywry/frontend/src/system-events.js | 34 ++++++++++++++++++++- pywry/pywry/frontend/src/theme-manager.js | 37 +++++++++++++++++++++++ pywry/pywry/state/_factory.py | 26 +++++++++++----- pywry/tests/test_menu_tray.py | 8 ++++- 6 files changed, 115 insertions(+), 13 deletions(-) diff --git a/pywry/docs/docs/reference/events/chat.md b/pywry/docs/docs/reference/events/chat.md index aa7b8c5..cf023ec 100644 --- a/pywry/docs/docs/reference/events/chat.md +++ b/pywry/docs/docs/reference/events/chat.md @@ -14,7 +14,7 @@ The `chat:*` namespace handles all communication between the Python `ChatManager | `chat:edit-message` | `{messageId, threadId, text}` | User submits edited text for a prior user message. Backend replaces the message, drops everything after it, asks the provider to forget its own state for that thread, and re-runs generation under the same `messageId`. | | `chat:resend-from` | `{messageId, threadId}` | User re-runs generation starting at a specific user message. The target user message and everything after it are dropped, then regeneration runs. | | `chat:slash-command` | `{command, args, threadId}` | User submits a `/command` from the input bar (e.g., `/clear`, `/export`). | -| `chat:input-response` | `{text, requestId, threadId}` | User responds to an `PermissionRequestUpdate` prompt mid-stream. | +| `chat:input-response` | `{text, requestId, threadId}` | User responds to a free-form `chat:input-required` prompt mid-stream (text / buttons / radio). Permission decisions use `chat:permission-response` instead. | | `chat:request-state` | `{}` | Frontend requests full state snapshot on initialization. | | `chat:request-history` | `{threadId, limit}` | Frontend requests message history for a thread. | @@ -98,8 +98,8 @@ attribute also gets populated. | Event | Payload | Description | |-------|---------|-------------| -| `chat:input-required` | `{messageId, threadId, requestId, prompt, placeholder, inputType, options?}` | Pause streaming to request user input mid-conversation. | -| `chat:permission-request` | `{messageId, threadId, toolCallId, title, description?, options: [{id, label, description?}]}` | Pause streaming to ask the user to approve / deny a tool invocation. Response arrives on `chat:permission-response`. | +| `chat:input-required` | `{messageId, threadId, requestId, prompt, placeholder?, inputType?, options?}` | Pause streaming to request free-form user input (`inputType`: `"text"` / `"buttons"` / `"radio"`). Typically emitted by callback / custom providers. Response arrives on `chat:input-response`. | +| `chat:permission-request` | `{toolCallId, title, options: [{id, label, kind?}], requestId, threadId}` | Pause streaming to ask the user to approve / deny a tool invocation. Payload mirrors the ACP `PermissionRequestUpdate` fields (no `prompt` / `placeholder` / `description`). Response arrives on `chat:permission-response`. | Handler pattern for permission requests: diff --git a/pywry/pywry/chat/providers/stdio.py b/pywry/pywry/chat/providers/stdio.py index e80ef3a..b9d40a3 100644 --- a/pywry/pywry/chat/providers/stdio.py +++ b/pywry/pywry/chat/providers/stdio.py @@ -54,6 +54,7 @@ def __init__( self._process: asyncio.subprocess.Process | None = None self._pending: dict[str | int, asyncio.Future[Any]] = {} self._reader_task: asyncio.Task[None] | None = None + self._stderr_task: asyncio.Task[None] | None = None self._update_queues: dict[str, asyncio.Queue[Any]] = {} async def _ensure_started(self) -> asyncio.subprocess.Process: @@ -76,8 +77,20 @@ async def _ensure_started(self) -> asyncio.subprocess.Process: env=self._env, ) self._reader_task = asyncio.create_task(self._read_loop()) + # Drain stderr continuously — if the pipe fills up the subprocess + # blocks on write, which would deadlock the whole read loop. + self._stderr_task = asyncio.create_task(self._drain_stderr()) return self._process + async def _drain_stderr(self) -> None: + """Continuously consume stderr so the subprocess can't block.""" + if self._process is None or self._process.stderr is None: + return + async for raw_line in self._process.stderr: + stripped = raw_line.strip() + if stripped: + log.debug("agent stderr: %s", stripped.decode(errors="replace")[:500]) + async def _read_loop(self) -> None: """Read JSON-RPC messages from stdout line-by-line.""" assert self._process is not None @@ -135,7 +148,7 @@ async def _send_request(self, method: str, params: dict[str, Any] | None = None) "params": params or {}, } - future: asyncio.Future[Any] = asyncio.get_event_loop().create_future() + future: asyncio.Future[Any] = asyncio.get_running_loop().create_future() self._pending[req_id] = future proc.stdin.write((json.dumps(msg) + "\n").encode()) @@ -412,6 +425,8 @@ async def close(self) -> None: """ if self._reader_task: self._reader_task.cancel() + if self._stderr_task: + self._stderr_task.cancel() if self._process and self._process.returncode is None: self._process.terminate() await self._process.wait() diff --git a/pywry/pywry/frontend/src/system-events.js b/pywry/pywry/frontend/src/system-events.js index c1a070c..88a1a84 100644 --- a/pywry/pywry/frontend/src/system-events.js +++ b/pywry/pywry/frontend/src/system-events.js @@ -1,10 +1,42 @@ (function() { 'use strict'; - // Guard against re-registration of system event handlers + // Guard against load-order surprises: if this file runs before + // bridge.js, install a minimal shim so on()/off()/_trigger() calls + // below don't throw. bridge.js later replaces the methods in place + // while preserving _handlers, so registered callbacks survive. if (!window.pywry) { window.pywry = { _handlers: {} }; } + if (!window.pywry._handlers) { + window.pywry._handlers = {}; + } + if (typeof window.pywry.on !== 'function') { + window.pywry.on = function(eventType, callback) { + if (!this._handlers[eventType]) this._handlers[eventType] = []; + this._handlers[eventType].push(callback); + }; + } + if (typeof window.pywry.off !== 'function') { + window.pywry.off = function(eventType, callback) { + if (!this._handlers[eventType]) return; + if (!callback) { + delete this._handlers[eventType]; + } else { + this._handlers[eventType] = this._handlers[eventType].filter( + function(h) { return h !== callback; } + ); + } + }; + } + if (typeof window.pywry._trigger !== 'function') { + window.pywry._trigger = function(eventType, data) { + var handlers = (this._handlers[eventType] || []).concat(this._handlers['*'] || []); + handlers.forEach(function(handler) { + try { handler(data, eventType); } catch (err) { console.error(err); } + }); + }; + } if (window.pywry._systemEventsRegistered) { return; diff --git a/pywry/pywry/frontend/src/theme-manager.js b/pywry/pywry/frontend/src/theme-manager.js index 478da15..d87d1cb 100644 --- a/pywry/pywry/frontend/src/theme-manager.js +++ b/pywry/pywry/frontend/src/theme-manager.js @@ -1,6 +1,43 @@ (function() { 'use strict'; + // Guard against load-order surprises: if this file runs before + // bridge.js, install a minimal shim so on()/_trigger() calls below + // don't throw. bridge.js later replaces the methods in place while + // preserving _handlers, so registered callbacks survive. + if (!window.pywry) { + window.pywry = { _handlers: {} }; + } + if (!window.pywry._handlers) { + window.pywry._handlers = {}; + } + if (typeof window.pywry.on !== 'function') { + window.pywry.on = function(eventType, callback) { + if (!this._handlers[eventType]) this._handlers[eventType] = []; + this._handlers[eventType].push(callback); + }; + } + if (typeof window.pywry.off !== 'function') { + window.pywry.off = function(eventType, callback) { + if (!this._handlers[eventType]) return; + if (!callback) { + delete this._handlers[eventType]; + } else { + this._handlers[eventType] = this._handlers[eventType].filter( + function(h) { return h !== callback; } + ); + } + }; + } + if (typeof window.pywry._trigger !== 'function') { + window.pywry._trigger = function(eventType, data) { + var handlers = (this._handlers[eventType] || []).concat(this._handlers['*'] || []); + handlers.forEach(function(handler) { + try { handler(data, eventType); } catch (err) { console.error(err); } + }); + }; + } + if (window.__TAURI__ && window.__TAURI__.event) { window.__TAURI__.event.listen('pywry:theme-update', function(event) { var mode = event.payload.mode; diff --git a/pywry/pywry/state/_factory.py b/pywry/pywry/state/_factory.py index 9237010..98c988f 100644 --- a/pywry/pywry/state/_factory.py +++ b/pywry/pywry/state/_factory.py @@ -10,6 +10,7 @@ import uuid from functools import lru_cache +from pathlib import Path from typing import TYPE_CHECKING @@ -137,6 +138,21 @@ def _get_deploy_settings() -> DeploySettings: return DeploySettings() +_DEFAULT_SQLITE_PATH = "~/.config/pywry/pywry.db" + + +def _resolve_sqlite_path(settings: DeploySettings) -> str: + """Return the configured SQLite path with ``~`` expanded. + + ``sqlite3`` / SQLCipher do not expand ``~`` themselves, so we normalise + here even though every bundled ``SqliteStateBackend`` subclass also + expands in its own ``__init__`` — cheaper than hunting down a future + caller that forgets. + """ + raw = getattr(settings, "sqlite_path", None) or _DEFAULT_SQLITE_PATH + return str(Path(raw).expanduser()) + + if TYPE_CHECKING: from pywry.config import DeploySettings @@ -174,9 +190,7 @@ def get_widget_store() -> WidgetStore: from .sqlite import SqliteWidgetStore settings = _get_deploy_settings() - return SqliteWidgetStore( - db_path=getattr(settings, "sqlite_path", "~/.config/pywry/pywry.db") - ) + return SqliteWidgetStore(db_path=_resolve_sqlite_path(settings)) return MemoryWidgetStore() @@ -282,9 +296,7 @@ def get_session_store() -> SessionStore: from .sqlite import SqliteSessionStore settings = _get_deploy_settings() - return SqliteSessionStore( - db_path=getattr(settings, "sqlite_path", "~/.config/pywry/pywry.db") - ) + return SqliteSessionStore(db_path=_resolve_sqlite_path(settings)) return MemorySessionStore() @@ -322,7 +334,7 @@ def get_chat_store() -> ChatStore: from .sqlite import SqliteChatStore settings = _get_deploy_settings() - return SqliteChatStore(db_path=getattr(settings, "sqlite_path", "~/.config/pywry/pywry.db")) + return SqliteChatStore(db_path=_resolve_sqlite_path(settings)) return MemoryChatStore() diff --git a/pywry/tests/test_menu_tray.py b/pywry/tests/test_menu_tray.py index 63ce1f4..23f1f8e 100644 --- a/pywry/tests/test_menu_tray.py +++ b/pywry/tests/test_menu_tray.py @@ -693,6 +693,9 @@ def test_register_handlers_dispatches(self, mock_runtime: MagicMock) -> None: registry = get_registry() dispatched = registry.dispatch("win-1", "menu:click", {"item_id": "save", "source": "app"}) assert dispatched + # Sync handlers are executed on a thread pool, so wait for the + # invocation to finish before asserting (avoids flakes on slow CI). + registry._drain(timeout=5.0) h.assert_called_once() @patch("pywry.menu_proxy.runtime") @@ -714,7 +717,10 @@ def test_register_handlers_idempotent(self, mock_runtime: MagicMock) -> None: from pywry.callbacks import get_registry - get_registry().dispatch("win-1", "menu:click", {"item_id": "a", "source": "app"}) + registry = get_registry() + registry.dispatch("win-1", "menu:click", {"item_id": "a", "source": "app"}) + # Sync handlers run on a thread pool — wait before asserting. + registry._drain(timeout=5.0) # Handler should only be called once — one registration assert h.call_count == 1 From a22c4a754f0b5e39fdc942571af3fc046b1e15ca Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 15:48:34 -0700 Subject: [PATCH 39/68] Drop `assert` from production code; keep S101 a test-only ignore Asserts are stripped under `python -O`, so any runtime invariant that was "enforced" with `assert` would silently evaporate in an optimised install. This commit takes the invariants seriously: - ruff.toml: remove S101 from the global ignore list so asserts in non-test code fail lint. S101 stays per-file-ignored under tests/ (with a leading block comment + an inline reason on every rule explaining why the check doesn't apply under tests/), and the remaining global ignores now carry short inline comments so future readers can evaluate whether each one still pays rent. - pywry/chat/providers/stdio.py: the four `assert proc.stdin is not None` / `assert self._process{,.stdout} is not None` spots now raise RuntimeError with a specific message. Creating the subprocess with PIPE means these are practically unreachable, but when they DO trip we want a diagnostic exception, not a bare AssertionError or (worse) a silent skip under -O. - pywry/mcp/handlers.py: every `assert widget is not None` after `_get_widget_or_error()` is replaced with an explicit `if error is not None or widget is None: return error or {...}` guard. This matches the existing pattern in `_get_widget_or_error` itself and makes the invariant visible at the call site. ruff check pywry/ tests/ is clean and all touched unit tests still pass. Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/pywry/chat/providers/stdio.py | 17 ++++-- pywry/pywry/mcp/handlers.py | 85 ++++++++++++----------------- pywry/ruff.toml | 56 ++++++++++--------- 3 files changed, 75 insertions(+), 83 deletions(-) diff --git a/pywry/pywry/chat/providers/stdio.py b/pywry/pywry/chat/providers/stdio.py index b9d40a3..fafbd34 100644 --- a/pywry/pywry/chat/providers/stdio.py +++ b/pywry/pywry/chat/providers/stdio.py @@ -93,8 +93,9 @@ async def _drain_stderr(self) -> None: async def _read_loop(self) -> None: """Read JSON-RPC messages from stdout line-by-line.""" - assert self._process is not None - assert self._process.stdout is not None + if self._process is None or self._process.stdout is None: + msg = "stdio read loop started before subprocess was spawned" + raise RuntimeError(msg) async for raw_line in self._process.stdout: stripped = raw_line.strip() @@ -138,7 +139,9 @@ async def _send_request(self, method: str, params: dict[str, Any] | None = None) The result from the response. """ proc = await self._ensure_started() - assert proc.stdin is not None + if proc.stdin is None: + err = "agent subprocess has no stdin" + raise RuntimeError(err) req_id = str(uuid.uuid4().hex[:8]) msg = { @@ -167,7 +170,9 @@ async def _send_notification(self, method: str, params: dict[str, Any] | None = Method parameters. """ proc = await self._ensure_started() - assert proc.stdin is not None + if proc.stdin is None: + err = "agent subprocess has no stdin" + raise RuntimeError(err) msg = { "jsonrpc": "2.0", @@ -207,7 +212,9 @@ async def _handle_agent_request(self, msg: dict[str, Any]) -> None: req_id = msg.get("id") params = msg.get("params", {}) proc = await self._ensure_started() - assert proc.stdin is not None + if proc.stdin is None: + err = "agent subprocess has no stdin" + raise RuntimeError(err) if method == "session/request_permission": # Route to session update queue as a permission request diff --git a/pywry/pywry/mcp/handlers.py b/pywry/pywry/mcp/handlers.py index 91168cd..4109198 100644 --- a/pywry/pywry/mcp/handlers.py +++ b/pywry/pywry/mcp/handlers.py @@ -766,9 +766,8 @@ def _handle_tvchart_remove_indicator(ctx: HandlerContext) -> HandlerResult: def _handle_tvchart_list_indicators(ctx: HandlerContext) -> HandlerResult: widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) - if error: - return error - assert widget is not None + if error is not None or widget is None: + return error or {"error": "widget_id could not be resolved."} payload: dict[str, Any] = {} chart_id = ctx.args.get("chart_id") if chart_id is not None: @@ -1188,9 +1187,8 @@ def _handle_tvchart_open_layout(ctx: HandlerContext) -> HandlerResult: def _handle_tvchart_save_state(ctx: HandlerContext) -> HandlerResult: widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) - if error: - return error - assert widget is not None + if error is not None or widget is None: + return error or {"error": "widget_id could not be resolved."} widget.emit("tvchart:save-state", {}) return {"widget_id": widget_id, "event_sent": True, "event_type": "tvchart:save-state"} @@ -1198,9 +1196,8 @@ def _handle_tvchart_save_state(ctx: HandlerContext) -> HandlerResult: def _handle_tvchart_request_state(ctx: HandlerContext) -> HandlerResult: widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) - if error: - return error - assert widget is not None + if error is not None or widget is None: + return error or {"error": "widget_id could not be resolved."} payload: dict[str, Any] = {} chart_id = ctx.args.get("chart_id") if chart_id is not None: @@ -1222,9 +1219,8 @@ def _handle_tvchart_request_state(ctx: HandlerContext) -> HandlerResult: def _handle_set_content(ctx: HandlerContext) -> HandlerResult: widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) - if error: - return error - assert widget is not None # Type guard + if error is not None or widget is None: + return error or {"error": "widget_id could not be resolved."} data = {"id": ctx.args["component_id"]} if "html" in ctx.args: @@ -1239,9 +1235,8 @@ def _handle_set_content(ctx: HandlerContext) -> HandlerResult: def _handle_set_style(ctx: HandlerContext) -> HandlerResult: widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) - if error: - return error - assert widget is not None + if error is not None or widget is None: + return error or {"error": "widget_id could not be resolved."} widget.emit( "pywry:set-style", @@ -1253,9 +1248,8 @@ def _handle_set_style(ctx: HandlerContext) -> HandlerResult: def _handle_show_toast(ctx: HandlerContext) -> HandlerResult: widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) - if error: - return error - assert widget is not None + if error is not None or widget is None: + return error or {"error": "widget_id could not be resolved."} widget.emit( "pywry:alert", @@ -1271,9 +1265,8 @@ def _handle_show_toast(ctx: HandlerContext) -> HandlerResult: def _handle_update_theme(ctx: HandlerContext) -> HandlerResult: widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) - if error: - return error - assert widget is not None + if error is not None or widget is None: + return error or {"error": "widget_id could not be resolved."} widget.emit("pywry:update-theme", {"theme": ctx.args["theme"]}) return {"widget_id": widget_id, "theme": ctx.args["theme"]} @@ -1282,9 +1275,8 @@ def _handle_update_theme(ctx: HandlerContext) -> HandlerResult: def _handle_inject_css(ctx: HandlerContext) -> HandlerResult: widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) - if error: - return error - assert widget is not None + if error is not None or widget is None: + return error or {"error": "widget_id could not be resolved."} widget.emit( "pywry:inject-css", @@ -1299,9 +1291,8 @@ def _handle_inject_css(ctx: HandlerContext) -> HandlerResult: def _handle_remove_css(ctx: HandlerContext) -> HandlerResult: widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) - if error: - return error - assert widget is not None + if error is not None or widget is None: + return error or {"error": "widget_id could not be resolved."} widget.emit("pywry:remove-css", {"id": ctx.args["style_id"]}) return {"widget_id": widget_id, "css_removed": True} @@ -1310,9 +1301,8 @@ def _handle_remove_css(ctx: HandlerContext) -> HandlerResult: def _handle_navigate(ctx: HandlerContext) -> HandlerResult: widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) - if error: - return error - assert widget is not None + if error is not None or widget is None: + return error or {"error": "widget_id could not be resolved."} widget.emit("pywry:navigate", {"url": ctx.args["url"]}) return {"widget_id": widget_id, "navigating_to": ctx.args["url"]} @@ -1321,9 +1311,8 @@ def _handle_navigate(ctx: HandlerContext) -> HandlerResult: def _handle_download(ctx: HandlerContext) -> HandlerResult: widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) - if error: - return error - assert widget is not None + if error is not None or widget is None: + return error or {"error": "widget_id could not be resolved."} widget.emit( "pywry:download", @@ -1339,9 +1328,8 @@ def _handle_download(ctx: HandlerContext) -> HandlerResult: def _handle_update_plotly(ctx: HandlerContext) -> HandlerResult: widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) - if error: - return error - assert widget is not None + if error is not None or widget is None: + return error or {"error": "widget_id could not be resolved."} fig_dict = json.loads(ctx.args["figure_json"]) @@ -1361,9 +1349,8 @@ def _handle_update_plotly(ctx: HandlerContext) -> HandlerResult: def _handle_update_marquee(ctx: HandlerContext) -> HandlerResult: widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) - if error: - return error - assert widget is not None + if error is not None or widget is None: + return error or {"error": "widget_id could not be resolved."} ticker_update = ctx.args.get("ticker_update") if ticker_update: @@ -1387,9 +1374,8 @@ def _handle_update_ticker_item(ctx: HandlerContext) -> HandlerResult: widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) - if error: - return error - assert widget is not None + if error is not None or widget is None: + return error or {"error": "widget_id could not be resolved."} ticker_item = TickerItem(ticker=ctx.args["ticker"]) event_type, payload = ticker_item.update_payload( @@ -1840,9 +1826,8 @@ def _handle_chat_register_command(ctx: HandlerContext) -> HandlerResult: description = ctx.args.get("description", "") widget, error = _get_widget_or_error(widget_id) - if error: - return error - assert widget is not None + if error is not None or widget is None: + return error or {"error": "widget_id could not be resolved."} if not name.startswith("/"): name = "/" + name @@ -1894,9 +1879,8 @@ def _handle_chat_get_history(ctx: HandlerContext) -> HandlerResult: def _handle_chat_update_settings(ctx: HandlerContext) -> HandlerResult: widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) - if error: - return error - assert widget is not None + if error is not None or widget is None: + return error or {"error": "widget_id could not be resolved."} settings: dict[str, Any] = {} for key in ("model", "temperature", "max_tokens", "system_prompt", "streaming"): @@ -1912,9 +1896,8 @@ def _handle_chat_update_settings(ctx: HandlerContext) -> HandlerResult: def _handle_chat_set_typing(ctx: HandlerContext) -> HandlerResult: widget_id = ctx.args.get("widget_id") widget, error = _get_widget_or_error(widget_id) - if error: - return error - assert widget is not None + if error is not None or widget is None: + return error or {"error": "widget_id could not be resolved."} typing = ctx.args.get("typing", True) thread_id = ctx.args.get("thread_id") diff --git a/pywry/ruff.toml b/pywry/ruff.toml index fb26e4e..b72a58e 100644 --- a/pywry/ruff.toml +++ b/pywry/ruff.toml @@ -45,22 +45,21 @@ select = [ ] ignore = [ - "E501", - "D100", - "D104", - "D105", - "D107", - "D203", - "D213", - "S101", - "TRY003", - "PLR0913", - "PLR2004", - "D401", - "B008", - "N818", - "PERF203", - "PLC0415", + "E501", # line-length — handled by `line-length = 100` + "D100", # missing docstring in public module + "D104", # missing docstring in public package + "D105", # missing docstring in magic method + "D107", # missing docstring in __init__ + "D203", # 1 blank line before class docstring (conflicts with D211) + "D213", # multi-line summary should start at the second line (conflicts with D212) + "TRY003", # long messages outside exception class + "PLR0913", # too many arguments — relaxed for Pydantic constructors + "PLR2004", # magic value used in comparison + "D401", # first-line imperative mood + "B008", # function call in argument defaults — Pydantic Field() + "N818", # exception name must end with Error (we follow stdlib naming) + "PERF203", # try/except in a loop is intentional in a few dispatch paths + "PLC0415", # import-outside-toplevel — used for lazy optional imports ] fixable = ["ALL"] @@ -73,18 +72,21 @@ unfixable = [ dummy-variable-rgx = "^(_+|(_+[a-zA-Z0-9_]*[a-zA-Z0-9]+?))$" [lint.per-file-ignores] +# Rule ignores below are deliberately scoped to the test suite so they +# can't mask real issues in shipped code. Each entry explains why the +# rule is inappropriate under ``tests/`` specifically. "tests/**/*.py" = [ - "S101", - "D", - "PLR2004", - "S104", - "S105", - "S106", - "S108", - "S310", - "ARG", - "ASYNC240", - "PERF401", + "S101", # `assert` is the primary test mechanism + "D", # pydocstyle rules do not apply to test fixtures / cases + "PLR2004", # magic numbers are expected in assertions + "S104", # binding to 0.0.0.0 in integration tests (testcontainers, etc.) + "S105", # hard-coded "password" / secret fixtures + "S106", # hard-coded passwords in test kwargs (e.g. OAuth fixtures) + "S108", # hard-coded /tmp paths in fixtures + "S310", # unverified urllib calls against fixture URLs + "ARG", # unused fixture / mock arguments are idiomatic in pytest + "ASYNC240", # deliberately blocking calls in async tests (e.g. assertions) + "PERF401", # readability beats micro-optimisation in tests ] "__init__.py" = [ From 7a789a5f17c133978f8df4e3d08b560aec006c75 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 16:04:38 -0700 Subject: [PATCH 40/68] =?UTF-8?q?Finish=20Copilot=20PR=20review=2041366363?= =?UTF-8?q?13=20(items=20#20=E2=80=93#30)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Frontend load-order robustness: - event-bridge.js (#20): install a minimal `window.pywry` + `_trigger` shim so the Tauri `pywry:event` listener can fire before `bridge.js` has finished loading. - hot-reload.js (#21): guard against missing `window.pywry` and WRAP any existing `pywry.refresh` rather than clobbering it (so a later bridge.js / custom app can still add pre-refresh hooks). Also gates the "initialised" console.log behind `PYWRY_DEBUG`. - theme-manager.js (#30): gate the remaining unconditional console.log calls behind `window.PYWRY_DEBUG`, matching bridge.js. stdio provider reliability: - #24–#26: `_read_loop` now wraps its body in try/except/finally that fails every pending JSON-RPC request when the subprocess exits, stdout closes, or the reader is cancelled — callers awaiting `_send_request` used to hang forever. Extracted `_fail_pending_requests` and `_dispatch_rpc_message` helpers to keep complexity under the PLR0912 budget. - #22–#23: `prompt()` now always settles `prompt_future` in a `finally` block (cancel if still running, then await and log any exception), so agent errors surface to the caller and `_pending` can't leak on cancellation. Extracted `_serialize_content_blocks`, `_update_type_map`, and `_settle_prompt_future` helpers to keep `prompt()` itself simple. Pydantic / docs clarity: - chat/updates.py (#27): add a comment explaining why `Field(discriminator="session_update")` still routes raw `{"sessionUpdate": ...}` JSON correctly — every variant has `populate_by_name=True` + `alias="sessionUpdate"`, so the union dispatches on both key styles. Verified locally via TypeAdapter. CI: - test-pywry.yml (#29): explicitly guard the `lint` job's "Build SQLCipher from source (Linux)" step with `if: runner.os == 'Linux'`. The job is already pinned to ubuntu-24.04, but the guard makes intent explicit and stops the step running if anyone later adds matrix support to the lint job. Verified false positives (no code change): - #28: `pywry:download-csv` IS implemented, in plotly-widget.js. - #29 "duplicate build step": the second SQLCipher build is in a different job (`test`), not a duplicate. Full `ruff check pywry/ tests/` and `mypy pywry/` are clean; chat unit + state unit tests pass. Co-Authored-By: Claude Opus 4.7 (1M context) --- .github/workflows/test-pywry.yml | 4 + pywry/pywry/chat/providers/stdio.py | 229 ++++++++++++++-------- pywry/pywry/chat/updates.py | 6 + pywry/pywry/frontend/src/event-bridge.js | 24 ++- pywry/pywry/frontend/src/hot-reload.js | 18 +- pywry/pywry/frontend/src/theme-manager.js | 8 +- 6 files changed, 197 insertions(+), 92 deletions(-) diff --git a/.github/workflows/test-pywry.yml b/.github/workflows/test-pywry.yml index 3926c2b..143ea1a 100644 --- a/.github/workflows/test-pywry.yml +++ b/.github/workflows/test-pywry.yml @@ -42,6 +42,10 @@ jobs: cache-dependency-path: pywry/pyproject.toml - name: Build SQLCipher from source (Linux) + # The lint job is pinned to ubuntu-24.04, but we still guard + # the step by OS so anyone adding matrix support later can't + # accidentally run this on Windows / macOS runners. + if: runner.os == 'Linux' run: | for i in 1 2 3; do sudo apt-get update && break || sleep 15; done # ``tcl`` intentionally omitted — SQLCipher's Tcl extension diff --git a/pywry/pywry/chat/providers/stdio.py b/pywry/pywry/chat/providers/stdio.py index fafbd34..3db10c5 100644 --- a/pywry/pywry/chat/providers/stdio.py +++ b/pywry/pywry/chat/providers/stdio.py @@ -91,37 +91,72 @@ async def _drain_stderr(self) -> None: if stripped: log.debug("agent stderr: %s", stripped.decode(errors="replace")[:500]) + def _fail_pending_requests(self, exc: BaseException) -> None: + """Fail every pending JSON-RPC request future with ``exc``. + + Called when the read loop terminates (subprocess exited, stdout + closed, reader cancelled, etc.) so callers blocked on + ``_send_request`` wake up with a real error instead of hanging + forever. + """ + pending = self._pending + self._pending = {} + for future in pending.values(): + if not future.done(): + future.set_exception(exc) + + async def _dispatch_rpc_message(self, msg: dict[str, Any]) -> None: + """Route one decoded JSON-RPC message to the right handler.""" + if "id" in msg and "result" in msg: + # Response to a request we sent + future = self._pending.pop(msg["id"], None) + if future and not future.done(): + future.set_result(msg.get("result")) + elif "id" in msg and "error" in msg: + future = self._pending.pop(msg["id"], None) + if future and not future.done(): + future.set_exception(RuntimeError(msg["error"].get("message", "RPC error"))) + elif "method" in msg and "id" not in msg: + # Notification from agent (no id = no response expected) + await self._handle_notification(msg) + elif "method" in msg and "id" in msg: + # Request from agent (needs response) + await self._handle_agent_request(msg) + async def _read_loop(self) -> None: """Read JSON-RPC messages from stdout line-by-line.""" if self._process is None or self._process.stdout is None: - msg = "stdio read loop started before subprocess was spawned" - raise RuntimeError(msg) + err = "stdio read loop started before subprocess was spawned" + raise RuntimeError(err) - async for raw_line in self._process.stdout: - stripped = raw_line.strip() - if not stripped: - continue - try: - msg = json.loads(stripped) - except json.JSONDecodeError: - log.warning("Non-JSON line from agent: %s", stripped[:200]) - continue - - if "id" in msg and "result" in msg: - # Response to a request we sent - future = self._pending.pop(msg["id"], None) - if future and not future.done(): - future.set_result(msg.get("result")) - elif "id" in msg and "error" in msg: - future = self._pending.pop(msg["id"], None) - if future and not future.done(): - future.set_exception(RuntimeError(msg["error"].get("message", "RPC error"))) - elif "method" in msg and "id" not in msg: - # Notification from agent (no id = no response expected) - await self._handle_notification(msg) - elif "method" in msg and "id" in msg: - # Request from agent (needs response) - await self._handle_agent_request(msg) + exit_exc: BaseException | None = None + try: + async for raw_line in self._process.stdout: + stripped = raw_line.strip() + if not stripped: + continue + try: + msg = json.loads(stripped) + except json.JSONDecodeError: + log.warning("Non-JSON line from agent: %s", stripped[:200]) + continue + await self._dispatch_rpc_message(msg) + except asyncio.CancelledError: + exit_exc = RuntimeError("stdio reader cancelled") + raise + except Exception as exc: + log.exception("stdio reader failed") + exit_exc = RuntimeError(f"stdio reader failed: {exc}") + raise + finally: + if exit_exc is None: + rc = self._process.returncode if self._process is not None else None + exit_exc = RuntimeError( + f"agent subprocess exited (returncode={rc})" + if rc is not None + else "agent subprocess stdout closed" + ) + self._fail_pending_requests(exit_exc) async def _send_request(self, method: str, params: dict[str, Any] | None = None) -> Any: """Send a JSON-RPC request and wait for the response. @@ -303,6 +338,61 @@ async def new_session( self._update_queues[session_id] = asyncio.Queue() return session_id + @staticmethod + def _serialize_content_blocks(content: list[Any]) -> list[dict[str, Any]]: + """Serialize content blocks (Pydantic models or raw dicts).""" + dicts: list[dict[str, Any]] = [] + for block in content: + if hasattr(block, "model_dump"): + dicts.append(block.model_dump()) + elif isinstance(block, dict): + dicts.append(block) + return dicts + + @staticmethod + def _update_type_map() -> dict[str, type]: + """Return the discriminator → model-class map for stdio updates.""" + from ..updates import ( + AgentMessageUpdate, + CommandsUpdate, + ConfigOptionUpdate, + ModeUpdate, + PermissionRequestUpdate, + PlanUpdate, + StatusUpdate, + ThinkingUpdate, + ToolCallUpdate, + ) + + return { + "agent_message": AgentMessageUpdate, + "tool_call": ToolCallUpdate, + "plan": PlanUpdate, + "available_commands": CommandsUpdate, + "config_option": ConfigOptionUpdate, + "current_mode": ModeUpdate, + "permission_request": PermissionRequestUpdate, + "x_status": StatusUpdate, + "x_thinking": ThinkingUpdate, + } + + async def _settle_prompt_future(self, prompt_future: asyncio.Future[Any]) -> None: + """Settle the in-flight ``session/prompt`` request. + + Always called from ``prompt()``'s ``finally`` block so exceptions + from the agent surface to the caller and ``_pending`` can't leak. + On cancellation the future is cancelled first; the ``_pending`` + entry is either cleared by the read loop (when the agent acks) + or failed en masse by ``_fail_pending_requests`` when the + subprocess exits. + """ + if not prompt_future.done(): + prompt_future.cancel() + try: + await prompt_future + except (asyncio.CancelledError, Exception) as exc: + log.debug("session/prompt settled with %r", exc) + async def prompt( self, session_id: str, @@ -325,78 +415,47 @@ async def prompt( SessionUpdate Typed update notifications from the agent. """ - from ..updates import ( - AgentMessageUpdate, - CommandsUpdate, - ConfigOptionUpdate, - ModeUpdate, - PermissionRequestUpdate, - PlanUpdate, - StatusUpdate, - ThinkingUpdate, - ToolCallUpdate, - ) - queue = self._update_queues.get(session_id) if queue is None: queue = asyncio.Queue() self._update_queues[session_id] = queue - # Serialize content blocks - content_dicts = [] - for block in content: - if hasattr(block, "model_dump"): - content_dicts.append(block.model_dump()) - elif isinstance(block, dict): - content_dicts.append(block) - # Send the prompt — response comes when the turn completes prompt_future = asyncio.ensure_future( self._send_request( "session/prompt", { "sessionId": session_id, - "prompt": content_dicts, + "prompt": self._serialize_content_blocks(content), }, ) ) - - # Map update type strings to models - update_map = { - "agent_message": AgentMessageUpdate, - "tool_call": ToolCallUpdate, - "plan": PlanUpdate, - "available_commands": CommandsUpdate, - "config_option": ConfigOptionUpdate, - "current_mode": ModeUpdate, - "permission_request": PermissionRequestUpdate, - "x_status": StatusUpdate, - "x_thinking": ThinkingUpdate, - } - - while not prompt_future.done(): - try: - update = await asyncio.wait_for(queue.get(), timeout=0.1) - except asyncio.TimeoutError: - if cancel_event and cancel_event.is_set(): - await self._send_notification( - "session/cancel", - { - "sessionId": session_id, - }, - ) - break - continue - - parsed = self._parse_update(update, update_map) - if parsed: - yield parsed - - while not queue.empty(): - update = queue.get_nowait() - parsed = self._parse_update(update, update_map) - if parsed: - yield parsed + update_map = self._update_type_map() + + try: + while not prompt_future.done(): + try: + update = await asyncio.wait_for(queue.get(), timeout=0.1) + except asyncio.TimeoutError: + if cancel_event and cancel_event.is_set(): + await self._send_notification( + "session/cancel", + {"sessionId": session_id}, + ) + break + continue + + parsed = self._parse_update(update, update_map) + if parsed: + yield parsed + + while not queue.empty(): + update = queue.get_nowait() + parsed = self._parse_update(update, update_map) + if parsed: + yield parsed + finally: + await self._settle_prompt_future(prompt_future) @staticmethod def _parse_update(update: dict[str, Any], update_map: Mapping[str, type]) -> Any: diff --git a/pywry/pywry/chat/updates.py b/pywry/pywry/chat/updates.py index c028d70..e670a98 100644 --- a/pywry/pywry/chat/updates.py +++ b/pywry/pywry/chat/updates.py @@ -158,6 +158,12 @@ class CitationUpdate(BaseModel): | ThinkingUpdate | ArtifactUpdate | CitationUpdate, + # The discriminator references the Python attribute name + # ``session_update``. Every variant also declares + # ``model_config = ConfigDict(populate_by_name=True)`` and + # ``alias="sessionUpdate"`` on the discriminator field, so the + # union correctly dispatches whether the input dict uses the + # snake_case attribute name or the camelCase wire-format key. Field(discriminator="session_update"), ] """Discriminated union of all session update types.""" diff --git a/pywry/pywry/frontend/src/event-bridge.js b/pywry/pywry/frontend/src/event-bridge.js index 1a74aa1..912792f 100644 --- a/pywry/pywry/frontend/src/event-bridge.js +++ b/pywry/pywry/frontend/src/event-bridge.js @@ -1,6 +1,26 @@ (function() { 'use strict'; + // Guard against load-order surprises: if this file runs before + // bridge.js, install a minimal shim so _trigger() calls don't + // throw. bridge.js later replaces _trigger in place while + // preserving _handlers, so any events that fire before bridge.js + // finishes still reach their eventual subscribers. + if (!window.pywry) { + window.pywry = { _handlers: {} }; + } + if (!window.pywry._handlers) { + window.pywry._handlers = {}; + } + if (typeof window.pywry._trigger !== 'function') { + window.pywry._trigger = function(eventType, data) { + var handlers = (this._handlers[eventType] || []).concat(this._handlers['*'] || []); + handlers.forEach(function(handler) { + try { handler(data, eventType); } catch (err) { console.error(err); } + }); + }; + } + // Listen for all pywry:* events from Python if (window.__TAURI__ && window.__TAURI__.event) { window.__TAURI__.event.listen('pywry:event', function(event) { @@ -10,5 +30,7 @@ }); } - console.log('Event bridge initialized'); + if (window.PYWRY_DEBUG) { + console.log('Event bridge initialized'); + } })(); diff --git a/pywry/pywry/frontend/src/hot-reload.js b/pywry/pywry/frontend/src/hot-reload.js index 3a05a81..c6e7f0e 100644 --- a/pywry/pywry/frontend/src/hot-reload.js +++ b/pywry/pywry/frontend/src/hot-reload.js @@ -36,10 +36,18 @@ } } - // Override refresh to save scroll position before reloading - window.pywry.refresh = function() { + // Wrap refresh to save scroll position before reloading. Guard + // against window.pywry not yet existing (load-order with + // bridge.js), and preserve any existing refresh() rather than + // overwriting it. + var pywry = window.pywry = window.pywry || {}; + var originalRefresh = pywry.refresh; + pywry.refresh = function() { saveScrollPosition(); - window.location.reload(); + if (typeof originalRefresh === 'function') { + return originalRefresh.apply(this, arguments); + } + return window.location.reload(); }; if (document.readyState === 'complete') { @@ -48,5 +56,7 @@ window.addEventListener('load', restoreScrollPosition); } - console.log('Hot reload bridge initialized'); + if (window.PYWRY_DEBUG) { + console.log('Hot reload bridge initialized'); + } })(); diff --git a/pywry/pywry/frontend/src/theme-manager.js b/pywry/pywry/frontend/src/theme-manager.js index d87d1cb..d6d66b0 100644 --- a/pywry/pywry/frontend/src/theme-manager.js +++ b/pywry/pywry/frontend/src/theme-manager.js @@ -94,9 +94,13 @@ // Register handler for pywry:update-theme events IMMEDIATELY (not in DOMContentLoaded) // because content is injected via JavaScript after the page loads - console.log('[PyWry] Registering pywry:update-theme handler'); + if (window.PYWRY_DEBUG) { + console.log('[PyWry] Registering pywry:update-theme handler'); + } window.pywry.on('pywry:update-theme', function(data) { - console.log('[PyWry] pywry:update-theme handler called with:', data); + if (window.PYWRY_DEBUG) { + console.log('[PyWry] pywry:update-theme handler called with:', data); + } var theme = data.theme || 'plotly_dark'; var isDark = theme.includes('dark'); var mode = isDark ? 'dark' : 'light'; From 72b1c8f8199ea7a38a1a73d48a5c77139bd153df Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 16:14:52 -0700 Subject: [PATCH 41/68] CI: drop duplicate SQLCipher build from lint job Co-Authored-By: Claude Opus 4.7 (1M context) --- .github/workflows/test-pywry.yml | 27 ++------------------------- 1 file changed, 2 insertions(+), 25 deletions(-) diff --git a/.github/workflows/test-pywry.yml b/.github/workflows/test-pywry.yml index 143ea1a..4bd2ae6 100644 --- a/.github/workflows/test-pywry.yml +++ b/.github/workflows/test-pywry.yml @@ -41,34 +41,11 @@ jobs: cache: 'pip' cache-dependency-path: pywry/pyproject.toml - - name: Build SQLCipher from source (Linux) - # The lint job is pinned to ubuntu-24.04, but we still guard - # the step by OS so anyone adding matrix support later can't - # accidentally run this on Windows / macOS runners. - if: runner.os == 'Linux' - run: | - for i in 1 2 3; do sudo apt-get update && break || sleep 15; done - # ``tcl`` intentionally omitted — SQLCipher's Tcl extension - # isn't needed for the ``sqlcipher3`` Python binding, and - # modern Tcl bottles (9.0 on macOS) break the upstream - # ``tclsqlite.c`` compile. ``--disable-tcl`` makes - # configure skip the extension. - sudo apt-get install -y --fix-missing build-essential libssl-dev - git clone --depth=1 --branch=v4.6.1 https://github.com/sqlcipher/sqlcipher.git /tmp/sqlcipher - cd /tmp/sqlcipher - ./configure \ - --disable-tcl \ - --enable-tempstore=yes \ - CFLAGS="-DSQLITE_HAS_CODEC -DSQLCIPHER_CRYPTO_OPENSSL" \ - LDFLAGS="-lcrypto" - make -j$(nproc) libsqlcipher.la || make -j$(nproc) - sudo make install-libLTLIBRARIES install-includeHEADERS || sudo make install - sudo ldconfig - - name: Install dependencies run: | python -m pip install --upgrade pip - pip install -e ".[dev]" + pip install -e . + pip install ruff mypy pylint - name: Run Ruff linter run: ruff check pywry/ tests/ From 1960141db726a985fdf08d0747f6de5dda300b93 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 16:19:24 -0700 Subject: [PATCH 42/68] CI lint: install extras mypy needs (skip sqlcipher3 only) Co-Authored-By: Claude Opus 4.7 (1M context) --- .github/workflows/test-pywry.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/test-pywry.yml b/.github/workflows/test-pywry.yml index 4bd2ae6..cecb917 100644 --- a/.github/workflows/test-pywry.yml +++ b/.github/workflows/test-pywry.yml @@ -44,8 +44,8 @@ jobs: - name: Install dependencies run: | python -m pip install --upgrade pip - pip install -e . - pip install ruff mypy pylint + pip install -e ".[notebook,auth,mcp,acp,deepagent,openai,anthropic,magentic]" + pip install ruff mypy pylint pytauri-wheel plotly pandas cryptography - name: Run Ruff linter run: ruff check pywry/ tests/ From 2a60037f25ec0aeb6857bb3321e3cd9eb81e7bd3 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 16:28:25 -0700 Subject: [PATCH 43/68] Silence pylint warnings, restore 10.00/10 rating Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/pywry/auth/token_store.py | 2 +- pywry/pywry/chat/manager.py | 6 +++--- pywry/pywry/chat/providers/__init__.py | 3 +++ pywry/pywry/chat/providers/deepagent.py | 21 ++++++++++++++------- pywry/pywry/mcp/handlers.py | 4 ++-- pywry/pywry/state/base.py | 6 ++++-- 6 files changed, 27 insertions(+), 15 deletions(-) diff --git a/pywry/pywry/auth/token_store.py b/pywry/pywry/auth/token_store.py index 87df149..a2ffc6a 100644 --- a/pywry/pywry/auth/token_store.py +++ b/pywry/pywry/auth/token_store.py @@ -289,7 +289,7 @@ async def list_keys(self) -> list[str]: return [key[prefix_len:] async for key in self._redis.scan_iter(match=pattern)] -_token_store_instance: TokenStore | None = None +_token_store_instance: TokenStore | None = None # pylint: disable=invalid-name _token_store_lock = threading.Lock() diff --git a/pywry/pywry/chat/manager.py b/pywry/pywry/chat/manager.py index 589936a..3c0f41a 100644 --- a/pywry/pywry/chat/manager.py +++ b/pywry/pywry/chat/manager.py @@ -296,7 +296,7 @@ def _tool_result_text(content: Any) -> str: return "" -class ChatManager: +class ChatManager: # pylint: disable=too-many-instance-attributes """ACP-native orchestrator for the PyWry chat component. Handles event wiring, thread management, streaming, cancellation, @@ -984,7 +984,7 @@ def _dispatch_tool_call_update( }, ) - def _dispatch_session_update( + def _dispatch_session_update( # pylint: disable=unused-argument self, update: Any, state: _StreamState, @@ -1504,7 +1504,7 @@ def _truncate_provider_state(self, thread_id: str, kept_messages: list[MessageDi try: truncate = getattr(provider, "truncate_session", None) if callable(truncate): - truncate(thread_id, kept_messages) + truncate(thread_id, kept_messages) # pylint: disable=not-callable except Exception: log.debug("provider.truncate_session failed", exc_info=True) diff --git a/pywry/pywry/chat/providers/__init__.py b/pywry/pywry/chat/providers/__init__.py index 60dbf31..bed087c 100644 --- a/pywry/pywry/chat/providers/__init__.py +++ b/pywry/pywry/chat/providers/__init__.py @@ -5,6 +5,9 @@ loop → ``cancel``. """ +# pylint: disable=unused-argument +# ABC defaults keep the full interface signature so subclasses see it. + from __future__ import annotations from abc import ABC, abstractmethod diff --git a/pywry/pywry/chat/providers/deepagent.py b/pywry/pywry/chat/providers/deepagent.py index eded6b9..d3c9176 100644 --- a/pywry/pywry/chat/providers/deepagent.py +++ b/pywry/pywry/chat/providers/deepagent.py @@ -239,6 +239,7 @@ def _flush_safe_prefix(self, out: list[str]) -> None: self._buffer = self._buffer[emit_len:] def feed(self, text: str) -> str: + """Feed one chunk of streamed text and return the safe-to-emit prefix.""" if not text: return "" out: list[str] = [] @@ -520,7 +521,7 @@ def _try_parse_call_args(payload: str) -> dict[str, Any] | None: return args -_plan_middleware_singleton: Any = None +_plan_middleware_singleton: Any = None # pylint: disable=invalid-name def _next_pending_plan_step(state: dict[str, Any]) -> str | None: @@ -614,7 +615,7 @@ def after_model( return _plan_middleware_singleton -_inline_tool_call_middleware_singleton: Any = None +_inline_tool_call_middleware_singleton: Any = None # pylint: disable=invalid-name def _flatten_message_content(content: Any) -> str | None: @@ -947,7 +948,9 @@ def _create_checkpointer(self) -> Any: backend = get_state_backend() if backend == StateBackend.REDIS: - from langgraph.checkpoint.redis import RedisSaver + from langgraph.checkpoint.redis import ( # pylint: disable=import-error,no-name-in-module + RedisSaver, + ) from ...config import get_settings @@ -1403,7 +1406,9 @@ async def cancel(self, session_id: str) -> None: Session to cancel. """ - def truncate_session(self, session_id: str, kept_messages: list[Any]) -> None: + def truncate_session( # pylint: disable=unused-argument + self, session_id: str, kept_messages: list[Any] + ) -> None: """Discard the LangGraph checkpointer state for a session. Called by ``ChatManager`` when the user edits or resends a message @@ -1430,7 +1435,7 @@ def truncate_session(self, session_id: str, kept_messages: list[Any]) -> None: try: delete_thread = getattr(checkpointer, "delete_thread", None) if callable(delete_thread): - delete_thread(thread_id) + delete_thread(thread_id) # pylint: disable=not-callable return except Exception: logger.debug("checkpointer.delete_thread failed", exc_info=True) @@ -1442,14 +1447,16 @@ def truncate_session(self, session_id: str, kept_messages: list[Any]) -> None: try: _asyncio.get_running_loop() except RuntimeError: - _asyncio.run(adelete(thread_id)) + _asyncio.run(adelete(thread_id)) # pylint: disable=not-callable else: # A loop is already running — schedule the coroutine # on a dedicated thread to avoid reentrancy. import concurrent.futures with concurrent.futures.ThreadPoolExecutor(max_workers=1) as pool: - pool.submit(lambda: _asyncio.run(adelete(thread_id))).result() + pool.submit( + lambda: _asyncio.run(adelete(thread_id)) # pylint: disable=not-callable + ).result() return except Exception: logger.debug("checkpointer.adelete_thread failed", exc_info=True) diff --git a/pywry/pywry/mcp/handlers.py b/pywry/pywry/mcp/handlers.py index 4109198..0a80249 100644 --- a/pywry/pywry/mcp/handlers.py +++ b/pywry/pywry/mcp/handlers.py @@ -836,7 +836,7 @@ def _handle_tvchart_symbol_search(ctx: HandlerContext) -> HandlerResult: return result target = str(query).upper() - target_bare = target.split(":")[-1].strip() if ":" in target else target + target_bare = target.rsplit(":", maxsplit=1)[-1].strip() if ":" in target else target def _matches(state: dict[str, Any]) -> bool: current = str(state.get("symbol") or "").upper() @@ -928,7 +928,7 @@ def _handle_tvchart_compare(ctx: HandlerContext) -> HandlerResult: return result target = str(query).upper() - target_bare = target.split(":")[-1].strip() if ":" in target else target + target_bare = target.rsplit(":", maxsplit=1)[-1].strip() if ":" in target else target accepted_tickers = {target, target_bare} diff --git a/pywry/pywry/state/base.py b/pywry/pywry/state/base.py index 31ad1e4..73c2c5a 100644 --- a/pywry/pywry/state/base.py +++ b/pywry/pywry/state/base.py @@ -4,8 +4,10 @@ horizontal scaling via Redis or other external stores. """ -# pylint: disable=unnecessary-ellipsis -# Ellipsis (...) is the standard Python idiom for abstract method bodies +# pylint: disable=unnecessary-ellipsis,unused-argument +# Ellipsis (...) is the standard Python idiom for abstract method bodies; +# ABC defaults accept the full interface signature even when the no-op +# body doesn't reference every parameter. from __future__ import annotations From bca9c9ea8c75e28b3cfe50800115df753cf5fb1e Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 16:29:22 -0700 Subject: [PATCH 44/68] Drop unused sqlcipher3/pysqlcipher3 mypy overrides Loaded via importlib.import_module(), so mypy never sees them as direct imports and the overrides are reported as unused. Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/pyproject.toml | 2 -- 1 file changed, 2 deletions(-) diff --git a/pywry/pyproject.toml b/pywry/pyproject.toml index 0080c9c..bb9aced 100644 --- a/pywry/pyproject.toml +++ b/pywry/pyproject.toml @@ -243,8 +243,6 @@ module = [ "langchain_mcp_adapters", "langchain_mcp_adapters.*", "langgraph", "langgraph.*", "deepagents", "deepagents.*", - "pysqlcipher3", "pysqlcipher3.*", - "sqlcipher3", "sqlcipher3.*", ] ignore_missing_imports = true From 9f1aaaab6f9902b158d5e478a44297bca8ce5435 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 19:36:07 -0700 Subject: [PATCH 45/68] tvchart: add Volume Profile (Fixed Range + Visible Range) Port of the upstream TradingView lightweight-charts volume-profile plugin example. Ships both variants: Fixed Range anchors the histogram to a bar-index range, Visible Range follows the viewport and recomputes on every pan/zoom (debounced via rAF). - 09-indicators.js: _tvComputeVolumeProfile buckets OHLCV volume across price levels, _tvMakeVolumeProfilePrimitive renders the histogram via the ISeriesPrimitive API, _tvRefreshVisibleVolumeProfiles recomputes visible-range instances on viewport change. - 04-series.js: _tvAddIndicator branch for both VP variants; creates the primitive and attaches it to the main price series. - 09-indicators.js: _tvRemoveIndicator detaches the primitive alongside the usual series cleanup. - 05-lifecycle.js: subscribeVisibleLogicalRangeChange now also calls the VP refresh hook (rAF-debounced). - 05-lifecycle.js + 06-storage.js: layout export/restore round-trips mode / bucketCount / fromIndex / toIndex. - 10-events.js: tvchart:add-indicator handler forwards fromIndex / toIndex to _tvAddIndicator. - tvchart/mixin.py: new add_volume_profile() convenience method with mode="fixed"|"visible", bucket_count, from_index/to_index. Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/pywry/frontend/src/tvchart/04-series.js | 73 ++++++ .../frontend/src/tvchart/05-lifecycle.js | 17 +- .../pywry/frontend/src/tvchart/06-storage.js | 2 + .../frontend/src/tvchart/09-indicators.js | 234 ++++++++++++++++++ pywry/pywry/frontend/src/tvchart/10-events.js | 2 + pywry/pywry/tvchart/mixin.py | 44 +++- 6 files changed, 369 insertions(+), 3 deletions(-) diff --git a/pywry/pywry/frontend/src/tvchart/04-series.js b/pywry/pywry/frontend/src/tvchart/04-series.js index c75a489..b6ab054 100644 --- a/pywry/pywry/frontend/src/tvchart/04-series.js +++ b/pywry/pywry/frontend/src/tvchart/04-series.js @@ -1450,6 +1450,79 @@ function _tvAddIndicator(indicatorDef, chartId) { var volSmaPeriod = period || 20; var volSmaData = _computeSMA(rawData, volSmaPeriod, 'volume'); addSingleSeriesIndicator('volsma', volSmaData, { type: 'volume-sma', period: volSmaPeriod }, 1, false); + } else if (key === 'volume-profile-fixed' || key === 'volume-profile-visible') { + var vpMode = key === 'volume-profile-fixed' ? 'fixed' : 'visible'; + var vpBuckets = Math.max(2, Math.floor(period || 24)); + var vpFromIdx, vpToIdx; + + if (vpMode === 'fixed') { + // Fixed anchor: prefer caller-supplied _fromTime/_toTime; default to + // the last 20% of bars so the histogram is visible immediately. + if (indicatorDef._fromIndex != null && indicatorDef._toIndex != null) { + vpFromIdx = Math.max(0, Math.floor(indicatorDef._fromIndex)); + vpToIdx = Math.min(rawData.length - 1, Math.floor(indicatorDef._toIndex)); + } else { + var defaultWidth = Math.max(20, Math.floor(rawData.length * 0.2)); + vpFromIdx = Math.max(0, rawData.length - defaultWidth); + vpToIdx = rawData.length - 1; + } + } else { + // Visible range: initial anchor covers everything; refresh hook + // will narrow it on the next visible-range-change event. + var vr = null; + try { vr = entry.chart.timeScale().getVisibleLogicalRange(); } catch (e) {} + if (vr) { + vpFromIdx = Math.max(0, Math.floor(vr.from)); + vpToIdx = Math.min(rawData.length - 1, Math.ceil(vr.to)); + } else { + vpFromIdx = 0; + vpToIdx = rawData.length - 1; + } + } + + var vpData = _tvComputeVolumeProfile(rawData, vpFromIdx, vpToIdx, vpBuckets); + if (!vpData) { + console.warn('[pywry:tvchart] Volume Profile: insufficient data / no volume'); + return; + } + + var vpId = 'ind_vp_' + vpMode + '_' + Date.now(); + var vpSlot = { + chartId: chartId, + seriesId: primarySeriesId, + mode: vpMode, + bucketCount: vpBuckets, + vpData: vpData, + primitive: null, + }; + vpSlot.primitive = _tvMakeVolumeProfilePrimitive(chartId, primarySeriesId, function() { + return vpSlot.vpData; + }); + try { + entry.seriesMap[primarySeriesId].attachPrimitive(vpSlot.primitive); + } catch (e) { + console.warn('[pywry:tvchart] Volume Profile attach failed:', e); + return; + } + _volumeProfilePrimitives[vpId] = vpSlot; + + _activeIndicators[vpId] = { + name: name, + period: vpBuckets, + chartId: chartId, + color: null, + paneIndex: 0, + isSubplot: false, + type: key, + sourceSeriesId: primarySeriesId, + secondarySeriesId: null, + mode: vpMode, + bucketCount: vpBuckets, + anchorTime: vpData.time, + anchorWidth: vpData.width, + fromIndex: vpFromIdx, + toIndex: vpToIdx, + }; } else { console.error('[pywry:tvchart] Unknown indicator:', name, 'key:', key); } diff --git a/pywry/pywry/frontend/src/tvchart/05-lifecycle.js b/pywry/pywry/frontend/src/tvchart/05-lifecycle.js index b1cd2ce..c80a348 100644 --- a/pywry/pywry/frontend/src/tvchart/05-lifecycle.js +++ b/pywry/pywry/frontend/src/tvchart/05-lifecycle.js @@ -869,7 +869,10 @@ function _tvSetupEventBridge(chartId, chart) { }); }); - // Visible range change + // Visible range change — emits Python event + locally refreshes any + // visible-range volume-profile primitives on this chart. The refresh + // is debounced via rAF so panning/zooming stays smooth. + var vpRefreshHandle = null; chart.timeScale().subscribeVisibleLogicalRangeChange(function(range) { if (!range) return; bridge.emit('tvchart:visible-range-change', { @@ -877,6 +880,13 @@ function _tvSetupEventBridge(chartId, chart) { from: range.from, to: range.to, }); + if (typeof _tvRefreshVisibleVolumeProfiles === 'function') { + if (vpRefreshHandle) cancelAnimationFrame(vpRefreshHandle); + vpRefreshHandle = requestAnimationFrame(function() { + vpRefreshHandle = null; + _tvRefreshVisibleVolumeProfiles(chartId); + }); + } }); } @@ -1036,6 +1046,11 @@ function _tvExportLayout(chartId) { if (ai.maType) indEntry.maType = ai.maType; if (ai.offset != null) indEntry.offset = ai.offset; if (ai.source) indEntry.source = ai.source; + // Volume Profile: preserve mode + bucket count + fixed-range anchor + if (ai.mode) indEntry.mode = ai.mode; + if (ai.bucketCount != null) indEntry.bucketCount = ai.bucketCount; + if (ai.fromIndex != null) indEntry.fromIndex = ai.fromIndex; + if (ai.toIndex != null) indEntry.toIndex = ai.toIndex; indicators.push(indEntry); } } diff --git a/pywry/pywry/frontend/src/tvchart/06-storage.js b/pywry/pywry/frontend/src/tvchart/06-storage.js index 111e953..8d2571c 100644 --- a/pywry/pywry/frontend/src/tvchart/06-storage.js +++ b/pywry/pywry/frontend/src/tvchart/06-storage.js @@ -1071,6 +1071,8 @@ function _tvApplyLayout(chartId, layout) { name: ind.name, defaultPeriod: ind.period, _color: ind.color || undefined, + _fromIndex: ind.fromIndex != null ? ind.fromIndex : undefined, + _toIndex: ind.toIndex != null ? ind.toIndex : undefined, }, chartId); } diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators.js b/pywry/pywry/frontend/src/tvchart/09-indicators.js index 4ef8042..3838eb0 100644 --- a/pywry/pywry/frontend/src/tvchart/09-indicators.js +++ b/pywry/pywry/frontend/src/tvchart/09-indicators.js @@ -55,6 +55,8 @@ var _INDICATOR_CATALOG = [ { name: 'ATR', fullName: 'Average True Range', category: 'Volatility', defaultPeriod: 14 }, { name: 'VWAP', fullName: 'Volume Weighted Average Price', category: 'Volume', defaultPeriod: 0 }, { name: 'Volume SMA', fullName: 'Volume Simple Moving Average', category: 'Volume', defaultPeriod: 20 }, + { key: 'volume-profile-fixed', name: 'Volume Profile Fixed Range', fullName: 'Volume Profile (Fixed Range)', category: 'Volume', defaultPeriod: 24, primitive: true }, + { key: 'volume-profile-visible', name: 'Volume Profile Visible Range', fullName: 'Volume Profile (Visible Range)', category: 'Volume', defaultPeriod: 24, primitive: true }, ]; // ---- Indicator computation functions ---- @@ -339,6 +341,233 @@ function _tvUpdateBBFill(chartId) { } } +// --------------------------------------------------------------------------- +// Volume Profile (port of tradingview/lightweight-charts volume-profile plugin) +// --------------------------------------------------------------------------- + +// Per-chart registry: { [indicatorId]: { primitive, seriesId, mode, bucketCount, anchorTime, anchorWidth, vpData } } +var _volumeProfilePrimitives = {}; + +/** positionsBox — media→bitmap pixel alignment helper (ported from upstream plugin). */ +function _tvPositionsBox(a, b, pixelRatio) { + var lo = Math.min(a, b); + var hi = Math.max(a, b); + var scaled = Math.round(lo * pixelRatio); + return { + position: scaled, + length: Math.max(1, Math.round(hi * pixelRatio) - scaled), + }; +} + +/** + * Bucket bars into a volume-by-price histogram. + * @param {Array} bars - OHLCV bar objects with {time, high, low, close, volume} + * @param {number} fromIdx - inclusive start index + * @param {number} toIdx - inclusive end index + * @param {number} bucketCount - number of price buckets + * @returns {{time, profile, width, minPrice, maxPrice}|null} + */ +function _tvComputeVolumeProfile(bars, fromIdx, toIdx, bucketCount) { + if (!bars || !bars.length) return null; + var lo = Math.max(0, Math.min(fromIdx, toIdx, bars.length - 1)); + var hi = Math.min(bars.length - 1, Math.max(fromIdx, toIdx, 0)); + if (hi < lo) return null; + + var minP = Infinity, maxP = -Infinity; + for (var i = lo; i <= hi; i++) { + var b = bars[i]; + var h = b.high !== undefined ? b.high : b.close; + var l = b.low !== undefined ? b.low : b.close; + if (h === undefined || l === undefined) continue; + if (h > maxP) maxP = h; + if (l < minP) minP = l; + } + if (!isFinite(minP) || !isFinite(maxP) || maxP === minP) return null; + + var nBuckets = Math.max(2, Math.floor(bucketCount || 24)); + var step = (maxP - minP) / nBuckets; + var volumes = new Array(nBuckets); + for (var k = 0; k < nBuckets; k++) volumes[k] = 0; + + // Distribute each bar's volume uniformly across the buckets it spans. + for (var j = lo; j <= hi; j++) { + var bar = bars[j]; + var bH = bar.high !== undefined ? bar.high : bar.close; + var bL = bar.low !== undefined ? bar.low : bar.close; + var vol = bar.volume !== undefined && bar.volume !== null ? Number(bar.volume) : 0; + if (!isFinite(vol) || vol <= 0) continue; + if (bH === undefined || bL === undefined) continue; + var loIdx = Math.max(0, Math.min(nBuckets - 1, Math.floor((bL - minP) / step))); + var hiIdx = Math.max(0, Math.min(nBuckets - 1, Math.floor((bH - minP) / step))); + var span = hiIdx - loIdx + 1; + var share = vol / span; + for (var bi = loIdx; bi <= hiIdx; bi++) volumes[bi] += share; + } + + var profile = []; + for (var p = 0; p < nBuckets; p++) { + // Bucket price = centre of the bucket + profile.push({ price: minP + step * (p + 0.5), vol: volumes[p] }); + } + + return { + time: bars[lo].time, + profile: profile, + width: hi - lo + 1, + minPrice: minP, + maxPrice: maxP, + }; +} + +/** Build an ISeriesPrimitive that renders the volume profile histogram. */ +function _tvMakeVolumeProfilePrimitive(chartId, seriesId, getData) { + var _requestUpdate = null; + var _cache = { + x: null, + top: null, + columnHeight: 0, + barWidth: 6, + items: [], + }; + + function updateCache() { + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry || !entry.chart) return; + var series = entry.seriesMap[seriesId]; + if (!series) return; + var vp = getData(); + if (!vp || !vp.profile || vp.profile.length < 2) { + _cache.x = null; + return; + } + var timeScale = entry.chart.timeScale(); + _cache.x = timeScale.timeToCoordinate(vp.time); + var bs = (timeScale.options && timeScale.options().barSpacing) || 6; + _cache.barWidth = bs * vp.width; + + var y1 = series.priceToCoordinate(vp.profile[0].price); + var y2 = series.priceToCoordinate(vp.profile[1].price); + if (y1 === null || y2 === null) { + _cache.x = null; + return; + } + _cache.columnHeight = Math.max(1, y1 - y2); + _cache.top = y1; + + var maxVol = 0; + for (var i = 0; i < vp.profile.length; i++) { + if (vp.profile[i].vol > maxVol) maxVol = vp.profile[i].vol; + } + if (maxVol <= 0) { + _cache.x = null; + return; + } + _cache.items = vp.profile.map(function(row) { + return { + y: series.priceToCoordinate(row.price), + width: _cache.barWidth * row.vol / maxVol, + }; + }); + } + + var renderer = { + draw: function(target) { + target.useBitmapCoordinateSpace(function(scope) { + if (_cache.x === null || _cache.top === null) return; + var ctx = scope.context; + var horiz = _tvPositionsBox(_cache.x, _cache.x + _cache.barWidth, scope.horizontalPixelRatio); + var vert = _tvPositionsBox( + _cache.top, + _cache.top - _cache.columnHeight * _cache.items.length, + scope.verticalPixelRatio + ); + + // Background rectangle (translucent bounding box of the histogram) + ctx.fillStyle = 'rgba(80, 130, 220, 0.12)'; + ctx.fillRect(horiz.position, vert.position, horiz.length, vert.length); + + // Histogram bars + ctx.fillStyle = 'rgba(80, 130, 220, 0.75)'; + for (var i = 0; i < _cache.items.length; i++) { + var row = _cache.items[i]; + if (row.y === null) continue; + var rv = _tvPositionsBox(row.y, row.y - _cache.columnHeight, scope.verticalPixelRatio); + var rh = _tvPositionsBox(_cache.x, _cache.x + row.width, scope.horizontalPixelRatio); + ctx.fillRect(rh.position, rv.position, rh.length, Math.max(1, rv.length - 2)); + } + }); + }, + }; + + var paneView = { + zOrder: function() { return 'top'; }, + renderer: function() { return renderer; }, + update: updateCache, + }; + + return { + attached: function(params) { _requestUpdate = params.requestUpdate; updateCache(); }, + detached: function() { _requestUpdate = null; }, + updateAllViews: updateCache, + paneViews: function() { return [paneView]; }, + triggerUpdate: function() { updateCache(); if (_requestUpdate) _requestUpdate(); }, + autoscaleInfo: function() { + var vp = getData(); + if (!vp) return null; + return { + priceRange: { + minValue: vp.minPrice, + maxValue: vp.maxPrice, + }, + }; + }, + }; +} + +/** Remove a volume-profile primitive by indicator id. */ +function _tvRemoveVolumeProfilePrimitive(indicatorId) { + var slot = _volumeProfilePrimitives[indicatorId]; + if (!slot) return; + var entry = window.__PYWRY_TVCHARTS__[slot.chartId]; + if (entry && entry.seriesMap[slot.seriesId] && slot.primitive) { + try { entry.seriesMap[slot.seriesId].detachPrimitive(slot.primitive); } catch (e) {} + } + delete _volumeProfilePrimitives[indicatorId]; +} + +/** Recompute all visible-range volume profiles on the given chart. */ +function _tvRefreshVisibleVolumeProfiles(chartId) { + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry || !entry.chart) return; + var timeScale = entry.chart.timeScale(); + var range = typeof timeScale.getVisibleLogicalRange === 'function' + ? timeScale.getVisibleLogicalRange() + : null; + var ids = Object.keys(_volumeProfilePrimitives); + for (var i = 0; i < ids.length; i++) { + var slot = _volumeProfilePrimitives[ids[i]]; + if (!slot || slot.chartId !== chartId || slot.mode !== 'visible') continue; + var ai = _activeIndicators[ids[i]]; + if (!ai) continue; + var bars = _tvSeriesRawData(entry, ai.sourceSeriesId || 'main'); + if (!bars || !bars.length) continue; + var fromIdx, toIdx; + if (range) { + fromIdx = Math.max(0, Math.floor(range.from)); + toIdx = Math.min(bars.length - 1, Math.ceil(range.to)); + } else { + fromIdx = 0; + toIdx = bars.length - 1; + } + var vp = _tvComputeVolumeProfile(bars, fromIdx, toIdx, slot.bucketCount); + if (!vp) continue; + slot.vpData = vp; + ai.anchorTime = vp.time; + ai.anchorWidth = vp.width; + if (slot.primitive && slot.primitive.triggerUpdate) slot.primitive.triggerUpdate(); + } +} + function _computeVWAP(data) { var result = []; var cumVol = 0, cumTP = 0; @@ -587,6 +816,11 @@ function _tvRemoveIndicator(seriesId) { var sinfo = _activeIndicators[sid]; if (!sinfo) continue; var sEntry = window.__PYWRY_TVCHARTS__[sinfo.chartId]; + // Primitive-only indicators (volume profile) don't have an entry in + // seriesMap — detach the primitive from the host series instead. + if (_volumeProfilePrimitives[sid]) { + _tvRemoveVolumeProfilePrimitive(sid); + } if (sEntry && sEntry.seriesMap[sid]) { try { sEntry.chart.removeSeries(sEntry.seriesMap[sid]); } catch(e) {} delete sEntry.seriesMap[sid]; diff --git a/pywry/pywry/frontend/src/tvchart/10-events.js b/pywry/pywry/frontend/src/tvchart/10-events.js index d9fefe6..4f64868 100644 --- a/pywry/pywry/frontend/src/tvchart/10-events.js +++ b/pywry/pywry/frontend/src/tvchart/10-events.js @@ -1052,6 +1052,8 @@ _multiplier: data.multiplier || undefined, _maType: data.maType || undefined, _offset: data.offset || undefined, + _fromIndex: data.fromIndex, + _toIndex: data.toIndex, }; _tvAddIndicator(def, chartId); }); diff --git a/pywry/pywry/tvchart/mixin.py b/pywry/pywry/tvchart/mixin.py index 28f6e06..4c68f80 100644 --- a/pywry/pywry/tvchart/mixin.py +++ b/pywry/pywry/tvchart/mixin.py @@ -9,7 +9,7 @@ import logging -from typing import TYPE_CHECKING, Any +from typing import TYPE_CHECKING, Any, Literal from ..state_mixins import EmittingWidget @@ -248,7 +248,8 @@ def add_builtin_indicator( Available indicators (by name): SMA, EMA, WMA, SMA (50), SMA (200), EMA (12), EMA (26), - RSI, ATR, VWAP, Volume SMA, Bollinger Bands + RSI, ATR, VWAP, Volume SMA, Bollinger Bands, + Volume Profile Fixed Range, Volume Profile Visible Range Parameters ---------- @@ -292,6 +293,45 @@ def add_builtin_indicator( payload["chartId"] = chart_id self.emit("tvchart:add-indicator", payload) + def add_volume_profile( + self, + mode: Literal["fixed", "visible"] = "visible", + *, + bucket_count: int = 24, + from_index: int | None = None, + to_index: int | None = None, + chart_id: str | None = None, + ) -> None: + """Add a Volume Profile histogram overlay to the main price pane. + + Draws a horizontal volume-by-price histogram using the TradingView + Lightweight Charts series-primitive API (ported from the upstream + ``plugin-examples/src/plugins/volume-profile`` example). + + Parameters + ---------- + mode : {"fixed", "visible"} + ``"fixed"`` anchors the histogram to a specific bar-index + range (``from_index`` / ``to_index``). ``"visible"`` anchors + it to the current viewport and recomputes on every pan/zoom. + bucket_count : int + Number of price buckets (default 24). + from_index, to_index : int, optional + Inclusive bar-index bounds for fixed mode. Ignored when + ``mode="visible"``. If omitted under fixed mode, defaults + to the last 20% of bars. + chart_id : str, optional + Target chart instance ID. + """ + name = "Volume Profile Fixed Range" if mode == "fixed" else "Volume Profile Visible Range" + payload: dict[str, Any] = {"name": name, "period": int(bucket_count)} + if mode == "fixed" and from_index is not None and to_index is not None: + payload["fromIndex"] = int(from_index) + payload["toIndex"] = int(to_index) + if chart_id is not None: + payload["chartId"] = chart_id + self.emit("tvchart:add-indicator", payload) + def remove_builtin_indicator( self, series_id: str, From 074ef06e04883d318d2c7e81fa5544f8bf8bafb9 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 19:51:46 -0700 Subject: [PATCH 46/68] tvchart: VPVR/VPFR rewrite + 13 new indicators MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Volume Profile: replace upstream time-anchored port with proper VPVR/VPFR — horizontal rows pinned to the pane edge (right by default), bar length proportional to net volume at each price bucket, split into up-volume / down-volume by bar direction, POC line, and 70%-volume Value Area colouring. New indicators: - Moving Averages: HMA, VWMA, Ichimoku Cloud - Volatility: Keltner Channels, Historical Volatility - Trend: Parabolic SAR - Momentum: MACD, Stochastic, Williams %R, CCI, ADX, Aroon - Volume: Accumulation/Distribution Multi-line indicators (MACD, Stochastic, Aroon, ADX) share a subplot pane and a group id so they remove together. Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/pywry/frontend/src/tvchart/04-series.js | 225 +++++- .../frontend/src/tvchart/05-lifecycle.js | 2 + .../pywry/frontend/src/tvchart/06-storage.js | 2 + .../frontend/src/tvchart/09-indicators.js | 704 +++++++++++++++--- pywry/pywry/frontend/src/tvchart/10-events.js | 25 + pywry/pywry/tvchart/mixin.py | 58 +- 6 files changed, 902 insertions(+), 114 deletions(-) diff --git a/pywry/pywry/frontend/src/tvchart/04-series.js b/pywry/pywry/frontend/src/tvchart/04-series.js index b6ab054..2ae3487 100644 --- a/pywry/pywry/frontend/src/tvchart/04-series.js +++ b/pywry/pywry/frontend/src/tvchart/04-series.js @@ -1390,6 +1390,12 @@ function _tvAddIndicator(indicatorDef, chartId) { type: name.toLowerCase(), period: maPeriod }, 2, false); + } else if (name === 'HMA') { + var hmaPeriod = period || 9; + addSingleSeriesIndicator('hma', _computeHMA(rawData, hmaPeriod), { type: 'hma', period: hmaPeriod }, 2, false); + } else if (name === 'VWMA') { + var vwmaPeriod = period || 20; + addSingleSeriesIndicator('vwma', _computeVWMA(rawData, vwmaPeriod), { type: 'vwma', period: vwmaPeriod }, 2, false); } else if (name === 'SMA (50)') { addSingleSeriesIndicator('sma_50', _computeSMA(rawData, 50), { type: 'sma', period: 50 }, 2, false); } else if (name === 'SMA (200)') { @@ -1450,25 +1456,206 @@ function _tvAddIndicator(indicatorDef, chartId) { var volSmaPeriod = period || 20; var volSmaData = _computeSMA(rawData, volSmaPeriod, 'volume'); addSingleSeriesIndicator('volsma', volSmaData, { type: 'volume-sma', period: volSmaPeriod }, 1, false); + } else if (name === 'Accumulation/Distribution') { + addSingleSeriesIndicator('ad', _computeAccumulationDistribution(rawData), { type: 'accumulation-distribution', period: 0 }, 2, true); + } else if (name === 'Williams %R') { + var wrPeriod = period || 14; + addSingleSeriesIndicator('williams_r', _computeWilliamsR(rawData, wrPeriod), { type: 'williams-r', period: wrPeriod }, 2, true); + } else if (name === 'CCI') { + var cciPeriod = period || 20; + addSingleSeriesIndicator('cci', _computeCCI(rawData, cciPeriod), { type: 'cci', period: cciPeriod }, 2, true); + } else if (name === 'Historical Volatility') { + var hvPeriod = period || 10; + var hvAnn = indicatorDef._annualization || 252; + addSingleSeriesIndicator('hv', _computeHistoricalVolatility(rawData, hvPeriod, hvAnn), { type: 'historical-volatility', period: hvPeriod, annualization: hvAnn }, 2, true); + } else if (name === 'Parabolic SAR') { + var psStep = indicatorDef._step || 0.02; + var psMax = indicatorDef._maxStep || 0.2; + var psColor = indicatorDef._color || '#ff9800'; + var psScaleId = _tvResolveScalePlacement(entry); + var psSeries = entry.chart.addSeries(LightweightCharts.LineSeries, { + color: psColor, + lineWidth: 1, + lineStyle: 3, // dotted — SAR is conventionally drawn as dots + pointMarkersVisible: true, + pointMarkersRadius: 2, + priceScaleId: psScaleId, + lastValueVisible: false, + priceLineVisible: false, + }); + psSeries.setData(_computeParabolicSAR(rawData, psStep, psMax).filter(function(v) { return v.value !== undefined; })); + var psId = 'ind_parabolic_sar_' + Date.now(); + entry.seriesMap[psId] = psSeries; + _activeIndicators[psId] = { + name: 'Parabolic SAR', period: 0, chartId: chartId, color: psColor, paneIndex: 0, + isSubplot: false, type: 'parabolic-sar', sourceSeriesId: primarySeriesId, + step: psStep, maxStep: psMax, + }; + } else if (name === 'MACD') { + var macdFast = indicatorDef._fast || 12; + var macdSlow = indicatorDef._slow || 26; + var macdSignal = indicatorDef._signal || 9; + var macd = _computeMACD(rawData, macdFast, macdSlow, macdSignal); + if (!entry._nextPane) entry._nextPane = 1; + var macdPane = entry._nextPane++; + var macdColor = '#2196f3', sigColor = '#ff9800', histPosColor = 'rgba(76,175,80,0.6)', histNegColor = 'rgba(239,83,80,0.6)'; + var histData = macd.histogram.filter(function(v) { return v.value !== undefined; }).map(function(v) { + return { time: v.time, value: v.value, color: v.value >= 0 ? histPosColor : histNegColor }; + }); + var sHist, sMACD, sSig; + try { + sHist = entry.chart.addSeries(LightweightCharts.HistogramSeries, { priceLineVisible: false, lastValueVisible: false }, macdPane); + sMACD = entry.chart.addSeries(LightweightCharts.LineSeries, { color: macdColor, lineWidth: 2, priceLineVisible: false }, macdPane); + sSig = entry.chart.addSeries(LightweightCharts.LineSeries, { color: sigColor, lineWidth: 2, priceLineVisible: false }, macdPane); + } catch (e) { + console.error('[pywry:tvchart] MACD: unable to allocate subplot pane', e); + return; + } + sHist.setData(histData); + sMACD.setData(macd.macd.filter(function(v) { return v.value !== undefined; })); + sSig.setData(macd.signal.filter(function(v) { return v.value !== undefined; })); + var macdGroup = 'macd_' + Date.now(); + var sidHist = 'ind_macd_hist_' + Date.now(); + var sidMACD = 'ind_macd_line_' + Date.now(); + var sidSig = 'ind_macd_signal_' + Date.now(); + entry.seriesMap[sidHist] = sHist; entry.seriesMap[sidMACD] = sMACD; entry.seriesMap[sidSig] = sSig; + var macdCommon = { period: macdFast, chartId: chartId, group: macdGroup, paneIndex: macdPane, isSubplot: true, type: 'macd', sourceSeriesId: primarySeriesId, fast: macdFast, slow: macdSlow, signal: macdSignal }; + _activeIndicators[sidHist] = _tvMerge(macdCommon, { name: 'MACD Histogram', color: histPosColor }); + _activeIndicators[sidMACD] = _tvMerge(macdCommon, { name: 'MACD', color: macdColor }); + _activeIndicators[sidSig] = _tvMerge(macdCommon, { name: 'MACD Signal', color: sigColor }); + } else if (name === 'Stochastic') { + var kPeriod = period || 14; + var dPeriod = indicatorDef._dPeriod || 3; + var stoch = _computeStochastic(rawData, kPeriod, dPeriod); + if (!entry._nextPane) entry._nextPane = 1; + var stochPane = entry._nextPane++; + var stochKColor = '#2196f3', stochDColor = '#ff9800'; + var sK, sD; + try { + sK = entry.chart.addSeries(LightweightCharts.LineSeries, { color: stochKColor, lineWidth: 2, priceLineVisible: false }, stochPane); + sD = entry.chart.addSeries(LightweightCharts.LineSeries, { color: stochDColor, lineWidth: 2, priceLineVisible: false }, stochPane); + } catch (e) { console.error('[pywry:tvchart] Stochastic: unable to allocate subplot pane', e); return; } + sK.setData(stoch.k.filter(function(v) { return v.value !== undefined; })); + sD.setData(stoch.d.filter(function(v) { return v.value !== undefined; })); + var stochGroup = 'stoch_' + Date.now(); + var sidK = 'ind_stoch_k_' + Date.now(); + var sidD = 'ind_stoch_d_' + Date.now(); + entry.seriesMap[sidK] = sK; entry.seriesMap[sidD] = sD; + var stochCommon = { period: kPeriod, chartId: chartId, group: stochGroup, paneIndex: stochPane, isSubplot: true, type: 'stochastic', sourceSeriesId: primarySeriesId, kPeriod: kPeriod, dPeriod: dPeriod }; + _activeIndicators[sidK] = _tvMerge(stochCommon, { name: 'Stoch %K', color: stochKColor }); + _activeIndicators[sidD] = _tvMerge(stochCommon, { name: 'Stoch %D', color: stochDColor }); + } else if (name === 'Aroon') { + var aroonPeriod = period || 14; + var aroon = _computeAroon(rawData, aroonPeriod); + if (!entry._nextPane) entry._nextPane = 1; + var aroonPane = entry._nextPane++; + var aroonUpColor = '#4caf50', aroonDownColor = '#f44336'; + var sUp, sDown; + try { + sUp = entry.chart.addSeries(LightweightCharts.LineSeries, { color: aroonUpColor, lineWidth: 2, priceLineVisible: false }, aroonPane); + sDown = entry.chart.addSeries(LightweightCharts.LineSeries, { color: aroonDownColor, lineWidth: 2, priceLineVisible: false }, aroonPane); + } catch (e) { console.error('[pywry:tvchart] Aroon: unable to allocate subplot pane', e); return; } + sUp.setData(aroon.up.filter(function(v) { return v.value !== undefined; })); + sDown.setData(aroon.down.filter(function(v) { return v.value !== undefined; })); + var aroonGroup = 'aroon_' + Date.now(); + var sidUp = 'ind_aroon_up_' + Date.now(); + var sidDown = 'ind_aroon_down_' + Date.now(); + entry.seriesMap[sidUp] = sUp; entry.seriesMap[sidDown] = sDown; + var aroonCommon = { period: aroonPeriod, chartId: chartId, group: aroonGroup, paneIndex: aroonPane, isSubplot: true, type: 'aroon', sourceSeriesId: primarySeriesId }; + _activeIndicators[sidUp] = _tvMerge(aroonCommon, { name: 'Aroon Up', color: aroonUpColor }); + _activeIndicators[sidDown] = _tvMerge(aroonCommon, { name: 'Aroon Down', color: aroonDownColor }); + } else if (name === 'ADX') { + var adxPeriod = period || 14; + var adx = _computeADX(rawData, adxPeriod); + if (!entry._nextPane) entry._nextPane = 1; + var adxPane = entry._nextPane++; + var adxColor = '#2196f3', plusDIColor = '#4caf50', minusDIColor = '#f44336'; + var sAdx, sPlus, sMinus; + try { + sAdx = entry.chart.addSeries(LightweightCharts.LineSeries, { color: adxColor, lineWidth: 2, priceLineVisible: false }, adxPane); + sPlus = entry.chart.addSeries(LightweightCharts.LineSeries, { color: plusDIColor, lineWidth: 1, priceLineVisible: false }, adxPane); + sMinus = entry.chart.addSeries(LightweightCharts.LineSeries, { color: minusDIColor, lineWidth: 1, priceLineVisible: false }, adxPane); + } catch (e) { console.error('[pywry:tvchart] ADX: unable to allocate subplot pane', e); return; } + sAdx.setData(adx.adx.filter(function(v) { return v.value !== undefined; })); + sPlus.setData(adx.plusDI.filter(function(v) { return v.value !== undefined; })); + sMinus.setData(adx.minusDI.filter(function(v) { return v.value !== undefined; })); + var adxGroup = 'adx_' + Date.now(); + var sidAdx = 'ind_adx_' + Date.now(); + var sidPlus = 'ind_adx_plus_' + Date.now(); + var sidMinus = 'ind_adx_minus_' + Date.now(); + entry.seriesMap[sidAdx] = sAdx; entry.seriesMap[sidPlus] = sPlus; entry.seriesMap[sidMinus] = sMinus; + var adxCommon = { period: adxPeriod, chartId: chartId, group: adxGroup, paneIndex: adxPane, isSubplot: true, type: 'adx', sourceSeriesId: primarySeriesId }; + _activeIndicators[sidAdx] = _tvMerge(adxCommon, { name: 'ADX', color: adxColor }); + _activeIndicators[sidPlus] = _tvMerge(adxCommon, { name: '+DI', color: plusDIColor }); + _activeIndicators[sidMinus] = _tvMerge(adxCommon, { name: '-DI', color: minusDIColor }); + } else if (name === 'Keltner Channels') { + var kcPeriod = period || 20; + var kcMult = indicatorDef._multiplier || 2; + var kcMaType = indicatorDef._maType || 'EMA'; + var kc = _computeKeltnerChannels(rawData, kcPeriod, kcMult, kcMaType); + var kcScaleId = _tvResolveScalePlacement(entry); + var kcMidColor = '#ff9800', kcBandColor = '#2196f3'; + var kcM = entry.chart.addSeries(LightweightCharts.LineSeries, { color: kcMidColor, lineWidth: 1, priceScaleId: kcScaleId, lastValueVisible: false, priceLineVisible: false }); + var kcU = entry.chart.addSeries(LightweightCharts.LineSeries, { color: kcBandColor, lineWidth: 1, priceScaleId: kcScaleId, lastValueVisible: false, priceLineVisible: false }); + var kcL = entry.chart.addSeries(LightweightCharts.LineSeries, { color: kcBandColor, lineWidth: 1, priceScaleId: kcScaleId, lastValueVisible: false, priceLineVisible: false }); + kcM.setData(kc.middle.filter(function(v) { return v.value !== undefined; })); + kcU.setData(kc.upper.filter(function(v) { return v.value !== undefined; })); + kcL.setData(kc.lower.filter(function(v) { return v.value !== undefined; })); + var sidKcM = 'ind_kc_mid_' + Date.now(); + var sidKcU = 'ind_kc_upper_' + Date.now(); + var sidKcL = 'ind_kc_lower_' + Date.now(); + entry.seriesMap[sidKcM] = kcM; entry.seriesMap[sidKcU] = kcU; entry.seriesMap[sidKcL] = kcL; + var kcGroup = 'kc_' + Date.now(); + var kcCommon = { period: kcPeriod, chartId: chartId, group: kcGroup, paneIndex: 0, isSubplot: false, multiplier: kcMult, maType: kcMaType, type: 'keltner-channels', sourceSeriesId: primarySeriesId }; + _activeIndicators[sidKcM] = _tvMerge(kcCommon, { name: 'KC Basis', color: kcMidColor }); + _activeIndicators[sidKcU] = _tvMerge(kcCommon, { name: 'KC Upper', color: kcBandColor }); + _activeIndicators[sidKcL] = _tvMerge(kcCommon, { name: 'KC Lower', color: kcBandColor }); + } else if (name === 'Ichimoku Cloud') { + var ichiTen = indicatorDef._tenkan || 9; + var ichiKij = indicatorDef._kijun || period || 26; + var ichiSpB = indicatorDef._senkouB || 52; + var ichi = _computeIchimoku(rawData, ichiTen, ichiKij, ichiSpB); + var ichiScaleId = _tvResolveScalePlacement(entry); + var cTen = '#2196f3', cKij = '#f44336', cSpA = 'rgba(76,175,80,0.7)', cSpB = 'rgba(239,83,80,0.7)', cChi = '#9e9e9e'; + var sTen = entry.chart.addSeries(LightweightCharts.LineSeries, { color: cTen, lineWidth: 1, priceScaleId: ichiScaleId, lastValueVisible: false, priceLineVisible: false }); + var sKij = entry.chart.addSeries(LightweightCharts.LineSeries, { color: cKij, lineWidth: 1, priceScaleId: ichiScaleId, lastValueVisible: false, priceLineVisible: false }); + var sSpA = entry.chart.addSeries(LightweightCharts.LineSeries, { color: cSpA, lineWidth: 1, priceScaleId: ichiScaleId, lastValueVisible: false, priceLineVisible: false }); + var sSpB = entry.chart.addSeries(LightweightCharts.LineSeries, { color: cSpB, lineWidth: 1, priceScaleId: ichiScaleId, lastValueVisible: false, priceLineVisible: false }); + var sChi = entry.chart.addSeries(LightweightCharts.LineSeries, { color: cChi, lineWidth: 1, lineStyle: 2, priceScaleId: ichiScaleId, lastValueVisible: false, priceLineVisible: false }); + sTen.setData(ichi.tenkan.filter(function(v) { return v.value !== undefined; })); + sKij.setData(ichi.kijun.filter(function(v) { return v.value !== undefined; })); + sSpA.setData(ichi.spanA.filter(function(v) { return v.value !== undefined; })); + sSpB.setData(ichi.spanB.filter(function(v) { return v.value !== undefined; })); + sChi.setData(ichi.chikou.filter(function(v) { return v.value !== undefined; })); + var sidTen = 'ind_ichi_tenkan_' + Date.now(); + var sidKij = 'ind_ichi_kijun_' + Date.now(); + var sidSpA = 'ind_ichi_spanA_' + Date.now(); + var sidSpB = 'ind_ichi_spanB_' + Date.now(); + var sidChi = 'ind_ichi_chikou_' + Date.now(); + entry.seriesMap[sidTen] = sTen; entry.seriesMap[sidKij] = sKij; + entry.seriesMap[sidSpA] = sSpA; entry.seriesMap[sidSpB] = sSpB; + entry.seriesMap[sidChi] = sChi; + var ichiGroup = 'ichi_' + Date.now(); + var ichiCommon = { period: ichiKij, chartId: chartId, group: ichiGroup, paneIndex: 0, isSubplot: false, type: 'ichimoku', sourceSeriesId: primarySeriesId, tenkan: ichiTen, kijun: ichiKij, senkouB: ichiSpB }; + _activeIndicators[sidTen] = _tvMerge(ichiCommon, { name: 'Ichimoku Tenkan', color: cTen }); + _activeIndicators[sidKij] = _tvMerge(ichiCommon, { name: 'Ichimoku Kijun', color: cKij }); + _activeIndicators[sidSpA] = _tvMerge(ichiCommon, { name: 'Ichimoku Span A', color: cSpA }); + _activeIndicators[sidSpB] = _tvMerge(ichiCommon, { name: 'Ichimoku Span B', color: cSpB }); + _activeIndicators[sidChi] = _tvMerge(ichiCommon, { name: 'Ichimoku Chikou', color: cChi }); } else if (key === 'volume-profile-fixed' || key === 'volume-profile-visible') { var vpMode = key === 'volume-profile-fixed' ? 'fixed' : 'visible'; var vpBuckets = Math.max(2, Math.floor(period || 24)); var vpFromIdx, vpToIdx; if (vpMode === 'fixed') { - // Fixed anchor: prefer caller-supplied _fromTime/_toTime; default to - // the last 20% of bars so the histogram is visible immediately. if (indicatorDef._fromIndex != null && indicatorDef._toIndex != null) { vpFromIdx = Math.max(0, Math.floor(indicatorDef._fromIndex)); vpToIdx = Math.min(rawData.length - 1, Math.floor(indicatorDef._toIndex)); } else { - var defaultWidth = Math.max(20, Math.floor(rawData.length * 0.2)); - vpFromIdx = Math.max(0, rawData.length - defaultWidth); + vpFromIdx = 0; vpToIdx = rawData.length - 1; } } else { - // Visible range: initial anchor covers everything; refresh hook - // will narrow it on the next visible-range-change event. var vr = null; try { vr = entry.chart.timeScale().getVisibleLogicalRange(); } catch (e) {} if (vr) { @@ -1487,17 +1674,33 @@ function _tvAddIndicator(indicatorDef, chartId) { } var vpId = 'ind_vp_' + vpMode + '_' + Date.now(); + var vpOpts = { + widthPercent: indicatorDef._widthPercent || 25, + placement: indicatorDef._placement || 'right', + upColor: indicatorDef._upColor || 'rgba(38, 166, 154, 0.55)', + downColor: indicatorDef._downColor || 'rgba(239, 83, 80, 0.55)', + vaUpColor: indicatorDef._vaUpColor || 'rgba(38, 166, 154, 0.85)', + vaDownColor: indicatorDef._vaDownColor || 'rgba(239, 83, 80, 0.85)', + pocColor: indicatorDef._pocColor || '#ffffff', + showPOC: indicatorDef._showPOC !== false, + showValueArea: indicatorDef._showValueArea !== false, + valueAreaPct: indicatorDef._valueAreaPct || 0.70, + }; var vpSlot = { chartId: chartId, seriesId: primarySeriesId, mode: vpMode, bucketCount: vpBuckets, vpData: vpData, + opts: vpOpts, primitive: null, }; - vpSlot.primitive = _tvMakeVolumeProfilePrimitive(chartId, primarySeriesId, function() { - return vpSlot.vpData; - }); + vpSlot.primitive = _tvMakeVolumeProfilePrimitive( + chartId, + primarySeriesId, + function() { return vpSlot.vpData; }, + function() { return vpSlot.opts; } + ); try { entry.seriesMap[primarySeriesId].attachPrimitive(vpSlot.primitive); } catch (e) { @@ -1518,10 +1721,10 @@ function _tvAddIndicator(indicatorDef, chartId) { secondarySeriesId: null, mode: vpMode, bucketCount: vpBuckets, - anchorTime: vpData.time, - anchorWidth: vpData.width, fromIndex: vpFromIdx, toIndex: vpToIdx, + widthPercent: vpOpts.widthPercent, + placement: vpOpts.placement, }; } else { console.error('[pywry:tvchart] Unknown indicator:', name, 'key:', key); diff --git a/pywry/pywry/frontend/src/tvchart/05-lifecycle.js b/pywry/pywry/frontend/src/tvchart/05-lifecycle.js index c80a348..fdfb457 100644 --- a/pywry/pywry/frontend/src/tvchart/05-lifecycle.js +++ b/pywry/pywry/frontend/src/tvchart/05-lifecycle.js @@ -1051,6 +1051,8 @@ function _tvExportLayout(chartId) { if (ai.bucketCount != null) indEntry.bucketCount = ai.bucketCount; if (ai.fromIndex != null) indEntry.fromIndex = ai.fromIndex; if (ai.toIndex != null) indEntry.toIndex = ai.toIndex; + if (ai.widthPercent != null) indEntry.widthPercent = ai.widthPercent; + if (ai.placement) indEntry.placement = ai.placement; indicators.push(indEntry); } } diff --git a/pywry/pywry/frontend/src/tvchart/06-storage.js b/pywry/pywry/frontend/src/tvchart/06-storage.js index 8d2571c..216a8d9 100644 --- a/pywry/pywry/frontend/src/tvchart/06-storage.js +++ b/pywry/pywry/frontend/src/tvchart/06-storage.js @@ -1073,6 +1073,8 @@ function _tvApplyLayout(chartId, layout) { _color: ind.color || undefined, _fromIndex: ind.fromIndex != null ? ind.fromIndex : undefined, _toIndex: ind.toIndex != null ? ind.toIndex : undefined, + _widthPercent: ind.widthPercent != null ? ind.widthPercent : undefined, + _placement: ind.placement || undefined, }, chartId); } diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators.js b/pywry/pywry/frontend/src/tvchart/09-indicators.js index 3838eb0..a580e05 100644 --- a/pywry/pywry/frontend/src/tvchart/09-indicators.js +++ b/pywry/pywry/frontend/src/tvchart/09-indicators.js @@ -46,15 +46,28 @@ var _INDICATOR_CATALOG = [ { name: 'SMA', fullName: 'Simple Moving Average', category: 'Moving Averages', defaultPeriod: 20 }, { name: 'EMA', fullName: 'Exponential Moving Average', category: 'Moving Averages', defaultPeriod: 20 }, { name: 'WMA', fullName: 'Weighted Moving Average', category: 'Moving Averages', defaultPeriod: 20 }, + { name: 'HMA', fullName: 'Hull Moving Average', category: 'Moving Averages', defaultPeriod: 9 }, + { name: 'VWMA', fullName: 'Volume-Weighted Moving Average', category: 'Moving Averages', defaultPeriod: 20 }, { name: 'SMA (50)', fullName: 'Simple Moving Average (50)', category: 'Moving Averages', defaultPeriod: 50 }, { name: 'SMA (200)', fullName: 'Simple Moving Average (200)', category: 'Moving Averages', defaultPeriod: 200 }, { name: 'EMA (12)', fullName: 'Exponential Moving Average (12)', category: 'Moving Averages', defaultPeriod: 12 }, { name: 'EMA (26)', fullName: 'Exponential Moving Average (26)', category: 'Moving Averages', defaultPeriod: 26 }, + { name: 'Ichimoku Cloud', fullName: 'Ichimoku Kinko Hyo', category: 'Moving Averages', defaultPeriod: 26 }, { name: 'Bollinger Bands', fullName: 'Bollinger Bands', category: 'Volatility', defaultPeriod: 20 }, - { name: 'RSI', fullName: 'Relative Strength Index', category: 'Momentum', defaultPeriod: 14 }, + { name: 'Keltner Channels', fullName: 'Keltner Channels', category: 'Volatility', defaultPeriod: 20 }, { name: 'ATR', fullName: 'Average True Range', category: 'Volatility', defaultPeriod: 14 }, + { name: 'Historical Volatility', fullName: 'Historical Volatility', category: 'Volatility', defaultPeriod: 10, subplot: true }, + { name: 'Parabolic SAR', fullName: 'Parabolic Stop and Reverse', category: 'Trend', defaultPeriod: 0 }, + { name: 'RSI', fullName: 'Relative Strength Index', category: 'Momentum', defaultPeriod: 14, subplot: true }, + { name: 'MACD', fullName: 'Moving Average Convergence/Divergence', category: 'Momentum', defaultPeriod: 12, subplot: true }, + { name: 'Stochastic', fullName: 'Stochastic Oscillator', category: 'Momentum', defaultPeriod: 14, subplot: true }, + { name: 'Williams %R', fullName: 'Williams %R', category: 'Momentum', defaultPeriod: 14, subplot: true }, + { name: 'CCI', fullName: 'Commodity Channel Index', category: 'Momentum', defaultPeriod: 20, subplot: true }, + { name: 'ADX', fullName: 'Average Directional Index', category: 'Momentum', defaultPeriod: 14, subplot: true }, + { name: 'Aroon', fullName: 'Aroon Up/Down', category: 'Momentum', defaultPeriod: 14, subplot: true }, { name: 'VWAP', fullName: 'Volume Weighted Average Price', category: 'Volume', defaultPeriod: 0 }, { name: 'Volume SMA', fullName: 'Volume Simple Moving Average', category: 'Volume', defaultPeriod: 20 }, + { name: 'Accumulation/Distribution', fullName: 'Accumulation / Distribution Line', category: 'Volume', defaultPeriod: 0, subplot: true }, { key: 'volume-profile-fixed', name: 'Volume Profile Fixed Range', fullName: 'Volume Profile (Fixed Range)', category: 'Volume', defaultPeriod: 24, primitive: true }, { key: 'volume-profile-visible', name: 'Volume Profile Visible Range', fullName: 'Volume Profile (Visible Range)', category: 'Volume', defaultPeriod: 24, primitive: true }, ]; @@ -342,13 +355,13 @@ function _tvUpdateBBFill(chartId) { } // --------------------------------------------------------------------------- -// Volume Profile (port of tradingview/lightweight-charts volume-profile plugin) +// Volume Profile (VPVR / VPFR — volume-by-price histogram pinned to pane edge) // --------------------------------------------------------------------------- -// Per-chart registry: { [indicatorId]: { primitive, seriesId, mode, bucketCount, anchorTime, anchorWidth, vpData } } +// Per-chart registry: { [indicatorId]: { primitive, seriesId, mode, bucketCount, vpData, opts } } var _volumeProfilePrimitives = {}; -/** positionsBox — media→bitmap pixel alignment helper (ported from upstream plugin). */ +/** positionsBox — media→bitmap pixel alignment helper. */ function _tvPositionsBox(a, b, pixelRatio) { var lo = Math.min(a, b); var hi = Math.max(a, b); @@ -360,12 +373,18 @@ function _tvPositionsBox(a, b, pixelRatio) { } /** - * Bucket bars into a volume-by-price histogram. - * @param {Array} bars - OHLCV bar objects with {time, high, low, close, volume} + * Bucket bars into a volume-by-price histogram with up/down split. + * + * Net volume at each price level is computed by distributing each bar's + * volume uniformly across the buckets its (low..high) range spans. The + * volume is tagged as "up" when the bar closed at or above its open, + * "down" otherwise. + * + * @param {Array} bars - OHLCV bar objects with {time, open, high, low, close, volume} * @param {number} fromIdx - inclusive start index * @param {number} toIdx - inclusive end index * @param {number} bucketCount - number of price buckets - * @returns {{time, profile, width, minPrice, maxPrice}|null} + * @returns {{profile, minPrice, maxPrice, step, totalVolume}|null} */ function _tvComputeVolumeProfile(bars, fromIdx, toIdx, bucketCount) { if (!bars || !bars.length) return null; @@ -386,14 +405,16 @@ function _tvComputeVolumeProfile(bars, fromIdx, toIdx, bucketCount) { var nBuckets = Math.max(2, Math.floor(bucketCount || 24)); var step = (maxP - minP) / nBuckets; - var volumes = new Array(nBuckets); - for (var k = 0; k < nBuckets; k++) volumes[k] = 0; + var up = new Array(nBuckets), down = new Array(nBuckets); + for (var k = 0; k < nBuckets; k++) { up[k] = 0; down[k] = 0; } - // Distribute each bar's volume uniformly across the buckets it spans. + var totalVol = 0; for (var j = lo; j <= hi; j++) { var bar = bars[j]; var bH = bar.high !== undefined ? bar.high : bar.close; var bL = bar.low !== undefined ? bar.low : bar.close; + var bO = bar.open !== undefined ? bar.open : bar.close; + var bC = bar.close !== undefined ? bar.close : bar.value; var vol = bar.volume !== undefined && bar.volume !== null ? Number(bar.volume) : 0; if (!isFinite(vol) || vol <= 0) continue; if (bH === undefined || bL === undefined) continue; @@ -401,126 +422,184 @@ function _tvComputeVolumeProfile(bars, fromIdx, toIdx, bucketCount) { var hiIdx = Math.max(0, Math.min(nBuckets - 1, Math.floor((bH - minP) / step))); var span = hiIdx - loIdx + 1; var share = vol / span; - for (var bi = loIdx; bi <= hiIdx; bi++) volumes[bi] += share; + var isUp = bC !== undefined && bC >= bO; + for (var bi = loIdx; bi <= hiIdx; bi++) { + if (isUp) up[bi] += share; else down[bi] += share; + } + totalVol += vol; } var profile = []; for (var p = 0; p < nBuckets; p++) { - // Bucket price = centre of the bucket - profile.push({ price: minP + step * (p + 0.5), vol: volumes[p] }); + profile.push({ + price: minP + step * (p + 0.5), // centre of bucket + priceLo: minP + step * p, + priceHi: minP + step * (p + 1), + upVol: up[p], + downVol: down[p], + totalVol: up[p] + down[p], + }); } return { - time: bars[lo].time, profile: profile, - width: hi - lo + 1, minPrice: minP, maxPrice: maxP, + step: step, + totalVolume: totalVol, }; } -/** Build an ISeriesPrimitive that renders the volume profile histogram. */ -function _tvMakeVolumeProfilePrimitive(chartId, seriesId, getData) { +/** Compute the Point of Control (POC) and Value Area for a profile. */ +function _tvComputePOCAndValueArea(profile, totalVolume, valueAreaPct) { + if (!profile || !profile.length) return null; + var pocIdx = 0; + for (var i = 1; i < profile.length; i++) { + if (profile[i].totalVol > profile[pocIdx].totalVol) pocIdx = i; + } + var target = totalVolume * (valueAreaPct || 0.70); + var accumulated = profile[pocIdx].totalVol; + var loIdx = pocIdx, hiIdx = pocIdx; + while (accumulated < target && (loIdx > 0 || hiIdx < profile.length - 1)) { + var nextLow = loIdx > 0 ? profile[loIdx - 1].totalVol : -1; + var nextHigh = hiIdx < profile.length - 1 ? profile[hiIdx + 1].totalVol : -1; + if (nextLow < 0 && nextHigh < 0) break; + if (nextHigh >= nextLow) { + hiIdx += 1; + accumulated += profile[hiIdx].totalVol; + } else { + loIdx -= 1; + accumulated += profile[loIdx].totalVol; + } + } + return { pocIdx: pocIdx, vaLowIdx: loIdx, vaHighIdx: hiIdx }; +} + +/** + * Build an ISeriesPrimitive that renders the volume profile as horizontal + * rows pinned to one side of the price pane. Each row is a horizontal + * bar at a price bucket, split into up-volume (teal) and down-volume + * (pink), with a POC line and translucent value-area band overlay. + */ +function _tvMakeVolumeProfilePrimitive(chartId, seriesId, getData, getOpts) { var _requestUpdate = null; - var _cache = { - x: null, - top: null, - columnHeight: 0, - barWidth: 6, - items: [], - }; - function updateCache() { + function draw(scope) { var entry = window.__PYWRY_TVCHARTS__[chartId]; if (!entry || !entry.chart) return; var series = entry.seriesMap[seriesId]; if (!series) return; var vp = getData(); - if (!vp || !vp.profile || vp.profile.length < 2) { - _cache.x = null; - return; - } - var timeScale = entry.chart.timeScale(); - _cache.x = timeScale.timeToCoordinate(vp.time); - var bs = (timeScale.options && timeScale.options().barSpacing) || 6; - _cache.barWidth = bs * vp.width; - - var y1 = series.priceToCoordinate(vp.profile[0].price); - var y2 = series.priceToCoordinate(vp.profile[1].price); - if (y1 === null || y2 === null) { - _cache.x = null; - return; - } - _cache.columnHeight = Math.max(1, y1 - y2); - _cache.top = y1; + if (!vp || !vp.profile || !vp.profile.length) return; + var opts = (getOpts && getOpts()) || {}; + + var ctx = scope.context; + var paneW = scope.bitmapSize.width; + var paneH = scope.bitmapSize.height; + var hpr = scope.horizontalPixelRatio; + var vpr = scope.verticalPixelRatio; + + var widthPct = Math.max(5, Math.min(60, opts.widthPercent || 25)); // % of pane width + var placement = opts.placement === 'left' ? 'left' : 'right'; + var upColor = opts.upColor || 'rgba(38, 166, 154, 0.55)'; + var downColor = opts.downColor || 'rgba(239, 83, 80, 0.55)'; + var vaUpColor = opts.vaUpColor || 'rgba(38, 166, 154, 0.85)'; + var vaDownColor = opts.vaDownColor || 'rgba(239, 83, 80, 0.85)'; + var pocColor = opts.pocColor || '#ffffff'; + var showPOC = opts.showPOC !== false; + var showVA = opts.showValueArea !== false; + var valueAreaPct = opts.valueAreaPct || 0.70; var maxVol = 0; for (var i = 0; i < vp.profile.length; i++) { - if (vp.profile[i].vol > maxVol) maxVol = vp.profile[i].vol; + if (vp.profile[i].totalVol > maxVol) maxVol = vp.profile[i].totalVol; + } + if (maxVol <= 0) return; + + var poc = _tvComputePOCAndValueArea(vp.profile, vp.totalVolume, valueAreaPct); + + var maxBarBitmap = paneW * (widthPct / 100); + // Row half-height — half of the bucket's pixel span. We cap at + // a reasonable minimum so very dense profiles still render. + var y0 = series.priceToCoordinate(vp.profile[0].price); + var y1 = vp.profile.length > 1 ? series.priceToCoordinate(vp.profile[1].price) : null; + if (y0 === null) return; + var pxPerBucket = (y1 !== null) ? Math.abs(y0 - y1) : 4; + var rowHalfBitmap = Math.max(1, (pxPerBucket * vpr) / 2 - 1); + + // Draw rows + for (var r = 0; r < vp.profile.length; r++) { + var row = vp.profile[r]; + if (row.totalVol <= 0) continue; + var y = series.priceToCoordinate(row.price); + if (y === null) continue; + + var yBitmap = y * vpr; + var yTop = yBitmap - rowHalfBitmap; + var rowHeight = Math.max(1, rowHalfBitmap * 2 - 2); + + var barLenBitmap = maxBarBitmap * (row.totalVol / maxVol) * hpr; + var upRatio = row.totalVol > 0 ? row.upVol / row.totalVol : 0; + var upLen = barLenBitmap * upRatio; + var downLen = barLenBitmap - upLen; + + var inValueArea = poc && r >= poc.vaLowIdx && r <= poc.vaHighIdx; + var curUp = inValueArea && showVA ? vaUpColor : upColor; + var curDown = inValueArea && showVA ? vaDownColor : downColor; + + // Up volume is drawn on the "inner" side (nearest price axis), + // down on the "outer" side. For right placement, inner = right. + if (placement === 'right') { + var rightEdge = paneW * hpr; + ctx.fillStyle = curUp; + ctx.fillRect(rightEdge - upLen, yTop, upLen, rowHeight); + ctx.fillStyle = curDown; + ctx.fillRect(rightEdge - upLen - downLen, yTop, downLen, rowHeight); + } else { + ctx.fillStyle = curUp; + ctx.fillRect(0, yTop, upLen, rowHeight); + ctx.fillStyle = curDown; + ctx.fillRect(upLen, yTop, downLen, rowHeight); + } } - if (maxVol <= 0) { - _cache.x = null; - return; + + // POC line: horizontal dashed line at the price level with the + // highest volume, spanning the full pane width. + if (showPOC && poc) { + var pocPrice = vp.profile[poc.pocIdx].price; + var pocY = series.priceToCoordinate(pocPrice); + if (pocY !== null) { + ctx.save(); + ctx.strokeStyle = pocColor; + ctx.lineWidth = Math.max(1, Math.round(vpr)); + ctx.setLineDash([4 * hpr, 3 * hpr]); + ctx.beginPath(); + ctx.moveTo(0, pocY * vpr); + ctx.lineTo(paneW * hpr, pocY * vpr); + ctx.stroke(); + ctx.restore(); + } } - _cache.items = vp.profile.map(function(row) { - return { - y: series.priceToCoordinate(row.price), - width: _cache.barWidth * row.vol / maxVol, - }; - }); } var renderer = { draw: function(target) { - target.useBitmapCoordinateSpace(function(scope) { - if (_cache.x === null || _cache.top === null) return; - var ctx = scope.context; - var horiz = _tvPositionsBox(_cache.x, _cache.x + _cache.barWidth, scope.horizontalPixelRatio); - var vert = _tvPositionsBox( - _cache.top, - _cache.top - _cache.columnHeight * _cache.items.length, - scope.verticalPixelRatio - ); - - // Background rectangle (translucent bounding box of the histogram) - ctx.fillStyle = 'rgba(80, 130, 220, 0.12)'; - ctx.fillRect(horiz.position, vert.position, horiz.length, vert.length); - - // Histogram bars - ctx.fillStyle = 'rgba(80, 130, 220, 0.75)'; - for (var i = 0; i < _cache.items.length; i++) { - var row = _cache.items[i]; - if (row.y === null) continue; - var rv = _tvPositionsBox(row.y, row.y - _cache.columnHeight, scope.verticalPixelRatio); - var rh = _tvPositionsBox(_cache.x, _cache.x + row.width, scope.horizontalPixelRatio); - ctx.fillRect(rh.position, rv.position, rh.length, Math.max(1, rv.length - 2)); - } - }); + target.useBitmapCoordinateSpace(draw); }, }; var paneView = { zOrder: function() { return 'top'; }, renderer: function() { return renderer; }, - update: updateCache, + update: function() {}, }; return { - attached: function(params) { _requestUpdate = params.requestUpdate; updateCache(); }, + attached: function(params) { _requestUpdate = params.requestUpdate; }, detached: function() { _requestUpdate = null; }, - updateAllViews: updateCache, + updateAllViews: function() {}, paneViews: function() { return [paneView]; }, - triggerUpdate: function() { updateCache(); if (_requestUpdate) _requestUpdate(); }, - autoscaleInfo: function() { - var vp = getData(); - if (!vp) return null; - return { - priceRange: { - minValue: vp.minPrice, - maxValue: vp.maxPrice, - }, - }; - }, + triggerUpdate: function() { if (_requestUpdate) _requestUpdate(); }, }; } @@ -562,8 +641,8 @@ function _tvRefreshVisibleVolumeProfiles(chartId) { var vp = _tvComputeVolumeProfile(bars, fromIdx, toIdx, slot.bucketCount); if (!vp) continue; slot.vpData = vp; - ai.anchorTime = vp.time; - ai.anchorWidth = vp.width; + ai.fromIndex = fromIdx; + ai.toIndex = toIdx; if (slot.primitive && slot.primitive.triggerUpdate) slot.primitive.triggerUpdate(); } } @@ -584,6 +663,447 @@ function _computeVWAP(data) { return result; } +// --------------------------------------------------------------------------- +// Additional built-in indicators (textbook formulas) +// --------------------------------------------------------------------------- + +/** Volume-Weighted Moving Average: sum(close*vol) / sum(vol) over a window. */ +function _computeVWMA(data, period) { + var result = []; + for (var i = 0; i < data.length; i++) { + if (i < period - 1) { result.push({ time: data[i].time }); continue; } + var numer = 0, denom = 0; + for (var j = i - period + 1; j <= i; j++) { + var c = data[j].close !== undefined ? data[j].close : data[j].value || 0; + var v = data[j].volume || 0; + numer += c * v; + denom += v; + } + result.push({ time: data[i].time, value: denom > 0 ? numer / denom : undefined }); + } + return result; +} + +/** Hull Moving Average: WMA(2 * WMA(src, n/2) - WMA(src, n), sqrt(n)). */ +function _computeHMA(data, period) { + var half = Math.max(1, Math.floor(period / 2)); + var sqrtN = Math.max(1, Math.floor(Math.sqrt(period))); + var wmaHalf = _computeWMA(data, half); + var wmaFull = _computeWMA(data, period); + var diff = []; + for (var i = 0; i < data.length; i++) { + var a = wmaHalf[i].value; + var b = wmaFull[i].value; + diff.push({ + time: data[i].time, + value: (a !== undefined && b !== undefined) ? (2 * a - b) : undefined, + }); + } + return _computeWMA(diff, sqrtN, 'value'); +} + +/** Commodity Channel Index: (TP - SMA(TP, n)) / (0.015 * meanDev(TP, n)). */ +function _computeCCI(data, period) { + var tp = []; + for (var i = 0; i < data.length; i++) { + var h = data[i].high !== undefined ? data[i].high : data[i].close; + var l = data[i].low !== undefined ? data[i].low : data[i].close; + var c = data[i].close !== undefined ? data[i].close : data[i].value || 0; + tp.push({ time: data[i].time, value: (h + l + c) / 3 }); + } + var sma = _computeSMA(tp, period, 'value'); + var result = []; + for (var k = 0; k < tp.length; k++) { + if (k < period - 1 || sma[k].value === undefined) { + result.push({ time: tp[k].time }); + continue; + } + var mean = sma[k].value; + var dev = 0; + for (var j = k - period + 1; j <= k; j++) { + dev += Math.abs(tp[j].value - mean); + } + dev /= period; + result.push({ + time: tp[k].time, + value: dev > 0 ? (tp[k].value - mean) / (0.015 * dev) : 0, + }); + } + return result; +} + +/** Williams %R: -100 * (highestHigh - close) / (highestHigh - lowestLow). */ +function _computeWilliamsR(data, period) { + var result = []; + for (var i = 0; i < data.length; i++) { + if (i < period - 1) { result.push({ time: data[i].time }); continue; } + var hh = -Infinity, ll = Infinity; + for (var j = i - period + 1; j <= i; j++) { + var h = data[j].high !== undefined ? data[j].high : data[j].close; + var l = data[j].low !== undefined ? data[j].low : data[j].close; + if (h > hh) hh = h; + if (l < ll) ll = l; + } + var c = data[i].close !== undefined ? data[i].close : data[i].value || 0; + var range = hh - ll; + result.push({ + time: data[i].time, + value: range > 0 ? -100 * (hh - c) / range : 0, + }); + } + return result; +} + +/** Stochastic Oscillator %K and %D. */ +function _computeStochastic(data, kPeriod, dPeriod) { + var kRaw = []; + for (var i = 0; i < data.length; i++) { + if (i < kPeriod - 1) { kRaw.push({ time: data[i].time }); continue; } + var hh = -Infinity, ll = Infinity; + for (var j = i - kPeriod + 1; j <= i; j++) { + var h = data[j].high !== undefined ? data[j].high : data[j].close; + var l = data[j].low !== undefined ? data[j].low : data[j].close; + if (h > hh) hh = h; + if (l < ll) ll = l; + } + var c = data[i].close !== undefined ? data[i].close : data[i].value || 0; + var range = hh - ll; + kRaw.push({ time: data[i].time, value: range > 0 ? 100 * (c - ll) / range : 50 }); + } + var d = _computeSMA(kRaw, dPeriod, 'value'); + return { k: kRaw, d: d }; +} + +/** Aroon Up and Down: 100 * (period - barsSince {high|low}) / period. */ +function _computeAroon(data, period) { + var up = [], down = []; + for (var i = 0; i < data.length; i++) { + if (i < period) { + up.push({ time: data[i].time }); + down.push({ time: data[i].time }); + continue; + } + var hh = -Infinity, ll = Infinity; + var hIdx = i, lIdx = i; + for (var j = i - period; j <= i; j++) { + var h = data[j].high !== undefined ? data[j].high : data[j].close; + var l = data[j].low !== undefined ? data[j].low : data[j].close; + if (h >= hh) { hh = h; hIdx = j; } + if (l <= ll) { ll = l; lIdx = j; } + } + up.push({ time: data[i].time, value: 100 * (period - (i - hIdx)) / period }); + down.push({ time: data[i].time, value: 100 * (period - (i - lIdx)) / period }); + } + return { up: up, down: down }; +} + +/** Average Directional Index (ADX) with +DI and -DI. Wilder smoothing. */ +function _computeADX(data, period) { + var plusDM = [], minusDM = [], tr = []; + for (var i = 0; i < data.length; i++) { + if (i === 0) { plusDM.push(0); minusDM.push(0); tr.push(0); continue; } + var h = data[i].high !== undefined ? data[i].high : data[i].close; + var l = data[i].low !== undefined ? data[i].low : data[i].close; + var pH = data[i - 1].high !== undefined ? data[i - 1].high : data[i - 1].close; + var pL = data[i - 1].low !== undefined ? data[i - 1].low : data[i - 1].close; + var pC = data[i - 1].close !== undefined ? data[i - 1].close : data[i - 1].value || 0; + var upMove = h - pH; + var downMove = pL - l; + plusDM.push(upMove > downMove && upMove > 0 ? upMove : 0); + minusDM.push(downMove > upMove && downMove > 0 ? downMove : 0); + tr.push(Math.max(h - l, Math.abs(h - pC), Math.abs(l - pC))); + } + + // Wilder smoothing (same formula as RMA / ATR's recursive smoothing) + function wilder(arr) { + var out = new Array(arr.length); + var sum = 0; + for (var i = 0; i < arr.length; i++) { + if (i < period) { sum += arr[i]; out[i] = undefined; if (i === period - 1) out[i] = sum; continue; } + out[i] = out[i - 1] - out[i - 1] / period + arr[i]; + } + return out; + } + + var trS = wilder(tr); + var plusS = wilder(plusDM); + var minusS = wilder(minusDM); + + var plusDI = [], minusDI = [], dx = []; + for (var k = 0; k < data.length; k++) { + if (trS[k] === undefined || trS[k] === 0) { + plusDI.push({ time: data[k].time }); + minusDI.push({ time: data[k].time }); + dx.push(undefined); + continue; + } + var pdi = 100 * plusS[k] / trS[k]; + var mdi = 100 * minusS[k] / trS[k]; + plusDI.push({ time: data[k].time, value: pdi }); + minusDI.push({ time: data[k].time, value: mdi }); + dx.push(pdi + mdi > 0 ? 100 * Math.abs(pdi - mdi) / (pdi + mdi) : 0); + } + + // ADX = Wilder smoothing of DX, starting once we have `period` valid DX values + var adx = []; + var adxVal = null; + var dxSum = 0, dxCount = 0, dxStart = -1; + for (var m = 0; m < data.length; m++) { + if (dx[m] === undefined) { adx.push({ time: data[m].time }); continue; } + if (dxStart < 0) dxStart = m; + if (m - dxStart < period) { + dxSum += dx[m]; + dxCount += 1; + if (dxCount === period) { + adxVal = dxSum / period; + adx.push({ time: data[m].time, value: adxVal }); + } else { + adx.push({ time: data[m].time }); + } + } else { + adxVal = (adxVal * (period - 1) + dx[m]) / period; + adx.push({ time: data[m].time, value: adxVal }); + } + } + + return { adx: adx, plusDI: plusDI, minusDI: minusDI }; +} + +/** MACD: EMA(fast) - EMA(slow), signal EMA of MACD, histogram = MACD - signal. */ +function _computeMACD(data, fast, slow, signal) { + var emaFast = _computeEMA(data, fast); + var emaSlow = _computeEMA(data, slow); + var macd = []; + for (var i = 0; i < data.length; i++) { + var f = emaFast[i].value; + var s = emaSlow[i].value; + macd.push({ + time: data[i].time, + value: (f !== undefined && s !== undefined) ? f - s : undefined, + }); + } + var sig = _computeEMA(macd, signal, 'value'); + var hist = []; + for (var k = 0; k < data.length; k++) { + var mv = macd[k].value; + var sv = sig[k].value; + hist.push({ + time: data[k].time, + value: (mv !== undefined && sv !== undefined) ? mv - sv : undefined, + }); + } + return { macd: macd, signal: sig, histogram: hist }; +} + +/** Accumulation/Distribution: cumulative CLV * volume. */ +function _computeAccumulationDistribution(data) { + var out = []; + var ad = 0; + for (var i = 0; i < data.length; i++) { + var h = data[i].high !== undefined ? data[i].high : data[i].close; + var l = data[i].low !== undefined ? data[i].low : data[i].close; + var c = data[i].close !== undefined ? data[i].close : data[i].value || 0; + var v = data[i].volume || 0; + var range = h - l; + var clv = range > 0 ? ((c - l) - (h - c)) / range : 0; + ad += clv * v; + out.push({ time: data[i].time, value: ad }); + } + return out; +} + +/** Historical Volatility: stdev of log returns * sqrt(annualizationFactor) * 100. */ +function _computeHistoricalVolatility(data, period, annualization) { + var ann = annualization || 252; + var returns = []; + for (var i = 0; i < data.length; i++) { + if (i === 0) { returns.push({ time: data[i].time, value: undefined }); continue; } + var pC = data[i - 1].close !== undefined ? data[i - 1].close : data[i - 1].value || 0; + var c = data[i].close !== undefined ? data[i].close : data[i].value || 0; + if (pC > 0 && c > 0) { + returns.push({ time: data[i].time, value: Math.log(c / pC) }); + } else { + returns.push({ time: data[i].time, value: undefined }); + } + } + var out = []; + for (var k = 0; k < data.length; k++) { + if (k < period) { out.push({ time: data[k].time }); continue; } + var sum = 0, count = 0; + for (var j = k - period + 1; j <= k; j++) { + if (returns[j].value !== undefined) { sum += returns[j].value; count += 1; } + } + if (count === 0) { out.push({ time: data[k].time }); continue; } + var mean = sum / count; + var sq = 0; + for (var jj = k - period + 1; jj <= k; jj++) { + if (returns[jj].value !== undefined) sq += (returns[jj].value - mean) * (returns[jj].value - mean); + } + var stdev = Math.sqrt(sq / count); + out.push({ time: data[k].time, value: stdev * Math.sqrt(ann) * 100 }); + } + return out; +} + +/** Keltner Channels: EMA(n) ± multiplier * ATR(n). */ +function _computeKeltnerChannels(data, period, multiplier, maType) { + multiplier = multiplier || 2; + maType = maType || 'EMA'; + var maFn = maType === 'SMA' ? _computeSMA : (maType === 'WMA' ? _computeWMA : _computeEMA); + var mid = maFn(data, period); + var atr = _computeATR(data, period); + var upper = [], lower = []; + for (var i = 0; i < data.length; i++) { + var m = mid[i].value; + var a = atr[i].value; + if (m === undefined || a === undefined) { + upper.push({ time: data[i].time }); + lower.push({ time: data[i].time }); + continue; + } + upper.push({ time: data[i].time, value: m + multiplier * a }); + lower.push({ time: data[i].time, value: m - multiplier * a }); + } + return { middle: mid, upper: upper, lower: lower }; +} + +/** Ichimoku Cloud: five lines (Tenkan, Kijun, Span A, Span B, Chikou). */ +function _computeIchimoku(data, tenkanP, kijunP, senkouBP) { + function highestHigh(lo, hi) { + var best = -Infinity; + for (var i = lo; i <= hi; i++) { + var h = data[i].high !== undefined ? data[i].high : data[i].close; + if (h > best) best = h; + } + return best; + } + function lowestLow(lo, hi) { + var best = Infinity; + for (var i = lo; i <= hi; i++) { + var l = data[i].low !== undefined ? data[i].low : data[i].close; + if (l < best) best = l; + } + return best; + } + + var tenkan = [], kijun = []; + for (var i = 0; i < data.length; i++) { + if (i >= tenkanP - 1) { + tenkan.push({ time: data[i].time, value: (highestHigh(i - tenkanP + 1, i) + lowestLow(i - tenkanP + 1, i)) / 2 }); + } else { + tenkan.push({ time: data[i].time }); + } + if (i >= kijunP - 1) { + kijun.push({ time: data[i].time, value: (highestHigh(i - kijunP + 1, i) + lowestLow(i - kijunP + 1, i)) / 2 }); + } else { + kijun.push({ time: data[i].time }); + } + } + + // Senkou Span A/B are shifted FORWARD by kijunP bars — we skip the + // forward-plotted values because LWC can't extrapolate times; instead + // we attach the span at the bar where its inputs are known. For the + // textbook shift, callers can pass their own time index. + var spanA = [], spanB = []; + for (var k = 0; k < data.length; k++) { + if (tenkan[k].value !== undefined && kijun[k].value !== undefined) { + spanA.push({ time: data[k].time, value: (tenkan[k].value + kijun[k].value) / 2 }); + } else { + spanA.push({ time: data[k].time }); + } + if (k >= senkouBP - 1) { + spanB.push({ time: data[k].time, value: (highestHigh(k - senkouBP + 1, k) + lowestLow(k - senkouBP + 1, k)) / 2 }); + } else { + spanB.push({ time: data[k].time }); + } + } + + // Chikou Span = close shifted BACKWARD by kijunP bars — attach each + // close to the bar kijunP ahead is impossible without future times; + // instead map close[i] onto time[i - kijunP] so it plots in the past. + var chikou = []; + for (var m = 0; m < data.length; m++) { + var src = m + kijunP; + if (src < data.length) { + var c = data[src].close !== undefined ? data[src].close : data[src].value || 0; + chikou.push({ time: data[m].time, value: c }); + } else { + chikou.push({ time: data[m].time }); + } + } + + return { tenkan: tenkan, kijun: kijun, spanA: spanA, spanB: spanB, chikou: chikou }; +} + +/** Parabolic SAR: trailing stop flipped when price crosses, with acceleration. */ +function _computeParabolicSAR(data, step, maxStep) { + step = step || 0.02; + maxStep = maxStep || 0.2; + if (data.length < 2) return data.map(function(d) { return { time: d.time }; }); + + var out = []; + var uptrend = true; + var af = step; + var ep = data[0].high !== undefined ? data[0].high : data[0].close; + var sar = data[0].low !== undefined ? data[0].low : data[0].close; + + out.push({ time: data[0].time }); // undefined — need 2 bars to seed + + // Decide initial trend from first two bars + var c0 = data[0].close !== undefined ? data[0].close : data[0].value || 0; + var c1 = data[1].close !== undefined ? data[1].close : data[1].value || 0; + uptrend = c1 >= c0; + if (uptrend) { + sar = data[0].low !== undefined ? data[0].low : c0; + ep = data[1].high !== undefined ? data[1].high : c1; + } else { + sar = data[0].high !== undefined ? data[0].high : c0; + ep = data[1].low !== undefined ? data[1].low : c1; + } + out.push({ time: data[1].time, value: sar }); + + for (var i = 2; i < data.length; i++) { + var h = data[i].high !== undefined ? data[i].high : data[i].close; + var l = data[i].low !== undefined ? data[i].low : data[i].close; + var prevHigh = data[i - 1].high !== undefined ? data[i - 1].high : data[i - 1].close; + var prevLow = data[i - 1].low !== undefined ? data[i - 1].low : data[i - 1].close; + + sar = sar + af * (ep - sar); + + if (uptrend) { + // SAR can't exceed prior two lows + sar = Math.min(sar, prevLow, data[i - 2].low !== undefined ? data[i - 2].low : data[i - 2].close); + if (l < sar) { + // Flip to downtrend + uptrend = false; + sar = ep; + ep = l; + af = step; + } else { + if (h > ep) { + ep = h; + af = Math.min(af + step, maxStep); + } + } + } else { + sar = Math.max(sar, prevHigh, data[i - 2].high !== undefined ? data[i - 2].high : data[i - 2].close); + if (h > sar) { + uptrend = true; + sar = ep; + ep = h; + af = step; + } else { + if (l < ep) { + ep = l; + af = Math.min(af + step, maxStep); + } + } + } + out.push({ time: data[i].time, value: sar }); + } + return out; +} + function _tvIndicatorValue(point, source) { var src = source || 'close'; if (src === 'hl2') { diff --git a/pywry/pywry/frontend/src/tvchart/10-events.js b/pywry/pywry/frontend/src/tvchart/10-events.js index 4f64868..43266c4 100644 --- a/pywry/pywry/frontend/src/tvchart/10-events.js +++ b/pywry/pywry/frontend/src/tvchart/10-events.js @@ -1054,6 +1054,31 @@ _offset: data.offset || undefined, _fromIndex: data.fromIndex, _toIndex: data.toIndex, + // Volume Profile styling + _widthPercent: data.widthPercent, + _placement: data.placement, + _upColor: data.upColor, + _downColor: data.downColor, + _vaUpColor: data.vaUpColor, + _vaDownColor: data.vaDownColor, + _pocColor: data.pocColor, + _showPOC: data.showPOC, + _showValueArea: data.showValueArea, + _valueAreaPct: data.valueAreaPct, + // MACD / Stochastic extras + _fast: data.fast, + _slow: data.slow, + _signal: data.signal, + _dPeriod: data.dPeriod, + // Parabolic SAR + _step: data.step, + _maxStep: data.maxStep, + // Ichimoku + _tenkan: data.tenkan, + _kijun: data.kijun, + _senkouB: data.senkouB, + // Historical volatility + _annualization: data.annualization, }; _tvAddIndicator(def, chartId); }); diff --git a/pywry/pywry/tvchart/mixin.py b/pywry/pywry/tvchart/mixin.py index 4c68f80..f7c0937 100644 --- a/pywry/pywry/tvchart/mixin.py +++ b/pywry/pywry/tvchart/mixin.py @@ -300,34 +300,70 @@ def add_volume_profile( bucket_count: int = 24, from_index: int | None = None, to_index: int | None = None, + placement: Literal["right", "left"] = "right", + width_percent: float = 25.0, + value_area_pct: float = 0.70, + show_poc: bool = True, + show_value_area: bool = True, + up_color: str | None = None, + down_color: str | None = None, + poc_color: str | None = None, chart_id: str | None = None, ) -> None: - """Add a Volume Profile histogram overlay to the main price pane. + """Add a Volume Profile overlay pinned to the price pane edge. - Draws a horizontal volume-by-price histogram using the TradingView - Lightweight Charts series-primitive API (ported from the upstream - ``plugin-examples/src/plugins/volume-profile`` example). + Renders a volume-by-price histogram: one horizontal row per price + bucket, bar length proportional to net volume traded at that + level, split into up-volume and down-volume portions. A + Point-of-Control (POC) line marks the bucket with the highest + volume; the value area (default 70%) is drawn in a deeper + colour. Parameters ---------- mode : {"fixed", "visible"} - ``"fixed"`` anchors the histogram to a specific bar-index - range (``from_index`` / ``to_index``). ``"visible"`` anchors - it to the current viewport and recomputes on every pan/zoom. + ``"fixed"`` buckets a specific bar-index range. + ``"visible"`` tracks the current viewport and recomputes on + every pan/zoom. bucket_count : int Number of price buckets (default 24). from_index, to_index : int, optional - Inclusive bar-index bounds for fixed mode. Ignored when - ``mode="visible"``. If omitted under fixed mode, defaults - to the last 20% of bars. + Inclusive bar-index bounds for fixed mode. Defaults to the + full bar set if omitted. + placement : {"right", "left"} + Which side of the pane the histogram is pinned to. + width_percent : float + Maximum histogram width as a percentage of the pane width + (default 25). + value_area_pct : float + Fraction of volume that defines the Value Area (default 0.70). + show_poc, show_value_area : bool + Toggle the POC line and Value Area colouring. + up_color, down_color, poc_color : str, optional + CSS colours for up-volume bars, down-volume bars, and the POC + line. chart_id : str, optional Target chart instance ID. """ name = "Volume Profile Fixed Range" if mode == "fixed" else "Volume Profile Visible Range" - payload: dict[str, Any] = {"name": name, "period": int(bucket_count)} + payload: dict[str, Any] = { + "name": name, + "period": int(bucket_count), + "placement": placement, + "widthPercent": float(width_percent), + "valueAreaPct": float(value_area_pct), + "showPOC": bool(show_poc), + "showValueArea": bool(show_value_area), + } if mode == "fixed" and from_index is not None and to_index is not None: payload["fromIndex"] = int(from_index) payload["toIndex"] = int(to_index) + if up_color is not None: + payload["upColor"] = up_color + if down_color is not None: + payload["downColor"] = down_color + if poc_color is not None: + payload["pocColor"] = poc_color if chart_id is not None: payload["chartId"] = chart_id self.emit("tvchart:add-indicator", payload) From 74ceed46a8ca837c1823c9086472101d145b597c Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 20:16:46 -0700 Subject: [PATCH 47/68] tvchart VP: full settings dialog, theme-driven colours, dev POC/VA - 09-indicators.js: fix bitmap-pixel-ratio bug (bars now render); cap bar width at 15% of pane (down from 25); add Volume mode (Up/Down / Total / Delta); add Developing POC + Developing VA step-line plots; recompute on viewport change with the new opts shape (was passing bucketCount as opts, silently ignoring layout toggles); fix _tvApplyIndicatorSettings VP branch to use the new rowsLayout / rowSize / volumeMode schema; surface settings-dialog click errors via try/catch + console.error. - tvchart.css: VP defaults now use a blue / violet palette with low opacity so the histogram doesn't camouflage the green/red candles and price action stays readable through it; new --pywry-tvchart-vp-* CSS variables override the old ones (and a small indicator multi-plot palette --pywry-tvchart-ind-* powers MACD / Stoch / Aroon / ADX / KC / Ichimoku / SAR defaults). - 04-series.js: the VP add branch + the new indicator branches now pull every default colour from the CSS palette (themed) instead of hard-coded literals; VP carries rowsLayout / rowSize / volumeMode through to the slot + indicator state. - 10-events.js: forward the new VP / indicator opts (rowsLayout, rowSize, volumeMode, developingPOC/VA, dev colours, fast/slow/ signal/dPeriod/step/maxStep/tenkan/kijun/senkouB/annualization) from the Python ``tvchart:add-indicator`` event into the JS indicator def. - mixin.py: extend add_volume_profile() with placement / width / value-area / show-poc / show-value-area / colour overrides. Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/pywry/frontend/src/tvchart/04-series.js | 82 +++- .../frontend/src/tvchart/09-indicators.js | 410 +++++++++++++++--- pywry/pywry/frontend/style/tvchart.css | 30 ++ 3 files changed, 454 insertions(+), 68 deletions(-) diff --git a/pywry/pywry/frontend/src/tvchart/04-series.js b/pywry/pywry/frontend/src/tvchart/04-series.js index 2ae3487..24ff98d 100644 --- a/pywry/pywry/frontend/src/tvchart/04-series.js +++ b/pywry/pywry/frontend/src/tvchart/04-series.js @@ -1471,7 +1471,7 @@ function _tvAddIndicator(indicatorDef, chartId) { } else if (name === 'Parabolic SAR') { var psStep = indicatorDef._step || 0.02; var psMax = indicatorDef._maxStep || 0.2; - var psColor = indicatorDef._color || '#ff9800'; + var psColor = indicatorDef._color || _cssVar('--pywry-tvchart-ind-secondary'); var psScaleId = _tvResolveScalePlacement(entry); var psSeries = entry.chart.addSeries(LightweightCharts.LineSeries, { color: psColor, @@ -1498,7 +1498,10 @@ function _tvAddIndicator(indicatorDef, chartId) { var macd = _computeMACD(rawData, macdFast, macdSlow, macdSignal); if (!entry._nextPane) entry._nextPane = 1; var macdPane = entry._nextPane++; - var macdColor = '#2196f3', sigColor = '#ff9800', histPosColor = 'rgba(76,175,80,0.6)', histNegColor = 'rgba(239,83,80,0.6)'; + var macdColor = _cssVar('--pywry-tvchart-ind-primary'); + var sigColor = _cssVar('--pywry-tvchart-ind-secondary'); + var histPosColor = _cssVar('--pywry-tvchart-ind-positive-dim'); + var histNegColor = _cssVar('--pywry-tvchart-ind-negative-dim'); var histData = macd.histogram.filter(function(v) { return v.value !== undefined; }).map(function(v) { return { time: v.time, value: v.value, color: v.value >= 0 ? histPosColor : histNegColor }; }); @@ -1529,7 +1532,8 @@ function _tvAddIndicator(indicatorDef, chartId) { var stoch = _computeStochastic(rawData, kPeriod, dPeriod); if (!entry._nextPane) entry._nextPane = 1; var stochPane = entry._nextPane++; - var stochKColor = '#2196f3', stochDColor = '#ff9800'; + var stochKColor = _cssVar('--pywry-tvchart-ind-primary'); + var stochDColor = _cssVar('--pywry-tvchart-ind-secondary'); var sK, sD; try { sK = entry.chart.addSeries(LightweightCharts.LineSeries, { color: stochKColor, lineWidth: 2, priceLineVisible: false }, stochPane); @@ -1549,7 +1553,8 @@ function _tvAddIndicator(indicatorDef, chartId) { var aroon = _computeAroon(rawData, aroonPeriod); if (!entry._nextPane) entry._nextPane = 1; var aroonPane = entry._nextPane++; - var aroonUpColor = '#4caf50', aroonDownColor = '#f44336'; + var aroonUpColor = _cssVar('--pywry-tvchart-ind-positive'); + var aroonDownColor = _cssVar('--pywry-tvchart-ind-negative'); var sUp, sDown; try { sUp = entry.chart.addSeries(LightweightCharts.LineSeries, { color: aroonUpColor, lineWidth: 2, priceLineVisible: false }, aroonPane); @@ -1569,7 +1574,9 @@ function _tvAddIndicator(indicatorDef, chartId) { var adx = _computeADX(rawData, adxPeriod); if (!entry._nextPane) entry._nextPane = 1; var adxPane = entry._nextPane++; - var adxColor = '#2196f3', plusDIColor = '#4caf50', minusDIColor = '#f44336'; + var adxColor = _cssVar('--pywry-tvchart-ind-primary'); + var plusDIColor = _cssVar('--pywry-tvchart-ind-positive'); + var minusDIColor = _cssVar('--pywry-tvchart-ind-negative'); var sAdx, sPlus, sMinus; try { sAdx = entry.chart.addSeries(LightweightCharts.LineSeries, { color: adxColor, lineWidth: 2, priceLineVisible: false }, adxPane); @@ -1594,7 +1601,8 @@ function _tvAddIndicator(indicatorDef, chartId) { var kcMaType = indicatorDef._maType || 'EMA'; var kc = _computeKeltnerChannels(rawData, kcPeriod, kcMult, kcMaType); var kcScaleId = _tvResolveScalePlacement(entry); - var kcMidColor = '#ff9800', kcBandColor = '#2196f3'; + var kcMidColor = _cssVar('--pywry-tvchart-ind-secondary'); + var kcBandColor = _cssVar('--pywry-tvchart-ind-primary'); var kcM = entry.chart.addSeries(LightweightCharts.LineSeries, { color: kcMidColor, lineWidth: 1, priceScaleId: kcScaleId, lastValueVisible: false, priceLineVisible: false }); var kcU = entry.chart.addSeries(LightweightCharts.LineSeries, { color: kcBandColor, lineWidth: 1, priceScaleId: kcScaleId, lastValueVisible: false, priceLineVisible: false }); var kcL = entry.chart.addSeries(LightweightCharts.LineSeries, { color: kcBandColor, lineWidth: 1, priceScaleId: kcScaleId, lastValueVisible: false, priceLineVisible: false }); @@ -1616,7 +1624,11 @@ function _tvAddIndicator(indicatorDef, chartId) { var ichiSpB = indicatorDef._senkouB || 52; var ichi = _computeIchimoku(rawData, ichiTen, ichiKij, ichiSpB); var ichiScaleId = _tvResolveScalePlacement(entry); - var cTen = '#2196f3', cKij = '#f44336', cSpA = 'rgba(76,175,80,0.7)', cSpB = 'rgba(239,83,80,0.7)', cChi = '#9e9e9e'; + var cTen = _cssVar('--pywry-tvchart-ind-primary'); + var cKij = _cssVar('--pywry-tvchart-ind-negative'); + var cSpA = _cssVar('--pywry-tvchart-ind-positive-dim'); + var cSpB = _cssVar('--pywry-tvchart-ind-negative-dim'); + var cChi = _cssVar('--pywry-tvchart-ind-tertiary'); var sTen = entry.chart.addSeries(LightweightCharts.LineSeries, { color: cTen, lineWidth: 1, priceScaleId: ichiScaleId, lastValueVisible: false, priceLineVisible: false }); var sKij = entry.chart.addSeries(LightweightCharts.LineSeries, { color: cKij, lineWidth: 1, priceScaleId: ichiScaleId, lastValueVisible: false, priceLineVisible: false }); var sSpA = entry.chart.addSeries(LightweightCharts.LineSeries, { color: cSpA, lineWidth: 1, priceScaleId: ichiScaleId, lastValueVisible: false, priceLineVisible: false }); @@ -1644,7 +1656,11 @@ function _tvAddIndicator(indicatorDef, chartId) { _activeIndicators[sidChi] = _tvMerge(ichiCommon, { name: 'Ichimoku Chikou', color: cChi }); } else if (key === 'volume-profile-fixed' || key === 'volume-profile-visible') { var vpMode = key === 'volume-profile-fixed' ? 'fixed' : 'visible'; - var vpBuckets = Math.max(2, Math.floor(period || 24)); + var vpRowsLayout = indicatorDef._rowsLayout || 'rows'; + var vpRowSize = indicatorDef._rowSize != null + ? Number(indicatorDef._rowSize) + : (vpRowsLayout === 'ticks' ? 1 : Math.max(2, Math.floor(period || 24))); + var vpVolumeMode = indicatorDef._volumeMode || 'updown'; var vpFromIdx, vpToIdx; if (vpMode === 'fixed') { @@ -1667,30 +1683,50 @@ function _tvAddIndicator(indicatorDef, chartId) { } } - var vpData = _tvComputeVolumeProfile(rawData, vpFromIdx, vpToIdx, vpBuckets); + var vpValueAreaPct = indicatorDef._valueAreaPct || 0.70; + var vpShowDevPOC = indicatorDef._showDevelopingPOC === true; + var vpShowDevVA = indicatorDef._showDevelopingVA === true; + var vpData = _tvComputeVolumeProfile(rawData, vpFromIdx, vpToIdx, { + rowsLayout: vpRowsLayout, + rowSize: vpRowSize, + valueAreaPct: vpValueAreaPct, + withDeveloping: vpShowDevPOC || vpShowDevVA, + }); if (!vpData) { console.warn('[pywry:tvchart] Volume Profile: insufficient data / no volume'); return; } var vpId = 'ind_vp_' + vpMode + '_' + Date.now(); + // Colours resolve from the active theme via CSS vars when the + // caller doesn't override them, so a theme switch automatically + // recolours every Volume Profile on screen. var vpOpts = { - widthPercent: indicatorDef._widthPercent || 25, + rowsLayout: vpRowsLayout, + rowSize: vpRowSize, + volumeMode: vpVolumeMode, + widthPercent: indicatorDef._widthPercent || 15, placement: indicatorDef._placement || 'right', - upColor: indicatorDef._upColor || 'rgba(38, 166, 154, 0.55)', - downColor: indicatorDef._downColor || 'rgba(239, 83, 80, 0.55)', - vaUpColor: indicatorDef._vaUpColor || 'rgba(38, 166, 154, 0.85)', - vaDownColor: indicatorDef._vaDownColor || 'rgba(239, 83, 80, 0.85)', - pocColor: indicatorDef._pocColor || '#ffffff', + upColor: indicatorDef._upColor || _cssVar('--pywry-tvchart-vp-up'), + downColor: indicatorDef._downColor || _cssVar('--pywry-tvchart-vp-down'), + vaUpColor: indicatorDef._vaUpColor || _cssVar('--pywry-tvchart-vp-va-up'), + vaDownColor: indicatorDef._vaDownColor || _cssVar('--pywry-tvchart-vp-va-down'), + pocColor: indicatorDef._pocColor || _cssVar('--pywry-tvchart-vp-poc'), + developingPOCColor: indicatorDef._developingPOCColor || _cssVar('--pywry-tvchart-ind-tertiary'), + developingVAColor: indicatorDef._developingVAColor || _cssVar('--pywry-tvchart-vp-va-up'), showPOC: indicatorDef._showPOC !== false, showValueArea: indicatorDef._showValueArea !== false, - valueAreaPct: indicatorDef._valueAreaPct || 0.70, + showDevelopingPOC: vpShowDevPOC, + showDevelopingVA: vpShowDevVA, + valueAreaPct: vpValueAreaPct, }; var vpSlot = { chartId: chartId, seriesId: primarySeriesId, mode: vpMode, - bucketCount: vpBuckets, + rowsLayout: vpRowsLayout, + rowSize: vpRowSize, + volumeMode: vpVolumeMode, vpData: vpData, opts: vpOpts, primitive: null, @@ -1711,7 +1747,7 @@ function _tvAddIndicator(indicatorDef, chartId) { _activeIndicators[vpId] = { name: name, - period: vpBuckets, + period: vpRowsLayout === 'rows' ? vpRowSize : 0, chartId: chartId, color: null, paneIndex: 0, @@ -1720,11 +1756,19 @@ function _tvAddIndicator(indicatorDef, chartId) { sourceSeriesId: primarySeriesId, secondarySeriesId: null, mode: vpMode, - bucketCount: vpBuckets, + rowsLayout: vpRowsLayout, + rowSize: vpRowSize, + volumeMode: vpVolumeMode, fromIndex: vpFromIdx, toIndex: vpToIdx, widthPercent: vpOpts.widthPercent, placement: vpOpts.placement, + valueAreaPct: vpValueAreaPct, + showDevelopingPOC: vpShowDevPOC, + showDevelopingVA: vpShowDevVA, + labelsOnPriceScale: indicatorDef._labelsOnPriceScale !== false, + valuesInStatusLine: indicatorDef._valuesInStatusLine !== false, + inputsInStatusLine: indicatorDef._inputsInStatusLine !== false, }; } else { console.error('[pywry:tvchart] Unknown indicator:', name, 'key:', key); diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators.js b/pywry/pywry/frontend/src/tvchart/09-indicators.js index a580e05..a316f79 100644 --- a/pywry/pywry/frontend/src/tvchart/09-indicators.js +++ b/pywry/pywry/frontend/src/tvchart/09-indicators.js @@ -375,19 +375,15 @@ function _tvPositionsBox(a, b, pixelRatio) { /** * Bucket bars into a volume-by-price histogram with up/down split. * - * Net volume at each price level is computed by distributing each bar's - * volume uniformly across the buckets its (low..high) range spans. The - * volume is tagged as "up" when the bar closed at or above its open, - * "down" otherwise. - * * @param {Array} bars - OHLCV bar objects with {time, open, high, low, close, volume} * @param {number} fromIdx - inclusive start index * @param {number} toIdx - inclusive end index - * @param {number} bucketCount - number of price buckets - * @returns {{profile, minPrice, maxPrice, step, totalVolume}|null} + * @param {Object} opts - { rowsLayout: 'rows'|'ticks', rowSize: number, valueAreaPct, withDeveloping } + * @returns {{profile, minPrice, maxPrice, step, totalVolume, developing?}|null} */ -function _tvComputeVolumeProfile(bars, fromIdx, toIdx, bucketCount) { +function _tvComputeVolumeProfile(bars, fromIdx, toIdx, opts) { if (!bars || !bars.length) return null; + opts = opts || {}; var lo = Math.max(0, Math.min(fromIdx, toIdx, bars.length - 1)); var hi = Math.min(bars.length - 1, Math.max(fromIdx, toIdx, 0)); if (hi < lo) return null; @@ -403,11 +399,27 @@ function _tvComputeVolumeProfile(bars, fromIdx, toIdx, bucketCount) { } if (!isFinite(minP) || !isFinite(maxP) || maxP === minP) return null; - var nBuckets = Math.max(2, Math.floor(bucketCount || 24)); + // Resolve bucket count from layout option. + var rowsLayout = opts.rowsLayout || 'rows'; + var rowSize = Math.max(0.0001, Number(opts.rowSize) || 24); + var nBuckets; + if (rowsLayout === 'ticks') { + nBuckets = Math.max(2, Math.min(2000, Math.ceil((maxP - minP) / rowSize))); + } else { + nBuckets = Math.max(2, Math.floor(rowSize)); + } var step = (maxP - minP) / nBuckets; + var up = new Array(nBuckets), down = new Array(nBuckets); for (var k = 0; k < nBuckets; k++) { up[k] = 0; down[k] = 0; } + // Optional running snapshots (for Developing POC / VA). Recorded + // once per bar so the renderer can plot the running point of + // control as a step line across time. + var withDeveloping = opts.withDeveloping === true; + var valueAreaPct = opts.valueAreaPct || 0.70; + var developing = withDeveloping ? [] : null; + var totalVol = 0; for (var j = lo; j <= hi; j++) { var bar = bars[j]; @@ -416,8 +428,14 @@ function _tvComputeVolumeProfile(bars, fromIdx, toIdx, bucketCount) { var bO = bar.open !== undefined ? bar.open : bar.close; var bC = bar.close !== undefined ? bar.close : bar.value; var vol = bar.volume !== undefined && bar.volume !== null ? Number(bar.volume) : 0; - if (!isFinite(vol) || vol <= 0) continue; - if (bH === undefined || bL === undefined) continue; + if (!isFinite(vol) || vol <= 0) { + if (withDeveloping) developing.push({ time: bar.time }); + continue; + } + if (bH === undefined || bL === undefined) { + if (withDeveloping) developing.push({ time: bar.time }); + continue; + } var loIdx = Math.max(0, Math.min(nBuckets - 1, Math.floor((bL - minP) / step))); var hiIdx = Math.max(0, Math.min(nBuckets - 1, Math.floor((bH - minP) / step))); var span = hiIdx - loIdx + 1; @@ -427,12 +445,23 @@ function _tvComputeVolumeProfile(bars, fromIdx, toIdx, bucketCount) { if (isUp) up[bi] += share; else down[bi] += share; } totalVol += vol; + + if (withDeveloping) { + // Snapshot the running POC and Value Area edges so far. + var snap = _tvDevelopingSnapshot(up, down, totalVol, minP, step, valueAreaPct); + developing.push({ + time: bar.time, + pocPrice: snap.pocPrice, + vaHighPrice: snap.vaHighPrice, + vaLowPrice: snap.vaLowPrice, + }); + } } var profile = []; for (var p = 0; p < nBuckets; p++) { profile.push({ - price: minP + step * (p + 0.5), // centre of bucket + price: minP + step * (p + 0.5), priceLo: minP + step * p, priceHi: minP + step * (p + 1), upVol: up[p], @@ -447,6 +476,40 @@ function _tvComputeVolumeProfile(bars, fromIdx, toIdx, bucketCount) { maxPrice: maxP, step: step, totalVolume: totalVol, + developing: developing, + }; +} + +/** Per-bar snapshot of the running POC + value-area edges. */ +function _tvDevelopingSnapshot(up, down, totalVol, minP, step, vaPct) { + var n = up.length; + var pocIdx = 0; + var pocVol = up[0] + down[0]; + for (var i = 1; i < n; i++) { + var t = up[i] + down[i]; + if (t > pocVol) { pocVol = t; pocIdx = i; } + } + if (pocVol === 0) return { pocPrice: undefined, vaHighPrice: undefined, vaLowPrice: undefined }; + + var target = totalVol * (vaPct || 0.70); + var accumulated = pocVol; + var loIdx = pocIdx, hiIdx = pocIdx; + while (accumulated < target && (loIdx > 0 || hiIdx < n - 1)) { + var nextLow = loIdx > 0 ? (up[loIdx - 1] + down[loIdx - 1]) : -1; + var nextHigh = hiIdx < n - 1 ? (up[hiIdx + 1] + down[hiIdx + 1]) : -1; + if (nextLow < 0 && nextHigh < 0) break; + if (nextHigh >= nextLow) { + hiIdx += 1; + accumulated += up[hiIdx] + down[hiIdx]; + } else { + loIdx -= 1; + accumulated += up[loIdx] + down[loIdx]; + } + } + return { + pocPrice: minP + step * (pocIdx + 0.5), + vaHighPrice: minP + step * (hiIdx + 1), + vaLowPrice: minP + step * loIdx, }; } @@ -494,40 +557,58 @@ function _tvMakeVolumeProfilePrimitive(chartId, seriesId, getData, getOpts) { var opts = (getOpts && getOpts()) || {}; var ctx = scope.context; + // bitmapSize is ALREADY in bitmap pixels (= mediaSize * pixelRatio). + // priceToCoordinate returns MEDIA pixels — convert with vpr. var paneW = scope.bitmapSize.width; - var paneH = scope.bitmapSize.height; var hpr = scope.horizontalPixelRatio; var vpr = scope.verticalPixelRatio; - var widthPct = Math.max(5, Math.min(60, opts.widthPercent || 25)); // % of pane width + var widthPct = Math.max(2, Math.min(60, opts.widthPercent || 15)); var placement = opts.placement === 'left' ? 'left' : 'right'; - var upColor = opts.upColor || 'rgba(38, 166, 154, 0.55)'; - var downColor = opts.downColor || 'rgba(239, 83, 80, 0.55)'; - var vaUpColor = opts.vaUpColor || 'rgba(38, 166, 154, 0.85)'; - var vaDownColor = opts.vaDownColor || 'rgba(239, 83, 80, 0.85)'; - var pocColor = opts.pocColor || '#ffffff'; + var volumeMode = opts.volumeMode || 'updown'; // 'updown' | 'total' | 'delta' + var upColor = opts.upColor || _cssVar('--pywry-tvchart-vp-up'); + var downColor = opts.downColor || _cssVar('--pywry-tvchart-vp-down'); + var vaUpColor = opts.vaUpColor || _cssVar('--pywry-tvchart-vp-va-up'); + var vaDownColor = opts.vaDownColor || _cssVar('--pywry-tvchart-vp-va-down'); + var pocColor = opts.pocColor || _cssVar('--pywry-tvchart-vp-poc'); + var devPocColor = opts.developingPOCColor || _cssVar('--pywry-tvchart-ind-tertiary'); + var devVAColor = opts.developingVAColor || _cssVar('--pywry-tvchart-vp-va-up'); var showPOC = opts.showPOC !== false; var showVA = opts.showValueArea !== false; + var showDevPOC = opts.showDevelopingPOC === true; + var showDevVA = opts.showDevelopingVA === true; var valueAreaPct = opts.valueAreaPct || 0.70; + // For Delta mode the displayed magnitude is |upVol - downVol|. + // Otherwise it's the total bucket volume. + function bucketMagnitude(row) { + return volumeMode === 'delta' ? Math.abs(row.upVol - row.downVol) : row.totalVol; + } var maxVol = 0; for (var i = 0; i < vp.profile.length; i++) { - if (vp.profile[i].totalVol > maxVol) maxVol = vp.profile[i].totalVol; + var m = bucketMagnitude(vp.profile[i]); + if (m > maxVol) maxVol = m; } if (maxVol <= 0) return; var poc = _tvComputePOCAndValueArea(vp.profile, vp.totalVolume, valueAreaPct); var maxBarBitmap = paneW * (widthPct / 100); - // Row half-height — half of the bucket's pixel span. We cap at - // a reasonable minimum so very dense profiles still render. + + // Row height: derive from bucket spacing (priceToCoordinate is media px). var y0 = series.priceToCoordinate(vp.profile[0].price); var y1 = vp.profile.length > 1 ? series.priceToCoordinate(vp.profile[1].price) : null; if (y0 === null) return; var pxPerBucket = (y1 !== null) ? Math.abs(y0 - y1) : 4; var rowHalfBitmap = Math.max(1, (pxPerBucket * vpr) / 2 - 1); + var rowHeight = Math.max(1, rowHalfBitmap * 2 - 2); + + function drawSegment(x, w, color, yTop) { + if (w <= 0) return; + ctx.fillStyle = color; + ctx.fillRect(x, yTop, w, rowHeight); + } - // Draw rows for (var r = 0; r < vp.profile.length; r++) { var row = vp.profile[r]; if (row.totalVol <= 0) continue; @@ -536,35 +617,44 @@ function _tvMakeVolumeProfilePrimitive(chartId, seriesId, getData, getOpts) { var yBitmap = y * vpr; var yTop = yBitmap - rowHalfBitmap; - var rowHeight = Math.max(1, rowHalfBitmap * 2 - 2); - - var barLenBitmap = maxBarBitmap * (row.totalVol / maxVol) * hpr; - var upRatio = row.totalVol > 0 ? row.upVol / row.totalVol : 0; - var upLen = barLenBitmap * upRatio; - var downLen = barLenBitmap - upLen; - var inValueArea = poc && r >= poc.vaLowIdx && r <= poc.vaHighIdx; var curUp = inValueArea && showVA ? vaUpColor : upColor; var curDown = inValueArea && showVA ? vaDownColor : downColor; - // Up volume is drawn on the "inner" side (nearest price axis), - // down on the "outer" side. For right placement, inner = right. - if (placement === 'right') { - var rightEdge = paneW * hpr; - ctx.fillStyle = curUp; - ctx.fillRect(rightEdge - upLen, yTop, upLen, rowHeight); - ctx.fillStyle = curDown; - ctx.fillRect(rightEdge - upLen - downLen, yTop, downLen, rowHeight); + var barLenBitmap = maxBarBitmap * (bucketMagnitude(row) / maxVol); + + if (volumeMode === 'updown') { + var upRatio = row.upVol / row.totalVol; + var upLen = barLenBitmap * upRatio; + var downLen = barLenBitmap - upLen; + if (placement === 'right') { + drawSegment(paneW - upLen, upLen, curUp, yTop); + drawSegment(paneW - upLen - downLen, downLen, curDown, yTop); + } else { + drawSegment(0, upLen, curUp, yTop); + drawSegment(upLen, downLen, curDown, yTop); + } + } else if (volumeMode === 'delta') { + // Delta = upVol - downVol. Positive bars use the up colour + // (extending inward from the edge); negative use down. + var net = row.upVol - row.downVol; + var col = net >= 0 ? curUp : curDown; + if (placement === 'right') { + drawSegment(paneW - barLenBitmap, barLenBitmap, col, yTop); + } else { + drawSegment(0, barLenBitmap, col, yTop); + } } else { - ctx.fillStyle = curUp; - ctx.fillRect(0, yTop, upLen, rowHeight); - ctx.fillStyle = curDown; - ctx.fillRect(upLen, yTop, downLen, rowHeight); + // Total: single bar coloured by net direction (up bias = up colour). + var totalCol = row.upVol >= row.downVol ? curUp : curDown; + if (placement === 'right') { + drawSegment(paneW - barLenBitmap, barLenBitmap, totalCol, yTop); + } else { + drawSegment(0, barLenBitmap, totalCol, yTop); + } } } - // POC line: horizontal dashed line at the price level with the - // highest volume, spanning the full pane width. if (showPOC && poc) { var pocPrice = vp.profile[poc.pocIdx].price; var pocY = series.priceToCoordinate(pocPrice); @@ -575,10 +665,42 @@ function _tvMakeVolumeProfilePrimitive(chartId, seriesId, getData, getOpts) { ctx.setLineDash([4 * hpr, 3 * hpr]); ctx.beginPath(); ctx.moveTo(0, pocY * vpr); - ctx.lineTo(paneW * hpr, pocY * vpr); + ctx.lineTo(paneW, pocY * vpr); + ctx.stroke(); + ctx.restore(); + } + } + + // Developing POC / VA: step-line plots across time, computed + // bar-by-bar in _tvComputeVolumeProfile when withDeveloping=true. + if ((showDevPOC || showDevVA) && Array.isArray(vp.developing) && vp.developing.length > 0) { + var timeScale = entry.chart.timeScale(); + function plotDevLine(field, color) { + ctx.save(); + ctx.strokeStyle = color; + ctx.lineWidth = Math.max(1, Math.round(vpr)); + ctx.beginPath(); + var moved = false; + for (var di = 0; di < vp.developing.length; di++) { + var p = vp.developing[di]; + var px = p[field]; + if (px === undefined) { moved = false; continue; } + var dx = timeScale.timeToCoordinate(p.time); + var dy = series.priceToCoordinate(px); + if (dx === null || dy === null) { moved = false; continue; } + var dxB = dx * hpr; + var dyB = dy * vpr; + if (!moved) { ctx.moveTo(dxB, dyB); moved = true; } + else { ctx.lineTo(dxB, dyB); } + } ctx.stroke(); ctx.restore(); } + if (showDevPOC) plotDevLine('pocPrice', devPocColor); + if (showDevVA) { + plotDevLine('vaHighPrice', devVAColor); + plotDevLine('vaLowPrice', devVAColor); + } } } @@ -595,7 +717,12 @@ function _tvMakeVolumeProfilePrimitive(chartId, seriesId, getData, getOpts) { }; return { - attached: function(params) { _requestUpdate = params.requestUpdate; }, + attached: function(params) { + _requestUpdate = params.requestUpdate; + // Kick the first paint — without this the primitive only renders + // on the next user interaction (pan/zoom/resize). + if (_requestUpdate) _requestUpdate(); + }, detached: function() { _requestUpdate = null; }, updateAllViews: function() {}, paneViews: function() { return [paneView]; }, @@ -638,7 +765,12 @@ function _tvRefreshVisibleVolumeProfiles(chartId) { fromIdx = 0; toIdx = bars.length - 1; } - var vp = _tvComputeVolumeProfile(bars, fromIdx, toIdx, slot.bucketCount); + var vp = _tvComputeVolumeProfile(bars, fromIdx, toIdx, { + rowsLayout: slot.rowsLayout || 'rows', + rowSize: slot.rowSize || ai.rowSize || 24, + valueAreaPct: (slot.opts && slot.opts.valueAreaPct) || 0.70, + withDeveloping: (slot.opts && (slot.opts.showDevelopingPOC || slot.opts.showDevelopingVA)) === true, + }); if (!vp) continue; slot.vpData = vp; ai.fromIndex = fromIdx; @@ -2248,7 +2380,11 @@ function _tvRebuildIndicatorLegend(chartId) { eyeBtn.id = 'tvchart-eye-' + seriesId; ctrl.appendChild(eyeBtn); ctrl.appendChild(_tvLegendActionButton('Settings', settingsSvg, function() { - _tvShowIndicatorSettings(seriesId); + try { + _tvShowIndicatorSettings(seriesId); + } catch (err) { + console.error('[pywry:tvchart] Settings dialog failed for', seriesId, err); + } })); ctrl.appendChild(_tvLegendActionButton('Remove', removeSvg, function() { _tvRemoveIndicator(seriesId); @@ -2390,6 +2526,7 @@ function _tvShowIndicatorSettings(seriesId) { var isVWAP = baseName === 'VWAP'; var isVolSMA = baseName === 'Volume SMA'; var isMA = baseName === 'SMA' || baseName === 'EMA' || baseName === 'WMA'; + var isVP = type === 'volume-profile-fixed' || type === 'volume-profile-visible'; var isLightweight = type === 'moving-average-ex' || type === 'momentum' || type === 'correlation' || type === 'percent-change' || type === 'average-price' || type === 'median-price' || type === 'weighted-close' || type === 'spread' || type === 'ratio' @@ -2426,6 +2563,29 @@ function _tvShowIndicatorSettings(seriesId) { offset: info.offset || 0, primarySource: info.primarySource || 'close', secondarySource: info.secondarySource || 'close', + // Volume Profile-specific draft + vpRowsLayout: info.rowsLayout || 'rows', // 'rows' | 'ticks' + vpRowSize: info.rowSize != null + ? info.rowSize + : (info.rowsLayout === 'ticks' ? 1 : (info.bucketCount || info.period || 24)), + vpVolumeMode: info.volumeMode || 'updown', // 'updown' | 'total' | 'delta' + vpPlacement: info.placement || 'right', + vpWidthPercent: info.widthPercent != null ? info.widthPercent : 15, + vpValueAreaPct: info.valueAreaPct != null ? Math.round(info.valueAreaPct * 100) : 70, + vpShowPOC: info.showPOC !== false, + vpShowValueArea: info.showValueArea !== false, + vpShowDevelopingPOC: info.showDevelopingPOC === true, + vpShowDevelopingVA: info.showDevelopingVA === true, + vpLabelsOnPriceScale: info.labelsOnPriceScale !== false, + vpValuesInStatusLine: info.valuesInStatusLine !== false, + vpInputsInStatusLine: info.inputsInStatusLine !== false, + vpUpColor: info.upColor || _cssVar('--pywry-tvchart-vp-up'), + vpDownColor: info.downColor || _cssVar('--pywry-tvchart-vp-down'), + vpVAUpColor: info.vaUpColor || _cssVar('--pywry-tvchart-vp-va-up'), + vpVADownColor: info.vaDownColor || _cssVar('--pywry-tvchart-vp-va-down'), + vpPOCColor: info.pocColor || _cssVar('--pywry-tvchart-vp-poc'), + vpDevelopingPOCColor: info.developingPOCColor || _cssVar('--pywry-tvchart-ind-tertiary'), + vpDevelopingVAColor: info.developingVAColor || _cssVar('--pywry-tvchart-vp-va-up'), // BB-specific fill settings showBandFill: info.showBandFill !== undefined ? info.showBandFill : true, bandFillColor: info.bandFillColor || '#2196f3', @@ -2807,12 +2967,45 @@ function _tvShowIndicatorSettings(seriesId) { } } - // Volume SMA + // Volume SMA if (isVolSMA) { addSelectRow(body, 'Source', [{ v: 'volume', l: 'Volume' }], 'volume', function() {}); hasInputs = true; } + // Volume Profile inputs (VPVR / VPFR) + if (isVP) { + addSelectRow(body, 'Rows Layout', [ + { v: 'rows', l: 'Number Of Rows' }, + { v: 'ticks', l: 'Ticks Per Row' }, + ], draft.vpRowsLayout, function(v) { + draft.vpRowsLayout = v; + // Reset row size to a sensible default for the new layout + if (v === 'ticks') { + if (!draft.vpRowSize || draft.vpRowSize > 100) draft.vpRowSize = 1; + } else { + if (!draft.vpRowSize || draft.vpRowSize < 4) draft.vpRowSize = 24; + } + renderBody(); + }); + addNumberRow( + body, + 'Row Size', + draft.vpRowsLayout === 'ticks' ? '1' : '4', + draft.vpRowsLayout === 'ticks' ? '1000' : '500', + draft.vpRowsLayout === 'ticks' ? '0.0001' : '1', + draft.vpRowSize, + function(v) { draft.vpRowSize = v; } + ); + addSelectRow(body, 'Volume', [ + { v: 'updown', l: 'Up/Down' }, + { v: 'total', l: 'Total' }, + { v: 'delta', l: 'Delta' }, + ], draft.vpVolumeMode, function(v) { draft.vpVolumeMode = v; }); + addNumberRow(body, 'Value Area Volume', '10', '95', '1', draft.vpValueAreaPct, function(v) { draft.vpValueAreaPct = v; }); + hasInputs = true; + } + if (!hasInputs) { var noRow = document.createElement('div'); noRow.className = 'tv-settings-row'; @@ -2823,6 +3016,40 @@ function _tvShowIndicatorSettings(seriesId) { // ===================== STYLE TAB ===================== } else if (activeTab === 'style') { + // Volume Profile style — full custom panel (skip the generic plot rows) + if (isVP) { + addSection(body, 'VOLUME PROFILE'); + addNumberRow(body, 'Width (% of pane)', '2', '60', '1', draft.vpWidthPercent, function(v) { draft.vpWidthPercent = v; }); + addSelectRow(body, 'Placement', [ + { v: 'right', l: 'Right' }, + { v: 'left', l: 'Left' }, + ], draft.vpPlacement, function(v) { draft.vpPlacement = v; }); + addColorRow(body, 'Up Volume', draft.vpUpColor, function(v, op) { draft.vpUpColor = _tvColorWithOpacity(v, op, v); }); + addColorRow(body, 'Down Volume', draft.vpDownColor, function(v, op) { draft.vpDownColor = _tvColorWithOpacity(v, op, v); }); + addColorRow(body, 'Value Area Up', draft.vpVAUpColor, function(v, op) { draft.vpVAUpColor = _tvColorWithOpacity(v, op, v); }); + addColorRow(body, 'Value Area Down', draft.vpVADownColor, function(v, op) { draft.vpVADownColor = _tvColorWithOpacity(v, op, v); }); + + addSection(body, 'POC'); + addCheckRow(body, 'Show POC', draft.vpShowPOC, function(v) { draft.vpShowPOC = v; }); + addColorRow(body, 'POC Color', draft.vpPOCColor, function(v, op) { draft.vpPOCColor = _tvColorWithOpacity(v, op, v); }); + + addSection(body, 'DEVELOPING POC'); + addCheckRow(body, 'Show Developing POC', draft.vpShowDevelopingPOC, function(v) { draft.vpShowDevelopingPOC = v; }); + addColorRow(body, 'Developing POC Color', draft.vpDevelopingPOCColor, function(v, op) { draft.vpDevelopingPOCColor = _tvColorWithOpacity(v, op, v); }); + + addSection(body, 'VALUE AREA'); + addCheckRow(body, 'Highlight Value Area', draft.vpShowValueArea, function(v) { draft.vpShowValueArea = v; }); + addCheckRow(body, 'Show Developing VA', draft.vpShowDevelopingVA, function(v) { draft.vpShowDevelopingVA = v; }); + addColorRow(body, 'Developing VA Color', draft.vpDevelopingVAColor, function(v, op) { draft.vpDevelopingVAColor = _tvColorWithOpacity(v, op, v); }); + + addSection(body, 'OUTPUT VALUES'); + addCheckRow(body, 'Labels on price scale', draft.vpLabelsOnPriceScale, function(v) { draft.vpLabelsOnPriceScale = v; }); + addCheckRow(body, 'Values in status line', draft.vpValuesInStatusLine, function(v) { draft.vpValuesInStatusLine = v; }); + addSection(body, 'INPUT VALUES'); + addCheckRow(body, 'Inputs in status line', draft.vpInputsInStatusLine, function(v) { draft.vpInputsInStatusLine = v; }); + return; + } + addSection(body, 'PLOTS'); // Multi-plot indicators (Bollinger Bands) @@ -3226,6 +3453,91 @@ function _tvApplyIndicatorSettings(seriesId, newSettings) { info.period = newPeriod; } } + // Volume Profile: apply settings + recompute if anything that + // affects the bucket layout changed (rows-layout / row-size / + // developing-poc/va toggles). + if (type === 'volume-profile-fixed' || type === 'volume-profile-visible') { + var vpSlot = _volumeProfilePrimitives[seriesId]; + if (vpSlot) { + var prevOpts = vpSlot.opts || {}; + var newRowsLayout = newSettings.vpRowsLayout || vpSlot.rowsLayout || 'rows'; + var newRowSize = newSettings.vpRowSize != null ? Number(newSettings.vpRowSize) : vpSlot.rowSize; + var newVolumeMode = newSettings.vpVolumeMode || vpSlot.volumeMode || 'updown'; + var newValueAreaPct = newSettings.vpValueAreaPct != null + ? newSettings.vpValueAreaPct / 100 + : (prevOpts.valueAreaPct || 0.70); + var newShowDevPOC = newSettings.vpShowDevelopingPOC === true; + var newShowDevVA = newSettings.vpShowDevelopingVA === true; + + vpSlot.opts = { + rowsLayout: newRowsLayout, + rowSize: newRowSize, + volumeMode: newVolumeMode, + widthPercent: newSettings.vpWidthPercent != null ? newSettings.vpWidthPercent : prevOpts.widthPercent, + placement: newSettings.vpPlacement || prevOpts.placement || 'right', + upColor: newSettings.vpUpColor || prevOpts.upColor, + downColor: newSettings.vpDownColor || prevOpts.downColor, + vaUpColor: newSettings.vpVAUpColor || prevOpts.vaUpColor, + vaDownColor: newSettings.vpVADownColor || prevOpts.vaDownColor, + pocColor: newSettings.vpPOCColor || prevOpts.pocColor, + developingPOCColor: newSettings.vpDevelopingPOCColor || prevOpts.developingPOCColor, + developingVAColor: newSettings.vpDevelopingVAColor || prevOpts.developingVAColor, + showPOC: newSettings.vpShowPOC !== undefined ? newSettings.vpShowPOC : prevOpts.showPOC, + showValueArea: newSettings.vpShowValueArea !== undefined ? newSettings.vpShowValueArea : prevOpts.showValueArea, + showDevelopingPOC: newShowDevPOC, + showDevelopingVA: newShowDevVA, + valueAreaPct: newValueAreaPct, + }; + + // Recompute when any compute-affecting field changed + var needsRecompute = newRowsLayout !== vpSlot.rowsLayout + || newRowSize !== vpSlot.rowSize + || newValueAreaPct !== (prevOpts.valueAreaPct || 0.70) + || newShowDevPOC !== (prevOpts.showDevelopingPOC === true) + || newShowDevVA !== (prevOpts.showDevelopingVA === true); + if (needsRecompute) { + vpSlot.rowsLayout = newRowsLayout; + vpSlot.rowSize = newRowSize; + vpSlot.volumeMode = newVolumeMode; + var fromIdx = info.fromIndex != null ? info.fromIndex : 0; + var toIdx = info.toIndex != null ? info.toIndex : (rawData.length - 1); + var newVp = _tvComputeVolumeProfile(rawData, fromIdx, toIdx, { + rowsLayout: newRowsLayout, + rowSize: newRowSize, + valueAreaPct: newValueAreaPct, + withDeveloping: newShowDevPOC || newShowDevVA, + }); + if (newVp) vpSlot.vpData = newVp; + } else { + vpSlot.volumeMode = newVolumeMode; + } + + info.rowsLayout = newRowsLayout; + info.rowSize = newRowSize; + info.volumeMode = newVolumeMode; + info.period = newRowsLayout === 'rows' ? newRowSize : 0; + info.widthPercent = vpSlot.opts.widthPercent; + info.placement = vpSlot.opts.placement; + info.upColor = vpSlot.opts.upColor; + info.downColor = vpSlot.opts.downColor; + info.vaUpColor = vpSlot.opts.vaUpColor; + info.vaDownColor = vpSlot.opts.vaDownColor; + info.pocColor = vpSlot.opts.pocColor; + info.developingPOCColor = vpSlot.opts.developingPOCColor; + info.developingVAColor = vpSlot.opts.developingVAColor; + info.showPOC = vpSlot.opts.showPOC; + info.showValueArea = vpSlot.opts.showValueArea; + info.showDevelopingPOC = newShowDevPOC; + info.showDevelopingVA = newShowDevVA; + info.valueAreaPct = newValueAreaPct; + if (newSettings.vpLabelsOnPriceScale !== undefined) info.labelsOnPriceScale = newSettings.vpLabelsOnPriceScale; + if (newSettings.vpValuesInStatusLine !== undefined) info.valuesInStatusLine = newSettings.vpValuesInStatusLine; + if (newSettings.vpInputsInStatusLine !== undefined) info.inputsInStatusLine = newSettings.vpInputsInStatusLine; + + if (vpSlot.primitive && vpSlot.primitive.triggerUpdate) vpSlot.primitive.triggerUpdate(); + } + } + _tvRebuildIndicatorLegend(info.chartId); // Re-render BB fills after settings change if (type === 'bollinger-bands') { diff --git a/pywry/pywry/frontend/style/tvchart.css b/pywry/pywry/frontend/style/tvchart.css index 065ffa6..17fc7f2 100644 --- a/pywry/pywry/frontend/style/tvchart.css +++ b/pywry/pywry/frontend/style/tvchart.css @@ -102,6 +102,22 @@ html.dark, /* Session breaks and crosshair */ --pywry-tvchart-session-breaks: #4c87ff; --pywry-tvchart-crosshair-color: rgba(235, 180, 194, 0.8); + /* Volume Profile (VPVR / VPFR) — deliberately blue/violet so the + histogram doesn't camouflage the green/red candles, with a low + fill opacity so price action stays readable through it. */ + --pywry-tvchart-vp-up: rgba(95, 145, 255, 0.28); + --pywry-tvchart-vp-down: rgba(220, 110, 220, 0.28); + --pywry-tvchart-vp-va-up: rgba(95, 145, 255, 0.50); + --pywry-tvchart-vp-va-down: rgba(220, 110, 220, 0.50); + --pywry-tvchart-vp-poc: rgba(243, 193, 39, 0.85); + /* Indicator multi-plot palette (MACD / Stoch / ADX / Aroon / Ichimoku / KC / SAR) */ + --pywry-tvchart-ind-primary: #4c87ff; + --pywry-tvchart-ind-secondary: #f3c127; + --pywry-tvchart-ind-tertiary: #9598a1; + --pywry-tvchart-ind-positive: #089981; + --pywry-tvchart-ind-negative: #f23645; + --pywry-tvchart-ind-positive-dim: rgba(8, 153, 129, 0.6); + --pywry-tvchart-ind-negative-dim: rgba(242, 54, 69, 0.6); } html.light, @@ -198,6 +214,20 @@ html.light, /* Session breaks and crosshair */ --pywry-tvchart-session-breaks: #4c87ff; --pywry-tvchart-crosshair-color: #9598a1; + /* Volume Profile (VPVR / VPFR) — different hue from candles + low opacity. */ + --pywry-tvchart-vp-up: rgba(41, 98, 255, 0.22); + --pywry-tvchart-vp-down: rgba(180, 70, 200, 0.22); + --pywry-tvchart-vp-va-up: rgba(41, 98, 255, 0.45); + --pywry-tvchart-vp-va-down: rgba(180, 70, 200, 0.45); + --pywry-tvchart-vp-poc: rgba(31, 41, 55, 0.85); + /* Indicator multi-plot palette */ + --pywry-tvchart-ind-primary: #2962ff; + --pywry-tvchart-ind-secondary: #f09614; + --pywry-tvchart-ind-tertiary: #6b7280; + --pywry-tvchart-ind-positive: #26a69a; + --pywry-tvchart-ind-negative: #ef5350; + --pywry-tvchart-ind-positive-dim: rgba(38, 166, 154, 0.6); + --pywry-tvchart-ind-negative-dim: rgba(239, 83, 80, 0.6); } .pywry-icon-btn { From 30480b8f3f0f8f1f8261f150d6515be25b54ad21 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 20:22:20 -0700 Subject: [PATCH 48/68] tvchart VP: legend label, visibility toggle, dot colour MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - _tvSetIndicatorVisibility now toggles the VP primitive's hidden flag and triggers a redraw — the eye icon actually hides VP. - VP renderer skips drawing when getHidden() is true. - Legend row now shows "VPVR Number Of Rows 24 Up/Down 70" (matches TradingView), reads from rowsLayout / rowSize / volumeMode / valueAreaPct. - Legend dot uses the up-volume swatch when the indicator has no line colour. Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/pywry/frontend/src/tvchart/04-series.js | 3 +- .../frontend/src/tvchart/09-indicators.js | 30 +++++++++++++++++-- 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/pywry/pywry/frontend/src/tvchart/04-series.js b/pywry/pywry/frontend/src/tvchart/04-series.js index 24ff98d..da7d7dd 100644 --- a/pywry/pywry/frontend/src/tvchart/04-series.js +++ b/pywry/pywry/frontend/src/tvchart/04-series.js @@ -1735,7 +1735,8 @@ function _tvAddIndicator(indicatorDef, chartId) { chartId, primarySeriesId, function() { return vpSlot.vpData; }, - function() { return vpSlot.opts; } + function() { return vpSlot.opts; }, + function() { return !!vpSlot.hidden; } ); try { entry.seriesMap[primarySeriesId].attachPrimitive(vpSlot.primitive); diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators.js b/pywry/pywry/frontend/src/tvchart/09-indicators.js index a316f79..f1eece1 100644 --- a/pywry/pywry/frontend/src/tvchart/09-indicators.js +++ b/pywry/pywry/frontend/src/tvchart/09-indicators.js @@ -544,10 +544,11 @@ function _tvComputePOCAndValueArea(profile, totalVolume, valueAreaPct) { * bar at a price bucket, split into up-volume (teal) and down-volume * (pink), with a POC line and translucent value-area band overlay. */ -function _tvMakeVolumeProfilePrimitive(chartId, seriesId, getData, getOpts) { +function _tvMakeVolumeProfilePrimitive(chartId, seriesId, getData, getOpts, getHidden) { var _requestUpdate = null; function draw(scope) { + if (getHidden && getHidden()) return; var entry = window.__PYWRY_TVCHARTS__[chartId]; if (!entry || !entry.chart) return; var series = entry.seriesMap[seriesId]; @@ -1674,6 +1675,13 @@ function _tvSetIndicatorVisibility(chartId, seriesId, visible) { if (s && typeof s.applyOptions === 'function') { try { s.applyOptions({ visible: !!visible }); } catch (e) {} } + // Volume Profile primitives have no real series — toggle the + // primitive's own hidden flag and request a redraw. + var vpSlot = _volumeProfilePrimitives[sid]; + if (vpSlot) { + vpSlot.hidden = !visible; + if (vpSlot.primitive && vpSlot.primitive.triggerUpdate) vpSlot.primitive.triggerUpdate(); + } info.hidden = !visible; } } @@ -2267,17 +2275,33 @@ function _tvRebuildIndicatorLegend(chartId) { row.dataset.hidden = info.hidden ? '1' : '0'; var dot = document.createElement('span'); dot.className = 'tvchart-ind-dot'; - dot.style.background = info.color; + // Volume Profile primitives have no line colour — use the + // up-volume swatch so the dot still reflects the indicator. + var dotColor = info.color; + if (!dotColor && (info.type === 'volume-profile-fixed' || info.type === 'volume-profile-visible')) { + dotColor = info.upColor || _cssVar('--pywry-tvchart-vp-up'); + } + dot.style.background = dotColor || _cssVar('--pywry-tvchart-text'); row.appendChild(dot); var nameSp = document.createElement('span'); nameSp.className = 'tvchart-ind-name'; - nameSp.style.color = info.color; + nameSp.style.color = dotColor || _cssVar('--pywry-tvchart-text'); // Extract base name (remove any trailing period in parentheses from the stored name) var baseName = info.group ? 'BB' : (info.name || '').replace(/\s*\(\d+\)\s*$/, ''); var indLabel; if (info.group && info.type === 'bollinger-bands') { // TradingView format: "BB 20 2 0 SMA" indLabel = 'BB ' + (info.period || 20) + ' ' + (info.multiplier || 2) + ' ' + (info.offset || 0) + ' ' + (info.maType || 'SMA'); + } else if (info.type === 'volume-profile-fixed' || info.type === 'volume-profile-visible') { + // TradingView VPVR format: "VPVR Number Of Rows 24 Up/Down 70" + var vpShort = info.type === 'volume-profile-visible' ? 'VPVR' : 'VPFR'; + var rowsLabel = info.rowsLayout === 'ticks' ? 'Ticks Per Row' : 'Number Of Rows'; + var volLabel = info.volumeMode === 'total' + ? 'Total' + : (info.volumeMode === 'delta' ? 'Delta' : 'Up/Down'); + var vaPct = Math.round((info.valueAreaPct != null ? info.valueAreaPct : 0.70) * 100); + indLabel = vpShort + ' ' + rowsLabel + ' ' + (info.rowSize || info.period || 24) + + ' ' + volLabel + ' ' + vaPct; } else { indLabel = baseName + (info.period ? ' ' + info.period : ''); } From 23cf8657ad6160e47a4eff9d708e0a9a9d875660 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 20:24:35 -0700 Subject: [PATCH 49/68] tvchart: declare chartId in _tvShowIndicatorSettings MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ReferenceError when clicking the gear — _tvAppendOverlay(chartId, …) read an undeclared identifier. Other indicators happened to never hit this path because the dialog throws AFTER the body is rendered in some flows; VPVR exposes it consistently. Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/pywry/frontend/src/tvchart/09-indicators.js | 1 + 1 file changed, 1 insertion(+) diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators.js b/pywry/pywry/frontend/src/tvchart/09-indicators.js index f1eece1..9d53ace 100644 --- a/pywry/pywry/frontend/src/tvchart/09-indicators.js +++ b/pywry/pywry/frontend/src/tvchart/09-indicators.js @@ -2539,6 +2539,7 @@ function _tvUpdateIndicatorLegendValues(chartId, param) { function _tvShowIndicatorSettings(seriesId) { var info = _activeIndicators[seriesId]; if (!info) return; + var chartId = info.chartId; var ds = window.__PYWRY_DRAWINGS__[info.chartId] || _tvEnsureDrawingLayer(info.chartId); if (!ds || !ds.uiLayer) return; From ad53fb31a33899f8b58bf27b08d7d9789d0109f9 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 20:35:19 -0700 Subject: [PATCH 50/68] tvchart VP: live preview + volume totals in the legend - Every Inputs / Style row in the VP settings dialog now funnels through _tvApplyVPDraftLive() so changes paint instantly: colours swap, width / placement reflow, rows-layout / row-size / value-area / developing-poc/va recompute the bucket profile and redraw without waiting for the OK button. - Legend row now carries a value span showing up / down / total volume formatted as 1.23M / 4.56K, refreshed on every recompute (visible-range pan / zoom, settings change, layout restore). Co-Authored-By: Claude Opus 4.7 (1M context) --- .../frontend/src/tvchart/09-indicators.js | 176 ++++++++++++++++-- 1 file changed, 159 insertions(+), 17 deletions(-) diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators.js b/pywry/pywry/frontend/src/tvchart/09-indicators.js index 9d53ace..400243b 100644 --- a/pywry/pywry/frontend/src/tvchart/09-indicators.js +++ b/pywry/pywry/frontend/src/tvchart/09-indicators.js @@ -731,6 +731,130 @@ function _tvMakeVolumeProfilePrimitive(chartId, seriesId, getData, getOpts, getH }; } +/** Format a volume number for the legend (1.23M / 4.56K / 789). */ +function _tvFormatVolume(v) { + var n = Number(v) || 0; + var sign = n < 0 ? '-' : ''; + var a = Math.abs(n); + if (a >= 1e9) return sign + (a / 1e9).toFixed(2) + 'B'; + if (a >= 1e6) return sign + (a / 1e6).toFixed(2) + 'M'; + if (a >= 1e3) return sign + (a / 1e3).toFixed(2) + 'K'; + return sign + a.toFixed(0); +} + +/** Sum up, down, and total volume across a VP profile for the legend readout. */ +function _tvVolumeProfileTotals(vp) { + var totals = { up: 0, down: 0, total: 0 }; + if (!vp || !vp.profile) return totals; + for (var i = 0; i < vp.profile.length; i++) { + totals.up += vp.profile[i].upVol || 0; + totals.down += vp.profile[i].downVol || 0; + } + totals.total = totals.up + totals.down; + return totals; +} + +/** Update the legend value span for a VP indicator with current totals. */ +function _tvUpdateVolumeProfileLegendValues(seriesId) { + var slot = _volumeProfilePrimitives[seriesId]; + if (!slot) return; + var el = document.getElementById('tvchart-ind-val-' + seriesId); + if (!el) return; + var t = _tvVolumeProfileTotals(slot.vpData); + el.textContent = _tvFormatVolume(t.up) + ' ' + + _tvFormatVolume(t.down) + ' ' + + _tvFormatVolume(t.total); +} + +/** + * Live-preview helper for the VP settings dialog: every Inputs/Style + * row callback funnels through here so changes paint instantly without + * waiting for the OK button. Recomputes the bucket profile when a + * compute-affecting field changed (rows layout, row size, value area, + * developing toggles). Cheap when only colours / placement / width + * change — just updates the opts dict and triggers a redraw. + */ +function _tvApplyVPDraftLive(seriesId, draft) { + var slot = _volumeProfilePrimitives[seriesId]; + var info = _activeIndicators[seriesId]; + if (!slot || !info) return; + var entry = window.__PYWRY_TVCHARTS__[info.chartId]; + if (!entry) return; + var prevOpts = slot.opts || {}; + var newRowsLayout = draft.vpRowsLayout || slot.rowsLayout || 'rows'; + var newRowSize = draft.vpRowSize != null ? Number(draft.vpRowSize) : slot.rowSize; + var newVolumeMode = draft.vpVolumeMode || slot.volumeMode || 'updown'; + var newValueAreaPct = draft.vpValueAreaPct != null + ? draft.vpValueAreaPct / 100 + : (prevOpts.valueAreaPct || 0.70); + var newShowDevPOC = draft.vpShowDevelopingPOC === true; + var newShowDevVA = draft.vpShowDevelopingVA === true; + + slot.opts = { + rowsLayout: newRowsLayout, + rowSize: newRowSize, + volumeMode: newVolumeMode, + widthPercent: draft.vpWidthPercent != null ? Number(draft.vpWidthPercent) : prevOpts.widthPercent, + placement: draft.vpPlacement || prevOpts.placement || 'right', + upColor: draft.vpUpColor || prevOpts.upColor, + downColor: draft.vpDownColor || prevOpts.downColor, + vaUpColor: draft.vpVAUpColor || prevOpts.vaUpColor, + vaDownColor: draft.vpVADownColor || prevOpts.vaDownColor, + pocColor: draft.vpPOCColor || prevOpts.pocColor, + developingPOCColor: draft.vpDevelopingPOCColor || prevOpts.developingPOCColor, + developingVAColor: draft.vpDevelopingVAColor || prevOpts.developingVAColor, + showPOC: draft.vpShowPOC !== undefined ? draft.vpShowPOC : prevOpts.showPOC, + showValueArea: draft.vpShowValueArea !== undefined ? draft.vpShowValueArea : prevOpts.showValueArea, + showDevelopingPOC: newShowDevPOC, + showDevelopingVA: newShowDevVA, + valueAreaPct: newValueAreaPct, + }; + + var needsRecompute = newRowsLayout !== slot.rowsLayout + || newRowSize !== slot.rowSize + || newValueAreaPct !== (prevOpts.valueAreaPct || 0.70) + || newShowDevPOC !== (prevOpts.showDevelopingPOC === true) + || newShowDevVA !== (prevOpts.showDevelopingVA === true); + if (needsRecompute) { + slot.rowsLayout = newRowsLayout; + slot.rowSize = newRowSize; + var rawData = _tvSeriesRawData(entry, info.sourceSeriesId || 'main'); + var fromIdx = info.fromIndex != null ? info.fromIndex : 0; + var toIdx = info.toIndex != null ? info.toIndex : (rawData.length - 1); + var newVp = _tvComputeVolumeProfile(rawData, fromIdx, toIdx, { + rowsLayout: newRowsLayout, + rowSize: newRowSize, + valueAreaPct: newValueAreaPct, + withDeveloping: newShowDevPOC || newShowDevVA, + }); + if (newVp) slot.vpData = newVp; + } + slot.volumeMode = newVolumeMode; + + info.rowsLayout = newRowsLayout; + info.rowSize = newRowSize; + info.volumeMode = newVolumeMode; + info.valueAreaPct = newValueAreaPct; + info.placement = slot.opts.placement; + info.widthPercent = slot.opts.widthPercent; + info.upColor = slot.opts.upColor; + info.downColor = slot.opts.downColor; + info.vaUpColor = slot.opts.vaUpColor; + info.vaDownColor = slot.opts.vaDownColor; + info.pocColor = slot.opts.pocColor; + info.developingPOCColor = slot.opts.developingPOCColor; + info.developingVAColor = slot.opts.developingVAColor; + info.showPOC = slot.opts.showPOC; + info.showValueArea = slot.opts.showValueArea; + info.showDevelopingPOC = newShowDevPOC; + info.showDevelopingVA = newShowDevVA; + info.period = newRowsLayout === 'rows' ? newRowSize : 0; + + if (slot.primitive && slot.primitive.triggerUpdate) slot.primitive.triggerUpdate(); + _tvUpdateVolumeProfileLegendValues(seriesId); + _tvRebuildIndicatorLegend(info.chartId); +} + /** Remove a volume-profile primitive by indicator id. */ function _tvRemoveVolumeProfilePrimitive(indicatorId) { var slot = _volumeProfilePrimitives[indicatorId]; @@ -777,6 +901,7 @@ function _tvRefreshVisibleVolumeProfiles(chartId) { ai.fromIndex = fromIdx; ai.toIndex = toIdx; if (slot.primitive && slot.primitive.triggerUpdate) slot.primitive.triggerUpdate(); + _tvUpdateVolumeProfileLegendValues(ids[i]); } } @@ -2339,6 +2464,16 @@ function _tvRebuildIndicatorLegend(chartId) { var valSp = document.createElement('span'); valSp.className = 'tvchart-ind-val'; valSp.id = 'tvchart-ind-val-' + seriesId; + // Volume Profile: show running totals (up / down / total). + if (info.type === 'volume-profile-fixed' || info.type === 'volume-profile-visible') { + var vpSlotForLabel = _volumeProfilePrimitives[seriesId]; + if (vpSlotForLabel) { + var t = _tvVolumeProfileTotals(vpSlotForLabel.vpData); + valSp.textContent = _tvFormatVolume(t.up) + ' ' + + _tvFormatVolume(t.down) + ' ' + + _tvFormatVolume(t.total); + } + } row.appendChild(valSp); } var ctrl = document.createElement('span'); @@ -3005,12 +3140,12 @@ function _tvShowIndicatorSettings(seriesId) { { v: 'ticks', l: 'Ticks Per Row' }, ], draft.vpRowsLayout, function(v) { draft.vpRowsLayout = v; - // Reset row size to a sensible default for the new layout if (v === 'ticks') { if (!draft.vpRowSize || draft.vpRowSize > 100) draft.vpRowSize = 1; } else { if (!draft.vpRowSize || draft.vpRowSize < 4) draft.vpRowSize = 24; } + _tvApplyVPDraftLive(seriesId, draft); renderBody(); }); addNumberRow( @@ -3020,14 +3155,20 @@ function _tvShowIndicatorSettings(seriesId) { draft.vpRowsLayout === 'ticks' ? '1000' : '500', draft.vpRowsLayout === 'ticks' ? '0.0001' : '1', draft.vpRowSize, - function(v) { draft.vpRowSize = v; } + function(v) { draft.vpRowSize = v; _tvApplyVPDraftLive(seriesId, draft); } ); addSelectRow(body, 'Volume', [ { v: 'updown', l: 'Up/Down' }, { v: 'total', l: 'Total' }, { v: 'delta', l: 'Delta' }, - ], draft.vpVolumeMode, function(v) { draft.vpVolumeMode = v; }); - addNumberRow(body, 'Value Area Volume', '10', '95', '1', draft.vpValueAreaPct, function(v) { draft.vpValueAreaPct = v; }); + ], draft.vpVolumeMode, function(v) { + draft.vpVolumeMode = v; + _tvApplyVPDraftLive(seriesId, draft); + }); + addNumberRow(body, 'Value Area Volume', '10', '95', '1', draft.vpValueAreaPct, function(v) { + draft.vpValueAreaPct = v; + _tvApplyVPDraftLive(seriesId, draft); + }); hasInputs = true; } @@ -3043,29 +3184,30 @@ function _tvShowIndicatorSettings(seriesId) { } else if (activeTab === 'style') { // Volume Profile style — full custom panel (skip the generic plot rows) if (isVP) { + function liveVP() { _tvApplyVPDraftLive(seriesId, draft); } addSection(body, 'VOLUME PROFILE'); - addNumberRow(body, 'Width (% of pane)', '2', '60', '1', draft.vpWidthPercent, function(v) { draft.vpWidthPercent = v; }); + addNumberRow(body, 'Width (% of pane)', '2', '60', '1', draft.vpWidthPercent, function(v) { draft.vpWidthPercent = v; liveVP(); }); addSelectRow(body, 'Placement', [ { v: 'right', l: 'Right' }, { v: 'left', l: 'Left' }, - ], draft.vpPlacement, function(v) { draft.vpPlacement = v; }); - addColorRow(body, 'Up Volume', draft.vpUpColor, function(v, op) { draft.vpUpColor = _tvColorWithOpacity(v, op, v); }); - addColorRow(body, 'Down Volume', draft.vpDownColor, function(v, op) { draft.vpDownColor = _tvColorWithOpacity(v, op, v); }); - addColorRow(body, 'Value Area Up', draft.vpVAUpColor, function(v, op) { draft.vpVAUpColor = _tvColorWithOpacity(v, op, v); }); - addColorRow(body, 'Value Area Down', draft.vpVADownColor, function(v, op) { draft.vpVADownColor = _tvColorWithOpacity(v, op, v); }); + ], draft.vpPlacement, function(v) { draft.vpPlacement = v; liveVP(); }); + addColorRow(body, 'Up Volume', draft.vpUpColor, function(v, op) { draft.vpUpColor = _tvColorWithOpacity(v, op, v); liveVP(); }); + addColorRow(body, 'Down Volume', draft.vpDownColor, function(v, op) { draft.vpDownColor = _tvColorWithOpacity(v, op, v); liveVP(); }); + addColorRow(body, 'Value Area Up', draft.vpVAUpColor, function(v, op) { draft.vpVAUpColor = _tvColorWithOpacity(v, op, v); liveVP(); }); + addColorRow(body, 'Value Area Down', draft.vpVADownColor, function(v, op) { draft.vpVADownColor = _tvColorWithOpacity(v, op, v); liveVP(); }); addSection(body, 'POC'); - addCheckRow(body, 'Show POC', draft.vpShowPOC, function(v) { draft.vpShowPOC = v; }); - addColorRow(body, 'POC Color', draft.vpPOCColor, function(v, op) { draft.vpPOCColor = _tvColorWithOpacity(v, op, v); }); + addCheckRow(body, 'Show POC', draft.vpShowPOC, function(v) { draft.vpShowPOC = v; liveVP(); }); + addColorRow(body, 'POC Color', draft.vpPOCColor, function(v, op) { draft.vpPOCColor = _tvColorWithOpacity(v, op, v); liveVP(); }); addSection(body, 'DEVELOPING POC'); - addCheckRow(body, 'Show Developing POC', draft.vpShowDevelopingPOC, function(v) { draft.vpShowDevelopingPOC = v; }); - addColorRow(body, 'Developing POC Color', draft.vpDevelopingPOCColor, function(v, op) { draft.vpDevelopingPOCColor = _tvColorWithOpacity(v, op, v); }); + addCheckRow(body, 'Show Developing POC', draft.vpShowDevelopingPOC, function(v) { draft.vpShowDevelopingPOC = v; liveVP(); }); + addColorRow(body, 'Developing POC Color', draft.vpDevelopingPOCColor, function(v, op) { draft.vpDevelopingPOCColor = _tvColorWithOpacity(v, op, v); liveVP(); }); addSection(body, 'VALUE AREA'); - addCheckRow(body, 'Highlight Value Area', draft.vpShowValueArea, function(v) { draft.vpShowValueArea = v; }); - addCheckRow(body, 'Show Developing VA', draft.vpShowDevelopingVA, function(v) { draft.vpShowDevelopingVA = v; }); - addColorRow(body, 'Developing VA Color', draft.vpDevelopingVAColor, function(v, op) { draft.vpDevelopingVAColor = _tvColorWithOpacity(v, op, v); }); + addCheckRow(body, 'Highlight Value Area', draft.vpShowValueArea, function(v) { draft.vpShowValueArea = v; liveVP(); }); + addCheckRow(body, 'Show Developing VA', draft.vpShowDevelopingVA, function(v) { draft.vpShowDevelopingVA = v; liveVP(); }); + addColorRow(body, 'Developing VA Color', draft.vpDevelopingVAColor, function(v, op) { draft.vpDevelopingVAColor = _tvColorWithOpacity(v, op, v); liveVP(); }); addSection(body, 'OUTPUT VALUES'); addCheckRow(body, 'Labels on price scale', draft.vpLabelsOnPriceScale, function(v) { draft.vpLabelsOnPriceScale = v; }); From 093574146fd94ad0ce050e12436db4e7ae9239ba Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Sun, 19 Apr 2026 21:21:40 -0700 Subject: [PATCH 51/68] tvchart: readable axis text in light mode + auto-revert drawing tool 03-theme.js: set explicit textColor on rightPriceScale + leftPriceScale when building chart options. layout.textColor doesn't always cascade to price-scale labels, so labels rendered with the dark-theme grey on the white light-mode background. 05-lifecycle.js: on theme switch, clear the stored Text-Color / Lines-Color overrides in _chartPrefs so the new palette wins; pass explicit textColor to both price scales alongside the layout update. 07-drawing.js: _emitDrawingAdded now calls _tvRevertToCursor so the left-toolbar drawing button drops its "active" state the moment the drawing finishes. Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/pywry/frontend/src/tvchart/03-theme.js | 5 +++++ .../pywry/frontend/src/tvchart/05-lifecycle.js | 18 +++++++++++++++++- pywry/pywry/frontend/src/tvchart/07-drawing.js | 3 +++ 3 files changed, 25 insertions(+), 1 deletion(-) diff --git a/pywry/pywry/frontend/src/tvchart/03-theme.js b/pywry/pywry/frontend/src/tvchart/03-theme.js index 8aa6a93..bacc23f 100644 --- a/pywry/pywry/frontend/src/tvchart/03-theme.js +++ b/pywry/pywry/frontend/src/tvchart/03-theme.js @@ -112,8 +112,13 @@ function _tvBuildChartOptions(chartOptions, theme) { crosshair: palette.crosshair, rightPriceScale: { borderColor: palette.grid.vertLines.color, + textColor: palette.textColor, scaleMargins: { top: 0.1, bottom: 0.1 }, }, + leftPriceScale: { + borderColor: palette.grid.vertLines.color, + textColor: palette.textColor, + }, timeScale: { borderColor: palette.grid.vertLines.color, timeVisible: false, diff --git a/pywry/pywry/frontend/src/tvchart/05-lifecycle.js b/pywry/pywry/frontend/src/tvchart/05-lifecycle.js index fdfb457..e169dfc 100644 --- a/pywry/pywry/frontend/src/tvchart/05-lifecycle.js +++ b/pywry/pywry/frontend/src/tvchart/05-lifecycle.js @@ -739,6 +739,19 @@ function _tvApplyThemeToChart(chartId, newTheme) { entry.theme = newTheme; var palette = TVCHART_THEMES._get(newTheme || 'dark'); + // Reset any stored override of text/grid/background colours so the new + // palette takes effect on the price scale as well as the time scale. + // Without this, _chartPrefs.textColor remembers the previous theme's + // value and the price scale stays unreadable after the toggle. + if (entry._chartPrefs) { + entry._chartPrefs.textColor = palette.textColor; + entry._chartPrefs.linesColor = palette.grid.vertLines.color; + if (entry._chartPrefs.settings) { + entry._chartPrefs.settings['Text-Color'] = palette.textColor; + entry._chartPrefs.settings['Lines-Color'] = palette.grid.vertLines.color; + } + } + // Update chart layout, grid, and scale borders // Crosshair mode stays Normal (hover readout always active); // only lines visibility respects the user setting. @@ -756,7 +769,10 @@ function _tvApplyThemeToChart(chartId, newTheme) { vertLine: { color: _chColor, visible: _chEnabled, labelVisible: true, style: 2, width: 1 }, horzLine: { color: _chColor, visible: _chEnabled, labelVisible: _chEnabled, style: 2, width: 1 }, }, - rightPriceScale: { borderColor: palette.grid.vertLines.color }, + // Both scales need an EXPLICIT textColor — the layout-level value + // doesn't always cascade to the price scale labels in LWC. + rightPriceScale: { borderColor: palette.grid.vertLines.color, textColor: palette.textColor }, + leftPriceScale: { borderColor: palette.grid.vertLines.color, textColor: palette.textColor }, timeScale: { borderColor: palette.grid.vertLines.color }, }); diff --git a/pywry/pywry/frontend/src/tvchart/07-drawing.js b/pywry/pywry/frontend/src/tvchart/07-drawing.js index bbb66aa..67f039e 100644 --- a/pywry/pywry/frontend/src/tvchart/07-drawing.js +++ b/pywry/pywry/frontend/src/tvchart/07-drawing.js @@ -6061,6 +6061,9 @@ function _emitDrawingAdded(chartId, d) { if (window.pywry && window.pywry.emit) { window.pywry.emit('tvchart:drawing-added', { chartId: chartId, drawing: d }); } + // Auto-revert to cursor after every drawing finishes so the + // toolbar button doesn't stay highlighted forever. + _tvRevertToCursor(chartId); } // ---- Tool switching ---- From 9175bbc72779d64094a6d58ba88bbc6526f7639e Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Mon, 20 Apr 2026 09:54:18 -0700 Subject: [PATCH 52/68] tvchart: split drawing/settings/indicators into subfolders MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Files grew to 3.9k–6.2k lines each; break them up into modular subfolders loaded recursively via `rglob`, alphabetical order preserved so dependencies still resolve. Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/pywry/assets.py | 10 +- .../pywry/frontend/src/tvchart/07-drawing.js | 6117 ---------------- .../src/tvchart/07-drawing/00-state-tools.js | 402 ++ .../src/tvchart/07-drawing/01-color-picker.js | 353 + .../src/tvchart/07-drawing/02-helpers.js | 579 ++ .../src/tvchart/07-drawing/03-utils.js | 186 + .../tvchart/07-drawing/04-settings-apply.js | 391 ++ .../src/tvchart/07-drawing/05-hit-test.js | 622 ++ .../src/tvchart/07-drawing/06-render.js | 2071 ++++++ .../src/tvchart/07-drawing/07-toolbar-menu.js | 570 ++ .../src/tvchart/07-drawing/08-mouse-tools.js | 943 +++ .../pywry/frontend/src/tvchart/08-settings.js | 6238 ----------------- .../tvchart/08-settings/00-state-helpers.js | 189 + .../tvchart/08-settings/01-symbol-search.js | 508 ++ .../tvchart/08-settings/02-series-settings.js | 1358 ++++ .../tvchart/08-settings/03-volume-settings.js | 462 ++ .../tvchart/08-settings/04-chart-settings.js | 1177 ++++ .../src/tvchart/08-settings/05-compare.js | 538 ++ .../08-settings/06-indicator-symbol-picker.js | 291 + .../08-settings/07-drawing-settings.js | 1715 +++++ .../frontend/src/tvchart/09-indicators.js | 3887 ---------- .../09-indicators/00-helpers-catalog.js | 69 + .../tvchart/09-indicators/01-compute-basic.js | 140 + .../tvchart/09-indicators/02-bb-primitive.js | 147 + .../09-indicators/03-ichimoku-primitive.js | 167 + .../09-indicators/04-volume-profile.js | 544 ++ .../tvchart/09-indicators/05-compute-extra.js | 538 ++ .../09-indicators/06-indicator-helpers.js | 173 + .../tvchart/09-indicators/07-remove-legend.js | 306 + .../09-indicators/08-pane-management.js | 601 ++ .../09-indicators/09-legend-rebuild.js | 338 + .../09-indicators/10-settings-dialog.js | 1000 +++ .../09-indicators/11-apply-settings.js | 546 ++ .../src/tvchart/09-indicators/12-panel.js | 186 + 34 files changed, 17118 insertions(+), 16244 deletions(-) delete mode 100644 pywry/pywry/frontend/src/tvchart/07-drawing.js create mode 100644 pywry/pywry/frontend/src/tvchart/07-drawing/00-state-tools.js create mode 100644 pywry/pywry/frontend/src/tvchart/07-drawing/01-color-picker.js create mode 100644 pywry/pywry/frontend/src/tvchart/07-drawing/02-helpers.js create mode 100644 pywry/pywry/frontend/src/tvchart/07-drawing/03-utils.js create mode 100644 pywry/pywry/frontend/src/tvchart/07-drawing/04-settings-apply.js create mode 100644 pywry/pywry/frontend/src/tvchart/07-drawing/05-hit-test.js create mode 100644 pywry/pywry/frontend/src/tvchart/07-drawing/06-render.js create mode 100644 pywry/pywry/frontend/src/tvchart/07-drawing/07-toolbar-menu.js create mode 100644 pywry/pywry/frontend/src/tvchart/07-drawing/08-mouse-tools.js delete mode 100644 pywry/pywry/frontend/src/tvchart/08-settings.js create mode 100644 pywry/pywry/frontend/src/tvchart/08-settings/00-state-helpers.js create mode 100644 pywry/pywry/frontend/src/tvchart/08-settings/01-symbol-search.js create mode 100644 pywry/pywry/frontend/src/tvchart/08-settings/02-series-settings.js create mode 100644 pywry/pywry/frontend/src/tvchart/08-settings/03-volume-settings.js create mode 100644 pywry/pywry/frontend/src/tvchart/08-settings/04-chart-settings.js create mode 100644 pywry/pywry/frontend/src/tvchart/08-settings/05-compare.js create mode 100644 pywry/pywry/frontend/src/tvchart/08-settings/06-indicator-symbol-picker.js create mode 100644 pywry/pywry/frontend/src/tvchart/08-settings/07-drawing-settings.js delete mode 100644 pywry/pywry/frontend/src/tvchart/09-indicators.js create mode 100644 pywry/pywry/frontend/src/tvchart/09-indicators/00-helpers-catalog.js create mode 100644 pywry/pywry/frontend/src/tvchart/09-indicators/01-compute-basic.js create mode 100644 pywry/pywry/frontend/src/tvchart/09-indicators/02-bb-primitive.js create mode 100644 pywry/pywry/frontend/src/tvchart/09-indicators/03-ichimoku-primitive.js create mode 100644 pywry/pywry/frontend/src/tvchart/09-indicators/04-volume-profile.js create mode 100644 pywry/pywry/frontend/src/tvchart/09-indicators/05-compute-extra.js create mode 100644 pywry/pywry/frontend/src/tvchart/09-indicators/06-indicator-helpers.js create mode 100644 pywry/pywry/frontend/src/tvchart/09-indicators/07-remove-legend.js create mode 100644 pywry/pywry/frontend/src/tvchart/09-indicators/08-pane-management.js create mode 100644 pywry/pywry/frontend/src/tvchart/09-indicators/09-legend-rebuild.js create mode 100644 pywry/pywry/frontend/src/tvchart/09-indicators/10-settings-dialog.js create mode 100644 pywry/pywry/frontend/src/tvchart/09-indicators/11-apply-settings.js create mode 100644 pywry/pywry/frontend/src/tvchart/09-indicators/12-panel.js diff --git a/pywry/pywry/assets.py b/pywry/pywry/assets.py index 17a0ac2..05a67ae 100644 --- a/pywry/pywry/assets.py +++ b/pywry/pywry/assets.py @@ -409,10 +409,16 @@ def get_tvchart_defaults_js() -> str: debug("Loading TV chart defaults JS from src") return js_file.read_text(encoding="utf-8") - # Fall back to modular files in tvchart/ directory (sorted by filename) + # Fall back to modular files in tvchart/ directory. Files load in + # alphabetical path order, recursively — so a subfolder like + # ``07-drawing/`` slots between ``06-storage.js`` and ``08-settings/`` + # without disturbing existing dependency order. Inside each folder, + # files are sorted by name so a ``00-state.js`` loads before the + # later helpers that use its globals. tvchart_dir = SRC_DIR / "tvchart" if tvchart_dir.is_dir(): - parts = [f.read_text(encoding="utf-8") for f in sorted(tvchart_dir.glob("*.js"))] + js_paths = sorted(tvchart_dir.rglob("*.js")) + parts = [f.read_text(encoding="utf-8") for f in js_paths] if parts: debug(f"Loading TV chart defaults JS from {len(parts)} modular files") return "\n".join(parts) diff --git a/pywry/pywry/frontend/src/tvchart/07-drawing.js b/pywry/pywry/frontend/src/tvchart/07-drawing.js deleted file mode 100644 index 67f039e..0000000 --- a/pywry/pywry/frontend/src/tvchart/07-drawing.js +++ /dev/null @@ -1,6117 +0,0 @@ -// --------------------------------------------------------------------------- -// Drawing system — canvas overlay for interactive drawing tools -// --------------------------------------------------------------------------- - -window.__PYWRY_DRAWINGS__ = window.__PYWRY_DRAWINGS__ || {}; -// _activeTool is stored per chart on ds (drawing state), not as a global -var _drawPending = null; -var _drawSelectedIdx = -1; // index into ds.drawings -var _drawSelectedChart = null; // chartId of selected drawing -var _drawDragging = null; // { anchor: 'p1'|'p2'|'body', startX, startY, origD } -var _drawDidDrag = false; // true after a drag completes — suppresses next click -var _drawHoverIdx = -1; -var _drawIdCounter = 0; - -// --------------------------------------------------------------------------- -// Global undo/redo stack — handles all chart mutations (drawings, indicators) -// Each entry: { undo: function(), redo: function(), label: string } -// --------------------------------------------------------------------------- -var _tvUndoStack = []; -var _tvRedoStack = []; -var _TV_UNDO_MAX = 100; - -function _tvPushUndo(entry) { - _tvUndoStack.push(entry); - if (_tvUndoStack.length > _TV_UNDO_MAX) _tvUndoStack.shift(); - _tvRedoStack.length = 0; // new action clears redo -} - -function _tvPerformUndo() { - if (_tvUndoStack.length === 0) return; - var entry = _tvUndoStack.pop(); - try { entry.undo(); } catch(e) { console.warn('[pywry] undo failed:', e); } - _tvRedoStack.push(entry); -} - -function _tvPerformRedo() { - if (_tvRedoStack.length === 0) return; - var entry = _tvRedoStack.pop(); - try { entry.redo(); } catch(e) { console.warn('[pywry] redo failed:', e); } - _tvUndoStack.push(entry); -} - -// --------------------------------------------------------------------------- -// Tool-group flyout definitions (matches TradingView left toolbar pattern) -// --------------------------------------------------------------------------- - -var _TV_ICON_ATTRS = 'xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"'; - -var _TOOL_GROUP_DEFS = { - 'lines': [ - { section: 'LINES', tools: [ - { id: 'trendline', name: 'Trend Line', shortcut: 'Alt+T', - icon: '' }, - { id: 'ray', name: 'Ray', - icon: '' }, - { id: 'extended_line', name: 'Extended Line', - icon: '' }, - { id: 'hline', name: 'Horizontal Line', shortcut: 'Alt+H', - icon: '' }, - { id: 'hray', name: 'Horizontal Ray', shortcut: 'Alt+J', - icon: '' }, - { id: 'vline', name: 'Vertical Line', shortcut: 'Alt+V', - icon: '' }, - { id: 'crossline', name: 'Cross Line', shortcut: 'Alt+C', - icon: '' }, - ]}, - ], - 'channels': [ - { section: 'CHANNELS', tools: [ - { id: 'channel', name: 'Parallel Channel', - icon: '' }, - { id: 'regression_channel', name: 'Regression Trend', - icon: '' }, - { id: 'flat_channel', name: 'Flat Top/Bottom', - icon: '' }, - ]}, - ], - 'fib': [ - { section: 'FIBONACCI', tools: [ - { id: 'fibonacci', name: 'Fib Retracement', shortcut: 'Alt+F', - icon: '01' }, - { id: 'fib_extension', name: 'Trend-Based Fib Extension', - icon: '' }, - { id: 'fib_channel', name: 'Fib Channel', - icon: '' }, - { id: 'fib_timezone', name: 'Fib Time Zone', - icon: '' }, - { id: 'fib_fan', name: 'Fib Speed Resistance Fan', - icon: '' }, - { id: 'fib_time', name: 'Trend-Based Fib Time', - icon: '' }, - { id: 'fib_circle', name: 'Fib Circles', - icon: '' }, - { id: 'fib_spiral', name: 'Fib Spiral', - icon: '' }, - { id: 'fib_arc', name: 'Fib Speed Resistance Arcs', - icon: '' }, - { id: 'fib_wedge', name: 'Fib Wedge', - icon: '' }, - { id: 'pitchfan', name: 'Pitchfan', - icon: '' }, - ]}, - ], - 'gann': [ - { section: 'GANN', tools: [ - { id: 'gann_box', name: 'Gann Box', - icon: '' }, - { id: 'gann_square_fixed', name: 'Gann Square Fixed', - icon: '' }, - { id: 'gann_square', name: 'Gann Square', - icon: '' }, - { id: 'gann_fan', name: 'Gann Fan', - icon: '' }, - ]}, - ], - 'shapes': [ - { section: 'SHAPES', tools: [ - { id: 'rect', name: 'Rectangle', shortcut: 'Alt+Shift+R', - icon: '' }, - { id: 'rotated_rect', name: 'Rotated Rectangle', - icon: '' }, - { id: 'path', name: 'Path', - icon: '' }, - { id: 'circle', name: 'Circle', - icon: '' }, - { id: 'ellipse', name: 'Ellipse', - icon: '' }, - { id: 'polyline', name: 'Polyline', - icon: '' }, - { id: 'triangle', name: 'Triangle', - icon: '' }, - { id: 'shape_arc', name: 'Arc', - icon: '' }, - { id: 'curve', name: 'Curve', - icon: '' }, - { id: 'double_curve', name: 'Double Curve', - icon: '' }, - ]}, - ], - 'annotations': [ - { section: 'BRUSHES', tools: [ - { id: 'brush', name: 'Brush', - icon: '' }, - { id: 'highlighter', name: 'Highlighter', - icon: '' }, - ]}, - { section: 'ARROWS', tools: [ - { id: 'arrow_marker', name: 'Arrow Marker', - icon: '' }, - { id: 'arrow', name: 'Arrow', - icon: '' }, - { id: 'arrow_mark_up', name: 'Arrow Mark Up', - icon: '' }, - { id: 'arrow_mark_down', name: 'Arrow Mark Down', - icon: '' }, - { id: 'arrow_mark_left', name: 'Arrow Mark Left', - icon: '' }, - { id: 'arrow_mark_right', name: 'Arrow Mark Right', - icon: '' }, - ]}, - { section: 'TEXT', tools: [ - { id: 'text', name: 'Text', - icon: '' }, - { id: 'anchored_text', name: 'Anchored Text', - icon: '' }, - { id: 'note', name: 'Note', - icon: '' }, - { id: 'price_note', name: 'Price Note', - icon: '$' }, - { id: 'pin', name: 'Pin', - icon: '' }, - { id: 'callout', name: 'Callout', - icon: '' }, - { id: 'comment', name: 'Comment', - icon: '' }, - { id: 'price_label', name: 'Price Label', - icon: '' }, - { id: 'signpost', name: 'Signpost', - icon: '' }, - { id: 'flag_mark', name: 'Flag Mark', - icon: '' }, - ]}, - ], - 'projection': [ - { section: 'PROJECTION', tools: [ - { id: 'long_position', name: 'Long Position', - icon: '' }, - { id: 'short_position', name: 'Short Position', - icon: '' }, - { id: 'forecast', name: 'Forecast', - icon: '' }, - { id: 'bars_pattern', name: 'Bars Pattern', - icon: '' }, - { id: 'ghost_feed', name: 'Ghost Feed', - icon: '' }, - { id: 'projection', name: 'Projection', - icon: '' }, - ]}, - { section: 'VOLUME-BASED', tools: [ - { id: 'anchored_vwap', name: 'Anchored VWAP', - icon: '' }, - { id: 'fixed_range_vol', name: 'Fixed Range Volume Profile', - icon: '' }, - ]}, - ], - 'measure': [ - { section: 'MEASURER', tools: [ - { id: 'measure', name: 'Measure', - icon: '' }, - { id: 'price_range', name: 'Price Range', - icon: '' }, - { id: 'date_range', name: 'Date Range', - icon: '' }, - { id: 'date_price_range', name: 'Date and Price Range', - icon: '' }, - ]}, - ], -}; - -// Track which sub-tool is active for each group (shown on the group button) -var _toolGroupActive = { - 'lines': 'trendline', - 'channels': 'channel', - 'fib': 'fibonacci', - 'gann': 'gann_box', - 'shapes': 'rect', - 'annotations': 'brush', - 'projection': 'long_position', - 'measure': 'measure', -}; - -// Map tool IDs back to their parent group name -var _toolToGroup = {}; -(function() { - var groups = Object.keys(_TOOL_GROUP_DEFS); - for (var g = 0; g < groups.length; g++) { - var sections = _TOOL_GROUP_DEFS[groups[g]]; - for (var s = 0; s < sections.length; s++) { - for (var t = 0; t < sections[s].tools.length; t++) { - _toolToGroup[sections[s].tools[t].id] = groups[g]; - } - } - } -})(); - -// Active flyout DOM element -var _activeGroupFlyout = null; -var _activeGroupBtn = null; - -function _tvFindToolDef(toolId) { - var groups = Object.keys(_TOOL_GROUP_DEFS); - for (var g = 0; g < groups.length; g++) { - var sections = _TOOL_GROUP_DEFS[groups[g]]; - for (var s = 0; s < sections.length; s++) { - for (var t = 0; t < sections[s].tools.length; t++) { - if (sections[s].tools[t].id === toolId) return sections[s].tools[t]; - } - } - } - return null; -} - -function _tvShowToolGroupFlyout(groupBtn) { - var groupName = groupBtn.getAttribute('data-tool-group'); - // Toggle off if already open for this group - if (_activeGroupFlyout && _activeGroupBtn === groupBtn) { - _tvHideToolGroupFlyout(); - return; - } - _tvHideToolGroupFlyout(); - - var sections = _TOOL_GROUP_DEFS[groupName]; - if (!sections) return; - - var flyout = document.createElement('div'); - flyout.className = 'pywry-tool-flyout'; - flyout.setAttribute('data-group', groupName); - - for (var s = 0; s < sections.length; s++) { - var sec = sections[s]; - var header = document.createElement('div'); - header.className = 'pywry-tool-flyout-header'; - header.textContent = sec.section; - flyout.appendChild(header); - - for (var t = 0; t < sec.tools.length; t++) { - var tool = sec.tools[t]; - var item = document.createElement('div'); - item.className = 'pywry-tool-flyout-item'; - if (tool.id === _toolGroupActive[groupName]) { - item.classList.add('selected'); - } - item.setAttribute('data-tool-id', tool.id); - item.setAttribute('data-tool-group', groupName); - - var iconSpan = document.createElement('span'); - iconSpan.className = 'pywry-tool-flyout-icon'; - iconSpan.innerHTML = tool.icon; - iconSpan.style.pointerEvents = 'none'; - item.appendChild(iconSpan); - - var nameSpan = document.createElement('span'); - nameSpan.className = 'pywry-tool-flyout-name'; - nameSpan.textContent = tool.name; - nameSpan.style.pointerEvents = 'none'; - item.appendChild(nameSpan); - - if (tool.shortcut) { - var shortcutSpan = document.createElement('span'); - shortcutSpan.className = 'pywry-tool-flyout-shortcut'; - shortcutSpan.textContent = tool.shortcut; - shortcutSpan.style.pointerEvents = 'none'; - item.appendChild(shortcutSpan); - } - - // Direct click handler on each item — no event delegation - (function(itemEl, toolId, group) { - itemEl.addEventListener('mousedown', function(e) { - e.preventDefault(); - e.stopPropagation(); - e.stopImmediatePropagation(); - - _toolGroupActive[group] = toolId; - - // Update the group button icon - var def = _tvFindToolDef(toolId); - if (def) { - var iconEl = groupBtn.querySelector('.pywry-tool-group-icon'); - if (iconEl) iconEl.innerHTML = def.icon; - } - - // Highlight group button as active, deactivate others - var cId = _tvResolveChartIdFromElement(groupBtn); - var allIcons = _tvScopedQueryAll(cId, '.pywry-toolbar-left .pywry-icon-btn'); - if (allIcons) allIcons.forEach(function(el) { el.classList.remove('active'); }); - groupBtn.classList.add('active'); - - _tvSetDrawTool(cId, toolId); - _tvHideToolGroupFlyout(); - }); - })(item, tool.id, groupName); - - flyout.appendChild(item); - } - } - - // Position to the right of the left toolbar - var _oc = _tvOverlayContainer(groupBtn); - var _isWidget = (_oc !== document.body); - var rect = groupBtn.getBoundingClientRect(); - var toolbar = groupBtn.closest('.tvchart-left'); - var toolbarRect = toolbar ? toolbar.getBoundingClientRect() : rect; - flyout.style.position = _isWidget ? 'absolute' : 'fixed'; - var _cRect = _tvContainerRect(_oc, toolbarRect); - var _bRect = _tvContainerRect(_oc, rect); - flyout.style.left = (_cRect.right + 1) + 'px'; - flyout.style.top = _bRect.top + 'px'; - - _oc.appendChild(flyout); - _activeGroupFlyout = flyout; - _activeGroupBtn = groupBtn; - - // Clamp to container bottom - var _cs = _tvContainerSize(_oc); - var flyRect = flyout.getBoundingClientRect(); - var flyH = flyRect.height; - if (_bRect.top + flyH > _cs.height - 8) { - flyout.style.top = Math.max(8, _cs.height - flyH - 8) + 'px'; - } - - // Block all flyout-level events from propagating to document handlers - flyout.addEventListener('mousedown', function(e) { e.stopPropagation(); }); - flyout.addEventListener('click', function(e) { e.stopPropagation(); }); -} - -function _tvHideToolGroupFlyout() { - if (_activeGroupFlyout) { - _activeGroupFlyout.remove(); - _activeGroupFlyout = null; - _activeGroupBtn = null; - } -} - -// Default properties for new drawings (resolved from CSS variables) -function _getDrawDefaults() { - return { - color: _cssVar('--pywry-draw-default-color'), - lineWidth: 2, - lineStyle: 0 - }; -} -var _drawDefaults = { get color() { return _getDrawDefaults().color; }, lineWidth: 2, lineStyle: 0 }; - -// Color palette for the floating toolbar picker (resolved from CSS variables) -function _getDrawColors() { - var colors = []; - for (var i = 0; i < 15; i++) { - colors.push(_cssVar('--pywry-preset-' + i)); - } - return colors; -} - -// --------------------------------------------------------------------------- -// Shared color+opacity picker popup — used by all settings modals -// --------------------------------------------------------------------------- -var _colorOpacityPopupEl = null; -var _colorOpacityCleanups = []; - -function _tvHideColorOpacityPopup() { - for (var i = 0; i < _colorOpacityCleanups.length; i++) { - try { _colorOpacityCleanups[i](); } catch(e) {} - } - _colorOpacityCleanups = []; - if (_colorOpacityPopupEl && _colorOpacityPopupEl.parentNode) { - _colorOpacityPopupEl.parentNode.removeChild(_colorOpacityPopupEl); - } - _colorOpacityPopupEl = null; -} - -/** - * Show a color+opacity popup anchored to `anchor`. - * @param {Element} anchor The element to position relative to - * @param {string} currentColor Hex color - * @param {number} currentOpacity 0-100 percent - * @param {Element} parentOverlay The overlay to append the popup to (or document.body) - * @param {function(color,opacity)} onUpdate Called on every change - */ -function _tvShowColorOpacityPopup(anchor, currentColor, currentOpacity, parentOverlay, onUpdate) { - if (!anchor) return; - if (_colorOpacityPopupEl && _colorOpacityPopupEl._anchor === anchor) { - _tvHideColorOpacityPopup(); - return; - } - _tvHideColorOpacityPopup(); - _tvHideColorPicker(); - - currentColor = _tvColorToHex(currentColor || '#aeb4c2', '#aeb4c2'); - currentOpacity = _tvClamp(_tvToNumber(currentOpacity, 100), 0, 100); - - var curRgb = _hexToRgb(currentColor); - var curHsv = _rgbToHsv(curRgb[0], curRgb[1], curRgb[2]); - var cpH = curHsv[0], cpS = curHsv[1], cpV = curHsv[2]; - - var PW = 276; - var popup = document.createElement('div'); - popup.style.cssText = - 'position:fixed;z-index:12002;width:' + PW + 'px;padding:14px;' + - 'background:' + _cssVar('--pywry-draw-bg', '#1e222d') + ';' + - 'border:1px solid ' + _cssVar('--pywry-draw-border', '#434651') + ';' + - 'border-radius:12px;box-shadow:0 12px 32px ' + _cssVar('--pywry-draw-shadow-lg', 'rgba(0,0,0,.6)') + ';' + - 'font-family:-apple-system,BlinkMacSystemFont,sans-serif;'; - popup.addEventListener('click', function(e) { e.stopPropagation(); }); - popup.addEventListener('mousedown', function(e) { e.stopPropagation(); }); - popup._anchor = anchor; - - var presets = _getDrawColors(); - var presetButtons = []; - - // === SV Canvas === - var svW = PW, svH = 150; - var svWrap = document.createElement('div'); - svWrap.style.cssText = - 'position:relative;width:' + svW + 'px;height:' + svH + 'px;' + - 'border-radius:6px;overflow:hidden;cursor:crosshair;margin-bottom:10px;'; - var svCanvas = document.createElement('canvas'); - svCanvas.width = svW * 2; svCanvas.height = svH * 2; - svCanvas.style.cssText = 'width:100%;height:100%;display:block;'; - svWrap.appendChild(svCanvas); - - var svDot = document.createElement('div'); - svDot.style.cssText = - 'position:absolute;width:14px;height:14px;border-radius:50%;' + - 'border:2px solid ' + _cssVar('--pywry-draw-handle-fill', '#ffffff') + ';' + - 'box-shadow:0 0 4px ' + _cssVar('--pywry-draw-shadow-lg', 'rgba(0,0,0,.6)') + ';' + - 'pointer-events:none;transform:translate(-50%,-50%);'; - svWrap.appendChild(svDot); - popup.appendChild(svWrap); - - function paintSV() { _cpPaintSV(svCanvas, cpH); } - - function svFromEvent(e) { - var r = svWrap.getBoundingClientRect(); - cpS = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)); - cpV = Math.max(0, Math.min(1, 1 - (e.clientY - r.top) / r.height)); - applyFromHSV(); - } - svWrap.addEventListener('mousedown', function(e) { - e.preventDefault(); - svFromEvent(e); - function mv(ev) { svFromEvent(ev); } - function up() { document.removeEventListener('mousemove', mv); document.removeEventListener('mouseup', up); } - document.addEventListener('mousemove', mv); - document.addEventListener('mouseup', up); - }); - - // === Hue bar === - var hueH = 14; - var hueWrap = document.createElement('div'); - hueWrap.style.cssText = - 'position:relative;width:100%;height:' + hueH + 'px;' + - 'border-radius:7px;overflow:hidden;cursor:pointer;margin-bottom:10px;'; - var hueCanvas = document.createElement('canvas'); - hueCanvas.width = svW * 2; hueCanvas.height = hueH * 2; - hueCanvas.style.cssText = 'width:100%;height:100%;display:block;'; - hueWrap.appendChild(hueCanvas); - _cpPaintHue(hueCanvas); - - var hueThumb = document.createElement('div'); - hueThumb.style.cssText = - 'position:absolute;top:50%;width:16px;height:16px;border-radius:50%;' + - 'border:2px solid ' + _cssVar('--pywry-draw-handle-fill', '#ffffff') + ';' + - 'box-shadow:0 0 4px ' + _cssVar('--pywry-draw-shadow-lg', 'rgba(0,0,0,.6)') + ';' + - 'pointer-events:none;transform:translate(-50%,-50%);'; - hueWrap.appendChild(hueThumb); - popup.appendChild(hueWrap); - - function hueFromEvent(e) { - var r = hueWrap.getBoundingClientRect(); - cpH = Math.max(0, Math.min(0.999, (e.clientX - r.left) / r.width)); - paintSV(); - applyFromHSV(); - } - hueWrap.addEventListener('mousedown', function(e) { - e.preventDefault(); - hueFromEvent(e); - function mv(ev) { hueFromEvent(ev); } - function up() { document.removeEventListener('mousemove', mv); document.removeEventListener('mouseup', up); } - document.addEventListener('mousemove', mv); - document.addEventListener('mouseup', up); - }); - - // === Hex input row === - var hexRow = document.createElement('div'); - hexRow.style.cssText = 'display:flex;align-items:center;gap:8px;margin-bottom:10px;'; - var prevBox = document.createElement('div'); - prevBox.style.cssText = - 'width:32px;height:32px;border-radius:4px;flex-shrink:0;' + - 'border:1px solid ' + _cssVar('--pywry-draw-border', '#434651') + ';'; - var hexIn = document.createElement('input'); - hexIn.type = 'text'; hexIn.spellcheck = false; hexIn.maxLength = 7; - hexIn.style.cssText = - 'flex:1;background:' + _cssVar('--pywry-draw-input-bg', '#0a0a0d') + ';' + - 'border:1px solid ' + _cssVar('--pywry-draw-border', '#434651') + ';border-radius:4px;' + - 'color:' + _cssVar('--pywry-draw-input-text', '#d1d4dc') + ';font-size:13px;padding:6px 8px;font-family:monospace;' + - 'outline:none;text-transform:uppercase;'; - hexIn.addEventListener('focus', function() { hexIn.style.borderColor = _cssVar('--pywry-draw-input-focus', '#2962ff'); }); - hexIn.addEventListener('blur', function() { hexIn.style.borderColor = _cssVar('--pywry-draw-border', '#434651'); }); - hexIn.addEventListener('keydown', function(e) { - e.stopPropagation(); - if (e.key === 'Enter') { - var val = hexIn.value.trim(); - if (val[0] !== '#') val = '#' + val; - if (/^#[0-9a-fA-F]{6}$/.test(val)) { - var rgb = _hexToRgb(val); - var hsv = _rgbToHsv(rgb[0], rgb[1], rgb[2]); - cpH = hsv[0]; cpS = hsv[1]; cpV = hsv[2]; - paintSV(); - applyFromHSV(); - } - } - }); - hexRow.appendChild(prevBox); - hexRow.appendChild(hexIn); - popup.appendChild(hexRow); - - // === Separator === - var sep1 = document.createElement('div'); - sep1.style.cssText = 'height:1px;background:' + _cssVar('--pywry-draw-border', '#434651') + ';margin:0 0 10px 0;'; - popup.appendChild(sep1); - - // === Preset swatches === - var swatchGrid = document.createElement('div'); - swatchGrid.style.cssText = 'display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;margin-bottom:14px;'; - popup.appendChild(swatchGrid); - - for (var pi = 0; pi < presets.length; pi++) { - (function(presetColor) { - var presetButton = document.createElement('button'); - presetButton.type = 'button'; - presetButton.dataset.color = presetColor.toLowerCase(); - presetButton.style.cssText = - 'width:100%;aspect-ratio:1;border-radius:6px;cursor:pointer;box-sizing:border-box;' + - 'border:2px solid transparent;background:' + presetColor + ';'; - presetButton.addEventListener('click', function(e) { - e.preventDefault(); - e.stopPropagation(); - var rgb = _hexToRgb(presetColor); - var hsv = _rgbToHsv(rgb[0], rgb[1], rgb[2]); - cpH = hsv[0]; cpS = hsv[1]; cpV = hsv[2]; - paintSV(); - applyFromHSV(); - }); - presetButtons.push(presetButton); - swatchGrid.appendChild(presetButton); - })(presets[pi]); - } - - // === Separator === - var sep2 = document.createElement('div'); - sep2.style.cssText = 'height:1px;background:' + _cssVar('--pywry-draw-border', '#434651') + ';margin:0 0 14px 0;'; - popup.appendChild(sep2); - - // === Opacity === - var opacityTitle = document.createElement('div'); - opacityTitle.textContent = 'Opacity'; - opacityTitle.style.cssText = 'color:' + _cssVar('--pywry-tvchart-text', '#d1d4dc') + ';font-size:12px;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:8px;'; - popup.appendChild(opacityTitle); - - var opacityRow = document.createElement('div'); - opacityRow.style.cssText = 'display:flex;align-items:center;gap:10px;'; - var opacitySlider = document.createElement('input'); - opacitySlider.type = 'range'; - opacitySlider.className = 'tv-settings-slider'; - opacitySlider.min = '0'; - opacitySlider.max = '100'; - opacityRow.appendChild(opacitySlider); - var opacityValue = document.createElement('input'); - opacityValue.type = 'number'; - opacityValue.className = 'ts-input ts-input-sm'; - opacityValue.min = '0'; - opacityValue.max = '100'; - opacityValue.addEventListener('keydown', function(e) { e.stopPropagation(); }); - opacityRow.appendChild(opacityValue); - var opacityUnit = document.createElement('span'); - opacityUnit.className = 'tv-settings-unit'; - opacityUnit.textContent = '%'; - opacityRow.appendChild(opacityUnit); - popup.appendChild(opacityRow); - - // === Refresh helpers === - function refreshPresetSelection() { - presetButtons.forEach(function(btn) { - btn.style.borderColor = btn.dataset.color === currentColor.toLowerCase() - ? _cssVar('--pywry-draw-input-focus', '#2962ff') - : 'transparent'; - }); - } - - function refreshHSVUI() { - var rgb = _hsvToRgb(cpH, cpS, cpV); - var hex = _rgbToHex(rgb[0], rgb[1], rgb[2]); - svDot.style.left = (cpS * 100) + '%'; - svDot.style.top = ((1 - cpV) * 100) + '%'; - svDot.style.background = hex; - hueThumb.style.left = (cpH * 100) + '%'; - var hRgb = _hsvToRgb(cpH, 1, 1); - hueThumb.style.background = _rgbToHex(hRgb[0], hRgb[1], hRgb[2]); - hexIn.value = hex.toUpperCase(); - prevBox.style.background = _tvColorWithOpacity(hex, currentOpacity, hex); - } - - function applyFromHSV() { - var rgb = _hsvToRgb(cpH, cpS, cpV); - currentColor = _rgbToHex(rgb[0], rgb[1], rgb[2]); - opacitySlider.value = String(currentOpacity); - opacityValue.value = String(currentOpacity); - prevBox.style.background = _tvColorWithOpacity(currentColor, currentOpacity, currentColor); - refreshHSVUI(); - refreshPresetSelection(); - if (onUpdate) onUpdate(currentColor, currentOpacity); - } - - function applySelection(nextColor, nextOpacity) { - currentColor = _tvColorToHex(nextColor || currentColor, currentColor); - currentOpacity = _tvClamp(_tvToNumber(nextOpacity, currentOpacity), 0, 100); - var rgb = _hexToRgb(currentColor); - var hsv = _rgbToHsv(rgb[0], rgb[1], rgb[2]); - cpH = hsv[0]; cpS = hsv[1]; cpV = hsv[2]; - paintSV(); - opacitySlider.value = String(currentOpacity); - opacityValue.value = String(currentOpacity); - prevBox.style.background = _tvColorWithOpacity(currentColor, currentOpacity, currentColor); - refreshHSVUI(); - refreshPresetSelection(); - if (onUpdate) onUpdate(currentColor, currentOpacity); - } - - opacitySlider.addEventListener('input', function() { - applySelection(currentColor, opacitySlider.value); - }); - opacityValue.addEventListener('input', function() { - applySelection(currentColor, opacityValue.value); - }); - - _colorOpacityPopupEl = popup; - var appendTarget = parentOverlay || document.body; - appendTarget.appendChild(popup); - paintSV(); - applySelection(currentColor, currentOpacity); - - // --- Position within the parent (absolute if inside overlay, fixed if body) --- - if (parentOverlay) { - popup.style.position = 'absolute'; - // Find the settings panel inside the overlay to constrain within it - var constrainEl = parentOverlay.querySelector('.tv-settings-panel') || parentOverlay; - var constrainRect = constrainEl.getBoundingClientRect(); - var overlayRect = parentOverlay.getBoundingClientRect(); - var anchorRect = anchor.getBoundingClientRect(); - var popupRect = popup.getBoundingClientRect(); - // Calculate position relative to the overlay - var top = anchorRect.bottom - overlayRect.top + 6; - // If it goes below the panel bottom, show above the anchor - if (top + popupRect.height > constrainRect.bottom - overlayRect.top - 8) { - top = anchorRect.top - overlayRect.top - popupRect.height - 6; - } - // Clamp to panel bounds vertically - var minTop = constrainRect.top - overlayRect.top + 4; - var maxTop = constrainRect.bottom - overlayRect.top - popupRect.height - 4; - top = Math.max(minTop, Math.min(maxTop, top)); - var left = anchorRect.left - overlayRect.left; - // Clamp to panel bounds horizontally - var maxLeft = constrainRect.right - overlayRect.left - popupRect.width - 4; - left = Math.max(constrainRect.left - overlayRect.left + 4, Math.min(maxLeft, left)); - popup.style.top = top + 'px'; - popup.style.left = left + 'px'; - } else { - var anchorRect = anchor.getBoundingClientRect(); - var popupRect = popup.getBoundingClientRect(); - var top = anchorRect.bottom + 10; - if (top + popupRect.height > window.innerHeight - 12) { - top = Math.max(12, anchorRect.top - popupRect.height - 10); - } - var left = anchorRect.left; - if (left + popupRect.width > window.innerWidth - 12) { - left = Math.max(12, window.innerWidth - popupRect.width - 12); - } - popup.style.top = top + 'px'; - popup.style.left = left + 'px'; - } - - // --- Dismissal: Escape key and click outside --- - function onEscKey(e) { - if (e.key === 'Escape') { - e.stopPropagation(); - _tvHideColorOpacityPopup(); - } - } - function onOutsideClick(e) { - if (popup.contains(e.target) || e.target === anchor) return; - _tvHideColorOpacityPopup(); - } - document.addEventListener('keydown', onEscKey, true); - // Delay the click listener so the current click doesn't immediately close it - var _outsideTimer = setTimeout(function() { - document.addEventListener('mousedown', onOutsideClick, true); - }, 0); - _colorOpacityCleanups.push(function() { - clearTimeout(_outsideTimer); - document.removeEventListener('keydown', onEscKey, true); - document.removeEventListener('mousedown', onOutsideClick, true); - }); -} - -var _DRAW_WIDTHS = [1, 2, 3, 4]; - -function _tvApplyDrawingInteractionMode(ds) { - if (!ds || !ds.canvas) return; - var tool = ds._activeTool || 'cursor'; - if (tool === 'crosshair' || tool === 'cursor') { - ds.canvas.style.pointerEvents = 'none'; - ds.canvas.style.cursor = tool === 'crosshair' ? 'crosshair' : 'default'; - return; - } - ds.canvas.style.pointerEvents = 'auto'; - ds.canvas.style.cursor = 'crosshair'; -} - -function _tvGetDrawingViewport(chartId) { - var ds = window.__PYWRY_DRAWINGS__[chartId]; - var entry = window.__PYWRY_TVCHARTS__[chartId]; - var width = ds && ds.canvas ? ds.canvas.clientWidth : 0; - var height = ds && ds.canvas ? ds.canvas.clientHeight : 0; - var viewport = { left: 0, top: 0, right: width, bottom: height, width: width, height: height }; - if (!entry || !entry.chart || width <= 0 || height <= 0) return viewport; - - var timeScale = entry.chart.timeScale ? entry.chart.timeScale() : null; - if (timeScale && typeof timeScale.logicalToCoordinate === 'function' && - typeof timeScale.getVisibleLogicalRange === 'function') { - var range = timeScale.getVisibleLogicalRange(); - if (range && isFinite(range.from) && isFinite(range.to)) { - var leftCoord = timeScale.logicalToCoordinate(range.from); - var rightCoord = timeScale.logicalToCoordinate(range.to); - if (leftCoord !== null && isFinite(leftCoord)) { - viewport.left = Math.max(0, Math.min(width, leftCoord)); - } - if (rightCoord !== null && isFinite(rightCoord)) { - viewport.right = Math.max(viewport.left, Math.min(width, rightCoord)); - } - } - } - - if (!isFinite(viewport.right) || viewport.right <= viewport.left + 8 || viewport.right >= width - 2) { - var placement = entry._chartPrefs && entry._chartPrefs.scalesPlacement - ? entry._chartPrefs.scalesPlacement - : 'Auto'; - var labelProbe = 68; - if (ds && ds.ctx) { - ds.ctx.save(); - ds.ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; - labelProbe = Math.ceil(ds.ctx.measureText('000000.00').width) + 18; - ds.ctx.restore(); - } - var gutter = Math.max(52, Math.min(96, labelProbe)); - if (placement === 'Left') { - viewport.left = gutter; - viewport.right = width; - } else { - viewport.left = 0; - viewport.right = Math.max(0, width - gutter); - } - } - - viewport.width = Math.max(0, viewport.right - viewport.left); - return viewport; -} - -// Fibonacci settings (resolved from CSS variables) -var _FIB_LEVELS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1]; -function _getFibColors() { - var colors = []; - for (var i = 0; i < 7; i++) { - colors.push(_cssVar('--pywry-fib-color-' + i)); - } - return colors; -} - -// ---- SVG icon templates for drawing toolbar ---- -var _DT_ICONS = { - pencil: '', - bucket: '', - text: '', - border: '', - lineW: '', - settings: '', - lock: '', - unlock: '', - trash: '', - clone: '', - eye: '', - eyeOff: '', - more: '', -}; - -// ---- Ensure drawing layer ---- -function _tvEnsureDrawingLayer(chartId) { - if (window.__PYWRY_DRAWINGS__[chartId]) return window.__PYWRY_DRAWINGS__[chartId]; - - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry || !entry.container) return null; - - var container = entry.container; - var pos = window.getComputedStyle(container).position; - if (pos === 'static') container.style.position = 'relative'; - - var canvas = document.createElement('canvas'); - canvas.className = 'pywry-drawing-overlay'; - canvas.style.cssText = - 'position:absolute;top:0;left:0;width:100%;height:100%;' + - 'pointer-events:none;z-index:5;'; - container.appendChild(canvas); - - // UI overlay div (sits above canvas, for floating toolbar / menus) - var uiLayer = document.createElement('div'); - uiLayer.className = 'pywry-draw-ui-layer'; - uiLayer.style.cssText = - 'position:absolute;top:0;left:0;width:100%;height:100%;' + - 'pointer-events:none;z-index:10;overflow:visible;'; - container.appendChild(uiLayer); - - var ctx = canvas.getContext('2d'); - var state = { - canvas: canvas, - ctx: ctx, - uiLayer: uiLayer, - chartId: chartId, - drawings: [], - priceLines: [], - _activeTool: 'cursor', - }; - window.__PYWRY_DRAWINGS__[chartId] = state; - _tvApplyDrawingInteractionMode(state); - - function resize() { - var rect = container.getBoundingClientRect(); - var dpr = window.devicePixelRatio || 1; - canvas.width = rect.width * dpr; - canvas.height = rect.height * dpr; - ctx.setTransform(dpr, 0, 0, dpr, 0, 0); - _tvRenderDrawings(chartId); - } - if (typeof ResizeObserver !== 'undefined') { - new ResizeObserver(resize).observe(container); - } - resize(); - - entry.chart.timeScale().subscribeVisibleLogicalRangeChange(function() { - _tvRenderDrawings(chartId); - _tvRepositionToolbar(chartId); - }); - - _tvEnableDrawing(chartId); - return state; -} - -// ---- Coordinate helpers ---- -function _tvMainSeries(chartId) { - var e = window.__PYWRY_TVCHARTS__[chartId]; - if (!e) return null; - var k = Object.keys(e.seriesMap)[0]; - return k ? e.seriesMap[k] : null; -} - -function _tvResolveChartId(chartId) { - if (chartId && window.__PYWRY_TVCHARTS__[chartId]) return chartId; - var keys = Object.keys(window.__PYWRY_TVCHARTS__); - return keys.length ? keys[0] : null; -} - -function _tvResolveChartEntry(chartId) { - var resolvedId = _tvResolveChartId(chartId); - if (!resolvedId) return null; - return { - chartId: resolvedId, - entry: window.__PYWRY_TVCHARTS__[resolvedId], - }; -} - -function _tvIsUiScopeNode(node) { - if (!node || !node.classList) return false; - return ( - node.classList.contains('pywry-widget') || - node.classList.contains('pywry-content') || - node.classList.contains('pywry-wrapper-inside') || - node.classList.contains('pywry-wrapper-top') || - node.classList.contains('pywry-body-scroll') || - node.classList.contains('pywry-wrapper-left') || - node.classList.contains('pywry-wrapper-header') - ); -} - -function _tvResolveUiRootFromElement(element) { - if (!element || !element.closest) return document; - var root = element.closest('.pywry-content, .pywry-widget') || element; - while (root && root.parentElement && _tvIsUiScopeNode(root.parentElement)) { - root = root.parentElement; - } - return root || document; -} - -function _tvResolveUiRoot(chartId) { - var resolved = _tvResolveChartEntry(chartId); - var entry = resolved ? resolved.entry : null; - if (!entry) return document; - if (entry.uiRoot) return entry.uiRoot; - if (entry.container) { - entry.uiRoot = _tvResolveUiRootFromElement(entry.container); - return entry.uiRoot; - } - return document; -} - -function _tvResolveChartIdFromElement(element) { - var root = _tvResolveUiRootFromElement(element); - var ids = Object.keys(window.__PYWRY_TVCHARTS__ || {}); - for (var i = 0; i < ids.length; i++) { - if (_tvResolveUiRoot(ids[i]) === root) { - return ids[i]; - } - } - return _tvResolveChartId(null); -} - -function _tvScopedQuery(scopeOrChartId, selector) { - var scope = scopeOrChartId; - if (!scope || typeof scope === 'string') { - scope = _tvResolveUiRoot(scopeOrChartId); - } - if (scope && typeof scope.querySelector === 'function') { - var scopedNode = scope.querySelector(selector); - if (scopedNode) return scopedNode; - } - return document.querySelector(selector); -} - -function _tvScopedQueryAll(scopeOrChartId, selector) { - var scope = scopeOrChartId; - if (!scope || typeof scope === 'string') { - scope = _tvResolveUiRoot(scopeOrChartId); - } - if (scope && typeof scope.querySelectorAll === 'function') { - return scope.querySelectorAll(selector); - } - return document.querySelectorAll(selector); -} - -function _tvScopedById(scopeOrChartId, id) { - return _tvScopedQuery(scopeOrChartId, '[id="' + id + '"]'); -} - -function _tvSetLegendVisible(visible, chartId) { - if (!chartId) { - var chartIds = Object.keys(window.__PYWRY_TVCHARTS__ || {}); - if (chartIds.length) { - for (var i = 0; i < chartIds.length; i++) { - _tvSetLegendVisible(visible, chartIds[i]); - } - return; - } - } - var legend = _tvScopedById(chartId, 'tvchart-legend-box'); - if (!legend) return; - legend.style.opacity = visible ? '1' : '0'; -} - -function _tvRefreshLegendVisibility(chartId) { - if (!chartId) { - var chartIds = Object.keys(window.__PYWRY_TVCHARTS__ || {}); - if (chartIds.length) { - for (var i = 0; i < chartIds.length; i++) { - _tvRefreshLegendVisibility(chartIds[i]); - } - return; - } - } - var root = _tvResolveUiRoot(chartId); - var menuOpen = !!_tvScopedQuery( - root, - '.tvchart-save-menu.open, .tvchart-chart-type-menu.open, .tvchart-interval-menu.open' - ); - _tvSetLegendVisible(!menuOpen, chartId); -} - -function _tvRefreshLegendTitle(chartId) { - var resolved = _tvResolveChartEntry(chartId); - var entry = resolved ? resolved.entry : null; - var effectiveChartId = resolved ? resolved.chartId : chartId; - if (!entry) return; - - var titleEl = _tvScopedById(effectiveChartId, 'tvchart-legend-title'); - if (!titleEl) return; - var legendBox = _tvScopedById(effectiveChartId, 'tvchart-legend-box'); - var ds = legendBox ? legendBox.dataset : null; - - var base = ds && ds.baseTitle ? String(ds.baseTitle) : ''; - if (!base && entry.payload && entry.payload.useDatafeed && entry.payload.series && entry.payload.series[0] && entry.payload.series[0].symbol) { - base = String(entry.payload.series[0].symbol); - } - if (!base && entry.payload && entry.payload.title) { - base = String(entry.payload.title); - } - if (!base && entry.payload && entry.payload.series && entry.payload.series[0] && entry.payload.series[0].seriesId) { - var sid = String(entry.payload.series[0].seriesId); - if (sid && sid !== 'main') base = sid; - } - - if (ds && ds.showTitle === '0') { - base = ''; - } - // Description mode replaces the base title with resolved symbol info - if (ds && ds.description && ds.description !== 'Off') { - var descMode = ds.description; - var symInfo = (entry && entry._resolvedSymbolInfo && entry._resolvedSymbolInfo.main) - || (entry && entry._mainSymbolInfo) || {}; - var ticker = String(symInfo.ticker || symInfo.displaySymbol || symInfo.symbol || base || '').trim(); - var descText = String(symInfo.description || symInfo.fullName || '').trim(); - if (descMode === 'Description' && descText) { - base = descText; - } else if (descMode === 'Ticker and description') { - base = (ticker && descText) ? (ticker + ' · ' + descText) : (ticker || descText || base); - } - // 'Ticker' mode keeps base as-is - } - if (ds && base) { - var intervalText = ds.interval || ''; - // If no explicit interval set, read from toolbar label - if (!intervalText) { - var intervalLabel = _tvScopedById(effectiveChartId, 'tvchart-interval-label'); - if (intervalLabel) intervalText = (intervalLabel.textContent || '').trim(); - } - if (intervalText) { - base = base + ' · ' + intervalText; - } - } - - titleEl.textContent = base; - titleEl.style.display = base ? 'inline-flex' : 'none'; -} - -function _tvEmitLegendRefresh(chartId) { - try { - if (typeof window.CustomEvent === 'function') { - window.dispatchEvent(new CustomEvent('pywry:legend-refresh', { - detail: { chartId: chartId }, - })); - } - } catch (e) {} -} - -function _tvLegendFormat(v) { - if (v == null) return '--'; - return Number(v).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }); -} - -function _tvLegendFormatVol(v) { - if (v == null) return ''; - if (v >= 1e9) return (v / 1e9).toFixed(2) + ' B'; - if (v >= 1e6) return (v / 1e6).toFixed(2) + ' M'; - if (v >= 1e3) return (v / 1e3).toFixed(2) + ' K'; - return Number(v).toFixed(0); -} - -function _tvLegendColorize(val, ref) { - var cs = getComputedStyle(document.documentElement); - var _up = cs.getPropertyValue('--pywry-tvchart-up').trim() || '#089981'; - var _dn = cs.getPropertyValue('--pywry-tvchart-down').trim() || '#f23645'; - var _mt = cs.getPropertyValue('--pywry-tvchart-text-muted').trim() || '#aeb4c2'; - if (val == null || ref == null) return _mt; - return val >= ref ? _up : _dn; -} - -function _tvLegendDataset(chartId) { - var legendBox = _tvScopedById(chartId, 'tvchart-legend-box'); - return legendBox ? legendBox.dataset : null; -} - -function _tvLegendNormalizeTimeValue(value) { - if (value == null) return null; - if (typeof value === 'number') return value; - if (typeof value === 'string') { - var parsed = Date.parse(value); - return isFinite(parsed) ? Math.floor(parsed / 1000) : value; - } - if (typeof value === 'object') { - if (typeof value.timestamp === 'number') return value.timestamp; - if (typeof value.year === 'number' && typeof value.month === 'number' && typeof value.day === 'number') { - return Date.UTC(value.year, value.month - 1, value.day) / 1000; - } - } - return null; -} - -function _tvLegendMainKey(entry) { - var keys = Object.keys((entry && entry.seriesMap) || {}); - return keys.indexOf('main') >= 0 ? 'main' : (keys[0] || null); -} - -function _tvLegendResolvePoint(entry, seriesId, seriesApi, param) { - var direct = (param && param.seriesData && seriesApi) ? param.seriesData.get(seriesApi) : null; - if (direct) return direct; - - var rows = entry && entry._seriesRawData ? entry._seriesRawData[seriesId] : null; - if (!rows || !rows.length) return null; - if (!param || param.time == null) return rows[rows.length - 1] || null; - - var target = _tvLegendNormalizeTimeValue(param.time); - if (target == null) return rows[rows.length - 1] || null; - - var best = null; - var bestTime = null; - for (var idx = 0; idx < rows.length; idx++) { - var row = rows[idx]; - var rowTime = _tvLegendNormalizeTimeValue(row && row.time); - if (rowTime == null) continue; - if (rowTime === target) return row; - if (rowTime <= target) { - best = row; - bestTime = rowTime; - continue; - } - if (bestTime == null) return row; - return best; - } - return best || rows[rows.length - 1] || null; -} - -function _tvLegendSeriesLabel(entry, seriesId) { - var sid = String(seriesId || 'main'); - if (sid === 'main') { - var ds = _tvLegendDataset(entry && entry.chartId ? entry.chartId : null) || {}; - var base = ds.baseTitle ? String(ds.baseTitle) : ''; - if (!base && entry && entry.payload && entry.payload.title) base = String(entry.payload.title); - return base || 'Main'; - } - if (entry && entry._compareLabels && entry._compareLabels[sid]) return String(entry._compareLabels[sid]); - if (entry && entry._compareSymbolInfo && entry._compareSymbolInfo[sid]) { - var info = entry._compareSymbolInfo[sid] || {}; - var display = String(info.displaySymbol || info.ticker || '').trim(); - if (display) return display.toUpperCase(); - var full = String(info.fullName || '').trim(); - if (full) return full; - var rawInfoSymbol = String(info.symbol || '').trim(); - if (rawInfoSymbol) { - return rawInfoSymbol.indexOf(':') >= 0 ? rawInfoSymbol.split(':').pop().trim().toUpperCase() : rawInfoSymbol.toUpperCase(); - } - } - if (entry && entry._compareSymbols && entry._compareSymbols[sid]) { - var raw = String(entry._compareSymbols[sid]); - return raw.indexOf(':') >= 0 ? raw.split(':').pop().trim().toUpperCase() : raw.toUpperCase(); - } - return sid; -} - -function _tvLegendSeriesColor(entry, seriesId, dataPoint, ds) { - var sid = String(seriesId || 'main'); - if (entry && entry._legendSeriesColors && entry._legendSeriesColors[sid]) { - return String(entry._legendSeriesColors[sid]); - } - if (dataPoint && dataPoint.open !== undefined) { - return _tvLegendColorize(dataPoint.close, dataPoint.open); - } - return (ds && ds.lineColor) ? ds.lineColor : (getComputedStyle(document.documentElement).getPropertyValue('--pywry-tvchart-session-breaks').trim() || '#4c87ff'); -} - -function _tvRenderLegendSeriesRows(chartId, entry, param) { - var seriesEl = _tvScopedById(chartId, 'tvchart-legend-series'); - if (!seriesEl || !entry) return; - - var ds = _tvLegendDataset(chartId) || {}; - var currentMainKey = _tvLegendMainKey(entry); - var keys = Object.keys(entry.seriesMap || {}); - var existing = {}; - var existingRows = seriesEl.querySelectorAll('.tvchart-legend-series-row'); - for (var ri = 0; ri < existingRows.length; ri++) { - var existingId = existingRows[ri].getAttribute('data-series-id') || ''; - if (existingId) existing[existingId] = existingRows[ri]; - } - - var activeCount = 0; - for (var i = 0; i < keys.length; i++) { - var sid = keys[i]; - if (String(sid) === String(currentMainKey) || String(sid) === 'volume' || String(sid).indexOf('ind_') === 0) continue; - if (entry._indicatorSourceSeries && entry._indicatorSourceSeries[sid]) continue; - var sApi = entry.seriesMap[sid]; - if (!sApi) continue; - - var d = _tvLegendResolvePoint(entry, sid, sApi, param); - var value = null; - if (d && d.open !== undefined) value = Number(d.close); - else if (d && d.value !== undefined) value = Number(d.value); - - var row = existing[sid] || document.createElement('div'); - if (!existing[sid]) { - row.className = 'tvchart-legend-row tvchart-legend-series-row'; - row.setAttribute('data-series-id', sid); - row.innerHTML = - '' + - '' + - '' + - ''; - seriesEl.appendChild(row); - } - delete existing[sid]; - activeCount += 1; - - var dot = row.querySelector('.tvchart-legend-series-dot'); - var name = row.querySelector('.tvchart-legend-series-name'); - var valueEl = row.querySelector('.tvchart-legend-series-value'); - var color = _tvLegendSeriesColor(entry, sid, d, ds); - if (dot) dot.style.background = color; - if (name) name.textContent = _tvLegendSeriesLabel(entry, sid); - if (valueEl) { - valueEl.textContent = value == null ? '--' : _tvLegendFormat(value); - valueEl.style.color = color; - } - } - - var obsoleteIds = Object.keys(existing); - for (var oi = 0; oi < obsoleteIds.length; oi++) { - var obsoleteRow = existing[obsoleteIds[oi]]; - if (obsoleteRow && obsoleteRow.parentNode) obsoleteRow.parentNode.removeChild(obsoleteRow); - } - seriesEl.style.display = activeCount ? 'block' : 'none'; -} - -function _tvRenderHoverLegend(chartId, param) { - var resolved = _tvResolveChartEntry(chartId); - var entry = resolved ? resolved.entry : null; - var effectiveChartId = resolved ? resolved.chartId : chartId; - if (!entry) return; - - var titleEl = _tvScopedById(effectiveChartId, 'tvchart-legend-title'); - var ohlcEl = _tvScopedById(effectiveChartId, 'tvchart-legend-ohlc'); - var mainRowEl = _tvScopedById(effectiveChartId, 'tvchart-legend-main-row'); - if (!titleEl || !ohlcEl) return; - - var ds = _tvLegendDataset(effectiveChartId) || {}; - _tvRefreshLegendTitle(effectiveChartId); - - var mainKey = _tvLegendMainKey(entry); - var mainSeries = entry.seriesMap ? entry.seriesMap[mainKey] : null; - var d = _tvLegendResolvePoint(entry, mainKey, mainSeries, param); - var legendMainHtml = ''; - var highLowMode = ds.highLowMode || 'Hidden'; - var _csHL = getComputedStyle(document.documentElement); - var highLowColor = ds.highLowColor || (_csHL.getPropertyValue('--pywry-tvchart-down').trim() || '#f23645'); - var lineColor = ds.lineColor || (_csHL.getPropertyValue('--pywry-tvchart-up').trim() || '#089981'); - var symbolMode = ds.symbolMode || 'Value, line'; - - if (d && d.open !== undefined) { - var chg = Number(d.close) - Number(d.open); - var chgPct = Number(d.open) !== 0 ? ((chg / Number(d.open)) * 100) : 0; - var clr = _tvLegendColorize(d.close, d.open); - var parts = []; - if (symbolMode !== 'Line only') { - parts.push('O ' + _tvLegendFormat(d.open) + ''); - if (highLowMode !== 'Hidden') { - parts.push('H ' + _tvLegendFormat(d.high) + ''); - parts.push('L ' + _tvLegendFormat(d.low) + ''); - } - parts.push('C ' + _tvLegendFormat(d.close) + ''); - } else { - parts.push('—'); - } - parts.push('' + (chg >= 0 ? '+' : '') + _tvLegendFormat(chg) + ' (' + (chg >= 0 ? '+' : '') + chgPct.toFixed(2) + '%)'); - legendMainHtml = parts.join(' '); - } else if (d && d.value !== undefined) { - legendMainHtml = symbolMode === 'Line only' - ? '—' - : '' + _tvLegendFormat(d.value) + ''; - } - - ohlcEl.innerHTML = legendMainHtml; - if (mainRowEl) { - var showMainRow = !!(titleEl.textContent || ohlcEl.textContent || ohlcEl.innerHTML); - mainRowEl.style.display = showMainRow ? 'flex' : 'none'; - } - - // Volume content and vol row visibility are managed by - // _tvSetupLegendControls (11-legend.js) — do not touch volEl / volRowEl - // here to avoid conflicting display changes. - - _tvRenderLegendSeriesRows(effectiveChartId, entry, param); -} - -function _tvClamp(v, min, max) { - if (v < min) return min; - if (v > max) return max; - return v; -} - -function _tvToNumber(v, fallback) { - var n = Number(v); - return isFinite(n) ? n : fallback; -} - -function _tvColorToHex(color, fallback) { - if (!color || typeof color !== 'string') return fallback || '#aeb4c2'; - var c = color.trim(); - if (/^#[0-9a-f]{6}$/i.test(c)) return c; - if (/^#[0-9a-f]{3}$/i.test(c)) { - return '#' + c[1] + c[1] + c[2] + c[2] + c[3] + c[3]; - } - var m = c.match(/rgba?\s*\(([^)]+)\)/i); - if (!m) return fallback || '#aeb4c2'; - var parts = m[1].split(','); - if (parts.length < 3) return fallback || '#aeb4c2'; - var r = _tvClamp(Math.round(_tvToNumber(parts[0], 0)), 0, 255); - var g = _tvClamp(Math.round(_tvToNumber(parts[1], 0)), 0, 255); - var b = _tvClamp(Math.round(_tvToNumber(parts[2], 0)), 0, 255); - var hex = '#'; - var vals = [r, g, b]; - for (var i = 0; i < vals.length; i++) { - var h = vals[i].toString(16); - if (h.length < 2) h = '0' + h; - hex += h; - } - return hex; -} - -function _tvColorOpacityPercent(color, fallback) { - if (!color || typeof color !== 'string') return fallback != null ? fallback : 100; - var m = color.trim().match(/rgba\s*\(([^)]+)\)/i); - if (!m) return fallback != null ? fallback : 100; - var parts = m[1].split(','); - if (parts.length < 4) return fallback != null ? fallback : 100; - var alpha = _tvClamp(_tvToNumber(parts[3], 1), 0, 1); - return Math.round(alpha * 100); -} - -function _tvColorWithOpacity(color, opacityPercent, fallback) { - var baseHex = _tvColorToHex(color, fallback || '#aeb4c2'); - var rgb = _hexToRgb(baseHex); - var alpha = _tvClamp(_tvToNumber(opacityPercent, 100), 0, 100) / 100; - return 'rgba(' + rgb[0] + ', ' + rgb[1] + ', ' + rgb[2] + ', ' + alpha.toFixed(2) + ')'; -} - -function _tvHexToRgba(color, alpha) { - var hex = _tvColorToHex(color, '#aeb4c2'); - var rgb = _hexToRgb(hex); - var a = typeof alpha === 'number' ? alpha : 1; - return 'rgba(' + rgb[0] + ', ' + rgb[1] + ', ' + rgb[2] + ', ' + a.toFixed(2) + ')'; -} - -function _tvLineStyleFromName(name) { - if (name === 'Dashed') return 2; - if (name === 'Dotted') return 1; - return 0; -} - -function _tvGetMainSeries(entry) { - if (!entry || !entry.seriesMap) return null; - var keys = Object.keys(entry.seriesMap); - if (!keys.length) return null; - return entry.seriesMap[keys[0]]; -} - -function _tvBuildCurrentSettings(entry) { - var mainSeries = _tvGetMainSeries(entry); - var mainOpts = {}; - try { - if (mainSeries && typeof mainSeries.options === 'function') { - mainOpts = mainSeries.options() || {}; - } - } catch (e) { - mainOpts = {}; - } - - var prefs = entry && entry._chartPrefs ? entry._chartPrefs : {}; - var intervalEl = _tvScopedById(entry && entry.chartId ? entry.chartId : null, 'tvchart-interval-label'); - var hasVolume = !!(entry && entry.volumeMap && entry.volumeMap.main); - // In datafeed mode, volume loads asynchronously — default to true - if (!hasVolume && entry && entry.payload && entry.payload.useDatafeed) { - hasVolume = true; - } - var palette = TVCHART_THEMES._get((entry && entry.theme) || _tvDetectTheme()); - - return { - 'Color bars based on previous close': !!prefs.colorBarsBasedOnPrevClose, - 'Body': prefs.bodyVisible !== false, - 'Body-Up Color': prefs.bodyUpColor || mainOpts.upColor || palette.upColor, - 'Body-Down Color': prefs.bodyDownColor || mainOpts.downColor || palette.downColor, - 'Body-Up Color-Opacity': prefs.bodyUpOpacity != null ? String(prefs.bodyUpOpacity) : String(_tvColorOpacityPercent(mainOpts.upColor || palette.upColor, prefs.bodyOpacity != null ? prefs.bodyOpacity : 100)), - 'Body-Down Color-Opacity': prefs.bodyDownOpacity != null ? String(prefs.bodyDownOpacity) : String(_tvColorOpacityPercent(mainOpts.downColor || palette.downColor, prefs.bodyOpacity != null ? prefs.bodyOpacity : 100)), - 'Body-Opacity': prefs.bodyOpacity != null ? String(prefs.bodyOpacity) : String(_tvColorOpacityPercent(mainOpts.upColor || palette.upColor, 100)), - 'Borders': prefs.bordersVisible !== false, - 'Borders-Up Color': prefs.borderUpColor || mainOpts.borderUpColor || palette.borderUpColor, - 'Borders-Down Color': prefs.borderDownColor || mainOpts.borderDownColor || palette.borderDownColor, - 'Borders-Up Color-Opacity': prefs.borderUpOpacity != null ? String(prefs.borderUpOpacity) : String(_tvColorOpacityPercent(mainOpts.borderUpColor || palette.borderUpColor, prefs.borderOpacity != null ? prefs.borderOpacity : 100)), - 'Borders-Down Color-Opacity': prefs.borderDownOpacity != null ? String(prefs.borderDownOpacity) : String(_tvColorOpacityPercent(mainOpts.borderDownColor || palette.borderDownColor, prefs.borderOpacity != null ? prefs.borderOpacity : 100)), - 'Borders-Opacity': prefs.borderOpacity != null ? String(prefs.borderOpacity) : String(_tvColorOpacityPercent(mainOpts.borderUpColor || palette.borderUpColor, 100)), - 'Wick': prefs.wickVisible !== false, - 'Wick-Up Color': prefs.wickUpColor || mainOpts.wickUpColor || palette.wickUpColor, - 'Wick-Down Color': prefs.wickDownColor || mainOpts.wickDownColor || palette.wickDownColor, - 'Wick-Up Color-Opacity': prefs.wickUpOpacity != null ? String(prefs.wickUpOpacity) : String(_tvColorOpacityPercent(mainOpts.wickUpColor || palette.wickUpColor, prefs.wickOpacity != null ? prefs.wickOpacity : 100)), - 'Wick-Down Color-Opacity': prefs.wickDownOpacity != null ? String(prefs.wickDownOpacity) : String(_tvColorOpacityPercent(mainOpts.wickDownColor || palette.wickDownColor, prefs.wickOpacity != null ? prefs.wickOpacity : 100)), - 'Wick-Opacity': prefs.wickOpacity != null ? String(prefs.wickOpacity) : String(_tvColorOpacityPercent(mainOpts.wickUpColor || palette.wickUpColor, 100)), - // Bar-specific - 'Bar Up Color': prefs.barUpColor || mainOpts.upColor || palette.upColor, - 'Bar Down Color': prefs.barDownColor || mainOpts.downColor || palette.downColor, - // Area-specific - 'Area Fill Top': prefs.areaFillTop || mainOpts.topColor || 'rgba(38, 166, 154, 0.4)', - 'Area Fill Bottom': prefs.areaFillBottom || mainOpts.bottomColor || 'rgba(38, 166, 154, 0)', - // Baseline-specific - 'Baseline Level': prefs.baselineLevel != null ? String(prefs.baselineLevel) : String((mainOpts.baseValue && mainOpts.baseValue.price) || 0), - 'Baseline Top Line': prefs.baselineTopLine || mainOpts.topLineColor || palette.upColor, - 'Baseline Bottom Line': prefs.baselineBottomLine || mainOpts.bottomLineColor || palette.downColor, - 'Baseline Top Fill 1': prefs.baselineTopFill1 || mainOpts.topFillColor1 || 'rgba(38, 166, 154, 0.28)', - 'Baseline Top Fill 2': prefs.baselineTopFill2 || mainOpts.topFillColor2 || 'rgba(38, 166, 154, 0.05)', - 'Baseline Bottom Fill 1': prefs.baselineBottomFill1 || mainOpts.bottomFillColor1 || 'rgba(239, 83, 80, 0.05)', - 'Baseline Bottom Fill 2': prefs.baselineBottomFill2 || mainOpts.bottomFillColor2 || 'rgba(239, 83, 80, 0.28)', - 'Session': prefs.session || 'Regular trading hours', - 'Precision': prefs.precision || 'Default', - 'Timezone': prefs.timezone || 'UTC', - 'Logo': prefs.showLogo !== undefined ? prefs.showLogo : false, - 'Title': prefs.showTitle !== undefined ? prefs.showTitle : true, - 'Description': prefs.description || 'Description', - 'Chart values': prefs.showChartValues !== undefined ? prefs.showChartValues : true, - 'Bar change values': prefs.showBarChange !== undefined ? prefs.showBarChange : true, - 'Volume': prefs.showVolume !== undefined ? prefs.showVolume : hasVolume, - 'Titles': prefs.showIndicatorTitles !== undefined ? prefs.showIndicatorTitles : true, - 'Inputs': prefs.showIndicatorInputs !== undefined ? prefs.showIndicatorInputs : true, - 'Values': prefs.showIndicatorValues !== undefined ? prefs.showIndicatorValues : true, - 'Background-Enabled': prefs.backgroundEnabled !== false, - 'Background-Opacity': prefs.backgroundOpacity != null ? String(prefs.backgroundOpacity) : '50', - 'Line style': mainOpts.lineStyle === 2 ? 'Dashed' : (mainOpts.lineStyle === 1 ? 'Dotted' : 'Solid'), - 'Line width': String(mainOpts.lineWidth || 1), - 'Line color': mainOpts.color || mainOpts.lineColor || prefs.lineColor || _cssVar('--pywry-tvchart-up', ''), - 'Scale modes (A and L)': prefs.scaleModesVisibility || 'Visible on mouse over', - 'Lock price to bar ratio': !!prefs.lockPriceToBarRatio, - 'Lock price to bar ratio (value)': prefs.lockPriceToBarRatioValue != null ? String(prefs.lockPriceToBarRatioValue) : '0.018734', - 'Scales placement': prefs.scalesPlacement || 'Auto', - 'No overlapping labels': prefs.noOverlappingLabels !== false, - 'Plus button': !!prefs.plusButton, - 'Countdown to bar close': !!prefs.countdownToBarClose, - 'Symbol': prefs.symbolMode || (function() { - var pv = mainOpts.priceLineVisible !== false; - var lv = mainOpts.lastValueVisible !== false; - if (pv && lv) return 'Value, line'; - if (pv && !lv) return 'Line'; - if (!pv && lv) return 'Label'; - return 'Hidden'; - })(), - 'Symbol color': prefs.symbolColor || mainOpts.color || mainOpts.lineColor || _cssVar('--pywry-tvchart-up', ''), - 'Value according to scale': prefs.valueAccordingToScale || 'Value according to scale', - 'Value according to sc...': prefs.valueAccordingToScale || 'Value according to scale', - 'Indicators and financials': prefs.indicatorsAndFinancials || 'Value', - 'High and low': prefs.highAndLow || 'Hidden', - 'High and low color': prefs.highAndLowColor || _cssVar('--pywry-tvchart-down', ''), - 'Day of week on labels': prefs.dayOfWeekOnLabels !== false, - 'Date format': prefs.dateFormat || 'Mon 29 Sep \'97', - 'Time hours format': prefs.timeHoursFormat || '24-hours', - 'Background': 'Solid', - 'Background-Color': prefs.backgroundColor || palette.background, - 'Grid lines': prefs.gridVisible === false ? 'Hidden' : (prefs.gridMode || 'Vert and horz'), - 'Grid-Color': prefs.gridColor || _cssVar('--pywry-tvchart-grid'), - 'Pane-Separators-Color': prefs.paneSeparatorsColor || _cssVar('--pywry-tvchart-grid'), - 'Crosshair-Enabled': prefs.crosshairEnabled === true, - 'Crosshair-Color': prefs.crosshairColor || _cssVar('--pywry-tvchart-crosshair-color'), - 'Watermark': prefs.watermarkVisible ? 'Visible' : 'Hidden', - 'Watermark-Color': prefs.watermarkColor || 'rgba(255,255,255,0.08)', - 'Text-Color': prefs.textColor || _cssVar('--pywry-tvchart-text'), - 'Lines-Color': prefs.linesColor || _cssVar('--pywry-tvchart-grid'), - 'Navigation': prefs.navigation || 'Visible on mouse over', - 'Pane': prefs.pane || 'Visible on mouse over', - 'Margin Top': prefs.marginTop != null ? String(prefs.marginTop) : '10', - 'Margin Bottom': prefs.marginBottom != null ? String(prefs.marginBottom) : '8', - 'Interval': intervalEl ? (intervalEl.textContent || '').trim() : '', - }; -} - -function _tvSetToolbarVisibility(settings, chartId) { - var leftToolbar = _tvScopedQuery(chartId, '.tvchart-left'); - var bottomToolbar = _tvScopedQuery(chartId, '.tvchart-bottom'); - if (leftToolbar) { - leftToolbar.style.display = settings['Navigation'] === 'Hidden' ? 'none' : ''; - } - if (bottomToolbar) { - bottomToolbar.style.display = settings['Pane'] === 'Hidden' ? 'none' : ''; - } - - var autoScaleEl = _tvScopedQuery(chartId, '[data-component-id="tvchart-auto-scale"]'); - var logScaleEl = _tvScopedQuery(chartId, '[data-component-id="tvchart-log-scale"]'); - var pctScaleEl = _tvScopedQuery(chartId, '[data-component-id="tvchart-pct-scale"]'); - var showScaleButtons = settings['Scale modes (A and L)'] !== 'Hidden'; - if (autoScaleEl) autoScaleEl.style.display = showScaleButtons ? '' : 'none'; - if (logScaleEl) logScaleEl.style.display = showScaleButtons ? '' : 'none'; - if (pctScaleEl) pctScaleEl.style.display = showScaleButtons ? '' : 'none'; -} - -function _tvApplySettingsToChart(chartId, entry, settings, opts) { - if (!entry || !entry.chart) return; - opts = opts || {}; - - var chartOptions = {}; - var rightPriceScale = {}; - var leftPriceScale = {}; - var timeScale = {}; - var localization = {}; - - // Canvas: grid visibility - var gridMode = settings['Grid lines'] || 'Vert and horz'; - var gridColor = settings['Grid-Color'] || settings['Lines-Color'] || undefined; - chartOptions.grid = { - vertLines: { - visible: gridMode === 'Vert and horz' || gridMode === 'Vert only', - color: gridColor, - }, - horzLines: { - visible: gridMode === 'Vert and horz' || gridMode === 'Horz only', - color: gridColor, - }, - }; - - // Canvas: background + text + crosshair - var bgOpacity = _tvClamp(_tvToNumber(settings['Background-Opacity'], 50), 0, 100) / 100; - var bgEnabled = settings['Background-Enabled'] !== false; - var _bgPalette = TVCHART_THEMES._get((entry && entry.theme) || _tvDetectTheme()); - var bgColor = settings['Background-Color'] || _bgPalette.background; - // Apply opacity to background color - var bgHex = _tvColorToHex(bgColor, _bgPalette.background); - var bgFinal = bgEnabled ? _tvColorWithOpacity(bgHex, bgOpacity * 100, bgHex) : 'transparent'; - chartOptions.layout = { - attributionLogo: false, - textColor: settings['Text-Color'] || undefined, - background: { - type: 'solid', - color: bgFinal, - }, - }; - - var _chEn = settings['Crosshair-Enabled'] === true; - chartOptions.crosshair = { - mode: LightweightCharts.CrosshairMode.Normal, - vertLine: { - color: settings['Crosshair-Color'] || undefined, - visible: _chEn, - labelVisible: true, - style: 2, - width: 1, - }, - horzLine: { - color: settings['Crosshair-Color'] || undefined, - visible: _chEn, - labelVisible: _chEn, - style: 2, - width: 1, - }, - }; - - // Status/scales — apply same config to both sides - var scaleAutoScale = settings['Auto Scale'] !== false; - var scaleMode = settings['Log scale'] === true ? 1 : 0; - var scaleAlignLabels = settings['No overlapping labels'] !== false; - var scaleTextColor = settings['Text-Color'] || undefined; - var scaleBorderColor = settings['Lines-Color'] || undefined; - - rightPriceScale.autoScale = scaleAutoScale; - rightPriceScale.mode = scaleMode; - rightPriceScale.alignLabels = scaleAlignLabels; - rightPriceScale.textColor = scaleTextColor; - rightPriceScale.borderColor = scaleBorderColor; - - leftPriceScale.autoScale = scaleAutoScale; - leftPriceScale.mode = scaleMode; - leftPriceScale.alignLabels = scaleAlignLabels; - leftPriceScale.textColor = scaleTextColor; - leftPriceScale.borderColor = scaleBorderColor; - - var topMargin = _tvClamp(_tvToNumber(settings['Margin Top'], 10), 0, 90) / 100; - var bottomMargin = _tvClamp(_tvToNumber(settings['Margin Bottom'], 8), 0, 90) / 100; - if (entry.volumeMap && entry.volumeMap.main) { - bottomMargin = Math.max(bottomMargin, 0.14); - } - rightPriceScale.scaleMargins = { top: topMargin, bottom: bottomMargin }; - leftPriceScale.scaleMargins = { top: topMargin, bottom: bottomMargin }; - - if (settings['Lock price to bar ratio']) { - var ratio = _tvClamp(_tvToNumber(settings['Lock price to bar ratio (value)'], 0.018734), 0.001, 0.95); - var lockedMargins = { - top: _tvClamp(ratio, 0.0, 0.9), - bottom: _tvClamp(1 - ratio - 0.05, 0.0, 0.9), - }; - rightPriceScale.autoScale = false; - rightPriceScale.scaleMargins = lockedMargins; - leftPriceScale.autoScale = false; - leftPriceScale.scaleMargins = lockedMargins; - } - - var placement = settings['Scales placement'] || 'Auto'; - if (placement === 'Left') { - leftPriceScale.visible = true; - rightPriceScale.visible = false; - } else if (placement === 'Right') { - leftPriceScale.visible = false; - rightPriceScale.visible = true; - } else { - leftPriceScale.visible = false; - rightPriceScale.visible = true; - } - - timeScale.borderColor = settings['Lines-Color'] || undefined; - timeScale.secondsVisible = false; - // Daily+ charts should never show time on the x-axis - var _resIsDaily = (function() { - var r = entry._currentResolution || ''; - return /^[1-9]?[DWM]$/.test(r) || /^\d+[DWM]$/.test(r); - })(); - - // Skip timeVisible and localization overrides when the datafeed already - // set timezone-aware formatters (deferred re-apply after series creation). - if (!opts.skipLocalization) { - timeScale.timeVisible = !_resIsDaily; - - var showDOW = settings['Day of week on labels'] !== false; - var use24h = (settings['Time hours format'] || '24-hours') === '24-hours'; - var dateFmt = settings['Date format'] || 'Mon 29 Sep \'97'; - var useUTC = (settings['Timezone'] || 'UTC') === 'UTC'; - localization.timeFormatter = function(t) { - var d; - if (typeof t === 'number') { - d = new Date(t * 1000); - } else if (t && typeof t.year === 'number') { - d = useUTC - ? new Date(Date.UTC(t.year, (t.month || 1) - 1, t.day || 1)) - : new Date(t.year, (t.month || 1) - 1, t.day || 1); - } else { - return ''; - } - var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; - var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; - var month = useUTC ? d.getUTCMonth() : d.getMonth(); - var day = useUTC ? d.getUTCDate() : d.getDate(); - var year = useUTC ? d.getUTCFullYear() : d.getFullYear(); - var hour = useUTC ? d.getUTCHours() : d.getHours(); - var minute = useUTC ? d.getUTCMinutes() : d.getMinutes(); - var weekDay = useUTC ? d.getUTCDay() : d.getDay(); - var mm = String(month + 1); - var dd = String(day); - var yyyy = String(year); - var yy = yyyy.slice(-2); - var hours = use24h ? hour : ((hour % 12) || 12); - var mins = String(minute).padStart(2, '0'); - var ampm = hour >= 12 ? ' PM' : ' AM'; - var time = use24h ? String(hours).padStart(2, '0') + ':' + mins : String(hours) + ':' + mins + ampm; - var datePart; - if (dateFmt === 'MM/DD/YY') { - datePart = mm.padStart(2, '0') + '/' + dd.padStart(2, '0') + '/' + yy; - } else if (dateFmt === 'DD/MM/YY') { - datePart = dd.padStart(2, '0') + '/' + mm.padStart(2, '0') + '/' + yy; - } else { - datePart = dd.padStart(2, '0') + ' ' + monthNames[month] + " '" + yy; - } - if (_resIsDaily) { - return (showDOW ? (days[weekDay] + ' ') : '') + datePart; - } - return (showDOW ? (days[weekDay] + ' ') : '') + datePart + ' ' + time; - }; - } // end skipLocalization guard - chartOptions.rightPriceScale = rightPriceScale; - chartOptions.leftPriceScale = leftPriceScale; - chartOptions.timeScale = timeScale; - chartOptions.localization = localization; - chartOptions = _tvMerge(chartOptions, _tvInteractiveNavigationOptions()); - - // Watermark - var wmColor = settings['Watermark-Color'] || 'rgba(255,255,255,0.08)'; - chartOptions.watermark = { - visible: settings['Watermark'] === 'Visible', - text: settings['Title'] === false ? '' : 'OHLCV Demo', - color: wmColor, - fontSize: 24, - }; - - entry.chart.applyOptions(chartOptions); - _tvEnsureInteractiveNavigation(entry); - _tvApplyHoverReadoutMode(entry); - - // Move main series to the correct price scale side - var targetScaleId = placement === 'Left' ? 'left' : 'right'; - var mainSeries = _tvGetMainSeries(entry); - if (mainSeries) { - try { mainSeries.applyOptions({ priceScaleId: targetScaleId }); } catch (e) {} - } - - _tvApplyCustomScaleSide(entry, targetScaleId, { - alignLabels: settings['No overlapping labels'] !== false, - textColor: settings['Text-Color'] || undefined, - borderColor: settings['Lines-Color'] || undefined, - }); - - // Apply main-series options (price labels and line from Symbol mode) - if (!mainSeries) mainSeries = _tvGetMainSeries(entry); - if (mainSeries) { - var stype = _tvGuessSeriesType(mainSeries); - var lineColor = settings['Line color'] || settings['Symbol color'] || undefined; - var lw = _tvClamp(_tvToNumber(settings['Line width'], 1), 1, 4); - var ls = _tvLineStyleFromName(settings['Line style']); - // Derive price line/label visibility from Symbol dropdown (Scales & Lines tab) - var symbolMode = settings['Symbol'] || 'Value, line'; - var showPriceLabel = symbolMode === 'Value, line' || symbolMode === 'Label'; - var showPriceLine = symbolMode === 'Value, line' || symbolMode === 'Line'; - var symbolColor = settings['Symbol color'] || _cssVar('--pywry-tvchart-up', '#26a69a'); - var sOpts = { - lastValueVisible: showPriceLabel, - priceLineVisible: showPriceLine, - priceLineColor: symbolColor, - }; - if (stype === 'Line' || stype === 'Area' || stype === 'Baseline' || stype === 'Histogram') { - sOpts.lineStyle = ls; - sOpts.lineWidth = lw; - sOpts.color = lineColor; - sOpts.lineColor = lineColor; - } - if (stype === 'Area') { - if (settings['Area Fill Top']) sOpts.topColor = settings['Area Fill Top']; - if (settings['Area Fill Bottom']) sOpts.bottomColor = settings['Area Fill Bottom']; - } - if (stype === 'Baseline') { - var bLevel = _tvToNumber(settings['Baseline Level'], 0); - sOpts.baseValue = { price: bLevel, type: 'price' }; - if (settings['Baseline Top Line']) sOpts.topLineColor = settings['Baseline Top Line']; - if (settings['Baseline Bottom Line']) sOpts.bottomLineColor = settings['Baseline Bottom Line']; - if (settings['Baseline Top Fill 1']) sOpts.topFillColor1 = settings['Baseline Top Fill 1']; - if (settings['Baseline Top Fill 2']) sOpts.topFillColor2 = settings['Baseline Top Fill 2']; - if (settings['Baseline Bottom Fill 1']) sOpts.bottomFillColor1 = settings['Baseline Bottom Fill 1']; - if (settings['Baseline Bottom Fill 2']) sOpts.bottomFillColor2 = settings['Baseline Bottom Fill 2']; - } - if (stype === 'Bar') { - if (settings['Bar Up Color']) sOpts.upColor = settings['Bar Up Color']; - if (settings['Bar Down Color']) sOpts.downColor = settings['Bar Down Color']; - } - if (stype === 'Candlestick' || stype === 'Bar') { - var bodyVisible = settings['Body'] !== false; - var bodyUpOpacity = _tvClamp(_tvToNumber(settings['Body-Up Color-Opacity'], settings['Body-Opacity']), 0, 100); - var bodyDownOpacity = _tvClamp(_tvToNumber(settings['Body-Down Color-Opacity'], settings['Body-Opacity']), 0, 100); - var borderUpOpacity = _tvClamp(_tvToNumber(settings['Borders-Up Color-Opacity'], settings['Borders-Opacity']), 0, 100); - var borderDownOpacity = _tvClamp(_tvToNumber(settings['Borders-Down Color-Opacity'], settings['Borders-Opacity']), 0, 100); - var wickUpOpacity = _tvClamp(_tvToNumber(settings['Wick-Up Color-Opacity'], settings['Wick-Opacity']), 0, 100); - var wickDownOpacity = _tvClamp(_tvToNumber(settings['Wick-Down Color-Opacity'], settings['Wick-Opacity']), 0, 100); - var bodyHidden = _cssVar('--pywry-tvchart-hidden') || 'rgba(0, 0, 0, 0)'; - sOpts.upColor = bodyVisible ? _tvColorWithOpacity(settings['Body-Up Color'], bodyUpOpacity, _cssVar('--pywry-tvchart-up', '#26a69a')) : bodyHidden; - sOpts.downColor = bodyVisible ? _tvColorWithOpacity(settings['Body-Down Color'], bodyDownOpacity, _cssVar('--pywry-tvchart-down', '#ef5350')) : bodyHidden; - sOpts.borderVisible = settings['Borders'] !== false; - sOpts.borderUpColor = _tvColorWithOpacity(settings['Borders-Up Color'], borderUpOpacity, _cssVar('--pywry-tvchart-border-up', '#26a69a')); - sOpts.borderDownColor = _tvColorWithOpacity(settings['Borders-Down Color'], borderDownOpacity, _cssVar('--pywry-tvchart-border-down', '#ef5350')); - sOpts.wickVisible = settings['Wick'] !== false; - sOpts.wickUpColor = _tvColorWithOpacity(settings['Wick-Up Color'], wickUpOpacity, _cssVar('--pywry-tvchart-wick-up', '#26a69a')); - sOpts.wickDownColor = _tvColorWithOpacity(settings['Wick-Down Color'], wickDownOpacity, _cssVar('--pywry-tvchart-wick-down', '#ef5350')); - } - if (settings['Precision'] && settings['Precision'] !== 'Default') { - var minMove = Number(settings['Precision']); - if (isFinite(minMove) && minMove > 0) { - var decimals = String(settings['Precision']).indexOf('.') >= 0 - ? String(settings['Precision']).split('.')[1].length - : 0; - sOpts.priceFormat = { type: 'price', precision: decimals, minMove: minMove }; - } - } - mainSeries.applyOptions(sOpts); - } - - // Volume label visibility in the status line / legend. - // This does NOT create or destroy the volume subplot — it only controls - // whether the "Volume 31.29 M" text appears in the legend header. - // The legend updater reads legendBox.dataset.showVolume below. - - _tvSetToolbarVisibility(settings, chartId); - - // Persist legend and scale behavior flags for the legend updater script. - var legendBox = _tvScopedById(chartId, 'tvchart-legend-box'); - if (legendBox) { - var baseTitle = 'Symbol'; - if (entry.payload && entry.payload.useDatafeed && entry.payload.series && entry.payload.series[0] && entry.payload.series[0].symbol) { - baseTitle = String(entry.payload.series[0].symbol); - } else if (entry.payload && entry.payload.title) { - baseTitle = String(entry.payload.title); - } else if (entry.payload && entry.payload.series && entry.payload.series[0] && entry.payload.series[0].seriesId) { - var sid = String(entry.payload.series[0].seriesId); - if (sid && sid !== 'main') baseTitle = sid; - } - var intervalEl = _tvScopedById(chartId, 'tvchart-interval-label'); - - legendBox.dataset.baseTitle = baseTitle; - legendBox.dataset.interval = intervalEl ? (intervalEl.textContent || '').trim() : ''; - legendBox.dataset.showLogo = settings['Logo'] === false ? '0' : '1'; - legendBox.dataset.showTitle = settings['Title'] === false ? '0' : '1'; - legendBox.dataset.description = settings['Description'] || 'Description'; - legendBox.dataset.showChartValues = settings['Chart values'] === false ? '0' : '1'; - legendBox.dataset.showBarChange = settings['Bar change values'] === false ? '0' : '1'; - legendBox.dataset.showVolume = settings['Volume'] !== false ? '1' : '0'; - legendBox.dataset.showIndicatorTitles = settings['Titles'] === false ? '0' : '1'; - legendBox.dataset.showIndicatorInputs = settings['Inputs'] === false ? '0' : '1'; - legendBox.dataset.showIndicatorValues = settings['Values'] === false ? '0' : '1'; - legendBox.dataset.showStatusValues = settings['Chart values'] === false ? '0' : '1'; - legendBox.dataset.symbolMode = settings['Symbol'] || 'Value, line'; - legendBox.dataset.valueMode = settings['Value according to scale'] || settings['Value according to sc...'] || 'Value according to scale'; - legendBox.dataset.financialsMode = settings['Indicators and financials'] || 'Value'; - legendBox.dataset.highLowMode = settings['High and low'] || 'Hidden'; - legendBox.dataset.symbolColor = settings['Symbol color'] || ''; - legendBox.dataset.highLowColor = settings['High and low color'] || ''; - legendBox.dataset.lineColor = settings['Line color'] || ''; - legendBox.dataset.textColor = settings['Text-Color'] || ''; - } - - // Plus button mock on right scale edge. - var container = entry.container || (entry.chart && entry.chart._container) || null; - if (container) { - var plusId = 'tvchart-plus-button-' + chartId; - var plusEl = document.getElementById(plusId); - if (!plusEl) { - plusEl = document.createElement('div'); - plusEl.id = plusId; - plusEl.className = 'pywry-tvchart-plus-button'; - plusEl.textContent = '+'; - container.appendChild(plusEl); - } - plusEl.style.display = settings['Plus button'] ? 'block' : 'none'; - - var cdId = 'tvchart-countdown-label-' + chartId; - var cdEl = document.getElementById(cdId); - if (!cdEl) { - cdEl = document.createElement('div'); - cdEl.id = cdId; - cdEl.className = 'pywry-tvchart-countdown'; - container.appendChild(cdEl); - } - if (settings['Countdown to bar close']) { - cdEl.style.display = 'block'; - cdEl.textContent = 'CLOSE TIMER'; - } else { - cdEl.style.display = 'none'; - } - } - - // Notify legend to re-render with updated dataset flags - try { - window.dispatchEvent(new CustomEvent('pywry:legend-refresh', { detail: { chartId: chartId } })); - } catch (_e) {} - -} - -function _tvToPixel(chartId, time, price) { - var e = window.__PYWRY_TVCHARTS__[chartId]; - if (!e || !e.chart) return null; - var s = _tvMainSeries(chartId); - var x = e.chart.timeScale().timeToCoordinate(time); - var y = s ? s.priceToCoordinate(price) : null; - if (x === null || y === null) return null; - return { x: x, y: y }; -} - -function _tvFromPixel(chartId, x, y) { - var e = window.__PYWRY_TVCHARTS__[chartId]; - if (!e || !e.chart) return null; - var s = _tvMainSeries(chartId); - var time = e.chart.timeScale().coordinateToTime(x); - var price = s ? s.coordinateToPrice(y) : null; - return { time: time, price: price }; -} - -// ---- Get drawing anchor points in pixel coords ---- -function _tvDrawAnchors(chartId, d) { - var s = _tvMainSeries(chartId); - if (!s) return []; - if (d.type === 'hline') { - var yH = s.priceToCoordinate(d.price); - var viewport = _tvGetDrawingViewport(chartId); - return yH !== null ? [{ key: 'price', x: Math.min(viewport.right - 24, viewport.left + 40), y: yH }] : []; - } - if (d.type === 'vline') { - var vA = _tvToPixel(chartId, d.t1, 0); - return vA ? [{ key: 'p1', x: vA.x, y: vA.y || 40 }] : []; - } - if (d.type === 'crossline') { - var clA = _tvToPixel(chartId, d.t1, d.p1); - return clA ? [{ key: 'p1', x: clA.x, y: clA.y }] : []; - } - if (d.type === 'flat_channel') { - var fcY1 = s.priceToCoordinate(d.p1); - var fcY2 = s.priceToCoordinate(d.p2); - var fcVp = _tvGetDrawingViewport(chartId); - var fcPts = []; - if (fcY1 !== null) fcPts.push({ key: 'p1', x: fcVp.left + 40, y: fcY1 }); - if (fcY2 !== null) fcPts.push({ key: 'p2', x: fcVp.left + 40, y: fcY2 }); - return fcPts; - } - if (d.type === 'brush' || d.type === 'highlighter') { - // No draggable anchors for brush/highlighter strokes - return []; - } - if (d.type === 'path' || d.type === 'polyline') { - // Anchors at each vertex - var mpts = d.points; - var anchors = []; - if (mpts) { - for (var mi = 0; mi < mpts.length; mi++) { - var mpp = _tvToPixel(chartId, mpts[mi].t, mpts[mi].p); - if (mpp) anchors.push({ key: 'pt' + mi, x: mpp.x, y: mpp.y }); - } - } - return anchors; - } - // Single-point tools - var singlePointTools = ['arrow_mark_up', 'arrow_mark_down', 'arrow_mark_left', 'arrow_mark_right', 'anchored_vwap']; - if (singlePointTools.indexOf(d.type) !== -1) { - var sp = _tvToPixel(chartId, d.t1, d.p1); - return sp ? [{ key: 'p1', x: sp.x, y: sp.y }] : []; - } - var pts = []; - if (d.t1 !== undefined) { - var a = _tvToPixel(chartId, d.t1, d.p1); - if (a) pts.push({ key: 'p1', x: a.x, y: a.y }); - } - if (d.t2 !== undefined) { - var b = _tvToPixel(chartId, d.t2, d.p2); - if (b) pts.push({ key: 'p2', x: b.x, y: b.y }); - } - var threePointAnchors = ['fib_extension', 'fib_channel', 'fib_wedge', 'pitchfan', 'fib_time', - 'rotated_rect', 'triangle', 'shape_arc', 'double_curve']; - if (d.t3 !== undefined && threePointAnchors.indexOf(d.type) !== -1) { - var c = _tvToPixel(chartId, d.t3, d.p3); - if (c) pts.push({ key: 'p3', x: c.x, y: c.y }); - } - return pts; -} - -// ---- Hit-testing: find drawing near pixel x,y ---- -function _tvHitTest(chartId, mx, my) { - var ds = window.__PYWRY_DRAWINGS__[chartId]; - if (!ds) return -1; - var viewport = _tvGetDrawingViewport(chartId); - if (mx < viewport.left || mx > viewport.right || my < viewport.top || my > viewport.bottom) return -1; - var THRESH = 8; - // Iterate in reverse so topmost drawing is picked first - for (var i = ds.drawings.length - 1; i >= 0; i--) { - var d = ds.drawings[i]; - if (d.hidden) continue; - if (_tvDrawHit(chartId, d, mx, my, THRESH)) return i; - } - return -1; -} - -function _tvDrawHit(chartId, d, mx, my, T) { - var s = _tvMainSeries(chartId); - if (!s) return false; - var viewport = _tvGetDrawingViewport(chartId); - - if (mx < viewport.left - T || mx > viewport.right + T || my < viewport.top - T || my > viewport.bottom + T) { - return false; - } - - if (d.type === 'hline') { - var yH = s.priceToCoordinate(d.price); - return yH !== null && mx >= viewport.left && mx <= viewport.right && Math.abs(my - yH) < T; - } - if (d.type === 'trendline' || d.type === 'channel' || d.type === 'ray' || d.type === 'extended_line' || d.type === 'regression_channel') { - var a = _tvToPixel(chartId, d.t1, d.p1); - var b = _tvToPixel(chartId, d.t2, d.p2); - if (!a || !b) return false; - // For ray: extend from a through b - if (d.type === 'ray') { - var rdx = b.x - a.x, rdy = b.y - a.y; - var rlen = Math.sqrt(rdx * rdx + rdy * rdy); - if (rlen > 0) { - var bExt = { x: a.x + (rdx / rlen) * 4000, y: a.y + (rdy / rlen) * 4000 }; - if (_distToSeg(mx, my, a.x, a.y, bExt.x, bExt.y) < T) return true; - } - return false; - } - // For extended_line: extend in both directions - if (d.type === 'extended_line') { - var edx = b.x - a.x, edy = b.y - a.y; - var elen = Math.sqrt(edx * edx + edy * edy); - if (elen > 0) { - var aExt = { x: a.x - (edx / elen) * 4000, y: a.y - (edy / elen) * 4000 }; - var bExt2 = { x: b.x + (edx / elen) * 4000, y: b.y + (edy / elen) * 4000 }; - if (_distToSeg(mx, my, aExt.x, aExt.y, bExt2.x, bExt2.y) < T) return true; - } - return false; - } - if (_distToSeg(mx, my, a.x, a.y, b.x, b.y) < T) return true; - if (d.type === 'channel') { - var off = d.offset || 30; - if (_distToSeg(mx, my, a.x, a.y + off, b.x, b.y + off) < T) return true; - // Inside fill - var minY = Math.min(a.y, b.y); - var maxY = Math.max(a.y, b.y) + off; - var minX = Math.min(a.x, b.x); - var maxX = Math.max(a.x, b.x); - if (mx >= minX && mx <= maxX && my >= minY && my <= maxY) return true; - } - if (d.type === 'regression_channel') { - var rcOff = d.offset || 30; - if (_distToSeg(mx, my, a.x, a.y - rcOff, b.x, b.y - rcOff) < T) return true; - if (_distToSeg(mx, my, a.x, a.y + rcOff, b.x, b.y + rcOff) < T) return true; - } - return false; - } - if (d.type === 'hray') { - var hrY = s.priceToCoordinate(d.p1); - var hrA = _tvToPixel(chartId, d.t1, d.p1); - if (hrY === null || !hrA) return false; - // Hit if near the horizontal line from anchor to right edge - if (Math.abs(my - hrY) < T && mx >= hrA.x - T) return true; - return false; - } - if (d.type === 'vline') { - var vA = _tvToPixel(chartId, d.t1, d.p1 || 0); - if (!vA) return false; - if (Math.abs(mx - vA.x) < T) return true; - return false; - } - if (d.type === 'crossline') { - var clA = _tvToPixel(chartId, d.t1, d.p1); - var clY = s.priceToCoordinate(d.p1); - if (!clA || clY === null) return false; - if (Math.abs(mx - clA.x) < T || Math.abs(my - clY) < T) return true; - return false; - } - if (d.type === 'flat_channel') { - var fcY1 = s.priceToCoordinate(d.p1); - var fcY2 = s.priceToCoordinate(d.p2); - if (fcY1 === null || fcY2 === null) return false; - if (Math.abs(my - fcY1) < T || Math.abs(my - fcY2) < T) return true; - var fcMin = Math.min(fcY1, fcY2), fcMax = Math.max(fcY1, fcY2); - if (my >= fcMin && my <= fcMax) return true; - return false; - } - if (d.type === 'brush') { - var bpts = d.points; - if (!bpts || bpts.length < 2) return false; - for (var bi = 0; bi < bpts.length - 1; bi++) { - var bpA = _tvToPixel(chartId, bpts[bi].t, bpts[bi].p); - var bpB = _tvToPixel(chartId, bpts[bi + 1].t, bpts[bi + 1].p); - if (bpA && bpB && _distToSeg(mx, my, bpA.x, bpA.y, bpB.x, bpB.y) < T) return true; - } - return false; - } - if (d.type === 'highlighter') { - var hpts = d.points; - if (!hpts || hpts.length < 2) return false; - for (var hi = 0; hi < hpts.length - 1; hi++) { - var hpA = _tvToPixel(chartId, hpts[hi].t, hpts[hi].p); - var hpB = _tvToPixel(chartId, hpts[hi + 1].t, hpts[hi + 1].p); - if (hpA && hpB && _distToSeg(mx, my, hpA.x, hpA.y, hpB.x, hpB.y) < T + 5) return true; - } - return false; - } - if (d.type === 'path' || d.type === 'polyline') { - var mpts = d.points; - if (!mpts || mpts.length < 2) return false; - for (var mi = 0; mi < mpts.length - 1; mi++) { - var mpA = _tvToPixel(chartId, mpts[mi].t, mpts[mi].p); - var mpB = _tvToPixel(chartId, mpts[mi + 1].t, mpts[mi + 1].p); - if (mpA && mpB && _distToSeg(mx, my, mpA.x, mpA.y, mpB.x, mpB.y) < T) return true; - } - // For path, also check closing segment - if (d.type === 'path' && mpts.length > 2) { - var mpFirst = _tvToPixel(chartId, mpts[0].t, mpts[0].p); - var mpLast = _tvToPixel(chartId, mpts[mpts.length - 1].t, mpts[mpts.length - 1].p); - if (mpFirst && mpLast && _distToSeg(mx, my, mpFirst.x, mpFirst.y, mpLast.x, mpLast.y) < T) return true; - } - return false; - } - if (d.type === 'rect') { - var r1 = _tvToPixel(chartId, d.t1, d.p1); - var r2 = _tvToPixel(chartId, d.t2, d.p2); - if (!r1 || !r2) return false; - var lx = Math.min(r1.x, r2.x); - var ly = Math.min(r1.y, r2.y); - var rx = Math.max(r1.x, r2.x); - var ry = Math.max(r1.y, r2.y); - if (mx >= lx - T && mx <= rx + T && my >= ly - T && my <= ry + T) return true; - return false; - } - if (d.type === 'fibonacci') { - var fT = s.priceToCoordinate(d.p1); - var fB = s.priceToCoordinate(d.p2); - if (fT === null || fB === null) return false; - var minFy = Math.min(fT, fB); - var maxFy = Math.max(fT, fB); - if (my >= minFy - T && my <= maxFy + T) return true; - return false; - } - if (d.type === 'fib_extension') { - var feA = _tvToPixel(chartId, d.t1, d.p1); - var feB = _tvToPixel(chartId, d.t2, d.p2); - if (!feA || !feB) return false; - if (_distToSeg(mx, my, feA.x, feA.y, feB.x, feB.y) < T) return true; - if (d.t3 !== undefined) { - var feC = _tvToPixel(chartId, d.t3, d.p3); - if (feC && _distToSeg(mx, my, feB.x, feB.y, feC.x, feC.y) < T) return true; - // Hit on any visible extension level line - if (feC) { - var abR = d.p2 - d.p1; - var fLvls = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : _FIB_LEVELS.slice(); - for (var fi = 0; fi < fLvls.length; fi++) { - var yy = s.priceToCoordinate(d.p3 + abR * fLvls[fi]); - if (yy !== null && Math.abs(my - yy) < T) return true; - } - } - } - return false; - } - if (d.type === 'fib_channel') { - var fcA = _tvToPixel(chartId, d.t1, d.p1); - var fcB = _tvToPixel(chartId, d.t2, d.p2); - if (!fcA || !fcB) return false; - if (_distToSeg(mx, my, fcA.x, fcA.y, fcB.x, fcB.y) < T) return true; - if (d.t3 !== undefined) { - var fcC = _tvToPixel(chartId, d.t3, d.p3); - if (fcC) { - var abDx = fcB.x - fcA.x, abDy = fcB.y - fcA.y; - var abLen = Math.sqrt(abDx * abDx + abDy * abDy); - if (abLen > 0) { - var cOff = ((fcC.x - fcA.x) * (-abDy / abLen) + (fcC.y - fcA.y) * (abDx / abLen)); - var px = -abDy / abLen, py = abDx / abLen; - if (_distToSeg(mx, my, fcA.x + px * cOff, fcA.y + py * cOff, fcB.x + px * cOff, fcB.y + py * cOff) < T) return true; - } - } - } - return false; - } - if (d.type === 'fib_timezone') { - var ftzA = _tvToPixel(chartId, d.t1, d.p1); - var ftzB = _tvToPixel(chartId, d.t2, d.p2); - if (!ftzA || !ftzB) return false; - if (_distToSeg(mx, my, ftzA.x, ftzA.y, ftzB.x, ftzB.y) < T) return true; - var tDiff = d.t2 - d.t1; - var fibNums = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144]; - for (var fi = 0; fi < fibNums.length; fi++) { - var xPx = _tvToPixel(chartId, d.t1 + tDiff * fibNums[fi], d.p1); - if (xPx && Math.abs(mx - xPx.x) < T) return true; - } - return false; - } - if (d.type === 'fib_fan' || d.type === 'pitchfan') { - var ffA = _tvToPixel(chartId, d.t1, d.p1); - var ffB = _tvToPixel(chartId, d.t2, d.p2); - if (!ffA || !ffB) return false; - if (_distToSeg(mx, my, ffA.x, ffA.y, ffB.x, ffB.y) < T) return true; - if (d.t3 !== undefined) { - var ffC = _tvToPixel(chartId, d.t3, d.p3); - if (ffC && _distToSeg(mx, my, ffA.x, ffA.y, ffC.x, ffC.y) < T) return true; - } - return false; - } - if (d.type === 'fib_arc' || d.type === 'fib_circle') { - var faA = _tvToPixel(chartId, d.t1, d.p1); - var faB = _tvToPixel(chartId, d.t2, d.p2); - if (!faA || !faB) return false; - if (_distToSeg(mx, my, faA.x, faA.y, faB.x, faB.y) < T) return true; - var dist = Math.sqrt(Math.pow(faB.x - faA.x, 2) + Math.pow(faB.y - faA.y, 2)); - var ctrX = d.type === 'fib_circle' ? (faA.x + faB.x) / 2 : faA.x; - var ctrY = d.type === 'fib_circle' ? (faA.y + faB.y) / 2 : faA.y; - var baseR = d.type === 'fib_circle' ? dist / 2 : dist; - var mDist = Math.sqrt(Math.pow(mx - ctrX, 2) + Math.pow(my - ctrY, 2)); - var fLvls = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : _FIB_LEVELS.slice(); - for (var fi = 0; fi < fLvls.length; fi++) { - if (fLvls[fi] === 0) continue; - if (Math.abs(mDist - baseR * fLvls[fi]) < T) return true; - } - return false; - } - if (d.type === 'fib_wedge') { - var fwA = _tvToPixel(chartId, d.t1, d.p1); - var fwB = _tvToPixel(chartId, d.t2, d.p2); - if (!fwA || !fwB) return false; - if (_distToSeg(mx, my, fwA.x, fwA.y, fwB.x, fwB.y) < T) return true; - if (d.t3 !== undefined) { - var fwC = _tvToPixel(chartId, d.t3, d.p3); - if (fwC && _distToSeg(mx, my, fwA.x, fwA.y, fwC.x, fwC.y) < T) return true; - } - return false; - } - if (d.type === 'fib_time') { - var ftA = _tvToPixel(chartId, d.t1, d.p1); - var ftB = _tvToPixel(chartId, d.t2, d.p2); - if (!ftA || !ftB) return false; - if (_distToSeg(mx, my, ftA.x, ftA.y, ftB.x, ftB.y) < T) return true; - if (d.t3 !== undefined) { - var ftC = _tvToPixel(chartId, d.t3, d.p3); - if (ftC && _distToSeg(mx, my, ftB.x, ftB.y, ftC.x, ftC.y) < T) return true; - var tDiff = d.t2 - d.t1; - var ftLevels = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : [0, 0.382, 0.5, 0.618, 1, 1.382, 1.618, 2, 2.618, 4.236]; - for (var fi = 0; fi < ftLevels.length; fi++) { - var xPx = _tvToPixel(chartId, d.t3 + tDiff * ftLevels[fi], d.p3); - if (xPx && Math.abs(mx - xPx.x) < T) return true; - } - } - return false; - } - if (d.type === 'fib_spiral') { - var fsA = _tvToPixel(chartId, d.t1, d.p1); - var fsB = _tvToPixel(chartId, d.t2, d.p2); - if (!fsA || !fsB) return false; - if (_distToSeg(mx, my, fsA.x, fsA.y, fsB.x, fsB.y) < T) return true; - var fsDist = Math.sqrt(Math.pow(mx - fsA.x, 2) + Math.pow(my - fsA.y, 2)); - var fsR = Math.sqrt(Math.pow(fsB.x - fsA.x, 2) + Math.pow(fsB.y - fsA.y, 2)); - if (fsR > 0) { - var fsAngle = Math.atan2(my - fsA.y, mx - fsA.x) - Math.atan2(fsB.y - fsA.y, fsB.x - fsA.x); - var fsPhi = 1.6180339887; - var fsB2 = Math.log(fsPhi) / (Math.PI / 2); - var fsExpected = fsR * Math.exp(fsB2 * fsAngle); - if (Math.abs(fsDist - fsExpected) < T * 2) return true; - } - return false; - } - if (d.type === 'gann_box' || d.type === 'gann_square_fixed' || d.type === 'gann_square') { - var gbA = _tvToPixel(chartId, d.t1, d.p1); - var gbB = _tvToPixel(chartId, d.t2, d.p2); - if (!gbA || !gbB) return false; - var gblx = Math.min(gbA.x, gbB.x), gbrx = Math.max(gbA.x, gbB.x); - var gbty = Math.min(gbA.y, gbB.y), gbby = Math.max(gbA.y, gbB.y); - if (mx >= gblx - T && mx <= gbrx + T && my >= gbty - T && my <= gbby + T) return true; - return false; - } - if (d.type === 'gann_fan') { - var gfA = _tvToPixel(chartId, d.t1, d.p1); - var gfB = _tvToPixel(chartId, d.t2, d.p2); - if (!gfA || !gfB) return false; - if (_distToSeg(mx, my, gfA.x, gfA.y, gfB.x, gfB.y) < T) return true; - var gfDx = gfB.x - gfA.x, gfDy = gfB.y - gfA.y; - var gfAngles = [0.125, 0.25, 0.333, 0.5, 1, 2, 3, 4, 8]; - for (var gi = 0; gi < gfAngles.length; gi++) { - var gRatio = gfAngles[gi]; - var gfEndX = gfA.x + gfDx; - var gfEndY = gfA.y + gfDy * gRatio; - if (_distToSeg(mx, my, gfA.x, gfA.y, gfEndX, gfEndY) < T) return true; - } - return false; - } - if (d.type === 'measure') { - var mp1 = _tvToPixel(chartId, d.t1, d.p1); - var mp2 = _tvToPixel(chartId, d.t2, d.p2); - if (!mp1 || !mp2) return false; - if (_distToSeg(mx, my, mp1.x, mp1.y, mp2.x, mp2.y) < T) return true; - return false; - } - if (d.type === 'text') { - var tp = _tvToPixel(chartId, d.t1, d.p1); - if (!tp) return false; - var tw = (d.text || 'Text').length * 8; - if (mx >= tp.x - 4 && mx <= tp.x + tw + 4 && my >= tp.y - 16 && my <= tp.y + 4) return true; - return false; - } - // Single-point text tools — bounding box hit test - var _txtNoteTools = ['anchored_text', 'note', 'price_note', 'pin', 'comment', 'price_label', 'signpost', 'flag_mark']; - if (_txtNoteTools.indexOf(d.type) !== -1) { - var tnp = _tvToPixel(chartId, d.t1, d.p1); - if (!tnp) return false; - var tnR = 25; - if (Math.abs(mx - tnp.x) < tnR + T && Math.abs(my - tnp.y) < tnR + T) return true; - return false; - } - if (d.type === 'callout') { - var clp1 = _tvToPixel(chartId, d.t1, d.p1); - if (!clp1) return false; - if (Math.abs(mx - clp1.x) < 60 && my >= clp1.y - 40 && my <= clp1.y + 4) return true; - if (d.t2 !== undefined) { - var clp2 = _tvToPixel(chartId, d.t2, d.p2); - if (clp2 && _distToSeg(mx, my, clp1.x, clp1.y, clp2.x, clp2.y) < T) return true; - } - return false; - } - if (d.type === 'arrow_marker') { - var ap1 = _tvToPixel(chartId, d.t1, d.p1); - var ap2 = _tvToPixel(chartId, d.t2, d.p2); - if (!ap1 || !ap2) return false; - var amdx = ap2.x - ap1.x, amdy = ap2.y - ap1.y; - var amLen = Math.sqrt(amdx * amdx + amdy * amdy); - if (amLen < 1) return false; - var amHeadW = Math.max(amLen * 0.22, 16); - if (_distToSeg(mx, my, ap1.x, ap1.y, ap2.x, ap2.y) < amHeadW + T) return true; - return false; - } - if (d.type === 'arrow') { - var ap1 = _tvToPixel(chartId, d.t1, d.p1); - var ap2 = _tvToPixel(chartId, d.t2, d.p2); - if (!ap1 || !ap2) return false; - return _distToSeg(mx, my, ap1.x, ap1.y, ap2.x, ap2.y) < T; - } - var arrowMarks = ['arrow_mark_up', 'arrow_mark_down', 'arrow_mark_left', 'arrow_mark_right']; - if (arrowMarks.indexOf(d.type) !== -1) { - var amp = _tvToPixel(chartId, d.t1, d.p1); - if (!amp) return false; - var amR = (d.size || 30) / 2; - return Math.abs(mx - amp.x) < amR && Math.abs(my - amp.y) < amR; - } - if (d.type === 'circle') { - var cp1 = _tvToPixel(chartId, d.t1, d.p1); - var cp2 = _tvToPixel(chartId, d.t2, d.p2); - if (!cp1 || !cp2) return false; - var ccx = (cp1.x + cp2.x) / 2, ccy = (cp1.y + cp2.y) / 2; - var cr = Math.sqrt(Math.pow(cp2.x - cp1.x, 2) + Math.pow(cp2.y - cp1.y, 2)) / 2; - var cDist = Math.sqrt(Math.pow(mx - ccx, 2) + Math.pow(my - ccy, 2)); - return Math.abs(cDist - cr) < T; - } - if (d.type === 'ellipse') { - var ep1 = _tvToPixel(chartId, d.t1, d.p1); - var ep2 = _tvToPixel(chartId, d.t2, d.p2); - if (!ep1 || !ep2) return false; - var ecx = (ep1.x + ep2.x) / 2, ecy = (ep1.y + ep2.y) / 2; - var erx = Math.abs(ep2.x - ep1.x) / 2, ery = Math.abs(ep2.y - ep1.y) / 2; - if (erx < 1 || ery < 1) return false; - var eNorm = Math.pow((mx - ecx) / erx, 2) + Math.pow((my - ecy) / ery, 2); - return Math.abs(eNorm - 1) < 0.3; - } - if (d.type === 'triangle') { - var tr1 = _tvToPixel(chartId, d.t1, d.p1); - var tr2 = _tvToPixel(chartId, d.t2, d.p2); - var tr3 = d.t3 !== undefined ? _tvToPixel(chartId, d.t3, d.p3) : null; - if (!tr1 || !tr2 || !tr3) return false; - if (_distToSeg(mx, my, tr1.x, tr1.y, tr2.x, tr2.y) < T) return true; - if (_distToSeg(mx, my, tr2.x, tr2.y, tr3.x, tr3.y) < T) return true; - if (_distToSeg(mx, my, tr3.x, tr3.y, tr1.x, tr1.y) < T) return true; - return false; - } - if (d.type === 'rotated_rect') { - var rr1 = _tvToPixel(chartId, d.t1, d.p1); - var rr2 = _tvToPixel(chartId, d.t2, d.p2); - var rr3 = d.t3 !== undefined ? _tvToPixel(chartId, d.t3, d.p3) : null; - if (!rr1 || !rr2 || !rr3) return false; - var rdx = rr2.x - rr1.x, rdy = rr2.y - rr1.y; - var rlen = Math.sqrt(rdx * rdx + rdy * rdy); - if (rlen < 1) return false; - var rnx = -rdy / rlen, rny = rdx / rlen; - var rprojW = (rr3.x - rr1.x) * rnx + (rr3.y - rr1.y) * rny; - var rc = rr1, rd = rr2; - var re = { x: rr2.x + rnx * rprojW, y: rr2.y + rny * rprojW }; - var rf = { x: rr1.x + rnx * rprojW, y: rr1.y + rny * rprojW }; - if (_distToSeg(mx, my, rc.x, rc.y, rd.x, rd.y) < T) return true; - if (_distToSeg(mx, my, rd.x, rd.y, re.x, re.y) < T) return true; - if (_distToSeg(mx, my, re.x, re.y, rf.x, rf.y) < T) return true; - if (_distToSeg(mx, my, rf.x, rf.y, rc.x, rc.y) < T) return true; - return false; - } - if (d.type === 'shape_arc' || d.type === 'curve') { - var scp1 = _tvToPixel(chartId, d.t1, d.p1); - var scp2 = _tvToPixel(chartId, d.t2, d.p2); - if (!scp1 || !scp2) return false; - if (_distToSeg(mx, my, scp1.x, scp1.y, scp2.x, scp2.y) < T + 10) return true; - return false; - } - if (d.type === 'double_curve') { - var dc1 = _tvToPixel(chartId, d.t1, d.p1); - var dc2 = _tvToPixel(chartId, d.t2, d.p2); - if (!dc1 || !dc2) return false; - if (_distToSeg(mx, my, dc1.x, dc1.y, dc2.x, dc2.y) < T + 10) return true; - return false; - } - if (d.type === 'long_position' || d.type === 'short_position') { - var lp1 = _tvToPixel(chartId, d.t1, d.p1); - var lp2 = _tvToPixel(chartId, d.t2, d.p2); - if (!lp1 || !lp2) return false; - var lpL = Math.min(lp1.x, lp2.x), lpR = Math.max(lp1.x, lp2.x); - if (lpR - lpL < 20) lpR = lpL + 150; - var lpStopY = lp1.y + (lp1.y - lp2.y); - var lpTopY = Math.min(lp2.y, lpStopY), lpBotY = Math.max(lp2.y, lpStopY); - if (mx >= lpL - T && mx <= lpR + T && my >= lpTopY - T && my <= lpBotY + T) return true; - return false; - } - if (d.type === 'forecast' || d.type === 'ghost_feed') { - var fg1 = _tvToPixel(chartId, d.t1, d.p1); - var fg2 = _tvToPixel(chartId, d.t2, d.p2); - if (!fg1 || !fg2) return false; - return _distToSeg(mx, my, fg1.x, fg1.y, fg2.x, fg2.y) < T; - } - if (d.type === 'bars_pattern' || d.type === 'projection' || d.type === 'fixed_range_vol' || d.type === 'date_price_range') { - var bx1 = _tvToPixel(chartId, d.t1, d.p1); - var bx2 = _tvToPixel(chartId, d.t2, d.p2); - if (!bx1 || !bx2) return false; - var bxL = Math.min(bx1.x, bx2.x), bxR = Math.max(bx1.x, bx2.x); - var bxT = Math.min(bx1.y, bx2.y), bxB = Math.max(bx1.y, bx2.y); - if (mx >= bxL - T && mx <= bxR + T && my >= bxT - T && my <= bxB + T) return true; - return false; - } - if (d.type === 'anchored_vwap') { - var avp = _tvToPixel(chartId, d.t1, d.p1); - if (!avp) return false; - return Math.abs(mx - avp.x) < T; - } - if (d.type === 'price_range') { - var prp1 = _tvToPixel(chartId, d.t1, d.p1); - var prp2 = _tvToPixel(chartId, d.t2, d.p2); - if (!prp1 || !prp2) return false; - if (Math.abs(my - prp1.y) < T || Math.abs(my - prp2.y) < T) return true; - if (Math.abs(mx - prp1.x) < T && my >= Math.min(prp1.y, prp2.y) && my <= Math.max(prp1.y, prp2.y)) return true; - return false; - } - if (d.type === 'date_range') { - var drp1 = _tvToPixel(chartId, d.t1, d.p1); - var drp2 = _tvToPixel(chartId, d.t2, d.p2); - if (!drp1 || !drp2) return false; - if (Math.abs(mx - drp1.x) < T || Math.abs(mx - drp2.x) < T) return true; - return false; - } - return false; -} - -function _distToSeg(px, py, x1, y1, x2, y2) { - var dx = x2 - x1, dy = y2 - y1; - var len2 = dx * dx + dy * dy; - if (len2 === 0) return Math.sqrt((px - x1) * (px - x1) + (py - y1) * (py - y1)); - var t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / len2)); - var nx = x1 + t * dx, ny = y1 + t * dy; - return Math.sqrt((px - nx) * (px - nx) + (py - ny) * (py - ny)); -} - -function _tvRoundRect(ctx, x, y, w, h, r) { - ctx.beginPath(); - ctx.moveTo(x + r, y); - ctx.lineTo(x + w - r, y); - ctx.quadraticCurveTo(x + w, y, x + w, y + r); - ctx.lineTo(x + w, y + h - r); - ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h); - ctx.lineTo(x + r, y + h); - ctx.quadraticCurveTo(x, y + h, x, y + h - r); - ctx.lineTo(x, y + r); - ctx.quadraticCurveTo(x, y, x + r, y); - ctx.closePath(); -} - -// ---- Helpers for Pearson's R ---- -function _tvGetSeriesDataBetween(chartId, t1, t2) { - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry || !entry.series) return null; - var data = entry.series.data ? entry.series.data() : null; - if (!data || !data.length) return null; - var lo = Math.min(t1, t2), hi = Math.max(t1, t2); - var result = []; - for (var i = 0; i < data.length; i++) { - var pt = data[i]; - if (pt.time >= lo && pt.time <= hi) { - var v = pt.close !== undefined ? pt.close : pt.value; - if (v !== undefined && v !== null) result.push({ idx: i, value: v }); - } - } - return result.length > 1 ? result : null; -} - -function _tvPearsonsR(vals) { - var n = vals.length; - if (n < 2) return null; - var sumX = 0, sumY = 0, sumXY = 0, sumX2 = 0, sumY2 = 0; - for (var i = 0; i < n; i++) { - var x = i, y = vals[i].value; - sumX += x; sumY += y; sumXY += x * y; sumX2 += x * x; sumY2 += y * y; - } - var denom = Math.sqrt((n * sumX2 - sumX * sumX) * (n * sumY2 - sumY * sumY)); - if (denom === 0) return 0; - return (n * sumXY - sumX * sumY) / denom; -} - -// ---- Rendering ---- -function _tvRenderDrawings(chartId) { - var ds = window.__PYWRY_DRAWINGS__[chartId]; - if (!ds) return; - var ctx = ds.ctx; - var w = ds.canvas.clientWidth; - var h = ds.canvas.clientHeight; - ctx.clearRect(0, 0, w, h); - - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry || !entry.chart) return; - - var theme = entry.theme || 'dark'; - var defColor = _cssVar('--pywry-draw-default-color'); - var textColor = _cssVar('--pywry-tvchart-text'); - var viewport = _tvGetDrawingViewport(chartId); - - for (var i = 0; i < ds.drawings.length; i++) { - if (ds.drawings[i].hidden) continue; - var isSel = (_drawSelectedChart === chartId && _drawSelectedIdx === i); - var isHov = (_drawHoverIdx === i && _drawSelectedChart === chartId && _drawSelectedIdx !== i); - var isMouseOver = (_drawHoverIdx === i); - _tvDrawOne(ctx, ds.drawings[i], chartId, defColor, textColor, w, h, isSel, isHov, isMouseOver, viewport); - } - if (_drawPending && _drawPending.chartId === chartId) { - _tvDrawOne(ctx, _drawPending, chartId, defColor, textColor, w, h, false, false, false, viewport); - } -} - -function _tvDrawOne(ctx, d, chartId, defColor, textColor, w, h, selected, hovered, mouseOver, viewport) { - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry) return; - var series = _tvMainSeries(chartId); - if (!series) return; - viewport = viewport || _tvGetDrawingViewport(chartId); - - var col = d.color || defColor; - var lw = d.lineWidth || 2; - if (hovered) { lw += 0.5; } - - ctx.save(); - ctx.strokeStyle = col; - ctx.fillStyle = col; - ctx.lineWidth = lw; - ctx.lineJoin = 'round'; - ctx.lineCap = 'round'; - ctx.beginPath(); - ctx.rect(viewport.left, viewport.top, viewport.width, viewport.height); - ctx.clip(); - - // Line style - if (d.lineStyle === 1) ctx.setLineDash([6, 4]); - else if (d.lineStyle === 2) ctx.setLineDash([2, 3]); - else ctx.setLineDash([]); - - // Pre-compute common anchor pixel positions used by many drawing types - var p1 = (d.t1 !== undefined && d.p1 !== undefined) ? _tvToPixel(chartId, d.t1, d.p1) : null; - var p2 = (d.t2 !== undefined && d.p2 !== undefined) ? _tvToPixel(chartId, d.t2, d.p2) : null; - - if (d.type === 'hline') { - var yH = series.priceToCoordinate(d.price); - if (yH !== null) { - ctx.beginPath(); - ctx.moveTo(0, yH); - ctx.lineTo(w, yH); - ctx.stroke(); - // Canvas price-label box (supplements the native price-line label). - // Only drawn when showPriceLabel is not explicitly false. - if (d.showPriceLabel !== false) { - var labelBoxColor = d.labelColor || col; - var prLabel = (d.title ? d.title + ' ' : '') + Number(d.price).toFixed(2); - ctx.font = 'bold 11px -apple-system,BlinkMacSystemFont,sans-serif'; - var pm = ctx.measureText(prLabel); - var plw = pm.width + 10; - var plh = 20; - var plx = viewport.right - plw - 4; - var ply = yH - plh / 2; - ctx.fillStyle = labelBoxColor; - ctx.beginPath(); - var r = 3; - ctx.moveTo(plx + r, ply); - ctx.lineTo(plx + plw - r, ply); - ctx.quadraticCurveTo(plx + plw, ply, plx + plw, ply + r); - ctx.lineTo(plx + plw, ply + plh - r); - ctx.quadraticCurveTo(plx + plw, ply + plh, plx + plw - r, ply + plh); - ctx.lineTo(plx + r, ply + plh); - ctx.quadraticCurveTo(plx, ply + plh, plx, ply + plh - r); - ctx.lineTo(plx, ply + r); - ctx.quadraticCurveTo(plx, ply, plx + r, ply); - ctx.fill(); - ctx.fillStyle = _cssVar('--pywry-draw-label-text'); - ctx.textBaseline = 'middle'; - ctx.fillText(prLabel, plx + 5, yH); - ctx.textBaseline = 'alphabetic'; - } - } - } else if (d.type === 'trendline') { - var a = _tvToPixel(chartId, d.t1, d.p1); - var b = _tvToPixel(chartId, d.t2, d.p2); - if (a && b) { - var dx = b.x - a.x, dy = b.y - a.y; - var len = Math.sqrt(dx * dx + dy * dy); - if (len > 0) { - var ext = 4000; - var ux = dx / len, uy = dy / len; - var startX = a.x, startY = a.y; - var endX = b.x, endY = b.y; - var extMode = d.extend || "Don't extend"; - if (d.ray) { - // Ray mode: start at A, extend through B to infinity - endX = b.x + ux * ext; - endY = b.y + uy * ext; - } else if (extMode === 'Left' || extMode === 'Both') { - startX = a.x - ux * ext; - startY = a.y - uy * ext; - } - if (!d.ray && (extMode === 'Right' || extMode === 'Both')) { - endX = b.x + ux * ext; - endY = b.y + uy * ext; - } - ctx.beginPath(); - ctx.moveTo(startX, startY); - ctx.lineTo(endX, endY); - ctx.stroke(); - } - // Middle point - if (d.showMiddlePoint) { - var midX = (a.x + b.x) / 2, midY = (a.y + b.y) / 2; - ctx.beginPath(); - ctx.arc(midX, midY, 4, 0, Math.PI * 2); - ctx.fillStyle = col; - ctx.fill(); - } - // Price labels at endpoints - if (d.showPriceLabels) { - ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; - ctx.fillStyle = col; - var p1Txt = d.p1 !== undefined ? d.p1.toFixed(2) : ''; - var p2Txt = d.p2 !== undefined ? d.p2.toFixed(2) : ''; - ctx.fillText(p1Txt, a.x + 4, a.y - 6); - ctx.fillText(p2Txt, b.x + 4, b.y - 6); - } - // Text annotation (from Text tab in settings) - if (d.text) { - var tMidX = (a.x + b.x) / 2, tMidY = (a.y + b.y) / 2; - var tFs = d.textFontSize || 12; - var tStyle = (d.textItalic ? 'italic ' : '') + (d.textBold ? 'bold ' : ''); - ctx.font = tStyle + tFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; - ctx.fillStyle = d.textColor || col; - ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; - ctx.fillText(d.text, tMidX, tMidY - 6); - ctx.textAlign = 'start'; ctx.textBaseline = 'alphabetic'; - } - // Stats (from Inputs tab: hidden/compact/values) - if (d.stats && d.stats !== 'hidden' && a && b) { - var sDx = d.p2 - d.p1, sPct = d.p1 !== 0 ? ((sDx / d.p1) * 100) : 0; - var sBars = Math.abs(Math.round((d.t2 - d.t1) / 86400)); // approximate bar count - var sText = ''; - if (d.stats === 'compact') { - sText = (sDx >= 0 ? '+' : '') + sDx.toFixed(2) + ' (' + (sPct >= 0 ? '+' : '') + sPct.toFixed(2) + '%)'; - } else { - sText = (sDx >= 0 ? '+' : '') + sDx.toFixed(2) + ' (' + (sPct >= 0 ? '+' : '') + sPct.toFixed(2) + '%)' + ' | ' + sBars + ' bars'; - } - var sFs = 11; - ctx.font = sFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; - ctx.fillStyle = col; - var sAnchor = d.statsPosition === 'left' ? a : b; - var sAlign = d.statsPosition === 'left' ? 'left' : 'right'; - ctx.textAlign = sAlign; ctx.textBaseline = 'top'; - ctx.fillText(sText, sAnchor.x, sAnchor.y + 6); - ctx.textAlign = 'start'; ctx.textBaseline = 'alphabetic'; - } - } - } else if (d.type === 'rect') { - var r1 = _tvToPixel(chartId, d.t1, d.p1); - var r2 = _tvToPixel(chartId, d.t2, d.p2); - if (r1 && r2) { - var rx = Math.min(r1.x, r2.x), ry = Math.min(r1.y, r2.y); - var rw = Math.abs(r2.x - r1.x), rh = Math.abs(r2.y - r1.y); - if (d.fillEnabled !== false) { - ctx.fillStyle = d.fillColor || col; - ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.15; - ctx.fillRect(rx, ry, rw, rh); - ctx.globalAlpha = 1.0; - } - ctx.strokeRect(rx, ry, rw, rh); - } - } else if (d.type === 'text') { - var tp = _tvToPixel(chartId, d.t1, d.p1); - if (tp) { - var fontStyle = (d.italic ? 'italic ' : '') + (d.bold !== false ? 'bold ' : ''); - ctx.font = fontStyle + (d.fontSize || 14) + 'px -apple-system,BlinkMacSystemFont,sans-serif'; - var textContent = d.text || 'Text'; - if (d.bgEnabled) { - var tm = ctx.measureText(textContent); - var pad = 4; - ctx.fillStyle = d.bgColor || _cssVar('--pywry-draw-text-bg'); - ctx.globalAlpha = d.bgOpacity !== undefined ? d.bgOpacity : 0.7; - ctx.fillRect(tp.x - pad, tp.y - (d.fontSize || 14) - pad, tm.width + pad * 2, (d.fontSize || 14) + pad * 2); - ctx.globalAlpha = 1.0; - } - ctx.fillStyle = d.color || defColor; - ctx.fillText(textContent, tp.x, tp.y); - } - } else if (d.type === 'anchored_text') { - // Anchored Text: text with a dot anchor below - var atp = _tvToPixel(chartId, d.t1, d.p1); - if (atp) { - var _atFs = d.fontSize || 14; - var _atFw = (d.italic ? 'italic ' : '') + (d.bold ? 'bold ' : ''); - ctx.font = _atFw + _atFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; - var _atTxt = d.text || 'Text'; - var _atTm = ctx.measureText(_atTxt); - if (d.bgEnabled) { - var _atPad = 4; - ctx.fillStyle = d.bgColor || '#2a2e39'; - ctx.globalAlpha = 0.7; - ctx.fillRect(atp.x - _atTm.width / 2 - _atPad, atp.y - _atFs - _atPad, _atTm.width + _atPad * 2, _atFs + _atPad * 2); - ctx.globalAlpha = 1.0; - } - ctx.fillStyle = d.color || defColor; - ctx.textAlign = 'center'; - ctx.fillText(_atTxt, atp.x, atp.y); - // Anchor dot - ctx.beginPath(); - ctx.arc(atp.x, atp.y + 6, 3, 0, Math.PI * 2); - ctx.fill(); - ctx.textAlign = 'start'; - } - } else if (d.type === 'note') { - // Note: text block with border - var ntp = _tvToPixel(chartId, d.t1, d.p1); - if (ntp) { - var _nFs = d.fontSize || 14; - var _nFw = (d.italic ? 'italic ' : '') + (d.bold ? 'bold ' : ''); - ctx.font = _nFw + _nFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; - var _nTxt = d.text || 'Note'; - var _nTm = ctx.measureText(_nTxt); - var _nPad = 8; - var _nW = _nTm.width + _nPad * 2; - var _nH = _nFs + _nPad * 2; - if (d.bgEnabled !== false) { - ctx.fillStyle = d.bgColor || '#2a2e39'; - ctx.globalAlpha = 0.85; - ctx.fillRect(ntp.x, ntp.y - _nH, _nW, _nH); - ctx.globalAlpha = 1.0; - } - if (d.borderEnabled) { - ctx.strokeStyle = d.borderColor || col; - ctx.strokeRect(ntp.x, ntp.y - _nH, _nW, _nH); - ctx.strokeStyle = col; - } - ctx.fillStyle = d.color || defColor; - ctx.fillText(_nTxt, ntp.x + _nPad, ntp.y - _nPad); - } - } else if (d.type === 'price_note') { - // Price Note: note anchored to a price level with horizontal dash - var pnp = _tvToPixel(chartId, d.t1, d.p1); - if (pnp) { - var _pnFs = d.fontSize || 14; - var _pnFw = (d.italic ? 'italic ' : '') + (d.bold ? 'bold ' : ''); - ctx.font = _pnFw + _pnFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; - var _pnTxt = d.text || 'Price Note'; - var _pnTm = ctx.measureText(_pnTxt); - var _pnPad = 6; - var _pnW = _pnTm.width + _pnPad * 2; - var _pnH = _pnFs + _pnPad * 2; - // Horizontal price dash - ctx.setLineDash([4, 3]); - ctx.beginPath(); - ctx.moveTo(pnp.x + _pnW + 4, pnp.y - _pnH / 2); - ctx.lineTo(pnp.x + _pnW + 40, pnp.y - _pnH / 2); - ctx.stroke(); - ctx.setLineDash(ls); - if (d.bgEnabled !== false) { - ctx.fillStyle = d.bgColor || '#2a2e39'; - ctx.globalAlpha = 0.85; - ctx.fillRect(pnp.x, pnp.y - _pnH, _pnW, _pnH); - ctx.globalAlpha = 1.0; - } - if (d.borderEnabled) { - ctx.strokeStyle = d.borderColor || col; - ctx.strokeRect(pnp.x, pnp.y - _pnH, _pnW, _pnH); - ctx.strokeStyle = col; - } - ctx.fillStyle = d.color || defColor; - ctx.fillText(_pnTxt, pnp.x + _pnPad, pnp.y - _pnPad); - } - } else if (d.type === 'pin') { - // Pin: map-pin icon with text bubble above - var pinP = _tvToPixel(chartId, d.t1, d.p1); - if (pinP) { - var pinCol = d.markerColor || col; - // Draw pin marker (teardrop shape) - var pinR = 8; - ctx.beginPath(); - ctx.arc(pinP.x, pinP.y - pinR - 6, pinR, Math.PI, 0, false); - ctx.lineTo(pinP.x, pinP.y); - ctx.closePath(); - ctx.fillStyle = pinCol; - ctx.fill(); - // Inner dot - ctx.beginPath(); - ctx.arc(pinP.x, pinP.y - pinR - 6, 3, 0, Math.PI * 2); - ctx.fillStyle = '#1e222d'; - ctx.fill(); - // Text bubble if text present (mouseover only) - if (d.text && mouseOver) { - var _pinFs = d.fontSize || 14; - var _pinFw = (d.italic ? 'italic ' : '') + (d.bold ? 'bold ' : ''); - ctx.font = _pinFw + _pinFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; - var _pinTm = ctx.measureText(d.text); - var _pinPad = 8; - var _pinBW = _pinTm.width + _pinPad * 2; - var _pinBH = _pinFs + _pinPad * 2; - var _pinBY = pinP.y - pinR * 2 - 12 - _pinBH; - var _pinBX = pinP.x - _pinBW / 2; - // Bubble background - ctx.fillStyle = d.bgColor || '#3a3e4a'; - ctx.globalAlpha = 0.9; - _tvRoundRect(ctx, _pinBX, _pinBY, _pinBW, _pinBH, 4); - ctx.fill(); - ctx.globalAlpha = 1.0; - // Bubble pointer - ctx.beginPath(); - ctx.moveTo(pinP.x - 5, _pinBY + _pinBH); - ctx.lineTo(pinP.x, _pinBY + _pinBH + 6); - ctx.lineTo(pinP.x + 5, _pinBY + _pinBH); - ctx.fillStyle = d.bgColor || '#3a3e4a'; - ctx.fill(); - // Text - ctx.fillStyle = d.color || defColor; - ctx.textAlign = 'center'; - ctx.fillText(d.text, pinP.x, _pinBY + _pinBH - _pinPad); - ctx.textAlign = 'start'; - } - // Small anchor circle at bottom - ctx.beginPath(); - ctx.arc(pinP.x, pinP.y + 3, 2, 0, Math.PI * 2); - ctx.fillStyle = pinCol; - ctx.fill(); - } - } else if (d.type === 'callout') { - // Callout: speech bubble with pointer from p2 to p1 - var clP1 = _tvToPixel(chartId, d.t1, d.p1); - var clP2 = d.t2 !== undefined ? _tvToPixel(chartId, d.t2, d.p2) : null; - if (clP1) { - var _clFs = d.fontSize || 14; - var _clFw = (d.italic ? 'italic ' : '') + (d.bold ? 'bold ' : ''); - ctx.font = _clFw + _clFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; - var _clTxt = d.text || 'Callout'; - var _clTm = ctx.measureText(_clTxt); - var _clPad = 10; - var _clW = _clTm.width + _clPad * 2; - var _clH = _clFs + _clPad * 2; - var _clX = clP1.x; - var _clY = clP1.y - _clH; - // Background - ctx.fillStyle = d.bgColor || '#2a2e39'; - ctx.globalAlpha = 0.9; - _tvRoundRect(ctx, _clX, _clY, _clW, _clH, 4); - ctx.fill(); - ctx.globalAlpha = 1.0; - if (d.borderEnabled) { - ctx.strokeStyle = d.borderColor || col; - _tvRoundRect(ctx, _clX, _clY, _clW, _clH, 4); - ctx.stroke(); - ctx.strokeStyle = col; - } - // Pointer line to p2 - if (clP2) { - ctx.beginPath(); - ctx.moveTo(_clX + _clW / 2, clP1.y); - ctx.lineTo(clP2.x, clP2.y); - ctx.stroke(); - } - // Text - ctx.fillStyle = d.color || defColor; - ctx.fillText(_clTxt, _clX + _clPad, clP1.y - _clPad); - } - } else if (d.type === 'comment') { - // Comment: circular bubble with text - var cmP = _tvToPixel(chartId, d.t1, d.p1); - if (cmP) { - var _cmFs = d.fontSize || 14; - var _cmFw = (d.italic ? 'italic ' : '') + (d.bold ? 'bold ' : ''); - ctx.font = _cmFw + _cmFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; - var _cmTxt = d.text || 'Comment'; - var _cmTm = ctx.measureText(_cmTxt); - var _cmR = Math.max(_cmTm.width / 2 + 12, _cmFs + 8); - // Background circle - ctx.beginPath(); - ctx.arc(cmP.x, cmP.y - _cmR, _cmR, 0, Math.PI * 2); - ctx.fillStyle = d.bgColor || '#2a2e39'; - ctx.globalAlpha = 0.85; - ctx.fill(); - ctx.globalAlpha = 1.0; - ctx.strokeStyle = d.borderEnabled ? (d.borderColor || col) : col; - ctx.stroke(); - ctx.strokeStyle = col; - // Pointer triangle - ctx.beginPath(); - ctx.moveTo(cmP.x - 5, cmP.y - 2); - ctx.lineTo(cmP.x, cmP.y + 6); - ctx.lineTo(cmP.x + 5, cmP.y - 2); - ctx.fillStyle = d.bgColor || '#2a2e39'; - ctx.fill(); - // Text - ctx.fillStyle = d.color || defColor; - ctx.textAlign = 'center'; - ctx.fillText(_cmTxt, cmP.x, cmP.y - _cmR + 4); - ctx.textAlign = 'start'; - } - } else if (d.type === 'price_label') { - // Price Label: arrow-shaped label pointing right - var plP = _tvToPixel(chartId, d.t1, d.p1); - if (plP) { - var _plFs = d.fontSize || 14; - var _plFw = (d.italic ? 'italic ' : '') + (d.bold ? 'bold ' : ''); - ctx.font = _plFw + _plFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; - var _plTxt = d.text || 'Label'; - var _plTm = ctx.measureText(_plTxt); - var _plPad = 6; - var _plW = _plTm.width + _plPad * 2; - var _plH = _plFs + _plPad * 2; - var _plArr = 8; - // Arrow-shaped polygon - ctx.beginPath(); - ctx.moveTo(plP.x, plP.y - _plH / 2); - ctx.lineTo(plP.x + _plW, plP.y - _plH / 2); - ctx.lineTo(plP.x + _plW + _plArr, plP.y); - ctx.lineTo(plP.x + _plW, plP.y + _plH / 2); - ctx.lineTo(plP.x, plP.y + _plH / 2); - ctx.closePath(); - ctx.fillStyle = d.bgColor || col; - ctx.globalAlpha = 0.85; - ctx.fill(); - ctx.globalAlpha = 1.0; - ctx.stroke(); - // Text - ctx.fillStyle = d.color || '#ffffff'; - ctx.textAlign = 'left'; - ctx.textBaseline = 'middle'; - ctx.fillText(_plTxt, plP.x + _plPad, plP.y); - ctx.textBaseline = 'alphabetic'; - } - } else if (d.type === 'signpost') { - // Signpost: vertical pole with flag-like sign - var spP = _tvToPixel(chartId, d.t1, d.p1); - if (spP) { - var spCol = d.markerColor || col; - var _spFs = d.fontSize || 14; - var _spFw = (d.italic ? 'italic ' : '') + (d.bold ? 'bold ' : ''); - ctx.font = _spFw + _spFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; - var _spTxt = d.text || 'Signpost'; - var _spTm = ctx.measureText(_spTxt); - var _spPad = 6; - var _spW = _spTm.width + _spPad * 2; - var _spH = _spFs + _spPad * 2; - // Vertical pole - ctx.beginPath(); - ctx.moveTo(spP.x, spP.y); - ctx.lineTo(spP.x, spP.y - _spH - 20); - ctx.strokeStyle = spCol; - ctx.stroke(); - // Sign shape (flag) - ctx.beginPath(); - ctx.moveTo(spP.x, spP.y - _spH - 20); - ctx.lineTo(spP.x + _spW, spP.y - _spH - 16); - ctx.lineTo(spP.x + _spW, spP.y - 24); - ctx.lineTo(spP.x, spP.y - 20); - ctx.closePath(); - ctx.fillStyle = d.bgColor || spCol; - ctx.globalAlpha = 0.85; - ctx.fill(); - ctx.globalAlpha = 1.0; - if (d.borderEnabled) { - ctx.stroke(); - } - // Text on sign - ctx.fillStyle = d.color || '#ffffff'; - ctx.textBaseline = 'middle'; - ctx.fillText(_spTxt, spP.x + _spPad, spP.y - _spH / 2 - 20); - ctx.textBaseline = 'alphabetic'; - } - } else if (d.type === 'flag_mark') { - // Flag Mark: small flag on a pole - var fmP = _tvToPixel(chartId, d.t1, d.p1); - if (fmP) { - var fmCol = d.markerColor || col; - var _fmFs = d.fontSize || 14; - // Pole - ctx.beginPath(); - ctx.moveTo(fmP.x, fmP.y); - ctx.lineTo(fmP.x, fmP.y - 30); - ctx.strokeStyle = fmCol; - ctx.stroke(); - // Flag - ctx.beginPath(); - ctx.moveTo(fmP.x, fmP.y - 30); - ctx.lineTo(fmP.x + 20, fmP.y - 26); - ctx.lineTo(fmP.x + 16, fmP.y - 22); - ctx.lineTo(fmP.x + 20, fmP.y - 18); - ctx.lineTo(fmP.x, fmP.y - 18); - ctx.closePath(); - ctx.fillStyle = fmCol; - ctx.fill(); - // Text below (mouseover only) - if (d.text && mouseOver) { - var _fmFw = (d.italic ? 'italic ' : '') + (d.bold ? 'bold ' : ''); - ctx.font = _fmFw + _fmFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; - ctx.fillStyle = d.color || defColor; - ctx.textAlign = 'center'; - ctx.fillText(d.text, fmP.x, fmP.y + _fmFs + 4); - ctx.textAlign = 'start'; - } - } - } else if (d.type === 'channel') { - var c1 = _tvToPixel(chartId, d.t1, d.p1); - var c2 = _tvToPixel(chartId, d.t2, d.p2); - if (c1 && c2) { - var chanOff = d.offset || 30; - // Fill between lines - if (d.fillEnabled !== false) { - ctx.fillStyle = d.fillColor || col; - ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.08; - ctx.beginPath(); - ctx.moveTo(c1.x, c1.y); - ctx.lineTo(c2.x, c2.y); - ctx.lineTo(c2.x, c2.y + chanOff); - ctx.lineTo(c1.x, c1.y + chanOff); - ctx.closePath(); - ctx.fill(); - ctx.globalAlpha = 1.0; - } - // Main line - ctx.beginPath(); - ctx.moveTo(c1.x, c1.y); - ctx.lineTo(c2.x, c2.y); - ctx.stroke(); - // Parallel line - ctx.beginPath(); - ctx.moveTo(c1.x, c1.y + chanOff); - ctx.lineTo(c2.x, c2.y + chanOff); - ctx.stroke(); - // Middle dashed line - if (d.showMiddleLine !== false) { - ctx.setLineDash([4, 4]); - ctx.globalAlpha = 0.5; - ctx.beginPath(); - ctx.moveTo(c1.x, c1.y + chanOff / 2); - ctx.lineTo(c2.x, c2.y + chanOff / 2); - ctx.stroke(); - ctx.globalAlpha = 1.0; - } - ctx.setLineDash(d.lineStyle === 1 ? [6,4] : d.lineStyle === 2 ? [2,3] : []); - } - } else if (d.type === 'fibonacci') { - var fTop = series.priceToCoordinate(d.p1); - var fBot = series.priceToCoordinate(d.p2); - if (fTop !== null && fBot !== null) { - // Reverse swaps the direction of level interpolation - var fibAnchorTop = d.reverse ? fBot : fTop; - var fibAnchorBot = d.reverse ? fTop : fBot; - var fibPriceTop = d.reverse ? d.p2 : d.p1; - var fibPriceBot = d.reverse ? d.p1 : d.p2; - var fibLevels = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : _FIB_LEVELS.slice(); - var fibColors = (d.fibColors && d.fibColors.length) ? d.fibColors : _getFibColors(); - var fibEnabled = d.fibEnabled || []; - var showLbls = d.showLabels !== false; - var showPrices = d.showPrices !== false; - // Use user-set lineStyle; endpoints always solid - var fibDash = d.lineStyle === 1 ? [6, 4] : d.lineStyle === 2 ? [2, 3] : [4, 3]; - for (var fi = 0; fi < fibLevels.length; fi++) { - if (fibEnabled[fi] === false) continue; - var lvl = fibEnabled.length ? fibLevels[fi] : _FIB_LEVELS[fi]; - var yFib = fibAnchorTop + (fibAnchorBot - fibAnchorTop) * lvl; - var fc = fibColors[fi] || col; - // Zone fill between this level and next - if (fi < fibLevels.length - 1 && fibEnabled[fi + 1] !== false) { - var yNext = fibAnchorTop + (fibAnchorBot - fibAnchorTop) * fibLevels[fi + 1]; - ctx.fillStyle = fc; - ctx.globalAlpha = 0.06; - ctx.fillRect(0, Math.min(yFib, yNext), w, Math.abs(yNext - yFib)); - ctx.globalAlpha = 1.0; - } - // Level line — respect user lineStyle and lineWidth - ctx.strokeStyle = fc; - ctx.lineWidth = lvl === 0 || lvl === 1 ? lw : Math.max(1, lw - 1); - ctx.setLineDash(lvl === 0 || lvl === 1 ? [] : fibDash); - ctx.beginPath(); - ctx.moveTo(0, yFib); - ctx.lineTo(w, yFib); - ctx.stroke(); - // Label - if (showLbls || showPrices) { - var priceFib = fibPriceTop + (fibPriceBot - fibPriceTop) * lvl; - ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; - ctx.fillStyle = fc; - var fibLabel = ''; - if (showLbls) fibLabel += lvl.toFixed(3); - if (showPrices) fibLabel += (fibLabel ? ' ' : '') + '(' + priceFib.toFixed(2) + ')'; - ctx.fillText(fibLabel, viewport.left + 8, yFib - 4); - } - } - ctx.setLineDash([]); - ctx.lineWidth = lw; - - // Trend line — diagonal dashed line connecting the two anchor points - var fA1 = _tvToPixel(chartId, d.t1, d.p1); - var fA2 = _tvToPixel(chartId, d.t2, d.p2); - if (fA1 && fA2) { - ctx.strokeStyle = col; - ctx.lineWidth = lw; - ctx.setLineDash([6, 4]); - ctx.globalAlpha = 0.6; - ctx.beginPath(); - ctx.moveTo(fA1.x, fA1.y); - ctx.lineTo(fA2.x, fA2.y); - ctx.stroke(); - ctx.globalAlpha = 1.0; - ctx.setLineDash([]); - } - } - } else if (d.type === 'fib_extension') { - // Trend-Based Fib Extension: 3 anchor points (A, B, C) - // Levels project from C using the A→B distance - var feA = _tvToPixel(chartId, d.t1, d.p1); - var feB = _tvToPixel(chartId, d.t2, d.p2); - var feC = d.t3 !== undefined ? _tvToPixel(chartId, d.t3, d.p3) : null; - if (feA && feB) { - // Draw the A→B leg - ctx.strokeStyle = col; - ctx.lineWidth = lw; - ctx.setLineDash([]); - ctx.beginPath(); ctx.moveTo(feA.x, feA.y); ctx.lineTo(feB.x, feB.y); ctx.stroke(); - if (feC) { - // Draw B→C leg - ctx.setLineDash([4, 3]); - ctx.beginPath(); ctx.moveTo(feB.x, feB.y); ctx.lineTo(feC.x, feC.y); ctx.stroke(); - ctx.setLineDash([]); - // Extension levels project from C using AB price range - var abRange = d.p2 - d.p1; - var extDefLevels = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618, 2.618, 4.236]; - var fibLevels = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : extDefLevels; - var fibColors = (d.fibColors && d.fibColors.length) ? d.fibColors : _getFibColors(); - var fibEnabled = d.fibEnabled || []; - var showLbls = d.showLabels !== false; - var showPrices = d.showPrices !== false; - for (var fi = 0; fi < fibLevels.length; fi++) { - if (fibEnabled[fi] === false) continue; - var lvl = fibLevels[fi]; - var extPrice = d.p3 + abRange * lvl; - var yExt = series.priceToCoordinate(extPrice); - if (yExt === null) continue; - var fc = fibColors[fi % fibColors.length] || col; - // Zone fill between this level and next - if (d.fillEnabled !== false && fi < fibLevels.length - 1 && fibEnabled[fi + 1] !== false) { - var nextPrice = d.p3 + abRange * fibLevels[fi + 1]; - var yNext = series.priceToCoordinate(nextPrice); - if (yNext !== null) { - ctx.fillStyle = fc; - ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.06; - ctx.fillRect(0, Math.min(yExt, yNext), w, Math.abs(yNext - yExt)); - ctx.globalAlpha = 1.0; - } - } - ctx.strokeStyle = fc; - ctx.lineWidth = lvl === 0 || lvl === 1 ? lw : Math.max(1, lw - 1); - ctx.setLineDash(lvl === 0 || lvl === 1 ? [] : [4, 3]); - ctx.beginPath(); ctx.moveTo(0, yExt); ctx.lineTo(w, yExt); ctx.stroke(); - if (showLbls || showPrices) { - ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; - ctx.fillStyle = fc; - var lbl = ''; - if (showLbls) lbl += lvl.toFixed(3); - if (showPrices) lbl += (lbl ? ' (' : '') + extPrice.toFixed(2) + (lbl ? ')' : ''); - ctx.fillText(lbl, viewport.left + 8, yExt - 4); - } - } - ctx.setLineDash([]); - ctx.lineWidth = lw; - } - } - } else if (d.type === 'fib_channel') { - // Fib Channel: two trend lines (A→B and parallel through C) with fib levels between - var fcA = _tvToPixel(chartId, d.t1, d.p1); - var fcB = _tvToPixel(chartId, d.t2, d.p2); - var fcC = d.t3 !== undefined ? _tvToPixel(chartId, d.t3, d.p3) : null; - if (fcA && fcB) { - ctx.strokeStyle = col; - ctx.lineWidth = lw; - ctx.setLineDash([]); - ctx.beginPath(); ctx.moveTo(fcA.x, fcA.y); ctx.lineTo(fcB.x, fcB.y); ctx.stroke(); - if (fcC) { - // Perpendicular offset from A→B line to C - var abDx = fcB.x - fcA.x, abDy = fcB.y - fcA.y; - var abLen = Math.sqrt(abDx * abDx + abDy * abDy); - if (abLen > 0) { - // Perpendicular offset = distance from C to line AB - var cOff = ((fcC.x - fcA.x) * (-abDy / abLen) + (fcC.y - fcA.y) * (abDx / abLen)); - var px = -abDy / abLen, py = abDx / abLen; - var fibLevels = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : _FIB_LEVELS.slice(); - var fibColors = (d.fibColors && d.fibColors.length) ? d.fibColors : _getFibColors(); - var fibEnabled = d.fibEnabled || []; - var showLbls = d.showLabels !== false; - for (var fi = 0; fi < fibLevels.length; fi++) { - if (fibEnabled[fi] === false) continue; - var lvl = fibLevels[fi]; - var off = cOff * lvl; - var fc = fibColors[fi] || col; - ctx.strokeStyle = fc; - ctx.lineWidth = lvl === 0 || lvl === 1 ? lw : Math.max(1, lw - 1); - ctx.setLineDash(lvl === 0 || lvl === 1 ? [] : [4, 3]); - ctx.beginPath(); - ctx.moveTo(fcA.x + px * off, fcA.y + py * off); - ctx.lineTo(fcB.x + px * off, fcB.y + py * off); - ctx.stroke(); - if (showLbls) { - ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; - ctx.fillStyle = fc; - ctx.fillText(lvl.toFixed(3), fcA.x + px * off + 4, fcA.y + py * off - 4); - } - } - // Fill between 0 and 1 levels - if (d.fillEnabled !== false) { - ctx.fillStyle = d.fillColor || col; - ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.04; - ctx.beginPath(); - ctx.moveTo(fcA.x, fcA.y); - ctx.lineTo(fcB.x, fcB.y); - ctx.lineTo(fcB.x + px * cOff, fcB.y + py * cOff); - ctx.lineTo(fcA.x + px * cOff, fcA.y + py * cOff); - ctx.closePath(); - ctx.fill(); - ctx.globalAlpha = 1.0; - } - ctx.setLineDash([]); - ctx.lineWidth = lw; - } - } - } - } else if (d.type === 'fib_timezone') { - // Fib Time Zone: vertical lines at fibonacci time intervals from anchor - var ftzA = _tvToPixel(chartId, d.t1, d.p1); - var ftzB = _tvToPixel(chartId, d.t2, d.p2); - if (ftzA && ftzB) { - var tDiff = d.t2 - d.t1; - var fibNums = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144]; - var fibColors = (d.fibColors && d.fibColors.length) ? d.fibColors : _getFibColors(); - var fibTzEnabled = d.fibEnabled || []; - var showLbls = d.showLabels !== false; - for (var fi = 0; fi < fibNums.length; fi++) { - if (fibTzEnabled[fi] === false) continue; - var tLine = d.t1 + tDiff * fibNums[fi]; - var xPx = _tvToPixel(chartId, tLine, d.p1); - if (!xPx) continue; - if (xPx.x < 0 || xPx.x > w) continue; - var fc = fibColors[fi % fibColors.length] || col; - ctx.strokeStyle = fc; - ctx.lineWidth = fi < 3 ? lw : Math.max(1, lw - 1); - ctx.setLineDash(fi < 3 ? [] : [4, 3]); - ctx.beginPath(); ctx.moveTo(xPx.x, 0); ctx.lineTo(xPx.x, h); ctx.stroke(); - if (showLbls) { - ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; - ctx.fillStyle = fc; - ctx.fillText(String(fibNums[fi]), xPx.x + 3, 14); - } - } - ctx.setLineDash([]); - ctx.lineWidth = lw; - // Trend line connecting anchors - if (d.showTrendLine !== false) { - ctx.strokeStyle = col; - ctx.setLineDash([6, 4]); - ctx.globalAlpha = 0.5; - ctx.beginPath(); ctx.moveTo(ftzA.x, ftzA.y); ctx.lineTo(ftzB.x, ftzB.y); ctx.stroke(); - ctx.globalAlpha = 1.0; - ctx.setLineDash([]); - } - } - } else if (d.type === 'fib_fan') { - // Fib Speed Resistance Fan: fan lines from anchor A through fib-interpolated points on B - var ffA = _tvToPixel(chartId, d.t1, d.p1); - var ffB = _tvToPixel(chartId, d.t2, d.p2); - if (ffA && ffB) { - var fibLevels = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : _FIB_LEVELS.slice(); - var fibColors = (d.fibColors && d.fibColors.length) ? d.fibColors : _getFibColors(); - var fibEnabled = d.fibEnabled || []; - var showLbls = d.showLabels !== false; - var fdx = ffB.x - ffA.x, fdy = ffB.y - ffA.y; - for (var fi = 0; fi < fibLevels.length; fi++) { - if (fibEnabled[fi] === false) continue; - var lvl = fibLevels[fi]; - if (lvl === 0) continue; // 0 level = horizontal through A - var fc = fibColors[fi] || col; - // Fan line from A to point at (B.x, lerp(A.y, B.y, lvl)) - var fanY = ffA.y + fdy * lvl; - ctx.strokeStyle = fc; - ctx.lineWidth = lvl === 1 ? lw : Math.max(1, lw - 1); - ctx.setLineDash(lvl === 1 ? [] : [4, 3]); - // Extend the line beyond B - var extLen = 4000; - var fDx = ffB.x - ffA.x, fDy = fanY - ffA.y; - var fLen = Math.sqrt(fDx * fDx + fDy * fDy); - if (fLen > 0) { - var eX = ffA.x + (fDx / fLen) * extLen; - var eY = ffA.y + (fDy / fLen) * extLen; - ctx.beginPath(); ctx.moveTo(ffA.x, ffA.y); ctx.lineTo(eX, eY); ctx.stroke(); - } - if (showLbls) { - ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; - ctx.fillStyle = fc; - ctx.fillText(lvl.toFixed(3), ffB.x + 4, fanY - 4); - } - } - // Fill between adjacent fan lines - if (d.fillEnabled !== false) { - ctx.fillStyle = col; - ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.03; - for (var fi = 0; fi < fibLevels.length - 1; fi++) { - if (fibEnabled[fi] === false || fibEnabled[fi + 1] === false) continue; - var y1 = ffA.y + fdy * fibLevels[fi]; - var y2 = ffA.y + fdy * fibLevels[fi + 1]; - ctx.beginPath(); - ctx.moveTo(ffA.x, ffA.y); - ctx.lineTo(ffB.x, y1); - ctx.lineTo(ffB.x, y2); - ctx.closePath(); - ctx.fill(); - } - ctx.globalAlpha = 1.0; - } - ctx.setLineDash([]); - ctx.lineWidth = lw; - } - } else if (d.type === 'fib_arc') { - // Fib Speed Resistance Arcs: semi-circle arcs centered at A, opening away from B - var faA = _tvToPixel(chartId, d.t1, d.p1); - var faB = _tvToPixel(chartId, d.t2, d.p2); - if (faA && faB) { - var abDist = Math.sqrt(Math.pow(faB.x - faA.x, 2) + Math.pow(faB.y - faA.y, 2)); - var fibLevels = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : _FIB_LEVELS.slice(); - var fibColors = (d.fibColors && d.fibColors.length) ? d.fibColors : _getFibColors(); - var fibEnabled = d.fibEnabled || []; - var showLbls = d.showLabels !== false; - // Angle from A to B — arcs open in the opposite direction (away from B) - var abAngle = Math.atan2(faB.y - faA.y, faB.x - faA.x); - var arcStart = abAngle + Math.PI / 2; - var arcEnd = abAngle - Math.PI / 2; - // Trend line - if (d.showTrendLine !== false) { - ctx.strokeStyle = col; - ctx.setLineDash([6, 4]); - ctx.globalAlpha = 0.5; - ctx.beginPath(); ctx.moveTo(faA.x, faA.y); ctx.lineTo(faB.x, faB.y); ctx.stroke(); - ctx.globalAlpha = 1.0; - ctx.setLineDash([]); - } - for (var fi = 0; fi < fibLevels.length; fi++) { - if (fibEnabled[fi] === false) continue; - var lvl = fibLevels[fi]; - if (lvl === 0) continue; - var fc = fibColors[fi] || col; - var arcR = abDist * lvl; - ctx.strokeStyle = fc; - ctx.lineWidth = lvl === 1 ? lw : Math.max(1, lw - 1); - ctx.setLineDash(lvl === 1 ? [] : [4, 3]); - ctx.beginPath(); - ctx.arc(faA.x, faA.y, arcR, arcStart, arcEnd); - ctx.stroke(); - if (showLbls) { - ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; - ctx.fillStyle = fc; - // Label at the end of the arc (perpendicular to AB) - var lblX = faA.x + arcR * Math.cos(arcEnd) + 3; - var lblY = faA.y + arcR * Math.sin(arcEnd) - 4; - ctx.fillText(lvl.toFixed(3), lblX, lblY); - } - } - ctx.setLineDash([]); - ctx.lineWidth = lw; - } - } else if (d.type === 'fib_circle') { - // Fib Circles: concentric circles centered at midpoint of AB with fib-scaled radii - var fcirA = _tvToPixel(chartId, d.t1, d.p1); - var fcirB = _tvToPixel(chartId, d.t2, d.p2); - if (fcirA && fcirB) { - var cMidX = (fcirA.x + fcirB.x) / 2, cMidY = (fcirA.y + fcirB.y) / 2; - var baseR = Math.sqrt(Math.pow(fcirB.x - fcirA.x, 2) + Math.pow(fcirB.y - fcirA.y, 2)) / 2; - var fibLevels = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : _FIB_LEVELS.slice(); - var fibColors = (d.fibColors && d.fibColors.length) ? d.fibColors : _getFibColors(); - var fibEnabled = d.fibEnabled || []; - var showLbls = d.showLabels !== false; - for (var fi = 0; fi < fibLevels.length; fi++) { - if (fibEnabled[fi] === false) continue; - var lvl = fibLevels[fi]; - if (lvl === 0) continue; - var fc = fibColors[fi] || col; - var cR = baseR * lvl; - ctx.strokeStyle = fc; - ctx.lineWidth = lvl === 1 ? lw : Math.max(1, lw - 1); - ctx.setLineDash(lvl === 1 ? [] : [4, 3]); - ctx.beginPath(); - ctx.arc(cMidX, cMidY, cR, 0, Math.PI * 2); - ctx.stroke(); - if (showLbls) { - ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; - ctx.fillStyle = fc; - ctx.fillText(lvl.toFixed(3), cMidX + cR + 3, cMidY - 4); - } - } - // Trend line - if (d.showTrendLine !== false) { - ctx.strokeStyle = col; - ctx.setLineDash([6, 4]); - ctx.globalAlpha = 0.5; - ctx.beginPath(); ctx.moveTo(fcirA.x, fcirA.y); ctx.lineTo(fcirB.x, fcirB.y); ctx.stroke(); - ctx.globalAlpha = 1.0; - ctx.setLineDash([]); - } - ctx.lineWidth = lw; - } - } else if (d.type === 'fib_wedge') { - // Fib Wedge: two trend lines from A→B and A→C with fib levels between them - var fwA = _tvToPixel(chartId, d.t1, d.p1); - var fwB = _tvToPixel(chartId, d.t2, d.p2); - var fwC = d.t3 !== undefined ? _tvToPixel(chartId, d.t3, d.p3) : null; - if (fwA && fwB) { - ctx.strokeStyle = col; - ctx.lineWidth = lw; - ctx.setLineDash([]); - // Draw A→B - ctx.beginPath(); ctx.moveTo(fwA.x, fwA.y); ctx.lineTo(fwB.x, fwB.y); ctx.stroke(); - if (fwC) { - // Draw A→C - ctx.beginPath(); ctx.moveTo(fwA.x, fwA.y); ctx.lineTo(fwC.x, fwC.y); ctx.stroke(); - // Fib lines between A→B and A→C - var fibLevels = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : _FIB_LEVELS.slice(); - var fibColors = (d.fibColors && d.fibColors.length) ? d.fibColors : _getFibColors(); - var fibEnabled = d.fibEnabled || []; - var showLbls = d.showLabels !== false; - for (var fi = 0; fi < fibLevels.length; fi++) { - if (fibEnabled[fi] === false) continue; - var lvl = fibLevels[fi]; - if (lvl === 0 || lvl === 1) continue; - var fc = fibColors[fi] || col; - // Interpolated endpoint between B and C - var wEndX = fwB.x + (fwC.x - fwB.x) * lvl; - var wEndY = fwB.y + (fwC.y - fwB.y) * lvl; - ctx.strokeStyle = fc; - ctx.lineWidth = Math.max(1, lw - 1); - ctx.setLineDash([4, 3]); - ctx.beginPath(); ctx.moveTo(fwA.x, fwA.y); ctx.lineTo(wEndX, wEndY); ctx.stroke(); - if (showLbls) { - ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; - ctx.fillStyle = fc; - ctx.fillText(lvl.toFixed(3), wEndX + 4, wEndY - 4); - } - } - // Fill - if (d.fillEnabled !== false) { - ctx.fillStyle = d.fillColor || col; - ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.04; - ctx.beginPath(); - ctx.moveTo(fwA.x, fwA.y); - ctx.lineTo(fwB.x, fwB.y); - ctx.lineTo(fwC.x, fwC.y); - ctx.closePath(); - ctx.fill(); - ctx.globalAlpha = 1.0; - } - ctx.setLineDash([]); - ctx.lineWidth = lw; - } - } - } else if (d.type === 'pitchfan') { - // Pitchfan: median line from A to midpoint(B,C), with fan lines from A through fib divisions - var pfA = _tvToPixel(chartId, d.t1, d.p1); - var pfB = _tvToPixel(chartId, d.t2, d.p2); - var pfC = d.t3 !== undefined ? _tvToPixel(chartId, d.t3, d.p3) : null; - if (pfA && pfB) { - ctx.strokeStyle = col; - ctx.lineWidth = lw; - ctx.setLineDash([]); - ctx.beginPath(); ctx.moveTo(pfA.x, pfA.y); ctx.lineTo(pfB.x, pfB.y); ctx.stroke(); - if (pfC) { - ctx.beginPath(); ctx.moveTo(pfA.x, pfA.y); ctx.lineTo(pfC.x, pfC.y); ctx.stroke(); - // Median line to midpoint of B and C - var pfMidX = (pfB.x + pfC.x) / 2, pfMidY = (pfB.y + pfC.y) / 2; - if (d.showMedian !== false) { - ctx.strokeStyle = d.medianColor || col; - ctx.setLineDash([6, 4]); - ctx.beginPath(); ctx.moveTo(pfA.x, pfA.y); ctx.lineTo(pfMidX, pfMidY); ctx.stroke(); - ctx.setLineDash([]); - ctx.strokeStyle = col; - } - // Fan lines from A through fib divisions between B and C - var pfDefLevels = [0.236, 0.382, 0.5, 0.618, 0.786]; - var fibLevels = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : pfDefLevels; - var fibColors = (d.fibColors && d.fibColors.length) ? d.fibColors : _getFibColors(); - var fibEnabled = d.fibEnabled || []; - var showLbls = d.showLabels !== false; - for (var fi = 0; fi < fibLevels.length; fi++) { - if (fibEnabled[fi] === false) continue; - var lvl = fibLevels[fi]; - var fc = fibColors[fi] || col; - var pfTgtX = pfB.x + (pfC.x - pfB.x) * lvl; - var pfTgtY = pfB.y + (pfC.y - pfB.y) * lvl; - // Extend from A through target point - var pfDx = pfTgtX - pfA.x, pfDy = pfTgtY - pfA.y; - var pfLen = Math.sqrt(pfDx * pfDx + pfDy * pfDy); - if (pfLen > 0) { - var pfExt = 4000; - ctx.strokeStyle = fc; - ctx.lineWidth = Math.max(1, lw - 1); - ctx.setLineDash([4, 3]); - ctx.beginPath(); - ctx.moveTo(pfA.x, pfA.y); - ctx.lineTo(pfA.x + (pfDx / pfLen) * pfExt, pfA.y + (pfDy / pfLen) * pfExt); - ctx.stroke(); - } - if (showLbls) { - ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; - ctx.fillStyle = fc; - ctx.fillText(lvl.toFixed(3), pfTgtX + 4, pfTgtY - 4); - } - } - ctx.setLineDash([]); - ctx.lineWidth = lw; - } - } - } else if (d.type === 'fib_time') { - // Trend-Based Fib Time: 3-point, A→B time range projected from C as vertical lines - var ftA = _tvToPixel(chartId, d.t1, d.p1); - var ftB = _tvToPixel(chartId, d.t2, d.p2); - var ftC = d.t3 !== undefined ? _tvToPixel(chartId, d.t3, d.p3) : null; - if (ftA && ftB) { - var tDiff = d.t2 - d.t1; - // Trend line A→B - ctx.strokeStyle = col; - ctx.lineWidth = lw; - ctx.setLineDash([6, 4]); - ctx.globalAlpha = 0.5; - ctx.beginPath(); ctx.moveTo(ftA.x, ftA.y); ctx.lineTo(ftB.x, ftB.y); ctx.stroke(); - if (ftC) { - ctx.beginPath(); ctx.moveTo(ftB.x, ftB.y); ctx.lineTo(ftC.x, ftC.y); ctx.stroke(); - } - ctx.globalAlpha = 1.0; - ctx.setLineDash([]); - // Vertical lines at fib ratios of AB time, projected from C - var projT = ftC ? d.t3 : d.t1; - var ftLevels = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : [0, 0.382, 0.5, 0.618, 1, 1.382, 1.618, 2, 2.618, 4.236]; - var fibColors = (d.fibColors && d.fibColors.length) ? d.fibColors : _getFibColors(); - var fibEnabled = d.fibEnabled || []; - var showLbls = d.showLabels !== false; - for (var fi = 0; fi < ftLevels.length; fi++) { - if (fibEnabled[fi] === false) continue; - var tLine = projT + tDiff * ftLevels[fi]; - var xPx = _tvToPixel(chartId, tLine, d.p1); - if (!xPx) continue; - if (xPx.x < 0 || xPx.x > w) continue; - var fc = fibColors[fi % fibColors.length] || col; - ctx.strokeStyle = fc; - ctx.lineWidth = (ftLevels[fi] === 0 || ftLevels[fi] === 1) ? lw : Math.max(1, lw - 1); - ctx.setLineDash((ftLevels[fi] === 0 || ftLevels[fi] === 1) ? [] : [4, 3]); - ctx.beginPath(); ctx.moveTo(xPx.x, 0); ctx.lineTo(xPx.x, h); ctx.stroke(); - if (showLbls) { - ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; - ctx.fillStyle = fc; - ctx.fillText(ftLevels[fi].toFixed(3), xPx.x + 3, 14); - } - } - ctx.setLineDash([]); - ctx.lineWidth = lw; - } - } else if (d.type === 'fib_spiral') { - // Fib Spiral: golden logarithmic spiral from center A through B - var fsA = _tvToPixel(chartId, d.t1, d.p1); - var fsB = _tvToPixel(chartId, d.t2, d.p2); - if (fsA && fsB) { - var fsDx = fsB.x - fsA.x, fsDy = fsB.y - fsA.y; - var fsR = Math.sqrt(fsDx * fsDx + fsDy * fsDy); - var fsStartAngle = Math.atan2(fsDy, fsDx); - var fsPhi = 1.6180339887; - var fsGrowth = Math.log(fsPhi) / (Math.PI / 2); - ctx.strokeStyle = col; - ctx.lineWidth = lw; - ctx.beginPath(); - var fsNPts = 400; - var fsMinTheta = -4 * Math.PI; - var fsMaxTheta = 4 * Math.PI; - var fsFirst = true; - for (var fi = 0; fi <= fsNPts; fi++) { - var theta = fsMinTheta + (fi / fsNPts) * (fsMaxTheta - fsMinTheta); - var r = fsR * Math.exp(fsGrowth * theta); - if (r < 1 || r > 5000) { fsFirst = true; continue; } - var sx = fsA.x + r * Math.cos(fsStartAngle + theta); - var sy = fsA.y + r * Math.sin(fsStartAngle + theta); - if (fsFirst) { ctx.moveTo(sx, sy); fsFirst = false; } - else ctx.lineTo(sx, sy); - } - ctx.stroke(); - // AB reference line - ctx.setLineDash([6, 4]); - ctx.globalAlpha = 0.5; - ctx.beginPath(); ctx.moveTo(fsA.x, fsA.y); ctx.lineTo(fsB.x, fsB.y); ctx.stroke(); - ctx.globalAlpha = 1.0; - ctx.setLineDash([]); - } - } else if (d.type === 'gann_box') { - // Gann Box: rectangular grid with diagonal, price/time subdivisions - var gbA = _tvToPixel(chartId, d.t1, d.p1); - var gbB = _tvToPixel(chartId, d.t2, d.p2); - if (gbA && gbB) { - var gblx = Math.min(gbA.x, gbB.x), gbrx = Math.max(gbA.x, gbB.x); - var gbty = Math.min(gbA.y, gbB.y), gbby = Math.max(gbA.y, gbB.y); - var gbW = gbrx - gblx, gbH = gbby - gbty; - // Box outline - ctx.strokeStyle = col; - ctx.lineWidth = lw; - ctx.strokeRect(gblx, gbty, gbW, gbH); - // Horizontal grid lines - var gbLevels = d.gannLevels || [0.25, 0.5, 0.75]; - var gbColors = (d.fibColors && d.fibColors.length) ? d.fibColors : []; - var gbEnabled = d.fibEnabled || []; - for (var gi = 0; gi < gbLevels.length; gi++) { - if (gbEnabled[gi] === false) continue; - var gy = gbty + gbH * gbLevels[gi]; - ctx.strokeStyle = gbColors[gi] || col; - ctx.lineWidth = Math.max(1, lw - 1); - ctx.setLineDash([4, 3]); - ctx.beginPath(); ctx.moveTo(gblx, gy); ctx.lineTo(gbrx, gy); ctx.stroke(); - } - // Vertical grid lines - for (var gi = 0; gi < gbLevels.length; gi++) { - if (gbEnabled[gi] === false) continue; - var gx = gblx + gbW * gbLevels[gi]; - ctx.strokeStyle = gbColors[gi] || col; - ctx.lineWidth = Math.max(1, lw - 1); - ctx.setLineDash([4, 3]); - ctx.beginPath(); ctx.moveTo(gx, gbty); ctx.lineTo(gx, gbby); ctx.stroke(); - } - ctx.setLineDash([]); - // Main diagonal - ctx.strokeStyle = col; - ctx.lineWidth = lw; - ctx.beginPath(); ctx.moveTo(gblx, gbby); ctx.lineTo(gbrx, gbty); ctx.stroke(); - // Counter-diagonal - ctx.setLineDash([4, 3]); - ctx.beginPath(); ctx.moveTo(gblx, gbty); ctx.lineTo(gbrx, gbby); ctx.stroke(); - ctx.setLineDash([]); - // Background fill - if (d.fillEnabled !== false) { - ctx.fillStyle = d.fillColor || col; - ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.03; - ctx.fillRect(gblx, gbty, gbW, gbH); - ctx.globalAlpha = 1.0; - } - } - } else if (d.type === 'gann_square_fixed') { - // Gann Square Fixed: fixed-ratio square grid - var gsfA = _tvToPixel(chartId, d.t1, d.p1); - var gsfB = _tvToPixel(chartId, d.t2, d.p2); - if (gsfA && gsfB) { - var gsfDx = Math.abs(gsfB.x - gsfA.x), gsfDy = Math.abs(gsfB.y - gsfA.y); - var gsfSize = Math.max(gsfDx, gsfDy); - var gsfX = Math.min(gsfA.x, gsfB.x), gsfY = Math.min(gsfA.y, gsfB.y); - ctx.strokeStyle = col; - ctx.lineWidth = lw; - ctx.strokeRect(gsfX, gsfY, gsfSize, gsfSize); - var gsfLevels = d.gannLevels || [0.25, 0.5, 0.75]; - var gsfColors = (d.fibColors && d.fibColors.length) ? d.fibColors : []; - var gsfEnabled = d.fibEnabled || []; - for (var gi = 0; gi < gsfLevels.length; gi++) { - if (gsfEnabled[gi] === false) continue; - var gy = gsfY + gsfSize * gsfLevels[gi]; - var gx = gsfX + gsfSize * gsfLevels[gi]; - ctx.strokeStyle = gsfColors[gi] || col; - ctx.lineWidth = Math.max(1, lw - 1); - ctx.setLineDash([4, 3]); - ctx.beginPath(); ctx.moveTo(gsfX, gy); ctx.lineTo(gsfX + gsfSize, gy); ctx.stroke(); - ctx.beginPath(); ctx.moveTo(gx, gsfY); ctx.lineTo(gx, gsfY + gsfSize); ctx.stroke(); - } - ctx.setLineDash([]); - ctx.strokeStyle = col; - ctx.lineWidth = lw; - ctx.beginPath(); ctx.moveTo(gsfX, gsfY + gsfSize); ctx.lineTo(gsfX + gsfSize, gsfY); ctx.stroke(); - ctx.setLineDash([4, 3]); - ctx.beginPath(); ctx.moveTo(gsfX, gsfY); ctx.lineTo(gsfX + gsfSize, gsfY + gsfSize); ctx.stroke(); - ctx.setLineDash([]); - if (d.fillEnabled !== false) { - ctx.fillStyle = d.fillColor || col; - ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.03; - ctx.fillRect(gsfX, gsfY, gsfSize, gsfSize); - ctx.globalAlpha = 1.0; - } - } - } else if (d.type === 'gann_square') { - // Gann Square: rectangular grid with diagonals and mid-cross - var gsA = _tvToPixel(chartId, d.t1, d.p1); - var gsB = _tvToPixel(chartId, d.t2, d.p2); - if (gsA && gsB) { - var gslx = Math.min(gsA.x, gsB.x), gsrx = Math.max(gsA.x, gsB.x); - var gsty = Math.min(gsA.y, gsB.y), gsby = Math.max(gsA.y, gsB.y); - var gsW = gsrx - gslx, gsH = gsby - gsty; - ctx.strokeStyle = col; - ctx.lineWidth = lw; - ctx.strokeRect(gslx, gsty, gsW, gsH); - var gsLevels = d.gannLevels || [0.25, 0.5, 0.75]; - var gsColors = (d.fibColors && d.fibColors.length) ? d.fibColors : []; - var gsEnabled = d.fibEnabled || []; - for (var gi = 0; gi < gsLevels.length; gi++) { - if (gsEnabled[gi] === false) continue; - var gy = gsty + gsH * gsLevels[gi]; - var gx = gslx + gsW * gsLevels[gi]; - ctx.strokeStyle = gsColors[gi] || col; - ctx.lineWidth = Math.max(1, lw - 1); - ctx.setLineDash([4, 3]); - ctx.beginPath(); ctx.moveTo(gslx, gy); ctx.lineTo(gsrx, gy); ctx.stroke(); - ctx.beginPath(); ctx.moveTo(gx, gsty); ctx.lineTo(gx, gsby); ctx.stroke(); - } - ctx.setLineDash([]); - ctx.strokeStyle = col; - ctx.lineWidth = lw; - ctx.beginPath(); ctx.moveTo(gslx, gsby); ctx.lineTo(gsrx, gsty); ctx.stroke(); - ctx.setLineDash([4, 3]); - ctx.beginPath(); ctx.moveTo(gslx, gsty); ctx.lineTo(gsrx, gsby); ctx.stroke(); - ctx.setLineDash([]); - // Mid-cross - var gsMidX = (gslx + gsrx) / 2, gsMidY = (gsty + gsby) / 2; - ctx.setLineDash([2, 2]); - ctx.globalAlpha = 0.4; - ctx.beginPath(); ctx.moveTo(gsMidX, gsty); ctx.lineTo(gsMidX, gsby); ctx.stroke(); - ctx.beginPath(); ctx.moveTo(gslx, gsMidY); ctx.lineTo(gsrx, gsMidY); ctx.stroke(); - ctx.globalAlpha = 1.0; - ctx.setLineDash([]); - if (d.fillEnabled !== false) { - ctx.fillStyle = d.fillColor || col; - ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.03; - ctx.fillRect(gslx, gsty, gsW, gsH); - ctx.globalAlpha = 1.0; - } - } - } else if (d.type === 'gann_fan') { - // Gann Fan: fan lines from A at standard Gann angles, B defines the 1x1 line - var gfA = _tvToPixel(chartId, d.t1, d.p1); - var gfB = _tvToPixel(chartId, d.t2, d.p2); - if (gfA && gfB) { - var gfDx = gfB.x - gfA.x, gfDy = gfB.y - gfA.y; - var gannAngles = [ - { name: '1\u00d78', ratio: 0.125 }, - { name: '1\u00d74', ratio: 0.25 }, - { name: '1\u00d73', ratio: 0.333 }, - { name: '1\u00d72', ratio: 0.5 }, - { name: '1\u00d71', ratio: 1 }, - { name: '2\u00d71', ratio: 2 }, - { name: '3\u00d71', ratio: 3 }, - { name: '4\u00d71', ratio: 4 }, - { name: '8\u00d71', ratio: 8 } - ]; - var gfColors = (d.fibColors && d.fibColors.length) ? d.fibColors : []; - var gfEnabled = d.fibEnabled || []; - var showLbls = d.showLabels !== false; - for (var gi = 0; gi < gannAngles.length; gi++) { - if (gfEnabled[gi] === false) continue; - var gRatio = gannAngles[gi].ratio; - var fanEndX = gfA.x + gfDx; - var fanEndY = gfA.y + gfDy * gRatio; - var fDx = fanEndX - gfA.x, fDy = fanEndY - gfA.y; - var fLen = Math.sqrt(fDx * fDx + fDy * fDy); - if (fLen > 0) { - var extLen = 4000; - var eX = gfA.x + (fDx / fLen) * extLen; - var eY = gfA.y + (fDy / fLen) * extLen; - ctx.strokeStyle = gfColors[gi] || col; - ctx.lineWidth = gRatio === 1 ? lw : Math.max(1, lw - 1); - ctx.setLineDash(gRatio === 1 ? [] : [4, 3]); - ctx.beginPath(); ctx.moveTo(gfA.x, gfA.y); ctx.lineTo(eX, eY); ctx.stroke(); - if (showLbls) { - ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; - ctx.fillStyle = gfColors[gi] || col; - ctx.fillText(gannAngles[gi].name, fanEndX + 4, fanEndY - 4); - } - } - } - ctx.setLineDash([]); - ctx.lineWidth = lw; - } - } else if (d.type === 'measure') { - var m1 = _tvToPixel(chartId, d.t1, d.p1); - var m2 = _tvToPixel(chartId, d.t2, d.p2); - if (m1 && m2) { - var priceDiff = d.p2 - d.p1; - var pctChange = d.p1 !== 0 ? ((priceDiff / d.p1) * 100) : 0; - var isUp = priceDiff >= 0; - var measureUpCol = d.colorUp || _cssVar('--pywry-draw-measure-up'); - var measureDnCol = d.colorDown || _cssVar('--pywry-draw-measure-down'); - var measureCol = isUp ? measureUpCol : measureDnCol; - ctx.strokeStyle = measureCol; - ctx.fillStyle = measureCol; - - // Shaded rectangle between the two points (like TV) - var mrx = Math.min(m1.x, m2.x), mry = Math.min(m1.y, m2.y); - var mrw = Math.abs(m2.x - m1.x), mrh = Math.abs(m2.y - m1.y); - ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.08; - ctx.fillRect(mrx, mry, mrw, mrh); - ctx.globalAlpha = 1.0; - - // Vertical dashed lines at each x - ctx.setLineDash([3, 3]); - ctx.beginPath(); - ctx.moveTo(m1.x, Math.min(m1.y, m2.y) - 20); - ctx.lineTo(m1.x, Math.max(m1.y, m2.y) + 20); - ctx.stroke(); - ctx.beginPath(); - ctx.moveTo(m2.x, Math.min(m1.y, m2.y) - 20); - ctx.lineTo(m2.x, Math.max(m1.y, m2.y) + 20); - ctx.stroke(); - ctx.setLineDash([]); - - // Horizontal lines at each price - ctx.lineWidth = 1; - ctx.beginPath(); - ctx.moveTo(mrx, m1.y); - ctx.lineTo(mrx + mrw, m1.y); - ctx.stroke(); - ctx.beginPath(); - ctx.moveTo(mrx, m2.y); - ctx.lineTo(mrx + mrw, m2.y); - ctx.stroke(); - ctx.lineWidth = lw; - - // Info label (like TV: "−15.76 (−5.64%) −1,576") - var label = (isUp ? '+' : '') + priceDiff.toFixed(2) + - ' (' + (isUp ? '+' : '') + pctChange.toFixed(2) + '%)'; - var mFontSize = d.fontSize || 12; - ctx.font = 'bold ' + mFontSize + 'px -apple-system,BlinkMacSystemFont,sans-serif'; - var met = ctx.measureText(label); - var boxPad = 6; - var bx = (m1.x + m2.x) / 2 - met.width / 2 - boxPad; - var by = Math.min(m1.y, m2.y) - 28; - // Background pill - ctx.fillStyle = measureCol; - ctx.globalAlpha = 0.9; - _roundRect(ctx, bx, by, met.width + boxPad * 2, 22, 4); - ctx.fill(); - ctx.globalAlpha = 1.0; - ctx.fillStyle = _cssVar('--pywry-draw-label-text'); - ctx.textBaseline = 'middle'; - ctx.fillText(label, bx + boxPad, by + 11); - ctx.textBaseline = 'alphabetic'; - } - } else if (d.type === 'ray') { - // Ray: from point A through point B, extending to infinity in B direction - var ra = _tvToPixel(chartId, d.t1, d.p1); - var rb = _tvToPixel(chartId, d.t2, d.p2); - if (ra && rb) { - var rdx = rb.x - ra.x, rdy = rb.y - ra.y; - var rlen = Math.sqrt(rdx * rdx + rdy * rdy); - if (rlen > 0) { - var ext = 4000; - var rux = rdx / rlen, ruy = rdy / rlen; - ctx.beginPath(); - ctx.moveTo(ra.x, ra.y); - ctx.lineTo(ra.x + rux * ext, ra.y + ruy * ext); - ctx.stroke(); - } - // Text annotation - if (d.text) { - var rMidX = (ra.x + rb.x) / 2, rMidY = (ra.y + rb.y) / 2; - var rFs = d.textFontSize || 12; - var rTStyle = (d.textItalic ? 'italic ' : '') + (d.textBold ? 'bold ' : ''); - ctx.font = rTStyle + rFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; - ctx.fillStyle = d.textColor || col; - ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; - ctx.fillText(d.text, rMidX, rMidY - 6); - ctx.textAlign = 'start'; ctx.textBaseline = 'alphabetic'; - } - } - } else if (d.type === 'extended_line') { - // Extended line: infinite in both directions through A and B - var ea = _tvToPixel(chartId, d.t1, d.p1); - var eb = _tvToPixel(chartId, d.t2, d.p2); - if (ea && eb) { - var edx = eb.x - ea.x, edy = eb.y - ea.y; - var elen = Math.sqrt(edx * edx + edy * edy); - if (elen > 0) { - var eext = 4000; - var eux = edx / elen, euy = edy / elen; - ctx.beginPath(); - ctx.moveTo(ea.x - eux * eext, ea.y - euy * eext); - ctx.lineTo(eb.x + eux * eext, eb.y + euy * eext); - ctx.stroke(); - } - // Text annotation - if (d.text) { - var eMidX = (ea.x + eb.x) / 2, eMidY = (ea.y + eb.y) / 2; - var eFs = d.textFontSize || 12; - var eTStyle = (d.textItalic ? 'italic ' : '') + (d.textBold ? 'bold ' : ''); - ctx.font = eTStyle + eFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; - ctx.fillStyle = d.textColor || col; - ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; - ctx.fillText(d.text, eMidX, eMidY - 6); - ctx.textAlign = 'start'; ctx.textBaseline = 'alphabetic'; - } - } - } else if (d.type === 'hray') { - // Horizontal ray: from anchor point extending right - var hry = series.priceToCoordinate(d.p1); - var hra = _tvToPixel(chartId, d.t1, d.p1); - if (hry !== null && hra) { - ctx.beginPath(); - ctx.moveTo(hra.x, hry); - ctx.lineTo(w, hry); - ctx.stroke(); - } - } else if (d.type === 'vline') { - // Vertical line: at a specific time, top to bottom - var va = _tvToPixel(chartId, d.t1, d.p1 || 0); - if (va) { - ctx.beginPath(); - ctx.moveTo(va.x, 0); - ctx.lineTo(va.x, h); - ctx.stroke(); - } - } else if (d.type === 'crossline') { - // Cross line: vertical + horizontal at a specific point - var cla = _tvToPixel(chartId, d.t1, d.p1); - var cly = series.priceToCoordinate(d.p1); - if (cla && cly !== null) { - ctx.beginPath(); - ctx.moveTo(cla.x, 0); - ctx.lineTo(cla.x, h); - ctx.stroke(); - ctx.beginPath(); - ctx.moveTo(0, cly); - ctx.lineTo(w, cly); - ctx.stroke(); - } - } else if (d.type === 'flat_channel') { - // Flat top/bottom: two horizontal parallel lines at p1 and p2 - var fy1 = series.priceToCoordinate(d.p1); - var fy2 = series.priceToCoordinate(d.p2); - if (fy1 !== null && fy2 !== null) { - if (d.fillEnabled !== false) { - ctx.fillStyle = d.fillColor || col; - ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.08; - ctx.fillRect(0, Math.min(fy1, fy2), w, Math.abs(fy2 - fy1)); - ctx.globalAlpha = 1.0; - } - ctx.beginPath(); - ctx.moveTo(0, fy1); - ctx.lineTo(w, fy1); - ctx.stroke(); - ctx.beginPath(); - ctx.moveTo(0, fy2); - ctx.lineTo(w, fy2); - ctx.stroke(); - } - } else if (d.type === 'regression_channel') { - // Regression channel: linear regression with separate base/up/down lines - var ra1 = _tvToPixel(chartId, d.t1, d.p1); - var ra2 = _tvToPixel(chartId, d.t2, d.p2); - if (ra1 && ra2) { - var rcUpOff = d.upperDeviation !== undefined ? d.upperDeviation : (d.offset || 30); - var rcDnOff = d.lowerDeviation !== undefined ? d.lowerDeviation : (d.offset || 30); - var useUpper = d.useUpperDeviation !== false; - var useLower = d.useLowerDeviation !== false; - var ext = 4000; - // Extend lines support - var doExtend = !!d.extendLines; - var dx = ra2.x - ra1.x, dy = ra2.y - ra1.y; - var len = Math.sqrt(dx * dx + dy * dy); - var ux = len > 0 ? dx / len : 1, uy = len > 0 ? dy / len : 0; - var sx1 = ra1.x, sy1 = ra1.y, sx2 = ra2.x, sy2 = ra2.y; - if (doExtend && len > 0) { - sx1 = ra1.x - ux * ext; sy1 = ra1.y - uy * ext; - sx2 = ra2.x + ux * ext; sy2 = ra2.y + uy * ext; - } - // Perpendicular unit vector (pointing upward in screen coords) - var px = len > 0 ? -dy / len : 0, py = len > 0 ? dx / len : -1; - // Helper: apply per-line style - function _rcSetLineStyle(lineStyle) { - ctx.setLineDash(lineStyle === 1 ? [6,4] : lineStyle === 2 ? [2,3] : []); - } - // Base line - if (d.showBaseLine !== false) { - ctx.strokeStyle = d.baseColor || col; - ctx.lineWidth = d.baseWidth || defW; - _rcSetLineStyle(d.baseLineStyle !== undefined ? d.baseLineStyle : (d.lineStyle || 0)); - ctx.beginPath(); - ctx.moveTo(sx1, sy1); - ctx.lineTo(sx2, sy2); - ctx.stroke(); - } - // Upper bound - if (useUpper && d.showUpLine !== false) { - ctx.strokeStyle = d.upColor || col; - ctx.lineWidth = d.upWidth || defW; - _rcSetLineStyle(d.upLineStyle !== undefined ? d.upLineStyle : 1); - ctx.globalAlpha = 0.8; - ctx.beginPath(); - ctx.moveTo(sx1 + px * rcUpOff, sy1 + py * rcUpOff); - ctx.lineTo(sx2 + px * rcUpOff, sy2 + py * rcUpOff); - ctx.stroke(); - ctx.globalAlpha = 1.0; - } - // Lower bound - if (useLower && d.showDownLine !== false) { - ctx.strokeStyle = d.downColor || col; - ctx.lineWidth = d.downWidth || defW; - _rcSetLineStyle(d.downLineStyle !== undefined ? d.downLineStyle : 1); - ctx.globalAlpha = 0.8; - ctx.beginPath(); - ctx.moveTo(sx1 - px * rcDnOff, sy1 - py * rcDnOff); - ctx.lineTo(sx2 - px * rcDnOff, sy2 - py * rcDnOff); - ctx.stroke(); - ctx.globalAlpha = 1.0; - } - // Reset stroke for selection handles - ctx.strokeStyle = col; - ctx.lineWidth = defW; - _rcSetLineStyle(d.lineStyle || 0); - // Fill between upper and lower bounds - if (d.fillEnabled !== false && (useUpper || useLower)) { - ctx.fillStyle = d.fillColor || col; - ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.05; - var uOff = useUpper ? rcUpOff : 0; - var dOff = useLower ? rcDnOff : 0; - ctx.beginPath(); - ctx.moveTo(sx1 + px * uOff, sy1 + py * uOff); - ctx.lineTo(sx2 + px * uOff, sy2 + py * uOff); - ctx.lineTo(sx2 - px * dOff, sy2 - py * dOff); - ctx.lineTo(sx1 - px * dOff, sy1 - py * dOff); - ctx.closePath(); - ctx.fill(); - ctx.globalAlpha = 1.0; - } - // Pearson's R label - if (d.showPearsonsR) { - var midX = (ra1.x + ra2.x) / 2, midY = (ra1.y + ra2.y) / 2; - var vals = _tvGetSeriesDataBetween(chartId, d.t1, d.t2); - var rVal = vals ? _tvPearsonsR(vals) : null; - if (rVal !== null) { - ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; - ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; - ctx.fillStyle = col; - ctx.globalAlpha = 0.9; - ctx.fillText('R = ' + rVal.toFixed(4), midX, midY - 8); - ctx.globalAlpha = 1.0; - } - } - } - } else if (d.type === 'brush' || d.type === 'highlighter') { - // Brush/Highlighter: freeform path through collected points - var pts = d.points; - if (pts && pts.length > 1) { - if (d.opacity !== undefined && d.opacity < 1) ctx.globalAlpha = d.opacity; - if (d.type === 'highlighter') { - ctx.lineCap = 'round'; - ctx.lineJoin = 'round'; - } - ctx.beginPath(); - var bp0 = _tvToPixel(chartId, pts[0].t, pts[0].p); - if (bp0) { - ctx.moveTo(bp0.x, bp0.y); - for (var bi = 1; bi < pts.length; bi++) { - var bpi = _tvToPixel(chartId, pts[bi].t, pts[bi].p); - if (bpi) ctx.lineTo(bpi.x, bpi.y); - } - ctx.stroke(); - } - ctx.globalAlpha = 1.0; - } - } else if (d.type === 'arrow_marker') { - // Arrow Marker: fat filled arrow shape from p1 (tail) to p2 (tip) - if (p1 && p2) { - var amFillCol = d.fillColor || d.color || defColor; - var amBorderCol = d.borderColor || d.color || defColor; - var amTextCol = d.textColor || d.color || defColor; - var amdx = p2.x - p1.x, amdy = p2.y - p1.y; - var amLen = Math.sqrt(amdx * amdx + amdy * amdy); - if (amLen > 1) { - var amux = amdx / amLen, amuy = amdy / amLen; - var amnx = -amuy, amny = amux; - var amHeadLen = Math.min(amLen * 0.38, 80); - var amHeadW = Math.max(amLen * 0.22, 16); - var amShaftW = amHeadW * 0.38; - var ambx = p2.x - amux * amHeadLen, amby = p2.y - amuy * amHeadLen; - ctx.beginPath(); - ctx.moveTo(p2.x, p2.y); - ctx.lineTo(ambx + amnx * amHeadW, amby + amny * amHeadW); - ctx.lineTo(ambx + amnx * amShaftW, amby + amny * amShaftW); - ctx.lineTo(p1.x + amnx * amShaftW, p1.y + amny * amShaftW); - ctx.lineTo(p1.x - amnx * amShaftW, p1.y - amny * amShaftW); - ctx.lineTo(ambx - amnx * amShaftW, amby - amny * amShaftW); - ctx.lineTo(ambx - amnx * amHeadW, amby - amny * amHeadW); - ctx.closePath(); - ctx.fillStyle = amFillCol; - ctx.fill(); - ctx.strokeStyle = amBorderCol; - ctx.lineWidth = 1; - ctx.stroke(); - } - if (d.text) { - var _amfs = d.fontSize || 16; - var _amfw = (d.bold ? 'bold ' : '') + (d.italic ? 'italic ' : ''); - ctx.font = _amfw + _amfs + 'px Arial, sans-serif'; - ctx.fillStyle = amTextCol; - ctx.textAlign = 'center'; - ctx.textBaseline = 'top'; - ctx.fillText(d.text, p1.x, p1.y + 8); - } - } - } else if (d.type === 'arrow') { - // Arrow: thin line with arrowhead at p2 - if (p1 && p2) { - ctx.beginPath(); - ctx.moveTo(p1.x, p1.y); - ctx.lineTo(p2.x, p2.y); - ctx.stroke(); - var adx = p2.x - p1.x, ady = p2.y - p1.y; - var aAngle = Math.atan2(ady, adx); - var aLen = 12; - ctx.beginPath(); - ctx.moveTo(p2.x, p2.y); - ctx.lineTo(p2.x - aLen * Math.cos(aAngle - 0.4), p2.y - aLen * Math.sin(aAngle - 0.4)); - ctx.moveTo(p2.x, p2.y); - ctx.lineTo(p2.x - aLen * Math.cos(aAngle + 0.4), p2.y - aLen * Math.sin(aAngle + 0.4)); - ctx.stroke(); - if (d.text) { - var _afs = d.fontSize || 16; - var _afw = (d.bold ? 'bold ' : '') + (d.italic ? 'italic ' : ''); - ctx.font = _afw + _afs + 'px Arial, sans-serif'; - ctx.fillStyle = col; - ctx.textAlign = 'center'; - ctx.textBaseline = 'top'; - ctx.fillText(d.text, p2.x, p2.y + 6); - } - } - } else if (d.type === 'arrow_mark_up') { - if (p1) { - var amu_fc = d.fillColor || d.color || defColor; - var amu_bc = d.borderColor || d.color || defColor; - var amu_tc = d.textColor || d.color || defColor; - var amSz = (d.size || 30) / 2; - ctx.beginPath(); - ctx.moveTo(p1.x, p1.y - amSz); - ctx.lineTo(p1.x - amSz * 0.7, p1.y + amSz * 0.5); - ctx.lineTo(p1.x + amSz * 0.7, p1.y + amSz * 0.5); - ctx.closePath(); - ctx.fillStyle = amu_fc; - ctx.fill(); - ctx.strokeStyle = amu_bc; - ctx.lineWidth = 1; - ctx.stroke(); - if (d.text && mouseOver) { - var _afs = d.fontSize || 16; - var _afw = (d.bold ? 'bold ' : '') + (d.italic ? 'italic ' : ''); - ctx.font = _afw + _afs + 'px Arial, sans-serif'; - ctx.fillStyle = amu_tc; - ctx.textAlign = 'center'; - ctx.textBaseline = 'top'; - ctx.fillText(d.text, p1.x, p1.y + amSz * 0.5 + 4); - } - } - } else if (d.type === 'arrow_mark_down') { - if (p1) { - var amd_fc = d.fillColor || d.color || defColor; - var amd_bc = d.borderColor || d.color || defColor; - var amd_tc = d.textColor || d.color || defColor; - var amSz = (d.size || 30) / 2; - ctx.beginPath(); - ctx.moveTo(p1.x, p1.y + amSz); - ctx.lineTo(p1.x - amSz * 0.7, p1.y - amSz * 0.5); - ctx.lineTo(p1.x + amSz * 0.7, p1.y - amSz * 0.5); - ctx.closePath(); - ctx.fillStyle = amd_fc; - ctx.fill(); - ctx.strokeStyle = amd_bc; - ctx.lineWidth = 1; - ctx.stroke(); - if (d.text && mouseOver) { - var _afs = d.fontSize || 16; - var _afw = (d.bold ? 'bold ' : '') + (d.italic ? 'italic ' : ''); - ctx.font = _afw + _afs + 'px Arial, sans-serif'; - ctx.fillStyle = amd_tc; - ctx.textAlign = 'center'; - ctx.textBaseline = 'bottom'; - ctx.fillText(d.text, p1.x, p1.y - amSz * 0.5 - 4); - } - } - } else if (d.type === 'arrow_mark_left') { - if (p1) { - var aml_fc = d.fillColor || d.color || defColor; - var aml_bc = d.borderColor || d.color || defColor; - var aml_tc = d.textColor || d.color || defColor; - var amSz = (d.size || 30) / 2; - ctx.beginPath(); - ctx.moveTo(p1.x - amSz, p1.y); - ctx.lineTo(p1.x + amSz * 0.5, p1.y - amSz * 0.7); - ctx.lineTo(p1.x + amSz * 0.5, p1.y + amSz * 0.7); - ctx.closePath(); - ctx.fillStyle = aml_fc; - ctx.fill(); - ctx.strokeStyle = aml_bc; - ctx.lineWidth = 1; - ctx.stroke(); - if (d.text && mouseOver) { - var _afs = d.fontSize || 16; - var _afw = (d.bold ? 'bold ' : '') + (d.italic ? 'italic ' : ''); - ctx.font = _afw + _afs + 'px Arial, sans-serif'; - ctx.fillStyle = aml_tc; - ctx.textAlign = 'left'; - ctx.textBaseline = 'middle'; - ctx.fillText(d.text, p1.x + amSz * 0.5 + 4, p1.y); - } - } - } else if (d.type === 'arrow_mark_right') { - if (p1) { - var amr_fc = d.fillColor || d.color || defColor; - var amr_bc = d.borderColor || d.color || defColor; - var amr_tc = d.textColor || d.color || defColor; - var amSz = (d.size || 30) / 2; - ctx.beginPath(); - ctx.moveTo(p1.x + amSz, p1.y); - ctx.lineTo(p1.x - amSz * 0.5, p1.y - amSz * 0.7); - ctx.lineTo(p1.x - amSz * 0.5, p1.y + amSz * 0.7); - ctx.closePath(); - ctx.fillStyle = amr_fc; - ctx.fill(); - ctx.strokeStyle = amr_bc; - ctx.lineWidth = 1; - ctx.stroke(); - if (d.text && mouseOver) { - var _afs = d.fontSize || 16; - var _afw = (d.bold ? 'bold ' : '') + (d.italic ? 'italic ' : ''); - ctx.font = _afw + _afs + 'px Arial, sans-serif'; - ctx.fillStyle = amr_tc; - ctx.textAlign = 'right'; - ctx.textBaseline = 'middle'; - ctx.fillText(d.text, p1.x - amSz * 0.5 - 4, p1.y); - } - } - } else if (d.type === 'circle') { - // Circle: center at midpoint, radius = distance/2 - if (p1 && p2) { - var cx = (p1.x + p2.x) / 2, cy = (p1.y + p2.y) / 2; - var cr = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)) / 2; - ctx.beginPath(); - ctx.arc(cx, cy, cr, 0, Math.PI * 2); - if (d.fillColor) { ctx.fillStyle = d.fillColor; ctx.fill(); } - ctx.stroke(); - } - } else if (d.type === 'ellipse') { - // Ellipse: bounding box from p1 to p2 - if (p1 && p2) { - var ecx = (p1.x + p2.x) / 2, ecy = (p1.y + p2.y) / 2; - var erx = Math.abs(p2.x - p1.x) / 2, ery = Math.abs(p2.y - p1.y) / 2; - ctx.beginPath(); - ctx.ellipse(ecx, ecy, Math.max(erx, 1), Math.max(ery, 1), 0, 0, Math.PI * 2); - if (d.fillColor) { ctx.fillStyle = d.fillColor; ctx.fill(); } - ctx.stroke(); - } - } else if (d.type === 'triangle') { - // Triangle: 3-point - if (p1 && p2) { - var tp3 = d.t3 !== undefined ? _tvToPixel(chartId, d.t3, d.p3) : null; - ctx.beginPath(); - ctx.moveTo(p1.x, p1.y); - ctx.lineTo(p2.x, p2.y); - if (tp3) { ctx.lineTo(tp3.x, tp3.y); } - ctx.closePath(); - if (d.fillColor) { ctx.fillStyle = d.fillColor; ctx.fill(); } - ctx.stroke(); - } - } else if (d.type === 'rotated_rect') { - // Rotated Rectangle: A→B defines one edge, C defines perpendicular width - if (p1 && p2) { - var rp3 = d.t3 !== undefined ? _tvToPixel(chartId, d.t3, d.p3) : null; - if (rp3) { - // Direction A→B - var rdx = p2.x - p1.x, rdy = p2.y - p1.y; - var rlen = Math.sqrt(rdx * rdx + rdy * rdy); - if (rlen > 0) { - var rnx = -rdy / rlen, rny = rdx / rlen; - // Project C onto perpendicular to get width - var rprojW = (rp3.x - p1.x) * rnx + (rp3.y - p1.y) * rny; - ctx.beginPath(); - ctx.moveTo(p1.x, p1.y); - ctx.lineTo(p2.x, p2.y); - ctx.lineTo(p2.x + rnx * rprojW, p2.y + rny * rprojW); - ctx.lineTo(p1.x + rnx * rprojW, p1.y + rny * rprojW); - ctx.closePath(); - if (d.fillColor) { ctx.fillStyle = d.fillColor; ctx.fill(); } - ctx.stroke(); - } - } else { - // Preview: just the A→B edge - ctx.beginPath(); - ctx.moveTo(p1.x, p1.y); - ctx.lineTo(p2.x, p2.y); - ctx.stroke(); - } - } - } else if (d.type === 'path' || d.type === 'polyline') { - // Path (closed) or Polyline (open) — multi-point - var mpts = d.points; - if (mpts && mpts.length > 1) { - ctx.beginPath(); - var mp0 = _tvToPixel(chartId, mpts[0].t, mpts[0].p); - if (mp0) { - ctx.moveTo(mp0.x, mp0.y); - for (var mi = 1; mi < mpts.length; mi++) { - var mpi = _tvToPixel(chartId, mpts[mi].t, mpts[mi].p); - if (mpi) ctx.lineTo(mpi.x, mpi.y); - } - if (d.type === 'path') ctx.closePath(); - if (d.fillColor && d.type === 'path') { ctx.fillStyle = d.fillColor; ctx.fill(); } - ctx.stroke(); - } - } - } else if (d.type === 'shape_arc') { - // Arc: 3-point (start, end, control for curvature) - if (p1 && p2) { - var sap3 = d.t3 !== undefined ? _tvToPixel(chartId, d.t3, d.p3) : null; - ctx.beginPath(); - ctx.moveTo(p1.x, p1.y); - if (sap3) { - ctx.quadraticCurveTo(sap3.x, sap3.y, p2.x, p2.y); - } else { - ctx.lineTo(p2.x, p2.y); - } - ctx.stroke(); - } - } else if (d.type === 'curve') { - // Curve: 2-point with auto control point (arc above midpoint) - if (p1 && p2) { - var ccx = (p1.x + p2.x) / 2, ccy = Math.min(p1.y, p2.y) - Math.abs(p2.x - p1.x) * 0.3; - ctx.beginPath(); - ctx.moveTo(p1.x, p1.y); - ctx.quadraticCurveTo(ccx, ccy, p2.x, p2.y); - ctx.stroke(); - } - } else if (d.type === 'double_curve') { - // Double Curve: 3-point S-curve (A→mid via C, mid→B via opposite) - if (p1 && p2) { - var dcp3 = d.t3 !== undefined ? _tvToPixel(chartId, d.t3, d.p3) : null; - var dcMidX = (p1.x + p2.x) / 2, dcMidY = (p1.y + p2.y) / 2; - ctx.beginPath(); - ctx.moveTo(p1.x, p1.y); - if (dcp3) { - ctx.quadraticCurveTo(dcp3.x, dcp3.y, dcMidX, dcMidY); - // Mirror control point for second half - var dMirX = 2 * dcMidX - dcp3.x, dMirY = 2 * dcMidY - dcp3.y; - ctx.quadraticCurveTo(dMirX, dMirY, p2.x, p2.y); - } else { - ctx.lineTo(p2.x, p2.y); - } - ctx.stroke(); - } - } else if (d.type === 'long_position' || d.type === 'short_position') { - // Long/Short Position: entry line, target (profit) and stop-loss zones - if (p1 && p2) { - var isLong = d.type === 'long_position'; - var entryY = p1.y, targetY = p2.y; - var leftX = Math.min(p1.x, p2.x), rightX = Math.max(p1.x, p2.x); - if (rightX - leftX < 20) rightX = leftX + 150; - // Determine stop: mirror of target across entry - var stopY = entryY + (entryY - targetY); - // Profit zone (green) - var profTop = Math.min(entryY, targetY), profBot = Math.max(entryY, targetY); - ctx.fillStyle = isLong ? 'rgba(38,166,91,0.25)' : 'rgba(239,83,80,0.25)'; - ctx.fillRect(leftX, profTop, rightX - leftX, profBot - profTop); - // Stop zone (red) - var stopTop = Math.min(entryY, stopY), stopBot = Math.max(entryY, stopY); - ctx.fillStyle = isLong ? 'rgba(239,83,80,0.25)' : 'rgba(38,166,91,0.25)'; - ctx.fillRect(leftX, stopTop, rightX - leftX, stopBot - stopTop); - // Entry line - ctx.setLineDash([]); - ctx.beginPath(); - ctx.moveTo(leftX, entryY); ctx.lineTo(rightX, entryY); - ctx.stroke(); - // Target and stop lines (dashed) - ctx.setLineDash([4, 3]); - ctx.beginPath(); - ctx.moveTo(leftX, targetY); ctx.lineTo(rightX, targetY); - ctx.stroke(); - ctx.beginPath(); - ctx.moveTo(leftX, stopY); ctx.lineTo(rightX, stopY); - ctx.stroke(); - ctx.setLineDash([]); - // Labels - ctx.fillStyle = col; - ctx.font = '11px sans-serif'; - ctx.textAlign = 'left'; - ctx.fillText(isLong ? 'Target' : 'Stop', leftX + 4, targetY - 4); - ctx.fillText('Entry', leftX + 4, entryY - 4); - ctx.fillText(isLong ? 'Stop' : 'Target', leftX + 4, stopY - 4); - } - } else if (d.type === 'forecast') { - // Forecast: solid line for history, dashed fan lines for projection - if (p1 && p2) { - // Solid history segment - ctx.beginPath(); - ctx.moveTo(p1.x, p1.y); - ctx.lineTo(p2.x, p2.y); - ctx.stroke(); - // Dashed projection lines — fan of 3 paths - var fdx = p2.x - p1.x, fdy = p2.y - p1.y; - ctx.setLineDash([6, 4]); - var fAngles = [-0.3, 0, 0.3]; - for (var fi = 0; fi < fAngles.length; fi++) { - var fAngle = Math.atan2(fdy, fdx) + fAngles[fi]; - var fLen = Math.sqrt(fdx * fdx + fdy * fdy); - ctx.beginPath(); - ctx.moveTo(p2.x, p2.y); - ctx.lineTo(p2.x + fLen * Math.cos(fAngle), p2.y + fLen * Math.sin(fAngle)); - ctx.stroke(); - } - ctx.setLineDash([]); - } - } else if (d.type === 'bars_pattern') { - // Bars Pattern: source region box with dashed projected copy - if (p1 && p2) { - var bpW = Math.abs(p2.x - p1.x), bpH = Math.abs(p2.y - p1.y); - var bpL = Math.min(p1.x, p2.x), bpT = Math.min(p1.y, p2.y); - ctx.strokeRect(bpL, bpT, bpW, bpH); - ctx.setLineDash([4, 3]); - ctx.strokeRect(bpL + bpW, bpT, bpW, bpH); - ctx.setLineDash([]); - } - } else if (d.type === 'ghost_feed') { - // Ghost Feed: solid source segment, dashed continuation - if (p1 && p2) { - ctx.beginPath(); - ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); - ctx.stroke(); - var gfdx = p2.x - p1.x, gfdy = p2.y - p1.y; - ctx.setLineDash([5, 4]); - ctx.globalAlpha = 0.5; - ctx.beginPath(); - ctx.moveTo(p2.x, p2.y); ctx.lineTo(p2.x + gfdx, p2.y + gfdy); - ctx.stroke(); - ctx.globalAlpha = 1.0; - ctx.setLineDash([]); - } - } else if (d.type === 'projection') { - // Projection: source box with dashed projected box - if (p1 && p2) { - var prjW = Math.abs(p2.x - p1.x), prjH = Math.abs(p2.y - p1.y); - var prjL = Math.min(p1.x, p2.x), prjT = Math.min(p1.y, p2.y); - ctx.setLineDash([]); - ctx.strokeRect(prjL, prjT, prjW, prjH); - ctx.setLineDash([4, 3]); - ctx.strokeRect(prjL + prjW + 4, prjT, prjW, prjH); - ctx.setLineDash([]); - // Connecting arrow - ctx.beginPath(); - ctx.moveTo(prjL + prjW, prjT + prjH / 2); - ctx.lineTo(prjL + prjW + 4, prjT + prjH / 2); - ctx.stroke(); - } - } else if (d.type === 'anchored_vwap') { - // Anchored VWAP: vertical anchor line + horizontal price label - if (p1) { - var avH = ctx.canvas.height; - ctx.setLineDash([4, 3]); - ctx.beginPath(); - ctx.moveTo(p1.x, 0); ctx.lineTo(p1.x, avH); - ctx.stroke(); - ctx.setLineDash([]); - // Label - ctx.fillStyle = col; - ctx.font = '10px sans-serif'; - ctx.textAlign = 'center'; - ctx.fillText('VWAP', p1.x, 14); - } - } else if (d.type === 'fixed_range_vol') { - // Fixed Range Volume Profile: vertical range with histogram placeholder - if (p1 && p2) { - var frL = Math.min(p1.x, p2.x), frR = Math.max(p1.x, p2.x); - var frT = Math.min(p1.y, p2.y), frB = Math.max(p1.y, p2.y); - ctx.setLineDash([4, 3]); - ctx.beginPath(); - ctx.moveTo(frL, frT); ctx.lineTo(frL, frB); - ctx.stroke(); - ctx.beginPath(); - ctx.moveTo(frR, frT); ctx.lineTo(frR, frB); - ctx.stroke(); - ctx.setLineDash([]); - // Horizontal bars placeholder - ctx.fillStyle = 'rgba(41,98,255,0.2)'; - var frRows = 6, frRH = (frB - frT) / frRows; - for (var fri = 0; fri < frRows; fri++) { - var frW = (frR - frL) * (0.3 + Math.random() * 0.6); - ctx.fillRect(frL, frT + fri * frRH + 1, frW, frRH - 2); - } - } - } else if (d.type === 'price_range') { - // Price Range: two horizontal lines with vertical connector and price diff label - if (p1 && p2) { - var prW = ctx.canvas.width; - ctx.setLineDash([4, 3]); - ctx.beginPath(); - ctx.moveTo(0, p1.y); ctx.lineTo(prW, p1.y); - ctx.stroke(); - ctx.beginPath(); - ctx.moveTo(0, p2.y); ctx.lineTo(prW, p2.y); - ctx.stroke(); - ctx.setLineDash([]); - // Vertical connector - ctx.beginPath(); - ctx.moveTo(p1.x, p1.y); ctx.lineTo(p1.x, p2.y); - ctx.stroke(); - // Price diff label - var prDiff = d.p2 !== undefined ? Math.abs(d.p2 - d.p1).toFixed(2) : ''; - ctx.fillStyle = col; - ctx.font = '11px sans-serif'; - ctx.textAlign = 'left'; - ctx.fillText(prDiff, p1.x + 6, (p1.y + p2.y) / 2 + 4); - } - } else if (d.type === 'date_range') { - // Date Range: two vertical lines with horizontal connector - if (p1 && p2) { - var drH = ctx.canvas.height; - ctx.setLineDash([4, 3]); - ctx.beginPath(); - ctx.moveTo(p1.x, 0); ctx.lineTo(p1.x, drH); - ctx.stroke(); - ctx.beginPath(); - ctx.moveTo(p2.x, 0); ctx.lineTo(p2.x, drH); - ctx.stroke(); - ctx.setLineDash([]); - // Horizontal connector at midY - var drMidY = drH / 2; - ctx.beginPath(); - ctx.moveTo(p1.x, drMidY); ctx.lineTo(p2.x, drMidY); - ctx.stroke(); - // Arrow heads - var drDir = p2.x > p1.x ? 1 : -1; - ctx.beginPath(); - ctx.moveTo(p2.x, drMidY); - ctx.lineTo(p2.x - drDir * 8, drMidY - 4); - ctx.moveTo(p2.x, drMidY); - ctx.lineTo(p2.x - drDir * 8, drMidY + 4); - ctx.stroke(); - } - } else if (d.type === 'date_price_range') { - // Date and Price Range: rectangle region with dimension labels - if (p1 && p2) { - var dpLeft = Math.min(p1.x, p2.x), dpRight = Math.max(p1.x, p2.x); - var dpTop = Math.min(p1.y, p2.y), dpBot = Math.max(p1.y, p2.y); - ctx.fillStyle = 'rgba(41,98,255,0.1)'; - ctx.fillRect(dpLeft, dpTop, dpRight - dpLeft, dpBot - dpTop); - ctx.strokeRect(dpLeft, dpTop, dpRight - dpLeft, dpBot - dpTop); - // Price diff label - var dpDiff = d.p2 !== undefined ? Math.abs(d.p2 - d.p1).toFixed(2) : ''; - ctx.fillStyle = col; - ctx.font = '11px sans-serif'; - ctx.textAlign = 'center'; - ctx.fillText(dpDiff, (dpLeft + dpRight) / 2, dpTop - 6); - } - } - - // Draw selection handles - if (selected) { - var anchors = _tvDrawAnchors(chartId, d); - for (var ai = 0; ai < anchors.length; ai++) { - var anc = anchors[ai]; - ctx.fillStyle = _cssVar('--pywry-draw-handle-fill'); - ctx.strokeStyle = col; - ctx.lineWidth = 2; - ctx.setLineDash([]); - ctx.beginPath(); - ctx.arc(anc.x, anc.y, 5, 0, Math.PI * 2); - ctx.fill(); - ctx.stroke(); - } - } - - ctx.restore(); -} - -// Rounded rect helper -function _roundRect(ctx, x, y, w, h, r) { - ctx.beginPath(); - ctx.moveTo(x + r, y); - ctx.lineTo(x + w - r, y); - ctx.quadraticCurveTo(x + w, y, x + w, y + r); - ctx.lineTo(x + w, y + h - r); - ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h); - ctx.lineTo(x + r, y + h); - ctx.quadraticCurveTo(x, y + h, x, y + h - r); - ctx.lineTo(x, y + r); - ctx.quadraticCurveTo(x, y, x + r, y); - ctx.closePath(); -} - -// ---- Floating edit toolbar ---- -var _floatingToolbar = null; // current DOM element -var _floatingChartId = null; -var _colorPickerEl = null; -var _widthPickerEl = null; - -function _tvShowFloatingToolbar(chartId, drawIdx) { - _tvHideFloatingToolbar(); - _tvHideContextMenu(); - var ds = window.__PYWRY_DRAWINGS__[chartId]; - if (!ds || drawIdx < 0 || drawIdx >= ds.drawings.length) return; - var d = ds.drawings[drawIdx]; - - var bar = document.createElement('div'); - bar.className = 'pywry-draw-toolbar'; - _floatingToolbar = bar; - _floatingChartId = chartId; - - // Determine which controls are relevant for this drawing type - var _arrowMarkers = ['arrow_marker', 'arrow_mark_up', 'arrow_mark_down', 'arrow_mark_left', 'arrow_mark_right']; - var _hoverTextMarkers = ['pin', 'flag_mark', 'signpost']; - var _filledMarkers = ['arrow_marker', 'arrow_mark_up', 'arrow_mark_down', 'arrow_mark_left', 'arrow_mark_right', 'anchored_text', 'note', 'price_note', 'pin', 'callout', 'comment', 'price_label', 'signpost', 'flag_mark']; - var isArrowMarker = _arrowMarkers.indexOf(d.type) !== -1; - var isHoverTextMarker = _hoverTextMarkers.indexOf(d.type) !== -1; - var isFilledMarker = _filledMarkers.indexOf(d.type) !== -1; - var hasLineStyle = d.type !== 'text' && d.type !== 'brush' && d.type !== 'measure' && !isFilledMarker; - var hasLineWidth = d.type !== 'text' && !isFilledMarker; - var hasColorSwatch = d.type !== 'measure' && !isArrowMarker && !isHoverTextMarker; - - // Arrow markers: fill / border / text icon buttons with color indicators - if (isArrowMarker) { - var fillBtn = _dtColorBtn(_DT_ICONS.bucket, 'Fill color', - d.fillColor || d.color || _drawDefaults.color, function(e) { - _tvToggleColorPicker(chartId, drawIdx, fillBtn._indicator, 'fillColor'); - }); - bar.appendChild(fillBtn); - - var borderBtn = _dtColorBtn(_DT_ICONS.border, 'Border color', - d.borderColor || d.color || _drawDefaults.color, function(e) { - _tvToggleColorPicker(chartId, drawIdx, borderBtn._indicator, 'borderColor'); - }); - bar.appendChild(borderBtn); - - var textBtn = _dtColorBtn(_DT_ICONS.text, 'Text color', - d.textColor || d.color || _drawDefaults.color, function(e) { - _tvToggleColorPicker(chartId, drawIdx, textBtn._indicator, 'textColor'); - }); - bar.appendChild(textBtn); - bar.appendChild(_dtSep()); - } - - // Pin / Flag / Signpost: pencil + color indicator, T, font size, settings, lock, trash, more - if (isHoverTextMarker) { - var htColorBtn = _dtColorBtn(_DT_ICONS.pencil, 'Color', - d.markerColor || d.color || _drawDefaults.color, function(e) { - _tvToggleColorPicker(chartId, drawIdx, htColorBtn._indicator, 'markerColor'); - }); - bar.appendChild(htColorBtn); - - var htTextBtn = _dtColorBtn(_DT_ICONS.text, 'Text', - d.color || _drawDefaults.color, function(e) { - _tvToggleColorPicker(chartId, drawIdx, htTextBtn._indicator, 'color'); - }); - bar.appendChild(htTextBtn); - - var htFsLabel = document.createElement('span'); - htFsLabel.className = 'dt-label'; - htFsLabel.textContent = d.fontSize || 14; - htFsLabel.title = 'Font size'; - htFsLabel.addEventListener('click', function(e) { - e.stopPropagation(); - _tvShowDrawingSettings(chartId, drawIdx); - }); - bar.appendChild(htFsLabel); - bar.appendChild(_dtSep()); - } - - // Color swatch (non-arrow-marker tools) - if (hasColorSwatch) { - var swatch = document.createElement('div'); - swatch.className = 'dt-swatch'; - swatch.style.background = d.color || _drawDefaults.color; - swatch.title = 'Color'; - swatch.addEventListener('click', function(e) { - e.stopPropagation(); - _tvToggleColorPicker(chartId, drawIdx, swatch); - }); - bar.appendChild(swatch); - bar.appendChild(_dtSep()); - } - - // Line width button - if (hasLineWidth) { - var lwBtn = _dtBtn(_DT_ICONS.lineW, 'Line width', function(e) { - e.stopPropagation(); - _tvToggleWidthPicker(chartId, drawIdx, lwBtn); - }); - var lwLabel = document.createElement('span'); - lwLabel.className = 'dt-label'; - lwLabel.textContent = (d.lineWidth || 2) + 'px'; - lwLabel.title = 'Line width'; - lwLabel.addEventListener('click', function(e) { - e.stopPropagation(); - _tvToggleWidthPicker(chartId, drawIdx, lwBtn); - }); - bar.appendChild(lwBtn); - bar.appendChild(lwLabel); - bar.appendChild(_dtSep()); - } - - // Line style cycle (solid → dashed → dotted) - if (hasLineStyle) { - var styleBtn = _dtBtn(_DT_ICONS.pencil, 'Line style', function() { - d.lineStyle = ((d.lineStyle || 0) + 1) % 3; - _tvRenderDrawings(chartId); - }); - bar.appendChild(styleBtn); - bar.appendChild(_dtSep()); - } - - // Lock toggle - var lockBtn = _dtBtn(d.locked ? _DT_ICONS.lock : _DT_ICONS.unlock, - d.locked ? 'Unlock' : 'Lock', function() { - d.locked = !d.locked; - lockBtn.innerHTML = d.locked ? _DT_ICONS.lock : _DT_ICONS.unlock; - lockBtn.title = d.locked ? 'Unlock' : 'Lock'; - if (d.locked) lockBtn.classList.add('active'); - else lockBtn.classList.remove('active'); - }); - if (d.locked) lockBtn.classList.add('active'); - bar.appendChild(lockBtn); - - bar.appendChild(_dtSep()); - - // Settings button — opens drawing settings panel for any type - var settingsBtn = _dtBtn(_DT_ICONS.settings, 'Settings', function() { - _tvShowDrawingSettings(chartId, drawIdx); - }); - bar.appendChild(settingsBtn); - bar.appendChild(_dtSep()); - - // Delete - var delBtn = _dtBtn(_DT_ICONS.trash, 'Delete', function() { - _tvDeleteDrawing(chartId, drawIdx); - }); - delBtn.style.color = _cssVar('--pywry-draw-danger', '#f44336'); - bar.appendChild(delBtn); - - bar.appendChild(_dtSep()); - - // More (...) - var moreBtn = _dtBtn(_DT_ICONS.more, 'More', function(e) { - e.stopPropagation(); - // Show context menu near toolbar - var rect = bar.getBoundingClientRect(); - var cRect = ds.canvas.getBoundingClientRect(); - _tvShowContextMenu(chartId, drawIdx, - rect.right - cRect.left, rect.bottom - cRect.top + 4); - }); - bar.appendChild(moreBtn); - - ds.uiLayer.appendChild(bar); - _tvRepositionToolbar(chartId); -} - -function _tvRepositionToolbar(chartId) { - if (!_floatingToolbar || _floatingChartId !== chartId) return; - if (_drawSelectedIdx < 0) { _tvHideFloatingToolbar(); return; } - var ds = window.__PYWRY_DRAWINGS__[chartId]; - if (!ds || _drawSelectedIdx >= ds.drawings.length) { _tvHideFloatingToolbar(); return; } - var d = ds.drawings[_drawSelectedIdx]; - var anchors = _tvDrawAnchors(chartId, d); - if (anchors.length === 0) { _tvHideFloatingToolbar(); return; } - - // Position above the topmost anchor - var minY = Infinity, midX = 0; - for (var i = 0; i < anchors.length; i++) { - if (anchors[i].y < minY) minY = anchors[i].y; - midX += anchors[i].x; - } - midX /= anchors.length; - - var tbW = _floatingToolbar.offsetWidth || 300; - var left = midX - tbW / 2; - var top = minY - 44; - // Clamp to container - var cw = ds.canvas.clientWidth; - if (left < 4) left = 4; - if (left + tbW > cw - 4) left = cw - tbW - 4; - if (top < 4) top = 4; - - _floatingToolbar.style.left = left + 'px'; - _floatingToolbar.style.top = top + 'px'; -} - -function _tvHideFloatingToolbar() { - if (_floatingToolbar && _floatingToolbar.parentNode) { - _floatingToolbar.parentNode.removeChild(_floatingToolbar); - } - _floatingToolbar = null; - _floatingChartId = null; - _tvHideColorPicker(); - _tvHideWidthPicker(); -} - -function _dtBtn(svgHtml, title, onclick) { - var btn = document.createElement('button'); - btn.innerHTML = svgHtml; - btn.title = title; - btn.addEventListener('click', function(e) { e.stopPropagation(); onclick(e); }); - return btn; -} - -/** - * Create a toolbar button with an icon and a color indicator bar beneath it. - * Used for fill / border / text color controls on filled marker drawings. - */ -function _dtColorBtn(svgHtml, title, color, onclick) { - var btn = document.createElement('button'); - btn.className = 'dt-color-btn'; - btn.title = title; - btn.innerHTML = svgHtml; - var indicator = document.createElement('span'); - indicator.className = 'dt-color-indicator'; - indicator.style.background = color; - btn.appendChild(indicator); - btn.addEventListener('click', function(e) { e.stopPropagation(); onclick(e); }); - btn._indicator = indicator; - return btn; -} - -function _dtSep() { - var s = document.createElement('div'); - s.className = 'dt-sep'; - return s; -} - -// ---- HSV / RGB conversion helpers ---- -function _hsvToRgb(h, s, v) { - var i = Math.floor(h * 6), f = h * 6 - i, p = v * (1 - s); - var q = v * (1 - f * s), t = v * (1 - (1 - f) * s); - var r, g, b; - switch (i % 6) { - case 0: r = v; g = t; b = p; break; - case 1: r = q; g = v; b = p; break; - case 2: r = p; g = v; b = t; break; - case 3: r = p; g = q; b = v; break; - case 4: r = t; g = p; b = v; break; - case 5: r = v; g = p; b = q; break; - } - return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]; -} - -function _rgbToHsv(r, g, b) { - r /= 255; g /= 255; b /= 255; - var max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min; - var h = 0, s = max === 0 ? 0 : d / max, v = max; - if (d !== 0) { - switch (max) { - case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break; - case g: h = ((b - r) / d + 2) / 6; break; - case b: h = ((r - g) / d + 4) / 6; break; - } - } - return [h, s, v]; -} - -function _hexToRgb(hex) { - hex = hex.replace(/^#/, ''); - if (hex.length === 3) hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]; - var n = parseInt(hex, 16); - return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; -} - -function _rgbToHex(r, g, b) { - return '#' + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1); -} - -// ---- Canvas paint helpers for color picker ---- -function _cpPaintSV(canvas, hue) { - var w = canvas.width, h = canvas.height; - var ctx = canvas.getContext('2d'); - var hRgb = _hsvToRgb(hue, 1, 1); - var hHex = _rgbToHex(hRgb[0], hRgb[1], hRgb[2]); - ctx.fillStyle = _cssVar('--pywry-cp-sv-white', '#ffffff'); - ctx.fillRect(0, 0, w, h); - var gH = ctx.createLinearGradient(0, 0, w, 0); - gH.addColorStop(0, _cssVar('--pywry-cp-sv-white', '#ffffff')); - gH.addColorStop(1, hHex); - ctx.fillStyle = gH; - ctx.fillRect(0, 0, w, h); - var gV = ctx.createLinearGradient(0, 0, 0, h); - var svBlack = _cssVar('--pywry-cp-sv-black', '#000000'); - var svRgb = _hexToRgb(svBlack); - gV.addColorStop(0, 'rgba(' + svRgb[0] + ',' + svRgb[1] + ',' + svRgb[2] + ',0)'); - gV.addColorStop(1, svBlack); - ctx.fillStyle = gV; - ctx.fillRect(0, 0, w, h); -} - -function _cpPaintHue(canvas) { - var w = canvas.width, h = canvas.height; - var ctx = canvas.getContext('2d'); - var g = ctx.createLinearGradient(0, 0, w, 0); - g.addColorStop(0, _cssVar('--pywry-cp-hue-0', '#ff0000')); - g.addColorStop(0.167, _cssVar('--pywry-cp-hue-1', '#ffff00')); - g.addColorStop(0.333, _cssVar('--pywry-cp-hue-2', '#00ff00')); - g.addColorStop(0.5, _cssVar('--pywry-cp-hue-3', '#00ffff')); - g.addColorStop(0.667, _cssVar('--pywry-cp-hue-4', '#0000ff')); - g.addColorStop(0.833, _cssVar('--pywry-cp-hue-5', '#ff00ff')); - g.addColorStop(1, _cssVar('--pywry-cp-hue-6', '#ff0000')); - ctx.fillStyle = g; - ctx.fillRect(0, 0, w, h); -} - -// ---- Full color picker popup (canvas-based, all inline styles) ---- -function _tvToggleColorPicker(chartId, drawIdx, anchor, propName) { - _tvHideWidthPicker(); - var ds = window.__PYWRY_DRAWINGS__[chartId]; - if (!ds) return; - var d = ds.drawings[drawIdx]; - var _cpProp = propName || 'color'; - var curHex = _tvColorToHex(d[_cpProp] || d.color || _drawDefaults.color, _drawDefaults.color); - var curOpacity = _tvToNumber(d[_cpProp + 'Opacity'], _tvColorOpacityPercent(d[_cpProp], 100)); - - _tvShowColorOpacityPopup(anchor, curHex, curOpacity, null, function(newColor, newOpacity) { - d[_cpProp] = _tvColorWithOpacity(newColor, newOpacity, newColor); - d[_cpProp + 'Opacity'] = newOpacity; - anchor.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); - if (d.type === 'hline') _tvSyncPriceLineColor(chartId, drawIdx, _tvColorWithOpacity(newColor, newOpacity, newColor)); - _tvRenderDrawings(chartId); - }); -} - -function _tvHideColorPicker() { - if (_colorPickerEl && _colorPickerEl.parentNode) { - _colorPickerEl.parentNode.removeChild(_colorPickerEl); - } - _colorPickerEl = null; -} - -// ---- Width picker popup ---- -function _tvToggleWidthPicker(chartId, drawIdx, anchor) { - if (_widthPickerEl) { _tvHideWidthPicker(); return; } - _tvHideColorPicker(); - var ds = window.__PYWRY_DRAWINGS__[chartId]; - if (!ds) return; - var d = ds.drawings[drawIdx]; - var picker = document.createElement('div'); - picker.className = 'pywry-draw-width-picker'; - _widthPickerEl = picker; - - for (var i = 0; i < _DRAW_WIDTHS.length; i++) { - (function(pw) { - var row = document.createElement('div'); - row.className = 'wp-row' + ((d.lineWidth || 2) === pw ? ' sel' : ''); - var line = document.createElement('div'); - line.className = 'wp-line'; - line.style.borderTopWidth = pw + 'px'; - row.appendChild(line); - var label = document.createElement('span'); - label.textContent = pw + 'px'; - row.appendChild(label); - row.addEventListener('click', function(e) { - e.stopPropagation(); - d.lineWidth = pw; - _tvRenderDrawings(chartId); - _tvHideWidthPicker(); - // Update label in toolbar - var lbls = _floatingToolbar ? _floatingToolbar.querySelectorAll('.dt-label') : []; - if (lbls.length > 0) lbls[0].textContent = pw + 'px'; - }); - picker.appendChild(row); - })(_DRAW_WIDTHS[i]); - } - - var _oc = _tvAppendOverlay(chartId, picker); - - // Position the picker relative to the anchor - requestAnimationFrame(function() { - var _cs = _tvContainerSize(_oc); - var aRect = _tvContainerRect(_oc, anchor.getBoundingClientRect()); - var pH = picker.offsetHeight; - var pW = picker.offsetWidth; - var top = aRect.top - pH - 6; - var left = aRect.left; - if (top < 0) { - top = aRect.bottom + 6; - } - if (left + pW > _cs.width - 4) { - left = _cs.width - pW - 4; - } - if (left < 4) left = 4; - picker.style.top = top + 'px'; - picker.style.left = left + 'px'; - }); -} - -function _tvHideWidthPicker() { - if (_widthPickerEl && _widthPickerEl.parentNode) { - _widthPickerEl.parentNode.removeChild(_widthPickerEl); - } - _widthPickerEl = null; -} - -// ---- Context menu (right-click on drawing) ---- -var _ctxMenuEl = null; - -function _tvShowContextMenu(chartId, drawIdx, posX, posY) { - _tvHideContextMenu(); - var ds = window.__PYWRY_DRAWINGS__[chartId]; - if (!ds || drawIdx < 0 || drawIdx >= ds.drawings.length) return; - var d = ds.drawings[drawIdx]; - - var menu = document.createElement('div'); - menu.className = 'pywry-draw-ctx-menu'; - _ctxMenuEl = menu; - - // Settings - _cmItem(menu, _DT_ICONS.settings, 'Settings...', '', function() { - _tvHideContextMenu(); - _tvShowDrawingSettings(chartId, drawIdx); - }); - - _cmSep(menu); - - // Clone - _cmItem(menu, _DT_ICONS.clone, 'Clone', 'Ctrl+Drag', function() { - var copy = Object.assign({}, d); - copy._id = ++_drawIdCounter; - ds.drawings.push(copy); - _emitDrawingAdded(chartId, copy); - _tvRenderDrawings(chartId); - _tvHideContextMenu(); - }); - - // Copy (as JSON to clipboard) - _cmItem(menu, '', 'Copy', 'Ctrl+C', function() { - try { - navigator.clipboard.writeText(JSON.stringify(d)); - } catch(e) {} - _tvHideContextMenu(); - }); - - _cmSep(menu); - - // Hide / Show - var isHidden = d.hidden; - _cmItem(menu, isHidden ? _DT_ICONS.eye : _DT_ICONS.eyeOff, - isHidden ? 'Show' : 'Hide', '', function() { - d.hidden = !d.hidden; - if (d.hidden) { - _drawSelectedIdx = -1; - _tvHideFloatingToolbar(); - } - _tvRenderDrawings(chartId); - _tvHideContextMenu(); - }); - - _cmSep(menu); - - // Bring to front - _cmItem(menu, '', 'Bring to Front', '', function() { - var _undoChartId = chartId; - var _undoFromIdx = drawIdx; - _tvPushUndo({ - label: 'Bring to front', - undo: function() { - var ds2 = window.__PYWRY_DRAWINGS__[_undoChartId]; - if (!ds2 || ds2.drawings.length === 0) return; - // Move last back to original index - var item = ds2.drawings.pop(); - ds2.drawings.splice(_undoFromIdx, 0, item); - _tvDeselectAll(_undoChartId); - }, - redo: function() { - var ds2 = window.__PYWRY_DRAWINGS__[_undoChartId]; - if (!ds2 || _undoFromIdx >= ds2.drawings.length) return; - ds2.drawings.push(ds2.drawings.splice(_undoFromIdx, 1)[0]); - _tvDeselectAll(_undoChartId); - }, - }); - ds.drawings.push(ds.drawings.splice(drawIdx, 1)[0]); - _drawSelectedIdx = ds.drawings.length - 1; - _tvRenderDrawings(chartId); - _tvHideContextMenu(); - }); - - // Send to back - _cmItem(menu, '', 'Send to Back', '', function() { - ds.drawings.unshift(ds.drawings.splice(drawIdx, 1)[0]); - _drawSelectedIdx = 0; - _tvRenderDrawings(chartId); - _tvHideContextMenu(); - }); - - _cmSep(menu); - - // Delete - _cmItem(menu, _DT_ICONS.trash, 'Delete', 'Del', function() { - _tvDeleteDrawing(chartId, drawIdx); - _tvHideContextMenu(); - }, true); - - menu.style.left = posX + 'px'; - menu.style.top = posY + 'px'; - ds.uiLayer.appendChild(menu); - - // Clamp context menu within container - requestAnimationFrame(function() { - var mRect = menu.getBoundingClientRect(); - var uiRect = ds.uiLayer.getBoundingClientRect(); - if (mRect.right > uiRect.right) { - menu.style.left = Math.max(0, posX - (mRect.right - uiRect.right)) + 'px'; - } - if (mRect.bottom > uiRect.bottom) { - menu.style.top = Math.max(0, posY - (mRect.bottom - uiRect.bottom)) + 'px'; - } - }); - - // Close on click outside - setTimeout(function() { - document.addEventListener('click', _ctxMenuOutsideClick, { once: true }); - }, 0); -} - -function _ctxMenuOutsideClick() { _tvHideContextMenu(); } - -function _tvHideContextMenu() { - if (_ctxMenuEl && _ctxMenuEl.parentNode) { - _ctxMenuEl.parentNode.removeChild(_ctxMenuEl); - } - _ctxMenuEl = null; -} - -function _cmItem(menu, icon, label, shortcut, onclick, danger) { - var row = document.createElement('div'); - row.className = 'cm-item' + (danger ? ' cm-danger' : ''); - - // Icon container (always present for consistent spacing) - var iconWrap = document.createElement('span'); - iconWrap.className = 'cm-icon'; - if (icon) iconWrap.innerHTML = icon; - row.appendChild(iconWrap); - - // Label - var lbl = document.createElement('span'); - lbl.className = 'cm-label'; - lbl.textContent = label; - row.appendChild(lbl); - - // Shortcut - if (shortcut) { - var sc = document.createElement('span'); - sc.className = 'cm-shortcut'; - sc.textContent = shortcut; - row.appendChild(sc); - } - - row.addEventListener('click', function(e) { e.stopPropagation(); onclick(); }); - menu.appendChild(row); -} - -function _cmSep(menu) { - var s = document.createElement('div'); - s.className = 'cm-sep'; - menu.appendChild(s); -} - -// ---- Delete drawing helper ---- -function _tvDeleteDrawing(chartId, drawIdx) { - var ds = window.__PYWRY_DRAWINGS__[chartId]; - if (!ds) return; - var d = ds.drawings[drawIdx]; - if (!d) return; - - // Push undo entry before deleting - var _undoChartId = chartId; - var _undoDrawing = Object.assign({}, d); - var _undoIdx = drawIdx; - _tvPushUndo({ - label: 'Delete ' + (d.type || 'drawing'), - undo: function() { - var ds2 = window.__PYWRY_DRAWINGS__[_undoChartId]; - if (!ds2) return; - var idx = Math.min(_undoIdx, ds2.drawings.length); - ds2.drawings.splice(idx, 0, Object.assign({}, _undoDrawing)); - // Re-create native price line if hline - if (_undoDrawing.type === 'hline') { - var entry = window.__PYWRY_TVCHARTS__[_undoChartId]; - if (entry) { - var mainKey = Object.keys(entry.seriesMap)[0]; - if (mainKey && entry.seriesMap[mainKey]) { - var pl = entry.seriesMap[mainKey].createPriceLine({ - price: _undoDrawing.price, color: _undoDrawing.color, - lineWidth: _undoDrawing.lineWidth, lineStyle: _undoDrawing.lineStyle, - axisLabelVisible: true, title: '', - }); - ds2.priceLines.splice(idx, 0, { seriesId: mainKey, priceLine: pl }); - } - } - } - _tvDeselectAll(_undoChartId); - }, - redo: function() { - var ds2 = window.__PYWRY_DRAWINGS__[_undoChartId]; - if (!ds2) return; - for (var i = ds2.drawings.length - 1; i >= 0; i--) { - if (ds2.drawings[i]._id === _undoDrawing._id) { - if (ds2.drawings[i].type === 'hline' && ds2.priceLines[i]) { - var entry = window.__PYWRY_TVCHARTS__[_undoChartId]; - if (entry) { - var pl2 = ds2.priceLines[i]; - var ser = entry.seriesMap[pl2.seriesId]; - if (ser) try { ser.removePriceLine(pl2.priceLine); } catch(e) {} - } - ds2.priceLines.splice(i, 1); - } - ds2.drawings.splice(i, 1); - break; - } - } - _tvDeselectAll(_undoChartId); - }, - }); - - // Remove native price line if hline - if (d.type === 'hline' && ds.priceLines[drawIdx]) { - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (entry) { - var pl = ds.priceLines[drawIdx]; - var ser = entry.seriesMap[pl.seriesId]; - if (ser) try { ser.removePriceLine(pl.priceLine); } catch(e) {} - } - ds.priceLines.splice(drawIdx, 1); - } - ds.drawings.splice(drawIdx, 1); - _drawSelectedIdx = -1; - _drawSelectedChart = null; - _tvHideFloatingToolbar(); - _tvRenderDrawings(chartId); - if (window.pywry && window.pywry.emit) { - window.pywry.emit('tvchart:drawing-deleted', { chartId: chartId, index: drawIdx }); - } -} - -// ---- Sync native price line color for hlines ---- -function _tvSyncPriceLineColor(chartId, drawIdx, color) { - var ds = window.__PYWRY_DRAWINGS__[chartId]; - if (!ds || !ds.priceLines[drawIdx]) return; - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry) return; - var pl = ds.priceLines[drawIdx]; - var ser = entry.seriesMap[pl.seriesId]; - if (ser) { - try { ser.removePriceLine(pl.priceLine); } catch(e) {} - var drw = ds.drawings[drawIdx]; - var newPl = ser.createPriceLine({ - price: drw.price, - color: color, - lineWidth: drw.lineWidth || 2, - lineStyle: drw.lineStyle || 0, - axisLabelVisible: drw.showPriceLabel !== false, - title: drw.title || '', - }); - ds.priceLines[drawIdx] = { seriesId: pl.seriesId, priceLine: newPl }; - } -} - -// ---- Mouse interaction engine ---- -function _tvEnableDrawing(chartId) { - var ds = _tvEnsureDrawingLayer(chartId); - if (!ds || ds._eventsAttached) return; - ds._eventsAttached = true; - - var canvas = ds.canvas; - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry) return; - var container = entry.container; - - // ========================================================================= - // Container-level listeners: work in CURSOR mode (canvas has ptr-events:none) - // Events bubble up from the chart's own internal canvas through the container. - // ========================================================================= - - // --- Mouse move: hover highlight + drag (cursor mode) --- - // Use CAPTURE phase so drag moves are intercepted before the chart. - // NOTE: During drag, document-level handlers do the actual drag work. - // This handler only blocks propagation during drag so the chart doesn't pan. - container.addEventListener('mousemove', function(e) { - // When a modal is open (interaction locked), never process hover/drag - if (entry._interactionLocked) return; - // During drag, the document-level handler processes movement. - // Just block chart interaction here. - if (_drawDragging && _drawSelectedChart === chartId) { - e.preventDefault(); - e.stopPropagation(); - return; - } - - // Hover detection (cursor mode only) - if (ds._activeTool === 'cursor') { - var rect = canvas.getBoundingClientRect(); - var mx = e.clientX - rect.left; - var my = e.clientY - rect.top; - var hitIdx = _tvHitTest(chartId, mx, my); - if (hitIdx !== _drawHoverIdx) { - _drawHoverIdx = hitIdx; - _tvRenderDrawings(chartId); - } - // Cursor style feedback - if (_drawSelectedIdx >= 0 && _drawSelectedChart === chartId) { - var selD = ds.drawings[_drawSelectedIdx]; - if (selD) { - var ancs = _tvDrawAnchors(chartId, selD); - for (var ai = 0; ai < ancs.length; ai++) { - var dx = mx - ancs[ai].x, dy = my - ancs[ai].y; - if (dx * dx + dy * dy < 64) { - container.style.cursor = 'grab'; - return; - } - } - } - } - container.style.cursor = hitIdx >= 0 ? 'pointer' : ''; - } - }, true); // capture phase - - // --- Document-level drag handler (bound during startDrag, unbound in endDrag) --- - // Using document-level ensures drag continues even when mouse leaves the container. - var _boundDocDragMove = null; - var _boundDocDragEnd = null; - - function docDragMove(e) { - if (!_drawDragging || _drawSelectedChart !== chartId) return; - var rect = canvas.getBoundingClientRect(); - var mx = e.clientX - rect.left; - var my = e.clientY - rect.top; - e.preventDefault(); - - var dd = ds.drawings[_drawSelectedIdx]; - if (!dd || dd.locked) { _tvRenderDrawings(chartId); return; } - - var series = _tvMainSeries(chartId); - var ak = _drawDragging.anchor; - - if (ak === 'body') { - // Pixel-based translation from drag start. - // Use total pixel offset applied to the ORIGINAL anchor positions - // to avoid accumulated time-rounding drift. - var totalDx = mx - _drawDragging.startX; - var totalDy = my - _drawDragging.startY; - - if (dd.type === 'hline') { - if (_drawDragging._origPriceY !== null && series) { - var newP = series.coordinateToPrice(_drawDragging._origPriceY + totalDy); - if (newP !== null) dd.price = newP; - } - } else if (dd.type === 'vline') { - if (_drawDragging._origPx1) { - var vNewC = _tvFromPixel(chartId, _drawDragging._origPx1.x + totalDx, 0); - if (vNewC && vNewC.time !== null) dd.t1 = vNewC.time; - } - } else if (dd.type === 'flat_channel') { - if (_drawDragging._origPriceY !== null && _drawDragging._origPrice2Y !== null && series) { - var fcP1 = series.coordinateToPrice(_drawDragging._origPriceY + totalDy); - var fcP2 = series.coordinateToPrice(_drawDragging._origPrice2Y + totalDy); - if (fcP1 !== null && fcP2 !== null) { dd.p1 = fcP1; dd.p2 = fcP2; } - } - } else if ((dd.type === 'brush' || dd.type === 'highlighter' || dd.type === 'path' || dd.type === 'polyline') && dd.points && _drawDragging._origBrushPx) { - var obp = _drawDragging._origBrushPx; - var allOk = true; - var newPts = []; - for (var bdi = 0; bdi < obp.length; bdi++) { - if (!obp[bdi]) { allOk = false; break; } - var bNewC = _tvFromPixel(chartId, obp[bdi].x + totalDx, obp[bdi].y + totalDy); - if (!bNewC || bNewC.time === null || bNewC.price === null) { allOk = false; break; } - newPts.push({ t: bNewC.time, p: bNewC.price }); - } - if (allOk) dd.points = newPts; - } else { - // Two-point (or three-point) tools: translate all anchors in pixel space - if (_drawDragging._origPx1 && _drawDragging._origPx2) { - var newC1 = _tvFromPixel(chartId, _drawDragging._origPx1.x + totalDx, _drawDragging._origPx1.y + totalDy); - var newC2 = _tvFromPixel(chartId, _drawDragging._origPx2.x + totalDx, _drawDragging._origPx2.y + totalDy); - if (newC1 && newC1.time !== null && newC1.price !== null && - newC2 && newC2.time !== null && newC2.price !== null) { - dd.t1 = newC1.time; dd.p1 = newC1.price; - dd.t2 = newC2.time; dd.p2 = newC2.price; - } - // Also translate third anchor if present - if (_drawDragging._origPx3) { - var newC3 = _tvFromPixel(chartId, _drawDragging._origPx3.x + totalDx, _drawDragging._origPx3.y + totalDy); - if (newC3 && newC3.time !== null && newC3.price !== null) { - dd.t3 = newC3.time; dd.p3 = newC3.price; - } - } - } - } - } else { - // Anchor drag: set the anchor directly from mouse position - var coord = _tvFromPixel(chartId, mx, my); - if (!coord || coord.time === null || coord.price === null) { - _tvRenderDrawings(chartId); - return; - } - if (ak === 'p1') { dd.t1 = coord.time; dd.p1 = coord.price; } - else if (ak === 'p2') { dd.t2 = coord.time; dd.p2 = coord.price; } - else if (ak === 'p3') { dd.t3 = coord.time; dd.p3 = coord.price; } - else if (ak === 'price') { dd.price = coord.price; } - else if (ak.indexOf('pt') === 0 && dd.points) { - // Path/polyline vertex drag - var ptIdx = parseInt(ak.substring(2)); - if (!isNaN(ptIdx) && ptIdx >= 0 && ptIdx < dd.points.length) { - dd.points[ptIdx] = { t: coord.time, p: coord.price }; - } - } - } - - _tvRenderDrawings(chartId); - _tvRepositionToolbar(chartId); - } - - // --- Mouse down: begin drag (select + drag in one motion, cursor mode) --- - // Use CAPTURE phase so we fire before the chart and can block its panning. - container.addEventListener('mousedown', function(e) { - if (e.button !== 0) return; - // When a modal is open (interaction locked), never start drawing drag - if (entry._interactionLocked) return; - if (ds._activeTool !== 'cursor') return; - var rect = canvas.getBoundingClientRect(); - var mx = e.clientX - rect.left; - var my = e.clientY - rect.top; - - // Helper: start dragging and block chart panning - function startDrag(anchor, mx2, my2) { - var dd = ds.drawings[_drawSelectedIdx]; - var series = _tvMainSeries(chartId); - _drawDragging = { - anchor: anchor, startX: mx2, startY: my2, - // Store original anchor pixel positions at drag start - _origPx1: null, _origPx2: null, _origPx3: null, - _origPriceY: null, _origPrice2Y: null, - _origBrushPx: null, - }; - // Snapshot pixel positions for body drag - if (anchor === 'body' && dd) { - if (dd.type === 'hline' && series) { - _drawDragging._origPriceY = series.priceToCoordinate(dd.price); - } else if (dd.type === 'vline') { - _drawDragging._origPx1 = _tvToPixel(chartId, dd.t1, 0); - } else if (dd.type === 'flat_channel' && series) { - _drawDragging._origPriceY = series.priceToCoordinate(dd.p1); - _drawDragging._origPrice2Y = series.priceToCoordinate(dd.p2); - } else if ((dd.type === 'brush' || dd.type === 'highlighter' || dd.type === 'path' || dd.type === 'polyline') && dd.points) { - _drawDragging._origBrushPx = []; - for (var bi = 0; bi < dd.points.length; bi++) { - _drawDragging._origBrushPx.push( - _tvToPixel(chartId, dd.points[bi].t, dd.points[bi].p) - ); - } - } else { - _drawDragging._origPx1 = dd.t1 !== undefined ? _tvToPixel(chartId, dd.t1, dd.p1) : null; - _drawDragging._origPx2 = dd.t2 !== undefined ? _tvToPixel(chartId, dd.t2, dd.p2) : null; - _drawDragging._origPx3 = dd.t3 !== undefined ? _tvToPixel(chartId, dd.t3, dd.p3) : null; - } - } - // Block chart panning by making the overlay intercept events - canvas.style.pointerEvents = 'auto'; - // Freeze chart interaction so crosshair/legend/axes don't move - entry.chart.applyOptions({ handleScroll: false, handleScale: false }); - entry.chart.clearCrosshairPosition(); - container.style.cursor = anchor === 'body' ? 'move' : 'grabbing'; - // Bind document-level handlers so drag works even outside the container - _boundDocDragMove = docDragMove; - _boundDocDragEnd = docDragEnd; - document.addEventListener('mousemove', _boundDocDragMove, true); - document.addEventListener('mouseup', _boundDocDragEnd, true); - e.preventDefault(); - e.stopPropagation(); - } - - // If a drawing is already selected, try its anchors first - if (_drawSelectedIdx >= 0 && _drawSelectedChart === chartId) { - var selD = ds.drawings[_drawSelectedIdx]; - if (selD && !selD.locked) { - var ancs = _tvDrawAnchors(chartId, selD); - for (var ai = 0; ai < ancs.length; ai++) { - var adx = mx - ancs[ai].x, ady = my - ancs[ai].y; - if (adx * adx + ady * ady < 64) { - startDrag(ancs[ai].key, mx, my); - return; - } - } - if (_tvDrawHit(chartId, selD, mx, my, 8)) { - startDrag('body', mx, my); - return; - } - } - } - - // Not on the selected drawing — hit-test all drawings to select + drag - var hitIdx = _tvHitTest(chartId, mx, my); - if (hitIdx >= 0) { - var hitD = ds.drawings[hitIdx]; - if (hitD && !hitD.locked) { - _drawSelectedIdx = hitIdx; - _drawSelectedChart = chartId; - _tvRenderDrawings(chartId); - _tvShowFloatingToolbar(chartId, hitIdx); - // Check anchors of new selection - var hitAncs = _tvDrawAnchors(chartId, hitD); - for (var hai = 0; hai < hitAncs.length; hai++) { - var hdx = mx - hitAncs[hai].x, hdy = my - hitAncs[hai].y; - if (hdx * hdx + hdy * hdy < 64) { - startDrag(hitAncs[hai].key, mx, my); - return; - } - } - startDrag('body', mx, my); - } - } - }, true); // capture phase - - // --- Mouse up: end drag --- - function docDragEnd() { - if (_drawDragging) { - _drawDidDrag = true; - _drawDragging = null; - // Remove document-level handlers - if (_boundDocDragMove) document.removeEventListener('mousemove', _boundDocDragMove, true); - if (_boundDocDragEnd) document.removeEventListener('mouseup', _boundDocDragEnd, true); - _boundDocDragMove = null; - _boundDocDragEnd = null; - // Restore pointer-events so chart can pan/zoom again - _tvApplyDrawingInteractionMode(ds); - // Restore chart interaction - entry.chart.applyOptions({ handleScroll: true, handleScale: true }); - container.style.cursor = ''; - _tvRenderDrawings(chartId); - _tvRepositionToolbar(chartId); - // Sync native price line if hline was dragged - if (_drawSelectedIdx >= 0 && ds.drawings[_drawSelectedIdx] && - ds.drawings[_drawSelectedIdx].type === 'hline') { - _tvSyncPriceLineColor(chartId, _drawSelectedIdx, - ds.drawings[_drawSelectedIdx].color || _drawDefaults.color); - } - } - } - // Brush/Highlighter commit still uses container mouseup - function brushCommit() { - if (_drawPending && (_drawPending.type === 'brush' || _drawPending.type === 'highlighter') && _drawPending.chartId === chartId) { - if (_drawPending.points && _drawPending.points.length > 1) { - ds.drawings.push(Object.assign({}, _drawPending)); - _drawSelectedIdx = ds.drawings.length - 1; - _drawSelectedChart = chartId; - _tvShowFloatingToolbar(chartId, _drawSelectedIdx); - _emitDrawingAdded(chartId, _drawPending); - } - _drawPending = null; - _tvRenderDrawings(chartId); - } - } - container.addEventListener('mouseup', brushCommit, true); // capture phase - - // --- Double-click: open drawing settings (cursor mode) --- - container.addEventListener('dblclick', function(e) { - if (entry._interactionLocked) return; - if (ds._activeTool !== 'cursor') return; - var rect = canvas.getBoundingClientRect(); - var mx = e.clientX - rect.left; - var my = e.clientY - rect.top; - var hitIdx = _tvHitTest(chartId, mx, my); - if (hitIdx >= 0) { - e.preventDefault(); - e.stopPropagation(); - _drawSelectedIdx = hitIdx; - _drawSelectedChart = chartId; - _tvRenderDrawings(chartId); - _tvShowDrawingSettings(chartId, hitIdx); - } - }); - - // --- Click: select/deselect drawing (cursor mode) --- - container.addEventListener('click', function(e) { - if (entry._interactionLocked) return; - if (ds._activeTool !== 'cursor') return; - // Skip click if a drag just completed - if (_drawDidDrag) { - _drawDidDrag = false; - return; - } - var rect = canvas.getBoundingClientRect(); - var mx = e.clientX - rect.left; - var my = e.clientY - rect.top; - var hitIdx = _tvHitTest(chartId, mx, my); - if (hitIdx >= 0) { - _drawSelectedIdx = hitIdx; - _drawSelectedChart = chartId; - _tvRenderDrawings(chartId); - _tvShowFloatingToolbar(chartId, hitIdx); - } else { - _tvDeselectAll(chartId); - } - }); - - // --- Right-click: context menu (cursor mode) --- - container.addEventListener('contextmenu', function(e) { - if (entry._interactionLocked) return; - if (ds._activeTool !== 'cursor') return; - var rect = canvas.getBoundingClientRect(); - var mx = e.clientX - rect.left; - var my = e.clientY - rect.top; - var hitIdx = _tvHitTest(chartId, mx, my); - if (hitIdx >= 0) { - e.preventDefault(); - _drawSelectedIdx = hitIdx; - _drawSelectedChart = chartId; - _tvRenderDrawings(chartId); - _tvShowFloatingToolbar(chartId, hitIdx); - _tvShowContextMenu(chartId, hitIdx, mx, my); - } - }); - - // ========================================================================= - // Canvas-level listeners: work in DRAWING TOOL mode (canvas has ptr-events:auto) - // These handle live preview, click-to-place, brush, and drawing-tool context menu. - // ========================================================================= - - // --- Mouse move on canvas: live preview for in-progress drawing --- - canvas.addEventListener('mousemove', function(e) { - if (!_drawPending || _drawPending.chartId !== chartId) return; - var rect = canvas.getBoundingClientRect(); - var mx = e.clientX - rect.left; - var my = e.clientY - rect.top; - var pc = _tvFromPixel(chartId, mx, my); - if (pc) { - if ((_drawPending.type === 'brush' || _drawPending.type === 'highlighter') && _drawPending.points && !_drawPending._multiPoint) { - _drawPending.points.push({ t: pc.time, p: pc.price }); - } else if (_drawPending._phase === 2) { - // 3-point tool: phase 2 previews the third anchor - _drawPending.t3 = pc.time; - _drawPending.p3 = pc.price; - } else { - _drawPending.t2 = pc.time; - _drawPending.p2 = pc.price; - } - _tvRenderDrawings(chartId); - } - }); - - // --- Click on canvas: place drawing (drawing tool mode) --- - canvas.addEventListener('click', function(e) { - var _tool = ds._activeTool; - // Drawing tools only — cursor mode is handled on container - if (_tool === 'cursor' || _tool === 'crosshair') return; - - var rect = canvas.getBoundingClientRect(); - var mx = e.clientX - rect.left; - var my = e.clientY - rect.top; - var coord = _tvFromPixel(chartId, mx, my); - if (!coord || coord.time === null || coord.price === null) return; - - if (_tool === 'hline') { - var hlD = { - _id: ++_drawIdCounter, type: 'hline', price: coord.price, - chartId: chartId, color: _drawDefaults.color, - lineWidth: _drawDefaults.lineWidth, lineStyle: _drawDefaults.lineStyle, - showPriceLabel: true, title: '', extend: "Don't extend", - }; - ds.drawings.push(hlD); - // Native price line - var mainKey = Object.keys(entry.seriesMap)[0]; - if (mainKey && entry.seriesMap[mainKey]) { - var pl = entry.seriesMap[mainKey].createPriceLine({ - price: coord.price, color: hlD.color, - lineWidth: hlD.lineWidth, lineStyle: hlD.lineStyle, - axisLabelVisible: true, title: '', - }); - ds.priceLines.push({ seriesId: mainKey, priceLine: pl }); - } - _tvRenderDrawings(chartId); - // Auto-select new drawing - _drawSelectedIdx = ds.drawings.length - 1; - _drawSelectedChart = chartId; - _tvShowFloatingToolbar(chartId, _drawSelectedIdx); - _emitDrawingAdded(chartId, hlD); - return; - } - - if (_tool === 'text') { - var txtD = { - _id: ++_drawIdCounter, type: 'text', t1: coord.time, p1: coord.price, - text: 'Text', chartId: chartId, color: _drawDefaults.color, - fontSize: 14, lineWidth: _drawDefaults.lineWidth, - }; - ds.drawings.push(txtD); - _tvRenderDrawings(chartId); - _drawSelectedIdx = ds.drawings.length - 1; - _drawSelectedChart = chartId; - _tvShowFloatingToolbar(chartId, _drawSelectedIdx); - _emitDrawingAdded(chartId, txtD); - // Open settings panel with Text tab - _tvShowDrawingSettings(chartId, _drawSelectedIdx); - return; - } - - // Single-click text/notes tools - var _singleClickTextTools = ['anchored_text', 'note', 'price_note', 'pin', 'comment', 'price_label', 'signpost', 'flag_mark']; - if (_singleClickTextTools.indexOf(_tool) !== -1) { - var _sctDefText = { anchored_text: 'Text', note: 'Note', price_note: 'Price Note', pin: '', comment: 'Comment', price_label: 'Label', signpost: 'Signpost', flag_mark: '' }; - var sctD = { - _id: ++_drawIdCounter, type: _tool, t1: coord.time, p1: coord.price, - text: _sctDefText[_tool] || '', chartId: chartId, - color: _drawDefaults.color, fontSize: 14, - bold: false, italic: false, - bgEnabled: true, bgColor: '#2a2e39', - borderEnabled: false, borderColor: _drawDefaults.color, - lineWidth: _drawDefaults.lineWidth, - }; - ds.drawings.push(sctD); - _tvRenderDrawings(chartId); - _drawSelectedIdx = ds.drawings.length - 1; - _drawSelectedChart = chartId; - _tvShowFloatingToolbar(chartId, _drawSelectedIdx); - _emitDrawingAdded(chartId, sctD); - _tvShowDrawingSettings(chartId, _drawSelectedIdx); - return; - } - - // Vertical Line — single-click, anchored by time only - if (_tool === 'vline') { - var vlD = { - _id: ++_drawIdCounter, type: 'vline', t1: coord.time, - chartId: chartId, color: _drawDefaults.color, - lineWidth: _drawDefaults.lineWidth, lineStyle: _drawDefaults.lineStyle, - }; - ds.drawings.push(vlD); - _tvRenderDrawings(chartId); - _drawSelectedIdx = ds.drawings.length - 1; - _drawSelectedChart = chartId; - _tvShowFloatingToolbar(chartId, _drawSelectedIdx); - _emitDrawingAdded(chartId, vlD); - return; - } - - // Cross Line — single-click, crosshair-style - if (_tool === 'crossline') { - var clD = { - _id: ++_drawIdCounter, type: 'crossline', t1: coord.time, p1: coord.price, - chartId: chartId, color: _drawDefaults.color, - lineWidth: _drawDefaults.lineWidth, lineStyle: _drawDefaults.lineStyle, - }; - ds.drawings.push(clD); - _tvRenderDrawings(chartId); - _drawSelectedIdx = ds.drawings.length - 1; - _drawSelectedChart = chartId; - _tvShowFloatingToolbar(chartId, _drawSelectedIdx); - _emitDrawingAdded(chartId, clD); - return; - } - - // Arrow mark single-click tools - var arrowMarks = ['arrow_mark_up', 'arrow_mark_down', 'arrow_mark_left', 'arrow_mark_right']; - if (arrowMarks.indexOf(_tool) !== -1) { - var amD = { - _id: ++_drawIdCounter, type: _tool, t1: coord.time, p1: coord.price, - chartId: chartId, color: _drawDefaults.color, - fillColor: _drawDefaults.color, borderColor: _drawDefaults.color, textColor: _drawDefaults.color, - lineWidth: _drawDefaults.lineWidth, size: 30, - text: '', fontSize: 16, bold: false, italic: false, - }; - ds.drawings.push(amD); - _tvRenderDrawings(chartId); - _drawSelectedIdx = ds.drawings.length - 1; - _drawSelectedChart = chartId; - _tvShowFloatingToolbar(chartId, _drawSelectedIdx); - _emitDrawingAdded(chartId, amD); - return; - } - - // Anchored VWAP — single-click anchor point - if (_tool === 'anchored_vwap') { - var avD = { - _id: ++_drawIdCounter, type: 'anchored_vwap', t1: coord.time, p1: coord.price, - chartId: chartId, color: _drawDefaults.color || '#2962FF', - lineWidth: _drawDefaults.lineWidth, - }; - ds.drawings.push(avD); - _tvRenderDrawings(chartId); - _drawSelectedIdx = ds.drawings.length - 1; - _drawSelectedChart = chartId; - _tvShowFloatingToolbar(chartId, _drawSelectedIdx); - _emitDrawingAdded(chartId, avD); - return; - } - - // Two-point tools (including ray, extended_line, hray, flat_channel, regression_channel) - var twoPointTools = ['trendline', 'ray', 'extended_line', 'hray', - 'rect', 'channel', 'flat_channel', 'regression_channel', - 'fibonacci', 'measure', - 'fib_timezone', 'fib_fan', 'fib_arc', 'fib_circle', - 'fib_spiral', 'gann_box', 'gann_square_fixed', 'gann_square', 'gann_fan', - 'arrow_marker', 'arrow', 'circle', 'ellipse', 'curve', - 'long_position', 'short_position', 'forecast', - 'bars_pattern', 'ghost_feed', 'projection', 'fixed_range_vol', - 'price_range', 'date_range', 'date_price_range', - 'callout']; - // Three-point tools (A→B, then C on second click) - var threePointTools = ['fib_extension', 'fib_channel', 'fib_wedge', 'pitchfan', 'fib_time', - 'rotated_rect', 'triangle', 'shape_arc', 'double_curve']; - if (threePointTools.indexOf(_tool) !== -1) { - if (!_drawPending || _drawPending.chartId !== chartId) { - // First click: set A - _drawPending = { - _id: ++_drawIdCounter, type: _tool, - t1: coord.time, p1: coord.price, - t2: coord.time, p2: coord.price, - chartId: chartId, color: _drawDefaults.color, - lineWidth: _drawDefaults.lineWidth, lineStyle: _drawDefaults.lineStyle, - _phase: 1, - }; - } else if (_drawPending._phase === 1) { - // Second click: set B, start previewing C - _drawPending.t2 = coord.time; - _drawPending.p2 = coord.price; - _drawPending.t3 = coord.time; - _drawPending.p3 = coord.price; - _drawPending._phase = 2; - } else { - // Third click: set C, commit - _drawPending.t3 = coord.time; - _drawPending.p3 = coord.price; - delete _drawPending._phase; - ds.drawings.push(Object.assign({}, _drawPending)); - var committed = _drawPending; - _drawPending = null; - _tvRenderDrawings(chartId); - _drawSelectedIdx = ds.drawings.length - 1; - _drawSelectedChart = chartId; - _tvShowFloatingToolbar(chartId, _drawSelectedIdx); - _emitDrawingAdded(chartId, committed); - } - return; - } - if (twoPointTools.indexOf(_tool) !== -1) { - if (!_drawPending || _drawPending.chartId !== chartId) { - _drawPending = { - _id: ++_drawIdCounter, type: _tool, - t1: coord.time, p1: coord.price, - t2: coord.time, p2: coord.price, - chartId: chartId, color: _drawDefaults.color, - lineWidth: _drawDefaults.lineWidth, lineStyle: _drawDefaults.lineStyle, - offset: 30, - extend: "Don't extend", - ray: false, - showMiddlePoint: false, - showPriceLabels: false, - stats: 'hidden', - statsPosition: 'right', - alwaysShowStats: false, - }; - if (_tool === 'arrow_marker' || _tool === 'arrow') { - _drawPending.text = ''; - _drawPending.fontSize = 16; - _drawPending.bold = false; - _drawPending.italic = false; - _drawPending.fillColor = _drawDefaults.color; - _drawPending.borderColor = _drawDefaults.color; - _drawPending.textColor = _drawDefaults.color; - } - if (_tool === 'callout') { - _drawPending.text = 'Callout'; - _drawPending.fontSize = 14; - _drawPending.bold = false; - _drawPending.italic = false; - _drawPending.bgEnabled = true; - _drawPending.bgColor = '#2a2e39'; - _drawPending.borderEnabled = false; - _drawPending.borderColor = _drawDefaults.color; - } - } else { - _drawPending.t2 = coord.time; - _drawPending.p2 = coord.price; - ds.drawings.push(Object.assign({}, _drawPending)); - var committed = _drawPending; - _drawPending = null; - _tvRenderDrawings(chartId); - // Auto-select - _drawSelectedIdx = ds.drawings.length - 1; - _drawSelectedChart = chartId; - _tvShowFloatingToolbar(chartId, _drawSelectedIdx); - _emitDrawingAdded(chartId, committed); - } - return; - } - - // Brush / Highlighter — free-form drawing, collect points on drag - if (_tool === 'brush' || _tool === 'highlighter') { - _drawPending = { - _id: ++_drawIdCounter, type: _tool, - points: [{ t: coord.time, p: coord.price }], - chartId: chartId, color: _drawDefaults.color, - lineWidth: _tool === 'highlighter' ? 10 : _drawDefaults.lineWidth, - opacity: _tool === 'highlighter' ? 0.4 : 1, - }; - _tvRenderDrawings(chartId); - return; - } - - // Path / Polyline — click-per-point, double-click or right-click to finish - if (_tool === 'path' || _tool === 'polyline') { - if (!_drawPending || _drawPending.chartId !== chartId) { - _drawPending = { - _id: ++_drawIdCounter, type: _tool, - points: [{ t: coord.time, p: coord.price }], - chartId: chartId, color: _drawDefaults.color, - lineWidth: _drawDefaults.lineWidth, lineStyle: _drawDefaults.lineStyle, - _multiPoint: true, - }; - } else { - _drawPending.points.push({ t: coord.time, p: coord.price }); - } - _tvRenderDrawings(chartId); - return; - } - }); - - // Double-click to commit path/polyline - canvas.addEventListener('dblclick', function(e) { - if (!_drawPending || !_drawPending._multiPoint) return; - var d = _drawPending; - // Remove last duplicated point from dblclick - if (d.points.length > 2) d.points.pop(); - delete d._multiPoint; - ds.drawings.push(Object.assign({}, d)); - var committed = d; - _drawPending = null; - _tvRenderDrawings(chartId); - _drawSelectedIdx = ds.drawings.length - 1; - _drawSelectedChart = chartId; - _tvShowFloatingToolbar(chartId, _drawSelectedIdx); - _emitDrawingAdded(chartId, committed); - }); - - // --- Right-click on canvas: cancel pending drawing and revert to cursor --- - canvas.addEventListener('contextmenu', function(e) { - if (_drawPending) { - e.preventDefault(); - _drawPending = null; - _tvRenderDrawings(chartId); - _tvRevertToCursor(chartId); - } else if (ds._activeTool !== 'cursor' && ds._activeTool !== 'crosshair') { - e.preventDefault(); - _tvRevertToCursor(chartId); - } - }); - - // --- Keyboard shortcuts --- - document.addEventListener('keydown', function(e) { - if (e.key === 'Escape') { - // Cancel pending drawing - if (_drawPending) { - _drawPending = null; - _tvRenderDrawings(chartId); - } - // If a drawing tool is active, revert to cursor - if (ds._activeTool !== 'cursor' && ds._activeTool !== 'crosshair') { - _tvRevertToCursor(chartId); - return; - } - // Otherwise deselect any selected drawing - if (_drawSelectedIdx >= 0 && _drawSelectedChart === chartId) { - _tvDeselectAll(chartId); - } - return; - } - if (_drawSelectedIdx < 0 || _drawSelectedChart !== chartId) return; - if (e.key === 'Delete' || e.key === 'Backspace') { - e.preventDefault(); - _tvDeleteDrawing(chartId, _drawSelectedIdx); - } - }); -} - -function _tvDeselectAll(chartId) { - _drawSelectedIdx = -1; - _drawSelectedChart = null; - _drawHoverIdx = -1; - _tvHideFloatingToolbar(); - _tvHideContextMenu(); - _tvRenderDrawings(chartId); -} - -// Revert to cursor mode and update the left toolbar UI -function _tvRevertToCursor(chartId) { - var ds = window.__PYWRY_DRAWINGS__[chartId]; - if (!ds || ds._activeTool === 'cursor') return; - _tvSetDrawTool(chartId, 'cursor'); - // Update left toolbar scoped to this chart - var allIcons = _tvScopedQueryAll(chartId, '.pywry-toolbar-left .pywry-icon-btn'); - if (allIcons) allIcons.forEach(function(el) { el.classList.remove('active'); }); - var cursorBtn = _tvScopedById(chartId, 'tvchart-tool-cursor'); - if (cursorBtn) cursorBtn.classList.add('active'); -} - -function _emitDrawingAdded(chartId, d) { - // Push undo entry for the newly added drawing (always the last in the array) - var _undoChartId = chartId; - var _undoDrawing = Object.assign({}, d); - _tvPushUndo({ - label: 'Add ' + (d.type || 'drawing'), - undo: function() { - var ds = window.__PYWRY_DRAWINGS__[_undoChartId]; - if (!ds) return; - // Find and remove the drawing by _id - for (var i = ds.drawings.length - 1; i >= 0; i--) { - if (ds.drawings[i]._id === _undoDrawing._id) { - // Remove native price line if hline - if (ds.drawings[i].type === 'hline' && ds.priceLines[i]) { - var entry = window.__PYWRY_TVCHARTS__[_undoChartId]; - if (entry) { - var pl = ds.priceLines[i]; - var ser = entry.seriesMap[pl.seriesId]; - if (ser) try { ser.removePriceLine(pl.priceLine); } catch(e) {} - } - ds.priceLines.splice(i, 1); - } - ds.drawings.splice(i, 1); - break; - } - } - _tvDeselectAll(_undoChartId); - }, - redo: function() { - var ds = window.__PYWRY_DRAWINGS__[_undoChartId]; - if (!ds) return; - ds.drawings.push(Object.assign({}, _undoDrawing)); - // Re-create native price line if hline - if (_undoDrawing.type === 'hline') { - var entry = window.__PYWRY_TVCHARTS__[_undoChartId]; - if (entry) { - var mainKey = Object.keys(entry.seriesMap)[0]; - if (mainKey && entry.seriesMap[mainKey]) { - var pl = entry.seriesMap[mainKey].createPriceLine({ - price: _undoDrawing.price, color: _undoDrawing.color, - lineWidth: _undoDrawing.lineWidth, lineStyle: _undoDrawing.lineStyle, - axisLabelVisible: true, title: '', - }); - ds.priceLines.push({ seriesId: mainKey, priceLine: pl }); - } - } - } - _tvDeselectAll(_undoChartId); - }, - }); - if (window.pywry && window.pywry.emit) { - window.pywry.emit('tvchart:drawing-added', { chartId: chartId, drawing: d }); - } - // Auto-revert to cursor after every drawing finishes so the - // toolbar button doesn't stay highlighted forever. - _tvRevertToCursor(chartId); -} - -// ---- Tool switching ---- -function _tvSetDrawTool(chartId, tool) { - var ds = window.__PYWRY_DRAWINGS__[chartId]; - if (!ds) { - _tvEnsureDrawingLayer(chartId); - ds = window.__PYWRY_DRAWINGS__[chartId]; - } - if (!ds) return; - - ds._activeTool = tool; - if (_drawPending && _drawPending.chartId === chartId) { - _drawPending = null; - } - - _tvApplyDrawingInteractionMode(ds); - - // Toggle chart crosshair lines based on tool selection - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (entry && entry._chartPrefs) { - entry._chartPrefs.crosshairEnabled = (tool === 'crosshair'); - _tvApplyHoverReadoutMode(entry); - } - - // Deselect when switching tools - _tvDeselectAll(chartId); -} - -// ---- Clear all drawings ---- -function _tvClearDrawings(chartId) { - var ds = window.__PYWRY_DRAWINGS__[chartId]; - if (!ds) return; - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (entry) { - for (var i = 0; i < ds.priceLines.length; i++) { - var pl = ds.priceLines[i]; - var ser = entry.seriesMap[pl.seriesId]; - if (ser) try { ser.removePriceLine(pl.priceLine); } catch(e) {} - } - } - ds.priceLines = []; - ds.drawings = []; - if (_drawPending && _drawPending.chartId === chartId) _drawPending = null; - _drawSelectedIdx = -1; - _drawSelectedChart = null; - _tvHideFloatingToolbar(); - _tvHideContextMenu(); - _tvRenderDrawings(chartId); -} - diff --git a/pywry/pywry/frontend/src/tvchart/07-drawing/00-state-tools.js b/pywry/pywry/frontend/src/tvchart/07-drawing/00-state-tools.js new file mode 100644 index 0000000..774efec --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/07-drawing/00-state-tools.js @@ -0,0 +1,402 @@ +// --------------------------------------------------------------------------- +// Drawing system — canvas overlay for interactive drawing tools +// --------------------------------------------------------------------------- + +window.__PYWRY_DRAWINGS__ = window.__PYWRY_DRAWINGS__ || {}; +// _activeTool is stored per chart on ds (drawing state), not as a global +var _drawPending = null; +var _drawSelectedIdx = -1; // index into ds.drawings +var _drawSelectedChart = null; // chartId of selected drawing +var _drawDragging = null; // { anchor: 'p1'|'p2'|'body', startX, startY, origD } +var _drawDidDrag = false; // true after a drag completes — suppresses next click +var _drawHoverIdx = -1; +var _drawIdCounter = 0; + +// --------------------------------------------------------------------------- +// Global undo/redo stack — handles all chart mutations (drawings, indicators) +// Each entry: { undo: function(), redo: function(), label: string } +// --------------------------------------------------------------------------- +var _tvUndoStack = []; +var _tvRedoStack = []; +var _TV_UNDO_MAX = 100; + +function _tvPushUndo(entry) { + _tvUndoStack.push(entry); + if (_tvUndoStack.length > _TV_UNDO_MAX) _tvUndoStack.shift(); + _tvRedoStack.length = 0; // new action clears redo +} + +function _tvPerformUndo() { + if (_tvUndoStack.length === 0) return; + var entry = _tvUndoStack.pop(); + try { entry.undo(); } catch(e) { console.warn('[pywry] undo failed:', e); } + _tvRedoStack.push(entry); +} + +function _tvPerformRedo() { + if (_tvRedoStack.length === 0) return; + var entry = _tvRedoStack.pop(); + try { entry.redo(); } catch(e) { console.warn('[pywry] redo failed:', e); } + _tvUndoStack.push(entry); +} + +// --------------------------------------------------------------------------- +// Tool-group flyout definitions (matches TradingView left toolbar pattern) +// --------------------------------------------------------------------------- + +var _TV_ICON_ATTRS = 'xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"'; + +var _TOOL_GROUP_DEFS = { + 'lines': [ + { section: 'LINES', tools: [ + { id: 'trendline', name: 'Trend Line', shortcut: 'Alt+T', + icon: '' }, + { id: 'ray', name: 'Ray', + icon: '' }, + { id: 'extended_line', name: 'Extended Line', + icon: '' }, + { id: 'hline', name: 'Horizontal Line', shortcut: 'Alt+H', + icon: '' }, + { id: 'hray', name: 'Horizontal Ray', shortcut: 'Alt+J', + icon: '' }, + { id: 'vline', name: 'Vertical Line', shortcut: 'Alt+V', + icon: '' }, + { id: 'crossline', name: 'Cross Line', shortcut: 'Alt+C', + icon: '' }, + ]}, + ], + 'channels': [ + { section: 'CHANNELS', tools: [ + { id: 'channel', name: 'Parallel Channel', + icon: '' }, + { id: 'regression_channel', name: 'Regression Trend', + icon: '' }, + { id: 'flat_channel', name: 'Flat Top/Bottom', + icon: '' }, + ]}, + ], + 'fib': [ + { section: 'FIBONACCI', tools: [ + { id: 'fibonacci', name: 'Fib Retracement', shortcut: 'Alt+F', + icon: '01' }, + { id: 'fib_extension', name: 'Trend-Based Fib Extension', + icon: '' }, + { id: 'fib_channel', name: 'Fib Channel', + icon: '' }, + { id: 'fib_timezone', name: 'Fib Time Zone', + icon: '' }, + { id: 'fib_fan', name: 'Fib Speed Resistance Fan', + icon: '' }, + { id: 'fib_time', name: 'Trend-Based Fib Time', + icon: '' }, + { id: 'fib_circle', name: 'Fib Circles', + icon: '' }, + { id: 'fib_spiral', name: 'Fib Spiral', + icon: '' }, + { id: 'fib_arc', name: 'Fib Speed Resistance Arcs', + icon: '' }, + { id: 'fib_wedge', name: 'Fib Wedge', + icon: '' }, + { id: 'pitchfan', name: 'Pitchfan', + icon: '' }, + ]}, + ], + 'gann': [ + { section: 'GANN', tools: [ + { id: 'gann_box', name: 'Gann Box', + icon: '' }, + { id: 'gann_square_fixed', name: 'Gann Square Fixed', + icon: '' }, + { id: 'gann_square', name: 'Gann Square', + icon: '' }, + { id: 'gann_fan', name: 'Gann Fan', + icon: '' }, + ]}, + ], + 'shapes': [ + { section: 'SHAPES', tools: [ + { id: 'rect', name: 'Rectangle', shortcut: 'Alt+Shift+R', + icon: '' }, + { id: 'rotated_rect', name: 'Rotated Rectangle', + icon: '' }, + { id: 'path', name: 'Path', + icon: '' }, + { id: 'circle', name: 'Circle', + icon: '' }, + { id: 'ellipse', name: 'Ellipse', + icon: '' }, + { id: 'polyline', name: 'Polyline', + icon: '' }, + { id: 'triangle', name: 'Triangle', + icon: '' }, + { id: 'shape_arc', name: 'Arc', + icon: '' }, + { id: 'curve', name: 'Curve', + icon: '' }, + { id: 'double_curve', name: 'Double Curve', + icon: '' }, + ]}, + ], + 'annotations': [ + { section: 'BRUSHES', tools: [ + { id: 'brush', name: 'Brush', + icon: '' }, + { id: 'highlighter', name: 'Highlighter', + icon: '' }, + ]}, + { section: 'ARROWS', tools: [ + { id: 'arrow_marker', name: 'Arrow Marker', + icon: '' }, + { id: 'arrow', name: 'Arrow', + icon: '' }, + { id: 'arrow_mark_up', name: 'Arrow Mark Up', + icon: '' }, + { id: 'arrow_mark_down', name: 'Arrow Mark Down', + icon: '' }, + { id: 'arrow_mark_left', name: 'Arrow Mark Left', + icon: '' }, + { id: 'arrow_mark_right', name: 'Arrow Mark Right', + icon: '' }, + ]}, + { section: 'TEXT', tools: [ + { id: 'text', name: 'Text', + icon: '' }, + { id: 'anchored_text', name: 'Anchored Text', + icon: '' }, + { id: 'note', name: 'Note', + icon: '' }, + { id: 'price_note', name: 'Price Note', + icon: '$' }, + { id: 'pin', name: 'Pin', + icon: '' }, + { id: 'callout', name: 'Callout', + icon: '' }, + { id: 'comment', name: 'Comment', + icon: '' }, + { id: 'price_label', name: 'Price Label', + icon: '' }, + { id: 'signpost', name: 'Signpost', + icon: '' }, + { id: 'flag_mark', name: 'Flag Mark', + icon: '' }, + ]}, + ], + 'projection': [ + { section: 'PROJECTION', tools: [ + { id: 'long_position', name: 'Long Position', + icon: '' }, + { id: 'short_position', name: 'Short Position', + icon: '' }, + { id: 'forecast', name: 'Forecast', + icon: '' }, + { id: 'bars_pattern', name: 'Bars Pattern', + icon: '' }, + { id: 'ghost_feed', name: 'Ghost Feed', + icon: '' }, + { id: 'projection', name: 'Projection', + icon: '' }, + ]}, + { section: 'VOLUME-BASED', tools: [ + { id: 'anchored_vwap', name: 'Anchored VWAP', + icon: '' }, + { id: 'fixed_range_vol', name: 'Fixed Range Volume Profile', + icon: '' }, + ]}, + ], + 'measure': [ + { section: 'MEASURER', tools: [ + { id: 'measure', name: 'Measure', + icon: '' }, + { id: 'price_range', name: 'Price Range', + icon: '' }, + { id: 'date_range', name: 'Date Range', + icon: '' }, + { id: 'date_price_range', name: 'Date and Price Range', + icon: '' }, + ]}, + ], +}; + +// Track which sub-tool is active for each group (shown on the group button) +var _toolGroupActive = { + 'lines': 'trendline', + 'channels': 'channel', + 'fib': 'fibonacci', + 'gann': 'gann_box', + 'shapes': 'rect', + 'annotations': 'brush', + 'projection': 'long_position', + 'measure': 'measure', +}; + +// Map tool IDs back to their parent group name +var _toolToGroup = {}; +(function() { + var groups = Object.keys(_TOOL_GROUP_DEFS); + for (var g = 0; g < groups.length; g++) { + var sections = _TOOL_GROUP_DEFS[groups[g]]; + for (var s = 0; s < sections.length; s++) { + for (var t = 0; t < sections[s].tools.length; t++) { + _toolToGroup[sections[s].tools[t].id] = groups[g]; + } + } + } +})(); + +// Active flyout DOM element +var _activeGroupFlyout = null; +var _activeGroupBtn = null; + +function _tvFindToolDef(toolId) { + var groups = Object.keys(_TOOL_GROUP_DEFS); + for (var g = 0; g < groups.length; g++) { + var sections = _TOOL_GROUP_DEFS[groups[g]]; + for (var s = 0; s < sections.length; s++) { + for (var t = 0; t < sections[s].tools.length; t++) { + if (sections[s].tools[t].id === toolId) return sections[s].tools[t]; + } + } + } + return null; +} + +function _tvShowToolGroupFlyout(groupBtn) { + var groupName = groupBtn.getAttribute('data-tool-group'); + // Toggle off if already open for this group + if (_activeGroupFlyout && _activeGroupBtn === groupBtn) { + _tvHideToolGroupFlyout(); + return; + } + _tvHideToolGroupFlyout(); + + var sections = _TOOL_GROUP_DEFS[groupName]; + if (!sections) return; + + var flyout = document.createElement('div'); + flyout.className = 'pywry-tool-flyout'; + flyout.setAttribute('data-group', groupName); + + for (var s = 0; s < sections.length; s++) { + var sec = sections[s]; + var header = document.createElement('div'); + header.className = 'pywry-tool-flyout-header'; + header.textContent = sec.section; + flyout.appendChild(header); + + for (var t = 0; t < sec.tools.length; t++) { + var tool = sec.tools[t]; + var item = document.createElement('div'); + item.className = 'pywry-tool-flyout-item'; + if (tool.id === _toolGroupActive[groupName]) { + item.classList.add('selected'); + } + item.setAttribute('data-tool-id', tool.id); + item.setAttribute('data-tool-group', groupName); + + var iconSpan = document.createElement('span'); + iconSpan.className = 'pywry-tool-flyout-icon'; + iconSpan.innerHTML = tool.icon; + iconSpan.style.pointerEvents = 'none'; + item.appendChild(iconSpan); + + var nameSpan = document.createElement('span'); + nameSpan.className = 'pywry-tool-flyout-name'; + nameSpan.textContent = tool.name; + nameSpan.style.pointerEvents = 'none'; + item.appendChild(nameSpan); + + if (tool.shortcut) { + var shortcutSpan = document.createElement('span'); + shortcutSpan.className = 'pywry-tool-flyout-shortcut'; + shortcutSpan.textContent = tool.shortcut; + shortcutSpan.style.pointerEvents = 'none'; + item.appendChild(shortcutSpan); + } + + // Direct click handler on each item — no event delegation + (function(itemEl, toolId, group) { + itemEl.addEventListener('mousedown', function(e) { + e.preventDefault(); + e.stopPropagation(); + e.stopImmediatePropagation(); + + _toolGroupActive[group] = toolId; + + // Update the group button icon + var def = _tvFindToolDef(toolId); + if (def) { + var iconEl = groupBtn.querySelector('.pywry-tool-group-icon'); + if (iconEl) iconEl.innerHTML = def.icon; + } + + // Highlight group button as active, deactivate others + var cId = _tvResolveChartIdFromElement(groupBtn); + var allIcons = _tvScopedQueryAll(cId, '.pywry-toolbar-left .pywry-icon-btn'); + if (allIcons) allIcons.forEach(function(el) { el.classList.remove('active'); }); + groupBtn.classList.add('active'); + + _tvSetDrawTool(cId, toolId); + _tvHideToolGroupFlyout(); + }); + })(item, tool.id, groupName); + + flyout.appendChild(item); + } + } + + // Position to the right of the left toolbar + var _oc = _tvOverlayContainer(groupBtn); + var _isWidget = (_oc !== document.body); + var rect = groupBtn.getBoundingClientRect(); + var toolbar = groupBtn.closest('.tvchart-left'); + var toolbarRect = toolbar ? toolbar.getBoundingClientRect() : rect; + flyout.style.position = _isWidget ? 'absolute' : 'fixed'; + var _cRect = _tvContainerRect(_oc, toolbarRect); + var _bRect = _tvContainerRect(_oc, rect); + flyout.style.left = (_cRect.right + 1) + 'px'; + flyout.style.top = _bRect.top + 'px'; + + _oc.appendChild(flyout); + _activeGroupFlyout = flyout; + _activeGroupBtn = groupBtn; + + // Clamp to container bottom + var _cs = _tvContainerSize(_oc); + var flyRect = flyout.getBoundingClientRect(); + var flyH = flyRect.height; + if (_bRect.top + flyH > _cs.height - 8) { + flyout.style.top = Math.max(8, _cs.height - flyH - 8) + 'px'; + } + + // Block all flyout-level events from propagating to document handlers + flyout.addEventListener('mousedown', function(e) { e.stopPropagation(); }); + flyout.addEventListener('click', function(e) { e.stopPropagation(); }); +} + +function _tvHideToolGroupFlyout() { + if (_activeGroupFlyout) { + _activeGroupFlyout.remove(); + _activeGroupFlyout = null; + _activeGroupBtn = null; + } +} + +// Default properties for new drawings (resolved from CSS variables) +function _getDrawDefaults() { + return { + color: _cssVar('--pywry-draw-default-color'), + lineWidth: 2, + lineStyle: 0 + }; +} +var _drawDefaults = { get color() { return _getDrawDefaults().color; }, lineWidth: 2, lineStyle: 0 }; + +// Color palette for the floating toolbar picker (resolved from CSS variables) +function _getDrawColors() { + var colors = []; + for (var i = 0; i < 15; i++) { + colors.push(_cssVar('--pywry-preset-' + i)); + } + return colors; +} + diff --git a/pywry/pywry/frontend/src/tvchart/07-drawing/01-color-picker.js b/pywry/pywry/frontend/src/tvchart/07-drawing/01-color-picker.js new file mode 100644 index 0000000..d3fd55f --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/07-drawing/01-color-picker.js @@ -0,0 +1,353 @@ +// --------------------------------------------------------------------------- +// Shared color+opacity picker popup — used by all settings modals +// --------------------------------------------------------------------------- +var _colorOpacityPopupEl = null; +var _colorOpacityCleanups = []; + +function _tvHideColorOpacityPopup() { + for (var i = 0; i < _colorOpacityCleanups.length; i++) { + try { _colorOpacityCleanups[i](); } catch(e) {} + } + _colorOpacityCleanups = []; + if (_colorOpacityPopupEl && _colorOpacityPopupEl.parentNode) { + _colorOpacityPopupEl.parentNode.removeChild(_colorOpacityPopupEl); + } + _colorOpacityPopupEl = null; +} + +/** + * Show a color+opacity popup anchored to `anchor`. + * @param {Element} anchor The element to position relative to + * @param {string} currentColor Hex color + * @param {number} currentOpacity 0-100 percent + * @param {Element} parentOverlay The overlay to append the popup to (or document.body) + * @param {function(color,opacity)} onUpdate Called on every change + */ +function _tvShowColorOpacityPopup(anchor, currentColor, currentOpacity, parentOverlay, onUpdate) { + if (!anchor) return; + if (_colorOpacityPopupEl && _colorOpacityPopupEl._anchor === anchor) { + _tvHideColorOpacityPopup(); + return; + } + _tvHideColorOpacityPopup(); + _tvHideColorPicker(); + + currentColor = _tvColorToHex(currentColor || '#aeb4c2', '#aeb4c2'); + currentOpacity = _tvClamp(_tvToNumber(currentOpacity, 100), 0, 100); + + var curRgb = _hexToRgb(currentColor); + var curHsv = _rgbToHsv(curRgb[0], curRgb[1], curRgb[2]); + var cpH = curHsv[0], cpS = curHsv[1], cpV = curHsv[2]; + + var PW = 276; + var popup = document.createElement('div'); + popup.style.cssText = + 'position:fixed;z-index:12002;width:' + PW + 'px;padding:14px;' + + 'background:' + _cssVar('--pywry-draw-bg', '#1e222d') + ';' + + 'border:1px solid ' + _cssVar('--pywry-draw-border', '#434651') + ';' + + 'border-radius:12px;box-shadow:0 12px 32px ' + _cssVar('--pywry-draw-shadow-lg', 'rgba(0,0,0,.6)') + ';' + + 'font-family:-apple-system,BlinkMacSystemFont,sans-serif;'; + popup.addEventListener('click', function(e) { e.stopPropagation(); }); + popup.addEventListener('mousedown', function(e) { e.stopPropagation(); }); + popup._anchor = anchor; + + var presets = _getDrawColors(); + var presetButtons = []; + + // === SV Canvas === + var svW = PW, svH = 150; + var svWrap = document.createElement('div'); + svWrap.style.cssText = + 'position:relative;width:' + svW + 'px;height:' + svH + 'px;' + + 'border-radius:6px;overflow:hidden;cursor:crosshair;margin-bottom:10px;'; + var svCanvas = document.createElement('canvas'); + svCanvas.width = svW * 2; svCanvas.height = svH * 2; + svCanvas.style.cssText = 'width:100%;height:100%;display:block;'; + svWrap.appendChild(svCanvas); + + var svDot = document.createElement('div'); + svDot.style.cssText = + 'position:absolute;width:14px;height:14px;border-radius:50%;' + + 'border:2px solid ' + _cssVar('--pywry-draw-handle-fill', '#ffffff') + ';' + + 'box-shadow:0 0 4px ' + _cssVar('--pywry-draw-shadow-lg', 'rgba(0,0,0,.6)') + ';' + + 'pointer-events:none;transform:translate(-50%,-50%);'; + svWrap.appendChild(svDot); + popup.appendChild(svWrap); + + function paintSV() { _cpPaintSV(svCanvas, cpH); } + + function svFromEvent(e) { + var r = svWrap.getBoundingClientRect(); + cpS = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)); + cpV = Math.max(0, Math.min(1, 1 - (e.clientY - r.top) / r.height)); + applyFromHSV(); + } + svWrap.addEventListener('mousedown', function(e) { + e.preventDefault(); + svFromEvent(e); + function mv(ev) { svFromEvent(ev); } + function up() { document.removeEventListener('mousemove', mv); document.removeEventListener('mouseup', up); } + document.addEventListener('mousemove', mv); + document.addEventListener('mouseup', up); + }); + + // === Hue bar === + var hueH = 14; + var hueWrap = document.createElement('div'); + hueWrap.style.cssText = + 'position:relative;width:100%;height:' + hueH + 'px;' + + 'border-radius:7px;overflow:hidden;cursor:pointer;margin-bottom:10px;'; + var hueCanvas = document.createElement('canvas'); + hueCanvas.width = svW * 2; hueCanvas.height = hueH * 2; + hueCanvas.style.cssText = 'width:100%;height:100%;display:block;'; + hueWrap.appendChild(hueCanvas); + _cpPaintHue(hueCanvas); + + var hueThumb = document.createElement('div'); + hueThumb.style.cssText = + 'position:absolute;top:50%;width:16px;height:16px;border-radius:50%;' + + 'border:2px solid ' + _cssVar('--pywry-draw-handle-fill', '#ffffff') + ';' + + 'box-shadow:0 0 4px ' + _cssVar('--pywry-draw-shadow-lg', 'rgba(0,0,0,.6)') + ';' + + 'pointer-events:none;transform:translate(-50%,-50%);'; + hueWrap.appendChild(hueThumb); + popup.appendChild(hueWrap); + + function hueFromEvent(e) { + var r = hueWrap.getBoundingClientRect(); + cpH = Math.max(0, Math.min(0.999, (e.clientX - r.left) / r.width)); + paintSV(); + applyFromHSV(); + } + hueWrap.addEventListener('mousedown', function(e) { + e.preventDefault(); + hueFromEvent(e); + function mv(ev) { hueFromEvent(ev); } + function up() { document.removeEventListener('mousemove', mv); document.removeEventListener('mouseup', up); } + document.addEventListener('mousemove', mv); + document.addEventListener('mouseup', up); + }); + + // === Hex input row === + var hexRow = document.createElement('div'); + hexRow.style.cssText = 'display:flex;align-items:center;gap:8px;margin-bottom:10px;'; + var prevBox = document.createElement('div'); + prevBox.style.cssText = + 'width:32px;height:32px;border-radius:4px;flex-shrink:0;' + + 'border:1px solid ' + _cssVar('--pywry-draw-border', '#434651') + ';'; + var hexIn = document.createElement('input'); + hexIn.type = 'text'; hexIn.spellcheck = false; hexIn.maxLength = 7; + hexIn.style.cssText = + 'flex:1;background:' + _cssVar('--pywry-draw-input-bg', '#0a0a0d') + ';' + + 'border:1px solid ' + _cssVar('--pywry-draw-border', '#434651') + ';border-radius:4px;' + + 'color:' + _cssVar('--pywry-draw-input-text', '#d1d4dc') + ';font-size:13px;padding:6px 8px;font-family:monospace;' + + 'outline:none;text-transform:uppercase;'; + hexIn.addEventListener('focus', function() { hexIn.style.borderColor = _cssVar('--pywry-draw-input-focus', '#2962ff'); }); + hexIn.addEventListener('blur', function() { hexIn.style.borderColor = _cssVar('--pywry-draw-border', '#434651'); }); + hexIn.addEventListener('keydown', function(e) { + e.stopPropagation(); + if (e.key === 'Enter') { + var val = hexIn.value.trim(); + if (val[0] !== '#') val = '#' + val; + if (/^#[0-9a-fA-F]{6}$/.test(val)) { + var rgb = _hexToRgb(val); + var hsv = _rgbToHsv(rgb[0], rgb[1], rgb[2]); + cpH = hsv[0]; cpS = hsv[1]; cpV = hsv[2]; + paintSV(); + applyFromHSV(); + } + } + }); + hexRow.appendChild(prevBox); + hexRow.appendChild(hexIn); + popup.appendChild(hexRow); + + // === Separator === + var sep1 = document.createElement('div'); + sep1.style.cssText = 'height:1px;background:' + _cssVar('--pywry-draw-border', '#434651') + ';margin:0 0 10px 0;'; + popup.appendChild(sep1); + + // === Preset swatches === + var swatchGrid = document.createElement('div'); + swatchGrid.style.cssText = 'display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;margin-bottom:14px;'; + popup.appendChild(swatchGrid); + + for (var pi = 0; pi < presets.length; pi++) { + (function(presetColor) { + var presetButton = document.createElement('button'); + presetButton.type = 'button'; + presetButton.dataset.color = presetColor.toLowerCase(); + presetButton.style.cssText = + 'width:100%;aspect-ratio:1;border-radius:6px;cursor:pointer;box-sizing:border-box;' + + 'border:2px solid transparent;background:' + presetColor + ';'; + presetButton.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + var rgb = _hexToRgb(presetColor); + var hsv = _rgbToHsv(rgb[0], rgb[1], rgb[2]); + cpH = hsv[0]; cpS = hsv[1]; cpV = hsv[2]; + paintSV(); + applyFromHSV(); + }); + presetButtons.push(presetButton); + swatchGrid.appendChild(presetButton); + })(presets[pi]); + } + + // === Separator === + var sep2 = document.createElement('div'); + sep2.style.cssText = 'height:1px;background:' + _cssVar('--pywry-draw-border', '#434651') + ';margin:0 0 14px 0;'; + popup.appendChild(sep2); + + // === Opacity === + var opacityTitle = document.createElement('div'); + opacityTitle.textContent = 'Opacity'; + opacityTitle.style.cssText = 'color:' + _cssVar('--pywry-tvchart-text', '#d1d4dc') + ';font-size:12px;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:8px;'; + popup.appendChild(opacityTitle); + + var opacityRow = document.createElement('div'); + opacityRow.style.cssText = 'display:flex;align-items:center;gap:10px;'; + var opacitySlider = document.createElement('input'); + opacitySlider.type = 'range'; + opacitySlider.className = 'tv-settings-slider'; + opacitySlider.min = '0'; + opacitySlider.max = '100'; + opacityRow.appendChild(opacitySlider); + var opacityValue = document.createElement('input'); + opacityValue.type = 'number'; + opacityValue.className = 'ts-input ts-input-sm'; + opacityValue.min = '0'; + opacityValue.max = '100'; + opacityValue.addEventListener('keydown', function(e) { e.stopPropagation(); }); + opacityRow.appendChild(opacityValue); + var opacityUnit = document.createElement('span'); + opacityUnit.className = 'tv-settings-unit'; + opacityUnit.textContent = '%'; + opacityRow.appendChild(opacityUnit); + popup.appendChild(opacityRow); + + // === Refresh helpers === + function refreshPresetSelection() { + presetButtons.forEach(function(btn) { + btn.style.borderColor = btn.dataset.color === currentColor.toLowerCase() + ? _cssVar('--pywry-draw-input-focus', '#2962ff') + : 'transparent'; + }); + } + + function refreshHSVUI() { + var rgb = _hsvToRgb(cpH, cpS, cpV); + var hex = _rgbToHex(rgb[0], rgb[1], rgb[2]); + svDot.style.left = (cpS * 100) + '%'; + svDot.style.top = ((1 - cpV) * 100) + '%'; + svDot.style.background = hex; + hueThumb.style.left = (cpH * 100) + '%'; + var hRgb = _hsvToRgb(cpH, 1, 1); + hueThumb.style.background = _rgbToHex(hRgb[0], hRgb[1], hRgb[2]); + hexIn.value = hex.toUpperCase(); + prevBox.style.background = _tvColorWithOpacity(hex, currentOpacity, hex); + } + + function applyFromHSV() { + var rgb = _hsvToRgb(cpH, cpS, cpV); + currentColor = _rgbToHex(rgb[0], rgb[1], rgb[2]); + opacitySlider.value = String(currentOpacity); + opacityValue.value = String(currentOpacity); + prevBox.style.background = _tvColorWithOpacity(currentColor, currentOpacity, currentColor); + refreshHSVUI(); + refreshPresetSelection(); + if (onUpdate) onUpdate(currentColor, currentOpacity); + } + + function applySelection(nextColor, nextOpacity) { + currentColor = _tvColorToHex(nextColor || currentColor, currentColor); + currentOpacity = _tvClamp(_tvToNumber(nextOpacity, currentOpacity), 0, 100); + var rgb = _hexToRgb(currentColor); + var hsv = _rgbToHsv(rgb[0], rgb[1], rgb[2]); + cpH = hsv[0]; cpS = hsv[1]; cpV = hsv[2]; + paintSV(); + opacitySlider.value = String(currentOpacity); + opacityValue.value = String(currentOpacity); + prevBox.style.background = _tvColorWithOpacity(currentColor, currentOpacity, currentColor); + refreshHSVUI(); + refreshPresetSelection(); + if (onUpdate) onUpdate(currentColor, currentOpacity); + } + + opacitySlider.addEventListener('input', function() { + applySelection(currentColor, opacitySlider.value); + }); + opacityValue.addEventListener('input', function() { + applySelection(currentColor, opacityValue.value); + }); + + _colorOpacityPopupEl = popup; + var appendTarget = parentOverlay || document.body; + appendTarget.appendChild(popup); + paintSV(); + applySelection(currentColor, currentOpacity); + + // --- Position within the parent (absolute if inside overlay, fixed if body) --- + if (parentOverlay) { + popup.style.position = 'absolute'; + // Find the settings panel inside the overlay to constrain within it + var constrainEl = parentOverlay.querySelector('.tv-settings-panel') || parentOverlay; + var constrainRect = constrainEl.getBoundingClientRect(); + var overlayRect = parentOverlay.getBoundingClientRect(); + var anchorRect = anchor.getBoundingClientRect(); + var popupRect = popup.getBoundingClientRect(); + // Calculate position relative to the overlay + var top = anchorRect.bottom - overlayRect.top + 6; + // If it goes below the panel bottom, show above the anchor + if (top + popupRect.height > constrainRect.bottom - overlayRect.top - 8) { + top = anchorRect.top - overlayRect.top - popupRect.height - 6; + } + // Clamp to panel bounds vertically + var minTop = constrainRect.top - overlayRect.top + 4; + var maxTop = constrainRect.bottom - overlayRect.top - popupRect.height - 4; + top = Math.max(minTop, Math.min(maxTop, top)); + var left = anchorRect.left - overlayRect.left; + // Clamp to panel bounds horizontally + var maxLeft = constrainRect.right - overlayRect.left - popupRect.width - 4; + left = Math.max(constrainRect.left - overlayRect.left + 4, Math.min(maxLeft, left)); + popup.style.top = top + 'px'; + popup.style.left = left + 'px'; + } else { + var anchorRect = anchor.getBoundingClientRect(); + var popupRect = popup.getBoundingClientRect(); + var top = anchorRect.bottom + 10; + if (top + popupRect.height > window.innerHeight - 12) { + top = Math.max(12, anchorRect.top - popupRect.height - 10); + } + var left = anchorRect.left; + if (left + popupRect.width > window.innerWidth - 12) { + left = Math.max(12, window.innerWidth - popupRect.width - 12); + } + popup.style.top = top + 'px'; + popup.style.left = left + 'px'; + } + + // --- Dismissal: Escape key and click outside --- + function onEscKey(e) { + if (e.key === 'Escape') { + e.stopPropagation(); + _tvHideColorOpacityPopup(); + } + } + function onOutsideClick(e) { + if (popup.contains(e.target) || e.target === anchor) return; + _tvHideColorOpacityPopup(); + } + document.addEventListener('keydown', onEscKey, true); + // Delay the click listener so the current click doesn't immediately close it + var _outsideTimer = setTimeout(function() { + document.addEventListener('mousedown', onOutsideClick, true); + }, 0); + _colorOpacityCleanups.push(function() { + clearTimeout(_outsideTimer); + document.removeEventListener('keydown', onEscKey, true); + document.removeEventListener('mousedown', onOutsideClick, true); + }); +} + +var _DRAW_WIDTHS = [1, 2, 3, 4]; + diff --git a/pywry/pywry/frontend/src/tvchart/07-drawing/02-helpers.js b/pywry/pywry/frontend/src/tvchart/07-drawing/02-helpers.js new file mode 100644 index 0000000..a3e66aa --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/07-drawing/02-helpers.js @@ -0,0 +1,579 @@ +function _tvApplyDrawingInteractionMode(ds) { + if (!ds || !ds.canvas) return; + var tool = ds._activeTool || 'cursor'; + if (tool === 'crosshair' || tool === 'cursor') { + ds.canvas.style.pointerEvents = 'none'; + ds.canvas.style.cursor = tool === 'crosshair' ? 'crosshair' : 'default'; + return; + } + ds.canvas.style.pointerEvents = 'auto'; + ds.canvas.style.cursor = 'crosshair'; +} + +function _tvGetDrawingViewport(chartId) { + var ds = window.__PYWRY_DRAWINGS__[chartId]; + var entry = window.__PYWRY_TVCHARTS__[chartId]; + var width = ds && ds.canvas ? ds.canvas.clientWidth : 0; + var height = ds && ds.canvas ? ds.canvas.clientHeight : 0; + var viewport = { left: 0, top: 0, right: width, bottom: height, width: width, height: height }; + if (!entry || !entry.chart || width <= 0 || height <= 0) return viewport; + + var timeScale = entry.chart.timeScale ? entry.chart.timeScale() : null; + if (timeScale && typeof timeScale.logicalToCoordinate === 'function' && + typeof timeScale.getVisibleLogicalRange === 'function') { + var range = timeScale.getVisibleLogicalRange(); + if (range && isFinite(range.from) && isFinite(range.to)) { + var leftCoord = timeScale.logicalToCoordinate(range.from); + var rightCoord = timeScale.logicalToCoordinate(range.to); + if (leftCoord !== null && isFinite(leftCoord)) { + viewport.left = Math.max(0, Math.min(width, leftCoord)); + } + if (rightCoord !== null && isFinite(rightCoord)) { + viewport.right = Math.max(viewport.left, Math.min(width, rightCoord)); + } + } + } + + if (!isFinite(viewport.right) || viewport.right <= viewport.left + 8 || viewport.right >= width - 2) { + var placement = entry._chartPrefs && entry._chartPrefs.scalesPlacement + ? entry._chartPrefs.scalesPlacement + : 'Auto'; + var labelProbe = 68; + if (ds && ds.ctx) { + ds.ctx.save(); + ds.ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; + labelProbe = Math.ceil(ds.ctx.measureText('000000.00').width) + 18; + ds.ctx.restore(); + } + var gutter = Math.max(52, Math.min(96, labelProbe)); + if (placement === 'Left') { + viewport.left = gutter; + viewport.right = width; + } else { + viewport.left = 0; + viewport.right = Math.max(0, width - gutter); + } + } + + viewport.width = Math.max(0, viewport.right - viewport.left); + return viewport; +} + +// Fibonacci settings (resolved from CSS variables) +var _FIB_LEVELS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1]; +function _getFibColors() { + var colors = []; + for (var i = 0; i < 7; i++) { + colors.push(_cssVar('--pywry-fib-color-' + i)); + } + return colors; +} + +// ---- SVG icon templates for drawing toolbar ---- +var _DT_ICONS = { + pencil: '', + bucket: '', + text: '', + border: '', + lineW: '', + settings: '', + lock: '', + unlock: '', + trash: '', + clone: '', + eye: '', + eyeOff: '', + more: '', +}; + +// ---- Ensure drawing layer ---- +function _tvEnsureDrawingLayer(chartId) { + if (window.__PYWRY_DRAWINGS__[chartId]) return window.__PYWRY_DRAWINGS__[chartId]; + + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry || !entry.container) return null; + + var container = entry.container; + var pos = window.getComputedStyle(container).position; + if (pos === 'static') container.style.position = 'relative'; + + var canvas = document.createElement('canvas'); + canvas.className = 'pywry-drawing-overlay'; + canvas.style.cssText = + 'position:absolute;top:0;left:0;width:100%;height:100%;' + + 'pointer-events:none;z-index:5;'; + container.appendChild(canvas); + + // UI overlay div (sits above canvas, for floating toolbar / menus) + var uiLayer = document.createElement('div'); + uiLayer.className = 'pywry-draw-ui-layer'; + uiLayer.style.cssText = + 'position:absolute;top:0;left:0;width:100%;height:100%;' + + 'pointer-events:none;z-index:10;overflow:visible;'; + container.appendChild(uiLayer); + + var ctx = canvas.getContext('2d'); + var state = { + canvas: canvas, + ctx: ctx, + uiLayer: uiLayer, + chartId: chartId, + drawings: [], + priceLines: [], + _activeTool: 'cursor', + }; + window.__PYWRY_DRAWINGS__[chartId] = state; + _tvApplyDrawingInteractionMode(state); + + function resize() { + var rect = container.getBoundingClientRect(); + var dpr = window.devicePixelRatio || 1; + canvas.width = rect.width * dpr; + canvas.height = rect.height * dpr; + ctx.setTransform(dpr, 0, 0, dpr, 0, 0); + _tvRenderDrawings(chartId); + } + if (typeof ResizeObserver !== 'undefined') { + new ResizeObserver(resize).observe(container); + } + resize(); + + entry.chart.timeScale().subscribeVisibleLogicalRangeChange(function() { + _tvRenderDrawings(chartId); + _tvRepositionToolbar(chartId); + }); + + _tvEnableDrawing(chartId); + return state; +} + +// ---- Coordinate helpers ---- +function _tvMainSeries(chartId) { + var e = window.__PYWRY_TVCHARTS__[chartId]; + if (!e) return null; + var k = Object.keys(e.seriesMap)[0]; + return k ? e.seriesMap[k] : null; +} + +function _tvResolveChartId(chartId) { + if (chartId && window.__PYWRY_TVCHARTS__[chartId]) return chartId; + var keys = Object.keys(window.__PYWRY_TVCHARTS__); + return keys.length ? keys[0] : null; +} + +function _tvResolveChartEntry(chartId) { + var resolvedId = _tvResolveChartId(chartId); + if (!resolvedId) return null; + return { + chartId: resolvedId, + entry: window.__PYWRY_TVCHARTS__[resolvedId], + }; +} + +function _tvIsUiScopeNode(node) { + if (!node || !node.classList) return false; + return ( + node.classList.contains('pywry-widget') || + node.classList.contains('pywry-content') || + node.classList.contains('pywry-wrapper-inside') || + node.classList.contains('pywry-wrapper-top') || + node.classList.contains('pywry-body-scroll') || + node.classList.contains('pywry-wrapper-left') || + node.classList.contains('pywry-wrapper-header') + ); +} + +function _tvResolveUiRootFromElement(element) { + if (!element || !element.closest) return document; + var root = element.closest('.pywry-content, .pywry-widget') || element; + while (root && root.parentElement && _tvIsUiScopeNode(root.parentElement)) { + root = root.parentElement; + } + return root || document; +} + +function _tvResolveUiRoot(chartId) { + var resolved = _tvResolveChartEntry(chartId); + var entry = resolved ? resolved.entry : null; + if (!entry) return document; + if (entry.uiRoot) return entry.uiRoot; + if (entry.container) { + entry.uiRoot = _tvResolveUiRootFromElement(entry.container); + return entry.uiRoot; + } + return document; +} + +function _tvResolveChartIdFromElement(element) { + var root = _tvResolveUiRootFromElement(element); + var ids = Object.keys(window.__PYWRY_TVCHARTS__ || {}); + for (var i = 0; i < ids.length; i++) { + if (_tvResolveUiRoot(ids[i]) === root) { + return ids[i]; + } + } + return _tvResolveChartId(null); +} + +function _tvScopedQuery(scopeOrChartId, selector) { + var scope = scopeOrChartId; + if (!scope || typeof scope === 'string') { + scope = _tvResolveUiRoot(scopeOrChartId); + } + if (scope && typeof scope.querySelector === 'function') { + var scopedNode = scope.querySelector(selector); + if (scopedNode) return scopedNode; + } + return document.querySelector(selector); +} + +function _tvScopedQueryAll(scopeOrChartId, selector) { + var scope = scopeOrChartId; + if (!scope || typeof scope === 'string') { + scope = _tvResolveUiRoot(scopeOrChartId); + } + if (scope && typeof scope.querySelectorAll === 'function') { + return scope.querySelectorAll(selector); + } + return document.querySelectorAll(selector); +} + +function _tvScopedById(scopeOrChartId, id) { + return _tvScopedQuery(scopeOrChartId, '[id="' + id + '"]'); +} + +function _tvSetLegendVisible(visible, chartId) { + if (!chartId) { + var chartIds = Object.keys(window.__PYWRY_TVCHARTS__ || {}); + if (chartIds.length) { + for (var i = 0; i < chartIds.length; i++) { + _tvSetLegendVisible(visible, chartIds[i]); + } + return; + } + } + var legend = _tvScopedById(chartId, 'tvchart-legend-box'); + if (!legend) return; + legend.style.opacity = visible ? '1' : '0'; +} + +function _tvRefreshLegendVisibility(chartId) { + if (!chartId) { + var chartIds = Object.keys(window.__PYWRY_TVCHARTS__ || {}); + if (chartIds.length) { + for (var i = 0; i < chartIds.length; i++) { + _tvRefreshLegendVisibility(chartIds[i]); + } + return; + } + } + var root = _tvResolveUiRoot(chartId); + var menuOpen = !!_tvScopedQuery( + root, + '.tvchart-save-menu.open, .tvchart-chart-type-menu.open, .tvchart-interval-menu.open' + ); + _tvSetLegendVisible(!menuOpen, chartId); +} + +function _tvRefreshLegendTitle(chartId) { + var resolved = _tvResolveChartEntry(chartId); + var entry = resolved ? resolved.entry : null; + var effectiveChartId = resolved ? resolved.chartId : chartId; + if (!entry) return; + + var titleEl = _tvScopedById(effectiveChartId, 'tvchart-legend-title'); + if (!titleEl) return; + var legendBox = _tvScopedById(effectiveChartId, 'tvchart-legend-box'); + var ds = legendBox ? legendBox.dataset : null; + + var base = ds && ds.baseTitle ? String(ds.baseTitle) : ''; + if (!base && entry.payload && entry.payload.useDatafeed && entry.payload.series && entry.payload.series[0] && entry.payload.series[0].symbol) { + base = String(entry.payload.series[0].symbol); + } + if (!base && entry.payload && entry.payload.title) { + base = String(entry.payload.title); + } + if (!base && entry.payload && entry.payload.series && entry.payload.series[0] && entry.payload.series[0].seriesId) { + var sid = String(entry.payload.series[0].seriesId); + if (sid && sid !== 'main') base = sid; + } + + if (ds && ds.showTitle === '0') { + base = ''; + } + // Description mode replaces the base title with resolved symbol info + if (ds && ds.description && ds.description !== 'Off') { + var descMode = ds.description; + var symInfo = (entry && entry._resolvedSymbolInfo && entry._resolvedSymbolInfo.main) + || (entry && entry._mainSymbolInfo) || {}; + var ticker = String(symInfo.ticker || symInfo.displaySymbol || symInfo.symbol || base || '').trim(); + var descText = String(symInfo.description || symInfo.fullName || '').trim(); + if (descMode === 'Description' && descText) { + base = descText; + } else if (descMode === 'Ticker and description') { + base = (ticker && descText) ? (ticker + ' · ' + descText) : (ticker || descText || base); + } + // 'Ticker' mode keeps base as-is + } + if (ds && base) { + var intervalText = ds.interval || ''; + // If no explicit interval set, read from toolbar label + if (!intervalText) { + var intervalLabel = _tvScopedById(effectiveChartId, 'tvchart-interval-label'); + if (intervalLabel) intervalText = (intervalLabel.textContent || '').trim(); + } + if (intervalText) { + base = base + ' · ' + intervalText; + } + } + + titleEl.textContent = base; + titleEl.style.display = base ? 'inline-flex' : 'none'; +} + +function _tvEmitLegendRefresh(chartId) { + try { + if (typeof window.CustomEvent === 'function') { + window.dispatchEvent(new CustomEvent('pywry:legend-refresh', { + detail: { chartId: chartId }, + })); + } + } catch (e) {} +} + +function _tvLegendFormat(v) { + if (v == null) return '--'; + return Number(v).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }); +} + +function _tvLegendFormatVol(v) { + if (v == null) return ''; + if (v >= 1e9) return (v / 1e9).toFixed(2) + ' B'; + if (v >= 1e6) return (v / 1e6).toFixed(2) + ' M'; + if (v >= 1e3) return (v / 1e3).toFixed(2) + ' K'; + return Number(v).toFixed(0); +} + +function _tvLegendColorize(val, ref) { + var cs = getComputedStyle(document.documentElement); + var _up = cs.getPropertyValue('--pywry-tvchart-up').trim() || '#089981'; + var _dn = cs.getPropertyValue('--pywry-tvchart-down').trim() || '#f23645'; + var _mt = cs.getPropertyValue('--pywry-tvchart-text-muted').trim() || '#aeb4c2'; + if (val == null || ref == null) return _mt; + return val >= ref ? _up : _dn; +} + +function _tvLegendDataset(chartId) { + var legendBox = _tvScopedById(chartId, 'tvchart-legend-box'); + return legendBox ? legendBox.dataset : null; +} + +function _tvLegendNormalizeTimeValue(value) { + if (value == null) return null; + if (typeof value === 'number') return value; + if (typeof value === 'string') { + var parsed = Date.parse(value); + return isFinite(parsed) ? Math.floor(parsed / 1000) : value; + } + if (typeof value === 'object') { + if (typeof value.timestamp === 'number') return value.timestamp; + if (typeof value.year === 'number' && typeof value.month === 'number' && typeof value.day === 'number') { + return Date.UTC(value.year, value.month - 1, value.day) / 1000; + } + } + return null; +} + +function _tvLegendMainKey(entry) { + var keys = Object.keys((entry && entry.seriesMap) || {}); + return keys.indexOf('main') >= 0 ? 'main' : (keys[0] || null); +} + +function _tvLegendResolvePoint(entry, seriesId, seriesApi, param) { + var direct = (param && param.seriesData && seriesApi) ? param.seriesData.get(seriesApi) : null; + if (direct) return direct; + + var rows = entry && entry._seriesRawData ? entry._seriesRawData[seriesId] : null; + if (!rows || !rows.length) return null; + if (!param || param.time == null) return rows[rows.length - 1] || null; + + var target = _tvLegendNormalizeTimeValue(param.time); + if (target == null) return rows[rows.length - 1] || null; + + var best = null; + var bestTime = null; + for (var idx = 0; idx < rows.length; idx++) { + var row = rows[idx]; + var rowTime = _tvLegendNormalizeTimeValue(row && row.time); + if (rowTime == null) continue; + if (rowTime === target) return row; + if (rowTime <= target) { + best = row; + bestTime = rowTime; + continue; + } + if (bestTime == null) return row; + return best; + } + return best || rows[rows.length - 1] || null; +} + +function _tvLegendSeriesLabel(entry, seriesId) { + var sid = String(seriesId || 'main'); + if (sid === 'main') { + var ds = _tvLegendDataset(entry && entry.chartId ? entry.chartId : null) || {}; + var base = ds.baseTitle ? String(ds.baseTitle) : ''; + if (!base && entry && entry.payload && entry.payload.title) base = String(entry.payload.title); + return base || 'Main'; + } + if (entry && entry._compareLabels && entry._compareLabels[sid]) return String(entry._compareLabels[sid]); + if (entry && entry._compareSymbolInfo && entry._compareSymbolInfo[sid]) { + var info = entry._compareSymbolInfo[sid] || {}; + var display = String(info.displaySymbol || info.ticker || '').trim(); + if (display) return display.toUpperCase(); + var full = String(info.fullName || '').trim(); + if (full) return full; + var rawInfoSymbol = String(info.symbol || '').trim(); + if (rawInfoSymbol) { + return rawInfoSymbol.indexOf(':') >= 0 ? rawInfoSymbol.split(':').pop().trim().toUpperCase() : rawInfoSymbol.toUpperCase(); + } + } + if (entry && entry._compareSymbols && entry._compareSymbols[sid]) { + var raw = String(entry._compareSymbols[sid]); + return raw.indexOf(':') >= 0 ? raw.split(':').pop().trim().toUpperCase() : raw.toUpperCase(); + } + return sid; +} + +function _tvLegendSeriesColor(entry, seriesId, dataPoint, ds) { + var sid = String(seriesId || 'main'); + if (entry && entry._legendSeriesColors && entry._legendSeriesColors[sid]) { + return String(entry._legendSeriesColors[sid]); + } + if (dataPoint && dataPoint.open !== undefined) { + return _tvLegendColorize(dataPoint.close, dataPoint.open); + } + return (ds && ds.lineColor) ? ds.lineColor : (getComputedStyle(document.documentElement).getPropertyValue('--pywry-tvchart-session-breaks').trim() || '#4c87ff'); +} + +function _tvRenderLegendSeriesRows(chartId, entry, param) { + var seriesEl = _tvScopedById(chartId, 'tvchart-legend-series'); + if (!seriesEl || !entry) return; + + var ds = _tvLegendDataset(chartId) || {}; + var currentMainKey = _tvLegendMainKey(entry); + var keys = Object.keys(entry.seriesMap || {}); + var existing = {}; + var existingRows = seriesEl.querySelectorAll('.tvchart-legend-series-row'); + for (var ri = 0; ri < existingRows.length; ri++) { + var existingId = existingRows[ri].getAttribute('data-series-id') || ''; + if (existingId) existing[existingId] = existingRows[ri]; + } + + var activeCount = 0; + for (var i = 0; i < keys.length; i++) { + var sid = keys[i]; + if (String(sid) === String(currentMainKey) || String(sid) === 'volume' || String(sid).indexOf('ind_') === 0) continue; + if (entry._indicatorSourceSeries && entry._indicatorSourceSeries[sid]) continue; + var sApi = entry.seriesMap[sid]; + if (!sApi) continue; + + var d = _tvLegendResolvePoint(entry, sid, sApi, param); + var value = null; + if (d && d.open !== undefined) value = Number(d.close); + else if (d && d.value !== undefined) value = Number(d.value); + + var row = existing[sid] || document.createElement('div'); + if (!existing[sid]) { + row.className = 'tvchart-legend-row tvchart-legend-series-row'; + row.setAttribute('data-series-id', sid); + row.innerHTML = + '' + + '' + + '' + + ''; + seriesEl.appendChild(row); + } + delete existing[sid]; + activeCount += 1; + + var dot = row.querySelector('.tvchart-legend-series-dot'); + var name = row.querySelector('.tvchart-legend-series-name'); + var valueEl = row.querySelector('.tvchart-legend-series-value'); + var color = _tvLegendSeriesColor(entry, sid, d, ds); + if (dot) dot.style.background = color; + if (name) name.textContent = _tvLegendSeriesLabel(entry, sid); + if (valueEl) { + valueEl.textContent = value == null ? '--' : _tvLegendFormat(value); + valueEl.style.color = color; + } + } + + var obsoleteIds = Object.keys(existing); + for (var oi = 0; oi < obsoleteIds.length; oi++) { + var obsoleteRow = existing[obsoleteIds[oi]]; + if (obsoleteRow && obsoleteRow.parentNode) obsoleteRow.parentNode.removeChild(obsoleteRow); + } + seriesEl.style.display = activeCount ? 'block' : 'none'; +} + +function _tvRenderHoverLegend(chartId, param) { + var resolved = _tvResolveChartEntry(chartId); + var entry = resolved ? resolved.entry : null; + var effectiveChartId = resolved ? resolved.chartId : chartId; + if (!entry) return; + + var titleEl = _tvScopedById(effectiveChartId, 'tvchart-legend-title'); + var ohlcEl = _tvScopedById(effectiveChartId, 'tvchart-legend-ohlc'); + var mainRowEl = _tvScopedById(effectiveChartId, 'tvchart-legend-main-row'); + if (!titleEl || !ohlcEl) return; + + var ds = _tvLegendDataset(effectiveChartId) || {}; + _tvRefreshLegendTitle(effectiveChartId); + + var mainKey = _tvLegendMainKey(entry); + var mainSeries = entry.seriesMap ? entry.seriesMap[mainKey] : null; + var d = _tvLegendResolvePoint(entry, mainKey, mainSeries, param); + var legendMainHtml = ''; + var highLowMode = ds.highLowMode || 'Hidden'; + var _csHL = getComputedStyle(document.documentElement); + var highLowColor = ds.highLowColor || (_csHL.getPropertyValue('--pywry-tvchart-down').trim() || '#f23645'); + var lineColor = ds.lineColor || (_csHL.getPropertyValue('--pywry-tvchart-up').trim() || '#089981'); + var symbolMode = ds.symbolMode || 'Value, line'; + + if (d && d.open !== undefined) { + var chg = Number(d.close) - Number(d.open); + var chgPct = Number(d.open) !== 0 ? ((chg / Number(d.open)) * 100) : 0; + var clr = _tvLegendColorize(d.close, d.open); + var parts = []; + if (symbolMode !== 'Line only') { + parts.push('O ' + _tvLegendFormat(d.open) + ''); + if (highLowMode !== 'Hidden') { + parts.push('H ' + _tvLegendFormat(d.high) + ''); + parts.push('L ' + _tvLegendFormat(d.low) + ''); + } + parts.push('C ' + _tvLegendFormat(d.close) + ''); + } else { + parts.push('—'); + } + parts.push('' + (chg >= 0 ? '+' : '') + _tvLegendFormat(chg) + ' (' + (chg >= 0 ? '+' : '') + chgPct.toFixed(2) + '%)'); + legendMainHtml = parts.join(' '); + } else if (d && d.value !== undefined) { + legendMainHtml = symbolMode === 'Line only' + ? '—' + : '' + _tvLegendFormat(d.value) + ''; + } + + ohlcEl.innerHTML = legendMainHtml; + if (mainRowEl) { + var showMainRow = !!(titleEl.textContent || ohlcEl.textContent || ohlcEl.innerHTML); + mainRowEl.style.display = showMainRow ? 'flex' : 'none'; + } + + // Volume content and vol row visibility are managed by + // _tvSetupLegendControls (11-legend.js) — do not touch volEl / volRowEl + // here to avoid conflicting display changes. + + _tvRenderLegendSeriesRows(effectiveChartId, entry, param); +} + diff --git a/pywry/pywry/frontend/src/tvchart/07-drawing/03-utils.js b/pywry/pywry/frontend/src/tvchart/07-drawing/03-utils.js new file mode 100644 index 0000000..335c05f --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/07-drawing/03-utils.js @@ -0,0 +1,186 @@ +function _tvClamp(v, min, max) { + if (v < min) return min; + if (v > max) return max; + return v; +} + +function _tvToNumber(v, fallback) { + var n = Number(v); + return isFinite(n) ? n : fallback; +} + +function _tvColorToHex(color, fallback) { + if (!color || typeof color !== 'string') return fallback || '#aeb4c2'; + var c = color.trim(); + if (/^#[0-9a-f]{6}$/i.test(c)) return c; + if (/^#[0-9a-f]{3}$/i.test(c)) { + return '#' + c[1] + c[1] + c[2] + c[2] + c[3] + c[3]; + } + var m = c.match(/rgba?\s*\(([^)]+)\)/i); + if (!m) return fallback || '#aeb4c2'; + var parts = m[1].split(','); + if (parts.length < 3) return fallback || '#aeb4c2'; + var r = _tvClamp(Math.round(_tvToNumber(parts[0], 0)), 0, 255); + var g = _tvClamp(Math.round(_tvToNumber(parts[1], 0)), 0, 255); + var b = _tvClamp(Math.round(_tvToNumber(parts[2], 0)), 0, 255); + var hex = '#'; + var vals = [r, g, b]; + for (var i = 0; i < vals.length; i++) { + var h = vals[i].toString(16); + if (h.length < 2) h = '0' + h; + hex += h; + } + return hex; +} + +function _tvColorOpacityPercent(color, fallback) { + if (!color || typeof color !== 'string') return fallback != null ? fallback : 100; + var m = color.trim().match(/rgba\s*\(([^)]+)\)/i); + if (!m) return fallback != null ? fallback : 100; + var parts = m[1].split(','); + if (parts.length < 4) return fallback != null ? fallback : 100; + var alpha = _tvClamp(_tvToNumber(parts[3], 1), 0, 1); + return Math.round(alpha * 100); +} + +function _tvColorWithOpacity(color, opacityPercent, fallback) { + var baseHex = _tvColorToHex(color, fallback || '#aeb4c2'); + var rgb = _hexToRgb(baseHex); + var alpha = _tvClamp(_tvToNumber(opacityPercent, 100), 0, 100) / 100; + return 'rgba(' + rgb[0] + ', ' + rgb[1] + ', ' + rgb[2] + ', ' + alpha.toFixed(2) + ')'; +} + +function _tvHexToRgba(color, alpha) { + var hex = _tvColorToHex(color, '#aeb4c2'); + var rgb = _hexToRgb(hex); + var a = typeof alpha === 'number' ? alpha : 1; + return 'rgba(' + rgb[0] + ', ' + rgb[1] + ', ' + rgb[2] + ', ' + a.toFixed(2) + ')'; +} + +function _tvLineStyleFromName(name) { + if (name === 'Dashed') return 2; + if (name === 'Dotted') return 1; + return 0; +} + +function _tvGetMainSeries(entry) { + if (!entry || !entry.seriesMap) return null; + var keys = Object.keys(entry.seriesMap); + if (!keys.length) return null; + return entry.seriesMap[keys[0]]; +} + +function _tvBuildCurrentSettings(entry) { + var mainSeries = _tvGetMainSeries(entry); + var mainOpts = {}; + try { + if (mainSeries && typeof mainSeries.options === 'function') { + mainOpts = mainSeries.options() || {}; + } + } catch (e) { + mainOpts = {}; + } + + var prefs = entry && entry._chartPrefs ? entry._chartPrefs : {}; + var intervalEl = _tvScopedById(entry && entry.chartId ? entry.chartId : null, 'tvchart-interval-label'); + var hasVolume = !!(entry && entry.volumeMap && entry.volumeMap.main); + // In datafeed mode, volume loads asynchronously — default to true + if (!hasVolume && entry && entry.payload && entry.payload.useDatafeed) { + hasVolume = true; + } + var palette = TVCHART_THEMES._get((entry && entry.theme) || _tvDetectTheme()); + + return { + 'Color bars based on previous close': !!prefs.colorBarsBasedOnPrevClose, + 'Body': prefs.bodyVisible !== false, + 'Body-Up Color': prefs.bodyUpColor || mainOpts.upColor || palette.upColor, + 'Body-Down Color': prefs.bodyDownColor || mainOpts.downColor || palette.downColor, + 'Body-Up Color-Opacity': prefs.bodyUpOpacity != null ? String(prefs.bodyUpOpacity) : String(_tvColorOpacityPercent(mainOpts.upColor || palette.upColor, prefs.bodyOpacity != null ? prefs.bodyOpacity : 100)), + 'Body-Down Color-Opacity': prefs.bodyDownOpacity != null ? String(prefs.bodyDownOpacity) : String(_tvColorOpacityPercent(mainOpts.downColor || palette.downColor, prefs.bodyOpacity != null ? prefs.bodyOpacity : 100)), + 'Body-Opacity': prefs.bodyOpacity != null ? String(prefs.bodyOpacity) : String(_tvColorOpacityPercent(mainOpts.upColor || palette.upColor, 100)), + 'Borders': prefs.bordersVisible !== false, + 'Borders-Up Color': prefs.borderUpColor || mainOpts.borderUpColor || palette.borderUpColor, + 'Borders-Down Color': prefs.borderDownColor || mainOpts.borderDownColor || palette.borderDownColor, + 'Borders-Up Color-Opacity': prefs.borderUpOpacity != null ? String(prefs.borderUpOpacity) : String(_tvColorOpacityPercent(mainOpts.borderUpColor || palette.borderUpColor, prefs.borderOpacity != null ? prefs.borderOpacity : 100)), + 'Borders-Down Color-Opacity': prefs.borderDownOpacity != null ? String(prefs.borderDownOpacity) : String(_tvColorOpacityPercent(mainOpts.borderDownColor || palette.borderDownColor, prefs.borderOpacity != null ? prefs.borderOpacity : 100)), + 'Borders-Opacity': prefs.borderOpacity != null ? String(prefs.borderOpacity) : String(_tvColorOpacityPercent(mainOpts.borderUpColor || palette.borderUpColor, 100)), + 'Wick': prefs.wickVisible !== false, + 'Wick-Up Color': prefs.wickUpColor || mainOpts.wickUpColor || palette.wickUpColor, + 'Wick-Down Color': prefs.wickDownColor || mainOpts.wickDownColor || palette.wickDownColor, + 'Wick-Up Color-Opacity': prefs.wickUpOpacity != null ? String(prefs.wickUpOpacity) : String(_tvColorOpacityPercent(mainOpts.wickUpColor || palette.wickUpColor, prefs.wickOpacity != null ? prefs.wickOpacity : 100)), + 'Wick-Down Color-Opacity': prefs.wickDownOpacity != null ? String(prefs.wickDownOpacity) : String(_tvColorOpacityPercent(mainOpts.wickDownColor || palette.wickDownColor, prefs.wickOpacity != null ? prefs.wickOpacity : 100)), + 'Wick-Opacity': prefs.wickOpacity != null ? String(prefs.wickOpacity) : String(_tvColorOpacityPercent(mainOpts.wickUpColor || palette.wickUpColor, 100)), + // Bar-specific + 'Bar Up Color': prefs.barUpColor || mainOpts.upColor || palette.upColor, + 'Bar Down Color': prefs.barDownColor || mainOpts.downColor || palette.downColor, + // Area-specific + 'Area Fill Top': prefs.areaFillTop || mainOpts.topColor || 'rgba(38, 166, 154, 0.4)', + 'Area Fill Bottom': prefs.areaFillBottom || mainOpts.bottomColor || 'rgba(38, 166, 154, 0)', + // Baseline-specific + 'Baseline Level': prefs.baselineLevel != null ? String(prefs.baselineLevel) : String((mainOpts.baseValue && mainOpts.baseValue.price) || 0), + 'Baseline Top Line': prefs.baselineTopLine || mainOpts.topLineColor || palette.upColor, + 'Baseline Bottom Line': prefs.baselineBottomLine || mainOpts.bottomLineColor || palette.downColor, + 'Baseline Top Fill 1': prefs.baselineTopFill1 || mainOpts.topFillColor1 || 'rgba(38, 166, 154, 0.28)', + 'Baseline Top Fill 2': prefs.baselineTopFill2 || mainOpts.topFillColor2 || 'rgba(38, 166, 154, 0.05)', + 'Baseline Bottom Fill 1': prefs.baselineBottomFill1 || mainOpts.bottomFillColor1 || 'rgba(239, 83, 80, 0.05)', + 'Baseline Bottom Fill 2': prefs.baselineBottomFill2 || mainOpts.bottomFillColor2 || 'rgba(239, 83, 80, 0.28)', + 'Session': prefs.session || 'Regular trading hours', + 'Precision': prefs.precision || 'Default', + 'Timezone': prefs.timezone || 'UTC', + 'Logo': prefs.showLogo !== undefined ? prefs.showLogo : false, + 'Title': prefs.showTitle !== undefined ? prefs.showTitle : true, + 'Description': prefs.description || 'Description', + 'Chart values': prefs.showChartValues !== undefined ? prefs.showChartValues : true, + 'Bar change values': prefs.showBarChange !== undefined ? prefs.showBarChange : true, + 'Volume': prefs.showVolume !== undefined ? prefs.showVolume : hasVolume, + 'Titles': prefs.showIndicatorTitles !== undefined ? prefs.showIndicatorTitles : true, + 'Inputs': prefs.showIndicatorInputs !== undefined ? prefs.showIndicatorInputs : true, + 'Values': prefs.showIndicatorValues !== undefined ? prefs.showIndicatorValues : true, + 'Background-Enabled': prefs.backgroundEnabled !== false, + 'Background-Opacity': prefs.backgroundOpacity != null ? String(prefs.backgroundOpacity) : '50', + 'Line style': mainOpts.lineStyle === 2 ? 'Dashed' : (mainOpts.lineStyle === 1 ? 'Dotted' : 'Solid'), + 'Line width': String(mainOpts.lineWidth || 1), + 'Line color': mainOpts.color || mainOpts.lineColor || prefs.lineColor || _cssVar('--pywry-tvchart-up', ''), + 'Scale modes (A and L)': prefs.scaleModesVisibility || 'Visible on mouse over', + 'Lock price to bar ratio': !!prefs.lockPriceToBarRatio, + 'Lock price to bar ratio (value)': prefs.lockPriceToBarRatioValue != null ? String(prefs.lockPriceToBarRatioValue) : '0.018734', + 'Scales placement': prefs.scalesPlacement || 'Auto', + 'No overlapping labels': prefs.noOverlappingLabels !== false, + 'Plus button': !!prefs.plusButton, + 'Countdown to bar close': !!prefs.countdownToBarClose, + 'Symbol': prefs.symbolMode || (function() { + var pv = mainOpts.priceLineVisible !== false; + var lv = mainOpts.lastValueVisible !== false; + if (pv && lv) return 'Value, line'; + if (pv && !lv) return 'Line'; + if (!pv && lv) return 'Label'; + return 'Hidden'; + })(), + 'Symbol color': prefs.symbolColor || mainOpts.color || mainOpts.lineColor || _cssVar('--pywry-tvchart-up', ''), + 'Value according to scale': prefs.valueAccordingToScale || 'Value according to scale', + 'Value according to sc...': prefs.valueAccordingToScale || 'Value according to scale', + 'Indicators and financials': prefs.indicatorsAndFinancials || 'Value', + 'High and low': prefs.highAndLow || 'Hidden', + 'High and low color': prefs.highAndLowColor || _cssVar('--pywry-tvchart-down', ''), + 'Day of week on labels': prefs.dayOfWeekOnLabels !== false, + 'Date format': prefs.dateFormat || 'Mon 29 Sep \'97', + 'Time hours format': prefs.timeHoursFormat || '24-hours', + 'Background': 'Solid', + 'Background-Color': prefs.backgroundColor || palette.background, + 'Grid lines': prefs.gridVisible === false ? 'Hidden' : (prefs.gridMode || 'Vert and horz'), + 'Grid-Color': prefs.gridColor || _cssVar('--pywry-tvchart-grid'), + 'Pane-Separators-Color': prefs.paneSeparatorsColor || _cssVar('--pywry-tvchart-grid'), + 'Crosshair-Enabled': prefs.crosshairEnabled === true, + 'Crosshair-Color': prefs.crosshairColor || _cssVar('--pywry-tvchart-crosshair-color'), + 'Watermark': prefs.watermarkVisible ? 'Visible' : 'Hidden', + 'Watermark-Color': prefs.watermarkColor || 'rgba(255,255,255,0.08)', + 'Text-Color': prefs.textColor || _cssVar('--pywry-tvchart-text'), + 'Lines-Color': prefs.linesColor || _cssVar('--pywry-tvchart-grid'), + 'Navigation': prefs.navigation || 'Visible on mouse over', + 'Pane': prefs.pane || 'Visible on mouse over', + 'Margin Top': prefs.marginTop != null ? String(prefs.marginTop) : '10', + 'Margin Bottom': prefs.marginBottom != null ? String(prefs.marginBottom) : '8', + 'Interval': intervalEl ? (intervalEl.textContent || '').trim() : '', + }; +} + diff --git a/pywry/pywry/frontend/src/tvchart/07-drawing/04-settings-apply.js b/pywry/pywry/frontend/src/tvchart/07-drawing/04-settings-apply.js new file mode 100644 index 0000000..59ba723 --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/07-drawing/04-settings-apply.js @@ -0,0 +1,391 @@ +function _tvSetToolbarVisibility(settings, chartId) { + var leftToolbar = _tvScopedQuery(chartId, '.tvchart-left'); + var bottomToolbar = _tvScopedQuery(chartId, '.tvchart-bottom'); + if (leftToolbar) { + leftToolbar.style.display = settings['Navigation'] === 'Hidden' ? 'none' : ''; + } + if (bottomToolbar) { + bottomToolbar.style.display = settings['Pane'] === 'Hidden' ? 'none' : ''; + } + + var autoScaleEl = _tvScopedQuery(chartId, '[data-component-id="tvchart-auto-scale"]'); + var logScaleEl = _tvScopedQuery(chartId, '[data-component-id="tvchart-log-scale"]'); + var pctScaleEl = _tvScopedQuery(chartId, '[data-component-id="tvchart-pct-scale"]'); + var showScaleButtons = settings['Scale modes (A and L)'] !== 'Hidden'; + if (autoScaleEl) autoScaleEl.style.display = showScaleButtons ? '' : 'none'; + if (logScaleEl) logScaleEl.style.display = showScaleButtons ? '' : 'none'; + if (pctScaleEl) pctScaleEl.style.display = showScaleButtons ? '' : 'none'; +} + +function _tvApplySettingsToChart(chartId, entry, settings, opts) { + if (!entry || !entry.chart) return; + opts = opts || {}; + + var chartOptions = {}; + var rightPriceScale = {}; + var leftPriceScale = {}; + var timeScale = {}; + var localization = {}; + + // Canvas: grid visibility + var gridMode = settings['Grid lines'] || 'Vert and horz'; + var gridColor = settings['Grid-Color'] || settings['Lines-Color'] || undefined; + chartOptions.grid = { + vertLines: { + visible: gridMode === 'Vert and horz' || gridMode === 'Vert only', + color: gridColor, + }, + horzLines: { + visible: gridMode === 'Vert and horz' || gridMode === 'Horz only', + color: gridColor, + }, + }; + + // Canvas: background + text + crosshair + var bgOpacity = _tvClamp(_tvToNumber(settings['Background-Opacity'], 50), 0, 100) / 100; + var bgEnabled = settings['Background-Enabled'] !== false; + var _bgPalette = TVCHART_THEMES._get((entry && entry.theme) || _tvDetectTheme()); + var bgColor = settings['Background-Color'] || _bgPalette.background; + // Apply opacity to background color + var bgHex = _tvColorToHex(bgColor, _bgPalette.background); + var bgFinal = bgEnabled ? _tvColorWithOpacity(bgHex, bgOpacity * 100, bgHex) : 'transparent'; + chartOptions.layout = { + attributionLogo: false, + textColor: settings['Text-Color'] || undefined, + background: { + type: 'solid', + color: bgFinal, + }, + }; + + var _chEn = settings['Crosshair-Enabled'] === true; + chartOptions.crosshair = { + mode: LightweightCharts.CrosshairMode.Normal, + vertLine: { + color: settings['Crosshair-Color'] || undefined, + visible: _chEn, + labelVisible: true, + style: 2, + width: 1, + }, + horzLine: { + color: settings['Crosshair-Color'] || undefined, + visible: _chEn, + labelVisible: _chEn, + style: 2, + width: 1, + }, + }; + + // Status/scales — apply same config to both sides + var scaleAutoScale = settings['Auto Scale'] !== false; + var scaleMode = settings['Log scale'] === true ? 1 : 0; + var scaleAlignLabels = settings['No overlapping labels'] !== false; + var scaleTextColor = settings['Text-Color'] || undefined; + var scaleBorderColor = settings['Lines-Color'] || undefined; + + rightPriceScale.autoScale = scaleAutoScale; + rightPriceScale.mode = scaleMode; + rightPriceScale.alignLabels = scaleAlignLabels; + rightPriceScale.textColor = scaleTextColor; + rightPriceScale.borderColor = scaleBorderColor; + + leftPriceScale.autoScale = scaleAutoScale; + leftPriceScale.mode = scaleMode; + leftPriceScale.alignLabels = scaleAlignLabels; + leftPriceScale.textColor = scaleTextColor; + leftPriceScale.borderColor = scaleBorderColor; + + var topMargin = _tvClamp(_tvToNumber(settings['Margin Top'], 10), 0, 90) / 100; + var bottomMargin = _tvClamp(_tvToNumber(settings['Margin Bottom'], 8), 0, 90) / 100; + if (entry.volumeMap && entry.volumeMap.main) { + bottomMargin = Math.max(bottomMargin, 0.14); + } + rightPriceScale.scaleMargins = { top: topMargin, bottom: bottomMargin }; + leftPriceScale.scaleMargins = { top: topMargin, bottom: bottomMargin }; + + if (settings['Lock price to bar ratio']) { + var ratio = _tvClamp(_tvToNumber(settings['Lock price to bar ratio (value)'], 0.018734), 0.001, 0.95); + var lockedMargins = { + top: _tvClamp(ratio, 0.0, 0.9), + bottom: _tvClamp(1 - ratio - 0.05, 0.0, 0.9), + }; + rightPriceScale.autoScale = false; + rightPriceScale.scaleMargins = lockedMargins; + leftPriceScale.autoScale = false; + leftPriceScale.scaleMargins = lockedMargins; + } + + var placement = settings['Scales placement'] || 'Auto'; + if (placement === 'Left') { + leftPriceScale.visible = true; + rightPriceScale.visible = false; + } else if (placement === 'Right') { + leftPriceScale.visible = false; + rightPriceScale.visible = true; + } else { + leftPriceScale.visible = false; + rightPriceScale.visible = true; + } + + timeScale.borderColor = settings['Lines-Color'] || undefined; + timeScale.secondsVisible = false; + // Daily+ charts should never show time on the x-axis + var _resIsDaily = (function() { + var r = entry._currentResolution || ''; + return /^[1-9]?[DWM]$/.test(r) || /^\d+[DWM]$/.test(r); + })(); + + // Skip timeVisible and localization overrides when the datafeed already + // set timezone-aware formatters (deferred re-apply after series creation). + if (!opts.skipLocalization) { + timeScale.timeVisible = !_resIsDaily; + + var showDOW = settings['Day of week on labels'] !== false; + var use24h = (settings['Time hours format'] || '24-hours') === '24-hours'; + var dateFmt = settings['Date format'] || 'Mon 29 Sep \'97'; + var useUTC = (settings['Timezone'] || 'UTC') === 'UTC'; + localization.timeFormatter = function(t) { + var d; + if (typeof t === 'number') { + d = new Date(t * 1000); + } else if (t && typeof t.year === 'number') { + d = useUTC + ? new Date(Date.UTC(t.year, (t.month || 1) - 1, t.day || 1)) + : new Date(t.year, (t.month || 1) - 1, t.day || 1); + } else { + return ''; + } + var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; + var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + var month = useUTC ? d.getUTCMonth() : d.getMonth(); + var day = useUTC ? d.getUTCDate() : d.getDate(); + var year = useUTC ? d.getUTCFullYear() : d.getFullYear(); + var hour = useUTC ? d.getUTCHours() : d.getHours(); + var minute = useUTC ? d.getUTCMinutes() : d.getMinutes(); + var weekDay = useUTC ? d.getUTCDay() : d.getDay(); + var mm = String(month + 1); + var dd = String(day); + var yyyy = String(year); + var yy = yyyy.slice(-2); + var hours = use24h ? hour : ((hour % 12) || 12); + var mins = String(minute).padStart(2, '0'); + var ampm = hour >= 12 ? ' PM' : ' AM'; + var time = use24h ? String(hours).padStart(2, '0') + ':' + mins : String(hours) + ':' + mins + ampm; + var datePart; + if (dateFmt === 'MM/DD/YY') { + datePart = mm.padStart(2, '0') + '/' + dd.padStart(2, '0') + '/' + yy; + } else if (dateFmt === 'DD/MM/YY') { + datePart = dd.padStart(2, '0') + '/' + mm.padStart(2, '0') + '/' + yy; + } else { + datePart = dd.padStart(2, '0') + ' ' + monthNames[month] + " '" + yy; + } + if (_resIsDaily) { + return (showDOW ? (days[weekDay] + ' ') : '') + datePart; + } + return (showDOW ? (days[weekDay] + ' ') : '') + datePart + ' ' + time; + }; + } // end skipLocalization guard + chartOptions.rightPriceScale = rightPriceScale; + chartOptions.leftPriceScale = leftPriceScale; + chartOptions.timeScale = timeScale; + chartOptions.localization = localization; + chartOptions = _tvMerge(chartOptions, _tvInteractiveNavigationOptions()); + + // Watermark + var wmColor = settings['Watermark-Color'] || 'rgba(255,255,255,0.08)'; + chartOptions.watermark = { + visible: settings['Watermark'] === 'Visible', + text: settings['Title'] === false ? '' : 'OHLCV Demo', + color: wmColor, + fontSize: 24, + }; + + entry.chart.applyOptions(chartOptions); + _tvEnsureInteractiveNavigation(entry); + _tvApplyHoverReadoutMode(entry); + + // Move main series to the correct price scale side + var targetScaleId = placement === 'Left' ? 'left' : 'right'; + var mainSeries = _tvGetMainSeries(entry); + if (mainSeries) { + try { mainSeries.applyOptions({ priceScaleId: targetScaleId }); } catch (e) {} + } + + _tvApplyCustomScaleSide(entry, targetScaleId, { + alignLabels: settings['No overlapping labels'] !== false, + textColor: settings['Text-Color'] || undefined, + borderColor: settings['Lines-Color'] || undefined, + }); + + // Apply main-series options (price labels and line from Symbol mode) + if (!mainSeries) mainSeries = _tvGetMainSeries(entry); + if (mainSeries) { + var stype = _tvGuessSeriesType(mainSeries); + var lineColor = settings['Line color'] || settings['Symbol color'] || undefined; + var lw = _tvClamp(_tvToNumber(settings['Line width'], 1), 1, 4); + var ls = _tvLineStyleFromName(settings['Line style']); + // Derive price line/label visibility from Symbol dropdown (Scales & Lines tab) + var symbolMode = settings['Symbol'] || 'Value, line'; + var showPriceLabel = symbolMode === 'Value, line' || symbolMode === 'Label'; + var showPriceLine = symbolMode === 'Value, line' || symbolMode === 'Line'; + var symbolColor = settings['Symbol color'] || _cssVar('--pywry-tvchart-up', '#26a69a'); + var sOpts = { + lastValueVisible: showPriceLabel, + priceLineVisible: showPriceLine, + priceLineColor: symbolColor, + }; + if (stype === 'Line' || stype === 'Area' || stype === 'Baseline' || stype === 'Histogram') { + sOpts.lineStyle = ls; + sOpts.lineWidth = lw; + sOpts.color = lineColor; + sOpts.lineColor = lineColor; + } + if (stype === 'Area') { + if (settings['Area Fill Top']) sOpts.topColor = settings['Area Fill Top']; + if (settings['Area Fill Bottom']) sOpts.bottomColor = settings['Area Fill Bottom']; + } + if (stype === 'Baseline') { + var bLevel = _tvToNumber(settings['Baseline Level'], 0); + sOpts.baseValue = { price: bLevel, type: 'price' }; + if (settings['Baseline Top Line']) sOpts.topLineColor = settings['Baseline Top Line']; + if (settings['Baseline Bottom Line']) sOpts.bottomLineColor = settings['Baseline Bottom Line']; + if (settings['Baseline Top Fill 1']) sOpts.topFillColor1 = settings['Baseline Top Fill 1']; + if (settings['Baseline Top Fill 2']) sOpts.topFillColor2 = settings['Baseline Top Fill 2']; + if (settings['Baseline Bottom Fill 1']) sOpts.bottomFillColor1 = settings['Baseline Bottom Fill 1']; + if (settings['Baseline Bottom Fill 2']) sOpts.bottomFillColor2 = settings['Baseline Bottom Fill 2']; + } + if (stype === 'Bar') { + if (settings['Bar Up Color']) sOpts.upColor = settings['Bar Up Color']; + if (settings['Bar Down Color']) sOpts.downColor = settings['Bar Down Color']; + } + if (stype === 'Candlestick' || stype === 'Bar') { + var bodyVisible = settings['Body'] !== false; + var bodyUpOpacity = _tvClamp(_tvToNumber(settings['Body-Up Color-Opacity'], settings['Body-Opacity']), 0, 100); + var bodyDownOpacity = _tvClamp(_tvToNumber(settings['Body-Down Color-Opacity'], settings['Body-Opacity']), 0, 100); + var borderUpOpacity = _tvClamp(_tvToNumber(settings['Borders-Up Color-Opacity'], settings['Borders-Opacity']), 0, 100); + var borderDownOpacity = _tvClamp(_tvToNumber(settings['Borders-Down Color-Opacity'], settings['Borders-Opacity']), 0, 100); + var wickUpOpacity = _tvClamp(_tvToNumber(settings['Wick-Up Color-Opacity'], settings['Wick-Opacity']), 0, 100); + var wickDownOpacity = _tvClamp(_tvToNumber(settings['Wick-Down Color-Opacity'], settings['Wick-Opacity']), 0, 100); + var bodyHidden = _cssVar('--pywry-tvchart-hidden') || 'rgba(0, 0, 0, 0)'; + sOpts.upColor = bodyVisible ? _tvColorWithOpacity(settings['Body-Up Color'], bodyUpOpacity, _cssVar('--pywry-tvchart-up', '#26a69a')) : bodyHidden; + sOpts.downColor = bodyVisible ? _tvColorWithOpacity(settings['Body-Down Color'], bodyDownOpacity, _cssVar('--pywry-tvchart-down', '#ef5350')) : bodyHidden; + sOpts.borderVisible = settings['Borders'] !== false; + sOpts.borderUpColor = _tvColorWithOpacity(settings['Borders-Up Color'], borderUpOpacity, _cssVar('--pywry-tvchart-border-up', '#26a69a')); + sOpts.borderDownColor = _tvColorWithOpacity(settings['Borders-Down Color'], borderDownOpacity, _cssVar('--pywry-tvchart-border-down', '#ef5350')); + sOpts.wickVisible = settings['Wick'] !== false; + sOpts.wickUpColor = _tvColorWithOpacity(settings['Wick-Up Color'], wickUpOpacity, _cssVar('--pywry-tvchart-wick-up', '#26a69a')); + sOpts.wickDownColor = _tvColorWithOpacity(settings['Wick-Down Color'], wickDownOpacity, _cssVar('--pywry-tvchart-wick-down', '#ef5350')); + } + if (settings['Precision'] && settings['Precision'] !== 'Default') { + var minMove = Number(settings['Precision']); + if (isFinite(minMove) && minMove > 0) { + var decimals = String(settings['Precision']).indexOf('.') >= 0 + ? String(settings['Precision']).split('.')[1].length + : 0; + sOpts.priceFormat = { type: 'price', precision: decimals, minMove: minMove }; + } + } + mainSeries.applyOptions(sOpts); + } + + // Volume label visibility in the status line / legend. + // This does NOT create or destroy the volume subplot — it only controls + // whether the "Volume 31.29 M" text appears in the legend header. + // The legend updater reads legendBox.dataset.showVolume below. + + _tvSetToolbarVisibility(settings, chartId); + + // Persist legend and scale behavior flags for the legend updater script. + var legendBox = _tvScopedById(chartId, 'tvchart-legend-box'); + if (legendBox) { + var baseTitle = 'Symbol'; + if (entry.payload && entry.payload.useDatafeed && entry.payload.series && entry.payload.series[0] && entry.payload.series[0].symbol) { + baseTitle = String(entry.payload.series[0].symbol); + } else if (entry.payload && entry.payload.title) { + baseTitle = String(entry.payload.title); + } else if (entry.payload && entry.payload.series && entry.payload.series[0] && entry.payload.series[0].seriesId) { + var sid = String(entry.payload.series[0].seriesId); + if (sid && sid !== 'main') baseTitle = sid; + } + var intervalEl = _tvScopedById(chartId, 'tvchart-interval-label'); + + legendBox.dataset.baseTitle = baseTitle; + legendBox.dataset.interval = intervalEl ? (intervalEl.textContent || '').trim() : ''; + legendBox.dataset.showLogo = settings['Logo'] === false ? '0' : '1'; + legendBox.dataset.showTitle = settings['Title'] === false ? '0' : '1'; + legendBox.dataset.description = settings['Description'] || 'Description'; + legendBox.dataset.showChartValues = settings['Chart values'] === false ? '0' : '1'; + legendBox.dataset.showBarChange = settings['Bar change values'] === false ? '0' : '1'; + legendBox.dataset.showVolume = settings['Volume'] !== false ? '1' : '0'; + legendBox.dataset.showIndicatorTitles = settings['Titles'] === false ? '0' : '1'; + legendBox.dataset.showIndicatorInputs = settings['Inputs'] === false ? '0' : '1'; + legendBox.dataset.showIndicatorValues = settings['Values'] === false ? '0' : '1'; + legendBox.dataset.showStatusValues = settings['Chart values'] === false ? '0' : '1'; + legendBox.dataset.symbolMode = settings['Symbol'] || 'Value, line'; + legendBox.dataset.valueMode = settings['Value according to scale'] || settings['Value according to sc...'] || 'Value according to scale'; + legendBox.dataset.financialsMode = settings['Indicators and financials'] || 'Value'; + legendBox.dataset.highLowMode = settings['High and low'] || 'Hidden'; + legendBox.dataset.symbolColor = settings['Symbol color'] || ''; + legendBox.dataset.highLowColor = settings['High and low color'] || ''; + legendBox.dataset.lineColor = settings['Line color'] || ''; + legendBox.dataset.textColor = settings['Text-Color'] || ''; + } + + // Plus button mock on right scale edge. + var container = entry.container || (entry.chart && entry.chart._container) || null; + if (container) { + var plusId = 'tvchart-plus-button-' + chartId; + var plusEl = document.getElementById(plusId); + if (!plusEl) { + plusEl = document.createElement('div'); + plusEl.id = plusId; + plusEl.className = 'pywry-tvchart-plus-button'; + plusEl.textContent = '+'; + container.appendChild(plusEl); + } + plusEl.style.display = settings['Plus button'] ? 'block' : 'none'; + + var cdId = 'tvchart-countdown-label-' + chartId; + var cdEl = document.getElementById(cdId); + if (!cdEl) { + cdEl = document.createElement('div'); + cdEl.id = cdId; + cdEl.className = 'pywry-tvchart-countdown'; + container.appendChild(cdEl); + } + if (settings['Countdown to bar close']) { + cdEl.style.display = 'block'; + cdEl.textContent = 'CLOSE TIMER'; + } else { + cdEl.style.display = 'none'; + } + } + + // Notify legend to re-render with updated dataset flags + try { + window.dispatchEvent(new CustomEvent('pywry:legend-refresh', { detail: { chartId: chartId } })); + } catch (_e) {} + +} + +function _tvToPixel(chartId, time, price) { + var e = window.__PYWRY_TVCHARTS__[chartId]; + if (!e || !e.chart) return null; + var s = _tvMainSeries(chartId); + var x = e.chart.timeScale().timeToCoordinate(time); + var y = s ? s.priceToCoordinate(price) : null; + if (x === null || y === null) return null; + return { x: x, y: y }; +} + +function _tvFromPixel(chartId, x, y) { + var e = window.__PYWRY_TVCHARTS__[chartId]; + if (!e || !e.chart) return null; + var s = _tvMainSeries(chartId); + var time = e.chart.timeScale().coordinateToTime(x); + var price = s ? s.coordinateToPrice(y) : null; + return { time: time, price: price }; +} + +// ---- Get drawing anchor points in pixel coords ---- diff --git a/pywry/pywry/frontend/src/tvchart/07-drawing/05-hit-test.js b/pywry/pywry/frontend/src/tvchart/07-drawing/05-hit-test.js new file mode 100644 index 0000000..6b54845 --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/07-drawing/05-hit-test.js @@ -0,0 +1,622 @@ +function _tvDrawAnchors(chartId, d) { + var s = _tvMainSeries(chartId); + if (!s) return []; + if (d.type === 'hline') { + var yH = s.priceToCoordinate(d.price); + var viewport = _tvGetDrawingViewport(chartId); + return yH !== null ? [{ key: 'price', x: Math.min(viewport.right - 24, viewport.left + 40), y: yH }] : []; + } + if (d.type === 'vline') { + var vA = _tvToPixel(chartId, d.t1, 0); + return vA ? [{ key: 'p1', x: vA.x, y: vA.y || 40 }] : []; + } + if (d.type === 'crossline') { + var clA = _tvToPixel(chartId, d.t1, d.p1); + return clA ? [{ key: 'p1', x: clA.x, y: clA.y }] : []; + } + if (d.type === 'flat_channel') { + var fcY1 = s.priceToCoordinate(d.p1); + var fcY2 = s.priceToCoordinate(d.p2); + var fcVp = _tvGetDrawingViewport(chartId); + var fcPts = []; + if (fcY1 !== null) fcPts.push({ key: 'p1', x: fcVp.left + 40, y: fcY1 }); + if (fcY2 !== null) fcPts.push({ key: 'p2', x: fcVp.left + 40, y: fcY2 }); + return fcPts; + } + if (d.type === 'brush' || d.type === 'highlighter') { + // No draggable anchors for brush/highlighter strokes + return []; + } + if (d.type === 'path' || d.type === 'polyline') { + // Anchors at each vertex + var mpts = d.points; + var anchors = []; + if (mpts) { + for (var mi = 0; mi < mpts.length; mi++) { + var mpp = _tvToPixel(chartId, mpts[mi].t, mpts[mi].p); + if (mpp) anchors.push({ key: 'pt' + mi, x: mpp.x, y: mpp.y }); + } + } + return anchors; + } + // Single-point tools + var singlePointTools = ['arrow_mark_up', 'arrow_mark_down', 'arrow_mark_left', 'arrow_mark_right', 'anchored_vwap']; + if (singlePointTools.indexOf(d.type) !== -1) { + var sp = _tvToPixel(chartId, d.t1, d.p1); + return sp ? [{ key: 'p1', x: sp.x, y: sp.y }] : []; + } + var pts = []; + if (d.t1 !== undefined) { + var a = _tvToPixel(chartId, d.t1, d.p1); + if (a) pts.push({ key: 'p1', x: a.x, y: a.y }); + } + if (d.t2 !== undefined) { + var b = _tvToPixel(chartId, d.t2, d.p2); + if (b) pts.push({ key: 'p2', x: b.x, y: b.y }); + } + var threePointAnchors = ['fib_extension', 'fib_channel', 'fib_wedge', 'pitchfan', 'fib_time', + 'rotated_rect', 'triangle', 'shape_arc', 'double_curve']; + if (d.t3 !== undefined && threePointAnchors.indexOf(d.type) !== -1) { + var c = _tvToPixel(chartId, d.t3, d.p3); + if (c) pts.push({ key: 'p3', x: c.x, y: c.y }); + } + return pts; +} + +// ---- Hit-testing: find drawing near pixel x,y ---- +function _tvHitTest(chartId, mx, my) { + var ds = window.__PYWRY_DRAWINGS__[chartId]; + if (!ds) return -1; + var viewport = _tvGetDrawingViewport(chartId); + if (mx < viewport.left || mx > viewport.right || my < viewport.top || my > viewport.bottom) return -1; + var THRESH = 8; + // Iterate in reverse so topmost drawing is picked first + for (var i = ds.drawings.length - 1; i >= 0; i--) { + var d = ds.drawings[i]; + if (d.hidden) continue; + if (_tvDrawHit(chartId, d, mx, my, THRESH)) return i; + } + return -1; +} + +function _tvDrawHit(chartId, d, mx, my, T) { + var s = _tvMainSeries(chartId); + if (!s) return false; + var viewport = _tvGetDrawingViewport(chartId); + + if (mx < viewport.left - T || mx > viewport.right + T || my < viewport.top - T || my > viewport.bottom + T) { + return false; + } + + if (d.type === 'hline') { + var yH = s.priceToCoordinate(d.price); + return yH !== null && mx >= viewport.left && mx <= viewport.right && Math.abs(my - yH) < T; + } + if (d.type === 'trendline' || d.type === 'channel' || d.type === 'ray' || d.type === 'extended_line' || d.type === 'regression_channel') { + var a = _tvToPixel(chartId, d.t1, d.p1); + var b = _tvToPixel(chartId, d.t2, d.p2); + if (!a || !b) return false; + // For ray: extend from a through b + if (d.type === 'ray') { + var rdx = b.x - a.x, rdy = b.y - a.y; + var rlen = Math.sqrt(rdx * rdx + rdy * rdy); + if (rlen > 0) { + var bExt = { x: a.x + (rdx / rlen) * 4000, y: a.y + (rdy / rlen) * 4000 }; + if (_distToSeg(mx, my, a.x, a.y, bExt.x, bExt.y) < T) return true; + } + return false; + } + // For extended_line: extend in both directions + if (d.type === 'extended_line') { + var edx = b.x - a.x, edy = b.y - a.y; + var elen = Math.sqrt(edx * edx + edy * edy); + if (elen > 0) { + var aExt = { x: a.x - (edx / elen) * 4000, y: a.y - (edy / elen) * 4000 }; + var bExt2 = { x: b.x + (edx / elen) * 4000, y: b.y + (edy / elen) * 4000 }; + if (_distToSeg(mx, my, aExt.x, aExt.y, bExt2.x, bExt2.y) < T) return true; + } + return false; + } + if (_distToSeg(mx, my, a.x, a.y, b.x, b.y) < T) return true; + if (d.type === 'channel') { + var off = d.offset || 30; + if (_distToSeg(mx, my, a.x, a.y + off, b.x, b.y + off) < T) return true; + // Inside fill + var minY = Math.min(a.y, b.y); + var maxY = Math.max(a.y, b.y) + off; + var minX = Math.min(a.x, b.x); + var maxX = Math.max(a.x, b.x); + if (mx >= minX && mx <= maxX && my >= minY && my <= maxY) return true; + } + if (d.type === 'regression_channel') { + var rcOff = d.offset || 30; + if (_distToSeg(mx, my, a.x, a.y - rcOff, b.x, b.y - rcOff) < T) return true; + if (_distToSeg(mx, my, a.x, a.y + rcOff, b.x, b.y + rcOff) < T) return true; + } + return false; + } + if (d.type === 'hray') { + var hrY = s.priceToCoordinate(d.p1); + var hrA = _tvToPixel(chartId, d.t1, d.p1); + if (hrY === null || !hrA) return false; + // Hit if near the horizontal line from anchor to right edge + if (Math.abs(my - hrY) < T && mx >= hrA.x - T) return true; + return false; + } + if (d.type === 'vline') { + var vA = _tvToPixel(chartId, d.t1, d.p1 || 0); + if (!vA) return false; + if (Math.abs(mx - vA.x) < T) return true; + return false; + } + if (d.type === 'crossline') { + var clA = _tvToPixel(chartId, d.t1, d.p1); + var clY = s.priceToCoordinate(d.p1); + if (!clA || clY === null) return false; + if (Math.abs(mx - clA.x) < T || Math.abs(my - clY) < T) return true; + return false; + } + if (d.type === 'flat_channel') { + var fcY1 = s.priceToCoordinate(d.p1); + var fcY2 = s.priceToCoordinate(d.p2); + if (fcY1 === null || fcY2 === null) return false; + if (Math.abs(my - fcY1) < T || Math.abs(my - fcY2) < T) return true; + var fcMin = Math.min(fcY1, fcY2), fcMax = Math.max(fcY1, fcY2); + if (my >= fcMin && my <= fcMax) return true; + return false; + } + if (d.type === 'brush') { + var bpts = d.points; + if (!bpts || bpts.length < 2) return false; + for (var bi = 0; bi < bpts.length - 1; bi++) { + var bpA = _tvToPixel(chartId, bpts[bi].t, bpts[bi].p); + var bpB = _tvToPixel(chartId, bpts[bi + 1].t, bpts[bi + 1].p); + if (bpA && bpB && _distToSeg(mx, my, bpA.x, bpA.y, bpB.x, bpB.y) < T) return true; + } + return false; + } + if (d.type === 'highlighter') { + var hpts = d.points; + if (!hpts || hpts.length < 2) return false; + for (var hi = 0; hi < hpts.length - 1; hi++) { + var hpA = _tvToPixel(chartId, hpts[hi].t, hpts[hi].p); + var hpB = _tvToPixel(chartId, hpts[hi + 1].t, hpts[hi + 1].p); + if (hpA && hpB && _distToSeg(mx, my, hpA.x, hpA.y, hpB.x, hpB.y) < T + 5) return true; + } + return false; + } + if (d.type === 'path' || d.type === 'polyline') { + var mpts = d.points; + if (!mpts || mpts.length < 2) return false; + for (var mi = 0; mi < mpts.length - 1; mi++) { + var mpA = _tvToPixel(chartId, mpts[mi].t, mpts[mi].p); + var mpB = _tvToPixel(chartId, mpts[mi + 1].t, mpts[mi + 1].p); + if (mpA && mpB && _distToSeg(mx, my, mpA.x, mpA.y, mpB.x, mpB.y) < T) return true; + } + // For path, also check closing segment + if (d.type === 'path' && mpts.length > 2) { + var mpFirst = _tvToPixel(chartId, mpts[0].t, mpts[0].p); + var mpLast = _tvToPixel(chartId, mpts[mpts.length - 1].t, mpts[mpts.length - 1].p); + if (mpFirst && mpLast && _distToSeg(mx, my, mpFirst.x, mpFirst.y, mpLast.x, mpLast.y) < T) return true; + } + return false; + } + if (d.type === 'rect') { + var r1 = _tvToPixel(chartId, d.t1, d.p1); + var r2 = _tvToPixel(chartId, d.t2, d.p2); + if (!r1 || !r2) return false; + var lx = Math.min(r1.x, r2.x); + var ly = Math.min(r1.y, r2.y); + var rx = Math.max(r1.x, r2.x); + var ry = Math.max(r1.y, r2.y); + if (mx >= lx - T && mx <= rx + T && my >= ly - T && my <= ry + T) return true; + return false; + } + if (d.type === 'fibonacci') { + var fT = s.priceToCoordinate(d.p1); + var fB = s.priceToCoordinate(d.p2); + if (fT === null || fB === null) return false; + var minFy = Math.min(fT, fB); + var maxFy = Math.max(fT, fB); + if (my >= minFy - T && my <= maxFy + T) return true; + return false; + } + if (d.type === 'fib_extension') { + var feA = _tvToPixel(chartId, d.t1, d.p1); + var feB = _tvToPixel(chartId, d.t2, d.p2); + if (!feA || !feB) return false; + if (_distToSeg(mx, my, feA.x, feA.y, feB.x, feB.y) < T) return true; + if (d.t3 !== undefined) { + var feC = _tvToPixel(chartId, d.t3, d.p3); + if (feC && _distToSeg(mx, my, feB.x, feB.y, feC.x, feC.y) < T) return true; + // Hit on any visible extension level line + if (feC) { + var abR = d.p2 - d.p1; + var fLvls = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : _FIB_LEVELS.slice(); + for (var fi = 0; fi < fLvls.length; fi++) { + var yy = s.priceToCoordinate(d.p3 + abR * fLvls[fi]); + if (yy !== null && Math.abs(my - yy) < T) return true; + } + } + } + return false; + } + if (d.type === 'fib_channel') { + var fcA = _tvToPixel(chartId, d.t1, d.p1); + var fcB = _tvToPixel(chartId, d.t2, d.p2); + if (!fcA || !fcB) return false; + if (_distToSeg(mx, my, fcA.x, fcA.y, fcB.x, fcB.y) < T) return true; + if (d.t3 !== undefined) { + var fcC = _tvToPixel(chartId, d.t3, d.p3); + if (fcC) { + var abDx = fcB.x - fcA.x, abDy = fcB.y - fcA.y; + var abLen = Math.sqrt(abDx * abDx + abDy * abDy); + if (abLen > 0) { + var cOff = ((fcC.x - fcA.x) * (-abDy / abLen) + (fcC.y - fcA.y) * (abDx / abLen)); + var px = -abDy / abLen, py = abDx / abLen; + if (_distToSeg(mx, my, fcA.x + px * cOff, fcA.y + py * cOff, fcB.x + px * cOff, fcB.y + py * cOff) < T) return true; + } + } + } + return false; + } + if (d.type === 'fib_timezone') { + var ftzA = _tvToPixel(chartId, d.t1, d.p1); + var ftzB = _tvToPixel(chartId, d.t2, d.p2); + if (!ftzA || !ftzB) return false; + if (_distToSeg(mx, my, ftzA.x, ftzA.y, ftzB.x, ftzB.y) < T) return true; + var tDiff = d.t2 - d.t1; + var fibNums = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144]; + for (var fi = 0; fi < fibNums.length; fi++) { + var xPx = _tvToPixel(chartId, d.t1 + tDiff * fibNums[fi], d.p1); + if (xPx && Math.abs(mx - xPx.x) < T) return true; + } + return false; + } + if (d.type === 'fib_fan' || d.type === 'pitchfan') { + var ffA = _tvToPixel(chartId, d.t1, d.p1); + var ffB = _tvToPixel(chartId, d.t2, d.p2); + if (!ffA || !ffB) return false; + if (_distToSeg(mx, my, ffA.x, ffA.y, ffB.x, ffB.y) < T) return true; + if (d.t3 !== undefined) { + var ffC = _tvToPixel(chartId, d.t3, d.p3); + if (ffC && _distToSeg(mx, my, ffA.x, ffA.y, ffC.x, ffC.y) < T) return true; + } + return false; + } + if (d.type === 'fib_arc' || d.type === 'fib_circle') { + var faA = _tvToPixel(chartId, d.t1, d.p1); + var faB = _tvToPixel(chartId, d.t2, d.p2); + if (!faA || !faB) return false; + if (_distToSeg(mx, my, faA.x, faA.y, faB.x, faB.y) < T) return true; + var dist = Math.sqrt(Math.pow(faB.x - faA.x, 2) + Math.pow(faB.y - faA.y, 2)); + var ctrX = d.type === 'fib_circle' ? (faA.x + faB.x) / 2 : faA.x; + var ctrY = d.type === 'fib_circle' ? (faA.y + faB.y) / 2 : faA.y; + var baseR = d.type === 'fib_circle' ? dist / 2 : dist; + var mDist = Math.sqrt(Math.pow(mx - ctrX, 2) + Math.pow(my - ctrY, 2)); + var fLvls = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : _FIB_LEVELS.slice(); + for (var fi = 0; fi < fLvls.length; fi++) { + if (fLvls[fi] === 0) continue; + if (Math.abs(mDist - baseR * fLvls[fi]) < T) return true; + } + return false; + } + if (d.type === 'fib_wedge') { + var fwA = _tvToPixel(chartId, d.t1, d.p1); + var fwB = _tvToPixel(chartId, d.t2, d.p2); + if (!fwA || !fwB) return false; + if (_distToSeg(mx, my, fwA.x, fwA.y, fwB.x, fwB.y) < T) return true; + if (d.t3 !== undefined) { + var fwC = _tvToPixel(chartId, d.t3, d.p3); + if (fwC && _distToSeg(mx, my, fwA.x, fwA.y, fwC.x, fwC.y) < T) return true; + } + return false; + } + if (d.type === 'fib_time') { + var ftA = _tvToPixel(chartId, d.t1, d.p1); + var ftB = _tvToPixel(chartId, d.t2, d.p2); + if (!ftA || !ftB) return false; + if (_distToSeg(mx, my, ftA.x, ftA.y, ftB.x, ftB.y) < T) return true; + if (d.t3 !== undefined) { + var ftC = _tvToPixel(chartId, d.t3, d.p3); + if (ftC && _distToSeg(mx, my, ftB.x, ftB.y, ftC.x, ftC.y) < T) return true; + var tDiff = d.t2 - d.t1; + var ftLevels = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : [0, 0.382, 0.5, 0.618, 1, 1.382, 1.618, 2, 2.618, 4.236]; + for (var fi = 0; fi < ftLevels.length; fi++) { + var xPx = _tvToPixel(chartId, d.t3 + tDiff * ftLevels[fi], d.p3); + if (xPx && Math.abs(mx - xPx.x) < T) return true; + } + } + return false; + } + if (d.type === 'fib_spiral') { + var fsA = _tvToPixel(chartId, d.t1, d.p1); + var fsB = _tvToPixel(chartId, d.t2, d.p2); + if (!fsA || !fsB) return false; + if (_distToSeg(mx, my, fsA.x, fsA.y, fsB.x, fsB.y) < T) return true; + var fsDist = Math.sqrt(Math.pow(mx - fsA.x, 2) + Math.pow(my - fsA.y, 2)); + var fsR = Math.sqrt(Math.pow(fsB.x - fsA.x, 2) + Math.pow(fsB.y - fsA.y, 2)); + if (fsR > 0) { + var fsAngle = Math.atan2(my - fsA.y, mx - fsA.x) - Math.atan2(fsB.y - fsA.y, fsB.x - fsA.x); + var fsPhi = 1.6180339887; + var fsB2 = Math.log(fsPhi) / (Math.PI / 2); + var fsExpected = fsR * Math.exp(fsB2 * fsAngle); + if (Math.abs(fsDist - fsExpected) < T * 2) return true; + } + return false; + } + if (d.type === 'gann_box' || d.type === 'gann_square_fixed' || d.type === 'gann_square') { + var gbA = _tvToPixel(chartId, d.t1, d.p1); + var gbB = _tvToPixel(chartId, d.t2, d.p2); + if (!gbA || !gbB) return false; + var gblx = Math.min(gbA.x, gbB.x), gbrx = Math.max(gbA.x, gbB.x); + var gbty = Math.min(gbA.y, gbB.y), gbby = Math.max(gbA.y, gbB.y); + if (mx >= gblx - T && mx <= gbrx + T && my >= gbty - T && my <= gbby + T) return true; + return false; + } + if (d.type === 'gann_fan') { + var gfA = _tvToPixel(chartId, d.t1, d.p1); + var gfB = _tvToPixel(chartId, d.t2, d.p2); + if (!gfA || !gfB) return false; + if (_distToSeg(mx, my, gfA.x, gfA.y, gfB.x, gfB.y) < T) return true; + var gfDx = gfB.x - gfA.x, gfDy = gfB.y - gfA.y; + var gfAngles = [0.125, 0.25, 0.333, 0.5, 1, 2, 3, 4, 8]; + for (var gi = 0; gi < gfAngles.length; gi++) { + var gRatio = gfAngles[gi]; + var gfEndX = gfA.x + gfDx; + var gfEndY = gfA.y + gfDy * gRatio; + if (_distToSeg(mx, my, gfA.x, gfA.y, gfEndX, gfEndY) < T) return true; + } + return false; + } + if (d.type === 'measure') { + var mp1 = _tvToPixel(chartId, d.t1, d.p1); + var mp2 = _tvToPixel(chartId, d.t2, d.p2); + if (!mp1 || !mp2) return false; + if (_distToSeg(mx, my, mp1.x, mp1.y, mp2.x, mp2.y) < T) return true; + return false; + } + if (d.type === 'text') { + var tp = _tvToPixel(chartId, d.t1, d.p1); + if (!tp) return false; + var tw = (d.text || 'Text').length * 8; + if (mx >= tp.x - 4 && mx <= tp.x + tw + 4 && my >= tp.y - 16 && my <= tp.y + 4) return true; + return false; + } + // Single-point text tools — bounding box hit test + var _txtNoteTools = ['anchored_text', 'note', 'price_note', 'pin', 'comment', 'price_label', 'signpost', 'flag_mark']; + if (_txtNoteTools.indexOf(d.type) !== -1) { + var tnp = _tvToPixel(chartId, d.t1, d.p1); + if (!tnp) return false; + var tnR = 25; + if (Math.abs(mx - tnp.x) < tnR + T && Math.abs(my - tnp.y) < tnR + T) return true; + return false; + } + if (d.type === 'callout') { + var clp1 = _tvToPixel(chartId, d.t1, d.p1); + if (!clp1) return false; + if (Math.abs(mx - clp1.x) < 60 && my >= clp1.y - 40 && my <= clp1.y + 4) return true; + if (d.t2 !== undefined) { + var clp2 = _tvToPixel(chartId, d.t2, d.p2); + if (clp2 && _distToSeg(mx, my, clp1.x, clp1.y, clp2.x, clp2.y) < T) return true; + } + return false; + } + if (d.type === 'arrow_marker') { + var ap1 = _tvToPixel(chartId, d.t1, d.p1); + var ap2 = _tvToPixel(chartId, d.t2, d.p2); + if (!ap1 || !ap2) return false; + var amdx = ap2.x - ap1.x, amdy = ap2.y - ap1.y; + var amLen = Math.sqrt(amdx * amdx + amdy * amdy); + if (amLen < 1) return false; + var amHeadW = Math.max(amLen * 0.22, 16); + if (_distToSeg(mx, my, ap1.x, ap1.y, ap2.x, ap2.y) < amHeadW + T) return true; + return false; + } + if (d.type === 'arrow') { + var ap1 = _tvToPixel(chartId, d.t1, d.p1); + var ap2 = _tvToPixel(chartId, d.t2, d.p2); + if (!ap1 || !ap2) return false; + return _distToSeg(mx, my, ap1.x, ap1.y, ap2.x, ap2.y) < T; + } + var arrowMarks = ['arrow_mark_up', 'arrow_mark_down', 'arrow_mark_left', 'arrow_mark_right']; + if (arrowMarks.indexOf(d.type) !== -1) { + var amp = _tvToPixel(chartId, d.t1, d.p1); + if (!amp) return false; + var amR = (d.size || 30) / 2; + return Math.abs(mx - amp.x) < amR && Math.abs(my - amp.y) < amR; + } + if (d.type === 'circle') { + var cp1 = _tvToPixel(chartId, d.t1, d.p1); + var cp2 = _tvToPixel(chartId, d.t2, d.p2); + if (!cp1 || !cp2) return false; + var ccx = (cp1.x + cp2.x) / 2, ccy = (cp1.y + cp2.y) / 2; + var cr = Math.sqrt(Math.pow(cp2.x - cp1.x, 2) + Math.pow(cp2.y - cp1.y, 2)) / 2; + var cDist = Math.sqrt(Math.pow(mx - ccx, 2) + Math.pow(my - ccy, 2)); + return Math.abs(cDist - cr) < T; + } + if (d.type === 'ellipse') { + var ep1 = _tvToPixel(chartId, d.t1, d.p1); + var ep2 = _tvToPixel(chartId, d.t2, d.p2); + if (!ep1 || !ep2) return false; + var ecx = (ep1.x + ep2.x) / 2, ecy = (ep1.y + ep2.y) / 2; + var erx = Math.abs(ep2.x - ep1.x) / 2, ery = Math.abs(ep2.y - ep1.y) / 2; + if (erx < 1 || ery < 1) return false; + var eNorm = Math.pow((mx - ecx) / erx, 2) + Math.pow((my - ecy) / ery, 2); + return Math.abs(eNorm - 1) < 0.3; + } + if (d.type === 'triangle') { + var tr1 = _tvToPixel(chartId, d.t1, d.p1); + var tr2 = _tvToPixel(chartId, d.t2, d.p2); + var tr3 = d.t3 !== undefined ? _tvToPixel(chartId, d.t3, d.p3) : null; + if (!tr1 || !tr2 || !tr3) return false; + if (_distToSeg(mx, my, tr1.x, tr1.y, tr2.x, tr2.y) < T) return true; + if (_distToSeg(mx, my, tr2.x, tr2.y, tr3.x, tr3.y) < T) return true; + if (_distToSeg(mx, my, tr3.x, tr3.y, tr1.x, tr1.y) < T) return true; + return false; + } + if (d.type === 'rotated_rect') { + var rr1 = _tvToPixel(chartId, d.t1, d.p1); + var rr2 = _tvToPixel(chartId, d.t2, d.p2); + var rr3 = d.t3 !== undefined ? _tvToPixel(chartId, d.t3, d.p3) : null; + if (!rr1 || !rr2 || !rr3) return false; + var rdx = rr2.x - rr1.x, rdy = rr2.y - rr1.y; + var rlen = Math.sqrt(rdx * rdx + rdy * rdy); + if (rlen < 1) return false; + var rnx = -rdy / rlen, rny = rdx / rlen; + var rprojW = (rr3.x - rr1.x) * rnx + (rr3.y - rr1.y) * rny; + var rc = rr1, rd = rr2; + var re = { x: rr2.x + rnx * rprojW, y: rr2.y + rny * rprojW }; + var rf = { x: rr1.x + rnx * rprojW, y: rr1.y + rny * rprojW }; + if (_distToSeg(mx, my, rc.x, rc.y, rd.x, rd.y) < T) return true; + if (_distToSeg(mx, my, rd.x, rd.y, re.x, re.y) < T) return true; + if (_distToSeg(mx, my, re.x, re.y, rf.x, rf.y) < T) return true; + if (_distToSeg(mx, my, rf.x, rf.y, rc.x, rc.y) < T) return true; + return false; + } + if (d.type === 'shape_arc' || d.type === 'curve') { + var scp1 = _tvToPixel(chartId, d.t1, d.p1); + var scp2 = _tvToPixel(chartId, d.t2, d.p2); + if (!scp1 || !scp2) return false; + if (_distToSeg(mx, my, scp1.x, scp1.y, scp2.x, scp2.y) < T + 10) return true; + return false; + } + if (d.type === 'double_curve') { + var dc1 = _tvToPixel(chartId, d.t1, d.p1); + var dc2 = _tvToPixel(chartId, d.t2, d.p2); + if (!dc1 || !dc2) return false; + if (_distToSeg(mx, my, dc1.x, dc1.y, dc2.x, dc2.y) < T + 10) return true; + return false; + } + if (d.type === 'long_position' || d.type === 'short_position') { + var lp1 = _tvToPixel(chartId, d.t1, d.p1); + var lp2 = _tvToPixel(chartId, d.t2, d.p2); + if (!lp1 || !lp2) return false; + var lpL = Math.min(lp1.x, lp2.x), lpR = Math.max(lp1.x, lp2.x); + if (lpR - lpL < 20) lpR = lpL + 150; + var lpStopY = lp1.y + (lp1.y - lp2.y); + var lpTopY = Math.min(lp2.y, lpStopY), lpBotY = Math.max(lp2.y, lpStopY); + if (mx >= lpL - T && mx <= lpR + T && my >= lpTopY - T && my <= lpBotY + T) return true; + return false; + } + if (d.type === 'forecast' || d.type === 'ghost_feed') { + var fg1 = _tvToPixel(chartId, d.t1, d.p1); + var fg2 = _tvToPixel(chartId, d.t2, d.p2); + if (!fg1 || !fg2) return false; + return _distToSeg(mx, my, fg1.x, fg1.y, fg2.x, fg2.y) < T; + } + if (d.type === 'bars_pattern' || d.type === 'projection' || d.type === 'fixed_range_vol' || d.type === 'date_price_range') { + var bx1 = _tvToPixel(chartId, d.t1, d.p1); + var bx2 = _tvToPixel(chartId, d.t2, d.p2); + if (!bx1 || !bx2) return false; + var bxL = Math.min(bx1.x, bx2.x), bxR = Math.max(bx1.x, bx2.x); + var bxT = Math.min(bx1.y, bx2.y), bxB = Math.max(bx1.y, bx2.y); + if (mx >= bxL - T && mx <= bxR + T && my >= bxT - T && my <= bxB + T) return true; + return false; + } + if (d.type === 'anchored_vwap') { + var avp = _tvToPixel(chartId, d.t1, d.p1); + if (!avp) return false; + return Math.abs(mx - avp.x) < T; + } + if (d.type === 'price_range') { + var prp1 = _tvToPixel(chartId, d.t1, d.p1); + var prp2 = _tvToPixel(chartId, d.t2, d.p2); + if (!prp1 || !prp2) return false; + if (Math.abs(my - prp1.y) < T || Math.abs(my - prp2.y) < T) return true; + if (Math.abs(mx - prp1.x) < T && my >= Math.min(prp1.y, prp2.y) && my <= Math.max(prp1.y, prp2.y)) return true; + return false; + } + if (d.type === 'date_range') { + var drp1 = _tvToPixel(chartId, d.t1, d.p1); + var drp2 = _tvToPixel(chartId, d.t2, d.p2); + if (!drp1 || !drp2) return false; + if (Math.abs(mx - drp1.x) < T || Math.abs(mx - drp2.x) < T) return true; + return false; + } + return false; +} + +function _distToSeg(px, py, x1, y1, x2, y2) { + var dx = x2 - x1, dy = y2 - y1; + var len2 = dx * dx + dy * dy; + if (len2 === 0) return Math.sqrt((px - x1) * (px - x1) + (py - y1) * (py - y1)); + var t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / len2)); + var nx = x1 + t * dx, ny = y1 + t * dy; + return Math.sqrt((px - nx) * (px - nx) + (py - ny) * (py - ny)); +} + +function _tvRoundRect(ctx, x, y, w, h, r) { + ctx.beginPath(); + ctx.moveTo(x + r, y); + ctx.lineTo(x + w - r, y); + ctx.quadraticCurveTo(x + w, y, x + w, y + r); + ctx.lineTo(x + w, y + h - r); + ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h); + ctx.lineTo(x + r, y + h); + ctx.quadraticCurveTo(x, y + h, x, y + h - r); + ctx.lineTo(x, y + r); + ctx.quadraticCurveTo(x, y, x + r, y); + ctx.closePath(); +} + +// ---- Helpers for Pearson's R ---- +function _tvGetSeriesDataBetween(chartId, t1, t2) { + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry || !entry.series) return null; + var data = entry.series.data ? entry.series.data() : null; + if (!data || !data.length) return null; + var lo = Math.min(t1, t2), hi = Math.max(t1, t2); + var result = []; + for (var i = 0; i < data.length; i++) { + var pt = data[i]; + if (pt.time >= lo && pt.time <= hi) { + var v = pt.close !== undefined ? pt.close : pt.value; + if (v !== undefined && v !== null) result.push({ idx: i, value: v }); + } + } + return result.length > 1 ? result : null; +} + +function _tvPearsonsR(vals) { + var n = vals.length; + if (n < 2) return null; + var sumX = 0, sumY = 0, sumXY = 0, sumX2 = 0, sumY2 = 0; + for (var i = 0; i < n; i++) { + var x = i, y = vals[i].value; + sumX += x; sumY += y; sumXY += x * y; sumX2 += x * x; sumY2 += y * y; + } + var denom = Math.sqrt((n * sumX2 - sumX * sumX) * (n * sumY2 - sumY * sumY)); + if (denom === 0) return 0; + return (n * sumXY - sumX * sumY) / denom; +} + +// ---- Rendering ---- +function _tvRenderDrawings(chartId) { + var ds = window.__PYWRY_DRAWINGS__[chartId]; + if (!ds) return; + var ctx = ds.ctx; + var w = ds.canvas.clientWidth; + var h = ds.canvas.clientHeight; + ctx.clearRect(0, 0, w, h); + + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry || !entry.chart) return; + + var theme = entry.theme || 'dark'; + var defColor = _cssVar('--pywry-draw-default-color'); + var textColor = _cssVar('--pywry-tvchart-text'); + var viewport = _tvGetDrawingViewport(chartId); + + for (var i = 0; i < ds.drawings.length; i++) { + if (ds.drawings[i].hidden) continue; + var isSel = (_drawSelectedChart === chartId && _drawSelectedIdx === i); + var isHov = (_drawHoverIdx === i && _drawSelectedChart === chartId && _drawSelectedIdx !== i); + var isMouseOver = (_drawHoverIdx === i); + _tvDrawOne(ctx, ds.drawings[i], chartId, defColor, textColor, w, h, isSel, isHov, isMouseOver, viewport); + } + if (_drawPending && _drawPending.chartId === chartId) { + _tvDrawOne(ctx, _drawPending, chartId, defColor, textColor, w, h, false, false, false, viewport); + } +} + diff --git a/pywry/pywry/frontend/src/tvchart/07-drawing/06-render.js b/pywry/pywry/frontend/src/tvchart/07-drawing/06-render.js new file mode 100644 index 0000000..9a9021b --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/07-drawing/06-render.js @@ -0,0 +1,2071 @@ +function _tvDrawOne(ctx, d, chartId, defColor, textColor, w, h, selected, hovered, mouseOver, viewport) { + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry) return; + var series = _tvMainSeries(chartId); + if (!series) return; + viewport = viewport || _tvGetDrawingViewport(chartId); + + var col = d.color || defColor; + var lw = d.lineWidth || 2; + if (hovered) { lw += 0.5; } + + ctx.save(); + ctx.strokeStyle = col; + ctx.fillStyle = col; + ctx.lineWidth = lw; + ctx.lineJoin = 'round'; + ctx.lineCap = 'round'; + ctx.beginPath(); + ctx.rect(viewport.left, viewport.top, viewport.width, viewport.height); + ctx.clip(); + + // Line style + if (d.lineStyle === 1) ctx.setLineDash([6, 4]); + else if (d.lineStyle === 2) ctx.setLineDash([2, 3]); + else ctx.setLineDash([]); + + // Pre-compute common anchor pixel positions used by many drawing types + var p1 = (d.t1 !== undefined && d.p1 !== undefined) ? _tvToPixel(chartId, d.t1, d.p1) : null; + var p2 = (d.t2 !== undefined && d.p2 !== undefined) ? _tvToPixel(chartId, d.t2, d.p2) : null; + + if (d.type === 'hline') { + var yH = series.priceToCoordinate(d.price); + if (yH !== null) { + ctx.beginPath(); + ctx.moveTo(0, yH); + ctx.lineTo(w, yH); + ctx.stroke(); + // Canvas price-label box (supplements the native price-line label). + // Only drawn when showPriceLabel is not explicitly false. + if (d.showPriceLabel !== false) { + var labelBoxColor = d.labelColor || col; + var prLabel = (d.title ? d.title + ' ' : '') + Number(d.price).toFixed(2); + ctx.font = 'bold 11px -apple-system,BlinkMacSystemFont,sans-serif'; + var pm = ctx.measureText(prLabel); + var plw = pm.width + 10; + var plh = 20; + var plx = viewport.right - plw - 4; + var ply = yH - plh / 2; + ctx.fillStyle = labelBoxColor; + ctx.beginPath(); + var r = 3; + ctx.moveTo(plx + r, ply); + ctx.lineTo(plx + plw - r, ply); + ctx.quadraticCurveTo(plx + plw, ply, plx + plw, ply + r); + ctx.lineTo(plx + plw, ply + plh - r); + ctx.quadraticCurveTo(plx + plw, ply + plh, plx + plw - r, ply + plh); + ctx.lineTo(plx + r, ply + plh); + ctx.quadraticCurveTo(plx, ply + plh, plx, ply + plh - r); + ctx.lineTo(plx, ply + r); + ctx.quadraticCurveTo(plx, ply, plx + r, ply); + ctx.fill(); + ctx.fillStyle = _cssVar('--pywry-draw-label-text'); + ctx.textBaseline = 'middle'; + ctx.fillText(prLabel, plx + 5, yH); + ctx.textBaseline = 'alphabetic'; + } + } + } else if (d.type === 'trendline') { + var a = _tvToPixel(chartId, d.t1, d.p1); + var b = _tvToPixel(chartId, d.t2, d.p2); + if (a && b) { + var dx = b.x - a.x, dy = b.y - a.y; + var len = Math.sqrt(dx * dx + dy * dy); + if (len > 0) { + var ext = 4000; + var ux = dx / len, uy = dy / len; + var startX = a.x, startY = a.y; + var endX = b.x, endY = b.y; + var extMode = d.extend || "Don't extend"; + if (d.ray) { + // Ray mode: start at A, extend through B to infinity + endX = b.x + ux * ext; + endY = b.y + uy * ext; + } else if (extMode === 'Left' || extMode === 'Both') { + startX = a.x - ux * ext; + startY = a.y - uy * ext; + } + if (!d.ray && (extMode === 'Right' || extMode === 'Both')) { + endX = b.x + ux * ext; + endY = b.y + uy * ext; + } + ctx.beginPath(); + ctx.moveTo(startX, startY); + ctx.lineTo(endX, endY); + ctx.stroke(); + } + // Middle point + if (d.showMiddlePoint) { + var midX = (a.x + b.x) / 2, midY = (a.y + b.y) / 2; + ctx.beginPath(); + ctx.arc(midX, midY, 4, 0, Math.PI * 2); + ctx.fillStyle = col; + ctx.fill(); + } + // Price labels at endpoints + if (d.showPriceLabels) { + ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; + ctx.fillStyle = col; + var p1Txt = d.p1 !== undefined ? d.p1.toFixed(2) : ''; + var p2Txt = d.p2 !== undefined ? d.p2.toFixed(2) : ''; + ctx.fillText(p1Txt, a.x + 4, a.y - 6); + ctx.fillText(p2Txt, b.x + 4, b.y - 6); + } + // Text annotation (from Text tab in settings) + if (d.text) { + var tMidX = (a.x + b.x) / 2, tMidY = (a.y + b.y) / 2; + var tFs = d.textFontSize || 12; + var tStyle = (d.textItalic ? 'italic ' : '') + (d.textBold ? 'bold ' : ''); + ctx.font = tStyle + tFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; + ctx.fillStyle = d.textColor || col; + ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; + ctx.fillText(d.text, tMidX, tMidY - 6); + ctx.textAlign = 'start'; ctx.textBaseline = 'alphabetic'; + } + // Stats (from Inputs tab: hidden/compact/values) + if (d.stats && d.stats !== 'hidden' && a && b) { + var sDx = d.p2 - d.p1, sPct = d.p1 !== 0 ? ((sDx / d.p1) * 100) : 0; + var sBars = Math.abs(Math.round((d.t2 - d.t1) / 86400)); // approximate bar count + var sText = ''; + if (d.stats === 'compact') { + sText = (sDx >= 0 ? '+' : '') + sDx.toFixed(2) + ' (' + (sPct >= 0 ? '+' : '') + sPct.toFixed(2) + '%)'; + } else { + sText = (sDx >= 0 ? '+' : '') + sDx.toFixed(2) + ' (' + (sPct >= 0 ? '+' : '') + sPct.toFixed(2) + '%)' + ' | ' + sBars + ' bars'; + } + var sFs = 11; + ctx.font = sFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; + ctx.fillStyle = col; + var sAnchor = d.statsPosition === 'left' ? a : b; + var sAlign = d.statsPosition === 'left' ? 'left' : 'right'; + ctx.textAlign = sAlign; ctx.textBaseline = 'top'; + ctx.fillText(sText, sAnchor.x, sAnchor.y + 6); + ctx.textAlign = 'start'; ctx.textBaseline = 'alphabetic'; + } + } + } else if (d.type === 'rect') { + var r1 = _tvToPixel(chartId, d.t1, d.p1); + var r2 = _tvToPixel(chartId, d.t2, d.p2); + if (r1 && r2) { + var rx = Math.min(r1.x, r2.x), ry = Math.min(r1.y, r2.y); + var rw = Math.abs(r2.x - r1.x), rh = Math.abs(r2.y - r1.y); + if (d.fillEnabled !== false) { + ctx.fillStyle = d.fillColor || col; + ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.15; + ctx.fillRect(rx, ry, rw, rh); + ctx.globalAlpha = 1.0; + } + ctx.strokeRect(rx, ry, rw, rh); + } + } else if (d.type === 'text') { + var tp = _tvToPixel(chartId, d.t1, d.p1); + if (tp) { + var fontStyle = (d.italic ? 'italic ' : '') + (d.bold !== false ? 'bold ' : ''); + ctx.font = fontStyle + (d.fontSize || 14) + 'px -apple-system,BlinkMacSystemFont,sans-serif'; + var textContent = d.text || 'Text'; + if (d.bgEnabled) { + var tm = ctx.measureText(textContent); + var pad = 4; + ctx.fillStyle = d.bgColor || _cssVar('--pywry-draw-text-bg'); + ctx.globalAlpha = d.bgOpacity !== undefined ? d.bgOpacity : 0.7; + ctx.fillRect(tp.x - pad, tp.y - (d.fontSize || 14) - pad, tm.width + pad * 2, (d.fontSize || 14) + pad * 2); + ctx.globalAlpha = 1.0; + } + ctx.fillStyle = d.color || defColor; + ctx.fillText(textContent, tp.x, tp.y); + } + } else if (d.type === 'anchored_text') { + // Anchored Text: text with a dot anchor below + var atp = _tvToPixel(chartId, d.t1, d.p1); + if (atp) { + var _atFs = d.fontSize || 14; + var _atFw = (d.italic ? 'italic ' : '') + (d.bold ? 'bold ' : ''); + ctx.font = _atFw + _atFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; + var _atTxt = d.text || 'Text'; + var _atTm = ctx.measureText(_atTxt); + if (d.bgEnabled) { + var _atPad = 4; + ctx.fillStyle = d.bgColor || '#2a2e39'; + ctx.globalAlpha = 0.7; + ctx.fillRect(atp.x - _atTm.width / 2 - _atPad, atp.y - _atFs - _atPad, _atTm.width + _atPad * 2, _atFs + _atPad * 2); + ctx.globalAlpha = 1.0; + } + ctx.fillStyle = d.color || defColor; + ctx.textAlign = 'center'; + ctx.fillText(_atTxt, atp.x, atp.y); + // Anchor dot + ctx.beginPath(); + ctx.arc(atp.x, atp.y + 6, 3, 0, Math.PI * 2); + ctx.fill(); + ctx.textAlign = 'start'; + } + } else if (d.type === 'note') { + // Note: text block with border + var ntp = _tvToPixel(chartId, d.t1, d.p1); + if (ntp) { + var _nFs = d.fontSize || 14; + var _nFw = (d.italic ? 'italic ' : '') + (d.bold ? 'bold ' : ''); + ctx.font = _nFw + _nFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; + var _nTxt = d.text || 'Note'; + var _nTm = ctx.measureText(_nTxt); + var _nPad = 8; + var _nW = _nTm.width + _nPad * 2; + var _nH = _nFs + _nPad * 2; + if (d.bgEnabled !== false) { + ctx.fillStyle = d.bgColor || '#2a2e39'; + ctx.globalAlpha = 0.85; + ctx.fillRect(ntp.x, ntp.y - _nH, _nW, _nH); + ctx.globalAlpha = 1.0; + } + if (d.borderEnabled) { + ctx.strokeStyle = d.borderColor || col; + ctx.strokeRect(ntp.x, ntp.y - _nH, _nW, _nH); + ctx.strokeStyle = col; + } + ctx.fillStyle = d.color || defColor; + ctx.fillText(_nTxt, ntp.x + _nPad, ntp.y - _nPad); + } + } else if (d.type === 'price_note') { + // Price Note: note anchored to a price level with horizontal dash + var pnp = _tvToPixel(chartId, d.t1, d.p1); + if (pnp) { + var _pnFs = d.fontSize || 14; + var _pnFw = (d.italic ? 'italic ' : '') + (d.bold ? 'bold ' : ''); + ctx.font = _pnFw + _pnFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; + var _pnTxt = d.text || 'Price Note'; + var _pnTm = ctx.measureText(_pnTxt); + var _pnPad = 6; + var _pnW = _pnTm.width + _pnPad * 2; + var _pnH = _pnFs + _pnPad * 2; + // Horizontal price dash + ctx.setLineDash([4, 3]); + ctx.beginPath(); + ctx.moveTo(pnp.x + _pnW + 4, pnp.y - _pnH / 2); + ctx.lineTo(pnp.x + _pnW + 40, pnp.y - _pnH / 2); + ctx.stroke(); + ctx.setLineDash(ls); + if (d.bgEnabled !== false) { + ctx.fillStyle = d.bgColor || '#2a2e39'; + ctx.globalAlpha = 0.85; + ctx.fillRect(pnp.x, pnp.y - _pnH, _pnW, _pnH); + ctx.globalAlpha = 1.0; + } + if (d.borderEnabled) { + ctx.strokeStyle = d.borderColor || col; + ctx.strokeRect(pnp.x, pnp.y - _pnH, _pnW, _pnH); + ctx.strokeStyle = col; + } + ctx.fillStyle = d.color || defColor; + ctx.fillText(_pnTxt, pnp.x + _pnPad, pnp.y - _pnPad); + } + } else if (d.type === 'pin') { + // Pin: map-pin icon with text bubble above + var pinP = _tvToPixel(chartId, d.t1, d.p1); + if (pinP) { + var pinCol = d.markerColor || col; + // Draw pin marker (teardrop shape) + var pinR = 8; + ctx.beginPath(); + ctx.arc(pinP.x, pinP.y - pinR - 6, pinR, Math.PI, 0, false); + ctx.lineTo(pinP.x, pinP.y); + ctx.closePath(); + ctx.fillStyle = pinCol; + ctx.fill(); + // Inner dot + ctx.beginPath(); + ctx.arc(pinP.x, pinP.y - pinR - 6, 3, 0, Math.PI * 2); + ctx.fillStyle = '#1e222d'; + ctx.fill(); + // Text bubble if text present (mouseover only) + if (d.text && mouseOver) { + var _pinFs = d.fontSize || 14; + var _pinFw = (d.italic ? 'italic ' : '') + (d.bold ? 'bold ' : ''); + ctx.font = _pinFw + _pinFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; + var _pinTm = ctx.measureText(d.text); + var _pinPad = 8; + var _pinBW = _pinTm.width + _pinPad * 2; + var _pinBH = _pinFs + _pinPad * 2; + var _pinBY = pinP.y - pinR * 2 - 12 - _pinBH; + var _pinBX = pinP.x - _pinBW / 2; + // Bubble background + ctx.fillStyle = d.bgColor || '#3a3e4a'; + ctx.globalAlpha = 0.9; + _tvRoundRect(ctx, _pinBX, _pinBY, _pinBW, _pinBH, 4); + ctx.fill(); + ctx.globalAlpha = 1.0; + // Bubble pointer + ctx.beginPath(); + ctx.moveTo(pinP.x - 5, _pinBY + _pinBH); + ctx.lineTo(pinP.x, _pinBY + _pinBH + 6); + ctx.lineTo(pinP.x + 5, _pinBY + _pinBH); + ctx.fillStyle = d.bgColor || '#3a3e4a'; + ctx.fill(); + // Text + ctx.fillStyle = d.color || defColor; + ctx.textAlign = 'center'; + ctx.fillText(d.text, pinP.x, _pinBY + _pinBH - _pinPad); + ctx.textAlign = 'start'; + } + // Small anchor circle at bottom + ctx.beginPath(); + ctx.arc(pinP.x, pinP.y + 3, 2, 0, Math.PI * 2); + ctx.fillStyle = pinCol; + ctx.fill(); + } + } else if (d.type === 'callout') { + // Callout: speech bubble with pointer from p2 to p1 + var clP1 = _tvToPixel(chartId, d.t1, d.p1); + var clP2 = d.t2 !== undefined ? _tvToPixel(chartId, d.t2, d.p2) : null; + if (clP1) { + var _clFs = d.fontSize || 14; + var _clFw = (d.italic ? 'italic ' : '') + (d.bold ? 'bold ' : ''); + ctx.font = _clFw + _clFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; + var _clTxt = d.text || 'Callout'; + var _clTm = ctx.measureText(_clTxt); + var _clPad = 10; + var _clW = _clTm.width + _clPad * 2; + var _clH = _clFs + _clPad * 2; + var _clX = clP1.x; + var _clY = clP1.y - _clH; + // Background + ctx.fillStyle = d.bgColor || '#2a2e39'; + ctx.globalAlpha = 0.9; + _tvRoundRect(ctx, _clX, _clY, _clW, _clH, 4); + ctx.fill(); + ctx.globalAlpha = 1.0; + if (d.borderEnabled) { + ctx.strokeStyle = d.borderColor || col; + _tvRoundRect(ctx, _clX, _clY, _clW, _clH, 4); + ctx.stroke(); + ctx.strokeStyle = col; + } + // Pointer line to p2 + if (clP2) { + ctx.beginPath(); + ctx.moveTo(_clX + _clW / 2, clP1.y); + ctx.lineTo(clP2.x, clP2.y); + ctx.stroke(); + } + // Text + ctx.fillStyle = d.color || defColor; + ctx.fillText(_clTxt, _clX + _clPad, clP1.y - _clPad); + } + } else if (d.type === 'comment') { + // Comment: circular bubble with text + var cmP = _tvToPixel(chartId, d.t1, d.p1); + if (cmP) { + var _cmFs = d.fontSize || 14; + var _cmFw = (d.italic ? 'italic ' : '') + (d.bold ? 'bold ' : ''); + ctx.font = _cmFw + _cmFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; + var _cmTxt = d.text || 'Comment'; + var _cmTm = ctx.measureText(_cmTxt); + var _cmR = Math.max(_cmTm.width / 2 + 12, _cmFs + 8); + // Background circle + ctx.beginPath(); + ctx.arc(cmP.x, cmP.y - _cmR, _cmR, 0, Math.PI * 2); + ctx.fillStyle = d.bgColor || '#2a2e39'; + ctx.globalAlpha = 0.85; + ctx.fill(); + ctx.globalAlpha = 1.0; + ctx.strokeStyle = d.borderEnabled ? (d.borderColor || col) : col; + ctx.stroke(); + ctx.strokeStyle = col; + // Pointer triangle + ctx.beginPath(); + ctx.moveTo(cmP.x - 5, cmP.y - 2); + ctx.lineTo(cmP.x, cmP.y + 6); + ctx.lineTo(cmP.x + 5, cmP.y - 2); + ctx.fillStyle = d.bgColor || '#2a2e39'; + ctx.fill(); + // Text + ctx.fillStyle = d.color || defColor; + ctx.textAlign = 'center'; + ctx.fillText(_cmTxt, cmP.x, cmP.y - _cmR + 4); + ctx.textAlign = 'start'; + } + } else if (d.type === 'price_label') { + // Price Label: arrow-shaped label pointing right + var plP = _tvToPixel(chartId, d.t1, d.p1); + if (plP) { + var _plFs = d.fontSize || 14; + var _plFw = (d.italic ? 'italic ' : '') + (d.bold ? 'bold ' : ''); + ctx.font = _plFw + _plFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; + var _plTxt = d.text || 'Label'; + var _plTm = ctx.measureText(_plTxt); + var _plPad = 6; + var _plW = _plTm.width + _plPad * 2; + var _plH = _plFs + _plPad * 2; + var _plArr = 8; + // Arrow-shaped polygon + ctx.beginPath(); + ctx.moveTo(plP.x, plP.y - _plH / 2); + ctx.lineTo(plP.x + _plW, plP.y - _plH / 2); + ctx.lineTo(plP.x + _plW + _plArr, plP.y); + ctx.lineTo(plP.x + _plW, plP.y + _plH / 2); + ctx.lineTo(plP.x, plP.y + _plH / 2); + ctx.closePath(); + ctx.fillStyle = d.bgColor || col; + ctx.globalAlpha = 0.85; + ctx.fill(); + ctx.globalAlpha = 1.0; + ctx.stroke(); + // Text + ctx.fillStyle = d.color || '#ffffff'; + ctx.textAlign = 'left'; + ctx.textBaseline = 'middle'; + ctx.fillText(_plTxt, plP.x + _plPad, plP.y); + ctx.textBaseline = 'alphabetic'; + } + } else if (d.type === 'signpost') { + // Signpost: vertical pole with flag-like sign + var spP = _tvToPixel(chartId, d.t1, d.p1); + if (spP) { + var spCol = d.markerColor || col; + var _spFs = d.fontSize || 14; + var _spFw = (d.italic ? 'italic ' : '') + (d.bold ? 'bold ' : ''); + ctx.font = _spFw + _spFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; + var _spTxt = d.text || 'Signpost'; + var _spTm = ctx.measureText(_spTxt); + var _spPad = 6; + var _spW = _spTm.width + _spPad * 2; + var _spH = _spFs + _spPad * 2; + // Vertical pole + ctx.beginPath(); + ctx.moveTo(spP.x, spP.y); + ctx.lineTo(spP.x, spP.y - _spH - 20); + ctx.strokeStyle = spCol; + ctx.stroke(); + // Sign shape (flag) + ctx.beginPath(); + ctx.moveTo(spP.x, spP.y - _spH - 20); + ctx.lineTo(spP.x + _spW, spP.y - _spH - 16); + ctx.lineTo(spP.x + _spW, spP.y - 24); + ctx.lineTo(spP.x, spP.y - 20); + ctx.closePath(); + ctx.fillStyle = d.bgColor || spCol; + ctx.globalAlpha = 0.85; + ctx.fill(); + ctx.globalAlpha = 1.0; + if (d.borderEnabled) { + ctx.stroke(); + } + // Text on sign + ctx.fillStyle = d.color || '#ffffff'; + ctx.textBaseline = 'middle'; + ctx.fillText(_spTxt, spP.x + _spPad, spP.y - _spH / 2 - 20); + ctx.textBaseline = 'alphabetic'; + } + } else if (d.type === 'flag_mark') { + // Flag Mark: small flag on a pole + var fmP = _tvToPixel(chartId, d.t1, d.p1); + if (fmP) { + var fmCol = d.markerColor || col; + var _fmFs = d.fontSize || 14; + // Pole + ctx.beginPath(); + ctx.moveTo(fmP.x, fmP.y); + ctx.lineTo(fmP.x, fmP.y - 30); + ctx.strokeStyle = fmCol; + ctx.stroke(); + // Flag + ctx.beginPath(); + ctx.moveTo(fmP.x, fmP.y - 30); + ctx.lineTo(fmP.x + 20, fmP.y - 26); + ctx.lineTo(fmP.x + 16, fmP.y - 22); + ctx.lineTo(fmP.x + 20, fmP.y - 18); + ctx.lineTo(fmP.x, fmP.y - 18); + ctx.closePath(); + ctx.fillStyle = fmCol; + ctx.fill(); + // Text below (mouseover only) + if (d.text && mouseOver) { + var _fmFw = (d.italic ? 'italic ' : '') + (d.bold ? 'bold ' : ''); + ctx.font = _fmFw + _fmFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; + ctx.fillStyle = d.color || defColor; + ctx.textAlign = 'center'; + ctx.fillText(d.text, fmP.x, fmP.y + _fmFs + 4); + ctx.textAlign = 'start'; + } + } + } else if (d.type === 'channel') { + var c1 = _tvToPixel(chartId, d.t1, d.p1); + var c2 = _tvToPixel(chartId, d.t2, d.p2); + if (c1 && c2) { + var chanOff = d.offset || 30; + // Fill between lines + if (d.fillEnabled !== false) { + ctx.fillStyle = d.fillColor || col; + ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.08; + ctx.beginPath(); + ctx.moveTo(c1.x, c1.y); + ctx.lineTo(c2.x, c2.y); + ctx.lineTo(c2.x, c2.y + chanOff); + ctx.lineTo(c1.x, c1.y + chanOff); + ctx.closePath(); + ctx.fill(); + ctx.globalAlpha = 1.0; + } + // Main line + ctx.beginPath(); + ctx.moveTo(c1.x, c1.y); + ctx.lineTo(c2.x, c2.y); + ctx.stroke(); + // Parallel line + ctx.beginPath(); + ctx.moveTo(c1.x, c1.y + chanOff); + ctx.lineTo(c2.x, c2.y + chanOff); + ctx.stroke(); + // Middle dashed line + if (d.showMiddleLine !== false) { + ctx.setLineDash([4, 4]); + ctx.globalAlpha = 0.5; + ctx.beginPath(); + ctx.moveTo(c1.x, c1.y + chanOff / 2); + ctx.lineTo(c2.x, c2.y + chanOff / 2); + ctx.stroke(); + ctx.globalAlpha = 1.0; + } + ctx.setLineDash(d.lineStyle === 1 ? [6,4] : d.lineStyle === 2 ? [2,3] : []); + } + } else if (d.type === 'fibonacci') { + var fTop = series.priceToCoordinate(d.p1); + var fBot = series.priceToCoordinate(d.p2); + if (fTop !== null && fBot !== null) { + // Reverse swaps the direction of level interpolation + var fibAnchorTop = d.reverse ? fBot : fTop; + var fibAnchorBot = d.reverse ? fTop : fBot; + var fibPriceTop = d.reverse ? d.p2 : d.p1; + var fibPriceBot = d.reverse ? d.p1 : d.p2; + var fibLevels = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : _FIB_LEVELS.slice(); + var fibColors = (d.fibColors && d.fibColors.length) ? d.fibColors : _getFibColors(); + var fibEnabled = d.fibEnabled || []; + var showLbls = d.showLabels !== false; + var showPrices = d.showPrices !== false; + // Use user-set lineStyle; endpoints always solid + var fibDash = d.lineStyle === 1 ? [6, 4] : d.lineStyle === 2 ? [2, 3] : [4, 3]; + for (var fi = 0; fi < fibLevels.length; fi++) { + if (fibEnabled[fi] === false) continue; + var lvl = fibEnabled.length ? fibLevels[fi] : _FIB_LEVELS[fi]; + var yFib = fibAnchorTop + (fibAnchorBot - fibAnchorTop) * lvl; + var fc = fibColors[fi] || col; + // Zone fill between this level and next + if (fi < fibLevels.length - 1 && fibEnabled[fi + 1] !== false) { + var yNext = fibAnchorTop + (fibAnchorBot - fibAnchorTop) * fibLevels[fi + 1]; + ctx.fillStyle = fc; + ctx.globalAlpha = 0.06; + ctx.fillRect(0, Math.min(yFib, yNext), w, Math.abs(yNext - yFib)); + ctx.globalAlpha = 1.0; + } + // Level line — respect user lineStyle and lineWidth + ctx.strokeStyle = fc; + ctx.lineWidth = lvl === 0 || lvl === 1 ? lw : Math.max(1, lw - 1); + ctx.setLineDash(lvl === 0 || lvl === 1 ? [] : fibDash); + ctx.beginPath(); + ctx.moveTo(0, yFib); + ctx.lineTo(w, yFib); + ctx.stroke(); + // Label + if (showLbls || showPrices) { + var priceFib = fibPriceTop + (fibPriceBot - fibPriceTop) * lvl; + ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; + ctx.fillStyle = fc; + var fibLabel = ''; + if (showLbls) fibLabel += lvl.toFixed(3); + if (showPrices) fibLabel += (fibLabel ? ' ' : '') + '(' + priceFib.toFixed(2) + ')'; + ctx.fillText(fibLabel, viewport.left + 8, yFib - 4); + } + } + ctx.setLineDash([]); + ctx.lineWidth = lw; + + // Trend line — diagonal dashed line connecting the two anchor points + var fA1 = _tvToPixel(chartId, d.t1, d.p1); + var fA2 = _tvToPixel(chartId, d.t2, d.p2); + if (fA1 && fA2) { + ctx.strokeStyle = col; + ctx.lineWidth = lw; + ctx.setLineDash([6, 4]); + ctx.globalAlpha = 0.6; + ctx.beginPath(); + ctx.moveTo(fA1.x, fA1.y); + ctx.lineTo(fA2.x, fA2.y); + ctx.stroke(); + ctx.globalAlpha = 1.0; + ctx.setLineDash([]); + } + } + } else if (d.type === 'fib_extension') { + // Trend-Based Fib Extension: 3 anchor points (A, B, C) + // Levels project from C using the A→B distance + var feA = _tvToPixel(chartId, d.t1, d.p1); + var feB = _tvToPixel(chartId, d.t2, d.p2); + var feC = d.t3 !== undefined ? _tvToPixel(chartId, d.t3, d.p3) : null; + if (feA && feB) { + // Draw the A→B leg + ctx.strokeStyle = col; + ctx.lineWidth = lw; + ctx.setLineDash([]); + ctx.beginPath(); ctx.moveTo(feA.x, feA.y); ctx.lineTo(feB.x, feB.y); ctx.stroke(); + if (feC) { + // Draw B→C leg + ctx.setLineDash([4, 3]); + ctx.beginPath(); ctx.moveTo(feB.x, feB.y); ctx.lineTo(feC.x, feC.y); ctx.stroke(); + ctx.setLineDash([]); + // Extension levels project from C using AB price range + var abRange = d.p2 - d.p1; + var extDefLevels = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618, 2.618, 4.236]; + var fibLevels = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : extDefLevels; + var fibColors = (d.fibColors && d.fibColors.length) ? d.fibColors : _getFibColors(); + var fibEnabled = d.fibEnabled || []; + var showLbls = d.showLabels !== false; + var showPrices = d.showPrices !== false; + for (var fi = 0; fi < fibLevels.length; fi++) { + if (fibEnabled[fi] === false) continue; + var lvl = fibLevels[fi]; + var extPrice = d.p3 + abRange * lvl; + var yExt = series.priceToCoordinate(extPrice); + if (yExt === null) continue; + var fc = fibColors[fi % fibColors.length] || col; + // Zone fill between this level and next + if (d.fillEnabled !== false && fi < fibLevels.length - 1 && fibEnabled[fi + 1] !== false) { + var nextPrice = d.p3 + abRange * fibLevels[fi + 1]; + var yNext = series.priceToCoordinate(nextPrice); + if (yNext !== null) { + ctx.fillStyle = fc; + ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.06; + ctx.fillRect(0, Math.min(yExt, yNext), w, Math.abs(yNext - yExt)); + ctx.globalAlpha = 1.0; + } + } + ctx.strokeStyle = fc; + ctx.lineWidth = lvl === 0 || lvl === 1 ? lw : Math.max(1, lw - 1); + ctx.setLineDash(lvl === 0 || lvl === 1 ? [] : [4, 3]); + ctx.beginPath(); ctx.moveTo(0, yExt); ctx.lineTo(w, yExt); ctx.stroke(); + if (showLbls || showPrices) { + ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; + ctx.fillStyle = fc; + var lbl = ''; + if (showLbls) lbl += lvl.toFixed(3); + if (showPrices) lbl += (lbl ? ' (' : '') + extPrice.toFixed(2) + (lbl ? ')' : ''); + ctx.fillText(lbl, viewport.left + 8, yExt - 4); + } + } + ctx.setLineDash([]); + ctx.lineWidth = lw; + } + } + } else if (d.type === 'fib_channel') { + // Fib Channel: two trend lines (A→B and parallel through C) with fib levels between + var fcA = _tvToPixel(chartId, d.t1, d.p1); + var fcB = _tvToPixel(chartId, d.t2, d.p2); + var fcC = d.t3 !== undefined ? _tvToPixel(chartId, d.t3, d.p3) : null; + if (fcA && fcB) { + ctx.strokeStyle = col; + ctx.lineWidth = lw; + ctx.setLineDash([]); + ctx.beginPath(); ctx.moveTo(fcA.x, fcA.y); ctx.lineTo(fcB.x, fcB.y); ctx.stroke(); + if (fcC) { + // Perpendicular offset from A→B line to C + var abDx = fcB.x - fcA.x, abDy = fcB.y - fcA.y; + var abLen = Math.sqrt(abDx * abDx + abDy * abDy); + if (abLen > 0) { + // Perpendicular offset = distance from C to line AB + var cOff = ((fcC.x - fcA.x) * (-abDy / abLen) + (fcC.y - fcA.y) * (abDx / abLen)); + var px = -abDy / abLen, py = abDx / abLen; + var fibLevels = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : _FIB_LEVELS.slice(); + var fibColors = (d.fibColors && d.fibColors.length) ? d.fibColors : _getFibColors(); + var fibEnabled = d.fibEnabled || []; + var showLbls = d.showLabels !== false; + for (var fi = 0; fi < fibLevels.length; fi++) { + if (fibEnabled[fi] === false) continue; + var lvl = fibLevels[fi]; + var off = cOff * lvl; + var fc = fibColors[fi] || col; + ctx.strokeStyle = fc; + ctx.lineWidth = lvl === 0 || lvl === 1 ? lw : Math.max(1, lw - 1); + ctx.setLineDash(lvl === 0 || lvl === 1 ? [] : [4, 3]); + ctx.beginPath(); + ctx.moveTo(fcA.x + px * off, fcA.y + py * off); + ctx.lineTo(fcB.x + px * off, fcB.y + py * off); + ctx.stroke(); + if (showLbls) { + ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; + ctx.fillStyle = fc; + ctx.fillText(lvl.toFixed(3), fcA.x + px * off + 4, fcA.y + py * off - 4); + } + } + // Fill between 0 and 1 levels + if (d.fillEnabled !== false) { + ctx.fillStyle = d.fillColor || col; + ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.04; + ctx.beginPath(); + ctx.moveTo(fcA.x, fcA.y); + ctx.lineTo(fcB.x, fcB.y); + ctx.lineTo(fcB.x + px * cOff, fcB.y + py * cOff); + ctx.lineTo(fcA.x + px * cOff, fcA.y + py * cOff); + ctx.closePath(); + ctx.fill(); + ctx.globalAlpha = 1.0; + } + ctx.setLineDash([]); + ctx.lineWidth = lw; + } + } + } + } else if (d.type === 'fib_timezone') { + // Fib Time Zone: vertical lines at fibonacci time intervals from anchor + var ftzA = _tvToPixel(chartId, d.t1, d.p1); + var ftzB = _tvToPixel(chartId, d.t2, d.p2); + if (ftzA && ftzB) { + var tDiff = d.t2 - d.t1; + var fibNums = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144]; + var fibColors = (d.fibColors && d.fibColors.length) ? d.fibColors : _getFibColors(); + var fibTzEnabled = d.fibEnabled || []; + var showLbls = d.showLabels !== false; + for (var fi = 0; fi < fibNums.length; fi++) { + if (fibTzEnabled[fi] === false) continue; + var tLine = d.t1 + tDiff * fibNums[fi]; + var xPx = _tvToPixel(chartId, tLine, d.p1); + if (!xPx) continue; + if (xPx.x < 0 || xPx.x > w) continue; + var fc = fibColors[fi % fibColors.length] || col; + ctx.strokeStyle = fc; + ctx.lineWidth = fi < 3 ? lw : Math.max(1, lw - 1); + ctx.setLineDash(fi < 3 ? [] : [4, 3]); + ctx.beginPath(); ctx.moveTo(xPx.x, 0); ctx.lineTo(xPx.x, h); ctx.stroke(); + if (showLbls) { + ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; + ctx.fillStyle = fc; + ctx.fillText(String(fibNums[fi]), xPx.x + 3, 14); + } + } + ctx.setLineDash([]); + ctx.lineWidth = lw; + // Trend line connecting anchors + if (d.showTrendLine !== false) { + ctx.strokeStyle = col; + ctx.setLineDash([6, 4]); + ctx.globalAlpha = 0.5; + ctx.beginPath(); ctx.moveTo(ftzA.x, ftzA.y); ctx.lineTo(ftzB.x, ftzB.y); ctx.stroke(); + ctx.globalAlpha = 1.0; + ctx.setLineDash([]); + } + } + } else if (d.type === 'fib_fan') { + // Fib Speed Resistance Fan: fan lines from anchor A through fib-interpolated points on B + var ffA = _tvToPixel(chartId, d.t1, d.p1); + var ffB = _tvToPixel(chartId, d.t2, d.p2); + if (ffA && ffB) { + var fibLevels = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : _FIB_LEVELS.slice(); + var fibColors = (d.fibColors && d.fibColors.length) ? d.fibColors : _getFibColors(); + var fibEnabled = d.fibEnabled || []; + var showLbls = d.showLabels !== false; + var fdx = ffB.x - ffA.x, fdy = ffB.y - ffA.y; + for (var fi = 0; fi < fibLevels.length; fi++) { + if (fibEnabled[fi] === false) continue; + var lvl = fibLevels[fi]; + if (lvl === 0) continue; // 0 level = horizontal through A + var fc = fibColors[fi] || col; + // Fan line from A to point at (B.x, lerp(A.y, B.y, lvl)) + var fanY = ffA.y + fdy * lvl; + ctx.strokeStyle = fc; + ctx.lineWidth = lvl === 1 ? lw : Math.max(1, lw - 1); + ctx.setLineDash(lvl === 1 ? [] : [4, 3]); + // Extend the line beyond B + var extLen = 4000; + var fDx = ffB.x - ffA.x, fDy = fanY - ffA.y; + var fLen = Math.sqrt(fDx * fDx + fDy * fDy); + if (fLen > 0) { + var eX = ffA.x + (fDx / fLen) * extLen; + var eY = ffA.y + (fDy / fLen) * extLen; + ctx.beginPath(); ctx.moveTo(ffA.x, ffA.y); ctx.lineTo(eX, eY); ctx.stroke(); + } + if (showLbls) { + ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; + ctx.fillStyle = fc; + ctx.fillText(lvl.toFixed(3), ffB.x + 4, fanY - 4); + } + } + // Fill between adjacent fan lines + if (d.fillEnabled !== false) { + ctx.fillStyle = col; + ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.03; + for (var fi = 0; fi < fibLevels.length - 1; fi++) { + if (fibEnabled[fi] === false || fibEnabled[fi + 1] === false) continue; + var y1 = ffA.y + fdy * fibLevels[fi]; + var y2 = ffA.y + fdy * fibLevels[fi + 1]; + ctx.beginPath(); + ctx.moveTo(ffA.x, ffA.y); + ctx.lineTo(ffB.x, y1); + ctx.lineTo(ffB.x, y2); + ctx.closePath(); + ctx.fill(); + } + ctx.globalAlpha = 1.0; + } + ctx.setLineDash([]); + ctx.lineWidth = lw; + } + } else if (d.type === 'fib_arc') { + // Fib Speed Resistance Arcs: semi-circle arcs centered at A, opening away from B + var faA = _tvToPixel(chartId, d.t1, d.p1); + var faB = _tvToPixel(chartId, d.t2, d.p2); + if (faA && faB) { + var abDist = Math.sqrt(Math.pow(faB.x - faA.x, 2) + Math.pow(faB.y - faA.y, 2)); + var fibLevels = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : _FIB_LEVELS.slice(); + var fibColors = (d.fibColors && d.fibColors.length) ? d.fibColors : _getFibColors(); + var fibEnabled = d.fibEnabled || []; + var showLbls = d.showLabels !== false; + // Angle from A to B — arcs open in the opposite direction (away from B) + var abAngle = Math.atan2(faB.y - faA.y, faB.x - faA.x); + var arcStart = abAngle + Math.PI / 2; + var arcEnd = abAngle - Math.PI / 2; + // Trend line + if (d.showTrendLine !== false) { + ctx.strokeStyle = col; + ctx.setLineDash([6, 4]); + ctx.globalAlpha = 0.5; + ctx.beginPath(); ctx.moveTo(faA.x, faA.y); ctx.lineTo(faB.x, faB.y); ctx.stroke(); + ctx.globalAlpha = 1.0; + ctx.setLineDash([]); + } + for (var fi = 0; fi < fibLevels.length; fi++) { + if (fibEnabled[fi] === false) continue; + var lvl = fibLevels[fi]; + if (lvl === 0) continue; + var fc = fibColors[fi] || col; + var arcR = abDist * lvl; + ctx.strokeStyle = fc; + ctx.lineWidth = lvl === 1 ? lw : Math.max(1, lw - 1); + ctx.setLineDash(lvl === 1 ? [] : [4, 3]); + ctx.beginPath(); + ctx.arc(faA.x, faA.y, arcR, arcStart, arcEnd); + ctx.stroke(); + if (showLbls) { + ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; + ctx.fillStyle = fc; + // Label at the end of the arc (perpendicular to AB) + var lblX = faA.x + arcR * Math.cos(arcEnd) + 3; + var lblY = faA.y + arcR * Math.sin(arcEnd) - 4; + ctx.fillText(lvl.toFixed(3), lblX, lblY); + } + } + ctx.setLineDash([]); + ctx.lineWidth = lw; + } + } else if (d.type === 'fib_circle') { + // Fib Circles: concentric circles centered at midpoint of AB with fib-scaled radii + var fcirA = _tvToPixel(chartId, d.t1, d.p1); + var fcirB = _tvToPixel(chartId, d.t2, d.p2); + if (fcirA && fcirB) { + var cMidX = (fcirA.x + fcirB.x) / 2, cMidY = (fcirA.y + fcirB.y) / 2; + var baseR = Math.sqrt(Math.pow(fcirB.x - fcirA.x, 2) + Math.pow(fcirB.y - fcirA.y, 2)) / 2; + var fibLevels = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : _FIB_LEVELS.slice(); + var fibColors = (d.fibColors && d.fibColors.length) ? d.fibColors : _getFibColors(); + var fibEnabled = d.fibEnabled || []; + var showLbls = d.showLabels !== false; + for (var fi = 0; fi < fibLevels.length; fi++) { + if (fibEnabled[fi] === false) continue; + var lvl = fibLevels[fi]; + if (lvl === 0) continue; + var fc = fibColors[fi] || col; + var cR = baseR * lvl; + ctx.strokeStyle = fc; + ctx.lineWidth = lvl === 1 ? lw : Math.max(1, lw - 1); + ctx.setLineDash(lvl === 1 ? [] : [4, 3]); + ctx.beginPath(); + ctx.arc(cMidX, cMidY, cR, 0, Math.PI * 2); + ctx.stroke(); + if (showLbls) { + ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; + ctx.fillStyle = fc; + ctx.fillText(lvl.toFixed(3), cMidX + cR + 3, cMidY - 4); + } + } + // Trend line + if (d.showTrendLine !== false) { + ctx.strokeStyle = col; + ctx.setLineDash([6, 4]); + ctx.globalAlpha = 0.5; + ctx.beginPath(); ctx.moveTo(fcirA.x, fcirA.y); ctx.lineTo(fcirB.x, fcirB.y); ctx.stroke(); + ctx.globalAlpha = 1.0; + ctx.setLineDash([]); + } + ctx.lineWidth = lw; + } + } else if (d.type === 'fib_wedge') { + // Fib Wedge: two trend lines from A→B and A→C with fib levels between them + var fwA = _tvToPixel(chartId, d.t1, d.p1); + var fwB = _tvToPixel(chartId, d.t2, d.p2); + var fwC = d.t3 !== undefined ? _tvToPixel(chartId, d.t3, d.p3) : null; + if (fwA && fwB) { + ctx.strokeStyle = col; + ctx.lineWidth = lw; + ctx.setLineDash([]); + // Draw A→B + ctx.beginPath(); ctx.moveTo(fwA.x, fwA.y); ctx.lineTo(fwB.x, fwB.y); ctx.stroke(); + if (fwC) { + // Draw A→C + ctx.beginPath(); ctx.moveTo(fwA.x, fwA.y); ctx.lineTo(fwC.x, fwC.y); ctx.stroke(); + // Fib lines between A→B and A→C + var fibLevels = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : _FIB_LEVELS.slice(); + var fibColors = (d.fibColors && d.fibColors.length) ? d.fibColors : _getFibColors(); + var fibEnabled = d.fibEnabled || []; + var showLbls = d.showLabels !== false; + for (var fi = 0; fi < fibLevels.length; fi++) { + if (fibEnabled[fi] === false) continue; + var lvl = fibLevels[fi]; + if (lvl === 0 || lvl === 1) continue; + var fc = fibColors[fi] || col; + // Interpolated endpoint between B and C + var wEndX = fwB.x + (fwC.x - fwB.x) * lvl; + var wEndY = fwB.y + (fwC.y - fwB.y) * lvl; + ctx.strokeStyle = fc; + ctx.lineWidth = Math.max(1, lw - 1); + ctx.setLineDash([4, 3]); + ctx.beginPath(); ctx.moveTo(fwA.x, fwA.y); ctx.lineTo(wEndX, wEndY); ctx.stroke(); + if (showLbls) { + ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; + ctx.fillStyle = fc; + ctx.fillText(lvl.toFixed(3), wEndX + 4, wEndY - 4); + } + } + // Fill + if (d.fillEnabled !== false) { + ctx.fillStyle = d.fillColor || col; + ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.04; + ctx.beginPath(); + ctx.moveTo(fwA.x, fwA.y); + ctx.lineTo(fwB.x, fwB.y); + ctx.lineTo(fwC.x, fwC.y); + ctx.closePath(); + ctx.fill(); + ctx.globalAlpha = 1.0; + } + ctx.setLineDash([]); + ctx.lineWidth = lw; + } + } + } else if (d.type === 'pitchfan') { + // Pitchfan: median line from A to midpoint(B,C), with fan lines from A through fib divisions + var pfA = _tvToPixel(chartId, d.t1, d.p1); + var pfB = _tvToPixel(chartId, d.t2, d.p2); + var pfC = d.t3 !== undefined ? _tvToPixel(chartId, d.t3, d.p3) : null; + if (pfA && pfB) { + ctx.strokeStyle = col; + ctx.lineWidth = lw; + ctx.setLineDash([]); + ctx.beginPath(); ctx.moveTo(pfA.x, pfA.y); ctx.lineTo(pfB.x, pfB.y); ctx.stroke(); + if (pfC) { + ctx.beginPath(); ctx.moveTo(pfA.x, pfA.y); ctx.lineTo(pfC.x, pfC.y); ctx.stroke(); + // Median line to midpoint of B and C + var pfMidX = (pfB.x + pfC.x) / 2, pfMidY = (pfB.y + pfC.y) / 2; + if (d.showMedian !== false) { + ctx.strokeStyle = d.medianColor || col; + ctx.setLineDash([6, 4]); + ctx.beginPath(); ctx.moveTo(pfA.x, pfA.y); ctx.lineTo(pfMidX, pfMidY); ctx.stroke(); + ctx.setLineDash([]); + ctx.strokeStyle = col; + } + // Fan lines from A through fib divisions between B and C + var pfDefLevels = [0.236, 0.382, 0.5, 0.618, 0.786]; + var fibLevels = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : pfDefLevels; + var fibColors = (d.fibColors && d.fibColors.length) ? d.fibColors : _getFibColors(); + var fibEnabled = d.fibEnabled || []; + var showLbls = d.showLabels !== false; + for (var fi = 0; fi < fibLevels.length; fi++) { + if (fibEnabled[fi] === false) continue; + var lvl = fibLevels[fi]; + var fc = fibColors[fi] || col; + var pfTgtX = pfB.x + (pfC.x - pfB.x) * lvl; + var pfTgtY = pfB.y + (pfC.y - pfB.y) * lvl; + // Extend from A through target point + var pfDx = pfTgtX - pfA.x, pfDy = pfTgtY - pfA.y; + var pfLen = Math.sqrt(pfDx * pfDx + pfDy * pfDy); + if (pfLen > 0) { + var pfExt = 4000; + ctx.strokeStyle = fc; + ctx.lineWidth = Math.max(1, lw - 1); + ctx.setLineDash([4, 3]); + ctx.beginPath(); + ctx.moveTo(pfA.x, pfA.y); + ctx.lineTo(pfA.x + (pfDx / pfLen) * pfExt, pfA.y + (pfDy / pfLen) * pfExt); + ctx.stroke(); + } + if (showLbls) { + ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; + ctx.fillStyle = fc; + ctx.fillText(lvl.toFixed(3), pfTgtX + 4, pfTgtY - 4); + } + } + ctx.setLineDash([]); + ctx.lineWidth = lw; + } + } + } else if (d.type === 'fib_time') { + // Trend-Based Fib Time: 3-point, A→B time range projected from C as vertical lines + var ftA = _tvToPixel(chartId, d.t1, d.p1); + var ftB = _tvToPixel(chartId, d.t2, d.p2); + var ftC = d.t3 !== undefined ? _tvToPixel(chartId, d.t3, d.p3) : null; + if (ftA && ftB) { + var tDiff = d.t2 - d.t1; + // Trend line A→B + ctx.strokeStyle = col; + ctx.lineWidth = lw; + ctx.setLineDash([6, 4]); + ctx.globalAlpha = 0.5; + ctx.beginPath(); ctx.moveTo(ftA.x, ftA.y); ctx.lineTo(ftB.x, ftB.y); ctx.stroke(); + if (ftC) { + ctx.beginPath(); ctx.moveTo(ftB.x, ftB.y); ctx.lineTo(ftC.x, ftC.y); ctx.stroke(); + } + ctx.globalAlpha = 1.0; + ctx.setLineDash([]); + // Vertical lines at fib ratios of AB time, projected from C + var projT = ftC ? d.t3 : d.t1; + var ftLevels = (d.fibLevelValues && d.fibLevelValues.length) ? d.fibLevelValues : [0, 0.382, 0.5, 0.618, 1, 1.382, 1.618, 2, 2.618, 4.236]; + var fibColors = (d.fibColors && d.fibColors.length) ? d.fibColors : _getFibColors(); + var fibEnabled = d.fibEnabled || []; + var showLbls = d.showLabels !== false; + for (var fi = 0; fi < ftLevels.length; fi++) { + if (fibEnabled[fi] === false) continue; + var tLine = projT + tDiff * ftLevels[fi]; + var xPx = _tvToPixel(chartId, tLine, d.p1); + if (!xPx) continue; + if (xPx.x < 0 || xPx.x > w) continue; + var fc = fibColors[fi % fibColors.length] || col; + ctx.strokeStyle = fc; + ctx.lineWidth = (ftLevels[fi] === 0 || ftLevels[fi] === 1) ? lw : Math.max(1, lw - 1); + ctx.setLineDash((ftLevels[fi] === 0 || ftLevels[fi] === 1) ? [] : [4, 3]); + ctx.beginPath(); ctx.moveTo(xPx.x, 0); ctx.lineTo(xPx.x, h); ctx.stroke(); + if (showLbls) { + ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; + ctx.fillStyle = fc; + ctx.fillText(ftLevels[fi].toFixed(3), xPx.x + 3, 14); + } + } + ctx.setLineDash([]); + ctx.lineWidth = lw; + } + } else if (d.type === 'fib_spiral') { + // Fib Spiral: golden logarithmic spiral from center A through B + var fsA = _tvToPixel(chartId, d.t1, d.p1); + var fsB = _tvToPixel(chartId, d.t2, d.p2); + if (fsA && fsB) { + var fsDx = fsB.x - fsA.x, fsDy = fsB.y - fsA.y; + var fsR = Math.sqrt(fsDx * fsDx + fsDy * fsDy); + var fsStartAngle = Math.atan2(fsDy, fsDx); + var fsPhi = 1.6180339887; + var fsGrowth = Math.log(fsPhi) / (Math.PI / 2); + ctx.strokeStyle = col; + ctx.lineWidth = lw; + ctx.beginPath(); + var fsNPts = 400; + var fsMinTheta = -4 * Math.PI; + var fsMaxTheta = 4 * Math.PI; + var fsFirst = true; + for (var fi = 0; fi <= fsNPts; fi++) { + var theta = fsMinTheta + (fi / fsNPts) * (fsMaxTheta - fsMinTheta); + var r = fsR * Math.exp(fsGrowth * theta); + if (r < 1 || r > 5000) { fsFirst = true; continue; } + var sx = fsA.x + r * Math.cos(fsStartAngle + theta); + var sy = fsA.y + r * Math.sin(fsStartAngle + theta); + if (fsFirst) { ctx.moveTo(sx, sy); fsFirst = false; } + else ctx.lineTo(sx, sy); + } + ctx.stroke(); + // AB reference line + ctx.setLineDash([6, 4]); + ctx.globalAlpha = 0.5; + ctx.beginPath(); ctx.moveTo(fsA.x, fsA.y); ctx.lineTo(fsB.x, fsB.y); ctx.stroke(); + ctx.globalAlpha = 1.0; + ctx.setLineDash([]); + } + } else if (d.type === 'gann_box') { + // Gann Box: rectangular grid with diagonal, price/time subdivisions + var gbA = _tvToPixel(chartId, d.t1, d.p1); + var gbB = _tvToPixel(chartId, d.t2, d.p2); + if (gbA && gbB) { + var gblx = Math.min(gbA.x, gbB.x), gbrx = Math.max(gbA.x, gbB.x); + var gbty = Math.min(gbA.y, gbB.y), gbby = Math.max(gbA.y, gbB.y); + var gbW = gbrx - gblx, gbH = gbby - gbty; + // Box outline + ctx.strokeStyle = col; + ctx.lineWidth = lw; + ctx.strokeRect(gblx, gbty, gbW, gbH); + // Horizontal grid lines + var gbLevels = d.gannLevels || [0.25, 0.5, 0.75]; + var gbColors = (d.fibColors && d.fibColors.length) ? d.fibColors : []; + var gbEnabled = d.fibEnabled || []; + for (var gi = 0; gi < gbLevels.length; gi++) { + if (gbEnabled[gi] === false) continue; + var gy = gbty + gbH * gbLevels[gi]; + ctx.strokeStyle = gbColors[gi] || col; + ctx.lineWidth = Math.max(1, lw - 1); + ctx.setLineDash([4, 3]); + ctx.beginPath(); ctx.moveTo(gblx, gy); ctx.lineTo(gbrx, gy); ctx.stroke(); + } + // Vertical grid lines + for (var gi = 0; gi < gbLevels.length; gi++) { + if (gbEnabled[gi] === false) continue; + var gx = gblx + gbW * gbLevels[gi]; + ctx.strokeStyle = gbColors[gi] || col; + ctx.lineWidth = Math.max(1, lw - 1); + ctx.setLineDash([4, 3]); + ctx.beginPath(); ctx.moveTo(gx, gbty); ctx.lineTo(gx, gbby); ctx.stroke(); + } + ctx.setLineDash([]); + // Main diagonal + ctx.strokeStyle = col; + ctx.lineWidth = lw; + ctx.beginPath(); ctx.moveTo(gblx, gbby); ctx.lineTo(gbrx, gbty); ctx.stroke(); + // Counter-diagonal + ctx.setLineDash([4, 3]); + ctx.beginPath(); ctx.moveTo(gblx, gbty); ctx.lineTo(gbrx, gbby); ctx.stroke(); + ctx.setLineDash([]); + // Background fill + if (d.fillEnabled !== false) { + ctx.fillStyle = d.fillColor || col; + ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.03; + ctx.fillRect(gblx, gbty, gbW, gbH); + ctx.globalAlpha = 1.0; + } + } + } else if (d.type === 'gann_square_fixed') { + // Gann Square Fixed: fixed-ratio square grid + var gsfA = _tvToPixel(chartId, d.t1, d.p1); + var gsfB = _tvToPixel(chartId, d.t2, d.p2); + if (gsfA && gsfB) { + var gsfDx = Math.abs(gsfB.x - gsfA.x), gsfDy = Math.abs(gsfB.y - gsfA.y); + var gsfSize = Math.max(gsfDx, gsfDy); + var gsfX = Math.min(gsfA.x, gsfB.x), gsfY = Math.min(gsfA.y, gsfB.y); + ctx.strokeStyle = col; + ctx.lineWidth = lw; + ctx.strokeRect(gsfX, gsfY, gsfSize, gsfSize); + var gsfLevels = d.gannLevels || [0.25, 0.5, 0.75]; + var gsfColors = (d.fibColors && d.fibColors.length) ? d.fibColors : []; + var gsfEnabled = d.fibEnabled || []; + for (var gi = 0; gi < gsfLevels.length; gi++) { + if (gsfEnabled[gi] === false) continue; + var gy = gsfY + gsfSize * gsfLevels[gi]; + var gx = gsfX + gsfSize * gsfLevels[gi]; + ctx.strokeStyle = gsfColors[gi] || col; + ctx.lineWidth = Math.max(1, lw - 1); + ctx.setLineDash([4, 3]); + ctx.beginPath(); ctx.moveTo(gsfX, gy); ctx.lineTo(gsfX + gsfSize, gy); ctx.stroke(); + ctx.beginPath(); ctx.moveTo(gx, gsfY); ctx.lineTo(gx, gsfY + gsfSize); ctx.stroke(); + } + ctx.setLineDash([]); + ctx.strokeStyle = col; + ctx.lineWidth = lw; + ctx.beginPath(); ctx.moveTo(gsfX, gsfY + gsfSize); ctx.lineTo(gsfX + gsfSize, gsfY); ctx.stroke(); + ctx.setLineDash([4, 3]); + ctx.beginPath(); ctx.moveTo(gsfX, gsfY); ctx.lineTo(gsfX + gsfSize, gsfY + gsfSize); ctx.stroke(); + ctx.setLineDash([]); + if (d.fillEnabled !== false) { + ctx.fillStyle = d.fillColor || col; + ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.03; + ctx.fillRect(gsfX, gsfY, gsfSize, gsfSize); + ctx.globalAlpha = 1.0; + } + } + } else if (d.type === 'gann_square') { + // Gann Square: rectangular grid with diagonals and mid-cross + var gsA = _tvToPixel(chartId, d.t1, d.p1); + var gsB = _tvToPixel(chartId, d.t2, d.p2); + if (gsA && gsB) { + var gslx = Math.min(gsA.x, gsB.x), gsrx = Math.max(gsA.x, gsB.x); + var gsty = Math.min(gsA.y, gsB.y), gsby = Math.max(gsA.y, gsB.y); + var gsW = gsrx - gslx, gsH = gsby - gsty; + ctx.strokeStyle = col; + ctx.lineWidth = lw; + ctx.strokeRect(gslx, gsty, gsW, gsH); + var gsLevels = d.gannLevels || [0.25, 0.5, 0.75]; + var gsColors = (d.fibColors && d.fibColors.length) ? d.fibColors : []; + var gsEnabled = d.fibEnabled || []; + for (var gi = 0; gi < gsLevels.length; gi++) { + if (gsEnabled[gi] === false) continue; + var gy = gsty + gsH * gsLevels[gi]; + var gx = gslx + gsW * gsLevels[gi]; + ctx.strokeStyle = gsColors[gi] || col; + ctx.lineWidth = Math.max(1, lw - 1); + ctx.setLineDash([4, 3]); + ctx.beginPath(); ctx.moveTo(gslx, gy); ctx.lineTo(gsrx, gy); ctx.stroke(); + ctx.beginPath(); ctx.moveTo(gx, gsty); ctx.lineTo(gx, gsby); ctx.stroke(); + } + ctx.setLineDash([]); + ctx.strokeStyle = col; + ctx.lineWidth = lw; + ctx.beginPath(); ctx.moveTo(gslx, gsby); ctx.lineTo(gsrx, gsty); ctx.stroke(); + ctx.setLineDash([4, 3]); + ctx.beginPath(); ctx.moveTo(gslx, gsty); ctx.lineTo(gsrx, gsby); ctx.stroke(); + ctx.setLineDash([]); + // Mid-cross + var gsMidX = (gslx + gsrx) / 2, gsMidY = (gsty + gsby) / 2; + ctx.setLineDash([2, 2]); + ctx.globalAlpha = 0.4; + ctx.beginPath(); ctx.moveTo(gsMidX, gsty); ctx.lineTo(gsMidX, gsby); ctx.stroke(); + ctx.beginPath(); ctx.moveTo(gslx, gsMidY); ctx.lineTo(gsrx, gsMidY); ctx.stroke(); + ctx.globalAlpha = 1.0; + ctx.setLineDash([]); + if (d.fillEnabled !== false) { + ctx.fillStyle = d.fillColor || col; + ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.03; + ctx.fillRect(gslx, gsty, gsW, gsH); + ctx.globalAlpha = 1.0; + } + } + } else if (d.type === 'gann_fan') { + // Gann Fan: fan lines from A at standard Gann angles, B defines the 1x1 line + var gfA = _tvToPixel(chartId, d.t1, d.p1); + var gfB = _tvToPixel(chartId, d.t2, d.p2); + if (gfA && gfB) { + var gfDx = gfB.x - gfA.x, gfDy = gfB.y - gfA.y; + var gannAngles = [ + { name: '1\u00d78', ratio: 0.125 }, + { name: '1\u00d74', ratio: 0.25 }, + { name: '1\u00d73', ratio: 0.333 }, + { name: '1\u00d72', ratio: 0.5 }, + { name: '1\u00d71', ratio: 1 }, + { name: '2\u00d71', ratio: 2 }, + { name: '3\u00d71', ratio: 3 }, + { name: '4\u00d71', ratio: 4 }, + { name: '8\u00d71', ratio: 8 } + ]; + var gfColors = (d.fibColors && d.fibColors.length) ? d.fibColors : []; + var gfEnabled = d.fibEnabled || []; + var showLbls = d.showLabels !== false; + for (var gi = 0; gi < gannAngles.length; gi++) { + if (gfEnabled[gi] === false) continue; + var gRatio = gannAngles[gi].ratio; + var fanEndX = gfA.x + gfDx; + var fanEndY = gfA.y + gfDy * gRatio; + var fDx = fanEndX - gfA.x, fDy = fanEndY - gfA.y; + var fLen = Math.sqrt(fDx * fDx + fDy * fDy); + if (fLen > 0) { + var extLen = 4000; + var eX = gfA.x + (fDx / fLen) * extLen; + var eY = gfA.y + (fDy / fLen) * extLen; + ctx.strokeStyle = gfColors[gi] || col; + ctx.lineWidth = gRatio === 1 ? lw : Math.max(1, lw - 1); + ctx.setLineDash(gRatio === 1 ? [] : [4, 3]); + ctx.beginPath(); ctx.moveTo(gfA.x, gfA.y); ctx.lineTo(eX, eY); ctx.stroke(); + if (showLbls) { + ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; + ctx.fillStyle = gfColors[gi] || col; + ctx.fillText(gannAngles[gi].name, fanEndX + 4, fanEndY - 4); + } + } + } + ctx.setLineDash([]); + ctx.lineWidth = lw; + } + } else if (d.type === 'measure') { + var m1 = _tvToPixel(chartId, d.t1, d.p1); + var m2 = _tvToPixel(chartId, d.t2, d.p2); + if (m1 && m2) { + var priceDiff = d.p2 - d.p1; + var pctChange = d.p1 !== 0 ? ((priceDiff / d.p1) * 100) : 0; + var isUp = priceDiff >= 0; + var measureUpCol = d.colorUp || _cssVar('--pywry-draw-measure-up'); + var measureDnCol = d.colorDown || _cssVar('--pywry-draw-measure-down'); + var measureCol = isUp ? measureUpCol : measureDnCol; + ctx.strokeStyle = measureCol; + ctx.fillStyle = measureCol; + + // Shaded rectangle between the two points (like TV) + var mrx = Math.min(m1.x, m2.x), mry = Math.min(m1.y, m2.y); + var mrw = Math.abs(m2.x - m1.x), mrh = Math.abs(m2.y - m1.y); + ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.08; + ctx.fillRect(mrx, mry, mrw, mrh); + ctx.globalAlpha = 1.0; + + // Vertical dashed lines at each x + ctx.setLineDash([3, 3]); + ctx.beginPath(); + ctx.moveTo(m1.x, Math.min(m1.y, m2.y) - 20); + ctx.lineTo(m1.x, Math.max(m1.y, m2.y) + 20); + ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(m2.x, Math.min(m1.y, m2.y) - 20); + ctx.lineTo(m2.x, Math.max(m1.y, m2.y) + 20); + ctx.stroke(); + ctx.setLineDash([]); + + // Horizontal lines at each price + ctx.lineWidth = 1; + ctx.beginPath(); + ctx.moveTo(mrx, m1.y); + ctx.lineTo(mrx + mrw, m1.y); + ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(mrx, m2.y); + ctx.lineTo(mrx + mrw, m2.y); + ctx.stroke(); + ctx.lineWidth = lw; + + // Info label (like TV: "−15.76 (−5.64%) −1,576") + var label = (isUp ? '+' : '') + priceDiff.toFixed(2) + + ' (' + (isUp ? '+' : '') + pctChange.toFixed(2) + '%)'; + var mFontSize = d.fontSize || 12; + ctx.font = 'bold ' + mFontSize + 'px -apple-system,BlinkMacSystemFont,sans-serif'; + var met = ctx.measureText(label); + var boxPad = 6; + var bx = (m1.x + m2.x) / 2 - met.width / 2 - boxPad; + var by = Math.min(m1.y, m2.y) - 28; + // Background pill + ctx.fillStyle = measureCol; + ctx.globalAlpha = 0.9; + _roundRect(ctx, bx, by, met.width + boxPad * 2, 22, 4); + ctx.fill(); + ctx.globalAlpha = 1.0; + ctx.fillStyle = _cssVar('--pywry-draw-label-text'); + ctx.textBaseline = 'middle'; + ctx.fillText(label, bx + boxPad, by + 11); + ctx.textBaseline = 'alphabetic'; + } + } else if (d.type === 'ray') { + // Ray: from point A through point B, extending to infinity in B direction + var ra = _tvToPixel(chartId, d.t1, d.p1); + var rb = _tvToPixel(chartId, d.t2, d.p2); + if (ra && rb) { + var rdx = rb.x - ra.x, rdy = rb.y - ra.y; + var rlen = Math.sqrt(rdx * rdx + rdy * rdy); + if (rlen > 0) { + var ext = 4000; + var rux = rdx / rlen, ruy = rdy / rlen; + ctx.beginPath(); + ctx.moveTo(ra.x, ra.y); + ctx.lineTo(ra.x + rux * ext, ra.y + ruy * ext); + ctx.stroke(); + } + // Text annotation + if (d.text) { + var rMidX = (ra.x + rb.x) / 2, rMidY = (ra.y + rb.y) / 2; + var rFs = d.textFontSize || 12; + var rTStyle = (d.textItalic ? 'italic ' : '') + (d.textBold ? 'bold ' : ''); + ctx.font = rTStyle + rFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; + ctx.fillStyle = d.textColor || col; + ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; + ctx.fillText(d.text, rMidX, rMidY - 6); + ctx.textAlign = 'start'; ctx.textBaseline = 'alphabetic'; + } + } + } else if (d.type === 'extended_line') { + // Extended line: infinite in both directions through A and B + var ea = _tvToPixel(chartId, d.t1, d.p1); + var eb = _tvToPixel(chartId, d.t2, d.p2); + if (ea && eb) { + var edx = eb.x - ea.x, edy = eb.y - ea.y; + var elen = Math.sqrt(edx * edx + edy * edy); + if (elen > 0) { + var eext = 4000; + var eux = edx / elen, euy = edy / elen; + ctx.beginPath(); + ctx.moveTo(ea.x - eux * eext, ea.y - euy * eext); + ctx.lineTo(eb.x + eux * eext, eb.y + euy * eext); + ctx.stroke(); + } + // Text annotation + if (d.text) { + var eMidX = (ea.x + eb.x) / 2, eMidY = (ea.y + eb.y) / 2; + var eFs = d.textFontSize || 12; + var eTStyle = (d.textItalic ? 'italic ' : '') + (d.textBold ? 'bold ' : ''); + ctx.font = eTStyle + eFs + 'px -apple-system,BlinkMacSystemFont,sans-serif'; + ctx.fillStyle = d.textColor || col; + ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; + ctx.fillText(d.text, eMidX, eMidY - 6); + ctx.textAlign = 'start'; ctx.textBaseline = 'alphabetic'; + } + } + } else if (d.type === 'hray') { + // Horizontal ray: from anchor point extending right + var hry = series.priceToCoordinate(d.p1); + var hra = _tvToPixel(chartId, d.t1, d.p1); + if (hry !== null && hra) { + ctx.beginPath(); + ctx.moveTo(hra.x, hry); + ctx.lineTo(w, hry); + ctx.stroke(); + } + } else if (d.type === 'vline') { + // Vertical line: at a specific time, top to bottom + var va = _tvToPixel(chartId, d.t1, d.p1 || 0); + if (va) { + ctx.beginPath(); + ctx.moveTo(va.x, 0); + ctx.lineTo(va.x, h); + ctx.stroke(); + } + } else if (d.type === 'crossline') { + // Cross line: vertical + horizontal at a specific point + var cla = _tvToPixel(chartId, d.t1, d.p1); + var cly = series.priceToCoordinate(d.p1); + if (cla && cly !== null) { + ctx.beginPath(); + ctx.moveTo(cla.x, 0); + ctx.lineTo(cla.x, h); + ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(0, cly); + ctx.lineTo(w, cly); + ctx.stroke(); + } + } else if (d.type === 'flat_channel') { + // Flat top/bottom: two horizontal parallel lines at p1 and p2 + var fy1 = series.priceToCoordinate(d.p1); + var fy2 = series.priceToCoordinate(d.p2); + if (fy1 !== null && fy2 !== null) { + if (d.fillEnabled !== false) { + ctx.fillStyle = d.fillColor || col; + ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.08; + ctx.fillRect(0, Math.min(fy1, fy2), w, Math.abs(fy2 - fy1)); + ctx.globalAlpha = 1.0; + } + ctx.beginPath(); + ctx.moveTo(0, fy1); + ctx.lineTo(w, fy1); + ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(0, fy2); + ctx.lineTo(w, fy2); + ctx.stroke(); + } + } else if (d.type === 'regression_channel') { + // Regression channel: linear regression with separate base/up/down lines + var ra1 = _tvToPixel(chartId, d.t1, d.p1); + var ra2 = _tvToPixel(chartId, d.t2, d.p2); + if (ra1 && ra2) { + var rcUpOff = d.upperDeviation !== undefined ? d.upperDeviation : (d.offset || 30); + var rcDnOff = d.lowerDeviation !== undefined ? d.lowerDeviation : (d.offset || 30); + var useUpper = d.useUpperDeviation !== false; + var useLower = d.useLowerDeviation !== false; + var ext = 4000; + // Extend lines support + var doExtend = !!d.extendLines; + var dx = ra2.x - ra1.x, dy = ra2.y - ra1.y; + var len = Math.sqrt(dx * dx + dy * dy); + var ux = len > 0 ? dx / len : 1, uy = len > 0 ? dy / len : 0; + var sx1 = ra1.x, sy1 = ra1.y, sx2 = ra2.x, sy2 = ra2.y; + if (doExtend && len > 0) { + sx1 = ra1.x - ux * ext; sy1 = ra1.y - uy * ext; + sx2 = ra2.x + ux * ext; sy2 = ra2.y + uy * ext; + } + // Perpendicular unit vector (pointing upward in screen coords) + var px = len > 0 ? -dy / len : 0, py = len > 0 ? dx / len : -1; + // Helper: apply per-line style + function _rcSetLineStyle(lineStyle) { + ctx.setLineDash(lineStyle === 1 ? [6,4] : lineStyle === 2 ? [2,3] : []); + } + // Base line + if (d.showBaseLine !== false) { + ctx.strokeStyle = d.baseColor || col; + ctx.lineWidth = d.baseWidth || defW; + _rcSetLineStyle(d.baseLineStyle !== undefined ? d.baseLineStyle : (d.lineStyle || 0)); + ctx.beginPath(); + ctx.moveTo(sx1, sy1); + ctx.lineTo(sx2, sy2); + ctx.stroke(); + } + // Upper bound + if (useUpper && d.showUpLine !== false) { + ctx.strokeStyle = d.upColor || col; + ctx.lineWidth = d.upWidth || defW; + _rcSetLineStyle(d.upLineStyle !== undefined ? d.upLineStyle : 1); + ctx.globalAlpha = 0.8; + ctx.beginPath(); + ctx.moveTo(sx1 + px * rcUpOff, sy1 + py * rcUpOff); + ctx.lineTo(sx2 + px * rcUpOff, sy2 + py * rcUpOff); + ctx.stroke(); + ctx.globalAlpha = 1.0; + } + // Lower bound + if (useLower && d.showDownLine !== false) { + ctx.strokeStyle = d.downColor || col; + ctx.lineWidth = d.downWidth || defW; + _rcSetLineStyle(d.downLineStyle !== undefined ? d.downLineStyle : 1); + ctx.globalAlpha = 0.8; + ctx.beginPath(); + ctx.moveTo(sx1 - px * rcDnOff, sy1 - py * rcDnOff); + ctx.lineTo(sx2 - px * rcDnOff, sy2 - py * rcDnOff); + ctx.stroke(); + ctx.globalAlpha = 1.0; + } + // Reset stroke for selection handles + ctx.strokeStyle = col; + ctx.lineWidth = defW; + _rcSetLineStyle(d.lineStyle || 0); + // Fill between upper and lower bounds + if (d.fillEnabled !== false && (useUpper || useLower)) { + ctx.fillStyle = d.fillColor || col; + ctx.globalAlpha = d.fillOpacity !== undefined ? d.fillOpacity : 0.05; + var uOff = useUpper ? rcUpOff : 0; + var dOff = useLower ? rcDnOff : 0; + ctx.beginPath(); + ctx.moveTo(sx1 + px * uOff, sy1 + py * uOff); + ctx.lineTo(sx2 + px * uOff, sy2 + py * uOff); + ctx.lineTo(sx2 - px * dOff, sy2 - py * dOff); + ctx.lineTo(sx1 - px * dOff, sy1 - py * dOff); + ctx.closePath(); + ctx.fill(); + ctx.globalAlpha = 1.0; + } + // Pearson's R label + if (d.showPearsonsR) { + var midX = (ra1.x + ra2.x) / 2, midY = (ra1.y + ra2.y) / 2; + var vals = _tvGetSeriesDataBetween(chartId, d.t1, d.t2); + var rVal = vals ? _tvPearsonsR(vals) : null; + if (rVal !== null) { + ctx.font = '11px -apple-system,BlinkMacSystemFont,sans-serif'; + ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; + ctx.fillStyle = col; + ctx.globalAlpha = 0.9; + ctx.fillText('R = ' + rVal.toFixed(4), midX, midY - 8); + ctx.globalAlpha = 1.0; + } + } + } + } else if (d.type === 'brush' || d.type === 'highlighter') { + // Brush/Highlighter: freeform path through collected points + var pts = d.points; + if (pts && pts.length > 1) { + if (d.opacity !== undefined && d.opacity < 1) ctx.globalAlpha = d.opacity; + if (d.type === 'highlighter') { + ctx.lineCap = 'round'; + ctx.lineJoin = 'round'; + } + ctx.beginPath(); + var bp0 = _tvToPixel(chartId, pts[0].t, pts[0].p); + if (bp0) { + ctx.moveTo(bp0.x, bp0.y); + for (var bi = 1; bi < pts.length; bi++) { + var bpi = _tvToPixel(chartId, pts[bi].t, pts[bi].p); + if (bpi) ctx.lineTo(bpi.x, bpi.y); + } + ctx.stroke(); + } + ctx.globalAlpha = 1.0; + } + } else if (d.type === 'arrow_marker') { + // Arrow Marker: fat filled arrow shape from p1 (tail) to p2 (tip) + if (p1 && p2) { + var amFillCol = d.fillColor || d.color || defColor; + var amBorderCol = d.borderColor || d.color || defColor; + var amTextCol = d.textColor || d.color || defColor; + var amdx = p2.x - p1.x, amdy = p2.y - p1.y; + var amLen = Math.sqrt(amdx * amdx + amdy * amdy); + if (amLen > 1) { + var amux = amdx / amLen, amuy = amdy / amLen; + var amnx = -amuy, amny = amux; + var amHeadLen = Math.min(amLen * 0.38, 80); + var amHeadW = Math.max(amLen * 0.22, 16); + var amShaftW = amHeadW * 0.38; + var ambx = p2.x - amux * amHeadLen, amby = p2.y - amuy * amHeadLen; + ctx.beginPath(); + ctx.moveTo(p2.x, p2.y); + ctx.lineTo(ambx + amnx * amHeadW, amby + amny * amHeadW); + ctx.lineTo(ambx + amnx * amShaftW, amby + amny * amShaftW); + ctx.lineTo(p1.x + amnx * amShaftW, p1.y + amny * amShaftW); + ctx.lineTo(p1.x - amnx * amShaftW, p1.y - amny * amShaftW); + ctx.lineTo(ambx - amnx * amShaftW, amby - amny * amShaftW); + ctx.lineTo(ambx - amnx * amHeadW, amby - amny * amHeadW); + ctx.closePath(); + ctx.fillStyle = amFillCol; + ctx.fill(); + ctx.strokeStyle = amBorderCol; + ctx.lineWidth = 1; + ctx.stroke(); + } + if (d.text) { + var _amfs = d.fontSize || 16; + var _amfw = (d.bold ? 'bold ' : '') + (d.italic ? 'italic ' : ''); + ctx.font = _amfw + _amfs + 'px Arial, sans-serif'; + ctx.fillStyle = amTextCol; + ctx.textAlign = 'center'; + ctx.textBaseline = 'top'; + ctx.fillText(d.text, p1.x, p1.y + 8); + } + } + } else if (d.type === 'arrow') { + // Arrow: thin line with arrowhead at p2 + if (p1 && p2) { + ctx.beginPath(); + ctx.moveTo(p1.x, p1.y); + ctx.lineTo(p2.x, p2.y); + ctx.stroke(); + var adx = p2.x - p1.x, ady = p2.y - p1.y; + var aAngle = Math.atan2(ady, adx); + var aLen = 12; + ctx.beginPath(); + ctx.moveTo(p2.x, p2.y); + ctx.lineTo(p2.x - aLen * Math.cos(aAngle - 0.4), p2.y - aLen * Math.sin(aAngle - 0.4)); + ctx.moveTo(p2.x, p2.y); + ctx.lineTo(p2.x - aLen * Math.cos(aAngle + 0.4), p2.y - aLen * Math.sin(aAngle + 0.4)); + ctx.stroke(); + if (d.text) { + var _afs = d.fontSize || 16; + var _afw = (d.bold ? 'bold ' : '') + (d.italic ? 'italic ' : ''); + ctx.font = _afw + _afs + 'px Arial, sans-serif'; + ctx.fillStyle = col; + ctx.textAlign = 'center'; + ctx.textBaseline = 'top'; + ctx.fillText(d.text, p2.x, p2.y + 6); + } + } + } else if (d.type === 'arrow_mark_up') { + if (p1) { + var amu_fc = d.fillColor || d.color || defColor; + var amu_bc = d.borderColor || d.color || defColor; + var amu_tc = d.textColor || d.color || defColor; + var amSz = (d.size || 30) / 2; + ctx.beginPath(); + ctx.moveTo(p1.x, p1.y - amSz); + ctx.lineTo(p1.x - amSz * 0.7, p1.y + amSz * 0.5); + ctx.lineTo(p1.x + amSz * 0.7, p1.y + amSz * 0.5); + ctx.closePath(); + ctx.fillStyle = amu_fc; + ctx.fill(); + ctx.strokeStyle = amu_bc; + ctx.lineWidth = 1; + ctx.stroke(); + if (d.text && mouseOver) { + var _afs = d.fontSize || 16; + var _afw = (d.bold ? 'bold ' : '') + (d.italic ? 'italic ' : ''); + ctx.font = _afw + _afs + 'px Arial, sans-serif'; + ctx.fillStyle = amu_tc; + ctx.textAlign = 'center'; + ctx.textBaseline = 'top'; + ctx.fillText(d.text, p1.x, p1.y + amSz * 0.5 + 4); + } + } + } else if (d.type === 'arrow_mark_down') { + if (p1) { + var amd_fc = d.fillColor || d.color || defColor; + var amd_bc = d.borderColor || d.color || defColor; + var amd_tc = d.textColor || d.color || defColor; + var amSz = (d.size || 30) / 2; + ctx.beginPath(); + ctx.moveTo(p1.x, p1.y + amSz); + ctx.lineTo(p1.x - amSz * 0.7, p1.y - amSz * 0.5); + ctx.lineTo(p1.x + amSz * 0.7, p1.y - amSz * 0.5); + ctx.closePath(); + ctx.fillStyle = amd_fc; + ctx.fill(); + ctx.strokeStyle = amd_bc; + ctx.lineWidth = 1; + ctx.stroke(); + if (d.text && mouseOver) { + var _afs = d.fontSize || 16; + var _afw = (d.bold ? 'bold ' : '') + (d.italic ? 'italic ' : ''); + ctx.font = _afw + _afs + 'px Arial, sans-serif'; + ctx.fillStyle = amd_tc; + ctx.textAlign = 'center'; + ctx.textBaseline = 'bottom'; + ctx.fillText(d.text, p1.x, p1.y - amSz * 0.5 - 4); + } + } + } else if (d.type === 'arrow_mark_left') { + if (p1) { + var aml_fc = d.fillColor || d.color || defColor; + var aml_bc = d.borderColor || d.color || defColor; + var aml_tc = d.textColor || d.color || defColor; + var amSz = (d.size || 30) / 2; + ctx.beginPath(); + ctx.moveTo(p1.x - amSz, p1.y); + ctx.lineTo(p1.x + amSz * 0.5, p1.y - amSz * 0.7); + ctx.lineTo(p1.x + amSz * 0.5, p1.y + amSz * 0.7); + ctx.closePath(); + ctx.fillStyle = aml_fc; + ctx.fill(); + ctx.strokeStyle = aml_bc; + ctx.lineWidth = 1; + ctx.stroke(); + if (d.text && mouseOver) { + var _afs = d.fontSize || 16; + var _afw = (d.bold ? 'bold ' : '') + (d.italic ? 'italic ' : ''); + ctx.font = _afw + _afs + 'px Arial, sans-serif'; + ctx.fillStyle = aml_tc; + ctx.textAlign = 'left'; + ctx.textBaseline = 'middle'; + ctx.fillText(d.text, p1.x + amSz * 0.5 + 4, p1.y); + } + } + } else if (d.type === 'arrow_mark_right') { + if (p1) { + var amr_fc = d.fillColor || d.color || defColor; + var amr_bc = d.borderColor || d.color || defColor; + var amr_tc = d.textColor || d.color || defColor; + var amSz = (d.size || 30) / 2; + ctx.beginPath(); + ctx.moveTo(p1.x + amSz, p1.y); + ctx.lineTo(p1.x - amSz * 0.5, p1.y - amSz * 0.7); + ctx.lineTo(p1.x - amSz * 0.5, p1.y + amSz * 0.7); + ctx.closePath(); + ctx.fillStyle = amr_fc; + ctx.fill(); + ctx.strokeStyle = amr_bc; + ctx.lineWidth = 1; + ctx.stroke(); + if (d.text && mouseOver) { + var _afs = d.fontSize || 16; + var _afw = (d.bold ? 'bold ' : '') + (d.italic ? 'italic ' : ''); + ctx.font = _afw + _afs + 'px Arial, sans-serif'; + ctx.fillStyle = amr_tc; + ctx.textAlign = 'right'; + ctx.textBaseline = 'middle'; + ctx.fillText(d.text, p1.x - amSz * 0.5 - 4, p1.y); + } + } + } else if (d.type === 'circle') { + // Circle: center at midpoint, radius = distance/2 + if (p1 && p2) { + var cx = (p1.x + p2.x) / 2, cy = (p1.y + p2.y) / 2; + var cr = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)) / 2; + ctx.beginPath(); + ctx.arc(cx, cy, cr, 0, Math.PI * 2); + if (d.fillColor) { ctx.fillStyle = d.fillColor; ctx.fill(); } + ctx.stroke(); + } + } else if (d.type === 'ellipse') { + // Ellipse: bounding box from p1 to p2 + if (p1 && p2) { + var ecx = (p1.x + p2.x) / 2, ecy = (p1.y + p2.y) / 2; + var erx = Math.abs(p2.x - p1.x) / 2, ery = Math.abs(p2.y - p1.y) / 2; + ctx.beginPath(); + ctx.ellipse(ecx, ecy, Math.max(erx, 1), Math.max(ery, 1), 0, 0, Math.PI * 2); + if (d.fillColor) { ctx.fillStyle = d.fillColor; ctx.fill(); } + ctx.stroke(); + } + } else if (d.type === 'triangle') { + // Triangle: 3-point + if (p1 && p2) { + var tp3 = d.t3 !== undefined ? _tvToPixel(chartId, d.t3, d.p3) : null; + ctx.beginPath(); + ctx.moveTo(p1.x, p1.y); + ctx.lineTo(p2.x, p2.y); + if (tp3) { ctx.lineTo(tp3.x, tp3.y); } + ctx.closePath(); + if (d.fillColor) { ctx.fillStyle = d.fillColor; ctx.fill(); } + ctx.stroke(); + } + } else if (d.type === 'rotated_rect') { + // Rotated Rectangle: A→B defines one edge, C defines perpendicular width + if (p1 && p2) { + var rp3 = d.t3 !== undefined ? _tvToPixel(chartId, d.t3, d.p3) : null; + if (rp3) { + // Direction A→B + var rdx = p2.x - p1.x, rdy = p2.y - p1.y; + var rlen = Math.sqrt(rdx * rdx + rdy * rdy); + if (rlen > 0) { + var rnx = -rdy / rlen, rny = rdx / rlen; + // Project C onto perpendicular to get width + var rprojW = (rp3.x - p1.x) * rnx + (rp3.y - p1.y) * rny; + ctx.beginPath(); + ctx.moveTo(p1.x, p1.y); + ctx.lineTo(p2.x, p2.y); + ctx.lineTo(p2.x + rnx * rprojW, p2.y + rny * rprojW); + ctx.lineTo(p1.x + rnx * rprojW, p1.y + rny * rprojW); + ctx.closePath(); + if (d.fillColor) { ctx.fillStyle = d.fillColor; ctx.fill(); } + ctx.stroke(); + } + } else { + // Preview: just the A→B edge + ctx.beginPath(); + ctx.moveTo(p1.x, p1.y); + ctx.lineTo(p2.x, p2.y); + ctx.stroke(); + } + } + } else if (d.type === 'path' || d.type === 'polyline') { + // Path (closed) or Polyline (open) — multi-point + var mpts = d.points; + if (mpts && mpts.length > 1) { + ctx.beginPath(); + var mp0 = _tvToPixel(chartId, mpts[0].t, mpts[0].p); + if (mp0) { + ctx.moveTo(mp0.x, mp0.y); + for (var mi = 1; mi < mpts.length; mi++) { + var mpi = _tvToPixel(chartId, mpts[mi].t, mpts[mi].p); + if (mpi) ctx.lineTo(mpi.x, mpi.y); + } + if (d.type === 'path') ctx.closePath(); + if (d.fillColor && d.type === 'path') { ctx.fillStyle = d.fillColor; ctx.fill(); } + ctx.stroke(); + } + } + } else if (d.type === 'shape_arc') { + // Arc: 3-point (start, end, control for curvature) + if (p1 && p2) { + var sap3 = d.t3 !== undefined ? _tvToPixel(chartId, d.t3, d.p3) : null; + ctx.beginPath(); + ctx.moveTo(p1.x, p1.y); + if (sap3) { + ctx.quadraticCurveTo(sap3.x, sap3.y, p2.x, p2.y); + } else { + ctx.lineTo(p2.x, p2.y); + } + ctx.stroke(); + } + } else if (d.type === 'curve') { + // Curve: 2-point with auto control point (arc above midpoint) + if (p1 && p2) { + var ccx = (p1.x + p2.x) / 2, ccy = Math.min(p1.y, p2.y) - Math.abs(p2.x - p1.x) * 0.3; + ctx.beginPath(); + ctx.moveTo(p1.x, p1.y); + ctx.quadraticCurveTo(ccx, ccy, p2.x, p2.y); + ctx.stroke(); + } + } else if (d.type === 'double_curve') { + // Double Curve: 3-point S-curve (A→mid via C, mid→B via opposite) + if (p1 && p2) { + var dcp3 = d.t3 !== undefined ? _tvToPixel(chartId, d.t3, d.p3) : null; + var dcMidX = (p1.x + p2.x) / 2, dcMidY = (p1.y + p2.y) / 2; + ctx.beginPath(); + ctx.moveTo(p1.x, p1.y); + if (dcp3) { + ctx.quadraticCurveTo(dcp3.x, dcp3.y, dcMidX, dcMidY); + // Mirror control point for second half + var dMirX = 2 * dcMidX - dcp3.x, dMirY = 2 * dcMidY - dcp3.y; + ctx.quadraticCurveTo(dMirX, dMirY, p2.x, p2.y); + } else { + ctx.lineTo(p2.x, p2.y); + } + ctx.stroke(); + } + } else if (d.type === 'long_position' || d.type === 'short_position') { + // Long/Short Position: entry line, target (profit) and stop-loss zones + if (p1 && p2) { + var isLong = d.type === 'long_position'; + var entryY = p1.y, targetY = p2.y; + var leftX = Math.min(p1.x, p2.x), rightX = Math.max(p1.x, p2.x); + if (rightX - leftX < 20) rightX = leftX + 150; + // Determine stop: mirror of target across entry + var stopY = entryY + (entryY - targetY); + // Profit zone (green) + var profTop = Math.min(entryY, targetY), profBot = Math.max(entryY, targetY); + ctx.fillStyle = isLong ? 'rgba(38,166,91,0.25)' : 'rgba(239,83,80,0.25)'; + ctx.fillRect(leftX, profTop, rightX - leftX, profBot - profTop); + // Stop zone (red) + var stopTop = Math.min(entryY, stopY), stopBot = Math.max(entryY, stopY); + ctx.fillStyle = isLong ? 'rgba(239,83,80,0.25)' : 'rgba(38,166,91,0.25)'; + ctx.fillRect(leftX, stopTop, rightX - leftX, stopBot - stopTop); + // Entry line + ctx.setLineDash([]); + ctx.beginPath(); + ctx.moveTo(leftX, entryY); ctx.lineTo(rightX, entryY); + ctx.stroke(); + // Target and stop lines (dashed) + ctx.setLineDash([4, 3]); + ctx.beginPath(); + ctx.moveTo(leftX, targetY); ctx.lineTo(rightX, targetY); + ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(leftX, stopY); ctx.lineTo(rightX, stopY); + ctx.stroke(); + ctx.setLineDash([]); + // Labels + ctx.fillStyle = col; + ctx.font = '11px sans-serif'; + ctx.textAlign = 'left'; + ctx.fillText(isLong ? 'Target' : 'Stop', leftX + 4, targetY - 4); + ctx.fillText('Entry', leftX + 4, entryY - 4); + ctx.fillText(isLong ? 'Stop' : 'Target', leftX + 4, stopY - 4); + } + } else if (d.type === 'forecast') { + // Forecast: solid line for history, dashed fan lines for projection + if (p1 && p2) { + // Solid history segment + ctx.beginPath(); + ctx.moveTo(p1.x, p1.y); + ctx.lineTo(p2.x, p2.y); + ctx.stroke(); + // Dashed projection lines — fan of 3 paths + var fdx = p2.x - p1.x, fdy = p2.y - p1.y; + ctx.setLineDash([6, 4]); + var fAngles = [-0.3, 0, 0.3]; + for (var fi = 0; fi < fAngles.length; fi++) { + var fAngle = Math.atan2(fdy, fdx) + fAngles[fi]; + var fLen = Math.sqrt(fdx * fdx + fdy * fdy); + ctx.beginPath(); + ctx.moveTo(p2.x, p2.y); + ctx.lineTo(p2.x + fLen * Math.cos(fAngle), p2.y + fLen * Math.sin(fAngle)); + ctx.stroke(); + } + ctx.setLineDash([]); + } + } else if (d.type === 'bars_pattern') { + // Bars Pattern: source region box with dashed projected copy + if (p1 && p2) { + var bpW = Math.abs(p2.x - p1.x), bpH = Math.abs(p2.y - p1.y); + var bpL = Math.min(p1.x, p2.x), bpT = Math.min(p1.y, p2.y); + ctx.strokeRect(bpL, bpT, bpW, bpH); + ctx.setLineDash([4, 3]); + ctx.strokeRect(bpL + bpW, bpT, bpW, bpH); + ctx.setLineDash([]); + } + } else if (d.type === 'ghost_feed') { + // Ghost Feed: solid source segment, dashed continuation + if (p1 && p2) { + ctx.beginPath(); + ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); + ctx.stroke(); + var gfdx = p2.x - p1.x, gfdy = p2.y - p1.y; + ctx.setLineDash([5, 4]); + ctx.globalAlpha = 0.5; + ctx.beginPath(); + ctx.moveTo(p2.x, p2.y); ctx.lineTo(p2.x + gfdx, p2.y + gfdy); + ctx.stroke(); + ctx.globalAlpha = 1.0; + ctx.setLineDash([]); + } + } else if (d.type === 'projection') { + // Projection: source box with dashed projected box + if (p1 && p2) { + var prjW = Math.abs(p2.x - p1.x), prjH = Math.abs(p2.y - p1.y); + var prjL = Math.min(p1.x, p2.x), prjT = Math.min(p1.y, p2.y); + ctx.setLineDash([]); + ctx.strokeRect(prjL, prjT, prjW, prjH); + ctx.setLineDash([4, 3]); + ctx.strokeRect(prjL + prjW + 4, prjT, prjW, prjH); + ctx.setLineDash([]); + // Connecting arrow + ctx.beginPath(); + ctx.moveTo(prjL + prjW, prjT + prjH / 2); + ctx.lineTo(prjL + prjW + 4, prjT + prjH / 2); + ctx.stroke(); + } + } else if (d.type === 'anchored_vwap') { + // Anchored VWAP: vertical anchor line + horizontal price label + if (p1) { + var avH = ctx.canvas.height; + ctx.setLineDash([4, 3]); + ctx.beginPath(); + ctx.moveTo(p1.x, 0); ctx.lineTo(p1.x, avH); + ctx.stroke(); + ctx.setLineDash([]); + // Label + ctx.fillStyle = col; + ctx.font = '10px sans-serif'; + ctx.textAlign = 'center'; + ctx.fillText('VWAP', p1.x, 14); + } + } else if (d.type === 'fixed_range_vol') { + // Fixed Range Volume Profile: vertical range with histogram placeholder + if (p1 && p2) { + var frL = Math.min(p1.x, p2.x), frR = Math.max(p1.x, p2.x); + var frT = Math.min(p1.y, p2.y), frB = Math.max(p1.y, p2.y); + ctx.setLineDash([4, 3]); + ctx.beginPath(); + ctx.moveTo(frL, frT); ctx.lineTo(frL, frB); + ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(frR, frT); ctx.lineTo(frR, frB); + ctx.stroke(); + ctx.setLineDash([]); + // Horizontal bars placeholder + ctx.fillStyle = 'rgba(41,98,255,0.2)'; + var frRows = 6, frRH = (frB - frT) / frRows; + for (var fri = 0; fri < frRows; fri++) { + var frW = (frR - frL) * (0.3 + Math.random() * 0.6); + ctx.fillRect(frL, frT + fri * frRH + 1, frW, frRH - 2); + } + } + } else if (d.type === 'price_range') { + // Price Range: two horizontal lines with vertical connector and price diff label + if (p1 && p2) { + var prW = ctx.canvas.width; + ctx.setLineDash([4, 3]); + ctx.beginPath(); + ctx.moveTo(0, p1.y); ctx.lineTo(prW, p1.y); + ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(0, p2.y); ctx.lineTo(prW, p2.y); + ctx.stroke(); + ctx.setLineDash([]); + // Vertical connector + ctx.beginPath(); + ctx.moveTo(p1.x, p1.y); ctx.lineTo(p1.x, p2.y); + ctx.stroke(); + // Price diff label + var prDiff = d.p2 !== undefined ? Math.abs(d.p2 - d.p1).toFixed(2) : ''; + ctx.fillStyle = col; + ctx.font = '11px sans-serif'; + ctx.textAlign = 'left'; + ctx.fillText(prDiff, p1.x + 6, (p1.y + p2.y) / 2 + 4); + } + } else if (d.type === 'date_range') { + // Date Range: two vertical lines with horizontal connector + if (p1 && p2) { + var drH = ctx.canvas.height; + ctx.setLineDash([4, 3]); + ctx.beginPath(); + ctx.moveTo(p1.x, 0); ctx.lineTo(p1.x, drH); + ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(p2.x, 0); ctx.lineTo(p2.x, drH); + ctx.stroke(); + ctx.setLineDash([]); + // Horizontal connector at midY + var drMidY = drH / 2; + ctx.beginPath(); + ctx.moveTo(p1.x, drMidY); ctx.lineTo(p2.x, drMidY); + ctx.stroke(); + // Arrow heads + var drDir = p2.x > p1.x ? 1 : -1; + ctx.beginPath(); + ctx.moveTo(p2.x, drMidY); + ctx.lineTo(p2.x - drDir * 8, drMidY - 4); + ctx.moveTo(p2.x, drMidY); + ctx.lineTo(p2.x - drDir * 8, drMidY + 4); + ctx.stroke(); + } + } else if (d.type === 'date_price_range') { + // Date and Price Range: rectangle region with dimension labels + if (p1 && p2) { + var dpLeft = Math.min(p1.x, p2.x), dpRight = Math.max(p1.x, p2.x); + var dpTop = Math.min(p1.y, p2.y), dpBot = Math.max(p1.y, p2.y); + ctx.fillStyle = 'rgba(41,98,255,0.1)'; + ctx.fillRect(dpLeft, dpTop, dpRight - dpLeft, dpBot - dpTop); + ctx.strokeRect(dpLeft, dpTop, dpRight - dpLeft, dpBot - dpTop); + // Price diff label + var dpDiff = d.p2 !== undefined ? Math.abs(d.p2 - d.p1).toFixed(2) : ''; + ctx.fillStyle = col; + ctx.font = '11px sans-serif'; + ctx.textAlign = 'center'; + ctx.fillText(dpDiff, (dpLeft + dpRight) / 2, dpTop - 6); + } + } + + // Draw selection handles + if (selected) { + var anchors = _tvDrawAnchors(chartId, d); + for (var ai = 0; ai < anchors.length; ai++) { + var anc = anchors[ai]; + ctx.fillStyle = _cssVar('--pywry-draw-handle-fill'); + ctx.strokeStyle = col; + ctx.lineWidth = 2; + ctx.setLineDash([]); + ctx.beginPath(); + ctx.arc(anc.x, anc.y, 5, 0, Math.PI * 2); + ctx.fill(); + ctx.stroke(); + } + } + + ctx.restore(); +} + +// Rounded rect helper +function _roundRect(ctx, x, y, w, h, r) { + ctx.beginPath(); + ctx.moveTo(x + r, y); + ctx.lineTo(x + w - r, y); + ctx.quadraticCurveTo(x + w, y, x + w, y + r); + ctx.lineTo(x + w, y + h - r); + ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h); + ctx.lineTo(x + r, y + h); + ctx.quadraticCurveTo(x, y + h, x, y + h - r); + ctx.lineTo(x, y + r); + ctx.quadraticCurveTo(x, y, x + r, y); + ctx.closePath(); +} + diff --git a/pywry/pywry/frontend/src/tvchart/07-drawing/07-toolbar-menu.js b/pywry/pywry/frontend/src/tvchart/07-drawing/07-toolbar-menu.js new file mode 100644 index 0000000..978c493 --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/07-drawing/07-toolbar-menu.js @@ -0,0 +1,570 @@ +// ---- Floating edit toolbar ---- +var _floatingToolbar = null; // current DOM element +var _floatingChartId = null; +var _colorPickerEl = null; +var _widthPickerEl = null; + +function _tvShowFloatingToolbar(chartId, drawIdx) { + _tvHideFloatingToolbar(); + _tvHideContextMenu(); + var ds = window.__PYWRY_DRAWINGS__[chartId]; + if (!ds || drawIdx < 0 || drawIdx >= ds.drawings.length) return; + var d = ds.drawings[drawIdx]; + + var bar = document.createElement('div'); + bar.className = 'pywry-draw-toolbar'; + _floatingToolbar = bar; + _floatingChartId = chartId; + + // Determine which controls are relevant for this drawing type + var _arrowMarkers = ['arrow_marker', 'arrow_mark_up', 'arrow_mark_down', 'arrow_mark_left', 'arrow_mark_right']; + var _hoverTextMarkers = ['pin', 'flag_mark', 'signpost']; + var _filledMarkers = ['arrow_marker', 'arrow_mark_up', 'arrow_mark_down', 'arrow_mark_left', 'arrow_mark_right', 'anchored_text', 'note', 'price_note', 'pin', 'callout', 'comment', 'price_label', 'signpost', 'flag_mark']; + var isArrowMarker = _arrowMarkers.indexOf(d.type) !== -1; + var isHoverTextMarker = _hoverTextMarkers.indexOf(d.type) !== -1; + var isFilledMarker = _filledMarkers.indexOf(d.type) !== -1; + var hasLineStyle = d.type !== 'text' && d.type !== 'brush' && d.type !== 'measure' && !isFilledMarker; + var hasLineWidth = d.type !== 'text' && !isFilledMarker; + var hasColorSwatch = d.type !== 'measure' && !isArrowMarker && !isHoverTextMarker; + + // Arrow markers: fill / border / text icon buttons with color indicators + if (isArrowMarker) { + var fillBtn = _dtColorBtn(_DT_ICONS.bucket, 'Fill color', + d.fillColor || d.color || _drawDefaults.color, function(e) { + _tvToggleColorPicker(chartId, drawIdx, fillBtn._indicator, 'fillColor'); + }); + bar.appendChild(fillBtn); + + var borderBtn = _dtColorBtn(_DT_ICONS.border, 'Border color', + d.borderColor || d.color || _drawDefaults.color, function(e) { + _tvToggleColorPicker(chartId, drawIdx, borderBtn._indicator, 'borderColor'); + }); + bar.appendChild(borderBtn); + + var textBtn = _dtColorBtn(_DT_ICONS.text, 'Text color', + d.textColor || d.color || _drawDefaults.color, function(e) { + _tvToggleColorPicker(chartId, drawIdx, textBtn._indicator, 'textColor'); + }); + bar.appendChild(textBtn); + bar.appendChild(_dtSep()); + } + + // Pin / Flag / Signpost: pencil + color indicator, T, font size, settings, lock, trash, more + if (isHoverTextMarker) { + var htColorBtn = _dtColorBtn(_DT_ICONS.pencil, 'Color', + d.markerColor || d.color || _drawDefaults.color, function(e) { + _tvToggleColorPicker(chartId, drawIdx, htColorBtn._indicator, 'markerColor'); + }); + bar.appendChild(htColorBtn); + + var htTextBtn = _dtColorBtn(_DT_ICONS.text, 'Text', + d.color || _drawDefaults.color, function(e) { + _tvToggleColorPicker(chartId, drawIdx, htTextBtn._indicator, 'color'); + }); + bar.appendChild(htTextBtn); + + var htFsLabel = document.createElement('span'); + htFsLabel.className = 'dt-label'; + htFsLabel.textContent = d.fontSize || 14; + htFsLabel.title = 'Font size'; + htFsLabel.addEventListener('click', function(e) { + e.stopPropagation(); + _tvShowDrawingSettings(chartId, drawIdx); + }); + bar.appendChild(htFsLabel); + bar.appendChild(_dtSep()); + } + + // Color swatch (non-arrow-marker tools) + if (hasColorSwatch) { + var swatch = document.createElement('div'); + swatch.className = 'dt-swatch'; + swatch.style.background = d.color || _drawDefaults.color; + swatch.title = 'Color'; + swatch.addEventListener('click', function(e) { + e.stopPropagation(); + _tvToggleColorPicker(chartId, drawIdx, swatch); + }); + bar.appendChild(swatch); + bar.appendChild(_dtSep()); + } + + // Line width button + if (hasLineWidth) { + var lwBtn = _dtBtn(_DT_ICONS.lineW, 'Line width', function(e) { + e.stopPropagation(); + _tvToggleWidthPicker(chartId, drawIdx, lwBtn); + }); + var lwLabel = document.createElement('span'); + lwLabel.className = 'dt-label'; + lwLabel.textContent = (d.lineWidth || 2) + 'px'; + lwLabel.title = 'Line width'; + lwLabel.addEventListener('click', function(e) { + e.stopPropagation(); + _tvToggleWidthPicker(chartId, drawIdx, lwBtn); + }); + bar.appendChild(lwBtn); + bar.appendChild(lwLabel); + bar.appendChild(_dtSep()); + } + + // Line style cycle (solid → dashed → dotted) + if (hasLineStyle) { + var styleBtn = _dtBtn(_DT_ICONS.pencil, 'Line style', function() { + d.lineStyle = ((d.lineStyle || 0) + 1) % 3; + _tvRenderDrawings(chartId); + }); + bar.appendChild(styleBtn); + bar.appendChild(_dtSep()); + } + + // Lock toggle + var lockBtn = _dtBtn(d.locked ? _DT_ICONS.lock : _DT_ICONS.unlock, + d.locked ? 'Unlock' : 'Lock', function() { + d.locked = !d.locked; + lockBtn.innerHTML = d.locked ? _DT_ICONS.lock : _DT_ICONS.unlock; + lockBtn.title = d.locked ? 'Unlock' : 'Lock'; + if (d.locked) lockBtn.classList.add('active'); + else lockBtn.classList.remove('active'); + }); + if (d.locked) lockBtn.classList.add('active'); + bar.appendChild(lockBtn); + + bar.appendChild(_dtSep()); + + // Settings button — opens drawing settings panel for any type + var settingsBtn = _dtBtn(_DT_ICONS.settings, 'Settings', function() { + _tvShowDrawingSettings(chartId, drawIdx); + }); + bar.appendChild(settingsBtn); + bar.appendChild(_dtSep()); + + // Delete + var delBtn = _dtBtn(_DT_ICONS.trash, 'Delete', function() { + _tvDeleteDrawing(chartId, drawIdx); + }); + delBtn.style.color = _cssVar('--pywry-draw-danger', '#f44336'); + bar.appendChild(delBtn); + + bar.appendChild(_dtSep()); + + // More (...) + var moreBtn = _dtBtn(_DT_ICONS.more, 'More', function(e) { + e.stopPropagation(); + // Show context menu near toolbar + var rect = bar.getBoundingClientRect(); + var cRect = ds.canvas.getBoundingClientRect(); + _tvShowContextMenu(chartId, drawIdx, + rect.right - cRect.left, rect.bottom - cRect.top + 4); + }); + bar.appendChild(moreBtn); + + ds.uiLayer.appendChild(bar); + _tvRepositionToolbar(chartId); +} + +function _tvRepositionToolbar(chartId) { + if (!_floatingToolbar || _floatingChartId !== chartId) return; + if (_drawSelectedIdx < 0) { _tvHideFloatingToolbar(); return; } + var ds = window.__PYWRY_DRAWINGS__[chartId]; + if (!ds || _drawSelectedIdx >= ds.drawings.length) { _tvHideFloatingToolbar(); return; } + var d = ds.drawings[_drawSelectedIdx]; + var anchors = _tvDrawAnchors(chartId, d); + if (anchors.length === 0) { _tvHideFloatingToolbar(); return; } + + // Position above the topmost anchor + var minY = Infinity, midX = 0; + for (var i = 0; i < anchors.length; i++) { + if (anchors[i].y < minY) minY = anchors[i].y; + midX += anchors[i].x; + } + midX /= anchors.length; + + var tbW = _floatingToolbar.offsetWidth || 300; + var left = midX - tbW / 2; + var top = minY - 44; + // Clamp to container + var cw = ds.canvas.clientWidth; + if (left < 4) left = 4; + if (left + tbW > cw - 4) left = cw - tbW - 4; + if (top < 4) top = 4; + + _floatingToolbar.style.left = left + 'px'; + _floatingToolbar.style.top = top + 'px'; +} + +function _tvHideFloatingToolbar() { + if (_floatingToolbar && _floatingToolbar.parentNode) { + _floatingToolbar.parentNode.removeChild(_floatingToolbar); + } + _floatingToolbar = null; + _floatingChartId = null; + _tvHideColorPicker(); + _tvHideWidthPicker(); +} + +function _dtBtn(svgHtml, title, onclick) { + var btn = document.createElement('button'); + btn.innerHTML = svgHtml; + btn.title = title; + btn.addEventListener('click', function(e) { e.stopPropagation(); onclick(e); }); + return btn; +} + +/** + * Create a toolbar button with an icon and a color indicator bar beneath it. + * Used for fill / border / text color controls on filled marker drawings. + */ +function _dtColorBtn(svgHtml, title, color, onclick) { + var btn = document.createElement('button'); + btn.className = 'dt-color-btn'; + btn.title = title; + btn.innerHTML = svgHtml; + var indicator = document.createElement('span'); + indicator.className = 'dt-color-indicator'; + indicator.style.background = color; + btn.appendChild(indicator); + btn.addEventListener('click', function(e) { e.stopPropagation(); onclick(e); }); + btn._indicator = indicator; + return btn; +} + +function _dtSep() { + var s = document.createElement('div'); + s.className = 'dt-sep'; + return s; +} + +// ---- HSV / RGB conversion helpers ---- +function _hsvToRgb(h, s, v) { + var i = Math.floor(h * 6), f = h * 6 - i, p = v * (1 - s); + var q = v * (1 - f * s), t = v * (1 - (1 - f) * s); + var r, g, b; + switch (i % 6) { + case 0: r = v; g = t; b = p; break; + case 1: r = q; g = v; b = p; break; + case 2: r = p; g = v; b = t; break; + case 3: r = p; g = q; b = v; break; + case 4: r = t; g = p; b = v; break; + case 5: r = v; g = p; b = q; break; + } + return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]; +} + +function _rgbToHsv(r, g, b) { + r /= 255; g /= 255; b /= 255; + var max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min; + var h = 0, s = max === 0 ? 0 : d / max, v = max; + if (d !== 0) { + switch (max) { + case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break; + case g: h = ((b - r) / d + 2) / 6; break; + case b: h = ((r - g) / d + 4) / 6; break; + } + } + return [h, s, v]; +} + +function _hexToRgb(hex) { + hex = hex.replace(/^#/, ''); + if (hex.length === 3) hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]; + var n = parseInt(hex, 16); + return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; +} + +function _rgbToHex(r, g, b) { + return '#' + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1); +} + +// ---- Canvas paint helpers for color picker ---- +function _cpPaintSV(canvas, hue) { + var w = canvas.width, h = canvas.height; + var ctx = canvas.getContext('2d'); + var hRgb = _hsvToRgb(hue, 1, 1); + var hHex = _rgbToHex(hRgb[0], hRgb[1], hRgb[2]); + ctx.fillStyle = _cssVar('--pywry-cp-sv-white', '#ffffff'); + ctx.fillRect(0, 0, w, h); + var gH = ctx.createLinearGradient(0, 0, w, 0); + gH.addColorStop(0, _cssVar('--pywry-cp-sv-white', '#ffffff')); + gH.addColorStop(1, hHex); + ctx.fillStyle = gH; + ctx.fillRect(0, 0, w, h); + var gV = ctx.createLinearGradient(0, 0, 0, h); + var svBlack = _cssVar('--pywry-cp-sv-black', '#000000'); + var svRgb = _hexToRgb(svBlack); + gV.addColorStop(0, 'rgba(' + svRgb[0] + ',' + svRgb[1] + ',' + svRgb[2] + ',0)'); + gV.addColorStop(1, svBlack); + ctx.fillStyle = gV; + ctx.fillRect(0, 0, w, h); +} + +function _cpPaintHue(canvas) { + var w = canvas.width, h = canvas.height; + var ctx = canvas.getContext('2d'); + var g = ctx.createLinearGradient(0, 0, w, 0); + g.addColorStop(0, _cssVar('--pywry-cp-hue-0', '#ff0000')); + g.addColorStop(0.167, _cssVar('--pywry-cp-hue-1', '#ffff00')); + g.addColorStop(0.333, _cssVar('--pywry-cp-hue-2', '#00ff00')); + g.addColorStop(0.5, _cssVar('--pywry-cp-hue-3', '#00ffff')); + g.addColorStop(0.667, _cssVar('--pywry-cp-hue-4', '#0000ff')); + g.addColorStop(0.833, _cssVar('--pywry-cp-hue-5', '#ff00ff')); + g.addColorStop(1, _cssVar('--pywry-cp-hue-6', '#ff0000')); + ctx.fillStyle = g; + ctx.fillRect(0, 0, w, h); +} + +// ---- Full color picker popup (canvas-based, all inline styles) ---- +function _tvToggleColorPicker(chartId, drawIdx, anchor, propName) { + _tvHideWidthPicker(); + var ds = window.__PYWRY_DRAWINGS__[chartId]; + if (!ds) return; + var d = ds.drawings[drawIdx]; + var _cpProp = propName || 'color'; + var curHex = _tvColorToHex(d[_cpProp] || d.color || _drawDefaults.color, _drawDefaults.color); + var curOpacity = _tvToNumber(d[_cpProp + 'Opacity'], _tvColorOpacityPercent(d[_cpProp], 100)); + + _tvShowColorOpacityPopup(anchor, curHex, curOpacity, null, function(newColor, newOpacity) { + d[_cpProp] = _tvColorWithOpacity(newColor, newOpacity, newColor); + d[_cpProp + 'Opacity'] = newOpacity; + anchor.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); + if (d.type === 'hline') _tvSyncPriceLineColor(chartId, drawIdx, _tvColorWithOpacity(newColor, newOpacity, newColor)); + _tvRenderDrawings(chartId); + }); +} + +function _tvHideColorPicker() { + if (_colorPickerEl && _colorPickerEl.parentNode) { + _colorPickerEl.parentNode.removeChild(_colorPickerEl); + } + _colorPickerEl = null; +} + +// ---- Width picker popup ---- +function _tvToggleWidthPicker(chartId, drawIdx, anchor) { + if (_widthPickerEl) { _tvHideWidthPicker(); return; } + _tvHideColorPicker(); + var ds = window.__PYWRY_DRAWINGS__[chartId]; + if (!ds) return; + var d = ds.drawings[drawIdx]; + var picker = document.createElement('div'); + picker.className = 'pywry-draw-width-picker'; + _widthPickerEl = picker; + + for (var i = 0; i < _DRAW_WIDTHS.length; i++) { + (function(pw) { + var row = document.createElement('div'); + row.className = 'wp-row' + ((d.lineWidth || 2) === pw ? ' sel' : ''); + var line = document.createElement('div'); + line.className = 'wp-line'; + line.style.borderTopWidth = pw + 'px'; + row.appendChild(line); + var label = document.createElement('span'); + label.textContent = pw + 'px'; + row.appendChild(label); + row.addEventListener('click', function(e) { + e.stopPropagation(); + d.lineWidth = pw; + _tvRenderDrawings(chartId); + _tvHideWidthPicker(); + // Update label in toolbar + var lbls = _floatingToolbar ? _floatingToolbar.querySelectorAll('.dt-label') : []; + if (lbls.length > 0) lbls[0].textContent = pw + 'px'; + }); + picker.appendChild(row); + })(_DRAW_WIDTHS[i]); + } + + var _oc = _tvAppendOverlay(chartId, picker); + + // Position the picker relative to the anchor + requestAnimationFrame(function() { + var _cs = _tvContainerSize(_oc); + var aRect = _tvContainerRect(_oc, anchor.getBoundingClientRect()); + var pH = picker.offsetHeight; + var pW = picker.offsetWidth; + var top = aRect.top - pH - 6; + var left = aRect.left; + if (top < 0) { + top = aRect.bottom + 6; + } + if (left + pW > _cs.width - 4) { + left = _cs.width - pW - 4; + } + if (left < 4) left = 4; + picker.style.top = top + 'px'; + picker.style.left = left + 'px'; + }); +} + +function _tvHideWidthPicker() { + if (_widthPickerEl && _widthPickerEl.parentNode) { + _widthPickerEl.parentNode.removeChild(_widthPickerEl); + } + _widthPickerEl = null; +} + +// ---- Context menu (right-click on drawing) ---- +var _ctxMenuEl = null; + +function _tvShowContextMenu(chartId, drawIdx, posX, posY) { + _tvHideContextMenu(); + var ds = window.__PYWRY_DRAWINGS__[chartId]; + if (!ds || drawIdx < 0 || drawIdx >= ds.drawings.length) return; + var d = ds.drawings[drawIdx]; + + var menu = document.createElement('div'); + menu.className = 'pywry-draw-ctx-menu'; + _ctxMenuEl = menu; + + // Settings + _cmItem(menu, _DT_ICONS.settings, 'Settings...', '', function() { + _tvHideContextMenu(); + _tvShowDrawingSettings(chartId, drawIdx); + }); + + _cmSep(menu); + + // Clone + _cmItem(menu, _DT_ICONS.clone, 'Clone', 'Ctrl+Drag', function() { + var copy = Object.assign({}, d); + copy._id = ++_drawIdCounter; + ds.drawings.push(copy); + _emitDrawingAdded(chartId, copy); + _tvRenderDrawings(chartId); + _tvHideContextMenu(); + }); + + // Copy (as JSON to clipboard) + _cmItem(menu, '', 'Copy', 'Ctrl+C', function() { + try { + navigator.clipboard.writeText(JSON.stringify(d)); + } catch(e) {} + _tvHideContextMenu(); + }); + + _cmSep(menu); + + // Hide / Show + var isHidden = d.hidden; + _cmItem(menu, isHidden ? _DT_ICONS.eye : _DT_ICONS.eyeOff, + isHidden ? 'Show' : 'Hide', '', function() { + d.hidden = !d.hidden; + if (d.hidden) { + _drawSelectedIdx = -1; + _tvHideFloatingToolbar(); + } + _tvRenderDrawings(chartId); + _tvHideContextMenu(); + }); + + _cmSep(menu); + + // Bring to front + _cmItem(menu, '', 'Bring to Front', '', function() { + var _undoChartId = chartId; + var _undoFromIdx = drawIdx; + _tvPushUndo({ + label: 'Bring to front', + undo: function() { + var ds2 = window.__PYWRY_DRAWINGS__[_undoChartId]; + if (!ds2 || ds2.drawings.length === 0) return; + // Move last back to original index + var item = ds2.drawings.pop(); + ds2.drawings.splice(_undoFromIdx, 0, item); + _tvDeselectAll(_undoChartId); + }, + redo: function() { + var ds2 = window.__PYWRY_DRAWINGS__[_undoChartId]; + if (!ds2 || _undoFromIdx >= ds2.drawings.length) return; + ds2.drawings.push(ds2.drawings.splice(_undoFromIdx, 1)[0]); + _tvDeselectAll(_undoChartId); + }, + }); + ds.drawings.push(ds.drawings.splice(drawIdx, 1)[0]); + _drawSelectedIdx = ds.drawings.length - 1; + _tvRenderDrawings(chartId); + _tvHideContextMenu(); + }); + + // Send to back + _cmItem(menu, '', 'Send to Back', '', function() { + ds.drawings.unshift(ds.drawings.splice(drawIdx, 1)[0]); + _drawSelectedIdx = 0; + _tvRenderDrawings(chartId); + _tvHideContextMenu(); + }); + + _cmSep(menu); + + // Delete + _cmItem(menu, _DT_ICONS.trash, 'Delete', 'Del', function() { + _tvDeleteDrawing(chartId, drawIdx); + _tvHideContextMenu(); + }, true); + + menu.style.left = posX + 'px'; + menu.style.top = posY + 'px'; + ds.uiLayer.appendChild(menu); + + // Clamp context menu within container + requestAnimationFrame(function() { + var mRect = menu.getBoundingClientRect(); + var uiRect = ds.uiLayer.getBoundingClientRect(); + if (mRect.right > uiRect.right) { + menu.style.left = Math.max(0, posX - (mRect.right - uiRect.right)) + 'px'; + } + if (mRect.bottom > uiRect.bottom) { + menu.style.top = Math.max(0, posY - (mRect.bottom - uiRect.bottom)) + 'px'; + } + }); + + // Close on click outside + setTimeout(function() { + document.addEventListener('click', _ctxMenuOutsideClick, { once: true }); + }, 0); +} + +function _ctxMenuOutsideClick() { _tvHideContextMenu(); } + +function _tvHideContextMenu() { + if (_ctxMenuEl && _ctxMenuEl.parentNode) { + _ctxMenuEl.parentNode.removeChild(_ctxMenuEl); + } + _ctxMenuEl = null; +} + +function _cmItem(menu, icon, label, shortcut, onclick, danger) { + var row = document.createElement('div'); + row.className = 'cm-item' + (danger ? ' cm-danger' : ''); + + // Icon container (always present for consistent spacing) + var iconWrap = document.createElement('span'); + iconWrap.className = 'cm-icon'; + if (icon) iconWrap.innerHTML = icon; + row.appendChild(iconWrap); + + // Label + var lbl = document.createElement('span'); + lbl.className = 'cm-label'; + lbl.textContent = label; + row.appendChild(lbl); + + // Shortcut + if (shortcut) { + var sc = document.createElement('span'); + sc.className = 'cm-shortcut'; + sc.textContent = shortcut; + row.appendChild(sc); + } + + row.addEventListener('click', function(e) { e.stopPropagation(); onclick(); }); + menu.appendChild(row); +} + +function _cmSep(menu) { + var s = document.createElement('div'); + s.className = 'cm-sep'; + menu.appendChild(s); +} + +// ---- Delete drawing helper ---- diff --git a/pywry/pywry/frontend/src/tvchart/07-drawing/08-mouse-tools.js b/pywry/pywry/frontend/src/tvchart/07-drawing/08-mouse-tools.js new file mode 100644 index 0000000..e3b128c --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/07-drawing/08-mouse-tools.js @@ -0,0 +1,943 @@ +function _tvDeleteDrawing(chartId, drawIdx) { + var ds = window.__PYWRY_DRAWINGS__[chartId]; + if (!ds) return; + var d = ds.drawings[drawIdx]; + if (!d) return; + + // Push undo entry before deleting + var _undoChartId = chartId; + var _undoDrawing = Object.assign({}, d); + var _undoIdx = drawIdx; + _tvPushUndo({ + label: 'Delete ' + (d.type || 'drawing'), + undo: function() { + var ds2 = window.__PYWRY_DRAWINGS__[_undoChartId]; + if (!ds2) return; + var idx = Math.min(_undoIdx, ds2.drawings.length); + ds2.drawings.splice(idx, 0, Object.assign({}, _undoDrawing)); + // Re-create native price line if hline + if (_undoDrawing.type === 'hline') { + var entry = window.__PYWRY_TVCHARTS__[_undoChartId]; + if (entry) { + var mainKey = Object.keys(entry.seriesMap)[0]; + if (mainKey && entry.seriesMap[mainKey]) { + var pl = entry.seriesMap[mainKey].createPriceLine({ + price: _undoDrawing.price, color: _undoDrawing.color, + lineWidth: _undoDrawing.lineWidth, lineStyle: _undoDrawing.lineStyle, + axisLabelVisible: true, title: '', + }); + ds2.priceLines.splice(idx, 0, { seriesId: mainKey, priceLine: pl }); + } + } + } + _tvDeselectAll(_undoChartId); + }, + redo: function() { + var ds2 = window.__PYWRY_DRAWINGS__[_undoChartId]; + if (!ds2) return; + for (var i = ds2.drawings.length - 1; i >= 0; i--) { + if (ds2.drawings[i]._id === _undoDrawing._id) { + if (ds2.drawings[i].type === 'hline' && ds2.priceLines[i]) { + var entry = window.__PYWRY_TVCHARTS__[_undoChartId]; + if (entry) { + var pl2 = ds2.priceLines[i]; + var ser = entry.seriesMap[pl2.seriesId]; + if (ser) try { ser.removePriceLine(pl2.priceLine); } catch(e) {} + } + ds2.priceLines.splice(i, 1); + } + ds2.drawings.splice(i, 1); + break; + } + } + _tvDeselectAll(_undoChartId); + }, + }); + + // Remove native price line if hline + if (d.type === 'hline' && ds.priceLines[drawIdx]) { + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (entry) { + var pl = ds.priceLines[drawIdx]; + var ser = entry.seriesMap[pl.seriesId]; + if (ser) try { ser.removePriceLine(pl.priceLine); } catch(e) {} + } + ds.priceLines.splice(drawIdx, 1); + } + ds.drawings.splice(drawIdx, 1); + _drawSelectedIdx = -1; + _drawSelectedChart = null; + _tvHideFloatingToolbar(); + _tvRenderDrawings(chartId); + if (window.pywry && window.pywry.emit) { + window.pywry.emit('tvchart:drawing-deleted', { chartId: chartId, index: drawIdx }); + } +} + +// ---- Sync native price line color for hlines ---- +function _tvSyncPriceLineColor(chartId, drawIdx, color) { + var ds = window.__PYWRY_DRAWINGS__[chartId]; + if (!ds || !ds.priceLines[drawIdx]) return; + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry) return; + var pl = ds.priceLines[drawIdx]; + var ser = entry.seriesMap[pl.seriesId]; + if (ser) { + try { ser.removePriceLine(pl.priceLine); } catch(e) {} + var drw = ds.drawings[drawIdx]; + var newPl = ser.createPriceLine({ + price: drw.price, + color: color, + lineWidth: drw.lineWidth || 2, + lineStyle: drw.lineStyle || 0, + axisLabelVisible: drw.showPriceLabel !== false, + title: drw.title || '', + }); + ds.priceLines[drawIdx] = { seriesId: pl.seriesId, priceLine: newPl }; + } +} + +// ---- Mouse interaction engine ---- +function _tvEnableDrawing(chartId) { + var ds = _tvEnsureDrawingLayer(chartId); + if (!ds || ds._eventsAttached) return; + ds._eventsAttached = true; + + var canvas = ds.canvas; + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry) return; + var container = entry.container; + + // ========================================================================= + // Container-level listeners: work in CURSOR mode (canvas has ptr-events:none) + // Events bubble up from the chart's own internal canvas through the container. + // ========================================================================= + + // --- Mouse move: hover highlight + drag (cursor mode) --- + // Use CAPTURE phase so drag moves are intercepted before the chart. + // NOTE: During drag, document-level handlers do the actual drag work. + // This handler only blocks propagation during drag so the chart doesn't pan. + container.addEventListener('mousemove', function(e) { + // When a modal is open (interaction locked), never process hover/drag + if (entry._interactionLocked) return; + // During drag, the document-level handler processes movement. + // Just block chart interaction here. + if (_drawDragging && _drawSelectedChart === chartId) { + e.preventDefault(); + e.stopPropagation(); + return; + } + + // Hover detection (cursor mode only) + if (ds._activeTool === 'cursor') { + var rect = canvas.getBoundingClientRect(); + var mx = e.clientX - rect.left; + var my = e.clientY - rect.top; + var hitIdx = _tvHitTest(chartId, mx, my); + if (hitIdx !== _drawHoverIdx) { + _drawHoverIdx = hitIdx; + _tvRenderDrawings(chartId); + } + // Cursor style feedback + if (_drawSelectedIdx >= 0 && _drawSelectedChart === chartId) { + var selD = ds.drawings[_drawSelectedIdx]; + if (selD) { + var ancs = _tvDrawAnchors(chartId, selD); + for (var ai = 0; ai < ancs.length; ai++) { + var dx = mx - ancs[ai].x, dy = my - ancs[ai].y; + if (dx * dx + dy * dy < 64) { + container.style.cursor = 'grab'; + return; + } + } + } + } + container.style.cursor = hitIdx >= 0 ? 'pointer' : ''; + } + }, true); // capture phase + + // --- Document-level drag handler (bound during startDrag, unbound in endDrag) --- + // Using document-level ensures drag continues even when mouse leaves the container. + var _boundDocDragMove = null; + var _boundDocDragEnd = null; + + function docDragMove(e) { + if (!_drawDragging || _drawSelectedChart !== chartId) return; + var rect = canvas.getBoundingClientRect(); + var mx = e.clientX - rect.left; + var my = e.clientY - rect.top; + e.preventDefault(); + + var dd = ds.drawings[_drawSelectedIdx]; + if (!dd || dd.locked) { _tvRenderDrawings(chartId); return; } + + var series = _tvMainSeries(chartId); + var ak = _drawDragging.anchor; + + if (ak === 'body') { + // Pixel-based translation from drag start. + // Use total pixel offset applied to the ORIGINAL anchor positions + // to avoid accumulated time-rounding drift. + var totalDx = mx - _drawDragging.startX; + var totalDy = my - _drawDragging.startY; + + if (dd.type === 'hline') { + if (_drawDragging._origPriceY !== null && series) { + var newP = series.coordinateToPrice(_drawDragging._origPriceY + totalDy); + if (newP !== null) dd.price = newP; + } + } else if (dd.type === 'vline') { + if (_drawDragging._origPx1) { + var vNewC = _tvFromPixel(chartId, _drawDragging._origPx1.x + totalDx, 0); + if (vNewC && vNewC.time !== null) dd.t1 = vNewC.time; + } + } else if (dd.type === 'flat_channel') { + if (_drawDragging._origPriceY !== null && _drawDragging._origPrice2Y !== null && series) { + var fcP1 = series.coordinateToPrice(_drawDragging._origPriceY + totalDy); + var fcP2 = series.coordinateToPrice(_drawDragging._origPrice2Y + totalDy); + if (fcP1 !== null && fcP2 !== null) { dd.p1 = fcP1; dd.p2 = fcP2; } + } + } else if ((dd.type === 'brush' || dd.type === 'highlighter' || dd.type === 'path' || dd.type === 'polyline') && dd.points && _drawDragging._origBrushPx) { + var obp = _drawDragging._origBrushPx; + var allOk = true; + var newPts = []; + for (var bdi = 0; bdi < obp.length; bdi++) { + if (!obp[bdi]) { allOk = false; break; } + var bNewC = _tvFromPixel(chartId, obp[bdi].x + totalDx, obp[bdi].y + totalDy); + if (!bNewC || bNewC.time === null || bNewC.price === null) { allOk = false; break; } + newPts.push({ t: bNewC.time, p: bNewC.price }); + } + if (allOk) dd.points = newPts; + } else { + // Two-point (or three-point) tools: translate all anchors in pixel space + if (_drawDragging._origPx1 && _drawDragging._origPx2) { + var newC1 = _tvFromPixel(chartId, _drawDragging._origPx1.x + totalDx, _drawDragging._origPx1.y + totalDy); + var newC2 = _tvFromPixel(chartId, _drawDragging._origPx2.x + totalDx, _drawDragging._origPx2.y + totalDy); + if (newC1 && newC1.time !== null && newC1.price !== null && + newC2 && newC2.time !== null && newC2.price !== null) { + dd.t1 = newC1.time; dd.p1 = newC1.price; + dd.t2 = newC2.time; dd.p2 = newC2.price; + } + // Also translate third anchor if present + if (_drawDragging._origPx3) { + var newC3 = _tvFromPixel(chartId, _drawDragging._origPx3.x + totalDx, _drawDragging._origPx3.y + totalDy); + if (newC3 && newC3.time !== null && newC3.price !== null) { + dd.t3 = newC3.time; dd.p3 = newC3.price; + } + } + } + } + } else { + // Anchor drag: set the anchor directly from mouse position + var coord = _tvFromPixel(chartId, mx, my); + if (!coord || coord.time === null || coord.price === null) { + _tvRenderDrawings(chartId); + return; + } + if (ak === 'p1') { dd.t1 = coord.time; dd.p1 = coord.price; } + else if (ak === 'p2') { dd.t2 = coord.time; dd.p2 = coord.price; } + else if (ak === 'p3') { dd.t3 = coord.time; dd.p3 = coord.price; } + else if (ak === 'price') { dd.price = coord.price; } + else if (ak.indexOf('pt') === 0 && dd.points) { + // Path/polyline vertex drag + var ptIdx = parseInt(ak.substring(2)); + if (!isNaN(ptIdx) && ptIdx >= 0 && ptIdx < dd.points.length) { + dd.points[ptIdx] = { t: coord.time, p: coord.price }; + } + } + } + + _tvRenderDrawings(chartId); + _tvRepositionToolbar(chartId); + } + + // --- Mouse down: begin drag (select + drag in one motion, cursor mode) --- + // Use CAPTURE phase so we fire before the chart and can block its panning. + container.addEventListener('mousedown', function(e) { + if (e.button !== 0) return; + // When a modal is open (interaction locked), never start drawing drag + if (entry._interactionLocked) return; + if (ds._activeTool !== 'cursor') return; + var rect = canvas.getBoundingClientRect(); + var mx = e.clientX - rect.left; + var my = e.clientY - rect.top; + + // Helper: start dragging and block chart panning + function startDrag(anchor, mx2, my2) { + var dd = ds.drawings[_drawSelectedIdx]; + var series = _tvMainSeries(chartId); + _drawDragging = { + anchor: anchor, startX: mx2, startY: my2, + // Store original anchor pixel positions at drag start + _origPx1: null, _origPx2: null, _origPx3: null, + _origPriceY: null, _origPrice2Y: null, + _origBrushPx: null, + }; + // Snapshot pixel positions for body drag + if (anchor === 'body' && dd) { + if (dd.type === 'hline' && series) { + _drawDragging._origPriceY = series.priceToCoordinate(dd.price); + } else if (dd.type === 'vline') { + _drawDragging._origPx1 = _tvToPixel(chartId, dd.t1, 0); + } else if (dd.type === 'flat_channel' && series) { + _drawDragging._origPriceY = series.priceToCoordinate(dd.p1); + _drawDragging._origPrice2Y = series.priceToCoordinate(dd.p2); + } else if ((dd.type === 'brush' || dd.type === 'highlighter' || dd.type === 'path' || dd.type === 'polyline') && dd.points) { + _drawDragging._origBrushPx = []; + for (var bi = 0; bi < dd.points.length; bi++) { + _drawDragging._origBrushPx.push( + _tvToPixel(chartId, dd.points[bi].t, dd.points[bi].p) + ); + } + } else { + _drawDragging._origPx1 = dd.t1 !== undefined ? _tvToPixel(chartId, dd.t1, dd.p1) : null; + _drawDragging._origPx2 = dd.t2 !== undefined ? _tvToPixel(chartId, dd.t2, dd.p2) : null; + _drawDragging._origPx3 = dd.t3 !== undefined ? _tvToPixel(chartId, dd.t3, dd.p3) : null; + } + } + // Block chart panning by making the overlay intercept events + canvas.style.pointerEvents = 'auto'; + // Freeze chart interaction so crosshair/legend/axes don't move + entry.chart.applyOptions({ handleScroll: false, handleScale: false }); + entry.chart.clearCrosshairPosition(); + container.style.cursor = anchor === 'body' ? 'move' : 'grabbing'; + // Bind document-level handlers so drag works even outside the container + _boundDocDragMove = docDragMove; + _boundDocDragEnd = docDragEnd; + document.addEventListener('mousemove', _boundDocDragMove, true); + document.addEventListener('mouseup', _boundDocDragEnd, true); + e.preventDefault(); + e.stopPropagation(); + } + + // If a drawing is already selected, try its anchors first + if (_drawSelectedIdx >= 0 && _drawSelectedChart === chartId) { + var selD = ds.drawings[_drawSelectedIdx]; + if (selD && !selD.locked) { + var ancs = _tvDrawAnchors(chartId, selD); + for (var ai = 0; ai < ancs.length; ai++) { + var adx = mx - ancs[ai].x, ady = my - ancs[ai].y; + if (adx * adx + ady * ady < 64) { + startDrag(ancs[ai].key, mx, my); + return; + } + } + if (_tvDrawHit(chartId, selD, mx, my, 8)) { + startDrag('body', mx, my); + return; + } + } + } + + // Not on the selected drawing — hit-test all drawings to select + drag + var hitIdx = _tvHitTest(chartId, mx, my); + if (hitIdx >= 0) { + var hitD = ds.drawings[hitIdx]; + if (hitD && !hitD.locked) { + _drawSelectedIdx = hitIdx; + _drawSelectedChart = chartId; + _tvRenderDrawings(chartId); + _tvShowFloatingToolbar(chartId, hitIdx); + // Check anchors of new selection + var hitAncs = _tvDrawAnchors(chartId, hitD); + for (var hai = 0; hai < hitAncs.length; hai++) { + var hdx = mx - hitAncs[hai].x, hdy = my - hitAncs[hai].y; + if (hdx * hdx + hdy * hdy < 64) { + startDrag(hitAncs[hai].key, mx, my); + return; + } + } + startDrag('body', mx, my); + } + } + }, true); // capture phase + + // --- Mouse up: end drag --- + function docDragEnd() { + if (_drawDragging) { + _drawDidDrag = true; + _drawDragging = null; + // Remove document-level handlers + if (_boundDocDragMove) document.removeEventListener('mousemove', _boundDocDragMove, true); + if (_boundDocDragEnd) document.removeEventListener('mouseup', _boundDocDragEnd, true); + _boundDocDragMove = null; + _boundDocDragEnd = null; + // Restore pointer-events so chart can pan/zoom again + _tvApplyDrawingInteractionMode(ds); + // Restore chart interaction + entry.chart.applyOptions({ handleScroll: true, handleScale: true }); + container.style.cursor = ''; + _tvRenderDrawings(chartId); + _tvRepositionToolbar(chartId); + // Sync native price line if hline was dragged + if (_drawSelectedIdx >= 0 && ds.drawings[_drawSelectedIdx] && + ds.drawings[_drawSelectedIdx].type === 'hline') { + _tvSyncPriceLineColor(chartId, _drawSelectedIdx, + ds.drawings[_drawSelectedIdx].color || _drawDefaults.color); + } + } + } + // Brush/Highlighter commit still uses container mouseup + function brushCommit() { + if (_drawPending && (_drawPending.type === 'brush' || _drawPending.type === 'highlighter') && _drawPending.chartId === chartId) { + if (_drawPending.points && _drawPending.points.length > 1) { + ds.drawings.push(Object.assign({}, _drawPending)); + _drawSelectedIdx = ds.drawings.length - 1; + _drawSelectedChart = chartId; + _tvShowFloatingToolbar(chartId, _drawSelectedIdx); + _emitDrawingAdded(chartId, _drawPending); + } + _drawPending = null; + _tvRenderDrawings(chartId); + } + } + container.addEventListener('mouseup', brushCommit, true); // capture phase + + // --- Double-click: open drawing settings (cursor mode) --- + container.addEventListener('dblclick', function(e) { + if (entry._interactionLocked) return; + if (ds._activeTool !== 'cursor') return; + var rect = canvas.getBoundingClientRect(); + var mx = e.clientX - rect.left; + var my = e.clientY - rect.top; + var hitIdx = _tvHitTest(chartId, mx, my); + if (hitIdx >= 0) { + e.preventDefault(); + e.stopPropagation(); + _drawSelectedIdx = hitIdx; + _drawSelectedChart = chartId; + _tvRenderDrawings(chartId); + _tvShowDrawingSettings(chartId, hitIdx); + } + }); + + // --- Click: select/deselect drawing (cursor mode) --- + container.addEventListener('click', function(e) { + if (entry._interactionLocked) return; + if (ds._activeTool !== 'cursor') return; + // Skip click if a drag just completed + if (_drawDidDrag) { + _drawDidDrag = false; + return; + } + var rect = canvas.getBoundingClientRect(); + var mx = e.clientX - rect.left; + var my = e.clientY - rect.top; + var hitIdx = _tvHitTest(chartId, mx, my); + if (hitIdx >= 0) { + _drawSelectedIdx = hitIdx; + _drawSelectedChart = chartId; + _tvRenderDrawings(chartId); + _tvShowFloatingToolbar(chartId, hitIdx); + } else { + _tvDeselectAll(chartId); + } + }); + + // --- Right-click: context menu (cursor mode) --- + container.addEventListener('contextmenu', function(e) { + if (entry._interactionLocked) return; + if (ds._activeTool !== 'cursor') return; + var rect = canvas.getBoundingClientRect(); + var mx = e.clientX - rect.left; + var my = e.clientY - rect.top; + var hitIdx = _tvHitTest(chartId, mx, my); + if (hitIdx >= 0) { + e.preventDefault(); + _drawSelectedIdx = hitIdx; + _drawSelectedChart = chartId; + _tvRenderDrawings(chartId); + _tvShowFloatingToolbar(chartId, hitIdx); + _tvShowContextMenu(chartId, hitIdx, mx, my); + } + }); + + // ========================================================================= + // Canvas-level listeners: work in DRAWING TOOL mode (canvas has ptr-events:auto) + // These handle live preview, click-to-place, brush, and drawing-tool context menu. + // ========================================================================= + + // --- Mouse move on canvas: live preview for in-progress drawing --- + canvas.addEventListener('mousemove', function(e) { + if (!_drawPending || _drawPending.chartId !== chartId) return; + var rect = canvas.getBoundingClientRect(); + var mx = e.clientX - rect.left; + var my = e.clientY - rect.top; + var pc = _tvFromPixel(chartId, mx, my); + if (pc) { + if ((_drawPending.type === 'brush' || _drawPending.type === 'highlighter') && _drawPending.points && !_drawPending._multiPoint) { + _drawPending.points.push({ t: pc.time, p: pc.price }); + } else if (_drawPending._phase === 2) { + // 3-point tool: phase 2 previews the third anchor + _drawPending.t3 = pc.time; + _drawPending.p3 = pc.price; + } else { + _drawPending.t2 = pc.time; + _drawPending.p2 = pc.price; + } + _tvRenderDrawings(chartId); + } + }); + + // --- Click on canvas: place drawing (drawing tool mode) --- + canvas.addEventListener('click', function(e) { + var _tool = ds._activeTool; + // Drawing tools only — cursor mode is handled on container + if (_tool === 'cursor' || _tool === 'crosshair') return; + + var rect = canvas.getBoundingClientRect(); + var mx = e.clientX - rect.left; + var my = e.clientY - rect.top; + var coord = _tvFromPixel(chartId, mx, my); + if (!coord || coord.time === null || coord.price === null) return; + + if (_tool === 'hline') { + var hlD = { + _id: ++_drawIdCounter, type: 'hline', price: coord.price, + chartId: chartId, color: _drawDefaults.color, + lineWidth: _drawDefaults.lineWidth, lineStyle: _drawDefaults.lineStyle, + showPriceLabel: true, title: '', extend: "Don't extend", + }; + ds.drawings.push(hlD); + // Native price line + var mainKey = Object.keys(entry.seriesMap)[0]; + if (mainKey && entry.seriesMap[mainKey]) { + var pl = entry.seriesMap[mainKey].createPriceLine({ + price: coord.price, color: hlD.color, + lineWidth: hlD.lineWidth, lineStyle: hlD.lineStyle, + axisLabelVisible: true, title: '', + }); + ds.priceLines.push({ seriesId: mainKey, priceLine: pl }); + } + _tvRenderDrawings(chartId); + // Auto-select new drawing + _drawSelectedIdx = ds.drawings.length - 1; + _drawSelectedChart = chartId; + _tvShowFloatingToolbar(chartId, _drawSelectedIdx); + _emitDrawingAdded(chartId, hlD); + return; + } + + if (_tool === 'text') { + var txtD = { + _id: ++_drawIdCounter, type: 'text', t1: coord.time, p1: coord.price, + text: 'Text', chartId: chartId, color: _drawDefaults.color, + fontSize: 14, lineWidth: _drawDefaults.lineWidth, + }; + ds.drawings.push(txtD); + _tvRenderDrawings(chartId); + _drawSelectedIdx = ds.drawings.length - 1; + _drawSelectedChart = chartId; + _tvShowFloatingToolbar(chartId, _drawSelectedIdx); + _emitDrawingAdded(chartId, txtD); + // Open settings panel with Text tab + _tvShowDrawingSettings(chartId, _drawSelectedIdx); + return; + } + + // Single-click text/notes tools + var _singleClickTextTools = ['anchored_text', 'note', 'price_note', 'pin', 'comment', 'price_label', 'signpost', 'flag_mark']; + if (_singleClickTextTools.indexOf(_tool) !== -1) { + var _sctDefText = { anchored_text: 'Text', note: 'Note', price_note: 'Price Note', pin: '', comment: 'Comment', price_label: 'Label', signpost: 'Signpost', flag_mark: '' }; + var sctD = { + _id: ++_drawIdCounter, type: _tool, t1: coord.time, p1: coord.price, + text: _sctDefText[_tool] || '', chartId: chartId, + color: _drawDefaults.color, fontSize: 14, + bold: false, italic: false, + bgEnabled: true, bgColor: '#2a2e39', + borderEnabled: false, borderColor: _drawDefaults.color, + lineWidth: _drawDefaults.lineWidth, + }; + ds.drawings.push(sctD); + _tvRenderDrawings(chartId); + _drawSelectedIdx = ds.drawings.length - 1; + _drawSelectedChart = chartId; + _tvShowFloatingToolbar(chartId, _drawSelectedIdx); + _emitDrawingAdded(chartId, sctD); + _tvShowDrawingSettings(chartId, _drawSelectedIdx); + return; + } + + // Vertical Line — single-click, anchored by time only + if (_tool === 'vline') { + var vlD = { + _id: ++_drawIdCounter, type: 'vline', t1: coord.time, + chartId: chartId, color: _drawDefaults.color, + lineWidth: _drawDefaults.lineWidth, lineStyle: _drawDefaults.lineStyle, + }; + ds.drawings.push(vlD); + _tvRenderDrawings(chartId); + _drawSelectedIdx = ds.drawings.length - 1; + _drawSelectedChart = chartId; + _tvShowFloatingToolbar(chartId, _drawSelectedIdx); + _emitDrawingAdded(chartId, vlD); + return; + } + + // Cross Line — single-click, crosshair-style + if (_tool === 'crossline') { + var clD = { + _id: ++_drawIdCounter, type: 'crossline', t1: coord.time, p1: coord.price, + chartId: chartId, color: _drawDefaults.color, + lineWidth: _drawDefaults.lineWidth, lineStyle: _drawDefaults.lineStyle, + }; + ds.drawings.push(clD); + _tvRenderDrawings(chartId); + _drawSelectedIdx = ds.drawings.length - 1; + _drawSelectedChart = chartId; + _tvShowFloatingToolbar(chartId, _drawSelectedIdx); + _emitDrawingAdded(chartId, clD); + return; + } + + // Arrow mark single-click tools + var arrowMarks = ['arrow_mark_up', 'arrow_mark_down', 'arrow_mark_left', 'arrow_mark_right']; + if (arrowMarks.indexOf(_tool) !== -1) { + var amD = { + _id: ++_drawIdCounter, type: _tool, t1: coord.time, p1: coord.price, + chartId: chartId, color: _drawDefaults.color, + fillColor: _drawDefaults.color, borderColor: _drawDefaults.color, textColor: _drawDefaults.color, + lineWidth: _drawDefaults.lineWidth, size: 30, + text: '', fontSize: 16, bold: false, italic: false, + }; + ds.drawings.push(amD); + _tvRenderDrawings(chartId); + _drawSelectedIdx = ds.drawings.length - 1; + _drawSelectedChart = chartId; + _tvShowFloatingToolbar(chartId, _drawSelectedIdx); + _emitDrawingAdded(chartId, amD); + return; + } + + // Anchored VWAP — single-click anchor point + if (_tool === 'anchored_vwap') { + var avD = { + _id: ++_drawIdCounter, type: 'anchored_vwap', t1: coord.time, p1: coord.price, + chartId: chartId, color: _drawDefaults.color || '#2962FF', + lineWidth: _drawDefaults.lineWidth, + }; + ds.drawings.push(avD); + _tvRenderDrawings(chartId); + _drawSelectedIdx = ds.drawings.length - 1; + _drawSelectedChart = chartId; + _tvShowFloatingToolbar(chartId, _drawSelectedIdx); + _emitDrawingAdded(chartId, avD); + return; + } + + // Two-point tools (including ray, extended_line, hray, flat_channel, regression_channel) + var twoPointTools = ['trendline', 'ray', 'extended_line', 'hray', + 'rect', 'channel', 'flat_channel', 'regression_channel', + 'fibonacci', 'measure', + 'fib_timezone', 'fib_fan', 'fib_arc', 'fib_circle', + 'fib_spiral', 'gann_box', 'gann_square_fixed', 'gann_square', 'gann_fan', + 'arrow_marker', 'arrow', 'circle', 'ellipse', 'curve', + 'long_position', 'short_position', 'forecast', + 'bars_pattern', 'ghost_feed', 'projection', 'fixed_range_vol', + 'price_range', 'date_range', 'date_price_range', + 'callout']; + // Three-point tools (A→B, then C on second click) + var threePointTools = ['fib_extension', 'fib_channel', 'fib_wedge', 'pitchfan', 'fib_time', + 'rotated_rect', 'triangle', 'shape_arc', 'double_curve']; + if (threePointTools.indexOf(_tool) !== -1) { + if (!_drawPending || _drawPending.chartId !== chartId) { + // First click: set A + _drawPending = { + _id: ++_drawIdCounter, type: _tool, + t1: coord.time, p1: coord.price, + t2: coord.time, p2: coord.price, + chartId: chartId, color: _drawDefaults.color, + lineWidth: _drawDefaults.lineWidth, lineStyle: _drawDefaults.lineStyle, + _phase: 1, + }; + } else if (_drawPending._phase === 1) { + // Second click: set B, start previewing C + _drawPending.t2 = coord.time; + _drawPending.p2 = coord.price; + _drawPending.t3 = coord.time; + _drawPending.p3 = coord.price; + _drawPending._phase = 2; + } else { + // Third click: set C, commit + _drawPending.t3 = coord.time; + _drawPending.p3 = coord.price; + delete _drawPending._phase; + ds.drawings.push(Object.assign({}, _drawPending)); + var committed = _drawPending; + _drawPending = null; + _tvRenderDrawings(chartId); + _drawSelectedIdx = ds.drawings.length - 1; + _drawSelectedChart = chartId; + _tvShowFloatingToolbar(chartId, _drawSelectedIdx); + _emitDrawingAdded(chartId, committed); + } + return; + } + if (twoPointTools.indexOf(_tool) !== -1) { + if (!_drawPending || _drawPending.chartId !== chartId) { + _drawPending = { + _id: ++_drawIdCounter, type: _tool, + t1: coord.time, p1: coord.price, + t2: coord.time, p2: coord.price, + chartId: chartId, color: _drawDefaults.color, + lineWidth: _drawDefaults.lineWidth, lineStyle: _drawDefaults.lineStyle, + offset: 30, + extend: "Don't extend", + ray: false, + showMiddlePoint: false, + showPriceLabels: false, + stats: 'hidden', + statsPosition: 'right', + alwaysShowStats: false, + }; + if (_tool === 'arrow_marker' || _tool === 'arrow') { + _drawPending.text = ''; + _drawPending.fontSize = 16; + _drawPending.bold = false; + _drawPending.italic = false; + _drawPending.fillColor = _drawDefaults.color; + _drawPending.borderColor = _drawDefaults.color; + _drawPending.textColor = _drawDefaults.color; + } + if (_tool === 'callout') { + _drawPending.text = 'Callout'; + _drawPending.fontSize = 14; + _drawPending.bold = false; + _drawPending.italic = false; + _drawPending.bgEnabled = true; + _drawPending.bgColor = '#2a2e39'; + _drawPending.borderEnabled = false; + _drawPending.borderColor = _drawDefaults.color; + } + } else { + _drawPending.t2 = coord.time; + _drawPending.p2 = coord.price; + ds.drawings.push(Object.assign({}, _drawPending)); + var committed = _drawPending; + _drawPending = null; + _tvRenderDrawings(chartId); + // Auto-select + _drawSelectedIdx = ds.drawings.length - 1; + _drawSelectedChart = chartId; + _tvShowFloatingToolbar(chartId, _drawSelectedIdx); + _emitDrawingAdded(chartId, committed); + } + return; + } + + // Brush / Highlighter — free-form drawing, collect points on drag + if (_tool === 'brush' || _tool === 'highlighter') { + _drawPending = { + _id: ++_drawIdCounter, type: _tool, + points: [{ t: coord.time, p: coord.price }], + chartId: chartId, color: _drawDefaults.color, + lineWidth: _tool === 'highlighter' ? 10 : _drawDefaults.lineWidth, + opacity: _tool === 'highlighter' ? 0.4 : 1, + }; + _tvRenderDrawings(chartId); + return; + } + + // Path / Polyline — click-per-point, double-click or right-click to finish + if (_tool === 'path' || _tool === 'polyline') { + if (!_drawPending || _drawPending.chartId !== chartId) { + _drawPending = { + _id: ++_drawIdCounter, type: _tool, + points: [{ t: coord.time, p: coord.price }], + chartId: chartId, color: _drawDefaults.color, + lineWidth: _drawDefaults.lineWidth, lineStyle: _drawDefaults.lineStyle, + _multiPoint: true, + }; + } else { + _drawPending.points.push({ t: coord.time, p: coord.price }); + } + _tvRenderDrawings(chartId); + return; + } + }); + + // Double-click to commit path/polyline + canvas.addEventListener('dblclick', function(e) { + if (!_drawPending || !_drawPending._multiPoint) return; + var d = _drawPending; + // Remove last duplicated point from dblclick + if (d.points.length > 2) d.points.pop(); + delete d._multiPoint; + ds.drawings.push(Object.assign({}, d)); + var committed = d; + _drawPending = null; + _tvRenderDrawings(chartId); + _drawSelectedIdx = ds.drawings.length - 1; + _drawSelectedChart = chartId; + _tvShowFloatingToolbar(chartId, _drawSelectedIdx); + _emitDrawingAdded(chartId, committed); + }); + + // --- Right-click on canvas: cancel pending drawing and revert to cursor --- + canvas.addEventListener('contextmenu', function(e) { + if (_drawPending) { + e.preventDefault(); + _drawPending = null; + _tvRenderDrawings(chartId); + _tvRevertToCursor(chartId); + } else if (ds._activeTool !== 'cursor' && ds._activeTool !== 'crosshair') { + e.preventDefault(); + _tvRevertToCursor(chartId); + } + }); + + // --- Keyboard shortcuts --- + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape') { + // Cancel pending drawing + if (_drawPending) { + _drawPending = null; + _tvRenderDrawings(chartId); + } + // If a drawing tool is active, revert to cursor + if (ds._activeTool !== 'cursor' && ds._activeTool !== 'crosshair') { + _tvRevertToCursor(chartId); + return; + } + // Otherwise deselect any selected drawing + if (_drawSelectedIdx >= 0 && _drawSelectedChart === chartId) { + _tvDeselectAll(chartId); + } + return; + } + if (_drawSelectedIdx < 0 || _drawSelectedChart !== chartId) return; + if (e.key === 'Delete' || e.key === 'Backspace') { + e.preventDefault(); + _tvDeleteDrawing(chartId, _drawSelectedIdx); + } + }); +} + +function _tvDeselectAll(chartId) { + _drawSelectedIdx = -1; + _drawSelectedChart = null; + _drawHoverIdx = -1; + _tvHideFloatingToolbar(); + _tvHideContextMenu(); + _tvRenderDrawings(chartId); +} + +// Revert to cursor mode and update the left toolbar UI +function _tvRevertToCursor(chartId) { + var ds = window.__PYWRY_DRAWINGS__[chartId]; + if (!ds || ds._activeTool === 'cursor') return; + _tvSetDrawTool(chartId, 'cursor'); + // Update left toolbar scoped to this chart + var allIcons = _tvScopedQueryAll(chartId, '.pywry-toolbar-left .pywry-icon-btn'); + if (allIcons) allIcons.forEach(function(el) { el.classList.remove('active'); }); + var cursorBtn = _tvScopedById(chartId, 'tvchart-tool-cursor'); + if (cursorBtn) cursorBtn.classList.add('active'); +} + +function _emitDrawingAdded(chartId, d) { + // Push undo entry for the newly added drawing (always the last in the array) + var _undoChartId = chartId; + var _undoDrawing = Object.assign({}, d); + _tvPushUndo({ + label: 'Add ' + (d.type || 'drawing'), + undo: function() { + var ds = window.__PYWRY_DRAWINGS__[_undoChartId]; + if (!ds) return; + // Find and remove the drawing by _id + for (var i = ds.drawings.length - 1; i >= 0; i--) { + if (ds.drawings[i]._id === _undoDrawing._id) { + // Remove native price line if hline + if (ds.drawings[i].type === 'hline' && ds.priceLines[i]) { + var entry = window.__PYWRY_TVCHARTS__[_undoChartId]; + if (entry) { + var pl = ds.priceLines[i]; + var ser = entry.seriesMap[pl.seriesId]; + if (ser) try { ser.removePriceLine(pl.priceLine); } catch(e) {} + } + ds.priceLines.splice(i, 1); + } + ds.drawings.splice(i, 1); + break; + } + } + _tvDeselectAll(_undoChartId); + }, + redo: function() { + var ds = window.__PYWRY_DRAWINGS__[_undoChartId]; + if (!ds) return; + ds.drawings.push(Object.assign({}, _undoDrawing)); + // Re-create native price line if hline + if (_undoDrawing.type === 'hline') { + var entry = window.__PYWRY_TVCHARTS__[_undoChartId]; + if (entry) { + var mainKey = Object.keys(entry.seriesMap)[0]; + if (mainKey && entry.seriesMap[mainKey]) { + var pl = entry.seriesMap[mainKey].createPriceLine({ + price: _undoDrawing.price, color: _undoDrawing.color, + lineWidth: _undoDrawing.lineWidth, lineStyle: _undoDrawing.lineStyle, + axisLabelVisible: true, title: '', + }); + ds.priceLines.push({ seriesId: mainKey, priceLine: pl }); + } + } + } + _tvDeselectAll(_undoChartId); + }, + }); + if (window.pywry && window.pywry.emit) { + window.pywry.emit('tvchart:drawing-added', { chartId: chartId, drawing: d }); + } + // Auto-revert to cursor after every drawing finishes so the + // toolbar button doesn't stay highlighted forever. + _tvRevertToCursor(chartId); +} + +// ---- Tool switching ---- +function _tvSetDrawTool(chartId, tool) { + var ds = window.__PYWRY_DRAWINGS__[chartId]; + if (!ds) { + _tvEnsureDrawingLayer(chartId); + ds = window.__PYWRY_DRAWINGS__[chartId]; + } + if (!ds) return; + + ds._activeTool = tool; + if (_drawPending && _drawPending.chartId === chartId) { + _drawPending = null; + } + + _tvApplyDrawingInteractionMode(ds); + + // Toggle chart crosshair lines based on tool selection + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (entry && entry._chartPrefs) { + entry._chartPrefs.crosshairEnabled = (tool === 'crosshair'); + _tvApplyHoverReadoutMode(entry); + } + + // Deselect when switching tools + _tvDeselectAll(chartId); +} + +// ---- Clear all drawings ---- +function _tvClearDrawings(chartId) { + var ds = window.__PYWRY_DRAWINGS__[chartId]; + if (!ds) return; + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (entry) { + for (var i = 0; i < ds.priceLines.length; i++) { + var pl = ds.priceLines[i]; + var ser = entry.seriesMap[pl.seriesId]; + if (ser) try { ser.removePriceLine(pl.priceLine); } catch(e) {} + } + } + ds.priceLines = []; + ds.drawings = []; + if (_drawPending && _drawPending.chartId === chartId) _drawPending = null; + _drawSelectedIdx = -1; + _drawSelectedChart = null; + _tvHideFloatingToolbar(); + _tvHideContextMenu(); + _tvRenderDrawings(chartId); +} + diff --git a/pywry/pywry/frontend/src/tvchart/08-settings.js b/pywry/pywry/frontend/src/tvchart/08-settings.js deleted file mode 100644 index a9aa561..0000000 --- a/pywry/pywry/frontend/src/tvchart/08-settings.js +++ /dev/null @@ -1,6238 +0,0 @@ -// --------------------------------------------------------------------------- -// Drawing Settings Panel (TV-style modal per drawing type) -// --------------------------------------------------------------------------- -var _settingsOverlay = null; -var _chartSettingsOverlay = null; -var _compareOverlay = null; -var _seriesSettingsOverlay = null; -var _volumeSettingsOverlay = null; -var _settingsOverlayChartId = null; -var _chartSettingsOverlayChartId = null; -var _compareOverlayChartId = null; -var _seriesSettingsOverlayChartId = null; -var _seriesSettingsOverlaySeriesId = null; -var _volumeSettingsOverlayChartId = null; - -var _DRAW_TYPE_NAMES = { - hline: 'Horizontal Line', trendline: 'Trend Line', rect: 'Rectangle', - channel: 'Parallel Channel', fibonacci: 'Fibonacci Retracement', - fib_extension: 'Trend-Based Fib Extension', fib_channel: 'Fib Channel', - fib_timezone: 'Fib Time Zone', fib_fan: 'Fib Speed Resistance Fan', - fib_arc: 'Fib Speed Resistance Arcs', fib_circle: 'Fib Circles', - fib_wedge: 'Fib Wedge', pitchfan: 'Pitchfan', - fib_time: 'Trend-Based Fib Time', fib_spiral: 'Fib Spiral', - gann_box: 'Gann Box', gann_square_fixed: 'Gann Square Fixed', - gann_square: 'Gann Square', gann_fan: 'Gann Fan', - text: 'Text', measure: 'Measure', brush: 'Brush', - ray: 'Ray', extended_line: 'Extended Line', hray: 'Horizontal Ray', - vline: 'Vertical Line', crossline: 'Cross Line', - flat_channel: 'Flat Top/Bottom', regression_channel: 'Regression Trend', - highlighter: 'Highlighter', - arrow_marker: 'Arrow Marker', arrow: 'Arrow', - arrow_mark_up: 'Arrow Mark Up', arrow_mark_down: 'Arrow Mark Down', - arrow_mark_left: 'Arrow Mark Left', arrow_mark_right: 'Arrow Mark Right', - circle: 'Circle', ellipse: 'Ellipse', triangle: 'Triangle', - rotated_rect: 'Rotated Rectangle', path: 'Path', polyline: 'Polyline', - shape_arc: 'Arc', curve: 'Curve', double_curve: 'Double Curve', - long_position: 'Long Position', short_position: 'Short Position', - forecast: 'Forecast', bars_pattern: 'Bars Pattern', - ghost_feed: 'Ghost Feed', projection: 'Projection', - anchored_vwap: 'Anchored VWAP', fixed_range_vol: 'Fixed Range Volume Profile', - price_range: 'Price Range', date_range: 'Date Range', - date_price_range: 'Date and Price Range', - anchored_text: 'Anchored Text', note: 'Note', price_note: 'Price Note', - pin: 'Pin', callout: 'Callout', comment: 'Comment', - price_label: 'Price Label', signpost: 'Signpost', flag_mark: 'Flag Mark' -}; - -var _LINE_STYLE_NAMES = ['Solid', 'Dashed', 'Dotted']; - -function _tvInteractiveNavigationOptions() { - return { - handleScroll: { - mouseWheel: true, - pressedMouseMove: true, - horzTouchDrag: true, - vertTouchDrag: true, - }, - handleScale: { - mouseWheel: true, - pinch: true, - axisPressedMouseMove: { - time: true, - price: true, - }, - axisDoubleClickReset: { - time: true, - price: true, - }, - }, - }; -} - -function _tvLockedNavigationOptions() { - return { - handleScroll: { - mouseWheel: false, - pressedMouseMove: false, - horzTouchDrag: false, - vertTouchDrag: false, - }, - handleScale: { - mouseWheel: false, - pinch: false, - axisPressedMouseMove: { - time: false, - price: false, - }, - axisDoubleClickReset: { - time: false, - price: false, - }, - }, - }; -} - -function _tvEnsureInteractiveNavigation(entry) { - if (!entry || !entry.chart || typeof entry.chart.applyOptions !== 'function') return; - try { entry.chart.applyOptions(_tvInteractiveNavigationOptions()); } catch (e) {} -} - -function _tvSetChartInteractionLocked(chartId, locked) { - if (!chartId) return; - var entry = window.__PYWRY_TVCHARTS__ && window.__PYWRY_TVCHARTS__[chartId]; - if (!entry || !entry.chart || typeof entry.chart.applyOptions !== 'function') return; - - var shouldLock = !!locked; - if (entry._interactionLocked === shouldLock) return; - entry._interactionLocked = shouldLock; - - try { - entry.chart.applyOptions(shouldLock ? _tvLockedNavigationOptions() : _tvInteractiveNavigationOptions()); - } catch (e) { - try { _tvEnsureInteractiveNavigation(entry); } catch (err) {} - } - - // Block pointer events on the chart container so internal elements - // (e.g. the pane separator / plot divider) don't show hover effects. - if (entry.container) { - entry.container.style.pointerEvents = shouldLock ? 'none' : ''; - } - - if (shouldLock) { - // Clear draw hover visuals so no stale hover feedback remains behind the modal. - if (_drawHoverIdx !== -1 && _drawSelectedChart === chartId) { - _drawHoverIdx = -1; - _tvRenderDrawings(chartId); - } - } -} - -function _tvHideDrawingSettings() { - _tvHideColorOpacityPopup(); - if (_settingsOverlay && _settingsOverlay.parentNode) { - _settingsOverlay.parentNode.removeChild(_settingsOverlay); - } - if (_settingsOverlayChartId) _tvSetChartInteractionLocked(_settingsOverlayChartId, false); - _settingsOverlay = null; - _settingsOverlayChartId = null; - _tvRefreshLegendVisibility(); -} - -function _tvHideChartSettings() { - _tvHideColorOpacityPopup(); - if (_chartSettingsOverlay && _chartSettingsOverlay.parentNode) { - _chartSettingsOverlay.parentNode.removeChild(_chartSettingsOverlay); - } - if (_chartSettingsOverlayChartId) _tvSetChartInteractionLocked(_chartSettingsOverlayChartId, false); - _chartSettingsOverlay = null; - _chartSettingsOverlayChartId = null; - _tvRefreshLegendVisibility(); -} - -function _tvHideVolumeSettings() { - _tvHideColorOpacityPopup(); - if (_volumeSettingsOverlay && _volumeSettingsOverlay.parentNode) { - _volumeSettingsOverlay.parentNode.removeChild(_volumeSettingsOverlay); - } - if (_volumeSettingsOverlayChartId) _tvSetChartInteractionLocked(_volumeSettingsOverlayChartId, false); - _volumeSettingsOverlay = null; - _volumeSettingsOverlayChartId = null; - _tvRefreshLegendVisibility(); -} - -function _tvHideComparePanel() { - if (_compareOverlay && _compareOverlay.parentNode) { - _compareOverlay.parentNode.removeChild(_compareOverlay); - } - if (_compareOverlayChartId) _tvSetChartInteractionLocked(_compareOverlayChartId, false); - _compareOverlay = null; - _compareOverlayChartId = null; - _tvRefreshLegendVisibility(); -} - -// --------------------------------------------------------------------------- -// Symbol Search Dialog -// --------------------------------------------------------------------------- -var _symbolSearchOverlay = null; -var _symbolSearchChartId = null; - -function _tvHideSymbolSearch() { - if (_symbolSearchOverlay && _symbolSearchOverlay.parentNode) { - _symbolSearchOverlay.parentNode.removeChild(_symbolSearchOverlay); - } - if (_symbolSearchChartId) _tvSetChartInteractionLocked(_symbolSearchChartId, false); - _symbolSearchOverlay = null; - _symbolSearchChartId = null; - _tvRefreshLegendVisibility(); -} - -function _tvShowSymbolSearchDialog(chartId, options) { - _tvHideSymbolSearch(); - var resolved = _tvResolveChartEntry(chartId); - if (!resolved || !resolved.entry) return; - chartId = resolved.chartId; - var entry = resolved.entry; - options = options || {}; - var ds = window.__PYWRY_DRAWINGS__[chartId] || _tvEnsureDrawingLayer(chartId); - if (!ds) return; - - var overlay = document.createElement('div'); - overlay.className = 'tv-settings-overlay'; - _symbolSearchOverlay = overlay; - _symbolSearchChartId = chartId; - _tvSetChartInteractionLocked(chartId, true); - _tvRefreshLegendVisibility(); - overlay.addEventListener('click', function(e) { - if (e.target === overlay) _tvHideSymbolSearch(); - }); - overlay.addEventListener('mousedown', function(e) { e.stopPropagation(); }); - overlay.addEventListener('wheel', function(e) { e.stopPropagation(); }); - - var panel = document.createElement('div'); - panel.className = 'tv-symbol-search-panel'; - overlay.appendChild(panel); - - // Header - var header = document.createElement('div'); - header.className = 'tv-compare-header'; - var title = document.createElement('h3'); - title.textContent = 'Symbol Search'; - header.appendChild(title); - var closeBtn = document.createElement('button'); - closeBtn.className = 'tv-settings-close'; - closeBtn.innerHTML = ''; - closeBtn.addEventListener('click', function() { _tvHideSymbolSearch(); }); - header.appendChild(closeBtn); - panel.appendChild(header); - - // Search row - var searchRow = document.createElement('div'); - searchRow.className = 'tv-compare-search-row'; - var searchIcon = document.createElement('span'); - searchIcon.className = 'tv-compare-search-icon'; - searchIcon.innerHTML = ''; - searchRow.appendChild(searchIcon); - var searchInput = document.createElement('input'); - searchInput.type = 'text'; - searchInput.className = 'tv-compare-search-input'; - searchInput.placeholder = 'Search symbol...'; - searchInput.autocomplete = 'off'; - searchInput.spellcheck = false; - searchRow.appendChild(searchInput); - panel.appendChild(searchRow); - - // Filter row — exchange and type dropdowns from datafeed config - var filterRow = document.createElement('div'); - filterRow.className = 'tv-symbol-search-filters'; - - var exchangeSelect = document.createElement('select'); - exchangeSelect.className = 'tv-symbol-search-filter-select'; - var exchangeDefault = document.createElement('option'); - exchangeDefault.value = ''; - exchangeDefault.textContent = 'All Exchanges'; - exchangeSelect.appendChild(exchangeDefault); - - var typeSelect = document.createElement('select'); - typeSelect.className = 'tv-symbol-search-filter-select'; - var typeDefault = document.createElement('option'); - typeDefault.value = ''; - typeDefault.textContent = 'All Types'; - typeSelect.appendChild(typeDefault); - - // Populate from datafeed config if available - var cfg = entry._datafeedConfig || {}; - var exchanges = cfg.exchanges || []; - for (var ei = 0; ei < exchanges.length; ei++) { - if (!exchanges[ei].value) continue; - var opt = document.createElement('option'); - opt.value = exchanges[ei].value; - opt.textContent = exchanges[ei].name || exchanges[ei].value; - exchangeSelect.appendChild(opt); - } - var symTypes = cfg.symbols_types || cfg.symbolsTypes || []; - for (var ti = 0; ti < symTypes.length; ti++) { - if (!symTypes[ti].value) continue; - var topt = document.createElement('option'); - topt.value = symTypes[ti].value; - topt.textContent = symTypes[ti].name || symTypes[ti].value; - typeSelect.appendChild(topt); - } - - filterRow.appendChild(exchangeSelect); - filterRow.appendChild(typeSelect); - panel.appendChild(filterRow); - - // Results area - var searchResults = []; - var pendingSearchRequestId = null; - var searchDebounce = null; - var maxResults = 50; - - var resultsArea = document.createElement('div'); - resultsArea.className = 'tv-symbol-search-results'; - panel.appendChild(resultsArea); - - function normalizeInfo(item) { - if (!item || typeof item !== 'object') return null; - var symbol = String(item.symbol || item.ticker || '').trim(); - if (!symbol) return null; - var ticker = String(item.ticker || '').trim().toUpperCase(); - if (!ticker) { - ticker = symbol.indexOf(':') >= 0 ? symbol.split(':').pop().trim().toUpperCase() : symbol.toUpperCase(); - } - return { - symbol: symbol, - ticker: ticker, - displaySymbol: ticker || symbol, - requestSymbol: ticker || symbol, - fullName: String(item.fullName || item.full_name || '').trim(), - description: String(item.description || '').trim(), - exchange: String(item.exchange || item.listedExchange || item.listed_exchange || '').trim(), - type: String(item.type || item.symbolType || item.symbol_type || '').trim(), - currency: String(item.currency || item.currencyCode || item.currency_code || '').trim(), - }; - } - - function renderResults() { - resultsArea.innerHTML = ''; - if (!searchResults.length) { - if (String(searchInput.value || '').trim().length > 0) { - var empty = document.createElement('div'); - empty.className = 'tv-compare-search-empty'; - empty.textContent = 'No symbols found'; - resultsArea.appendChild(empty); - } - return; - } - var list = document.createElement('div'); - list.className = 'tv-compare-results-list'; - for (var i = 0; i < searchResults.length; i++) { - (function(info) { - var row = document.createElement('div'); - row.className = 'tv-compare-result-row tv-symbol-search-result-row'; - - var identity = document.createElement('div'); - identity.className = 'tv-compare-result-identity'; - - var badge = document.createElement('div'); - badge.className = 'tv-compare-result-badge'; - badge.textContent = (info.symbol || '?').slice(0, 1); - identity.appendChild(badge); - - var copy = document.createElement('div'); - copy.className = 'tv-compare-result-copy'; - - var top = document.createElement('div'); - top.className = 'tv-compare-result-top'; - - var symbolEl = document.createElement('span'); - symbolEl.className = 'tv-compare-result-symbol'; - symbolEl.textContent = info.displaySymbol || info.symbol; - top.appendChild(symbolEl); - - // Right-side meta: exchange · type - var parts = []; - if (info.exchange) parts.push(info.exchange); - if (info.type) parts.push(info.type); - if (parts.length) { - var meta = document.createElement('span'); - meta.className = 'tv-compare-result-meta'; - meta.textContent = parts.join(' \u00b7 '); - top.appendChild(meta); - } - - copy.appendChild(top); - - // Subtitle: actual security name - var nameText = info.fullName || info.description; - if (nameText) { - var sub = document.createElement('div'); - sub.className = 'tv-compare-result-sub'; - sub.textContent = nameText; - copy.appendChild(sub); - } - - identity.appendChild(copy); - row.appendChild(identity); - - row.addEventListener('click', function() { - selectSymbol(info); - }); - - list.appendChild(row); - })(searchResults[i]); - } - resultsArea.appendChild(list); - } - - function requestSearch(query) { - query = String(query || '').trim(); - var normalized = query.toUpperCase(); - if (normalized.indexOf(':') >= 0) { - normalized = normalized.split(':').pop().trim(); - } - searchResults = []; - renderResults(); - if (!normalized || normalized.length < 1) return; - - var exch = exchangeSelect.value || ''; - var stype = typeSelect.value || ''; - - pendingSearchRequestId = _tvRequestDatafeedSearch(chartId, normalized, maxResults, function(resp) { - if (!resp || resp.requestId !== pendingSearchRequestId) return; - pendingSearchRequestId = null; - if (resp.error) { - searchResults = []; - renderResults(); - return; - } - var items = Array.isArray(resp.items) ? resp.items : []; - var parsed = []; - for (var idx = 0; idx < items.length; idx++) { - var n = normalizeInfo(items[idx]); - if (n) parsed.push(n); - } - searchResults = parsed; - renderResults(); - }, exch, stype); - } - - function selectSymbol(info) { - var symbol = info.requestSymbol || info.ticker || info.symbol; - if (!symbol || !window.pywry) return; - - // Resolve full symbol info, then emit data-request to change main series - _tvRequestDatafeedResolve(chartId, symbol, function(resp) { - var symbolInfo = null; - if (resp && resp.symbolInfo) { - symbolInfo = _tvNormalizeSymbolInfoFull(resp.symbolInfo); - } - - // -- Update ALL metadata for the new symbol -- - - // Payload title + series descriptor (for chart recreate on interval change) - if (entry.payload) { - entry.payload.title = symbol.toUpperCase(); - if (entry.payload.series && Array.isArray(entry.payload.series) && entry.payload.series[0]) { - entry.payload.series[0].symbol = symbol.toUpperCase(); - } - } - - // Resolved symbol info — used by Security Info modal, legend, etc. - if (symbolInfo) { - entry._mainSymbolInfo = symbolInfo; - if (!entry._resolvedSymbolInfo) entry._resolvedSymbolInfo = {}; - entry._resolvedSymbolInfo.main = symbolInfo; - } - - // Reset first-data-request flag for main series so full history is fetched - if (entry._dataRequestSeen) { - entry._dataRequestSeen.main = false; - } - - // Update exchange clock to new timezone - if (symbolInfo && symbolInfo.timezone) { - (function(tz) { - var clockEl = document.getElementById('tvchart-exchange-clock'); - if (clockEl) { - function updateClock() { - try { - var now = new Date(); - var timeStr = now.toLocaleString('en-US', { - timeZone: tz, - hour: '2-digit', minute: '2-digit', second: '2-digit', - hour12: false, - }); - var offsetParts = now.toLocaleString('en-US', { - timeZone: tz, timeZoneName: 'shortOffset', - }).split(' '); - var utcOffset = offsetParts[offsetParts.length - 1] || ''; - clockEl.textContent = timeStr + ' (' + utcOffset + ')'; - } catch(e) { clockEl.textContent = ''; } - } - updateClock(); - if (entry._clockInterval) clearInterval(entry._clockInterval); - entry._clockInterval = setInterval(updateClock, 1000); - } - })(symbolInfo.timezone); - } - - // Update chart time axis localization for new timezone - if (symbolInfo && symbolInfo.timezone && symbolInfo.timezone !== 'Etc/UTC' && entry.chart) { - try { - var tz = symbolInfo.timezone; - entry.chart.applyOptions({ - localization: { - timeFormatter: function(ts) { - var ms = (typeof ts === 'number' && ts < 1e12) ? ts * 1000 : ts; - return new Date(ms).toLocaleString('en-US', { - timeZone: tz, - month: 'short', day: 'numeric', - hour: '2-digit', minute: '2-digit', - hour12: false, - }); - }, - }, - timeScale: { - tickMarkFormatter: function(time, tickType, locale) { - var ms = (typeof time === 'number' && time < 1e12) ? time * 1000 : time; - var d = new Date(ms); - var opts = { timeZone: tz }; - if (tickType === 0) { opts.year = 'numeric'; return d.toLocaleString('en-US', opts); } - if (tickType === 1) { opts.month = 'short'; return d.toLocaleString('en-US', opts); } - if (tickType === 2) { opts.month = 'short'; opts.day = 'numeric'; return d.toLocaleString('en-US', opts); } - opts.hour = '2-digit'; opts.minute = '2-digit'; opts.hour12 = false; - return d.toLocaleString('en-US', opts); - }, - }, - }); - } catch (tzErr) {} - } - - // Unsubscribe old real-time stream, subscribe new - if (entry._datafeedSubscriptions && entry._datafeedSubscriptions.main && entry.datafeed) { - var oldGuid = entry._datafeedSubscriptions.main; - entry.datafeed.unsubscribeBars(oldGuid); - var activeInterval = _tvCurrentInterval(chartId); - var newGuid = chartId + '_main_' + activeInterval; - entry._datafeedSubscriptions.main = newGuid; - var mainSeries = entry.seriesMap && entry.seriesMap.main; - entry.datafeed.subscribeBars(symbolInfo || info, activeInterval, function(bar) { - var normalized = _tvNormalizeBarsForSeriesType([bar], 'Candlestick'); - if (normalized.length > 0 && mainSeries) { - mainSeries.update(normalized[0]); - } - if (bar.volume != null && entry.volumeMap && entry.volumeMap.main) { - entry.volumeMap.main.update({ time: bar.time, value: bar.volume }); - } - }, newGuid, function() {}); - } - - var activeInterval = _tvCurrentInterval(chartId); - var periodParams = _tvBuildPeriodParams(entry, 'main'); - periodParams.firstDataRequest = true; - - window.pywry.emit('tvchart:data-request', { - chartId: chartId, - symbol: symbol.toUpperCase(), - symbolInfo: symbolInfo || info, - seriesId: 'main', - interval: activeInterval, - resolution: activeInterval, - periodParams: periodParams, - }); - - // Update the legend's cached base title - var legendBox = _tvScopedById(chartId, 'tvchart-legend-box'); - if (legendBox) { - legendBox.dataset.baseTitle = symbol.toUpperCase(); - } - _tvRefreshLegendTitle(chartId); - _tvEmitLegendRefresh(chartId); - _tvRenderHoverLegend(chartId, null); - _tvHideSymbolSearch(); - }); - } - - // Wire up events - searchInput.addEventListener('input', function() { - if (searchDebounce) clearTimeout(searchDebounce); - searchDebounce = setTimeout(function() { - requestSearch(searchInput.value); - }, 180); - }); - - exchangeSelect.addEventListener('change', function() { - if (String(searchInput.value || '').trim().length > 0) requestSearch(searchInput.value); - }); - typeSelect.addEventListener('change', function() { - if (String(searchInput.value || '').trim().length > 0) requestSearch(searchInput.value); - }); - - searchInput.addEventListener('keydown', function(e) { - e.stopPropagation(); - if (e.key === 'Escape') { - _tvHideSymbolSearch(); - return; - } - if (e.key === 'Enter' && searchResults.length > 0) { - selectSymbol(searchResults[0]); - } - }); - - ds.uiLayer.appendChild(overlay); - searchInput.focus(); - - // Programmatic drive: pre-fill the search query and optionally - // auto-select the first result (or a specific symbol match) when - // the datafeed responds. Driven by `tvchart:symbol-search` callers - // that pass `{query, autoSelect, symbolType, exchange}` (e.g. agent - // tools). ``symbolType`` / ``exchange`` pre-select the filter - // dropdowns so the datafeed search is narrowed before it runs — - // e.g. ``{query: "SPY", symbolType: "etf"}`` skips over SPYM. - if (options.query) { - var preQuery = String(options.query).trim(); - if (preQuery) { - searchInput.value = preQuery; - var autoSelect = options.autoSelect !== false; - // Pre-select filter dropdowns (case-insensitive match against - // option values). Silently ignore unknown filter values so a - // caller's ``symbolType: "etf"`` request doesn't break the - // search when the datafeed exposes ``ETF`` instead. - if (options.symbolType) { - var wantType = String(options.symbolType).toLowerCase(); - for (var tsi = 0; tsi < typeSelect.options.length; tsi++) { - if (String(typeSelect.options[tsi].value).toLowerCase() === wantType) { - typeSelect.selectedIndex = tsi; - break; - } - } - } - if (options.exchange) { - var wantExch = String(options.exchange).toLowerCase(); - for (var esi = 0; esi < exchangeSelect.options.length; esi++) { - if (String(exchangeSelect.options[esi].value).toLowerCase() === wantExch) { - exchangeSelect.selectedIndex = esi; - break; - } - } - } - // Optimistically advertise the requested ticker on the chart's - // payload BEFORE the datafeed search round-trip completes. Other - // events that fire in the meantime (e.g. a `tvchart:interval-change` - // dispatched by the same agent turn) read this field to decide - // which symbol to refetch — without the optimistic update they - // see the previous symbol and clobber the pending change with a - // refetch of the old ticker. ``selectSymbol`` re-confirms the - // value once the resolve responds; if the search fails to find a - // match the optimistic value is harmless because no data-request - // ever fires. - var optimisticTicker = preQuery.toUpperCase(); - if (optimisticTicker.indexOf(':') >= 0) { - optimisticTicker = optimisticTicker.split(':').pop().trim(); - } - if (entry && entry.payload) { - entry.payload.title = optimisticTicker; - if (entry.payload.series && Array.isArray(entry.payload.series) && entry.payload.series[0]) { - entry.payload.series[0].symbol = optimisticTicker; - } - } - - var prevRender = renderResults; - // Wrap renderResults to auto-select on first non-empty results. - var selected = false; - // Pull the bare ticker from a symbol record — datafeed results - // may carry a fully-qualified ``EXCHANGE:TICKER`` in ``ticker`` - // and the bare ticker in ``symbol`` / ``requestSymbol``. Exact - // match has to beat prefix match (``SPY`` → ``SPY``, not - // ``SPYM``) even when the datafeed returns them alphabetically. - function _bareTickerSearch(rec) { - if (!rec) return ''; - var candidates = [rec.symbol, rec.requestSymbol, rec.ticker]; - for (var ci = 0; ci < candidates.length; ci++) { - var raw = String(candidates[ci] || '').toUpperCase(); - if (!raw) continue; - if (raw.indexOf(':') >= 0) raw = raw.split(':').pop().trim(); - if (raw) return raw; - } - return ''; - } - renderResults = function() { - prevRender(); - if (selected || !autoSelect || !searchResults.length) return; - var match = null; - for (var mi = 0; mi < searchResults.length; mi++) { - if (_bareTickerSearch(searchResults[mi]) === optimisticTicker) { - match = searchResults[mi]; - break; - } - } - if (!match) { - for (var mj = 0; mj < searchResults.length; mj++) { - if (_bareTickerSearch(searchResults[mj]).indexOf(optimisticTicker) === 0) { - match = searchResults[mj]; - break; - } - } - } - if (!match) match = searchResults[0]; - selected = true; - // Re-sync the optimistic value with the actual selected match - // — the auto-pick fallback may have chosen a different ticker - // than the requested query. - var resolvedTicker = (match.ticker || match.requestSymbol || match.symbol || '').toString().toUpperCase(); - if (resolvedTicker && entry && entry.payload) { - entry.payload.title = resolvedTicker; - if (entry.payload.series && Array.isArray(entry.payload.series) && entry.payload.series[0]) { - entry.payload.series[0].symbol = resolvedTicker; - } - } - selectSymbol(match); - }; - requestSearch(preQuery); - } - } -} - -function _tvHideSeriesSettings() { - _tvHideColorOpacityPopup(); - if (_seriesSettingsOverlay && _seriesSettingsOverlay.parentNode) { - _seriesSettingsOverlay.parentNode.removeChild(_seriesSettingsOverlay); - } - if (_seriesSettingsOverlayChartId) _tvSetChartInteractionLocked(_seriesSettingsOverlayChartId, false); - _seriesSettingsOverlay = null; - _seriesSettingsOverlayChartId = null; - _seriesSettingsOverlaySeriesId = null; - _tvRefreshLegendVisibility(); -} - -function _tvShowSeriesSettings(chartId, seriesId) { - _tvHideSeriesSettings(); - var resolved = _tvResolveChartEntry(chartId); - if (!resolved || !resolved.entry) return; - chartId = resolved.chartId; - var entry = resolved.entry; - var seriesApi = entry.seriesMap ? entry.seriesMap[seriesId] : null; - if (!seriesApi) return; - - var currentType = _tvGuessSeriesType(seriesApi); - var currentOpts = {}; - try { currentOpts = seriesApi.options() || {}; } catch (e) {} - var persistedVisibility = (entry._seriesVisibilityIntervals && entry._seriesVisibilityIntervals[seriesId]) - ? entry._seriesVisibilityIntervals[seriesId] - : null; - var defaultVisibilityIntervals = { - seconds: { enabled: true, min: 1, max: 59 }, - minutes: { enabled: true, min: 1, max: 59 }, - hours: { enabled: true, min: 1, max: 24 }, - days: { enabled: true, min: 1, max: 366 }, - weeks: { enabled: true, min: 1, max: 52 }, - months: { enabled: true, min: 1, max: 12 }, - }; - var persistedStylePrefs = (entry._seriesStylePrefs && entry._seriesStylePrefs[seriesId]) - ? entry._seriesStylePrefs[seriesId] - : null; - var initialStyle = (persistedStylePrefs && persistedStylePrefs.style) - ? persistedStylePrefs.style - : _ssTypeToStyleName(currentType || 'Line'); - var auxStyle = (entry._seriesStyleAux && entry._seriesStyleAux[seriesId]) ? entry._seriesStyleAux[seriesId] : {}; - - // Theme-aware defaults — all pulled from CSS vars so swapping themes - // (or overriding them via CSS) recolors the settings-dialog "Reset" - // state. Fallback literals match the dark-theme palette for the case - // where _cssVar resolves to empty (e.g. running outside the chart's - // themed container). - var themeUp = _cssVar('--pywry-tvchart-up') || '#26a69a'; - var themeDown = _cssVar('--pywry-tvchart-down') || '#ef5350'; - var themeBorderUp = _cssVar('--pywry-tvchart-border-up') || themeUp; - var themeBorderDown = _cssVar('--pywry-tvchart-border-down') || themeDown; - var themeWickUp = _cssVar('--pywry-tvchart-wick-up') || themeUp; - var themeWickDown = _cssVar('--pywry-tvchart-wick-down') || themeDown; - var themeLineColor = _cssVar('--pywry-tvchart-line-default') || '#4c87ff'; - var themeAreaTop = _cssVar('--pywry-tvchart-area-top-default') || themeLineColor; - var themeAreaBottom = _cssVar('--pywry-tvchart-area-bottom-default') || '#10223f'; - var themeBaselineTopFill1 = _cssVar('--pywry-tvchart-baseline-top-fill1') || themeUp; - var themeBaselineTopFill2 = _cssVar('--pywry-tvchart-baseline-top-fill2') || themeUp; - var themeBaselineBottomFill1 = _cssVar('--pywry-tvchart-baseline-bottom-fill1') || themeDown; - var themeBaselineBottomFill2 = _cssVar('--pywry-tvchart-baseline-bottom-fill2') || themeDown; - - var initialState = { - style: initialStyle, - priceSource: 'close', - color: _tvColorToHex( - currentOpts.color || currentOpts.lineColor || (entry._legendSeriesColors && entry._legendSeriesColors[seriesId]) || themeLineColor, - themeLineColor - ), - lineWidth: _tvClamp(_tvToNumber(currentOpts.lineWidth || currentOpts.width, 2), 1, 4), - markersVisible: currentOpts.pointMarkersVisible === true, - areaTopColor: _tvColorToHex(currentOpts.topColor || themeAreaTop, themeAreaTop), - areaBottomColor: _tvColorToHex(currentOpts.bottomColor || themeAreaBottom, themeAreaBottom), - baselineTopLineColor: _tvColorToHex(currentOpts.topLineColor || themeUp, themeUp), - baselineBottomLineColor: _tvColorToHex(currentOpts.bottomLineColor || themeDown, themeDown), - baselineTopFillColor1: _tvColorToHex(currentOpts.topFillColor1 || themeBaselineTopFill1, themeUp), - baselineTopFillColor2: _tvColorToHex(currentOpts.topFillColor2 || themeBaselineTopFill2, themeUp), - baselineBottomFillColor1: _tvColorToHex(currentOpts.bottomFillColor1 || themeBaselineBottomFill1, themeDown), - baselineBottomFillColor2: _tvColorToHex(currentOpts.bottomFillColor2 || themeBaselineBottomFill2, themeDown), - baselineBaseLevel: _tvToNumber((currentOpts.baseValue && currentOpts.baseValue._level), 50), - columnsUpColor: _tvColorToHex(currentOpts.upColor || currentOpts.color || themeUp, themeUp), - columnsDownColor: _tvColorToHex(currentOpts.downColor || currentOpts.color || themeDown, themeDown), - barsUpColor: _tvColorToHex(currentOpts.upColor || themeUp, themeUp), - barsDownColor: _tvColorToHex(currentOpts.downColor || themeDown, themeDown), - barsOpenVisible: currentOpts.openVisible !== false, - priceLineVisible: currentOpts.priceLineVisible !== false, - overrideMinTick: 'Default', - visible: currentOpts.visible !== false, - bodyVisible: true, - bordersVisible: true, - wickVisible: true, - bodyUpColor: _tvColorToHex(currentOpts.upColor || currentOpts.color || themeUp, themeUp), - bodyDownColor: _tvColorToHex(currentOpts.downColor || themeDown, themeDown), - borderUpColor: _tvColorToHex(currentOpts.borderUpColor || currentOpts.upColor || themeBorderUp, themeBorderUp), - borderDownColor: _tvColorToHex(currentOpts.borderDownColor || currentOpts.downColor || themeBorderDown, themeBorderDown), - wickUpColor: _tvColorToHex(currentOpts.wickUpColor || currentOpts.upColor || themeWickUp, themeWickUp), - wickDownColor: _tvColorToHex(currentOpts.wickDownColor || currentOpts.downColor || themeWickDown, themeWickDown), - hlcHighVisible: auxStyle.highVisible !== false, - hlcLowVisible: auxStyle.lowVisible !== false, - hlcCloseVisible: auxStyle.closeVisible !== false, - hlcHighColor: _tvColorToHex(auxStyle.highColor || _cssVar('--pywry-tvchart-hlcarea-high') || '#089981', '#089981'), - hlcLowColor: _tvColorToHex(auxStyle.lowColor || _cssVar('--pywry-tvchart-hlcarea-low') || '#f23645', '#f23645'), - hlcCloseColor: _tvColorToHex(auxStyle.closeColor || (currentOpts.lineColor || currentOpts.color || _cssVar('--pywry-tvchart-hlcarea-close') || '#2962ff'), '#2962ff'), - hlcFillTopColor: auxStyle.fillTopColor || _cssVar('--pywry-tvchart-hlcarea-fill-up') || 'rgba(8, 153, 129, 0.28)', - hlcFillBottomColor: auxStyle.fillBottomColor || _cssVar('--pywry-tvchart-hlcarea-fill-down') || 'rgba(242, 54, 69, 0.28)', - visibilityIntervals: _tvMerge(defaultVisibilityIntervals, persistedVisibility || {}), - }; - if (persistedStylePrefs) { - var persistedKeys = Object.keys(initialState); - for (var pk = 0; pk < persistedKeys.length; pk++) { - var pkey = persistedKeys[pk]; - if (persistedStylePrefs[pkey] !== undefined) initialState[pkey] = persistedStylePrefs[pkey]; - } - } - var draft = _tvMerge({}, initialState); - var label = _tvLegendSeriesLabel(entry, seriesId); - var activeTab = 'style'; - - var overlay = document.createElement('div'); - overlay.className = 'tv-settings-overlay'; - _seriesSettingsOverlay = overlay; - _seriesSettingsOverlayChartId = chartId; - _seriesSettingsOverlaySeriesId = seriesId; - _tvSetChartInteractionLocked(chartId, true); - _tvRefreshLegendVisibility(); - overlay.addEventListener('click', function(e) { - if (e.target === overlay) _tvHideSeriesSettings(); - }); - overlay.addEventListener('mousedown', function(e) { e.stopPropagation(); }); - overlay.addEventListener('wheel', function(e) { e.stopPropagation(); }); - - var panel = document.createElement('div'); - panel.className = 'tv-settings-panel'; - panel.style.cssText = 'width:620px;max-width:calc(100% - 32px);max-height:72vh;display:flex;flex-direction:column;'; - overlay.appendChild(panel); - - var header = document.createElement('div'); - header.className = 'tv-settings-header'; - header.style.cssText = 'position:relative;flex-direction:column;align-items:stretch;padding-bottom:0;'; - - var hdrRow = document.createElement('div'); - hdrRow.style.cssText = 'display:flex;align-items:center;gap:8px;'; - var titleEl = document.createElement('h3'); - titleEl.textContent = label || seriesId; - hdrRow.appendChild(titleEl); - var closeBtn = document.createElement('button'); - closeBtn.className = 'tv-settings-close'; - closeBtn.innerHTML = ''; - closeBtn.addEventListener('click', function() { _tvHideSeriesSettings(); }); - hdrRow.appendChild(closeBtn); - header.appendChild(hdrRow); - - var tabBar = document.createElement('div'); - tabBar.className = 'tv-ind-settings-tabs'; - var styleTab = document.createElement('div'); - styleTab.className = 'tv-ind-settings-tab active'; - styleTab.textContent = 'Style'; - var visTab = document.createElement('div'); - visTab.className = 'tv-ind-settings-tab'; - visTab.textContent = 'Visibility'; - tabBar.appendChild(styleTab); - tabBar.appendChild(visTab); - header.appendChild(tabBar); - panel.appendChild(header); - - var body = document.createElement('div'); - body.className = 'tv-settings-body'; - body.style.cssText = 'flex:1;overflow-y:auto;min-height:80px;'; - panel.appendChild(body); - - function _ssRow(labelText) { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - var lbl = document.createElement('label'); - lbl.textContent = labelText; - row.appendChild(lbl); - var ctrl = document.createElement('div'); - ctrl.className = 'ts-controls'; - row.appendChild(ctrl); - return { row: row, ctrl: ctrl }; - } - - function _ssSelect(opts, value, onChange) { - var sel = document.createElement('select'); - sel.className = 'ts-select'; - for (var i = 0; i < opts.length; i++) { - var opt = document.createElement('option'); - opt.value = opts[i].v; - opt.textContent = opts[i].l; - if (String(opts[i].v) === String(value)) opt.selected = true; - sel.appendChild(opt); - } - sel.addEventListener('change', function() { onChange(sel.value); }); - return sel; - } - - function _ssCheckbox(value, onChange) { - var cb = document.createElement('input'); - cb.type = 'checkbox'; - cb.className = 'ts-checkbox'; - cb.checked = !!value; - cb.addEventListener('change', function() { onChange(cb.checked); }); - return cb; - } - - function _ssColorLineControl(value, widthValue, onColor, onWidth) { - var wrap = document.createElement('div'); - wrap.style.cssText = 'display:flex;align-items:center;gap:8px;'; - var swatch = document.createElement('div'); - swatch.className = 'ts-swatch'; - swatch.dataset.baseColor = _tvColorToHex(value || '#4c87ff', '#4c87ff'); - swatch.dataset.opacity = String(_tvColorOpacityPercent(value, 100)); - swatch.style.background = value; - swatch.addEventListener('click', function(e) { - e.preventDefault(); - e.stopPropagation(); - _tvShowColorOpacityPopup( - swatch, - swatch.dataset.baseColor || value, - _tvToNumber(swatch.dataset.opacity, 100), - overlay, - function(newColor, newOpacity) { - swatch.dataset.baseColor = newColor; - swatch.dataset.opacity = String(newOpacity); - swatch.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); - linePreview.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); - onColor(_tvColorWithOpacity(newColor, newOpacity, newColor)); - } - ); - }); - var linePreview = document.createElement('div'); - linePreview.style.cssText = 'width:44px;height:2px;background:' + value + ';border-radius:2px;'; - function syncWidth(w) { linePreview.style.height = String(_tvClamp(_tvToNumber(w, 2), 1, 4)) + 'px'; } - syncWidth(widthValue); - onWidth(syncWidth); - wrap.appendChild(swatch); - wrap.appendChild(linePreview); - return wrap; - } - - function _ssDualColorControl(upValue, downValue, onUp, onDown) { - var wrap = document.createElement('div'); - wrap.style.cssText = 'display:flex;align-items:center;gap:8px;'; - function makeSwatch(initial, onChange) { - var sw = document.createElement('div'); - sw.className = 'ts-swatch'; - sw.dataset.baseColor = _tvColorToHex(initial || '#4c87ff', '#4c87ff'); - sw.dataset.opacity = String(_tvColorOpacityPercent(initial, 100)); - sw.style.background = initial; - sw.addEventListener('click', function(e) { - e.preventDefault(); - e.stopPropagation(); - _tvShowColorOpacityPopup( - sw, - sw.dataset.baseColor || initial, - _tvToNumber(sw.dataset.opacity, 100), - overlay, - function(newColor, newOpacity) { - sw.dataset.baseColor = newColor; - sw.dataset.opacity = String(newOpacity); - sw.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); - onChange(_tvColorWithOpacity(newColor, newOpacity, newColor)); - } - ); - }); - wrap.appendChild(sw); - } - makeSwatch(upValue, onUp); - makeSwatch(downValue, onDown); - return wrap; - } - - function _ssColorControl(value, onColor) { - var wrap = document.createElement('div'); - wrap.style.cssText = 'display:flex;align-items:center;gap:8px;'; - var swatch = document.createElement('div'); - swatch.className = 'ts-swatch'; - swatch.dataset.baseColor = _tvColorToHex(value || '#4c87ff', '#4c87ff'); - swatch.dataset.opacity = String(_tvColorOpacityPercent(value, 100)); - swatch.style.background = value; - swatch.addEventListener('click', function(e) { - e.preventDefault(); - e.stopPropagation(); - _tvShowColorOpacityPopup( - swatch, - swatch.dataset.baseColor || value, - _tvToNumber(swatch.dataset.opacity, 100), - overlay, - function(newColor, newOpacity) { - swatch.dataset.baseColor = newColor; - swatch.dataset.opacity = String(newOpacity); - swatch.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); - onColor(_tvColorWithOpacity(newColor, newOpacity, newColor)); - } - ); - }); - wrap.appendChild(swatch); - return wrap; - } - - function _ssIsCandleStyle(styleName) { - var s = String(styleName || ''); - return s === 'Candles' || s === 'Hollow candles'; - } - - function _ssIsHlcAreaStyle(styleName) { - return String(styleName || '') === 'HLC area'; - } - - function _ssIsLineLikeStyle(styleName) { - var s = String(styleName || ''); - return s === 'Line' || s === 'Line with markers' || s === 'Step line'; - } - - function _ssPriceFormatFromTick(value) { - var v = String(value || 'Default'); - if (v === 'Default') return null; - if (v === 'Integer') { - return { type: 'price', precision: 0, minMove: 1 }; - } - var decMatch = v.match(/^(\d+)\s+decimals?$/i); - if (decMatch) { - var precision = _tvClamp(parseInt(decMatch[1], 10) || 0, 0, 15); - return { type: 'price', precision: precision, minMove: Math.pow(10, -precision) }; - } - if (v.indexOf('1/') === 0) { - var denom = parseInt(v.slice(2), 10); - if (isFinite(denom) && denom > 0) { - var minMove = 1 / denom; - var text = String(minMove); - var precisionFromText = (text.indexOf('.') >= 0) ? (text.split('.')[1] || '').length : 0; - var precision = _tvClamp(precisionFromText, 1, 8); - return { type: 'price', precision: precision, minMove: minMove }; - } - } - return null; - } - - function _ssTypeToStyleName(lwcType) { - var t = String(lwcType || 'Line'); - if (t === 'Candlestick') return 'Candles'; - if (t === 'Bar') return 'Bars'; - if (t === 'Histogram') return 'Columns'; - return t; // Line, Area, Baseline map 1:1 - } - - function _ssStyleConfig(styleName) { - var s = String(styleName || 'Line'); - if (s === 'Bars') return { seriesType: 'Bar', source: 'close', optionPatch: {} }; - if (s === 'Candles') return { seriesType: 'Candlestick', source: 'close', optionPatch: {} }; - if (s === 'Hollow candles') { - return { - seriesType: 'Candlestick', - source: 'close', - optionPatch: { - upColor: _cssVar('--pywry-tvchart-hollow-up-body') || 'rgba(0, 0, 0, 0)', - priceLineColor: _cssVar('--pywry-tvchart-price-line') || _cssVar('--pywry-tvchart-up') || '#26a69a', - }, - }; - } - if (s === 'Columns') return { seriesType: 'Histogram', source: 'close', optionPatch: {} }; - if (s === 'Line') return { seriesType: 'Line', source: 'close', optionPatch: {} }; - if (s === 'Line with markers') { - return { - seriesType: 'Line', - source: 'close', - optionPatch: { - pointMarkersVisible: true, - }, - }; - } - if (s === 'Step line') { - return { - seriesType: 'Line', - source: 'close', - optionPatch: { - lineType: 1, - }, - }; - } - if (s === 'Area') return { seriesType: 'Area', source: 'close', optionPatch: {} }; - if (s === 'HLC area') return { seriesType: 'Area', source: 'close', optionPatch: {}, composite: 'hlcArea' }; - if (s === 'Baseline') return { seriesType: 'Baseline', source: 'close', optionPatch: {} }; - if (s === 'HLC bars') return { seriesType: 'Bar', source: 'hlc3', optionPatch: {} }; - if (s === 'High-low') return { seriesType: 'Bar', source: 'close', optionPatch: {} }; - return { seriesType: 'Line', source: 'close', optionPatch: {} }; - } - - function _ssToNumber(v, fallback) { - var n = Number(v); - return isFinite(n) ? n : fallback; - } - - function _ssSourceValue(row, source) { - var r = row || {}; - var o = _ssToNumber(r.open, _ssToNumber(r.value, null)); - var h = _ssToNumber(r.high, o); - var l = _ssToNumber(r.low, o); - var c = _ssToNumber(r.close, _ssToNumber(r.value, o)); - if (source === 'open') return o; - if (source === 'high') return h; - if (source === 'low') return l; - if (source === 'hl2') return (h + l) / 2; - if (source === 'hlc3') return (h + l + c) / 3; - if (source === 'ohlc4') return (o + h + l + c) / 4; - return c; - } - - function _ssBuildBarsForStyle(rawBars, styleName, seriesType, source) { - var src = Array.isArray(rawBars) ? rawBars : []; - if (!src.length) return []; - - var out = []; - var prevClose = null; - for (var i = 0; i < src.length; i++) { - var row = src[i] || {}; - if (row.time == null) continue; - - if (seriesType === 'Line' || seriesType === 'Area' || seriesType === 'Baseline' || seriesType === 'Histogram') { - out.push({ - time: row.time, - value: _ssSourceValue(row, source), - }); - continue; - } - - var base = _ssSourceValue(row, source); - var open = _ssToNumber(row.open, _ssToNumber(row.value, base)); - var high = _ssToNumber(row.high, Math.max(open, base)); - var low = _ssToNumber(row.low, Math.min(open, base)); - var close = _ssToNumber(row.close, _ssToNumber(row.value, base)); - - if (styleName === 'HLC bars') { - var hlc = _ssSourceValue(row, 'hlc3'); - var o = (prevClose == null) ? hlc : prevClose; - var c = hlc; - open = o; - close = c; - high = Math.max(o, c); - low = Math.min(o, c); - prevClose = c; - } else if (styleName === 'High-low') { - var hh = _ssToNumber(row.high, base); - var ll = _ssToNumber(row.low, base); - open = ll; - close = hh; - high = hh; - low = ll; - prevClose = close; - } else { - prevClose = close; - } - - out.push({ - time: row.time, - open: open, - high: high, - low: low, - close: close, - }); - } - return out; - } - - function _ssLooksLikeOhlcBars(rows) { - if (!Array.isArray(rows) || !rows.length) return false; - for (var i = 0; i < rows.length; i++) { - var r = rows[i] || {}; - if (r.open !== undefined && r.high !== undefined && r.low !== undefined && r.close !== undefined) { - return true; - } - } - return false; - } - - function renderBody() { - body.innerHTML = ''; - if (activeTab === 'style') { - var styleRow = _ssRow('Style'); - styleRow.ctrl.appendChild(_ssSelect([ - { v: 'Bars', l: 'Bars' }, - { v: 'Candles', l: 'Candles' }, - { v: 'Hollow candles', l: 'Hollow candles' }, - { v: 'Columns', l: 'Columns' }, - { v: 'Line', l: 'Line' }, - { v: 'Line with markers', l: 'Line with markers' }, - { v: 'Step line', l: 'Step line' }, - { v: 'Area', l: 'Area' }, - { v: 'HLC area', l: 'HLC area' }, - { v: 'Baseline', l: 'Baseline' }, - { v: 'HLC bars', l: 'HLC bars' }, - { v: 'High-low', l: 'High-low' }, - ], draft.style, function(v) { - draft.style = v; - renderBody(); - })); - body.appendChild(styleRow.row); - - var selectedStyle = String(draft.style || 'Line'); - if (_ssIsCandleStyle(selectedStyle)) { - var bodyRow = _ssRow('Body'); - var bodyWrap = document.createElement('div'); - bodyWrap.style.cssText = 'display:flex;align-items:center;gap:10px;'; - bodyWrap.appendChild(_ssCheckbox(draft.bodyVisible !== false, function(v) { draft.bodyVisible = v; })); - bodyWrap.appendChild(_ssDualColorControl( - draft.bodyUpColor, - draft.bodyDownColor, - function(v) { draft.bodyUpColor = v; }, - function(v) { draft.bodyDownColor = v; } - )); - bodyRow.ctrl.appendChild(bodyWrap); - body.appendChild(bodyRow.row); - - var borderRow = _ssRow('Borders'); - var borderWrap = document.createElement('div'); - borderWrap.style.cssText = 'display:flex;align-items:center;gap:10px;'; - borderWrap.appendChild(_ssCheckbox(draft.bordersVisible !== false, function(v) { draft.bordersVisible = v; })); - borderWrap.appendChild(_ssDualColorControl( - draft.borderUpColor, - draft.borderDownColor, - function(v) { draft.borderUpColor = v; }, - function(v) { draft.borderDownColor = v; } - )); - borderRow.ctrl.appendChild(borderWrap); - body.appendChild(borderRow.row); - - var wickRow = _ssRow('Wick'); - var wickWrap = document.createElement('div'); - wickWrap.style.cssText = 'display:flex;align-items:center;gap:10px;'; - wickWrap.appendChild(_ssCheckbox(draft.wickVisible !== false, function(v) { draft.wickVisible = v; })); - wickWrap.appendChild(_ssDualColorControl( - draft.wickUpColor, - draft.wickDownColor, - function(v) { draft.wickUpColor = v; }, - function(v) { draft.wickDownColor = v; } - )); - wickRow.ctrl.appendChild(wickWrap); - body.appendChild(wickRow.row); - } else if (_ssIsHlcAreaStyle(selectedStyle)) { - var highRow = _ssRow('High line'); - var highWrap = document.createElement('div'); - highWrap.style.cssText = 'display:flex;align-items:center;gap:10px;'; - highWrap.appendChild(_ssCheckbox(draft.hlcHighVisible !== false, function(v) { draft.hlcHighVisible = v; })); - highWrap.appendChild(_ssColorLineControl(draft.hlcHighColor, draft.lineWidth, function(v) { draft.hlcHighColor = v; }, function() {})); - highRow.ctrl.appendChild(highWrap); - body.appendChild(highRow.row); - - var lowRow = _ssRow('Low line'); - var lowWrap = document.createElement('div'); - lowWrap.style.cssText = 'display:flex;align-items:center;gap:10px;'; - lowWrap.appendChild(_ssCheckbox(draft.hlcLowVisible !== false, function(v) { draft.hlcLowVisible = v; })); - lowWrap.appendChild(_ssColorLineControl(draft.hlcLowColor, draft.lineWidth, function(v) { draft.hlcLowColor = v; }, function() {})); - lowRow.ctrl.appendChild(lowWrap); - body.appendChild(lowRow.row); - - var closeLineRow = _ssRow('Close line'); - closeLineRow.ctrl.appendChild(_ssColorLineControl(draft.hlcCloseColor, draft.lineWidth, function(v) { draft.hlcCloseColor = v; }, function() {})); - body.appendChild(closeLineRow.row); - - var fillRow = _ssRow('Fill'); - fillRow.ctrl.appendChild(_ssDualColorControl( - draft.hlcFillTopColor, - draft.hlcFillBottomColor, - function(v) { draft.hlcFillTopColor = v; }, - function(v) { draft.hlcFillBottomColor = v; } - )); - body.appendChild(fillRow.row); - } else if (selectedStyle === 'Area') { - var areaSourceRow = _ssRow('Price source'); - areaSourceRow.ctrl.appendChild(_ssSelect([ - { v: 'open', l: 'Open' }, - { v: 'high', l: 'High' }, - { v: 'low', l: 'Low' }, - { v: 'close', l: 'Close' }, - { v: 'hl2', l: '(H + L)/2' }, - { v: 'hlc3', l: '(H + L + C)/3' }, - { v: 'ohlc4', l: '(O + H + L + C)/4' }, - ], draft.priceSource, function(v) { draft.priceSource = v; })); - body.appendChild(areaSourceRow.row); - - var areaLineRow = _ssRow('Line'); - var areaWidthSync = function() {}; - areaLineRow.ctrl.appendChild(_ssColorLineControl( - draft.color, - draft.lineWidth, - function(v) { draft.color = v; }, - function(sync) { areaWidthSync = sync; } - )); - body.appendChild(areaLineRow.row); - - var areaWidthRow = _ssRow('Line width'); - areaWidthRow.ctrl.appendChild(_ssSelect([ - { v: 1, l: '1px' }, - { v: 2, l: '2px' }, - { v: 3, l: '3px' }, - { v: 4, l: '4px' }, - ], draft.lineWidth, function(v) { - draft.lineWidth = _tvClamp(_tvToNumber(v, 2), 1, 4); - areaWidthSync(draft.lineWidth); - })); - body.appendChild(areaWidthRow.row); - - var areaFillRow = _ssRow('Fill'); - areaFillRow.ctrl.appendChild(_ssDualColorControl( - draft.areaTopColor, - draft.areaBottomColor, - function(v) { draft.areaTopColor = v; }, - function(v) { draft.areaBottomColor = v; } - )); - body.appendChild(areaFillRow.row); - } else if (selectedStyle === 'Baseline') { - var baseSourceRow = _ssRow('Price source'); - baseSourceRow.ctrl.appendChild(_ssSelect([ - { v: 'open', l: 'Open' }, - { v: 'high', l: 'High' }, - { v: 'low', l: 'Low' }, - { v: 'close', l: 'Close' }, - { v: 'hl2', l: '(H + L)/2' }, - { v: 'hlc3', l: '(H + L + C)/3' }, - { v: 'ohlc4', l: '(O + H + L + C)/4' }, - ], draft.priceSource, function(v) { draft.priceSource = v; })); - body.appendChild(baseSourceRow.row); - - var topLineRow = _ssRow('Top line'); - topLineRow.ctrl.appendChild(_ssColorControl(draft.baselineTopLineColor, function(v) { draft.baselineTopLineColor = v; })); - body.appendChild(topLineRow.row); - - var bottomLineRow = _ssRow('Bottom line'); - bottomLineRow.ctrl.appendChild(_ssColorControl(draft.baselineBottomLineColor, function(v) { draft.baselineBottomLineColor = v; })); - body.appendChild(bottomLineRow.row); - - var topFillRow = _ssRow('Top fill'); - topFillRow.ctrl.appendChild(_ssDualColorControl( - draft.baselineTopFillColor1, - draft.baselineTopFillColor2, - function(v) { draft.baselineTopFillColor1 = v; }, - function(v) { draft.baselineTopFillColor2 = v; } - )); - body.appendChild(topFillRow.row); - - var bottomFillRow = _ssRow('Bottom fill'); - bottomFillRow.ctrl.appendChild(_ssDualColorControl( - draft.baselineBottomFillColor1, - draft.baselineBottomFillColor2, - function(v) { draft.baselineBottomFillColor1 = v; }, - function(v) { draft.baselineBottomFillColor2 = v; } - )); - body.appendChild(bottomFillRow.row); - - var baseValueRow = _ssRow('Base level'); - var baseLevelWrap = document.createElement('span'); - baseLevelWrap.style.display = 'inline-flex'; - baseLevelWrap.style.alignItems = 'center'; - baseLevelWrap.style.gap = '4px'; - var baseValueInput = document.createElement('input'); - baseValueInput.type = 'number'; - baseValueInput.className = 'ts-input'; - baseValueInput.style.width = '80px'; - baseValueInput.min = '0'; - baseValueInput.max = '100'; - baseValueInput.value = String(_tvToNumber(draft.baselineBaseLevel, 50)); - baseValueInput.addEventListener('input', function() { - draft.baselineBaseLevel = _tvClamp(_tvToNumber(baseValueInput.value, 50), 0, 100); - }); - var pctLabel = document.createElement('span'); - pctLabel.textContent = '%'; - pctLabel.style.opacity = '0.6'; - baseLevelWrap.appendChild(baseValueInput); - baseLevelWrap.appendChild(pctLabel); - baseValueRow.ctrl.appendChild(baseLevelWrap); - body.appendChild(baseValueRow.row); - } else if (selectedStyle === 'Columns') { - var columnsSourceRow = _ssRow('Price source'); - columnsSourceRow.ctrl.appendChild(_ssSelect([ - { v: 'open', l: 'Open' }, - { v: 'high', l: 'High' }, - { v: 'low', l: 'Low' }, - { v: 'close', l: 'Close' }, - { v: 'hl2', l: '(H + L)/2' }, - { v: 'hlc3', l: '(H + L + C)/3' }, - { v: 'ohlc4', l: '(O + H + L + C)/4' }, - ], draft.priceSource, function(v) { draft.priceSource = v; })); - body.appendChild(columnsSourceRow.row); - - var columnsColorRow = _ssRow('Columns'); - columnsColorRow.ctrl.appendChild(_ssDualColorControl( - draft.columnsUpColor, - draft.columnsDownColor, - function(v) { draft.columnsUpColor = v; }, - function(v) { draft.columnsDownColor = v; } - )); - body.appendChild(columnsColorRow.row); - } else if (selectedStyle === 'Bars' || selectedStyle === 'HLC bars' || selectedStyle === 'High-low') { - if (selectedStyle === 'Bars') { - var barsSourceRow = _ssRow('Price source'); - barsSourceRow.ctrl.appendChild(_ssSelect([ - { v: 'open', l: 'Open' }, - { v: 'high', l: 'High' }, - { v: 'low', l: 'Low' }, - { v: 'close', l: 'Close' }, - { v: 'hl2', l: '(H + L)/2' }, - { v: 'hlc3', l: '(H + L + C)/3' }, - { v: 'ohlc4', l: '(O + H + L + C)/4' }, - ], draft.priceSource, function(v) { draft.priceSource = v; })); - body.appendChild(barsSourceRow.row); - } - - var barsColorRow = _ssRow('Up/Down colors'); - barsColorRow.ctrl.appendChild(_ssDualColorControl( - draft.barsUpColor, - draft.barsDownColor, - function(v) { draft.barsUpColor = v; }, - function(v) { draft.barsDownColor = v; } - )); - body.appendChild(barsColorRow.row); - - var openTickRow = _ssRow('Open tick'); - openTickRow.ctrl.appendChild(_ssCheckbox(draft.barsOpenVisible !== false, function(v) { draft.barsOpenVisible = v; })); - body.appendChild(openTickRow.row); - } else { - var sourceRow = _ssRow('Price source'); - sourceRow.ctrl.appendChild(_ssSelect([ - { v: 'open', l: 'Open' }, - { v: 'high', l: 'High' }, - { v: 'low', l: 'Low' }, - { v: 'close', l: 'Close' }, - { v: 'hl2', l: '(H + L)/2' }, - { v: 'hlc3', l: '(H + L + C)/3' }, - { v: 'ohlc4', l: '(O + H + L + C)/4' }, - ], draft.priceSource, function(v) { draft.priceSource = v; })); - body.appendChild(sourceRow.row); - - var lineRow = _ssRow('Line'); - var widthSync = function() {}; - var lineCtrl = _ssColorLineControl(draft.color, draft.lineWidth, function(v) { draft.color = v; }, function(sync) { widthSync = sync; }); - lineRow.ctrl.appendChild(lineCtrl); - body.appendChild(lineRow.row); - - var widthRow = _ssRow('Line width'); - widthRow.ctrl.appendChild(_ssSelect([ - { v: 1, l: '1px' }, - { v: 2, l: '2px' }, - { v: 3, l: '3px' }, - { v: 4, l: '4px' }, - ], draft.lineWidth, function(v) { - draft.lineWidth = _tvClamp(_tvToNumber(v, 2), 1, 4); - widthSync(draft.lineWidth); - })); - body.appendChild(widthRow.row); - - if (selectedStyle === 'Line with markers') { - var markersRow = _ssRow('Markers'); - markersRow.ctrl.appendChild(_ssCheckbox(draft.markersVisible !== false, function(v) { - draft.markersVisible = v; - })); - body.appendChild(markersRow.row); - } - } - - var priceLineRow = _ssRow('Price line'); - priceLineRow.ctrl.appendChild(_ssCheckbox(draft.priceLineVisible, function(v) { draft.priceLineVisible = v; })); - body.appendChild(priceLineRow.row); - - var tickRow = _ssRow('Override min tick'); - tickRow.ctrl.appendChild(_ssSelect([ - { v: 'Default', l: 'Default' }, - { v: 'Integer', l: 'Integer' }, - { v: '1 decimals', l: '1 decimal' }, - { v: '2 decimals', l: '2 decimals' }, - { v: '3 decimals', l: '3 decimals' }, - { v: '4 decimals', l: '4 decimals' }, - { v: '5 decimals', l: '5 decimals' }, - { v: '6 decimals', l: '6 decimals' }, - { v: '7 decimals', l: '7 decimals' }, - { v: '8 decimals', l: '8 decimals' }, - { v: '9 decimals', l: '9 decimals' }, - { v: '10 decimals', l: '10 decimals' }, - { v: '11 decimals', l: '11 decimals' }, - { v: '12 decimals', l: '12 decimals' }, - { v: '13 decimals', l: '13 decimals' }, - { v: '14 decimals', l: '14 decimals' }, - { v: '15 decimals', l: '15 decimals' }, - { v: '1/2', l: '1/2' }, - { v: '1/4', l: '1/4' }, - { v: '1/8', l: '1/8' }, - { v: '1/16', l: '1/16' }, - { v: '1/32', l: '1/32' }, - { v: '1/64', l: '1/64' }, - { v: '1/128', l: '1/128' }, - { v: '1/320', l: '1/320' }, - ], draft.overrideMinTick, function(v) { draft.overrideMinTick = v; })); - body.appendChild(tickRow.row); - } else { - var visibilityDefs = [ - { key: 'seconds', label: 'Seconds', max: 59 }, - { key: 'minutes', label: 'Minutes', max: 59 }, - { key: 'hours', label: 'Hours', max: 24 }, - { key: 'days', label: 'Days', max: 366 }, - { key: 'weeks', label: 'Weeks', max: 52 }, - { key: 'months', label: 'Months', max: 12 }, - ]; - for (var vi = 0; vi < visibilityDefs.length; vi++) { - (function(def) { - var cfg = draft.visibilityIntervals[def.key] || { enabled: true, min: 1, max: def.max }; - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - row.style.alignItems = 'center'; - - var lhs = document.createElement('div'); - lhs.style.cssText = 'display:flex;align-items:center;gap:10px;min-width:120px;'; - var cb = _ssCheckbox(cfg.enabled !== false, function(v) { - cfg.enabled = !!v; - draft.visibilityIntervals[def.key] = cfg; - }); - lhs.appendChild(cb); - var lbl = document.createElement('span'); - lbl.textContent = def.label; - lbl.style.color = 'var(--pywry-tvchart-text)'; - lhs.appendChild(lbl); - row.appendChild(lhs); - - var minInput = document.createElement('input'); - minInput.type = 'number'; - minInput.className = 'ts-input'; - minInput.style.width = '74px'; - minInput.min = '1'; - minInput.max = String(def.max); - minInput.value = String(_tvClamp(_tvToNumber(cfg.min, 1), 1, def.max)); - row.appendChild(minInput); - - var track = document.createElement('div'); - track.style.cssText = 'position:relative;flex:1;min-width:130px;max-width:190px;height:14px;'; - var rail = document.createElement('div'); - rail.style.cssText = 'position:absolute;left:0;right:0;top:6px;height:3px;border-radius:3px;background:var(--pywry-tvchart-border-strong);'; - var leftKnob = document.createElement('span'); - var rightKnob = document.createElement('span'); - leftKnob.style.cssText = 'position:absolute;top:1px;width:12px;height:12px;border-radius:50%;background:var(--pywry-tvchart-panel-bg);border:2px solid #fff;box-sizing:border-box;'; - rightKnob.style.cssText = 'position:absolute;top:1px;width:12px;height:12px;border-radius:50%;background:var(--pywry-tvchart-panel-bg);border:2px solid #fff;box-sizing:border-box;'; - track.appendChild(rail); - track.appendChild(leftKnob); - track.appendChild(rightKnob); - row.appendChild(track); - - var maxInput = document.createElement('input'); - maxInput.type = 'number'; - maxInput.className = 'ts-input'; - maxInput.style.width = '74px'; - maxInput.min = '1'; - maxInput.max = String(def.max); - maxInput.value = String(_tvClamp(_tvToNumber(cfg.max, def.max), 1, def.max)); - row.appendChild(maxInput); - - function syncKnobs() { - var minVal = _tvClamp(_tvToNumber(minInput.value, 1), 1, def.max); - var maxVal = _tvClamp(_tvToNumber(maxInput.value, def.max), 1, def.max); - if (minVal > maxVal) { - if (document.activeElement === minInput) maxVal = minVal; - else minVal = maxVal; - } - minInput.value = String(minVal); - maxInput.value = String(maxVal); - cfg.min = minVal; - cfg.max = maxVal; - draft.visibilityIntervals[def.key] = cfg; - var lp = ((minVal - 1) / Math.max(def.max - 1, 1)) * 100; - var rp = ((maxVal - 1) / Math.max(def.max - 1, 1)) * 100; - leftKnob.style.left = 'calc(' + lp + '% - 6px)'; - rightKnob.style.left = 'calc(' + rp + '% - 6px)'; - } - - minInput.addEventListener('input', syncKnobs); - maxInput.addEventListener('input', syncKnobs); - syncKnobs(); - body.appendChild(row); - })(visibilityDefs[vi]); - } - } - } - - styleTab.addEventListener('click', function() { - activeTab = 'style'; - styleTab.classList.add('active'); - visTab.classList.remove('active'); - renderBody(); - }); - visTab.addEventListener('click', function() { - activeTab = 'visibility'; - visTab.classList.add('active'); - styleTab.classList.remove('active'); - renderBody(); - }); - - var footer = document.createElement('div'); - footer.className = 'tv-settings-footer'; - footer.style.position = 'relative'; - - var defaultsWrap = document.createElement('div'); - defaultsWrap.className = 'tv-settings-template-wrap'; - var defaultsBtn = document.createElement('button'); - defaultsBtn.className = 'ts-btn-template'; - defaultsBtn.textContent = 'Defaults'; - defaultsWrap.appendChild(defaultsBtn); - var defaultsMenu = null; - function closeDefaultsMenu() { - if (defaultsMenu && defaultsMenu.parentNode) defaultsMenu.parentNode.removeChild(defaultsMenu); - defaultsMenu = null; - defaultsBtn.classList.remove('open'); - } - defaultsBtn.addEventListener('click', function(e) { - e.preventDefault(); - e.stopPropagation(); - if (defaultsMenu) { - closeDefaultsMenu(); - return; - } - defaultsMenu = document.createElement('div'); - defaultsMenu.className = 'tv-settings-template-menu'; - var resetBtn = document.createElement('button'); - resetBtn.className = 'tv-settings-template-item'; - resetBtn.textContent = 'Reset settings'; - resetBtn.addEventListener('click', function() { - draft = _tvMerge({}, initialState); - renderBody(); - closeDefaultsMenu(); - }); - defaultsMenu.appendChild(resetBtn); - var saveBtn = document.createElement('button'); - saveBtn.className = 'tv-settings-template-item'; - saveBtn.textContent = 'Save as default'; - saveBtn.addEventListener('click', function() { closeDefaultsMenu(); }); - defaultsMenu.appendChild(saveBtn); - defaultsWrap.appendChild(defaultsMenu); - defaultsBtn.classList.add('open'); - }); - overlay.addEventListener('mousedown', function(e) { - if (defaultsMenu && defaultsWrap && !defaultsWrap.contains(e.target)) closeDefaultsMenu(); - }); - footer.appendChild(defaultsWrap); - - var cancelBtn = document.createElement('button'); - cancelBtn.className = 'ts-btn-cancel'; - cancelBtn.textContent = 'Cancel'; - cancelBtn.addEventListener('click', function() { _tvHideSeriesSettings(); }); - footer.appendChild(cancelBtn); - - var okBtn = document.createElement('button'); - okBtn.className = 'ts-btn-ok'; - okBtn.textContent = 'Ok'; - okBtn.addEventListener('click', function() { - var selectedStyle = String(draft.style || 'Line'); - var cfg = _ssStyleConfig(selectedStyle); - var targetType = cfg.seriesType; - - // Fast path: series type unchanged — just applyOptions, never recreate. - var oldSeries = entry.seriesMap ? entry.seriesMap[seriesId] : null; - var oldType = oldSeries ? _tvGuessSeriesType(oldSeries) : null; - if (oldSeries && oldType === targetType - && selectedStyle !== 'Columns' && !_ssIsHlcAreaStyle(selectedStyle)) { - var patchOpts = {}; - - if (_ssIsCandleStyle(selectedStyle)) { - var hidden = _cssVar('--pywry-tvchart-hidden') || 'rgba(0, 0, 0, 0)'; - var hollowBody = _cssVar('--pywry-tvchart-hollow-up-body') || hidden; - patchOpts.upColor = (draft.bodyVisible !== false) ? draft.bodyUpColor : hidden; - patchOpts.downColor = (draft.bodyVisible !== false) ? draft.bodyDownColor : hidden; - patchOpts.borderUpColor = (draft.bordersVisible !== false) ? draft.borderUpColor : hidden; - patchOpts.borderDownColor = (draft.bordersVisible !== false) ? draft.borderDownColor : hidden; - patchOpts.wickUpColor = (draft.wickVisible !== false) ? draft.wickUpColor : hidden; - patchOpts.wickDownColor = (draft.wickVisible !== false) ? draft.wickDownColor : hidden; - if (selectedStyle === 'Hollow candles') patchOpts.upColor = hollowBody; - } else if (_ssIsLineLikeStyle(selectedStyle)) { - patchOpts.color = draft.color; - patchOpts.lineColor = draft.color; - patchOpts.lineWidth = _tvClamp(_tvToNumber(draft.lineWidth, 2), 1, 4); - patchOpts.pointMarkersVisible = selectedStyle === 'Line with markers' ? (draft.markersVisible !== false) : false; - patchOpts.lineType = selectedStyle === 'Step line' ? 1 : 0; - } else if (selectedStyle === 'Area') { - patchOpts.lineColor = draft.color; - patchOpts.topColor = draft.areaTopColor; - patchOpts.bottomColor = draft.areaBottomColor; - patchOpts.lineWidth = _tvClamp(_tvToNumber(draft.lineWidth, 2), 1, 4); - } else if (selectedStyle === 'Baseline') { - patchOpts.topLineColor = draft.baselineTopLineColor; - patchOpts.bottomLineColor = draft.baselineBottomLineColor; - patchOpts.topFillColor1 = draft.baselineTopFillColor1; - patchOpts.topFillColor2 = draft.baselineTopFillColor2; - patchOpts.bottomFillColor1 = draft.baselineBottomFillColor1; - patchOpts.bottomFillColor2 = draft.baselineBottomFillColor2; - patchOpts.lineWidth = _tvClamp(_tvToNumber(draft.lineWidth, 2), 1, 4); - } else if (selectedStyle === 'Bars' || selectedStyle === 'HLC bars' || selectedStyle === 'High-low') { - patchOpts.upColor = draft.barsUpColor; - patchOpts.downColor = draft.barsDownColor; - patchOpts.openVisible = draft.barsOpenVisible !== false; - } - - var tickPriceFormat = _ssPriceFormatFromTick(draft.overrideMinTick); - if (tickPriceFormat) patchOpts.priceFormat = tickPriceFormat; - - try { oldSeries.applyOptions(patchOpts); } catch (e) {} - - // Persist preferences - if (!entry._seriesStylePrefs) entry._seriesStylePrefs = {}; - entry._seriesStylePrefs[seriesId] = { - style: draft.style, - priceSource: draft.priceSource, - color: draft.color, - lineWidth: draft.lineWidth, - markersVisible: draft.markersVisible, - areaTopColor: draft.areaTopColor, - areaBottomColor: draft.areaBottomColor, - baselineTopLineColor: draft.baselineTopLineColor, - baselineBottomLineColor: draft.baselineBottomLineColor, - baselineTopFillColor1: draft.baselineTopFillColor1, - baselineTopFillColor2: draft.baselineTopFillColor2, - baselineBottomFillColor1: draft.baselineBottomFillColor1, - baselineBottomFillColor2: draft.baselineBottomFillColor2, - baselineBaseLevel: draft.baselineBaseLevel, - columnsUpColor: draft.columnsUpColor, - columnsDownColor: draft.columnsDownColor, - barsUpColor: draft.barsUpColor, - barsDownColor: draft.barsDownColor, - barsOpenVisible: draft.barsOpenVisible, - bodyVisible: draft.bodyVisible, - bordersVisible: draft.bordersVisible, - wickVisible: draft.wickVisible, - bodyUpColor: draft.bodyUpColor, - bodyDownColor: draft.bodyDownColor, - borderUpColor: draft.borderUpColor, - borderDownColor: draft.borderDownColor, - wickUpColor: draft.wickUpColor, - wickDownColor: draft.wickDownColor, - priceLineVisible: draft.priceLineVisible, - overrideMinTick: draft.overrideMinTick, - hlcHighVisible: draft.hlcHighVisible, - hlcLowVisible: draft.hlcLowVisible, - hlcCloseVisible: draft.hlcCloseVisible, - hlcHighColor: draft.hlcHighColor, - hlcLowColor: draft.hlcLowColor, - hlcCloseColor: draft.hlcCloseColor, - hlcFillTopColor: draft.hlcFillTopColor, - hlcFillBottomColor: draft.hlcFillBottomColor, - }; - if (!entry._seriesVisibilityIntervals) entry._seriesVisibilityIntervals = {}; - entry._seriesVisibilityIntervals[seriesId] = _tvMerge({}, draft.visibilityIntervals || {}); - - // Update legend color - var legendColor = draft.color; - if (_ssIsCandleStyle(selectedStyle)) legendColor = draft.bodyUpColor; - if (selectedStyle === 'Columns') legendColor = draft.columnsUpColor; - if (selectedStyle === 'Bars' || selectedStyle === 'HLC bars' || selectedStyle === 'High-low') legendColor = draft.barsUpColor; - if (selectedStyle === 'Area') legendColor = draft.color; - if (selectedStyle === 'Baseline') legendColor = draft.baselineTopLineColor; - if (!entry._legendSeriesColors) entry._legendSeriesColors = {}; - entry._legendSeriesColors[seriesId] = legendColor; - - _tvHideSeriesSettings(); - _tvRenderHoverLegend(chartId, null); - return; - } - - // Full rebuild path — style changed, need to destroy and recreate series - var sourceForStyle = cfg.source || draft.priceSource || 'close'; - var payloadSeries = _tvFindPayloadSeries(entry, seriesId); - if (!entry._seriesCanonicalRawData) entry._seriesCanonicalRawData = {}; - var canonicalBars = entry._seriesCanonicalRawData[seriesId]; - var payloadBars = (payloadSeries && Array.isArray(payloadSeries.bars)) ? payloadSeries.bars : []; - var fallbackBars = (entry._seriesRawData && entry._seriesRawData[seriesId]) ? entry._seriesRawData[seriesId] : []; - if (!Array.isArray(canonicalBars) || !canonicalBars.length) { - if (_ssLooksLikeOhlcBars(payloadBars)) { - canonicalBars = payloadBars; - } else if (_ssLooksLikeOhlcBars(fallbackBars)) { - canonicalBars = fallbackBars; - } - if (Array.isArray(canonicalBars) && canonicalBars.length) { - entry._seriesCanonicalRawData[seriesId] = canonicalBars; - } - } - var rawBars = (Array.isArray(canonicalBars) && canonicalBars.length) - ? canonicalBars - : (payloadBars.length ? payloadBars : fallbackBars); - var transformedRawBars = _ssBuildBarsForStyle(rawBars, String(draft.style || ''), targetType, sourceForStyle); - var normalizedBars = _tvNormalizeBarsForSeriesType(transformedRawBars, targetType); - - if (selectedStyle === 'Columns') { - var histogramBars = []; - var prevValue = null; - for (var ci = 0; ci < rawBars.length; ci++) { - var crow = rawBars[ci] || {}; - if (crow.time == null) continue; - var cval = _ssSourceValue(crow, sourceForStyle); - var isUp = (prevValue == null) ? true : (cval >= prevValue); - histogramBars.push({ - time: crow.time, - value: cval, - color: isUp ? draft.columnsUpColor : draft.columnsDownColor, - }); - prevValue = cval; - } - normalizedBars = histogramBars; - transformedRawBars = histogramBars; - } - - var oldSeries = entry.seriesMap ? entry.seriesMap[seriesId] : null; - var paneIndex = 0; - if (!_tvIsMainSeriesId(seriesId) && entry._comparePaneBySeries && entry._comparePaneBySeries[seriesId] !== undefined) { - paneIndex = entry._comparePaneBySeries[seriesId]; - } - - var baseSeriesOptions = _tvBuildSeriesOptions( - (payloadSeries && payloadSeries.seriesOptions) ? payloadSeries.seriesOptions : {}, - targetType, - entry.theme - ); - - var rebuiltOptions = _tvMerge(baseSeriesOptions, { - priceLineVisible: !!draft.priceLineVisible, - lastValueVisible: !!draft.priceLineVisible, - visible: draft.visible !== false, - }); - - if (_tvIsMainSeriesId(seriesId)) { - rebuiltOptions.priceScaleId = _tvResolveScalePlacement(entry); - if (entry._comparePaneBySeries && entry._comparePaneBySeries.main !== undefined) { - delete entry._comparePaneBySeries.main; - } - } - - if (_ssIsLineLikeStyle(selectedStyle)) { - rebuiltOptions.color = draft.color; - rebuiltOptions.lineColor = draft.color; - rebuiltOptions.lineWidth = _tvClamp(_tvToNumber(draft.lineWidth, 2), 1, 4); - rebuiltOptions.pointMarkersVisible = selectedStyle === 'Line with markers' ? (draft.markersVisible !== false) : false; - rebuiltOptions.lineType = selectedStyle === 'Step line' ? 1 : 0; - } else if (selectedStyle === 'Area') { - rebuiltOptions.lineColor = draft.color; - rebuiltOptions.topColor = draft.areaTopColor; - rebuiltOptions.bottomColor = draft.areaBottomColor; - rebuiltOptions.lineWidth = _tvClamp(_tvToNumber(draft.lineWidth, 2), 1, 4); - } else if (selectedStyle === 'Baseline') { - rebuiltOptions.topLineColor = draft.baselineTopLineColor; - rebuiltOptions.bottomLineColor = draft.baselineBottomLineColor; - rebuiltOptions.topFillColor1 = draft.baselineTopFillColor1; - rebuiltOptions.topFillColor2 = draft.baselineTopFillColor2; - rebuiltOptions.bottomFillColor1 = draft.baselineBottomFillColor1; - rebuiltOptions.bottomFillColor2 = draft.baselineBottomFillColor2; - rebuiltOptions.lineWidth = _tvClamp(_tvToNumber(draft.lineWidth, 2), 1, 4); - var baseLevel = _tvClamp(_tvToNumber(draft.baselineBaseLevel, 50), 0, 100); - var basePrice = _tvComputeBaselineValue(rawBars, baseLevel); - rebuiltOptions.baseValue = { type: 'price', price: basePrice, _level: baseLevel }; - } else if (selectedStyle === 'Columns') { - rebuiltOptions.color = draft.columnsUpColor; - } else if (selectedStyle === 'Bars' || selectedStyle === 'HLC bars' || selectedStyle === 'High-low') { - rebuiltOptions.upColor = draft.barsUpColor; - rebuiltOptions.downColor = draft.barsDownColor; - rebuiltOptions.openVisible = draft.barsOpenVisible !== false; - } - - if (_ssIsCandleStyle(selectedStyle)) { - var hidden = _cssVar('--pywry-tvchart-hidden') || 'rgba(0, 0, 0, 0)'; - rebuiltOptions.upColor = (draft.bodyVisible !== false) ? draft.bodyUpColor : hidden; - rebuiltOptions.downColor = (draft.bodyVisible !== false) ? draft.bodyDownColor : hidden; - rebuiltOptions.borderUpColor = (draft.bordersVisible !== false) ? draft.borderUpColor : hidden; - rebuiltOptions.borderDownColor = (draft.bordersVisible !== false) ? draft.borderDownColor : hidden; - rebuiltOptions.wickUpColor = (draft.wickVisible !== false) ? draft.wickUpColor : hidden; - rebuiltOptions.wickDownColor = (draft.wickVisible !== false) ? draft.wickDownColor : hidden; - } - - function _ssClearStyleAux() { - if (!entry._seriesStyleAux || !entry._seriesStyleAux[seriesId]) return; - var aux = entry._seriesStyleAux[seriesId] || {}; - var keys = Object.keys(aux); - for (var ai = 0; ai < keys.length; ai++) { - var key = keys[ai]; - if (key.indexOf('series_') === 0 && aux[key] && entry.chart && typeof entry.chart.removeSeries === 'function') { - try { entry.chart.removeSeries(aux[key]); } catch (e) {} - } - } - delete entry._seriesStyleAux[seriesId]; - } - - _ssClearStyleAux(); - rebuiltOptions = _tvMerge(rebuiltOptions, cfg.optionPatch || {}); - - // Preserve current scale placement for this series - try { - var existingOpts = oldSeries && oldSeries.options ? oldSeries.options() : null; - if (!_tvIsMainSeriesId(seriesId) && existingOpts && existingOpts.priceScaleId !== undefined) { - rebuiltOptions.priceScaleId = existingOpts.priceScaleId; - } - } catch (e) {} - - var tickPriceFormat = _ssPriceFormatFromTick(draft.overrideMinTick); - if (tickPriceFormat) rebuiltOptions.priceFormat = tickPriceFormat; - - // Add new series FIRST so the pane is never empty (removing the - // last series in a pane destroys it and renumbers the rest). - var newSeries = _tvAddSeriesCompat(entry.chart, targetType, rebuiltOptions, paneIndex); - try { newSeries.setData(normalizedBars); } catch (e) {} - if (oldSeries && entry.chart && typeof entry.chart.removeSeries === 'function') { - try { entry.chart.removeSeries(oldSeries); } catch (e) {} - } - entry.seriesMap[seriesId] = newSeries; - if (!entry._seriesRawData) entry._seriesRawData = {}; - entry._seriesRawData[seriesId] = normalizedBars; - - _tvUpsertPayloadSeries(entry, seriesId, { - seriesType: targetType, - bars: transformedRawBars, - seriesOptions: _tvMerge((payloadSeries && payloadSeries.seriesOptions) ? payloadSeries.seriesOptions : {}, rebuiltOptions), - }); - - var legendColor = draft.color; - if (selectedStyle === 'Columns') legendColor = draft.columnsUpColor; - if (selectedStyle === 'Bars' || selectedStyle === 'HLC bars' || selectedStyle === 'High-low') legendColor = draft.barsUpColor; - if (selectedStyle === 'Area') legendColor = draft.color; - if (selectedStyle === 'Baseline') legendColor = draft.baselineTopLineColor; - - if (_ssIsHlcAreaStyle(selectedStyle)) { - var sourceBars = Array.isArray(rawBars) ? rawBars : []; - var highBars = []; - var lowBars = []; - var closeBars = []; - for (var hi = 0; hi < sourceBars.length; hi++) { - var r = sourceBars[hi] || {}; - if (r.time == null) continue; - var h = _ssToNumber(r.high, _ssSourceValue(r, 'close')); - var l = _ssToNumber(r.low, _ssSourceValue(r, 'close')); - var c = _ssToNumber(r.close, _ssSourceValue(r, 'close')); - highBars.push({ time: r.time, value: h }); - lowBars.push({ time: r.time, value: l }); - closeBars.push({ time: r.time, value: c }); - } - var aux = { - highVisible: draft.hlcHighVisible !== false, - lowVisible: draft.hlcLowVisible !== false, - closeVisible: draft.hlcCloseVisible !== false, - highColor: draft.hlcHighColor, - lowColor: draft.hlcLowColor, - closeColor: draft.hlcCloseColor, - fillTopColor: draft.hlcFillTopColor, - fillBottomColor: draft.hlcFillBottomColor, - }; - - var hlcBgColor = _cssVar('--pywry-tvchart-bg'); - var hlcLineW = _tvClamp(_tvToNumber(draft.lineWidth, 1), 1, 4); - var hlcAuxBase = { - crosshairMarkerVisible: false, - lastValueVisible: false, - priceLineVisible: false, - priceScaleId: rebuiltOptions.priceScaleId, - }; - - // Main series is the close Area (layer 3) — apply close color + fill-down - try { - newSeries.applyOptions({ - topColor: draft.hlcFillBottomColor, - bottomColor: draft.hlcFillBottomColor, - lineColor: draft.hlcCloseColor, - lineWidth: 2, - visible: draft.hlcCloseVisible !== false, - }); - } catch (e) {} - - // Layer 1: High area (fill-up color from high line down) - var highSeries = _tvAddSeriesCompat(entry.chart, 'Area', _tvMerge(hlcAuxBase, { - topColor: draft.hlcFillTopColor, - bottomColor: draft.hlcFillTopColor, - lineColor: draft.hlcHighColor, - lineWidth: hlcLineW, - visible: draft.hlcHighVisible !== false, - }), paneIndex); - - // Layer 2: Close mask (opaque background erases fill-up below close) - var closeMaskSeries = _tvAddSeriesCompat(entry.chart, 'Area', _tvMerge(hlcAuxBase, { - topColor: hlcBgColor, - bottomColor: hlcBgColor, - lineColor: 'transparent', - lineWidth: 0, - }), paneIndex); - - // Layer 4: Low mask (opaque background erases fill-down below low + low line) - var lowMaskSeries = _tvAddSeriesCompat(entry.chart, 'Area', _tvMerge(hlcAuxBase, { - topColor: hlcBgColor, - bottomColor: hlcBgColor, - lineColor: draft.hlcLowColor, - lineWidth: hlcLineW, - visible: draft.hlcLowVisible !== false, - }), paneIndex); - - try { highSeries.setData(highBars); } catch (e) {} - try { closeMaskSeries.setData(closeBars); } catch (e) {} - try { lowMaskSeries.setData(lowBars); } catch (e) {} - - aux.series_high = highSeries; - aux.series_closeMask = closeMaskSeries; - aux.series_lowMask = lowMaskSeries; - if (!entry._seriesStyleAux) entry._seriesStyleAux = {}; - entry._seriesStyleAux[seriesId] = aux; - if (!entry._seriesAuxRawData) entry._seriesAuxRawData = {}; - entry._seriesAuxRawData[seriesId] = { high: highBars, low: lowBars }; - legendColor = draft.hlcCloseColor; - } - - if (!entry._seriesStylePrefs) entry._seriesStylePrefs = {}; - entry._seriesStylePrefs[seriesId] = { - style: draft.style, - priceSource: draft.priceSource, - color: draft.color, - lineWidth: draft.lineWidth, - markersVisible: draft.markersVisible, - areaTopColor: draft.areaTopColor, - areaBottomColor: draft.areaBottomColor, - baselineTopLineColor: draft.baselineTopLineColor, - baselineBottomLineColor: draft.baselineBottomLineColor, - baselineTopFillColor1: draft.baselineTopFillColor1, - baselineTopFillColor2: draft.baselineTopFillColor2, - baselineBottomFillColor1: draft.baselineBottomFillColor1, - baselineBottomFillColor2: draft.baselineBottomFillColor2, - baselineBaseLevel: draft.baselineBaseLevel, - columnsUpColor: draft.columnsUpColor, - columnsDownColor: draft.columnsDownColor, - barsUpColor: draft.barsUpColor, - barsDownColor: draft.barsDownColor, - barsOpenVisible: draft.barsOpenVisible, - bodyVisible: draft.bodyVisible, - bordersVisible: draft.bordersVisible, - wickVisible: draft.wickVisible, - bodyUpColor: draft.bodyUpColor, - bodyDownColor: draft.bodyDownColor, - borderUpColor: draft.borderUpColor, - borderDownColor: draft.borderDownColor, - wickUpColor: draft.wickUpColor, - wickDownColor: draft.wickDownColor, - priceLineVisible: draft.priceLineVisible, - overrideMinTick: draft.overrideMinTick, - hlcHighVisible: draft.hlcHighVisible, - hlcLowVisible: draft.hlcLowVisible, - hlcCloseVisible: draft.hlcCloseVisible, - hlcHighColor: draft.hlcHighColor, - hlcLowColor: draft.hlcLowColor, - hlcCloseColor: draft.hlcCloseColor, - hlcFillTopColor: draft.hlcFillTopColor, - hlcFillBottomColor: draft.hlcFillBottomColor, - }; - if (!entry._legendSeriesColors) entry._legendSeriesColors = {}; - entry._legendSeriesColors[seriesId] = legendColor; - if (!entry._seriesVisibilityIntervals) entry._seriesVisibilityIntervals = {}; - entry._seriesVisibilityIntervals[seriesId] = _tvMerge({}, draft.visibilityIntervals || {}); - _tvHideSeriesSettings(); - _tvRenderHoverLegend(chartId, null); - }); - footer.appendChild(okBtn); - panel.appendChild(footer); - - renderBody(); - _tvOverlayContainer(chartId).appendChild(overlay); -} - -function _tvShowVolumeSettings(chartId) { - _tvHideVolumeSettings(); - var resolved = _tvResolveChartEntry(chartId); - if (!resolved || !resolved.entry) return; - chartId = resolved.chartId; - var entry = resolved.entry; - var volSeries = entry.volumeMap && entry.volumeMap.main; - if (!volSeries) return; - - var currentOpts = {}; - try { currentOpts = volSeries.options() || {}; } catch (e) {} - var palette = TVCHART_THEMES._get(entry.theme || _tvDetectTheme()); - - // Read persisted volume prefs or derive from current state - var prefs = entry._volumeColorPrefs || {}; - var draft = { - upColor: _tvColorToHex(prefs.upColor || palette.volumeUp, palette.volumeUp), - downColor: _tvColorToHex(prefs.downColor || palette.volumeDown || palette.volumeUp, palette.volumeDown || palette.volumeUp), - // Inputs - maLength: prefs.maLength || 20, - volumeMA: prefs.volumeMA || 'SMA', - colorBasedOnPrevClose: !!prefs.colorBasedOnPrevClose, - smoothingLine: prefs.smoothingLine || 'SMA', - smoothingLength: prefs.smoothingLength || 9, - // Style - showVolume: prefs.showVolumePlot !== false, - showVolumeMA: !!prefs.showVolumeMA, - volumeMAColor: prefs.volumeMAColor || '#2196f3', - showSmoothedMA: !!prefs.showSmoothedMA, - smoothedMAColor: prefs.smoothedMAColor || '#ff6d00', - precision: prefs.precision || 'Default', - labelsOnPriceScale: prefs.labelsOnPriceScale !== false, - valuesInStatusLine: prefs.valuesInStatusLine !== false, - inputsInStatusLine: prefs.inputsInStatusLine !== false, - priceLine: !!prefs.priceLine, - // Visibility - visibility: prefs.visibility || null, - }; - - // Snapshot original state for cancel/revert - var snapshot = JSON.parse(JSON.stringify(draft)); - - // --- Live preview helper: recolour volume bars immediately --- - function applyVolumeLive() { - var rawBars = entry._rawData; - if (!rawBars || !Array.isArray(rawBars) || rawBars.length === 0 || !volSeries) return; - var newVolData = []; - for (var i = 0; i < rawBars.length; i++) { - var b = rawBars[i]; - var v = b.volume != null ? b.volume : (b.Volume != null ? b.Volume : b.vol); - if (v == null || isNaN(v)) continue; - var isUp; - if (draft.colorBasedOnPrevClose) { - var prevClose = (i > 0) ? (rawBars[i - 1].close != null ? rawBars[i - 1].close : rawBars[i - 1].Close) : null; - isUp = (prevClose != null && b.close != null) ? b.close >= prevClose : true; - } else { - isUp = (b.close != null && b.open != null) ? b.close >= b.open : true; - } - newVolData.push({ - time: b.time, - value: +v, - color: isUp ? draft.upColor : draft.downColor, - }); - } - if (newVolData.length > 0) volSeries.setData(newVolData); - } - - var overlay = document.createElement('div'); - overlay.className = 'tv-settings-overlay'; - _volumeSettingsOverlay = overlay; - _volumeSettingsOverlayChartId = chartId; - _tvSetChartInteractionLocked(chartId, true); - _tvRefreshLegendVisibility(); - overlay.addEventListener('click', function(e) { - if (e.target === overlay) { - // Revert on backdrop click - draft = JSON.parse(JSON.stringify(snapshot)); - applyVolumeLive(); - _tvHideVolumeSettings(); - } - }); - overlay.addEventListener('mousedown', function(e) { e.stopPropagation(); }); - overlay.addEventListener('wheel', function(e) { e.stopPropagation(); }); - - var panel = document.createElement('div'); - panel.className = 'tv-settings-panel'; - panel.style.cssText = 'width:460px;max-width:calc(100% - 32px);max-height:70vh;display:flex;flex-direction:column;'; - overlay.appendChild(panel); - - // Header - var header = document.createElement('div'); - header.className = 'tv-settings-header'; - header.style.cssText = 'position:relative;flex-direction:column;align-items:stretch;padding-bottom:0;'; - var hdrRow = document.createElement('div'); - hdrRow.style.cssText = 'display:flex;align-items:center;gap:8px;'; - var titleEl = document.createElement('h3'); - titleEl.textContent = 'Volume'; - hdrRow.appendChild(titleEl); - var closeBtn = document.createElement('button'); - closeBtn.className = 'tv-settings-close'; - closeBtn.innerHTML = ''; - closeBtn.addEventListener('click', function() { - draft = JSON.parse(JSON.stringify(snapshot)); - applyVolumeLive(); - _tvHideVolumeSettings(); - }); - hdrRow.appendChild(closeBtn); - header.appendChild(hdrRow); - - // Tab bar - var activeTab = 'inputs'; - var tabBar = document.createElement('div'); - tabBar.className = 'tv-ind-settings-tabs'; - var tabs = ['Inputs', 'Style', 'Visibility']; - var tabEls = {}; - tabs.forEach(function(t) { - var te = document.createElement('div'); - te.className = 'tv-ind-settings-tab' + (t.toLowerCase() === activeTab ? ' active' : ''); - te.textContent = t; - te.addEventListener('click', function() { - activeTab = t.toLowerCase(); - tabs.forEach(function(tn) { tabEls[tn].classList.toggle('active', tn.toLowerCase() === activeTab); }); - renderBody(); - }); - tabEls[t] = te; - tabBar.appendChild(te); - }); - header.appendChild(tabBar); - panel.appendChild(header); - - // Body - var body = document.createElement('div'); - body.className = 'tv-settings-body'; - body.style.cssText = 'flex:1;overflow-y:auto;min-height:80px;padding:16px 20px;'; - panel.appendChild(body); - - // --- Row builder helpers --- - function addSection(parent, text) { - var sec = document.createElement('div'); - sec.className = 'tv-settings-section'; - sec.textContent = text; - parent.appendChild(sec); - } - function makeRow(labelText) { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - var lbl = document.createElement('label'); - lbl.textContent = labelText; - row.appendChild(lbl); - var ctrl = document.createElement('div'); - ctrl.className = 'ts-controls'; - row.appendChild(ctrl); - return { row: row, ctrl: ctrl }; - } - function makeColorSwatch(color, onChange) { - var swatch = document.createElement('div'); - swatch.className = 'ts-swatch'; - swatch.dataset.baseColor = _tvColorToHex(color, '#aeb4c2'); - swatch.dataset.opacity = String(_tvColorOpacityPercent(color, 100)); - swatch.style.background = color; - swatch.addEventListener('click', function(e) { - e.preventDefault(); - e.stopPropagation(); - _tvShowColorOpacityPopup( - swatch, - swatch.dataset.baseColor || color, - _tvToNumber(swatch.dataset.opacity, 100), - overlay, - function(newColor, newOpacity) { - swatch.dataset.baseColor = newColor; - swatch.dataset.opacity = String(newOpacity); - var display = _tvColorWithOpacity(newColor, newOpacity, newColor); - swatch.style.background = display; - onChange(display, newColor, newOpacity); - } - ); - }); - return swatch; - } - function addCheckRow(parent, label, val, onChange) { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - var lbl = document.createElement('label'); lbl.textContent = label; row.appendChild(lbl); - var cb = document.createElement('input'); cb.type = 'checkbox'; cb.className = 'ts-checkbox'; - cb.checked = !!val; - cb.addEventListener('change', function() { onChange(cb.checked); }); - row.appendChild(cb); parent.appendChild(row); - } - function addSelectRow(parent, label, opts, val, onChange) { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - var lbl = document.createElement('label'); lbl.textContent = label; row.appendChild(lbl); - var sel = document.createElement('select'); sel.className = 'ts-select'; - opts.forEach(function(o) { - var opt = document.createElement('option'); - opt.value = typeof o === 'string' ? o : o.v; - opt.textContent = typeof o === 'string' ? o : o.l; - if (String(opt.value) === String(val)) opt.selected = true; - sel.appendChild(opt); - }); - sel.addEventListener('change', function() { onChange(sel.value); }); - row.appendChild(sel); parent.appendChild(row); - } - function addNumberRow(parent, label, min, max, step, val, onChange) { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - var lbl = document.createElement('label'); lbl.textContent = label; row.appendChild(lbl); - var inp = document.createElement('input'); inp.type = 'number'; inp.className = 'ts-input'; - inp.min = min; inp.max = max; inp.step = step; inp.value = val; - inp.addEventListener('keydown', function(e) { e.stopPropagation(); }); - inp.addEventListener('input', function() { var v = parseFloat(inp.value); if (!isNaN(v) && v >= parseFloat(min)) onChange(v); }); - row.appendChild(inp); parent.appendChild(row); - } - - function renderBody() { - body.innerHTML = ''; - - // ===================== INPUTS TAB ===================== - if (activeTab === 'inputs') { - // Symbol source radio buttons (separate section, no tv-settings-row label sizing) - var symSection = document.createElement('div'); - symSection.style.cssText = 'display:flex;flex-direction:column;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--pywry-tvchart-divider,rgba(128,128,128,0.15));margin-bottom:12px;'; - - var r1 = document.createElement('label'); - r1.style.cssText = 'display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;color:var(--pywry-tvchart-text);'; - var rb1 = document.createElement('input'); rb1.type = 'radio'; rb1.name = 'vol-sym-src'; rb1.value = 'main'; rb1.checked = true; - rb1.style.cssText = 'margin:0;'; - r1.appendChild(rb1); - r1.appendChild(document.createTextNode('Main chart symbol')); - symSection.appendChild(r1); - - var r2 = document.createElement('label'); - r2.style.cssText = 'display:flex;align-items:center;gap:8px;cursor:default;font-size:12px;color:var(--pywry-tvchart-text-muted,#787b86);opacity:0.5;'; - var rb2 = document.createElement('input'); rb2.type = 'radio'; rb2.name = 'vol-sym-src'; rb2.value = 'other'; rb2.disabled = true; - rb2.style.cssText = 'margin:0;'; - r2.appendChild(rb2); - r2.appendChild(document.createTextNode('Another symbol')); - // Pencil icon (disabled) - var pencilSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - pencilSvg.setAttribute('viewBox', '0 0 18 18'); - pencilSvg.setAttribute('width', '14'); - pencilSvg.setAttribute('height', '14'); - pencilSvg.style.cssText = 'opacity:0.4;flex-shrink:0;'; - pencilSvg.innerHTML = ''; - r2.appendChild(pencilSvg); - symSection.appendChild(r2); - - body.appendChild(symSection); - - // Remaining input fields - addNumberRow(body, 'MA Length', '1', '500', '1', draft.maLength, function(v) { draft.maLength = v; }); - addSelectRow(body, 'Volume MA', [ - { v: 'SMA', l: 'SMA' }, { v: 'EMA', l: 'EMA' }, { v: 'WMA', l: 'WMA' }, - ], draft.volumeMA, function(v) { draft.volumeMA = v; }); - addCheckRow(body, 'Color based on previous close', draft.colorBasedOnPrevClose, function(v) { - draft.colorBasedOnPrevClose = v; - applyVolumeLive(); - }); - addSelectRow(body, 'Smoothing Line', [ - { v: 'SMA', l: 'SMA' }, { v: 'EMA', l: 'EMA' }, { v: 'WMA', l: 'WMA' }, - ], draft.smoothingLine, function(v) { draft.smoothingLine = v; }); - addNumberRow(body, 'Smoothing Length', '1', '200', '1', draft.smoothingLength, function(v) { draft.smoothingLength = v; }); - - // ===================== STYLE TAB ===================== - } else if (activeTab === 'style') { - // Volume row: checkbox + "Volume" label ... Falling swatch Growing swatch - var volRow = document.createElement('div'); - volRow.style.cssText = 'display:flex;align-items:center;gap:8px;margin-bottom:2px;'; - var volCb = document.createElement('input'); volCb.type = 'checkbox'; volCb.className = 'ts-checkbox'; - volCb.checked = draft.showVolume; - volCb.addEventListener('change', function() { draft.showVolume = volCb.checked; }); - volRow.appendChild(volCb); - var volLbl = document.createElement('span'); - volLbl.textContent = 'Volume'; - volLbl.style.cssText = 'font-size:12px;color:var(--pywry-tvchart-text);flex:1;'; - volRow.appendChild(volLbl); - - // Falling color group (down) - var fallGroup = document.createElement('div'); - fallGroup.style.cssText = 'display:flex;flex-direction:column;align-items:center;gap:3px;'; - var downSwatch = makeColorSwatch(draft.downColor, function(display) { - draft.downColor = display; - applyVolumeLive(); - }); - fallGroup.appendChild(downSwatch); - var fallLbl = document.createElement('span'); - fallLbl.textContent = 'Falling'; - fallLbl.style.cssText = 'font-size:10px;color:var(--pywry-tvchart-text-muted,#787b86);'; - fallGroup.appendChild(fallLbl); - volRow.appendChild(fallGroup); - - // Growing color group (up) - var growGroup = document.createElement('div'); - growGroup.style.cssText = 'display:flex;flex-direction:column;align-items:center;gap:3px;'; - var upSwatch = makeColorSwatch(draft.upColor, function(display) { - draft.upColor = display; - applyVolumeLive(); - }); - growGroup.appendChild(upSwatch); - var growLbl = document.createElement('span'); - growLbl.textContent = 'Growing'; - growLbl.style.cssText = 'font-size:10px;color:var(--pywry-tvchart-text-muted,#787b86);'; - growGroup.appendChild(growLbl); - volRow.appendChild(growGroup); - - body.appendChild(volRow); - - // Separator - var sep1 = document.createElement('div'); - sep1.style.cssText = 'border-bottom:1px solid var(--pywry-tvchart-divider,rgba(128,128,128,0.15));margin:10px 0;'; - body.appendChild(sep1); - - // Price line toggle - addCheckRow(body, 'Price line', draft.priceLine, function(v) { draft.priceLine = v; }); - - // Separator - var sep2 = document.createElement('div'); - sep2.style.cssText = 'border-bottom:1px solid var(--pywry-tvchart-divider,rgba(128,128,128,0.15));margin:10px 0;'; - body.appendChild(sep2); - - // Volume MA row: checkbox + label + color - var maRow = document.createElement('div'); - maRow.style.cssText = 'display:flex;align-items:center;gap:8px;margin-bottom:8px;'; - var maCb = document.createElement('input'); maCb.type = 'checkbox'; maCb.className = 'ts-checkbox'; - maCb.checked = draft.showVolumeMA; - maCb.addEventListener('change', function() { draft.showVolumeMA = maCb.checked; }); - maRow.appendChild(maCb); - var maLbl = document.createElement('span'); - maLbl.textContent = 'Volume MA'; - maLbl.style.cssText = 'font-size:12px;color:var(--pywry-tvchart-text);flex:1;'; - maRow.appendChild(maLbl); - maRow.appendChild(makeColorSwatch(draft.volumeMAColor, function(display) { draft.volumeMAColor = display; })); - body.appendChild(maRow); - - // Smoothed MA row: checkbox + label + color - var smRow = document.createElement('div'); - smRow.style.cssText = 'display:flex;align-items:center;gap:8px;margin-bottom:8px;'; - var smCb = document.createElement('input'); smCb.type = 'checkbox'; smCb.className = 'ts-checkbox'; - smCb.checked = draft.showSmoothedMA; - smCb.addEventListener('change', function() { draft.showSmoothedMA = smCb.checked; }); - smRow.appendChild(smCb); - var smLbl = document.createElement('span'); - smLbl.textContent = 'Smoothed MA'; - smLbl.style.cssText = 'font-size:12px;color:var(--pywry-tvchart-text);flex:1;'; - smRow.appendChild(smLbl); - smRow.appendChild(makeColorSwatch(draft.smoothedMAColor, function(display) { draft.smoothedMAColor = display; })); - body.appendChild(smRow); - - // Separator - var sep3 = document.createElement('div'); - sep3.style.cssText = 'border-bottom:1px solid var(--pywry-tvchart-divider,rgba(128,128,128,0.15));margin:10px 0;'; - body.appendChild(sep3); - - // OUTPUT VALUES section - addSection(body, 'OUTPUT VALUES'); - addSelectRow(body, 'Precision', [ - { v: 'Default', l: 'Default' }, { v: '0', l: '0' }, { v: '1', l: '1' }, - { v: '2', l: '2' }, { v: '3', l: '3' }, { v: '4', l: '4' }, - ], draft.precision, function(v) { draft.precision = v; }); - addCheckRow(body, 'Labels on price scale', draft.labelsOnPriceScale, function(v) { draft.labelsOnPriceScale = v; }); - addCheckRow(body, 'Values in status line', draft.valuesInStatusLine, function(v) { draft.valuesInStatusLine = v; }); - - // INPUT VALUES section - addSection(body, 'INPUT VALUES'); - addCheckRow(body, 'Inputs in status line', draft.inputsInStatusLine, function(v) { draft.inputsInStatusLine = v; }); - - // ===================== VISIBILITY TAB ===================== - } else if (activeTab === 'visibility') { - addSection(body, 'TIMEFRAME VISIBILITY'); - var intervals = [ - { key: 'seconds', label: 'Seconds', rangeLabel: '1s \u2013 59s' }, - { key: 'minutes', label: 'Minutes', rangeLabel: '1m \u2013 59m' }, - { key: 'hours', label: 'Hours', rangeLabel: '1H \u2013 24H' }, - { key: 'days', label: 'Days', rangeLabel: '1D \u2013 1Y' }, - { key: 'weeks', label: 'Weeks', rangeLabel: '1W \u2013 52W' }, - { key: 'months', label: 'Months', rangeLabel: '1M \u2013 12M' }, - ]; - if (!draft.visibility) { - draft.visibility = {}; - intervals.forEach(function(iv) { draft.visibility[iv.key] = true; }); - } - intervals.forEach(function(iv) { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - row.style.cssText = 'display:flex;align-items:center;gap:8px;'; - var cb = document.createElement('input'); cb.type = 'checkbox'; cb.className = 'ts-checkbox'; - cb.checked = draft.visibility[iv.key] !== false; - cb.addEventListener('change', function() { draft.visibility[iv.key] = cb.checked; }); - row.appendChild(cb); - var lbl = document.createElement('label'); lbl.style.flex = '1'; - lbl.textContent = iv.label; - row.appendChild(lbl); - var range = document.createElement('span'); - range.style.cssText = 'color:var(--pywry-tvchart-text-muted,#787b86);font-size:11px;'; - range.textContent = iv.rangeLabel; - row.appendChild(range); - body.appendChild(row); - }); - } - } - - renderBody(); - - // Footer with Defaults dropdown, Cancel, Ok - var footer = document.createElement('div'); - footer.className = 'tv-settings-footer'; - footer.style.cssText = 'position:relative;bottom:auto;left:auto;right:auto;'; - - var cancelBtn = document.createElement('button'); - cancelBtn.className = 'ts-btn-cancel'; - cancelBtn.textContent = 'Cancel'; - cancelBtn.addEventListener('click', function() { - draft = JSON.parse(JSON.stringify(snapshot)); - applyVolumeLive(); - _tvHideVolumeSettings(); - }); - footer.appendChild(cancelBtn); - - var okBtn = document.createElement('button'); - okBtn.className = 'ts-btn-ok'; - okBtn.textContent = 'Ok'; - okBtn.addEventListener('click', function() { - // Persist all volume prefs - if (!entry._volumeColorPrefs) entry._volumeColorPrefs = {}; - entry._volumeColorPrefs.upColor = draft.upColor; - entry._volumeColorPrefs.downColor = draft.downColor; - entry._volumeColorPrefs.maLength = draft.maLength; - entry._volumeColorPrefs.volumeMA = draft.volumeMA; - entry._volumeColorPrefs.colorBasedOnPrevClose = draft.colorBasedOnPrevClose; - entry._volumeColorPrefs.smoothingLine = draft.smoothingLine; - entry._volumeColorPrefs.smoothingLength = draft.smoothingLength; - entry._volumeColorPrefs.showVolumePlot = draft.showVolume; - entry._volumeColorPrefs.showVolumeMA = draft.showVolumeMA; - entry._volumeColorPrefs.volumeMAColor = draft.volumeMAColor; - entry._volumeColorPrefs.showSmoothedMA = draft.showSmoothedMA; - entry._volumeColorPrefs.smoothedMAColor = draft.smoothedMAColor; - entry._volumeColorPrefs.precision = draft.precision; - entry._volumeColorPrefs.labelsOnPriceScale = draft.labelsOnPriceScale; - entry._volumeColorPrefs.valuesInStatusLine = draft.valuesInStatusLine; - entry._volumeColorPrefs.inputsInStatusLine = draft.inputsInStatusLine; - entry._volumeColorPrefs.priceLine = draft.priceLine; - entry._volumeColorPrefs.visibility = draft.visibility; - - // Apply live colour change (already previewed) and update series options - applyVolumeLive(); - if (volSeries) { - try { - volSeries.applyOptions({ - lastValueVisible: draft.priceLine, - priceLineVisible: draft.priceLine, - }); - } catch (e) {} - } - - _tvHideVolumeSettings(); - }); - footer.appendChild(okBtn); - panel.appendChild(footer); - - _tvOverlayContainer(chartId).appendChild(overlay); -} - -function _tvShowChartSettings(chartId) { - _tvHideChartSettings(); - var resolved = _tvResolveChartEntry(chartId); - if (!resolved || !resolved.entry) return; - chartId = resolved.chartId; - var entry = resolved.entry; - var currentSettings = (entry && entry._chartPrefs && entry._chartPrefs.settings) - ? entry._chartPrefs.settings - : _tvBuildCurrentSettings(entry); - - var overlay = document.createElement('div'); - overlay.className = 'tv-settings-overlay'; - _chartSettingsOverlay = overlay; - _chartSettingsOverlayChartId = chartId; - _tvSetChartInteractionLocked(chartId, true); - _tvRefreshLegendVisibility(); - overlay.addEventListener('click', function(e) { - if (e.target === overlay) _tvHideChartSettings(); - }); - overlay.addEventListener('mousedown', function(e) { e.stopPropagation(); }); - overlay.addEventListener('wheel', function(e) { e.stopPropagation(); }); - - var panel = document.createElement('div'); - panel.className = 'tv-settings-panel'; - overlay.appendChild(panel); - - // Header (stays fixed at top) - var header = document.createElement('div'); - header.className = 'tv-settings-header'; - var title = document.createElement('h3'); - title.textContent = 'Symbol Settings'; - header.appendChild(title); - var closeBtn = document.createElement('button'); - closeBtn.className = 'tv-settings-close'; - closeBtn.innerHTML = ''; - closeBtn.addEventListener('click', function() { _tvHideChartSettings(); }); - header.appendChild(closeBtn); - panel.appendChild(header); - - // Sidebar with tabs - var sidebar = document.createElement('div'); - sidebar.className = 'tv-settings-sidebar'; - panel.appendChild(sidebar); - - var tabDefs = [ - { id: 'symbol', label: 'Symbol', icon: '🔤' }, - { id: 'status', label: 'Status line', icon: '━' }, - { id: 'scales', label: 'Scales and lines', icon: '↕' }, - { id: 'canvas', label: 'Canvas', icon: '⬜' } - ]; - - var tabButtons = {}; - var activeTab = 'symbol'; - - for (var ti = 0; ti < tabDefs.length; ti++) { - var tdef = tabDefs[ti]; - var tBtn = document.createElement('div'); - tBtn.className = 'tv-settings-sidebar-tab' + (ti === 0 ? ' active' : ''); - tBtn.textContent = tdef.label; - tBtn.setAttribute('data-tab', tdef.id); - tabButtons[tdef.id] = tBtn; - - (function(tabId, btn) { - btn.addEventListener('click', function() { - if (activeTab === tabId) return; - tabButtons[activeTab].classList.remove('active'); - document.getElementById('pane-' + activeTab).classList.remove('active'); - tabButtons[tabId].classList.add('active'); - document.getElementById('pane-' + tabId).classList.add('active'); - activeTab = tabId; - }); - })(tdef.id, tBtn); - - sidebar.appendChild(tBtn); - } - - // Content area - var content = document.createElement('div'); - content.className = 'tv-settings-content'; - panel.appendChild(content); - - // Helper functions for controls - - function syncSettingsSwatch(swatch, baseColor, opacityPercent) { - if (!swatch) return; - var nextColor = _tvColorToHex(baseColor || swatch.dataset.baseColor || '#aeb4c2', '#aeb4c2'); - var nextOpacity = _tvClamp(_tvToNumber(opacityPercent, swatch.dataset.opacity || 100), 0, 100); - swatch.dataset.baseColor = nextColor; - swatch.dataset.opacity = String(nextOpacity); - swatch.style.background = _tvColorWithOpacity(nextColor, nextOpacity, nextColor); - } - - function addCheckboxRow(parent, label, checked) { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - var lbl = document.createElement('label'); - lbl.textContent = label; - row.appendChild(lbl); - var cb = document.createElement('input'); - cb.type = 'checkbox'; - cb.className = 'ts-checkbox'; - cb.checked = !!checked; - cb.setAttribute('data-setting', label); - var ctrl = document.createElement('div'); - ctrl.className = 'ts-controls'; - ctrl.appendChild(cb); - row.appendChild(ctrl); - parent.appendChild(row); - return cb; - } - - function addIndentedCheckboxRow(parent, label, checked) { - var cb = addCheckboxRow(parent, label, checked); - if (cb && cb.parentNode && cb.parentNode.parentNode) { - cb.parentNode.parentNode.classList.add('tv-settings-row-indent'); - } - return cb; - } - - function addSelectRow(parent, label, options, selected) { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - var lbl = document.createElement('label'); - lbl.textContent = label; - row.appendChild(lbl); - var sel = document.createElement('select'); - sel.className = 'ts-select'; - sel.setAttribute('data-setting', label); - for (var i = 0; i < options.length; i++) { - var o = document.createElement('option'); - o.value = options[i]; - o.textContent = options[i]; - if (options[i] === selected) o.selected = true; - sel.appendChild(o); - } - var ctrl = document.createElement('div'); - ctrl.className = 'ts-controls'; - ctrl.appendChild(sel); - row.appendChild(ctrl); - parent.appendChild(row); - return sel; - } - - function addColorRow(parent, label, checked, color) { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - var lbl = document.createElement('label'); - lbl.className = 'tv-settings-inline-label'; - lbl.textContent = label; - row.appendChild(lbl); - var ctrl = document.createElement('div'); - ctrl.className = 'ts-controls'; - if (checked != null) { - var cb = document.createElement('input'); - cb.type = 'checkbox'; - cb.className = 'ts-checkbox'; - cb.setAttribute('data-setting', label + '-Enabled'); - cb.checked = !!checked; - ctrl.appendChild(cb); - } - var swatch = document.createElement('div'); - swatch.className = 'ts-swatch'; - swatch.setAttribute('data-setting', label + '-Color'); - swatch.dataset.baseColor = _tvColorToHex(color || '#aeb4c2', '#aeb4c2'); - swatch.dataset.opacity = String(_tvColorOpacityPercent(color, 100)); - swatch.style.background = color || '#aeb4c2'; - ctrl.appendChild(swatch); - - swatch.addEventListener('click', function(e) { - e.preventDefault(); - e.stopPropagation(); - _tvShowColorOpacityPopup( - swatch, - swatch.dataset.baseColor || color || '#aeb4c2', - _tvToNumber(swatch.dataset.opacity, 100), - overlay, - function(newColor, newOpacity) { - swatch.dataset.baseColor = newColor; - swatch.dataset.opacity = String(newOpacity); - swatch.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); - scheduleSettingsPreview(); - } - ); - }); - - row.appendChild(ctrl); - parent.appendChild(row); - return { - checkbox: checked !== undefined && checked !== false ? ctrl.querySelector('input[type="checkbox"]') : null, - swatch: swatch, - }; - } - - function addDualColorRow(parent, label, checked, upColor, downColor, upSetting, downSetting) { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - - var lbl = document.createElement('label'); - lbl.className = 'tv-settings-inline-label'; - lbl.textContent = label; - row.appendChild(lbl); - - var ctrl = document.createElement('div'); - ctrl.className = 'ts-controls'; - - var cb = document.createElement('input'); - cb.type = 'checkbox'; - cb.className = 'ts-checkbox'; - cb.setAttribute('data-setting', label); - cb.checked = !!checked; - ctrl.appendChild(cb); - - function makeSwatch(settingKey, color) { - var wrap = document.createElement('div'); - wrap.className = 'tv-settings-color-pair'; - - var opacityInput = document.createElement('input'); - opacityInput.type = 'hidden'; - var explicitOpacity = currentSettings[settingKey + '-Opacity']; - var legacyOpacity = currentSettings[label + '-Opacity']; - opacityInput.value = explicitOpacity != null ? String(explicitOpacity) : (legacyOpacity != null ? String(legacyOpacity) : '100'); - opacityInput.setAttribute('data-setting', settingKey + '-Opacity'); - wrap.appendChild(opacityInput); - - var swatch = document.createElement('div'); - swatch.className = 'ts-swatch'; - swatch.setAttribute('data-setting', settingKey); - syncSettingsSwatch(swatch, color || '#aeb4c2', opacityInput.value); - wrap.appendChild(swatch); - - swatch.addEventListener('click', function(e) { - e.preventDefault(); - e.stopPropagation(); - _tvShowColorOpacityPopup( - swatch, - swatch.dataset.baseColor || color || '#aeb4c2', - _tvToNumber(opacityInput.value, 100), - overlay, - function(newColor, newOpacity) { - opacityInput.value = String(newOpacity); - syncSettingsSwatch(swatch, newColor, newOpacity); - scheduleSettingsPreview(); - } - ); - }); - - return wrap; - } - - ctrl.appendChild(makeSwatch(upSetting, upColor)); - ctrl.appendChild(makeSwatch(downSetting, downColor)); - row.appendChild(ctrl); - parent.appendChild(row); - return row; - } - - function addCheckboxSliderRow(parent, label, checked, enabledSetting, sliderValue, sliderSetting) { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - - var lbl = document.createElement('label'); - lbl.textContent = label; - row.appendChild(lbl); - - var ctrl = document.createElement('div'); - ctrl.className = 'ts-controls ts-controls-slider'; - - var cb = document.createElement('input'); - cb.type = 'checkbox'; - cb.className = 'ts-checkbox'; - cb.checked = !!checked; - cb.setAttribute('data-setting', enabledSetting); - ctrl.appendChild(cb); - - var slider = document.createElement('input'); - slider.type = 'range'; - slider.min = '0'; - slider.max = '100'; - slider.value = sliderValue != null ? String(sliderValue) : '100'; - slider.className = 'tv-settings-slider'; - slider.setAttribute('data-setting', sliderSetting); - ctrl.appendChild(slider); - - var output = document.createElement('span'); - output.className = 'tv-settings-slider-value'; - output.textContent = slider.value + '%'; - ctrl.appendChild(output); - - slider.addEventListener('input', function() { - output.textContent = slider.value + '%'; - }); - - row.appendChild(ctrl); - parent.appendChild(row); - return { checkbox: cb, slider: slider, output: output }; - } - - function addCheckboxInputRow(parent, label, checked, enabledSetting, inputValue, inputSetting) { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced tv-settings-row-combo'; - - var lbl = document.createElement('label'); - lbl.textContent = ''; - row.appendChild(lbl); - - var ctrl = document.createElement('div'); - ctrl.className = 'ts-controls'; - - var cb = document.createElement('input'); - cb.type = 'checkbox'; - cb.className = 'ts-checkbox'; - cb.checked = !!checked; - cb.setAttribute('data-setting', enabledSetting); - ctrl.appendChild(cb); - - var textLbl = document.createElement('span'); - textLbl.className = 'tv-settings-inline-gap'; - textLbl.textContent = label; - ctrl.appendChild(textLbl); - - var inp = document.createElement('input'); - inp.type = 'text'; - inp.className = 'ts-input ts-input-wide'; - inp.setAttribute('data-setting', inputSetting); - inp.value = inputValue != null ? String(inputValue) : ''; - ctrl.appendChild(inp); - - row.appendChild(ctrl); - parent.appendChild(row); - return { checkbox: cb, input: inp }; - } - - function addSelectColorRow(parent, label, options, selected, selectSetting, color, colorSetting) { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - - var lbl = document.createElement('label'); - lbl.textContent = label; - row.appendChild(lbl); - - var ctrl = document.createElement('div'); - ctrl.className = 'ts-controls'; - - var sel = document.createElement('select'); - sel.className = 'ts-select'; - sel.setAttribute('data-setting', selectSetting || label); - options.forEach(function(opt) { - var o = document.createElement('option'); - o.value = opt; - o.textContent = opt; - if (opt === selected) o.selected = true; - sel.appendChild(o); - }); - ctrl.appendChild(sel); - - var swatch = document.createElement('div'); - swatch.className = 'ts-swatch'; - swatch.setAttribute('data-setting', colorSetting || (label + ' color')); - swatch.dataset.baseColor = _tvColorToHex(color || '#aeb4c2', '#aeb4c2'); - swatch.dataset.opacity = String(_tvColorOpacityPercent(color, 100)); - swatch.style.background = color || '#aeb4c2'; - ctrl.appendChild(swatch); - - swatch.addEventListener('click', function(e) { - e.preventDefault(); - e.stopPropagation(); - _tvShowColorOpacityPopup( - swatch, - swatch.dataset.baseColor || color || '#aeb4c2', - _tvToNumber(swatch.dataset.opacity, 100), - overlay, - function(newColor, newOpacity) { - swatch.dataset.baseColor = newColor; - swatch.dataset.opacity = String(newOpacity); - swatch.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); - scheduleSettingsPreview(); - } - ); - }); - - row.appendChild(ctrl); - parent.appendChild(row); - return { select: sel, swatch: swatch }; - } - - function addNumberInputRow(parent, label, settingKey, value, min, max, step, unitText, inputClassName) { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - - var lbl = document.createElement('label'); - lbl.textContent = label; - row.appendChild(lbl); - - var ctrl = document.createElement('div'); - ctrl.className = 'ts-controls'; - - var inp = document.createElement('input'); - inp.type = 'number'; - inp.className = inputClassName || 'ts-input'; - inp.setAttribute('data-setting', settingKey || label); - if (min != null) inp.min = String(min); - if (max != null) inp.max = String(max); - if (step != null) inp.step = String(step); - inp.value = value != null ? String(value) : ''; - ctrl.appendChild(inp); - - if (unitText) { - var unit = document.createElement('span'); - unit.className = 'tv-settings-unit'; - unit.textContent = unitText; - ctrl.appendChild(unit); - } - - row.appendChild(ctrl); - parent.appendChild(row); - return inp; - } - - function addColorSwatchRow(parent, label, color, settingKey) { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - - var lbl = document.createElement('label'); - lbl.textContent = label; - row.appendChild(lbl); - - var ctrl = document.createElement('div'); - ctrl.className = 'ts-controls'; - - var swatch = document.createElement('div'); - swatch.className = 'ts-swatch'; - swatch.setAttribute('data-setting', settingKey || label); - swatch.dataset.baseColor = _tvColorToHex(color || '#aeb4c2', '#aeb4c2'); - swatch.dataset.opacity = String(_tvColorOpacityPercent(color, 100)); - swatch.style.background = color || '#aeb4c2'; - ctrl.appendChild(swatch); - - swatch.addEventListener('click', function(e) { - e.preventDefault(); - e.stopPropagation(); - _tvShowColorOpacityPopup( - swatch, - swatch.dataset.baseColor || color || '#aeb4c2', - _tvToNumber(swatch.dataset.opacity, 100), - overlay, - function(newColor, newOpacity) { - swatch.dataset.baseColor = newColor; - swatch.dataset.opacity = String(newOpacity); - swatch.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); - scheduleSettingsPreview(); - } - ); - }); - - row.appendChild(ctrl); - parent.appendChild(row); - return { swatch: swatch }; - } - - // Pane: Symbol - var paneSymbol = document.createElement('div'); - paneSymbol.id = 'pane-symbol'; - paneSymbol.className = 'tv-settings-content-pane active'; - - var lineSection = document.createElement('div'); - lineSection.className = 'tv-settings-section-body'; - paneSymbol.appendChild(lineSection); - - var mainSeries = _tvGetMainSeries(entry); - var seriesType = mainSeries ? _tvGuessSeriesType(mainSeries) : 'Candlestick'; - - var symbolTitle = document.createElement('div'); - symbolTitle.className = 'tv-settings-title'; - - if (seriesType === 'Candlestick') { - symbolTitle.textContent = 'CANDLES'; - lineSection.appendChild(symbolTitle); - addCheckboxRow(lineSection, 'Color bars based on previous close', currentSettings['Color bars based on previous close']); - addDualColorRow(lineSection, 'Body', currentSettings['Body'], currentSettings['Body-Up Color'], currentSettings['Body-Down Color'], 'Body-Up Color', 'Body-Down Color'); - addDualColorRow(lineSection, 'Borders', currentSettings['Borders'], currentSettings['Borders-Up Color'], currentSettings['Borders-Down Color'], 'Borders-Up Color', 'Borders-Down Color'); - addDualColorRow(lineSection, 'Wick', currentSettings['Wick'], currentSettings['Wick-Up Color'], currentSettings['Wick-Down Color'], 'Wick-Up Color', 'Wick-Down Color'); - } else if (seriesType === 'Bar') { - symbolTitle.textContent = 'BARS'; - lineSection.appendChild(symbolTitle); - addCheckboxRow(lineSection, 'Color bars based on previous close', currentSettings['Color bars based on previous close']); - addColorSwatchRow(lineSection, 'Up color', currentSettings['Bar Up Color'], 'Bar Up Color'); - addColorSwatchRow(lineSection, 'Down color', currentSettings['Bar Down Color'], 'Bar Down Color'); - } else if (seriesType === 'Line') { - symbolTitle.textContent = 'LINE'; - lineSection.appendChild(symbolTitle); - addColorSwatchRow(lineSection, 'Color', currentSettings['Line color'], 'Line color'); - addSelectRow(lineSection, 'Line style', ['Solid', 'Dotted', 'Dashed'], currentSettings['Line style']); - addNumberInputRow(lineSection, 'Line width', 'Line width', currentSettings['Line width'], 1, 4, 1, '', 'ts-input'); - } else if (seriesType === 'Area') { - symbolTitle.textContent = 'AREA'; - lineSection.appendChild(symbolTitle); - addColorSwatchRow(lineSection, 'Line color', currentSettings['Line color'], 'Line color'); - addNumberInputRow(lineSection, 'Line width', 'Line width', currentSettings['Line width'], 1, 4, 1, '', 'ts-input'); - addColorSwatchRow(lineSection, 'Fill 1', currentSettings['Area Fill Top'], 'Area Fill Top'); - addColorSwatchRow(lineSection, 'Fill 2', currentSettings['Area Fill Bottom'], 'Area Fill Bottom'); - } else if (seriesType === 'Baseline') { - symbolTitle.textContent = 'BASELINE'; - lineSection.appendChild(symbolTitle); - addNumberInputRow(lineSection, 'Base level', 'Baseline Level', currentSettings['Baseline Level'], null, null, null, '', 'ts-input'); - addColorSwatchRow(lineSection, 'Top line color', currentSettings['Baseline Top Line'], 'Baseline Top Line'); - addColorSwatchRow(lineSection, 'Bottom line color', currentSettings['Baseline Bottom Line'], 'Baseline Bottom Line'); - addColorSwatchRow(lineSection, 'Top area 1', currentSettings['Baseline Top Fill 1'], 'Baseline Top Fill 1'); - addColorSwatchRow(lineSection, 'Top area 2', currentSettings['Baseline Top Fill 2'], 'Baseline Top Fill 2'); - addColorSwatchRow(lineSection, 'Bottom area 1', currentSettings['Baseline Bottom Fill 1'], 'Baseline Bottom Fill 1'); - addColorSwatchRow(lineSection, 'Bottom area 2', currentSettings['Baseline Bottom Fill 2'], 'Baseline Bottom Fill 2'); - } else if (seriesType === 'Histogram') { - symbolTitle.textContent = 'COLUMNS'; - lineSection.appendChild(symbolTitle); - addCheckboxRow(lineSection, 'Color bars based on previous close', currentSettings['Color bars based on previous close']); - addColorSwatchRow(lineSection, 'Up color', currentSettings['Bar Up Color'], 'Bar Up Color'); - addColorSwatchRow(lineSection, 'Down color', currentSettings['Bar Down Color'], 'Bar Down Color'); - } else { - symbolTitle.textContent = seriesType.toUpperCase(); - lineSection.appendChild(symbolTitle); - addColorSwatchRow(lineSection, 'Color', currentSettings['Line color'], 'Line color'); - addNumberInputRow(lineSection, 'Line width', 'Line width', currentSettings['Line width'], 1, 4, 1, '', 'ts-input'); - } - - var modTitle = document.createElement('div'); - modTitle.className = 'tv-settings-section'; - modTitle.textContent = 'DATA MODIFICATION'; - lineSection.appendChild(modTitle); - - addSelectRow(lineSection, 'Session', ['Regular trading hours', 'Extended trading hours'], currentSettings['Session']); - addSelectRow(lineSection, 'Precision', ['Default', '0.1', '0.01', '0.001', '0.0001'], currentSettings['Precision']); - addSelectRow(lineSection, 'Timezone', ['UTC', 'Local'], currentSettings['Timezone']); - - // Ensure the default Symbol tab has visible content. - content.appendChild(paneSymbol); - - // Pane: Status line - var paneStatus = document.createElement('div'); - paneStatus.id = 'pane-status'; - paneStatus.className = 'tv-settings-content-pane'; - var statusSection = document.createElement('div'); - statusSection.className = 'tv-settings-section-body'; - paneStatus.appendChild(statusSection); - var statusTitle = document.createElement('div'); - statusTitle.className = 'tv-settings-title'; - statusTitle.textContent = 'SYMBOL'; - statusSection.appendChild(statusTitle); - - addCheckboxRow(statusSection, 'Logo', currentSettings['Logo']); - - // Title checkbox + inline description-mode dropdown (matches TradingView layout) - (function() { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - var lbl = document.createElement('label'); - lbl.textContent = 'Title'; - row.appendChild(lbl); - var ctrl = document.createElement('div'); - ctrl.className = 'ts-controls'; - var cb = document.createElement('input'); - cb.type = 'checkbox'; - cb.className = 'ts-checkbox'; - cb.checked = currentSettings['Title'] !== false; - cb.setAttribute('data-setting', 'Title'); - ctrl.appendChild(cb); - var sel = document.createElement('select'); - sel.className = 'ts-select'; - sel.setAttribute('data-setting', 'Description'); - var descOpts = ['Description', 'Ticker', 'Ticker and description']; - for (var di = 0; di < descOpts.length; di++) { - var o = document.createElement('option'); - o.value = descOpts[di]; - o.textContent = descOpts[di]; - if (descOpts[di] === (currentSettings['Description'] || 'Description')) o.selected = true; - sel.appendChild(o); - } - ctrl.appendChild(sel); - row.appendChild(ctrl); - statusSection.appendChild(row); - })(); - addCheckboxRow(statusSection, 'Chart values', currentSettings['Chart values']); - addCheckboxRow(statusSection, 'Bar change values', currentSettings['Bar change values']); - addCheckboxRow(statusSection, 'Volume', currentSettings['Volume']); - - var statusIndicTitle = document.createElement('div'); - statusIndicTitle.className = 'tv-settings-section'; - statusIndicTitle.textContent = 'INDICATORS'; - statusSection.appendChild(statusIndicTitle); - - addCheckboxRow(statusSection, 'Titles', currentSettings['Titles']); - - addIndentedCheckboxRow(statusSection, 'Inputs', currentSettings['Inputs']); - - addCheckboxRow(statusSection, 'Values', currentSettings['Values']); - addCheckboxSliderRow( - statusSection, - 'Background', - currentSettings['Background-Enabled'], - 'Background-Enabled', - currentSettings['Background-Opacity'], - 'Background-Opacity' - ); - - content.appendChild(paneStatus); - - // Pane: Scales and lines - COMPLETE IMPLEMENTATION - var paneScales = document.createElement('div'); - paneScales.id = 'pane-scales'; - paneScales.className = 'tv-settings-content-pane'; - var scalesSection = document.createElement('div'); - scalesSection.className = 'tv-settings-section-body'; - paneScales.appendChild(scalesSection); - - var scalePriceTitle = document.createElement('div'); - scalePriceTitle.className = 'tv-settings-section'; - scalePriceTitle.textContent = 'PRICE SCALE'; - scalesSection.appendChild(scalePriceTitle); - - addSelectRow(scalesSection, 'Scale modes (A and L)', ['Visible on mouse over', 'Hidden'], currentSettings['Scale modes (A and L)']); - - addCheckboxInputRow( - scalesSection, - 'Lock price to bar ratio', - currentSettings['Lock price to bar ratio'], - 'Lock price to bar ratio', - currentSettings['Lock price to bar ratio (value)'], - 'Lock price to bar ratio (value)' - ); - - addSelectRow(scalesSection, 'Scales placement', ['Auto', 'Left', 'Right'], currentSettings['Scales placement']); - - var scalePriceLabelsTitle = document.createElement('div'); - scalePriceLabelsTitle.className = 'tv-settings-section'; - scalePriceLabelsTitle.textContent = 'PRICE LABELS & LINES'; - scalesSection.appendChild(scalePriceLabelsTitle); - - addCheckboxRow(scalesSection, 'No overlapping labels', currentSettings['No overlapping labels']); - addCheckboxRow(scalesSection, 'Plus button', currentSettings['Plus button']); - addCheckboxRow(scalesSection, 'Countdown to bar close', currentSettings['Countdown to bar close']); - - addSelectColorRow( - scalesSection, - 'Symbol', - ['Value, line', 'Line', 'Label', 'Hidden'], - currentSettings['Symbol'], - 'Symbol', - currentSettings['Symbol color'], - 'Symbol color' - ); - - addSelectRow( - scalesSection, - 'Value according to scale', - ['Value according to scale', 'Percent change'], - currentSettings['Value according to scale'] || currentSettings['Value according to sc...'] - ); - addSelectRow(scalesSection, 'Indicators and financials', ['Value', 'Change', 'Percent change'], currentSettings['Indicators and financials']); - - addSelectColorRow( - scalesSection, - 'High and low', - ['Hidden', 'Values only', 'Values and lines'], - currentSettings['High and low'], - 'High and low', - currentSettings['High and low color'], - 'High and low color' - ); - - var scaleTimeTitle = document.createElement('div'); - scaleTimeTitle.className = 'tv-settings-section'; - scaleTimeTitle.textContent = 'TIME SCALE'; - scalesSection.appendChild(scaleTimeTitle); - - addCheckboxRow(scalesSection, 'Day of week on labels', currentSettings['Day of week on labels']); - addSelectRow(scalesSection, 'Date format', ['Mon 29 Sep \'97', 'MM/DD/YY', 'DD/MM/YY', 'YYYY-MM-DD'], currentSettings['Date format']); - addSelectRow(scalesSection, 'Time hours format', ['24-hours', '12-hours'], currentSettings['Time hours format']); - - content.appendChild(paneScales); - - // Pane: Canvas - COMPLETE IMPLEMENTATION - var paneCanvas = document.createElement('div'); - paneCanvas.id = 'pane-canvas'; - paneCanvas.className = 'tv-settings-content-pane'; - var canvasSection = document.createElement('div'); - canvasSection.className = 'tv-settings-section-body'; - paneCanvas.appendChild(canvasSection); - - var canvasBasicTitle = document.createElement('div'); - canvasBasicTitle.className = 'tv-settings-section'; - canvasBasicTitle.textContent = 'CHART BASIC STYLES'; - canvasSection.appendChild(canvasBasicTitle); - - addSelectColorRow(canvasSection, 'Background', ['Solid', 'Gradient'], currentSettings['Background'], 'Background', currentSettings['Background-Color'], 'Background-Color'); - addSelectColorRow(canvasSection, 'Grid lines', ['Vert and horz', 'Vert only', 'Horz only', 'Hidden'], currentSettings['Grid lines'], 'Grid lines', currentSettings['Grid-Color'], 'Grid-Color'); - addColorSwatchRow(canvasSection, 'Pane separators', currentSettings['Pane-Separators-Color'], 'Pane-Separators-Color'); - addColorRow(canvasSection, 'Crosshair', currentSettings['Crosshair-Enabled'], currentSettings['Crosshair-Color']); - addSelectColorRow(canvasSection, 'Watermark', ['Hidden', 'Visible'], currentSettings['Watermark'], 'Watermark', currentSettings['Watermark-Color'], 'Watermark-Color'); - - var canvasScalesTitle = document.createElement('div'); - canvasScalesTitle.className = 'tv-settings-section'; - canvasScalesTitle.textContent = 'SCALES'; - canvasSection.appendChild(canvasScalesTitle); - - addColorRow(canvasSection, 'Text', null, currentSettings['Text-Color']); - addColorRow(canvasSection, 'Lines', null, currentSettings['Lines-Color']); - - var canvasButtonsTitle = document.createElement('div'); - canvasButtonsTitle.className = 'tv-settings-section'; - canvasButtonsTitle.textContent = 'BUTTONS'; - canvasSection.appendChild(canvasButtonsTitle); - - addSelectRow(canvasSection, 'Navigation', ['Visible on mouse over', 'Hidden'], currentSettings['Navigation']); - addSelectRow(canvasSection, 'Pane', ['Visible on mouse over', 'Hidden'], currentSettings['Pane']); - - var canvasMarginsTitle = document.createElement('div'); - canvasMarginsTitle.className = 'tv-settings-section'; - canvasMarginsTitle.textContent = 'MARGINS'; - canvasSection.appendChild(canvasMarginsTitle); - - addNumberInputRow(canvasSection, 'Top', 'Margin Top', currentSettings['Margin Top'], 0, 100, 1, '%', 'ts-input ts-input-sm'); - addNumberInputRow(canvasSection, 'Bottom', 'Margin Bottom', currentSettings['Margin Bottom'], 0, 100, 1, '%', 'ts-input ts-input-sm'); - - content.appendChild(paneCanvas); - - // Footer - var footer = document.createElement('div'); - footer.className = 'tv-settings-footer'; - var originalSettings = JSON.parse(JSON.stringify(currentSettings || {})); - - function collectSettingsFromPanel() { - var settings = {}; - var allControls = panel.querySelectorAll('[data-setting]'); - allControls.forEach(function(ctrl) { - var settingKey = ctrl.getAttribute('data-setting'); - if (!settingKey) return; - - var value; - if (ctrl.tagName === 'SELECT') { - value = ctrl.value; - } else if (ctrl.tagName === 'INPUT') { - if (ctrl.type === 'checkbox') { - value = ctrl.checked; - } else if (ctrl.type === 'number' || ctrl.type === 'text' || ctrl.type === 'range' || ctrl.type === 'hidden') { - value = ctrl.value; - } - } else if (ctrl.classList.contains('ts-swatch')) { - value = ctrl.style.background || ctrl.style.backgroundColor || '#aeb4c2'; - } - - if (value !== undefined) settings[settingKey] = value; - }); - - if (entry && entry._chartPrefs) { - if (entry._chartPrefs.logScale !== undefined) settings['Log scale'] = !!entry._chartPrefs.logScale; - if (entry._chartPrefs.autoScale !== undefined) settings['Auto Scale'] = !!entry._chartPrefs.autoScale; - } - return settings; - } - - function syncLegendPreview(settings) { - var legendBox = _tvScopedById(chartId, 'tvchart-legend-box'); - if (!legendBox) return; - var titleVisible = settings['Title'] !== false; - legendBox.style.color = settings['Text-Color'] || ''; - - var titleNode = _tvScopedById(chartId, 'tvchart-legend-title'); - if (titleNode) titleNode.style.display = titleVisible ? 'inline-flex' : 'none'; - } - - function scheduleSettingsPreview() { - if (!entry || !panel) return; - try { - var previewSettings = collectSettingsFromPanel(); - _tvApplySettingsToChart(chartId, entry, previewSettings); - syncLegendPreview(previewSettings); - } catch (previewErr) { - console.warn('Settings preview error:', previewErr); - } - } - - function persistSettings(settings) { - if (!entry._chartPrefs) entry._chartPrefs = {}; - entry._chartPrefs.settings = settings; - entry._chartPrefs.colorBarsBasedOnPrevClose = !!settings['Color bars based on previous close']; - entry._chartPrefs.bodyVisible = settings['Body'] !== false; - entry._chartPrefs.bodyUpColor = settings['Body-Up Color'] || _cssVar('--pywry-tvchart-up', ''); - entry._chartPrefs.bodyDownColor = settings['Body-Down Color'] || _cssVar('--pywry-tvchart-down', ''); - entry._chartPrefs.bodyUpOpacity = _tvToNumber(settings['Body-Up Color-Opacity'], _tvToNumber(settings['Body-Opacity'], 100)); - entry._chartPrefs.bodyDownOpacity = _tvToNumber(settings['Body-Down Color-Opacity'], _tvToNumber(settings['Body-Opacity'], 100)); - entry._chartPrefs.bodyOpacity = _tvToNumber(settings['Body-Opacity'], 100); - entry._chartPrefs.bordersVisible = settings['Borders'] !== false; - entry._chartPrefs.borderUpColor = settings['Borders-Up Color'] || _cssVar('--pywry-tvchart-border-up', ''); - entry._chartPrefs.borderDownColor = settings['Borders-Down Color'] || _cssVar('--pywry-tvchart-border-down', ''); - entry._chartPrefs.borderUpOpacity = _tvToNumber(settings['Borders-Up Color-Opacity'], _tvToNumber(settings['Borders-Opacity'], 100)); - entry._chartPrefs.borderDownOpacity = _tvToNumber(settings['Borders-Down Color-Opacity'], _tvToNumber(settings['Borders-Opacity'], 100)); - entry._chartPrefs.borderOpacity = _tvToNumber(settings['Borders-Opacity'], 100); - entry._chartPrefs.wickVisible = settings['Wick'] !== false; - entry._chartPrefs.wickUpColor = settings['Wick-Up Color'] || _cssVar('--pywry-tvchart-wick-up', ''); - entry._chartPrefs.wickDownColor = settings['Wick-Down Color'] || _cssVar('--pywry-tvchart-wick-down', ''); - entry._chartPrefs.wickUpOpacity = _tvToNumber(settings['Wick-Up Color-Opacity'], _tvToNumber(settings['Wick-Opacity'], 100)); - entry._chartPrefs.wickDownOpacity = _tvToNumber(settings['Wick-Down Color-Opacity'], _tvToNumber(settings['Wick-Opacity'], 100)); - entry._chartPrefs.wickOpacity = _tvToNumber(settings['Wick-Opacity'], 100); - // Bar-specific - entry._chartPrefs.barUpColor = settings['Bar Up Color'] || ''; - entry._chartPrefs.barDownColor = settings['Bar Down Color'] || ''; - // Area-specific - entry._chartPrefs.areaFillTop = settings['Area Fill Top'] || ''; - entry._chartPrefs.areaFillBottom = settings['Area Fill Bottom'] || ''; - // Baseline-specific - entry._chartPrefs.baselineLevel = _tvToNumber(settings['Baseline Level'], 0); - entry._chartPrefs.baselineTopLine = settings['Baseline Top Line'] || ''; - entry._chartPrefs.baselineBottomLine = settings['Baseline Bottom Line'] || ''; - entry._chartPrefs.baselineTopFill1 = settings['Baseline Top Fill 1'] || ''; - entry._chartPrefs.baselineTopFill2 = settings['Baseline Top Fill 2'] || ''; - entry._chartPrefs.baselineBottomFill1 = settings['Baseline Bottom Fill 1'] || ''; - entry._chartPrefs.baselineBottomFill2 = settings['Baseline Bottom Fill 2'] || ''; - entry._chartPrefs.session = settings['Session'] || 'Regular trading hours'; - entry._chartPrefs.precision = settings['Precision'] || 'Default'; - entry._chartPrefs.timezone = settings['Timezone'] || 'UTC'; - entry._chartPrefs.description = settings['Description'] || 'Description'; - entry._chartPrefs.showLogo = settings['Logo'] !== false; - entry._chartPrefs.showTitle = settings['Title'] !== false; - entry._chartPrefs.showChartValues = settings['Chart values'] !== false; - entry._chartPrefs.showBarChange = settings['Bar change values'] !== false; - entry._chartPrefs.showVolume = settings['Volume'] !== false; - entry._chartPrefs.showIndicatorTitles = settings['Titles'] !== false; - entry._chartPrefs.showIndicatorInputs = settings['Inputs'] !== false; - entry._chartPrefs.showIndicatorValues = settings['Values'] !== false; - if (settings['Log scale'] !== undefined) entry._chartPrefs.logScale = !!settings['Log scale']; - if (settings['Auto Scale'] !== undefined) entry._chartPrefs.autoScale = !!settings['Auto Scale']; - entry._chartPrefs.backgroundEnabled = settings['Background-Enabled'] !== false; - entry._chartPrefs.backgroundOpacity = _tvToNumber(settings['Background-Opacity'], 50); - entry._chartPrefs.lineColor = settings['Line color'] || _cssVar('--pywry-tvchart-up', ''); - entry._chartPrefs.scaleModesVisibility = settings['Scale modes (A and L)'] || 'Visible on mouse over'; - entry._chartPrefs.lockPriceToBarRatio = !!settings['Lock price to bar ratio']; - entry._chartPrefs.lockPriceToBarRatioValue = _tvToNumber(settings['Lock price to bar ratio (value)'], 0.018734); - entry._chartPrefs.scalesPlacement = settings['Scales placement'] || 'Auto'; - entry._chartPrefs.noOverlappingLabels = settings['No overlapping labels'] !== false; - entry._chartPrefs.plusButton = !!settings['Plus button']; - entry._chartPrefs.countdownToBarClose = !!settings['Countdown to bar close']; - entry._chartPrefs.symbolMode = settings['Symbol'] || 'Value, line'; - entry._chartPrefs.symbolColor = settings['Symbol color'] || _cssVar('--pywry-tvchart-up', ''); - entry._chartPrefs.valueAccordingToScale = settings['Value according to scale'] || settings['Value according to sc...'] || 'Value according to scale'; - entry._chartPrefs.indicatorsAndFinancials = settings['Indicators and financials'] || 'Value'; - entry._chartPrefs.highAndLow = settings['High and low'] || 'Hidden'; - entry._chartPrefs.highAndLowColor = settings['High and low color'] || _cssVar('--pywry-tvchart-down'); - entry._chartPrefs.dayOfWeekOnLabels = settings['Day of week on labels'] !== false; - entry._chartPrefs.dateFormat = settings['Date format'] || 'Mon 29 Sep \'97'; - entry._chartPrefs.timeHoursFormat = settings['Time hours format'] || '24-hours'; - entry._chartPrefs.gridVisible = settings['Grid lines'] !== 'Hidden'; - entry._chartPrefs.gridMode = settings['Grid lines'] || 'Vert and horz'; - entry._chartPrefs.gridColor = settings['Grid-Color'] || _cssVar('--pywry-tvchart-grid'); - entry._chartPrefs.paneSeparatorsColor = settings['Pane-Separators-Color'] || _cssVar('--pywry-tvchart-grid'); - entry._chartPrefs.backgroundColor = settings['Background-Color'] || _cssVar('--pywry-tvchart-bg'); - entry._chartPrefs.crosshairEnabled = settings['Crosshair-Enabled'] === true; - entry._chartPrefs.crosshairColor = settings['Crosshair-Color'] || _cssVar('--pywry-tvchart-crosshair-color'); - entry._chartPrefs.watermarkVisible = settings['Watermark'] === 'Visible'; - entry._chartPrefs.watermarkColor = settings['Watermark-Color'] || 'rgba(255,255,255,0.08)'; - entry._chartPrefs.textColor = settings['Text-Color'] || _cssVar('--pywry-tvchart-text'); - entry._chartPrefs.linesColor = settings['Lines-Color'] || _cssVar('--pywry-tvchart-grid'); - entry._chartPrefs.navigation = settings['Navigation'] || 'Visible on mouse over'; - entry._chartPrefs.pane = settings['Pane'] || 'Visible on mouse over'; - entry._chartPrefs.marginTop = _tvToNumber(settings['Margin Top'], 10); - entry._chartPrefs.marginBottom = _tvToNumber(settings['Margin Bottom'], 8); - } - - function applySettingsToPanel(nextSettings) { - if (!panel || !nextSettings || typeof nextSettings !== 'object') return; - - var allControls = panel.querySelectorAll('[data-setting]'); - allControls.forEach(function(ctrl) { - var key = ctrl.getAttribute('data-setting'); - if (!key || nextSettings[key] === undefined) return; - var value = nextSettings[key]; - if (ctrl.tagName === 'SELECT') { - ctrl.value = String(value); - } else if (ctrl.tagName === 'INPUT') { - if (ctrl.type === 'checkbox') { - ctrl.checked = !!value; - } else { - ctrl.value = String(value); - } - } - }); - - var swatches = panel.querySelectorAll('.ts-swatch[data-setting]'); - swatches.forEach(function(swatch) { - var key = swatch.getAttribute('data-setting'); - if (!key || nextSettings[key] === undefined) return; - var colorVal = nextSettings[key]; - var opacityKey = key + '-Opacity'; - if (nextSettings[opacityKey] !== undefined) { - syncSettingsSwatch(swatch, colorVal, nextSettings[opacityKey]); - } else { - var nextHex = _tvColorToHex(colorVal || swatch.style.background || '#aeb4c2', '#aeb4c2'); - swatch.dataset.baseColor = nextHex; - swatch.style.background = nextHex; - } - - var swParent = swatch.parentNode; - if (swParent && swParent.querySelector) { - var colorInput = swParent.querySelector('input.ts-hidden-color-input[type="color"]'); - if (colorInput) { - colorInput.value = _tvColorToHex(swatch.dataset.baseColor || swatch.style.background, '#aeb4c2'); - } - } - }); - - var sliders = panel.querySelectorAll('.tv-settings-slider'); - sliders.forEach(function(slider) { - var out = slider.parentNode && slider.parentNode.querySelector('.tv-settings-slider-value'); - if (out) out.textContent = slider.value + '%'; - }); - - scheduleSettingsPreview(); - } - - var factoryTemplate = _tvBuildCurrentSettings({ - chartId: chartId, - theme: entry && entry.theme, - _chartPrefs: {}, - volumeMap: (entry && entry.volumeMap && entry.volumeMap.main) ? { main: {} } : {}, - seriesMap: {}, - }); - - function cloneSettings(settingsObj) { - try { - return JSON.parse(JSON.stringify(settingsObj || {})); - } catch (e) { - return {}; - } - } - - function getResolvedTemplateId() { - var preferred = _tvLoadSettingsDefaultTemplateId(chartId); - if (preferred === 'custom' && !_tvLoadCustomSettingsTemplate(chartId)) { - _tvSaveSettingsDefaultTemplateId('factory', chartId); - return 'factory'; - } - return preferred; - } - - var templateWrap = document.createElement('div'); - templateWrap.className = 'tv-settings-template-wrap'; - var templateBtn = document.createElement('button'); - templateBtn.className = 'ts-btn-template'; - templateBtn.type = 'button'; - templateBtn.textContent = 'Template'; - templateWrap.appendChild(templateBtn); - - var templateMenu = null; - - function closeTemplateMenu() { - if (templateMenu && templateMenu.parentNode) { - templateMenu.parentNode.removeChild(templateMenu); - } - templateMenu = null; - } - - function updateTemplateDefaultBadges(menuEl) { - if (!menuEl) return; - var activeId = getResolvedTemplateId(); - var defaultItems = menuEl.querySelectorAll('.tv-settings-template-item[data-template-default]'); - defaultItems.forEach(function(item) { - var itemId = item.getAttribute('data-template-default'); - var isActive = itemId === activeId; - item.classList.toggle('active-default', isActive); - var badge = item.querySelector('.tv-settings-template-badge'); - if (badge) badge.style.visibility = isActive ? 'visible' : 'hidden'; - }); - } - - function openTemplateMenu() { - closeTemplateMenu(); - var customTemplate = _tvLoadCustomSettingsTemplate(chartId); - var activeDefaultId = getResolvedTemplateId(); - - var menu = document.createElement('div'); - menu.className = 'tv-settings-template-menu'; - - var applyItem = document.createElement('button'); - applyItem.type = 'button'; - applyItem.className = 'tv-settings-template-item'; - applyItem.textContent = 'Apply default template'; - applyItem.addEventListener('click', function() { - var resolvedDefault = getResolvedTemplateId(); - var chosen = resolvedDefault === 'custom' ? (_tvLoadCustomSettingsTemplate(chartId) || factoryTemplate) : factoryTemplate; - applySettingsToPanel(cloneSettings(chosen)); - _tvNotify('success', 'Template applied.', 'Settings', chartId); - closeTemplateMenu(); - }); - menu.appendChild(applyItem); - - var sep = document.createElement('div'); - sep.className = 'tv-settings-template-sep'; - menu.appendChild(sep); - - function makeDefaultItem(label, templateId, disabled) { - var item = document.createElement('button'); - item.type = 'button'; - item.className = 'tv-settings-template-item'; - item.setAttribute('data-template-default', templateId); - if (disabled) item.disabled = true; - var text = document.createElement('span'); - text.textContent = label; - item.appendChild(text); - var badge = document.createElement('span'); - badge.className = 'tv-settings-template-badge'; - badge.textContent = 'default'; - badge.style.visibility = templateId === activeDefaultId ? 'visible' : 'hidden'; - item.appendChild(badge); - item.addEventListener('click', function() { - _tvSaveSettingsDefaultTemplateId(templateId, chartId); - updateTemplateDefaultBadges(menu); - }); - return item; - } - - menu.appendChild(makeDefaultItem('Use TradingView defaults', 'factory', false)); - menu.appendChild(makeDefaultItem('Use saved custom default', 'custom', !customTemplate)); - - var saveCurrent = document.createElement('button'); - saveCurrent.type = 'button'; - saveCurrent.className = 'tv-settings-template-item'; - saveCurrent.textContent = 'Save current as custom default'; - saveCurrent.addEventListener('click', function() { - var settings = collectSettingsFromPanel(); - _tvSaveCustomSettingsTemplate(cloneSettings(settings), chartId); - _tvSaveSettingsDefaultTemplateId('custom', chartId); - updateTemplateDefaultBadges(menu); - var customDefaultRow = menu.querySelector('[data-template-default="custom"]'); - if (customDefaultRow) customDefaultRow.disabled = false; - _tvNotify('success', 'Saved custom default template.', 'Settings', chartId); - }); - menu.appendChild(saveCurrent); - - var clearCustom = document.createElement('button'); - clearCustom.type = 'button'; - clearCustom.className = 'tv-settings-template-item'; - clearCustom.textContent = 'Clear custom default'; - clearCustom.disabled = !customTemplate; - clearCustom.addEventListener('click', function() { - _tvClearCustomSettingsTemplate(chartId); - if (_tvLoadSettingsDefaultTemplateId(chartId) === 'custom') { - _tvSaveSettingsDefaultTemplateId('factory', chartId); - } - var customDefaultRow = menu.querySelector('[data-template-default="custom"]'); - if (customDefaultRow) customDefaultRow.disabled = true; - clearCustom.disabled = true; - updateTemplateDefaultBadges(menu); - _tvNotify('success', 'Cleared custom default template.', 'Settings', chartId); - }); - menu.appendChild(clearCustom); - - templateMenu = menu; - templateWrap.appendChild(menu); - updateTemplateDefaultBadges(menu); - } - - templateBtn.addEventListener('click', function(e) { - e.preventDefault(); - e.stopPropagation(); - if (templateMenu) { - closeTemplateMenu(); - } else { - openTemplateMenu(); - } - }); - - overlay.addEventListener('mousedown', function(e) { - if (templateMenu && templateWrap && !templateWrap.contains(e.target)) { - closeTemplateMenu(); - } - }); - - footer.appendChild(templateWrap); - - var cancelBtn = document.createElement('button'); - cancelBtn.className = 'ts-btn-cancel'; - cancelBtn.addEventListener('click', function() { - closeTemplateMenu(); - _tvApplySettingsToChart(chartId, entry, originalSettings); - syncLegendPreview(originalSettings); - _tvHideChartSettings(); - }); - cancelBtn.textContent = 'Cancel'; - footer.appendChild(cancelBtn); - - var okBtn = document.createElement('button'); - okBtn.className = 'ts-btn-ok'; - okBtn.addEventListener('click', function() { - if (!entry || !panel) return; - try { - closeTemplateMenu(); - var settings = collectSettingsFromPanel(); - persistSettings(settings); - _tvApplySettingsToChart(chartId, entry, settings); - syncLegendPreview(settings); - - // Sync session mode from chart settings to bottom bar - var sessionSetting = settings['Session'] || 'Extended trading hours'; - var newMode = sessionSetting.indexOf('Regular') >= 0 ? 'RTH' : 'ETH'; - if (entry._sessionMode !== newMode) { - entry._sessionMode = newMode; - var sBtn = document.getElementById('tvchart-session-btn'); - if (sBtn) { - var sLbl = sBtn.querySelector('.tvchart-bottom-btn-label'); - if (sLbl) sLbl.textContent = newMode; - sBtn.classList.toggle('active', newMode === 'RTH'); - } - } - - // Re-apply bottom bar timezone (takes precedence over chart settings' UTC/Local) - if (typeof _tvGetActiveTimezone === 'function' && typeof _tvApplyTimezoneToChart === 'function') { - var activeTz = _tvGetActiveTimezone(); - if (entry._selectedTimezone && entry._selectedTimezone !== 'exchange') { - _tvApplyTimezoneToChart(entry, activeTz); - } - } - - console.log('Chart settings applied:', settings); - } catch(err) { - console.warn('Settings apply error:', err); - } - _tvHideChartSettings(); - }); - okBtn.textContent = 'Ok'; - footer.appendChild(okBtn); - - panel.appendChild(footer); - panel.addEventListener('input', function(e) { - var target = e.target; - if (!target) return; - if (target.tagName === 'INPUT' || target.tagName === 'SELECT') scheduleSettingsPreview(); - }); - panel.addEventListener('change', function(e) { - var target = e.target; - if (!target) return; - if (target.tagName === 'INPUT' || target.tagName === 'SELECT') scheduleSettingsPreview(); - }); - - _tvOverlayContainer(chartId).appendChild(overlay); -} - -// --------------------------------------------------------------------------- -// Normalize a raw symbol item (from search/resolve) into a consistent shape. -// Shared by compare panel and indicator symbol picker. -// --------------------------------------------------------------------------- -function _tvNormalizeSymbolInfo(item) { - if (!item || typeof item !== 'object') return null; - var symbol = String(item.symbol || item.ticker || '').trim(); - if (!symbol) return null; - var ticker = String(item.ticker || '').trim().toUpperCase(); - if (!ticker) { - ticker = symbol.indexOf(':') >= 0 ? symbol.split(':').pop().trim().toUpperCase() : symbol.toUpperCase(); - } - var fullName = String(item.fullName || item.full_name || '').trim(); - var description = String(item.description || '').trim(); - var exchange = String(item.exchange || item.listedExchange || item.listed_exchange || '').trim(); - var symbolType = String(item.type || item.symbolType || item.symbol_type || '').trim(); - var currency = String(item.currency || item.currencyCode || item.currency_code || '').trim(); - return { - symbol: symbol, - ticker: ticker, - displaySymbol: ticker || symbol, - requestSymbol: ticker || symbol, - fullName: fullName, - description: description, - exchange: exchange, - type: symbolType, - currency: currency, - pricescale: item.pricescale, - minmov: item.minmov, - timezone: item.timezone, - session: item.session, - }; -} - -function _tvShowComparePanel(chartId, options) { - options = options || {}; - _tvHideComparePanel(); - var resolved = _tvResolveChartEntry(chartId); - if (!resolved || !resolved.entry) return; - chartId = resolved.chartId; - var entry = resolved.entry; - var ds = window.__PYWRY_DRAWINGS__[chartId] || _tvEnsureDrawingLayer(chartId); - if (!ds) return; - - if (!entry._compareSymbols) entry._compareSymbols = {}; - if (!entry._compareLabels) entry._compareLabels = {}; - - var overlay = document.createElement('div'); - overlay.className = 'tv-settings-overlay'; - _compareOverlay = overlay; - _compareOverlayChartId = chartId; - _tvSetChartInteractionLocked(chartId, true); - _tvRefreshLegendVisibility(); - overlay.addEventListener('click', function(e) { - if (e.target === overlay) _tvHideComparePanel(); - }); - overlay.addEventListener('mousedown', function(e) { e.stopPropagation(); }); - overlay.addEventListener('wheel', function(e) { e.stopPropagation(); }); - - var panel = document.createElement('div'); - panel.className = 'tv-compare-panel'; - overlay.appendChild(panel); - - // Header - var header = document.createElement('div'); - header.className = 'tv-compare-header'; - var title = document.createElement('h3'); - title.textContent = 'Compare symbol'; - header.appendChild(title); - var closeBtn = document.createElement('button'); - closeBtn.className = 'tv-settings-close'; - closeBtn.innerHTML = ''; - closeBtn.addEventListener('click', function() { _tvHideComparePanel(); }); - header.appendChild(closeBtn); - panel.appendChild(header); - - // Search row - var searchRow = document.createElement('div'); - searchRow.className = 'tv-compare-search-row'; - var searchIcon = document.createElement('span'); - searchIcon.className = 'tv-compare-search-icon'; - searchIcon.innerHTML = ''; - searchRow.appendChild(searchIcon); - var searchInput = document.createElement('input'); - searchInput.type = 'text'; - searchInput.className = 'tv-compare-search-input'; - searchInput.placeholder = 'Search'; - searchInput.autocomplete = 'off'; - searchInput.spellcheck = false; - searchRow.appendChild(searchInput); - var addBtn = document.createElement('button'); - addBtn.type = 'button'; - addBtn.className = 'tv-compare-add-btn'; - addBtn.innerHTML = ''; - addBtn.title = 'Add symbol'; - searchRow.appendChild(addBtn); - panel.appendChild(searchRow); - - // Filter row — exchange and type dropdowns from datafeed config - var filterRow = document.createElement('div'); - filterRow.className = 'tv-symbol-search-filters'; - - var exchangeSelect = document.createElement('select'); - exchangeSelect.className = 'tv-symbol-search-filter-select'; - var exchangeDefault = document.createElement('option'); - exchangeDefault.value = ''; - exchangeDefault.textContent = 'All Exchanges'; - exchangeSelect.appendChild(exchangeDefault); - - var typeSelect = document.createElement('select'); - typeSelect.className = 'tv-symbol-search-filter-select'; - var typeDefault = document.createElement('option'); - typeDefault.value = ''; - typeDefault.textContent = 'All Types'; - typeSelect.appendChild(typeDefault); - - var cfg = entry._datafeedConfig || {}; - var exchanges = cfg.exchanges || []; - for (var ei = 0; ei < exchanges.length; ei++) { - if (!exchanges[ei].value) continue; - var opt = document.createElement('option'); - opt.value = exchanges[ei].value; - opt.textContent = exchanges[ei].name || exchanges[ei].value; - exchangeSelect.appendChild(opt); - } - var symTypes = cfg.symbols_types || cfg.symbolsTypes || []; - for (var ti = 0; ti < symTypes.length; ti++) { - if (!symTypes[ti].value) continue; - var topt = document.createElement('option'); - topt.value = symTypes[ti].value; - topt.textContent = symTypes[ti].name || symTypes[ti].value; - typeSelect.appendChild(topt); - } - - filterRow.appendChild(exchangeSelect); - filterRow.appendChild(typeSelect); - panel.appendChild(filterRow); - - exchangeSelect.addEventListener('change', function() { - if ((searchInput.value || '').trim()) requestSearch(searchInput.value); - }); - typeSelect.addEventListener('change', function() { - if ((searchInput.value || '').trim()) requestSearch(searchInput.value); - }); - - var searchResults = []; - var selectedResult = null; - var pendingSearchRequestId = null; - var searchDebounce = null; - var searchResultLimit = Math.max(3, Math.min(20, Number(window.__PYWRY_TVCHART_COMPARE_RESULT_LIMIT__ || 6) || 6)); - - var resultsArea = document.createElement('div'); - resultsArea.className = 'tv-compare-results'; - panel.appendChild(resultsArea); - - function isSearchMode() { - return String(searchInput.value || '').trim().length > 0; - } - - function syncCompareSectionsVisibility() { - var searching = isSearchMode(); - resultsArea.style.display = searching ? '' : 'none'; - listArea.style.display = searching ? 'none' : ''; - } - - function _tvSymbolCaption(info) { - var parts = []; - if (info.exchange) parts.push(info.exchange); - if (info.type) parts.push(info.type); - if (info.currency) parts.push(info.currency); - return parts.join(' · '); - } - - function renderSearchResults() { - resultsArea.innerHTML = ''; - resultsArea.style.overflowY = 'hidden'; - resultsArea.style.maxHeight = (searchResultLimit * 84) + 'px'; - if (!searchResults.length) { - if (isSearchMode()) { - var emptySearch = document.createElement('div'); - emptySearch.className = 'tv-compare-search-empty'; - emptySearch.textContent = 'No symbols found'; - resultsArea.appendChild(emptySearch); - } - syncCompareSectionsVisibility(); - return; - } - var list = document.createElement('div'); - list.className = 'tv-compare-results-list'; - for (var i = 0; i < Math.min(searchResults.length, searchResultLimit); i++) { - (function(info) { - var row = document.createElement('div'); - row.className = 'tv-compare-result-row'; - - var identity = document.createElement('div'); - identity.className = 'tv-compare-result-identity'; - - var badge = document.createElement('div'); - badge.className = 'tv-compare-result-badge'; - badge.textContent = (info.symbol || '?').slice(0, 1); - identity.appendChild(badge); - - var copy = document.createElement('div'); - copy.className = 'tv-compare-result-copy'; - - var top = document.createElement('div'); - top.className = 'tv-compare-result-top'; - - var symbol = document.createElement('span'); - symbol.className = 'tv-compare-result-symbol'; - symbol.textContent = info.displaySymbol || info.symbol; - top.appendChild(symbol); - - var caption = _tvSymbolCaption(info); - if (caption) { - var meta = document.createElement('span'); - meta.className = 'tv-compare-result-meta'; - meta.textContent = caption; - top.appendChild(meta); - } - - copy.appendChild(top); - - var detail = info.fullName || info.description; - if (detail) { - var sub = document.createElement('div'); - sub.className = 'tv-compare-result-sub'; - sub.textContent = detail; - copy.appendChild(sub); - } - - identity.appendChild(copy); - row.appendChild(identity); - - var actions = document.createElement('div'); - actions.className = 'tv-compare-result-actions'; - - function makeAction(label, mode, primary) { - var btn = document.createElement('button'); - btn.type = 'button'; - btn.className = primary - ? 'tv-compare-result-action tv-compare-result-action-primary' - : 'tv-compare-result-action'; - btn.textContent = label; - btn.addEventListener('click', function(e) { - e.preventDefault(); - e.stopPropagation(); - selectedResult = info; - searchInput.value = info.symbol; - addCompare(info, mode); - }); - return btn; - } - - actions.appendChild(makeAction('Same % scale', 'same_percent', true)); - actions.appendChild(makeAction('New price scale', 'new_price_scale', false)); - actions.appendChild(makeAction('New pane', 'new_pane', false)); - row.appendChild(actions); - - row.addEventListener('click', function() { - selectedResult = info; - searchInput.value = info.symbol; - addCompare(info, 'same_percent'); - }); - - list.appendChild(row); - })(searchResults[i]); - } - resultsArea.appendChild(list); - syncCompareSectionsVisibility(); - } - - function requestSearch(query) { - query = String(query || '').trim(); - var normalizedQuery = query.toUpperCase(); - if (normalizedQuery.indexOf(':') >= 0) { - normalizedQuery = normalizedQuery.split(':').pop().trim(); - } - searchResults = []; - selectedResult = null; - renderSearchResults(); - if (!normalizedQuery || normalizedQuery.length < 1) return; - - var exch = exchangeSelect.value || ''; - var stype = typeSelect.value || ''; - - pendingSearchRequestId = _tvRequestDatafeedSearch(chartId, normalizedQuery, searchResultLimit, function(resp) { - if (!resp || resp.requestId !== pendingSearchRequestId) return; - pendingSearchRequestId = null; - if (resp.error) { - searchResults = []; - renderSearchResults(); - return; - } - var items = Array.isArray(resp.items) ? resp.items : []; - var normalized = []; - for (var idx = 0; idx < items.length; idx++) { - var parsed = _tvNormalizeSymbolInfo(items[idx]); - if (parsed) normalized.push(parsed); - } - searchResults = normalized; - renderSearchResults(); - }, exch, stype); - } - - // Symbols list area - var listArea = document.createElement('div'); - listArea.className = 'tv-compare-list'; - - function renderSymbolList() { - listArea.innerHTML = ''; - var compareKeys = Object.keys(entry._compareSymbols || {}).filter(function(sid) { - return !(entry._indicatorSourceSeries && entry._indicatorSourceSeries[sid]); - }); - if (compareKeys.length === 0) { - var empty = document.createElement('div'); - empty.className = 'tv-compare-empty'; - var emptyIcon = document.createElement('div'); - emptyIcon.className = 'tv-compare-empty-icon'; - emptyIcon.innerHTML = ''; - empty.appendChild(emptyIcon); - var emptyText = document.createElement('div'); - emptyText.className = 'tv-compare-empty-text'; - emptyText.textContent = 'No symbols here yet \u2014 why not add some?'; - empty.appendChild(emptyText); - listArea.appendChild(empty); - } else { - compareKeys.forEach(function(seriesId) { - var symbolName = entry._compareLabels[seriesId] || _tvDisplayLabelFromSymbolInfo( - entry._compareSymbolInfo && entry._compareSymbolInfo[seriesId] ? entry._compareSymbolInfo[seriesId] : null, - entry._compareSymbols[seriesId] || seriesId - ); - var row = document.createElement('div'); - row.className = 'tv-compare-symbol-row'; - - var dot = document.createElement('span'); - dot.className = 'tv-compare-symbol-dot'; - row.appendChild(dot); - - var lbl = document.createElement('span'); - lbl.className = 'tv-compare-symbol-label'; - lbl.textContent = symbolName; - row.appendChild(lbl); - - var rmBtn = document.createElement('button'); - rmBtn.type = 'button'; - rmBtn.className = 'tv-compare-symbol-remove'; - rmBtn.innerHTML = ''; - rmBtn.title = 'Remove'; - rmBtn.addEventListener('click', function() { - if (window.pywry) { - window.pywry.emit('tvchart:remove-series', { chartId: chartId, seriesId: seriesId }); - } - delete entry._compareSymbols[seriesId]; - if (entry._compareLabels && entry._compareLabels[seriesId]) { - delete entry._compareLabels[seriesId]; - } - renderSymbolList(); - }); - row.appendChild(rmBtn); - listArea.appendChild(row); - }); - } - syncCompareSectionsVisibility(); - } - - renderSymbolList(); - panel.appendChild(listArea); - - // Footer: Allow extend time scale - var footer = document.createElement('div'); - footer.className = 'tv-compare-footer'; - var extendLabel = document.createElement('label'); - extendLabel.className = 'tv-compare-extend-label'; - var extendCheck = document.createElement('input'); - extendCheck.type = 'checkbox'; - extendCheck.className = 'tv-compare-extend-check'; - extendCheck.checked = !!(entry._chartPrefs && entry._chartPrefs.compareExtendTimeScale); - extendCheck.addEventListener('change', function() { - if (!entry._chartPrefs) entry._chartPrefs = {}; - entry._chartPrefs.compareExtendTimeScale = extendCheck.checked; - }); - extendLabel.appendChild(extendCheck); - var extendText = document.createElement('span'); - extendText.textContent = 'Allow extend time scale'; - extendLabel.appendChild(extendText); - footer.appendChild(extendLabel); - panel.appendChild(footer); - - function addCompare(selectedInfo, compareMode) { - var symbol = (searchInput.value || '').trim().toUpperCase(); - if (selectedInfo && selectedInfo.requestSymbol) symbol = String(selectedInfo.requestSymbol).trim().toUpperCase(); - if (!symbol || !window.pywry) return; - compareMode = compareMode || 'same_percent'; - - function emitCompareRequest(symbolInfo) { - var existingId = null; - var syms = entry._compareSymbols || {}; - var symKeys = Object.keys(syms); - for (var i = 0; i < symKeys.length; i++) { - if (syms[symKeys[i]] === symbol) { existingId = symKeys[i]; break; } - } - var seriesId = existingId || ('compare-' + symbol.toLowerCase().replace(/[^a-z0-9]/g, '_')); - entry._compareSymbols[seriesId] = symbol; - if (!entry._compareSymbolInfo) entry._compareSymbolInfo = {}; - if (symbolInfo || selectedInfo) { - entry._compareSymbolInfo[seriesId] = symbolInfo || selectedInfo; - } - if (!entry._compareLabels) entry._compareLabels = {}; - entry._compareLabels[seriesId] = _tvDisplayLabelFromSymbolInfo(symbolInfo || selectedInfo || null, symbol); - if (!entry._pendingCompareModes) entry._pendingCompareModes = {}; - entry._pendingCompareModes[seriesId] = compareMode; - var activeInterval = _tvCurrentInterval(chartId); - var comparePeriodParams = _tvBuildPeriodParams(entry, seriesId); - comparePeriodParams.firstDataRequest = _tvMarkFirstDataRequest(entry, seriesId); - window.pywry.emit('tvchart:data-request', { - chartId: chartId, - symbol: symbol, - seriesId: seriesId, - compareMode: compareMode, - symbolInfo: symbolInfo || selectedInfo || null, - interval: activeInterval, - resolution: activeInterval, - periodParams: comparePeriodParams, - }); - searchInput.value = ''; - searchResults = []; - selectedResult = null; - renderSearchResults(); - renderSymbolList(); - } - - if (selectedInfo) { - emitCompareRequest(selectedInfo); - return; - } - - _tvRequestDatafeedResolve(chartId, symbol, function(resp) { - var resolved = null; - if (resp && resp.symbolInfo) { - resolved = _tvNormalizeSymbolInfo(resp.symbolInfo); - } - emitCompareRequest(resolved); - }); - } - - addBtn.addEventListener('click', function() { - addCompare(selectedResult, 'same_percent'); - }); - - searchInput.addEventListener('input', function() { - var raw = searchInput.value || ''; - if (searchDebounce) clearTimeout(searchDebounce); - searchDebounce = setTimeout(function() { - requestSearch(raw); - }, 180); - }); - - searchInput.addEventListener('keydown', function(e) { - e.stopPropagation(); - if (e.key === 'Escape') { - _tvHideComparePanel(); - return; - } - if (e.key === 'Enter' && (searchInput.value || '').trim()) { - addCompare(selectedResult, 'same_percent'); - } - }); - - // Attach compare action to Enter key (already done above) - // Make the search bar trigger add on blur if non-empty? No - wait for Enter. - - syncCompareSectionsVisibility(); - - ds.uiLayer.appendChild(overlay); - searchInput.focus(); - - // Programmatic drive: pre-fill the search and auto-add the first - // matching ticker. Driven by ``tvchart:compare`` callers that pass - // ``{query, autoAdd, symbolType, exchange}`` (e.g. the MCP - // tvchart_compare tool). ``symbolType`` / ``exchange`` narrow the - // datafeed search before it runs — e.g. ``{query: "SPY", symbolType: - // "etf"}`` skips over SPYM. Mirrors the symbol-search auto-select - // flow so the compare shows up in entry._compareSymbols before the - // caller polls chart state. - if (options.query) { - var cmpQuery = String(options.query).trim(); - if (cmpQuery) { - searchInput.value = cmpQuery; - var autoAdd = options.autoAdd !== false; - if (options.symbolType) { - var wantCmpType = String(options.symbolType).toLowerCase(); - for (var ctsi = 0; ctsi < typeSelect.options.length; ctsi++) { - if (String(typeSelect.options[ctsi].value).toLowerCase() === wantCmpType) { - typeSelect.selectedIndex = ctsi; - break; - } - } - } - if (options.exchange) { - var wantCmpExch = String(options.exchange).toLowerCase(); - for (var cesi = 0; cesi < exchangeSelect.options.length; cesi++) { - if (String(exchangeSelect.options[cesi].value).toLowerCase() === wantCmpExch) { - exchangeSelect.selectedIndex = cesi; - break; - } - } - } - var prevRenderCmp = renderSearchResults; - var addedOnce = false; - var targetTicker = cmpQuery.toUpperCase(); - if (targetTicker.indexOf(':') >= 0) { - targetTicker = targetTicker.split(':').pop().trim(); - } - // Pull the bare ticker from a symbol record — datafeed results - // may carry a fully-qualified ``EXCHANGE:TICKER`` in ``ticker`` - // and the bare ticker in ``symbol`` / ``requestSymbol``. Exact- - // match needs to beat prefix-match (otherwise ``SPY`` finds - // ``SPYM`` first just because ``SPYM`` sorted earlier). - function _bareTicker(rec) { - if (!rec) return ''; - var candidates = [rec.symbol, rec.requestSymbol, rec.ticker]; - for (var ci = 0; ci < candidates.length; ci++) { - var raw = String(candidates[ci] || '').toUpperCase(); - if (!raw) continue; - if (raw.indexOf(':') >= 0) raw = raw.split(':').pop().trim(); - if (raw) return raw; - } - return ''; - } - renderSearchResults = function() { - prevRenderCmp(); - if (addedOnce || !autoAdd || !searchResults.length) return; - var pick = null; - for (var pi = 0; pi < searchResults.length; pi++) { - if (_bareTicker(searchResults[pi]) === targetTicker) { - pick = searchResults[pi]; - break; - } - } - // No exact match → prefer results whose bare ticker - // *starts with* the query, then fall back to the first - // result. Prevents ``SPY`` → ``SPYM`` just because the - // datafeed returned them in alphabetical order. - if (!pick) { - for (var pj = 0; pj < searchResults.length; pj++) { - if (_bareTicker(searchResults[pj]).indexOf(targetTicker) === 0) { - pick = searchResults[pj]; - break; - } - } - } - if (!pick) pick = searchResults[0]; - addedOnce = true; - addCompare(pick, 'same_percent'); - // Auto-close the panel after a programmatic add so the - // MCP caller's confirmation flow doesn't leave an empty - // search dialog sitting on top of the chart. - setTimeout(function() { _tvHideComparePanel(); }, 0); - }; - requestSearch(cmpQuery); - } - } -} - -// --------------------------------------------------------------------------- -// Indicator Symbol Picker – shown when a binary indicator (Spread, Ratio, -// Product, Sum, Correlation) is added but no secondary series exists yet. -// --------------------------------------------------------------------------- -var _indicatorPickerOverlay = null; -var _indicatorPickerChartId = null; - -function _tvHideIndicatorSymbolPicker() { - if (_indicatorPickerOverlay && _indicatorPickerOverlay.parentNode) { - _indicatorPickerOverlay.parentNode.removeChild(_indicatorPickerOverlay); - } - if (_indicatorPickerChartId) _tvSetChartInteractionLocked(_indicatorPickerChartId, false); - _indicatorPickerOverlay = null; - _indicatorPickerChartId = null; - _tvRefreshLegendVisibility(); -} - -function _tvShowIndicatorSymbolPicker(chartId, indicatorDef) { - _tvHideIndicatorSymbolPicker(); - var resolved = _tvResolveChartEntry(chartId); - if (!resolved || !resolved.entry) return; - chartId = resolved.chartId; - var entry = resolved.entry; - var ds = window.__PYWRY_DRAWINGS__[chartId] || _tvEnsureDrawingLayer(chartId); - if (!ds) return; - - var overlay = document.createElement('div'); - overlay.className = 'tv-settings-overlay'; - _indicatorPickerOverlay = overlay; - _indicatorPickerChartId = chartId; - _tvSetChartInteractionLocked(chartId, true); - _tvRefreshLegendVisibility(); - overlay.addEventListener('click', function(e) { - if (e.target === overlay) _tvHideIndicatorSymbolPicker(); - }); - overlay.addEventListener('mousedown', function(e) { e.stopPropagation(); }); - overlay.addEventListener('wheel', function(e) { e.stopPropagation(); }); - - var panel = document.createElement('div'); - panel.className = 'tv-symbol-search-panel'; - overlay.appendChild(panel); - - // Header - var header = document.createElement('div'); - header.className = 'tv-compare-header'; - var title = document.createElement('h3'); - title.textContent = 'Add Symbol \u2014 ' + (indicatorDef.fullName || indicatorDef.name); - header.appendChild(title); - var closeBtn = document.createElement('button'); - closeBtn.className = 'tv-settings-close'; - closeBtn.innerHTML = ''; - closeBtn.addEventListener('click', function() { _tvHideIndicatorSymbolPicker(); }); - header.appendChild(closeBtn); - panel.appendChild(header); - - // Search row - var searchRow = document.createElement('div'); - searchRow.className = 'tv-compare-search-row'; - var searchIcon = document.createElement('span'); - searchIcon.className = 'tv-compare-search-icon'; - searchIcon.innerHTML = ''; - searchRow.appendChild(searchIcon); - var searchInput = document.createElement('input'); - searchInput.type = 'text'; - searchInput.className = 'tv-compare-search-input'; - searchInput.placeholder = 'Search symbol...'; - searchInput.autocomplete = 'off'; - searchInput.spellcheck = false; - searchRow.appendChild(searchInput); - panel.appendChild(searchRow); - - // Filter row — exchange and type dropdowns from datafeed config - var filterRow = document.createElement('div'); - filterRow.className = 'tv-symbol-search-filters'; - - var exchangeSelect = document.createElement('select'); - exchangeSelect.className = 'tv-symbol-search-filter-select'; - var exchangeDefault = document.createElement('option'); - exchangeDefault.value = ''; - exchangeDefault.textContent = 'All Exchanges'; - exchangeSelect.appendChild(exchangeDefault); - - var typeSelect = document.createElement('select'); - typeSelect.className = 'tv-symbol-search-filter-select'; - var typeDefault = document.createElement('option'); - typeDefault.value = ''; - typeDefault.textContent = 'All Types'; - typeSelect.appendChild(typeDefault); - - var cfg = entry._datafeedConfig || {}; - var exchanges = cfg.exchanges || []; - for (var ei = 0; ei < exchanges.length; ei++) { - if (!exchanges[ei].value) continue; - var opt = document.createElement('option'); - opt.value = exchanges[ei].value; - opt.textContent = exchanges[ei].name || exchanges[ei].value; - exchangeSelect.appendChild(opt); - } - var symTypes = cfg.symbols_types || cfg.symbolsTypes || []; - for (var ti = 0; ti < symTypes.length; ti++) { - if (!symTypes[ti].value) continue; - var topt = document.createElement('option'); - topt.value = symTypes[ti].value; - topt.textContent = symTypes[ti].name || symTypes[ti].value; - typeSelect.appendChild(topt); - } - - filterRow.appendChild(exchangeSelect); - filterRow.appendChild(typeSelect); - panel.appendChild(filterRow); - - exchangeSelect.addEventListener('change', function() { - if ((searchInput.value || '').trim()) requestSearch(searchInput.value); - }); - typeSelect.addEventListener('change', function() { - if ((searchInput.value || '').trim()) requestSearch(searchInput.value); - }); - - var searchResults = []; - var pendingSearchRequestId = null; - var searchDebounce = null; - var maxResults = 50; - - var resultsArea = document.createElement('div'); - resultsArea.className = 'tv-symbol-search-results'; - panel.appendChild(resultsArea); - - function renderSearchResults() { - resultsArea.innerHTML = ''; - if (!searchResults.length) { - if ((searchInput.value || '').trim().length > 0) { - var emptyMsg = document.createElement('div'); - emptyMsg.className = 'tv-compare-search-empty'; - emptyMsg.textContent = 'No symbols found'; - resultsArea.appendChild(emptyMsg); - } - return; - } - var list = document.createElement('div'); - list.className = 'tv-compare-results-list'; - for (var i = 0; i < searchResults.length; i++) { - (function(info) { - var row = document.createElement('div'); - row.className = 'tv-compare-result-row tv-symbol-search-result-row'; - row.style.cursor = 'pointer'; - - var identity = document.createElement('div'); - identity.className = 'tv-compare-result-identity'; - - var badge = document.createElement('div'); - badge.className = 'tv-compare-result-badge'; - badge.textContent = (info.symbol || '?').slice(0, 1); - identity.appendChild(badge); - - var copy = document.createElement('div'); - copy.className = 'tv-compare-result-copy'; - var top = document.createElement('div'); - top.className = 'tv-compare-result-top'; - var symbol = document.createElement('span'); - symbol.className = 'tv-compare-result-symbol'; - symbol.textContent = info.displaySymbol || info.symbol; - top.appendChild(symbol); - - // Right-side meta: exchange · type - var parts = []; - if (info.exchange) parts.push(info.exchange); - if (info.type) parts.push(info.type); - if (parts.length) { - var meta = document.createElement('span'); - meta.className = 'tv-compare-result-meta'; - meta.textContent = parts.join(' \u00b7 '); - top.appendChild(meta); - } - copy.appendChild(top); - - // Subtitle: actual security name - var nameText = info.fullName || info.description; - if (nameText) { - var sub = document.createElement('div'); - sub.className = 'tv-compare-result-sub'; - sub.textContent = nameText; - copy.appendChild(sub); - } - identity.appendChild(copy); - row.appendChild(identity); - - row.addEventListener('click', function() { - pickSymbol(info); - }); - list.appendChild(row); - })(searchResults[i]); - } - resultsArea.appendChild(list); - } - - function requestSearch(query) { - query = String(query || '').trim(); - var normalizedQuery = query.toUpperCase(); - if (normalizedQuery.indexOf(':') >= 0) { - normalizedQuery = normalizedQuery.split(':').pop().trim(); - } - searchResults = []; - renderSearchResults(); - if (!normalizedQuery || normalizedQuery.length < 1) return; - - var exch = exchangeSelect.value || ''; - var stype = typeSelect.value || ''; - - pendingSearchRequestId = _tvRequestDatafeedSearch(chartId, normalizedQuery, maxResults, function(resp) { - if (!resp || resp.requestId !== pendingSearchRequestId) return; - pendingSearchRequestId = null; - if (resp.error) { searchResults = []; renderSearchResults(); return; } - var items = Array.isArray(resp.items) ? resp.items : []; - var normalized = []; - for (var idx = 0; idx < items.length; idx++) { - var parsed = _tvNormalizeSymbolInfo(items[idx]); - if (parsed) normalized.push(parsed); - } - searchResults = normalized; - renderSearchResults(); - }, exch, stype); - } - - function pickSymbol(selectedInfo) { - var sym = selectedInfo && selectedInfo.requestSymbol - ? String(selectedInfo.requestSymbol).trim().toUpperCase() - : (searchInput.value || '').trim().toUpperCase(); - if (!sym || !window.pywry) return; - - // Store the pending binary indicator so the data-response handler - // can trigger _tvAddIndicator once the secondary data arrives. - entry._pendingBinaryIndicator = indicatorDef; - - var seriesId = 'compare-' + sym.toLowerCase().replace(/[^a-z0-9]/g, '_'); - - // Track that this compare series is an indicator source (not user-visible compare) - if (!entry._indicatorSourceSeries) entry._indicatorSourceSeries = {}; - entry._indicatorSourceSeries[seriesId] = true; - - if (!entry._compareSymbols) entry._compareSymbols = {}; - entry._compareSymbols[seriesId] = sym; - if (!entry._compareSymbolInfo) entry._compareSymbolInfo = {}; - if (selectedInfo) entry._compareSymbolInfo[seriesId] = selectedInfo; - if (!entry._compareLabels) entry._compareLabels = {}; - entry._compareLabels[seriesId] = _tvDisplayLabelFromSymbolInfo(selectedInfo || null, sym); - if (!entry._pendingCompareModes) entry._pendingCompareModes = {}; - entry._pendingCompareModes[seriesId] = 'new_price_scale'; - - var activeInterval = _tvCurrentInterval(chartId); - var comparePeriodParams = _tvBuildPeriodParams(entry, seriesId); - comparePeriodParams.firstDataRequest = _tvMarkFirstDataRequest(entry, seriesId); - - window.pywry.emit('tvchart:data-request', { - chartId: chartId, - symbol: sym, - seriesId: seriesId, - compareMode: 'new_price_scale', - symbolInfo: selectedInfo || null, - interval: activeInterval, - resolution: activeInterval, - periodParams: comparePeriodParams, - _forIndicator: true, - }); - - _tvHideIndicatorSymbolPicker(); - } - - searchInput.addEventListener('input', function() { - var raw = searchInput.value || ''; - if (searchDebounce) clearTimeout(searchDebounce); - searchDebounce = setTimeout(function() { requestSearch(raw); }, 180); - }); - - searchInput.addEventListener('keydown', function(e) { - e.stopPropagation(); - if (e.key === 'Escape') { - _tvHideIndicatorSymbolPicker(); - return; - } - if (e.key === 'Enter' && (searchInput.value || '').trim()) { - if (searchResults.length > 0) { - pickSymbol(searchResults[0]); - } else { - // Resolve the typed symbol directly - var sym = (searchInput.value || '').trim().toUpperCase(); - _tvRequestDatafeedResolve(chartId, sym, function(resp) { - var resolved = null; - if (resp && resp.symbolInfo) resolved = _tvNormalizeSymbolInfo(resp.symbolInfo); - pickSymbol(resolved || { symbol: sym, ticker: sym, displaySymbol: sym, requestSymbol: sym }); - }); - } - } - }); - - ds.uiLayer.appendChild(overlay); - searchInput.focus(); -} - -function _tvShowDrawingSettings(chartId, drawIdx) { - _tvHideDrawingSettings(); - var ds = window.__PYWRY_DRAWINGS__[chartId]; - if (!ds || drawIdx < 0 || drawIdx >= ds.drawings.length) return; - var d = ds.drawings[drawIdx]; - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry) return; - - // Clone properties for cancel support - var draft = Object.assign({}, d); - - var overlay = document.createElement('div'); - overlay.className = 'tv-settings-overlay'; - _settingsOverlay = overlay; - _settingsOverlayChartId = chartId; - _tvSetChartInteractionLocked(chartId, true); - overlay.addEventListener('click', function(e) { - if (e.target === overlay) _tvHideDrawingSettings(); - }); - overlay.addEventListener('mousedown', function(e) { e.stopPropagation(); }); - overlay.addEventListener('wheel', function(e) { e.stopPropagation(); }); - - var panel = document.createElement('div'); - panel.className = 'tv-settings-panel'; - panel.style.flexDirection = 'column'; - panel.style.width = '560px'; - overlay.appendChild(panel); - - // Header - var header = document.createElement('div'); - header.className = 'tv-settings-header'; - header.style.cssText = 'position:relative;flex-direction:column;align-items:stretch;padding-bottom:0;'; - var hdrRow = document.createElement('div'); - hdrRow.style.cssText = 'display:flex;align-items:center;gap:8px;'; - var title = document.createElement('h3'); - title.textContent = _DRAW_TYPE_NAMES[d.type] || d.type; - hdrRow.appendChild(title); - var closeBtn = document.createElement('button'); - closeBtn.className = 'tv-settings-close'; - closeBtn.innerHTML = ''; - closeBtn.addEventListener('click', function() { _tvHideDrawingSettings(); }); - hdrRow.appendChild(closeBtn); - header.appendChild(hdrRow); - - // Tabs — Text tab for text drawing type and line tools - // Build tab list per drawing type (matching TradingView layout) - var tabs = []; - var _inputsTools = ['regression_channel', 'fibonacci', 'trendline', - 'fib_extension', 'fib_channel', 'fib_timezone', 'fib_fan', - 'fib_arc', 'fib_circle', 'fib_wedge', 'pitchfan', - 'fib_time', 'gann_box', 'gann_square_fixed', 'gann_square', 'gann_fan', - 'long_position', 'short_position', 'forecast']; - if (_inputsTools.indexOf(d.type) !== -1) tabs.push('Inputs'); - tabs.push('Style'); - var _textTabTools = ['text', 'trendline', 'ray', 'extended_line', 'arrow_marker', 'arrow', 'arrow_mark_up', 'arrow_mark_down', 'arrow_mark_left', 'arrow_mark_right', 'anchored_text', 'note', 'price_note', 'pin', 'callout', 'comment', 'price_label', 'signpost', 'flag_mark']; - if (_textTabTools.indexOf(d.type) !== -1) tabs.push('Text'); - tabs.push('Coordinates', 'Visibility'); - var activeTab = tabs[0]; - - var tabBar = document.createElement('div'); - tabBar.className = 'tv-settings-tabs'; - header.appendChild(tabBar); - panel.appendChild(header); - - var body = document.createElement('div'); - body.className = 'tv-settings-body'; - body.style.cssText = 'flex:1;overflow-y:auto;'; - panel.appendChild(body); - - function renderTabs() { - tabBar.innerHTML = ''; - for (var ti = 0; ti < tabs.length; ti++) { - (function(tname) { - var tab = document.createElement('div'); - tab.className = 'tv-settings-tab' + (tname === activeTab ? ' active' : ''); - tab.textContent = tname; - tab.addEventListener('click', function() { - activeTab = tname; - renderTabs(); - renderBody(); - }); - tabBar.appendChild(tab); - })(tabs[ti]); - } - } - - function makeRow(labelText) { - var row = document.createElement('div'); - row.className = 'tv-settings-row'; - var lbl = document.createElement('label'); - lbl.textContent = labelText; - row.appendChild(lbl); - var ctrl = document.createElement('div'); - ctrl.className = 'ts-controls'; - row.appendChild(ctrl); - return { row: row, ctrl: ctrl }; - } - - function makeColorSwatch(color, onChange) { - var sw = document.createElement('div'); - sw.className = 'ts-swatch'; - sw.dataset.baseColor = _tvColorToHex(color || '#aeb4c2', '#aeb4c2'); - sw.dataset.opacity = String(_tvColorOpacityPercent(color, 100)); - sw.style.background = color; - sw.addEventListener('click', function(e) { - e.preventDefault(); - e.stopPropagation(); - _tvShowColorOpacityPopup( - sw, - sw.dataset.baseColor || color, - _tvToNumber(sw.dataset.opacity, 100), - overlay, - function(newColor, newOpacity) { - sw.dataset.baseColor = newColor; - sw.dataset.opacity = String(newOpacity); - sw.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); - color = newColor; - onChange(_tvColorWithOpacity(newColor, newOpacity, newColor), newOpacity); - } - ); - }); - return sw; - } - - function makeSelect(options, current, onChange) { - var sel = document.createElement('select'); - sel.className = 'ts-select'; - for (var si = 0; si < options.length; si++) { - var opt = document.createElement('option'); - opt.value = options[si].value !== undefined ? options[si].value : options[si]; - opt.textContent = options[si].label || options[si]; - if (String(opt.value) === String(current)) opt.selected = true; - sel.appendChild(opt); - } - sel.addEventListener('change', function() { onChange(sel.value); }); - return sel; - } - - function makeCheckbox(checked, onChange) { - var cb = document.createElement('input'); - cb.type = 'checkbox'; - cb.className = 'ts-checkbox'; - cb.checked = !!checked; - cb.addEventListener('change', function() { onChange(cb.checked); }); - return cb; - } - - function makeTextInput(val, onChange) { - var inp = document.createElement('input'); - inp.type = 'text'; - inp.className = 'ts-input ts-input-full'; - inp.value = val || ''; - inp.addEventListener('input', function() { onChange(inp.value); }); - inp.addEventListener('keydown', function(e) { e.stopPropagation(); }); - return inp; - } - - function makeNumberInput(val, onChange) { - var inp = document.createElement('input'); - inp.type = 'number'; - inp.className = 'ts-input'; - inp.value = val; - inp.step = 'any'; - inp.addEventListener('input', function() { onChange(parseFloat(inp.value)); }); - inp.addEventListener('keydown', function(e) { e.stopPropagation(); }); - return inp; - } - - function makeOpacityInput(val, onChange) { - var wrap = document.createElement('div'); - wrap.style.cssText = 'display:flex;align-items:center;gap:6px;'; - var slider = document.createElement('input'); - slider.type = 'range'; - slider.className = 'tv-settings-slider'; - slider.min = '0'; slider.max = '100'; - slider.value = String(Math.round((val !== undefined ? val : 0.15) * 100)); - var numBox = document.createElement('input'); - numBox.type = 'number'; - numBox.className = 'ts-input ts-input-sm'; - numBox.min = '0'; numBox.max = '100'; - numBox.value = slider.value; - numBox.addEventListener('keydown', function(e) { e.stopPropagation(); }); - slider.addEventListener('input', function() { - numBox.value = slider.value; - onChange(parseInt(slider.value) / 100); - }); - numBox.addEventListener('input', function() { - slider.value = numBox.value; - onChange(parseInt(numBox.value) / 100); - }); - var pct = document.createElement('span'); - pct.className = 'tv-settings-unit'; - pct.textContent = '%'; - wrap.appendChild(slider); wrap.appendChild(numBox); wrap.appendChild(pct); - return wrap; - } - - function addSectionHeading(text) { - var sec = document.createElement('div'); - sec.className = 'tv-settings-section'; - sec.textContent = text; - body.appendChild(sec); - } - - // Shared: Line row with color swatch + style toggle buttons - function addLineRow(container) { - var cRow = makeRow('Line'); - var lineSwatch = makeColorSwatch(draft.color || _drawDefaults.color, function(c) { draft.color = c; }); - cRow.ctrl.appendChild(lineSwatch); - var styleGroup = document.createElement('div'); - styleGroup.className = 'ts-line-style-group'; - var styleOpts = [ - { val: 0, svg: '' }, - { val: 1, svg: '' }, - { val: 2, svg: '' }, - ]; - var styleBtns = []; - styleOpts.forEach(function(so) { - var btn = document.createElement('button'); - btn.className = 'ts-line-style-btn' + (parseInt(draft.lineStyle || 0) === so.val ? ' active' : ''); - btn.innerHTML = so.svg; - btn.addEventListener('click', function() { - draft.lineStyle = so.val; - styleBtns.forEach(function(b) { b.classList.remove('active'); }); - btn.classList.add('active'); - }); - styleBtns.push(btn); - styleGroup.appendChild(btn); - }); - cRow.ctrl.appendChild(styleGroup); - container.appendChild(cRow.row); - } - - // Shared: Width row - function addWidthRow(container) { - var wRow = makeRow('Width'); - wRow.ctrl.appendChild(makeSelect([{value:1,label:'1px'},{value:2,label:'2px'},{value:3,label:'3px'},{value:4,label:'4px'},{value:5,label:'5px'}], draft.lineWidth || 2, function(v) { draft.lineWidth = parseInt(v); })); - container.appendChild(wRow.row); - } - - // Shared: TV-style compound line control (checkbox + color + line-style buttons) - // opts: { label, showKey, colorKey, styleKey, widthKey, defaultColor, defaultStyle, defaultShow } - function addCompoundLineRow(container, opts) { - var row = makeRow(opts.label); - // Checkbox - row.ctrl.appendChild(makeCheckbox(draft[opts.showKey] !== false, function(v) { draft[opts.showKey] = v; })); - // Color swatch - row.ctrl.appendChild(makeColorSwatch(draft[opts.colorKey] || opts.defaultColor || draft.color || _drawDefaults.color, function(c) { draft[opts.colorKey] = c; })); - // Line style selector - var styleGroup = document.createElement('div'); - styleGroup.className = 'ts-line-style-group'; - var styleOpts = [ - { val: 0, svg: '' }, - { val: 1, svg: '' }, - { val: 2, svg: '' }, - ]; - var curStyle = draft[opts.styleKey] !== undefined ? draft[opts.styleKey] : (opts.defaultStyle || 0); - var styleBtns = []; - styleOpts.forEach(function(so) { - var btn = document.createElement('button'); - btn.className = 'ts-line-style-btn' + (parseInt(curStyle) === so.val ? ' active' : ''); - btn.innerHTML = so.svg; - btn.addEventListener('click', function() { - draft[opts.styleKey] = so.val; - styleBtns.forEach(function(b) { b.classList.remove('active'); }); - btn.classList.add('active'); - }); - styleBtns.push(btn); - styleGroup.appendChild(btn); - }); - row.ctrl.appendChild(styleGroup); - container.appendChild(row.row); - } - - // Shared: TV-style visibility time interval section - function addVisibilityIntervals(container) { - var intervals = [ - { key: 'seconds', label: 'Seconds', defFrom: 1, defTo: 59 }, - { key: 'minutes', label: 'Minutes', defFrom: 1, defTo: 59 }, - { key: 'hours', label: 'Hours', defFrom: 1, defTo: 24 }, - { key: 'days', label: 'Days', defFrom: 1, defTo: 365 }, - { key: 'weeks', label: 'Weeks', defFrom: 1, defTo: 52 }, - { key: 'months', label: 'Months', defFrom: 1, defTo: 12 }, - ]; - if (!draft.visibility) draft.visibility = {}; - for (var vi = 0; vi < intervals.length; vi++) { - (function(itv) { - if (!draft.visibility[itv.key]) { - draft.visibility[itv.key] = { enabled: true, from: itv.defFrom, to: itv.defTo }; - } - var vis = draft.visibility[itv.key]; - var row = makeRow(itv.label); - // Checkbox - row.ctrl.appendChild(makeCheckbox(vis.enabled !== false, function(v) { vis.enabled = v; })); - // From - var fromInp = document.createElement('input'); - fromInp.type = 'number'; fromInp.className = 'ts-input ts-input-sm'; - fromInp.min = String(itv.defFrom); fromInp.max = String(itv.defTo); - fromInp.value = String(vis.from || itv.defFrom); - fromInp.addEventListener('input', function() { vis.from = parseInt(fromInp.value) || itv.defFrom; slider.value = String(vis.from); }); - fromInp.addEventListener('keydown', function(e) { e.stopPropagation(); }); - row.ctrl.appendChild(fromInp); - // Slider - var slider = document.createElement('input'); - slider.type = 'range'; slider.className = 'tv-settings-slider'; - slider.min = String(itv.defFrom); slider.max = String(itv.defTo); - slider.value = String(vis.from || itv.defFrom); - slider.addEventListener('input', function() { vis.from = parseInt(slider.value); fromInp.value = slider.value; }); - row.ctrl.appendChild(slider); - // To - var toInp = document.createElement('input'); - toInp.type = 'number'; toInp.className = 'ts-input ts-input-sm'; - toInp.min = String(itv.defFrom); toInp.max = String(itv.defTo); - toInp.value = String(vis.to || itv.defTo); - toInp.addEventListener('input', function() { vis.to = parseInt(toInp.value) || itv.defTo; }); - toInp.addEventListener('keydown', function(e) { e.stopPropagation(); }); - row.ctrl.appendChild(toInp); - container.appendChild(row.row); - })(intervals[vi]); - } - } - - function renderBody() { - body.innerHTML = ''; - - if (activeTab === 'Inputs') { - // ---- INPUTS TAB ---- - if (d.type === 'regression_channel') { - addSectionHeading('DEVIATION'); - var udRow = makeRow('Upper deviation'); - udRow.ctrl.appendChild(makeNumberInput(draft.upperDeviation !== undefined ? draft.upperDeviation : 2.0, function(v) { draft.upperDeviation = v; })); - body.appendChild(udRow.row); - var ldRow = makeRow('Lower deviation'); - ldRow.ctrl.appendChild(makeNumberInput(draft.lowerDeviation !== undefined ? draft.lowerDeviation : 2.0, function(v) { draft.lowerDeviation = v; })); - body.appendChild(ldRow.row); - var uuRow = makeRow('Use upper deviation'); - uuRow.ctrl.appendChild(makeCheckbox(draft.useUpperDeviation !== false, function(v) { draft.useUpperDeviation = v; })); - body.appendChild(uuRow.row); - var ulRow = makeRow('Use lower deviation'); - ulRow.ctrl.appendChild(makeCheckbox(draft.useLowerDeviation !== false, function(v) { draft.useLowerDeviation = v; })); - body.appendChild(ulRow.row); - addSectionHeading('SOURCE'); - var srcRow = makeRow('Source'); - srcRow.ctrl.appendChild(makeSelect([ - {value:'close',label:'Close'},{value:'open',label:'Open'}, - {value:'high',label:'High'},{value:'low',label:'Low'}, - {value:'hl2',label:'(H+L)/2'},{value:'hlc3',label:'(H+L+C)/3'}, - {value:'ohlc4',label:'(O+H+L+C)/4'} - ], draft.source || 'close', function(v) { draft.source = v; })); - body.appendChild(srcRow.row); - - } else if (d.type === 'fibonacci') { - addSectionHeading('LEVELS'); - var revRow = makeRow('Reverse'); - revRow.ctrl.appendChild(makeCheckbox(!!draft.reverse, function(v) { draft.reverse = v; })); - body.appendChild(revRow.row); - var showLabRow = makeRow('Show labels'); - showLabRow.ctrl.appendChild(makeCheckbox(draft.showLabels !== false, function(v) { draft.showLabels = v; })); - body.appendChild(showLabRow.row); - var showPrRow = makeRow('Show prices'); - showPrRow.ctrl.appendChild(makeCheckbox(draft.showPrices !== false, function(v) { draft.showPrices = v; })); - body.appendChild(showPrRow.row); - var showLevRow = makeRow('Levels based on'); - showLevRow.ctrl.appendChild(makeSelect([ - {value:'percent',label:'Percent'},{value:'price',label:'Price'} - ], draft.levelsBasis || 'percent', function(v) { draft.levelsBasis = v; })); - body.appendChild(showLevRow.row); - - } else if (d.type === 'fib_extension') { - addSectionHeading('LEVELS'); - var revRow = makeRow('Reverse'); - revRow.ctrl.appendChild(makeCheckbox(!!draft.reverse, function(v) { draft.reverse = v; })); - body.appendChild(revRow.row); - var showLabRow = makeRow('Show labels'); - showLabRow.ctrl.appendChild(makeCheckbox(draft.showLabels !== false, function(v) { draft.showLabels = v; })); - body.appendChild(showLabRow.row); - var showPrRow = makeRow('Show prices'); - showPrRow.ctrl.appendChild(makeCheckbox(draft.showPrices !== false, function(v) { draft.showPrices = v; })); - body.appendChild(showPrRow.row); - var showLevRow = makeRow('Levels based on'); - showLevRow.ctrl.appendChild(makeSelect([ - {value:'percent',label:'Percent'},{value:'price',label:'Price'} - ], draft.levelsBasis || 'percent', function(v) { draft.levelsBasis = v; })); - body.appendChild(showLevRow.row); - - } else if (d.type === 'fib_channel' || d.type === 'fib_fan' || d.type === 'fib_arc' || - d.type === 'fib_circle' || d.type === 'fib_wedge') { - addSectionHeading('LEVELS'); - var revRow = makeRow('Reverse'); - revRow.ctrl.appendChild(makeCheckbox(!!draft.reverse, function(v) { draft.reverse = v; })); - body.appendChild(revRow.row); - var showLabRow = makeRow('Show labels'); - showLabRow.ctrl.appendChild(makeCheckbox(draft.showLabels !== false, function(v) { draft.showLabels = v; })); - body.appendChild(showLabRow.row); - var showPrRow = makeRow('Show prices'); - showPrRow.ctrl.appendChild(makeCheckbox(draft.showPrices !== false, function(v) { draft.showPrices = v; })); - body.appendChild(showPrRow.row); - - } else if (d.type === 'pitchfan') { - addSectionHeading('OPTIONS'); - var showLabRow = makeRow('Show labels'); - showLabRow.ctrl.appendChild(makeCheckbox(draft.showLabels !== false, function(v) { draft.showLabels = v; })); - body.appendChild(showLabRow.row); - var showPrRow = makeRow('Show prices'); - showPrRow.ctrl.appendChild(makeCheckbox(draft.showPrices !== false, function(v) { draft.showPrices = v; })); - body.appendChild(showPrRow.row); - - } else if (d.type === 'fib_timezone') { - addSectionHeading('OPTIONS'); - var showLabRow = makeRow('Show labels'); - showLabRow.ctrl.appendChild(makeCheckbox(draft.showLabels !== false, function(v) { draft.showLabels = v; })); - body.appendChild(showLabRow.row); - - } else if (d.type === 'fib_time') { - addSectionHeading('OPTIONS'); - var showLabRow = makeRow('Show labels'); - showLabRow.ctrl.appendChild(makeCheckbox(draft.showLabels !== false, function(v) { draft.showLabels = v; })); - body.appendChild(showLabRow.row); - var revRow = makeRow('Reverse'); - revRow.ctrl.appendChild(makeCheckbox(!!draft.reverse, function(v) { draft.reverse = v; })); - body.appendChild(revRow.row); - - } else if (d.type === 'gann_box' || d.type === 'gann_square_fixed' || d.type === 'gann_square') { - addSectionHeading('OPTIONS'); - var revRow = makeRow('Reverse'); - revRow.ctrl.appendChild(makeCheckbox(!!draft.reverse, function(v) { draft.reverse = v; })); - body.appendChild(revRow.row); - var showLabRow = makeRow('Show labels'); - showLabRow.ctrl.appendChild(makeCheckbox(draft.showLabels !== false, function(v) { draft.showLabels = v; })); - body.appendChild(showLabRow.row); - - } else if (d.type === 'gann_fan') { - addSectionHeading('OPTIONS'); - var showLabRow = makeRow('Show labels'); - showLabRow.ctrl.appendChild(makeCheckbox(draft.showLabels !== false, function(v) { draft.showLabels = v; })); - body.appendChild(showLabRow.row); - - } else if (d.type === 'trendline') { - addSectionHeading('OPTIONS'); - var extRow = makeRow('Extend'); - extRow.ctrl.appendChild(makeSelect(["Don't extend", 'Left', 'Right', 'Both'], draft.extend || "Don't extend", function(v) { draft.extend = v; })); - body.appendChild(extRow.row); - var mpRow = makeRow('Middle point'); - mpRow.ctrl.appendChild(makeCheckbox(!!draft.showMiddlePoint, function(v) { draft.showMiddlePoint = v; })); - body.appendChild(mpRow.row); - var plRow = makeRow('Price labels'); - plRow.ctrl.appendChild(makeCheckbox(!!draft.showPriceLabels, function(v) { draft.showPriceLabels = v; })); - body.appendChild(plRow.row); - addSectionHeading('STATS'); - var statsRow = makeRow('Stats'); - statsRow.ctrl.appendChild(makeSelect([{value:'hidden',label:'Hidden'},{value:'compact',label:'Compact'},{value:'values',label:'Values'}], draft.stats || 'hidden', function(v) { draft.stats = v; })); - body.appendChild(statsRow.row); - var spRow = makeRow('Stats position'); - spRow.ctrl.appendChild(makeSelect([{value:'left',label:'Left'},{value:'right',label:'Right'}], draft.statsPosition || 'right', function(v) { draft.statsPosition = v; })); - body.appendChild(spRow.row); - var asRow = makeRow('Always show stats'); - asRow.ctrl.appendChild(makeCheckbox(!!draft.alwaysShowStats, function(v) { draft.alwaysShowStats = v; })); - body.appendChild(asRow.row); - - } else if (d.type === 'long_position' || d.type === 'short_position') { - addSectionHeading('RISK/REWARD'); - var rrRow = makeRow('Risk/Reward ratio'); - rrRow.ctrl.appendChild(makeNumberInput(draft.riskReward !== undefined ? draft.riskReward : 2.0, function(v) { draft.riskReward = v; })); - body.appendChild(rrRow.row); - var lotRow = makeRow('Lot size'); - lotRow.ctrl.appendChild(makeNumberInput(draft.lotSize !== undefined ? draft.lotSize : 1, function(v) { draft.lotSize = v; })); - body.appendChild(lotRow.row); - var accRow = makeRow('Account size'); - accRow.ctrl.appendChild(makeNumberInput(draft.accountSize !== undefined ? draft.accountSize : 10000, function(v) { draft.accountSize = v; })); - body.appendChild(accRow.row); - var showLblRow = makeRow('Show labels'); - showLblRow.ctrl.appendChild(makeCheckbox(draft.showLabels !== false, function(v) { draft.showLabels = v; })); - body.appendChild(showLblRow.row); - - } else if (d.type === 'forecast') { - addSectionHeading('OPTIONS'); - var srcRow = makeRow('Source'); - srcRow.ctrl.appendChild(makeSelect([ - {value:'close',label:'Close'},{value:'open',label:'Open'}, - {value:'high',label:'High'},{value:'low',label:'Low'} - ], draft.source || 'close', function(v) { draft.source = v; })); - body.appendChild(srcRow.row); - } - - } else if (activeTab === 'Style') { - - // ---- HLINE ---- - if (d.type === 'hline') { - addSectionHeading('LINE'); - addLineRow(body); - addWidthRow(body); - var extRow = makeRow('Extend'); - extRow.ctrl.appendChild(makeSelect(["Don't extend", 'Left', 'Right', 'Both'], draft.extend || "Don't extend", function(v) { draft.extend = v; })); - body.appendChild(extRow.row); - addSectionHeading('PRICE LABEL'); - var plRow = makeRow('Price label'); - plRow.ctrl.appendChild(makeCheckbox(draft.showPriceLabel !== false, function(v) { draft.showPriceLabel = v; })); - body.appendChild(plRow.row); - var plColorRow = makeRow('Label color'); - plColorRow.ctrl.appendChild(makeColorSwatch(draft.labelColor || draft.color || _drawDefaults.color, function(c) { draft.labelColor = c; })); - body.appendChild(plColorRow.row); - var plTitleRow = makeRow('Label text'); - plTitleRow.ctrl.appendChild(makeTextInput(draft.title || '', function(v) { draft.title = v; })); - body.appendChild(plTitleRow.row); - - // ---- TRENDLINE / RAY / EXTENDED_LINE ---- - } else if (d.type === 'trendline' || d.type === 'ray' || d.type === 'extended_line') { - addSectionHeading('LINE'); - addLineRow(body); - addWidthRow(body); - - // ---- HRAY ---- - } else if (d.type === 'hray') { - addSectionHeading('LINE'); - addLineRow(body); - addWidthRow(body); - addSectionHeading('PRICE LABEL'); - var plRow = makeRow('Price label'); - plRow.ctrl.appendChild(makeCheckbox(draft.showPriceLabel !== false, function(v) { draft.showPriceLabel = v; })); - body.appendChild(plRow.row); - - // ---- VLINE ---- - } else if (d.type === 'vline') { - addSectionHeading('LINE'); - addLineRow(body); - addWidthRow(body); - - // ---- CROSSLINE ---- - } else if (d.type === 'crossline') { - addSectionHeading('LINE'); - addLineRow(body); - addWidthRow(body); - - // ---- RECT ---- - } else if (d.type === 'rect') { - addSectionHeading('BORDER'); - addLineRow(body); - addWidthRow(body); - addSectionHeading('BACKGROUND'); - var bgEnRow = makeRow('Background'); - bgEnRow.ctrl.appendChild(makeCheckbox(draft.fillEnabled !== false, function(v) { draft.fillEnabled = v; })); - bgEnRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); - body.appendChild(bgEnRow.row); - var bgOpRow = makeRow('Opacity'); - bgOpRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.15, function(v) { draft.fillOpacity = v; })); - body.appendChild(bgOpRow.row); - - // ---- CHANNEL ---- - } else if (d.type === 'channel') { - addSectionHeading('LINES'); - addLineRow(body); - addWidthRow(body); - var midRow = makeRow('Middle line'); - midRow.ctrl.appendChild(makeCheckbox(draft.showMiddleLine !== false, function(v) { draft.showMiddleLine = v; })); - body.appendChild(midRow.row); - var extRow = makeRow('Extend'); - extRow.ctrl.appendChild(makeSelect(["Don't extend", 'Left', 'Right', 'Both'], draft.extend || "Don't extend", function(v) { draft.extend = v; })); - body.appendChild(extRow.row); - addSectionHeading('BACKGROUND'); - var bgEnRow = makeRow('Background'); - bgEnRow.ctrl.appendChild(makeCheckbox(draft.fillEnabled !== false, function(v) { draft.fillEnabled = v; })); - bgEnRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); - body.appendChild(bgEnRow.row); - var bgOpRow = makeRow('Opacity'); - bgOpRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.08, function(v) { draft.fillOpacity = v; })); - body.appendChild(bgOpRow.row); - - // ---- REGRESSION_CHANNEL (TV-style: Base/Up/Down lines) ---- - } else if (d.type === 'regression_channel') { - addCompoundLineRow(body, { - label: 'Base', showKey: 'showBaseLine', colorKey: 'baseColor', - styleKey: 'baseLineStyle', defaultColor: draft.color || _drawDefaults.color, defaultStyle: 0 - }); - addCompoundLineRow(body, { - label: 'Up', showKey: 'showUpLine', colorKey: 'upColor', - styleKey: 'upLineStyle', defaultColor: draft.upColor || '#26a69a', defaultStyle: 1 - }); - addCompoundLineRow(body, { - label: 'Down', showKey: 'showDownLine', colorKey: 'downColor', - styleKey: 'downLineStyle', defaultColor: draft.downColor || '#ef5350', defaultStyle: 1 - }); - var extLnRow = makeRow('Extend lines'); - extLnRow.ctrl.appendChild(makeCheckbox(!!draft.extendLines, function(v) { draft.extendLines = v; })); - body.appendChild(extLnRow.row); - var prRow = makeRow("Pearson's R"); - prRow.ctrl.appendChild(makeCheckbox(!!draft.showPearsonsR, function(v) { draft.showPearsonsR = v; })); - body.appendChild(prRow.row); - addSectionHeading('BACKGROUND'); - var bgEnRow = makeRow('Background'); - bgEnRow.ctrl.appendChild(makeCheckbox(draft.fillEnabled !== false, function(v) { draft.fillEnabled = v; })); - bgEnRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); - body.appendChild(bgEnRow.row); - var bgOpRow = makeRow('Opacity'); - bgOpRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.05, function(v) { draft.fillOpacity = v; })); - body.appendChild(bgOpRow.row); - - // ---- FLAT_CHANNEL ---- - } else if (d.type === 'flat_channel') { - addSectionHeading('LINES'); - addLineRow(body); - addWidthRow(body); - addSectionHeading('BACKGROUND'); - var bgEnRow = makeRow('Background'); - bgEnRow.ctrl.appendChild(makeCheckbox(draft.fillEnabled !== false, function(v) { draft.fillEnabled = v; })); - bgEnRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); - body.appendChild(bgEnRow.row); - var bgOpRow = makeRow('Opacity'); - bgOpRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.08, function(v) { draft.fillOpacity = v; })); - body.appendChild(bgOpRow.row); - - // ---- FIBONACCI ---- - } else if (d.type === 'fibonacci') { - addSectionHeading('TREND LINE'); - addLineRow(body); - addWidthRow(body); - var extRow = makeRow('Extend'); - extRow.ctrl.appendChild(makeSelect(["Don't extend", 'Left', 'Right', 'Both'], draft.extend || "Don't extend", function(v) { draft.extend = v; })); - body.appendChild(extRow.row); - addSectionHeading('LEVELS'); - var fibLevels = draft.fibLevelValues || _FIB_LEVELS.slice(); - var fibColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : _getFibColors(); - var fibEnabled = draft.fibEnabled || []; - for (var fi = 0; fi < fibLevels.length; fi++) { - (function(idx) { - var fRow = makeRow(''); - var enCb = makeCheckbox(fibEnabled[idx] !== false, function(v) { - if (!draft.fibEnabled) draft.fibEnabled = fibLevels.map(function() { return true; }); - draft.fibEnabled[idx] = v; - }); - fRow.ctrl.appendChild(enCb); - var levelInp = document.createElement('input'); - levelInp.type = 'number'; levelInp.step = '0.001'; - levelInp.className = 'ts-input ts-input-sm'; - levelInp.value = fibLevels[idx].toFixed(3); - levelInp.addEventListener('input', function() { - if (!draft.fibLevelValues) draft.fibLevelValues = fibLevels.slice(); - draft.fibLevelValues[idx] = parseFloat(levelInp.value) || 0; - }); - levelInp.addEventListener('keydown', function(e) { e.stopPropagation(); }); - fRow.ctrl.appendChild(levelInp); - fRow.ctrl.appendChild(makeColorSwatch(fibColors[idx] || _drawDefaults.color, function(c) { - if (!draft.fibColors) draft.fibColors = fibColors.slice(); - draft.fibColors[idx] = c; - })); - body.appendChild(fRow.row); - })(fi); - } - - // ---- FIB EXTENSION ---- - } else if (d.type === 'fib_extension') { - addSectionHeading('TREND LINE'); - addLineRow(body); - addWidthRow(body); - var extRow = makeRow('Extend'); - extRow.ctrl.appendChild(makeSelect(["Don't extend", 'Left', 'Right', 'Both'], draft.extend || "Don't extend", function(v) { draft.extend = v; })); - body.appendChild(extRow.row); - addSectionHeading('LEVELS'); - var extDefLevels = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618, 2.618, 4.236]; - var fibLevels = (draft.fibLevelValues && draft.fibLevelValues.length) ? draft.fibLevelValues : extDefLevels; - var fibColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : _getFibColors(); - var fibEnabled = draft.fibEnabled || []; - for (var fi = 0; fi < fibLevels.length; fi++) { - (function(idx) { - var fRow = makeRow(''); - var enCb = makeCheckbox(fibEnabled[idx] !== false, function(v) { - if (!draft.fibEnabled) draft.fibEnabled = fibLevels.map(function() { return true; }); - draft.fibEnabled[idx] = v; - }); - fRow.ctrl.appendChild(enCb); - var levelInp = document.createElement('input'); - levelInp.type = 'number'; levelInp.step = '0.001'; - levelInp.className = 'ts-input ts-input-sm'; - levelInp.value = fibLevels[idx].toFixed(3); - levelInp.addEventListener('input', function() { - if (!draft.fibLevelValues) draft.fibLevelValues = fibLevels.slice(); - draft.fibLevelValues[idx] = parseFloat(levelInp.value) || 0; - }); - levelInp.addEventListener('keydown', function(e) { e.stopPropagation(); }); - fRow.ctrl.appendChild(levelInp); - fRow.ctrl.appendChild(makeColorSwatch(fibColors[idx % fibColors.length] || _drawDefaults.color, function(c) { - if (!draft.fibColors) draft.fibColors = fibColors.slice(); - while (draft.fibColors.length <= idx) draft.fibColors.push(_drawDefaults.color); - draft.fibColors[idx] = c; - })); - body.appendChild(fRow.row); - })(fi); - } - addSectionHeading('BACKGROUND'); - var bgEnRow = makeRow('Background'); - bgEnRow.ctrl.appendChild(makeCheckbox(draft.fillEnabled !== false, function(v) { draft.fillEnabled = v; })); - bgEnRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); - body.appendChild(bgEnRow.row); - var bgOpRow = makeRow('Opacity'); - bgOpRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.06, function(v) { draft.fillOpacity = v; })); - body.appendChild(bgOpRow.row); - - // ---- FIB CHANNEL ---- - } else if (d.type === 'fib_channel') { - addSectionHeading('BORDER'); - addLineRow(body); - addWidthRow(body); - var extRow = makeRow('Extend'); - extRow.ctrl.appendChild(makeSelect(["Don't extend", 'Left', 'Right', 'Both'], draft.extend || "Don't extend", function(v) { draft.extend = v; })); - body.appendChild(extRow.row); - addSectionHeading('LEVELS'); - var fibLevels = draft.fibLevelValues || _FIB_LEVELS.slice(); - var fibColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : _getFibColors(); - var fibEnabled = draft.fibEnabled || []; - for (var fi = 0; fi < fibLevels.length; fi++) { - (function(idx) { - var fRow = makeRow(''); - fRow.ctrl.appendChild(makeCheckbox(fibEnabled[idx] !== false, function(v) { - if (!draft.fibEnabled) draft.fibEnabled = fibLevels.map(function() { return true; }); - draft.fibEnabled[idx] = v; - })); - var levelInp = document.createElement('input'); - levelInp.type = 'number'; levelInp.step = '0.001'; - levelInp.className = 'ts-input ts-input-sm'; - levelInp.value = fibLevels[idx].toFixed(3); - levelInp.addEventListener('input', function() { - if (!draft.fibLevelValues) draft.fibLevelValues = fibLevels.slice(); - draft.fibLevelValues[idx] = parseFloat(levelInp.value) || 0; - }); - levelInp.addEventListener('keydown', function(e) { e.stopPropagation(); }); - fRow.ctrl.appendChild(levelInp); - fRow.ctrl.appendChild(makeColorSwatch(fibColors[idx] || _drawDefaults.color, function(c) { - if (!draft.fibColors) draft.fibColors = fibColors.slice(); - draft.fibColors[idx] = c; - })); - body.appendChild(fRow.row); - })(fi); - } - addSectionHeading('BACKGROUND'); - var bgEnRow = makeRow('Background'); - bgEnRow.ctrl.appendChild(makeCheckbox(draft.fillEnabled !== false, function(v) { draft.fillEnabled = v; })); - bgEnRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); - body.appendChild(bgEnRow.row); - var bgOpRow = makeRow('Opacity'); - bgOpRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.04, function(v) { draft.fillOpacity = v; })); - body.appendChild(bgOpRow.row); - - // ---- FIB FAN ---- - } else if (d.type === 'fib_fan') { - addSectionHeading('TREND LINE'); - addLineRow(body); - addWidthRow(body); - addSectionHeading('LEVELS'); - var fibLevels = draft.fibLevelValues || _FIB_LEVELS.slice(); - var fibColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : _getFibColors(); - var fibEnabled = draft.fibEnabled || []; - for (var fi = 0; fi < fibLevels.length; fi++) { - (function(idx) { - var fRow = makeRow(''); - fRow.ctrl.appendChild(makeCheckbox(fibEnabled[idx] !== false, function(v) { - if (!draft.fibEnabled) draft.fibEnabled = fibLevels.map(function() { return true; }); - draft.fibEnabled[idx] = v; - })); - var levelInp = document.createElement('input'); - levelInp.type = 'number'; levelInp.step = '0.001'; - levelInp.className = 'ts-input ts-input-sm'; - levelInp.value = fibLevels[idx].toFixed(3); - levelInp.addEventListener('input', function() { - if (!draft.fibLevelValues) draft.fibLevelValues = fibLevels.slice(); - draft.fibLevelValues[idx] = parseFloat(levelInp.value) || 0; - }); - levelInp.addEventListener('keydown', function(e) { e.stopPropagation(); }); - fRow.ctrl.appendChild(levelInp); - fRow.ctrl.appendChild(makeColorSwatch(fibColors[idx] || _drawDefaults.color, function(c) { - if (!draft.fibColors) draft.fibColors = fibColors.slice(); - draft.fibColors[idx] = c; - })); - body.appendChild(fRow.row); - })(fi); - } - addSectionHeading('BACKGROUND'); - var bgEnRow = makeRow('Fill between fan lines'); - bgEnRow.ctrl.appendChild(makeCheckbox(draft.fillEnabled !== false, function(v) { draft.fillEnabled = v; })); - body.appendChild(bgEnRow.row); - var bgColRow = makeRow('Color'); - bgColRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); - body.appendChild(bgColRow.row); - var bgOpRow = makeRow('Opacity'); - bgOpRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.03, function(v) { draft.fillOpacity = v; })); - body.appendChild(bgOpRow.row); - - // ---- FIB ARC ---- - } else if (d.type === 'fib_arc') { - addSectionHeading('TREND LINE'); - addLineRow(body); - addWidthRow(body); - var tlRow = makeRow('Show trend line'); - tlRow.ctrl.appendChild(makeCheckbox(draft.showTrendLine !== false, function(v) { draft.showTrendLine = v; })); - body.appendChild(tlRow.row); - addSectionHeading('LEVELS'); - var fibLevels = draft.fibLevelValues || _FIB_LEVELS.slice(); - var fibColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : _getFibColors(); - var fibEnabled = draft.fibEnabled || []; - for (var fi = 0; fi < fibLevels.length; fi++) { - (function(idx) { - var fRow = makeRow(''); - fRow.ctrl.appendChild(makeCheckbox(fibEnabled[idx] !== false, function(v) { - if (!draft.fibEnabled) draft.fibEnabled = fibLevels.map(function() { return true; }); - draft.fibEnabled[idx] = v; - })); - var levelInp = document.createElement('input'); - levelInp.type = 'number'; levelInp.step = '0.001'; - levelInp.className = 'ts-input ts-input-sm'; - levelInp.value = fibLevels[idx].toFixed(3); - levelInp.addEventListener('input', function() { - if (!draft.fibLevelValues) draft.fibLevelValues = fibLevels.slice(); - draft.fibLevelValues[idx] = parseFloat(levelInp.value) || 0; - }); - levelInp.addEventListener('keydown', function(e) { e.stopPropagation(); }); - fRow.ctrl.appendChild(levelInp); - fRow.ctrl.appendChild(makeColorSwatch(fibColors[idx] || _drawDefaults.color, function(c) { - if (!draft.fibColors) draft.fibColors = fibColors.slice(); - draft.fibColors[idx] = c; - })); - body.appendChild(fRow.row); - })(fi); - } - - // ---- FIB CIRCLE ---- - } else if (d.type === 'fib_circle') { - addSectionHeading('TREND LINE'); - addLineRow(body); - addWidthRow(body); - var tlRow = makeRow('Show trend line'); - tlRow.ctrl.appendChild(makeCheckbox(draft.showTrendLine !== false, function(v) { draft.showTrendLine = v; })); - body.appendChild(tlRow.row); - addSectionHeading('LEVELS'); - var fibLevels = draft.fibLevelValues || _FIB_LEVELS.slice(); - var fibColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : _getFibColors(); - var fibEnabled = draft.fibEnabled || []; - for (var fi = 0; fi < fibLevels.length; fi++) { - (function(idx) { - var fRow = makeRow(''); - fRow.ctrl.appendChild(makeCheckbox(fibEnabled[idx] !== false, function(v) { - if (!draft.fibEnabled) draft.fibEnabled = fibLevels.map(function() { return true; }); - draft.fibEnabled[idx] = v; - })); - var levelInp = document.createElement('input'); - levelInp.type = 'number'; levelInp.step = '0.001'; - levelInp.className = 'ts-input ts-input-sm'; - levelInp.value = fibLevels[idx].toFixed(3); - levelInp.addEventListener('input', function() { - if (!draft.fibLevelValues) draft.fibLevelValues = fibLevels.slice(); - draft.fibLevelValues[idx] = parseFloat(levelInp.value) || 0; - }); - levelInp.addEventListener('keydown', function(e) { e.stopPropagation(); }); - fRow.ctrl.appendChild(levelInp); - fRow.ctrl.appendChild(makeColorSwatch(fibColors[idx] || _drawDefaults.color, function(c) { - if (!draft.fibColors) draft.fibColors = fibColors.slice(); - draft.fibColors[idx] = c; - })); - body.appendChild(fRow.row); - })(fi); - } - - // ---- FIB WEDGE ---- - } else if (d.type === 'fib_wedge') { - addSectionHeading('LINE'); - addLineRow(body); - addWidthRow(body); - addSectionHeading('LEVELS'); - var fibLevels = draft.fibLevelValues || _FIB_LEVELS.slice(); - var fibColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : _getFibColors(); - var fibEnabled = draft.fibEnabled || []; - for (var fi = 0; fi < fibLevels.length; fi++) { - (function(idx) { - var fRow = makeRow(''); - fRow.ctrl.appendChild(makeCheckbox(fibEnabled[idx] !== false, function(v) { - if (!draft.fibEnabled) draft.fibEnabled = fibLevels.map(function() { return true; }); - draft.fibEnabled[idx] = v; - })); - var levelInp = document.createElement('input'); - levelInp.type = 'number'; levelInp.step = '0.001'; - levelInp.className = 'ts-input ts-input-sm'; - levelInp.value = fibLevels[idx].toFixed(3); - levelInp.addEventListener('input', function() { - if (!draft.fibLevelValues) draft.fibLevelValues = fibLevels.slice(); - draft.fibLevelValues[idx] = parseFloat(levelInp.value) || 0; - }); - levelInp.addEventListener('keydown', function(e) { e.stopPropagation(); }); - fRow.ctrl.appendChild(levelInp); - fRow.ctrl.appendChild(makeColorSwatch(fibColors[idx] || _drawDefaults.color, function(c) { - if (!draft.fibColors) draft.fibColors = fibColors.slice(); - draft.fibColors[idx] = c; - })); - body.appendChild(fRow.row); - })(fi); - } - addSectionHeading('BACKGROUND'); - var bgEnRow = makeRow('Background'); - bgEnRow.ctrl.appendChild(makeCheckbox(draft.fillEnabled !== false, function(v) { draft.fillEnabled = v; })); - bgEnRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); - body.appendChild(bgEnRow.row); - var bgOpRow = makeRow('Opacity'); - bgOpRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.04, function(v) { draft.fillOpacity = v; })); - body.appendChild(bgOpRow.row); - - // ---- PITCHFAN ---- - } else if (d.type === 'pitchfan') { - addSectionHeading('LINES'); - addLineRow(body); - addWidthRow(body); - addSectionHeading('MEDIAN'); - var medRow = makeRow('Show median'); - medRow.ctrl.appendChild(makeCheckbox(draft.showMedian !== false, function(v) { draft.showMedian = v; })); - body.appendChild(medRow.row); - var medColorRow = makeRow('Median color'); - medColorRow.ctrl.appendChild(makeColorSwatch(draft.medianColor || draft.color || _drawDefaults.color, function(c) { draft.medianColor = c; })); - body.appendChild(medColorRow.row); - addSectionHeading('FAN LEVELS'); - var pfLevels = [0.236, 0.382, 0.5, 0.618, 0.786]; - var fibLevels = (draft.fibLevelValues && draft.fibLevelValues.length) ? draft.fibLevelValues : pfLevels; - var fibColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : _getFibColors(); - var fibEnabled = draft.fibEnabled || []; - for (var fi = 0; fi < fibLevels.length; fi++) { - (function(idx) { - var fRow = makeRow(''); - fRow.ctrl.appendChild(makeCheckbox(fibEnabled[idx] !== false, function(v) { - if (!draft.fibEnabled) draft.fibEnabled = fibLevels.map(function() { return true; }); - draft.fibEnabled[idx] = v; - })); - var levelInp = document.createElement('input'); - levelInp.type = 'number'; levelInp.step = '0.001'; - levelInp.className = 'ts-input ts-input-sm'; - levelInp.value = fibLevels[idx].toFixed(3); - levelInp.addEventListener('input', function() { - if (!draft.fibLevelValues) draft.fibLevelValues = fibLevels.slice(); - draft.fibLevelValues[idx] = parseFloat(levelInp.value) || 0; - }); - levelInp.addEventListener('keydown', function(e) { e.stopPropagation(); }); - fRow.ctrl.appendChild(levelInp); - fRow.ctrl.appendChild(makeColorSwatch(fibColors[idx] || _drawDefaults.color, function(c) { - if (!draft.fibColors) draft.fibColors = fibColors.slice(); - draft.fibColors[idx] = c; - })); - body.appendChild(fRow.row); - })(fi); - } - - // ---- FIB TIME ZONE ---- - } else if (d.type === 'fib_timezone') { - addSectionHeading('TREND LINE'); - addLineRow(body); - addWidthRow(body); - var tlRow = makeRow('Show trend line'); - tlRow.ctrl.appendChild(makeCheckbox(draft.showTrendLine !== false, function(v) { draft.showTrendLine = v; })); - body.appendChild(tlRow.row); - addSectionHeading('TIME ZONE LINES'); - var tzNums = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144]; - var tzColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : _getFibColors(); - var tzEnabled = draft.fibEnabled || []; - for (var fi = 0; fi < tzNums.length; fi++) { - (function(idx) { - var fRow = makeRow(String(tzNums[idx])); - fRow.ctrl.appendChild(makeCheckbox(tzEnabled[idx] !== false, function(v) { - if (!draft.fibEnabled) draft.fibEnabled = tzNums.map(function() { return true; }); - draft.fibEnabled[idx] = v; - })); - fRow.ctrl.appendChild(makeColorSwatch(tzColors[idx % tzColors.length] || _drawDefaults.color, function(c) { - if (!draft.fibColors) { - draft.fibColors = []; - for (var ci = 0; ci < tzNums.length; ci++) draft.fibColors.push(tzColors[ci % tzColors.length] || _drawDefaults.color); - } - draft.fibColors[idx] = c; - })); - body.appendChild(fRow.row); - })(fi); - } - - // ---- MEASURE ---- - } else if (d.type === 'fib_time') { - addSectionHeading('TREND LINE'); - addLineRow(body); - addWidthRow(body); - addSectionHeading('LEVELS'); - var ftDefLevels = [0, 0.382, 0.5, 0.618, 1, 1.382, 1.618, 2, 2.618, 4.236]; - var ftLevels = (draft.fibLevelValues && draft.fibLevelValues.length) ? draft.fibLevelValues : ftDefLevels; - var ftColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : _getFibColors(); - var ftEnabled = draft.fibEnabled || []; - for (var fi = 0; fi < ftLevels.length; fi++) { - (function(idx) { - var fRow = makeRow(ftLevels[idx].toFixed(3)); - fRow.ctrl.appendChild(makeCheckbox(ftEnabled[idx] !== false, function(v) { - if (!draft.fibEnabled) draft.fibEnabled = ftLevels.map(function() { return true; }); - draft.fibEnabled[idx] = v; - })); - fRow.ctrl.appendChild(makeColorSwatch(ftColors[idx % ftColors.length] || _drawDefaults.color, function(c) { - if (!draft.fibColors) { - draft.fibColors = []; - for (var ci = 0; ci < ftLevels.length; ci++) draft.fibColors.push(ftColors[ci % ftColors.length] || _drawDefaults.color); - } - draft.fibColors[idx] = c; - })); - body.appendChild(fRow.row); - })(fi); - } - - // ---- FIB SPIRAL ---- - } else if (d.type === 'fib_spiral') { - addSectionHeading('LINE'); - addLineRow(body); - addWidthRow(body); - - // ---- GANN BOX ---- - } else if (d.type === 'gann_box') { - addSectionHeading('BORDER'); - addLineRow(body); - addWidthRow(body); - addSectionHeading('LEVELS'); - var gbDefLevels = [0.25, 0.5, 0.75]; - var gbLevels = draft.gannLevels || gbDefLevels; - var gbColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : []; - var gbEnabled = draft.fibEnabled || []; - for (var gi = 0; gi < gbLevels.length; gi++) { - (function(idx) { - var gRow = makeRow(gbLevels[idx].toFixed(3)); - gRow.ctrl.appendChild(makeCheckbox(gbEnabled[idx] !== false, function(v) { - if (!draft.fibEnabled) draft.fibEnabled = gbLevels.map(function() { return true; }); - draft.fibEnabled[idx] = v; - })); - gRow.ctrl.appendChild(makeColorSwatch(gbColors[idx] || _drawDefaults.color, function(c) { - if (!draft.fibColors) { draft.fibColors = []; for (var ci = 0; ci < gbLevels.length; ci++) draft.fibColors.push(_drawDefaults.color); } - draft.fibColors[idx] = c; - })); - body.appendChild(gRow.row); - })(gi); - } - addSectionHeading('BACKGROUND'); - var fillRow = makeRow('Fill'); - fillRow.ctrl.appendChild(makeCheckbox(draft.fillEnabled !== false, function(v) { draft.fillEnabled = v; })); - body.appendChild(fillRow.row); - var bgColRow = makeRow('Color'); - bgColRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); - body.appendChild(bgColRow.row); - var opRow = makeRow('Opacity'); - opRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.03, function(v) { draft.fillOpacity = v; })); - body.appendChild(opRow.row); - - // ---- GANN SQUARE FIXED ---- - } else if (d.type === 'gann_square_fixed') { - addSectionHeading('BORDER'); - addLineRow(body); - addWidthRow(body); - addSectionHeading('LEVELS'); - var gsfDefLevels = [0.25, 0.5, 0.75]; - var gsfLevels = draft.gannLevels || gsfDefLevels; - var gsfColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : []; - var gsfEnabled = draft.fibEnabled || []; - for (var gi = 0; gi < gsfLevels.length; gi++) { - (function(idx) { - var gRow = makeRow(gsfLevels[idx].toFixed(3)); - gRow.ctrl.appendChild(makeCheckbox(gsfEnabled[idx] !== false, function(v) { - if (!draft.fibEnabled) draft.fibEnabled = gsfLevels.map(function() { return true; }); - draft.fibEnabled[idx] = v; - })); - gRow.ctrl.appendChild(makeColorSwatch(gsfColors[idx] || _drawDefaults.color, function(c) { - if (!draft.fibColors) { draft.fibColors = []; for (var ci = 0; ci < gsfLevels.length; ci++) draft.fibColors.push(_drawDefaults.color); } - draft.fibColors[idx] = c; - })); - body.appendChild(gRow.row); - })(gi); - } - addSectionHeading('BACKGROUND'); - var fillRow = makeRow('Fill'); - fillRow.ctrl.appendChild(makeCheckbox(draft.fillEnabled !== false, function(v) { draft.fillEnabled = v; })); - body.appendChild(fillRow.row); - var bgColRow = makeRow('Color'); - bgColRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); - body.appendChild(bgColRow.row); - var opRow = makeRow('Opacity'); - opRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.03, function(v) { draft.fillOpacity = v; })); - body.appendChild(opRow.row); - - // ---- GANN SQUARE ---- - } else if (d.type === 'gann_square') { - addSectionHeading('BORDER'); - addLineRow(body); - addWidthRow(body); - addSectionHeading('LEVELS'); - var gsDefLevels = [0.25, 0.5, 0.75]; - var gsLevels = draft.gannLevels || gsDefLevels; - var gsColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : []; - var gsEnabled = draft.fibEnabled || []; - for (var gi = 0; gi < gsLevels.length; gi++) { - (function(idx) { - var gRow = makeRow(gsLevels[idx].toFixed(3)); - gRow.ctrl.appendChild(makeCheckbox(gsEnabled[idx] !== false, function(v) { - if (!draft.fibEnabled) draft.fibEnabled = gsLevels.map(function() { return true; }); - draft.fibEnabled[idx] = v; - })); - gRow.ctrl.appendChild(makeColorSwatch(gsColors[idx] || _drawDefaults.color, function(c) { - if (!draft.fibColors) { draft.fibColors = []; for (var ci = 0; ci < gsLevels.length; ci++) draft.fibColors.push(_drawDefaults.color); } - draft.fibColors[idx] = c; - })); - body.appendChild(gRow.row); - })(gi); - } - addSectionHeading('BACKGROUND'); - var fillRow = makeRow('Fill'); - fillRow.ctrl.appendChild(makeCheckbox(draft.fillEnabled !== false, function(v) { draft.fillEnabled = v; })); - body.appendChild(fillRow.row); - var bgColRow = makeRow('Color'); - bgColRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); - body.appendChild(bgColRow.row); - var opRow = makeRow('Opacity'); - opRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.03, function(v) { draft.fillOpacity = v; })); - body.appendChild(opRow.row); - - // ---- GANN FAN ---- - } else if (d.type === 'gann_fan') { - addSectionHeading('LINES'); - addLineRow(body); - addWidthRow(body); - addSectionHeading('FAN LEVELS'); - var gfAngleNames = ['1\u00d78', '1\u00d74', '1\u00d73', '1\u00d72', '1\u00d71', '2\u00d71', '3\u00d71', '4\u00d71', '8\u00d71']; - var gfColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : []; - var gfEnabled = draft.fibEnabled || []; - for (var gi = 0; gi < gfAngleNames.length; gi++) { - (function(idx) { - var gRow = makeRow(gfAngleNames[idx]); - gRow.ctrl.appendChild(makeCheckbox(gfEnabled[idx] !== false, function(v) { - if (!draft.fibEnabled) draft.fibEnabled = gfAngleNames.map(function() { return true; }); - draft.fibEnabled[idx] = v; - })); - gRow.ctrl.appendChild(makeColorSwatch(gfColors[idx] || _drawDefaults.color, function(c) { - if (!draft.fibColors) { draft.fibColors = []; for (var ci = 0; ci < gfAngleNames.length; ci++) draft.fibColors.push(_drawDefaults.color); } - draft.fibColors[idx] = c; - })); - body.appendChild(gRow.row); - })(gi); - } - - // ---- MEASURE ---- - } else if (d.type === 'measure') { - addSectionHeading('COLORS'); - var upRow = makeRow('Up color'); - upRow.ctrl.appendChild(makeColorSwatch(draft.colorUp || _cssVar('--pywry-draw-measure-up', '#26a69a'), function(c) { draft.colorUp = c; })); - body.appendChild(upRow.row); - var dnRow = makeRow('Down color'); - dnRow.ctrl.appendChild(makeColorSwatch(draft.colorDown || _cssVar('--pywry-draw-measure-down', '#ef5350'), function(c) { draft.colorDown = c; })); - body.appendChild(dnRow.row); - var bgOpRow = makeRow('Opacity'); - bgOpRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.08, function(v) { draft.fillOpacity = v; })); - body.appendChild(bgOpRow.row); - addSectionHeading('LABEL'); - var mFsRow = makeRow('Font size'); - mFsRow.ctrl.appendChild(makeSelect([{value:10,label:'10'},{value:11,label:'11'},{value:12,label:'12'},{value:13,label:'13'},{value:14,label:'14'},{value:16,label:'16'}], draft.fontSize || 12, function(v) { draft.fontSize = parseInt(v); })); - body.appendChild(mFsRow.row); - - // ---- TEXT ---- - } else if (d.type === 'text') { - addSectionHeading('TEXT'); - var tColorRow = makeRow('Color'); - tColorRow.ctrl.appendChild(makeColorSwatch(draft.color || _drawDefaults.color, function(c) { draft.color = c; })); - body.appendChild(tColorRow.row); - var fsRow = makeRow('Font size'); - fsRow.ctrl.appendChild(makeSelect([{value:10,label:'10'},{value:12,label:'12'},{value:14,label:'14'},{value:16,label:'16'},{value:18,label:'18'},{value:20,label:'20'},{value:24,label:'24'},{value:28,label:'28'}], draft.fontSize || 14, function(v) { draft.fontSize = parseInt(v); })); - body.appendChild(fsRow.row); - var boldRow = makeRow('Bold'); - boldRow.ctrl.appendChild(makeCheckbox(!!draft.bold, function(v) { draft.bold = v; })); - body.appendChild(boldRow.row); - var italicRow = makeRow('Italic'); - italicRow.ctrl.appendChild(makeCheckbox(!!draft.italic, function(v) { draft.italic = v; })); - body.appendChild(italicRow.row); - addSectionHeading('BACKGROUND'); - var bgEnRow = makeRow('Background'); - bgEnRow.ctrl.appendChild(makeCheckbox(!!draft.bgEnabled, function(v) { draft.bgEnabled = v; })); - bgEnRow.ctrl.appendChild(makeColorSwatch(draft.bgColor || '#2a2e39', function(c) { draft.bgColor = c; })); - body.appendChild(bgEnRow.row); - var bgOpRow = makeRow('Opacity'); - bgOpRow.ctrl.appendChild(makeOpacityInput(draft.bgOpacity !== undefined ? draft.bgOpacity : 0.7, function(v) { draft.bgOpacity = v; })); - body.appendChild(bgOpRow.row); - - // ---- BRUSH ---- - } else if (d.type === 'brush') { - addSectionHeading('BRUSH'); - var cRow = makeRow('Color'); - cRow.ctrl.appendChild(makeColorSwatch(draft.color || _drawDefaults.color, function(c) { draft.color = c; })); - body.appendChild(cRow.row); - var wRow = makeRow('Width'); - wRow.ctrl.appendChild(makeSelect([{value:1,label:'1px'},{value:2,label:'2px'},{value:3,label:'3px'},{value:4,label:'4px'},{value:5,label:'5px'},{value:8,label:'8px'},{value:12,label:'12px'}], draft.lineWidth || 2, function(v) { draft.lineWidth = parseInt(v); })); - body.appendChild(wRow.row); - var opRow = makeRow('Opacity'); - opRow.ctrl.appendChild(makeOpacityInput(draft.opacity !== undefined ? draft.opacity : 1.0, function(v) { draft.opacity = v; })); - body.appendChild(opRow.row); - - // ---- HIGHLIGHTER ---- - } else if (d.type === 'highlighter') { - addSectionHeading('HIGHLIGHTER'); - var cRow = makeRow('Color'); - cRow.ctrl.appendChild(makeColorSwatch(draft.color || '#FFEB3B', function(c) { draft.color = c; })); - body.appendChild(cRow.row); - var wRow = makeRow('Width'); - wRow.ctrl.appendChild(makeSelect([{value:5,label:'5px'},{value:8,label:'8px'},{value:10,label:'10px'},{value:15,label:'15px'},{value:20,label:'20px'}], draft.lineWidth || 10, function(v) { draft.lineWidth = parseInt(v); })); - body.appendChild(wRow.row); - var opRow = makeRow('Opacity'); - opRow.ctrl.appendChild(makeOpacityInput(draft.opacity !== undefined ? draft.opacity : 0.4, function(v) { draft.opacity = v; })); - body.appendChild(opRow.row); - - // ---- ARROW MARKER (filled shape) ---- - } else if (d.type === 'arrow_marker') { - addSectionHeading('FILL'); - var fRow = makeRow('Fill color'); - fRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); - body.appendChild(fRow.row); - addSectionHeading('BORDER'); - var brdRow = makeRow('Border color'); - brdRow.ctrl.appendChild(makeColorSwatch(draft.borderColor || draft.color || _drawDefaults.color, function(c) { draft.borderColor = c; })); - body.appendChild(brdRow.row); - addSectionHeading('TEXT'); - var tcRow = makeRow('Text color'); - tcRow.ctrl.appendChild(makeColorSwatch(draft.textColor || draft.color || _drawDefaults.color, function(c) { draft.textColor = c; })); - body.appendChild(tcRow.row); - var fsRow = makeRow('Font size'); - fsRow.ctrl.appendChild(makeSelect([{value:10,label:'10'},{value:12,label:'12'},{value:14,label:'14'},{value:16,label:'16'},{value:18,label:'18'},{value:20,label:'20'},{value:24,label:'24'},{value:30,label:'30'}], draft.fontSize || 16, function(v) { draft.fontSize = parseInt(v); })); - body.appendChild(fsRow.row); - var bRow = makeRow('Bold'); - bRow.ctrl.appendChild(makeCheckbox(!!draft.bold, function(v) { draft.bold = v; })); - body.appendChild(bRow.row); - var iRow = makeRow('Italic'); - iRow.ctrl.appendChild(makeCheckbox(!!draft.italic, function(v) { draft.italic = v; })); - body.appendChild(iRow.row); - - // ---- ARROW (line with arrowhead) ---- - } else if (d.type === 'arrow') { - addSectionHeading('LINE'); - addLineRow(body); - addWidthRow(body); - var styRow = makeRow('Line style'); - styRow.ctrl.appendChild(makeSelect([{value:0,label:'Solid'},{value:1,label:'Dashed'},{value:2,label:'Dotted'}], draft.lineStyle || 0, function(v) { draft.lineStyle = parseInt(v); })); - body.appendChild(styRow.row); - - // ---- ARROW MARKS (up/down/left/right) ---- - } else if (d.type === 'arrow_mark_up' || d.type === 'arrow_mark_down' || d.type === 'arrow_mark_left' || d.type === 'arrow_mark_right') { - addSectionHeading('FILL'); - var fRow = makeRow('Fill color'); - fRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); - body.appendChild(fRow.row); - addSectionHeading('BORDER'); - var brdRow = makeRow('Border color'); - brdRow.ctrl.appendChild(makeColorSwatch(draft.borderColor || draft.color || _drawDefaults.color, function(c) { draft.borderColor = c; })); - body.appendChild(brdRow.row); - addSectionHeading('TEXT'); - var tcRow = makeRow('Text color'); - tcRow.ctrl.appendChild(makeColorSwatch(draft.textColor || draft.color || _drawDefaults.color, function(c) { draft.textColor = c; })); - body.appendChild(tcRow.row); - var fsRow = makeRow('Font size'); - fsRow.ctrl.appendChild(makeSelect([{value:10,label:'10'},{value:12,label:'12'},{value:14,label:'14'},{value:16,label:'16'},{value:18,label:'18'},{value:20,label:'20'},{value:24,label:'24'},{value:30,label:'30'}], draft.fontSize || 16, function(v) { draft.fontSize = parseInt(v); })); - body.appendChild(fsRow.row); - var bRow = makeRow('Bold'); - bRow.ctrl.appendChild(makeCheckbox(!!draft.bold, function(v) { draft.bold = v; })); - body.appendChild(bRow.row); - var iRow = makeRow('Italic'); - iRow.ctrl.appendChild(makeCheckbox(!!draft.italic, function(v) { draft.italic = v; })); - body.appendChild(iRow.row); - - // ---- TEXT/NOTES TOOLS (anchored_text, note, price_note, pin, callout, comment, price_label, signpost, flag_mark) ---- - } else if (['anchored_text', 'note', 'price_note', 'pin', 'callout', 'comment', 'price_label', 'signpost', 'flag_mark'].indexOf(d.type) !== -1) { - // Pin, flag_mark, signpost: Style tab has only the marker color - // Other text tools: Style tab has color, font, bold, italic, bg, border - var _hoverTextTools = ['pin', 'flag_mark', 'signpost']; - if (_hoverTextTools.indexOf(d.type) !== -1) { - addSectionHeading('MARKER'); - var cRow = makeRow('Color'); - cRow.ctrl.appendChild(makeColorSwatch(draft.markerColor || draft.color || _drawDefaults.color, function(c) { draft.markerColor = c; })); - body.appendChild(cRow.row); - } else { - addSectionHeading('STYLE'); - var cRow = makeRow('Color'); - cRow.ctrl.appendChild(makeColorSwatch(draft.color || _drawDefaults.color, function(c) { draft.color = c; })); - body.appendChild(cRow.row); - var fsRow = makeRow('Font size'); - fsRow.ctrl.appendChild(makeSelect([{value:10,label:'10'},{value:12,label:'12'},{value:14,label:'14'},{value:16,label:'16'},{value:18,label:'18'},{value:20,label:'20'},{value:24,label:'24'},{value:28,label:'28'}], draft.fontSize || 14, function(v) { draft.fontSize = parseInt(v); })); - body.appendChild(fsRow.row); - var bRow = makeRow('Bold'); - bRow.ctrl.appendChild(makeCheckbox(!!draft.bold, function(v) { draft.bold = v; })); - body.appendChild(bRow.row); - var iRow = makeRow('Italic'); - iRow.ctrl.appendChild(makeCheckbox(!!draft.italic, function(v) { draft.italic = v; })); - body.appendChild(iRow.row); - addSectionHeading('BACKGROUND'); - var bgRow = makeRow('Background'); - bgRow.ctrl.appendChild(makeCheckbox(draft.bgEnabled !== false, function(v) { draft.bgEnabled = v; })); - bgRow.ctrl.appendChild(makeColorSwatch(draft.bgColor || '#2a2e39', function(c) { draft.bgColor = c; })); - body.appendChild(bgRow.row); - var bdRow = makeRow('Border'); - bdRow.ctrl.appendChild(makeCheckbox(!!draft.borderEnabled, function(v) { draft.borderEnabled = v; })); - bdRow.ctrl.appendChild(makeColorSwatch(draft.borderColor || draft.color || _drawDefaults.color, function(c) { draft.borderColor = c; })); - body.appendChild(bdRow.row); - } - - // ---- CIRCLE / ELLIPSE ---- - } else if (d.type === 'circle' || d.type === 'ellipse') { - addSectionHeading('BORDER'); - addLineRow(body); - addWidthRow(body); - addSectionHeading('BACKGROUND'); - var fillRow = makeRow('Fill'); - fillRow.ctrl.appendChild(makeCheckbox(!!draft.fillColor, function(v) { draft.fillColor = v ? (draft.fillColor || 'rgba(41,98,255,0.2)') : ''; })); - fillRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || 'rgba(41,98,255,0.2)', function(c) { draft.fillColor = c; })); - body.appendChild(fillRow.row); - - // ---- TRIANGLE / ROTATED RECT ---- - } else if (d.type === 'triangle' || d.type === 'rotated_rect') { - addSectionHeading('BORDER'); - addLineRow(body); - addWidthRow(body); - addSectionHeading('BACKGROUND'); - var fillRow = makeRow('Fill'); - fillRow.ctrl.appendChild(makeCheckbox(!!draft.fillColor, function(v) { draft.fillColor = v ? (draft.fillColor || 'rgba(41,98,255,0.2)') : ''; })); - fillRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || 'rgba(41,98,255,0.2)', function(c) { draft.fillColor = c; })); - body.appendChild(fillRow.row); - - // ---- PATH / POLYLINE ---- - } else if (d.type === 'path' || d.type === 'polyline') { - addSectionHeading('LINE'); - addLineRow(body); - addWidthRow(body); - if (d.type === 'path') { - addSectionHeading('BACKGROUND'); - var fillRow = makeRow('Fill'); - fillRow.ctrl.appendChild(makeCheckbox(!!draft.fillColor, function(v) { draft.fillColor = v ? (draft.fillColor || 'rgba(41,98,255,0.2)') : ''; })); - fillRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || 'rgba(41,98,255,0.2)', function(c) { draft.fillColor = c; })); - body.appendChild(fillRow.row); - } - - // ---- ARC / CURVE / DOUBLE CURVE ---- - } else if (d.type === 'shape_arc' || d.type === 'curve' || d.type === 'double_curve') { - addSectionHeading('LINE'); - addLineRow(body); - addWidthRow(body); - - // ---- LONG / SHORT POSITION ---- - } else if (d.type === 'long_position' || d.type === 'short_position') { - addSectionHeading('COLORS'); - var profRow = makeRow('Profit color'); - profRow.ctrl.appendChild(makeColorSwatch(draft.profitColor || '#26a69a', function(c) { draft.profitColor = c; })); - body.appendChild(profRow.row); - var lossRow = makeRow('Stop color'); - lossRow.ctrl.appendChild(makeColorSwatch(draft.stopColor || '#ef5350', function(c) { draft.stopColor = c; })); - body.appendChild(lossRow.row); - addSectionHeading('LINE'); - addLineRow(body); - addWidthRow(body); - - // ---- FORECAST / GHOST FEED ---- - } else if (d.type === 'forecast' || d.type === 'ghost_feed') { - addSectionHeading('LINE'); - addLineRow(body); - addWidthRow(body); - - // ---- BARS PATTERN / PROJECTION ---- - } else if (d.type === 'bars_pattern' || d.type === 'projection') { - addSectionHeading('LINE'); - addLineRow(body); - addWidthRow(body); - - // ---- ANCHORED VWAP ---- - } else if (d.type === 'anchored_vwap') { - addSectionHeading('LINE'); - addLineRow(body); - addWidthRow(body); - - // ---- FIXED RANGE VOLUME ---- - } else if (d.type === 'fixed_range_vol') { - addSectionHeading('LINE'); - addLineRow(body); - addWidthRow(body); - - // ---- PRICE RANGE / DATE RANGE / DATE+PRICE RANGE ---- - } else if (d.type === 'price_range' || d.type === 'date_range' || d.type === 'date_price_range') { - addSectionHeading('LINE'); - addLineRow(body); - addWidthRow(body); - if (d.type === 'date_price_range') { - addSectionHeading('BACKGROUND'); - var fillRow = makeRow('Fill'); - fillRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || 'rgba(41,98,255,0.1)', function(c) { draft.fillColor = c; })); - body.appendChild(fillRow.row); - } - - // ---- FALLBACK (any unknown type) ---- - } else { - addSectionHeading('LINE'); - addLineRow(body); - addWidthRow(body); - } - - } else if (activeTab === 'Text' && d.type === 'text') { - addSectionHeading('CONTENT'); - var tRow = makeRow('Text'); - tRow.ctrl.appendChild(makeTextInput(draft.text || '', function(v) { draft.text = v; })); - body.appendChild(tRow.row); - - } else if (activeTab === 'Text' && (d.type === 'trendline' || d.type === 'ray' || d.type === 'extended_line')) { - addSectionHeading('TEXT'); - var tRow = makeRow('Text'); - tRow.ctrl.appendChild(makeTextInput(draft.text || '', function(v) { draft.text = v; })); - body.appendChild(tRow.row); - var tColorRow = makeRow('Text color'); - tColorRow.ctrl.appendChild(makeColorSwatch(draft.textColor || draft.color || _drawDefaults.color, function(c) { draft.textColor = c; })); - body.appendChild(tColorRow.row); - var tSizeRow = makeRow('Font size'); - tSizeRow.ctrl.appendChild(makeSelect([{value:10,label:'10'},{value:12,label:'12'},{value:14,label:'14'},{value:16,label:'16'},{value:18,label:'18'},{value:20,label:'20'},{value:24,label:'24'}], draft.textFontSize || 12, function(v) { draft.textFontSize = parseInt(v); })); - body.appendChild(tSizeRow.row); - var tBoldRow = makeRow('Bold'); - tBoldRow.ctrl.appendChild(makeCheckbox(!!draft.textBold, function(v) { draft.textBold = v; })); - body.appendChild(tBoldRow.row); - var tItalicRow = makeRow('Italic'); - tItalicRow.ctrl.appendChild(makeCheckbox(!!draft.textItalic, function(v) { draft.textItalic = v; })); - body.appendChild(tItalicRow.row); - - } else if (activeTab === 'Text' && (d.type === 'arrow_marker' || d.type === 'arrow' || d.type === 'arrow_mark_up' || d.type === 'arrow_mark_down' || d.type === 'arrow_mark_left' || d.type === 'arrow_mark_right')) { - addSectionHeading('TEXT'); - var tRow = makeRow('Text'); - tRow.ctrl.appendChild(makeTextInput(draft.text || '', function(v) { draft.text = v; })); - body.appendChild(tRow.row); - - } else if (activeTab === 'Text' && ['anchored_text', 'note', 'price_note', 'pin', 'callout', 'comment', 'price_label', 'signpost', 'flag_mark'].indexOf(d.type) !== -1) { - var _hoverTextTools2 = ['pin', 'flag_mark', 'signpost']; - if (_hoverTextTools2.indexOf(d.type) !== -1) { - // TV-style Text tab: font row, textarea, background, border - var fontRow = document.createElement('div'); - fontRow.style.cssText = 'display:flex;align-items:center;gap:8px;padding:8px 16px;'; - fontRow.appendChild(makeColorSwatch(draft.color || _drawDefaults.color, function(c) { draft.color = c; })); - fontRow.appendChild(makeSelect([{value:10,label:'10'},{value:12,label:'12'},{value:14,label:'14'},{value:16,label:'16'},{value:18,label:'18'},{value:20,label:'20'},{value:24,label:'24'},{value:28,label:'28'}], draft.fontSize || 14, function(v) { draft.fontSize = parseInt(v); })); - var boldBtn = document.createElement('button'); - boldBtn.textContent = 'B'; - boldBtn.className = 'ts-btn' + (draft.bold ? ' active' : ''); - boldBtn.style.cssText = 'font-weight:bold;min-width:28px;height:28px;border:1px solid rgba(255,255,255,0.2);border-radius:4px;background:' + (draft.bold ? 'rgba(255,255,255,0.15)' : 'transparent') + ';color:inherit;cursor:pointer;'; - boldBtn.addEventListener('click', function() { - draft.bold = !draft.bold; - boldBtn.style.background = draft.bold ? 'rgba(255,255,255,0.15)' : 'transparent'; - }); - fontRow.appendChild(boldBtn); - var italicBtn = document.createElement('button'); - italicBtn.textContent = 'I'; - italicBtn.className = 'ts-btn' + (draft.italic ? ' active' : ''); - italicBtn.style.cssText = 'font-style:italic;min-width:28px;height:28px;border:1px solid rgba(255,255,255,0.2);border-radius:4px;background:' + (draft.italic ? 'rgba(255,255,255,0.15)' : 'transparent') + ';color:inherit;cursor:pointer;'; - italicBtn.addEventListener('click', function() { - draft.italic = !draft.italic; - italicBtn.style.background = draft.italic ? 'rgba(255,255,255,0.15)' : 'transparent'; - }); - fontRow.appendChild(italicBtn); - body.appendChild(fontRow); - - var ta = document.createElement('textarea'); - ta.className = 'ts-input ts-input-full tv-settings-textarea'; - ta.style.cssText = 'margin:8px 16px;min-height:80px;resize:vertical;border:2px solid #2962ff;border-radius:4px;background:#1e222d;color:inherit;padding:8px;font-family:inherit;font-size:14px;'; - ta.placeholder = 'Add text'; - ta.value = draft.text || ''; - ta.addEventListener('input', function() { draft.text = ta.value; }); - ta.addEventListener('keydown', function(e) { e.stopPropagation(); }); - body.appendChild(ta); - - var bgRow2 = makeRow('Background'); - bgRow2.ctrl.appendChild(makeCheckbox(draft.bgEnabled !== false, function(v) { draft.bgEnabled = v; })); - bgRow2.ctrl.appendChild(makeColorSwatch(draft.bgColor || '#2a2e39', function(c) { draft.bgColor = c; })); - body.appendChild(bgRow2.row); - var bdRow2 = makeRow('Border'); - bdRow2.ctrl.appendChild(makeCheckbox(!!draft.borderEnabled, function(v) { draft.borderEnabled = v; })); - bdRow2.ctrl.appendChild(makeColorSwatch(draft.borderColor || draft.color || _drawDefaults.color, function(c) { draft.borderColor = c; })); - body.appendChild(bdRow2.row); - } else { - addSectionHeading('TEXT'); - var tRow = makeRow('Text'); - tRow.ctrl.appendChild(makeTextInput(draft.text || '', function(v) { draft.text = v; })); - body.appendChild(tRow.row); - } - - } else if (activeTab === 'Coordinates') { - // Helper: make a bar index input from a time value - function makeBarInput(tKey) { - var entry = window.__PYWRY_TVCHARTS__ && window.__PYWRY_TVCHARTS__[chartId]; - var data = entry && entry.series && typeof entry.series.data === 'function' ? entry.series.data() : null; - var barIdx = 0; - if (data && data.length && draft[tKey]) { - for (var bi = 0; bi < data.length; bi++) { - if (data[bi].time >= draft[tKey]) { barIdx = bi; break; } - } - if (barIdx === 0 && data[data.length - 1].time < draft[tKey]) barIdx = data.length - 1; - } - var inp = document.createElement('input'); - inp.type = 'number'; - inp.className = 'ts-input'; - inp.value = barIdx; - inp.min = '0'; - inp.max = data ? String(data.length - 1) : '0'; - inp.step = '1'; - inp.addEventListener('input', function() { - if (!data || !data.length) return; - var idx = Math.max(0, Math.min(parseInt(inp.value) || 0, data.length - 1)); - draft[tKey] = data[idx].time; - }); - inp.addEventListener('keydown', function(e) { e.stopPropagation(); }); - return inp; - } - - if (d.type === 'hline') { - addSectionHeading('PRICE'); - var pRow = makeRow('Price'); - pRow.ctrl.appendChild(makeNumberInput(draft.price || draft.p1 || 0, function(v) { - draft.price = v; draft.p1 = v; - })); - body.appendChild(pRow.row); - } else if (d.type === 'trendline' || d.type === 'ray' || d.type === 'extended_line' || d.type === 'fibonacci' || d.type === 'measure' || - d.type === 'fib_timezone' || d.type === 'fib_fan' || d.type === 'fib_arc' || d.type === 'fib_circle' || - d.type === 'fib_spiral' || d.type === 'gann_box' || d.type === 'gann_square_fixed' || d.type === 'gann_square' || d.type === 'gann_fan' || - d.type === 'arrow_marker' || d.type === 'arrow' || d.type === 'circle' || d.type === 'ellipse' || d.type === 'curve' || - d.type === 'long_position' || d.type === 'short_position' || d.type === 'forecast' || - d.type === 'bars_pattern' || d.type === 'ghost_feed' || d.type === 'projection' || d.type === 'fixed_range_vol' || - d.type === 'price_range' || d.type === 'date_range' || d.type === 'date_price_range') { - addSectionHeading('#1'); - var b1Row = makeRow('Bar'); - b1Row.ctrl.appendChild(makeBarInput('t1')); - body.appendChild(b1Row.row); - var p1Row = makeRow('Price'); - p1Row.ctrl.appendChild(makeNumberInput(draft.p1 || 0, function(v) { draft.p1 = v; })); - body.appendChild(p1Row.row); - addSectionHeading('#2'); - var b2Row = makeRow('Bar'); - b2Row.ctrl.appendChild(makeBarInput('t2')); - body.appendChild(b2Row.row); - var p2Row = makeRow('Price'); - p2Row.ctrl.appendChild(makeNumberInput(draft.p2 || 0, function(v) { draft.p2 = v; })); - body.appendChild(p2Row.row); - } else if (d.type === 'fib_extension' || d.type === 'fib_channel' || d.type === 'fib_wedge' || d.type === 'pitchfan' || d.type === 'fib_time' || - d.type === 'rotated_rect' || d.type === 'triangle' || d.type === 'shape_arc' || d.type === 'double_curve') { - addSectionHeading('#1'); - var b1Row = makeRow('Bar'); - b1Row.ctrl.appendChild(makeBarInput('t1')); - body.appendChild(b1Row.row); - var p1Row = makeRow('Price'); - p1Row.ctrl.appendChild(makeNumberInput(draft.p1 || 0, function(v) { draft.p1 = v; })); - body.appendChild(p1Row.row); - addSectionHeading('#2'); - var b2Row = makeRow('Bar'); - b2Row.ctrl.appendChild(makeBarInput('t2')); - body.appendChild(b2Row.row); - var p2Row = makeRow('Price'); - p2Row.ctrl.appendChild(makeNumberInput(draft.p2 || 0, function(v) { draft.p2 = v; })); - body.appendChild(p2Row.row); - addSectionHeading('#3'); - var b3Row = makeRow('Bar'); - b3Row.ctrl.appendChild(makeBarInput('t3')); - body.appendChild(b3Row.row); - var p3Row = makeRow('Price'); - p3Row.ctrl.appendChild(makeNumberInput(draft.p3 || 0, function(v) { draft.p3 = v; })); - body.appendChild(p3Row.row); - } else if (d.type === 'vline') { - addSectionHeading('TIME'); - var vbRow = makeRow('Bar'); - vbRow.ctrl.appendChild(makeBarInput('t1')); - body.appendChild(vbRow.row); - } else if (d.type === 'crossline') { - addSectionHeading('POSITION'); - var cbRow = makeRow('Bar'); - cbRow.ctrl.appendChild(makeBarInput('t1')); - body.appendChild(cbRow.row); - var pRow = makeRow('Price'); - pRow.ctrl.appendChild(makeNumberInput(draft.p1 || 0, function(v) { draft.p1 = v; })); - body.appendChild(pRow.row); - } else if (d.type === 'hray') { - addSectionHeading('POSITION'); - var hbRow = makeRow('Bar'); - hbRow.ctrl.appendChild(makeBarInput('t1')); - body.appendChild(hbRow.row); - var pRow = makeRow('Price'); - pRow.ctrl.appendChild(makeNumberInput(draft.p1 || 0, function(v) { draft.p1 = v; })); - body.appendChild(pRow.row); - } else if (d.type === 'flat_channel') { - addSectionHeading('LEVELS'); - var p1Row = makeRow('Upper level'); - p1Row.ctrl.appendChild(makeNumberInput(draft.p1 || 0, function(v) { draft.p1 = v; })); - body.appendChild(p1Row.row); - var p2Row = makeRow('Lower level'); - p2Row.ctrl.appendChild(makeNumberInput(draft.p2 || 0, function(v) { draft.p2 = v; })); - body.appendChild(p2Row.row); - } else if (d.type === 'regression_channel') { - addSectionHeading('#1'); - var rb1 = makeRow('Bar'); - rb1.ctrl.appendChild(makeBarInput('t1')); - body.appendChild(rb1.row); - var rp1 = makeRow('Price'); - rp1.ctrl.appendChild(makeNumberInput(draft.p1 || 0, function(v) { draft.p1 = v; })); - body.appendChild(rp1.row); - addSectionHeading('#2'); - var rb2 = makeRow('Bar'); - rb2.ctrl.appendChild(makeBarInput('t2')); - body.appendChild(rb2.row); - var rp2 = makeRow('Price'); - rp2.ctrl.appendChild(makeNumberInput(draft.p2 || 0, function(v) { draft.p2 = v; })); - body.appendChild(rp2.row); - } else if (d.type === 'rect') { - addSectionHeading('TOP-LEFT'); - var rb1 = makeRow('Bar'); - rb1.ctrl.appendChild(makeBarInput('t1')); - body.appendChild(rb1.row); - var p1Row = makeRow('Price'); - p1Row.ctrl.appendChild(makeNumberInput(draft.p1 || 0, function(v) { draft.p1 = v; })); - body.appendChild(p1Row.row); - addSectionHeading('BOTTOM-RIGHT'); - var rb2 = makeRow('Bar'); - rb2.ctrl.appendChild(makeBarInput('t2')); - body.appendChild(rb2.row); - var p2Row = makeRow('Price'); - p2Row.ctrl.appendChild(makeNumberInput(draft.p2 || 0, function(v) { draft.p2 = v; })); - body.appendChild(p2Row.row); - } else if (d.type === 'channel') { - addSectionHeading('#1'); - var cb1 = makeRow('Bar'); - cb1.ctrl.appendChild(makeBarInput('t1')); - body.appendChild(cb1.row); - var cp1 = makeRow('Price'); - cp1.ctrl.appendChild(makeNumberInput(draft.p1 || 0, function(v) { draft.p1 = v; })); - body.appendChild(cp1.row); - addSectionHeading('#2'); - var cb2 = makeRow('Bar'); - cb2.ctrl.appendChild(makeBarInput('t2')); - body.appendChild(cb2.row); - var cp2 = makeRow('Price'); - cp2.ctrl.appendChild(makeNumberInput(draft.p2 || 0, function(v) { draft.p2 = v; })); - body.appendChild(cp2.row); - addSectionHeading('CHANNEL'); - var offRow = makeRow('Offset (px)'); - offRow.ctrl.appendChild(makeNumberInput(draft.offset || 30, function(v) { draft.offset = v; })); - body.appendChild(offRow.row); - } else if (d.type === 'brush' || d.type === 'highlighter' || d.type === 'path' || d.type === 'polyline') { - addSectionHeading('POSITION'); - var noRow = document.createElement('div'); - noRow.className = 'tv-settings-row'; - noRow.style.cssText = 'color:var(--pywry-tvchart-text-muted,#787b86);font-size:12px;'; - noRow.textContent = 'Freeform drawing \u2014 drag to reposition.'; - body.appendChild(noRow); - } else if (d.type === 'arrow_mark_up' || d.type === 'arrow_mark_down' || d.type === 'arrow_mark_left' || d.type === 'arrow_mark_right' || d.type === 'anchored_vwap') { - addSectionHeading('POSITION'); - var abRow = makeRow('Bar'); - abRow.ctrl.appendChild(makeBarInput('t1')); - body.appendChild(abRow.row); - var apRow = makeRow('Price'); - apRow.ctrl.appendChild(makeNumberInput(draft.p1 || 0, function(v) { draft.p1 = v; })); - body.appendChild(apRow.row); - } else if (d.type === 'text') { - addSectionHeading('POSITION'); - var tbRow = makeRow('Bar'); - tbRow.ctrl.appendChild(makeBarInput('t1')); - body.appendChild(tbRow.row); - var tpRow = makeRow('Price'); - tpRow.ctrl.appendChild(makeNumberInput(draft.p1 || 0, function(v) { draft.p1 = v; })); - body.appendChild(tpRow.row); - } else { - if (draft.p1 !== undefined) { - var p1Row = makeRow('Price 1'); - p1Row.ctrl.appendChild(makeNumberInput(draft.p1, function(v) { draft.p1 = v; })); - body.appendChild(p1Row.row); - } - if (draft.p2 !== undefined) { - var p2Row = makeRow('Price 2'); - p2Row.ctrl.appendChild(makeNumberInput(draft.p2, function(v) { draft.p2 = v; })); - body.appendChild(p2Row.row); - } - } - - } else if (activeTab === 'Visibility') { - addSectionHeading('TIME INTERVALS'); - addVisibilityIntervals(body); - addSectionHeading('DRAWING'); - var hRow = makeRow('Hidden'); - hRow.ctrl.appendChild(makeCheckbox(!!draft.hidden, function(v) { draft.hidden = v; })); - body.appendChild(hRow.row); - var lkRow = makeRow('Locked'); - lkRow.ctrl.appendChild(makeCheckbox(!!draft.locked, function(v) { draft.locked = v; })); - body.appendChild(lkRow.row); - } - } - - // Footer - var footer = document.createElement('div'); - footer.className = 'tv-settings-footer'; - footer.style.cssText = 'position:relative;bottom:auto;left:auto;right:auto;'; - var cancelBtn = document.createElement('button'); - cancelBtn.className = 'ts-btn-cancel'; - cancelBtn.textContent = 'Cancel'; - cancelBtn.addEventListener('click', function() { _tvHideDrawingSettings(); }); - footer.appendChild(cancelBtn); - var okBtn = document.createElement('button'); - okBtn.className = 'ts-btn-ok'; - okBtn.textContent = 'Ok'; - okBtn.addEventListener('click', function() { - // Apply draft onto original drawing - Object.assign(d, draft); - // Sync native price line for hline - if (d.type === 'hline') { - _tvSyncPriceLineColor(chartId, drawIdx, d.color || _drawDefaults.color); - _tvSyncPriceLinePrice(chartId, drawIdx, d.price || d.p1); - } - _tvRenderDrawings(chartId); - if (_floatingToolbar) { - _tvHideFloatingToolbar(); - _tvShowFloatingToolbar(chartId, drawIdx); - } - _tvHideDrawingSettings(); - }); - footer.appendChild(okBtn); - panel.appendChild(footer); - - renderTabs(); - renderBody(); - ds.uiLayer.appendChild(overlay); -} - diff --git a/pywry/pywry/frontend/src/tvchart/08-settings/00-state-helpers.js b/pywry/pywry/frontend/src/tvchart/08-settings/00-state-helpers.js new file mode 100644 index 0000000..2f9990e --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/08-settings/00-state-helpers.js @@ -0,0 +1,189 @@ +// --------------------------------------------------------------------------- +// Drawing Settings Panel (TV-style modal per drawing type) +// --------------------------------------------------------------------------- +var _settingsOverlay = null; +var _chartSettingsOverlay = null; +var _compareOverlay = null; +var _seriesSettingsOverlay = null; +var _volumeSettingsOverlay = null; +var _settingsOverlayChartId = null; +var _chartSettingsOverlayChartId = null; +var _compareOverlayChartId = null; +var _seriesSettingsOverlayChartId = null; +var _seriesSettingsOverlaySeriesId = null; +var _volumeSettingsOverlayChartId = null; + +var _DRAW_TYPE_NAMES = { + hline: 'Horizontal Line', trendline: 'Trend Line', rect: 'Rectangle', + channel: 'Parallel Channel', fibonacci: 'Fibonacci Retracement', + fib_extension: 'Trend-Based Fib Extension', fib_channel: 'Fib Channel', + fib_timezone: 'Fib Time Zone', fib_fan: 'Fib Speed Resistance Fan', + fib_arc: 'Fib Speed Resistance Arcs', fib_circle: 'Fib Circles', + fib_wedge: 'Fib Wedge', pitchfan: 'Pitchfan', + fib_time: 'Trend-Based Fib Time', fib_spiral: 'Fib Spiral', + gann_box: 'Gann Box', gann_square_fixed: 'Gann Square Fixed', + gann_square: 'Gann Square', gann_fan: 'Gann Fan', + text: 'Text', measure: 'Measure', brush: 'Brush', + ray: 'Ray', extended_line: 'Extended Line', hray: 'Horizontal Ray', + vline: 'Vertical Line', crossline: 'Cross Line', + flat_channel: 'Flat Top/Bottom', regression_channel: 'Regression Trend', + highlighter: 'Highlighter', + arrow_marker: 'Arrow Marker', arrow: 'Arrow', + arrow_mark_up: 'Arrow Mark Up', arrow_mark_down: 'Arrow Mark Down', + arrow_mark_left: 'Arrow Mark Left', arrow_mark_right: 'Arrow Mark Right', + circle: 'Circle', ellipse: 'Ellipse', triangle: 'Triangle', + rotated_rect: 'Rotated Rectangle', path: 'Path', polyline: 'Polyline', + shape_arc: 'Arc', curve: 'Curve', double_curve: 'Double Curve', + long_position: 'Long Position', short_position: 'Short Position', + forecast: 'Forecast', bars_pattern: 'Bars Pattern', + ghost_feed: 'Ghost Feed', projection: 'Projection', + anchored_vwap: 'Anchored VWAP', fixed_range_vol: 'Fixed Range Volume Profile', + price_range: 'Price Range', date_range: 'Date Range', + date_price_range: 'Date and Price Range', + anchored_text: 'Anchored Text', note: 'Note', price_note: 'Price Note', + pin: 'Pin', callout: 'Callout', comment: 'Comment', + price_label: 'Price Label', signpost: 'Signpost', flag_mark: 'Flag Mark' +}; + +var _LINE_STYLE_NAMES = ['Solid', 'Dashed', 'Dotted']; + +function _tvInteractiveNavigationOptions() { + return { + handleScroll: { + mouseWheel: true, + pressedMouseMove: true, + horzTouchDrag: true, + vertTouchDrag: true, + }, + handleScale: { + mouseWheel: true, + pinch: true, + axisPressedMouseMove: { + time: true, + price: true, + }, + axisDoubleClickReset: { + time: true, + price: true, + }, + }, + }; +} + +function _tvLockedNavigationOptions() { + return { + handleScroll: { + mouseWheel: false, + pressedMouseMove: false, + horzTouchDrag: false, + vertTouchDrag: false, + }, + handleScale: { + mouseWheel: false, + pinch: false, + axisPressedMouseMove: { + time: false, + price: false, + }, + axisDoubleClickReset: { + time: false, + price: false, + }, + }, + }; +} + +function _tvEnsureInteractiveNavigation(entry) { + if (!entry || !entry.chart || typeof entry.chart.applyOptions !== 'function') return; + try { entry.chart.applyOptions(_tvInteractiveNavigationOptions()); } catch (e) {} +} + +function _tvSetChartInteractionLocked(chartId, locked) { + if (!chartId) return; + var entry = window.__PYWRY_TVCHARTS__ && window.__PYWRY_TVCHARTS__[chartId]; + if (!entry || !entry.chart || typeof entry.chart.applyOptions !== 'function') return; + + var shouldLock = !!locked; + if (entry._interactionLocked === shouldLock) return; + entry._interactionLocked = shouldLock; + + try { + entry.chart.applyOptions(shouldLock ? _tvLockedNavigationOptions() : _tvInteractiveNavigationOptions()); + } catch (e) { + try { _tvEnsureInteractiveNavigation(entry); } catch (err) {} + } + + // Block pointer events on the chart container so internal elements + // (e.g. the pane separator / plot divider) don't show hover effects. + if (entry.container) { + entry.container.style.pointerEvents = shouldLock ? 'none' : ''; + } + + if (shouldLock) { + // Clear draw hover visuals so no stale hover feedback remains behind the modal. + if (_drawHoverIdx !== -1 && _drawSelectedChart === chartId) { + _drawHoverIdx = -1; + _tvRenderDrawings(chartId); + } + } +} + +function _tvHideDrawingSettings() { + _tvHideColorOpacityPopup(); + if (_settingsOverlay && _settingsOverlay.parentNode) { + _settingsOverlay.parentNode.removeChild(_settingsOverlay); + } + if (_settingsOverlayChartId) _tvSetChartInteractionLocked(_settingsOverlayChartId, false); + _settingsOverlay = null; + _settingsOverlayChartId = null; + _tvRefreshLegendVisibility(); +} + +function _tvHideChartSettings() { + _tvHideColorOpacityPopup(); + if (_chartSettingsOverlay && _chartSettingsOverlay.parentNode) { + _chartSettingsOverlay.parentNode.removeChild(_chartSettingsOverlay); + } + if (_chartSettingsOverlayChartId) _tvSetChartInteractionLocked(_chartSettingsOverlayChartId, false); + _chartSettingsOverlay = null; + _chartSettingsOverlayChartId = null; + _tvRefreshLegendVisibility(); +} + +function _tvHideVolumeSettings() { + _tvHideColorOpacityPopup(); + if (_volumeSettingsOverlay && _volumeSettingsOverlay.parentNode) { + _volumeSettingsOverlay.parentNode.removeChild(_volumeSettingsOverlay); + } + if (_volumeSettingsOverlayChartId) _tvSetChartInteractionLocked(_volumeSettingsOverlayChartId, false); + _volumeSettingsOverlay = null; + _volumeSettingsOverlayChartId = null; + _tvRefreshLegendVisibility(); +} + +function _tvHideComparePanel() { + if (_compareOverlay && _compareOverlay.parentNode) { + _compareOverlay.parentNode.removeChild(_compareOverlay); + } + if (_compareOverlayChartId) _tvSetChartInteractionLocked(_compareOverlayChartId, false); + _compareOverlay = null; + _compareOverlayChartId = null; + _tvRefreshLegendVisibility(); +} + +// --------------------------------------------------------------------------- +// Symbol Search Dialog +// --------------------------------------------------------------------------- +var _symbolSearchOverlay = null; +var _symbolSearchChartId = null; + +function _tvHideSymbolSearch() { + if (_symbolSearchOverlay && _symbolSearchOverlay.parentNode) { + _symbolSearchOverlay.parentNode.removeChild(_symbolSearchOverlay); + } + if (_symbolSearchChartId) _tvSetChartInteractionLocked(_symbolSearchChartId, false); + _symbolSearchOverlay = null; + _symbolSearchChartId = null; + _tvRefreshLegendVisibility(); +} + diff --git a/pywry/pywry/frontend/src/tvchart/08-settings/01-symbol-search.js b/pywry/pywry/frontend/src/tvchart/08-settings/01-symbol-search.js new file mode 100644 index 0000000..9bd78ea --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/08-settings/01-symbol-search.js @@ -0,0 +1,508 @@ +function _tvShowSymbolSearchDialog(chartId, options) { + _tvHideSymbolSearch(); + var resolved = _tvResolveChartEntry(chartId); + if (!resolved || !resolved.entry) return; + chartId = resolved.chartId; + var entry = resolved.entry; + options = options || {}; + var ds = window.__PYWRY_DRAWINGS__[chartId] || _tvEnsureDrawingLayer(chartId); + if (!ds) return; + + var overlay = document.createElement('div'); + overlay.className = 'tv-settings-overlay'; + _symbolSearchOverlay = overlay; + _symbolSearchChartId = chartId; + _tvSetChartInteractionLocked(chartId, true); + _tvRefreshLegendVisibility(); + overlay.addEventListener('click', function(e) { + if (e.target === overlay) _tvHideSymbolSearch(); + }); + overlay.addEventListener('mousedown', function(e) { e.stopPropagation(); }); + overlay.addEventListener('wheel', function(e) { e.stopPropagation(); }); + + var panel = document.createElement('div'); + panel.className = 'tv-symbol-search-panel'; + overlay.appendChild(panel); + + // Header + var header = document.createElement('div'); + header.className = 'tv-compare-header'; + var title = document.createElement('h3'); + title.textContent = 'Symbol Search'; + header.appendChild(title); + var closeBtn = document.createElement('button'); + closeBtn.className = 'tv-settings-close'; + closeBtn.innerHTML = ''; + closeBtn.addEventListener('click', function() { _tvHideSymbolSearch(); }); + header.appendChild(closeBtn); + panel.appendChild(header); + + // Search row + var searchRow = document.createElement('div'); + searchRow.className = 'tv-compare-search-row'; + var searchIcon = document.createElement('span'); + searchIcon.className = 'tv-compare-search-icon'; + searchIcon.innerHTML = ''; + searchRow.appendChild(searchIcon); + var searchInput = document.createElement('input'); + searchInput.type = 'text'; + searchInput.className = 'tv-compare-search-input'; + searchInput.placeholder = 'Search symbol...'; + searchInput.autocomplete = 'off'; + searchInput.spellcheck = false; + searchRow.appendChild(searchInput); + panel.appendChild(searchRow); + + // Filter row — exchange and type dropdowns from datafeed config + var filterRow = document.createElement('div'); + filterRow.className = 'tv-symbol-search-filters'; + + var exchangeSelect = document.createElement('select'); + exchangeSelect.className = 'tv-symbol-search-filter-select'; + var exchangeDefault = document.createElement('option'); + exchangeDefault.value = ''; + exchangeDefault.textContent = 'All Exchanges'; + exchangeSelect.appendChild(exchangeDefault); + + var typeSelect = document.createElement('select'); + typeSelect.className = 'tv-symbol-search-filter-select'; + var typeDefault = document.createElement('option'); + typeDefault.value = ''; + typeDefault.textContent = 'All Types'; + typeSelect.appendChild(typeDefault); + + // Populate from datafeed config if available + var cfg = entry._datafeedConfig || {}; + var exchanges = cfg.exchanges || []; + for (var ei = 0; ei < exchanges.length; ei++) { + if (!exchanges[ei].value) continue; + var opt = document.createElement('option'); + opt.value = exchanges[ei].value; + opt.textContent = exchanges[ei].name || exchanges[ei].value; + exchangeSelect.appendChild(opt); + } + var symTypes = cfg.symbols_types || cfg.symbolsTypes || []; + for (var ti = 0; ti < symTypes.length; ti++) { + if (!symTypes[ti].value) continue; + var topt = document.createElement('option'); + topt.value = symTypes[ti].value; + topt.textContent = symTypes[ti].name || symTypes[ti].value; + typeSelect.appendChild(topt); + } + + filterRow.appendChild(exchangeSelect); + filterRow.appendChild(typeSelect); + panel.appendChild(filterRow); + + // Results area + var searchResults = []; + var pendingSearchRequestId = null; + var searchDebounce = null; + var maxResults = 50; + + var resultsArea = document.createElement('div'); + resultsArea.className = 'tv-symbol-search-results'; + panel.appendChild(resultsArea); + + function normalizeInfo(item) { + if (!item || typeof item !== 'object') return null; + var symbol = String(item.symbol || item.ticker || '').trim(); + if (!symbol) return null; + var ticker = String(item.ticker || '').trim().toUpperCase(); + if (!ticker) { + ticker = symbol.indexOf(':') >= 0 ? symbol.split(':').pop().trim().toUpperCase() : symbol.toUpperCase(); + } + return { + symbol: symbol, + ticker: ticker, + displaySymbol: ticker || symbol, + requestSymbol: ticker || symbol, + fullName: String(item.fullName || item.full_name || '').trim(), + description: String(item.description || '').trim(), + exchange: String(item.exchange || item.listedExchange || item.listed_exchange || '').trim(), + type: String(item.type || item.symbolType || item.symbol_type || '').trim(), + currency: String(item.currency || item.currencyCode || item.currency_code || '').trim(), + }; + } + + function renderResults() { + resultsArea.innerHTML = ''; + if (!searchResults.length) { + if (String(searchInput.value || '').trim().length > 0) { + var empty = document.createElement('div'); + empty.className = 'tv-compare-search-empty'; + empty.textContent = 'No symbols found'; + resultsArea.appendChild(empty); + } + return; + } + var list = document.createElement('div'); + list.className = 'tv-compare-results-list'; + for (var i = 0; i < searchResults.length; i++) { + (function(info) { + var row = document.createElement('div'); + row.className = 'tv-compare-result-row tv-symbol-search-result-row'; + + var identity = document.createElement('div'); + identity.className = 'tv-compare-result-identity'; + + var badge = document.createElement('div'); + badge.className = 'tv-compare-result-badge'; + badge.textContent = (info.symbol || '?').slice(0, 1); + identity.appendChild(badge); + + var copy = document.createElement('div'); + copy.className = 'tv-compare-result-copy'; + + var top = document.createElement('div'); + top.className = 'tv-compare-result-top'; + + var symbolEl = document.createElement('span'); + symbolEl.className = 'tv-compare-result-symbol'; + symbolEl.textContent = info.displaySymbol || info.symbol; + top.appendChild(symbolEl); + + // Right-side meta: exchange · type + var parts = []; + if (info.exchange) parts.push(info.exchange); + if (info.type) parts.push(info.type); + if (parts.length) { + var meta = document.createElement('span'); + meta.className = 'tv-compare-result-meta'; + meta.textContent = parts.join(' \u00b7 '); + top.appendChild(meta); + } + + copy.appendChild(top); + + // Subtitle: actual security name + var nameText = info.fullName || info.description; + if (nameText) { + var sub = document.createElement('div'); + sub.className = 'tv-compare-result-sub'; + sub.textContent = nameText; + copy.appendChild(sub); + } + + identity.appendChild(copy); + row.appendChild(identity); + + row.addEventListener('click', function() { + selectSymbol(info); + }); + + list.appendChild(row); + })(searchResults[i]); + } + resultsArea.appendChild(list); + } + + function requestSearch(query) { + query = String(query || '').trim(); + var normalized = query.toUpperCase(); + if (normalized.indexOf(':') >= 0) { + normalized = normalized.split(':').pop().trim(); + } + searchResults = []; + renderResults(); + if (!normalized || normalized.length < 1) return; + + var exch = exchangeSelect.value || ''; + var stype = typeSelect.value || ''; + + pendingSearchRequestId = _tvRequestDatafeedSearch(chartId, normalized, maxResults, function(resp) { + if (!resp || resp.requestId !== pendingSearchRequestId) return; + pendingSearchRequestId = null; + if (resp.error) { + searchResults = []; + renderResults(); + return; + } + var items = Array.isArray(resp.items) ? resp.items : []; + var parsed = []; + for (var idx = 0; idx < items.length; idx++) { + var n = normalizeInfo(items[idx]); + if (n) parsed.push(n); + } + searchResults = parsed; + renderResults(); + }, exch, stype); + } + + function selectSymbol(info) { + var symbol = info.requestSymbol || info.ticker || info.symbol; + if (!symbol || !window.pywry) return; + + // Resolve full symbol info, then emit data-request to change main series + _tvRequestDatafeedResolve(chartId, symbol, function(resp) { + var symbolInfo = null; + if (resp && resp.symbolInfo) { + symbolInfo = _tvNormalizeSymbolInfoFull(resp.symbolInfo); + } + + // -- Update ALL metadata for the new symbol -- + + // Payload title + series descriptor (for chart recreate on interval change) + if (entry.payload) { + entry.payload.title = symbol.toUpperCase(); + if (entry.payload.series && Array.isArray(entry.payload.series) && entry.payload.series[0]) { + entry.payload.series[0].symbol = symbol.toUpperCase(); + } + } + + // Resolved symbol info — used by Security Info modal, legend, etc. + if (symbolInfo) { + entry._mainSymbolInfo = symbolInfo; + if (!entry._resolvedSymbolInfo) entry._resolvedSymbolInfo = {}; + entry._resolvedSymbolInfo.main = symbolInfo; + } + + // Reset first-data-request flag for main series so full history is fetched + if (entry._dataRequestSeen) { + entry._dataRequestSeen.main = false; + } + + // Update exchange clock to new timezone + if (symbolInfo && symbolInfo.timezone) { + (function(tz) { + var clockEl = document.getElementById('tvchart-exchange-clock'); + if (clockEl) { + function updateClock() { + try { + var now = new Date(); + var timeStr = now.toLocaleString('en-US', { + timeZone: tz, + hour: '2-digit', minute: '2-digit', second: '2-digit', + hour12: false, + }); + var offsetParts = now.toLocaleString('en-US', { + timeZone: tz, timeZoneName: 'shortOffset', + }).split(' '); + var utcOffset = offsetParts[offsetParts.length - 1] || ''; + clockEl.textContent = timeStr + ' (' + utcOffset + ')'; + } catch(e) { clockEl.textContent = ''; } + } + updateClock(); + if (entry._clockInterval) clearInterval(entry._clockInterval); + entry._clockInterval = setInterval(updateClock, 1000); + } + })(symbolInfo.timezone); + } + + // Update chart time axis localization for new timezone + if (symbolInfo && symbolInfo.timezone && symbolInfo.timezone !== 'Etc/UTC' && entry.chart) { + try { + var tz = symbolInfo.timezone; + entry.chart.applyOptions({ + localization: { + timeFormatter: function(ts) { + var ms = (typeof ts === 'number' && ts < 1e12) ? ts * 1000 : ts; + return new Date(ms).toLocaleString('en-US', { + timeZone: tz, + month: 'short', day: 'numeric', + hour: '2-digit', minute: '2-digit', + hour12: false, + }); + }, + }, + timeScale: { + tickMarkFormatter: function(time, tickType, locale) { + var ms = (typeof time === 'number' && time < 1e12) ? time * 1000 : time; + var d = new Date(ms); + var opts = { timeZone: tz }; + if (tickType === 0) { opts.year = 'numeric'; return d.toLocaleString('en-US', opts); } + if (tickType === 1) { opts.month = 'short'; return d.toLocaleString('en-US', opts); } + if (tickType === 2) { opts.month = 'short'; opts.day = 'numeric'; return d.toLocaleString('en-US', opts); } + opts.hour = '2-digit'; opts.minute = '2-digit'; opts.hour12 = false; + return d.toLocaleString('en-US', opts); + }, + }, + }); + } catch (tzErr) {} + } + + // Unsubscribe old real-time stream, subscribe new + if (entry._datafeedSubscriptions && entry._datafeedSubscriptions.main && entry.datafeed) { + var oldGuid = entry._datafeedSubscriptions.main; + entry.datafeed.unsubscribeBars(oldGuid); + var activeInterval = _tvCurrentInterval(chartId); + var newGuid = chartId + '_main_' + activeInterval; + entry._datafeedSubscriptions.main = newGuid; + var mainSeries = entry.seriesMap && entry.seriesMap.main; + entry.datafeed.subscribeBars(symbolInfo || info, activeInterval, function(bar) { + var normalized = _tvNormalizeBarsForSeriesType([bar], 'Candlestick'); + if (normalized.length > 0 && mainSeries) { + mainSeries.update(normalized[0]); + } + if (bar.volume != null && entry.volumeMap && entry.volumeMap.main) { + entry.volumeMap.main.update({ time: bar.time, value: bar.volume }); + } + }, newGuid, function() {}); + } + + var activeInterval = _tvCurrentInterval(chartId); + var periodParams = _tvBuildPeriodParams(entry, 'main'); + periodParams.firstDataRequest = true; + + window.pywry.emit('tvchart:data-request', { + chartId: chartId, + symbol: symbol.toUpperCase(), + symbolInfo: symbolInfo || info, + seriesId: 'main', + interval: activeInterval, + resolution: activeInterval, + periodParams: periodParams, + }); + + // Update the legend's cached base title + var legendBox = _tvScopedById(chartId, 'tvchart-legend-box'); + if (legendBox) { + legendBox.dataset.baseTitle = symbol.toUpperCase(); + } + _tvRefreshLegendTitle(chartId); + _tvEmitLegendRefresh(chartId); + _tvRenderHoverLegend(chartId, null); + _tvHideSymbolSearch(); + }); + } + + // Wire up events + searchInput.addEventListener('input', function() { + if (searchDebounce) clearTimeout(searchDebounce); + searchDebounce = setTimeout(function() { + requestSearch(searchInput.value); + }, 180); + }); + + exchangeSelect.addEventListener('change', function() { + if (String(searchInput.value || '').trim().length > 0) requestSearch(searchInput.value); + }); + typeSelect.addEventListener('change', function() { + if (String(searchInput.value || '').trim().length > 0) requestSearch(searchInput.value); + }); + + searchInput.addEventListener('keydown', function(e) { + e.stopPropagation(); + if (e.key === 'Escape') { + _tvHideSymbolSearch(); + return; + } + if (e.key === 'Enter' && searchResults.length > 0) { + selectSymbol(searchResults[0]); + } + }); + + ds.uiLayer.appendChild(overlay); + searchInput.focus(); + + // Programmatic drive: pre-fill the search query and optionally + // auto-select the first result (or a specific symbol match) when + // the datafeed responds. Driven by `tvchart:symbol-search` callers + // that pass `{query, autoSelect, symbolType, exchange}` (e.g. agent + // tools). ``symbolType`` / ``exchange`` pre-select the filter + // dropdowns so the datafeed search is narrowed before it runs — + // e.g. ``{query: "SPY", symbolType: "etf"}`` skips over SPYM. + if (options.query) { + var preQuery = String(options.query).trim(); + if (preQuery) { + searchInput.value = preQuery; + var autoSelect = options.autoSelect !== false; + // Pre-select filter dropdowns (case-insensitive match against + // option values). Silently ignore unknown filter values so a + // caller's ``symbolType: "etf"`` request doesn't break the + // search when the datafeed exposes ``ETF`` instead. + if (options.symbolType) { + var wantType = String(options.symbolType).toLowerCase(); + for (var tsi = 0; tsi < typeSelect.options.length; tsi++) { + if (String(typeSelect.options[tsi].value).toLowerCase() === wantType) { + typeSelect.selectedIndex = tsi; + break; + } + } + } + if (options.exchange) { + var wantExch = String(options.exchange).toLowerCase(); + for (var esi = 0; esi < exchangeSelect.options.length; esi++) { + if (String(exchangeSelect.options[esi].value).toLowerCase() === wantExch) { + exchangeSelect.selectedIndex = esi; + break; + } + } + } + // Optimistically advertise the requested ticker on the chart's + // payload BEFORE the datafeed search round-trip completes. Other + // events that fire in the meantime (e.g. a `tvchart:interval-change` + // dispatched by the same agent turn) read this field to decide + // which symbol to refetch — without the optimistic update they + // see the previous symbol and clobber the pending change with a + // refetch of the old ticker. ``selectSymbol`` re-confirms the + // value once the resolve responds; if the search fails to find a + // match the optimistic value is harmless because no data-request + // ever fires. + var optimisticTicker = preQuery.toUpperCase(); + if (optimisticTicker.indexOf(':') >= 0) { + optimisticTicker = optimisticTicker.split(':').pop().trim(); + } + if (entry && entry.payload) { + entry.payload.title = optimisticTicker; + if (entry.payload.series && Array.isArray(entry.payload.series) && entry.payload.series[0]) { + entry.payload.series[0].symbol = optimisticTicker; + } + } + + var prevRender = renderResults; + // Wrap renderResults to auto-select on first non-empty results. + var selected = false; + // Pull the bare ticker from a symbol record — datafeed results + // may carry a fully-qualified ``EXCHANGE:TICKER`` in ``ticker`` + // and the bare ticker in ``symbol`` / ``requestSymbol``. Exact + // match has to beat prefix match (``SPY`` → ``SPY``, not + // ``SPYM``) even when the datafeed returns them alphabetically. + function _bareTickerSearch(rec) { + if (!rec) return ''; + var candidates = [rec.symbol, rec.requestSymbol, rec.ticker]; + for (var ci = 0; ci < candidates.length; ci++) { + var raw = String(candidates[ci] || '').toUpperCase(); + if (!raw) continue; + if (raw.indexOf(':') >= 0) raw = raw.split(':').pop().trim(); + if (raw) return raw; + } + return ''; + } + renderResults = function() { + prevRender(); + if (selected || !autoSelect || !searchResults.length) return; + var match = null; + for (var mi = 0; mi < searchResults.length; mi++) { + if (_bareTickerSearch(searchResults[mi]) === optimisticTicker) { + match = searchResults[mi]; + break; + } + } + if (!match) { + for (var mj = 0; mj < searchResults.length; mj++) { + if (_bareTickerSearch(searchResults[mj]).indexOf(optimisticTicker) === 0) { + match = searchResults[mj]; + break; + } + } + } + if (!match) match = searchResults[0]; + selected = true; + // Re-sync the optimistic value with the actual selected match + // — the auto-pick fallback may have chosen a different ticker + // than the requested query. + var resolvedTicker = (match.ticker || match.requestSymbol || match.symbol || '').toString().toUpperCase(); + if (resolvedTicker && entry && entry.payload) { + entry.payload.title = resolvedTicker; + if (entry.payload.series && Array.isArray(entry.payload.series) && entry.payload.series[0]) { + entry.payload.series[0].symbol = resolvedTicker; + } + } + selectSymbol(match); + }; + requestSearch(preQuery); + } + } +} + diff --git a/pywry/pywry/frontend/src/tvchart/08-settings/02-series-settings.js b/pywry/pywry/frontend/src/tvchart/08-settings/02-series-settings.js new file mode 100644 index 0000000..72b1781 --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/08-settings/02-series-settings.js @@ -0,0 +1,1358 @@ +function _tvHideSeriesSettings() { + _tvHideColorOpacityPopup(); + if (_seriesSettingsOverlay && _seriesSettingsOverlay.parentNode) { + _seriesSettingsOverlay.parentNode.removeChild(_seriesSettingsOverlay); + } + if (_seriesSettingsOverlayChartId) _tvSetChartInteractionLocked(_seriesSettingsOverlayChartId, false); + _seriesSettingsOverlay = null; + _seriesSettingsOverlayChartId = null; + _seriesSettingsOverlaySeriesId = null; + _tvRefreshLegendVisibility(); +} + +function _tvShowSeriesSettings(chartId, seriesId) { + _tvHideSeriesSettings(); + var resolved = _tvResolveChartEntry(chartId); + if (!resolved || !resolved.entry) return; + chartId = resolved.chartId; + var entry = resolved.entry; + var seriesApi = entry.seriesMap ? entry.seriesMap[seriesId] : null; + if (!seriesApi) return; + + var currentType = _tvGuessSeriesType(seriesApi); + var currentOpts = {}; + try { currentOpts = seriesApi.options() || {}; } catch (e) {} + var persistedVisibility = (entry._seriesVisibilityIntervals && entry._seriesVisibilityIntervals[seriesId]) + ? entry._seriesVisibilityIntervals[seriesId] + : null; + var defaultVisibilityIntervals = { + seconds: { enabled: true, min: 1, max: 59 }, + minutes: { enabled: true, min: 1, max: 59 }, + hours: { enabled: true, min: 1, max: 24 }, + days: { enabled: true, min: 1, max: 366 }, + weeks: { enabled: true, min: 1, max: 52 }, + months: { enabled: true, min: 1, max: 12 }, + }; + var persistedStylePrefs = (entry._seriesStylePrefs && entry._seriesStylePrefs[seriesId]) + ? entry._seriesStylePrefs[seriesId] + : null; + var initialStyle = (persistedStylePrefs && persistedStylePrefs.style) + ? persistedStylePrefs.style + : _ssTypeToStyleName(currentType || 'Line'); + var auxStyle = (entry._seriesStyleAux && entry._seriesStyleAux[seriesId]) ? entry._seriesStyleAux[seriesId] : {}; + + // Theme-aware defaults — all pulled from CSS vars so swapping themes + // (or overriding them via CSS) recolors the settings-dialog "Reset" + // state. Fallback literals match the dark-theme palette for the case + // where _cssVar resolves to empty (e.g. running outside the chart's + // themed container). + var themeUp = _cssVar('--pywry-tvchart-up') || '#26a69a'; + var themeDown = _cssVar('--pywry-tvchart-down') || '#ef5350'; + var themeBorderUp = _cssVar('--pywry-tvchart-border-up') || themeUp; + var themeBorderDown = _cssVar('--pywry-tvchart-border-down') || themeDown; + var themeWickUp = _cssVar('--pywry-tvchart-wick-up') || themeUp; + var themeWickDown = _cssVar('--pywry-tvchart-wick-down') || themeDown; + var themeLineColor = _cssVar('--pywry-tvchart-line-default') || '#4c87ff'; + var themeAreaTop = _cssVar('--pywry-tvchart-area-top-default') || themeLineColor; + var themeAreaBottom = _cssVar('--pywry-tvchart-area-bottom-default') || '#10223f'; + var themeBaselineTopFill1 = _cssVar('--pywry-tvchart-baseline-top-fill1') || themeUp; + var themeBaselineTopFill2 = _cssVar('--pywry-tvchart-baseline-top-fill2') || themeUp; + var themeBaselineBottomFill1 = _cssVar('--pywry-tvchart-baseline-bottom-fill1') || themeDown; + var themeBaselineBottomFill2 = _cssVar('--pywry-tvchart-baseline-bottom-fill2') || themeDown; + + var initialState = { + style: initialStyle, + priceSource: 'close', + color: _tvColorToHex( + currentOpts.color || currentOpts.lineColor || (entry._legendSeriesColors && entry._legendSeriesColors[seriesId]) || themeLineColor, + themeLineColor + ), + lineWidth: _tvClamp(_tvToNumber(currentOpts.lineWidth || currentOpts.width, 2), 1, 4), + markersVisible: currentOpts.pointMarkersVisible === true, + areaTopColor: _tvColorToHex(currentOpts.topColor || themeAreaTop, themeAreaTop), + areaBottomColor: _tvColorToHex(currentOpts.bottomColor || themeAreaBottom, themeAreaBottom), + baselineTopLineColor: _tvColorToHex(currentOpts.topLineColor || themeUp, themeUp), + baselineBottomLineColor: _tvColorToHex(currentOpts.bottomLineColor || themeDown, themeDown), + baselineTopFillColor1: _tvColorToHex(currentOpts.topFillColor1 || themeBaselineTopFill1, themeUp), + baselineTopFillColor2: _tvColorToHex(currentOpts.topFillColor2 || themeBaselineTopFill2, themeUp), + baselineBottomFillColor1: _tvColorToHex(currentOpts.bottomFillColor1 || themeBaselineBottomFill1, themeDown), + baselineBottomFillColor2: _tvColorToHex(currentOpts.bottomFillColor2 || themeBaselineBottomFill2, themeDown), + baselineBaseLevel: _tvToNumber((currentOpts.baseValue && currentOpts.baseValue._level), 50), + columnsUpColor: _tvColorToHex(currentOpts.upColor || currentOpts.color || themeUp, themeUp), + columnsDownColor: _tvColorToHex(currentOpts.downColor || currentOpts.color || themeDown, themeDown), + barsUpColor: _tvColorToHex(currentOpts.upColor || themeUp, themeUp), + barsDownColor: _tvColorToHex(currentOpts.downColor || themeDown, themeDown), + barsOpenVisible: currentOpts.openVisible !== false, + priceLineVisible: currentOpts.priceLineVisible !== false, + overrideMinTick: 'Default', + visible: currentOpts.visible !== false, + bodyVisible: true, + bordersVisible: true, + wickVisible: true, + bodyUpColor: _tvColorToHex(currentOpts.upColor || currentOpts.color || themeUp, themeUp), + bodyDownColor: _tvColorToHex(currentOpts.downColor || themeDown, themeDown), + borderUpColor: _tvColorToHex(currentOpts.borderUpColor || currentOpts.upColor || themeBorderUp, themeBorderUp), + borderDownColor: _tvColorToHex(currentOpts.borderDownColor || currentOpts.downColor || themeBorderDown, themeBorderDown), + wickUpColor: _tvColorToHex(currentOpts.wickUpColor || currentOpts.upColor || themeWickUp, themeWickUp), + wickDownColor: _tvColorToHex(currentOpts.wickDownColor || currentOpts.downColor || themeWickDown, themeWickDown), + hlcHighVisible: auxStyle.highVisible !== false, + hlcLowVisible: auxStyle.lowVisible !== false, + hlcCloseVisible: auxStyle.closeVisible !== false, + hlcHighColor: _tvColorToHex(auxStyle.highColor || _cssVar('--pywry-tvchart-hlcarea-high') || '#089981', '#089981'), + hlcLowColor: _tvColorToHex(auxStyle.lowColor || _cssVar('--pywry-tvchart-hlcarea-low') || '#f23645', '#f23645'), + hlcCloseColor: _tvColorToHex(auxStyle.closeColor || (currentOpts.lineColor || currentOpts.color || _cssVar('--pywry-tvchart-hlcarea-close') || '#2962ff'), '#2962ff'), + hlcFillTopColor: auxStyle.fillTopColor || _cssVar('--pywry-tvchart-hlcarea-fill-up') || 'rgba(8, 153, 129, 0.28)', + hlcFillBottomColor: auxStyle.fillBottomColor || _cssVar('--pywry-tvchart-hlcarea-fill-down') || 'rgba(242, 54, 69, 0.28)', + visibilityIntervals: _tvMerge(defaultVisibilityIntervals, persistedVisibility || {}), + }; + if (persistedStylePrefs) { + var persistedKeys = Object.keys(initialState); + for (var pk = 0; pk < persistedKeys.length; pk++) { + var pkey = persistedKeys[pk]; + if (persistedStylePrefs[pkey] !== undefined) initialState[pkey] = persistedStylePrefs[pkey]; + } + } + var draft = _tvMerge({}, initialState); + var label = _tvLegendSeriesLabel(entry, seriesId); + var activeTab = 'style'; + + var overlay = document.createElement('div'); + overlay.className = 'tv-settings-overlay'; + _seriesSettingsOverlay = overlay; + _seriesSettingsOverlayChartId = chartId; + _seriesSettingsOverlaySeriesId = seriesId; + _tvSetChartInteractionLocked(chartId, true); + _tvRefreshLegendVisibility(); + overlay.addEventListener('click', function(e) { + if (e.target === overlay) _tvHideSeriesSettings(); + }); + overlay.addEventListener('mousedown', function(e) { e.stopPropagation(); }); + overlay.addEventListener('wheel', function(e) { e.stopPropagation(); }); + + var panel = document.createElement('div'); + panel.className = 'tv-settings-panel'; + panel.style.cssText = 'width:620px;max-width:calc(100% - 32px);max-height:72vh;display:flex;flex-direction:column;'; + overlay.appendChild(panel); + + var header = document.createElement('div'); + header.className = 'tv-settings-header'; + header.style.cssText = 'position:relative;flex-direction:column;align-items:stretch;padding-bottom:0;'; + + var hdrRow = document.createElement('div'); + hdrRow.style.cssText = 'display:flex;align-items:center;gap:8px;'; + var titleEl = document.createElement('h3'); + titleEl.textContent = label || seriesId; + hdrRow.appendChild(titleEl); + var closeBtn = document.createElement('button'); + closeBtn.className = 'tv-settings-close'; + closeBtn.innerHTML = ''; + closeBtn.addEventListener('click', function() { _tvHideSeriesSettings(); }); + hdrRow.appendChild(closeBtn); + header.appendChild(hdrRow); + + var tabBar = document.createElement('div'); + tabBar.className = 'tv-ind-settings-tabs'; + var styleTab = document.createElement('div'); + styleTab.className = 'tv-ind-settings-tab active'; + styleTab.textContent = 'Style'; + var visTab = document.createElement('div'); + visTab.className = 'tv-ind-settings-tab'; + visTab.textContent = 'Visibility'; + tabBar.appendChild(styleTab); + tabBar.appendChild(visTab); + header.appendChild(tabBar); + panel.appendChild(header); + + var body = document.createElement('div'); + body.className = 'tv-settings-body'; + body.style.cssText = 'flex:1;overflow-y:auto;min-height:80px;'; + panel.appendChild(body); + + function _ssRow(labelText) { + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced'; + var lbl = document.createElement('label'); + lbl.textContent = labelText; + row.appendChild(lbl); + var ctrl = document.createElement('div'); + ctrl.className = 'ts-controls'; + row.appendChild(ctrl); + return { row: row, ctrl: ctrl }; + } + + function _ssSelect(opts, value, onChange) { + var sel = document.createElement('select'); + sel.className = 'ts-select'; + for (var i = 0; i < opts.length; i++) { + var opt = document.createElement('option'); + opt.value = opts[i].v; + opt.textContent = opts[i].l; + if (String(opts[i].v) === String(value)) opt.selected = true; + sel.appendChild(opt); + } + sel.addEventListener('change', function() { onChange(sel.value); }); + return sel; + } + + function _ssCheckbox(value, onChange) { + var cb = document.createElement('input'); + cb.type = 'checkbox'; + cb.className = 'ts-checkbox'; + cb.checked = !!value; + cb.addEventListener('change', function() { onChange(cb.checked); }); + return cb; + } + + function _ssColorLineControl(value, widthValue, onColor, onWidth) { + var wrap = document.createElement('div'); + wrap.style.cssText = 'display:flex;align-items:center;gap:8px;'; + var swatch = document.createElement('div'); + swatch.className = 'ts-swatch'; + swatch.dataset.baseColor = _tvColorToHex(value || '#4c87ff', '#4c87ff'); + swatch.dataset.opacity = String(_tvColorOpacityPercent(value, 100)); + swatch.style.background = value; + swatch.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + _tvShowColorOpacityPopup( + swatch, + swatch.dataset.baseColor || value, + _tvToNumber(swatch.dataset.opacity, 100), + overlay, + function(newColor, newOpacity) { + swatch.dataset.baseColor = newColor; + swatch.dataset.opacity = String(newOpacity); + swatch.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); + linePreview.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); + onColor(_tvColorWithOpacity(newColor, newOpacity, newColor)); + } + ); + }); + var linePreview = document.createElement('div'); + linePreview.style.cssText = 'width:44px;height:2px;background:' + value + ';border-radius:2px;'; + function syncWidth(w) { linePreview.style.height = String(_tvClamp(_tvToNumber(w, 2), 1, 4)) + 'px'; } + syncWidth(widthValue); + onWidth(syncWidth); + wrap.appendChild(swatch); + wrap.appendChild(linePreview); + return wrap; + } + + function _ssDualColorControl(upValue, downValue, onUp, onDown) { + var wrap = document.createElement('div'); + wrap.style.cssText = 'display:flex;align-items:center;gap:8px;'; + function makeSwatch(initial, onChange) { + var sw = document.createElement('div'); + sw.className = 'ts-swatch'; + sw.dataset.baseColor = _tvColorToHex(initial || '#4c87ff', '#4c87ff'); + sw.dataset.opacity = String(_tvColorOpacityPercent(initial, 100)); + sw.style.background = initial; + sw.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + _tvShowColorOpacityPopup( + sw, + sw.dataset.baseColor || initial, + _tvToNumber(sw.dataset.opacity, 100), + overlay, + function(newColor, newOpacity) { + sw.dataset.baseColor = newColor; + sw.dataset.opacity = String(newOpacity); + sw.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); + onChange(_tvColorWithOpacity(newColor, newOpacity, newColor)); + } + ); + }); + wrap.appendChild(sw); + } + makeSwatch(upValue, onUp); + makeSwatch(downValue, onDown); + return wrap; + } + + function _ssColorControl(value, onColor) { + var wrap = document.createElement('div'); + wrap.style.cssText = 'display:flex;align-items:center;gap:8px;'; + var swatch = document.createElement('div'); + swatch.className = 'ts-swatch'; + swatch.dataset.baseColor = _tvColorToHex(value || '#4c87ff', '#4c87ff'); + swatch.dataset.opacity = String(_tvColorOpacityPercent(value, 100)); + swatch.style.background = value; + swatch.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + _tvShowColorOpacityPopup( + swatch, + swatch.dataset.baseColor || value, + _tvToNumber(swatch.dataset.opacity, 100), + overlay, + function(newColor, newOpacity) { + swatch.dataset.baseColor = newColor; + swatch.dataset.opacity = String(newOpacity); + swatch.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); + onColor(_tvColorWithOpacity(newColor, newOpacity, newColor)); + } + ); + }); + wrap.appendChild(swatch); + return wrap; + } + + function _ssIsCandleStyle(styleName) { + var s = String(styleName || ''); + return s === 'Candles' || s === 'Hollow candles'; + } + + function _ssIsHlcAreaStyle(styleName) { + return String(styleName || '') === 'HLC area'; + } + + function _ssIsLineLikeStyle(styleName) { + var s = String(styleName || ''); + return s === 'Line' || s === 'Line with markers' || s === 'Step line'; + } + + function _ssPriceFormatFromTick(value) { + var v = String(value || 'Default'); + if (v === 'Default') return null; + if (v === 'Integer') { + return { type: 'price', precision: 0, minMove: 1 }; + } + var decMatch = v.match(/^(\d+)\s+decimals?$/i); + if (decMatch) { + var precision = _tvClamp(parseInt(decMatch[1], 10) || 0, 0, 15); + return { type: 'price', precision: precision, minMove: Math.pow(10, -precision) }; + } + if (v.indexOf('1/') === 0) { + var denom = parseInt(v.slice(2), 10); + if (isFinite(denom) && denom > 0) { + var minMove = 1 / denom; + var text = String(minMove); + var precisionFromText = (text.indexOf('.') >= 0) ? (text.split('.')[1] || '').length : 0; + var precision = _tvClamp(precisionFromText, 1, 8); + return { type: 'price', precision: precision, minMove: minMove }; + } + } + return null; + } + + function _ssTypeToStyleName(lwcType) { + var t = String(lwcType || 'Line'); + if (t === 'Candlestick') return 'Candles'; + if (t === 'Bar') return 'Bars'; + if (t === 'Histogram') return 'Columns'; + return t; // Line, Area, Baseline map 1:1 + } + + function _ssStyleConfig(styleName) { + var s = String(styleName || 'Line'); + if (s === 'Bars') return { seriesType: 'Bar', source: 'close', optionPatch: {} }; + if (s === 'Candles') return { seriesType: 'Candlestick', source: 'close', optionPatch: {} }; + if (s === 'Hollow candles') { + return { + seriesType: 'Candlestick', + source: 'close', + optionPatch: { + upColor: _cssVar('--pywry-tvchart-hollow-up-body') || 'rgba(0, 0, 0, 0)', + priceLineColor: _cssVar('--pywry-tvchart-price-line') || _cssVar('--pywry-tvchart-up') || '#26a69a', + }, + }; + } + if (s === 'Columns') return { seriesType: 'Histogram', source: 'close', optionPatch: {} }; + if (s === 'Line') return { seriesType: 'Line', source: 'close', optionPatch: {} }; + if (s === 'Line with markers') { + return { + seriesType: 'Line', + source: 'close', + optionPatch: { + pointMarkersVisible: true, + }, + }; + } + if (s === 'Step line') { + return { + seriesType: 'Line', + source: 'close', + optionPatch: { + lineType: 1, + }, + }; + } + if (s === 'Area') return { seriesType: 'Area', source: 'close', optionPatch: {} }; + if (s === 'HLC area') return { seriesType: 'Area', source: 'close', optionPatch: {}, composite: 'hlcArea' }; + if (s === 'Baseline') return { seriesType: 'Baseline', source: 'close', optionPatch: {} }; + if (s === 'HLC bars') return { seriesType: 'Bar', source: 'hlc3', optionPatch: {} }; + if (s === 'High-low') return { seriesType: 'Bar', source: 'close', optionPatch: {} }; + return { seriesType: 'Line', source: 'close', optionPatch: {} }; + } + + function _ssToNumber(v, fallback) { + var n = Number(v); + return isFinite(n) ? n : fallback; + } + + function _ssSourceValue(row, source) { + var r = row || {}; + var o = _ssToNumber(r.open, _ssToNumber(r.value, null)); + var h = _ssToNumber(r.high, o); + var l = _ssToNumber(r.low, o); + var c = _ssToNumber(r.close, _ssToNumber(r.value, o)); + if (source === 'open') return o; + if (source === 'high') return h; + if (source === 'low') return l; + if (source === 'hl2') return (h + l) / 2; + if (source === 'hlc3') return (h + l + c) / 3; + if (source === 'ohlc4') return (o + h + l + c) / 4; + return c; + } + + function _ssBuildBarsForStyle(rawBars, styleName, seriesType, source) { + var src = Array.isArray(rawBars) ? rawBars : []; + if (!src.length) return []; + + var out = []; + var prevClose = null; + for (var i = 0; i < src.length; i++) { + var row = src[i] || {}; + if (row.time == null) continue; + + if (seriesType === 'Line' || seriesType === 'Area' || seriesType === 'Baseline' || seriesType === 'Histogram') { + out.push({ + time: row.time, + value: _ssSourceValue(row, source), + }); + continue; + } + + var base = _ssSourceValue(row, source); + var open = _ssToNumber(row.open, _ssToNumber(row.value, base)); + var high = _ssToNumber(row.high, Math.max(open, base)); + var low = _ssToNumber(row.low, Math.min(open, base)); + var close = _ssToNumber(row.close, _ssToNumber(row.value, base)); + + if (styleName === 'HLC bars') { + var hlc = _ssSourceValue(row, 'hlc3'); + var o = (prevClose == null) ? hlc : prevClose; + var c = hlc; + open = o; + close = c; + high = Math.max(o, c); + low = Math.min(o, c); + prevClose = c; + } else if (styleName === 'High-low') { + var hh = _ssToNumber(row.high, base); + var ll = _ssToNumber(row.low, base); + open = ll; + close = hh; + high = hh; + low = ll; + prevClose = close; + } else { + prevClose = close; + } + + out.push({ + time: row.time, + open: open, + high: high, + low: low, + close: close, + }); + } + return out; + } + + function _ssLooksLikeOhlcBars(rows) { + if (!Array.isArray(rows) || !rows.length) return false; + for (var i = 0; i < rows.length; i++) { + var r = rows[i] || {}; + if (r.open !== undefined && r.high !== undefined && r.low !== undefined && r.close !== undefined) { + return true; + } + } + return false; + } + + function renderBody() { + body.innerHTML = ''; + if (activeTab === 'style') { + var styleRow = _ssRow('Style'); + styleRow.ctrl.appendChild(_ssSelect([ + { v: 'Bars', l: 'Bars' }, + { v: 'Candles', l: 'Candles' }, + { v: 'Hollow candles', l: 'Hollow candles' }, + { v: 'Columns', l: 'Columns' }, + { v: 'Line', l: 'Line' }, + { v: 'Line with markers', l: 'Line with markers' }, + { v: 'Step line', l: 'Step line' }, + { v: 'Area', l: 'Area' }, + { v: 'HLC area', l: 'HLC area' }, + { v: 'Baseline', l: 'Baseline' }, + { v: 'HLC bars', l: 'HLC bars' }, + { v: 'High-low', l: 'High-low' }, + ], draft.style, function(v) { + draft.style = v; + renderBody(); + })); + body.appendChild(styleRow.row); + + var selectedStyle = String(draft.style || 'Line'); + if (_ssIsCandleStyle(selectedStyle)) { + var bodyRow = _ssRow('Body'); + var bodyWrap = document.createElement('div'); + bodyWrap.style.cssText = 'display:flex;align-items:center;gap:10px;'; + bodyWrap.appendChild(_ssCheckbox(draft.bodyVisible !== false, function(v) { draft.bodyVisible = v; })); + bodyWrap.appendChild(_ssDualColorControl( + draft.bodyUpColor, + draft.bodyDownColor, + function(v) { draft.bodyUpColor = v; }, + function(v) { draft.bodyDownColor = v; } + )); + bodyRow.ctrl.appendChild(bodyWrap); + body.appendChild(bodyRow.row); + + var borderRow = _ssRow('Borders'); + var borderWrap = document.createElement('div'); + borderWrap.style.cssText = 'display:flex;align-items:center;gap:10px;'; + borderWrap.appendChild(_ssCheckbox(draft.bordersVisible !== false, function(v) { draft.bordersVisible = v; })); + borderWrap.appendChild(_ssDualColorControl( + draft.borderUpColor, + draft.borderDownColor, + function(v) { draft.borderUpColor = v; }, + function(v) { draft.borderDownColor = v; } + )); + borderRow.ctrl.appendChild(borderWrap); + body.appendChild(borderRow.row); + + var wickRow = _ssRow('Wick'); + var wickWrap = document.createElement('div'); + wickWrap.style.cssText = 'display:flex;align-items:center;gap:10px;'; + wickWrap.appendChild(_ssCheckbox(draft.wickVisible !== false, function(v) { draft.wickVisible = v; })); + wickWrap.appendChild(_ssDualColorControl( + draft.wickUpColor, + draft.wickDownColor, + function(v) { draft.wickUpColor = v; }, + function(v) { draft.wickDownColor = v; } + )); + wickRow.ctrl.appendChild(wickWrap); + body.appendChild(wickRow.row); + } else if (_ssIsHlcAreaStyle(selectedStyle)) { + var highRow = _ssRow('High line'); + var highWrap = document.createElement('div'); + highWrap.style.cssText = 'display:flex;align-items:center;gap:10px;'; + highWrap.appendChild(_ssCheckbox(draft.hlcHighVisible !== false, function(v) { draft.hlcHighVisible = v; })); + highWrap.appendChild(_ssColorLineControl(draft.hlcHighColor, draft.lineWidth, function(v) { draft.hlcHighColor = v; }, function() {})); + highRow.ctrl.appendChild(highWrap); + body.appendChild(highRow.row); + + var lowRow = _ssRow('Low line'); + var lowWrap = document.createElement('div'); + lowWrap.style.cssText = 'display:flex;align-items:center;gap:10px;'; + lowWrap.appendChild(_ssCheckbox(draft.hlcLowVisible !== false, function(v) { draft.hlcLowVisible = v; })); + lowWrap.appendChild(_ssColorLineControl(draft.hlcLowColor, draft.lineWidth, function(v) { draft.hlcLowColor = v; }, function() {})); + lowRow.ctrl.appendChild(lowWrap); + body.appendChild(lowRow.row); + + var closeLineRow = _ssRow('Close line'); + closeLineRow.ctrl.appendChild(_ssColorLineControl(draft.hlcCloseColor, draft.lineWidth, function(v) { draft.hlcCloseColor = v; }, function() {})); + body.appendChild(closeLineRow.row); + + var fillRow = _ssRow('Fill'); + fillRow.ctrl.appendChild(_ssDualColorControl( + draft.hlcFillTopColor, + draft.hlcFillBottomColor, + function(v) { draft.hlcFillTopColor = v; }, + function(v) { draft.hlcFillBottomColor = v; } + )); + body.appendChild(fillRow.row); + } else if (selectedStyle === 'Area') { + var areaSourceRow = _ssRow('Price source'); + areaSourceRow.ctrl.appendChild(_ssSelect([ + { v: 'open', l: 'Open' }, + { v: 'high', l: 'High' }, + { v: 'low', l: 'Low' }, + { v: 'close', l: 'Close' }, + { v: 'hl2', l: '(H + L)/2' }, + { v: 'hlc3', l: '(H + L + C)/3' }, + { v: 'ohlc4', l: '(O + H + L + C)/4' }, + ], draft.priceSource, function(v) { draft.priceSource = v; })); + body.appendChild(areaSourceRow.row); + + var areaLineRow = _ssRow('Line'); + var areaWidthSync = function() {}; + areaLineRow.ctrl.appendChild(_ssColorLineControl( + draft.color, + draft.lineWidth, + function(v) { draft.color = v; }, + function(sync) { areaWidthSync = sync; } + )); + body.appendChild(areaLineRow.row); + + var areaWidthRow = _ssRow('Line width'); + areaWidthRow.ctrl.appendChild(_ssSelect([ + { v: 1, l: '1px' }, + { v: 2, l: '2px' }, + { v: 3, l: '3px' }, + { v: 4, l: '4px' }, + ], draft.lineWidth, function(v) { + draft.lineWidth = _tvClamp(_tvToNumber(v, 2), 1, 4); + areaWidthSync(draft.lineWidth); + })); + body.appendChild(areaWidthRow.row); + + var areaFillRow = _ssRow('Fill'); + areaFillRow.ctrl.appendChild(_ssDualColorControl( + draft.areaTopColor, + draft.areaBottomColor, + function(v) { draft.areaTopColor = v; }, + function(v) { draft.areaBottomColor = v; } + )); + body.appendChild(areaFillRow.row); + } else if (selectedStyle === 'Baseline') { + var baseSourceRow = _ssRow('Price source'); + baseSourceRow.ctrl.appendChild(_ssSelect([ + { v: 'open', l: 'Open' }, + { v: 'high', l: 'High' }, + { v: 'low', l: 'Low' }, + { v: 'close', l: 'Close' }, + { v: 'hl2', l: '(H + L)/2' }, + { v: 'hlc3', l: '(H + L + C)/3' }, + { v: 'ohlc4', l: '(O + H + L + C)/4' }, + ], draft.priceSource, function(v) { draft.priceSource = v; })); + body.appendChild(baseSourceRow.row); + + var topLineRow = _ssRow('Top line'); + topLineRow.ctrl.appendChild(_ssColorControl(draft.baselineTopLineColor, function(v) { draft.baselineTopLineColor = v; })); + body.appendChild(topLineRow.row); + + var bottomLineRow = _ssRow('Bottom line'); + bottomLineRow.ctrl.appendChild(_ssColorControl(draft.baselineBottomLineColor, function(v) { draft.baselineBottomLineColor = v; })); + body.appendChild(bottomLineRow.row); + + var topFillRow = _ssRow('Top fill'); + topFillRow.ctrl.appendChild(_ssDualColorControl( + draft.baselineTopFillColor1, + draft.baselineTopFillColor2, + function(v) { draft.baselineTopFillColor1 = v; }, + function(v) { draft.baselineTopFillColor2 = v; } + )); + body.appendChild(topFillRow.row); + + var bottomFillRow = _ssRow('Bottom fill'); + bottomFillRow.ctrl.appendChild(_ssDualColorControl( + draft.baselineBottomFillColor1, + draft.baselineBottomFillColor2, + function(v) { draft.baselineBottomFillColor1 = v; }, + function(v) { draft.baselineBottomFillColor2 = v; } + )); + body.appendChild(bottomFillRow.row); + + var baseValueRow = _ssRow('Base level'); + var baseLevelWrap = document.createElement('span'); + baseLevelWrap.style.display = 'inline-flex'; + baseLevelWrap.style.alignItems = 'center'; + baseLevelWrap.style.gap = '4px'; + var baseValueInput = document.createElement('input'); + baseValueInput.type = 'number'; + baseValueInput.className = 'ts-input'; + baseValueInput.style.width = '80px'; + baseValueInput.min = '0'; + baseValueInput.max = '100'; + baseValueInput.value = String(_tvToNumber(draft.baselineBaseLevel, 50)); + baseValueInput.addEventListener('input', function() { + draft.baselineBaseLevel = _tvClamp(_tvToNumber(baseValueInput.value, 50), 0, 100); + }); + var pctLabel = document.createElement('span'); + pctLabel.textContent = '%'; + pctLabel.style.opacity = '0.6'; + baseLevelWrap.appendChild(baseValueInput); + baseLevelWrap.appendChild(pctLabel); + baseValueRow.ctrl.appendChild(baseLevelWrap); + body.appendChild(baseValueRow.row); + } else if (selectedStyle === 'Columns') { + var columnsSourceRow = _ssRow('Price source'); + columnsSourceRow.ctrl.appendChild(_ssSelect([ + { v: 'open', l: 'Open' }, + { v: 'high', l: 'High' }, + { v: 'low', l: 'Low' }, + { v: 'close', l: 'Close' }, + { v: 'hl2', l: '(H + L)/2' }, + { v: 'hlc3', l: '(H + L + C)/3' }, + { v: 'ohlc4', l: '(O + H + L + C)/4' }, + ], draft.priceSource, function(v) { draft.priceSource = v; })); + body.appendChild(columnsSourceRow.row); + + var columnsColorRow = _ssRow('Columns'); + columnsColorRow.ctrl.appendChild(_ssDualColorControl( + draft.columnsUpColor, + draft.columnsDownColor, + function(v) { draft.columnsUpColor = v; }, + function(v) { draft.columnsDownColor = v; } + )); + body.appendChild(columnsColorRow.row); + } else if (selectedStyle === 'Bars' || selectedStyle === 'HLC bars' || selectedStyle === 'High-low') { + if (selectedStyle === 'Bars') { + var barsSourceRow = _ssRow('Price source'); + barsSourceRow.ctrl.appendChild(_ssSelect([ + { v: 'open', l: 'Open' }, + { v: 'high', l: 'High' }, + { v: 'low', l: 'Low' }, + { v: 'close', l: 'Close' }, + { v: 'hl2', l: '(H + L)/2' }, + { v: 'hlc3', l: '(H + L + C)/3' }, + { v: 'ohlc4', l: '(O + H + L + C)/4' }, + ], draft.priceSource, function(v) { draft.priceSource = v; })); + body.appendChild(barsSourceRow.row); + } + + var barsColorRow = _ssRow('Up/Down colors'); + barsColorRow.ctrl.appendChild(_ssDualColorControl( + draft.barsUpColor, + draft.barsDownColor, + function(v) { draft.barsUpColor = v; }, + function(v) { draft.barsDownColor = v; } + )); + body.appendChild(barsColorRow.row); + + var openTickRow = _ssRow('Open tick'); + openTickRow.ctrl.appendChild(_ssCheckbox(draft.barsOpenVisible !== false, function(v) { draft.barsOpenVisible = v; })); + body.appendChild(openTickRow.row); + } else { + var sourceRow = _ssRow('Price source'); + sourceRow.ctrl.appendChild(_ssSelect([ + { v: 'open', l: 'Open' }, + { v: 'high', l: 'High' }, + { v: 'low', l: 'Low' }, + { v: 'close', l: 'Close' }, + { v: 'hl2', l: '(H + L)/2' }, + { v: 'hlc3', l: '(H + L + C)/3' }, + { v: 'ohlc4', l: '(O + H + L + C)/4' }, + ], draft.priceSource, function(v) { draft.priceSource = v; })); + body.appendChild(sourceRow.row); + + var lineRow = _ssRow('Line'); + var widthSync = function() {}; + var lineCtrl = _ssColorLineControl(draft.color, draft.lineWidth, function(v) { draft.color = v; }, function(sync) { widthSync = sync; }); + lineRow.ctrl.appendChild(lineCtrl); + body.appendChild(lineRow.row); + + var widthRow = _ssRow('Line width'); + widthRow.ctrl.appendChild(_ssSelect([ + { v: 1, l: '1px' }, + { v: 2, l: '2px' }, + { v: 3, l: '3px' }, + { v: 4, l: '4px' }, + ], draft.lineWidth, function(v) { + draft.lineWidth = _tvClamp(_tvToNumber(v, 2), 1, 4); + widthSync(draft.lineWidth); + })); + body.appendChild(widthRow.row); + + if (selectedStyle === 'Line with markers') { + var markersRow = _ssRow('Markers'); + markersRow.ctrl.appendChild(_ssCheckbox(draft.markersVisible !== false, function(v) { + draft.markersVisible = v; + })); + body.appendChild(markersRow.row); + } + } + + var priceLineRow = _ssRow('Price line'); + priceLineRow.ctrl.appendChild(_ssCheckbox(draft.priceLineVisible, function(v) { draft.priceLineVisible = v; })); + body.appendChild(priceLineRow.row); + + var tickRow = _ssRow('Override min tick'); + tickRow.ctrl.appendChild(_ssSelect([ + { v: 'Default', l: 'Default' }, + { v: 'Integer', l: 'Integer' }, + { v: '1 decimals', l: '1 decimal' }, + { v: '2 decimals', l: '2 decimals' }, + { v: '3 decimals', l: '3 decimals' }, + { v: '4 decimals', l: '4 decimals' }, + { v: '5 decimals', l: '5 decimals' }, + { v: '6 decimals', l: '6 decimals' }, + { v: '7 decimals', l: '7 decimals' }, + { v: '8 decimals', l: '8 decimals' }, + { v: '9 decimals', l: '9 decimals' }, + { v: '10 decimals', l: '10 decimals' }, + { v: '11 decimals', l: '11 decimals' }, + { v: '12 decimals', l: '12 decimals' }, + { v: '13 decimals', l: '13 decimals' }, + { v: '14 decimals', l: '14 decimals' }, + { v: '15 decimals', l: '15 decimals' }, + { v: '1/2', l: '1/2' }, + { v: '1/4', l: '1/4' }, + { v: '1/8', l: '1/8' }, + { v: '1/16', l: '1/16' }, + { v: '1/32', l: '1/32' }, + { v: '1/64', l: '1/64' }, + { v: '1/128', l: '1/128' }, + { v: '1/320', l: '1/320' }, + ], draft.overrideMinTick, function(v) { draft.overrideMinTick = v; })); + body.appendChild(tickRow.row); + } else { + var visibilityDefs = [ + { key: 'seconds', label: 'Seconds', max: 59 }, + { key: 'minutes', label: 'Minutes', max: 59 }, + { key: 'hours', label: 'Hours', max: 24 }, + { key: 'days', label: 'Days', max: 366 }, + { key: 'weeks', label: 'Weeks', max: 52 }, + { key: 'months', label: 'Months', max: 12 }, + ]; + for (var vi = 0; vi < visibilityDefs.length; vi++) { + (function(def) { + var cfg = draft.visibilityIntervals[def.key] || { enabled: true, min: 1, max: def.max }; + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced'; + row.style.alignItems = 'center'; + + var lhs = document.createElement('div'); + lhs.style.cssText = 'display:flex;align-items:center;gap:10px;min-width:120px;'; + var cb = _ssCheckbox(cfg.enabled !== false, function(v) { + cfg.enabled = !!v; + draft.visibilityIntervals[def.key] = cfg; + }); + lhs.appendChild(cb); + var lbl = document.createElement('span'); + lbl.textContent = def.label; + lbl.style.color = 'var(--pywry-tvchart-text)'; + lhs.appendChild(lbl); + row.appendChild(lhs); + + var minInput = document.createElement('input'); + minInput.type = 'number'; + minInput.className = 'ts-input'; + minInput.style.width = '74px'; + minInput.min = '1'; + minInput.max = String(def.max); + minInput.value = String(_tvClamp(_tvToNumber(cfg.min, 1), 1, def.max)); + row.appendChild(minInput); + + var track = document.createElement('div'); + track.style.cssText = 'position:relative;flex:1;min-width:130px;max-width:190px;height:14px;'; + var rail = document.createElement('div'); + rail.style.cssText = 'position:absolute;left:0;right:0;top:6px;height:3px;border-radius:3px;background:var(--pywry-tvchart-border-strong);'; + var leftKnob = document.createElement('span'); + var rightKnob = document.createElement('span'); + leftKnob.style.cssText = 'position:absolute;top:1px;width:12px;height:12px;border-radius:50%;background:var(--pywry-tvchart-panel-bg);border:2px solid #fff;box-sizing:border-box;'; + rightKnob.style.cssText = 'position:absolute;top:1px;width:12px;height:12px;border-radius:50%;background:var(--pywry-tvchart-panel-bg);border:2px solid #fff;box-sizing:border-box;'; + track.appendChild(rail); + track.appendChild(leftKnob); + track.appendChild(rightKnob); + row.appendChild(track); + + var maxInput = document.createElement('input'); + maxInput.type = 'number'; + maxInput.className = 'ts-input'; + maxInput.style.width = '74px'; + maxInput.min = '1'; + maxInput.max = String(def.max); + maxInput.value = String(_tvClamp(_tvToNumber(cfg.max, def.max), 1, def.max)); + row.appendChild(maxInput); + + function syncKnobs() { + var minVal = _tvClamp(_tvToNumber(minInput.value, 1), 1, def.max); + var maxVal = _tvClamp(_tvToNumber(maxInput.value, def.max), 1, def.max); + if (minVal > maxVal) { + if (document.activeElement === minInput) maxVal = minVal; + else minVal = maxVal; + } + minInput.value = String(minVal); + maxInput.value = String(maxVal); + cfg.min = minVal; + cfg.max = maxVal; + draft.visibilityIntervals[def.key] = cfg; + var lp = ((minVal - 1) / Math.max(def.max - 1, 1)) * 100; + var rp = ((maxVal - 1) / Math.max(def.max - 1, 1)) * 100; + leftKnob.style.left = 'calc(' + lp + '% - 6px)'; + rightKnob.style.left = 'calc(' + rp + '% - 6px)'; + } + + minInput.addEventListener('input', syncKnobs); + maxInput.addEventListener('input', syncKnobs); + syncKnobs(); + body.appendChild(row); + })(visibilityDefs[vi]); + } + } + } + + styleTab.addEventListener('click', function() { + activeTab = 'style'; + styleTab.classList.add('active'); + visTab.classList.remove('active'); + renderBody(); + }); + visTab.addEventListener('click', function() { + activeTab = 'visibility'; + visTab.classList.add('active'); + styleTab.classList.remove('active'); + renderBody(); + }); + + var footer = document.createElement('div'); + footer.className = 'tv-settings-footer'; + footer.style.position = 'relative'; + + var defaultsWrap = document.createElement('div'); + defaultsWrap.className = 'tv-settings-template-wrap'; + var defaultsBtn = document.createElement('button'); + defaultsBtn.className = 'ts-btn-template'; + defaultsBtn.textContent = 'Defaults'; + defaultsWrap.appendChild(defaultsBtn); + var defaultsMenu = null; + function closeDefaultsMenu() { + if (defaultsMenu && defaultsMenu.parentNode) defaultsMenu.parentNode.removeChild(defaultsMenu); + defaultsMenu = null; + defaultsBtn.classList.remove('open'); + } + defaultsBtn.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + if (defaultsMenu) { + closeDefaultsMenu(); + return; + } + defaultsMenu = document.createElement('div'); + defaultsMenu.className = 'tv-settings-template-menu'; + var resetBtn = document.createElement('button'); + resetBtn.className = 'tv-settings-template-item'; + resetBtn.textContent = 'Reset settings'; + resetBtn.addEventListener('click', function() { + draft = _tvMerge({}, initialState); + renderBody(); + closeDefaultsMenu(); + }); + defaultsMenu.appendChild(resetBtn); + var saveBtn = document.createElement('button'); + saveBtn.className = 'tv-settings-template-item'; + saveBtn.textContent = 'Save as default'; + saveBtn.addEventListener('click', function() { closeDefaultsMenu(); }); + defaultsMenu.appendChild(saveBtn); + defaultsWrap.appendChild(defaultsMenu); + defaultsBtn.classList.add('open'); + }); + overlay.addEventListener('mousedown', function(e) { + if (defaultsMenu && defaultsWrap && !defaultsWrap.contains(e.target)) closeDefaultsMenu(); + }); + footer.appendChild(defaultsWrap); + + var cancelBtn = document.createElement('button'); + cancelBtn.className = 'ts-btn-cancel'; + cancelBtn.textContent = 'Cancel'; + cancelBtn.addEventListener('click', function() { _tvHideSeriesSettings(); }); + footer.appendChild(cancelBtn); + + var okBtn = document.createElement('button'); + okBtn.className = 'ts-btn-ok'; + okBtn.textContent = 'Ok'; + okBtn.addEventListener('click', function() { + var selectedStyle = String(draft.style || 'Line'); + var cfg = _ssStyleConfig(selectedStyle); + var targetType = cfg.seriesType; + + // Fast path: series type unchanged — just applyOptions, never recreate. + var oldSeries = entry.seriesMap ? entry.seriesMap[seriesId] : null; + var oldType = oldSeries ? _tvGuessSeriesType(oldSeries) : null; + if (oldSeries && oldType === targetType + && selectedStyle !== 'Columns' && !_ssIsHlcAreaStyle(selectedStyle)) { + var patchOpts = {}; + + if (_ssIsCandleStyle(selectedStyle)) { + var hidden = _cssVar('--pywry-tvchart-hidden') || 'rgba(0, 0, 0, 0)'; + var hollowBody = _cssVar('--pywry-tvchart-hollow-up-body') || hidden; + patchOpts.upColor = (draft.bodyVisible !== false) ? draft.bodyUpColor : hidden; + patchOpts.downColor = (draft.bodyVisible !== false) ? draft.bodyDownColor : hidden; + patchOpts.borderUpColor = (draft.bordersVisible !== false) ? draft.borderUpColor : hidden; + patchOpts.borderDownColor = (draft.bordersVisible !== false) ? draft.borderDownColor : hidden; + patchOpts.wickUpColor = (draft.wickVisible !== false) ? draft.wickUpColor : hidden; + patchOpts.wickDownColor = (draft.wickVisible !== false) ? draft.wickDownColor : hidden; + if (selectedStyle === 'Hollow candles') patchOpts.upColor = hollowBody; + } else if (_ssIsLineLikeStyle(selectedStyle)) { + patchOpts.color = draft.color; + patchOpts.lineColor = draft.color; + patchOpts.lineWidth = _tvClamp(_tvToNumber(draft.lineWidth, 2), 1, 4); + patchOpts.pointMarkersVisible = selectedStyle === 'Line with markers' ? (draft.markersVisible !== false) : false; + patchOpts.lineType = selectedStyle === 'Step line' ? 1 : 0; + } else if (selectedStyle === 'Area') { + patchOpts.lineColor = draft.color; + patchOpts.topColor = draft.areaTopColor; + patchOpts.bottomColor = draft.areaBottomColor; + patchOpts.lineWidth = _tvClamp(_tvToNumber(draft.lineWidth, 2), 1, 4); + } else if (selectedStyle === 'Baseline') { + patchOpts.topLineColor = draft.baselineTopLineColor; + patchOpts.bottomLineColor = draft.baselineBottomLineColor; + patchOpts.topFillColor1 = draft.baselineTopFillColor1; + patchOpts.topFillColor2 = draft.baselineTopFillColor2; + patchOpts.bottomFillColor1 = draft.baselineBottomFillColor1; + patchOpts.bottomFillColor2 = draft.baselineBottomFillColor2; + patchOpts.lineWidth = _tvClamp(_tvToNumber(draft.lineWidth, 2), 1, 4); + } else if (selectedStyle === 'Bars' || selectedStyle === 'HLC bars' || selectedStyle === 'High-low') { + patchOpts.upColor = draft.barsUpColor; + patchOpts.downColor = draft.barsDownColor; + patchOpts.openVisible = draft.barsOpenVisible !== false; + } + + var tickPriceFormat = _ssPriceFormatFromTick(draft.overrideMinTick); + if (tickPriceFormat) patchOpts.priceFormat = tickPriceFormat; + + try { oldSeries.applyOptions(patchOpts); } catch (e) {} + + // Persist preferences + if (!entry._seriesStylePrefs) entry._seriesStylePrefs = {}; + entry._seriesStylePrefs[seriesId] = { + style: draft.style, + priceSource: draft.priceSource, + color: draft.color, + lineWidth: draft.lineWidth, + markersVisible: draft.markersVisible, + areaTopColor: draft.areaTopColor, + areaBottomColor: draft.areaBottomColor, + baselineTopLineColor: draft.baselineTopLineColor, + baselineBottomLineColor: draft.baselineBottomLineColor, + baselineTopFillColor1: draft.baselineTopFillColor1, + baselineTopFillColor2: draft.baselineTopFillColor2, + baselineBottomFillColor1: draft.baselineBottomFillColor1, + baselineBottomFillColor2: draft.baselineBottomFillColor2, + baselineBaseLevel: draft.baselineBaseLevel, + columnsUpColor: draft.columnsUpColor, + columnsDownColor: draft.columnsDownColor, + barsUpColor: draft.barsUpColor, + barsDownColor: draft.barsDownColor, + barsOpenVisible: draft.barsOpenVisible, + bodyVisible: draft.bodyVisible, + bordersVisible: draft.bordersVisible, + wickVisible: draft.wickVisible, + bodyUpColor: draft.bodyUpColor, + bodyDownColor: draft.bodyDownColor, + borderUpColor: draft.borderUpColor, + borderDownColor: draft.borderDownColor, + wickUpColor: draft.wickUpColor, + wickDownColor: draft.wickDownColor, + priceLineVisible: draft.priceLineVisible, + overrideMinTick: draft.overrideMinTick, + hlcHighVisible: draft.hlcHighVisible, + hlcLowVisible: draft.hlcLowVisible, + hlcCloseVisible: draft.hlcCloseVisible, + hlcHighColor: draft.hlcHighColor, + hlcLowColor: draft.hlcLowColor, + hlcCloseColor: draft.hlcCloseColor, + hlcFillTopColor: draft.hlcFillTopColor, + hlcFillBottomColor: draft.hlcFillBottomColor, + }; + if (!entry._seriesVisibilityIntervals) entry._seriesVisibilityIntervals = {}; + entry._seriesVisibilityIntervals[seriesId] = _tvMerge({}, draft.visibilityIntervals || {}); + + // Update legend color + var legendColor = draft.color; + if (_ssIsCandleStyle(selectedStyle)) legendColor = draft.bodyUpColor; + if (selectedStyle === 'Columns') legendColor = draft.columnsUpColor; + if (selectedStyle === 'Bars' || selectedStyle === 'HLC bars' || selectedStyle === 'High-low') legendColor = draft.barsUpColor; + if (selectedStyle === 'Area') legendColor = draft.color; + if (selectedStyle === 'Baseline') legendColor = draft.baselineTopLineColor; + if (!entry._legendSeriesColors) entry._legendSeriesColors = {}; + entry._legendSeriesColors[seriesId] = legendColor; + + _tvHideSeriesSettings(); + _tvRenderHoverLegend(chartId, null); + return; + } + + // Full rebuild path — style changed, need to destroy and recreate series + var sourceForStyle = cfg.source || draft.priceSource || 'close'; + var payloadSeries = _tvFindPayloadSeries(entry, seriesId); + if (!entry._seriesCanonicalRawData) entry._seriesCanonicalRawData = {}; + var canonicalBars = entry._seriesCanonicalRawData[seriesId]; + var payloadBars = (payloadSeries && Array.isArray(payloadSeries.bars)) ? payloadSeries.bars : []; + var fallbackBars = (entry._seriesRawData && entry._seriesRawData[seriesId]) ? entry._seriesRawData[seriesId] : []; + if (!Array.isArray(canonicalBars) || !canonicalBars.length) { + if (_ssLooksLikeOhlcBars(payloadBars)) { + canonicalBars = payloadBars; + } else if (_ssLooksLikeOhlcBars(fallbackBars)) { + canonicalBars = fallbackBars; + } + if (Array.isArray(canonicalBars) && canonicalBars.length) { + entry._seriesCanonicalRawData[seriesId] = canonicalBars; + } + } + var rawBars = (Array.isArray(canonicalBars) && canonicalBars.length) + ? canonicalBars + : (payloadBars.length ? payloadBars : fallbackBars); + var transformedRawBars = _ssBuildBarsForStyle(rawBars, String(draft.style || ''), targetType, sourceForStyle); + var normalizedBars = _tvNormalizeBarsForSeriesType(transformedRawBars, targetType); + + if (selectedStyle === 'Columns') { + var histogramBars = []; + var prevValue = null; + for (var ci = 0; ci < rawBars.length; ci++) { + var crow = rawBars[ci] || {}; + if (crow.time == null) continue; + var cval = _ssSourceValue(crow, sourceForStyle); + var isUp = (prevValue == null) ? true : (cval >= prevValue); + histogramBars.push({ + time: crow.time, + value: cval, + color: isUp ? draft.columnsUpColor : draft.columnsDownColor, + }); + prevValue = cval; + } + normalizedBars = histogramBars; + transformedRawBars = histogramBars; + } + + var oldSeries = entry.seriesMap ? entry.seriesMap[seriesId] : null; + var paneIndex = 0; + if (!_tvIsMainSeriesId(seriesId) && entry._comparePaneBySeries && entry._comparePaneBySeries[seriesId] !== undefined) { + paneIndex = entry._comparePaneBySeries[seriesId]; + } + + var baseSeriesOptions = _tvBuildSeriesOptions( + (payloadSeries && payloadSeries.seriesOptions) ? payloadSeries.seriesOptions : {}, + targetType, + entry.theme + ); + + var rebuiltOptions = _tvMerge(baseSeriesOptions, { + priceLineVisible: !!draft.priceLineVisible, + lastValueVisible: !!draft.priceLineVisible, + visible: draft.visible !== false, + }); + + if (_tvIsMainSeriesId(seriesId)) { + rebuiltOptions.priceScaleId = _tvResolveScalePlacement(entry); + if (entry._comparePaneBySeries && entry._comparePaneBySeries.main !== undefined) { + delete entry._comparePaneBySeries.main; + } + } + + if (_ssIsLineLikeStyle(selectedStyle)) { + rebuiltOptions.color = draft.color; + rebuiltOptions.lineColor = draft.color; + rebuiltOptions.lineWidth = _tvClamp(_tvToNumber(draft.lineWidth, 2), 1, 4); + rebuiltOptions.pointMarkersVisible = selectedStyle === 'Line with markers' ? (draft.markersVisible !== false) : false; + rebuiltOptions.lineType = selectedStyle === 'Step line' ? 1 : 0; + } else if (selectedStyle === 'Area') { + rebuiltOptions.lineColor = draft.color; + rebuiltOptions.topColor = draft.areaTopColor; + rebuiltOptions.bottomColor = draft.areaBottomColor; + rebuiltOptions.lineWidth = _tvClamp(_tvToNumber(draft.lineWidth, 2), 1, 4); + } else if (selectedStyle === 'Baseline') { + rebuiltOptions.topLineColor = draft.baselineTopLineColor; + rebuiltOptions.bottomLineColor = draft.baselineBottomLineColor; + rebuiltOptions.topFillColor1 = draft.baselineTopFillColor1; + rebuiltOptions.topFillColor2 = draft.baselineTopFillColor2; + rebuiltOptions.bottomFillColor1 = draft.baselineBottomFillColor1; + rebuiltOptions.bottomFillColor2 = draft.baselineBottomFillColor2; + rebuiltOptions.lineWidth = _tvClamp(_tvToNumber(draft.lineWidth, 2), 1, 4); + var baseLevel = _tvClamp(_tvToNumber(draft.baselineBaseLevel, 50), 0, 100); + var basePrice = _tvComputeBaselineValue(rawBars, baseLevel); + rebuiltOptions.baseValue = { type: 'price', price: basePrice, _level: baseLevel }; + } else if (selectedStyle === 'Columns') { + rebuiltOptions.color = draft.columnsUpColor; + } else if (selectedStyle === 'Bars' || selectedStyle === 'HLC bars' || selectedStyle === 'High-low') { + rebuiltOptions.upColor = draft.barsUpColor; + rebuiltOptions.downColor = draft.barsDownColor; + rebuiltOptions.openVisible = draft.barsOpenVisible !== false; + } + + if (_ssIsCandleStyle(selectedStyle)) { + var hidden = _cssVar('--pywry-tvchart-hidden') || 'rgba(0, 0, 0, 0)'; + rebuiltOptions.upColor = (draft.bodyVisible !== false) ? draft.bodyUpColor : hidden; + rebuiltOptions.downColor = (draft.bodyVisible !== false) ? draft.bodyDownColor : hidden; + rebuiltOptions.borderUpColor = (draft.bordersVisible !== false) ? draft.borderUpColor : hidden; + rebuiltOptions.borderDownColor = (draft.bordersVisible !== false) ? draft.borderDownColor : hidden; + rebuiltOptions.wickUpColor = (draft.wickVisible !== false) ? draft.wickUpColor : hidden; + rebuiltOptions.wickDownColor = (draft.wickVisible !== false) ? draft.wickDownColor : hidden; + } + + function _ssClearStyleAux() { + if (!entry._seriesStyleAux || !entry._seriesStyleAux[seriesId]) return; + var aux = entry._seriesStyleAux[seriesId] || {}; + var keys = Object.keys(aux); + for (var ai = 0; ai < keys.length; ai++) { + var key = keys[ai]; + if (key.indexOf('series_') === 0 && aux[key] && entry.chart && typeof entry.chart.removeSeries === 'function') { + try { entry.chart.removeSeries(aux[key]); } catch (e) {} + } + } + delete entry._seriesStyleAux[seriesId]; + } + + _ssClearStyleAux(); + rebuiltOptions = _tvMerge(rebuiltOptions, cfg.optionPatch || {}); + + // Preserve current scale placement for this series + try { + var existingOpts = oldSeries && oldSeries.options ? oldSeries.options() : null; + if (!_tvIsMainSeriesId(seriesId) && existingOpts && existingOpts.priceScaleId !== undefined) { + rebuiltOptions.priceScaleId = existingOpts.priceScaleId; + } + } catch (e) {} + + var tickPriceFormat = _ssPriceFormatFromTick(draft.overrideMinTick); + if (tickPriceFormat) rebuiltOptions.priceFormat = tickPriceFormat; + + // Add new series FIRST so the pane is never empty (removing the + // last series in a pane destroys it and renumbers the rest). + var newSeries = _tvAddSeriesCompat(entry.chart, targetType, rebuiltOptions, paneIndex); + try { newSeries.setData(normalizedBars); } catch (e) {} + if (oldSeries && entry.chart && typeof entry.chart.removeSeries === 'function') { + try { entry.chart.removeSeries(oldSeries); } catch (e) {} + } + entry.seriesMap[seriesId] = newSeries; + if (!entry._seriesRawData) entry._seriesRawData = {}; + entry._seriesRawData[seriesId] = normalizedBars; + + _tvUpsertPayloadSeries(entry, seriesId, { + seriesType: targetType, + bars: transformedRawBars, + seriesOptions: _tvMerge((payloadSeries && payloadSeries.seriesOptions) ? payloadSeries.seriesOptions : {}, rebuiltOptions), + }); + + var legendColor = draft.color; + if (selectedStyle === 'Columns') legendColor = draft.columnsUpColor; + if (selectedStyle === 'Bars' || selectedStyle === 'HLC bars' || selectedStyle === 'High-low') legendColor = draft.barsUpColor; + if (selectedStyle === 'Area') legendColor = draft.color; + if (selectedStyle === 'Baseline') legendColor = draft.baselineTopLineColor; + + if (_ssIsHlcAreaStyle(selectedStyle)) { + var sourceBars = Array.isArray(rawBars) ? rawBars : []; + var highBars = []; + var lowBars = []; + var closeBars = []; + for (var hi = 0; hi < sourceBars.length; hi++) { + var r = sourceBars[hi] || {}; + if (r.time == null) continue; + var h = _ssToNumber(r.high, _ssSourceValue(r, 'close')); + var l = _ssToNumber(r.low, _ssSourceValue(r, 'close')); + var c = _ssToNumber(r.close, _ssSourceValue(r, 'close')); + highBars.push({ time: r.time, value: h }); + lowBars.push({ time: r.time, value: l }); + closeBars.push({ time: r.time, value: c }); + } + var aux = { + highVisible: draft.hlcHighVisible !== false, + lowVisible: draft.hlcLowVisible !== false, + closeVisible: draft.hlcCloseVisible !== false, + highColor: draft.hlcHighColor, + lowColor: draft.hlcLowColor, + closeColor: draft.hlcCloseColor, + fillTopColor: draft.hlcFillTopColor, + fillBottomColor: draft.hlcFillBottomColor, + }; + + var hlcBgColor = _cssVar('--pywry-tvchart-bg'); + var hlcLineW = _tvClamp(_tvToNumber(draft.lineWidth, 1), 1, 4); + var hlcAuxBase = { + crosshairMarkerVisible: false, + lastValueVisible: false, + priceLineVisible: false, + priceScaleId: rebuiltOptions.priceScaleId, + }; + + // Main series is the close Area (layer 3) — apply close color + fill-down + try { + newSeries.applyOptions({ + topColor: draft.hlcFillBottomColor, + bottomColor: draft.hlcFillBottomColor, + lineColor: draft.hlcCloseColor, + lineWidth: 2, + visible: draft.hlcCloseVisible !== false, + }); + } catch (e) {} + + // Layer 1: High area (fill-up color from high line down) + var highSeries = _tvAddSeriesCompat(entry.chart, 'Area', _tvMerge(hlcAuxBase, { + topColor: draft.hlcFillTopColor, + bottomColor: draft.hlcFillTopColor, + lineColor: draft.hlcHighColor, + lineWidth: hlcLineW, + visible: draft.hlcHighVisible !== false, + }), paneIndex); + + // Layer 2: Close mask (opaque background erases fill-up below close) + var closeMaskSeries = _tvAddSeriesCompat(entry.chart, 'Area', _tvMerge(hlcAuxBase, { + topColor: hlcBgColor, + bottomColor: hlcBgColor, + lineColor: 'transparent', + lineWidth: 0, + }), paneIndex); + + // Layer 4: Low mask (opaque background erases fill-down below low + low line) + var lowMaskSeries = _tvAddSeriesCompat(entry.chart, 'Area', _tvMerge(hlcAuxBase, { + topColor: hlcBgColor, + bottomColor: hlcBgColor, + lineColor: draft.hlcLowColor, + lineWidth: hlcLineW, + visible: draft.hlcLowVisible !== false, + }), paneIndex); + + try { highSeries.setData(highBars); } catch (e) {} + try { closeMaskSeries.setData(closeBars); } catch (e) {} + try { lowMaskSeries.setData(lowBars); } catch (e) {} + + aux.series_high = highSeries; + aux.series_closeMask = closeMaskSeries; + aux.series_lowMask = lowMaskSeries; + if (!entry._seriesStyleAux) entry._seriesStyleAux = {}; + entry._seriesStyleAux[seriesId] = aux; + if (!entry._seriesAuxRawData) entry._seriesAuxRawData = {}; + entry._seriesAuxRawData[seriesId] = { high: highBars, low: lowBars }; + legendColor = draft.hlcCloseColor; + } + + if (!entry._seriesStylePrefs) entry._seriesStylePrefs = {}; + entry._seriesStylePrefs[seriesId] = { + style: draft.style, + priceSource: draft.priceSource, + color: draft.color, + lineWidth: draft.lineWidth, + markersVisible: draft.markersVisible, + areaTopColor: draft.areaTopColor, + areaBottomColor: draft.areaBottomColor, + baselineTopLineColor: draft.baselineTopLineColor, + baselineBottomLineColor: draft.baselineBottomLineColor, + baselineTopFillColor1: draft.baselineTopFillColor1, + baselineTopFillColor2: draft.baselineTopFillColor2, + baselineBottomFillColor1: draft.baselineBottomFillColor1, + baselineBottomFillColor2: draft.baselineBottomFillColor2, + baselineBaseLevel: draft.baselineBaseLevel, + columnsUpColor: draft.columnsUpColor, + columnsDownColor: draft.columnsDownColor, + barsUpColor: draft.barsUpColor, + barsDownColor: draft.barsDownColor, + barsOpenVisible: draft.barsOpenVisible, + bodyVisible: draft.bodyVisible, + bordersVisible: draft.bordersVisible, + wickVisible: draft.wickVisible, + bodyUpColor: draft.bodyUpColor, + bodyDownColor: draft.bodyDownColor, + borderUpColor: draft.borderUpColor, + borderDownColor: draft.borderDownColor, + wickUpColor: draft.wickUpColor, + wickDownColor: draft.wickDownColor, + priceLineVisible: draft.priceLineVisible, + overrideMinTick: draft.overrideMinTick, + hlcHighVisible: draft.hlcHighVisible, + hlcLowVisible: draft.hlcLowVisible, + hlcCloseVisible: draft.hlcCloseVisible, + hlcHighColor: draft.hlcHighColor, + hlcLowColor: draft.hlcLowColor, + hlcCloseColor: draft.hlcCloseColor, + hlcFillTopColor: draft.hlcFillTopColor, + hlcFillBottomColor: draft.hlcFillBottomColor, + }; + if (!entry._legendSeriesColors) entry._legendSeriesColors = {}; + entry._legendSeriesColors[seriesId] = legendColor; + if (!entry._seriesVisibilityIntervals) entry._seriesVisibilityIntervals = {}; + entry._seriesVisibilityIntervals[seriesId] = _tvMerge({}, draft.visibilityIntervals || {}); + _tvHideSeriesSettings(); + _tvRenderHoverLegend(chartId, null); + }); + footer.appendChild(okBtn); + panel.appendChild(footer); + + renderBody(); + _tvOverlayContainer(chartId).appendChild(overlay); +} + diff --git a/pywry/pywry/frontend/src/tvchart/08-settings/03-volume-settings.js b/pywry/pywry/frontend/src/tvchart/08-settings/03-volume-settings.js new file mode 100644 index 0000000..6d20437 --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/08-settings/03-volume-settings.js @@ -0,0 +1,462 @@ +function _tvShowVolumeSettings(chartId) { + _tvHideVolumeSettings(); + var resolved = _tvResolveChartEntry(chartId); + if (!resolved || !resolved.entry) return; + chartId = resolved.chartId; + var entry = resolved.entry; + var volSeries = entry.volumeMap && entry.volumeMap.main; + if (!volSeries) return; + + var currentOpts = {}; + try { currentOpts = volSeries.options() || {}; } catch (e) {} + var palette = TVCHART_THEMES._get(entry.theme || _tvDetectTheme()); + + // Read persisted volume prefs or derive from current state + var prefs = entry._volumeColorPrefs || {}; + var draft = { + upColor: _tvColorToHex(prefs.upColor || palette.volumeUp, palette.volumeUp), + downColor: _tvColorToHex(prefs.downColor || palette.volumeDown || palette.volumeUp, palette.volumeDown || palette.volumeUp), + // Inputs + maLength: prefs.maLength || 20, + volumeMA: prefs.volumeMA || 'SMA', + colorBasedOnPrevClose: !!prefs.colorBasedOnPrevClose, + smoothingLine: prefs.smoothingLine || 'SMA', + smoothingLength: prefs.smoothingLength || 9, + // Style + showVolume: prefs.showVolumePlot !== false, + showVolumeMA: !!prefs.showVolumeMA, + volumeMAColor: prefs.volumeMAColor || '#2196f3', + showSmoothedMA: !!prefs.showSmoothedMA, + smoothedMAColor: prefs.smoothedMAColor || '#ff6d00', + precision: prefs.precision || 'Default', + labelsOnPriceScale: prefs.labelsOnPriceScale !== false, + valuesInStatusLine: prefs.valuesInStatusLine !== false, + inputsInStatusLine: prefs.inputsInStatusLine !== false, + priceLine: !!prefs.priceLine, + // Visibility + visibility: prefs.visibility || null, + }; + + // Snapshot original state for cancel/revert + var snapshot = JSON.parse(JSON.stringify(draft)); + + // --- Live preview helper: recolour volume bars immediately --- + function applyVolumeLive() { + var rawBars = entry._rawData; + if (!rawBars || !Array.isArray(rawBars) || rawBars.length === 0 || !volSeries) return; + var newVolData = []; + for (var i = 0; i < rawBars.length; i++) { + var b = rawBars[i]; + var v = b.volume != null ? b.volume : (b.Volume != null ? b.Volume : b.vol); + if (v == null || isNaN(v)) continue; + var isUp; + if (draft.colorBasedOnPrevClose) { + var prevClose = (i > 0) ? (rawBars[i - 1].close != null ? rawBars[i - 1].close : rawBars[i - 1].Close) : null; + isUp = (prevClose != null && b.close != null) ? b.close >= prevClose : true; + } else { + isUp = (b.close != null && b.open != null) ? b.close >= b.open : true; + } + newVolData.push({ + time: b.time, + value: +v, + color: isUp ? draft.upColor : draft.downColor, + }); + } + if (newVolData.length > 0) volSeries.setData(newVolData); + } + + var overlay = document.createElement('div'); + overlay.className = 'tv-settings-overlay'; + _volumeSettingsOverlay = overlay; + _volumeSettingsOverlayChartId = chartId; + _tvSetChartInteractionLocked(chartId, true); + _tvRefreshLegendVisibility(); + overlay.addEventListener('click', function(e) { + if (e.target === overlay) { + // Revert on backdrop click + draft = JSON.parse(JSON.stringify(snapshot)); + applyVolumeLive(); + _tvHideVolumeSettings(); + } + }); + overlay.addEventListener('mousedown', function(e) { e.stopPropagation(); }); + overlay.addEventListener('wheel', function(e) { e.stopPropagation(); }); + + var panel = document.createElement('div'); + panel.className = 'tv-settings-panel'; + panel.style.cssText = 'width:460px;max-width:calc(100% - 32px);max-height:70vh;display:flex;flex-direction:column;'; + overlay.appendChild(panel); + + // Header + var header = document.createElement('div'); + header.className = 'tv-settings-header'; + header.style.cssText = 'position:relative;flex-direction:column;align-items:stretch;padding-bottom:0;'; + var hdrRow = document.createElement('div'); + hdrRow.style.cssText = 'display:flex;align-items:center;gap:8px;'; + var titleEl = document.createElement('h3'); + titleEl.textContent = 'Volume'; + hdrRow.appendChild(titleEl); + var closeBtn = document.createElement('button'); + closeBtn.className = 'tv-settings-close'; + closeBtn.innerHTML = ''; + closeBtn.addEventListener('click', function() { + draft = JSON.parse(JSON.stringify(snapshot)); + applyVolumeLive(); + _tvHideVolumeSettings(); + }); + hdrRow.appendChild(closeBtn); + header.appendChild(hdrRow); + + // Tab bar + var activeTab = 'inputs'; + var tabBar = document.createElement('div'); + tabBar.className = 'tv-ind-settings-tabs'; + var tabs = ['Inputs', 'Style', 'Visibility']; + var tabEls = {}; + tabs.forEach(function(t) { + var te = document.createElement('div'); + te.className = 'tv-ind-settings-tab' + (t.toLowerCase() === activeTab ? ' active' : ''); + te.textContent = t; + te.addEventListener('click', function() { + activeTab = t.toLowerCase(); + tabs.forEach(function(tn) { tabEls[tn].classList.toggle('active', tn.toLowerCase() === activeTab); }); + renderBody(); + }); + tabEls[t] = te; + tabBar.appendChild(te); + }); + header.appendChild(tabBar); + panel.appendChild(header); + + // Body + var body = document.createElement('div'); + body.className = 'tv-settings-body'; + body.style.cssText = 'flex:1;overflow-y:auto;min-height:80px;padding:16px 20px;'; + panel.appendChild(body); + + // --- Row builder helpers --- + function addSection(parent, text) { + var sec = document.createElement('div'); + sec.className = 'tv-settings-section'; + sec.textContent = text; + parent.appendChild(sec); + } + function makeRow(labelText) { + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced'; + var lbl = document.createElement('label'); + lbl.textContent = labelText; + row.appendChild(lbl); + var ctrl = document.createElement('div'); + ctrl.className = 'ts-controls'; + row.appendChild(ctrl); + return { row: row, ctrl: ctrl }; + } + function makeColorSwatch(color, onChange) { + var swatch = document.createElement('div'); + swatch.className = 'ts-swatch'; + swatch.dataset.baseColor = _tvColorToHex(color, '#aeb4c2'); + swatch.dataset.opacity = String(_tvColorOpacityPercent(color, 100)); + swatch.style.background = color; + swatch.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + _tvShowColorOpacityPopup( + swatch, + swatch.dataset.baseColor || color, + _tvToNumber(swatch.dataset.opacity, 100), + overlay, + function(newColor, newOpacity) { + swatch.dataset.baseColor = newColor; + swatch.dataset.opacity = String(newOpacity); + var display = _tvColorWithOpacity(newColor, newOpacity, newColor); + swatch.style.background = display; + onChange(display, newColor, newOpacity); + } + ); + }); + return swatch; + } + function addCheckRow(parent, label, val, onChange) { + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced'; + var lbl = document.createElement('label'); lbl.textContent = label; row.appendChild(lbl); + var cb = document.createElement('input'); cb.type = 'checkbox'; cb.className = 'ts-checkbox'; + cb.checked = !!val; + cb.addEventListener('change', function() { onChange(cb.checked); }); + row.appendChild(cb); parent.appendChild(row); + } + function addSelectRow(parent, label, opts, val, onChange) { + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced'; + var lbl = document.createElement('label'); lbl.textContent = label; row.appendChild(lbl); + var sel = document.createElement('select'); sel.className = 'ts-select'; + opts.forEach(function(o) { + var opt = document.createElement('option'); + opt.value = typeof o === 'string' ? o : o.v; + opt.textContent = typeof o === 'string' ? o : o.l; + if (String(opt.value) === String(val)) opt.selected = true; + sel.appendChild(opt); + }); + sel.addEventListener('change', function() { onChange(sel.value); }); + row.appendChild(sel); parent.appendChild(row); + } + function addNumberRow(parent, label, min, max, step, val, onChange) { + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced'; + var lbl = document.createElement('label'); lbl.textContent = label; row.appendChild(lbl); + var inp = document.createElement('input'); inp.type = 'number'; inp.className = 'ts-input'; + inp.min = min; inp.max = max; inp.step = step; inp.value = val; + inp.addEventListener('keydown', function(e) { e.stopPropagation(); }); + inp.addEventListener('input', function() { var v = parseFloat(inp.value); if (!isNaN(v) && v >= parseFloat(min)) onChange(v); }); + row.appendChild(inp); parent.appendChild(row); + } + + function renderBody() { + body.innerHTML = ''; + + // ===================== INPUTS TAB ===================== + if (activeTab === 'inputs') { + // Symbol source radio buttons (separate section, no tv-settings-row label sizing) + var symSection = document.createElement('div'); + symSection.style.cssText = 'display:flex;flex-direction:column;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--pywry-tvchart-divider,rgba(128,128,128,0.15));margin-bottom:12px;'; + + var r1 = document.createElement('label'); + r1.style.cssText = 'display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;color:var(--pywry-tvchart-text);'; + var rb1 = document.createElement('input'); rb1.type = 'radio'; rb1.name = 'vol-sym-src'; rb1.value = 'main'; rb1.checked = true; + rb1.style.cssText = 'margin:0;'; + r1.appendChild(rb1); + r1.appendChild(document.createTextNode('Main chart symbol')); + symSection.appendChild(r1); + + var r2 = document.createElement('label'); + r2.style.cssText = 'display:flex;align-items:center;gap:8px;cursor:default;font-size:12px;color:var(--pywry-tvchart-text-muted,#787b86);opacity:0.5;'; + var rb2 = document.createElement('input'); rb2.type = 'radio'; rb2.name = 'vol-sym-src'; rb2.value = 'other'; rb2.disabled = true; + rb2.style.cssText = 'margin:0;'; + r2.appendChild(rb2); + r2.appendChild(document.createTextNode('Another symbol')); + // Pencil icon (disabled) + var pencilSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + pencilSvg.setAttribute('viewBox', '0 0 18 18'); + pencilSvg.setAttribute('width', '14'); + pencilSvg.setAttribute('height', '14'); + pencilSvg.style.cssText = 'opacity:0.4;flex-shrink:0;'; + pencilSvg.innerHTML = ''; + r2.appendChild(pencilSvg); + symSection.appendChild(r2); + + body.appendChild(symSection); + + // Remaining input fields + addNumberRow(body, 'MA Length', '1', '500', '1', draft.maLength, function(v) { draft.maLength = v; }); + addSelectRow(body, 'Volume MA', [ + { v: 'SMA', l: 'SMA' }, { v: 'EMA', l: 'EMA' }, { v: 'WMA', l: 'WMA' }, + ], draft.volumeMA, function(v) { draft.volumeMA = v; }); + addCheckRow(body, 'Color based on previous close', draft.colorBasedOnPrevClose, function(v) { + draft.colorBasedOnPrevClose = v; + applyVolumeLive(); + }); + addSelectRow(body, 'Smoothing Line', [ + { v: 'SMA', l: 'SMA' }, { v: 'EMA', l: 'EMA' }, { v: 'WMA', l: 'WMA' }, + ], draft.smoothingLine, function(v) { draft.smoothingLine = v; }); + addNumberRow(body, 'Smoothing Length', '1', '200', '1', draft.smoothingLength, function(v) { draft.smoothingLength = v; }); + + // ===================== STYLE TAB ===================== + } else if (activeTab === 'style') { + // Volume row: checkbox + "Volume" label ... Falling swatch Growing swatch + var volRow = document.createElement('div'); + volRow.style.cssText = 'display:flex;align-items:center;gap:8px;margin-bottom:2px;'; + var volCb = document.createElement('input'); volCb.type = 'checkbox'; volCb.className = 'ts-checkbox'; + volCb.checked = draft.showVolume; + volCb.addEventListener('change', function() { draft.showVolume = volCb.checked; }); + volRow.appendChild(volCb); + var volLbl = document.createElement('span'); + volLbl.textContent = 'Volume'; + volLbl.style.cssText = 'font-size:12px;color:var(--pywry-tvchart-text);flex:1;'; + volRow.appendChild(volLbl); + + // Falling color group (down) + var fallGroup = document.createElement('div'); + fallGroup.style.cssText = 'display:flex;flex-direction:column;align-items:center;gap:3px;'; + var downSwatch = makeColorSwatch(draft.downColor, function(display) { + draft.downColor = display; + applyVolumeLive(); + }); + fallGroup.appendChild(downSwatch); + var fallLbl = document.createElement('span'); + fallLbl.textContent = 'Falling'; + fallLbl.style.cssText = 'font-size:10px;color:var(--pywry-tvchart-text-muted,#787b86);'; + fallGroup.appendChild(fallLbl); + volRow.appendChild(fallGroup); + + // Growing color group (up) + var growGroup = document.createElement('div'); + growGroup.style.cssText = 'display:flex;flex-direction:column;align-items:center;gap:3px;'; + var upSwatch = makeColorSwatch(draft.upColor, function(display) { + draft.upColor = display; + applyVolumeLive(); + }); + growGroup.appendChild(upSwatch); + var growLbl = document.createElement('span'); + growLbl.textContent = 'Growing'; + growLbl.style.cssText = 'font-size:10px;color:var(--pywry-tvchart-text-muted,#787b86);'; + growGroup.appendChild(growLbl); + volRow.appendChild(growGroup); + + body.appendChild(volRow); + + // Separator + var sep1 = document.createElement('div'); + sep1.style.cssText = 'border-bottom:1px solid var(--pywry-tvchart-divider,rgba(128,128,128,0.15));margin:10px 0;'; + body.appendChild(sep1); + + // Price line toggle + addCheckRow(body, 'Price line', draft.priceLine, function(v) { draft.priceLine = v; }); + + // Separator + var sep2 = document.createElement('div'); + sep2.style.cssText = 'border-bottom:1px solid var(--pywry-tvchart-divider,rgba(128,128,128,0.15));margin:10px 0;'; + body.appendChild(sep2); + + // Volume MA row: checkbox + label + color + var maRow = document.createElement('div'); + maRow.style.cssText = 'display:flex;align-items:center;gap:8px;margin-bottom:8px;'; + var maCb = document.createElement('input'); maCb.type = 'checkbox'; maCb.className = 'ts-checkbox'; + maCb.checked = draft.showVolumeMA; + maCb.addEventListener('change', function() { draft.showVolumeMA = maCb.checked; }); + maRow.appendChild(maCb); + var maLbl = document.createElement('span'); + maLbl.textContent = 'Volume MA'; + maLbl.style.cssText = 'font-size:12px;color:var(--pywry-tvchart-text);flex:1;'; + maRow.appendChild(maLbl); + maRow.appendChild(makeColorSwatch(draft.volumeMAColor, function(display) { draft.volumeMAColor = display; })); + body.appendChild(maRow); + + // Smoothed MA row: checkbox + label + color + var smRow = document.createElement('div'); + smRow.style.cssText = 'display:flex;align-items:center;gap:8px;margin-bottom:8px;'; + var smCb = document.createElement('input'); smCb.type = 'checkbox'; smCb.className = 'ts-checkbox'; + smCb.checked = draft.showSmoothedMA; + smCb.addEventListener('change', function() { draft.showSmoothedMA = smCb.checked; }); + smRow.appendChild(smCb); + var smLbl = document.createElement('span'); + smLbl.textContent = 'Smoothed MA'; + smLbl.style.cssText = 'font-size:12px;color:var(--pywry-tvchart-text);flex:1;'; + smRow.appendChild(smLbl); + smRow.appendChild(makeColorSwatch(draft.smoothedMAColor, function(display) { draft.smoothedMAColor = display; })); + body.appendChild(smRow); + + // Separator + var sep3 = document.createElement('div'); + sep3.style.cssText = 'border-bottom:1px solid var(--pywry-tvchart-divider,rgba(128,128,128,0.15));margin:10px 0;'; + body.appendChild(sep3); + + // OUTPUT VALUES section + addSection(body, 'OUTPUT VALUES'); + addSelectRow(body, 'Precision', [ + { v: 'Default', l: 'Default' }, { v: '0', l: '0' }, { v: '1', l: '1' }, + { v: '2', l: '2' }, { v: '3', l: '3' }, { v: '4', l: '4' }, + ], draft.precision, function(v) { draft.precision = v; }); + addCheckRow(body, 'Labels on price scale', draft.labelsOnPriceScale, function(v) { draft.labelsOnPriceScale = v; }); + addCheckRow(body, 'Values in status line', draft.valuesInStatusLine, function(v) { draft.valuesInStatusLine = v; }); + + // INPUT VALUES section + addSection(body, 'INPUT VALUES'); + addCheckRow(body, 'Inputs in status line', draft.inputsInStatusLine, function(v) { draft.inputsInStatusLine = v; }); + + // ===================== VISIBILITY TAB ===================== + } else if (activeTab === 'visibility') { + addSection(body, 'TIMEFRAME VISIBILITY'); + var intervals = [ + { key: 'seconds', label: 'Seconds', rangeLabel: '1s \u2013 59s' }, + { key: 'minutes', label: 'Minutes', rangeLabel: '1m \u2013 59m' }, + { key: 'hours', label: 'Hours', rangeLabel: '1H \u2013 24H' }, + { key: 'days', label: 'Days', rangeLabel: '1D \u2013 1Y' }, + { key: 'weeks', label: 'Weeks', rangeLabel: '1W \u2013 52W' }, + { key: 'months', label: 'Months', rangeLabel: '1M \u2013 12M' }, + ]; + if (!draft.visibility) { + draft.visibility = {}; + intervals.forEach(function(iv) { draft.visibility[iv.key] = true; }); + } + intervals.forEach(function(iv) { + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced'; + row.style.cssText = 'display:flex;align-items:center;gap:8px;'; + var cb = document.createElement('input'); cb.type = 'checkbox'; cb.className = 'ts-checkbox'; + cb.checked = draft.visibility[iv.key] !== false; + cb.addEventListener('change', function() { draft.visibility[iv.key] = cb.checked; }); + row.appendChild(cb); + var lbl = document.createElement('label'); lbl.style.flex = '1'; + lbl.textContent = iv.label; + row.appendChild(lbl); + var range = document.createElement('span'); + range.style.cssText = 'color:var(--pywry-tvchart-text-muted,#787b86);font-size:11px;'; + range.textContent = iv.rangeLabel; + row.appendChild(range); + body.appendChild(row); + }); + } + } + + renderBody(); + + // Footer with Defaults dropdown, Cancel, Ok + var footer = document.createElement('div'); + footer.className = 'tv-settings-footer'; + footer.style.cssText = 'position:relative;bottom:auto;left:auto;right:auto;'; + + var cancelBtn = document.createElement('button'); + cancelBtn.className = 'ts-btn-cancel'; + cancelBtn.textContent = 'Cancel'; + cancelBtn.addEventListener('click', function() { + draft = JSON.parse(JSON.stringify(snapshot)); + applyVolumeLive(); + _tvHideVolumeSettings(); + }); + footer.appendChild(cancelBtn); + + var okBtn = document.createElement('button'); + okBtn.className = 'ts-btn-ok'; + okBtn.textContent = 'Ok'; + okBtn.addEventListener('click', function() { + // Persist all volume prefs + if (!entry._volumeColorPrefs) entry._volumeColorPrefs = {}; + entry._volumeColorPrefs.upColor = draft.upColor; + entry._volumeColorPrefs.downColor = draft.downColor; + entry._volumeColorPrefs.maLength = draft.maLength; + entry._volumeColorPrefs.volumeMA = draft.volumeMA; + entry._volumeColorPrefs.colorBasedOnPrevClose = draft.colorBasedOnPrevClose; + entry._volumeColorPrefs.smoothingLine = draft.smoothingLine; + entry._volumeColorPrefs.smoothingLength = draft.smoothingLength; + entry._volumeColorPrefs.showVolumePlot = draft.showVolume; + entry._volumeColorPrefs.showVolumeMA = draft.showVolumeMA; + entry._volumeColorPrefs.volumeMAColor = draft.volumeMAColor; + entry._volumeColorPrefs.showSmoothedMA = draft.showSmoothedMA; + entry._volumeColorPrefs.smoothedMAColor = draft.smoothedMAColor; + entry._volumeColorPrefs.precision = draft.precision; + entry._volumeColorPrefs.labelsOnPriceScale = draft.labelsOnPriceScale; + entry._volumeColorPrefs.valuesInStatusLine = draft.valuesInStatusLine; + entry._volumeColorPrefs.inputsInStatusLine = draft.inputsInStatusLine; + entry._volumeColorPrefs.priceLine = draft.priceLine; + entry._volumeColorPrefs.visibility = draft.visibility; + + // Apply live colour change (already previewed) and update series options + applyVolumeLive(); + if (volSeries) { + try { + volSeries.applyOptions({ + lastValueVisible: draft.priceLine, + priceLineVisible: draft.priceLine, + }); + } catch (e) {} + } + + _tvHideVolumeSettings(); + }); + footer.appendChild(okBtn); + panel.appendChild(footer); + + _tvOverlayContainer(chartId).appendChild(overlay); +} + diff --git a/pywry/pywry/frontend/src/tvchart/08-settings/04-chart-settings.js b/pywry/pywry/frontend/src/tvchart/08-settings/04-chart-settings.js new file mode 100644 index 0000000..364a1d6 --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/08-settings/04-chart-settings.js @@ -0,0 +1,1177 @@ +function _tvShowChartSettings(chartId) { + _tvHideChartSettings(); + var resolved = _tvResolveChartEntry(chartId); + if (!resolved || !resolved.entry) return; + chartId = resolved.chartId; + var entry = resolved.entry; + var currentSettings = (entry && entry._chartPrefs && entry._chartPrefs.settings) + ? entry._chartPrefs.settings + : _tvBuildCurrentSettings(entry); + + var overlay = document.createElement('div'); + overlay.className = 'tv-settings-overlay'; + _chartSettingsOverlay = overlay; + _chartSettingsOverlayChartId = chartId; + _tvSetChartInteractionLocked(chartId, true); + _tvRefreshLegendVisibility(); + overlay.addEventListener('click', function(e) { + if (e.target === overlay) _tvHideChartSettings(); + }); + overlay.addEventListener('mousedown', function(e) { e.stopPropagation(); }); + overlay.addEventListener('wheel', function(e) { e.stopPropagation(); }); + + var panel = document.createElement('div'); + panel.className = 'tv-settings-panel'; + overlay.appendChild(panel); + + // Header (stays fixed at top) + var header = document.createElement('div'); + header.className = 'tv-settings-header'; + var title = document.createElement('h3'); + title.textContent = 'Symbol Settings'; + header.appendChild(title); + var closeBtn = document.createElement('button'); + closeBtn.className = 'tv-settings-close'; + closeBtn.innerHTML = ''; + closeBtn.addEventListener('click', function() { _tvHideChartSettings(); }); + header.appendChild(closeBtn); + panel.appendChild(header); + + // Sidebar with tabs + var sidebar = document.createElement('div'); + sidebar.className = 'tv-settings-sidebar'; + panel.appendChild(sidebar); + + var tabDefs = [ + { id: 'symbol', label: 'Symbol', icon: '🔤' }, + { id: 'status', label: 'Status line', icon: '━' }, + { id: 'scales', label: 'Scales and lines', icon: '↕' }, + { id: 'canvas', label: 'Canvas', icon: '⬜' } + ]; + + var tabButtons = {}; + var activeTab = 'symbol'; + + for (var ti = 0; ti < tabDefs.length; ti++) { + var tdef = tabDefs[ti]; + var tBtn = document.createElement('div'); + tBtn.className = 'tv-settings-sidebar-tab' + (ti === 0 ? ' active' : ''); + tBtn.textContent = tdef.label; + tBtn.setAttribute('data-tab', tdef.id); + tabButtons[tdef.id] = tBtn; + + (function(tabId, btn) { + btn.addEventListener('click', function() { + if (activeTab === tabId) return; + tabButtons[activeTab].classList.remove('active'); + document.getElementById('pane-' + activeTab).classList.remove('active'); + tabButtons[tabId].classList.add('active'); + document.getElementById('pane-' + tabId).classList.add('active'); + activeTab = tabId; + }); + })(tdef.id, tBtn); + + sidebar.appendChild(tBtn); + } + + // Content area + var content = document.createElement('div'); + content.className = 'tv-settings-content'; + panel.appendChild(content); + + // Helper functions for controls + + function syncSettingsSwatch(swatch, baseColor, opacityPercent) { + if (!swatch) return; + var nextColor = _tvColorToHex(baseColor || swatch.dataset.baseColor || '#aeb4c2', '#aeb4c2'); + var nextOpacity = _tvClamp(_tvToNumber(opacityPercent, swatch.dataset.opacity || 100), 0, 100); + swatch.dataset.baseColor = nextColor; + swatch.dataset.opacity = String(nextOpacity); + swatch.style.background = _tvColorWithOpacity(nextColor, nextOpacity, nextColor); + } + + function addCheckboxRow(parent, label, checked) { + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced'; + var lbl = document.createElement('label'); + lbl.textContent = label; + row.appendChild(lbl); + var cb = document.createElement('input'); + cb.type = 'checkbox'; + cb.className = 'ts-checkbox'; + cb.checked = !!checked; + cb.setAttribute('data-setting', label); + var ctrl = document.createElement('div'); + ctrl.className = 'ts-controls'; + ctrl.appendChild(cb); + row.appendChild(ctrl); + parent.appendChild(row); + return cb; + } + + function addIndentedCheckboxRow(parent, label, checked) { + var cb = addCheckboxRow(parent, label, checked); + if (cb && cb.parentNode && cb.parentNode.parentNode) { + cb.parentNode.parentNode.classList.add('tv-settings-row-indent'); + } + return cb; + } + + function addSelectRow(parent, label, options, selected) { + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced'; + var lbl = document.createElement('label'); + lbl.textContent = label; + row.appendChild(lbl); + var sel = document.createElement('select'); + sel.className = 'ts-select'; + sel.setAttribute('data-setting', label); + for (var i = 0; i < options.length; i++) { + var o = document.createElement('option'); + o.value = options[i]; + o.textContent = options[i]; + if (options[i] === selected) o.selected = true; + sel.appendChild(o); + } + var ctrl = document.createElement('div'); + ctrl.className = 'ts-controls'; + ctrl.appendChild(sel); + row.appendChild(ctrl); + parent.appendChild(row); + return sel; + } + + function addColorRow(parent, label, checked, color) { + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced'; + var lbl = document.createElement('label'); + lbl.className = 'tv-settings-inline-label'; + lbl.textContent = label; + row.appendChild(lbl); + var ctrl = document.createElement('div'); + ctrl.className = 'ts-controls'; + if (checked != null) { + var cb = document.createElement('input'); + cb.type = 'checkbox'; + cb.className = 'ts-checkbox'; + cb.setAttribute('data-setting', label + '-Enabled'); + cb.checked = !!checked; + ctrl.appendChild(cb); + } + var swatch = document.createElement('div'); + swatch.className = 'ts-swatch'; + swatch.setAttribute('data-setting', label + '-Color'); + swatch.dataset.baseColor = _tvColorToHex(color || '#aeb4c2', '#aeb4c2'); + swatch.dataset.opacity = String(_tvColorOpacityPercent(color, 100)); + swatch.style.background = color || '#aeb4c2'; + ctrl.appendChild(swatch); + + swatch.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + _tvShowColorOpacityPopup( + swatch, + swatch.dataset.baseColor || color || '#aeb4c2', + _tvToNumber(swatch.dataset.opacity, 100), + overlay, + function(newColor, newOpacity) { + swatch.dataset.baseColor = newColor; + swatch.dataset.opacity = String(newOpacity); + swatch.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); + scheduleSettingsPreview(); + } + ); + }); + + row.appendChild(ctrl); + parent.appendChild(row); + return { + checkbox: checked !== undefined && checked !== false ? ctrl.querySelector('input[type="checkbox"]') : null, + swatch: swatch, + }; + } + + function addDualColorRow(parent, label, checked, upColor, downColor, upSetting, downSetting) { + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced'; + + var lbl = document.createElement('label'); + lbl.className = 'tv-settings-inline-label'; + lbl.textContent = label; + row.appendChild(lbl); + + var ctrl = document.createElement('div'); + ctrl.className = 'ts-controls'; + + var cb = document.createElement('input'); + cb.type = 'checkbox'; + cb.className = 'ts-checkbox'; + cb.setAttribute('data-setting', label); + cb.checked = !!checked; + ctrl.appendChild(cb); + + function makeSwatch(settingKey, color) { + var wrap = document.createElement('div'); + wrap.className = 'tv-settings-color-pair'; + + var opacityInput = document.createElement('input'); + opacityInput.type = 'hidden'; + var explicitOpacity = currentSettings[settingKey + '-Opacity']; + var legacyOpacity = currentSettings[label + '-Opacity']; + opacityInput.value = explicitOpacity != null ? String(explicitOpacity) : (legacyOpacity != null ? String(legacyOpacity) : '100'); + opacityInput.setAttribute('data-setting', settingKey + '-Opacity'); + wrap.appendChild(opacityInput); + + var swatch = document.createElement('div'); + swatch.className = 'ts-swatch'; + swatch.setAttribute('data-setting', settingKey); + syncSettingsSwatch(swatch, color || '#aeb4c2', opacityInput.value); + wrap.appendChild(swatch); + + swatch.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + _tvShowColorOpacityPopup( + swatch, + swatch.dataset.baseColor || color || '#aeb4c2', + _tvToNumber(opacityInput.value, 100), + overlay, + function(newColor, newOpacity) { + opacityInput.value = String(newOpacity); + syncSettingsSwatch(swatch, newColor, newOpacity); + scheduleSettingsPreview(); + } + ); + }); + + return wrap; + } + + ctrl.appendChild(makeSwatch(upSetting, upColor)); + ctrl.appendChild(makeSwatch(downSetting, downColor)); + row.appendChild(ctrl); + parent.appendChild(row); + return row; + } + + function addCheckboxSliderRow(parent, label, checked, enabledSetting, sliderValue, sliderSetting) { + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced'; + + var lbl = document.createElement('label'); + lbl.textContent = label; + row.appendChild(lbl); + + var ctrl = document.createElement('div'); + ctrl.className = 'ts-controls ts-controls-slider'; + + var cb = document.createElement('input'); + cb.type = 'checkbox'; + cb.className = 'ts-checkbox'; + cb.checked = !!checked; + cb.setAttribute('data-setting', enabledSetting); + ctrl.appendChild(cb); + + var slider = document.createElement('input'); + slider.type = 'range'; + slider.min = '0'; + slider.max = '100'; + slider.value = sliderValue != null ? String(sliderValue) : '100'; + slider.className = 'tv-settings-slider'; + slider.setAttribute('data-setting', sliderSetting); + ctrl.appendChild(slider); + + var output = document.createElement('span'); + output.className = 'tv-settings-slider-value'; + output.textContent = slider.value + '%'; + ctrl.appendChild(output); + + slider.addEventListener('input', function() { + output.textContent = slider.value + '%'; + }); + + row.appendChild(ctrl); + parent.appendChild(row); + return { checkbox: cb, slider: slider, output: output }; + } + + function addCheckboxInputRow(parent, label, checked, enabledSetting, inputValue, inputSetting) { + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced tv-settings-row-combo'; + + var lbl = document.createElement('label'); + lbl.textContent = ''; + row.appendChild(lbl); + + var ctrl = document.createElement('div'); + ctrl.className = 'ts-controls'; + + var cb = document.createElement('input'); + cb.type = 'checkbox'; + cb.className = 'ts-checkbox'; + cb.checked = !!checked; + cb.setAttribute('data-setting', enabledSetting); + ctrl.appendChild(cb); + + var textLbl = document.createElement('span'); + textLbl.className = 'tv-settings-inline-gap'; + textLbl.textContent = label; + ctrl.appendChild(textLbl); + + var inp = document.createElement('input'); + inp.type = 'text'; + inp.className = 'ts-input ts-input-wide'; + inp.setAttribute('data-setting', inputSetting); + inp.value = inputValue != null ? String(inputValue) : ''; + ctrl.appendChild(inp); + + row.appendChild(ctrl); + parent.appendChild(row); + return { checkbox: cb, input: inp }; + } + + function addSelectColorRow(parent, label, options, selected, selectSetting, color, colorSetting) { + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced'; + + var lbl = document.createElement('label'); + lbl.textContent = label; + row.appendChild(lbl); + + var ctrl = document.createElement('div'); + ctrl.className = 'ts-controls'; + + var sel = document.createElement('select'); + sel.className = 'ts-select'; + sel.setAttribute('data-setting', selectSetting || label); + options.forEach(function(opt) { + var o = document.createElement('option'); + o.value = opt; + o.textContent = opt; + if (opt === selected) o.selected = true; + sel.appendChild(o); + }); + ctrl.appendChild(sel); + + var swatch = document.createElement('div'); + swatch.className = 'ts-swatch'; + swatch.setAttribute('data-setting', colorSetting || (label + ' color')); + swatch.dataset.baseColor = _tvColorToHex(color || '#aeb4c2', '#aeb4c2'); + swatch.dataset.opacity = String(_tvColorOpacityPercent(color, 100)); + swatch.style.background = color || '#aeb4c2'; + ctrl.appendChild(swatch); + + swatch.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + _tvShowColorOpacityPopup( + swatch, + swatch.dataset.baseColor || color || '#aeb4c2', + _tvToNumber(swatch.dataset.opacity, 100), + overlay, + function(newColor, newOpacity) { + swatch.dataset.baseColor = newColor; + swatch.dataset.opacity = String(newOpacity); + swatch.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); + scheduleSettingsPreview(); + } + ); + }); + + row.appendChild(ctrl); + parent.appendChild(row); + return { select: sel, swatch: swatch }; + } + + function addNumberInputRow(parent, label, settingKey, value, min, max, step, unitText, inputClassName) { + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced'; + + var lbl = document.createElement('label'); + lbl.textContent = label; + row.appendChild(lbl); + + var ctrl = document.createElement('div'); + ctrl.className = 'ts-controls'; + + var inp = document.createElement('input'); + inp.type = 'number'; + inp.className = inputClassName || 'ts-input'; + inp.setAttribute('data-setting', settingKey || label); + if (min != null) inp.min = String(min); + if (max != null) inp.max = String(max); + if (step != null) inp.step = String(step); + inp.value = value != null ? String(value) : ''; + ctrl.appendChild(inp); + + if (unitText) { + var unit = document.createElement('span'); + unit.className = 'tv-settings-unit'; + unit.textContent = unitText; + ctrl.appendChild(unit); + } + + row.appendChild(ctrl); + parent.appendChild(row); + return inp; + } + + function addColorSwatchRow(parent, label, color, settingKey) { + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced'; + + var lbl = document.createElement('label'); + lbl.textContent = label; + row.appendChild(lbl); + + var ctrl = document.createElement('div'); + ctrl.className = 'ts-controls'; + + var swatch = document.createElement('div'); + swatch.className = 'ts-swatch'; + swatch.setAttribute('data-setting', settingKey || label); + swatch.dataset.baseColor = _tvColorToHex(color || '#aeb4c2', '#aeb4c2'); + swatch.dataset.opacity = String(_tvColorOpacityPercent(color, 100)); + swatch.style.background = color || '#aeb4c2'; + ctrl.appendChild(swatch); + + swatch.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + _tvShowColorOpacityPopup( + swatch, + swatch.dataset.baseColor || color || '#aeb4c2', + _tvToNumber(swatch.dataset.opacity, 100), + overlay, + function(newColor, newOpacity) { + swatch.dataset.baseColor = newColor; + swatch.dataset.opacity = String(newOpacity); + swatch.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); + scheduleSettingsPreview(); + } + ); + }); + + row.appendChild(ctrl); + parent.appendChild(row); + return { swatch: swatch }; + } + + // Pane: Symbol + var paneSymbol = document.createElement('div'); + paneSymbol.id = 'pane-symbol'; + paneSymbol.className = 'tv-settings-content-pane active'; + + var lineSection = document.createElement('div'); + lineSection.className = 'tv-settings-section-body'; + paneSymbol.appendChild(lineSection); + + var mainSeries = _tvGetMainSeries(entry); + var seriesType = mainSeries ? _tvGuessSeriesType(mainSeries) : 'Candlestick'; + + var symbolTitle = document.createElement('div'); + symbolTitle.className = 'tv-settings-title'; + + if (seriesType === 'Candlestick') { + symbolTitle.textContent = 'CANDLES'; + lineSection.appendChild(symbolTitle); + addCheckboxRow(lineSection, 'Color bars based on previous close', currentSettings['Color bars based on previous close']); + addDualColorRow(lineSection, 'Body', currentSettings['Body'], currentSettings['Body-Up Color'], currentSettings['Body-Down Color'], 'Body-Up Color', 'Body-Down Color'); + addDualColorRow(lineSection, 'Borders', currentSettings['Borders'], currentSettings['Borders-Up Color'], currentSettings['Borders-Down Color'], 'Borders-Up Color', 'Borders-Down Color'); + addDualColorRow(lineSection, 'Wick', currentSettings['Wick'], currentSettings['Wick-Up Color'], currentSettings['Wick-Down Color'], 'Wick-Up Color', 'Wick-Down Color'); + } else if (seriesType === 'Bar') { + symbolTitle.textContent = 'BARS'; + lineSection.appendChild(symbolTitle); + addCheckboxRow(lineSection, 'Color bars based on previous close', currentSettings['Color bars based on previous close']); + addColorSwatchRow(lineSection, 'Up color', currentSettings['Bar Up Color'], 'Bar Up Color'); + addColorSwatchRow(lineSection, 'Down color', currentSettings['Bar Down Color'], 'Bar Down Color'); + } else if (seriesType === 'Line') { + symbolTitle.textContent = 'LINE'; + lineSection.appendChild(symbolTitle); + addColorSwatchRow(lineSection, 'Color', currentSettings['Line color'], 'Line color'); + addSelectRow(lineSection, 'Line style', ['Solid', 'Dotted', 'Dashed'], currentSettings['Line style']); + addNumberInputRow(lineSection, 'Line width', 'Line width', currentSettings['Line width'], 1, 4, 1, '', 'ts-input'); + } else if (seriesType === 'Area') { + symbolTitle.textContent = 'AREA'; + lineSection.appendChild(symbolTitle); + addColorSwatchRow(lineSection, 'Line color', currentSettings['Line color'], 'Line color'); + addNumberInputRow(lineSection, 'Line width', 'Line width', currentSettings['Line width'], 1, 4, 1, '', 'ts-input'); + addColorSwatchRow(lineSection, 'Fill 1', currentSettings['Area Fill Top'], 'Area Fill Top'); + addColorSwatchRow(lineSection, 'Fill 2', currentSettings['Area Fill Bottom'], 'Area Fill Bottom'); + } else if (seriesType === 'Baseline') { + symbolTitle.textContent = 'BASELINE'; + lineSection.appendChild(symbolTitle); + addNumberInputRow(lineSection, 'Base level', 'Baseline Level', currentSettings['Baseline Level'], null, null, null, '', 'ts-input'); + addColorSwatchRow(lineSection, 'Top line color', currentSettings['Baseline Top Line'], 'Baseline Top Line'); + addColorSwatchRow(lineSection, 'Bottom line color', currentSettings['Baseline Bottom Line'], 'Baseline Bottom Line'); + addColorSwatchRow(lineSection, 'Top area 1', currentSettings['Baseline Top Fill 1'], 'Baseline Top Fill 1'); + addColorSwatchRow(lineSection, 'Top area 2', currentSettings['Baseline Top Fill 2'], 'Baseline Top Fill 2'); + addColorSwatchRow(lineSection, 'Bottom area 1', currentSettings['Baseline Bottom Fill 1'], 'Baseline Bottom Fill 1'); + addColorSwatchRow(lineSection, 'Bottom area 2', currentSettings['Baseline Bottom Fill 2'], 'Baseline Bottom Fill 2'); + } else if (seriesType === 'Histogram') { + symbolTitle.textContent = 'COLUMNS'; + lineSection.appendChild(symbolTitle); + addCheckboxRow(lineSection, 'Color bars based on previous close', currentSettings['Color bars based on previous close']); + addColorSwatchRow(lineSection, 'Up color', currentSettings['Bar Up Color'], 'Bar Up Color'); + addColorSwatchRow(lineSection, 'Down color', currentSettings['Bar Down Color'], 'Bar Down Color'); + } else { + symbolTitle.textContent = seriesType.toUpperCase(); + lineSection.appendChild(symbolTitle); + addColorSwatchRow(lineSection, 'Color', currentSettings['Line color'], 'Line color'); + addNumberInputRow(lineSection, 'Line width', 'Line width', currentSettings['Line width'], 1, 4, 1, '', 'ts-input'); + } + + var modTitle = document.createElement('div'); + modTitle.className = 'tv-settings-section'; + modTitle.textContent = 'DATA MODIFICATION'; + lineSection.appendChild(modTitle); + + addSelectRow(lineSection, 'Session', ['Regular trading hours', 'Extended trading hours'], currentSettings['Session']); + addSelectRow(lineSection, 'Precision', ['Default', '0.1', '0.01', '0.001', '0.0001'], currentSettings['Precision']); + addSelectRow(lineSection, 'Timezone', ['UTC', 'Local'], currentSettings['Timezone']); + + // Ensure the default Symbol tab has visible content. + content.appendChild(paneSymbol); + + // Pane: Status line + var paneStatus = document.createElement('div'); + paneStatus.id = 'pane-status'; + paneStatus.className = 'tv-settings-content-pane'; + var statusSection = document.createElement('div'); + statusSection.className = 'tv-settings-section-body'; + paneStatus.appendChild(statusSection); + var statusTitle = document.createElement('div'); + statusTitle.className = 'tv-settings-title'; + statusTitle.textContent = 'SYMBOL'; + statusSection.appendChild(statusTitle); + + addCheckboxRow(statusSection, 'Logo', currentSettings['Logo']); + + // Title checkbox + inline description-mode dropdown (matches TradingView layout) + (function() { + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced'; + var lbl = document.createElement('label'); + lbl.textContent = 'Title'; + row.appendChild(lbl); + var ctrl = document.createElement('div'); + ctrl.className = 'ts-controls'; + var cb = document.createElement('input'); + cb.type = 'checkbox'; + cb.className = 'ts-checkbox'; + cb.checked = currentSettings['Title'] !== false; + cb.setAttribute('data-setting', 'Title'); + ctrl.appendChild(cb); + var sel = document.createElement('select'); + sel.className = 'ts-select'; + sel.setAttribute('data-setting', 'Description'); + var descOpts = ['Description', 'Ticker', 'Ticker and description']; + for (var di = 0; di < descOpts.length; di++) { + var o = document.createElement('option'); + o.value = descOpts[di]; + o.textContent = descOpts[di]; + if (descOpts[di] === (currentSettings['Description'] || 'Description')) o.selected = true; + sel.appendChild(o); + } + ctrl.appendChild(sel); + row.appendChild(ctrl); + statusSection.appendChild(row); + })(); + addCheckboxRow(statusSection, 'Chart values', currentSettings['Chart values']); + addCheckboxRow(statusSection, 'Bar change values', currentSettings['Bar change values']); + addCheckboxRow(statusSection, 'Volume', currentSettings['Volume']); + + var statusIndicTitle = document.createElement('div'); + statusIndicTitle.className = 'tv-settings-section'; + statusIndicTitle.textContent = 'INDICATORS'; + statusSection.appendChild(statusIndicTitle); + + addCheckboxRow(statusSection, 'Titles', currentSettings['Titles']); + + addIndentedCheckboxRow(statusSection, 'Inputs', currentSettings['Inputs']); + + addCheckboxRow(statusSection, 'Values', currentSettings['Values']); + addCheckboxSliderRow( + statusSection, + 'Background', + currentSettings['Background-Enabled'], + 'Background-Enabled', + currentSettings['Background-Opacity'], + 'Background-Opacity' + ); + + content.appendChild(paneStatus); + + // Pane: Scales and lines - COMPLETE IMPLEMENTATION + var paneScales = document.createElement('div'); + paneScales.id = 'pane-scales'; + paneScales.className = 'tv-settings-content-pane'; + var scalesSection = document.createElement('div'); + scalesSection.className = 'tv-settings-section-body'; + paneScales.appendChild(scalesSection); + + var scalePriceTitle = document.createElement('div'); + scalePriceTitle.className = 'tv-settings-section'; + scalePriceTitle.textContent = 'PRICE SCALE'; + scalesSection.appendChild(scalePriceTitle); + + addSelectRow(scalesSection, 'Scale modes (A and L)', ['Visible on mouse over', 'Hidden'], currentSettings['Scale modes (A and L)']); + + addCheckboxInputRow( + scalesSection, + 'Lock price to bar ratio', + currentSettings['Lock price to bar ratio'], + 'Lock price to bar ratio', + currentSettings['Lock price to bar ratio (value)'], + 'Lock price to bar ratio (value)' + ); + + addSelectRow(scalesSection, 'Scales placement', ['Auto', 'Left', 'Right'], currentSettings['Scales placement']); + + var scalePriceLabelsTitle = document.createElement('div'); + scalePriceLabelsTitle.className = 'tv-settings-section'; + scalePriceLabelsTitle.textContent = 'PRICE LABELS & LINES'; + scalesSection.appendChild(scalePriceLabelsTitle); + + addCheckboxRow(scalesSection, 'No overlapping labels', currentSettings['No overlapping labels']); + addCheckboxRow(scalesSection, 'Plus button', currentSettings['Plus button']); + addCheckboxRow(scalesSection, 'Countdown to bar close', currentSettings['Countdown to bar close']); + + addSelectColorRow( + scalesSection, + 'Symbol', + ['Value, line', 'Line', 'Label', 'Hidden'], + currentSettings['Symbol'], + 'Symbol', + currentSettings['Symbol color'], + 'Symbol color' + ); + + addSelectRow( + scalesSection, + 'Value according to scale', + ['Value according to scale', 'Percent change'], + currentSettings['Value according to scale'] || currentSettings['Value according to sc...'] + ); + addSelectRow(scalesSection, 'Indicators and financials', ['Value', 'Change', 'Percent change'], currentSettings['Indicators and financials']); + + addSelectColorRow( + scalesSection, + 'High and low', + ['Hidden', 'Values only', 'Values and lines'], + currentSettings['High and low'], + 'High and low', + currentSettings['High and low color'], + 'High and low color' + ); + + var scaleTimeTitle = document.createElement('div'); + scaleTimeTitle.className = 'tv-settings-section'; + scaleTimeTitle.textContent = 'TIME SCALE'; + scalesSection.appendChild(scaleTimeTitle); + + addCheckboxRow(scalesSection, 'Day of week on labels', currentSettings['Day of week on labels']); + addSelectRow(scalesSection, 'Date format', ['Mon 29 Sep \'97', 'MM/DD/YY', 'DD/MM/YY', 'YYYY-MM-DD'], currentSettings['Date format']); + addSelectRow(scalesSection, 'Time hours format', ['24-hours', '12-hours'], currentSettings['Time hours format']); + + content.appendChild(paneScales); + + // Pane: Canvas - COMPLETE IMPLEMENTATION + var paneCanvas = document.createElement('div'); + paneCanvas.id = 'pane-canvas'; + paneCanvas.className = 'tv-settings-content-pane'; + var canvasSection = document.createElement('div'); + canvasSection.className = 'tv-settings-section-body'; + paneCanvas.appendChild(canvasSection); + + var canvasBasicTitle = document.createElement('div'); + canvasBasicTitle.className = 'tv-settings-section'; + canvasBasicTitle.textContent = 'CHART BASIC STYLES'; + canvasSection.appendChild(canvasBasicTitle); + + addSelectColorRow(canvasSection, 'Background', ['Solid', 'Gradient'], currentSettings['Background'], 'Background', currentSettings['Background-Color'], 'Background-Color'); + addSelectColorRow(canvasSection, 'Grid lines', ['Vert and horz', 'Vert only', 'Horz only', 'Hidden'], currentSettings['Grid lines'], 'Grid lines', currentSettings['Grid-Color'], 'Grid-Color'); + addColorSwatchRow(canvasSection, 'Pane separators', currentSettings['Pane-Separators-Color'], 'Pane-Separators-Color'); + addColorRow(canvasSection, 'Crosshair', currentSettings['Crosshair-Enabled'], currentSettings['Crosshair-Color']); + addSelectColorRow(canvasSection, 'Watermark', ['Hidden', 'Visible'], currentSettings['Watermark'], 'Watermark', currentSettings['Watermark-Color'], 'Watermark-Color'); + + var canvasScalesTitle = document.createElement('div'); + canvasScalesTitle.className = 'tv-settings-section'; + canvasScalesTitle.textContent = 'SCALES'; + canvasSection.appendChild(canvasScalesTitle); + + addColorRow(canvasSection, 'Text', null, currentSettings['Text-Color']); + addColorRow(canvasSection, 'Lines', null, currentSettings['Lines-Color']); + + var canvasButtonsTitle = document.createElement('div'); + canvasButtonsTitle.className = 'tv-settings-section'; + canvasButtonsTitle.textContent = 'BUTTONS'; + canvasSection.appendChild(canvasButtonsTitle); + + addSelectRow(canvasSection, 'Navigation', ['Visible on mouse over', 'Hidden'], currentSettings['Navigation']); + addSelectRow(canvasSection, 'Pane', ['Visible on mouse over', 'Hidden'], currentSettings['Pane']); + + var canvasMarginsTitle = document.createElement('div'); + canvasMarginsTitle.className = 'tv-settings-section'; + canvasMarginsTitle.textContent = 'MARGINS'; + canvasSection.appendChild(canvasMarginsTitle); + + addNumberInputRow(canvasSection, 'Top', 'Margin Top', currentSettings['Margin Top'], 0, 100, 1, '%', 'ts-input ts-input-sm'); + addNumberInputRow(canvasSection, 'Bottom', 'Margin Bottom', currentSettings['Margin Bottom'], 0, 100, 1, '%', 'ts-input ts-input-sm'); + + content.appendChild(paneCanvas); + + // Footer + var footer = document.createElement('div'); + footer.className = 'tv-settings-footer'; + var originalSettings = JSON.parse(JSON.stringify(currentSettings || {})); + + function collectSettingsFromPanel() { + var settings = {}; + var allControls = panel.querySelectorAll('[data-setting]'); + allControls.forEach(function(ctrl) { + var settingKey = ctrl.getAttribute('data-setting'); + if (!settingKey) return; + + var value; + if (ctrl.tagName === 'SELECT') { + value = ctrl.value; + } else if (ctrl.tagName === 'INPUT') { + if (ctrl.type === 'checkbox') { + value = ctrl.checked; + } else if (ctrl.type === 'number' || ctrl.type === 'text' || ctrl.type === 'range' || ctrl.type === 'hidden') { + value = ctrl.value; + } + } else if (ctrl.classList.contains('ts-swatch')) { + value = ctrl.style.background || ctrl.style.backgroundColor || '#aeb4c2'; + } + + if (value !== undefined) settings[settingKey] = value; + }); + + if (entry && entry._chartPrefs) { + if (entry._chartPrefs.logScale !== undefined) settings['Log scale'] = !!entry._chartPrefs.logScale; + if (entry._chartPrefs.autoScale !== undefined) settings['Auto Scale'] = !!entry._chartPrefs.autoScale; + } + return settings; + } + + function syncLegendPreview(settings) { + var legendBox = _tvScopedById(chartId, 'tvchart-legend-box'); + if (!legendBox) return; + var titleVisible = settings['Title'] !== false; + legendBox.style.color = settings['Text-Color'] || ''; + + var titleNode = _tvScopedById(chartId, 'tvchart-legend-title'); + if (titleNode) titleNode.style.display = titleVisible ? 'inline-flex' : 'none'; + } + + function scheduleSettingsPreview() { + if (!entry || !panel) return; + try { + var previewSettings = collectSettingsFromPanel(); + _tvApplySettingsToChart(chartId, entry, previewSettings); + syncLegendPreview(previewSettings); + } catch (previewErr) { + console.warn('Settings preview error:', previewErr); + } + } + + function persistSettings(settings) { + if (!entry._chartPrefs) entry._chartPrefs = {}; + entry._chartPrefs.settings = settings; + entry._chartPrefs.colorBarsBasedOnPrevClose = !!settings['Color bars based on previous close']; + entry._chartPrefs.bodyVisible = settings['Body'] !== false; + entry._chartPrefs.bodyUpColor = settings['Body-Up Color'] || _cssVar('--pywry-tvchart-up', ''); + entry._chartPrefs.bodyDownColor = settings['Body-Down Color'] || _cssVar('--pywry-tvchart-down', ''); + entry._chartPrefs.bodyUpOpacity = _tvToNumber(settings['Body-Up Color-Opacity'], _tvToNumber(settings['Body-Opacity'], 100)); + entry._chartPrefs.bodyDownOpacity = _tvToNumber(settings['Body-Down Color-Opacity'], _tvToNumber(settings['Body-Opacity'], 100)); + entry._chartPrefs.bodyOpacity = _tvToNumber(settings['Body-Opacity'], 100); + entry._chartPrefs.bordersVisible = settings['Borders'] !== false; + entry._chartPrefs.borderUpColor = settings['Borders-Up Color'] || _cssVar('--pywry-tvchart-border-up', ''); + entry._chartPrefs.borderDownColor = settings['Borders-Down Color'] || _cssVar('--pywry-tvchart-border-down', ''); + entry._chartPrefs.borderUpOpacity = _tvToNumber(settings['Borders-Up Color-Opacity'], _tvToNumber(settings['Borders-Opacity'], 100)); + entry._chartPrefs.borderDownOpacity = _tvToNumber(settings['Borders-Down Color-Opacity'], _tvToNumber(settings['Borders-Opacity'], 100)); + entry._chartPrefs.borderOpacity = _tvToNumber(settings['Borders-Opacity'], 100); + entry._chartPrefs.wickVisible = settings['Wick'] !== false; + entry._chartPrefs.wickUpColor = settings['Wick-Up Color'] || _cssVar('--pywry-tvchart-wick-up', ''); + entry._chartPrefs.wickDownColor = settings['Wick-Down Color'] || _cssVar('--pywry-tvchart-wick-down', ''); + entry._chartPrefs.wickUpOpacity = _tvToNumber(settings['Wick-Up Color-Opacity'], _tvToNumber(settings['Wick-Opacity'], 100)); + entry._chartPrefs.wickDownOpacity = _tvToNumber(settings['Wick-Down Color-Opacity'], _tvToNumber(settings['Wick-Opacity'], 100)); + entry._chartPrefs.wickOpacity = _tvToNumber(settings['Wick-Opacity'], 100); + // Bar-specific + entry._chartPrefs.barUpColor = settings['Bar Up Color'] || ''; + entry._chartPrefs.barDownColor = settings['Bar Down Color'] || ''; + // Area-specific + entry._chartPrefs.areaFillTop = settings['Area Fill Top'] || ''; + entry._chartPrefs.areaFillBottom = settings['Area Fill Bottom'] || ''; + // Baseline-specific + entry._chartPrefs.baselineLevel = _tvToNumber(settings['Baseline Level'], 0); + entry._chartPrefs.baselineTopLine = settings['Baseline Top Line'] || ''; + entry._chartPrefs.baselineBottomLine = settings['Baseline Bottom Line'] || ''; + entry._chartPrefs.baselineTopFill1 = settings['Baseline Top Fill 1'] || ''; + entry._chartPrefs.baselineTopFill2 = settings['Baseline Top Fill 2'] || ''; + entry._chartPrefs.baselineBottomFill1 = settings['Baseline Bottom Fill 1'] || ''; + entry._chartPrefs.baselineBottomFill2 = settings['Baseline Bottom Fill 2'] || ''; + entry._chartPrefs.session = settings['Session'] || 'Regular trading hours'; + entry._chartPrefs.precision = settings['Precision'] || 'Default'; + entry._chartPrefs.timezone = settings['Timezone'] || 'UTC'; + entry._chartPrefs.description = settings['Description'] || 'Description'; + entry._chartPrefs.showLogo = settings['Logo'] !== false; + entry._chartPrefs.showTitle = settings['Title'] !== false; + entry._chartPrefs.showChartValues = settings['Chart values'] !== false; + entry._chartPrefs.showBarChange = settings['Bar change values'] !== false; + entry._chartPrefs.showVolume = settings['Volume'] !== false; + entry._chartPrefs.showIndicatorTitles = settings['Titles'] !== false; + entry._chartPrefs.showIndicatorInputs = settings['Inputs'] !== false; + entry._chartPrefs.showIndicatorValues = settings['Values'] !== false; + if (settings['Log scale'] !== undefined) entry._chartPrefs.logScale = !!settings['Log scale']; + if (settings['Auto Scale'] !== undefined) entry._chartPrefs.autoScale = !!settings['Auto Scale']; + entry._chartPrefs.backgroundEnabled = settings['Background-Enabled'] !== false; + entry._chartPrefs.backgroundOpacity = _tvToNumber(settings['Background-Opacity'], 50); + entry._chartPrefs.lineColor = settings['Line color'] || _cssVar('--pywry-tvchart-up', ''); + entry._chartPrefs.scaleModesVisibility = settings['Scale modes (A and L)'] || 'Visible on mouse over'; + entry._chartPrefs.lockPriceToBarRatio = !!settings['Lock price to bar ratio']; + entry._chartPrefs.lockPriceToBarRatioValue = _tvToNumber(settings['Lock price to bar ratio (value)'], 0.018734); + entry._chartPrefs.scalesPlacement = settings['Scales placement'] || 'Auto'; + entry._chartPrefs.noOverlappingLabels = settings['No overlapping labels'] !== false; + entry._chartPrefs.plusButton = !!settings['Plus button']; + entry._chartPrefs.countdownToBarClose = !!settings['Countdown to bar close']; + entry._chartPrefs.symbolMode = settings['Symbol'] || 'Value, line'; + entry._chartPrefs.symbolColor = settings['Symbol color'] || _cssVar('--pywry-tvchart-up', ''); + entry._chartPrefs.valueAccordingToScale = settings['Value according to scale'] || settings['Value according to sc...'] || 'Value according to scale'; + entry._chartPrefs.indicatorsAndFinancials = settings['Indicators and financials'] || 'Value'; + entry._chartPrefs.highAndLow = settings['High and low'] || 'Hidden'; + entry._chartPrefs.highAndLowColor = settings['High and low color'] || _cssVar('--pywry-tvchart-down'); + entry._chartPrefs.dayOfWeekOnLabels = settings['Day of week on labels'] !== false; + entry._chartPrefs.dateFormat = settings['Date format'] || 'Mon 29 Sep \'97'; + entry._chartPrefs.timeHoursFormat = settings['Time hours format'] || '24-hours'; + entry._chartPrefs.gridVisible = settings['Grid lines'] !== 'Hidden'; + entry._chartPrefs.gridMode = settings['Grid lines'] || 'Vert and horz'; + entry._chartPrefs.gridColor = settings['Grid-Color'] || _cssVar('--pywry-tvchart-grid'); + entry._chartPrefs.paneSeparatorsColor = settings['Pane-Separators-Color'] || _cssVar('--pywry-tvchart-grid'); + entry._chartPrefs.backgroundColor = settings['Background-Color'] || _cssVar('--pywry-tvchart-bg'); + entry._chartPrefs.crosshairEnabled = settings['Crosshair-Enabled'] === true; + entry._chartPrefs.crosshairColor = settings['Crosshair-Color'] || _cssVar('--pywry-tvchart-crosshair-color'); + entry._chartPrefs.watermarkVisible = settings['Watermark'] === 'Visible'; + entry._chartPrefs.watermarkColor = settings['Watermark-Color'] || 'rgba(255,255,255,0.08)'; + entry._chartPrefs.textColor = settings['Text-Color'] || _cssVar('--pywry-tvchart-text'); + entry._chartPrefs.linesColor = settings['Lines-Color'] || _cssVar('--pywry-tvchart-grid'); + entry._chartPrefs.navigation = settings['Navigation'] || 'Visible on mouse over'; + entry._chartPrefs.pane = settings['Pane'] || 'Visible on mouse over'; + entry._chartPrefs.marginTop = _tvToNumber(settings['Margin Top'], 10); + entry._chartPrefs.marginBottom = _tvToNumber(settings['Margin Bottom'], 8); + } + + function applySettingsToPanel(nextSettings) { + if (!panel || !nextSettings || typeof nextSettings !== 'object') return; + + var allControls = panel.querySelectorAll('[data-setting]'); + allControls.forEach(function(ctrl) { + var key = ctrl.getAttribute('data-setting'); + if (!key || nextSettings[key] === undefined) return; + var value = nextSettings[key]; + if (ctrl.tagName === 'SELECT') { + ctrl.value = String(value); + } else if (ctrl.tagName === 'INPUT') { + if (ctrl.type === 'checkbox') { + ctrl.checked = !!value; + } else { + ctrl.value = String(value); + } + } + }); + + var swatches = panel.querySelectorAll('.ts-swatch[data-setting]'); + swatches.forEach(function(swatch) { + var key = swatch.getAttribute('data-setting'); + if (!key || nextSettings[key] === undefined) return; + var colorVal = nextSettings[key]; + var opacityKey = key + '-Opacity'; + if (nextSettings[opacityKey] !== undefined) { + syncSettingsSwatch(swatch, colorVal, nextSettings[opacityKey]); + } else { + var nextHex = _tvColorToHex(colorVal || swatch.style.background || '#aeb4c2', '#aeb4c2'); + swatch.dataset.baseColor = nextHex; + swatch.style.background = nextHex; + } + + var swParent = swatch.parentNode; + if (swParent && swParent.querySelector) { + var colorInput = swParent.querySelector('input.ts-hidden-color-input[type="color"]'); + if (colorInput) { + colorInput.value = _tvColorToHex(swatch.dataset.baseColor || swatch.style.background, '#aeb4c2'); + } + } + }); + + var sliders = panel.querySelectorAll('.tv-settings-slider'); + sliders.forEach(function(slider) { + var out = slider.parentNode && slider.parentNode.querySelector('.tv-settings-slider-value'); + if (out) out.textContent = slider.value + '%'; + }); + + scheduleSettingsPreview(); + } + + var factoryTemplate = _tvBuildCurrentSettings({ + chartId: chartId, + theme: entry && entry.theme, + _chartPrefs: {}, + volumeMap: (entry && entry.volumeMap && entry.volumeMap.main) ? { main: {} } : {}, + seriesMap: {}, + }); + + function cloneSettings(settingsObj) { + try { + return JSON.parse(JSON.stringify(settingsObj || {})); + } catch (e) { + return {}; + } + } + + function getResolvedTemplateId() { + var preferred = _tvLoadSettingsDefaultTemplateId(chartId); + if (preferred === 'custom' && !_tvLoadCustomSettingsTemplate(chartId)) { + _tvSaveSettingsDefaultTemplateId('factory', chartId); + return 'factory'; + } + return preferred; + } + + var templateWrap = document.createElement('div'); + templateWrap.className = 'tv-settings-template-wrap'; + var templateBtn = document.createElement('button'); + templateBtn.className = 'ts-btn-template'; + templateBtn.type = 'button'; + templateBtn.textContent = 'Template'; + templateWrap.appendChild(templateBtn); + + var templateMenu = null; + + function closeTemplateMenu() { + if (templateMenu && templateMenu.parentNode) { + templateMenu.parentNode.removeChild(templateMenu); + } + templateMenu = null; + } + + function updateTemplateDefaultBadges(menuEl) { + if (!menuEl) return; + var activeId = getResolvedTemplateId(); + var defaultItems = menuEl.querySelectorAll('.tv-settings-template-item[data-template-default]'); + defaultItems.forEach(function(item) { + var itemId = item.getAttribute('data-template-default'); + var isActive = itemId === activeId; + item.classList.toggle('active-default', isActive); + var badge = item.querySelector('.tv-settings-template-badge'); + if (badge) badge.style.visibility = isActive ? 'visible' : 'hidden'; + }); + } + + function openTemplateMenu() { + closeTemplateMenu(); + var customTemplate = _tvLoadCustomSettingsTemplate(chartId); + var activeDefaultId = getResolvedTemplateId(); + + var menu = document.createElement('div'); + menu.className = 'tv-settings-template-menu'; + + var applyItem = document.createElement('button'); + applyItem.type = 'button'; + applyItem.className = 'tv-settings-template-item'; + applyItem.textContent = 'Apply default template'; + applyItem.addEventListener('click', function() { + var resolvedDefault = getResolvedTemplateId(); + var chosen = resolvedDefault === 'custom' ? (_tvLoadCustomSettingsTemplate(chartId) || factoryTemplate) : factoryTemplate; + applySettingsToPanel(cloneSettings(chosen)); + _tvNotify('success', 'Template applied.', 'Settings', chartId); + closeTemplateMenu(); + }); + menu.appendChild(applyItem); + + var sep = document.createElement('div'); + sep.className = 'tv-settings-template-sep'; + menu.appendChild(sep); + + function makeDefaultItem(label, templateId, disabled) { + var item = document.createElement('button'); + item.type = 'button'; + item.className = 'tv-settings-template-item'; + item.setAttribute('data-template-default', templateId); + if (disabled) item.disabled = true; + var text = document.createElement('span'); + text.textContent = label; + item.appendChild(text); + var badge = document.createElement('span'); + badge.className = 'tv-settings-template-badge'; + badge.textContent = 'default'; + badge.style.visibility = templateId === activeDefaultId ? 'visible' : 'hidden'; + item.appendChild(badge); + item.addEventListener('click', function() { + _tvSaveSettingsDefaultTemplateId(templateId, chartId); + updateTemplateDefaultBadges(menu); + }); + return item; + } + + menu.appendChild(makeDefaultItem('Use TradingView defaults', 'factory', false)); + menu.appendChild(makeDefaultItem('Use saved custom default', 'custom', !customTemplate)); + + var saveCurrent = document.createElement('button'); + saveCurrent.type = 'button'; + saveCurrent.className = 'tv-settings-template-item'; + saveCurrent.textContent = 'Save current as custom default'; + saveCurrent.addEventListener('click', function() { + var settings = collectSettingsFromPanel(); + _tvSaveCustomSettingsTemplate(cloneSettings(settings), chartId); + _tvSaveSettingsDefaultTemplateId('custom', chartId); + updateTemplateDefaultBadges(menu); + var customDefaultRow = menu.querySelector('[data-template-default="custom"]'); + if (customDefaultRow) customDefaultRow.disabled = false; + _tvNotify('success', 'Saved custom default template.', 'Settings', chartId); + }); + menu.appendChild(saveCurrent); + + var clearCustom = document.createElement('button'); + clearCustom.type = 'button'; + clearCustom.className = 'tv-settings-template-item'; + clearCustom.textContent = 'Clear custom default'; + clearCustom.disabled = !customTemplate; + clearCustom.addEventListener('click', function() { + _tvClearCustomSettingsTemplate(chartId); + if (_tvLoadSettingsDefaultTemplateId(chartId) === 'custom') { + _tvSaveSettingsDefaultTemplateId('factory', chartId); + } + var customDefaultRow = menu.querySelector('[data-template-default="custom"]'); + if (customDefaultRow) customDefaultRow.disabled = true; + clearCustom.disabled = true; + updateTemplateDefaultBadges(menu); + _tvNotify('success', 'Cleared custom default template.', 'Settings', chartId); + }); + menu.appendChild(clearCustom); + + templateMenu = menu; + templateWrap.appendChild(menu); + updateTemplateDefaultBadges(menu); + } + + templateBtn.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + if (templateMenu) { + closeTemplateMenu(); + } else { + openTemplateMenu(); + } + }); + + overlay.addEventListener('mousedown', function(e) { + if (templateMenu && templateWrap && !templateWrap.contains(e.target)) { + closeTemplateMenu(); + } + }); + + footer.appendChild(templateWrap); + + var cancelBtn = document.createElement('button'); + cancelBtn.className = 'ts-btn-cancel'; + cancelBtn.addEventListener('click', function() { + closeTemplateMenu(); + _tvApplySettingsToChart(chartId, entry, originalSettings); + syncLegendPreview(originalSettings); + _tvHideChartSettings(); + }); + cancelBtn.textContent = 'Cancel'; + footer.appendChild(cancelBtn); + + var okBtn = document.createElement('button'); + okBtn.className = 'ts-btn-ok'; + okBtn.addEventListener('click', function() { + if (!entry || !panel) return; + try { + closeTemplateMenu(); + var settings = collectSettingsFromPanel(); + persistSettings(settings); + _tvApplySettingsToChart(chartId, entry, settings); + syncLegendPreview(settings); + + // Sync session mode from chart settings to bottom bar + var sessionSetting = settings['Session'] || 'Extended trading hours'; + var newMode = sessionSetting.indexOf('Regular') >= 0 ? 'RTH' : 'ETH'; + if (entry._sessionMode !== newMode) { + entry._sessionMode = newMode; + var sBtn = document.getElementById('tvchart-session-btn'); + if (sBtn) { + var sLbl = sBtn.querySelector('.tvchart-bottom-btn-label'); + if (sLbl) sLbl.textContent = newMode; + sBtn.classList.toggle('active', newMode === 'RTH'); + } + } + + // Re-apply bottom bar timezone (takes precedence over chart settings' UTC/Local) + if (typeof _tvGetActiveTimezone === 'function' && typeof _tvApplyTimezoneToChart === 'function') { + var activeTz = _tvGetActiveTimezone(); + if (entry._selectedTimezone && entry._selectedTimezone !== 'exchange') { + _tvApplyTimezoneToChart(entry, activeTz); + } + } + + console.log('Chart settings applied:', settings); + } catch(err) { + console.warn('Settings apply error:', err); + } + _tvHideChartSettings(); + }); + okBtn.textContent = 'Ok'; + footer.appendChild(okBtn); + + panel.appendChild(footer); + panel.addEventListener('input', function(e) { + var target = e.target; + if (!target) return; + if (target.tagName === 'INPUT' || target.tagName === 'SELECT') scheduleSettingsPreview(); + }); + panel.addEventListener('change', function(e) { + var target = e.target; + if (!target) return; + if (target.tagName === 'INPUT' || target.tagName === 'SELECT') scheduleSettingsPreview(); + }); + + _tvOverlayContainer(chartId).appendChild(overlay); +} + +// --------------------------------------------------------------------------- +// Normalize a raw symbol item (from search/resolve) into a consistent shape. +// Shared by compare panel and indicator symbol picker. +// --------------------------------------------------------------------------- +function _tvNormalizeSymbolInfo(item) { + if (!item || typeof item !== 'object') return null; + var symbol = String(item.symbol || item.ticker || '').trim(); + if (!symbol) return null; + var ticker = String(item.ticker || '').trim().toUpperCase(); + if (!ticker) { + ticker = symbol.indexOf(':') >= 0 ? symbol.split(':').pop().trim().toUpperCase() : symbol.toUpperCase(); + } + var fullName = String(item.fullName || item.full_name || '').trim(); + var description = String(item.description || '').trim(); + var exchange = String(item.exchange || item.listedExchange || item.listed_exchange || '').trim(); + var symbolType = String(item.type || item.symbolType || item.symbol_type || '').trim(); + var currency = String(item.currency || item.currencyCode || item.currency_code || '').trim(); + return { + symbol: symbol, + ticker: ticker, + displaySymbol: ticker || symbol, + requestSymbol: ticker || symbol, + fullName: fullName, + description: description, + exchange: exchange, + type: symbolType, + currency: currency, + pricescale: item.pricescale, + minmov: item.minmov, + timezone: item.timezone, + session: item.session, + }; +} + diff --git a/pywry/pywry/frontend/src/tvchart/08-settings/05-compare.js b/pywry/pywry/frontend/src/tvchart/08-settings/05-compare.js new file mode 100644 index 0000000..8baec4d --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/08-settings/05-compare.js @@ -0,0 +1,538 @@ +function _tvShowComparePanel(chartId, options) { + options = options || {}; + _tvHideComparePanel(); + var resolved = _tvResolveChartEntry(chartId); + if (!resolved || !resolved.entry) return; + chartId = resolved.chartId; + var entry = resolved.entry; + var ds = window.__PYWRY_DRAWINGS__[chartId] || _tvEnsureDrawingLayer(chartId); + if (!ds) return; + + if (!entry._compareSymbols) entry._compareSymbols = {}; + if (!entry._compareLabels) entry._compareLabels = {}; + + var overlay = document.createElement('div'); + overlay.className = 'tv-settings-overlay'; + _compareOverlay = overlay; + _compareOverlayChartId = chartId; + _tvSetChartInteractionLocked(chartId, true); + _tvRefreshLegendVisibility(); + overlay.addEventListener('click', function(e) { + if (e.target === overlay) _tvHideComparePanel(); + }); + overlay.addEventListener('mousedown', function(e) { e.stopPropagation(); }); + overlay.addEventListener('wheel', function(e) { e.stopPropagation(); }); + + var panel = document.createElement('div'); + panel.className = 'tv-compare-panel'; + overlay.appendChild(panel); + + // Header + var header = document.createElement('div'); + header.className = 'tv-compare-header'; + var title = document.createElement('h3'); + title.textContent = 'Compare symbol'; + header.appendChild(title); + var closeBtn = document.createElement('button'); + closeBtn.className = 'tv-settings-close'; + closeBtn.innerHTML = ''; + closeBtn.addEventListener('click', function() { _tvHideComparePanel(); }); + header.appendChild(closeBtn); + panel.appendChild(header); + + // Search row + var searchRow = document.createElement('div'); + searchRow.className = 'tv-compare-search-row'; + var searchIcon = document.createElement('span'); + searchIcon.className = 'tv-compare-search-icon'; + searchIcon.innerHTML = ''; + searchRow.appendChild(searchIcon); + var searchInput = document.createElement('input'); + searchInput.type = 'text'; + searchInput.className = 'tv-compare-search-input'; + searchInput.placeholder = 'Search'; + searchInput.autocomplete = 'off'; + searchInput.spellcheck = false; + searchRow.appendChild(searchInput); + var addBtn = document.createElement('button'); + addBtn.type = 'button'; + addBtn.className = 'tv-compare-add-btn'; + addBtn.innerHTML = ''; + addBtn.title = 'Add symbol'; + searchRow.appendChild(addBtn); + panel.appendChild(searchRow); + + // Filter row — exchange and type dropdowns from datafeed config + var filterRow = document.createElement('div'); + filterRow.className = 'tv-symbol-search-filters'; + + var exchangeSelect = document.createElement('select'); + exchangeSelect.className = 'tv-symbol-search-filter-select'; + var exchangeDefault = document.createElement('option'); + exchangeDefault.value = ''; + exchangeDefault.textContent = 'All Exchanges'; + exchangeSelect.appendChild(exchangeDefault); + + var typeSelect = document.createElement('select'); + typeSelect.className = 'tv-symbol-search-filter-select'; + var typeDefault = document.createElement('option'); + typeDefault.value = ''; + typeDefault.textContent = 'All Types'; + typeSelect.appendChild(typeDefault); + + var cfg = entry._datafeedConfig || {}; + var exchanges = cfg.exchanges || []; + for (var ei = 0; ei < exchanges.length; ei++) { + if (!exchanges[ei].value) continue; + var opt = document.createElement('option'); + opt.value = exchanges[ei].value; + opt.textContent = exchanges[ei].name || exchanges[ei].value; + exchangeSelect.appendChild(opt); + } + var symTypes = cfg.symbols_types || cfg.symbolsTypes || []; + for (var ti = 0; ti < symTypes.length; ti++) { + if (!symTypes[ti].value) continue; + var topt = document.createElement('option'); + topt.value = symTypes[ti].value; + topt.textContent = symTypes[ti].name || symTypes[ti].value; + typeSelect.appendChild(topt); + } + + filterRow.appendChild(exchangeSelect); + filterRow.appendChild(typeSelect); + panel.appendChild(filterRow); + + exchangeSelect.addEventListener('change', function() { + if ((searchInput.value || '').trim()) requestSearch(searchInput.value); + }); + typeSelect.addEventListener('change', function() { + if ((searchInput.value || '').trim()) requestSearch(searchInput.value); + }); + + var searchResults = []; + var selectedResult = null; + var pendingSearchRequestId = null; + var searchDebounce = null; + var searchResultLimit = Math.max(3, Math.min(20, Number(window.__PYWRY_TVCHART_COMPARE_RESULT_LIMIT__ || 6) || 6)); + + var resultsArea = document.createElement('div'); + resultsArea.className = 'tv-compare-results'; + panel.appendChild(resultsArea); + + function isSearchMode() { + return String(searchInput.value || '').trim().length > 0; + } + + function syncCompareSectionsVisibility() { + var searching = isSearchMode(); + resultsArea.style.display = searching ? '' : 'none'; + listArea.style.display = searching ? 'none' : ''; + } + + function _tvSymbolCaption(info) { + var parts = []; + if (info.exchange) parts.push(info.exchange); + if (info.type) parts.push(info.type); + if (info.currency) parts.push(info.currency); + return parts.join(' · '); + } + + function renderSearchResults() { + resultsArea.innerHTML = ''; + resultsArea.style.overflowY = 'hidden'; + resultsArea.style.maxHeight = (searchResultLimit * 84) + 'px'; + if (!searchResults.length) { + if (isSearchMode()) { + var emptySearch = document.createElement('div'); + emptySearch.className = 'tv-compare-search-empty'; + emptySearch.textContent = 'No symbols found'; + resultsArea.appendChild(emptySearch); + } + syncCompareSectionsVisibility(); + return; + } + var list = document.createElement('div'); + list.className = 'tv-compare-results-list'; + for (var i = 0; i < Math.min(searchResults.length, searchResultLimit); i++) { + (function(info) { + var row = document.createElement('div'); + row.className = 'tv-compare-result-row'; + + var identity = document.createElement('div'); + identity.className = 'tv-compare-result-identity'; + + var badge = document.createElement('div'); + badge.className = 'tv-compare-result-badge'; + badge.textContent = (info.symbol || '?').slice(0, 1); + identity.appendChild(badge); + + var copy = document.createElement('div'); + copy.className = 'tv-compare-result-copy'; + + var top = document.createElement('div'); + top.className = 'tv-compare-result-top'; + + var symbol = document.createElement('span'); + symbol.className = 'tv-compare-result-symbol'; + symbol.textContent = info.displaySymbol || info.symbol; + top.appendChild(symbol); + + var caption = _tvSymbolCaption(info); + if (caption) { + var meta = document.createElement('span'); + meta.className = 'tv-compare-result-meta'; + meta.textContent = caption; + top.appendChild(meta); + } + + copy.appendChild(top); + + var detail = info.fullName || info.description; + if (detail) { + var sub = document.createElement('div'); + sub.className = 'tv-compare-result-sub'; + sub.textContent = detail; + copy.appendChild(sub); + } + + identity.appendChild(copy); + row.appendChild(identity); + + var actions = document.createElement('div'); + actions.className = 'tv-compare-result-actions'; + + function makeAction(label, mode, primary) { + var btn = document.createElement('button'); + btn.type = 'button'; + btn.className = primary + ? 'tv-compare-result-action tv-compare-result-action-primary' + : 'tv-compare-result-action'; + btn.textContent = label; + btn.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + selectedResult = info; + searchInput.value = info.symbol; + addCompare(info, mode); + }); + return btn; + } + + actions.appendChild(makeAction('Same % scale', 'same_percent', true)); + actions.appendChild(makeAction('New price scale', 'new_price_scale', false)); + actions.appendChild(makeAction('New pane', 'new_pane', false)); + row.appendChild(actions); + + row.addEventListener('click', function() { + selectedResult = info; + searchInput.value = info.symbol; + addCompare(info, 'same_percent'); + }); + + list.appendChild(row); + })(searchResults[i]); + } + resultsArea.appendChild(list); + syncCompareSectionsVisibility(); + } + + function requestSearch(query) { + query = String(query || '').trim(); + var normalizedQuery = query.toUpperCase(); + if (normalizedQuery.indexOf(':') >= 0) { + normalizedQuery = normalizedQuery.split(':').pop().trim(); + } + searchResults = []; + selectedResult = null; + renderSearchResults(); + if (!normalizedQuery || normalizedQuery.length < 1) return; + + var exch = exchangeSelect.value || ''; + var stype = typeSelect.value || ''; + + pendingSearchRequestId = _tvRequestDatafeedSearch(chartId, normalizedQuery, searchResultLimit, function(resp) { + if (!resp || resp.requestId !== pendingSearchRequestId) return; + pendingSearchRequestId = null; + if (resp.error) { + searchResults = []; + renderSearchResults(); + return; + } + var items = Array.isArray(resp.items) ? resp.items : []; + var normalized = []; + for (var idx = 0; idx < items.length; idx++) { + var parsed = _tvNormalizeSymbolInfo(items[idx]); + if (parsed) normalized.push(parsed); + } + searchResults = normalized; + renderSearchResults(); + }, exch, stype); + } + + // Symbols list area + var listArea = document.createElement('div'); + listArea.className = 'tv-compare-list'; + + function renderSymbolList() { + listArea.innerHTML = ''; + var compareKeys = Object.keys(entry._compareSymbols || {}).filter(function(sid) { + return !(entry._indicatorSourceSeries && entry._indicatorSourceSeries[sid]); + }); + if (compareKeys.length === 0) { + var empty = document.createElement('div'); + empty.className = 'tv-compare-empty'; + var emptyIcon = document.createElement('div'); + emptyIcon.className = 'tv-compare-empty-icon'; + emptyIcon.innerHTML = ''; + empty.appendChild(emptyIcon); + var emptyText = document.createElement('div'); + emptyText.className = 'tv-compare-empty-text'; + emptyText.textContent = 'No symbols here yet \u2014 why not add some?'; + empty.appendChild(emptyText); + listArea.appendChild(empty); + } else { + compareKeys.forEach(function(seriesId) { + var symbolName = entry._compareLabels[seriesId] || _tvDisplayLabelFromSymbolInfo( + entry._compareSymbolInfo && entry._compareSymbolInfo[seriesId] ? entry._compareSymbolInfo[seriesId] : null, + entry._compareSymbols[seriesId] || seriesId + ); + var row = document.createElement('div'); + row.className = 'tv-compare-symbol-row'; + + var dot = document.createElement('span'); + dot.className = 'tv-compare-symbol-dot'; + row.appendChild(dot); + + var lbl = document.createElement('span'); + lbl.className = 'tv-compare-symbol-label'; + lbl.textContent = symbolName; + row.appendChild(lbl); + + var rmBtn = document.createElement('button'); + rmBtn.type = 'button'; + rmBtn.className = 'tv-compare-symbol-remove'; + rmBtn.innerHTML = ''; + rmBtn.title = 'Remove'; + rmBtn.addEventListener('click', function() { + if (window.pywry) { + window.pywry.emit('tvchart:remove-series', { chartId: chartId, seriesId: seriesId }); + } + delete entry._compareSymbols[seriesId]; + if (entry._compareLabels && entry._compareLabels[seriesId]) { + delete entry._compareLabels[seriesId]; + } + renderSymbolList(); + }); + row.appendChild(rmBtn); + listArea.appendChild(row); + }); + } + syncCompareSectionsVisibility(); + } + + renderSymbolList(); + panel.appendChild(listArea); + + // Footer: Allow extend time scale + var footer = document.createElement('div'); + footer.className = 'tv-compare-footer'; + var extendLabel = document.createElement('label'); + extendLabel.className = 'tv-compare-extend-label'; + var extendCheck = document.createElement('input'); + extendCheck.type = 'checkbox'; + extendCheck.className = 'tv-compare-extend-check'; + extendCheck.checked = !!(entry._chartPrefs && entry._chartPrefs.compareExtendTimeScale); + extendCheck.addEventListener('change', function() { + if (!entry._chartPrefs) entry._chartPrefs = {}; + entry._chartPrefs.compareExtendTimeScale = extendCheck.checked; + }); + extendLabel.appendChild(extendCheck); + var extendText = document.createElement('span'); + extendText.textContent = 'Allow extend time scale'; + extendLabel.appendChild(extendText); + footer.appendChild(extendLabel); + panel.appendChild(footer); + + function addCompare(selectedInfo, compareMode) { + var symbol = (searchInput.value || '').trim().toUpperCase(); + if (selectedInfo && selectedInfo.requestSymbol) symbol = String(selectedInfo.requestSymbol).trim().toUpperCase(); + if (!symbol || !window.pywry) return; + compareMode = compareMode || 'same_percent'; + + function emitCompareRequest(symbolInfo) { + var existingId = null; + var syms = entry._compareSymbols || {}; + var symKeys = Object.keys(syms); + for (var i = 0; i < symKeys.length; i++) { + if (syms[symKeys[i]] === symbol) { existingId = symKeys[i]; break; } + } + var seriesId = existingId || ('compare-' + symbol.toLowerCase().replace(/[^a-z0-9]/g, '_')); + entry._compareSymbols[seriesId] = symbol; + if (!entry._compareSymbolInfo) entry._compareSymbolInfo = {}; + if (symbolInfo || selectedInfo) { + entry._compareSymbolInfo[seriesId] = symbolInfo || selectedInfo; + } + if (!entry._compareLabels) entry._compareLabels = {}; + entry._compareLabels[seriesId] = _tvDisplayLabelFromSymbolInfo(symbolInfo || selectedInfo || null, symbol); + if (!entry._pendingCompareModes) entry._pendingCompareModes = {}; + entry._pendingCompareModes[seriesId] = compareMode; + var activeInterval = _tvCurrentInterval(chartId); + var comparePeriodParams = _tvBuildPeriodParams(entry, seriesId); + comparePeriodParams.firstDataRequest = _tvMarkFirstDataRequest(entry, seriesId); + window.pywry.emit('tvchart:data-request', { + chartId: chartId, + symbol: symbol, + seriesId: seriesId, + compareMode: compareMode, + symbolInfo: symbolInfo || selectedInfo || null, + interval: activeInterval, + resolution: activeInterval, + periodParams: comparePeriodParams, + }); + searchInput.value = ''; + searchResults = []; + selectedResult = null; + renderSearchResults(); + renderSymbolList(); + } + + if (selectedInfo) { + emitCompareRequest(selectedInfo); + return; + } + + _tvRequestDatafeedResolve(chartId, symbol, function(resp) { + var resolved = null; + if (resp && resp.symbolInfo) { + resolved = _tvNormalizeSymbolInfo(resp.symbolInfo); + } + emitCompareRequest(resolved); + }); + } + + addBtn.addEventListener('click', function() { + addCompare(selectedResult, 'same_percent'); + }); + + searchInput.addEventListener('input', function() { + var raw = searchInput.value || ''; + if (searchDebounce) clearTimeout(searchDebounce); + searchDebounce = setTimeout(function() { + requestSearch(raw); + }, 180); + }); + + searchInput.addEventListener('keydown', function(e) { + e.stopPropagation(); + if (e.key === 'Escape') { + _tvHideComparePanel(); + return; + } + if (e.key === 'Enter' && (searchInput.value || '').trim()) { + addCompare(selectedResult, 'same_percent'); + } + }); + + // Attach compare action to Enter key (already done above) + // Make the search bar trigger add on blur if non-empty? No - wait for Enter. + + syncCompareSectionsVisibility(); + + ds.uiLayer.appendChild(overlay); + searchInput.focus(); + + // Programmatic drive: pre-fill the search and auto-add the first + // matching ticker. Driven by ``tvchart:compare`` callers that pass + // ``{query, autoAdd, symbolType, exchange}`` (e.g. the MCP + // tvchart_compare tool). ``symbolType`` / ``exchange`` narrow the + // datafeed search before it runs — e.g. ``{query: "SPY", symbolType: + // "etf"}`` skips over SPYM. Mirrors the symbol-search auto-select + // flow so the compare shows up in entry._compareSymbols before the + // caller polls chart state. + if (options.query) { + var cmpQuery = String(options.query).trim(); + if (cmpQuery) { + searchInput.value = cmpQuery; + var autoAdd = options.autoAdd !== false; + if (options.symbolType) { + var wantCmpType = String(options.symbolType).toLowerCase(); + for (var ctsi = 0; ctsi < typeSelect.options.length; ctsi++) { + if (String(typeSelect.options[ctsi].value).toLowerCase() === wantCmpType) { + typeSelect.selectedIndex = ctsi; + break; + } + } + } + if (options.exchange) { + var wantCmpExch = String(options.exchange).toLowerCase(); + for (var cesi = 0; cesi < exchangeSelect.options.length; cesi++) { + if (String(exchangeSelect.options[cesi].value).toLowerCase() === wantCmpExch) { + exchangeSelect.selectedIndex = cesi; + break; + } + } + } + var prevRenderCmp = renderSearchResults; + var addedOnce = false; + var targetTicker = cmpQuery.toUpperCase(); + if (targetTicker.indexOf(':') >= 0) { + targetTicker = targetTicker.split(':').pop().trim(); + } + // Pull the bare ticker from a symbol record — datafeed results + // may carry a fully-qualified ``EXCHANGE:TICKER`` in ``ticker`` + // and the bare ticker in ``symbol`` / ``requestSymbol``. Exact- + // match needs to beat prefix-match (otherwise ``SPY`` finds + // ``SPYM`` first just because ``SPYM`` sorted earlier). + function _bareTicker(rec) { + if (!rec) return ''; + var candidates = [rec.symbol, rec.requestSymbol, rec.ticker]; + for (var ci = 0; ci < candidates.length; ci++) { + var raw = String(candidates[ci] || '').toUpperCase(); + if (!raw) continue; + if (raw.indexOf(':') >= 0) raw = raw.split(':').pop().trim(); + if (raw) return raw; + } + return ''; + } + renderSearchResults = function() { + prevRenderCmp(); + if (addedOnce || !autoAdd || !searchResults.length) return; + var pick = null; + for (var pi = 0; pi < searchResults.length; pi++) { + if (_bareTicker(searchResults[pi]) === targetTicker) { + pick = searchResults[pi]; + break; + } + } + // No exact match → prefer results whose bare ticker + // *starts with* the query, then fall back to the first + // result. Prevents ``SPY`` → ``SPYM`` just because the + // datafeed returned them in alphabetical order. + if (!pick) { + for (var pj = 0; pj < searchResults.length; pj++) { + if (_bareTicker(searchResults[pj]).indexOf(targetTicker) === 0) { + pick = searchResults[pj]; + break; + } + } + } + if (!pick) pick = searchResults[0]; + addedOnce = true; + addCompare(pick, 'same_percent'); + // Auto-close the panel after a programmatic add so the + // MCP caller's confirmation flow doesn't leave an empty + // search dialog sitting on top of the chart. + setTimeout(function() { _tvHideComparePanel(); }, 0); + }; + requestSearch(cmpQuery); + } + } +} + +// --------------------------------------------------------------------------- +// Indicator Symbol Picker – shown when a binary indicator (Spread, Ratio, +// Product, Sum, Correlation) is added but no secondary series exists yet. +// --------------------------------------------------------------------------- +var _indicatorPickerOverlay = null; +var _indicatorPickerChartId = null; + diff --git a/pywry/pywry/frontend/src/tvchart/08-settings/06-indicator-symbol-picker.js b/pywry/pywry/frontend/src/tvchart/08-settings/06-indicator-symbol-picker.js new file mode 100644 index 0000000..839880f --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/08-settings/06-indicator-symbol-picker.js @@ -0,0 +1,291 @@ +function _tvHideIndicatorSymbolPicker() { + if (_indicatorPickerOverlay && _indicatorPickerOverlay.parentNode) { + _indicatorPickerOverlay.parentNode.removeChild(_indicatorPickerOverlay); + } + if (_indicatorPickerChartId) _tvSetChartInteractionLocked(_indicatorPickerChartId, false); + _indicatorPickerOverlay = null; + _indicatorPickerChartId = null; + _tvRefreshLegendVisibility(); +} + +function _tvShowIndicatorSymbolPicker(chartId, indicatorDef) { + _tvHideIndicatorSymbolPicker(); + var resolved = _tvResolveChartEntry(chartId); + if (!resolved || !resolved.entry) return; + chartId = resolved.chartId; + var entry = resolved.entry; + var ds = window.__PYWRY_DRAWINGS__[chartId] || _tvEnsureDrawingLayer(chartId); + if (!ds) return; + + var overlay = document.createElement('div'); + overlay.className = 'tv-settings-overlay'; + _indicatorPickerOverlay = overlay; + _indicatorPickerChartId = chartId; + _tvSetChartInteractionLocked(chartId, true); + _tvRefreshLegendVisibility(); + overlay.addEventListener('click', function(e) { + if (e.target === overlay) _tvHideIndicatorSymbolPicker(); + }); + overlay.addEventListener('mousedown', function(e) { e.stopPropagation(); }); + overlay.addEventListener('wheel', function(e) { e.stopPropagation(); }); + + var panel = document.createElement('div'); + panel.className = 'tv-symbol-search-panel'; + overlay.appendChild(panel); + + // Header + var header = document.createElement('div'); + header.className = 'tv-compare-header'; + var title = document.createElement('h3'); + title.textContent = 'Add Symbol \u2014 ' + (indicatorDef.fullName || indicatorDef.name); + header.appendChild(title); + var closeBtn = document.createElement('button'); + closeBtn.className = 'tv-settings-close'; + closeBtn.innerHTML = ''; + closeBtn.addEventListener('click', function() { _tvHideIndicatorSymbolPicker(); }); + header.appendChild(closeBtn); + panel.appendChild(header); + + // Search row + var searchRow = document.createElement('div'); + searchRow.className = 'tv-compare-search-row'; + var searchIcon = document.createElement('span'); + searchIcon.className = 'tv-compare-search-icon'; + searchIcon.innerHTML = ''; + searchRow.appendChild(searchIcon); + var searchInput = document.createElement('input'); + searchInput.type = 'text'; + searchInput.className = 'tv-compare-search-input'; + searchInput.placeholder = 'Search symbol...'; + searchInput.autocomplete = 'off'; + searchInput.spellcheck = false; + searchRow.appendChild(searchInput); + panel.appendChild(searchRow); + + // Filter row — exchange and type dropdowns from datafeed config + var filterRow = document.createElement('div'); + filterRow.className = 'tv-symbol-search-filters'; + + var exchangeSelect = document.createElement('select'); + exchangeSelect.className = 'tv-symbol-search-filter-select'; + var exchangeDefault = document.createElement('option'); + exchangeDefault.value = ''; + exchangeDefault.textContent = 'All Exchanges'; + exchangeSelect.appendChild(exchangeDefault); + + var typeSelect = document.createElement('select'); + typeSelect.className = 'tv-symbol-search-filter-select'; + var typeDefault = document.createElement('option'); + typeDefault.value = ''; + typeDefault.textContent = 'All Types'; + typeSelect.appendChild(typeDefault); + + var cfg = entry._datafeedConfig || {}; + var exchanges = cfg.exchanges || []; + for (var ei = 0; ei < exchanges.length; ei++) { + if (!exchanges[ei].value) continue; + var opt = document.createElement('option'); + opt.value = exchanges[ei].value; + opt.textContent = exchanges[ei].name || exchanges[ei].value; + exchangeSelect.appendChild(opt); + } + var symTypes = cfg.symbols_types || cfg.symbolsTypes || []; + for (var ti = 0; ti < symTypes.length; ti++) { + if (!symTypes[ti].value) continue; + var topt = document.createElement('option'); + topt.value = symTypes[ti].value; + topt.textContent = symTypes[ti].name || symTypes[ti].value; + typeSelect.appendChild(topt); + } + + filterRow.appendChild(exchangeSelect); + filterRow.appendChild(typeSelect); + panel.appendChild(filterRow); + + exchangeSelect.addEventListener('change', function() { + if ((searchInput.value || '').trim()) requestSearch(searchInput.value); + }); + typeSelect.addEventListener('change', function() { + if ((searchInput.value || '').trim()) requestSearch(searchInput.value); + }); + + var searchResults = []; + var pendingSearchRequestId = null; + var searchDebounce = null; + var maxResults = 50; + + var resultsArea = document.createElement('div'); + resultsArea.className = 'tv-symbol-search-results'; + panel.appendChild(resultsArea); + + function renderSearchResults() { + resultsArea.innerHTML = ''; + if (!searchResults.length) { + if ((searchInput.value || '').trim().length > 0) { + var emptyMsg = document.createElement('div'); + emptyMsg.className = 'tv-compare-search-empty'; + emptyMsg.textContent = 'No symbols found'; + resultsArea.appendChild(emptyMsg); + } + return; + } + var list = document.createElement('div'); + list.className = 'tv-compare-results-list'; + for (var i = 0; i < searchResults.length; i++) { + (function(info) { + var row = document.createElement('div'); + row.className = 'tv-compare-result-row tv-symbol-search-result-row'; + row.style.cursor = 'pointer'; + + var identity = document.createElement('div'); + identity.className = 'tv-compare-result-identity'; + + var badge = document.createElement('div'); + badge.className = 'tv-compare-result-badge'; + badge.textContent = (info.symbol || '?').slice(0, 1); + identity.appendChild(badge); + + var copy = document.createElement('div'); + copy.className = 'tv-compare-result-copy'; + var top = document.createElement('div'); + top.className = 'tv-compare-result-top'; + var symbol = document.createElement('span'); + symbol.className = 'tv-compare-result-symbol'; + symbol.textContent = info.displaySymbol || info.symbol; + top.appendChild(symbol); + + // Right-side meta: exchange · type + var parts = []; + if (info.exchange) parts.push(info.exchange); + if (info.type) parts.push(info.type); + if (parts.length) { + var meta = document.createElement('span'); + meta.className = 'tv-compare-result-meta'; + meta.textContent = parts.join(' \u00b7 '); + top.appendChild(meta); + } + copy.appendChild(top); + + // Subtitle: actual security name + var nameText = info.fullName || info.description; + if (nameText) { + var sub = document.createElement('div'); + sub.className = 'tv-compare-result-sub'; + sub.textContent = nameText; + copy.appendChild(sub); + } + identity.appendChild(copy); + row.appendChild(identity); + + row.addEventListener('click', function() { + pickSymbol(info); + }); + list.appendChild(row); + })(searchResults[i]); + } + resultsArea.appendChild(list); + } + + function requestSearch(query) { + query = String(query || '').trim(); + var normalizedQuery = query.toUpperCase(); + if (normalizedQuery.indexOf(':') >= 0) { + normalizedQuery = normalizedQuery.split(':').pop().trim(); + } + searchResults = []; + renderSearchResults(); + if (!normalizedQuery || normalizedQuery.length < 1) return; + + var exch = exchangeSelect.value || ''; + var stype = typeSelect.value || ''; + + pendingSearchRequestId = _tvRequestDatafeedSearch(chartId, normalizedQuery, maxResults, function(resp) { + if (!resp || resp.requestId !== pendingSearchRequestId) return; + pendingSearchRequestId = null; + if (resp.error) { searchResults = []; renderSearchResults(); return; } + var items = Array.isArray(resp.items) ? resp.items : []; + var normalized = []; + for (var idx = 0; idx < items.length; idx++) { + var parsed = _tvNormalizeSymbolInfo(items[idx]); + if (parsed) normalized.push(parsed); + } + searchResults = normalized; + renderSearchResults(); + }, exch, stype); + } + + function pickSymbol(selectedInfo) { + var sym = selectedInfo && selectedInfo.requestSymbol + ? String(selectedInfo.requestSymbol).trim().toUpperCase() + : (searchInput.value || '').trim().toUpperCase(); + if (!sym || !window.pywry) return; + + // Store the pending binary indicator so the data-response handler + // can trigger _tvAddIndicator once the secondary data arrives. + entry._pendingBinaryIndicator = indicatorDef; + + var seriesId = 'compare-' + sym.toLowerCase().replace(/[^a-z0-9]/g, '_'); + + // Track that this compare series is an indicator source (not user-visible compare) + if (!entry._indicatorSourceSeries) entry._indicatorSourceSeries = {}; + entry._indicatorSourceSeries[seriesId] = true; + + if (!entry._compareSymbols) entry._compareSymbols = {}; + entry._compareSymbols[seriesId] = sym; + if (!entry._compareSymbolInfo) entry._compareSymbolInfo = {}; + if (selectedInfo) entry._compareSymbolInfo[seriesId] = selectedInfo; + if (!entry._compareLabels) entry._compareLabels = {}; + entry._compareLabels[seriesId] = _tvDisplayLabelFromSymbolInfo(selectedInfo || null, sym); + if (!entry._pendingCompareModes) entry._pendingCompareModes = {}; + entry._pendingCompareModes[seriesId] = 'new_price_scale'; + + var activeInterval = _tvCurrentInterval(chartId); + var comparePeriodParams = _tvBuildPeriodParams(entry, seriesId); + comparePeriodParams.firstDataRequest = _tvMarkFirstDataRequest(entry, seriesId); + + window.pywry.emit('tvchart:data-request', { + chartId: chartId, + symbol: sym, + seriesId: seriesId, + compareMode: 'new_price_scale', + symbolInfo: selectedInfo || null, + interval: activeInterval, + resolution: activeInterval, + periodParams: comparePeriodParams, + _forIndicator: true, + }); + + _tvHideIndicatorSymbolPicker(); + } + + searchInput.addEventListener('input', function() { + var raw = searchInput.value || ''; + if (searchDebounce) clearTimeout(searchDebounce); + searchDebounce = setTimeout(function() { requestSearch(raw); }, 180); + }); + + searchInput.addEventListener('keydown', function(e) { + e.stopPropagation(); + if (e.key === 'Escape') { + _tvHideIndicatorSymbolPicker(); + return; + } + if (e.key === 'Enter' && (searchInput.value || '').trim()) { + if (searchResults.length > 0) { + pickSymbol(searchResults[0]); + } else { + // Resolve the typed symbol directly + var sym = (searchInput.value || '').trim().toUpperCase(); + _tvRequestDatafeedResolve(chartId, sym, function(resp) { + var resolved = null; + if (resp && resp.symbolInfo) resolved = _tvNormalizeSymbolInfo(resp.symbolInfo); + pickSymbol(resolved || { symbol: sym, ticker: sym, displaySymbol: sym, requestSymbol: sym }); + }); + } + } + }); + + ds.uiLayer.appendChild(overlay); + searchInput.focus(); +} + diff --git a/pywry/pywry/frontend/src/tvchart/08-settings/07-drawing-settings.js b/pywry/pywry/frontend/src/tvchart/08-settings/07-drawing-settings.js new file mode 100644 index 0000000..c4b583e --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/08-settings/07-drawing-settings.js @@ -0,0 +1,1715 @@ +function _tvShowDrawingSettings(chartId, drawIdx) { + _tvHideDrawingSettings(); + var ds = window.__PYWRY_DRAWINGS__[chartId]; + if (!ds || drawIdx < 0 || drawIdx >= ds.drawings.length) return; + var d = ds.drawings[drawIdx]; + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry) return; + + // Clone properties for cancel support + var draft = Object.assign({}, d); + + var overlay = document.createElement('div'); + overlay.className = 'tv-settings-overlay'; + _settingsOverlay = overlay; + _settingsOverlayChartId = chartId; + _tvSetChartInteractionLocked(chartId, true); + overlay.addEventListener('click', function(e) { + if (e.target === overlay) _tvHideDrawingSettings(); + }); + overlay.addEventListener('mousedown', function(e) { e.stopPropagation(); }); + overlay.addEventListener('wheel', function(e) { e.stopPropagation(); }); + + var panel = document.createElement('div'); + panel.className = 'tv-settings-panel'; + panel.style.flexDirection = 'column'; + panel.style.width = '560px'; + overlay.appendChild(panel); + + // Header + var header = document.createElement('div'); + header.className = 'tv-settings-header'; + header.style.cssText = 'position:relative;flex-direction:column;align-items:stretch;padding-bottom:0;'; + var hdrRow = document.createElement('div'); + hdrRow.style.cssText = 'display:flex;align-items:center;gap:8px;'; + var title = document.createElement('h3'); + title.textContent = _DRAW_TYPE_NAMES[d.type] || d.type; + hdrRow.appendChild(title); + var closeBtn = document.createElement('button'); + closeBtn.className = 'tv-settings-close'; + closeBtn.innerHTML = ''; + closeBtn.addEventListener('click', function() { _tvHideDrawingSettings(); }); + hdrRow.appendChild(closeBtn); + header.appendChild(hdrRow); + + // Tabs — Text tab for text drawing type and line tools + // Build tab list per drawing type (matching TradingView layout) + var tabs = []; + var _inputsTools = ['regression_channel', 'fibonacci', 'trendline', + 'fib_extension', 'fib_channel', 'fib_timezone', 'fib_fan', + 'fib_arc', 'fib_circle', 'fib_wedge', 'pitchfan', + 'fib_time', 'gann_box', 'gann_square_fixed', 'gann_square', 'gann_fan', + 'long_position', 'short_position', 'forecast']; + if (_inputsTools.indexOf(d.type) !== -1) tabs.push('Inputs'); + tabs.push('Style'); + var _textTabTools = ['text', 'trendline', 'ray', 'extended_line', 'arrow_marker', 'arrow', 'arrow_mark_up', 'arrow_mark_down', 'arrow_mark_left', 'arrow_mark_right', 'anchored_text', 'note', 'price_note', 'pin', 'callout', 'comment', 'price_label', 'signpost', 'flag_mark']; + if (_textTabTools.indexOf(d.type) !== -1) tabs.push('Text'); + tabs.push('Coordinates', 'Visibility'); + var activeTab = tabs[0]; + + var tabBar = document.createElement('div'); + tabBar.className = 'tv-settings-tabs'; + header.appendChild(tabBar); + panel.appendChild(header); + + var body = document.createElement('div'); + body.className = 'tv-settings-body'; + body.style.cssText = 'flex:1;overflow-y:auto;'; + panel.appendChild(body); + + function renderTabs() { + tabBar.innerHTML = ''; + for (var ti = 0; ti < tabs.length; ti++) { + (function(tname) { + var tab = document.createElement('div'); + tab.className = 'tv-settings-tab' + (tname === activeTab ? ' active' : ''); + tab.textContent = tname; + tab.addEventListener('click', function() { + activeTab = tname; + renderTabs(); + renderBody(); + }); + tabBar.appendChild(tab); + })(tabs[ti]); + } + } + + function makeRow(labelText) { + var row = document.createElement('div'); + row.className = 'tv-settings-row'; + var lbl = document.createElement('label'); + lbl.textContent = labelText; + row.appendChild(lbl); + var ctrl = document.createElement('div'); + ctrl.className = 'ts-controls'; + row.appendChild(ctrl); + return { row: row, ctrl: ctrl }; + } + + function makeColorSwatch(color, onChange) { + var sw = document.createElement('div'); + sw.className = 'ts-swatch'; + sw.dataset.baseColor = _tvColorToHex(color || '#aeb4c2', '#aeb4c2'); + sw.dataset.opacity = String(_tvColorOpacityPercent(color, 100)); + sw.style.background = color; + sw.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + _tvShowColorOpacityPopup( + sw, + sw.dataset.baseColor || color, + _tvToNumber(sw.dataset.opacity, 100), + overlay, + function(newColor, newOpacity) { + sw.dataset.baseColor = newColor; + sw.dataset.opacity = String(newOpacity); + sw.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); + color = newColor; + onChange(_tvColorWithOpacity(newColor, newOpacity, newColor), newOpacity); + } + ); + }); + return sw; + } + + function makeSelect(options, current, onChange) { + var sel = document.createElement('select'); + sel.className = 'ts-select'; + for (var si = 0; si < options.length; si++) { + var opt = document.createElement('option'); + opt.value = options[si].value !== undefined ? options[si].value : options[si]; + opt.textContent = options[si].label || options[si]; + if (String(opt.value) === String(current)) opt.selected = true; + sel.appendChild(opt); + } + sel.addEventListener('change', function() { onChange(sel.value); }); + return sel; + } + + function makeCheckbox(checked, onChange) { + var cb = document.createElement('input'); + cb.type = 'checkbox'; + cb.className = 'ts-checkbox'; + cb.checked = !!checked; + cb.addEventListener('change', function() { onChange(cb.checked); }); + return cb; + } + + function makeTextInput(val, onChange) { + var inp = document.createElement('input'); + inp.type = 'text'; + inp.className = 'ts-input ts-input-full'; + inp.value = val || ''; + inp.addEventListener('input', function() { onChange(inp.value); }); + inp.addEventListener('keydown', function(e) { e.stopPropagation(); }); + return inp; + } + + function makeNumberInput(val, onChange) { + var inp = document.createElement('input'); + inp.type = 'number'; + inp.className = 'ts-input'; + inp.value = val; + inp.step = 'any'; + inp.addEventListener('input', function() { onChange(parseFloat(inp.value)); }); + inp.addEventListener('keydown', function(e) { e.stopPropagation(); }); + return inp; + } + + function makeOpacityInput(val, onChange) { + var wrap = document.createElement('div'); + wrap.style.cssText = 'display:flex;align-items:center;gap:6px;'; + var slider = document.createElement('input'); + slider.type = 'range'; + slider.className = 'tv-settings-slider'; + slider.min = '0'; slider.max = '100'; + slider.value = String(Math.round((val !== undefined ? val : 0.15) * 100)); + var numBox = document.createElement('input'); + numBox.type = 'number'; + numBox.className = 'ts-input ts-input-sm'; + numBox.min = '0'; numBox.max = '100'; + numBox.value = slider.value; + numBox.addEventListener('keydown', function(e) { e.stopPropagation(); }); + slider.addEventListener('input', function() { + numBox.value = slider.value; + onChange(parseInt(slider.value) / 100); + }); + numBox.addEventListener('input', function() { + slider.value = numBox.value; + onChange(parseInt(numBox.value) / 100); + }); + var pct = document.createElement('span'); + pct.className = 'tv-settings-unit'; + pct.textContent = '%'; + wrap.appendChild(slider); wrap.appendChild(numBox); wrap.appendChild(pct); + return wrap; + } + + function addSectionHeading(text) { + var sec = document.createElement('div'); + sec.className = 'tv-settings-section'; + sec.textContent = text; + body.appendChild(sec); + } + + // Shared: Line row with color swatch + style toggle buttons + function addLineRow(container) { + var cRow = makeRow('Line'); + var lineSwatch = makeColorSwatch(draft.color || _drawDefaults.color, function(c) { draft.color = c; }); + cRow.ctrl.appendChild(lineSwatch); + var styleGroup = document.createElement('div'); + styleGroup.className = 'ts-line-style-group'; + var styleOpts = [ + { val: 0, svg: '' }, + { val: 1, svg: '' }, + { val: 2, svg: '' }, + ]; + var styleBtns = []; + styleOpts.forEach(function(so) { + var btn = document.createElement('button'); + btn.className = 'ts-line-style-btn' + (parseInt(draft.lineStyle || 0) === so.val ? ' active' : ''); + btn.innerHTML = so.svg; + btn.addEventListener('click', function() { + draft.lineStyle = so.val; + styleBtns.forEach(function(b) { b.classList.remove('active'); }); + btn.classList.add('active'); + }); + styleBtns.push(btn); + styleGroup.appendChild(btn); + }); + cRow.ctrl.appendChild(styleGroup); + container.appendChild(cRow.row); + } + + // Shared: Width row + function addWidthRow(container) { + var wRow = makeRow('Width'); + wRow.ctrl.appendChild(makeSelect([{value:1,label:'1px'},{value:2,label:'2px'},{value:3,label:'3px'},{value:4,label:'4px'},{value:5,label:'5px'}], draft.lineWidth || 2, function(v) { draft.lineWidth = parseInt(v); })); + container.appendChild(wRow.row); + } + + // Shared: TV-style compound line control (checkbox + color + line-style buttons) + // opts: { label, showKey, colorKey, styleKey, widthKey, defaultColor, defaultStyle, defaultShow } + function addCompoundLineRow(container, opts) { + var row = makeRow(opts.label); + // Checkbox + row.ctrl.appendChild(makeCheckbox(draft[opts.showKey] !== false, function(v) { draft[opts.showKey] = v; })); + // Color swatch + row.ctrl.appendChild(makeColorSwatch(draft[opts.colorKey] || opts.defaultColor || draft.color || _drawDefaults.color, function(c) { draft[opts.colorKey] = c; })); + // Line style selector + var styleGroup = document.createElement('div'); + styleGroup.className = 'ts-line-style-group'; + var styleOpts = [ + { val: 0, svg: '' }, + { val: 1, svg: '' }, + { val: 2, svg: '' }, + ]; + var curStyle = draft[opts.styleKey] !== undefined ? draft[opts.styleKey] : (opts.defaultStyle || 0); + var styleBtns = []; + styleOpts.forEach(function(so) { + var btn = document.createElement('button'); + btn.className = 'ts-line-style-btn' + (parseInt(curStyle) === so.val ? ' active' : ''); + btn.innerHTML = so.svg; + btn.addEventListener('click', function() { + draft[opts.styleKey] = so.val; + styleBtns.forEach(function(b) { b.classList.remove('active'); }); + btn.classList.add('active'); + }); + styleBtns.push(btn); + styleGroup.appendChild(btn); + }); + row.ctrl.appendChild(styleGroup); + container.appendChild(row.row); + } + + // Shared: TV-style visibility time interval section + function addVisibilityIntervals(container) { + var intervals = [ + { key: 'seconds', label: 'Seconds', defFrom: 1, defTo: 59 }, + { key: 'minutes', label: 'Minutes', defFrom: 1, defTo: 59 }, + { key: 'hours', label: 'Hours', defFrom: 1, defTo: 24 }, + { key: 'days', label: 'Days', defFrom: 1, defTo: 365 }, + { key: 'weeks', label: 'Weeks', defFrom: 1, defTo: 52 }, + { key: 'months', label: 'Months', defFrom: 1, defTo: 12 }, + ]; + if (!draft.visibility) draft.visibility = {}; + for (var vi = 0; vi < intervals.length; vi++) { + (function(itv) { + if (!draft.visibility[itv.key]) { + draft.visibility[itv.key] = { enabled: true, from: itv.defFrom, to: itv.defTo }; + } + var vis = draft.visibility[itv.key]; + var row = makeRow(itv.label); + // Checkbox + row.ctrl.appendChild(makeCheckbox(vis.enabled !== false, function(v) { vis.enabled = v; })); + // From + var fromInp = document.createElement('input'); + fromInp.type = 'number'; fromInp.className = 'ts-input ts-input-sm'; + fromInp.min = String(itv.defFrom); fromInp.max = String(itv.defTo); + fromInp.value = String(vis.from || itv.defFrom); + fromInp.addEventListener('input', function() { vis.from = parseInt(fromInp.value) || itv.defFrom; slider.value = String(vis.from); }); + fromInp.addEventListener('keydown', function(e) { e.stopPropagation(); }); + row.ctrl.appendChild(fromInp); + // Slider + var slider = document.createElement('input'); + slider.type = 'range'; slider.className = 'tv-settings-slider'; + slider.min = String(itv.defFrom); slider.max = String(itv.defTo); + slider.value = String(vis.from || itv.defFrom); + slider.addEventListener('input', function() { vis.from = parseInt(slider.value); fromInp.value = slider.value; }); + row.ctrl.appendChild(slider); + // To + var toInp = document.createElement('input'); + toInp.type = 'number'; toInp.className = 'ts-input ts-input-sm'; + toInp.min = String(itv.defFrom); toInp.max = String(itv.defTo); + toInp.value = String(vis.to || itv.defTo); + toInp.addEventListener('input', function() { vis.to = parseInt(toInp.value) || itv.defTo; }); + toInp.addEventListener('keydown', function(e) { e.stopPropagation(); }); + row.ctrl.appendChild(toInp); + container.appendChild(row.row); + })(intervals[vi]); + } + } + + function renderBody() { + body.innerHTML = ''; + + if (activeTab === 'Inputs') { + // ---- INPUTS TAB ---- + if (d.type === 'regression_channel') { + addSectionHeading('DEVIATION'); + var udRow = makeRow('Upper deviation'); + udRow.ctrl.appendChild(makeNumberInput(draft.upperDeviation !== undefined ? draft.upperDeviation : 2.0, function(v) { draft.upperDeviation = v; })); + body.appendChild(udRow.row); + var ldRow = makeRow('Lower deviation'); + ldRow.ctrl.appendChild(makeNumberInput(draft.lowerDeviation !== undefined ? draft.lowerDeviation : 2.0, function(v) { draft.lowerDeviation = v; })); + body.appendChild(ldRow.row); + var uuRow = makeRow('Use upper deviation'); + uuRow.ctrl.appendChild(makeCheckbox(draft.useUpperDeviation !== false, function(v) { draft.useUpperDeviation = v; })); + body.appendChild(uuRow.row); + var ulRow = makeRow('Use lower deviation'); + ulRow.ctrl.appendChild(makeCheckbox(draft.useLowerDeviation !== false, function(v) { draft.useLowerDeviation = v; })); + body.appendChild(ulRow.row); + addSectionHeading('SOURCE'); + var srcRow = makeRow('Source'); + srcRow.ctrl.appendChild(makeSelect([ + {value:'close',label:'Close'},{value:'open',label:'Open'}, + {value:'high',label:'High'},{value:'low',label:'Low'}, + {value:'hl2',label:'(H+L)/2'},{value:'hlc3',label:'(H+L+C)/3'}, + {value:'ohlc4',label:'(O+H+L+C)/4'} + ], draft.source || 'close', function(v) { draft.source = v; })); + body.appendChild(srcRow.row); + + } else if (d.type === 'fibonacci') { + addSectionHeading('LEVELS'); + var revRow = makeRow('Reverse'); + revRow.ctrl.appendChild(makeCheckbox(!!draft.reverse, function(v) { draft.reverse = v; })); + body.appendChild(revRow.row); + var showLabRow = makeRow('Show labels'); + showLabRow.ctrl.appendChild(makeCheckbox(draft.showLabels !== false, function(v) { draft.showLabels = v; })); + body.appendChild(showLabRow.row); + var showPrRow = makeRow('Show prices'); + showPrRow.ctrl.appendChild(makeCheckbox(draft.showPrices !== false, function(v) { draft.showPrices = v; })); + body.appendChild(showPrRow.row); + var showLevRow = makeRow('Levels based on'); + showLevRow.ctrl.appendChild(makeSelect([ + {value:'percent',label:'Percent'},{value:'price',label:'Price'} + ], draft.levelsBasis || 'percent', function(v) { draft.levelsBasis = v; })); + body.appendChild(showLevRow.row); + + } else if (d.type === 'fib_extension') { + addSectionHeading('LEVELS'); + var revRow = makeRow('Reverse'); + revRow.ctrl.appendChild(makeCheckbox(!!draft.reverse, function(v) { draft.reverse = v; })); + body.appendChild(revRow.row); + var showLabRow = makeRow('Show labels'); + showLabRow.ctrl.appendChild(makeCheckbox(draft.showLabels !== false, function(v) { draft.showLabels = v; })); + body.appendChild(showLabRow.row); + var showPrRow = makeRow('Show prices'); + showPrRow.ctrl.appendChild(makeCheckbox(draft.showPrices !== false, function(v) { draft.showPrices = v; })); + body.appendChild(showPrRow.row); + var showLevRow = makeRow('Levels based on'); + showLevRow.ctrl.appendChild(makeSelect([ + {value:'percent',label:'Percent'},{value:'price',label:'Price'} + ], draft.levelsBasis || 'percent', function(v) { draft.levelsBasis = v; })); + body.appendChild(showLevRow.row); + + } else if (d.type === 'fib_channel' || d.type === 'fib_fan' || d.type === 'fib_arc' || + d.type === 'fib_circle' || d.type === 'fib_wedge') { + addSectionHeading('LEVELS'); + var revRow = makeRow('Reverse'); + revRow.ctrl.appendChild(makeCheckbox(!!draft.reverse, function(v) { draft.reverse = v; })); + body.appendChild(revRow.row); + var showLabRow = makeRow('Show labels'); + showLabRow.ctrl.appendChild(makeCheckbox(draft.showLabels !== false, function(v) { draft.showLabels = v; })); + body.appendChild(showLabRow.row); + var showPrRow = makeRow('Show prices'); + showPrRow.ctrl.appendChild(makeCheckbox(draft.showPrices !== false, function(v) { draft.showPrices = v; })); + body.appendChild(showPrRow.row); + + } else if (d.type === 'pitchfan') { + addSectionHeading('OPTIONS'); + var showLabRow = makeRow('Show labels'); + showLabRow.ctrl.appendChild(makeCheckbox(draft.showLabels !== false, function(v) { draft.showLabels = v; })); + body.appendChild(showLabRow.row); + var showPrRow = makeRow('Show prices'); + showPrRow.ctrl.appendChild(makeCheckbox(draft.showPrices !== false, function(v) { draft.showPrices = v; })); + body.appendChild(showPrRow.row); + + } else if (d.type === 'fib_timezone') { + addSectionHeading('OPTIONS'); + var showLabRow = makeRow('Show labels'); + showLabRow.ctrl.appendChild(makeCheckbox(draft.showLabels !== false, function(v) { draft.showLabels = v; })); + body.appendChild(showLabRow.row); + + } else if (d.type === 'fib_time') { + addSectionHeading('OPTIONS'); + var showLabRow = makeRow('Show labels'); + showLabRow.ctrl.appendChild(makeCheckbox(draft.showLabels !== false, function(v) { draft.showLabels = v; })); + body.appendChild(showLabRow.row); + var revRow = makeRow('Reverse'); + revRow.ctrl.appendChild(makeCheckbox(!!draft.reverse, function(v) { draft.reverse = v; })); + body.appendChild(revRow.row); + + } else if (d.type === 'gann_box' || d.type === 'gann_square_fixed' || d.type === 'gann_square') { + addSectionHeading('OPTIONS'); + var revRow = makeRow('Reverse'); + revRow.ctrl.appendChild(makeCheckbox(!!draft.reverse, function(v) { draft.reverse = v; })); + body.appendChild(revRow.row); + var showLabRow = makeRow('Show labels'); + showLabRow.ctrl.appendChild(makeCheckbox(draft.showLabels !== false, function(v) { draft.showLabels = v; })); + body.appendChild(showLabRow.row); + + } else if (d.type === 'gann_fan') { + addSectionHeading('OPTIONS'); + var showLabRow = makeRow('Show labels'); + showLabRow.ctrl.appendChild(makeCheckbox(draft.showLabels !== false, function(v) { draft.showLabels = v; })); + body.appendChild(showLabRow.row); + + } else if (d.type === 'trendline') { + addSectionHeading('OPTIONS'); + var extRow = makeRow('Extend'); + extRow.ctrl.appendChild(makeSelect(["Don't extend", 'Left', 'Right', 'Both'], draft.extend || "Don't extend", function(v) { draft.extend = v; })); + body.appendChild(extRow.row); + var mpRow = makeRow('Middle point'); + mpRow.ctrl.appendChild(makeCheckbox(!!draft.showMiddlePoint, function(v) { draft.showMiddlePoint = v; })); + body.appendChild(mpRow.row); + var plRow = makeRow('Price labels'); + plRow.ctrl.appendChild(makeCheckbox(!!draft.showPriceLabels, function(v) { draft.showPriceLabels = v; })); + body.appendChild(plRow.row); + addSectionHeading('STATS'); + var statsRow = makeRow('Stats'); + statsRow.ctrl.appendChild(makeSelect([{value:'hidden',label:'Hidden'},{value:'compact',label:'Compact'},{value:'values',label:'Values'}], draft.stats || 'hidden', function(v) { draft.stats = v; })); + body.appendChild(statsRow.row); + var spRow = makeRow('Stats position'); + spRow.ctrl.appendChild(makeSelect([{value:'left',label:'Left'},{value:'right',label:'Right'}], draft.statsPosition || 'right', function(v) { draft.statsPosition = v; })); + body.appendChild(spRow.row); + var asRow = makeRow('Always show stats'); + asRow.ctrl.appendChild(makeCheckbox(!!draft.alwaysShowStats, function(v) { draft.alwaysShowStats = v; })); + body.appendChild(asRow.row); + + } else if (d.type === 'long_position' || d.type === 'short_position') { + addSectionHeading('RISK/REWARD'); + var rrRow = makeRow('Risk/Reward ratio'); + rrRow.ctrl.appendChild(makeNumberInput(draft.riskReward !== undefined ? draft.riskReward : 2.0, function(v) { draft.riskReward = v; })); + body.appendChild(rrRow.row); + var lotRow = makeRow('Lot size'); + lotRow.ctrl.appendChild(makeNumberInput(draft.lotSize !== undefined ? draft.lotSize : 1, function(v) { draft.lotSize = v; })); + body.appendChild(lotRow.row); + var accRow = makeRow('Account size'); + accRow.ctrl.appendChild(makeNumberInput(draft.accountSize !== undefined ? draft.accountSize : 10000, function(v) { draft.accountSize = v; })); + body.appendChild(accRow.row); + var showLblRow = makeRow('Show labels'); + showLblRow.ctrl.appendChild(makeCheckbox(draft.showLabels !== false, function(v) { draft.showLabels = v; })); + body.appendChild(showLblRow.row); + + } else if (d.type === 'forecast') { + addSectionHeading('OPTIONS'); + var srcRow = makeRow('Source'); + srcRow.ctrl.appendChild(makeSelect([ + {value:'close',label:'Close'},{value:'open',label:'Open'}, + {value:'high',label:'High'},{value:'low',label:'Low'} + ], draft.source || 'close', function(v) { draft.source = v; })); + body.appendChild(srcRow.row); + } + + } else if (activeTab === 'Style') { + + // ---- HLINE ---- + if (d.type === 'hline') { + addSectionHeading('LINE'); + addLineRow(body); + addWidthRow(body); + var extRow = makeRow('Extend'); + extRow.ctrl.appendChild(makeSelect(["Don't extend", 'Left', 'Right', 'Both'], draft.extend || "Don't extend", function(v) { draft.extend = v; })); + body.appendChild(extRow.row); + addSectionHeading('PRICE LABEL'); + var plRow = makeRow('Price label'); + plRow.ctrl.appendChild(makeCheckbox(draft.showPriceLabel !== false, function(v) { draft.showPriceLabel = v; })); + body.appendChild(plRow.row); + var plColorRow = makeRow('Label color'); + plColorRow.ctrl.appendChild(makeColorSwatch(draft.labelColor || draft.color || _drawDefaults.color, function(c) { draft.labelColor = c; })); + body.appendChild(plColorRow.row); + var plTitleRow = makeRow('Label text'); + plTitleRow.ctrl.appendChild(makeTextInput(draft.title || '', function(v) { draft.title = v; })); + body.appendChild(plTitleRow.row); + + // ---- TRENDLINE / RAY / EXTENDED_LINE ---- + } else if (d.type === 'trendline' || d.type === 'ray' || d.type === 'extended_line') { + addSectionHeading('LINE'); + addLineRow(body); + addWidthRow(body); + + // ---- HRAY ---- + } else if (d.type === 'hray') { + addSectionHeading('LINE'); + addLineRow(body); + addWidthRow(body); + addSectionHeading('PRICE LABEL'); + var plRow = makeRow('Price label'); + plRow.ctrl.appendChild(makeCheckbox(draft.showPriceLabel !== false, function(v) { draft.showPriceLabel = v; })); + body.appendChild(plRow.row); + + // ---- VLINE ---- + } else if (d.type === 'vline') { + addSectionHeading('LINE'); + addLineRow(body); + addWidthRow(body); + + // ---- CROSSLINE ---- + } else if (d.type === 'crossline') { + addSectionHeading('LINE'); + addLineRow(body); + addWidthRow(body); + + // ---- RECT ---- + } else if (d.type === 'rect') { + addSectionHeading('BORDER'); + addLineRow(body); + addWidthRow(body); + addSectionHeading('BACKGROUND'); + var bgEnRow = makeRow('Background'); + bgEnRow.ctrl.appendChild(makeCheckbox(draft.fillEnabled !== false, function(v) { draft.fillEnabled = v; })); + bgEnRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); + body.appendChild(bgEnRow.row); + var bgOpRow = makeRow('Opacity'); + bgOpRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.15, function(v) { draft.fillOpacity = v; })); + body.appendChild(bgOpRow.row); + + // ---- CHANNEL ---- + } else if (d.type === 'channel') { + addSectionHeading('LINES'); + addLineRow(body); + addWidthRow(body); + var midRow = makeRow('Middle line'); + midRow.ctrl.appendChild(makeCheckbox(draft.showMiddleLine !== false, function(v) { draft.showMiddleLine = v; })); + body.appendChild(midRow.row); + var extRow = makeRow('Extend'); + extRow.ctrl.appendChild(makeSelect(["Don't extend", 'Left', 'Right', 'Both'], draft.extend || "Don't extend", function(v) { draft.extend = v; })); + body.appendChild(extRow.row); + addSectionHeading('BACKGROUND'); + var bgEnRow = makeRow('Background'); + bgEnRow.ctrl.appendChild(makeCheckbox(draft.fillEnabled !== false, function(v) { draft.fillEnabled = v; })); + bgEnRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); + body.appendChild(bgEnRow.row); + var bgOpRow = makeRow('Opacity'); + bgOpRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.08, function(v) { draft.fillOpacity = v; })); + body.appendChild(bgOpRow.row); + + // ---- REGRESSION_CHANNEL (TV-style: Base/Up/Down lines) ---- + } else if (d.type === 'regression_channel') { + addCompoundLineRow(body, { + label: 'Base', showKey: 'showBaseLine', colorKey: 'baseColor', + styleKey: 'baseLineStyle', defaultColor: draft.color || _drawDefaults.color, defaultStyle: 0 + }); + addCompoundLineRow(body, { + label: 'Up', showKey: 'showUpLine', colorKey: 'upColor', + styleKey: 'upLineStyle', defaultColor: draft.upColor || '#26a69a', defaultStyle: 1 + }); + addCompoundLineRow(body, { + label: 'Down', showKey: 'showDownLine', colorKey: 'downColor', + styleKey: 'downLineStyle', defaultColor: draft.downColor || '#ef5350', defaultStyle: 1 + }); + var extLnRow = makeRow('Extend lines'); + extLnRow.ctrl.appendChild(makeCheckbox(!!draft.extendLines, function(v) { draft.extendLines = v; })); + body.appendChild(extLnRow.row); + var prRow = makeRow("Pearson's R"); + prRow.ctrl.appendChild(makeCheckbox(!!draft.showPearsonsR, function(v) { draft.showPearsonsR = v; })); + body.appendChild(prRow.row); + addSectionHeading('BACKGROUND'); + var bgEnRow = makeRow('Background'); + bgEnRow.ctrl.appendChild(makeCheckbox(draft.fillEnabled !== false, function(v) { draft.fillEnabled = v; })); + bgEnRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); + body.appendChild(bgEnRow.row); + var bgOpRow = makeRow('Opacity'); + bgOpRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.05, function(v) { draft.fillOpacity = v; })); + body.appendChild(bgOpRow.row); + + // ---- FLAT_CHANNEL ---- + } else if (d.type === 'flat_channel') { + addSectionHeading('LINES'); + addLineRow(body); + addWidthRow(body); + addSectionHeading('BACKGROUND'); + var bgEnRow = makeRow('Background'); + bgEnRow.ctrl.appendChild(makeCheckbox(draft.fillEnabled !== false, function(v) { draft.fillEnabled = v; })); + bgEnRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); + body.appendChild(bgEnRow.row); + var bgOpRow = makeRow('Opacity'); + bgOpRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.08, function(v) { draft.fillOpacity = v; })); + body.appendChild(bgOpRow.row); + + // ---- FIBONACCI ---- + } else if (d.type === 'fibonacci') { + addSectionHeading('TREND LINE'); + addLineRow(body); + addWidthRow(body); + var extRow = makeRow('Extend'); + extRow.ctrl.appendChild(makeSelect(["Don't extend", 'Left', 'Right', 'Both'], draft.extend || "Don't extend", function(v) { draft.extend = v; })); + body.appendChild(extRow.row); + addSectionHeading('LEVELS'); + var fibLevels = draft.fibLevelValues || _FIB_LEVELS.slice(); + var fibColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : _getFibColors(); + var fibEnabled = draft.fibEnabled || []; + for (var fi = 0; fi < fibLevels.length; fi++) { + (function(idx) { + var fRow = makeRow(''); + var enCb = makeCheckbox(fibEnabled[idx] !== false, function(v) { + if (!draft.fibEnabled) draft.fibEnabled = fibLevels.map(function() { return true; }); + draft.fibEnabled[idx] = v; + }); + fRow.ctrl.appendChild(enCb); + var levelInp = document.createElement('input'); + levelInp.type = 'number'; levelInp.step = '0.001'; + levelInp.className = 'ts-input ts-input-sm'; + levelInp.value = fibLevels[idx].toFixed(3); + levelInp.addEventListener('input', function() { + if (!draft.fibLevelValues) draft.fibLevelValues = fibLevels.slice(); + draft.fibLevelValues[idx] = parseFloat(levelInp.value) || 0; + }); + levelInp.addEventListener('keydown', function(e) { e.stopPropagation(); }); + fRow.ctrl.appendChild(levelInp); + fRow.ctrl.appendChild(makeColorSwatch(fibColors[idx] || _drawDefaults.color, function(c) { + if (!draft.fibColors) draft.fibColors = fibColors.slice(); + draft.fibColors[idx] = c; + })); + body.appendChild(fRow.row); + })(fi); + } + + // ---- FIB EXTENSION ---- + } else if (d.type === 'fib_extension') { + addSectionHeading('TREND LINE'); + addLineRow(body); + addWidthRow(body); + var extRow = makeRow('Extend'); + extRow.ctrl.appendChild(makeSelect(["Don't extend", 'Left', 'Right', 'Both'], draft.extend || "Don't extend", function(v) { draft.extend = v; })); + body.appendChild(extRow.row); + addSectionHeading('LEVELS'); + var extDefLevels = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618, 2.618, 4.236]; + var fibLevels = (draft.fibLevelValues && draft.fibLevelValues.length) ? draft.fibLevelValues : extDefLevels; + var fibColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : _getFibColors(); + var fibEnabled = draft.fibEnabled || []; + for (var fi = 0; fi < fibLevels.length; fi++) { + (function(idx) { + var fRow = makeRow(''); + var enCb = makeCheckbox(fibEnabled[idx] !== false, function(v) { + if (!draft.fibEnabled) draft.fibEnabled = fibLevels.map(function() { return true; }); + draft.fibEnabled[idx] = v; + }); + fRow.ctrl.appendChild(enCb); + var levelInp = document.createElement('input'); + levelInp.type = 'number'; levelInp.step = '0.001'; + levelInp.className = 'ts-input ts-input-sm'; + levelInp.value = fibLevels[idx].toFixed(3); + levelInp.addEventListener('input', function() { + if (!draft.fibLevelValues) draft.fibLevelValues = fibLevels.slice(); + draft.fibLevelValues[idx] = parseFloat(levelInp.value) || 0; + }); + levelInp.addEventListener('keydown', function(e) { e.stopPropagation(); }); + fRow.ctrl.appendChild(levelInp); + fRow.ctrl.appendChild(makeColorSwatch(fibColors[idx % fibColors.length] || _drawDefaults.color, function(c) { + if (!draft.fibColors) draft.fibColors = fibColors.slice(); + while (draft.fibColors.length <= idx) draft.fibColors.push(_drawDefaults.color); + draft.fibColors[idx] = c; + })); + body.appendChild(fRow.row); + })(fi); + } + addSectionHeading('BACKGROUND'); + var bgEnRow = makeRow('Background'); + bgEnRow.ctrl.appendChild(makeCheckbox(draft.fillEnabled !== false, function(v) { draft.fillEnabled = v; })); + bgEnRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); + body.appendChild(bgEnRow.row); + var bgOpRow = makeRow('Opacity'); + bgOpRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.06, function(v) { draft.fillOpacity = v; })); + body.appendChild(bgOpRow.row); + + // ---- FIB CHANNEL ---- + } else if (d.type === 'fib_channel') { + addSectionHeading('BORDER'); + addLineRow(body); + addWidthRow(body); + var extRow = makeRow('Extend'); + extRow.ctrl.appendChild(makeSelect(["Don't extend", 'Left', 'Right', 'Both'], draft.extend || "Don't extend", function(v) { draft.extend = v; })); + body.appendChild(extRow.row); + addSectionHeading('LEVELS'); + var fibLevels = draft.fibLevelValues || _FIB_LEVELS.slice(); + var fibColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : _getFibColors(); + var fibEnabled = draft.fibEnabled || []; + for (var fi = 0; fi < fibLevels.length; fi++) { + (function(idx) { + var fRow = makeRow(''); + fRow.ctrl.appendChild(makeCheckbox(fibEnabled[idx] !== false, function(v) { + if (!draft.fibEnabled) draft.fibEnabled = fibLevels.map(function() { return true; }); + draft.fibEnabled[idx] = v; + })); + var levelInp = document.createElement('input'); + levelInp.type = 'number'; levelInp.step = '0.001'; + levelInp.className = 'ts-input ts-input-sm'; + levelInp.value = fibLevels[idx].toFixed(3); + levelInp.addEventListener('input', function() { + if (!draft.fibLevelValues) draft.fibLevelValues = fibLevels.slice(); + draft.fibLevelValues[idx] = parseFloat(levelInp.value) || 0; + }); + levelInp.addEventListener('keydown', function(e) { e.stopPropagation(); }); + fRow.ctrl.appendChild(levelInp); + fRow.ctrl.appendChild(makeColorSwatch(fibColors[idx] || _drawDefaults.color, function(c) { + if (!draft.fibColors) draft.fibColors = fibColors.slice(); + draft.fibColors[idx] = c; + })); + body.appendChild(fRow.row); + })(fi); + } + addSectionHeading('BACKGROUND'); + var bgEnRow = makeRow('Background'); + bgEnRow.ctrl.appendChild(makeCheckbox(draft.fillEnabled !== false, function(v) { draft.fillEnabled = v; })); + bgEnRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); + body.appendChild(bgEnRow.row); + var bgOpRow = makeRow('Opacity'); + bgOpRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.04, function(v) { draft.fillOpacity = v; })); + body.appendChild(bgOpRow.row); + + // ---- FIB FAN ---- + } else if (d.type === 'fib_fan') { + addSectionHeading('TREND LINE'); + addLineRow(body); + addWidthRow(body); + addSectionHeading('LEVELS'); + var fibLevels = draft.fibLevelValues || _FIB_LEVELS.slice(); + var fibColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : _getFibColors(); + var fibEnabled = draft.fibEnabled || []; + for (var fi = 0; fi < fibLevels.length; fi++) { + (function(idx) { + var fRow = makeRow(''); + fRow.ctrl.appendChild(makeCheckbox(fibEnabled[idx] !== false, function(v) { + if (!draft.fibEnabled) draft.fibEnabled = fibLevels.map(function() { return true; }); + draft.fibEnabled[idx] = v; + })); + var levelInp = document.createElement('input'); + levelInp.type = 'number'; levelInp.step = '0.001'; + levelInp.className = 'ts-input ts-input-sm'; + levelInp.value = fibLevels[idx].toFixed(3); + levelInp.addEventListener('input', function() { + if (!draft.fibLevelValues) draft.fibLevelValues = fibLevels.slice(); + draft.fibLevelValues[idx] = parseFloat(levelInp.value) || 0; + }); + levelInp.addEventListener('keydown', function(e) { e.stopPropagation(); }); + fRow.ctrl.appendChild(levelInp); + fRow.ctrl.appendChild(makeColorSwatch(fibColors[idx] || _drawDefaults.color, function(c) { + if (!draft.fibColors) draft.fibColors = fibColors.slice(); + draft.fibColors[idx] = c; + })); + body.appendChild(fRow.row); + })(fi); + } + addSectionHeading('BACKGROUND'); + var bgEnRow = makeRow('Fill between fan lines'); + bgEnRow.ctrl.appendChild(makeCheckbox(draft.fillEnabled !== false, function(v) { draft.fillEnabled = v; })); + body.appendChild(bgEnRow.row); + var bgColRow = makeRow('Color'); + bgColRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); + body.appendChild(bgColRow.row); + var bgOpRow = makeRow('Opacity'); + bgOpRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.03, function(v) { draft.fillOpacity = v; })); + body.appendChild(bgOpRow.row); + + // ---- FIB ARC ---- + } else if (d.type === 'fib_arc') { + addSectionHeading('TREND LINE'); + addLineRow(body); + addWidthRow(body); + var tlRow = makeRow('Show trend line'); + tlRow.ctrl.appendChild(makeCheckbox(draft.showTrendLine !== false, function(v) { draft.showTrendLine = v; })); + body.appendChild(tlRow.row); + addSectionHeading('LEVELS'); + var fibLevels = draft.fibLevelValues || _FIB_LEVELS.slice(); + var fibColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : _getFibColors(); + var fibEnabled = draft.fibEnabled || []; + for (var fi = 0; fi < fibLevels.length; fi++) { + (function(idx) { + var fRow = makeRow(''); + fRow.ctrl.appendChild(makeCheckbox(fibEnabled[idx] !== false, function(v) { + if (!draft.fibEnabled) draft.fibEnabled = fibLevels.map(function() { return true; }); + draft.fibEnabled[idx] = v; + })); + var levelInp = document.createElement('input'); + levelInp.type = 'number'; levelInp.step = '0.001'; + levelInp.className = 'ts-input ts-input-sm'; + levelInp.value = fibLevels[idx].toFixed(3); + levelInp.addEventListener('input', function() { + if (!draft.fibLevelValues) draft.fibLevelValues = fibLevels.slice(); + draft.fibLevelValues[idx] = parseFloat(levelInp.value) || 0; + }); + levelInp.addEventListener('keydown', function(e) { e.stopPropagation(); }); + fRow.ctrl.appendChild(levelInp); + fRow.ctrl.appendChild(makeColorSwatch(fibColors[idx] || _drawDefaults.color, function(c) { + if (!draft.fibColors) draft.fibColors = fibColors.slice(); + draft.fibColors[idx] = c; + })); + body.appendChild(fRow.row); + })(fi); + } + + // ---- FIB CIRCLE ---- + } else if (d.type === 'fib_circle') { + addSectionHeading('TREND LINE'); + addLineRow(body); + addWidthRow(body); + var tlRow = makeRow('Show trend line'); + tlRow.ctrl.appendChild(makeCheckbox(draft.showTrendLine !== false, function(v) { draft.showTrendLine = v; })); + body.appendChild(tlRow.row); + addSectionHeading('LEVELS'); + var fibLevels = draft.fibLevelValues || _FIB_LEVELS.slice(); + var fibColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : _getFibColors(); + var fibEnabled = draft.fibEnabled || []; + for (var fi = 0; fi < fibLevels.length; fi++) { + (function(idx) { + var fRow = makeRow(''); + fRow.ctrl.appendChild(makeCheckbox(fibEnabled[idx] !== false, function(v) { + if (!draft.fibEnabled) draft.fibEnabled = fibLevels.map(function() { return true; }); + draft.fibEnabled[idx] = v; + })); + var levelInp = document.createElement('input'); + levelInp.type = 'number'; levelInp.step = '0.001'; + levelInp.className = 'ts-input ts-input-sm'; + levelInp.value = fibLevels[idx].toFixed(3); + levelInp.addEventListener('input', function() { + if (!draft.fibLevelValues) draft.fibLevelValues = fibLevels.slice(); + draft.fibLevelValues[idx] = parseFloat(levelInp.value) || 0; + }); + levelInp.addEventListener('keydown', function(e) { e.stopPropagation(); }); + fRow.ctrl.appendChild(levelInp); + fRow.ctrl.appendChild(makeColorSwatch(fibColors[idx] || _drawDefaults.color, function(c) { + if (!draft.fibColors) draft.fibColors = fibColors.slice(); + draft.fibColors[idx] = c; + })); + body.appendChild(fRow.row); + })(fi); + } + + // ---- FIB WEDGE ---- + } else if (d.type === 'fib_wedge') { + addSectionHeading('LINE'); + addLineRow(body); + addWidthRow(body); + addSectionHeading('LEVELS'); + var fibLevels = draft.fibLevelValues || _FIB_LEVELS.slice(); + var fibColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : _getFibColors(); + var fibEnabled = draft.fibEnabled || []; + for (var fi = 0; fi < fibLevels.length; fi++) { + (function(idx) { + var fRow = makeRow(''); + fRow.ctrl.appendChild(makeCheckbox(fibEnabled[idx] !== false, function(v) { + if (!draft.fibEnabled) draft.fibEnabled = fibLevels.map(function() { return true; }); + draft.fibEnabled[idx] = v; + })); + var levelInp = document.createElement('input'); + levelInp.type = 'number'; levelInp.step = '0.001'; + levelInp.className = 'ts-input ts-input-sm'; + levelInp.value = fibLevels[idx].toFixed(3); + levelInp.addEventListener('input', function() { + if (!draft.fibLevelValues) draft.fibLevelValues = fibLevels.slice(); + draft.fibLevelValues[idx] = parseFloat(levelInp.value) || 0; + }); + levelInp.addEventListener('keydown', function(e) { e.stopPropagation(); }); + fRow.ctrl.appendChild(levelInp); + fRow.ctrl.appendChild(makeColorSwatch(fibColors[idx] || _drawDefaults.color, function(c) { + if (!draft.fibColors) draft.fibColors = fibColors.slice(); + draft.fibColors[idx] = c; + })); + body.appendChild(fRow.row); + })(fi); + } + addSectionHeading('BACKGROUND'); + var bgEnRow = makeRow('Background'); + bgEnRow.ctrl.appendChild(makeCheckbox(draft.fillEnabled !== false, function(v) { draft.fillEnabled = v; })); + bgEnRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); + body.appendChild(bgEnRow.row); + var bgOpRow = makeRow('Opacity'); + bgOpRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.04, function(v) { draft.fillOpacity = v; })); + body.appendChild(bgOpRow.row); + + // ---- PITCHFAN ---- + } else if (d.type === 'pitchfan') { + addSectionHeading('LINES'); + addLineRow(body); + addWidthRow(body); + addSectionHeading('MEDIAN'); + var medRow = makeRow('Show median'); + medRow.ctrl.appendChild(makeCheckbox(draft.showMedian !== false, function(v) { draft.showMedian = v; })); + body.appendChild(medRow.row); + var medColorRow = makeRow('Median color'); + medColorRow.ctrl.appendChild(makeColorSwatch(draft.medianColor || draft.color || _drawDefaults.color, function(c) { draft.medianColor = c; })); + body.appendChild(medColorRow.row); + addSectionHeading('FAN LEVELS'); + var pfLevels = [0.236, 0.382, 0.5, 0.618, 0.786]; + var fibLevels = (draft.fibLevelValues && draft.fibLevelValues.length) ? draft.fibLevelValues : pfLevels; + var fibColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : _getFibColors(); + var fibEnabled = draft.fibEnabled || []; + for (var fi = 0; fi < fibLevels.length; fi++) { + (function(idx) { + var fRow = makeRow(''); + fRow.ctrl.appendChild(makeCheckbox(fibEnabled[idx] !== false, function(v) { + if (!draft.fibEnabled) draft.fibEnabled = fibLevels.map(function() { return true; }); + draft.fibEnabled[idx] = v; + })); + var levelInp = document.createElement('input'); + levelInp.type = 'number'; levelInp.step = '0.001'; + levelInp.className = 'ts-input ts-input-sm'; + levelInp.value = fibLevels[idx].toFixed(3); + levelInp.addEventListener('input', function() { + if (!draft.fibLevelValues) draft.fibLevelValues = fibLevels.slice(); + draft.fibLevelValues[idx] = parseFloat(levelInp.value) || 0; + }); + levelInp.addEventListener('keydown', function(e) { e.stopPropagation(); }); + fRow.ctrl.appendChild(levelInp); + fRow.ctrl.appendChild(makeColorSwatch(fibColors[idx] || _drawDefaults.color, function(c) { + if (!draft.fibColors) draft.fibColors = fibColors.slice(); + draft.fibColors[idx] = c; + })); + body.appendChild(fRow.row); + })(fi); + } + + // ---- FIB TIME ZONE ---- + } else if (d.type === 'fib_timezone') { + addSectionHeading('TREND LINE'); + addLineRow(body); + addWidthRow(body); + var tlRow = makeRow('Show trend line'); + tlRow.ctrl.appendChild(makeCheckbox(draft.showTrendLine !== false, function(v) { draft.showTrendLine = v; })); + body.appendChild(tlRow.row); + addSectionHeading('TIME ZONE LINES'); + var tzNums = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144]; + var tzColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : _getFibColors(); + var tzEnabled = draft.fibEnabled || []; + for (var fi = 0; fi < tzNums.length; fi++) { + (function(idx) { + var fRow = makeRow(String(tzNums[idx])); + fRow.ctrl.appendChild(makeCheckbox(tzEnabled[idx] !== false, function(v) { + if (!draft.fibEnabled) draft.fibEnabled = tzNums.map(function() { return true; }); + draft.fibEnabled[idx] = v; + })); + fRow.ctrl.appendChild(makeColorSwatch(tzColors[idx % tzColors.length] || _drawDefaults.color, function(c) { + if (!draft.fibColors) { + draft.fibColors = []; + for (var ci = 0; ci < tzNums.length; ci++) draft.fibColors.push(tzColors[ci % tzColors.length] || _drawDefaults.color); + } + draft.fibColors[idx] = c; + })); + body.appendChild(fRow.row); + })(fi); + } + + // ---- MEASURE ---- + } else if (d.type === 'fib_time') { + addSectionHeading('TREND LINE'); + addLineRow(body); + addWidthRow(body); + addSectionHeading('LEVELS'); + var ftDefLevels = [0, 0.382, 0.5, 0.618, 1, 1.382, 1.618, 2, 2.618, 4.236]; + var ftLevels = (draft.fibLevelValues && draft.fibLevelValues.length) ? draft.fibLevelValues : ftDefLevels; + var ftColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : _getFibColors(); + var ftEnabled = draft.fibEnabled || []; + for (var fi = 0; fi < ftLevels.length; fi++) { + (function(idx) { + var fRow = makeRow(ftLevels[idx].toFixed(3)); + fRow.ctrl.appendChild(makeCheckbox(ftEnabled[idx] !== false, function(v) { + if (!draft.fibEnabled) draft.fibEnabled = ftLevels.map(function() { return true; }); + draft.fibEnabled[idx] = v; + })); + fRow.ctrl.appendChild(makeColorSwatch(ftColors[idx % ftColors.length] || _drawDefaults.color, function(c) { + if (!draft.fibColors) { + draft.fibColors = []; + for (var ci = 0; ci < ftLevels.length; ci++) draft.fibColors.push(ftColors[ci % ftColors.length] || _drawDefaults.color); + } + draft.fibColors[idx] = c; + })); + body.appendChild(fRow.row); + })(fi); + } + + // ---- FIB SPIRAL ---- + } else if (d.type === 'fib_spiral') { + addSectionHeading('LINE'); + addLineRow(body); + addWidthRow(body); + + // ---- GANN BOX ---- + } else if (d.type === 'gann_box') { + addSectionHeading('BORDER'); + addLineRow(body); + addWidthRow(body); + addSectionHeading('LEVELS'); + var gbDefLevels = [0.25, 0.5, 0.75]; + var gbLevels = draft.gannLevels || gbDefLevels; + var gbColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : []; + var gbEnabled = draft.fibEnabled || []; + for (var gi = 0; gi < gbLevels.length; gi++) { + (function(idx) { + var gRow = makeRow(gbLevels[idx].toFixed(3)); + gRow.ctrl.appendChild(makeCheckbox(gbEnabled[idx] !== false, function(v) { + if (!draft.fibEnabled) draft.fibEnabled = gbLevels.map(function() { return true; }); + draft.fibEnabled[idx] = v; + })); + gRow.ctrl.appendChild(makeColorSwatch(gbColors[idx] || _drawDefaults.color, function(c) { + if (!draft.fibColors) { draft.fibColors = []; for (var ci = 0; ci < gbLevels.length; ci++) draft.fibColors.push(_drawDefaults.color); } + draft.fibColors[idx] = c; + })); + body.appendChild(gRow.row); + })(gi); + } + addSectionHeading('BACKGROUND'); + var fillRow = makeRow('Fill'); + fillRow.ctrl.appendChild(makeCheckbox(draft.fillEnabled !== false, function(v) { draft.fillEnabled = v; })); + body.appendChild(fillRow.row); + var bgColRow = makeRow('Color'); + bgColRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); + body.appendChild(bgColRow.row); + var opRow = makeRow('Opacity'); + opRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.03, function(v) { draft.fillOpacity = v; })); + body.appendChild(opRow.row); + + // ---- GANN SQUARE FIXED ---- + } else if (d.type === 'gann_square_fixed') { + addSectionHeading('BORDER'); + addLineRow(body); + addWidthRow(body); + addSectionHeading('LEVELS'); + var gsfDefLevels = [0.25, 0.5, 0.75]; + var gsfLevels = draft.gannLevels || gsfDefLevels; + var gsfColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : []; + var gsfEnabled = draft.fibEnabled || []; + for (var gi = 0; gi < gsfLevels.length; gi++) { + (function(idx) { + var gRow = makeRow(gsfLevels[idx].toFixed(3)); + gRow.ctrl.appendChild(makeCheckbox(gsfEnabled[idx] !== false, function(v) { + if (!draft.fibEnabled) draft.fibEnabled = gsfLevels.map(function() { return true; }); + draft.fibEnabled[idx] = v; + })); + gRow.ctrl.appendChild(makeColorSwatch(gsfColors[idx] || _drawDefaults.color, function(c) { + if (!draft.fibColors) { draft.fibColors = []; for (var ci = 0; ci < gsfLevels.length; ci++) draft.fibColors.push(_drawDefaults.color); } + draft.fibColors[idx] = c; + })); + body.appendChild(gRow.row); + })(gi); + } + addSectionHeading('BACKGROUND'); + var fillRow = makeRow('Fill'); + fillRow.ctrl.appendChild(makeCheckbox(draft.fillEnabled !== false, function(v) { draft.fillEnabled = v; })); + body.appendChild(fillRow.row); + var bgColRow = makeRow('Color'); + bgColRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); + body.appendChild(bgColRow.row); + var opRow = makeRow('Opacity'); + opRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.03, function(v) { draft.fillOpacity = v; })); + body.appendChild(opRow.row); + + // ---- GANN SQUARE ---- + } else if (d.type === 'gann_square') { + addSectionHeading('BORDER'); + addLineRow(body); + addWidthRow(body); + addSectionHeading('LEVELS'); + var gsDefLevels = [0.25, 0.5, 0.75]; + var gsLevels = draft.gannLevels || gsDefLevels; + var gsColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : []; + var gsEnabled = draft.fibEnabled || []; + for (var gi = 0; gi < gsLevels.length; gi++) { + (function(idx) { + var gRow = makeRow(gsLevels[idx].toFixed(3)); + gRow.ctrl.appendChild(makeCheckbox(gsEnabled[idx] !== false, function(v) { + if (!draft.fibEnabled) draft.fibEnabled = gsLevels.map(function() { return true; }); + draft.fibEnabled[idx] = v; + })); + gRow.ctrl.appendChild(makeColorSwatch(gsColors[idx] || _drawDefaults.color, function(c) { + if (!draft.fibColors) { draft.fibColors = []; for (var ci = 0; ci < gsLevels.length; ci++) draft.fibColors.push(_drawDefaults.color); } + draft.fibColors[idx] = c; + })); + body.appendChild(gRow.row); + })(gi); + } + addSectionHeading('BACKGROUND'); + var fillRow = makeRow('Fill'); + fillRow.ctrl.appendChild(makeCheckbox(draft.fillEnabled !== false, function(v) { draft.fillEnabled = v; })); + body.appendChild(fillRow.row); + var bgColRow = makeRow('Color'); + bgColRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); + body.appendChild(bgColRow.row); + var opRow = makeRow('Opacity'); + opRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.03, function(v) { draft.fillOpacity = v; })); + body.appendChild(opRow.row); + + // ---- GANN FAN ---- + } else if (d.type === 'gann_fan') { + addSectionHeading('LINES'); + addLineRow(body); + addWidthRow(body); + addSectionHeading('FAN LEVELS'); + var gfAngleNames = ['1\u00d78', '1\u00d74', '1\u00d73', '1\u00d72', '1\u00d71', '2\u00d71', '3\u00d71', '4\u00d71', '8\u00d71']; + var gfColors = (draft.fibColors && draft.fibColors.length) ? draft.fibColors : []; + var gfEnabled = draft.fibEnabled || []; + for (var gi = 0; gi < gfAngleNames.length; gi++) { + (function(idx) { + var gRow = makeRow(gfAngleNames[idx]); + gRow.ctrl.appendChild(makeCheckbox(gfEnabled[idx] !== false, function(v) { + if (!draft.fibEnabled) draft.fibEnabled = gfAngleNames.map(function() { return true; }); + draft.fibEnabled[idx] = v; + })); + gRow.ctrl.appendChild(makeColorSwatch(gfColors[idx] || _drawDefaults.color, function(c) { + if (!draft.fibColors) { draft.fibColors = []; for (var ci = 0; ci < gfAngleNames.length; ci++) draft.fibColors.push(_drawDefaults.color); } + draft.fibColors[idx] = c; + })); + body.appendChild(gRow.row); + })(gi); + } + + // ---- MEASURE ---- + } else if (d.type === 'measure') { + addSectionHeading('COLORS'); + var upRow = makeRow('Up color'); + upRow.ctrl.appendChild(makeColorSwatch(draft.colorUp || _cssVar('--pywry-draw-measure-up', '#26a69a'), function(c) { draft.colorUp = c; })); + body.appendChild(upRow.row); + var dnRow = makeRow('Down color'); + dnRow.ctrl.appendChild(makeColorSwatch(draft.colorDown || _cssVar('--pywry-draw-measure-down', '#ef5350'), function(c) { draft.colorDown = c; })); + body.appendChild(dnRow.row); + var bgOpRow = makeRow('Opacity'); + bgOpRow.ctrl.appendChild(makeOpacityInput(draft.fillOpacity !== undefined ? draft.fillOpacity : 0.08, function(v) { draft.fillOpacity = v; })); + body.appendChild(bgOpRow.row); + addSectionHeading('LABEL'); + var mFsRow = makeRow('Font size'); + mFsRow.ctrl.appendChild(makeSelect([{value:10,label:'10'},{value:11,label:'11'},{value:12,label:'12'},{value:13,label:'13'},{value:14,label:'14'},{value:16,label:'16'}], draft.fontSize || 12, function(v) { draft.fontSize = parseInt(v); })); + body.appendChild(mFsRow.row); + + // ---- TEXT ---- + } else if (d.type === 'text') { + addSectionHeading('TEXT'); + var tColorRow = makeRow('Color'); + tColorRow.ctrl.appendChild(makeColorSwatch(draft.color || _drawDefaults.color, function(c) { draft.color = c; })); + body.appendChild(tColorRow.row); + var fsRow = makeRow('Font size'); + fsRow.ctrl.appendChild(makeSelect([{value:10,label:'10'},{value:12,label:'12'},{value:14,label:'14'},{value:16,label:'16'},{value:18,label:'18'},{value:20,label:'20'},{value:24,label:'24'},{value:28,label:'28'}], draft.fontSize || 14, function(v) { draft.fontSize = parseInt(v); })); + body.appendChild(fsRow.row); + var boldRow = makeRow('Bold'); + boldRow.ctrl.appendChild(makeCheckbox(!!draft.bold, function(v) { draft.bold = v; })); + body.appendChild(boldRow.row); + var italicRow = makeRow('Italic'); + italicRow.ctrl.appendChild(makeCheckbox(!!draft.italic, function(v) { draft.italic = v; })); + body.appendChild(italicRow.row); + addSectionHeading('BACKGROUND'); + var bgEnRow = makeRow('Background'); + bgEnRow.ctrl.appendChild(makeCheckbox(!!draft.bgEnabled, function(v) { draft.bgEnabled = v; })); + bgEnRow.ctrl.appendChild(makeColorSwatch(draft.bgColor || '#2a2e39', function(c) { draft.bgColor = c; })); + body.appendChild(bgEnRow.row); + var bgOpRow = makeRow('Opacity'); + bgOpRow.ctrl.appendChild(makeOpacityInput(draft.bgOpacity !== undefined ? draft.bgOpacity : 0.7, function(v) { draft.bgOpacity = v; })); + body.appendChild(bgOpRow.row); + + // ---- BRUSH ---- + } else if (d.type === 'brush') { + addSectionHeading('BRUSH'); + var cRow = makeRow('Color'); + cRow.ctrl.appendChild(makeColorSwatch(draft.color || _drawDefaults.color, function(c) { draft.color = c; })); + body.appendChild(cRow.row); + var wRow = makeRow('Width'); + wRow.ctrl.appendChild(makeSelect([{value:1,label:'1px'},{value:2,label:'2px'},{value:3,label:'3px'},{value:4,label:'4px'},{value:5,label:'5px'},{value:8,label:'8px'},{value:12,label:'12px'}], draft.lineWidth || 2, function(v) { draft.lineWidth = parseInt(v); })); + body.appendChild(wRow.row); + var opRow = makeRow('Opacity'); + opRow.ctrl.appendChild(makeOpacityInput(draft.opacity !== undefined ? draft.opacity : 1.0, function(v) { draft.opacity = v; })); + body.appendChild(opRow.row); + + // ---- HIGHLIGHTER ---- + } else if (d.type === 'highlighter') { + addSectionHeading('HIGHLIGHTER'); + var cRow = makeRow('Color'); + cRow.ctrl.appendChild(makeColorSwatch(draft.color || '#FFEB3B', function(c) { draft.color = c; })); + body.appendChild(cRow.row); + var wRow = makeRow('Width'); + wRow.ctrl.appendChild(makeSelect([{value:5,label:'5px'},{value:8,label:'8px'},{value:10,label:'10px'},{value:15,label:'15px'},{value:20,label:'20px'}], draft.lineWidth || 10, function(v) { draft.lineWidth = parseInt(v); })); + body.appendChild(wRow.row); + var opRow = makeRow('Opacity'); + opRow.ctrl.appendChild(makeOpacityInput(draft.opacity !== undefined ? draft.opacity : 0.4, function(v) { draft.opacity = v; })); + body.appendChild(opRow.row); + + // ---- ARROW MARKER (filled shape) ---- + } else if (d.type === 'arrow_marker') { + addSectionHeading('FILL'); + var fRow = makeRow('Fill color'); + fRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); + body.appendChild(fRow.row); + addSectionHeading('BORDER'); + var brdRow = makeRow('Border color'); + brdRow.ctrl.appendChild(makeColorSwatch(draft.borderColor || draft.color || _drawDefaults.color, function(c) { draft.borderColor = c; })); + body.appendChild(brdRow.row); + addSectionHeading('TEXT'); + var tcRow = makeRow('Text color'); + tcRow.ctrl.appendChild(makeColorSwatch(draft.textColor || draft.color || _drawDefaults.color, function(c) { draft.textColor = c; })); + body.appendChild(tcRow.row); + var fsRow = makeRow('Font size'); + fsRow.ctrl.appendChild(makeSelect([{value:10,label:'10'},{value:12,label:'12'},{value:14,label:'14'},{value:16,label:'16'},{value:18,label:'18'},{value:20,label:'20'},{value:24,label:'24'},{value:30,label:'30'}], draft.fontSize || 16, function(v) { draft.fontSize = parseInt(v); })); + body.appendChild(fsRow.row); + var bRow = makeRow('Bold'); + bRow.ctrl.appendChild(makeCheckbox(!!draft.bold, function(v) { draft.bold = v; })); + body.appendChild(bRow.row); + var iRow = makeRow('Italic'); + iRow.ctrl.appendChild(makeCheckbox(!!draft.italic, function(v) { draft.italic = v; })); + body.appendChild(iRow.row); + + // ---- ARROW (line with arrowhead) ---- + } else if (d.type === 'arrow') { + addSectionHeading('LINE'); + addLineRow(body); + addWidthRow(body); + var styRow = makeRow('Line style'); + styRow.ctrl.appendChild(makeSelect([{value:0,label:'Solid'},{value:1,label:'Dashed'},{value:2,label:'Dotted'}], draft.lineStyle || 0, function(v) { draft.lineStyle = parseInt(v); })); + body.appendChild(styRow.row); + + // ---- ARROW MARKS (up/down/left/right) ---- + } else if (d.type === 'arrow_mark_up' || d.type === 'arrow_mark_down' || d.type === 'arrow_mark_left' || d.type === 'arrow_mark_right') { + addSectionHeading('FILL'); + var fRow = makeRow('Fill color'); + fRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || draft.color || _drawDefaults.color, function(c) { draft.fillColor = c; })); + body.appendChild(fRow.row); + addSectionHeading('BORDER'); + var brdRow = makeRow('Border color'); + brdRow.ctrl.appendChild(makeColorSwatch(draft.borderColor || draft.color || _drawDefaults.color, function(c) { draft.borderColor = c; })); + body.appendChild(brdRow.row); + addSectionHeading('TEXT'); + var tcRow = makeRow('Text color'); + tcRow.ctrl.appendChild(makeColorSwatch(draft.textColor || draft.color || _drawDefaults.color, function(c) { draft.textColor = c; })); + body.appendChild(tcRow.row); + var fsRow = makeRow('Font size'); + fsRow.ctrl.appendChild(makeSelect([{value:10,label:'10'},{value:12,label:'12'},{value:14,label:'14'},{value:16,label:'16'},{value:18,label:'18'},{value:20,label:'20'},{value:24,label:'24'},{value:30,label:'30'}], draft.fontSize || 16, function(v) { draft.fontSize = parseInt(v); })); + body.appendChild(fsRow.row); + var bRow = makeRow('Bold'); + bRow.ctrl.appendChild(makeCheckbox(!!draft.bold, function(v) { draft.bold = v; })); + body.appendChild(bRow.row); + var iRow = makeRow('Italic'); + iRow.ctrl.appendChild(makeCheckbox(!!draft.italic, function(v) { draft.italic = v; })); + body.appendChild(iRow.row); + + // ---- TEXT/NOTES TOOLS (anchored_text, note, price_note, pin, callout, comment, price_label, signpost, flag_mark) ---- + } else if (['anchored_text', 'note', 'price_note', 'pin', 'callout', 'comment', 'price_label', 'signpost', 'flag_mark'].indexOf(d.type) !== -1) { + // Pin, flag_mark, signpost: Style tab has only the marker color + // Other text tools: Style tab has color, font, bold, italic, bg, border + var _hoverTextTools = ['pin', 'flag_mark', 'signpost']; + if (_hoverTextTools.indexOf(d.type) !== -1) { + addSectionHeading('MARKER'); + var cRow = makeRow('Color'); + cRow.ctrl.appendChild(makeColorSwatch(draft.markerColor || draft.color || _drawDefaults.color, function(c) { draft.markerColor = c; })); + body.appendChild(cRow.row); + } else { + addSectionHeading('STYLE'); + var cRow = makeRow('Color'); + cRow.ctrl.appendChild(makeColorSwatch(draft.color || _drawDefaults.color, function(c) { draft.color = c; })); + body.appendChild(cRow.row); + var fsRow = makeRow('Font size'); + fsRow.ctrl.appendChild(makeSelect([{value:10,label:'10'},{value:12,label:'12'},{value:14,label:'14'},{value:16,label:'16'},{value:18,label:'18'},{value:20,label:'20'},{value:24,label:'24'},{value:28,label:'28'}], draft.fontSize || 14, function(v) { draft.fontSize = parseInt(v); })); + body.appendChild(fsRow.row); + var bRow = makeRow('Bold'); + bRow.ctrl.appendChild(makeCheckbox(!!draft.bold, function(v) { draft.bold = v; })); + body.appendChild(bRow.row); + var iRow = makeRow('Italic'); + iRow.ctrl.appendChild(makeCheckbox(!!draft.italic, function(v) { draft.italic = v; })); + body.appendChild(iRow.row); + addSectionHeading('BACKGROUND'); + var bgRow = makeRow('Background'); + bgRow.ctrl.appendChild(makeCheckbox(draft.bgEnabled !== false, function(v) { draft.bgEnabled = v; })); + bgRow.ctrl.appendChild(makeColorSwatch(draft.bgColor || '#2a2e39', function(c) { draft.bgColor = c; })); + body.appendChild(bgRow.row); + var bdRow = makeRow('Border'); + bdRow.ctrl.appendChild(makeCheckbox(!!draft.borderEnabled, function(v) { draft.borderEnabled = v; })); + bdRow.ctrl.appendChild(makeColorSwatch(draft.borderColor || draft.color || _drawDefaults.color, function(c) { draft.borderColor = c; })); + body.appendChild(bdRow.row); + } + + // ---- CIRCLE / ELLIPSE ---- + } else if (d.type === 'circle' || d.type === 'ellipse') { + addSectionHeading('BORDER'); + addLineRow(body); + addWidthRow(body); + addSectionHeading('BACKGROUND'); + var fillRow = makeRow('Fill'); + fillRow.ctrl.appendChild(makeCheckbox(!!draft.fillColor, function(v) { draft.fillColor = v ? (draft.fillColor || 'rgba(41,98,255,0.2)') : ''; })); + fillRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || 'rgba(41,98,255,0.2)', function(c) { draft.fillColor = c; })); + body.appendChild(fillRow.row); + + // ---- TRIANGLE / ROTATED RECT ---- + } else if (d.type === 'triangle' || d.type === 'rotated_rect') { + addSectionHeading('BORDER'); + addLineRow(body); + addWidthRow(body); + addSectionHeading('BACKGROUND'); + var fillRow = makeRow('Fill'); + fillRow.ctrl.appendChild(makeCheckbox(!!draft.fillColor, function(v) { draft.fillColor = v ? (draft.fillColor || 'rgba(41,98,255,0.2)') : ''; })); + fillRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || 'rgba(41,98,255,0.2)', function(c) { draft.fillColor = c; })); + body.appendChild(fillRow.row); + + // ---- PATH / POLYLINE ---- + } else if (d.type === 'path' || d.type === 'polyline') { + addSectionHeading('LINE'); + addLineRow(body); + addWidthRow(body); + if (d.type === 'path') { + addSectionHeading('BACKGROUND'); + var fillRow = makeRow('Fill'); + fillRow.ctrl.appendChild(makeCheckbox(!!draft.fillColor, function(v) { draft.fillColor = v ? (draft.fillColor || 'rgba(41,98,255,0.2)') : ''; })); + fillRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || 'rgba(41,98,255,0.2)', function(c) { draft.fillColor = c; })); + body.appendChild(fillRow.row); + } + + // ---- ARC / CURVE / DOUBLE CURVE ---- + } else if (d.type === 'shape_arc' || d.type === 'curve' || d.type === 'double_curve') { + addSectionHeading('LINE'); + addLineRow(body); + addWidthRow(body); + + // ---- LONG / SHORT POSITION ---- + } else if (d.type === 'long_position' || d.type === 'short_position') { + addSectionHeading('COLORS'); + var profRow = makeRow('Profit color'); + profRow.ctrl.appendChild(makeColorSwatch(draft.profitColor || '#26a69a', function(c) { draft.profitColor = c; })); + body.appendChild(profRow.row); + var lossRow = makeRow('Stop color'); + lossRow.ctrl.appendChild(makeColorSwatch(draft.stopColor || '#ef5350', function(c) { draft.stopColor = c; })); + body.appendChild(lossRow.row); + addSectionHeading('LINE'); + addLineRow(body); + addWidthRow(body); + + // ---- FORECAST / GHOST FEED ---- + } else if (d.type === 'forecast' || d.type === 'ghost_feed') { + addSectionHeading('LINE'); + addLineRow(body); + addWidthRow(body); + + // ---- BARS PATTERN / PROJECTION ---- + } else if (d.type === 'bars_pattern' || d.type === 'projection') { + addSectionHeading('LINE'); + addLineRow(body); + addWidthRow(body); + + // ---- ANCHORED VWAP ---- + } else if (d.type === 'anchored_vwap') { + addSectionHeading('LINE'); + addLineRow(body); + addWidthRow(body); + + // ---- FIXED RANGE VOLUME ---- + } else if (d.type === 'fixed_range_vol') { + addSectionHeading('LINE'); + addLineRow(body); + addWidthRow(body); + + // ---- PRICE RANGE / DATE RANGE / DATE+PRICE RANGE ---- + } else if (d.type === 'price_range' || d.type === 'date_range' || d.type === 'date_price_range') { + addSectionHeading('LINE'); + addLineRow(body); + addWidthRow(body); + if (d.type === 'date_price_range') { + addSectionHeading('BACKGROUND'); + var fillRow = makeRow('Fill'); + fillRow.ctrl.appendChild(makeColorSwatch(draft.fillColor || 'rgba(41,98,255,0.1)', function(c) { draft.fillColor = c; })); + body.appendChild(fillRow.row); + } + + // ---- FALLBACK (any unknown type) ---- + } else { + addSectionHeading('LINE'); + addLineRow(body); + addWidthRow(body); + } + + } else if (activeTab === 'Text' && d.type === 'text') { + addSectionHeading('CONTENT'); + var tRow = makeRow('Text'); + tRow.ctrl.appendChild(makeTextInput(draft.text || '', function(v) { draft.text = v; })); + body.appendChild(tRow.row); + + } else if (activeTab === 'Text' && (d.type === 'trendline' || d.type === 'ray' || d.type === 'extended_line')) { + addSectionHeading('TEXT'); + var tRow = makeRow('Text'); + tRow.ctrl.appendChild(makeTextInput(draft.text || '', function(v) { draft.text = v; })); + body.appendChild(tRow.row); + var tColorRow = makeRow('Text color'); + tColorRow.ctrl.appendChild(makeColorSwatch(draft.textColor || draft.color || _drawDefaults.color, function(c) { draft.textColor = c; })); + body.appendChild(tColorRow.row); + var tSizeRow = makeRow('Font size'); + tSizeRow.ctrl.appendChild(makeSelect([{value:10,label:'10'},{value:12,label:'12'},{value:14,label:'14'},{value:16,label:'16'},{value:18,label:'18'},{value:20,label:'20'},{value:24,label:'24'}], draft.textFontSize || 12, function(v) { draft.textFontSize = parseInt(v); })); + body.appendChild(tSizeRow.row); + var tBoldRow = makeRow('Bold'); + tBoldRow.ctrl.appendChild(makeCheckbox(!!draft.textBold, function(v) { draft.textBold = v; })); + body.appendChild(tBoldRow.row); + var tItalicRow = makeRow('Italic'); + tItalicRow.ctrl.appendChild(makeCheckbox(!!draft.textItalic, function(v) { draft.textItalic = v; })); + body.appendChild(tItalicRow.row); + + } else if (activeTab === 'Text' && (d.type === 'arrow_marker' || d.type === 'arrow' || d.type === 'arrow_mark_up' || d.type === 'arrow_mark_down' || d.type === 'arrow_mark_left' || d.type === 'arrow_mark_right')) { + addSectionHeading('TEXT'); + var tRow = makeRow('Text'); + tRow.ctrl.appendChild(makeTextInput(draft.text || '', function(v) { draft.text = v; })); + body.appendChild(tRow.row); + + } else if (activeTab === 'Text' && ['anchored_text', 'note', 'price_note', 'pin', 'callout', 'comment', 'price_label', 'signpost', 'flag_mark'].indexOf(d.type) !== -1) { + var _hoverTextTools2 = ['pin', 'flag_mark', 'signpost']; + if (_hoverTextTools2.indexOf(d.type) !== -1) { + // TV-style Text tab: font row, textarea, background, border + var fontRow = document.createElement('div'); + fontRow.style.cssText = 'display:flex;align-items:center;gap:8px;padding:8px 16px;'; + fontRow.appendChild(makeColorSwatch(draft.color || _drawDefaults.color, function(c) { draft.color = c; })); + fontRow.appendChild(makeSelect([{value:10,label:'10'},{value:12,label:'12'},{value:14,label:'14'},{value:16,label:'16'},{value:18,label:'18'},{value:20,label:'20'},{value:24,label:'24'},{value:28,label:'28'}], draft.fontSize || 14, function(v) { draft.fontSize = parseInt(v); })); + var boldBtn = document.createElement('button'); + boldBtn.textContent = 'B'; + boldBtn.className = 'ts-btn' + (draft.bold ? ' active' : ''); + boldBtn.style.cssText = 'font-weight:bold;min-width:28px;height:28px;border:1px solid rgba(255,255,255,0.2);border-radius:4px;background:' + (draft.bold ? 'rgba(255,255,255,0.15)' : 'transparent') + ';color:inherit;cursor:pointer;'; + boldBtn.addEventListener('click', function() { + draft.bold = !draft.bold; + boldBtn.style.background = draft.bold ? 'rgba(255,255,255,0.15)' : 'transparent'; + }); + fontRow.appendChild(boldBtn); + var italicBtn = document.createElement('button'); + italicBtn.textContent = 'I'; + italicBtn.className = 'ts-btn' + (draft.italic ? ' active' : ''); + italicBtn.style.cssText = 'font-style:italic;min-width:28px;height:28px;border:1px solid rgba(255,255,255,0.2);border-radius:4px;background:' + (draft.italic ? 'rgba(255,255,255,0.15)' : 'transparent') + ';color:inherit;cursor:pointer;'; + italicBtn.addEventListener('click', function() { + draft.italic = !draft.italic; + italicBtn.style.background = draft.italic ? 'rgba(255,255,255,0.15)' : 'transparent'; + }); + fontRow.appendChild(italicBtn); + body.appendChild(fontRow); + + var ta = document.createElement('textarea'); + ta.className = 'ts-input ts-input-full tv-settings-textarea'; + ta.style.cssText = 'margin:8px 16px;min-height:80px;resize:vertical;border:2px solid #2962ff;border-radius:4px;background:#1e222d;color:inherit;padding:8px;font-family:inherit;font-size:14px;'; + ta.placeholder = 'Add text'; + ta.value = draft.text || ''; + ta.addEventListener('input', function() { draft.text = ta.value; }); + ta.addEventListener('keydown', function(e) { e.stopPropagation(); }); + body.appendChild(ta); + + var bgRow2 = makeRow('Background'); + bgRow2.ctrl.appendChild(makeCheckbox(draft.bgEnabled !== false, function(v) { draft.bgEnabled = v; })); + bgRow2.ctrl.appendChild(makeColorSwatch(draft.bgColor || '#2a2e39', function(c) { draft.bgColor = c; })); + body.appendChild(bgRow2.row); + var bdRow2 = makeRow('Border'); + bdRow2.ctrl.appendChild(makeCheckbox(!!draft.borderEnabled, function(v) { draft.borderEnabled = v; })); + bdRow2.ctrl.appendChild(makeColorSwatch(draft.borderColor || draft.color || _drawDefaults.color, function(c) { draft.borderColor = c; })); + body.appendChild(bdRow2.row); + } else { + addSectionHeading('TEXT'); + var tRow = makeRow('Text'); + tRow.ctrl.appendChild(makeTextInput(draft.text || '', function(v) { draft.text = v; })); + body.appendChild(tRow.row); + } + + } else if (activeTab === 'Coordinates') { + // Helper: make a bar index input from a time value + function makeBarInput(tKey) { + var entry = window.__PYWRY_TVCHARTS__ && window.__PYWRY_TVCHARTS__[chartId]; + var data = entry && entry.series && typeof entry.series.data === 'function' ? entry.series.data() : null; + var barIdx = 0; + if (data && data.length && draft[tKey]) { + for (var bi = 0; bi < data.length; bi++) { + if (data[bi].time >= draft[tKey]) { barIdx = bi; break; } + } + if (barIdx === 0 && data[data.length - 1].time < draft[tKey]) barIdx = data.length - 1; + } + var inp = document.createElement('input'); + inp.type = 'number'; + inp.className = 'ts-input'; + inp.value = barIdx; + inp.min = '0'; + inp.max = data ? String(data.length - 1) : '0'; + inp.step = '1'; + inp.addEventListener('input', function() { + if (!data || !data.length) return; + var idx = Math.max(0, Math.min(parseInt(inp.value) || 0, data.length - 1)); + draft[tKey] = data[idx].time; + }); + inp.addEventListener('keydown', function(e) { e.stopPropagation(); }); + return inp; + } + + if (d.type === 'hline') { + addSectionHeading('PRICE'); + var pRow = makeRow('Price'); + pRow.ctrl.appendChild(makeNumberInput(draft.price || draft.p1 || 0, function(v) { + draft.price = v; draft.p1 = v; + })); + body.appendChild(pRow.row); + } else if (d.type === 'trendline' || d.type === 'ray' || d.type === 'extended_line' || d.type === 'fibonacci' || d.type === 'measure' || + d.type === 'fib_timezone' || d.type === 'fib_fan' || d.type === 'fib_arc' || d.type === 'fib_circle' || + d.type === 'fib_spiral' || d.type === 'gann_box' || d.type === 'gann_square_fixed' || d.type === 'gann_square' || d.type === 'gann_fan' || + d.type === 'arrow_marker' || d.type === 'arrow' || d.type === 'circle' || d.type === 'ellipse' || d.type === 'curve' || + d.type === 'long_position' || d.type === 'short_position' || d.type === 'forecast' || + d.type === 'bars_pattern' || d.type === 'ghost_feed' || d.type === 'projection' || d.type === 'fixed_range_vol' || + d.type === 'price_range' || d.type === 'date_range' || d.type === 'date_price_range') { + addSectionHeading('#1'); + var b1Row = makeRow('Bar'); + b1Row.ctrl.appendChild(makeBarInput('t1')); + body.appendChild(b1Row.row); + var p1Row = makeRow('Price'); + p1Row.ctrl.appendChild(makeNumberInput(draft.p1 || 0, function(v) { draft.p1 = v; })); + body.appendChild(p1Row.row); + addSectionHeading('#2'); + var b2Row = makeRow('Bar'); + b2Row.ctrl.appendChild(makeBarInput('t2')); + body.appendChild(b2Row.row); + var p2Row = makeRow('Price'); + p2Row.ctrl.appendChild(makeNumberInput(draft.p2 || 0, function(v) { draft.p2 = v; })); + body.appendChild(p2Row.row); + } else if (d.type === 'fib_extension' || d.type === 'fib_channel' || d.type === 'fib_wedge' || d.type === 'pitchfan' || d.type === 'fib_time' || + d.type === 'rotated_rect' || d.type === 'triangle' || d.type === 'shape_arc' || d.type === 'double_curve') { + addSectionHeading('#1'); + var b1Row = makeRow('Bar'); + b1Row.ctrl.appendChild(makeBarInput('t1')); + body.appendChild(b1Row.row); + var p1Row = makeRow('Price'); + p1Row.ctrl.appendChild(makeNumberInput(draft.p1 || 0, function(v) { draft.p1 = v; })); + body.appendChild(p1Row.row); + addSectionHeading('#2'); + var b2Row = makeRow('Bar'); + b2Row.ctrl.appendChild(makeBarInput('t2')); + body.appendChild(b2Row.row); + var p2Row = makeRow('Price'); + p2Row.ctrl.appendChild(makeNumberInput(draft.p2 || 0, function(v) { draft.p2 = v; })); + body.appendChild(p2Row.row); + addSectionHeading('#3'); + var b3Row = makeRow('Bar'); + b3Row.ctrl.appendChild(makeBarInput('t3')); + body.appendChild(b3Row.row); + var p3Row = makeRow('Price'); + p3Row.ctrl.appendChild(makeNumberInput(draft.p3 || 0, function(v) { draft.p3 = v; })); + body.appendChild(p3Row.row); + } else if (d.type === 'vline') { + addSectionHeading('TIME'); + var vbRow = makeRow('Bar'); + vbRow.ctrl.appendChild(makeBarInput('t1')); + body.appendChild(vbRow.row); + } else if (d.type === 'crossline') { + addSectionHeading('POSITION'); + var cbRow = makeRow('Bar'); + cbRow.ctrl.appendChild(makeBarInput('t1')); + body.appendChild(cbRow.row); + var pRow = makeRow('Price'); + pRow.ctrl.appendChild(makeNumberInput(draft.p1 || 0, function(v) { draft.p1 = v; })); + body.appendChild(pRow.row); + } else if (d.type === 'hray') { + addSectionHeading('POSITION'); + var hbRow = makeRow('Bar'); + hbRow.ctrl.appendChild(makeBarInput('t1')); + body.appendChild(hbRow.row); + var pRow = makeRow('Price'); + pRow.ctrl.appendChild(makeNumberInput(draft.p1 || 0, function(v) { draft.p1 = v; })); + body.appendChild(pRow.row); + } else if (d.type === 'flat_channel') { + addSectionHeading('LEVELS'); + var p1Row = makeRow('Upper level'); + p1Row.ctrl.appendChild(makeNumberInput(draft.p1 || 0, function(v) { draft.p1 = v; })); + body.appendChild(p1Row.row); + var p2Row = makeRow('Lower level'); + p2Row.ctrl.appendChild(makeNumberInput(draft.p2 || 0, function(v) { draft.p2 = v; })); + body.appendChild(p2Row.row); + } else if (d.type === 'regression_channel') { + addSectionHeading('#1'); + var rb1 = makeRow('Bar'); + rb1.ctrl.appendChild(makeBarInput('t1')); + body.appendChild(rb1.row); + var rp1 = makeRow('Price'); + rp1.ctrl.appendChild(makeNumberInput(draft.p1 || 0, function(v) { draft.p1 = v; })); + body.appendChild(rp1.row); + addSectionHeading('#2'); + var rb2 = makeRow('Bar'); + rb2.ctrl.appendChild(makeBarInput('t2')); + body.appendChild(rb2.row); + var rp2 = makeRow('Price'); + rp2.ctrl.appendChild(makeNumberInput(draft.p2 || 0, function(v) { draft.p2 = v; })); + body.appendChild(rp2.row); + } else if (d.type === 'rect') { + addSectionHeading('TOP-LEFT'); + var rb1 = makeRow('Bar'); + rb1.ctrl.appendChild(makeBarInput('t1')); + body.appendChild(rb1.row); + var p1Row = makeRow('Price'); + p1Row.ctrl.appendChild(makeNumberInput(draft.p1 || 0, function(v) { draft.p1 = v; })); + body.appendChild(p1Row.row); + addSectionHeading('BOTTOM-RIGHT'); + var rb2 = makeRow('Bar'); + rb2.ctrl.appendChild(makeBarInput('t2')); + body.appendChild(rb2.row); + var p2Row = makeRow('Price'); + p2Row.ctrl.appendChild(makeNumberInput(draft.p2 || 0, function(v) { draft.p2 = v; })); + body.appendChild(p2Row.row); + } else if (d.type === 'channel') { + addSectionHeading('#1'); + var cb1 = makeRow('Bar'); + cb1.ctrl.appendChild(makeBarInput('t1')); + body.appendChild(cb1.row); + var cp1 = makeRow('Price'); + cp1.ctrl.appendChild(makeNumberInput(draft.p1 || 0, function(v) { draft.p1 = v; })); + body.appendChild(cp1.row); + addSectionHeading('#2'); + var cb2 = makeRow('Bar'); + cb2.ctrl.appendChild(makeBarInput('t2')); + body.appendChild(cb2.row); + var cp2 = makeRow('Price'); + cp2.ctrl.appendChild(makeNumberInput(draft.p2 || 0, function(v) { draft.p2 = v; })); + body.appendChild(cp2.row); + addSectionHeading('CHANNEL'); + var offRow = makeRow('Offset (px)'); + offRow.ctrl.appendChild(makeNumberInput(draft.offset || 30, function(v) { draft.offset = v; })); + body.appendChild(offRow.row); + } else if (d.type === 'brush' || d.type === 'highlighter' || d.type === 'path' || d.type === 'polyline') { + addSectionHeading('POSITION'); + var noRow = document.createElement('div'); + noRow.className = 'tv-settings-row'; + noRow.style.cssText = 'color:var(--pywry-tvchart-text-muted,#787b86);font-size:12px;'; + noRow.textContent = 'Freeform drawing \u2014 drag to reposition.'; + body.appendChild(noRow); + } else if (d.type === 'arrow_mark_up' || d.type === 'arrow_mark_down' || d.type === 'arrow_mark_left' || d.type === 'arrow_mark_right' || d.type === 'anchored_vwap') { + addSectionHeading('POSITION'); + var abRow = makeRow('Bar'); + abRow.ctrl.appendChild(makeBarInput('t1')); + body.appendChild(abRow.row); + var apRow = makeRow('Price'); + apRow.ctrl.appendChild(makeNumberInput(draft.p1 || 0, function(v) { draft.p1 = v; })); + body.appendChild(apRow.row); + } else if (d.type === 'text') { + addSectionHeading('POSITION'); + var tbRow = makeRow('Bar'); + tbRow.ctrl.appendChild(makeBarInput('t1')); + body.appendChild(tbRow.row); + var tpRow = makeRow('Price'); + tpRow.ctrl.appendChild(makeNumberInput(draft.p1 || 0, function(v) { draft.p1 = v; })); + body.appendChild(tpRow.row); + } else { + if (draft.p1 !== undefined) { + var p1Row = makeRow('Price 1'); + p1Row.ctrl.appendChild(makeNumberInput(draft.p1, function(v) { draft.p1 = v; })); + body.appendChild(p1Row.row); + } + if (draft.p2 !== undefined) { + var p2Row = makeRow('Price 2'); + p2Row.ctrl.appendChild(makeNumberInput(draft.p2, function(v) { draft.p2 = v; })); + body.appendChild(p2Row.row); + } + } + + } else if (activeTab === 'Visibility') { + addSectionHeading('TIME INTERVALS'); + addVisibilityIntervals(body); + addSectionHeading('DRAWING'); + var hRow = makeRow('Hidden'); + hRow.ctrl.appendChild(makeCheckbox(!!draft.hidden, function(v) { draft.hidden = v; })); + body.appendChild(hRow.row); + var lkRow = makeRow('Locked'); + lkRow.ctrl.appendChild(makeCheckbox(!!draft.locked, function(v) { draft.locked = v; })); + body.appendChild(lkRow.row); + } + } + + // Footer + var footer = document.createElement('div'); + footer.className = 'tv-settings-footer'; + footer.style.cssText = 'position:relative;bottom:auto;left:auto;right:auto;'; + var cancelBtn = document.createElement('button'); + cancelBtn.className = 'ts-btn-cancel'; + cancelBtn.textContent = 'Cancel'; + cancelBtn.addEventListener('click', function() { _tvHideDrawingSettings(); }); + footer.appendChild(cancelBtn); + var okBtn = document.createElement('button'); + okBtn.className = 'ts-btn-ok'; + okBtn.textContent = 'Ok'; + okBtn.addEventListener('click', function() { + // Apply draft onto original drawing + Object.assign(d, draft); + // Sync native price line for hline + if (d.type === 'hline') { + _tvSyncPriceLineColor(chartId, drawIdx, d.color || _drawDefaults.color); + _tvSyncPriceLinePrice(chartId, drawIdx, d.price || d.p1); + } + _tvRenderDrawings(chartId); + if (_floatingToolbar) { + _tvHideFloatingToolbar(); + _tvShowFloatingToolbar(chartId, drawIdx); + } + _tvHideDrawingSettings(); + }); + footer.appendChild(okBtn); + panel.appendChild(footer); + + renderTabs(); + renderBody(); + ds.uiLayer.appendChild(overlay); +} + diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators.js b/pywry/pywry/frontend/src/tvchart/09-indicators.js deleted file mode 100644 index 400243b..0000000 --- a/pywry/pywry/frontend/src/tvchart/09-indicators.js +++ /dev/null @@ -1,3887 +0,0 @@ -// Helper: sync hline price after coordinate edit -function _tvSyncPriceLinePrice(chartId, drawIdx, newPrice) { - var ds = window.__PYWRY_DRAWINGS__[chartId]; - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!ds || !entry) return; - var d = ds.drawings[drawIdx]; - if (!d || d.type !== 'hline') return; - // Remove old native price line and recreate - if (ds.priceLines[drawIdx]) { - var pl = ds.priceLines[drawIdx]; - var ser = entry.seriesMap[pl.seriesId]; - if (ser) try { ser.removePriceLine(pl.priceLine); } catch(e) {} - } - var mainKey = Object.keys(entry.seriesMap)[0]; - if (mainKey && entry.seriesMap[mainKey]) { - var newPl = entry.seriesMap[mainKey].createPriceLine({ - price: newPrice, color: d.color || _drawDefaults.color, - lineWidth: d.lineWidth || 2, lineStyle: d.lineStyle || 0, - axisLabelVisible: d.showPriceLabel !== false, - title: d.title || '', - }); - ds.priceLines[drawIdx] = { seriesId: mainKey, priceLine: newPl }; - } -} - -// --------------------------------------------------------------------------- -// Indicators Panel -// --------------------------------------------------------------------------- -var _indicatorsOverlay = null; -var _indicatorsOverlayChartId = null; -var _activeIndicators = {}; // { seriesId: { name, period, chartId } } - -var _INDICATOR_CATALOG = [ - { key: 'average-price', name: 'Average Price', fullName: 'Average Price', category: 'Lightweight Examples', defaultPeriod: 0 }, - { key: 'correlation', name: 'Correlation', fullName: 'Correlation', category: 'Lightweight Examples', defaultPeriod: 20, requiresSecondary: true, subplot: true }, - { key: 'median-price', name: 'Median Price', fullName: 'Median Price', category: 'Lightweight Examples', defaultPeriod: 0 }, - { key: 'momentum', name: 'Momentum', fullName: 'Momentum', category: 'Lightweight Examples', defaultPeriod: 10, subplot: true }, - { key: 'moving-average-ex', name: 'Moving Average', fullName: 'Moving Average', category: 'Lightweight Examples', defaultPeriod: 10 }, - { key: 'percent-change', name: 'Percent Change', fullName: 'Percent Change', category: 'Lightweight Examples', defaultPeriod: 0, subplot: true }, - { key: 'product', name: 'Product', fullName: 'Product', category: 'Lightweight Examples', defaultPeriod: 0, requiresSecondary: true, subplot: true }, - { key: 'ratio', name: 'Ratio', fullName: 'Ratio', category: 'Lightweight Examples', defaultPeriod: 0, requiresSecondary: true, subplot: true }, - { key: 'spread', name: 'Spread', fullName: 'Spread', category: 'Lightweight Examples', defaultPeriod: 0, requiresSecondary: true, subplot: true }, - { key: 'sum', name: 'Sum', fullName: 'Sum', category: 'Lightweight Examples', defaultPeriod: 0, requiresSecondary: true, subplot: true }, - { key: 'weighted-close', name: 'Weighted Close', fullName: 'Weighted Close', category: 'Lightweight Examples', defaultPeriod: 0 }, - - { name: 'SMA', fullName: 'Simple Moving Average', category: 'Moving Averages', defaultPeriod: 20 }, - { name: 'EMA', fullName: 'Exponential Moving Average', category: 'Moving Averages', defaultPeriod: 20 }, - { name: 'WMA', fullName: 'Weighted Moving Average', category: 'Moving Averages', defaultPeriod: 20 }, - { name: 'HMA', fullName: 'Hull Moving Average', category: 'Moving Averages', defaultPeriod: 9 }, - { name: 'VWMA', fullName: 'Volume-Weighted Moving Average', category: 'Moving Averages', defaultPeriod: 20 }, - { name: 'SMA (50)', fullName: 'Simple Moving Average (50)', category: 'Moving Averages', defaultPeriod: 50 }, - { name: 'SMA (200)', fullName: 'Simple Moving Average (200)', category: 'Moving Averages', defaultPeriod: 200 }, - { name: 'EMA (12)', fullName: 'Exponential Moving Average (12)', category: 'Moving Averages', defaultPeriod: 12 }, - { name: 'EMA (26)', fullName: 'Exponential Moving Average (26)', category: 'Moving Averages', defaultPeriod: 26 }, - { name: 'Ichimoku Cloud', fullName: 'Ichimoku Kinko Hyo', category: 'Moving Averages', defaultPeriod: 26 }, - { name: 'Bollinger Bands', fullName: 'Bollinger Bands', category: 'Volatility', defaultPeriod: 20 }, - { name: 'Keltner Channels', fullName: 'Keltner Channels', category: 'Volatility', defaultPeriod: 20 }, - { name: 'ATR', fullName: 'Average True Range', category: 'Volatility', defaultPeriod: 14 }, - { name: 'Historical Volatility', fullName: 'Historical Volatility', category: 'Volatility', defaultPeriod: 10, subplot: true }, - { name: 'Parabolic SAR', fullName: 'Parabolic Stop and Reverse', category: 'Trend', defaultPeriod: 0 }, - { name: 'RSI', fullName: 'Relative Strength Index', category: 'Momentum', defaultPeriod: 14, subplot: true }, - { name: 'MACD', fullName: 'Moving Average Convergence/Divergence', category: 'Momentum', defaultPeriod: 12, subplot: true }, - { name: 'Stochastic', fullName: 'Stochastic Oscillator', category: 'Momentum', defaultPeriod: 14, subplot: true }, - { name: 'Williams %R', fullName: 'Williams %R', category: 'Momentum', defaultPeriod: 14, subplot: true }, - { name: 'CCI', fullName: 'Commodity Channel Index', category: 'Momentum', defaultPeriod: 20, subplot: true }, - { name: 'ADX', fullName: 'Average Directional Index', category: 'Momentum', defaultPeriod: 14, subplot: true }, - { name: 'Aroon', fullName: 'Aroon Up/Down', category: 'Momentum', defaultPeriod: 14, subplot: true }, - { name: 'VWAP', fullName: 'Volume Weighted Average Price', category: 'Volume', defaultPeriod: 0 }, - { name: 'Volume SMA', fullName: 'Volume Simple Moving Average', category: 'Volume', defaultPeriod: 20 }, - { name: 'Accumulation/Distribution', fullName: 'Accumulation / Distribution Line', category: 'Volume', defaultPeriod: 0, subplot: true }, - { key: 'volume-profile-fixed', name: 'Volume Profile Fixed Range', fullName: 'Volume Profile (Fixed Range)', category: 'Volume', defaultPeriod: 24, primitive: true }, - { key: 'volume-profile-visible', name: 'Volume Profile Visible Range', fullName: 'Volume Profile (Visible Range)', category: 'Volume', defaultPeriod: 24, primitive: true }, -]; - -// ---- Indicator computation functions ---- -function _computeSMA(data, period, field) { - field = field || 'close'; - var result = []; - for (var i = 0; i < data.length; i++) { - if (i < period - 1) { result.push({ time: data[i].time }); continue; } - var sum = 0; - for (var j = i - period + 1; j <= i; j++) sum += (data[j][field] !== undefined ? data[j][field] : data[j].value || 0); - result.push({ time: data[i].time, value: sum / period }); - } - return result; -} - -function _computeEMA(data, period, field) { - field = field || 'close'; - var result = []; - var k = 2 / (period + 1); - var ema = null; - for (var i = 0; i < data.length; i++) { - var val = data[i][field] !== undefined ? data[i][field] : data[i].value || 0; - if (i < period - 1) { result.push({ time: data[i].time }); continue; } - if (ema === null) { - var sum = 0; - for (var j = i - period + 1; j <= i; j++) sum += (data[j][field] !== undefined ? data[j][field] : data[j].value || 0); - ema = sum / period; - } else { - ema = val * k + ema * (1 - k); - } - result.push({ time: data[i].time, value: ema }); - } - return result; -} - -function _computeWMA(data, period, field) { - field = field || 'close'; - var result = []; - for (var i = 0; i < data.length; i++) { - if (i < period - 1) { result.push({ time: data[i].time }); continue; } - var sum = 0, wsum = 0; - for (var j = 0; j < period; j++) { - var w = j + 1; - var val = data[i - period + 1 + j][field] !== undefined ? data[i - period + 1 + j][field] : 0; - sum += val * w; - wsum += w; - } - result.push({ time: data[i].time, value: sum / wsum }); - } - return result; -} - -function _computeRSI(data, period) { - var result = []; - var gains = 0, losses = 0; - for (var i = 0; i < data.length; i++) { - if (i === 0) { result.push({ time: data[i].time }); continue; } - var prev = data[i - 1].close !== undefined ? data[i - 1].close : data[i - 1].value || 0; - var cur = data[i].close !== undefined ? data[i].close : data[i].value || 0; - var diff = cur - prev; - if (i <= period) { - if (diff > 0) gains += diff; else losses -= diff; - if (i === period) { - gains /= period; losses /= period; - var rs = losses === 0 ? 100 : gains / losses; - result.push({ time: data[i].time, value: 100 - 100 / (1 + rs) }); - } else { - result.push({ time: data[i].time }); - } - } else { - var g = diff > 0 ? diff : 0, l = diff < 0 ? -diff : 0; - gains = (gains * (period - 1) + g) / period; - losses = (losses * (period - 1) + l) / period; - var rs2 = losses === 0 ? 100 : gains / losses; - result.push({ time: data[i].time, value: 100 - 100 / (1 + rs2) }); - } - } - return result; -} - -function _computeATR(data, period) { - var result = []; - var atr = null; - for (var i = 0; i < data.length; i++) { - if (i === 0) { result.push({ time: data[i].time }); continue; } - var h = data[i].high || data[i].close || data[i].value || 0; - var l = data[i].low || data[i].close || data[i].value || 0; - var pc = data[i - 1].close !== undefined ? data[i - 1].close : data[i - 1].value || 0; - var tr = Math.max(h - l, Math.abs(h - pc), Math.abs(l - pc)); - if (i < period) { result.push({ time: data[i].time }); if (i === period - 1) { var s = 0; for (var j = 1; j <= i; j++) { var dh = data[j].high || data[j].close || 0; var dl = data[j].low || data[j].close || 0; var dpc = data[j-1].close || 0; s += Math.max(dh-dl, Math.abs(dh-dpc), Math.abs(dl-dpc)); } atr = (s + tr) / period; result[result.length - 1].value = atr; } continue; } - atr = (atr * (period - 1) + tr) / period; - result.push({ time: data[i].time, value: atr }); - } - return result; -} - -function _computeBollingerBands(data, period, mult, maType, offset) { - mult = mult || 2; - maType = maType || 'SMA'; - offset = offset || 0; - var maFn = maType === 'EMA' ? _computeEMA : (maType === 'WMA' ? _computeWMA : _computeSMA); - var ma = maFn(data, period); - var upper = [], lower = []; - for (var i = 0; i < data.length; i++) { - if (!ma[i].value) { upper.push({ time: data[i].time }); lower.push({ time: data[i].time }); continue; } - var sum = 0; - for (var j = i - period + 1; j <= i; j++) { - var v = data[j].close !== undefined ? data[j].close : data[j].value || 0; - sum += (v - ma[i].value) * (v - ma[i].value); - } - var std = Math.sqrt(sum / period); - upper.push({ time: data[i].time, value: ma[i].value + mult * std }); - lower.push({ time: data[i].time, value: ma[i].value - mult * std }); - } - // Apply offset (shift data points forward/backward by offset bars) - if (offset !== 0) { - ma = _tvApplyOffset(ma, offset, data); - upper = _tvApplyOffset(upper, offset, data); - lower = _tvApplyOffset(lower, offset, data); - } - return { middle: ma, upper: upper, lower: lower }; -} - -function _tvApplyOffset(series, offset, refData) { - if (!offset || !series.length) return series; - var result = []; - for (var i = 0; i < series.length; i++) { - var srcIdx = i - offset; - if (srcIdx >= 0 && srcIdx < series.length) { - result.push({ time: series[i].time, value: series[srcIdx].value }); - } else { - result.push({ time: series[i].time }); - } - } - return result; -} - -// --------------------------------------------------------------------------- -// Bollinger Bands fill rendering (LWC series primitive — auto-clipped to pane) -// --------------------------------------------------------------------------- -var _bbFillPrimitives = {}; // { chartId: { primitive, seriesId } } - -/** Draw BB band fills into a media-coordinate canvas context (called from primitive renderer). */ -function _tvDrawBBFill(chartId, ctx, mediaSize) { - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry || !entry.chart) return; - var w = mediaSize.width; - var h = mediaSize.height; - - // Find all BB groups on this chart that have fill enabled - var groups = {}; - var keys = Object.keys(_activeIndicators); - for (var i = 0; i < keys.length; i++) { - var ind = _activeIndicators[keys[i]]; - if (ind.chartId !== chartId || ind.type !== 'bollinger-bands' || !ind.group) continue; - if (!ind.showBandFill) continue; - if (!groups[ind.group]) groups[ind.group] = { upper: null, lower: null, color: ind.bandFillColor || '#2196f3', opacity: ind.bandFillOpacity !== undefined ? ind.bandFillOpacity : 100 }; - if (keys[i].indexOf('upper') >= 0) groups[ind.group].upper = keys[i]; - else if (keys[i].indexOf('lower') >= 0) groups[ind.group].lower = keys[i]; - } - - var timeScale = entry.chart.timeScale(); - - var groupKeys = Object.keys(groups); - for (var gi = 0; gi < groupKeys.length; gi++) { - var g = groups[groupKeys[gi]]; - if (!g.upper || !g.lower) continue; - var upperSeries = entry.seriesMap[g.upper]; - var lowerSeries = entry.seriesMap[g.lower]; - if (!upperSeries || !lowerSeries) continue; - - var upperData = upperSeries.data(); - var lowerData = lowerSeries.data(); - if (!upperData.length || !lowerData.length) continue; - - // Build time→value map for lower band - var lowerMap = {}; - for (var li = 0; li < lowerData.length; li++) { - if (lowerData[li].value !== undefined) { - lowerMap[String(lowerData[li].time)] = lowerData[li].value; - } - } - - // Iterate upper data, pair with lower, convert to pixel coords - var upperPts = []; - var lowerPts = []; - var margin = 20; - for (var di = 0; di < upperData.length; di++) { - var uPt = upperData[di]; - if (uPt.value === undefined) continue; - var lVal = lowerMap[String(uPt.time)]; - if (lVal === undefined) continue; - - var x = timeScale.timeToCoordinate(uPt.time); - if (x === null || x === undefined) continue; - if (x < -margin || x > w + margin) continue; - - // Use same series for both conversions to ensure consistent scaling - var yU = upperSeries.priceToCoordinate(uPt.value); - var yL = upperSeries.priceToCoordinate(lVal); - if (yU === null || yL === null) continue; - - upperPts.push({ x: x, y: yU }); - lowerPts.push({ x: x, y: yL }); - } - - if (upperPts.length < 2) continue; - - // Draw filled polygon: upper line forward, lower line backward - ctx.beginPath(); - ctx.moveTo(upperPts[0].x, upperPts[0].y); - for (var pi = 1; pi < upperPts.length; pi++) { - ctx.lineTo(upperPts[pi].x, upperPts[pi].y); - } - for (var pi2 = lowerPts.length - 1; pi2 >= 0; pi2--) { - ctx.lineTo(lowerPts[pi2].x, lowerPts[pi2].y); - } - ctx.closePath(); - - var fillColor = g.color || '#2196f3'; - var fillOp = _tvClamp(_tvToNumber(g.opacity, 100), 0, 100) / 100; - ctx.fillStyle = _tvHexToRgba(fillColor, 0.15 * fillOp); - ctx.fill(); - } -} - -function _tvEnsureBBFillPrimitive(chartId) { - if (_bbFillPrimitives[chartId]) return; - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry || !entry.chart) return; - - // Find an upper BB series to attach the primitive to - var upperSeriesId = null; - var allKeys = Object.keys(_activeIndicators); - for (var i = 0; i < allKeys.length; i++) { - var ind = _activeIndicators[allKeys[i]]; - if (ind.chartId === chartId && ind.type === 'bollinger-bands' && allKeys[i].indexOf('upper') >= 0) { - upperSeriesId = allKeys[i]; - break; - } - } - if (!upperSeriesId || !entry.seriesMap[upperSeriesId]) return; - - var _requestUpdate = null; - var theRenderer = { - draw: function(target) { - target.useMediaCoordinateSpace(function(scope) { - _tvDrawBBFill(chartId, scope.context, scope.mediaSize); - }); - } - }; - var theView = { - zOrder: function() { return 'bottom'; }, - renderer: function() { return theRenderer; } - }; - var primitive = { - attached: function(params) { _requestUpdate = params.requestUpdate; }, - detached: function() { _requestUpdate = null; }, - updateAllViews: function() {}, - paneViews: function() { return [theView]; }, - triggerUpdate: function() { if (_requestUpdate) _requestUpdate(); } - }; - - entry.seriesMap[upperSeriesId].attachPrimitive(primitive); - _bbFillPrimitives[chartId] = { primitive: primitive, seriesId: upperSeriesId }; -} - -function _tvRemoveBBFillPrimitive(chartId) { - var bp = _bbFillPrimitives[chartId]; - if (!bp) return; - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (entry && entry.seriesMap[bp.seriesId]) { - try { entry.seriesMap[bp.seriesId].detachPrimitive(bp.primitive); } catch (e) {} - } - delete _bbFillPrimitives[chartId]; -} - -function _tvUpdateBBFill(chartId) { - var bp = _bbFillPrimitives[chartId]; - if (bp && bp.primitive && bp.primitive.triggerUpdate) { - bp.primitive.triggerUpdate(); - } -} - -// --------------------------------------------------------------------------- -// Volume Profile (VPVR / VPFR — volume-by-price histogram pinned to pane edge) -// --------------------------------------------------------------------------- - -// Per-chart registry: { [indicatorId]: { primitive, seriesId, mode, bucketCount, vpData, opts } } -var _volumeProfilePrimitives = {}; - -/** positionsBox — media→bitmap pixel alignment helper. */ -function _tvPositionsBox(a, b, pixelRatio) { - var lo = Math.min(a, b); - var hi = Math.max(a, b); - var scaled = Math.round(lo * pixelRatio); - return { - position: scaled, - length: Math.max(1, Math.round(hi * pixelRatio) - scaled), - }; -} - -/** - * Bucket bars into a volume-by-price histogram with up/down split. - * - * @param {Array} bars - OHLCV bar objects with {time, open, high, low, close, volume} - * @param {number} fromIdx - inclusive start index - * @param {number} toIdx - inclusive end index - * @param {Object} opts - { rowsLayout: 'rows'|'ticks', rowSize: number, valueAreaPct, withDeveloping } - * @returns {{profile, minPrice, maxPrice, step, totalVolume, developing?}|null} - */ -function _tvComputeVolumeProfile(bars, fromIdx, toIdx, opts) { - if (!bars || !bars.length) return null; - opts = opts || {}; - var lo = Math.max(0, Math.min(fromIdx, toIdx, bars.length - 1)); - var hi = Math.min(bars.length - 1, Math.max(fromIdx, toIdx, 0)); - if (hi < lo) return null; - - var minP = Infinity, maxP = -Infinity; - for (var i = lo; i <= hi; i++) { - var b = bars[i]; - var h = b.high !== undefined ? b.high : b.close; - var l = b.low !== undefined ? b.low : b.close; - if (h === undefined || l === undefined) continue; - if (h > maxP) maxP = h; - if (l < minP) minP = l; - } - if (!isFinite(minP) || !isFinite(maxP) || maxP === minP) return null; - - // Resolve bucket count from layout option. - var rowsLayout = opts.rowsLayout || 'rows'; - var rowSize = Math.max(0.0001, Number(opts.rowSize) || 24); - var nBuckets; - if (rowsLayout === 'ticks') { - nBuckets = Math.max(2, Math.min(2000, Math.ceil((maxP - minP) / rowSize))); - } else { - nBuckets = Math.max(2, Math.floor(rowSize)); - } - var step = (maxP - minP) / nBuckets; - - var up = new Array(nBuckets), down = new Array(nBuckets); - for (var k = 0; k < nBuckets; k++) { up[k] = 0; down[k] = 0; } - - // Optional running snapshots (for Developing POC / VA). Recorded - // once per bar so the renderer can plot the running point of - // control as a step line across time. - var withDeveloping = opts.withDeveloping === true; - var valueAreaPct = opts.valueAreaPct || 0.70; - var developing = withDeveloping ? [] : null; - - var totalVol = 0; - for (var j = lo; j <= hi; j++) { - var bar = bars[j]; - var bH = bar.high !== undefined ? bar.high : bar.close; - var bL = bar.low !== undefined ? bar.low : bar.close; - var bO = bar.open !== undefined ? bar.open : bar.close; - var bC = bar.close !== undefined ? bar.close : bar.value; - var vol = bar.volume !== undefined && bar.volume !== null ? Number(bar.volume) : 0; - if (!isFinite(vol) || vol <= 0) { - if (withDeveloping) developing.push({ time: bar.time }); - continue; - } - if (bH === undefined || bL === undefined) { - if (withDeveloping) developing.push({ time: bar.time }); - continue; - } - var loIdx = Math.max(0, Math.min(nBuckets - 1, Math.floor((bL - minP) / step))); - var hiIdx = Math.max(0, Math.min(nBuckets - 1, Math.floor((bH - minP) / step))); - var span = hiIdx - loIdx + 1; - var share = vol / span; - var isUp = bC !== undefined && bC >= bO; - for (var bi = loIdx; bi <= hiIdx; bi++) { - if (isUp) up[bi] += share; else down[bi] += share; - } - totalVol += vol; - - if (withDeveloping) { - // Snapshot the running POC and Value Area edges so far. - var snap = _tvDevelopingSnapshot(up, down, totalVol, minP, step, valueAreaPct); - developing.push({ - time: bar.time, - pocPrice: snap.pocPrice, - vaHighPrice: snap.vaHighPrice, - vaLowPrice: snap.vaLowPrice, - }); - } - } - - var profile = []; - for (var p = 0; p < nBuckets; p++) { - profile.push({ - price: minP + step * (p + 0.5), - priceLo: minP + step * p, - priceHi: minP + step * (p + 1), - upVol: up[p], - downVol: down[p], - totalVol: up[p] + down[p], - }); - } - - return { - profile: profile, - minPrice: minP, - maxPrice: maxP, - step: step, - totalVolume: totalVol, - developing: developing, - }; -} - -/** Per-bar snapshot of the running POC + value-area edges. */ -function _tvDevelopingSnapshot(up, down, totalVol, minP, step, vaPct) { - var n = up.length; - var pocIdx = 0; - var pocVol = up[0] + down[0]; - for (var i = 1; i < n; i++) { - var t = up[i] + down[i]; - if (t > pocVol) { pocVol = t; pocIdx = i; } - } - if (pocVol === 0) return { pocPrice: undefined, vaHighPrice: undefined, vaLowPrice: undefined }; - - var target = totalVol * (vaPct || 0.70); - var accumulated = pocVol; - var loIdx = pocIdx, hiIdx = pocIdx; - while (accumulated < target && (loIdx > 0 || hiIdx < n - 1)) { - var nextLow = loIdx > 0 ? (up[loIdx - 1] + down[loIdx - 1]) : -1; - var nextHigh = hiIdx < n - 1 ? (up[hiIdx + 1] + down[hiIdx + 1]) : -1; - if (nextLow < 0 && nextHigh < 0) break; - if (nextHigh >= nextLow) { - hiIdx += 1; - accumulated += up[hiIdx] + down[hiIdx]; - } else { - loIdx -= 1; - accumulated += up[loIdx] + down[loIdx]; - } - } - return { - pocPrice: minP + step * (pocIdx + 0.5), - vaHighPrice: minP + step * (hiIdx + 1), - vaLowPrice: minP + step * loIdx, - }; -} - -/** Compute the Point of Control (POC) and Value Area for a profile. */ -function _tvComputePOCAndValueArea(profile, totalVolume, valueAreaPct) { - if (!profile || !profile.length) return null; - var pocIdx = 0; - for (var i = 1; i < profile.length; i++) { - if (profile[i].totalVol > profile[pocIdx].totalVol) pocIdx = i; - } - var target = totalVolume * (valueAreaPct || 0.70); - var accumulated = profile[pocIdx].totalVol; - var loIdx = pocIdx, hiIdx = pocIdx; - while (accumulated < target && (loIdx > 0 || hiIdx < profile.length - 1)) { - var nextLow = loIdx > 0 ? profile[loIdx - 1].totalVol : -1; - var nextHigh = hiIdx < profile.length - 1 ? profile[hiIdx + 1].totalVol : -1; - if (nextLow < 0 && nextHigh < 0) break; - if (nextHigh >= nextLow) { - hiIdx += 1; - accumulated += profile[hiIdx].totalVol; - } else { - loIdx -= 1; - accumulated += profile[loIdx].totalVol; - } - } - return { pocIdx: pocIdx, vaLowIdx: loIdx, vaHighIdx: hiIdx }; -} - -/** - * Build an ISeriesPrimitive that renders the volume profile as horizontal - * rows pinned to one side of the price pane. Each row is a horizontal - * bar at a price bucket, split into up-volume (teal) and down-volume - * (pink), with a POC line and translucent value-area band overlay. - */ -function _tvMakeVolumeProfilePrimitive(chartId, seriesId, getData, getOpts, getHidden) { - var _requestUpdate = null; - - function draw(scope) { - if (getHidden && getHidden()) return; - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry || !entry.chart) return; - var series = entry.seriesMap[seriesId]; - if (!series) return; - var vp = getData(); - if (!vp || !vp.profile || !vp.profile.length) return; - var opts = (getOpts && getOpts()) || {}; - - var ctx = scope.context; - // bitmapSize is ALREADY in bitmap pixels (= mediaSize * pixelRatio). - // priceToCoordinate returns MEDIA pixels — convert with vpr. - var paneW = scope.bitmapSize.width; - var hpr = scope.horizontalPixelRatio; - var vpr = scope.verticalPixelRatio; - - var widthPct = Math.max(2, Math.min(60, opts.widthPercent || 15)); - var placement = opts.placement === 'left' ? 'left' : 'right'; - var volumeMode = opts.volumeMode || 'updown'; // 'updown' | 'total' | 'delta' - var upColor = opts.upColor || _cssVar('--pywry-tvchart-vp-up'); - var downColor = opts.downColor || _cssVar('--pywry-tvchart-vp-down'); - var vaUpColor = opts.vaUpColor || _cssVar('--pywry-tvchart-vp-va-up'); - var vaDownColor = opts.vaDownColor || _cssVar('--pywry-tvchart-vp-va-down'); - var pocColor = opts.pocColor || _cssVar('--pywry-tvchart-vp-poc'); - var devPocColor = opts.developingPOCColor || _cssVar('--pywry-tvchart-ind-tertiary'); - var devVAColor = opts.developingVAColor || _cssVar('--pywry-tvchart-vp-va-up'); - var showPOC = opts.showPOC !== false; - var showVA = opts.showValueArea !== false; - var showDevPOC = opts.showDevelopingPOC === true; - var showDevVA = opts.showDevelopingVA === true; - var valueAreaPct = opts.valueAreaPct || 0.70; - - // For Delta mode the displayed magnitude is |upVol - downVol|. - // Otherwise it's the total bucket volume. - function bucketMagnitude(row) { - return volumeMode === 'delta' ? Math.abs(row.upVol - row.downVol) : row.totalVol; - } - var maxVol = 0; - for (var i = 0; i < vp.profile.length; i++) { - var m = bucketMagnitude(vp.profile[i]); - if (m > maxVol) maxVol = m; - } - if (maxVol <= 0) return; - - var poc = _tvComputePOCAndValueArea(vp.profile, vp.totalVolume, valueAreaPct); - - var maxBarBitmap = paneW * (widthPct / 100); - - // Row height: derive from bucket spacing (priceToCoordinate is media px). - var y0 = series.priceToCoordinate(vp.profile[0].price); - var y1 = vp.profile.length > 1 ? series.priceToCoordinate(vp.profile[1].price) : null; - if (y0 === null) return; - var pxPerBucket = (y1 !== null) ? Math.abs(y0 - y1) : 4; - var rowHalfBitmap = Math.max(1, (pxPerBucket * vpr) / 2 - 1); - var rowHeight = Math.max(1, rowHalfBitmap * 2 - 2); - - function drawSegment(x, w, color, yTop) { - if (w <= 0) return; - ctx.fillStyle = color; - ctx.fillRect(x, yTop, w, rowHeight); - } - - for (var r = 0; r < vp.profile.length; r++) { - var row = vp.profile[r]; - if (row.totalVol <= 0) continue; - var y = series.priceToCoordinate(row.price); - if (y === null) continue; - - var yBitmap = y * vpr; - var yTop = yBitmap - rowHalfBitmap; - var inValueArea = poc && r >= poc.vaLowIdx && r <= poc.vaHighIdx; - var curUp = inValueArea && showVA ? vaUpColor : upColor; - var curDown = inValueArea && showVA ? vaDownColor : downColor; - - var barLenBitmap = maxBarBitmap * (bucketMagnitude(row) / maxVol); - - if (volumeMode === 'updown') { - var upRatio = row.upVol / row.totalVol; - var upLen = barLenBitmap * upRatio; - var downLen = barLenBitmap - upLen; - if (placement === 'right') { - drawSegment(paneW - upLen, upLen, curUp, yTop); - drawSegment(paneW - upLen - downLen, downLen, curDown, yTop); - } else { - drawSegment(0, upLen, curUp, yTop); - drawSegment(upLen, downLen, curDown, yTop); - } - } else if (volumeMode === 'delta') { - // Delta = upVol - downVol. Positive bars use the up colour - // (extending inward from the edge); negative use down. - var net = row.upVol - row.downVol; - var col = net >= 0 ? curUp : curDown; - if (placement === 'right') { - drawSegment(paneW - barLenBitmap, barLenBitmap, col, yTop); - } else { - drawSegment(0, barLenBitmap, col, yTop); - } - } else { - // Total: single bar coloured by net direction (up bias = up colour). - var totalCol = row.upVol >= row.downVol ? curUp : curDown; - if (placement === 'right') { - drawSegment(paneW - barLenBitmap, barLenBitmap, totalCol, yTop); - } else { - drawSegment(0, barLenBitmap, totalCol, yTop); - } - } - } - - if (showPOC && poc) { - var pocPrice = vp.profile[poc.pocIdx].price; - var pocY = series.priceToCoordinate(pocPrice); - if (pocY !== null) { - ctx.save(); - ctx.strokeStyle = pocColor; - ctx.lineWidth = Math.max(1, Math.round(vpr)); - ctx.setLineDash([4 * hpr, 3 * hpr]); - ctx.beginPath(); - ctx.moveTo(0, pocY * vpr); - ctx.lineTo(paneW, pocY * vpr); - ctx.stroke(); - ctx.restore(); - } - } - - // Developing POC / VA: step-line plots across time, computed - // bar-by-bar in _tvComputeVolumeProfile when withDeveloping=true. - if ((showDevPOC || showDevVA) && Array.isArray(vp.developing) && vp.developing.length > 0) { - var timeScale = entry.chart.timeScale(); - function plotDevLine(field, color) { - ctx.save(); - ctx.strokeStyle = color; - ctx.lineWidth = Math.max(1, Math.round(vpr)); - ctx.beginPath(); - var moved = false; - for (var di = 0; di < vp.developing.length; di++) { - var p = vp.developing[di]; - var px = p[field]; - if (px === undefined) { moved = false; continue; } - var dx = timeScale.timeToCoordinate(p.time); - var dy = series.priceToCoordinate(px); - if (dx === null || dy === null) { moved = false; continue; } - var dxB = dx * hpr; - var dyB = dy * vpr; - if (!moved) { ctx.moveTo(dxB, dyB); moved = true; } - else { ctx.lineTo(dxB, dyB); } - } - ctx.stroke(); - ctx.restore(); - } - if (showDevPOC) plotDevLine('pocPrice', devPocColor); - if (showDevVA) { - plotDevLine('vaHighPrice', devVAColor); - plotDevLine('vaLowPrice', devVAColor); - } - } - } - - var renderer = { - draw: function(target) { - target.useBitmapCoordinateSpace(draw); - }, - }; - - var paneView = { - zOrder: function() { return 'top'; }, - renderer: function() { return renderer; }, - update: function() {}, - }; - - return { - attached: function(params) { - _requestUpdate = params.requestUpdate; - // Kick the first paint — without this the primitive only renders - // on the next user interaction (pan/zoom/resize). - if (_requestUpdate) _requestUpdate(); - }, - detached: function() { _requestUpdate = null; }, - updateAllViews: function() {}, - paneViews: function() { return [paneView]; }, - triggerUpdate: function() { if (_requestUpdate) _requestUpdate(); }, - }; -} - -/** Format a volume number for the legend (1.23M / 4.56K / 789). */ -function _tvFormatVolume(v) { - var n = Number(v) || 0; - var sign = n < 0 ? '-' : ''; - var a = Math.abs(n); - if (a >= 1e9) return sign + (a / 1e9).toFixed(2) + 'B'; - if (a >= 1e6) return sign + (a / 1e6).toFixed(2) + 'M'; - if (a >= 1e3) return sign + (a / 1e3).toFixed(2) + 'K'; - return sign + a.toFixed(0); -} - -/** Sum up, down, and total volume across a VP profile for the legend readout. */ -function _tvVolumeProfileTotals(vp) { - var totals = { up: 0, down: 0, total: 0 }; - if (!vp || !vp.profile) return totals; - for (var i = 0; i < vp.profile.length; i++) { - totals.up += vp.profile[i].upVol || 0; - totals.down += vp.profile[i].downVol || 0; - } - totals.total = totals.up + totals.down; - return totals; -} - -/** Update the legend value span for a VP indicator with current totals. */ -function _tvUpdateVolumeProfileLegendValues(seriesId) { - var slot = _volumeProfilePrimitives[seriesId]; - if (!slot) return; - var el = document.getElementById('tvchart-ind-val-' + seriesId); - if (!el) return; - var t = _tvVolumeProfileTotals(slot.vpData); - el.textContent = _tvFormatVolume(t.up) + ' ' - + _tvFormatVolume(t.down) + ' ' - + _tvFormatVolume(t.total); -} - -/** - * Live-preview helper for the VP settings dialog: every Inputs/Style - * row callback funnels through here so changes paint instantly without - * waiting for the OK button. Recomputes the bucket profile when a - * compute-affecting field changed (rows layout, row size, value area, - * developing toggles). Cheap when only colours / placement / width - * change — just updates the opts dict and triggers a redraw. - */ -function _tvApplyVPDraftLive(seriesId, draft) { - var slot = _volumeProfilePrimitives[seriesId]; - var info = _activeIndicators[seriesId]; - if (!slot || !info) return; - var entry = window.__PYWRY_TVCHARTS__[info.chartId]; - if (!entry) return; - var prevOpts = slot.opts || {}; - var newRowsLayout = draft.vpRowsLayout || slot.rowsLayout || 'rows'; - var newRowSize = draft.vpRowSize != null ? Number(draft.vpRowSize) : slot.rowSize; - var newVolumeMode = draft.vpVolumeMode || slot.volumeMode || 'updown'; - var newValueAreaPct = draft.vpValueAreaPct != null - ? draft.vpValueAreaPct / 100 - : (prevOpts.valueAreaPct || 0.70); - var newShowDevPOC = draft.vpShowDevelopingPOC === true; - var newShowDevVA = draft.vpShowDevelopingVA === true; - - slot.opts = { - rowsLayout: newRowsLayout, - rowSize: newRowSize, - volumeMode: newVolumeMode, - widthPercent: draft.vpWidthPercent != null ? Number(draft.vpWidthPercent) : prevOpts.widthPercent, - placement: draft.vpPlacement || prevOpts.placement || 'right', - upColor: draft.vpUpColor || prevOpts.upColor, - downColor: draft.vpDownColor || prevOpts.downColor, - vaUpColor: draft.vpVAUpColor || prevOpts.vaUpColor, - vaDownColor: draft.vpVADownColor || prevOpts.vaDownColor, - pocColor: draft.vpPOCColor || prevOpts.pocColor, - developingPOCColor: draft.vpDevelopingPOCColor || prevOpts.developingPOCColor, - developingVAColor: draft.vpDevelopingVAColor || prevOpts.developingVAColor, - showPOC: draft.vpShowPOC !== undefined ? draft.vpShowPOC : prevOpts.showPOC, - showValueArea: draft.vpShowValueArea !== undefined ? draft.vpShowValueArea : prevOpts.showValueArea, - showDevelopingPOC: newShowDevPOC, - showDevelopingVA: newShowDevVA, - valueAreaPct: newValueAreaPct, - }; - - var needsRecompute = newRowsLayout !== slot.rowsLayout - || newRowSize !== slot.rowSize - || newValueAreaPct !== (prevOpts.valueAreaPct || 0.70) - || newShowDevPOC !== (prevOpts.showDevelopingPOC === true) - || newShowDevVA !== (prevOpts.showDevelopingVA === true); - if (needsRecompute) { - slot.rowsLayout = newRowsLayout; - slot.rowSize = newRowSize; - var rawData = _tvSeriesRawData(entry, info.sourceSeriesId || 'main'); - var fromIdx = info.fromIndex != null ? info.fromIndex : 0; - var toIdx = info.toIndex != null ? info.toIndex : (rawData.length - 1); - var newVp = _tvComputeVolumeProfile(rawData, fromIdx, toIdx, { - rowsLayout: newRowsLayout, - rowSize: newRowSize, - valueAreaPct: newValueAreaPct, - withDeveloping: newShowDevPOC || newShowDevVA, - }); - if (newVp) slot.vpData = newVp; - } - slot.volumeMode = newVolumeMode; - - info.rowsLayout = newRowsLayout; - info.rowSize = newRowSize; - info.volumeMode = newVolumeMode; - info.valueAreaPct = newValueAreaPct; - info.placement = slot.opts.placement; - info.widthPercent = slot.opts.widthPercent; - info.upColor = slot.opts.upColor; - info.downColor = slot.opts.downColor; - info.vaUpColor = slot.opts.vaUpColor; - info.vaDownColor = slot.opts.vaDownColor; - info.pocColor = slot.opts.pocColor; - info.developingPOCColor = slot.opts.developingPOCColor; - info.developingVAColor = slot.opts.developingVAColor; - info.showPOC = slot.opts.showPOC; - info.showValueArea = slot.opts.showValueArea; - info.showDevelopingPOC = newShowDevPOC; - info.showDevelopingVA = newShowDevVA; - info.period = newRowsLayout === 'rows' ? newRowSize : 0; - - if (slot.primitive && slot.primitive.triggerUpdate) slot.primitive.triggerUpdate(); - _tvUpdateVolumeProfileLegendValues(seriesId); - _tvRebuildIndicatorLegend(info.chartId); -} - -/** Remove a volume-profile primitive by indicator id. */ -function _tvRemoveVolumeProfilePrimitive(indicatorId) { - var slot = _volumeProfilePrimitives[indicatorId]; - if (!slot) return; - var entry = window.__PYWRY_TVCHARTS__[slot.chartId]; - if (entry && entry.seriesMap[slot.seriesId] && slot.primitive) { - try { entry.seriesMap[slot.seriesId].detachPrimitive(slot.primitive); } catch (e) {} - } - delete _volumeProfilePrimitives[indicatorId]; -} - -/** Recompute all visible-range volume profiles on the given chart. */ -function _tvRefreshVisibleVolumeProfiles(chartId) { - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry || !entry.chart) return; - var timeScale = entry.chart.timeScale(); - var range = typeof timeScale.getVisibleLogicalRange === 'function' - ? timeScale.getVisibleLogicalRange() - : null; - var ids = Object.keys(_volumeProfilePrimitives); - for (var i = 0; i < ids.length; i++) { - var slot = _volumeProfilePrimitives[ids[i]]; - if (!slot || slot.chartId !== chartId || slot.mode !== 'visible') continue; - var ai = _activeIndicators[ids[i]]; - if (!ai) continue; - var bars = _tvSeriesRawData(entry, ai.sourceSeriesId || 'main'); - if (!bars || !bars.length) continue; - var fromIdx, toIdx; - if (range) { - fromIdx = Math.max(0, Math.floor(range.from)); - toIdx = Math.min(bars.length - 1, Math.ceil(range.to)); - } else { - fromIdx = 0; - toIdx = bars.length - 1; - } - var vp = _tvComputeVolumeProfile(bars, fromIdx, toIdx, { - rowsLayout: slot.rowsLayout || 'rows', - rowSize: slot.rowSize || ai.rowSize || 24, - valueAreaPct: (slot.opts && slot.opts.valueAreaPct) || 0.70, - withDeveloping: (slot.opts && (slot.opts.showDevelopingPOC || slot.opts.showDevelopingVA)) === true, - }); - if (!vp) continue; - slot.vpData = vp; - ai.fromIndex = fromIdx; - ai.toIndex = toIdx; - if (slot.primitive && slot.primitive.triggerUpdate) slot.primitive.triggerUpdate(); - _tvUpdateVolumeProfileLegendValues(ids[i]); - } -} - -function _computeVWAP(data) { - var result = []; - var cumVol = 0, cumTP = 0; - for (var i = 0; i < data.length; i++) { - var h = data[i].high || data[i].close || data[i].value || 0; - var l = data[i].low || data[i].close || data[i].value || 0; - var c = data[i].close !== undefined ? data[i].close : data[i].value || 0; - var v = data[i].volume || 1; - var tp = (h + l + c) / 3; - cumTP += tp * v; - cumVol += v; - result.push({ time: data[i].time, value: cumVol > 0 ? cumTP / cumVol : tp }); - } - return result; -} - -// --------------------------------------------------------------------------- -// Additional built-in indicators (textbook formulas) -// --------------------------------------------------------------------------- - -/** Volume-Weighted Moving Average: sum(close*vol) / sum(vol) over a window. */ -function _computeVWMA(data, period) { - var result = []; - for (var i = 0; i < data.length; i++) { - if (i < period - 1) { result.push({ time: data[i].time }); continue; } - var numer = 0, denom = 0; - for (var j = i - period + 1; j <= i; j++) { - var c = data[j].close !== undefined ? data[j].close : data[j].value || 0; - var v = data[j].volume || 0; - numer += c * v; - denom += v; - } - result.push({ time: data[i].time, value: denom > 0 ? numer / denom : undefined }); - } - return result; -} - -/** Hull Moving Average: WMA(2 * WMA(src, n/2) - WMA(src, n), sqrt(n)). */ -function _computeHMA(data, period) { - var half = Math.max(1, Math.floor(period / 2)); - var sqrtN = Math.max(1, Math.floor(Math.sqrt(period))); - var wmaHalf = _computeWMA(data, half); - var wmaFull = _computeWMA(data, period); - var diff = []; - for (var i = 0; i < data.length; i++) { - var a = wmaHalf[i].value; - var b = wmaFull[i].value; - diff.push({ - time: data[i].time, - value: (a !== undefined && b !== undefined) ? (2 * a - b) : undefined, - }); - } - return _computeWMA(diff, sqrtN, 'value'); -} - -/** Commodity Channel Index: (TP - SMA(TP, n)) / (0.015 * meanDev(TP, n)). */ -function _computeCCI(data, period) { - var tp = []; - for (var i = 0; i < data.length; i++) { - var h = data[i].high !== undefined ? data[i].high : data[i].close; - var l = data[i].low !== undefined ? data[i].low : data[i].close; - var c = data[i].close !== undefined ? data[i].close : data[i].value || 0; - tp.push({ time: data[i].time, value: (h + l + c) / 3 }); - } - var sma = _computeSMA(tp, period, 'value'); - var result = []; - for (var k = 0; k < tp.length; k++) { - if (k < period - 1 || sma[k].value === undefined) { - result.push({ time: tp[k].time }); - continue; - } - var mean = sma[k].value; - var dev = 0; - for (var j = k - period + 1; j <= k; j++) { - dev += Math.abs(tp[j].value - mean); - } - dev /= period; - result.push({ - time: tp[k].time, - value: dev > 0 ? (tp[k].value - mean) / (0.015 * dev) : 0, - }); - } - return result; -} - -/** Williams %R: -100 * (highestHigh - close) / (highestHigh - lowestLow). */ -function _computeWilliamsR(data, period) { - var result = []; - for (var i = 0; i < data.length; i++) { - if (i < period - 1) { result.push({ time: data[i].time }); continue; } - var hh = -Infinity, ll = Infinity; - for (var j = i - period + 1; j <= i; j++) { - var h = data[j].high !== undefined ? data[j].high : data[j].close; - var l = data[j].low !== undefined ? data[j].low : data[j].close; - if (h > hh) hh = h; - if (l < ll) ll = l; - } - var c = data[i].close !== undefined ? data[i].close : data[i].value || 0; - var range = hh - ll; - result.push({ - time: data[i].time, - value: range > 0 ? -100 * (hh - c) / range : 0, - }); - } - return result; -} - -/** Stochastic Oscillator %K and %D. */ -function _computeStochastic(data, kPeriod, dPeriod) { - var kRaw = []; - for (var i = 0; i < data.length; i++) { - if (i < kPeriod - 1) { kRaw.push({ time: data[i].time }); continue; } - var hh = -Infinity, ll = Infinity; - for (var j = i - kPeriod + 1; j <= i; j++) { - var h = data[j].high !== undefined ? data[j].high : data[j].close; - var l = data[j].low !== undefined ? data[j].low : data[j].close; - if (h > hh) hh = h; - if (l < ll) ll = l; - } - var c = data[i].close !== undefined ? data[i].close : data[i].value || 0; - var range = hh - ll; - kRaw.push({ time: data[i].time, value: range > 0 ? 100 * (c - ll) / range : 50 }); - } - var d = _computeSMA(kRaw, dPeriod, 'value'); - return { k: kRaw, d: d }; -} - -/** Aroon Up and Down: 100 * (period - barsSince {high|low}) / period. */ -function _computeAroon(data, period) { - var up = [], down = []; - for (var i = 0; i < data.length; i++) { - if (i < period) { - up.push({ time: data[i].time }); - down.push({ time: data[i].time }); - continue; - } - var hh = -Infinity, ll = Infinity; - var hIdx = i, lIdx = i; - for (var j = i - period; j <= i; j++) { - var h = data[j].high !== undefined ? data[j].high : data[j].close; - var l = data[j].low !== undefined ? data[j].low : data[j].close; - if (h >= hh) { hh = h; hIdx = j; } - if (l <= ll) { ll = l; lIdx = j; } - } - up.push({ time: data[i].time, value: 100 * (period - (i - hIdx)) / period }); - down.push({ time: data[i].time, value: 100 * (period - (i - lIdx)) / period }); - } - return { up: up, down: down }; -} - -/** Average Directional Index (ADX) with +DI and -DI. Wilder smoothing. */ -function _computeADX(data, period) { - var plusDM = [], minusDM = [], tr = []; - for (var i = 0; i < data.length; i++) { - if (i === 0) { plusDM.push(0); minusDM.push(0); tr.push(0); continue; } - var h = data[i].high !== undefined ? data[i].high : data[i].close; - var l = data[i].low !== undefined ? data[i].low : data[i].close; - var pH = data[i - 1].high !== undefined ? data[i - 1].high : data[i - 1].close; - var pL = data[i - 1].low !== undefined ? data[i - 1].low : data[i - 1].close; - var pC = data[i - 1].close !== undefined ? data[i - 1].close : data[i - 1].value || 0; - var upMove = h - pH; - var downMove = pL - l; - plusDM.push(upMove > downMove && upMove > 0 ? upMove : 0); - minusDM.push(downMove > upMove && downMove > 0 ? downMove : 0); - tr.push(Math.max(h - l, Math.abs(h - pC), Math.abs(l - pC))); - } - - // Wilder smoothing (same formula as RMA / ATR's recursive smoothing) - function wilder(arr) { - var out = new Array(arr.length); - var sum = 0; - for (var i = 0; i < arr.length; i++) { - if (i < period) { sum += arr[i]; out[i] = undefined; if (i === period - 1) out[i] = sum; continue; } - out[i] = out[i - 1] - out[i - 1] / period + arr[i]; - } - return out; - } - - var trS = wilder(tr); - var plusS = wilder(plusDM); - var minusS = wilder(minusDM); - - var plusDI = [], minusDI = [], dx = []; - for (var k = 0; k < data.length; k++) { - if (trS[k] === undefined || trS[k] === 0) { - plusDI.push({ time: data[k].time }); - minusDI.push({ time: data[k].time }); - dx.push(undefined); - continue; - } - var pdi = 100 * plusS[k] / trS[k]; - var mdi = 100 * minusS[k] / trS[k]; - plusDI.push({ time: data[k].time, value: pdi }); - minusDI.push({ time: data[k].time, value: mdi }); - dx.push(pdi + mdi > 0 ? 100 * Math.abs(pdi - mdi) / (pdi + mdi) : 0); - } - - // ADX = Wilder smoothing of DX, starting once we have `period` valid DX values - var adx = []; - var adxVal = null; - var dxSum = 0, dxCount = 0, dxStart = -1; - for (var m = 0; m < data.length; m++) { - if (dx[m] === undefined) { adx.push({ time: data[m].time }); continue; } - if (dxStart < 0) dxStart = m; - if (m - dxStart < period) { - dxSum += dx[m]; - dxCount += 1; - if (dxCount === period) { - adxVal = dxSum / period; - adx.push({ time: data[m].time, value: adxVal }); - } else { - adx.push({ time: data[m].time }); - } - } else { - adxVal = (adxVal * (period - 1) + dx[m]) / period; - adx.push({ time: data[m].time, value: adxVal }); - } - } - - return { adx: adx, plusDI: plusDI, minusDI: minusDI }; -} - -/** MACD: EMA(fast) - EMA(slow), signal EMA of MACD, histogram = MACD - signal. */ -function _computeMACD(data, fast, slow, signal) { - var emaFast = _computeEMA(data, fast); - var emaSlow = _computeEMA(data, slow); - var macd = []; - for (var i = 0; i < data.length; i++) { - var f = emaFast[i].value; - var s = emaSlow[i].value; - macd.push({ - time: data[i].time, - value: (f !== undefined && s !== undefined) ? f - s : undefined, - }); - } - var sig = _computeEMA(macd, signal, 'value'); - var hist = []; - for (var k = 0; k < data.length; k++) { - var mv = macd[k].value; - var sv = sig[k].value; - hist.push({ - time: data[k].time, - value: (mv !== undefined && sv !== undefined) ? mv - sv : undefined, - }); - } - return { macd: macd, signal: sig, histogram: hist }; -} - -/** Accumulation/Distribution: cumulative CLV * volume. */ -function _computeAccumulationDistribution(data) { - var out = []; - var ad = 0; - for (var i = 0; i < data.length; i++) { - var h = data[i].high !== undefined ? data[i].high : data[i].close; - var l = data[i].low !== undefined ? data[i].low : data[i].close; - var c = data[i].close !== undefined ? data[i].close : data[i].value || 0; - var v = data[i].volume || 0; - var range = h - l; - var clv = range > 0 ? ((c - l) - (h - c)) / range : 0; - ad += clv * v; - out.push({ time: data[i].time, value: ad }); - } - return out; -} - -/** Historical Volatility: stdev of log returns * sqrt(annualizationFactor) * 100. */ -function _computeHistoricalVolatility(data, period, annualization) { - var ann = annualization || 252; - var returns = []; - for (var i = 0; i < data.length; i++) { - if (i === 0) { returns.push({ time: data[i].time, value: undefined }); continue; } - var pC = data[i - 1].close !== undefined ? data[i - 1].close : data[i - 1].value || 0; - var c = data[i].close !== undefined ? data[i].close : data[i].value || 0; - if (pC > 0 && c > 0) { - returns.push({ time: data[i].time, value: Math.log(c / pC) }); - } else { - returns.push({ time: data[i].time, value: undefined }); - } - } - var out = []; - for (var k = 0; k < data.length; k++) { - if (k < period) { out.push({ time: data[k].time }); continue; } - var sum = 0, count = 0; - for (var j = k - period + 1; j <= k; j++) { - if (returns[j].value !== undefined) { sum += returns[j].value; count += 1; } - } - if (count === 0) { out.push({ time: data[k].time }); continue; } - var mean = sum / count; - var sq = 0; - for (var jj = k - period + 1; jj <= k; jj++) { - if (returns[jj].value !== undefined) sq += (returns[jj].value - mean) * (returns[jj].value - mean); - } - var stdev = Math.sqrt(sq / count); - out.push({ time: data[k].time, value: stdev * Math.sqrt(ann) * 100 }); - } - return out; -} - -/** Keltner Channels: EMA(n) ± multiplier * ATR(n). */ -function _computeKeltnerChannels(data, period, multiplier, maType) { - multiplier = multiplier || 2; - maType = maType || 'EMA'; - var maFn = maType === 'SMA' ? _computeSMA : (maType === 'WMA' ? _computeWMA : _computeEMA); - var mid = maFn(data, period); - var atr = _computeATR(data, period); - var upper = [], lower = []; - for (var i = 0; i < data.length; i++) { - var m = mid[i].value; - var a = atr[i].value; - if (m === undefined || a === undefined) { - upper.push({ time: data[i].time }); - lower.push({ time: data[i].time }); - continue; - } - upper.push({ time: data[i].time, value: m + multiplier * a }); - lower.push({ time: data[i].time, value: m - multiplier * a }); - } - return { middle: mid, upper: upper, lower: lower }; -} - -/** Ichimoku Cloud: five lines (Tenkan, Kijun, Span A, Span B, Chikou). */ -function _computeIchimoku(data, tenkanP, kijunP, senkouBP) { - function highestHigh(lo, hi) { - var best = -Infinity; - for (var i = lo; i <= hi; i++) { - var h = data[i].high !== undefined ? data[i].high : data[i].close; - if (h > best) best = h; - } - return best; - } - function lowestLow(lo, hi) { - var best = Infinity; - for (var i = lo; i <= hi; i++) { - var l = data[i].low !== undefined ? data[i].low : data[i].close; - if (l < best) best = l; - } - return best; - } - - var tenkan = [], kijun = []; - for (var i = 0; i < data.length; i++) { - if (i >= tenkanP - 1) { - tenkan.push({ time: data[i].time, value: (highestHigh(i - tenkanP + 1, i) + lowestLow(i - tenkanP + 1, i)) / 2 }); - } else { - tenkan.push({ time: data[i].time }); - } - if (i >= kijunP - 1) { - kijun.push({ time: data[i].time, value: (highestHigh(i - kijunP + 1, i) + lowestLow(i - kijunP + 1, i)) / 2 }); - } else { - kijun.push({ time: data[i].time }); - } - } - - // Senkou Span A/B are shifted FORWARD by kijunP bars — we skip the - // forward-plotted values because LWC can't extrapolate times; instead - // we attach the span at the bar where its inputs are known. For the - // textbook shift, callers can pass their own time index. - var spanA = [], spanB = []; - for (var k = 0; k < data.length; k++) { - if (tenkan[k].value !== undefined && kijun[k].value !== undefined) { - spanA.push({ time: data[k].time, value: (tenkan[k].value + kijun[k].value) / 2 }); - } else { - spanA.push({ time: data[k].time }); - } - if (k >= senkouBP - 1) { - spanB.push({ time: data[k].time, value: (highestHigh(k - senkouBP + 1, k) + lowestLow(k - senkouBP + 1, k)) / 2 }); - } else { - spanB.push({ time: data[k].time }); - } - } - - // Chikou Span = close shifted BACKWARD by kijunP bars — attach each - // close to the bar kijunP ahead is impossible without future times; - // instead map close[i] onto time[i - kijunP] so it plots in the past. - var chikou = []; - for (var m = 0; m < data.length; m++) { - var src = m + kijunP; - if (src < data.length) { - var c = data[src].close !== undefined ? data[src].close : data[src].value || 0; - chikou.push({ time: data[m].time, value: c }); - } else { - chikou.push({ time: data[m].time }); - } - } - - return { tenkan: tenkan, kijun: kijun, spanA: spanA, spanB: spanB, chikou: chikou }; -} - -/** Parabolic SAR: trailing stop flipped when price crosses, with acceleration. */ -function _computeParabolicSAR(data, step, maxStep) { - step = step || 0.02; - maxStep = maxStep || 0.2; - if (data.length < 2) return data.map(function(d) { return { time: d.time }; }); - - var out = []; - var uptrend = true; - var af = step; - var ep = data[0].high !== undefined ? data[0].high : data[0].close; - var sar = data[0].low !== undefined ? data[0].low : data[0].close; - - out.push({ time: data[0].time }); // undefined — need 2 bars to seed - - // Decide initial trend from first two bars - var c0 = data[0].close !== undefined ? data[0].close : data[0].value || 0; - var c1 = data[1].close !== undefined ? data[1].close : data[1].value || 0; - uptrend = c1 >= c0; - if (uptrend) { - sar = data[0].low !== undefined ? data[0].low : c0; - ep = data[1].high !== undefined ? data[1].high : c1; - } else { - sar = data[0].high !== undefined ? data[0].high : c0; - ep = data[1].low !== undefined ? data[1].low : c1; - } - out.push({ time: data[1].time, value: sar }); - - for (var i = 2; i < data.length; i++) { - var h = data[i].high !== undefined ? data[i].high : data[i].close; - var l = data[i].low !== undefined ? data[i].low : data[i].close; - var prevHigh = data[i - 1].high !== undefined ? data[i - 1].high : data[i - 1].close; - var prevLow = data[i - 1].low !== undefined ? data[i - 1].low : data[i - 1].close; - - sar = sar + af * (ep - sar); - - if (uptrend) { - // SAR can't exceed prior two lows - sar = Math.min(sar, prevLow, data[i - 2].low !== undefined ? data[i - 2].low : data[i - 2].close); - if (l < sar) { - // Flip to downtrend - uptrend = false; - sar = ep; - ep = l; - af = step; - } else { - if (h > ep) { - ep = h; - af = Math.min(af + step, maxStep); - } - } - } else { - sar = Math.max(sar, prevHigh, data[i - 2].high !== undefined ? data[i - 2].high : data[i - 2].close); - if (h > sar) { - uptrend = true; - sar = ep; - ep = h; - af = step; - } else { - if (l < ep) { - ep = l; - af = Math.min(af + step, maxStep); - } - } - } - out.push({ time: data[i].time, value: sar }); - } - return out; -} - -function _tvIndicatorValue(point, source) { - var src = source || 'close'; - if (src === 'hl2') { - var h2 = point.high !== undefined ? point.high : (point.value || 0); - var l2 = point.low !== undefined ? point.low : (point.value || 0); - return (h2 + l2) / 2; - } - if (src === 'ohlc4') { - var o4 = point.open !== undefined ? point.open : (point.value || 0); - var h4 = point.high !== undefined ? point.high : (point.value || 0); - var l4 = point.low !== undefined ? point.low : (point.value || 0); - var c4 = point.close !== undefined ? point.close : (point.value || 0); - return (o4 + h4 + l4 + c4) / 4; - } - if (src === 'hlc3') { - var h3 = point.high !== undefined ? point.high : (point.value || 0); - var l3 = point.low !== undefined ? point.low : (point.value || 0); - var c3 = point.close !== undefined ? point.close : (point.value || 0); - return (h3 + l3 + c3) / 3; - } - if (point[src] !== undefined) return point[src]; - if (point.close !== undefined) return point.close; - if (point.value !== undefined) return point.value; - return 0; -} - -function _tvShiftIndicatorData(data, offsetBars) { - var offset = Number(offsetBars || 0); - if (!offset) return data; - var out = []; - for (var i = 0; i < data.length; i++) { - var srcIdx = i - offset; - if (srcIdx >= 0 && srcIdx < data.length && data[srcIdx].value !== undefined) { - out.push({ time: data[i].time, value: data[srcIdx].value }); - } else { - out.push({ time: data[i].time }); - } - } - return out; -} - -function _tvComputeAveragePrice(data) { - var out = []; - for (var i = 0; i < data.length; i++) { - var p = data[i] || {}; - var sum = 0; - var count = 0; - if (p.open !== undefined) { sum += p.open; count++; } - if (p.high !== undefined) { sum += p.high; count++; } - if (p.low !== undefined) { sum += p.low; count++; } - if (p.close !== undefined) { sum += p.close; count++; } - if (!count && p.value !== undefined) { sum += p.value; count = 1; } - out.push({ time: p.time, value: count ? (sum / count) : undefined }); - } - return out; -} - -function _tvComputeMedianPrice(data) { - var out = []; - for (var i = 0; i < data.length; i++) { - var p = data[i] || {}; - var h = p.high !== undefined ? p.high : (p.value !== undefined ? p.value : undefined); - var l = p.low !== undefined ? p.low : (p.value !== undefined ? p.value : undefined); - out.push({ time: p.time, value: (h !== undefined && l !== undefined) ? (h + l) / 2 : undefined }); - } - return out; -} - -function _tvComputeWeightedClose(data) { - var out = []; - for (var i = 0; i < data.length; i++) { - var p = data[i] || {}; - var h = p.high !== undefined ? p.high : (p.value || 0); - var l = p.low !== undefined ? p.low : (p.value || 0); - var c = p.close !== undefined ? p.close : (p.value || 0); - out.push({ time: p.time, value: (h + l + 2 * c) / 4 }); - } - return out; -} - -function _tvComputeMomentum(data, length, source) { - var out = []; - for (var i = 0; i < data.length; i++) { - if (i < length) { out.push({ time: data[i].time }); continue; } - var cur = _tvIndicatorValue(data[i], source); - var prv = _tvIndicatorValue(data[i - length], source); - out.push({ time: data[i].time, value: cur - prv }); - } - return out; -} - -function _tvComputePercentChange(data, source) { - var out = []; - var base = null; - for (var i = 0; i < data.length; i++) { - var v = _tvIndicatorValue(data[i], source); - if (base === null && isFinite(v) && v !== 0) base = v; - if (base === null || !isFinite(v)) { - out.push({ time: data[i].time }); - } else { - out.push({ time: data[i].time, value: ((v / base) - 1) * 100 }); - } - } - return out; -} - -function _tvAlignTwoSeries(primary, secondary, primarySource, secondarySource) { - var secMap = {}; - for (var j = 0; j < secondary.length; j++) { - secMap[String(secondary[j].time)] = _tvIndicatorValue(secondary[j], secondarySource); - } - var out = []; - for (var i = 0; i < primary.length; i++) { - var t = String(primary[i].time); - if (secMap[t] === undefined) continue; - out.push({ time: primary[i].time, a: _tvIndicatorValue(primary[i], primarySource), b: secMap[t] }); - } - return out; -} - -function _tvComputeBinary(primary, secondary, primarySource, secondarySource, op) { - var aligned = _tvAlignTwoSeries(primary, secondary, primarySource, secondarySource); - var out = []; - for (var i = 0; i < aligned.length; i++) { - var p = aligned[i]; - var val; - if (op === 'spread') val = p.a - p.b; - else if (op === 'ratio') val = p.b === 0 ? undefined : p.a / p.b; - else if (op === 'sum') val = p.a + p.b; - else if (op === 'product') val = p.a * p.b; - out.push({ time: p.time, value: val }); - } - return out; -} - -function _tvComputeCorrelation(primary, secondary, length, primarySource, secondarySource) { - var aligned = _tvAlignTwoSeries(primary, secondary, primarySource, secondarySource); - var out = []; - for (var i = 0; i < aligned.length; i++) { - if (i + 1 < length) { - out.push({ time: aligned[i].time }); - continue; - } - var sx = 0, sy = 0; - for (var j = i - length + 1; j <= i; j++) { - sx += aligned[j].a; - sy += aligned[j].b; - } - var mx = sx / length; - var my = sy / length; - var cov = 0, vx = 0, vy = 0; - for (var k = i - length + 1; k <= i; k++) { - var dx = aligned[k].a - mx; - var dy = aligned[k].b - my; - cov += dx * dy; - vx += dx * dx; - vy += dy * dy; - } - var den = Math.sqrt(vx * vy); - out.push({ time: aligned[i].time, value: den > 0 ? (cov / den) : 0 }); - } - return out; -} - -// Assign distinct colors to indicators -var _INDICATOR_COLORS = [ - '#ff9800', '#e91e63', '#9c27b0', '#00bcd4', '#8bc34a', - '#ff5722', '#3f51b5', '#009688', '#ffc107', '#607d8b' -]; -var _indicatorColorIdx = 0; - -function _getNextIndicatorColor() { - var c = _cssVar('--pywry-preset-' + ((_indicatorColorIdx % 10) + 3), _INDICATOR_COLORS[_indicatorColorIdx % _INDICATOR_COLORS.length]); - _indicatorColorIdx++; - return c; -} - -function _tvRemoveIndicator(seriesId) { - var info = _activeIndicators[seriesId]; - if (!info) return; - var chartId = info.chartId; - var entry = window.__PYWRY_TVCHARTS__[chartId]; - - // Push undo entry before removing (skip during layout restore) - if (!window.__PYWRY_UNDO_SUPPRESS__) { - var _undoDef = { - name: info.name, key: info.type, - defaultPeriod: info.period || 0, - _color: info.color, - _multiplier: info.multiplier, - _maType: info.maType, - _offset: info.offset, - _source: info.source, - }; - var _undoCid = chartId; - _tvPushUndo({ - label: 'Remove ' + (info.name || 'indicator'), - undo: function() { - _tvAddIndicator(_undoDef, _undoCid); - }, - redo: function() { - // Find the indicator by type+period after re-add (seriesIds change) - var keys = Object.keys(_activeIndicators); - for (var i = keys.length - 1; i >= 0; i--) { - var ai = _activeIndicators[keys[i]]; - if (ai && ai.chartId === _undoCid && ai.type === _undoDef.key) { - _tvRemoveIndicator(keys[i]); - break; - } - } - }, - }); - } - - // Remove requested series and grouped siblings in a single pass. - var toRemove = [seriesId]; - if (info.group) { - var gKeys = Object.keys(_activeIndicators); - for (var gi = 0; gi < gKeys.length; gi++) { - var gk = gKeys[gi]; - if (gk !== seriesId && _activeIndicators[gk] && _activeIndicators[gk].group === info.group) { - toRemove.push(gk); - } - } - } - - var removedPanes = {}; - for (var i = 0; i < toRemove.length; i++) { - var sid = toRemove[i]; - var sinfo = _activeIndicators[sid]; - if (!sinfo) continue; - var sEntry = window.__PYWRY_TVCHARTS__[sinfo.chartId]; - // Primitive-only indicators (volume profile) don't have an entry in - // seriesMap — detach the primitive from the host series instead. - if (_volumeProfilePrimitives[sid]) { - _tvRemoveVolumeProfilePrimitive(sid); - } - if (sEntry && sEntry.seriesMap[sid]) { - try { sEntry.chart.removeSeries(sEntry.seriesMap[sid]); } catch(e) {} - delete sEntry.seriesMap[sid]; - } - // Clean up hidden indicator source series (secondary symbol used for binary indicators) - if (sinfo.secondarySeriesId && sEntry && sEntry._indicatorSourceSeries && sEntry._indicatorSourceSeries[sinfo.secondarySeriesId]) { - var secId = sinfo.secondarySeriesId; - if (sEntry.seriesMap[secId]) { - try { sEntry.chart.removeSeries(sEntry.seriesMap[secId]); } catch(e) {} - delete sEntry.seriesMap[secId]; - } - delete sEntry._indicatorSourceSeries[secId]; - if (sEntry._compareSymbols) delete sEntry._compareSymbols[secId]; - if (sEntry._compareLabels) delete sEntry._compareLabels[secId]; - if (sEntry._compareSymbolInfo) delete sEntry._compareSymbolInfo[secId]; - if (sEntry._seriesRawData) delete sEntry._seriesRawData[secId]; - if (sEntry._seriesCanonicalRawData) delete sEntry._seriesCanonicalRawData[secId]; - } - if (sinfo.chartId === chartId && sinfo.isSubplot && sinfo.paneIndex > 0) { - removedPanes[sinfo.paneIndex] = true; - } - delete _activeIndicators[sid]; - } - - // Remove empty subplot containers and keep pane indexes in sync. - if (entry && entry.chart && typeof entry.chart.removePane === 'function') { - var paneKeys = Object.keys(removedPanes) - .map(function(v) { return Number(v); }) - .sort(function(a, b) { return b - a; }); - for (var pi = 0; pi < paneKeys.length; pi++) { - var removedPane = paneKeys[pi]; - var paneStillUsed = false; - var remaining = Object.keys(_activeIndicators); - for (var ri = 0; ri < remaining.length; ri++) { - var ai = _activeIndicators[remaining[ri]]; - if (ai && ai.chartId === chartId && ai.isSubplot && ai.paneIndex === removedPane) { - paneStillUsed = true; - break; - } - } - if (paneStillUsed) continue; - var paneRemoved = false; - try { - entry.chart.removePane(removedPane); - paneRemoved = true; - } catch(e2) { - try { - if (typeof entry.chart.panes === 'function') { - var paneObj = entry.chart.panes()[removedPane]; - if (paneObj) { - entry.chart.removePane(paneObj); - paneRemoved = true; - } - } - } catch(e3) {} - } - if (paneRemoved) { - // Lightweight Charts reindexes panes after removal. - for (var uj = 0; uj < remaining.length; uj++) { - var uid = remaining[uj]; - var uai = _activeIndicators[uid]; - if (uai && uai.chartId === chartId && uai.isSubplot && uai.paneIndex > removedPane) { - uai.paneIndex -= 1; - } - } - } - } - } - - // Keep next pane index compact after removals. - if (entry) { - var maxPane = 0; - var keys = Object.keys(_activeIndicators); - for (var k = 0; k < keys.length; k++) { - var ii = _activeIndicators[keys[k]]; - if (ii && ii.chartId === chartId && ii.isSubplot && ii.paneIndex > maxPane) { - maxPane = ii.paneIndex; - } - } - entry._nextPane = maxPane + 1; - } - - // Reset maximize/collapse state — pane layout changed - if (entry) { entry._paneState = { mode: 'normal', pane: -1 }; delete entry._savedPaneHeights; } - - _tvRebuildIndicatorLegend(chartId); - - // Clean up BB fill canvas if no BB indicators remain on this chart - if (info.type === 'bollinger-bands') { - var hasBB = false; - var remKeys = Object.keys(_activeIndicators); - for (var bi = 0; bi < remKeys.length; bi++) { - if (_activeIndicators[remKeys[bi]].chartId === chartId && _activeIndicators[remKeys[bi]].type === 'bollinger-bands') { hasBB = true; break; } - } - if (!hasBB) { - _tvRemoveBBFillPrimitive(chartId); - } else { - _tvUpdateBBFill(chartId); - } - } -} - -// --------------------------------------------------------------------------- -// Indicator legend helpers -// --------------------------------------------------------------------------- - -function _tvLegendActionButton(title, iconHtml, onClick) { - var btn = document.createElement('button'); - btn.type = 'button'; - btn.className = 'tvchart-legend-btn'; - btn.setAttribute('data-tooltip', title); - btn.setAttribute('aria-label', title); - btn.innerHTML = iconHtml; - btn.addEventListener('click', function(e) { - e.preventDefault(); - e.stopPropagation(); - if (onClick) onClick(btn, e); - }); - return btn; -} - -function _tvOpenLegendItemMenu(anchorEl, actions) { - if (!anchorEl || !actions || !actions.length) return; - var old = document.querySelector('.tvchart-legend-menu'); - if (old && old.parentNode) old.parentNode.removeChild(old); - var menu = document.createElement('div'); - menu.className = 'tvchart-legend-menu'; - for (var i = 0; i < actions.length; i++) { - (function(action) { - if (action.separator) { - var sep = document.createElement('div'); - sep.className = 'tvchart-legend-menu-sep'; - menu.appendChild(sep); - return; - } - var item = document.createElement('button'); - item.type = 'button'; - item.className = 'tvchart-legend-menu-item'; - if (action.disabled) { - item.disabled = true; - item.classList.add('is-disabled'); - } - if (action.tooltip) { - item.setAttribute('data-tooltip', action.tooltip); - } - var icon = document.createElement('span'); - icon.className = 'tvchart-legend-menu-item-icon'; - icon.innerHTML = action.icon || ''; - item.appendChild(icon); - var label = document.createElement('span'); - label.className = 'tvchart-legend-menu-item-label'; - label.textContent = action.label; - item.appendChild(label); - if (action.meta) { - var meta = document.createElement('span'); - meta.className = 'tvchart-legend-menu-item-meta'; - meta.textContent = action.meta; - item.appendChild(meta); - } - item.addEventListener('click', function(e) { - e.preventDefault(); - e.stopPropagation(); - if (action.disabled) return; - if (menu.parentNode) menu.parentNode.removeChild(menu); - action.run(); - }); - menu.appendChild(item); - })(actions[i]); - } - menu.addEventListener('click', function(e) { e.stopPropagation(); }); - var _oc = _tvAppendOverlay(anchorEl, menu); - var _cs = _tvContainerSize(_oc); - var rect = _tvContainerRect(_oc, anchorEl.getBoundingClientRect()); - var menuRect = menu.getBoundingClientRect(); - var left = Math.max(6, Math.min(_cs.width - menuRect.width - 6, rect.right - menuRect.width)); - var top = Math.max(6, Math.min(_cs.height - menuRect.height - 6, rect.bottom + 4)); - menu.style.left = left + 'px'; - menu.style.top = top + 'px'; - setTimeout(function() { - document.addEventListener('click', function closeMenu() { - if (menu.parentNode) menu.parentNode.removeChild(menu); - }, { once: true }); - }, 0); -} - -function _tvSetIndicatorVisibility(chartId, seriesId, visible) { - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry || !entry.chart) return; - var target = _activeIndicators[seriesId]; - if (!target) return; - var keys = Object.keys(_activeIndicators); - for (var i = 0; i < keys.length; i++) { - var sid = keys[i]; - var info = _activeIndicators[sid]; - if (!info || info.chartId !== chartId) continue; - if (target.group && info.group !== target.group) continue; - if (!target.group && sid !== seriesId) continue; - var s = entry.seriesMap[sid]; - if (s && typeof s.applyOptions === 'function') { - try { s.applyOptions({ visible: !!visible }); } catch (e) {} - } - // Volume Profile primitives have no real series — toggle the - // primitive's own hidden flag and request a redraw. - var vpSlot = _volumeProfilePrimitives[sid]; - if (vpSlot) { - vpSlot.hidden = !visible; - if (vpSlot.primitive && vpSlot.primitive.triggerUpdate) vpSlot.primitive.triggerUpdate(); - } - info.hidden = !visible; - } -} - -function _tvLegendCopyToClipboard(text) { - var value = String(text || '').trim(); - if (!value) return; - try { - if (navigator.clipboard && navigator.clipboard.writeText) { - navigator.clipboard.writeText(value); - } - } catch (e) {} -} - -// --------------------------------------------------------------------------- -// Pane move up/down for subplot indicators -// --------------------------------------------------------------------------- - -function _tvSwapIndicatorPane(chartId, seriesId, direction) { - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry || !entry.chart) return; - var info = _activeIndicators[seriesId]; - if (!info || !info.isSubplot) return; - - // Restore panes to normal before swapping so heights are sane - var pState = _tvGetPaneState(chartId); - if (pState.mode !== 'normal') { - _tvRestorePanes(chartId); - } - - var targetPane = info.paneIndex + direction; - if (targetPane < 0) return; // Can't move above the first pane - - // Count the total number of panes via LWC API - var totalPanes = 0; - try { - if (typeof entry.chart.panes === 'function') { - totalPanes = entry.chart.panes().length; - } - } catch (e) {} - if (totalPanes <= 0) { - // Fallback: count from tracked indicators + volume - var allKeys = Object.keys(_activeIndicators); - for (var i = 0; i < allKeys.length; i++) { - var ai = _activeIndicators[allKeys[i]]; - if (ai && ai.chartId === chartId && ai.paneIndex > totalPanes) { - totalPanes = ai.paneIndex; - } - } - totalPanes += 1; // convert max index to count - } - if (targetPane >= totalPanes) return; // Can't move below last pane - - // Use LWC v5 swapPanes API - try { - if (typeof entry.chart.swapPanes === 'function') { - entry.chart.swapPanes(info.paneIndex, targetPane); - } else { - return; // API not available - } - } catch (e) { - return; - } - - var oldPane = info.paneIndex; - - // Update paneIndex tracking for all affected indicators - var allKeys2 = Object.keys(_activeIndicators); - for (var j = 0; j < allKeys2.length; j++) { - var aj = _activeIndicators[allKeys2[j]]; - if (!aj || aj.chartId !== chartId) continue; - if (aj.paneIndex === oldPane) { - aj.paneIndex = targetPane; - } else if (aj.paneIndex === targetPane) { - aj.paneIndex = oldPane; - } - } - - // Update volume pane tracking if swap involved a volume pane - if (entry._volumePaneBySeries) { - var volKeys = Object.keys(entry._volumePaneBySeries); - for (var vi = 0; vi < volKeys.length; vi++) { - var vk = volKeys[vi]; - if (entry._volumePaneBySeries[vk] === oldPane) { - entry._volumePaneBySeries[vk] = targetPane; - } else if (entry._volumePaneBySeries[vk] === targetPane) { - entry._volumePaneBySeries[vk] = oldPane; - } - } - } - - // Reposition the main chart legend to follow the pane it now lives in. - // Deferred so the swap DOM changes are settled. - requestAnimationFrame(function() { - _tvRepositionMainLegend(entry, chartId); - }); - - _tvRebuildIndicatorLegend(chartId); -} - -/** - * Find which pane index the main chart series currently lives in. - * Returns 0 if unknown. - */ -function _tvFindMainChartPane(entry) { - if (!entry || !entry.chart) return 0; - try { - var panes = typeof entry.chart.panes === 'function' ? entry.chart.panes() : null; - if (!panes) return 0; - // The main chart series is the first entry in seriesMap - var mainKey = Object.keys(entry.seriesMap)[0]; - var mainSeries = mainKey ? entry.seriesMap[mainKey] : null; - if (!mainSeries) return 0; - for (var pi = 0; pi < panes.length; pi++) { - var pSeries = typeof panes[pi].getSeries === 'function' ? panes[pi].getSeries() : []; - for (var si = 0; si < pSeries.length; si++) { - if (pSeries[si] === mainSeries) return pi; - } - } - } catch (e) {} - return 0; -} - -/** - * Reposition the main legend box (OHLC, Volume text, indicators-in-main) - * so it sits at the top of whichever pane the main chart series is in. - * When the main chart is in pane 0 (default), top stays at 8px. - * When it's been swapped to another pane, offset the legend accordingly. - */ -function _tvRepositionMainLegend(entry, chartId) { - if (!entry || !entry.chart) return; - var legendBox = _tvScopedById(chartId, 'tvchart-legend-box'); - if (!legendBox) return; - - var mainPane = _tvFindMainChartPane(entry); - if (mainPane === 0) { - // Default position - legendBox.style.top = '8px'; - return; - } - - try { - var panes = typeof entry.chart.panes === 'function' ? entry.chart.panes() : null; - if (!panes || !panes[mainPane]) { legendBox.style.top = '8px'; return; } - var paneHtml = typeof panes[mainPane].getHTMLElement === 'function' - ? panes[mainPane].getHTMLElement() : null; - if (!paneHtml) { legendBox.style.top = '8px'; return; } - // The legend box is positioned relative to the inside toolbar overlay - // which matches the chart container bounds exactly. - var containerRect = entry.container.getBoundingClientRect(); - var paneRect = paneHtml.getBoundingClientRect(); - var offset = paneRect.top - containerRect.top; - legendBox.style.top = (offset + 8) + 'px'; - } catch (e) { - legendBox.style.top = '8px'; - } -} - -/** - * Get the current state of a pane: 'normal', 'maximized', or 'collapsed'. - */ -function _tvGetPaneState(chartId) { - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry) return { mode: 'normal', pane: -1 }; - if (!entry._paneState) entry._paneState = { mode: 'normal', pane: -1 }; - return entry._paneState; -} - -/** - * Save the current pane heights before maximize/collapse so we can - * restore them later. - */ -function _tvSavePaneHeights(entry) { - if (!entry || !entry.chart) return; - try { - var panes = entry.chart.panes(); - if (!panes) return; - entry._savedPaneHeights = []; - for (var i = 0; i < panes.length; i++) { - var el = typeof panes[i].getHTMLElement === 'function' - ? panes[i].getHTMLElement() : null; - entry._savedPaneHeights.push(el ? el.clientHeight : 0); - } - } catch (e) {} -} - -/** - * Hide or show LWC pane HTML elements and separator bars. - * LWC renders panes as table-row elements inside a table; separators - * are sibling rows. We walk the parent and hide everything except the - * target pane's row. - */ -function _tvSetPaneVisibility(panes, visibleIndex, hidden) { - for (var k = 0; k < panes.length; k++) { - var el = typeof panes[k].getHTMLElement === 'function' - ? panes[k].getHTMLElement() : null; - if (!el) continue; - if (hidden && k !== visibleIndex) { - el.style.display = 'none'; - // Also hide the separator bar above (previous sibling of the pane) - var sep = el.previousElementSibling; - if (sep && sep !== el.parentElement.firstElementChild) { - sep.style.display = 'none'; - } - } else { - el.style.display = ''; - var sep2 = el.previousElementSibling; - if (sep2 && sep2 !== el.parentElement.firstElementChild) { - sep2.style.display = ''; - } - } - } -} - -/** - * Show or hide the legend boxes to match which panes are visible. - * mode='normal' — show everything - * mode='maximized' — show only the legend for `pane`, hide others - * mode='collapsed' — hide the legend for `pane`, show others - */ -function _tvSyncLegendVisibility(chartId, mode, pane) { - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry) return; - - // Main legend box (OHLC, Volume, indicators-in-main-pane) - var legendBox = _tvScopedById(chartId, 'tvchart-legend-box'); - var mainPane = _tvFindMainChartPane(entry); - - if (mode === 'normal') { - // Show everything - if (legendBox) legendBox.style.display = ''; - if (entry._paneLegendEls) { - var pKeys = Object.keys(entry._paneLegendEls); - for (var i = 0; i < pKeys.length; i++) { - entry._paneLegendEls[pKeys[i]].style.display = ''; - } - } - } else if (mode === 'maximized') { - // Hide main legend if main chart pane is not the maximized one - if (legendBox) legendBox.style.display = (mainPane === pane) ? '' : 'none'; - // Hide all pane overlays except for the maximized pane - if (entry._paneLegendEls) { - var mKeys = Object.keys(entry._paneLegendEls); - for (var m = 0; m < mKeys.length; m++) { - var idx = Number(mKeys[m]); - entry._paneLegendEls[mKeys[m]].style.display = (idx === pane) ? '' : 'none'; - } - } - } else if (mode === 'collapsed') { - // Show all legends — the collapsed pane still shows its legend in the thin strip - if (legendBox) legendBox.style.display = ''; - if (entry._paneLegendEls) { - var cKeys = Object.keys(entry._paneLegendEls); - for (var c = 0; c < cKeys.length; c++) { - entry._paneLegendEls[cKeys[c]].style.display = ''; - } - } - } -} - -/** - * Maximize a pane: hide every other pane so it fills the entire chart area. - */ -function _tvMaximizePane(chartId, paneIndex) { - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry || !entry.chart) return; - try { - if (typeof entry.chart.panes !== 'function') return; - var panes = entry.chart.panes(); - if (!panes || !panes[paneIndex]) return; - var state = _tvGetPaneState(chartId); - - // If already maximized on this pane, restore instead - if (state.mode === 'maximized' && state.pane === paneIndex) { - _tvRestorePanes(chartId); - return; - } - - // If currently in another mode, restore first - if (state.mode !== 'normal') { - _tvSetPaneVisibility(panes, -1, false); // unhide all - } - - // Save heights only from normal state - if (state.mode === 'normal') { - _tvSavePaneHeights(entry); - } - - // Hide all panes except the target - _tvSetPaneVisibility(panes, paneIndex, true); - - // Force the target pane to fill the full container height - var containerH = entry.container ? entry.container.clientHeight : 600; - if (typeof panes[paneIndex].setHeight === 'function') { - panes[paneIndex].setHeight(containerH); - } - - entry._paneState = { mode: 'maximized', pane: paneIndex }; - _tvSyncLegendVisibility(chartId, 'maximized', paneIndex); - _tvUpdatePaneControlButtons(chartId); - requestAnimationFrame(function() { - _tvRepositionPaneLegends(chartId); - }); - } catch (e) {} -} - -/** - * Collapse a pane: shrink it to a thin strip showing only the legend text. - * The pane stays visible but its chart content is clipped. - */ -function _tvCollapsePane(chartId, paneIndex) { - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry || !entry.chart) return; - try { - if (typeof entry.chart.panes !== 'function') return; - var panes = entry.chart.panes(); - if (!panes || !panes[paneIndex]) return; - var state = _tvGetPaneState(chartId); - - // If already collapsed on this pane, restore instead - if (state.mode === 'collapsed' && state.pane === paneIndex) { - _tvRestorePanes(chartId); - return; - } - - // If currently in another mode, restore first - if (state.mode !== 'normal') { - _tvSetPaneVisibility(panes, -1, false); - _tvShowPaneContent(panes, -1); // unhide any hidden canvases - } - - // Save heights only from normal state - if (state.mode === 'normal') { - _tvSavePaneHeights(entry); - } - - // Shrink pane to minimal via LWC API, then hide all canvas/content - // children so only the empty strip remains for the legend overlay. - if (typeof panes[paneIndex].setHeight === 'function') { - panes[paneIndex].setHeight(1); - } - _tvHidePaneContent(panes[paneIndex]); - - entry._paneState = { mode: 'collapsed', pane: paneIndex }; - _tvSyncLegendVisibility(chartId, 'collapsed', paneIndex); - _tvUpdatePaneControlButtons(chartId); - requestAnimationFrame(function() { - _tvRepositionPaneLegends(chartId); - }); - } catch (e) {} -} - -/** - * Hide all visual content (canvases, child elements) inside a pane, - * leaving the pane element itself visible at whatever height LWC gives it. - */ -function _tvHidePaneContent(pane) { - var el = typeof pane.getHTMLElement === 'function' ? pane.getHTMLElement() : null; - if (!el) return; - // Hide every child element inside the pane (canvas, scale elements, etc.) - var children = el.querySelectorAll('*'); - for (var i = 0; i < children.length; i++) { - children[i].style.visibility = 'hidden'; - } -} - -/** - * Restore visibility to pane content. - * If paneIndex is -1, restores all panes. - */ -function _tvShowPaneContent(panes, paneIndex) { - for (var k = 0; k < panes.length; k++) { - if (paneIndex >= 0 && k !== paneIndex) continue; - var el = typeof panes[k].getHTMLElement === 'function' - ? panes[k].getHTMLElement() : null; - if (!el) continue; - var children = el.querySelectorAll('*'); - for (var j = 0; j < children.length; j++) { - children[j].style.visibility = ''; - } - } -} - -/** - * Restore all panes to their saved heights (before maximize/collapse). - */ -function _tvRestorePanes(chartId) { - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry || !entry.chart) return; - try { - if (typeof entry.chart.panes !== 'function') return; - var panes = entry.chart.panes(); - if (!panes) return; - - // Unhide all panes (from maximize) and restore content (from collapse) - _tvSetPaneVisibility(panes, -1, false); - _tvShowPaneContent(panes, -1); - - var saved = entry._savedPaneHeights; - if (saved && saved.length === panes.length) { - for (var i = 0; i < panes.length; i++) { - if (typeof panes[i].setHeight === 'function' && saved[i] > 0) { - panes[i].setHeight(saved[i]); - } - } - } else { - // Fallback: equal distribution - var containerH = entry.container ? entry.container.clientHeight : 600; - for (var j = 0; j < panes.length; j++) { - if (typeof panes[j].setHeight === 'function') { - panes[j].setHeight(Math.round(containerH / panes.length)); - } - } - } - entry._paneState = { mode: 'normal', pane: -1 }; - delete entry._savedPaneHeights; - _tvSyncLegendVisibility(chartId, 'normal', -1); - _tvUpdatePaneControlButtons(chartId); - requestAnimationFrame(function() { - _tvRepositionPaneLegends(chartId); - }); - } catch (e) {} -} - -/** - * Update the maximize/collapse/restore button icon and tooltip for every - * subplot indicator in the given chart, reflecting the current pane state. - */ -function _tvUpdatePaneControlButtons(chartId) { - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry) return; - var state = _tvGetPaneState(chartId); - var restoreSvg = ''; - var maximizeSvg = ''; - var collapseSvg = ''; - - var keys = Object.keys(_activeIndicators); - for (var i = 0; i < keys.length; i++) { - var info = _activeIndicators[keys[i]]; - if (!info || info.chartId !== chartId || !info.isSubplot) continue; - var isThisPane = state.pane === info.paneIndex; - - // Update maximize button - var btn = document.getElementById('tvchart-pane-ctrl-' + keys[i]); - if (btn) { - if (state.mode === 'maximized' && isThisPane) { - btn.innerHTML = restoreSvg; - btn.setAttribute('data-tooltip', 'Restore pane'); - btn.setAttribute('aria-label', 'Restore pane'); - } else { - btn.innerHTML = maximizeSvg; - btn.setAttribute('data-tooltip', 'Maximize pane'); - btn.setAttribute('aria-label', 'Maximize pane'); - } - } - - // Update collapse button - var cBtn = document.getElementById('tvchart-pane-collapse-' + keys[i]); - if (cBtn) { - if (state.mode === 'collapsed' && isThisPane) { - cBtn.innerHTML = restoreSvg; - cBtn.setAttribute('data-tooltip', 'Restore pane'); - cBtn.setAttribute('aria-label', 'Restore pane'); - } else { - cBtn.innerHTML = collapseSvg; - cBtn.setAttribute('data-tooltip', 'Collapse pane'); - cBtn.setAttribute('aria-label', 'Collapse pane'); - } - } - } -} - -/** - * Get or create a legend overlay for a specific pane, positioned absolutely - * inside entry.container (the chart wrapper div). - */ -function _tvGetPaneLegendContainer(entry, paneIndex) { - if (!entry._paneLegendEls) entry._paneLegendEls = {}; - if (entry._paneLegendEls[paneIndex]) return entry._paneLegendEls[paneIndex]; - - var container = entry.container; - if (!container || !entry.chart) return null; - - try { - if (typeof entry.chart.panes !== 'function') return null; - var panes = entry.chart.panes(); - if (!panes || !panes[paneIndex]) return null; - - // Compute the top offset and height of this pane relative to the container - var top = 0; - var paneHeight = 0; - var paneHtml = typeof panes[paneIndex].getHTMLElement === 'function' - ? panes[paneIndex].getHTMLElement() : null; - if (paneHtml) { - var paneRect = paneHtml.getBoundingClientRect(); - var containerRect = container.getBoundingClientRect(); - top = paneRect.top - containerRect.top; - paneHeight = paneRect.height; - } else { - // Fallback: sum preceding pane heights + 1px separators - for (var i = 0; i < paneIndex; i++) { - var ps = typeof entry.chart.paneSize === 'function' - ? entry.chart.paneSize(i) : null; - top += (ps ? ps.height : 0) + 1; - } - var curPs = typeof entry.chart.paneSize === 'function' - ? entry.chart.paneSize(paneIndex) : null; - paneHeight = curPs ? curPs.height : 0; - } - - var overlay = document.createElement('div'); - overlay.className = 'tvchart-pane-legend'; - overlay.style.top = (top + 4) + 'px'; - if (paneHeight > 0) { - overlay.style.maxHeight = (paneHeight - 8) + 'px'; - overlay.style.overflow = 'hidden'; - } - container.appendChild(overlay); - entry._paneLegendEls[paneIndex] = overlay; - return overlay; - } catch (e) { - return null; - } -} - -/** - * Reposition existing per-pane legend overlays (e.g. after pane resize via divider drag). - */ -function _tvRepositionPaneLegends(chartId) { - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry || !entry._paneLegendEls || !entry.chart || !entry.container) return; - var container = entry.container; - var panes; - try { panes = typeof entry.chart.panes === 'function' ? entry.chart.panes() : null; } catch (e) { return; } - if (!panes) return; - - for (var pi in entry._paneLegendEls) { - var overlay = entry._paneLegendEls[pi]; - if (!overlay) continue; - var idx = Number(pi); - var paneHtml = panes[idx] && typeof panes[idx].getHTMLElement === 'function' - ? panes[idx].getHTMLElement() : null; - if (paneHtml) { - var paneRect = paneHtml.getBoundingClientRect(); - var containerRect = container.getBoundingClientRect(); - overlay.style.top = (paneRect.top - containerRect.top + 4) + 'px'; - if (paneRect.height > 0) { - overlay.style.maxHeight = (paneRect.height - 8) + 'px'; - } - } - } - - // Also keep the main legend box tracking its pane (after swaps) - _tvRepositionMainLegend(entry, chartId); -} - -function _tvRebuildIndicatorLegend(chartId) { - var indBox = _tvScopedById(chartId, 'tvchart-legend-indicators'); - if (!indBox) return; - indBox.innerHTML = ''; - - // Clean up previous per-pane legend overlays - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (entry && entry._paneLegendEls) { - for (var pi in entry._paneLegendEls) { - if (entry._paneLegendEls[pi] && entry._paneLegendEls[pi].parentNode) { - entry._paneLegendEls[pi].parentNode.removeChild(entry._paneLegendEls[pi]); - } - } - } - if (entry) entry._paneLegendEls = {}; - - // Compute total pane count for directional button logic - var totalPanes = 0; - if (entry && entry.chart && typeof entry.chart.panes === 'function') { - try { totalPanes = entry.chart.panes().length; } catch (e) {} - } - - var keys = Object.keys(_activeIndicators); - var shown = {}; - for (var i = 0; i < keys.length; i++) { - var sid = keys[i]; - var ai = _activeIndicators[sid]; - if (ai.chartId !== chartId) continue; - if (ai.group && shown[ai.group]) continue; - if (ai.group) shown[ai.group] = true; - (function(seriesId, info) { - var row = document.createElement('div'); - row.className = 'tvchart-legend-row tvchart-ind-row'; - row.id = 'tvchart-ind-row-' + seriesId; - row.dataset.hidden = info.hidden ? '1' : '0'; - var dot = document.createElement('span'); - dot.className = 'tvchart-ind-dot'; - // Volume Profile primitives have no line colour — use the - // up-volume swatch so the dot still reflects the indicator. - var dotColor = info.color; - if (!dotColor && (info.type === 'volume-profile-fixed' || info.type === 'volume-profile-visible')) { - dotColor = info.upColor || _cssVar('--pywry-tvchart-vp-up'); - } - dot.style.background = dotColor || _cssVar('--pywry-tvchart-text'); - row.appendChild(dot); - var nameSp = document.createElement('span'); - nameSp.className = 'tvchart-ind-name'; - nameSp.style.color = dotColor || _cssVar('--pywry-tvchart-text'); - // Extract base name (remove any trailing period in parentheses from the stored name) - var baseName = info.group ? 'BB' : (info.name || '').replace(/\s*\(\d+\)\s*$/, ''); - var indLabel; - if (info.group && info.type === 'bollinger-bands') { - // TradingView format: "BB 20 2 0 SMA" - indLabel = 'BB ' + (info.period || 20) + ' ' + (info.multiplier || 2) + ' ' + (info.offset || 0) + ' ' + (info.maType || 'SMA'); - } else if (info.type === 'volume-profile-fixed' || info.type === 'volume-profile-visible') { - // TradingView VPVR format: "VPVR Number Of Rows 24 Up/Down 70" - var vpShort = info.type === 'volume-profile-visible' ? 'VPVR' : 'VPFR'; - var rowsLabel = info.rowsLayout === 'ticks' ? 'Ticks Per Row' : 'Number Of Rows'; - var volLabel = info.volumeMode === 'total' - ? 'Total' - : (info.volumeMode === 'delta' ? 'Delta' : 'Up/Down'); - var vaPct = Math.round((info.valueAreaPct != null ? info.valueAreaPct : 0.70) * 100); - indLabel = vpShort + ' ' + rowsLabel + ' ' + (info.rowSize || info.period || 24) - + ' ' + volLabel + ' ' + vaPct; - } else { - indLabel = baseName + (info.period ? ' ' + info.period : ''); - } - // Binary indicators: show "Indicator source PrimarySymbol / SecondarySymbol" - if (info.secondarySeriesId) { - var indEntry = window.__PYWRY_TVCHARTS__[info.chartId]; - var priSym = ''; - var secSym = ''; - if (indEntry) { - // Primary symbol from chart title / symbolInfo - priSym = (indEntry._resolvedSymbolInfo && indEntry._resolvedSymbolInfo.main && indEntry._resolvedSymbolInfo.main.ticker) - || (indEntry.payload && indEntry.payload.title) - || ''; - // Secondary symbol from compare tracking - secSym = (indEntry._compareSymbols && indEntry._compareSymbols[info.secondarySeriesId]) || ''; - } - var srcLabel = info.primarySource || 'close'; - indLabel = baseName + ' ' + srcLabel + ' ' + priSym + ' / ' + secSym; - } - nameSp.textContent = indLabel; - row.appendChild(nameSp); - // For grouped indicators (BB), add a value span per group member - if (info.group) { - var gKeys = Object.keys(_activeIndicators); - for (var gvi = 0; gvi < gKeys.length; gvi++) { - if (_activeIndicators[gKeys[gvi]].group === info.group) { - var gValSp = document.createElement('span'); - gValSp.className = 'tvchart-ind-val'; - gValSp.id = 'tvchart-ind-val-' + gKeys[gvi]; - gValSp.style.color = _activeIndicators[gKeys[gvi]].color; - row.appendChild(gValSp); - } - } - } else { - var valSp = document.createElement('span'); - valSp.className = 'tvchart-ind-val'; - valSp.id = 'tvchart-ind-val-' + seriesId; - // Volume Profile: show running totals (up / down / total). - if (info.type === 'volume-profile-fixed' || info.type === 'volume-profile-visible') { - var vpSlotForLabel = _volumeProfilePrimitives[seriesId]; - if (vpSlotForLabel) { - var t = _tvVolumeProfileTotals(vpSlotForLabel.vpData); - valSp.textContent = _tvFormatVolume(t.up) + ' ' - + _tvFormatVolume(t.down) + ' ' - + _tvFormatVolume(t.total); - } - } - row.appendChild(valSp); - } - var ctrl = document.createElement('span'); - ctrl.className = 'tvchart-legend-row-actions tvchart-ind-ctrl'; - var upArrowSvg = ''; - var downArrowSvg = ''; - var maximizeSvg = ''; - var hideSvg = ''; - var showSvg = ''; - var settingsSvg = ''; - var removeSvg = ''; - var menuSvg = ''; - var copySvg = ''; - - // Pane move buttons for subplot indicators - if (info.isSubplot) { - var canMoveUp = info.paneIndex > 0; - var canMoveDown = totalPanes > 0 && info.paneIndex < totalPanes - 1; - if (canMoveUp) { - ctrl.appendChild(_tvLegendActionButton('Move pane up', upArrowSvg, function() { - _tvSwapIndicatorPane(chartId, seriesId, -1); - })); - } - if (canMoveDown) { - ctrl.appendChild(_tvLegendActionButton('Move pane down', downArrowSvg, function() { - _tvSwapIndicatorPane(chartId, seriesId, 1); - })); - } - // Maximize pane button - var paneBtn = _tvLegendActionButton('Maximize pane', maximizeSvg, function() { - var pState = _tvGetPaneState(chartId); - var isThisPane = pState.pane === info.paneIndex; - if (pState.mode === 'maximized' && isThisPane) { - _tvRestorePanes(chartId); - } else { - _tvMaximizePane(chartId, info.paneIndex); - } - }); - paneBtn.id = 'tvchart-pane-ctrl-' + seriesId; - ctrl.appendChild(paneBtn); - // Collapse pane button (minimize icon — horizontal line) - var collapseSvg = ''; - var collapseBtn = _tvLegendActionButton('Collapse pane', collapseSvg, function() { - var pState = _tvGetPaneState(chartId); - var isThisPane = pState.pane === info.paneIndex; - if (pState.mode === 'collapsed' && isThisPane) { - _tvRestorePanes(chartId); - } else { - _tvCollapsePane(chartId, info.paneIndex); - } - }); - collapseBtn.id = 'tvchart-pane-collapse-' + seriesId; - ctrl.appendChild(collapseBtn); - } - var eyeBtn = _tvLegendActionButton(info.hidden ? 'Show' : 'Hide', info.hidden ? showSvg : hideSvg, function(btn) { - var hidden = !info.hidden; - _tvSetIndicatorVisibility(chartId, seriesId, !hidden); - row.dataset.hidden = hidden ? '1' : '0'; - btn.setAttribute('data-tooltip', hidden ? 'Show' : 'Hide'); - btn.setAttribute('aria-label', hidden ? 'Show' : 'Hide'); - btn.innerHTML = hidden ? showSvg : hideSvg; - }); - eyeBtn.id = 'tvchart-eye-' + seriesId; - ctrl.appendChild(eyeBtn); - ctrl.appendChild(_tvLegendActionButton('Settings', settingsSvg, function() { - try { - _tvShowIndicatorSettings(seriesId); - } catch (err) { - console.error('[pywry:tvchart] Settings dialog failed for', seriesId, err); - } - })); - ctrl.appendChild(_tvLegendActionButton('Remove', removeSvg, function() { - _tvRemoveIndicator(seriesId); - })); - ctrl.appendChild(_tvLegendActionButton('More', menuSvg, function(btn) { - var fullName = (info.name || '').trim(); - var groupName = info.group ? 'Indicator group' : 'Single indicator'; - _tvOpenLegendItemMenu(btn, [ - { - label: info.hidden ? 'Show' : 'Hide', - icon: info.hidden ? showSvg : hideSvg, - run: function() { - var hidden = !info.hidden; - _tvSetIndicatorVisibility(chartId, seriesId, !hidden); - row.dataset.hidden = hidden ? '1' : '0'; - var eb = document.getElementById('tvchart-eye-' + seriesId); - if (eb) { - eb.setAttribute('data-tooltip', hidden ? 'Show' : 'Hide'); - eb.setAttribute('aria-label', hidden ? 'Show' : 'Hide'); - eb.innerHTML = hidden ? showSvg : hideSvg; - } - }, - }, - { - label: 'Settings', - icon: settingsSvg, - run: function() { _tvShowIndicatorSettings(seriesId); }, - }, - { - label: 'Remove', - icon: removeSvg, - run: function() { _tvRemoveIndicator(seriesId); }, - }, - { separator: true }, - { - label: 'Copy Name', - icon: copySvg, - meta: fullName || groupName, - disabled: !fullName, - tooltip: fullName || 'Indicator name unavailable', - run: function() { _tvLegendCopyToClipboard(fullName); }, - }, - { - label: 'Reset Visibility', - icon: hideSvg, - meta: groupName, - run: function() { - _tvSetIndicatorVisibility(chartId, seriesId, true); - row.dataset.hidden = '0'; - var eb = document.getElementById('tvchart-eye-' + seriesId); - if (eb) { - eb.setAttribute('data-tooltip', 'Hide'); - eb.setAttribute('aria-label', 'Hide'); - eb.innerHTML = hideSvg; - } - }, - }, - ]); - })); - row.appendChild(ctrl); - - // Route subplot indicators to per-pane legend overlays. - // Always append to indBox first; a deferred pass will relocate - // subplot rows into their pane overlays once the DOM is laid out. - indBox.appendChild(row); - })(sid, ai); - } - - // Deferred: move subplot indicator rows into per-pane overlays once - // LWC has finished laying out pane DOM elements (getBoundingClientRect - // returns zeros when called synchronously after addSeries). - if (entry && entry.chart) { - requestAnimationFrame(function() { - _tvRelocateSubplotLegends(chartId); - _tvUpdatePaneControlButtons(chartId); - }); - } -} - -/** - * Move subplot indicator legend rows from the main indBox into per-pane - * overlay containers. Called after a rAF so LWC pane DOM is laid out. - */ -function _tvRelocateSubplotLegends(chartId) { - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry || !entry.chart) return; - var mainPane = _tvFindMainChartPane(entry); - var keys = Object.keys(_activeIndicators); - var shown = {}; - for (var i = 0; i < keys.length; i++) { - var sid = keys[i]; - var ai = _activeIndicators[sid]; - if (ai.chartId !== chartId) continue; - if (ai.group && shown[ai.group]) continue; - if (ai.group) shown[ai.group] = true; - // Keep non-subplot and indicators in the main chart pane in indBox - if (!ai.isSubplot || ai.paneIndex === mainPane) continue; - var row = document.getElementById('tvchart-ind-row-' + sid); - if (!row) continue; - var paneEl = _tvGetPaneLegendContainer(entry, ai.paneIndex); - if (paneEl) { - paneEl.appendChild(row); // moves the node out of indBox - } - } -} - -function _tvUpdateIndicatorLegendValues(chartId, param) { - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry) return; - // Reposition pane legends (handles pane divider drag) - _tvRepositionPaneLegends(chartId); - var keys = Object.keys(_activeIndicators); - for (var i = 0; i < keys.length; i++) { - var sid = keys[i]; - var info = _activeIndicators[sid]; - if (info.chartId !== chartId) continue; - var valSp = _tvScopedById(chartId, 'tvchart-ind-val-' + sid); - if (!valSp) continue; - var series = entry.seriesMap[sid]; - if (!series) continue; - var d = param && param.seriesData ? param.seriesData.get(series) : null; - if (d && d.value !== undefined) { - valSp.textContent = '\u00a0' + Number(d.value).toFixed(2); - } - } -} - -function _tvShowIndicatorSettings(seriesId) { - var info = _activeIndicators[seriesId]; - if (!info) return; - var chartId = info.chartId; - var ds = window.__PYWRY_DRAWINGS__[info.chartId] || _tvEnsureDrawingLayer(info.chartId); - if (!ds || !ds.uiLayer) return; - - var type = info.type || info.name; - var baseName = info.name.replace(/\s*\(\d+\)\s*$/, ''); - var isBB = !!(info.group && type === 'bollinger-bands'); - var isRSI = baseName === 'RSI'; - var isATR = baseName === 'ATR'; - var isVWAP = baseName === 'VWAP'; - var isVolSMA = baseName === 'Volume SMA'; - var isMA = baseName === 'SMA' || baseName === 'EMA' || baseName === 'WMA'; - var isVP = type === 'volume-profile-fixed' || type === 'volume-profile-visible'; - var isLightweight = type === 'moving-average-ex' || type === 'momentum' || type === 'correlation' - || type === 'percent-change' || type === 'average-price' || type === 'median-price' - || type === 'weighted-close' || type === 'spread' || type === 'ratio' - || type === 'sum' || type === 'product'; - var isBinary = type === 'spread' || type === 'ratio' || type === 'sum' || type === 'product' || type === 'correlation'; - - // Source options - var _SRC_OPTS = [ - { v: 'close', l: 'Close' }, { v: 'open', l: 'Open' }, - { v: 'high', l: 'High' }, { v: 'low', l: 'Low' }, - { v: 'hl2', l: 'HL2' }, { v: 'hlc3', l: 'HLC3' }, { v: 'ohlc4', l: 'OHLC4' }, - ]; - - // Collect all series in this group for multi-plot style controls - var groupSids = []; - if (info.group) { - var allK = Object.keys(_activeIndicators); - for (var gk = 0; gk < allK.length; gk++) { - if (_activeIndicators[allK[gk]].group === info.group) groupSids.push(allK[gk]); - } - } else { - groupSids = [seriesId]; - } - - var draft = { - period: info.period, - color: info.color || '#e6b32c', - lineWidth: info.lineWidth || 2, - lineStyle: info.lineStyle || 0, - multiplier: info.multiplier || 2, - source: info.source || 'close', - method: info.method || 'SMA', - maType: info.maType || 'SMA', - offset: info.offset || 0, - primarySource: info.primarySource || 'close', - secondarySource: info.secondarySource || 'close', - // Volume Profile-specific draft - vpRowsLayout: info.rowsLayout || 'rows', // 'rows' | 'ticks' - vpRowSize: info.rowSize != null - ? info.rowSize - : (info.rowsLayout === 'ticks' ? 1 : (info.bucketCount || info.period || 24)), - vpVolumeMode: info.volumeMode || 'updown', // 'updown' | 'total' | 'delta' - vpPlacement: info.placement || 'right', - vpWidthPercent: info.widthPercent != null ? info.widthPercent : 15, - vpValueAreaPct: info.valueAreaPct != null ? Math.round(info.valueAreaPct * 100) : 70, - vpShowPOC: info.showPOC !== false, - vpShowValueArea: info.showValueArea !== false, - vpShowDevelopingPOC: info.showDevelopingPOC === true, - vpShowDevelopingVA: info.showDevelopingVA === true, - vpLabelsOnPriceScale: info.labelsOnPriceScale !== false, - vpValuesInStatusLine: info.valuesInStatusLine !== false, - vpInputsInStatusLine: info.inputsInStatusLine !== false, - vpUpColor: info.upColor || _cssVar('--pywry-tvchart-vp-up'), - vpDownColor: info.downColor || _cssVar('--pywry-tvchart-vp-down'), - vpVAUpColor: info.vaUpColor || _cssVar('--pywry-tvchart-vp-va-up'), - vpVADownColor: info.vaDownColor || _cssVar('--pywry-tvchart-vp-va-down'), - vpPOCColor: info.pocColor || _cssVar('--pywry-tvchart-vp-poc'), - vpDevelopingPOCColor: info.developingPOCColor || _cssVar('--pywry-tvchart-ind-tertiary'), - vpDevelopingVAColor: info.developingVAColor || _cssVar('--pywry-tvchart-vp-va-up'), - // BB-specific fill settings - showBandFill: info.showBandFill !== undefined ? info.showBandFill : true, - bandFillColor: info.bandFillColor || '#2196f3', - bandFillOpacity: info.bandFillOpacity !== undefined ? info.bandFillOpacity : 100, - // RSI-specific - smoothingLine: info.smoothingLine || 'SMA', - smoothingLength: info.smoothingLength || 14, - showUpperLimit: info.showUpperLimit !== false, - showLowerLimit: info.showLowerLimit !== false, - showMiddleLimit: info.showMiddleLimit !== undefined ? info.showMiddleLimit : false, - upperLimitValue: info.upperLimitValue || 70, - lowerLimitValue: info.lowerLimitValue || 30, - middleLimitValue: info.middleLimitValue || 50, - upperLimitColor: info.upperLimitColor || '#787b86', - lowerLimitColor: info.lowerLimitColor || '#787b86', - middleLimitColor: info.middleLimitColor || '#787b86', - showBackground: info.showBackground !== undefined ? info.showBackground : true, - bgColor: info.bgColor || '#7b1fa2', - bgOpacity: info.bgOpacity !== undefined ? info.bgOpacity : 0.05, - // Binary indicator fill/output settings - showPositiveFill: info.showPositiveFill !== undefined ? info.showPositiveFill : true, - positiveFillColor: info.positiveFillColor || '#26a69a', - positiveFillOpacity: info.positiveFillOpacity !== undefined ? info.positiveFillOpacity : 100, - showNegativeFill: info.showNegativeFill !== undefined ? info.showNegativeFill : true, - negativeFillColor: info.negativeFillColor || '#ef5350', - negativeFillOpacity: info.negativeFillOpacity !== undefined ? info.negativeFillOpacity : 100, - precision: info.precision || 'default', - labelsOnPriceScale: info.labelsOnPriceScale !== false, - valuesInStatusLine: info.valuesInStatusLine !== false, - inputsInStatusLine: info.inputsInStatusLine !== false, - // Per-plot visibility/style - plotStyles: {}, - }; - // Initialize per-plot style drafts - for (var pi = 0; pi < groupSids.length; pi++) { - var pInfo = _activeIndicators[groupSids[pi]]; - draft.plotStyles[groupSids[pi]] = { - visible: pInfo.visible !== false, - color: pInfo.color || '#e6b32c', - lineWidth: pInfo.lineWidth || 2, - lineStyle: pInfo.lineStyle || 0, - }; - } - - var activeTab = 'inputs'; - - var overlay = document.createElement('div'); - overlay.className = 'tv-settings-overlay'; - _tvSetChartInteractionLocked(info.chartId, true); - function closeOverlay() { - _tvSetChartInteractionLocked(info.chartId, false); - if (overlay.parentNode) overlay.parentNode.removeChild(overlay); - } - overlay.addEventListener('click', function(e) { if (e.target === overlay) closeOverlay(); }); - overlay.addEventListener('mousedown', function(e) { e.stopPropagation(); }); - overlay.addEventListener('wheel', function(e) { e.stopPropagation(); }); - - var panel = document.createElement('div'); - panel.className = 'tv-settings-panel'; - panel.style.cssText = 'width:400px;flex-direction:column;max-height:75vh;position:relative;'; - overlay.appendChild(panel); - - var header = document.createElement('div'); - header.className = 'tv-settings-header'; - header.style.cssText = 'position:relative;flex-direction:column;align-items:stretch;padding-bottom:0;'; - var hdrRow = document.createElement('div'); - hdrRow.style.cssText = 'display:flex;align-items:center;gap:8px;'; - var titleEl = document.createElement('h3'); - titleEl.textContent = (isBB ? 'Bollinger Bands' : info.name) + ' Settings'; - hdrRow.appendChild(titleEl); - var closeBtn = document.createElement('button'); - closeBtn.className = 'tv-settings-close'; - closeBtn.innerHTML = ''; - closeBtn.addEventListener('click', closeOverlay); - hdrRow.appendChild(closeBtn); - header.appendChild(hdrRow); - - // Tab bar: Inputs | Style | Visibility - var tabBar = document.createElement('div'); - tabBar.className = 'tv-ind-settings-tabs'; - var tabs = ['Inputs', 'Style', 'Visibility']; - var tabEls = {}; - tabs.forEach(function(t) { - var te = document.createElement('div'); - te.className = 'tv-ind-settings-tab' + (t.toLowerCase() === activeTab ? ' active' : ''); - te.textContent = t; - te.addEventListener('click', function() { - activeTab = t.toLowerCase(); - tabs.forEach(function(tn) { tabEls[tn].classList.toggle('active', tn.toLowerCase() === activeTab); }); - renderBody(); - }); - tabEls[t] = te; - tabBar.appendChild(te); - }); - header.appendChild(tabBar); - panel.appendChild(header); - - var body = document.createElement('div'); - body.className = 'tv-settings-body'; - body.style.cssText = 'flex:1;overflow-y:auto;min-height:80px;'; - panel.appendChild(body); - - var foot = document.createElement('div'); - foot.className = 'tv-settings-footer'; - foot.style.position = 'relative'; - var cancelBtn = document.createElement('button'); - cancelBtn.className = 'ts-btn-cancel'; - cancelBtn.textContent = 'Cancel'; - cancelBtn.addEventListener('click', closeOverlay); - foot.appendChild(cancelBtn); - var okBtn = document.createElement('button'); - okBtn.className = 'ts-btn-ok'; - okBtn.textContent = 'Ok'; - okBtn.addEventListener('click', function() { - closeOverlay(); - _tvApplyIndicatorSettings(seriesId, draft); - }); - foot.appendChild(okBtn); - panel.appendChild(foot); - - // ---- Row builder helpers ---- - function addSection(parent, text) { - var sec = document.createElement('div'); - sec.className = 'tv-settings-section'; - sec.textContent = text; - parent.appendChild(sec); - } - function addColorRow(parent, label, val, onChange) { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - var lbl = document.createElement('label'); lbl.textContent = label; row.appendChild(lbl); - var ctrl = document.createElement('div'); ctrl.className = 'ts-controls'; ctrl.style.position = 'relative'; - var swatch = document.createElement('div'); swatch.className = 'ts-swatch'; - swatch.dataset.baseColor = _tvColorToHex(val || '#e6b32c', '#e6b32c'); - swatch.dataset.opacity = String(_tvColorOpacityPercent(val, 100)); - swatch.style.background = val; - swatch.addEventListener('click', function(e) { - e.preventDefault(); e.stopPropagation(); - _tvShowColorOpacityPopup( - swatch, - swatch.dataset.baseColor, - _tvToNumber(swatch.dataset.opacity, 100), - overlay, - function(newColor, newOpacity) { - swatch.dataset.baseColor = newColor; - swatch.dataset.opacity = String(newOpacity); - swatch.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); - onChange(newColor, newOpacity); - } - ); - }); - ctrl.appendChild(swatch); row.appendChild(ctrl); parent.appendChild(row); - } - function addSelectRow(parent, label, opts, val, onChange) { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - var lbl = document.createElement('label'); lbl.textContent = label; row.appendChild(lbl); - var sel = document.createElement('select'); sel.className = 'ts-select'; - opts.forEach(function(o) { - var opt = document.createElement('option'); opt.value = o.v; opt.textContent = o.l; - if (String(o.v) === String(val)) opt.selected = true; sel.appendChild(opt); - }); - sel.addEventListener('change', function() { onChange(sel.value); }); - row.appendChild(sel); parent.appendChild(row); - } - function addNumberRow(parent, label, min, max, step, val, onChange) { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - var lbl = document.createElement('label'); lbl.textContent = label; row.appendChild(lbl); - var inp = document.createElement('input'); inp.type = 'number'; inp.className = 'ts-input'; - inp.min = min; inp.max = max; inp.step = step; inp.value = val; - inp.addEventListener('keydown', function(e) { e.stopPropagation(); }); - inp.addEventListener('input', function() { var v = parseFloat(inp.value); if (!isNaN(v) && v >= parseFloat(min)) onChange(v); }); - row.appendChild(inp); parent.appendChild(row); - } - function addCheckRow(parent, label, val, onChange) { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - var lbl = document.createElement('label'); lbl.textContent = label; row.appendChild(lbl); - var cb = document.createElement('input'); cb.type = 'checkbox'; cb.className = 'ts-checkbox'; - cb.checked = !!val; - cb.addEventListener('change', function() { onChange(cb.checked); }); - row.appendChild(cb); parent.appendChild(row); - } - - // Plot-style row: checkbox + color swatch + line style selector - function addPlotStyleRow(parent, label, plotDraft) { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - row.style.cssText = 'display:flex;align-items:center;gap:8px;'; - var cb = document.createElement('input'); cb.type = 'checkbox'; cb.className = 'ts-checkbox'; - cb.checked = plotDraft.visible !== false; - cb.addEventListener('change', function() { plotDraft.visible = cb.checked; }); - row.appendChild(cb); - var lbl = document.createElement('label'); lbl.textContent = label; lbl.style.flex = '1'; row.appendChild(lbl); - var swatch = document.createElement('div'); swatch.className = 'ts-swatch'; - swatch.dataset.baseColor = _tvColorToHex(plotDraft.color || '#e6b32c', '#e6b32c'); - swatch.dataset.opacity = String(_tvColorOpacityPercent(plotDraft.color, 100)); - swatch.style.background = plotDraft.color; - swatch.addEventListener('click', function(e) { - e.preventDefault(); e.stopPropagation(); - _tvShowColorOpacityPopup( - swatch, - swatch.dataset.baseColor, - _tvToNumber(swatch.dataset.opacity, 100), - overlay, - function(newColor, newOpacity) { - swatch.dataset.baseColor = newColor; - swatch.dataset.opacity = String(newOpacity); - swatch.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); - plotDraft.color = _tvColorWithOpacity(newColor, newOpacity, newColor); - } - ); - }); - row.appendChild(swatch); - var wSel = document.createElement('select'); wSel.className = 'ts-select'; wSel.style.width = '60px'; - [{v:1,l:'1px'},{v:2,l:'2px'},{v:3,l:'3px'},{v:4,l:'4px'}].forEach(function(o) { - var opt = document.createElement('option'); opt.value = o.v; opt.textContent = o.l; - if (Number(o.v) === Number(plotDraft.lineWidth)) opt.selected = true; wSel.appendChild(opt); - }); - wSel.addEventListener('change', function() { plotDraft.lineWidth = Number(wSel.value); }); - row.appendChild(wSel); - // Line style selector - var lsSel = document.createElement('select'); lsSel.className = 'ts-select'; lsSel.style.width = '80px'; - [{v:0,l:'Solid'},{v:1,l:'Dashed'},{v:2,l:'Dotted'},{v:3,l:'Lg Dash'}].forEach(function(o) { - var opt = document.createElement('option'); opt.value = o.v; opt.textContent = o.l; - if (Number(o.v) === Number(plotDraft.lineStyle || 0)) opt.selected = true; lsSel.appendChild(opt); - }); - lsSel.addEventListener('change', function() { plotDraft.lineStyle = Number(lsSel.value); }); - row.appendChild(lsSel); - parent.appendChild(row); - } - - // Horizontal-limit row: checkbox + color + value input - function addHlimitRow(parent, label, show, color, value, onShow, onColor, onValue) { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - row.style.cssText = 'display:flex;align-items:center;gap:8px;'; - var cb = document.createElement('input'); cb.type = 'checkbox'; cb.className = 'ts-checkbox'; - cb.checked = !!show; - cb.addEventListener('change', function() { onShow(cb.checked); }); - row.appendChild(cb); - var lbl = document.createElement('label'); lbl.textContent = label; lbl.style.flex = '1'; row.appendChild(lbl); - var swatch = document.createElement('div'); swatch.className = 'ts-swatch'; - swatch.dataset.baseColor = _tvColorToHex(color || '#787b86', '#787b86'); - swatch.dataset.opacity = String(_tvColorOpacityPercent(color, 100)); - swatch.style.background = color; - swatch.addEventListener('click', function(e) { - e.preventDefault(); e.stopPropagation(); - _tvShowColorOpacityPopup( - swatch, - swatch.dataset.baseColor, - _tvToNumber(swatch.dataset.opacity, 100), - overlay, - function(newColor, newOpacity) { - swatch.dataset.baseColor = newColor; - swatch.dataset.opacity = String(newOpacity); - swatch.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); - onColor(_tvColorWithOpacity(newColor, newOpacity, newColor)); - } - ); - }); - row.appendChild(swatch); - var inp = document.createElement('input'); inp.type = 'number'; inp.className = 'ts-input'; - inp.style.width = '54px'; inp.value = value; inp.step = 'any'; - inp.addEventListener('keydown', function(e) { e.stopPropagation(); }); - inp.addEventListener('input', function() { var v = parseFloat(inp.value); if (!isNaN(v)) onValue(v); }); - row.appendChild(inp); - parent.appendChild(row); - } - - function renderBody() { - body.innerHTML = ''; - - // ===================== INPUTS TAB ===================== - if (activeTab === 'inputs') { - var hasInputs = false; - - // Period / Length - if (info.period > 0) { - var isLengthType = isBB || (isLightweight && (type === 'moving-average-ex' || type === 'momentum' || type === 'correlation')); - addNumberRow(body, isLengthType ? 'Length' : 'Period', '1', '500', '1', draft.period, function(v) { draft.period = v; }); - hasInputs = true; - } - - // RSI inputs - if (isRSI) { - addSelectRow(body, 'Source', _SRC_OPTS, draft.source, function(v) { draft.source = v; }); - addSelectRow(body, 'Smoothing Line', [ - { v: 'SMA', l: 'SMA' }, { v: 'EMA', l: 'EMA' }, { v: 'WMA', l: 'WMA' }, - ], draft.smoothingLine, function(v) { draft.smoothingLine = v; }); - addNumberRow(body, 'Smoothing Length', '1', '200', '1', draft.smoothingLength, function(v) { draft.smoothingLength = v; }); - hasInputs = true; - } - - // Bollinger Bands inputs - if (isBB) { - addSelectRow(body, 'Source', _SRC_OPTS, draft.source, function(v) { draft.source = v; }); - addNumberRow(body, 'Mult', '0.1', '10', '0.1', draft.multiplier, function(v) { draft.multiplier = v; }); - addNumberRow(body, 'Offset', '-500', '500', '1', draft.offset, function(v) { draft.offset = v; }); - addSelectRow(body, 'MA Type', [ - { v: 'SMA', l: 'SMA' }, { v: 'EMA', l: 'EMA' }, { v: 'WMA', l: 'WMA' }, - ], draft.maType, function(v) { draft.maType = v; }); - hasInputs = true; - } - - // SMA / EMA / WMA inputs - if (isMA) { - addSelectRow(body, 'Source', _SRC_OPTS, draft.source, function(v) { draft.source = v; }); - hasInputs = true; - } - - // ATR inputs - if (isATR) { - addSelectRow(body, 'Source', _SRC_OPTS.slice(0, 4), draft.source, function(v) { draft.source = v; }); - hasInputs = true; - } - - // Lightweight examples - if (isLightweight) { - if (type === 'moving-average-ex') { - addSelectRow(body, 'Source', _SRC_OPTS, draft.source, function(v) { draft.source = v; }); - addSelectRow(body, 'Method', [ - { v: 'SMA', l: 'SMA' }, { v: 'EMA', l: 'EMA' }, { v: 'WMA', l: 'WMA' }, - ], draft.method, function(v) { draft.method = v; }); - hasInputs = true; - } else if (type === 'momentum' || type === 'percent-change') { - addSelectRow(body, 'Source', _SRC_OPTS, draft.source, function(v) { draft.source = v; }); - hasInputs = true; - } else if (type === 'correlation' || type === 'spread' || type === 'ratio' || type === 'sum' || type === 'product') { - // Single Source dropdown (applies to both primary and secondary) - addSelectRow(body, 'Source', _SRC_OPTS, draft.primarySource, function(v) { - draft.primarySource = v; - draft.secondarySource = v; - }); - // Symbol field showing secondary symbol with edit / refresh buttons - var secEntry = window.__PYWRY_TVCHARTS__[info.chartId]; - var secSymText = (secEntry && secEntry._compareSymbols && secEntry._compareSymbols[info.secondarySeriesId]) || info.secondarySeriesId || ''; - var symRow = document.createElement('div'); - symRow.className = 'tv-settings-row tv-settings-row-spaced'; - var symLbl = document.createElement('label'); symLbl.textContent = 'Symbol'; symRow.appendChild(symLbl); - var symCtrl = document.createElement('div'); symCtrl.style.cssText = 'display:flex;align-items:center;gap:6px;flex:1;justify-content:flex-end;'; - var symVal = document.createElement('span'); - symVal.style.cssText = 'font-size:13px;color:var(--pywry-tvchart-text,#d1d4dc);direction:rtl;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;'; - symVal.textContent = secSymText; - symCtrl.appendChild(symVal); - // Edit (pencil) button - var editBtn = document.createElement('button'); - editBtn.className = 'tv-settings-icon-btn'; - editBtn.title = 'Change symbol'; - editBtn.innerHTML = ''; - editBtn.addEventListener('click', function() { - closeOverlay(); - // Mark that this new indicator should replace the existing one - var editEntry = window.__PYWRY_TVCHARTS__[info.chartId]; - if (editEntry) editEntry._pendingReplaceIndicator = seriesId; - _tvShowIndicatorSymbolPicker(info.chartId, { - name: info.name, - key: type, - requiresSecondary: true, - _primarySource: draft.primarySource, - _secondarySource: draft.secondarySource, - }); - }); - symCtrl.appendChild(editBtn); - // Refresh button - var refreshBtn = document.createElement('button'); - refreshBtn.className = 'tv-settings-icon-btn'; - refreshBtn.title = 'Refresh data'; - refreshBtn.innerHTML = ''; - refreshBtn.addEventListener('click', function() { - closeOverlay(); - _tvApplyIndicatorSettings(seriesId, draft); - }); - symCtrl.appendChild(refreshBtn); - symRow.appendChild(symCtrl); - body.appendChild(symRow); - hasInputs = true; - } - } - - // Volume SMA - if (isVolSMA) { - addSelectRow(body, 'Source', [{ v: 'volume', l: 'Volume' }], 'volume', function() {}); - hasInputs = true; - } - - // Volume Profile inputs (VPVR / VPFR) - if (isVP) { - addSelectRow(body, 'Rows Layout', [ - { v: 'rows', l: 'Number Of Rows' }, - { v: 'ticks', l: 'Ticks Per Row' }, - ], draft.vpRowsLayout, function(v) { - draft.vpRowsLayout = v; - if (v === 'ticks') { - if (!draft.vpRowSize || draft.vpRowSize > 100) draft.vpRowSize = 1; - } else { - if (!draft.vpRowSize || draft.vpRowSize < 4) draft.vpRowSize = 24; - } - _tvApplyVPDraftLive(seriesId, draft); - renderBody(); - }); - addNumberRow( - body, - 'Row Size', - draft.vpRowsLayout === 'ticks' ? '1' : '4', - draft.vpRowsLayout === 'ticks' ? '1000' : '500', - draft.vpRowsLayout === 'ticks' ? '0.0001' : '1', - draft.vpRowSize, - function(v) { draft.vpRowSize = v; _tvApplyVPDraftLive(seriesId, draft); } - ); - addSelectRow(body, 'Volume', [ - { v: 'updown', l: 'Up/Down' }, - { v: 'total', l: 'Total' }, - { v: 'delta', l: 'Delta' }, - ], draft.vpVolumeMode, function(v) { - draft.vpVolumeMode = v; - _tvApplyVPDraftLive(seriesId, draft); - }); - addNumberRow(body, 'Value Area Volume', '10', '95', '1', draft.vpValueAreaPct, function(v) { - draft.vpValueAreaPct = v; - _tvApplyVPDraftLive(seriesId, draft); - }); - hasInputs = true; - } - - if (!hasInputs) { - var noRow = document.createElement('div'); - noRow.className = 'tv-settings-row'; - noRow.style.cssText = 'color:var(--pywry-tvchart-text-muted,#787b86);font-size:12px;'; - noRow.textContent = 'No configurable inputs.'; - body.appendChild(noRow); - } - - // ===================== STYLE TAB ===================== - } else if (activeTab === 'style') { - // Volume Profile style — full custom panel (skip the generic plot rows) - if (isVP) { - function liveVP() { _tvApplyVPDraftLive(seriesId, draft); } - addSection(body, 'VOLUME PROFILE'); - addNumberRow(body, 'Width (% of pane)', '2', '60', '1', draft.vpWidthPercent, function(v) { draft.vpWidthPercent = v; liveVP(); }); - addSelectRow(body, 'Placement', [ - { v: 'right', l: 'Right' }, - { v: 'left', l: 'Left' }, - ], draft.vpPlacement, function(v) { draft.vpPlacement = v; liveVP(); }); - addColorRow(body, 'Up Volume', draft.vpUpColor, function(v, op) { draft.vpUpColor = _tvColorWithOpacity(v, op, v); liveVP(); }); - addColorRow(body, 'Down Volume', draft.vpDownColor, function(v, op) { draft.vpDownColor = _tvColorWithOpacity(v, op, v); liveVP(); }); - addColorRow(body, 'Value Area Up', draft.vpVAUpColor, function(v, op) { draft.vpVAUpColor = _tvColorWithOpacity(v, op, v); liveVP(); }); - addColorRow(body, 'Value Area Down', draft.vpVADownColor, function(v, op) { draft.vpVADownColor = _tvColorWithOpacity(v, op, v); liveVP(); }); - - addSection(body, 'POC'); - addCheckRow(body, 'Show POC', draft.vpShowPOC, function(v) { draft.vpShowPOC = v; liveVP(); }); - addColorRow(body, 'POC Color', draft.vpPOCColor, function(v, op) { draft.vpPOCColor = _tvColorWithOpacity(v, op, v); liveVP(); }); - - addSection(body, 'DEVELOPING POC'); - addCheckRow(body, 'Show Developing POC', draft.vpShowDevelopingPOC, function(v) { draft.vpShowDevelopingPOC = v; liveVP(); }); - addColorRow(body, 'Developing POC Color', draft.vpDevelopingPOCColor, function(v, op) { draft.vpDevelopingPOCColor = _tvColorWithOpacity(v, op, v); liveVP(); }); - - addSection(body, 'VALUE AREA'); - addCheckRow(body, 'Highlight Value Area', draft.vpShowValueArea, function(v) { draft.vpShowValueArea = v; liveVP(); }); - addCheckRow(body, 'Show Developing VA', draft.vpShowDevelopingVA, function(v) { draft.vpShowDevelopingVA = v; liveVP(); }); - addColorRow(body, 'Developing VA Color', draft.vpDevelopingVAColor, function(v, op) { draft.vpDevelopingVAColor = _tvColorWithOpacity(v, op, v); liveVP(); }); - - addSection(body, 'OUTPUT VALUES'); - addCheckRow(body, 'Labels on price scale', draft.vpLabelsOnPriceScale, function(v) { draft.vpLabelsOnPriceScale = v; }); - addCheckRow(body, 'Values in status line', draft.vpValuesInStatusLine, function(v) { draft.vpValuesInStatusLine = v; }); - addSection(body, 'INPUT VALUES'); - addCheckRow(body, 'Inputs in status line', draft.vpInputsInStatusLine, function(v) { draft.vpInputsInStatusLine = v; }); - return; - } - - addSection(body, 'PLOTS'); - - // Multi-plot indicators (Bollinger Bands) - if (groupSids.length > 1) { - for (var gi = 0; gi < groupSids.length; gi++) { - var gInfo = _activeIndicators[groupSids[gi]]; - var plotLabel = gInfo ? gInfo.name : groupSids[gi]; - if (draft.plotStyles[groupSids[gi]]) { - addPlotStyleRow(body, plotLabel, draft.plotStyles[groupSids[gi]]); - } - } - } else { - // Single-plot indicator - addPlotStyleRow(body, info.name, draft.plotStyles[seriesId] || { visible: true, color: draft.color, lineWidth: draft.lineWidth, lineStyle: draft.lineStyle }); - } - - // RSI-specific: horizontal limits + background - if (isRSI) { - addSection(body, 'LEVELS'); - addHlimitRow(body, 'Upper Limit', draft.showUpperLimit, draft.upperLimitColor, draft.upperLimitValue, - function(v) { draft.showUpperLimit = v; }, function(v) { draft.upperLimitColor = v; }, function(v) { draft.upperLimitValue = v; }); - addHlimitRow(body, 'Middle Limit', draft.showMiddleLimit, draft.middleLimitColor, draft.middleLimitValue, - function(v) { draft.showMiddleLimit = v; }, function(v) { draft.middleLimitColor = v; }, function(v) { draft.middleLimitValue = v; }); - addHlimitRow(body, 'Lower Limit', draft.showLowerLimit, draft.lowerLimitColor, draft.lowerLimitValue, - function(v) { draft.showLowerLimit = v; }, function(v) { draft.lowerLimitColor = v; }, function(v) { draft.lowerLimitValue = v; }); - addSection(body, 'FILLS'); - addCheckRow(body, 'Background', draft.showBackground, function(v) { draft.showBackground = v; }); - if (draft.showBackground) { - addColorRow(body, 'Fill Color', draft.bgColor, function(v, op) { draft.bgColor = _tvColorWithOpacity(v, op, v); }); - } - } - - // Binary indicator fills + output/input values - if (isBinary) { - addSection(body, 'FILLS'); - // Positive fill: checkbox + color - var posFillRow = document.createElement('div'); - posFillRow.className = 'tv-settings-row tv-settings-row-spaced'; - posFillRow.style.cssText = 'display:flex;align-items:center;gap:8px;'; - var posCb = document.createElement('input'); posCb.type = 'checkbox'; posCb.className = 'ts-checkbox'; - posCb.checked = !!draft.showPositiveFill; - posCb.addEventListener('change', function() { draft.showPositiveFill = posCb.checked; }); - posFillRow.appendChild(posCb); - var posLbl = document.createElement('label'); posLbl.textContent = 'Positive fill'; posLbl.style.flex = '1'; posFillRow.appendChild(posLbl); - var posSwatch = document.createElement('div'); posSwatch.className = 'ts-swatch'; - posSwatch.dataset.baseColor = _tvColorToHex(draft.positiveFillColor || '#26a69a', '#26a69a'); - posSwatch.dataset.opacity = String(_tvColorOpacityPercent(draft.positiveFillColor, 100)); - posSwatch.style.background = draft.positiveFillColor; - posSwatch.addEventListener('click', function(e) { - e.preventDefault(); e.stopPropagation(); - _tvShowColorOpacityPopup( - posSwatch, - posSwatch.dataset.baseColor, - _tvToNumber(posSwatch.dataset.opacity, 100), - overlay, - function(newColor, newOpacity) { - posSwatch.dataset.baseColor = newColor; - posSwatch.dataset.opacity = String(newOpacity); - posSwatch.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); - draft.positiveFillColor = newColor; - draft.positiveFillOpacity = newOpacity; - } - ); - }); - posFillRow.appendChild(posSwatch); - body.appendChild(posFillRow); - // Negative fill: checkbox + color - var negFillRow = document.createElement('div'); - negFillRow.className = 'tv-settings-row tv-settings-row-spaced'; - negFillRow.style.cssText = 'display:flex;align-items:center;gap:8px;'; - var negCb = document.createElement('input'); negCb.type = 'checkbox'; negCb.className = 'ts-checkbox'; - negCb.checked = !!draft.showNegativeFill; - negCb.addEventListener('change', function() { draft.showNegativeFill = negCb.checked; }); - negFillRow.appendChild(negCb); - var negLbl = document.createElement('label'); negLbl.textContent = 'Negative fill'; negLbl.style.flex = '1'; negFillRow.appendChild(negLbl); - var negSwatch = document.createElement('div'); negSwatch.className = 'ts-swatch'; - negSwatch.dataset.baseColor = _tvColorToHex(draft.negativeFillColor || '#ef5350', '#ef5350'); - negSwatch.dataset.opacity = String(_tvColorOpacityPercent(draft.negativeFillColor, 100)); - negSwatch.style.background = draft.negativeFillColor; - negSwatch.addEventListener('click', function(e) { - e.preventDefault(); e.stopPropagation(); - _tvShowColorOpacityPopup( - negSwatch, - negSwatch.dataset.baseColor, - _tvToNumber(negSwatch.dataset.opacity, 100), - overlay, - function(newColor, newOpacity) { - negSwatch.dataset.baseColor = newColor; - negSwatch.dataset.opacity = String(newOpacity); - negSwatch.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); - draft.negativeFillColor = newColor; - draft.negativeFillOpacity = newOpacity; - } - ); - }); - negFillRow.appendChild(negSwatch); - body.appendChild(negFillRow); - - addSection(body, 'OUTPUT VALUES'); - addSelectRow(body, 'Precision', [ - { v: 'default', l: 'Default' }, { v: '0', l: '0' }, { v: '1', l: '1' }, - { v: '2', l: '2' }, { v: '3', l: '3' }, { v: '4', l: '4' }, - { v: '5', l: '5' }, { v: '6', l: '6' }, { v: '7', l: '7' }, { v: '8', l: '8' }, - ], draft.precision, function(v) { draft.precision = v; }); - addCheckRow(body, 'Labels on price scale', draft.labelsOnPriceScale, function(v) { draft.labelsOnPriceScale = v; }); - addCheckRow(body, 'Values in status line', draft.valuesInStatusLine, function(v) { draft.valuesInStatusLine = v; }); - - addSection(body, 'INPUT VALUES'); - addCheckRow(body, 'Inputs in status line', draft.inputsInStatusLine, function(v) { draft.inputsInStatusLine = v; }); - } - - // Bollinger Bands: band fill + output/input values - if (isBB) { - addSection(body, 'FILLS'); - addCheckRow(body, 'Plots Background', draft.showBandFill, function(v) { draft.showBandFill = v; renderBody(); }); - if (draft.showBandFill) { - addColorRow(body, 'Fill Color', draft.bandFillColor, function(v, op) { draft.bandFillColor = v; draft.bandFillOpacity = op; }); - } - - addSection(body, 'OUTPUT VALUES'); - addSelectRow(body, 'Precision', [ - { v: 'default', l: 'Default' }, { v: '0', l: '0' }, { v: '1', l: '1' }, - { v: '2', l: '2' }, { v: '3', l: '3' }, { v: '4', l: '4' }, - { v: '5', l: '5' }, { v: '6', l: '6' }, { v: '7', l: '7' }, { v: '8', l: '8' }, - ], draft.precision, function(v) { draft.precision = v; }); - addCheckRow(body, 'Labels on price scale', draft.labelsOnPriceScale, function(v) { draft.labelsOnPriceScale = v; }); - addCheckRow(body, 'Values in status line', draft.valuesInStatusLine, function(v) { draft.valuesInStatusLine = v; }); - - addSection(body, 'INPUT VALUES'); - addCheckRow(body, 'Inputs in status line', draft.inputsInStatusLine, function(v) { draft.inputsInStatusLine = v; }); - } - - // ATR / generic single-series: just color + width already covered above - - // ===================== VISIBILITY TAB ===================== - } else if (activeTab === 'visibility') { - addSection(body, 'TIMEFRAME VISIBILITY'); - var intervals = [ - { key: 'seconds', label: 'Seconds', rangeLabel: '1s \u2013 59s' }, - { key: 'minutes', label: 'Minutes', rangeLabel: '1m \u2013 59m' }, - { key: 'hours', label: 'Hours', rangeLabel: '1H \u2013 24H' }, - { key: 'days', label: 'Days', rangeLabel: '1D \u2013 1Y' }, - { key: 'weeks', label: 'Weeks', rangeLabel: '1W \u2013 52W' }, - { key: 'months', label: 'Months', rangeLabel: '1M \u2013 12M' }, - ]; - if (!draft.visibility) { - draft.visibility = {}; - intervals.forEach(function(iv) { draft.visibility[iv.key] = true; }); - } - intervals.forEach(function(iv) { - var row = document.createElement('div'); - row.className = 'tv-settings-row tv-settings-row-spaced'; - row.style.cssText = 'display:flex;align-items:center;gap:8px;'; - var cb = document.createElement('input'); cb.type = 'checkbox'; cb.className = 'ts-checkbox'; - cb.checked = draft.visibility[iv.key] !== false; - cb.addEventListener('change', function() { draft.visibility[iv.key] = cb.checked; }); - row.appendChild(cb); - var lbl = document.createElement('label'); lbl.style.flex = '1'; - lbl.textContent = iv.label; - row.appendChild(lbl); - var range = document.createElement('span'); - range.style.cssText = 'color:var(--pywry-tvchart-text-muted,#787b86);font-size:11px;'; - range.textContent = iv.rangeLabel; - row.appendChild(range); - body.appendChild(row); - }); - } - } - - renderBody(); - _tvAppendOverlay(chartId, overlay); -} - -function _tvApplyIndicatorSettings(seriesId, newSettings) { - var info = _activeIndicators[seriesId]; - if (!info) return; - var entry = window.__PYWRY_TVCHARTS__[info.chartId]; - if (!entry) return; - var rawData = _tvSeriesRawData(entry, info.sourceSeriesId || 'main'); - var periodChanged = !!(newSettings.period && info.period > 0 && newSettings.period !== info.period); - var multChanged = !!(info.group && newSettings.multiplier !== (info.multiplier || 2)); - var sourceChanged = !!(newSettings.source && newSettings.source !== info.source); - var methodChanged = !!(newSettings.method && newSettings.method !== info.method); - var maTypeChanged = !!(newSettings.maType && newSettings.maType !== (info.maType || 'SMA')); - var offsetChanged = (newSettings.offset !== undefined && newSettings.offset !== (info.offset || 0)); - var primarySourceChanged = !!(newSettings.primarySource && newSettings.primarySource !== info.primarySource); - var secondarySourceChanged = !!(newSettings.secondarySource && newSettings.secondarySource !== info.secondarySource); - var type = info.type || info.name; - - // Apply per-plot styles - var styleSids = []; - if (info.group) { - var allKeys = Object.keys(_activeIndicators); - for (var k = 0; k < allKeys.length; k++) { if (_activeIndicators[allKeys[k]].group === info.group) styleSids.push(allKeys[k]); } - } else { styleSids = [seriesId]; } - for (var si = 0; si < styleSids.length; si++) { - var ss = entry.seriesMap[styleSids[si]]; - var plotDraft = newSettings.plotStyles && newSettings.plotStyles[styleSids[si]]; - var isBaselineSeries = !!(_activeIndicators[styleSids[si]] && _activeIndicators[styleSids[si]].isBaseline); - if (plotDraft) { - var opts; - if (isBaselineSeries) { - opts = { topLineColor: plotDraft.color, bottomLineColor: plotDraft.color, lineWidth: plotDraft.lineWidth, lineStyle: plotDraft.lineStyle || 0 }; - } else { - opts = { color: plotDraft.color, lineWidth: plotDraft.lineWidth, lineStyle: plotDraft.lineStyle || 0 }; - } - if (plotDraft.visible === false) opts.visible = false; - else opts.visible = true; - if (ss) { try { ss.applyOptions(opts); } catch(e) {} } - if (_activeIndicators[styleSids[si]]) { - _activeIndicators[styleSids[si]].color = plotDraft.color; - _activeIndicators[styleSids[si]].lineWidth = plotDraft.lineWidth; - _activeIndicators[styleSids[si]].lineStyle = plotDraft.lineStyle; - _activeIndicators[styleSids[si]].visible = plotDraft.visible; - } - } else { - // Fallback to draft top-level color/lineWidth - if (isBaselineSeries) { - if (ss) { try { ss.applyOptions({ topLineColor: newSettings.color, bottomLineColor: newSettings.color, lineWidth: newSettings.lineWidth }); } catch(e) {} } - } else { - if (ss) { try { ss.applyOptions({ color: newSettings.color, lineWidth: newSettings.lineWidth }); } catch(e) {} } - } - if (_activeIndicators[styleSids[si]]) { _activeIndicators[styleSids[si]].color = newSettings.color; _activeIndicators[styleSids[si]].lineWidth = newSettings.lineWidth; } - } - } - - // Apply baseline fill settings for binary indicators - if (info.isBaseline) { - var bSeries = entry.seriesMap[seriesId]; - if (bSeries) { - var fillOpts = {}; - if (newSettings.showPositiveFill) { - var pc = newSettings.positiveFillColor || '#26a69a'; - var pOp = _tvClamp(_tvToNumber(newSettings.positiveFillOpacity, 100), 0, 100) / 100; - fillOpts.topFillColor1 = _tvHexToRgba(pc, 0.28 * pOp); - fillOpts.topFillColor2 = _tvHexToRgba(pc, 0.05 * pOp); - } else { - fillOpts.topFillColor1 = 'transparent'; - fillOpts.topFillColor2 = 'transparent'; - } - if (newSettings.showNegativeFill) { - var nc = newSettings.negativeFillColor || '#ef5350'; - var nOp = _tvClamp(_tvToNumber(newSettings.negativeFillOpacity, 100), 0, 100) / 100; - fillOpts.bottomFillColor1 = _tvHexToRgba(nc, 0.05 * nOp); - fillOpts.bottomFillColor2 = _tvHexToRgba(nc, 0.28 * nOp); - } else { - fillOpts.bottomFillColor1 = 'transparent'; - fillOpts.bottomFillColor2 = 'transparent'; - } - try { bSeries.applyOptions(fillOpts); } catch(e) {} - } - info.showPositiveFill = newSettings.showPositiveFill; - info.positiveFillColor = newSettings.positiveFillColor; - info.positiveFillOpacity = newSettings.positiveFillOpacity; - info.showNegativeFill = newSettings.showNegativeFill; - info.negativeFillColor = newSettings.negativeFillColor; - info.negativeFillOpacity = newSettings.negativeFillOpacity; - info.precision = newSettings.precision; - info.labelsOnPriceScale = newSettings.labelsOnPriceScale; - info.valuesInStatusLine = newSettings.valuesInStatusLine; - info.inputsInStatusLine = newSettings.inputsInStatusLine; - // Apply precision - if (bSeries && newSettings.precision && newSettings.precision !== 'default') { - try { bSeries.applyOptions({ priceFormat: { type: 'price', precision: Number(newSettings.precision), minMove: Math.pow(10, -Number(newSettings.precision)) } }); } catch(e) {} - } - // Apply labels on price scale - if (bSeries) { - try { bSeries.applyOptions({ lastValueVisible: newSettings.labelsOnPriceScale !== false }); } catch(e) {} - } - } - - // Store RSI-specific settings - if (newSettings.showUpperLimit !== undefined) { - info.showUpperLimit = newSettings.showUpperLimit; - info.upperLimitValue = newSettings.upperLimitValue; - info.upperLimitColor = newSettings.upperLimitColor; - info.showLowerLimit = newSettings.showLowerLimit; - info.lowerLimitValue = newSettings.lowerLimitValue; - info.lowerLimitColor = newSettings.lowerLimitColor; - info.showMiddleLimit = newSettings.showMiddleLimit; - info.middleLimitValue = newSettings.middleLimitValue; - info.middleLimitColor = newSettings.middleLimitColor; - info.showBackground = newSettings.showBackground; - info.bgColor = newSettings.bgColor; - info.bgOpacity = newSettings.bgOpacity; - } - // Store smoothing settings - if (newSettings.smoothingLine !== undefined) info.smoothingLine = newSettings.smoothingLine; - if (newSettings.smoothingLength !== undefined) info.smoothingLength = newSettings.smoothingLength; - // Store BB-specific settings (propagate to all group members) - if (type === 'bollinger-bands' && info.group) { - var bbKeys = Object.keys(_activeIndicators); - for (var bk = 0; bk < bbKeys.length; bk++) { - if (_activeIndicators[bbKeys[bk]].group !== info.group) continue; - _activeIndicators[bbKeys[bk]].showBandFill = newSettings.showBandFill; - _activeIndicators[bbKeys[bk]].bandFillColor = newSettings.bandFillColor; - _activeIndicators[bbKeys[bk]].bandFillOpacity = newSettings.bandFillOpacity; - _activeIndicators[bbKeys[bk]].precision = newSettings.precision; - _activeIndicators[bbKeys[bk]].labelsOnPriceScale = newSettings.labelsOnPriceScale; - _activeIndicators[bbKeys[bk]].valuesInStatusLine = newSettings.valuesInStatusLine; - _activeIndicators[bbKeys[bk]].inputsInStatusLine = newSettings.inputsInStatusLine; - } - } - // Store visibility - if (newSettings.visibility) info.visibility = newSettings.visibility; - - // Recompute if period / multiplier / source / method / maType / offset changed - if ((periodChanged || multChanged || sourceChanged || methodChanged || maTypeChanged || offsetChanged || primarySourceChanged || secondarySourceChanged) && rawData) { - var baseName = info.name.replace(/\s*\(\d+\)\s*$/, ''); - var newPeriod = newSettings.period || info.period; - var newMult = newSettings.multiplier || info.multiplier || 2; - - if (type === 'moving-average-ex') { - var maSource = newSettings.source || info.source || 'close'; - var maMethod = newSettings.method || info.method || 'SMA'; - var maBase = rawData.map(function(p) { return { time: p.time, value: _tvIndicatorValue(p, maSource) }; }); - var maFn = maMethod === 'EMA' ? _computeEMA : (maMethod === 'WMA' ? _computeWMA : _computeSMA); - var maVals = maFn(maBase, Math.max(1, newPeriod), 'value'); - var maSeries = entry.seriesMap[seriesId]; - if (maSeries) maSeries.setData(maVals.filter(function(v) { return v.value !== undefined; })); - info.period = Math.max(1, newPeriod); - info.source = maSource; - info.method = maMethod; - } else if (type === 'momentum') { - var momSource = newSettings.source || info.source || 'close'; - var momSeries = entry.seriesMap[seriesId]; - if (momSeries) momSeries.setData(_tvComputeMomentum(rawData, Math.max(1, newPeriod), momSource).filter(function(v) { return v.value !== undefined; })); - info.period = Math.max(1, newPeriod); - info.source = momSource; - } else if (type === 'percent-change') { - var pcSource = newSettings.source || info.source || 'close'; - var pcSeries = entry.seriesMap[seriesId]; - if (pcSeries) pcSeries.setData(_tvComputePercentChange(rawData, pcSource).filter(function(v) { return v.value !== undefined; })); - info.source = pcSource; - } else if (type === 'correlation') { - var secData = _tvSeriesRawData(entry, info.secondarySeriesId); - var cSeries = entry.seriesMap[seriesId]; - var psrc = newSettings.primarySource || info.primarySource || 'close'; - var ssrc = newSettings.secondarySource || info.secondarySource || 'close'; - if (cSeries) cSeries.setData(_tvComputeCorrelation(rawData, secData, Math.max(2, newPeriod), psrc, ssrc).filter(function(v) { return v.value !== undefined; })); - info.period = Math.max(2, newPeriod); - info.primarySource = psrc; - info.secondarySource = ssrc; - } else if (type === 'spread' || type === 'ratio' || type === 'sum' || type === 'product') { - var secData2 = _tvSeriesRawData(entry, info.secondarySeriesId); - var biSeries = entry.seriesMap[seriesId]; - var psrc2 = newSettings.primarySource || info.primarySource || 'close'; - var ssrc2 = newSettings.secondarySource || info.secondarySource || 'close'; - if (biSeries) biSeries.setData(_tvComputeBinary(rawData, secData2, psrc2, ssrc2, type).filter(function(v) { return v.value !== undefined; })); - info.primarySource = psrc2; - info.secondarySource = ssrc2; - } else if (type === 'average-price') { - var apSeries = entry.seriesMap[seriesId]; - if (apSeries) apSeries.setData(_tvComputeAveragePrice(rawData).filter(function(v) { return v.value !== undefined; })); - } else if (type === 'median-price') { - var mpSeries = entry.seriesMap[seriesId]; - if (mpSeries) mpSeries.setData(_tvComputeMedianPrice(rawData).filter(function(v) { return v.value !== undefined; })); - } else if (type === 'weighted-close') { - var wcSeries = entry.seriesMap[seriesId]; - if (wcSeries) wcSeries.setData(_tvComputeWeightedClose(rawData).filter(function(v) { return v.value !== undefined; })); - } else if (baseName === 'SMA' || baseName === 'EMA' || baseName === 'WMA') { - var maSource2 = newSettings.source || info.source || 'close'; - var fn2 = baseName === 'SMA' ? _computeSMA : baseName === 'EMA' ? _computeEMA : _computeWMA; - var s2 = entry.seriesMap[seriesId]; - var maBase2 = rawData.map(function(p) { return { time: p.time, value: _tvIndicatorValue(p, maSource2) }; }); - if (s2) s2.setData(fn2(maBase2, newPeriod, 'value').filter(function(v) { return v.value !== undefined; })); - info.period = newPeriod; - info.source = maSource2; - } else if (info.group && type === 'bollinger-bands') { - var bbSource = newSettings.source || info.source || 'close'; - var bbMaType = newSettings.maType || info.maType || 'SMA'; - var bbOffset = newSettings.offset !== undefined ? newSettings.offset : (info.offset || 0); - var bbBase = rawData.map(function(p) { return { time: p.time, close: _tvIndicatorValue(p, bbSource) }; }); - var bb2 = _computeBollingerBands(bbBase, newPeriod, newMult, bbMaType, bbOffset); - var gKeys = Object.keys(_activeIndicators); - for (var gi = 0; gi < gKeys.length; gi++) { - if (_activeIndicators[gKeys[gi]].group !== info.group) continue; - _activeIndicators[gKeys[gi]].period = newPeriod; - _activeIndicators[gKeys[gi]].multiplier = newMult; - _activeIndicators[gKeys[gi]].source = bbSource; - _activeIndicators[gKeys[gi]].maType = bbMaType; - _activeIndicators[gKeys[gi]].offset = bbOffset; - var gs2 = entry.seriesMap[gKeys[gi]]; - var bbD = gKeys[gi].indexOf('upper') >= 0 ? bb2.upper : gKeys[gi].indexOf('lower') >= 0 ? bb2.lower : bb2.middle; - if (gs2) gs2.setData(bbD.filter(function(v) { return v.value !== undefined; })); - } - } else if (info.name === 'RSI') { - var rsiSource = newSettings.source || info.source || 'close'; - var rsiBase = rawData.map(function(p) { return { time: p.time, close: _tvIndicatorValue(p, rsiSource) }; }); - var rsN = entry.seriesMap[seriesId]; - if (rsN) rsN.setData(_computeRSI(rsiBase, newPeriod).filter(function(v) { return v.value !== undefined; })); - info.period = newPeriod; - info.source = rsiSource; - } else if (info.name === 'ATR') { - var atN = entry.seriesMap[seriesId]; - if (atN) atN.setData(_computeATR(rawData, newPeriod).filter(function(v) { return v.value !== undefined; })); - info.period = newPeriod; - } else if (info.name === 'Volume SMA') { - var vN = entry.seriesMap[seriesId]; - if (vN) vN.setData(_computeSMA(rawData, newPeriod, 'volume').filter(function(v) { return v.value !== undefined; })); - info.period = newPeriod; - } - } - // Volume Profile: apply settings + recompute if anything that - // affects the bucket layout changed (rows-layout / row-size / - // developing-poc/va toggles). - if (type === 'volume-profile-fixed' || type === 'volume-profile-visible') { - var vpSlot = _volumeProfilePrimitives[seriesId]; - if (vpSlot) { - var prevOpts = vpSlot.opts || {}; - var newRowsLayout = newSettings.vpRowsLayout || vpSlot.rowsLayout || 'rows'; - var newRowSize = newSettings.vpRowSize != null ? Number(newSettings.vpRowSize) : vpSlot.rowSize; - var newVolumeMode = newSettings.vpVolumeMode || vpSlot.volumeMode || 'updown'; - var newValueAreaPct = newSettings.vpValueAreaPct != null - ? newSettings.vpValueAreaPct / 100 - : (prevOpts.valueAreaPct || 0.70); - var newShowDevPOC = newSettings.vpShowDevelopingPOC === true; - var newShowDevVA = newSettings.vpShowDevelopingVA === true; - - vpSlot.opts = { - rowsLayout: newRowsLayout, - rowSize: newRowSize, - volumeMode: newVolumeMode, - widthPercent: newSettings.vpWidthPercent != null ? newSettings.vpWidthPercent : prevOpts.widthPercent, - placement: newSettings.vpPlacement || prevOpts.placement || 'right', - upColor: newSettings.vpUpColor || prevOpts.upColor, - downColor: newSettings.vpDownColor || prevOpts.downColor, - vaUpColor: newSettings.vpVAUpColor || prevOpts.vaUpColor, - vaDownColor: newSettings.vpVADownColor || prevOpts.vaDownColor, - pocColor: newSettings.vpPOCColor || prevOpts.pocColor, - developingPOCColor: newSettings.vpDevelopingPOCColor || prevOpts.developingPOCColor, - developingVAColor: newSettings.vpDevelopingVAColor || prevOpts.developingVAColor, - showPOC: newSettings.vpShowPOC !== undefined ? newSettings.vpShowPOC : prevOpts.showPOC, - showValueArea: newSettings.vpShowValueArea !== undefined ? newSettings.vpShowValueArea : prevOpts.showValueArea, - showDevelopingPOC: newShowDevPOC, - showDevelopingVA: newShowDevVA, - valueAreaPct: newValueAreaPct, - }; - - // Recompute when any compute-affecting field changed - var needsRecompute = newRowsLayout !== vpSlot.rowsLayout - || newRowSize !== vpSlot.rowSize - || newValueAreaPct !== (prevOpts.valueAreaPct || 0.70) - || newShowDevPOC !== (prevOpts.showDevelopingPOC === true) - || newShowDevVA !== (prevOpts.showDevelopingVA === true); - if (needsRecompute) { - vpSlot.rowsLayout = newRowsLayout; - vpSlot.rowSize = newRowSize; - vpSlot.volumeMode = newVolumeMode; - var fromIdx = info.fromIndex != null ? info.fromIndex : 0; - var toIdx = info.toIndex != null ? info.toIndex : (rawData.length - 1); - var newVp = _tvComputeVolumeProfile(rawData, fromIdx, toIdx, { - rowsLayout: newRowsLayout, - rowSize: newRowSize, - valueAreaPct: newValueAreaPct, - withDeveloping: newShowDevPOC || newShowDevVA, - }); - if (newVp) vpSlot.vpData = newVp; - } else { - vpSlot.volumeMode = newVolumeMode; - } - - info.rowsLayout = newRowsLayout; - info.rowSize = newRowSize; - info.volumeMode = newVolumeMode; - info.period = newRowsLayout === 'rows' ? newRowSize : 0; - info.widthPercent = vpSlot.opts.widthPercent; - info.placement = vpSlot.opts.placement; - info.upColor = vpSlot.opts.upColor; - info.downColor = vpSlot.opts.downColor; - info.vaUpColor = vpSlot.opts.vaUpColor; - info.vaDownColor = vpSlot.opts.vaDownColor; - info.pocColor = vpSlot.opts.pocColor; - info.developingPOCColor = vpSlot.opts.developingPOCColor; - info.developingVAColor = vpSlot.opts.developingVAColor; - info.showPOC = vpSlot.opts.showPOC; - info.showValueArea = vpSlot.opts.showValueArea; - info.showDevelopingPOC = newShowDevPOC; - info.showDevelopingVA = newShowDevVA; - info.valueAreaPct = newValueAreaPct; - if (newSettings.vpLabelsOnPriceScale !== undefined) info.labelsOnPriceScale = newSettings.vpLabelsOnPriceScale; - if (newSettings.vpValuesInStatusLine !== undefined) info.valuesInStatusLine = newSettings.vpValuesInStatusLine; - if (newSettings.vpInputsInStatusLine !== undefined) info.inputsInStatusLine = newSettings.vpInputsInStatusLine; - - if (vpSlot.primitive && vpSlot.primitive.triggerUpdate) vpSlot.primitive.triggerUpdate(); - } - } - - _tvRebuildIndicatorLegend(info.chartId); - // Re-render BB fills after settings change - if (type === 'bollinger-bands') { - _tvEnsureBBFillPrimitive(info.chartId); - _tvUpdateBBFill(info.chartId); - } -} - -function _tvHideIndicatorsPanel() { - if (_indicatorsOverlay && _indicatorsOverlay.parentNode) { - _indicatorsOverlay.parentNode.removeChild(_indicatorsOverlay); - } - if (_indicatorsOverlayChartId) _tvSetChartInteractionLocked(_indicatorsOverlayChartId, false); - _indicatorsOverlay = null; - _indicatorsOverlayChartId = null; - _tvRefreshLegendVisibility(); -} - -function _tvShowIndicatorsPanel(chartId) { - _tvHideIndicatorsPanel(); - chartId = chartId || 'main'; - var entry = window.__PYWRY_TVCHARTS__[chartId]; - if (!entry) { var keys = Object.keys(window.__PYWRY_TVCHARTS__); if (keys.length) { chartId = keys[0]; entry = window.__PYWRY_TVCHARTS__[chartId]; } } - if (!entry) return; - - var ds = window.__PYWRY_DRAWINGS__[chartId] || _tvEnsureDrawingLayer(chartId); - if (!ds) return; - - var overlay = document.createElement('div'); - overlay.className = 'tv-indicators-overlay'; - _indicatorsOverlay = overlay; - _indicatorsOverlayChartId = chartId; - _tvSetChartInteractionLocked(chartId, true); - _tvRefreshLegendVisibility(); - overlay.addEventListener('click', function(e) { - if (e.target === overlay) _tvHideIndicatorsPanel(); - }); - overlay.addEventListener('mousedown', function(e) { e.stopPropagation(); }); - overlay.addEventListener('wheel', function(e) { e.stopPropagation(); }); - - var panel = document.createElement('div'); - panel.className = 'tv-indicators-panel'; - overlay.appendChild(panel); - - // Header - var header = document.createElement('div'); - header.className = 'tv-indicators-header'; - var title = document.createElement('h3'); - title.textContent = 'Indicators'; - header.appendChild(title); - var closeBtn = document.createElement('button'); - closeBtn.className = 'tv-settings-close'; - closeBtn.innerHTML = ''; - closeBtn.addEventListener('click', function() { _tvHideIndicatorsPanel(); }); - header.appendChild(closeBtn); - panel.appendChild(header); - - // Search - var searchWrap = document.createElement('div'); - searchWrap.className = 'tv-indicators-search pywry-search-wrapper pywry-search-inline'; - searchWrap.style.position = 'relative'; - var searchIcon = document.createElement('span'); - searchIcon.className = 'pywry-search-icon'; - searchIcon.innerHTML = ''; - searchWrap.appendChild(searchIcon); - var searchInp = document.createElement('input'); - searchInp.type = 'text'; - searchInp.className = 'pywry-search-input'; - searchInp.placeholder = 'Search'; - searchInp.addEventListener('keydown', function(e) { e.stopPropagation(); }); - searchWrap.appendChild(searchInp); - panel.appendChild(searchWrap); - - // List - var list = document.createElement('div'); - list.className = 'tv-indicators-list pywry-scroll-container'; - panel.appendChild(list); - try { - if (window.PYWRY_SCROLLBARS && typeof window.PYWRY_SCROLLBARS.setup === 'function') { - window.PYWRY_SCROLLBARS.setup(list); - } - } catch(e) {} - - // Active indicators section - function renderList(filter) { - list.innerHTML = ''; - - // Active indicators - var activeKeys = Object.keys(_activeIndicators); - if (activeKeys.length > 0) { - var actSec = document.createElement('div'); - actSec.className = 'tv-indicators-section'; - actSec.textContent = 'ACTIVE'; - list.appendChild(actSec); - - var shown = {}; - for (var a = 0; a < activeKeys.length; a++) { - var ai = _activeIndicators[activeKeys[a]]; - if (ai.group && shown[ai.group]) continue; - if (ai.group) shown[ai.group] = true; - - (function(sid, info) { - var item = document.createElement('div'); - item.className = 'tv-indicator-item'; - var nameSpan = document.createElement('span'); - nameSpan.className = 'ind-name'; - // Extract base name (remove any trailing period in parentheses from the stored name) - var baseName = (info.name || '').replace(/\s*\(\d+\)\s*$/, ''); - nameSpan.textContent = baseName + (info.period ? ' (' + info.period + ')' : ''); - nameSpan.style.color = info.color; - item.appendChild(nameSpan); - var gearBtn = document.createElement('span'); - gearBtn.innerHTML = '\u2699'; - gearBtn.title = 'Settings'; - gearBtn.style.cssText = 'cursor:pointer;font-size:14px;line-height:1;padding:0 3px;color:var(--pywry-tvchart-text-muted);border-radius:3px;'; - gearBtn.addEventListener('mouseenter', function() { gearBtn.style.color = 'var(--pywry-tvchart-text)'; gearBtn.style.background = 'var(--pywry-tvchart-hover)'; }); - gearBtn.addEventListener('mouseleave', function() { gearBtn.style.color = 'var(--pywry-tvchart-text-muted)'; gearBtn.style.background = ''; }); - gearBtn.addEventListener('click', function(e) { - e.stopPropagation(); - _tvHideIndicatorsPanel(); - _tvShowIndicatorSettings(sid); - }); - item.appendChild(gearBtn); - var removeBtn = document.createElement('span'); - removeBtn.textContent = '\u00d7'; - removeBtn.style.cssText = 'cursor:pointer;font-size:18px;color:' + _cssVar('--pywry-draw-danger', '#f44336') + ';'; - removeBtn.addEventListener('click', function(e) { - e.stopPropagation(); - _tvRemoveIndicator(sid); - renderList(searchInp.value); - }); - item.appendChild(removeBtn); - list.appendChild(item); - })(activeKeys[a], ai); - } - } - - // Catalog - var secNames = {}; - var filtered = _INDICATOR_CATALOG.filter(function(ind) { - if (!filter) return true; - return ind.fullName.toLowerCase().indexOf(filter.toLowerCase()) !== -1 || - ind.name.toLowerCase().indexOf(filter.toLowerCase()) !== -1; - }); - - var currentCat = ''; - for (var ci = 0; ci < filtered.length; ci++) { - var ind = filtered[ci]; - if (ind.category !== currentCat) { - currentCat = ind.category; - if (currentCat !== 'Lightweight Examples') { - var sec = document.createElement('div'); - sec.className = 'tv-indicators-section'; - sec.textContent = currentCat.toUpperCase(); - list.appendChild(sec); - } - } - (function(indDef) { - var item = document.createElement('div'); - item.className = 'tv-indicator-item'; - var nameSpan = document.createElement('span'); - nameSpan.className = 'ind-name'; - nameSpan.textContent = indDef.fullName; - item.appendChild(nameSpan); - item.addEventListener('click', function() { - _tvAddIndicator(indDef, chartId); - renderList(searchInp.value); - }); - list.appendChild(item); - })(ind); - } - } - - searchInp.addEventListener('input', function() { renderList(searchInp.value); }); - renderList(''); - - _tvAppendOverlay(chartId, overlay); - searchInp.focus(); -} - diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators/00-helpers-catalog.js b/pywry/pywry/frontend/src/tvchart/09-indicators/00-helpers-catalog.js new file mode 100644 index 0000000..694f70e --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/09-indicators/00-helpers-catalog.js @@ -0,0 +1,69 @@ +// Helper: sync hline price after coordinate edit +function _tvSyncPriceLinePrice(chartId, drawIdx, newPrice) { + var ds = window.__PYWRY_DRAWINGS__[chartId]; + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!ds || !entry) return; + var d = ds.drawings[drawIdx]; + if (!d || d.type !== 'hline') return; + // Remove old native price line and recreate + if (ds.priceLines[drawIdx]) { + var pl = ds.priceLines[drawIdx]; + var ser = entry.seriesMap[pl.seriesId]; + if (ser) try { ser.removePriceLine(pl.priceLine); } catch(e) {} + } + var mainKey = Object.keys(entry.seriesMap)[0]; + if (mainKey && entry.seriesMap[mainKey]) { + var newPl = entry.seriesMap[mainKey].createPriceLine({ + price: newPrice, color: d.color || _drawDefaults.color, + lineWidth: d.lineWidth || 2, lineStyle: d.lineStyle || 0, + axisLabelVisible: d.showPriceLabel !== false, + title: d.title || '', + }); + ds.priceLines[drawIdx] = { seriesId: mainKey, priceLine: newPl }; + } +} + +// --------------------------------------------------------------------------- +// Indicators Panel +// --------------------------------------------------------------------------- +var _indicatorsOverlay = null; +var _indicatorsOverlayChartId = null; +var _activeIndicators = {}; // { seriesId: { name, period, chartId } } + +var _INDICATOR_CATALOG = [ + { key: 'average-price', name: 'Average Price', fullName: 'Average Price', category: 'Lightweight Examples', defaultPeriod: 0 }, + { key: 'correlation', name: 'Correlation', fullName: 'Correlation', category: 'Lightweight Examples', defaultPeriod: 20, requiresSecondary: true, subplot: true }, + { key: 'median-price', name: 'Median Price', fullName: 'Median Price', category: 'Lightweight Examples', defaultPeriod: 0 }, + { key: 'momentum', name: 'Momentum', fullName: 'Momentum', category: 'Lightweight Examples', defaultPeriod: 10, subplot: true }, + { key: 'moving-average-ex', name: 'Moving Average', fullName: 'Moving Average', category: 'Moving Averages', defaultPeriod: 9 }, + { key: 'percent-change', name: 'Percent Change', fullName: 'Percent Change', category: 'Lightweight Examples', defaultPeriod: 0, subplot: true }, + { key: 'product', name: 'Product', fullName: 'Product', category: 'Lightweight Examples', defaultPeriod: 0, requiresSecondary: true, subplot: true }, + { key: 'ratio', name: 'Ratio', fullName: 'Ratio', category: 'Lightweight Examples', defaultPeriod: 0, requiresSecondary: true, subplot: true }, + { key: 'spread', name: 'Spread', fullName: 'Spread', category: 'Lightweight Examples', defaultPeriod: 0, requiresSecondary: true, subplot: true }, + { key: 'sum', name: 'Sum', fullName: 'Sum', category: 'Lightweight Examples', defaultPeriod: 0, requiresSecondary: true, subplot: true }, + { key: 'weighted-close', name: 'Weighted Close', fullName: 'Weighted Close', category: 'Lightweight Examples', defaultPeriod: 0 }, + + // Moving-average variants are reachable from the single "Moving + // Average" entry above — open the settings dialog and pick a Type + // (SMA / EMA / WMA / HMA / VWMA) and Length. + { name: 'Ichimoku Cloud', fullName: 'Ichimoku Cloud', category: 'Moving Averages', defaultPeriod: 26 }, + { name: 'Bollinger Bands', fullName: 'Bollinger Bands', category: 'Volatility', defaultPeriod: 20 }, + { name: 'Keltner Channels', fullName: 'Keltner Channels', category: 'Volatility', defaultPeriod: 20 }, + { name: 'ATR', fullName: 'Average True Range', category: 'Volatility', defaultPeriod: 14 }, + { name: 'Historical Volatility', fullName: 'Historical Volatility', category: 'Volatility', defaultPeriod: 10, subplot: true }, + { name: 'Parabolic SAR', fullName: 'Parabolic Stop and Reverse', category: 'Trend', defaultPeriod: 0 }, + { name: 'RSI', fullName: 'Relative Strength Index', category: 'Momentum', defaultPeriod: 14, subplot: true }, + { name: 'MACD', fullName: 'Moving Average Convergence/Divergence', category: 'Momentum', defaultPeriod: 12, subplot: true }, + { name: 'Stochastic', fullName: 'Stochastic Oscillator', category: 'Momentum', defaultPeriod: 14, subplot: true }, + { name: 'Williams %R', fullName: 'Williams %R', category: 'Momentum', defaultPeriod: 14, subplot: true }, + { name: 'CCI', fullName: 'Commodity Channel Index', category: 'Momentum', defaultPeriod: 20, subplot: true }, + { name: 'ADX', fullName: 'Average Directional Index', category: 'Momentum', defaultPeriod: 14, subplot: true }, + { name: 'Aroon', fullName: 'Aroon Up/Down', category: 'Momentum', defaultPeriod: 14, subplot: true }, + { name: 'VWAP', fullName: 'Volume Weighted Average Price', category: 'Volume', defaultPeriod: 0 }, + { name: 'Volume SMA', fullName: 'Volume Simple Moving Average', category: 'Volume', defaultPeriod: 20 }, + { name: 'Accumulation/Distribution', fullName: 'Accumulation / Distribution Line', category: 'Volume', defaultPeriod: 0, subplot: true }, + { key: 'volume-profile-fixed', name: 'Volume Profile Fixed Range', fullName: 'Volume Profile (Fixed Range)', category: 'Volume', defaultPeriod: 24, primitive: true }, + { key: 'volume-profile-visible', name: 'Volume Profile Visible Range', fullName: 'Volume Profile (Visible Range)', category: 'Volume', defaultPeriod: 24, primitive: true }, +]; + +// ---- Indicator computation functions ---- diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators/01-compute-basic.js b/pywry/pywry/frontend/src/tvchart/09-indicators/01-compute-basic.js new file mode 100644 index 0000000..527550d --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/09-indicators/01-compute-basic.js @@ -0,0 +1,140 @@ +function _computeSMA(data, period, field) { + field = field || 'close'; + var result = []; + for (var i = 0; i < data.length; i++) { + if (i < period - 1) { result.push({ time: data[i].time }); continue; } + var sum = 0; + for (var j = i - period + 1; j <= i; j++) sum += (data[j][field] !== undefined ? data[j][field] : data[j].value || 0); + result.push({ time: data[i].time, value: sum / period }); + } + return result; +} + +function _computeEMA(data, period, field) { + field = field || 'close'; + var result = []; + var k = 2 / (period + 1); + var ema = null; + for (var i = 0; i < data.length; i++) { + var val = data[i][field] !== undefined ? data[i][field] : data[i].value || 0; + if (i < period - 1) { result.push({ time: data[i].time }); continue; } + if (ema === null) { + var sum = 0; + for (var j = i - period + 1; j <= i; j++) sum += (data[j][field] !== undefined ? data[j][field] : data[j].value || 0); + ema = sum / period; + } else { + ema = val * k + ema * (1 - k); + } + result.push({ time: data[i].time, value: ema }); + } + return result; +} + +function _computeWMA(data, period, field) { + field = field || 'close'; + var result = []; + for (var i = 0; i < data.length; i++) { + if (i < period - 1) { result.push({ time: data[i].time }); continue; } + var sum = 0, wsum = 0; + for (var j = 0; j < period; j++) { + var w = j + 1; + var val = data[i - period + 1 + j][field] !== undefined ? data[i - period + 1 + j][field] : 0; + sum += val * w; + wsum += w; + } + result.push({ time: data[i].time, value: sum / wsum }); + } + return result; +} + +function _computeRSI(data, period) { + var result = []; + var gains = 0, losses = 0; + for (var i = 0; i < data.length; i++) { + if (i === 0) { result.push({ time: data[i].time }); continue; } + var prev = data[i - 1].close !== undefined ? data[i - 1].close : data[i - 1].value || 0; + var cur = data[i].close !== undefined ? data[i].close : data[i].value || 0; + var diff = cur - prev; + if (i <= period) { + if (diff > 0) gains += diff; else losses -= diff; + if (i === period) { + gains /= period; losses /= period; + var rs = losses === 0 ? 100 : gains / losses; + result.push({ time: data[i].time, value: 100 - 100 / (1 + rs) }); + } else { + result.push({ time: data[i].time }); + } + } else { + var g = diff > 0 ? diff : 0, l = diff < 0 ? -diff : 0; + gains = (gains * (period - 1) + g) / period; + losses = (losses * (period - 1) + l) / period; + var rs2 = losses === 0 ? 100 : gains / losses; + result.push({ time: data[i].time, value: 100 - 100 / (1 + rs2) }); + } + } + return result; +} + +function _computeATR(data, period) { + var result = []; + var atr = null; + for (var i = 0; i < data.length; i++) { + if (i === 0) { result.push({ time: data[i].time }); continue; } + var h = data[i].high || data[i].close || data[i].value || 0; + var l = data[i].low || data[i].close || data[i].value || 0; + var pc = data[i - 1].close !== undefined ? data[i - 1].close : data[i - 1].value || 0; + var tr = Math.max(h - l, Math.abs(h - pc), Math.abs(l - pc)); + if (i < period) { result.push({ time: data[i].time }); if (i === period - 1) { var s = 0; for (var j = 1; j <= i; j++) { var dh = data[j].high || data[j].close || 0; var dl = data[j].low || data[j].close || 0; var dpc = data[j-1].close || 0; s += Math.max(dh-dl, Math.abs(dh-dpc), Math.abs(dl-dpc)); } atr = (s + tr) / period; result[result.length - 1].value = atr; } continue; } + atr = (atr * (period - 1) + tr) / period; + result.push({ time: data[i].time, value: atr }); + } + return result; +} + +function _computeBollingerBands(data, period, mult, maType, offset) { + mult = mult || 2; + maType = maType || 'SMA'; + offset = offset || 0; + var maFn = maType === 'EMA' ? _computeEMA : (maType === 'WMA' ? _computeWMA : _computeSMA); + var ma = maFn(data, period); + var upper = [], lower = []; + for (var i = 0; i < data.length; i++) { + if (!ma[i].value) { upper.push({ time: data[i].time }); lower.push({ time: data[i].time }); continue; } + var sum = 0; + for (var j = i - period + 1; j <= i; j++) { + var v = data[j].close !== undefined ? data[j].close : data[j].value || 0; + sum += (v - ma[i].value) * (v - ma[i].value); + } + var std = Math.sqrt(sum / period); + upper.push({ time: data[i].time, value: ma[i].value + mult * std }); + lower.push({ time: data[i].time, value: ma[i].value - mult * std }); + } + // Apply offset (shift data points forward/backward by offset bars) + if (offset !== 0) { + ma = _tvApplyOffset(ma, offset, data); + upper = _tvApplyOffset(upper, offset, data); + lower = _tvApplyOffset(lower, offset, data); + } + return { middle: ma, upper: upper, lower: lower }; +} + +function _tvApplyOffset(series, offset, refData) { + if (!offset || !series.length) return series; + var result = []; + for (var i = 0; i < series.length; i++) { + var srcIdx = i - offset; + if (srcIdx >= 0 && srcIdx < series.length) { + result.push({ time: series[i].time, value: series[srcIdx].value }); + } else { + result.push({ time: series[i].time }); + } + } + return result; +} + +// --------------------------------------------------------------------------- +// Bollinger Bands fill rendering (LWC series primitive — auto-clipped to pane) +// --------------------------------------------------------------------------- +var _bbFillPrimitives = {}; // { chartId: { primitive, seriesId } } + +/** Draw BB band fills into a media-coordinate canvas context (called from primitive renderer). */ diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators/02-bb-primitive.js b/pywry/pywry/frontend/src/tvchart/09-indicators/02-bb-primitive.js new file mode 100644 index 0000000..69f7ad4 --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/09-indicators/02-bb-primitive.js @@ -0,0 +1,147 @@ +function _tvDrawBBFill(chartId, ctx, mediaSize) { + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry || !entry.chart) return; + var w = mediaSize.width; + var h = mediaSize.height; + + // Find all BB groups on this chart that have fill enabled + var groups = {}; + var keys = Object.keys(_activeIndicators); + for (var i = 0; i < keys.length; i++) { + var ind = _activeIndicators[keys[i]]; + if (ind.chartId !== chartId || ind.type !== 'bollinger-bands' || !ind.group) continue; + if (!ind.showBandFill) continue; + if (!groups[ind.group]) groups[ind.group] = { upper: null, lower: null, color: ind.bandFillColor || '#2196f3', opacity: ind.bandFillOpacity !== undefined ? ind.bandFillOpacity : 100 }; + if (keys[i].indexOf('upper') >= 0) groups[ind.group].upper = keys[i]; + else if (keys[i].indexOf('lower') >= 0) groups[ind.group].lower = keys[i]; + } + + var timeScale = entry.chart.timeScale(); + + var groupKeys = Object.keys(groups); + for (var gi = 0; gi < groupKeys.length; gi++) { + var g = groups[groupKeys[gi]]; + if (!g.upper || !g.lower) continue; + var upperSeries = entry.seriesMap[g.upper]; + var lowerSeries = entry.seriesMap[g.lower]; + if (!upperSeries || !lowerSeries) continue; + + var upperData = upperSeries.data(); + var lowerData = lowerSeries.data(); + if (!upperData.length || !lowerData.length) continue; + + // Build time→value map for lower band + var lowerMap = {}; + for (var li = 0; li < lowerData.length; li++) { + if (lowerData[li].value !== undefined) { + lowerMap[String(lowerData[li].time)] = lowerData[li].value; + } + } + + // Iterate upper data, pair with lower, convert to pixel coords + var upperPts = []; + var lowerPts = []; + var margin = 20; + for (var di = 0; di < upperData.length; di++) { + var uPt = upperData[di]; + if (uPt.value === undefined) continue; + var lVal = lowerMap[String(uPt.time)]; + if (lVal === undefined) continue; + + var x = timeScale.timeToCoordinate(uPt.time); + if (x === null || x === undefined) continue; + if (x < -margin || x > w + margin) continue; + + // Use same series for both conversions to ensure consistent scaling + var yU = upperSeries.priceToCoordinate(uPt.value); + var yL = upperSeries.priceToCoordinate(lVal); + if (yU === null || yL === null) continue; + + upperPts.push({ x: x, y: yU }); + lowerPts.push({ x: x, y: yL }); + } + + if (upperPts.length < 2) continue; + + // Draw filled polygon: upper line forward, lower line backward + ctx.beginPath(); + ctx.moveTo(upperPts[0].x, upperPts[0].y); + for (var pi = 1; pi < upperPts.length; pi++) { + ctx.lineTo(upperPts[pi].x, upperPts[pi].y); + } + for (var pi2 = lowerPts.length - 1; pi2 >= 0; pi2--) { + ctx.lineTo(lowerPts[pi2].x, lowerPts[pi2].y); + } + ctx.closePath(); + + var fillColor = g.color || '#2196f3'; + var fillOp = _tvClamp(_tvToNumber(g.opacity, 100), 0, 100) / 100; + ctx.fillStyle = _tvHexToRgba(fillColor, 0.15 * fillOp); + ctx.fill(); + } +} + +function _tvEnsureBBFillPrimitive(chartId) { + if (_bbFillPrimitives[chartId]) return; + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry || !entry.chart) return; + + // Find an upper BB series to attach the primitive to + var upperSeriesId = null; + var allKeys = Object.keys(_activeIndicators); + for (var i = 0; i < allKeys.length; i++) { + var ind = _activeIndicators[allKeys[i]]; + if (ind.chartId === chartId && ind.type === 'bollinger-bands' && allKeys[i].indexOf('upper') >= 0) { + upperSeriesId = allKeys[i]; + break; + } + } + if (!upperSeriesId || !entry.seriesMap[upperSeriesId]) return; + + var _requestUpdate = null; + var theRenderer = { + draw: function(target) { + target.useMediaCoordinateSpace(function(scope) { + _tvDrawBBFill(chartId, scope.context, scope.mediaSize); + }); + } + }; + var theView = { + zOrder: function() { return 'bottom'; }, + renderer: function() { return theRenderer; } + }; + var primitive = { + attached: function(params) { _requestUpdate = params.requestUpdate; }, + detached: function() { _requestUpdate = null; }, + updateAllViews: function() {}, + paneViews: function() { return [theView]; }, + triggerUpdate: function() { if (_requestUpdate) _requestUpdate(); } + }; + + entry.seriesMap[upperSeriesId].attachPrimitive(primitive); + _bbFillPrimitives[chartId] = { primitive: primitive, seriesId: upperSeriesId }; +} + +function _tvRemoveBBFillPrimitive(chartId) { + var bp = _bbFillPrimitives[chartId]; + if (!bp) return; + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (entry && entry.seriesMap[bp.seriesId]) { + try { entry.seriesMap[bp.seriesId].detachPrimitive(bp.primitive); } catch (e) {} + } + delete _bbFillPrimitives[chartId]; +} + +function _tvUpdateBBFill(chartId) { + var bp = _bbFillPrimitives[chartId]; + if (bp && bp.primitive && bp.primitive.triggerUpdate) { + bp.primitive.triggerUpdate(); + } +} + +// --------------------------------------------------------------------------- +// Ichimoku Kumo (cloud) fill — drawn as a series primitive between the two +// Senkou-Span line series, swapping fill colour bar-by-bar based on which +// span is on top. Per chart: { primitive, seriesId, group }. +// --------------------------------------------------------------------------- +var _ichimokuCloudPrimitives = {}; diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators/03-ichimoku-primitive.js b/pywry/pywry/frontend/src/tvchart/09-indicators/03-ichimoku-primitive.js new file mode 100644 index 0000000..f9ad267 --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/09-indicators/03-ichimoku-primitive.js @@ -0,0 +1,167 @@ + +function _tvDrawIchimokuCloud(chartId, ctx, mediaSize) { + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry || !entry.chart) return; + + // Find every Ichimoku group on this chart and draw their cloud. + var groups = {}; + var keys = Object.keys(_activeIndicators); + for (var i = 0; i < keys.length; i++) { + var ind = _activeIndicators[keys[i]]; + if (ind.chartId !== chartId || ind.type !== 'ichimoku' || !ind.group) continue; + if (!groups[ind.group]) { + groups[ind.group] = { + spanA: null, spanB: null, + upColor: ind.cloudUpColor || _cssVar('--pywry-tvchart-ind-positive-dim'), + downColor: ind.cloudDownColor || _cssVar('--pywry-tvchart-ind-negative-dim'), + opacity: ind.cloudOpacity != null ? ind.cloudOpacity : 0.20, + }; + } + if (keys[i].indexOf('spanA') >= 0) groups[ind.group].spanA = keys[i]; + else if (keys[i].indexOf('spanB') >= 0) groups[ind.group].spanB = keys[i]; + } + + var timeScale = entry.chart.timeScale(); + var w = mediaSize.width; + + var groupKeys = Object.keys(groups); + for (var gi = 0; gi < groupKeys.length; gi++) { + var g = groups[groupKeys[gi]]; + if (!g.spanA || !g.spanB) continue; + var sA = entry.seriesMap[g.spanA]; + var sB = entry.seriesMap[g.spanB]; + if (!sA || !sB) continue; + + var aData = sA.data(); + var bData = sB.data(); + if (!aData.length || !bData.length) continue; + + // Index span B by string-time so we can pair points fast. + var bMap = {}; + for (var bi = 0; bi < bData.length; bi++) { + if (bData[bi].value !== undefined) bMap[String(bData[bi].time)] = bData[bi].value; + } + + // Build aligned point arrays in pixel coords. + var pts = []; + for (var ai = 0; ai < aData.length; ai++) { + var pa = aData[ai]; + if (pa.value === undefined) continue; + var bv = bMap[String(pa.time)]; + if (bv === undefined) continue; + var x = timeScale.timeToCoordinate(pa.time); + if (x === null || x === undefined) continue; + if (x < -50 || x > w + 50) continue; + var ya = sA.priceToCoordinate(pa.value); + var yb = sA.priceToCoordinate(bv); + if (ya === null || yb === null) continue; + pts.push({ x: x, ya: ya, yb: yb, valA: pa.value, valB: bv }); + } + if (pts.length < 2) continue; + + // Walk segments, splitting at A==B crossings so the fill flips + // colour cleanly. Each contiguous same-sign run is filled as + // one polygon. + var segments = []; + var cur = { sign: pts[0].valA >= pts[0].valB ? 1 : -1, pts: [pts[0]] }; + for (var pi2 = 1; pi2 < pts.length; pi2++) { + var prev = pts[pi2 - 1]; + var p = pts[pi2]; + var prevSign = prev.valA >= prev.valB ? 1 : -1; + var sign = p.valA >= p.valB ? 1 : -1; + if (sign === prevSign) { + cur.pts.push(p); + continue; + } + // Linear-interpolate the crossing X. + var dPrev = prev.valA - prev.valB; + var dCurr = p.valA - p.valB; + var t = dPrev / (dPrev - dCurr); // 0..1 along (prev, p) + var xCross = prev.x + (p.x - prev.x) * t; + var yCrossA = prev.ya + (p.ya - prev.ya) * t; + // At the crossing, A == B (both lines meet). + var crossPt = { x: xCross, ya: yCrossA, yb: yCrossA, valA: 0, valB: 0 }; + cur.pts.push(crossPt); + segments.push(cur); + cur = { sign: sign, pts: [crossPt, p] }; + } + segments.push(cur); + + for (var si = 0; si < segments.length; si++) { + var seg = segments[si]; + if (seg.pts.length < 2) continue; + ctx.beginPath(); + ctx.moveTo(seg.pts[0].x, seg.pts[0].ya); + for (var fi = 1; fi < seg.pts.length; fi++) ctx.lineTo(seg.pts[fi].x, seg.pts[fi].ya); + for (var ri = seg.pts.length - 1; ri >= 0; ri--) ctx.lineTo(seg.pts[ri].x, seg.pts[ri].yb); + ctx.closePath(); + var col = seg.sign >= 0 ? g.upColor : g.downColor; + ctx.fillStyle = _tvHexToRgba(_tvColorToHex(col, '#26a69a'), g.opacity); + ctx.fill(); + } + } +} + +function _tvEnsureIchimokuCloudPrimitive(chartId) { + if (_ichimokuCloudPrimitives[chartId]) return; + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry || !entry.chart) return; + + // Attach to any Span A series on this chart. + var hostId = null; + var aKeys = Object.keys(_activeIndicators); + for (var i = 0; i < aKeys.length; i++) { + var ai = _activeIndicators[aKeys[i]]; + if (ai.chartId === chartId && ai.type === 'ichimoku' && aKeys[i].indexOf('spanA') >= 0) { + hostId = aKeys[i]; + break; + } + } + if (!hostId || !entry.seriesMap[hostId]) return; + + var _requestUpdate = null; + var renderer = { + draw: function(target) { + target.useMediaCoordinateSpace(function(scope) { + _tvDrawIchimokuCloud(chartId, scope.context, scope.mediaSize); + }); + }, + }; + var paneView = { + zOrder: function() { return 'bottom'; }, + renderer: function() { return renderer; }, + }; + var primitive = { + attached: function(p) { _requestUpdate = p.requestUpdate; if (_requestUpdate) _requestUpdate(); }, + detached: function() { _requestUpdate = null; }, + updateAllViews: function() {}, + paneViews: function() { return [paneView]; }, + triggerUpdate: function() { if (_requestUpdate) _requestUpdate(); }, + }; + + entry.seriesMap[hostId].attachPrimitive(primitive); + _ichimokuCloudPrimitives[chartId] = { primitive: primitive, seriesId: hostId }; +} + +function _tvRemoveIchimokuCloudPrimitive(chartId) { + var ip = _ichimokuCloudPrimitives[chartId]; + if (!ip) return; + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (entry && entry.seriesMap[ip.seriesId]) { + try { entry.seriesMap[ip.seriesId].detachPrimitive(ip.primitive); } catch (e) {} + } + delete _ichimokuCloudPrimitives[chartId]; +} + +function _tvUpdateIchimokuCloud(chartId) { + var ip = _ichimokuCloudPrimitives[chartId]; + if (ip && ip.primitive && ip.primitive.triggerUpdate) ip.primitive.triggerUpdate(); +} + +// --------------------------------------------------------------------------- +// Volume Profile (VPVR / VPFR — volume-by-price histogram pinned to pane edge) +// --------------------------------------------------------------------------- + +// Per-chart registry: { [indicatorId]: { primitive, seriesId, mode, bucketCount, vpData, opts } } +var _volumeProfilePrimitives = {}; + diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators/04-volume-profile.js b/pywry/pywry/frontend/src/tvchart/09-indicators/04-volume-profile.js new file mode 100644 index 0000000..44d445c --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/09-indicators/04-volume-profile.js @@ -0,0 +1,544 @@ +/** positionsBox — media→bitmap pixel alignment helper. */ +function _tvPositionsBox(a, b, pixelRatio) { + var lo = Math.min(a, b); + var hi = Math.max(a, b); + var scaled = Math.round(lo * pixelRatio); + return { + position: scaled, + length: Math.max(1, Math.round(hi * pixelRatio) - scaled), + }; +} + +/** + * Bucket bars into a volume-by-price histogram with up/down split. + * + * @param {Array} bars - OHLCV bar objects with {time, open, high, low, close, volume} + * @param {number} fromIdx - inclusive start index + * @param {number} toIdx - inclusive end index + * @param {Object} opts - { rowsLayout: 'rows'|'ticks', rowSize: number, valueAreaPct, withDeveloping } + * @returns {{profile, minPrice, maxPrice, step, totalVolume, developing?}|null} + */ +function _tvComputeVolumeProfile(bars, fromIdx, toIdx, opts) { + if (!bars || !bars.length) return null; + opts = opts || {}; + var lo = Math.max(0, Math.min(fromIdx, toIdx, bars.length - 1)); + var hi = Math.min(bars.length - 1, Math.max(fromIdx, toIdx, 0)); + if (hi < lo) return null; + + var minP = Infinity, maxP = -Infinity; + for (var i = lo; i <= hi; i++) { + var b = bars[i]; + var h = b.high !== undefined ? b.high : b.close; + var l = b.low !== undefined ? b.low : b.close; + if (h === undefined || l === undefined) continue; + if (h > maxP) maxP = h; + if (l < minP) minP = l; + } + if (!isFinite(minP) || !isFinite(maxP) || maxP === minP) return null; + + // Resolve bucket count from layout option. + var rowsLayout = opts.rowsLayout || 'rows'; + var rowSize = Math.max(0.0001, Number(opts.rowSize) || 24); + var nBuckets; + if (rowsLayout === 'ticks') { + nBuckets = Math.max(2, Math.min(2000, Math.ceil((maxP - minP) / rowSize))); + } else { + nBuckets = Math.max(2, Math.floor(rowSize)); + } + var step = (maxP - minP) / nBuckets; + + var up = new Array(nBuckets), down = new Array(nBuckets); + for (var k = 0; k < nBuckets; k++) { up[k] = 0; down[k] = 0; } + + // Optional running snapshots (for Developing POC / VA). Recorded + // once per bar so the renderer can plot the running point of + // control as a step line across time. + var withDeveloping = opts.withDeveloping === true; + var valueAreaPct = opts.valueAreaPct || 0.70; + var developing = withDeveloping ? [] : null; + + var totalVol = 0; + for (var j = lo; j <= hi; j++) { + var bar = bars[j]; + var bH = bar.high !== undefined ? bar.high : bar.close; + var bL = bar.low !== undefined ? bar.low : bar.close; + var bO = bar.open !== undefined ? bar.open : bar.close; + var bC = bar.close !== undefined ? bar.close : bar.value; + var vol = bar.volume !== undefined && bar.volume !== null ? Number(bar.volume) : 0; + if (!isFinite(vol) || vol <= 0) { + if (withDeveloping) developing.push({ time: bar.time }); + continue; + } + if (bH === undefined || bL === undefined) { + if (withDeveloping) developing.push({ time: bar.time }); + continue; + } + var loIdx = Math.max(0, Math.min(nBuckets - 1, Math.floor((bL - minP) / step))); + var hiIdx = Math.max(0, Math.min(nBuckets - 1, Math.floor((bH - minP) / step))); + var span = hiIdx - loIdx + 1; + var share = vol / span; + var isUp = bC !== undefined && bC >= bO; + for (var bi = loIdx; bi <= hiIdx; bi++) { + if (isUp) up[bi] += share; else down[bi] += share; + } + totalVol += vol; + + if (withDeveloping) { + // Snapshot the running POC and Value Area edges so far. + var snap = _tvDevelopingSnapshot(up, down, totalVol, minP, step, valueAreaPct); + developing.push({ + time: bar.time, + pocPrice: snap.pocPrice, + vaHighPrice: snap.vaHighPrice, + vaLowPrice: snap.vaLowPrice, + }); + } + } + + var profile = []; + for (var p = 0; p < nBuckets; p++) { + profile.push({ + price: minP + step * (p + 0.5), + priceLo: minP + step * p, + priceHi: minP + step * (p + 1), + upVol: up[p], + downVol: down[p], + totalVol: up[p] + down[p], + }); + } + + return { + profile: profile, + minPrice: minP, + maxPrice: maxP, + step: step, + totalVolume: totalVol, + developing: developing, + }; +} + +/** Per-bar snapshot of the running POC + value-area edges. */ +function _tvDevelopingSnapshot(up, down, totalVol, minP, step, vaPct) { + var n = up.length; + var pocIdx = 0; + var pocVol = up[0] + down[0]; + for (var i = 1; i < n; i++) { + var t = up[i] + down[i]; + if (t > pocVol) { pocVol = t; pocIdx = i; } + } + if (pocVol === 0) return { pocPrice: undefined, vaHighPrice: undefined, vaLowPrice: undefined }; + + var target = totalVol * (vaPct || 0.70); + var accumulated = pocVol; + var loIdx = pocIdx, hiIdx = pocIdx; + while (accumulated < target && (loIdx > 0 || hiIdx < n - 1)) { + var nextLow = loIdx > 0 ? (up[loIdx - 1] + down[loIdx - 1]) : -1; + var nextHigh = hiIdx < n - 1 ? (up[hiIdx + 1] + down[hiIdx + 1]) : -1; + if (nextLow < 0 && nextHigh < 0) break; + if (nextHigh >= nextLow) { + hiIdx += 1; + accumulated += up[hiIdx] + down[hiIdx]; + } else { + loIdx -= 1; + accumulated += up[loIdx] + down[loIdx]; + } + } + return { + pocPrice: minP + step * (pocIdx + 0.5), + vaHighPrice: minP + step * (hiIdx + 1), + vaLowPrice: minP + step * loIdx, + }; +} + +/** Compute the Point of Control (POC) and Value Area for a profile. */ +function _tvComputePOCAndValueArea(profile, totalVolume, valueAreaPct) { + if (!profile || !profile.length) return null; + var pocIdx = 0; + for (var i = 1; i < profile.length; i++) { + if (profile[i].totalVol > profile[pocIdx].totalVol) pocIdx = i; + } + var target = totalVolume * (valueAreaPct || 0.70); + var accumulated = profile[pocIdx].totalVol; + var loIdx = pocIdx, hiIdx = pocIdx; + while (accumulated < target && (loIdx > 0 || hiIdx < profile.length - 1)) { + var nextLow = loIdx > 0 ? profile[loIdx - 1].totalVol : -1; + var nextHigh = hiIdx < profile.length - 1 ? profile[hiIdx + 1].totalVol : -1; + if (nextLow < 0 && nextHigh < 0) break; + if (nextHigh >= nextLow) { + hiIdx += 1; + accumulated += profile[hiIdx].totalVol; + } else { + loIdx -= 1; + accumulated += profile[loIdx].totalVol; + } + } + return { pocIdx: pocIdx, vaLowIdx: loIdx, vaHighIdx: hiIdx }; +} + +/** + * Build an ISeriesPrimitive that renders the volume profile as horizontal + * rows pinned to one side of the price pane. Each row is a horizontal + * bar at a price bucket, split into up-volume (teal) and down-volume + * (pink), with a POC line and translucent value-area band overlay. + */ +function _tvMakeVolumeProfilePrimitive(chartId, seriesId, getData, getOpts, getHidden) { + var _requestUpdate = null; + + function draw(scope) { + if (getHidden && getHidden()) return; + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry || !entry.chart) return; + var series = entry.seriesMap[seriesId]; + if (!series) return; + var vp = getData(); + if (!vp || !vp.profile || !vp.profile.length) return; + var opts = (getOpts && getOpts()) || {}; + + var ctx = scope.context; + // bitmapSize is ALREADY in bitmap pixels (= mediaSize * pixelRatio). + // priceToCoordinate returns MEDIA pixels — convert with vpr. + var paneW = scope.bitmapSize.width; + var hpr = scope.horizontalPixelRatio; + var vpr = scope.verticalPixelRatio; + + var widthPct = Math.max(2, Math.min(60, opts.widthPercent || 15)); + var placement = opts.placement === 'left' ? 'left' : 'right'; + var volumeMode = opts.volumeMode || 'updown'; // 'updown' | 'total' | 'delta' + var upColor = opts.upColor || _cssVar('--pywry-tvchart-vp-up'); + var downColor = opts.downColor || _cssVar('--pywry-tvchart-vp-down'); + var vaUpColor = opts.vaUpColor || _cssVar('--pywry-tvchart-vp-va-up'); + var vaDownColor = opts.vaDownColor || _cssVar('--pywry-tvchart-vp-va-down'); + var pocColor = opts.pocColor || _cssVar('--pywry-tvchart-vp-poc'); + var devPocColor = opts.developingPOCColor || _cssVar('--pywry-tvchart-ind-tertiary'); + var devVAColor = opts.developingVAColor || _cssVar('--pywry-tvchart-vp-va-up'); + var showPOC = opts.showPOC !== false; + var showVA = opts.showValueArea !== false; + var showDevPOC = opts.showDevelopingPOC === true; + var showDevVA = opts.showDevelopingVA === true; + var valueAreaPct = opts.valueAreaPct || 0.70; + + // For Delta mode the displayed magnitude is |upVol - downVol|. + // Otherwise it's the total bucket volume. + function bucketMagnitude(row) { + return volumeMode === 'delta' ? Math.abs(row.upVol - row.downVol) : row.totalVol; + } + var maxVol = 0; + for (var i = 0; i < vp.profile.length; i++) { + var m = bucketMagnitude(vp.profile[i]); + if (m > maxVol) maxVol = m; + } + if (maxVol <= 0) return; + + var poc = _tvComputePOCAndValueArea(vp.profile, vp.totalVolume, valueAreaPct); + + var maxBarBitmap = paneW * (widthPct / 100); + + // Row height: derive from bucket spacing (priceToCoordinate is media px). + var y0 = series.priceToCoordinate(vp.profile[0].price); + var y1 = vp.profile.length > 1 ? series.priceToCoordinate(vp.profile[1].price) : null; + if (y0 === null) return; + var pxPerBucket = (y1 !== null) ? Math.abs(y0 - y1) : 4; + var rowHalfBitmap = Math.max(1, (pxPerBucket * vpr) / 2 - 1); + var rowHeight = Math.max(1, rowHalfBitmap * 2 - 2); + + function drawSegment(x, w, color, yTop) { + if (w <= 0) return; + ctx.fillStyle = color; + ctx.fillRect(x, yTop, w, rowHeight); + } + + for (var r = 0; r < vp.profile.length; r++) { + var row = vp.profile[r]; + if (row.totalVol <= 0) continue; + var y = series.priceToCoordinate(row.price); + if (y === null) continue; + + var yBitmap = y * vpr; + var yTop = yBitmap - rowHalfBitmap; + var inValueArea = poc && r >= poc.vaLowIdx && r <= poc.vaHighIdx; + var curUp = inValueArea && showVA ? vaUpColor : upColor; + var curDown = inValueArea && showVA ? vaDownColor : downColor; + + var barLenBitmap = maxBarBitmap * (bucketMagnitude(row) / maxVol); + + if (volumeMode === 'updown') { + var upRatio = row.upVol / row.totalVol; + var upLen = barLenBitmap * upRatio; + var downLen = barLenBitmap - upLen; + if (placement === 'right') { + drawSegment(paneW - upLen, upLen, curUp, yTop); + drawSegment(paneW - upLen - downLen, downLen, curDown, yTop); + } else { + drawSegment(0, upLen, curUp, yTop); + drawSegment(upLen, downLen, curDown, yTop); + } + } else if (volumeMode === 'delta') { + // Delta = upVol - downVol. Positive bars use the up colour + // (extending inward from the edge); negative use down. + var net = row.upVol - row.downVol; + var col = net >= 0 ? curUp : curDown; + if (placement === 'right') { + drawSegment(paneW - barLenBitmap, barLenBitmap, col, yTop); + } else { + drawSegment(0, barLenBitmap, col, yTop); + } + } else { + // Total: single bar coloured by net direction (up bias = up colour). + var totalCol = row.upVol >= row.downVol ? curUp : curDown; + if (placement === 'right') { + drawSegment(paneW - barLenBitmap, barLenBitmap, totalCol, yTop); + } else { + drawSegment(0, barLenBitmap, totalCol, yTop); + } + } + } + + if (showPOC && poc) { + var pocPrice = vp.profile[poc.pocIdx].price; + var pocY = series.priceToCoordinate(pocPrice); + if (pocY !== null) { + ctx.save(); + ctx.strokeStyle = pocColor; + ctx.lineWidth = Math.max(1, Math.round(vpr)); + ctx.setLineDash([4 * hpr, 3 * hpr]); + ctx.beginPath(); + ctx.moveTo(0, pocY * vpr); + ctx.lineTo(paneW, pocY * vpr); + ctx.stroke(); + ctx.restore(); + } + } + + // Developing POC / VA: step-line plots across time, computed + // bar-by-bar in _tvComputeVolumeProfile when withDeveloping=true. + if ((showDevPOC || showDevVA) && Array.isArray(vp.developing) && vp.developing.length > 0) { + var timeScale = entry.chart.timeScale(); + function plotDevLine(field, color) { + ctx.save(); + ctx.strokeStyle = color; + ctx.lineWidth = Math.max(1, Math.round(vpr)); + ctx.beginPath(); + var moved = false; + for (var di = 0; di < vp.developing.length; di++) { + var p = vp.developing[di]; + var px = p[field]; + if (px === undefined) { moved = false; continue; } + var dx = timeScale.timeToCoordinate(p.time); + var dy = series.priceToCoordinate(px); + if (dx === null || dy === null) { moved = false; continue; } + var dxB = dx * hpr; + var dyB = dy * vpr; + if (!moved) { ctx.moveTo(dxB, dyB); moved = true; } + else { ctx.lineTo(dxB, dyB); } + } + ctx.stroke(); + ctx.restore(); + } + if (showDevPOC) plotDevLine('pocPrice', devPocColor); + if (showDevVA) { + plotDevLine('vaHighPrice', devVAColor); + plotDevLine('vaLowPrice', devVAColor); + } + } + } + + var renderer = { + draw: function(target) { + target.useBitmapCoordinateSpace(draw); + }, + }; + + var paneView = { + zOrder: function() { return 'top'; }, + renderer: function() { return renderer; }, + update: function() {}, + }; + + return { + attached: function(params) { + _requestUpdate = params.requestUpdate; + // Kick the first paint — without this the primitive only renders + // on the next user interaction (pan/zoom/resize). + if (_requestUpdate) _requestUpdate(); + }, + detached: function() { _requestUpdate = null; }, + updateAllViews: function() {}, + paneViews: function() { return [paneView]; }, + triggerUpdate: function() { if (_requestUpdate) _requestUpdate(); }, + }; +} + +/** Format a volume number for the legend (1.23M / 4.56K / 789). */ +function _tvFormatVolume(v) { + var n = Number(v) || 0; + var sign = n < 0 ? '-' : ''; + var a = Math.abs(n); + if (a >= 1e9) return sign + (a / 1e9).toFixed(2) + 'B'; + if (a >= 1e6) return sign + (a / 1e6).toFixed(2) + 'M'; + if (a >= 1e3) return sign + (a / 1e3).toFixed(2) + 'K'; + return sign + a.toFixed(0); +} + +/** Sum up, down, and total volume across a VP profile for the legend readout. */ +function _tvVolumeProfileTotals(vp) { + var totals = { up: 0, down: 0, total: 0 }; + if (!vp || !vp.profile) return totals; + for (var i = 0; i < vp.profile.length; i++) { + totals.up += vp.profile[i].upVol || 0; + totals.down += vp.profile[i].downVol || 0; + } + totals.total = totals.up + totals.down; + return totals; +} + +/** Update the legend value span for a VP indicator with current totals. */ +function _tvUpdateVolumeProfileLegendValues(seriesId) { + var slot = _volumeProfilePrimitives[seriesId]; + if (!slot) return; + var el = document.getElementById('tvchart-ind-val-' + seriesId); + if (!el) return; + var t = _tvVolumeProfileTotals(slot.vpData); + el.textContent = _tvFormatVolume(t.up) + ' ' + + _tvFormatVolume(t.down) + ' ' + + _tvFormatVolume(t.total); +} + +/** + * Live-preview helper for the VP settings dialog: every Inputs/Style + * row callback funnels through here so changes paint instantly without + * waiting for the OK button. Recomputes the bucket profile when a + * compute-affecting field changed (rows layout, row size, value area, + * developing toggles). Cheap when only colours / placement / width + * change — just updates the opts dict and triggers a redraw. + */ +function _tvApplyVPDraftLive(seriesId, draft) { + var slot = _volumeProfilePrimitives[seriesId]; + var info = _activeIndicators[seriesId]; + if (!slot || !info) return; + var entry = window.__PYWRY_TVCHARTS__[info.chartId]; + if (!entry) return; + var prevOpts = slot.opts || {}; + var newRowsLayout = draft.vpRowsLayout || slot.rowsLayout || 'rows'; + var newRowSize = draft.vpRowSize != null ? Number(draft.vpRowSize) : slot.rowSize; + var newVolumeMode = draft.vpVolumeMode || slot.volumeMode || 'updown'; + var newValueAreaPct = draft.vpValueAreaPct != null + ? draft.vpValueAreaPct / 100 + : (prevOpts.valueAreaPct || 0.70); + var newShowDevPOC = draft.vpShowDevelopingPOC === true; + var newShowDevVA = draft.vpShowDevelopingVA === true; + + slot.opts = { + rowsLayout: newRowsLayout, + rowSize: newRowSize, + volumeMode: newVolumeMode, + widthPercent: draft.vpWidthPercent != null ? Number(draft.vpWidthPercent) : prevOpts.widthPercent, + placement: draft.vpPlacement || prevOpts.placement || 'right', + upColor: draft.vpUpColor || prevOpts.upColor, + downColor: draft.vpDownColor || prevOpts.downColor, + vaUpColor: draft.vpVAUpColor || prevOpts.vaUpColor, + vaDownColor: draft.vpVADownColor || prevOpts.vaDownColor, + pocColor: draft.vpPOCColor || prevOpts.pocColor, + developingPOCColor: draft.vpDevelopingPOCColor || prevOpts.developingPOCColor, + developingVAColor: draft.vpDevelopingVAColor || prevOpts.developingVAColor, + showPOC: draft.vpShowPOC !== undefined ? draft.vpShowPOC : prevOpts.showPOC, + showValueArea: draft.vpShowValueArea !== undefined ? draft.vpShowValueArea : prevOpts.showValueArea, + showDevelopingPOC: newShowDevPOC, + showDevelopingVA: newShowDevVA, + valueAreaPct: newValueAreaPct, + }; + + var needsRecompute = newRowsLayout !== slot.rowsLayout + || newRowSize !== slot.rowSize + || newValueAreaPct !== (prevOpts.valueAreaPct || 0.70) + || newShowDevPOC !== (prevOpts.showDevelopingPOC === true) + || newShowDevVA !== (prevOpts.showDevelopingVA === true); + if (needsRecompute) { + slot.rowsLayout = newRowsLayout; + slot.rowSize = newRowSize; + var rawData = _tvSeriesRawData(entry, info.sourceSeriesId || 'main'); + var fromIdx = info.fromIndex != null ? info.fromIndex : 0; + var toIdx = info.toIndex != null ? info.toIndex : (rawData.length - 1); + var newVp = _tvComputeVolumeProfile(rawData, fromIdx, toIdx, { + rowsLayout: newRowsLayout, + rowSize: newRowSize, + valueAreaPct: newValueAreaPct, + withDeveloping: newShowDevPOC || newShowDevVA, + }); + if (newVp) slot.vpData = newVp; + } + slot.volumeMode = newVolumeMode; + + info.rowsLayout = newRowsLayout; + info.rowSize = newRowSize; + info.volumeMode = newVolumeMode; + info.valueAreaPct = newValueAreaPct; + info.placement = slot.opts.placement; + info.widthPercent = slot.opts.widthPercent; + info.upColor = slot.opts.upColor; + info.downColor = slot.opts.downColor; + info.vaUpColor = slot.opts.vaUpColor; + info.vaDownColor = slot.opts.vaDownColor; + info.pocColor = slot.opts.pocColor; + info.developingPOCColor = slot.opts.developingPOCColor; + info.developingVAColor = slot.opts.developingVAColor; + info.showPOC = slot.opts.showPOC; + info.showValueArea = slot.opts.showValueArea; + info.showDevelopingPOC = newShowDevPOC; + info.showDevelopingVA = newShowDevVA; + info.period = newRowsLayout === 'rows' ? newRowSize : 0; + + if (slot.primitive && slot.primitive.triggerUpdate) slot.primitive.triggerUpdate(); + _tvUpdateVolumeProfileLegendValues(seriesId); + _tvRebuildIndicatorLegend(info.chartId); +} + +/** Remove a volume-profile primitive by indicator id. */ +function _tvRemoveVolumeProfilePrimitive(indicatorId) { + var slot = _volumeProfilePrimitives[indicatorId]; + if (!slot) return; + var entry = window.__PYWRY_TVCHARTS__[slot.chartId]; + if (entry && entry.seriesMap[slot.seriesId] && slot.primitive) { + try { entry.seriesMap[slot.seriesId].detachPrimitive(slot.primitive); } catch (e) {} + } + delete _volumeProfilePrimitives[indicatorId]; +} + +/** Recompute all visible-range volume profiles on the given chart. */ +function _tvRefreshVisibleVolumeProfiles(chartId) { + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry || !entry.chart) return; + var timeScale = entry.chart.timeScale(); + var range = typeof timeScale.getVisibleLogicalRange === 'function' + ? timeScale.getVisibleLogicalRange() + : null; + var ids = Object.keys(_volumeProfilePrimitives); + for (var i = 0; i < ids.length; i++) { + var slot = _volumeProfilePrimitives[ids[i]]; + if (!slot || slot.chartId !== chartId || slot.mode !== 'visible') continue; + var ai = _activeIndicators[ids[i]]; + if (!ai) continue; + var bars = _tvSeriesRawData(entry, ai.sourceSeriesId || 'main'); + if (!bars || !bars.length) continue; + var fromIdx, toIdx; + if (range) { + fromIdx = Math.max(0, Math.floor(range.from)); + toIdx = Math.min(bars.length - 1, Math.ceil(range.to)); + } else { + fromIdx = 0; + toIdx = bars.length - 1; + } + var vp = _tvComputeVolumeProfile(bars, fromIdx, toIdx, { + rowsLayout: slot.rowsLayout || 'rows', + rowSize: slot.rowSize || ai.rowSize || 24, + valueAreaPct: (slot.opts && slot.opts.valueAreaPct) || 0.70, + withDeveloping: (slot.opts && (slot.opts.showDevelopingPOC || slot.opts.showDevelopingVA)) === true, + }); + if (!vp) continue; + slot.vpData = vp; + ai.fromIndex = fromIdx; + ai.toIndex = toIdx; + if (slot.primitive && slot.primitive.triggerUpdate) slot.primitive.triggerUpdate(); + _tvUpdateVolumeProfileLegendValues(ids[i]); + } +} + diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators/05-compute-extra.js b/pywry/pywry/frontend/src/tvchart/09-indicators/05-compute-extra.js new file mode 100644 index 0000000..9e50939 --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/09-indicators/05-compute-extra.js @@ -0,0 +1,538 @@ +function _computeVWAP(data) { + var result = []; + var cumVol = 0, cumTP = 0; + for (var i = 0; i < data.length; i++) { + var h = data[i].high || data[i].close || data[i].value || 0; + var l = data[i].low || data[i].close || data[i].value || 0; + var c = data[i].close !== undefined ? data[i].close : data[i].value || 0; + var v = data[i].volume || 1; + var tp = (h + l + c) / 3; + cumTP += tp * v; + cumVol += v; + result.push({ time: data[i].time, value: cumVol > 0 ? cumTP / cumVol : tp }); + } + return result; +} + +// --------------------------------------------------------------------------- +// Additional built-in indicators (textbook formulas) +// --------------------------------------------------------------------------- + +/** Volume-Weighted Moving Average: sum(src*vol) / sum(vol) over a window. */ +function _computeVWMA(data, period, source) { + source = source || 'close'; + var result = []; + for (var i = 0; i < data.length; i++) { + if (i < period - 1) { result.push({ time: data[i].time }); continue; } + var numer = 0, denom = 0; + for (var j = i - period + 1; j <= i; j++) { + var c = _tvIndicatorValue(data[j], source); + var v = data[j].volume || 0; + numer += c * v; + denom += v; + } + result.push({ time: data[i].time, value: denom > 0 ? numer / denom : undefined }); + } + return result; +} + +/** Hull Moving Average: WMA(2 * WMA(src, n/2) - WMA(src, n), sqrt(n)). */ +function _computeHMA(data, period, source) { + source = source || 'close'; + var half = Math.max(1, Math.floor(period / 2)); + var sqrtN = Math.max(1, Math.floor(Math.sqrt(period))); + var srcSeries = data.map(function(p) { return { time: p.time, value: _tvIndicatorValue(p, source) }; }); + var wmaHalf = _computeWMA(srcSeries, half, 'value'); + var wmaFull = _computeWMA(srcSeries, period, 'value'); + var diff = []; + for (var i = 0; i < data.length; i++) { + var a = wmaHalf[i].value; + var b = wmaFull[i].value; + diff.push({ + time: data[i].time, + value: (a !== undefined && b !== undefined) ? (2 * a - b) : undefined, + }); + } + return _computeWMA(diff, sqrtN, 'value'); +} + +/** Commodity Channel Index: (Source - SMA(Source, n)) / (0.015 * meanDev(Source, n)). */ +function _computeCCI(data, period, source) { + source = source || 'hlc3'; // TradingView default for CCI + var tp = data.map(function(p) { return { time: p.time, value: _tvIndicatorValue(p, source) }; }); + var sma = _computeSMA(tp, period, 'value'); + var result = []; + for (var k = 0; k < tp.length; k++) { + if (k < period - 1 || sma[k].value === undefined) { + result.push({ time: tp[k].time }); + continue; + } + var mean = sma[k].value; + var dev = 0; + for (var j = k - period + 1; j <= k; j++) { + dev += Math.abs(tp[j].value - mean); + } + dev /= period; + result.push({ + time: tp[k].time, + value: dev > 0 ? (tp[k].value - mean) / (0.015 * dev) : 0, + }); + } + return result; +} + +/** Williams %R: -100 * (highestHigh - source) / (highestHigh - lowestLow). */ +function _computeWilliamsR(data, period, source) { + source = source || 'close'; + var result = []; + for (var i = 0; i < data.length; i++) { + if (i < period - 1) { result.push({ time: data[i].time }); continue; } + var hh = -Infinity, ll = Infinity; + for (var j = i - period + 1; j <= i; j++) { + var h = data[j].high !== undefined ? data[j].high : data[j].close; + var l = data[j].low !== undefined ? data[j].low : data[j].close; + if (h > hh) hh = h; + if (l < ll) ll = l; + } + var c = _tvIndicatorValue(data[i], source); + var range = hh - ll; + result.push({ + time: data[i].time, + value: range > 0 ? -100 * (hh - c) / range : 0, + }); + } + return result; +} + +/** + * Stochastic Oscillator with TradingView's three-length signature: + * kLength "%K Length" default 14 raw %K window + * kSmoothing "%K Smoothing" default 1 SMA over raw %K (1 = none) + * dSmoothing "%D Smoothing" default 3 SMA over smoothed %K + */ +function _computeStochastic(data, kLength, kSmoothing, dSmoothing) { + var kRaw = []; + for (var i = 0; i < data.length; i++) { + if (i < kLength - 1) { kRaw.push({ time: data[i].time }); continue; } + var hh = -Infinity, ll = Infinity; + for (var j = i - kLength + 1; j <= i; j++) { + var h = data[j].high !== undefined ? data[j].high : data[j].close; + var l = data[j].low !== undefined ? data[j].low : data[j].close; + if (h > hh) hh = h; + if (l < ll) ll = l; + } + var c = data[i].close !== undefined ? data[i].close : data[i].value || 0; + var range = hh - ll; + kRaw.push({ time: data[i].time, value: range > 0 ? 100 * (c - ll) / range : 50 }); + } + var k = (kSmoothing && kSmoothing > 1) ? _computeSMA(kRaw, kSmoothing, 'value') : kRaw; + var d = _computeSMA(k, dSmoothing || 3, 'value'); + return { k: k, d: d }; +} + +/** Aroon Up and Down: 100 * (period - barsSince {high|low}) / period. */ +function _computeAroon(data, period) { + var up = [], down = []; + for (var i = 0; i < data.length; i++) { + if (i < period) { + up.push({ time: data[i].time }); + down.push({ time: data[i].time }); + continue; + } + var hh = -Infinity, ll = Infinity; + var hIdx = i, lIdx = i; + for (var j = i - period; j <= i; j++) { + var h = data[j].high !== undefined ? data[j].high : data[j].close; + var l = data[j].low !== undefined ? data[j].low : data[j].close; + if (h >= hh) { hh = h; hIdx = j; } + if (l <= ll) { ll = l; lIdx = j; } + } + up.push({ time: data[i].time, value: 100 * (period - (i - hIdx)) / period }); + down.push({ time: data[i].time, value: 100 * (period - (i - lIdx)) / period }); + } + return { up: up, down: down }; +} + +/** + * Average Directional Index (ADX) — TradingView's two-length form: + * diLength Lookback for +DI / -DI default 14 + * adxSmoothing Lookback for the ADX itself (DX MA) default 14 + * + * Back-compat: if only one arg is passed, both lengths use it. + */ +function _computeADX(data, diLength, adxSmoothing) { + if (adxSmoothing === undefined) adxSmoothing = diLength; + var period = diLength; + var plusDM = [], minusDM = [], tr = []; + for (var i = 0; i < data.length; i++) { + if (i === 0) { plusDM.push(0); minusDM.push(0); tr.push(0); continue; } + var h = data[i].high !== undefined ? data[i].high : data[i].close; + var l = data[i].low !== undefined ? data[i].low : data[i].close; + var pH = data[i - 1].high !== undefined ? data[i - 1].high : data[i - 1].close; + var pL = data[i - 1].low !== undefined ? data[i - 1].low : data[i - 1].close; + var pC = data[i - 1].close !== undefined ? data[i - 1].close : data[i - 1].value || 0; + var upMove = h - pH; + var downMove = pL - l; + plusDM.push(upMove > downMove && upMove > 0 ? upMove : 0); + minusDM.push(downMove > upMove && downMove > 0 ? downMove : 0); + tr.push(Math.max(h - l, Math.abs(h - pC), Math.abs(l - pC))); + } + + // Wilder smoothing (same formula as RMA / ATR's recursive smoothing) + function wilder(arr) { + var out = new Array(arr.length); + var sum = 0; + for (var i = 0; i < arr.length; i++) { + if (i < period) { sum += arr[i]; out[i] = undefined; if (i === period - 1) out[i] = sum; continue; } + out[i] = out[i - 1] - out[i - 1] / period + arr[i]; + } + return out; + } + + var trS = wilder(tr); + var plusS = wilder(plusDM); + var minusS = wilder(minusDM); + + var plusDI = [], minusDI = [], dx = []; + for (var k = 0; k < data.length; k++) { + if (trS[k] === undefined || trS[k] === 0) { + plusDI.push({ time: data[k].time }); + minusDI.push({ time: data[k].time }); + dx.push(undefined); + continue; + } + var pdi = 100 * plusS[k] / trS[k]; + var mdi = 100 * minusS[k] / trS[k]; + plusDI.push({ time: data[k].time, value: pdi }); + minusDI.push({ time: data[k].time, value: mdi }); + dx.push(pdi + mdi > 0 ? 100 * Math.abs(pdi - mdi) / (pdi + mdi) : 0); + } + + // ADX = Wilder smoothing of DX over adxSmoothing, starting once we + // have `adxSmoothing` valid DX values. + var adx = []; + var adxVal = null; + var dxSum = 0, dxCount = 0, dxStart = -1; + for (var m = 0; m < data.length; m++) { + if (dx[m] === undefined) { adx.push({ time: data[m].time }); continue; } + if (dxStart < 0) dxStart = m; + if (m - dxStart < adxSmoothing) { + dxSum += dx[m]; + dxCount += 1; + if (dxCount === adxSmoothing) { + adxVal = dxSum / adxSmoothing; + adx.push({ time: data[m].time, value: adxVal }); + } else { + adx.push({ time: data[m].time }); + } + } else { + adxVal = (adxVal * (adxSmoothing - 1) + dx[m]) / adxSmoothing; + adx.push({ time: data[m].time, value: adxVal }); + } + } + + return { adx: adx, plusDI: plusDI, minusDI: minusDI }; +} + +/** MACD: MA(fast) - MA(slow), signal MA of MACD, histogram = MACD - signal. */ +function _computeMACD(data, fast, slow, signal, source, oscMaType, signalMaType) { + source = source || 'close'; + oscMaType = oscMaType || 'EMA'; + signalMaType = signalMaType || 'EMA'; + + var srcSeries = data.map(function(p) { + return { time: p.time, value: _tvIndicatorValue(p, source) }; + }); + function maFn(t) { + return t === 'SMA' ? _computeSMA : t === 'WMA' ? _computeWMA : _computeEMA; + } + + var maFast = maFn(oscMaType)(srcSeries, fast, 'value'); + var maSlow = maFn(oscMaType)(srcSeries, slow, 'value'); + var macd = []; + for (var i = 0; i < data.length; i++) { + var f = maFast[i].value; + var s = maSlow[i].value; + macd.push({ + time: data[i].time, + value: (f !== undefined && s !== undefined) ? f - s : undefined, + }); + } + var sig = maFn(signalMaType)(macd, signal, 'value'); + var hist = []; + for (var k = 0; k < data.length; k++) { + var mv = macd[k].value; + var sv = sig[k].value; + hist.push({ + time: data[k].time, + value: (mv !== undefined && sv !== undefined) ? mv - sv : undefined, + }); + } + return { macd: macd, signal: sig, histogram: hist }; +} + +/** Accumulation/Distribution: cumulative CLV * volume. */ +function _computeAccumulationDistribution(data) { + var out = []; + var ad = 0; + for (var i = 0; i < data.length; i++) { + var h = data[i].high !== undefined ? data[i].high : data[i].close; + var l = data[i].low !== undefined ? data[i].low : data[i].close; + var c = data[i].close !== undefined ? data[i].close : data[i].value || 0; + var v = data[i].volume || 0; + var range = h - l; + var clv = range > 0 ? ((c - l) - (h - c)) / range : 0; + ad += clv * v; + out.push({ time: data[i].time, value: ad }); + } + return out; +} + +/** Historical Volatility: stdev of log returns * sqrt(annualizationFactor) * 100. */ +function _computeHistoricalVolatility(data, period, annualization) { + var ann = annualization || 252; + var returns = []; + for (var i = 0; i < data.length; i++) { + if (i === 0) { returns.push({ time: data[i].time, value: undefined }); continue; } + var pC = data[i - 1].close !== undefined ? data[i - 1].close : data[i - 1].value || 0; + var c = data[i].close !== undefined ? data[i].close : data[i].value || 0; + if (pC > 0 && c > 0) { + returns.push({ time: data[i].time, value: Math.log(c / pC) }); + } else { + returns.push({ time: data[i].time, value: undefined }); + } + } + var out = []; + for (var k = 0; k < data.length; k++) { + if (k < period) { out.push({ time: data[k].time }); continue; } + var sum = 0, count = 0; + for (var j = k - period + 1; j <= k; j++) { + if (returns[j].value !== undefined) { sum += returns[j].value; count += 1; } + } + if (count === 0) { out.push({ time: data[k].time }); continue; } + var mean = sum / count; + var sq = 0; + for (var jj = k - period + 1; jj <= k; jj++) { + if (returns[jj].value !== undefined) sq += (returns[jj].value - mean) * (returns[jj].value - mean); + } + var stdev = Math.sqrt(sq / count); + out.push({ time: data[k].time, value: stdev * Math.sqrt(ann) * 100 }); + } + return out; +} + +/** Keltner Channels: EMA(n) ± multiplier * ATR(n). */ +function _computeKeltnerChannels(data, period, multiplier, maType) { + multiplier = multiplier || 2; + maType = maType || 'EMA'; + var maFn = maType === 'SMA' ? _computeSMA : (maType === 'WMA' ? _computeWMA : _computeEMA); + var mid = maFn(data, period); + var atr = _computeATR(data, period); + var upper = [], lower = []; + for (var i = 0; i < data.length; i++) { + var m = mid[i].value; + var a = atr[i].value; + if (m === undefined || a === undefined) { + upper.push({ time: data[i].time }); + lower.push({ time: data[i].time }); + continue; + } + upper.push({ time: data[i].time, value: m + multiplier * a }); + lower.push({ time: data[i].time, value: m - multiplier * a }); + } + return { middle: mid, upper: upper, lower: lower }; +} + +/** + * Ichimoku Kinko Hyo — five-line indicator with TradingView's parameter names: + * + * conversionP "Conversion Line Periods" (Tenkan-sen) default 9 + * baseP "Base Line Periods" (Kijun-sen) default 26 + * leadingSpanP "Leading Span Periods" (Senkou Span B) default 52 + * laggingP "Lagging Span Periods" (Chikou shift back) default 26 + * leadingShiftP "Leading Shift Periods" (Senkou A/B fwd) default 26 + * + * Returned arrays are ready for ``setData``. Senkou Span A/B are + * forward-shifted onto synthesised future timestamps so the cloud + * actually projects into the future like TradingView's real version. + */ +function _computeIchimoku(data, conversionP, baseP, leadingSpanP, laggingP, leadingShiftP) { + // Back-compat: old callers pass (data, tenkanP, kijunP, senkouBP). + if (laggingP === undefined) laggingP = baseP; + if (leadingShiftP === undefined) leadingShiftP = baseP; + function highestHigh(lo, hi) { + var best = -Infinity; + for (var i = lo; i <= hi; i++) { + var h = data[i].high !== undefined ? data[i].high : data[i].close; + if (h > best) best = h; + } + return best; + } + function lowestLow(lo, hi) { + var best = Infinity; + for (var i = lo; i <= hi; i++) { + var l = data[i].low !== undefined ? data[i].low : data[i].close; + if (l < best) best = l; + } + return best; + } + function timeToNum(t) { + if (typeof t === 'number') return t; + if (typeof t === 'object' && t && 'year' in t) { + // Business day { year, month, day } + return Date.UTC(t.year, (t.month || 1) - 1, t.day || 1) / 1000; + } + var n = Number(t); + return isFinite(n) ? n : 0; + } + + var tenkan = [], kijun = []; + for (var i = 0; i < data.length; i++) { + if (i >= conversionP - 1) { + tenkan.push({ time: data[i].time, value: (highestHigh(i - conversionP + 1, i) + lowestLow(i - conversionP + 1, i)) / 2 }); + } else { + tenkan.push({ time: data[i].time }); + } + if (i >= baseP - 1) { + kijun.push({ time: data[i].time, value: (highestHigh(i - baseP + 1, i) + lowestLow(i - baseP + 1, i)) / 2 }); + } else { + kijun.push({ time: data[i].time }); + } + } + + // Median bar interval — robust against weekends / holidays in OHLCV + // feeds because we sort the deltas and take the middle one. + var deltas = []; + for (var d = 1; d < data.length; d++) { + var dt = timeToNum(data[d].time) - timeToNum(data[d - 1].time); + if (dt > 0) deltas.push(dt); + } + deltas.sort(function(a, b) { return a - b; }); + var barSeconds = deltas.length ? deltas[Math.floor(deltas.length / 2)] : 86400; + + // Future timestamps for the forward-shifted cloud. We need + // leadingShiftP points past the last bar; reuse the median + // interval for spacing. + var futureTimes = []; + var lastTime = timeToNum(data[data.length - 1].time); + for (var f = 1; f <= leadingShiftP; f++) { + futureTimes.push(lastTime + barSeconds * f); + } + + // Senkou Span A: (tenkan + kijun) / 2 at index i, plotted at + // time[i + leadingShiftP]. Senkou Span B: midpoint of + // leadingSpanP bars at index i, also forward-shifted. + var spanA = [], spanB = []; + function shiftedTime(srcIdx) { + var dst = srcIdx + leadingShiftP; + if (dst < data.length) return data[dst].time; + var futIdx = dst - data.length; + if (futIdx < futureTimes.length) return futureTimes[futIdx]; + return null; + } + + for (var k = 0; k < data.length; k++) { + var t = shiftedTime(k); + if (t === null) continue; + if (tenkan[k].value !== undefined && kijun[k].value !== undefined) { + spanA.push({ time: t, value: (tenkan[k].value + kijun[k].value) / 2 }); + } else { + spanA.push({ time: t }); + } + if (k >= leadingSpanP - 1) { + spanB.push({ time: t, value: (highestHigh(k - leadingSpanP + 1, k) + lowestLow(k - leadingSpanP + 1, k)) / 2 }); + } else { + spanB.push({ time: t }); + } + } + + // Chikou Span: current close plotted laggingP bars in the PAST. + // At time[m], display value = close[m + laggingP]. + var chikou = []; + for (var m = 0; m < data.length; m++) { + var src = m + laggingP; + if (src < data.length) { + var c = data[src].close !== undefined ? data[src].close : data[src].value || 0; + chikou.push({ time: data[m].time, value: c }); + } else { + chikou.push({ time: data[m].time }); + } + } + + return { + tenkan: tenkan, + kijun: kijun, + spanA: spanA, + spanB: spanB, + chikou: chikou, + futureTimes: futureTimes, + }; +} + +/** Parabolic SAR: trailing stop flipped when price crosses, with acceleration. */ +function _computeParabolicSAR(data, step, maxStep) { + step = step || 0.02; + maxStep = maxStep || 0.2; + if (data.length < 2) return data.map(function(d) { return { time: d.time }; }); + + var out = []; + var uptrend = true; + var af = step; + var ep = data[0].high !== undefined ? data[0].high : data[0].close; + var sar = data[0].low !== undefined ? data[0].low : data[0].close; + + out.push({ time: data[0].time }); // undefined — need 2 bars to seed + + // Decide initial trend from first two bars + var c0 = data[0].close !== undefined ? data[0].close : data[0].value || 0; + var c1 = data[1].close !== undefined ? data[1].close : data[1].value || 0; + uptrend = c1 >= c0; + if (uptrend) { + sar = data[0].low !== undefined ? data[0].low : c0; + ep = data[1].high !== undefined ? data[1].high : c1; + } else { + sar = data[0].high !== undefined ? data[0].high : c0; + ep = data[1].low !== undefined ? data[1].low : c1; + } + out.push({ time: data[1].time, value: sar }); + + for (var i = 2; i < data.length; i++) { + var h = data[i].high !== undefined ? data[i].high : data[i].close; + var l = data[i].low !== undefined ? data[i].low : data[i].close; + var prevHigh = data[i - 1].high !== undefined ? data[i - 1].high : data[i - 1].close; + var prevLow = data[i - 1].low !== undefined ? data[i - 1].low : data[i - 1].close; + + sar = sar + af * (ep - sar); + + if (uptrend) { + // SAR can't exceed prior two lows + sar = Math.min(sar, prevLow, data[i - 2].low !== undefined ? data[i - 2].low : data[i - 2].close); + if (l < sar) { + // Flip to downtrend + uptrend = false; + sar = ep; + ep = l; + af = step; + } else { + if (h > ep) { + ep = h; + af = Math.min(af + step, maxStep); + } + } + } else { + sar = Math.max(sar, prevHigh, data[i - 2].high !== undefined ? data[i - 2].high : data[i - 2].close); + if (h > sar) { + uptrend = true; + sar = ep; + ep = h; + af = step; + } else { + if (l < ep) { + ep = l; + af = Math.min(af + step, maxStep); + } + } + } + out.push({ time: data[i].time, value: sar }); + } + return out; diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators/06-indicator-helpers.js b/pywry/pywry/frontend/src/tvchart/09-indicators/06-indicator-helpers.js new file mode 100644 index 0000000..9c075c7 --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/09-indicators/06-indicator-helpers.js @@ -0,0 +1,173 @@ +} + +function _tvIndicatorValue(point, source) { + var src = source || 'close'; + if (src === 'hl2') { + var h2 = point.high !== undefined ? point.high : (point.value || 0); + var l2 = point.low !== undefined ? point.low : (point.value || 0); + return (h2 + l2) / 2; + } + if (src === 'ohlc4') { + var o4 = point.open !== undefined ? point.open : (point.value || 0); + var h4 = point.high !== undefined ? point.high : (point.value || 0); + var l4 = point.low !== undefined ? point.low : (point.value || 0); + var c4 = point.close !== undefined ? point.close : (point.value || 0); + return (o4 + h4 + l4 + c4) / 4; + } + if (src === 'hlc3') { + var h3 = point.high !== undefined ? point.high : (point.value || 0); + var l3 = point.low !== undefined ? point.low : (point.value || 0); + var c3 = point.close !== undefined ? point.close : (point.value || 0); + return (h3 + l3 + c3) / 3; + } + if (point[src] !== undefined) return point[src]; + if (point.close !== undefined) return point.close; + if (point.value !== undefined) return point.value; + return 0; +} + +function _tvShiftIndicatorData(data, offsetBars) { + var offset = Number(offsetBars || 0); + if (!offset) return data; + var out = []; + for (var i = 0; i < data.length; i++) { + var srcIdx = i - offset; + if (srcIdx >= 0 && srcIdx < data.length && data[srcIdx].value !== undefined) { + out.push({ time: data[i].time, value: data[srcIdx].value }); + } else { + out.push({ time: data[i].time }); + } + } + return out; +} + +function _tvComputeAveragePrice(data) { + var out = []; + for (var i = 0; i < data.length; i++) { + var p = data[i] || {}; + var sum = 0; + var count = 0; + if (p.open !== undefined) { sum += p.open; count++; } + if (p.high !== undefined) { sum += p.high; count++; } + if (p.low !== undefined) { sum += p.low; count++; } + if (p.close !== undefined) { sum += p.close; count++; } + if (!count && p.value !== undefined) { sum += p.value; count = 1; } + out.push({ time: p.time, value: count ? (sum / count) : undefined }); + } + return out; +} + +function _tvComputeMedianPrice(data) { + var out = []; + for (var i = 0; i < data.length; i++) { + var p = data[i] || {}; + var h = p.high !== undefined ? p.high : (p.value !== undefined ? p.value : undefined); + var l = p.low !== undefined ? p.low : (p.value !== undefined ? p.value : undefined); + out.push({ time: p.time, value: (h !== undefined && l !== undefined) ? (h + l) / 2 : undefined }); + } + return out; +} + +function _tvComputeWeightedClose(data) { + var out = []; + for (var i = 0; i < data.length; i++) { + var p = data[i] || {}; + var h = p.high !== undefined ? p.high : (p.value || 0); + var l = p.low !== undefined ? p.low : (p.value || 0); + var c = p.close !== undefined ? p.close : (p.value || 0); + out.push({ time: p.time, value: (h + l + 2 * c) / 4 }); + } + return out; +} + +function _tvComputeMomentum(data, length, source) { + var out = []; + for (var i = 0; i < data.length; i++) { + if (i < length) { out.push({ time: data[i].time }); continue; } + var cur = _tvIndicatorValue(data[i], source); + var prv = _tvIndicatorValue(data[i - length], source); + out.push({ time: data[i].time, value: cur - prv }); + } + return out; +} + +function _tvComputePercentChange(data, source) { + var out = []; + var base = null; + for (var i = 0; i < data.length; i++) { + var v = _tvIndicatorValue(data[i], source); + if (base === null && isFinite(v) && v !== 0) base = v; + if (base === null || !isFinite(v)) { + out.push({ time: data[i].time }); + } else { + out.push({ time: data[i].time, value: ((v / base) - 1) * 100 }); + } + } + return out; +} + +function _tvAlignTwoSeries(primary, secondary, primarySource, secondarySource) { + var secMap = {}; + for (var j = 0; j < secondary.length; j++) { + secMap[String(secondary[j].time)] = _tvIndicatorValue(secondary[j], secondarySource); + } + var out = []; + for (var i = 0; i < primary.length; i++) { + var t = String(primary[i].time); + if (secMap[t] === undefined) continue; + out.push({ time: primary[i].time, a: _tvIndicatorValue(primary[i], primarySource), b: secMap[t] }); + } + return out; +} + +function _tvComputeBinary(primary, secondary, primarySource, secondarySource, op) { + var aligned = _tvAlignTwoSeries(primary, secondary, primarySource, secondarySource); + var out = []; + for (var i = 0; i < aligned.length; i++) { + var p = aligned[i]; + var val; + if (op === 'spread') val = p.a - p.b; + else if (op === 'ratio') val = p.b === 0 ? undefined : p.a / p.b; + else if (op === 'sum') val = p.a + p.b; + else if (op === 'product') val = p.a * p.b; + out.push({ time: p.time, value: val }); + } + return out; +} + +function _tvComputeCorrelation(primary, secondary, length, primarySource, secondarySource) { + var aligned = _tvAlignTwoSeries(primary, secondary, primarySource, secondarySource); + var out = []; + for (var i = 0; i < aligned.length; i++) { + if (i + 1 < length) { + out.push({ time: aligned[i].time }); + continue; + } + var sx = 0, sy = 0; + for (var j = i - length + 1; j <= i; j++) { + sx += aligned[j].a; + sy += aligned[j].b; + } + var mx = sx / length; + var my = sy / length; + var cov = 0, vx = 0, vy = 0; + for (var k = i - length + 1; k <= i; k++) { + var dx = aligned[k].a - mx; + var dy = aligned[k].b - my; + cov += dx * dy; + vx += dx * dx; + vy += dy * dy; + } + var den = Math.sqrt(vx * vy); + out.push({ time: aligned[i].time, value: den > 0 ? (cov / den) : 0 }); + } + return out; +} + +// Assign distinct colors to indicators +var _INDICATOR_COLORS = [ + '#ff9800', '#e91e63', '#9c27b0', '#00bcd4', '#8bc34a', + '#ff5722', '#3f51b5', '#009688', '#ffc107', '#607d8b' +]; +var _indicatorColorIdx = 0; + diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators/07-remove-legend.js b/pywry/pywry/frontend/src/tvchart/09-indicators/07-remove-legend.js new file mode 100644 index 0000000..a78d05d --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/09-indicators/07-remove-legend.js @@ -0,0 +1,306 @@ +function _getNextIndicatorColor() { + var c = _cssVar('--pywry-preset-' + ((_indicatorColorIdx % 10) + 3), _INDICATOR_COLORS[_indicatorColorIdx % _INDICATOR_COLORS.length]); + _indicatorColorIdx++; + return c; +} + +function _tvRemoveIndicator(seriesId) { + var info = _activeIndicators[seriesId]; + if (!info) return; + var chartId = info.chartId; + var entry = window.__PYWRY_TVCHARTS__[chartId]; + + // Push undo entry before removing (skip during layout restore) + if (!window.__PYWRY_UNDO_SUPPRESS__) { + var _undoDef = { + name: info.name, key: info.type, + defaultPeriod: info.period || 0, + _color: info.color, + _multiplier: info.multiplier, + _maType: info.maType, + _offset: info.offset, + _source: info.source, + }; + var _undoCid = chartId; + _tvPushUndo({ + label: 'Remove ' + (info.name || 'indicator'), + undo: function() { + _tvAddIndicator(_undoDef, _undoCid); + }, + redo: function() { + // Find the indicator by type+period after re-add (seriesIds change) + var keys = Object.keys(_activeIndicators); + for (var i = keys.length - 1; i >= 0; i--) { + var ai = _activeIndicators[keys[i]]; + if (ai && ai.chartId === _undoCid && ai.type === _undoDef.key) { + _tvRemoveIndicator(keys[i]); + break; + } + } + }, + }); + } + + // Remove requested series and grouped siblings in a single pass. + var toRemove = [seriesId]; + if (info.group) { + var gKeys = Object.keys(_activeIndicators); + for (var gi = 0; gi < gKeys.length; gi++) { + var gk = gKeys[gi]; + if (gk !== seriesId && _activeIndicators[gk] && _activeIndicators[gk].group === info.group) { + toRemove.push(gk); + } + } + } + + var removedPanes = {}; + for (var i = 0; i < toRemove.length; i++) { + var sid = toRemove[i]; + var sinfo = _activeIndicators[sid]; + if (!sinfo) continue; + var sEntry = window.__PYWRY_TVCHARTS__[sinfo.chartId]; + // Primitive-only indicators (volume profile) don't have an entry in + // seriesMap — detach the primitive from the host series instead. + if (_volumeProfilePrimitives[sid]) { + _tvRemoveVolumeProfilePrimitive(sid); + } + if (sEntry && sEntry.seriesMap[sid]) { + try { sEntry.chart.removeSeries(sEntry.seriesMap[sid]); } catch(e) {} + delete sEntry.seriesMap[sid]; + } + // Clean up hidden indicator source series (secondary symbol used for binary indicators) + if (sinfo.secondarySeriesId && sEntry && sEntry._indicatorSourceSeries && sEntry._indicatorSourceSeries[sinfo.secondarySeriesId]) { + var secId = sinfo.secondarySeriesId; + if (sEntry.seriesMap[secId]) { + try { sEntry.chart.removeSeries(sEntry.seriesMap[secId]); } catch(e) {} + delete sEntry.seriesMap[secId]; + } + delete sEntry._indicatorSourceSeries[secId]; + if (sEntry._compareSymbols) delete sEntry._compareSymbols[secId]; + if (sEntry._compareLabels) delete sEntry._compareLabels[secId]; + if (sEntry._compareSymbolInfo) delete sEntry._compareSymbolInfo[secId]; + if (sEntry._seriesRawData) delete sEntry._seriesRawData[secId]; + if (sEntry._seriesCanonicalRawData) delete sEntry._seriesCanonicalRawData[secId]; + } + if (sinfo.chartId === chartId && sinfo.isSubplot && sinfo.paneIndex > 0) { + removedPanes[sinfo.paneIndex] = true; + } + delete _activeIndicators[sid]; + } + + // Remove empty subplot containers and keep pane indexes in sync. + if (entry && entry.chart && typeof entry.chart.removePane === 'function') { + var paneKeys = Object.keys(removedPanes) + .map(function(v) { return Number(v); }) + .sort(function(a, b) { return b - a; }); + for (var pi = 0; pi < paneKeys.length; pi++) { + var removedPane = paneKeys[pi]; + var paneStillUsed = false; + var remaining = Object.keys(_activeIndicators); + for (var ri = 0; ri < remaining.length; ri++) { + var ai = _activeIndicators[remaining[ri]]; + if (ai && ai.chartId === chartId && ai.isSubplot && ai.paneIndex === removedPane) { + paneStillUsed = true; + break; + } + } + if (paneStillUsed) continue; + var paneRemoved = false; + try { + entry.chart.removePane(removedPane); + paneRemoved = true; + } catch(e2) { + try { + if (typeof entry.chart.panes === 'function') { + var paneObj = entry.chart.panes()[removedPane]; + if (paneObj) { + entry.chart.removePane(paneObj); + paneRemoved = true; + } + } + } catch(e3) {} + } + if (paneRemoved) { + // Lightweight Charts reindexes panes after removal. + for (var uj = 0; uj < remaining.length; uj++) { + var uid = remaining[uj]; + var uai = _activeIndicators[uid]; + if (uai && uai.chartId === chartId && uai.isSubplot && uai.paneIndex > removedPane) { + uai.paneIndex -= 1; + } + } + } + } + } + + // Keep next pane index compact after removals. + if (entry) { + var maxPane = 0; + var keys = Object.keys(_activeIndicators); + for (var k = 0; k < keys.length; k++) { + var ii = _activeIndicators[keys[k]]; + if (ii && ii.chartId === chartId && ii.isSubplot && ii.paneIndex > maxPane) { + maxPane = ii.paneIndex; + } + } + entry._nextPane = maxPane + 1; + } + + // Reset maximize/collapse state — pane layout changed + if (entry) { entry._paneState = { mode: 'normal', pane: -1 }; delete entry._savedPaneHeights; } + + _tvRebuildIndicatorLegend(chartId); + + // Clean up BB fill canvas if no BB indicators remain on this chart + if (info.type === 'bollinger-bands') { + var hasBB = false; + var remKeys = Object.keys(_activeIndicators); + for (var bi = 0; bi < remKeys.length; bi++) { + if (_activeIndicators[remKeys[bi]].chartId === chartId && _activeIndicators[remKeys[bi]].type === 'bollinger-bands') { hasBB = true; break; } + } + if (!hasBB) { + _tvRemoveBBFillPrimitive(chartId); + } else { + _tvUpdateBBFill(chartId); + } + } + + // Clean up Ichimoku cloud primitive if no Ichimoku groups remain. + if (info.type === 'ichimoku') { + var hasIchi = false; + var iremKeys = Object.keys(_activeIndicators); + for (var ii = 0; ii < iremKeys.length; ii++) { + if (_activeIndicators[iremKeys[ii]].chartId === chartId && _activeIndicators[iremKeys[ii]].type === 'ichimoku') { hasIchi = true; break; } + } + if (!hasIchi) { + _tvRemoveIchimokuCloudPrimitive(chartId); + } else { + _tvUpdateIchimokuCloud(chartId); + } + } +} + +// --------------------------------------------------------------------------- +// Indicator legend helpers +// --------------------------------------------------------------------------- + +function _tvLegendActionButton(title, iconHtml, onClick) { + var btn = document.createElement('button'); + btn.type = 'button'; + btn.className = 'tvchart-legend-btn'; + btn.setAttribute('data-tooltip', title); + btn.setAttribute('aria-label', title); + btn.innerHTML = iconHtml; + btn.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + if (onClick) onClick(btn, e); + }); + return btn; +} + +function _tvOpenLegendItemMenu(anchorEl, actions) { + if (!anchorEl || !actions || !actions.length) return; + var old = document.querySelector('.tvchart-legend-menu'); + if (old && old.parentNode) old.parentNode.removeChild(old); + var menu = document.createElement('div'); + menu.className = 'tvchart-legend-menu'; + for (var i = 0; i < actions.length; i++) { + (function(action) { + if (action.separator) { + var sep = document.createElement('div'); + sep.className = 'tvchart-legend-menu-sep'; + menu.appendChild(sep); + return; + } + var item = document.createElement('button'); + item.type = 'button'; + item.className = 'tvchart-legend-menu-item'; + if (action.disabled) { + item.disabled = true; + item.classList.add('is-disabled'); + } + if (action.tooltip) { + item.setAttribute('data-tooltip', action.tooltip); + } + var icon = document.createElement('span'); + icon.className = 'tvchart-legend-menu-item-icon'; + icon.innerHTML = action.icon || ''; + item.appendChild(icon); + var label = document.createElement('span'); + label.className = 'tvchart-legend-menu-item-label'; + label.textContent = action.label; + item.appendChild(label); + if (action.meta) { + var meta = document.createElement('span'); + meta.className = 'tvchart-legend-menu-item-meta'; + meta.textContent = action.meta; + item.appendChild(meta); + } + item.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + if (action.disabled) return; + if (menu.parentNode) menu.parentNode.removeChild(menu); + action.run(); + }); + menu.appendChild(item); + })(actions[i]); + } + menu.addEventListener('click', function(e) { e.stopPropagation(); }); + var _oc = _tvAppendOverlay(anchorEl, menu); + var _cs = _tvContainerSize(_oc); + var rect = _tvContainerRect(_oc, anchorEl.getBoundingClientRect()); + var menuRect = menu.getBoundingClientRect(); + var left = Math.max(6, Math.min(_cs.width - menuRect.width - 6, rect.right - menuRect.width)); + var top = Math.max(6, Math.min(_cs.height - menuRect.height - 6, rect.bottom + 4)); + menu.style.left = left + 'px'; + menu.style.top = top + 'px'; + setTimeout(function() { + document.addEventListener('click', function closeMenu() { + if (menu.parentNode) menu.parentNode.removeChild(menu); + }, { once: true }); + }, 0); +} + +function _tvSetIndicatorVisibility(chartId, seriesId, visible) { + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry || !entry.chart) return; + var target = _activeIndicators[seriesId]; + if (!target) return; + var keys = Object.keys(_activeIndicators); + for (var i = 0; i < keys.length; i++) { + var sid = keys[i]; + var info = _activeIndicators[sid]; + if (!info || info.chartId !== chartId) continue; + if (target.group && info.group !== target.group) continue; + if (!target.group && sid !== seriesId) continue; + var s = entry.seriesMap[sid]; + if (s && typeof s.applyOptions === 'function') { + try { s.applyOptions({ visible: !!visible }); } catch (e) {} + } + // Volume Profile primitives have no real series — toggle the + // primitive's own hidden flag and request a redraw. + var vpSlot = _volumeProfilePrimitives[sid]; + if (vpSlot) { + vpSlot.hidden = !visible; + if (vpSlot.primitive && vpSlot.primitive.triggerUpdate) vpSlot.primitive.triggerUpdate(); + } + info.hidden = !visible; + } +} + +function _tvLegendCopyToClipboard(text) { + var value = String(text || '').trim(); + if (!value) return; + try { + if (navigator.clipboard && navigator.clipboard.writeText) { + navigator.clipboard.writeText(value); + } + } catch (e) {} +} + +// --------------------------------------------------------------------------- +// Pane move up/down for subplot indicators +// --------------------------------------------------------------------------- + diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators/08-pane-management.js b/pywry/pywry/frontend/src/tvchart/09-indicators/08-pane-management.js new file mode 100644 index 0000000..8fb0c72 --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/09-indicators/08-pane-management.js @@ -0,0 +1,601 @@ +function _tvSwapIndicatorPane(chartId, seriesId, direction) { + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry || !entry.chart) return; + var info = _activeIndicators[seriesId]; + if (!info || !info.isSubplot) return; + + // Restore panes to normal before swapping so heights are sane + var pState = _tvGetPaneState(chartId); + if (pState.mode !== 'normal') { + _tvRestorePanes(chartId); + } + + var targetPane = info.paneIndex + direction; + if (targetPane < 0) return; // Can't move above the first pane + + // Count the total number of panes via LWC API + var totalPanes = 0; + try { + if (typeof entry.chart.panes === 'function') { + totalPanes = entry.chart.panes().length; + } + } catch (e) {} + if (totalPanes <= 0) { + // Fallback: count from tracked indicators + volume + var allKeys = Object.keys(_activeIndicators); + for (var i = 0; i < allKeys.length; i++) { + var ai = _activeIndicators[allKeys[i]]; + if (ai && ai.chartId === chartId && ai.paneIndex > totalPanes) { + totalPanes = ai.paneIndex; + } + } + totalPanes += 1; // convert max index to count + } + if (targetPane >= totalPanes) return; // Can't move below last pane + + // Use LWC v5 swapPanes API + try { + if (typeof entry.chart.swapPanes === 'function') { + entry.chart.swapPanes(info.paneIndex, targetPane); + } else { + return; // API not available + } + } catch (e) { + return; + } + + var oldPane = info.paneIndex; + + // Update paneIndex tracking for all affected indicators + var allKeys2 = Object.keys(_activeIndicators); + for (var j = 0; j < allKeys2.length; j++) { + var aj = _activeIndicators[allKeys2[j]]; + if (!aj || aj.chartId !== chartId) continue; + if (aj.paneIndex === oldPane) { + aj.paneIndex = targetPane; + } else if (aj.paneIndex === targetPane) { + aj.paneIndex = oldPane; + } + } + + // Update volume pane tracking if swap involved a volume pane + if (entry._volumePaneBySeries) { + var volKeys = Object.keys(entry._volumePaneBySeries); + for (var vi = 0; vi < volKeys.length; vi++) { + var vk = volKeys[vi]; + if (entry._volumePaneBySeries[vk] === oldPane) { + entry._volumePaneBySeries[vk] = targetPane; + } else if (entry._volumePaneBySeries[vk] === targetPane) { + entry._volumePaneBySeries[vk] = oldPane; + } + } + } + + // Reposition the main chart legend to follow the pane it now lives in. + // Deferred so the swap DOM changes are settled. + requestAnimationFrame(function() { + _tvRepositionMainLegend(entry, chartId); + }); + + _tvRebuildIndicatorLegend(chartId); +} + +/** + * Find which pane index the main chart series currently lives in. + * Returns 0 if unknown. + */ +function _tvFindMainChartPane(entry) { + if (!entry || !entry.chart) return 0; + try { + var panes = typeof entry.chart.panes === 'function' ? entry.chart.panes() : null; + if (!panes) return 0; + // The main chart series is the first entry in seriesMap + var mainKey = Object.keys(entry.seriesMap)[0]; + var mainSeries = mainKey ? entry.seriesMap[mainKey] : null; + if (!mainSeries) return 0; + for (var pi = 0; pi < panes.length; pi++) { + var pSeries = typeof panes[pi].getSeries === 'function' ? panes[pi].getSeries() : []; + for (var si = 0; si < pSeries.length; si++) { + if (pSeries[si] === mainSeries) return pi; + } + } + } catch (e) {} + return 0; +} + +/** + * Reposition the main legend box (OHLC, Volume text, indicators-in-main) + * so it sits at the top of whichever pane the main chart series is in. + * When the main chart is in pane 0 (default), top stays at 8px. + * When it's been swapped to another pane, offset the legend accordingly. + */ +function _tvRepositionMainLegend(entry, chartId) { + if (!entry || !entry.chart) return; + var legendBox = _tvScopedById(chartId, 'tvchart-legend-box'); + if (!legendBox) return; + + var mainPane = _tvFindMainChartPane(entry); + if (mainPane === 0) { + // Default position + legendBox.style.top = '8px'; + return; + } + + try { + var panes = typeof entry.chart.panes === 'function' ? entry.chart.panes() : null; + if (!panes || !panes[mainPane]) { legendBox.style.top = '8px'; return; } + var paneHtml = typeof panes[mainPane].getHTMLElement === 'function' + ? panes[mainPane].getHTMLElement() : null; + if (!paneHtml) { legendBox.style.top = '8px'; return; } + // The legend box is positioned relative to the inside toolbar overlay + // which matches the chart container bounds exactly. + var containerRect = entry.container.getBoundingClientRect(); + var paneRect = paneHtml.getBoundingClientRect(); + var offset = paneRect.top - containerRect.top; + legendBox.style.top = (offset + 8) + 'px'; + } catch (e) { + legendBox.style.top = '8px'; + } +} + +/** + * Get the current state of a pane: 'normal', 'maximized', or 'collapsed'. + */ +function _tvGetPaneState(chartId) { + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry) return { mode: 'normal', pane: -1 }; + if (!entry._paneState) entry._paneState = { mode: 'normal', pane: -1 }; + return entry._paneState; +} + +/** + * Save the current pane heights before maximize/collapse so we can + * restore them later. + */ +function _tvSavePaneHeights(entry) { + if (!entry || !entry.chart) return; + try { + var panes = entry.chart.panes(); + if (!panes) return; + entry._savedPaneHeights = []; + for (var i = 0; i < panes.length; i++) { + var el = typeof panes[i].getHTMLElement === 'function' + ? panes[i].getHTMLElement() : null; + entry._savedPaneHeights.push(el ? el.clientHeight : 0); + } + } catch (e) {} +} + +/** + * Hide or show LWC pane HTML elements and separator bars. + * LWC renders panes as table-row elements inside a table; separators + * are sibling rows. We walk the parent and hide everything except the + * target pane's row. + */ +function _tvSetPaneVisibility(panes, visibleIndex, hidden) { + for (var k = 0; k < panes.length; k++) { + var el = typeof panes[k].getHTMLElement === 'function' + ? panes[k].getHTMLElement() : null; + if (!el) continue; + if (hidden && k !== visibleIndex) { + el.style.display = 'none'; + // Also hide the separator bar above (previous sibling of the pane) + var sep = el.previousElementSibling; + if (sep && sep !== el.parentElement.firstElementChild) { + sep.style.display = 'none'; + } + } else { + el.style.display = ''; + var sep2 = el.previousElementSibling; + if (sep2 && sep2 !== el.parentElement.firstElementChild) { + sep2.style.display = ''; + } + } + } +} + +/** + * Show or hide the legend boxes to match which panes are visible. + * mode='normal' — show everything + * mode='maximized' — show only the legend for `pane`, hide others + * mode='collapsed' — hide the legend for `pane`, show others + */ +function _tvSyncLegendVisibility(chartId, mode, pane) { + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry) return; + + // Main legend box (OHLC, Volume, indicators-in-main-pane) + var legendBox = _tvScopedById(chartId, 'tvchart-legend-box'); + var mainPane = _tvFindMainChartPane(entry); + + if (mode === 'normal') { + // Show everything + if (legendBox) legendBox.style.display = ''; + if (entry._paneLegendEls) { + var pKeys = Object.keys(entry._paneLegendEls); + for (var i = 0; i < pKeys.length; i++) { + entry._paneLegendEls[pKeys[i]].style.display = ''; + } + } + } else if (mode === 'maximized') { + // Hide main legend if main chart pane is not the maximized one + if (legendBox) legendBox.style.display = (mainPane === pane) ? '' : 'none'; + // Hide all pane overlays except for the maximized pane + if (entry._paneLegendEls) { + var mKeys = Object.keys(entry._paneLegendEls); + for (var m = 0; m < mKeys.length; m++) { + var idx = Number(mKeys[m]); + entry._paneLegendEls[mKeys[m]].style.display = (idx === pane) ? '' : 'none'; + } + } + } else if (mode === 'collapsed') { + // Show all legends — the collapsed pane still shows its legend in the thin strip + if (legendBox) legendBox.style.display = ''; + if (entry._paneLegendEls) { + var cKeys = Object.keys(entry._paneLegendEls); + for (var c = 0; c < cKeys.length; c++) { + entry._paneLegendEls[cKeys[c]].style.display = ''; + } + } + } +} + +/** + * Maximize a pane: hide every other pane so it fills the entire chart area. + */ +function _tvMaximizePane(chartId, paneIndex) { + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry || !entry.chart) return; + try { + if (typeof entry.chart.panes !== 'function') return; + var panes = entry.chart.panes(); + if (!panes || !panes[paneIndex]) return; + var state = _tvGetPaneState(chartId); + + // If already maximized on this pane, restore instead + if (state.mode === 'maximized' && state.pane === paneIndex) { + _tvRestorePanes(chartId); + return; + } + + // If currently in another mode, restore first + if (state.mode !== 'normal') { + _tvSetPaneVisibility(panes, -1, false); // unhide all + } + + // Save heights only from normal state + if (state.mode === 'normal') { + _tvSavePaneHeights(entry); + } + + // Hide every other pane + its surrounding separator bars so no + // grey strips steal pixels. Then use LWC's setStretchFactor + // to give the target pane all the proportional space — + // setStretchFactor lets LWC distribute container height + // automatically, so we don't have to fight with pixel math + // (which leaves dead space because LWC re-distributes to its + // own minimums). Stretch ratios: target = 10000, others = 0.001. + _tvSetPaneVisibilityFull(panes, paneIndex); + + for (var __pi = 0; __pi < panes.length; __pi++) { + var p = panes[__pi]; + if (!p) continue; + // Save original stretch factor for restore (default 1). + if (entry._savedStretchFactors == null) entry._savedStretchFactors = []; + if (entry._savedStretchFactors[__pi] == null) { + try { + entry._savedStretchFactors[__pi] = (typeof p.getStretchFactor === 'function') + ? p.getStretchFactor() : 1; + } catch (_e0) { entry._savedStretchFactors[__pi] = 1; } + } + if (typeof p.setStretchFactor === 'function') { + try { p.setStretchFactor(__pi === paneIndex ? 10000 : 0.001); } catch (_e) {} + } else if (typeof p.setHeight === 'function') { + // Fallback for older LWC + try { p.setHeight(__pi === paneIndex ? 10000 : 1); } catch (_e2) {} + } + } + + // Force a chart redraw so LWC honours the new stretch factors. + try { + entry.chart.applyOptions({ autoSize: true }); + var w = entry.container ? entry.container.clientWidth : 800; + var h = entry.container ? entry.container.clientHeight : 600; + if (typeof entry.chart.resize === 'function') entry.chart.resize(w, h); + } catch (_e3) {} + + requestAnimationFrame(function() { + _tvRepositionPaneLegends(chartId); + }); + + entry._paneState = { mode: 'maximized', pane: paneIndex }; + _tvSyncLegendVisibility(chartId, 'maximized', paneIndex); + _tvUpdatePaneControlButtons(chartId); + } catch (e) {} +} + +/** + * Like _tvSetPaneVisibility but ALSO hides the separator BELOW each + * non-target pane (the current helper only hides the one above). + * Without this the thin grey separators stack up and steal real + * pixels from the maximized pane. + */ +function _tvSetPaneVisibilityFull(panes, visibleIndex) { + for (var k = 0; k < panes.length; k++) { + var el = typeof panes[k].getHTMLElement === 'function' ? panes[k].getHTMLElement() : null; + if (!el) continue; + if (k !== visibleIndex) { + el.style.display = 'none'; + var prevSep = el.previousElementSibling; + if (prevSep && prevSep !== el.parentElement.firstElementChild) prevSep.style.display = 'none'; + var nextSep = el.nextElementSibling; + if (nextSep && nextSep.tagName !== el.tagName) nextSep.style.display = 'none'; + } else { + el.style.display = ''; + } + } +} + +/** + * Collapse a pane: shrink it to a thin strip showing only the legend text. + * The pane stays visible but its chart content is clipped. + */ +function _tvCollapsePane(chartId, paneIndex) { + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry || !entry.chart) return; + try { + if (typeof entry.chart.panes !== 'function') return; + var panes = entry.chart.panes(); + if (!panes || !panes[paneIndex]) return; + var state = _tvGetPaneState(chartId); + + // If already collapsed on this pane, restore instead + if (state.mode === 'collapsed' && state.pane === paneIndex) { + _tvRestorePanes(chartId); + return; + } + + // If currently in another mode, restore first + if (state.mode !== 'normal') { + _tvSetPaneVisibility(panes, -1, false); + _tvShowPaneContent(panes, -1); // unhide any hidden canvases + } + + // Save heights only from normal state + if (state.mode === 'normal') { + _tvSavePaneHeights(entry); + } + + // Shrink pane to minimal via LWC API, then hide all canvas/content + // children so only the empty strip remains for the legend overlay. + if (typeof panes[paneIndex].setHeight === 'function') { + panes[paneIndex].setHeight(1); + } + _tvHidePaneContent(panes[paneIndex]); + + entry._paneState = { mode: 'collapsed', pane: paneIndex }; + _tvSyncLegendVisibility(chartId, 'collapsed', paneIndex); + _tvUpdatePaneControlButtons(chartId); + requestAnimationFrame(function() { + _tvRepositionPaneLegends(chartId); + }); + } catch (e) {} +} + +/** + * Hide all visual content (canvases, child elements) inside a pane, + * leaving the pane element itself visible at whatever height LWC gives it. + */ +function _tvHidePaneContent(pane) { + var el = typeof pane.getHTMLElement === 'function' ? pane.getHTMLElement() : null; + if (!el) return; + // Hide every child element inside the pane (canvas, scale elements, etc.) + var children = el.querySelectorAll('*'); + for (var i = 0; i < children.length; i++) { + children[i].style.visibility = 'hidden'; + } +} + +/** + * Restore visibility to pane content. + * If paneIndex is -1, restores all panes. + */ +function _tvShowPaneContent(panes, paneIndex) { + for (var k = 0; k < panes.length; k++) { + if (paneIndex >= 0 && k !== paneIndex) continue; + var el = typeof panes[k].getHTMLElement === 'function' + ? panes[k].getHTMLElement() : null; + if (!el) continue; + var children = el.querySelectorAll('*'); + for (var j = 0; j < children.length; j++) { + children[j].style.visibility = ''; + } + } +} + +/** + * Restore all panes to their saved heights (before maximize/collapse). + */ +function _tvRestorePanes(chartId) { + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry || !entry.chart) return; + try { + if (typeof entry.chart.panes !== 'function') return; + var panes = entry.chart.panes(); + if (!panes) return; + + // Unhide all panes (from maximize) and restore content (from collapse) + _tvSetPaneVisibility(panes, -1, false); + _tvShowPaneContent(panes, -1); + + // Restore stretch factors from maximize (so panes go back to their + // original proportional space). Falls back to setHeight if + // setStretchFactor isn't available. + if (entry._savedStretchFactors && entry._savedStretchFactors.length === panes.length) { + for (var __sr = 0; __sr < panes.length; __sr++) { + var __pp = panes[__sr]; + if (__pp && typeof __pp.setStretchFactor === 'function') { + try { __pp.setStretchFactor(entry._savedStretchFactors[__sr] || 1); } catch (_e) {} + } + } + } + delete entry._savedStretchFactors; + + var saved = entry._savedPaneHeights; + if (saved && saved.length === panes.length) { + for (var i = 0; i < panes.length; i++) { + if (typeof panes[i].setHeight === 'function' && saved[i] > 0) { + panes[i].setHeight(saved[i]); + } + } + } else { + // Fallback: equal distribution + var containerH = entry.container ? entry.container.clientHeight : 600; + for (var j = 0; j < panes.length; j++) { + if (typeof panes[j].setHeight === 'function') { + panes[j].setHeight(Math.round(containerH / panes.length)); + } + } + } + entry._paneState = { mode: 'normal', pane: -1 }; + delete entry._savedPaneHeights; + _tvSyncLegendVisibility(chartId, 'normal', -1); + _tvUpdatePaneControlButtons(chartId); + requestAnimationFrame(function() { + _tvRepositionPaneLegends(chartId); + }); + } catch (e) {} +} + +/** + * Update the maximize/collapse/restore button icon and tooltip for every + * subplot indicator in the given chart, reflecting the current pane state. + */ +function _tvUpdatePaneControlButtons(chartId) { + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry) return; + var state = _tvGetPaneState(chartId); + var restoreSvg = ''; + var maximizeSvg = ''; + var collapseSvg = ''; + + var keys = Object.keys(_activeIndicators); + for (var i = 0; i < keys.length; i++) { + var info = _activeIndicators[keys[i]]; + if (!info || info.chartId !== chartId || !info.isSubplot) continue; + var isThisPane = state.pane === info.paneIndex; + + // Update maximize button + var btn = document.getElementById('tvchart-pane-ctrl-' + keys[i]); + if (btn) { + if (state.mode === 'maximized' && isThisPane) { + btn.innerHTML = restoreSvg; + btn.setAttribute('data-tooltip', 'Restore pane'); + btn.setAttribute('aria-label', 'Restore pane'); + } else { + btn.innerHTML = maximizeSvg; + btn.setAttribute('data-tooltip', 'Maximize pane'); + btn.setAttribute('aria-label', 'Maximize pane'); + } + } + + // Update collapse button + var cBtn = document.getElementById('tvchart-pane-collapse-' + keys[i]); + if (cBtn) { + if (state.mode === 'collapsed' && isThisPane) { + cBtn.innerHTML = restoreSvg; + cBtn.setAttribute('data-tooltip', 'Restore pane'); + cBtn.setAttribute('aria-label', 'Restore pane'); + } else { + cBtn.innerHTML = collapseSvg; + cBtn.setAttribute('data-tooltip', 'Collapse pane'); + cBtn.setAttribute('aria-label', 'Collapse pane'); + } + } + } +} + +/** + * Get or create a legend overlay for a specific pane, positioned absolutely + * inside entry.container (the chart wrapper div). + */ +function _tvGetPaneLegendContainer(entry, paneIndex) { + if (!entry._paneLegendEls) entry._paneLegendEls = {}; + if (entry._paneLegendEls[paneIndex]) return entry._paneLegendEls[paneIndex]; + + var container = entry.container; + if (!container || !entry.chart) return null; + + try { + if (typeof entry.chart.panes !== 'function') return null; + var panes = entry.chart.panes(); + if (!panes || !panes[paneIndex]) return null; + + // Compute the top offset and height of this pane relative to the container + var top = 0; + var paneHeight = 0; + var paneHtml = typeof panes[paneIndex].getHTMLElement === 'function' + ? panes[paneIndex].getHTMLElement() : null; + if (paneHtml) { + var paneRect = paneHtml.getBoundingClientRect(); + var containerRect = container.getBoundingClientRect(); + top = paneRect.top - containerRect.top; + paneHeight = paneRect.height; + } else { + // Fallback: sum preceding pane heights + 1px separators + for (var i = 0; i < paneIndex; i++) { + var ps = typeof entry.chart.paneSize === 'function' + ? entry.chart.paneSize(i) : null; + top += (ps ? ps.height : 0) + 1; + } + var curPs = typeof entry.chart.paneSize === 'function' + ? entry.chart.paneSize(paneIndex) : null; + paneHeight = curPs ? curPs.height : 0; + } + + var overlay = document.createElement('div'); + overlay.className = 'tvchart-pane-legend'; + overlay.style.top = (top + 4) + 'px'; + if (paneHeight > 0) { + overlay.style.maxHeight = (paneHeight - 8) + 'px'; + overlay.style.overflow = 'hidden'; + } + container.appendChild(overlay); + entry._paneLegendEls[paneIndex] = overlay; + return overlay; + } catch (e) { + return null; + } +} + +/** + * Reposition existing per-pane legend overlays (e.g. after pane resize via divider drag). + */ +function _tvRepositionPaneLegends(chartId) { + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry || !entry._paneLegendEls || !entry.chart || !entry.container) return; + var container = entry.container; + var panes; + try { panes = typeof entry.chart.panes === 'function' ? entry.chart.panes() : null; } catch (e) { return; } + if (!panes) return; + + for (var pi in entry._paneLegendEls) { + var overlay = entry._paneLegendEls[pi]; + if (!overlay) continue; + var idx = Number(pi); + var paneHtml = panes[idx] && typeof panes[idx].getHTMLElement === 'function' + ? panes[idx].getHTMLElement() : null; + if (paneHtml) { + var paneRect = paneHtml.getBoundingClientRect(); + var containerRect = container.getBoundingClientRect(); + overlay.style.top = (paneRect.top - containerRect.top + 4) + 'px'; + if (paneRect.height > 0) { + overlay.style.maxHeight = (paneRect.height - 8) + 'px'; + } + } + } + + // Also keep the main legend box tracking its pane (after swaps) + _tvRepositionMainLegend(entry, chartId); +} + diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators/09-legend-rebuild.js b/pywry/pywry/frontend/src/tvchart/09-indicators/09-legend-rebuild.js new file mode 100644 index 0000000..777bd7d --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/09-indicators/09-legend-rebuild.js @@ -0,0 +1,338 @@ +function _tvRebuildIndicatorLegend(chartId) { + var indBox = _tvScopedById(chartId, 'tvchart-legend-indicators'); + if (!indBox) return; + indBox.innerHTML = ''; + + // Clean up previous per-pane legend overlays + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (entry && entry._paneLegendEls) { + for (var pi in entry._paneLegendEls) { + if (entry._paneLegendEls[pi] && entry._paneLegendEls[pi].parentNode) { + entry._paneLegendEls[pi].parentNode.removeChild(entry._paneLegendEls[pi]); + } + } + } + if (entry) entry._paneLegendEls = {}; + + // Compute total pane count for directional button logic + var totalPanes = 0; + if (entry && entry.chart && typeof entry.chart.panes === 'function') { + try { totalPanes = entry.chart.panes().length; } catch (e) {} + } + + var keys = Object.keys(_activeIndicators); + var shown = {}; + for (var i = 0; i < keys.length; i++) { + var sid = keys[i]; + var ai = _activeIndicators[sid]; + if (ai.chartId !== chartId) continue; + if (ai.group && shown[ai.group]) continue; + if (ai.group) shown[ai.group] = true; + (function(seriesId, info) { + var row = document.createElement('div'); + row.className = 'tvchart-legend-row tvchart-ind-row'; + row.id = 'tvchart-ind-row-' + seriesId; + row.dataset.hidden = info.hidden ? '1' : '0'; + var dot = document.createElement('span'); + dot.className = 'tvchart-ind-dot'; + // Volume Profile primitives have no line colour — use the + // up-volume swatch so the dot still reflects the indicator. + var dotColor = info.color; + if (!dotColor && (info.type === 'volume-profile-fixed' || info.type === 'volume-profile-visible')) { + dotColor = info.upColor || _cssVar('--pywry-tvchart-vp-up'); + } + dot.style.background = dotColor || _cssVar('--pywry-tvchart-text'); + row.appendChild(dot); + var nameSp = document.createElement('span'); + nameSp.className = 'tvchart-ind-name'; + nameSp.style.color = dotColor || _cssVar('--pywry-tvchart-text'); + // Extract base name (remove any trailing period in parentheses from the stored name) + var baseName; + if (info.group) { + // Map each grouped indicator's type to its canonical short name. + if (info.type === 'bollinger-bands') baseName = 'BB'; + else if (info.type === 'macd') baseName = 'MACD'; + else if (info.type === 'stochastic') baseName = 'Stoch'; + else if (info.type === 'aroon') baseName = 'Aroon'; + else if (info.type === 'adx') baseName = 'ADX'; + else if (info.type === 'keltner-channels') baseName = 'KC'; + else if (info.type === 'ichimoku') baseName = 'Ichimoku'; + else baseName = (info.name || '').replace(/\s*\(\d+\)\s*$/, ''); + } else { + baseName = (info.name || '').replace(/\s*\(\d+\)\s*$/, ''); + } + var indLabel; + if (info.group && info.type === 'bollinger-bands') { + // TradingView format: "BB 20 2 0 SMA" + indLabel = 'BB ' + (info.period || 20) + ' ' + (info.multiplier || 2) + ' ' + (info.offset || 0) + ' ' + (info.maType || 'SMA'); + } else if (info.group && info.type === 'macd') { + indLabel = 'MACD ' + (info.fast || 12) + ' ' + (info.slow || 26) + ' ' + (info.signal || 9); + } else if (info.group && info.type === 'stochastic') { + indLabel = 'Stoch ' + (info.kPeriod || info.period || 14) + ' ' + (info.dPeriod || 3); + } else if (info.group && info.type === 'aroon') { + indLabel = 'Aroon ' + (info.period || 14); + } else if (info.group && info.type === 'adx') { + indLabel = 'ADX ' + (info.period || 14); + } else if (info.group && info.type === 'keltner-channels') { + indLabel = 'KC ' + (info.period || 20) + ' ' + (info.multiplier || 2) + ' ' + (info.maType || 'EMA'); + } else if (info.group && info.type === 'ichimoku') { + indLabel = 'Ichimoku ' + + (info.conversionPeriod || info.tenkan || 9) + ' ' + + (info.basePeriod || info.kijun || 26) + ' ' + + (info.leadingSpanPeriod || info.senkouB || 52) + ' ' + + (info.laggingPeriod || 26) + ' ' + + (info.leadingShiftPeriod || 26); + } else if (info.type === 'volume-profile-fixed' || info.type === 'volume-profile-visible') { + // TradingView VPVR format: "VPVR Number Of Rows 24 Up/Down 70" + var vpShort = info.type === 'volume-profile-visible' ? 'VPVR' : 'VPFR'; + var rowsLabel = info.rowsLayout === 'ticks' ? 'Ticks Per Row' : 'Number Of Rows'; + var volLabel = info.volumeMode === 'total' + ? 'Total' + : (info.volumeMode === 'delta' ? 'Delta' : 'Up/Down'); + var vaPct = Math.round((info.valueAreaPct != null ? info.valueAreaPct : 0.70) * 100); + indLabel = vpShort + ' ' + rowsLabel + ' ' + (info.rowSize || info.period || 24) + + ' ' + volLabel + ' ' + vaPct; + } else { + indLabel = baseName + (info.period ? ' ' + info.period : ''); + } + // Binary indicators: show "Indicator source PrimarySymbol / SecondarySymbol" + if (info.secondarySeriesId) { + var indEntry = window.__PYWRY_TVCHARTS__[info.chartId]; + var priSym = ''; + var secSym = ''; + if (indEntry) { + // Primary symbol from chart title / symbolInfo + priSym = (indEntry._resolvedSymbolInfo && indEntry._resolvedSymbolInfo.main && indEntry._resolvedSymbolInfo.main.ticker) + || (indEntry.payload && indEntry.payload.title) + || ''; + // Secondary symbol from compare tracking + secSym = (indEntry._compareSymbols && indEntry._compareSymbols[info.secondarySeriesId]) || ''; + } + var srcLabel = info.primarySource || 'close'; + indLabel = baseName + ' ' + srcLabel + ' ' + priSym + ' / ' + secSym; + } + nameSp.textContent = indLabel; + row.appendChild(nameSp); + // For grouped indicators (BB), add a value span per group member + if (info.group) { + var gKeys = Object.keys(_activeIndicators); + for (var gvi = 0; gvi < gKeys.length; gvi++) { + if (_activeIndicators[gKeys[gvi]].group === info.group) { + var gValSp = document.createElement('span'); + gValSp.className = 'tvchart-ind-val'; + gValSp.id = 'tvchart-ind-val-' + gKeys[gvi]; + gValSp.style.color = _activeIndicators[gKeys[gvi]].color; + row.appendChild(gValSp); + } + } + } else { + var valSp = document.createElement('span'); + valSp.className = 'tvchart-ind-val'; + valSp.id = 'tvchart-ind-val-' + seriesId; + // Volume Profile: show running totals (up / down / total). + if (info.type === 'volume-profile-fixed' || info.type === 'volume-profile-visible') { + var vpSlotForLabel = _volumeProfilePrimitives[seriesId]; + if (vpSlotForLabel) { + var t = _tvVolumeProfileTotals(vpSlotForLabel.vpData); + valSp.textContent = _tvFormatVolume(t.up) + ' ' + + _tvFormatVolume(t.down) + ' ' + + _tvFormatVolume(t.total); + } + } + row.appendChild(valSp); + } + var ctrl = document.createElement('span'); + ctrl.className = 'tvchart-legend-row-actions tvchart-ind-ctrl'; + var upArrowSvg = ''; + var downArrowSvg = ''; + var maximizeSvg = ''; + var hideSvg = ''; + var showSvg = ''; + var settingsSvg = ''; + var removeSvg = ''; + var menuSvg = ''; + var copySvg = ''; + + // Pane move buttons for subplot indicators + if (info.isSubplot) { + var canMoveUp = info.paneIndex > 0; + var canMoveDown = totalPanes > 0 && info.paneIndex < totalPanes - 1; + if (canMoveUp) { + ctrl.appendChild(_tvLegendActionButton('Move pane up', upArrowSvg, function() { + _tvSwapIndicatorPane(chartId, seriesId, -1); + })); + } + if (canMoveDown) { + ctrl.appendChild(_tvLegendActionButton('Move pane down', downArrowSvg, function() { + _tvSwapIndicatorPane(chartId, seriesId, 1); + })); + } + // Maximize pane button + var paneBtn = _tvLegendActionButton('Maximize pane', maximizeSvg, function() { + var pState = _tvGetPaneState(chartId); + var isThisPane = pState.pane === info.paneIndex; + if (pState.mode === 'maximized' && isThisPane) { + _tvRestorePanes(chartId); + } else { + _tvMaximizePane(chartId, info.paneIndex); + } + }); + paneBtn.id = 'tvchart-pane-ctrl-' + seriesId; + ctrl.appendChild(paneBtn); + // Collapse pane button (minimize icon — horizontal line) + var collapseSvg = ''; + var collapseBtn = _tvLegendActionButton('Collapse pane', collapseSvg, function() { + var pState = _tvGetPaneState(chartId); + var isThisPane = pState.pane === info.paneIndex; + if (pState.mode === 'collapsed' && isThisPane) { + _tvRestorePanes(chartId); + } else { + _tvCollapsePane(chartId, info.paneIndex); + } + }); + collapseBtn.id = 'tvchart-pane-collapse-' + seriesId; + ctrl.appendChild(collapseBtn); + } + var eyeBtn = _tvLegendActionButton(info.hidden ? 'Show' : 'Hide', info.hidden ? showSvg : hideSvg, function(btn) { + var hidden = !info.hidden; + _tvSetIndicatorVisibility(chartId, seriesId, !hidden); + row.dataset.hidden = hidden ? '1' : '0'; + btn.setAttribute('data-tooltip', hidden ? 'Show' : 'Hide'); + btn.setAttribute('aria-label', hidden ? 'Show' : 'Hide'); + btn.innerHTML = hidden ? showSvg : hideSvg; + }); + eyeBtn.id = 'tvchart-eye-' + seriesId; + ctrl.appendChild(eyeBtn); + ctrl.appendChild(_tvLegendActionButton('Settings', settingsSvg, function() { + try { + _tvShowIndicatorSettings(seriesId); + } catch (err) { + console.error('[pywry:tvchart] Settings dialog failed for', seriesId, err); + } + })); + ctrl.appendChild(_tvLegendActionButton('Remove', removeSvg, function() { + _tvRemoveIndicator(seriesId); + })); + ctrl.appendChild(_tvLegendActionButton('More', menuSvg, function(btn) { + var fullName = (info.name || '').trim(); + var groupName = info.group ? 'Indicator group' : 'Single indicator'; + _tvOpenLegendItemMenu(btn, [ + { + label: info.hidden ? 'Show' : 'Hide', + icon: info.hidden ? showSvg : hideSvg, + run: function() { + var hidden = !info.hidden; + _tvSetIndicatorVisibility(chartId, seriesId, !hidden); + row.dataset.hidden = hidden ? '1' : '0'; + var eb = document.getElementById('tvchart-eye-' + seriesId); + if (eb) { + eb.setAttribute('data-tooltip', hidden ? 'Show' : 'Hide'); + eb.setAttribute('aria-label', hidden ? 'Show' : 'Hide'); + eb.innerHTML = hidden ? showSvg : hideSvg; + } + }, + }, + { + label: 'Settings', + icon: settingsSvg, + run: function() { _tvShowIndicatorSettings(seriesId); }, + }, + { + label: 'Remove', + icon: removeSvg, + run: function() { _tvRemoveIndicator(seriesId); }, + }, + { separator: true }, + { + label: 'Copy Name', + icon: copySvg, + meta: fullName || groupName, + disabled: !fullName, + tooltip: fullName || 'Indicator name unavailable', + run: function() { _tvLegendCopyToClipboard(fullName); }, + }, + { + label: 'Reset Visibility', + icon: hideSvg, + meta: groupName, + run: function() { + _tvSetIndicatorVisibility(chartId, seriesId, true); + row.dataset.hidden = '0'; + var eb = document.getElementById('tvchart-eye-' + seriesId); + if (eb) { + eb.setAttribute('data-tooltip', 'Hide'); + eb.setAttribute('aria-label', 'Hide'); + eb.innerHTML = hideSvg; + } + }, + }, + ]); + })); + row.appendChild(ctrl); + + // Route subplot indicators to per-pane legend overlays. + // Always append to indBox first; a deferred pass will relocate + // subplot rows into their pane overlays once the DOM is laid out. + indBox.appendChild(row); + })(sid, ai); + } + + // Deferred: move subplot indicator rows into per-pane overlays once + // LWC has finished laying out pane DOM elements (getBoundingClientRect + // returns zeros when called synchronously after addSeries). + if (entry && entry.chart) { + requestAnimationFrame(function() { + _tvRelocateSubplotLegends(chartId); + _tvUpdatePaneControlButtons(chartId); + }); + } +} + +/** + * Move subplot indicator legend rows from the main indBox into per-pane + * overlay containers. Called after a rAF so LWC pane DOM is laid out. + */ +function _tvRelocateSubplotLegends(chartId) { + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry || !entry.chart) return; + var mainPane = _tvFindMainChartPane(entry); + var keys = Object.keys(_activeIndicators); + var shown = {}; + for (var i = 0; i < keys.length; i++) { + var sid = keys[i]; + var ai = _activeIndicators[sid]; + if (ai.chartId !== chartId) continue; + if (ai.group && shown[ai.group]) continue; + if (ai.group) shown[ai.group] = true; + // Keep non-subplot and indicators in the main chart pane in indBox + if (!ai.isSubplot || ai.paneIndex === mainPane) continue; + var row = document.getElementById('tvchart-ind-row-' + sid); + if (!row) continue; + var paneEl = _tvGetPaneLegendContainer(entry, ai.paneIndex); + if (paneEl) { + paneEl.appendChild(row); // moves the node out of indBox + } + } +} + +function _tvUpdateIndicatorLegendValues(chartId, param) { + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry) return; + // Reposition pane legends (handles pane divider drag) + _tvRepositionPaneLegends(chartId); + var keys = Object.keys(_activeIndicators); + for (var i = 0; i < keys.length; i++) { + var sid = keys[i]; + var info = _activeIndicators[sid]; + if (info.chartId !== chartId) continue; + var valSp = _tvScopedById(chartId, 'tvchart-ind-val-' + sid); + if (!valSp) continue; + var series = entry.seriesMap[sid]; + if (!series) continue; + var d = param && param.seriesData ? param.seriesData.get(series) : null; + if (d && d.value !== undefined) { + valSp.textContent = '\u00a0' + Number(d.value).toFixed(2); + } + } +} + diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators/10-settings-dialog.js b/pywry/pywry/frontend/src/tvchart/09-indicators/10-settings-dialog.js new file mode 100644 index 0000000..06e1a79 --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/09-indicators/10-settings-dialog.js @@ -0,0 +1,1000 @@ +function _tvShowIndicatorSettings(seriesId) { + var info = _activeIndicators[seriesId]; + if (!info) return; + var chartId = info.chartId; + var ds = window.__PYWRY_DRAWINGS__[info.chartId] || _tvEnsureDrawingLayer(info.chartId); + if (!ds || !ds.uiLayer) return; + + var type = info.type || info.name; + var baseName = info.name.replace(/\s*\(\d+\)\s*$/, ''); + var isBB = !!(info.group && type === 'bollinger-bands'); + var isRSI = baseName === 'RSI'; + var isATR = baseName === 'ATR'; + var isVWAP = baseName === 'VWAP'; + var isVolSMA = baseName === 'Volume SMA'; + var isVP = type === 'volume-profile-fixed' || type === 'volume-profile-visible'; + var isMACD = type === 'macd'; + var isStoch = type === 'stochastic'; + var isAroon = type === 'aroon'; + var isADX = type === 'adx'; + var isKC = type === 'keltner-channels'; + var isIchimoku = type === 'ichimoku'; + var isCCI = baseName === 'CCI'; + var isWilliamsR = baseName === 'Williams %R'; + var isHV = baseName === 'Historical Volatility'; + var isPSAR = type === 'parabolic-sar'; + var isLightweight = type === 'moving-average-ex' || type === 'momentum' || type === 'correlation' + || type === 'percent-change' || type === 'average-price' || type === 'median-price' + || type === 'weighted-close' || type === 'spread' || type === 'ratio' + || type === 'sum' || type === 'product'; + var isBinary = type === 'spread' || type === 'ratio' || type === 'sum' || type === 'product' || type === 'correlation'; + + // Source options + var _SRC_OPTS = [ + { v: 'close', l: 'Close' }, { v: 'open', l: 'Open' }, + { v: 'high', l: 'High' }, { v: 'low', l: 'Low' }, + { v: 'hl2', l: 'HL2' }, { v: 'hlc3', l: 'HLC3' }, { v: 'ohlc4', l: 'OHLC4' }, + ]; + + // Collect all series in this group for multi-plot style controls + var groupSids = []; + if (info.group) { + var allK = Object.keys(_activeIndicators); + for (var gk = 0; gk < allK.length; gk++) { + if (_activeIndicators[allK[gk]].group === info.group) groupSids.push(allK[gk]); + } + } else { + groupSids = [seriesId]; + } + + var draft = { + period: info.period, + color: info.color || '#e6b32c', + lineWidth: info.lineWidth || 2, + lineStyle: info.lineStyle || 0, + multiplier: info.multiplier || 2, + source: info.source || 'close', + method: info.method || 'SMA', + maType: info.maType || 'SMA', + offset: info.offset || 0, + primarySource: info.primarySource || 'close', + secondarySource: info.secondarySource || 'close', + // Volume Profile-specific draft + vpRowsLayout: info.rowsLayout || 'rows', // 'rows' | 'ticks' + vpRowSize: info.rowSize != null + ? info.rowSize + : (info.rowsLayout === 'ticks' ? 1 : (info.bucketCount || info.period || 24)), + vpVolumeMode: info.volumeMode || 'updown', // 'updown' | 'total' | 'delta' + vpPlacement: info.placement || 'right', + vpWidthPercent: info.widthPercent != null ? info.widthPercent : 15, + vpValueAreaPct: info.valueAreaPct != null ? Math.round(info.valueAreaPct * 100) : 70, + vpShowPOC: info.showPOC !== false, + vpShowValueArea: info.showValueArea !== false, + vpShowDevelopingPOC: info.showDevelopingPOC === true, + vpShowDevelopingVA: info.showDevelopingVA === true, + vpLabelsOnPriceScale: info.labelsOnPriceScale !== false, + vpValuesInStatusLine: info.valuesInStatusLine !== false, + vpInputsInStatusLine: info.inputsInStatusLine !== false, + vpUpColor: info.upColor || _cssVar('--pywry-tvchart-vp-up'), + vpDownColor: info.downColor || _cssVar('--pywry-tvchart-vp-down'), + vpVAUpColor: info.vaUpColor || _cssVar('--pywry-tvchart-vp-va-up'), + vpVADownColor: info.vaDownColor || _cssVar('--pywry-tvchart-vp-va-down'), + vpPOCColor: info.pocColor || _cssVar('--pywry-tvchart-vp-poc'), + vpDevelopingPOCColor: info.developingPOCColor || _cssVar('--pywry-tvchart-ind-tertiary'), + vpDevelopingVAColor: info.developingVAColor || _cssVar('--pywry-tvchart-vp-va-up'), + // BB-specific fill settings + showBandFill: info.showBandFill !== undefined ? info.showBandFill : true, + bandFillColor: info.bandFillColor || '#2196f3', + bandFillOpacity: info.bandFillOpacity !== undefined ? info.bandFillOpacity : 100, + // RSI-specific + smoothingLine: info.smoothingLine || 'SMA', + smoothingLength: info.smoothingLength || 14, + // MACD + fast: info.fast || 12, + slow: info.slow || 26, + signal: info.signal || 9, + macdSource: info.macdSource || info.source || 'close', + oscMaType: info.oscMaType || 'EMA', + signalMaType: info.signalMaType || 'EMA', + // Stochastic — TradingView's "%K Length / %K Smoothing / %D Smoothing" + kPeriod: info.kPeriod || info.period || 14, + kSmoothing: info.kSmoothing || 1, + dPeriod: info.dPeriod || 3, + // ADX — TradingView splits "ADX Smoothing / DI Length" + adxSmoothing: info.adxSmoothing || info.period || 14, + diLength: info.diLength || info.period || 14, + // Ichimoku — TradingView field names + conversionPeriod: info.conversionPeriod || info.tenkan || 9, + basePeriod: info.basePeriod || info.kijun || info.period || 26, + leadingSpanPeriod: info.leadingSpanPeriod || info.senkouB || 52, + laggingPeriod: info.laggingPeriod || 26, + leadingShiftPeriod: info.leadingShiftPeriod || 26, + // Parabolic SAR + step: info.step || 0.02, + maxStep: info.maxStep || 0.2, + // Historical Volatility + annualization: info.annualization || 252, + showUpperLimit: info.showUpperLimit !== false, + showLowerLimit: info.showLowerLimit !== false, + showMiddleLimit: info.showMiddleLimit !== undefined ? info.showMiddleLimit : false, + upperLimitValue: info.upperLimitValue || 70, + lowerLimitValue: info.lowerLimitValue || 30, + middleLimitValue: info.middleLimitValue || 50, + upperLimitColor: info.upperLimitColor || '#787b86', + lowerLimitColor: info.lowerLimitColor || '#787b86', + middleLimitColor: info.middleLimitColor || '#787b86', + showBackground: info.showBackground !== undefined ? info.showBackground : true, + bgColor: info.bgColor || '#7b1fa2', + bgOpacity: info.bgOpacity !== undefined ? info.bgOpacity : 0.05, + // Binary indicator fill/output settings + showPositiveFill: info.showPositiveFill !== undefined ? info.showPositiveFill : true, + positiveFillColor: info.positiveFillColor || '#26a69a', + positiveFillOpacity: info.positiveFillOpacity !== undefined ? info.positiveFillOpacity : 100, + showNegativeFill: info.showNegativeFill !== undefined ? info.showNegativeFill : true, + negativeFillColor: info.negativeFillColor || '#ef5350', + negativeFillOpacity: info.negativeFillOpacity !== undefined ? info.negativeFillOpacity : 100, + precision: info.precision || 'default', + labelsOnPriceScale: info.labelsOnPriceScale !== false, + valuesInStatusLine: info.valuesInStatusLine !== false, + inputsInStatusLine: info.inputsInStatusLine !== false, + // Per-plot visibility/style + plotStyles: {}, + }; + // Initialize per-plot style drafts + for (var pi = 0; pi < groupSids.length; pi++) { + var pInfo = _activeIndicators[groupSids[pi]]; + draft.plotStyles[groupSids[pi]] = { + visible: pInfo.visible !== false, + color: pInfo.color || '#e6b32c', + lineWidth: pInfo.lineWidth || 2, + lineStyle: pInfo.lineStyle || 0, + }; + } + + var activeTab = 'inputs'; + + var overlay = document.createElement('div'); + overlay.className = 'tv-settings-overlay'; + _tvSetChartInteractionLocked(info.chartId, true); + function closeOverlay() { + _tvSetChartInteractionLocked(info.chartId, false); + if (overlay.parentNode) overlay.parentNode.removeChild(overlay); + } + overlay.addEventListener('click', function(e) { if (e.target === overlay) closeOverlay(); }); + overlay.addEventListener('mousedown', function(e) { e.stopPropagation(); }); + overlay.addEventListener('wheel', function(e) { e.stopPropagation(); }); + + var panel = document.createElement('div'); + panel.className = 'tv-settings-panel'; + // Wider panel (matches TradingView) so the Visibility tab's + // checkbox + min + slider + max + sep + max-input row fits without + // a horizontal scrollbar. + panel.style.cssText = 'width:560px;max-width:90vw;flex-direction:column;max-height:75vh;position:relative;overflow:hidden;'; + overlay.appendChild(panel); + + var header = document.createElement('div'); + header.className = 'tv-settings-header'; + header.style.cssText = 'position:relative;flex-direction:column;align-items:stretch;padding-bottom:0;'; + var hdrRow = document.createElement('div'); + hdrRow.style.cssText = 'display:flex;align-items:center;gap:8px;'; + var titleEl = document.createElement('h3'); + // Title uses the short canonical name TradingView shows in its + // own dialog (e.g. "Ichimoku" not "Ichimoku Cloud Settings", and + // collapsed for grouped indicators that span multiple lines). + var titleText; + if (isBB) titleText = 'Bollinger Bands'; + else if (isIchimoku) titleText = 'Ichimoku'; + else if (isMACD) titleText = 'MACD'; + else if (isStoch) titleText = 'Stoch'; + else if (isADX) titleText = 'ADX'; + else if (isAroon) titleText = 'Aroon'; + else if (isKC) titleText = 'Keltner Channels'; + else if (isPSAR) titleText = 'SAR'; + else titleText = info.name; + titleEl.textContent = titleText + ' Settings'; + hdrRow.appendChild(titleEl); + var closeBtn = document.createElement('button'); + closeBtn.className = 'tv-settings-close'; + closeBtn.innerHTML = ''; + closeBtn.addEventListener('click', closeOverlay); + hdrRow.appendChild(closeBtn); + header.appendChild(hdrRow); + + // Tab bar: Inputs | Style | Visibility + var tabBar = document.createElement('div'); + tabBar.className = 'tv-ind-settings-tabs'; + var tabs = ['Inputs', 'Style', 'Visibility']; + var tabEls = {}; + tabs.forEach(function(t) { + var te = document.createElement('div'); + te.className = 'tv-ind-settings-tab' + (t.toLowerCase() === activeTab ? ' active' : ''); + te.textContent = t; + te.addEventListener('click', function() { + activeTab = t.toLowerCase(); + tabs.forEach(function(tn) { tabEls[tn].classList.toggle('active', tn.toLowerCase() === activeTab); }); + renderBody(); + }); + tabEls[t] = te; + tabBar.appendChild(te); + }); + header.appendChild(tabBar); + panel.appendChild(header); + + var body = document.createElement('div'); + body.className = 'tv-settings-body'; + body.style.cssText = 'flex:1;overflow-y:auto;overflow-x:hidden;min-height:80px;'; + panel.appendChild(body); + + var foot = document.createElement('div'); + foot.className = 'tv-settings-footer'; + foot.style.cssText = 'position:relative;display:flex;align-items:center;gap:8px;'; + + // Defaults dropdown (TradingView pattern) — left side of footer. + // Snapshot the original draft so "Reset Settings" restores the + // values the dialog opened with. + var _draftSnapshot = JSON.parse(JSON.stringify(draft)); + var defaultsWrap = document.createElement('div'); + defaultsWrap.style.cssText = 'position:relative;margin-right:auto;'; + var defaultsBtn = document.createElement('button'); + defaultsBtn.className = 'ts-btn-cancel'; + defaultsBtn.textContent = 'Defaults \u25BE'; + defaultsBtn.style.cssText = 'min-width:104px;text-align:left;'; + defaultsWrap.appendChild(defaultsBtn); + var defaultsMenu = document.createElement('div'); + defaultsMenu.style.cssText = 'position:absolute;left:0;bottom:calc(100% + 4px);min-width:200px;background:var(--pywry-tvchart-panel-bg,#1c1f26);border:1px solid var(--pywry-tvchart-border,#2a2e39);border-radius:4px;padding:4px 0;display:none;z-index:10;box-shadow:0 4px 12px var(--pywry-tvchart-shadow,rgba(0,0,0,0.45));'; + function defaultsItem(label, onClick) { + var item = document.createElement('div'); + item.textContent = label; + item.style.cssText = 'padding:8px 12px;font-size:13px;color:var(--pywry-tvchart-text);cursor:pointer;'; + item.addEventListener('mouseenter', function() { item.style.background = 'var(--pywry-tvchart-hover,#262a33)'; }); + item.addEventListener('mouseleave', function() { item.style.background = ''; }); + item.addEventListener('click', function(e) { + e.stopPropagation(); + defaultsMenu.style.display = 'none'; + onClick(); + }); + return item; + } + defaultsMenu.appendChild(defaultsItem('Reset Settings', function() { + Object.keys(_draftSnapshot).forEach(function(k) { draft[k] = JSON.parse(JSON.stringify(_draftSnapshot[k])); }); + renderBody(); + _tvApplyIndicatorSettings(seriesId, draft); + })); + defaultsWrap.appendChild(defaultsMenu); + defaultsBtn.addEventListener('click', function(e) { + e.stopPropagation(); + defaultsMenu.style.display = defaultsMenu.style.display === 'block' ? 'none' : 'block'; + }); + document.addEventListener('click', function() { defaultsMenu.style.display = 'none'; }); + foot.appendChild(defaultsWrap); + + var cancelBtn = document.createElement('button'); + cancelBtn.className = 'ts-btn-cancel'; + cancelBtn.textContent = 'Cancel'; + cancelBtn.addEventListener('click', closeOverlay); + foot.appendChild(cancelBtn); + var okBtn = document.createElement('button'); + okBtn.className = 'ts-btn-ok'; + okBtn.textContent = 'Ok'; + okBtn.addEventListener('click', function() { + closeOverlay(); + _tvApplyIndicatorSettings(seriesId, draft); + }); + foot.appendChild(okBtn); + panel.appendChild(foot); + + // ---- Row builder helpers ---- + function addSection(parent, text) { + var sec = document.createElement('div'); + sec.className = 'tv-settings-section'; + sec.textContent = text; + parent.appendChild(sec); + } + function addColorRow(parent, label, val, onChange) { + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced'; + var lbl = document.createElement('label'); lbl.textContent = label; row.appendChild(lbl); + var ctrl = document.createElement('div'); ctrl.className = 'ts-controls'; ctrl.style.position = 'relative'; + var swatch = document.createElement('div'); swatch.className = 'ts-swatch'; + swatch.dataset.baseColor = _tvColorToHex(val || '#e6b32c', '#e6b32c'); + swatch.dataset.opacity = String(_tvColorOpacityPercent(val, 100)); + swatch.style.background = val; + swatch.addEventListener('click', function(e) { + e.preventDefault(); e.stopPropagation(); + _tvShowColorOpacityPopup( + swatch, + swatch.dataset.baseColor, + _tvToNumber(swatch.dataset.opacity, 100), + overlay, + function(newColor, newOpacity) { + swatch.dataset.baseColor = newColor; + swatch.dataset.opacity = String(newOpacity); + swatch.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); + onChange(newColor, newOpacity); + } + ); + }); + ctrl.appendChild(swatch); row.appendChild(ctrl); parent.appendChild(row); + } + function addSelectRow(parent, label, opts, val, onChange) { + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced'; + var lbl = document.createElement('label'); lbl.textContent = label; row.appendChild(lbl); + var sel = document.createElement('select'); sel.className = 'ts-select'; + opts.forEach(function(o) { + var opt = document.createElement('option'); opt.value = o.v; opt.textContent = o.l; + if (String(o.v) === String(val)) opt.selected = true; sel.appendChild(opt); + }); + sel.addEventListener('change', function() { onChange(sel.value); }); + row.appendChild(sel); parent.appendChild(row); + } + function addNumberRow(parent, label, min, max, step, val, onChange) { + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced'; + var lbl = document.createElement('label'); lbl.textContent = label; row.appendChild(lbl); + var inp = document.createElement('input'); inp.type = 'number'; inp.className = 'ts-input'; + inp.min = min; inp.max = max; inp.step = step; inp.value = val; + inp.addEventListener('keydown', function(e) { e.stopPropagation(); }); + inp.addEventListener('input', function() { var v = parseFloat(inp.value); if (!isNaN(v) && v >= parseFloat(min)) onChange(v); }); + row.appendChild(inp); parent.appendChild(row); + } + function addCheckRow(parent, label, val, onChange) { + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced'; + var lbl = document.createElement('label'); lbl.textContent = label; row.appendChild(lbl); + var cb = document.createElement('input'); cb.type = 'checkbox'; cb.className = 'ts-checkbox'; + cb.checked = !!val; + cb.addEventListener('change', function() { onChange(cb.checked); }); + row.appendChild(cb); parent.appendChild(row); + } + + // Plot-style row: checkbox + color swatch + line style selector + function addPlotStyleRow(parent, label, plotDraft) { + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced'; + row.style.cssText = 'display:flex;align-items:center;gap:8px;'; + var cb = document.createElement('input'); cb.type = 'checkbox'; cb.className = 'ts-checkbox'; + cb.checked = plotDraft.visible !== false; + cb.addEventListener('change', function() { plotDraft.visible = cb.checked; }); + row.appendChild(cb); + var lbl = document.createElement('label'); lbl.textContent = label; lbl.style.flex = '1'; row.appendChild(lbl); + var swatch = document.createElement('div'); swatch.className = 'ts-swatch'; + swatch.dataset.baseColor = _tvColorToHex(plotDraft.color || '#e6b32c', '#e6b32c'); + swatch.dataset.opacity = String(_tvColorOpacityPercent(plotDraft.color, 100)); + swatch.style.background = plotDraft.color; + swatch.addEventListener('click', function(e) { + e.preventDefault(); e.stopPropagation(); + _tvShowColorOpacityPopup( + swatch, + swatch.dataset.baseColor, + _tvToNumber(swatch.dataset.opacity, 100), + overlay, + function(newColor, newOpacity) { + swatch.dataset.baseColor = newColor; + swatch.dataset.opacity = String(newOpacity); + swatch.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); + plotDraft.color = _tvColorWithOpacity(newColor, newOpacity, newColor); + } + ); + }); + row.appendChild(swatch); + var wSel = document.createElement('select'); wSel.className = 'ts-select'; wSel.style.width = '60px'; + [{v:1,l:'1px'},{v:2,l:'2px'},{v:3,l:'3px'},{v:4,l:'4px'}].forEach(function(o) { + var opt = document.createElement('option'); opt.value = o.v; opt.textContent = o.l; + if (Number(o.v) === Number(plotDraft.lineWidth)) opt.selected = true; wSel.appendChild(opt); + }); + wSel.addEventListener('change', function() { plotDraft.lineWidth = Number(wSel.value); }); + row.appendChild(wSel); + // Line style selector + var lsSel = document.createElement('select'); lsSel.className = 'ts-select'; lsSel.style.width = '80px'; + [{v:0,l:'Solid'},{v:1,l:'Dashed'},{v:2,l:'Dotted'},{v:3,l:'Lg Dash'}].forEach(function(o) { + var opt = document.createElement('option'); opt.value = o.v; opt.textContent = o.l; + if (Number(o.v) === Number(plotDraft.lineStyle || 0)) opt.selected = true; lsSel.appendChild(opt); + }); + lsSel.addEventListener('change', function() { plotDraft.lineStyle = Number(lsSel.value); }); + row.appendChild(lsSel); + parent.appendChild(row); + } + + // Horizontal-limit row: checkbox + color + value input + function addHlimitRow(parent, label, show, color, value, onShow, onColor, onValue) { + var row = document.createElement('div'); + row.className = 'tv-settings-row tv-settings-row-spaced'; + row.style.cssText = 'display:flex;align-items:center;gap:8px;'; + var cb = document.createElement('input'); cb.type = 'checkbox'; cb.className = 'ts-checkbox'; + cb.checked = !!show; + cb.addEventListener('change', function() { onShow(cb.checked); }); + row.appendChild(cb); + var lbl = document.createElement('label'); lbl.textContent = label; lbl.style.flex = '1'; row.appendChild(lbl); + var swatch = document.createElement('div'); swatch.className = 'ts-swatch'; + swatch.dataset.baseColor = _tvColorToHex(color || '#787b86', '#787b86'); + swatch.dataset.opacity = String(_tvColorOpacityPercent(color, 100)); + swatch.style.background = color; + swatch.addEventListener('click', function(e) { + e.preventDefault(); e.stopPropagation(); + _tvShowColorOpacityPopup( + swatch, + swatch.dataset.baseColor, + _tvToNumber(swatch.dataset.opacity, 100), + overlay, + function(newColor, newOpacity) { + swatch.dataset.baseColor = newColor; + swatch.dataset.opacity = String(newOpacity); + swatch.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); + onColor(_tvColorWithOpacity(newColor, newOpacity, newColor)); + } + ); + }); + row.appendChild(swatch); + var inp = document.createElement('input'); inp.type = 'number'; inp.className = 'ts-input'; + inp.style.width = '54px'; inp.value = value; inp.step = 'any'; + inp.addEventListener('keydown', function(e) { e.stopPropagation(); }); + inp.addEventListener('input', function() { var v = parseFloat(inp.value); if (!isNaN(v)) onValue(v); }); + row.appendChild(inp); + parent.appendChild(row); + } + + function renderBody() { + body.innerHTML = ''; + + // ===================== INPUTS TAB ===================== + if (activeTab === 'inputs') { + var hasInputs = false; + + // Period / Length + // Indicators that expose their own period-like fields below + // (MACD = Fast/Slow/Signal, Stochastic = %K/%D, Ichimoku = Tenkan/Kijun/Senkou B, + // Parabolic SAR = Step/Max Step) skip the generic Period row. + var skipGenericPeriod = isMACD || isStoch || isIchimoku || isPSAR; + if (info.period > 0 && !skipGenericPeriod) { + var isLengthType = isBB || (isLightweight && (type === 'moving-average-ex' || type === 'momentum' || type === 'correlation')); + addNumberRow(body, isLengthType ? 'Length' : 'Period', '1', '500', '1', draft.period, function(v) { draft.period = v; }); + hasInputs = true; + } + + // RSI inputs + if (isRSI) { + addSelectRow(body, 'Source', _SRC_OPTS, draft.source, function(v) { draft.source = v; }); + addSelectRow(body, 'Smoothing Line', [ + { v: 'SMA', l: 'SMA' }, { v: 'EMA', l: 'EMA' }, { v: 'WMA', l: 'WMA' }, + ], draft.smoothingLine, function(v) { draft.smoothingLine = v; }); + addNumberRow(body, 'Smoothing Length', '1', '200', '1', draft.smoothingLength, function(v) { draft.smoothingLength = v; }); + hasInputs = true; + } + + // Bollinger Bands inputs + if (isBB) { + addSelectRow(body, 'Source', _SRC_OPTS, draft.source, function(v) { draft.source = v; }); + addNumberRow(body, 'Mult', '0.1', '10', '0.1', draft.multiplier, function(v) { draft.multiplier = v; }); + addNumberRow(body, 'Offset', '-500', '500', '1', draft.offset, function(v) { draft.offset = v; }); + addSelectRow(body, 'MA Type', [ + { v: 'SMA', l: 'SMA' }, { v: 'EMA', l: 'EMA' }, { v: 'WMA', l: 'WMA' }, + ], draft.maType, function(v) { draft.maType = v; }); + hasInputs = true; + } + + // ATR inputs + if (isATR) { + addSelectRow(body, 'Source', _SRC_OPTS.slice(0, 4), draft.source, function(v) { draft.source = v; }); + hasInputs = true; + } + + // Lightweight examples + if (isLightweight) { + if (type === 'moving-average-ex') { + // Single "Moving Average" surface — Type covers + // every MA family the renderer supports. + addSelectRow(body, 'Source', _SRC_OPTS, draft.source, function(v) { draft.source = v; }); + addSelectRow(body, 'Type', [ + { v: 'SMA', l: 'Simple (SMA)' }, + { v: 'EMA', l: 'Exponential (EMA)' }, + { v: 'WMA', l: 'Weighted (WMA)' }, + { v: 'HMA', l: 'Hull (HMA)' }, + { v: 'VWMA', l: 'Volume-Weighted (VWMA)' }, + ], draft.method, function(v) { draft.method = v; }); + hasInputs = true; + } else if (type === 'momentum' || type === 'percent-change') { + addSelectRow(body, 'Source', _SRC_OPTS, draft.source, function(v) { draft.source = v; }); + hasInputs = true; + } else if (type === 'correlation' || type === 'spread' || type === 'ratio' || type === 'sum' || type === 'product') { + // Single Source dropdown (applies to both primary and secondary) + addSelectRow(body, 'Source', _SRC_OPTS, draft.primarySource, function(v) { + draft.primarySource = v; + draft.secondarySource = v; + }); + // Symbol field showing secondary symbol with edit / refresh buttons + var secEntry = window.__PYWRY_TVCHARTS__[info.chartId]; + var secSymText = (secEntry && secEntry._compareSymbols && secEntry._compareSymbols[info.secondarySeriesId]) || info.secondarySeriesId || ''; + var symRow = document.createElement('div'); + symRow.className = 'tv-settings-row tv-settings-row-spaced'; + var symLbl = document.createElement('label'); symLbl.textContent = 'Symbol'; symRow.appendChild(symLbl); + var symCtrl = document.createElement('div'); symCtrl.style.cssText = 'display:flex;align-items:center;gap:6px;flex:1;justify-content:flex-end;'; + var symVal = document.createElement('span'); + symVal.style.cssText = 'font-size:13px;color:var(--pywry-tvchart-text,#d1d4dc);direction:rtl;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;'; + symVal.textContent = secSymText; + symCtrl.appendChild(symVal); + // Edit (pencil) button + var editBtn = document.createElement('button'); + editBtn.className = 'tv-settings-icon-btn'; + editBtn.title = 'Change symbol'; + editBtn.innerHTML = ''; + editBtn.addEventListener('click', function() { + closeOverlay(); + // Mark that this new indicator should replace the existing one + var editEntry = window.__PYWRY_TVCHARTS__[info.chartId]; + if (editEntry) editEntry._pendingReplaceIndicator = seriesId; + _tvShowIndicatorSymbolPicker(info.chartId, { + name: info.name, + key: type, + requiresSecondary: true, + _primarySource: draft.primarySource, + _secondarySource: draft.secondarySource, + }); + }); + symCtrl.appendChild(editBtn); + // Refresh button + var refreshBtn = document.createElement('button'); + refreshBtn.className = 'tv-settings-icon-btn'; + refreshBtn.title = 'Refresh data'; + refreshBtn.innerHTML = ''; + refreshBtn.addEventListener('click', function() { + closeOverlay(); + _tvApplyIndicatorSettings(seriesId, draft); + }); + symCtrl.appendChild(refreshBtn); + symRow.appendChild(symCtrl); + body.appendChild(symRow); + hasInputs = true; + } + } + + // Volume SMA + if (isVolSMA) { + addSelectRow(body, 'Source', [{ v: 'volume', l: 'Volume' }], 'volume', function() {}); + hasInputs = true; + } + + // MACD — TradingView's exact field labels + if (isMACD) { + addNumberRow(body, 'Fast Length', '1', '500', '1', draft.fast, function(v) { draft.fast = v; }); + addNumberRow(body, 'Slow Length', '1', '500', '1', draft.slow, function(v) { draft.slow = v; }); + addSelectRow(body, 'Source', _SRC_OPTS, draft.macdSource, function(v) { draft.macdSource = v; }); + addNumberRow(body, 'Signal Smoothing', '1', '500', '1', draft.signal, function(v) { draft.signal = v; }); + addSelectRow(body, 'Oscillator MA Type', [ + { v: 'SMA', l: 'SMA' }, { v: 'EMA', l: 'EMA' }, { v: 'WMA', l: 'WMA' }, + ], draft.oscMaType, function(v) { draft.oscMaType = v; }); + addSelectRow(body, 'Signal Line MA Type', [ + { v: 'SMA', l: 'SMA' }, { v: 'EMA', l: 'EMA' }, { v: 'WMA', l: 'WMA' }, + ], draft.signalMaType, function(v) { draft.signalMaType = v; }); + hasInputs = true; + } + + // Stochastic — TradingView's three lengths + if (isStoch) { + addNumberRow(body, '%K Length', '1', '500', '1', draft.kPeriod, function(v) { draft.kPeriod = v; draft.period = v; }); + addNumberRow(body, '%K Smoothing', '1', '500', '1', draft.kSmoothing, function(v) { draft.kSmoothing = v; }); + addNumberRow(body, '%D Smoothing', '1', '500', '1', draft.dPeriod, function(v) { draft.dPeriod = v; }); + hasInputs = true; + } + + // ADX — TradingView "ADX Smoothing" + "DI Length" + if (isADX) { + addNumberRow(body, 'ADX Smoothing', '1', '500', '1', draft.adxSmoothing, function(v) { draft.adxSmoothing = v; draft.period = v; }); + addNumberRow(body, 'DI Length', '1', '500', '1', draft.diLength, function(v) { draft.diLength = v; }); + hasInputs = true; + } + + // CCI / Williams %R — Length (above) + Source dropdown + if (isCCI || isWilliamsR) { + addSelectRow(body, 'Source', _SRC_OPTS, draft.source, function(v) { draft.source = v; }); + hasInputs = true; + } + + // Historical Volatility — Length (above) + Annualization + if (isHV) { + addNumberRow(body, 'Annualization', '1', '10000', '1', draft.annualization, function(v) { draft.annualization = v; }); + hasInputs = true; + } + + // Parabolic SAR — TradingView labels: Start, Increment, Maximum + // (TV's "Start" and "Increment" are the same value in stock SAR; + // exposing both for clarity and future tweaks.) + if (isPSAR) { + addNumberRow(body, 'Start', '0.001', '1', '0.001', draft.step, function(v) { draft.step = v; }); + addNumberRow(body, 'Increment', '0.001', '1', '0.001', draft.step, function(v) { draft.step = v; }); + addNumberRow(body, 'Maximum', '0.001', '1', '0.001', draft.maxStep, function(v) { draft.maxStep = v; }); + hasInputs = true; + } + + // Keltner Channels — TradingView fields: + // Length / Source / Use Exponential MA / Bands Style / ATR Length / Multiplier + if (isKC) { + addSelectRow(body, 'Source', _SRC_OPTS, draft.source, function(v) { draft.source = v; }); + addCheckRow(body, 'Use Exponential MA', draft.maType !== 'SMA', function(v) { + draft.maType = v ? 'EMA' : 'SMA'; + }); + addNumberRow(body, 'Multiplier', '0.1', '20', '0.1', draft.multiplier, function(v) { draft.multiplier = v; }); + hasInputs = true; + } + + // Ichimoku Cloud — TradingView's exact field labels + if (isIchimoku) { + addNumberRow(body, 'Conversion Line Periods', '1', '500', '1', draft.conversionPeriod, function(v) { draft.conversionPeriod = v; }); + addNumberRow(body, 'Base Line Periods', '1', '500', '1', draft.basePeriod, function(v) { draft.basePeriod = v; draft.period = v; }); + addNumberRow(body, 'Leading Span Periods', '1', '500', '1', draft.leadingSpanPeriod, function(v) { draft.leadingSpanPeriod = v; }); + addNumberRow(body, 'Lagging Span Periods', '1', '500', '1', draft.laggingPeriod, function(v) { draft.laggingPeriod = v; }); + addNumberRow(body, 'Leading Shift Periods', '1', '500', '1', draft.leadingShiftPeriod, function(v) { draft.leadingShiftPeriod = v; }); + hasInputs = true; + } + + // Volume Profile inputs (VPVR / VPFR) + if (isVP) { + addSelectRow(body, 'Rows Layout', [ + { v: 'rows', l: 'Number Of Rows' }, + { v: 'ticks', l: 'Ticks Per Row' }, + ], draft.vpRowsLayout, function(v) { + draft.vpRowsLayout = v; + if (v === 'ticks') { + if (!draft.vpRowSize || draft.vpRowSize > 100) draft.vpRowSize = 1; + } else { + if (!draft.vpRowSize || draft.vpRowSize < 4) draft.vpRowSize = 24; + } + _tvApplyVPDraftLive(seriesId, draft); + renderBody(); + }); + addNumberRow( + body, + 'Row Size', + draft.vpRowsLayout === 'ticks' ? '1' : '4', + draft.vpRowsLayout === 'ticks' ? '1000' : '500', + draft.vpRowsLayout === 'ticks' ? '0.0001' : '1', + draft.vpRowSize, + function(v) { draft.vpRowSize = v; _tvApplyVPDraftLive(seriesId, draft); } + ); + addSelectRow(body, 'Volume', [ + { v: 'updown', l: 'Up/Down' }, + { v: 'total', l: 'Total' }, + { v: 'delta', l: 'Delta' }, + ], draft.vpVolumeMode, function(v) { + draft.vpVolumeMode = v; + _tvApplyVPDraftLive(seriesId, draft); + }); + addNumberRow(body, 'Value Area Volume', '10', '95', '1', draft.vpValueAreaPct, function(v) { + draft.vpValueAreaPct = v; + _tvApplyVPDraftLive(seriesId, draft); + }); + hasInputs = true; + } + + if (!hasInputs) { + var noRow = document.createElement('div'); + noRow.className = 'tv-settings-row'; + noRow.style.cssText = 'color:var(--pywry-tvchart-text-muted,#787b86);font-size:12px;'; + noRow.textContent = 'No configurable inputs.'; + body.appendChild(noRow); + } + + // ===================== STYLE TAB ===================== + } else if (activeTab === 'style') { + // Volume Profile style — full custom panel (skip the generic plot rows) + if (isVP) { + function liveVP() { _tvApplyVPDraftLive(seriesId, draft); } + addSection(body, 'VOLUME PROFILE'); + addNumberRow(body, 'Width (% of pane)', '2', '60', '1', draft.vpWidthPercent, function(v) { draft.vpWidthPercent = v; liveVP(); }); + addSelectRow(body, 'Placement', [ + { v: 'right', l: 'Right' }, + { v: 'left', l: 'Left' }, + ], draft.vpPlacement, function(v) { draft.vpPlacement = v; liveVP(); }); + addColorRow(body, 'Up Volume', draft.vpUpColor, function(v, op) { draft.vpUpColor = _tvColorWithOpacity(v, op, v); liveVP(); }); + addColorRow(body, 'Down Volume', draft.vpDownColor, function(v, op) { draft.vpDownColor = _tvColorWithOpacity(v, op, v); liveVP(); }); + addColorRow(body, 'Value Area Up', draft.vpVAUpColor, function(v, op) { draft.vpVAUpColor = _tvColorWithOpacity(v, op, v); liveVP(); }); + addColorRow(body, 'Value Area Down', draft.vpVADownColor, function(v, op) { draft.vpVADownColor = _tvColorWithOpacity(v, op, v); liveVP(); }); + + addSection(body, 'POC'); + addCheckRow(body, 'Show POC', draft.vpShowPOC, function(v) { draft.vpShowPOC = v; liveVP(); }); + addColorRow(body, 'POC Color', draft.vpPOCColor, function(v, op) { draft.vpPOCColor = _tvColorWithOpacity(v, op, v); liveVP(); }); + + addSection(body, 'DEVELOPING POC'); + addCheckRow(body, 'Show Developing POC', draft.vpShowDevelopingPOC, function(v) { draft.vpShowDevelopingPOC = v; liveVP(); }); + addColorRow(body, 'Developing POC Color', draft.vpDevelopingPOCColor, function(v, op) { draft.vpDevelopingPOCColor = _tvColorWithOpacity(v, op, v); liveVP(); }); + + addSection(body, 'VALUE AREA'); + addCheckRow(body, 'Highlight Value Area', draft.vpShowValueArea, function(v) { draft.vpShowValueArea = v; liveVP(); }); + addCheckRow(body, 'Show Developing VA', draft.vpShowDevelopingVA, function(v) { draft.vpShowDevelopingVA = v; liveVP(); }); + addColorRow(body, 'Developing VA Color', draft.vpDevelopingVAColor, function(v, op) { draft.vpDevelopingVAColor = _tvColorWithOpacity(v, op, v); liveVP(); }); + + addSection(body, 'OUTPUT VALUES'); + addCheckRow(body, 'Labels on price scale', draft.vpLabelsOnPriceScale, function(v) { draft.vpLabelsOnPriceScale = v; }); + addCheckRow(body, 'Values in status line', draft.vpValuesInStatusLine, function(v) { draft.vpValuesInStatusLine = v; }); + addSection(body, 'INPUT VALUES'); + addCheckRow(body, 'Inputs in status line', draft.vpInputsInStatusLine, function(v) { draft.vpInputsInStatusLine = v; }); + return; + } + + addSection(body, 'PLOTS'); + + // Multi-plot indicators (Bollinger Bands) + if (groupSids.length > 1) { + for (var gi = 0; gi < groupSids.length; gi++) { + var gInfo = _activeIndicators[groupSids[gi]]; + var plotLabel = gInfo ? gInfo.name : groupSids[gi]; + if (draft.plotStyles[groupSids[gi]]) { + addPlotStyleRow(body, plotLabel, draft.plotStyles[groupSids[gi]]); + } + } + } else { + // Single-plot indicator + addPlotStyleRow(body, info.name, draft.plotStyles[seriesId] || { visible: true, color: draft.color, lineWidth: draft.lineWidth, lineStyle: draft.lineStyle }); + } + + // RSI-specific: horizontal limits + background + if (isRSI) { + addSection(body, 'LEVELS'); + addHlimitRow(body, 'Upper Limit', draft.showUpperLimit, draft.upperLimitColor, draft.upperLimitValue, + function(v) { draft.showUpperLimit = v; }, function(v) { draft.upperLimitColor = v; }, function(v) { draft.upperLimitValue = v; }); + addHlimitRow(body, 'Middle Limit', draft.showMiddleLimit, draft.middleLimitColor, draft.middleLimitValue, + function(v) { draft.showMiddleLimit = v; }, function(v) { draft.middleLimitColor = v; }, function(v) { draft.middleLimitValue = v; }); + addHlimitRow(body, 'Lower Limit', draft.showLowerLimit, draft.lowerLimitColor, draft.lowerLimitValue, + function(v) { draft.showLowerLimit = v; }, function(v) { draft.lowerLimitColor = v; }, function(v) { draft.lowerLimitValue = v; }); + addSection(body, 'FILLS'); + addCheckRow(body, 'Background', draft.showBackground, function(v) { draft.showBackground = v; }); + if (draft.showBackground) { + addColorRow(body, 'Fill Color', draft.bgColor, function(v, op) { draft.bgColor = _tvColorWithOpacity(v, op, v); }); + } + } + + // Binary indicator fills + output/input values + if (isBinary) { + addSection(body, 'FILLS'); + // Positive fill: checkbox + color + var posFillRow = document.createElement('div'); + posFillRow.className = 'tv-settings-row tv-settings-row-spaced'; + posFillRow.style.cssText = 'display:flex;align-items:center;gap:8px;'; + var posCb = document.createElement('input'); posCb.type = 'checkbox'; posCb.className = 'ts-checkbox'; + posCb.checked = !!draft.showPositiveFill; + posCb.addEventListener('change', function() { draft.showPositiveFill = posCb.checked; }); + posFillRow.appendChild(posCb); + var posLbl = document.createElement('label'); posLbl.textContent = 'Positive fill'; posLbl.style.flex = '1'; posFillRow.appendChild(posLbl); + var posSwatch = document.createElement('div'); posSwatch.className = 'ts-swatch'; + posSwatch.dataset.baseColor = _tvColorToHex(draft.positiveFillColor || '#26a69a', '#26a69a'); + posSwatch.dataset.opacity = String(_tvColorOpacityPercent(draft.positiveFillColor, 100)); + posSwatch.style.background = draft.positiveFillColor; + posSwatch.addEventListener('click', function(e) { + e.preventDefault(); e.stopPropagation(); + _tvShowColorOpacityPopup( + posSwatch, + posSwatch.dataset.baseColor, + _tvToNumber(posSwatch.dataset.opacity, 100), + overlay, + function(newColor, newOpacity) { + posSwatch.dataset.baseColor = newColor; + posSwatch.dataset.opacity = String(newOpacity); + posSwatch.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); + draft.positiveFillColor = newColor; + draft.positiveFillOpacity = newOpacity; + } + ); + }); + posFillRow.appendChild(posSwatch); + body.appendChild(posFillRow); + // Negative fill: checkbox + color + var negFillRow = document.createElement('div'); + negFillRow.className = 'tv-settings-row tv-settings-row-spaced'; + negFillRow.style.cssText = 'display:flex;align-items:center;gap:8px;'; + var negCb = document.createElement('input'); negCb.type = 'checkbox'; negCb.className = 'ts-checkbox'; + negCb.checked = !!draft.showNegativeFill; + negCb.addEventListener('change', function() { draft.showNegativeFill = negCb.checked; }); + negFillRow.appendChild(negCb); + var negLbl = document.createElement('label'); negLbl.textContent = 'Negative fill'; negLbl.style.flex = '1'; negFillRow.appendChild(negLbl); + var negSwatch = document.createElement('div'); negSwatch.className = 'ts-swatch'; + negSwatch.dataset.baseColor = _tvColorToHex(draft.negativeFillColor || '#ef5350', '#ef5350'); + negSwatch.dataset.opacity = String(_tvColorOpacityPercent(draft.negativeFillColor, 100)); + negSwatch.style.background = draft.negativeFillColor; + negSwatch.addEventListener('click', function(e) { + e.preventDefault(); e.stopPropagation(); + _tvShowColorOpacityPopup( + negSwatch, + negSwatch.dataset.baseColor, + _tvToNumber(negSwatch.dataset.opacity, 100), + overlay, + function(newColor, newOpacity) { + negSwatch.dataset.baseColor = newColor; + negSwatch.dataset.opacity = String(newOpacity); + negSwatch.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); + draft.negativeFillColor = newColor; + draft.negativeFillOpacity = newOpacity; + } + ); + }); + negFillRow.appendChild(negSwatch); + body.appendChild(negFillRow); + + addSection(body, 'OUTPUT VALUES'); + addSelectRow(body, 'Precision', [ + { v: 'default', l: 'Default' }, { v: '0', l: '0' }, { v: '1', l: '1' }, + { v: '2', l: '2' }, { v: '3', l: '3' }, { v: '4', l: '4' }, + { v: '5', l: '5' }, { v: '6', l: '6' }, { v: '7', l: '7' }, { v: '8', l: '8' }, + ], draft.precision, function(v) { draft.precision = v; }); + addCheckRow(body, 'Labels on price scale', draft.labelsOnPriceScale, function(v) { draft.labelsOnPriceScale = v; }); + addCheckRow(body, 'Values in status line', draft.valuesInStatusLine, function(v) { draft.valuesInStatusLine = v; }); + + addSection(body, 'INPUT VALUES'); + addCheckRow(body, 'Inputs in status line', draft.inputsInStatusLine, function(v) { draft.inputsInStatusLine = v; }); + } + + // Bollinger Bands: band fill + output/input values + if (isBB) { + addSection(body, 'FILLS'); + addCheckRow(body, 'Plots Background', draft.showBandFill, function(v) { draft.showBandFill = v; renderBody(); }); + if (draft.showBandFill) { + addColorRow(body, 'Fill Color', draft.bandFillColor, function(v, op) { draft.bandFillColor = v; draft.bandFillOpacity = op; }); + } + + addSection(body, 'OUTPUT VALUES'); + addSelectRow(body, 'Precision', [ + { v: 'default', l: 'Default' }, { v: '0', l: '0' }, { v: '1', l: '1' }, + { v: '2', l: '2' }, { v: '3', l: '3' }, { v: '4', l: '4' }, + { v: '5', l: '5' }, { v: '6', l: '6' }, { v: '7', l: '7' }, { v: '8', l: '8' }, + ], draft.precision, function(v) { draft.precision = v; }); + addCheckRow(body, 'Labels on price scale', draft.labelsOnPriceScale, function(v) { draft.labelsOnPriceScale = v; }); + addCheckRow(body, 'Values in status line', draft.valuesInStatusLine, function(v) { draft.valuesInStatusLine = v; }); + + addSection(body, 'INPUT VALUES'); + addCheckRow(body, 'Inputs in status line', draft.inputsInStatusLine, function(v) { draft.inputsInStatusLine = v; }); + } + + // Universal OUTPUT VALUES + INPUT VALUES sections — TradingView + // shows these on every indicator's Style tab. Skip when an + // indicator already rendered them above (RSI / BB / binary). + if (!isRSI && !isBB && !isBinary) { + addSection(body, 'OUTPUT VALUES'); + addSelectRow(body, 'Precision', [ + { v: 'default', l: 'Default' }, { v: '0', l: '0' }, { v: '1', l: '1' }, + { v: '2', l: '2' }, { v: '3', l: '3' }, { v: '4', l: '4' }, + { v: '5', l: '5' }, { v: '6', l: '6' }, { v: '7', l: '7' }, { v: '8', l: '8' }, + ], draft.precision, function(v) { draft.precision = v; }); + addCheckRow(body, 'Labels on price scale', draft.labelsOnPriceScale, function(v) { draft.labelsOnPriceScale = v; }); + addCheckRow(body, 'Values in status line', draft.valuesInStatusLine, function(v) { draft.valuesInStatusLine = v; }); + addSection(body, 'INPUT VALUES'); + addCheckRow(body, 'Inputs in status line', draft.inputsInStatusLine, function(v) { draft.inputsInStatusLine = v; }); + } + + // ===================== VISIBILITY TAB ===================== + } else if (activeTab === 'visibility') { + addSection(body, 'TIMEFRAME VISIBILITY'); + // { key, label, min, max } — bounds match TradingView's + // per-interval ranges (Seconds 1-59, Minutes 1-59, Hours 1-24, + // Days 1-366, Weeks 1-52, Months 1-12). + var intervals = [ + { key: 'seconds', label: 'Seconds', min: 1, max: 59 }, + { key: 'minutes', label: 'Minutes', min: 1, max: 59 }, + { key: 'hours', label: 'Hours', min: 1, max: 24 }, + { key: 'days', label: 'Days', min: 1, max: 366 }, + { key: 'weeks', label: 'Weeks', min: 1, max: 52 }, + { key: 'months', label: 'Months', min: 1, max: 12 }, + ]; + if (!draft.visibility) draft.visibility = {}; + intervals.forEach(function(iv) { + if (!draft.visibility[iv.key] || typeof draft.visibility[iv.key] !== 'object') { + draft.visibility[iv.key] = { enabled: true, min: iv.min, max: iv.max }; + } + }); + + intervals.forEach(function(iv) { + var v = draft.visibility[iv.key]; + if (v.min == null) v.min = iv.min; + if (v.max == null) v.max = iv.max; + + var row = document.createElement('div'); + row.className = 'tv-settings-row'; + // checkbox | label | min input | slider (flex) | – | max input + row.style.cssText = 'display:grid;grid-template-columns:24px 64px 56px 1fr 12px 56px;align-items:center;gap:6px;padding:6px 0;'; + + var cb = document.createElement('input'); + cb.type = 'checkbox'; + cb.className = 'ts-checkbox'; + cb.checked = v.enabled !== false; + row.appendChild(cb); + + var lbl = document.createElement('label'); + lbl.textContent = iv.label; + lbl.style.cssText = 'font-size:13px;'; + row.appendChild(lbl); + + var minInp = document.createElement('input'); + minInp.type = 'number'; + minInp.className = 'ts-input'; + minInp.min = String(iv.min); + minInp.max = String(iv.max); + minInp.step = '1'; + minInp.value = String(v.min); + minInp.style.cssText = 'width:100%;min-width:0;'; + row.appendChild(minInp); + + // Two-thumb range via twin overlapping . + var rangeWrap = document.createElement('div'); + rangeWrap.style.cssText = 'position:relative;height:24px;display:flex;align-items:center;'; + var track = document.createElement('div'); + track.style.cssText = 'position:absolute;left:0;right:0;height:4px;border-radius:2px;background:var(--pywry-tvchart-separator,#2a2e39);pointer-events:none;'; + rangeWrap.appendChild(track); + var fill = document.createElement('div'); + fill.style.cssText = 'position:absolute;height:4px;border-radius:2px;background:var(--pywry-tvchart-active-text,#2962ff);pointer-events:none;'; + rangeWrap.appendChild(fill); + var minSlider = document.createElement('input'); + minSlider.type = 'range'; + minSlider.min = String(iv.min); + minSlider.max = String(iv.max); + minSlider.step = '1'; + minSlider.value = String(v.min); + minSlider.style.cssText = 'position:absolute;left:0;right:0;width:100%;height:24px;background:transparent;pointer-events:auto;-webkit-appearance:none;appearance:none;'; + rangeWrap.appendChild(minSlider); + var maxSlider = document.createElement('input'); + maxSlider.type = 'range'; + maxSlider.min = String(iv.min); + maxSlider.max = String(iv.max); + maxSlider.step = '1'; + maxSlider.value = String(v.max); + maxSlider.style.cssText = 'position:absolute;left:0;right:0;width:100%;height:24px;background:transparent;pointer-events:auto;-webkit-appearance:none;appearance:none;'; + rangeWrap.appendChild(maxSlider); + row.appendChild(rangeWrap); + + var sep = document.createElement('span'); + sep.textContent = '\u2013'; + sep.style.cssText = 'color:var(--pywry-tvchart-text-muted,#787b86);font-size:13px;text-align:center;'; + row.appendChild(sep); + + var maxInp = document.createElement('input'); + maxInp.type = 'number'; + maxInp.className = 'ts-input'; + maxInp.min = String(iv.min); + maxInp.max = String(iv.max); + maxInp.step = '1'; + maxInp.value = String(v.max); + maxInp.style.cssText = 'width:100%;min-width:0;'; + row.appendChild(maxInp); + + body.appendChild(row); + + function updateFill() { + var span = iv.max - iv.min; + if (span <= 0) return; + var lo = (Number(v.min) - iv.min) / span * 100; + var hi = (Number(v.max) - iv.min) / span * 100; + fill.style.left = lo + '%'; + fill.style.right = (100 - hi) + '%'; + } + updateFill(); + + cb.addEventListener('change', function() { v.enabled = cb.checked; }); + function clamp(n) { return Math.max(iv.min, Math.min(iv.max, n)); } + minInp.addEventListener('input', function() { + var n = clamp(parseInt(minInp.value, 10) || iv.min); + if (n > Number(v.max)) n = Number(v.max); + v.min = n; minSlider.value = String(n); updateFill(); + }); + maxInp.addEventListener('input', function() { + var n = clamp(parseInt(maxInp.value, 10) || iv.max); + if (n < Number(v.min)) n = Number(v.min); + v.max = n; maxSlider.value = String(n); updateFill(); + }); + minSlider.addEventListener('input', function() { + var n = parseInt(minSlider.value, 10); + if (n > Number(v.max)) n = Number(v.max); + v.min = n; minInp.value = String(n); updateFill(); + }); + maxSlider.addEventListener('input', function() { + var n = parseInt(maxSlider.value, 10); + if (n < Number(v.min)) n = Number(v.min); + v.max = n; maxInp.value = String(n); updateFill(); + }); + [minInp, maxInp].forEach(function(el) { + el.addEventListener('keydown', function(e) { e.stopPropagation(); }); + }); + }); + } + } + + renderBody(); + _tvAppendOverlay(chartId, overlay); +} + diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators/11-apply-settings.js b/pywry/pywry/frontend/src/tvchart/09-indicators/11-apply-settings.js new file mode 100644 index 0000000..c2a1a1b --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/09-indicators/11-apply-settings.js @@ -0,0 +1,546 @@ +function _tvApplyIndicatorSettings(seriesId, newSettings) { + var info = _activeIndicators[seriesId]; + if (!info) return; + var entry = window.__PYWRY_TVCHARTS__[info.chartId]; + if (!entry) return; + var rawData = _tvSeriesRawData(entry, info.sourceSeriesId || 'main'); + var periodChanged = !!(newSettings.period && info.period > 0 && newSettings.period !== info.period); + var multChanged = !!(info.group && newSettings.multiplier !== (info.multiplier || 2)); + var sourceChanged = !!(newSettings.source && newSettings.source !== info.source); + var methodChanged = !!(newSettings.method && newSettings.method !== info.method); + var maTypeChanged = !!(newSettings.maType && newSettings.maType !== (info.maType || 'SMA')); + var offsetChanged = (newSettings.offset !== undefined && newSettings.offset !== (info.offset || 0)); + var primarySourceChanged = !!(newSettings.primarySource && newSettings.primarySource !== info.primarySource); + var secondarySourceChanged = !!(newSettings.secondarySource && newSettings.secondarySource !== info.secondarySource); + // New-indicator change detection: any compound-length parameter shift + // also triggers the recompute branch below. + var fastChanged = !!(newSettings.fast && newSettings.fast !== info.fast); + var slowChanged = !!(newSettings.slow && newSettings.slow !== info.slow); + var signalChanged = !!(newSettings.signal && newSettings.signal !== info.signal); + var kPeriodChanged = !!(newSettings.kPeriod && newSettings.kPeriod !== info.kPeriod); + var dPeriodChanged = !!(newSettings.dPeriod && newSettings.dPeriod !== info.dPeriod); + var conversionChanged = !!(newSettings.conversionPeriod && newSettings.conversionPeriod !== info.conversionPeriod); + var baseChanged = !!(newSettings.basePeriod && newSettings.basePeriod !== info.basePeriod); + var leadingSpanChanged = !!(newSettings.leadingSpanPeriod && newSettings.leadingSpanPeriod !== info.leadingSpanPeriod); + var laggingChanged = !!(newSettings.laggingPeriod && newSettings.laggingPeriod !== info.laggingPeriod); + var leadingShiftChanged = !!(newSettings.leadingShiftPeriod && newSettings.leadingShiftPeriod !== info.leadingShiftPeriod); + // Back-compat aliases (older callers might still use the original names) + var tenkanChanged = !!(newSettings.tenkan && newSettings.tenkan !== info.tenkan); + var kijunChanged = !!(newSettings.kijun && newSettings.kijun !== info.kijun); + var senkouBChanged = !!(newSettings.senkouB && newSettings.senkouB !== info.senkouB); + var stepChanged = (newSettings.step !== undefined && newSettings.step !== info.step); + var maxStepChanged = (newSettings.maxStep !== undefined && newSettings.maxStep !== info.maxStep); + var annualizationChanged = !!(newSettings.annualization && newSettings.annualization !== info.annualization); + var kSmoothingChanged = !!(newSettings.kSmoothing && newSettings.kSmoothing !== info.kSmoothing); + var adxSmoothingChanged = !!(newSettings.adxSmoothing && newSettings.adxSmoothing !== info.adxSmoothing); + var diLengthChanged = !!(newSettings.diLength && newSettings.diLength !== info.diLength); + var macdSourceChanged = !!(newSettings.macdSource && newSettings.macdSource !== info.macdSource); + var oscMaTypeChanged = !!(newSettings.oscMaType && newSettings.oscMaType !== info.oscMaType); + var signalMaTypeChanged = !!(newSettings.signalMaType && newSettings.signalMaType !== info.signalMaType); + var compoundChanged = fastChanged || slowChanged || signalChanged + || kPeriodChanged || dPeriodChanged || kSmoothingChanged + || adxSmoothingChanged || diLengthChanged + || macdSourceChanged || oscMaTypeChanged || signalMaTypeChanged + || tenkanChanged || kijunChanged || senkouBChanged + || conversionChanged || baseChanged || leadingSpanChanged + || laggingChanged || leadingShiftChanged + || stepChanged || maxStepChanged || annualizationChanged; + var type = info.type || info.name; + + // Apply per-plot styles + var styleSids = []; + if (info.group) { + var allKeys = Object.keys(_activeIndicators); + for (var k = 0; k < allKeys.length; k++) { if (_activeIndicators[allKeys[k]].group === info.group) styleSids.push(allKeys[k]); } + } else { styleSids = [seriesId]; } + for (var si = 0; si < styleSids.length; si++) { + var ss = entry.seriesMap[styleSids[si]]; + var plotDraft = newSettings.plotStyles && newSettings.plotStyles[styleSids[si]]; + var isBaselineSeries = !!(_activeIndicators[styleSids[si]] && _activeIndicators[styleSids[si]].isBaseline); + if (plotDraft) { + var opts; + if (isBaselineSeries) { + opts = { topLineColor: plotDraft.color, bottomLineColor: plotDraft.color, lineWidth: plotDraft.lineWidth, lineStyle: plotDraft.lineStyle || 0 }; + } else { + opts = { color: plotDraft.color, lineWidth: plotDraft.lineWidth, lineStyle: plotDraft.lineStyle || 0 }; + } + if (plotDraft.visible === false) opts.visible = false; + else opts.visible = true; + if (ss) { try { ss.applyOptions(opts); } catch(e) {} } + if (_activeIndicators[styleSids[si]]) { + _activeIndicators[styleSids[si]].color = plotDraft.color; + _activeIndicators[styleSids[si]].lineWidth = plotDraft.lineWidth; + _activeIndicators[styleSids[si]].lineStyle = plotDraft.lineStyle; + _activeIndicators[styleSids[si]].visible = plotDraft.visible; + } + } else { + // Fallback to draft top-level color/lineWidth + if (isBaselineSeries) { + if (ss) { try { ss.applyOptions({ topLineColor: newSettings.color, bottomLineColor: newSettings.color, lineWidth: newSettings.lineWidth }); } catch(e) {} } + } else { + if (ss) { try { ss.applyOptions({ color: newSettings.color, lineWidth: newSettings.lineWidth }); } catch(e) {} } + } + if (_activeIndicators[styleSids[si]]) { _activeIndicators[styleSids[si]].color = newSettings.color; _activeIndicators[styleSids[si]].lineWidth = newSettings.lineWidth; } + } + } + + // Apply baseline fill settings for binary indicators + if (info.isBaseline) { + var bSeries = entry.seriesMap[seriesId]; + if (bSeries) { + var fillOpts = {}; + if (newSettings.showPositiveFill) { + var pc = newSettings.positiveFillColor || '#26a69a'; + var pOp = _tvClamp(_tvToNumber(newSettings.positiveFillOpacity, 100), 0, 100) / 100; + fillOpts.topFillColor1 = _tvHexToRgba(pc, 0.28 * pOp); + fillOpts.topFillColor2 = _tvHexToRgba(pc, 0.05 * pOp); + } else { + fillOpts.topFillColor1 = 'transparent'; + fillOpts.topFillColor2 = 'transparent'; + } + if (newSettings.showNegativeFill) { + var nc = newSettings.negativeFillColor || '#ef5350'; + var nOp = _tvClamp(_tvToNumber(newSettings.negativeFillOpacity, 100), 0, 100) / 100; + fillOpts.bottomFillColor1 = _tvHexToRgba(nc, 0.05 * nOp); + fillOpts.bottomFillColor2 = _tvHexToRgba(nc, 0.28 * nOp); + } else { + fillOpts.bottomFillColor1 = 'transparent'; + fillOpts.bottomFillColor2 = 'transparent'; + } + try { bSeries.applyOptions(fillOpts); } catch(e) {} + } + info.showPositiveFill = newSettings.showPositiveFill; + info.positiveFillColor = newSettings.positiveFillColor; + info.positiveFillOpacity = newSettings.positiveFillOpacity; + info.showNegativeFill = newSettings.showNegativeFill; + info.negativeFillColor = newSettings.negativeFillColor; + info.negativeFillOpacity = newSettings.negativeFillOpacity; + info.precision = newSettings.precision; + info.labelsOnPriceScale = newSettings.labelsOnPriceScale; + info.valuesInStatusLine = newSettings.valuesInStatusLine; + info.inputsInStatusLine = newSettings.inputsInStatusLine; + // Apply precision + if (bSeries && newSettings.precision && newSettings.precision !== 'default') { + try { bSeries.applyOptions({ priceFormat: { type: 'price', precision: Number(newSettings.precision), minMove: Math.pow(10, -Number(newSettings.precision)) } }); } catch(e) {} + } + // Apply labels on price scale + if (bSeries) { + try { bSeries.applyOptions({ lastValueVisible: newSettings.labelsOnPriceScale !== false }); } catch(e) {} + } + } + + // Store RSI-specific settings + if (newSettings.showUpperLimit !== undefined) { + info.showUpperLimit = newSettings.showUpperLimit; + info.upperLimitValue = newSettings.upperLimitValue; + info.upperLimitColor = newSettings.upperLimitColor; + info.showLowerLimit = newSettings.showLowerLimit; + info.lowerLimitValue = newSettings.lowerLimitValue; + info.lowerLimitColor = newSettings.lowerLimitColor; + info.showMiddleLimit = newSettings.showMiddleLimit; + info.middleLimitValue = newSettings.middleLimitValue; + info.middleLimitColor = newSettings.middleLimitColor; + info.showBackground = newSettings.showBackground; + info.bgColor = newSettings.bgColor; + info.bgOpacity = newSettings.bgOpacity; + } + // Store smoothing settings + if (newSettings.smoothingLine !== undefined) info.smoothingLine = newSettings.smoothingLine; + if (newSettings.smoothingLength !== undefined) info.smoothingLength = newSettings.smoothingLength; + // Store BB-specific settings (propagate to all group members) + if (type === 'bollinger-bands' && info.group) { + var bbKeys = Object.keys(_activeIndicators); + for (var bk = 0; bk < bbKeys.length; bk++) { + if (_activeIndicators[bbKeys[bk]].group !== info.group) continue; + _activeIndicators[bbKeys[bk]].showBandFill = newSettings.showBandFill; + _activeIndicators[bbKeys[bk]].bandFillColor = newSettings.bandFillColor; + _activeIndicators[bbKeys[bk]].bandFillOpacity = newSettings.bandFillOpacity; + _activeIndicators[bbKeys[bk]].precision = newSettings.precision; + _activeIndicators[bbKeys[bk]].labelsOnPriceScale = newSettings.labelsOnPriceScale; + _activeIndicators[bbKeys[bk]].valuesInStatusLine = newSettings.valuesInStatusLine; + _activeIndicators[bbKeys[bk]].inputsInStatusLine = newSettings.inputsInStatusLine; + } + } + // Store visibility + if (newSettings.visibility) info.visibility = newSettings.visibility; + + // Universal OUTPUT VALUES — propagate Precision / Labels on price scale + // / Values in status line to every series in the indicator's group (or + // just this one if there's no group). TradingView shows these on + // every Style tab, so they need to apply uniformly. + if (newSettings.precision !== undefined + || newSettings.labelsOnPriceScale !== undefined + || newSettings.valuesInStatusLine !== undefined + || newSettings.inputsInStatusLine !== undefined) { + var ovSids = info.group + ? Object.keys(_activeIndicators).filter(function(k) { + return _activeIndicators[k].group === info.group; + }) + : [seriesId]; + ovSids.forEach(function(sid) { + var ai = _activeIndicators[sid]; + if (!ai) return; + if (newSettings.precision !== undefined) ai.precision = newSettings.precision; + if (newSettings.labelsOnPriceScale !== undefined) ai.labelsOnPriceScale = newSettings.labelsOnPriceScale; + if (newSettings.valuesInStatusLine !== undefined) ai.valuesInStatusLine = newSettings.valuesInStatusLine; + if (newSettings.inputsInStatusLine !== undefined) ai.inputsInStatusLine = newSettings.inputsInStatusLine; + var ser = entry.seriesMap[sid]; + if (!ser) return; + try { + if (newSettings.precision !== undefined) { + if (newSettings.precision === 'default') { + ser.applyOptions({ priceFormat: { type: 'price' } }); + } else { + var p = Number(newSettings.precision); + ser.applyOptions({ priceFormat: { type: 'price', precision: p, minMove: Math.pow(10, -p) } }); + } + } + if (newSettings.labelsOnPriceScale !== undefined) { + ser.applyOptions({ lastValueVisible: newSettings.labelsOnPriceScale !== false }); + } + } catch (e) {} + }); + } + + // Recompute if period / multiplier / source / method / maType / offset + // changed, or if any compound-length parameter on a new indicator shifted. + if ((periodChanged || multChanged || sourceChanged || methodChanged || maTypeChanged || offsetChanged || primarySourceChanged || secondarySourceChanged || compoundChanged) && rawData) { + var baseName = info.name.replace(/\s*\(\d+\)\s*$/, ''); + var newPeriod = newSettings.period || info.period; + var newMult = newSettings.multiplier || info.multiplier || 2; + + if (type === 'moving-average-ex') { + var maSource = newSettings.source || info.source || 'close'; + var maMethod = newSettings.method || info.method || 'SMA'; + var maLen = Math.max(1, newPeriod); + var maVals; + if (maMethod === 'HMA') { + maVals = _computeHMA(rawData, maLen, maSource); + } else if (maMethod === 'VWMA') { + maVals = _computeVWMA(rawData, maLen, maSource); + } else { + var maBase = rawData.map(function(p) { return { time: p.time, value: _tvIndicatorValue(p, maSource) }; }); + var maFn = maMethod === 'EMA' ? _computeEMA : (maMethod === 'WMA' ? _computeWMA : _computeSMA); + maVals = maFn(maBase, maLen, 'value'); + } + var maSeries = entry.seriesMap[seriesId]; + if (maSeries) maSeries.setData(maVals.filter(function(v) { return v.value !== undefined; })); + info.period = maLen; + info.source = maSource; + info.method = maMethod; + } else if (type === 'momentum') { + var momSource = newSettings.source || info.source || 'close'; + var momSeries = entry.seriesMap[seriesId]; + if (momSeries) momSeries.setData(_tvComputeMomentum(rawData, Math.max(1, newPeriod), momSource).filter(function(v) { return v.value !== undefined; })); + info.period = Math.max(1, newPeriod); + info.source = momSource; + } else if (type === 'percent-change') { + var pcSource = newSettings.source || info.source || 'close'; + var pcSeries = entry.seriesMap[seriesId]; + if (pcSeries) pcSeries.setData(_tvComputePercentChange(rawData, pcSource).filter(function(v) { return v.value !== undefined; })); + info.source = pcSource; + } else if (type === 'correlation') { + var secData = _tvSeriesRawData(entry, info.secondarySeriesId); + var cSeries = entry.seriesMap[seriesId]; + var psrc = newSettings.primarySource || info.primarySource || 'close'; + var ssrc = newSettings.secondarySource || info.secondarySource || 'close'; + if (cSeries) cSeries.setData(_tvComputeCorrelation(rawData, secData, Math.max(2, newPeriod), psrc, ssrc).filter(function(v) { return v.value !== undefined; })); + info.period = Math.max(2, newPeriod); + info.primarySource = psrc; + info.secondarySource = ssrc; + } else if (type === 'spread' || type === 'ratio' || type === 'sum' || type === 'product') { + var secData2 = _tvSeriesRawData(entry, info.secondarySeriesId); + var biSeries = entry.seriesMap[seriesId]; + var psrc2 = newSettings.primarySource || info.primarySource || 'close'; + var ssrc2 = newSettings.secondarySource || info.secondarySource || 'close'; + if (biSeries) biSeries.setData(_tvComputeBinary(rawData, secData2, psrc2, ssrc2, type).filter(function(v) { return v.value !== undefined; })); + info.primarySource = psrc2; + info.secondarySource = ssrc2; + } else if (type === 'average-price') { + var apSeries = entry.seriesMap[seriesId]; + if (apSeries) apSeries.setData(_tvComputeAveragePrice(rawData).filter(function(v) { return v.value !== undefined; })); + } else if (type === 'median-price') { + var mpSeries = entry.seriesMap[seriesId]; + if (mpSeries) mpSeries.setData(_tvComputeMedianPrice(rawData).filter(function(v) { return v.value !== undefined; })); + } else if (type === 'weighted-close') { + var wcSeries = entry.seriesMap[seriesId]; + if (wcSeries) wcSeries.setData(_tvComputeWeightedClose(rawData).filter(function(v) { return v.value !== undefined; })); + } else if (info.group && type === 'bollinger-bands') { + var bbSource = newSettings.source || info.source || 'close'; + var bbMaType = newSettings.maType || info.maType || 'SMA'; + var bbOffset = newSettings.offset !== undefined ? newSettings.offset : (info.offset || 0); + var bbBase = rawData.map(function(p) { return { time: p.time, close: _tvIndicatorValue(p, bbSource) }; }); + var bb2 = _computeBollingerBands(bbBase, newPeriod, newMult, bbMaType, bbOffset); + var gKeys = Object.keys(_activeIndicators); + for (var gi = 0; gi < gKeys.length; gi++) { + if (_activeIndicators[gKeys[gi]].group !== info.group) continue; + _activeIndicators[gKeys[gi]].period = newPeriod; + _activeIndicators[gKeys[gi]].multiplier = newMult; + _activeIndicators[gKeys[gi]].source = bbSource; + _activeIndicators[gKeys[gi]].maType = bbMaType; + _activeIndicators[gKeys[gi]].offset = bbOffset; + var gs2 = entry.seriesMap[gKeys[gi]]; + var bbD = gKeys[gi].indexOf('upper') >= 0 ? bb2.upper : gKeys[gi].indexOf('lower') >= 0 ? bb2.lower : bb2.middle; + if (gs2) gs2.setData(bbD.filter(function(v) { return v.value !== undefined; })); + } + } else if (info.name === 'RSI') { + var rsiSource = newSettings.source || info.source || 'close'; + var rsiBase = rawData.map(function(p) { return { time: p.time, close: _tvIndicatorValue(p, rsiSource) }; }); + var rsN = entry.seriesMap[seriesId]; + if (rsN) rsN.setData(_computeRSI(rsiBase, newPeriod).filter(function(v) { return v.value !== undefined; })); + info.period = newPeriod; + info.source = rsiSource; + } else if (info.name === 'ATR') { + var atN = entry.seriesMap[seriesId]; + if (atN) atN.setData(_computeATR(rawData, newPeriod).filter(function(v) { return v.value !== undefined; })); + info.period = newPeriod; + } else if (info.name === 'Volume SMA') { + var vN = entry.seriesMap[seriesId]; + if (vN) vN.setData(_computeSMA(rawData, newPeriod, 'volume').filter(function(v) { return v.value !== undefined; })); + info.period = newPeriod; + + // ----- New indicators: single-series ----- + } else if (info.name === 'CCI') { + var cciSrc2 = newSettings.source || info.source || 'hlc3'; + var cciSer = entry.seriesMap[seriesId]; + if (cciSer) cciSer.setData(_computeCCI(rawData, newPeriod, cciSrc2).filter(function(v) { return v.value !== undefined; })); + info.period = newPeriod; + info.source = cciSrc2; + } else if (info.name === 'Williams %R') { + var wrSrc2 = newSettings.source || info.source || 'close'; + var wrSer = entry.seriesMap[seriesId]; + if (wrSer) wrSer.setData(_computeWilliamsR(rawData, newPeriod, wrSrc2).filter(function(v) { return v.value !== undefined; })); + info.period = newPeriod; + info.source = wrSrc2; + } else if (info.name === 'Accumulation/Distribution') { + var adSer = entry.seriesMap[seriesId]; + if (adSer) adSer.setData(_computeAccumulationDistribution(rawData).filter(function(v) { return v.value !== undefined; })); + } else if (info.name === 'Historical Volatility') { + var hvAnn = newSettings.annualization || info.annualization || 252; + var hvSer = entry.seriesMap[seriesId]; + if (hvSer) hvSer.setData(_computeHistoricalVolatility(rawData, newPeriod, hvAnn).filter(function(v) { return v.value !== undefined; })); + info.period = newPeriod; + info.annualization = hvAnn; + } else if (info.type === 'parabolic-sar') { + var psStep = newSettings.step || info.step || 0.02; + var psMax = newSettings.maxStep || info.maxStep || 0.2; + var psSer = entry.seriesMap[seriesId]; + if (psSer) psSer.setData(_computeParabolicSAR(rawData, psStep, psMax).filter(function(v) { return v.value !== undefined; })); + info.step = psStep; + info.maxStep = psMax; + + // ----- New indicators: grouped (multi-series) ----- + } else if (info.group && info.type === 'macd') { + var macdFast = newSettings.fast || info.fast || 12; + var macdSlow = newSettings.slow || info.slow || 26; + var macdSig = newSettings.signal || info.signal || 9; + var macdSrc = newSettings.macdSource || info.macdSource || 'close'; + var macdOsc = newSettings.oscMaType || info.oscMaType || 'EMA'; + var macdSigType = newSettings.signalMaType || info.signalMaType || 'EMA'; + var macdRes = _computeMACD(rawData, macdFast, macdSlow, macdSig, macdSrc, macdOsc, macdSigType); + var macdHistData = macdRes.histogram.filter(function(v) { return v.value !== undefined; }).map(function(v) { + return { time: v.time, value: v.value, color: v.value >= 0 ? (info.histPosColor || _cssVar('--pywry-tvchart-ind-positive-dim')) : (info.histNegColor || _cssVar('--pywry-tvchart-ind-negative-dim')) }; + }); + var mKeys = Object.keys(_activeIndicators); + for (var mi = 0; mi < mKeys.length; mi++) { + if (_activeIndicators[mKeys[mi]].group !== info.group) continue; + _activeIndicators[mKeys[mi]].fast = macdFast; + _activeIndicators[mKeys[mi]].slow = macdSlow; + _activeIndicators[mKeys[mi]].signal = macdSig; + _activeIndicators[mKeys[mi]].macdSource = macdSrc; + _activeIndicators[mKeys[mi]].oscMaType = macdOsc; + _activeIndicators[mKeys[mi]].signalMaType = macdSigType; + _activeIndicators[mKeys[mi]].period = macdFast; + var mSer = entry.seriesMap[mKeys[mi]]; + if (!mSer) continue; + if (mKeys[mi].indexOf('hist') >= 0) mSer.setData(macdHistData); + else if (mKeys[mi].indexOf('signal') >= 0) mSer.setData(macdRes.signal.filter(function(v) { return v.value !== undefined; })); + else mSer.setData(macdRes.macd.filter(function(v) { return v.value !== undefined; })); + } + } else if (info.group && info.type === 'stochastic') { + var stochK = newSettings.kPeriod || newSettings.period || info.kPeriod || newPeriod; + var stochKS = newSettings.kSmoothing || info.kSmoothing || 1; + var stochD = newSettings.dPeriod || info.dPeriod || 3; + var stochRes = _computeStochastic(rawData, stochK, stochKS, stochD); + var sKeysAll = Object.keys(_activeIndicators); + for (var si = 0; si < sKeysAll.length; si++) { + if (_activeIndicators[sKeysAll[si]].group !== info.group) continue; + _activeIndicators[sKeysAll[si]].kPeriod = stochK; + _activeIndicators[sKeysAll[si]].kSmoothing = stochKS; + _activeIndicators[sKeysAll[si]].dPeriod = stochD; + _activeIndicators[sKeysAll[si]].period = stochK; + var stSer = entry.seriesMap[sKeysAll[si]]; + if (!stSer) continue; + if (sKeysAll[si].indexOf('_d_') >= 0) stSer.setData(stochRes.d.filter(function(v) { return v.value !== undefined; })); + else stSer.setData(stochRes.k.filter(function(v) { return v.value !== undefined; })); + } + } else if (info.group && info.type === 'aroon') { + var arRes = _computeAroon(rawData, newPeriod); + var aKeys = Object.keys(_activeIndicators); + for (var ai2 = 0; ai2 < aKeys.length; ai2++) { + if (_activeIndicators[aKeys[ai2]].group !== info.group) continue; + _activeIndicators[aKeys[ai2]].period = newPeriod; + var arSer = entry.seriesMap[aKeys[ai2]]; + if (!arSer) continue; + if (aKeys[ai2].indexOf('down') >= 0) arSer.setData(arRes.down.filter(function(v) { return v.value !== undefined; })); + else arSer.setData(arRes.up.filter(function(v) { return v.value !== undefined; })); + } + } else if (info.group && info.type === 'adx') { + var adxDi2 = newSettings.diLength || info.diLength || newPeriod; + var adxSm2 = newSettings.adxSmoothing || info.adxSmoothing || newPeriod; + var adxRes = _computeADX(rawData, adxDi2, adxSm2); + var adKeys = Object.keys(_activeIndicators); + for (var di = 0; di < adKeys.length; di++) { + if (_activeIndicators[adKeys[di]].group !== info.group) continue; + _activeIndicators[adKeys[di]].period = adxSm2; + _activeIndicators[adKeys[di]].adxSmoothing = adxSm2; + _activeIndicators[adKeys[di]].diLength = adxDi2; + var adSer2 = entry.seriesMap[adKeys[di]]; + if (!adSer2) continue; + if (adKeys[di].indexOf('plus') >= 0) adSer2.setData(adxRes.plusDI.filter(function(v) { return v.value !== undefined; })); + else if (adKeys[di].indexOf('minus') >= 0) adSer2.setData(adxRes.minusDI.filter(function(v) { return v.value !== undefined; })); + else adSer2.setData(adxRes.adx.filter(function(v) { return v.value !== undefined; })); + } + } else if (info.group && info.type === 'keltner-channels') { + var kcMult = newSettings.multiplier || info.multiplier || 2; + var kcMaType = newSettings.maType || info.maType || 'EMA'; + var kcRes = _computeKeltnerChannels(rawData, newPeriod, kcMult, kcMaType); + var kKeys = Object.keys(_activeIndicators); + for (var ki = 0; ki < kKeys.length; ki++) { + if (_activeIndicators[kKeys[ki]].group !== info.group) continue; + _activeIndicators[kKeys[ki]].period = newPeriod; + _activeIndicators[kKeys[ki]].multiplier = kcMult; + _activeIndicators[kKeys[ki]].maType = kcMaType; + var kSer = entry.seriesMap[kKeys[ki]]; + if (!kSer) continue; + if (kKeys[ki].indexOf('upper') >= 0) kSer.setData(kcRes.upper.filter(function(v) { return v.value !== undefined; })); + else if (kKeys[ki].indexOf('lower') >= 0) kSer.setData(kcRes.lower.filter(function(v) { return v.value !== undefined; })); + else kSer.setData(kcRes.middle.filter(function(v) { return v.value !== undefined; })); + } + } else if (info.group && info.type === 'ichimoku') { + var ichConv = newSettings.conversionPeriod || newSettings.tenkan || info.conversionPeriod || info.tenkan || 9; + var ichBase = newSettings.basePeriod || newSettings.kijun || info.basePeriod || info.kijun || newPeriod || 26; + var ichLead = newSettings.leadingSpanPeriod || newSettings.senkouB || info.leadingSpanPeriod || info.senkouB || 52; + var ichLag = newSettings.laggingPeriod || info.laggingPeriod || 26; + var ichShift = newSettings.leadingShiftPeriod || info.leadingShiftPeriod || 26; + var ichRes = _computeIchimoku(rawData, ichConv, ichBase, ichLead, ichLag, ichShift); + var iKeys = Object.keys(_activeIndicators); + for (var ii = 0; ii < iKeys.length; ii++) { + if (_activeIndicators[iKeys[ii]].group !== info.group) continue; + var ai = _activeIndicators[iKeys[ii]]; + ai.conversionPeriod = ichConv; + ai.basePeriod = ichBase; + ai.leadingSpanPeriod = ichLead; + ai.laggingPeriod = ichLag; + ai.leadingShiftPeriod = ichShift; + ai.tenkan = ichConv; ai.kijun = ichBase; ai.senkouB = ichLead; + ai.period = ichBase; + var iSer = entry.seriesMap[iKeys[ii]]; + if (!iSer) continue; + var k = iKeys[ii]; + if (k.indexOf('tenkan') >= 0) iSer.setData(ichRes.tenkan.filter(function(v) { return v.value !== undefined; })); + else if (k.indexOf('kijun') >= 0) iSer.setData(ichRes.kijun.filter(function(v) { return v.value !== undefined; })); + else if (k.indexOf('spanA') >= 0) iSer.setData(ichRes.spanA.filter(function(v) { return v.value !== undefined; })); + else if (k.indexOf('spanB') >= 0) iSer.setData(ichRes.spanB.filter(function(v) { return v.value !== undefined; })); + else if (k.indexOf('chikou') >= 0) iSer.setData(ichRes.chikou.filter(function(v) { return v.value !== undefined; })); + } + } + } + // Volume Profile: apply settings + recompute if anything that + // affects the bucket layout changed (rows-layout / row-size / + // developing-poc/va toggles). + if (type === 'volume-profile-fixed' || type === 'volume-profile-visible') { + var vpSlot = _volumeProfilePrimitives[seriesId]; + if (vpSlot) { + var prevOpts = vpSlot.opts || {}; + var newRowsLayout = newSettings.vpRowsLayout || vpSlot.rowsLayout || 'rows'; + var newRowSize = newSettings.vpRowSize != null ? Number(newSettings.vpRowSize) : vpSlot.rowSize; + var newVolumeMode = newSettings.vpVolumeMode || vpSlot.volumeMode || 'updown'; + var newValueAreaPct = newSettings.vpValueAreaPct != null + ? newSettings.vpValueAreaPct / 100 + : (prevOpts.valueAreaPct || 0.70); + var newShowDevPOC = newSettings.vpShowDevelopingPOC === true; + var newShowDevVA = newSettings.vpShowDevelopingVA === true; + + vpSlot.opts = { + rowsLayout: newRowsLayout, + rowSize: newRowSize, + volumeMode: newVolumeMode, + widthPercent: newSettings.vpWidthPercent != null ? newSettings.vpWidthPercent : prevOpts.widthPercent, + placement: newSettings.vpPlacement || prevOpts.placement || 'right', + upColor: newSettings.vpUpColor || prevOpts.upColor, + downColor: newSettings.vpDownColor || prevOpts.downColor, + vaUpColor: newSettings.vpVAUpColor || prevOpts.vaUpColor, + vaDownColor: newSettings.vpVADownColor || prevOpts.vaDownColor, + pocColor: newSettings.vpPOCColor || prevOpts.pocColor, + developingPOCColor: newSettings.vpDevelopingPOCColor || prevOpts.developingPOCColor, + developingVAColor: newSettings.vpDevelopingVAColor || prevOpts.developingVAColor, + showPOC: newSettings.vpShowPOC !== undefined ? newSettings.vpShowPOC : prevOpts.showPOC, + showValueArea: newSettings.vpShowValueArea !== undefined ? newSettings.vpShowValueArea : prevOpts.showValueArea, + showDevelopingPOC: newShowDevPOC, + showDevelopingVA: newShowDevVA, + valueAreaPct: newValueAreaPct, + }; + + // Recompute when any compute-affecting field changed + var needsRecompute = newRowsLayout !== vpSlot.rowsLayout + || newRowSize !== vpSlot.rowSize + || newValueAreaPct !== (prevOpts.valueAreaPct || 0.70) + || newShowDevPOC !== (prevOpts.showDevelopingPOC === true) + || newShowDevVA !== (prevOpts.showDevelopingVA === true); + if (needsRecompute) { + vpSlot.rowsLayout = newRowsLayout; + vpSlot.rowSize = newRowSize; + vpSlot.volumeMode = newVolumeMode; + var fromIdx = info.fromIndex != null ? info.fromIndex : 0; + var toIdx = info.toIndex != null ? info.toIndex : (rawData.length - 1); + var newVp = _tvComputeVolumeProfile(rawData, fromIdx, toIdx, { + rowsLayout: newRowsLayout, + rowSize: newRowSize, + valueAreaPct: newValueAreaPct, + withDeveloping: newShowDevPOC || newShowDevVA, + }); + if (newVp) vpSlot.vpData = newVp; + } else { + vpSlot.volumeMode = newVolumeMode; + } + + info.rowsLayout = newRowsLayout; + info.rowSize = newRowSize; + info.volumeMode = newVolumeMode; + info.period = newRowsLayout === 'rows' ? newRowSize : 0; + info.widthPercent = vpSlot.opts.widthPercent; + info.placement = vpSlot.opts.placement; + info.upColor = vpSlot.opts.upColor; + info.downColor = vpSlot.opts.downColor; + info.vaUpColor = vpSlot.opts.vaUpColor; + info.vaDownColor = vpSlot.opts.vaDownColor; + info.pocColor = vpSlot.opts.pocColor; + info.developingPOCColor = vpSlot.opts.developingPOCColor; + info.developingVAColor = vpSlot.opts.developingVAColor; + info.showPOC = vpSlot.opts.showPOC; + info.showValueArea = vpSlot.opts.showValueArea; + info.showDevelopingPOC = newShowDevPOC; + info.showDevelopingVA = newShowDevVA; + info.valueAreaPct = newValueAreaPct; + if (newSettings.vpLabelsOnPriceScale !== undefined) info.labelsOnPriceScale = newSettings.vpLabelsOnPriceScale; + if (newSettings.vpValuesInStatusLine !== undefined) info.valuesInStatusLine = newSettings.vpValuesInStatusLine; + if (newSettings.vpInputsInStatusLine !== undefined) info.inputsInStatusLine = newSettings.vpInputsInStatusLine; + + if (vpSlot.primitive && vpSlot.primitive.triggerUpdate) vpSlot.primitive.triggerUpdate(); + } + } + + _tvRebuildIndicatorLegend(info.chartId); + // Re-render BB fills after settings change + if (type === 'bollinger-bands') { + _tvEnsureBBFillPrimitive(info.chartId); + _tvUpdateBBFill(info.chartId); + } + // Re-render Ichimoku Kumo after settings change + if (type === 'ichimoku') { + _tvEnsureIchimokuCloudPrimitive(info.chartId); + _tvUpdateIchimokuCloud(info.chartId); + } +} + diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators/12-panel.js b/pywry/pywry/frontend/src/tvchart/09-indicators/12-panel.js new file mode 100644 index 0000000..b24864c --- /dev/null +++ b/pywry/pywry/frontend/src/tvchart/09-indicators/12-panel.js @@ -0,0 +1,186 @@ +function _tvHideIndicatorsPanel() { + if (_indicatorsOverlay && _indicatorsOverlay._escHandler) { + document.removeEventListener('keydown', _indicatorsOverlay._escHandler, true); + } + if (_indicatorsOverlay && _indicatorsOverlay.parentNode) { + _indicatorsOverlay.parentNode.removeChild(_indicatorsOverlay); + } + if (_indicatorsOverlayChartId) _tvSetChartInteractionLocked(_indicatorsOverlayChartId, false); + _indicatorsOverlay = null; + _indicatorsOverlayChartId = null; + _tvRefreshLegendVisibility(); +} + +function _tvShowIndicatorsPanel(chartId) { + _tvHideIndicatorsPanel(); + chartId = chartId || 'main'; + var entry = window.__PYWRY_TVCHARTS__[chartId]; + if (!entry) { var keys = Object.keys(window.__PYWRY_TVCHARTS__); if (keys.length) { chartId = keys[0]; entry = window.__PYWRY_TVCHARTS__[chartId]; } } + if (!entry) return; + + var ds = window.__PYWRY_DRAWINGS__[chartId] || _tvEnsureDrawingLayer(chartId); + if (!ds) return; + + var overlay = document.createElement('div'); + overlay.className = 'tv-indicators-overlay'; + _indicatorsOverlay = overlay; + _indicatorsOverlayChartId = chartId; + _tvSetChartInteractionLocked(chartId, true); + _tvRefreshLegendVisibility(); + overlay.addEventListener('click', function(e) { + if (e.target === overlay) _tvHideIndicatorsPanel(); + }); + overlay.addEventListener('mousedown', function(e) { e.stopPropagation(); }); + overlay.addEventListener('wheel', function(e) { e.stopPropagation(); }); + + // Escape closes the panel. Use capture so we catch the key + // before the search input's own keydown handler stops propagation. + overlay._escHandler = function(e) { + if (e.key === 'Escape' || e.keyCode === 27) { + e.preventDefault(); + e.stopPropagation(); + _tvHideIndicatorsPanel(); + } + }; + document.addEventListener('keydown', overlay._escHandler, true); + + var panel = document.createElement('div'); + panel.className = 'tv-indicators-panel'; + overlay.appendChild(panel); + + // Header + var header = document.createElement('div'); + header.className = 'tv-indicators-header'; + var title = document.createElement('h3'); + title.textContent = 'Indicators'; + header.appendChild(title); + var closeBtn = document.createElement('button'); + closeBtn.className = 'tv-settings-close'; + closeBtn.innerHTML = ''; + closeBtn.addEventListener('click', function() { _tvHideIndicatorsPanel(); }); + header.appendChild(closeBtn); + panel.appendChild(header); + + // Search + var searchWrap = document.createElement('div'); + searchWrap.className = 'tv-indicators-search pywry-search-wrapper pywry-search-inline'; + searchWrap.style.position = 'relative'; + var searchIcon = document.createElement('span'); + searchIcon.className = 'pywry-search-icon'; + searchIcon.innerHTML = ''; + searchWrap.appendChild(searchIcon); + var searchInp = document.createElement('input'); + searchInp.type = 'text'; + searchInp.className = 'pywry-search-input'; + searchInp.placeholder = 'Search'; + searchInp.addEventListener('keydown', function(e) { e.stopPropagation(); }); + searchWrap.appendChild(searchInp); + panel.appendChild(searchWrap); + + // List + var list = document.createElement('div'); + list.className = 'tv-indicators-list pywry-scroll-container'; + panel.appendChild(list); + try { + if (window.PYWRY_SCROLLBARS && typeof window.PYWRY_SCROLLBARS.setup === 'function') { + window.PYWRY_SCROLLBARS.setup(list); + } + } catch(e) {} + + // Active indicators section + function renderList(filter) { + list.innerHTML = ''; + + // Active indicators + var activeKeys = Object.keys(_activeIndicators); + if (activeKeys.length > 0) { + var actSec = document.createElement('div'); + actSec.className = 'tv-indicators-section'; + actSec.textContent = 'ACTIVE'; + list.appendChild(actSec); + + var shown = {}; + for (var a = 0; a < activeKeys.length; a++) { + var ai = _activeIndicators[activeKeys[a]]; + if (ai.group && shown[ai.group]) continue; + if (ai.group) shown[ai.group] = true; + + (function(sid, info) { + var item = document.createElement('div'); + item.className = 'tv-indicator-item'; + var nameSpan = document.createElement('span'); + nameSpan.className = 'ind-name'; + // Extract base name (remove any trailing period in parentheses from the stored name) + var baseName = (info.name || '').replace(/\s*\(\d+\)\s*$/, ''); + nameSpan.textContent = baseName + (info.period ? ' (' + info.period + ')' : ''); + nameSpan.style.color = info.color; + item.appendChild(nameSpan); + var gearBtn = document.createElement('span'); + gearBtn.innerHTML = '\u2699'; + gearBtn.title = 'Settings'; + gearBtn.style.cssText = 'cursor:pointer;font-size:14px;line-height:1;padding:0 3px;color:var(--pywry-tvchart-text-muted);border-radius:3px;'; + gearBtn.addEventListener('mouseenter', function() { gearBtn.style.color = 'var(--pywry-tvchart-text)'; gearBtn.style.background = 'var(--pywry-tvchart-hover)'; }); + gearBtn.addEventListener('mouseleave', function() { gearBtn.style.color = 'var(--pywry-tvchart-text-muted)'; gearBtn.style.background = ''; }); + gearBtn.addEventListener('click', function(e) { + e.stopPropagation(); + _tvHideIndicatorsPanel(); + _tvShowIndicatorSettings(sid); + }); + item.appendChild(gearBtn); + var removeBtn = document.createElement('span'); + removeBtn.textContent = '\u00d7'; + removeBtn.style.cssText = 'cursor:pointer;font-size:18px;color:' + _cssVar('--pywry-draw-danger', '#f44336') + ';'; + removeBtn.addEventListener('click', function(e) { + e.stopPropagation(); + _tvRemoveIndicator(sid); + renderList(searchInp.value); + }); + item.appendChild(removeBtn); + list.appendChild(item); + })(activeKeys[a], ai); + } + } + + // Catalog + var secNames = {}; + var filtered = _INDICATOR_CATALOG.filter(function(ind) { + if (!filter) return true; + return ind.fullName.toLowerCase().indexOf(filter.toLowerCase()) !== -1 || + ind.name.toLowerCase().indexOf(filter.toLowerCase()) !== -1; + }); + + var currentCat = ''; + for (var ci = 0; ci < filtered.length; ci++) { + var ind = filtered[ci]; + if (ind.category !== currentCat) { + currentCat = ind.category; + if (currentCat !== 'Lightweight Examples') { + var sec = document.createElement('div'); + sec.className = 'tv-indicators-section'; + sec.textContent = currentCat.toUpperCase(); + list.appendChild(sec); + } + } + (function(indDef) { + var item = document.createElement('div'); + item.className = 'tv-indicator-item'; + var nameSpan = document.createElement('span'); + nameSpan.className = 'ind-name'; + nameSpan.textContent = indDef.fullName; + item.appendChild(nameSpan); + item.addEventListener('click', function() { + _tvAddIndicator(indDef, chartId); + renderList(searchInp.value); + }); + list.appendChild(item); + })(ind); + } + } + + searchInp.addEventListener('input', function() { renderList(searchInp.value); }); + renderList(''); + + _tvAppendOverlay(chartId, overlay); + searchInp.focus(); +} + From 9ae77579d65a93943dcc991e75d836b44d86de9d Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Mon, 20 Apr 2026 09:54:28 -0700 Subject: [PATCH 53/68] tvchart: legend Remove actually destroys the volume series + pane MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Remove-Volume only flipped a legend dataset flag — series and pane stayed on the chart. Now it calls chart.removeSeries, deletes the pane, and reindexes higher panes. Restore-Volume rebuilds the histogram from the stored raw bars. Also fix the volume series to use the pane's standard 'right' scale so its axis labels render. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../frontend/src/tvchart/05-lifecycle.js | 11 +- pywry/pywry/frontend/src/tvchart/11-legend.js | 159 ++++++++++++++++-- 2 files changed, 154 insertions(+), 16 deletions(-) diff --git a/pywry/pywry/frontend/src/tvchart/05-lifecycle.js b/pywry/pywry/frontend/src/tvchart/05-lifecycle.js index e169dfc..c75ab51 100644 --- a/pywry/pywry/frontend/src/tvchart/05-lifecycle.js +++ b/pywry/pywry/frontend/src/tvchart/05-lifecycle.js @@ -512,12 +512,17 @@ window.PYWRY_TVCHART_RENDER = function(chartId, container, payload) { */ function _tvBuildVolumeOptions(seriesEntry, theme) { var palette = TVCHART_THEMES._get(theme || 'dark'); + // Use the pane's standard 'right' scale (visible by default) instead + // of a custom 'volume' overlay scale (hidden by default). When the + // volume histogram lives in its own subplot pane, the right scale + // belongs to that pane and renders independently from the price + // pane's right scale. return _tvMerge({ priceFormat: { type: 'volume' }, - priceScaleId: 'volume', - scaleMargins: { top: 0.8, bottom: 0 }, + priceScaleId: 'right', + scaleMargins: { top: 0.1, bottom: 0.05 }, color: palette.volumeUp, - lastValueVisible: false, + lastValueVisible: true, priceLineVisible: false, }, seriesEntry.volumeOptions || {}); } diff --git a/pywry/pywry/frontend/src/tvchart/11-legend.js b/pywry/pywry/frontend/src/tvchart/11-legend.js index 38632fc..ccb842f 100644 --- a/pywry/pywry/frontend/src/tvchart/11-legend.js +++ b/pywry/pywry/frontend/src/tvchart/11-legend.js @@ -653,27 +653,160 @@ function _tvSetupLegendControls(chartId) { } function _legendDisableVolume() { - if (typeof window._tvBuildCurrentSettings === 'function' && typeof window._tvApplySettingsToChart === 'function') { - var settings = window._tvBuildCurrentSettings(entry); - settings['Volume'] = false; - window._tvApplySettingsToChart(chartId, entry, settings); - } else { - var volSeries = entry.volumeMap && entry.volumeMap.main ? entry.volumeMap.main : null; - if (volSeries) { - try { entry.chart.removeSeries(volSeries); } catch (e) {} - delete entry.volumeMap.main; + var volSeries = entry.volumeMap && entry.volumeMap.main ? entry.volumeMap.main : null; + if (!volSeries) { + legendUiState.volumeHidden = false; + if (volRowEl) volRowEl.style.display = 'none'; + return; + } + + var removedPane = -1; + if (entry._volumePaneBySeries && entry._volumePaneBySeries.main != null) { + removedPane = entry._volumePaneBySeries.main; + } + + try { entry.chart.removeSeries(volSeries); } catch (_e) {} + delete entry.volumeMap.main; + if (entry._volumePaneBySeries) delete entry._volumePaneBySeries.main; + + if (removedPane > 0 && entry.chart && typeof entry.chart.removePane === 'function') { + var paneStillUsed = false; + if (entry._volumePaneBySeries) { + var volKeys = Object.keys(entry._volumePaneBySeries); + for (var vk = 0; vk < volKeys.length; vk++) { + if (entry._volumePaneBySeries[volKeys[vk]] === removedPane) { paneStillUsed = true; break; } + } + } + if (!paneStillUsed && typeof _activeIndicators === 'object') { + var indKeys = Object.keys(_activeIndicators); + for (var ik = 0; ik < indKeys.length; ik++) { + var ai = _activeIndicators[indKeys[ik]]; + if (ai && ai.chartId === chartId && ai.paneIndex === removedPane) { paneStillUsed = true; break; } + } + } + if (!paneStillUsed) { + var paneRemoved = false; + try { entry.chart.removePane(removedPane); paneRemoved = true; } catch (_e2) { + try { + if (typeof entry.chart.panes === 'function') { + var paneObj = entry.chart.panes()[removedPane]; + if (paneObj) { entry.chart.removePane(paneObj); paneRemoved = true; } + } + } catch (_e3) {} + } + if (paneRemoved) { + if (entry._volumePaneBySeries) { + var vk2 = Object.keys(entry._volumePaneBySeries); + for (var vi = 0; vi < vk2.length; vi++) { + if (entry._volumePaneBySeries[vk2[vi]] > removedPane) { + entry._volumePaneBySeries[vk2[vi]] -= 1; + } + } + } + if (typeof _activeIndicators === 'object') { + var iks = Object.keys(_activeIndicators); + for (var ii = 0; ii < iks.length; ii++) { + var aii = _activeIndicators[iks[ii]]; + if (aii && aii.chartId === chartId && aii.isSubplot && aii.paneIndex > removedPane) { + aii.paneIndex -= 1; + } + } + } + if (entry._nextPane && entry._nextPane > 1) entry._nextPane -= 1; + } } } + + if (typeof _tvEnforceMainScaleDividerClearance === 'function') { + try { _tvEnforceMainScaleDividerClearance(entry, 0.1, 0.08); } catch (_e4) {} + } + + entry._paneState = { mode: 'normal', pane: -1 }; + delete entry._savedPaneHeights; + legendUiState.volumeHidden = false; + if (volRowEl) volRowEl.style.display = 'none'; + + if (typeof window._tvBuildCurrentSettings === 'function' && typeof window._tvApplySettingsToChart === 'function') { + try { + var settings = window._tvBuildCurrentSettings(entry); + settings['Volume'] = false; + window._tvApplySettingsToChart(chartId, entry, settings); + } catch (_e5) {} + } + + if (typeof _tvRebuildIndicatorLegend === 'function') { + try { _tvRebuildIndicatorLegend(chartId); } catch (_e6) {} + } + + try { window.dispatchEvent(new CustomEvent('pywry:legend-refresh', { detail: { chartId: chartId } })); } catch (_e7) {} } function _legendEnableVolume() { - if (typeof window._tvBuildCurrentSettings === 'function' && typeof window._tvApplySettingsToChart === 'function') { - var settings = window._tvBuildCurrentSettings(entry); - settings['Volume'] = true; - window._tvApplySettingsToChart(chartId, entry, settings); + if (entry.volumeMap && entry.volumeMap.main) { + try { entry.volumeMap.main.applyOptions({ visible: true }); } catch (_e) {} + legendUiState.volumeHidden = false; + if (volRowEl) volRowEl.style.display = 'flex'; + return; + } + + if (typeof _tvBuildVolumeOptions !== 'function' || + typeof _tvExtractVolumeFromBars !== 'function' || + typeof _tvAddSeriesCompat !== 'function' || + typeof _tvReserveVolumePane !== 'function') { + return; + } + + var payload = entry.payload || {}; + var seriesDesc = (payload.series && payload.series[0]) ? payload.series[0] : payload; + var bars = entry._rawData; + if (!bars && entry._seriesRawData && entry._seriesRawData.main) bars = entry._seriesRawData.main; + if (!bars && seriesDesc && seriesDesc.bars) bars = seriesDesc.bars; + if (!Array.isArray(bars) || bars.length === 0) return; + + var theme = entry.theme || (typeof _tvDetectTheme === 'function' ? _tvDetectTheme() : 'dark'); + var explicitVol = (seriesDesc && seriesDesc.volume && seriesDesc.volume.length > 0) ? seriesDesc.volume : null; + var volData = explicitVol || _tvExtractVolumeFromBars(bars, theme, entry); + if (!volData || volData.length === 0) return; + + var volOptions = _tvBuildVolumeOptions(seriesDesc || {}, theme); + if (typeof _tvRegisterCustomPriceScaleId === 'function') { + try { _tvRegisterCustomPriceScaleId(entry, volOptions.priceScaleId); } catch (_e2) {} } + var vPaneIndex = _tvReserveVolumePane(entry, 'main'); + var volSeries; + try { + volSeries = _tvAddSeriesCompat(entry.chart, 'Histogram', volOptions, vPaneIndex); + } catch (_e3) { return; } + try { volSeries.setData(volData); } catch (_e4) {} + entry.volumeMap.main = volSeries; + + if (typeof _tvApplyDefaultVolumePaneHeight === 'function') { + try { _tvApplyDefaultVolumePaneHeight(entry, vPaneIndex); } catch (_e5) {} + } + if (typeof _tvEnforceMainScaleDividerClearance === 'function') { + try { _tvEnforceMainScaleDividerClearance(entry, 0.1, 0.08); } catch (_e6) {} + } + + entry._paneState = { mode: 'normal', pane: -1 }; + delete entry._savedPaneHeights; + legendUiState.volumeHidden = false; + if (volRowEl) volRowEl.style.display = 'flex'; + + if (typeof window._tvBuildCurrentSettings === 'function' && typeof window._tvApplySettingsToChart === 'function') { + try { + var settings = window._tvBuildCurrentSettings(entry); + settings['Volume'] = true; + window._tvApplySettingsToChart(chartId, entry, settings); + } catch (_e7) {} + } + + if (typeof _tvRebuildIndicatorLegend === 'function') { + try { _tvRebuildIndicatorLegend(chartId); } catch (_e8) {} + } + + try { window.dispatchEvent(new CustomEvent('pywry:legend-refresh', { detail: { chartId: chartId } })); } catch (_e9) {} } function _legendSetDatasetFlag(key, enabled) { From 3168a2de238d8e6dfc23bf190143a90de0c62150 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Mon, 20 Apr 2026 09:54:42 -0700 Subject: [PATCH 54/68] tvchart: recompute every indicator when bars change MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit _tvRecomputeIndicatorSeries was missing branches for VWAP, MACD, Stochastic, Aroon, ADX, CCI, Williams %R, A/D, Historical Volatility, Keltner Channels, Ichimoku, Parabolic SAR, and Volume Profile — so when the datafeed replaced initial bars with real data, these indicators stayed frozen at their initial snapshot. Most visibly: VWAP stuck at 9.99 (the placeholder bars' h=l=c value) on a $270 stock because it was computed once, never again. Add recompute branches for every new indicator, matching each group's actual series-key prefix (_macd_line_, _adx_plus_, _ichi_tenkan_, etc.) and reapplying per-bar colors for the MACD histogram. moving-average-ex now also recomputes HMA/VWMA, not just SMA/EMA/WMA. Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/pywry/frontend/src/tvchart/04-series.js | 370 +++++++++++++++--- 1 file changed, 320 insertions(+), 50 deletions(-) diff --git a/pywry/pywry/frontend/src/tvchart/04-series.js b/pywry/pywry/frontend/src/tvchart/04-series.js index da7d7dd..6bc9b16 100644 --- a/pywry/pywry/frontend/src/tvchart/04-series.js +++ b/pywry/pywry/frontend/src/tvchart/04-series.js @@ -94,9 +94,16 @@ function _tvRecomputeIndicatorSeries(chartId, seriesId, recomputedGroups) { if (type === 'moving-average-ex') { var maSource = info.source || 'close'; var maMethod = info.method || 'SMA'; - var maBase = rawData.map(function(p) { return { time: p.time, value: _tvIndicatorValue(p, maSource) }; }); - var maFn = maMethod === 'EMA' ? _computeEMA : (maMethod === 'WMA' ? _computeWMA : _computeSMA); - var maVals = maFn(maBase, period, 'value'); + var maVals; + if (maMethod === 'HMA') { + maVals = _computeHMA(rawData, period, maSource); + } else if (maMethod === 'VWMA') { + maVals = _computeVWMA(rawData, period, maSource); + } else { + var maBase = rawData.map(function(p) { return { time: p.time, value: _tvIndicatorValue(p, maSource) }; }); + var maFn = maMethod === 'EMA' ? _computeEMA : (maMethod === 'WMA' ? _computeWMA : _computeSMA); + maVals = maFn(maBase, period, 'value'); + } var maSeries = entry.seriesMap[seriesId]; if (maSeries) maSeries.setData(maVals.filter(function(v) { return v.value !== undefined; })); return; @@ -189,7 +196,197 @@ function _tvRecomputeIndicatorSeries(chartId, seriesId, recomputedGroups) { if (info.name === 'Volume SMA') { var vN = entry.seriesMap[seriesId]; if (vN) vN.setData(_computeSMA(rawData, period, 'volume').filter(function(v) { return v.value !== undefined; })); + return; + } + + if (info.name === 'VWAP') { + var vwSeries = entry.seriesMap[seriesId]; + if (vwSeries) vwSeries.setData(_computeVWAP(rawData).filter(function(v) { return v.value !== undefined && isFinite(v.value); })); + return; + } + + if (info.name === 'CCI') { + var cciSrc = info.source || 'hlc3'; + var cciSer = entry.seriesMap[seriesId]; + if (cciSer) cciSer.setData(_computeCCI(rawData, period, cciSrc).filter(function(v) { return v.value !== undefined; })); + return; + } + + if (info.name === 'Williams %R') { + var wrSrc = info.source || 'close'; + var wrSer = entry.seriesMap[seriesId]; + if (wrSer) wrSer.setData(_computeWilliamsR(rawData, period, wrSrc).filter(function(v) { return v.value !== undefined; })); + return; + } + + if (info.name === 'Accumulation/Distribution') { + var adSer = entry.seriesMap[seriesId]; + if (adSer) adSer.setData(_computeAccumulationDistribution(rawData).filter(function(v) { return v.value !== undefined; })); + return; + } + + if (info.name === 'Historical Volatility') { + var hvAnn = info.annualization || 252; + var hvSer = entry.seriesMap[seriesId]; + if (hvSer) hvSer.setData(_computeHistoricalVolatility(rawData, period, hvAnn).filter(function(v) { return v.value !== undefined; })); + return; + } + + if (type === 'parabolic-sar') { + var psStep = info.step || 0.02; + var psMax = info.maxStep || 0.2; + var psSer = entry.seriesMap[seriesId]; + if (psSer) psSer.setData(_computeParabolicSAR(rawData, psStep, psMax).filter(function(v) { return v.value !== undefined; })); + return; + } + + // Grouped multi-series indicators — recompute all members of the group at once. + if (info.group && type === 'macd') { + if (recomputedGroups && recomputedGroups[info.group]) return; + if (recomputedGroups) recomputedGroups[info.group] = true; + var macdFast = info.fast || 12; + var macdSlow = info.slow || 26; + var macdSig = info.signal || 9; + var macdSrc = info.macdSource || 'close'; + var macdOsc = info.oscMaType || 'EMA'; + var macdSigType = info.signalMaType || 'EMA'; + var macdRes = _computeMACD(rawData, macdFast, macdSlow, macdSig, macdSrc, macdOsc, macdSigType); + var macdKeys = Object.keys(_activeIndicators); + var macdHistPos = _cssVar('--pywry-tvchart-ind-positive-dim'); + var macdHistNeg = _cssVar('--pywry-tvchart-ind-negative-dim'); + for (var mi = 0; mi < macdKeys.length; mi++) { + var mInfo = _activeIndicators[macdKeys[mi]]; + if (!mInfo || mInfo.group !== info.group || mInfo.chartId !== chartId) continue; + var mSeries = entry.seriesMap[macdKeys[mi]]; + if (!mSeries) continue; + var mKey = macdKeys[mi]; + if (mKey.indexOf('_macd_hist_') >= 0) { + var histData = macdRes.histogram.filter(function(v) { return v.value !== undefined; }).map(function(v) { + return { time: v.time, value: v.value, color: v.value >= 0 ? macdHistPos : macdHistNeg }; + }); + mSeries.setData(histData); + } else { + var mData = mKey.indexOf('_macd_line_') >= 0 ? macdRes.macd : macdRes.signal; + mSeries.setData(mData.filter(function(v) { return v.value !== undefined; })); + } + } + return; + } + + if (info.group && type === 'stochastic') { + if (recomputedGroups && recomputedGroups[info.group]) return; + if (recomputedGroups) recomputedGroups[info.group] = true; + var stK = info.kPeriod || period; + var stSmooth = info.kSmoothing || 1; + var stD = info.dPeriod || 3; + var stRes = _computeStochastic(rawData, stK, stSmooth, stD); + var stKeys = Object.keys(_activeIndicators); + for (var si = 0; si < stKeys.length; si++) { + var sInfo = _activeIndicators[stKeys[si]]; + if (!sInfo || sInfo.group !== info.group || sInfo.chartId !== chartId) continue; + var sSer = entry.seriesMap[stKeys[si]]; + if (!sSer) continue; + sSer.setData((stKeys[si].indexOf('_stoch_d_') >= 0 ? stRes.d : stRes.k).filter(function(v) { return v.value !== undefined; })); + } + return; + } + + if (info.group && type === 'aroon') { + if (recomputedGroups && recomputedGroups[info.group]) return; + if (recomputedGroups) recomputedGroups[info.group] = true; + var arRes = _computeAroon(rawData, period); + var arKeys = Object.keys(_activeIndicators); + for (var ai = 0; ai < arKeys.length; ai++) { + var aInfo = _activeIndicators[arKeys[ai]]; + if (!aInfo || aInfo.group !== info.group || aInfo.chartId !== chartId) continue; + var aSer = entry.seriesMap[arKeys[ai]]; + if (!aSer) continue; + aSer.setData((arKeys[ai].indexOf('_aroon_down_') >= 0 ? arRes.down : arRes.up).filter(function(v) { return v.value !== undefined; })); + } + return; } + + if (info.group && type === 'adx') { + if (recomputedGroups && recomputedGroups[info.group]) return; + if (recomputedGroups) recomputedGroups[info.group] = true; + var adxDiLen = info.diLength || period; + var adxSmooth = info.adxSmoothing || period; + var adxRes = _computeADX(rawData, adxDiLen, adxSmooth); + var adxKeys = Object.keys(_activeIndicators); + for (var xi = 0; xi < adxKeys.length; xi++) { + var xInfo = _activeIndicators[adxKeys[xi]]; + if (!xInfo || xInfo.group !== info.group || xInfo.chartId !== chartId) continue; + var xSer = entry.seriesMap[adxKeys[xi]]; + if (!xSer) continue; + var xKey = adxKeys[xi]; + var xData = xKey.indexOf('_adx_plus_') >= 0 ? adxRes.plusDI + : xKey.indexOf('_adx_minus_') >= 0 ? adxRes.minusDI + : adxRes.adx; + xSer.setData(xData.filter(function(v) { return v.value !== undefined; })); + } + return; + } + + if (info.group && type === 'keltner-channels') { + if (recomputedGroups && recomputedGroups[info.group]) return; + if (recomputedGroups) recomputedGroups[info.group] = true; + var kcMult = info.multiplier || 2; + var kcMa = info.maType || 'EMA'; + var kcRes = _computeKeltnerChannels(rawData, period, kcMult, kcMa); + var kcKeys = Object.keys(_activeIndicators); + for (var ki = 0; ki < kcKeys.length; ki++) { + var kInfo = _activeIndicators[kcKeys[ki]]; + if (!kInfo || kInfo.group !== info.group || kInfo.chartId !== chartId) continue; + var kSer = entry.seriesMap[kcKeys[ki]]; + if (!kSer) continue; + var kKey = kcKeys[ki]; + var kData = kKey.indexOf('_kc_upper_') >= 0 ? kcRes.upper + : kKey.indexOf('_kc_lower_') >= 0 ? kcRes.lower + : kcRes.middle; + kSer.setData(kData.filter(function(v) { return v.value !== undefined; })); + } + return; + } + + if (info.group && type === 'ichimoku') { + if (recomputedGroups && recomputedGroups[info.group]) return; + if (recomputedGroups) recomputedGroups[info.group] = true; + var icConv = info.conversionPeriod || 9; + var icBase = info.basePeriod || 26; + var icSpan = info.spanPeriod || 52; + var icLag = info.laggingPeriod || 26; + var icShift = info.leadingShift || 26; + var icRes = _computeIchimoku(rawData, icConv, icBase, icSpan, icLag, icShift); + var icKeys = Object.keys(_activeIndicators); + for (var ii = 0; ii < icKeys.length; ii++) { + var iInfo = _activeIndicators[icKeys[ii]]; + if (!iInfo || iInfo.group !== info.group || iInfo.chartId !== chartId) continue; + var iSer = entry.seriesMap[icKeys[ii]]; + if (!iSer) continue; + var iKey = icKeys[ii]; + var iData = iKey.indexOf('_ichi_tenkan_') >= 0 ? icRes.conversion + : iKey.indexOf('_ichi_kijun_') >= 0 ? icRes.base + : iKey.indexOf('_ichi_spanA_') >= 0 ? icRes.spanA + : iKey.indexOf('_ichi_spanB_') >= 0 ? icRes.spanB + : iKey.indexOf('_ichi_chikou_') >= 0 ? icRes.lagging + : null; + if (iData) iSer.setData(iData.filter(function(v) { return v.value !== undefined; })); + } + if (typeof _tvUpdateIchimokuCloud === 'function') { + try { _tvUpdateIchimokuCloud(chartId); } catch (_e) {} + } + return; + } + + if (type === 'volume-profile-visible') { + if (typeof _tvRefreshVisibleVolumeProfiles === 'function') { + try { _tvRefreshVisibleVolumeProfiles(chartId); } catch (_e) {} + } + return; + } + // Fixed-range VPs are anchored to a specific bar index range; the + // underlying chart redraws the primitive on its next frame, so no + // explicit recompute is required here. } function _tvRecomputeIndicatorsForChart(chartId, changedSeriesId) { @@ -1220,7 +1417,11 @@ function _tvCreateIndicatorLine(entry, color, lineWidth, isSubplot, useBaseline) baseOpts = { color: color, lineWidth: lineWidth || 2, lastValueVisible: true, priceLineVisible: false }; } if (isSubplot) { - if (!entry._nextPane) entry._nextPane = 1; + // Skip past the volume pane (index 1 when volume is rendered) so + // subplot indicators don't get merged into the volume histogram's + // own pane. _tvReserveComparePane uses the same offset. + var subplotStart = entry.volumeMap && entry.volumeMap.main ? 2 : 1; + if (!entry._nextPane || entry._nextPane < subplotStart) entry._nextPane = subplotStart; paneIndex = entry._nextPane; try { series = entry.chart.addSeries(seriesCtor, baseOpts, paneIndex); @@ -1319,12 +1520,21 @@ function _tvAddIndicator(indicatorDef, chartId) { source: indicatorDef._source || 'close', }, 2, true); } else if (key === 'moving-average-ex') { - var maLength = Math.max(1, period || 10); + // Single "Moving Average" entry — Type dropdown chooses the + // family (SMA / EMA / WMA / HMA / VWMA), Length is the window. + var maLength = Math.max(1, period || 9); var maSource = indicatorDef._source || 'close'; var maMethod = indicatorDef._method || 'SMA'; - var maBase = rawData.map(function(p) { return { time: p.time, value: _tvIndicatorValue(p, maSource) }; }); - var maFn = maMethod === 'EMA' ? _computeEMA : (maMethod === 'WMA' ? _computeWMA : _computeSMA); - var maVals = maFn(maBase, maLength, 'value'); + var maVals; + if (maMethod === 'HMA') { + maVals = _computeHMA(rawData, maLength, maSource); + } else if (maMethod === 'VWMA') { + maVals = _computeVWMA(rawData, maLength, maSource); + } else { + var maBase = rawData.map(function(p) { return { time: p.time, value: _tvIndicatorValue(p, maSource) }; }); + var maFn = maMethod === 'EMA' ? _computeEMA : (maMethod === 'WMA' ? _computeWMA : _computeSMA); + maVals = maFn(maBase, maLength, 'value'); + } addSingleSeriesIndicator('moving_avg_ex', maVals, { period: maLength, method: maMethod, @@ -1382,29 +1592,6 @@ function _tvAddIndicator(indicatorDef, chartId) { isBaseline: true, }, 2, true, true); - // ========== MOVING AVERAGES ========== - } else if (name === 'SMA' || name === 'EMA' || name === 'WMA') { - var maFn = name === 'SMA' ? _computeSMA : name === 'EMA' ? _computeEMA : _computeWMA; - var maPeriod = period || 20; - addSingleSeriesIndicator(name.replace(/\s/g, '_').toLowerCase(), maFn(rawData, maPeriod), { - type: name.toLowerCase(), - period: maPeriod - }, 2, false); - } else if (name === 'HMA') { - var hmaPeriod = period || 9; - addSingleSeriesIndicator('hma', _computeHMA(rawData, hmaPeriod), { type: 'hma', period: hmaPeriod }, 2, false); - } else if (name === 'VWMA') { - var vwmaPeriod = period || 20; - addSingleSeriesIndicator('vwma', _computeVWMA(rawData, vwmaPeriod), { type: 'vwma', period: vwmaPeriod }, 2, false); - } else if (name === 'SMA (50)') { - addSingleSeriesIndicator('sma_50', _computeSMA(rawData, 50), { type: 'sma', period: 50 }, 2, false); - } else if (name === 'SMA (200)') { - addSingleSeriesIndicator('sma_200', _computeSMA(rawData, 200), { type: 'sma', period: 200 }, 2, false); - } else if (name === 'EMA (12)') { - addSingleSeriesIndicator('ema_12', _computeEMA(rawData, 12), { type: 'ema', period: 12 }, 2, false); - } else if (name === 'EMA (26)') { - addSingleSeriesIndicator('ema_26', _computeEMA(rawData, 26), { type: 'ema', period: 26 }, 2, false); - // ========== VOLATILITY ========== } else if (name === 'Bollinger Bands') { var bbPeriod = period || 20; @@ -1457,13 +1644,59 @@ function _tvAddIndicator(indicatorDef, chartId) { var volSmaData = _computeSMA(rawData, volSmaPeriod, 'volume'); addSingleSeriesIndicator('volsma', volSmaData, { type: 'volume-sma', period: volSmaPeriod }, 1, false); } else if (name === 'Accumulation/Distribution') { - addSingleSeriesIndicator('ad', _computeAccumulationDistribution(rawData), { type: 'accumulation-distribution', period: 0 }, 2, true); + // A/D values are cumulative volume * price-position so they grow + // into the billions / trillions. Shorten with a K / M / B / T + // formatter so the right-axis labels and crosshair readout are + // legible instead of a 12-digit number. + var __subStartAD = entry.volumeMap && entry.volumeMap.main ? 2 : 1; + if (!entry._nextPane || entry._nextPane < __subStartAD) entry._nextPane = __subStartAD; + var adPaneIdx = entry._nextPane; + var adColor = indicatorDef._color || _getNextIndicatorColor(); + var adFormatter = function(price) { + var n = Number(price) || 0; + var sign = n < 0 ? '-' : ''; + var a = Math.abs(n); + if (a >= 1e12) return sign + (a / 1e12).toFixed(2) + 'T'; + if (a >= 1e9) return sign + (a / 1e9).toFixed(2) + 'B'; + if (a >= 1e6) return sign + (a / 1e6).toFixed(2) + 'M'; + if (a >= 1e3) return sign + (a / 1e3).toFixed(2) + 'K'; + return sign + a.toFixed(0); + }; + var adSeries; + try { + adSeries = entry.chart.addSeries(LightweightCharts.LineSeries, { + color: adColor, + lineWidth: 2, + priceLineVisible: false, + lastValueVisible: true, + priceFormat: { type: 'custom', formatter: adFormatter, minMove: 1 }, + }, adPaneIdx); + entry._nextPane++; + } catch (e) { + console.error('[pywry:tvchart] A/D: unable to allocate subplot pane', e); + return; + } + adSeries.setData(_computeAccumulationDistribution(rawData).filter(function(v) { return v.value !== undefined; })); + var adId = 'ind_ad_' + Date.now(); + entry.seriesMap[adId] = adSeries; + _activeIndicators[adId] = { + name: 'Accumulation/Distribution', + period: 0, + chartId: chartId, + color: adColor, + paneIndex: adPaneIdx, + isSubplot: true, + type: 'accumulation-distribution', + sourceSeriesId: primarySeriesId, + }; } else if (name === 'Williams %R') { var wrPeriod = period || 14; - addSingleSeriesIndicator('williams_r', _computeWilliamsR(rawData, wrPeriod), { type: 'williams-r', period: wrPeriod }, 2, true); + var wrSrc = indicatorDef._source || 'close'; + addSingleSeriesIndicator('williams_r', _computeWilliamsR(rawData, wrPeriod, wrSrc), { type: 'williams-r', period: wrPeriod, source: wrSrc }, 2, true); } else if (name === 'CCI') { var cciPeriod = period || 20; - addSingleSeriesIndicator('cci', _computeCCI(rawData, cciPeriod), { type: 'cci', period: cciPeriod }, 2, true); + var cciSrc = indicatorDef._source || 'hlc3'; + addSingleSeriesIndicator('cci', _computeCCI(rawData, cciPeriod, cciSrc), { type: 'cci', period: cciPeriod, source: cciSrc }, 2, true); } else if (name === 'Historical Volatility') { var hvPeriod = period || 10; var hvAnn = indicatorDef._annualization || 252; @@ -1495,8 +1728,12 @@ function _tvAddIndicator(indicatorDef, chartId) { var macdFast = indicatorDef._fast || 12; var macdSlow = indicatorDef._slow || 26; var macdSignal = indicatorDef._signal || 9; - var macd = _computeMACD(rawData, macdFast, macdSlow, macdSignal); - if (!entry._nextPane) entry._nextPane = 1; + var macdSource = indicatorDef._macdSource || indicatorDef._source || 'close'; + var macdOscMa = indicatorDef._oscMaType || 'EMA'; + var macdSigMa = indicatorDef._signalMaType || 'EMA'; + var macd = _computeMACD(rawData, macdFast, macdSlow, macdSignal, macdSource, macdOscMa, macdSigMa); + var __subStart = entry.volumeMap && entry.volumeMap.main ? 2 : 1; + if (!entry._nextPane || entry._nextPane < __subStart) entry._nextPane = __subStart; var macdPane = entry._nextPane++; var macdColor = _cssVar('--pywry-tvchart-ind-primary'); var sigColor = _cssVar('--pywry-tvchart-ind-secondary'); @@ -1522,15 +1759,23 @@ function _tvAddIndicator(indicatorDef, chartId) { var sidMACD = 'ind_macd_line_' + Date.now(); var sidSig = 'ind_macd_signal_' + Date.now(); entry.seriesMap[sidHist] = sHist; entry.seriesMap[sidMACD] = sMACD; entry.seriesMap[sidSig] = sSig; - var macdCommon = { period: macdFast, chartId: chartId, group: macdGroup, paneIndex: macdPane, isSubplot: true, type: 'macd', sourceSeriesId: primarySeriesId, fast: macdFast, slow: macdSlow, signal: macdSignal }; + var macdCommon = { + period: macdFast, chartId: chartId, group: macdGroup, paneIndex: macdPane, + isSubplot: true, type: 'macd', sourceSeriesId: primarySeriesId, + fast: macdFast, slow: macdSlow, signal: macdSignal, + macdSource: macdSource, oscMaType: macdOscMa, signalMaType: macdSigMa, + histPosColor: histPosColor, histNegColor: histNegColor, + }; _activeIndicators[sidHist] = _tvMerge(macdCommon, { name: 'MACD Histogram', color: histPosColor }); _activeIndicators[sidMACD] = _tvMerge(macdCommon, { name: 'MACD', color: macdColor }); _activeIndicators[sidSig] = _tvMerge(macdCommon, { name: 'MACD Signal', color: sigColor }); } else if (name === 'Stochastic') { var kPeriod = period || 14; + var kSmoothing = indicatorDef._kSmoothing || 1; var dPeriod = indicatorDef._dPeriod || 3; - var stoch = _computeStochastic(rawData, kPeriod, dPeriod); - if (!entry._nextPane) entry._nextPane = 1; + var stoch = _computeStochastic(rawData, kPeriod, kSmoothing, dPeriod); + var __subStart = entry.volumeMap && entry.volumeMap.main ? 2 : 1; + if (!entry._nextPane || entry._nextPane < __subStart) entry._nextPane = __subStart; var stochPane = entry._nextPane++; var stochKColor = _cssVar('--pywry-tvchart-ind-primary'); var stochDColor = _cssVar('--pywry-tvchart-ind-secondary'); @@ -1545,13 +1790,14 @@ function _tvAddIndicator(indicatorDef, chartId) { var sidK = 'ind_stoch_k_' + Date.now(); var sidD = 'ind_stoch_d_' + Date.now(); entry.seriesMap[sidK] = sK; entry.seriesMap[sidD] = sD; - var stochCommon = { period: kPeriod, chartId: chartId, group: stochGroup, paneIndex: stochPane, isSubplot: true, type: 'stochastic', sourceSeriesId: primarySeriesId, kPeriod: kPeriod, dPeriod: dPeriod }; + var stochCommon = { period: kPeriod, chartId: chartId, group: stochGroup, paneIndex: stochPane, isSubplot: true, type: 'stochastic', sourceSeriesId: primarySeriesId, kPeriod: kPeriod, kSmoothing: kSmoothing, dPeriod: dPeriod }; _activeIndicators[sidK] = _tvMerge(stochCommon, { name: 'Stoch %K', color: stochKColor }); _activeIndicators[sidD] = _tvMerge(stochCommon, { name: 'Stoch %D', color: stochDColor }); } else if (name === 'Aroon') { var aroonPeriod = period || 14; var aroon = _computeAroon(rawData, aroonPeriod); - if (!entry._nextPane) entry._nextPane = 1; + var __subStart = entry.volumeMap && entry.volumeMap.main ? 2 : 1; + if (!entry._nextPane || entry._nextPane < __subStart) entry._nextPane = __subStart; var aroonPane = entry._nextPane++; var aroonUpColor = _cssVar('--pywry-tvchart-ind-positive'); var aroonDownColor = _cssVar('--pywry-tvchart-ind-negative'); @@ -1570,9 +1816,12 @@ function _tvAddIndicator(indicatorDef, chartId) { _activeIndicators[sidUp] = _tvMerge(aroonCommon, { name: 'Aroon Up', color: aroonUpColor }); _activeIndicators[sidDown] = _tvMerge(aroonCommon, { name: 'Aroon Down', color: aroonDownColor }); } else if (name === 'ADX') { - var adxPeriod = period || 14; - var adx = _computeADX(rawData, adxPeriod); - if (!entry._nextPane) entry._nextPane = 1; + var adxDi = indicatorDef._diLength || period || 14; + var adxSm = indicatorDef._adxSmoothing || period || 14; + var adxPeriod = adxSm; + var adx = _computeADX(rawData, adxDi, adxSm); + var __subStart = entry.volumeMap && entry.volumeMap.main ? 2 : 1; + if (!entry._nextPane || entry._nextPane < __subStart) entry._nextPane = __subStart; var adxPane = entry._nextPane++; var adxColor = _cssVar('--pywry-tvchart-ind-primary'); var plusDIColor = _cssVar('--pywry-tvchart-ind-positive'); @@ -1591,7 +1840,7 @@ function _tvAddIndicator(indicatorDef, chartId) { var sidPlus = 'ind_adx_plus_' + Date.now(); var sidMinus = 'ind_adx_minus_' + Date.now(); entry.seriesMap[sidAdx] = sAdx; entry.seriesMap[sidPlus] = sPlus; entry.seriesMap[sidMinus] = sMinus; - var adxCommon = { period: adxPeriod, chartId: chartId, group: adxGroup, paneIndex: adxPane, isSubplot: true, type: 'adx', sourceSeriesId: primarySeriesId }; + var adxCommon = { period: adxPeriod, chartId: chartId, group: adxGroup, paneIndex: adxPane, isSubplot: true, type: 'adx', sourceSeriesId: primarySeriesId, adxSmoothing: adxSm, diLength: adxDi }; _activeIndicators[sidAdx] = _tvMerge(adxCommon, { name: 'ADX', color: adxColor }); _activeIndicators[sidPlus] = _tvMerge(adxCommon, { name: '+DI', color: plusDIColor }); _activeIndicators[sidMinus] = _tvMerge(adxCommon, { name: '-DI', color: minusDIColor }); @@ -1619,10 +1868,12 @@ function _tvAddIndicator(indicatorDef, chartId) { _activeIndicators[sidKcU] = _tvMerge(kcCommon, { name: 'KC Upper', color: kcBandColor }); _activeIndicators[sidKcL] = _tvMerge(kcCommon, { name: 'KC Lower', color: kcBandColor }); } else if (name === 'Ichimoku Cloud') { - var ichiTen = indicatorDef._tenkan || 9; - var ichiKij = indicatorDef._kijun || period || 26; - var ichiSpB = indicatorDef._senkouB || 52; - var ichi = _computeIchimoku(rawData, ichiTen, ichiKij, ichiSpB); + var ichiConv = indicatorDef._conversionPeriod || indicatorDef._tenkan || 9; + var ichiBase = indicatorDef._basePeriod || indicatorDef._kijun || period || 26; + var ichiLead = indicatorDef._leadingSpanPeriod || indicatorDef._senkouB || 52; + var ichiLag = indicatorDef._laggingPeriod || 26; + var ichiShift = indicatorDef._leadingShiftPeriod || 26; + var ichi = _computeIchimoku(rawData, ichiConv, ichiBase, ichiLead, ichiLag, ichiShift); var ichiScaleId = _tvResolveScalePlacement(entry); var cTen = _cssVar('--pywry-tvchart-ind-primary'); var cKij = _cssVar('--pywry-tvchart-ind-negative'); @@ -1648,12 +1899,31 @@ function _tvAddIndicator(indicatorDef, chartId) { entry.seriesMap[sidSpA] = sSpA; entry.seriesMap[sidSpB] = sSpB; entry.seriesMap[sidChi] = sChi; var ichiGroup = 'ichi_' + Date.now(); - var ichiCommon = { period: ichiKij, chartId: chartId, group: ichiGroup, paneIndex: 0, isSubplot: false, type: 'ichimoku', sourceSeriesId: primarySeriesId, tenkan: ichiTen, kijun: ichiKij, senkouB: ichiSpB }; + var cloudUp = _cssVar('--pywry-tvchart-ind-positive'); + var cloudDown = _cssVar('--pywry-tvchart-ind-negative'); + var ichiCommon = { + period: ichiBase, chartId: chartId, group: ichiGroup, paneIndex: 0, + isSubplot: false, type: 'ichimoku', sourceSeriesId: primarySeriesId, + // TradingView's parameter names — kept on every group member + // so the apply path can read them off any of them. + conversionPeriod: ichiConv, + basePeriod: ichiBase, + leadingSpanPeriod: ichiLead, + laggingPeriod: ichiLag, + leadingShiftPeriod: ichiShift, + // Back-compat aliases used by older code paths. + tenkan: ichiConv, kijun: ichiBase, senkouB: ichiLead, + cloudUpColor: cloudUp, cloudDownColor: cloudDown, cloudOpacity: 0.20, + }; _activeIndicators[sidTen] = _tvMerge(ichiCommon, { name: 'Ichimoku Tenkan', color: cTen }); _activeIndicators[sidKij] = _tvMerge(ichiCommon, { name: 'Ichimoku Kijun', color: cKij }); _activeIndicators[sidSpA] = _tvMerge(ichiCommon, { name: 'Ichimoku Span A', color: cSpA }); _activeIndicators[sidSpB] = _tvMerge(ichiCommon, { name: 'Ichimoku Span B', color: cSpB }); _activeIndicators[sidChi] = _tvMerge(ichiCommon, { name: 'Ichimoku Chikou', color: cChi }); + + // Attach the Kumo (cloud) fill primitive — green when Span A is + // above Span B, red otherwise. + _tvEnsureIchimokuCloudPrimitive(chartId); } else if (key === 'volume-profile-fixed' || key === 'volume-profile-visible') { var vpMode = key === 'volume-profile-fixed' ? 'fixed' : 'visible'; var vpRowsLayout = indicatorDef._rowsLayout || 'rows'; From a4a115e787c2e984e1ee9937fcbf6b3f96e9d749 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Mon, 20 Apr 2026 09:54:55 -0700 Subject: [PATCH 55/68] tvchart: tests + docs for indicator catalog, CSS vars, legend remove Adds a real contract suite under TestTVChartIndicatorCatalog / TestTVChartVolumeProfile / TestTVChartLegendVolumeRemoval / TestTVChartThemeVariables: every catalog entry has a compute fn, add branch, and recompute branch; VP returns the expected fields; volume Remove actually removes; every --pywry-tvchart-vp-* and --pywry-tvchart-ind-* var is defined for both themes (86 new tests, 267 total). Docs: new Indicators reference page listing TradingView-accurate parameter names for every indicator, CSS reference updated with VP and indicator palette sections, events reference updated with the full name list for tvchart:add-indicator. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../tradingview/tvchart-indicators.md | 240 +++++++++++ pywry/docs/docs/reference/css/tvchart.md | 32 ++ pywry/docs/docs/reference/events/tvchart.md | 2 +- pywry/docs/mkdocs.yml | 1 + pywry/tests/test_tvchart.py | 379 +++++++++++++++++- 5 files changed, 645 insertions(+), 9 deletions(-) create mode 100644 pywry/docs/docs/integrations/tradingview/tvchart-indicators.md diff --git a/pywry/docs/docs/integrations/tradingview/tvchart-indicators.md b/pywry/docs/docs/integrations/tradingview/tvchart-indicators.md new file mode 100644 index 0000000..71eb200 --- /dev/null +++ b/pywry/docs/docs/integrations/tradingview/tvchart-indicators.md @@ -0,0 +1,240 @@ +# TradingView Indicators + +Catalog of every indicator available in the TradingView Lightweight Charts +integration. Each entry is exposed in the Indicators panel UI, addable via +`tvchart:add-indicator` / `app.add_builtin_indicator(name, ...)`, and +recomputed automatically when underlying bars change (scrollback, interval +switch, symbol change, session-filter toggle). + +Every indicator's settings dialog mirrors TradingView's real field labels. +Field-level parameters passed via `app.add_builtin_indicator()` prefix +non-`period`/`color`/`source` arguments with an underscore so the frontend +can route them to the right indicator-specific slot. + +!!! note "Where colors come from" + Indicator colors are never hard-coded. Multi-series indicators read + from the `--pywry-tvchart-ind-*` CSS palette (primary, secondary, etc.) + so they stay theme-aware — see + [CSS Reference → Indicator Palette](../../reference/css/tvchart.md#indicator-palette). + +## Moving Averages + +### Moving Average (unified SMA / EMA / WMA / HMA / VWMA) + +| Parameter | Type | Default | Notes | +|-----------|------|---------|-------| +| `period` (Length) | int | 9 | Lookback window | +| `method` | `SMA` \| `EMA` \| `WMA` \| `HMA` \| `VWMA` | `SMA` | Selected from the Type dropdown | +| `source` | `close` \| `open` \| `high` \| `low` \| `hl2` \| `hlc3` \| `ohlc4` | `close` | Input series | +| `color` | CSS color | palette primary | Line color | + +A single catalog entry, not five separate ones — picking a different Type +in the settings dialog triggers the appropriate compute function (`_computeSMA`, +`_computeEMA`, `_computeWMA`, `_computeHMA`, `_computeVWMA`). + +### Ichimoku Cloud (`Ichimoku Cloud`) + +Five-line indicator using TradingView's exact parameter names: + +| Parameter | Default | Line | +|-----------|---------|------| +| Conversion Line Periods | 9 | Tenkan-sen | +| Base Line Periods | 26 | Kijun-sen | +| Leading Span Periods | 52 | Senkou Span B | +| Lagging Span Periods | 26 | Chikou Span (back-shifted close) | +| Leading Shift Periods | 26 | Forward shift applied to Senkou A/B | + +Senkou A/B are rendered with a translucent cloud fill via the +`_tvMakeIchimokuCloudPrimitive` primitive so the crossover region actually +projects into the future, matching TradingView's reference. + +## Volatility + +### Bollinger Bands (`Bollinger Bands`) + +| Parameter | Default | | +|-----------|---------|-| +| `period` | 20 | SMA window | +| `multiplier` | 2 | StdDev multiplier | +| `maType` | `SMA` | Can be `SMA` / `EMA` / `WMA` | +| `source` | `close` | | +| `offset` | 0 | Forward / back shift in bars | + +Renders three line series (upper / middle / lower) plus the `bb-fill` primitive. + +### Keltner Channels (`Keltner Channels`) + +| Parameter | Default | | +|-----------|---------|-| +| `period` (Length) | 20 | Middle-line window | +| `multiplier` | 2 | ATR multiplier applied above/below the middle | +| `maType` | `EMA` | Middle-line MA type | + +### Average True Range (`ATR`) + +Single-series subplot. Parameter: `period` (default 14). + +### Historical Volatility (`Historical Volatility`) + +Standard deviation of log returns, annualized. + +| Parameter | Default | +|-----------|---------| +| `period` | 10 | +| `_annualization` | 252 (trading days per year) | + +### Parabolic SAR (`Parabolic SAR`) + +Trend-following dot series rendered on the main pane. + +| Parameter | Default | +|-----------|---------| +| `_step` (acceleration factor start) | 0.02 | +| `_maxStep` (maximum AF) | 0.2 | + +## Momentum + +### Relative Strength Index (`RSI`) + +Subplot oscillator. Parameter: `period` (default 14), `source` (default `close`). + +### MACD (`MACD`) + +Subplot with three series (MACD line, Signal line, Histogram). + +| Parameter | Default | +|-----------|---------| +| `_fast` | 12 | +| `_slow` | 26 | +| `_signal` | 9 | +| `_oscMaType` | `EMA` | +| `_signalMaType` | `EMA` | +| `source` | `close` | + +Histogram bars are colored per-bar from `--pywry-tvchart-ind-positive-dim` +/ `--pywry-tvchart-ind-negative-dim`; the recompute path reapplies those +colors every time the bars refresh (otherwise scrollback would strip them). + +### Stochastic (`Stochastic`) + +| Parameter | Default | TradingView label | +|-----------|---------|-------------------| +| `period` | 14 | %K Period | +| `_kSmoothing` | 1 | %K Smoothing | +| `_dPeriod` | 3 | %D Period | + +### Williams %R (`Williams %R`) + +Oscillator between 0 and -100. Parameter: `period` (default 14), `source`. + +### CCI (`CCI`) + +Commodity Channel Index. Parameter: `period` (default 20), `source` (default `hlc3`). + +### ADX (`ADX`) + +Three-series subplot (`ADX`, `+DI`, `-DI`). + +| Parameter | Default | +|-----------|---------| +| `_diLength` | 14 | +| `_adxSmoothing` | 14 | + +### Aroon (`Aroon`) + +Two-series subplot (`Aroon Up`, `Aroon Down`). Parameter: `period` (default 14). + +## Volume + +### VWAP (`VWAP`) + +Cumulative volume-weighted average price. Rendered on the main pane. No +user parameters — session anchoring follows the current bar series. + +### Volume SMA (`Volume SMA`) + +Moving average of the volume histogram. Parameter: `period` (default 20). + +### Accumulation / Distribution Line (`Accumulation/Distribution`) + +Cumulative money-flow line. Rendered in its own subplot pane (not inside +the volume pane). Values can grow into the trillions, so the right-axis +formatter shortens them to K / M / B / T. + +### Volume Profile Fixed Range (`Volume Profile Fixed Range`) + +Right-pinned horizontal histogram of volume traded at each price bucket +across a fixed bar-index range. Splits each row into up-volume and +down-volume, marks the Point of Control (POC), and shades the 70 % Value +Area. + +| Parameter | Default | Notes | +|-----------|---------|-------| +| `_rowSize` | 24 | Bucket count in `rows` layout, or price increment in `ticks` layout | +| `_rowsLayout` | `rows` | `rows` (count) or `ticks` (price-increment) | +| `_valueAreaPct` | 0.70 | Fraction of total volume to enclose in VA band | +| `_showDevelopingPOC` | false | Draw the running POC as a step-line across time | +| `_showDevelopingVA` | false | Draw the running VA high/low across time | + +Color surfaces come exclusively from the `--pywry-tvchart-vp-*` CSS variables. + +### Volume Profile Visible Range (`Volume Profile Visible Range`) + +Same shape as the fixed-range version but the bucket range tracks the +timescale's visible logical range. As the user pans / zooms, the profile +recomputes on every frame via `_tvRefreshVisibleVolumeProfiles()`. + +## Lightweight Examples (single-series utilities) + +Derived plots included mainly as examples of the compute-to-line pipeline: + +| Name | Parameters | Subplot? | +|------|-----------|----------| +| Average Price | — | No | +| Median Price | — | No | +| Weighted Close | — | No | +| Momentum | `period` (10) | Yes | +| Percent Change | `source` | Yes | +| Correlation | `period` (20), `primarySource`, `secondarySource`, second symbol | Yes | +| Product / Ratio / Spread / Sum | `primarySource`, `secondarySource`, second symbol | Yes | + +## Recompute contract + +Every indicator above lists at least one `_compute*` function in the +frontend JS bundle **and** a matching branch in +`_tvRecomputeIndicatorSeries`. The recompute branch fires on: + +- Datafeed scrollback — older bars prepended to `_seriesRawData`. +- Interval change — bars replaced in a destroy / recreate cycle. +- Symbol change — main series swapped. +- Session filter toggle (RTH / ETH) — the displayed bar set changes. + +Without the recompute branch, an indicator silently freezes at its initial +snapshot while the candles below it update — the bug that produced +`VWAP = 9.99` on a $270 stock (initial bars were placeholder values; the +datafeed replaced them but VWAP never refreshed). + +## Tests + +`pywry/tests/test_tvchart.py` enforces the contract: + +- `TestTVChartIndicatorCatalog.test_catalog_contains_indicator` — every + expected name is in the catalog. +- `TestTVChartIndicatorCatalog.test_compute_function_defined` — every + `_compute*` function exists. +- `TestTVChartIndicatorCatalog.test_add_branch_wires_compute` — the add + branch calls the compute function. +- `TestTVChartIndicatorCatalog.test_recompute_branch_refreshes_series` — + the recompute branch exists and calls the compute function. +- `TestTVChartIndicatorCatalog.test_recompute_branch_for_volume_profile` — + visible-range VP is refreshed via `_tvRefreshVisibleVolumeProfiles`. +- `TestTVChartVolumeProfile` — VP profile returns + `profile / minPrice / maxPrice / step / totalVolume`, splits up vs down + volume per row, and exposes a POC / Value Area helper. +- `TestTVChartThemeVariables` — every `--pywry-tvchart-vp-*` and + `--pywry-tvchart-ind-*` CSS variable is defined in both the dark and + light theme blocks. +- `TestTVChartLegendVolumeRemoval` — clicking "Remove" on the volume + legend row actually calls `chart.removeSeries`, removes the empty pane, + and reindexes the remaining panes (previously it only toggled a + dataset flag). diff --git a/pywry/docs/docs/reference/css/tvchart.md b/pywry/docs/docs/reference/css/tvchart.md index f00f93d..7d1f5bd 100644 --- a/pywry/docs/docs/reference/css/tvchart.md +++ b/pywry/docs/docs/reference/css/tvchart.md @@ -88,6 +88,38 @@ This stylesheet defines ~67 CSS custom properties per theme (dark and light) for } ``` +### Volume Profile (VPVR / VPFR) + +Colours for the **Volume Profile Fixed Range** and **Volume Profile Visible Range** indicators. Every value is kept low-opacity so the profile rows never drown the candles underneath: + +```css +:root { + --pywry-tvchart-vp-up: /* up-volume bar (dim, left half of each row) */; + --pywry-tvchart-vp-down: /* down-volume bar (dim, right half of each row) */; + --pywry-tvchart-vp-va-up: /* up-volume INSIDE the value area (higher opacity) */; + --pywry-tvchart-vp-va-down: /* down-volume INSIDE the value area (higher opacity) */; + --pywry-tvchart-vp-poc: /* Point of Control line (accent, highest opacity) */; +} +``` + +The renderer reads these via `_cssVar()` inside `_tvMakeVolumeProfilePrimitive()` so the palette stays theme-driven — never hard-coded. + +### Indicator Palette + +Shared colour palette used by every multi-series indicator (MACD, Stochastic, ADX, Aroon, Keltner, Ichimoku, etc.) so each subplot stays visually consistent across themes: + +```css +:root { + --pywry-tvchart-ind-primary: /* primary line (MACD line, Stoch %K, ADX, KC mid) */; + --pywry-tvchart-ind-secondary: /* secondary line (MACD signal, Stoch %D, Ichimoku Kijun) */; + --pywry-tvchart-ind-tertiary: /* tertiary accent (Ichimoku Chikou, fallback dim) */; + --pywry-tvchart-ind-positive: /* up / +DI / Aroon-up (green accent) */; + --pywry-tvchart-ind-negative: /* down / -DI / Aroon-down (red accent) */; + --pywry-tvchart-ind-positive-dim: /* MACD histogram positive bar fill */; + --pywry-tvchart-ind-negative-dim: /* MACD histogram negative bar fill */; +} +``` + ### Drawing Tools ```css diff --git a/pywry/docs/docs/reference/events/tvchart.md b/pywry/docs/docs/reference/events/tvchart.md index 17e0c3b..42269b1 100644 --- a/pywry/docs/docs/reference/events/tvchart.md +++ b/pywry/docs/docs/reference/events/tvchart.md @@ -88,7 +88,7 @@ fill primitive. | Event | Direction | Payload | Description | |-------|-----------|---------|-------------| -| `tvchart:add-indicator` | Python→JS | `{name, period?, color?, source?, method?, multiplier?, maType?, offset?, chartId?}` | Add a built-in indicator by name. See the `add_builtin_indicator()` method docstring for the full list of valid `name` values (SMA, EMA, WMA, RSI, ATR, VWAP, Bollinger Bands, Volume SMA, and the "Lightweight Examples" family). | +| `tvchart:add-indicator` | Python→JS | `{name, period?, color?, source?, method?, multiplier?, maType?, offset?, _kSmoothing?, _dPeriod?, _diLength?, _adxSmoothing?, _fast?, _slow?, _signal?, _oscMaType?, _signalMaType?, _conversionPeriod?, _basePeriod?, _spanPeriod?, _laggingPeriod?, _leadingShift?, _step?, _maxStep?, _annualization?, _rowSize?, _rowsLayout?, _valueAreaPct?, chartId?}` | Add a built-in indicator by name. Accepted names: `SMA`, `EMA`, `WMA`, `HMA`, `VWMA` (all via the unified **Moving Average** entry with a `method` dropdown), `Ichimoku Cloud`, `Bollinger Bands`, `Keltner Channels`, `ATR`, `Historical Volatility`, `Parabolic SAR`, `RSI`, `MACD`, `Stochastic`, `Williams %R`, `CCI`, `ADX`, `Aroon`, `VWAP`, `Volume SMA`, `Accumulation/Distribution`, `Volume Profile Fixed Range`, `Volume Profile Visible Range`, plus the "Lightweight Examples" family (`Average Price`, `Median Price`, `Weighted Close`, `Momentum`, `Percent Change`, `Correlation`, `Product`, `Ratio`, `Spread`, `Sum`). Each indicator also surfaces a settings dialog — see [TradingView Indicators](../../integrations/tradingview/tvchart-indicators.md) for the full parameter list. | | `tvchart:remove-indicator` | Python→JS | `{seriesId, chartId?}` | Remove an indicator series by its id. Grouped indicators (e.g. the three Bollinger bands) are removed together. Subplot panes are cleaned up automatically. | | `tvchart:list-indicators` | Python→JS | `{chartId?, context?}` | Request the current list of active indicators. The frontend replies with `tvchart:list-indicators-response`. | | `tvchart:list-indicators-response` | JS→Python | `{indicators: [{seriesId, name, type, period, color, group?, sourceSeriesId?, secondarySeriesId?, secondarySymbol?, isSubplot?, primarySource?, secondarySource?}], chartId?, context?}` | Snapshot of every active indicator on the chart. `secondarySeriesId` + `secondarySymbol` are populated on compare-derivative indicators (Spread, Ratio, Sum, Product, Correlation); `sourceSeriesId` identifies the primary input series (usually `"main"`). `context` is echoed from the request for correlation. | diff --git a/pywry/docs/mkdocs.yml b/pywry/docs/mkdocs.yml index a04e1eb..a20b748 100644 --- a/pywry/docs/mkdocs.yml +++ b/pywry/docs/mkdocs.yml @@ -234,6 +234,7 @@ nav: - integrations/tradingview/index.md - Config: integrations/tradingview/tvchart-config.md - DatafeedProvider: integrations/tradingview/tvchart-datafeed.md + - Indicators: integrations/tradingview/tvchart-indicators.md - Models: integrations/tradingview/tvchart-models.md - TVChartStateMixin: integrations/tradingview/tvchart-mixin.md - UDFAdapter: integrations/tradingview/tvchart-udf.md diff --git a/pywry/tests/test_tvchart.py b/pywry/tests/test_tvchart.py index fd4e2ee..e506d8a 100644 --- a/pywry/tests/test_tvchart.py +++ b/pywry/tests/test_tvchart.py @@ -1327,18 +1327,19 @@ def test_volume_pane_height_is_clamped_proportionally(self, tvchart_defaults_js: # Actually sets the height on the pane assert "setHeight(desiredHeight)" in body - def test_volume_options_suppress_value_label(self, tvchart_defaults_js: str): - """The volume series builder must hide the value label and price line - so they don't overlap with the main series axis labels.""" + def test_volume_options(self, tvchart_defaults_js: str): + """Volume series uses the right-side price scale of its own pane, + keeps the latest-value label visible, and suppresses the price line.""" body = self._fn(tvchart_defaults_js, "_tvBuildVolumeOptions") - assert "lastValueVisible: false" in body, ( - "Volume must hide lastValueVisible to avoid axis label overlap" + assert "lastValueVisible: true" in body, ( + "Volume needs the latest-value label so the right axis renders ticks" ) assert "priceLineVisible: false" in body, ( - "Volume must hide priceLineVisible to avoid axis label overlap" + "Volume must hide priceLineVisible to avoid horizontal-line clutter" ) - # Volume gets its own price scale - assert "priceScaleId: 'volume'" in body + # Volume series binds to the standard 'right' price scale of its + # own pane (visible by default), not a hidden custom 'volume' scale. + assert "priceScaleId: 'right'" in body def test_volume_auto_enables_in_create(self, tvchart_defaults_js: str): """PYWRY_TVCHART_CREATE enables volume by default when enableVolume is @@ -2447,6 +2448,368 @@ def test_resolution_defaults_to_1d(self): assert sig.parameters["resolution"].default == "1D" +# ============================================================================= +# Indicator catalog + compute + recompute coverage +# ============================================================================= + + +class TestTVChartIndicatorCatalog: + """Every indicator advertised by the catalog must have: + + * a compute function present in the bundled JS, + * an add-indicator branch that creates its series, and + * a recompute branch in ``_tvRecomputeIndicatorSeries`` so it refreshes + when underlying bars change (otherwise indicators silently freeze at + their initial snapshot when the datafeed replaces bars — exactly the + bug that made VWAP show 9.99 on a $270 stock). + """ + + @pytest.fixture + def js(self) -> str: + from pywry.assets import get_tvchart_defaults_js + + return get_tvchart_defaults_js() + + # ------------------------------------------------------------------ + # Catalog entries + # ------------------------------------------------------------------ + + EXPECTED_CATALOG_NAMES = ( + "Moving Average", + "Ichimoku Cloud", + "Bollinger Bands", + "Keltner Channels", + "ATR", + "Historical Volatility", + "Parabolic SAR", + "RSI", + "MACD", + "Stochastic", + "Williams %R", + "CCI", + "ADX", + "Aroon", + "VWAP", + "Volume SMA", + "Accumulation/Distribution", + "Volume Profile Fixed Range", + "Volume Profile Visible Range", + ) + + @pytest.mark.parametrize("name", EXPECTED_CATALOG_NAMES) + def test_catalog_contains_indicator(self, js: str, name: str) -> None: + cat_start = js.index("_INDICATOR_CATALOG = [") + cat_end = js.index("];", cat_start) + catalog_src = js[cat_start:cat_end] + assert f"name: '{name}'" in catalog_src, ( + f"Indicator catalog missing entry for '{name}'" + ) + + def test_volume_profile_entries_are_primitive(self, js: str) -> None: + cat_start = js.index("_INDICATOR_CATALOG = [") + cat_end = js.index("];", cat_start) + catalog_src = js[cat_start:cat_end] + for key in ("'volume-profile-fixed'", "'volume-profile-visible'"): + block = catalog_src[catalog_src.index(key):] + first_close = block.index("}") + entry = block[:first_close] + assert "primitive: true" in entry, ( + f"Expected VP entry {key} to have primitive: true" + ) + + # ------------------------------------------------------------------ + # Compute functions + # ------------------------------------------------------------------ + + EXPECTED_COMPUTE_FNS = ( + "_computeSMA", + "_computeEMA", + "_computeWMA", + "_computeHMA", + "_computeVWMA", + "_computeRSI", + "_computeATR", + "_computeBollingerBands", + "_computeKeltnerChannels", + "_computeVWAP", + "_computeMACD", + "_computeStochastic", + "_computeAroon", + "_computeADX", + "_computeCCI", + "_computeWilliamsR", + "_computeAccumulationDistribution", + "_computeHistoricalVolatility", + "_computeIchimoku", + "_computeParabolicSAR", + ) + + @pytest.mark.parametrize("fn_name", EXPECTED_COMPUTE_FNS) + def test_compute_function_defined(self, js: str, fn_name: str) -> None: + assert f"function {fn_name}(" in js, ( + f"Missing compute function {fn_name} in bundled JS" + ) + + # ------------------------------------------------------------------ + # Add-indicator branches + # ------------------------------------------------------------------ + + ADD_BRANCHES = ( + ("name === 'VWAP'", "_computeVWAP"), + ("name === 'MACD'", "_computeMACD"), + ("name === 'Stochastic'", "_computeStochastic"), + ("name === 'Aroon'", "_computeAroon"), + ("name === 'ADX'", "_computeADX"), + ("name === 'CCI'", "_computeCCI"), + ("name === 'Williams %R'", "_computeWilliamsR"), + ("name === 'Accumulation/Distribution'", "_computeAccumulationDistribution"), + ("name === 'Historical Volatility'", "_computeHistoricalVolatility"), + ("name === 'Keltner Channels'", "_computeKeltnerChannels"), + ("name === 'Ichimoku Cloud'", "_computeIchimoku"), + ("name === 'Parabolic SAR'", "_computeParabolicSAR"), + ) + + @pytest.mark.parametrize("branch,fn", ADD_BRANCHES) + def test_add_branch_wires_compute(self, js: str, branch: str, fn: str) -> None: + assert branch in js, f"Missing add-indicator branch '{branch}' in 04-series.js" + # Narrow the search: compute call must appear after the branch and + # before the next `} else if (name ===` marker. + branch_idx = js.index(branch) + next_branch = js.find("} else if (name ===", branch_idx + 1) + if next_branch < 0: + next_branch = js.find("_tvAddIndicator fallthrough", branch_idx + 1) + segment = js[branch_idx : next_branch if next_branch > 0 else branch_idx + 2000] + assert fn in segment, ( + f"Branch for '{branch}' should call {fn}() but didn't within 2000 chars" + ) + + # ------------------------------------------------------------------ + # Recompute branches (THIS is the bug that caused VWAP=9.99) + # ------------------------------------------------------------------ + + @pytest.fixture + def recompute_body(self, js: str) -> str: + start = js.index("function _tvRecomputeIndicatorSeries(") + # Find matching close brace for the function + depth = 0 + i = js.index("{", start) + n = len(js) + while i < n: + ch = js[i] + if ch == "{": + depth += 1 + elif ch == "}": + depth -= 1 + if depth == 0: + return js[start : i + 1] + i += 1 + raise RuntimeError("Could not find end of _tvRecomputeIndicatorSeries") + + RECOMPUTE_BRANCHES = ( + ("info.name === 'VWAP'", "_computeVWAP"), + ("info.name === 'CCI'", "_computeCCI"), + ("info.name === 'Williams %R'", "_computeWilliamsR"), + ("info.name === 'Accumulation/Distribution'", "_computeAccumulationDistribution"), + ("info.name === 'Historical Volatility'", "_computeHistoricalVolatility"), + ("type === 'parabolic-sar'", "_computeParabolicSAR"), + ("type === 'macd'", "_computeMACD"), + ("type === 'stochastic'", "_computeStochastic"), + ("type === 'aroon'", "_computeAroon"), + ("type === 'adx'", "_computeADX"), + ("type === 'keltner-channels'", "_computeKeltnerChannels"), + ("type === 'ichimoku'", "_computeIchimoku"), + ) + + @pytest.mark.parametrize("branch,fn", RECOMPUTE_BRANCHES) + def test_recompute_branch_refreshes_series( + self, recompute_body: str, branch: str, fn: str + ) -> None: + assert branch in recompute_body, ( + f"_tvRecomputeIndicatorSeries missing branch for {branch!r}. " + "Without this branch, the indicator won't refresh when bars " + "change (e.g., via datafeed scrollback or interval switch) " + "and will stay frozen at its initial snapshot." + ) + idx = recompute_body.index(branch) + tail = recompute_body[idx : idx + 2500] + assert fn in tail, ( + f"Recompute branch {branch!r} found but never calls {fn}() " + "within the following 2500 chars — did the branch get broken?" + ) + + def test_recompute_branch_for_volume_profile(self, recompute_body: str) -> None: + """Visible-range volume profiles must recompute when the bar set + changes — otherwise scrolling into new data leaves their right-pinned + rows reflecting the old range.""" + assert "type === 'volume-profile-visible'" in recompute_body + assert "_tvRefreshVisibleVolumeProfiles" in recompute_body + + +# ============================================================================= +# Volume Profile compute contract +# ============================================================================= + + +class TestTVChartVolumeProfile: + """Tests for _tvComputeVolumeProfile — the pure function behind VPVR.""" + + @pytest.fixture + def js(self) -> str: + from pywry.assets import get_tvchart_defaults_js + + return get_tvchart_defaults_js() + + def test_vp_compute_function_signature(self, js: str) -> None: + assert "function _tvComputeVolumeProfile(bars, fromIdx, toIdx, opts)" in js + + def test_vp_result_returns_profile_and_metadata(self, js: str) -> None: + fn_start = js.index("function _tvComputeVolumeProfile(") + fn_end = js.index("\nfunction ", fn_start + 1) + body = js[fn_start:fn_end] + for key in ("profile", "minPrice", "maxPrice", "step", "totalVolume"): + assert key in body, f"VP compute result missing expected field '{key}'" + + def test_vp_splits_up_down_volume(self, js: str) -> None: + fn_start = js.index("function _tvComputeVolumeProfile(") + fn_end = js.index("\nfunction ", fn_start + 1) + body = js[fn_start:fn_end] + # Up/down split is what differentiates VPVR from a flat histogram. + assert "upVol" in body and "downVol" in body, ( + "VP compute must split each row into up vs down volume" + ) + + def test_vp_exposes_poc_value_area_helper(self, js: str) -> None: + """A separate helper derives POC and Value Area from the computed profile.""" + assert "function _tvComputePOCAndValueArea(" in js + fn_start = js.index("function _tvComputePOCAndValueArea(") + fn_end = js.index("\nfunction ", fn_start + 1) + body = js[fn_start:fn_end] + for key in ("pocIdx", "vaLowIdx", "vaHighIdx"): + assert key in body, ( + f"POC/VA helper must expose '{key}' so renderer can draw lines" + ) + + def test_vp_refresh_visible_exposed(self, js: str) -> None: + """Visible-range refresh must exist for the recompute path to call it.""" + assert "function _tvRefreshVisibleVolumeProfiles(chartId)" in js + + +# ============================================================================= +# Legend volume removal actually destroys the series + pane +# ============================================================================= + + +class TestTVChartLegendVolumeRemoval: + """Removing volume from the legend must actually remove it from the chart + (issue: previously, clicking Remove only set a legend dataset flag but + left the histogram series and its pane on the chart).""" + + @pytest.fixture + def js(self) -> str: + from pywry.assets import get_tvchart_defaults_js + + return get_tvchart_defaults_js() + + def _fn_or_nested(self, js: str, name: str) -> str: + """Extract a function body — works for nested ``function X()`` too.""" + idx = js.index(f"function {name}(") + depth = 0 + i = js.index("{", idx) + n = len(js) + while i < n: + ch = js[i] + if ch == "{": + depth += 1 + elif ch == "}": + depth -= 1 + if depth == 0: + return js[idx : i + 1] + i += 1 + raise RuntimeError(f"Could not find end of {name}") + + def test_disable_volume_removes_series(self, js: str) -> None: + body = self._fn_or_nested(js, "_legendDisableVolume") + assert "entry.chart.removeSeries(volSeries)" in body, ( + "Remove-volume must actually call chart.removeSeries" + ) + assert "delete entry.volumeMap.main" in body, ( + "Remove-volume must clear the volumeMap entry" + ) + + def test_disable_volume_removes_pane(self, js: str) -> None: + body = self._fn_or_nested(js, "_legendDisableVolume") + assert "chart.removePane(removedPane)" in body, ( + "Remove-volume must collapse the now-empty pane, not leave dead space" + ) + + def test_disable_volume_reindexes_panes(self, js: str) -> None: + body = self._fn_or_nested(js, "_legendDisableVolume") + # When pane N is removed, LWC reindexes panes > N down by 1. We must + # mirror that for our bookkeeping on _activeIndicators and _volumePaneBySeries. + assert ".paneIndex -= 1" in body + assert "_volumePaneBySeries" in body + + def test_enable_volume_rebuilds_series(self, js: str) -> None: + body = self._fn_or_nested(js, "_legendEnableVolume") + assert "_tvAddSeriesCompat(entry.chart, 'Histogram'" in body, ( + "Restore-volume must rebuild the histogram series via the same " + "path used for initial creation" + ) + assert "_tvExtractVolumeFromBars" in body, ( + "Restore-volume must re-extract volume from the stored raw bars" + ) + + +# ============================================================================= +# Theme CSS variables — every new VP / indicator color var is defined +# ============================================================================= + + +class TestTVChartThemeVariables: + """The tvchart.css stylesheet must define every CSS variable that the + frontend JS consumes, in both dark and light themes (otherwise colors + silently fall back to whatever the browser decides).""" + + @pytest.fixture + def css(self) -> str: + from pathlib import Path + + return ( + Path(__file__).parents[1] + / "pywry" + / "frontend" + / "style" + / "tvchart.css" + ).read_text(encoding="utf-8") + + VP_VARS = ( + "--pywry-tvchart-vp-up", + "--pywry-tvchart-vp-down", + "--pywry-tvchart-vp-va-up", + "--pywry-tvchart-vp-va-down", + "--pywry-tvchart-vp-poc", + ) + + INDICATOR_PALETTE_VARS = ( + "--pywry-tvchart-ind-primary", + "--pywry-tvchart-ind-secondary", + "--pywry-tvchart-ind-tertiary", + "--pywry-tvchart-ind-positive", + "--pywry-tvchart-ind-negative", + "--pywry-tvchart-ind-positive-dim", + "--pywry-tvchart-ind-negative-dim", + ) + + @pytest.mark.parametrize("var", VP_VARS + INDICATOR_PALETTE_VARS) + def test_var_defined_at_least_twice(self, css: str, var: str) -> None: + """Each var must appear in both the dark (root) and light theme blocks.""" + count = css.count(var + ":") + assert count >= 2, ( + f"CSS var {var} defined only {count} time(s); expected at least 2 " + "(one for dark theme, one for light)." + ) + + # ============================================================================= # MCP tool definition tests # ============================================================================= From 39d45f0e07aed82aa3ae623f4a97e407c3d8f502 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Mon, 20 Apr 2026 12:31:04 -0700 Subject: [PATCH 56/68] ruff format --- pywry/tests/test_tvchart.py | 28 +++++++--------------------- 1 file changed, 7 insertions(+), 21 deletions(-) diff --git a/pywry/tests/test_tvchart.py b/pywry/tests/test_tvchart.py index e506d8a..968a4d5 100644 --- a/pywry/tests/test_tvchart.py +++ b/pywry/tests/test_tvchart.py @@ -2501,21 +2501,17 @@ def test_catalog_contains_indicator(self, js: str, name: str) -> None: cat_start = js.index("_INDICATOR_CATALOG = [") cat_end = js.index("];", cat_start) catalog_src = js[cat_start:cat_end] - assert f"name: '{name}'" in catalog_src, ( - f"Indicator catalog missing entry for '{name}'" - ) + assert f"name: '{name}'" in catalog_src, f"Indicator catalog missing entry for '{name}'" def test_volume_profile_entries_are_primitive(self, js: str) -> None: cat_start = js.index("_INDICATOR_CATALOG = [") cat_end = js.index("];", cat_start) catalog_src = js[cat_start:cat_end] for key in ("'volume-profile-fixed'", "'volume-profile-visible'"): - block = catalog_src[catalog_src.index(key):] + block = catalog_src[catalog_src.index(key) :] first_close = block.index("}") entry = block[:first_close] - assert "primitive: true" in entry, ( - f"Expected VP entry {key} to have primitive: true" - ) + assert "primitive: true" in entry, f"Expected VP entry {key} to have primitive: true" # ------------------------------------------------------------------ # Compute functions @@ -2546,9 +2542,7 @@ def test_volume_profile_entries_are_primitive(self, js: str) -> None: @pytest.mark.parametrize("fn_name", EXPECTED_COMPUTE_FNS) def test_compute_function_defined(self, js: str, fn_name: str) -> None: - assert f"function {fn_name}(" in js, ( - f"Missing compute function {fn_name} in bundled JS" - ) + assert f"function {fn_name}(" in js, f"Missing compute function {fn_name} in bundled JS" # ------------------------------------------------------------------ # Add-indicator branches @@ -2685,9 +2679,7 @@ def test_vp_exposes_poc_value_area_helper(self, js: str) -> None: fn_end = js.index("\nfunction ", fn_start + 1) body = js[fn_start:fn_end] for key in ("pocIdx", "vaLowIdx", "vaHighIdx"): - assert key in body, ( - f"POC/VA helper must expose '{key}' so renderer can draw lines" - ) + assert key in body, f"POC/VA helper must expose '{key}' so renderer can draw lines" def test_vp_refresh_visible_exposed(self, js: str) -> None: """Visible-range refresh must exist for the recompute path to call it.""" @@ -2732,9 +2724,7 @@ def test_disable_volume_removes_series(self, js: str) -> None: assert "entry.chart.removeSeries(volSeries)" in body, ( "Remove-volume must actually call chart.removeSeries" ) - assert "delete entry.volumeMap.main" in body, ( - "Remove-volume must clear the volumeMap entry" - ) + assert "delete entry.volumeMap.main" in body, "Remove-volume must clear the volumeMap entry" def test_disable_volume_removes_pane(self, js: str) -> None: body = self._fn_or_nested(js, "_legendDisableVolume") @@ -2775,11 +2765,7 @@ def css(self) -> str: from pathlib import Path return ( - Path(__file__).parents[1] - / "pywry" - / "frontend" - / "style" - / "tvchart.css" + Path(__file__).parents[1] / "pywry" / "frontend" / "style" / "tvchart.css" ).read_text(encoding="utf-8") VP_VARS = ( From 41275af4e4cafbf304957c27d202712da5319856 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Mon, 20 Apr 2026 12:46:40 -0700 Subject: [PATCH 57/68] tvchart: drop legacy SMA/EMA indicator names, use Moving Average everywhere The SMA/EMA/WMA catalog entries were removed in the MA unification; the recompute path still had a dead baseName branch for them, and the e2e / unit tests + docs still called add_builtin_indicator("SMA", ...). Update tests and docstrings to add indicators as Moving Average with method="SMA" | "EMA" | "WMA" | "HMA" | "VWMA", matching how the indicator panel UI actually lets users add them. Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/docs/docs/reference/events/tvchart.md | 2 +- pywry/pywry/frontend/src/tvchart/04-series.js | 7 --- pywry/pywry/tvchart/mixin.py | 17 +++--- pywry/tests/test_tvchart.py | 9 ++-- pywry/tests/test_tvchart_e2e.py | 52 +++++++++++++------ 5 files changed, 54 insertions(+), 33 deletions(-) diff --git a/pywry/docs/docs/reference/events/tvchart.md b/pywry/docs/docs/reference/events/tvchart.md index 42269b1..2935281 100644 --- a/pywry/docs/docs/reference/events/tvchart.md +++ b/pywry/docs/docs/reference/events/tvchart.md @@ -97,7 +97,7 @@ fill primitive. ```python # SMA(50) overlay using the charting engine's own computation -app.add_builtin_indicator("SMA", period=50, color="#2196F3") +app.add_builtin_indicator("Moving Average", period=50, method="SMA", color="#2196F3") # Bollinger Bands (creates three series: upper, middle, lower) app.add_builtin_indicator("Bollinger Bands", period=20, multiplier=2) diff --git a/pywry/pywry/frontend/src/tvchart/04-series.js b/pywry/pywry/frontend/src/tvchart/04-series.js index 6bc9b16..a080f66 100644 --- a/pywry/pywry/frontend/src/tvchart/04-series.js +++ b/pywry/pywry/frontend/src/tvchart/04-series.js @@ -159,13 +159,6 @@ function _tvRecomputeIndicatorSeries(chartId, seriesId, recomputedGroups) { return; } - if (baseName === 'SMA' || baseName === 'EMA' || baseName === 'WMA') { - var fn2 = baseName === 'SMA' ? _computeSMA : baseName === 'EMA' ? _computeEMA : _computeWMA; - var s2 = entry.seriesMap[seriesId]; - if (s2) s2.setData(fn2(rawData, period).filter(function(v) { return v.value !== undefined; })); - return; - } - if (info.group && type === 'bollinger-bands') { if (recomputedGroups && recomputedGroups[info.group]) return; if (recomputedGroups) recomputedGroups[info.group] = true; diff --git a/pywry/pywry/tvchart/mixin.py b/pywry/pywry/tvchart/mixin.py index f7c0937..9e6e85f 100644 --- a/pywry/pywry/tvchart/mixin.py +++ b/pywry/pywry/tvchart/mixin.py @@ -247,14 +247,18 @@ def add_builtin_indicator( subplot panes, and Bollinger Bands band-fill rendering. Available indicators (by name): - SMA, EMA, WMA, SMA (50), SMA (200), EMA (12), EMA (26), - RSI, ATR, VWAP, Volume SMA, Bollinger Bands, - Volume Profile Fixed Range, Volume Profile Visible Range + Moving Average (pick SMA / EMA / WMA / HMA / VWMA via + ``method``), Ichimoku Cloud, Bollinger Bands, Keltner + Channels, ATR, Historical Volatility, Parabolic SAR, RSI, + MACD, Stochastic, Williams %R, CCI, ADX, Aroon, VWAP, + Volume SMA, Accumulation/Distribution, Volume Profile + Fixed Range, Volume Profile Visible Range. Parameters ---------- name : str - Indicator name from the catalog (e.g. ``"SMA"``, ``"RSI"``). + Indicator name from the catalog (e.g. ``"Moving Average"``, + ``"RSI"``, ``"MACD"``). period : int, optional Lookback period. Falls back to the catalog default. color : str, optional @@ -264,9 +268,10 @@ def add_builtin_indicator( ``"hl2"``, ``"hlc3"``, ``"ohlc4"``. method : str, optional Moving average method for the Moving Average indicator: - ``"SMA"``, ``"EMA"``, ``"WMA"``. + ``"SMA"``, ``"EMA"``, ``"WMA"``, ``"HMA"``, or ``"VWMA"``. multiplier : float, optional - Bollinger Bands standard-deviation multiplier (default 2). + Bollinger Bands / Keltner Channels standard-deviation (or + ATR) multiplier (default 2). ma_type : str, optional Bollinger Bands moving-average type (default ``"SMA"``). offset : int, optional diff --git a/pywry/tests/test_tvchart.py b/pywry/tests/test_tvchart.py index 968a4d5..86f6493 100644 --- a/pywry/tests/test_tvchart.py +++ b/pywry/tests/test_tvchart.py @@ -1830,10 +1830,11 @@ def test_add_builtin_indicator_minimal(self): def test_add_builtin_indicator_with_period_and_color(self): m = _MockEmitter() - m.add_builtin_indicator("SMA", period=50, color="#2196F3") + m.add_builtin_indicator("Moving Average", period=50, color="#2196F3", method="SMA") event, payload = m._emitted[0] assert event == "tvchart:add-indicator" - assert payload["name"] == "SMA" + assert payload["name"] == "Moving Average" + assert payload["method"] == "SMA" assert payload["period"] == 50 assert payload["color"] == "#2196F3" @@ -1856,14 +1857,14 @@ def test_add_builtin_indicator_passes_bollinger_options(self): def test_add_builtin_indicator_omits_unset_options(self): m = _MockEmitter() - m.add_builtin_indicator("EMA", period=12) + m.add_builtin_indicator("RSI", period=12) _event, payload = m._emitted[0] # Only the explicit fields land in the payload assert set(payload.keys()) == {"name", "period"} def test_add_builtin_indicator_chart_id(self): m = _MockEmitter() - m.add_builtin_indicator("SMA", period=10, chart_id="alt") + m.add_builtin_indicator("Moving Average", period=10, method="SMA", chart_id="alt") _event, payload = m._emitted[0] assert payload["chartId"] == "alt" diff --git a/pywry/tests/test_tvchart_e2e.py b/pywry/tests/test_tvchart_e2e.py index 2efc2ed..0247379 100644 --- a/pywry/tests/test_tvchart_e2e.py +++ b/pywry/tests/test_tvchart_e2e.py @@ -379,31 +379,37 @@ def test_07_chart_type_cycle_all(self, chart: dict[str, Any]) -> None: # ------------------------------------------------------------------ def test_08_add_sma_20(self, chart: dict[str, Any]) -> None: - """Add SMA overlay -- series count increases, metadata correct.""" + """Add an SMA(20) overlay via the unified Moving Average entry.""" r = _js( chart["label"], "(function() {" + _cid() + "var before = Object.keys(entry.seriesMap).length;" "_tvAddIndicator(" - " {name: 'SMA', key: 'sma', fullName: 'SMA'," - " category: 'Moving Averages', defaultPeriod: 20}," + " {name: 'Moving Average', key: 'moving-average-ex'," + " fullName: 'Moving Average', category: 'Moving Averages'," + " defaultPeriod: 20, _method: 'SMA'}," " cid" ");" "var after = Object.keys(entry.seriesMap).length;" "var indKey = Object.keys(_activeIndicators).filter(" - " function(k) { return _activeIndicators[k].name === 'SMA'; }" + " function(k) {" + " var ai = _activeIndicators[k];" + " return ai.type === 'moving-average-ex' && ai.method === 'SMA';" + " }" ")[0];" "var info = indKey ? _activeIndicators[indKey] : null;" "pywry.result({" " before: before, after: after," " name: info ? info.name : null," + " method: info ? info.method : null," " period: info ? info.period : null," " isSubplot: info ? !!info.isSubplot : null," " seriesId: indKey || null," "});" "})();", ) - assert r["after"] > r["before"], "SMA should add a new series" - assert r["name"] == "SMA" + assert r["after"] > r["before"], "Moving Average should add a new series" + assert r["name"] == "Moving Average" + assert r["method"] == "SMA" assert r["period"] == 20 assert r["isSubplot"] is False @@ -412,7 +418,10 @@ def test_09_sma_has_computed_data(self, chart: dict[str, Any]) -> None: r = _js( chart["label"], "(function() {" + _cid() + "var indKey = Object.keys(_activeIndicators).filter(" - " function(k) { return _activeIndicators[k].name === 'SMA'; }" + " function(k) {" + " var ai = _activeIndicators[k];" + " return ai.type === 'moving-average-ex' && ai.method === 'SMA';" + " }" ")[0];" "var series = indKey ? entry.seriesMap[indKey] : null;" "var data = [];" @@ -434,7 +443,10 @@ def test_10_change_sma_period_to_50(self, chart: dict[str, Any]) -> None: r = _js( chart["label"], "(function() {" + _cid() + "var indKey = Object.keys(_activeIndicators).filter(" - " function(k) { return _activeIndicators[k].name === 'SMA'; }" + " function(k) {" + " var ai = _activeIndicators[k];" + " return ai.type === 'moving-average-ex' && ai.method === 'SMA';" + " }" ")[0];" "_tvApplyIndicatorSettings(indKey, {period: 50});" "var info = _activeIndicators[indKey];" @@ -447,7 +459,10 @@ def test_11_change_sma_color(self, chart: dict[str, Any]) -> None: r = _js( chart["label"], "(function() {" + _cid() + "var indKey = Object.keys(_activeIndicators).filter(" - " function(k) { return _activeIndicators[k].name === 'SMA'; }" + " function(k) {" + " var ai = _activeIndicators[k];" + " return ai.type === 'moving-average-ex' && ai.method === 'SMA';" + " }" ")[0];" "_tvApplyIndicatorSettings(indKey, {color: '#ff6600'});" "var info = _activeIndicators[indKey];" @@ -457,12 +472,13 @@ def test_11_change_sma_color(self, chart: dict[str, Any]) -> None: assert r["color"] == "#ff6600" def test_12_add_ema_overlay(self, chart: dict[str, Any]) -> None: - """Add EMA(12) -- now two overlay indicators active.""" + """Add an EMA(12) -- now two overlay indicators active.""" r = _js( chart["label"], "(function() {" + _cid() + "_tvAddIndicator(" - " {name: 'EMA', key: 'ema', fullName: 'EMA'," - " category: 'Moving Averages', defaultPeriod: 12}," + " {name: 'Moving Average', key: 'moving-average-ex'," + " fullName: 'Moving Average', category: 'Moving Averages'," + " defaultPeriod: 12, _method: 'EMA'}," " cid" ");" "var indKeys = Object.keys(_activeIndicators);" @@ -570,7 +586,7 @@ def test_16_add_bollinger_bands(self, chart: dict[str, Any]) -> None: assert any(c >= 3 for c in group_counts) def test_17_indicator_count_correct(self, chart: dict[str, Any]) -> None: - """SMA + EMA + RSI + BB(3) = at least 6 indicator series.""" + """MA(SMA) + MA(EMA) + RSI + BB(3) = at least 6 indicator series.""" r = _js( chart["label"], "(function() {pywry.result({count: Object.keys(_activeIndicators).length});})();", @@ -586,7 +602,10 @@ def test_18_sma_overlay_rsi_subplot(self, chart: dict[str, Any]) -> None: chart["label"], "(function() {" "var smaKey = Object.keys(_activeIndicators).filter(" - " function(k) { return _activeIndicators[k].name === 'SMA'; }" + " function(k) {" + " var ai = _activeIndicators[k];" + " return ai.type === 'moving-average-ex' && ai.method === 'SMA';" + " }" ")[0];" "var rsiKey = Object.keys(_activeIndicators).filter(" " function(k) { return _activeIndicators[k].name === 'RSI'; }" @@ -1106,7 +1125,10 @@ def test_46_remove_sma(self, chart: dict[str, Any]) -> None: "(function() {" "var before = Object.keys(_activeIndicators).length;" "var smaKey = Object.keys(_activeIndicators).filter(" - " function(k) { return _activeIndicators[k].name === 'SMA'; }" + " function(k) {" + " var ai = _activeIndicators[k];" + " return ai.type === 'moving-average-ex' && ai.method === 'SMA';" + " }" ")[0];" "if (smaKey) _tvRemoveIndicator(smaKey);" "var after = Object.keys(_activeIndicators).length;" From 13667e14f94ab467a214ab0cec0c05e8c637fc25 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Mon, 20 Apr 2026 12:47:43 -0700 Subject: [PATCH 58/68] tvchart: live preview + status-line toggles in indicator settings dialog MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Dialog previously only pushed edits on Ok — the user couldn't see their colour / period / line-width change until they dismissed the modal. Wire every row helper through a shared _livePreview() that calls _tvApplyIndicatorSettings on each edit, coalesced to rAF so a number-spinner drag paints once per frame. Also make the "Values in status line" and "Inputs in status line" checkboxes actually drive the legend rebuild — when off, drop the numeric-parameter suffix from the indicator label and skip appending the per-series value spans. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../09-indicators/09-legend-rebuild.js | 80 ++++++++++++------- .../09-indicators/10-settings-dialog.js | 35 ++++++-- 2 files changed, 80 insertions(+), 35 deletions(-) diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators/09-legend-rebuild.js b/pywry/pywry/frontend/src/tvchart/09-indicators/09-legend-rebuild.js index 777bd7d..4c12730 100644 --- a/pywry/pywry/frontend/src/tvchart/09-indicators/09-legend-rebuild.js +++ b/pywry/pywry/frontend/src/tvchart/09-indicators/09-legend-rebuild.js @@ -61,9 +61,26 @@ function _tvRebuildIndicatorLegend(chartId) { } else { baseName = (info.name || '').replace(/\s*\(\d+\)\s*$/, ''); } + // The `inputsInStatusLine` flag toggles the numeric parameter + // suffix — off → just the short name, on (default) → full + // TradingView-style string "BB 20 2 0 SMA". + var showInputs = info.inputsInStatusLine !== false; + var shortName; + if (info.group && info.type === 'bollinger-bands') shortName = 'BB'; + else if (info.group && info.type === 'macd') shortName = 'MACD'; + else if (info.group && info.type === 'stochastic') shortName = 'Stoch'; + else if (info.group && info.type === 'aroon') shortName = 'Aroon'; + else if (info.group && info.type === 'adx') shortName = 'ADX'; + else if (info.group && info.type === 'keltner-channels') shortName = 'KC'; + else if (info.group && info.type === 'ichimoku') shortName = 'Ichimoku'; + else if (info.type === 'volume-profile-fixed') shortName = 'VPFR'; + else if (info.type === 'volume-profile-visible') shortName = 'VPVR'; + else shortName = baseName; + var indLabel; - if (info.group && info.type === 'bollinger-bands') { - // TradingView format: "BB 20 2 0 SMA" + if (!showInputs) { + indLabel = shortName; + } else if (info.group && info.type === 'bollinger-bands') { indLabel = 'BB ' + (info.period || 20) + ' ' + (info.multiplier || 2) + ' ' + (info.offset || 0) + ' ' + (info.maType || 'SMA'); } else if (info.group && info.type === 'macd') { indLabel = 'MACD ' + (info.fast || 12) + ' ' + (info.slow || 26) + ' ' + (info.signal || 9); @@ -83,14 +100,12 @@ function _tvRebuildIndicatorLegend(chartId) { + (info.laggingPeriod || 26) + ' ' + (info.leadingShiftPeriod || 26); } else if (info.type === 'volume-profile-fixed' || info.type === 'volume-profile-visible') { - // TradingView VPVR format: "VPVR Number Of Rows 24 Up/Down 70" - var vpShort = info.type === 'volume-profile-visible' ? 'VPVR' : 'VPFR'; var rowsLabel = info.rowsLayout === 'ticks' ? 'Ticks Per Row' : 'Number Of Rows'; var volLabel = info.volumeMode === 'total' ? 'Total' : (info.volumeMode === 'delta' ? 'Delta' : 'Up/Down'); var vaPct = Math.round((info.valueAreaPct != null ? info.valueAreaPct : 0.70) * 100); - indLabel = vpShort + ' ' + rowsLabel + ' ' + (info.rowSize || info.period || 24) + indLabel = shortName + ' ' + rowsLabel + ' ' + (info.rowSize || info.period || 24) + ' ' + volLabel + ' ' + vaPct; } else { indLabel = baseName + (info.period ? ' ' + info.period : ''); @@ -113,33 +128,40 @@ function _tvRebuildIndicatorLegend(chartId) { } nameSp.textContent = indLabel; row.appendChild(nameSp); - // For grouped indicators (BB), add a value span per group member - if (info.group) { - var gKeys = Object.keys(_activeIndicators); - for (var gvi = 0; gvi < gKeys.length; gvi++) { - if (_activeIndicators[gKeys[gvi]].group === info.group) { - var gValSp = document.createElement('span'); - gValSp.className = 'tvchart-ind-val'; - gValSp.id = 'tvchart-ind-val-' + gKeys[gvi]; - gValSp.style.color = _activeIndicators[gKeys[gvi]].color; - row.appendChild(gValSp); + // The `valuesInStatusLine` flag toggles the live per-bar + // readout (crosshair values for normal indicators, running + // up/down/total for Volume Profile). When off we skip the + // span entirely so _tvUpdateIndicatorLegendValues silently + // no-ops its next lookup. + var showValues = info.valuesInStatusLine !== false; + if (showValues) { + if (info.group) { + var gKeys = Object.keys(_activeIndicators); + for (var gvi = 0; gvi < gKeys.length; gvi++) { + if (_activeIndicators[gKeys[gvi]].group === info.group) { + var gValSp = document.createElement('span'); + gValSp.className = 'tvchart-ind-val'; + gValSp.id = 'tvchart-ind-val-' + gKeys[gvi]; + gValSp.style.color = _activeIndicators[gKeys[gvi]].color; + row.appendChild(gValSp); + } } - } - } else { - var valSp = document.createElement('span'); - valSp.className = 'tvchart-ind-val'; - valSp.id = 'tvchart-ind-val-' + seriesId; - // Volume Profile: show running totals (up / down / total). - if (info.type === 'volume-profile-fixed' || info.type === 'volume-profile-visible') { - var vpSlotForLabel = _volumeProfilePrimitives[seriesId]; - if (vpSlotForLabel) { - var t = _tvVolumeProfileTotals(vpSlotForLabel.vpData); - valSp.textContent = _tvFormatVolume(t.up) + ' ' - + _tvFormatVolume(t.down) + ' ' - + _tvFormatVolume(t.total); + } else { + var valSp = document.createElement('span'); + valSp.className = 'tvchart-ind-val'; + valSp.id = 'tvchart-ind-val-' + seriesId; + // Volume Profile: show running totals (up / down / total). + if (info.type === 'volume-profile-fixed' || info.type === 'volume-profile-visible') { + var vpSlotForLabel = _volumeProfilePrimitives[seriesId]; + if (vpSlotForLabel) { + var t = _tvVolumeProfileTotals(vpSlotForLabel.vpData); + valSp.textContent = _tvFormatVolume(t.up) + ' ' + + _tvFormatVolume(t.down) + ' ' + + _tvFormatVolume(t.total); + } } + row.appendChild(valSp); } - row.appendChild(valSp); } var ctrl = document.createElement('span'); ctrl.className = 'tvchart-legend-row-actions tvchart-ind-ctrl'; diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators/10-settings-dialog.js b/pywry/pywry/frontend/src/tvchart/09-indicators/10-settings-dialog.js index 06e1a79..c9ebd0b 100644 --- a/pywry/pywry/frontend/src/tvchart/09-indicators/10-settings-dialog.js +++ b/pywry/pywry/frontend/src/tvchart/09-indicators/10-settings-dialog.js @@ -233,6 +233,24 @@ function _tvShowIndicatorSettings(seriesId) { // Snapshot the original draft so "Reset Settings" restores the // values the dialog opened with. var _draftSnapshot = JSON.parse(JSON.stringify(draft)); + + // Live preview: push every draft edit straight to the chart so the + // user sees their change the moment they make it. Apply is cheap + // (single setData + applyOptions), so debounce is unnecessary — but + // coalesce with rAF so a burst of number-spinner ticks still render + // as one frame. + var _livePreviewScheduled = false; + function _livePreview() { + if (_livePreviewScheduled) return; + _livePreviewScheduled = true; + var schedule = typeof requestAnimationFrame === 'function' + ? requestAnimationFrame + : function(cb) { return setTimeout(cb, 0); }; + schedule(function() { + _livePreviewScheduled = false; + try { _tvApplyIndicatorSettings(seriesId, draft); } catch (_e) {} + }); + } var defaultsWrap = document.createElement('div'); defaultsWrap.style.cssText = 'position:relative;margin-right:auto;'; var defaultsBtn = document.createElement('button'); @@ -311,6 +329,7 @@ function _tvShowIndicatorSettings(seriesId) { swatch.dataset.opacity = String(newOpacity); swatch.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); onChange(newColor, newOpacity); + _livePreview(); } ); }); @@ -325,7 +344,7 @@ function _tvShowIndicatorSettings(seriesId) { var opt = document.createElement('option'); opt.value = o.v; opt.textContent = o.l; if (String(o.v) === String(val)) opt.selected = true; sel.appendChild(opt); }); - sel.addEventListener('change', function() { onChange(sel.value); }); + sel.addEventListener('change', function() { onChange(sel.value); _livePreview(); }); row.appendChild(sel); parent.appendChild(row); } function addNumberRow(parent, label, min, max, step, val, onChange) { @@ -335,7 +354,10 @@ function _tvShowIndicatorSettings(seriesId) { var inp = document.createElement('input'); inp.type = 'number'; inp.className = 'ts-input'; inp.min = min; inp.max = max; inp.step = step; inp.value = val; inp.addEventListener('keydown', function(e) { e.stopPropagation(); }); - inp.addEventListener('input', function() { var v = parseFloat(inp.value); if (!isNaN(v) && v >= parseFloat(min)) onChange(v); }); + inp.addEventListener('input', function() { + var v = parseFloat(inp.value); + if (!isNaN(v) && v >= parseFloat(min)) { onChange(v); _livePreview(); } + }); row.appendChild(inp); parent.appendChild(row); } function addCheckRow(parent, label, val, onChange) { @@ -344,7 +366,7 @@ function _tvShowIndicatorSettings(seriesId) { var lbl = document.createElement('label'); lbl.textContent = label; row.appendChild(lbl); var cb = document.createElement('input'); cb.type = 'checkbox'; cb.className = 'ts-checkbox'; cb.checked = !!val; - cb.addEventListener('change', function() { onChange(cb.checked); }); + cb.addEventListener('change', function() { onChange(cb.checked); _livePreview(); }); row.appendChild(cb); parent.appendChild(row); } @@ -355,7 +377,7 @@ function _tvShowIndicatorSettings(seriesId) { row.style.cssText = 'display:flex;align-items:center;gap:8px;'; var cb = document.createElement('input'); cb.type = 'checkbox'; cb.className = 'ts-checkbox'; cb.checked = plotDraft.visible !== false; - cb.addEventListener('change', function() { plotDraft.visible = cb.checked; }); + cb.addEventListener('change', function() { plotDraft.visible = cb.checked; _livePreview(); }); row.appendChild(cb); var lbl = document.createElement('label'); lbl.textContent = label; lbl.style.flex = '1'; row.appendChild(lbl); var swatch = document.createElement('div'); swatch.className = 'ts-swatch'; @@ -374,6 +396,7 @@ function _tvShowIndicatorSettings(seriesId) { swatch.dataset.opacity = String(newOpacity); swatch.style.background = _tvColorWithOpacity(newColor, newOpacity, newColor); plotDraft.color = _tvColorWithOpacity(newColor, newOpacity, newColor); + _livePreview(); } ); }); @@ -383,7 +406,7 @@ function _tvShowIndicatorSettings(seriesId) { var opt = document.createElement('option'); opt.value = o.v; opt.textContent = o.l; if (Number(o.v) === Number(plotDraft.lineWidth)) opt.selected = true; wSel.appendChild(opt); }); - wSel.addEventListener('change', function() { plotDraft.lineWidth = Number(wSel.value); }); + wSel.addEventListener('change', function() { plotDraft.lineWidth = Number(wSel.value); _livePreview(); }); row.appendChild(wSel); // Line style selector var lsSel = document.createElement('select'); lsSel.className = 'ts-select'; lsSel.style.width = '80px'; @@ -391,7 +414,7 @@ function _tvShowIndicatorSettings(seriesId) { var opt = document.createElement('option'); opt.value = o.v; opt.textContent = o.l; if (Number(o.v) === Number(plotDraft.lineStyle || 0)) opt.selected = true; lsSel.appendChild(opt); }); - lsSel.addEventListener('change', function() { plotDraft.lineStyle = Number(lsSel.value); }); + lsSel.addEventListener('change', function() { plotDraft.lineStyle = Number(lsSel.value); _livePreview(); }); row.appendChild(lsSel); parent.appendChild(row); } From 356632aa999d8e4af6891b9961e32fd7f6af716c Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Mon, 20 Apr 2026 12:47:56 -0700 Subject: [PATCH 59/68] tvchart: preserve indicators + compare overlays across symbol change MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Symbol changes used to wipe indicators and compare overlays; an SMA(20) on AAPL is still an SMA(20) on MSFT — the user shouldn't need to re-add it after switching tickers. The restore loop also only forwarded five config fields so MACD lengths, Ichimoku lines, VP range + layout, status-line toggles, and every other tunable got reset to defaults on interval change. Carry every info.* field through as indicatorDef._*, clean up stale _activeIndicators / _volumeProfilePrimitives entries before destroy so the re-add doesn't duplicate rows in the legend, and skip extra group members during re-add since _tvAddIndicator materialises them itself. Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/pywry/frontend/src/tvchart/10-events.js | 120 ++++++++++++++---- 1 file changed, 98 insertions(+), 22 deletions(-) diff --git a/pywry/pywry/frontend/src/tvchart/10-events.js b/pywry/pywry/frontend/src/tvchart/10-events.js index 43266c4..89c883b 100644 --- a/pywry/pywry/frontend/src/tvchart/10-events.js +++ b/pywry/pywry/frontend/src/tvchart/10-events.js @@ -163,15 +163,30 @@ } if (effectiveSymbol) newPayload.title = effectiveSymbol; - // Symbol change wipes prior compares/indicators — they - // belong to the old ticker, not the new one. Interval- - // only change preserves them (handled by the saved vars - // below). - if (symbolChanged) { - savedCompareSymbols = null; - savedCompareLabels = null; - savedCompareSymbolInfo = null; - savedIndicators = []; + // Indicators + compare overlays survive across both + // interval and symbol changes. An SMA(20) on AAPL is + // still an SMA(20) on MSFT; the new chart should pick + // up the same indicators with the new ticker's bars. + // Purge the old _activeIndicators entries so the + // post-recreate re-add starts with a clean slate — + // otherwise the legend rebuild iterates both the + // dead (chartless) entries and the freshly-added + // ones and duplicates every row. + var wipeKeys = Object.keys(_activeIndicators); + for (var wi = 0; wi < wipeKeys.length; wi++) { + if (_activeIndicators[wipeKeys[wi]] && _activeIndicators[wipeKeys[wi]].chartId === cid) { + delete _activeIndicators[wipeKeys[wi]]; + } + } + // Same cleanup for VP primitives — the old chart's + // primitive references are about to become unreachable. + if (typeof _volumeProfilePrimitives === 'object') { + var vpKeys = Object.keys(_volumeProfilePrimitives); + for (var vpi = 0; vpi < vpKeys.length; vpi++) { + if (_volumeProfilePrimitives[vpKeys[vpi]] && _volumeProfilePrimitives[vpKeys[vpi]].chartId === cid) { + delete _volumeProfilePrimitives[vpKeys[vpi]]; + } + } } // Destroy then recreate window.PYWRY_TVCHART_DESTROY(cid); @@ -314,24 +329,85 @@ // Re-add indicators after a short delay to allow main // series data to be set (indicators compute from raw // bar data). Tracked so data-settled waits for it. + // Grouped indicators (BB, MACD, Stochastic, etc.) add + // multiple series sharing the same ``group`` id — only + // re-add the FIRST member per group, `_tvAddIndicator` + // materialises the rest. if (savedIndicators.length > 0) { var _indDone = _track(); setTimeout(function() { var reEntry = window.__PYWRY_TVCHARTS__[cid]; - if (reEntry) { - for (var si = 0; si < savedIndicators.length; si++) { - var ind = savedIndicators[si]; - _tvAddIndicator({ - name: ind.name, - key: ind.type, - defaultPeriod: ind.period, - _color: ind.color, - _source: ind.source, - _method: ind.method, - _multiplier: ind.multiplier, - requiresSecondary: !!ind.secondarySeriesId, - }, cid); + if (!reEntry) { _indDone(); return; } + var seenGroups = {}; + for (var si = 0; si < savedIndicators.length; si++) { + var ind = savedIndicators[si]; + if (ind.group) { + if (seenGroups[ind.group]) continue; + seenGroups[ind.group] = true; } + // Every tunable info.* field is re-marshalled as + // indicatorDef._* so _tvAddIndicator reconstructs + // the indicator at the user's settings — period, + // method, MACD lengths, Ichimoku lines, VP range + // + layout, status-line toggles, etc. + _tvAddIndicator({ + name: ind.name, + key: ind.type, + defaultPeriod: ind.period, + requiresSecondary: !!ind.secondarySeriesId, + _color: ind.color, + _source: ind.source, + _method: ind.method, + _maType: ind.maType, + _multiplier: ind.multiplier, + _offset: ind.offset, + _primarySource: ind.primarySource, + _secondarySource: ind.secondarySource, + // MACD / Stochastic / Aroon / ADX / PSAR / HV + _fast: ind.fast, + _slow: ind.slow, + _signal: ind.signal, + _macdSource: ind.macdSource, + _oscMaType: ind.oscMaType, + _signalMaType: ind.signalMaType, + _kSmoothing: ind.kSmoothing, + _dPeriod: ind.dPeriod, + _diLength: ind.diLength, + _adxSmoothing: ind.adxSmoothing, + _step: ind.step, + _maxStep: ind.maxStep, + _annualization: ind.annualization, + // Ichimoku + _conversionPeriod: ind.conversionPeriod, + _basePeriod: ind.basePeriod, + _leadingSpanPeriod: ind.leadingSpanPeriod, + _laggingPeriod: ind.laggingPeriod, + _leadingShiftPeriod: ind.leadingShiftPeriod, + // Volume Profile + _rowSize: ind.rowSize, + _rowsLayout: ind.rowsLayout, + _volumeMode: ind.volumeMode, + _valueAreaPct: ind.valueAreaPct, + _showDevelopingPOC: ind.showDevelopingPOC, + _showDevelopingVA: ind.showDevelopingVA, + _fromIndex: ind.fromIndex, + _toIndex: ind.toIndex, + _widthPercent: ind.widthPercent, + _placement: ind.placement, + _upColor: ind.upColor, + _downColor: ind.downColor, + _vaUpColor: ind.vaUpColor, + _vaDownColor: ind.vaDownColor, + _pocColor: ind.pocColor, + _developingPOCColor: ind.developingPOCColor, + _developingVAColor: ind.developingVAColor, + _showPOC: ind.showPOC, + _showValueArea: ind.showValueArea, + // Status-line toggles + _labelsOnPriceScale: ind.labelsOnPriceScale, + _valuesInStatusLine: ind.valuesInStatusLine, + _inputsInStatusLine: ind.inputsInStatusLine, + }, cid); } _indDone(); }, 100); From b76ba40e830eb7b8e6855e826f95a27f92203359 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Mon, 20 Apr 2026 13:04:58 -0700 Subject: [PATCH 60/68] tvchart: fire whenMainSeriesReady after bars load, not after series attach MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Datafeed mode was firing the ready callback as soon as the series was constructed — BEFORE the async getBars + setData step populated _seriesRawData. Every consumer that needs the bars (indicator re-add after interval/symbol change in particular) saw an empty bar set and silently produced lines with stale or zeroed values. Static-bar mode was already firing at the right spot; move the datafeed fire to match so the ready semantics are consistent: "series has data", not "series exists". Switch the post-destroy indicator re-add from setTimeout(100) to whenMainSeriesReady and force a recompute pass after all indicators are attached, so every saved indicator redraws against the current bars across both interval and symbol changes. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../pywry/frontend/src/tvchart/02-datafeed.js | 17 +++++++++-- pywry/pywry/frontend/src/tvchart/10-events.js | 28 +++++++++++++++---- 2 files changed, 37 insertions(+), 8 deletions(-) diff --git a/pywry/pywry/frontend/src/tvchart/02-datafeed.js b/pywry/pywry/frontend/src/tvchart/02-datafeed.js index 6c61155..6b9697d 100644 --- a/pywry/pywry/frontend/src/tvchart/02-datafeed.js +++ b/pywry/pywry/frontend/src/tvchart/02-datafeed.js @@ -712,9 +712,12 @@ function _tvInitDatafeedMode(entry, seriesList, theme) { sOptions.color || sOptions.lineColor || sOptions.upColor || sOptions.borderUpColor || '#4c87ff' ); - if (_tvIsMainSeriesId(sid) || sid === 'series-0') { - _tvFireMainSeriesReady(entry); - } + // `whenMainSeriesReady` must guarantee bars are loaded, + // not just the series constructed. Fire happens inside + // `_onBarsLoaded` below, after setData + `_seriesRawData` + // — otherwise indicator re-add after an interval/symbol + // change computes from an empty bar set and silently + // produces nothing. // Request initial historical bars var periodParams = { @@ -734,6 +737,14 @@ function _tvInitDatafeedMode(entry, seriesList, theme) { series.setData(normalizedBars); entry._seriesRawData[sid] = normalizedBars; + // Main series now has data — fire any pending + // whenMainSeriesReady callbacks. Callers waiting on + // this event need `_seriesRawData[sid]` populated + // (e.g., indicator re-add after interval change). + if (_tvIsMainSeriesId(sid) || sid === 'series-0') { + _tvFireMainSeriesReady(entry); + } + // Ensure payload.interval is set so the data-response // handler can compare intervals correctly on the first // symbol-change request (prevents unnecessary recreate). diff --git a/pywry/pywry/frontend/src/tvchart/10-events.js b/pywry/pywry/frontend/src/tvchart/10-events.js index 89c883b..94ccfa9 100644 --- a/pywry/pywry/frontend/src/tvchart/10-events.js +++ b/pywry/pywry/frontend/src/tvchart/10-events.js @@ -326,16 +326,18 @@ } } - // Re-add indicators after a short delay to allow main - // series data to be set (indicators compute from raw - // bar data). Tracked so data-settled waits for it. + // Re-add indicators once the main series actually has + // data — whenMainSeriesReady fires AFTER setData has + // populated _seriesRawData so every indicator's compute + // sees the new bars. A fixed setTimeout races the + // async datafeed path and produces silent empty lines. // Grouped indicators (BB, MACD, Stochastic, etc.) add // multiple series sharing the same ``group`` id — only // re-add the FIRST member per group, `_tvAddIndicator` // materialises the rest. if (savedIndicators.length > 0) { var _indDone = _track(); - setTimeout(function() { + var _reAddIndicators = function() { var reEntry = window.__PYWRY_TVCHARTS__[cid]; if (!reEntry) { _indDone(); return; } var seenGroups = {}; @@ -409,8 +411,24 @@ _inputsInStatusLine: ind.inputsInStatusLine, }, cid); } + // Belt-and-braces: force a recompute pass once + // every indicator has been attached so each one + // picks up the freshly-loaded bars (matters if + // async compute paths raced the main-series + // ready fire). + if (typeof _tvRecomputeIndicatorsForChart === 'function') { + try { _tvRecomputeIndicatorsForChart(cid, 'main'); } catch (_e) {} + } _indDone(); - }, 100); + }; + var reEntryForInd = window.__PYWRY_TVCHARTS__[cid]; + if (reEntryForInd && typeof reEntryForInd.whenMainSeriesReady === 'function') { + reEntryForInd.whenMainSeriesReady(_reAddIndicators); + } else { + // Entry vanished before we could register — still + // settle the tracker so data-settled can fire. + _indDone(); + } } _tvRefreshLegendTitle(cid); From f52942818cbbbcaaf80616ff91edd530f7a3a106 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Mon, 20 Apr 2026 13:10:31 -0700 Subject: [PATCH 61/68] tvchart: recompute indicators + VP when RTH session filter toggles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two bugs when flipping ETH → RTH: 1. Session filter iterated seriesMap and setData'd every series in it — including indicator series. Indicators have no _seriesRawData entry so they silently fell through, but the filter shouldn't be touching them at all. Skip any sid with an _activeIndicators entry up front. 2. After filtering the main bars to the RTH subset, indicators weren't recomputed. An SMA(9) stayed at the ETH-computed value even though the chart now shows only RTH bars — a 9-bar window on the RTH chart is very different from a 9-bar ETH window with an overnight gap. Teach _tvSeriesRawData to return _seriesDisplayData when the user flipped to RTH, then drive _tvRecomputeIndicatorsForChart and _tvRefreshVisibleVolumeProfiles from _tvApplySessionFilter so every indicator and VPVR lines up with the filtered bar set. Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/pywry/frontend/src/tvchart/04-series.js | 10 +++++++ .../frontend/src/tvchart/12-session-tz.js | 26 +++++++++++++++++-- 2 files changed, 34 insertions(+), 2 deletions(-) diff --git a/pywry/pywry/frontend/src/tvchart/04-series.js b/pywry/pywry/frontend/src/tvchart/04-series.js index a080f66..5b6488a 100644 --- a/pywry/pywry/frontend/src/tvchart/04-series.js +++ b/pywry/pywry/frontend/src/tvchart/04-series.js @@ -1299,6 +1299,16 @@ function _tvPromptDateRangeAndApply(entry) { } function _tvSeriesRawData(entry, seriesId) { + // When RTH session filter is active, prefer the displayed (filtered) + // bars so indicator compute paths align with what the user is + // actually looking at — SMA(9) on an RTH chart should be 9 RTH bars, + // not 9 ETH bars that straddle an overnight gap. + if (entry && entry._sessionMode === 'RTH' + && entry._seriesDisplayData + && entry._seriesDisplayData[seriesId] + && entry._seriesDisplayData[seriesId].length) { + return entry._seriesDisplayData[seriesId]; + } if (entry._seriesRawData && entry._seriesRawData[seriesId]) return entry._seriesRawData[seriesId]; if (seriesId === 'main' && entry._rawData) return entry._rawData; var s = entry.seriesMap[seriesId]; diff --git a/pywry/pywry/frontend/src/tvchart/12-session-tz.js b/pywry/pywry/frontend/src/tvchart/12-session-tz.js index a8227f6..ae47b32 100644 --- a/pywry/pywry/frontend/src/tvchart/12-session-tz.js +++ b/pywry/pywry/frontend/src/tvchart/12-session-tz.js @@ -244,8 +244,13 @@ function _tvApplySessionFilter() { var sids = Object.keys(entry.seriesMap || {}); entry._seriesDisplayData = entry._seriesDisplayData || {}; + // Skip derived series that have no ``_seriesRawData`` entry — + // indicator lines are computed from the main bars and get refreshed + // below via the global recompute; session filter only applies to + // chart-data series (main + compare overlays). for (var i = 0; i < sids.length; i++) { var sid = sids[i]; + if (typeof _activeIndicators === 'object' && _activeIndicators[sid]) continue; var series = entry.seriesMap[sid]; var raw = entry._seriesRawData[sid]; if (!series || !raw || !raw.length) continue; @@ -268,13 +273,30 @@ function _tvApplySessionFilter() { } } - if (entry.chart) entry.chart.timeScale().fitContent(); - // Find the chartId for the given entry from the registry + // Find the chartId for downstream per-chart refreshes. var _sessIds = Object.keys(window.__PYWRY_TVCHARTS__ || {}); var _sessChartId = null; for (var _si = 0; _si < _sessIds.length; _si++) { if (window.__PYWRY_TVCHARTS__[_sessIds[_si]] === entry) { _sessChartId = _sessIds[_si]; break; } } + + // Recompute every indicator against the now-filtered bar set so + // SMA(9) etc. reflects 9 RTH bars, not 9 ETH bars with an overnight + // gap baked in. _tvSeriesRawData now returns _seriesDisplayData + // when _sessionMode === 'RTH', so the compute paths pick up the + // right source automatically. + if (_sessChartId && typeof _tvRecomputeIndicatorsForChart === 'function') { + try { _tvRecomputeIndicatorsForChart(_sessChartId, 'main'); } catch (_e) {} + } + + // Volume Profile Visible Range reads from _seriesRawData inside + // _tvRefreshVisibleVolumeProfiles — the above raw-data shim kicks + // in there too, so the profile re-pins over the filtered bar set. + if (_sessChartId && typeof _tvRefreshVisibleVolumeProfiles === 'function') { + try { _tvRefreshVisibleVolumeProfiles(_sessChartId); } catch (_e2) {} + } + + if (entry.chart) entry.chart.timeScale().fitContent(); if (_sessChartId) _tvRenderHoverLegend(_sessChartId, null); } From b6856e65559b6bfebb1de61205647ea54eaf381a Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Mon, 20 Apr 2026 14:52:41 -0700 Subject: [PATCH 62/68] tvchart: session filter must refit timescale BEFORE recomputing VP MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The RTH toggle shrinks the main bar array (often by 2-3x for US equities), and LWC's getVisibleLogicalRange keeps pointing at the ETH indices until the time scale is refit. _tvRefreshVisibleVolumeProfiles was pulling that stale range and the VP compute clamped its lo/hi to the last single bar — explaining the "877K up, 0 down" VPVR readout on an otherwise empty-looking chart. Reorder _tvApplySessionFilter so fitContent runs first (re-seating the visible range on the filtered set), then indicator recompute + VP refresh run against the fresh range. Also harden the VP refresh itself: when the visible range sits entirely outside the new bar array, fall back to [0, N-1] instead of clamping to one bar. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../09-indicators/04-volume-profile.js | 6 +++++- .../frontend/src/tvchart/12-session-tz.js | 21 +++++++++++++------ 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators/04-volume-profile.js b/pywry/pywry/frontend/src/tvchart/09-indicators/04-volume-profile.js index 44d445c..b75a784 100644 --- a/pywry/pywry/frontend/src/tvchart/09-indicators/04-volume-profile.js +++ b/pywry/pywry/frontend/src/tvchart/09-indicators/04-volume-profile.js @@ -520,10 +520,14 @@ function _tvRefreshVisibleVolumeProfiles(chartId) { var bars = _tvSeriesRawData(entry, ai.sourceSeriesId || 'main'); if (!bars || !bars.length) continue; var fromIdx, toIdx; - if (range) { + if (range && range.from < bars.length && range.to > 0) { fromIdx = Math.max(0, Math.floor(range.from)); toIdx = Math.min(bars.length - 1, Math.ceil(range.to)); } else { + // No range, or range sits entirely outside the new bar set + // (common right after a session-filter toggle shrinks the + // bars before the time scale catches up). Fall back to the + // full span so the profile covers every visible bar. fromIdx = 0; toIdx = bars.length - 1; } diff --git a/pywry/pywry/frontend/src/tvchart/12-session-tz.js b/pywry/pywry/frontend/src/tvchart/12-session-tz.js index ae47b32..ac97836 100644 --- a/pywry/pywry/frontend/src/tvchart/12-session-tz.js +++ b/pywry/pywry/frontend/src/tvchart/12-session-tz.js @@ -280,23 +280,32 @@ function _tvApplySessionFilter() { if (window.__PYWRY_TVCHARTS__[_sessIds[_si]] === entry) { _sessChartId = _sessIds[_si]; break; } } + // fitContent FIRST so the visible logical range re-seats on the + // shorter filtered bar set — otherwise _tvRefreshVisibleVolumeProfiles + // reads a stale range that points PAST the end of the new array, the + // compute clamps to one bar at index N-1, and VPVR ends up showing a + // single bar's volume (looks like "877K up, 0 down" on an RTH toggle + // when the previous ETH view was scrolled right). + if (entry.chart) entry.chart.timeScale().fitContent(); + // Recompute every indicator against the now-filtered bar set so // SMA(9) etc. reflects 9 RTH bars, not 9 ETH bars with an overnight - // gap baked in. _tvSeriesRawData now returns _seriesDisplayData - // when _sessionMode === 'RTH', so the compute paths pick up the - // right source automatically. + // gap baked in. _tvSeriesRawData returns _seriesDisplayData when + // _sessionMode === 'RTH', so compute paths pick up the right source + // automatically. if (_sessChartId && typeof _tvRecomputeIndicatorsForChart === 'function') { try { _tvRecomputeIndicatorsForChart(_sessChartId, 'main'); } catch (_e) {} } // Volume Profile Visible Range reads from _seriesRawData inside - // _tvRefreshVisibleVolumeProfiles — the above raw-data shim kicks - // in there too, so the profile re-pins over the filtered bar set. + // _tvRefreshVisibleVolumeProfiles — the above raw-data shim kicks in + // there too, so the profile re-pins over the filtered bar set. Now + // that fitContent has updated the visible range, the VP compute sees + // the right [0, N-1] span. if (_sessChartId && typeof _tvRefreshVisibleVolumeProfiles === 'function') { try { _tvRefreshVisibleVolumeProfiles(_sessChartId); } catch (_e2) {} } - if (entry.chart) entry.chart.timeScale().fitContent(); if (_sessChartId) _tvRenderHoverLegend(_sessChartId, null); } From eed9f0632311d1ebcd0769abbae59b78b5987f56 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Mon, 20 Apr 2026 16:17:39 -0700 Subject: [PATCH 63/68] tvchart: RTH filter + scrollback + overnight session display MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three regressions surfaced when flipping session to RTH: 1. _tvFilterBarsBySession couldn't parse TradingView-style strings like "0930-1600:23456" (weekday suffix) or pipe-separated multi-sessions — split on both `,` and `|`, strip anything after `:` before the HHMM-HHMM match. 2. Scrollback's onVisibleLogicalRangeChange handler called series.setData(merged) directly, bypassing the active session filter — so every chunk of older bars loaded via the left-edge scrollback wiped the RTH filter for the merged view, leaving an empty-looking chart because _seriesDisplayData went stale. Hand off to _tvApplySessionFilter when RTH is active so the merged bars get re-filtered, indicators recompute, and VP refreshes atomically. 3. The security-info session schedule never rendered the overnight leg because nothing derived it from Yahoo metadata and the legend-side window builder only looked at pre/regular/post. Add a sixth `overnight_str` field to `_build_session_string`, ship it as `session_overnight` in the symbolInfo dict, wire it through the datafeed normalizer, and teach `_sessionWindows` to split the wrap-around "2000-0400" into an evening leg (Sun-Thu) and a next-morning early leg (Mon-Fri). Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/examples/pywry_demo_tvchart_yfinance.py | 49 ++++++++++++++----- .../pywry/frontend/src/tvchart/02-datafeed.js | 25 ++++++++-- pywry/pywry/frontend/src/tvchart/11-legend.js | 34 ++++++++++++- .../frontend/src/tvchart/12-session-tz.js | 25 ++++++++-- 4 files changed, 113 insertions(+), 20 deletions(-) diff --git a/pywry/examples/pywry_demo_tvchart_yfinance.py b/pywry/examples/pywry_demo_tvchart_yfinance.py index af5c8a7..f3fad51 100644 --- a/pywry/examples/pywry_demo_tvchart_yfinance.py +++ b/pywry/examples/pywry_demo_tvchart_yfinance.py @@ -581,13 +581,18 @@ def _yf_search( return items -def _build_session_string(metadata: dict[str, Any]) -> tuple[str, str, str, str, dict | None]: +def _build_session_string( + metadata: dict[str, Any], +) -> tuple[str, str, str, str, str, dict | None]: """Derive TradingView session strings from Yahoo metadata. - Returns ``(full, premarket, regular, postmarket, schedule)`` where - the first four are ``HHMM-HHMM`` strings and *schedule* is an + Returns ``(full, premarket, regular, postmarket, overnight, schedule)`` + where the first five are ``HHMM-HHMM`` strings and *schedule* is an optional per-day dict ``{"SUN": "1800-2359", ...}`` for instruments - that don't trade every day (e.g. futures). + that don't trade every day (e.g. futures). ``overnight`` is the + window between post-market close and the next pre-market open + (e.g. Blue Ocean ATS ``2000-0400`` for US equities) — Yahoo doesn't + ship it explicitly, so it's derived here. """ ctp = metadata.get("currentTradingPeriod", {}) reg = ctp.get("regular", {}) @@ -606,7 +611,7 @@ def _build_session_string(metadata: dict[str, Any]) -> tuple[str, str, str, str, if instrument == "FUTURE": return _build_futures_session(metadata) # True 24/7 markets (crypto) - return "24x7", "", "24x7", "", None + return "24x7", "", "24x7", "", "", None tz_name = metadata.get("exchangeTimezoneName", "UTC") zi = ZoneInfo(tz_name) @@ -622,15 +627,27 @@ def _fmt(ts_start: int, ts_end: int) -> str: reg_str = _fmt(reg_start, reg_end) post_str = _fmt(post_period.get("start", 0), post_period.get("end", 0)) - windows = [w for w in [pre_str, reg_str, post_str] if w] + # Overnight session (e.g. Blue Ocean ATS 20:00-04:00 ET) isn't reported + # by Yahoo metadata but does show up in the streamed ticks — fill in the + # gap between post-market close and pre-market open so that bars inside + # the overnight window still pass the chart's session filter and the + # session-schedule display renders the overnight leg. + overnight_str = "" + if pre_str and post_str: + post_end = post_str.split("-")[1] + pre_start = pre_str.split("-")[0] + if post_end != pre_start: # crypto-style 24h already covered + overnight_str = f"{post_end}-{pre_start}" + + windows = [w for w in [pre_str, reg_str, post_str, overnight_str] if w] full = ",".join(windows) if windows else "0930-1600" - return full, pre_str, reg_str, post_str, None + return full, pre_str, reg_str, post_str, overnight_str, None def _build_futures_session( metadata: dict[str, Any], -) -> tuple[str, str, str, str, dict]: +) -> tuple[str, str, str, str, str, dict]: """Build session data for futures that trade ~24h Sun-Fri with a 1h break. CME/COMEX/NYMEX futures typically trade 18:00-17:00 ET (23h) with a @@ -686,7 +703,9 @@ def _build_futures_session( reg_str = "0000-1700,1800-2359" full = reg_str - return full, "", reg_str, "", schedule + # Futures already cover their overnight leg inside the two-segment + # regular window above, so no separate overnight slot. + return full, "", reg_str, "", "", schedule def _pricescale_from_hint(price_hint: int | None) -> int: @@ -748,9 +767,14 @@ def _to_minutes(ts: int) -> int: name = md.get("shortName") or md.get("longName", symbol) instrument = (md.get("instrumentType") or "EQUITY").lower() type_label = _TYPE_LABELS.get(instrument, instrument.title()) - session_full, session_pre, session_reg, session_post, session_schedule = _build_session_string( - md - ) + ( + session_full, + session_pre, + session_reg, + session_post, + session_overnight, + session_schedule, + ) = _build_session_string(md) pricescale = _pricescale_from_hint(md.get("priceHint")) currency = md.get("currency", "USD") @@ -806,6 +830,7 @@ def _to_minutes(ts: int) -> int: "session_premarket": session_pre, "session_regular": session_reg, "session_postmarket": session_post, + "session_overnight": session_overnight, "timezone": exchange_tz, "sector": sector, "industry": industry, diff --git a/pywry/pywry/frontend/src/tvchart/02-datafeed.js b/pywry/pywry/frontend/src/tvchart/02-datafeed.js index 6b9697d..5372a60 100644 --- a/pywry/pywry/frontend/src/tvchart/02-datafeed.js +++ b/pywry/pywry/frontend/src/tvchart/02-datafeed.js @@ -149,7 +149,6 @@ function _tvWireScrollback(entry, sid, series, symbolInfo, resolution, sType) { if (normalized.length === 0) { exhausted = true; return; } var merged = normalized.concat(raw); - series.setData(merged); entry._seriesRawData[sid] = merged; // Update canonical raw data for indicator computation @@ -162,15 +161,34 @@ function _tvWireScrollback(entry, sid, series, symbolInfo, resolution, sType) { } // Prepend volume bars if present + var volData = null; if (entry.volumeMap[sid]) { - var volData = _tvExtractVolumeFromBars(bars, entry.theme || _tvDetectTheme(), entry); + volData = _tvExtractVolumeFromBars(bars, entry.theme || _tvDetectTheme(), entry); if (volData && volData.length > 0) { var existingVol = entry._seriesRawData['volume'] || []; var mergedVol = volData.concat(existingVol); - entry.volumeMap[sid].setData(mergedVol); entry._seriesRawData['volume'] = mergedVol; } } + + // When RTH filter is active, push the merged bars through + // the session filter so both the main series and every + // indicator see the refreshed set. Otherwise just setData + // the merged bars directly. + if (entry._sessionMode === 'RTH' && typeof _tvApplySessionFilter === 'function') { + _tvApplySessionFilter(); + } else { + series.setData(merged); + if (entry.volumeMap[sid] && volData && volData.length > 0) { + entry.volumeMap[sid].setData(entry._seriesRawData['volume']); + } + if (typeof _tvRecomputeIndicatorsForChart === 'function') { + try { _tvRecomputeIndicatorsForChart(chartId, sid); } catch (_e) {} + } + if (typeof _tvRefreshVisibleVolumeProfiles === 'function') { + try { _tvRefreshVisibleVolumeProfiles(chartId); } catch (_e2) {} + } + } }); }); } @@ -374,6 +392,7 @@ function _tvNormalizeSymbolInfoFull(item) { ['session_premarket', 'sessionPremarket'], ['session_regular', 'sessionRegular'], ['session_postmarket', 'sessionPostmarket'], + ['session_overnight', 'sessionOvernight'], ['corrections', 'corrections'], ['subsession_id', 'subsessionId'], ['variable_tick_size', 'variableTickSize'], diff --git a/pywry/pywry/frontend/src/tvchart/11-legend.js b/pywry/pywry/frontend/src/tvchart/11-legend.js index ccb842f..837c34b 100644 --- a/pywry/pywry/frontend/src/tvchart/11-legend.js +++ b/pywry/pywry/frontend/src/tvchart/11-legend.js @@ -876,6 +876,7 @@ function _tvSetupLegendControls(chartId) { var sessionPre = String(info.session_premarket || '').trim(); var sessionReg = String(info.session_regular || '').trim(); var sessionPost = String(info.session_postmarket || '').trim(); + var sessionOvernight = String(info.session_overnight || '').trim(); var sessionSchedule = info.session_schedule || null; @@ -941,8 +942,38 @@ function _tvSetupLegendControls(chartId) { if (sessionReg) addWindow(sessionReg, 'regular', weekdays); if (sessionPost) addWindow(sessionPost, 'post', weekdays); + // Overnight window (e.g. 20:00-04:00 for Blue Ocean ATS). + // Wraps midnight so the "2000-0400" string fails the usual + // HHMM-HHMM addWindow(); split it into an evening segment + // (post-market close → 24:00) and a next-day early segment + // (00:00 → pre-market open). The evening segment attaches + // to each weekday + Sunday (Sun 20:00 is the start of Mon's + // overnight); the early segment attaches to Mon-Fri + Sat + // (Fri's overnight carries into Sat 04:00... actually no — + // Fri post-market is the session's last piece; overnight + // only runs before trading days. Use Mon-Fri for both ends + // plus Sun 2000-2400, matching real Blue Ocean ATS hours). + if (sessionOvernight) { + var oParts = sessionOvernight.split('-'); + if (oParts.length === 2) { + var oStart = _parseHHMM(oParts[0]); + var oEnd = _parseHHMM(oParts[1]); + if (!isNaN(oStart) && !isNaN(oEnd) && oEnd <= oStart) { + var eveningStr = oParts[0] + '-2400'; + var earlyStr = '0000-' + oParts[1]; + // Evening leg: Sun-Thu (each "pre-Mon/Tue/.../Fri overnight") + addWindow(eveningStr, 'overnight', ['SUN', 'MON', 'TUE', 'WED', 'THU']); + // Early leg: Mon-Fri (morning continuation of prior day's overnight) + addWindow(earlyStr, 'overnight', weekdays); + } else if (!isNaN(oStart) && !isNaN(oEnd) && oEnd > oStart) { + // Doesn't wrap — treat like any other window. + addWindow(sessionOvernight, 'overnight', weekdays); + } + } + } + // Fallback: parse the combined session string if no separate parts - if (!sessionPre && !sessionReg && !sessionPost) { + if (!sessionPre && !sessionReg && !sessionPost && !sessionOvernight) { var segments = rawSession.split(','); for (var si = 0; si < segments.length; si++) { addWindow(segments[si].trim(), 'regular', weekdays); @@ -954,6 +985,7 @@ function _tvSetupLegendControls(chartId) { function _sessionColorForKind(kind) { if (kind === 'pre') return _dimColor; if (kind === 'post') return _dimColor; + if (kind === 'overnight') return _dimColor; return _activeColor; } diff --git a/pywry/pywry/frontend/src/tvchart/12-session-tz.js b/pywry/pywry/frontend/src/tvchart/12-session-tz.js index ac97836..791a11e 100644 --- a/pywry/pywry/frontend/src/tvchart/12-session-tz.js +++ b/pywry/pywry/frontend/src/tvchart/12-session-tz.js @@ -156,10 +156,17 @@ function _tvFilterBarsBySession(bars, sessionStr, tz) { if (!bars || !bars.length || !sessionStr) return bars || []; if (sessionStr === '24x7') return bars; - var ranges = sessionStr.split(','); + // TradingView session strings may include a ``:weekdays`` suffix + // (``0930-1600:23456`` = Mon-Fri) and be separated by either ``,`` or + // ``|`` in multi-session feeds. Normalise both so the regex below + // only has to handle ``HHMM-HHMM``. + var ranges = sessionStr.split(/[,|]/); var parsed = []; for (var i = 0; i < ranges.length; i++) { - var m = ranges[i].trim().match(/^(\d{2})(\d{2})-(\d{2})(\d{2})$/); + var r = ranges[i].trim(); + var colonIdx = r.indexOf(':'); + if (colonIdx >= 0) r = r.substring(0, colonIdx); + var m = r.match(/^(\d{2})(\d{2})-(\d{2})(\d{2})$/); if (m) { parsed.push({ s: parseInt(m[1], 10) * 60 + parseInt(m[2], 10), @@ -219,7 +226,12 @@ function _tvIsBarInCurrentSession(barTime) { if (mode !== 'RTH') return true; var info = _tvGetMainSymbolInfo(); - var sessionStr = info.session_regular; + // For RTH-only filtering we want the regular-hours window + // explicitly — ``info.session`` is the FULL trading hours string + // (may include pre + regular + post concatenated), while + // ``info.session_regular`` is just the core 0930-1600 slot. When + // the provider only ships ``info.session``, fall back to that. + var sessionStr = info.session_regular || info.session; if (!sessionStr || sessionStr === '24x7') return true; var tz = info.timezone || _tvGetExchangeTimezone(); @@ -239,7 +251,12 @@ function _tvApplySessionFilter() { var mode = entry._sessionMode || 'ETH'; var info = _tvGetMainSymbolInfo(); - var sessionStr = info.session_regular; + // For RTH-only filtering we want the regular-hours window + // explicitly — ``info.session`` is the FULL trading hours string + // (may include pre + regular + post concatenated), while + // ``info.session_regular`` is just the core 0930-1600 slot. When + // the provider only ships ``info.session``, fall back to that. + var sessionStr = info.session_regular || info.session; var tz = info.timezone || _tvGetExchangeTimezone(); var sids = Object.keys(entry.seriesMap || {}); entry._seriesDisplayData = entry._seriesDisplayData || {}; From f09d431f06e7ee919ddb737343616c5f558b62fb Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Mon, 20 Apr 2026 16:47:00 -0700 Subject: [PATCH 64/68] tvchart: respect NO_DATA, drop after-hours streaming bars in RTH, debounce range emit MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three fixes for the scroll-past-data overload + lingering RTH leaks: 1. Streaming bars during after-hours kept painting onto an RTH chart because subscribeBars only checked an optional bar.market_hours field most providers don't ship. Drive the gate off _tvIsBarInCurrentSession (uses the symbol's actual session string) and keep market_hours as a fallback. 2. Scrollback was infinite-looping after RTH was on: the post-merge re-filter via _tvApplySessionFilter always called fitContent at the end, which snapped range.from back to 0, retriggered the scrollback handler, fetched another batch, filtered again, fitContent again. The chain hogged the JS event loop hard enough that toolbar clicks (search/compare) never reached their handlers. Add an opts.skipFitContent flag and pass it from the scrollback path; the user-facing session toggle still fits. 3. Scroll-past-data overload: each visible-range tick fired straight to Python via bridge.emit (60+/sec when scrolling). Coalesce via rAF and skip emit when the range hasn't moved by ≥ 0.5 logical bars. Also harden the scrollback callback to mark exhausted on ANY non-OK response (error, status:no_data, noData:true, empty bars, or bars that don't actually advance past the current oldest), and add an extra guard against rapidly dragging the scroll wheel past where data could possibly exist. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../pywry/frontend/src/tvchart/02-datafeed.js | 60 +++++++++++++++---- .../frontend/src/tvchart/05-lifecycle.js | 29 +++++++-- .../frontend/src/tvchart/12-session-tz.js | 11 +++- 3 files changed, 79 insertions(+), 21 deletions(-) diff --git a/pywry/pywry/frontend/src/tvchart/02-datafeed.js b/pywry/pywry/frontend/src/tvchart/02-datafeed.js index 5372a60..0990fa6 100644 --- a/pywry/pywry/frontend/src/tvchart/02-datafeed.js +++ b/pywry/pywry/frontend/src/tvchart/02-datafeed.js @@ -116,6 +116,13 @@ function _tvWireScrollback(entry, sid, series, symbolInfo, resolution, sType) { if (!range || loading || exhausted) return; // Only fire when user scrolls near the left edge if (range.from > _TV_SCROLLBACK_THRESHOLD) return; + // Once the user has dragged past the data into pure empty space + // (range.from negative beyond the threshold), stop firing — the + // first request already came back NO_DATA so further scrolling + // shouldn't keep asking. The `exhausted` flag normally catches + // this, but this guard cuts off any pre-exhaustion overshoot + // where the user yanks the scroll wheel hard. + if (range.from < -_TV_SCROLLBACK_THRESHOLD * 4) return; // Find the oldest bar currently loaded var raw = entry._seriesRawData[sid]; @@ -133,13 +140,31 @@ function _tvWireScrollback(entry, sid, series, symbolInfo, resolution, sType) { _tvRequestDatafeedHistory(chartId, symbolInfo, resolution, periodParams, function(resp) { loading = false; - if (!resp || resp.error) return; + // Treat any non-success outcome as exhaustion so the + // visible-range-change handler stops retrying — otherwise + // every scroll-tick fires another fetch and overloads the + // bridge. This includes: + // - missing/error response (transport failure) + // - explicit noData / status:"no_data" + // - empty bars array (UDF "no more history" signal) + if (!resp || resp.error + || (resp.noData != null && resp.noData) + || resp.status === 'no_data' + || resp.status === 'error') { + exhausted = true; + return; + } var bars = resp.bars || []; - - // If the server signalled no more data, stop asking - if (bars.length === 0 || - (resp.noData != null && resp.noData) || - resp.status === 'no_data') { + if (bars.length === 0) { + exhausted = true; + return; + } + // Server returned bars whose newest timestamp is at or after + // our current oldest — no actual older data was added, so + // continuing to ask would loop forever requesting the same + // window. Stop. + var newestNew = bars[bars.length - 1] && bars[bars.length - 1].time; + if (typeof newestNew === 'number' && newestNew >= oldestTime) { exhausted = true; return; } @@ -173,10 +198,11 @@ function _tvWireScrollback(entry, sid, series, symbolInfo, resolution, sType) { // When RTH filter is active, push the merged bars through // the session filter so both the main series and every - // indicator see the refreshed set. Otherwise just setData - // the merged bars directly. + // indicator see the refreshed set. Pass skipFitContent so + // the user's scroll position is preserved AND we don't + // retrigger the scrollback handler in an infinite loop. if (entry._sessionMode === 'RTH' && typeof _tvApplySessionFilter === 'function') { - _tvApplySessionFilter(); + _tvApplySessionFilter({ skipFitContent: true }); } else { series.setData(merged); if (entry.volumeMap[sid] && volData && volData.length > 0) { @@ -821,10 +847,18 @@ function _tvInitDatafeedMode(entry, seriesList, theme) { entry._datafeedSubscriptions[sid] = guid; datafeed.subscribeBars(symbolInfo, resolution, function(bar) { - // Skip bars outside regular session when RTH is active. - // market_hours field from the data source: 2 = Regular/Market Open. - if (entry._sessionMode === 'RTH' && bar.market_hours != null && bar.market_hours !== 2) { - return; + // Skip bars outside the regular session when RTH + // is active. Prefer the session-string check + // (works for every datafeed) and fall back to the + // per-bar market_hours field when present. + if (entry._sessionMode === 'RTH') { + if (typeof _tvIsBarInCurrentSession === 'function' + && !_tvIsBarInCurrentSession(bar.time)) { + return; + } + if (bar.market_hours != null && bar.market_hours !== 2) { + return; + } } var normalized = _tvNormalizeBarsForSeriesType([bar], sType); if (normalized.length > 0) { diff --git a/pywry/pywry/frontend/src/tvchart/05-lifecycle.js b/pywry/pywry/frontend/src/tvchart/05-lifecycle.js index c75ab51..3261719 100644 --- a/pywry/pywry/frontend/src/tvchart/05-lifecycle.js +++ b/pywry/pywry/frontend/src/tvchart/05-lifecycle.js @@ -891,15 +891,32 @@ function _tvSetupEventBridge(chartId, chart) { }); // Visible range change — emits Python event + locally refreshes any - // visible-range volume-profile primitives on this chart. The refresh - // is debounced via rAF so panning/zooming stays smooth. + // visible-range volume-profile primitives on this chart. Both are + // coalesced via rAF so panning/zooming or scrolling past the loaded + // bar set doesn't fire 60+ events per second to Python (which would + // overload the WebSocket/IPC bridge and freeze the UI). var vpRefreshHandle = null; + var emitHandle = null; + var lastEmittedRange = null; chart.timeScale().subscribeVisibleLogicalRangeChange(function(range) { if (!range) return; - bridge.emit('tvchart:visible-range-change', { - chartId: chartId, - from: range.from, - to: range.to, + if (emitHandle) cancelAnimationFrame(emitHandle); + emitHandle = requestAnimationFrame(function() { + emitHandle = null; + // Skip emit when the range hasn't changed meaningfully — + // scrolling past the data range can fire dozens of identical + // ticks per frame as LWC re-clamps the viewport. + if (lastEmittedRange + && Math.abs(lastEmittedRange.from - range.from) < 0.5 + && Math.abs(lastEmittedRange.to - range.to) < 0.5) { + return; + } + lastEmittedRange = { from: range.from, to: range.to }; + bridge.emit('tvchart:visible-range-change', { + chartId: chartId, + from: range.from, + to: range.to, + }); }); if (typeof _tvRefreshVisibleVolumeProfiles === 'function') { if (vpRefreshHandle) cancelAnimationFrame(vpRefreshHandle); diff --git a/pywry/pywry/frontend/src/tvchart/12-session-tz.js b/pywry/pywry/frontend/src/tvchart/12-session-tz.js index 791a11e..4347fd3 100644 --- a/pywry/pywry/frontend/src/tvchart/12-session-tz.js +++ b/pywry/pywry/frontend/src/tvchart/12-session-tz.js @@ -245,7 +245,8 @@ function _tvIsBarInCurrentSession(barTime) { * either passes them through (ETH) or filters them (RTH) before * calling series.setData(). */ -function _tvApplySessionFilter() { +function _tvApplySessionFilter(opts) { + opts = opts || {}; var entry = _tvGetFirstEntry(); if (!entry) return; @@ -303,7 +304,13 @@ function _tvApplySessionFilter() { // compute clamps to one bar at index N-1, and VPVR ends up showing a // single bar's volume (looks like "877K up, 0 down" on an RTH toggle // when the previous ETH view was scrolled right). - if (entry.chart) entry.chart.timeScale().fitContent(); + // + // Skip when called from scrollback though — the user just dragged the + // viewport, jumping back to fitContent would yank their scroll + // position AND retrigger the scrollback handler in an infinite loop + // (range.from snaps to 0, scrollback wants more data, loads it, + // session-filters again, fitContent again, loop). + if (entry.chart && !opts.skipFitContent) entry.chart.timeScale().fitContent(); // Recompute every indicator against the now-filtered bar set so // SMA(9) etc. reflects 9 RTH bars, not 9 ETH bars with an overnight From 4d855b98bf3d6eb32a791c3112b5d139eab31e04 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Mon, 20 Apr 2026 16:47:01 -0700 Subject: [PATCH 65/68] tvchart: brighten dim text + bump legend font for readability MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Dark theme dim was #787b86 — TradingView's default but too washed out in PyWry's dark background. The labels in the legend (Volume, VPVR header, OHLC O/C tags, time stamp) and pane legends became hard to read against the deep-black background. Lift each text tier one notch: text → #e6e9f0, muted → #c4c9d4, dim → #a3a8b5 in dark; mirror with deeper-than-default values in light. Bump main legend font from 12px → 13px and indicator legend font from 11px → 13px so the per-bar OHLC, the symbol-time line, and indicator names actually read at a glance. Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/pywry/frontend/style/tvchart.css | 30 +++++++++++++------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/pywry/pywry/frontend/style/tvchart.css b/pywry/pywry/frontend/style/tvchart.css index 17fc7f2..947a699 100644 --- a/pywry/pywry/frontend/style/tvchart.css +++ b/pywry/pywry/frontend/style/tvchart.css @@ -14,9 +14,9 @@ html.dark, --pywry-tvchart-hover: #17191f; --pywry-tvchart-active-bg: rgba(41, 98, 255, 0.16); --pywry-tvchart-active-text: #2962ff; - --pywry-tvchart-text: #d1d4dc; - --pywry-tvchart-text-muted: #aeb4c2; - --pywry-tvchart-text-dim: #787b86; + --pywry-tvchart-text: #e6e9f0; + --pywry-tvchart-text-muted: #c4c9d4; + --pywry-tvchart-text-dim: #a3a8b5; --pywry-tvchart-grid: rgba(255, 255, 255, 0.05); --pywry-tvchart-crosshair: #758696; --pywry-tvchart-crosshair-label-bg: #1b1f27; @@ -133,9 +133,9 @@ html.light, /* Contrast-heavy text palette: the chart sits on pure #ffffff, so text needs to land well above WCAG AA to feel crisp rather than "technically readable". text: 18.1:1, muted: 11.1:1, dim: 8.1:1. */ - --pywry-tvchart-text: #0a0e18; - --pywry-tvchart-text-muted: #2e3540; - --pywry-tvchart-text-dim: #3d4553; + --pywry-tvchart-text: #050912; + --pywry-tvchart-text-muted: #1f2530; + --pywry-tvchart-text-dim: #4a5160; --pywry-tvchart-grid: rgba(197, 203, 206, 0.5); --pywry-tvchart-crosshair: #9598a1; --pywry-tvchart-crosshair-label-bg: #e1ecf2; @@ -798,8 +798,8 @@ html.light, left: 8px; z-index: 10; font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, sans-serif; - font-size: 12px; - line-height: 1.35; + font-size: 13px; + line-height: 1.4; color: var(--pywry-tvchart-text); pointer-events: none; white-space: normal; @@ -869,8 +869,8 @@ html.light, border-radius: 6px; background: var(--pywry-tvchart-legend-bg); box-sizing: border-box; - font-weight: 400; - font-size: 11px; + font-weight: 500; + font-size: 13px; color: var(--pywry-tvchart-text); letter-spacing: 0; max-width: fit-content; @@ -879,7 +879,7 @@ html.light, .tvchart-legend-ohlc { display: inline-block; - font-size: 12px; + font-size: 13px; vertical-align: middle; white-space: nowrap; } @@ -887,7 +887,7 @@ html.light, .tvchart-legend-vol { display: inline-block; color: var(--pywry-tvchart-text); - font-size: 11px; + font-size: 13px; margin-left: 2px; white-space: nowrap; } @@ -928,8 +928,8 @@ html.light, left: 8px; z-index: 10; font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, sans-serif; - font-size: 11px; - line-height: 1.35; + font-size: 13px; + line-height: 1.4; color: var(--pywry-tvchart-text); pointer-events: none; white-space: normal; @@ -940,7 +940,7 @@ html.light, display: flex; align-items: center; gap: 5px; - font-size: 11px; + font-size: 13px; line-height: 20px; pointer-events: auto; } From 62b0ee2d3e80924826caef9917b2c346615ca9c1 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Mon, 20 Apr 2026 16:50:23 -0700 Subject: [PATCH 66/68] tvchart: drop out-of-order streaming ticks instead of crashing onTick LWC's series.update throws "Cannot update oldest data" if the incoming bar's time is before the last bar already in the series. That happens easily after a session-filter swap (the series was just setData'd with filtered bars whose newest is e.g. yesterday's RTH close, then a late tick arrives for an earlier extended-hours bar) and the unhandled throw bubbled out of pywry.dispatch into the console as an "Error in event handler". Skip the tick when its time is older than _seriesRawData[sid]'s last entry, and wrap series.update / volumeMap.update in try/catch so any remaining mismatch (format, business-day vs unix) drops the tick instead of breaking the stream subscription. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../pywry/frontend/src/tvchart/02-datafeed.js | 34 +++++++++++++++---- 1 file changed, 28 insertions(+), 6 deletions(-) diff --git a/pywry/pywry/frontend/src/tvchart/02-datafeed.js b/pywry/pywry/frontend/src/tvchart/02-datafeed.js index 0990fa6..ad4aebf 100644 --- a/pywry/pywry/frontend/src/tvchart/02-datafeed.js +++ b/pywry/pywry/frontend/src/tvchart/02-datafeed.js @@ -860,9 +860,29 @@ function _tvInitDatafeedMode(entry, seriesList, theme) { return; } } + // Drop ticks whose time is older than what's + // already in the series — LWC's series.update + // throws "Cannot update oldest data" if the + // incoming bar comes before the last one (can + // happen after a session-filter swap or a + // late tick from a previous session). + var lastRaw = entry._seriesRawData && entry._seriesRawData[sid]; + if (lastRaw && lastRaw.length) { + var lastTime = lastRaw[lastRaw.length - 1].time; + if (typeof bar.time === 'number' && typeof lastTime === 'number' && bar.time < lastTime) { + return; + } + } var normalized = _tvNormalizeBarsForSeriesType([bar], sType); if (normalized.length > 0) { - series.update(normalized[0]); + try { + series.update(normalized[0]); + } catch (_e) { + // LWC rejected the update (out-of-order + // time, format mismatch, etc.) — drop + // the tick rather than break the stream. + return; + } } if (bar.volume != null && entry.volumeMap[sid]) { var palette = TVCHART_THEMES._get(entry.theme || _tvDetectTheme()); @@ -881,11 +901,13 @@ function _tvInitDatafeedMode(entry, seriesList, theme) { } var uc = prefs.upColor || palette.volumeUp; var dc = prefs.downColor || palette.volumeDown || palette.volumeUp; - entry.volumeMap[sid].update({ - time: bar.time, - value: bar.volume, - color: isUp ? uc : dc, - }); + try { + entry.volumeMap[sid].update({ + time: bar.time, + value: bar.volume, + color: isUp ? uc : dc, + }); + } catch (_ev) { /* same out-of-order guard */ } } }, guid, function() { // onResetCacheNeeded — re-fetch all bars From b60c3c06a3a0adcd8959b6d83811e330454f8463 Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Mon, 20 Apr 2026 20:02:40 -0700 Subject: [PATCH 67/68] tvchart: stop generic settings-apply from tinting VP legend in gold MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Volume Profile indicator keeps info.color = null because its colours live on opts.upColor / downColor / vaUpColor / vaDownColor / pocColor. But the settings dialog seeded draft.color with the fallback "#e6b32c" (a gold that matched the default POC shade), and the "Apply per-plot styles" pass wrote draft.color back onto info.color for every style-sid — including VP. The next legend rebuild saw info.color = gold, skipped the VP-specific blue-up fallback, and rendered the whole "VPVR Number Of Rows 24 Up/Down 70 ..." row in POC-looking gold. Guard both sides: - 11-apply-settings skips the per-plot colour write when type is VP. - 09-legend-rebuild forces the VP name to the default legend text colour (and the dot to the up-volume swatch) regardless of any info.color that might have leaked through. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../09-indicators/09-legend-rebuild.js | 23 ++++++++++++++----- .../09-indicators/11-apply-settings.js | 11 +++++++-- 2 files changed, 26 insertions(+), 8 deletions(-) diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators/09-legend-rebuild.js b/pywry/pywry/frontend/src/tvchart/09-indicators/09-legend-rebuild.js index 4c12730..88730dd 100644 --- a/pywry/pywry/frontend/src/tvchart/09-indicators/09-legend-rebuild.js +++ b/pywry/pywry/frontend/src/tvchart/09-indicators/09-legend-rebuild.js @@ -35,17 +35,28 @@ function _tvRebuildIndicatorLegend(chartId) { row.dataset.hidden = info.hidden ? '1' : '0'; var dot = document.createElement('span'); dot.className = 'tvchart-ind-dot'; - // Volume Profile primitives have no line colour — use the - // up-volume swatch so the dot still reflects the indicator. - var dotColor = info.color; - if (!dotColor && (info.type === 'volume-profile-fixed' || info.type === 'volume-profile-visible')) { + // Volume Profile primitives have no line colour — always use + // the up-volume swatch for the dot so the indicator reads as + // "Volume Profile" regardless of any stray info.color that a + // generic settings-apply pass might have written. + var isVPIndicator = info.type === 'volume-profile-fixed' || info.type === 'volume-profile-visible'; + var dotColor; + if (isVPIndicator) { dotColor = info.upColor || _cssVar('--pywry-tvchart-vp-up'); + } else { + dotColor = info.color || _cssVar('--pywry-tvchart-text'); } - dot.style.background = dotColor || _cssVar('--pywry-tvchart-text'); + dot.style.background = dotColor; row.appendChild(dot); var nameSp = document.createElement('span'); nameSp.className = 'tvchart-ind-name'; - nameSp.style.color = dotColor || _cssVar('--pywry-tvchart-text'); + // For VP, keep the name text in the default legend colour — + // tinting it the low-opacity up-volume blue would render + // unreadably dim. Only colour the name when the indicator + // has a real line colour (SMA/EMA/RSI/etc.). + nameSp.style.color = isVPIndicator + ? _cssVar('--pywry-tvchart-text') + : (info.color || _cssVar('--pywry-tvchart-text')); // Extract base name (remove any trailing period in parentheses from the stored name) var baseName; if (info.group) { diff --git a/pywry/pywry/frontend/src/tvchart/09-indicators/11-apply-settings.js b/pywry/pywry/frontend/src/tvchart/09-indicators/11-apply-settings.js index c2a1a1b..654b663 100644 --- a/pywry/pywry/frontend/src/tvchart/09-indicators/11-apply-settings.js +++ b/pywry/pywry/frontend/src/tvchart/09-indicators/11-apply-settings.js @@ -47,12 +47,19 @@ function _tvApplyIndicatorSettings(seriesId, newSettings) { || stepChanged || maxStepChanged || annualizationChanged; var type = info.type || info.name; - // Apply per-plot styles + // Apply per-plot styles. + // Volume Profile has no line series — its colours live on + // opts.upColor / downColor / vaUpColor / vaDownColor / pocColor and + // are applied by the VP-specific branch further down. Skipping it + // here avoids clobbering info.color (which stays null for VP) with + // the generic draft.color default, which the legend then picks up + // as the indicator's display colour. + var isVP = type === 'volume-profile-fixed' || type === 'volume-profile-visible'; var styleSids = []; if (info.group) { var allKeys = Object.keys(_activeIndicators); for (var k = 0; k < allKeys.length; k++) { if (_activeIndicators[allKeys[k]].group === info.group) styleSids.push(allKeys[k]); } - } else { styleSids = [seriesId]; } + } else if (!isVP) { styleSids = [seriesId]; } for (var si = 0; si < styleSids.length; si++) { var ss = entry.seriesMap[styleSids[si]]; var plotDraft = newSettings.plotStyles && newSettings.plotStyles[styleSids[si]]; From 371c40069e259737653fcf52d03906a49f60043a Mon Sep 17 00:00:00 2001 From: deeleeramone <> Date: Mon, 20 Apr 2026 20:13:21 -0700 Subject: [PATCH 68/68] tvchart: wire every ChartOptionsImpl property + persist _chartPrefs across destroy MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit _tvBuildChartOptions previously set only ~60% of what LWC's ChartOptionsImpl exposes — gaps like kineticScroll, trackingMode, addDefaultPane, full timeScale tuning (rightOffset, barSpacing, fixLeftEdge, lockVisibleTimeRangeOnResize, etc.), and full price-scale tuning (mode, invertScale, alignLabels, entireTextOnly, minimumWidth, visible) meant any payload.chartOptions override for those silently fell through to LWC's library default instead of PyWry's. Add defaults for every property on the interface so payloads can override anything and the chart still boots with sensible PyWry behaviour. Also persist _chartPrefs / _sessionMode / _selectedTimezone through the interval/symbol destroy-recreate path so user-tuned scale mode, bar spacing, navigation toggles, and session filter don't reset on every interval switch. Co-Authored-By: Claude Opus 4.7 (1M context) --- pywry/pywry/frontend/src/tvchart/03-theme.js | 96 ++++++++++++++++--- pywry/pywry/frontend/src/tvchart/10-events.js | 27 ++++++ 2 files changed, 110 insertions(+), 13 deletions(-) diff --git a/pywry/pywry/frontend/src/tvchart/03-theme.js b/pywry/pywry/frontend/src/tvchart/03-theme.js index bacc23f..289792e 100644 --- a/pywry/pywry/frontend/src/tvchart/03-theme.js +++ b/pywry/pywry/frontend/src/tvchart/03-theme.js @@ -98,34 +98,104 @@ function _tvBuildChartOptions(chartOptions, theme) { var palette = TVCHART_THEMES._get(theme || 'dark'); var separatorColor = _cssVar('--pywry-tvchart-separator') || 'rgba(255,255,255,0.06)'; var separatorHoverColor = _cssVar('--pywry-tvchart-separator-hover') || 'rgba(255,255,255,0.15)'; + var gridLineColor = palette.grid.vertLines.color; + + // Full LWC ``ChartOptionsImpl`` coverage — every option the library + // accepts has a matching default here so `payload.chartOptions` can + // override any of them without falling through to LWC's library + // default. Grouped per the interface sections on the docs page. + var priceScaleCommon = { + borderColor: gridLineColor, + textColor: palette.textColor, + // `mode` values: 0=Normal, 1=Logarithmic, 2=Percentage, + // 3=IndexedTo100. Default to Normal. + mode: LightweightCharts.PriceScaleMode + ? LightweightCharts.PriceScaleMode.Normal + : 0, + autoScale: true, + invertScale: false, + alignLabels: true, + entireTextOnly: false, + ticksVisible: true, + visible: true, + minimumWidth: 0, + borderVisible: true, + scaleMargins: { top: 0.1, bottom: 0.1 }, + }; + var base = { + // ---- Layout ------------------------------------------------------ layout: { background: { type: LightweightCharts.ColorType.Solid, color: palette.background }, textColor: palette.textColor, + fontSize: 12, + fontFamily: "-apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, sans-serif", attributionLogo: false, + colorSpace: 'srgb', + colorParsers: [], panes: { separatorColor: separatorColor, separatorHoverColor: separatorHoverColor, + enableResize: true, }, }, - grid: palette.grid, - crosshair: palette.crosshair, - rightPriceScale: { - borderColor: palette.grid.vertLines.color, - textColor: palette.textColor, - scaleMargins: { top: 0.1, bottom: 0.1 }, - }, - leftPriceScale: { - borderColor: palette.grid.vertLines.color, - textColor: palette.textColor, - }, + + // ---- Price scales ------------------------------------------------ + rightPriceScale: _tvMerge(priceScaleCommon, {}), + leftPriceScale: _tvMerge(priceScaleCommon, { visible: false }), + overlayPriceScales: _tvMerge(priceScaleCommon, { scaleMargins: { top: 0.1, bottom: 0.1 } }), + + // ---- Time scale -------------------------------------------------- timeScale: { - borderColor: palette.grid.vertLines.color, + borderColor: gridLineColor, + borderVisible: true, + visible: true, timeVisible: false, secondsVisible: false, + rightOffset: 12, + barSpacing: 6, + minBarSpacing: 0.5, + fixLeftEdge: false, + fixRightEdge: false, + lockVisibleTimeRangeOnResize: false, + rightBarStaysOnScroll: false, + shiftVisibleRangeOnNewBar: true, + allowShiftVisibleRangeOnWhitespaceReplacement: false, + uniformDistribution: false, + minimumHeight: 0, + allowBoldLabels: true, + tickMarkMaxCharacterLength: undefined, + ignoreWhitespaceIndices: false, + }, + + // ---- Crosshair / grid ------------------------------------------- + crosshair: palette.crosshair, + grid: palette.grid, + + // ---- Interaction ------------------------------------------------- + kineticScroll: { + touch: true, + mouse: false, + }, + trackingMode: { + exitMode: LightweightCharts.TrackingModeExitMode + ? LightweightCharts.TrackingModeExitMode.OnTouchEnd + : 1, + }, + + // ---- Pane management -------------------------------------------- + addDefaultPane: true, + + // ---- Localization ------------------------------------------------ + // Formatters stay undefined so LWC falls back to Intl w/ the + // chart's locale — callers can pass custom ``priceFormatter`` + // and ``timeFormatter`` via payload.chartOptions.localization. + localization: { + locale: 'en-US', + dateFormat: "yyyy-MM-dd", }, - localization: { locale: 'en-US' }, }; + base = _tvMerge(base, _tvInteractiveNavigationOptions()); return chartOptions ? _tvMerge(base, chartOptions) : base; } diff --git a/pywry/pywry/frontend/src/tvchart/10-events.js b/pywry/pywry/frontend/src/tvchart/10-events.js index 94ccfa9..10017c3 100644 --- a/pywry/pywry/frontend/src/tvchart/10-events.js +++ b/pywry/pywry/frontend/src/tvchart/10-events.js @@ -106,6 +106,13 @@ var container = entry.container; var oldPayload = entry.payload || {}; var savedDisplayStyle = entry._chartDisplayStyle || null; + // _chartPrefs holds user-tuned settings (timeScale + // rightOffset / barSpacing, priceScale mode + invert, + // kineticScroll toggles, locale, etc.). Destroy-recreate + // would reset them to defaults without this snapshot. + var savedChartPrefs = entry._chartPrefs ? _tvMerge({}, entry._chartPrefs) : null; + var savedSessionMode = entry._sessionMode || null; + var savedTimezone = entry._selectedTimezone || null; // Capture the visible *time* range before destroy so we // can restore the user's zoom on the new chart. Time- @@ -273,6 +280,26 @@ var _applyDefaultDone = _track(); setTimeout(_applyDefaultDone, 180); + // Restore chart-level preferences (scale mode, time-scale + // tuning, navigation toggles, locale, session/timezone). + // These live on the new entry and feed every subsequent + // build of chartOptions via _tvApplySettingsToChart. + var _reEntryForPrefs = window.__PYWRY_TVCHARTS__[cid]; + if (_reEntryForPrefs) { + if (savedChartPrefs) _reEntryForPrefs._chartPrefs = savedChartPrefs; + if (savedSessionMode) _reEntryForPrefs._sessionMode = savedSessionMode; + if (savedTimezone) _reEntryForPrefs._selectedTimezone = savedTimezone; + // Push the saved prefs into the fresh chart so its + // timeScale / priceScale / interaction wiring reflects + // what the user had before the destroy-recreate. + if (savedChartPrefs && savedChartPrefs.settings + && typeof _tvApplySettingsToChart === 'function') { + try { + _tvApplySettingsToChart(cid, _reEntryForPrefs, savedChartPrefs.settings); + } catch (_eApply) {} + } + } + // Re-apply chart display style once the new main // series is attached. Event-driven via // ``whenMainSeriesReady`` — no polling.