@windborne/grapher 1.0.0

package/src/helpers/axis_sizes.js

@@ -0,0 +1,2 @@
+export const Y_AXIS_WIDTH = 32;
+export const BIG_Y_AXIS_LABEL_OFFSET = 20;

package/src/helpers/binary_search.js

@@ -0,0 +1,67 @@
+/**
+ * Finds the closest point to the target
+ *
+ * @param {Array} data                          - the data, in data space
+ * @param {Number} targetX                      - the x coordinate to get closest to
+ * @param {Object} [searchParams]
+ * @param {String} [searchParams.searchType]    - whether to search for the closest, one before, or one after
+ * @param {Boolean} [searchParams.returnIndex]  - whether to return the index or the object itself
+ * @param {Number} [startIndex]                 - where to start the search from
+ * @param {Number} [endIndex]                   - where to end the search
+ * @return {Array|Number}
+ */
+export default function binarySearch(data, targetX, searchParams={}, startIndex=0, endIndex=undefined) {
+    if (endIndex === undefined) {
+        endIndex = data.length - 1;
+    }
+
+    if (data.length === 0) {
+        return searchParams.returnIndex ? -1 : [null, null];
+    }
+
+    const middleIndex = Math.floor((startIndex + endIndex)/2);
+
+    if (targetX === data[middleIndex][0] || (data[middleIndex][0] instanceof Date && data[middleIndex][0].valueOf() === targetX)) {
+        if (searchParams.returnIndex) {
+            return middleIndex;
+        } else {
+            return data[middleIndex];
+        }
+    }
+
+    if (startIndex === endIndex) {
+        if (data[startIndex][0] < targetX && searchParams.searchType === 'before') {
+            return searchParams.returnIndex ? startIndex : data[startIndex];
+        } else if (data[startIndex][0] > targetX && searchParams.searchType === 'after') {
+            return searchParams.returnIndex ? startIndex : data[startIndex];
+        } else {
+            return searchParams.returnIndex ? -1 : [null, null];
+        }
+    }
+
+    if (endIndex - 1 === startIndex) {
+        let index;
+
+        if (searchParams.searchType === 'before') {
+            index = startIndex;
+            // index = (targetX <= data[startIndex][0]) ? startIndex : endIndex;
+        } else if (searchParams.searchType === 'after') {
+            index = endIndex;
+            // index = (targetX >= data[endIndex][0]) ? endIndex : startIndex;
+        } else {
+            index = Math.abs(data[startIndex][0] - targetX) > Math.abs(data[endIndex][0] - targetX) ?
+                endIndex :
+                startIndex;
+        }
+
+        return searchParams.returnIndex ? index : data[index];
+    }
+
+    if (targetX > data[middleIndex][0]) {
+        return binarySearch(data, targetX, searchParams, middleIndex, endIndex);
+    }
+
+    if (targetX < data[middleIndex][0]) {
+        return binarySearch(data, targetX, searchParams, startIndex, middleIndex);
+    }
+}

package/src/helpers/color_to_vector.js

@@ -0,0 +1,35 @@
+/**
+ * Returns the color as a [r, g, b, a] array with domain 0 to 1 for use in webgl
+ *
+ * @param color
+ * @return {[number, number, number, number]|[number, number, number, number]}
+ */
+export default function colorToVector(color) {
+    if (color === 'black') {
+        color = '#000000';
+    } else if (color === 'white') {
+        color = '#FFFFFF';
+    } else if (color === 'transparent') {
+        return [0, 0, 0, 0];
+    }
+
+    if (color.startsWith('rgb')) {
+        const parts = color.split(',').map((part) => parseFloat(part.match(/\d+(\.\d+)?/)[0]));
+        return [
+            parts[0]/255,
+            parts[1]/255,
+            parts[2]/255,
+            parts.length >= 4 ? parts[3] : 1
+        ];
+    }
+
+    if (typeof color !== 'string' || !/^#[\dA-F]{6}$/i.test(color)) {
+        throw new Error(`Color must be a hex string: ${color}`);
+    }
+
+    const r = parseInt(color.substr(1, 2),  16)/255;
+    const g = parseInt(color.substr(3, 2),  16)/255;
+    const b = parseInt(color.substr(5, 2),  16)/255;
+    const a = 1.0;
+    return [r, g, b, a];
+}

package/src/helpers/colors.js

