@windborne/grapher 1.0.36 → 1.0.38

package/package.json

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

package/src/components/graph_body.jsx

@@ -21,7 +21,7 @@ import binarySearch from '../helpers/binary_search';
 
 export default React.memo(GraphBody);
 
-function GraphBody({ stateController, webgl, bodyHeight, boundsSelectionEnabled, showTooltips, tooltipOptions, checkIntersection, draggablePoints, onPointDrag, onDraggablePointsDoubleClick, verticalLines, clockStyle, timeZone, onPointClick }) {
+function GraphBody({ stateController, webgl, bodyHeight, boundsSelectionEnabled, showTooltips, showContextMenu=true, tooltipOptions, checkIntersection, draggablePoints, onPointDrag, onDraggablePointsDoubleClick, verticalLines, clockStyle, timeZone, onPointClick }) {
     const canvasEl = useCallback((el) => {
         if (stateController.primaryRenderer) {
             stateController.primaryRenderer.dispose();
@@ -278,11 +278,13 @@ function GraphBody({ stateController, webgl, bodyHeight, boundsSelectionEnabled,
     
     const onContextMenu = (event) => {
         event.preventDefault();
-        stateController.setContextMenuMousePosition({
-            clientX: event.clientX,
-            clientY: event.clientY,
-            showing: true
-        });
+        if (showContextMenu !== false) {
+            stateController.setContextMenuMousePosition({
+                clientX: event.clientX,
+                clientY: event.clientY,
+                showing: true
+            });
+        }
     };
 
     return (

package/src/grapher.jsx

@@ -239,6 +239,7 @@ function Grapher(props) {
                                 bodyHeight={props.bodyHeight}
                                 boundsSelectionEnabled={props.boundsSelectionEnabled}
                                 showTooltips={props.showTooltips}
+                                showContextMenu={props.showContextMenu}
                                 tooltipOptions={props.tooltipOptions}
                                 checkIntersection={props.checkIntersection}
                                 draggablePoints={props.draggablePoints}

package/src/index.d.ts

@@ -131,6 +131,7 @@ export interface GrapherProps {
   showRangeSelectors?: boolean;
   showSeriesKey?: boolean;
   showTooltips?: boolean;
+  showContextMenu?: boolean;
   showGrid?: boolean;
   showAxisColors?: boolean;
   bigLabels?: boolean;

package/src/renderer/draw_line.js

@@ -29,6 +29,12 @@ export default function drawLine(dataInRenderSpace, {
         return;
     }
     
+    // Check if this is a WebGL context instead of 2D context
+    if (!context.setLineDash) {
+        console.error('drawLine called with WebGL context instead of 2D context');
+        return;
+    }
+    
     if (highlighted) {
         width += 2;
     }
@@ -351,9 +357,27 @@ export default function drawLine(dataInRenderSpace, {
     if (showIndividualPoints) {
         const individualPoints = getIndividualPoints();
 
-        if (renderCutoffGradient && cutoffIndex !== undefined && originalData) {
+        if (renderCutoffGradient && cutoffIndex !== undefined && originalData && selectionBounds) {
+            const visibleBounds = selectionBounds;
+            let firstTime, lastTime;
+            
+            if (visibleBounds && visibleBounds.minX !== undefined && visibleBounds.maxX !== undefined) {
+                firstTime = visibleBounds.minX instanceof Date ? visibleBounds.minX.getTime() : visibleBounds.minX;
+                lastTime = visibleBounds.maxX instanceof Date ? visibleBounds.maxX.getTime() : visibleBounds.maxX;
+            } else {
+                const firstItem = originalData[0];
+                const lastItem = originalData[originalData.length - 1];
+                const firstX = firstItem[0];
+                const lastX = lastItem[0];
+                
+                firstTime = firstX instanceof Date ? firstX.getTime() : firstX;
+                lastTime = lastX instanceof Date ? lastX.getTime() : lastX;
+            }
+            
             let cutoffTime;
-            if (typeof originalData[0] === 'object' && originalData[0].length === 2) {
+            if (typeof cutoffIndex === 'string' && cutoffIndex === 'now') {
+                cutoffTime = Date.now();
+            } else if (typeof originalData[0] === 'object' && originalData[0].length === 2) {
                 const baseIndex = Math.floor(cutoffIndex);
                 const fraction = cutoffIndex - baseIndex;
                 
@@ -371,6 +395,38 @@ export default function drawLine(dataInRenderSpace, {
                 cutoffTime = cutoffIndex; 
             }
             
+            if (cutoffTime !== null) {
+                const timeDiff = cutoffTime - firstTime;
+                const totalTime = lastTime - firstTime;
+                const timeRatio = timeDiff / totalTime;
+                
+                if (timeRatio > 1) {
+                    const spacedPoints = applyPointSpacing(individualPoints, minPointSpacing);
+                    for (let i = 0; i < spacedPoints.length; i++) {
+                        const [x, y] = spacedPoints[i];
+                        
+                        let pointColor = color;
+                        if (negativeColor && hasNegatives) {
+                            if (y === zero && zeroColor) {
+                                pointColor = zeroColor;
+                            } else if (y < zero) {
+                                pointColor = color;
+                            } else {
+                                pointColor = negativeColor;
+                            }
+                        }
+                        
+                        const { applyReducedOpacity } = require("../helpers/colors");
+                        const reducedOpacityColor = applyReducedOpacity(pointColor, cutoffOpacity);
+                        context.fillStyle = reducedOpacityColor;
+                        context.beginPath();
+                        context.arc(x, y, pointRadius || 8, 0, 2 * Math.PI, false);
+                        context.fill();
+                    }
+                    return;
+                }
+            }
+            
             if (isPreview) {
                 const visibleMinTime = selectionBounds.minX instanceof Date ? selectionBounds.minX.getTime() : selectionBounds.minX;
                 const visibleMaxTime = selectionBounds.maxX instanceof Date ? selectionBounds.maxX.getTime() : selectionBounds.maxX;
@@ -417,7 +473,6 @@ export default function drawLine(dataInRenderSpace, {
                 for (let i = 0; i < spacedPoints.length; i++) {
                     const [x, y] = spacedPoints[i];
                     
-                    // Determine point color based on position relative to zero
                     let pointColor = color;
                     if (negativeColor && hasNegatives) {
                         if (y === zero && zeroColor) {

package/src/renderer/graph_body_renderer.js

@@ -96,6 +96,12 @@ export default class GraphBodyRenderer extends Eventable {
     clear() {
         if (this._webgl) {
             this._lineProgram.clear();
+            // Also clear the overlay canvas if it exists (for multi shadow charts)
+            if (this._overlayContext) {
+                this._overlayContext.clearRect(0, 0, this._overlayCanvas.width, this._overlayCanvas.height);
+            }
+            // Reset the initialization flag so canvas can be resized if needed
+            this._overlayCanvasInitialized = false;
         } else {
             this._context.clearRect(0, 0, this._context.canvas.width, this._context.canvas.height);
         }
@@ -564,8 +570,8 @@ export default class GraphBodyRenderer extends Eventable {
         // since WebGL and 2D contexts can't coexist on the same canvas
         let drawContext = this._context;
         
-        if (this._webgl && singleSeries.rendering === 'shadow' && (width > 0 || shouldShowIndividualPoints)) {
-            // Only create overlay if we're actually drawing lines or points
+        if (this._webgl && singleSeries.rendering === 'shadow') {
+            // Always create overlay for shadow charts since they need 2D context for drawLine
             if (!this._overlayCanvas) {
                 this._overlayCanvas = document.createElement('canvas');
                 this._overlayCanvas.style.position = 'absolute';
@@ -576,19 +582,28 @@ export default class GraphBodyRenderer extends Eventable {
                 this._canvas.parentNode.insertBefore(this._overlayCanvas, this._canvas.nextSibling);
             }
             
-            // Size the overlay canvas to match the main canvas
-            this._overlayCanvas.width = this._canvas.width;
-            this._overlayCanvas.height = this._canvas.height;
-            this._overlayCanvas.style.width = this._canvas.style.width;
-            this._overlayCanvas.style.height = this._canvas.style.height;
-            
-            // Clear the overlay before drawing
-            this._overlayContext.clearRect(0, 0, this._overlayCanvas.width, this._overlayCanvas.height);
-            
+            // Size the overlay canvas to match the main canvas (only once when creating)
+            if (!this._overlayCanvasInitialized) {
+                this._overlayCanvas.width = this._canvas.width;
+                this._overlayCanvas.height = this._canvas.height;
+                this._overlayCanvas.style.width = this._canvas.style.width;
+                this._overlayCanvas.style.height = this._canvas.style.height;
+                this._overlayCanvasInitialized = true;
+            }
             drawContext = this._overlayContext;
         } else if (this._context2d) {
             // For non-WebGL or non-shadow charts with 2D context
             drawContext = this._context2d;
+        } else if (this._webgl) {
+            // Fallback for WebGL: create a temporary context for drawing lines
+            console.warn('Creating fallback 2D context for WebGL shadow chart');
+            if (!this._fallbackContext) {
+                const fallbackCanvas = document.createElement('canvas');
+                fallbackCanvas.width = this._canvas.width;
+                fallbackCanvas.height = this._canvas.height;
+                this._fallbackContext = fallbackCanvas.getContext('2d');
+            }
+            drawContext = this._fallbackContext;
         }
 
         const drawParams = {
@@ -612,6 +627,19 @@ export default class GraphBodyRenderer extends Eventable {
             zeroColor: singleSeries.zeroLineColor
         };
         
+        if (this._webgl && singleSeries.rendering === 'shadow' && singleSeries.cutoffTime && (width > 0 || shouldShowIndividualPoints)) {
+            drawParams.cutoffIndex = cutoffIndex;
+            drawParams.cutoffOpacity = singleSeries.cutoffOpacity !== undefined ? singleSeries.cutoffOpacity : 0.35;
+            drawParams.originalData = cutoffData;
+            drawParams.renderCutoffGradient = cutoffIndex >= 0;
+            
+            const selection = this === this._stateController.rangeGraphRenderer 
+                ? this._stateController._bounds 
+                : (this._stateController._selection || this._stateController._bounds);
+            drawParams.selectionBounds = selection || bounds;
+            drawParams.currentBounds = bounds;
+        }
+        
 
         if (!inRenderSpace) {
             console.error('inRenderSpace is null for line rendering');