npm - hyperprop-charting-library - Versions diffs - 0.1.102 → 0.1.104 - Mend

hyperprop-charting-library 0.1.102 → 0.1.104

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/hyperprop-charting-library.cjs +62 -38
package/dist/hyperprop-charting-library.js +62 -38
package/dist/index.cjs +62 -38
package/dist/index.js +62 -38
package/package.json +1 -1

package/dist/hyperprop-charting-library.cjs CHANGED Viewed

@@ -1292,10 +1292,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 +1342,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}`;
   };
@@ -2913,6 +2922,32 @@ function createChart(element, options = {}) {
         }
         return lo;
       };
+      const groups = /* @__PURE__ */ new Map();
+      for (const marker of tradeMarkers) {
+        const ms = typeof marker.time === "number" ? marker.time : Date.parse(String(marker.time));
+        if (!Number.isFinite(ms)) continue;
+        const index = indexForTime(ms);
+        if (index === null || index < visibleStart || index > visibleEnd) continue;
+        const side = marker.side === "buy" ? "buy" : "sell";
+        const qty = Math.max(0, marker.qty ?? 0);
+        const weight = qty > 0 ? qty : 1;
+        const key = `${index}:${side}`;
+        const existing = groups.get(key);
+        if (existing) {
+          existing.qty += qty;
+          existing.priceQty += marker.price * weight;
+        } else {
+          groups.set(key, {
+            index,
+            side,
+            qty,
+            priceQty: marker.price * weight,
+            ...marker.color === void 0 ? {} : { color: marker.color },
+            ...marker.textColor === void 0 ? {} : { textColor: marker.textColor },
+            ...marker.text === void 0 ? {} : { text: marker.text }
+          });
+        }
+      }
       const prevFont = ctx.font;
       const prevAlign = ctx.textAlign;
       const prevBaseline = ctx.textBaseline;
@@ -2923,42 +2958,29 @@ function createChart(element, options = {}) {
       const arrowH = 8;
       const gap = 5;
       const labelOffset = arrowH + 8;
-      for (const marker of tradeMarkers) {
-        const ms = typeof marker.time === "number" ? marker.time : Date.parse(String(marker.time));
-        if (!Number.isFinite(ms)) continue;
-        const index = indexForTime(ms);
-        if (index === null || index < visibleStart || index > visibleEnd) continue;
-        const bar = data[index];
+      for (const group of groups.values()) {
+        const bar = data[group.index];
         if (!bar) continue;
-        const x = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
+        const x = chartLeft + (group.index + 0.5 - xStart) / xSpan * chartWidth;
         if (x < chartLeft - 20 || x > chartRight + 20) continue;
-        const isBuy = marker.side === "buy";
-        const arrowColor = marker.color ?? (isBuy ? "#2962ff" : "#f23645");
-        const textColor = marker.textColor ?? "#d1d4dc";
-        const label = marker.text ?? `${marker.qty ?? ""}${marker.qty != null ? " @ " : ""}${formatPrice(marker.price)}`.trim();
+        const isBuy = group.side === "buy";
+        const arrowColor = group.color ?? (isBuy ? "#2962ff" : "#f23645");
+        const textColor = group.textColor ?? "#d1d4dc";
+        const weightTotal = group.qty > 0 ? group.qty : 1;
+        const avgPrice = group.priceQty / weightTotal;
+        const label = group.text ?? `${group.qty > 0 ? `${group.qty} @ ` : ""}${formatPrice(avgPrice)}`.trim();
         ctx.save();
         ctx.fillStyle = arrowColor;
-        if (isBuy) {
-          const tipY = yFromPrice(bar.l) + gap;
-          ctx.beginPath();
-          ctx.moveTo(x, tipY);
-          ctx.lineTo(x - arrowHalf, tipY + arrowH);
-          ctx.lineTo(x + arrowHalf, tipY + arrowH);
-          ctx.closePath();
-          ctx.fill();
-          ctx.fillStyle = textColor;
-          ctx.fillText(label, Math.round(x), Math.round(tipY + labelOffset));
-        } else {
-          const tipY = yFromPrice(bar.h) - gap;
-          ctx.beginPath();
-          ctx.moveTo(x, tipY);
-          ctx.lineTo(x - arrowHalf, tipY - arrowH);
-          ctx.lineTo(x + arrowHalf, tipY - arrowH);
-          ctx.closePath();
-          ctx.fill();
-          ctx.fillStyle = textColor;
-          ctx.fillText(label, Math.round(x), Math.round(tipY - labelOffset));
-        }
+        const tipY = isBuy ? yFromPrice(bar.l) + gap : yFromPrice(bar.h) - gap;
+        const dir = isBuy ? 1 : -1;
+        ctx.beginPath();
+        ctx.moveTo(x, tipY);
+        ctx.lineTo(x - arrowHalf, tipY + arrowH * dir);
+        ctx.lineTo(x + arrowHalf, tipY + arrowH * dir);
+        ctx.closePath();
+        ctx.fill();
+        ctx.fillStyle = textColor;
+        ctx.fillText(label, Math.round(x), Math.round(tipY + labelOffset * dir));
         ctx.restore();
       }
       ctx.font = prevFont;
@@ -3419,16 +3441,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.js CHANGED Viewed

@@ -1266,10 +1266,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 +1316,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}`;
   };