@@ -0,0 +1,27 @@
+export const LINE_COLORS = [
+    '#F1C232',
+    '#1259f8',
+    '#cb4b4b',
+    '#4da74d',
+    '#9440ed',
+    '#61e0ed',
+    '#ed6d2c',
+    '#ed13c6',
+    '#bbed59'
+];
+
+export default function getColor(seriesColor, i, multigrapherSeriesIndex) {
+    if (typeof seriesColor === 'string') {
+        return seriesColor;
+    }
+
+    if (typeof seriesColor === 'number') {
+        return LINE_COLORS[seriesColor % LINE_COLORS.length];
+    }
+
+    if (multigrapherSeriesIndex !== undefined) {
+        return LINE_COLORS[multigrapherSeriesIndex % LINE_COLORS.length];
+    }
+
+    return LINE_COLORS[i % LINE_COLORS.length];
+}

package/src/helpers/custom_prop_types.js

@@ -0,0 +1,159 @@
+import PropTypes from 'prop-types';
+import {DATA_TYPES} from '../state/data_types';
+
+// checking the shape of data is slow if there's a lot of it
+// it can be convenient in development, but should not be done when testing high cardinality data
+const ENABLE_DATA_CHECK = false;
+
+const PointY = function (props, propName) {
+    if (typeof props[propName] !== 'number' && props[propName] !== null) {
+        return new Error(`${propName} needs to be a number or null`);
+    }
+
+    return null;
+};
+
+const PointTuple = function (props, propName) {
+    if (!Array.isArray(props) || props.length !== 2) { // eslint-disable-line react/prop-types
+        return new Error(`${propName} needs to be an array of length two`);
+    }
+
+    const [x, y] = props;
+    if (typeof x !== 'number' && !(x instanceof Date)) {
+        return new Error(`${propName}.x needs to be a number or date`);
+    }
+
+    if (typeof y !== 'number' && y !== null) {
+        return new Error(`${propName}.y needs to be a number or null`);
+    }
+
+    return null;
+};
+
+const Data = ENABLE_DATA_CHECK ? PropTypes.oneOfType([
+    PropTypes.arrayOf(PointY), // values
+    PropTypes.arrayOf(PropTypes.arrayOf(PointTuple)), // tuples
+    PropTypes.arrayOf(PropTypes.object), // objects
+    PropTypes.shape({ observe: PropTypes.func.isRequired }), // observable
+    PropTypes.func // generator function
+]) : PropTypes.any;
+
+const SingleSeries = PropTypes.shape({
+    data: Data.isRequired,
+    type: PropTypes.oneOf([
+        ...DATA_TYPES,
+        'infer'
+    ]),
+    xKey: PropTypes.string,
+    yKey: PropTypes.string,
+    xUnixDates: PropTypes.bool,
+    color: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    name: PropTypes.string,
+    xLabel: PropTypes.string,
+    yLabel: PropTypes.string,
+    ignoreDiscontinuities: PropTypes.bool,
+    dashed: PropTypes.bool,
+    dashPattern: PropTypes.arrayOf(PropTypes.number),
+    width: PropTypes.number,
+    rangeSelectorWidth: PropTypes.number,
+    axis: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    expandYWith: PropTypes.arrayOf(PropTypes.number),
+    defaultAlwaysTooltipped: PropTypes.bool,
+    square: PropTypes.bool,
+    shiftXBy: PropTypes.number,
+    graph: PropTypes.number, // affects multigrapher only
+    background: PropTypes.object,
+    hideFromKey: PropTypes.bool,
+    showIndividualPoints: PropTypes.bool,
+    rendering: PropTypes.oneOf(['line', 'bar', 'area']), // defaults to line
+    negativeColor: PropTypes.string, // only applies to bar
+    gradient: PropTypes.array, // only applies to area
+    zeroLineWidth: PropTypes.number, // only applies to bar and area
+    zeroLineColor: PropTypes.string,  // only applies to bar and area
+    pointRadius: PropTypes.number // only applies to area
+});
+
+const Series = PropTypes.arrayOf(SingleSeries);
+
+const Axis = PropTypes.shape({
+    axisIndex: PropTypes.number.isRequired,
+    series: PropTypes.array.isRequired,
+    side: PropTypes.oneOf(['left', 'right']).isRequired,
+    scale: PropTypes.oneOf(['linear', 'log']).isRequired,
+    label: PropTypes.string
+});
+
+const Axes = PropTypes.arrayOf(Axis);
+
+const CustomBoundsSelector = PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    calculator: PropTypes.func.isRequired,
+    datesOnly: PropTypes.bool
+});
+
+const CustomBoundsSelectors = PropTypes.arrayOf(CustomBoundsSelector);
+
+const TooltipOptionsRaw = {
+    includeSeriesLabel: PropTypes.bool,
+    includeXLabel: PropTypes.bool,
+    includeYLabel: PropTypes.bool,
+    includeXValue: PropTypes.bool,
+    includeYValue: PropTypes.bool,
+    floating: PropTypes.bool,
+    alwaysFixedPosition: PropTypes.bool,
+    floatPosition: PropTypes.oneOf(['top', 'bottom']),
+    floatDelta: PropTypes.number,
+    savingDisabled: PropTypes.bool
+};
+
+const TooltipOptions = PropTypes.shape(TooltipOptionsRaw);
+
+const Annotation = PropTypes.shape({
+    x: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Date)]).isRequired,
+    xEnd: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.instanceOf(Date)]),
+    series: PropTypes.arrayOf(PropTypes.string),
+    content: PropTypes.string.isRequired
+});
+const Annotations = PropTypes.arrayOf(Annotation);
+
+const DraggablePoint = PropTypes.shape({
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
+    radius: PropTypes.number,
+    fillColor: PropTypes.string,
+    strokeColor: PropTypes.string,
+    strokeWidth: PropTypes.number,
+    onClick: PropTypes.func,
+    onDoubleClick: PropTypes.func
+});
+const DraggablePoints = PropTypes.arrayOf(DraggablePoint);
+
+const VerticalLine = PropTypes.shape({
+    x: PropTypes.number.isRequired,
+    color: PropTypes.string,
+    width: PropTypes.number,
+    markTop: PropTypes.bool,
+    style: PropTypes.object,
+    markerStyle: PropTypes.object
+});
+const VerticalLines = PropTypes.arrayOf(VerticalLine);
+
+const CustomPropTypes = {
+    Data,
+    SingleSeries,
+    Series,
+    Axis,
+    Axes,
+    CustomBoundsSelector,
+    CustomBoundsSelectors,
+    TooltipOptions,
+    TooltipOptionsRaw,
+    Annotations,
+    DraggablePoint,
+    DraggablePoints,
+    VerticalLine,
+    VerticalLines
+};
+
+
+export default CustomPropTypes;

