@windborne/grapher 1.0.0

package/src/state/calculate_tooltip_state.js

@@ -0,0 +1,241 @@
+import binarySearch from '../helpers/binary_search';
+import scaleBounds from '../renderer/scale_bounds';
+import getColor from '../helpers/colors';
+import flattenSimpleData, {extractXValue, extractYValue} from '../helpers/flatten_simple_data';
+import {getBarWidths} from '../renderer/draw_bars';
+
+const DISTANCE_THRESHOLD = 20;
+
+/**
+ * Figures out the tooltip state
+ *
+ * @param {Boolean} mousePresent
+ * @param {Number} mouseX
+ * @param {Number} mouseY
+ * @param {Object} sizing
+ * @param {Array<Object>} series
+ * @param {Set} alwaysTooltipped
+ * @param {Array<Object>} savedTooltips
+ * @param {Boolean} [allTooltipped]
+ * @param {Number} closestSpacing
+ * @return {{mouseX: *, mouseY: *, elementWidth: number, elementHeight: number, tooltips: any[]}}
+ */
+export default function calculateTooltipState({mousePresent, mouseX, mouseY, sizing, series, alwaysTooltipped, savedTooltips, allTooltipped, closestSpacing }) {
+    // filter out saved tooltips for nonexistent series
+    savedTooltips = savedTooltips.filter((tooltip) => tooltip.series.axis);
+
+    for (let savedTooltip of savedTooltips) {
+        moveTooltip({ mouseX, mouseY, sizing}, savedTooltip);
+    }
+
+    if (!mousePresent) {
+        return {
+            mouseX,
+            mouseY,
+            elementWidth: sizing.elementWidth,
+            elementHeight: sizing.elementHeight,
+            tooltips: [...savedTooltips]
+        };
+    }
+
+    const tooltips = [];
+
+    let minDistance = Infinity;
+
+    for (let i = 0; i < series.length; i++) {
+        const singleSeries = series[i];
+
+        if (singleSeries.hidden) {
+            continue;
+        }
+
+        const axis = singleSeries.axis;
+
+        const scale = axis.scale;
+        const bounds = axis.currentBounds;
+        const { minY, maxY } = scaleBounds({...bounds, scale });
+
+        const trueX = mouseX/sizing.elementWidth * (bounds.maxX - bounds.minX) + bounds.minX;
+
+        let data = singleSeries.inDataSpace;
+        if (singleSeries.ignoreDiscontinuities) {
+            data = data.filter((tuple) => typeof tuple[1] === 'number');
+        }
+
+        const closestIndex = binarySearch(data, trueX, { returnIndex: true });
+        const closestPoint = data[closestIndex];
+
+        if (!closestPoint) {
+            continue;
+        }
+
+        const [x, y] = closestPoint;
+
+        if (x === null) {
+            continue;
+        }
+
+        let pixelX = (x - bounds.minX)/(bounds.maxX - bounds.minX) * sizing.elementWidth;
+        const pixelY = (1 - ((scale === 'log' ? Math.log10(y) : y) - minY)/(maxY - minY)) * sizing.elementHeight;
+
+        if (pixelY > sizing.elementHeight || pixelY < 0) {
+            continue;
+        }
+
+        const ignoreYDistance = alwaysTooltipped.has(singleSeries) || allTooltipped;
+        let xDistanceThreshold = DISTANCE_THRESHOLD;
+        let yDistanceThreshold = DISTANCE_THRESHOLD;
+        let distanceThreshold = DISTANCE_THRESHOLD;
+
+        if (singleSeries.rendering === 'bar') {
+            const indexInAxis = singleSeries.axis.series.indexOf(singleSeries);
+            const axisSeriesCount = singleSeries.axis.series.length;
+
+            const { totalBarWidth, barWidth } = getBarWidths({
+                closestSpacing,
+                bounds,
+                sizing,
+                axisSeriesCount
+            });
+
+            // currently, pixelX is the center of all the bars
+            // shift it to start at the far left, then shift it to the center of the individual bar
+            pixelX -= totalBarWidth/2/sizing.pixelRatio;
+            pixelX += (barWidth*(indexInAxis + 0.5))/sizing.pixelRatio;
+
+            xDistanceThreshold = barWidth/2/sizing.pixelRatio;
+            yDistanceThreshold = 100;
+            distanceThreshold = xDistanceThreshold + yDistanceThreshold;
+        }
+
+        const xDistance = Math.abs(pixelX - mouseX);
+        const yDistance = Math.abs(pixelY - mouseY);
+        const distance = Math.sqrt((xDistance)**2 + (pixelY - mouseY)**2);
+
+        if (xDistance > xDistanceThreshold || (!ignoreYDistance && yDistance > yDistanceThreshold) || (!ignoreYDistance && distance > distanceThreshold)) {
+            continue;
+        }
+
+        let xLabel, yLabel;
+
+        const simpleData = singleSeries.simpleData || singleSeries.data;
+
+        const enumLike = simpleData.length && !!singleSeries.hasEnum;
+        if (singleSeries.xLabel || singleSeries.yLabel || enumLike) {
+            let simplePoint;
+
+            if (simpleData.length === data.length) {
+                simplePoint = simpleData[closestIndex];
+            } else {
+                const flattenedData = flattenSimpleData(simpleData, { series: singleSeries, inDataSpace: data });
+
+                simplePoint = flattenedData[closestIndex][1];
+            }
+
+            if (singleSeries.xLabel) {
+                xLabel = simplePoint[singleSeries.xLabel];
+            } else if (singleSeries.hasXEnum) {
+                xLabel = extractXValue(simplePoint, singleSeries);
+            }
+
+            if (singleSeries.yLabel) {
+                yLabel = simplePoint[singleSeries.yLabel];
+            } else if (enumLike) {
+                yLabel = extractYValue(simplePoint, singleSeries);
+            }
+        }
+
+        if (distance < minDistance) {
+            minDistance = distance;
+        }
+
+        let color = getColor(singleSeries.color, i, singleSeries.multigrapherSeriesIndex);
+        if (y < 0 && singleSeries.negativeColor) {
+            color = singleSeries.negativeColor;
+        } else if (y === 0 && singleSeries.zeroLineColor) {
+            color = singleSeries.zeroLineColor;
+        }
+
+        tooltips.push({
+            pixelWidth: sizing.elementWidth,
+            pixelX: pixelX,
+            pixelY: isNaN(pixelY) ? sizing.elementHeight/2 : pixelY,
+            x,
+            y,
+            color,
+            distance,
+            xDistance,
+            index: i,
+            series: singleSeries,
+            xLabel,
+            yLabel,
+            fullYPrecision: singleSeries.fullYPrecision,
+            ignoreYDistance
+        });
+    }
+
+    const unsavedTooltips = tooltips.filter(({ distance, ignoreYDistance }) => {
+        return distance === minDistance || ignoreYDistance;
+    }).sort((a, b) => b.distance - a.distance);
+
+    return {
+        mousePresent,
+        mouseX,
+        mouseY,
+        elementWidth: sizing.elementWidth,
+        elementHeight: sizing.elementHeight,
+        unsavedTooltipsCount: unsavedTooltips.length,
+        tooltips: [...savedTooltips, ...unsavedTooltips]
+    };
+}
+
+/**
+ * Recalculates the tooltip position, given the new sizing, bounds, etc.
+ *
+ * @param {Number} mouseX
+ * @param {Number} mouseY
+ * @param {Object} sizing
+ * @param {Object} tooltip          - The tooltip object to move
+ */
+export function moveTooltip({ mouseX, mouseY, sizing }, tooltip) {
+    const { x, y } = tooltip;
+
+    const scale = tooltip.series.axis.scale;
+    const bounds = tooltip.series.axis.currentBounds;
+    const { minY, maxY } = scaleBounds({...bounds, scale });
+
+    const pixelX = (x - bounds.minX)/(bounds.maxX - bounds.minX) * sizing.elementWidth;
+    const pixelY = (1 - ((scale === 'log' ? Math.log10(y) : y) - minY)/(maxY - minY)) * sizing.elementHeight;
+
+    const distance = Math.sqrt((pixelX - mouseX)**2 + (pixelY - mouseY)**2);
+    const xDistance = Math.abs(pixelX - mouseX);
+
+    Object.assign(tooltip, {
+        pixelWidth: sizing.elementWidth,
+        pixelX: pixelX,
+        pixelY: isNaN(pixelY) ? sizing.elementHeight/2 : pixelY,
+        xDistance,
+        distance
+    });
+}
+
+export function toggleTooltipSaved({ currentTooltips, savedTooltips }) {
+    if (!currentTooltips.length) {
+        return savedTooltips;
+    }
+
+    const lastTooltip = currentTooltips[currentTooltips.length - 1];
+    if (lastTooltip.xDistance > DISTANCE_THRESHOLD || (!lastTooltip.ignoreYDistance && lastTooltip.distance > DISTANCE_THRESHOLD)) {
+        return savedTooltips;
+    }
+
+    const currentTooltipIndex = savedTooltips.findIndex((tooltip) => {
+        return tooltip.x === lastTooltip.x && tooltip.y === lastTooltip.y;
+    });
+
+    if (currentTooltipIndex === -1) {
+        return [...savedTooltips, lastTooltip];
+    } else {
+        return savedTooltips.filter((_, index) => index !== currentTooltipIndex);
+    }
+}

