formatting fixed

demos/xychart.html

@@ -69,7 +69,7 @@
       y-axis Animals 10 --> 200
       bar [["dogs" [52, 96, 35, 10, 87, 34, 67, 99]],["cats" [15, 7, 23, 55, 11, 41, 26, 3]]]
     </pre>
-    
+
     <h1>XY Charts bar horizontal with multiple datasets</h1>
     <pre class="mermaid">
       xychart-beta horizontal

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

@@ -18,52 +18,52 @@ export class BarPlot {
         this.xAxis.getScaleValue(d[0]),
         this.yAxis.getScaleValue(d[1]),
       ]);
-  
+
       const barPaddingPercent = 0.05;
 
       const barWidth =
         Math.min(this.xAxis.getAxisOuterPadding() * 2, this.xAxis.getTickDistance()) *
         (1 - barPaddingPercent);
       const barWidthHalf = barWidth / 2;
-  
+
       if (this.orientation === 'horizontal') {
         return {
-            groupTexts: ['plot', `bar-plot-${this.plotIndex}-${dataIndex}`],
-            type: 'rect',
-            data: finalData.map((data, index) => {
-              const x = offset[index] + this.boundingRect.x;
-              const width = data[1] - this.boundingRect.x;
-              offset[index] += width;
-              return {
-                x,
-                y: data[0] - barWidthHalf,
-                height: barWidth,
-                width,
-                fill: barData.fill,
-                strokeWidth: 0,
-                strokeFill: barData.fill,
-              }              
-            }),
-          };
-      }
-      return {
           groupTexts: ['plot', `bar-plot-${this.plotIndex}-${dataIndex}`],
           type: 'rect',
           data: finalData.map((data, index) => {
-            const y = data[1] - offset[index];
+            const x = offset[index] + this.boundingRect.x;
-            const height = this.boundingRect.y + this.boundingRect.height - data[1];
+            const width = data[1] - this.boundingRect.x;
-            offset[index] += height;
+            offset[index] += width;
             return {
-              x: data[0] - barWidthHalf,
+              x,
-              y,
+              y: data[0] - barWidthHalf,
-              width: barWidth,
+              height: barWidth,
-              height,
+              width,
               fill: barData.fill,
               strokeWidth: 0,
               strokeFill: barData.fill,
             };
           }),
         };
-      });
+      }
+      return {
+        groupTexts: ['plot', `bar-plot-${this.plotIndex}-${dataIndex}`],
+        type: 'rect',
+        data: finalData.map((data, index) => {
+          const y = data[1] - offset[index];
+          const height = this.boundingRect.y + this.boundingRect.height - data[1];
+          offset[index] += height;
+          return {
+            x: data[0] - barWidthHalf,
+            y,
+            width: barWidth,
+            height,
+            fill: barData.fill,
+            strokeWidth: 0,
+            strokeFill: barData.fill,
+          };
+        }),
+      };
+    });
   }
 }

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

@@ -57,11 +57,11 @@ export class BasePlot implements Plot {
       throw Error('Axes must be passed to render Plots');
     }
     const drawableElem: DrawableElem[] = [];
-    const linePlots = this.chartData.plots.filter(plot => plot.type === 'line') as LinePlotData[];
+    const linePlots = this.chartData.plots.filter((plot) => plot.type === 'line') as LinePlotData[];
-    const barPlots = this.chartData.plots.filter(plot => plot.type === 'bar') as BarPlotData[];
+    const barPlots = this.chartData.plots.filter((plot) => plot.type === 'bar') as BarPlotData[];
 
     let plotIndex = 0;
-    if(linePlots.length) {
+    if (linePlots.length) {
       const linePlot = new LinePlot(
         linePlots[0],
         this.xAxis,
@@ -71,7 +71,7 @@ export class BasePlot implements Plot {
       );
       drawableElem.push(...linePlot.getDrawableElement());
     }
-    if(barPlots.length) {
+    if (barPlots.length) {
       const barPlot = new BarPlot(
         barPlots,
         this.boundingRect,

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

@@ -335,10 +335,9 @@ describe('Testing xychart jison file', () => {
     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([[
+    expect(mockDB.setBarData).toHaveBeenCalledWith([
-      { text: 'barTitle', type: 'text' },
+      [{ text: 'barTitle', type: 'text' }, [23, 45, 56.6, 0.22]],
-      [23, 45, 56.6, 0.22]
+    ]);
-    ]]);
   });
   it('parse bar Data spaces and +,- symbol', () => {
     const str =
@@ -346,10 +345,9 @@ describe('Testing xychart jison file', () => {
     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([[
+    expect(mockDB.setBarData).toHaveBeenCalledWith([
-      { text: 'barTitle with space', type: 'text' },
+      [{ text: 'barTitle with space', type: 'text' }, [23, -45, 56.6]],
-      [23, -45, 56.6]
+    ]);
-    ]]);
   });
   it('parse bar Data without plot title', () => {
     const str =
@@ -392,18 +390,12 @@ describe('Testing xychart jison file', () => {
     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([[
+    expect(mockDB.setBarData).toHaveBeenCalledWith([
-      { text: 'barTitle1', type: 'text' },
+      [{ text: 'barTitle1', type: 'text' }, [23, 45, 56.6]],
-      [23, 45, 56.6]
+    ]);
-    ]]);
+    expect(mockDB.setBarData).toHaveBeenCalledWith([
-    expect(mockDB.setBarData).toHaveBeenCalledWith(
+      [{ text: 'barTitle2', type: 'text' }, [13, 42, 56.89]],
-      [
+    ]);
-        [
-          { text: 'barTitle2', type: 'text' },
-          [13, 42, 56.89]
-        ],
-      ],
-    );
     expect(mockDB.setLineData).toHaveBeenCalledWith(
       { text: 'lineTitle1', type: 'text' },
       [11, 45.5, 67, 23]
@@ -432,14 +424,12 @@ describe('Testing xychart jison file', () => {
       { text: 'category 2', type: 'text' },
       { text: 'category3', type: 'text' },
     ]);
-    expect(mockDB.setBarData).toHaveBeenCalledWith([[
+    expect(mockDB.setBarData).toHaveBeenCalledWith([
-      { text: 'barTitle1', type: 'text' },
+      [{ text: 'barTitle1', type: 'text' }, [23, 45, 56.6]],
-      [23, 45, 56.6]
+    ]);
-    ]]);
+    expect(mockDB.setBarData).toHaveBeenCalledWith([
-    expect(mockDB.setBarData).toHaveBeenCalledWith([[
+      [{ text: 'barTitle2', type: 'text' }, [13, 42, 56.89]],
-      { text: 'barTitle2', type: 'text' },
+    ]);
-      [13, 42, 56.89]
-    ]]);
     expect(mockDB.setLineData).toHaveBeenCalledWith(
       { text: 'lineTitle1', type: 'text' },
       [11, 45.5, 67, 23]

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

@@ -172,7 +172,7 @@ function setLineData(title: NormalTextType, data: number[]) {
 type NamedDataset = [title: NormalTextType, data: number[]];
 
 function setBarData(datasets: NamedDataset[]) {
-  datasets.forEach(dataset => {
+  datasets.forEach((dataset) => {
     const plotData = transformDataWithoutCategory(dataset[1]);
     xyChartData.plots.push({
       type: 'bar',