glPlot2d lib

example/app.js

@@ -1,23 +1,24 @@
 import React, { Component } from 'react';
 import { render } from 'react-dom';
 
-import { getTicks } from 'gl-plot-2d';
-
-import { makePositions } from './utils';
+import * as glPlot2d from 'gl-plot-2d';
 
 class App extends Component {
+ constructor() {
+ super();
+ }
 
  componentWillMount() {
- const p1 = makePositions(1000);
- const p2 = makePositions(100);
+ const p1 = glPlot2d.getRandomPositions(1000);
+ const p2 = glPlot2d.getRandomPositions(100);
 
  const trace1 = {
  mode: 'line',
  positions: p1.positions,
- min: { x: p1.minX, y: p1.minY },
- max: { x: p1.maxX, y: p1.maxY },
+ min: p1.min,
+ max: p1.max,
  line: {
- fill: [false, true, false, false],
+ fill: [false, false, 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
  }
@@ -26,8 +27,8 @@ class App extends Component {
  const trace2 = {
  mode: 'scatter',
  positions: p2.positions,
- min: { x: p2.minX, y: p2.minY },
- max: { x: p2.maxX, y: p2.maxY },
+ min: p2.min,
+ max: p2.max,
  scatter: {
  size: 10,
  color: [0.0, 0.9, 0.0, 1],
@@ -38,7 +39,7 @@ class App extends Component {
 
  this.traces = [trace1, trace2];
 
- let tickList = getTicks(this.traces, 'log', 2, false);
+ let tickList = glPlot2d.getTicks(this.traces, 'linear', 1, true);
  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];

index.ts

@@ -1,14 +1,19 @@
-
 import 'skatejs-web-components';
 
-import {
+export {
  GlPlot2dComponent,
- findMinMax,
- getTicks,
+ GlPlot2dComponentProps,
+ GlPlot2dOptions,
  getLinearTicks,
- getLogTicks
+ getLogTicks,
+ getMinMax,
+ getRandomPositions,
+ getTicks,
+ Line,
+ Point,
+ PointPair,
+ Scatter,
+ Tick,
+ TickListPair,
+ Trace
 } from './src';
-
-export { findMinMax, getTicks, getLinearTicks, getLogTicks };
-
-customElements.define('gl-plot-2d', GlPlot2dComponent);

package.json

@@ -4,7 +4,8 @@
  "description": "A Web Component for gl-plot2d.",
  "main": "index.js",
  "scripts": {
- "build:dev": "webpack"
+ "build:dev": "webpack",
+ "lint": "tslint \"src/**/*.ts\""
  },
  "author": "Chris Camargo",
  "devDependencies": {

src/GlPlot2dComponent.tsx

@@ -16,6 +16,7 @@ import { GlPlot2dComponentProps,
 /**
  * GlPlot2dComponent class.
  *
+ * @export
  * @class GlPlot2dComponent
  * @extends {skate.Component<GlPlot2dComponentProps>}
  */
@@ -357,3 +358,5 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
  });
  }
 }
+
+customElements.define('gl-plot-2d', GlPlot2dComponent);

src/GlPlot2dComponentProps.ts

@@ -1,4 +1,3 @@
-
 import { Tick, Trace } from './';
 
 /**

src/GlPlot2dOptions.ts

@@ -1,4 +1,3 @@
-
 import { Tick } from './';
 
 /**

src/GlPlot2dUtils.ts

@@ -1,69 +1,8 @@
-
 import * as d3Scale from 'd3-scale';
 import { round } from 'lodash';
 
 import { Point, PointPair, Tick, TickListPair, Trace } from './';
 
-/**
- * Helper function that finds global min and max points from a list of traces.
- *
- * @export
- * @param {Trace[]} traces
- * @returns {PointPair}
- */
-export function findMinMax(traces: Trace[]): PointPair {
- let p1: Point = new Point(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER);
- let p2: Point = new Point(Number.MIN_SAFE_INTEGER, Number.MIN_SAFE_INTEGER);
-
- if (traces.length > 1) {
- traces.forEach((trace: Trace) => {
- if (trace.min.x < p1.x) { p1.x = trace.min.x; }
- if (trace.min.y < p1.y) { p1.y = trace.min.y; }
-
- if (trace.max.x > p2.x) { p2.x = trace.max.x; }
- if (trace.max.y > p2.y) { p2.y = trace.max.y; }
- });
- }
- else if (traces.length === 1) {
- p1 = traces[0].min;
- p2 = traces[0].max;
- }
-
- return new PointPair(p1, p2);
-}
-
-/**
- * Gets ticks by type.
- * Supported types are linear and log.
- *
- * @export
- * @param {Trace[]} traces
- * @param {string} type
- * @param {number} precision
- * @param {boolean} nice
- * @returns {TickListPair}
- */
-export function getTicks(traces: Trace[],
- type: string,
- precision: number,
- nice: boolean): TickListPair {
- const minMax = findMinMax(traces);
-
- let xTicks: Tick[] = [];
- let yTicks: Tick[] = [];
-
- if (type === 'linear') {
- xTicks = getLinearTicks(minMax.p1.x, minMax.p2.x, precision, nice);
- yTicks = getLinearTicks(minMax.p1.y, minMax.p2.y, precision, nice);
- }
- else if (type === 'log') {
- xTicks = getLogTicks(minMax.p1.x, minMax.p2.x, precision, nice);
- yTicks = getLogTicks(minMax.p1.y, minMax.p2.y, precision, nice);
- }
-
- return new TickListPair(xTicks, yTicks);
-}
-
 /**
  * Helper function to make count linear tick marks on domain lo to hi.
  * Uses d3-scale to do so.
@@ -123,3 +62,99 @@ export function getLogTicks(lo: number,
 
  return ticks.map((tick: number) => new Tick(round(tick, precision)));
 }
+
+/**
+ * Helper function that finds global min and max points from a list of traces.
+ *
+ * @export
+ * @param {Trace[]} traces
+ * @returns {PointPair}
+ */
+export function getMinMax(traces: Trace[]): PointPair {
+ let p1: Point = new Point(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER);
+ let p2: Point = new Point(Number.MIN_SAFE_INTEGER, Number.MIN_SAFE_INTEGER);
+
+ if (traces.length > 1) {
+ traces.forEach((trace: Trace) => {
+ if (trace.min.x < p1.x) { p1.x = trace.min.x; }
+ if (trace.min.y < p1.y) { p1.y = trace.min.y; }
+
+ if (trace.max.x > p2.x) { p2.x = trace.max.x; }
+ if (trace.max.y > p2.y) { p2.y = trace.max.y; }
+ });
+ }
+ else if (traces.length === 1) {
+ p1 = traces[0].min;
+ p2 = traces[0].max;
+ }
+
+ return new PointPair(p1, p2);
+}
+
+/**
+ * Helper that gets random positions.
+ * Also returns min and max coordinates from positions: (minX, minY) and (maxX, maxY).
+ *
+ * @export
+ * @param {number} count
+ * @returns {*}
+ */
+export function getRandomPositions(count: number): any {
+ const positions: number[] = [];
+ 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;
+
+ // Samples the standard normal distribution, with 0 mean and unit standard deviation.
+ // See https://github.com/scijs/gauss-random.
+ 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,
+ min: new Point(minX, minY),
+ max: new Point(maxX, maxY)
+ };
+}
+
+/**
+ * Gets ticks by type.
+ * Supported types are linear and log.
+ *
+ * @export
+ * @param {Trace[]} traces
+ * @param {string} type
+ * @param {number} precision
+ * @param {boolean} nice
+ * @returns {TickListPair}
+ */
+export function getTicks(traces: Trace[],
+ type: string,
+ precision: number,
+ nice: boolean): TickListPair {
+ const minMax = getMinMax(traces);
+
+ let xTicks: Tick[] = [];
+ let yTicks: Tick[] = [];
+
+ if (type === 'linear') {
+ xTicks = getLinearTicks(minMax.p1.x, minMax.p2.x, precision, nice);
+ yTicks = getLinearTicks(minMax.p1.y, minMax.p2.y, precision, nice);
+ }
+ else if (type === 'log') {
+ xTicks = getLogTicks(minMax.p1.x, minMax.p2.x, precision, nice);
+ yTicks = getLogTicks(minMax.p1.y, minMax.p2.y, precision, nice);
+ }
+
+ return new TickListPair(xTicks, yTicks);
+}

src/PointPair.ts

@@ -1,4 +1,3 @@
-
 import { Point } from './';
 
 /**

src/TickListPair.ts

@@ -1,4 +1,3 @@
-
 import { Tick } from './';
 
 /**

src/Trace.ts

@@ -1,4 +1,3 @@
-
 import { Line, Point, Scatter } from './';
 
 /**

tslint.json

@@ -1,9 +1,6 @@
 {
  "extends": "tslint:latest",
  "rules": {
- /*
- * Any rules specified here will override those from the base config we are extending.
- */
  "curly": true,
  "interface-name": [true, "never-prefix"],
  "no-console": [true, "log"],
@@ -15,15 +12,7 @@
  "trailing-comma": [false, {"multiline": "always", "singleline": "never"}]
  },
  "jsRules": {
- /*
- * Any rules specified here will override those from the base config we are extending.
- */
  "curly": true
  },
- "rulesDirectory": [
- /*
- * A list of relative or absolute paths to directories that contain custom rules.
- * See the Custom Rules documentation below for more details.
- */
- ]
+ "rulesDirectory": []
 }