hyperprop-charting-library 0.1.103 → 0.1.104

package/dist/hyperprop-charting-library.cjs

@@ -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}`;
   };
@@ -3432,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

@@ -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}`;
   };
@@ -3406,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

@@ -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}`;
   };
@@ -3432,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

@@ -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}`;
   };
@@ -3406,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

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