in src/visualComponent/plotComponent.ts [94:226]
public render(options: IVisualComponentRenderOptions): void {
const {
x,
margin,
groups: [firstGroup, secondGroup],
viewport,
settings: {
xAxis,
yAxis,
secondaryYAxis,
},
} = options.data;
if (!firstGroup && !secondGroup) {
this.hide();
return;
}
this.show();
this.updateViewport(viewport);
const reducedViewport: powerbi.IViewport = {
height: viewport.height,
width: Math.max(0, viewport.width - this.additionalWidthOffset),
};
this.xAxisComponent.preRender({
additionalMargin: null,
axis: x,
margin: null,
settings: xAxis,
viewport: null,
});
this.yAxisComponent.preRender({
axis: firstGroup && firstGroup.y,
margin: null,
settings: yAxis,
viewport: null,
});
this.secondaryYAxisComponent.preRender({
axis: secondGroup && secondGroup.y,
margin: null,
settings: secondaryYAxis,
viewport: null,
});
const xAxisViewport: IVisualComponentViewport = this.xAxisComponent.getViewport();
const maxYAxisHeight: number = Math.max(
this.yAxisComponent.getViewport().height,
this.secondaryYAxisComponent.getViewport().height,
);
const height: number = Math.max(
0,
reducedViewport.height - xAxisViewport.height - maxYAxisHeight,
);
this.yAxisComponent.render({
axis: firstGroup && firstGroup.y,
margin,
settings: yAxis,
viewport: {
height,
width: reducedViewport.width,
},
});
this.secondaryYAxisComponent.render({
axis: secondGroup && secondGroup.y,
margin,
settings: secondaryYAxis,
viewport: {
height,
width: reducedViewport.width,
},
});
const yAxisViewport: IVisualComponentViewport = this.yAxisComponent.getViewport();
const secondaryYAxisViewport: IVisualComponentViewport = this.secondaryYAxisComponent.getViewport();
const leftOffset: number = this.getOffset(xAxisViewport.width, yAxisViewport.width);
const rightOffset: number = this.getOffset(xAxisViewport.width2, secondaryYAxisViewport.width);
const width: number = Math.max(0,
reducedViewport.width
- yAxisViewport.width
- secondaryYAxisViewport.width
- leftOffset
- rightOffset,
);
this.xAxisComponent.render({
additionalMargin: {
bottom: 0,
left: yAxisViewport.width + leftOffset,
right: 0,
top: 0,
},
axis: x,
margin,
settings: xAxis,
viewport: {
height: reducedViewport.height,
width,
},
});
this.svgComponent.render({
additionalMargin: {
bottom: 0,
left: leftOffset,
right: 0,
top: 0,
},
data: {
...options.data,
margin,
viewport: {
height,
width,
},
},
xTicks: this.xAxisComponent.getTicks(),
yTicks: this.yAxisComponent.getTicks(),
secondaryYTicks: this.secondaryYAxisComponent.getTicks(),
});
}