hyperprop-charting-library 0.1.103 → 0.1.105

package/dist/hyperprop-charting-library.cjs

@@ -75,7 +75,11 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   priceActionButtonSize: 16,
   priceActionButtonGap: 4,
   priceActionButtonRounded: true,
-  priceActionButtonBorderRadius: 8
+  priceActionButtonBorderRadius: 8,
+  sideHintLeft: "",
+  sideHintRight: "",
+  sideHintLeftColor: "#26a69a",
+  sideHintRightColor: "#ef5350"
 };
 var DEFAULT_WATERMARK_OPTIONS = {
   visible: false,
@@ -1292,10 +1296,19 @@ function createChart(element, options = {}) {
     }
     return Math.round(price / tickSize) * tickSize;
   };
+  const groupThousands = (value, decimals) => {
+    const negative = value < 0;
+    const fixed = Math.abs(value).toFixed(decimals);
+    const dot = fixed.indexOf(".");
+    const intPart = dot === -1 ? fixed : fixed.slice(0, dot);
+    const decPart = dot === -1 ? "" : fixed.slice(dot);
+    const grouped = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    return `${negative ? "-" : ""}${grouped}${decPart}`;
+  };
   const formatPrice = (price) => {
     const rounded = quantizeToTickSize(price);
     const decimals = getDisplayPriceDecimals();
-    return rounded.toFixed(decimals);
+    return groupThousands(rounded, decimals);
   };
   const roundToPricePrecision = (price) => {
     const rounded = quantizeToTickSize(price);
@@ -1333,7 +1346,7 @@ function createChart(element, options = {}) {
     }
     const observedDigits = maxAbsPrice >= 1 ? Math.floor(Math.log10(maxAbsPrice)) + 1 : 1;
     const integerDigits = Math.max(configuredDigits, observedDigits);
-    const integerPart = "8".repeat(integerDigits);
+    const integerPart = "8".repeat(integerDigits).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     const decimalPart = decimals > 0 ? `.${"8".repeat(decimals)}` : "";
     return `${integerPart}${decimalPart}`;
   };
@@ -3008,6 +3021,25 @@ function createChart(element, options = {}) {
         }
         ctx.restore();
       }
+      if (crosshair.sideHintLeft || crosshair.sideHintRight) {
+        ctx.save();
+        ctx.font = `600 11px ${mergedOptions.fontFamily}`;
+        ctx.textBaseline = "middle";
+        ctx.setLineDash([]);
+        const hintY = clamp(cy - 14, chartTop + 8, chartBottom - 8);
+        const hintGap = 8;
+        if (crosshair.sideHintLeft) {
+          ctx.fillStyle = crosshair.sideHintLeftColor;
+          ctx.textAlign = "right";
+          ctx.fillText(crosshair.sideHintLeft, cx - hintGap, hintY);
+        }
+        if (crosshair.sideHintRight) {
+          ctx.fillStyle = crosshair.sideHintRightColor;
+          ctx.textAlign = "left";
+          ctx.fillText(crosshair.sideHintRight, cx + hintGap, hintY);
+        }
+        ctx.restore();
+      }
     }
     ctx.restore();
     const positionAxisGutter = Math.max(0, width - chartRight);
@@ -3432,16 +3464,18 @@ function createChart(element, options = {}) {
         ctx.font = prevFont;
       }
     }
