@windborne/grapher 1.0.22 → 1.0.24

package/package.json

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

package/readme.md

@@ -78,7 +78,7 @@ The `series` prop requires an array of objects, where each object represents a d
 - **name**: Series name for display in legend
 - **xLabel**: Label for x-axis
 - **yLabel**: Label for y-axis
-- **rendering**: Visual representation ('line', 'bar', or 'area', defaults to 'line')
+- **rendering**: Visual representation ('line', 'bar', 'area', or 'shadow', defaults to 'line'). The 'shadow' option creates an area chart with individual point-based (trapezoid) gradients extending downward.
 - **ignoreDiscontinuities**: Whether to connect points across gaps (boolean)
 - **dashed**: Whether to use dashed lines (boolean)
 - **dashPattern**: Array defining dash pattern (array of numbers)

package/src/components/graph_body.jsx

@@ -159,12 +159,52 @@ function GraphBody({ stateController, webgl, bodyHeight, boundsSelectionEnabled,
             });
         };
 
+        const getTouch = (event) => event.touches?.[0] || event.changedTouches?.[0];
+
+        const onGlobalTouchStart = (event) => {
+            if (!showTooltips) {
+                return;
+            }
+            const touch = getTouch(event);
+            if (!touch) return;
+            stateController.setTooltipMousePosition({
+                clientX: touch.clientX,
+                clientY: touch.clientY
+            });
+            if (event.cancelable) event.preventDefault();
+        };
+
+        const onGlobalTouchMove = (event) => {
+            if (!showTooltips) {
+                return;
+            }
+            const touch = getTouch(event);
+            if (!touch) return;
+            stateController.setTooltipMousePosition({
+                clientX: touch.clientX,
+                clientY: touch.clientY
+            });
+            if (event.cancelable) event.preventDefault();
+        };
+
+        const onGlobalTouchEnd = () => {
+            stateController.showOnlySavedTooltips();
+        };
+
         window.addEventListener('scroll', onScroll, { passive: true });
         window.addEventListener('mousemove', onGlobalMouseMove, { passive: true });
+        window.addEventListener('touchstart', onGlobalTouchStart, { passive: false });
+        window.addEventListener('touchmove', onGlobalTouchMove, { passive: false });
+        window.addEventListener('touchend', onGlobalTouchEnd, { passive: true });
+        window.addEventListener('touchcancel', onGlobalTouchEnd, { passive: true });
 
         return () => {
             window.removeEventListener('scroll', onScroll);
             window.removeEventListener('mousemove', onGlobalMouseMove);
+            window.removeEventListener('touchstart', onGlobalTouchStart);
+            window.removeEventListener('touchmove', onGlobalTouchMove);
+            window.removeEventListener('touchend', onGlobalTouchEnd);
+            window.removeEventListener('touchcancel', onGlobalTouchEnd);
         };
     }, []);
 
@@ -319,4 +359,4 @@ GraphBody.propTypes = {
     onPointClick: PropTypes.func,
     clockStyle: PropTypes.oneOf(['12h', '24h']),
     timeZone: PropTypes.string
-};
+};

package/src/components/range_graph.jsx

@@ -32,6 +32,16 @@ export default class RangeGraph extends React.PureComponent {
         this.startRightDrag = this.startRightDrag.bind(this);
     }
 
