hyperprop-charting-library 0.1.27 → 0.1.29

package/README.md

@@ -153,7 +153,7 @@ Volume scaling tip (for large spikes):
 chart.updateIndicator(volumeId, {
   inputs: {
     scaleMode: "visible",   // default; scales using current viewport only
-    scaleType: "log",       // default; better for large volume ranges
+    scaleType: "sqrt",      // default; balanced compression
     clampPercentile: 0.95   // optional outlier clamp
   }
 });

package/dist/hyperprop-charting-library.cjs

@@ -533,7 +533,7 @@ var BUILTIN_VOLUME_INDICATOR = {
     minBarWidth: 1,
     overlayHeightRatio: 0.22,
     scaleMode: "visible",
-    scaleType: "log",
+    scaleType: "sqrt",
     clampPercentile: 1
   },
   draw: (ctx, renderContext, inputs) => {
@@ -544,7 +544,7 @@ var BUILTIN_VOLUME_INDICATOR = {
     const paneHeight = overlayMode ? Math.max(20, Math.round(fullPaneHeight * overlayHeightRatio)) : fullPaneHeight;
     const paneBottom = chartBottom;
     const scaleMode = inputs.scaleMode === "full" ? "full" : "visible";
-    const scaleType = inputs.scaleType === "linear" ? "linear" : "log";
+    const scaleType = inputs.scaleType === "linear" ? "linear" : inputs.scaleType === "log" ? "log" : "sqrt";
     const scalingPoints = scaleMode === "full" ? data : data.slice(startIndex, endIndex + 1);
     const scalingVolumes = scalingPoints.map((point) => Math.max(0, point.v ?? 0)).filter((value) => value > 0);
     const clampPercentile = Number.isFinite(inputs.clampPercentile) ? Number(inputs.clampPercentile) : 1;
@@ -561,7 +561,7 @@ var BUILTIN_VOLUME_INDICATOR = {
         continue;
       }
       const clampedVolume = Math.min(maxVolume, Math.max(0, point.v));
-      const ratio = scaleType === "linear" ? Math.min(1, Math.max(0, clampedVolume / maxVolume)) : Math.min(1, Math.max(0, Math.log1p(clampedVolume) / Math.log1p(maxVolume)));
+      const ratio = scaleType === "linear" ? Math.min(1, Math.max(0, clampedVolume / maxVolume)) : scaleType === "log" ? Math.min(1, Math.max(0, Math.log1p(clampedVolume) / Math.log1p(maxVolume))) : Math.min(1, Math.max(0, Math.sqrt(clampedVolume) / Math.sqrt(maxVolume)));
       const volumeHeight = Math.max(1, Math.round(paneHeight * ratio));
       const xCenter = xFromIndex(index);
       const barX = Math.round(xCenter - barWidth / 2);
@@ -2665,9 +2665,11 @@ function createChart(element, options = {}) {
   };
   const setData = (nextData) => {
     const hadData = data.length > 0;
+    const previousCount = data.length;
     const previousCenterRounded = hadData ? Math.round(xCenter) : 0;
     const previousCenterFraction = hadData ? xCenter - previousCenterRounded : 0;
     const previousCenterTimeMs = hadData && previousCenterRounded >= 0 && previousCenterRounded < data.length ? data[previousCenterRounded]?.time.getTime() ?? null : null;
+    const wasAtRightEdge = hadData && xCenter + xSpan / 2 >= previousCount - 1;
     data = parseData(nextData);
     if (data.length === 0) {
       xCenter = 0;
@@ -2681,7 +2683,9 @@ function createChart(element, options = {}) {
       resetYViewport();
     } else {
       if (mergedOptions.preserveViewportOnDataUpdate) {
-        if (previousCenterTimeMs !== null) {
+        if (wasAtRightEdge) {
+          xCenter = data.length - xSpan / 2 + rightEdgePaddingBars;
+        } else if (previousCenterTimeMs !== null) {
           const nextCenter = findNearestIndexForTimeMs(previousCenterTimeMs);
           if (nextCenter !== null) {
             xCenter = nextCenter + previousCenterFraction;

package/dist/hyperprop-charting-library.js

@@ -509,7 +509,7 @@ var BUILTIN_VOLUME_INDICATOR = {
     minBarWidth: 1,
     overlayHeightRatio: 0.22,
     scaleMode: "visible",
-    scaleType: "log",
+    scaleType: "sqrt",
     clampPercentile: 1
   },
   draw: (ctx, renderContext, inputs) => {
@@ -520,7 +520,7 @@ var BUILTIN_VOLUME_INDICATOR = {
     const paneHeight = overlayMode ? Math.max(20, Math.round(fullPaneHeight * overlayHeightRatio)) : fullPaneHeight;
     const paneBottom = chartBottom;
     const scaleMode = inputs.scaleMode === "full" ? "full" : "visible";
-    const scaleType = inputs.scaleType === "linear" ? "linear" : "log";
+    const scaleType = inputs.scaleType === "linear" ? "linear" : inputs.scaleType === "log" ? "log" : "sqrt";
     const scalingPoints = scaleMode === "full" ? data : data.slice(startIndex, endIndex + 1);
     const scalingVolumes = scalingPoints.map((point) => Math.max(0, point.v ?? 0)).filter((value) => value > 0);
     const clampPercentile = Number.isFinite(inputs.clampPercentile) ? Number(inputs.clampPercentile) : 1;
@@ -537,7 +537,7 @@ var BUILTIN_VOLUME_INDICATOR = {
         continue;
       }
       const clampedVolume = Math.min(maxVolume, Math.max(0, point.v));
-      const ratio = scaleType === "linear" ? Math.min(1, Math.max(0, clampedVolume / maxVolume)) : Math.min(1, Math.max(0, Math.log1p(clampedVolume) / Math.log1p(maxVolume)));
+      const ratio = scaleType === "linear" ? Math.min(1, Math.max(0, clampedVolume / maxVolume)) : scaleType === "log" ? Math.min(1, Math.max(0, Math.log1p(clampedVolume) / Math.log1p(maxVolume))) : Math.min(1, Math.max(0, Math.sqrt(clampedVolume) / Math.sqrt(maxVolume)));
       const volumeHeight = Math.max(1, Math.round(paneHeight * ratio));
       const xCenter = xFromIndex(index);
       const barX = Math.round(xCenter - barWidth / 2);
@@ -2641,9 +2641,11 @@ function createChart(element, options = {}) {
   };
   const setData = (nextData) => {
     const hadData = data.length > 0;
+    const previousCount = data.length;
     const previousCenterRounded = hadData ? Math.round(xCenter) : 0;
     const previousCenterFraction = hadData ? xCenter - previousCenterRounded : 0;
     const previousCenterTimeMs = hadData && previousCenterRounded >= 0 && previousCenterRounded < data.length ? data[previousCenterRounded]?.time.getTime() ?? null : null;
+    const wasAtRightEdge = hadData && xCenter + xSpan / 2 >= previousCount - 1;
     data = parseData(nextData);
     if (data.length === 0) {
       xCenter = 0;
@@ -2657,7 +2659,9 @@ function createChart(element, options = {}) {
       resetYViewport();
     } else {
       if (mergedOptions.preserveViewportOnDataUpdate) {
-        if (previousCenterTimeMs !== null) {
+        if (wasAtRightEdge) {
+          xCenter = data.length - xSpan / 2 + rightEdgePaddingBars;
+        } else if (previousCenterTimeMs !== null) {
           const nextCenter = findNearestIndexForTimeMs(previousCenterTimeMs);
           if (nextCenter !== null) {
             xCenter = nextCenter + previousCenterFraction;

package/dist/index.cjs

@@ -533,7 +533,7 @@ var BUILTIN_VOLUME_INDICATOR = {
     minBarWidth: 1,
     overlayHeightRatio: 0.22,
     scaleMode: "visible",
-    scaleType: "log",
+    scaleType: "sqrt",
     clampPercentile: 1
   },
   draw: (ctx, renderContext, inputs) => {
@@ -544,7 +544,7 @@ var BUILTIN_VOLUME_INDICATOR = {
     const paneHeight = overlayMode ? Math.max(20, Math.round(fullPaneHeight * overlayHeightRatio)) : fullPaneHeight;
     const paneBottom = chartBottom;
     const scaleMode = inputs.scaleMode === "full" ? "full" : "visible";
-    const scaleType = inputs.scaleType === "linear" ? "linear" : "log";
+    const scaleType = inputs.scaleType === "linear" ? "linear" : inputs.scaleType === "log" ? "log" : "sqrt";
     const scalingPoints = scaleMode === "full" ? data : data.slice(startIndex, endIndex + 1);
     const scalingVolumes = scalingPoints.map((point) => Math.max(0, point.v ?? 0)).filter((value) => value > 0);
     const clampPercentile = Number.isFinite(inputs.clampPercentile) ? Number(inputs.clampPercentile) : 1;
@@ -561,7 +561,7 @@ var BUILTIN_VOLUME_INDICATOR = {
         continue;
       }
       const clampedVolume = Math.min(maxVolume, Math.max(0, point.v));
-      const ratio = scaleType === "linear" ? Math.min(1, Math.max(0, clampedVolume / maxVolume)) : Math.min(1, Math.max(0, Math.log1p(clampedVolume) / Math.log1p(maxVolume)));
+      const ratio = scaleType === "linear" ? Math.min(1, Math.max(0, clampedVolume / maxVolume)) : scaleType === "log" ? Math.min(1, Math.max(0, Math.log1p(clampedVolume) / Math.log1p(maxVolume))) : Math.min(1, Math.max(0, Math.sqrt(clampedVolume) / Math.sqrt(maxVolume)));
       const volumeHeight = Math.max(1, Math.round(paneHeight * ratio));
       const xCenter = xFromIndex(index);
       const barX = Math.round(xCenter - barWidth / 2);
@@ -2665,9 +2665,11 @@ function createChart(element, options = {}) {
   };
   const setData = (nextData) => {
     const hadData = data.length > 0;
+    const previousCount = data.length;
     const previousCenterRounded = hadData ? Math.round(xCenter) : 0;
     const previousCenterFraction = hadData ? xCenter - previousCenterRounded : 0;
     const previousCenterTimeMs = hadData && previousCenterRounded >= 0 && previousCenterRounded < data.length ? data[previousCenterRounded]?.time.getTime() ?? null : null;
+    const wasAtRightEdge = hadData && xCenter + xSpan / 2 >= previousCount - 1;
     data = parseData(nextData);
     if (data.length === 0) {
       xCenter = 0;
@@ -2681,7 +2683,9 @@ function createChart(element, options = {}) {
       resetYViewport();
     } else {
       if (mergedOptions.preserveViewportOnDataUpdate) {
-        if (previousCenterTimeMs !== null) {
+        if (wasAtRightEdge) {
+          xCenter = data.length - xSpan / 2 + rightEdgePaddingBars;
+        } else if (previousCenterTimeMs !== null) {
           const nextCenter = findNearestIndexForTimeMs(previousCenterTimeMs);
           if (nextCenter !== null) {
             xCenter = nextCenter + previousCenterFraction;

package/dist/index.js

@@ -509,7 +509,7 @@ var BUILTIN_VOLUME_INDICATOR = {
     minBarWidth: 1,
     overlayHeightRatio: 0.22,
     scaleMode: "visible",
-    scaleType: "log",
+    scaleType: "sqrt",
     clampPercentile: 1
   },
   draw: (ctx, renderContext, inputs) => {
@@ -520,7 +520,7 @@ var BUILTIN_VOLUME_INDICATOR = {
     const paneHeight = overlayMode ? Math.max(20, Math.round(fullPaneHeight * overlayHeightRatio)) : fullPaneHeight;
     const paneBottom = chartBottom;
     const scaleMode = inputs.scaleMode === "full" ? "full" : "visible";
-    const scaleType = inputs.scaleType === "linear" ? "linear" : "log";
+    const scaleType = inputs.scaleType === "linear" ? "linear" : inputs.scaleType === "log" ? "log" : "sqrt";
     const scalingPoints = scaleMode === "full" ? data : data.slice(startIndex, endIndex + 1);
     const scalingVolumes = scalingPoints.map((point) => Math.max(0, point.v ?? 0)).filter((value) => value > 0);
     const clampPercentile = Number.isFinite(inputs.clampPercentile) ? Number(inputs.clampPercentile) : 1;
@@ -537,7 +537,7 @@ var BUILTIN_VOLUME_INDICATOR = {
         continue;
       }
       const clampedVolume = Math.min(maxVolume, Math.max(0, point.v));
-      const ratio = scaleType === "linear" ? Math.min(1, Math.max(0, clampedVolume / maxVolume)) : Math.min(1, Math.max(0, Math.log1p(clampedVolume) / Math.log1p(maxVolume)));
+      const ratio = scaleType === "linear" ? Math.min(1, Math.max(0, clampedVolume / maxVolume)) : scaleType === "log" ? Math.min(1, Math.max(0, Math.log1p(clampedVolume) / Math.log1p(maxVolume))) : Math.min(1, Math.max(0, Math.sqrt(clampedVolume) / Math.sqrt(maxVolume)));
       const volumeHeight = Math.max(1, Math.round(paneHeight * ratio));
       const xCenter = xFromIndex(index);
       const barX = Math.round(xCenter - barWidth / 2);
@@ -2641,9 +2641,11 @@ function createChart(element, options = {}) {
   };
   const setData = (nextData) => {
     const hadData = data.length > 0;
+    const previousCount = data.length;
     const previousCenterRounded = hadData ? Math.round(xCenter) : 0;
     const previousCenterFraction = hadData ? xCenter - previousCenterRounded : 0;
     const previousCenterTimeMs = hadData && previousCenterRounded >= 0 && previousCenterRounded < data.length ? data[previousCenterRounded]?.time.getTime() ?? null : null;
+    const wasAtRightEdge = hadData && xCenter + xSpan / 2 >= previousCount - 1;
     data = parseData(nextData);
     if (data.length === 0) {
       xCenter = 0;
@@ -2657,7 +2659,9 @@ function createChart(element, options = {}) {
       resetYViewport();
     } else {
       if (mergedOptions.preserveViewportOnDataUpdate) {
-        if (previousCenterTimeMs !== null) {
+        if (wasAtRightEdge) {
+          xCenter = data.length - xSpan / 2 + rightEdgePaddingBars;
+        } else if (previousCenterTimeMs !== null) {
           const nextCenter = findNearestIndexForTimeMs(previousCenterTimeMs);
           if (nextCenter !== null) {
             xCenter = nextCenter + previousCenterFraction;

package/docs/API.md

@@ -312,7 +312,7 @@ Volume style inputs:
 - `minBarWidth`
 - `overlayHeightRatio` (when used as overlay)
 - `scaleMode` (`"visible"` default, or `"full"`)
-- `scaleType` (`"log"` default, or `"linear"`)
+- `scaleType` (`"sqrt"` default, or `"log"` / `"linear"`)
 - `clampPercentile` (`0..1`, default `1`; e.g. `0.95` to reduce outlier crush)
 
 ---

package/docs/RECIPES.md

@@ -151,7 +151,7 @@ const volumeId = chart.addIndicator("volume", { upOpacity: 0.72, downOpacity: 0.
 ```ts
 const volumeId = chart.addIndicator("volume", {
   scaleMode: "visible",   // default behavior
-  scaleType: "log",       // default behavior
+  scaleType: "sqrt",      // default behavior
   clampPercentile: 0.95   // clamp scaling reference to p95 of visible bars
 });
 ```

package/package.json

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