solid-recharts 0.1.0

package/src/state/selectors/barSelectors.ts

@@ -0,0 +1,319 @@
+// Ported from recharts 3.8.1 src/state/selectors/barSelectors.ts (commit 7a23854).
+// Solid-native plain selectors (no reselect). Stacks are deferred:
+// `selectBarStackGroups`/`selectStackedDataOfItem` return undefined, so
+// computeBarRectangles runs the unstacked path. Cells deferred (passed undefined).
+import { RechartsRootState } from "../store";
+import {
+  BaseAxisWithScale,
+  selectAxisWithScale,
+  selectCartesianAxisSize,
+  selectStackGroups,
+  selectTicksOfGraphicalItem,
+  selectUnfilteredCartesianItems,
+} from "./axisSelectors";
+import { combineStackedData } from "./combiners/combineStackedData";
+import type { StackSeries } from "../../util/stacks/stackTypes";
+import { isNullish } from "../../util/DataUtils";
+import { BarPositionPosition, getBandSizeOfAxis, StackId } from "../../util/ChartUtils";
+import { DataKey, LayoutType, TickItem } from "../../util/types";
+import { BarRectangleItem, computeBarRectangles } from "../../cartesian/Bar";
+import type { CellProps } from "../../component/Cell";
+import { selectChartLayout } from "../../context/chartLayoutContext";
+import { ChartData } from "../chartDataSlice";
+import { selectChartDataWithIndexesIfNotInPanoramaPosition3 } from "./dataSelectors";
+import { selectAxisViewBox, selectChartOffsetInternal } from "./selectChartOffsetInternal";
+import {
+  selectBarCategoryGap,
+  selectBarGap,
+  selectRootBarSize,
+  selectRootMaxBarSize,
+} from "./rootPropsSelectors";
+import { BarSettings } from "../types/BarSettings";
+import { GraphicalItemId } from "../graphicalItemsSlice";
+import { BarCategory, combineBarSizeList } from "./combiners/combineBarSizeList";
+import { combineAllBarPositions } from "./combiners/combineAllBarPositions";
+import {
+  selectXAxisIdFromGraphicalItemId,
+  selectYAxisIdFromGraphicalItemId,
+} from "./graphicalItemSelectors";
+import { combineBarPosition } from "./combiners/combineBarPosition";
+
+const selectSynchronisedBarSettings = (
+  state: RechartsRootState,
+  id: GraphicalItemId,
+): BarSettings | undefined => {
+  const item = selectUnfilteredCartesianItems(state).find((it) => it.id === id);
+  return item != null && item.type === "bar" ? item : undefined;
+};
+
+export const selectMaxBarSize = (
+  state: RechartsRootState,
+  id: GraphicalItemId,
+): number | undefined => selectSynchronisedBarSettings(state, id)?.maxBarSize;
+
+export const selectAllVisibleBars = (
+  state: RechartsRootState,
+  id: GraphicalItemId,
+  isPanorama: boolean,
+): ReadonlyArray<BarSettings> => {
+  const layout = selectChartLayout(state);
+  const xAxisId = selectXAxisIdFromGraphicalItemId(state, id);
+  const yAxisId = selectYAxisIdFromGraphicalItemId(state, id);
+  const bars: BarSettings[] = [];
+  for (const item of selectUnfilteredCartesianItems(state)) {
+    if (item.type !== "bar") {
+      continue;
+    }
+    const matchesAxis =
+      layout === "horizontal" ? item.xAxisId === xAxisId : item.yAxisId === yAxisId;
+    if (matchesAxis && item.isPanorama === isPanorama && item.hide === false) {
+      bars.push(item);
+    }
+  }
+  return bars;
+};
+
+export type SizeList = ReadonlyArray<BarCategory>;
+
+export type BarWithPosition = {
+  stackId: StackId | undefined;
+  dataKeys: ReadonlyArray<DataKey<unknown>>;
+  /** Position of this stack in absolute pixels from the start of the chart. */
+  position: BarPositionPosition;
+};
+
+export const selectBarCartesianAxisSize = (
+  state: RechartsRootState,
+  id: GraphicalItemId,
+): number | undefined => {
+  const layout = selectChartLayout(state);
+  const xAxisId = selectXAxisIdFromGraphicalItemId(state, id);
+  const yAxisId = selectYAxisIdFromGraphicalItemId(state, id);
+  if (xAxisId == null || yAxisId == null) {
+    return undefined;
+  }
+  if (layout === "horizontal") {
+    return selectCartesianAxisSize(state, "xAxis", xAxisId);
+  }
+  return selectCartesianAxisSize(state, "yAxis", yAxisId);
+};
+
+export const selectBarSizeList = (
+  state: RechartsRootState,
+  id: GraphicalItemId,
+  isPanorama: boolean,
+): SizeList =>
+  combineBarSizeList(
+    selectAllVisibleBars(state, id, isPanorama),
+    selectRootBarSize(state),
+    selectBarCartesianAxisSize(state, id),
+  );
+
+export const selectBarBandSize = (
+  state: RechartsRootState,
+  id: GraphicalItemId,
+  isPanorama: boolean,
+): number => {
+  const barSettings = selectSynchronisedBarSettings(state, id);
+  if (barSettings == null) {
+    return 0;
+  }
+  const xAxisId = selectXAxisIdFromGraphicalItemId(state, id);
+  const yAxisId = selectYAxisIdFromGraphicalItemId(state, id);
+  if (xAxisId == null || yAxisId == null) {
+    return 0;
+  }
+  const layout = selectChartLayout(state);
+  const globalMaxBarSize = selectRootMaxBarSize(state);
+  const { maxBarSize: childMaxBarSize } = barSettings;
+  const maxBarSize = isNullish(childMaxBarSize) ? globalMaxBarSize : childMaxBarSize;
+  let axis: BaseAxisWithScale | undefined;
+  let ticks: ReadonlyArray<TickItem> | undefined;
+  if (layout === "horizontal") {
+    axis = selectAxisWithScale(state, "xAxis", xAxisId, isPanorama);
+    ticks = selectTicksOfGraphicalItem(state, "xAxis", xAxisId, isPanorama);
+  } else {
+    axis = selectAxisWithScale(state, "yAxis", yAxisId, isPanorama);
+    ticks = selectTicksOfGraphicalItem(state, "yAxis", yAxisId, isPanorama);
+  }
+  return getBandSizeOfAxis(axis, ticks, true) ?? maxBarSize ?? 0;
+};
+
+export const selectAxisBandSize = (
+  state: RechartsRootState,
+  id: GraphicalItemId,
+  isPanorama: boolean,
+): number | undefined => {
+  const layout = selectChartLayout(state);
+  const xAxisId = selectXAxisIdFromGraphicalItemId(state, id);
+  const yAxisId = selectYAxisIdFromGraphicalItemId(state, id);
+  if (xAxisId == null || yAxisId == null) {
+    return undefined;
+  }
+  let axis: BaseAxisWithScale | undefined;
+  let ticks: ReadonlyArray<TickItem> | undefined;
+  if (layout === "horizontal") {
+    axis = selectAxisWithScale(state, "xAxis", xAxisId, isPanorama);
+    ticks = selectTicksOfGraphicalItem(state, "xAxis", xAxisId, isPanorama);
+  } else {
+    axis = selectAxisWithScale(state, "yAxis", yAxisId, isPanorama);
+    ticks = selectTicksOfGraphicalItem(state, "yAxis", yAxisId, isPanorama);
+  }
+  return getBandSizeOfAxis(axis, ticks);
+};
+
+export const selectAllBarPositions = (
+  state: RechartsRootState,
+  id: GraphicalItemId,
+  isPanorama: boolean,
+): ReadonlyArray<BarWithPosition> | undefined =>
+  combineAllBarPositions(
+    selectBarSizeList(state, id, isPanorama),
+    selectRootMaxBarSize(state),
+    selectBarGap(state),
+    selectBarCategoryGap(state),
+    selectBarBandSize(state, id, isPanorama),
+    selectAxisBandSize(state, id, isPanorama),
+    selectMaxBarSize(state, id),
+  );
+
+export const selectBarPosition = (
+  state: RechartsRootState,
+  id: GraphicalItemId,
+  isPanorama: boolean,
+): BarPositionPosition | undefined =>
+  combineBarPosition(
+    selectAllBarPositions(state, id, isPanorama),
+    selectSynchronisedBarSettings(state, id),
+  );
+
+const selectXAxisWithScale = (
+  state: RechartsRootState,
+  id: GraphicalItemId,
+  isPanorama: boolean,
+) => {
+  const xAxisId = selectXAxisIdFromGraphicalItemId(state, id);
+  return xAxisId == null ? undefined : selectAxisWithScale(state, "xAxis", xAxisId, isPanorama);
+};
+
+const selectYAxisWithScale = (
+  state: RechartsRootState,
+  id: GraphicalItemId,
+  isPanorama: boolean,
+) => {
+  const yAxisId = selectYAxisIdFromGraphicalItemId(state, id);
+  return yAxisId == null ? undefined : selectAxisWithScale(state, "yAxis", yAxisId, isPanorama);
+};
+
+const selectXAxisTicks = (state: RechartsRootState, id: GraphicalItemId, isPanorama: boolean) => {
+  const xAxisId = selectXAxisIdFromGraphicalItemId(state, id);
+  return xAxisId == null
+    ? undefined
+    : selectTicksOfGraphicalItem(state, "xAxis", xAxisId, isPanorama);
+};
+
+const selectYAxisTicks = (state: RechartsRootState, id: GraphicalItemId, isPanorama: boolean) => {
+  const yAxisId = selectYAxisIdFromGraphicalItemId(state, id);
+  return yAxisId == null
+    ? undefined
+    : selectTicksOfGraphicalItem(state, "yAxis", yAxisId, isPanorama);
+};
+
+const selectBarStackGroups = (
+  state: RechartsRootState,
+  id: GraphicalItemId,
+  isPanorama: boolean,
+) => {
+  const layout = selectChartLayout(state);
+  const xAxisId = selectXAxisIdFromGraphicalItemId(state, id);
+  const yAxisId = selectYAxisIdFromGraphicalItemId(state, id);
+  if (xAxisId == null || yAxisId == null) {
+    return undefined;
+  }
+  return layout === "horizontal"
+    ? selectStackGroups(state, "yAxis", yAxisId, isPanorama)
+    : selectStackGroups(state, "xAxis", xAxisId, isPanorama);
+};
+
+export const selectStackedDataOfItem = (
+  state: RechartsRootState,
+  id: GraphicalItemId,
+  isPanorama: boolean,
+): StackSeries | undefined =>
+  combineStackedData(
+    selectBarStackGroups(state, id, isPanorama),
+    selectSynchronisedBarSettings(state, id),
+  );
+
+export const selectBarRectangles = (
+  state: RechartsRootState,
+  id: GraphicalItemId,
+  isPanorama: boolean,
+  cells: ReadonlyArray<CellProps> | undefined,
+): ReadonlyArray<BarRectangleItem> | undefined => {
+  const axisViewBox = selectAxisViewBox(state);
+  const offset = selectChartOffsetInternal(state);
+  const xAxis = selectXAxisWithScale(state, id, isPanorama);
+  const yAxis = selectYAxisWithScale(state, id, isPanorama);
+  const xAxisTicks = selectXAxisTicks(state, id, isPanorama);
+  const yAxisTicks = selectYAxisTicks(state, id, isPanorama);
+  const pos = selectBarPosition(state, id, isPanorama);
+  const layout: LayoutType = selectChartLayout(state);
+  const { chartData, dataStartIndex, dataEndIndex } =
+    selectChartDataWithIndexesIfNotInPanoramaPosition3(state, id, isPanorama);
+  const bandSize = selectAxisBandSize(state, id, isPanorama);
+  const barSettings = selectSynchronisedBarSettings(state, id);
+  const stackedData = selectStackedDataOfItem(state, id, isPanorama);
+
+  if (
+    barSettings == null ||
+    pos == null ||
+    axisViewBox == null ||
+    offset == null ||
+    (layout !== "horizontal" && layout !== "vertical") ||
+    xAxis == null ||
+    yAxis == null ||
+    xAxisTicks == null ||
+    yAxisTicks == null ||
+    bandSize == null
+  ) {
+    return undefined;
+  }
+
+  const { data } = barSettings;
+  let displayedData: ChartData | undefined;
+  if (data != null && data.length > 0) {
+    displayedData = data;
+  } else {
+    displayedData = chartData?.slice(dataStartIndex, dataEndIndex + 1);
+  }
+
+  if (displayedData == null) {
+    return undefined;
+  }
+
+  // Stacked bars: each bar spans the [start, end] range from the stacked data
+  // (truncated to the numeric axis domain). The numeric axis is Y (horizontal) / X.
+  const numericAxis = layout === "horizontal" ? yAxis : xAxis;
+  const stackedDomain: ReadonlyArray<number> | null = stackedData
+    ? numericAxis.scale.domain().filter((d): d is number => typeof d === "number")
+    : null;
+
+  return computeBarRectangles({
+    layout,
+    barSettings,
+    pos,
+    offset,
+    parentViewBox: axisViewBox,
+    bandSize,
+    xAxis,
+    yAxis,
+    xAxisTicks,
+    yAxisTicks,
+    displayedData,
+    stackedData,
+    stackedDomain,
+    cells,
+    dataStartIndex,
+  });
+};

