function HeatStreamsChart()

in packages/react-heat-streams/src/components/HeatStreamsChart.tsx [78:201]
123 lines of code
2 McCabe index (conditional complexity)

	function HeatStreamsChart({
		colorizer,
		width,
		height,
		categories,
		categoryValues,
		xDomain,
		numericAggregation = 1,
		dateAggregation = DateAggregation.Days,
		selections = DEFAULT_SELECTIONS,
		highlightColor = DEFAULT_HIGHLIGHT_COLOR,
		timeScrub = undefined,
		showCategories = true,
		showValues = false,
		textColor = DEFAULT_TEXT_COLOR,
		rowGap = DEFAULT_ROW_GAP,
		zoomLevel = DEFAULT_ZOOM_LEVEL,
		numTicks = DEFAULT_NUM_TICKS,
		axisHeight = DEFAULT_AXIS_HEIGHT,
		rowHeight = DEFAULT_ROW_HEIGHT,
		textPercent = DEFAULT_TEXT_PERCENT,
		onClickCategory = NO_OP,
		onClearSelection = NO_OP,
		onScrub = NO_OP,
	}) {
		const [panPosition, scrollPosition, onScroll] = usePanScroll(zoomLevel)
		const xScale = useXScale(
			showCategories,
			width,
			textPercent,
			zoomLevel,
			xDomain,
		)
		const axisOffset = useAxisOffset(
			height,
			axisHeight,
			rowHeight,
			categories.length,
		)
		const sliceWidth = useSliceWidth(
			xDomain,
			xScale,
			numericAggregation,
			dateAggregation,
		)
		const categoryY = useCategoryY(rowHeight, rowGap ? 1 : 0)
		const isCategorySelected = useCallback(
			(cat: ICategory): boolean => !!selections[cat.id],
			[selections],
		)
		const categoryTextWidth = width * textPercent
		const chartWidth = width - categoryTextWidth
		const maxCategories = useMaxCategories(
			rowGap,
			height,
			rowHeight,
			axisHeight,
		)
		const categoryOffsetStart = useCategoryOffsetStart(
			categories,
			scrollPosition,
			rowHeight,
			maxCategories,
		)
		const categoriesInView = useCategoriesInView(
			categories,
			maxCategories,
			categoryOffsetStart,
		)
		const onClick = useOnClickHandler(
			categoriesInView,
			rowHeight,
			rowGap,
			timeScrub,
			onClearSelection,
			onClickCategory,
		)

		return (
			<svg height={height} width={width}>
				<defs>
					<clipPath id="clip-chart">
						<rect
							x={categoryTextWidth}
							y="0"
							width={chartWidth}
							height={height}
						/>
					</clipPath>
					<clipPath id="clip-category-text">
						<rect x="0" y="0" width={categoryTextWidth} height={height} />
					</clipPath>
				</defs>
				<CategoryList
					height={height}
					width={width}
					axisHeight={axisHeight}
					axisOffset={axisOffset}
					categoryY={categoryY}
					categories={categoriesInView}
					categoryValues={categoryValues}
					textPercent={textPercent}
					showCategories={showCategories}
					rowHeight={rowHeight}
					highlightColor={highlightColor}
					showValues={showValues}
					colorizer={colorizer}
					xScale={xScale}
					xDomain={xDomain}
					numAxisTicks={numTicks}
					textColor={textColor}
					isCategorySelected={isCategorySelected}
					sliceWidth={sliceWidth}
					onClickCategory={onClickCategory}
					onClick={onClick}
					onScroll={onScroll}
					onScrub={onScrub}
					xPan={panPosition}
					timeScrub={timeScrub}
					onClear={onClearSelection}
				/>
			</svg>
		)
	},