feat(charts): enhance TauriBarChart with overflow handling for dense months

2026-07-18 22:04:23 +03:30
parent 4ce1b39a83
commit 466b649988
2 changed files with 35 additions and 4 deletions
@@ -34,6 +34,31 @@ describe('TauriBarChart', () => {
    expect(container.querySelectorAll('.bg-\\[\\#5559CE\\]')).toHaveLength(31);
  });

+  /**
+   * A fixed-width bar makes its column's intrinsic min-width 24px, so a 31-day
+   * month sums past the plot width and the row overflows out of the card
+   * (bars land on the neighbouring chart). Columns must be shrinkable and the
+   * bar fluid-but-capped.
+   */
+  it('keeps a dense month inside the card: shrinkable columns, fluid bars', () => {
+    const month: ChartPoint[] = Array.from({ length: 31 }, (_, i) => ({ label: String(i + 1), value: i % 5 }));
+    const { container } = render(<TauriBarChart data={month} />);
+
+    const bar = container.querySelector('.bg-\\[\\#5559CE\\]') as HTMLElement;
+    // کسری از ستون، نه تمام آن — وگرنه میله‌ها بدون فاصله به هم می‌چسبند
+    expect(bar.className).toMatch(/\bw-\[\d+%\]/);
+    expect(bar.className.split(/\s+/)).not.toContain('w-full');
+    expect(bar.className).toContain('max-w-[24px]');
+    // فقط سقف عرض، نه عرض ثابت (max-w-[24px] خودش شامل رشته‌ی w-[24px] است)
+    expect(bar.className.split(/\s+/)).not.toContain('w-[24px]');
+
+    const column = bar.parentElement as HTMLElement;
+    expect(column.className).toContain('min-w-0');
+
+    const plot = container.querySelector('.relative.flex-1') as HTMLElement;
+    expect(plot.className).toContain('overflow-hidden');
+  });
+
  /**
   * styles.css ships an unlayered legacy `.flex { align-items: center }` that
   * beats Tailwind's `items-*` utilities and collapses the plot column to zero