margins are working

demo-angularIO/src/app/boxplot-demo/boxplot-demo.component.ts

@@ -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 ] );

gist-charts/source/classes/chartCanvas.class.ts

@@ -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;
             }

gist-charts/source/classes/gistCanvas.class.ts

@@ -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 );
             }
         }
     }

gist-charts/source/implementations/axis/baseAxisImplementation.class.ts

@@ -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>;
 
 

gist-charts/source/implementations/charts/baseChartImplementation.class.ts

@@ -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.
      *

package/classes/gistCanvas.class.d.ts

@@ -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
      *

package/implementations/axis/baseAxisImplementation.class.d.ts

@@ -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>;
 }