Commit bb5a07bc authored by David Anderson's avatar David Anderson
Browse files

boxplot now has getBandThickness implemented

parent 3602c0ce
......@@ -19,7 +19,8 @@
"group": {
"kind": "build",
"isDefault": true
}
},
"problemMatcher": []
}
]
}
\ No newline at end of file
......@@ -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 );
......
......@@ -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' );
......
......@@ -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();
}
......
......@@ -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;
......
......@@ -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;
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
......@@ -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.
......
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