@windborne/grapher 1.0.0

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@windborne/grapher",
+  "version": "1.0.0",
+  "description": "Graphing library",
+  "main": "bundle.js",
+  "publishConfig": {},
+  "scripts": {
+    "lint-base": "eslint ./src ./examples ./test",
+    "lint": "npm run lint-base -- --fix",
+    "dev": "webpack-dev-server --config webpack.dev.config.js",
+    "build": "rm -f *.wasm && webpack --config webpack.prod.config.js && touch src/rust/pkg/.npmignore",
+    "analyze-size": "webpack --config webpack.prod.config.js --json | webpack-bundle-size-analyzer",
+    "test": "mocha-webpack --webpack-config webpack.test.config.js --require test/setup.js --recursive --glob \"*.test.js\" test",
+    "coverage": "NODE_ENV=coverage nyc --reporter=lcov --reporter=text npm run test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/windborne/grapher.git"
+  },
+  "author": "",
+  "license": "UNLICENSED",
+  "bugs": {
+    "url": "https://github.com/windborne/grapher/issues"
+  },
+  "nyc": {
+    "include": [
+      "src/**/*.js"
+    ],
+    "instrument": false,
+    "sourceMap": false
+  },
+  "browserslist": [
+    "last 2 Chrome versions"
+  ],
+  "homepage": "https://github.com/windborne/grapher/readme.md",
+  "devDependencies": {
+    "@babel/core": "^7.7.5",
+    "@babel/polyfill": "^7.7.0",
+    "@babel/preset-env": "^7.7.6",
+    "@babel/preset-react": "^7.7.4",
+    "@wasm-tool/wasm-pack-plugin": "^1.2.0",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.0.6",
+    "chai": "^4.2.0",
+    "css-loader": "^6.8.1",
+    "eslint": "^6.7.2",
+    "eslint-plugin-react": "^7.17.0",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.6.0",
+    "istanbul-instrumenter-loader": "^3.0.1",
+    "jsdom": "^16.3.0",
+    "jsdom-global": "^3.0.2",
+    "kefir": "^3.8.6",
+    "mocha": "^7.2.0",
+    "mocha-webpack": "^2.0.0-beta.0",
+    "nyc": "^15.1.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "sass": "^1.68.0",
+    "sass-loader": "^13.3.2",
+    "sinon": "^9.0.2",
+    "sinon-chai": "^3.5.0",
+    "style-loader": "^3.3.3",
+    "util": "^0.12.5",
+    "webpack": "^5.9.1",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.15.2",
+    "webpack-glsl-loader": "^1.0.1",
+    "webpack-node-externals": "^2.5.0"
+  },
+  "peerDependencies": {
+    "react": ">= 16.8"
+  }
+}

package/readme.md

@@ -0,0 +1,129 @@
+
+# Grapher
+Powerful, performant graphing.
+
+Grapher is designed primarily for internal infrastructure with lots of data and lots of axes. 
+Key features include:
+ - Performance. Grapher can render a million points in 100ms and support new data coming in at hundreds of points per second without degraded performance.
+ - Async data sources. Grapher supports observables directly as well as generator functions to generate data on the fly
+ - Axis management. Series can be moved between axes and new axes created with ease.
+ - Long data ranges.
+
+You _shouldn't_ use this package if:
+ - You need to support older browsers. While it may work in older browsers, no guarantees are made. 
+   New features will be used as they become available without regard for maintaining legacy support. 
+ - You don't want to add a react dependency (though the rendering engine may be used without react). 
+ - Asset size is a big concern. Despite not having dependencies, this is a relatively heavy engine compared to alternatives.
+
+## As a user
+
+### Range selection
+
+### Axes
+
+### Tooltips
+
+### Options
+Percentile
+
+Auto-scale Y
+
+## As a developer
+
+### Installing
+
+The package is hosted on github, so things are marginally more tricky than usual.
+Add an .npmrc with the following contents:
+```
+@windborne:registry=https://npm.pkg.github.com
+registry=https://registry.npmjs.org
+```
+
+Then, `npm install @windborne/grapher`.
+
+It also requires React version 16.8 or greater as a peer dependency
+
+### Importing
+The simplest option is to import it from the root. 
+```ecmascript 6
+import Grapher from '@windborne/grapher';
+```
+
+This uses the webpacked version and allows you to not worry about any other dependencies.
+However, since relative imports won't work, neither will the optional WASM extensions.
+For most applications, WASM extensions won't be necessary, but if there are strong performance 
+requirements, you should consider them.
+
+#### Importing with WASM extensions
+To use the Rust WASM extensions, you should import the component itself.
+```ecmascript 6
+import Grapher from '@windborne/grapher/src/grapher';
+```
+
+However, this will require that you have the dependencies needed to build the whole project. 
+You can find a full list in the package.json devDependencies, but they can be summarized as follows:
+ - React and babel (include @babel/polyfill, @babel/preset-react, etc). You likely already have this in your project
+ - Sass support (eg node-sass, sass-loader)
+ - Webgl loader (webpack-glsl-loader)
+ 
+### props
+Like any react component, grapher is primarily configured via props.
+Refer to the grapher proptypes for information
+
+**series**. This sets the data for the graph and is the only property that is truly required.
+See passing in data section for more details.
+
+**webgl**. If true, will render with webgl rather than a 2d context. 
+This is more performant, but uses more resources.
+
+**requireWASM**. If true, will wait until the WASM extensions are ready before it renders.
+This can be useful when your app has expensive initialization.
+
+**onAxisChange**. If passed in, this function will be called every time the axes change.
+It will be called with an array of objects, where each object is a single series object with the `axis`
+property set to {left, right}-{index}. This can be useful for saving state between reloads.
+
+**onRenderTime**. If passed in, this function will be called every time the grapher renders.
+It will be called with diagnostic information about how long rendering took.
+
+**timingFrameCount**. This will set the number of frames for when the state controller's 
+`averageLoopTime` method is called.
+
+**theme**. Sets the theme of grapher to either day or night. 
+You can also override any css property directly in a stylesheet.
+
+**bodyHeight**. Sets the height of the graph body (ie excluding range graph, series controls, etc).
+
+**height**. Sets the height of the entire graph.
+
+**width**. Sets the width of the graph.
+
+**showAxes**. Whether to show the axes on the graph.
+
+**showRangeGraph**. Whether to show the smaller range graph below the main graph.
+
+**showRangeSelectors**. Whether to show the top bar with range selection (eg last day button) and other options.
+
+**showSeriesKey**. Whether to show the key of which series have which colors.
+
+**showGrid**
+
+**showTooltips**
+
+**boundsSelectionEnabled**
+
+**tooltipOptions**
+
+**customBoundsSelectors** 
+
+### Usage from ruby
+
+### Usage from python
+
+## Developing
+Other than an `npm install`, you'll need to install rust and [wasm-pack](https://rustwasm.github.io/wasm-pack/installer/).
+
+## License
+All rights reserved.
+
+This library uses icons from FontAwesome, licensed via https://fontawesome.com/license. No changes were made, nor does Font Awesome endorse this use.

