Repository: twentyhq/twenty
File: packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/CustomBarItem.tsx (TypeScript)

Code before:
  bar: { data: barData },
  style: { borderColor, color, height, transform, width },
  borderRadius,
  borderWidth,
  isInteractive,
  isFocusable,
  ariaLabel,
  ariaLabelledBy,
  ariaDescribedBy,
  ariaDisabled,
  ariaHidden,
  shouldRoundFreeEnd,
  seriesIndex,
  isDimmed,
  isSliceHovered,
  layout = BarChartLayout.VERTICAL,
  chartId,
}: CustomBarItemProps<D>) => {
  const isNegativeValue = isNumber(barData.value) && barData.value < 0;

  const isHorizontal = layout === BarChartLayout.HORIZONTAL;
  const clipPathId = `round-corner-${chartId ?? 'chart'}-${barData.index}-${
    seriesIndex >= 0 ? seriesIndex : 'x'
  }`;

  const clipPathX = !isHorizontal ? 0 : isNegativeValue ? 0 : -borderRadius;
  const clipPathY = isHorizontal ? 0 : isNegativeValue ? -borderRadius : 0;

  const barInterpolations = useMemo(() => {
    const unconstrainedThicknessDimension = isHorizontal ? height : width;
    const unconstrainedValueDimension = isHorizontal ? width : height;

    const constrainedThicknessDimension = to(
      unconstrainedThicknessDimension,
      (dimension) => Math.min(dimension, BAR_CHART_CONSTANTS.MAXIMUM_WIDTH),
    );

    const centeringOffset = to(unconstrainedThicknessDimension, (dimension) =>
      dimension > BAR_CHART_CONSTANTS.MAXIMUM_WIDTH
        ? (dimension - BAR_CHART_CONSTANTS.MAXIMUM_WIDTH) / 2
        : 0,
    );

    const centeringTransform = to(centeringOffset, (offset) =>
      isHorizontal ? `translate(0, ${offset})` : `translate(${offset}, 0)`,
    );

    const finalBarWidthDimension = isHorizontal
      ? unconstrainedValueDimension
      : constrainedThicknessDimension;


Review comment (suggestion):
```suggestion
  const clipPathX = !isHorizontal || isNegativeValue ? 0 : -borderRadius;
```

Code after:
  bar: { data: barData },
  style: { borderColor, color, height, transform, width },
  borderRadius,
  borderWidth,
  isInteractive,
  isFocusable,
  ariaLabel,
  ariaLabelledBy,
  ariaDescribedBy,
  ariaDisabled,
  ariaHidden,
  shouldRoundFreeEnd,
  seriesIndex,
  isDimmed,
  isSliceHovered,
  layout = BarChartLayout.VERTICAL,
  chartId,
}: CustomBarItemProps<D>) => {
  const isNegativeValue = isNumber(barData.value) && barData.value < 0;

  const isHorizontal = layout === BarChartLayout.HORIZONTAL;
  const clipPathId = `round-corner-${chartId ?? 'chart'}-${barData.index}-${
    seriesIndex >= 0 ? seriesIndex : 'x'
  }`;

  const clipPathX = !isHorizontal || isNegativeValue ? 0 : -borderRadius;
  const clipPathY = isHorizontal || !isNegativeValue ? 0 : -borderRadius;

  const barInterpolations = useMemo(() => {
    const unconstrainedThicknessDimension = isHorizontal ? height : width;
    const unconstrainedValueDimension = isHorizontal ? width : height;

    const constrainedThicknessDimension = to(
      unconstrainedThicknessDimension,
      (dimension) => Math.min(dimension, BAR_CHART_CONSTANTS.MAXIMUM_WIDTH),
    );

    const centeringOffset = to(unconstrainedThicknessDimension, (dimension) =>
      dimension > BAR_CHART_CONSTANTS.MAXIMUM_WIDTH
        ? (dimension - BAR_CHART_CONSTANTS.MAXIMUM_WIDTH) / 2
        : 0,
    );

    const centeringTransform = to(centeringOffset, (offset) =>
      isHorizontal ? `translate(0, ${offset})` : `translate(${offset}, 0)`,
    );

    const finalBarWidthDimension = isHorizontal
      ? unconstrainedValueDimension
      : constrainedThicknessDimension;