@windborne/grapher 1.0.0

package/src/renderer/draw_bars.js

@@ -0,0 +1,80 @@
+import {drawZeroLine} from './draw_zero_line';
+
+/**
+ * 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} 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.indexInAxis               - index of the series in the axis
+ * @param {Number} options.axisSeriesCount           - number of series in the axis
+ * @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 {String} options.negativeColor             - color of the bar to draw if negative
+ * @param {String} options.zeroColor                 - color of the zero line
+ * @param {Number} options.zeroWidth                 - width of the zero line
+ * @param {Number} options.closestSpacing            - closest x spacing between points, in data space
+ * @param {{minX: Number, maxX: Number}} options.bounds - bounds of the data as rendered
+ * @private
+ */
+export default function drawBars(individualPoints, {
+    color, context, sizing, indexInAxis, axisSeriesCount, zero, hasNegatives, negativeColor, zeroColor, zeroWidth, closestSpacing, bounds
+}) {
+    context.strokeStyle = color;
+    context.fillStyle = color;
+
+    const {barWidth, totalBarWidth} = getBarWidths({ closestSpacing, bounds, sizing, axisSeriesCount });
+    const barBottom = hasNegatives ? zero : sizing.renderHeight;
+
+    for (let i = 0; i < individualPoints.length; i++) {
+        const [x, y] = individualPoints[i];
+
+        if (hasNegatives) {
+            if (y <= zero) {
+                context.fillStyle = color;
+            } else {
+                context.fillStyle = negativeColor;
+            }
+        }
+
+        context.fillRect(x - totalBarWidth / 2 + barWidth*indexInAxis, y, barWidth, barBottom-y);
+    }
+
+    if (zeroWidth) {
+        drawZeroLine(barBottom, {
+            context,
+            sizing,
+            color,
+            zero,
+            zeroColor,
+            zeroWidth
+        });
+    }
+}
+
+/**
+ * Calculates the widths of the bars
+ *
+ * @param {Number} closestSpacing - closest x spacing between points, in data space
+ * @param {{minX: Number, maxX: Number}} bounds - bounds of the data as rendered
+ * @param {{renderWidth: Number, renderHeight: Number}} sizing - size of the canvas, in pixels
+ * @param {Number} axisSeriesCount - number of series in the axis
+ * @return {{barWidth: Number, totalBarWidth: Number, barSpacing: Number}}
+ */
+export function getBarWidths({closestSpacing, bounds, sizing, axisSeriesCount}) {
+    // width of bar plus spacing, which we define as the closest distance between points in pixel space
+    const fullBarWidth = closestSpacing / (bounds.maxX - bounds.minX) * sizing.renderWidth;
+
+    const totalBarWidth = fullBarWidth * 0.8;
+    const barSpacing = fullBarWidth * 0.2;
+    const barWidth = totalBarWidth / axisSeriesCount;
+
+    return {
+        barWidth,
+        totalBarWidth,
+        barSpacing
+    };
+}

package/src/renderer/draw_line.js

