railbird-gql/component/charts/custom-bar-utils.ts

import { path as d3 } from "d3-path";

import { ScaleBandType, ScaleLinearType } from "./graph-types";

type BarCalculationProps = {
	scaleX: ScaleBandType;
	scaleY: ScaleLinearType;
	data: { value: number };
	barNumber: number;
	index: number;
	barWidth: number;
	gap: number;
};

export function calculateBarOrigin({
	scaleX,
	scaleY,
	barWidth,
	data,
	index,
	barNumber,
	gap,
}: BarCalculationProps): { xOrigin: number; yOrigin: number; height: number } {
	const firstBar = barNumber === 0;
	const xOrigin =
		scaleX(index) + (firstBar ? 0 : barWidth * barNumber + gap * barNumber);
	const yOrigin = scaleY(data.value);
	const height = scaleY(0) - yOrigin;

	return { xOrigin, yOrigin, height };
}

export function drawBarPath(
	xOrigin: number,
	yOrigin: number,
	barWidth: number,
	height: number,
	roundedRadius: number,
): string {
	const path = d3();
	path.moveTo(xOrigin, yOrigin + height);
	path.lineTo(xOrigin, yOrigin + roundedRadius);
	path.arcTo(xOrigin, yOrigin, xOrigin + roundedRadius, yOrigin, roundedRadius);
	path.lineTo(xOrigin + barWidth - roundedRadius, yOrigin);
	path.arcTo(
		xOrigin + barWidth,
		yOrigin,
		xOrigin + barWidth,
		yOrigin + roundedRadius,
		roundedRadius,
	);
	path.lineTo(xOrigin + barWidth, yOrigin + height);
	path.lineTo(xOrigin, yOrigin + height);
	path.closePath();

	return path.toString();
}

export const calculateBarWidth = (
	bandwidth: number,
	combinedDataLength: number,
	gap: number,
) => (bandwidth - gap * (combinedDataLength - 1)) / combinedDataLength;