@@ -2887,6 +2896,32 @@ function createChart(element, options = {}) {
         }
         return lo;
       };
+      const groups = /* @__PURE__ */ new Map();
+      for (const marker of tradeMarkers) {
+        const ms = typeof marker.time === "number" ? marker.time : Date.parse(String(marker.time));
+        if (!Number.isFinite(ms)) continue;
+        const index = indexForTime(ms);
+        if (index === null || index < visibleStart || index > visibleEnd) continue;
+        const side = marker.side === "buy" ? "buy" : "sell";
+        const qty = Math.max(0, marker.qty ?? 0);
+        const weight = qty > 0 ? qty : 1;
+        const key = `${index}:${side}`;
+        const existing = groups.get(key);
+        if (existing) {
+          existing.qty += qty;
+          existing.priceQty += marker.price * weight;
+        } else {
+          groups.set(key, {
+            index,
+            side,
+            qty,
+            priceQty: marker.price * weight,
+            ...marker.color === void 0 ? {} : { color: marker.color },
+            ...marker.textColor === void 0 ? {} : { textColor: marker.textColor },
+            ...marker.text === void 0 ? {} : { text: marker.text }
+          });
+        }
+      }
       const prevFont = ctx.font;
       const prevAlign = ctx.textAlign;
       const prevBaseline = ctx.textBaseline;