package/src/state/data_types.js

@@ -0,0 +1,13 @@
+export const SIMPLE_DATA_TYPES = [
+    'values',
+    'tuples',
+    'objects'
+];
+
+export const COMPLEX_DATA_TYPES = [
+    'tuple_observable',
+    'object_observable',
+    'generator'
+];
+
+export const DATA_TYPES = [...SIMPLE_DATA_TYPES, ...COMPLEX_DATA_TYPES];

package/src/state/expand_bounds.js

@@ -0,0 +1,58 @@
+/**
+ * Expands bounds to give a little y padding
+ *
+ * @param {Object} bounds
+ * @param {?Number} bounds.minY
+ * @param {?Number} bounds.maxY
+ * @param {?Number} bounds.minX
+ * @param {?Number} bounds.maxX
+ * @param {Array<Number>} [expandYWith]
+ * @param {Number} [extendXForNBars=0]
+ * @return {Object}
+ */
+export default function expandBounds(bounds, {expandYWith = [], extendXForNBars=0}) {
+    const expandedBounds = Object.assign({}, bounds);
+    for (let y of expandYWith) {
+        if (y === null || y === undefined) {
+            continue;
+        }
+
+        if (typeof expandedBounds.minY !== 'number' || y < expandedBounds.minY) {
+            expandedBounds.minY = y;
+        }
+
+        if (typeof expandedBounds.maxY !== 'number' || y > expandedBounds.maxY) {
+            expandedBounds.maxY = y;
+        }
+    }
+
+    expandedBounds.unscaledMinY = expandedBounds.minY;
+    expandedBounds.unscaledMaxY = expandedBounds.maxY;
+
+    const range = expandedBounds.maxY - expandedBounds.minY;
+    const midpoint = expandedBounds.minY + range/2;
+    expandedBounds.minY = midpoint - 1.05*range/2;
+    expandedBounds.maxY = midpoint + 1.05*range/2;
+
+    if (expandedBounds.minY === expandedBounds.maxY && expandedBounds.minY !== null) {
+        if (expandedBounds.minY > 0) {
+            expandedBounds.minY *= 0.95;
+            expandedBounds.maxY *= 1.05;
+        } else if (expandedBounds.minY < 0) {
+            expandedBounds.minY *= 1.05;
+            expandedBounds.maxY *= 0.95;
+        } else {
+            expandedBounds.minY -= 1;
+            expandedBounds.maxY += 1;
+        }
+    }
+
+    if (extendXForNBars && expandedBounds.minX !== expandedBounds.maxX && expandedBounds.minX !== null && expandedBounds.maxX !== null) {
+        // Base expansion factor on expected bar count
+        const barWidth = (expandedBounds.maxX - expandedBounds.minX) / extendXForNBars;
+        expandedBounds.minX -= barWidth/2;
+        expandedBounds.maxX += barWidth/2;
+    }
+
+    return expandedBounds;
+}

