hyperprop-charting-library 0.1.3 → 0.1.5

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,13 @@ 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",
+  priceDecimals: 2,
+  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 +119,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 = {}) {
@@ -266,13 +267,8 @@ function createChart(element, options = {}) {
     return { min: nextMin, max: nextMax };
   };
   const formatPrice = (price) => {
-    if (price >= 1e3) {
-      return price.toFixed(0);
-    }
-    if (price >= 100) {
-      return price.toFixed(1);
-    }
-    return price.toFixed(2);
+    const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
+    return price.toFixed(decimals);
   };
   const parseData = (nextData) => {
     return nextData.map((point) => ({
@@ -389,7 +385,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 +496,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.d.cts

@@ -4,6 +4,7 @@ interface ChartOptions {
     backgroundColor?: string;
     axisColor?: string;
     axis?: AxisOptions;
+    priceDecimals?: number;
     upColor?: string;
     downColor?: string;
     gridColor?: string;

package/dist/index.d.ts

@@ -4,6 +4,7 @@ interface ChartOptions {
     backgroundColor?: string;
     axisColor?: string;
     axis?: AxisOptions;
+    priceDecimals?: number;
     upColor?: string;
     downColor?: string;
     gridColor?: string;

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,13 @@ 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",
+  priceDecimals: 2,
+  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 +95,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 = {}) {
@@ -242,13 +243,8 @@ function createChart(element, options = {}) {
     return { min: nextMin, max: nextMax };
   };
   const formatPrice = (price) => {
-    if (price >= 1e3) {
-      return price.toFixed(0);
-    }
-    if (price >= 100) {
-      return price.toFixed(1);
-    }
-    return price.toFixed(2);
+    const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
+    return price.toFixed(decimals);
   };
   const parseData = (nextData) => {
     return nextData.map((point) => ({
@@ -365,7 +361,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 +472,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/API.md

@@ -32,6 +32,7 @@ Top-level options:
 - `backgroundColor` (default `#ffffff`)
 - `axisColor` (legacy shorthand for axis line/text color)
 - `axis?: AxisOptions`
+- `priceDecimals` (default `2`, used for axis/ticker/line price labels)
 - `upColor` (default `#16a34a`)
 - `downColor` (default `#dc2626`)
 - `gridColor` (default `#e2e8f0`)

package/package.json

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