private render()

in src/timeLine.ts [1314:1407]


    private render(
        timelineData: ITimelineData,
        timelineSettings: Settings,
        timelineProperties: ITimelineProperties,
        options: powerbiVisualsApi.extensibility.visual.VisualUpdateOptions,
    ): void {
        const timelineDatapointsCount = this.timelineData.timelineDataPoints
            .filter((dataPoint: ITimelineDataPoint) => {
                return dataPoint.index % 1 === 0;
            })
            .length;

        this.svgWidth = Timeline.SvgWidthOffset
            + this.timelineProperties.cellHeight
            + timelineProperties.cellWidth * timelineDatapointsCount;

        this.renderTimeRangeText(timelineData, timelineSettings.rangeHeader);

        this.rootSelection
            .attr("drag-resize-disabled", true)
            .style("overflow-x", Timeline.DefaultOverflow)
            .style("overflow-y", Timeline.DefaultOverflow)
            .style("height", pixelConverter.toString(options.viewport.height))
            .style("width", pixelConverter.toString(options.viewport.width));

        const mainAreaHeight: number = timelineProperties.cellsYPosition
            + timelineProperties.cellHeight
            + Timeline.TimelineMargins.FramePadding
            - Timeline.TimelineMargins.LegendHeight;

        const mainSvgHeight: number = Timeline.TimelineMargins.TopMargin + mainAreaHeight;

        const mainSvgWrapperHeight: number = mainSvgHeight + Timeline.TimelineMargins.FramePadding;

        this.mainSvgWrapperSelection
            .style("height", pixelConverter.toString(Math.max(
                Timeline.MinSizeOfViewport,
                mainSvgWrapperHeight,
            )))
            .style("width",
                this.svgWidth < options.viewport.width
                    ? "100%"
                    : pixelConverter.toString(Math.max(
                        Timeline.MinSizeOfViewport,
                        this.svgWidth,
                    )));

        this.mainSvgSelection
            .attr("height", pixelConverter.toString(Math.max(
                Timeline.MinSizeOfViewport,
                mainSvgHeight,
            )))
            .attr("width", "100%");

        const fixedTranslateString: string = svgManipulation.translate(
            timelineProperties.leftMargin,
            timelineProperties.topMargin + this.timelineProperties.startYpoint,
        );

        // Here still Timeline.TimelineMargins.LegendHeight is used because it always must have permanent negative offset.
        const translateString: string = svgManipulation.translate(
            timelineProperties.cellHeight / Timeline.CellHeightDivider,
            timelineProperties.topMargin - (Timeline.TimelineMargins.LegendHeight - Timeline.TimelineMargins.FramePadding),
        );

        this.mainGroupSelection.attr("transform", translateString);

        if (this.selectorSelection) {
            this.selectorSelection.attr("transform", fixedTranslateString);
        }

        this.cursorGroupSelection.attr("transform", translateString);

        // Removing currently displayed labels
        this.mainGroupSelection
            .selectAll(Timeline.TimelineSelectors.TextLabel.selectorName)
            .remove();

        const yPos: number = this.renderBunchOfLabels(timelineSettings);

        this.renderCells(
            timelineData,
            timelineProperties,
            this.calculateYOffset(yPos),
        );

        this.renderCursors(
            timelineData,
            timelineProperties.cellHeight,
            this.calculateYOffset(yPos),
        );

        this.scrollAutoFocusFunc(this.selectedGranulaPos);
    }