@windborne/grapher 1.0.0

package/src/components/vertical_lines.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import CustomPropTypes from '../helpers/custom_prop_types.js';
+import PropTypes from 'prop-types';
+import StateController from '../state/state_controller.js';
+import {useAxisBounds, useSizing} from '../state/hooks.js';
+
+export default React.memo(VerticalLines);
+
+function VerticalLines({ stateController, verticalLines }) {
+    const bounds = useAxisBounds(stateController)[0];
+    const sizing = useSizing(stateController);
+
+    if (!sizing) {
+        return null;
+    }
+
+    return (
+        <div className="grapher-vertical-lines">
+            <svg width={sizing.elementWidth} height={sizing.elementHeight}>
+                {
+                    verticalLines.map((line, index) => {
+                        const xT = (line.x - bounds.minX)/(bounds.maxX - bounds.minX);
+
+                        if (xT < 0 || xT > 1) {
+                            return null;
+                        }
+
+                        const pixelX = xT * sizing.elementWidth;
+
+                        const lineStyle = {
+                            stroke: line.color,
+                            strokeWidth: line.width,
+                            ...(line.style || {})
+                        };
+
+                        const markerStyle = {
+                            fill: line.color,
+                            ...(line.markerStyle || {})
+                        };
+
+                        return (
+                            <React.Fragment key={index}>
+                                <line
+                                    x1={pixelX}
+                                    y1={0}
+                                    x2={pixelX}
+                                    y2={sizing.elementHeight}
+                                    style={lineStyle}
+                                />
+
+                                {
+                                    line.markTop &&
+                                    <polygon
+                                        points={`${pixelX - 3},0 ${pixelX + 3},0 ${pixelX},3`}
+                                        style={markerStyle}
+                                    />
+                                }
+                            </React.Fragment>
+                        );
+                    })
+                }
+            </svg>
+        </div>
+    );
+}
+
+VerticalLines.propTypes = {
+    stateController: PropTypes.instanceOf(StateController).isRequired,
+    verticalLines: CustomPropTypes.VerticalLines.isRequired
+};

package/src/components/x_axis.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {calculatePrecision, calculateTimePrecision, formatX} from '../helpers/format';
+import placeGrid from '../helpers/place_grid';
+import {useEnumMap, useHasXEnum, usePrimarySize, useSelection} from '../state/hooks';
+import StateController from '../state/state_controller';
+
+export default React.memo(XAxis);
+
+function XAxis({ showAxes, showGrid, stateController, bigLabels, xTickUnit, clockStyle, timeZone, integersOnly }) {
+    if (!showAxes && !showGrid) {
+        return null;
+    }
+
+    const { elementWidth, elementHeight } = usePrimarySize(stateController);
+    const {minX, maxX, dates} = useSelection(stateController);
+    const hasXEnum = useHasXEnum(stateController);
+    const enumMap = useEnumMap(stateController);
+
+    let precision;
+    if (dates) {
+        precision = calculateTimePrecision(minX, maxX);
+    } else {
+        precision = calculatePrecision(maxX - minX);
+    }
+
+    let inverseEnumMap = null;
+    if (hasXEnum) {
+        inverseEnumMap = {};
+        for (const [key, value] of Object.entries(enumMap)) {
+            inverseEnumMap[value] = key;
+        }
+    }
+
+    const formatOptions = {
+        unitOverride: xTickUnit,
+        clockStyle,
+        timeZone,
+        integersOnly,
+        inverseEnumMap
+    };
+
+    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;
+    if (bigLabels) {
+        expectedLabelWidth *= 2;
+    }
+
+    const labelPadding = 30; // space in between labels in the expected case
+
+    const ticks = placeGrid({
+        min: minX,
+        max: maxX,
+        totalSize: elementWidth,
+        precision,
+        dates,
+        formatter: formatX,
+        expectedLabelSize: expectedLabelWidth,
+        labelPadding,
+        formatOptions
+    });
+
+    const xAxisHeight = 20;
+
+    return (
+        <svg className="axis x-axis" style={showAxes ? undefined : {marginBottom: -20}}>
+            {
+                showAxes &&
+                <path d={`M-1,0 H${elementWidth}`} className="axis-line" />
+            }
+            {
+                showAxes &&
+                <path d={`M-2,1 H${elementWidth + 1}`} className="axis-line-shadow" />
+            }
+
+            {
+                ticks.map(({ pixelValue, label, size, position, skipGrid }, i) => {
+                    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={i} className={classes.join(' ')}>
+                            {
+                                showAxes &&
+                                <path d={`M${pixelValue},1 v6`} className="axis-tick" />
+                            }
+
+                            {
+                                showGrid && !skipGrid &&
+                                <path d={`M${pixelValue},0 v-${elementHeight}`} />
+                            }
+
+                            {
+                                showAxes &&
+                                <text x={pixelValue} y={xAxisHeight - 5}>
+                                    {label}
+                                </text>
+                            }
+                        </g>
+                    );
+                })
+            }
+        </svg>
+    );
+}
+
+XAxis.propTypes = {
+    stateController: PropTypes.instanceOf(StateController).isRequired,
+    showAxes: PropTypes.bool.isRequired,
+    showGrid: PropTypes.bool.isRequired,
+    bigLabels: PropTypes.bool,
+    xTickUnit: PropTypes.oneOf(['year']),
+    clockStyle: PropTypes.oneOf(['12h', '24h']),
+    timeZone: PropTypes.string,
+    integersOnly: PropTypes.bool
+};

