move options to object, add license, refine ex

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Chris Camargo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

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 dev
+bash build.sh
 ```
 
 ## Average Draw Times

build.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+rm index.js
+npm run build:dev
+
+cd example
+
+rm -rf node_modules/gl-plot-2d
+npm i
+npm run build:dev

clean.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+
+rm -rf node_modules
+rm index.js
+
+cd example
+
+rm -rf node_modules

example/README.md

@@ -1 +1,3 @@
 # Using gl-plot-2d in React
+
+This is an example that uses `<gl-plot-2d>` in a React application.

example/app.js

@@ -1,14 +1,22 @@
 import React, { Component } from 'react';
 import { render } from 'react-dom';
+import { props } from 'skatejs';
 
 import * as glPlot2d from 'gl-plot-2d';
 
 class App extends Component {
  constructor() {
  super();
+ glPlot2d.defineGlPlot2D('gl-plot-2d');
  }
 
  componentWillMount() {
+ document.addEventListener('gl-plot-2d-init-plot-done', () => {
+ this.glPlot2dComponent.drawPlot();
+ });
+ }
+
+ componentDidMount() {
  const p1 = glPlot2d.getRandomPositions(1000);
  const p2 = glPlot2d.getRandomPositions(100);
 
@@ -38,65 +46,91 @@ class App extends Component {
  };
 
  this.traces = [trace1, trace2];
+ this.debug = true;
+ this.height = '300px';
+ this.width = '100%';
+
+ const tickList = glPlot2d.getTicks(this.traces, 'linear', 1, true);
+
+ this.plotOptions = {
+ pixelRatio: 1,
+ screenBox: null,
+ 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],
+ viewBox: null,
+ titleEnabe: false,
+ title: '',
+ titleCenter: [190, 280],
+ titleAngle: 0,
+ titleColor: [1.0, 0.3, 0.3, 1],
+ titleFont: 'sans-serif',
+ titleSize: 24,
+ backgroundColor: [0, 0, 0, 0],
+ borderColor: [1, 1, 1, 1],
+ borderLineEnable: [true, true, true, true],
+ borderLineWidth: [2, 2, 2, 2],
+ borderLineColor: [[0, 0, 0, 1], [0, 0, 0, 1], [0, 0, 0, 1], [0, 0, 0, 1]],
+ labels: ["X", "Y"],
+ labelEnable: [false, false, true, true],
+ labelAngle: [0, 0, 0, 4.71],
+ labelPad: [0, 20, 0, 0],
+ labelSize: [24, 24],
+ labelFont: ["sans-serif", "sans-serif"],
+ labelColor: [[0, 0, 0, 1], [0, 0, 0, 1], [0, 0, 0, 0], [0, 0, 0, 0]],
+ ticks: [tickList.t1, tickList.t2],
+ tickEnable: [true, true, false, false],
+ tickPad: [20, 20, 0, 0],
+ tickAngle: [0, 0, 0, 0],
+ tickColor: [[0, 0, 0, 1], [0, 0, 0, 1], [0, 0, 0, 0], [0, 0, 0, 0]],
+ tickMarkWidth: [1, 1, 1, 1],
+ tickMarkLength: [4, 4, 4, 4],
+ tickMarkColor: [[0, 0, 0, 1], [0, 0, 0, 1], [0, 0, 0, 0], [0, 0, 0, 0]],
+ gridLineEnable: [true, true],
+ gridLineColor: [[0, 0, 0, 0.5], [0, 0, 0, 0.5]],
+ gridLineWidth: [0.5, 0.5],
+ zeroLineEnable: [false, false],
+ zeroLineWidth: [3, 3],
+ zeroLineColor: [[0, 0, 0, 0.5], [0, 0, 0, 0.5]]
+ }
+
+ props(this.glPlot2dComponent, {
+ traces: this.traces,
+ debug: this.debug,
+ height: this.height,
+ width: this.width,
+ plotOptions: this.plotOptions
+ });
+ }
 
- let tickList = glPlot2d.getTicks(this.traces, 'linear', 1, true);
- this.ticks = [tickList.t1, tickList.t2];
+ onIncreasePixelRatio() {
+ this.plotOptions.pixelRatio = ++this.plotOptions.pixelRatio;
+ props(this.glPlot2dComponent, { plotOptions: this.plotOptions });
+ }
 
- 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];
+ onDecreasePixelRatio() {
+ if (this.plotOptions.pixelRatio > 1) {
+ this.plotOptions.pixelRatio = --this.plotOptions.pixelRatio;
+ props(this.glPlot2dComponent, { plotOptions: this.plotOptions });
+ }
  }
 
  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]]' />
+ <div>
+ <div>
+ <gl-plot-2d
+ id="glPlot2d"
+ ref={(glPlot2dComponent) => { this.glPlot2dComponent = glPlot2dComponent }}
+ traces={this.traces}
+ debug
+ height={this.height}
+ width={this.width}
+ plotOptions={this.plotOptions} />
+ </div>
+ <div>
+ <button onClick={this.onIncreasePixelRatio.bind(this)}>Increase Pixel Ratio</button>
+ <button onClick={this.onDecreasePixelRatio.bind(this)}>Decrease Pixel Ratio</button>
+ </div>
+ </div>
  );
  }
 }

example/package.json

@@ -16,6 +16,7 @@
  "gl-plot-2d": "..",
  "react": "15.4.2",
  "react-dom": "15.4.2",
+ "skatejs": "4.6.7",
  "webpack": "2.2.1",
  "webpack-dev-server": "2.4.1"
  }

index.ts

@@ -1,6 +1,7 @@
 import 'skatejs-web-components';
 
 export {
+ defineGlPlot2D,
  GlPlot2dComponent,
  GlPlot2dComponentProps,
  GlPlot2dOptions,

package.json

@@ -8,6 +8,7 @@
  "lint": "tslint \"src/**/*.ts\""
  },
  "author": "Chris Camargo",
+ "license": "MIT",
  "devDependencies": {
  "canvas-fit": "1.5.0",
  "d3-scale": "1.0.4",
@@ -25,7 +26,7 @@
  "skatejs-web-components": "5.2.1",
  "ts-loader": "2.0.1",
  "tslib": "1.6.0",
- "tslint": "^4.4.2",
+ "tslint": "4.4.2",
  "typescript": "2.2.1",
  "webpack": "2.2.1"
  },