axes

example/app.js

@@ -6,11 +6,11 @@ import { first, last } from 'lodash';
 import {
  defineGlPlot2d,
  makeRandomPositions,
+ getAxesTicks,
  getMinFromPositions,
  getMaxFromPositions,
  getMinFromPoints,
  getMaxFromPoints,
- getTicks,
 } from 'gl-plot-2d';
 
 class App extends Component {
@@ -52,24 +52,24 @@ class App extends Component {
  const max = getMaxFromPositions(p1Positions);
  this.line1 = {
  positions: p1Positions,
- color: [0, 1, 0, 1],
- 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
+ color: [0, 0, 1, 1],
+ fill: [false, true, false, true],
+ fillColor: [[0, 0, 1, 0.5], [0, 0, 1, 0.5], [0, 0, 1, 0.5], [1, 0.5, 0, 0.5]],
+ width: 2
  };
 
- // Ticks.
- const tickList = getTicks({ p1: min, p2: max }, 'linear', 1, true);
+ // Axes Ticks.
+ const axes = getAxesTicks('linear', min, max, 1, true);
 
  // Options.
  this.plotOptions1 = {
  pixelRatio: 1,
  screenBox: null,
  dataBox: [
- first(tickList.t1).x,
- first(tickList.t2).x - 0.5,
- last(tickList.t1).x,
- last(tickList.t2).x + 0.5
+ first(axes.x).tick(),
+ first(axes.y).tick() - 0.5,
+ last(axes.x).tick(),
+ last(axes.y).tick() + 0.5
  ],
  viewBox: null,
  titleEnabe: false,
@@ -91,7 +91,7 @@ class App extends Component {
  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],
+ ticks: [axes.x, axes.y],
  tickEnable: [false, true, false, false],
  tickPad: [20, 20, 0, 0],
  tickAngle: [0, 0, 0, 0],
@@ -147,20 +147,21 @@ class App extends Component {
  borderColor: [0, 0, 0, 1]
  };
 
- // Ticks.
+ // Axes Ticks.
  const min = getMinFromPoints([min3, min4]);
  const max = getMaxFromPoints([max3, max4]);
- const tickList = getTicks({ p1: min, p2: max }, 'linear', 1, false);
+ const axes = getAxesTicks('linear', min, max, 1, false);
+
 
  // Options.
  this.plotOptions2 = {
  pixelRatio: 1,
  screenBox: null,
  dataBox: [
- first(tickList.t1).x,
- first(tickList.t2).x - 0.5,
- last(tickList.t1).x,
- last(tickList.t2).x + 0.5
+ first(axes.x).tick(),
+ first(axes.y).tick() - 0.5,
+ last(axes.x).tick(),
+ last(axes.y).tick() + 0.5
  ],
  viewBox: null,
  titleEnabe: false,
@@ -182,7 +183,7 @@ class App extends Component {
  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],
+ ticks: [axes.x, axes.y],
  tickEnable: [false, true, false, false],
  tickPad: [20, 20, 0, 0],
  tickAngle: [0, 0, 0, 0],

index.ts

@@ -1,23 +1,22 @@
 import 'skatejs-web-components';
 
 export {
+ Axes,
  defineGlPlot2d,
  GlPlot2dComponent,
  GlPlot2dComponentProps,
  GlPlot2dOptions,
+ getAxesTicks,
  getLinearTicks,
  getLogTicks,
  getMinFromPoints,
  getMaxFromPoints,
  getMinFromPositions,
  getMaxFromPositions,
- getTicks,
  makeRandomPositions,
  Line,
  Point,
- PointPair,
  Scatter,
  ScatterFancy,
- Tick,
- TickListPair
+ Tick
 } from './src';

src/Axes.ts

@@ -0,0 +1,25 @@
+import { Tick } from './';
+
+/**
+ * Axes.
+ *
+ * @export
+ * @class Axes
+ */
+export class Axes {
+ public x: Tick[];
+ public y: Tick[];
+
+ /**
+ * Creates an instance of Axes.
+ *
+ * @param {Tick[]} x
+ * @param {Tick[]} y
+ *
+ * @memberOf Axes
+ */
+ constructor(x: Tick[], y: Tick[]) {
+ this.x = x;
+ this.y = y;
+ }
+}

src/GlPlot2dComponent.tsx

@@ -8,11 +8,13 @@ import * as createScatterFancy from 'gl-scatter2d-sdf';
 import * as createSpikes from 'gl-spikes2d';
 import { debounce } from 'lodash';
 
-import { GlPlot2dComponentProps,
- GlPlot2dOptions,
- Line,
- Scatter,
- ScatterFancy } from './';
+import {
+ GlPlot2dComponentProps,
+ GlPlot2dOptions,
+ Line,
+ Scatter,
+ ScatterFancy
+} from './';
 
 /**
  * GlPlot2dComponent class.

src/GlPlot2dUtils.ts

@@ -1,10 +1,11 @@
 import * as d3Scale from 'd3-scale';
 import { round } from 'lodash';
 
-import { Point,
- PointPair,
- Tick,
- TickListPair } from './';
+import {
+ Axes,
+ Point,
+ Tick
+} from './';
 
 /**
  * Helper function to make count linear tick marks on domain lo to hi.
@@ -177,31 +178,33 @@ export function getMaxFromPositions(positions: number[]): Point {
 }
 
 /**
- * Gets ticks by type.
+ * Gets ticks by type for x and y Axes.
  * Supported types are linear, log, and pow.
  *
  * @export
- * @param {PointPair} minMax
  * @param {string} type
+ * @param {Point} min
+ * @param {Point} max
  * @param {number} precision
  * @param {boolean} nice
- * @returns {TickListPair}
+ * @returns {Axes}
  */
-export function getTicks(minMax: PointPair,
- type: string,
- precision: number,
- nice: boolean): TickListPair {
+export function getAxesTicks(type: string,
+ min: Point,
+ max: Point,
+ precision: number,
+ nice: boolean): Axes {
  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);
+ xTicks = getLinearTicks(min.x, max.x, precision, nice);
+ yTicks = getLinearTicks(min.y, max.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);
+ xTicks = getLogTicks(min.x, max.x, precision, nice);
+ yTicks = getLogTicks(min.y, max.y, precision, nice);
  }
 
- return new TickListPair(xTicks, yTicks);
+ return new Axes(xTicks, yTicks);
 }

src/Tick.ts

@@ -23,4 +23,15 @@ export class Tick {
  this.x = x;
  this.text = x.toString();
  }
+
+ /**
+ * Convenience method to get x.
+ *
+ * @returns {number}
+ *
+ * @memberOf Tick
+ */
+ public tick(): number {
+ return this.x;
+ }
 }

src/index.ts

@@ -1,11 +1,10 @@
+export { Axes } from './Axes';
 export { defineGlPlot2d, GlPlot2dComponent } from './GlPlot2dComponent';
 export { GlPlot2dOptions } from './GlPlot2dOptions';
 export { GlPlot2dComponentProps } from './GlPlot2dComponentProps';
 export * from './GlPlot2dUtils';
 export { Line } from './Line';
 export { Point } from './Point';
-export { PointPair } from './PointPair';
 export { Scatter } from './Scatter';
 export { ScatterFancy } from './ScatterFancy';
 export { Tick } from './Tick';
-export { TickListPair } from './TickListPair';