package/src/components/y_axis.js

@@ -0,0 +1,239 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import {calculatePrecision, formatY} from '../helpers/format';
+import {Y_AXIS_WIDTH, BIG_Y_AXIS_LABEL_OFFSET} from '../helpers/axis_sizes';
+import scaleBounds from '../renderer/scale_bounds';
+import getColor from '../helpers/colors';
+import placeGrid from '../helpers/place_grid';
+import {useAxes, useAxisBounds, useHighlightedSeries, usePrimarySize} from '../state/hooks';
+import StateController from '../state/state_controller';
+import CustomPropTypes from '../helpers/custom_prop_types';
+
+export default React.memo(YAxis);
+
+function YAxis({ stateController, showAxes, showGrid, showSeriesKey, axis, sideIndex, bodyHeight, theme, grapherID, dragPositionYOffset=0, bigLabels, showAxisColors }) {
+    if (!showAxes && !showGrid) {
+        return null;
+    }
+
+    const { side, scale, axisIndex, label } = useAxes(stateController)[axis.axisIndex];
+
+    const { elementWidth, elementHeight } = usePrimarySize(stateController);
+    let { minY, maxY } = useAxisBounds(stateController)[axisIndex];
+
+    const scaledBounds = scaleBounds({ minY, maxY, scale});
+    minY = scaledBounds.minY;
+    maxY = scaledBounds.maxY;
+
+    const ticks = placeGrid({
+        min: minY,
+        max: maxY,
+        totalSize: elementHeight,
+        scale,
+        precision: calculatePrecision(maxY - minY),
+        formatter: formatY,
+        inverted: true,
+        expectedLabelSize: bigLabels ? 20 : 10,
+        labelPadding: 30
+    });
+
+    const colorBoxSize = 10;
+    const colorBoxPadding = 4;
+
+    let sidePadding = 5;
+
+    if (scale === 'log') {
+        sidePadding = 2;
+    }
+
+    const highlightedSeries = useHighlightedSeries(stateController);
+
+    const [draggedSeries, setDraggedSeries] = useState(null);
+    const [dragDelta, setDragDelta] = useState({ dx: 0, dy: 0 });
+
+    const startDrag = (event, singleSeries) => {
+        let startX = event.clientX;
+        let startY = event.clientY;
+
+        if (side === 'left') {
+            startX += Y_AXIS_WIDTH;
+        }
+
+        if (side === 'right') {
+            startX -= Y_AXIS_WIDTH;
+        }
+
+        setDragDelta({
+            dx: 0,
+            dy: 0
+        });
+
+        const onMouseMove = (moveEvent) => {
+            setDragDelta({
+                dx: moveEvent.clientX - startX,
+                dy: moveEvent.clientY - startY
+            });
+        };
+
+        const onMouseUp = (mouseUpEvent) => {
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseup', onMouseUp);
+
+            let target = mouseUpEvent.target;
+            while (target && !(target.dataset || {}).axisIndex) {
+                target = target.parentNode;
+            }
+
+            setDraggedSeries(null);
+            stateController.finalizeDrag(singleSeries, target && (target.dataset || {}).axisIndex, target && (target.dataset || {}).grapherId);
+        };
+
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+
+        setDraggedSeries(singleSeries);
+        stateController.markDragStart();
+    };
+
+    const highlightedOpacity = theme === 'day' ? 1.0 : 0.5;
+    const unhighlightedOpacity = theme === 'day' ? 0.8 : 0.3;
+
+    return (
+        <svg className={`axis y-axis y-axis-${side}`}
+             data-axis-index={axisIndex}
+             data-grapher-id={grapherID}
+             style={{
+                 width: Y_AXIS_WIDTH,
+                 marginLeft: showAxes ? undefined : -Y_AXIS_WIDTH,
+                 height: typeof bodyHeight === 'number' ? bodyHeight : undefined
+             }}
+        >
+            {
+                showAxes &&
+                showAxisColors &&
+                axis.series.map((singleSeries, i) => {
+                    const height = elementHeight/axis.series.length;
+
+                    return (
+                        <rect
+                            x={side === 'left' ? 0 : 2}
+                            y={i*height}
+                            width={Y_AXIS_WIDTH - 2}
+                            height={height}
+                            key={singleSeries.index}
+                            fill={getColor(singleSeries.color, singleSeries.index, singleSeries.multigrapherSeriesIndex)}
+                            opacity={singleSeries.index === highlightedSeries ? highlightedOpacity : unhighlightedOpacity}
+                            data-element-height={elementHeight}
+                            data-series-length={axis.series.length}
+                        />
+                    );
+                })
+            }
+
+            {
+                showAxes &&
+                <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;
+                    const length = (side === 'left' ? 1 : - 1) * (elementWidth+1);
+
+                    const classes = ['axis-item', `axis-item-${size}`];
+                    if (bigLabels) {
+                        classes.push('axis-item-big-labels');
+                    }
+
+                    return (
+                        <g key={i} className={classes.join(' ')}>
+                            {
+                                showGrid &&
+                                !skipGrid &&
+                                <path d={`M${edge},${pixelValue} h${length}`} />
+                            }
+
+                            {
+                                showGrid &&
+                                !skipGrid &&
+                                sideIndex > 0 &&
+                                <path
+                                    d={`M${side === 'left' ? Y_AXIS_WIDTH : 0},${pixelValue} h${(side === 'left' ? 1 : -1) * sideIndex * Y_AXIS_WIDTH}`}
+                                    strokeDasharray={'2,2'}
+                                />
+                            }
+
+                            {
+                                showAxes &&
+                                <text x={side === 'left' ? Y_AXIS_WIDTH-sidePadding : sidePadding} y={pixelValue}>
+                                    {label}
+                                </text>
+                            }
+                        </g>
+                    );
+                })
+            }
+
+            {
+                showSeriesKey && showAxes &&
+                axis.series.map((singleSeries, i) => {
+
+                    let x = (Y_AXIS_WIDTH - colorBoxSize - colorBoxPadding) + (i % 2 - 1)*(colorBoxSize + colorBoxPadding);
+                    let y = -(colorBoxPadding + colorBoxSize) * Math.ceil(axis.series.length / 2) + (colorBoxSize + colorBoxPadding) * Math.floor(i / 2);
+
+                    if (singleSeries === draggedSeries) {
+                        x += dragDelta.dx;
+                        y += dragDelta.dy - dragPositionYOffset;
+                    }
+
+                    return (
+                        <rect
+                            className="series-color-box"
+                            onMouseDown={(event) => startDrag(event, singleSeries)}
+                            x={x}
+                            y={y}
+                            width={colorBoxSize}
+                            height={colorBoxSize}
+                            key={singleSeries.index}
+                            fill={getColor(singleSeries.color, singleSeries.index, singleSeries.multigrapherSeriesIndex)}
+                            onMouseOver={() => stateController.setHighlightedSeries(singleSeries.index)}
+                            onMouseOut={() => stateController.setHighlightedSeries(null)}
+                        />
+                    );
+                })
+            }
+
+            {
+                showAxes && !!label &&
+                <text
+                    className={`y-axis-label${bigLabels ? ' y-axis-big-label' : ''}`}
+                    x={side === 'left' ? 10 : Y_AXIS_WIDTH - 10}
+                    y={elementHeight/2 + (side === 'left' ? -1 : 1)*(axisIndex + 1)*(bigLabels ? BIG_Y_AXIS_LABEL_OFFSET : 0)}
+                    transform={`rotate(${side === 'left' ? -90 : 90}, ${side === 'left' ? 10 : Y_AXIS_WIDTH - 10}, ${elementHeight/2})`}
+                >
+                    {label}
+                </text>
+            }
+        </svg>
+    );
+}
+
+YAxis.propTypes = {
+    stateController: PropTypes.instanceOf(StateController),
+    showAxes: PropTypes.bool.isRequired,
+    showGrid: PropTypes.bool.isRequired,
+    showAxisColors: PropTypes.bool.isRequired,
+    showSeriesKey: PropTypes.bool.isRequired,
+    axis: CustomPropTypes.Axis.isRequired,
+    sideIndex: PropTypes.number.isRequired,
+    bodyHeight: PropTypes.number,
+    theme: PropTypes.string,
+    grapherID: PropTypes.string,
+    dragPositionYOffset: PropTypes.number,
+    bigLabels: PropTypes.bool
+};

