private renderGranularityFrame()

in src/timeLine.ts [1181:1207]


    private renderGranularityFrame(granularity: GranularityType): void {
        d3SelectAll("g." + Timeline.TimelineSelectors.TimelineSlicer.className).remove();

        if (this.settings.granularity.show) {
            const startXpoint: number = this.timelineProperties.startXpoint;
            const elementWidth: number = this.timelineProperties.elementWidth;

            this.selectorSelection = this.headerSelection
                .append("g")
                .classed(Timeline.TimelineSelectors.TimelineSlicer.className, true);

            this.timelineGranularityData.renderGranularities({
                granularSettings: this.settings.granularity,
                selectPeriodCallback: (granularityType: GranularityType) => { this.selectPeriod(granularityType); },
                selection: this.selectorSelection,
            });

            // create selected period text
            this.selectorSelection
                .append("text")
                .attr("fill", this.settings.granularity.scaleColor)
                .classed(Timeline.TimelineSelectors.PeriodSlicerSelection.className, true)
                .text(this.localizationManager.getDisplayName(Utils.GET_GRANULARITY_NAME_KEY(granularity)))
                .attr("x", pixelConverter.toString(startXpoint + Timeline.SelectedTextSelectionFactor * elementWidth))
                .attr("y", pixelConverter.toString(Timeline.SelectedTextSelectionYOffset));
        }
    }