@@ -2897,42 +2932,29 @@ function createChart(element, options = {}) {
       const arrowH = 8;
       const gap = 5;
       const labelOffset = arrowH + 8;
-      for (const marker of tradeMarkers) {
-        const ms = typeof marker.time === "number" ? marker.time : Date.parse(String(marker.time));
-        if (!Number.isFinite(ms)) continue;
-        const index = indexForTime(ms);
-        if (index === null || index < visibleStart || index > visibleEnd) continue;
-        const bar = data[index];
+      for (const group of groups.values()) {
+        const bar = data[group.index];
         if (!bar) continue;
-        const x = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
+        const x = chartLeft + (group.index + 0.5 - xStart) / xSpan * chartWidth;
         if (x < chartLeft - 20 || x > chartRight + 20) continue;
-        const isBuy = marker.side === "buy";
-        const arrowColor = marker.color ?? (isBuy ? "#2962ff" : "#f23645");
-        const textColor = marker.textColor ?? "#d1d4dc";
-        const label = marker.text ?? `${marker.qty ?? ""}${marker.qty != null ? " @ " : ""}${formatPrice(marker.price)}`.trim();
+        const isBuy = group.side === "buy";
+        const arrowColor = group.color ?? (isBuy ? "#2962ff" : "#f23645");
+        const textColor = group.textColor ?? "#d1d4dc";
+        const weightTotal = group.qty > 0 ? group.qty : 1;
+        const avgPrice = group.priceQty / weightTotal;
+        const label = group.text ?? `${group.qty > 0 ? `${group.qty} @ ` : ""}${formatPrice(avgPrice)}`.trim();
         ctx.save();
         ctx.fillStyle = arrowColor;
-        if (isBuy) {
-          const tipY = yFromPrice(bar.l) + gap;
-          ctx.beginPath();
-          ctx.moveTo(x, tipY);
-          ctx.lineTo(x - arrowHalf, tipY + arrowH);
-          ctx.lineTo(x + arrowHalf, tipY + arrowH);
-          ctx.closePath();
-          ctx.fill();
-          ctx.fillStyle = textColor;
-          ctx.fillText(label, Math.round(x), Math.round(tipY + labelOffset));
-        } else {
-          const tipY = yFromPrice(bar.h) - gap;
-          ctx.beginPath();
-          ctx.moveTo(x, tipY);
-          ctx.lineTo(x - arrowHalf, tipY - arrowH);
-          ctx.lineTo(x + arrowHalf, tipY - arrowH);
-          ctx.closePath();
-          ctx.fill();
-          ctx.fillStyle = textColor;
-          ctx.fillText(label, Math.round(x), Math.round(tipY - labelOffset));
-        }
+        const tipY = isBuy ? yFromPrice(bar.l) + gap : yFromPrice(bar.h) - gap;
+        const dir = isBuy ? 1 : -1;
+        ctx.beginPath();
+        ctx.moveTo(x, tipY);
+        ctx.lineTo(x - arrowHalf, tipY + arrowH * dir);
+        ctx.lineTo(x + arrowHalf, tipY + arrowH * dir);
+        ctx.closePath();
+        ctx.fill();
+        ctx.fillStyle = textColor;
+        ctx.fillText(label, Math.round(x), Math.round(tipY + labelOffset * dir));
         ctx.restore();
       }
       ctx.font = prevFont;
@@ -3393,16 +3415,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 CHANGED Viewed

@@ -1292,10 +1292,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 +1342,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}`;
   };
@@ -2913,6 +2922,32 @@ function createChart(element, options = {}) {
         }
         return lo;
       };
+      const groups = /* @__PURE__ */ new Map();
+      for (const marker of tradeMarkers) {
+        const ms = typeof marker.time === "number" ? marker.time : Date.parse(String(marker.time));
+        if (!Number.isFinite(ms)) continue;
+        const index = indexForTime(ms);
+        if (index === null || index < visibleStart || index > visibleEnd) continue;
+        const side = marker.side === "buy" ? "buy" : "sell";
+        const qty = Math.max(0, marker.qty ?? 0);
+        const weight = qty > 0 ? qty : 1;
+        const key = `${index}:${side}`;
+        const existing = groups.get(key);
+        if (existing) {
+          existing.qty += qty;
+          existing.priceQty += marker.price * weight;
+        } else {
+          groups.set(key, {
+            index,
+            side,
+            qty,
+            priceQty: marker.price * weight,
+            ...marker.color === void 0 ? {} : { color: marker.color },
+            ...marker.textColor === void 0 ? {} : { textColor: marker.textColor },
+            ...marker.text === void 0 ? {} : { text: marker.text }
+          });
+        }
+      }
       const prevFont = ctx.font;
       const prevAlign = ctx.textAlign;
       const prevBaseline = ctx.textBaseline;
@@ -2923,42 +2958,29 @@ function createChart(element, options = {}) {
       const arrowH = 8;
       const gap = 5;
       const labelOffset = arrowH + 8;
-      for (const marker of tradeMarkers) {
-        const ms = typeof marker.time === "number" ? marker.time : Date.parse(String(marker.time));
-        if (!Number.isFinite(ms)) continue;
-        const index = indexForTime(ms);
-        if (index === null || index < visibleStart || index > visibleEnd) continue;
-        const bar = data[index];
+      for (const group of groups.values()) {
+        const bar = data[group.index];
         if (!bar) continue;
-        const x = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
+        const x = chartLeft + (group.index + 0.5 - xStart) / xSpan * chartWidth;
         if (x < chartLeft - 20 || x > chartRight + 20) continue;
-        const isBuy = marker.side === "buy";
-        const arrowColor = marker.color ?? (isBuy ? "#2962ff" : "#f23645");
-        const textColor = marker.textColor ?? "#d1d4dc";
-        const label = marker.text ?? `${marker.qty ?? ""}${marker.qty != null ? " @ " : ""}${formatPrice(marker.price)}`.trim();
+        const isBuy = group.side === "buy";
+        const arrowColor = group.color ?? (isBuy ? "#2962ff" : "#f23645");
+        const textColor = group.textColor ?? "#d1d4dc";
+        const weightTotal = group.qty > 0 ? group.qty : 1;
+        const avgPrice = group.priceQty / weightTotal;
+        const label = group.text ?? `${group.qty > 0 ? `${group.qty} @ ` : ""}${formatPrice(avgPrice)}`.trim();
         ctx.save();
         ctx.fillStyle = arrowColor;
-        if (isBuy) {
-          const tipY = yFromPrice(bar.l) + gap;
-          ctx.beginPath();
-          ctx.moveTo(x, tipY);
-          ctx.lineTo(x - arrowHalf, tipY + arrowH);
-          ctx.lineTo(x + arrowHalf, tipY + arrowH);
-          ctx.closePath();
-          ctx.fill();
-          ctx.fillStyle = textColor;
-          ctx.fillText(label, Math.round(x), Math.round(tipY + labelOffset));
-        } else {
-          const tipY = yFromPrice(bar.h) - gap;
-          ctx.beginPath();
-          ctx.moveTo(x, tipY);
-          ctx.lineTo(x - arrowHalf, tipY - arrowH);
-          ctx.lineTo(x + arrowHalf, tipY - arrowH);
-          ctx.closePath();
-          ctx.fill();
-          ctx.fillStyle = textColor;
-          ctx.fillText(label, Math.round(x), Math.round(tipY - labelOffset));
-        }
+        const tipY = isBuy ? yFromPrice(bar.l) + gap : yFromPrice(bar.h) - gap;
+        const dir = isBuy ? 1 : -1;
+        ctx.beginPath();
+        ctx.moveTo(x, tipY);
+        ctx.lineTo(x - arrowHalf, tipY + arrowH * dir);
+        ctx.lineTo(x + arrowHalf, tipY + arrowH * dir);
+        ctx.closePath();
+        ctx.fill();
+        ctx.fillStyle = textColor;
+        ctx.fillText(label, Math.round(x), Math.round(tipY + labelOffset * dir));
         ctx.restore();
       }
       ctx.font = prevFont;
@@ -3419,16 +3441,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.js CHANGED Viewed

@@ -1266,10 +1266,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 +1316,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}`;
   };