+    getClientX(event) {
+        if (event && event.touches && event.touches[0]) {
+            return event.touches[0].clientX;
+        }
+        if (event && event.changedTouches && event.changedTouches[0]) {
+            return event.changedTouches[0].clientX;
+        }
+        return event.clientX;
+    }
+
     componentDidMount() {
         this._renderer = new GraphBodyRenderer({
             stateController: this.props.stateController,
@@ -60,14 +70,16 @@ export default class RangeGraph extends React.PureComponent {
     }
 
     componentDidUpdate(prevProps) {
-        if (prevProps.draggingY !== this.props.draggingY) {
+        if (prevProps.draggingY !== this.props.draggingY && this._renderer) {
             this._renderer.resize();
         }
     }
 
     componentWillUnmount() {
-        this._renderer.dispose();
-        this._renderer = null;
+        if (this._renderer) {
+            this._renderer.dispose();
+            this._renderer = null;
+        }
     }
 
     onMouseMove(event) {
@@ -75,11 +87,16 @@ export default class RangeGraph extends React.PureComponent {
             return;
         }
 
+        // Prevent scrolling during touch-drag
+        if (event && event.touches && event.preventDefault) {
+            event.preventDefault();
+        }
+
         let boundCalculator;
         const leftX = this.el.getBoundingClientRect().left;
 
         this.setState(({selectionBounds, globalBounds, elementWidth}) => {
-            const pixelX = event.clientX - leftX;
+            const pixelX = this.getClientX(event) - leftX;
             let percentage = pixelX/elementWidth;
 
             percentage = Math.max(percentage, 0);
@@ -175,12 +192,19 @@ export default class RangeGraph extends React.PureComponent {
     addListeners() {
         window.addEventListener('mousemove', this.onMouseMove);
         window.addEventListener('mouseup', this.stopDragging);
+        window.addEventListener('touchmove', this.onMouseMove, { passive: false });
+        window.addEventListener('touchend', this.stopDragging);
+        window.addEventListener('touchcancel', this.stopDragging);
     }
 
     stopDragging() {
         this._dragType = null;
+        this.forceUpdate();
         window.removeEventListener('mousemove', this.onMouseMove);
         window.removeEventListener('mouseup', this.stopDragging);
+        window.removeEventListener('touchmove', this.onMouseMove);
+        window.removeEventListener('touchend', this.stopDragging);
+        window.removeEventListener('touchcancel', this.stopDragging);
     }
 
     startScroll(event) {
@@ -189,7 +213,7 @@ export default class RangeGraph extends React.PureComponent {
         const {selectionBounds, globalBounds, elementWidth} = this.state;
         const leftX = this.el.getBoundingClientRect().left;
 
-        const pixelStartX = event.clientX - leftX;
+        const pixelStartX = this.getClientX(event) - leftX;
         const pixelMinX = (selectionBounds.minX - globalBounds.minX)/(globalBounds.maxX - globalBounds.minX) * elementWidth || 0;
         const pixelMaxX = (selectionBounds.maxX - globalBounds.minX)/(globalBounds.maxX - globalBounds.minX) * elementWidth || 0;
 
@@ -197,12 +221,12 @@ export default class RangeGraph extends React.PureComponent {
         this.addListeners();
     }
 
-    startLeftDrag() {
+    startLeftDrag(event) {
         this._dragType = 'left';
         this.addListeners();
     }
 
-    startRightDrag() {
+    startRightDrag(event) {
         this._dragType = 'right';
         this.addListeners();
     }
@@ -222,6 +246,7 @@ export default class RangeGraph extends React.PureComponent {
         }
 
         const barSize = 14;
+        const totalHeight = elementHeight + barSize; 
         let ticks;
 
         if (selectionBounds.dates && this.props.markDates) {
@@ -246,10 +271,10 @@ export default class RangeGraph extends React.PureComponent {
 
         return (
             <div className="range-selection-graph">
-                <div className="graph-body graph-body-secondary">
+                <div className="graph-body graph-body-secondary" style={{ touchAction: 'none' }}>
                     <canvas ref={(el) => this.el = el} />
 
-                    <svg>
+                    <svg style={{ height: totalHeight }}>
                         <g>
                             <rect
                                 x={0}
@@ -266,6 +291,11 @@ export default class RangeGraph extends React.PureComponent {
                                     }
 
                                     const classes = ['axis-item', `axis-item-${size}`, `axis-item-${position}`];
+                                    
+                                    const isHighlighted = pixelValue >= pixelMinX && pixelValue <= pixelMaxX;
+                                    if (isHighlighted) {
+                                        classes.push('axis-item-highlighted');
+                                    }
 
                                     return (
                                         <g key={i} className={classes.join(' ')}>
@@ -286,6 +316,7 @@ export default class RangeGraph extends React.PureComponent {
                                 height={barSize}
                                 className="selection-bar"
                                 onMouseDown={this.startScroll}
+                                onTouchStart={this.startScroll}
                             />
 
                             <path
@@ -293,6 +324,7 @@ export default class RangeGraph extends React.PureComponent {
                                 className="selection-bar-rifles"
                                 transform={`translate(${pixelMinX + (pixelMaxX - pixelMinX)/2},${elementHeight})`}
                                 onMouseDown={this.startScroll}
+                                onTouchStart={this.startScroll}
                             />
                         </g>
 
@@ -301,37 +333,53 @@ export default class RangeGraph extends React.PureComponent {
                                 x={pixelMinX}
                                 y={0}
                                 width={pixelMaxX - pixelMinX}
-                                height={elementHeight}
-                                className="target-selection"
-                                onMouseDown={this.startScroll}
-                            />
-
-                            <rect
-                                x={pixelMinX}
-                                y={0}
-                                width={pixelMaxX - pixelMinX}
-                                height={elementHeight + barSize}
+                                height={totalHeight}
                                 className="target-selection-outline"
                             />
                         </g>
 
-                        <g>
+                        {/* Left handle */}
+                        <g className={`selection-handle${(this._dragType === 'left' || this._dragType === 'scroll') ? ' selection-handle-dragging' : ''}`}>
+                            <rect
+                                x={pixelMinX - 15}
+                                y={(elementHeight - 30)/2}
+                                width={30}
+                                height={30}
+                                fill="transparent"
+                                className="selection-bar-handle-hit"
+                                onMouseDown={this.startLeftDrag}
+                                onTouchStart={this.startLeftDrag}
+                            />
                             <path
                                 d="M -4.5 0.5 L 3.5 0.5 L 3.5 15.5 L -4.5 15.5 L -4.5 0.5 M -1.5 4 L -1.5 12 M 0.5 4 L 0.5 12"
                                 className="selection-bar-handle"
                                 transform={`translate(${pixelMinX},${(elementHeight - 15)/2})`}
                                 onMouseDown={this.startLeftDrag}
+                                onTouchStart={this.startLeftDrag}
                             />
                         </g>
 
-                        <g>
+                        {/* Right handle */}
+                        <g className={`selection-handle${(this._dragType === 'right' || this._dragType === 'scroll') ? ' selection-handle-dragging' : ''}`}>
+                            <rect
+                                x={pixelMaxX - 15}
+                                y={(elementHeight - 30)/2}
+                                width={30}
+                                height={30}
+                                fill="transparent"
+                                className="selection-bar-handle-hit"
+                                onMouseDown={this.startRightDrag}
+                                onTouchStart={this.startRightDrag}
+                            />
                             <path
                                 d="M -4.5 0.5 L 3.5 0.5 L 3.5 15.5 L -4.5 15.5 L -4.5 0.5 M -1.5 4 L -1.5 12 M 0.5 4 L 0.5 12"
                                 className="selection-bar-handle"
                                 transform={`translate(${pixelMaxX},${(elementHeight - 15)/2})`}
                                 onMouseDown={this.startRightDrag}
+                                onTouchStart={this.startRightDrag}
                             />
                         </g>
+
                     </svg>
 
                     {
@@ -365,4 +413,4 @@ RangeGraph.propTypes = {
     markDates: PropTypes.bool,
     timeZone: PropTypes.string,
     verticalLines: CustomPropTypes.VerticalLines
-};
+};

package/src/components/x_axis.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {calculatePrecision, calculateTimePrecision, formatX} from '../helpers/format';
-import placeGrid from '../helpers/place_grid';
+import placeGrid, { placeTimeOnlyGrid, placeDateOnlyGrid } from '../helpers/place_grid';
 import {useEnumMap, useHasXEnum, usePrimarySize, useSelection} from '../state/hooks';
 import StateController from '../state/state_controller';
 
@@ -44,40 +44,153 @@ function XAxis({ showAxes, showGrid, stateController, bigLabels, xTickUnit, cloc
     const minLabel = formatX(minX, {...formatOptions, dates, precision }).toString();
     const maxLabel = formatX(maxX, {...formatOptions, dates, precision }).toString();
 
-    let expectedLabelWidth = Math.max(minLabel.length, maxLabel.length) * 4;
+    let expectedLabelWidth = Math.max(minLabel.length, maxLabel.length);
     if (bigLabels) {
         expectedLabelWidth *= 2;
     }
 
-    const labelPadding = 30; // space in between labels in the expected case
+    const labelPadding = 30;
 
-    const ticks = placeGrid({
-        min: minX,
-        max: maxX,
-        totalSize: elementWidth,
-        precision,
-        dates,
-        formatter: formatXAxisLabel || formatX,
-        expectedLabelSize: expectedLabelWidth,
-        labelPadding,
-        formatOptions
-    });
+    let timeTicks = null;
+    let dateTicks = null;
+    let regularTicks = null;
+    
+    if (dates) {
+        timeTicks = placeTimeOnlyGrid({
+            min: minX,
+            max: maxX,
+            totalSize: elementWidth,
+            precision,
+            expectedLabelSize: expectedLabelWidth,
+            labelPadding: labelPadding * 0.8,
+            formatter: formatXAxisLabel || formatX,
+            formatOptions
+        });
+        
+        dateTicks = placeDateOnlyGrid({
+            min: minX,
+            max: maxX,
+            totalSize: elementWidth,
+            precision,
+            expectedLabelSize: expectedLabelWidth * 2,
+            labelPadding: labelPadding * 1.5,
+            formatter: formatXAxisLabel || formatX,
+            formatOptions
+        });
+    } else {
+        regularTicks = placeGrid({
+            min: minX,
+            max: maxX,
+            totalSize: elementWidth,
+            precision,
+            dates,
+            formatter: formatXAxisLabel || formatX,
+            expectedLabelSize: expectedLabelWidth,
+            labelPadding,
+            formatOptions
+        });
+    }
 
-    const xAxisHeight = 20;
+    const xAxisHeight = dates ? 30 : 20;
 
     return (
-        <svg className="axis x-axis" style={showAxes ? undefined : {marginBottom: -20}}>
+        <svg className={`axis x-axis${dates ? ' x-axis-dual' : ''}`} style={showAxes ? undefined : {marginBottom: -20}}>
             {
                 showAxes &&
                 <path d={`M-1,0 H${elementWidth}`} className="axis-line" />
             }
+
+            {/* Render time ticks in first row */}
             {
-                showAxes &&
-                <path d={`M-2,1 H${elementWidth + 1}`} className="axis-line-shadow" />
+                dates && timeTicks && timeTicks.map(({ pixelValue, label, size, position, skipGrid }, i) => {
+
+                    const singleTick = timeTicks.length === 1;
+                    
+                    if (isNaN(pixelValue)) {
+                        return null;
+                    }
+
+                    const classes = ['axis-item', `axis-item-${size}`, `axis-item-${position}`];
+                    if (bigLabels) {
+                        classes.push('axis-item-big-labels');
+                    }
+                    
+                    return (
+                        <g key={`time-${i}`} className={classes.join(' ')}>
+                            {
+                                showAxes &&
+                                <path d={`M${pixelValue},1 v12`} className="axis-tick" />
+                            }
+
+                            {
+                                showGrid && !skipGrid &&
+                                <path d={`M${pixelValue},0 v-${elementHeight}`} />
+                            }
+
+                            {
+                                showAxes &&
+                                <text 
+                                    x={(position === 'last' && !singleTick) ? pixelValue - 3 : pixelValue + 3} 
+                                    y={12} 
+                                    textAnchor={(position === 'last' && !singleTick) ? 'end' : 'start'}
+                                    className='x-axis-text x-axis-time-text'
+                                >
+                                    {label}
+                                </text>
+                            }
+                        </g>
+                    );
+                })
             }
+            
+            {/* Render date ticks in second row */}
+            {
+                dates && dateTicks && dateTicks.map(({ pixelValue, label, size, position, trueValue }, i) => {
+                    
+                    if (isNaN(pixelValue)) {
+                        return null;
+                    }
+
+                    const classes = ['axis-item', `axis-item-${size}`, `axis-item-${position}`];
+                    if (bigLabels) {
+                        classes.push('axis-item-big-labels');
+                    }
+
+                    let timezoneLabel = undefined;
+                    if (timeZone) {
+                        if (i === 0) {
+                            timezoneLabel = timeZone.toLowerCase() === 'utc' ? 'UTC' : timeZone;
+                        }
+                    }
 
+                    return (
+                        <g key={`date-${i}`} className={classes.join(' ')}>
+                            {
+                                showAxes &&
+                                <text 
+                                    x={position === 'last' ? pixelValue - 3 : pixelValue + 3} 
+                                    y={25} 
+                                    textAnchor={position === 'last' ? 'end' : 'start'}
+                                    className='x-axis-text x-axis-date-text'
+                                >
+                                    <tspan className='x-axis-date-label'>
+                                        {label}
+                                    </tspan>
+                                    {timezoneLabel && (
+                                        <tspan className='x-axis-timezone-label'>
+                                            {' '}({timezoneLabel})
+                                        </tspan>
+                                    )}
+                                </text>
+                            }
+                        </g>
+                    );
+                })
+            }
+            
+            {/* Render regular ticks for non-date data */}
             {
-                ticks.map(({ pixelValue, label, size, position, skipGrid }, i) => {
+                !dates && regularTicks && regularTicks.map(({ pixelValue, label, size, position, skipGrid }, i) => {
                     if (isNaN(pixelValue)) {
                         return null;
                     }
@@ -91,7 +204,7 @@ function XAxis({ showAxes, showGrid, stateController, bigLabels, xTickUnit, cloc
                         <g key={i} className={classes.join(' ')}>
                             {
                                 showAxes &&
-                                <path d={`M${pixelValue},1 v6`} className="axis-tick" />
+                                <path d={`M${pixelValue},1 v12`} className="axis-tick" />
                             }
 
                             {
@@ -101,7 +214,12 @@ function XAxis({ showAxes, showGrid, stateController, bigLabels, xTickUnit, cloc
 
                             {
                                 showAxes &&
-                                <text x={pixelValue} y={xAxisHeight - 5}>
+                                <text 
+                                    x={position === 'last' ? pixelValue - 3 : pixelValue + 3} 
+                                    y={xAxisHeight - 5} 
+                                    textAnchor={position === 'last' ? 'end' : 'start'}
+                                    className='x-axis-text'
+                                >
                                     {label}
                                 </text>
                             }

package/src/components/y_axis.jsx

@@ -135,11 +135,6 @@ function YAxis({ stateController, showAxes, showGrid, showSeriesKey, axis, sideI
                 <path d={`M${side === 'left' ? Y_AXIS_WIDTH-1 : 1},3 V${elementHeight}`} className="axis-line" />
             }
 
-            {
-                showAxes &&
-                <path d={`M${side === 'left' ? Y_AXIS_WIDTH-2 : 0},3 V${elementHeight + 1}`} className="axis-line-shadow" />
-            }
-
             {
                 ticks.map(({ pixelValue, label, size, skipGrid }, i) => {
                     const edge = side === 'left' ? (sideIndex + 1) * Y_AXIS_WIDTH : -sideIndex*Y_AXIS_WIDTH;

package/src/grapher.jsx

@@ -156,11 +156,12 @@ function Grapher(props) {
     const showingSidebar = useShowingSidebar(stateController);
 
     const showAxisColors = typeof props.showAxisColors === 'boolean' ? props.showAxisColors : (theme !== 'export');
-    const showGrid = typeof props.showGrid === 'boolean' ? props.showGrid : (theme !== 'export');
+    const showGrid = typeof props.showGrid === 'boolean' ? props.showGrid : true;
+    const showAxes = typeof props.showAxes === 'boolean' ? props.showAxes : false;
 
     const commonYAxisProps = {
         stateController,
-        showAxes: props.showAxes,
+        showAxes,
         showGrid,
         showSeriesKey: props.showSeriesKey,
         bodyHeight: props.bodyHeight,
@@ -251,7 +252,7 @@ function Grapher(props) {
 
                             <XAxis
                                 showGrid={showGrid}
-                                showAxes={props.showAxes}
+                                showAxes={showAxes}
                                 stateController={stateController}
                                 bigLabels={bigLabels}
                                 xTickUnit={props.xTickUnit}