in src/visualComponent/kpi/kpiComponent.ts [164:205]
private applyStyleBasedOnLayout(
layoutSettings: LayoutDescriptor,
legend: LegendDescriptor,
viewport: powerbi.IViewport,
): void {
let currentLayout: LayoutToStyleEnum;
let kpiLayout: KPIComponentLayoutEnum;
let maxWidth: string;
switch (LayoutEnum[layoutSettings.getLayout()]) {
case LayoutEnum.Left:
case LayoutEnum.Right: {
kpiLayout = KPIComponentLayoutEnum.kpiComponentColumn;
maxWidth = null;
if (!legend.show
|| (LegendPosition[legend.position]
&& (LegendPosition[legend.position] === LegendPosition.Bottom
|| LegendPosition[legend.position] === LegendPosition.BottomCenter))
) {
currentLayout = LayoutToStyleEnum.columnReversedLayout;
} else {
currentLayout = LayoutToStyleEnum.columnLayout;
}
break;
}
case LayoutEnum.Bottom:
case LayoutEnum.Top:
default: {
currentLayout = LayoutToStyleEnum.rowLayout;
kpiLayout = KPIComponentLayoutEnum.kpiComponentRow;
maxWidth = pixelConverter.toString(Math.floor(viewport.width));
break;
}
}
this.element
.style("max-width", maxWidth)
.attr("class", `${this.className} ${LayoutToStyleEnum[currentLayout]} ${KPIComponentLayoutEnum[kpiLayout]}`);
}