marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-15 21:39:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

review findings

Browse Source
This commit is contained in:
Axel Müller
2024-01-13 07:39:58 +01:00
parent 25a9479acf
commit 506314598e
7 changed files with 83 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
cypress/integration/rendering/xyChart.spec.js
View File

@@ -330,7 +330,9 @@ describe('XY Chart', () => {
title "Basic xychart with multiple datasets" title "Basic xychart with multiple datasets"
x-axis "Relevant categories" [category1, "category 2", category3, category4] x-axis "Relevant categories" [category1, "category 2", category3, category4]
y-axis Animals 0 --> 160 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" title "Basic xychart with multiple datasets"
x-axis "Relevant categories" [category1, "category 2", category3, category4] x-axis "Relevant categories" [category1, "category 2", category3, category4]
y-axis Animals 0 --> 160 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]
`, `,
{} {}
); );

8
demos/xychart.html
View File

@@ -67,7 +67,9 @@
title "Basic xychart with multiple datasets" title "Basic xychart with multiple datasets"
x-axis "Relevant categories" [category1, "category 2", category3, category4] x-axis "Relevant categories" [category1, "category 2", category3, category4]
y-axis Animals 0 --> 160 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]
</pre> </pre>
<h1>XY Charts bar horizontal with multiple datasets</h1> <h1>XY Charts bar horizontal with multiple datasets</h1>
@@ -76,7 +78,9 @@
title "Basic xychart with multiple datasets" title "Basic xychart with multiple datasets"
x-axis "Relevant categories" [category1, "category 2", category3, category4] x-axis "Relevant categories" [category1, "category 2", category3, category4]
y-axis Animals 0 --> 160 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]
</pre> </pre>
<h1>XY Charts line single dataset</h1> <h1>XY Charts line single dataset</h1>

8
docs/syntax/xyChart.md
View File