package/src/components/annotations.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class Annotations extends React.PureComponent {
+
+    render() {
+        const { bodyHeight, annotationState } = this.props;
+        const { annotations, elementWidth } = annotationState;
+
+        return (
+            <div className="grapher-annotations">
+                {
+                    annotations.map(({ pixelX, width, content, lineOnly }, i) => {
+                        if (lineOnly) {
+                            return (
+                                <div key={i} className="grapher-annotation" style={{ left: pixelX }}>
+                                    <div
+                                        className="annotation-marker"
+                                        style={{ width: width, height: bodyHeight }}
+                                    />
+                                </div>
+                            );
+                        }
+
+                        const textStyle = {
+                            top: 21*i
+                        };
+
+                        if (elementWidth - pixelX < content.length*5.5) {
+                            textStyle.left = pixelX - elementWidth;
+                        } else {
+                            textStyle.left = 0;
+                        }
+
+                        return (
+                            <div key={i} className="grapher-annotation" style={{ left: pixelX }}>
+                                <div
+                                    className="annotation-marker"
+                                    style={{ width: width, height: bodyHeight }}
+                                />
+
+                                <div className="annotation-text" style={textStyle}>
+                                    {content}
+                                </div>
+                            </div>
+                        );
+                    })
+                }
+            </div>
+        );
+    }
+
+}
+
+Annotations.propTypes = {
+    annotationState: PropTypes.shape({
+        annotations: PropTypes.arrayOf(PropTypes.object).isRequired,
+        elementWidth: PropTypes.number.isRequired
+    }),
+    bodyHeight: PropTypes.number,
+    lineOnly: PropTypes.bool
+};