package/src/state/selectors/barStackSelectors.ts

@@ -0,0 +1,79 @@
+// Ported from recharts 3.8.1 src/state/selectors/barStackSelectors.ts (commit 7a23854).
+import type { RechartsRootState } from "../store";
+import type { NormalizedStackId } from "../../util/ChartUtils";
+import type { BarSettings } from "../types/BarSettings";
+import { selectUnfilteredCartesianItems } from "./axisSelectors";
+import { selectBarRectangles } from "./barSelectors";
+
+export const selectAllBarsInStack = (
+  state: RechartsRootState,
+  stackId: NormalizedStackId,
+  isPanorama: boolean,
+): ReadonlyArray<BarSettings> => {
+  return selectUnfilteredCartesianItems(state)
+    .filter((i): i is BarSettings => i.type === "bar" && i.stackId === stackId)
+    .filter((i) => i.isPanorama === isPanorama)
+    .filter((i) => !i.hide);
+};
+
+const selectAllBarIdsInStack = (
+  state: RechartsRootState,
+  stackId: NormalizedStackId,
+  isPanorama: boolean,
+): ReadonlyArray<string> => {
+  return selectAllBarsInStack(state, stackId, isPanorama).map((bar) => bar.id);
+};
+
+export type BarStackItem = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+/**
+ * Takes two rectangles and returns a new rectangle that encompasses both.
+ * It takes the minimum x and y, and the maximum width and height.
+ * It handles overlapping rectangles, and rectangles with a gap between them.
+ */
+export const expandRectangle = (
+  rect1: BarStackItem | undefined,
+  rect2: BarStackItem | undefined,
+): BarStackItem | undefined => {
+  if (!rect1) {
+    return rect2;
+  }
+  if (!rect2) {
+    return rect1;
+  }
+  const x = Math.min(rect1.x, rect1.x + rect1.width, rect2.x, rect2.x + rect2.width);
+  const y = Math.min(rect1.y, rect1.y + rect1.height, rect2.y, rect2.y + rect2.height);
+  const maxX = Math.max(rect1.x, rect1.x + rect1.width, rect2.x, rect2.x + rect2.width);
+  const maxY = Math.max(rect1.y, rect1.y + rect1.height, rect2.y, rect2.y + rect2.height);
+  const width = maxX - x;
+  const height = maxY - y;
+  return { x, y, width, height };
+};
+
+const combineStackRects = (
+  state: RechartsRootState,
+  stackId: NormalizedStackId,
+  isPanorama: boolean,
+): ReadonlyArray<BarStackItem | undefined> => {
+  const allBarIds = selectAllBarIdsInStack(state, stackId, isPanorama);
+  const stackRects: Array<BarStackItem | undefined> = [];
+  allBarIds.forEach((barId) => {
+    const rectangles = selectBarRectangles(state, barId, isPanorama, undefined);
+    rectangles?.forEach((rect) => {
+      const rectIndex = rect.originalDataIndex;
+      stackRects[rectIndex] = expandRectangle(stackRects[rectIndex], rect);
+    });
+  });
+  return stackRects;
+};
+
+export const selectStackRects = (
+  state: RechartsRootState,
+  stackId: NormalizedStackId,
+  isPanorama: boolean,
+): ReadonlyArray<BarStackItem | undefined> => combineStackRects(state, stackId, isPanorama);

