private drawBottomContainer()

in src/visual.ts [1032:1082]


    private drawBottomContainer(chartWidth: number, chartHeight: number, chartTitleSpace: number, chartSpaceBetween: number, iconOffset: number): void {
        let infoIconShowing = false;

        let chartTitleElement = this.bottomContainer.chartTitleElement
            .attr("class", "title")
            .classed(this.sizeCssClass, true)
            .text(this.data.settings.dualKpiProperties.titleText);

        let iconWidth = 22;
        let iconScaleTransform = "";
        let iconY = (-chartTitleSpace + (chartTitleSpace / 2) + iconOffset);

        if (this.size === DualKpiSize.small || this.size === DualKpiSize.extrasmall || this.size === DualKpiSize.supersmall) {
            iconScaleTransform = "scale(0.75)";
            iconWidth = 16;
        }

        // add warning icon
        if (this.data.warningState < 0) {
            this.createWarningMessage(chartTitleElement, iconY, iconScaleTransform, iconWidth);
        }

        // add info icon
        if (this.data.topValues.length > 0) {
            let today = new Date();
            let dataDaysOld = DualKpi.getDaysBetween(this.data.topValues[this.data.topValues.length - 1].date, today);
            if (dataDaysOld >= this.data.settings.dualKpiProperties.staleDataThreshold && this.data.settings.dualKpiProperties.showStaleDataWarning) {
                infoIconShowing = true;
                this.createInfoMessage(iconY, iconScaleTransform, iconWidth, chartWidth, dataDaysOld);
            } else {
                this.hideInfoMessage();
            }

            // add day range text
            let dayRange = DualKpi.getDaysBetween(this.data.topValues[0].date, this.data.topValues[this.data.topValues.length - 1].date);
            let dayRangeElement = this.bottomContainer.dateRangeText;
            dayRangeElement
                .attr("class", "date-range-text")
                .classed(this.sizeCssClass, true)
                .text(this.localizationManager.getDisplayName("Visual_BottomContainerText_Last") + dayRange + this.localizationManager.getDisplayName("Visual_BottomContainerText_Days"));

            let dayRangeLeft = chartWidth - 8;
            if (infoIconShowing) {
                dayRangeLeft -= (iconWidth); // width of icon + 8px padding
            }
            dayRangeElement.attr("transform", "translate(" + (dayRangeLeft) + ",0)");
        }

        this.bottomContainer.bottomContainer.attr("transform", "translate(5," + (this.viewport.height - 5) + ")");
        this.bottomContainer.bottomContainer.classed(DualKpi.INVISIBLE, false);
    }