package/src/components/context_menu.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class ContextMenu extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.setTextRef = this.setTextRef.bind(this);
+    }
+    
+    setTextRef(ref) {
+        this.textRef = ref;
+
+        if (this.props.contextMenu.showing && this.textRef) {
+            const range = document.createRange();
+            const selection = window.getSelection();
+
+            selection.removeAllRanges();
+
+            range.selectNodeContents(this.textRef);
+            selection.addRange(range);
+            this.textRef.focus();
+        }
+    }
+    
+    formatDateTime(dateTimeStr) {
+        const [datePart, timePart] = dateTimeStr.split(', ');
+
+        const [month, day, year] = datePart.split('/');
+        const formattedDate = `${month.padStart(2, '0')}/${day.padStart(2, '0')}/${year}`;
+
+        const [time, period] = timePart.split(' ');
+        const [hours, minutes] = time.split(':');
+        const formattedHours = hours.padStart(2, '0');
+        const formattedTime = `${formattedHours}:${minutes} ${period}`;
+
+        return `${formattedDate} ${formattedTime}`;
+    }
+    
+    render() {
+        const { x, y, showing, value } = this.props.contextMenu;
+
+        const style = { left: x, top: y, width: '150px'};
+        
+        if (!showing || !value || value.toLocaleString() === 'Invalid Date') {
+            return null;
+        }
+
+        const displayValue = value instanceof Date ? this.formatDateTime(value.toLocaleString()) : value;
+        return (
+            <div className="grapher-context-menu" style={style}>
+                <div className="menu-item">
+                    <div className="menu-text" autoFocus={true} ref={this.setTextRef}>
+                        {displayValue}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+}
+
+ContextMenu.propTypes = {
+    contextMenu: PropTypes.shape({
+        x: PropTypes.number.isRequired,
+        y: PropTypes.number.isRequired,
+        showing: PropTypes.bool.isRequired,
+        value: PropTypes.oneOfType([
+            PropTypes.instanceOf(Date),
+            PropTypes.number,
+            PropTypes.object
+        ])
+    }).isRequired
+};

package/src/components/draggable_points.js

@@ -0,0 +1,114 @@
+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 {LINE_COLORS} from '../helpers/colors.js';
+import {useAxisBounds, useSizing} from '../state/hooks.js';
+
+export default React.memo(DraggablePoints);
+
+function DraggablePoints({ stateController, draggablePoints, onPointDrag, onDraggablePointsDoubleClick }) {
+    const bounds = useAxisBounds(stateController)[0];
+    const sizing = useSizing(stateController);
+
+    if (!sizing) {
+        return null;
+    }
+
+    const onPointlessDoubleClick = onDraggablePointsDoubleClick && ((event) => {
+        const newXT = (event.clientX - sizing.boundingRect.left)/sizing.elementWidth;
+        const newYT = 1 - (event.clientY - sizing.boundingRect.top)/sizing.elementHeight;
+
+        onDraggablePointsDoubleClick(event, {
+            x: newXT*(bounds.maxX - bounds.minX) + bounds.minX,
+            y: newYT*(bounds.maxY - bounds.minY) + bounds.minY
+        });
+    });
+
+    return (
+        <div className="grapher-draggable-points" onDoubleClick={onPointlessDoubleClick}>
+            <svg width={sizing.elementWidth} height={sizing.elementHeight}>
+                {
+                    draggablePoints.map((point, index) => {
+                        const xT = (point.x - bounds.minX)/(bounds.maxX - bounds.minX);
+                        const yT = (1 - (point.y - bounds.minY)/(bounds.maxY - bounds.minY));
+
+                        if (xT < 0 || xT > 1 || yT < 0 || yT > 1) {
+                            return null;
+                        }
+
+                        const pixelX = xT * sizing.elementWidth;
+                        const pixelY = yT * sizing.elementHeight;
+
+                        const radius = point.radius || 5;
+                        const fillColor = point.fillColor || LINE_COLORS[0];
+                        const strokeColor = point.strokeColor || 'white';
+                        const strokeWidth = point.strokeWidth || 1;
+
+                        const onMouseDown = (event) => {
+                            event.stopPropagation();
+
+                            if (!onPointDrag) {
+                                return;
+                            }
+
+                            const xOffset = pixelX - event.clientX;
+                            const yOffset = pixelY - event.clientY;
+
+                            const onMouseMove = (moveEvent) => {
+                                const newXT = (moveEvent.clientX + xOffset)/sizing.elementWidth;
+                                const newYT = 1 - (moveEvent.clientY + yOffset)/sizing.elementHeight;
+
+                                onPointDrag({
+                                    index,
+                                    point,
+                                    x: newXT*(bounds.maxX - bounds.minX) + bounds.minX,
+                                    y: newYT*(bounds.maxY - bounds.minY) + bounds.minY
+                                }, moveEvent);
+                            };
+
+                            const onMouseUp = () => {
+                                window.removeEventListener('mousemove', onMouseMove);
+                                window.removeEventListener('mouseup', onMouseUp);
+                            };
+
+                            window.addEventListener('mousemove', onMouseMove);
+                            window.addEventListener('mouseup', onMouseUp);
+                        };
+
+                        const onClick = point.onClick && ((event) => {
+                            point.onClick(event, point);
+                        });
+
+                        const onDoubleClick = point.onDoubleClick && ((event) => {
+                            event.stopPropagation();
+                            point.onDoubleClick(event, point);
+                        });
+
+                        return (
+                            <circle
+                                key={index}
+                                cx={pixelX}
+                                cy={pixelY}
+                                r={radius}
+                                fill={fillColor}
+                                stroke={strokeColor}
+                                strokeWidth={strokeWidth}
+                                onMouseDown={onMouseDown}
+                                onClick={onClick}
+                                onDoubleClick={onDoubleClick}
+                            />
+                        );
+                    })
+                }
+            </svg>
+        </div>
+    );
+}
+
+DraggablePoints.propTypes = {
+    stateController: PropTypes.instanceOf(StateController).isRequired,
+    draggablePoints: CustomPropTypes.DraggablePoints.isRequired,
+    onPointDrag: PropTypes.func,
+    onDraggablePointsDoubleClick: PropTypes.func
+};