@windborne/grapher 1.0.0

package/src/helpers/place_grid.js

@@ -0,0 +1,257 @@
+import {startOfDayInTimezone} from './format';
+
+function placeTick(trueValue, {scale, min, max, inverted, totalSize, precision, formatter, dates, justTime, justDate, formatOptions={} }, opts={}) {
+    let scaledValue = trueValue;
+
+    if (scale === 'log') {
+        scaledValue = 10**trueValue;
+    }
+
+    let percent = (trueValue - min)/(max - min);
+    if (inverted) {
+        percent = 1.0 - percent;
+    }
+
+    let pixelValue = percent * totalSize;
+    if (isNaN(pixelValue)) {
+        pixelValue = 0;
+    }
+
+    return {
+        pixelValue,
+        trueValue: scaledValue,
+        label: formatter(scaledValue, { ...formatOptions, precision, log: scale === 'log', dates, justTime, justDate }),
+        size: 'major',
+        ...opts
+    };
+}
+
+function placeTickByPixel(pixelValue, {scale, min, max, inverted, totalSize, precision, formatter, dates, justTime, justDate, formatOptions={} }, opts={}) {
+    let percent = pixelValue/totalSize;
+    if (inverted) {
+        percent = 1.0 - percent;
+    }
+
+    let trueValue = percent * (max - min) + min;
+
+    if (scale === 'log') {
+        trueValue = Math.pow(10, trueValue);
+    }
+
+    return {
+        pixelValue,
+        trueValue,
+        label: formatter(trueValue, { ...formatOptions, precision, log: scale === 'log', dates, justTime, justDate }),
+        size: 'major',
+        ...opts
+    };
+}
+
+function roundToEvenNumber(value, tickSpacing) {
+    return Math.round(value/tickSpacing)*tickSpacing;
+}
+
+function getEvenTickSpacing(span, desiredCount) {
+    const subspan = span/desiredCount;
+
+    const precision = -Math.log10(Math.abs(subspan)) + 1;
+    const multiplier = (precision - Math.floor(precision)) > 0.5 ? 2 : 1;
+
+    const roundTo = 10**Math.floor(precision) * multiplier;
+
+    return Math.round(subspan * roundTo)/roundTo;
+}
+
+function roundToDivisor(value, divisor) {
+    if (value <= 1) {
+        return 1;
+    }
+
+    if (divisor === 1) {
+        return Math.round(value);
+    }
+
+    if (value >= divisor) {
+        return Math.round(value/divisor)*divisor;
+    }
+
+    let divisors;
+    if (divisor === 24) {
+        divisors = [1, 2, 6, 12, 24];
+    } else if (divisor === 60) {
+        divisors = [1, 2, 5, 10, 15, 30, 60];
+    } else {
+        throw new Error('Invalid divisor');
+    }
+
+    let bestDelta = Infinity;
+    let bestDivisor = 1;
+    for (let i = 0; i < divisors.length; i++) {
+        const delta = Math.abs(divisors[i] - value);
+        if (delta < bestDelta) {
+            bestDivisor = divisors[i];
+            bestDelta = delta;
+        }
+    }
+
+    return bestDivisor;
+}
+
+function getEvenDateTickSpacing(span, desiredCount, unitOverride) {
+    const subspan = span / desiredCount;
+
+    if (subspan < 60*1000 && (!unitOverride || unitOverride === 'second')) {
+        return {
+            amount: roundToDivisor(subspan/1000, 60),
+            unit: 's'
+        };
+    }
+
+    if (subspan < 60*60*1000 && (!unitOverride || unitOverride === 'minute')) {
+        return {
+            amount: roundToDivisor(subspan/(60*1000), 60),
+            unit: 'm'
+        };
+    }
+
+    if (subspan < 24*60*60*1000 && (!unitOverride || unitOverride === 'hour')) {
+        return {
+            amount: roundToDivisor(subspan/(60*60*1000), 24),
+            unit: 'h'
+        };
+    }
+
+    if (unitOverride === 'day' || (subspan < 30*24*60*60*1000 && !unitOverride)) {
+        return {
+            amount: roundToDivisor(subspan/(24*60*60*1000), 1),
+            unit: 'd'
+        };
+    }
+
+    if (subspan > 30*24*60*60*1000 && (!unitOverride || unitOverride === 'month')) {
+        return {
+            amount: roundToDivisor(subspan/30*24*60*60*1000, 1),
+            unit: 'month'
+        };
+    }
+
+    if (unitOverride === 'year') {
+        return {
+            amount: roundToDivisor(subspan/365*24*60*60*1000, 1),
+            unit: 'year'
+        };
+    }
+
+    return {
+        unit: 'm',
+        amount: 60
+    };
+}
+
+function placeNumbersGrid({ min, max, precision, expectedLabelSize, labelPadding, totalSize, scale='linear', formatter, inverted=false, formatOptions }) {
+    const paddedLabelSize = expectedLabelSize + 2*labelPadding;
+
+    const ticks = [];
+    const placementParams = {scale, min, max, inverted, totalSize, precision, formatter, formatOptions, dates: false };
+
+    const labelCount = Math.floor((totalSize - expectedLabelSize*2)/paddedLabelSize);
+    const tickSpacing = getEvenTickSpacing(max - min, labelCount);
+    if (tickSpacing > 0) {
+        for (let value = roundToEvenNumber(min, tickSpacing); value < max; value += tickSpacing) {
+            ticks.push(placeTick(value, placementParams));
+        }
+    }
+
+    if (ticks.length) {
+        if (inverted && ticks[ticks.length - 1].pixelValue > labelPadding) {
+            ticks.push(placeTickByPixel(expectedLabelSize / 2, placementParams));
+        }
+    }
+
+    return ticks.filter(({ pixelValue }) => pixelValue <= totalSize && pixelValue >= 0);
+}
+
+function placeDatesGrid({ min, max, precision, expectedLabelSize, labelPadding, totalSize, skipFirst=false, skipLast=false, scale='linear', formatter, inverted=false, formatOptions }) {
+    const paddedLabelSize = expectedLabelSize + 2*labelPadding;
+
+    const ticks = [];
+    const placementParams = {scale, min, max, inverted, totalSize, precision, formatter, formatOptions, dates: true };
+
+    const { amount, unit } = getEvenDateTickSpacing(max - min, totalSize/paddedLabelSize, formatOptions.unitOverride);
+
+    const justDate = unit === 'month';
+
+    if (!skipFirst) {
+        ticks.push(placeTickByPixel(0, {...placementParams, justDate}, {position: 'first'}));
+    }
+
+    let currentDate = new Date(min);
+
+    if (unit === 'h') {
+        currentDate.setMinutes(0, 0, 0);
+    } else if (unit === 'm') {
+        currentDate.setSeconds(0, 0);
+    } else if (unit === 's') {
+        currentDate.setMilliseconds(0);
+    } else if (unit === 'month') {
+        currentDate = startOfDayInTimezone(currentDate, formatOptions.timeZone);
+        currentDate.setDate(1);
+    } else if (unit === 'd') {
+        currentDate = startOfDayInTimezone(currentDate, formatOptions.timeZone);
+    }
+
+    let lastDateString = formatter(currentDate, {...formatOptions, ...placementParams, justDate: true });
+    while (currentDate < max) {
+        let delta = 24*60*60*1000;
+
+        if (unit === 'h') {
+            delta = (amount - currentDate.getHours() % amount)*60*60*1000;
+        } else if (unit === 'm') {
+            delta = (amount - currentDate.getMinutes() % amount)*60*1000;
+        } else if (unit === 's') {
+            delta = (amount - currentDate.getSeconds() % amount)*1000;
+        } else if (unit === 'month') {
+            delta = 0;
+            if (currentDate.getMonth() === 11) {
+                currentDate = new Date(currentDate.getFullYear() + 1, 0, 1);
+            } else {
+                currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
+            }
+        } else if (unit === 'year') {
+            currentDate = new Date(currentDate.getFullYear() + 1, 0, 0);
+        }
+
+        currentDate = new Date(currentDate.valueOf() + delta);
+
+        const justTime = formatter(currentDate, {...formatOptions, ...placementParams, justDate: true }) === lastDateString;
+
+        const tick = placeTick(currentDate, {...placementParams, justTime, justDate});
+
+        if (ticks.length && tick.pixelValue - ticks[ticks.length - 1].pixelValue < expectedLabelSize + labelPadding) {
+            continue;
+        }
+
+        if (tick.pixelValue + expectedLabelSize/2 >= totalSize) {
+            continue;
+        }
+
+        ticks.push(tick);
+        lastDateString = formatter(currentDate, {...formatOptions, ...placementParams, justDate: true });
+    }
+
+    const justTime = lastDateString === formatter(max, {...formatOptions, ...placementParams, justDate: true });
+
+    if (!skipLast && ticks[ticks.length - 1].pixelValue + expectedLabelSize < totalSize) {
+        ticks.push(placeTickByPixel(totalSize, {...placementParams, justTime, justDate}, {position: 'last'}));
+    }
+
+    return ticks.filter(({ pixelValue }) => pixelValue <= totalSize && pixelValue >= 0);
+}
+
+export default function placeGrid(opts) {
+    if (opts.dates) {
+        return placeDatesGrid(opts);
+    } else {
+        return placeNumbersGrid(opts);
+    }
+}

