@windborne/grapher 1.0.0

package/src/components/series_key.js

@@ -0,0 +1,235 @@
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import {Y_AXIS_WIDTH} from '../helpers/axis_sizes';
+import StateController from '../state/state_controller';
+import {
+    useAlwaysTooltipped,
+    useAxes,
+    useHighlightedSeries,
+    useLeftAxisCount,
+    usePrimarySize,
+    useRightAxisCount,
+    useSeries, useShowingOptions
+} from '../state/hooks';
+import SeriesKeyItem from './series_key_item';
+import SeriesKeyAxisContainer from './series_key_axis_container';
+
+function calculateStyles({stateController, keyWidth}) {
+    const rightAxisCount = useRightAxisCount(stateController);
+    const leftAxisCount = useLeftAxisCount(stateController);
+    const showingOptions = useShowingOptions(stateController);
+
+    let marginRight = Y_AXIS_WIDTH*rightAxisCount;
+    if (rightAxisCount > 0) {
+        marginRight += 5;
+    }
+
+    marginRight += 250;
+
+    if (showingOptions) {
+        marginRight += 70;
+    }
+
+    let marginLeft = Y_AXIS_WIDTH*leftAxisCount;
+
+    if (leftAxisCount > 0) {
+        marginLeft += 5;
+    }
+
+    marginLeft = Math.max(marginRight, marginLeft);
+    marginRight = Math.max(marginRight, marginLeft);
+
+    let marginBottom;
+
+    const { elementWidth } = usePrimarySize(stateController);
+
+    const shouldBreak = elementWidth - marginLeft - marginRight < keyWidth;
+
+    if (shouldBreak) {
+        marginLeft = 0;
+        marginRight = 0;
+        marginBottom = 10;
+    }
+
+    return { marginRight, marginLeft, marginBottom };
+}
+
+export default React.memo(SeriesKey);
+
+function SeriesKey({ stateController, theme, draggingY, grapherID, dragPositionYOffset=0 }) {
+    const series = useSeries(stateController);
+    const [draggedSeries, setDraggedSeries] = useState(null);
+    const [dragPosition, setDragPosition] = useState({
+        x: 0,
+        y: 0
+    });
+
+    const highlightedSeries = useHighlightedSeries(stateController);
+
+    const keyRef = useRef(null);
+    const [keyWidth, setKeyWidth] = useState(series.map(({ name, yKey }, i) => (name || yKey || i).toString().length).reduce((a, b) => a + b, 0) * 5);
+
+    let sizeCalculationHandle;
+    useEffect(() => {
+        if (keyRef.current) {
+            cancelAnimationFrame(sizeCalculationHandle);
+
+            sizeCalculationHandle = requestAnimationFrame(() => {
+                if (!keyRef.current) { // has become invalid in the last frame
+                    return;
+                }
+
+                const width = [...keyRef.current.querySelectorAll('.series-key-axis-container')]
+                    .map((el) => el.clientWidth)
+                    .reduce((a, b) => a + b, 0);
+                setKeyWidth(width);
+            });
+        }
+    }, [series, keyRef.current]);
+
+    const style = calculateStyles({ stateController, keyWidth });
+
+    const axes = useAxes(stateController);
+    const alwaysTooltipped = useAlwaysTooltipped(stateController);
+
+    const startDragging = (event, singleSeries) => {
+        let seriesKeyEl = event.target;
+        while (seriesKeyEl && seriesKeyEl.className !== 'series-key') {
+            seriesKeyEl = seriesKeyEl.parentNode;
+        }
+        const targetLeft = event.target.getBoundingClientRect().left;
+        let seriesKeyLeft = seriesKeyEl.getBoundingClientRect().left;
+        let seriesKeyMarginLeft = seriesKeyEl.style.marginLeft;
+
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const clientStartX = event.clientX;
+        const clientStartY = event.clientY;
+
+        setDraggedSeries(singleSeries);
+        setDragPosition({
+            x: event.clientX - startX + (targetLeft - seriesKeyLeft) - 2,
+            y: event.clientY - startY + 1
+        });
+
+        const onMouseMove = (moveEvent) => {
+            if (seriesKeyEl.style.marginLeft !== seriesKeyMarginLeft) {
+                seriesKeyLeft = seriesKeyEl.getBoundingClientRect().left;
+                seriesKeyMarginLeft = seriesKeyEl.style.marginLeft;
+            }
+
+            setDragPosition({
+                x: moveEvent.clientX - startX + (targetLeft - seriesKeyLeft) - 2,
+                y: moveEvent.clientY - startY + 1
+            });
+        };
+
+        const onMouseUp = (mouseUpEvent) => {
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseup', onMouseUp);
+
+            let target = mouseUpEvent.target;
+            while (target && !(target.dataset || {}).axisIndex && !(target.dataset || {}).grapherId) {
+                target = target.parentNode;
+            }
+
+            setDraggedSeries(null);
+            stateController.finalizeDrag(singleSeries, target && (target.dataset || {}).axisIndex, target && (target.dataset || {}).grapherId);
+
+            if (mouseUpEvent.clientX === clientStartX && mouseUpEvent.clientY === clientStartY) {
+                stateController.toggleAlwaysTooltipped(singleSeries, mouseUpEvent.shiftKey);
+            }
+        };
+
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+
+        stateController.markDragStart();
+    };
+
+    return (
+        <div className="series-key" style={style} ref={keyRef}>
+            {
+                draggingY &&
+                <div
+                    className="series-key-axis-container"
+                    data-axis-index="new-left"
+                    data-grapher-id={grapherID}
+                />
+            }
+
+            {
+                axes.map((axis, i) => {
+                    if (!axis.series.length && axes.length > 1) {
+                        return null;
+                    }
+
+                    return (
+                        <SeriesKeyAxisContainer
+                            key={i}
+                            label={axis.label}
+                            axisIndex={axis.axisIndex}
+                            scale={axis.scale}
+                            stateController={stateController}
+                            grapherID={grapherID}
+                        >
+                            {
+                                axis.series.map((singleSeries) => {
+                                    if (singleSeries.hideFromKey) {
+                                        return null;
+                                    }
+
+                                    return (
+                                        <SeriesKeyItem
+                                            key={singleSeries.index}
+                                            series={singleSeries}
+                                            i={singleSeries.index}
+                                            onMouseDown={(event, toggleTooltipped) => startDragging(event, singleSeries, toggleTooltipped)}
+                                            theme={theme}
+                                            stateController={stateController}
+                                            highlighted={highlightedSeries === singleSeries.index || alwaysTooltipped.has(singleSeries)}
+                                        />
+                                    );
+                                })
+                            }
+                        </SeriesKeyAxisContainer>
+                    );
+                })
+            }
+
+            {
+                draggingY &&
+                <div
+                    className="series-key-axis-container"
+                    data-axis-index="new-right"
+                    data-grapher-id={grapherID}
+                />
+            }
+
+            {
+                draggedSeries &&
+                <SeriesKeyItem
+                    style={{
+                        left: dragPosition.x,
+                        top: dragPosition.y - dragPositionYOffset,
+                        position: 'absolute',
+                        pointerEvents: 'none',
+                        zIndex: 1
+                    }}
+                    series={draggedSeries}
+                    i={draggedSeries.index}
+                    theme={theme}
+                    stateController={stateController}
+                />
+            }
+        </div>
+    );
+}
+
+SeriesKey.propTypes = {
+    stateController: PropTypes.instanceOf(StateController).isRequired,
+    theme: PropTypes.string.isRequired,
+    draggingY: PropTypes.bool.isRequired,
+    grapherID: PropTypes.string,
+    dragPositionYOffset: PropTypes.number
+};