package/src/state/selectors/brushSelectors.ts

@@ -0,0 +1,40 @@
+// Ported from recharts 3.8.1 src/state/selectors/brushSelectors.ts (commit 7a23854).
+//
+// Computes the brush's pixel rectangle from the registered BrushSettings + the
+// chart offset: explicit x/y/width win, otherwise the brush spans the plot width
+// and sits just below the plot area (the offset reserves `brush.height` at the
+// bottom and exposes `brushBottom` = the pre-brush bottom offset).
+import { RechartsRootState } from "../store";
+import { Margin } from "../../util/types";
+import { isNumber } from "../../util/DataUtils";
+import { selectChartOffsetInternal } from "./selectChartOffsetInternal";
+import { selectMargin } from "./containerSelectors";
+
+export interface BrushDimensions {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface BrushSettings {
+  padding: Margin;
+}
+
+export const selectBrushSettings = (state: RechartsRootState): BrushSettings | undefined => ({
+  padding: state.brush.padding,
+});
+
+export const selectBrushDimensions = (state: RechartsRootState): BrushDimensions => {
+  const brush = state.brush;
+  const offset = selectChartOffsetInternal(state);
+  const margin = selectMargin(state);
+  return {
+    height: brush.height,
+    x: isNumber(brush.x) ? brush.x : offset.left,
+    y: isNumber(brush.y)
+      ? brush.y
+      : offset.top + offset.height + offset.brushBottom - (margin.bottom || 0),
+    width: isNumber(brush.width) ? brush.width : offset.width,
+  };
+};

package/src/state/selectors/combiners/combineActiveLabel.ts

@@ -0,0 +1,21 @@
+// Ported from recharts 3.8.1 src/state/selectors/combiners/combineActiveLabel.ts.
+import { TickItem } from "../../../util/types";
+import { TooltipIndex } from "../../tooltipSlice";
+import { isNan } from "../../../util/DataUtils";
+import { ActiveLabel } from "../../../synchronisation/types";
+
+export const combineActiveLabel = (
+  tooltipTicks: ReadonlyArray<TickItem> | undefined,
+  activeIndex: TooltipIndex,
+): ActiveLabel => {
+  const n = Number(activeIndex);
+  if (isNan(n) || activeIndex == null) {
+    return undefined;
+  }
+  const value = n >= 0 ? tooltipTicks?.[n]?.value : undefined;
+  // Deviation: recharts types `TickItem.value` as `any` and returns it directly;
+  // the port types it `unknown`, so narrow to the declared ActiveLabel shape.
+  // A Date-valued tick (date axis) yields `undefined` here — that path lands with
+  // date-axis support; categorical (string/number) labels are unaffected.
+  return typeof value === "string" || typeof value === "number" ? value : undefined;
+};

package/src/state/selectors/combiners/combineActiveTooltipIndex.ts

@@ -0,0 +1,93 @@
+// Ported from recharts 3.8.1 src/state/selectors/combiners/combineActiveTooltipIndex.ts.
+// Deviation: `DataKey<unknown>` instead of `DataKey<any>`.
+import { TooltipIndex, TooltipInteractionState } from "../../tooltipSlice";
+import { ChartData } from "../../chartDataSlice";
+import { isWellBehavedNumber } from "../../../util/isWellBehavedNumber";
+import { CategoricalDomain, DataKey, NumberDomain } from "../../../util/types";
+import { getValueByDataKey } from "../../../util/ChartUtils";
+import { isWellFormedNumberDomain } from "../../../util/isDomainSpecifiedByUser";
+
+function toFiniteNumber(value: unknown): number | undefined {
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? value : undefined;
+  }
+  if (value instanceof Date) {
+    const numericValue = value.valueOf();
+    return Number.isFinite(numericValue) ? numericValue : undefined;
+  }
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : undefined;
+}
+
+function isValueWithinNumberDomain(value: unknown, domain: NumberDomain): boolean {
+  const numericValue = toFiniteNumber(value);
+  const lowerBound = domain[0];
+  const upperBound = domain[1];
+
+  if (numericValue === undefined) {
+    return false;
+  }
+
+  const min = Math.min(lowerBound, upperBound);
+  const max = Math.max(lowerBound, upperBound);
+  return numericValue >= min && numericValue <= max;
+}
+
+function isValueWithinDomain(
+  entry: unknown,
+  axisDataKey: DataKey<unknown> | undefined,
+  domain: NumberDomain | CategoricalDomain | undefined,
+): boolean {
+  if (domain == null || axisDataKey == null) {
+    return true;
+  }
+
+  const value = getValueByDataKey(entry, axisDataKey);
+  if (value == null) {
+    return true;
+  }
+
+  if (!isWellFormedNumberDomain(domain)) {
+    return true;
+  }
+
+  return isValueWithinNumberDomain(value, domain);
+}
+
+export const combineActiveTooltipIndex = (
+  tooltipInteraction: TooltipInteractionState | undefined,
+  chartData: ChartData,
+  axisDataKey?: DataKey<unknown>,
+  domain?: NumberDomain | CategoricalDomain,
+): TooltipIndex | null => {
+  const desiredIndex: TooltipIndex | undefined = tooltipInteraction?.index;
+  if (desiredIndex == null) {
+    return null;
+  }
+
+  const indexAsNumber = Number(desiredIndex);
+  if (!isWellBehavedNumber(indexAsNumber)) {
+    // Charts like Sankey and Treemap do not support numerical indexes.
+    return desiredIndex;
+  }
+
+  const lowerLimit = 0;
+  let upperLimit: number = +Infinity;
+
+  if (chartData.length > 0) {
+    upperLimit = chartData.length - 1;
+  }
+
+  const clampedIndex = Math.max(lowerLimit, Math.min(indexAsNumber, upperLimit));
+  const entry = chartData[clampedIndex];
+
+  if (entry == null) {
+    return String(clampedIndex);
+  }
+
+  if (!isValueWithinDomain(entry, axisDataKey, domain)) {
+    return null;
+  }
+
+  return String(clampedIndex);
+};

