hyperprop-charting-library 0.1.72 → 0.1.73

package/dist/hyperprop-charting-library.cjs

@@ -21,9 +21,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   FIB_DEFAULT_PALETTE: () => FIB_DEFAULT_PALETTE,
+  POSITION_DEFAULT_COLORS: () => POSITION_DEFAULT_COLORS,
   createChart: () => createChart
 });
 module.exports = __toCommonJS(index_exports);
+var POSITION_DEFAULT_COLORS = ["#26a69a", "#ef5350", "#ffffff"];
 var FIB_DEFAULT_PALETTE = [
   "#787b86",
   "#f23645",
@@ -2405,10 +2407,14 @@ function createChart(element, options = {}) {
           const entryY = yFromPrice(entry.price);
           const targetY = yFromPrice(target.price);
           const stopY = yFromPrice(stop.price);
-          const profitFill = "rgba(38,166,154,0.16)";
-          const lossFill = "rgba(239,83,80,0.16)";
-          const profitLine = "rgba(38,166,154,0.9)";
-          const lossLine = "rgba(239,83,80,0.9)";
+          const isHex6 = (value) => !!value && /^#[0-9a-fA-F]{6}$/.test(value);
+          const profitColor = isHex6(drawing.colors[0]) ? drawing.colors[0] : "#26a69a";
+          const lossColor = isHex6(drawing.colors[1]) ? drawing.colors[1] : "#ef5350";
+          const labelTextColor = isHex6(drawing.colors[2]) ? drawing.colors[2] : "#ffffff";
+          const profitFill = hexToRgba(profitColor, 0.16);
+          const lossFill = hexToRgba(lossColor, 0.16);
+          const profitLine = profitColor;
+          const lossLine = lossColor;
           ctx.save();
           ctx.globalAlpha = draft ? 0.6 : 1;
           ctx.fillStyle = profitFill;
@@ -2460,7 +2466,7 @@ function createChart(element, options = {}) {
             const pillY = centerY - pillH / 2;
             ctx.fillStyle = bg;
             fillRoundedRect(pillX, pillY, pillW, pillH, 4);
-            ctx.fillStyle = "#ffffff";
+            ctx.fillStyle = labelTextColor;
             ctx.textAlign = "center";
             ctx.textBaseline = "middle";
             ctx.fillText(text, centerX, pillY + pillH / 2);
@@ -3909,7 +3915,8 @@ function createChart(element, options = {}) {
             normalizeDrawingPoint(point.index, stopPrice),
             normalizeDrawingPoint(point.index + width2, entryPrice)
           ],
-          color: defaults.color ?? "#2563eb",
+          color: defaults.color ?? (isLong ? "#26a69a" : "#ef5350"),
+          colors: defaults.colors ?? POSITION_DEFAULT_COLORS,
           style: defaults.style ?? "solid",
           width: defaults.width ?? 1
         })
@@ -4858,5 +4865,6 @@ function createChart(element, options = {}) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   FIB_DEFAULT_PALETTE,
+  POSITION_DEFAULT_COLORS,
   createChart
 });

package/dist/hyperprop-charting-library.d.ts

@@ -67,6 +67,8 @@ interface DrawingObjectOptions {
     label?: string;
     locked?: boolean;
 }
+/** Default colors for position tools: [profit, loss, label text]. */
+declare const POSITION_DEFAULT_COLORS: string[];
 /** Default multi-color palette for fib-retracement levels. */
 declare const FIB_DEFAULT_PALETTE: string[];
 interface DrawingSelectEvent {
@@ -455,4 +457,4 @@ interface ViewportState {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };
+export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };

package/dist/hyperprop-charting-library.js

@@ -1,4 +1,5 @@
 // src/index.ts
