Merge pull request #1 from camargo/ex

example in react, linting, refactor
camargo · Feb 25, 2017 · e6c272e · e6c272e
2 parents 9358dee + 25815df
commit e6c272e
Show file tree

Hide file tree

Showing 27 changed files with 485 additions and 325 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,3 @@
 node_modules
-dist
 *.log
+index.js
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ This is a Web Component that wraps [gl-plot2d](https://github.com/gl-vis/gl-plot
 
 ```
 npm install
-npm run build:dev
+npm run dev
 ```
 
 ## Average Draw Times

diff --git a/example/README.md b/example/README.md
@@ -0,0 +1 @@
+# Using gl-plot-2d in React
diff --git a/example/app.js b/example/app.js
@@ -0,0 +1,103 @@
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+
+import { getTicks } from 'gl-plot-2d';
+
+import { makePositions } from './utils';
+
+class App extends Component {
+
+ componentWillMount() {
+ const p1 = makePositions(1000);
+ const p2 = makePositions(100);
+
+ const trace1 = {
+ mode: 'line',
+ positions: p1.positions,
+ min: { x: p1.minX, y: p1.minY },
+ max: { x: p1.maxX, y: p1.maxY },
+ line: {
+ fill: [false, true, false, false],
+ fillColor: [[0, 0, 1, 0.5], [0, 0, 1, 0.5], [0, 0, 1, 0.5], [0, 0, 1, 0.5]],
+ width: 1
+ }
+ };
+
+ const trace2 = {
+ mode: 'scatter',
+ positions: p2.positions,
+ min: { x: p2.minX, y: p2.minY },
+ max: { x: p2.maxX, y: p2.maxY },
+ scatter: {
+ size: 10,
+ color: [0.0, 0.9, 0.0, 1],
+ borderSize: 1,
+ borderColor: [0, 0, 0, 1]
+ }
+ };
+
+ this.traces = [trace1, trace2];
+
+ let tickList = getTicks(this.traces, 'log', 2, false);
+ this.ticks = [tickList.t1, tickList.t2];
+
+ this.dataBox = [tickList.t1[0].x - 0.25, tickList.t2[0].x - 0.25, tickList.t1[tickList.t1.length - 1].x + 0.25, tickList.t2[tickList.t2.length - 1].x + 0.25];
+ }
+
+ render() {
+ return (
+ <gl-plot-2d
+ id="glPlot2d"
+ width="100%"
+ height="300px"
+ traces={JSON.stringify(this.traces)}
+ debug
+
+ pixel-ratio='1'
+ screen-box='[]'
+ data-box={JSON.stringify(this.dataBox)}
+ view-box='[]'
+
+ title='1000 Points'
+ title-center='[190, 280]'
+ title-angle='0'
+ title-color='[1.0, 0.3, 0.3, 1]'
+ title-font='sans-serif'
+ title-size='24'
+
+ background-color='[0, 0, 0, 0]'
+
+ border-color='[1, 1, 1, 1]'
+ border-line-enable='[true, true, true, true]'
+ border-line-width='[2, 2, 2, 2]'
+ border-line-color='[[0, 0, 0, 1], [0, 0, 0, 1], [0, 0, 0, 1], [0, 0, 0, 1]]'
+
+ labels='["X", "Y"]'
+ label-enable='[false, false, true, true]'
+ label-angle='[0, 0, 0, 4.71]'
+ label-pad='[0, 20, 0, 0]'
+ label-size='[24, 24]'
+ label-font='["sans-serif", "sans-serif"]'
+ label-color='[[0, 0, 0, 1], [0, 0, 0, 1], [0, 0, 0, 0], [0, 0, 0, 0]]'
+
+ ticks={JSON.stringify(this.ticks)}
+ tick-enable='[true, true, false, false]'
+ tick-pad='[20, 20, 0, 0]'
+ tick-angle='[0, 0, 0, 0]'
+ tick-color='[[0, 0, 0, 1], [0, 0, 0, 1], [0, 0, 0, 0], [0, 0, 0, 0]]'
+ tick-mark-width='[1, 1, 1, 1]'
+ tick-mark-length='[4, 4, 4, 4]'
+ tick-mark-color='[[0, 0, 0, 1], [0, 0, 0, 1], [0, 0, 0, 0], [0, 0, 0, 0]]'
+
+ grid-line-enable='[true, true]'
+ grid-line-color='[[0, 0, 0, 0.5], [0, 0, 0, 0.5]]'
+ grid-line-width='[0.5, 0.5]'
+
+ zero-line-enable='[false, false]'
+ zero-line-width='[3, 3]'
+ zero-line-color='[[0, 0, 0, 0.5], [0, 0, 0, 0.5]]' />
+ );
+ }
+}
+
+render(<App />, document.getElementById('app'));
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <link rel="icon" href="data:;base64,=">
+ </head>
+ <body>
+ <div id="app"></div>
+ <script type="text/javascript" src="app.js"></script>
+ </body>
+</html>
diff --git a/example/package.json b/example/package.json
@@ -0,0 +1,22 @@
+{
+ "name": "example",
+ "version": "1.0.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "build:dev": "webpack-dev-server --watch --progress --color"
+ },
+ "devDependencies": {
+ "babel-core": "6.23.1",
+ "babel-loader": "6.3.2",
+ "babel-plugin-transform-runtime": "6.23.0",
+ "babel-preset-es2015": "6.22.0",
+ "babel-preset-react": "6.23.0",
+ "babel-preset-stage-0": "6.22.0",
+ "gl-plot-2d": "..",
+ "react": "15.4.2",
+ "react-dom": "15.4.2",
+ "webpack": "2.2.1",
+ "webpack-dev-server": "2.4.1"
+ }
+}
diff --git a/example/utils.js b/example/utils.js
@@ -0,0 +1,35 @@
+
+/**
+ * Helper that makes dummy positions.
+ * Also returns two coordinates from positions: (minX, minY) and (maxX, maxY).
+ *
+ * @export
+ * @param {any} count
+ * @returns
+ */
+export function makePositions(count) {
+ let positions = [];
+ let minX = Number.MAX_SAFE_INTEGER;
+ let minY = Number.MAX_SAFE_INTEGER;
+ let maxX = Number.MIN_SAFE_INTEGER;
+ let maxY = Number.MIN_SAFE_INTEGER;
+
+ for (let i = 0; i < 2 * count; i += 2) {
+ positions[i] = (i / count) * 20 - 20;
+ positions[i+1] = Math.sqrt(-2.0 * Math.log(Math.random())) * Math.cos(2.0 * Math.PI * Math.random());
+
+ if (positions[i] < minX) { minX = positions[i]; }
+ if (positions[i+1] < minY) { minY = positions[i+1]; }
+
+ if (positions[i] > maxX) { maxX = positions[i]; }
+ if (positions[i+1] > maxY) { maxY = positions[i+1]; }
+ }
+
+ return {
+ positions,
+ minX,
+ minY,
+ maxX,
+ maxY
+ }
+}
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -0,0 +1,23 @@
+
+module.exports = {
+ entry: {
+ app: './app.js'
+ },
+ output: {
+ path: __dirname,
+ filename: '[name].js',
+ chunkFilename: '[id].js'
+ },
+ module: {
+ loaders: [
+ { test: /\.(js|jsx)$/,
+ exclude: /(node_modules|bower_components)/,
+ loader: 'babel-loader',
+ query: {
+ presets: ['es2015', 'stage-0', 'react'],
+ plugins: ['transform-runtime']
+ },
+ },
+ ],
+ }
+};
diff --git a/index.html b/index.html
diff --git a/index.ts b/index.ts
@@ -0,0 +1,14 @@
+
+import 'skatejs-web-components';
+
+import {
+ GlPlot2dComponent,
+ findMinMax,
+ getTicks,
+ getLinearTicks,
+ getLogTicks
+} from './src';
+
+export { findMinMax, getTicks, getLinearTicks, getLogTicks };
+
+customElements.define('gl-plot-2d', GlPlot2dComponent);
diff --git a/lib/MinMax.ts b/lib/MinMax.ts