package/src/helpers/flatten_simple_data.js

@@ -0,0 +1,81 @@
+/**
+ * Flattens simple data
+ * Returns an array of tuples (x value, simple point)
+ *
+ * @param simpleData
+ * @param series
+ * @param inDataSpace
+ * @return {[]}
+ */
+export default function flattenSimpleData(simpleData, {series, inDataSpace }) {
+    const flattened = [];
+    let fI = 0;
+
+    for (let point of simpleData) {
+        const yValue = extractYValue(point, series);
+
+        if (series.yKey && Array.isArray(yValue)) {
+            for (let subpoint of point[series.yKey]) {
+                if (series.ignoreDiscontinuities && typeof subpoint[series.yKey] !== 'number' && !Array.isArray(subpoint)) {
+                    continue;
+                }
+
+                const x = inDataSpace[fI++][0];
+
+                if (series.square && flattened.length > 0) {
+                    flattened.push([x, flattened[flattened.length - 1][1]]);
+                }
+
+                flattened.push([x, subpoint]);
+            }
+
+            continue;
+        }
+
+        if (series.ignoreDiscontinuities && (yValue === undefined || yValue === null)) {
+            continue;
+        }
+
+        const x = inDataSpace[fI++][0];
+
+        if (series.square && flattened.length > 0) {
+            flattened.push([x, flattened[flattened.length - 1][1]]);
+        }
+
+        flattened.push([x, point]);
+    }
+
+    if (flattened.length !== inDataSpace.length)  {
+        console.warn('Flattening didn\'t give the same length as it has in data space'); // eslint-disable-line no-console
+    }
+
+    return flattened;
+}
+
+export function extractYValue(point, series) {
+    if (series.yKey) {
+        return point[series.yKey];
+    }
+
+    if (Array.isArray(point)) {
+        if (point.length === 1) {
+            return point[0];
+        } else {
+            return point[1];
+        }
+    }
+
+    return point;
+}
+
+export function extractXValue(point, series) {
+    if (series.xKey) {
+        return point[series.xKey];
+    }
+
+    if (Array.isArray(point)) {
+        return point[0];
+    }
+
+    return point;
+}