+var POSITION_DEFAULT_COLORS = ["#26a69a", "#ef5350", "#ffffff"];
 var FIB_DEFAULT_PALETTE = [
   "#787b86",
   "#f23645",
@@ -2380,10 +2381,14 @@ function createChart(element, options = {}) {
           const entryY = yFromPrice(entry.price);
           const targetY = yFromPrice(target.price);
           const stopY = yFromPrice(stop.price);
-          const profitFill = "rgba(38,166,154,0.16)";
-          const lossFill = "rgba(239,83,80,0.16)";
-          const profitLine = "rgba(38,166,154,0.9)";
-          const lossLine = "rgba(239,83,80,0.9)";
+          const isHex6 = (value) => !!value && /^#[0-9a-fA-F]{6}$/.test(value);
+          const profitColor = isHex6(drawing.colors[0]) ? drawing.colors[0] : "#26a69a";
+          const lossColor = isHex6(drawing.colors[1]) ? drawing.colors[1] : "#ef5350";
+          const labelTextColor = isHex6(drawing.colors[2]) ? drawing.colors[2] : "#ffffff";
+          const profitFill = hexToRgba(profitColor, 0.16);
+          const lossFill = hexToRgba(lossColor, 0.16);
+          const profitLine = profitColor;
+          const lossLine = lossColor;
           ctx.save();
           ctx.globalAlpha = draft ? 0.6 : 1;
           ctx.fillStyle = profitFill;
@@ -2435,7 +2440,7 @@ function createChart(element, options = {}) {
             const pillY = centerY - pillH / 2;
             ctx.fillStyle = bg;
             fillRoundedRect(pillX, pillY, pillW, pillH, 4);
-            ctx.fillStyle = "#ffffff";
+            ctx.fillStyle = labelTextColor;
             ctx.textAlign = "center";
             ctx.textBaseline = "middle";
             ctx.fillText(text, centerX, pillY + pillH / 2);
@@ -3884,7 +3889,8 @@ function createChart(element, options = {}) {
             normalizeDrawingPoint(point.index, stopPrice),
             normalizeDrawingPoint(point.index + width2, entryPrice)
           ],
-          color: defaults.color ?? "#2563eb",
+          color: defaults.color ?? (isLong ? "#26a69a" : "#ef5350"),
+          colors: defaults.colors ?? POSITION_DEFAULT_COLORS,
           style: defaults.style ?? "solid",
           width: defaults.width ?? 1
         })
@@ -4832,5 +4838,6 @@ function createChart(element, options = {}) {
 }
 export {
   FIB_DEFAULT_PALETTE,
+  POSITION_DEFAULT_COLORS,
   createChart
 };

package/dist/index.cjs

@@ -21,9 +21,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   FIB_DEFAULT_PALETTE: () => FIB_DEFAULT_PALETTE,
+  POSITION_DEFAULT_COLORS: () => POSITION_DEFAULT_COLORS,
   createChart: () => createChart
 });
 module.exports = __toCommonJS(index_exports);
+var POSITION_DEFAULT_COLORS = ["#26a69a", "#ef5350", "#ffffff"];
 var FIB_DEFAULT_PALETTE = [
   "#787b86",
   "#f23645",
@@ -2405,10 +2407,14 @@ function createChart(element, options = {}) {
           const entryY = yFromPrice(entry.price);
           const targetY = yFromPrice(target.price);
           const stopY = yFromPrice(stop.price);
-          const profitFill = "rgba(38,166,154,0.16)";
-          const lossFill = "rgba(239,83,80,0.16)";
-          const profitLine = "rgba(38,166,154,0.9)";
-          const lossLine = "rgba(239,83,80,0.9)";
+          const isHex6 = (value) => !!value && /^#[0-9a-fA-F]{6}$/.test(value);
+          const profitColor = isHex6(drawing.colors[0]) ? drawing.colors[0] : "#26a69a";
+          const lossColor = isHex6(drawing.colors[1]) ? drawing.colors[1] : "#ef5350";
+          const labelTextColor = isHex6(drawing.colors[2]) ? drawing.colors[2] : "#ffffff";
+          const profitFill = hexToRgba(profitColor, 0.16);
+          const lossFill = hexToRgba(lossColor, 0.16);
+          const profitLine = profitColor;
+          const lossLine = lossColor;
           ctx.save();
           ctx.globalAlpha = draft ? 0.6 : 1;
           ctx.fillStyle = profitFill;
@@ -2460,7 +2466,7 @@ function createChart(element, options = {}) {
             const pillY = centerY - pillH / 2;
             ctx.fillStyle = bg;
             fillRoundedRect(pillX, pillY, pillW, pillH, 4);
-            ctx.fillStyle = "#ffffff";
+            ctx.fillStyle = labelTextColor;
             ctx.textAlign = "center";
             ctx.textBaseline = "middle";
             ctx.fillText(text, centerX, pillY + pillH / 2);
@@ -3909,7 +3915,8 @@ function createChart(element, options = {}) {
             normalizeDrawingPoint(point.index, stopPrice),
             normalizeDrawingPoint(point.index + width2, entryPrice)
           ],
-          color: defaults.color ?? "#2563eb",
+          color: defaults.color ?? (isLong ? "#26a69a" : "#ef5350"),
+          colors: defaults.colors ?? POSITION_DEFAULT_COLORS,
           style: defaults.style ?? "solid",
           width: defaults.width ?? 1
         })
@@ -4858,5 +4865,6 @@ function createChart(element, options = {}) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   FIB_DEFAULT_PALETTE,
+  POSITION_DEFAULT_COLORS,
   createChart
 });

package/dist/index.d.cts

@@ -67,6 +67,8 @@ interface DrawingObjectOptions {
     label?: string;
     locked?: boolean;
 }
