@windborne/grapher 1.0.0

package/src/components/range_graph.js

@@ -0,0 +1,352 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import GraphBodyRenderer from '../renderer/graph_body_renderer';
+import StateController from '../state/state_controller';
+import placeGrid from '../helpers/place_grid';
+import {formatX} from '../helpers/format';
+
+export default class RangeGraph extends React.PureComponent {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            elementWidth: 0,
+            elementHeight: 0,
+            selectionBounds: {
+                minX: 0,
+                maxX: 0
+            },
+            globalBounds: {
+                minX: 0,
+                maxX: 0
+            }
+        };
+
+        this.onMouseMove = this.onMouseMove.bind(this);
+        this.stopDragging = this.stopDragging.bind(this);
+        this.startScroll = this.startScroll.bind(this);
+        this.startLeftDrag = this.startLeftDrag.bind(this);
+        this.startRightDrag = this.startRightDrag.bind(this);
+    }
+
+    componentDidMount() {
+        this._renderer = new GraphBodyRenderer({
+            stateController: this.props.stateController,
+            canvasElement: this.el,
+            webgl: this.props.webgl,
+            checkIntersection: this.props.checkIntersection
+        });
+        this.props.stateController.rangeGraphRenderer = this._renderer;
+
+        this._renderer.on('size_changed', (sizing) => {
+            this.setState(sizing);
+        });
+
+        this.setState({
+            selectionBounds: this.props.stateController._selection,
+            globalBounds: this.props.stateController._globalBounds
+        });
+
+        this.props.stateController.on('selection_changed', (selectionBounds) =>{
+            this.setState({ selectionBounds });
+        });
+
+        this.props.stateController.on('global_bounds_changed', (globalBounds) =>{
+            this.setState({ globalBounds: globalBounds });
+        });
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.draggingY !== this.props.draggingY) {
+            this._renderer.resize();
+        }
+    }
+
+    componentWillUnmount() {
+        this._renderer.dispose();
+        this._renderer = null;
+    }
+
+    onMouseMove(event) {
+        if (!this._dragType) {
+            return;
+        }
+
+        let boundCalculator;
+        const leftX = this.el.getBoundingClientRect().left;
+
+        this.setState(({selectionBounds, globalBounds, elementWidth}) => {
+            const pixelX = event.clientX - leftX;
+            let percentage = pixelX/elementWidth;
+
+            percentage = Math.max(percentage, 0);
+            percentage = Math.min(percentage, 1);
+
+            let trueX = percentage * (globalBounds.maxX - globalBounds.minX) + globalBounds.minX;
+
+            if (this._dragType === 'scroll') {
+                const range = selectionBounds.maxX - selectionBounds.minX;
+                let minX = trueX - range*this._scrollAnchorPercentage;
+                let maxX = trueX + range*(1-this._scrollAnchorPercentage);
+
+                if (minX < globalBounds.minX) {
+                    minX = globalBounds.minX;
+                    maxX = minX + range;
+                }
+
+                if (maxX > globalBounds.maxX) {
+                    maxX = globalBounds.maxX;
+                    minX = maxX - range;
+                }
+
+                boundCalculator = () => {
+                    return {minX, maxX};
+                };
+
+                return {
+                    selectionBounds: Object.assign({}, selectionBounds, {
+                        minX, maxX
+                    })
+                };
+            } else if (this._dragType === 'left') {
+                if (trueX > selectionBounds.maxX) {
+                    trueX = selectionBounds.maxX;
+                }
+
+                const boundToRight = globalBounds.maxX === selectionBounds.maxX;
+
+                boundCalculator = () => {
+                    if (boundToRight) {
+                        return {
+                            minX: trueX
+                        };
+                    } else {
+                        return {
+                            minX: trueX,
+                            maxX: selectionBounds.maxX
+                        };
+                    }
+                };
+
+                return {
+                    selectionBounds: Object.assign({}, selectionBounds, {
+                        minX: trueX
+                    })
+                };
+            } else if (this._dragType === 'right') {
+                if (trueX < selectionBounds.minX) {
+                    trueX = selectionBounds.minX;
+                }
+
+                const boundToLeft = globalBounds.minX === selectionBounds.minX;
+
+                boundCalculator = () => {
+                    if (boundToLeft) {
+                        return {
+                            maxX: trueX
+                        };
+                    } else {
+                        return {
+                            minX: selectionBounds.minX,
+                            maxX: trueX
+                        };
+                    }
+                };
+
+                return {
+                    selectionBounds: Object.assign({}, selectionBounds, {
+                        maxX: trueX
+                    })
+                };
+            }
+        }, () => {
+            if (!boundCalculator) {
+                return;
+            }
+
+            boundCalculator.debounceHistory = true;
+            this.props.stateController.boundCalculator = boundCalculator;
+        });
+    }
+
+    addListeners() {
+        window.addEventListener('mousemove', this.onMouseMove);
+        window.addEventListener('mouseup', this.stopDragging);
+    }
+
+    stopDragging() {
+        this._dragType = null;
+        window.removeEventListener('mousemove', this.onMouseMove);
+        window.removeEventListener('mouseup', this.stopDragging);
+    }
+
+    startScroll(event) {
+        this._dragType = 'scroll';
+
+        const {selectionBounds, globalBounds, elementWidth} = this.state;
+        const leftX = this.el.getBoundingClientRect().left;
+
+        const pixelStartX = event.clientX - 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;
+
+        this._scrollAnchorPercentage = (pixelStartX-pixelMinX)/(pixelMaxX - pixelMinX);
+        this.addListeners();
+    }
+
+    startLeftDrag() {
+        this._dragType = 'left';
+        this.addListeners();
+    }
+
+    startRightDrag() {
+        this._dragType = 'right';
+        this.addListeners();
+    }
+
+    render() {
+        const { globalBounds, selectionBounds, elementWidth, elementHeight } = this.state;
+
+        let pixelMinX = Math.min(Math.max((selectionBounds.minX - globalBounds.minX)/(globalBounds.maxX - globalBounds.minX), 0), 1) * elementWidth || 0;
+        let pixelMaxX =  Math.min(Math.max((selectionBounds.maxX - globalBounds.minX)/(globalBounds.maxX - globalBounds.minX), 0), 1) * elementWidth || 0;
+
+        if (isNaN(pixelMinX) || !isFinite(pixelMinX) || selectionBounds.maxX < selectionBounds.minX) {
+            pixelMinX = 0;
+        }
+
+        if (isNaN(pixelMaxX) || !isFinite(pixelMaxX) || selectionBounds.maxX < selectionBounds.minX) {
+            pixelMaxX = 0;
+        }
+
+        const barSize = 14;
+        let ticks;
+
+        if (selectionBounds.dates && this.props.markDates) {
+            ticks = placeGrid({
+                min: globalBounds.minX,
+                max: globalBounds.maxX,
+                totalSize: elementWidth,
+                precision: 'day',
+                dates: selectionBounds.dates,
+                formatter: formatX,
+                expectedLabelSize: 30,
+                formatOptions: {
+                    justMonthAndDay: true,
+                    unitOverride: 'day',
+                    timeZone: this.props.timeZone
+                },
+                skipFirst: true,
+                skipLast: true
+            });
+        }
+
+        return (
+            <div className="range-selection-graph">
+                <div className="graph-body graph-body-secondary">
+                    <canvas ref={(el) => this.el = el} />
+
+                    <svg>
+                        <g>
+                            <rect
+                                x={0}
+                                y={elementHeight}
+                                width={elementWidth}
+                                height={barSize}
+                                className="selection-bar-track"
+                            />
+
+                            {
+                                ticks && ticks.map(({ pixelValue, label, size, position }, i) => {
+                                    if (isNaN(pixelValue)) {
+                                        return null;
+                                    }
+
+                                    const classes = ['axis-item', `axis-item-${size}`, `axis-item-${position}`];
+
+                                    return (
+                                        <g key={i} className={classes.join(' ')}>
+                                            <path d={`M${pixelValue},0 v${elementHeight}`} />
+
+                                            <text x={pixelValue + 3} y={elementHeight}>
+                                                {label}
+                                            </text>
+                                        </g>
+                                    );
+                                })
+                            }
+
+                            <rect
+                                x={pixelMinX}
+                                y={elementHeight}
+                                width={pixelMaxX - pixelMinX}
+                                height={barSize}
+                                className="selection-bar"
+                                onMouseDown={this.startScroll}
+                            />
+
+                            <path
+                                d="M -3 3.5 L -3 9.333333333333334 M 0 3.5 L 0 9.333333333333334 M 3 3.5 L 3 9.333333333333334"
+                                className="selection-bar-rifles"
+                                transform={`translate(${pixelMinX + (pixelMaxX - pixelMinX)/2},${elementHeight})`}
+                                onMouseDown={this.startScroll}
+                            />
+                        </g>
+
+                        <g>
+                            <rect
+                                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}
+                                className="target-selection-outline"
+                            />
+                        </g>
+
+                        <g>
+                            <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}
+                            />
+                        </g>
+
+                        <g>
+                            <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}
+                            />
+                        </g>
+                    </svg>
+                </div>
+            </div>
+        );
+    }
+
+}
+
+RangeGraph.defaultProps = {
+    width: 3,
+    shadowColor: 'transparent'
+};
+
+RangeGraph.propTypes = {
+    stateController: PropTypes.instanceOf(StateController).isRequired,
+    webgl: PropTypes.bool,
+    draggingY: PropTypes.bool,
+    checkIntersection: PropTypes.bool,
+    markDates: PropTypes.bool,
+    timeZone: PropTypes.string
+};

