Fix TypeError in insertNode and Add Configurable Bar Width for Bar Charts

packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/barPlot.test.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { BarPlot } from './barPlot.js';
+import type { BarPlotData, BoundingRect } from '../../interfaces.js';
+import type { Axis } from '../axis/index.js';
+
+describe('BarPlot', () => {
+  let mockXAxis: Axis;
+  let mockYAxis: Axis;
+  let boundingRect: BoundingRect;
+
+  beforeEach(() => {
+    mockXAxis = {
+      getScaleValue: vi.fn((val: string) => parseInt(val, 10)),
+      getAxisOuterPadding: vi.fn(() => 10),
+      getTickDistance: vi.fn(() => 50),
+    } as unknown as Axis;
+
+    mockYAxis = {
+      getScaleValue: vi.fn((val: number) => val * 10),
+    } as unknown as Axis;
+
+    boundingRect = { x: 0, y: 0, width: 200, height: 100 };
+  });
+
+  it('should use customBarWidth when provided', () => {
+    const barData: BarPlotData = {
+      type: 'bar',
+      fill: 'blue',
+      data: [
+        ['1', 10],
+        ['2', 20],
+      ],
+    };
+
+    const barPlot = new BarPlot(barData, boundingRect, mockXAxis, mockYAxis, 'vertical', 0, 15);
+    const elements = barPlot.getDrawableElement();
+
+    if (elements[0].type === 'rect') {
+      expect(elements[0].data[0].width).toBe(15); // Check custom bar width
+    } else {
+      throw new Error('Unexpected element type, expected "rect".');
+    }
+  });
+
+  it('should calculate bar width when customBarWidth is 0', () => {
+    const barData: BarPlotData = {
+      type: 'bar',
+      fill: 'blue',
+      data: [
+        ['1', 10],
+        ['2', 20],
+      ],
+    };
+
+    const barPlot = new BarPlot(barData, boundingRect, mockXAxis, mockYAxis, 'vertical', 0);
+    const elements = barPlot.getDrawableElement();
+
+    if (elements[0].type === 'rect') {
+      const calculatedWidth =
+        Math.min(mockXAxis.getAxisOuterPadding() * 2, mockXAxis.getTickDistance()) * 0.95; // Assuming barPaddingPercent = 0.05
+
+      expect(elements[0].data[0].width).toBeCloseTo(calculatedWidth); // Check calculated bar width
+    } else {
+      throw new Error('Unexpected element type, expected "rect".');
+    }
+  });
+});

packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/barPlot.ts

@@ -8,7 +8,9 @@ export class BarPlot {
     private xAxis: Axis,
     private yAxis: Axis,
     private orientation: XYChartConfig['chartOrientation'],
-    private plotIndex: number
+    private plotIndex: number,
+    // eslint-disable-next-line @typescript-eslint/no-inferrable-types
+    private customBarWidth: number = 0
   ) {}
 
   getDrawableElement(): DrawableElem[] {
@@ -20,8 +22,10 @@ export class BarPlot {
     const barPaddingPercent = 0.05;
 
     const barWidth =
-      Math.min(this.xAxis.getAxisOuterPadding() * 2, this.xAxis.getTickDistance()) *
-      (1 - barPaddingPercent);
+      this.customBarWidth > 0
+        ? this.customBarWidth
+        : Math.min(this.xAxis.getAxisOuterPadding() * 2, this.xAxis.getTickDistance()) *
+          (1 - barPaddingPercent);
     const barWidthHalf = barWidth / 2;
 
     if (this.orientation === 'horizontal') {

packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts

@@ -77,7 +77,8 @@ export class BasePlot implements Plot {
               this.xAxis,
               this.yAxis,
               this.chartConfig.chartOrientation,
-              i
+              i,
+              this.chartConfig.customBarWidth ?? 0
             );
             drawableElem.push(...barPlot.getDrawableElement());
           }

packages/mermaid/src/diagrams/xychart/chartBuilder/interfaces.ts

@@ -97,6 +97,7 @@ export interface XYChartConfig {
   yAxis: XYChartAxisConfig;
   chartOrientation: 'vertical' | 'horizontal';
   plotReservedSpacePercent: number;
+  customBarWidth?: number;
 }
 
 export interface XYChartData {

packages/mermaid/src/rendering-util/rendering-elements/nodes.ts

@@ -19,7 +19,7 @@ export async function insertNode(
   let el;
 
   //special check for rect shape (with or without rounded corners)
-  if (node.shape === 'rect') {
+  if (node.shape && node.shape === 'rect') {
     if (node.rx && node.ry) {
       node.shape = 'roundedRect';
     } else {