fit canvas prop, prod updates

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 *.log
 index.js
+index.d.ts

.npmignore

@@ -0,0 +1,11 @@
+example
+node_modules
+src
+.editorconfig
+.gitignore
+build.sh
+clean.sh
+index.ts
+tsconfig.json
+tslint.json
+webpack.config.js

README.md

@@ -2,9 +2,19 @@
 
 This is a Web Component that wraps [gl-plot2d](https://github.com/gl-vis/gl-plot2d).
 
-![Line Graph](http:https://i.imgur.com/WMq7o80.png)
+![Stacked Graphs](http:https://i.imgur.com/YpSzWKL.png)
 
-## Build & Run
+## Installation
+
+```
+npm install gl-plot-2d --save
+```
+
+## Example
+
+- `<gl-plot-2d> in React` - [Code](https://github.com/camargo/gl-plot-2d/tree/master/example)
+
+## Build & Run Example
 
 ```
 npm install

example/app.js

@@ -113,6 +113,7 @@ class App extends Component {
  debug: this.debug1,
  height: this.height1,
  width: this.width1,
+ fitViewBox: true,
  plotOptions: this.plotOptions1
  });
  }
@@ -183,13 +184,13 @@ class App extends Component {
  labelFont: ["sans-serif", "sans-serif"],
  labelColor: [[0, 0, 0, 1], [0, 0, 0, 1], [0, 0, 0, 0], [0, 0, 0, 0]],
  ticks: [axes.x, axes.y],
- tickEnable: [false, true, false, false],
- tickPad: [20, 20, 0, 0],
+ tickEnable: [true, true, false, false],
+ tickPad: [15, 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, 0], [0, 0, 0, 1], [0, 0, 0, 0], [0, 0, 0, 0]],
+ tickMarkColor: [[0, 0, 0, 1], [0, 0, 0, 1], [0, 0, 0, 0], [0, 0, 0, 0]],
  gridLineEnable: [false, true],
  gridLineColor: [[0, 0, 0, 0.5], [0, 0, 0, 0.5]],
  gridLineWidth: [0.5, 0.5],
@@ -204,6 +205,7 @@ class App extends Component {
  debug: this.debug2,
  height: this.height2,
  width: this.width2,
+ fitViewBox: true,
  plotOptions: this.plotOptions2
  });
  }

example/package.json

@@ -8,7 +8,7 @@
  },
  "devDependencies": {
  "babel-core": "6.23.1",
- "babel-loader": "6.3.2",
+ "babel-loader": "6.4.0",
  "babel-plugin-transform-runtime": "6.23.0",
  "babel-preset-es2015": "6.22.0",
  "babel-preset-react": "6.23.0",

example/webpack.config.js

@@ -3,11 +3,13 @@ module.exports = {
  entry: {
  app: './app.js'
  },
+
  output: {
  path: __dirname,
  filename: '[name].js',
  chunkFilename: '[id].js'
  },
+
  module: {
  loaders: [
  { test: /\.(js|jsx)$/,

package.json

@@ -26,6 +26,7 @@
  "tslib": "1.6.0",
  "tslint": "4.5.1",
  "typescript": "2.2.1",
+ "uglifyjs-webpack-plugin": "0.3.0",
  "webpack": "2.2.1"
  },
  "browserify": {

src/GlPlot2dComponent.tsx

@@ -43,6 +43,7 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  debug: skate.prop.boolean({ attribute: true }),
  height: skate.prop.string({ attribute: true }),
  width: skate.prop.string({ attribute: true }),
+ fitViewBox: skate.prop.boolean({ attribute: true }),
  plotOptions: skate.prop.object<GlPlot2dComponent, GlPlot2dOptions>({ attribute: true })
  };
  }
@@ -124,6 +125,11 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  this['width'] = newValue;
  }
  break;
+ case 'fitViewBox':
+ if (newValue) {
+ this['fitViewBox'] = newValue;
+ }
+ break;
  case 'plot-options':
  if (newValue) {
  this['plotOptions'] = JSON.parse(newValue);
@@ -234,18 +240,6 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  this.canvas.onmousedown = (event: MouseEvent) => {
  this.onMouseDown(event);
  };
-
- this.canvas.onmouseup = () => {
- // TODO.
- };
-
- this.canvas.onmousemove = () => {
- // TODO.
- };
-
- this.canvas.onmouseover = () => {
- // TODO.
- };
  }
  }
 
@@ -281,9 +275,10 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  if (div) {
  const boundingClientRect = div.getBoundingClientRect();
 
- // Set the viewBox to contain the entire surrounding div.
- // TODO: Parameterize the viewBox.
- this['plotOptions'].viewBox = [45, 1, boundingClientRect.width - 1, boundingClientRect.height - 1];
+ // Set the viewBox to contain the entire surrounding div if fitViewBox is true.
+ if (this['fitViewBox']) {
+ this['plotOptions'].viewBox = [45, 1, boundingClientRect.width - 1, boundingClientRect.height - 1];
+ }
  }
  }
 

src/GlPlot2dComponentProps.ts

@@ -13,5 +13,6 @@ export interface GlPlot2dComponentProps {
  debug: boolean;
  height: string;
  width: string;
+ fitViewBox: boolean;
  plotOptions: GlPlot2dOptions; // Specific to gl-plot2d.
 }

src/GlPlot2dUtils.ts

@@ -179,7 +179,7 @@ export function getMaxFromPositions(positions: number[]): Point {
 
 /**
  * Gets ticks by type for x and y Axes.
- * Supported types are linear, log, and pow.
+ * Supported types are linear and log.
  *
  * @export
  * @param {string} type

webpack.config.js

@@ -1,3 +1,4 @@
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 
 module.exports = {
  entry: __dirname + '/index.ts',
@@ -20,6 +21,10 @@ module.exports = {
  libraryTarget: 'umd'
  },
 
+ plugins: [
+ new UglifyJSPlugin()
+ ],
+
  performance: {
  hints: false
  }