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