@windborne/grapher 1.0.30 → 1.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windborne/grapher",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "description": "Graphing library",
   "main": "src/index.js",
   "module": "dist/bundle.esm.js",

package/src/renderer/draw_area.js

@@ -39,6 +39,7 @@ export default function drawArea(
     showIndividualPoints,
     negativeColor,
     pointRadius,
+    minPointSpacing,
     width,
     highlighted,
     shadowColor = "black",
@@ -223,7 +224,28 @@ export default function drawArea(
   if (showIndividualPoints && !renderCutoffGradient) {
     context.fillStyle = color;
 
-    for (let [x, y] of individualPoints) {
+    // Apply point spacing for individual point circles only
+    function applyPointSpacing(points, minSpacing) {
+      if (!minSpacing || points.length <= 1) {
+          return points;
+      }
+      
+      const spacedPoints = [];
+      let lastX = -Infinity;
+      
+      for (const point of points) {
+          const [x] = point;
+          if (x - lastX >= minSpacing) {
+              spacedPoints.push(point);
+              lastX = x;
+          }
+      }
+      
+      return spacedPoints;
+    }
+
+    const pointsToRender = applyPointSpacing(individualPoints, minPointSpacing);
+    for (let [x, y] of pointsToRender) {
       if (negativeColor && hasNegatives) {
         if (y === zero && zeroColor) {
           context.fillStyle = zeroColor;

package/src/renderer/draw_line.js

@@ -2,8 +2,27 @@ import {DPI_INCREASE} from './size_canvas';
 import pathsFrom from './paths_from';
 import { applyReducedOpacity } from "../helpers/colors";
 
+function applyPointSpacing(points, minSpacing) {
+    if (!minSpacing || points.length <= 1) {
+        return points;
+    }
+    
+    const spacedPoints = [];
+    let lastX = -Infinity;
+    
+    for (const point of points) {
+        const [x] = point;
+        if (x - lastX >= minSpacing) {
+            spacedPoints.push(point);
+            lastX = x;
+        }
+    }
+    
+    return spacedPoints;
+}
+
 export default function drawLine(dataInRenderSpace, {
-    color, width=1, context, shadowColor='black', shadowBlur=5, dashed=false, dashPattern=null, highlighted=false, showIndividualPoints=false, pointRadius, getIndividualPoints, getRanges, cutoffIndex, cutoffOpacity, originalData, renderCutoffGradient, currentBounds, selectionBounds, rendering, isPreview
+    color, width=1, context, shadowColor='black', shadowBlur=5, dashed=false, dashPattern=null, highlighted=false, showIndividualPoints=false, pointRadius, minPointSpacing, getIndividualPoints, getRanges, cutoffIndex, cutoffOpacity, originalData, renderCutoffGradient, currentBounds, selectionBounds, rendering, isPreview
 }) {
     if (!context) {
         console.error("Canvas context is null in drawLine");
@@ -343,8 +362,9 @@ export default function drawLine(dataInRenderSpace, {
                 const visibleMinTime = selectionBounds.minX instanceof Date ? selectionBounds.minX.getTime() : selectionBounds.minX;
                 const visibleMaxTime = selectionBounds.maxX instanceof Date ? selectionBounds.maxX.getTime() : selectionBounds.maxX;
                 
-                for (let i = 0; i < individualPoints.length; i++) {
-                    const [x, y] = individualPoints[i];
+                const spacedPoints = applyPointSpacing(individualPoints, minPointSpacing);
+                for (let i = 0; i < spacedPoints.length; i++) {
+                    const [x, y] = spacedPoints[i];
                     
                     let isBeforeCutoff = false;
                     if (cutoffTime < visibleMinTime) {
@@ -369,8 +389,9 @@ export default function drawLine(dataInRenderSpace, {
                     context.fill();
                 }
             } else if (!selectionBounds) {
-                for (let i = 0; i < individualPoints.length; i++) {
-                    const [x, y] = individualPoints[i];
+                const spacedPoints = applyPointSpacing(individualPoints, minPointSpacing);
+                for (let i = 0; i < spacedPoints.length; i++) {
+                    const [x, y] = spacedPoints[i];
                     context.fillStyle = color;
                     context.beginPath();
                     context.arc(x, y, pointRadius || 8, 0, 2 * Math.PI, false);
@@ -380,8 +401,9 @@ export default function drawLine(dataInRenderSpace, {
                 const visibleMinTime = selectionBounds.minX instanceof Date ? selectionBounds.minX.getTime() : selectionBounds.minX;
                 const visibleMaxTime = selectionBounds.maxX instanceof Date ? selectionBounds.maxX.getTime() : selectionBounds.maxX;
                 
-                for (let i = 0; i < individualPoints.length; i++) {
-                    const [x, y] = individualPoints[i];
+                const spacedPoints = applyPointSpacing(individualPoints, minPointSpacing);
+                for (let i = 0; i < spacedPoints.length; i++) {
+                    const [x, y] = spacedPoints[i];
                     
                     let isBeforeCutoff = false;
                     if (cutoffTime < visibleMinTime) {
@@ -407,8 +429,9 @@ export default function drawLine(dataInRenderSpace, {
                 }
             }
         } else {
-            for (let i = 0; i < individualPoints.length; i++) {
-                const [x, y] = individualPoints[i];
+            const spacedPoints = applyPointSpacing(individualPoints, minPointSpacing);
+            for (let i = 0; i < spacedPoints.length; i++) {
+                const [x, y] = spacedPoints[i];
                 context.fillStyle = color;
                 context.beginPath();
                 context.arc(x, y, pointRadius || 8, 0, 2 * Math.PI, false);

package/src/renderer/graph_body_renderer.js

@@ -188,21 +188,6 @@ export default class GraphBodyRenderer extends Eventable {
                     return getIndividualPoints(true, includeBeyondBounds);
                 }
 
-                // Apply minPointSpacing if specified
-                if (singleSeries.minPointSpacing && individualPoints.length > 1) {
-                    const spacedPoints = [];
-                    let lastX = -Infinity;
-                    
-                    for (const [x, y] of individualPoints) {
-                        if (x - lastX >= singleSeries.minPointSpacing) {
-                            spacedPoints.push([x, y]);
-                            lastX = x;
-                        }
-                    }
-                    
-                    return spacedPoints;
-                }
-
                 return individualPoints;
             }
 
@@ -270,19 +255,6 @@ export default class GraphBodyRenderer extends Eventable {
                 individualPoints.unshift([beforeXCoord, beforeYCoord]);
             }
 
-            if (singleSeries.minPointSpacing && individualPoints.length > 1) {
-                const spacedPoints = [];
-                let lastX = -Infinity;
-                
-                for (const [x, y] of individualPoints) {
-                    if (x - lastX >= singleSeries.minPointSpacing) {
-                        spacedPoints.push([x, y]);
-                        lastX = x;
-                    }
-                }
-                
-                return spacedPoints;
-            }
             return individualPoints;
         };
 
@@ -399,6 +371,7 @@ export default class GraphBodyRenderer extends Eventable {
                 showIndividualPoints: typeof singleSeries.showIndividualPoints === 'boolean' ? singleSeries.showIndividualPoints : showIndividualPoints,
                 gradient: singleSeries.gradient,
                 pointRadius: singleSeries.pointRadius,
+                minPointSpacing: singleSeries.minPointSpacing,
                 highlighted,
                 width: width || singleSeries.width || defaultLineWidth,
                 shadowColor,
@@ -561,10 +534,12 @@ export default class GraphBodyRenderer extends Eventable {
             highlighted,
             showIndividualPoints: shouldShowIndividualPoints,
             pointRadius: singleSeries.pointRadius,
+            minPointSpacing: singleSeries.minPointSpacing,
             getIndividualPoints,
             getRanges: singleSeries.rangeKey ? getRanges : null,
             rendering: singleSeries.rendering  // Pass rendering type for all charts
         };
+        
 
         if (!inRenderSpace) {
             console.error('inRenderSpace is null for line rendering');

package/src/renderer/line_program.js

@@ -125,7 +125,22 @@ export default class LineProgram {
             const pointSize = parameters.pointRadius ? parameters.pointRadius * 2 * DPI_INCREASE : 2*(thickness+6);
             gl.uniform1f(gl.getUniformLocation(this._circleProgram, 'pointSize'), pointSize);
 
-            const individualPoints = parameters.getIndividualPoints();
+            let individualPoints = parameters.getIndividualPoints();
+            
+            if (parameters.minPointSpacing && individualPoints.length > 1) {
+                const spacedPoints = [];
+                let lastX = -Infinity;
+                
+                for (const point of individualPoints) {
+                    const [x] = point;
+                    if (x - lastX >= parameters.minPointSpacing) {
+                        spacedPoints.push(point);
+                        lastX = x;
+                    }
+                }
+                
+                individualPoints = spacedPoints;
+            }
 
             if (parameters.cutoffIndex !== undefined && parameters.cutoffIndex > 0 && parameters.originalData) {
                 const { originalData } = parameters;