in src/visual.ts [659:750]
private calculateAxes() {
let showAxisTitle: boolean = this.data.settings.categoryAxis.showAxisTitle,
categoryAxisLabelColor: string = this.data.settings.categoryAxis.labelColor,
xShow: boolean = this.data.settings.categoryAxis.show,
valueAxisLabelColor: string = this.data.settings.valueAxis.labelColor,
yShow: boolean = this.data.settings.valueAxis.show;
this.viewport.height -= StreamGraph.TickHeight + (showAxisTitle ? StreamGraph.XAxisLabelSize : 0);
let effectiveWidth: number = Math.max(0, this.viewport.width - this.margin.left - (this.margin.right + this.data.xAxisValueMaxTextHalfSize));
let effectiveHeight: number = Math.max(0, this.viewport.height - (this.margin.top + this.data.yAxisFontHalfSize) - this.margin.bottom + (showAxisTitle ? StreamGraph.XAxisLabelSize : 0));
let metaDataColumnPercent: powerbi.DataViewMetadataColumn = {
displayName: this.localizationManager.getDisplayName(ColumnDisplayName),
type: ValueType.fromDescriptor({ numeric: true }),
objects: {
general: {
formatString: "0 %",
}
}
};
if (xShow) {
const axisOptions: CreateAxisOptions = {
pixelSpan: effectiveWidth,
dataDomain: [this.data.xMinValue, this.data.xMaxValue],
metaDataColumn: this.data.metadata,
outerPadding: StreamGraph.outerPadding,
formatString: null,
isScalar: true,
isVertical: false,
// todo fix types issue
getValueFn: (value, dataType): any => {
if (dataType.dateTime) {
return new Date(value);
} else if (dataType.text) {
return this.data.categoriesText[value];
}
return value;
}
};
this.xAxisProperties = AxisHelper.createAxis(axisOptions);
this.axisX.call(this.xAxisProperties.axis);
this.axisX
.style("fill", categoryAxisLabelColor)
.style("stroke", categoryAxisLabelColor)
.style("font-size", this.data.settings.categoryAxis.fontSize);
let transformParams: any[] = [
StreamGraph.AxisTextNodeTextAnchorForAngel0,
StreamGraph.AxisTextNodeDXForAngel0,
StreamGraph.AxisTextNodeDYForAngel0
];
const xAxisTextNodes: Selection<d3.BaseType, any, any, any> = this.axisX.selectAll("text");
this.setTextNodesPosition.apply(this, [xAxisTextNodes].concat(transformParams));
}
if (yShow) {
this.yAxisProperties = AxisHelper.createAxis({
pixelSpan: effectiveHeight,
dataDomain: [this.data.yMinValue, this.data.yMaxValue],
metaDataColumn: metaDataColumnPercent,
formatString: null,
outerPadding: StreamGraph.outerPadding,
isCategoryAxis: false,
isScalar: true,
isVertical: true,
useTickIntervalForDisplayUnits: true
});
this.axisY.call(this.yAxisProperties.axis);
this.axisY
.style("fill", valueAxisLabelColor)
.style("stroke", valueAxisLabelColor)
.style("font-size", this.data.settings.valueAxis.fontSize);
}
this.renderXAxisLabels();
this.renderYAxisLabels();
this.axes.attr("transform", translate(this.margin.left, 0));
this.axisX.attr("transform", translate(0, this.viewport.height - this.margin.bottom));
this.axisY.attr("transform", translate(0, (this.margin.top + this.data.yAxisFontHalfSize)));
this.toggleAxisVisibility(xShow, StreamGraph.XAxis.className, this.axisX);
this.toggleAxisVisibility(yShow, StreamGraph.YAxis.className, this.axisY);
}