+/** Default colors for position tools: [profit, loss, label text]. */
+declare const POSITION_DEFAULT_COLORS: string[];
 /** Default multi-color palette for fib-retracement levels. */
 declare const FIB_DEFAULT_PALETTE: string[];
 interface DrawingSelectEvent {
@@ -455,4 +457,4 @@ interface ViewportState {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };
+export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };

package/dist/index.d.ts

@@ -67,6 +67,8 @@ interface DrawingObjectOptions {
     label?: string;
     locked?: boolean;
 }
+/** Default colors for position tools: [profit, loss, label text]. */
+declare const POSITION_DEFAULT_COLORS: string[];
 /** Default multi-color palette for fib-retracement levels. */
 declare const FIB_DEFAULT_PALETTE: string[];
 interface DrawingSelectEvent {
@@ -455,4 +457,4 @@ interface ViewportState {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };
+export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };

package/dist/index.js

@@ -1,4 +1,5 @@
 // src/index.ts
+var POSITION_DEFAULT_COLORS = ["#26a69a", "#ef5350", "#ffffff"];
 var FIB_DEFAULT_PALETTE = [
   "#787b86",
   "#f23645",
@@ -2380,10 +2381,14 @@ function createChart(element, options = {}) {
           const entryY = yFromPrice(entry.price);
           const targetY = yFromPrice(target.price);
           const stopY = yFromPrice(stop.price);
-          const profitFill = "rgba(38,166,154,0.16)";
-          const lossFill = "rgba(239,83,80,0.16)";
-          const profitLine = "rgba(38,166,154,0.9)";
-          const lossLine = "rgba(239,83,80,0.9)";
+          const isHex6 = (value) => !!value && /^#[0-9a-fA-F]{6}$/.test(value);
+          const profitColor = isHex6(drawing.colors[0]) ? drawing.colors[0] : "#26a69a";
+          const lossColor = isHex6(drawing.colors[1]) ? drawing.colors[1] : "#ef5350";
+          const labelTextColor = isHex6(drawing.colors[2]) ? drawing.colors[2] : "#ffffff";
+          const profitFill = hexToRgba(profitColor, 0.16);
+          const lossFill = hexToRgba(lossColor, 0.16);
+          const profitLine = profitColor;
+          const lossLine = lossColor;
           ctx.save();
           ctx.globalAlpha = draft ? 0.6 : 1;
           ctx.fillStyle = profitFill;
@@ -2435,7 +2440,7 @@ function createChart(element, options = {}) {
             const pillY = centerY - pillH / 2;
             ctx.fillStyle = bg;
             fillRoundedRect(pillX, pillY, pillW, pillH, 4);
-            ctx.fillStyle = "#ffffff";
+            ctx.fillStyle = labelTextColor;
             ctx.textAlign = "center";
             ctx.textBaseline = "middle";
             ctx.fillText(text, centerX, pillY + pillH / 2);
@@ -3884,7 +3889,8 @@ function createChart(element, options = {}) {
             normalizeDrawingPoint(point.index, stopPrice),
             normalizeDrawingPoint(point.index + width2, entryPrice)
           ],
-          color: defaults.color ?? "#2563eb",
+          color: defaults.color ?? (isLong ? "#26a69a" : "#ef5350"),
+          colors: defaults.colors ?? POSITION_DEFAULT_COLORS,
           style: defaults.style ?? "solid",
           width: defaults.width ?? 1
         })
@@ -4832,5 +4838,6 @@ function createChart(element, options = {}) {
 }
 export {
   FIB_DEFAULT_PALETTE,
+  POSITION_DEFAULT_COLORS,
   createChart
 };

package/docs/API.md

@@ -422,7 +422,7 @@ Drawings are user-created chart tools, separate from indicators. They are intera
   - `ray`: two-point line that extends infinitely past the second point
   - `fib-retracement`: two-point retracement with levels/bands
   - `fib-extension`: trend-based three-point extension (click trend start, trend end, then the projection origin); levels project from the third point by the first→second move
-  - `long-position` / `short-position`: risk/reward forecasting box (single click drops a default box). Points are `[entry, target, stop, rightEdge]`; anchors are target/entry/stop on the left and a time-width handle on the right. Labels show price, % move, ticks, and risk/reward ratio.
+  - `long-position` / `short-position`: risk/reward forecasting box (single click drops a default box). Points are `[entry, target, stop, rightEdge]`; anchors are target/entry/stop on the left and a time-width handle on the right. Labels show price, % move, ticks, and risk/reward ratio. `color` sets the entry line; `colors` is `[profitColor, lossColor, labelTextColor]` (defaults `POSITION_DEFAULT_COLORS`).
 - `points: DrawingPoint[]`
 - `visible?: boolean`
 - `color?: string`

package/package.json

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