package/src/helpers/pyodide_ready.js

@@ -0,0 +1,13 @@
+export default async function pyodideReady() {
+    if (window.pyodide) {
+        return window.pyodide;
+    }
+
+    while (!window.languagePluginLoader) {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+    }
+
+    await window.languagePluginLoader;
+
+    return window.pyodide;
+}

package/src/multigrapher.js

@@ -0,0 +1,105 @@
+import React, { useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import Grapher from './grapher.js';
+import MultigraphStateController from './state/multigraph_state_controller.js';
+import {useDraggingY, useMultiSeries} from './state/hooks.js';
+import SyncPool from './state/sync_pool.js';
+
+export default React.memo(MultiGrapher);
+
+
+function MultiGrapher(props) {
+    /* eslint-disable react/prop-types */
+
+    const multigrapherID = useMemo(() => Math.random().toString(36).slice(2), []);
+
+    const multigraphStateController = useMemo(() => new MultigraphStateController({
+        id: multigrapherID,
+        ...props
+    }), []);
+
+    const multiSeries = useMultiSeries(multigraphStateController);
+
+    const syncPool = useMemo(() => new SyncPool({
+        syncBounds: props.syncBounds,
+        syncTooltips: props.syncTooltips,
+        syncDragState: true
+    }), []);
+
+    const registerStateController = useMemo(() => multigraphStateController.registerStateController.bind(multigraphStateController), [multigraphStateController]);
+
+    useEffect(() => {
+        if (process.env.NODE_ENV === 'development') {
+            window.multigraphStateController = multigraphStateController;
+        }
+
+        return () => {
+            multigraphStateController.dispose();
+        };
+    }, [multigraphStateController]);
+
+    useEffect(() => {
+        props.exportStateController && props.exportStateController(multigraphStateController);
+    }, [multigraphStateController, props.exportStateController]);
+
+    useEffect(() => {
+        multigraphStateController.setSeries(props.series);
+    }, [multigraphStateController, props.series]);
+
+    useEffect(() => {
+        if (!props.onMultiseriesChange) {
+            return () => {};
+        }
+
+        multigraphStateController.on('multi_series_changed', props.onMultiseriesChange);
+        return () => {
+            multigraphStateController.off('multi_series_changed', props.onMultiseriesChange);
+        };
+    }, [multigraphStateController, props.onMultiseriesChange]);
+
+    const draggingY = useDraggingY(multigraphStateController);
+
+    return (
+        <div className="multigrapher">
+            {
+                draggingY && props.newUpperEnabled &&
+                    <div className={`new-grapher grapher-${props.theme}`} data-grapher-id={`multigrapher-${multigrapherID}-top`}>
+                        New grapher
+                    </div>
+            }
+
+            {
+                multiSeries.map((series, i) =>
+                    <Grapher
+                        key={i}
+                        {...props}
+                        syncPool={syncPool}
+                        stateControllerInitialization={multigraphStateController.stateControllerInitialization}
+                        series={series}
+                        id={`multigrapher-${multigrapherID}-${i}`}
+                        dragPositionYOffset={props.newUpperEnabled ? 38 : 0}
+                        exportStateController={registerStateController}
+                    />
+                )
+            }
+
+            {
+                draggingY &&
+                <div className={`new-grapher grapher-${props.theme}`} data-grapher-id={`multigrapher-${multigrapherID}-bottom`}>
+                    New grapher
+                </div>
+            }
+        </div>
+    );
+}
+
+MultiGrapher.defaultProps = {
+    theme: 'night'
+};
+
+MultiGrapher.propTypes = Object.assign({}, Grapher.propTypes, {
+    syncBounds: PropTypes.bool,
+    syncTooltips: PropTypes.bool,
+    newUpperEnabled: PropTypes.bool,
+    onMultiseriesChange: PropTypes.func
+});

package/src/renderer/background.frag

@@ -0,0 +1,7 @@
+precision highp float;
+
+uniform vec4 color;
+
+void main() {
+    gl_FragColor = vec4(color);
+}

package/src/renderer/background.vert

@@ -0,0 +1,7 @@
+precision highp float;
+
+attribute vec2 position;
+
+void main() {
+    gl_Position = vec4((position - 0.5)*2.0, 0.0, 1.0);
+}

package/src/renderer/background_program.js

@@ -0,0 +1,48 @@
+import backgroundFrag from './background.frag';
+import backgroundVert from './background.vert';
+import colorToVector from '../helpers/color_to_vector';
+import createGLProgram from './create_gl_program';
+
+export default class BackgroundProgram {
+
+    constructor(gl) {
+        this._gl = gl;
+
+        this._program = createGLProgram(gl, backgroundVert, backgroundFrag);
+
+        this._vertexBuffer = gl.createBuffer();
+        this._indexBuffer = gl.createBuffer();
+
+        if (!gl.getExtension('OES_element_index_uint')) {
+            console.error('Your browser does not support OES_element_index_uint'); // eslint-disable-line no-console
+        }
+    }
+
+    draw({ data }) {
+        const gl = this._gl;
+        gl.useProgram(this._program);
+
+        // gl.disable(gl.DEPTH_TEST);
+
+        for (let { minXt, maxXt, color } of data) {
+            gl.uniform4f(gl.getUniformLocation(this._program, 'color'), ...colorToVector(color));
+
+            const vertices = new Float32Array([
+                minXt, 1, maxXt, 1, maxXt, -1,
+                minXt, 1, maxXt, -1, minXt, -1
+            ]);
+
+            gl.bindBuffer(gl.ARRAY_BUFFER, this._vertexBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+
+            const positionLocation = gl.getAttribLocation(this._program, 'position');
+            gl.enableVertexAttribArray(positionLocation);
+            gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+
+            gl.enable(gl.BLEND);
+            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+        }
+    }
+
+}

package/src/renderer/circle.frag

@@ -0,0 +1,26 @@
+#ifdef GL_OES_standard_derivatives
+#extension GL_OES_standard_derivatives : enable
+#endif
+
+precision mediump float;
+
+uniform vec4 color;
+
+// Adapted and modified from https://www.desultoryquest.com/blog/drawing-anti-aliased-circular-points-using-opengl-slash-webgl/
+void main() {
+    float delta = 0.0;
+    float alpha = 1.0;
+    vec2 center = 2.0 * gl_PointCoord - 1.0;
+    float r = dot(center, center);
+
+    if (r > 1.0) {
+        discard;
+    }
+
+    #ifdef GL_OES_standard_derivatives
+    delta = fwidth(r);
+    alpha = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);
+    #endif
+
+    gl_FragColor = color * alpha;
+}

package/src/renderer/circle.vert

@@ -0,0 +1,12 @@
+precision mediump float;
+
+attribute vec2 position;
+
+uniform float width;
+uniform float height;
+uniform float pointSize;
+
+void main() {
+    gl_Position = vec4(2.0*position.x/width - 1.0, 1.0 - 2.0*position.y/height, 0.0, 1.0);
+    gl_PointSize = pointSize;
+}

package/src/renderer/create_gl_program.js

@@ -0,0 +1,36 @@
+/**
+ * Creates a webgl program, linking the shaders and checking for errors
+ *
+ * @param gl
+ * @param vertShaderSource
+ * @param fragShaderSource
+ * @return {WebGLProgram}
+ */
+export default function createGLProgram(gl, vertShaderSource, fragShaderSource) {
+    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+    gl.shaderSource(vertexShader, vertShaderSource);
+    gl.compileShader(vertexShader);
+    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
+        console.error(gl.getShaderInfoLog(vertexShader)); // eslint-disable-line no-console
+    }
+
+    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+    gl.shaderSource(fragmentShader, fragShaderSource);
+    gl.compileShader(fragmentShader);
+    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+        console.error(gl.getShaderInfoLog(fragmentShader)); // eslint-disable-line no-console
+    }
+
+    const program = gl.createProgram();
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+
+    gl.linkProgram(program);
+    gl.validateProgram(program);
+
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        console.error(gl.getProgramInfoLog(program)); // eslint-disable-line no-console
+    }
+
+    return program;
+}

