diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js
index bdb0b65ff..a47c87987 100644
--- a/cypress/integration/rendering/xyChart.spec.js
+++ b/cypress/integration/rendering/xyChart.spec.js
@@ -330,7 +330,9 @@ describe('XY Chart', () => {
title "Basic xychart with multiple datasets"
x-axis "Relevant categories" [category1, "category 2", category3, category4]
y-axis Animals 0 --> 160
- bar [["dogs" [40, 20, 40, 30]],["cats" [20, 40, 50, 30]],["birds" [30, 60, 50, 30]]]
+ bar "dogs" [40, 20, 40, 30]
+ bar "cats" [20, 40, 50, 30]
+ bar "birds" [30, 60, 50, 30]
`,
{}
);
@@ -344,7 +346,9 @@ describe('XY Chart', () => {
title "Basic xychart with multiple datasets"
x-axis "Relevant categories" [category1, "category 2", category3, category4]
y-axis Animals 0 --> 160
- bar [["dogs" [40, 20, 40, 30]],["cats" [20, 40, 50, 30]],["birds" [30, 60, 50, 30]]]
+ bar "dogs" [40, 20, 40, 30]
+ bar "cats" [20, 40, 50, 30]
+ bar "birds" [30, 60, 50, 30]
`,
{}
);
diff --git a/demos/xychart.html b/demos/xychart.html
index bfa7f12b1..8cd6a64af 100644
--- a/demos/xychart.html
+++ b/demos/xychart.html
@@ -67,7 +67,9 @@
title "Basic xychart with multiple datasets"
x-axis "Relevant categories" [category1, "category 2", category3, category4]
y-axis Animals 0 --> 160
- bar [["dogs" [40, 20, 40, 30]],["cats" [20, 40, 50, 30]],["birds" [30, 60, 50, 30]]]
+ bar "dogs" [40, 20, 40, 30]
+ bar "cats" [20, 40, 50, 30]
+ bar "birds" [30, 60, 50, 30]
XY Charts bar horizontal with multiple datasets
@@ -76,7 +78,9 @@
title "Basic xychart with multiple datasets"
x-axis "Relevant categories" [category1, "category 2", category3, category4]
y-axis Animals 0 --> 160
- bar [["dogs" [40, 20, 40, 30]],["cats" [20, 40, 50, 30]],["birds" [30, 60, 50, 30]]]
+ bar "dogs" [40, 20, 40, 30]
+ bar "cats" [20, 40, 50, 30]
+ bar "birds" [30, 60, 50, 30]
XY Charts line single dataset
diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md
index a1494b396..b6e904a27 100644
--- a/docs/syntax/xyChart.md
+++ b/docs/syntax/xyChart.md
@@ -37,7 +37,9 @@ xychart-beta
title "Basic xychart with multiple datasets"
x-axis "Relevant categories" [category1, "category 2", category3, category4]
y-axis Animals 0 --> 160
- bar [["dogs" [40, 20, 40, 30]],["cats" [20, 40, 50, 30]],["birds" [30, 60, 50, 30]]]
+ bar "dogs" [40, 20, 40, 30]
+ bar "cats" [20, 40, 50, 30]
+ bar "birds" [30, 60, 50, 30]
```
```mermaid
@@ -45,7 +47,9 @@ xychart-beta
title "Basic xychart with multiple datasets"
x-axis "Relevant categories" [category1, "category 2", category3, category4]
y-axis Animals 0 --> 160
- bar [["dogs" [40, 20, 40, 30]],["cats" [20, 40, 50, 30]],["birds" [30, 60, 50, 30]]]
+ bar "dogs" [40, 20, 40, 30]
+ bar "cats" [20, 40, 50, 30]
+ bar "birds" [30, 60, 50, 30]
```
### combined bar/line chart displaying 2 datasets
diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison
index a52c2ebe0..987132d17 100644
--- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison
+++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison
@@ -102,28 +102,13 @@ statement
| Y_AXIS parseYAxis
| LINE plotData { yy.setLineData({text: '', type: 'text'}, $plotData); }
| LINE text plotData { yy.setLineData($text, $plotData); }
- | BAR datasets { yy.setBarData($datasets); }
+ | BAR plotData { yy.setBarData({text: '', type: 'text'}, $plotData); }
+ | BAR text plotData { yy.setBarData($text, $plotData); }
| acc_title acc_title_value { $$=$acc_title_value.trim();yy.setAccTitle($$); }
| acc_descr acc_descr_value { $$=$acc_descr_value.trim();yy.setAccDescription($$); }
| acc_descr_multiline_value { $$=$acc_descr_multiline_value.trim();yy.setAccDescription($$); }
;
-datasets
- : SQUARE_BRACES_START datasetBraced SQUARE_BRACES_END { $$ = [$datasetBraced] }
- | datasetBraced { $$ = [$datasetBraced] }
- | dataset { $$ = [$dataset] }
- ;
-
-datasetBraced
- : SQUARE_BRACES_START dataset SQUARE_BRACES_END COMMA datasetBraced { $$ = [$dataset, ...$datasetBraced] }
- | SQUARE_BRACES_START dataset SQUARE_BRACES_END { $$ = [$dataset] }
- ;
-
-dataset
- : plotData { $$ = ['', $plotData] }
- | text plotData { $$ = [$text, $plotData] }
- ;
-
plotData
: SQUARE_BRACES_START commaSeparatedNumbers SQUARE_BRACES_END { $$ = $commaSeparatedNumbers }
;
diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
index cca21720e..e44b10403 100644
--- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
+++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
@@ -338,9 +338,10 @@ 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([
- [{ text: 'barTitle', type: 'text' }, [23, 45, 56.6, 0.22]],
- ]);
+ expect(mockDB.setBarData).toHaveBeenCalledWith(
+ { text: 'barTitle', type: 'text' },
+ [23, 45, 56.6, 0.22]
+ );
});
it('parse bar Data spaces and +,- symbol', () => {
const str =
@@ -348,9 +349,10 @@ 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([
- [{ text: 'barTitle with space', type: 'text' }, [23, -45, 56.6]],
- ]);
+ expect(mockDB.setBarData).toHaveBeenCalledWith(
+ { text: 'barTitle with space', type: 'text' },
+ [23, -45, 56.6]
+ );
});
it('parse bar Data without plot title', () => {
const str =
@@ -358,7 +360,7 @@ 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([['', [23, -45, 56.6]]]);
+ expect(mockDB.setBarData).toHaveBeenCalledWith({ text: '', type: 'text' }, [23, -45, 56.6]);
});
it('parse bar should throw for unbalanced brackets', () => {
let str =
@@ -394,12 +396,14 @@ 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([
- [{ text: 'barTitle1', type: 'text' }, [23, 45, 56.6]],
- ]);
- expect(mockDB.setBarData).toHaveBeenCalledWith([
- [{ text: 'barTitle2', type: 'text' }, [13, 42, 56.89]],
- ]);
+ expect(mockDB.setBarData).toHaveBeenCalledWith(
+ { text: 'barTitle1', type: 'text' },
+ [23, 45, 56.6]
+ );
+ expect(mockDB.setBarData).toHaveBeenCalledWith(
+ { text: 'barTitle2', type: 'text' },
+ [13, 42, 56.89]
+ );
expect(mockDB.setLineData).toHaveBeenCalledWith(
{ text: 'lineTitle1', type: 'text' },
[11, 45.5, 67, 23]
@@ -428,12 +432,14 @@ describe('Testing xychart jison file', () => {
{ text: 'category 2', type: 'text' },
{ text: 'category3', type: 'text' },
]);
- expect(mockDB.setBarData).toHaveBeenCalledWith([
- [{ text: 'barTitle1', type: 'text' }, [23, 45, 56.6]],
- ]);
- expect(mockDB.setBarData).toHaveBeenCalledWith([
- [{ text: 'barTitle2', type: 'text' }, [13, 42, 56.89]],
- ]);
+ expect(mockDB.setBarData).toHaveBeenCalledWith(
+ { text: 'barTitle1', type: 'text' },
+ [23, 45, 56.6]
+ );
+ expect(mockDB.setBarData).toHaveBeenCalledWith(
+ { text: 'barTitle2', type: 'text' },
+ [13, 42, 56.89]
+ );
expect(mockDB.setLineData).toHaveBeenCalledWith(
{ text: 'lineTitle1', type: 'text' },
[11, 45.5, 67, 23]
@@ -448,31 +454,43 @@ 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]]]';
+ 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\nbar "barTitle1" [23, 45, 56.6]\nbar "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]],
- ],
- ]);
+ expect(mockDB.setBarData).toHaveBeenNthCalledWith(
+ 1,
+ { text: 'barTitle1', type: 'text' },
+ [23, 45, 56.6]
+ );
+ expect(mockDB.setBarData).toHaveBeenNthCalledWith(
+ 2,
+ { 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]]]';
+ 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\nbar "barTitle1" [23, 45, 56.6]\nbar "barTitle2" [13, 42, 56.89]\nbar "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]],
- ],
- ]);
+ expect(mockDB.setBarData).toHaveBeenNthCalledWith(
+ 1,
+ { text: 'barTitle1', type: 'text' },
+ [23, 45, 56.6]
+ );
+ expect(mockDB.setBarData).toHaveBeenNthCalledWith(
+ 2,
+ { text: 'barTitle2', type: 'text' },
+ [13, 42, 56.89]
+ );
+ expect(mockDB.setBarData).toHaveBeenNthCalledWith(
+ 3,
+ { text: 'barTitle3', type: 'text' },
+ [18, 37, 56.1]
+ );
});
});
});
diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts
index 595c9c6a6..637477f28 100644
--- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts
+++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts
@@ -169,23 +169,14 @@ function setLineData(title: NormalTextType, data: number[]) {
plotIndex++;
}
-type NamedDataset = [title: NormalTextType, data: number[]];
-
-function setBarData(datasets: NamedDataset[]) {
- datasets[0]
- .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),
- data: plotData,
- });
- plotIndex++;
- });
+function setBarData(title: NormalTextType, data: number[]) {
+ const plotData = transformDataWithoutCategory(data);
+ xyChartData.plots.push({
+ type: 'bar',
+ fill: getPlotColorFromPalette(plotIndex),
+ data: plotData,
+ });
+ plotIndex++;
}
function getDrawableElem(): DrawableElem[] {
diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md
index c6653821d..91de2ba97 100644
--- a/packages/mermaid/src/docs/syntax/xyChart.md
+++ b/packages/mermaid/src/docs/syntax/xyChart.md
@@ -23,7 +23,9 @@ xychart-beta
title "Basic xychart with multiple datasets"
x-axis "Relevant categories" [category1, "category 2", category3, category4]
y-axis Animals 0 --> 160
- bar [["dogs" [40, 20, 40, 30]],["cats" [20, 40, 50, 30]],["birds" [30, 60, 50, 30]]]
+ bar "dogs" [40, 20, 40, 30]
+ bar "cats" [20, 40, 50, 30]
+ bar "birds" [30, 60, 50, 30]
```
### combined bar/line chart displaying 2 datasets