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

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

import { ScaleFunction } from './graph-types';

type BarCalculationProps = {
  scaleX: ScaleFunction;
  scaleY: ScaleFunction;
  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;