package/src/state/selectors/combiners/combineAllBarPositions.ts

@@ -0,0 +1,131 @@
+// Ported from recharts 3.8.1 src/state/selectors/combiners/combineAllBarPositions.ts
+// (commit 7a23854).
+import { getPercentValue, isNullish } from "../../../util/DataUtils";
+import { BarWithPosition, SizeList } from "../barSelectors";
+import { isWellBehavedNumber } from "../../../util/isWellBehavedNumber";
+import { BarPositionPosition } from "../../../util/ChartUtils";
+import { BarCategory } from "./combineBarSizeList";
+
+function getBarPositions(
+  barGap: string | number,
+  barCategoryGap: string | number,
+  bandSize: number | undefined,
+  sizeList: SizeList,
+  maxBarSize: number | undefined,
+): ReadonlyArray<BarWithPosition> | undefined {
+  const len = sizeList.length;
+  if (len < 1 || bandSize == null) {
+    return undefined;
+  }
+
+  let realBarGap = getPercentValue(barGap, bandSize, 0, true);
+
+  let result: ReadonlyArray<BarWithPosition>;
+  const initialValue: ReadonlyArray<BarWithPosition> = [];
+
+  // whether barSize is set by the user (only checks the first element, matching
+  // the reference).
+  if (isWellBehavedNumber(sizeList[0]?.barSize)) {
+    let useFull = false;
+    let fullBarSize: number = bandSize / len;
+    let sum = sizeList.reduce((res, entry) => res + (entry.barSize || 0), 0);
+    sum += (len - 1) * realBarGap;
+
+    if (sum >= bandSize) {
+      sum -= (len - 1) * realBarGap;
+      realBarGap = 0;
+    }
+    if (sum >= bandSize && fullBarSize > 0) {
+      useFull = true;
+      fullBarSize *= 0.9;
+      sum = len * fullBarSize;
+    }
+
+    const offset = Math.round((bandSize - sum) / 2);
+    let prev: BarPositionPosition = { offset: offset - realBarGap, size: 0 };
+
+    result = sizeList.reduce(
+      (res: ReadonlyArray<BarWithPosition>, entry: BarCategory): ReadonlyArray<BarWithPosition> => {
+        const newPosition: BarWithPosition = {
+          stackId: entry.stackId,
+          dataKeys: entry.dataKeys,
+          position: {
+            offset: prev.offset + prev.size + realBarGap,
+            size: useFull ? fullBarSize : (entry.barSize ?? 0),
+          },
+        };
+        const newRes: Array<BarWithPosition> = [...res, newPosition];
+
+        prev = newPosition.position;
+
+        return newRes;
+      },
+      initialValue,
+    );
+  } else {
+    const offset = getPercentValue(barCategoryGap, bandSize, 0, true);
+
+    if (bandSize - 2 * offset - (len - 1) * realBarGap <= 0) {
+      realBarGap = 0;
+    }
+
+    let originalSize = (bandSize - 2 * offset - (len - 1) * realBarGap) / len;
+    if (originalSize > 1) {
+      originalSize = Math.round(originalSize);
+    }
+    const size = isWellBehavedNumber(maxBarSize)
+      ? Math.min(originalSize, maxBarSize)
+      : originalSize;
+    result = sizeList.reduce(
+      (
+        res: ReadonlyArray<BarWithPosition>,
+        entry: BarCategory,
+        i,
+      ): ReadonlyArray<BarWithPosition> => [
+        ...res,
+        {
+          stackId: entry.stackId,
+          dataKeys: entry.dataKeys,
+          position: {
+            offset: offset + (originalSize + realBarGap) * i + (originalSize - size) / 2,
+            size,
+          },
+        },
+      ],
+      initialValue,
+    );
+  }
+
+  return result;
+}
+
+export const combineAllBarPositions = (
+  sizeList: SizeList,
+  globalMaxBarSize: number | undefined,
+  barGap: string | number,
+  barCategoryGap: string | number,
+  barBandSize: number,
+  bandSize: number | undefined,
+  childMaxBarSize: number | undefined,
+): ReadonlyArray<BarWithPosition> | undefined => {
+  const maxBarSize: number | undefined = isNullish(childMaxBarSize)
+    ? globalMaxBarSize
+    : childMaxBarSize;
+
+  let allBarPositions: ReadonlyArray<BarWithPosition> | undefined = getBarPositions(
+    barGap,
+    barCategoryGap,
+    barBandSize !== bandSize ? barBandSize : bandSize,
+    sizeList,
+    maxBarSize,
+  );
+
+  if (barBandSize !== bandSize && allBarPositions != null) {
+    allBarPositions = allBarPositions.map((pos) => ({
+      ...pos,
+      position: { ...pos.position, offset: pos.position.offset - barBandSize / 2 },
+    }));
+  }
+
+  return allBarPositions;
+};