package/src/state/find_matching_axis.js

@@ -0,0 +1,31 @@
+/**
+ *
+ * @param {Array<Object>} axes
+ * @param {'left'|'right'} [side]
+ * @param {String|Number} [number]
+ * @return {Object|undefined}
+ */
+export default function findMatchingAxis({ axes, side, number }) {
+    if (number) {
+        number = parseInt(number) || 0;
+    } else {
+        number = 0;
+    }
+
+    let axis;
+    let seen = 0;
+    for (let candidateAxis of axes) {
+        if (candidateAxis.side !== side) {
+            continue;
+        }
+
+        if (seen === number) {
+            axis = candidateAxis;
+            break;
+        }
+
+        seen++;
+    }
+
+    return axis;
+}

package/src/state/get_default_bounds_calculator.js

@@ -0,0 +1,15 @@
+import BOUND_CALCULATORS from './bound_calculators';
+
+export default function getDefaultBoundsCalculator(givenLabel, customCalculators) {
+    if (BOUND_CALCULATORS[givenLabel]) {
+        return BOUND_CALCULATORS[givenLabel];
+    }
+
+    for (let { label, calculator } of customCalculators) {
+        if (givenLabel === label) {
+            return calculator;
+        }
+    }
+
+    return BOUND_CALCULATORS.all;
+}

