boxplot now has getBandThickness implemented

.vscode/tasks.json

@@ -19,7 +19,8 @@
       "group": {
         "kind": "build",
         "isDefault": true
-      }
+      },
+      "problemMatcher": []
     }
   ]
 }
\ No newline at end of file

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

@@ -17,6 +17,8 @@ let max = 1000;
 let boxCount = 10;
 let isVertical = false;
 
+let isCategorical = false;
+
 @Component({
   selector: 'app-boxplot-demo',
   templateUrl: './boxplot-demo.component.html',
@@ -32,17 +34,12 @@ export class BoxplotDemoComponent {
       let primaryAxis, secondaryAxis;
       if ( isVertical ) {
           primaryAxis = new ContinuousAxis( 'left' );
-          secondaryAxis = new CategoricalAxis<number>( 'bottom' );
-          // secondaryAxis = new ContinuousAxis( 'bottom' );
+          secondaryAxis =  isCategorical ? new CategoricalAxis<number>( 'bottom' ) : new ContinuousAxis( 'bottom' );
       } else {
           primaryAxis = new ContinuousAxis( 'bottom' );
-          secondaryAxis = new CategoricalAxis<number>( 'left' );
-          // secondaryAxis = new ContinuousAxis( 'left' );
+          secondaryAxis =  isCategorical ? new CategoricalAxis<number>( 'left' ) : new ContinuousAxis( 'left' );
       }
 
-      secondaryAxis.valueToWidth = () => { return 20; };
-
-
       let boxPlot = new BoxPlot();
       boxPlot.primaryAxis = primaryAxis;
       boxPlot.secondaryAxis = secondaryAxis;
@@ -50,14 +47,22 @@ export class BoxplotDemoComponent {
       let scatterChart = new ScatterChart();
 
       scatterChart.shouldCenterBandY = true;
-      // boxPlot.shouldCenterBandY = true;
 
+      if ( !isCategorical ) {
+          boxPlot.shouldCenterBandY = true;
+
+            boxPlot.getBandThickness = () => {
+                return 20;
+            };
+      }
 
       primaryAxis.explicitBounds = [min, max];
 
       secondaryAxis.explicitCategories = [];
+      secondaryAxis.explicitBounds = [0, boxCount];
       while ( secondaryAxis.explicitCategories.length < boxCount ) {
           secondaryAxis.explicitCategories.push( secondaryAxis.explicitCategories.length );
+
       }
 
       me.chart = new ChartCanvas( me.drawSpace.nativeElement );

gist-charts/source/behaviors/panBehavior.class.ts

@@ -30,7 +30,7 @@ export class PanBehavior extends GistBehavior {
         eventNames: SupportedPanEvent | SupportedPanEvent[] =  'mousedrag' ,
         throttleTime: number = 15,
     ) {
-        let givenEvents = makeList( eventNames );
+        let givenEvents:string[] = makeList( eventNames );
         let dragIndex = givenEvents.indexOf( 'mousedrag' );
         if ( dragIndex !== -1 ) {
             givenEvents.splice( dragIndex, 1, 'mousedown' , 'mousemove'  , 'mouseup' );

gist-charts/source/configs/charts/boxPlot/boxPlot.class.ts

@@ -3,7 +3,7 @@ import { BaseAxis } from '../../axis/baseAxis.class';
 import { BoxPlotImplementation } from '../../../implementations/charts/boxPlotImplementation.class';
 import { BoxPlotData } from './boxPlotData.class';
 import { BaseChart } from '../baseChart.class';
-
+import { DataPoint } from '../../../classes/datapoint.class';
 
 export class BoxPlot extends BaseChart<BoxPlotData> {
     _implementation: BoxPlotImplementation = new BoxPlotImplementation( this );
@@ -11,6 +11,21 @@ export class BoxPlot extends BaseChart<BoxPlotData> {
     public primaryAxis: BaseAxis | undefined;
     public secondaryAxis: BaseAxis | undefined;
 
+    /**
+     * How wide should the box plots be drawn? by default this is determined by the axis. Categorical axis will give the width of the corresponding category. While continuous axis will return the size of the stroke.
+     * You can overwrite this behavior by redefining this function.
+     *
+     * @memberof BoxPlot
+     */
+    public getBandThickness: ( ( datapoint?: BoxPlotData ) => number ) = ( datapoint?: BoxPlotData ) => {
+        let ret: number = 0;
+        if ( this.secondaryAxis ) {
+            let bandValue = this.secondaryAxis.getValue( datapoint as DataPoint );
+            ret = this.secondaryAxis._implementation.valueToWidth(bandValue);
+        }
+        return ret;
+    }
+
     public getStyle( box: BoxPlotData ): BoxPlotStyle {
         return new BoxPlotStyle();
     }

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

@@ -26,7 +26,7 @@ export class BoxPlotImplementation extends BaseChartImplementation {
         //define the width of the box
         let bandValue = secondaryAxis.getValue( plot );
 
-        let bandWidth = secondaryAxis._implementation.valueToWidth( bandValue );
+        let bandWidth = me.chart.getBandThickness( plot );
         let bandStart = me.valueToPx( secondaryAxis, bandValue )
         if( secondaryAxis._implementation.isVertical && me.chart.shouldCenterBandY ){
             bandStart -= bandWidth /2;

package/configs/charts/boxPlot/boxPlot.class.d.ts

@@ -7,6 +7,13 @@ export declare class BoxPlot extends BaseChart<BoxPlotData> {
     _implementation: BoxPlotImplementation;
     primaryAxis: BaseAxis | undefined;
     secondaryAxis: BaseAxis | undefined;
+    /**
+     * How wide should the box plots be drawn? by default this is determined by the axis. Categorical axis will give the width of the corresponding category. While continuous axis will return the size of the stroke.
+     * You can overwrite this behavior by redefining this function.
+     *
+     * @memberof BoxPlot
+     */
+    getBandThickness: ((datapoint?: BoxPlotData) => number);
     getStyle(box: BoxPlotData): BoxPlotStyle;
     drawCountPerRender: number;
 }

readme.md

@@ -121,6 +121,8 @@ Each LineChartData will be drawn as a single line on the chart. The entire line,
   * The whiskers of the boxplot will stretch out from the core box along this axis.
 * <strong>secondaryAxis</strong>: BaseAxis ( has to be set or will not drawn )
   * The box plot items will use this axis to determine the width of each item drawn.
+* <strong>getBandThickness</strong>:  ( datapoint?: BoxPlotData ) => number
+    * How wide should the box plots be drawn? by default this is determined by the axis. Categorical axis will give the width of the corresponding category. While continuous axis will return the size of the stroke. You can overwrite this behavior by redefining this function.
 
 ### RadialChart <small>extends BaseChart</small>
 Note: radial chart close enough property only works on the inner and outer radius. It will not consider the point if is not between the start and stop angles.