liveline 0.0.2 → 0.0.3

package/dist/index.cjs

@@ -262,39 +262,59 @@ function drawGrid(ctx, layout, palette, formatValue, state, dt) {
 }
 
 // src/math/spline.ts
-function drawSpline(ctx, pts, tension = 0.15, maxPoints = 300) {
+function drawSpline(ctx, pts) {
   if (pts.length < 2) return;
   if (pts.length === 2) {
     ctx.lineTo(pts[1][0], pts[1][1]);
     return;
   }
-  let sampled = pts;
-  if (pts.length > maxPoints) {
-    const step = pts.length / maxPoints;
-    sampled = [];
-    for (let i = 0; i < maxPoints; i++) {
-      sampled.push(pts[Math.round(i * step)]);
+  const n = pts.length;
+  const delta = new Array(n - 1);
+  const h = new Array(n - 1);
+  for (let i = 0; i < n - 1; i++) {
+    h[i] = pts[i + 1][0] - pts[i][0];
+    delta[i] = h[i] === 0 ? 0 : (pts[i + 1][1] - pts[i][1]) / h[i];
+  }
+  const m = new Array(n);
+  m[0] = delta[0];
+  m[n - 1] = delta[n - 2];
+  for (let i = 1; i < n - 1; i++) {
+    if (delta[i - 1] * delta[i] <= 0) {
+      m[i] = 0;
+    } else {
+      m[i] = (delta[i - 1] + delta[i]) / 2;
+    }
+  }
+  for (let i = 0; i < n - 1; i++) {
+    if (delta[i] === 0) {
+      m[i] = 0;
+      m[i + 1] = 0;
+    } else {
+      const alpha = m[i] / delta[i];
+      const beta = m[i + 1] / delta[i];
+      const s2 = alpha * alpha + beta * beta;
+      if (s2 > 9) {
+        const s = 3 / Math.sqrt(s2);
+        m[i] = s * alpha * delta[i];
+        m[i + 1] = s * beta * delta[i];
+      }
     }
-    sampled.push(pts[pts.length - 1]);
   }
-  for (let i = 0; i < sampled.length - 1; i++) {
-    const p0 = sampled[Math.max(0, i - 1)];
-    const p1 = sampled[i];
-    const p2 = sampled[i + 1];
-    const p3 = sampled[Math.min(sampled.length - 1, i + 2)];
+  for (let i = 0; i < n - 1; i++) {
+    const hi = h[i];
     ctx.bezierCurveTo(
-      p1[0] + (p2[0] - p0[0]) * tension,
-      p1[1] + (p2[1] - p0[1]) * tension,
-      p2[0] - (p3[0] - p1[0]) * tension,
-      p2[1] - (p3[1] - p1[1]) * tension,
-      p2[0],
-      p2[1]
+      pts[i][0] + hi / 3,
+      pts[i][1] + m[i] * hi / 3,
+      pts[i + 1][0] - hi / 3,
+      pts[i + 1][1] - m[i + 1] * hi / 3,
+      pts[i + 1][0],
+      pts[i + 1][1]
     );
   }
 }
 
 // src/draw/line.ts
-function renderCurve(ctx, layout, palette, pts, showFill, maxSplinePts) {
+function renderCurve(ctx, layout, palette, pts, showFill) {
   const { h, pad } = layout;
   if (showFill) {
     const grad = ctx.createLinearGradient(0, pad.top, 0, h - pad.bottom);
@@ -303,7 +323,7 @@ function renderCurve(ctx, layout, palette, pts, showFill, maxSplinePts) {
     ctx.beginPath();
     ctx.moveTo(pts[0][0], h - pad.bottom);
     ctx.lineTo(pts[0][0], pts[0][1]);
-    drawSpline(ctx, pts, 0.15, maxSplinePts);
+    drawSpline(ctx, pts);
     ctx.lineTo(pts[pts.length - 1][0], h - pad.bottom);
     ctx.closePath();
     ctx.fillStyle = grad;
@@ -311,7 +331,7 @@ function renderCurve(ctx, layout, palette, pts, showFill, maxSplinePts) {
   }
   ctx.beginPath();
   ctx.moveTo(pts[0][0], pts[0][1]);
-  drawSpline(ctx, pts, 0.15, maxSplinePts);
+  drawSpline(ctx, pts);
   ctx.strokeStyle = palette.line;
   ctx.lineWidth = palette.lineWidth;
   ctx.lineJoin = "round";
@@ -329,7 +349,6 @@ function drawLine(ctx, layout, palette, visible, smoothValue, now, showFill, scr
   pts.push([toX(now), clampY(toY(smoothValue))]);
   if (pts.length < 2) return;
   const isScrubbing = scrubX !== null;
-  const maxSplinePts = Math.max(300, Math.ceil(chartW));
   ctx.save();
   ctx.beginPath();
   ctx.rect(pad.left - 1, pad.top, chartW + 2, chartH);
@@ -339,17 +358,17 @@ function drawLine(ctx, layout, palette, visible, smoothValue, now, showFill, scr
     ctx.beginPath();
     ctx.rect(0, 0, scrubX, h);
     ctx.clip();
-    renderCurve(ctx, layout, palette, pts, showFill, maxSplinePts);
+    renderCurve(ctx, layout, palette, pts, showFill);
     ctx.restore();
     ctx.save();
     ctx.beginPath();
     ctx.rect(scrubX, 0, layout.w - scrubX, h);
     ctx.clip();
     ctx.globalAlpha = 1 - scrubAmount * 0.6;
-    renderCurve(ctx, layout, palette, pts, showFill, maxSplinePts);
+    renderCurve(ctx, layout, palette, pts, showFill);
     ctx.restore();
   } else {
-    renderCurve(ctx, layout, palette, pts, showFill, maxSplinePts);
+    renderCurve(ctx, layout, palette, pts, showFill);
   }
   ctx.restore();
   const currentY = Math.max(pad.top, Math.min(h - pad.bottom, toY(smoothValue)));

package/dist/index.js

@@ -236,39 +236,59 @@ function drawGrid(ctx, layout, palette, formatValue, state, dt) {
 }
 
 // src/math/spline.ts
-function drawSpline(ctx, pts, tension = 0.15, maxPoints = 300) {
+function drawSpline(ctx, pts) {
   if (pts.length < 2) return;
   if (pts.length === 2) {
     ctx.lineTo(pts[1][0], pts[1][1]);
     return;
   }
-  let sampled = pts;
-  if (pts.length > maxPoints) {
-    const step = pts.length / maxPoints;
-    sampled = [];
-    for (let i = 0; i < maxPoints; i++) {
-      sampled.push(pts[Math.round(i * step)]);
+  const n = pts.length;
+  const delta = new Array(n - 1);
+  const h = new Array(n - 1);
+  for (let i = 0; i < n - 1; i++) {
+    h[i] = pts[i + 1][0] - pts[i][0];
+    delta[i] = h[i] === 0 ? 0 : (pts[i + 1][1] - pts[i][1]) / h[i];
+  }
+  const m = new Array(n);
+  m[0] = delta[0];
+  m[n - 1] = delta[n - 2];
+  for (let i = 1; i < n - 1; i++) {
+    if (delta[i - 1] * delta[i] <= 0) {
+      m[i] = 0;
+    } else {
+      m[i] = (delta[i - 1] + delta[i]) / 2;
+    }
+  }
+  for (let i = 0; i < n - 1; i++) {
+    if (delta[i] === 0) {
+      m[i] = 0;
+      m[i + 1] = 0;
+    } else {
+      const alpha = m[i] / delta[i];
+      const beta = m[i + 1] / delta[i];
+      const s2 = alpha * alpha + beta * beta;
+      if (s2 > 9) {
+        const s = 3 / Math.sqrt(s2);
+        m[i] = s * alpha * delta[i];
+        m[i + 1] = s * beta * delta[i];
+      }
     }
-    sampled.push(pts[pts.length - 1]);
   }
-  for (let i = 0; i < sampled.length - 1; i++) {
-    const p0 = sampled[Math.max(0, i - 1)];
-    const p1 = sampled[i];
-    const p2 = sampled[i + 1];
-    const p3 = sampled[Math.min(sampled.length - 1, i + 2)];
+  for (let i = 0; i < n - 1; i++) {
+    const hi = h[i];
     ctx.bezierCurveTo(
-      p1[0] + (p2[0] - p0[0]) * tension,
-      p1[1] + (p2[1] - p0[1]) * tension,
-      p2[0] - (p3[0] - p1[0]) * tension,
-      p2[1] - (p3[1] - p1[1]) * tension,
-      p2[0],
-      p2[1]
+      pts[i][0] + hi / 3,
+      pts[i][1] + m[i] * hi / 3,
+      pts[i + 1][0] - hi / 3,
+      pts[i + 1][1] - m[i + 1] * hi / 3,
+      pts[i + 1][0],
+      pts[i + 1][1]
     );
   }
 }
 
 // src/draw/line.ts
-function renderCurve(ctx, layout, palette, pts, showFill, maxSplinePts) {
+function renderCurve(ctx, layout, palette, pts, showFill) {
   const { h, pad } = layout;
   if (showFill) {
     const grad = ctx.createLinearGradient(0, pad.top, 0, h - pad.bottom);
@@ -277,7 +297,7 @@ function renderCurve(ctx, layout, palette, pts, showFill, maxSplinePts) {
     ctx.beginPath();
     ctx.moveTo(pts[0][0], h - pad.bottom);
     ctx.lineTo(pts[0][0], pts[0][1]);
-    drawSpline(ctx, pts, 0.15, maxSplinePts);
+    drawSpline(ctx, pts);
     ctx.lineTo(pts[pts.length - 1][0], h - pad.bottom);
     ctx.closePath();
     ctx.fillStyle = grad;
@@ -285,7 +305,7 @@ function renderCurve(ctx, layout, palette, pts, showFill, maxSplinePts) {
   }
   ctx.beginPath();
   ctx.moveTo(pts[0][0], pts[0][1]);
-  drawSpline(ctx, pts, 0.15, maxSplinePts);
+  drawSpline(ctx, pts);
   ctx.strokeStyle = palette.line;
   ctx.lineWidth = palette.lineWidth;
   ctx.lineJoin = "round";
@@ -303,7 +323,6 @@ function drawLine(ctx, layout, palette, visible, smoothValue, now, showFill, scr
   pts.push([toX(now), clampY(toY(smoothValue))]);
   if (pts.length < 2) return;
   const isScrubbing = scrubX !== null;
-  const maxSplinePts = Math.max(300, Math.ceil(chartW));
   ctx.save();
   ctx.beginPath();
   ctx.rect(pad.left - 1, pad.top, chartW + 2, chartH);
@@ -313,17 +332,17 @@ function drawLine(ctx, layout, palette, visible, smoothValue, now, showFill, scr
     ctx.beginPath();
     ctx.rect(0, 0, scrubX, h);
     ctx.clip();
-    renderCurve(ctx, layout, palette, pts, showFill, maxSplinePts);
+    renderCurve(ctx, layout, palette, pts, showFill);
     ctx.restore();
     ctx.save();
     ctx.beginPath();
     ctx.rect(scrubX, 0, layout.w - scrubX, h);
     ctx.clip();
     ctx.globalAlpha = 1 - scrubAmount * 0.6;
-    renderCurve(ctx, layout, palette, pts, showFill, maxSplinePts);
+    renderCurve(ctx, layout, palette, pts, showFill);
     ctx.restore();
   } else {
-    renderCurve(ctx, layout, palette, pts, showFill, maxSplinePts);
+    renderCurve(ctx, layout, palette, pts, showFill);
   }
   ctx.restore();
   const currentY = Math.max(pad.top, Math.min(h - pad.bottom, toY(smoothValue)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "liveline",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "description": "Real-time animated line chart for React",
   "keywords": [