+    const axisStepMs = getTimeStepMs();
+    const axisIntraday = axisStepMs > 0 && axisStepMs < 24 * 60 * 60 * 1e3;
+    let prevAxisTickTime = null;
     for (let index = tickStartIndex; index <= visibleTickEnd; index += xStep) {
       const tickTime = getTimeForIndex(index);
       if (!tickTime) {
         continue;
       }
       const x = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
-      const timeLabel = tickTime.toLocaleDateString(void 0, {
-        month: "short",
-        day: "numeric"
-      });
+      const isNewDay = !prevAxisTickTime || prevAxisTickTime.getDate() !== tickTime.getDate() || prevAxisTickTime.getMonth() !== tickTime.getMonth() || prevAxisTickTime.getFullYear() !== tickTime.getFullYear();
+      const timeLabel = axisIntraday && !isNewDay ? tickTime.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit", hour12: false }) : tickTime.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+      prevAxisTickTime = tickTime;
       const prevFont = ctx.font;
       ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
       drawText(timeLabel, x, fullChartBottom + 8, "center", "top", xAxis.textColor);

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

@@ -241,6 +241,10 @@ interface CrosshairOptions {
     priceActionButtonGap?: number;
     priceActionButtonRounded?: boolean;
     priceActionButtonBorderRadius?: number;
+    sideHintLeft?: string;
+    sideHintRight?: string;
+    sideHintLeftColor?: string;
+    sideHintRightColor?: string;
 }
 interface WatermarkOptions {
     visible?: boolean;

package/dist/hyperprop-charting-library.js

@@ -49,7 +49,11 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   priceActionButtonSize: 16,
   priceActionButtonGap: 4,
   priceActionButtonRounded: true,
-  priceActionButtonBorderRadius: 8
+  priceActionButtonBorderRadius: 8,
+  sideHintLeft: "",
+  sideHintRight: "",
+  sideHintLeftColor: "#26a69a",
+  sideHintRightColor: "#ef5350"
 };
 var DEFAULT_WATERMARK_OPTIONS = {
   visible: false,
@@ -1266,10 +1270,19 @@ function createChart(element, options = {}) {
     }
     return Math.round(price / tickSize) * tickSize;
   };
+  const groupThousands = (value, decimals) => {
+    const negative = value < 0;
+    const fixed = Math.abs(value).toFixed(decimals);
+    const dot = fixed.indexOf(".");
+    const intPart = dot === -1 ? fixed : fixed.slice(0, dot);
+    const decPart = dot === -1 ? "" : fixed.slice(dot);
+    const grouped = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    return `${negative ? "-" : ""}${grouped}${decPart}`;
+  };
   const formatPrice = (price) => {
     const rounded = quantizeToTickSize(price);
     const decimals = getDisplayPriceDecimals();
-    return rounded.toFixed(decimals);
+    return groupThousands(rounded, decimals);
   };
   const roundToPricePrecision = (price) => {
     const rounded = quantizeToTickSize(price);
@@ -1307,7 +1320,7 @@ function createChart(element, options = {}) {
     }
     const observedDigits = maxAbsPrice >= 1 ? Math.floor(Math.log10(maxAbsPrice)) + 1 : 1;
     const integerDigits = Math.max(configuredDigits, observedDigits);
-    const integerPart = "8".repeat(integerDigits);
+    const integerPart = "8".repeat(integerDigits).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     const decimalPart = decimals > 0 ? `.${"8".repeat(decimals)}` : "";
     return `${integerPart}${decimalPart}`;
   };
@@ -2982,6 +2995,25 @@ function createChart(element, options = {}) {
         }
         ctx.restore();
       }
+      if (crosshair.sideHintLeft || crosshair.sideHintRight) {
+        ctx.save();
+        ctx.font = `600 11px ${mergedOptions.fontFamily}`;
+        ctx.textBaseline = "middle";
+        ctx.setLineDash([]);
+        const hintY = clamp(cy - 14, chartTop + 8, chartBottom - 8);
+        const hintGap = 8;
+        if (crosshair.sideHintLeft) {
+          ctx.fillStyle = crosshair.sideHintLeftColor;
+          ctx.textAlign = "right";
+          ctx.fillText(crosshair.sideHintLeft, cx - hintGap, hintY);
+        }
+        if (crosshair.sideHintRight) {
+          ctx.fillStyle = crosshair.sideHintRightColor;
+          ctx.textAlign = "left";
+          ctx.fillText(crosshair.sideHintRight, cx + hintGap, hintY);
+        }
+        ctx.restore();
+      }
     }
     ctx.restore();
     const positionAxisGutter = Math.max(0, width - chartRight);
@@ -3406,16 +3438,18 @@ function createChart(element, options = {}) {
         ctx.font = prevFont;
       }
     }
+    const axisStepMs = getTimeStepMs();
+    const axisIntraday = axisStepMs > 0 && axisStepMs < 24 * 60 * 60 * 1e3;
+    let prevAxisTickTime = null;
     for (let index = tickStartIndex; index <= visibleTickEnd; index += xStep) {
       const tickTime = getTimeForIndex(index);
       if (!tickTime) {
         continue;
       }
       const x = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
-      const timeLabel = tickTime.toLocaleDateString(void 0, {
-        month: "short",
-        day: "numeric"
-      });
+      const isNewDay = !prevAxisTickTime || prevAxisTickTime.getDate() !== tickTime.getDate() || prevAxisTickTime.getMonth() !== tickTime.getMonth() || prevAxisTickTime.getFullYear() !== tickTime.getFullYear();
+      const timeLabel = axisIntraday && !isNewDay ? tickTime.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit", hour12: false }) : tickTime.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+      prevAxisTickTime = tickTime;
       const prevFont = ctx.font;
       ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
       drawText(timeLabel, x, fullChartBottom + 8, "center", "top", xAxis.textColor);

package/dist/index.cjs

@@ -75,7 +75,11 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   priceActionButtonSize: 16,
   priceActionButtonGap: 4,
   priceActionButtonRounded: true,
-  priceActionButtonBorderRadius: 8
+  priceActionButtonBorderRadius: 8,
+  sideHintLeft: "",
+  sideHintRight: "",
+  sideHintLeftColor: "#26a69a",
+  sideHintRightColor: "#ef5350"
 };
 var DEFAULT_WATERMARK_OPTIONS = {
   visible: false,
@@ -1292,10 +1296,19 @@ function createChart(element, options = {}) {
     }
     return Math.round(price / tickSize) * tickSize;
   };