@@ -37,7 +37,9 @@ xychart-beta
title "Basic xychart with multiple datasets" title "Basic xychart with multiple datasets"
x-axis "Relevant categories" [category1, "category 2", category3, category4] x-axis "Relevant categories" [category1, "category 2", category3, category4]
y-axis Animals 0 --> 160 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 ```mermaid
@@ -45,7 +47,9 @@ xychart-beta
title "Basic xychart with multiple datasets" title "Basic xychart with multiple datasets"
x-axis "Relevant categories" [category1, "category 2", category3, category4] x-axis "Relevant categories" [category1, "category 2", category3, category4]
y-axis Animals 0 --> 160 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 ### combined bar/line chart displaying 2 datasets

19
packages/mermaid/src/diagrams/xychart/parser/xychart.jison
View File

@@ -102,28 +102,13 @@ statement
| Y_AXIS parseYAxis | Y_AXIS parseYAxis
| LINE plotData { yy.setLineData({text: '', type: 'text'}, $plotData); } | LINE plotData { yy.setLineData({text: '', type: 'text'}, $plotData); }
| LINE text plotData { yy.setLineData($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_title acc_title_value { $$=$acc_title_value.trim();yy.setAccTitle($$); }
| acc_descr acc_descr_value { $$=$acc_descr_value.trim();yy.setAccDescription($$); } | acc_descr acc_descr_value { $$=$acc_descr_value.trim();yy.setAccDescription($$); }
| acc_descr_multiline_value { $$=$acc_descr_multiline_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 plotData
: SQUARE_BRACES_START commaSeparatedNumbers SQUARE_BRACES_END { $$ = $commaSeparatedNumbers } : SQUARE_BRACES_START commaSeparatedNumbers SQUARE_BRACES_END { $$ = $commaSeparatedNumbers }
; ;

86
packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
View File

@@ -338,9 +338,10 @@ describe('Testing xychart jison file', () => {
expect(parserFnConstructor(str)).not.toThrow(); expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
expect(mockDB.setBarData).toHaveBeenCalledWith([ expect(mockDB.setBarData).toHaveBeenCalledWith(
[{ text: 'barTitle', type: 'text' }, [23, 45, 56.6, 0.22]], { text: 'barTitle', type: 'text' },
]); [23, 45, 56.6, 0.22]
);
}); });
it('parse bar Data spaces and +,- symbol', () => { it('parse bar Data spaces and +,- symbol', () => {
const str = const str =
@@ -348,9 +349,10 @@ describe('Testing xychart jison file', () => {
expect(parserFnConstructor(str)).not.toThrow(); expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
expect(mockDB.setBarData).toHaveBeenCalledWith([ expect(mockDB.setBarData).toHaveBeenCalledWith(
[{ text: 'barTitle with space', type: 'text' }, [23, -45, 56.6]], { text: 'barTitle with space', type: 'text' },
]); [23, -45, 56.6]
);
}); });
it('parse bar Data without plot title', () => { it('parse bar Data without plot title', () => {
const str = const str =
@@ -358,7 +360,7 @@ describe('Testing xychart jison file', () => {
expect(parserFnConstructor(str)).not.toThrow(); expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', 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', () => { it('parse bar should throw for unbalanced brackets', () => {
let str = let str =
@@ -394,12 +396,14 @@ describe('Testing xychart jison file', () => {
expect(parserFnConstructor(str)).not.toThrow(); expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
expect(mockDB.setBarData).toHaveBeenCalledWith([ expect(mockDB.setBarData).toHaveBeenCalledWith(
[{ text: 'barTitle1', type: 'text' }, [23, 45, 56.6]], { 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: 'barTitle2', type: 'text' },
[13, 42, 56.89]
);
expect(mockDB.setLineData).toHaveBeenCalledWith( expect(mockDB.setLineData).toHaveBeenCalledWith(
{ text: 'lineTitle1', type: 'text' }, { text: 'lineTitle1', type: 'text' },
[11, 45.5, 67, 23] [11, 45.5, 67, 23]
@@ -428,12 +432,14 @@ describe('Testing xychart jison file', () => {
{ text: 'category 2', type: 'text' }, { text: 'category 2', type: 'text' },
{ text: 'category3', type: 'text' }, { text: 'category3', type: 'text' },
]); ]);
expect(mockDB.setBarData).toHaveBeenCalledWith([ expect(mockDB.setBarData).toHaveBeenCalledWith(
[{ text: 'barTitle1', type: 'text' }, [23, 45, 56.6]], { 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: 'barTitle2', type: 'text' },
[13, 42, 56.89]
);
expect(mockDB.setLineData).toHaveBeenCalledWith( expect(mockDB.setLineData).toHaveBeenCalledWith(
{ text: 'lineTitle1', type: 'text' }, { text: 'lineTitle1', type: 'text' },
[11, 45.5, 67, 23] [11, 45.5, 67, 23]
@@ -448,31 +454,43 @@ describe('Testing xychart jison file', () => {
describe('multiple datasets', () => { describe('multiple datasets', () => {
it('parse 2 datasets', () => { it('parse 2 datasets', () => {
const str = 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
expect(mockDB.setBarData).toHaveBeenCalledWith([ expect(mockDB.setBarData).toHaveBeenNthCalledWith(
[ 1,
[{ text: 'barTitle1', type: 'text' }, [23, 45, 56.6]], { text: 'barTitle1', type: 'text' },
[{ text: 'barTitle2', type: 'text' }, [13, 42, 56.89]], [23, 45, 56.6]
], );
]); expect(mockDB.setBarData).toHaveBeenNthCalledWith(
2,
{ text: 'barTitle2', type: 'text' },
[13, 42, 56.89]
);
}); });
it('parse 3 datasets', () => { it('parse 3 datasets', () => {
const str = 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
expect(mockDB.setBarData).toHaveBeenCalledWith([ expect(mockDB.setBarData).toHaveBeenNthCalledWith(
[ 1,
[{ text: 'barTitle1', type: 'text' }, [23, 45, 56.6]], { text: 'barTitle1', type: 'text' },
[{ text: 'barTitle2', type: 'text' }, [13, 42, 56.89]], [23, 45, 56.6]
[{ text: 'barTitle3', type: 'text' }, [18, 37, 56.1]], );
], 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]
);
}); });
}); });
}); });

13
packages/mermaid/src/diagrams/xychart/xychartDb.ts
View File

@@ -169,23 +169,14 @@ function setLineData(title: NormalTextType, data: number[]) {
plotIndex++; plotIndex++;
} }
type NamedDataset = [title: NormalTextType, data: number[]]; function setBarData(title: NormalTextType, data: number[]) {
const plotData = transformDataWithoutCategory(data);
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({ xyChartData.plots.push({
type: 'bar', type: 'bar',
fill: getPlotColorFromPalette(plotIndex), fill: getPlotColorFromPalette(plotIndex),
data: plotData, data: plotData,
}); });
plotIndex++; plotIndex++;
});
} }
function getDrawableElem(): DrawableElem[] { function getDrawableElem(): DrawableElem[] {

4
packages/mermaid/src/docs/syntax/xyChart.md
View File

@@ -23,7 +23,9 @@ xychart-beta
title "Basic xychart with multiple datasets" title "Basic xychart with multiple datasets"
x-axis "Relevant categories" [category1, "category 2", category3, category4] x-axis "Relevant categories" [category1, "category 2", category3, category4]
y-axis Animals 0 --> 160 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 ### combined bar/line chart displaying 2 datasets