fix: blocks float in mid air

src/compute-blocks.test.ts

@@ -9,11 +9,27 @@ import {
   adjustTotalHeight,
   adjustSameValueBlocks,
   defaultColor,
+  addXFluctuation,
 } from "./compute-blocks";
 import { StackedBlockDatum } from "./stacked-block-chart";
 import { getRandomInt } from "./utils";
 
 describe("createInitialBlockDatum", () => {
+  const mockRndFn = jest.fn();
+
+  // A function to check if there is an overlap in the x-axis position of two blocks
+  const isOverlap = (upper: BlockDatum, lower: BlockDatum) => {
+    const upperStart = upper.x;
+    const upperEnd = upper.x + upper.width;
+    const lowerStart = lower.x;
+    const lowerEnd = lower.x + lower.width;
+    return upperStart < lowerEnd && lowerStart < upperEnd;
+  };
+
+  beforeEach(() => {
+    mockRndFn.mockClear();
+  });
+
   it("should create an initial block datum with default values", () => {
     const datum: StackedBlockDatum = {
       value: 10,
@@ -234,6 +250,78 @@ describe("createInitialBlockDatum", () => {
     ]);
   });
 
+  it("should add a random value to the X coordinate of the block 1", () => {
+    // centerX is 0.
+
+    // the upper block is on the left side of the lower block.
+    const blocks: BlockDatum[] = [
+      {
+        value: 0,
+        name: "upper",
+        x: -20,
+        y: 0,
+        width: 20,
+        height: 0,
+        fill: "#000",
+        percentage: 0,
+      },
+      {
+        value: 0,
+        name: "lower",
+        x: 0,
+        y: 10,
+        width: 20,
+        height: 0,
+        fill: "#000",
+        percentage: 0,
+      },
+    ];
+
+    mockRndFn.mockReturnValueOnce(0).mockReturnValueOnce(0);
+
+    const result = addXFluctuation(blocks, mockRndFn);
+    const blockA = result[0];
+    const blockB = result[1];
+
+    expect(isOverlap(blockA, blockB)).toBe(true);
+  });
+
+  it("should add a random value to the X coordinate of the block 2", () => {
+    // centerX is 0
+
+    // the upper block is on the right side of the lower block.
+    const blocks: BlockDatum[] = [
+      {
+        value: 0,
+        name: "upper",
+        x: 0,
+        y: 0,
+        width: 20,
+        height: 0,
+        fill: "#000",
+        percentage: 0,
+      },
+      {
+        value: 0,
+        name: "lower",
+        x: -20,
+        y: 10,
+        width: 20,
+        height: 0,
+        fill: "#000",
+        percentage: 0,
+      },
+    ];
+
+    mockRndFn.mockReturnValueOnce(0).mockReturnValueOnce(0);
+
+    const result = addXFluctuation(blocks, mockRndFn);
+    const blockA = result[0];
+    const blockB = result[1];
+
+    expect(isOverlap(blockA, blockB)).toBe(true);
+  });
+
   it("should align blocks to the bottom of the svg", () => {
     const blocks: BlockDatum[] = [
       {

src/compute-blocks.ts

@@ -188,15 +188,42 @@ export function addXFluctuation(
   blocks: BlockDatum[],
   rndFn: (min: number, max: number) => number
 ): BlockDatum[] {
+  // blocks are arranged in order from the top, so rearrange them in reverse order.
+  // Because we want to align the lower block and the upper block to overlap on the x-axis.
+  // This makes it look like it is stacked on top of the lower block.
+  const reversedBlocks = blocks.slice().reverse();
+
+  let lastBlock: BlockDatum | null = null;
   const resultBlocks: BlockDatum[] = [];
-  for (const block of blocks) {
+  for (const block of reversedBlocks) {
     const newBlock = { ...block };
 
     const fluctuation = rndFn(-10, 10);
     newBlock.x += fluctuation;
 
-    resultBlocks.push(newBlock);
+    if (lastBlock) {
+      const overlapValue = 1;
+      const lowerBlock = lastBlock;
+      const lowerBlockStartX = lowerBlock.x;
+      const lowerBlockEndX = lowerBlock.x + lowerBlock.width;
+      const upperBlock = newBlock;
+      const upperBlockStartX = upperBlock.x;
+      const upperBlockEndX = upperBlock.x + upperBlock.width;
+      if (upperBlockEndX <= lowerBlockStartX) {
+        // If the upper block is on the left side of the lower block
+        const diff = upperBlockEndX - lowerBlockStartX;
+        upperBlock.x += diff + overlapValue;
+      } else if (upperBlockStartX >= lowerBlockEndX) {
+        // If the upper block is on the right side of the lower block
+        const diff = lowerBlockEndX - upperBlockStartX;
+        upperBlock.x += diff - overlapValue;
+      }
+    }
+
+    lastBlock = newBlock;
+    resultBlocks.unshift(newBlock);
   }
+
   return resultBlocks;
 }