parser fixed for > 2 datasets

some unit tests added

demos/xychart.html

@@ -65,18 +65,18 @@
     <pre class="mermaid">
       xychart-beta
       title "Basic xychart with multiple datasets"
-      x-axis "Relevant categories" [category1, "category 2", category3, category4, category5, category6, category7]
+      x-axis "Relevant categories" [category1, "category 2", category3, category4]
-      y-axis Animals 10 --> 200
+      y-axis Animals 0 --> 160
-      bar [["dogs" [52, 96, 35, 10, 87, 34, 67, 99]],["cats" [15, 7, 23, 55, 11, 41, 26, 3]]]
+      bar [["dogs" [40, 20, 40, 30]],["cats" [20, 40, 50, 30]],["birds" [30, 60, 50, 30]]]
     </pre>
 
     <h1>XY Charts bar horizontal with multiple datasets</h1>
     <pre class="mermaid">
       xychart-beta horizontal
       title "Basic xychart with multiple datasets"
-      x-axis "Relevant categories" [category1, "category 2", category3, category4, category5, category6, category7]
+      x-axis "Relevant categories" [category1, "category 2", category3, category4]
-      y-axis Animals 10 --> 200
+      y-axis Animals 0 --> 160
-      bar [["dogs" [52, 96, 35, 10, 87, 34, 67, 99]],["cats" [15, 7, 23, 55, 11, 41, 26, 3]]]
+      bar [["dogs" [40, 20, 40, 30]],["cats" [20, 40, 50, 30]],["birds" [30, 60, 50, 30]]]
     </pre>
 
     <h1>XY Charts line single dataset</h1>

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

