victory-native/src/cartesian/hooks/useBarWidth.ts

[](https://commerce.nearform.com/open-source/victory-native/)

import React from "react";
import type { ChartBounds, PointsArray } from "../../types";
import type { RoundedCorners } from "../../utils/createRoundedRectPath";

type Props = {
  points: PointsArray | PointsArray[];
  chartBounds: ChartBounds;
  innerPadding: number;
  roundedCorners?: RoundedCorners;
  customBarWidth?: number;
  barCount?: number;
};
export const useBarWidth = ({
  customBarWidth,
  chartBounds,
  innerPadding,
  barCount,
  points,
}: Props) => {
  // stacked bars pass a PointsArray[] type which requires us to get
  // the points length from the length of the first entry.
  const pointsLength =
    points.length > 0 && Array.isArray(points[0])
      ? points[0].length
      : points.length;

  const barWidth = React.useMemo(() => {
    if (customBarWidth) return customBarWidth;
    const domainWidth = chartBounds.right - chartBounds.left;

    const numerator = (1 - innerPadding) * domainWidth;

    const denominator = barCount
      ? barCount
      : pointsLength - 1 <= 0
        ? // don't divide by 0 if there's only one data point
          pointsLength
        : pointsLength - 1;

    const barWidth = numerator / denominator;

    return barWidth;
  }, [
    customBarWidth,
    chartBounds.left,
    chartBounds.right,
    innerPadding,
    pointsLength,
    barCount,
  ]);
  return barWidth;
};