package/src/state/hooks.js

@@ -0,0 +1,164 @@
+import { useState, useEffect } from 'react';
+
+export function useEvent(eventSource, eventName, initialState=null, watch=[]) {
+    if (typeof initialState === 'function') {
+        const originalInitialState = initialState;
+        initialState = () => originalInitialState;
+    }
+
+    const [value, setValue] = useState(initialState);
+
+    useEffect(() => {
+        const listener = (updatedValue) => {
+            if (typeof updatedValue === 'function') {
+                const originalUpdatedValue = updatedValue;
+                updatedValue = () => originalUpdatedValue;
+            }
+            setValue(updatedValue);
+        };
+
+        eventSource.on(eventName, listener);
+        return () => {
+            eventSource.off(eventName, listener);
+        };
+    }, [...watch, setValue, eventSource]);
+
+    return value;
+}
+
+export function usePrimarySize(stateController) {
+    return useEvent(stateController, 'primary_size_change', stateController.primaryRenderer ? stateController.primaryRenderer.sizing : {
+        elementWidth: 0,
+        elementHeight: 0,
+        renderWidth: 0,
+        renderHeight: 0
+    });
+}
+
+export function useAxes(stateController) {
+    return useEvent(stateController, 'axes_changed', stateController.axes);
+}
+
+export function useSeries(stateController) {
+    return useEvent(stateController, 'series_changed', stateController.series);
+}
+
+export function useHighlightedSeries(stateController) {
+    return useEvent(stateController, 'highlighted_series_changed', stateController.highlightedSeries);
+}
+
+export function useRightAxisCount(stateController) {
+    return useRightAxes(stateController).length;
+}
+
+export function useLeftAxisCount(stateController) {
+    return useLeftAxes(stateController).length;
+}
+
+export function useRightAxes(stateController) {
+    return useEvent(stateController, 'right_axes_changed', stateController.rightAxes);
+}
+
+export function useLeftAxes(stateController) {
+    return useEvent(stateController, 'left_axes_changed', stateController.leftAxes);
+}
+
+export function useSelection(stateController) {
+    return useEvent(stateController, 'selection_changed', stateController.selection);
+}
+
+export function useGlobalBounds(stateController) {
+    return useEvent(stateController, 'global_bounds_changed', stateController.globalBounds);
+}
+
+export function useAxisBounds(stateController) {
+    return useEvent(stateController, 'axis_bounds_changed', stateController.axes.map(({ currentBounds }) => currentBounds));
+}
+
+export function useBoundCalculator(stateController) {
+    return useEvent(stateController, 'bound_calculator_changed', stateController.boundCalculator);
+}
+
+export function useShowIndividualPoints(stateController) {
+    return useEvent(stateController, 'show_individual_points_changed', stateController.showIndividualPoints);
+}
+
+export function useAutoscaleY(stateController) {
+    return useEvent(stateController, 'autoscale_y_changed', stateController.autoscaleY);
+}
+
+export function useBoundHistory(stateController) {
+    return useEvent(stateController, 'bound_history_changed', stateController.boundHistory);
+}
+
+export function useAlwaysTooltipped(stateController) {
+    return useEvent(stateController, 'always_tooltipped_changed', stateController.alwaysTooltipped);
+}
+
+export function useTooltipState(stateController) {
+    return useEvent(stateController, 'tooltip_state_changed', stateController.tooltipState);
+}
+
+export function useContextMenu(stateController) {
+    return useEvent(stateController, 'context_menu_position_changed', stateController.contextMenuState);
+}
+
+export function useDraggingY(stateController) {
+    return useEvent(stateController, 'dragging_y_changed', stateController.draggingY);
+}
+
+export function usePercentile(stateController) {
+    return useEvent(stateController, 'percentile_changed', stateController.percentile);
+}
+
+export function useShowingOptions(stateController) {
+    return useEvent(stateController, 'showing_options_changed', stateController.showingOptions);
+}
+
+export function useMaxPrecision(stateController) {
+    return useEvent(stateController, 'max_precision_changed', stateController.maxPrecision);
+}
+
+export function usePercentileAsymmetry(stateController) {
+    return useEvent(stateController, 'percentile_asymmetry_changed', stateController.percentileAsymmetry);
+}
+
+export function useShowingSidebar(stateController) {
+    return useEvent(stateController, 'showing_sidebar_changed', stateController.showingSidebar);
+}
+
+export function useShowingAnnotations(stateController) {
+    return useEvent(stateController, 'showing_annotations_changed', stateController.showingAnnotations);
+}
+
+export function useMultiSeries(multigraphStateController) {
+    return useEvent(multigraphStateController, 'multi_series_changed', multigraphStateController.multiSeries);
+}
+
+export function useAnnotationState(stateController) {
+    return useEvent(stateController, 'annotations_changed', stateController.annotationState);
+}
+
+export function useSizing(stateController) {
+    return useEvent(stateController, 'primary_size_change', stateController.sizing);
+}
+
+export function useTheme(stateController) {
+    return useEvent(stateController, 'theme_change', stateController.theme);
+}
+
+export function useExportMode(stateController) {
+    return useEvent(stateController, 'export_mode_change', stateController.exportMode);
+}
+
+export function useHasXEnum(stateController) {
+    return useEvent(stateController, 'has_x_enum_change', stateController.hasXEnum);
+}
+
+export function useEnumMap(stateController) {
+    return useEvent(stateController, 'enum_map_change', stateController.enumMap);
+}
+
+export function useXEnumMap(stateController) {
+    return useEvent(stateController, 'x_enum_map_change', stateController.enumMap);
+}