+  const groupThousands = (value, decimals) => {
+    const negative = value < 0;
+    const fixed = Math.abs(value).toFixed(decimals);
+    const dot = fixed.indexOf(".");
+    const intPart = dot === -1 ? fixed : fixed.slice(0, dot);
+    const decPart = dot === -1 ? "" : fixed.slice(dot);
+    const grouped = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    return `${negative ? "-" : ""}${grouped}${decPart}`;
+  };
   const formatPrice = (price) => {
     const rounded = quantizeToTickSize(price);
     const decimals = getDisplayPriceDecimals();
-    return rounded.toFixed(decimals);
+    return groupThousands(rounded, decimals);
   };
   const roundToPricePrecision = (price) => {
     const rounded = quantizeToTickSize(price);
@@ -1333,7 +1346,7 @@ function createChart(element, options = {}) {
     }
     const observedDigits = maxAbsPrice >= 1 ? Math.floor(Math.log10(maxAbsPrice)) + 1 : 1;
     const integerDigits = Math.max(configuredDigits, observedDigits);
-    const integerPart = "8".repeat(integerDigits);
+    const integerPart = "8".repeat(integerDigits).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     const decimalPart = decimals > 0 ? `.${"8".repeat(decimals)}` : "";
     return `${integerPart}${decimalPart}`;
   };
@@ -3008,6 +3021,25 @@ function createChart(element, options = {}) {
         }
         ctx.restore();
       }
+      if (crosshair.sideHintLeft || crosshair.sideHintRight) {
+        ctx.save();
+        ctx.font = `600 11px ${mergedOptions.fontFamily}`;
+        ctx.textBaseline = "middle";
+        ctx.setLineDash([]);
+        const hintY = clamp(cy - 14, chartTop + 8, chartBottom - 8);
+        const hintGap = 8;
+        if (crosshair.sideHintLeft) {
+          ctx.fillStyle = crosshair.sideHintLeftColor;
+          ctx.textAlign = "right";
+          ctx.fillText(crosshair.sideHintLeft, cx - hintGap, hintY);
+        }
+        if (crosshair.sideHintRight) {
+          ctx.fillStyle = crosshair.sideHintRightColor;
+          ctx.textAlign = "left";
+          ctx.fillText(crosshair.sideHintRight, cx + hintGap, hintY);
+        }
+        ctx.restore();
+      }
     }
     ctx.restore();
     const positionAxisGutter = Math.max(0, width - chartRight);
@@ -3432,16 +3464,18 @@ function createChart(element, options = {}) {
         ctx.font = prevFont;
       }
     }