package/src/components/range_selection.js

@@ -0,0 +1,175 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import RangeSelectionButton from './range_selection_button';
+import RangeSelectionButtonBase from './range_selection_button_base';
+import {Y_AXIS_WIDTH} from '../helpers/axis_sizes';
+import CustomPropTypes from '../helpers/custom_prop_types';
+import StateController from '../state/state_controller';
+import {
+    useBoundCalculator, useBoundHistory,
+    useGlobalBounds,
+    useLeftAxisCount,
+    useRightAxisCount,
+    useShowingOptions
+} from '../state/hooks';
+import BOUND_CALCULATORS from '../state/bound_calculators';
+import Options from './options';
+
+export default React.memo(RangeSelection);
+
+function RangeSelection({stateController, customBoundsSelectors, customBoundsSelectorsOnly, sidebarEnabled}) {
+    const rightAxisCount = useRightAxisCount(stateController);
+    const leftAxisCount = useLeftAxisCount(stateController);
+    const showingOptions = useShowingOptions(stateController);
+
+    let marginRight = Y_AXIS_WIDTH*rightAxisCount;
+    if (rightAxisCount > 0) {
+        marginRight += 5;
+    }
+
+    let marginLeft = Y_AXIS_WIDTH*leftAxisCount;
+    if (leftAxisCount > 0) {
+        marginLeft += 5;
+    }
+
+    const { dates } = useGlobalBounds(stateController);
+
+    const currentBoundCalculator = useBoundCalculator(stateController);
+    const { hasPreviousBounds, hasNextBounds } = useBoundHistory(stateController);
+
+    const customBoundSelectorNames = new Set(customBoundsSelectors.map(({ label }) => label));
+
+    return (
+        <div className={`range-selection${dates ? '' : ' range-not-dates'}`} style={{ marginRight, marginLeft }}>
+            <div className="range-buttons">
+                {
+                    showingOptions &&
+                        <Options
+                            stateController={stateController}
+                            sidebarEnabled={sidebarEnabled}
+                        />
+                }
+
+                <RangeSelectionButtonBase
+                    className="showing-options-button"
+                    selected={showingOptions}
+                    onClick={() => stateController.toggleShowingOptions()}
+                    description="Show additional options"
+                >
+                    <div className="icon-container icon-container-square">
+                        <svg focusable="false" viewBox="0 0 512 512">
+                            <path fill="currentColor" d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z" />
+                        </svg>
+                    </div>
+                </RangeSelectionButtonBase>
+                
+                <RangeSelectionButtonBase
+                    className="range-selection-history"
+                    selected={false}
+                    onClick={() => stateController.previousBounds()}
+                    disabled={!hasPreviousBounds}
+                >
+                    <div className="icon-container">
+                        <svg focusable="false" viewBox="0 0 256 512">
+                            <path fill="currentColor" d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z" />
+                        </svg>
+                    </div>
+                </RangeSelectionButtonBase>
+                
+                <RangeSelectionButtonBase
+                    className="range-selection-history"
+                    selected={false}
+                    onClick={() => stateController.nextBounds()}
+                    disabled={!hasNextBounds}
+                >
+                    <div className="icon-container">
+                        <svg focusable="false" viewBox="0 0 256 512">
+                            <path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"/>
+                        </svg>
+                    </div>
+                </RangeSelectionButtonBase>
+
+                {
+                    customBoundsSelectors.map(({label, calculator, datesOnly}, i) => {
+                        return (
+                            <RangeSelectionButton
+                                key={i}
+                                stateController={stateController}
+                                currentBoundCalculator={currentBoundCalculator}
+                                boundCalculator={calculator}
+                                disabled={datesOnly && !dates}
+                            >
+                                {label}
+                            </RangeSelectionButton>
+                        );
+                    })
+                }
+
+                {
+                    !customBoundSelectorNames.has('1m') && !customBoundsSelectorsOnly &&
+                    <RangeSelectionButton
+                        stateController={stateController}
+                        currentBoundCalculator={currentBoundCalculator}
+                        boundCalculator={BOUND_CALCULATORS.lastMinute}
+                        disabled={!dates}
+                    >
+                        1m
+                    </RangeSelectionButton>
+                }
+
+                {
+                    !customBoundSelectorNames.has('10m') && !customBoundsSelectorsOnly &&
+                    <RangeSelectionButton
+                        stateController={stateController}
+                        currentBoundCalculator={currentBoundCalculator}
+                        boundCalculator={BOUND_CALCULATORS.last10Minutes}
+                        disabled={!dates}
+                    >
+                        10m
+                    </RangeSelectionButton>
+                }
+
+                {
+                    !customBoundSelectorNames.has('1h') && !customBoundsSelectorsOnly &&
+                    <RangeSelectionButton
+                        stateController={stateController}
+                        currentBoundCalculator={currentBoundCalculator}
+                        boundCalculator={BOUND_CALCULATORS.lastHour}
+                        disabled={!dates}
+                    >
+                        1h
+                    </RangeSelectionButton>
+                }
+
+                {
+                    !customBoundSelectorNames.has('1d') && !customBoundsSelectorsOnly &&
+                    <RangeSelectionButton
+                        stateController={stateController}
+                        currentBoundCalculator={currentBoundCalculator}
+                        boundCalculator={BOUND_CALCULATORS.lastDay}
+                        disabled={!dates}
+                    >
+                        1d
+                    </RangeSelectionButton>
+                }
+
+                <RangeSelectionButton
+                    stateController={stateController}
+                    currentBoundCalculator={currentBoundCalculator}
+                    boundCalculator={BOUND_CALCULATORS.all}
+                    disabled={false}
+                >
+                    All
+                </RangeSelectionButton>
+            </div>
+        </div>
+    );
+
+}
+
+RangeSelection.propTypes = {
+    stateController: PropTypes.instanceOf(StateController).isRequired,
+    customBoundsSelectors: CustomPropTypes.CustomBoundsSelectors.isRequired,
+    customBoundsSelectorsOnly: PropTypes.bool,
+    sidebarEnabled: PropTypes.bool
+};