@@ -0,0 +1,69 @@
+import {DPI_INCREASE} from './size_canvas';
+import pathsFrom from './paths_from';
+
+/**
+ * Draws the data on the canvas
+ * Assumes the data is in render space
+ *
+ * @param {{nullMask: Uint8Array, maxYValues: Float64Array, minYValues: Float64Array, yValues: Float64Array}} dataInRenderSpace    - the data to render
+ * @param {Object} options                          - set of options
+ * @param {Object} options.context                  - the context to draw on
+ * @param {String} options.color                    - color of the line to draw
+ * @param {Number} [options.width]                  - line width
+ * @param {Number} [options.shadowBlur]             - level to blur shadow to
+ * @param {String} [options.shadowColor]            - color of the shadow
+ * @param {String} [options.dashed]                 - whether or not to make the line dashed
+ * @param {Array<Number>} [options.dashPattern]     - dash array for the canvas
+ * @param {Boolean} [options.highlighted]           - whether the line is highlighted or not
+ * @param {Boolean} [options.showIndividualPoints]  - draw circles at each point
+ * @param {Function} [options.getIndividualPoints]  - points to draw circles at. Only called when needed.
+ * @private
+ */
+export default function drawLine(dataInRenderSpace, {
+    color, width=1, context, shadowColor='black', shadowBlur=5, dashed=false, dashPattern=null, highlighted=false, showIndividualPoints=false, getIndividualPoints
+}) {
+    if (highlighted) {
+        width += 2;
+    }
+    width *= DPI_INCREASE;
+
+    context.strokeStyle = color;
+    context.lineWidth = width;
+    context.shadowColor = shadowColor;
+    context.shadowBlur = shadowBlur;
+
+    if (dashed) {
+        context.setLineDash(dashPattern || [5, 5]);
+    } else {
+        context.setLineDash([]);
+    }
+
+    const paths = pathsFrom(dataInRenderSpace);
+
+    for (let path of paths) {
+        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 (showIndividualPoints) {
+        context.fillStyle = color;
+        const individualPoints = getIndividualPoints();
+
+        for (let [x, y] of individualPoints) {
+            context.beginPath();
+            context.arc(x, y, width + 4, 0, 2 * Math.PI, false);
+            context.fill();
+        }
+    }
+}

package/src/renderer/draw_zero_line.js

@@ -0,0 +1,24 @@
+/**
+ * Draws a horizontal line at the specified y-coordinate.
+ *
+ * @param {Number} y
+ * @param {Object} options
+ * @param {CanvasRenderingContext2D} options.context
+ * @param {{renderWidth: Number, renderHeight: Number}} options.sizing
+ * @param {String} options.color
+ * @param {String} options.zeroColor
+ * @param {Number} options.zeroWidth
+ */
+export function drawZeroLine(y, { context, sizing, color, zeroColor, zeroWidth}) {
+    if (!zeroWidth) {
+        return;
+    }
+
+    context.strokeStyle = zeroColor || color;
+    context.lineWidth = zeroWidth;
+
+    context.beginPath();
+    context.moveTo(0, y);
+    context.lineTo(sizing.renderWidth, y);
+    context.stroke();
+}

package/src/renderer/extract_vertices.js

@@ -0,0 +1,137 @@
+import pathsFrom from './paths_from';
+import {DPI_INCREASE} from './size_canvas';
+let RustAPI;
+import('../rust/pkg/index.js').then((module) => {
+    RustAPI = module;
+});
+
+/**
+ *
+ * @param {[[Number]]} paths
+ * @param {Boolean} dashed
+ * @param {Array} dashPattern
+ * @return {{prevPositions: Float32Array, indices: Uint32Array, vertices: Float32Array, positions: Float32Array}}
+ */
+export function extractVerticesFromPaths(paths, { dashed, dashPattern }) {
+    let pointNumber = 0;
+    for (let path of paths) {
+        if (dashed) {
+            for (let i = 0; i < path.length; i++) {
+                if (dashed && i % (dashPattern[0] + dashPattern[1]) >= dashPattern[0]) {
+                    continue;
+                }
+                pointNumber++;
+            }
+        } else {
+            pointNumber += path.length;
+        }
+    }
+
+    const positions = new Float32Array(pointNumber*8);
+    const prevPositions = new Float32Array(pointNumber*8);
+    const vertices = new Float32Array(pointNumber*4);
+    const indices = new Uint32Array(pointNumber*6);
+
+    if (pointNumber > 0) {
+        const verticesPattern = new Float32Array([0, 1, 2, 3]);
+        vertices.set(verticesPattern);
+        let vertexPointer = verticesPattern.length;
+        let sourceLength = verticesPattern.length;
+        while (vertexPointer < vertices.length) {
+            if (vertexPointer + sourceLength > vertices.length) {
+                sourceLength = vertices.length - vertexPointer;
+            }
+
+            vertices.copyWithin(vertexPointer, 0, sourceLength);
+            vertexPointer += sourceLength;
+            sourceLength <<= 1;
+        }
+    }
+
+    let pointI = 0;
+    for (let path of paths) {
+        for (let i = 0; i < path.length; i++) {
+            if (dashed && i % (dashPattern[0] + dashPattern[1]) >= dashPattern[0]) {
+                continue;
+            }
+
+            const [x, y] = path[i];
+
+            let prevX, prevY;
+
+            if (i === 0) {
+                prevX = x - 1;
+                prevY = y;
+            } else {
+                [prevX, prevY] = path[i - 1];
+            }
+
+            for (let j = 0; j < 4; j++) {
+                positions[pointI * 8 + 2 * j] = x;
+                positions[pointI * 8 + 2 * j + 1] = y;
+                prevPositions[pointI * 8 + 2 * j] = prevX;
+                prevPositions[pointI * 8 + 2 * j + 1] = prevY;
+            }
+
+            indices[pointI * 6] = pointI * 4;
+            indices[pointI * 6 + 1] = pointI * 4 + 1;
+            indices[pointI * 6 + 2] = pointI * 4 + 3;
+
+            indices[pointI * 6 + 3] = pointI * 4;
+            indices[pointI * 6 + 4] = pointI * 4 + 2;
+            indices[pointI * 6 + 5] = pointI * 4 + 3;
+
+            pointI++;
+        }
+    }
+
+    return {
+        positions,
+        prevPositions,
+        vertices,
+        indices
+    };
+}
+
+/**
+ * Takes the paths and turns them into what's needed for the line webgl program
+ *
+ * @param {{nullMask: Uint8Array, maxYValues: Float64Array, minYValues: Float64Array, yValues: Float64Array, paths?: [[Number]]}} dataInRenderSpace
+ * @param {Boolean} dashed
+ * @param {Array} dashPattern
+ * @return {{prevPositions: Float32Array, indices: Uint32Array, vertices: Float32Array, positions: Float32Array}}
+ */
+export default function extractVertices(dataInRenderSpace, { dashed, dashPattern }) {
+    if (dataInRenderSpace.paths) {
+        return extractVerticesFromPaths(dataInRenderSpace.paths, { dashed, dashPattern});
+    }
+
+    if (!RustAPI) {
+        const paths = pathsFrom(dataInRenderSpace);
+        return extractVerticesFromPaths(paths, { dashed, dashPattern});
+    }
+
+    const pointNumber = RustAPI.get_point_number(
+        dataInRenderSpace.nullMask, dataInRenderSpace.yValues, dataInRenderSpace.minYValues, dataInRenderSpace.maxYValues,
+        dashed, dashPattern[0], dashPattern[1]
+    );
+
+    let positions = new Float32Array(pointNumber*8);
+    let prevPositions = new Float32Array(pointNumber*8);
+    let vertices = new Float32Array(pointNumber*4);
+    let indices = new Uint32Array(pointNumber*6);
+
+    RustAPI.extract_vertices(
+        DPI_INCREASE,
+        dataInRenderSpace.nullMask, dataInRenderSpace.yValues, dataInRenderSpace.minYValues, dataInRenderSpace.maxYValues,
+        positions, prevPositions, vertices, indices,
+        dashed, dashPattern[0], dashPattern[1]
+    );
+
+    return {
+        positions,
+        prevPositions,
+        vertices,
+        indices
+    };
+}

package/src/renderer/graph_body_renderer.js

@@ -0,0 +1,293 @@
+import sizeCanvas from './size_canvas';
+import getColor from '../helpers/colors';
+import LineProgram from './line_program';
+import drawLine from './draw_line';
+import Eventable from '../eventable';
+import drawBackground from './draw_background.js';
+import BackgroundProgram from './background_program.js';
+import drawBars from './draw_bars';
+import drawArea from './draw_area';
+
+export default class GraphBodyRenderer extends Eventable {
+
+    constructor({stateController, canvasElement, webgl=false, checkIntersection=true }) {
+        super();
+
+        this._stateController = stateController;
+
+        this._checkIntersection = checkIntersection;
+        this._canvas = canvasElement;
+        this._webgl = webgl;
+        if (webgl) {
+            this._context = this._canvas.getContext('webgl');
+            if (this._context) {
+                this._lineProgram = new LineProgram(this._context);
+            } else {
+                alert('WebGL failed! Attempting fallback to CPU rendering');
+                this._webgl = false;
+            }
+        }
+
+        if (!this._webgl) {
+            this._context = this._canvas.getContext( '2d');
+            this._context2d = this._context;
+        }
+
+        this._initialized = this._initializeCanvas();
+
+        this._boundResize = this.resize.bind(this);
+        this._cachedAxisCount = null;
+        this._onAxisChange = (axes) => {
+            const count = axes.filter(({ series }) => series.length > 0).length;
+            if (this._cachedAxisCount !== count) {
+                this._cachedAxisCount = count;
+                this.resize();
+            }
+        };
+
+        stateController.on('axes_changed', this._onAxisChange);
+        stateController.on('dragging_y_changed', this._boundResize);
+        stateController.on('showing_sidebar_changed', this._boundResize);
+    }
+
+    /**
+     * Cleans up after this renderer
+     */
+    dispose() {
+        this.clearListeners();
+        this._lineProgram && this._lineProgram.dispose();
+        this._cachedAxisCount = null;
+        this._stateController.off('axes_changed', this._onAxisChange);
+        this._stateController.off('dragging_y_changed', this._boundResize);
+
+        if (this._resizeObserver) {
+            this._resizeObserver.disconnect();
+        }
+
+        if (this._intersectionObserver) {
+            this._intersectionObserver.disconnect();
+        }
+    }
+
+    clear() {
+        if (this._webgl) {
+            this._lineProgram.clear();
+        } else {
+            this._context.clearRect(0, 0, this._context.canvas.width, this._context.canvas.height);
+        }
+    }
+
+    render(singleSeries, inRenderSpace, { highlighted, showIndividualPoints, shadowColor, shadowBlur, width, defaultLineWidth, bounds, globalBounds }) {
+        const getIndividualPoints = (useDataSpace) => {
+            if (!bounds) {
+                bounds = singleSeries.axis.currentBounds;
+            }
+
+            const individualPoints = [];
+            let data = singleSeries.inSelectedSpace.data;
+            if (useDataSpace) {
+                data = singleSeries.inDataSpace;
+            }
+
+            for (let [x, y] of data) {
+                if (y === null) {
+                    continue;
+                }
+
+                individualPoints.push([
+                    (x - bounds.minX) / (bounds.maxX - bounds.minX) * this._sizing.renderWidth,
+                    (1.0 - (y - bounds.minY) / (bounds.maxY - bounds.minY)) * this._sizing.renderHeight
+                ]);
+            }
+
+            return individualPoints;
+        };
+
+        const cpuRendering = singleSeries.rendering === 'bar' || singleSeries.rendering === 'area';
+        let commonCPUParams;
+
+        if (cpuRendering) {
+            // we can currently only render bars with the CPU
+            this._context2d = this._context2d || this._canvas.getContext('2d');
+
+            if (this._webgl) {
+                // make sure we don't have any webgl stuff in the way before we get back to CPU rendering
+                this._context.flush();
+            }
+
+            if (!bounds) {
+                bounds = singleSeries.axis.currentBounds;
+            }
+
+            commonCPUParams = {
+                context: this._context2d,
+                color: getColor(singleSeries.color, singleSeries.index, singleSeries.multigrapherSeriesIndex),
+                sizing: this._sizing,
+                zero: (1.0 - (0 - bounds.minY) / (bounds.maxY - bounds.minY)) * this._sizing.renderHeight,
+                hasNegatives: !!singleSeries.inDataSpace.find((tuple) => tuple[1] < 0),
+                negativeColor: singleSeries.negativeColor,
+                zeroWidth: singleSeries.zeroLineWidth,
+                zeroColor: singleSeries.zeroLineColor
+            };
+        }
+
+        if (singleSeries.rendering === 'bar') {
+            drawBars(getIndividualPoints(true), {
+                ...commonCPUParams,
+                indexInAxis: singleSeries.axis.series.indexOf(singleSeries),
+                axisSeriesCount: singleSeries.axis.series.length,
+                closestSpacing: globalBounds.closestSpacing,
+                bounds
+            });
+            return;
+        }
+
+        if (singleSeries.rendering === 'area') {
+            drawArea(getIndividualPoints(true), inRenderSpace, {
+                ...commonCPUParams,
+                showIndividualPoints: typeof singleSeries.showIndividualPoints === 'boolean' ? singleSeries.showIndividualPoints : showIndividualPoints,
+                gradient: singleSeries.gradient,
+                pointRadius: singleSeries.pointRadius,
+                highlighted,
+                width: width || singleSeries.width || defaultLineWidth,
+                shadowColor,
+                shadowBlur
+            });
+            return;
+        }
+
+        const drawParams = {
+            color: getColor(singleSeries.color, singleSeries.index, singleSeries.multigrapherSeriesIndex),
+            context: this._context,
+            width: width || singleSeries.width || defaultLineWidth,
+            shadowColor,
+            shadowBlur,
+            dashed: singleSeries.dashed,
+            dashPattern: singleSeries.dashPattern,
+            highlighted,
+            showIndividualPoints: typeof singleSeries.showIndividualPoints === 'boolean' ? singleSeries.showIndividualPoints : showIndividualPoints,
+            getIndividualPoints
+        };
+
+        if (this._webgl) {
+            this._lineProgram.draw(inRenderSpace, drawParams);
+        } else {
+            drawLine(inRenderSpace, drawParams);
+        }
+    }
+
+    renderBackground(inBackgroundSpace) {
+        if (!inBackgroundSpace) {
+            return;
+        }
+
+        if (this._webgl) {
+            if (!this._backgroundProgram) {
+                this._backgroundProgram = new BackgroundProgram(this._context);
+            }
+            
+            this._backgroundProgram.draw(inBackgroundSpace);
+        } else {
+            drawBackground(inBackgroundSpace, {
+                context: this._context
+            });
+        }
+    }
+
+    /**
+     * Initializes canvas
+     * Currently, just sets sizing
+     */
+    async _initializeCanvas() {
+        this._sizing = await sizeCanvas(this._canvas, this._context);
+
+        this.emit('size_changed', this._sizing);
+        this._stateController.markSizeChanged();
+
+        if (window.ResizeObserver) {
+            let first = true;
+            let disabled = false;
+
+            this._resizeObserver = new window.ResizeObserver(async () => {
+                if (first) { // always fires once at the beginning
+                    first = false;
+                    return;
+                }
+
+                if (disabled) {
+                    return;
+                }
+
+                disabled = true;
+                await this.resize();
+                disabled = false; // eslint-disable-line require-atomic-updates
+            });
+
+            this._resizeObserver.observe(this._canvas.parentNode);
+        }
+
+        if (this._checkIntersection && window.IntersectionObserver) {
+            this._intersectionObserver = new window.IntersectionObserver((entries) => {
+                clearTimeout(this._intersectionTimeout);
+
+                if (!entries[0].isIntersecting) {
+                    return;
+                }
+
+                this._intersectionTimeout = setTimeout(() => {
+                    this.resize();
+                }, 50);
+            }, {
+                threshold: 0.1
+            });
+
+            this._intersectionObserver.observe(this._canvas.parentNode);
+        }
+    }
+
+    async resize() {
+        const sizingPromise = sizeCanvas(this._canvas, this._context, { reset: true });
+        this._initialized = sizingPromise;
+
+        this._sizing = await this._initialized;
+        if (this._initialized !== sizingPromise) {
+            return;
+        }
+
+        this.emit('size_changed', this._sizing);
+        this._stateController.markSizeChanged(this);
+    }
+
+    resizeDebounced() {
+        if (this._resizeTimeout) {
+            clearTimeout(this._resizeTimeout);
+        }
+
+        this._resizeTimeout = setTimeout(() => {
+            this.resize();
+            this._resizeTimeout = null;
+        }, 50);
+    }
+
+    recalculatePosition() {
+        if (!this._sizing) {
+            return;
+        }
+
+        this._sizing.boundingRect = this._canvas.getBoundingClientRect();
+    }
+
+    /**
+     * Returns the bounding rect of the element
+     *
+     * @return {DOMRect}
+     */
+    get boundingRect() {
+        return this._sizing.boundingRect;
+    }
+
+    get sizing() {
+        return this._sizing;
+    }
+
+}

package/src/renderer/line.frag

@@ -0,0 +1,51 @@
+precision highp float;
+
+uniform vec4 color;
+uniform float thickness;
+uniform float shadowBlur;
+uniform vec4 shadowColor;
+
+varying vec2 position_vec;
+varying vec2 prev_position_vec;
+
+/**
+ * Calculate distance between point and line in screen space (ie, inputs in pixels, returns distance in pixels)
+ */
+float distance_from_line() {
+    float x0 = gl_FragCoord.x;
+    float y0 = gl_FragCoord.y;
+
+    // let line be defined by ax + by + c = 0;
+    float a, b, c;
+
+    if (position_vec.x == prev_position_vec.x) {
+        a = 1.0;
+        b = 0.0;
+        c = -position_vec.x;
+    } else {
+        float slope = (position_vec.y - prev_position_vec.y)/(position_vec.x - prev_position_vec.x);
+        float y_intercept = position_vec.y - slope*position_vec.x;
+
+        // y = slope*x + y_intercept
+        // (-slope)(x) + (1)(y) - y_intercept = 0;
+        a = -slope;
+        b = 1.0;
+        c = -y_intercept;
+    }
+
+    return abs(a*x0 + b*y0 + c)/length(vec2(a, b));
+}
+
+void main() {
+    vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
+
+    float dist = distance_from_line();
+
+    if (dist + shadowBlur >= thickness) {
+        float percent_shadowed = ((thickness - dist) / shadowBlur);
+        gl_FragColor = mix(transparent, shadowColor, percent_shadowed*percent_shadowed);
+    } else {
+        gl_FragColor = vec4(color);
+        gl_FragColor.rgb *= gl_FragColor.a;
+    }
+}

package/src/renderer/line.vert

@@ -0,0 +1,32 @@
+precision highp float;
+
+attribute vec2 position;
+attribute vec2 prevPosition;
+attribute float vertex;
+
+uniform float width;
+uniform float height;
+uniform float thickness;
+
+varying vec2 position_vec;
+varying vec2 prev_position_vec;
+
+void main() {
+    vec2 delta = position - prevPosition;
+    vec2 alpha = prevPosition;
+    vec2 beta = position;
+
+    vec2 normalized_delta = normalize(delta);
+    vec2 normal = vec2(-thickness/2.0 * normalized_delta.y, thickness/2.0 * normalized_delta.x);
+
+    vec2 vertex_position =
+        step(0.5, mod(vertex, 2.0))*alpha + // alpha if vertex is odd, 0 otherwise
+        step(0.5, mod(vertex + 1.0, 2.0))*beta + // beta if vertex is even, 0 otherwise
+        2.0*(step(1.5, vertex)-0.5)*normal // -normal if vertex < 2, +normal otherwise
+    ;
+
+    position_vec = vec2(position.x, height - position.y);
+    prev_position_vec = vec2(prevPosition.x, height - prevPosition.y);
+
+    gl_Position = vec4(2.0*vertex_position.x/width - 1.0, 1.0 - 2.0*vertex_position.y/height, 0.0, 1.0);
+}