@@ -2887,6 +2896,32 @@ function createChart(element, options = {}) {
         }
         return lo;
       };
+      const groups = /* @__PURE__ */ new Map();
+      for (const marker of tradeMarkers) {
+        const ms = typeof marker.time === "number" ? marker.time : Date.parse(String(marker.time));
+        if (!Number.isFinite(ms)) continue;
+        const index = indexForTime(ms);
+        if (index === null || index < visibleStart || index > visibleEnd) continue;
+        const side = marker.side === "buy" ? "buy" : "sell";
+        const qty = Math.max(0, marker.qty ?? 0);
+        const weight = qty > 0 ? qty : 1;
+        const key = `${index}:${side}`;
+        const existing = groups.get(key);
+        if (existing) {
+          existing.qty += qty;
+          existing.priceQty += marker.price * weight;
+        } else {
+          groups.set(key, {
+            index,
+            side,
+            qty,
+            priceQty: marker.price * weight,
+            ...marker.color === void 0 ? {} : { color: marker.color },
+            ...marker.textColor === void 0 ? {} : { textColor: marker.textColor },
+            ...marker.text === void 0 ? {} : { text: marker.text }
+          });
+        }
+      }
       const prevFont = ctx.font;
       const prevAlign = ctx.textAlign;
       const prevBaseline = ctx.textBaseline;