@@ -32,7 +32,10 @@ export class BarPlot {
           type: 'rect',
           data: finalData.map((data, index) => {
             const x = offset[index] + this.boundingRect.x;
-            const width = data[1] - this.boundingRect.x;
+            const width =
+              data[1] -
+              this.boundingRect.x -
+              (dataIndex > 0 ? this.yAxis.getAxisOuterPadding() : 0);
             offset[index] += width;
             return {
               x,
@@ -50,8 +53,10 @@ export class BarPlot {
         groupTexts: ['plot', `bar-plot-${this.plotIndex}-${dataIndex}`],
         type: 'rect',
         data: finalData.map((data, index) => {
-          const y = data[1] - offset[index];
+          const adjustForAxisOuterPadding = dataIndex > 0 ? this.yAxis.getAxisOuterPadding() : 0;
-          const height = this.boundingRect.y + this.boundingRect.height - data[1];
+          const y = data[1] - offset[index] + adjustForAxisOuterPadding;
+          const height =
+            this.boundingRect.y + this.boundingRect.height - data[1] - adjustForAxisOuterPadding;
           offset[index] += height;
           return {
             x: data[0] - barWidthHalf,

packages/mermaid/src/diagrams/xychart/parser/xychart.jison

@@ -109,14 +109,14 @@ statement
   ;
 
 datasets
-  : SQUARE_BRACES_START datasetBraced COMMA datasets SQUARE_BRACES_END { $$ = [$datasetBraced, ...$datasets] }
+  : SQUARE_BRACES_START datasetBraced SQUARE_BRACES_END                { $$ = [$datasetBraced] }
-  | SQUARE_BRACES_START datasetBraced SQUARE_BRACES_END                { $$ = [$datasetBraced] }
   | datasetBraced                                                      { $$ = [$datasetBraced] }
   | dataset                                                            { $$ = [$dataset] }
   ;
 
 datasetBraced
-  : SQUARE_BRACES_START dataset SQUARE_BRACES_END                      { $$ = $dataset }
+  : SQUARE_BRACES_START dataset SQUARE_BRACES_END COMMA datasetBraced  { $$ = [$dataset, ...$datasetBraced] }
+  | SQUARE_BRACES_START dataset SQUARE_BRACES_END                      { $$ = [$dataset] }
   ;
 
 dataset

packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts

@@ -33,6 +33,7 @@ describe('Testing xychart jison file', () => {
     clearMocks();
   });
 
+  describe('single dataset', () => {
     it('should throw error if xychart-beta text is not there', () => {
       const str = 'xychart-beta-1';
       expect(parserFnConstructor(str)).toThrow();
@@ -271,7 +272,8 @@ describe('Testing xychart jison file', () => {
       expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
     });
     it('parse line Data', () => {
-    const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line lineTitle [23, 45, 56.6]';
+      const str =
+        'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line lineTitle [23, 45, 56.6]';
       expect(parserFnConstructor(str)).not.toThrow();
       expect(mockDB.setLineData).toHaveBeenCalledWith(
         { text: 'lineTitle', type: 'text' },
@@ -311,7 +313,8 @@ describe('Testing xychart jison file', () => {
       expect(parserFnConstructor(str)).toThrow();
     });
     it('parse line Data throws error if data is not provided', () => {
-    const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space"   ';
+      const str =
+        'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space"   ';
       expect(parserFnConstructor(str)).toThrow();
     });
     it('parse line Data throws error if data is empty', () => {
@@ -366,7 +369,8 @@ describe('Testing xychart jison file', () => {
       expect(parserFnConstructor(str)).toThrow();
     });
     it('parse bar should throw error if data is not provided', () => {
-    const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space"    ';
+      const str =
+        'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space"    ';
       expect(parserFnConstructor(str)).toThrow();
     });
     it('parse bar should throw error if data is empty', () => {
@@ -440,3 +444,35 @@ describe('Testing xychart jison file', () => {
       );
     });
   });
+
+  describe('multiple datasets', () => {
+    it('parse 2 datasets', () => {
+      const str =
+        'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\nbar [["barTitle1" [23, 45, 56.6]],["barTitle2" [13, 42, 56.89]]]';
+      expect(parserFnConstructor(str)).not.toThrow();
+      expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
+      expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
+      expect(mockDB.setBarData).toHaveBeenCalledWith([
+        [
+          [{ text: 'barTitle1', type: 'text' }, [23, 45, 56.6]],
+          [{ text: 'barTitle2', type: 'text' }, [13, 42, 56.89]],
+        ],
+      ]);
+    });
+
+    it('parse 3 datasets', () => {
+      const str =
+        'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\nbar [["barTitle1" [23, 45, 56.6]],["barTitle2" [13, 42, 56.89]],["barTitle3" [18, 37, 56.1]]]';
+      expect(parserFnConstructor(str)).not.toThrow();
+      expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
+      expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
+      expect(mockDB.setBarData).toHaveBeenCalledWith([
+        [
+          [{ text: 'barTitle1', type: 'text' }, [23, 45, 56.6]],
+          [{ text: 'barTitle2', type: 'text' }, [13, 42, 56.89]],
+          [{ text: 'barTitle3', type: 'text' }, [18, 37, 56.1]],
+        ],
+      ]);
+    });
+  });
+});

packages/mermaid/src/diagrams/xychart/xychartDb.ts

@@ -172,8 +172,13 @@ function setLineData(title: NormalTextType, data: number[]) {
 type NamedDataset = [title: NormalTextType, data: number[]];
 
 function setBarData(datasets: NamedDataset[]) {
-  datasets.forEach((dataset) => {
+  datasets[0]
-    const plotData = transformDataWithoutCategory(dataset[1]);
+    .filter((dataset) => Array.isArray(dataset))
+    .forEach((dataset) => {
+      const data = dataset as any as NamedDataset;
+      const plotData = transformDataWithoutCategory(
+        Array.isArray(data[1]) ? data[1] : (dataset as any as number[])
+      );
       xyChartData.plots.push({
         type: 'bar',
         fill: getPlotColorFromPalette(plotIndex),