public render()

in src/granularity/granularityBase.ts [89:158]
54 lines of code
4 McCabe index (conditional complexity)

    public render(props: IGranularityRenderProps, isFirst: boolean): Selection<any, any, any, any> {
        const granularitySelection = props.selection
            .append("g")
            .attr("transform", svgManipulation.translate(0, 0));

        // render vetical line
        granularitySelection.append("rect")
            .classed("timelineVertLine", true)
            .attr("x", 0)
            .attr("y", 0)
            .attr("width", pixelConverter.toString(this.vLineWidth))
            .attr("height", pixelConverter.toString(this.vLineHeight));

        // render horizontal line
        if (!isFirst) {
            granularitySelection.append("rect")
                .classed("timelineHorzLine", true)
                .attr("x", pixelConverter.toString(0 - this.hLineXOffset))
                .attr("y", pixelConverter.toString(this.hLineYOffset))
                .attr("height", pixelConverter.toString(this.hLineHeight))
                .attr("width", pixelConverter.toString(this.hLineWidth));
        }

        // render marker
        granularitySelection.append("text")
            .classed("periodSlicerGranularities", true)
            .text(this.granularityProps.marker)
            .attr("x", pixelConverter.toString(0 - this.textLabelXOffset))
            .attr("y", pixelConverter.toString(0 - this.textLabelYOffset))
            .attr("dx", this.textLabelDx);

        // render slider
        if (props.granularSettings.granularity === this.granularityProps.granularityType) {
            this.renderSlider(
                granularitySelection,
                props.granularSettings,
            );
        }

        granularitySelection
            .append("rect")
            .classed("periodSlicerSelectionRect", true)
            .attr("x", pixelConverter.toString(0 - this.clickableRectWidth / this.clickableRectFactor))
            .attr("y", pixelConverter.toString(0 - this.clickableRectWidth / this.clickableRectFactor))
            .attr("width", pixelConverter.toString(this.clickableRectWidth))
            .attr("height", pixelConverter.toString(this.clickableRectHeight))
            .on("click", null)
            .on("click", () => {
                const event: MouseEvent = <MouseEvent>(require("d3").event);

                event.stopPropagation();

                props.selectPeriodCallback(this.granularityProps.granularityType);

                const sliderSelection = selectAll("rect.periodSlicerRect");

                if (sliderSelection) {
                    sliderSelection.remove();
                }

                this.renderSlider(
                    granularitySelection,
                    props.granularSettings,
                );
            });

        granularitySelection.attr("fill", props.granularSettings.scaleColor);

        return granularitySelection;
    }