@@ -2897,42 +2932,29 @@ function createChart(element, options = {}) {
       const arrowH = 8;
       const gap = 5;
       const labelOffset = arrowH + 8;
-      for (const marker of tradeMarkers) {
-        const ms = typeof marker.time === "number" ? marker.time : Date.parse(String(marker.time));
-        if (!Number.isFinite(ms)) continue;
-        const index = indexForTime(ms);
-        if (index === null || index < visibleStart || index > visibleEnd) continue;
-        const bar = data[index];
+      for (const group of groups.values()) {
+        const bar = data[group.index];
         if (!bar) continue;
-        const x = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
+        const x = chartLeft + (group.index + 0.5 - xStart) / xSpan * chartWidth;
         if (x < chartLeft - 20 || x > chartRight + 20) continue;
-        const isBuy = marker.side === "buy";
-        const arrowColor = marker.color ?? (isBuy ? "#2962ff" : "#f23645");
-        const textColor = marker.textColor ?? "#d1d4dc";
-        const label = marker.text ?? `${marker.qty ?? ""}${marker.qty != null ? " @ " : ""}${formatPrice(marker.price)}`.trim();
+        const isBuy = group.side === "buy";
+        const arrowColor = group.color ?? (isBuy ? "#2962ff" : "#f23645");
+        const textColor = group.textColor ?? "#d1d4dc";
+        const weightTotal = group.qty > 0 ? group.qty : 1;
+        const avgPrice = group.priceQty / weightTotal;
+        const label = group.text ?? `${group.qty > 0 ? `${group.qty} @ ` : ""}${formatPrice(avgPrice)}`.trim();
         ctx.save();
         ctx.fillStyle = arrowColor;
-        if (isBuy) {
-          const tipY = yFromPrice(bar.l) + gap;
-          ctx.beginPath();
-          ctx.moveTo(x, tipY);
-          ctx.lineTo(x - arrowHalf, tipY + arrowH);
-          ctx.lineTo(x + arrowHalf, tipY + arrowH);
-          ctx.closePath();
-          ctx.fill();
-          ctx.fillStyle = textColor;
-          ctx.fillText(label, Math.round(x), Math.round(tipY + labelOffset));
-        } else {
-          const tipY = yFromPrice(bar.h) - gap;
-          ctx.beginPath();
-          ctx.moveTo(x, tipY);
-          ctx.lineTo(x - arrowHalf, tipY - arrowH);
-          ctx.lineTo(x + arrowHalf, tipY - arrowH);
-          ctx.closePath();
-          ctx.fill();
-          ctx.fillStyle = textColor;
-          ctx.fillText(label, Math.round(x), Math.round(tipY - labelOffset));
-        }
+        const tipY = isBuy ? yFromPrice(bar.l) + gap : yFromPrice(bar.h) - gap;
+        const dir = isBuy ? 1 : -1;
+        ctx.beginPath();
+        ctx.moveTo(x, tipY);
+        ctx.lineTo(x - arrowHalf, tipY + arrowH * dir);
+        ctx.lineTo(x + arrowHalf, tipY + arrowH * dir);
+        ctx.closePath();
+        ctx.fill();
+        ctx.fillStyle = textColor;
+        ctx.fillText(label, Math.round(x), Math.round(tipY + labelOffset * dir));
         ctx.restore();
       }
       ctx.font = prevFont;
@@ -3393,16 +3415,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 CHANGED Viewed

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