package/src/components/range_selection_button.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import RangeSelectionButtonBase from './range_selection_button_base';
+import StateController from '../state/state_controller';
+
+export default React.memo(RangeSelectionButton);
+
+function RangeSelectionButton({ stateController, currentBoundCalculator, boundCalculator, children, disabled }) {
+    return (
+        <RangeSelectionButtonBase
+            selected={currentBoundCalculator === boundCalculator}
+            onClick={() => stateController.boundCalculator = boundCalculator}
+            disabled={disabled}
+        >
+            {children}
+        </RangeSelectionButtonBase>
+    );
+}
+
+RangeSelectionButton.propTypes = {
+    stateController: PropTypes.instanceOf(StateController).isRequired,
+    boundCalculator: PropTypes.func.isRequired,
+    currentBoundCalculator: PropTypes.func.isRequired,
+    children: PropTypes.node.isRequired,
+    disabled: PropTypes.bool
+};

package/src/components/range_selection_button_base.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default React.memo(RangeSelectionButtonBase);
+
+function RangeSelectionButtonBase({ selected, disabled, className, onClick, children, description }) {
+    const classes = [
+        'range-button'
+    ];
+
+    if (selected) {
+        classes.push('range-button-selected');
+    }
+
+    if (disabled) {
+        classes.push('range-button-disabled');
+    }
+
+    if (className) {
+        classes.push(className);
+    }
+
+    if (description) {
+        classes.push('option-tooltip');
+    }
+
+    return (
+        <div
+            className={classes.join(' ')}
+            onClick={onClick && ((event) => disabled || onClick(event))}
+        >
+            {children}
+
+            {
+                description &&
+                <div className="option-tooltip-text">
+                    {description}
+                </div>
+            }
+        </div>
+    );
+}
+
+RangeSelectionButtonBase.propTypes = {
+    selected: PropTypes.bool.isRequired,
+    onClick: PropTypes.func,
+    children: PropTypes.node.isRequired,
+    disabled: PropTypes.bool,
+    className: PropTypes.string,
+    description: PropTypes.string
+};