function valueSegmentsTemplate()

in packages/attribute-slicer/src/slicerItemTemplate.ts [106:169]
54 lines of code
13 McCabe index (conditional complexity)

function valueSegmentsTemplate(
	valueSegments: ISlicerValueSegment[],
	showValueLabels: boolean,
	textOverflow: boolean,
): Selection<HTMLElement, {}, null, null>[] {
	return (valueSegments || [])
		.filter((n: ISlicerValueSegment) => n.width > 0)
		.map((s: ISlicerValueSegment) => {
			const { color, highlightWidth } = s;
			let backgroundColor: string = "";
			let fontColor: string = "#333";
			if (color) {
				backgroundColor = `${color}`;
				const d3Color: HCLColor = hcl(color);
				if (d3Color.l <= 60) {
					fontColor = "#ececec";
				}
			}

			// If we are highlighted at all, then make the background lighter so we can focus
			// on the highlighted
			if (typeof highlightWidth === "number") {
				const { r, g, b } = rgb(color);
				backgroundColor = `rgba(${r}, ${g}, ${b}, .2)`;
				fontColor = "#333";
			} else if (s.value && s.value < 0) {
				// If it is a negative value, then barbershop pole it
				const darker: RGBColor = rgb(color).darker();
				backgroundColor = `repeating-linear-gradient(45deg,${color},${color} 10px,${darker} 10px,${darker} 20px)`;
			}

			const displayValue: string | number = s.displayValue || s.value || "0";
			let barSpanClass: string = "value-display";
			let textSpanclass: string = showValueLabels
				? "always-display value"
				: "value";
			if (textOverflow) {
				barSpanClass += " overflow";
				textSpanclass += " overflow";
			}

			const ele = select(BASE_VALUE_SEGMENTS_TEMPLATE());
			ele
				.attr("title", (s.name ? `${s.name} - ` : "") + displayValue)
				.attr("class", barSpanClass)
				.attr(
					"style",
					`display:inline-block;width:${s.width}%;height:100%;position:relative;color:${fontColor};background:${backgroundColor}`,
				);

			const highlights = highlightsTemplate(s);
			if (highlights) {
				ele.append(() => highlights);
			}

			const textSpan = select(document.createElement("span"))
				.attr("class", textSpanclass)
				.text(displayValue);

			ele.append(() => textSpan.node());

			return ele;
		});
}