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