Skip to content

Commit

Permalink
stacked plots
Browse files Browse the repository at this point in the history
  • Loading branch information
@camargo
camargo committed Feb 27, 2017
1 parent 2a2eff9 commit 0834de4
Show file tree
Hide file tree
Showing 4 changed files with 175 additions and 44 deletions.
173 changes: 136 additions & 37 deletions example/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,19 @@ class App extends Component {
}

componentWillMount() {
// TODO: Unique event names!
document.addEventListener('gl-plot-2d-init-plot-done', () => {
this.glPlot2dComponent.drawPlot();
if (this.glPlot2dComponent1.plot) {
this.glPlot2dComponent1.drawPlot();
}

if (this.glPlot2dComponent2.plot) {
this.glPlot2dComponent2.drawPlot();
}
});
}

componentDidMount() {
makePlot1() {
const p1 = glPlot2d.getRandomPositions(1000);
const p2 = glPlot2d.getRandomPositions(100);

Expand All @@ -26,6 +33,7 @@ class App extends Component {
min: p1.min,
max: p1.max,
line: {
color: [0, 0, 1, 1],
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
Expand All @@ -45,14 +53,14 @@ class App extends Component {
}
};

this.traces = [trace1, trace2];
this.debug = true;
this.height = '300px';
this.width = '100%';
this.traces1 = [trace1, trace2];
this.debug1 = true;
this.height1 = '300px';
this.width1 = '100%';

const tickList = glPlot2d.getTicks(this.traces, 'linear', 1, true);
const tickList = glPlot2d.getTicks(this.traces1, 'linear', 1, true);

this.plotOptions = {
this.plotOptions1 = {
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],
Expand All @@ -77,58 +85,149 @@ 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: [tickList.t1, tickList.t2],
tickEnable: [true, true, false, false],
tickEnable: [false, 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],
tickMarkColor: [[0, 0, 0, 0], [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],
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
props(this.glPlot2dComponent1, {
traces: this.traces1,
debug: this.debug1,
height: this.height1,
width: this.width1,
plotOptions: this.plotOptions1
});
}

onIncreasePixelRatio() {
this.plotOptions.pixelRatio = ++this.plotOptions.pixelRatio;
props(this.glPlot2dComponent, { plotOptions: this.plotOptions });
}
makePlot2() {
const p3 = glPlot2d.getRandomPositions(1000);
const p4 = glPlot2d.getRandomPositions(100);

const trace3 = {
mode: 'line',
positions: p3.positions,
min: p3.min,
max: p3.max,
line: {
color: [0, 1, 0, 1],
fill: [false, false, false, false],
fillColor: [[0, 1, 0, 0.5], [0, 1, 0, 0.5], [0, 1, 0, 0.5], [0, 1, 0, 0.5]],
width: 2
}
};

const trace4 = {
mode: 'scatter',
positions: p4.positions,
min: p4.min,
max: p4.max,
scatter: {
size: 10,
color: [0.8, 0.0, 0.0, 1],
borderSize: 1,
borderColor: [0, 0, 0, 1]
}
};

this.traces2 = [trace3, trace4];
this.debug2 = true;
this.height2 = '300px';
this.width2 = '100%';

const tickList = glPlot2d.getTicks(this.traces1, 'log', 1, false);

onDecreasePixelRatio() {
if (this.plotOptions.pixelRatio > 1) {
this.plotOptions.pixelRatio = --this.plotOptions.pixelRatio;
props(this.glPlot2dComponent, { plotOptions: this.plotOptions });
this.plotOptions2 = {
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: [false, 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, 0], [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.glPlot2dComponent2, {
traces: this.traces2,
debug: this.debug2,
height: this.height2,
width: this.width2,
plotOptions: this.plotOptions2
});
}

componentDidMount() {
this.makePlot1();
this.makePlot2();
}

render() {
let outerContainer = {
width: '100%'
};

let innerContainer = {
paddingBottom: '0.5px'
};

return (
<div>
<div>
<div style={outerContainer}>
<div style={innerContainer}>
<gl-plot-2d
id="glPlot2d"
ref={(glPlot2dComponent) => { this.glPlot2dComponent = glPlot2dComponent }}
traces={this.traces}
debug
height={this.height}
width={this.width}
plotOptions={this.plotOptions} />
ref={(glPlot2dComponent1) => { this.glPlot2dComponent1 = glPlot2dComponent1 }}
traces={this.traces1}
debug={this.debug1}
height={this.height1}
width={this.width1}
plotOptions={this.plotOptions1} />
</div>
<div>
<button onClick={this.onIncreasePixelRatio.bind(this)}>Increase Pixel Ratio</button>
<button onClick={this.onDecreasePixelRatio.bind(this)}>Decrease Pixel Ratio</button>
<div style={innerContainer}>
<gl-plot-2d
ref={(glPlot2dComponent2) => { this.glPlot2dComponent2 = glPlot2dComponent2 }}
traces={this.traces2}
debug={this.debug2}
height={this.height2}
width={this.width2}
plotOptions={this.plotOptions2} />
</div>
</div>
);
Expand Down
39 changes: 34 additions & 5 deletions src/GlPlot2dComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,28 +156,56 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
width: ${width};
height: ${height};
}
canvas {
position: relative !important;
}
`;

return styles;
}

/**
* Helper function that initializes resize canvas logic.
* Resize function that uses canvas-fit.
* Sets the viewBox to contain the entire containing div.
*
* @memberOf GlPlot2dComponent
*/
public initResize(): void {
public resize(): void {
// Setup fit().
const resize = fit(this.canvas, null, +window.devicePixelRatio);

if (this.shadowRoot) {
// Get the div around the canvas.
let div = this.shadowRoot.querySelector('div');

if (div) {
let boundingClientRect = div.getBoundingClientRect();
this['plotOptions'].viewBox = [50, 1, boundingClientRect.width - 1, boundingClientRect.height - 1];
}
}

// Resize after setting up fit().
resize();
}

/**
* Helper function that initializes resize canvas logic.
* Should be only called once on component initialization.
*
* @memberOf GlPlot2dComponent
*/
public initResize(): void {
this.resize();

// Debounce the resize call.
const debounceResize = debounce(() => {
resize();
this.plot.update(this['plotOptions']);
this.drawPlot();
this.resize();

if (this.plot) {
this.plot.update(this['plotOptions']);
this.drawPlot();
}
}, 200);

// Setup resize event listener.
Expand Down Expand Up @@ -255,6 +283,7 @@ export class GlPlot2dComponent extends skate.Component<GlPlot2dComponentProps> {
public addLinePlot(positions: number[], line: Line): void {
createLine(this.plot, {
positions: new Float32Array(positions),
color: line.color,
fill: line.fill,
fillColor: line.fillColor,
width: line.width
Expand Down
5 changes: 4 additions & 1 deletion src/Line.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,23 @@
* @class Line
*/
export class Line {
public color: number[];
public fill: boolean[];
public fillColor: number[][];
public width: number;

/**
* Creates an instance of Line.
*
* @param {number[]} color
* @param {boolean[]} fill
* @param {number[][]} fillColor
* @param {number} width
*
* @memberOf Line
*/
constructor(fill: boolean[], fillColor: number[][], width: number) {
constructor(color: number[], fill: boolean[], fillColor: number[][], width: number) {
this.color = color;
this.fill = fill;
this.fillColor = fillColor;
this.width = width;
Expand Down
2 changes: 1 addition & 1 deletion src/Trace.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export class Trace {
this.max = max;

if (line) {
this.line = new Line(line.fill, line.fillColor, line.width);
this.line = new Line(line.color, line.fill, line.fillColor, line.width);
}
else {
this.line = null;
Expand Down

0 comments on commit 0834de4

Please sign in to comment.