@windborne/grapher 1.0.0

package/src/components/graph_body.js

@@ -0,0 +1,292 @@
+import React, { useCallback, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import CustomPropTypes from '../helpers/custom_prop_types';
+import GraphBodyRenderer from '../renderer/graph_body_renderer';
+import Tooltip from './tooltip';
+import ContextMenu from './context_menu';
+import StateController from '../state/state_controller';
+import {
+    useAnnotationState,
+    useAutoscaleY,
+    useAxes,
+    useMaxPrecision,
+    useShowingAnnotations,
+    useTooltipState,
+    useContextMenu
+} from '../state/hooks';
+import Annotations from './annotations.js';
+import DraggablePoints from './draggable_points.js';
+import VerticalLines from './vertical_lines.js';
+
+export default React.memo(GraphBody);
+
+function GraphBody({ stateController, webgl, bodyHeight, boundsSelectionEnabled, showTooltips, tooltipOptions, checkIntersection, draggablePoints, onPointDrag, onDraggablePointsDoubleClick, verticalLines, clockStyle, timeZone }) {
+    const canvasEl = useCallback((el) => {
+        if (stateController.primaryRenderer) {
+            stateController.primaryRenderer.dispose();
+        }
+
+        if (!el) {
+            return;
+        }
+
+        const renderer = new GraphBodyRenderer({
+            stateController: stateController,
+            canvasElement: el,
+            webgl,
+            checkIntersection
+        });
+
+        stateController.primaryRenderer = renderer;
+        renderer.resize();
+    }, [webgl, stateController]);
+
+
+    const [boundsSelection, setBoundsSelection] = useState({
+        showing: false,
+        start: {},
+        style: {}
+    });
+
+    const autoscaleY = useAutoscaleY(stateController);
+
+    const axisCount = useAxes(stateController).length;
+
+    const tooltip = useTooltipState(stateController);
+    const maxPrecision = useMaxPrecision(stateController);
+    const showAnnotations = useShowingAnnotations(stateController);
+    const annotationState = useAnnotationState(stateController);
+    const contextMenu = useContextMenu(stateController);
+
+    const onMouseDown = (event) => {
+        if (!boundsSelectionEnabled) {
+            return;
+        }
+
+        let currentNode = event.target;
+        for (let i = 0; i < 10 && currentNode; i++) {
+            if (currentNode.classList.contains('grapher-tooltip')) {
+                return;
+            }
+            currentNode = currentNode.parentNode;
+        }
+
+        const boundingRect = stateController.primaryRenderer.boundingRect;
+
+        const start = {
+            x: event.clientX - boundingRect.left,
+            y: event.clientY - boundingRect.top
+        };
+
+
+        setBoundsSelection({
+            showing: true,
+            start,
+            style: {
+                left: start.x,
+                top: start.y,
+                width: 0,
+                height: 0
+            }
+        });
+
+        const onMouseUp = (event) => {
+            window.removeEventListener('mouseup', onMouseUp);
+
+            if (!boundsSelectionEnabled) {
+                return;
+            }
+
+            const x = event.clientX - boundingRect.left;
+            const y = event.clientY - boundingRect.top;
+
+            stateController.setBoundsFromSelection({
+                minPixelX: Math.min(x, start.x),
+                maxPixelX: Math.max(x, start.x),
+                minPixelY: Math.min(y, start.y),
+                maxPixelY: Math.max(y, start.y)
+            });
+
+            setBoundsSelection({
+                showing: false,
+                style: {}
+            });
+        };
+
+        window.addEventListener('mouseup', onMouseUp);
+    };
+
+    const onMouseMove = (event) => {
+        if (boundsSelection.showing) {
+            const boundingRect = stateController.primaryRenderer.boundingRect;
+            const x = event.clientX - boundingRect.left;
+            const y = event.clientY - boundingRect.top;
+
+            setBoundsSelection(({ start }) => {
+                return {
+                    showing: true,
+                    start,
+                    style: {
+                        left: Math.min(x, start.x),
+                        top: autoscaleY ? 0 : Math.min(y, start.y),
+                        width: Math.abs(x - start.x),
+                        height: autoscaleY ? boundingRect.height : Math.abs(y - start.y)
+                    }
+                };
+            });
+        }
+    };
+
+    useEffect(() => {
+        const onScroll = () => {
+            if (!showTooltips) {
+                return;
+            }
+
+            stateController.recalculateTooltips();
+        };
+
+        const onGlobalMouseMove = (event) => {
+            if (!showTooltips) {
+                return;
+            }
+
+            stateController.setTooltipMousePosition({
+                clientX: event.clientX,
+                clientY: event.clientY,
+                shiftKey: event.shiftKey
+            });
+        };
+
+        window.addEventListener('scroll', onScroll, { passive: true });
+        window.addEventListener('mousemove', onGlobalMouseMove, { passive: true });
+
+        return () => {
+            window.removeEventListener('scroll', onScroll);
+            window.removeEventListener('mousemove', onGlobalMouseMove);
+        };
+    }, []);
+
+    const onMouseLeave = () => {
+        stateController.setContextMenuMousePosition({
+            showing: false
+        });
+    };
+
+    const onClick = (event) => {
+        stateController.registerClick({
+            clientX: event.clientX,
+            clientY: event.clientY
+        });
+
+        if (tooltipOptions && tooltipOptions.savingDisabled) {
+            stateController.clearSavedTooltips();
+            return;
+        }
+
+        // if it's NOT a child of 'grapher-context-menu', close the context menu
+        if (!event.target.closest('.grapher-context-menu')) {
+            stateController.setContextMenuMousePosition({
+                showing: false
+            });
+        }
+
+        if (!window.getSelection || window.getSelection().type !== 'Range') {
+            stateController.toggleTooltipSaved();
+        }
+    };
+    const onDoubleClick = () => {
+        stateController.clearSavedTooltips();
+    };
+    
+    const onContextMenu = (event) => {
+        event.preventDefault();
+        stateController.setContextMenuMousePosition({
+            clientX: event.clientX,
+            clientY: event.clientY,
+            showing: true
+        });
+    };
+
+    return (
+        <div className="graph-body graph-body-primary"
+             onMouseMove={onMouseMove}
+             onMouseLeave={onMouseLeave}
+             onMouseDown={onMouseDown}
+             onClick={onClick}
+             onDoubleClick={onDoubleClick}
+             onContextMenu={onContextMenu}
+             style={typeof bodyHeight === 'number' ? { height: bodyHeight } : undefined}
+        >
+            <canvas ref={canvasEl} />
+
+            {
+                showTooltips &&
+                <Tooltip
+                    axisCount={axisCount}
+                    maxPrecision={maxPrecision}
+                    clockStyle={clockStyle}
+                    timeZone={timeZone}
+                    {...(tooltipOptions || {})}
+                    {...tooltip}
+                />
+            }
+
+            {
+                contextMenu.showing &&
+                <ContextMenu
+                    contextMenu={contextMenu}
+                />
+            }
+
+            {
+                showAnnotations &&
+                <Annotations
+                    bodyHeight={bodyHeight}
+                    annotationState={annotationState}
+                />
+            }
+
+            {
+                verticalLines &&
+                <VerticalLines
+                    stateController={stateController}
+                    verticalLines={verticalLines}
+                />
+            }
+
+            {
+                draggablePoints &&
+                <DraggablePoints
+                    stateController={stateController}
+                    draggablePoints={draggablePoints}
+                    onPointDrag={onPointDrag}
+                    onDraggablePointsDoubleClick={onDraggablePointsDoubleClick}
+                />
+            }
+
+            {
+                boundsSelectionEnabled && boundsSelection.showing &&
+                <div className="bounds-selection"
+                     style={boundsSelection.style}
+                />
+            }
+        </div>
+    );
+}
+
+GraphBody.propTypes = {
+    stateController: PropTypes.instanceOf(StateController).isRequired,
+    webgl: PropTypes.bool,
+    checkIntersection: PropTypes.bool,
+    bodyHeight: PropTypes.number,
+    boundsSelectionEnabled: PropTypes.bool.isRequired,
+    showTooltips: PropTypes.bool.isRequired,
+    tooltipOptions: CustomPropTypes.TooltipOptions,
+    verticalLines: CustomPropTypes.VerticalLines,
+    draggablePoints: CustomPropTypes.DraggablePoints,
+    onPointDrag: PropTypes.func,
+    onDraggablePointsDoubleClick: PropTypes.func,
+    clockStyle: PropTypes.oneOf(['12h', '24h']),
+    timeZone: PropTypes.string
+};

package/src/components/graph_title.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default React.memo(GraphTitle);
+
+function GraphTitle({ title }) {
+    return (
+        <div className="grapher-title">
+            {title}
+        </div>
+    );
+}
+
+GraphTitle.propTypes = {
+    title: PropTypes.string.isRequired
+};

package/src/components/options.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import PercentileButton from './percentile_button';
+import RangeSelectionButtonBase from './range_selection_button_base';
+import {
+    useAutoscaleY,
+    useMaxPrecision,
+    useShowIndividualPoints, useShowingAnnotations,
+    useShowingSidebar, useTheme
+} from '../state/hooks';
+import PropTypes from 'prop-types';
+import StateController from '../state/state_controller';
+
+export default React.memo(Options);
+
+function Options({stateController, sidebarEnabled}) {
+
+    const showIndividualPoints = useShowIndividualPoints(stateController);
+    const autoscaleY = useAutoscaleY(stateController);
+    const maxPrecision = useMaxPrecision(stateController);
+    const showingSidebar = useShowingSidebar(stateController);
+    const showingAnnotations = useShowingAnnotations(stateController);
+    const theme = useTheme(stateController);
+
+    return (
+        <div className="options-bar">
+            {
+                sidebarEnabled &&
+                <RangeSelectionButtonBase
+                    selected={showingSidebar}
+                    onClick={() => stateController.toggleShowingSidebar()}
+                    description="Show sidebar"
+                >
+                    <div className="icon-container icon-container-square">
+                        <svg focusable="false" viewBox="0 0 512 512">
+                            <path fill="currentColor"
+                                  d="M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM224 416H64V160h160v256zm224 0H288V160h160v256z"/>
+                        </svg>
+                    </div>
+                </RangeSelectionButtonBase>
+            }
+
+            <RangeSelectionButtonBase
+                selected={theme === 'export'}
+                onClick={() => stateController.toggleExportMode()}
+                description="Export mode"
+            >
+                <div className="icon-container icon-container-square">
+                    <svg focusable="false" viewBox="0 0 512 512">
+                        <path fill="currentColor"
+                              d="M167.02 309.34c-40.12 2.58-76.53 17.86-97.19 72.3-2.35 6.21-8 9.98-14.59 9.98-11.11 0-45.46-27.67-55.25-34.35C0 439.62 37.93 512 128 512c75.86 0 128-43.77 128-120.19 0-3.11-.65-6.08-.97-9.13l-88.01-73.34zM457.89 0c-15.16 0-29.37 6.71-40.21 16.45C213.27 199.05 192 203.34 192 257.09c0 13.7 3.25 26.76 8.73 38.7l63.82 53.18c7.21 1.8 14.64 3.03 22.39 3.03 62.11 0 98.11-45.47 211.16-256.46 7.38-14.35 13.9-29.85 13.9-45.99C512 20.64 486 0 457.89 0z" />
+                    </svg>
+                </div>
+            </RangeSelectionButtonBase>
+
+            <RangeSelectionButtonBase
+                selected={showingAnnotations}
+                onClick={() => stateController.toggleShowingAnnotations()}
+                description="Show annotations"
+            >
+                <div className="icon-container icon-container-448">
+                    <svg focusable="false" viewBox="0 0 448 512">
+                        <path fill="currentColor" d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z" />
+                    </svg>
+                </div>
+            </RangeSelectionButtonBase>
+
+            <PercentileButton stateController={stateController} />
+
+            <RangeSelectionButtonBase
+                selected={maxPrecision}
+                onClick={() => stateController.toggleMaxPrecision()}
+                description="Max precision"
+            >
+                <div className="icon-container icon-container-square">
+                    <svg focusable="false" viewBox="0 0 512 512">
+                        <path fill="currentColor" d="M478.21 334.093L336 256l142.21-78.093c11.795-6.477 15.961-21.384 9.232-33.037l-19.48-33.741c-6.728-11.653-21.72-15.499-33.227-8.523L296 186.718l3.475-162.204C299.763 11.061 288.937 0 275.48 0h-38.96c-13.456 0-24.283 11.061-23.994 24.514L216 186.718 77.265 102.607c-11.506-6.976-26.499-3.13-33.227 8.523l-19.48 33.741c-6.728 11.653-2.562 26.56 9.233 33.037L176 256 33.79 334.093c-11.795 6.477-15.961 21.384-9.232 33.037l19.48 33.741c6.728 11.653 21.721 15.499 33.227 8.523L216 325.282l-3.475 162.204C212.237 500.939 223.064 512 236.52 512h38.961c13.456 0 24.283-11.061 23.995-24.514L296 325.282l138.735 84.111c11.506 6.976 26.499 3.13 33.227-8.523l19.48-33.741c6.728-11.653 2.563-26.559-9.232-33.036z" />
+                    </svg>
+                </div>
+            </RangeSelectionButtonBase>
+
+            <RangeSelectionButtonBase
+                selected={autoscaleY}
+                onClick={() => stateController.toggleYAutoscaling()}
+                description="Autoscale y axis"
+            >
+                <div className="icon-container">
+                    <svg focusable="false" viewBox="0 0 256 512">
+                        <path fill="currentColor" d="M168 416c-4.42 0-8-3.58-8-8v-16c0-4.42 3.58-8 8-8h88v-64h-88c-4.42 0-8-3.58-8-8v-16c0-4.42 3.58-8 8-8h88v-64h-88c-4.42 0-8-3.58-8-8v-16c0-4.42 3.58-8 8-8h88v-64h-88c-4.42 0-8-3.58-8-8v-16c0-4.42 3.58-8 8-8h88V32c0-17.67-14.33-32-32-32H32C14.33 0 0 14.33 0 32v448c0 17.67 14.33 32 32 32h192c17.67 0 32-14.33 32-32v-64h-88z"/>
+                    </svg>
+                </div>
+            </RangeSelectionButtonBase>
+
+            <RangeSelectionButtonBase
+                selected={showIndividualPoints}
+                onClick={() => stateController.toggleIndividualPoints()}
+                description="Show individual points"
+            >
+                <div className="icon-container icon-container-narrow">
+                    <svg focusable="false" viewBox="0 0 192 512">
+                        <path fill="currentColor" d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z" />
+                    </svg>
+                </div>
+            </RangeSelectionButtonBase>
+        </div>
+    );
+}
+
+Options.propTypes = {
+    stateController: PropTypes.instanceOf(StateController).isRequired,
+    sidebarEnabled: PropTypes.bool
+};

package/src/components/percentile_button.js

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import RangeSelectionButtonBase from './range_selection_button_base';
+import StateController from '../state/state_controller';
+import {usePercentile, usePercentileAsymmetry} from '../state/hooks';
+
+export default React.memo(PercentileButton);
+
+function PercentileButton({ stateController }) {
+    const percentile = usePercentile(stateController);
+    const percentileAsymmetry = usePercentileAsymmetry(stateController);
+    const [showing, setShowing] = useState(false);
+
+    return ([
+        showing ? <RangeSelectionButtonBase
+            key="asymmetry button"
+            className="percentile-button"
+            selected={true}
+            description="Percentile asymmetry"
+        >
+            <input
+                onClick={(e) => e.stopPropagation()}
+                value={percentileAsymmetry}
+                onChange={(e) => stateController.percentileAsymmetry = e.target.value}
+                onKeyUp={(e) => e.keyCode === 13 && setShowing(false)}
+                type="number"
+                min={-50}
+                max={50}
+            />
+
+            <div className="icon-container icon-container-square">
+                <svg focusable="false" viewBox="0 0 512 512">
+                    <path fill="currentColor" d="M240 96h64a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16h-64a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16zm0 128h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16zm256 192H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h256a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-256-64h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16zM16 160h48v304a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V160h48c14.21 0 21.39-17.24 11.31-27.31l-80-96a16 16 0 0 0-22.62 0l-80 96C-5.35 142.74 1.78 160 16 160z" />
+                </svg>
+            </div>
+        </RangeSelectionButtonBase>: null,
+
+        <RangeSelectionButtonBase
+            key="main-button"
+            className="percentile-button"
+            selected={showing || parseFloat(percentile) !== 100}
+            onClick={() => setShowing(!showing)}
+            description="Edit percentile"
+        >
+            {
+                showing &&
+                <div>
+                    <input
+                        onClick={(e) => e.stopPropagation()}
+                        autoFocus={true}
+                        value={percentile}
+                        onChange={(e) => stateController.percentile = e.target.value}
+                        onKeyUp={(e) => e.keyCode === 13 && setShowing(false)}
+                        type="number"
+                        min={0}
+                        max={100}
+                    />
+                </div>
+            }
+
+            <div className="icon-container icon-container-narrow">
+                <svg focusable="false" viewBox="0 0 448 512">
+                    <path fill="currentColor" d="M112 224c61.9 0 112-50.1 112-112S173.9 0 112 0 0 50.1 0 112s50.1 112 112 112zm0-160c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zm224 224c-61.9 0-112 50.1-112 112s50.1 112 112 112 112-50.1 112-112-50.1-112-112-112zm0 160c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zM392.3.2l31.6-.1c19.4-.1 30.9 21.8 19.7 37.8L77.4 501.6a23.95 23.95 0 0 1-19.6 10.2l-33.4.1c-19.5 0-30.9-21.9-19.7-37.8l368-463.7C377.2 4 384.5.2 392.3.2z" />
+                </svg>
+            </div>
+        </RangeSelectionButtonBase>
+    ]);
+}
+
+PercentileButton.propTypes = {
+    stateController: PropTypes.instanceOf(StateController).isRequired
+};