package/src/state/infer_type.js

@@ -0,0 +1,74 @@
+import {extractYValue} from '../helpers/flatten_simple_data.js';
+
+/**
+ * Given a series object, figures out the form of the data
+ * Note that this is not a validator, nor is it guaranteed to get it right 100% of the time!
+ * If it is giving the wrong type, it is recommended to specify the type manually
+ *
+ * @param {*} series
+ * @param {Boolean} options.useSimpleData
+ * @param {Array} options.data
+ * @return {String}
+ */
+export default function inferType(series, options={ useSimpleData: false }) {
+    if (series.type && series.type !== 'infer') {
+        return series.type;
+    }
+
+    const data = options.data || (options.useSimpleData ? (series.simpleData || series.data) : series.data);
+
+    if (!data) {
+        throw new Error('Data must be provided');
+    }
+
+    if (Array.isArray(data)) {
+        if (data.length === 0) {
+            return 'tuples';
+        }
+
+        if (Array.isArray(data[0])) {
+            return 'tuples';
+        }
+
+        if (typeof data[0] === 'number' || !data[0]) {
+            return 'values';
+        }
+
+        return 'objects';
+    }
+
+    if (data.observe) {
+        if (series.xKey) {
+            return 'object_observable';
+        } else {
+            return 'tuple_observable';
+        }
+    }
+
+    if (typeof data === 'function') {
+        return 'generator';
+    }
+
+    throw new Error('Could not infer type');
+}
+
+/**
+ *
+ * @param simpleData
+ * @param singleSeries
+ * @return {boolean}
+ */
+export function isEnumLike(simpleData, singleSeries) {
+    for (let i = 0; i < simpleData.length; i++) {
+        const y = extractYValue(simpleData[simpleData.length - 1], singleSeries);
+        if (y === null || y === undefined) {
+            continue;
+        }
+
+        if (typeof y === 'string') {
+            return true;
+        }
+    }
+
+    return false;
+}