+    const axisStepMs = getTimeStepMs();
+    const axisIntraday = axisStepMs > 0 && axisStepMs < 24 * 60 * 60 * 1e3;
+    let prevAxisTickTime = null;
     for (let index = tickStartIndex; index <= visibleTickEnd; index += xStep) {
       const tickTime = getTimeForIndex(index);
       if (!tickTime) {
         continue;
       }
       const x = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
-      const timeLabel = tickTime.toLocaleDateString(void 0, {
-        month: "short",
-        day: "numeric"
-      });
+      const isNewDay = !prevAxisTickTime || prevAxisTickTime.getDate() !== tickTime.getDate() || prevAxisTickTime.getMonth() !== tickTime.getMonth() || prevAxisTickTime.getFullYear() !== tickTime.getFullYear();
+      const timeLabel = axisIntraday && !isNewDay ? tickTime.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit", hour12: false }) : tickTime.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+      prevAxisTickTime = tickTime;
       const prevFont = ctx.font;
       ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
       drawText(timeLabel, x, fullChartBottom + 8, "center", "top", xAxis.textColor);

package/dist/index.d.cts

@@ -241,6 +241,10 @@ interface CrosshairOptions {
     priceActionButtonGap?: number;
     priceActionButtonRounded?: boolean;
     priceActionButtonBorderRadius?: number;
+    sideHintLeft?: string;
+    sideHintRight?: string;
+    sideHintLeftColor?: string;
+    sideHintRightColor?: string;
 }
 interface WatermarkOptions {
     visible?: boolean;

package/dist/index.d.ts

@@ -241,6 +241,10 @@ interface CrosshairOptions {
     priceActionButtonGap?: number;
     priceActionButtonRounded?: boolean;
     priceActionButtonBorderRadius?: number;
+    sideHintLeft?: string;
+    sideHintRight?: string;
+    sideHintLeftColor?: string;
+    sideHintRightColor?: string;
 }
 interface WatermarkOptions {
     visible?: boolean;

package/dist/index.js

@@ -49,7 +49,11 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   priceActionButtonSize: 16,
   priceActionButtonGap: 4,
   priceActionButtonRounded: true,
-  priceActionButtonBorderRadius: 8
+  priceActionButtonBorderRadius: 8,
+  sideHintLeft: "",
+  sideHintRight: "",
+  sideHintLeftColor: "#26a69a",
+  sideHintRightColor: "#ef5350"
 };
 var DEFAULT_WATERMARK_OPTIONS = {
   visible: false,
@@ -1266,10 +1270,19 @@ function createChart(element, options = {}) {
     }
     return Math.round(price / tickSize) * tickSize;
   };
+  const groupThousands = (value, decimals) => {
+    const negative = value < 0;
+    const fixed = Math.abs(value).toFixed(decimals);
+    const dot = fixed.indexOf(".");
+    const intPart = dot === -1 ? fixed : fixed.slice(0, dot);
+    const decPart = dot === -1 ? "" : fixed.slice(dot);
+    const grouped = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    return `${negative ? "-" : ""}${grouped}${decPart}`;
+  };
   const formatPrice = (price) => {
     const rounded = quantizeToTickSize(price);
     const decimals = getDisplayPriceDecimals();
-    return rounded.toFixed(decimals);
+    return groupThousands(rounded, decimals);
   };
   const roundToPricePrecision = (price) => {
     const rounded = quantizeToTickSize(price);
@@ -1307,7 +1320,7 @@ function createChart(element, options = {}) {
     }
     const observedDigits = maxAbsPrice >= 1 ? Math.floor(Math.log10(maxAbsPrice)) + 1 : 1;
     const integerDigits = Math.max(configuredDigits, observedDigits);
-    const integerPart = "8".repeat(integerDigits);
+    const integerPart = "8".repeat(integerDigits).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     const decimalPart = decimals > 0 ? `.${"8".repeat(decimals)}` : "";
     return `${integerPart}${decimalPart}`;
   };
@@ -2982,6 +2995,25 @@ function createChart(element, options = {}) {
         }
         ctx.restore();
       }
+      if (crosshair.sideHintLeft || crosshair.sideHintRight) {
+        ctx.save();
+        ctx.font = `600 11px ${mergedOptions.fontFamily}`;
+        ctx.textBaseline = "middle";
+        ctx.setLineDash([]);
+        const hintY = clamp(cy - 14, chartTop + 8, chartBottom - 8);
+        const hintGap = 8;
+        if (crosshair.sideHintLeft) {
+          ctx.fillStyle = crosshair.sideHintLeftColor;
+          ctx.textAlign = "right";
+          ctx.fillText(crosshair.sideHintLeft, cx - hintGap, hintY);
+        }
+        if (crosshair.sideHintRight) {
+          ctx.fillStyle = crosshair.sideHintRightColor;
+          ctx.textAlign = "left";
+          ctx.fillText(crosshair.sideHintRight, cx + hintGap, hintY);
+        }
+        ctx.restore();
+      }
     }
     ctx.restore();
     const positionAxisGutter = Math.max(0, width - chartRight);
@@ -3406,16 +3438,18 @@ function createChart(element, options = {}) {
         ctx.font = prevFont;
       }
     }
+    const axisStepMs = getTimeStepMs();
+    const axisIntraday = axisStepMs > 0 && axisStepMs < 24 * 60 * 60 * 1e3;
+    let prevAxisTickTime = null;
     for (let index = tickStartIndex; index <= visibleTickEnd; index += xStep) {
       const tickTime = getTimeForIndex(index);
       if (!tickTime) {
         continue;
       }
       const x = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
-      const timeLabel = tickTime.toLocaleDateString(void 0, {
-        month: "short",
-        day: "numeric"
-      });
+      const isNewDay = !prevAxisTickTime || prevAxisTickTime.getDate() !== tickTime.getDate() || prevAxisTickTime.getMonth() !== tickTime.getMonth() || prevAxisTickTime.getFullYear() !== tickTime.getFullYear();
+      const timeLabel = axisIntraday && !isNewDay ? tickTime.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit", hour12: false }) : tickTime.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+      prevAxisTickTime = tickTime;
       const prevFont = ctx.font;
       ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
       drawText(timeLabel, x, fullChartBottom + 8, "center", "top", xAxis.textColor);

package/package.json

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