@windborne/grapher 1.0.29 → 1.0.30

package/package.json

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

package/readme.md

@@ -214,7 +214,7 @@ Grapher supports multiple data formats within a series:
 
 | Prop | Type | Required | Description |
 |------|------|----------|-------------|
-| **x** | `number` | **✓** | X-coordinate position where the line should appear. |
+| **x** | `number \| Date` | **✓** | X-coordinate position where the line should appear. Can be a numeric value or a Date object. |
 | color | `string` | ✗ | Optional line color. |
 | lineTop | `number` | ✗ | Optional value to specify the top position of the line. |
 | width | `number` | ✗ | Optional line width. |

package/src/helpers/colors.js

@@ -91,3 +91,15 @@ export function applyReducedOpacityToGradient(gradient, opacityFactor) {
     return stop;
   });
 }
+
+/**
+ * Creates a default gradient from a color at half opacity
+ * @param {string} color 
+ * @returns {Array<[number, string]>}
+ */
+export function createDefaultGradient(color) {
+  if (!color) return [[0, 'transparent'], [1, 'transparent']];
+  
+  const halfOpacityColor = applyReducedOpacity(color, 0.5);
+  return [[0, halfOpacityColor], [1, halfOpacityColor]];
+}

package/src/helpers/custom_prop_types.js

