Commit 0e4df88b authored by David Anderson's avatar David Anderson
Browse files

margins are working

parent d2ea179e
......@@ -16,8 +16,8 @@ let min = 0;
let max = 1000;
let boxCount = 10;
let isVertical = false;
let isCategorical = false;
let isCategorical = true;
let shouldAxisBeNormal = !true;
@Component({
selector: 'app-boxplot-demo',
......@@ -28,27 +28,26 @@ export class BoxplotDemoComponent {
@ViewChild( 'drawSpace' )
drawSpace: ElementRef;
protected chart: ChartCanvas;
x
ngAfterViewInit() {
let me = this;
me.chart = new ChartCanvas( me.drawSpace.nativeElement );
let primaryAxis, secondaryAxis;
if ( isVertical ) {
primaryAxis = new ContinuousAxis( 'left' );
secondaryAxis = isCategorical ? new CategoricalAxis<number>( 'bottom' ) : new ContinuousAxis( 'bottom' );
primaryAxis = new ContinuousAxis( shouldAxisBeNormal ? 'left' : 'right' );
secondaryAxis = isCategorical ? new CategoricalAxis<number>( shouldAxisBeNormal ? 'bottom' : 'top' ) : new ContinuousAxis( shouldAxisBeNormal ? 'bottom' : 'top' );
} else {
primaryAxis = new ContinuousAxis( 'bottom' );
secondaryAxis = isCategorical ? new CategoricalAxis<number>( 'left' ) : new ContinuousAxis( 'left' );
primaryAxis = new ContinuousAxis( shouldAxisBeNormal ? 'bottom' : 'top' );
secondaryAxis = isCategorical ? new CategoricalAxis<number>( shouldAxisBeNormal ? 'left' : 'right' ) : new ContinuousAxis( shouldAxisBeNormal ? 'left' : 'right' );
}
let boxPlot = new BoxPlot();
boxPlot.primaryAxis = primaryAxis;
boxPlot.secondaryAxis = secondaryAxis;
let scatterChart = new ScatterChart();
boxPlot.margin = scatterChart.margin = 20;
scatterChart.margin = 20;
me.chart.background = '#ccc';
boxPlot.background = '#333';
......@@ -71,7 +70,9 @@ export class BoxplotDemoComponent {
primaryAxis.explicitBounds = [min, max];
secondaryAxis.explicitCategories = [];
secondaryAxis.explicitBounds = [0, boxCount];
secondaryAxis.explicitBounds = [ 0, boxCount ];
secondaryAxis.innerPadding = 0.25;
secondaryAxis.outerPadding = 0.25;
while ( secondaryAxis.explicitCategories.length < boxCount ) {
secondaryAxis.explicitCategories.push( secondaryAxis.explicitCategories.length );
......@@ -94,7 +95,7 @@ export class BoxplotDemoComponent {
return ret;
};
secondaryAxis.getValue = ( dp ) => {
let ret = dp.data.y;
let ret = dp.data.y;
return ret;
};
primaryAxis.registerChart( [ boxPlot, scatterChart ] );
......
......@@ -406,8 +406,13 @@ export class ChartCanvas {
axis.debugLogger._log( 'Axis Canvas width = ' + width +', height = ' + height );
isValid = axis._implementation.canvas.setSize( width, height );
if ( axis._implementation.position === 'bottom' ) {
if ( axis._implementation.position === 'top' ) {
y = rs.chartBounds.top - rs.axisSizes.top;
} else if ( axis._implementation.position === 'bottom' ) {
y = rs.chartBounds.top + rs.chartHeight;
}
if ( axis._implementation.position === 'left' ) {
x = rs.chartBounds.left - rs.axisSizes.left;
} else if ( axis._implementation.position === 'right' ) {
x = rs.chartBounds.left + rs.chartWidth;
}
......
......@@ -43,14 +43,14 @@ export class GistCanvas {
* @param {string} [background]
* @memberof GistCanvas
*/
public clearCanvas( background?: string ) {
public clearCanvas( background?: string, margin: number = 0 ) {
let height: number = parseInt( this.canvasEle.style.height as any ) || 0;
let width: number = parseInt( this.canvasEle.style.width as any ) || 0;
if ( this.isSizeValid() ) {
this.context.clearRect( 0, 0, width, height );
this.context.clearRect( margin, margin, width, height );
if ( background ) {
this.context.fillStyle = background;
this.context.fillRect( 0, 0, width, height );
this.context.fillRect( margin, margin, width - margin*2, height - margin* 2 );
}
}
}
......
......@@ -157,13 +157,12 @@ export abstract class BaseAxisImplementation<T> {
setChartSize( chartWidth: number, chartHeight: number, axisSizes: TBLR<number>, axisMargin: TBLR<number> ) {
const me = this;
let zero: number, max: number;
let buffer = me.getChartBuffer();
if ( me.isVertical ) {
zero = axisMargin.top + axisSizes.top + chartHeight - buffer.bottom;
max = axisMargin.top + axisSizes.top + buffer.top;
max = Math.max(axisMargin.top , axisSizes.top);
zero = max + chartHeight; // y = 0 at the top, so if we want everything else to be 0 at the bottom, we invert the max and zero
} else {
zero = axisMargin.left + axisSizes.left + buffer.left;
max = axisMargin.left + axisSizes.left + chartWidth - buffer.right;
zero = Math.max(axisMargin.left , axisSizes.left);
max = zero + chartWidth;
}
me.scale.range( [ zero, max ] );
me.chartWidth = chartWidth;
......@@ -519,22 +518,6 @@ export abstract class BaseAxisImplementation<T> {
public abstract valueToWidth( value: T ): number;
private getChartBuffer(): TBLR<number> {
const me = this;
let buffer = new TBLR( 0 );
for ( let id in me.charts ) {
if ( me.charts[ id ] ) {
let chartBuffer = me.charts[ id ]._implementation.getMinBuffer();
buffer.top = Math.max( buffer.top, chartBuffer.top );
buffer.bottom = Math.max( buffer.bottom, chartBuffer.bottom );
buffer.left = Math.max( buffer.left, chartBuffer.left );
buffer.right = Math.max( buffer.right, chartBuffer.right );
}
}
return buffer;
}
abstract getAxisLabels(): Array<AxisLabel>;
......
......@@ -120,7 +120,7 @@ export abstract class BaseChartImplementation {
me.chart.debugLogger._log( 'isDirty change', b );
}
if ( b ) {
me.canvas.clearCanvas( me.chart.background );
me.canvas.clearCanvas( me.chart.background , this.chart.margin);
me.canvas.canvasEle.style.zIndex = '1';
me.onDataWipe();
this.clearExtents();
......@@ -143,7 +143,7 @@ export abstract class BaseChartImplementation {
*/
public initCanvas( width: number, height: number, background?: string ): boolean {
let isValid = this.canvas.setSize( width, height );
this.canvas.clearCanvas( background );
this.canvas.clearCanvas( background , this.chart.margin);
this.isDirty = true;
this.canvas.context.globalAlpha = this.chart.alpha;
if ( isValid ) {
......@@ -198,17 +198,6 @@ export abstract class BaseChartImplementation {
return ret;
}
/**
* How much room is needed beyond the max value
*
* @abstract
* @returns {number}
* @memberof BaseAxisImplementation
*/
public getMinBuffer(): TBLR<number> {
return new TBLR( 0 );
}
/**
* Begin polling config data list to see if we need to drawn more points.
*
......
......@@ -29,7 +29,7 @@ export declare class GistCanvas {
* @param {string} [background]
* @memberof GistCanvas
*/
clearCanvas(background?: string): void;
clearCanvas(background?: string, margin?: number): void;
/**
* Draw this canvas on another canvas at the given offset
*
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
......@@ -154,6 +154,5 @@ export declare abstract class BaseAxisImplementation<T> {
getOffset(): number;
getMinMargin(): TBLR<number>;
abstract valueToWidth(value: T): number;
private getChartBuffer();
abstract getAxisLabels(): Array<AxisLabel>;
}
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment