private applyStyleBasedOnLayout()

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]}`);
    }