hyperprop-charting-library 0.1.2 → 0.1.4

package/README.md

@@ -37,6 +37,7 @@ chart.setData(data);
 - API reference: `docs/API.md`
 - Event contracts: `docs/EVENTS.md`
 - Integration recipes: `docs/RECIPES.md`
+- Bracket orders (TP/SL lifecycle): `docs/BRACKETS.md`
 - AI integration context: `docs/AI_CONTEXT.md`
 
 ## Core API Surface

package/dist/index.cjs

@@ -24,15 +24,15 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 var DEFAULT_GRID_OPTIONS = {
-  color: "#e2e8f0",
-  opacity: 0.9,
+  color: "#2b2f38",
+  opacity: 0.38,
   horizontalLines: true,
   verticalLines: true,
   horizontalTickCount: 5
 };
 var DEFAULT_AXIS_OPTIONS = {
-  lineColor: "#94a3b8",
-  textColor: "#94a3b8",
+  lineColor: "#3b3f47",
+  textColor: "#a9adb6",
   fontSize: 12,
   lineWidth: 1
 };
@@ -47,8 +47,8 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
 var DEFAULT_WATERMARK_OPTIONS = {
   visible: false,
   text: "",
-  color: "#94a3b8",
-  opacity: 0.2,
+  color: "#81858d",
+  opacity: 0.14,
   fontSize: 92,
   fontWeight: 700,
   thickness: 0
@@ -57,9 +57,9 @@ var DEFAULT_PRICE_LINE_OPTIONS = {
   visible: true,
   style: "solid",
   thickness: 1,
-  color: "#f59e0b",
-  labelBackgroundColor: "#f59e0b",
-  labelTextColor: "#0f172a",
+  color: "#38bdf8",
+  labelBackgroundColor: "#0b1220",
+  labelTextColor: "#60a5fa",
   labelBorderRadius: 3,
   showLabel: true
 };
@@ -68,9 +68,9 @@ var DEFAULT_ORDER_LINE_OPTIONS = {
   behavior: "static",
   style: "solid",
   thickness: 1,
-  color: "#f59e0b",
-  labelBackgroundColor: "#f59e0b",
-  labelTextColor: "#0f172a",
+  color: "rgba(59,130,246,0.8)",
+  labelBackgroundColor: "#0b1220",
+  labelTextColor: "#60a5fa",
   labelBorderRadius: 3,
   showCloseButton: true,
   widgetPosition: "left",
@@ -97,12 +97,12 @@ var DEFAULT_ORDER_LINE_OPTIONS = {
 var DEFAULT_OPTIONS = {
   width: 720,
   height: 360,
-  backgroundColor: "#ffffff",
-  axisColor: "#94a3b8",
+  backgroundColor: "#101114",
+  axisColor: "#7f8289",
   axis: DEFAULT_AXIS_OPTIONS,
-  upColor: "#16a34a",
-  downColor: "#dc2626",
-  gridColor: "#e2e8f0",
+  upColor: "#2fb171",
+  downColor: "#d35a5a",
+  gridColor: "#252932",
   fontFamily: "Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
   candleBodyWidthRatio: 0.7,
   candleMinWidth: 0.5,
@@ -118,12 +118,12 @@ var DEFAULT_OPTIONS = {
   orderLines: [],
   tickerLine: {
     visible: true,
-    style: "dashed",
+    style: "dotted",
     thickness: 1,
-    color: "#22c55e",
-    labelBackgroundColor: "#22c55e",
+    color: "#38bdf8",
+    labelBackgroundColor: "#38bdf8",
     labelTextColor: "#0b1220",
-    labelBorderRadius: 6
+    labelBorderRadius: 3
   }
 };
 function createChart(element, options = {}) {
@@ -389,7 +389,7 @@ function createChart(element, options = {}) {
       return;
     }
     const lineY = clamp(yFromPrice(renderPrice), chartTop + 1, chartBottom - 1);
-    const color = mergedLine.color ?? (mergedLine.side === "buy" ? mergedOptions.upColor : mergedLine.side === "sell" ? mergedOptions.downColor : "#f59e0b");
+    const color = line.color ?? (mergedLine.type === "takeProfit" ? "rgba(45,212,191,0.86)" : mergedLine.type === "stop" ? "rgba(245,158,11,0.86)" : "rgba(59,130,246,0.8)");
     if (Number.isFinite(mergedLine.fillToPrice)) {
       const fillY = clamp(yFromPrice(mergedLine.fillToPrice), chartTop + 1, chartBottom - 1);
       const topY = Math.min(lineY, fillY);
@@ -500,7 +500,7 @@ function createChart(element, options = {}) {
     const borderRadius = Math.max(0, mergedLine.labelBorderRadius);
     const widgetBackground = mergedOptions.backgroundColor;
     const widgetBorder = color;
-    const textColor = mergedLine.labelTextColor;
+    const textColor = line.labelTextColor ?? (mergedLine.type === "takeProfit" ? "#5eead4" : mergedLine.type === "stop" ? "#fbbf24" : mergedLine.labelTextColor);
     const mainWidgetX = leftWidgetX + actionButtonsTotalWidth + actionButtonsGap;
     ctx.fillStyle = widgetBackground;
     fillRoundedRect(Math.round(mainWidgetX), Math.round(labelY), mainWidgetWidth, labelHeight, borderRadius);

package/dist/index.js

@@ -1,14 +1,14 @@
 // src/index.ts
 var DEFAULT_GRID_OPTIONS = {
-  color: "#e2e8f0",
-  opacity: 0.9,
+  color: "#2b2f38",
+  opacity: 0.38,
   horizontalLines: true,
   verticalLines: true,
   horizontalTickCount: 5
 };
 var DEFAULT_AXIS_OPTIONS = {
-  lineColor: "#94a3b8",
-  textColor: "#94a3b8",
+  lineColor: "#3b3f47",
+  textColor: "#a9adb6",
   fontSize: 12,
   lineWidth: 1
 };
@@ -23,8 +23,8 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
 var DEFAULT_WATERMARK_OPTIONS = {
   visible: false,
   text: "",
-  color: "#94a3b8",
-  opacity: 0.2,
+  color: "#81858d",
+  opacity: 0.14,
   fontSize: 92,
   fontWeight: 700,
   thickness: 0
@@ -33,9 +33,9 @@ var DEFAULT_PRICE_LINE_OPTIONS = {
   visible: true,
   style: "solid",
   thickness: 1,
-  color: "#f59e0b",
-  labelBackgroundColor: "#f59e0b",
-  labelTextColor: "#0f172a",
+  color: "#38bdf8",
+  labelBackgroundColor: "#0b1220",
+  labelTextColor: "#60a5fa",
   labelBorderRadius: 3,
   showLabel: true
 };
@@ -44,9 +44,9 @@ var DEFAULT_ORDER_LINE_OPTIONS = {
   behavior: "static",
   style: "solid",
   thickness: 1,
-  color: "#f59e0b",
-  labelBackgroundColor: "#f59e0b",
-  labelTextColor: "#0f172a",
+  color: "rgba(59,130,246,0.8)",
+  labelBackgroundColor: "#0b1220",
+  labelTextColor: "#60a5fa",
   labelBorderRadius: 3,
   showCloseButton: true,
   widgetPosition: "left",
@@ -73,12 +73,12 @@ var DEFAULT_ORDER_LINE_OPTIONS = {
 var DEFAULT_OPTIONS = {
   width: 720,
   height: 360,
-  backgroundColor: "#ffffff",
-  axisColor: "#94a3b8",
+  backgroundColor: "#101114",
+  axisColor: "#7f8289",
   axis: DEFAULT_AXIS_OPTIONS,
-  upColor: "#16a34a",
-  downColor: "#dc2626",
-  gridColor: "#e2e8f0",
+  upColor: "#2fb171",
+  downColor: "#d35a5a",
+  gridColor: "#252932",
   fontFamily: "Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
   candleBodyWidthRatio: 0.7,
   candleMinWidth: 0.5,
@@ -94,12 +94,12 @@ var DEFAULT_OPTIONS = {
   orderLines: [],
   tickerLine: {
     visible: true,
-    style: "dashed",
+    style: "dotted",
     thickness: 1,
-    color: "#22c55e",
-    labelBackgroundColor: "#22c55e",
+    color: "#38bdf8",
+    labelBackgroundColor: "#38bdf8",
     labelTextColor: "#0b1220",
-    labelBorderRadius: 6
+    labelBorderRadius: 3
   }
 };
 function createChart(element, options = {}) {
@@ -365,7 +365,7 @@ function createChart(element, options = {}) {
       return;
     }
     const lineY = clamp(yFromPrice(renderPrice), chartTop + 1, chartBottom - 1);
-    const color = mergedLine.color ?? (mergedLine.side === "buy" ? mergedOptions.upColor : mergedLine.side === "sell" ? mergedOptions.downColor : "#f59e0b");
+    const color = line.color ?? (mergedLine.type === "takeProfit" ? "rgba(45,212,191,0.86)" : mergedLine.type === "stop" ? "rgba(245,158,11,0.86)" : "rgba(59,130,246,0.8)");
     if (Number.isFinite(mergedLine.fillToPrice)) {
       const fillY = clamp(yFromPrice(mergedLine.fillToPrice), chartTop + 1, chartBottom - 1);
       const topY = Math.min(lineY, fillY);
@@ -476,7 +476,7 @@ function createChart(element, options = {}) {
     const borderRadius = Math.max(0, mergedLine.labelBorderRadius);
     const widgetBackground = mergedOptions.backgroundColor;
     const widgetBorder = color;
-    const textColor = mergedLine.labelTextColor;
+    const textColor = line.labelTextColor ?? (mergedLine.type === "takeProfit" ? "#5eead4" : mergedLine.type === "stop" ? "#fbbf24" : mergedLine.labelTextColor);
     const mainWidgetX = leftWidgetX + actionButtonsTotalWidth + actionButtonsGap;
     ctx.fillStyle = widgetBackground;
     fillRoundedRect(Math.round(mainWidgetX), Math.round(labelY), mainWidgetWidth, labelHeight, borderRadius);

package/docs/AI_CONTEXT.md

@@ -54,6 +54,7 @@ When using this library in another repo, include:
 
 1. `docs/API.md`
 2. `docs/EVENTS.md`
-3. this file (`AI_CONTEXT.md`)
+3. `docs/BRACKETS.md` (if trading/order workflows)
+4. this file (`AI_CONTEXT.md`)
 
 That gives enough context for most integration tasks without reading source.

package/docs/BRACKETS.md

@@ -0,0 +1,132 @@
+# Bracket Orders (TP/SL) Integration
+
+This library provides chart primitives and interaction events.  
+Bracket behavior (preview, pending, activation, OCO) is implemented in app state.
+
+Use this guide as the canonical flow.
+
+---
+
+## Conceptual Model
+
+Keep 3 layers in your app:
+
+1. **Preview layer** (before placement)
+   - `previewLimitPrice`
+   - `previewTpPrice`
+   - `previewSlPrice`
+2. **Pending bracket layer** (entry not filled yet)
+   - keyed by `entryOrderId`
+   - stores pending TP/SL values
+3. **Active order layer** (entry filled)
+   - active `market` position line
+   - active TP/SL exit lines
+
+The chart only renders what you feed via `setOrderLines(...)`.
+
+---
+
+## Recommended Flow
+
+### 1) Create preview limit
+
+- From click/double-click in plot, set `previewLimitPrice`.
+- Render preview order line with custom buttons:
+  - `Buy/Sell` (`action: "execute"`)
+  - `TP` (`action: "previewTp"`, `draggable: true`)
+  - `SL` (`action: "previewSl"`, `draggable: true`)
+
+### 2) Set preview TP/SL
+
+- On `onOrderAction`:
+  - `action === "previewTp"` -> set/update `previewTpPrice`
+  - `action === "previewSl"` -> set/update `previewSlPrice`
+- Use `event.dragging`:
+  - `true`: live drag updates
+  - `false`: drag end
+
+### 3) Validate side rules before execute
+
+- Buy entry:
+  - TP must be `>` limit
+  - SL must be `<` limit
+- Sell entry:
+  - TP must be `<` limit
+  - SL must be `>` limit
+
+If invalid, disable execute action in your state/UI.
+
+### 4) Execute preview
+
+On `action === "execute"`:
+
+- Create entry limit order.
+- If TP/SL exists, store them as **pending brackets** tied to `entryOrderId`.
+- Clear preview state.
+
+### 5) Convert pending to active on fill
+
+When your fill logic marks entry as filled:
+
+- Transition entry line to active position line (for example `market` + `follow` behavior).
+- Create active TP/SL lines from pending bracket values.
+- Remove pending bracket object.
+
+### 6) OCO behavior
+
+If active TP or SL fills:
+
+- Close/transition position as needed.
+- Remove the sibling exit leg (OCO cleanup).
+
+### 7) Position close behavior
+
+If user closes active position manually:
+
+- Remove linked active TP/SL lines too.
+- Remove any pending bracket bound to that entry id.
+
+---
+
+## Useful `OrderLineOptions` for Brackets
+
+- `actionButtons` (custom Buy/TP/SL controls)
+- `draggable` (line dragging)
+- `connectorToPrice` + `connectorStyle` + `connectorAnchorPaddingRight`
+- `fillToPrice` + `fillColor` (drag preview zone)
+- `widgetPosition`
+- `label`, `qty`, `pnl`
+
+---
+
+## Event Contract Essentials
+
+From `onOrderAction(event)`:
+
+- `event.action`: open string for app-defined workflows
+- `event.price`: provided for move/drag contexts
+- `event.dragging`: streaming drag state (`true` while dragging, `false` on release)
+- `event.orderId`: line identity to map back to app state
+
+Use ids as your state join key.
+
+---
+
+## Minimal State Skeleton
+
+```ts
+type PreviewState = {
+  side: "buy" | "sell";
+  limit: number | null;
+  tp: number | null;
+  sl: number | null;
+};
+
+type PendingBracket = {
+  entryOrderId: string;
+  tpPrice: number | null;
+  slPrice: number | null;
+};
+```
+
+Keep this state in your app and regenerate chart lines from it each render/update tick.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperprop-charting-library",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",