package/src/eventable.js

@@ -0,0 +1,65 @@
+export default class Eventable {
+
+    constructor() {
+        this._listeners = {};
+    }
+
+    /**
+     * Clears all listeners
+     * @protected
+     */
+    clearListeners() {
+        this._listeners = {};
+    }
+
+    /**
+     * Create a new listener for the event
+     * When the event is emitted, it will call the provided function
+     *
+     * @param {String|symbol} eventName - the name of the event to start listening to
+     * @param {Function} fn - the listener to add
+     */
+    on(eventName, fn) {
+        this._listeners[eventName] = this._listeners[eventName] || new Set();
+        this._listeners[eventName].add(fn);
+    }
+
+    /**
+     * Removes an existing listener for the event
+     *
+     * @param {String|symbol} eventName - the name of the event to stop listening to
+     * @param {Function} fn - the listener to remove
+     */
+    off(eventName, fn) {
+        if (!this._listeners[eventName]) {
+            return;
+        }
+
+        this._listeners[eventName].delete(fn);
+
+        if (this._listeners[eventName].size === 0) {
+            delete this._listeners[eventName];
+        }
+    }
+
+    /**
+     * Emits an event that will go out to all _listeners on eventName
+     *
+     * @param {String|symbol} eventName - the name of the event to emit
+     */
+    emit(eventName) {
+        if (!this._listeners[eventName]) {
+            return;
+        }
+
+        const args = [];
+        for (let i = 1; i < arguments.length; i++) {
+            args.push(arguments[i]);
+        }
+
+        this._listeners[eventName].forEach((fn) => {
+            fn.apply(this, args);
+        });
+    }
+
+}