@@ -65,6 +65,7 @@ const SingleSeries = PropTypes.shape({
     background: PropTypes.object,
     hideFromKey: PropTypes.bool,
     showIndividualPoints: PropTypes.bool,
+    minPointSpacing: PropTypes.number,
     rendering: PropTypes.oneOf(['line', 'bar', 'area', 'shadow']), // defaults to line
     negativeColor: PropTypes.string, // only applies to bar
     gradient: PropTypes.array, // only applies to area
@@ -139,7 +140,7 @@ const DraggablePoint = PropTypes.shape({
 const DraggablePoints = PropTypes.arrayOf(DraggablePoint);
 
 const VerticalLine = PropTypes.shape({
-    x: PropTypes.number.isRequired,
+    x: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Date)]).isRequired,
     color: PropTypes.string,
     lineTop: PropTypes.number,
     width: PropTypes.number,

package/src/index.d.ts

@@ -24,6 +24,7 @@ export interface SeriesData {
   background?: object;
   hideFromKey?: boolean;
   showIndividualPoints?: boolean;
+  minPointSpacing?: number;
   rendering?: 'line' | 'bar' | 'area' | 'shadow';
   negativeColor?: string;
   zeroLineWidth?: number;
@@ -80,7 +81,7 @@ export interface DraggablePoint {
 }
 
 export interface VerticalLine {
-  x: number;
+  x: number | Date;
   color?: string;
   lineTop?: number;
   width?: number;

package/src/renderer/draw_area.js

@@ -220,7 +220,7 @@ export default function drawArea(
     });
   }
 
-  if (showIndividualPoints) {
+  if (showIndividualPoints && !renderCutoffGradient) {
     context.fillStyle = color;
 
     for (let [x, y] of individualPoints) {
@@ -312,14 +312,15 @@ function drawAreaWithCutoff(
     cutoffTime = cutoffIndex;
   }
 
-  const firstTime =
-    originalData[0][0] instanceof Date
-      ? originalData[0][0].getTime()
-      : originalData[0][0];
-  const lastTime =
-    originalData[originalData.length - 1][0] instanceof Date
-      ? originalData[originalData.length - 1][0].getTime()
-      : originalData[originalData.length - 1][0];
+  let firstTime, lastTime;
+  if (isPreview && selectionBounds) {
+    firstTime = selectionBounds.minX instanceof Date ? selectionBounds.minX.getTime() : selectionBounds.minX;
+    lastTime = selectionBounds.maxX instanceof Date ? selectionBounds.maxX.getTime() : selectionBounds.maxX;
+  } else {
+    firstTime = originalData[0][0] instanceof Date ? originalData[0][0].getTime() : originalData[0][0];
+    lastTime = originalData[originalData.length - 1][0] instanceof Date ? 
+      originalData[originalData.length - 1][0].getTime() : originalData[originalData.length - 1][0];
+  }
 
   const timeRatio = (cutoffTime - firstTime) / (lastTime - firstTime);
 
@@ -657,7 +658,7 @@ function drawAreaWithCutoff(
     }
 
     // draw outline lines with cutoff
-    if (timeRatio >= 0 && timeRatio <= 1) {
+    if (timeRatio >= 0 && timeRatio <= 1 && !isPreview) {
       if (selectionBounds) {
         const visibleMinTime =
           selectionBounds.minX instanceof Date
@@ -719,7 +720,7 @@ function drawAreaWithCutoff(
           highlighted,
         });
       }
-    } else {
+    } else if (!isPreview) {
       // draw lines normally without cutoff
       drawLinesNormally(linePaths, {
         color,
@@ -744,7 +745,7 @@ function drawAreaWithCutoff(
       });
     }
 
-    if (showIndividualPoints) {
+    if (showIndividualPoints && !isPreview) {
       if (timeRatio >= 0 && timeRatio <= 1) {
         if (selectionBounds) {
           const visibleMinTime =
@@ -1072,72 +1073,49 @@ function drawLinesWithCutoff(
   }
   width *= DPI_INCREASE;
 
-  let totalLength = 0;
-  const pathLengths = [];
-
-  for (let path of linePaths) {
-    if (path.length > 0) {
-      pathLengths.push(path.length);
-      totalLength += path.length;
-    } else {
-      pathLengths.push(0);
-    }
-  }
-
-  if (totalLength === 0) return;
-
-  const globalCutoffIndex = timeRatio * totalLength;
-
-  let currentIndex = 0;
-  let targetPathIndex = -1;
-  let cutoffIndexInPath = 0;
-
-  for (let i = 0; i < pathLengths.length; i++) {
-    if (pathLengths[i] === 0) continue;
-
-    if (globalCutoffIndex <= currentIndex + pathLengths[i]) {
-      targetPathIndex = i;
-      cutoffIndexInPath = globalCutoffIndex - currentIndex;
-      break;
-    }
-    currentIndex += pathLengths[i];
-  }
-
+  const cutoffPixelX = timeRatio * context.canvas.width;
   const preCutoffPaths = [];
   const postCutoffPaths = [];
-  let ghostPoint = null;
 
-  for (let i = 0; i < linePaths.length; i++) {
-    const path = linePaths[i];
+  for (let path of linePaths) {
     if (!path.length) continue;
 
-    if (i < targetPathIndex) {
-      preCutoffPaths.push(path);
-    } else if (i > targetPathIndex) {
-      postCutoffPaths.push(path);
-    } else if (i === targetPathIndex) {
-      const splitIndex = Math.floor(cutoffIndexInPath);
-      const fraction = cutoffIndexInPath - splitIndex;
-
-      if (splitIndex < path.length - 1 && fraction > 0) {
-        const [x1, y1] = path[splitIndex];
-        const [x2, y2] = path[splitIndex + 1];
-        ghostPoint = [x1 + fraction * (x2 - x1), y1 + fraction * (y2 - y1)];
-      }
+    const prePath = [];
+    const postPath = [];
+    let ghostPoint = null;
+    let splitIndex = -1;
 
-      if (splitIndex > 0) {
-        const prePath = path.slice(0, splitIndex + 1);
-        if (ghostPoint) prePath.push(ghostPoint);
-        preCutoffPaths.push(prePath);
+    for (let i = 0; i < path.length; i++) {
+      const [x, y] = path[i];
+      
+      if (x < cutoffPixelX) {
+        prePath.push([x, y]);
+        splitIndex = i;
+      } else {
+        postPath.push([x, y]);
       }
+    }
 
-      if (splitIndex < path.length - 1) {
-        const postPath = [];
-        if (ghostPoint) postPath.push(ghostPoint);
-        postPath.push(...path.slice(splitIndex + 1));
-        postCutoffPaths.push(postPath);
+    if (prePath.length > 0 && postPath.length > 0) {
+      const lastPrePoint = prePath[prePath.length - 1];
+      const firstPostPoint = postPath[0];
+      const [x1, y1] = lastPrePoint;
+      const [x2, y2] = firstPostPoint;
+      
+      if (x2 !== x1) {
+        const fraction = (cutoffPixelX - x1) / (x2 - x1);
+        ghostPoint = [cutoffPixelX, y1 + fraction * (y2 - y1)];
+        prePath.push(ghostPoint);
+        postPath.unshift(ghostPoint);
       }
     }
+
+    if (prePath.length > 0) {
+      preCutoffPaths.push(prePath);
+    }
+    if (postPath.length > 0) {
+      postCutoffPaths.push(postPath);
+    }
   }
 
   if (preCutoffPaths.length > 0) {
@@ -1200,12 +1178,13 @@ function drawPointsWithCutoffByRatio(
     return;
   }
 
-  const cutoffPixelIndex = timeRatio * individualPoints.length;
+  const canvasWidth = context.canvas.width;
+  const cutoffPixelX = timeRatio * canvasWidth;
 
   for (let i = 0; i < individualPoints.length; i++) {
     const [x, y] = individualPoints[i];
 
-    const isBeforeCutoff = i < cutoffPixelIndex;
+    const isBeforeCutoff = x < cutoffPixelX;
 
     let pointColor = color;
     if (isBeforeCutoff) {

package/src/renderer/draw_line.js

@@ -3,7 +3,7 @@ import pathsFrom from './paths_from';
 import { applyReducedOpacity } from "../helpers/colors";
 
 export default function drawLine(dataInRenderSpace, {
-    color, width=1, context, shadowColor='black', shadowBlur=5, dashed=false, dashPattern=null, highlighted=false, showIndividualPoints=false, 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, getIndividualPoints, getRanges, cutoffIndex, cutoffOpacity, originalData, renderCutoffGradient, currentBounds, selectionBounds, rendering, isPreview
 }) {
     if (!context) {
         console.error("Canvas context is null in drawLine");
@@ -340,16 +340,22 @@ export default function drawLine(dataInRenderSpace, {
             }
             
             if (isPreview) {
-                const firstTime = originalData[0][0] instanceof Date ? originalData[0][0].getTime() : originalData[0][0];
-                const lastTime = originalData[originalData.length - 1][0] instanceof Date ? 
-                    originalData[originalData.length - 1][0].getTime() : originalData[originalData.length - 1][0];
-                const timeRatio = (cutoffTime - firstTime) / (lastTime - firstTime);
+                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 pointRatio = i / (individualPoints.length - 1);
-                    const isBeforeCutoff = pointRatio < timeRatio;
+                    let isBeforeCutoff = false;
+                    if (cutoffTime < visibleMinTime) {
+                        isBeforeCutoff = false;
+                    } else if (cutoffTime > visibleMaxTime) {
+                        isBeforeCutoff = (rendering !== 'shadow');
+                    } else {
+                        const visibleCutoffRatio = (cutoffTime - visibleMinTime) / (visibleMaxTime - visibleMinTime);
+                        const cutoffPixelX = visibleCutoffRatio * context.canvas.width;
+                        isBeforeCutoff = x < cutoffPixelX;
+                    }
                     
                     if (isBeforeCutoff) {
                         const reducedOpacityColor = applyReducedOpacity(color, cutoffOpacity);
@@ -359,7 +365,7 @@ export default function drawLine(dataInRenderSpace, {
                     }
                     
                     context.beginPath();
-                    context.arc(x, y, width + 4, 0, 2 * Math.PI, false);
+                    context.arc(x, y, pointRadius || 8, 0, 2 * Math.PI, false);
                     context.fill();
                 }
             } else if (!selectionBounds) {
@@ -367,7 +373,7 @@ export default function drawLine(dataInRenderSpace, {
                     const [x, y] = individualPoints[i];
                     context.fillStyle = color;
                     context.beginPath();
-                    context.arc(x, y, width + 4, 0, 2 * Math.PI, false);
+                    context.arc(x, y, pointRadius || 8, 0, 2 * Math.PI, false);
                     context.fill();
                 }
             } else {
@@ -396,7 +402,7 @@ export default function drawLine(dataInRenderSpace, {
                     }
                     
                     context.beginPath();
-                    context.arc(x, y, width + 4, 0, 2 * Math.PI, false);
+                    context.arc(x, y, pointRadius || 8, 0, 2 * Math.PI, false);
                     context.fill();
                 }
             }
@@ -405,7 +411,7 @@ export default function drawLine(dataInRenderSpace, {
                 const [x, y] = individualPoints[i];
                 context.fillStyle = color;
                 context.beginPath();
-                context.arc(x, y, width + 4, 0, 2 * Math.PI, false);
+                context.arc(x, y, pointRadius || 8, 0, 2 * Math.PI, false);
                 context.fill();
             }
         }

package/src/renderer/graph_body_renderer.js

@@ -1,5 +1,5 @@
 import Eventable from '../eventable';
-import getColor from '../helpers/colors';
+import getColor, { createDefaultGradient } from '../helpers/colors';
 import inferType from '../state/infer_type';
 import BackgroundProgram from './background_program.js';
 import drawArea from './draw_area';
@@ -161,7 +161,7 @@ export default class GraphBodyRenderer extends Eventable {
         }
         
         const getIndividualPoints = (useDataSpace, includeBeyondBounds = false) => {
-            if (!useDataSpace && inRenderSpace && inRenderSpace.yValues) {
+            if (!useDataSpace && inRenderSpace && inRenderSpace.yValues && !showIndividualPoints) {
                 if (!bounds) {
                     bounds = singleSeries.axis.currentBounds;
                 }
@@ -188,6 +188,21 @@ 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;
             }
 
@@ -255,6 +270,19 @@ 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;
         };
 
@@ -351,7 +379,7 @@ export default class GraphBodyRenderer extends Eventable {
 
             if (singleSeries.cutoffTime) {
                 barParams.cutoffIndex = cutoffIndex;
-                barParams.cutoffOpacity = 0.35;
+                barParams.cutoffOpacity = singleSeries.cutoffOpacity !== undefined ? singleSeries.cutoffOpacity : 0.35;
                 barParams.originalData = cutoffData;
                 barParams.renderCutoffGradient = cutoffIndex >= 0; 
                 
@@ -380,7 +408,7 @@ export default class GraphBodyRenderer extends Eventable {
 
         if (singleSeries.cutoffTime) {
             areaParams.cutoffIndex = cutoffIndex;
-            areaParams.cutoffOpacity = 0.35;
+            areaParams.cutoffOpacity = singleSeries.cutoffOpacity !== undefined ? singleSeries.cutoffOpacity : 0.35;
             areaParams.originalData = cutoffData;
             areaParams.renderCutoffGradient = cutoffIndex >= 0; 
             areaParams.isPreview = this === this._stateController.rangeGraphRenderer; 
@@ -418,11 +446,18 @@ export default class GraphBodyRenderer extends Eventable {
                 bounds = singleSeries.axis.currentBounds;
             }
             
-            let zero = singleSeries.zeroLineY === 'bottom' ?
-                this._sizing.renderHeight :
-                singleSeries.zeroLineY !== undefined ? 
-                    (1.0 - ((singleSeries.zeroLineY) - bounds.minY) / (bounds.maxY - bounds.minY)) * this._sizing.renderHeight :
-                    this._sizing.renderHeight;
+            let zero;
+            if (singleSeries.zeroLineY === 'bottom') {
+                zero = this._sizing.renderHeight;
+            } else if (singleSeries.zeroLineY !== undefined) {
+                zero = (1.0 - ((singleSeries.zeroLineY) - bounds.minY) / (bounds.maxY - bounds.minY)) * this._sizing.renderHeight;
+            } else {
+                if (bounds.minY <= 0 && bounds.maxY >= 0) {
+                    zero = (1.0 - (0 - bounds.minY) / (bounds.maxY - bounds.minY)) * this._sizing.renderHeight;
+                } else {
+                    zero = this._sizing.renderHeight;
+                }
+            }
                 
             const boundsChanged = !this._lastBounds || 
                 bounds.minY !== this._lastBounds.minY || 
@@ -442,9 +477,10 @@ export default class GraphBodyRenderer extends Eventable {
                 zero = 0;
             }
             
+            const shadowColor = getColor(singleSeries.color, singleSeries.index, singleSeries.multigrapherSeriesIndex);
             let shadowParams = {
-                color: getColor(singleSeries.color, singleSeries.index, singleSeries.multigrapherSeriesIndex),
-                gradient: singleSeries.gradient,
+                color: shadowColor,
+                gradient: singleSeries.gradient || createDefaultGradient(shadowColor),
                 zero,
                 sizing: this._sizing,
                 inRenderSpaceAreaBottom
@@ -452,7 +488,7 @@ export default class GraphBodyRenderer extends Eventable {
 
             if (singleSeries.cutoffTime) {
                 shadowParams.cutoffIndex = cutoffIndex;
-                shadowParams.cutoffOpacity = 0.35;
+                shadowParams.cutoffOpacity = singleSeries.cutoffOpacity !== undefined ? singleSeries.cutoffOpacity : 0.35;
                 shadowParams.originalData = cutoffData;
                 shadowParams.renderCutoffGradient = cutoffIndex >= 0; 
                 shadowParams.isPreview = this === this._stateController.rangeGraphRenderer; 
@@ -524,6 +560,7 @@ export default class GraphBodyRenderer extends Eventable {
             dashPattern: singleSeries.dashPattern,
             highlighted,
             showIndividualPoints: shouldShowIndividualPoints,
+            pointRadius: singleSeries.pointRadius,
             getIndividualPoints,
             getRanges: singleSeries.rangeKey ? getRanges : null,
             rendering: singleSeries.rendering  // Pass rendering type for all charts
@@ -536,7 +573,7 @@ export default class GraphBodyRenderer extends Eventable {
         
         if (singleSeries.cutoffTime) {
             drawParams.cutoffIndex = cutoffIndex;
-            drawParams.cutoffOpacity = 0.35;
+            drawParams.cutoffOpacity = singleSeries.cutoffOpacity !== undefined ? singleSeries.cutoffOpacity : 0.35;
             drawParams.originalData = cutoffData;
             drawParams.renderCutoffGradient = cutoffIndex >= 0;
             drawParams.currentBounds = bounds;

package/src/renderer/line_program.js

@@ -122,7 +122,8 @@ export default class LineProgram {
 
             gl.uniform1f(gl.getUniformLocation(this._circleProgram, 'width'), width);
             gl.uniform1f(gl.getUniformLocation(this._circleProgram, 'height'), height);
-            gl.uniform1f(gl.getUniformLocation(this._circleProgram, 'pointSize'), 2*(thickness+6));
+            const pointSize = parameters.pointRadius ? parameters.pointRadius * 2 * DPI_INCREASE : 2*(thickness+6);
+            gl.uniform1f(gl.getUniformLocation(this._circleProgram, 'pointSize'), pointSize);
 
             const individualPoints = parameters.getIndividualPoints();
 
@@ -150,14 +151,14 @@ export default class LineProgram {
                 const postCutoffPoints = [];
 
                 if (parameters.isPreview) {
-                    const firstTime = originalData[0][0] instanceof Date ? originalData[0][0].getTime() : originalData[0][0];
-                    const lastTime = originalData[originalData.length - 1][0] instanceof Date ? 
-                        originalData[originalData.length - 1][0].getTime() : originalData[originalData.length - 1][0];
-                    const timeRatio = (cutoffTime - firstTime) / (lastTime - firstTime);
+                    const visibleMinTime = parameters.selectionBounds.minX instanceof Date ? parameters.selectionBounds.minX.getTime() : parameters.selectionBounds.minX;
+                    const visibleMaxTime = parameters.selectionBounds.maxX instanceof Date ? parameters.selectionBounds.maxX.getTime() : parameters.selectionBounds.maxX;
+                    const timeRatio = (cutoffTime - visibleMinTime) / (visibleMaxTime - visibleMinTime);
+                    const cutoffPixelX = timeRatio * width;
                     
                     for (let i = 0; i < individualPoints.length; i++) {
-                        const pointRatio = i / (individualPoints.length - 1);
-                        if (pointRatio < timeRatio) {
+                        const [pixelX, pixelY] = individualPoints[i];
+                        if (pixelX < cutoffPixelX) {
                             preCutoffPoints.push(individualPoints[i]);
                         } else {
                             postCutoffPoints.push(individualPoints[i]);
@@ -252,10 +253,10 @@ export default class LineProgram {
         }
 
         if (parameters.isPreview) {
-            const firstTime = originalData[0][0] instanceof Date ? originalData[0][0].getTime() : originalData[0][0];
-            const lastTime = originalData[originalData.length - 1][0] instanceof Date ? 
-                originalData[originalData.length - 1][0].getTime() : originalData[originalData.length - 1][0];
-            const timeRatio = (cutoffTime - firstTime) / (lastTime - firstTime);
+            const gl = this._gl;
+            const visibleMinTime = selectionBounds.minX instanceof Date ? selectionBounds.minX.getTime() : selectionBounds.minX;
+            const visibleMaxTime = selectionBounds.maxX instanceof Date ? selectionBounds.maxX.getTime() : selectionBounds.maxX;
+            const timeRatio = (cutoffTime - visibleMinTime) / (visibleMaxTime - visibleMinTime);
             
             if (timeRatio < 0) {
                 this.draw(dataInRenderSpace, { ...parameters, renderCutoffGradient: false });
@@ -267,7 +268,6 @@ export default class LineProgram {
                     renderCutoffGradient: false 
                 });
             } else {
-                const gl = this._gl;
                 gl.enable(gl.BLEND);
                 gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
                 

package/src/renderer/shadow_program.js

@@ -422,9 +422,14 @@ export default class ShadowProgram {
         params.color,
         cutoffOpacity
       );
+      const translucentGradient = applyReducedOpacityToGradient(
+        params.gradient,
+        cutoffOpacity
+      );
       this.draw(individualPoints, {
         ...params,
         color: reducedOpacityColor,
+        gradient: translucentGradient,
         renderCutoffGradient: false,
       });
     } else {