package/src/helpers/format.js

@@ -0,0 +1,233 @@
+export function calculatePrecision(value) {
+    return Math.max(-Math.log10(Math.abs(value)) + 2, 0);
+}
+
+export function calculateTimePrecision(minDate, maxDate) {
+    minDate = new Date(minDate);
+    maxDate = new Date(maxDate);
+
+    const range = maxDate.valueOf() - minDate.valueOf();
+    if (range < 3*1000) {
+        return 'ms';
+    } else if (range < 10*60*1000) {
+        return 's';
+    } else {
+        return 'm';
+    }
+}
+
+export function roundToPrecision(value, precision=null) {
+    if (precision === null) {
+        precision = calculatePrecision(value);
+    }
+
+    if (isNaN(precision) || precision > 100) {
+        return value.toString();
+    }
+
+    const rounded = value.toFixed(Math.ceil(precision));
+    let stripped = rounded;
+    if (rounded.includes('.')) {
+        stripped = stripped.replace(/\.?0+$/g, '');
+    }
+
+    if (stripped === '') {
+        return '0';
+    }
+
+    return stripped;
+}
+
+const DATE_TIME_FORMATTERS = {};
+
+/**
+ * Given a timezone string, gets the offset relative to utc in milliseconds
+ * For example, America/New_York in winter is GMT-05:00, so it evaluates to -5*60*60*1000
+ *
+ * @param {String} timeZone - the time zone string
+ * @param {Date} sampleDate - a date to use in the conversions, since it can be time-of-year dependent with Daylight Savings Time
+ * @return {number|null}
+ */
+function timezoneToOffsetMS(timeZone, sampleDate) {
+    try { // formats are finicky, so give up rather than abort rendering
+        let datetimeFormatter = DATE_TIME_FORMATTERS[timeZone];
+        if (!datetimeFormatter) {
+            let properTimeZone = timeZone;
+            if (!timeZone || timeZone === 'local') {
+                properTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+            }
+
+            datetimeFormatter = new Intl.DateTimeFormat('en-US', {
+                timeZone: properTimeZone,
+                timeZoneName: 'longOffset'
+            });
+            DATE_TIME_FORMATTERS[timeZone] = datetimeFormatter;
+        }
+
+        const parts = datetimeFormatter.formatToParts(sampleDate);
+        const offsetPart = parts.find(part => part.type === 'timeZoneName');
+
+        if (!offsetPart) {
+            return null;
+        }
+
+        if (offsetPart.value === 'GMT') {
+            return 0;
+        }
+
+        if (!/^GMT[+-]\d{2}:\d{2}$/.test(offsetPart.value)) {
+            return null;
+        }
+
+        const [hours, minutes] = offsetPart.value.slice(3).split(':');
+
+        return parseInt(hours)*60*60*1000 + parseInt(minutes)*60*1000;
+    } catch (e) {
+        console.error(new Error(`Could not parse timezone offset for ${sampleDate} in ${timeZone}`)); // eslint-disable-line no-console
+        console.error(e); // eslint-disable-line no-console
+        return null;
+    }
+}
+
+/**
+ * Gets the Date object that represents the start of day in a given timezone
+ * Note that this is still a native date object, so it will be in the local timezone
+ * Its timestamp, however, will correspond to the start of the day in the given timezone
+ *
+ * @param date
+ * @param timezone
+ * @return {Date}
+ */
+export function startOfDayInTimezone(date, timezone) {
+    if (!timezone) {
+        const startOfDay = new Date(date);
+        startOfDay.setHours(0, 0, 0, 0);
+        return startOfDay;
+    }
+
+    const offset = timezoneToOffsetMS(timezone, date); // ms between timezone and utc
+    let startOfDay = new Date(date);
+    startOfDay.setUTCHours(0, 0, 0, 0);
+
+    const difference = startOfDay.valueOf() - date.valueOf();
+
+    // if we would have gone forward a day when offset is taken into account, we need to go back a day again
+    if (difference > offset) {
+        startOfDay = new Date(startOfDay.valueOf() - 24*60*60*1000);
+    }
+
+    return new Date(startOfDay.valueOf() - offset);
+}
+
+function formatTime(time, {precision, justTime, justDate, justMonthAndDay, unitOverride, clockStyle='24h', timeZone}) {
+    const utc = timeZone && timeZone.toLowerCase() === 'utc';
+    if (timeZone && !utc && timeZone !== 'local' && window.Intl && window.Intl.DateTimeFormat) {
+        const offset = timezoneToOffsetMS(timeZone, time);
+        const localOffset = timezoneToOffsetMS('local', time);
+
+        if (typeof offset === 'number' && typeof localOffset === 'number') {
+            time = new Date(time.valueOf() + offset - localOffset);
+        }
+    }
+
+    const year = utc ? time.getUTCFullYear() : time.getFullYear();
+    const month = (utc ? time.getUTCMonth() : time.getMonth()) + 1;
+    const day = utc ? time.getUTCDate() :  time.getDate();
+
+    if (unitOverride === 'year') {
+        return year.toString();
+    }
+
+    if (justDate) {
+        return utc ? `${month}/${day}/${year}` : time.toLocaleDateString();
+    }
+
+    if (justMonthAndDay) {
+        // eg Jan 19
+        const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        return `${monthNames[month - 1]} ${day}`;
+    }
+
+    const hours = utc ? time.getUTCHours() : time.getHours();
+    const minutes = utc ? time.getUTCMinutes() : time.getMinutes();
+    const seconds = utc ? time.getUTCSeconds() : time.getSeconds();
+    const milliseconds = utc ? time.getUTCMilliseconds() : time.getMilliseconds();
+
+    let timeString;
+
+    if (clockStyle === '12h') {
+        timeString = `${((hours + 11) % 12 + 1).toString()}:${minutes.toString().padStart(2, '0')}`;
+    } else {
+        timeString = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+    }
+
+    if (precision === 's' || precision === 'ms') {
+        timeString += `:${seconds.toString().padStart(2, '0')}`;
+    }
+
+    if (precision === 'ms') {
+        timeString += `.${milliseconds.toString().padStart(3, '0')}`;
+    }
+
+    if (clockStyle === '12h') {
+        timeString += hours >= 12 ? 'pm' : 'am';
+    }
+
+    if (justTime) {
+        return timeString;
+    }
+
+    if (utc) {
+        timeString += ' UTC';
+    }
+
+    return (utc ? `${month}/${day}/${year}` : time.toLocaleDateString()) + ' ' + timeString;
+}
+
+export function formatX(x, {dates=false, precision=null, justTime=false, justDate=false, justMonthAndDay=false, clockStyle='24h', unitOverride, timeZone, integersOnly=false, inverseEnumMap}={}) {
+    if (dates && !(x instanceof Date)) {
+        x = new Date(x);
+
+        if (isNaN(x)) {
+            return 'Invalid Date';
+        }
+    }
+
+    if (x instanceof Date) {
+        return formatTime(x, {precision, justTime, justDate, justMonthAndDay, unitOverride, clockStyle, timeZone});
+    }
+
+    if (isNaN(x)) {
+        return 'NaN';
+    }
+
+    if (inverseEnumMap) {
+        if (Math.abs(x - Math.round(x)) > 1e-10) {
+            return '';
+        }
+
+        return inverseEnumMap[Math.round(x)];
+    }
+
+    if (integersOnly && Math.abs(x - Math.round(x)) > 1e-10) {
+        return '';
+    }
+
+    return roundToPrecision(x, precision);
+}
+
+export function formatY(y, {precision=null, log=false}={}) {
+    if (y === null) {
+        return 'null';
+    }
+
+    if (isNaN(y)) {
+        return 'NaN';
+    }
+
+    if (log) {
+        return `10^${roundToPrecision(Math.log10(y), precision)}`;
+    }
+
+    return roundToPrecision(y, precision);
+}

package/src/helpers/generator_params_equal.js

@@ -0,0 +1,10 @@
+export default function generatorParamsEqual(a, b) {
+    if (a === undefined || b === undefined) {
+        return a === b;
+    }
+
+    return (a.minX === b.minX) &&
+        (a.maxX === b.maxX) &&
+        (a.sizing.elementWidth === b.sizing.elementWidth) &&
+        (a.sizing.renderWidth === b.sizing.renderWidth);
+}

package/src/helpers/name_for_series.js

@@ -0,0 +1,16 @@
+/**
+ * Gets the proper name for a series
+ *
+ * @param {Object} singleSeries
+ * @param {Number} index
+ * @return {string}
+ */
+export default function nameForSeries(singleSeries, index) {
+    let name = singleSeries.name || singleSeries.yKey;
+
+    if (!name) {
+        name = index.toString();
+    }
+
+    return name;
+}