in src/columnChart/baseColumnChart.ts [1530:1638]
public calculateAxesProperties(options: MekkoCalculateScaleAndDomainOptions): IAxisProperties[] {
const data: MekkoColumnChartData = this.data;
this.currentViewport = options.viewport;
this.margin = options.margin;
const origCategorySize: number = data && data.categories
? data.categories.length
: 0;
const chartLayout: MekkoChartCategoryLayout = data
? this.getCategoryLayout(origCategorySize, options)
: {
categoryCount: 0,
categoryThickness: MekkoChart.MinOrdinalRectThickness,
outerPaddingRatio: MekkoChart.OuterPaddingRatio,
isScalar: false
};
this.categoryAxisType = chartLayout.isScalar
? axisType.scalar
: null;
this.columnChart.setData(data);
const preferredPlotArea: IViewport = this.getPreferredPlotArea(
chartLayout.isScalar,
chartLayout.categoryCount,
chartLayout.categoryThickness);
/**
* preferredPlotArea would be same as currentViewport width when there is no scrollbar.
* In that case we want to calculate the available plot area for the shapes by subtracting the margin from available viewport
*/
if (preferredPlotArea.width === this.currentViewport.width) {
preferredPlotArea.width -= (this.margin.left + this.margin.right);
}
preferredPlotArea.height -= (this.margin.top + this.margin.bottom);
// When the category axis is scrollable the height of the category axis and value axis will be different
// The height of the value axis would be same as viewportHeight
const chartContext: MekkoColumnChartContext = {
height: preferredPlotArea.height,
width: preferredPlotArea.width,
duration: 0,
hostService: this.visualHost,
unclippedGraphicsContext: this.unclippedGraphicsContext,
mainGraphicsContext: this.mainGraphicsContext,
labelGraphicsContext: this.labelGraphicsContext,
margin: this.margin,
layout: chartLayout,
interactivityService: this.interactivityService,
viewportHeight: this.currentViewport.height - (this.margin.top + this.margin.bottom),
viewportWidth: this.currentViewport.width - (this.margin.left + this.margin.right),
is100Pct: BaseColumnChart.Is100Pct,
isComboChart: true,
};
this.columnChart.setupVisualProps(chartContext);
const isBarChart: boolean = EnumExtensions.hasFlag(this.chartType, flagBar);
if (isBarChart) {
[options.forcedXDomain, options.forcedYDomain] = [options.forcedYDomain, options.forcedXDomain];
}
this.xAxisProperties = this.columnChart.setXScale(
BaseColumnChart.Is100Pct,
options.forcedTickCount,
options.forcedXDomain,
isBarChart
? options.valueAxisScaleType
: options.categoryAxisScaleType);
this.yAxisProperties = this.columnChart.setYScale(
BaseColumnChart.Is100Pct,
options.forcedTickCount,
options.forcedYDomain,
isBarChart
? options.categoryAxisScaleType
: options.valueAxisScaleType);
if (options.showCategoryAxisLabel
&& this.xAxisProperties.isCategoryAxis
|| options.showValueAxisLabel
&& !this.xAxisProperties.isCategoryAxis) {
this.xAxisProperties.axisLabel = data.axesLabels.x;
}
else {
this.xAxisProperties.axisLabel = null;
}
if (options.showValueAxisLabel
&& !this.yAxisProperties.isCategoryAxis
|| options.showCategoryAxisLabel
&& this.yAxisProperties.isCategoryAxis) {
this.yAxisProperties.axisLabel = data.axesLabels.y;
}
else {
this.yAxisProperties.axisLabel = null;
}
return [
this.xAxisProperties,
this.yAxisProperties
];
}