package/src/renderer/draw_area.js

@@ -0,0 +1,159 @@
+import pathsFrom from './paths_from';
+import {drawZeroLine} from './draw_zero_line';
+import {DPI_INCREASE} from './size_canvas';
+
+/**
+ * Draws the data on the canvas
+ * Assumes the data is in individual point render space, ie x and y in pixels
+ *
+ * @param {Array<[number, number]>} individualPoints - data to draw
+ * @param {Object} dataInRenderSpace
+ * @param {Object} options                           - set of options
+ * @param {Object} options.context                   - the context to draw on
+ * @param {String} options.color                     - color of the bar to draw
+ * @param {{renderWidth: Number, renderHeight: Number}} options.sizing - size of the canvas, in pixels
+ * @param {Number} options.zero                      - y coordinate that represents "zero"
+ * @param {Boolean} options.hasNegatives             - if any values are negative (in which case should render from zero)
+ * @param {Array<String>} [options.gradient]         - an array of stops, from top to bottom of canvas, to draw with
+ * @param {String} [options.zeroColor]               - color of the zero line
+ * @param {Number} [options.zeroWidth]               - width of the zero line
+ * @param {Boolean} [options.showIndividualPoints]   - draw circles at each point
+ * @param {String} [options.negativeColor]           - color of the area below zero
+ * @param {Number} [options.width]                  - line width
+ * @private
+ */
+export default function drawArea(individualPoints, dataInRenderSpace, {
+    color, context, sizing, zero, hasNegatives, gradient,
+    zeroColor, zeroWidth, showIndividualPoints, negativeColor, pointRadius, width, highlighted,
+    shadowColor='black', shadowBlur=5
+}) {
+    context.fillStyle = color;
+    context.shadowColor = shadowColor;
+    context.shadowBlur = shadowBlur;
+
+    if (gradient && gradient.length > 2) {
+        const globalGradient = context.createLinearGradient(0, 0, 0, sizing.renderHeight);
+
+        for (let i = 0; i < gradient.length; i++) {
+            const value = gradient[i];
+            if (Array.isArray(value)) {
+                globalGradient.addColorStop(value[0], value[1]);
+            } else {
+                globalGradient.addColorStop(i / (gradient.length - 1), value);
+            }
+        }
+
+        context.fillStyle = globalGradient;
+
+        if (color === 'gradient') {
+            context.strokeStyle = globalGradient;
+        }
+    } else {
+        context.fillStyle = color;
+    }
+
+    if (!individualPoints.length) {
+        return;
+    }
+
+    // we want to draw a polygon with a flat line at areaBottom, and then follows the shape of the data
+    const areaBottom = hasNegatives ? zero : sizing.renderHeight;
+
+    const areaPaths = pathsFrom(dataInRenderSpace);
+    const linePaths = pathsFrom(dataInRenderSpace, {
+        splitAtY: zero
+    });
+
+    for (let path of areaPaths) {
+        context.beginPath();
+
+        const [firstX, _startY] = path[0];
+        const [lastX, _lastY] = path[path.length - 1];
+
+        context.moveTo(firstX, areaBottom);
+
+        for (let i = 0; i < path.length; i++) {
+            const [x, y] = path[i];
+            context.lineTo(x, y);
+        }
+
+        context.lineTo(lastX, areaBottom);
+
+        context.fill();
+    }
+
+    if (highlighted) {
+        width += 2;
+    }
+
+    width *= DPI_INCREASE;
+    context.strokeStyle = color;
+    context.lineWidth = width;
+    // context.shadowBlur = 1;
+
+    for (let path of linePaths) {
+        if (!path.length) {
+            continue;
+        }
+
+        if (hasNegatives) {
+            let positive = true;
+            if (path.length >= 2) {
+                positive = path[1][1] <= zero;
+            } else {
+                positive = path[0][1] <= zero;
+            }
+
+            if (positive) {
+                context.strokeStyle = color;
+            } else {
+                context.strokeStyle = negativeColor;
+            }
+        }
+
+        context.beginPath();
+
+        for (let i = 0; i < path.length; i++) {
+            const [x, y] = path[i];
+
+            if (i === 0) {
+                context.moveTo(x, y);
+            } else {
+                context.lineTo(x, y);
+            }
+        }
+
+        context.stroke();
+    }
+
+    if (zeroWidth) {
+        drawZeroLine(areaBottom, {
+            context,
+            sizing,
+            color,
+            zero,
+            zeroColor,
+            zeroWidth
+        });
+    }
+
+    if (showIndividualPoints) {
+        context.fillStyle = color;
+
+        for (let [x, y] of individualPoints) {
+            if (negativeColor && hasNegatives) {
+                if (y === zero && zeroColor) {
+                    context.fillStyle = zeroColor;
+                } else if (y < zero) {
+                    context.fillStyle = color;
+                } else {
+                    context.fillStyle = negativeColor;
+                }
+            }
+
+            context.beginPath();
+            context.arc(x, y,  pointRadius ||8, 0, 2 * Math.PI, false);
+            context.fill();
+        }
+    }
+}

package/src/renderer/draw_background.js

@@ -0,0 +1,15 @@
+/**
+ * Draws the background on a 2d canvas
+ *
+ * @param {Array<{ minXt: number, maxXt: number, color: string }>} data
+ * @param {CanvasRenderingContext2D} context
+ */
+export default function drawBackground({ data }, { context }) {
+    const width = context.canvas.width;
+    const height = context.canvas.height;
+
+    for (let { minXt, maxXt, color } of data) {
+        context.fillStyle = color;
+        context.fillRect(minXt*width, 0, (maxXt - minXt)*width, height);
+    }
+}