package/src/components/series_key_axis_container.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StateController from '../state/state_controller';
+
+export default class SeriesKeyAxisContainer extends React.PureComponent {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            showingLabelInput: false
+        };
+
+        this.toggleLabelInputShowing = this.toggleLabelInputShowing.bind(this);
+    }
+
+    toggleLabelInputShowing() {
+        this.setState(({ showingLabelInput }) => {
+            return {
+                showingLabelInput: !showingLabelInput
+            };
+        });
+    }
+
+    render() {
+        const {children, stateController, axisIndex, scale, label, grapherID} = this.props;
+
+        const { showingLabelInput } = this.state;
+
+        return (
+            <div
+                className={`series-key-axis-container${showingLabelInput ? ' series-key-axis-container-showing-label' : ''}`}
+                data-axis-index={axisIndex}
+                data-grapher-id={grapherID}
+            >
+                <div className="scale-label" onClick={() => stateController.toggleScale({axisIndex})}>
+                    {scale.slice(0, showingLabelInput ? 6 : 3)}
+                </div>
+
+                <div className="series-key-axis-container-body">
+                    <div>
+                        {children}
+
+                        <svg className="label-input-toggler" viewBox="0 0 512 512" onClick={this.toggleLabelInputShowing}>
+                            <path
+                                d="M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z"/>
+                        </svg>
+                    </div>
+
+                    <div className="series-key-axis-label-container">
+                        <input
+                            onChange={(event) => stateController.setLabel({axisIndex, label: event.target.value})}
+                            placeholder="Enter label"
+                            value={label || ''}
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+SeriesKeyAxisContainer.propTypes = {
+    stateController: PropTypes.instanceOf(StateController).isRequired,
+    children: PropTypes.node.isRequired,
+    axisIndex: PropTypes.number.isRequired,
+    scale: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    grapherID: PropTypes.string
+};

package/src/components/series_key_item.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import getColor from '../helpers/colors';
+import CustomPropTypes from '../helpers/custom_prop_types';
+import PropTypes from 'prop-types';
+import StateController from '../state/state_controller';
+import nameForSeries from '../helpers/name_for_series.js';
+
+export default React.memo(SeriesKeyItem);
+
+function SeriesKeyItem({ series, i, style, onMouseDown, theme, stateController, highlighted }) {
+    const color = getColor(series.color, i, series.multigrapherSeriesIndex);
+
+    if (theme === 'day') {
+        style = Object.assign({}, style, {
+            backgroundColor: color
+        });
+    } else {
+        style = Object.assign({}, style, {
+            color
+        });
+    }
+
+    const classes = ['series-key-item'];
+    if (highlighted) {
+        classes.push('series-key-item-highlighted');
+    }
+
+    const name = nameForSeries(series, i);
+
+    return (
+        <div
+            className={classes.join(' ')}
+            style={style}
+            onMouseDown={onMouseDown}
+            onMouseOver={() => stateController.setHighlightedSeries(i)}
+            onMouseOut={() => stateController.setHighlightedSeries(null)}
+            onClick={() => stateController.registerSeriesClick(i)}
+        >
+            {name}
+        </div>
+    );
+}
+
+SeriesKeyItem.propTypes = {
+    series: CustomPropTypes.SingleSeries.isRequired,
+    stateController: PropTypes.instanceOf(StateController),
+    i: PropTypes.number.isRequired,
+    style: PropTypes.object,
+    onMouseDown: PropTypes.func,
+    theme: PropTypes.string.isRequired,
+    highlighted: PropTypes.bool
+};

package/src/components/sidebar.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StateController from '../state/state_controller';
+import {useSeries} from '../state/hooks';
+import CustomPropTypes from '../helpers/custom_prop_types';
+import getColor from '../helpers/colors';
+
+class SeriesToggle extends React.PureComponent {
+
+    constructor(props) {
+        super(props);
+
+        this.onChange = this.onChange.bind(this);
+    }
+
+    // NOTE: event listeners here do not follow React best practices, because when handled through React
+    // there were ~500ms of latency when toggling the checkbox. It's unclear why
+    onChange(event) {
+        setTimeout(() => {
+            this.props.stateController.setShowing(this.props.singleSeries, event.target.checked);
+        });
+    }
+
+    render() {
+        const { singleSeries } = this.props;
+        const color = getColor(singleSeries.color, singleSeries.index, singleSeries.multigrapherSeriesIndex);
+
+        let name = singleSeries.name || singleSeries.yKey;
+
+        if (!name) {
+            name = singleSeries.index;
+        }
+
+        return (
+            <div className="series-toggle">
+                <label>
+                    <input
+                        type="checkbox"
+                        defaultChecked={!singleSeries.hidden}
+                        ref={(el) => el && el.addEventListener('change', this.onChange)}
+                    />
+                    <span className="checkmark" style={{ background: color, borderColor: color }} />
+
+                    {name}
+                </label>
+            </div>
+        );
+    }
+}
+
+SeriesToggle.propTypes = {
+    singleSeries: CustomPropTypes.SingleSeries.isRequired,
+    stateController: PropTypes.instanceOf(StateController).isRequired
+};
+
+export default function Sidebar({ stateController }) {
+    const series = useSeries(stateController);
+
+    return (
+        <div className="grapher-sidebar">
+            {
+                series.map((singleSeries, i) =>
+                    <SeriesToggle
+                        key={i}
+                        singleSeries={singleSeries}
+                        stateController={stateController}
+                    />
+                )
+            }
+        </div>
+    );
+}
+
+Sidebar.propTypes = {
+    stateController: PropTypes.instanceOf(StateController).isRequired
+};

package/src/components/tooltip.js

@@ -0,0 +1,244 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {formatX, formatY} from '../helpers/format';
+import {Y_AXIS_WIDTH} from '../helpers/axis_sizes';
+import CustomPropTypes from '../helpers/custom_prop_types';
+
+function getYLabelContent({ yLabel, y, fullYPrecision}) {
+    if (fullYPrecision && !yLabel) {
+        if (y === undefined) {
+            return 'undefined';
+        }
+
+        if (y === null) {
+            return 'null';
+        }
+
+        return y.toString();
+    }
+
+    if (typeof yLabel === 'number') {
+        if (fullYPrecision) {
+            return yLabel.toString();
+        } else {
+            return formatY(yLabel);
+        }
+    }
+
+    return yLabel || formatY(y);
+}
+
+function TooltipLabel({ axisLabel, x, y, xLabel, yLabel, textLeft, textTop, includeSeriesLabel, includeXValue, includeYValue, includeXLabel, includeYLabel, fullYPrecision, formatXOptions }) {
+    let i = 0;
+
+    return (
+        <g>
+            {
+                includeSeriesLabel &&
+                <text x={textLeft} y={textTop + (i++)*12}>
+                    {axisLabel}
+                </text>
+            }
+
+            {
+                includeXValue &&
+                <text x={textLeft} y={textTop + (i++) * 12}>
+                    {includeXLabel && 'x: '}{xLabel || formatX(x, formatXOptions)}
+                </text>
+            }
+
+            {
+                includeYValue &&
+                <text x={textLeft} y={textTop + (i++) * 12}>
+                    {includeYLabel && 'y: '}{getYLabelContent({ yLabel, y, fullYPrecision})}
+                </text>
+            }
+        </g>
+    );
+}
+
+TooltipLabel.propTypes = {
+    axisLabel: PropTypes.string,
+    x: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Date)]),
+    y: PropTypes.number,
+    xLabel: PropTypes.string,
+    yLabel: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    textLeft: PropTypes.number.isRequired,
+    textTop: PropTypes.number.isRequired,
+    fullYPrecision: PropTypes.bool,
+    formatXOptions: PropTypes.object,
+    ...CustomPropTypes.TooltipOptionsRaw
+};
+
+export default class Tooltip extends React.PureComponent {
+
+    render() {
+        let height = 12*3 + 6;
+
+        if (!this.props.includeSeriesLabel) {
+            height -= 12;
+        }
+
+        if (!this.props.includeXValue) {
+            height -= 12;
+        }
+
+        if (!this.props.includeYValue) {
+            height -= 12;
+        }
+
+        const caretSize = 7;
+        const halfHeight = height/2;
+        const caretPadding = 4;
+
+        const textTop = -halfHeight + 3;
+
+        const formatXOptions = {
+            clockStyle: this.props.clockStyle,
+            timeZone: this.props.timeZone
+        };
+
+        const passThroughProps = {
+            includeSeriesLabel: this.props.includeSeriesLabel,
+            includeXLabel: this.props.includeXLabel,
+            includeYLabel: this.props.includeYLabel,
+            includeXValue: this.props.includeXValue,
+            includeYValue: this.props.includeYValue,
+            formatXOptions
+        };
+
+        return (
+            <div className="grapher-tooltip">
+                <svg>
+                    {
+                        this.props.tooltips.map(({ x, y, color, pixelY, pixelX, series, index, xLabel, yLabel, fullYPrecision }, i) => {
+                            const axisLabel = (series.name || series.yKey || index).toString();
+                            const width = Math.max(axisLabel.length, (xLabel || formatX(x, formatXOptions)).length + 4, getYLabelContent({ yLabel, y, fullYPrecision}).length + 4) * 7.5;
+
+                            let fixedPosition = this.props.elementWidth < (width + 2*caretSize + 2*caretPadding);
+
+                            let multiplier = 1;
+                            if (pixelX >= this.props.elementWidth - (width + 2*caretSize + caretPadding)) {
+                                multiplier = -1;
+                            }
+
+                            if (pixelX < width + 2*caretSize + caretPadding && multiplier === -1) {
+                                fixedPosition = true;
+                            }
+
+                            if (y === null) {
+                                fixedPosition = true;
+                            }
+
+                            let textLeft = caretSize + caretPadding;
+                            if (multiplier < 0) {
+                                textLeft = -width - textLeft;
+                            } else {
+                                textLeft += 6;
+                            }
+
+                            if (!isFinite(pixelX)) {
+                                return null;
+                            }
+
+                            const transform = `translate(${pixelX},${pixelY})`;
+
+                            const commonLabelProps = {
+                                fullYPrecision: fullYPrecision || this.props.maxPrecision,
+                                x,
+                                y,
+                                axisLabel,
+                                xLabel,
+                                yLabel,
+                                ...passThroughProps
+                            };
+
+                            // display in a fixed position if not wide enough
+                            if (fixedPosition || this.props.alwaysFixedPosition) {
+                                textLeft = 6;
+
+                                let baseLeft = this.props.elementWidth/2 - width/2;
+
+                                if (width > this.props.elementWidth && !this.props.floating) {
+                                    baseLeft -= Y_AXIS_WIDTH*this.props.axisCount/2;
+                                }
+
+                                let yTranslation = 18;
+
+                                if (this.props.floating) {
+                                    if (this.props.floatPosition === 'bottom') {
+                                        yTranslation = this.props.elementHeight + halfHeight + 4;
+                                    } else {
+                                        yTranslation = -height;
+                                    }
+
+                                    if (this.props.floatDelta) {
+                                        yTranslation += this.props.floatDelta;
+                                    }
+                                }
+
+                                return (
+                                    <g key={i} className="tooltip-item tooltip-item-fixed">
+                                        <circle r={4} fill={color} transform={transform} />
+
+                                        <g transform={`translate(${baseLeft}, ${yTranslation})`}>
+                                            <path stroke={color} d={`M0,0 V-${halfHeight} h${width} V${halfHeight} h${-width} V0`} />
+
+                                            <TooltipLabel
+                                                textLeft={textLeft} textTop={textTop}
+                                                {...commonLabelProps}
+                                            />
+                                        </g>
+                                    </g>
+                                );
+                            }
+
+                            return (
+                                <g key={i} transform={transform} className="tooltip-item">
+                                    <circle r={4} fill={color} />
+
+                                    <path stroke={color} d={`M${multiplier*caretPadding},0 L${multiplier*caretSize*2},-${caretSize} V-${halfHeight} h${multiplier*width} V${halfHeight} h${multiplier*-width} V${caretSize} L${multiplier*caretPadding},0`} />
+
+                                    <TooltipLabel
+                                        textLeft={textLeft} textTop={textTop}
+                                        {...commonLabelProps}
+                                    />
+                                </g>
+                            );
+                        })
+                    }
+                </svg>
+            </div>
+        );
+    }
+
+}
+
+Tooltip.defaultProps = {
+    includeSeriesLabel: true,
+    includeXLabel: true,
+    includeYLabel: true,
+    includeXValue: true,
+    includeYValue: true
+};
+
+Tooltip.propTypes = {
+    mouseX: PropTypes.number.isRequired,
+    mouseY: PropTypes.number.isRequired,
+    elementHeight: PropTypes.number.isRequired,
+    elementWidth: PropTypes.number.isRequired,
+    tooltips: PropTypes.arrayOf(PropTypes.shape({
+        x: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Date)]),
+        y: PropTypes.number,
+        pixelY: PropTypes.number,
+        color: PropTypes.string,
+        xLabel: PropTypes.string,
+        yLabel: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        fullYPrecision: PropTypes.bool
+    })),
+    axisCount: PropTypes.number.isRequired,
+    maxPrecision: PropTypes.bool.isRequired,
+    clockStyle: PropTypes.oneOf(['12h', '24h']),
+    timeZone: PropTypes.string,
+    ...CustomPropTypes.TooltipOptionsRaw
+};