package/src/state/merge_bounds.js

@@ -0,0 +1,64 @@
+export default function mergeBounds(boundsList) {
+    const mergedBounds = {
+        minX: null,
+        maxX: null,
+        minY: null,
+        maxY: null,
+        closestSpacing: null,
+        dates: false,
+        initial: true
+    };
+
+    for (let { minX, maxX, minY, maxY, dates, initial, closestSpacing } of boundsList) {
+        if (dates) {
+            mergedBounds.dates = true;
+        }
+
+        if (initial) {
+            continue;
+        }
+        mergedBounds.initial = false;
+
+        if (mergedBounds.minX === null || minX < mergedBounds.minX) {
+            mergedBounds.minX = minX;
+        }
+
+        if (mergedBounds.maxX === null || maxX > mergedBounds.maxX) {
+            mergedBounds.maxX = maxX;
+        }
+
+        if (mergedBounds.closestSpacing === null || closestSpacing < mergedBounds.closestSpacing) {
+            mergedBounds.closestSpacing = closestSpacing;
+        }
+
+        if (mergedBounds.minY === null || minY < mergedBounds.minY) {
+            mergedBounds.minY = minY;
+        }
+
+        if (mergedBounds.maxY === null || maxY > mergedBounds.maxY) {
+            mergedBounds.maxY = maxY;
+        }
+    }
+
+    if (mergedBounds.minX === null) {
+        mergedBounds.minX = 0;
+    }
+
+    if (mergedBounds.maxX === null) {
+        mergedBounds.maxX = 0;
+    }
+
+    if (mergedBounds.closestSpacing === null) {
+        mergedBounds.closestSpacing = 1;
+    }
+
+    if (mergedBounds.minY === null) {
+        mergedBounds.minY = 0;
+    }
+
+    if (mergedBounds.maxY === null) {
+        mergedBounds.maxY = 0;
+    }
+
+    return mergedBounds;
+}